@charset "utf-8";
/* ============================================================================
   FROST STRING QUARTET — 05 "Marble & Brass"
   Luxury-automotive craft (Bugatti / Ferrari cinematics) redirected to warmth:
   white marble ground, brass accent, burgundy for dignity. Light only.
   ========================================================================== */

@view-transition { navigation: auto; }

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

/* ───────────────────────────── tokens ───────────────────────────── */
@layer tokens {
  :root {
    /* ground */
    --marble: #F8F6F2;
    --marble-2: #EFEBE4;
    --white: #FFFFFF;

    /* brass */
    --brass: #9C7A3C;          /* ornament + LARGE text (3:1 on marble) */
    --brass-text: #816229;     /* small text on any ground (4.76:1+) */
    --brass-light: #C6A96B;    /* rules, metal gradients only */
    --brass-glow: #E8D5A8;
    --brass-line: color-mix(in srgb, var(--brass) 55%, transparent);
    --brass-line-soft: color-mix(in srgb, var(--brass) 26%, transparent);

    /* accents + ink */
    --burgundy: #5B1A2B;
    --burgundy-deep: #46131F;
    --ink: #1C1A17;
    --ink-55: #5A544C;
    --hair: #DAD3C8;

    /* type */
    --serif: 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
    --serif-alt: 'Cormorant Infant', 'Cormorant Garamond', Garamond, Georgia, serif;
    --sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --t-micro: 0.6875rem;   /* 11px */
    --t-xs: 0.75rem;        /* 12px */
    --t-sm: 0.8125rem;      /* 13px */
    --t-base: 1.0625rem;    /* 17px */
    --t-lg: clamp(1.125rem, 0.95rem + 0.7vw, 1.4375rem);
    --d-sm: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
    --d-md: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
    --d-lg: clamp(2.375rem, 1.4rem + 4.1vw, 4.75rem);
    --d-xl: clamp(2.75rem, 1.35rem + 5.8vw, 6.25rem);
    --d-hero: clamp(4rem, 1rem + 10.4vw, 10rem);
    --track-label: 0.18em;

    /* rhythm — 4px base */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
    --band: clamp(64px, 8vw, 136px);
    --gut: clamp(20px, 4.6vw, 72px);
    --measure: 62ch;

    /* structure */
    --radius: 0px;
    --radius-input: 2px;
    --wrap: 1360px;
    --wrap-tight: 1080px;
    --head-h: 116px;

    /* elevation — exactly one floating element per page */
    --float: 0 20px 60px rgb(28 26 23 / 0.07);

    /* z-index scale */
    --z-base: 0; --z-art: 1; --z-type: 2; --z-sweep: 3; --z-head: 40; --z-skip: 90;

    /* motion */
    --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur: 260ms;
    --dur-slow: 720ms;
  }
}

.mission-pillars{list-style:none;margin:var(--s-6) 0 0;padding:0;border-top:1px solid var(--brass-line)}
.mission-pillars li{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--brass-line)}
.mission-pillars li>span{font:600 .72rem/1.4 var(--sans);letter-spacing:.12em;color:var(--brass)}.mission-pillars h3{font:500 var(--fs-h4)/1.15 var(--display)}.mission-pillars p{margin-top:.35rem;color:var(--ink-2)}

/* 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); }
}

/* 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; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: hidden; }

  body {
    margin: 0;
    background: var(--marble);
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.62;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img, svg, canvas { display: block; max-width: 100%; }
  img { height: auto; }

  h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.06; letter-spacing: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol, dl, dd { margin: 0; padding: 0; }
  li { list-style: none; }
  em { font-style: italic; }
  b, strong { font-weight: 600; }
  time, .tnum { font-variant-numeric: tabular-nums; }

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

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--burgundy);
    outline-offset: 3px;
    border-radius: 1px;
  }

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

  .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: var(--s-2); left: var(--s-2); z-index: var(--z-skip);
    transform: translateY(-200%); opacity: 0; pointer-events: none;
    background: var(--burgundy); color: var(--white);
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase;
    padding: 14px 20px; min-height: 44px; display: inline-flex; align-items: center;
    transition: transform 200ms var(--e-out);
  }
  .skip:focus { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* ───────────────────────────── layout ───────────────────────────── */
@layer layout {
  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
  .band { padding-block: var(--band); position: relative; }
  .band--marble { background: var(--marble); }
  .band--marble2 { background: var(--marble-2); }
  .band--white { background: var(--white); }
  .band + .band { border-top: 1px solid var(--brass-line-soft); }

  .section-head {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-7) var(--s-8); align-items: end;
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--brass-line);
  }
  .section-head__note {
    font-size: var(--t-base); color: var(--ink-55); max-width: 44ch;
    padding-left: var(--s-5); border-left: 1px solid var(--hair);
  }

  .pagehead { padding-block: calc(var(--band) * 0.9) var(--band); background: var(--marble); }
  .pagehead--tight { padding-bottom: calc(var(--band) * 0.6); }
  .pagehead .lede { margin-top: var(--s-6); }
  .pagehead .knurl { margin-top: var(--s-7); }
}

/* ───────────────────────────── type utilities ───────────────────────────── */
@layer components {
  .display { font-family: var(--serif); font-weight: 300; letter-spacing: 0; }
  .display em { font-weight: 300; color: var(--brass); }
  .display--sm { font-size: var(--d-sm); }
  .display--md { font-size: var(--d-md); }
  .display--lg { font-size: var(--d-lg); }
  .display--xl { font-size: var(--d-xl); line-height: 1.0; }
  .period { color: var(--brass); }

  .eyebrow {
    display: flex; align-items: baseline; gap: var(--s-3);
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--brass-text); margin-bottom: var(--s-5);
  }
  .eyebrow__num {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.08em; color: var(--brass); font-variant-numeric: tabular-nums;
    padding-right: var(--s-3); border-right: 1px solid var(--brass-line);
  }
  .micro-h {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase;
    color: var(--brass-text); margin: 0 0 var(--s-3);
  }
  .lede {
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
    font-weight: 300; line-height: 1.42; color: var(--ink);
    max-width: 46ch;
  }
  .lede--wide { max-width: 58ch; }
  .prose { font-size: var(--t-base); line-height: 1.68; color: var(--ink-55); max-width: var(--measure); }
  .prose + .prose { margin-top: var(--s-4); }
  .fineprint {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 400;
    line-height: 1.65; color: var(--ink-55); max-width: 52ch;
  }
  .attrib {
    display: block; font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-text);
  }
  .attrib--dim { font-weight: 400; color: var(--ink-55); margin-top: var(--s-1); }
  .dot { color: var(--brass); }

  /* ornament */
  .rule2 { display: block; }
  .rule2 span { display: block; height: 1px; background: var(--brass-line); }
  .rule2 span + span { margin-top: 3px; background: var(--brass-line-soft); }

  .knurl {
    height: 14px;
    background: repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--brass) 62%, transparent) 0 1px, transparent 1px 5px);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .ico { width: 1em; height: 1em; flex: none; }
  .seal { width: 100%; height: 100%; }

  /* ── buttons ── */
  .btn {
    --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--brass-line);
    display: inline-flex; align-items: center; gap: var(--s-3);
    min-height: 48px; padding: 12px 26px;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--btn-bd); border-radius: var(--radius);
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase;
    cursor: pointer; position: relative; isolation: isolate;
    transition: color var(--dur) var(--e-out), background-color var(--dur) var(--e-out),
                border-color var(--dur) var(--e-out), transform 120ms var(--e-out);
  }
  .btn .ico { width: 15px; height: 15px; transition: transform var(--dur) var(--e-out); }
  .btn:hover .ico { transform: translateX(4px); }
  .btn:active { transform: translateY(1px); }

  .btn--primary { --btn-bg: var(--burgundy); --btn-fg: var(--white); --btn-bd: var(--burgundy); }
  .btn--primary:hover { --btn-bg: var(--burgundy-deep); --btn-bd: var(--burgundy-deep); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--brass-line); }
  .btn--ghost:hover { --btn-bd: var(--brass); --btn-bg: color-mix(in srgb, var(--brass-glow) 32%, transparent); }
  .btn--quiet {
    --btn-bd: transparent; padding-inline: 0; min-height: 44px;
    color: var(--brass-text); border-bottom: 1px solid var(--brass-line);
    border-radius: 0;
  }
  .btn--quiet:hover { color: var(--ink); border-bottom-color: var(--brass); }
  .btn[aria-disabled='true'], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ── header ── */
  .site-head {
    position: sticky; top: 0; z-index: var(--z-head);
    background: color-mix(in srgb, var(--marble) 88%, transparent);
    border-bottom: 1px solid var(--brass-line-soft);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
  .site-head__in {
    max-width: var(--wrap); margin-inline: auto; padding: var(--s-3) var(--gut);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  }
  .wordmark {
    display: inline-flex; align-items: center; gap: var(--s-3);
    min-height: 44px; view-transition-name: wordmark;
  }
  .wordmark__seal { width: 20px; height: 20px; color: var(--brass); flex: none; }
  .wordmark__text { display: flex; align-items: baseline; gap: var(--s-3); }
  .wordmark__name {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1;
    letter-spacing: 0.14em; color: var(--ink);
    animation: settle 1100ms var(--e-out) both;
  }
  .wordmark__sub {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-text);
  }
  @keyframes settle {
    from { letter-spacing: 0.42em; opacity: 0; }
    to { letter-spacing: 0.14em; opacity: 1; }
  }

  .nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55);
    position: relative; transition: color var(--dur) var(--e-out);
  }
  .nav a::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 1px;
    background: var(--brass); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--e-out);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current='page'] { color: var(--ink); }
  .nav a[aria-current='page']::after { transform: scaleX(1); background: var(--brass); }

  /* ── hero ── */
  .hero { position: relative; padding-top: clamp(28px, 5vw, 72px); overflow: clip; }
  .hero__stage {
    position: relative; max-width: var(--wrap); margin-inline: auto;
    padding-inline: var(--gut);
    min-height: min(64svh, 620px);
    display: grid; place-items: center;
  }
  .hero__art {
    grid-area: 1 / 1; position: relative; width: 100%;
    max-width: 1180px; aspect-ratio: 1200 / 520; z-index: var(--z-art);
  }
  .hero__svg, .hero__canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .hero__svg { transition: opacity 700ms var(--e-out); }
  .hero__canvas { opacity: 0; transition: opacity 900ms var(--e-out); }
  .hero__art[data-scene='live'] .hero__svg { opacity: 0; }
  .hero__art[data-scene='live'] .hero__canvas { opacity: 1; }

  /* A soft marble scrim: the ribbon passes behind frosted stone, so overlaid
     type always sits on marble and never fights the metal for contrast. */
  .hero__type {
    grid-area: 1 / 1; position: relative; z-index: var(--z-type); text-align: center;
    padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 48px);
  }
  .hero__type::before {
    content: ''; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 62% at 50% 50%,
      var(--marble) 0 44%,
      color-mix(in srgb, var(--marble) 72%, transparent) 66%,
      transparent 88%);
  }
  .hero__type .eyebrow { justify-content: center; }
  .hero__h1 {
    font-size: var(--d-hero); font-weight: 300; line-height: 0.92;
    display: grid; view-transition-name: page-title;
  }
  .hero__h1line { display: block; animation: rise 900ms var(--e-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
  .hero__h1line--em { font-style: italic; color: var(--brass-text); font-size: 0.52em; letter-spacing: 0.03em; margin-top: 0.18em; }
  @keyframes rise { from { opacity: 0; transform: translateY(0.32em); } to { opacity: 1; transform: none; } }
  .hero__lead {
    margin: var(--s-5) auto 0; max-width: 26ch;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); color: var(--ink-55);
  }

  .hero__base {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-8); align-items: end;
    margin-top: clamp(20px, 3vw, 44px);
    padding-bottom: var(--s-6);
  }
  .hero__blurb { font-size: var(--t-base); line-height: 1.7; color: var(--ink-55); max-width: 60ch; }
  .hero__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  .ticker {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--brass-line); border-bottom: 1px solid var(--brass-line-soft);
  }
  .ticker li {
    display: flex; align-items: baseline; gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border-left: 1px solid var(--brass-line-soft);
  }
  .ticker li:first-child { border-left: 0; padding-left: 0; }
  .ticker li:last-child { padding-right: 0; }
  .ticker b {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--brass);
    font-variant-numeric: lining-nums proportional-nums;
  }
  .ticker span {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55);
  }

  /* ── mission ── */
  .mission__in { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: var(--s-7) var(--s-9); }
  .mission__aside { border-top: 1px solid var(--brass-line); padding-top: var(--s-5); }
  .mission__meta {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    padding-block: var(--s-3); border-bottom: 1px solid var(--hair);
    font-size: var(--t-base); color: var(--ink);
  }
  .mission__meta span {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-55);
  }
  .mission__body .lede { margin-top: var(--s-6); }
  .mission__body .prose { margin-top: var(--s-5); }
  .mission__body .btn { margin-top: var(--s-6); }

  /* ── specification panel (signature) ── */
  .spec__head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s-5) var(--s-8); align-items: start; margin-bottom: var(--s-6);
  }
  .spec__head .prose { margin-top: var(--s-4); max-width: 38ch; }
  .spec__title { align-self: end; text-align: right; }
  .spec__title { font-size: var(--d-md); font-weight: 300; }
  .spec__title em { color: var(--brass); }
  .spec__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--brass-line);
    border-bottom: 1px solid var(--brass-line);
    margin-top: var(--s-2);
  }
  .spec__cell {
    position: relative; padding: var(--s-7) var(--s-5) var(--s-6);
    border-left: 1px solid var(--brass-line-soft);
    display: flex; flex-direction: column;
  }
  .spec__cell:first-child { border-left: 0; padding-left: 0; }
  .spec__idx {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.1em; color: var(--brass); margin-bottom: var(--s-4);
  }
  .spec__value {
    font-family: var(--serif); font-weight: 300; line-height: 0.86;
    font-size: clamp(3.25rem, 1.4rem + 7.2vw, 7.5rem);
    font-variant-numeric: lining-nums proportional-nums; color: var(--ink);
    letter-spacing: -0.01em;
  }
  .spec__label {
    margin-top: var(--s-5); font-family: var(--sans); font-size: var(--t-micro);
    font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  }
  .spec__note {
    margin-top: var(--s-2); font-family: var(--sans); font-size: var(--t-xs);
    font-weight: 300; line-height: 1.5; color: var(--ink-55);
  }

  /* ── plates / mask reveals ── */
  .plate { margin: 0; }

  /* ART DIRECTION. Every framed photograph carries two ratios. The mobile one is
     the default — a phone must never be handed a 16:9 letterbox — and the desktop
     one takes over at exactly the breakpoint the <source media> attributes use
     (700px). build.mjs writes the same pair into width/height on both <source>
     elements, so the ratio swap at the boundary costs nothing in layout shift. */
  .plate__frame, .chapter__frame, .member__frame, .wall__frame {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ar-m, 4/3);
    background: var(--marble-2);
    border-top: 1px solid transparent;
  }
  @media (min-width: 700px) {
    .plate__frame, .chapter__frame, .member__frame, .wall__frame {
      aspect-ratio: var(--ar-d, var(--ar-m, 4/3));
    }
  }
  .plate__frame > picture, .chapter__frame > picture,
  .member__frame > picture, .wall__frame > picture { display: block; width: 100%; height: 100%; }
  .plate__frame img, .chapter__frame img, .member__frame img, .wall__frame img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%);
  }
  .plate__sweep {
    position: absolute; inset: 0; z-index: var(--z-sweep); pointer-events: none;
    border-top: 1px solid var(--brass-light);
  }
  .plate__cap {
    display: flex; gap: var(--s-3); margin-top: var(--s-3);
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 300;
    line-height: 1.55; color: var(--ink-55); max-width: 62ch;
  }
  .plate__capnum {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.1em; color: var(--brass); flex: none;
  }
  .plate--bleed { margin-top: var(--s-8); }
  .plate--bleed .plate__cap {
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
    width: 100%; margin-top: var(--s-4);
  }
  .plate--tall { align-self: start; }
  .plate--aside { margin-top: var(--s-7); }

  /* ── one photograph, alone in its viewport ── */
  .photoband { padding-block: var(--band); }
  /* The opening photograph of a page sits directly under the head: one band of
     air, not three stacked ones — and it is what the browser measures as LCP. */
  .photoband--lead { padding-top: 0; }
  .photoband--lead .plate--bleed { margin-top: 0; }
  .photoband--lead .photoband__head { padding-bottom: var(--s-7); }
  .photoband__head {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-6) clamp(32px, 5vw, 96px); align-items: end;
  }
  .photoband .plate--bleed { margin-top: clamp(32px, 4.5vw, 72px); }
  .photoband__note {
    font-size: var(--t-base); line-height: 1.68; color: var(--ink-55);
    max-width: 46ch; padding-top: var(--s-4); border-top: 1px solid var(--brass-line);
  }
  .photoband--anchor .photoband__head { align-items: end; }

  /* ── two columns, one of them a photograph ── */
  .duo {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--s-7) clamp(32px, 5vw, 88px); align-items: start;
  }
  .duoband { padding-block: var(--band); }
  .duo--flip > *:first-child { order: 2; }
  .duo--center { align-items: center; }
  .duo .display + .prose,
  .duo .display + .speclist,
  .duo .display + .lede { margin-top: var(--s-5); }
  .duo .prose + .btn { margin-top: var(--s-6); }

  /* ── the one diptych on the site ── */
  .diptych {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 44px); margin-top: var(--s-7);
  }

  /* ── chapters (sticky cinematic pin) ── */
  .story__head { padding-bottom: var(--s-8); }
  .chapter { padding-block: clamp(24px, 4vw, 64px); }
  .chapter__grid {
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--s-8) clamp(32px, 5vw, 96px);
  }
  .chapter--flip .chapter__figwrap { order: 2; }
  .chapter__figwrap { align-self: start; position: sticky; top: calc(var(--head-h) + 24px); }
  .chapter__fig { margin: 0; }
  .chapter__img { transform-origin: 50% 45%; }
  .chapter__cap {
    display: flex; gap: var(--s-3); margin-top: var(--s-3);
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 300; color: var(--ink-55);
  }
  .chapter__num {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.1em; color: var(--brass); flex: none;
  }
  .chapter__text { padding-block: clamp(8px, 2vw, 40px) clamp(16px, 4vw, 72px); }
  .chapter__title {
    font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem); font-weight: 300; line-height: 0.88;
    color: var(--brass); font-variant-numeric: lining-nums proportional-nums; letter-spacing: -0.015em;
    margin-bottom: var(--s-7);
  }
  .chapter__beats { display: grid; gap: clamp(48px, 9vw, 152px); }
  .chapter__beat { border-top: 1px solid var(--brass-line); padding-top: var(--s-5); }
  .chapter__year {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); color: var(--brass-text); font-variant-numeric: tabular-nums;
  }
  .chapter__h { font-size: var(--d-sm); font-weight: 300; margin: var(--s-3) 0 var(--s-4); font-style: italic; }

  /* ── pull quotes ── */
  .pull { margin: 0; hanging-punctuation: first; }
  .pull p {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(1.625rem, 1rem + 3.4vw, 3.75rem);
    line-height: 1.16; color: var(--ink); max-width: 34ch;
  }
  .pull footer { margin-top: var(--s-5); }
  .pull--inline { margin-top: clamp(48px, 7vw, 104px); padding-top: var(--s-6); border-top: 1px solid var(--brass-line); }
  .pull--inline p { font-size: clamp(1.375rem, 1rem + 2vw, 2.375rem); max-width: 40ch; }
  .pull--mid p { font-size: clamp(1.375rem, 1rem + 2.2vw, 2.5rem); }
  .pull--center { text-align: center; margin-inline: auto; }
  .pull--center p { margin-inline: auto; }
  .quoteband .pull { padding-block: clamp(40px, 6vw, 88px); }

  /* ── roll: the roster as type, not as seven more photographs ──
     The studio portraits are one object and they live on musicians.html. Here
     the seven are a hairline-ruled index, which is also what stops the home page
     from putting seven pictures into a single viewport. */
  .roll { margin-top: var(--s-7); border-top: 1px solid var(--brass-line); }
  .roll__row { border-bottom: 1px solid var(--hair); }
  .roll__row a {
    display: grid; align-items: baseline;
    grid-template-columns: 3.5rem minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
    gap: var(--s-4); padding-block: var(--s-5); padding-inline: var(--s-3);
    margin-inline: calc(var(--s-3) * -1);
    transition: background-color var(--dur) var(--e-out);
  }
  .roll__row a:hover { background: color-mix(in srgb, var(--brass-glow) 26%, transparent); }
  .roll__num {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.1em; color: var(--brass); font-variant-numeric: tabular-nums;
  }
  .roll__name { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); font-weight: 400; line-height: 1.2; }
  .roll__meta {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  }
  .roll__go { color: var(--brass-text); justify-self: end; align-self: center; }
  .roll__go .ico { width: 18px; height: 18px; transition: transform var(--dur) var(--e-out); }
  .roll__row a:hover .roll__go .ico { transform: translateX(4px); }

  /* ── the portrait wall: seven sittings read as one object ── */
  .wall {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: clamp(20px, 2.4vw, 36px) clamp(16px, 2vw, 28px); margin-top: var(--s-7);
  }
  .wall__cell { grid-column: span 3; }
  .wall__cell:nth-child(n + 5) { grid-column: span 4; }
  .wall__cell a { display: block; }
  .wall__frame { border-top: 1px solid var(--brass-line-soft); }
  .wall__frame img { transition: transform 600ms var(--e-out); }
  .wall__cell a:hover .wall__frame img { transform: scale(1.03); }
  .wall__num {
    display: block; margin-top: var(--s-3); font-family: var(--serif);
    font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.1em; color: var(--brass);
  }
  .wall__name { display: block; font-family: var(--serif); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.15; margin-top: 2px; }
  .wall__chair {
    display: block; margin-top: var(--s-1); font-family: var(--sans); font-size: var(--t-micro);
    font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  }

  /* ── ledger ── */
  .ledger { margin-top: var(--s-6); border-top: 1px solid var(--brass-line); }
  .ledger__row {
    display: grid; align-items: baseline;
    grid-template-columns: 3.5rem minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.7fr) auto;
    gap: var(--s-4); padding-block: var(--s-5);
    border-bottom: 1px solid var(--hair);
    transition: background-color var(--dur) var(--e-out);
  }
  .ledger__row:hover { background: color-mix(in srgb, var(--brass-glow) 26%, transparent); }
  .ledger__num {
    font-family: var(--serif); font-size: var(--t-sm); font-weight: 500;
    letter-spacing: 0.1em; color: var(--brass); font-variant-numeric: tabular-nums;
  }
  .ledger__venue { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.875rem); font-weight: 400; line-height: 1.2; }
  .ledger__meta {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  }
  .ledger__date {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-text); white-space: nowrap;
  }

  /* ── seasons ── */
  .seasons { background: var(--marble); }
  .season { padding-block: clamp(48px, 6vw, 104px); border-top: 1px solid var(--brass-line-soft); }
  .season:first-child { border-top: 0; }
  .season__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: start; }
  .season__year {
    font-family: var(--serif); font-weight: 300; line-height: 0.8;
    font-size: clamp(4rem, 2rem + 9vw, 9.5rem); color: var(--brass);
    font-variant-numeric: lining-nums proportional-nums; letter-spacing: -0.02em;
  }
  .season__h { font-size: var(--d-sm); font-weight: 300; font-style: italic; }
  .season__count {
    margin-top: var(--s-3); font-family: var(--sans); font-size: var(--t-micro);
    font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-55);
  }

  .season__inset {
    display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: var(--s-5) clamp(24px, 4vw, 64px); align-items: end; margin-top: var(--s-7);
  }
  .season__insetnote {
    font-family: var(--serif); font-size: var(--t-base); line-height: 1.66;
    color: var(--ink-55); max-width: 42ch;
    padding-top: var(--s-4); border-top: 1px solid var(--brass-line);
  }

  /* ── venues ── */
  .venuelist { margin-top: var(--s-5); border-top: 1px solid var(--brass-line); }
  .venuelist__row {
    display: grid; align-items: baseline;
    grid-template-columns: 3.5rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
    gap: var(--s-4); padding-block: var(--s-5); border-bottom: 1px solid var(--hair);
  }
  .venuelist__num { font-family: var(--serif); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.1em; color: var(--brass); }
  .venuelist__name { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 400; }
  .venuelist__kind, .venuelist__city {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  }
  .venuelist__visits { display: flex; align-items: baseline; gap: var(--s-2); justify-self: end; }
  .venuelist__visits b { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; color: var(--brass); font-variant-numeric: lining-nums proportional-nums; }
  .venuelist__visits span {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  }

  /* ── members ── */
  .divider { background: var(--marble-2); padding-block: clamp(40px, 5vw, 80px); }
  .divider__in { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: baseline; padding-top: var(--s-5); }
  .divider__num { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.1em; color: var(--brass); }
  .divider__h { font-size: var(--d-sm); font-weight: 300; font-style: italic; }
  .divider__note { font-size: var(--t-base); line-height: 1.6; color: var(--ink-55); }

  .members { background: var(--marble); }
  .member {
    padding-block: clamp(56px, 7vw, 120px);
    border-bottom: 1px solid var(--brass-line-soft);
    scroll-margin-top: calc(var(--head-h) + 32px);
  }
  #main, [id] { scroll-margin-top: calc(var(--head-h) + 24px); }
  .member__grid {
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--s-7) clamp(32px, 5vw, 88px); align-items: start;
  }
  .member--right .member__figwrap { order: 2; }
  .member__fig { margin: 0; }
  .member__index { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.12em; color: var(--brass); }
  .member__name { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5rem); font-weight: 300; margin-top: var(--s-2); }
  .member__inst {
    margin-top: var(--s-3); font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-text);
  }
  .member__bio {
    margin-top: var(--s-5); font-family: var(--serif); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 400; line-height: 1.66; color: var(--ink); max-width: 54ch;
  }
  .member__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin-top: var(--s-7); }
  .member__off { margin-top: var(--s-5); font-family: var(--serif); font-size: var(--t-base); color: var(--ink-55); }
  .member__off .micro-h { display: block; }

  .speclist { border-top: 1px solid var(--brass-line); }
  .speclist li {
    padding-block: var(--s-3); border-bottom: 1px solid var(--hair);
    font-family: var(--serif); font-size: var(--t-base); line-height: 1.5; color: var(--ink);
    display: flex; gap: var(--s-3);
  }
  .speclist--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .speclist--numbered li { align-items: baseline; }
  .speclist__num { font-family: var(--serif); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.1em; color: var(--brass); flex: none; min-width: 2.2em; }

  .dataline { display: grid; gap: 0; border-top: 1px solid var(--brass-line); }
  .dataline > div {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-4);
    padding-block: var(--s-3); border-bottom: 1px solid var(--hair); align-items: baseline;
  }
  .dataline dt {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-55);
  }
  .dataline dd { font-family: var(--serif); font-size: var(--t-base); color: var(--ink); }
  .dataline--stack > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* ── guide ── */
  .guide__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-7) clamp(32px, 5vw, 88px); align-items: start; }
  .guide__data { padding-top: var(--s-2); }
  .guide__data .dataline { margin-top: var(--s-6); }
  .guide__role {
    margin-top: var(--s-3); font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brass-text);
  }
  .guide__text .prose { margin-top: var(--s-5); }
  .guide__text .dataline { margin-top: var(--s-6); }

  /* ── voices ── */
  .voice { background: var(--marble); padding-block: clamp(24px, 4vw, 56px); }
  .voice__field {
    background:
      radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brass-glow) 34%, transparent), transparent 62%),
      var(--white);
    padding-block: clamp(56px, 9vw, 152px);
    border-top: 1px solid var(--brass-line-soft); border-bottom: 1px solid var(--brass-line-soft);
  }
  .voice__quote { margin: 0; padding-block: clamp(40px, 6vw, 88px); hanging-punctuation: first; }
  .voice__quote p {
    font-family: var(--serif-alt); font-style: italic; font-weight: 300;
    font-size: clamp(2rem, 1rem + 5.2vw, 5rem); line-height: 1.1;
    color: var(--ink); max-width: 30ch; letter-spacing: 0;
  }
  .voice__foot { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-6); }
  .voice__who {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  }
  .voice__org {
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-55);
  }
  .verified {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text);
    padding: 4px 10px 4px 8px; border: 1px solid var(--brass-line);
  }
  .verified__ico { width: 13px; height: 13px; color: var(--brass); }
  .voice2__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7) clamp(32px, 5vw, 88px); align-items: center; }
  .voice3 .pull { margin-top: var(--s-5); }

  /* ── CTA plate — the one floating element per page ── */
  .cta--slim { padding-block: clamp(48px, 6vw, 96px); }
  .plate--float {
    background: var(--white); box-shadow: var(--float);
    border: 1px solid var(--brass-line-soft); border-radius: var(--radius);
  }
  .band--white .plate--float { background: var(--marble); }
  .cta__plate { max-width: var(--wrap-tight); margin-inline: auto; }
  .cta__in { padding: clamp(32px, 5vw, 72px); }
  .cta__in .lede { margin-top: var(--s-5); }
  .cta__in .speclist { margin-top: var(--s-6); }
  .cta__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
  .cta__in .fineprint { margin-top: var(--s-5); }

  /* ── contact ── */
  .contact__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--s-8) clamp(32px, 5vw, 88px); align-items: start; }
  .contact__panel { max-width: none; }
  .contact__panelin { padding: clamp(28px, 4vw, 56px); }
  .note {
    display: flex; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4);
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 400; line-height: 1.6;
    color: var(--ink-55);
  }
  .note--brass { border: 1px solid var(--brass-line); background: color-mix(in srgb, var(--brass-glow) 22%, transparent); }
  .note__ico { width: 18px; height: 18px; flex: none; color: var(--brass); margin-top: 1px; }

  .form { margin-top: var(--s-7); display: grid; gap: var(--s-6); }
  .fld { display: grid; gap: var(--s-2); }
  .fld__label {
    display: block;
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  }
  .fld__req, .fld__opt {
    font-weight: 400; letter-spacing: 0.1em; font-size: 10px; margin-left: 10px;
    white-space: nowrap;
  }
  .fld__req { color: var(--burgundy); }
  .fld__opt { color: var(--ink-55); }
  .fld__input {
    width: 100%; min-height: 48px; padding: 12px 2px;
    font-family: var(--serif); font-size: var(--t-base); color: var(--ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--brass-line);
    border-radius: var(--radius-input);
    transition: border-color var(--dur) var(--e-out), background-color var(--dur) var(--e-out);
  }
  textarea.fld__input { min-height: 132px; resize: vertical; line-height: 1.6; }
  .fld__input:hover { border-bottom-color: var(--brass); }
  .fld__input:focus {
    outline: none; border-bottom-color: var(--burgundy); border-bottom-width: 2px;
    background: color-mix(in srgb, var(--brass-glow) 18%, transparent);
  }
  .fld__input:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
  .fld__selwrap { position: relative; }
  .fld__input--sel { appearance: none; padding-right: 32px; cursor: pointer; }
  .fld__chev {
    position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; pointer-events: none;
    border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
    transform: translateY(-70%) rotate(45deg);
  }
  .fld__help { font-family: var(--sans); font-size: var(--t-xs); font-weight: 300; color: var(--ink-55); }
  .fld__err {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500; color: var(--burgundy);
    min-height: 0; overflow: hidden;
  }
  .fld__err:empty { display: none; }
  .fld[data-invalid='true'] .fld__input { border-bottom-color: var(--burgundy); border-bottom-width: 2px; }
  .fld[data-valid='true'] .fld__input { border-bottom-color: var(--brass); }

  .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-2); }
  .btn--submit { min-width: 220px; justify-content: center; }
  .btn__spin {
    display: none; width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--white) 45%, transparent);
    border-top-color: var(--white);
  }
  .btn--submit[data-state='loading'] .btn__spin { display: block; animation: spin 700ms linear infinite; }
  .btn--submit[data-state='loading'] .ico { display: none; }
  .btn--submit[data-state='done'] { --btn-bg: var(--brass-text); --btn-bd: var(--brass-text); }
  @keyframes spin { to { transform: rotate(360deg); } }
  .form__status {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.06em; color: var(--brass-text); max-width: 34ch;
  }
  .form__status[data-tone='error'] { color: var(--burgundy); }

  .contact__aside .display { margin-top: var(--s-2); }
  .contact__aside .display + .dataline { margin-top: var(--s-6); }
  .contact__aside .speclist { margin-top: var(--s-6); }
  .contact__aside .rule2 { margin-block: var(--s-7); }
  .contact__aside .fineprint { margin-top: var(--s-5); }

  .closing__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7) clamp(32px, 5vw, 88px); align-items: center; }
  .steps { margin-top: var(--s-6); border-top: 1px solid var(--brass-line); }
  .steps li {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4);
    padding-block: var(--s-5); border-bottom: 1px solid var(--hair);
    font-size: var(--t-base); line-height: 1.6; color: var(--ink-55);
  }
  .steps b { color: var(--ink); font-weight: 600; }
  .steps__num { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.1em; color: var(--brass); }

  /* ── footer ── */
  .site-foot { background: var(--marble-2); padding-top: var(--s-6); }
  .site-foot__in { max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut) var(--s-7); }
  .site-foot .rule2 { margin-top: var(--s-6); margin-bottom: var(--s-7); }
  .foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
  .foot-col__h {
    display: flex; align-items: baseline; gap: var(--s-3);
    font-family: var(--sans); font-size: var(--t-micro); font-weight: 600;
    letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
    padding-bottom: var(--s-3); border-bottom: 1px solid var(--brass-line);
  }
  .foot-col__num { font-family: var(--serif); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.1em; color: var(--brass); }
  .foot-col ul { margin-top: var(--s-3); }
  .foot-col li { padding-block: 6px; font-size: var(--t-base); color: var(--ink-55); line-height: 1.5; }
  .foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
  .foot-base {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-5);
    border-top: 1px solid var(--brass-line-soft);
  }
  .foot-base__mark { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
  .foot-base__meta { font-family: var(--sans); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); }
}

/* ───────────────────────────── motion ───────────────────────────── */
@layer motion {
  /* ARCHITECTURE: the resting state is always the finished, readable state.
     Entrance motion is an *additive* keyframe animation that plays only once an
     IntersectionObserver has actually reported the element. So a blocked script,
     a missing observer, a print job or a beyond-viewport screen capture can never
     leave anything at opacity 0 — it simply shows the finished state.

     The one exception is a short "arming" window immediately after boot, during
     which not-yet-observed elements are held invisible so that above-the-fold
     items animate in cleanly instead of flashing. app.js drops `.arming` on the
     observer's first callback. */
  html.js.arming .reveal:not(.is-in),
  html.js.arming .reveal-plate:not(.is-in) :is(.plate__frame, .chapter__frame, .member__frame, .wall__frame) {
    opacity: 0;
  }

  html.js .reveal.is-in {
    animation: rise-in 680ms var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }

  /* brass hairline curtain: a 2px brass line sweeps across, uncovering the
     photograph behind it, and the frame's own top rule is what it leaves behind */
  html.js .reveal-plate .plate__sweep::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 2px; left: 0; opacity: 0;
    background: linear-gradient(180deg, var(--brass-glow), var(--brass), var(--brass-glow));
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--brass-glow) 70%, transparent);
  }
  html.js .reveal-plate.is-in :is(.plate__frame, .chapter__frame, .member__frame, .wall__frame) {
    animation: curtain 980ms var(--e-in-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes curtain {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  html.js .reveal-plate.is-in .plate__sweep::before {
    animation: sweep 980ms var(--e-in-out) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes sweep {
    0% { left: 0; opacity: 0.95; }
    92% { left: calc(100% - 2px); opacity: 0.95; }
    100% { left: calc(100% - 2px); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
    html.js.arming .reveal:not(.is-in),
    html.js.arming .reveal-plate:not(.is-in) :is(.plate__frame, .chapter__frame, .member__frame, .wall__frame) {
      opacity: 1;
    }
    html.js .reveal-plate .plate__sweep::before { display: none; }
    .chapter__figwrap { position: static !important; }
  }
}

/* ───────────────────────────── responsive ───────────────────────────── */
@layer responsive {
  @media (min-width: 900px) {
    .site-head__in { flex-direction: row; justify-content: space-between; padding-block: var(--s-4); }
    :root { --head-h: 76px; }
  }

  /* Extra column height exists only to give the sticky figure real pin travel —
     with motion off there is nothing to pin, so the space is not reserved. */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .chapter__text { min-height: 700px; }
  }


  @media (max-width: 1024px) {
    .spec__grid { grid-template-columns: repeat(2, 1fr); }
    .spec__cell:nth-child(3) { border-left: 0; padding-left: 0; }
    .spec__cell:nth-child(n + 3) { border-top: 1px solid var(--brass-line-soft); }
    .ledger__row { grid-template-columns: 3rem minmax(0, 1fr) auto; row-gap: var(--s-2); }
    .roll__row a { grid-template-columns: 3rem minmax(0, 1fr) auto; row-gap: var(--s-2); }
    .roll__meta { grid-column: 2; }
    .ledger__meta { grid-column: 2; }
    .ledger__date { grid-column: 3; grid-row: 1; }
    .venuelist__row { grid-template-columns: 3rem minmax(0, 1fr) auto; row-gap: var(--s-2); }
    .venuelist__kind, .venuelist__city { grid-column: 2; }
    .venuelist__visits { grid-column: 3; grid-row: 1; }
  }

  @media (max-width: 900px) {
    .hero__base, .mission__in, .spec__head, .section-head, .guide__in, .voice2__in,
    .contact__in, .closing__in, .chapter__grid, .member__grid, .divider__in,
    .duo, .photoband__head {
      grid-template-columns: minmax(0, 1fr);
    }
    .duo--flip > *:first-child { order: 0; }
    .photoband__note { max-width: none; }
    .wall__cell, .wall__cell:nth-child(n + 5) { grid-column: span 6; }
    .section-head__note { padding-left: 0; border-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--hair); }
    .spec__title { text-align: left; }
    .chapter--flip .chapter__figwrap, .member--right .member__figwrap { order: 0; }
    .chapter__figwrap { position: static; }
    .member__cols { grid-template-columns: minmax(0, 1fr); }
    .divider__in { grid-template-columns: 3rem minmax(0, 1fr); }
    .divider__note { grid-column: 2; }
    .season__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
    .season__inset { grid-template-columns: minmax(0, 1fr); }
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ticker { grid-template-columns: repeat(2, 1fr); }
    .ticker li:nth-child(3) { border-left: 0; }
    .ticker li:nth-child(n + 3) { border-top: 1px solid var(--brass-line-soft); }
    .ticker li:nth-child(odd) { border-left: 0; }
  }

  @media (max-width: 700px) {
    :root { --measure: 100%; }
    .speclist--two { grid-template-columns: minmax(0, 1fr); }
    /* On small screens the ribbon stops hiding behind the type and becomes a
       plate of its own above the wordmark. */
    .hero__stage { display: block; min-height: 0; }
    .hero__art { position: relative; width: 100%; max-width: none; aspect-ratio: 2 / 1; }
    .hero__type { padding: 0; margin-top: var(--s-5); text-align: left; }
    .hero__type::before { display: none; }
    .hero__type .eyebrow { justify-content: flex-start; }
    .hero__lead { margin-inline: 0; max-width: 30ch; }
    .voice__quote p { max-width: none; }
    .pull p { max-width: none; }
    .btn { width: 100%; justify-content: space-between; }
    .btn--quiet { width: auto; }
    .form__foot { flex-direction: column; align-items: stretch; }
    .btn--submit { min-width: 0; }
  }

  @media (max-width: 560px) {
    .spec__grid { grid-template-columns: minmax(0, 1fr); }
    .spec__cell { border-left: 0; padding-left: 0; }
    .spec__cell + .spec__cell { border-top: 1px solid var(--brass-line-soft); }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .nav ul { gap: 0; }
    .nav a { font-size: 10px; padding-inline: 5px; letter-spacing: 0.055em; }
    .nav a::after { left: 5px; right: 5px; }
    .ledger__row, .venuelist__row, .roll__row a { grid-template-columns: 2.6rem minmax(0, 1fr); }
    .roll__go { display: none; }
    .diptych { grid-template-columns: minmax(0, 1fr); }
    .ledger__date, .venuelist__visits { grid-column: 2; grid-row: auto; justify-self: start; }
    .ticker { grid-template-columns: minmax(0, 1fr); }
    .ticker li { border-left: 0; }
    .ticker li + li { border-top: 1px solid var(--brass-line-soft); }
    .steps li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  }

  @media print {
    .site-head, .hero__art, .btn { display: none; }
    body { background: #fff; }
  }
}