/* ============================================================
   GTA VAULT — guidebook.css · PHASE 2 ASSEMBLY (integrator)
   Order: [1] integrator shell foundation (tokens/base/shell)
          [2] this kept-base component layer (production rules
              still used by book markup, remapped to house
              tokens; dead + retired rules dropped — see
              PHASE2-REPORT.md for the drop list)
          [3] Lane 1 cover block · [4] Lane 2 contents block
          [5] Lane 3 chapters skin · [6] Lane 4 numbers overrides
   ============================================================ */

/* ============================================================
   GTA VAULT — PHASE 2 · INTEGRATOR SHELL FOUNDATION
   Owner: integrator lane. Assembly: this block REPLACES the
   canonical guidebook.css :root + base + shell sections
   (progress / views / book topbar / index shell / FAB / scrim /
   chapter-footer shell / players). Lane surface CSS merges
   AFTER it (cover+chrome, contents, chapters, numbers/systems
   own their sections — see INTEGRATION.md merge order).
   Law: black #000 · surfaces #101010/#1B1B1B · lines #2C2C2C ·
   silver #A5ACAF · signal red #E10600 (house) · Cover A neon
   --acc #FF2E7E / --acc-btn #E6006F (in-book franchise accent,
   James 14:41 PT) · Marathon 'Previously Display' 400 ONLY for
   display type · body Inter. Contrast: silver on black ≈9.2:1,
   dim #8C9399 ≈7:1, white on --acc-btn ≈4.55:1, neon on black
   ≈5.9:1 (display/numbers only). Small signal-red text stays
   bold-uppercase-label use only (≈4.2:1, DESIGN.md rule).
   ============================================================ */
:root{
  --bg:#000000; --card:#101010; --card2:#1B1B1B;
  --txt:#FFFFFF; --paper:#EDEFF0; --mut:#A5ACAF; --dim:#8C9399;
  --red:#E10600; --red-deep:#FF2E7E;
  --acc:#FF2E7E; --acc-btn:#E6006F; --acc-ink:#FFFFFF;
  --line:#2C2C2C;
  --serif:'Previously Display','Marathon Long Run Display',Georgia,serif;
  --disp:'Previously Display','Marathon Long Run Display',Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,.35,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.gb-page-body{margin:0;background:var(--bg);color:var(--mut);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit;touch-action:manipulation}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.grad{color:var(--acc)}

/* reading progress — house red fill on a line track */
.gb-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:#1B1B1B}
.gb-progress i{display:block;height:100%;width:0;background:var(--red);transition:width .3s var(--ease)}

.gb-view{display:none;min-height:60dvh}
.gb-view.on{display:block;animation:viewIn .28s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ BOOK TOPBAR (chapter chrome — shell) ============ */
.gb-topbar{position:sticky;top:0;z-index:140;display:none;align-items:center;justify-content:space-between;
  padding:12px 18px;background:rgba(0,0,0,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.gb-topbar.show{display:flex}
.gb-topbar .back{background:transparent;border:0;color:var(--acc);font-size:14px;font-weight:800;cursor:pointer}
.gb-topbar .brand2{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:1px;color:#fff}
.gb-topbar .idxlink{background:transparent;border:0;color:#fff;font-size:13.5px;font-weight:800;letter-spacing:1px;cursor:pointer}

/* ============ INDEX SHELL (drawer mechanics — shell) ============
   The list INSIDE is contents-lane territory (chapter cards,
   zero rows). Dead bookmark control (gbClearBm) is REMOVED from
   the markup by the integrator — it is not styled back in. */
.gb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.gb-scrim.on{opacity:1;pointer-events:auto}
.gb-index{position:fixed;z-index:210;background:#000;border:1px solid var(--line);
  left:0;right:0;bottom:0;border-radius:18px 18px 0 0;max-height:82dvh;overflow-y:auto;
  transform:translateY(102%);transition:transform .3s var(--ease);padding:14px 20px 34px}
.gb-index.on{transform:none}
@media(min-width:760px){.gb-index{left:auto;top:0;bottom:0;width:400px;max-height:none;border-radius:0;transform:translateX(102%)}.gb-index.on{transform:none}}
.gb-drag{width:44px;height:5px;border-radius:3px;background:#2C2C2C;margin:2px auto 14px}
@media(min-width:760px){.gb-drag{display:none}}
.gb-index h3{font-family:var(--disp);font-weight:400;font-size:25px;margin:0 0 4px;color:#fff}
.gb-index .sub{font-size:13px;color:var(--mut);margin-bottom:12px}
.gb-search{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;color:#fff;
  padding:12px 14px;font-size:14px;margin-bottom:12px}
.gb-search::placeholder{color:var(--dim)}

/* ============ FAB ============ */
.gb-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:150;border:0;cursor:pointer;
  background:var(--acc-btn);color:var(--acc-ink);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  padding:13px 20px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.55);display:none}
.gb-fab.show{display:block}

/* ============ CHAPTER FOOTER SHELL (prev/next/index) ============ */
.gb-chapfoot{max-width:1180px;margin:38px auto 0;padding:0 24px 56px}
.gb-chapfoot-in{display:flex;gap:12px;align-items:stretch;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px}
.gb-footbtn{flex:1;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:15px 18px;cursor:pointer;color:inherit;text-align:left;max-width:44%;transition:border-color .2s var(--ease)}
.gb-footbtn:hover{border-color:var(--acc)}
.gb-footbtn small{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.gb-footbtn b{font-family:var(--disp);font-weight:400;font-size:16.5px;line-height:1.35;color:#fff}
.gb-footbtn.next{text-align:right;align-items:flex-end}
.gb-indexbtn{align-self:center;background:#fff;border:1px solid #fff;color:#000;
  border-radius:10px;padding:13px 20px;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;white-space:nowrap}
@media(max-width:700px){.gb-indexbtn{display:none}.gb-footbtn{max-width:48%}}

/* the retired 14px brick stripe under the header — GONE in Phase 2 */
#gbApp{border-top:0}

/* ============ PLAYERS APPENDIX (shell-owned generic) ============ */
.gb-player{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:10px 0}
.gb-player .init{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:400;font-size:20px;color:#fff;background:var(--acc-btn)}
.gb-player b{font-size:15.5px;color:#fff}
.gb-player small{display:block;font-size:13.5px;color:var(--mut);line-height:1.6;margin-top:4px}

/* image fade-in (book-wide) */
.gb-fig img,.gb-chap-hero img,.gb-spread figure img{opacity:0;transition:opacity .4s var(--ease)}
.gb-fig img.loaded,.gb-chap-hero img.loaded,.gb-spread figure img.loaded{opacity:1}
@media (prefers-reduced-motion: reduce){
  .gb-view.on{animation:none}
  .gb-progress i{transition:none}
  .gb-chap-bg.go{animation:none;opacity:1;transform:none}
  .gb-index,.gb-scrim{transition:none}
  .gb-fig img,.gb-chap-hero img,.gb-spread figure img{opacity:1;transition:none}
  .gb-btn,.gb-fab{transform:none}
}


.gb-btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:10px;
  padding:15px 26px;font-size:14px;font-weight:800;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:transform .15s var(--ease),background .2s}
.gb-btn.primary{background:var(--red);color:#fff}
.gb-btn.primary:hover{background:#B00500}
.gb-btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--txt)}
.gb-btn:active{transform:scale(.97)}
.gb-related{max-width:1180px;margin:0 auto;padding:0 24px 8px;font-size:13px;color:var(--dim)}
.gb-related a{color:var(--red);font-weight:700;text-decoration:none}
.gb-related a:hover{text-decoration:underline}

/* TOC container (bands/cards themselves are Lane 2's block) */
.gb-toc{max-width:1180px;margin:0 auto;padding:34px 24px 60px}
.gb-part{margin:30px 0 4px}

/* ============ CHAPTER substrate (Lane 3 skin scopes over) ============ */
.gb-chap{max-width:1180px;margin:0 auto;padding:30px 24px 0}
.gb-chap-top{position:relative;overflow:hidden;border-radius:18px;min-height:340px;display:flex;align-items:flex-end;
  margin:6px 0 8px;background:#101010;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.gb-chap-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08)}
.gb-chap-bg.go{animation:gbBgIn .6s var(--ease) forwards}
@keyframes gbBgIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.gb-chap-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.96) 100%)}
.gb-chap-head{position:relative;z-index:2;padding:28px 24px 26px;max-width:860px}
@media(min-width:900px){.gb-chap-top{min-height:440px}.gb-chap-head{padding:40px 44px 38px}}
.gb-chap-kicker{display:inline-block;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:8px 16px 8px 14px;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--red)}
.gb-chap h2{font-family:var(--serif);font-size:clamp(34px,6vw,56px);font-weight:400;letter-spacing:-1px;line-height:1.02;margin:12px 0 8px;color:var(--txt)}
.gb-epigraph{font-family:var(--serif);font-size:clamp(16px,2.6vw,21px);color:var(--mut);line-height:1.6;
  border-left:3px solid var(--red);padding-left:16px;margin:18px 0 10px;max-width:760px}
.gb-chap-intro{font-size:15.5px;color:var(--mut);line-height:1.7;max-width:760px;margin:0 0 8px}
.gb-chap-hero{margin:20px 0 6px;border-radius:18px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.gb-chap-hero img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 22%}
.gb-body{max-width:860px}
.gb-body p{font-size:15px;color:var(--mut);line-height:1.72;margin:0 0 14px}
.gb-body p b{color:var(--txt)}
.gb-sec{margin:28px 0 6px}
.gb-sec h3{font-family:var(--serif);font-size:clamp(21px,3.6vw,29px);font-weight:400;margin:0 0 10px;letter-spacing:-.3px;display:flex;align-items:center;gap:12px;color:var(--txt)}
.gb-sec h3 .n{font-size:12px;font-family:var(--sans);font-weight:800;letter-spacing:1px;color:#fff;background:var(--red);padding:4px 10px;border-radius:6px}
.gb-sec p{font-size:15px;color:var(--mut);line-height:1.72;margin:0 0 14px}
.gb-sec p b{color:var(--txt)}
.gb-facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.gb-fact{font-size:12.5px;font-weight:700;color:var(--mut);background:var(--card2);padding:8px 13px;border-radius:9px;border-left:3px solid var(--red)}
.gb-fact b{color:var(--red);font-weight:800;margin-right:6px;letter-spacing:.6px;text-transform:uppercase;font-size:11px}
.gb-missions{list-style:none;margin:12px 0 18px;padding:0}
.gb-missions li{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:13px 16px;margin:8px 0;font-size:14px;line-height:1.6;color:var(--mut)}
.gb-missions li b{color:var(--txt);display:block;font-size:13.5px;margin-bottom:3px}
.gb-ost{display:grid;gap:8px;margin:12px 0 18px}
@media(min-width:700px){.gb-ost{grid-template-columns:1fr 1fr}}
.gb-ost div{background:var(--card2);border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--mut)}
.gb-ost div b{display:block;font-size:13px;color:var(--txt)}
.gb-pull{font-family:var(--serif);font-size:clamp(18px,3vw,24px);line-height:1.55;color:var(--txt);
  border-left:3px solid var(--red);padding:6px 0 6px 18px;margin:26px 0}
.gb-verdict{background:var(--card2);border-radius:14px;padding:16px 18px;font-size:14px;color:var(--mut);line-height:1.65;margin:18px 0;border-left:3px solid var(--red)}
.gb-verdict b{color:var(--red);display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:6px}
.gb-srccap{font-size:12px;color:var(--dim);margin:10px 0;line-height:1.6}
.gb-beat{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow:hidden}
.gb-beat summary{cursor:pointer;padding:16px 18px;font-weight:800;font-size:15px;list-style:none;display:flex;align-items:center;gap:10px;color:var(--txt)}
.gb-beat summary::-webkit-details-marker{display:none}
.gb-beat summary .plus{margin-left:auto;color:var(--red);font-size:20px;font-weight:900;transition:transform .2s;flex-shrink:0}
.gb-beat[open ] summary .plus{transform:rotate(45deg)}
.gb-beat .gb-beat-in{padding:0 18px 18px;font-size:14.5px;color:var(--mut);line-height:1.7}
.gb-beat .gb-beat-in p{margin:0 0 10px}
.gb-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 8px}
@media(min-width:760px){.gb-stats{grid-template-columns:repeat(4,1fr)}}
.gb-stat{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:14px;padding:20px 16px;position:relative;overflow:hidden}
.gb-stat b{display:block;font-family:var(--serif);font-size:clamp(26px,5vw,38px);font-weight:400;letter-spacing:-1px;color:var(--txt);line-height:1.05}
.gb-stat span{display:block;font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}
.gb-storyline{position:relative;margin:20px 0 6px;padding-left:26px}
.gb-storyline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.gb-storyitem{position:relative;margin:0 0 14px}
.gb-storyitem::before{content:"";position:absolute;left:-24px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--red)}
.gb-spread{display:grid;gap:16px;margin:26px 0}
@media(min-width:840px){.gb-spread{grid-template-columns:1.05fr 1fr;align-items:center}.gb-spread.flip>*:first-child{order:2}}
.gb-spread figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.gb-spread figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gb-spread figcaption{font-size:11.5px;color:var(--mut);padding:9px 4px 0;line-height:1.5}
.gb-spread h3{font-family:var(--serif);font-size:clamp(21px,3.4vw,29px);font-weight:400;letter-spacing:-.4px;margin:0 0 10px;color:var(--txt)}
.gb-fig{margin:24px 0;border-radius:16px;background:var(--card);overflow:hidden;border:1px solid var(--line)}
.gb-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#101010}
.gb-fig.portrait img{aspect-ratio:4/5}
.gb-fig figcaption{font-size:12px;color:var(--mut);padding:12px 16px;line-height:1.55;border-top:1px solid var(--line)}
.gb-fig figcaption b{color:var(--red);font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:3px}
.gb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.gb-gallery .gb-fig{margin:0}
@media(max-width:560px){.gb-gallery{grid-template-columns:1fr}}

/* ============ VI LAUNCH FILE ============ */
.gb-vi-launch{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:16px;padding:20px;margin:22px 0}
.gb-vi-launch h4{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--red)}
.gb-launch-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.gb-launch-row:first-of-type{border-top:0}
.gb-launch-row b{font-weight:800;color:var(--txt)}
.gb-launch-row span{color:var(--mut);text-align:right}

/* profiles / locations */
.gb-profiles{display:grid;gap:14px;margin:18px 0}
@media(min-width:760px){.gb-profiles{grid-template-columns:1fr 1fr}}
.gb-profile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.gb-profile h4{margin:0 0 4px;font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.3px;color:var(--txt)}
.gb-profile .role{font-size:11.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.gb-profile p{font-size:14px;color:var(--mut);line-height:1.65;margin:0 0 10px}
.gb-locgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
@media(min-width:760px){.gb-locgrid{grid-template-columns:repeat(3,1fr)}}
.gb-loc{background:var(--card2);border-radius:12px;padding:14px;font-size:13.5px;line-height:1.55;color:var(--mut)}
.gb-loc b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--txt)}

/* trailers */
.gb-trailer{margin:18px 0 0}
.gb-trailer-btn{position:relative;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#101010;padding:0;display:block}
.gb-trailer-btn img{width:100%;height:100%;object-fit:cover;opacity:.9}
.gb-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.gb-play-ico{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;padding-left:4px;border:2px solid rgba(255,255,255,.85)}
.gb-play-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.65);padding:7px 15px;border-radius:9px}
.gb-trailer-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#101010;display:none}
.gb-trailer-frame.open{display:block}
.gb-trailer-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gb-chiprow{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.gb-chip{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:10px 16px;border-radius:9px;background:var(--card2);color:var(--mut);border:0;cursor:pointer}
.gb-chip.on{background:var(--red);color:#fff}


/* ============ [3] LANE 1 · COVER A BLOCK ============ */
/* Red stripe retired 2026-10-16 (Phase 2 · Cover A, Lane 1): the chrome seam is the header's single white line; the book opens straight onto the hero. */

/* ================================================================
   PHASE 2 · COVER A (Lane 1 — cover + chrome seam) · 2026-10-16
   The approved Cover A composition (visual/mocks/cover-a.html +
   vault-mock.css) ported onto the live book. Accent = Vice City
   neon, IN-BOOK ONLY (site chrome untouched). Display face =
   Marathon Long Run Display per the standing type ruling (the
   mock's serif tokens resolve to Marathon in production).
   New gb-hero / gb-land2 class namespace — no other lane's rules
   are modified; the retired cream cover classes above simply stop
   being emitted by renderTOC().
   ================================================================ */
#view-toc{background:#000}
.gb-hero,.gb-land2{--acc:#FF2E7E;--acc-btn:#E6006F;--s1:#101010;--s2:#1B1B1B;--line:#2C2C2C;--silver:#A5ACAF;--dim:#8C9399;--paper:#EDEFF0;--disp:'Marathon Long Run Display',sans-serif}
/* ---------- chrome seam (book-scoped) ----------
   bible.css resolves its :root tokens cream on this page (the book predates
   the black scheme; the chrome's own dark block covers the header/tabbar/
   sheet elements but NOT the .b-scope wrapper or the nav dropmenus).
   Scoped to body.gb-page-body, the bible background family flips to house
   black for book pages only — shared chrome files are not touched. The
   mobile scope padding-bottom (bible.css @max-width:1023px) reserves tabbar
   clearance on pages where the scope wraps everything; on the book it wraps
   only the header, where it leaves a dead cream band above the hero, so it
   is zeroed here — except while the mini player is open (b-minibar-open). */
body.gb-page-body{background:#000}
body.gb-page-body .b-scope{--bible-bg:#000000;--bible-card:#101010;--bible-ink:#A5ACAF;--bible-ink-soft:#959DA2;--bible-ink-dim:#8C9399;--bible-rule:#2C2C2C;background:#000000}
@media(max-width:1023px){body.gb-page-body .b-scope:not(.b-minibar-open){padding-bottom:0}}
/* ---------- cover hero (photography IS the surface) ---------- */
.gb-hero{position:relative;min-height:94dvh;display:flex;align-items:flex-end;overflow:hidden;background:#000 url('../assets/gta-vi-key.jpg') center 18%/cover no-repeat}
.gb-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 46%,rgba(0,0,0,.66) 74%,#000 100%)}
.gb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%)}
.gb-hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:120px 24px 34px}
.gb-hero-pre{font-size:11px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--paper);margin:0 0 6px}
.gb-mast{font-family:var(--disp);font-weight:400;font-size:clamp(76px,12.5vw,164px);line-height:.9;letter-spacing:.5px;margin:0;color:#fff;text-transform:uppercase}
.gb-mast-v{background:linear-gradient(94deg,#FFB03A 0%,#FF5E3A 16%,#FF2E7E 52%,#C44DFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb-tagline{display:flex;align-items:center;gap:14px;margin:16px 0 14px;max-width:560px}
.gb-tagline i{flex:0 0 44px;height:1px;background:rgba(255,255,255,.55)}
.gb-tagline span{font-size:12.5px;font-weight:800;letter-spacing:6px;color:#fff;text-transform:uppercase;white-space:nowrap}
.gb-hero-pitch{font-size:16.5px;color:var(--paper);max-width:640px;line-height:1.65;margin:0 0 26px}
.gb-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 30px}
.gb-hbtn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:9px;padding:15px 28px;font-size:13.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;font-family:inherit}
.gb-hbtn.primary{background:var(--acc-btn);color:#fff}
.gb-hbtn.ghost{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(4px)}
.gb-hero .gb-ribbon{background:#101010;border:1px solid #2C2C2C;color:#fff;box-shadow:none}
.gb-hero .gb-ribbon small{color:#A5ACAF}
.gb-hero-stats{display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.35);padding-top:18px;gap:10px 0}
.gb-hstat{flex:1 1 0;min-width:130px;padding-right:18px}
.gb-hstat b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.6vw,44px);color:#fff;line-height:1}
.gb-hstat span{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--silver);margin-top:7px;line-height:1.5}
.gb-hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11.5px;font-weight:800;letter-spacing:2.5px;color:#fff;text-transform:uppercase}
.gb-hero-foot .gb-idx-cue b{color:var(--acc)}
.gb-related{max-width:1180px;margin:0 auto;padding:16px 24px 4px;text-align:left;font-size:12.5px;color:#8C9399}
.gb-related a{color:#FF2E7E;font-weight:700;text-decoration:none}
@media(max-width:700px){
 .gb-hero{min-height:100dvh;background-position:center 12%}
 .gb-hero-in{padding:96px 18px 26px}
 .gb-hstat{flex:1 1 42%}
 .gb-hero-pitch{font-size:15.5px}
 .gb-related{padding-left:18px;padding-right:18px}
}
/* ---------- landing sections ---------- */
.gb-land2{max-width:1180px;margin:0 auto;padding:52px 24px 6px;width:100%}
.gb-sec-head{margin:0 0 22px}
.gb-k2{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.gb-sec-head h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:.2px;margin:0 0 8px;color:#fff;text-transform:uppercase}
.gb-sec-head p{font-size:15px;color:var(--silver);line-height:1.65;margin:0;max-width:660px}
.gb-rule{height:1px;background:var(--line);margin-top:18px}
/* ---------- living timeline rail (release order; other lenses are future-phase, shown inert) ---------- */
.gb-lens{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 20px}
.gb-lens span{font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.gb-lens span.on{color:#fff;border-bottom-color:var(--acc)}
.gb-rail{display:flex;gap:14px;overflow-x:auto;padding:4px 24px 10px;margin:0 -24px;scroll-snap-type:x mandatory;scrollbar-width:none}
.gb-rail::-webkit-scrollbar{display:none}
.gb-gcard{flex:0 0 218px;scroll-snap-align:start;background:var(--s1);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;text-align:left;cursor:pointer;color:#fff;font:inherit}
.gb-gcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gb-gcard-tx{display:block;padding:13px 15px 15px}
.gb-gcard-tx .gb-y{font-family:var(--disp);font-size:19px;color:var(--acc);line-height:1}
.gb-gcard-tx b{display:block;font-size:14.5px;font-weight:800;color:#fff;line-height:1.3;margin:5px 0 4px;letter-spacing:-.1px}
.gb-gcard-tx .gb-pl{font-size:11.5px;color:var(--dim);letter-spacing:.4px}
.gb-gcard-tx .gb-uni{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--silver);margin-top:9px}
.gb-gcard-tx .gb-uni i{width:7px;height:7px;border-radius:50%;background:var(--silver);flex:none}
.gb-gcard-tx .gb-uni.u2 i{background:#8C9399}
.gb-gcard-tx .gb-uni.u3 i{background:#A5ACAF}
.gb-gcard-tx .gb-uni.uhd i{background:var(--acc)}
.gb-gcard-tx .gb-gcard-go{display:inline-block;margin-top:9px;font-size:12px;font-weight:800;color:var(--acc);letter-spacing:.4px}
.gb-rail-line{position:relative;height:2px;background:linear-gradient(90deg,var(--acc) 0 22%,var(--line) 22% 100%);margin:16px 0 4px}
.gb-nextch{display:flex;gap:0;width:100%;background:var(--s1);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:20px;padding:0;text-align:left;cursor:pointer;color:#fff;font:inherit}
.gb-nextch img{width:300px;object-fit:cover;flex:none;display:block}
.gb-nextch-tx{display:block;padding:20px 22px}
.gb-nextch-tx .gb-k2{margin:0 0 6px}
.gb-nextch-tx b{font-family:var(--disp);font-weight:400;font-size:25px;color:#fff;display:block;line-height:1.1}
.gb-nextch-d{display:block;font-size:13.5px;color:var(--silver);margin:6px 0 10px;line-height:1.6}
.gb-nextch-tx .gb-more{font-size:12.5px;font-weight:800;color:var(--acc)}
@media(max-width:700px){.gb-nextch{flex-direction:column}.gb-nextch img{width:100%;aspect-ratio:16/8}}
/* ---------- eras (tall photographic panels) ---------- */
.gb-eras2{display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}
@media(max-width:1020px){.gb-eras2{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gb-eras2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.gb-eras2{grid-template-columns:1fr 1fr}}
.gb-era2{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4.4;background:var(--s1);border:1px solid var(--line);padding:0;text-align:left;cursor:pointer;color:#fff;font:inherit}
.gb-era2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gb-era2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,.60) 58%,rgba(0,0,0,.95) 100%)}
.gb-era2-tx{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:16px;display:block}
.gb-era2-no{font-family:var(--disp);font-size:15px;color:var(--acc)}
.gb-era2-tx b{display:block;font-family:var(--disp);font-weight:400;font-size:23px;color:#fff;line-height:1.08;margin:2px 0 3px}
.gb-era2-yrs{font-size:11px;font-weight:800;letter-spacing:1.8px;color:var(--acc);text-transform:uppercase;display:block}
.gb-era2-d{font-size:12.5px;color:var(--paper);line-height:1.55;margin:7px 0 9px;display:block}
.gb-era2-go{font-size:12px;font-weight:800;color:var(--acc);display:block}
/* ---------- journeys ---------- */
.gb-journeys2{display:grid;gap:14px}
@media(min-width:700px){.gb-journeys2{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.gb-journeys2{grid-template-columns:1fr 1fr 1fr}}
.gb-journey2{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--s1);cursor:pointer;color:inherit;padding:0;font:inherit}
.gb-journey2 img{width:100%;aspect-ratio:16/8.5;object-fit:cover;display:block}
.gb-journey2-tx{display:block;padding:16px 18px 18px}
.gb-journey2-n{display:block;font-size:10.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--acc);margin-bottom:7px}
.gb-journey2-tx b{display:block;font-family:var(--disp);font-weight:400;font-size:22px;color:#fff;margin-bottom:5px;line-height:1.15}
.gb-journey2-tx small{display:block;font-size:13.5px;color:var(--silver);line-height:1.6}
.gb-journey2-go{display:inline-flex;gap:8px;margin-top:11px;font-size:12.5px;font-weight:800;letter-spacing:.6px;color:var(--acc)}
@media(max-width:700px){.gb-land2{padding:44px 18px 6px}.gb-rail{padding-left:18px;padding-right:18px;margin:0 -18px}}


/* ============ [4] LANE 2 · CONTENTS BLOCK ============ */
/* ============================================================
   GTA VAULT PHASE 2 — LANE 2: CONTENTS (alt3, James-decided)
   APPEND to guidebook.css. Implements: part bands + chapter-card
   grids for the Contents/Chapter Index, TOC search results as
   cards, and the index drawer converted to the same card
   component (compact variant). No text-row list is generated
   anywhere after the Lane 2 index.html patch: the legacy
   .gb-toc-row / .gb-idxrow / .gb-toc-num / .gb-toc-tx /
   .gb-toc-meta / .gb-toc-thumb / .gb-toc-go rules above become
   dead and may be stripped at integration.
   Accent = Cover A neon, in-book only: #FF2E7E (text weight),
   #E6006F (button weight). Surfaces: #101010 / #1B1B1B, lines
   #2C2C2C (Phase 2 black scheme). Display face: Marathon,
   served as 'Previously Display', weight 400 only.
   ============================================================ */
.gb-toc,.gb-index{--gb-acc:#FF2E7E;--gb-acc-btn:#E6006F;--gb-s1:#101010;--gb-s2:#1B1B1B;--gb-line:#2C2C2C;--gb-dim:#8C9399;--gb-paper:#EDEFF0;--gb-disp:'Previously Display','Marathon Long Run Display',var(--serif)}

/* ---- index head ---- */
.gb-toc-head2{margin:0 0 22px;border-bottom:1px solid var(--gb-line);padding-bottom:18px}
.gb-toc-k{font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--gb-acc);margin:0 0 10px}
.gb-toc-head2 h2{font-family:var(--gb-disp);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:.2px;margin:0 0 8px;color:#fff;text-transform:uppercase}
.gb-toc-intro{font-size:15px;color:#A5ACAF;line-height:1.65;margin:0;max-width:660px}

/* ---- TOC search ---- */
.gb-toc-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0 8px}
.gb-toc-search{flex:1 1 280px;background:var(--gb-s1);border:1px solid var(--gb-line);border-radius:10px;padding:13px 16px;color:#fff;font:inherit;font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.gb-toc-search::placeholder{color:var(--gb-dim)}
.gb-toc-search:focus{border-color:var(--gb-acc)}
.gb-toc-results{margin:6px 0 4px}
.gb-sd-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:18px 0 10px}
.gb-sd-q{font-family:var(--gb-disp);font-size:17px;color:#fff}
.gb-sd-c{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--gb-acc);white-space:nowrap}
.gb-search-note{font-size:12.5px;color:var(--gb-dim);margin:10px 0 2px}
.gb-search-none{color:var(--gb-dim);font-size:14px;padding:6px 0 2px;margin:0}

/* ---- part bands ---- */
.gb-vband{margin:26px 0 0}
.gb-vband-btn{position:relative;display:flex;align-items:flex-end;width:100%;min-height:196px;margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--gb-s1);text-align:left;cursor:pointer;font:inherit;color:#fff}
.gb-vband-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.gb-vband-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.05) 100%)}
.gb-vband-tx{position:relative;z-index:2;display:block;flex:1;padding:20px 22px}
.gb-vband-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--gb-acc);margin:0 0 4px}
.gb-vband-name{display:block;font-family:var(--gb-disp);font-weight:400;font-size:clamp(24px,4vw,34px);color:#fff;line-height:1.05}
.gb-vband-d{display:block;font-size:13px;color:var(--gb-paper);margin:5px 0 0;max-width:600px;line-height:1.55}
.gb-vband-range{display:inline-block;margin-top:11px;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.45);padding:6px 11px;border-radius:6px}
.gb-vband-cnt{position:absolute;z-index:3;top:18px;right:22px;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#fff;text-transform:uppercase}
.gb-vband-state{position:absolute;z-index:3;right:22px;bottom:16px;font-size:11.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gb-acc)}
.gb-vband.open .gb-vband-btn{border-radius:12px 12px 0 0}
.gb-vband-panel{display:none;border-left:3px solid var(--gb-acc);background:var(--gb-s1);padding:14px;margin:0 0 4px}
.gb-vband.open .gb-vband-panel{display:block}
.gb-vband-btn:focus-visible,.gb-ccard:focus-visible{outline:2px solid var(--gb-acc);outline-offset:2px}
@media(max-width:700px){.gb-vband-btn{min-height:172px}.gb-vband-panel{padding:10px}}

/* ---- chapter cards ---- */
.gb-ccards{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gb-ccards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1020px){.gb-ccards{grid-template-columns:repeat(4,1fr)}}
.gb-ccard{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;background:var(--gb-s1);border:1px solid var(--gb-line);border-radius:10px;overflow:hidden;cursor:pointer;color:inherit;padding:0;font:inherit}
.gb-ccard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gb-ccard-tx{padding:11px 13px 13px;display:flex;flex-direction:column}
.gb-cnum{font-family:var(--gb-disp);font-size:19px;line-height:1.05;color:var(--gb-acc)}
.gb-cttl{font-size:15px;font-weight:800;color:#fff;line-height:1.3;letter-spacing:-.1px;margin-top:4px}
.gb-csec{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gb-dim);margin-top:5px}
/* typographic cards (art-less appendices — never placeholder images) */
.gb-ccard.typo .gb-typo-art{aspect-ratio:16/10;background:linear-gradient(135deg,#101010 0%,#000 72%);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--gb-line)}
.gb-typo-num{font-family:var(--gb-disp);font-size:62px;line-height:1;color:var(--gb-acc)}
.gb-ccard.typo .gb-cttl{font-family:var(--gb-disp);font-weight:400;font-size:17.5px;letter-spacing:.3px}

/* ---- index drawer: part labels + compact cards ---- */
.gb-idx-part{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gb-acc);margin:16px 0 8px}
.gb-idx-part:first-child{margin-top:2px}
.gb-idx-cards{display:grid;gap:10px;grid-template-columns:1fr;margin:0 0 6px}
.gb-ccard.mini{flex-direction:row;align-items:stretch;background:var(--gb-s2)}
.gb-ccard.mini img{width:92px;min-height:64px;aspect-ratio:auto;object-fit:cover}
.gb-ccard.mini .gb-ccard-tx{justify-content:center;padding:9px 12px}
.gb-ccard.mini .gb-cnum{font-size:15px}
.gb-ccard.mini .gb-cttl{font-size:13.5px;margin-top:2px}
.gb-ccard.mini .gb-typo-art{width:92px;min-height:64px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--gb-line);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#101010 0%,#000 72%)}
.gb-ccard.mini .gb-typo-num{font-size:30px}
.gb-idx-none{color:var(--gb-dim);padding:18px 4px;font-size:14px}


/* ============ [5] LANE 3 · CHAPTERS SKIN ============ */
/* =====================================================================
   GTA VAULT — PHASE 2 · LANE 3 (CHAPTERS)
   Chapter reading skin: black scheme, Marathon display, house red.
   Source of truth: the approved chapter mock (mocks/chapter.html,
   body class "vb" — chapter bodies keep red furniture; the Vice City
   neon accent lives on cover/contents surfaces only, never both).

   INTEGRATION: append this whole block to the END of guidebook.css
   (after the base Phase 2 token remap), or ship it as its own file
   linked AFTER guidebook.css. Every rule carries explicit house
   values on purpose — the chapter skin must not depend on the order
   of the bible.css token remap. Scoped to the chapter surface:
   #view-chapter, #view-players, .gb-chapfoot, #gbFoot, .gb-topbar,
   .gb-progress. Content is untouched — skin + structure only.
   ===================================================================== */

#view-chapter, #view-players{
  --vb-bg:#000000; --vb-s1:#101010; --vb-s2:#1B1B1B; --vb-line:#2C2C2C;
  --vb-paper:#F2F2F0; --vb-silver:#A5ACAF; --vb-dim:#8C9399; --vb-acc:#E10600;
  background:#000000; color:var(--vb-paper);
}
#view-chapter ::selection, #view-players ::selection{background:#E10600;color:#fff}
#view-chapter .gb-dogear, #view-players .gb-dogear{display:none!important} /* D1: dead bookmark control never renders in the new skin */

/* ---------- reading rails ----------
   .gb-chap goes full-bleed (the photo hero is naturally edge-to-edge);
   children re-rail: hero furniture on the 1180 page rail, reading
   blocks on the production 860 column. The catch-all runs FIRST;
   every explicit rule below outranks it. */
#view-chapter .gb-chap, #view-players .gb-chap{max-width:none;margin:0;padding:0;background:transparent}
#view-chapter .gb-chap>*, #view-players .gb-chap>*{
  max-width:860px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;width:100%}
#view-chapter .gb-chap>.gb-facts, #view-chapter .gb-chap>.gb-chap-hero{max-width:1180px}
#view-chapter .gb-body, #view-players .gb-body{max-width:none;margin:0;padding:0;width:100%}
#view-chapter .gb-body>*, #view-players .gb-body>*{
  max-width:860px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;width:100%}
#view-chapter .gb-sec, #view-players .gb-sec{padding-top:34px;padding-bottom:6px}

/* ---------- hero (existing photo head, full-bleed) ----------
   Current production vocabulary (chapTop): .gb-chap-top wraps
   .gb-chap-bg (photo, fades in via .go) + .gb-chap-shade +
   .gb-chap-head (text block: .gb-chap-kicker, bare h2, .gb-epigraph,
   .gb-chap-intro). The retired skin faded the photo into cream with
   dark serif text; the new skin fades it into black with white
   Marathon text, per the approved chapter mock. */
#view-chapter .gb-chap-top, #view-players .gb-chap-top{
  max-width:none;width:100%;margin:0;padding:0;border-radius:0;box-shadow:none;
  min-height:min(76vh,700px);background:#000;border-bottom:1px solid var(--vb-line)}
#view-chapter .gb-chap-shade, #view-players .gb-chap-shade{
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.45) 55%,#000 97%)}
#view-chapter .gb-chap-head, #view-players .gb-chap-head{
  width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding:120px 20px 44px}
#view-chapter .gb-chap-kicker, #view-players .gb-chap-kicker{
  display:inline-block;padding:7px 12px;margin:0;
  background:#101010;border:1px solid var(--vb-line);border-left:3px solid var(--vb-acc);border-radius:6px;
  color:var(--vb-acc);font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
#view-chapter .gb-chap h2, #view-players .gb-chap h2{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-weight:400;color:#fff;font-size:clamp(40px,6.5vw,80px);line-height:.98;letter-spacing:.005em;margin:14px 0 0}
#view-chapter .gb-chap h2 .grad, #view-players .gb-chap h2 .grad,
#view-chapter .gb-sec h3 .grad, #view-players .gb-sec h3 .grad{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--vb-acc);-webkit-text-fill-color:var(--vb-acc)}
#view-chapter .gb-epigraph, #view-players .gb-epigraph{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-style:normal;
  color:#fff;font-size:clamp(19px,2.6vw,27px);line-height:1.25;max-width:820px;
  border-left:none;padding-left:0;margin:16px 0 0}
#view-chapter .gb-chap-intro, #view-players .gb-chap-intro{
  color:var(--vb-paper);font-size:16.5px;line-height:1.6;max-width:660px;margin:12px 0 0}

/* ---------- key-art banner + facts (game chapters) ---------- */
#view-chapter .gb-chap-hero{
  margin-top:18px;padding-top:0;padding-bottom:0;border:none;border-radius:0;
  background:transparent;box-shadow:none;overflow:visible}
#view-chapter .gb-chap-hero img{
  width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 22%;
  border-radius:10px;display:block}
#view-chapter .gb-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:transparent;padding-top:18px;padding-bottom:4px;margin:0 auto}
#view-chapter .gb-fact{
  background:var(--vb-s2);border:none;border-left:3px solid var(--vb-acc);border-radius:9px;
  padding:13px 15px;color:var(--vb-paper);font-size:14.5px;line-height:1.45}
#view-chapter .gb-fact b{
  display:block;color:var(--vb-acc);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;margin-bottom:5px}

/* ---------- GTA VI launch file ---------- */
#view-chapter .gb-vi-launch{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-top:3px solid var(--vb-acc);
  border-radius:12px;padding:18px;margin-top:18px}
#view-chapter .gb-vi-launch h4{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-weight:400;color:#fff;font-size:21px;margin:0 0 8px}
#view-chapter .gb-vi-launch .gb-launch-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--vb-line)}
#view-chapter .gb-vi-launch .gb-launch-row b{color:#fff;font-weight:400}
#view-chapter .gb-vi-launch .gb-launch-row span{color:var(--vb-silver);text-align:right}

/* ---------- section tabs (built by gbChapTabs — JS patch) ---------- */
#view-chapter .gb-chaptabs, #view-players .gb-chaptabs{
  position:sticky;top:44px;z-index:40;max-width:none;width:100%;padding:0;
  background:rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vb-line);margin-top:26px}
#view-chapter .gb-chaptabs-in, #view-players .gb-chaptabs-in{
  max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
#view-chapter .gb-chaptabs-in::-webkit-scrollbar, #view-players .gb-chaptabs-in::-webkit-scrollbar{display:none}
#view-chapter .gb-chaptabs button, #view-players .gb-chaptabs button{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;
  font-size:15px;color:var(--vb-silver);background:none;border:none;border-bottom:2px solid transparent;
  border-radius:0;padding:13px 2px 11px;margin-bottom:-1px;cursor:pointer;white-space:nowrap;text-transform:capitalize}
#view-chapter .gb-chaptabs button:hover, #view-players .gb-chaptabs button:hover{color:#fff}
#view-chapter .gb-chaptabs button.on, #view-players .gb-chaptabs button.on{color:#fff;border-bottom-color:var(--vb-acc)}
#view-chapter .gb-chaptabs button:focus-visible, #view-players .gb-chaptabs button:focus-visible{outline:2px solid var(--vb-acc);outline-offset:2px}
#view-chapter .gb-sec, #view-players .gb-sec{scroll-margin-top:108px}

/* ---------- sections & body copy ---------- */
#view-chapter .gb-sec h3, #view-players .gb-sec h3{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;
  color:#fff;font-size:clamp(23px,3.6vw,30px);line-height:1.08;letter-spacing:.01em;
  display:flex;align-items:center;gap:12px;margin:0 0 14px}
#view-chapter .gb-sec h3 .n, #view-players .gb-sec h3 .n{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-size:13px;color:#fff;background:var(--vb-acc);padding:5px 11px;border-radius:6px;letter-spacing:.04em;flex:none}
#view-chapter .gb-sec h4, #view-players .gb-sec h4{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;
  color:#fff;font-size:19px;margin:22px 0 8px}
#view-chapter .gb-sec p, #view-players .gb-sec p{
  color:var(--vb-silver);font-size:15.5px;line-height:1.75;margin:0 0 14px}
#view-chapter .gb-sec p b, #view-chapter .gb-sec p strong,
#view-players .gb-sec p b, #view-players .gb-sec p strong{color:#fff;font-weight:400}
#view-chapter .gb-sec a, #view-players .gb-sec a{
  color:#fff;text-decoration:underline;text-decoration-color:var(--vb-acc);text-underline-offset:3px}
#view-chapter .gb-sec ul, #view-chapter .gb-sec ol, #view-players .gb-sec ul, #view-players .gb-sec ol{
  color:var(--vb-silver);font-size:15.5px;line-height:1.7;padding-left:22px}
#view-chapter .gb-sec li::marker, #view-players .gb-sec li::marker{color:var(--vb-acc)}
#view-chapter .gb-sec table, #view-players .gb-sec table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
#view-chapter .gb-sec th, #view-players .gb-sec th{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;
  color:#fff;background:var(--vb-s1);text-align:left;padding:9px 11px;border:1px solid var(--vb-line);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
#view-chapter .gb-sec td, #view-players .gb-sec td{color:var(--vb-silver);padding:9px 11px;border:1px solid var(--vb-line)}
#view-chapter .gb-pull, #view-players .gb-pull{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-style:normal;
  color:#fff;font-size:clamp(20px,3vw,26px);line-height:1.3;
  border-left:3px solid var(--vb-acc);padding:4px 0 4px 18px;margin:24px 0}
#view-chapter blockquote, #view-players blockquote{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-style:normal;
  color:#fff;border-left:3px solid var(--vb-acc);margin:24px 0;padding:4px 0 4px 18px}

/* ---------- figures ---------- */
#view-chapter .gb-fig, #view-players .gb-fig{background:none;border:none;border-radius:0;padding:0;margin:22px 0}
#view-chapter .gb-fig img, #view-players .gb-fig img{width:100%;border-radius:10px;display:block;background:var(--vb-s1)}
#view-chapter .gb-fig figcaption, #view-players .gb-fig figcaption{color:var(--vb-silver);font-size:12.5px;line-height:1.55;padding-top:9px}
#view-chapter .gb-fig figcaption b, #view-players .gb-fig figcaption b{
  color:var(--vb-acc);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400}
@media(min-width:900px){
  #view-chapter .gb-fig.wide, #view-players .gb-fig.wide{margin-left:-40px;margin-right:-40px}}

/* ---------- beats, source caps, stats ---------- */
#view-chapter .gb-beat, #view-players .gb-beat{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-radius:10px;padding:4px 16px;margin:12px 0}
#view-chapter .gb-beat summary, #view-players .gb-beat summary{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  color:#fff;font-size:16.5px;padding:11px 0;cursor:pointer}
#view-chapter .gb-beat summary::marker, #view-players .gb-beat summary::marker{color:var(--vb-acc)}
#view-chapter .gb-beat-in, #view-players .gb-beat-in{color:var(--vb-silver);font-size:14.5px;line-height:1.7;padding-bottom:12px}
#view-chapter .gb-srccap, #view-players .gb-srccap{color:var(--vb-dim);font-size:12px;font-style:normal;line-height:1.55}
#view-chapter .gb-stats, #view-players .gb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:18px 0}
#view-chapter .gb-stat, #view-players .gb-stat{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-top:3px solid var(--vb-acc);
  border-radius:10px;padding:14px 15px;text-align:left}
#view-chapter .gb-stat b, #view-players .gb-stat b{
  display:block;font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-weight:400;color:#fff;font-size:clamp(24px,3vw,32px);line-height:1}
#view-chapter .gb-stat span, #view-players .gb-stat span{
  display:block;color:var(--vb-silver);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;line-height:1.45}

/* ---------- missions, radio (soundtrack), verdict ---------- */
#view-chapter .gb-missions{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:8px}
#view-chapter .gb-missions li{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-radius:10px;
  padding:11px 13px;color:var(--vb-silver);font-size:14.5px;line-height:1.55}
#view-chapter .gb-missions li b{color:#fff;font-weight:400}
#view-chapter .gb-ost{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:8px 0 4px}
#view-chapter .gb-ost>div{background:var(--vb-s1);border:1px solid var(--vb-line);border-radius:10px;padding:11px 12px}
#view-chapter .gb-ost b{display:block;color:#fff;font-size:14px;font-weight:400;line-height:1.35}
#view-chapter .gb-ost span{color:var(--vb-silver);font-size:11.5px;line-height:1.45}
#view-chapter .gb-ost-note{color:var(--vb-dim);font-size:12.5px;font-style:normal;margin-top:10px}
#view-chapter .gb-verdict{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-top:3px solid var(--vb-acc);
  border-radius:10px;padding:16px 17px;margin:10px 0}
#view-chapter .gb-verdict .lab{
  color:var(--vb-acc);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif}
#view-chapter .gb-verdict .big{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  color:#fff;font-size:20px;line-height:1.25;margin:6px 0}
#view-chapter .gb-verdict p{color:var(--vb-silver);margin:0}

/* ---------- storylines, profiles, locations, galleries ---------- */
#view-chapter .gb-storyline, #view-players .gb-storyline{margin:10px 0}
#view-chapter .gb-storyitem, #view-players .gb-storyitem{border-left:3px solid var(--vb-line);padding:2px 0 14px 16px;position:relative}
#view-chapter .gb-storyitem b, #view-players .gb-storyitem b{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;color:var(--vb-acc);font-size:15px}
#view-chapter .gb-storyitem p, #view-players .gb-storyitem p{color:var(--vb-silver);margin:3px 0 0}
#view-chapter .gb-profiles, #view-players .gb-profiles{display:grid;gap:10px;margin:12px 0}
#view-chapter .gb-profile, #view-players .gb-profile{
  background:var(--vb-s1);border:1px solid var(--vb-line);border-radius:10px;padding:14px 15px}
#view-chapter .gb-profile img, #view-players .gb-profile img{border-radius:8px}
#view-chapter .gb-profile b, #view-players .gb-profile b{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;color:#fff;font-size:17px}
#view-chapter .gb-profile .role, #view-players .gb-profile .role{
  color:var(--vb-acc);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#view-chapter .gb-profile p, #view-players .gb-profile p{color:var(--vb-silver);font-size:14px;line-height:1.65}
#view-chapter .gb-locgrid, #view-players .gb-locgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:12px 0}
#view-chapter .gb-loc, #view-players .gb-loc{background:var(--vb-s1);border:1px solid var(--vb-line);border-radius:10px;padding:13px 14px}
#view-chapter .gb-loc b, #view-players .gb-loc b{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-weight:400;color:#fff;font-size:16px}
#view-chapter .gb-loc p, #view-players .gb-loc p{color:var(--vb-silver);font-size:13.5px;line-height:1.6;margin:4px 0 0}
#view-chapter .gb-gallery, #view-players .gb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
#view-chapter .gb-gallery img, #view-players .gb-gallery img,
#view-chapter .gb-spread img, #view-players .gb-spread img{border-radius:10px;width:100%;display:block}
#view-chapter .gb-related, #view-players .gb-related{
  border-top:1px solid var(--vb-line);margin-top:30px;padding-top:16px;color:var(--vb-silver);font-size:14px;line-height:1.7}
#view-chapter .gb-related a, #view-players .gb-related a{
  color:#fff;text-decoration:underline;text-decoration-color:var(--vb-acc);text-underline-offset:3px}

/* ---------- trailer ---------- */
#view-chapter .gb-trailer{margin-top:26px}
#view-chapter .gb-trailer .th{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  color:#fff;font-size:19px;margin-bottom:10px}
#view-chapter .gb-chiprow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
#view-chapter .gb-chip{
  background:var(--vb-s2);border:1px solid var(--vb-line);border-radius:8px;color:var(--vb-silver);
  font-size:13px;padding:8px 13px;cursor:pointer}
#view-chapter .gb-chip:hover{color:#fff;border-color:var(--vb-silver)}
#view-chapter .gb-chip.on{background:var(--vb-acc);border-color:var(--vb-acc);color:#fff}
#view-chapter .gb-trailer-btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--vb-s2);border:1px solid var(--vb-line);
  border-radius:10px;color:#fff;font-size:14.5px;padding:12px 16px;cursor:pointer;margin-top:14px}
#view-chapter .gb-trailer-btn .gb-play{color:var(--vb-acc);font-size:13px}
#view-chapter .gb-trailer-frame{margin-top:12px}
#view-chapter .gb-trailer-frame iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--vb-line);border-radius:12px;background:#000}

/* ---------- Appendix A: players roster ---------- */
#view-players .gb-player{
  display:flex;gap:14px;background:var(--vb-s1);border:1px solid var(--vb-line);
  border-left:3px solid var(--vb-acc);border-radius:10px;padding:13px 15px;margin:0 auto 10px;width:auto}
#view-players .gb-body>.gb-player{max-width:860px}
#view-players .gb-player .init{
  flex:none;width:42px;height:42px;border-radius:8px;background:var(--vb-acc);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-size:19px}
#view-players .gb-player b{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-weight:400;color:#fff;font-size:17px;display:block}
#view-players .gb-player small{color:var(--vb-silver);font-size:13.5px;line-height:1.6}

/* ---------- prev / next chain (footer lives in #gbFoot for every chapter view) ---------- */
#gbFoot.gb-chapfoot{
  max-width:1180px;margin:48px auto 0;padding:26px 20px 10px;
  border-top:1px solid #2C2C2C;background:transparent}
#gbFoot .gb-chapfoot-in{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;max-width:1180px;margin:0 auto}
#gbFoot .gb-footbtn{
  background:#101010;border:1px solid #2C2C2C;border-radius:12px;padding:15px 17px;
  text-align:left;cursor:pointer;width:100%;max-width:none;flex:none}
#gbFoot .gb-footbtn:hover{border-color:#E10600}
#gbFoot .gb-footbtn.next{text-align:right}
#gbFoot .gb-footbtn small{
  display:block;color:#E10600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;margin-bottom:5px}
#gbFoot .gb-footbtn b{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-weight:400;color:#fff;font-size:clamp(16px,2.2vw,20px);line-height:1.15}
#gbFoot .gb-footbtn:focus-visible, #gbFoot .gb-indexbtn:focus-visible{outline:2px solid #E10600;outline-offset:2px}
#gbFoot .gb-indexbtn{
  background:#fff;color:#000;border:none;border-radius:10px;padding:0 20px;cursor:pointer;
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  font-size:14px;letter-spacing:.08em;display:flex;align-items:center;justify-content:center}

/* ---------- chapter topbar + progress (book chrome on this surface) ---------- */
.gb-topbar{
  background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid #2C2C2C;height:44px;padding:0 16px;align-items:center}
.gb-topbar .back{
  color:#E10600;font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;font-size:14px}
.gb-topbar .brand2{
  font-family:"Previously Display","Marathon Long Run Display",Marathon,Inter,sans-serif;
  color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.gb-topbar .idxlink{color:#A5ACAF;font-size:13.5px}
.gb-topbar .idxlink:hover{color:#fff}
.gb-progress{background:rgba(255,255,255,.08)}
.gb-progress #gbProg, #gbProg{background:#E10600}

/* ---------- phone composition (separate, deliberate) ---------- */
@media(max-width:700px){
  #view-chapter .gb-chap-top, #view-players .gb-chap-top{min-height:62vh}
  #view-chapter .gb-chap-head, #view-players .gb-chap-head{padding:84px 20px 34px}
  #view-chapter .gb-chap h2, #view-players .gb-chap h2{font-size:clamp(36px,11vw,44px)}
  #view-chapter .gb-facts{grid-template-columns:1fr}
  #view-chapter .gb-chaptabs-in, #view-players .gb-chaptabs-in{gap:20px;padding:0 16px}
  #view-chapter .gb-chaptabs button, #view-players .gb-chaptabs button{font-size:14px}
  #view-chapter .gb-sec, #view-players .gb-sec{padding-top:28px}
  #view-chapter .gb-gallery, #view-players .gb-gallery{grid-template-columns:1fr}
  #gbFoot .gb-chapfoot-in{grid-template-columns:1fr 1fr}
  #gbFoot .gb-indexbtn{display:none}
}
@media(prefers-reduced-motion:reduce){
  #view-chapter *, #view-players *{scroll-behavior:auto!important}
}


/* ============ [6] LANE 4 · NUMBERS + SYSTEMS OVERRIDES ============ */
/* ============================================================================
   LANE 4 — NUMBERS + SYSTEMS component overrides (GTA Vault Phase 2)
   For the INTEGRATOR: append to guidebook.css AFTER the Phase 2 token remap.
   Values are taken verbatim from the approved mock system
   (visual/mocks/vault-mock.css: .stat, .rank-row, .tag, .chart-panel,
   .sec-h .n) and DESIGN.md. Numbers stays house-red in both accent futures
   (the records desk is house, not neon) — no Cover A neon appears here.

   Blast radius, verified against production index.html (md5 ae303120…):
   - .gb-stats / .gb-stat are used ONLY by essayNumbers (Ch 35).
   - .rank-row / .tag / .num-chart are emitted ONLY by essayNumbers.v2.js.
   - .gb-fig img[src$=".svg"] matches exactly 3 figures in the whole book:
     the Ch 35 chart (fallback) and the two Ch 38 diagrams.
   - .gb-sec h3 / .gb-srccap are GLOBAL essay components (every essay
     chapter) — they implement DESIGN.md's chapter-template section heads;
     merge once, do not duplicate if the chapter lane emits equivalents.
   ============================================================================ */

/* ---- Ch 35: stat cards (mock .stat; number size capped at 34px instead of
        the mock's 42px because the live +182,000% value is a 9-character
        unbreakable string the mock never carried — measured in the book's
        real 860px column: 172px of Marathon advance at 35px vs a 170px
        card interior, so 34px is the largest size that keeps it on one
        line; verified in proof/crop-after-stats-1440.png) ---- */
.gb-stat{background:#101010;border:1px solid #2C2C2C;border-top:3px solid #E10600;border-radius:12px;padding:20px 17px}
.gb-stat b{font-family:'Previously Display','Marathon Long Run Display',sans-serif;font-weight:400;font-size:clamp(26px,4.6vw,34px);line-height:1.05;color:#FFFFFF}
.gb-stat span{font-size:12.5px;line-height:1.55;color:#A5ACAF}

/* ---- labeling chips (mock .tag) — restate labels already in the prose ---- */
.tag{display:inline-block;font-family:'Inter',Arial,sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#A5ACAF;border:1px solid #A5ACAF;border-radius:6px;padding:2px 7px;vertical-align:2px;white-space:nowrap}
.tag.claim{color:#E10600;border-color:#E10600}
.gb-stat .tag{margin-left:6px}

/* ---- Ch 35: Top Five ranked rows (mock .rank-row) ---- */
.rank-row{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid #2C2C2C}
.rank-row .rk{font-family:'Previously Display','Marathon Long Run Display',sans-serif;font-weight:400;font-size:32px;line-height:1;color:#8C9399;min-width:34px}
.rank-row.top .rk{color:#E10600}
.rank-row .rt{flex:1;min-width:0}
.rank-row .rt b{display:inline;font-size:16.5px;font-weight:800;color:#FFFFFF}
.rank-row .rt .tag{margin-left:8px}
.rank-row .rt small{display:block;font-size:12.5px;line-height:1.5;color:#8C9399;margin-top:2px}
.rank-row .rv{font-family:'Previously Display','Marathon Long Run Display',sans-serif;font-weight:400;font-size:clamp(24px,4vw,34px);line-height:1;color:#FFFFFF;white-space:nowrap}

/* ---- Ch 35: sales-chart panel (mock .chart-panel) — chart is inline SVG in
        essayNumbers.v2.js so the Marathon title face truly renders (an SVG
        loaded via <img> cannot use page webfonts) ---- */
.gb-fig.num-chart{background:#101010;border:1px solid #2C2C2C;border-radius:12px;padding:18px 18px 4px}
.gb-fig.num-chart svg{width:100%;height:auto;display:block}
.gb-fig.num-chart figcaption{border-top:0;padding:12px 2px 12px}

/* ---- diagram figures keep their natural ratio (production .gb-fig forces
        16/9 + object-fit:cover, which crops the 960x420 chart and the
        1240x660 / 1240x600 diagrams). SVG figures sit whole on the black
        panel ground instead. ---- */
.gb-fig img[src$=".svg"]{aspect-ratio:auto;object-fit:contain;background:#101010}

/* ---- Ch 38 (+ every essay chapter): section heads & source captions
        (mock .sec-h / .srcs) — GLOBAL components, merge once ---- */
.gb-sec h3{font-family:'Previously Display','Marathon Long Run Display',sans-serif;font-weight:400;color:#FFFFFF}
.gb-sec h3 .n{font-family:'Previously Display','Marathon Long Run Display',sans-serif;font-size:13px;font-weight:400;letter-spacing:.06em;background:#E10600;color:#FFFFFF;border-radius:6px;padding:5px 11px}
.gb-srccap{font-style:normal;color:#8C9399}


/* ================================================================
   VAULT ENTRY (2026-10-16) — the cover is a vault door.
   Closed: the hero alone fills the viewport; everything after it in
   the contents view waits inside. Open: the full book, with the book
   topbar riding along and the contents at the threshold.
   ================================================================ */
#view-toc.gb-v-closed > *:not(.gb-hero){display:none!important}
#view-toc.gb-v-closed .gb-hero{min-height:calc(100dvh - 73px)}
@media(max-width:700px){
  #view-toc.gb-v-closed .gb-hero{min-height:calc(100dvh - 99px)}
}
body.gb-v-open #gbTopbar{display:flex}
.gb-toc{scroll-margin-top:48px}
.gb-part{scroll-margin-top:56px}
.gb-toc.gb-v-settle{animation:gbVaultIn .55s var(--ease) both}
@keyframes gbVaultIn{from{opacity:.5;transform:scale(.992)}to{opacity:1;transform:none}}
/* --- the doors --- */
.gb-doorfx{position:fixed;z-index:400;pointer-events:none;overflow:hidden;transition:opacity .2s ease}
.gb-doorfx.bye{opacity:0}
.gb-door-panel{position:absolute;top:0;bottom:0;width:50.5%;overflow:hidden;background:#000;will-change:transform}
.gb-door-panel.l{left:0;background:linear-gradient(90deg,#050505,#000)}
.gb-door-panel.r{right:0;background:linear-gradient(270deg,#050505,#000)}
.gb-door-panel::after{content:"";position:absolute;top:0;bottom:0;width:2px;opacity:0;
  background:linear-gradient(180deg,rgba(255,46,126,0) 0%,#FF2E7E 26%,#E6006F 52%,#FF2E7E 78%,rgba(255,46,126,0) 100%);
  box-shadow:0 0 16px 2px rgba(230,0,111,.5)}
.gb-door-panel.l::after{right:0}
.gb-door-panel.r::after{left:0}
.gb-door-clone{position:absolute;top:0;left:0;pointer-events:none}
.gb-door-panel.r .gb-door-clone{left:auto;right:0}
/* opening: seam ignites, then the doors part */
.gb-doorfx.go .gb-door-panel::after{animation:gbSeam .34s ease-out both}
.gb-doorfx.go .gb-door-panel.l{animation:gbDoorL .74s cubic-bezier(.76,0,.24,1) .12s both}
.gb-doorfx.go .gb-door-panel.r{animation:gbDoorR .74s cubic-bezier(.76,0,.24,1) .12s both}
@keyframes gbSeam{0%{opacity:0}35%{opacity:1}100%{opacity:.85}}
@keyframes gbDoorL{from{transform:translateX(0)}to{transform:translateX(-106%)}}
@keyframes gbDoorR{from{transform:translateX(0)}to{transform:translateX(106%)}}
/* closing: shutters meet, seam lights as they kiss */
.gb-doorfx.shut .gb-door-panel.l{transform:translateX(-106%)}
.gb-doorfx.shut .gb-door-panel.r{transform:translateX(106%)}
.gb-doorfx.shut.go .gb-door-panel.l{animation:gbShutL .46s cubic-bezier(.7,0,.3,1) both}
.gb-doorfx.shut.go .gb-door-panel.r{animation:gbShutR .46s cubic-bezier(.7,0,.3,1) both}
.gb-doorfx.shut.go .gb-door-panel::after{animation:gbSeamIn .25s ease-out .4s both}
@keyframes gbShutL{from{transform:translateX(-106%)}to{transform:translateX(0)}}
@keyframes gbShutR{from{transform:translateX(106%)}to{transform:translateX(0)}}
@keyframes gbSeamIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .gb-doorfx{display:none!important}
  .gb-toc.gb-v-settle{animation:none!important}
}
/* door dressing (phone): the cover's own content runs ~120px past a tall
   phone screen at Phase 2 spacing — in the closed state only, the hero's
   internal rhythm tightens so the door presents as one screen. The open
   book's hero keeps its Phase 2 spacing untouched. */
@media(max-width:700px){
  #view-toc.gb-v-closed .gb-hero-in{padding:30px 18px 20px}
  #view-toc.gb-v-closed .gb-hero-pre{margin-bottom:2px}
  #view-toc.gb-v-closed .gb-tagline{margin:12px 0 10px}
  #view-toc.gb-v-closed .gb-hero-pitch{margin-bottom:16px}
  #view-toc.gb-v-closed .gb-hero-cta{margin-bottom:18px}
  #view-toc.gb-v-closed .gb-hbtn{padding:13px 26px}
  #view-toc.gb-v-closed .gb-hero-stats{padding-top:12px}
  #view-toc.gb-v-closed .gb-hstat span{margin-top:5px}
  #view-toc.gb-v-closed .gb-hero-foot{margin-top:12px}
}