/* Shared system. See design.md.
   Swiss / neo-brutalist, after apolinar.io/doublepyramid. */

:root {
  --ink: #111;
  --ink2: #777;
  --bg: #f6f6f6;
  --white: #fff;
  --hl: #FFFB05;
  --font: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --mono: var(--font); /* small labels use the body face; Courier at 12px was too hard to read */
  --border: 2px solid var(--ink);
  --shadow: 0.45ex 0.45ex 0 var(--ink);
  --shadow-lg: 0.7ex 0.7ex 0 var(--ink);
  --stage: var(--hl);
  --stage-soft: #fff9c2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hl); }
a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); }
a:hover { background: var(--hl); }
strong { font-weight: 700; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 24px 0;
}
.topnav a { border-bottom: none; }
.topnav-brand { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.topnav-end {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.topnav-links {
  display: flex;
  gap: 28px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.topnav-login {
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.topnav a[aria-current="page"] { background: var(--hl); }

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  width: 0%;
  background: var(--hl);
  border-bottom: 2px solid var(--ink);
  z-index: 100;
}

body.splash-open { overflow: hidden; }
body.splash-open > :not(.splash) {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(246, 246, 246, 0.45);
}
.splash-card {
  width: min(440px, 100%);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px 24px;
}
.splash-version {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}
.splash-warn {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.4;
  background: var(--hl);
  border: var(--border);
  padding: 10px 12px;
}
.splash-label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}
.splash-notes {
  margin: 0 0 22px;
  padding-left: 1.15em;
}
.splash-notes li {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
}
.splash-continue {
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 10px 16px;
  cursor: pointer;
}
.splash-continue:hover { background: var(--hl); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
}

.hero { padding: 8vh 0 6vh; }
.hero .eyebrow { margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(40px, 7.2vw, 88px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-transform: lowercase;
}
.hero h1.as-written {
  text-transform: none;
  max-width: none;
}
.hero h1 mark,
.thesis b,
.sec-intro b {
  background: var(--stage, var(--hl));
  color: var(--ink);
  padding: 0 0.08em;
}
.thesis {
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.4;
  max-width: 760px;
  margin: 0 0 34px;
}
.aside {
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink2);
  max-width: 640px;
  margin: -6px 0 28px;
}

.tag-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tag {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 7px 12px;
}
.tag.accent { background: var(--stage); }

section { padding: 7vh 0; border-top: 2px solid var(--ink); }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sec-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  background: var(--ink);
  color: var(--white);
  padding: 3px 9px;
}
h2 {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  text-transform: lowercase;
}
.sec-intro {
  font-size: 18px;
  color: var(--ink2);
  max-width: 720px;
  margin: 14px 0 0;
}
.sec-intro b { color: var(--ink); }

.opinion {
  background: var(--stage);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  margin: 28px 0 0;
}
.opinion .eyebrow { color: var(--ink); }
.opinion p {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  margin: 12px 0 0;
  letter-spacing: -0.01em;
}
.opinion .fine {
  font-size: 16px;
  font-weight: 400;
  margin-top: 16px;
  max-width: 680px;
}

/* White counterpart to .opinion. Used first on Stage 0; other stages later. */
.choice-box {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  margin: 28px 0 0;
  max-width: 720px;
}
.choice-box .eyebrow { color: var(--ink); }
.choice-box .choice-lead {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  margin: 12px 0 0;
  letter-spacing: -0.01em;
}
.choice-box .choice-row { margin-top: 18px; }
.choice-box .choice-detail {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.45;
  max-width: 640px;
  min-height: 0;
}
.choice-impact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.choice-impact .eyebrow { margin-bottom: 10px; }
.choice-impact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.choice-impact li {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: 12px 18px;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  font-size: 15px;
  line-height: 1.4;
}
.choice-impact li:first-of-type { border-top: 0; padding-top: 0; }
.impact-stage {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink2);
}
.impact-text { color: var(--ink); }

.panel {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 28px 22px 22px;
  margin-top: 30px;
}

[data-motif="stamp"] .sec-num {
  background: var(--stage);
  color: var(--ink);
}
[data-motif="wash"] { background: var(--stage-soft); }
[data-motif="stripe"] .sec-head {
  box-shadow: inset 0 -8px 0 var(--stage);
  padding-bottom: 12px;
}

.stage-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
a.stage-card {
  display: block;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
  border-bottom: var(--border);
  transition: transform 0.18s ease;
}
a.stage-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-lg);
  background: var(--stage-soft);
}
a.stage-card h2 { margin-top: 12px; }
a.stage-card .sec-num {
  background: var(--stage);
  color: var(--ink);
}

.takeaways { list-style: none; padding: 0; margin: 28px 0 0; }
.takeaways li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 2px solid var(--ink);
}
.takeaways p { margin: 0; }
.people { columns: 2; column-gap: 32px; padding: 0; margin: 18px 0 0; list-style: none; }
.people li { break-inside: avoid; margin: 0 0 8px; }
.note {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink2);
  margin: 18px 0 0;
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 9vh;
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.pager a + a { text-align: right; align-items: flex-end; }
.pager a:hover { background: var(--hl); }
.pager strong { font-weight: 700; text-transform: lowercase; }

.beats { list-style: none; padding: 0; margin: 8px 0 34px; max-width: 820px; }
.beats li {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.param-wrap { position: relative; display: inline; }
.param {
  display: inline;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: var(--hl);
  border: 0;
  border-bottom: 2px solid var(--ink);
  box-shadow: inset 0 -0.08em 0 var(--hl);
  padding: 0 0.15em;
  cursor: pointer;
  line-height: 1.35;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.param:hover,
.param[aria-expanded="true"] {
  background: var(--white);
  box-shadow: 0.15em 0.15em 0 var(--ink);
}
.param-link {
  background: none;
  box-shadow: none;
  padding: 0;
  font-weight: inherit;
}
.param-link:hover,
.param-link[aria-expanded="true"] {
  background: var(--hl);
  box-shadow: none;
}
.param:empty {
  display: none;
}
.param-pop {
  position: fixed;
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.param-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
}
.param-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  margin: 14px 0 0;
}
.param-links button {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
}
.param-pop label,
.param-pop .eyebrow { display: block; margin-bottom: 8px; }
.param-pop input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  border: var(--border);
  padding: 8px 10px;
  background: var(--bg);
  color: var(--ink);
}
.param-actions { display: flex; gap: 8px; margin-top: 10px; }
.param-option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
  background: var(--white);
  color: var(--ink);
  border: var(--border);
  padding: 8px 10px;
  margin-top: 8px;
  cursor: pointer;
}
.param-option:hover:not(:disabled),
.param-option[aria-current="true"] { background: var(--stage); }
.param-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.param-desc ol { margin: 0; padding-left: 1.2em; }
.param-desc li { margin: 0 0 8px; }
.ext {
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
}
.ext:hover,
.ext[aria-expanded="true"] { background: var(--hl); }
.ext-pop { z-index: 85; }
.ext-go { margin: 12px 0 0; }
.fold-panel {
  max-width: 720px;
  height: 0;
  overflow: hidden;
}
.fold-panel .fold-body { margin-top: 8px; }
.beats .fold-btn { margin-left: 8px; vertical-align: middle; }
.fold-btn {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--white);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 8px 12px;
  cursor: pointer;
}
.fold-btn[aria-expanded="true"] { background: var(--hl); }
.fold-body {
  border: var(--border);
  background: var(--white);
  padding: 14px 16px 6px;
  margin-top: 8px;
}
.fold-body p,
.fold-body li { font-size: 16px; }
.fold-body ul { margin: 0 0 12px; padding-left: 1.1em; }
#fold-memes { max-width: none; }
.meme-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.meme {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
}
.meme img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.meme[data-set-theme="nvidia"] img { object-position: center 22%; }
.meme[data-set-theme="eurovision"] img { object-position: center 18%; }
@media (max-width: 640px) {
  .meme-board { grid-template-columns: 1fr; }
}
.meme-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 0 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
}
.trust-line { color: #76b900; font-size: 22px; }
.oem-line { color: #000; font-family: Tahoma, sans-serif; font-size: 20px; }
.normal-line {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  font-size: 28px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.euro-line {
  color: #f5c518;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(245, 197, 24, 0.85);
}
.meme-paper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hl);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choice {
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 6px 12px;
  cursor: pointer;
}
.choice[aria-current="true"],
.choice:hover { background: var(--stage); }
.choice-detail {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.45;
  max-width: 640px;
  min-height: 3.2em;
}

section.stage-block {
  padding: 7vh 0 5vh;
  border-top: 14px solid var(--ink);
  background: var(--stage-soft);
  scroll-margin-top: 12px;
}
.stage-body .thesis { margin-top: 20px; }
.stage-now {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 90;
  background: var(--stage);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.stage-now[hidden] { display: none; }

footer { padding: 7vh 0 9vh; border-top: 2px solid var(--ink); }
.sig {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
}

@media (max-width: 860px) {
  .stage-index { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .stage-index { grid-template-columns: 1fr; }
  .topnav { flex-wrap: wrap; }
  .people { columns: 1; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { text-align: left; align-items: flex-start; }
  .stage-now { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Story pages: shared prose, dialogs, figures, the live verdict (v0.13). ---- */
.stage-body .prose { max-width: 720px; margin-top: 28px; }
.stage-body .prose p { margin: 0 0 14px; }
.stage-body .prose-after { margin-top: 28px; }
.notes { display: none; }

/* A dialog: an underlined term that opens a short note. Dotted, so it reads as different from a choice. */
.note-ref {
  font: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 2px dotted var(--ink);
  padding: 0;
  cursor: help;
  text-align: inherit;
}
.note-ref:hover,
.note-ref[aria-expanded="true"] { background: var(--hl); border-bottom-style: solid; }

.choice[disabled] { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; box-shadow: none; }
.choice-row[data-locked] .choice { cursor: pointer; }
.choice-lock {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink2);
  margin: 10px 0 0;
}

.figure {
  margin: 26px 0;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}
.figure figcaption {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink2);
  margin-top: 14px;
}
.bars { list-style: none; margin: 0; padding: 0; }
.bars li {
  display: grid;
  grid-template-columns: minmax(110px, 32%) 1fr 64px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  font-size: 15px;
}
.bars .bar { display: block; height: 16px; width: var(--w); background: var(--stage); border: var(--border); }
.bars .bar-val { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; }

.structure .s-row { display: flex; gap: 12px; }
.structure .s-box {
  flex: 1;
  border: var(--border);
  background: var(--stage-soft);
  padding: 10px 12px;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
}
.structure .s-box span { display: block; font-weight: 400; font-size: 14px; line-height: 1.4; margin-top: 4px; }
.structure .s-hold { background: var(--stage); }
.structure .s-arrow { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink2); padding: 6px 0; }
.structure .s-arrow::before { content: "\2193  "; }
.structure .s-flows { list-style: none; padding: 0; margin: 16px 0 0; font-size: 15px; line-height: 1.45; }
.structure .s-flows li { margin: 6px 0; }
.structure .s-flows b { background: var(--hl); padding: 0 5px; margin-right: 6px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #ddd;
  font-size: 15px;
  line-height: 1.45;
}
.timeline li:first-child { border-top: 0; }
.timeline .t-when { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--ink2); padding-top: 2px; }
.progress-total {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 14px;
}
.progress-total .pt-label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--ink2); }
.progress-total .pt-bar { height: 16px; border: var(--border); background: var(--white); }
.progress-total .pt-bar span { display: block; height: 100%; background: var(--stage); }
.progress-total .pt-val { font-weight: 700; }

.table-wrap { overflow-x: auto; }
.team-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.team-table th, .team-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #ddd; white-space: nowrap; }
.team-table thead th { font-family: var(--mono); font-size: 12px; font-weight: 400; text-transform: uppercase; color: var(--ink2); white-space: normal; }
.team-table .dots { letter-spacing: 2px; }

.chart svg { width: 100%; height: auto; display: block; color: var(--ink); }
.chart text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.chart .grid { stroke: #ddd; stroke-width: 1; }
.chart .target { fill: var(--stage); opacity: 0.55; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12px; margin: 10px 0 0; }
.chart .legend span::before {
  content: "";
  display: inline-block;
  width: 24px;
  border-top: 3px solid var(--ink);
  vertical-align: middle;
  margin-right: 8px;
}
.chart .legend span.dash::before { border-top-style: dashed; }
.chart .legend span.dot::before { border-top-style: dotted; }
.chart .legend span.target::before { border-top: 10px solid var(--stage); }

.play {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 8px 14px;
  cursor: pointer;
}
.play:hover:not(:disabled) { background: var(--stage); }
.play:disabled { opacity: 0.5; cursor: progress; }
.play-row { margin: 22px 0 0; }

/* The outcome box and score cards, shared by Stage 6 and the simulation page (/js/scorecards.js). */
.outcome-box {
  background: var(--stage);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.outcome-box .eyebrow { margin: 0 0 6px; }
.outcome-box h2 { font-size: clamp(30px, 5vw, 52px); margin: 0; }
.outcome-box p { margin: 10px 0 0; font-size: 18px; max-width: 720px; }
.outcome-box.miss { background: var(--white); }

.scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.score {
  display: flex;
  flex-direction: column;
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
  background: var(--white);
}
.score .tag { box-shadow: none; padding: 3px 8px; align-self: flex-start; margin: 0 0 12px; }
.score .tag.pass { background: var(--stage); }
.score .gauge .pass-zone { fill: var(--stage); }
.score h3 {
  font-size: 22px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.score .big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.score .lead { font-size: 17px; font-weight: 700; margin: 2px 0 10px; line-height: 1.3; }
.score .gauge { width: 100%; height: auto; display: block; margin: 0 0 10px; }
.score .gauge text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.score .gauge text.muted { fill: var(--ink2); }
.stats { list-style: none; margin: 14px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink2);
  font-size: 14px;
  line-height: 1.3;
}
.stats li span { color: var(--ink2); }
.stats li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats li[title] b { text-decoration: underline dotted; cursor: help; }

/* Stage 6: the story of your ending reads as prose; the others, when shown, as boxed cards. */
.endings { max-width: 720px; margin-top: 26px; }
.ending-story p { margin: 0; }
.ending-story .ending-head { font-weight: 700; margin-bottom: 6px; }
.ending-story.is-yours .ending-head { display: none; }
.ending-story.is-yours p { font-size: 19px; line-height: 1.55; }
.ending-story:not(.is-yours) { background: var(--white); border: var(--border); padding: 16px 18px; margin: 14px 0; }
.ending-story[hidden] { display: none; }
.endings .fold-btn { margin-top: 14px; }

@media (max-width: 760px) {
  .scores { grid-template-columns: 1fr; }
  .structure .s-row { flex-direction: column; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .bars li { grid-template-columns: 1fr 56px; }
  .bars .bar-label { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .topnav-end { flex-wrap: wrap; gap: 6px 16px; }
  .topnav-links { flex-wrap: wrap; gap: 6px 16px; font-size: 18px; }
  .topnav-login { font-size: 18px; }
  .team-table { font-size: 13px; }
  .team-table th, .team-table td { padding: 6px 5px; white-space: normal; }
  .team-table .dots { letter-spacing: 0; }
}

/* Locked choices (Stage 4 team): visible but not selectable, with a clear way to log in. */
.choice-row[data-locked] .choice[disabled] { text-decoration: none; }
.choice-row[data-locked] .choice[disabled][aria-current="true"] { opacity: 1; background: var(--stage); }
.choice-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--bg);
  border: var(--border);
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
}
.choice-lock p { margin: 0; font-weight: 700; }
.choice-lock button,
.login-submit {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  background: var(--white);
  color: var(--ink);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 6px 12px;
  cursor: pointer;
}
.choice-lock button:hover,
.login-submit:hover { background: var(--hl); }
.login-form { display: grid; gap: 10px; }
.login-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.login-form input {
  font: inherit;
  font-weight: 400;
  border: var(--border);
  padding: 8px 10px;
  background: var(--white);
  color: var(--ink);
}
.login-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.login-error { min-height: 1.2em; margin: 0; color: #9a1b1b; font-size: 14px; font-weight: 700; }
#login-note .login-submit { margin-top: 8px; }
.param-option:disabled[aria-current="true"] { opacity: 1; background: var(--stage); }
.param-links button.login-cta {
  font-size: 16px;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 6px 12px;
}
.param-links button.login-cta:hover { background: var(--hl); }

/* Stage 4: the login button sits beside the choice question. */
.choice-head { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.choice-head .choice-lead { margin: 0; }
.choice-head .play { margin: 0; }
.endings .fold-btn[aria-expanded="true"] { background: var(--stage); }

/* Stage 6: a small header over the score cards, and the "explore more" buttons below them. */
.scores-head { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 0; }
.explore-row { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 28px 0 0; }
.explore-row .play { margin: 0; text-decoration: none; display: inline-block; }
.scores-head + .explore-row { margin-top: 16px; }
#other-endings:not(:empty) { margin-top: 18px; }
.explore-row .play[aria-expanded="true"] { background: var(--stage); }

/* About page. */
.about > p, .about li { font-size: 18px; line-height: 1.55; max-width: 720px; }
.about > p { margin: 0 0 16px; }
.about-stages { margin: 0 0 18px; padding-left: 1.4em; }
.about-stages li { margin: 0 0 4px; }
.about-stages li::marker { font-family: var(--mono); font-size: 14px; }
.about .explore-row { margin: 22px 0 0; }
.version-card { background: var(--white); border: var(--border); box-shadow: var(--shadow-lg); padding: 20px 22px; max-width: 640px; }
.version-card p { margin: 0; }
.version-line { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.version-warn { background: var(--hl); border: var(--border); padding: 10px 12px; margin: 14px 0 !important; font-size: 17px; }
.version-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.version-card ul { margin: 8px 0 0; padding-left: 1.2em; }
.version-card li { font-size: 17px; margin: 0 0 4px; }
.about .sec-head { margin-bottom: 20px; }
.about-quote {
  margin: 0 0 16px;
  padding: 16px 18px;
  max-width: 720px;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
}
.about-quote p { margin: 0; font-size: 17px; line-height: 1.5; }

/* Readable small text. Small labels use the body face at 13-14px. Only eyebrows and table heads keep capitals,
   with light tracking. Captions, notes, tags, and diagram labels are plain sentence text. */
.eyebrow, .splash-label, .impact-stage, .stage-now, .version-label, .team-table thead th, .progress-total .pt-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.timeline .t-when { font-size: 14px; text-transform: none; font-weight: 700; }
.tag, .note, .sig, .choice-lock, .bars .bar-val, .structure .s-arrow, .chart .legend, .sec-num, .version-line {
  font-size: 14px;
  letter-spacing: 0;
}
.structure .s-arrow { font-style: italic; }
.chart text, .score .gauge text { font-size: 13px; }
.ending-story p + p { margin-top: 12px; }

/* Summary: a nested list inside one takeaway, and the closing line. */
.takeaways .takeaway-sub { list-style: disc; margin: 10px 0 0; padding-left: 1.2em; }
.takeaways .takeaway-sub li { display: list-item; padding: 4px 0; border-top: 0; }
.takeaways-more { margin: 28px 0 0; font-size: 18px; }