/* ============================================================================
   FROST STRING QUARTET — design 01 "Bone & Slate"
   The reference's grammar: full-bleed photographs on black, slate-blue editorial
   blocks with cream type, bone separator bands, white content areas.
   Radius 0. No shadows. No gradients. No glass. Weight 400 everywhere.
   ========================================================================== */

@layer tokens, base, layout, components, motion;

/* ─────────────────────────────  TOKENS  ───────────────────────────── */
@layer tokens {
  :root {
    /* the four surfaces, ranked by area exactly as the reference ranks them */
    --black: #000000;         /* 1 · full-bleed photographic bands */
    --slate: #354258;         /* 2 · editorial blocks, cream type on top */
    --bone: #e6e4d3;          /* 3 · separator bands, accents */
    --white: #ffffff;         /* 4 · light content areas */
    /* 5 · over photographs, so type stays legible. 0.58 rather than the
       reference's 0.5: measured against the brightest pixel under every
       headline and eyebrow on our own photographs, 0.5 left 12px type at
       3.7:1. See DESIGN-NOTES for the full table. */
    --scrim: rgba(0, 0, 0, 0.58);

    /* hairlines, one per surface */
    --hair-on-dark: rgba(230, 228, 211, 0.30);
    --hair-on-slate: rgba(230, 228, 211, 0.34);
    --hair-on-bone: rgba(53, 66, 88, 0.26);
    --hair-on-white: rgba(53, 66, 88, 0.20);

    /* per-surface ink + focus, re-declared by each surface class */
    --ink: var(--slate);
    --ink-quiet: var(--slate);
    --hair: var(--hair-on-white);
    --focus: var(--slate);

    /* type */
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
    --serif: "IBM Plex Serif", Iowan Old Style, Georgia, "Times New Roman", serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* display scale — measured off the reference, made fluid */
    --fs-hero: clamp(2.125rem, 0.95rem + 4.9vw, 4rem);       /* 34 → 64 */
    --fs-head: clamp(1.75rem, 0.9rem + 3.55vw, 3.43rem);     /* 28 → 54.88 */
    --fs-tile: clamp(1.5rem, 0.85rem + 2.7vw, 2.62rem);      /* 24 → 41.92 */
    --fs-mark: clamp(1.375rem, 0.86rem + 2.15vw, 2.35rem);   /* 22 → 37.6 */
    --fs-quote: clamp(1.5rem, 0.8rem + 2.9vw, 2.75rem);      /* 24 → 44 */
    --fs-sub: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);     /* 20 → 28 */
    --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);   /* 17 → 21 */
    --fs-body: 1.0625rem;                                    /* 17 */
    --fs-sm: 0.9375rem;
    --fs-nav: 1rem;                                          /* reference: 16px serif */
    --fs-mono: 0.75rem;
    --fs-mono-sm: 0.6875rem;

    /* rhythm — 4px base */
    --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

    --band: clamp(4rem, 8.5vw, 9.5rem);      /* enormous whitespace */
    --gut: clamp(1.25rem, 4vw, 4rem);
    --measure: 82rem;
    --prose: 34rem;

    --dur: 220ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --z-bow: 60; --z-skip: 70;
  }

  /* No body copy below 16px on a phone. The small step and the smallest mono
     step both come up; the 12px mono labels are eyebrows, not reading text. */
  @media (max-width: 767px) {
    :root { --fs-sm: 1rem; --fs-mono-sm: 0.75rem; }
  }
}

/* Client direction: mission made explicit without changing the undecided navigation label. */
.mission-pillars{list-style:none;margin:clamp(2rem,4vw,3.5rem) 0 0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mission-pillars li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.5rem 1.25rem 1.5rem 0;border-bottom:1px solid var(--line)}
.mission-pillars li+li{padding-left:1.25rem;border-left:1px solid var(--line)}
.mission-pillars span{font:600 .72rem/1 var(--mono);letter-spacing:.12em}.mission-pillars h3{font:600 clamp(1rem,1.7vw,1.3rem)/1.2 var(--sans);text-transform:uppercase}.mission-pillars p{margin-top:.65rem;max-width:34ch;color:var(--ink-2)}
@media(max-width:760px){.mission-pillars{grid-template-columns:1fr}.mission-pillars li+li{padding-left:0;border-left:0}}

/* PERFORMANCE-MOBILE-PASS
   Defer below-the-fold painting without changing layout, and keep narrow
   viewports resilient to long labels, translated copy, and form controls. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports (content-visibility: auto) {
  main > section:not(:first-child),
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

@media (max-width: 767px) {
  main,
  main > * {
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  a,
  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}

@media print {
  main > section,
  footer {
    content-visibility: visible;
    contain: none;
  }
}

/* ─────────────────────────────  BASE  ───────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }

  body {
    margin: 0;
    background: var(--white);
    color: var(--slate);
    font-family: var(--serif);
    font-size: var(--fs-body);
    line-height: 1.68;
    font-weight: 400;
    text-underline-offset: 0.2em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { list-style: none; padding: 0; }
  h1, h2, h3, h4 { font-weight: 400; }        /* weight 400 everywhere */
  img, svg { display: block; max-width: 100%; }
  img { height: auto; background: #1a1d22; }
  table { border-collapse: collapse; width: 100%; }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }

  ::selection { background: var(--bone); color: var(--black); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  main:focus { outline: none; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .skip {
    position: fixed; top: 0; left: 50%; transform: translate(-50%, -110%);
    z-index: var(--z-skip);
    background: var(--bone); color: var(--black);
    font-family: var(--mono); font-size: var(--fs-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.85rem 1.5rem; transition: transform var(--dur) var(--ease);
  }
  .skip:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }
}

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */
@layer layout {
  .wrap {
    width: 100%; max-width: var(--measure);
    margin-inline: auto; padding-inline: var(--gut);
  }
  .wrap--narrow { max-width: 64rem; }

  /* the four surfaces ------------------------------------------------- */
  .s-dark  { background: var(--black); color: var(--white);
             --ink: var(--white); --ink-quiet: var(--bone);
             --hair: var(--hair-on-dark); --focus: var(--bone); }
  .s-slate { background: var(--slate); color: var(--white);
             --ink: var(--white); --ink-quiet: var(--bone);
             --hair: var(--hair-on-slate); --focus: var(--bone); }
  .s-bone  { background: var(--bone); color: var(--slate);
             --ink: var(--slate); --ink-quiet: var(--slate);
             --hair: var(--hair-on-bone); --focus: var(--slate); }
  .s-white { background: var(--white); color: var(--slate);
             --ink: var(--slate); --ink-quiet: var(--slate);
             --hair: var(--hair-on-white); --focus: var(--slate); }

  .band { padding-block: var(--band); }
  .band--tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
}

/* ─────────────────────────────  TYPE ATOMS  ───────────────────────────── */
@layer components {
  .mono-label {
    font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400;
    letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }
  .meta-i { font-family: var(--serif); font-style: italic; }

  .display  { font-family: var(--sans); font-weight: 400; line-height: 1.06;
              font-size: var(--fs-hero); text-wrap: balance; }
  .headline { font-family: var(--sans); font-weight: 400; font-size: var(--fs-head);
              line-height: 1.04; text-transform: uppercase; letter-spacing: 0;
              text-wrap: balance; color: var(--ink-quiet); }
  .subhead  { font-family: var(--sans); font-weight: 400; font-size: var(--fs-sub);
              line-height: 1.18; text-wrap: balance; }

  .lead { font-size: var(--fs-lead); line-height: 1.62; max-width: var(--prose);
          text-wrap: pretty; }
  .prose { max-width: var(--prose); text-wrap: pretty; }
  .prose + .prose { margin-top: var(--s4); }

  .chev { font-family: var(--sans); font-weight: 400; margin-left: 0.5em; }
  .arw  { margin-left: 0.4em; }

  .hr { display: block; height: 1px; background: var(--hair);
        transform-origin: 0 50%; width: 100%; }

  .mark, .tally { color: currentColor; }

  time, .num, .tnum { font-variant-numeric: tabular-nums; }

  /* section head: mono index · mono label · hairline ------------------- */
  .sec-head {
    display: grid; grid-template-columns: auto auto minmax(2rem, 1fr);
    align-items: center; gap: var(--s4);
    margin-bottom: clamp(1.75rem, 3.4vw, 3.25rem);
  }
  .sec-head__idx {
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.09em;
    color: var(--ink-quiet); font-variant-numeric: tabular-nums;
  }
  .sec-head__label {
    font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-quiet);
  }

  /* links -------------------------------------------------------------- */
  .tlink {
    display: inline-flex; align-items: center; min-height: 44px;
    border-bottom: 1px solid var(--hair);
    transition: border-color var(--dur) var(--ease);
  }
  .tlink:hover { border-bottom-color: currentColor; }
  .tlink--lg { font-family: var(--sans); font-size: var(--fs-sub); line-height: 1.2; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0.85rem 1.6rem;
    border: 1px solid currentColor; background: transparent; color: inherit;
    font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .s-slate .btn:hover, .s-dark .btn:hover { background: var(--bone); color: var(--black); }
  .s-bone .btn:hover, .s-white .btn:hover { background: var(--slate); color: var(--bone); }

  .cta-row { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

  /* ─────────────  MASTHEAD  ───────────── */
  .mast {
    background: var(--black); color: var(--white);
    --ink: var(--white); --ink-quiet: var(--bone);
    --hair: var(--hair-on-dark); --focus: var(--bone);
    padding-block: clamp(0.5rem, 1.1vw, 1rem);
  }
  .mast__row {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--s4);
  }
  .mast__nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2.25rem); }
  .navlink {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--serif); font-size: var(--fs-nav); line-height: 1;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .navlink:hover { border-bottom-color: var(--bone); }
  .navlink.is-here { color: var(--bone); border-bottom-color: var(--bone); }

  .wordmark {
    justify-self: center; text-align: center; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--sans); font-weight: 400; font-size: var(--fs-mark);
    line-height: 1; letter-spacing: 0;
  }
  .wordmark:hover { color: var(--bone); }

  .mast__end { justify-self: end; }
  .mast__cta {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--serif); font-size: var(--fs-nav); line-height: 1;
    border-bottom: 1px solid var(--hair-on-dark);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .mast__cta:hover { border-bottom-color: var(--bone); }
  .mast__cta.is-here { color: var(--bone); border-bottom-color: var(--bone); }

  @media (max-width: 800px) {
    .mast__row {
      grid-template-columns: 1fr auto;
      grid-template-areas: "mark mark" "nav cta";
      row-gap: var(--s2);
    }
    .mast__nav { grid-area: nav; }
    .wordmark  { grid-area: mark; justify-self: center; padding-top: var(--s2); }
    .mast__end { grid-area: cta; }
  }
  /* Below 560px "Invite the quartet" and three nav links cannot share a row
     without wrapping mid-phrase, so the call to action shortens to its verb. */
  @media (max-width: 560px) { .u-wide { display: none; } }
  @media (max-width: 380px) {
    .mast__nav ul { gap: 0.85rem; }
    .navlink, .mast__cta { font-size: 0.9375rem; }
  }

  /* ─────────────  HERO — full-bleed photograph on black  ───────────── */
  /* Photographic bands stack by DOM order alone — frame, then scrim, then body,
     every one of them `position: relative|absolute` with `z-index: auto`. No
     negative z-index anywhere: it costs nothing to avoid and keeps the whole
     band on one raster layer. */
  .hero {
    background: var(--black); color: var(--white);
    --ink: var(--white); --ink-quiet: var(--bone);
    --hair: var(--hair-on-dark); --focus: var(--bone);
  }
  .hero__stage {
    position: relative; overflow: hidden;
    min-height: clamp(26rem, 72dvh, 41rem);
    display: grid; align-items: end;
    padding-block: clamp(3rem, 7vw, 6.5rem);
  }
  .hero__media { position: absolute; inset: 0; overflow: hidden; }
  .hero__img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--op, 50% 38%);
  }
  .hero__scrim { position: absolute; inset: 0; background: var(--scrim); }

  .hero__body { position: relative; }
  .hero__eyebrow { color: var(--white); margin-bottom: clamp(1rem, 2vw, 1.75rem); }
  .hero__h1 { max-width: 20ch; }
  .hero__meta {
    margin-top: clamp(1.25rem, 2.4vw, 2rem); font-size: var(--fs-lead);
    color: var(--white); max-width: 46ch; text-wrap: pretty;
  }
  /* The credit line sits on solid black under the photograph, never over it:
     12px type over a photograph cannot be relied on to clear 4.5:1. */
  .caption-strip { background: var(--black); padding-block: clamp(0.85rem, 1.6vw, 1.15rem); }
  .caption {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5);
    color: var(--bone);
  }

  /* ─────────────  THREE-UP TILE ROW — the reference's signature  ───────────── */
  .tiles {
    background: var(--black); color: var(--white);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  }
  .tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(19rem, 30vw, 30rem);
    padding: clamp(1.25rem, 2.2vw, 2.25rem);
    --focus: var(--bone);
  }
  .tile__frame { position: absolute; inset: 0; overflow: hidden; }
  .tile__img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 40%);
    transition: transform 600ms var(--ease);
  }
  .tile__scrim { position: absolute; inset: 0; background: var(--scrim); }
  .tile__idx { position: relative; display: block; color: var(--white); margin-bottom: auto; }
  .tile__label {
    position: relative;
    font-family: var(--sans); font-weight: 400; font-size: var(--fs-tile);
    line-height: 1.1; color: var(--white); text-wrap: balance;
    margin-top: clamp(2rem, 5vw, 4rem);
  }
  .tile__rule { position: relative; display: block; height: 1px;
                background: var(--hair-on-dark); margin-top: var(--s4); }
  /* Hover lifts the picture and lights the rule. The scrim never lightens:
     it is load-bearing for the contrast of the label over it. */
  .tile:hover .tile__img { transform: scale(1.035); }
  .tile:hover .tile__rule { background: var(--bone); }
  @media (max-width: 860px) {
    .tiles { grid-template-columns: 1fr; }
    .tile { min-height: clamp(15rem, 52vw, 22rem); }
  }

  /* ─────────────  DOCUMENTARY STRIP  ─────────────
     The tile row's geometry — full-bleed pictures, 1px apart, edge to edge —
     without the link, and with the caption apparatus the reference gives its
     photographs. Every caption sits on SOLID BLACK beneath its picture, never
     over it: on this library white 12px type over a photograph measures 3.7:1,
     the same type on black measures 16.4:1. Three-up and four-up are the same
     component; the frame's aspect ratio is passed in per row so a landscape row
     and a portrait row can share the grammar without either being stretched. */
  .band-strip {
    background: var(--black); padding-block: var(--band);
  }
  .band-strip .sec-head { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
  .strip__lead {
    max-width: var(--prose); font-size: var(--fs-lead); line-height: 1.62;
    text-wrap: pretty; margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  .strip { display: grid; gap: 1px; background: var(--black); }
  .strip + .strip { margin-top: 1px; }
  .strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip__fig { display: flex; flex-direction: column; background: var(--black); }
  /* aspect-ratio on the frame, not the image: the frame is what reserves the
     space, so nothing shifts while the picture decodes. */
  .strip__frame {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: var(--ar, 4 / 5); background: var(--black);
  }
  .strip__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  /* Inset matches the tile row's padding, so a caption under a strip picture and
     a label inside a tile sit on the same optical margin. At 375 that inset and
     `--gut` are the same 1.25rem, so single-column captions line up with the
     section head above them without a special case. */
  .strip__cap {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: clamp(0.9rem, 1.7vw, 1.4rem) clamp(1.25rem, 2.2vw, 2.25rem) 0;
    color: var(--bone);
  }
  .strip__idx { color: var(--bone); }
  .strip__name { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.25;
                 color: var(--white); text-wrap: balance; }
  .strip__note { font-size: var(--fs-sm); line-height: 1.45; color: var(--bone);
                 text-wrap: pretty; }
  @media (max-width: 1080px) { .strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 860px)  { .strip--3 { grid-template-columns: 1fr; } }
  @media (max-width: 560px)  { .strip--4 { grid-template-columns: 1fr; } }
  /* One column means one photograph at full width. The frame keeps its own
     ratio — a portrait frame is never re-cropped to landscape to save height,
     which is exactly how faces get cut. */

  /* ─────────────  SLATE EDITORIAL BLOCK  ───────────── */
  .slab__inner { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; }
  @media (min-width: 960px) {
    .slab__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  }
  .slab__body { max-width: var(--prose); font-size: var(--fs-lead); line-height: 1.62;
                text-wrap: pretty; }
  .slab__body p + p { margin-top: var(--s4); }
  .slab__meta {
    margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: var(--s4);
    border-top: 1px solid var(--hair); color: var(--bone);
    font-size: var(--fs-body); max-width: var(--prose); text-wrap: pretty;
  }
  .s-bone .slab__meta, .s-white .slab__meta { color: var(--slate); }

  /* ─────────────  STATS  ───────────── */
  .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
           background: var(--hair); border-block: 1px solid var(--hair); }
  .stat { background: var(--bone); padding: clamp(1.25rem, 2.4vw, 2rem) 0;
          padding-right: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
  .stats > .stat:not(:first-child) { padding-left: clamp(1rem, 2vw, 1.75rem); }
  .stat__idx { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.09em; }
  .stat__value { font-family: var(--sans); font-weight: 400; font-size: clamp(2.5rem, 5.5vw, 4rem);
                 line-height: 1; font-variant-numeric: tabular-nums; }
  .stat__label { font-family: var(--sans); font-size: 1rem; line-height: 1.3; }
  .stat__note { font-family: var(--serif); font-style: italic; font-size: var(--fs-sm);
                line-height: 1.45; }
  @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

  /* ─────────────  CHRONICLE  ───────────── */
  .chron { border-top: 1px solid var(--hair); }
  .chron__row {
    display: grid; grid-template-columns: 3.5rem 7rem minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding-block: clamp(1.5rem, 3vw, 2.75rem);
    border-bottom: 1px solid var(--hair);
  }
  .chron__idx { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.09em;
                color: var(--ink-quiet); }
  .chron__year { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.09em;
                 color: var(--ink-quiet); }
  .chron__title { font-family: var(--sans); font-size: var(--fs-sub); line-height: 1.18;
                  color: var(--ink-quiet); margin-bottom: var(--s3); text-wrap: balance; }
  .chron__text { max-width: var(--prose); text-wrap: pretty; }
  @media (max-width: 760px) {
    .chron__row { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4) var(--s5); }
    .chron__year { grid-column: 2; }
    .chron__body { grid-column: 2; }
  }

  /* ─────────────  FULL-BLEED PHOTO BAND  ───────────── */
  .plate {
    background: var(--black); color: var(--white);
    --ink: var(--white); --ink-quiet: var(--bone);
    --hair: var(--hair-on-dark); --focus: var(--bone);
  }
  .plate__stage {
    position: relative; overflow: hidden;
    min-height: clamp(24rem, 56vw, 38rem);
    display: grid; align-items: end;
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
  }
  .plate--cap-only .plate__stage { min-height: clamp(19rem, 42vw, 31rem); padding-block: 0; }
  .plate__frame { position: absolute; inset: 0; overflow: hidden; }
  .plate__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 40%); }
  .plate__scrim { position: absolute; inset: 0; background: var(--scrim); }
  .plate__body { position: relative; }
  .plate__quote {
    font-family: var(--sans); font-weight: 400; font-size: var(--fs-quote);
    line-height: 1.14; max-width: 22ch; text-wrap: balance;
  }
  .plate__by { margin-top: clamp(1rem, 2vw, 1.75rem); color: var(--white);
               font-size: var(--fs-lead); }
  /* a photograph with nothing over it needs no scrim at all */
  .plate--cap-only .plate__scrim { background: rgba(0, 0, 0, 0.12); }

  /* THE WHOLE FRAME. The stage takes the photograph's own aspect ratio, so
     `cover` has nothing to crop and the picture is reproduced entire, edge to
     edge, at every width. Used once — for `group-care`, whose subject is the row
     of residents' heads across the foreground. Any band-shaped crop of that 3:2
     frame takes either the residents or the players, and the residents are the
     meaning. No scrim: nothing is set over it, so nothing needs holding down. */
  .plate--whole .plate__stage {
    min-height: 0; aspect-ratio: var(--ar); padding-block: 0;
  }
  .plate--whole .plate__scrim { display: none; }

  /* ─────────────  QUOTE (the one testimonial)  ───────────── */
  .voice { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
  .voice__quote {
    font-family: var(--sans); font-weight: 400; font-size: var(--fs-quote);
    line-height: 1.16; max-width: 30ch; text-wrap: balance;
  }
  .voice__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5);
               padding-top: var(--s4); border-top: 1px solid var(--hair); }
  .voice__name { font-size: var(--fs-lead); }
  .voice__ver { display: inline-flex; align-items: center; gap: 0.45rem; }
  .tick { flex: none; }
  .voice__note { max-width: var(--prose); font-style: italic; text-wrap: pretty; }

  /* ─────────────  RULED LISTS  ───────────── */
  .ruled { border-top: 1px solid var(--hair); }
  .ruled__item {
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline;
    gap: var(--s3); padding-block: 0.85rem; border-bottom: 1px solid var(--hair);
    line-height: 1.45;
  }
  .ruled__item > span:last-child { text-wrap: pretty; }
  .ruled__idx { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.09em;
                color: var(--ink-quiet); }
  .ruled--tight .ruled__item { grid-template-columns: minmax(0, 1fr); padding-block: 0.6rem;
                               font-size: var(--fs-sm); }

  /* ─────────────  PORTRAITS  ───────────── */
  /* The wall: 4-up founders, then 3-up performing members, both on white — one
     perceptual object per group rather than seven competing pictures. */
  .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: clamp(1.5rem, 3vw, 2.75rem); }
  .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1080px) { .pgrid, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px)  { .pgrid, .pgrid--3 { grid-template-columns: 1fr; } }

  .pf { display: flex; flex-direction: column; }
  .pf__frame { background: var(--black); overflow: hidden; aspect-ratio: 4 / 5; }
  .pf__img { width: 100%; height: 100%; object-fit: cover; }
  .pf__name { font-family: var(--sans); font-size: var(--fs-sub); line-height: 1.15;
              margin-top: var(--s4); text-wrap: balance; }
  .pf__name--sm { font-size: 1.25rem; }
  .pf__inst { color: var(--ink-quiet); margin-top: var(--s2); }
  .pf__meta { display: block; font-size: var(--fs-sm); line-height: 1.5; margin-top: var(--s3);
              text-wrap: pretty; }
  .pf__bio { font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--s3); text-wrap: pretty; }
  .pf .ruled { margin-top: var(--s4); }
  .pf__off { margin-top: var(--s4); font-size: var(--fs-sm); line-height: 1.5; }
  .pf__off .mono-label { display: block; color: var(--ink-quiet); margin-bottom: var(--s1); }
  .pf--note { border: 1px solid var(--hair); padding: clamp(1.25rem, 2.2vw, 2rem); }
  .pf--note .mono-label { color: var(--ink-quiet); }

  .grp { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto;
         align-items: center; gap: var(--s4); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .grp--second { margin-top: clamp(3rem, 6vw, 6rem); }
  .grp__label, .grp__count { color: var(--ink-quiet); }
  .grp__count { display: inline-flex; align-items: center; gap: 0.55rem; }

  /* ─────────────  LEDGERS  ───────────── */
  .ledger { font-size: var(--fs-sm); }
  .ledger caption { text-align: left; }
  .ledger th, .ledger td { text-align: left; font-weight: 400; padding: 0.95rem var(--s4) 0.95rem 0;
                           border-bottom: 1px solid var(--hair); vertical-align: baseline; }
  .ledger thead th { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.09em;
                     text-transform: uppercase; color: var(--ink-quiet);
                     border-bottom-color: var(--ink); }
  .ledger .c-idx { width: 3.5rem; font-family: var(--mono); font-size: var(--fs-mono-sm);
                   letter-spacing: 0.06em; color: var(--ink-quiet); }
  .ledger .c-date { width: 11rem; white-space: nowrap; }
  .ledger .c-venue { width: 38%; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.3; }
  .ledger .c-kind { width: 10rem; font-style: italic; }
  .ledger .c-city { width: 11rem; white-space: nowrap; }
  /* The season row spans all five columns. The flex lives on an inner span:
     `display:flex` on the `th` itself takes the cell out of the table layout
     and the colspan stops applying. */
  .ledger__season th {
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.09em;
    text-transform: uppercase; padding-top: clamp(1.75rem, 3vw, 2.75rem);
    border-bottom-color: var(--ink);
  }
  .ledger__seasonrow {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
    align-items: baseline; justify-content: space-between;
  }
  .ledger__season-n { color: var(--ink-quiet); }
  @media (max-width: 860px) {
    .ledger, .ledger thead, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
    .ledger thead { display: none; }
    .ledger tr { padding-block: 0.9rem; border-bottom: 1px solid var(--hair); }
    .ledger th, .ledger td { border: 0; padding: 0.1rem 0; }
    .ledger .c-idx, .ledger .c-date, .ledger .c-kind, .ledger .c-city { width: auto; }
    .ledger .c-venue { font-size: 1.125rem; margin-block: 0.15rem; }
    .ledger .c-kind { display: inline-block; margin-right: 0.75rem; }
    .ledger .c-city { display: inline-block; }
    .ledger__season th { padding-top: 1.75rem; border-bottom: 1px solid var(--ink);
                         padding-bottom: 0.5rem; }
  }

  .vledger th, .vledger td { text-align: left; font-weight: 400; padding: 1rem var(--s4) 1rem 0;
                             border-bottom: 1px solid var(--hair); vertical-align: baseline; }
  .vledger thead th { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: 0.09em;
                      text-transform: uppercase; color: var(--ink-quiet); border-bottom-color: var(--ink); }
  .vledger .v-name { font-family: var(--sans); font-size: 1.0625rem; }
  .vledger .v-kind, .vledger .v-city { font-size: var(--fs-sm); }
  .vledger .v-kind { font-style: italic; }
  .vledger .v-visits { width: 9rem; }
  .vledger .v-visits .num { font-family: var(--mono); font-size: var(--fs-mono);
                            margin-left: 0.6rem; vertical-align: 0.1em; }
  .vledger .tally { display: inline-block; vertical-align: -0.1em; }
  .vledger tfoot th, .vledger tfoot td { border-bottom: 0; border-top: 1px solid var(--ink);
                                         font-family: var(--mono); font-size: var(--fs-mono);
                                         letter-spacing: 0.09em; text-transform: uppercase; }
  @media (max-width: 700px) {
    .vledger .v-kind { display: none; }
    .vledger .v-visits { width: 7rem; }
  }

  /* ─────────────  FORM  ───────────── */
  .form-grid { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  @media (min-width: 960px) { .form-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

  .fld { margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem); }
  .fld__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
                margin-bottom: var(--s2); color: var(--slate); }
  .fld__idx { color: var(--slate); opacity: 0.85; }
  .req { color: var(--slate); font-size: var(--fs-mono-sm); }
  .fld__in {
    width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
    font-family: var(--serif); font-size: 1rem; color: var(--slate);
    background: var(--white); border: 1px solid var(--hair-on-white); border-radius: 0;
    transition: border-color var(--dur) var(--ease);
  }
  .s-bone .fld__in { background: var(--white); }
  .fld__in:hover { border-color: var(--slate); }
  .fld__in:focus-visible { border-color: var(--slate); outline: 2px solid var(--slate);
                           outline-offset: 1px; }
  textarea.fld__in { resize: vertical; line-height: 1.6; }
  .fld__selwrap { position: relative; }
  .fld__in--sel { appearance: none; padding-right: 2.5rem; }
  .fld__caret { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
                pointer-events: none; color: var(--slate); }
  .fld__help { font-size: var(--fs-sm); font-style: italic; margin-top: var(--s2); }
  .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5);
                margin-top: clamp(1.5rem, 3vw, 2.25rem); }
  .form__note { color: var(--slate); }
  .form__status:not(:empty) { margin-top: var(--s4); padding: var(--s4);
                              border: 1px solid var(--hair); font-size: var(--fs-sm);
                              text-wrap: pretty; }
  .form-side .mono-label { display: block; margin-bottom: var(--s3); }
  .deflist { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
  .deflist > div { padding-block: 0.8rem; border-bottom: 1px solid var(--hair); }
  .deflist dt { margin-bottom: var(--s1); color: var(--ink-quiet); }
  .deflist dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
  .deflist--inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                     gap: 0 clamp(1.5rem, 3vw, 3rem); }
  @media (max-width: 560px) { .deflist--inline { grid-template-columns: 1fr; } }

  /* ─────────────  SPLIT (portrait photo + text, on black)  ───────────── */
  .split { display: grid; gap: 0; background: var(--black); color: var(--white);
           --ink: var(--white); --ink-quiet: var(--bone); --hair: var(--hair-on-dark);
           --focus: var(--bone); }
  @media (min-width: 880px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .split__frame { position: relative; overflow: hidden; background: var(--black); }
  .split__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  @media (max-width: 879px) { .split__frame { aspect-ratio: 4 / 3; } }
  .split__body { padding: clamp(2.5rem, 6vw, 6rem) var(--gut);
                 display: flex; flex-direction: column; justify-content: center; }
  .split__body > * { max-width: 40rem; }
  @media (min-width: 880px) { .split__body { padding-right: clamp(2.5rem, 6vw, 7rem); } }

  /* ─────────────  FOOTER  ───────────── */
  .foot {
    background: var(--black); color: var(--white);
    --ink: var(--white); --ink-quiet: var(--bone); --hair: var(--hair-on-dark);
    --focus: var(--bone);
    padding-block: clamp(3rem, 6vw, 6rem);
  }
  .foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: clamp(1.75rem, 4vw, 4rem); }
  .foot__col .mono-label { display: block; margin-bottom: var(--s3); color: var(--bone); }
  .foot__body { font-size: var(--fs-sm); line-height: 1.6; max-width: 24rem; text-wrap: pretty; }
  .foot__meta { margin-top: var(--s3); font-style: italic; font-size: var(--fs-sm);
                color: var(--bone); max-width: 24rem; }
  .foot__list { font-size: var(--fs-sm); border-top: 1px solid var(--hair); }
  .foot__list li { padding-block: 0.45rem; border-bottom: 1px solid var(--hair); line-height: 1.4; }
  .foot__base { display: flex; flex-wrap: wrap; justify-content: space-between;
                gap: var(--s3) var(--s5); margin-top: clamp(2rem, 4vw, 3.5rem);
                padding-top: var(--s4); border-top: 1px solid var(--hair); color: var(--bone); }
  .foot__mark { display: inline-flex; align-items: baseline; gap: 0.55rem; }
  @media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; } }
}

/* ─────────────────────────────  MOTION  ───────────────────────────── */
@layer motion {
  /* scroll-progress hairline, bone on black */
  .bow { position: fixed; inset: 0 0 auto 0; height: 1px; z-index: var(--z-bow);
         pointer-events: none; }
  .bow__line { display: block; height: 1px; width: 100%; background: var(--bone);
               transform: scaleX(0); transform-origin: 0 50%; }

  /* RESTING STATE = FINISHED STATE.
     JS adds .js-motion only once it has confirmed the entrance can actually
     finish. Without it — background tab, no GSAP, reduced motion — every
     element is at its final, visible value. No @keyframes with fill-mode both
     is used anywhere for entrances, for exactly this reason. */
  .js-motion .reveal { opacity: 0; }
  .js-motion .hr { transform: scaleX(0); }

  .js-motion-native .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .72s var(--ease), transform .72s var(--ease);
  }
  .js-motion-native .hr {
    transform: scaleX(0);
    transition: transform 1.1s var(--ease);
  }
  .js-motion-native .tile__img,
  .js-motion-native .plate:not(.plate--whole) .plate__img,
  .js-motion-native .split__img,
  .js-motion-native .pf__img,
  .js-motion-native .strip__img,
  .js-motion-native .hero__img {
    transform: scale(1.06);
    transition: transform 1.5s var(--ease);
  }
  .js-motion-native .motion-done {
    opacity: 1;
    transform: none;
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 240ms var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 320ms var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
    .bow { display: none; }
    .js-motion .reveal { opacity: 1; }
    .js-motion .hr { transform: none; }
    .tile:hover .tile__img { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }
}

/* ─────────────────────────────  PRINT  ───────────────────────────── */
@media print {
  .bow, .skip, .mast__nav, .mast__cta, .tiles { display: none; }
  body { background: #fff; color: #000; }
  .s-dark, .s-slate, .s-bone, .hero, .plate, .split, .foot, .mast {
    background: #fff !important; color: #000 !important;
    --ink: #000; --ink-quiet: #000; --hair: rgba(0,0,0,.3);
  }
  .hero__scrim, .plate__scrim, .tile__scrim { display: none; }
  /* A print or Save-as-PDF may be issued from a tab that never got a frame, so
     the reveal layer is neutralised outright rather than trusted to finish. */
  .reveal, .hr { opacity: 1 !important; transform: none !important; }
}

/* MOBILE-CASCADE-GUARD — keep form controls usable after design-specific rules. */
@media (max-width: 767px) {
  main, main > * { min-width: 0; }
  input, select, textarea { font-size: max(16px, 1em); }
}