/* type.css — display scale, section headers, editorial rhythm. Owner piece: "typography"

   The system, in one line: a transitional serif carries the voice (page titles,
   section titles), the grotesque carries the data (labels, indexes, body, lists).
   Two families, five sizes, decisive jumps between them. Nothing in between. */

:root {
  /* Local-only display serif — no webfont, no CDN. Ordered by how well each
     holds at 140px: Hoefler Text first, then Baskerville, then the fallbacks. */
  --display: "Hoefler Text", Baskerville, "Iowan Old Style", "Palatino Linotype",
             Palatino, Georgia, "Times New Roman", serif;

  /* One editorial spine, shared by .page-head and .sec-head so every section
     title, deck and index sits on the same two vertical lines down the page. */
  --spine: minmax(0, 1.3fr) minmax(0, 1fr);
  --spine-gap: clamp(18px, 3vw, 60px);
}

h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; }

/* ── Display ─────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-kerning: normal;
  font-variant-numeric: lining-nums;      /* Hoefler defaults to old-style: "3D", "1999" need lining */
  font-variant-ligatures: common-ligatures;
}

.display {
  font-size: clamp(42px, 8vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.018em;               /* serif at display size needs far less negative than the sans did */
  text-wrap: balance;
}

/* ── Descenders under a reveal mask ──────────────────────────────────────────
   The mask clips on its own box, so the descender of every masked line has to be
   paid for or it is cut off flat — the "g" of "sagl.". 0.1em covered Hoefler
   Text and nothing else: the stack's Windows fallback is Palatino Linotype,
   whose g hangs ~0.24em under the baseline, and it lost the tail on every
   machine without the mac serif.

   The padding goes on the MASK, cancelled by an equal negative margin, not on
   the span inside it. On the span it bought the descender at two costs: the
   extra height landed between one mask and the next but not between two lines
   INSIDE a mask, so a title that wrapped had 0.84em of leading in one place and
   1.04em in the other — 23% ragged on the studio's own name; and it grew the
   span the hidden transform is measured against without growing the transform,
   so 105% of the box no longer cleared the clip and the tops of the letters sat
   visible above the title for the third of a second before the reveal fired.
   On the mask, overflow:hidden still clips at the PADDING box, so the visible
   region grows downward while the box the next line stacks against does not
   move. Leading is exactly line-height, everywhere, wrapped or not. */
.display .line-mask { padding-bottom: 0.22em; margin-bottom: -0.22em; }

/* ── Page head ───────────────────────────────────────────────────────────── */

/* Title and deck are one masthead on one line, not a title with a caption that
   fell to the bottom of the page. The previous revision ran the title the full
   measure and dropped the deck into the second column BELOW it: because every
   title here is two or three short lines, that left a hole the width of the
   right column and the height of the title with nothing in it, and pushed the
   deck most of a screen down from the words it belongs to. The title now takes
   the wide column and the deck hangs off the top of the narrow one, on the same
   rule .sec-head uses — so the right side is occupied and the two read together. */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  column-gap: var(--spine-gap);
  align-items: start;
  padding: calc(var(--nav-h) + clamp(52px, 8vw, 132px)) 0 clamp(36px, 5vw, 72px);
}
.page-head h1 {
  grid-column: 1;
  grid-row: 1;
  /* Bounded by its column now, so the cap comes down from 142px: at 142 the long
     studio name needed the whole measure and there was no second column left to
     stand the deck in. */
  font-size: clamp(44px, 7.1vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.022em;
  margin-left: -0.03em;                   /* hang the first cap's side bearing off the grid */
}
.page-head .lede {
  grid-column: 2;
  grid-row: 1;
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--rule-strong);
  /* At line-height .86 the title's caps start within a hair of its box top, so
     the rule only needs the optical nudge, not a cap-height correction. */
  margin-top: clamp(4px, 0.5vw, 9px);
}

/* ── Section head: rule, index, title, note ──────────────────────────────── */

.sec-head {
  display: grid;
  grid-template-columns: var(--spine);    /* title column is the wide one, not the note */
  column-gap: var(--spine-gap);
  align-items: end;
  padding-top: clamp(24px, 2.8vw, 40px);
  border-top: 1px solid var(--rule-strong);
  margin-bottom: clamp(34px, 4.8vw, 76px);
}
.sec-head .idx {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.7vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.016em;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
  margin-left: -0.028em;
}
.sec-head p {
  color: var(--ink-2);
  max-width: 40ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  text-wrap: pretty;
  padding-bottom: 0.4em;                  /* drops the note's last baseline onto the title's */
}

/* ── Text ────────────────────────────────────────────────────────────────── */

.lede {
  font-size: clamp(17px, 1.78vw, 26px);
  line-height: 1.38;
  letter-spacing: -0.011em;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;                      /* no one-word last line under a 142px title */
}

.body-lg {
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.64;
  color: var(--ink-2);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ── Rhythm ──────────────────────────────────────────────────────────────── */

/* Sections sit next to each other, so a symmetric pad is paid twice at every
   seam — 168 top + 168 bottom + the sec-head rule offset read as a ~300px hole
   between blocks, which looks like a failed image, not like rhythm. The space
   now belongs to the top of each section, and consecutive sections don't
   double it. */
.section { padding: clamp(48px, 7vw, 104px) 0 clamp(24px, 3vw, 44px); }
.section.tight { padding: clamp(36px, 5vw, 72px) 0 clamp(20px, 2.5vw, 36px); }
.section + .section { padding-top: clamp(40px, 5.5vw, 84px); }

/* ── Links and buttons ───────────────────────────────────────────────────── */

.link-u { position: relative; display: inline-block; }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: left; }

.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 13px 24px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-pill .arr { transition: transform .35s var(--ease); }
.btn-pill:hover .arr { transform: translateX(4px); }

/* ── Narrow ──────────────────────────────────────────────────────────────── */

/* Below 860 the two columns stack: the deck goes back under the title, on its
   own row, and keeps the rule it hangs from. */
@media (max-width: 860px) {
  .page-head { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { grid-column: 1; margin-left: 0; }
  .page-head .lede {
    grid-column: 1; grid-row: 2;
    margin-top: clamp(22px, 3.4vw, 34px);
    padding-top: clamp(14px, 1.8vw, 20px);
  }
  .sec-head h2 { margin-left: 0; }
}