/* ===== tokens.css ===== */
/* ==========================================================================
   Bonarotus — design tokens. Spec §3 (colour) and §4 (type).

   USAGE RULES. These are not suggestions; violating them is what makes a
   pastel palette look amateur.

     1. Watercolour tints are for PIGMENT ONLY — strokes, washes, painted
        imagery. Never a UI fill, never a button, never a solid block.
     2. Deep hues carry type, rules and hover states.
     3. --lavender-deep is the single link and action colour.
     4. One phase hue per page, unless the page presents all three together.

   Contrast vs --paper, verified in tests/contrast.test.mjs and re-verified
   over the built CSS in tools/check.mjs:
     ink 18.28 · ink-soft 7.03 · ink-faint 5.07
     aqua-deep 6.24 · lavender-deep 7.88 · rose-deep 5.85
   ========================================================================== */

:root {
  /* --- Ground and ink -------------------------------------------------- */
  --paper:        #FFFFFF;
  --paper-deep:   #F4F3F1;
  --white:        #FFFFFF;
  --ink:          #16141A;
  --ink-soft:     #5C5760;
  --ink-faint:    #736C77;
  --rule:         #E6E4E0;
  /* Decorative dividers use --rule. Interactive control boundaries (form
     inputs, the nav toggle) use --border-strong instead: WCAG 2.1 SC 1.4.11
     asks 3:1 for UI-component boundaries, and --rule clears only ~1.2:1 on
     these grounds. Verified with tools/contrast.mjs against --white,
     --paper and --paper-deep: 4.30 and 4.19 — both above the 3:1 floor. */
  --border-strong: #807970;

  /* --- Phase hues — tint for pigment, deep for type -------------------- */
  --aqua:           #B0E1EE;
  --aqua-deep:      #17697F;
  --lavender:       #D5C5EA;
  --lavender-deep:  #5B3FA0;
  --rose:           #F8C5D1;
  --rose-deep:      #B03A58;

  /* --- Semantic aliases ------------------------------------------------ */
  --surface-page:   var(--paper);
  --surface-well:   var(--paper-deep);
  --surface-raised: var(--white);
  --text-body:      var(--ink);
  --text-muted:     var(--ink-soft);
  --text-faint:     var(--ink-faint);
  --border:         var(--rule);
  --action:         var(--lavender-deep);

  /* --- Type §4 ---------------------------------------------------------

     The *-Fallback families sit immediately after the real face. They are
     the same local system fonts named later in each stack, rescaled in
     base.css so that they occupy the real face's space — that is what makes
     `font-display: swap` safe to keep. "Newsreader" is gone from the display
     stack: it is not a system font, so it only ever resolved for the few
     people who happen to have it installed, and when it did it defeated the
     metric match. */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-text:    "Instrument Sans", "Instrument Fallback", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale. Display is used sparingly and large; body measure caps
     at ~68 characters (--measure below). */
  --t-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --t-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-lede:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-small:   0.875rem;
  --t-eyebrow: 0.75rem;

  /* --- Layout ---------------------------------------------------------- */
  /* Not `ch`. The ch unit is the advance of "0", and Instrument Sans sets a
     notably wide zero (0.666em) against an average character width of
     0.459em — so 68ch is ~98 rendered characters, half again the intended
     measure, and it also moves by −13.6% while the metrics-matched fallback
     is on screen, reflowing every prose column mid-swap. 31em is 68
     characters of Instrument Sans and cannot move. */
  --measure:      31em;
  --container:    1240px;
  --gutter:       clamp(1.5rem, 1rem + 3vw, 5rem);
  --section-y:    clamp(4.5rem, 3rem + 7vw, 11rem);

  /* --- Motion ---------------------------------------------------------- */
  --ease:     cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 1ms; }
}


/* ===== base.css ===== */
/* ==========================================================================
   Bonarotus — base. Self-hosted variable faces, no third-party request.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Metrics-matched fallbacks ---------------------------------------------

   `swap` above guarantees the brand face always renders rather than leaving a
   first-time visitor on Georgia for the whole page view. The cost is a reflow
   when the real face lands. These faces remove the reason it reflows: a local
   system font rescaled to occupy the same space as the real one.

   Derivation (tools were python3 + fontTools; full numbers in the commit):

     size-adjust       = avgWidth_real / avgWidth_fallback, both in em, where
                         avgWidth is the frequency-weighted mean advance of
                         a–z plus space in English running text. Not
                         OS/2.xAvgCharWidth, which is defined inconsistently
                         across foundries and is meaningless for a subset.
     ascent-override   = (ascender / unitsPerEm) / size-adjust
     descent-override  = (|descender| / unitsPerEm) / size-adjust
     line-gap-override = (lineGap / unitsPerEm) / size-adjust

   The overrides are divided by size-adjust because CSS resolves the metric
   overrides first and then scales every metric by size-adjust; without the
   division the scaling would be applied twice.

   Both real faces set OS/2 fsSelection bit 7 (USE_TYPO_METRICS), so the
   vertical numbers come from sTypoAscender/Descender/LineGap — which is the
   metric set a browser will use for them. Neither font has an MVAR table, so
   those numbers are constant across every variable instance.

   Two declarations for the serif: a later @font-face wins over an earlier one
   for the same family, and a face whose src cannot be resolved falls through
   to the previous match. Georgia is therefore tried first, with the
   Times-metric faces catching the platforms that lack it. Arial, Helvetica,
   Liberation Sans and Arimo are metrically identical, so the sans needs one.
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  size-adjust: 115.46%;
  ascent-override: 84.70%;
  descent-override: 22.09%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104.80%;
  ascent-override: 93.32%;
  descent-override: 24.33%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 103.45%;
  ascent-override: 93.77%;
  descent-override: 24.17%;
  line-gap-override: 0%;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

/* .eyebrow renders as either <span> or a heading tag (components.mjs's
   eyebrow()). As a class selector it already wins specificity over the
   h1, h2, h3 rule above for every property both set (font-size, via the
   type-selector h1/h2/h3 size rules, and letter-spacing) — but that rule
   also sets font-family and line-height, which .eyebrow left unset, so an
   <h2 class="eyebrow"> would pick up Fraunces at line-height 1.06 while an
   <span class="eyebrow"> inherits Instrument Sans at the body's 1.65. These
   two declarations exist purely so the tag choice cannot change how this
   renders. */
.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--text-muted); }
.measure { max-width: var(--measure); }

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--border); }

/* --- Focus and skip link --------------------------------------------------

   No border-radius here. An outline already follows the element's own
   corners, so setting a radius on :focus-visible does not round the ring —
   it squares off anything that was rounded, which would flatten the pill on
   .nav-toggle the moment it takes focus.
   ---------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip:focus { left: 0; }

::selection { background: var(--lavender); color: var(--ink); }


/* ===== components.css ===== */
/* ==========================================================================
   Shared components — header, footer, buttons, CTA band.
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--surface-page);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; gap: clamp(1.25rem, 2vw, 2.5rem); }

.site-nav a {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.site-nav a:hover { color: var(--text-body); border-bottom-color: var(--action); }
.site-nav a[aria-current="page"] { color: var(--text-body); border-bottom-color: var(--text-body); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--t-small);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.nav-toggle:hover { color: var(--text-body); border-color: var(--text-body); }

/* The open mobile nav is a wrapped third row of .header-inner, not an
   absolutely-positioned dropdown. Without JavaScript the <noscript> block in
   layout.mjs pins it open permanently; as a dropdown that would sit on top of
   the first screenful of every page for the whole visit. In flow it simply
   makes the header taller, which is correct in both states. */
@media (max-width: 47.9375rem) {
  .nav-toggle { display: block; }

  .header-inner { flex-wrap: wrap; gap: 0 2rem; }

  /* The wrapped nav is a second flex line, so it no longer contributes to
     .header-inner's min-height — without this the bar would collapse from
     5rem to the height of the toggle every time the menu opens, jumping the
     wordmark upward. The wordmark holds the first line open instead. */
  .header-inner .wordmark {
    display: flex;
    align-items: center;
    min-height: 5rem;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 1.25rem;
  }
  body.nav-open .site-nav { display: flex; }

  .site-nav a {
    padding-block: 0.9rem;
    font-size: 1.05rem;
    border-top: 1px solid var(--border);
    border-bottom: 0;
  }
}

/* --- Buttons -------------------------------------------------------------- */
/* Tokens §3 rule 1: never a pastel fill. Ink or lavender-deep only. */
.btn {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.btn:hover { background: var(--action); border-color: var(--action); color: var(--paper); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--action);
}
.link-arrow::after { content: "→"; transition: transform var(--duration) var(--ease); }
.link-arrow:hover::after { transform: translateX(0.25em); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding-block: 4rem 3rem;
  border-top: 1px solid var(--border);
  font-size: var(--t-small);
  color: var(--text-muted);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-nav a { color: var(--text-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text-body); }
.footer-nav a[aria-current="page"] { color: var(--text-body); }
/* 62 characters of Instrument Sans. em, not ch: `ch` is the width of "0",
   which in this face is far wider than the average character, and it shifts
   during the font swap. */
.disclaimer { margin-top: 1.25rem; max-width: 41.3em; color: var(--text-faint); font-size: 0.8125rem; line-height: 1.6; }
.copyright { margin-top: 1.75rem; color: var(--text-faint); font-size: 0.8125rem; }


/* ===== pages.css ===== */
/* ==========================================================================
   Page-level section layout.
   ========================================================================== */

/* --- Home hero ------------------------------------------------------------ */
.hero { padding-block: clamp(4rem, 2rem + 9vw, 9rem) clamp(3rem, 2rem + 5vw, 6rem); }

.hero-wordmark {
  /* Not --t-display on its own. The usable column is 0.94vw − 32px (the
     gutter takes 6vw + 32px) while --t-display floors at 2.75rem, so below
     ~358px "BONAROTUS" is wider than the page and forces horizontal scroll —
     `text-wrap: nowrap` cannot prevent that, since a single unbreakable word
     never wraps in the first place. The binding case is the fallback face,
     not Fraunces: Georgia at its matched size-adjust sets BONAROTUS at
     6.88em against Fraunces' 6.57em at this weight. 12vw keeps the worst
     case inside the column down to 320px. */
  font-size: min(var(--t-display), 12vw);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
}

.hero-positioning {
  margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  max-width: 18em;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--text-body);
  text-wrap: balance;
}

.hero-actions { margin-top: 2.5rem; }

/* "More about…" links that close out a home-page section preview. */
.more-link { margin-top: clamp(2rem, 1.5rem + 1vw, 2.5rem); }

/* Sized against two hard constraints, not taste.
   1. The source art is 1154px wide and cannot be enlarged — watercolour has no
      detail to recover. At the old 62rem (992px) the mark rendered at 1.16x on
      a 2x display and looked soft. 46rem gives ~1.57x, which reads crisp.
   2. At 62rem the mark stood 737px tall on top of a 7rem gap, making the hero
      1375px — 1.53 screens — so the second screenful was empty paper with the
      top edge of a stroke entering it. Generous whitespace is the direction;
      a screen of nothing is not the same thing. */
.hero-mark {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  margin-inline: auto;
  max-width: min(100%, 46rem);
}

/* --- Statement ------------------------------------------------------------ */
/* Lede paragraph directly under a page h1 (Method, The firm, People). */
.statement-lede { margin-top: 1.5rem; }


/* --- People --------------------------------------------------------------- */
/* Editorial columns, not a card grid. Ten unfamiliar names in cards read
   thinner than ten names well set. */
.people-list { margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem); }

.person {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.person + .person { border-top: 1px solid var(--border); }

/* 160px display against a 246px source — about 1.5x, which is as much density
   as the contact-sheet crops can carry. Going larger would only make them
   soft. See src/portraits/README.md for why no better source exists. */
.person-portrait {
  width: 160px;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.person-name { font-size: var(--t-h3); }
.person-role { margin-top: 0.5rem; font-size: var(--t-small); letter-spacing: 0.04em; color: var(--text-muted); }
.person-bio { max-width: var(--measure); }

/* The closing beat of every bio. Sits tighter to the paragraph above it than
   a normal paragraph gap, so it reads as the end of the bio rather than a
   separate note. */
.person-animal { margin-top: 0.75em; color: var(--text-muted); }

@media (max-width: 47.9375rem) {
  .person { grid-template-columns: 1fr; gap: 1rem; }
}


/* --- 404 ------------------------------------------------------------------ */
.notfound { padding-block: clamp(5rem, 3rem + 8vw, 10rem); text-align: center; }
.notfound-lede { margin-top: 1.5rem; }
.notfound-back { margin-top: 2.5rem; }

/* --- Notes ------------------------------------------------------------------
   Same editorial-column shape as .people-list / .person, but its own classes:
   the two pages are unrelated and shouldn't share a name a future restyle of
   one could silently break on the other. */
.notes-list { margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem); }

.note {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.note + .note { border-top: 1px solid var(--border); }

.note-title { font-size: var(--t-h3); }
.note-date { margin-top: 0.5rem; font-size: var(--t-small); letter-spacing: 0.04em; color: var(--text-muted); }
.note-body { max-width: var(--measure); }

@media (max-width: 47.9375rem) {
  .note { grid-template-columns: 1fr; gap: 1rem; }
}


/* --- Home: one screen, nothing else -------------------------------------- */
.hero--full { padding-block: clamp(3rem, 1rem + 7vw, 7rem) clamp(4rem, 2rem + 8vw, 9rem); }

/* --- The firm: the statement carries the page ---------------------------- */
.firm-statement {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 26em;
  text-wrap: pretty;
}

/* --- Our Partners --------------------------------------------------------- */
/* Hairlines ride on each cell as a 1px ring, not as a 1px gap over a coloured
   background. With a gap, any row that does not fill completely renders its
   empty tracks as a solid block of border colour — six partners in a four-up
   grid leaves two. Adjacent rings coincide exactly in the gap, so there is no
   doubling, and the perimeter closes itself at any column count. */
.partner-grid {
  list-style: none;
  padding: 0;
  margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
}

.partner {
  background: var(--surface-page);
  box-shadow: 0 0 0 1px var(--border);
}

.partner-link {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 11rem;
  padding: 1.75rem;
  text-decoration: none;
  color: var(--text-body);
  overflow: hidden;
}

.partner-logo {
  display: grid;
  place-items: center;
  width: 100%;
  color: var(--ink);
  transition: opacity var(--duration) var(--ease);
}
/* Every mark gets the same box and fits inside it without distorting.
   Wordmarks are width-bound, icon marks height-bound, and the two get
   different heights so they carry the same optical weight. */
.partner-logo :is(svg, img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.partner-logo--wide   { width: min(100%, 9.5rem); height: 2.3rem; }
.partner-logo--square { width: min(100%, 4rem);   height: 3.2rem; }
.partner-wordmark {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  text-align: center;
  text-wrap: balance;
}

/* The description is the hover state. It is also the focus state, so the grid
   is usable from a keyboard and on touch, where hover never fires. */
.partner-reveal {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 0.9rem;
  padding: 1.75rem;
  background: var(--surface-well);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.partner-link:hover .partner-logo,
.partner-link:focus-visible .partner-logo,
.partner-link:focus-within .partner-logo { opacity: 0; }
.partner-link:hover .partner-reveal,
.partner-link:focus-visible .partner-reveal,
.partner-link:focus-within .partner-reveal { opacity: 1; }

/* On a device with no hover — every phone and tablet — the reveal would never
   fire and the descriptions, which are the whole content of this page, would
   be unreachable. There, stack the description under the logo permanently
   instead of hiding it behind an interaction that cannot happen. */
@media (hover: none) {
  .partner-link {
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1rem;
    min-height: 0;
    padding-block: 2rem;
  }
  .partner-logo { opacity: 1 !important; }
  .partner-reveal {
    position: static;
    inset: auto;
    opacity: 1 !important;
    background: none;
    padding: 0;
    text-align: center;
    gap: 0.5rem;
  }
}

.partner-desc { font-size: var(--t-small); line-height: 1.55; color: var(--text-body); }
.partner-visit {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
}

@media (prefers-reduced-motion: reduce) {
  .partner-logo, .partner-reveal { transition: none; }
}

/* --- Information ---------------------------------------------------------- */
/* Two short statements. They carry the page, so they are set at reading size
   in the display face rather than dropped in as body copy under a heading that
   repeats itself. */
.info-blocks {
  margin-top: clamp(2.5rem, 1rem + 4vw, 4rem);
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  max-width: 34em;
}

.info-block { padding-top: 1.5rem; border-top: 1px solid var(--border); }

.info-label {
  font-family: var(--font-text);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.info-body {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}