/* Main-page production binder. Load last; opt in with body.main-binder.
   Presentation only: original text, visibility states and actions remain native. */
@font-face {
  font-family: 'Caveat';
  src: url('./prototype-assets/Caveat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('./prototype-assets/Orbitron-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

/* One bounded paper book, not a full-window cinematic surface. */
body.main-binder {
  --ink: #292929;
  --faded-ink: #5d5b56;
  --paper: #f3eee3;
  --stamp: #8f3023;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --title: 'Orbitron', sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --rail-width: 46px;
  --font-body: var(--hand);
  --font-display: var(--title);
  --font-mono: var(--mono);
  --void-0: var(--paper);
  --void-1: #fffaf0;
  --void-2: #ebe5d8;
  --void-3: #e2dacb;
  --void-violet: #ebe5d8;
  --bone: var(--ink);
  --bone-mid: var(--faded-ink);
  --bone-dim: var(--faded-ink);
  --gold: var(--ink);
  --gold-leaf: var(--ink);
  --spice: var(--stamp);
  --spice-hot: var(--stamp);
  --spice-dim: var(--stamp);
  --hazard: var(--stamp);
  --cerulean: var(--faded-ink);
  --magenta: var(--stamp);
  --giger: var(--faded-ink);
  --giger-dim: var(--faded-ink);
  --glow-gold: none;
  --glow-teal: none;
  --glow-violet: none;
  --hazard-stripe: none;
  --check: none;
  --atmo-paper: var(--paper);
  --atmo-line: #827e74;
  --atmo-soft-line: #b9b2a3;
  --atmo-cta: var(--stamp);
  --atmo-cta-hover: #70251b;
  --atmo-depth: 1px 2px 0 #776e5b18;
  position: relative;
  width: calc(100% - 48px);
  max-width: 1360px;
  min-width: 0;
  margin: 24px auto 38px;
  padding: 0;
  overflow-x: clip;
  overflow-y: visible;
  color: var(--ink);
  color-scheme: light;
  font: 500 23px/1.35 var(--hand);
  background: var(--paper) url('./prototype-assets/paper-stock.webp') repeat;
  background-size: 512px auto;
  border: 1px solid #c7c2b7;
  box-shadow: 1px 2px 0 #d4d0c5, 3px 4px 0 #484745, 0 9px 20px #25252538;
}
html:has(> body.main-binder) { background: #656460; }
body.main-binder *,
body.main-binder *::before,
body.main-binder *::after { box-sizing: border-box; }
body.main-binder * {
  font-family: var(--hand);
  letter-spacing: normal;
  text-shadow: none;
}
body.main-binder::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: var(--rail-width);
  pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(circle at 50% 36px, #17110eea 0 4px, #89522bcc 5px 7px, #26180ee8 8px 9px, #a86d3655 10px 11px, transparent 12px),
    url('./prototype-assets/rusted-binding.svg?v=1'),
    linear-gradient(90deg, #20150f, #51321e 38%, #352418 78%, #170f0a);
  background-size: var(--rail-width) 128px, 100% 768px, 100% 100%;
  background-repeat: repeat-y, repeat-y, no-repeat;
  border-right: 2px solid #55351f;
  box-shadow: inset -2px 0 2px #130c08aa, 2px 0 3px #39231438;
}
body.main-binder::after { content: none; }
body.main-binder #app.terminal {
  width: 100%;
  min-height: 100vh;
  padding-left: var(--rail-width);
  isolation: isolate;
}
body.main-binder [hidden],
body.main-binder .hidden { display: none !important; }
body.main-binder a { color: var(--stamp); text-underline-offset: 4px; }
body.main-binder a:hover { color: #70251b; text-shadow: none; }
body.main-binder button { cursor: pointer; }
body.main-binder button:disabled { opacity: .55; cursor: wait; }
body.main-binder :is(a, button, input, select, textarea, summary, canvas):focus-visible {
  outline: 3px solid var(--stamp);
  outline-offset: 3px;
  box-shadow: none;
}
body.main-binder :is(h1, h2, h3, h4, p, li, a, label, .tab-text, .stage-body) {
  overflow-wrap: anywhere;
}
body.main-binder :is(.spread, .spread.flip, .archive-split, .join-wrap,
  .warriors-grid, .codex-grid, .launch-grid, .partners-grid, .notice-grid, .codex-stats) > * {
  min-width: 0;
}

/* Sticky navigation belongs to the paper, with the original brand and CTA. */
body.main-binder .hud-header {
  top: 0;
  width: 100%;
  min-width: 0;
  padding: 12px 24px;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--paper) url('./prototype-assets/paper-stock.webp') repeat;
  background-size: 512px auto;
  border-bottom: 1px solid #827e74;
  box-shadow: 0 3px 0 #776e5b18;
  backdrop-filter: none;
}
body.main-binder .hud-brand { min-width: 0; flex: 1 1 240px; }
body.main-binder .hud-brand > div:last-child { min-width: 0; }
body.main-binder .hud-title {
  font: 900 clamp(15px, 1.6vw, 21px)/1.25 var(--title);
  letter-spacing: -.035em;
  white-space: normal;
}
body.main-binder .hud-title a { color: var(--ink); }
body.main-binder .hud-subtitle { font: 500 20px/1.15 var(--hand); color: var(--faded-ink); }
body.main-binder .hud-glyph {
  background: transparent;
  border: 1px solid #827e74;
  border-radius: 0;
  box-shadow: none;
}
body.main-binder :is(.hud-glyph, .mandala-divider) [stroke] { stroke: #5d5b56; }
body.main-binder :is(.hud-glyph, .mandala-divider) [fill]:not([fill='none']) { fill: #8f3023; }
body.main-binder .hud-right { flex: 1 1 560px; flex-wrap: wrap; justify-content: flex-end; gap: 7px; min-width: 0; }
body.main-binder .hud-nav { flex-wrap: wrap; gap: 5px; }
body.main-binder .hud-dot { background: var(--stamp); box-shadow: none; animation: none; }
body.main-binder :is(.hud-tag, .hud-status) { font: 11px/1.35 var(--mono); color: var(--faded-ink); letter-spacing: .025em; white-space: normal; }

/* Pencil frames are foreground, edge-only overlays. No text is generated. */
body.main-binder :is(.ink-frame, .stat-box, .stage-card, .warrior-card, .codex-card,
  .launch-card, .p-card, .join-contact, .join-docs, .note-box, .join-form, .gate-card,
  .viewport-wrap, .lore-panel, .spread-art, .stage-rule-box, .rally-banner,
  .steps-card, .join-counter-box, .join-thanks, .art-break-text) {
  position: relative;
  border: 1px solid transparent;
  border-radius: 0;
  border-image: none;
  background: var(--paper) url('./prototype-assets/paper-stock.webp') repeat;
  background-size: 512px auto;
  color: var(--ink);
  box-shadow: 1px 2px 0 #776e5b18;
}
body.main-binder :is(.ink-frame, .stat-box, .stage-card, .warrior-card, .codex-card,
  .launch-card, .p-card, .join-contact, .join-docs, .note-box, .join-form, .gate-card,
  .viewport-wrap, .lore-panel, .spread-art, .stage-rule-box, .rally-banner,
  .steps-card, .join-counter-box, .join-thanks, .art-break-text)::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: 0;
  border-image: url('./prototype-assets/pencil-frame.svg') 16 / 12px / 3px stretch;
  background: none;
  box-shadow: none;
}
body.main-binder :is(.stage-card, .warrior-card):hover {
  transform: none;
  border-color: transparent;
  box-shadow: 1px 3px 0 #776e5b30;
}
body.main-binder .warrior-card:hover::before { border-color: transparent; }
body.main-binder :is(.stat-box, .stage-card, .warrior-card, .codex-card,
  .launch-card, .p-card, .join-contact, .join-docs, .note-box, .join-form,
  .stage-rule-box, .rally-banner, .steps-card, .join-counter-box) { padding: 24px 22px; }
body.main-binder .stat-box { padding: 17px 10px; }

/* Every chapter is an ivory spread. Explicit IDs defeat legacy ID washes. */
body.main-binder :is(#cover, #ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #initiation, #rights) {
  background: transparent;
  border-color: #b9b2a3;
  padding: 58px 32px 48px;
  scroll-margin-top: 160px;
}
body.main-binder .chapter-mark {
  top: 12px;
  left: 30px;
  color: #827e74;
  font: 600 25px/1 var(--hand);
  letter-spacing: .05em;
  font-style: normal;
  text-shadow: none;
}
body.main-binder :is(.chapter-header, .container) { max-width: 1180px; }
body.main-binder .chapter-header { margin-bottom: 28px; }
body.main-binder :is(.chapter-title, .spread-title, .art-break-title, .stage-title,
  .wc-title, .lc-title, .steps-title, .card-title, .gate-title, .codex-card h3, .p-card h4) {
  font: 700 clamp(28px, 3.3vw, 42px)/1.12 var(--hand);
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  letter-spacing: .01em;
  text-shadow: none;
}
body.main-binder :is(.stage-title, .wc-title, .lc-title, .card-title, .codex-card h3, .p-card h4) { font-size: 30px; }
body.main-binder :is(.chapter-desc, .prose-big, .lead-p, .monumental-sub,
  .art-break-sub, .stage-card p, .warrior-card p, .codex-card p, .launch-card p,
  .p-card p, .steps-card p, .steps-list, .lore-card p, .card-lede,
  .join-contact, .join-thanks p, .gate-sub) {
  color: var(--ink);
  font: 500 23px/1.38 var(--hand);
}
body.main-binder .chapter-desc { max-width: 850px; }
body.main-binder :is(.stage-note, .note-box p) {
  color: var(--faded-ink) !important;
  font: 500 22px/1.35 var(--hand) !important;
}
body.main-binder :is(.prose strong, .note-box strong) { color: var(--ink); font-weight: 700; }
body.main-binder .prose em { color: var(--stamp); font-style: italic; }
body.main-binder :is(.kicker, .manifesto-kicker, .chapter-plate, .stage-kicker,
  .wc-role, .wc-need, .lc-kicker, .steps-kicker, .cell-kicker, .note-title,
  .jcb-kicker, .gate-kicker, .stat-label, .doc-label, .mid-stat, .rule-title,
  .file-ref, .chip, .panel-kicker, .picker-label) {
  font: 12px/1.5 var(--mono);
  letter-spacing: .045em;
  color: var(--faded-ink);
  text-shadow: none;
}
body.main-binder :is(.manifesto-kicker, .kicker, .gate-kicker, .jcb-kicker) { color: var(--stamp); }
body.main-binder :is(.stat-num, .stage-num, .stage-num.final, .pc-num, .jcb-num) {
  font: 700 38px/1.05 var(--hand);
  color: var(--ink);
  text-shadow: none;
}
body.main-binder .jcb-num { font-size: 68px; }
body.main-binder :is(.wc-glyph, .cx-num, .gate-sigil) { color: var(--stamp); text-shadow: none; }
body.main-binder :is(.jcb-sub, .archive-fidelity, .gate-hint, .loader-sub) { font: 500 21px/1.3 var(--hand); color: var(--faded-ink); }

/* Cover campaign stays central; original artwork becomes a contained plate. */
body.main-binder #cover { padding-top: 38px; }
body.main-binder .cover-chapter { overflow: visible; }
body.main-binder .cover-chapter::before,
body.main-binder .cover-art-bg::after,
body.main-binder .art-break-img::after { content: none; }
body.main-binder .cover-art-bg {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto 28px;
  opacity: 1;
  filter: none;
  padding: 10px;
  border: 1px solid transparent;
  border-image: url('./prototype-assets/pencil-frame.svg') 16 / 12px / 3px stretch;
}
body.main-binder .cover-art-bg img { display: block; width: 100%; height: auto; max-height: none; object-fit: cover; }
body.main-binder .cover-content { max-width: 1180px; }
body.main-binder .monumental-title {
  font: 900 clamp(28px, 4.8vw, 64px)/1.12 var(--title);
  letter-spacing: -.045em;
  color: #202020;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  margin: 14px 0 20px;
}
body.main-binder .monumental-sub { max-width: 920px; margin-bottom: 24px; }
body.main-binder .proclamation {
  max-width: 100%;
  font: bold 13px/1.4 var(--mono);
  letter-spacing: .025em;
  color: var(--stamp);
  border: 3px double var(--stamp);
  border-radius: 0;
  background: transparent;
  padding: 8px 14px;
  text-shadow: none;
}
body.main-binder .codex-stats { gap: 12px; margin-top: 30px; }
body.main-binder .cover-actions { gap: 12px; }

/* Controls: graphite pencil buttons; rust-red typed participation stamps. */
body.main-binder :is(.nav-chip, .doc-btn, .tab-btn, .tool-btn, .color-swatch,
  .dl-btn, .stage-chip, .stage-chip.chip-final, .stage-chip.chip-gold, .thanks-again) {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 0;
  border-image: url('./prototype-assets/pencil-frame.svg') 16 / 8px / 2px stretch;
  background: #fffdf630;
  color: var(--ink);
  font: 600 22px/1.15 var(--hand);
  letter-spacing: normal;
  box-shadow: none;
  text-shadow: none;
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
body.main-binder :is(.nav-chip, .doc-btn, .dl-btn) { display: inline-flex; align-items: center; justify-content: center; }
body.main-binder :is(.dl-btn, .doc-btn.block) { width: 100%; }
body.main-binder :is(.nav-chip, .doc-btn, .tab-btn, .tool-btn, .color-swatch, .dl-btn):hover {
  color: var(--stamp);
  background: #b16f3718;
  border-color: var(--stamp);
  box-shadow: inset 0 -2px var(--stamp);
  filter: none;
  text-shadow: none;
}
body.main-binder :is(.nav-chip.cta, .gate-btn, .dl-btn.primary) {
  min-height: 52px;
  padding: 12px 17px;
  font: bold 14px/1.4 var(--mono);
  letter-spacing: .01em;
  color: #fff4dd;
  background: var(--stamp);
  border: 2px solid #642218;
  border-image: none;
  border-radius: 0;
  box-shadow: 2px 3px 0 #75412e55;
  text-shadow: none;
}
body.main-binder :is(.nav-chip.cta, .gate-btn, .dl-btn.primary):hover {
  color: #fff4dd;
  background: #70251b;
  border-color: #642218;
  box-shadow: 1px 1px 0 #75412e55;
  filter: none;
}
body.main-binder .cover-actions .cta-large { min-height: 58px; font-size: 15px; padding: 14px 22px; }
body.main-binder .cta-full { width: 100%; }
body.main-binder .stage-chip { font: bold 12px/1.4 var(--mono); color: var(--stamp); }
body.main-binder :is(.tab-btn.active, .tool-btn.active, .color-swatch.active,
  .tool-btn[aria-pressed='true'], .tab-btn[aria-selected='true'], .color-swatch[aria-checked='true']) {
  background: #393226;
  color: #fff4dd;
  border: 1px solid #393226;
  border-image: none;
  box-shadow: none;
}
body.main-binder .tab-btn.active :is(strong, small, .tab-index) { color: #fff4dd; text-shadow: none; }
body.main-binder .tab-text { text-align: left; }
body.main-binder .tab-text small { display: block; font: 11px/1.4 var(--mono); color: var(--faded-ink); }
body.main-binder .tab-index { font: 12px/1.4 var(--mono); color: inherit; flex-shrink: 0; }

/* Existing chapter grids remain spreads, with study artwork beside prose. */
body.main-binder :is(.spread, .spread.flip) { gap: 30px; align-items: start; }
body.main-binder .spread-art { padding: 12px 12px 0; overflow: visible; }
body.main-binder .spread-art img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: none; object-fit: cover; filter: none; }
body.main-binder .spread-caption {
  position: relative;
  inset: auto;
  padding: 12px 2px;
  font: 500 21px/1.25 var(--hand);
  color: var(--faded-ink);
  background: none;
  text-transform: none;
}
body.main-binder .pull-quote { background: #b16f3710; color: var(--ink); border-color: var(--stamp); font: 600 27px/1.28 var(--hand); }
body.main-binder .pull-quote small { font-size: 21px; }
body.main-binder .lc-list { color: var(--ink); font: 500 22px/1.35 var(--hand); }
body.main-binder .mandala-divider { padding: 16px 24px 4px; filter: none; opacity: .65; }
body.main-binder .oracle-strip { background: transparent; border-color: #b9b2a3; padding: 24px; }
body.main-binder .oracle-glyph { color: var(--stamp); animation: none; }
body.main-binder .oracle-text { font: 700 28px/1.2 var(--hand); background: none; color: var(--ink); -webkit-text-fill-color: currentColor; filter: none; }
body.main-binder .art-break {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 28px;
  min-height: 0;
  padding: 32px;
  overflow: visible;
  border-color: #b9b2a3;
  background: transparent;
}
body.main-binder .art-break-img { position: relative; inset: auto; filter: none; min-width: 0; align-self: start; }
body.main-binder .art-break-img img { display: block; width: 100%; height: auto; max-height: none; object-fit: cover; }
body.main-binder .art-break-text { padding: 28px 22px; max-width: none; }

/* Illustration workspace. The toolbar is a reserved row below the model;
   compact telemetry overlays stay above the canvas, with no toolbar occlusion.
   Paper is a wrapper fallback only; renderer owns the GL canvas background. */
body.main-binder .archive-sh { gap: 20px; }
body.main-binder .archive-split {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  height: auto;
  min-height: 0;
  max-height: none;
  align-items: start;
  gap: 22px;
}
body.main-binder .viewport-wrap { --study-height: clamp(480px, 40vw, 560px); }
body.main-binder .viewport-wrap,
body.main-binder .viewport-wrap[data-light-preset]:not([data-light-preset='moebius']),
body.main-binder .viewport-wrap[data-shading] {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: var(--paper) url('./prototype-assets/paper-stock.webp') repeat;
  background-size: 512px auto;
  box-shadow: none;
}
body.main-binder #canvas-container { position: relative; order: 2; width: 100%; height: var(--study-height); flex: 0 0 auto; background: transparent; }
body.main-binder #canvas-container canvas { display: block; width: 100%; height: 100%; background: transparent; }
body.main-binder :is(.viewer-quality, .stat-card, .compass-chip, .viewer-status, .toolbar) {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: #f3eee3;
  color: var(--ink);
  box-shadow: none;
  font: 12px/1.4 var(--mono);
  text-shadow: none;
}
body.main-binder :is(.viewer-quality, .stat-card, .compass-chip) {
  position: absolute;
  z-index: 11;
  border: 1px solid #b9b2a3;
  background: #f3eee3f5;
}
body.main-binder .viewer-quality { top: 12px; left: 12px; max-width: calc(100% - 24px); justify-content: flex-start; flex-wrap: wrap; gap: 5px; }
body.main-binder .stat-card { top: 12px; right: 12px; width: 220px; }
body.main-binder .stat-card:not([open]) { width: 160px; }
body.main-binder .stat-title { font: 700 13px/1.4 var(--mono); color: var(--ink); border-color: #b9b2a3; }
body.main-binder .stat-row { gap: 8px; flex-wrap: wrap; }
body.main-binder .stat-row :is(.k, .v, .mono-v) { font: 12px/1.4 var(--mono); color: var(--faded-ink); flex-shrink: 1; overflow-wrap: anywhere; }
body.main-binder .compass-chip { top: 70px; left: 12px; display: block; font: 500 20px/1.2 var(--hand); }
body.main-binder .viewer-status { order: 4; font: 12px/1.4 var(--mono); color: var(--faded-ink); }
body.main-binder .toolbar { order: 5; display: flex; flex-wrap: wrap; gap: 9px 12px; overflow: visible; border-top: 1px solid #b9b2a3; }
body.main-binder .tool-group { flex-wrap: wrap; gap: 4px; min-width: 0; }
body.main-binder :is(.group-label, .quality-label) { display: block; font: 11px/1.4 var(--mono); color: var(--faded-ink); }
body.main-binder :is(.toolbar, .viewer-quality) .tool-btn { min-height: 36px; padding: 6px 8px; font: 600 18px/1.1 var(--hand); }
body.main-binder .loader { inset: 0 0 auto; height: var(--study-height); background: #f3eee3f5; padding: 20px; }
body.main-binder .loader-text { font: 600 24px/1.25 var(--hand); color: var(--ink); text-shadow: none; }
body.main-binder .loader-spinner { border-color: #b9b2a3; border-top-color: var(--stamp); box-shadow: none; }
body.main-binder .lore-panel {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 22px 18px;
  scrollbar-color: #827e74 var(--paper);
}
body.main-binder .lore-panel::-webkit-scrollbar-thumb { background: #827e74; }
body.main-binder :is(.panel-kicker, .card-meta) { gap: 8px; flex-wrap: wrap; border-color: #b9b2a3; }
body.main-binder .archive-fidelity { background: #b16f3710; border-color: #827e74; }
body.main-binder .lore-card .dossier-source { font: 13px/1.45 var(--mono); }
body.main-binder .dossier-source a { color: var(--stamp); }
body.main-binder :is(.spec-grid, .spec) { border-color: #b9b2a3; border-radius: 0; font: 12px/1.45 var(--mono); }
body.main-binder .spec { gap: 12px; flex-wrap: wrap; }
body.main-binder .spec :is(.sl, .sv) { font: inherit; color: var(--faded-ink); overflow-wrap: anywhere; min-width: 0; }
body.main-binder :is(.chip-amber, .chip-teal) { background: transparent; border: 1px solid #827e74; color: var(--faded-ink); }
body.main-binder .color-swatch { text-align: left; justify-content: flex-start; font-size: 20px; }
body.main-binder .cs-dot { border-color: #827e74; }
body.main-binder .cs-gold .cs-dot { background: #d1b156; }
body.main-binder .cs-ivory .cs-dot { background: #eee7d8; }
body.main-binder .cs-tiger .cs-dot { background: #d87434; }
body.main-binder .viewport-wrap:fullscreen { --study-height: max(240px, 65vh); max-width: none; overflow-y: auto; }

/* Forms and native gate retain actual input, validation and state behavior. */
body.main-binder .form-row label { font: 600 23px/1.25 var(--hand); color: var(--ink); margin-bottom: 7px; }
body.main-binder :is(.form-row input, .form-row select, .form-row textarea, .gate-input) {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid #827e74;
  border-radius: 0;
  background: #fffaf0;
  color: var(--ink);
  color-scheme: light;
  font: 16px/1.5 var(--mono);
  letter-spacing: normal;
  box-shadow: none;
}
body.main-binder .form-row textarea { resize: vertical; min-height: 120px; }
body.main-binder :is(.form-row input, .form-row select, .form-row textarea, .gate-input):focus {
  border-color: var(--stamp);
  outline: 3px solid var(--stamp);
  outline-offset: 3px;
  box-shadow: none;
}
body.main-binder :is(.form-row input, .form-row textarea, .gate-input)::placeholder { color: #666157; opacity: 1; }
body.main-binder .form-row select option { background: #fffaf0; color: var(--ink); font: 16px var(--mono); }
body.main-binder .mail-link { font: 15px/1.5 var(--mono); overflow-wrap: anywhere; word-break: normal; }
body.main-binder .join-thanks { font: 600 24px/1.3 var(--hand); color: var(--ink); text-shadow: none; }
body.main-binder .join-thanks .thanks-again { background: #fffaf0; color: var(--ink); border-color: #827e74; }
body.main-binder .join-thanks .thanks-again:hover { background: #b16f3718; color: var(--stamp); border-color: var(--stamp); }
body.main-binder .access-gate {
  background: #656460;
  backdrop-filter: none;
  overflow-y: auto;
  padding: 28px 20px;
  align-items: safe center;
}
body.main-binder .gate-card { max-width: 520px; margin: auto; padding: 34px 28px; flex-shrink: 0; }
body.main-binder .gate-title { font-size: 38px; }
body.main-binder .gate-btn { width: 100%; }
body.main-binder .gate-input { text-align: center; }
body.main-binder .gate-error { min-height: 22px; color: var(--stamp); font: bold 13px/1.5 var(--mono); text-shadow: none; }
body.main-binder .gate-hint a { color: var(--stamp); text-decoration: underline; }
body.main-binder .site-footer {
  position: relative;
  background: transparent;
  color: var(--faded-ink);
  font: 500 21px/1.35 var(--hand);
  border-top: 0;
  padding: 24px 32px;
}
body.main-binder .site-footer::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 24px;
  right: 24px;
  height: 6px;
  pointer-events: none;
  background: url('./prototype-assets/pencil-rule.svg') center / 100% 100% no-repeat;
}
body.main-binder .footer-row { gap: 20px; flex-wrap: wrap; }
body.main-binder .footer-links a { color: var(--stamp); }
body.main-binder .spacecraft-flyover::before { content: none; }

/* Responsive book gutters and native grid reductions, usable from 320px up. */
@media (max-width: 1050px) {
  body.main-binder { width: calc(100% - 32px); margin-top: 16px; --rail-width: 36px; }
  body.main-binder :is(#cover, #ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #initiation, #rights) { padding-left: 24px; padding-right: 24px; }
  body.main-binder .hud-right { flex-basis: 100%; justify-content: flex-start; }
  body.main-binder .archive-split { grid-template-columns: minmax(0, 1fr); }
  body.main-binder .lore-panel { max-height: none; }
  body.main-binder :is(.spread, .spread.flip) { grid-template-columns: minmax(0, 1fr); }
  body.main-binder :is(.warriors-grid, .codex-grid, .launch-grid, .partners-grid, .notice-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.main-binder .codex-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.main-binder .stage-card { grid-template-columns: 60px minmax(0, 1fr); gap: 16px; }
  body.main-binder .stage-chip { grid-column: 2; justify-self: start; }
  body.main-binder .join-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.main-binder { width: calc(100% - 16px); margin: 8px auto 22px; --rail-width: 22px; font-size: 22px; }
  body.main-binder::before {
    background-image:
      radial-gradient(circle at 50% 32px, #17110eea 0 2px, #89522bcc 3px 4px, #26180ee8 5px 6px, #a86d3655 7px, transparent 8px),
      url('./prototype-assets/rusted-binding.svg?v=1'),
      linear-gradient(90deg, #20150f, #51321e 38%, #352418 78%, #170f0a);
    border-right: 1px solid #55351f;
  }
  body.main-binder .hud-header { padding: 10px 12px; gap: 8px; flex-direction: column; align-items: stretch; }
  body.main-binder .hud-brand { flex: 0 1 auto; }
  body.main-binder .hud-title { font-size: clamp(13px, 3.1vw, 19px); }
  body.main-binder .hud-subtitle { font-size: 18px; }
  body.main-binder .hud-tag { font-size: 10px; }
  body.main-binder .hud-right { flex: 0 1 auto; }
  body.main-binder .hud-status { display: flex; font-size: 10px; }
  body.main-binder .hud-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 6px; }
  body.main-binder .hud-nav .nav-chip { flex: 0 0 auto; font-size: 19px; padding: 6px 9px; }
  body.main-binder .hud-nav .nav-chip.cta { font: bold 12px/1.4 var(--mono); min-height: 44px; }
  body.main-binder :is(#cover, #ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #initiation, #rights) {
    padding: 46px 14px 32px;
    scroll-margin-top: 190px;
  }
  body.main-binder .chapter-mark { left: 14px; font-size: 23px; }
  body.main-binder .chapter-header { margin-bottom: 22px; }
  body.main-binder .monumental-title { font-size: clamp(24px, 5.7vw, 42px); }
  body.main-binder .cover-art-bg { height: auto; margin-bottom: 24px; }
  body.main-binder .cover-actions { align-items: stretch; }
  body.main-binder .cover-actions > a { flex: 1 1 130px; }
  body.main-binder .cover-actions > .cta-large { flex-basis: 100%; font-size: 13px; padding: 12px; }
  body.main-binder :is(.warriors-grid, .codex-grid, .launch-grid, .partners-grid, .notice-grid) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.main-binder .codex-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.main-binder .stat-label { font-size: 11px; }
  body.main-binder .stage-card { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 12px; }
  body.main-binder .stage-num { text-align: left; }
  body.main-binder .stage-chip { grid-column: auto; justify-self: start; }
  body.main-binder :is(.stage-card, .warrior-card, .codex-card, .launch-card, .p-card,
    .join-form, .join-contact, .join-docs, .note-box, .steps-card) { padding: 22px 17px; }
  body.main-binder .art-break { grid-template-columns: minmax(0, 1fr); padding: 22px 14px; gap: 22px; }
  body.main-binder .art-break-text { padding: 22px 17px; }
  body.main-binder .model-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.main-binder .tab-btn { padding: 8px; gap: 6px; min-width: 0; }
  body.main-binder .tab-text small { font-size: 10px; }
  body.main-binder .viewport-wrap { --study-height: clamp(380px, 58vw, 440px); }
  body.main-binder .viewer-quality { right: 12px; }
  body.main-binder .stat-card { top: 78px; }
  body.main-binder .compass-chip { display: none; }
  body.main-binder :is(.toolbar, .viewer-quality) .tool-btn { min-height: 44px; font-size: 18px; }
  body.main-binder .toolbar { gap: 12px; }
  body.main-binder .group-label { width: 100%; }
  body.main-binder .lore-panel { padding: 22px 17px; }
  body.main-binder .gate-card { padding: 28px 20px; }
  body.main-binder .gate-title { font-size: 34px; }
  body.main-binder .site-footer { padding: 22px 14px; }
  body.main-binder .footer-row { align-items: flex-start; gap: 12px; }
}
@media (max-width: 430px) {
  body.main-binder { --rail-width: 16px; }
  body.main-binder .hud-glyph { width: 30px; height: 30px; }
  body.main-binder .hud-brand { gap: 8px; }
  body.main-binder .model-tabs { grid-template-columns: minmax(0, 1fr); }
  body.main-binder .viewport-wrap { --study-height: 380px; }
  body.main-binder .proclamation { font-size: 11px; padding: 7px 9px; }
  body.main-binder .gate-title { font-size: 30px; }
  body.main-binder .access-gate { padding: 18px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.main-binder *,
  body.main-binder *::before,
  body.main-binder *::after { animation: none; transition: none; scroll-behavior: auto; }
}