/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — SYSTEM
   The restyle layer. Loads AFTER site.css and AFTER tokens.css and
   re-dresses everything the two builders share: chrome, type, buttons,
   surfaces, media frames, section rhythm, focus, transitions.

   Rule of the house: no page stylesheet re-declares a colour, a font,
   a duration or an easing. Everything comes from tokens.css.
   ─────────────────────────────────────────────────────────────────── */

/* ── BASE ──────────────────────────────────────────────────────── */
html,body{
  background:var(--gb-black);
  color:var(--gb-bone);
  font-family:var(--f-text);
  font-size:16px;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}
body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

::selection{background:var(--gb-ember);color:#0A0704}

/* the grain stays, but as a whisper — the old 8.5% read as dirt */
body::before{opacity:.032!important;mix-blend-mode:soft-light!important}
body.has-reel::before{opacity:.028!important}
body::after{
  background:radial-gradient(ellipse at 50% 42%,transparent 62%,rgba(0,0,0,.42) 100%)!important;
}

/* ── TYPE ──────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:560;
  letter-spacing:var(--tr-head);
  line-height:var(--lh-head);
  text-wrap:balance;
  margin:0 0 var(--s-5);
}
h1{
  font-size:var(--t-xxl);
  font-weight:600;
  letter-spacing:var(--tr-mega);
  line-height:.98;
  margin:0 0 var(--s-5);
}
h2{font-size:var(--t-xl);font-weight:580}
h3{font-size:var(--t-lg);font-weight:560}
h4{font-size:var(--t-md);font-weight:600;letter-spacing:-.015em}

p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--gb-bone-soft);text-wrap:pretty}
p strong,b{font-weight:600;color:var(--gb-bone)}

/* mono kicker — wide, small, quiet. Replaces every Space Mono use. */
.kicker,.gb-kicker,.wm-tag,.dock-kicker,.top .live,.lang,.nav a,.nav a b,.nav a small{
  font-family:var(--f-mono)!important;
}
.kicker,.gb-kicker{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  /* --gb-mute (.40) fails 4.5:1 at label size; labels use --gb-dim */
  color:var(--gb-dim);
  margin:0 0 var(--s-4);
  display:flex;align-items:center;gap:.6rem;
}
.kicker::before,.gb-kicker::before{
  content:"";width:1.6rem;height:1px;background:var(--gb-ember);flex:none;
}
.gb-kicker.plain::before,.kicker.plain::before{display:none}

/* the one editorial accent — an italic serif line, used sparingly */
.gb-serif,em.gb-serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.gb-lede{
  font-size:var(--t-md);line-height:1.5;color:var(--gb-bone-soft);
  max-width:46ch;letter-spacing:-.015em;
}

/* ── LINKS + FOCUS ─────────────────────────────────────────────── */
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gb-ember);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.gb-link{
  color:var(--gb-bone);text-decoration:none;position:relative;
  padding-bottom:.12em;
}
.gb-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.32;
  transform-origin:right;transform:scaleX(1);
  transition:transform var(--d-sm) var(--e-out),opacity var(--d-sm) var(--e-out);
}
.gb-link:hover::after,.gb-link:focus-visible::after{opacity:1;transform-origin:left}

/* ── SHELL / RHYTHM ────────────────────────────────────────────── */
.gb-shell{width:var(--shell);margin-inline:auto}
.gb-shell-narrow{width:var(--shell-narrow);margin-inline:auto}
.gb-section{position:relative;padding-block:var(--section-y)}
.gb-rule{height:1px;background:var(--gb-line);border:0;margin:0}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.play,.gb-btn{
  font-family:var(--f-text)!important;
  font-size:.86rem!important;
  font-weight:520!important;
  letter-spacing:-.005em!important;
  text-transform:none!important;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:50px;padding:0 1.5rem!important;
  border-radius:var(--r-pill)!important;
  border:1px solid var(--gb-line-strong)!important;
  background:transparent!important;
  color:var(--gb-bone)!important;
  box-shadow:none!important;
  position:relative;overflow:hidden;
  transition:background var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out),
             color var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out);
  will-change:transform;
}
.play::after,.gb-btn::after{display:none!important}
.play::before,.gb-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gb-bone);
  transform:translate3d(0,101%,0);
  transition:transform var(--d-md) var(--e-out);
}
.play:hover,.play:focus-visible,.gb-btn:hover,.gb-btn:focus-visible{
  transform:translate3d(0,-2px,0);
  background:rgba(239,235,227,.08)!important;
  border-color:var(--gb-bone)!important;
  color:var(--gb-bone)!important;
}
.play.solid,.gb-btn.solid{
  background:var(--gb-bone)!important;color:#0A0B0D!important;
  border-color:var(--gb-bone)!important;font-weight:580!important;
}
.play.solid:hover,.play.solid:focus-visible,.gb-btn.solid:hover,.gb-btn.solid:focus-visible{
  background:var(--gb-ember)!important;border-color:var(--gb-ember)!important;color:#100603!important;
}
.play.ember,.gb-btn.ember{
  background:var(--gb-ember)!important;border-color:var(--gb-ember)!important;color:#120704!important;font-weight:560!important;
}
.play.ember:hover,.gb-btn.ember:hover{background:var(--gb-ember-lift)!important;border-color:var(--gb-ember-lift)!important}
.plays{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-5)}

/* an arrow that actually moves */
.gb-btn .arrow,.play .arrow{
  display:inline-block;transition:transform var(--d-sm) var(--e-out);
}
.gb-btn:hover .arrow,.play:hover .arrow{transform:translateX(4px)}

/* ── CHROME: header ────────────────────────────────────────────── */
.top{
  padding:var(--s-3) var(--gutter)!important;
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:1px solid transparent!important;
  transition:background var(--d-md) var(--e-out),border-color var(--d-md) var(--e-out),
             backdrop-filter var(--d-md) var(--e-out),transform var(--d-md) var(--e-out);
}
html.gb-scrolled .top{
  background:linear-gradient(180deg,rgba(7,8,10,.86),rgba(7,8,10,.55))!important;
  backdrop-filter:blur(16px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
  border-bottom-color:var(--gb-line-soft)!important;
}
.brand{
  font-family:var(--f-display)!important;
  font-weight:700!important;
  font-size:clamp(1.22rem,2.2vw,1.6rem)!important;
  letter-spacing:-.035em!important;
  line-height:1!important;
  min-height:44px!important;
  color:var(--gb-bone);
}
.brand span{color:inherit!important;opacity:1!important}
.brand:hover{color:var(--gb-ember)!important;transition:color var(--d-sm) var(--e-out)}

.nav-toggle{
  border:1px solid var(--gb-line-strong)!important;border-radius:var(--r-pill)!important;
  width:46px!important;height:46px!important;
  background:rgba(239,235,227,.03);
  transition:background var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out);
}
.nav-toggle:hover{background:rgba(239,235,227,.09);border-color:var(--gb-bone)!important}
.nav-toggle span{width:17px!important;height:1.5px!important;background:var(--gb-bone)!important}

.lang{
  font-size:.66rem!important;letter-spacing:.16em!important;font-weight:500!important;
  color:var(--gb-dim)!important;border-radius:var(--r-pill)!important;
  min-width:44px!important;min-height:44px!important;
  transition:color var(--d-sm) var(--e-out),background var(--d-sm) var(--e-out);
}
.lang.on{background:rgba(239,235,227,.1)!important;color:var(--gb-bone)!important}
.lang:hover{color:var(--gb-bone)!important}

/* ── THE DRAWER — an opaque sheet, not a tint ──────────────────────
   It shipped at 92% over a blur. On a 390 px phone that is not a sheet:
   the wall of cards reads through the list, the wordmark shows as a cut
   "GL" under the panel, and the EN/FR pair ghosts behind the links —
   worse still wherever the browser drops backdrop-filter, which leaves
   the menu sitting on live page content. Three changes, no new markup:
   the panel is opaque, the rest of the page is dimmed by a real scrim,
   and the header rides above the drawer so the wordmark and the close
   control stay whole instead of being sliced by the panel edge. */
html.nav-open::before{
  content:"";position:fixed;inset:0;z-index:44;
  /* .76 still let the hero heading read (faded) through the strip of page
     left uncovered by the drawer on a 390px phone — a stranger read that
     as "ghosting" (round-2 bugfix, 2026-09-18). .96 was still 4% short:
     round-3 cold review (Grok, same day) could still read stacked hero
     fragments through that strip — a night plate under a "near-opaque"
     scrim still has enough headline luminance to leak. Fully opaque
     closes it; there is nothing behind this scrim worth seeing anyway
     while the menu is open. */
  background:rgba(4,5,8,1);pointer-events:none;
}
@media (min-width:1100px){
  html.nav-open::before{display:none}
}
html.nav-open header.top{z-index:46}

.nav{
  width:min(30rem,90vw)!important;
  background:#090A0D!important;
  backdrop-filter:blur(26px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(130%)!important;
  border-left:1px solid var(--gb-line)!important;
  padding:6.4rem var(--s-5) var(--s-6)!important;
  gap:var(--s-1)!important;
}
.nav a{
  font-family:var(--f-display)!important;
  font-size:clamp(1.5rem,4.6vw,2rem)!important;
  font-weight:560!important;
  letter-spacing:-.03em!important;
  text-transform:none!important;
  min-height:60px!important;
  padding:.5rem .85rem!important;
  border-radius:var(--r-md)!important;
  color:var(--gb-bone-soft)!important;
  position:relative;
}
.nav a b{font-family:inherit!important;font-size:inherit!important;letter-spacing:inherit!important;font-weight:inherit!important}
.nav a small{
  font-family:var(--f-mono)!important;font-size:.6rem!important;letter-spacing:.2em!important;
  text-transform:uppercase!important;color:var(--gb-mute)!important;
}
.nav a:hover,.nav a:focus-visible{background:rgba(239,235,227,.06)!important;color:var(--gb-bone)!important}
.nav a.on{background:transparent!important;color:var(--gb-bone)!important}
.nav a.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.6rem;border-radius:2px;background:var(--gb-ember);
}
.nav a.on small{color:var(--gb-ember)!important;opacity:1}

/* scroll rail — a hairline of progress under the header */
body::marker{content:none}
.gb-rail{
  position:fixed;left:0;top:0;height:2px;z-index:calc(var(--z-chrome) + 2);
  width:100%;transform-origin:0 50%;
  transform:scaleX(var(--gb-progress,0));
  background:linear-gradient(90deg,var(--gb-ember),var(--gb-ember-lift));
  pointer-events:none;
}

/* ── SURFACES — "no cheap cards" ───────────────────────────────
   A card is not a 1px rectangle around text. It is a piece of
   material: media first, a soft ground, one hairline, real depth
   on hover, and type that breathes. */
.gb-surface,.card{
  position:relative;
  border:0!important;
  border-radius:var(--r-lg)!important;
  background:linear-gradient(180deg,rgba(23,27,33,.72),rgba(11,13,16,.72))!important;
  padding:var(--s-6) var(--s-5)!important;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--d-md) var(--e-out),background var(--d-md) var(--e-out);
}
.gb-surface::before,.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--gb-line);
  -webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.25));
          mask:linear-gradient(180deg,#000,rgba(0,0,0,.25));
}
.gb-surface::after,.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(239,235,227,.28),transparent);
}
.card h3{font-family:var(--f-display)!important;font-weight:560!important;letter-spacing:var(--tr-head)!important;font-size:var(--t-lg)!important}
a.card:hover,.card-hit:hover .card,.gb-surface.is-link:hover{
  transform:translate3d(0,-4px,0);
  background:linear-gradient(180deg,rgba(30,35,42,.82),rgba(14,17,21,.82))!important;
}
.card-hit:hover h2,.card-hit:hover h3{text-decoration:none!important}

/* the alternative to a card: a media plate with type on the material */
.gb-plate{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:var(--gb-ink);
  box-shadow:var(--gb-shadow-soft);
}
.gb-plate > img,.gb-plate > video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--e-out),filter var(--d-lg) var(--e-out);
}
.gb-plate:hover > img,.gb-plate:hover > video{transform:scale(1.06)}
.gb-plate-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,.05) 0%,rgba(7,8,10,.3) 46%,rgba(7,8,10,.88) 100%);
}
.gb-plate-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:var(--s-6) var(--s-5)}

/* ── MEDIA FRAMES ──────────────────────────────────────────────── */
.gb-media{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:#000;
  box-shadow:var(--gb-shadow-soft);
}
.gb-media video,.gb-media img{display:block;width:100%;height:100%;object-fit:cover}
.gb-media.bleed{border-radius:0;box-shadow:none}
.gb-ar-16x9{aspect-ratio:16/9}
.gb-ar-4x5{aspect-ratio:4/5}
.gb-ar-9x16{aspect-ratio:9/16}
.gb-ar-1x1{aspect-ratio:1/1}

/* ── FOOTER ────────────────────────────────────────────────────── */
footer{
  padding:var(--s-9) var(--gutter) var(--s-8)!important;
  border-top:1px solid var(--gb-line)!important;
  color:var(--gb-dim)!important;
  font-size:var(--t-sm)!important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))!important;
  position:relative;z-index:var(--z-page);
}
footer a{color:var(--gb-bone-soft)!important;text-decoration:none}
footer a:hover{color:var(--gb-ember)!important}
footer [data-gbx-legal],footer .gbx-foot-mark{color:var(--gb-mute)!important;font-size:.78rem!important}
.foot-nav a,footer [data-gbx-legal] a{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:.2rem}

/* ── DOCK (radio) ──────────────────────────────────────────────── */
.dock{
  background:rgba(9,10,13,.9)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
  border-top:1px solid var(--gb-line)!important;
}
.dock-kicker{font-size:.6rem!important;letter-spacing:.2em!important;color:var(--gb-ember)!important;text-transform:uppercase}
.dock-title{font-family:var(--f-display)!important;font-weight:560!important;letter-spacing:-.02em!important;font-size:1rem!important;color:var(--gb-bone)}
.dock-stage{border:0!important;border-radius:var(--r-sm)!important;overflow:hidden}
.dock-go,.dock-stop,.dock-open{
  font-family:var(--f-text)!important;font-weight:520!important;letter-spacing:0!important;
  border-radius:var(--r-pill)!important;min-height:44px;padding-inline:1rem!important;
  border:1px solid var(--gb-line-strong)!important;background:transparent!important;color:var(--gb-bone)!important;
}
.dock-go{background:var(--gb-bone)!important;color:#0A0B0D!important;border-color:var(--gb-bone)!important}
.dock-stop{background:var(--gb-ember)!important;color:#120704!important;border-color:var(--gb-ember)!important;font-weight:560!important}

/* ── PAGE TRANSITION ───────────────────────────────────────────── */
.gb-veil{
  position:fixed;inset:0;z-index:var(--z-over);pointer-events:none;
  background:var(--gb-black);
  opacity:1;
  transition:opacity .5s var(--e-out);
}
body.gb-entered .gb-veil{opacity:0}
body.gb-leaving .gb-veil{opacity:1;transition:opacity .3s var(--e-inout)}
html:not(.gb-motion) .gb-veil{display:none}

/* ── UTILITIES ─────────────────────────────────────────────────── */
.gb-eyebrow-num{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;color:var(--gb-ember);
}
.gb-hr-label{
  display:flex;align-items:center;gap:var(--s-4);
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--gb-mute);
}
.gb-hr-label::after{content:"";height:1px;flex:1;background:var(--gb-line)}

@media (max-width:768px){
  .gb-surface,.card{padding:var(--s-5) var(--s-4)!important}
  footer{padding:var(--s-8) var(--gutter) var(--s-7)!important}
}

/* ── LEGACY DISPLAY TYPE, RE-TRACKED ───────────────────────────────
   Every V1 rule that asked for Anton is now served the V2 grotesk
   (see the alias faces at the top of site.css). Anton is condensed and
   wanted POSITIVE tracking; a grotesk at display size wants negative.
   Without this, un-migrated pages read as 2014 posters in a 2026 face. */
h1,
.brand,.station h2,.door b,.row h2,.row h2 b,
.poster .ph,.poster figcaption strong,.poster .go i,
.ep strong,.card h3,.news-lead,.web-grid span,
.wall-card b,.nf-tile b,.hype-card h2,.loi-ex h3,
.mag-hero figcaption strong,.desk b,.reel h2,.reel b,
.showcase-cta h2,.crew-manifesto>h2,.crew-principles b,
.claudine-profile h2,.wr-price-cut>strong,
.howto-reader-stage h1,.howto-reader-stage h2{
  letter-spacing:-.028em!important;
  line-height:1.02;
  text-wrap:balance;
}
.card h3,.ep strong,.poster figcaption strong,.wall-card b,.nf-tile b,
.web-grid span,.desk b,.hype-card h2{line-height:1.12}


/* ── DESKTOP NAV ───────────────────────────────────────────────────
   A hamburger on a 1440 screen is a phone pattern wearing a suit. From
   1100 px the six destinations sit in the bar; the drawer stays for the
   phone, and chrome.js's open/close class simply has nothing to do. */
@media (min-width:1100px){
  .nav-toggle{display:none!important}
  header.top .nav,
  html.nav-open header.top .nav{
    position:static!important;
    display:flex!important;flex-direction:row!important;
    width:auto!important;max-width:none!important;height:auto!important;
    padding:0!important;margin:0!important;gap:var(--s-1)!important;
    background:transparent!important;border:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:none!important;opacity:1!important;visibility:visible!important;
    overflow:visible!important;box-shadow:none!important;
    align-items:center;justify-content:flex-end;
  }
  header.top .nav a{
    padding:.5rem .8rem!important;border:0!important;
    font-size:.68rem!important;letter-spacing:.16em!important;
    border-radius:var(--r-pill)!important;
  }
  header.top .nav a small{display:none!important}
  html.nav-open{overflow:auto!important}
}

/* ── NAV SPLIT — Creations: one word, one small door panel ───────────
   "Creations" still clicks straight through to websites.html (the
   default door). The caret opens a two-line panel with the two doors
   named on it, so the funny films are never more than one extra click
   from any page: nav, always. */
.nav-split{display:flex;flex-direction:column;position:relative}
.nav-split-head{display:flex;align-items:center}
.nav-split-link{flex:1 1 auto}
.nav-split-toggle{
  display:inline-flex!important;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 auto;
  border:0!important;background:transparent!important;color:var(--gb-mute)!important;
  cursor:pointer;border-radius:var(--r-pill)!important;padding:0!important;
  transition:background var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out);
}
.nav-split-toggle:hover,.nav-split-toggle:focus-visible{background:rgba(239,235,227,.06)!important;color:var(--gb-bone)!important}
.nav-split-toggle svg{width:11px;height:8px;transition:transform .2s var(--e-out)}
.nav-split.is-open .nav-split-toggle svg{transform:rotate(180deg)}
.nav-split-panel{display:none;flex-direction:column}
.nav-split.is-open .nav-split-panel{display:flex}
header.top .nav .nav-panel-link{
  font-family:var(--f-mono)!important;font-size:.72rem!important;letter-spacing:.1em!important;
  font-weight:500!important;text-transform:uppercase!important;
  color:var(--gb-mute)!important;padding:.4rem .85rem .4rem 1.7rem!important;min-height:40px!important;
}
header.top .nav .nav-panel-link:hover,header.top .nav .nav-panel-link:focus-visible{color:var(--gb-bone)!important}

/* ── THE DRAWER LISTS EVERYTHING · 2026-09-17 ──────────────────────
   On the phone the nav is a full-height sheet with room to spare, so a
   caret that hides three finished rooms behind a second tap is chrome
   for its own sake. Below 1100 px every panel is simply open: the
   drawer lists all nine destinations flat, the carets disappear, and
   the sheet scrolls if a future room ever makes it taller than the
   screen. Desktop keeps the carets — nine words in the bar is a menu. */
@media (max-width:1099.98px){
  .nav{overflow-y:auto!important;overscroll-behavior:contain}
  .nav-split-toggle{display:none!important}
  .nav-split-panel,
  .nav-split:not(.is-open) .nav-split-panel{display:flex!important}
}

@media (min-width:1100px){
  .nav-split-toggle{width:24px;height:24px;min-width:24px;min-height:24px}
  .nav-split-panel{
    position:absolute;top:100%;right:0;margin-top:.5rem;
    min-width:9.5rem;padding:.4rem;border-radius:var(--r-md);
    background:rgba(9,10,13,.96);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
    border:1px solid var(--gb-line);box-shadow:0 18px 40px rgba(0,0,0,.35);
    z-index:calc(var(--z-chrome) + 1);
  }
  header.top .nav .nav-panel-link{
    padding:.55rem .7rem!important;border-radius:var(--r-sm)!important;min-height:38px!important;
  }
}

/* ── CREATIONS SWITCH — Websites | Funny ─────────────────────────────
   Both rooms of the Creations section carry the same two pills, right
   under the header, so whichever door you walked through you always
   see the other one. */
.gb-pillswitch{
  display:flex;gap:.55rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:.85rem var(--gutter);
  background:var(--gb-ink);border-bottom:1px solid var(--gb-line);
  position:relative;z-index:var(--z-page);
}
.gb-pillswitch-item{
  font-family:var(--f-mono)!important;font-size:.72rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--gb-mute)!important;padding:.55rem 1.2rem!important;border-radius:var(--r-pill)!important;
  border:1px solid var(--gb-line);min-height:40px;display:inline-flex;align-items:center;
  transition:color var(--d-sm) var(--e-out),background var(--d-sm) var(--e-out),border-color var(--d-sm) var(--e-out);
}
.gb-pillswitch-item:hover,.gb-pillswitch-item:focus-visible{color:var(--gb-bone)!important;border-color:var(--gb-bone-soft)}
.gb-pillswitch-item.on{background:var(--gb-bone)!important;color:#0A0B0D!important;border-color:var(--gb-bone);font-weight:600!important}


/* ── THE CLOSING MARK ──────────────────────────────────────────────
   A page that ends on six 10 px links ends on nothing. The wordmark
   closes it at the width of the shell, with the tagline under it. */
footer{display:flex;flex-direction:column;gap:var(--s-4)}
.gbx-foot-wordmark{
  order:-1;margin:0 calc(-1 * var(--gutter)) var(--s-2);
  padding-inline:clamp(1rem,3vw,2rem);
  font-family:var(--f-display);font-weight:640;
  font-size:clamp(3.4rem,16vw,14rem);line-height:.82;letter-spacing:-.055em;
  /* a real value: the closing brand statement, not a whisper */
  color:rgba(239,235,227,.18);
  user-select:none;
}
.gbx-foot-tagline{
  order:-1;margin:0 0 var(--s-5);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gb-mute);
}



/* the fixed player dock never sits on top of the last thing on a page */
body:has(.dock) footer{padding-bottom:calc(var(--s-8) + 4.5rem)}


/* small labels never sit at --gb-mute: it is a 3.4:1 colour */
.gb-hr-label,.v2-reel-kicker,.rd-stage-foot,.gbx-foot-tagline,
.v2-proofline span,.rd-fact span,.v2-stat span{color:var(--gb-dim)!important}