/* ════════════════════════════════════════════════════════════════════
   ZIION FIELD MANUAL — reusable guide template
   A page-native, editorial playbook system. Drop in a new content object
   (guides/<slug>.js) to publish another guide — credit worthiness,
   agentic readiness, etc. Cover · Contents · Chapter openers · Sections
   with a right-rail of callouts. Light, warm, serif, simple.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --paper:    #F4EEE2;          /* warm document ground */
  --sheet:    #FBF7EF;          /* page sheet */
  --sheet-2:  #F1E9DA;          /* inset */
  --ink:      #241C13;          /* warm near-black */
  /* wayfinding text passes WCAG AA on --paper: ink-2 ≈ 7.4:1, ink-3 ≈ 5.4:1 */
  --ink-2:    rgba(36,28,19,0.74);
  --ink-3:    rgba(36,28,19,0.66);
  --ink-4:    rgba(36,28,19,0.44); /* decorative only (counters, ghosts) */
  --line:     rgba(36,28,19,0.10);
  --line-2:   rgba(36,28,19,0.18);

  /* canonical neumorphism — the ONE formula, everywhere */
  --neu-raise: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.35),
               0 1px 2px rgba(36,28,19,0.06), 0 14px 30px -24px rgba(36,28,19,0.45);
  --neu-press: inset 0 0 0 1px rgba(255,255,255,0.9), inset 1.2px 1.2px 2px rgba(36,28,19,0.16),
               inset -1.2px -1.2px 2px rgba(255,255,255,0.85);

  --accent:   #2F8C55;          /* emerald — the move / primary */
  --accent-2: #246E42;
  --gold:     #B07A24;          /* clay-gold — capital / money signals only */
  --gold-rgb: 176,122,36;

  /* callout tints */
  --move-bg:     rgba(47,140,85,0.08);   --move-bd:   rgba(47,140,85,0.30);   --move-ink:   #246E42;
  --reframe-bg:  rgba(46,140,134,0.08);  --reframe-bd:rgba(46,140,134,0.28);  --reframe-ink:#1F6B66;
  --watch-bg:    rgba(176,122,36,0.10);  --watch-bd:  rgba(176,122,36,0.30);  --watch-ink:  #8A6018;
  --check-bg:    transparent;            --check-bd:  var(--line-2);

  --font-serif: 'Marcellus', Georgia, serif;   /* locked by 19Keys (H) — single-weight inscriptional */
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; /* locked by 19Keys (3) */
  --font-mono:  'Space Mono', 'JetBrains Mono', monospace;
  --font-pixel: 'Doto', 'JetBrains Mono', monospace;

  --r-2: 12px; --r-3: 18px; --r-4: 26px; --r-pill: 999px;
  --col: 760px;                 /* reading column */
  --doc: 1080px;                /* document width (prose + rail) */
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Running header ───────────────────────────────────────────────── */
.gd-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--line);
  background: rgba(244,238,226,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gd-brand { display: flex; align-items: center; gap: 10px; }
.gd-brand .mark { width: 22px; height: 22px; color: var(--ink); }
.gd-brand .wm { font-family: var(--font-serif); font-weight: 600; font-size: 17px; letter-spacing: .01em; }
.gd-topbar .crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* ── Embedded interactive module (e.g. the fleet diagram) ─────────── */
.gd-embed { margin: 4px 0; }
.gd-embed iframe {
  width: 100%; display: block; border: 1px solid var(--line-2);
  height: var(--embed-h, 700px);
  border-radius: var(--r-4); background: var(--sheet);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -50px rgba(36,28,19,.45);
}
/* the embedded app stacks to one column on small screens — give it room */
@media (max-width: 900px) { .gd-embed iframe { height: min(1020px, calc(var(--embed-h, 700px) + 320px)); } }
.gd-embed-cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3); text-align: center; margin-top: 12px;
}
@media print { .gd-embed { display: none; } }

/* ── Funnel CTA — cover button + closing panel ────────────────────── */
.cover-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  padding: 14px 24px; border-radius: var(--r-pill); background: var(--ink); color: var(--sheet);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  transition: transform .2s var(--ease), background .2s;
}
.cover-cta span { transition: transform .2s var(--ease); }
.cover-cta:hover { background: #000; transform: translateY(-1px); }
.cover-cta:hover span { transform: translateX(3px); }

.gd-cta { max-width: var(--doc); margin: 18px auto 0; }
.gd-cta-in {
  text-align: center; padding: 64px 40px; border-radius: var(--r-4);
  border: 1px solid var(--line-2);
  background: radial-gradient(120% 140% at 50% 0%, rgba(176,122,36,0.10), transparent 60%), var(--sheet);
}
.gd-cta-in h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px,3.4vw,42px); line-height: 1.08; margin: 14px 0 0; }
.gd-cta-in p { color: var(--ink-2); font-size: 17px; max-width: 46ch; margin: 14px auto 0; }
.gd-cta-btn {
  display: inline-block; margin-top: 28px; padding: 15px 30px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--sheet); font-weight: 600; font-size: 16px;
  transition: transform .2s var(--ease), background .2s;
}
.gd-cta-btn:hover { background: #000; transform: translateY(-1px); }
@media print { .gd-cta, .cover-cta { display: none; } }

/* ══ DEPTH UPGRADES — from the cofounder teardown ════════════════════
   A neumorphism on controls · B gradient+sheen buttons ·
   C cover cursor-shader · D sticky left-rail TOC with progress dots   */

/* C · cover cursor-shader glow (JS sets --gx/--gy) */
.gd-cover .cover-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side circle at var(--gx,50%) var(--gy,26%), rgba(255,240,208,0.18), transparent 62%);
  mix-blend-mode: screen; transition: background .08s linear;
}

/* B · gradient + inner sheen on the dark CTAs */
.cover-cta, .gd-cta-btn {
  background: linear-gradient(180deg, #3a3024, var(--ink));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(0,0,0,0.30), 0 10px 22px -12px rgba(0,0,0,0.45);
}
.cover-cta:hover, .gd-cta-btn:hover { background: linear-gradient(180deg, #4a3f30, #17110a); }

/* A · neumorphism on light controls — one canonical formula (see :root) */
.gd-toc-card { box-shadow: var(--neu-raise); }
.gd-chapter .numeral { box-shadow: var(--neu-raise); }
.callout { box-shadow: var(--neu-raise); }

/* D · sticky left-rail TOC with neumorphic progress dots */
.gd-readwrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 46px; align-items: start; }
.gd-flow { min-width: 0; }
.gd-railnav { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 92px); overflow-y: auto; padding: 118px 6px 40px 0; scrollbar-width: none; }
.gd-railnav::-webkit-scrollbar { width: 0; }
.gd-railnav .rn-grp { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 9px; }
.gd-railnav .rn-grp:first-child { margin-top: 0; }
.gd-railnav a.rn-grp:hover { color: var(--ink); }
.gd-railnav a { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; font-size: 12px; line-height: 1.28; color: var(--ink-3); transition: color .2s; }
.gd-railnav a:hover { color: var(--ink-2); }
.gd-railnav .rn-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 2px; background: var(--sheet-2);
  box-shadow: var(--neu-press);
  position: relative;
}
.gd-railnav a.done { color: var(--ink-2); }
.gd-railnav a.done .rn-dot { background: var(--accent); box-shadow: 0 1px 2px rgba(35,32,26,.25); }
/* progress is NOT color-only: done dots carry a check glyph */
.gd-railnav a.done .rn-dot::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 8px; line-height: 1; color: #FBF6EC; font-family: var(--font-sans);
}
.gd-railnav a.active { color: var(--ink); font-weight: 600; }
.gd-railnav a.active .rn-dot { background: radial-gradient(circle at 35% 35%, #5b8ef0, #2f5fd0); box-shadow: 0 0 0 3px rgba(58,111,208,.18), 0 1px 2px rgba(0,0,0,.25); }
@media (max-width: 1120px) { .gd-readwrap { grid-template-columns: 1fr; padding: 0 28px; } .gd-railnav { display: none; } }
@media print { .gd-railnav { display: none; } .gd-readwrap { display: block; max-width: var(--doc); } .cover-glow { display: none; } }

/* ── Generic eyebrow / label ──────────────────────────────────────── */
.gd-eyebrow, .gd-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.gd-label.accent { color: var(--accent); }

/* ── COVER ────────────────────────────────────────────────────────── */
.gd-cover {
  position: relative; min-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 44px 36px;
  color: #FBF6EC;
}
.gd-cover .scene {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.gd-cover .scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,16,10,0.46) 0%, rgba(20,16,10,0.14) 38%, rgba(20,16,10,0.66) 100%);
}
.gd-cover > * { position: relative; z-index: 2; }
.gd-cover .cover-top { display: flex; align-items: center; gap: 11px; }
.gd-cover .cover-top .mark { width: 30px; height: 30px; color: #FBF6EC; }
.gd-cover .cover-top .wm { font-family: var(--font-serif); font-weight: 600; font-size: 24px; letter-spacing: .04em; }
.gd-cover .cover-mid { max-width: 760px; margin-top: auto; }
.gd-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #FBF6EC;
  border: 1px solid rgba(255,255,255,0.5); border-radius: var(--r-pill);
  padding: 7px 16px; margin-bottom: 26px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gd-cover h1 {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(40px, 7vw, 86px); line-height: 1.0; margin-bottom: 22px;
  text-wrap: balance;
}
.gd-cover .sub { font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: rgba(251,246,236,0.88); max-width: 600px; }
.gd-cover .cover-meta {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.28);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 28px;
  font-size: 13.5px; color: rgba(251,246,236,0.82); max-width: 760px;
}
.gd-cover .cover-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,246,236,0.6); }

/* ── Document column ──────────────────────────────────────────────────
   Same grid geometry as .gd-readwrap (210px rail + reading column) so the
   contents, CTA panel, and footer share ONE left edge with the chapters. */
.gd-doc {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 210px minmax(0,1fr); column-gap: 46px;
}
.gd-doc > * { grid-column: 2; min-width: 0; }
@media (max-width: 1120px) { .gd-doc { grid-template-columns: 1fr; padding: 0 20px; } .gd-doc > * { grid-column: 1; } }

/* ── CONTENTS ─────────────────────────────────────────────────────── */
.gd-contents { padding: 96px 0 40px; }
.gd-contents h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px,5vw,52px); letter-spacing: -.02em; margin-bottom: 14px; }
.gd-contents .dek { font-size: 18px; color: var(--ink-2); max-width: 620px; margin-bottom: 44px; }
.gd-toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gd-toc-card {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-3);
  padding: 28px 30px; transition: border-color var(--ease) 180ms, transform var(--ease) 180ms;
}
.gd-toc-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
/* illustrated chapter thumbnail (cofounder-style) */
.gd-toc-card { padding: 0; overflow: hidden; }
.gd-toc-body { padding: 26px 30px 28px; }
.gd-toc-thumb {
  display: block; position: relative; height: 156px; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.gd-toc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gd-toc-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,10,0) 48%, rgba(20,16,10,0.36)); }
.gd-toc-card:hover .gd-toc-thumb img { transform: scale(1.035); }
.gd-toc-rn {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #FBF6EC; padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(20,16,10,0.42); border: 1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gd-toc-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 21px; margin-bottom: 16px; }
.gd-toc-card h3 .rn { color: var(--accent); }
.gd-toc-card ol { list-style: none; counter-reset: toc; }
.gd-toc-card ol li { counter-increment: toc; display: flex; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--ink-2); }
.gd-toc-card ol li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); padding-top: 3px; }
.gd-toc-card ol li a:hover { color: var(--ink); }

/* ── CHAPTER OPENER ───────────────────────────────────────────────── */
.gd-chapter { padding: 110px 0 28px; border-top: 1px solid var(--line); margin-top: 48px; }
.gd-chapter .numeral {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--move-bg); border: 1px solid var(--move-bd);
  font-family: var(--font-serif); font-size: 22px; color: var(--accent); margin: 10px 0 22px;
}
.gd-chapter h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(36px,6vw,64px); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 18px; max-width: 16ch; }
.gd-chapter .dek { font-size: 19px; color: var(--ink-2); max-width: 620px; margin-bottom: 28px; }
.gd-takeaways { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.gd-takeaways li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); max-width: 640px; }
.gd-takeaways li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.gd-hero-img {
  width: 100%; aspect-ratio: 16 / 7; border-radius: var(--r-4); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(120,82,40,0.16);
}
.gd-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── SECTION ──────────────────────────────────────────────────────── */
.gd-section { padding: 56px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.gd-section:first-of-type { border-top: 0; }
.gd-section .prose { min-width: 0; max-width: var(--col); }
.gd-section .sec-eyebrow { margin-bottom: 12px; }
.gd-section h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px,3.4vw,34px); letter-spacing: -.01em; line-height: 1.12; margin-bottom: 10px; }
.gd-section .sec-dek { font-size: 17px; color: var(--ink-2); margin-bottom: 28px; max-width: 60ch; }
.gd-section .prose p { font-size: 16px; color: var(--ink); margin-bottom: 16px; max-width: 64ch; }
.gd-section .prose p.lead { font-size: 17px; }
.gd-subhead { font-family: var(--font-serif); font-weight: 600; font-size: 20px; margin: 28px 0 10px; }
.gd-minilabel { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 12px; }
.gd-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 18px; }
.gd-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: var(--ink); max-width: 62ch; }
.gd-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .7; margin-top: 8px; flex-shrink: 0; }
.gd-pull {
  font-family: var(--font-serif); font-weight: 500; font-size: 23px; line-height: 1.35;
  color: var(--ink); border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 24px 0;
}
.gd-pull .gold { color: var(--gold); }

/* ── Right rail callouts ──────────────────────────────────────────── */
.gd-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.callout { border-radius: var(--r-3); padding: 18px 20px; font-size: 13.5px; line-height: 1.5; }
.callout .c-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 9px; display: block; }
.callout p { color: var(--ink); }
.callout.move    { background: var(--move-bg);    border: 1px solid var(--move-bd); }
.callout.move .c-label { color: var(--move-ink); }
.callout.reframe { background: var(--reframe-bg); border: 1px solid var(--reframe-bd); }
.callout.reframe .c-label { color: var(--reframe-ink); }
.callout.watch   { background: var(--watch-bg);   border: 1px solid var(--watch-bd); }
.callout.watch .c-label { color: var(--watch-ink); }
.callout.checklist { background: var(--check-bg); border: 1px solid var(--check-bd); }
.callout.checklist .c-label { color: var(--ink-3); }
.callout.checklist ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.callout.checklist li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; }
.callout.checklist li::before { content: ''; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--ink-4); margin-top: 2px; flex-shrink: 0; }
.callout .big { font-family: var(--font-pixel); font-weight: 700; font-size: 30px; color: var(--gold); line-height: 1; letter-spacing: .01em; }

/* ── FOOTER ───────────────────────────────────────────────────────── */
.gd-foot { border-top: 1px solid var(--line); margin-top: 64px; padding: 40px 0 80px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.gd-foot .wm { display: flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.gd-foot .wm .mark { width: 20px; height: 20px; }
.gd-foot .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .gd-toc-grid { grid-template-columns: 1fr; }
  .gd-section { grid-template-columns: 1fr; gap: 24px; }
  .gd-rail { position: static; }
  .gd-cover { padding: 28px 22px; min-height: 88vh; }
  .gd-doc { padding: 0 20px; }
  .gd-hero-img { aspect-ratio: 4 / 3; }
}

/* ── Print / PDF ──────────────────────────────────────────────────── */
@media print {
  .gd-topbar { display: none; }
  body { background: #fff; }
  .gd-chapter, .gd-cover { break-before: page; }
  .gd-section { break-inside: avoid; }
  .gd-rail { position: static; }
  .gd-readwrap { display: block; max-width: var(--doc); padding: 0; }
  .gd-railnav, .gd-toc-thumb { display: none; }
}

/* ── Accessibility & reduced motion ───────────────────────────────── */
a:focus-visible, button:focus-visible, .gd-toc-thumb:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.gd-railnav a:focus-visible { outline-offset: 1px; }
.gd-railnav a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .gd-cover .cover-glow { display: none; }
  .gd-toc-card:hover .gd-toc-thumb { transform: none; }
}
@media (max-width: 1120px) { .gd-readwrap { padding: 0 20px; } }
@media (max-width: 880px)  { .gd-readwrap { padding: 0 20px; } .gd-toc-thumb { height: 150px; } }

/* ══ STRUCTURAL COMPONENTS (audit fixes) ═════════════════════════════ */

/* anchors land below the sticky topbar */
.gd-section, .gd-chapter { scroll-margin-top: 76px; }

/* skip link — first tab stop */
.gd-skip {
  position: fixed; top: -48px; left: 16px; z-index: 60;
  background: var(--ink); color: var(--sheet); padding: 10px 18px;
  border-radius: 0 0 12px 12px; font-weight: 600; font-size: 14px;
  transition: top .2s var(--ease);
}
.gd-skip:focus { top: 0; }

/* reading progress bar */
.gd-progress {
  position: sticky; top: 0; z-index: 21; height: 3px;
  background: transparent; margin-top: -3px;
}
.gd-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* topbar nav: manuals link + mobile contents button */
.gd-topnav { display: flex; align-items: center; gap: 14px; margin-left: auto; margin-right: 18px; }
.gd-manuals-link { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.gd-manuals-link:hover { color: var(--ink); }
.gd-contents-btn {
  display: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 7px 14px; cursor: pointer; box-shadow: var(--neu-raise);
}
@media (max-width: 1120px) {
  .gd-contents-btn { display: inline-block; }
  /* contents drawer: the rail becomes a slide-over panel */
  body.gd-drawer-open .gd-railnav {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(320px, 86vw); max-height: none; padding: 24px 22px 40px;
    background: var(--sheet); border-right: 1px solid var(--line-2);
    box-shadow: 24px 0 60px -30px rgba(36,28,19,.45); overflow-y: auto;
  }
  body.gd-drawer-open::after {
    content: ''; position: fixed; inset: 0; z-index: 49; background: rgba(36,28,19,.32);
  }
}

/* next-manual card (footer chain) */
.gd-next {
  display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 22px;
  margin-top: 22px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--sheet); box-shadow: var(--neu-raise);
  transition: transform .2s var(--ease), border-color .2s;
}
.gd-next:hover { transform: translateY(-2px); border-color: var(--ink-4); }
.gd-next-thumb {
  display: block; height: 88px; border-radius: var(--r-2);
  background-size: cover; background-position: center; border: 1px solid var(--line);
}
.gd-next-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd-next-title { font-family: var(--font-serif); font-weight: 600; font-size: 19px; }
.gd-next-dek { font-size: 13.5px; color: var(--ink-2); }
.gd-next-arrow { font-size: 22px; color: var(--ink-3); transition: transform .2s var(--ease); }
.gd-next:hover .gd-next-arrow { transform: translateX(4px); }
@media (max-width: 640px) { .gd-next { grid-template-columns: 1fr auto; } .gd-next-thumb { display: none; } }

/* loading state (dynamic route only — prerendered pages ship content) */
.gd-loading {
  min-height: 60vh; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; color: var(--ink-2);
}

/* print: the cover must survive a white page */
@media print {
  .gd-progress, .gd-topnav, .gd-skip, .gd-next, .gd-loading { display: none !important; }
  .gd-cover { min-height: auto; color: var(--ink); padding: 40px 0; }
  .gd-cover .scene, .gd-cover .scrim, .gd-cover .cover-glow { display: none; }
  .gd-cover .cover-top .mark, .gd-cover .cover-top .wm { color: var(--ink); }
  .gd-cover .sub, .gd-cover .cover-meta, .gd-cover .cover-meta .k { color: rgba(36,28,19,.8); }
  .gd-pill { color: var(--ink); border-color: rgba(36,28,19,.4); }
  .gd-pull, .callout { break-inside: avoid; }
  .gd-section { break-inside: auto; }
}


/* ══ TYPE LOCK — Marcellus + Hanken Grotesk (19Keys, 2026-07-04) ═════
   Marcellus ships ONE weight and no italic: never fake-bold it, and give
   the big sizes inscription tracking instead of editorial-negative. */
body { font-synthesis-weight: none; font-synthesis-style: none; font-synthesis: none; }
.gd-cover h1, .gd-chapter h2, .gd-section h3, .gd-contents h2,
.gd-cta-in h2, .gd-subhead, .gd-pull, .gd-toc-card h3, .gd-next-title,
.gd-brand .wm, .gd-foot .wm, .gd-chapter .numeral {
  font-weight: 400;
}
.gd-cover h1 { letter-spacing: .01em; }
.gd-chapter h2, .gd-contents h2 { letter-spacing: .005em; }