:root {
  /* Typography compliance notes: IBM Plex Mono annotations, rare Fraunces asides, IBM Plex Mono** Mono* from Google Fonts. */
  --cream: #F6E8C8;
  --red: #D7352A;
  --chalk: #FFF9EA;
  --ink: #101010;
  --brown: #6B3F22;
  --mustard: #E3A51A;
  --cobalt: #1757C2;
  --display: "Commissioner", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--display);
  overflow-x: hidden;
}

a { color: inherit; }

.decision-table {
  position: relative;
  min-height: 600vh;
  background:
    radial-gradient(circle at 13% 12%, rgba(227,165,26,0.2), transparent 24rem),
    radial-gradient(circle at 90% 44%, rgba(215,53,42,0.13), transparent 26rem),
    linear-gradient(110deg, var(--cream), var(--chalk) 47%, var(--cream));
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(16,16,16,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(107,63,34,.018) 0 1px, transparent 1px 5px);
}

.ribbon {
  position: fixed;
  left: 9vw;
  top: -8vh;
  width: 9px;
  height: 128vh;
  background: var(--ink);
  transform-origin: top center;
  transform: rotate(-18deg);
  z-index: 4;
  box-shadow: 22vw 34vh 0 -2px var(--red), 48vw 72vh 0 -1px var(--cobalt), 72vw 21vh 0 -2px var(--mustard);
}

.chapter-room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px);
  border-bottom: 3px solid rgba(16,16,16,.18);
}

.room-copy {
  position: relative;
  z-index: 12;
  max-width: 650px;
}

.room-copy h1,
.room-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .86;
}

.room-copy h1 { font-size: clamp(4rem, 12vw, 13rem); max-width: 1180px; }
.room-copy h2 { font-size: clamp(3.2rem, 8.2vw, 9rem); }

.room-copy p {
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.5;
  font-weight: 500;
}

.mono,
.shape-note,
.annotation,
.photo-proof span,
.tradeoff-tags,
.stamp {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mono { font-size: .86rem; margin-bottom: 1.1rem; }

.shape-circle,
.shape-rail,
.shape-note,
.photo-proof,
.mustard-arc,
.cobalt-block,
.table-edge,
.door-shape,
.cobalt-door {
  position: absolute;
  will-change: transform;
}

.shape-circle { border-radius: 50%; }
.red { background: var(--red); }
.cobalt { background: var(--cobalt); }
.mustard { background: var(--mustard); }

.shape-rail { background: var(--ink); z-index: 8; }
.shape-note { z-index: 15; background: var(--chalk); border: 2px solid var(--ink); padding: .6rem .8rem; font-size: .74rem; box-shadow: 8px 8px 0 var(--ink); }

.opening { display: flex; align-items: center; }
.hero-copy { margin-left: 7vw; transform: translateY(2vh); }
.hero-copy p:last-child { max-width: 560px; margin-left: 34vw; background: var(--chalk); padding: 1.2rem 1.4rem; border-left: 9px solid var(--mustard); box-shadow: 16px 16px 0 rgba(107,63,34,.28); }
.anchor-red { width: 42vw; aspect-ratio: 1; right: -15vw; top: 4vh; z-index: 2; }
.cost-orbit { width: 17vw; aspect-ratio: 1; left: 18vw; bottom: 8vh; z-index: 5; }
.opening-rail { width: 3px; height: 84vh; left: 50vw; top: 8vh; transform: rotate(63deg); }
.branch-line { position: absolute; left: 20vw; top: 48vh; width: 55vw; height: 2px; background: var(--ink); z-index: 10; transform: rotate(-8deg); }
.branch-line:before, .branch-line:after { content: ""; position: absolute; height: 2px; width: 22vw; background: var(--ink); right: 9vw; transform-origin: right; }
.branch-line:before { transform: rotate(34deg); }
.branch-line:after { transform: rotate(-42deg); }
.label.cost { left: 14vw; top: 32vh; }
.label.time { right: 29vw; top: 23vh; background: var(--mustard); }
.label.trust { right: 13vw; bottom: 25vh; background: var(--cobalt); color: var(--chalk); }
.label.consequence { left: 45vw; bottom: 14vh; background: var(--red); color: var(--chalk); }

.photo-proof {
  z-index: 7;
  background: var(--chalk);
  border: 8px solid var(--chalk);
  box-shadow: 20px 24px 0 rgba(107,63,34,.38);
  filter: sepia(.34) contrast(1.04) saturate(.78);
}
.photo-proof span { display: block; padding: .55rem .3rem .1rem; font-size: .68rem; color: var(--brown); }
.photo-scene { height: 100%; min-height: 180px; background-size: 55px 55px, cover; position: relative; overflow: hidden; }
.photo-scene:after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle, rgba(16,16,16,.11) 0 1px, transparent 1px 4px), linear-gradient(135deg, rgba(255,249,234,.12), rgba(107,63,34,.22)); mix-blend-mode: multiply; }
.ledger { background: linear-gradient(90deg, transparent 0 19%, rgba(16,16,16,.28) 20% 21%, transparent 22%), repeating-linear-gradient(0deg, #b98f58 0 8px, #d7b77f 8px 16px); }
.meeting { background: radial-gradient(circle at 30% 35%, #101010 0 17px, transparent 18px), radial-gradient(circle at 62% 42%, #101010 0 15px, transparent 16px), linear-gradient(25deg, #8c623e, #ddc18f); }
.calculator { background: repeating-linear-gradient(90deg, #101010 0 18px, #c99b58 18px 24px), linear-gradient(#dec18d, #7a5132); }
.rulers { background: linear-gradient(32deg, transparent 0 42%, #101010 43% 48%, transparent 49%), repeating-linear-gradient(90deg, #d8b56f 0 12px, #805330 12px 16px); }
.storefront { background: linear-gradient(90deg, #101010 0 10%, transparent 10% 90%, #101010 90%), repeating-linear-gradient(0deg, #c49b60 0 26px, #6B3F22 26px 28px); }
.invoice { background: repeating-linear-gradient(0deg, #e8d0a0 0 13px, #101010 14px 15px, #e8d0a0 15px 31px), linear-gradient(90deg, #8c5c31, #efd9aa); }
.photo-one { width: 310px; right: 7vw; bottom: 9vh; transform: rotate(6deg); }

.stamp { position: absolute; z-index: 18; border: 5px solid var(--red); color: var(--red); padding: .75rem 1rem; transform: rotate(-11deg); font-size: 1.25rem; line-height: .9; background: rgba(255,249,234,.76); }
.yesno { right: 22vw; top: 16vh; }
.stamp small { font-size: .62rem; color: var(--ink); }

.cream-sheet { background: var(--chalk); padding: clamp(1.6rem, 4vw, 3.4rem); top: 18vh; left: 10vw; box-shadow: 22px 22px 0 var(--ink); border-top: 16px solid var(--red); }
.black-rail { width: 34px; height: 110vh; left: 8vw; top: -5vh; }
.lens { width: 48vw; aspect-ratio: 1; right: -18vw; top: 20vh; opacity: .92; }
.arc-one, .arc-two { width: 28vw; height: 28vw; border: 46px solid var(--mustard); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; z-index: 5; }
.arc-one { left: 43vw; top: 8vh; transform: rotate(18deg); }
.photo-two { width: min(34vw, 440px); right: 12vw; top: 22vh; transform: rotate(-7deg); }
.annotation { position: absolute; z-index: 14; color: var(--ink); background: var(--mustard); padding: .55rem .7rem; font-size: .72rem; }
.bracket { left: 62vw; bottom: 17vh; }
.proof-tick { position: absolute; width: 80px; height: 38px; border-left: 10px solid var(--red); border-bottom: 10px solid var(--red); transform: rotate(-45deg); z-index: 13; }
.tick-a { left: 31vw; bottom: 18vh; }

.numbers { background: linear-gradient(97deg, var(--cream) 0 42%, var(--ink) 42% 44%, var(--chalk) 44%); }
.cobalt-block { width: 44vw; height: 70vh; right: 6vw; top: 13vh; background: var(--cobalt); z-index: 3; }
.blue-note { color: var(--chalk); background: var(--cobalt); padding: clamp(1.6rem, 3vw, 3rem); right: 10vw; top: 20vh; margin-left: auto; box-shadow: -18px 18px 0 var(--red); }
.number-seal { width: 25vw; aspect-ratio: 1; left: 8vw; bottom: 8vh; }
.horizontal { height: 8px; width: 70vw; left: 11vw; top: 29vh; }
.photo-three { width: 46vw; left: 8vw; top: 14vh; }
.photo-three .photo-scene { min-height: 220px; }
.aside { position: absolute; left: 18vw; bottom: 20vh; z-index: 13; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 3.2rem); max-width: 470px; color: var(--brown); }
.coordinate { right: 7vw; bottom: 11vh; }

.tradeoffs { background: var(--chalk); }
.table-edge { width: 110vw; height: 28vh; left: -5vw; bottom: -6vh; background: var(--brown); transform: rotate(-3deg); z-index: 1; }
.maybe { width: 31vw; aspect-ratio: 1; left: -8vw; top: 5vh; opacity: .94; }
.trade { width: 20vw; aspect-ratio: 1; right: 16vw; top: 12vh; }
.circle-photo { width: min(36vw, 430px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; left: 47vw; bottom: 14vh; }
.circle-photo .photo-scene { min-height: 100%; }
.trade-sheet { top: 20vh; left: 12vw; max-width: 620px; padding: 2rem; background: var(--cream); border-right: 20px solid var(--ink); box-shadow: 18px 18px 0 var(--mustard); }
.tradeoff-tags { position: absolute; z-index: 16; right: 7vw; bottom: 16vh; display: grid; gap: .6rem; }
.tradeoff-tags span { background: var(--ink); color: var(--chalk); padding: .65rem .8rem; }

.human { background: linear-gradient(180deg, var(--cream), #eacb8f); }
.human-rail { width: 16px; height: 88vh; right: 14vw; top: 8vh; }
.cobalt-door { width: 30vw; height: 78vh; right: 0; bottom: 0; background: var(--cobalt); z-index: 3; }
.arc-two { left: 9vw; bottom: 9vh; transform: rotate(146deg); }
.photo-five { width: min(40vw, 520px); left: 8vw; top: 12vh; transform: rotate(5deg); clip-path: polygon(0 0, 94% 4%, 100% 88%, 74% 100%, 35% 94%, 0 100%); }
.human-note { margin-left: auto; right: 17vw; top: 24vh; max-width: 570px; background: var(--chalk); padding: 2rem; box-shadow: -16px 16px 0 var(--red); }
.revised { left: 48vw; bottom: 19vh; background: var(--red); color: var(--chalk); }
.question-dot { position: absolute; left: 40vw; top: 20vh; width: 48px; height: 48px; border-radius: 50%; border: 10px solid var(--ink); z-index: 20; }

.resolution { background: var(--cream); }
.door-shape { bottom: 0; height: 72vh; width: 34vw; z-index: 2; }
.red-door { left: 10vw; background: var(--red); border-top-left-radius: 22vw; }
.cobalt-door-final { right: 8vw; background: var(--cobalt); border-top-right-radius: 22vw; }
.final-sun { width: 26vw; aspect-ratio: 1; left: 37vw; top: 9vh; z-index: 1; }
.final-proof { width: min(32vw, 400px); right: 13vw; top: 12vh; transform: rotate(-5deg); }
.final-copy { position: absolute; left: 11vw; top: 16vh; max-width: 650px; background: rgba(255,249,234,.9); padding: clamp(1.8rem, 4vw, 3.4rem); border-bottom: 18px solid var(--ink); box-shadow: 18px 18px 0 rgba(107,63,34,.28); }
.stamped-link { display: inline-block; margin-top: 1rem; font-family: var(--mono); text-transform: uppercase; text-decoration: none; color: var(--red); border: 4px solid var(--red); padding: .9rem 1rem; transform: rotate(-2deg); background: var(--chalk); }
.final-stamp { right: 32vw; bottom: 17vh; }

.is-visible .decision-line { animation: growLine 1.4s ease both; transform-origin: left center; }
.is-visible .mustard-arc { animation: arcSettle 1.7s ease both; }
.is-visible .photo-proof { animation: revealProof 1s ease both; }
.is-visible .shape-rail { animation: railMeasure 1.1s ease both; transform-origin: top center; }

@keyframes growLine { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes railMeasure { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes arcSettle { from { rotate: -18deg; } to { rotate: 0deg; } }
@keyframes revealProof { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@media (max-width: 800px) {
  .chapter-room { padding: 22px; min-height: 105vh; }
  .room-copy h1 { font-size: clamp(3.5rem, 18vw, 7rem); }
  .room-copy h2 { font-size: clamp(2.6rem, 13vw, 5rem); }
  .hero-copy, .cream-sheet, .trade-sheet, .human-note, .final-copy { margin: 0; left: auto; right: auto; top: 18vh; position: relative; }
  .hero-copy p:last-child { margin-left: 0; }
  .photo-proof { width: 58vw; }
  .photo-one, .photo-two, .photo-three, .photo-five, .final-proof { right: 5vw; left: auto; top: auto; bottom: 6vh; }
  .blue-note { right: auto; top: 16vh; }
  .aside, .tradeoff-tags, .final-stamp { display: none; }
  .cobalt-block, .anchor-red, .lens { width: 76vw; }
}