/* GOLDFINGER KIT · the one kit. One name, one home.
   Merged 2026-09-15. goldfinger-tokens.css and goldfinger-header.css were
   forked copies of a July source that had fallen behind the pages using it.
   BILS carried the current version of both, so BILS is what was folded in.
   Order below is the order the three files loaded in: tokens, then the
   .gbx- header component, then the estate kit. Nothing was reordered.

   Why the tokens are keyed on html.gbx-tokens rather than plain :root.
   goldfinger-tokens.css loaded AFTER each page's own <style>, so at equal
   specificity it won on document order, including inside the pages' mobile
   media queries. In one shared file that win has to be kept for the pages
   that had it and withheld from the four forums that never loaded the file.
   Measured 2026-09-15: at plain :root this block moved CGTI, DDIF, MEVO and
   SCLI, flipping MEVO's --accent from #4F6B74 to gold, replacing their 5-89
   spacing ladder with 8-144 and adding about 1,500px to every page. The
   class is the opt in. Only BILS and gbxcircle carry it. */

/* ══════════════════════════════════════════════════════════════════
   1 · ESTATE TOKENS  (was goldfinger-tokens.css)
   ══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   DESIGN GOLDFINGER · GBX Circle · token hand-over
   theLoroX v6.3 · the single source of truth · import this one file.
   Locked values — do not invent a 9th colour without the owner.
   Rules: square (radius 0) · weight ceiling 400 · one gold · no shadows.
   ═══════════════════════════════════════════════════════════════ */

:root.gbx-tokens {
  /* ── CORE PALETTE · 8 locked tokens ─────────────────────────── */
  --deep:      #151313;
  /* --ground IS NOT DECLARED HERE. It was, as #151313, and this block sits
     at :root.gbx-tokens, which is specificity (0,2,0) and beats a page's own
     :root at (0,1,0). Twelve pages carry the class. Eleven are BILS, whose
     ground IS #151313, so they looked correct and hid the fault. The
     twelfth is the gbxcircle homepage, ground #111616, and it painted
     BILS's floor instead. Caught 2026-09-17 by the FLOOR check, which only
     started looking at gbxcircle the day before.
     The floor is declared at :where(:root) further down, at zero
     specificity, resolving to each page's own --deep. A shared file must
     never tell a page what colour it is. */
  --stone:     #1F2828;   /* card / panel surface                             */
  --mid:       #222929;   /* hover state only                                 */
  --cashmere:  #F3F6F9;   /* text on dark · light page background             */
  --paper:     #F9F9F5;   /* brightest light surface                         */
  --linen:     #EDE7D9;   /* editorial light register (Who Attends, Advisory) */
  --gold:      #ba9933;   /* THE accent · one gold for everything             */
  --graphite:  #4A4949;   /* the one non-teal grey · UI rules                 */
  --private:   #202505;   /* AIO grounds + gate bands ONLY                    */

  /* ── PROPOSED · pending owner sign-off ──────────────────────── */
  --gold-ink:  #7e6418;   /* gold TEXT on light grounds (AA: paper 5.3:1,
  --gold-lit:   var(--gold);
                             cashmere 5.1:1, linen 4.6:1). Pure --gold fails
                             as text on light (2.2–2.6:1) — use it only for
                             hairlines + the key glyph in light mode.        */

  /* ── FORUM DARK GROUNDS · per-forum page floor ──────────────── */
  --ground-bils: #151313; /* warm-black   · was teal-black, rotated 2026-09-14 */
  --ground-cgti: #0F1419; /* steel-black  · cool blue cast   */
  --ground-ddif: #151313; /* warm-black   · neutral          */
  --ground-mevo: #111616; /* teal-black   · was aubergine, rotated 2026-09-14 */
  --ground-aio:  #202505; /* olive-black  · = --private      */
  --ground-scli: #0E1714; /* pine-black   · deep green cast  */
  --ground-gbx:  #111616; /* parent umbrella · unchanged     */

  /* ── DERIVED GOLD ───────────────────────────────────────────── */
  --g2: rgba(186,153,51,0.236);  /* hairlines · the only border weight */
  --g3: rgba(186,153,51,0.07);   /* faint gold wash                    */
  --gold-hover: #cda861;         /* gold link / key hover only         */

  /* ── TEXT ON DARK ───────────────────────────────────────────── */
  --dim:  rgba(243,246,249,0.72);  /* body copy   · AAA on every ground */
  --dim2: rgba(243,246,249,0.52);  /* secondary   · AA                  */
  --dim3: rgba(243,246,249,0.52);  /* tertiary / footer                 */

  /* ── INK ON LIGHT ───────────────────────────────────────────── */
  --ink:      #141414;             /* headings on light · AAA           */
  --ink-body: rgba(21,19,19,0.72); /* body on light   · AA–AAA          */
  --ink-dim:  rgba(21,19,19,0.66); /* secondary on light (decorative)   */

  /* ── TYPE · 3 families · fixed roles · never swap ───────────── */
  --serif: 'Cormorant', Georgia, serif;                      /* meaning: display, quotes, italic gold */
  --sans:  'Jost', system-ui, sans-serif;                    /* structure: nav, eyebrows, labels, buttons */
  --hv:    'Helvetica Neue', Helvetica, Arial, sans-serif;   /* detail: body, institutional, legal */
  /* Google Fonts: Cormorant 300/400 (+ital) · Jost 200/300/400 */

  --w-thin: 200; --w-regular: 300; --w-medium: 400;  /* 400 is the CEILING — never heavier */

  /* TYPE SEQUENCE · three rungs · CURRENT LAW 2026-09-13 */
  --body-size:       17px;  /* body copy      · .why-body    */
  --body-size-sec:   15px;  /* secondary      · .thesis-body */
  --body-size-legal: 10px;  /* consent notice · .cn-body     */
  --body-lh:   1.7639;
  --body-ls:   0.01618em;

  --ls-mark: 0.40em; --ls-eyebrow: 0.24em; --ls-nav: 0.20em; --ls-sub: 0.14em;

  --fs-display: clamp(64px, 9vw, 120px);   /* hero / entry heading   */
  --fs-section: clamp(48px, 6.5vw, 90px);  /* section heading        */
  --fs-quote:   clamp(24px, 3.2vw, 38px);  /* pull quote             */
  --fs-ssub:    clamp(18px, 2vw, 24px);    /* italic gold subhead    */

  /* ── SPACING · live Fibonacci grade · 8·13·21·34·55·89·144 ──── */
  --sp1: 8px; --sp2: 13px; --sp3: 21px; --sp4: 34px; --sp5: 55px; --sp6: 89px; --sp7: 144px;
  --gap-lockup: 6.9px;   /* 369 sacred lockup gap (icon ↔ wordmark) */

  /* ── BORDERS & CORNERS ──────────────────────────────────────── */
  --rule: 0.5px solid var(--g2);                 /* the only border on dark  */
  --rule-light: 0.5px solid rgba(21,19,19,0.1);  /* the only border on light */
  --radius: 0px;        /* SQUARE is the brand */
  --radius-soft: 2px;   /* printed-card softening only */

  /* ── MOTION ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);  /* fades + slides 0.2–0.9s · no bounce, no shrink-on-press */

  /* ── SEMANTIC ALIASES (prefer these) ────────────────────────── */
  --bg-dark: var(--deep);  --bg-light: var(--cashmere);
  --surface-card: var(--stone);  --surface-raised: var(--mid);
  --text-primary: var(--cashmere); --text-body: var(--dim); --text-secondary: var(--dim2);
  --text-on-light: var(--ink);
  --accent: var(--gold);  --hairline: var(--g2);  --gold-wash: var(--g3);
}

/* ── CONTRAST · tested (WCAG 2.1) ─────────────────────────────────
   DARK  · cashmere on any ground 14.6–17.2:1 AAA · gold 5.8–6.8:1 AA
         · body(--dim) ~8–9:1 AAA · secondary(--dim2) ~5:1 AA
   LIGHT · ink on paper/cashmere/linen 14.9–17.5:1 AAA
         · ink-body 6.5–7.1:1 AA–AAA
         · gold-ink 4.6–5.3:1 AA  (pure --gold as text FAILS on light)
   ───────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   2 · THE .gbx- HEADER COMPONENT  (was goldfinger-header.css)
   ══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   DESIGN GOLDFINGER · header component · drop-in
   Replaces the master-brand site header (mark + wordmark + key + CTA).
   Requires: goldfinger-tokens.css  ·  pairs with: goldfinger-header.js
   Hooks: .gbx-header  .gbx-mark  .gbx-wm  .gbx-nav  .gbx-cta  .gbx-key
   ═══════════════════════════════════════════════════════════════ */

/* ── layout ─────────────────────────────────────────────────── */
.gbx-header { display:flex; align-items:center; gap:var(--sp3);
  padding:var(--sp4) var(--sp6); border-bottom:var(--rule); background:var(--ground, var(--deep)); }
.gbx-lockup { display:flex; align-items:center; gap:var(--gap-lockup); } /* 6.9 sacred gap */
.gbx-mark { width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.gbx-mark svg { width:30px; height:30px; display:block; }
.gbx-mark img { width:30px; height:30px; display:block; filter:brightness(0) invert(1); } /* AIO/SCLI raster → white */
.gbx-wm { font-family:var(--sans); font-weight:var(--w-regular); font-size:15px;
  letter-spacing:var(--ls-mark); text-transform:uppercase; color:var(--cashmere); }
.gbx-nav { display:flex; gap:var(--sp5); margin-left:var(--sp5); font-family:var(--sans);
  font-weight:var(--w-regular); font-size:11px; letter-spacing:var(--ls-nav);
  text-transform:lowercase; color:var(--dim2); }
.gbx-nav a, .gbx-nav span { color:inherit; text-decoration:none; cursor:pointer; }
.gbx-nav a:hover, .gbx-nav span:hover { color:var(--gold); }
.gbx-cta { margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp2);
  font-family:var(--sans); font-weight:var(--w-regular); font-size:10px; letter-spacing:var(--ls-nav);
  text-transform:lowercase; color:var(--gold); cursor:pointer; }
.gbx-key { width:16px; height:30px; display:block; color:var(--gold); }
.gbx-key svg { display:block; overflow:visible; }

/* ── light register variant ──────────────────────────────────── */
.gbx-header[data-mode="light"] { background:var(--cashmere); border-bottom:var(--rule-light); }
.gbx-header[data-mode="light"] .gbx-wm { color:var(--ink); }
.gbx-header[data-mode="light"] .gbx-nav { color:var(--ink-body); }
.gbx-header[data-mode="light"] .gbx-cta,
.gbx-header[data-mode="light"] .gbx-key { color:var(--gold-ink); }       /* gold-as-text on light */
.gbx-header[data-mode="light"] .gbx-mark img { filter:none; }            /* keep mark as-authored on light */

/* ═══ MOTION ═══ choreography: load → ambient → arrival · hover · idle
   Timing: eye blink 6s · key turn 6s (offset 3.6s) · load 1.2s · ease var(--ease) */
.gbx-mark svg, .gbx-mark img { transform-origin:50% 50%; will-change:transform,opacity; }
.gbx-key { transform-origin:50% 27%; will-change:transform; }
.gbx-key .pupil { transform-box:fill-box; transform-origin:center; }

@keyframes gbxOpen      { from{opacity:0;transform:scale(.5) rotate(-14deg)} to{opacity:1;transform:none} }
@keyframes gbxKeyLoad   { 0%{transform:rotate(0);opacity:1} 42%{transform:rotate(90deg);opacity:0} 60%{transform:rotate(0);opacity:0} 100%{transform:rotate(0);opacity:1} }
@keyframes gbxBlink     { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.06)} }
@keyframes gbxBlinkSlow { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.06)} }
@keyframes gbxKeyTurn   { 0%,84%,100%{transform:rotate(0)} 92%{transform:rotate(90deg)} }
@keyframes gbxKeyPupil  { 0%,100%{opacity:1} 50%{opacity:.32} }
@keyframes gbxPop       { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes gbxUnlock    { 0%{transform:rotate(0)} 40%{transform:rotate(-16deg)} 100%{transform:rotate(0)} }

@media (prefers-reduced-motion: no-preference) {
  /* page load — "you are admitted" */
  html.gbx-booting .gbx-mark svg, html.gbx-booting .gbx-mark img { animation:gbxOpen .9s var(--ease) both; }
  html.gbx-booting .gbx-key { animation:gbxKeyLoad 1.2s var(--ease) both; }

  /* ambient loop — "we are present" (key motion is ALWAYS on) */
  html.gbx-ambient .gbx-mark svg, html.gbx-ambient .gbx-mark img { animation:gbxBlink 6s ease-in-out infinite; }
  html.gbx-ambient .gbx-key { animation:gbxKeyTurn 6s var(--ease) infinite; animation-delay:-3.6s; }
  html.gbx-ambient .gbx-key .pupil { animation:gbxKeyPupil 3.6s ease-in-out infinite; }

  /* idle 10s — "waiting, unhurried" (eye slows, key keeps moving) */
  html.gbx-ambient.gbx-idle .gbx-mark svg, html.gbx-ambient.gbx-idle .gbx-mark img { animation:gbxBlinkSlow 9s ease-in-out infinite; }

  /* section arrival — "this room opens" */
  .gbx-header.gbx-arrive .gbx-mark svg, .gbx-header.gbx-arrive .gbx-mark img { animation:gbxPop .55s var(--ease); }
  .gbx-header.gbx-arrive .gbx-key { animation:gbxUnlock .55s var(--ease); }

  /* hover on CTA — "step forward" */
  .gbx-header:has(.gbx-cta:hover) .gbx-mark svg, .gbx-header:has(.gbx-cta:hover) .gbx-mark img { animation:none; transform:scale(1.12); }
  .gbx-header:has(.gbx-cta:hover) .gbx-key { animation:none; transform:rotate(90deg); color:var(--gold-hover); filter:drop-shadow(0 0 7px rgba(186,153,51,.55)); }
}

@media (prefers-reduced-motion: reduce) {
  .gbx-mark svg, .gbx-mark img, .gbx-key { animation:none !important; } /* resting state */
}

/* ═══ SCROLL STATE ═══ transparent over hero → solid + blur once scrolled */
.gbx-header { position:sticky; top:0; z-index:120; transition:background .4s var(--ease), border-color .4s var(--ease); }
.gbx-header.gbx-scrolled { background:rgba(21,19,19, 0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.gbx-header[data-mode="light"].gbx-scrolled { background:rgba(237,231,217,0.95); }

/* ═══ MEGAMENU ═══ dropdown nav (hover/focus) keyed to .gbx-nav-item / .gbx-nav-top / .gbx-nav-dd */
.gbx-nav { align-items:center; }
.gbx-nav-item { position:relative; display:flex; align-items:center; }
.gbx-nav-top { color:inherit; text-decoration:none; cursor:pointer; padding:22px 0; display:block; transition:color .3s var(--ease); }
.gbx-nav-item:hover > .gbx-nav-top, .gbx-nav-item:focus-within > .gbx-nav-top { color:var(--gold); }
.gbx-nav-dd { position:absolute; top:100%; left:50%; transform:translate(-50%,-4px); min-width:184px;
  background:rgba(21,19,19,0.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:0.5px solid var(--g2); padding:12px 0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index:130; }
.gbx-nav-item:hover > .gbx-nav-dd, .gbx-nav-item:focus-within > .gbx-nav-dd { opacity:1; visibility:visible; transform:translate(-50%,0); }
.gbx-nav-dd a { display:block; padding:9px 24px; font-family:var(--sans); font-weight:var(--w-regular);
  font-size:10px; letter-spacing:var(--ls-nav); text-transform:lowercase; color:rgba(243,246,249,0.55);
  white-space:nowrap; transition:color .2s, background .2s; }
.gbx-nav-dd a:hover { color:var(--gold); background:rgba(186,153,51,0.06); }
.gbx-header[data-mode="light"] .gbx-nav-dd { background:rgba(237,231,217,0.97); border-color:var(--rule-light); }
.gbx-header[data-mode="light"] .gbx-nav-dd a { color:var(--ink-body); }
.gbx-header[data-mode="light"] .gbx-nav-dd a:hover { color:var(--gold-ink); }

/* ═══ COMPONENT GUARD ═══
   BILS pages still carry the pre PART 23 header CSS as a bare element rule:
   nav { position:fixed; left:0; right:0; justify-content:space-between }. It
   matches <nav class="gbx-nav"> and rips this nav out of the header, landing
   "the why" on the wordmark and "the conversation" on request access. It was
   live on eight pages and invisible below 820px, where the inline nav is hidden
   and the hamburger takes over, which is why nobody saw it.
   DDIF's .hdr-nav has carried this reset all along and never broke. So the
   component now defends itself rather than relying on every page being clean. */
.gbx-header > .gbx-nav {
  position: static; left: auto; right: auto; top: auto; bottom: auto;
  width: auto; height: auto; padding: 0; z-index: auto;
  justify-content: flex-start; flex: 0 0 auto;
}

/* ═══ MOBILE NAV ═══ hamburger + full-screen overlay (built by goldfinger-header.js)
   Removable: delete this block + the mobileNav() call to revert to inline nav. */
.gbx-hamburger, .gbx-hamburger-close { display:none; }
@media (max-width:820px) {
  .gbx-header > .gbx-nav { display:none; }                 /* inline nav hides; overlay takes over */
  .gbx-hamburger { display:flex; margin-left:auto; flex-direction:column; gap:5px;
    width:34px; height:34px; align-items:center; justify-content:center;
    background:none; border:0; cursor:pointer; padding:0; }
  .gbx-header .gbx-cta { margin-left:var(--sp3); }
  .gbx-hamburger span { display:block; width:21px; height:1px; background:var(--gold); transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .gbx-header[data-mode="light"] .gbx-hamburger span { background:var(--gold-ink); }
  /* 44px of hit area around a 21px glyph: the mark stays the size of the
     burger's hairlines, the target clears the 44px minimum for a thumb. */
  /* top:21px put the X behind the iPhone status bar, which is why the menu read
     as having no way out. The notch inset has to be added, not assumed away.
     env() falls back to 0 on anything without a notch, so desktop is unchanged. */
  .gbx-hamburger-close { position:fixed; z-index:210;
    top:calc(var(--sp4) + env(safe-area-inset-top, 0px));
    right:calc(var(--sp5) + env(safe-area-inset-right, 0px));
    width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0;
    align-items:center; justify-content:center; }
  .gbx-hamburger-close span { position:absolute; display:block; width:21px; height:1px;
    background:var(--gold); }
  .gbx-hamburger-close span:first-child { transform:rotate(45deg); }
  .gbx-hamburger-close span:last-child  { transform:rotate(-45deg); }
  .gbx-header[data-mode="light"] .gbx-hamburger-close span { background:var(--gold-ink); }
  .gbx-header.gbx-nav-open .gbx-hamburger { display:none; }
  .gbx-nav-overlay.gbx-open .gbx-hamburger-close { display:flex; }
}
/* overlay is appended to <body>, so it lives outside the header scope */
.gbx-nav-overlay { position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--sp5);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* the same notch: the first item sat under the status bar and the last under
     the Safari toolbar, so both ends of a 13 item menu were unreachable. */
  padding:calc(var(--sp6) + env(safe-area-inset-top, 0px)) var(--sp5)
          calc(var(--sp6) + env(safe-area-inset-bottom, 0px)); box-sizing:border-box;
  background:rgba(21,19,19,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
/* Thirteen items at 28px overflowed an 812px phone by 318px with overflow:visible, so
   six of them could not be reached or scrolled to. justify-content:center clips the
   overflow at BOTH ends even once scrolling is on, so centring is done with auto
   margins instead: it still centres when the menu fits and scrolls cleanly when it
   does not. The tighter step below keeps all thirteen on screen without scrolling on
   a standard phone. */
.gbx-nav-overlay > *:first-child { margin-top:auto; }
.gbx-nav-overlay > *:last-child  { margin-bottom:auto; }
.gbx-nav-overlay > * { flex-shrink:0; }
.gbx-nav-overlay.gbx-open { display:flex; }

/* ── the drawer is an accordion, not a list ──────────────────────────────
   theLoroX 2026-08-29: accordion below 768px, chevron affordance, and the
   section's own page repeated as the first child so a label can be a trigger
   without losing a destination. Three rows closed instead of thirteen links,
   which takes the drawer from 1,690px to inside one screen. */
.gbx-nav-overlay .gbx-nav-acc {
  display:flex; align-items:center; justify-content:center; gap:var(--sp3);
  width:100%; max-width:340px; margin:0 auto; padding:var(--sp3) 0;
  background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-weight:var(--w-regular); font-size:28px;
  letter-spacing:-0.01em; color:var(--cashmere);
  transition:color .3s var(--ease); }
.gbx-nav-overlay .gbx-nav-acc:hover,
.gbx-nav-overlay .gbx-nav-acc.gbx-acc-open { color:var(--gold); }
.gbx-nav-overlay .gbx-acc-label { display:inline-flex; align-items:center; gap:var(--sp2); }
/* the chevron tells the reader the row opens before they touch it */
.gbx-nav-overlay .gbx-acc-chev {
  width:7px; height:7px; flex-shrink:0; margin-top:-3px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s var(--ease); }
.gbx-nav-overlay .gbx-acc-open .gbx-acc-chev { transform:rotate(-135deg); margin-top:2px; }

/* grid-template-rows:0fr to 1fr is the tidy way to animate a collapse, and in
   an auto-height flex child the 1fr resolved to 0px, so an open panel stayed
   shut. max-height is blunter and it cannot fail. */
.gbx-nav-overlay .gbx-nav-panel {
  overflow:hidden; width:100%; max-height:0;
  transition:max-height .34s var(--ease); }
.gbx-nav-overlay .gbx-nav-panel.gbx-panel-open { max-height:50vh; }
.gbx-nav-overlay .gbx-panel-in { display:flex; flex-direction:column; }
.gbx-nav-overlay .gbx-nav-panel a {
  display:flex; align-items:center; justify-content:center; gap:var(--sp2);
  font-family:var(--sans); font-weight:300; font-size:13px;
  letter-spacing:var(--ls-nav); text-transform:lowercase;
  color:var(--dim); padding:var(--sp2) 0; }
.gbx-nav-overlay .gbx-nav-panel a:hover { color:var(--gold); }
.gbx-nav-overlay .gbx-nav-solo { display:block; text-align:center; }

@media (prefers-reduced-motion: reduce) {
  .gbx-nav-overlay .gbx-acc-chev,
  .gbx-nav-overlay .gbx-nav-panel { transition:none; }
}
.gbx-nav-overlay a, .gbx-nav-overlay span { font-family:var(--serif); font-weight:var(--w-regular);
  font-size:28px; letter-spacing:-0.01em; text-transform:none; color:var(--cashmere);
  text-decoration:none; cursor:pointer; }
.gbx-nav-overlay a:hover, .gbx-nav-overlay span:hover { color:var(--gold); }
.gbx-nav-overlay .gbx-nav-overlay-cta { margin-top:var(--sp4); font-family:var(--sans);
  font-size:12px; letter-spacing:var(--ls-nav); text-transform:lowercase; color:var(--gold); }

@media (max-height:820px) {
  .gbx-nav-overlay { gap:var(--sp3); }
  .gbx-nav-overlay .gbx-nav-acc { font-size:24px; }
  .gbx-nav-overlay a, .gbx-nav-overlay span { font-size:21px; }
}

/* ══════════════════════════════════════════════════════════════════
   3 · ESTATE KIT  (goldfinger-header-common.css, unchanged)
   ══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   GOLDFINGER · header common law · one file, every forum
   ───────────────────────────────────────────────────────────────
   Canonical copy lives at 00_canonical/. Each site root holds a
   byte-identical copy. Never edit a site copy: edit here and
   redistribute, or the six rooms drift apart again.

   The estate grew four header naming patterns before this file
   existed. BILS, AIO and gbxcircle use .gbx-header / .gbx-mark /
   .gbx-key / .gbx-cta. CGTI and DDIF use .hdr / .hdr-mark /
   .hdr-key / .hdr-cta. MEVO uses .hdr-cta with .key-glyph. SCLI
   uses .hdr with .mark / .lx-key-eye / .hcta. Rather than rewrite
   four sites' markup, this file binds the one choreography to all
   four sets of hooks.

   Requires: goldfinger-tokens.css for --gold, --gold-hover, --ease
   Pairs with: goldfinger-header-common.js which drives the classes
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · the CTA carries no underline ────────────────────────────
   .gbx-cta never set text-decoration. The component only reset it
   on .gbx-nav a, so the browser default underlined every "request
   access" link on BILS, CGTI, DDIF, MEVO and SCLI. AIO and
   gbxcircle had it right, which is why it read as a per-site quirk
   rather than a missing line in the shared component.
   !important is deliberate here and in section 2: this file has to
   win over seven sites of legacy page CSS whose load order varies. */
.gbx-cta, .gbx-cta:link, .gbx-cta:visited, .gbx-cta:hover, .gbx-cta:focus,
.hdr-cta, .hdr-cta:link, .hdr-cta:visited, .hdr-cta:hover, .hdr-cta:focus,
.hcta,    .hcta:link,    .hcta:visited,    .hcta:hover,    .hcta:focus,
.gbx-cta a, .hdr-cta a, .hcta a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* ── 2 · no hairline under the header ────────────────────────────
   The full-width rule under the header read as a seam between the
   header and the room rather than as structure. The header now
   separates by ground and by blur on scroll, which is quieter and
   holds at every width. Hairlines elsewhere on the page are
   untouched: this removes the header's own bottom edge only. */
header.gbx-header, header.hdr, .gbx-header, .hdr,
header.gbx-header.gbx-scrolled, header.hdr.scrolled,
.gbx-header.gbx-scrolled, .hdr.scrolled,
.gbx-header[data-mode="light"], .hdr[data-mode="light"] {
  border-bottom: 0 !important;
}

/* ═══ 3 · MOTION ═══ choreography: load -> ambient -> arrival -> hover -> idle
   Timing is the BILS index reference: eye blink 6s, key turn 6s
   offset 3.6s, load 1.2s. Every forum now runs the same clock. */

.gbx-mark svg, .gbx-mark img,
.hdr-mark svg, .hdr-mark img,
.hdr .mark img, .hdr-brand svg, .hdr-brand img {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.gbx-key, .hdr-key, .key-glyph, .lx-key-eye,
.gbx-cta svg, .hdr-cta svg, .hcta svg {
  transform-origin: 50% 27%;
  will-change: transform;
}
.gbx-key .pupil, .hdr-key .pupil, .key-glyph .pupil {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes gbxOpen      { from{opacity:0;transform:scale(.5) rotate(-14deg)} to{opacity:1;transform:none} }
@keyframes gbxKeyLoad   { 0%{transform:rotate(0);opacity:1} 42%{transform:rotate(90deg);opacity:0} 60%{transform:rotate(0);opacity:0} 100%{transform:rotate(0);opacity:1} }
@keyframes gbxBlink     { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.06)} }
@keyframes gbxBlinkSlow { 0%,90%,100%{transform:scaleY(1)} 95%{transform:scaleY(.06)} }
@keyframes gbxKeyTurn   { 0%,84%,100%{transform:rotate(0)} 92%{transform:rotate(90deg)} }
@keyframes gbxKeyPupil  { 0%,100%{opacity:1} 50%{opacity:.32} }
@keyframes gbxPop       { 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes gbxUnlock    { 0%{transform:rotate(0)} 40%{transform:rotate(-16deg)} 100%{transform:rotate(0)} }

@media (prefers-reduced-motion: no-preference) {

  /* page load · "you are admitted" */
  html.gbx-booting .gbx-mark svg,  html.gbx-booting .gbx-mark img,
  html.gbx-booting .hdr-mark svg,  html.gbx-booting .hdr-mark img,
  html.gbx-booting .hdr .mark img, html.gbx-booting .hdr-brand svg {
    animation: gbxOpen .9s var(--ease, cubic-bezier(.2,.7,.2,1)) both;
  }
  html.gbx-booting .gbx-key, html.gbx-booting .hdr-key,
  html.gbx-booting .key-glyph, html.gbx-booting .lx-key-eye {
    animation: gbxKeyLoad 1.2s var(--ease, cubic-bezier(.2,.7,.2,1)) both;
  }

  /* ambient · "we are present" · the key never stops */
  html.gbx-ambient .gbx-mark svg,  html.gbx-ambient .gbx-mark img,
  html.gbx-ambient .hdr-mark svg,  html.gbx-ambient .hdr-mark img,
  html.gbx-ambient .hdr .mark img, html.gbx-ambient .hdr-brand svg {
    animation: gbxBlink 6s ease-in-out infinite;
  }
  html.gbx-ambient .gbx-key, html.gbx-ambient .hdr-key,
  html.gbx-ambient .key-glyph, html.gbx-ambient .lx-key-eye {
    animation: gbxKeyTurn 6s var(--ease, cubic-bezier(.2,.7,.2,1)) infinite;
    animation-delay: -3.6s;
  }
  html.gbx-ambient .gbx-key .pupil, html.gbx-ambient .hdr-key .pupil,
  html.gbx-ambient .key-glyph .pupil {
    animation: gbxKeyPupil 3.6s ease-in-out infinite;
  }

  /* idle 10s · "waiting, unhurried" · the eye slows, the key does not */
  html.gbx-ambient.gbx-idle .gbx-mark svg,  html.gbx-ambient.gbx-idle .gbx-mark img,
  html.gbx-ambient.gbx-idle .hdr-mark svg,  html.gbx-ambient.gbx-idle .hdr-mark img,
  html.gbx-ambient.gbx-idle .hdr .mark img, html.gbx-ambient.gbx-idle .hdr-brand svg {
    animation: gbxBlinkSlow 9s ease-in-out infinite;
  }

  /* section arrival · "this room opens" */
  .gbx-header.gbx-arrive .gbx-mark svg, .gbx-header.gbx-arrive .gbx-mark img,
  .hdr.gbx-arrive .hdr-mark svg, .hdr.gbx-arrive .hdr-mark img,
  .hdr.gbx-arrive .mark img, .hdr.gbx-arrive .hdr-brand svg {
    animation: gbxPop .55s var(--ease, cubic-bezier(.2,.7,.2,1));
  }
  .gbx-header.gbx-arrive .gbx-key, .hdr.gbx-arrive .hdr-key,
  .hdr.gbx-arrive .key-glyph, .hdr.gbx-arrive .lx-key-eye {
    animation: gbxUnlock .55s var(--ease, cubic-bezier(.2,.7,.2,1));
  }

  /* hover on the CTA · "step forward" */
  .gbx-header:has(.gbx-cta:hover) .gbx-mark svg,
  .gbx-header:has(.gbx-cta:hover) .gbx-mark img,
  .hdr:has(.hdr-cta:hover) .hdr-mark svg,
  .hdr:has(.hdr-cta:hover) .hdr-mark img,
  .hdr:has(.hdr-cta:hover) .hdr-brand svg,
  .hdr:has(.hcta:hover) .mark img {
    animation: none;
    transform: scale(1.12);
  }
  .gbx-header:has(.gbx-cta:hover) .gbx-key,
  .hdr:has(.hdr-cta:hover) .hdr-key,
  .hdr:has(.hdr-cta:hover) .key-glyph,
  .hdr:has(.hcta:hover) .lx-key-eye {
    animation: none;
    transform: rotate(90deg);
    color: var(--gold-hover, #cda861);
    filter: drop-shadow(0 0 7px rgba(186,153,51,.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gbx-mark svg, .gbx-mark img, .gbx-key,
  .hdr-mark svg, .hdr-mark img, .hdr-key,
  .hdr .mark img, .hdr-brand svg, .key-glyph, .lx-key-eye {
    animation: none !important;   /* resting state */
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MEDIA CONTROLS · one sound control, every forum
   ─────────────────────────────────────────────────────────────────────
   Measured 2026-09-13: eleven hero videos across the estate, and the
   sound control existed on one of them, bils/index. Carousel videos told
   the same story. BILS wired 8 pages with data-snd and .snd-toggle. CGTI,
   DDIF, MEVO and AIO had none on any page, so 26 pages played footage a
   visitor could not hear and could not ask to hear.

   The markup lived in the pages, which is why it never spread. It lives
   here now, next to the header it ships with, so a page gets the control
   by loading the kit rather than by being edited.

   Values are BILS's, verbatim. This is a port, not a redesign.
   ═══════════════════════════════════════════════════════════════════════ */

.snd-toggle, .hero-sound {
  position: absolute; z-index: 30;
  background: rgba(17,22,22,.55);
  border: .5px solid rgba(186,153,51,.2);
  color: rgba(243,246,249,0.52);
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 300; padding: 8px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all .2s; backdrop-filter: blur(4px);
}
.snd-toggle { bottom: 18px; right: 18px; }
.hero-sound { bottom: var(--sp4, 21px); right: var(--sp5, 34px); z-index: 10; }

.snd-toggle:hover, .hero-sound:hover {
  color: var(--cashmere, #F3F6F9);
  border-color: rgba(186,153,51,.45);
}
.snd-toggle:focus-visible, .hero-sound:focus-visible {
  outline: 1px solid var(--gold, #ba9933); outline-offset: 3px;
}

/* A carousel video answers a click. The cursor has to say so before the
   click, not after. Set by script only where the click is ours to take:
   a video inside a link belongs to the link. */
video.gbx-clickable { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   ORGANISATION MARQUEE · the scrolling logo strip
   ─────────────────────────────────────────────────────────────────────
   Measured 2026-09-13: SCLI carried this on 9 of 10 pages and CGTI and
   MEVO had it nowhere. It was page CSS, which is why it never travelled.

   Values are SCLI's verbatim. The spacing reads from each forum's own
   tokens, so it keeps that forum's rhythm rather than importing SCLI's:
   --sp5 is 55px on CGTI and 34px on MEVO, and both are correct there.

   The track holds the logo list TWICE. slide moves it -50%, so the
   second copy is exactly where the first began and the loop has no seam.
   Removing the duplicate list breaks the loop, not just the length.
   ═══════════════════════════════════════════════════════════════════════ */

.marquee {
  overflow: hidden; position: relative; z-index: 2;
  border-top: 0.5px solid var(--g2, rgba(186,153,51,0.236));
  border-bottom: 0.5px solid var(--g2, rgba(186,153,51,0.236));
  padding: var(--sp5, 34px) 0;
}
.track {
  display: flex; width: max-content;
  gap: var(--sp7, 89px);
  animation: gbx-marquee 46s linear infinite;
}
/* 40px, not 26. Reported by Kenzie 2026-09-17 on MEVO and SCLI: "logos in
   the strip are too small and not really visible".

   The argument is legibility, not taste. These are wordmarks, so a 26px
   image renders its lettering at roughly 8 to 10px cap height, which is
   below 10px, the smallest type this estate permits anywhere. The band is
   34px of padding either side of the logo, so at 26px the mark used 28
   percent of the height it sat in. At 40px and .62 the lettering clears the
   floor and the band reads as a wall rather than a hairline.

   Patrick's to overrule. The kit is the one home for it, so a change here
   lands on CGTI, MEVO and SCLI together, which is the point. */
.track img {
  height: 40px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: opacity .3s var(--ease, cubic-bezier(.22,1,.36,1));
}
.track img:hover { opacity: .85; }

@keyframes gbx-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* A strip that never stops is the exact thing this media query exists
   for. It holds at the start rather than jumping to a random offset. */
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TAP TARGETS · 44 by 44, without redrawing a single mark
   ─────────────────────────────────────────────────────────────────────
   171 findings at 375 across five forums: footer socials at 28x28, the
   header burger at 22x14, the mark at 30x30, lockups, hamburgers.
   Every one is an icon control small enough to miss with a thumb.

   THE MARKS DO NOT GET BIGGER. The estate's restraint is the point, and
   a 44px gold square in a footer would be a different design.

   Each control becomes a 44x44 BOX. What is drawn stays its own size,
   either because it is a child element that keeps its dimensions, or
   because the visible border moves to ::before. A negative margin pulls
   the layout footprint back to what it was, so nothing moves on the
   page: margin shrinks the space an element occupies, never the element,
   so the hit area and getBoundingClientRect stay 44x44.

   !important because the inline <style> block loads after this file.
   Measured, not assumed: see the load order in any forum index. */

/* footer socials. Two markups across the estate for the same control:
   .fsoc at 28x28 on five forums, and an unclassed `.soc a` at 30x30 on
   SCLI. Both are a bordered square holding a one or two letter glyph. */
.soc a {
  width: 44px !important; height: 44px !important;
  border: 0 !important;
  margin: -7px !important;
  position: relative;
  display: flex !important; align-items: center; justify-content: center;
}
.soc a::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border: 0.5px solid var(--g2, rgba(186,153,51,0.236));
  transition: border-color .2s;
  pointer-events: none;
}
.soc a:hover::before { border-color: var(--gold, #ba9933); }

/* .fsoc · the 28x28 bordered square is drawn by ::before */
.fsoc {
  width: 44px !important; height: 44px !important;
  border: 0 !important;
  margin: -8px !important;
  position: relative;
  display: flex !important; align-items: center; justify-content: center;
}
.fsoc::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border: 0.5px solid var(--g2, rgba(186,153,51,0.236));
  transition: border-color .2s;
  pointer-events: none;
}
.fsoc:hover::before { border-color: var(--gold, #ba9933); }

/* header mark and lockup · the child keeps its own size
   ─────────────────────────────────────────────────────────────────────
   SECOND TIME THIS RULE HAS SHIPPED A BUG, and the same mistake twice.
   It pinned the container to a FIXED 44px and forced EVERY child to
   30x30. On CGTI and DDIF the brand is .hdr-brand, so nothing happened.
   On MEVO the brand IS .hdr-mark and it holds the mark AND the wordmark,
   so the container was capped at 44px wide and the word "mevo" was
   squashed into a 30x30 box. Patrick saw it as a header that did not
   match the others.

   A tap target rule may GROW A BOX. It may not cap one, it may not
   decide display, and it may not resize what is inside. The 30x30 now
   names the mark itself, img svg picture, and leaves text alone.

   The forced display stays here, unlike on the burger, because .hdr-mark
   and .gbx-lockup are never hidden by any page in the estate. Checked
   across every page and stylesheet on 2026-09-14, not assumed. */
.hdr-mark, .gbx-lockup, .hdr .mark {
  min-width: 44px !important; min-height: 44px !important;
  margin: -7px !important;
  display: flex !important; align-items: center;
}
.hdr-mark > img, .hdr-mark > svg, .hdr-mark > picture,
.gbx-lockup > img, .gbx-lockup > svg, .gbx-lockup > picture,
.hdr .mark > img, .hdr .mark > svg, .hdr .mark > picture {
  width: 30px; height: 30px; flex-shrink: 0;
}

/* burgers and hamburgers · the bars keep their size, the box grows
   ─────────────────────────────────────────────────────────────────────
   THIS RULE CARRIED "display: flex !important" AND IT SHIPPED A BUG.
   Every forum hides its burger at desktop with .hdr-burger{display:none}
   and un-hides it inside a mobile media query. An !important display
   beats both, at every width, so on 2026-09-14 all six production sites
   showed the mobile hamburger in the desktop header. On DDIF it sits
   inline in the nav, so it read as a stray white bar beside "the
   conversation". Patrick saw it before any gate did.

   A tap target rule may only GROW A BOX. It must never decide whether an
   element exists. align-items and justify-content are inert unless the
   page has already made it a flex box, which the mobile rule does, so
   the centring still applies exactly where it is wanted. */
.hdr-burger, .burger, .gbx-hamburger {
  min-width: 44px !important; min-height: 44px !important;
  align-items: center; justify-content: center;
  margin: -11px -8px !important;
  background: none; border: 0;
}
.hdr-burger > span, .gbx-hamburger > span { width: 22px; }

/* A skip link is visually hidden until it takes focus, so it is not a
   thumb target in normal use. It still gets the box, because when it IS
   focused it is the first thing a keyboard or switch user lands on. */
.gbx-skip:focus, .gbx-skip:focus-visible {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE REVEAL · PART 24 section 05, "In the room"
   ─────────────────────────────────────────────────────────────────────
   Ruled geometry: tile by tile, 90ms apart, capped at six steps. The
   engine was pasted into 45 pages and missing from ten, which is how the
   Curated for grids shipped static on five. It belongs in the kit.

   SCOPED TO .gf-reveal on purpose. Forty-five pages carry their own .rev
   rules and their own observer. This adds a resting state to nothing they
   own, and the kit observer only ever ADDS .in, which is what their own
   observers already do. Convergent, never conflicting.

   THE RESTING STATE HIDES, SO IT IS GATED ON THE SCRIPT. html.gf-rev-on
   is written by the kit JS. Without JS the class never lands and every
   cell renders visible. A reveal that fails closed is invisible content,
   and this estate has shipped invisible content before.
   ═══════════════════════════════════════════════════════════════════════ */
/* MEASURED 2026-09-14 AND UNIFIED. This block ran .5s on --ease over 8px
   while .rev ran .72s on --ease-enter over 14px, so the Curated for grids
   entered on a different motion from every other section in the estate.
   Two staggers is correct and ruled, a section ladder and a 90ms grid
   sweep. Two ENTRANCE motions is drift.
   The transition now comes from the one component below. Only the stagger
   is this block's own, written per tile by the kit JS. */
html.gf-rev-on .gf-reveal > .in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════
   THE LIGHT REGISTER AND THE MOTION CURVE · defaults, not overrides
   ─────────────────────────────────────────────────────────────────────
   Measured 2026-09-14. BILS reads var(--gold-ink) nine times and
   var(--gold-lit) nine times and declares neither. DDIF the same.
   gbxcircle reads --ink eight times, --ink-body six and --gold-ink
   eight, and declares none of them.

   An unresolved var() is invalid at computed-value time, so
   "--gold: var(--gold-ink)" on a light island does not fall back, it
   UNSETS the rebinding and the island keeps the dark gold. CURRENT LAW
   2026-09-09 rules gold is never text on light and #ba9933 measures
   2.21:1 on linen. That protection has been inert on two forums. The
   same shape unlit the dark islands on SCLI in September.

   WHY :where() AND NOT :root. This stylesheet is linked BELOW the page's
   own <style> on every property, line 825 on bils index. A plain :root
   here would WIN on equal specificity and silently overwrite the
   per-forum values CGTI and SCLI already tuned to their own grounds.
   :where() has zero specificity, so any page declaration beats it
   whatever the source order. Defaults, never overrides.

   VALUES ARE FROM INSIDE THE ESTATE. #7e6418, #141414, 0.72 and 0.66 are
   the CGTI and SCLI declarations and the CURRENT LAW table. Nothing here
   comes from the Fable kit, and NO TYPE TOKEN IS DECLARED HERE. The type
   sequence is 17 / 15 / 10 and it is not this file's business.

   --ink-body and --ink-dim default to the --deep rgb. A forum that wants
   its own ground tint declares it locally, as CGTI and SCLI do.
   ═══════════════════════════════════════════════════════════════════════ */
:where(:root) {
  --ink:       #141414;
  --ink-body:  rgba(21, 19, 19, 0.72);
  --ink-dim:   rgba(21, 19, 19, 0.66);
  --gold-ink:  #7e6418;
  --gold-lit:  var(--gold);
  --ease:      cubic-bezier(.2, .7, .2, 1);
  /* the lockup tracking. Declared on 18 pages and absent on MEVO,
     which is why its wordmark fell back to an invented value. */
  --ls-mark:   0.40em;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE REVEAL COMPONENT · .rev · ONE animation, estate wide
   ─────────────────────────────────────────────────────────────────────
   Measured 2026-09-14, before this existed. The reveal was pasted into
   56 pages and had become NINE different animations:

     16 pages  translateY(14px) .72s cubic-bezier(.22,1,.36,1)
      9 pages  translateY(24px) .7s ease
      7 pages  translateY(26px) .9s ease
      8 pages  opacity:0 and NO transition at all, so the element POPS
     15 pages  resting at opacity:1, so they never fade, only slide
      1 page   transform:none;transition:none, switched off entirely
   and two delay ladders, .12/.25/.38/.52 against .1/.2/.3/.4.

   That is not drift around one rule. Several pages had no fade and one
   had no reveal. The house motion signature did not exist.

   THE VALUES ARE THE ESTATE'S OWN DOMINANT ONES, not a new invention.
   translateY(14px), .72s and cubic-bezier(.22,1,.36,1) are the most
   declared geometry, and .12/.25/.38/.52 is the most declared ladder.
   The opacity:1 resting states are treated as the defect they are: a
   reveal that does not reveal.

   TWO CURVES, TWO JOBS. --ease-enter is the entrance curve, an ease out
   expo that settles long. --ease is the interaction curve for hover and
   state. They were competing as one, 85 declarations against 41. They
   are not rivals, they do different work.

   THE RESTING STATE HIDES, SO IT IS GATED ON html.gf-rev-on, written by
   the kit JS. No script, no class, everything renders visible. This
   estate has shipped invisible content before.
   ═══════════════════════════════════════════════════════════════════════ */
:where(:root) { --ease-enter: cubic-bezier(.22, 1, .36, 1); }

/* THE FLOOR, at zero specificity, so a page that never declares one still has
   one. Twelve AIO pages paint body{background:var(--ground)} and nothing on
   those pages, in their stylesheets or in their kit, ever defines --ground.
   The declaration was therefore discarded, the body fell to transparent, the
   browser painted white, and cashmere text sat on it unreadable. Live, on
   twelve pages, found 2026-09-16 from a screenshot rather than by any check.

   It resolves to the page's OWN --deep, the deepest colour that page declares,
   rather than to a constant, so no page is told what colour it is by a shared
   file. Any page that declares --ground keeps it: :root beats :where(:root).

   This does NOT give AIO its #202505 olive. That lives in --private and in
   --ground-aio, and reaching it needs an edit inside 03_web/aio/, which is a
   permanent no-touch path. Readable from its own tokens is what a shared kit
   can honestly do. */
:where(:root) { --ground: var(--deep, #151313); }

/* The display type tokens, at zero specificity so any forum that sets its own
   keeps it. They were declared only inside :root.gbx-tokens, which is BILS and
   gbxcircle, so on the other four var(--fs-section) resolved to nothing and the
   declaration was thrown away: an h1 fell from 83.2px to the 16px it inherited.
   The render baseline caught that on ten pages within a minute of the change,
   which is the whole reason it exists. */
/* THE DISPLAY SCALE · eight steps, and they are the ones already in service.
   Measured 2026-09-16: 85 distinct clamp curves carried 271 declarations, an
   average of three uses each, and 38 of them were used exactly ONCE. Every
   page was inventing its own responsive headline.

   The four existing tokens keep their values to the pixel, because 74
   declarations already name them. Four more were added where the real
   clusters sat and nothing covered them: 28, 52, 76 and 104 at the top end.

   Mapped by nearest maximum, 153 declarations move 4px or less, 70 move 5 to
   8, and 24 move more. Those 24 are the price of one scale instead of 85
   curves, and the render baseline names every one of them. */
:where(:root) {
  --fs-ssub:    clamp(18px, 2vw,   24px);
  --fs-lede:    clamp(19px, 2.3vw, 28px);
  --fs-quote:   clamp(24px, 3.2vw, 38px);
  --fs-sub:     clamp(30px, 4vw,   52px);
  --fs-lead:    clamp(40px, 5.4vw, 76px);
  --fs-section: clamp(48px, 6.5vw, 90px);
  --fs-hero:    clamp(46px, 8vw,   104px);
  --fs-display: clamp(64px, 9vw,   120px);
}

html.gf-rev-on .rev,
html.gf-rev-on .rv,
html.gf-rev-on .reveal,
html.gf-rev-on .gf-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .72s ease,
              transform .72s var(--ease-enter, cubic-bezier(.22, 1, .36, 1));
}
html.gf-rev-on .rev.in,      html.gf-rev-on .rev.visible,
html.gf-rev-on .rv.in,       html.gf-rev-on .rv.visible,
html.gf-rev-on .reveal.in,   html.gf-rev-on .reveal.visible { opacity: 1; transform: none; }

/* THREE VOCABULARIES, ONE COMPONENT. .rev on 612 elements, .rv on 112,
   .reveal on 66, and two lit-state classes, .in and .visible. They are
   the same idea named three times. The kit answers to all of them so no
   page has to be re-marked, which is the cheap half of the migration.
   Re-marking 178 elements onto .rev is the tidy half and is not worth a
   regression today.

   SCLI'S REVEAL WAS DEAD. index.html declared .rv at opacity:0 on line
   245 and again at opacity:1;transform:none on line 263. The later rule
   won, on all nine pages. 112 elements were marked to reveal and none
   did. That override is what an emergency looks like when a reveal
   fails closed and somebody turns it off rather than gates it. The kit
   gates it on html.gf-rev-on instead, so it cannot fail closed. */

html.gf-rev-on .d1 { transition-delay: .12s; }
html.gf-rev-on .d2 { transition-delay: .25s; }
html.gf-rev-on .d3 { transition-delay: .38s; }
html.gf-rev-on .d4 { transition-delay: .52s; }

@media (prefers-reduced-motion: reduce) {
  html.gf-rev-on .rev, html.gf-rev-on .rv, html.gf-rev-on .reveal,
  html.gf-rev-on .gf-reveal > *,
  html.gf-rev-on .d1, html.gf-rev-on .d2,
  html.gf-rev-on .d3, html.gf-rev-on .d4 {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HEADER BAR · transparent on entry, a scrim once you scroll
   ─────────────────────────────────────────────────────────────────────
   Taken from aiocircle.com, which Patrick named as correct on
   2026-09-15. Measured off the live .lx-header rather than invented:
     entry   background rgba(0,0,0,0) · no blur · transparent border
     scroll  ground at .86 · blur(16px) saturate(1.1) · gold hairline
     move    background .4s, border-color .4s, backdrop-filter .4s

   WHY THIS WAS THE LAST PIECE OF DRIFT. The kit owned tokens, the mark
   animation, media controls, the reveal and lazy video, and it styled
   the header bar with ZERO rules. Every site owned its own, so seven
   properties ran four different entry behaviours:
     AIO SCLI   transparent, then a scrim. Correct.
     CGTI DDIF  a scrim from the first frame
     MEVO       toggles the class, nothing responds
     BILS GBX   FULLY OPAQUE at entry and translucent on scroll, which
                is backwards, and is the hard edge over the BILS film
   It ships the gbx-scrolled hook and nothing ever answered it. This is
   the answer.

   THE GROUND COMES FROM THE FORUM. var(--ground) means BILS scrims warm
   and SCLI pine without a per-site rule. --g2 is the one hairline.

   HEIGHT IS NOT SET HERE. Seven properties run 52, 68, 89, 89, 98, 102
   and 131. That is a separate ruling and changing it moves the first
   frame of every site.
   ═══════════════════════════════════════════════════════════════════════ */
.gbx-header, .hdr, .lx-header {
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0) !important;
  transition: background .4s var(--ease, cubic-bezier(.2, .7, .2, 1)),
              border-color .4s var(--ease, cubic-bezier(.2, .7, .2, 1)),
              backdrop-filter .4s var(--ease, cubic-bezier(.2, .7, .2, 1)) !important;
}

.gbx-header.gbx-on-light, .hdr.gbx-on-light, .lx-header.gbx-on-light,
.gbx-header.gbx-scrolled, .hdr.gbx-scrolled, .lx-header.gbx-scrolled {
  /* the solid ground first, for anything without color-mix. That is what
     these headers already served, so the fallback is today's behaviour. */
  background: var(--ground, #151313) !important;
  background: color-mix(in srgb, var(--ground, #151313) 86%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  border-bottom: 1px solid var(--g2, rgba(186, 153, 51, .236)) !important;
}

/* A header that is transparent at entry has to SIT OVER the film, not
   above it. BILS and gbxcircle are sticky, so they hold their own space
   and the hero starts below them, which would show the page floor in the
   gap rather than the footage. */
.gbx-header { position: fixed !important; top: 0; left: 0; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .gbx-header, .hdr, .lx-header { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HEADER · size, sub-header and position · AIO's, ruled estate wide
   ─────────────────────────────────────────────────────────────────────
   Proven on BILS first, approved by Patrick 2026-09-15, then bibled here.
   Values measured off live aiocircle.com at 1440x900, not invented.

     bar      padding 21px 89px · justify-content space-between
     nav      centred between the lockup and the CTA
     item     12px · 300 · .12em · lowercase · padding 22px 0
     panel    14px 0 · blur(18px) · items .14em

   12px, NOT AIO's 10px. Patrick ruled it up for an older readership and
   the reason is x-height, not nominal size. The three house faces measure
   0.52 Helvetica Neue, 0.46 Jost, 0.39 Cormorant, so the same number
   renders three different sizes. Jost at 10px puts only 4.6px of ink on
   screen. 12px gives 5.52, a fifth more, and still sits at 63 percent of
   body copy at 17px Helvetica Neue, which measures 8.77. 16 or 17px would
   have been 84 to 89 percent and the navigation would have competed with
   the argument. WCAG sets no minimum font size; the 16px convention is
   for body copy, which this estate already meets.

   CENTRING NEEDS THE AUTO MARGINS, not space-between alone. .gbx-nav
   carried a fixed margin-left that pinned it beside the lockup while the
   CTA carried margin-left:auto and ate the rest. Auto on both sides of
   the nav centres it BETWEEN the brand and the CTA, which is what AIO
   does: its nav centre sits at 689 on a 1440 page, 31px left of true
   centre, for exactly that reason.

   THREE VOCABULARIES. .gbx-* on BILS and gbxcircle, .hdr with .nav-top
   and .nav-dd on CGTI, DDIF and MEVO, and bare .ni and .dd on SCLI. All
   keyed, and the SCLI ones scoped under .hdr so a bare .dd elsewhere on a
   page is never touched.

   MOBILE IS BIBLE AND IS NOT TOUCHED. Everything sits above 900px. Below
   it every site keeps the height, padding, drawer and arrangement it has
   today. Measured before and after on all six.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  .gbx-header, .hdr {
    padding: 21px 89px !important;
    justify-content: space-between !important;
    /* CGTI pinned height:89px and MEVO and SCLI pin their own. With
       border-box that caps the bar no matter what the padding says, which
       is why the first pass left 107 / 89 / 89 / 68 / 68 standing with
       every other value already identical. The bar sizes to what it
       holds: 21 + 65 + 21. */
    height: auto !important;
  }

  .gbx-nav, .hdr-nav, .hdr > .nav {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .gbx-cta, .hdr-cta, .hdr-req { margin-left: 0 !important; }

  .gbx-nav-top, .nav-top, .hdr .ni > a {
    font-size: 12px !important;
    letter-spacing: .12em !important;
    /* VERTICAL ONLY. This is what makes the bar one height: the padding
       on the bar is the same everywhere but the item inside it was not,
       22px on BILS, 20 on DDIF, 17 on CGTI and MEVO, none on SCLI. That
       is where the 107 / 89 / 89 / 68 / 68 spread came from, not the bar.
       Horizontal is left alone: CGTI and MEVO carry a 26px right padding
       that spaces their items, and wiping it would collide them. */
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  /* SCLI ONLY, and scoped deliberately. Its nav links carry no class and
     are inline, where vertical padding does not affect layout: its nav
     measured 21px tall while its own items measured 62, which is why it
     sat at 68 when the other four reached 107.
     BLANKET display:block WAS WRONG AND MEASURED SO. BILS took it and
     went 107 to 120, because .gbx-nav-top.gated is a flex box holding the
     key glyph beside the label and block dropped the glyph onto its own
     line. The four that already compute block need nothing. */
  .hdr .ni > a { display: block !important; }

  .gbx-nav-dd, .nav-dd, .hdr .dd {
    padding: 14px 0 !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  .gbx-nav-dd a, .nav-dd a, .hdr .dd a { letter-spacing: .14em !important; }
}

/* ══ MOBILE HEADER · one arrangement, all six ═══════════════════════════
   Ruled 2026-09-15. Measured at 390x844 the six headers were six different
   headers: 52, 58, 58, 68, 101 and 103 tall, with side padding from 13px to
   89px. CGTI and DDIF already ran the compact one and it is the reference.

     height     58   ·  14px top and bottom against a 30px mark
     padding    14px 22px
     mark       hard left, 44px of tap area around a 30px glyph
     burger     hard right, 44px
     CTA        between them

   The burger is placed with order, not by moving a tag. DDIF, SCLI and MEVO
   put it before the CTA in the markup, which landed DDIF's at x=103 and
   SCLI's at x=189, mid header, where every other forum has it hard right.
   Ordering fixes all three without touching their HTML.

   This supersedes "mobile is bible" for the header only, on Patrick's ruling.
   Everything below the header is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gbx-header, .hdr {
    padding: 14px 22px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    /* The hairline is present at rest and transparent, so the scrolled state
       only changes its colour. Three pages carried it and the rest did not,
       which made them 59 against 58 and gave every other page a 1px jump the
       moment it scrolled. Declaring it here removes both. */
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    /* NEVER WIDER THAN THE SCREEN. left:0 right:0 sizes a fixed box to its
       containing block, and on a page whose content overflows that is the
       document, not the viewport. AIO's pages overflow, so its header rendered
       491px wide on a 375px screen and the burger, placed hard right by the
       rule below, landed at 477px: off screen and unreachable. Caught
       2026-09-16 by measuring the old kit and the new one side by side on the
       same pages, which is the only way to tell a fault you inherited from one
       you introduced. This one was mine. */
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Direct children only. On CGTI, DDIF, MEVO and gbxcircle the header's own
     child is .hdr-brand and .hdr-mark is an svg nested inside it, so putting
     margin-right:auto on .hdr-mark pushed the wordmark inside the brand
     instead of pushing the burger to the edge. That is what left the advisory
     page's burger at x=179. */
  .gbx-header > .gbx-lockup,
  .hdr > .hdr-brand, .hdr > .hdr-mark, .hdr > .mark {
    order: 0 !important; margin-right: auto !important;
  }
  .gbx-header > .gbx-cta,
  .hdr > .hdr-cta, .hdr > .hdr-req, .hdr > .hcta { order: 1 !important; }
  /* SCLI alone hid its CTA below 900px, so the one route to the gate on a
     phone was inside the drawer. The other five carry it in the bar. Scoped
     to .hcta, which only SCLI uses, so nothing else can be unhidden by it. */
  .hdr > .hcta { display: inline-flex !important; }
  .gbx-header > .gbx-hamburger,
  .hdr > .hdr-burger, .hdr > .burger { order: 2 !important; }
}

/* ══ SOUND · one toggle, every film that has a track ═══════════════════
   Measured 2026-09-15: 41 of 52 video elements in the estate carry a real
   audio track and six pages had a control. Roughly 35 films were playing
   muted with audio no visitor could reach.

   The treatment is the gate's, which was the most restrained of the four in
   use: no border, no fill, 9px at .22em, dim until hover. The bordered gold
   box on the agenda pages is NOT this component. It drives a Vimeo player
   through their SDK, not a <video>, so it stays where it is.

   A film is marked with data-gbx-sound, written by a build pass that probes
   the file for an audio stream. x-estate re-probes and blocks a film that
   has a track and no mark, so this cannot quietly fall behind the media.
   ═══════════════════════════════════════════════════════════════════════ */
/* The control floats over footage, so it cannot take its legibility from the
   page. On cgti-who-attends the gate read it at 1.07:1: the button sits over
   the video correctly, but the nearest painted background up the tree is that
   page's linen, and a light hero frame would have made that real rather than
   theoretical. venue.html had already solved this with a scrim, so this is
   that answer with the gate page's restraint on the type. */
.gbx-sound {
  position: absolute; bottom: 21px; right: 21px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(21, 19, 19, .9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 0; padding: 8px 13px;
  cursor: pointer;
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-weight: 300; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(243, 246, 249, .72);
  transition: color .3s var(--ease, cubic-bezier(.2, .7, .2, 1)),
              background .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.gbx-sound:hover, .gbx-sound:focus-visible { background: rgba(21, 19, 19, .96); }
.gbx-sound:hover, .gbx-sound:focus-visible { color: var(--gold, #ba9933); }
.gbx-sound .gbx-sound-wave { width: 11px; height: 11px; flex-shrink: 0; opacity: .6; transition: opacity .3s; }
.gbx-sound:hover .gbx-sound-wave { opacity: 1; }
/* the second arc is the only thing that changes between the two states, so
   off and on read as one control rather than two icons */
.gbx-sound .gbx-sound-arc { opacity: 0; transition: opacity .3s; }
.gbx-sound[aria-pressed="true"] .gbx-sound-arc { opacity: 1; }
.gbx-sound[aria-pressed="true"] { color: var(--gold, #ba9933); }
@media (max-width: 900px) { .gbx-sound { bottom: 14px; right: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .gbx-sound, .gbx-sound .gbx-sound-wave, .gbx-sound .gbx-sound-arc { transition: none; }
}

/* ══ TESTIMONIALS · expand, and a way out to Vimeo ══════════════════════
   The reel embeds carried allow="fullscreen" but not the allowfullscreen
   attribute, and none of them offered a route to the video's own page. Both
   are now on every testimonial embed. The decorative background loop on
   bils-who-attends is deliberately excluded: background=1, muted, looping,
   and not something anyone is meant to sit and watch.
   ═══════════════════════════════════════════════════════════════════════ */
.gbx-vimeo-link {
  display: inline-block; margin-top: 11px;
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-weight: 300; font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(243, 246, 249, .52);
  transition: color .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.gbx-vimeo-link:hover, .gbx-vimeo-link:focus-visible { color: var(--gold, #ba9933); }

/* A film riding a marquee cannot hold a toggle, so it gets a way to be
   opened properly instead: click the card, the film opens full size with the
   browser's own controls and its sound. Esc or the ground closes it. */
.gbx-expandable { cursor: pointer; }
.gbx-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  padding: 55px 34px;
  background: rgba(21, 19, 19, .96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.gbx-lightbox.gbx-open { display: flex; }
.gbx-lightbox video { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.gbx-lightbox-close {
  position: absolute; z-index: 2;
  top: calc(21px + env(safe-area-inset-top, 0px));
  right: calc(21px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gbx-lightbox-close span {
  position: absolute; display: block; width: 21px; height: 1px;
  background: var(--gold, #ba9933);
}
.gbx-lightbox-close span:first-child { transform: rotate(45deg); }
.gbx-lightbox-close span:last-child  { transform: rotate(-45deg); }
@media (max-width: 900px) { .gbx-lightbox { padding: 55px 14px; } }

/* ══ WORDMARK · one treatment, four vocabularies ═══════════════════════
   theLoroX PART 23 ruled the header wordmark 15px uppercase at --ls-mark
   0.40em, shrinking to 13px / .3em below 520px. Four class names carry it
   across seven properties, and only two of them had the mobile half:

     .hdr-word         CGTI DDIF      shrank
     .hdr-mark-label   MEVO           shrank, after PART 23 fixed it hiding
     .gbx-wm           BILS gbxcircle did NOT, stayed 15px on a 390px screen
     .mark text        SCLI           its own, never written down

   The desktop values already agreed everywhere, measured on live: 15px, 6px
   tracking, uppercase, cashmere. Only the mobile step was missing, and only
   from the vocabularies nobody had reconciled. It is one rule now, so the
   next forum to adopt any of these four names gets both halves.
   ═══════════════════════════════════════════════════════════════════════ */
/* 768px, not the 520px PART 23 records. CGTI and DDIF have shrunk at 768 all
   along, in cgti-nav.css and ddif-nav.css, and live is truth over the written
   ruling. At 520 the band between 520 and 768 would have had CGTI and DDIF
   small while BILS, gbxcircle and SCLI stayed large, which is a new split
   rather than the fix. */
@media (max-width: 768px) {
  .gbx-wm, .hdr-word, .hdr-mark-label, .hdr > .mark {
    font-size: 13px;
    letter-spacing: .3em;
  }
}

/* ══════════════════════════════════════════
   THE SECOND HERO · the title block that follows the entry film
   ══════════════════════════════════════════
   Ruled 2026-09-16. AIO is the reference, measured at 1440x900 on the
   running site, not read from its stylesheet.

   Before this rule the estate held seven different second heroes. The
   headline ran 52, 52, 92, 92, 104, 104 and 120px; its left edge landed at
   44, 120, 130, 155, 185, 185 and 274; and the second line was a block on
   three properties and inline on four, which is the difference between a
   two line statement and a sentence that wraps wherever the column ends.

   AIO:  h1 left 130 · 92px · line-height 0.92 · tracking -0.015em ·
         second line block, 6px under the first.

   Specificity is deliberate. Every selector here is at least (0,2,0),
   either by descent or by a doubled class, because five of the seven
   properties carry a second <style> block AFTER the kit link and a plain
   (0,1,0) rule would lose to it on document order. No !important: a page
   that needs to depart from this can still do so with one more class. */

.hero-title.hero-title,
.hero-text.hero-text,
.entry.entry {
  padding: 89px 89px 55px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* One element carries the padding and the column (BILS, CGTI, DDIF, SCLI).
   The cap is 1180 plus the 178 of side padding, so the TEXT column measures
   1180 and the left edge lands at 130, the same as AIO. Capping at a flat
   1180 here would have pushed the text in to 219. */
.hero-title.hero-title,
.entry.entry { max-width: calc(1180px + 178px); }

/* Two elements carry it (MEVO, gbxcircle): the outer pads full bleed, the
   inner holds the column. :has() keeps the single element case above from
   double capping. */
.hero-title.hero-title:has(> .hero-title-inner),
.hero-text.hero-text:has(> .hero-text-inner) { max-width: none; }

.hero-title .hero-title-inner,
.hero-text .hero-text-inner {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* The headline. Four vocabularies, one type. */
.hero-title .hero-h1,
.hero-title .entry-h,
.hero-title .dh,
.hero-title > h1,
.hero-text .hero-h1,
.hero-text > h1,
.entry .entry-h,
.entry > h1 {
  font-family: var(--serif, 'Cormorant', Georgia, serif);
  font-weight: 300;
  font-size: clamp(46px, 7vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--cashmere, #F3F6F9);
  margin: 0;
  max-width: none;
  text-wrap: balance;
}

/* The second line is a block on its own, not a phrase that wraps. This is
   the single most visible half of the ruling: on CGTI, DDIF, MEVO and
   gbxcircle the italic ran inline and broke wherever the column ran out. */
.hero-title .hero-h1 em,
.hero-title .entry-h em,
.hero-title .dh em,
.hero-title > h1 em,
.hero-text .hero-h1 em,
.hero-text > h1 em,
.entry .entry-h em,
.entry > h1 em {
  font-style: italic;
  color: var(--gold, #ba9933);
  display: block;
  margin-top: 6px;
}

/* The eyebrow. 55px of air under it, which is what sets the headline's
   vertical position inside the block. */
.hero-title .hero-eyebrow,
.hero-title .hero-pre,
.hero-title .entry-series,
.hero-title .stag,
.hero-text .hero-eyebrow,
.hero-text .hero-pre,
.entry .entry-series {
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #ba9933);
  margin: 0 0 55px;
}

/* The lede, and the tricolon that stands in for it on CGTI, DDIF and MEVO. */
.hero-title .hero-sub,
.hero-title .hero-intro,
.hero-title .hero-lede,
.hero-title .hero-tri,
.hero-title .hero-tricolon,
.hero-text .hero-sub,
.hero-text .hero-intro,
.entry .entry-lede {
  font-family: var(--serif, 'Cormorant', Georgia, serif);
  font-weight: 300;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.42;
  letter-spacing: normal;
  color: var(--dim, rgba(243, 246, 249, .72));
  max-width: 60ch;
  margin: 55px 0 0;
  text-wrap: pretty;
}

/* The stamp. Date, room, audience. Gold on the first clause only, which the
   pages already mark up; this rule sets the type, not the colour split. */
.hero-title .hero-venue,
.hero-title .meta,
.hero-text .hero-venue,
.entry .entry-venue {
  font-family: var(--sans, 'Jost', system-ui, sans-serif);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--dim2, rgba(243, 246, 249, .62));
  margin: 34px 0 0;
}

/* Mobile. The headline floor is already 46px from the clamp; this is the
   frame around it. Matches the 22px side padding the header took on
   2026-09-16 so the wordmark and the headline share one left edge. */
@media (max-width: 900px) {
  .hero-title.hero-title,
  .hero-text.hero-text,
  .entry.entry { padding: 55px 22px 34px; }

  .hero-title .hero-eyebrow,
  .hero-title .hero-pre,
  .hero-title .entry-series,
  .hero-title .stag,
  .hero-text .hero-eyebrow,
  .hero-text .hero-pre,
  .entry .entry-series { margin-bottom: 34px; }

  .hero-title .hero-sub,
  .hero-title .hero-intro,
  .hero-title .hero-lede,
  .hero-title .hero-tri,
  .hero-title .hero-tricolon,
  .hero-text .hero-sub,
  .hero-text .hero-intro,
  .entry .entry-lede { margin-top: 34px; }
}

/* ══════════════════════════════════════════
   A SCRIM OVER A FILM MUST NOT TAKE THE CLICK
   ══════════════════════════════════════════
   Ruled 2026-09-17, from Kenzie on live: "the video has a play button but
   once clicked, does nothing. It only plays when you click sound on."

   Measured: on 31 films across all six properties, a click at the centre of
   the film landed on a gradient, not on the film. Chrome never showed it
   because Chrome autoplays and draws no control. Safari, when autoplay does
   not start, draws its own play button on the film, and that button sat
   under a decorative overlay with pointer-events:auto. The control was
   visible, correct and unreachable.

   Every one of them is decoration: an empty div after the video, or an
   ::after gradient on the frame. Neither has anything to click. */

video ~ div:empty,
.hero-video-grad, .hero-grad, .hero-bg-grad, .gate-band-grad,
.hero::after, .hero-media::after, .hero-vid-wrap::after,
.pg-hero::after, .hero-video::after, .gate-band::after,
.reel-frame::after, .bc-frame::after {
  pointer-events: none;
}

/* And the film itself must be able to take its own click. BILS wraps its
   hero in .hero-media-wrap{pointer-events:none}, which the video inherits,
   so the click fell straight through to the wrapper below. Scoped to films
   that carry a sound route rather than every video, because a decorative
   film inside a card must keep letting the card's link have the click. */
video[data-gbx-sound], video[data-gbx-expand], video.gbx-clickable {
  pointer-events: auto;
}

/* ══════════════════════════════════════════
   DROPDOWN ITEMS ARE ROWS, ON EVERY VOCABULARY
   ══════════════════════════════════════════
   Reported by Kenzie, 2026-09-17: SCLI's dropdown items are "stuck to the
   left of the drop down box, unlike our other sites".

   Measured at 1440. Every other property renders its items as full width
   rows: display block or flex, 182 to 186px wide, padding 9 to 10px by 24px.
   SCLI rendered them display:inline at 34 to 64px wide with no padding, so
   three links sat side by side on one line and overflowed a 190px panel.

   The cause is that the kit's rule named .gbx-nav-dd only. CGTI, DDIF and
   MEVO use .nav-dd and happened to carry an equivalent rule in their own
   nav stylesheets; SCLI uses .dd and carried nothing. One rule, all three
   vocabularies, so a fourth page cannot inherit the gap. */

.gbx-nav-dd > a,
.gbx-header .nav-dd > a, .hdr .nav-dd > a,
.gbx-header .dd > a, .hdr .dd > a {
  display: block;
  width: auto;
  padding: 10px 24px;
  text-align: left;
  white-space: nowrap;
}