:root {
  --glass-green: #1F8A5B;
  --milk-blue: #B9DDE7;
  --cardboard: #C59B63;
  --aluminum: #D9E0DA;
  --ink: #17352C;
  --yellow: #F4C84A;
  --red: #D94A38;
  --shadow: #0E1714;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--shadow);
  color: var(--aluminum);
  font-family: "Atkinson Hyperlegible", "Inter", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 22%, rgba(31, 138, 91, .15) 22% 25%, transparent 25% 58%, rgba(185, 221, 231, .12) 58% 62%, transparent 62%),
    repeating-linear-gradient(100deg, rgba(217,224,218,.025) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 8%, rgba(185,221,231,.22), transparent 18rem),
    radial-gradient(circle at 82% 72%, rgba(244,200,74,.12), transparent 22rem);
  mix-blend-mode: screen;
  z-index: 0;
}

.facility-glow {
  position: fixed;
  inset: -20vh -10vw;
  background: radial-gradient(ellipse at top, rgba(185,221,231,.19), transparent 40%), radial-gradient(ellipse at bottom left, rgba(31,138,91,.2), transparent 42%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 7rem clamp(1.2rem, 4vw, 5rem);
  isolation: isolate;
}

.chapter::after {
  content: "";
  position: absolute;
  left: -15vw;
  top: 48%;
  width: 130vw;
  height: 9rem;
  transform: rotate(-15deg);
  background: linear-gradient(90deg, rgba(14,23,20,.8), rgba(23,53,44,.92), rgba(14,23,20,.72));
  border: 1px solid rgba(217,224,218,.12);
  box-shadow: inset 0 1.4rem 2rem rgba(0,0,0,.35), 0 1rem 4rem rgba(0,0,0,.32);
  z-index: -1;
}

h1, h2 { font-family: "Fraunces", serif; font-variation-settings: "WONK" 1, "SOFT" 70; line-height: .92; margin: 0; }
h1 { font-size: clamp(4rem, 13vw, 12rem); color: var(--ink); letter-spacing: -.08em; text-shadow: 3px 3px 0 rgba(244,200,74,.38); }
h2 { font-size: clamp(3rem, 8vw, 8rem); color: var(--aluminum); letter-spacing: -.055em; }
p { font-size: clamp(1.02rem, 1.45vw, 1.28rem); line-height: 1.55; }
a, button { font: 700 1rem "Space Mono", monospace; }
button { cursor: pointer; }

.inspection-lamps { position: absolute; top: 0; left: 10%; right: 8%; display: flex; justify-content: space-around; z-index: 1; }
.inspection-lamps span { width: 9rem; height: 18rem; background: linear-gradient(rgba(185,221,231,.45), transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); opacity: .65; }

.placard {
  position: relative;
  z-index: 3;
  max-width: 76rem;
  margin-top: 14vh;
  padding: clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(135deg, var(--cardboard), #a9773e 72%);
  color: var(--ink);
  clip-path: polygon(2% 0, 98% 2%, 100% 88%, 88% 100%, 0 94%);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.45), inset 0 0 0 2px rgba(23,53,44,.24);
}
.placard::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(12deg, rgba(23,53,44,.06) 0 2px, transparent 2px 8px); pointer-events: none; }
.facility-code, .chapter-kicker, .station-label, .panel-kicker { font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.facility-code { color: rgba(23,53,44,.85); }
.placard-copy { max-width: 43rem; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.stamp-button { border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); padding: .9rem 1.3rem; transform: rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.stamp-button:hover, .stamp-button.stamped { transform: rotate(1deg) translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.stamp-button.red { background: var(--red); color: var(--aluminum); }
.loop-link { color: var(--yellow); text-decoration: none; border-bottom: 2px dashed currentColor; }
.placard .loop-link { color: var(--ink); }

.codex-nav { position: fixed; top: 1rem; left: 1rem; z-index: 10; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 52rem; }
.codex-nav a { color: var(--milk-blue); background: rgba(23,53,44,.72); border: 1px solid rgba(185,221,231,.22); padding: .45rem .7rem; text-decoration: none; backdrop-filter: blur(10px); }

.mechanical-glyph { position: absolute; right: 8vw; bottom: 10vh; width: clamp(9rem, 18vw, 16rem); height: clamp(9rem, 18vw, 16rem); border: 2px dashed var(--glass-green); border-radius: 50%; display: grid; place-items: center; color: var(--glass-green); z-index: 3; animation: rotateGlyph 18s linear infinite; }
.mechanical-glyph span { font-family: "Noto Sans Symbols 2"; font-size: clamp(5rem, 11vw, 10rem); filter: drop-shadow(0 0 20px rgba(31,138,91,.5)); }
.mechanical-glyph b { position: absolute; font: 700 .8rem "Space Mono"; bottom: 17%; color: var(--yellow); }
@keyframes rotateGlyph { to { transform: rotate(360deg); } }

.conveyor-hero { position: absolute; inset: auto -10vw 13vh -10vw; height: 12rem; transform: rotate(-15deg); background: rgba(14,23,20,.72); border-block: 1px solid rgba(217,224,218,.2); overflow: hidden; z-index: 1; }
.roller { display: inline-block; width: 25%; height: 100%; background: repeating-linear-gradient(90deg, rgba(217,224,218,.12) 0 4px, transparent 4px 42px); animation: belt 8s linear infinite; }
@keyframes belt { to { transform: translateX(-60px); } }
.floating-scraps .scrap { position: absolute; z-index: 2; font-family: "Space Mono"; border: 1px solid rgba(217,224,218,.3); padding: .7rem 1rem; animation: drift 9s ease-in-out infinite alternate; }
.bottle { right: 21%; top: 32%; background: rgba(185,221,231,.42); color: var(--ink); border-radius: 2rem 2rem .5rem .5rem; }
.paper { left: 17%; bottom: 27%; background: var(--aluminum); color: var(--ink); transform: rotate(9deg); }
.cap { right: 12%; bottom: 31%; background: var(--red); color: white; border-radius: 50%; }
.foil { left: 43%; top: 18%; background: linear-gradient(120deg, var(--aluminum), rgba(217,224,218,.2)); color: var(--ink); border-radius: 60% 40% 50% 30%; }
@keyframes drift { to { translate: 2rem -1rem; rotate: 8deg; } }

.annotation-panel { position: fixed; right: 1rem; top: 1rem; width: min(22rem, calc(100vw - 2rem)); z-index: 20; background: rgba(217,224,218,.88); color: var(--ink); border: 2px solid var(--ink); padding: .9rem; box-shadow: 6px 6px 0 rgba(244,200,74,.8); transform: rotate(1deg); }
.annotation-panel ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.annotation-panel li { margin: .35rem 0; font-size: .92rem; }

.station-label { display: inline-flex; gap: .8rem; align-items: center; color: var(--yellow); background: rgba(23,53,44,.86); border: 1px solid rgba(244,200,74,.5); padding: .65rem .85rem; margin-bottom: 3rem; transform: rotate(-2deg); }
.station-label span { color: var(--red); }
.chapter-copy, .torn-page, .reflective-plate, .borderland-card, .final-note { max-width: 48rem; position: relative; z-index: 2; }
.chapter-kicker { color: var(--yellow); font-size: .86rem; }

.plastic-sheet { margin-left: 7vw; padding: 2rem; background: linear-gradient(135deg, rgba(185,221,231,.72), rgba(185,221,231,.16)); color: var(--ink); border: 1px solid rgba(185,221,231,.8); backdrop-filter: blur(8px); box-shadow: 0 2rem 5rem rgba(185,221,231,.12); }
.plastic-sheet h2 { color: var(--ink); }
.resin-dice { display: grid; grid-template-columns: repeat(4, minmax(4rem, 8rem)); gap: 1rem; margin: 3rem 0 0 22vw; position: relative; z-index: 3; }
.resin-dice button { aspect-ratio: 1; border: 2px solid var(--milk-blue); background: rgba(185,221,231,.22); color: var(--milk-blue); font-size: 2.8rem; box-shadow: inset 0 0 2rem rgba(185,221,231,.12); transition: transform .25s, background .25s; }
.resin-dice button.active { background: var(--glass-green); color: var(--shadow); transform: rotate(8deg) scale(1.08); }
.exception-slip { margin: 1.5rem 0 0 28vw; display: inline-block; padding: 1rem; background: var(--yellow); color: var(--ink); font-family: "Space Mono"; transform: rotate(2deg); }
.drawn-arrow { position: absolute; right: 5vw; top: 18vh; width: 36vw; height: 18vh; overflow: visible; }
.drawn-arrow path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: var(--dash, 700); }

.paper-room { background: radial-gradient(circle at 70% 30%, rgba(217,224,218,.18), transparent 30%); }
.torn-page { margin-left: 31vw; padding: 2rem; background: var(--aluminum); color: var(--ink); clip-path: polygon(0 5%, 96% 0, 100% 91%, 88% 100%, 4% 96%); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.35); }
.torn-page h2 { color: var(--ink); }
.citation-pile { display: flex; flex-wrap: wrap; gap: .7rem; width: min(38rem, 90vw); margin-top: 2rem; }
.citation-pile span { background: var(--cardboard); color: var(--ink); font-family: "Space Mono"; padding: .7rem 1rem; transform: rotate(var(--r, -3deg)); }
.citation-pile span:nth-child(2) { --r: 4deg; background: var(--yellow); }
.citation-pile span:nth-child(3) { --r: -7deg; }
.citation-pile span:nth-child(4) { --r: 2deg; background: var(--milk-blue); }

.paper-snow { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.flake { position: absolute; width: .35rem; height: .7rem; background: rgba(217,224,218,.72); opacity: .55; animation: snowFloat linear infinite; }
@keyframes snowFloat { to { transform: translateY(-110vh) translateX(8vw) rotate(260deg); } }

.metal { background: linear-gradient(145deg, rgba(217,224,218,.05), transparent 55%); }
.reflective-plate { margin-left: 8vw; padding: 2rem; color: var(--ink); background: linear-gradient(120deg, #D9E0DA, rgba(185,221,231,.62), #D9E0DA 60%, rgba(217,224,218,.28)); box-shadow: inset 0 0 0 1px white, 0 2rem 4rem rgba(0,0,0,.3); }
.reflective-plate h2 { color: var(--ink); }
.aluminum-crescents i { position: absolute; width: 13rem; height: 13rem; border-radius: 50%; border: 2rem solid rgba(217,224,218,.55); border-left-color: transparent; animation: crescentSpin 12s linear infinite; }
.aluminum-crescents i:nth-child(1) { right: 12%; top: 18%; }
.aluminum-crescents i:nth-child(2) { right: 31%; bottom: 18%; animation-direction: reverse; }
.aluminum-crescents i:nth-child(3) { left: 8%; bottom: 10%; width: 8rem; height: 8rem; }
@keyframes crescentSpin { to { transform: rotate(360deg); } }
.loop-trace { display: flex; gap: 1rem; flex-wrap: wrap; margin: 3rem 0 0 24vw; }
.loop-trace span { border: 1px solid var(--aluminum); border-radius: 50%; padding: 1.2rem; color: var(--aluminum); font-family: "Space Mono"; }

.compost { background: radial-gradient(circle at 30% 70%, rgba(197,155,99,.23), transparent 30%), radial-gradient(circle at 75% 40%, rgba(217,74,56,.11), transparent 20%); }
.borderland-card { margin-left: 23vw; padding: 2rem; background: rgba(23,53,44,.82); border: 2px solid var(--cardboard); box-shadow: 0 0 5rem rgba(197,155,99,.18); }
.steam { position: absolute; inset: 20% 5% 10% 50%; background: radial-gradient(ellipse, rgba(217,224,218,.15), transparent 70%); filter: blur(20px); animation: steam 5s ease-in-out infinite alternate; }
@keyframes steam { to { transform: translateY(-2rem) scale(1.08); opacity: .55; } }
.fogged-items { display: grid; gap: .8rem; width: 15rem; position: absolute; left: 8%; bottom: 18%; filter: blur(.4px); }
.fogged-items span { padding: .8rem; background: rgba(217,224,218,.15); border: 1px solid rgba(217,224,218,.3); font-family: "Space Mono"; color: var(--aluminum); }

.revision { padding-bottom: 10rem; }
.bale-stack { display: grid; grid-template-columns: repeat(2, minmax(12rem, 24rem)); gap: .8rem; transform: rotate(-4deg); margin-left: 4vw; }
.bale-stack div { min-height: 8rem; padding: 1rem; color: var(--ink); background: repeating-linear-gradient(0deg, var(--cardboard) 0 10px, #b78953 10px 18px); border: 2px solid var(--ink); box-shadow: 7px 7px 0 rgba(14,23,20,.7); }
.bale-stack b { display: block; font-family: "Space Mono"; color: var(--red); text-transform: uppercase; margin-bottom: .7rem; }
.final-note { margin: -6rem 0 0 auto; padding: 2rem; background: rgba(14,23,20,.82); border-left: .5rem solid var(--glass-green); }
.municipal-memo { font-family: "Space Mono", monospace; color: var(--yellow); border-top: 1px dashed rgba(244,200,74,.5); padding-top: 1rem; }

@media (max-width: 780px) {
  .annotation-panel { position: absolute; top: 5rem; right: .7rem; }
  .codex-nav { position: absolute; }
  .chapter { padding: 6rem 1rem; }
  .plastic-sheet, .torn-page, .reflective-plate, .borderland-card, .final-note, .resin-dice, .exception-slip, .loop-trace, .bale-stack { margin-left: 0; }
  .resin-dice, .bale-stack { grid-template-columns: repeat(2, 1fr); }
  .drawn-arrow, .fogged-items { display: none; }
}