@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
/* Friends of the Ruin — shared stylesheet.
   Every primitive the eight pages use lives here: tokens on :root, then
   type, layout, components, and the breakpoint rules. Pages carry classes;
   the only inline styles left are content-specific geometry (a headline's
   ch width, a photo's aspect ratio, a card grid's --min). */

/* ------------------------------------------------------------------ tokens */
:root {
  /* color */
  --fr-paper: #FEFEFC;   /* was #F4F1EA — white-throughout test */
  --fr-parch: #FEFEFC;   /* was #EAE2D2 */
  --fr-ink: #16150F;
  --fr-forest: #1E3A2B;
  --fr-rust: #A84E0A;
  --fr-amber: #C9803F;
  --fr-white: #FFFFFF;
  --fr-ink-2: rgba(22,21,15,0.75);   /* body and secondary text */
  --fr-ink-3: rgba(22,21,15,0.55);   /* muted */
  --fr-ink-4: rgba(22,21,15,0.45);   /* captions, credits */
  --fr-line: rgba(22,21,15,0.14);
  --fr-line-strong: rgba(22,21,15,0.24);
  --fr-paper-2: rgba(244,241,234,0.8);  /* text on forest */
  --fr-paper-3: rgba(244,241,234,0.5);  /* muted on forest */
  --fr-paper-line: rgba(244,241,234,0.2);

  /* type */
  --fr-serif: 'Newsreader', Georgia, serif;
  --fr-sans: 'Archivo', Helvetica, Arial, sans-serif;
  --fr-mono: 'IBM Plex Mono', monospace;
  --fr-sans-cond: 'IBM Plex Sans Condensed', 'Archivo Narrow', sans-serif;
  --fr-fs-body: 16.5px;
  --fr-fs-small: 14px;
  --fr-fs-ui: 12px;
  --fr-fs-label: 10.5px;
  --fr-fs-display: clamp(40px, 6vw, 96px);
  --fr-fs-heading: clamp(28px, 3.4vw, 52px);
  --fr-fs-subhead: clamp(22px, 2.2vw, 30px);
  --fr-track-wide: 0.2em;
  --fr-track: 0.16em;
  --fr-track-tight: 0.08em;
  --fr-track-display: -0.025em;
  --fr-track-head: -0.016em;
  --fr-lh-display: 1.0;
  --fr-lh-heading: 1.05;
  --fr-lh-subhead: 1.16;
  --fr-lh-body: 1.7;
  --fr-lh-mono: 1.95;

  /* space */
  --fr-s1: 8px;
  --fr-s2: 12px;
  --fr-s3: 16px;
  --fr-s4: 24px;
  --fr-s5: 32px;
  --fr-s6: 40px;
  --fr-s7: 56px;
  --fr-s8: 72px;
  --fr-gap-col: clamp(16px, 3vw, 48px);
  --fr-gap-wide: clamp(40px, 6vw, 110px);
  --fr-pad-section: clamp(72px, 8vw, 110px);
  --fr-pad-section-b: clamp(48px, 6vw, 80px);
  --fr-gx: 44px;

  /* measure and edges */
  --fr-measure: 74ch;
  --fr-measure-narrow: 60ch;
  --fr-measure-legal: 96ch;
  --fr-container: 1560px;
  --fr-shadow: 0 1px 0 rgba(22,21,15,0.1);
  --fr-radius: 2px;
}
@media (max-width: 1024px) { :root { --fr-gx: 36px; } }
@media (max-width: 720px)  { :root { --fr-gx: 24px; } }
@media (max-width: 400px)  { :root { --fr-gx: 20px; } }

/* ------------------------------------------------------------------- base */
html, body { margin: 0; padding: 0; background: var(--fr-paper); }
* { box-sizing: border-box; }
.page {
  background: var(--fr-paper);
  color: var(--fr-ink);
  font-family: var(--fr-sans);
  font-size: var(--fr-fs-body);
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fr-ink); }   /* hover darkens one step, never changes hue */
::selection { background: var(--fr-rust); color: var(--fr-paper); }
img { display: block; max-width: 100%; }
img.full { width: 100%; height: auto; object-fit: cover; }
img.cover { width: 100%; height: 100%; object-fit: cover; }
img.contain { width: 100%; height: 100%; object-fit: contain; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul.plain { padding: 0; list-style: none; }
button { font: inherit; border: none; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fr-rust); outline-offset: 3px; }

/* ------------------------------------------------------------------- type */
.display, .heading, .subhead { font-family: var(--fr-serif); }
.display { font-size: var(--fr-fs-display); font-weight: 200; line-height: var(--fr-lh-display); letter-spacing: var(--fr-track-display); text-wrap: balance; }
.heading { font-size: var(--fr-fs-heading); font-weight: 200; line-height: var(--fr-lh-heading); letter-spacing: var(--fr-track-display); text-wrap: balance; }
.subhead { font-size: var(--fr-fs-subhead); font-weight: 300; line-height: var(--fr-lh-subhead); letter-spacing: var(--fr-track-head); text-wrap: pretty; }
.light { font-weight: 200; }

.body  { font-size: var(--fr-fs-body); line-height: var(--fr-lh-body); text-wrap: pretty; }
.small { font-size: var(--fr-fs-small); }
.ui    { font-size: var(--fr-fs-ui); font-weight: 500; letter-spacing: var(--fr-track-tight); text-transform: uppercase; }

.label, .eyebrow, .meta, .legal { font-family: var(--fr-mono); }
.label   { font-size: var(--fr-fs-label); letter-spacing: var(--fr-track); text-transform: uppercase; }
.eyebrow { font-size: var(--fr-fs-label); letter-spacing: var(--fr-track-wide); text-transform: uppercase; }
.meta    { font-size: var(--fr-fs-ui); letter-spacing: var(--fr-track-tight); }
.legal   { font-size: var(--fr-fs-label); letter-spacing: var(--fr-track-tight); text-transform: uppercase; line-height: var(--fr-lh-mono); max-width: var(--fr-measure-legal); }
.wide  { letter-spacing: var(--fr-track-wide); }
.tight { letter-spacing: var(--fr-track-tight); }
.up { text-transform: uppercase; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.italic { font-style: italic; }
.bold { font-weight: 600; }

/* color modifiers */
.ink   { color: var(--fr-ink); }
.ink-2 { color: var(--fr-ink-2); }
.ink-3 { color: var(--fr-ink-3); }
.ink-4 { color: var(--fr-ink-4); }
.rust  { color: var(--fr-rust); }
.amber { color: var(--fr-amber); }
.paper-1 { color: var(--fr-paper); }
.paper-2 { color: var(--fr-paper-2); }
.paper-3 { color: var(--fr-paper-3); }

/* measure */
.measure   { max-width: var(--fr-measure); }
.measure-n { max-width: var(--fr-measure-narrow); }
.measure-l { max-width: var(--fr-measure-legal); }

/* ----------------------------------------------------------------- layout */
.wrap { max-width: var(--fr-container); margin-left: auto; margin-right: auto; padding-left: var(--fr-gx); padding-right: var(--fr-gx); }
.wrap-0 { max-width: var(--fr-container); margin-left: auto; margin-right: auto; }   /* container without gutters */
.gx { padding-left: var(--fr-gx); padding-right: var(--fr-gx); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; }
.row-nw { display: flex; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.ai-b { align-items: baseline; }
.ai-c { align-items: center; }
.ai-s { align-items: flex-start; }
.ai-e { align-items: flex-end; }
.ai-end { align-items: end; }
.ai-start { align-items: start; }
.grow { flex: 1 1 0; min-width: 0; }
.none { flex: none; }
.minw0 { min-width: 0; }
.fb-340 { flex: 1 1 340px; min-width: 0; }
.fb-420 { flex: 1 1 420px; min-width: 0; }
.fb-460 { flex: 1 1 460px; min-width: 0; }
.fb2-420 { flex: 2 1 420px; min-width: 0; }
/* in a column stack the basis would become a height */
.stack > .fb-340, .stack > .fb-420, .stack > .fb-460, .stack > .fb2-420 { flex-basis: auto; }
.self-start { align-self: flex-start; }
.self-stretch { align-self: stretch; }
.block { display: block; }
.inline-block { display: inline-block; }
.rel { position: relative; }
.abs-fill { position: absolute; inset: 0; }

.g1 { gap: var(--fr-s1); } .g2 { gap: var(--fr-s2); } .g3 { gap: var(--fr-s3); } .g4 { gap: var(--fr-s4); }
.g5 { gap: var(--fr-s5); } .g6 { gap: var(--fr-s6); } .g7 { gap: var(--fr-s7); } .g8 { gap: var(--fr-s8); }
.gcol { gap: var(--fr-gap-col); }
.gwide { gap: var(--fr-gap-wide); }
.g-hair { gap: 1px; }
.gr1 { row-gap: var(--fr-s1); } .gr2 { row-gap: var(--fr-s2); } .gr3 { row-gap: var(--fr-s3); } .gr4 { row-gap: var(--fr-s4); } .gr6 { row-gap: var(--fr-s6); }

.pt-1 { padding-top: var(--fr-s1); } .pt-2 { padding-top: var(--fr-s2); } .pt-3 { padding-top: var(--fr-s3); } .pt-4 { padding-top: var(--fr-s4); }
.pt-5 { padding-top: var(--fr-s5); } .pt-6 { padding-top: var(--fr-s6); } .pt-7 { padding-top: var(--fr-s7); } .pt-8 { padding-top: var(--fr-s8); }
.pb-1 { padding-bottom: var(--fr-s1); } .pb-2 { padding-bottom: var(--fr-s2); } .pb-3 { padding-bottom: var(--fr-s3); } .pb-4 { padding-bottom: var(--fr-s4); }
.pb-5 { padding-bottom: var(--fr-s5); } .pb-6 { padding-bottom: var(--fr-s6); } .pb-7 { padding-bottom: var(--fr-s7); } .pb-8 { padding-bottom: var(--fr-s8); }
.p-5 { padding: var(--fr-s5); }
.pt-sec { padding-top: var(--fr-pad-section); }
.pb-sec { padding-bottom: var(--fr-pad-section); }
.pb-secb { padding-bottom: var(--fr-pad-section-b); }
.mt-1 { margin-top: var(--fr-s1); } .mt-2 { margin-top: var(--fr-s2); } .mt-4 { margin-top: var(--fr-s4); } .mt-5 { margin-top: var(--fr-s5); } .mt-6 { margin-top: var(--fr-s6); } .mt-7 { margin-top: var(--fr-s7); } .mt-8 { margin-top: var(--fr-s8); }
.mt-sec { margin-top: var(--fr-pad-section); }
.mb-1 { margin-bottom: var(--fr-s1); } .mb-4 { margin-bottom: var(--fr-s4); }

/* surfaces and rules */
.paper { background: var(--fr-paper); }
.parch { background: var(--fr-parch); }
.forest { background: var(--fr-forest); color: var(--fr-paper); }
.white { background: var(--fr-white); }
.bt { border-top: 1px solid var(--fr-line); }
.bb { border-bottom: 1px solid var(--fr-line); }
.bt-strong { border-top: 1px solid var(--fr-line-strong); }
.bb-strong { border-bottom: 1px solid var(--fr-line-strong); }
.bt-rust { border-top: 2px solid var(--fr-rust); }
.bt-paper { border-top: 1px solid var(--fr-paper-line); }
.rule { border-top: 1px solid var(--fr-line); }

/* grids */
.split { display: grid; grid-template-columns: minmax(0, 0.28fr) minmax(0, 1.72fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); }
.grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); }
.grid-hair { gap: 1px; background: var(--fr-line-strong); border: 1px solid var(--fr-line-strong); }

/* timeline row: year | category | text */
.tl { display: grid; grid-template-columns: clamp(58px, 8vw, 110px) clamp(84px, 11vw, 150px) minmax(0, 1fr); gap: var(--fr-gap-col); align-items: baseline; }
.tl-wide { grid-template-columns: clamp(58px, 8vw, 110px) minmax(180px, 240px) minmax(0, 1fr); align-items: initial; }
.tl-2 { grid-template-columns: clamp(58px, 8vw, 110px) minmax(0, 1fr); align-items: initial; }
/* deep-dive row: label | thumbnail | text */
.deep { display: grid; grid-template-columns: clamp(96px, 12vw, 180px) minmax(0, 1fr) minmax(0, auto); gap: var(--fr-gap-col); align-items: baseline; }
/* selected works row (Renwick) */
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fr-s1); }

/* ------------------------------------------------------------- components */
.header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fr-s6); padding: var(--fr-s4) var(--fr-gx); background: #FEFEFC; }
.header .logo { height: 58px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--fr-s5); }
.nav a { color: var(--fr-ink-2); }
.nav.ui { font-family: var(--fr-sans-cond); font-size: 17px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.nav a:hover { color: var(--fr-ink); }
.nav-cta, .nav a.nav-cta { color: var(--fr-rust); }
.nav-cta:hover, .nav a.nav-cta:hover { color: #7A3907; }

.link-u { color: var(--fr-rust); border-bottom: 1px solid var(--fr-rust); padding-bottom: 5px; }
.link-u:hover { color: #7A3907; border-bottom-color: #7A3907; }
.link-u.amber { color: var(--fr-amber); border-bottom-color: var(--fr-amber); }
.link-u.amber:hover { color: var(--fr-paper); border-bottom-color: var(--fr-paper); }
.link-quiet { color: inherit; border-bottom: 1px solid var(--fr-line-strong); }
.link-quiet:hover { color: var(--fr-ink); border-bottom-color: var(--fr-ink); }

.btn { display: inline-block; padding: 20px 52px; background: var(--fr-rust); color: var(--fr-paper); font-size: var(--fr-fs-ui); font-weight: 600; letter-spacing: var(--fr-track); text-transform: uppercase; border-radius: var(--fr-radius); }
.btn:hover { background: var(--fr-paper); color: var(--fr-ink); }
.forest .btn:hover { background: var(--fr-paper); color: var(--fr-ink); }

.tabs { display: flex; align-self: flex-start; border: 1px solid var(--fr-line-strong); }
.tab { padding: 14px 30px; font-family: var(--fr-mono); font-size: var(--fr-fs-label); letter-spacing: var(--fr-track-wide); text-transform: uppercase; background: transparent; color: var(--fr-ink-3); }
.tab.on { background: var(--fr-forest); color: var(--fr-paper); }

.amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--fr-line-strong); border: 1px solid var(--fr-line-strong); }
.amt { padding: 30px 20px; font-family: var(--fr-serif); font-weight: 300; font-size: var(--fr-fs-subhead); letter-spacing: -0.01em; background: var(--fr-paper); color: var(--fr-ink); }
.amt.other { font-size: var(--fr-fs-body); }
.amt:hover { background: var(--fr-parch); }
.amt.on, .amt.on:hover { background: var(--fr-forest); color: var(--fr-paper); }

.card { background: var(--fr-paper); padding: var(--fr-s6) var(--fr-s5); display: flex; flex-direction: column; gap: var(--fr-s2); }
.card-sm { background: var(--fr-paper); padding: var(--fr-s5); display: flex; flex-direction: column; gap: var(--fr-s1); }

.mount { background: var(--fr-white); padding: clamp(14px, 1.6vw, 26px); box-shadow: var(--fr-shadow); }
.figcap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fr-s2) var(--fr-s5); padding-top: var(--fr-s1); font-family: var(--fr-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fr-ink-3); }
.figcap-over { position: absolute; right: var(--fr-gx); bottom: var(--fr-s3); font-family: var(--fr-mono); font-size: var(--fr-fs-label); letter-spacing: var(--fr-track); text-transform: uppercase; color: var(--fr-paper-2); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.fig { line-height: 0; position: relative; }
.tick { display: block; width: 22px; height: 2px; background: currentColor; }

.footer { background: var(--fr-paper); border-top: 1px solid var(--fr-line); padding: var(--fr-s8) var(--fr-gx) var(--fr-s6); }
.footer .logo { height: 64px; width: auto; flex: none; }
.footer .small { color: var(--fr-ink-2); }

/* image-slot wrappers: the element sizes itself from its wrapper's box */
.slot-380 { height: 380px; }
.slot-fluid { height: clamp(260px, 26vw, 380px); }
.slot-short { height: clamp(200px, 20vw, 280px); }
.slot-tall { height: clamp(340px, 44vw, 620px); }
.slot-min { align-self: stretch; min-height: 420px; }
.slot-min-s { align-self: stretch; min-height: 340px; }
/* stacked under text, the photo keeps its own proportions */
.stack > .slot-min:not(.grow) { min-height: 0; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .header { gap: var(--fr-s3) var(--fr-s4); padding-top: 18px; padding-bottom: 18px; }
  .header .logo { height: 46px; }
  .nav { gap: 20px; }
}
@media (max-width: 400px) {
  .header .logo { height: 40px; }
  .nav { gap: var(--fr-s3); }
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .split > :first-child { padding-top: 0; }
}
@media (max-width: 960px) {
  .cols3 { grid-template-columns: minmax(0, 1fr); }
  .cols3 > p { max-width: 62ch; }
}
@media (max-width: 560px) {
  .amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amt { padding: 22px 14px; }
}
@media (max-width: 400px) {
  .tab { padding: 14px 18px; }
}
@media (max-width: 720px) {
  .tl { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
  .tl > :nth-child(3) { grid-column: 1 / -1; }
  .tl-2, .tl-wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
  .deep { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .deep > :nth-child(2) { max-width: 420px; }
}
@media (max-width: 720px) {
  .work { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .work > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------- story timeline */
/* Each dated entry is a native <details>: the year, strand and headline stay
   on the spine; the paragraph opens on click. The spine is one hairline with
   a dot per entry; Building entries are Ink, Disease entries Terracotta. */
.spine { position: relative; }
.spine::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(max(0px, (100% - var(--fr-container)) / 2) + var(--fr-gx) + 4px); border-left: 1px solid var(--fr-line-strong); }
.entry { display: block; }
.entry-head, .entry-body, .spine .tl-wide {
  display: grid;
  grid-template-columns: 18px clamp(58px, 8vw, 110px) clamp(84px, 11vw, 150px) minmax(0, 1fr);
  gap: var(--fr-gap-col); align-items: baseline;
}
.entry-head { position: relative; padding: var(--fr-s4) 0; cursor: pointer; list-style: none; row-gap: 4px; }
.entry-head::-webkit-details-marker { display: none; }
.entry-head::before { content: ""; grid-column: 1; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--fr-paper); border: 1.5px solid var(--fr-ink-3); box-sizing: border-box; position: relative; z-index: 1; }
.parch .entry-head::before { background: var(--fr-parch); }
.entry.disease .entry-head::before { border-color: var(--fr-rust); }
.entry[open] .entry-head::before { background: var(--fr-ink-3); }
.entry.disease[open] .entry-head::before { background: var(--fr-rust); }
.entry-head .subhead { transition: color .15s; }
.entry-head:hover .subhead { color: var(--fr-rust); }
.entry-head:focus-visible { outline: 2px solid var(--fr-rust); outline-offset: -2px; }
.entry-head .hint { grid-column: 4; font-family: var(--fr-mono); font-size: var(--fr-fs-label); letter-spacing: var(--fr-track); text-transform: uppercase; color: var(--fr-ink-4); }
.entry[open] .entry-head .hint { display: none; }
.entry-body { padding-bottom: var(--fr-s5); }
.entry-body > * { grid-column: 4; }
.spine .tl-wide > :first-child { grid-column: 2; }

/* act strip: table of contents that follows the reader */
.act-strip { position: sticky; top: 0; z-index: 5; background: var(--fr-paper); border-bottom: 1px solid var(--fr-line); }
.act-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-s2) var(--fr-s5); padding-top: 14px; padding-bottom: 14px; }
.act-strip nav { display: flex; flex-wrap: wrap; gap: var(--fr-s2) var(--fr-s5); }
.act-strip a { font-family: var(--fr-mono); font-size: var(--fr-fs-label); letter-spacing: var(--fr-track); text-transform: uppercase; color: var(--fr-ink-3); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.act-strip a:hover { color: var(--fr-ink); }
.act-strip a.on { color: var(--fr-rust); border-bottom-color: var(--fr-rust); }
.act-strip a b { font-weight: 400; color: var(--fr-ink-4); margin-left: 6px; }

@media (max-width: 720px) {
  .entry-head, .entry-body, .spine .tl-wide { grid-template-columns: 18px auto minmax(0, 1fr); gap: 10px 16px; }
  .entry-head > h3, .entry-head .hint { grid-column: 2 / -1; }
  .entry-body > * { grid-column: 2 / -1; }
  .spine .tl-wide > * { grid-column: 2 / -1; }
  .spine .tl-wide > :nth-child(2) { max-width: 260px; }
  .act-strip a b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .entry-head .subhead { transition: none; } }

/* ------------------------------------------ white throughout (temporary)
   Forest bands render as white with ink text. Delete this block to restore. */
.forest { background: var(--fr-paper); color: var(--fr-ink); }
.forest .paper-1 { color: var(--fr-ink); }
.forest .paper-2 { color: var(--fr-ink-2); }
.forest .paper-3 { color: var(--fr-ink-3); }
.forest .amber, .forest .eyebrow.amber { color: var(--fr-rust); }
.forest .bt-paper, .bt-paper { border-top-color: var(--fr-line); }
.forest .link-u.amber { color: var(--fr-rust); border-bottom-color: var(--fr-rust); }
.forest .link-u.amber:hover { color: var(--fr-ink); border-bottom-color: var(--fr-ink); }
.forest + .forest, section.forest { border-top: 1px solid var(--fr-line); }
.btn:hover, .forest .btn:hover { background: #7A3907; color: var(--fr-paper); }

/* ------------------------------------------------ homepage primitives, site-wide
   Headings Cormorant Garamond · reading text Archivo · clickable UI IBM Plex Sans
   Condensed · no all-caps · hover darkens one step. */
:root { --fr-container: 1240px; --fr-pad-section: clamp(32px, 4vw, 48px); --fr-pad-section-b: clamp(24px, 3vw, 40px); }
.display, .heading, .subhead { font-family: 'Cormorant Garamond', Georgia, serif; letter-spacing: -0.015em; }
.display { font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; }
.heading { font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.subhead { font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -0.005em; }
.subhead.light, .light { font-weight: 400; }
.eyebrow { font-family: var(--fr-sans-cond); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow.rust { color: var(--fr-ink-3); }
.label { font-family: var(--fr-sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.meta { font-family: var(--fr-sans-cond); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.legal { font-family: var(--fr-sans); font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--fr-ink-3); }
.ui { letter-spacing: 0; text-transform: none; }
.link-u { font-family: var(--fr-sans-cond); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; border-bottom: none; padding-bottom: 0; }
.btn { padding: 10px 32px; font-family: var(--fr-sans-cond); font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #FFFFFF; }
.btn:hover, .forest .btn:hover { background: #7A3907; color: #FFFFFF; }
.tab { font-family: var(--fr-sans-cond); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 10px 24px; }
.tab:hover { color: var(--fr-ink); }
.tab.on:hover { color: var(--fr-paper); }
.amt { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.amt.other { font-family: var(--fr-sans-cond); font-size: 16px; }
.act-strip a { font-family: var(--fr-sans-cond); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.act-strip a.on { color: var(--fr-ink); border-bottom-color: var(--fr-ink); }
.entry-head .hint { font-family: var(--fr-sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.entry-head:hover .subhead { color: var(--fr-ink-2); }
.figcap-over { font-family: var(--fr-sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.card { padding: var(--fr-s5) var(--fr-s4); }
.forest + .forest, section.forest { border-top: none; }
.bt-paper, .forest .bt-paper { border-top: none; }
.tab.on, .amt.on, .amt.on:hover { background: var(--fr-ink); color: var(--fr-paper); }
.display, .heading { max-width: 28ch !important; }
.mount { background: none; padding: 0; box-shadow: none; }
.figcap { justify-content: flex-start; column-gap: 6px; }
.grid-hair { background: none; border: none; gap: 0 var(--fr-gap-col); }
.grid-hair > * { border-top: 1px solid var(--fr-line); background: transparent; }
.split { grid-template-columns: minmax(0, 1fr); gap: var(--fr-s4); }
.forest .stack.g3.measure > p { max-width: var(--fr-measure); }
p.subhead.light { font-family: var(--fr-sans); font-size: var(--fr-fs-body); line-height: var(--fr-lh-body); font-weight: 400; letter-spacing: 0; color: var(--fr-ink-2); }

/* single-column content, like the homepage */
.figcap > span + span::before { content: none; }
.cards, .cols3 { grid-template-columns: minmax(0, 1fr); }
.cols3:has(> .amt) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--fr-line-strong); border: 1px solid var(--fr-line-strong); }
.cols3:has(> .amt) > * { border-top: none; }
@media (max-width: 560px) { .cols3:has(> .amt) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-hair > .card, .grid-hair > .card-sm { padding: var(--fr-s4) 0; }
.bb-strong + .grid-hair > :first-child, .bb-strong + * > :first-child { border-top: none; }
.bb-strong { border-bottom-color: var(--fr-line); }
.tl > .label, .entry-head > .label { white-space: nowrap; }
@media (min-width: 721px) {
  .tl:not(.tl-2):not(.tl-wide) { grid-template-columns: clamp(58px, 8vw, 110px) 170px minmax(0, 1fr); }
  .entry-head, .entry-body, .spine .tl-wide { grid-template-columns: 18px clamp(58px, 8vw, 110px) 170px minmax(0, 1fr); }
}

.grid-hair > .amt { background: var(--fr-paper); border-top: none; }
.grid-hair > .amt:hover { background: #F4F1EA; }
.grid-hair > .amt.on, .grid-hair > .amt.on:hover { background: var(--fr-ink); color: var(--fr-paper); }
.cards { gap: var(--fr-s4) !important; }
.tl.tl-2 { grid-template-columns: minmax(0, 1fr); }
.tl.tl-2 > .label.rust:first-child { display: none; }

/* The Story: always-open, compact timeline */
.entry-head { cursor: default; padding: var(--fr-s3) 0 4px; }
.entry-head:hover .subhead { color: inherit; }
.entry-body { padding-bottom: var(--fr-s3); }
.entry-body > p { max-width: var(--fr-measure); }
.entry.disease .entry-head::before { background: var(--fr-rust); }
.entry.building .entry-head::before { background: var(--fr-ink-3); }
.act-head { padding-top: clamp(32px, 4vw, 48px); padding-bottom: var(--fr-s4); }
.act-head .eyebrow { color: var(--fr-ink-3); }
.act-strip a b { margin-left: 8px; }
.entry.same-year .entry-head { padding-top: 0; }

section[id^="act-"] { scroll-margin-top: 64px; }
.act-strip .wrap { justify-content: flex-start; column-gap: var(--fr-s5); }
.act-strip-label { font-family: var(--fr-sans); font-size: 13px; color: var(--fr-ink-3); }
.act-strip nav { column-gap: var(--fr-s5); }
.act-strip a { color: var(--fr-ink-2); }
.act-strip a:hover { color: var(--fr-ink); border-bottom-color: var(--fr-line-strong); }
.act-strip a b { font-family: var(--fr-sans); font-size: 13px; font-weight: 400; color: var(--fr-ink-3); margin: 0 8px 0 0; }
@media (max-width: 720px) { .act-strip a b { display: inline; } .act-strip-label { display: none; } }

.act-strip .wrap { flex-wrap: nowrap; align-items: baseline; }
.act-strip-label { flex: none; }
.act-strip nav { flex: 1 1 auto; min-width: 0; column-gap: var(--fr-s4); row-gap: 6px; }
@media (max-width: 1100px) { .act-strip-label { display: none; } .act-strip a b { display: none; } }
section[id^="act-"] { scroll-margin-top: 130px; }

.chron { padding: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; list-style: none; }
.chron > li { padding: var(--fr-s3) 0; border-top: 1px solid var(--fr-line); align-items: baseline; }
.chron > li:last-child { border-bottom: 1px solid var(--fr-line); }
.chron .meta { white-space: nowrap; }