/* cio.css: GENERATED by cio/scripts/build.py from cio/src/css/{tokens,site,v2}.css. Edit those, then rebuild. */

/* ---- tokens.css ---- */
/* tokens.css: the ONLY file in CIO Cafe allowed to hold raw visual values.
   Primitives -> semantic tokens -> components. Change the brand here, nowhere else. */
@layer reset, tokens, base, layout, components, utilities;

/* Fonts: Inter only, declared once in the shared type-system.css (loaded first). */

@layer tokens {
  :root {
    color-scheme: light;

    /* ---------- Tier 1 Primitives: Architectural Limestone (hue 96) & Club Forest (hue 166) ---------- */
    --paper-0: oklch(98.6% 0.005 98);
    --paper-1: oklch(96.6% 0.008 98);
    --paper-2: oklch(93.8% 0.011 96);
    --paper-3: oklch(89.6% 0.014 94);
    --paper-4: oklch(82.5% 0.018 92);

    --bean-6: oklch(60% 0.022 165);
    --bean-7: oklch(46% 0.026 165);
    --bean-8: oklch(37% 0.032 166);
    --bean-9: oklch(29.5% 0.038 166);
    --bean-10: oklch(23.5% 0.034 168);
    --bean-11: oklch(19.2% 0.030 168);
    --bean-12: oklch(15.2% 0.024 168);

    --copper-3: oklch(93% 0.035 84);
    --copper-5: oklch(85% 0.095 84);
    --copper-6: oklch(79% 0.110 80);
    --copper-8: oklch(55% 0.100 70);
    --copper-9: oklch(45% 0.085 66);
    --copper-10: oklch(38% 0.075 62);

    --sage-3: oklch(94% 0.03 150);
    --sage-9: oklch(50% 0.09 155);
    --sage-11: oklch(36% 0.07 155);
    --red-9: oklch(52% 0.18 25);

    /* ---------- Space: --space-1..10 and --measure come from type-system.css ---------- */
    --section-y: clamp(4rem, 3.2rem + 3.5vw, 7rem);
    --cio-gutter: clamp(1.125rem, 0.75rem + 2vw, 2.5rem);
    --container: 76rem;
    --nav-h: 4.25rem;

    /* ---------- Type: family and size ladder come from type-system.css; --fs-* are legacy
       aliases of ladder roles. Off-role (ADR-DS03): --fs-base/--fs-md use Lead, --fs-lead uses Subheading. ---------- */
    --font-display: var(--font-sans);
    --fs-xs: var(--font-size-caption);
    --fs-sm: var(--font-size-small);
    --fs-base: var(--font-size-lead);
    --fs-md: var(--font-size-lead);
    --fs-lead: var(--font-size-sub);
    --fs-lg: var(--font-size-heading);
    --fs-xl: var(--font-size-title);
    --fs-2xl: var(--font-size-title);
    --fs-3xl: var(--font-size-display);
    --fs-hero: var(--font-size-display);
    --lh-tight: 1.06;
    --lh-snug: 1.16;
    --lh-body: 1.6;
    --track-display: -0.014em;
    --track-eyebrow: 0.06em;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-display: 500;

    /* ---------- Radius / structural borders (Shape Consistency Lock: squared stationery) ---------- */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-pill: 2px;
    --hairline: 1px;
    --shadow-pop: 0 0 0 1px var(--color-border-strong), 0 18px 42px -18px oklch(from var(--bean-12) l c h / 0.24);

    /* ---------- Motion (DESIGN_VARIANCE: 6, MOTION_INTENSITY: 3, VISUAL_DENSITY: 3) ---------- */
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-reveal: 550ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --motion-distance: 14px;

    /* ---------- Z-Index Scale ---------- */
    --z-nav: 50;
    --z-dialog: 100;
    --z-grain: 1;

    /* ---------- Tier 2 Semantic: LIGHT (Default — Positive Polarity Limestone & Forest Ink) ----------
       Page Theme Lock: Every section stays in the warm limestone surface family (--paper-0 to --paper-2).
       Color Consistency Lock: Single primary accent (--bean-9 Club Forest) across the entire page. */
    --color-bg: var(--paper-1);
    --color-bg-raised: var(--paper-0);
    --color-bg-sunken: var(--paper-2);
    --color-bg-muted: var(--paper-3);
    --color-fg: var(--bean-11);
    --color-fg-muted: var(--bean-8);
    --color-fg-subtle: var(--bean-8); /* font_best: text at 12-14px needs 7:1; bean-8 holds 7.5:1 even on paper-3 */
    --color-border: oklch(from var(--bean-11) l c h / 0.13);
    --color-border-strong: oklch(from var(--bean-11) l c h / 0.28);
    --color-input-border: oklch(from var(--bean-11) l c h / 0.42);

    --color-accent: var(--bean-9);
    --color-accent-hover: var(--bean-10);
    --color-accent-fg: var(--paper-0);
    --color-accent-soft: oklch(from var(--bean-9) l c h / 0.08);
    --color-accent-text: var(--bean-9);
    --color-focus: var(--bean-9);
    /* font_best Part 8 vocabulary (ADR-DS04): the shared names, aliased to the cio palette */
    --color-surface: var(--color-bg-raised);
    --color-text: var(--color-fg);
    --color-text-muted: var(--color-fg-muted);
    --color-text-subtle: var(--color-fg-subtle);
    --color-on-accent: var(--color-accent-fg);
    --color-link: var(--color-accent-text);
    --cio-accent: var(--color-accent);

    --color-success: var(--sage-9);
    --color-success-soft: var(--sage-3);
    --color-success-text: var(--sage-11);
    --color-danger: var(--red-9);
    --color-nav-bg: oklch(from var(--paper-1) l c h / 0.86);
    --color-backdrop: oklch(from var(--bean-12) l c h / 0.45);
    --color-grain-opacity: 0.035;

    /* Bookend band tokens (sunken limestone; zero mid-page polarity inversion) */
    --band-bg: var(--paper-2);
    --band-bg-raised: var(--paper-0);
    --band-fg: var(--bean-11);
    --band-fg-muted: var(--bean-8);
    --band-border: oklch(from var(--bean-11) l c h / 0.16);
    --band-accent: var(--bean-9);

    /* The table (signature drawing): club-green top, bronze rim, bone paper and cups */
    --rt-stage: var(--paper-0);
    --rt-floor: var(--paper-2);
    --rt-table: var(--bean-9);
    --rt-rim: var(--copper-8);
    --rt-inlay: oklch(from var(--copper-6) l c h / 0.5);
    --rt-saucer: var(--paper-3);
    --rt-cup: var(--paper-0);
    --rt-chair: var(--paper-0);
    --rt-chair-line: var(--bean-9);
    --rt-person: var(--bean-7);
    --rt-head: var(--bean-10);
    --rt-host: var(--copper-8);
    --rt-yours: var(--copper-3);
    --rt-yours-hover: var(--copper-5);
    --rt-yours-line: var(--copper-9);
    --rt-paper: var(--paper-0);
    --rt-paper-edge: oklch(from var(--bean-11) l c h / 0.22);
    --rt-paper-under: var(--paper-3);
    --rt-bronze-text: var(--copper-10);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 1ms;
      --dur-base: 1ms;
      --dur-slow: 1ms;
      --dur-reveal: 1ms;
      --motion-distance: 0px;
    }
  }
  @media (prefers-contrast: more) {
    :root {
      --color-fg-muted: var(--color-fg);
      --color-fg-subtle: var(--color-fg);
      --color-border: var(--color-border-strong);
      --color-grain-opacity: 0;
    }
  }
}


/* ---- site.css ---- */
/* site.css: consumes semantic tokens from tokens.css only. Zero raw colors or raw durations. */

/* ============ RESET ============ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  p, li, h1, h2, h3, h4, blockquote, dd { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
}

/* ============ BASE ============ */
@layer base {
  /* Smooth only for in-page navigation the visitor starts (focus-within), so find-in-page and scripted scrolls stay instant. */
  html:focus-within { scroll-behavior: smooth; }
  html {
    scroll-padding-top: calc(var(--nav-h) + var(--space-5));
  }
  @media (prefers-reduced-motion: reduce) { html, html:focus-within { scroll-behavior: auto; } }

  body {
    min-height: 100svh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--leading-body, 1.55);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    letter-spacing: var(--track-display);
    line-height: var(--lh-snug);
    text-wrap: balance;
    font-optical-sizing: auto;
  }
  h1 { font-size: var(--fs-3xl); line-height: var(--leading-display, 1.05);letter-spacing:var(--tracking-display, -0.02em);font-weight:var(--weight-semibold, 600); }
  h2 { font-size: var(--font-size-heading, 1.5rem); line-height: var(--leading-heading, 1.2); max-width: 24ch;letter-spacing:var(--tracking-heading, -0.01em); }
  h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); letter-spacing: 0; }
  h4 { font-size: var(--font-size-body, 1rem); font-weight: var(--weight-medium, 500); }
  p { text-wrap: pretty; }
  em, i { font-style: normal; font-weight: var(--weight-medium, 500); color: var(--color-text); }
  /* Emphasis by colour: Inter ships no italic face and font-synthesis is off (DS-10). */
  .hero h1 em, .finale h2 em {
    font-style: normal;
    font-weight: inherit;
    color: var(--color-accent-text);
  }
  strong, b { font-weight: var(--fw-semibold); }
  small { font-size: var(--fs-sm); }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--color-border-strong);
    transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover { text-decoration-color: currentColor; color: var(--color-accent-text); }
  }

  :focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
    border-radius: var(--radius-sm);
  }
  ::selection { background: var(--color-accent-soft); color: var(--color-fg); }

  hr { border: 0; border-top: var(--hairline) solid var(--color-border); }
  kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 0.1em 0.45em;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--hairline) var(--color-border-strong);
    background: var(--color-bg-raised);
  }
  .num, time, td { font-variant-numeric: tabular-nums; }

  @media (forced-colors: active) {
    :focus-visible { outline: 2px solid CanvasText; }
    .btn { border: 1px solid ButtonText; }
  }
}

/* ============ LAYOUT ============ */
@layer layout {
  .container {
    width: min(100% - 2 * var(--cio-gutter), var(--container));
    margin-inline: auto;
  }
  .container-narrow { width: min(100% - 2 * var(--cio-gutter), 48rem); margin-inline: auto; }
  .section { padding-block: var(--section-y); position: relative; }
  .section-tight { padding-block: calc(var(--section-y) * 0.65); position: relative; }
  .stack > * + * { margin-top: var(--stack, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
  .grid { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 18rem)), 1fr)); }
  .grid[data-min="wide"] { --min: 22rem; }
  @media (min-width: 48rem) { .grid[data-min="wide"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .split { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 60rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }
  .sticky-col { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .center { text-align: center; margin-inline: auto; }
  .measure { max-width: var(--measure); }
}

/* ============ COMPONENTS ============ */
@layer components {

  /* ---- Skip link ---- */
  .skip-link {
    position: absolute; left: var(--space-4); top: var(--space-3); z-index: calc(var(--z-dialog) + 1);
    padding: var(--space-2) var(--space-4); background: var(--color-fg); color: var(--color-bg);
    border-radius: var(--radius-sm); transform: translateY(-200%); text-decoration: none;
  }
  .skip-link:focus-visible { transform: none; }

  /* ---- Subtle paper grain overlay ---- */
  .grain {
    position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain);
    opacity: var(--color-grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }
  @media (prefers-reduced-transparency: reduce) { .grain { display: none; } }

  /* ---- Header & Primary Navigation ---- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--color-nav-bg);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
    box-shadow: 0 var(--hairline) 0 var(--color-border);
    padding-top: env(safe-area-inset-top);
  }
  @media (prefers-reduced-transparency: reduce) { .site-header { background: var(--color-bg); backdrop-filter: none; } }
  .nav { height: var(--nav-h); display: flex; align-items: center; gap: var(--space-5); }
  .brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    text-decoration: none; font-family: var(--font-display); font-size: var(--font-size-sub, 1.25rem);
    letter-spacing: 0; font-weight: var(--weight-medium, 500); min-height: 44px;line-height:var(--leading-sub, 1.3);
  }
  .brand svg { width: 30px; height: 30px; color: var(--color-accent-text); flex: none; }
  .brand .dot { color: var(--color-accent-text); }
  .nav-links { display: none; gap: var(--space-1); margin-inline-start: auto; }
  .nav-links a {
    text-decoration: none; font-size: var(--fs-sm); font-weight: var(--weight-medium, 500);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-fg-muted);
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .nav-links a[aria-current="page"] { color: var(--color-fg); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
  @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--color-fg); background: var(--color-bg-sunken); } }
  .nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  @media (min-width: 64rem) {
    .nav-links { display: flex; }
    .nav-actions { margin-inline-start: var(--space-3); }
    .nav-actions .menu-btn { display: none; }
  }
  .icon-btn {
    width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-sm);
    color: var(--color-fg-muted); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .icon-btn svg { width: 20px; height: 20px; }
  @media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--color-bg-sunken); color: var(--color-fg); } }
  .nav-actions .nav-cta { display: none; }
  @media (min-width: 30rem) { .nav-actions .nav-cta { display: inline-flex; } }
  @media (max-width: 22rem) { .brand { font-size: var(--font-size-lead, 1.125rem); } .brand svg { width: 26px; height: 26px; } .nav { gap: var(--space-2); } }

  /* ---- Mobile menu (<dialog>) ---- */
  .menu-dialog {
    margin: 0; margin-inline-start: auto; height: 100dvh; max-height: 100dvh; width: min(100%, 26rem); max-width: 100%;
    border: 0; padding: calc(env(safe-area-inset-top) + var(--space-5)) var(--space-6) calc(env(safe-area-inset-bottom) + var(--space-6));
    background: var(--color-bg-raised); color: var(--color-fg);
    box-shadow: var(--shadow-pop);
    opacity: 0; transform: translateX(var(--motion-distance));
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
  }
  .menu-dialog[open] { opacity: 1; transform: none; display: flex; flex-direction: column; }
  @starting-style { .menu-dialog[open] { opacity: 0; transform: translateX(var(--motion-distance)); } }
  .menu-dialog::backdrop { background: var(--color-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .menu-dialog .menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
  .menu-dialog nav a {
    display: flex; justify-content: space-between; align-items: center; text-decoration: none;
    font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--tracking-title, -0.015em);
    padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--color-border); min-height: 56px;line-height:var(--leading-title, 1.1);font-weight:var(--weight-semibold, 600);
  }
  .menu-dialog nav a[aria-current="page"] { color: var(--color-accent-text); }
  .menu-dialog .menu-foot { margin-top: auto; padding-top: var(--space-6); }

  /* ---- Buttons (Single-Accent Lock, squared stationery geometry, sentence case) ---- */
  .btn {
    --btn-h: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--btn-h); padding: 0 var(--space-5);
    border-radius: var(--radius-sm); font-weight: var(--weight-medium, 500); font-size: var(--fs-base); line-height: var(--leading-body, 1.55);
    text-decoration: none; white-space: nowrap; letter-spacing: 0;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
  .btn-sm { --btn-h: 40px; padding: 0 var(--space-4); font-size: var(--fs-sm); }
  .btn-lg { --btn-h: 52px; padding: 0 var(--space-6); font-size: var(--fs-base); }
  .btn-pill { border-radius: var(--radius-pill); }
  .btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    box-shadow: inset 0 0 0 var(--hairline) oklch(from var(--color-accent-fg) l c h / 0.16);
  }
  .btn-secondary {
    background: var(--color-bg-raised);
    color: var(--color-fg);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .btn-ghost { color: var(--color-fg); padding-inline: var(--space-3); }
  @media (hover: hover) and (pointer: fine) {
    .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-accent-fg); }
    .btn-secondary:hover { background: var(--color-bg-sunken); color: var(--color-accent-text); box-shadow: inset 0 0 0 var(--hairline) var(--color-accent); }
    .btn:hover svg.arrow { transform: translateX(3px); }
  }
  .btn:active { transform: translateY(1px); }

  /* ---- Eyebrow / chips / typographic helpers ---- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--color-fg-muted);
  }
  .chip svg { width: 12px; height: 12px; flex: none; }
  .chip {
    display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    padding: 0.25rem 0.65rem; border-radius: var(--radius-sm); background: var(--color-bg-sunken);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border); color: var(--color-fg-muted); text-decoration: none;
  }
  .lede { font-size: var(--fs-lead); line-height: var(--leading-sub, 1.3); color: var(--color-fg-muted); max-width: 42ch; text-wrap: pretty;letter-spacing:var(--tracking-heading, -0.01em); }
  .muted { color: var(--color-fg-muted); }
  .subtle { color: var(--color-fg-subtle); font-size: var(--fs-sm); }

  /* ---- Section heads ---- */
  .section-head { max-width: 48rem; margin-bottom: var(--space-8); }
  .section-head > * + * { margin-top: var(--space-4); }
  .section-head.center { text-align: center; }
  .section-head.center .lede { margin-inline: auto; }

  /* ---- Hero ---- */
  .hero {
    position: relative; isolation: isolate; overflow: clip;
    padding-block: clamp(2.75rem, 2rem + 4.5vw, 5.5rem) clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  }
  .hero-grid { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 64rem) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); } }
  .hero h1 { font-size: var(--fs-hero); max-width: 17ch; margin-top: var(--space-4); line-height: var(--leading-display, 1.05);letter-spacing:var(--tracking-display, -0.02em);font-weight:var(--weight-semibold, 600); }
  .hero .lede { margin-top: var(--space-5); max-width: 38ch; }
  .hero-ctas { margin-top: var(--space-6); --gap: var(--space-3); }
  .reassure {
    margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    font-size: var(--fs-sm); color: var(--color-fg-muted); padding: 0; list-style: none;
  }
  .reassure li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .reassure svg { width: 16px; height: 16px; color: var(--color-accent-text); flex: none; }
  @media (max-width: 29.99rem) { .hero-ctas .btn, .cta-panel .btn { width: 100%; } }
  @media (max-width: 22rem) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: var(--space-2); } }

  /* ---- Surface bands (stepped limestone) ---- */
  .band-sunken, .band-dark { background: var(--color-bg-sunken); }

  /* ---- Bento & Cards ---- */
  .bento { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento > :nth-child(1) { grid-column: span 4; }
    .bento > :nth-child(2) { grid-column: span 2; }
    .bento > :nth-child(3) { grid-column: span 2; }
    .bento > :nth-child(4) { grid-column: span 2; }
    .bento > :nth-child(5) { grid-column: span 2; }
    .bento > :nth-child(6) { grid-column: span 6; }
  }
  .card {
    position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .card h3 { font-size: var(--font-size-sub, 1.25rem);line-height:var(--leading-sub, 1.3); }
  .card p { color: var(--color-fg-muted); font-size: var(--fs-sm); line-height: var(--leading-small, 1.5); }
  a.card { text-decoration: none; }
  @media (hover: hover) and (pointer: fine) {
    a.card:hover, .card.lift:hover {
      box-shadow: inset 0 0 0 var(--hairline) var(--color-accent);
      transform: translateY(-2px); color: inherit;
    }
  }
  .card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .card .card-link { text-decoration: none; }
  .card .split { align-items: center; }
  .card .split .cluster { justify-content: flex-start; }
  @media (min-width: 60rem) { .card .split .cluster { justify-content: flex-end; } }

  /* ---- FAQ Accordion ---- */
  .faq { border-top: var(--hairline) solid var(--color-border-strong); }
  .faq details { border-bottom: var(--hairline) solid var(--color-border); }
  .faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
    padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tracking-heading, -0.01em); min-height: 56px;line-height:var(--leading-heading, 1.2);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .plus {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .faq summary .plus svg { width: 14px; height: 14px; }
  .faq details[open] summary .plus { transform: rotate(45deg); background: var(--color-accent-soft); }
  .faq .answer { padding-bottom: var(--space-5); color: var(--color-fg-muted); max-width: var(--measure); }
  .faq .answer > * + * { margin-top: var(--space-3); }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

  /* ---- CTA panel ---- */
  .cta-panel {
    position: relative; overflow: clip; isolation: isolate; border-radius: var(--radius-lg);
    background: var(--color-bg-sunken); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    padding: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  }
  .cta-panel h2 { font-size: var(--font-size-heading, 1.5rem); max-width: 20ch;line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .cta-panel .lede { color: var(--color-fg-muted); }

  /* ---- Footer ---- */
  .site-footer {
    padding-block: var(--space-9) calc(var(--space-6) + env(safe-area-inset-bottom));
    border-top: var(--hairline) solid var(--color-border-strong);
    background: var(--color-bg-sunken); position: relative; z-index: 2;
  }
  .footer-grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
  .footer-grid h2 {
    font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--color-fg-subtle); margin-bottom: var(--space-4);
  }
  .footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .footer-grid li a { text-decoration: none; color: var(--color-fg-muted); font-size: var(--fs-sm); display: inline-flex; min-height: 34px; align-items: center; }
  .footer-grid li a:hover { color: var(--color-fg); }
  .footer-sub-label { font-size: var(--fs-sm); font-weight: var(--weight-medium, 500); color: var(--color-fg); margin-top: var(--space-5); margin-bottom: var(--space-2); }
  .footer-bottom {
    margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border);
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; font-size: var(--fs-xs); color: var(--color-fg-subtle);
  }

  /* ---- Newsletter inline & Forms (WCAG 1.4.11 non-text contrast >= 3.4:1 via --color-input-border) ---- */
  .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .inline-form input { flex: 1 1 14rem; min-width: 0; }
  .field { display: grid; gap: var(--space-2); }
  .field label, .label { font-size: var(--fs-sm); font-weight: var(--weight-medium, 500); color: var(--color-fg); }
  .field .hint { font-size: var(--fs-xs); color: var(--color-fg-subtle); line-height: var(--leading-caption, 1.45); }
  .input, .field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--color-bg-raised); border: var(--hairline) solid var(--color-input-border); color: var(--color-fg);
    font-size: var(--font-size-body, 1rem); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .field textarea { min-height: 8rem; resize: vertical; field-sizing: content; }
  .input:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-focus); }
  .field [aria-invalid="true"] { border-color: var(--color-danger); }
  .field .error { font-size: var(--fs-xs); color: var(--color-danger); display: flex; gap: var(--space-1); align-items: center; }
  .field .error:empty { display: none; }
  .form-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form-grid .full { grid-column: 1 / -1; } }
  .form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-lg);
    background: var(--color-bg-raised); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .form-fallback {
    margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--color-bg-sunken); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    display: grid; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-fg);
  }
  .privacy-line { font-size: var(--fs-xs); color: var(--color-fg-subtle); line-height: var(--leading-caption, 1.45); }

  /* ---- Page header (interior) ---- */
  .page-hero {
    padding-block: clamp(2.75rem, 2rem + 4.5vw, 5.5rem) clamp(2rem, 1.5rem + 3vw, 3.75rem);
    position: relative; isolation: isolate; overflow: clip;
  }
  .page-hero h1 { max-width: 21ch; margin-top: var(--space-4); font-weight: var(--fw-display); }
  .page-hero .lede { margin-top: var(--space-5); max-width: 44rem; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
  .crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); opacity: 0.6; }
  .crumbs a { text-decoration: none; }

  /* ---- Prose (articles, legal) ---- */
  .prose { max-width: var(--measure); font-size: var(--fs-md); line-height: var(--leading-body, 1.55); }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: var(--font-size-heading, 1.5rem); margin-top: 2.2em; line-height: var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .prose h3 { font-size: var(--font-size-sub, 1.25rem); margin-top: 1.8em;line-height:var(--leading-sub, 1.3); }
  .prose ul, .prose ol { padding-inline-start: 1.25em; }
  .prose li + li { margin-top: 0.4em; }
  .prose li::marker { color: var(--color-accent-text); }
  .prose blockquote { border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-5); font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .prose table { width: 100%; font-size: var(--fs-sm); display: block; overflow-x: auto; }
  .prose th, .prose td { text-align: start; padding: var(--space-3); border-bottom: var(--hairline) solid var(--color-border); vertical-align: top; min-width: 9rem; }
  .prose th { font-weight: var(--fw-semibold); background: var(--color-bg-sunken); }
  .prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--color-bg-sunken); }
  .answer-box {
    padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-accent-soft);
    box-shadow: inset 0 0 0 var(--hairline) oklch(from var(--color-accent) l c h / 0.25); font-size: var(--fs-base);
  }
  .answer-box b:first-child { display: block; font-size: var(--fs-xs); letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-2);font-weight:var(--weight-medium, 500); }
  .article-layout { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
  .article-layout > .article-toc { display: none; }
  @media (min-width: 68rem) { .article-layout { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .article-layout > .article-toc { display: block; } }
  .toc { font-size: var(--fs-sm); }
  .toc ol { list-style: none; padding: 0; display: grid; gap: var(--space-1); border-inline-start: var(--hairline) solid var(--color-border); }
  .toc a { display: block; padding: var(--space-1) var(--space-3); text-decoration: none; color: var(--color-fg-muted); margin-inline-start: -1px; border-inline-start: 2px solid transparent; }
  .toc a[aria-current="true"] { color: var(--color-fg); border-inline-start-color: var(--color-accent); }
  .byline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--color-fg-muted); margin-top: var(--space-5); align-items: center; }
  .progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: calc(var(--z-nav) + 1); background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); }
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }
  }

  /* ---- Glossary ---- */
  .az {
    display: flex; flex-wrap: wrap; gap: var(--space-1); position: sticky; top: var(--nav-h); z-index: 5;
    padding-block: var(--space-3); background: var(--color-bg); border-bottom: var(--hairline) solid var(--color-border);
  }
  .az a { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--weight-medium, 500); font-size: var(--fs-sm); }
  .az a:hover { background: var(--color-bg-sunken); }
  .az span { min-width: 40px; min-height: 40px; display: grid; place-items: center; color: var(--color-fg-subtle); opacity: 0.4; font-size: var(--fs-sm); }
  .gloss-letter { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--color-accent-text); line-height: var(--leading-display, 1.05); margin-top: var(--space-8);letter-spacing:var(--tracking-display, -0.02em);font-weight:var(--weight-semibold, 600); }
  .gloss-term { padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--color-border); display: grid; gap: var(--space-3); }
  @media (min-width: 52rem) { .gloss-term { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-7); } }
  .gloss-term dt { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tracking-heading, -0.01em);line-height:var(--leading-heading, 1.2); }
  .gloss-term dt a { text-decoration: none; }
  .gloss-term dd { color: var(--color-fg-muted); max-width: var(--measure); }
  .gloss-term dd > * + * { margin-top: var(--space-2); }
  .search-box { position: relative; max-width: 32rem; }
  .search-box svg { position: absolute; left: var(--space-4); top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--color-fg-subtle); pointer-events: none; }
  .search-box input { padding-inline-start: 2.75rem; }

  /* ---- Insight cards ---- */
  .post-card .meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-subtle); align-items: center; }
  .post-card h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
  .post-card.feature { background: var(--color-bg-sunken); }
  .post-card.feature h3 { font-size: var(--font-size-sub, 1.25rem);line-height:var(--leading-sub, 1.3); }
  .post-card .cover {
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-3);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16 / 7;
    overflow: hidden; background: var(--color-bg-sunken); border-bottom: var(--hairline) solid var(--color-border);
  }
  .post-card.feature .cover { aspect-ratio: 16 / 6; }
  .article-cover { margin-top: var(--space-7); aspect-ratio: 16 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong); }

  /* ---- Steps (/membership/) ---- */
  .steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
  .steps li {
    counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4);
    padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .steps li::before {
    content: counter(step, decimal-leading-zero); width: 3rem; height: 3rem; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-lg);
    background: var(--color-accent-soft); color: var(--color-accent-text); font-variant-numeric: tabular-nums;line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em);
  }
  .steps h3 { font-size: var(--font-size-sub, 1.25rem); font-family: var(--font-sans); font-weight: var(--weight-medium, 500); letter-spacing: 0;line-height:var(--leading-sub, 1.3); }
  .steps p { color: var(--color-fg-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }

  /* ---- Fit table (for / not for) ---- */
  .fit { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .fit > div { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg-raised); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong); }
  .fit ul { margin-top: var(--space-4); padding-inline-start: 1.1em; display: grid; gap: var(--space-2); color: var(--color-fg-muted); }

  /* ---- Principles (/about/) ---- */
  .principles { counter-reset: p; display: grid; gap: 0; list-style: none; padding: 0; border-top: var(--hairline) solid var(--color-border-strong); }
  .principles li { counter-increment: p; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-6); border-bottom: var(--hairline) solid var(--color-border); }
  @media (min-width: 52rem) { .principles li { grid-template-columns: 4.5rem minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-6); } }
  .principles li::before { content: counter(p, upper-roman); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-accent-text); font-weight: var(--weight-medium, 500);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .principles h3 { font-size: var(--font-size-sub, 1.25rem);line-height:var(--leading-sub, 1.3); }
  .principles p { color: var(--color-fg-muted); }

  /* ---- Format cards (/tables/) ---- */
  .format .fact { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }

  /* ---- Placeholder marker (converted to HTML comments at build time) ---- */
  [data-placeholder] { position: relative; }
  .ph-note { font-size: var(--fs-xs); color: var(--color-fg-subtle); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: inline-block; }

  /* ---- 404 ---- */
  .four { font-family: var(--font-display); font-size: var(--font-size-display, clamp(2.75rem, 2.4rem + 1.4vw, 3.75rem)); line-height: var(--leading-display, 1.05); letter-spacing: var(--tracking-display, -0.02em); color: var(--color-accent-text);font-weight:var(--weight-semibold, 600); }

  /* ---- Toast ---- */
  .toast {
    position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); translate: -50% 0;
    z-index: var(--z-dialog); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
    background: var(--color-fg); color: var(--color-bg); font-size: var(--fs-sm); box-shadow: var(--shadow-pop);
    max-width: calc(100vw - 2 * var(--cio-gutter));
  }
  .toast[hidden] { display: none; }
}

/* ============ UTILITIES / REVEAL ============ */
@layer utilities {
  .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
  .mb-6 { margin-bottom: var(--space-6); }
  .gap-md { --gap: var(--space-5); }
  .gap-lg { --gap: var(--space-6); }
  .w-full { width: 100%; }
  .max-34 { max-width: 34ch; }
  .relative { position: relative; z-index: 2; }
  .ruled { position: relative; box-shadow: inset 0 var(--hairline) 0 var(--color-border); }
  /* Reveal never hides content up front: an element only animates in once it touches the viewport,
     so a missed observer frame, print, find-in-page or a full-page capture always shows everything. */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal.in { animation: reveal-rise var(--dur-reveal) var(--ease-out) var(--d, 0ms) both; }
  }
  @keyframes reveal-rise { from { opacity: 0; transform: translateY(var(--motion-distance)); } }
  .d1 { --d: 80ms; } .d2 { --d: 160ms; } .d3 { --d: 240ms; }
}


/* ---- v2.css ---- */
/* v2.css: architectural club components (table blueprint, proportional timeline, archival brief specimen, comparison ledger, cohort seat map, member card). Consumes semantic tokens from tokens.css only. */
@layer components {

  /* ---------- Hero v2 & Charter Ledger Strip ---------- */
  .hero-v2 {
    padding-block: clamp(2.5rem, 1.75rem + 4vw, 5rem) clamp(2rem, 1.5rem + 3vw, 3.75rem);
    border-bottom: var(--hairline) solid var(--color-border);
  }
  .hero-v2 .hero-grid { align-items: center; }
  @media (min-width: 64rem) {
    .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-8); }
  }
  .hero-line {
    font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
    color: var(--color-accent-text);
  }
  .hero-v2 h1 {
    max-width: 16.5ch; font-weight: var(--fw-display);
    line-height: 1.03; padding-bottom: 0.04em;
  }
  .hero-v2 h1 em { font-weight: var(--fw-display); }
  .hero-v2 .lede {
    font-size: var(--fs-lg); max-width: 38ch;
    color: var(--color-fg-muted); margin-top: var(--space-5);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em);
  }
  .hero-visual { min-width: 0; }

  /* Ruled 4-column Charter Ledger Strip below Hero Grid (keeps .hero-copy strictly to 4 elements) */
  .hero-ledger {
    margin: var(--space-8) 0 0; padding-top: var(--space-5);
    border-top: var(--hairline) solid var(--color-border-strong);
    display: grid; gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 36rem) {
    .hero-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 80rem) {
    .hero-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .hero-ledger > div {
      padding-inline: var(--space-5);
      border-inline-start: var(--hairline) solid var(--color-border);
    }
    .hero-ledger > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
    .hero-ledger > div:last-child { padding-inline-end: 0; }
  }
  .hero-ledger dt {
    font-family: var(--font-display); font-size: var(--fs-xl);
    font-weight: var(--weight-semibold, 600); line-height: var(--leading-title, 1.1);
    color: var(--color-fg); font-variant-numeric: tabular-nums;letter-spacing:var(--tracking-title, -0.015em);
  }
  .hero-ledger dd {
    margin-top: var(--space-1); font-size: var(--fs-sm);
    color: var(--color-fg-muted);
  }

  /* ---------- The table: signature drawing (base.py round_table) ----------
     One SVG (viewBox 800x600) for the room, plus HTML on top for everything a person reads:
     the decision card, the seat labels and the topic buttons. Seat label positions below are the
     chair centres from base.py (R=222, your seat R=236) converted to % of the viewBox. */
  .rt { margin: 0; display: grid; gap: var(--space-4); justify-items: center; }
  .rt-board { position: relative; width: min(100%, 36rem); container: rtboard / inline-size; }
  .rt-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    container-type: inline-size;
    background: var(--rt-stage);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border);
  }
  .rt-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .rt-floor { fill: var(--rt-floor); }
  .rt-rim { fill: var(--rt-rim); }
  .rt-top { fill: var(--rt-table); }
  .rt-inlay { fill: none; stroke: var(--rt-inlay); stroke-width: 1.25; }
  .rt-saucer { fill: var(--rt-saucer); }
  .rt-cup { fill: var(--rt-cup); stroke: var(--rt-rim); stroke-width: 1.25; }
  .rt-back { fill: none; stroke: var(--rt-chair-line); stroke-width: 7; stroke-linecap: round; }
  .rt-seat-pad { fill: var(--rt-person); stroke: var(--rt-chair-line); stroke-width: 2; }
  .rt-chair.is-host .rt-seat-pad { fill: var(--rt-host); }
  .rt-chair.is-host .rt-back { stroke: var(--rt-bronze-text); }
  .rt-chair.is-yours .rt-back { stroke: var(--rt-yours-line); }
  .rt-chair.is-yours .rt-seat-pad {
    fill: var(--rt-yours); stroke: var(--rt-yours-line); stroke-dasharray: 5 4;
    transition: fill var(--dur-base) var(--ease-out);
  }
  .rt:has(.rt-yours-link:hover, .rt-yours-link:focus-visible) .rt-chair.is-yours .rt-seat-pad { fill: var(--rt-yours-hover); stroke-dasharray: none; }
  @media (prefers-reduced-motion: no-preference) {
    /* The empty chair is pulled out from the table once, on arrival: an invitation, not a loop. */
    .rt-chair.is-yours { animation: rt-pull 900ms var(--ease-out) 450ms both; }
    @keyframes rt-pull { from { translate: 5px -14px; } to { translate: 0 0; } }
  }

  /* The decision, written on the pre-read and laid on the table */
  .rt-card {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 26cqi; padding: var(--space-3) var(--space-3) var(--space-4);
    color: var(--color-fg); isolation: isolate;
    display: grid; gap: var(--space-2); text-align: start;
  }
  /* Two sheets: the pre-read on top, the page beneath it slightly askew */
  .rt-card::before, .rt-card::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
  .rt-card::before { z-index: -2; background: var(--rt-paper-under); rotate: -5deg; }
  .rt-card::after { z-index: -1; background: var(--rt-paper); box-shadow: 0 0 0 var(--hairline) var(--rt-paper-edge); }
  .rt-card-label {
    font-size: var(--font-size-caption, 0.75rem); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; line-height: 1.35;
    color: var(--rt-bronze-text);
    padding-bottom: var(--space-2); border-bottom: var(--hairline) solid var(--color-border-strong);
  }
  .rt-card-q {
    font-size: var(--font-size-body, 1rem); font-weight: var(--weight-medium, 500);
    line-height: 1.35; text-wrap: balance; color: var(--color-fg);
  }
  .rt-card.is-swapping .rt-card-q, .rt-card.is-swapping .rt-card-label { animation: rt-swap var(--dur-slow) var(--ease-out); }
  @keyframes rt-swap { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

  /* Seat labels, placed beside each chair */
  .rt-seats { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 auto; aspect-ratio: 4 / 3; pointer-events: none; }
  .rt-seat a { pointer-events: auto; }
  .rt-seat {
    position: absolute; translate: 0 -50%;
    font-size: var(--font-size-small, 0.875rem); line-height: 1.3;
    color: var(--color-fg); white-space: nowrap;
  }
  .rt-seat.is-host {
    font-size: var(--font-size-caption, 0.75rem); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--rt-bronze-text);
    translate: -50% -100%;
  }
  .rt-seat:nth-child(1) { left: 50%;     top: 7.6%; }
  .rt-seat:nth-child(2) { left: 73.4%; top: 21.65%; }
  .rt-seat:nth-child(3) { left: 82.9%; top: 43.58%; }
  .rt-seat:nth-child(4) { left: 79.6%; top: 68.5%; }
  .rt-seat:nth-child(5) { left: 65%; top: 84.77%; }
  .rt-seat:nth-child(6) { left: 20.4%; top: 68.5%;  translate: -100% -50%; text-align: end; }
  .rt-seat:nth-child(7) { left: 17.1%; top: 43.58%; translate: -100% -50%; text-align: end; }
  .rt-seat:nth-child(8) { left: 26.6%; top: 21.65%; translate: -100% -50%; text-align: end; }
  .rt-seat:nth-child(9) { left: 34.4%; top: 86.97%; translate: -100% -50%; text-align: end; }
  .rt-yours-link {
    display: grid; justify-items: end; padding: var(--space-1) var(--space-2);
    margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
    color: var(--rt-bronze-text); text-decoration: none;
  }
  .rt-yours-link .rt-name { font-weight: var(--weight-semibold, 600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .rt-yours-link .rt-sub { font-size: var(--font-size-caption, 0.75rem); color: var(--color-fg); }
  .rt-yours-link:hover .rt-name { text-decoration-thickness: 2px; }

  /* Topic buttons: change the decision on the table */
  .rt-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); width: min(100%, 36rem); }
  .rt-topic {
    min-height: 2.75rem; padding: 0 var(--space-4);
    font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--color-fg);
    border-radius: var(--radius-pill); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .rt-topic:hover { box-shadow: inset 0 0 0 var(--hairline) var(--color-fg); }
  .rt-topic[aria-pressed="true"] { background: var(--rt-table); color: var(--color-accent-fg); box-shadow: none; }
  .rt-topics { display: none; }
  .js .rt-topics { display: flex; }
  .rt > figcaption { font-size: var(--font-size-small, 0.875rem); color: var(--color-fg); max-width: 36rem; text-align: center; text-wrap: pretty; }

  /* Narrow boards (under 30rem: phones and the 1024px two-column hero): the drawing is cropped square and the seat labels become a legend under it */
  @container rtboard (max-width: 29.99rem) {
    .rt-stage { aspect-ratio: 1; }
    .rt-card { width: 40cqi; }
    .rt-seats {
      position: static; aspect-ratio: auto; pointer-events: auto;
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4);
      margin-top: var(--space-4);
    }
    .rt-seat, .rt-seat:nth-child(n) { position: relative; left: auto; top: auto; translate: none; text-align: start; white-space: normal; padding-left: var(--space-4); }
    .rt-seat::before {
      content: ""; position: absolute; left: 0; top: 0.45em; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-sm);
      background: var(--rt-person);
    }
    .rt-seat.is-host { order: -1; font-size: var(--font-size-small, 0.875rem); letter-spacing: 0; text-transform: none; color: var(--color-fg); }
    .rt-seat.is-host::before { background: var(--rt-host); }
    .rt-seat.is-yours::before { background: var(--rt-yours); box-shadow: inset 0 0 0 1.5px var(--rt-yours-line); }
    .rt-yours-link { justify-items: start; margin: 0; padding: 0; min-height: 2.75rem; align-content: center; }
  }
  /* ---------- Proportional 90-Minute Timeline ---------- */
  .timeline {
    list-style: none; padding: 0; margin: 0 0 var(--space-7);
    display: grid; gap: var(--space-4); align-items: start;
  }
  .timeline li {
    display: grid; grid-template-rows: auto auto 1fr;
    gap: var(--space-2); min-width: 0; align-content: start;
  }
  .timeline .t-bar {
    position: relative; width: 100%; height: 6px;
    background: var(--color-border); overflow: hidden;
  }
  .timeline .t-bar::after {
    content: ""; position: absolute; inset: 0 auto 0 0;
    background: var(--color-accent);
    width: var(--t-fill, 100%); height: 3px;
  }
  .timeline .t-frame .t-bar::after,
  .timeline .t-commit .t-bar::after { --t-fill: 16%; height: 4px; }
  .timeline .t-cases .t-bar::after { --t-fill: 100%; height: 6px; }
  .timeline .t-test .t-bar::after { --t-fill: 56%; height: 4px; }
  .timeline .t-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2); margin-top: var(--space-1);
  }
  .timeline .t-head b { font-weight: var(--weight-medium, 500); color: var(--color-fg); font-size: var(--fs-base); }
  .timeline .num { font-size: var(--fs-sm); color: var(--color-fg-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .timeline p { font-size: var(--fs-sm); color: var(--color-fg-muted); max-width: 36ch; line-height: var(--leading-small, 1.5); }
  @media (min-width: 52rem) {
    .timeline {
      grid-template-columns: 13fr 44fr 26fr 13fr;
      gap: var(--space-4);
    }
    .timeline .t-frame .t-bar::after,
    .timeline .t-commit .t-bar::after,
    .timeline .t-test .t-bar::after {
      --t-fill: 100%; height: 3px;
    }
    .timeline .t-cases .t-bar::after {
      --t-fill: 100%; height: 6px;
    }
  }

  /* ---------- Inside a Table: Archival Field Brief Specimen ---------- */
  .inside-grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr); align-items: start;
  }
  @media (min-width: 64rem) {
    .inside-grid { grid-template-columns: minmax(0, 8.2fr) minmax(0, 3.8fr); gap: var(--space-7); }
  }
  .sheet {
    background: var(--color-bg-raised);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    overflow: hidden;
  }
  /* Mobile (<40rem): 2x2 segmented control grid so active indicator never floats mid-air */
  .sheet .tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2); padding: var(--space-3);
    background: var(--color-bg-sunken);
    border-bottom: var(--hairline) solid var(--color-border);
  }
  .sheet .tab {
    min-height: 44px; padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm); font-weight: var(--weight-medium, 500);
    color: var(--color-fg-muted); text-align: center;
    border-radius: var(--radius-sm); position: relative;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .sheet .tab[aria-selected="true"] {
    background: var(--color-bg-raised); color: var(--color-fg);
    font-weight: var(--fw-semibold);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-accent);
  }
  @media (min-width: 40rem) {
    .sheet .tabs {
      display: flex; flex-wrap: nowrap; gap: var(--space-1);
      padding: var(--space-3) clamp(1.25rem, 1rem + 1.5vw, 2.25rem) 0;
      background: var(--color-bg-sunken);
    }
    .sheet .tab {
      flex: none; padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }
    .sheet .tab[aria-selected="true"] {
      background: var(--color-bg-raised);
      box-shadow: inset 0 var(--hairline) 0 var(--color-border), inset var(--hairline) 0 0 var(--color-border), inset calc(var(--hairline) * -1) 0 0 var(--color-border);
    }
    .sheet .tab[aria-selected="true"]::after {
      content: ""; position: absolute; left: 0; right: 0; top: 0;
      height: 2px; background: var(--color-accent);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .sheet .tab:hover { color: var(--color-fg); }
  }
  .tabpanel {
    padding: var(--space-5) clamp(1.25rem, 1rem + 1.5vw, 2.25rem) var(--space-6);
  }
  .tabpanel[hidden] { display: none; }
  .tabpanel.is-entering { animation: fadeUp var(--dur-slow) var(--ease-out); }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .brief-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
    color: var(--color-fg-subtle); margin-bottom: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--color-border);
  }
  .brief-q {
    font-family: var(--font-display); font-size: var(--fs-xl);
    line-height: var(--leading-title, 1.1); letter-spacing: var(--tracking-title, -0.015em); color: var(--color-fg);font-weight:var(--weight-semibold, 600);
  }
  .brief-sub {
    font-size: var(--fs-sm); font-weight: var(--weight-medium, 500);
    letter-spacing: 0; text-transform: none;
    color: var(--color-fg-subtle); margin-top: var(--space-5); margin-bottom: var(--space-2);
  }
  .brief-list {
    margin: 0; padding: 0; list-style: none; counter-reset: q;
    display: grid; gap: var(--space-2);
  }
  .brief-list li {
    counter-increment: q; display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--space-2);
    font-size: var(--fs-sm); color: var(--color-fg-muted);
  }
  .brief-list li::before {
    content: counter(q, decimal-leading-zero);
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: var(--fs-xs); color: var(--color-accent-text);
    font-weight: var(--weight-medium, 500); padding-top: 0.15em;
  }
  .brief-cases {
    display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr);
    margin: 0; padding: 0; list-style: none;
  }
  @media (min-width: 42rem) {
    .brief-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  }
  .brief-cases li {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-sunken);
    border-radius: var(--radius-sm);
    border-inline-start: 2px solid var(--color-accent);
    font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--leading-small, 1.5);
  }
  .brief-cases b {
    display: block; font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
    color: var(--color-fg); margin-bottom: var(--space-1);
  }
  .brief-take {
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--color-border-strong);
    font-size: var(--fs-sm); color: var(--color-fg); line-height: var(--leading-small, 1.5);
  }
  .brief-take b {
    display: block; font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
    color: var(--color-accent-text); margin-bottom: var(--space-1);
  }
  .brief-foot {
    margin-top: var(--space-5); padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--color-border);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-fg-muted);
  }
  .brief-foot a {
    font-weight: var(--fw-semibold); color: var(--color-accent-text);
  }
  .inside-facts {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--space-5); align-content: start;
  }
  .inside-facts li {
    padding-top: var(--space-4); border-top: var(--hairline) solid var(--color-border-strong);
    color: var(--color-fg-muted); font-size: var(--fs-sm); line-height: var(--leading-small, 1.5);
  }
  .inside-facts b {
    display: block; color: var(--color-fg); font-family: var(--font-display);
    font-size: var(--fs-lg); font-weight: var(--weight-medium, 500); margin-bottom: var(--space-1);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em);
  }

  /* ---------- Who Pays for the Room: Buyer's Comparison Ledger ---------- */
  .vs { margin-top: var(--space-7); }
  .vs-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--fs-sm);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--color-bg);
  }
  .vs-table th, .vs-table td {
    text-align: start; vertical-align: top;
    padding: var(--space-4) var(--space-5);
  }
  .vs-table thead th {
    font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
    letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
    color: var(--color-fg-subtle); background: var(--color-bg-sunken);
    border-bottom: var(--hairline) solid var(--color-border-strong);
    padding-block: var(--space-3);
  }
  .vs-table tbody th {
    font-family: var(--font-display); font-weight: var(--weight-medium, 500);
    font-size: var(--fs-md); color: var(--color-fg); width: 24%;
  }
  .vs-table tbody tr + tr > * {
    border-top: var(--hairline) solid var(--color-border);
  }
  .vs-table td { color: var(--color-fg-muted); line-height: 1.55; }
  .vs-table .vs-us {
    background: var(--color-bg-raised); color: var(--color-fg); width: 40%;
    border-inline-start: var(--hairline) solid var(--color-border-strong);
  }
  .vs-table thead .vs-us {
    color: var(--color-accent-text); background: var(--color-bg-raised);
  }
  .vs-table tbody .vs-us { font-weight: var(--fw-medium); }
  .vs-note {
    margin-top: var(--space-4); font-size: var(--fs-sm);
    color: var(--color-fg-subtle); max-width: 62rem;
  }
  @media (max-width: 47.99rem) {
    .vs-table {
      display: block; box-shadow: none; background: transparent; border-radius: 0;
    }
    .vs-table thead {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
    .vs-table tbody { display: grid; gap: var(--space-4); }
    .vs-table tbody tr {
      display: grid; grid-template-columns: minmax(0, 1fr);
      border-radius: var(--radius-md);
      box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
      background: var(--color-bg-raised); overflow: hidden;
    }
    @media (min-width: 24rem) {
      .vs-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }
    .vs-table tbody tr + tr > * { border-top: 0; }
    .vs-table tbody th {
      grid-column: 1 / -1; width: auto;
      padding: var(--space-3) var(--space-4);
      background: var(--color-bg-sunken);
      border-bottom: var(--hairline) solid var(--color-border);
    }
    .vs-table td {
      padding: var(--space-3) var(--space-4);
    }
    .vs-table td::before {
      display: block; font-size: var(--fs-xs); font-weight: var(--weight-medium, 500);
      letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase;
      color: var(--color-fg-subtle); margin-bottom: var(--space-1);
    }
    .vs-table td:not(.vs-us)::before { content: "Sponsor-funded"; }
    .vs-table td.vs-us::before { content: "CIO Cafe"; color: var(--color-accent-text); }
    .vs-table .vs-us {
      width: auto; border-inline-start: 0;
      border-top: var(--hairline) solid var(--color-border);
    }
    @media (min-width: 24rem) {
      .vs-table .vs-us {
        border-top: 0;
        border-inline-start: var(--hairline) solid var(--color-border);
      }
    }
  }

  /* ---------- House Rules ---------- */
  .rules-wrap {
    display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 60rem) {
    .rules-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  }
  .rules-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: hr;
  }
  @media (min-width: 40rem) {
    .rules-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
  }
  .rules-list li {
    counter-increment: hr; padding-block: var(--space-5);
    border-top: var(--hairline) solid var(--color-border-strong);
    display: grid; gap: var(--space-2); align-content: start;
  }
  .rules-list li::before {
    content: counter(hr, upper-roman);
    font-family: var(--font-display); font-size: var(--fs-md);
    color: var(--color-accent-text); font-weight: var(--weight-medium, 500);
  }
  .rules-list h3 { font-size: var(--font-size-sub, 1.25rem); font-weight: var(--weight-medium, 500);line-height:var(--leading-sub, 1.3); }
  .rules-list p { color: var(--color-fg-muted); font-size: var(--fs-sm); line-height: var(--leading-small, 1.5); }

  /* ---------- Founding Cohort & Engraved Seat Map ---------- */
  .founding-grid {
    display: grid; gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr); align-items: center;
  }
  @media (min-width: 64rem) {
    .founding-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  }
  .founding-grid h2 { max-width: 19ch; }
  .price-line {
    font-size: var(--fs-md); padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--color-border-strong);
  }
  .price-line b { font-weight: var(--fw-semibold); color: var(--color-fg); }
  .seatmap {
    margin: 0; display: grid; border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    overflow: hidden;
  }
  .seatmap-svg {
    display: block; width: 100%; height: auto;
    padding: var(--space-5) var(--space-5) var(--space-3);
  }
  .sm-table { fill: var(--rt-table); stroke: var(--rt-rim); stroke-width: 2; }
  .sm-num {
    font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-medium, 500);
    fill: var(--rt-paper); text-anchor: middle; dominant-baseline: central; letter-spacing: 0.02em;
  }
  .sm-seat { fill: var(--rt-chair); stroke: var(--rt-chair-line); stroke-width: 1.5; }
  .sm-seat.on { fill: var(--rt-person); }
  .seatmap figcaption {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-5) var(--space-4);
    border-top: var(--hairline) solid var(--color-border);
    font-size: var(--fs-sm); color: var(--color-fg-muted);
  }
  .seatmap figcaption b {
    color: var(--color-fg); font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }
  .sm-key { display: inline-flex; align-items: center; gap: var(--space-2); }
  .sm-key svg { width: 0.875rem; height: 0.875rem; }

  /* ---------- Finale & Orthogonal Founding Member Card ---------- */
  .finale {
    padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
    position: relative; overflow: clip; isolation: isolate;
    background: var(--color-bg-sunken);
    border-top: var(--hairline) solid var(--color-border-strong);
  }
  .finale-grid {
    display: grid; gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr); align-items: center;
  }
  @media (min-width: 60rem) {
    .finale-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  }
  .finale h2 { font-size: var(--font-size-heading, 1.5rem); max-width: 15ch;line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .finale .lede { color: var(--color-fg-muted); margin-top: var(--space-5); }
  .finale-visual { display: grid; place-items: center; }
  .member-card {
    width: min(100%, 26rem); aspect-ratio: 1.586;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-2);
    background: var(--color-bg-raised); color: var(--color-fg);
    box-shadow:
      inset 0 0 0 1px var(--color-border-strong),
      inset 0 0 0 6px var(--color-bg-raised),
      inset 0 0 0 7px var(--color-border);
  }
  .mc-top { display: flex; align-items: center; justify-content: space-between; }
  .mc-top .crest-mark { width: 2.5rem; height: 2.5rem; }
  .cr-ring { fill: none; stroke: var(--color-accent); stroke-width: 1.4; }
  .cr-ring.thin { stroke: var(--color-accent); stroke-width: 0.65; opacity: 0.7; }
  .cr-mono {
    font-family: var(--font-display); font-size: var(--font-size-sub, 1.25rem); font-weight: var(--weight-medium, 500);
    letter-spacing: 0; fill: var(--color-accent-text);line-height:var(--leading-sub, 1.3);
  }
  .mc-house {
    font-family: var(--font-display); font-size: var(--fs-lg);
    letter-spacing: var(--tracking-heading, -0.01em); color: var(--color-fg);line-height:var(--leading-heading, 1.2);
  }
  .mc-title {
    font-family: var(--font-display); font-style: italic;
    font-size: var(--fs-xl); color: var(--color-accent-text); line-height: var(--leading-title, 1.1);letter-spacing:var(--tracking-title, -0.015em);font-weight:var(--weight-semibold, 600);
  }
  .mc-fields {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4); align-self: end; margin: 0;
  }
  .mc-fields dt {
    font-size: var(--font-size-caption, 0.75rem); letter-spacing: var(--tracking-caps, 0.06em);
    text-transform: uppercase; color: var(--color-fg-subtle);font-weight:var(--weight-medium, 500);
  }
  .mc-fields dd {
    margin: 0; padding-bottom: var(--space-1);
    border-bottom: var(--hairline) solid var(--color-border-strong);
    font-family: var(--font-display); font-size: var(--fs-md);
    color: var(--color-fg); font-variant-numeric: tabular-nums;
  }
  .mc-foot {
    display: flex; justify-content: space-between; gap: var(--space-3);
    font-size: var(--font-size-caption, 0.75rem); letter-spacing: var(--tracking-caps, 0.06em);
    text-transform: uppercase; color: var(--color-fg-subtle);font-weight:var(--weight-medium, 500);
  }

  /* ---------- Membership Page: Split Hero, Price Cards, Application & Invite Kit ---------- */
  .split-hero { align-items: center; }
  .split-hero .hero-visual { display: grid; }
  @media (min-width: 64rem) {
    .split-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
    .split-hero .price-summary { justify-self: end; }
  }
  .price-summary {
    display: grid; gap: var(--space-5); padding: var(--space-6);
    border-radius: var(--radius-lg); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    width: 100%; max-width: 26rem;
  }
  .ps-seat { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--color-border); }
  .ps-seat p { font-size: var(--font-size-small, 0.875rem); color: var(--color-fg); line-height: var(--leading-small, 1.5); }
  .ps-seat b { font-weight: var(--weight-medium, 500); display: block; }
  .table-glyph { width: 100%; height: auto; display: block; }
  .table-glyph .rt-chair.is-yours .rt-seat-pad { stroke-width: 4; stroke-dasharray: 9 6; }
  .table-glyph .rt-back { stroke-width: 9; }
  .table-glyph .rt-seat-pad { stroke-width: 4; }
  .ps-row { display: grid; gap: var(--space-1); color: var(--color-fg-muted); font-size: var(--fs-sm); }
  .ps-num { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--leading-display, 1.05); color: var(--color-fg); font-variant-numeric: tabular-nums;letter-spacing:var(--tracking-display, -0.02em);font-weight:var(--weight-semibold, 600); }
  .ps-foot { font-size: var(--fs-sm); color: var(--color-fg-subtle); padding-top: var(--space-4); border-top: var(--hairline) solid var(--color-border); }

  .price-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: var(--space-6); }
  .price-card {
    padding: var(--space-6); border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    display: grid; gap: var(--space-4); align-content: start;
  }
  .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
  .price .num { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--leading-display, 1.05); letter-spacing: var(--tracking-display, -0.02em); color: var(--color-fg);font-weight:var(--weight-semibold, 600); }
  .price .per { color: var(--color-fg-muted); font-size: var(--fs-sm); }
  .ticks { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
  .ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); color: var(--color-fg-muted); font-size: var(--fs-sm); }
  .ticks svg { width: 20px; height: 20px; color: var(--color-accent-text); margin-top: 0.1em; }
  .founding-note { font-size: var(--fs-sm); color: var(--color-fg-muted); }
  .founding-note b { color: var(--color-fg); }

  @media (min-width: 60rem) {
    .apply-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .apply-split > .stack { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
  }

  .invite-kit {
    display: grid; gap: var(--space-3); padding: var(--space-6);
    border-radius: var(--radius-lg); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .invite-kit label { font-weight: var(--weight-medium, 500); font-size: var(--fs-sm); }
  .invite-kit textarea {
    width: 100%; min-height: 7.5rem; font: inherit; font-size: var(--font-size-body, 1rem);
    line-height: var(--leading-body, 1.55); padding: var(--space-3);
    border-radius: var(--radius-sm); border: var(--hairline) solid var(--color-input-border);
    background: var(--color-bg); color: var(--color-fg); resize: vertical;
  }
  .invite-kit .subtle { font-size: var(--fs-xs); }

  /* ---------- Tables Page: Sample Field Brief Document ---------- */
  .ph-sample {
    font-size: var(--fs-sm); color: var(--color-fg-muted);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .brief-doc {
    background: var(--color-bg-raised); border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    display: grid; gap: var(--space-3); max-width: 46rem;
  }
  .brief-doc header {
    padding-bottom: var(--space-4); margin-bottom: var(--space-2);
    border-bottom: var(--hairline) solid var(--color-border);
    display: grid; gap: var(--space-2);
  }
  .brief-doc h3 { font-size: var(--font-size-sub, 1.25rem); line-height: var(--leading-sub, 1.3); }
  .brief-doc h4 {
    font-size: var(--font-size-body, 1rem); font-weight: var(--weight-medium, 500);
    letter-spacing: 0; text-transform: none;
    color: var(--color-accent-text); margin-top: var(--space-3);
  }
  .brief-doc p, .brief-doc li { color: var(--color-fg-muted); font-size: var(--fs-sm); line-height: var(--leading-small, 1.5); }
  .brief-doc ul { display: grid; gap: var(--space-2); padding-inline-start: 1.1em; }
  .brief-doc b { color: var(--color-fg); }

  /* ---------- Partners Page ---------- */
  .fund-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); }
  @media (min-width: 60rem) {
    .fund-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .fund-grid > :first-child { grid-row: span 2; }
  }
  .fund-card {
    padding: var(--space-6); border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    display: grid; gap: var(--space-3); align-content: start;
  }
  .fund-card:first-child {
    background: var(--color-bg-sunken);
    align-content: stretch; grid-template-rows: auto auto 1fr auto;
  }
  .fund-card h3 { font-size: var(--font-size-sub, 1.25rem);line-height:var(--leading-sub, 1.3); }
  .fund-card .slots { display: flex; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }
  .fund-card .slots i { width: 3rem; height: 3rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-accent); }
  .fund-card .slots i.on { background: var(--color-accent); }
  .fund-card .slots-label { font-size: var(--fs-sm); color: var(--color-fg-muted); }
  .fund-card .slots-label b { color: var(--color-fg); }
  .disclosure-sample {
    margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md); background: var(--color-bg-raised);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    font-size: var(--fs-sm); color: var(--color-fg-muted); display: grid; gap: var(--space-2);
  }

  /* ---------- Generative Covers ---------- */
  .cover-art { display: block; width: 100%; height: 100%; }
  .cv-bg { fill: var(--color-bg-sunken); }
  .cv-line { fill: none; stroke: var(--color-border-strong); stroke-width: 1; }
  .cv-accent { fill: var(--color-accent); }
  .cv-accent-s { fill: none; stroke: var(--color-accent); stroke-width: 2.5; }
  .cv-block { fill: var(--color-accent-soft); }
  .cv-dot { fill: var(--color-border-strong); }
  .cv-title { font-family: var(--font-display); font-size: var(--font-size-heading, 1.5rem); fill: var(--color-fg);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }

  /* ---------- Mobile Sticky CTA & Owner Proof Blocks ---------- */
  .mobile-cta {
    position: fixed; inset: auto 0 0; z-index: calc(var(--z-nav) - 1);
    padding: var(--space-3) var(--cio-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-nav-bg);
    box-shadow: 0 calc(var(--hairline) * -1) 0 var(--color-border);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; }
  .mobile-cta.is-off { transform: translateY(100%); opacity: 0; pointer-events: none; }
  @media (min-width: 48rem) { .mobile-cta { display: none; } }
  @media (prefers-reduced-transparency: reduce) {
    .mobile-cta { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); }
  }

  .hosts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
  .hosts .host { display: flex; gap: var(--space-4); align-items: center; }
  .hosts .host img, .host-mono { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; }
  .host-mono { display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent-text); font-family: var(--font-display); font-size: var(--fs-lg);line-height:var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .hosts .host-name { font-weight: var(--fw-semibold); }
  .hosts .host-role { font-size: var(--fs-sm); color: var(--color-fg-muted); }
  .quotes { margin-top: var(--space-8); display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .quote blockquote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--leading-heading, 1.2);letter-spacing:var(--tracking-heading, -0.01em); }
  .quote figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-fg-muted); }
  .quote figcaption b { display: block; color: var(--color-fg); font-weight: var(--fw-semibold); }
  .upcoming { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
  .upcoming li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong); }
  .upcoming time { display: grid; text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps, 0.06em); color: var(--color-fg-muted);font-weight:var(--weight-medium, 500); }
  .upcoming time b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-accent-text); letter-spacing: var(--tracking-title, -0.015em);line-height:var(--leading-title, 1.1);font-weight:var(--weight-semibold, 600); }
  .up-decision { font-weight: var(--fw-medium); }
}

/* cafe_edits 2026-10-16 (section 4.3) */
@layer components {
  /* Commitments band (moved out of the hero) */
  .commitments .hero-ledger { margin-top: 0; padding-top: 0; border-top: 0; }
  /* Field Brief tab panels: a real heading per panel */
  .brief-title {
    font-size: var(--fs-sm); font-weight: var(--weight-medium, 500);
    color: var(--color-fg-muted); margin: 0 0 var(--space-2);
  }
  /* #why: one vertical list with hairlines, not three equal cards */
  .ruled-list { list-style: none; margin: var(--space-7) 0 var(--space-6); padding: 0; max-width: 65ch; }
  .ruled-list > li + li { border-top: var(--hairline) solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-5); }
  .ruled-list h3 { font-size: var(--font-size-sub, 1.25rem); font-weight: var(--weight-medium, 500); line-height: var(--leading-sub, 1.3); }
  @media (min-width: 64rem) {
    /* Three columns under one bronze rule: the three rooms a CIO cannot take this decision to */
    .ruled-list { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); border-top: 2px solid var(--rt-rim); padding-top: var(--space-5); }
    .ruled-list > li + li { border-top: 0; padding-top: 0; margin-top: 0; }
  }
  .ruled-list p { margin-top: var(--space-2); color: var(--color-fg-muted); }
  /* Finale: headline, lede, one CTA */
  .finale-grid { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 60rem) { .finale-grid { grid-template-columns: minmax(0, 1fr); } }
  .finale-grid > div { max-width: 60ch; }
  /* Comparison: two clusters, one divider between them, no per-row rules */
  .vs-table tbody tr + tr > * { border-top: 0; }
  .vs-table tbody + tbody > tr:first-child > * { border-top: var(--hairline) solid var(--color-border-strong); }
  .vs-table .vs-group-label {
    font-family: inherit; font-size: var(--fs-sm); font-weight: var(--weight-medium, 500);
    color: var(--color-fg-subtle); width: auto; padding-bottom: 0; background: var(--color-bg);
  }
  @media (max-width: 47.99rem) {
    .vs-table tbody + tbody { margin-top: var(--space-6); }
    .vs-table tr.vs-group-row { display: block; box-shadow: none; background: none; border-radius: 0; }
    .vs-table .vs-group-label { display: block; padding: 0; background: none; border: 0; }
  }

  /* ---------- Tap targets (WCAG 2.5.8): small links get at least 24px of height ---------- */
  .crumbs a { display: inline-block; padding-block: var(--space-1); }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .brief-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  main :is(li, td, dd, span) > a:not([class]) { padding-block: 0.25em; }

  /* ---------- FAQ, grouped by where you are relative to the table ---------- */
  .faq-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .faq-toc a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4);
    font-size: var(--font-size-small, 0.875rem); font-weight: var(--weight-medium, 500); color: var(--color-fg); text-decoration: none;
    border-radius: var(--radius-pill); background: var(--color-bg-raised); box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
  }
  .faq-toc a:hover { box-shadow: inset 0 0 0 var(--hairline) var(--color-fg); }
  .faq-groups { display: grid; gap: var(--space-8); max-width: 48rem; }
  .faq-group { scroll-margin-top: calc(var(--nav-h) + var(--space-5)); padding-top: var(--space-4); border-top: 2px solid var(--rt-rim); }
  .faq-group h2 { margin-bottom: var(--space-4); }
  .faq-group .faq { border-top: 0; }

  /* About: the founding cohort drawn as twelve tables */
  .today-grid { display: grid; gap: var(--space-7); align-items: center; margin-bottom: var(--space-7); }
  @media (min-width: 64rem) { .today-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
  .today-grid .section-head { margin-bottom: 0; }
}