/* GBTT site chrome layer, v1 (27 Sep 2026).
   Loaded on every page that uses the shared header, next to tokens.css.
   Additive: it styles the classes site/site-chrome.js adds (gc-*) plus a few
   ticker and sticky-offset rules. Remove the two tags from a page and it is
   exactly as it was. */

/* ── 1. A calmer ticker: pauses when read, stops for reduced motion ── */
.gbtt-v2 .marquee-track:hover,
.gbtt-v2 .marquee-track:focus-within { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gbtt-v2 .marquee-track { animation: none !important; }
  .gbtt-v2 div:has(> .marquee-track) { overflow-x: auto !important; }
}

/* ── 2. Sound switch in the header (off until asked) ── */
.gc-snd {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink, #0B0F14); background: transparent; border: 1px solid var(--rule, #D9D4C6);
  padding: 7px 12px; line-height: 1;
}
.gc-snd:hover { border-color: var(--ink, #0B0F14); }
.gc-snd svg { width: 14px; height: 14px; }
.gc-snd .on { display: none; }
.gc-snd[aria-pressed="true"] { color: var(--paper, #F3EFE6); background: var(--ink, #0B0F14); border-color: var(--ink, #0B0F14); }
.gc-snd[aria-pressed="true"] .on { display: block; }
.gc-snd[aria-pressed="true"] .off { display: none; }
.gc-snd:focus-visible, .gc-bar a:focus-visible, .gc-bar button:focus-visible { outline: 2px solid #C8272B; outline-offset: 2px; }

/* ── 3. The reticle builds once per visit, then follows the pointer ── */
.gbtt-v2 nav.gc-nav > div > a:first-child { perspective: 260px; }
.gbtt-v2 nav svg.gc-ret { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform: rotateX(calc(var(--gx, 0) * 1deg)) rotateY(calc(var(--gy, 0) * 1deg)); }
.gbtt-v2 nav svg.gc-ret.gc-build line { stroke-dasharray: 1 1; animation: gcDraw .55s cubic-bezier(.6,0,.2,1) backwards; }
.gbtt-v2 nav svg.gc-ret.gc-build line:nth-child(-n+2) { animation-delay: .05s; }
.gbtt-v2 nav svg.gc-ret.gc-build line:nth-child(3), .gbtt-v2 nav svg.gc-ret.gc-build line:nth-child(4) { animation-delay: .3s; }
.gbtt-v2 nav svg.gc-ret.gc-build circle { transform-box: fill-box; transform-origin: center; animation: gcPop .45s cubic-bezier(.3,1.5,.5,1) .55s backwards; }
.gbtt-v2 nav svg.gc-ret.gc-build line:nth-child(n+7) { animation-delay: .8s; }
.gbtt-v2 nav svg.gc-ret.gc-build circle:nth-last-child(-n+2) { animation-delay: 1.05s; }
@keyframes gcDraw { from { stroke-dashoffset: 1; } }
@keyframes gcPop { from { transform: scale(0); opacity: 0; } }

/* ── 4. Phone header that steps aside ── */
.gc-bar { display: none; }
.gc-spacer { display: block; height: 0; }
@media (max-width: 768px) {
  html { scroll-padding-top: calc(var(--gc-top, 0px) + 12px); }
  /* once the header has scrolled out of view it is fixed to the top; a spacer holds its place */
  .gbtt-v2 nav.gc-nav.gc-fixed {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 60;
    box-shadow: 0 6px 16px -14px rgba(11,15,20,.5);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  }
  .gbtt-v2 nav.gc-nav.gc-fixed.gc-hide { transform: translateY(-100%); box-shadow: none; }
  .gbtt-v2 nav.gc-nav.gc-snap { transition: none !important; }
  .gbtt-v2 nav.gc-nav { padding: 0 !important; }
  .gbtt-v2 nav.gc-nav > div { flex-wrap: nowrap !important; padding: 9px 14px !important; gap: 10px !important; }
  .gbtt-v2 nav.gc-nav > div > div.gc-bar { width: auto !important; margin-left: auto !important; padding: 0 !important; flex-wrap: nowrap !important; gap: 8px !important; order: 1; }
  .gbtt-v2 nav.gc-nav > div > div:not(.gc-bar) { order: 2; }
  .gbtt-v2 nav.gc-nav > div > a:first-child { gap: 10px !important; min-width: 0; }
  .gbtt-v2 nav.gc-nav > div > a:first-child svg { width: 38px !important; height: 38px !important; }
  .gbtt-v2 nav.gc-nav > div > a:first-child > div:nth-child(2) { margin: 4px 0 !important; }
  .gbtt-v2 nav.gc-nav > div > a:first-child > div:last-child > div:nth-child(1),
  .gbtt-v2 nav.gc-nav > div > a:first-child > div:last-child > div:nth-child(2) { font-size: 16.5px !important; }
  .gbtt-v2 nav.gc-nav > div > a:first-child > div:last-child > div:nth-child(3) { display: none; }
  .gbtt-v2 nav.gc-nav > div > div:not(.gc-bar) { display: none !important; }
  .gbtt-v2 nav.gc-nav.gc-open > div { flex-wrap: wrap !important; padding-bottom: 14px !important; }
  .gbtt-v2 nav.gc-nav.gc-open > div > div:not(.gc-bar) { display: flex !important; }
  .gbtt-v2 nav.gc-nav.gc-open { max-height: calc(100vh - 8px); overflow-y: auto; }
  .gc-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
  .gc-bar a, .gc-bar button {
    font-family: var(--mono); font-size: 10px !important; letter-spacing: 1.4px !important; text-transform: uppercase;
    min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--ink); text-decoration: none; background: transparent; color: var(--ink);
  }
  .gc-bar a { background: var(--ink); color: var(--paper) !important; }
  .gc-bar .gc-burger { width: 14px; height: 10px; position: relative; display: inline-block; }
  .gc-bar .gc-burger::before, .gc-bar .gc-burger::after, .gc-bar .gc-burger i {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s;
  }
  .gc-bar .gc-burger::before { top: 0; } .gc-bar .gc-burger i { top: 4.25px; } .gc-bar .gc-burger::after { bottom: 0; }
  .gc-open .gc-bar .gc-burger::before { transform: translateY(4.25px) rotate(45deg); }
  .gc-open .gc-bar .gc-burger::after { transform: translateY(-4.25px) rotate(-45deg); }
  .gc-open .gc-bar .gc-burger i { opacity: 0; }
  .gc-snd { min-height: 38px; }

  /* tokens.css reserves room for the old wrapped phone header (223-361px) so
     articles don't jump when it renders; the one-bar header plus ticker is
     89px, so reserve exactly that (120px where the bar wraps, under 340px) */
  #gbtt-chrome-top { min-height: 89px !important; }

  /* page-level bars that were pinned to the very top now sit under the header */
  .rb-sub, .progress-bar, .gb-nav, .site-header, .sub-nav, .gbtt-v2 .arc-filter-sticky {
    top: var(--gc-top, 0px) !important; transition: top .3s cubic-bezier(.2,.8,.2,1);
  }
}

@media (max-width: 340px) { #gbtt-chrome-top { min-height: 120px !important; } }

@media (prefers-reduced-motion: reduce) {
  .gbtt-v2 nav svg.gc-ret, .gbtt-v2 nav svg.gc-ret * { animation: none !important; transition: none !important; transform: none !important; }
  .gbtt-v2 nav.gc-nav, .rb-sub, .progress-bar, .gb-nav, .site-header, .sub-nav, .gbtt-v2 .arc-filter-sticky { transition: none !important; }
}