:root {
  --paper: #F7F1E3;
  --ink: #241C16;
  --graphite: #6E665C;
  --copper: #C86F32;
  --blue: #173A5E;
  --wash: #D7E4EA;
  --warning: #E24D2E;
  --sidebar: 292px;
  --font-token-mono: "Mono**";
  --font-token-inter: "Inter**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(23,58,94,.06) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(rgba(23,58,94,.045) 1px, transparent 1px) 0 0 / 52px 52px,
    radial-gradient(circle at 78% 12%, rgba(215,228,234,.72), transparent 25rem),
    var(--paper);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(110,102,92,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 72%, rgba(110,102,92,.11) 0 1px, transparent 2px);
  background-size: 170px 160px, 230px 210px;
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 3;
}

.elevator-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 34px 28px 28px;
  border-right: 1px solid rgba(36,28,22,.32);
  background: linear-gradient(180deg, rgba(247,241,227,.96), rgba(215,228,234,.34));
  z-index: 10;
}

.brand-wrap { position: relative; padding-bottom: 26px; }

.wordmark {
  position: relative;
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}

.wordmark::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -8px;
  width: var(--underline, 0%);
  height: 2px;
  background: var(--copper);
  transition: width .7s ease;
}

.shaft {
  position: absolute;
  right: 2px;
  top: 10px;
  height: 520px;
  width: 34px;
  color: var(--blue);
  opacity: .62;
  transform-origin: top;
  transition: transform .7s ease, top .7s ease, opacity .7s ease;
}

.shaft .brace {
  position: absolute;
  top: 0;
  left: -4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 142px;
  line-height: .8;
  transform: scaleY(4.4);
  font-weight: 400;
}

.shaft .right { left: 16px; }

.elevator-panel.bedrock-mode .shaft {
  top: 26px;
  transform: rotate(90deg) scaleY(.25) translateX(30px);
  opacity: .36;
}

.level-list {
  display: grid;
  gap: 13px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}

.level-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid rgba(110,102,92,.55);
  background: rgba(247,241,227,.58);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: lowercase;
  cursor: pointer;
}

.level-button::before,
.traced-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--copper);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path .75s cubic-bezier(.2,.7,.12,1);
  pointer-events: none;
}

.level-button:hover::before,
.level-button.active::before,
.chapter.visible .traced-box::before { clip-path: inset(0 0 0 0); }

.level-button.active {
  color: var(--blue);
  background: rgba(215,228,234,.5);
}

.level-number {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 24px;
  color: var(--copper);
  min-width: 31px;
}

.indicator-rail {
  position: absolute;
  right: 18px;
  top: 157px;
  width: 2px;
  height: 392px;
  background: rgba(23,58,94,.18);
}

.copper-indicator {
  position: absolute;
  left: -5px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 5px rgba(200,111,50,.14);
  transform: translateY(var(--indicator-y, 0px));
  transition: transform .55s cubic-bezier(.2,.8,.18,1);
}

.panel-note {
  position: absolute;
  left: 28px;
  right: 42px;
  bottom: 27px;
  margin: 0;
  color: var(--graphite);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
}

.descent { margin-left: var(--sidebar); }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 72px 8vw 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chapter:nth-child(even) { background: linear-gradient(120deg, transparent, rgba(215,228,234,.35)); }

.chapter-mark {
  position: absolute;
  top: 31px;
  left: 8vw;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--graphite);
  letter-spacing: .08em;
  text-transform: lowercase;
}

.scene {
  position: relative;
  width: min(960px, 100%);
  min-height: 520px;
  transform: translateY(var(--float-y, 18px));
  transition: transform .6s ease;
}

.chapter.visible .scene { transform: translateY(var(--float-y, 0px)); }

.opening-scene { margin-left: 4vw; }
.two-column, .kernel-scene, .copper-scene { display: grid; grid-template-columns: .84fr 1.16fr; gap: 42px; align-items: center; }
.theater-scene { display: grid; align-items: end; }
.bedrock-scene { display: grid; grid-template-columns: 1fr .82fr; gap: 70px; align-items: center; }

.sentence-block {
  position: absolute;
  left: 28px;
  top: 214px;
  width: min(560px, 90%);
  padding: 28px 30px 30px;
}

.traced-box {
  position: relative;
  border: 1px solid rgba(110,102,92,.42);
  background: rgba(247,241,227,.72);
}

h2 {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(43px, 6.2vw, 82px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.035em;
}

p {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.75;
}

.copy-stack { padding: 31px 30px; align-self: center; }
.small-copy { justify-self: end; max-width: 430px; }
.copy-stack h2 { font-size: clamp(38px, 5vw, 64px); }

.depth-label {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--blue);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 42px;
  font-style: italic;
}

svg { max-width: 100%; overflow: visible; }
.pulley-drawing { width: 480px; height: 390px; margin-left: 230px; }
.mask-drawing, .trapdoor-drawing { width: 100%; }
.theater-drawing, .roots-drawing { width: min(760px, 100%); }

.sketch-line, .sketch-box {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.faint { stroke: var(--graphite); opacity: .42; }
.copper-line { stroke: var(--copper); stroke-width: 2.5; }
.sag-cable { transform-origin: center; transition: d .2s linear, transform .35s ease; }
body.cable-sag .sag-cable { transform: translateY(7px) scaleY(1.025); }

.border-draw, .chapter.visible .sketch-box {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.chapter.visible .border-draw,
.chapter.visible .sketch-box { animation: drawStroke 1.55s ease forwards; }

@keyframes drawStroke { to { stroke-dashoffset: 0; } }

.svg-question {
  fill: var(--warning);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 118px;
  font-style: italic;
}

.svg-label {
  fill: var(--graphite);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
}

.margin-note {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--copper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
  text-align: left;
  bottom: 70px;
  left: 9vw;
}

.margin-note::before { content: "↳ "; color: var(--blue); }

.explanation-slip {
  position: absolute;
  left: calc(9vw + 170px);
  bottom: 50px;
  max-width: 330px;
  padding: 15px 18px;
  border: 1px solid rgba(200,111,50,.75);
  background: rgba(247,241,227,.95);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 20px;
  line-height: 1.25;
  transform: translateY(10px) rotate(-.7deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 4;
}

.explanation-slip.open {
  opacity: 1;
  transform: translateY(0) rotate(-.7deg);
}

.sediment {
  padding: 18px;
  display: grid;
  gap: 7px;
  transform: rotate(-1deg);
}

.sediment div {
  min-height: 48px;
  border: 1px solid rgba(36,28,22,.38);
  background: rgba(215,228,234,.42);
  display: flex;
  align-items: center;
  padding-left: 24px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--blue);
}

.sediment div:nth-child(2n) { background: rgba(200,111,50,.15); }
.sediment div:last-child { background: rgba(23,58,94,.14); color: var(--ink); }

.final-copy h2 { color: var(--blue); }

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .elevator-panel { position: sticky; top: 0; width: 100%; height: auto; padding: 18px; }
  .level-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .level-button { min-height: 40px; padding: 8px; }
  .indicator-rail, .shaft, .panel-note { display: none; }
  .descent { margin-left: 0; }
  .chapter { padding: 58px 22px; }
  .two-column, .kernel-scene, .copper-scene, .bedrock-scene { grid-template-columns: 1fr; }
  .pulley-drawing { margin-left: 20px; width: 340px; }
  .sentence-block { left: 0; top: 244px; }
  .explanation-slip { left: 26px; right: 26px; bottom: 34px; }
}