:root {
  --ink: #26221f;
  --cream: #fff4d6;
  --white: #ffffff;
  --bg: #fdb927;
  --page: #fbf3df;
  --navy: #1b2140;
  --navy-2: #262e57;
  --navy-3: #10142b;
  --orange: #ff8552;
  --blue: #4c7be8;
  --purple: #a55be0;
  --green: #2fa66a;
  --pink: #f2799a;

  --ui: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui);
  min-height: 100vh;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

/* ---------- the site around the exhibit ---------- */
/* The page itself follows the main site (paper or charcoal, dot grid, serif); the visual sits in a
   cream "exhibit" card, so the contrast reads as a lit display case rather than a different site. */
:root {
  --site-paper: #ebebe9;
  --site-ink: #1c1c1c;
  --site-soft: #555553;
  --site-faint: #8a8a87;
  --site-rule: #c7c7c4;
  --serif: "Literata", Georgia, "Iowan Old Style", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --site-paper: #1d1d1c;
    --site-ink: #d6d6d3;
    --site-soft: #9c9c98;
    --site-faint: #6a6a67;
    --site-rule: #3a3a38;
  }
}
body {
  background-color: var(--site-paper);
  background-image: radial-gradient(circle, var(--site-rule) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  color: var(--site-ink);
}
.site-nav { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 28px; font: 400 13px var(--serif); letter-spacing: 0.03em; }
.site-nav a { color: var(--site-faint); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--site-ink); text-decoration: underline; text-underline-offset: 2px; }
.site-logo { display: inline-flex; }
.site-logo img { width: 22px; height: 22px; border-radius: 50%; }
.site-nav a:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 3px; }

.exhibit {
  position: relative;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--site-rule);
  border-radius: 32px;
  padding: 32px 40px 28px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
@media (max-width: 640px) {
  .exhibit { padding: 18px 14px; border-radius: 20px; }
}

/* ---------- header ---------- */

.top h1 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.top .sub {
  margin: 0 0 28px;
  max-width: 70ch;
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--site-soft);
}
.top .sub code { color: var(--site-ink); }
code { font-family: var(--mono); font-size: 0.92em; }

/* ---------- stage ---------- */
.stage {
  border: 4px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  background: var(--page);
}
#scene { display: block; width: 100%; height: auto; }

.f-page { fill: var(--page); }
.f-bg { fill: var(--bg); }
.f-ink { fill: var(--ink); }
.f-cream { fill: var(--cream); }
.f-white { fill: var(--white); }
.f-navy { fill: var(--navy); }
.f-navy-2 { fill: var(--navy-2); }
.f-navy-3 { fill: var(--navy-3); }
.f-orange { fill: var(--orange); }
.f-blue { fill: var(--blue); }
.f-purple { fill: var(--purple); }
.f-green { fill: var(--green); }
.f-pink { fill: var(--pink); }

.o, .o-mid, .o-thin, .o-cream, .o-cream-dash { stroke-linejoin: round; stroke-linecap: round; }
.o { stroke: var(--ink); stroke-width: 4; }
.o-mid { stroke: var(--ink); stroke-width: 3; }
.o-thin { stroke: var(--ink); stroke-width: 2.5; }
.o-cream { stroke: var(--cream); stroke-width: 3; }
.o-cream-dash { stroke: var(--cream); stroke-width: 3; stroke-dasharray: 2 10; }
.o-ink-dash { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }

.ui { font-family: var(--ui); font-weight: 700; }
.mono { font-family: var(--mono); font-weight: 700; }
.label { font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; }
.t-ink { fill: var(--ink); }
.t-cream { fill: var(--cream); }
.pill-tag { font-size: 13px; opacity: 0.6; }

/* ---------- scene frame: edge tabs, fused progress bar, corner replay ---------- */
.stage-wrap { position: relative; }
.stage { position: relative; overflow: visible; }
#scene { border-radius: 20px; }

/* Prev / Next: pills straddling the frame's side borders. The button is a tall, 48px-wide invisible
   strip (the hit area); the pill inside is what you see. On hover the pill nudges outward and grows
   into the scene to reveal where it goes (inward, so the label never runs off the page). */
.edge-tab {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.edge-prev { left: -24px; }
.edge-next { right: -24px; }
.edge-tab[hidden] { display: none; }
.tab-pill {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  min-width: 44px;
  padding: 0 12px;
  border: 4px solid var(--ink);
  background: var(--page);
  color: var(--ink);
  font: 700 15px var(--ui);
  white-space: nowrap;
  transform: translateY(-50%);
  transition: transform 0.25s ease, background 0.2s ease;
}
.tab-pill { border-radius: 28px; }
.edge-prev .tab-pill { left: 2px; }
.edge-next .tab-pill { right: 2px; }
.tab-arrow { font-size: 20px; line-height: 1; }
.tab-label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.3s ease, opacity 0.2s ease; }
.edge-tab:hover .tab-label, .edge-tab:focus-visible .tab-label { max-width: 320px; opacity: 1; }
.edge-prev:hover .tab-pill, .edge-prev:focus-visible .tab-pill { transform: translate(-4px, -50%); background: var(--cream); }
.edge-next:hover .tab-pill, .edge-next:focus-visible .tab-pill { transform: translate(4px, -50%); background: var(--cream); }
.edge-tab:focus-visible { outline: none; }
.edge-tab:focus-visible .tab-pill { outline: 3px solid var(--blue); outline-offset: 2px; }

/* progress: one segment per step, sitting on the frame's bottom border */
.steps {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: -9px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
.step {
  flex: 1;
  height: 12px;
  padding: 0;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--page);
  cursor: pointer;
  transition: background 0.3s ease, height 0.2s ease;
}
.step:hover { background: var(--cream); }
.step.done { background: var(--ink); }
.step.active { height: 18px; background: #18c6e6; }
.step:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* replay: a scene control, so it lives on the scene */
.stage-icon {
  position: absolute;
  right: 14px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--page);
  color: var(--ink);
  font: 700 20px var(--ui);
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.stage-icon:hover { background: var(--cream); }
.stage-icon:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* the one-time keyboard hint */
.key-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: 600 14px var(--ui);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.key-hint.on { opacity: 1; }

/* ---------- caption: badge, title and description in one row ---------- */
.panel { display: grid; gap: 14px; margin-top: 26px; }
.caption { display: flex; align-items: flex-start; gap: 16px; }
.cap-num {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-width: 54px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 0 0 3px var(--page), 0 0 0 6px #18c6e6;
  font: 700 20px var(--ui);
}
.cap-num small { font-size: 13px; opacity: 0.7; }
.cap-body h2 { margin: 0 0 2px; font-size: clamp(20px, 2.3vw, 26px); letter-spacing: -0.01em; }
.cap-body p { margin: 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.45; color: #4a433b; max-width: 80ch; }

.btn {
  font: 700 17px var(--ui);
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  cursor: pointer;
}
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn[hidden] { visibility: hidden; display: inline-block; }

/* phones: no side tabs; swipe the scene or use a compact bar */
.mobile-bar { display: none; }
@media (max-width: 640px) {
  .edge-tab { display: none; }
  .mobile-bar { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
  .mobile-bar .btn-primary { flex: 1; }
  .stage { border-width: 3px; border-radius: 16px; }
  #scene { border-radius: 13px; }
  .steps { left: 16px; right: 16px; }
  .caption { gap: 12px; }
  .stage-icon { width: 30px; height: 30px; right: 8px; bottom: 12px; font-size: 15px; border-width: 2px; }
  .tracker-row { flex-direction: column; align-items: flex-start; }
  .tracker-row .tracker-label { align-self: flex-start; }
}

/* ---------- glossary terms and tooltips ---------- */
.term {
  text-decoration: underline dotted 2px;
  text-underline-offset: 3px;
  cursor: help;
  border-radius: 3px;
}
.term:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-tip] { cursor: help; }
.btn[data-tip], .step[data-tip], .stage-icon[data-tip] { cursor: pointer; }
.tip {
  position: absolute;
  z-index: 10;
  max-width: 320px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  font: 500 14px/1.4 var(--ui);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tip.on { opacity: 1; transform: none; }

/* scene bits that link to each other on hover */
.hover-ring { transition: opacity 0.15s ease; pointer-events: none; }
.linked rect { stroke: #18c6e6; stroke-width: 4; }


/* ---------- follow one byte ---------- */
.tracker { grid-column: 1 / -1; }
.tracker-row { display: flex; align-items: center; gap: 10px; }
.tracker-where { margin: 8px 0 0; font: 500 16px/1.4 var(--ui); }
.tracker-where:empty { display: none; }
.tracker-where b { font-family: var(--mono); }
.tracker-label {
  flex: none;
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: 700 12px var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.tracker-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.chip {
  font: 700 12px var(--mono);
  padding: 3px 5px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 45%, white);
  color: var(--ink);
  cursor: pointer;
  white-space: pre;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--page), 0 0 0 6px #18c6e6; }
.chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* the followed bytes, wherever they are in the scene */
.followable { cursor: pointer; }
.pin { opacity: 0; }
.tagged { filter: drop-shadow(0 0 3px #18c6e6) drop-shadow(0 0 2px #18c6e6); }
.tagged .pin { opacity: 1; }

/* ---------- what if… (editable request) ---------- */
.whatif {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 2px dashed #b9ab92;
  border-radius: 16px;
}
.wf-field, .wf-group { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--ui); }
.wf-field input {
  font: 700 14px var(--mono);
  width: min(360px, 60vw);
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in srgb, var(--pink) 30%, white);
  color: var(--ink);
}
.wf-field input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wf-group { gap: 0; }
.wf-group > :first-child { margin-left: 6px; border-radius: 999px 0 0 999px; }
.wf-group > :last-child { border-radius: 0 999px 999px 0; }
.wf-opt {
  font: 700 13px var(--mono);
  padding: 4px 10px;
  border: 2px solid var(--ink);
  margin-left: -2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.wf-opt[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.wf-opt:focus-visible, .wf-reset:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; position: relative; }
.wf-reset { font: 600 13px var(--ui); background: none; border: 0; text-decoration: underline; cursor: pointer; color: #5d554c; }
.wf-note { flex-basis: 100%; margin: 0; font: 500 14px/1.4 var(--ui); color: #4a433b; }