:root {
  --press-navy: #08111F;
  --teal-ink: #126A6F;
  --vellum: #F1E8D2;
  --plum: #3A2148;
  --tab-green: #C8FF4D;
  --vermilion: #E84A2A;
  --brass: #A97C38;
  --onion-blue: #B7D7E8;
  --font-masthead: "Fraunces", serif;
  --font-copy: "Newsreader", serif;
  --font-machine: "Bricolage Grotesque", "Space Grotesk", "Inter", sans-serif;
  --font-code: "Unbounded", "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--press-navy); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--vellum);
  font-family: var(--font-copy);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(58, 33, 72, .85), transparent 35vw),
    radial-gradient(circle at 10% 70%, rgba(18, 106, 111, .24), transparent 42vw),
    linear-gradient(115deg, #08111F 0%, #0a1020 44%, #140d22 100%);
}

.press-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .33;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(241, 232, 210, .28) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(183, 215, 232, .16) 0 1px, transparent 1.4px);
  background-size: 31px 37px, 53px 47px;
  animation: dustDrift 11s steps(8) infinite;
}

.cursor-loupe {
  position: fixed;
  width: 116px;
  height: 116px;
  border: 2px solid rgba(169, 124, 56, .8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  background: radial-gradient(circle, rgba(183, 215, 232, .18), rgba(241, 232, 210, .05) 62%, transparent 63%);
  box-shadow: 0 0 0 9px rgba(8, 17, 31, .2), 28px 28px 0 -24px var(--brass);
  transition: opacity .25s ease, transform .25s ease;
}

.cursor-loupe.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.edge-tabs {
  position: fixed;
  right: 0;
  top: 13vh;
  z-index: 30;
  display: grid;
  gap: 9px;
  font-family: var(--font-machine);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
}

.tab {
  color: var(--press-navy);
  text-decoration: none;
  width: 92px;
  height: 35px;
  display: grid;
  place-items: center;
  transform: translateX(38px) rotate(-2deg);
  border-radius: 9px 0 0 9px;
  box-shadow: -10px 12px 20px rgba(0, 0, 0, .28);
  transition: transform .28s ease;
}
.tab:hover, .tab.is-active { transform: translateX(0) rotate(-2deg); }
.tab-one { background: var(--vellum); }
.tab-two { background: var(--tab-green); }
.tab-three { background: var(--onion-blue); }
.tab-four { background: var(--brass); }
.tab-five { background: var(--vermilion); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 8vh 7vw;
}

.machine-label {
  margin: 0 0 16px;
  color: var(--tab-green);
  font-family: var(--font-machine);
  font-size: clamp(11px, 1.15vw, 15px);
  text-transform: uppercase;
  letter-spacing: .18em;
}

h1, h2 { font-family: var(--font-masthead); font-weight: 800; line-height: .85; margin: 0; }
h1 { font-size: clamp(64px, 14vw, 196px); letter-spacing: -.08em; color: var(--vellum); text-shadow: 0 12px 0 rgba(232, 74, 42, .22); }
h2 { font-size: clamp(48px, 9vw, 126px); letter-spacing: -.06em; }
p { font-size: clamp(18px, 2vw, 28px); line-height: 1.24; }

.scene-intake { background: radial-gradient(circle at 48% 73%, rgba(18, 106, 111, .28), transparent 34vw); }
.brass-slit {
  position: absolute;
  left: -4vw;
  bottom: 11vh;
  width: 40vw;
  height: 26px;
  background: linear-gradient(90deg, #5f431d, var(--brass), #e2bd68, #4f3518);
  border-radius: 999px;
  transform: rotate(-13deg);
  box-shadow: 0 20px 38px rgba(0, 0, 0, .65), inset 0 -7px 0 rgba(8, 17, 31, .35);
}
.roller { position: absolute; border-radius: 50%; border: 18px solid var(--brass); background: radial-gradient(circle, #121827 0 28%, #050911 29% 48%, var(--brass) 49% 54%, #08111F 55%); box-shadow: 0 28px 42px rgba(0,0,0,.55); }
.roller-left { width: 174px; height: 174px; left: 6vw; bottom: 5vh; animation: rotateRoll 14s linear infinite; }
.roller-right { width: 232px; height: 232px; right: -5vw; top: 10vh; animation: rotateRoll 19s linear infinite reverse; }
.paper-arc { position: absolute; inset: -3vh -5vw 0 -7vw; width: 112vw; height: 105vh; z-index: -1; filter: drop-shadow(0 30px 32px rgba(0,0,0,.46)); }
.paper-arc path { fill: none; stroke: var(--vellum); stroke-width: 96; stroke-linecap: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: drawPaper 2.4s .25s cubic-bezier(.2,.8,.2,1) forwards, paperJitter 2s 2.7s infinite; }
.curved-stamp { font-family: var(--font-masthead); font-weight: 900; font-size: 74px; letter-spacing: -.04em; fill: var(--press-navy); opacity: .82; text-transform: lowercase; }
.hero-copy { position: relative; width: min(760px, 78vw); margin-top: 31vh; margin-left: 5vw; transform: rotate(-2deg); }
.dossier-note { max-width: 610px; color: var(--onion-blue); margin-top: 24px; }
.feed-strip { position: absolute; left: 42vw; bottom: 13vh; width: 64vw; padding: 18px 30px; color: var(--press-navy); background: var(--vellum); transform: rotate(7deg); font-family: var(--font-machine); letter-spacing: .09em; text-transform: uppercase; box-shadow: 0 24px 34px rgba(0,0,0,.42); }
.feed-strip:before, .feed-strip:after { content: ""; position: absolute; top: 0; bottom: 0; width: 20px; background: radial-gradient(circle, rgba(8,17,31,.45) 0 3px, transparent 4px) 0 9px / 18px 18px; }
.feed-strip:before { left: 2px; } .feed-strip:after { right: 2px; }
.comma-moth { position: absolute; right: 16vw; bottom: 26vh; color: var(--onion-blue); font-family: var(--font-masthead); font-size: 42px; animation: flutter 3s ease-in-out infinite; }

.scene-margin { display: grid; grid-template-columns: 1fr minmax(280px, 39vw); align-items: center; background: linear-gradient(180deg, transparent, rgba(58, 33, 72, .3)); }
.tilted-sheet { width: min(720px, 72vw); padding: clamp(38px, 6vw, 82px); color: var(--press-navy); background: linear-gradient(135deg, rgba(241,232,210,.98), rgba(183,215,232,.72)); transform: rotate(-7deg) translateX(5vw); box-shadow: 0 44px 60px rgba(0,0,0,.44); }
.tilted-sheet h2 { color: var(--teal-ink); }
.tilted-sheet p:not(.machine-label) { color: #08111F; }
.side-clamp { position: absolute; left: 3vw; width: 118px; height: 52px; background: var(--brass); border-radius: 12px; box-shadow: inset 0 -12px 0 rgba(8,17,31,.22), 0 16px 28px rgba(0,0,0,.4); }
.clamp-top { top: 17vh; transform: rotate(13deg); } .clamp-bottom { bottom: 17vh; transform: rotate(-9deg); }
.notes-rail { display: grid; gap: 28px; transform: rotate(3deg); }
.edge-note { padding: 16px 22px; max-width: 330px; font-family: var(--font-machine); color: var(--press-navy); box-shadow: -16px 18px 26px rgba(0,0,0,.35); clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
.edge-note.green { background: var(--tab-green); } .edge-note.brass { background: var(--brass); } .edge-note.red { background: var(--vermilion); } .edge-note.blue { background: var(--onion-blue); }
.punched-strip { position: absolute; left: 50%; top: -5vh; height: 116vh; width: 58px; background: rgba(241,232,210,.2); display: flex; flex-direction: column; justify-content: space-around; align-items: center; transform: rotate(16deg); }
.punched-strip span { width: 19px; height: 19px; border-radius: 50%; background: var(--press-navy); box-shadow: inset 0 2px 4px rgba(255,255,255,.18); }
.registration-pins { position: absolute; right: 18vw; bottom: 10vh; display: flex; gap: 13px; } .registration-pins i { width: 13px; height: 13px; background: var(--vermilion); border-radius: 50%; }

.scene-ledger { display: grid; place-items: center; background: radial-gradient(circle at 22% 14%, rgba(183,215,232,.13), transparent 34vw); }
.ledger-stack { position: relative; width: min(980px, 82vw); height: 640px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ledger-stack.is-aligned { transform: rotate(-2deg) scale(1.02); }
.ledger-layer { position: absolute; inset: 0; padding: clamp(34px, 5vw, 72px); color: var(--press-navy); background: rgba(241,232,210,.86); box-shadow: 0 38px 58px rgba(0,0,0,.38); border: 1px solid rgba(183,215,232,.5); }
.layer-map { transform: rotate(6deg) translate(-4vw, 1vh); }
.layer-redaction { transform: rotate(-5deg) translate(3vw, 4vh); background: rgba(183,215,232,.58); mix-blend-mode: screen; }
.layer-stamps { transform: rotate(1deg) translate(0, -2vh); background: rgba(241,232,210,.38); }
.ledger-stack.is-aligned .layer-map, .ledger-stack.is-aligned .layer-redaction, .ledger-stack.is-aligned .layer-stamps { transform: rotate(0deg) translate(0,0); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.ledger-layer h2 { color: var(--plum); max-width: 760px; }
.ledger-layer p:not(.machine-label) { max-width: 620px; }
.contour-lines { position: absolute; right: 7%; bottom: 8%; width: 280px; height: 220px; border: 2px solid var(--teal-ink); border-radius: 56% 44% 63% 37%; box-shadow: inset 0 0 0 17px rgba(18,106,111,.18), inset 0 0 0 36px rgba(232,74,42,.15), inset 0 0 0 55px rgba(58,33,72,.12); }
.redaction-tape { position: absolute; left: 18%; right: 18%; padding: 14px; background: #08111F; color: var(--vellum); font-family: var(--font-machine); text-transform: uppercase; letter-spacing: .16em; transform-origin: left center; animation: tapePeel 4.2s ease-in-out infinite; }
.tape-one { top: 38%; } .tape-two { top: 52%; animation-delay: .7s; }
.ledger-fragment { position: absolute; left: 16%; bottom: 13%; font-style: italic; color: var(--plum); }
.evidence-sticker { position: absolute; right: 17%; top: 16%; width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: var(--vermilion); color: var(--vellum); font-family: var(--font-code); font-size: 27px; transform: rotate(13deg); }
.seal-mark { position: absolute; right: 10%; bottom: 17%; border: 4px double var(--teal-ink); color: var(--teal-ink); padding: 20px 28px; border-radius: 50%; font-family: var(--font-masthead); font-size: 28px; transform: rotate(-18deg); }
.bracket-beetle { position: absolute; left: 10%; top: 20%; color: var(--plum); font-family: var(--font-code); font-size: 36px; animation: crawl 5s linear infinite alternate; }
.align-lever { position: absolute; bottom: 8vh; right: 10vw; border: 0; background: var(--tab-green); color: var(--press-navy); font-family: var(--font-machine); text-transform: uppercase; letter-spacing: .14em; padding: 18px 28px; border-radius: 999px; box-shadow: 0 18px 30px rgba(0,0,0,.35); cursor: pointer; }

.scene-index { display: grid; grid-template-columns: minmax(280px, 34vw) 1fr; align-items: center; background: linear-gradient(110deg, rgba(18,106,111,.18), rgba(8,17,31,0)); }
.index-copy { max-width: 520px; z-index: 2; }
.index-copy h2 { color: var(--vellum); }
.rotary-drum { position: relative; width: min(720px, 70vw); aspect-ratio: 1; margin: auto; border-radius: 50%; transform: rotate(var(--drum-angle, 0deg)); transition: transform .2s linear; }
.drum-core { position: absolute; inset: 23%; border-radius: 50%; background: radial-gradient(circle, var(--plum) 0 35%, #08111F 36% 58%, var(--brass) 59% 67%, #08111F 68%); display: grid; place-items: center; box-shadow: 0 36px 60px rgba(0,0,0,.48); }
.drum-core span { font-family: var(--font-code); color: var(--tab-green); font-size: clamp(24px,4vw,54px); }
.track { position: absolute; left: 50%; top: 50%; width: 44%; height: 58px; transform-origin: 0 50%; background: var(--vellum); color: var(--press-navy); display: flex; align-items: center; padding-left: 28px; border-radius: 99px 14px 14px 99px; font-family: var(--font-machine); box-shadow: 0 18px 24px rgba(0,0,0,.32); }
.track span { white-space: nowrap; }
.track-one { transform: rotate(0deg) translateX(118px); }
.track-two { transform: rotate(72deg) translateX(118px); background: var(--onion-blue); }
.track-three { transform: rotate(144deg) translateX(118px); background: var(--brass); }
.track-four { transform: rotate(216deg) translateX(118px); background: var(--tab-green); }
.track-five { transform: rotate(288deg) translateX(118px); background: var(--vermilion); color: var(--vellum); }
.brass-pointer { position: absolute; right: 10vw; top: 50%; width: 140px; height: 32px; background: var(--brass); clip-path: polygon(0 0, 100% 50%, 0 100%, 16% 50%); filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }

.scene-press { min-height: 120vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, rgba(232,74,42,.18), transparent 36vw), linear-gradient(180deg, rgba(58,33,72,.25), #08111F); }
.night-rollers { position: absolute; inset: 8vh 8vw; }
.press-roller { position: absolute; left: 5%; right: 5%; height: 78px; border-radius: 999px; background: linear-gradient(90deg, #3b2813, var(--brass), #f0ce79, var(--brass), #35230f); box-shadow: 0 22px 34px rgba(0,0,0,.5), inset 0 -18px 0 rgba(8,17,31,.24); }
.press-roller.top { top: 0; } .press-roller.bottom { bottom: 3vh; }
.ink-ribbon { position: absolute; left: -5vw; right: -5vw; top: 42%; height: 80px; background: linear-gradient(90deg, var(--plum), #08111F, var(--teal-ink), #08111F); transform: rotate(-4deg); box-shadow: 0 26px 40px rgba(0,0,0,.55); }
.curtain-sheet { position: relative; width: min(760px, 78vw); min-height: 70vh; padding: clamp(42px, 7vw, 84px); background: linear-gradient(160deg, var(--vellum), #e6d6b7 72%, var(--onion-blue)); color: var(--press-navy); transform: translateY(18vh); box-shadow: 0 42px 70px rgba(0,0,0,.55); transition: transform .8s cubic-bezier(.2,.9,.2,1); }
.curtain-sheet.is-raised { transform: translateY(-3vh); }
.curtain-sheet h2 { color: var(--teal-ink); }
.domain-seal { margin: 48px auto 0; width: min(360px, 80%); aspect-ratio: 1; border-radius: 50%; border: 8px double var(--vermilion); color: var(--vermilion); display: grid; place-items: center; font-family: var(--font-masthead); font-size: clamp(34px, 5vw, 58px); font-weight: 900; transform: rotate(-8deg); }
.footnote-fireflies { position: absolute; inset: 0; pointer-events: none; } .footnote-fireflies span { position: absolute; color: var(--tab-green); font-family: var(--font-code); animation: firefly 5s ease-in-out infinite; } .footnote-fireflies span:nth-child(1){ left: 18%; top: 62%; } .footnote-fireflies span:nth-child(2){ right: 22%; top: 30%; animation-delay: 1s;} .footnote-fireflies span:nth-child(3){ left: 57%; bottom: 18%; animation-delay: 2s;}

@keyframes dustDrift { to { background-position: 31px 37px, -53px 47px; } }
@keyframes drawPaper { to { stroke-dashoffset: 0; } }
@keyframes paperJitter { 0%,100% { transform: translate(0,0); } 35% { transform: translate(2px,-1px); } 70% { transform: translate(-1px,1px); } }
@keyframes rotateRoll { to { transform: rotate(360deg); } }
@keyframes flutter { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(12deg) translateY(-18px); } }
@keyframes tapePeel { 0%,70%,100% { transform: rotate(0deg); } 84% { transform: rotate(-3deg) translateY(-5px); } }
@keyframes crawl { to { transform: translateX(120px) rotate(8deg); } }
@keyframes firefly { 0%,100% { opacity: .2; transform: translate(0,0) scale(.8); } 50% { opacity: 1; transform: translate(24px,-28px) scale(1.2); } }

@media (max-width: 820px) {
  .scene { padding: 9vh 6vw; }
  .scene-margin, .scene-index { grid-template-columns: 1fr; gap: 6vh; }
  .hero-copy { margin-top: 24vh; margin-left: 0; }
  .paper-arc path { stroke-width: 72; }
  .feed-strip { left: 9vw; width: 86vw; bottom: 8vh; }
  .tilted-sheet { width: 88vw; transform: rotate(-4deg); }
  .notes-rail { margin-left: 14vw; }
  .ledger-stack { width: 92vw; height: 620px; }
  .track { width: 48%; font-size: 12px; padding-left: 18px; }
  .track-one, .track-two, .track-three, .track-four, .track-five { transform-origin: 0 50%; }
  .brass-pointer { right: 0; }
}