/* Barlow + Barlow Condensed — self-hosted woff2 subsets (SIL Open Font License 1.1) */

/* vietnamese */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DAY BOY NIGHT GIRL — design system
   Ported from the "Industry" canvas system with the production palette
   override (olive/sage on warm cream). Tokens are the source of truth;
   retune here and the whole site follows.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f1efe8;
  --color-surface: #e7e4da;
  --color-text: #1c1e18;
  --color-accent: #6f8256;
  --color-accent-2: #7d8d63;
  --color-divider: color-mix(in srgb, #1c1e18 18%, transparent);

  /* Tonal ramps — one shared lightness scale, so the same step of any role
     matches the others in visual value. */
  --color-neutral-100: #f4f2ec;
  --color-neutral-200: #e6e3d9;
  --color-neutral-300: #d3cfc2;
  --color-neutral-400: #b6b1a1;
  --color-neutral-500: #979283;
  --color-neutral-600: #797566;
  --color-neutral-700: #5c594d;
  --color-neutral-800: #413f36;
  --color-neutral-900: #2a2924;

  --color-accent-100: #f1f4e9;
  --color-accent-200: #e0e7cf;
  --color-accent-300: #c6d2ad;
  --color-accent-400: #a7b78a;
  --color-accent-500: #899a6b;
  --color-accent-600: #6f8256;
  --color-accent-700: #556541;
  --color-accent-800: #3a472c;
  --color-accent-900: #212a1a;

  --color-accent-2-100: #f1f4e9;
  --color-accent-2-200: #e1e7d1;
  --color-accent-2-300: #c9d3b2;
  --color-accent-2-400: #abb890;
  --color-accent-2-500: #8d9b72;
  --color-accent-2-600: #72835a;
  --color-accent-2-700: #586645;
  --color-accent-2-800: #3c4830;
  --color-accent-2-900: #222a1c;

  /* Validation red, tuned to clear 4.5:1 on the cream ground. */
  --color-danger: #8c2f2f;

  /* Cream that reads as "print white" on the dark plates. */
  --color-cream: #f1efe8;
  --color-ink: #14170f;

  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2a2924 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2a2924 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2a2924 22%, transparent);

  /* Layout — the artboards were drawn at 1360px with 40px gutters. */
  --page-max: 1360px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-gap: clamp(38px, 5.5vw, 54px);

  /* Fluid type. The artboard values are the upper bound of each clamp. */
  --fs-display: clamp(58px, 10.4vw, 142px);
  --fs-h2: clamp(28px, 3.4vw, 38px);
  --fs-h3: clamp(23px, 2.6vw, 30px);
  --fs-h4: clamp(19px, 2vw, 26px);
  --fs-lede: clamp(15px, 1.3vw, 16px);
}

/* ── reset & base ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent-900); color: var(--color-cream);
  padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--color-cream); }

/* ── rules ─────────────────────────────────────────────────────────────── */

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  min-height: 38px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { display: block; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-cream);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-cream); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-ghost { color: var(--color-accent-700); border-color: transparent; padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

.btn-block { width: 100%; }

/* Static, non-interactive chips drawn as buttons in the comps
   ("Teaser — in production", "Book the call"). Not focusable, not clickable.
   Their interactive states are frozen: a chip that shades under the cursor
   reads as a live control, which is exactly the promise we can't keep. */
.btn-static { cursor: default; }
.btn-secondary.btn-static:hover,
.btn-secondary.btn-static:active { background: transparent; }
.btn-primary.btn-static:hover,
.btn-primary.btn-static:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* On the dark plates. */
.on-dark .btn { color: var(--color-cream); border-color: rgba(241, 239, 232, .3); }
.on-dark .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-cream); }
.on-dark .btn-secondary:hover { background: rgba(241, 239, 232, .1); }

/* ── forms ─────────────────────────────────────────────────────────────── */

.field { display: block; }
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 40px; padding: 8px 10px;
  font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
textarea.input { min-height: 90px; resize: vertical; }

.checkline {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; cursor: pointer;
}
.checkline input[type="checkbox"] {
  margin-top: 3px; accent-color: var(--color-accent);
  width: 16px; height: 16px; flex: none;
}

.field-error {
  display: none;
  font-size: 12px; color: var(--color-danger); margin-top: 4px;
}
.field[data-invalid] .field-error { display: block; }

/* ── blueprint frame ───────────────────────────────────────────────────── */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.on-dark .blueprint { border-color: rgba(241, 239, 232, .25); }

/* ── tags ──────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.tag-solid { background: var(--color-accent-900); color: var(--color-cream); }

/* ── tables ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table .num {
  text-align: right;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table .row-total td {
  border-top: 1px solid var(--color-divider);
  border-bottom: 0;
  padding-top: var(--space-3);
}
.table .row-total .label {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.table .row-total .num { font-size: 19px; color: var(--color-accent-700); }

/* ── page shell ────────────────────────────────────────────────────────── */

.page { max-width: var(--page-max); margin: 0 auto; background: var(--color-bg); }

.section { padding: var(--section-gap) var(--gutter) 6px; }
.section-head { margin: 0 0 var(--space-2); color: var(--color-accent-700); }
.section > .hr:first-of-type { margin: 0 0 22px; }

/* The dark plate sections (08 · The world, and the room's dark bands). */
.plate {
  background: var(--color-accent-900);
  color: var(--color-cream);
  margin-top: clamp(30px, 4vw, 48px);
  padding: var(--section-gap) var(--gutter);
}
.plate .section-head { color: var(--color-accent-300); }
.plate .hr { background: rgba(241, 239, 232, .2); }
.plate h1, .plate h2, .plate h3, .plate h4 { color: var(--color-cream); }
.plate p { color: rgba(241, 239, 232, .85); }
.plate a { color: var(--color-accent-300); }

/* ── masthead ──────────────────────────────────────────────────────────── */

.masthead {
  display: flex; align-items: center; gap: clamp(14px, 1.9vw, 26px);
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .06em; text-transform: uppercase;
  margin-right: auto; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.brand .brand-sub { color: var(--color-accent-700); }
.masthead-nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 26px); }
.masthead-nav a { color: inherit; text-decoration: none; font-size: 14px; }
.masthead-nav a:hover { color: var(--color-accent-700); }
.masthead-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* Menu toggle — hidden above the breakpoint, a two-rule burger below it,
   matching the 390px comp. */
.menu-toggle {
  display: none;
  flex-direction: column; gap: 4px;
  padding: 8px 2px; background: none; border: 0; cursor: pointer;
}
.menu-toggle i { display: block; width: 18px; height: 1.5px; background: var(--color-text); }

/* ── grids that collapse ───────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(24px, 3.5vw, 48px); }
.grid-5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
.grid-7-5 { grid-template-columns: 7fr 5fr; align-items: start; }
.grid-6-6 { grid-template-columns: 6fr 6fr; align-items: center; }
.grid-2   { grid-template-columns: 1fr 1fr; }
.grid-3   { grid-template-columns: repeat(3, 1fr); }
.grid-center { align-items: center; }

.tiles { display: grid; gap: clamp(14px, 1.7vw, 22px); }

/* ── definition rows (ruled lists) ─────────────────────────────────────── */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; gap: 18px;
  padding: 13px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.rows .row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.row-label {
  font-size: 12px; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--color-accent-700);
}
.row p { margin: 0; font-size: 14px; line-height: 1.55; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { max-width: 880px; }
.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  padding: 14px 0;
}
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 18px; text-transform: uppercase; letter-spacing: .02em;
  list-style: none;
  display: flex; align-items: baseline; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 20px; line-height: 1; color: var(--color-accent-700);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { font-size: 14px; line-height: 1.6; margin: 10px 0 2px; max-width: 76ch; }

/* ── footer ────────────────────────────────────────────────────────────── */

.legal {
  border-top: 1px solid var(--color-divider);
  padding: 20px var(--gutter) 26px;
  font-size: 11.5px; line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  max-width: 110ch;
}

/* ═══ responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid-5-7, .grid-7-5, .grid-6-6 { grid-template-columns: 1fr; }
  .grid-6-6 { align-items: start; }
}

@media (max-width: 760px) {
  .masthead-nav { display: none; }
  .menu-toggle { display: flex; }
  .masthead[data-open="true"] + .mobile-nav { display: flex; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .faq summary { font-size: 16px; }

  /* Touch targets. */
  .btn { min-height: 44px; }
  .input { min-height: 44px; }
}

/* ── mobile nav drawer ─────────────────────────────────────────────────── */

.mobile-nav {
  display: none;
  flex-direction: column;
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  position: sticky; top: 66px; z-index: 19;
}
.mobile-nav a {
  padding: 13px var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  color: inherit; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 17px; text-transform: uppercase; letter-spacing: .02em;
}
.mobile-nav a:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .mobile-nav, .menu-toggle { position: static; }
  .btn { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   THE 18-MONTH CLOCK — a progress meter drawn as one cell per month.
   The cell grid is a picture: it carries role="img" + an aria-label that
   says the same thing in words, and the cells themselves are hidden from
   the accessibility tree.
   ═══════════════════════════════════════════════════════════════════ */

.clock {
  padding: clamp(16px, 1.8vw, 24px);
}

.clock-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.clock-month {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(17px, 1.8vw, 21px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
}
.clock-stats {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* One equal column per cell, however many the data hands us — no column
   count in the CSS and no inline style, which the site's CSP
   (style-src 'self') would refuse anyway. */
.clock-cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  margin-bottom: var(--space-3);
}
.clock-cell { height: clamp(18px, 2vw, 26px); }
.clock-cell-on { background: var(--color-accent); }
.clock-cell-off { border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent); }

.clock-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.clock-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.clock-note-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-accent-700);
}

@media (max-width: 900px) {
  .clock-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
  }
}
@media (max-width: 520px) {
  .clock-cells { gap: 2px; }
  .clock-legend { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO — the day/night split (public page).
   The split IS the concept, so it survives to 320px: two bands side by
   side above 760px, stacked day-over-night below it. Never swapped for a
   different image.

   Alignment note: the <h1> spans the whole hero grid so that "Day Boy
   Night Girl" is one heading, while the two kickers sit outside it (they
   are page copy, not part of the title). To keep the words landing in the
   same rows as the kickers, .hero and .hero-title declare the *same*
   explicit row template — every track is a known length, so the two grids
   line up without subgrid.
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  --hero-pad-inline: clamp(18px, 4.7vw, 64px);
  --hero-pad-block: clamp(34px, 11vw, 166px);
  --hero-kicker-h: clamp(26px, 2.4vw, 32px);
  --hero-row-kicker: calc(var(--hero-pad-block) + var(--hero-kicker-h));
  --hero-row-word: calc(1.8 * var(--fs-display) + var(--hero-pad-block));

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--hero-row-kicker) var(--hero-row-word);
}

/* ── the two bands (painted behind everything) ─────────────────────── */

.hero-band {
  grid-row: 1 / -1;
  z-index: 0;
}
.hero-band-day {
  grid-column: 1;
  border-right: 1px solid var(--color-divider);
}
.hero-band-night {
  grid-column: 2;
  position: relative;
  overflow: hidden;
  background: var(--color-accent-900);
}
.hero-plate {
  position: absolute;
  inset: 0;
  opacity: .5;
}
.hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── kickers ───────────────────────────────────────────────────────── */

.hero-kicker {
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 1;
  margin: 0;
  padding-bottom: var(--space-3);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}
.hero-kicker-day {
  grid-column: 1;
  padding-left: var(--hero-pad-inline);
  padding-right: var(--space-3);
  color: var(--color-accent-700);
}
.hero-kicker-night {
  grid-column: 2;
  padding-right: var(--hero-pad-inline);
  padding-left: var(--space-3);
  text-align: right;
  color: var(--color-accent-300);
}

/* ── the title ─────────────────────────────────────────────────────── */

.hero-title {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: var(--hero-row-kicker) var(--hero-row-word);
  font-size: var(--fs-display);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero-word {
  grid-row: 2;
  align-self: start;
}
.hero-word-day {
  grid-column: 1;
  padding-left: var(--hero-pad-inline);
  padding-right: var(--space-3);
  margin-left: -.05em;
}
.hero-word-night {
  grid-column: 2;
  padding-right: var(--hero-pad-inline);
  padding-left: var(--space-3);
  text-align: right;
  color: var(--color-cream);
}
.hero-line { display: block; }

/* ── the "Now attaching" strip under the split ─────────────────────── */

.hero-strip {
  --hero-pad-inline: clamp(18px, 4.7vw, 64px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 24px);
  padding: var(--space-6) var(--hero-pad-inline);
  border-top: 1px solid var(--color-divider);
}
.hero-strip-label {
  flex: none;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
}
.hero-strip-line {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-lede);
  line-height: 1.45;
  font-style: italic;
}
.hero-strip-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex: none;
}

/* ── stacked: day band above, night band below ─────────────────────── */

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows:
      var(--hero-row-kicker) var(--hero-row-word)
      var(--hero-row-kicker) var(--hero-row-word);
  }
  .hero-title {
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-rows:
      var(--hero-row-kicker) var(--hero-row-word)
      var(--hero-row-kicker) var(--hero-row-word);
  }
  .hero-band-day {
    grid-column: 1;
    grid-row: 1 / 3;
    border-right: 0;
  }
  .hero-band-night {
    grid-column: 1;
    grid-row: 3 / 5;
  }
  .hero-kicker-day  { grid-column: 1; grid-row: 1; }
  .hero-kicker-night { grid-column: 1; grid-row: 3; }
  .hero-word-day   { grid-column: 1; grid-row: 2; }
  .hero-word-night { grid-column: 1; grid-row: 4; }

  .hero-strip {
    display: grid;
    gap: var(--space-4);
  }
  .hero-strip-actions {
    margin-left: 0;
    display: grid;
    gap: var(--space-3);
  }
  .hero-strip-actions .btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC PAGE (/) — everything the design system doesn't already carry.
   Prefix: .pub-*  (plus two shared patches, flagged below).
   ═══════════════════════════════════════════════════════════════════ */

/* ── shared patch ──────────────────────────────────────────────────────
   system.css gives .section-head its colour and margin but no type scale,
   so sectionHead()'s <h2> would render at the 32px h2 size. Every comp
   draws the section kicker at h6 size. Sized here until it lands in
   system.css — same values as design-source/opt-*.html.
   ─────────────────────────────────────────────────────────────────── */
.section-head {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* site.js resolves a control's container with .closest('.field'), then fills
   the .field-error inside it. The accredited checkbox therefore sits in a
   .field wrapper — which would otherwise inherit the small muted label type
   meant for text inputs, so the checkline is restored here. */
.field > label.checkline {
  display: flex;
  margin-bottom: 0;
  font-size: 13px;
  color: inherit;
}

/* ── type ──────────────────────────────────────────────────────────── */

.pub-lead-h {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.pub-sub-h {
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.pub-name-h {
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.pub-card-h {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.pub-lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}
.pub-lede:last-child { margin-bottom: 0; }
.pub-note {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.pub-kicker {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}
.pub-measure { max-width: 62ch; }
.pub-cardlink {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: 13px;
  font-weight: 600;
}

/* ── ruled rows: the two column shapes the comps use ───────────────── */

.pub-rows-label .row { grid-template-columns: 168px minmax(0, 1fr); }
.pub-rows-ab .row { grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; }
.row p.pub-row-strong {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ── figures ───────────────────────────────────────────────────────── */

.pub-still img { width: 100%; aspect-ratio: 7 / 6; object-fit: cover; }
.pub-still figcaption { margin-top: 0; padding: 6px 8px; font-size: 11px; }
.pub-world-fig img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.pub-portrait img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }

/* ── 02 · the five chairs ──────────────────────────────────────────── */

.pub-chairs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* The segmented control is two radios in a fieldset — keyboard support,
   and the panels still switch with JavaScript off (see :has() below). */
.pub-seg {
  flex: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 1px solid var(--color-divider);
}
.pub-seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pub-seg label:nth-of-type(2) { border-left: 1px solid var(--color-divider); }
.pub-seg label:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pub-seg input:checked + label {
  background: var(--color-accent);
  color: var(--color-cream);
}
.pub-seg input:checked + label:hover { background: var(--color-accent-600); }
/* The radio itself is visually hidden, so the ring has to live on its
   label. :focus as well as :focus-visible — the input is only reachable by
   keyboard or by clicking the label, and a segmented control that has focus
   should say so either way. */
.pub-seg input:focus + label,
.pub-seg input:focus-visible + label {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* No-JS fallback for the switch. site.js does the same thing by moving the
   hidden attribute, and the two always agree — so either alone is correct,
   and the toggle still works with JavaScript off. */
.pub-chairs-section:has(#chair-state-sample:checked) [data-chair-grid="launch"] { display: none; }
.pub-chairs-section:has(#chair-state-sample:checked) [data-chair-grid="sample"] { display: block; }

.pub-sample-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 13px;
  line-height: 1.5;
}

.pub-chairs {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.pub-chair {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 230px;
  padding: var(--space-4) 15px;
}
.pub-chair-n {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--color-accent-700);
}
.pub-chair-role {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  min-height: 48px;
}
.pub-chair-state {
  height: 86px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  text-align: center;
}
.pub-chair-state-label {
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 600;
}
.pub-chair-state-open {
  border: 1px dashed color-mix(in srgb, var(--color-text) 35%, transparent);
}
.pub-chair-state-open .pub-chair-state-label {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.pub-chair-state-negotiating { border: 1px solid var(--color-accent); }
.pub-chair-state-negotiating .pub-chair-state-label {
  letter-spacing: .1em;
  color: var(--color-accent-700);
}
.pub-chair-state-via-director { background: var(--color-neutral-200); }
.pub-chair-state-via-director .pub-chair-state-label {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--color-neutral-700);
}
.pub-chair-state-attached {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 12px;
  text-align: left;
  background: var(--color-accent-900);
  color: var(--color-cream);
}
.pub-chair-state-attached .pub-chair-state-label {
  font-size: 10px;
  color: var(--color-accent-300);
}
.pub-chair-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.pub-chair-cred {
  font-size: 11.5px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-cream) 75%, transparent);
}
.pub-chair-seat {
  margin: auto 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── 03 · the target list ──────────────────────────────────────────── */

.pub-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}
.pub-flow-arrow { color: var(--color-neutral-500); }

/* ── 05 · the Executive Producer seat ──────────────────────────────── */

.pub-titlecard {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2.39 / 1;
  padding: var(--space-4);
  background: var(--color-ink);
  text-align: center;
}
.pub-titlecard-role {
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: color-mix(in srgb, var(--color-cream) 55%, transparent);
}
.pub-titlecard-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-cream);
  text-shadow: 0 0 26px color-mix(in srgb, var(--color-accent-300) 34%, transparent);
}
.pub-titlecard-stamp {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-cream) 35%, transparent);
}

/* ── 06 · the producer ─────────────────────────────────────────────── */

.pub-bio { grid-template-columns: 280px minmax(0, 1fr); }

/* .table th is the 11px uppercase column head. A row head is the credit
   itself, so it takes the comp's condensed 17px instead. */
.pub-credits th[scope="row"] {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--color-text);
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ── 07 · the road to greenlight ───────────────────────────────────── */
/* Gaps show the container colour, so the rules stay 1px at every
   column count without per-cell border bookkeeping. */
.pub-road {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.pub-road > li {
  background: var(--color-bg);
  padding: var(--space-4) var(--space-4) 18px;
}
.pub-road > .pub-road-end {
  background: var(--color-accent-900);
  color: var(--color-cream);
}
.pub-road-step {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--color-accent-700);
  margin-bottom: var(--space-1);
}
.pub-road-end .pub-road-step { color: var(--color-accent-300); }
.pub-road-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pub-road-note {
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.pub-road-end .pub-road-note { color: color-mix(in srgb, var(--color-cream) 70%, transparent); }

/* ── 08 · the world ────────────────────────────────────────────────── */

.pub-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px dashed color-mix(in srgb, var(--color-cream) 30%, transparent);
}
.pub-teaser-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--color-cream) 40%, transparent);
}
.pub-teaser-label {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-cream) 70%, transparent);
}

/* ── 10 · request access ───────────────────────────────────────────── */

.pub-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pub-room-list li {
  font-size: 14px;
  line-height: 1.5;
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.pub-room-list li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* The two bordered cards on this page: the "why no names yet" note and the
   request-access form. Same inset as the comp's blueprint panels. */
.pub-card,
.pub-form { padding: clamp(16px, 1.8vw, 24px); }
.pub-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-4);
}
.pub-form-check { margin: var(--space-6) 0 18px; }
.pub-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.pub-form-or {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .pub-chairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pub-bio { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .pub-chairs-head { align-items: stretch; }
  .pub-seg { width: 100%; }
  .pub-seg label { flex: 1 1 0; min-height: 44px; white-space: normal; text-align: center; }
}

@media (max-width: 620px) {
  .pub-chairs { grid-template-columns: minmax(0, 1fr); }
  .pub-chair { min-height: 0; }
  .pub-chair-role { min-height: 0; }
  .pub-road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-rows-label .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .pub-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pub-form-actions { display: grid; }
  .pub-form-actions .btn { width: 100%; }
  .pub-form-or { text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   /invest — the accredited-verification gate (comp: opt-1h)
   Everything here is namespaced `invest-`. Only what system.css does not
   already carry: the step indicator, and the comp's one-off type sizes.
   ═══════════════════════════════════════════════════════════════════════ */

/* .section stops at 6px bottom padding because it usually stacks with the
   next section. This page is a single section, so it closes itself. */
.invest-gate { padding-bottom: var(--section-gap); }

/* This is the one masthead on the site with a note and no nav, so on a phone
   the note has nothing to shrink against. Give it its own line instead of
   letting it ladder down the right edge. Scoped to this page's body class. */
@media (max-width: 560px) {
  .invest .masthead { flex-wrap: wrap; row-gap: 2px; }
  .invest .masthead-note { flex-basis: 100%; }
}

/* ── step indicator ────────────────────────────────────────────────────── */

.invest-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: 0;
  border: 1px solid var(--color-divider);
}

.invest-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px clamp(10px, 1.4vw, 16px);
  /* The comp mutes the pending steps to 55%; at 12px uppercase that lands
     under 4.5:1, so they sit at the same 72% the card copy uses. */
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.invest-step + .invest-step { border-left: 1px solid var(--color-divider); }

/* Comp fills the live step with --color-accent; cream on that is 3.6:1, so
   the fill steps one stop down the ramp to accent-700 (5.5:1). */
.invest-step[aria-current="step"] {
  background: var(--color-accent-700);
  color: var(--color-cream);
}

.invest-step-n {
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  line-height: 1;
}

.invest-step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Three labelled steps will not sit side by side on a phone. */
@media (max-width: 560px) {
  .invest-steps { grid-template-columns: 1fr; }
  .invest-step + .invest-step {
    border-left: 0;
    border-top: 1px solid var(--color-divider);
  }
}

/* ── left column ───────────────────────────────────────────────────────── */

.invest-title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 var(--space-3);
}

.invest-lede {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 var(--space-4);
  max-width: 46ch;
}

.invest-fine {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  max-width: 56ch;
}

/* ── right column: the two verification routes ─────────────────────────── */

.invest-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invest-card { padding: 18px 20px; }

.invest-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-2);
}

.invest-card-title {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.invest-card-body {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* No verifier is wired up behind the two chips above. Say so plainly,
   close enough to them that it cannot be read as small print. */
.invest-status {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .01em;
  margin: var(--space-1) 0 0;
  color: var(--color-accent-700);
}


/* ═══════════════════════════════════════════════════════════════════════════
   /room/login — the access-phrase door.

   No comp; assembled from system.css. Everything below is either prefixed
   `login-` or scoped inside `.login-card`, so nothing here can reach another
   page. The one un-prefixed class the page needs, `.form-error`, is specified
   by the build brief and has no rule in system.css — it is scoped under
   `.login-card` rather than declared globally.
   ═══════════════════════════════════════════════════════════════════════ */

/* This masthead is brand + note with no nav between them. Below roughly 520px
   the note is squeezed into a four-line column against the un-wrappable brand,
   so let the bar wrap and drop the note onto its own line. Scoped to this page
   via the body class rather than changed in system.css. */
.login-body .masthead {
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  padding: var(--section-gap) var(--gutter) calc(var(--section-gap) + var(--space-6));
}

/* The card is deliberately narrow — one field, one button, nothing to scan. */
.login-shell {
  width: 100%;
  max-width: 430px;
}

.login-card {
  padding: clamp(24px, 4.4vw, 34px) clamp(20px, 3.8vw, 32px);

  /* system.css has no error token; this is the literal its own `.field-error`
     uses, so the two reds match. Scoped, not promoted to :root. */
  --login-error-ink: var(--color-danger);
}

/* Matches the 30px uppercase heading on the /invest card (opt-1h). */
.login-card h1 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 var(--space-3);
}

.login-lede {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* No `display` is set on `.form-error` anywhere in this file — the `hidden`
   attribute has to keep winning, and a flex parent must not resurrect it. */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-card .form-error {
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--login-error-ink);
  background: color-mix(in srgb, var(--login-error-ink) 9%, transparent);
  color: var(--login-error-ink);
  font-size: 12.5px;
  line-height: 1.45;
}

/* The mirror of "Already verified? The room →" on /invest. */
.login-aside {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-size: 12px;
}

/* `.text-muted` resolves to roughly 3.6:1 on the cream ground, under AA at
   this size. Held in the same family, nudged to 70% so the line passes. */
.login-aside.text-muted {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

@media (max-width: 760px) {
  /* Autofocus raises the keyboard; centring would push the card under it. */
  .login-page {
    min-height: 0;
    align-items: flex-start;
  }

  .login-card .form-error {
    font-size: 13px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   /room/model — THE FINANCING MODEL
   Everything here is prefixed `rm-`, except the `.gate-banner` fallback below.
   Concatenated into site.css by scripts/build.mjs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── gated strip ───────────────────────────────────────────────────────────
   FALLBACK. `gatedBanner()` in src/lib/layout.js emits .gate-banner /
   .gate-banner-label / .gate-banner-note, but src/system.css defines none of
   them, and the strip is shared chrome for all four /room/* pages. These rules
   belong in system.css; they live here only so this page is not shipped with an
   unstyled legal notice. Delete this block once system.css carries it. */

.gate-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px var(--gutter);
  background: var(--color-accent-900);
  color: var(--color-cream);
}
.gate-banner-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gate-banner-note {
  margin-left: auto;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-cream) 70%, transparent);
}
@media (max-width: 680px) {
  .gate-banner-note { margin-left: 0; }
}

/* ── masthead, on this page only ───────────────────────────────────────────
   The comp draws the access chip as an accent tag and marks the current nav
   item in accent; system.css carries neither. Scoped to this page's body
   class so nothing else is touched. src/css/room.css carries the identical
   pair under `.room-index` — the two belong together in system.css. */

.room-model .masthead-note {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}
.room-model .masthead-nav a[aria-current="page"] {
  color: var(--color-accent-700);
  font-weight: 600;
}

/* The brand carries the "/ INVESTOR ROOM" sub and system.css sets
   white-space: nowrap on it — with the chip and the burger alongside, that
   overflows below ~400px. Let it wrap once the nav has collapsed. */
@media (max-width: 760px) {
  .room-model .brand { white-space: normal; }
  .room-model .menu-toggle { order: 1; }
  .room-model .masthead-note { order: 2; }
}

/* ── page head ─────────────────────────────────────────────────────────── */

.rm-pagehead {
  padding: clamp(24px, 3.2vw, 34px) var(--gutter) 0;
}
.rm-h1 {
  margin: 0;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── joined-cell grids ─────────────────────────────────────────────────────
   The comps draw these as one bordered block cut by hairlines rather than as
   gapped cards, so the standard `.grid-*` classes (which gap) can't express
   them. A 1px gap over a divider-coloured backing paints the rules in both
   axes, and keeps painting them correctly once the grid collapses to one
   column at the breakpoints below. */

.rm-cells {
  display: grid;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.rm-cells > * {
  min-width: 0;
  padding: clamp(14px, 1.7vw, 20px) clamp(15px, 1.8vw, 22px);
  background: var(--color-bg);
}
.rm-cells > .rm-cell-accent { background: var(--color-accent-100); }
.rm-cells > .rm-cell-dark {
  background: var(--color-accent-900);
  color: var(--color-cream);
}
.rm-cells > .rm-cell-dark h3 { color: var(--color-cream); }

/* Shared cell furniture. */
.rm-cell-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rm-cell-sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.rm-cells > .rm-cell-dark .rm-cell-sub { color: var(--color-accent-300); }

.rm-big {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rm-note {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.rm-cells > .rm-cell-dark .rm-note {
  color: color-mix(in srgb, var(--color-cream) 75%, transparent);
}

/* ── A · the comp ──────────────────────────────────────────────────────── */

.rm-comp-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rm-lede {
  margin: 0 0 10px;
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.rm-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.rm-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rm-stat-fig {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rm-stat-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.rm-cells > .rm-cell-dark .rm-stat-label { color: var(--color-accent-300); }

/* ── B · the capital stack ─────────────────────────────────────────────── */

/* Wide enough that the four columns stay legible; `.table-wrap` scrolls it
   rather than letting the note column crush at narrow widths. `.grid-7-5`
   holds its two columns down to 900px, which would leave the table scrolling
   sideways on a laptop, so `.rm-stackgrid` gives it the full width earlier —
   see the 1080px block at the foot of this file. */
.rm-stack { min-width: 580px; }
.rm-stack .rm-c-amt { width: 110px; }
.rm-stack .rm-c-pct { width: 74px; }
.rm-stack .rm-c-note { width: 216px; }
.rm-stack th.rm-c-amt,
.rm-stack th.rm-c-pct,
.rm-stack .rm-pct { text-align: right; }
.rm-stack .rm-pct { white-space: nowrap; }
.rm-stack .rm-cell-note {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.rm-box { padding: clamp(16px, 1.9vw, 20px) clamp(17px, 2vw, 22px); }
.rm-box-title {
  margin: 0 0 var(--space-2);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rm-box p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.rm-box p:last-child {
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* ── C · territories ───────────────────────────────────────────────────── */

.rm-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rm-terr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  column-gap: clamp(14px, 1.7vw, 24px);
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.rm-terr-grid li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 13px;
  line-height: 1.35;
}
.rm-terr-name { min-width: 0; }
.rm-terr-fig {
  flex: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-crown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px 16px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.rm-crown dt { min-width: 0; }
.rm-crown dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.rm-crown-note { color: color-mix(in srgb, var(--color-cream) 62%, transparent); }

.rm-terr-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
}
.rm-terr-total-ruled {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-cream) 25%, transparent);
}
.rm-after {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 76ch;
}

/* ── D · distribution paths ────────────────────────────────────────────── */

.rm-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm-path-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-2);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.rm-path-title .tag {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
.rm-path-body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.rm-path-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
  font-size: 12.5px;
}
.rm-path-rows dt { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.rm-path-rows dd { margin: 0; }
.rm-path-rows dd.rm-key { font-weight: 600; }

/* ── E · the release ───────────────────────────────────────────────────── */

.rm-release {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 16px;
}
.rm-release dt {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.rm-cells > .rm-cell-dark dt { color: var(--color-accent-300); }
.rm-release dd { margin: 0; }
.rm-release-val {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  line-height: 1.15;
  text-transform: uppercase;
}
.rm-release-note {
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.rm-cells > .rm-cell-dark .rm-release-note {
  color: color-mix(in srgb, var(--color-cream) 70%, transparent);
}

.rm-campaign {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.rm-campaign-label {
  flex: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.rm-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-taglist .tag { max-width: 100%; }

/* ── onward nav ────────────────────────────────────────────────────────── */

.rm-pagenav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 44px);
  padding: clamp(20px, 2.6vw, 28px) var(--gutter) clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--color-divider);
}

/* ═══ responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  /* Five cells over three or two columns leaves a hole, and an empty track in
     a `.rm-cells` grid paints as a divider-coloured block. Let the last cell
     take up the slack so the block stays solid. */
  .rm-release { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rm-release > :last-child { grid-column: span 2; }

  /* Stack the capital-stack table above its note ahead of `.grid-7-5`'s own
     900px breakpoint, so the table keeps the full page width and only starts
     scrolling on a genuinely narrow screen. */
  .rm-stackgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .rm-split,
  .rm-paths { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .rm-release { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-pagenav .btn { flex: 1 1 auto; }
}

@media (max-width: 460px) {
  .rm-stats,
  .rm-release { grid-template-columns: minmax(0, 1fr); }
  .rm-release > :last-child { grid-column: auto; }
  .rm-campaign-label { flex: 1 1 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   /room/position — the EP position (comp: opt-2b)
   Everything here is namespaced `rp-`. Only what system.css does not
   already carry: the figure block, the waterfall, the two ruled tables'
   row headers, and the risk list.

   Where the comp's contrast falls below AA the value is stepped, and the
   step is commented. Nothing else is retuned.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the gate banner ───────────────────────────────────────────────────── */
/* layout.js emits .gate-banner / -label / -note on every gated page, but
   system.css carries no rule for any of them. Styled here, deliberately
   unscoped, so this page renders correctly on its own.

   KNOWN DUPLICATION: room.css and room-model.css carry the same block, for
   the same reason. The three are kept value-identical so cascade order does
   not matter (site.css concatenates room-model, room-position, room — the
   last one wins). The fix is to hoist this block into system.css, next to
   .plate, and delete all three copies. Flagged in the build report; not done
   here because system.css is off-limits to page work. */

.gate-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px var(--gutter);
  background: var(--color-accent-900);
  color: var(--color-cream);
}

.gate-banner-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Comp sets this note at 70% cream. At 11.5px it is the smallest text on the
   page, so it sits at 78% (≈8:1 on accent-900). */
.gate-banner-note {
  font-size: 11.5px;
  line-height: 1.5;
  margin-left: auto;
  color: color-mix(in srgb, var(--color-cream) 78%, transparent);
}

/* ── F · where the $300K sits ──────────────────────────────────────────── */

.rp-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.6vw, 32px);
  align-items: center;
  border: 1px solid var(--color-accent);
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 2.6vw, 28px);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.rp-figures {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
}

.rp-fig {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1;
}

/* Comp mutes the "from" figure to 45% of the ink, which is ~2.9:1 — under
   even the 3:1 large-text floor. 50% clears it. */
.rp-fig-from {
  font-size: clamp(34px, 5.2vw, 52px);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.rp-fig-arrow {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--color-accent-700);
}

.rp-fig-to {
  font-size: clamp(44px, 7vw, 72px);
  color: var(--color-accent-700);
}

.rp-fig-mult {
  font-size: clamp(22px, 3vw, 30px);
  color: var(--color-accent-700);
}

.rp-headline-title {
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 var(--space-1);
}

.rp-headline-body {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 760px) {
  .rp-headline { grid-template-columns: 1fr; align-items: start; }
}

/* ── F · parts A / B / C ───────────────────────────────────────────────── */

.rp-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 1px of the container's own background shows through as the rule, so the
     dividers stay correct however many columns survive the breakpoint. */
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.rp-part {
  background: var(--color-bg);
  padding: 18px 20px 20px;
}

.rp-part-title {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 5px;
}

.rp-part-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-1);
}

/* Comp sets the card copy at 70%; 72% is the value the rest of the site
   uses for the same job and clears 4.5:1. */
.rp-part-body {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* Three cards in two columns leave an empty fourth cell, and an empty cell has
   no .rp-part background over it — the container's divider colour would paint
   through as a solid block. Span the last card across the row so the grid is
   always exactly full. At 760px and below the grid is one column, where
   1 / -1 is that single column, so the rule is a no-op there. */
@media (max-width: 1080px) {
  .rp-parts { grid-template-columns: repeat(2, 1fr); }
  .rp-parts .rp-part:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px)  { .rp-parts { grid-template-columns: 1fr; } }

/* ── the two running notes (F and H) ───────────────────────────────────── */

.rp-note {
  font-size: 14px;
  line-height: 1.55;
  max-width: 104ch;
  margin: var(--space-4) 0 0;
}

/* ── G · the recoupment waterfall ──────────────────────────────────────── */

.rp-waterfall {
  counter-reset: tier;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-divider);
  font-size: 13.5px;
}

.rp-tier {
  counter-increment: tier;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 0 8px;
  padding: 11px 16px;
}

.rp-tier + .rp-tier {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.rp-tier::before {
  content: counter(tier);
  font-weight: 600;
  color: var(--color-accent-700);
}

.rp-tier-line { font-weight: 600; }

.rp-tier-figure {
  text-align: right;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.rp-tier-dark {
  border-top: 0;
  background: var(--color-accent-900);
  color: var(--color-cream);
}

.rp-tier-dark::before { color: var(--color-accent-300); }
.rp-tier-dark .rp-tier-figure { color: color-mix(in srgb, var(--color-cream) 78%, transparent); }
.rp-tier-you { color: var(--color-accent-300); }

/* Below this the tier label and its figure will not share a line. */
@media (max-width: 520px) {
  .rp-tier {
    grid-template-columns: 26px 1fr;
    row-gap: 3px;
    padding: 11px 14px;
  }
  .rp-tier-figure {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
}

/* ── the two bordered side boxes (G and J) ─────────────────────────────── */

.rp-box {
  border: 1px solid var(--color-divider);
  padding: 18px 20px;
}

.rp-box-title {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 var(--space-2);
}

.rp-box p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.rp-box-quiet { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

.rp-box > :last-child { margin-bottom: 0; }

.rp-arrows { line-height: 1.6; }

/* ── the two ruled tables (H and J) ────────────────────────────────────── */
/* Both use <th scope="row"> for the first column, which system.css styles as
   a column header. Reset it back to body copy. */

.rp-table tbody th {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--color-text);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.rp-table tbody th.rp-strong,
.rp-table td.rp-strong { font-weight: 600; }

/* ── H · return scenarios ──────────────────────────────────────────────── */
/* Seven columns will not compress into a phone. Hold the table at its real
   width and let .table-wrap scroll it. */

.rp-scenarios { min-width: 760px; }

.rp-scenarios th.rp-r,
.rp-scenarios td.rp-r { text-align: right; }

/* Comp dims the not-applicable cells to 45–55% of the ink (~2.9–3.5:1).
   65% is the same value the waterfall figures use and clears 4.5:1. */
.rp-scenarios .rp-dim { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.rp-scenarios .rp-small { font-size: 12.5px; }

.rp-scenarios .rp-mult { font-size: 17px; }

/* The base case keeps its tint on hover — the row is marked, not selected. */
.rp-scenarios tr.rp-base,
.rp-scenarios tr.rp-base:hover { background: var(--color-accent-100); }

.rp-scenarios tr.rp-base .rp-mult {
  font-size: 19px;
  color: var(--color-accent-700);
}

/* ── I · risks ─────────────────────────────────────────────────────────── */

.rp-risks {
  counter-reset: risk;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 36px);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.rp-risk {
  counter-increment: risk;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.rp-risk::before {
  content: counter(risk, decimal-leading-zero);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-700);
}

.rp-risk p {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* The closing stamp is not a risk, so it sits below the list rather than
   inside it — same rule, same rhythm, its own row. */
.rp-risk-note {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 11px 0;
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.rp-risk-dash {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-700);
}

@media (max-width: 900px) {
  .rp-risks { grid-template-columns: 1fr; }
}

/* ── J · what has to be true ───────────────────────────────────────────── */

.rp-prereq .tag { white-space: normal; }

/* Comp fixes the status column at 230px; a percentage holds the same
   proportion without forcing a scrollbar on a phone. */
@media (min-width: 561px) {
  .rp-prereq td:last-child,
  .rp-prereq th:last-child { width: 44%; }
}

/* ── close ─────────────────────────────────────────────────────────────── */

.rp-close { padding-bottom: var(--space-6); }

.rp-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) var(--gutter) var(--section-gap);
}


/* ═══════════════════════════════════════════════════════════════════════════
   /room — the investor room index. Everything page-specific is prefixed
   `room-` and, where it restyles a shared component, scoped to the page's
   body class (.room-index) so no other page is affected.

   The one exception is the .gate-banner block below: gatedBanner() is emitted
   by src/lib/layout.js for every gated page but has no rules in system.css,
   so it is defined here globally rather than left unstyled. See the note.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── shared: the gated-layer strip ─────────────────────────────────────────
   NOT page-scoped on purpose. layout.js emits .gate-banner on /room,
   /room/model, /room/position and /room/login; system.css styles none of it.
   Values ported from the banner in design-source/opt-2a.html.
   If this moves into system.css, delete this block. ─────────────────────── */

.gate-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px var(--gutter);
  background: var(--color-accent-900);
  color: var(--color-cream);
}
.gate-banner-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
/* The comp sets this note at 70% cream; at 11.5px it is the smallest text on
   any gated page, so it sits at 78% (≈8:1 on accent-900). src/css/room-model.css
   and src/css/room-position.css carry their own copies of this block — this file
   sorts last, so these are the values that ship. */
.gate-banner-note {
  font-size: 11.5px;
  line-height: 1.5;
  margin-left: auto;
  color: color-mix(in srgb, var(--color-cream) 78%, transparent);
}

@media (max-width: 760px) {
  .gate-banner-note { margin-left: 0; }
}

/* ── masthead, on this page only ───────────────────────────────────────────
   The comp draws the access chip as an accent tag and marks the current nav
   item in accent. system.css carries neither, so both are restyled here and
   nowhere else. ────────────────────────────────────────────────────────── */

.room-index .masthead-note {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.room-index .masthead-nav a[aria-current="page"] {
  color: var(--color-accent-700);
  font-weight: 600;
}

/* The brand carries the "/ INVESTOR ROOM" sub and system.css sets
   white-space: nowrap on it — with the chip and the burger alongside, that
   overflows below ~400px. Let it wrap once the nav has collapsed. */
@media (max-width: 760px) {
  .room-index .brand { white-space: normal; }
  .room-index .menu-toggle { order: 1; }
  .room-index .masthead-note { order: 2; }
}

/* ── section heads ─────────────────────────────────────────────────────────
   sectionHead() renders <h2 class="section-head">; system.css gives it a
   colour but no size, so it inherits the 32px h2. Every comp draws the kicker
   at the h6 step. Restored here for this page only. ─────────────────────── */

.room-index .section-head {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-col > .hr { margin: 0 0 var(--space-4); }

/* ── document cards ────────────────────────────────────────────────────── */

.room-doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
}

.room-doc-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 3px;
}

.room-doc-meta {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 var(--space-2);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* Pinned to the foot of the card so the affordances line up across a row. */
.room-doc-open,
.room-doc-tag { margin-top: auto; }

.room-doc-open {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-700);
}

/* The live one. */
.room-doc-live { border-color: var(--color-accent); }

/* Not open yet — dimmed exactly as the comp draws it. */
.room-doc-dim { opacity: .6; }

/* ── the allocation table ──────────────────────────────────────────────── */

/* .num would drag the heading font onto the column header; right-align only. */
.table th.room-amount { text-align: right; }

.room-alloc .room-strong { font-weight: 600; }

/* ── step 3 · the call ─────────────────────────────────────────────────── */

.room-callout {
  margin-top: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--color-divider);
  background: var(--color-neutral-100);
}

.room-callout-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 4px;
}

.room-callout p {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 10px;
}

/* ── the confidential line ─────────────────────────────────────────────── */

.room-confidential {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-divider);
  font-size: 11px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* Sits under "The documents" heading — explains why four of the cards
   show an "Open" affordance that does not yet open. */
.room-docs-note {
  margin: -6px 0 16px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}