:root {
  --graphite: #2b2b26;
  --graphite-deep: #1c1c18;
  --graphite-mid: #4a4a3f;
  --graphite-soft: #6b6b5a;
  --wall: #cdd5c9;
  --wall-soft: #dee3da;
  --wall-line: #b3bcae;
  --wood: #8a6a3a;
  --wood-light: #b8945f;
  --ok: #4f7a52;
  --bad: #a6453a;
  --ink-text: #f2f1e8;
  --ink-text-dim: #cfd0c4;
  --wall-text: #26261f;
  --wall-text-dim: #55564a;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --radius: 3px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--wall); color: var(--wall-text);
  font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; color: inherit; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
a { color: inherit; } img, svg { max-width: 100%; display: block; } button { font: inherit; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--wood); color: var(--ink-text); padding: 0.75em 1.25em; border-radius: var(--radius); }
.skip-link:focus { left: 1em; top: 1em; }
:focus-visible { outline: 3px solid var(--wood); outline-offset: 2px; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1em; max-width: var(--max); margin: 0 auto; padding: 1.4em 1.5em; font-family: var(--mono); font-size: 0.82rem; }
.site-mark { text-decoration: none; font-weight: 500; color: var(--wall-text); }
.site-nav { display: flex; align-items: center; gap: 1.4em; flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--wall-text-dim); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--wood); border-color: currentColor; }
.language-link { color: var(--wall-text) !important; font-weight: 500; }

.hero { background: var(--graphite); color: var(--ink-text); padding: 2.4em 1.5em 3em; }
.hero-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2.5em; align-items: center; }
.eyebrow { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood-light); margin: 0 0 0.9em; }
.scene .eyebrow, .closing-scene .eyebrow, .sources-scene .eyebrow { color: var(--wood); }
.hero h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 0.4em; font-style: italic; }
.hero-standfirst { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--ink-text-dim); max-width: 34em; margin: 0 0 1.4em; }
.hero-instruction { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--ink-text); font-family: var(--mono); font-size: 0.85rem; border-bottom: 1px solid var(--graphite-soft); padding-bottom: 0.3em; }
.hero-instruction:hover, .hero-instruction:focus-visible { border-color: var(--wood-light); color: var(--wood-light); }
@media (prefers-reduced-motion: no-preference) { .hero-instruction:hover .instruction-mark { animation: bob 0.9s ease-in-out infinite; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.hero-visual { position: relative; }
.hero-chart { width: 100%; height: auto; }
.frame-wood rect { fill: var(--wood); opacity: 0.85; }
.chart-ticks path { stroke: var(--graphite-soft); stroke-width: 1; opacity: 0.5; }
.chart-line { stroke-width: 2.5; }
.line-a { stroke: var(--wood-light); }
.line-b { stroke: var(--ink-text-dim); stroke-dasharray: 3 5; }
.chart-marks circle.mark-a { fill: var(--wood-light); }
.chart-marks circle.mark-b { fill: var(--ink-text-dim); }
.chart-label { font-family: var(--mono); font-size: 20px; }
.label-a { fill: var(--wood-light); } .label-b { fill: var(--ink-text-dim); }
.hero-caption { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-text-dim); margin-top: 0.6em; padding: 0 0.2em; }

.stat-band { background: var(--wall-soft); border-top: 1px solid var(--wall-line); border-bottom: 1px solid var(--wall-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; }
.stat-item { padding: 1.6em 1.4em; border-left: 1px solid var(--wall-line); container-type: inline-size; display: flex; flex-direction: column; gap: 0.3em; }
.stat-item:first-child { border-left: none; }
.stat-item strong { font-family: var(--mono); font-weight: 500; color: var(--wood); font-size: clamp(1.35rem, 12cqi, 2rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-item span { font-size: 0.92rem; line-height: 1.3; }
.stat-item small { font-size: 0.78rem; color: var(--wall-text-dim); line-height: 1.35; }

.scene { padding: 4.4em 1.5em; }
.scene-plaster { background: var(--wall-soft); }
.scene-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 1.6em; row-gap: 1.6em; }
.scene-index { font-family: var(--mono); font-size: 0.85rem; color: var(--wall-line); padding-top: 0.3em; }
.scene-intro { grid-column: 2; max-width: 42em; }
.scene-intro h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; margin-bottom: 0.5em; }
.scene-body { grid-column: 2; max-width: 42em; display: flex; flex-direction: column; gap: 1.1em; font-size: 1.04rem; }
.scene-body p { margin: 0; }
.inline-source { color: var(--wood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Game */
.game { grid-column: 2; max-width: 44em; }
.game-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.game-card { background: var(--wall); border: 1px solid var(--wall-line); border-radius: var(--radius); padding: 1.3em; display: flex; flex-direction: column; gap: 0.8em; }
.game-card h3 { font-size: 1.05rem; }
.score-track { height: 16px; background: var(--wall-soft); border: 1px solid var(--wall-line); border-radius: 999px; overflow: hidden; }
.score-fill { display: block; height: 100%; background: var(--wood); border-radius: 999px 0 0 999px; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .score-fill { transition: none; } }
.game-pick { font-family: var(--mono); font-size: 0.82rem; padding: 0.7em 1em; border-radius: var(--radius); border: 1px solid var(--graphite); background: var(--graphite); color: var(--ink-text); cursor: pointer; }
.game-pick:hover:not(:disabled) { background: var(--wood); border-color: var(--wood); }
.game-pick:disabled { opacity: 0.5; cursor: not-allowed; }
.game-result { min-height: 1.6em; margin-top: 1em; font-size: 0.98rem; font-weight: 600; }
.game-result[data-state='correct'] { color: var(--ok); }
.game-result[data-state='wrong'] { color: var(--bad); }
.game-stats { display: flex; gap: 2em; margin-top: 1em; }
.game-stats div { display: flex; flex-direction: column; }
.game-stats strong { font-family: var(--mono); font-size: 1.6rem; color: var(--graphite); }
.game-stats span { font-size: 0.78rem; color: var(--wall-text-dim); }
.game-chance-note { margin-top: 1em; color: var(--wall-text-dim); font-size: 0.92rem; }
.game-method { margin-top: 0.8em; font-size: 0.82rem; color: var(--wall-text-dim); }

.closing-scene { background: var(--graphite); color: var(--ink-text); padding: 5em 1.5em; text-align: center; }
.closing-grid { max-width: 34em; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7em; align-items: center; }
.closing-scene h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; font-style: italic; }
.closing-scene p { color: var(--ink-text-dim); font-size: 1.05rem; }
.closing-link { color: var(--ink-text); font-family: var(--mono); font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--graphite-soft); padding-bottom: 0.2em; margin-top: 0.4em; }
.closing-link:hover { border-color: var(--wood-light); color: var(--wood-light); }

.sources-scene { background: var(--wall); padding: 4.4em 1.5em; }
.sources-wrap { max-width: var(--max); margin: 0 auto; }
.sources-heading { max-width: 42em; margin-bottom: 2em; }
.sources-heading h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-bottom: 0.5em; }
.method-note { color: var(--wall-text-dim); font-size: 0.9rem; margin-top: 0.8em; }
.source-list { display: flex; flex-direction: column; }
.source-row { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 1em; align-items: start; padding: 1.1em 0; border-top: 1px solid var(--wall-line); }
.source-row:last-child { border-bottom: 1px solid var(--wall-line); }
.source-number { font-family: var(--mono); font-size: 0.78rem; color: var(--wall-text-dim); padding-top: 0.2em; }
.source-type { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wood); }
.source-copy h3 { font-family: var(--body); font-weight: 600; font-size: 0.98rem; margin: 0.2em 0 0.2em; }
.source-copy p { font-size: 0.88rem; color: var(--wall-text-dim); margin: 0; }
.source-link { font-family: var(--mono); font-size: 0.8rem; text-decoration: none; color: var(--wall-text); white-space: nowrap; align-self: center; }
.source-link:hover { color: var(--wood); }

.site-footer { max-width: var(--max); margin: 0 auto; padding: 2em 1.5em 3em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; font-family: var(--mono); font-size: 0.8rem; color: var(--wall-text-dim); }
.site-footer a { text-decoration: none; color: inherit; margin-right: 1.2em; }
.site-footer a:hover { color: var(--wood); }
.site-footer div:last-child a:last-child { margin-right: 0; }

.back-top { position: fixed; right: 1.2em; bottom: 1.2em; z-index: 20; background: var(--graphite); color: var(--ink-text); font-family: var(--mono); font-size: 0.78rem; padding: 0.6em 0.9em; border-radius: 999px; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.back-top.is-enhanced.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .back-top { transition: none; } }

.not-found { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2em; background: var(--graphite); color: var(--ink-text); font-family: var(--body); }
.not-found h1 { font-family: var(--display); font-size: 2.2rem; margin: 0.2em 0; }
.text-link { color: var(--wood-light); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 26em; margin: 0 auto; }
  .scene-grid { grid-template-columns: 1fr; }
  .scene-index { display: none; }
  .scene-intro, .scene-body, .game { grid-column: 1; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(2n) { border-left: 1px solid var(--wall-line); }
  .stat-item:nth-child(1), .stat-item:nth-child(3) { border-left: none; }
}
@media (max-width: 640px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.6em; }
  .hero { padding: 2em 1.1em 2.4em; }
  .scene, .closing-scene, .sources-scene { padding: 3em 1.1em; }
  .game-board { grid-template-columns: 1fr; }
  .game-stats { gap: 1.4em; }
  .source-row { grid-template-columns: 1fr; gap: 0.3em; }
  .source-number { display: none; }
}
@media (max-width: 400px) {
  .stat-band { grid-template-columns: 1fr; }
  .stat-item { border-left: none !important; border-top: 1px solid var(--wall-line); }
  .stat-item:first-child { border-top: none; }
}