:root {
  /* IBM Plex Mono handles tiny resin codes throughout the inspection floor. */
  --charcoal: #161A17;
  --resin-blue: #79AFC2;
  --oxide: #D56F34;
  --wire: #8D928A;
  --green: #2E6B4F;
  --pulp: #E8DDC3;
  --ink: #090B09;
  --chapter-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--pulp);
  background:
    radial-gradient(circle at 15% 8%, rgba(121, 175, 194, 0.16), transparent 34vw),
    radial-gradient(circle at 84% 80%, rgba(46, 107, 79, 0.26), transparent 42vw),
    linear-gradient(135deg, var(--ink), var(--charcoal) 42%, #0d110f 100%);
  font-family: "Instrument Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background-image:
    repeating-linear-gradient(113deg, transparent 0 28px, rgba(141, 146, 138, 0.06) 29px 30px),
    repeating-linear-gradient(23deg, transparent 0 54px, rgba(232, 221, 195, 0.025) 55px 56px);
  pointer-events: none;
  transform: rotate(-4deg);
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  z-index: 40;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232, 221, 195, .12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 20%, rgba(141, 146, 138, .12) 0 1px, transparent 1.8px),
    radial-gradient(circle at 50% 70%, rgba(9, 11, 9, .24) 0 1px, transparent 1.5px);
  background-size: 19px 23px, 31px 29px, 13px 17px;
  mix-blend-mode: overlay;
}

.machine-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gear { position: absolute; border: 2px solid rgba(141, 146, 138, .16); border-radius: 50%; }
.gear::before, .gear::after { content: ""; position: absolute; inset: 18%; border: 1px dashed rgba(141, 146, 138, .18); border-radius: inherit; }
.gear-a { width: 38vw; height: 38vw; left: -15vw; top: 9vh; animation: slowSpin 70s linear infinite; }
.gear-b { width: 30vw; height: 30vw; right: -11vw; bottom: 4vh; animation: slowSpin 90s linear infinite reverse; }
.pipe { position: absolute; height: 2px; background: rgba(141, 146, 138, .2); transform-origin: left center; }
.pipe-a { width: 70vw; top: 24vh; left: 36vw; transform: rotate(31deg); }
.pipe-b { width: 64vw; bottom: 21vh; left: -6vw; transform: rotate(-17deg); }

.floor-nav {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 30;
  display: flex;
  gap: 8px;
  transform: rotate(-2deg);
}

.floor-nav a {
  color: var(--pulp);
  text-decoration: none;
  font: 700 10px/1 "Instrument Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 9px 10px;
  border: 1px solid rgba(232, 221, 195, .24);
  background: rgba(9, 11, 9, .45);
  backdrop-filter: blur(8px);
}

.status-strip {
  position: fixed;
  right: 22px;
  top: 19px;
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wire);
  padding: 10px 12px;
  background: rgba(9, 11, 9, .6);
  border-left: 2px solid var(--oxide);
}

.mono { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px var(--green); }

.conveyor {
  position: fixed;
  left: -18vw;
  top: 44vh;
  width: 140vw;
  height: 138px;
  z-index: 4;
  transform: rotate(-18deg) translateX(calc(var(--chapter-progress) * -13vw));
  transform-origin: center;
  background:
    linear-gradient(90deg, rgba(9,11,9,.86), rgba(22,26,23,.96), rgba(9,11,9,.88)),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(141,146,138,.2) 72px 75px);
  border-top: 1px solid rgba(141, 146, 138, .44);
  border-bottom: 1px solid rgba(141, 146, 138, .34);
  box-shadow: 0 35px 70px rgba(0,0,0,.5);
  transition: filter .5s ease;
}

.belt-ribs { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(232,221,195,.04) 0 5px, transparent 5px 34px); animation: belt 2.8s linear infinite; }
.belt-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(232,221,195,.18); }
.traveler { position: absolute; top: 26px; display: grid; place-items: center; color: var(--ink); font: 800 14px/1 "Bricolage Grotesque"; letter-spacing: .05em; box-shadow: 0 12px 24px rgba(0,0,0,.32); }
.traveler-cardboard { left: 18%; width: 130px; height: 82px; background: var(--pulp); transform: rotate(4deg); border: 2px solid rgba(9,11,9,.25); }
.traveler-plastic { left: 39%; width: 120px; height: 58px; background: rgba(121,175,194,.62); color: var(--charcoal); border-radius: 18px 6px 20px 6px; transform: rotate(-7deg); backdrop-filter: blur(4px); }
.traveler-glass { left: 61%; width: 88px; height: 88px; background: rgba(46,107,79,.62); color: var(--pulp); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.traveler-can { left: 78%; width: 72px; height: 100px; background: linear-gradient(90deg, #747b75, var(--wire), #d5d6ce); transform: rotate(12deg) skewY(-6deg); }

main { position: relative; z-index: 5; }
.chapter { min-height: 100vh; position: relative; display: grid; align-items: center; padding: 10vh 7vw; overflow: hidden; }
.chapter h1, .chapter h2 { font-family: "Bricolage Grotesque", sans-serif; margin: 0; text-transform: uppercase; line-height: .82; letter-spacing: -.055em; }
.chapter h1 { font-size: clamp(64px, 14vw, 190px); }
.chapter h2 { font-size: clamp(54px, 10vw, 142px); }
.sentence { font-family: "Newsreader", serif; font-size: clamp(22px, 3.1vw, 42px); line-height: 1.08; max-width: 680px; margin: 18px 0; }
.station-label { font: 700 12px/1 "Instrument Sans", sans-serif; color: var(--wire); text-transform: uppercase; letter-spacing: .18em; margin: 0 0 14px; }
.chapter-marker { position: absolute; z-index: 12; right: 6vw; top: 16vh; width: 62px; height: 62px; border-radius: 50%; background: var(--oxide); color: var(--ink); display: grid; place-items: center; font: 800 20px "Bricolage Grotesque"; box-shadow: inset 0 -8px 0 rgba(9,11,9,.2); }

.chapter-copy { position: relative; z-index: 10; max-width: 760px; transform: rotate(-1deg); }
.ritual-button { cursor: pointer; border: 0; background: var(--oxide); color: var(--ink); font: 800 13px "Instrument Sans"; text-transform: uppercase; letter-spacing: .14em; padding: 15px 21px; transform: rotate(2deg); box-shadow: 7px 7px 0 rgba(9,11,9,.55); }

.intake { background: radial-gradient(circle at 48% 50%, rgba(232,221,195,.08), transparent 33vw); }
.intake-funnel { position: absolute; left: -3vw; top: 12vh; width: 43vw; height: 66vh; background: linear-gradient(135deg, rgba(141,146,138,.14), rgba(9,11,9,.05)); clip-path: polygon(0 0, 100% 24%, 68% 78%, 0 100%); border: 1px solid rgba(141,146,138,.22); }
.cardboard-bale { position: absolute; right: 8vw; bottom: 15vh; width: min(560px, 47vw); height: 335px; background: var(--pulp); color: var(--ink); transform: rotate(6deg); box-shadow: 0 28px 45px rgba(0,0,0,.42); overflow: hidden; }
.cardboard-bale::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(8deg, rgba(9,11,9,.06) 0 2px, transparent 2px 14px), radial-gradient(circle at 30% 20%, rgba(213,111,52,.18), transparent 20%); }
.bale-wire { position: absolute; top: -12%; bottom: -12%; width: 3px; background: var(--wire); z-index: 2; box-shadow: 6px 0 0 rgba(141,146,138,.25); }
.wire-one { left: 27%; transform: rotate(-3deg); } .wire-two { right: 24%; transform: rotate(2deg); }
.stamp-title { position: absolute; left: 34px; top: 92px; z-index: 3; font: 800 clamp(34px,5vw,64px) "Bricolage Grotesque"; letter-spacing: -.06em; text-transform: uppercase; border: 5px solid var(--ink); padding: 12px 16px; transform: rotate(-4deg); mix-blend-mode: multiply; }
.bale-note { position: absolute; z-index: 4; max-width: 190px; font: 600 18px/1.05 "Newsreader"; color: var(--green); }
.note-a { left: 28px; bottom: 28px; transform: rotate(-7deg); } .note-b { right: 22px; top: 24px; transform: rotate(8deg); color: var(--oxide); }
.plastic-lens { position: absolute; z-index: 5; inset: 38px 42px; background: linear-gradient(115deg, rgba(121,175,194,.22), rgba(121,175,194,.58), rgba(232,221,195,.16)); border: 1px solid rgba(121,175,194,.8); backdrop-filter: blur(7px); transform: translateX(-18%); display: grid; place-items: end start; padding: 18px; font: 700 11px "IBM Plex Mono"; color: var(--charcoal); text-transform: uppercase; letter-spacing: .1em; transition: opacity .28s ease, transform .28s ease; }
.plastic-lens.cleared { opacity: .22; transform: translateX(8%) skewX(-8deg); }

.object-sheet { position: relative; z-index: 10; width: min(720px, 80vw); color: var(--ink); background: var(--pulp); padding: 34px; box-shadow: 0 30px 70px rgba(0,0,0,.46); }
.object-sheet::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(9,11,9,.24); pointer-events: none; }
.peel { place-items: center start; }
.label-object { margin-left: 12vw; transform: rotate(-3deg); }
.torn-edge { position: absolute; right: -30px; top: 0; bottom: 0; width: 55px; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(9,11,9,.18) 18px 22px); clip-path: polygon(0 0, 100% 4%, 36% 12%, 90% 22%, 20% 33%, 100% 45%, 28% 57%, 88% 72%, 18% 86%, 100% 100%, 0 100%); }
.label-spiral { position: absolute; right: 9vw; top: 16vh; width: 360px; height: 360px; border: 18px solid rgba(232,221,195,.16); border-right-color: rgba(121,175,194,.58); border-radius: 50%; animation: slowSpin 28s linear infinite; }
.label-spiral span { position: absolute; width: 110px; height: 28px; background: var(--pulp); opacity: .45; transform: rotate(var(--r)) translate(150px); }
.label-spiral span:nth-child(1) { --r: 25deg; } .label-spiral span:nth-child(2) { --r: 105deg; } .label-spiral span:nth-child(3) { --r: 195deg; } .label-spiral span:nth-child(4) { --r: 285deg; }
.barcode { display: flex; gap: 7px; height: 96px; align-items: stretch; margin: 26px 0 8px; }
.barcode i { display: block; width: 10px; background: var(--ink); transform-origin: top; transition: transform .7s cubic-bezier(.2,.8,.1,1), background .5s ease; }
.barcode.unravel i { transform: rotate(82deg) translateY(calc(var(--n, 1) * 8px)); background: var(--green); }
.barcode i:nth-child(2n) { width: 17px; --n: 2; } .barcode i:nth-child(3n) { width: 7px; --n: 3; }
.unraveled-line { font: 600 24px "Newsreader"; color: var(--green); opacity: .18; transform: translateX(-20px); transition: .7s ease; }
.barcode.unravel + .unraveled-line { opacity: 1; transform: translateX(0); }
.peel-label { position: absolute; right: 28px; bottom: -48px; width: 260px; min-height: 130px; padding: 18px; background: var(--resin-blue); transform: rotate(8deg); transform-origin: right bottom; color: var(--ink); box-shadow: 10px 12px 0 rgba(9,11,9,.34); transition: transform .55s ease; }
.peel-label:hover, .peel-label.lifted { transform: rotate(20deg) translateY(-20px); }
.peel-label strong { display:block; font: 800 26px "Bricolage Grotesque"; } .peel-label em { display:block; margin-top:12px; font: 600 16px "Newsreader"; }

.judgment-stamp { position: absolute; z-index: 14; max-width: 360px; padding: 16px 22px; border: 5px solid currentColor; font: 800 clamp(24px,4vw,56px)/.85 "Bricolage Grotesque"; text-transform: uppercase; mix-blend-mode: screen; transform: rotate(8deg); cursor: pointer; }
.judgment-stamp::after { content: attr(data-note); position: absolute; left: 14px; top: calc(100% + 12px); width: 260px; padding: 12px; background: var(--pulp); color: var(--ink); font: 600 16px/1.05 "Newsreader"; text-transform: none; border: 0; opacity: 0; transform: translateY(-8px) rotate(-5deg); transition: .25s ease; }
.judgment-stamp:hover::after { opacity: 1; transform: translateY(0) rotate(-5deg); }
.orange-stamp { color: var(--oxide); right: 11vw; bottom: 19vh; } .green-stamp { color: var(--green); left: 8vw; bottom: 16vh; } .gray-stamp { color: var(--wire); right: 8vw; top: 24vh; }

.wash { place-items: center end; background: radial-gradient(circle at 32% 49%, rgba(121,175,194,.18), transparent 35vw); }
.wash-object { margin-right: 7vw; transform: rotate(2deg); }
.wash-basin { position: absolute; left: 5vw; top: 20vh; width: 46vw; height: 50vh; border-radius: 45% 55% 42% 58%; background: rgba(121,175,194,.18); border: 2px solid rgba(121,175,194,.6); box-shadow: inset 0 0 80px rgba(121,175,194,.18); overflow: hidden; }
.water-surface { position: absolute; inset: 14%; border-radius: inherit; background: linear-gradient(125deg, rgba(121,175,194,.55), rgba(232,221,195,.12), rgba(46,107,79,.25)); filter: blur(.2px); animation: liquid 5s ease-in-out infinite; }
.resin-triangle { position: absolute; left: 40%; top: 31%; width: 120px; height: 104px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--green); display: grid; place-items: end center; padding-bottom: 18px; color: var(--pulp); font: 800 28px "IBM Plex Mono"; }
.soap-ring { position: absolute; border: 2px solid rgba(232,221,195,.38); border-radius: 50%; animation: pulse 3s ease-in-out infinite; } .ring-a { width: 120px; height: 120px; left: 18%; top: 21%; } .ring-b { width: 190px; height: 190px; right: 13%; bottom: 10%; animation-delay: 1.1s; }
.inspection-window { position: relative; height: 220px; margin-top: 26px; background: rgba(121,175,194,.22); border: 1px solid rgba(9,11,9,.3); overflow: hidden; cursor: grab; }
.claim-lines { position: absolute; inset: 26px; display: grid; gap: 19px; font: 700 22px "Instrument Sans"; color: rgba(9,11,9,.4); }
.claim-lines span:nth-child(2) { color: var(--oxide); }
.loupe { position: absolute; left: 48%; top: 44%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 8px solid rgba(9,11,9,.75); display: grid; place-items: center; background: radial-gradient(circle, rgba(232,221,195,.76), rgba(121,175,194,.3)); color: var(--ink); font: 800 18px "IBM Plex Mono"; box-shadow: 18px 18px 0 rgba(9,11,9,.2); }

.table { place-items: center start; }
.table-object { margin-left: 8vw; transform: rotate(1deg); }
.sorting-table { position: absolute; right: 7vw; bottom: 9vh; width: 42vw; height: 42vh; background: linear-gradient(135deg, rgba(141,146,138,.28), rgba(9,11,9,.5)); border: 2px solid rgba(141,146,138,.5); transform: rotate(-6deg); }
.flag { position: absolute; width: 54px; height: 78px; background: var(--oxide); color: var(--ink); font: 800 30px "Bricolage Grotesque"; display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 100% 72%, 52% 58%, 0 72%); animation: flag 2.8s ease-in-out infinite; }
.flag-one { left: 18%; top: 18%; } .flag-two { right: 19%; top: 34%; animation-delay: .7s; }
.wire-knot { position: absolute; left: 43%; top: 42%; width: 92px; height: 92px; border: 9px double var(--wire); border-radius: 45% 55% 50% 40%; transform: rotate(31deg); }
.glass-shard { position: absolute; background: rgba(121,175,194,.35); border: 1px solid rgba(232,221,195,.35); backdrop-filter: blur(3px); }
.shard-one { width: 140px; height: 95px; left: 8%; bottom: 13%; clip-path: polygon(0 20%, 80% 0, 100% 80%, 22% 100%); }
.shard-two { width: 110px; height: 150px; right: 8%; bottom: 7%; clip-path: polygon(35% 0, 100% 30%, 70% 100%, 0 78%); }
.evidence-tags { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.evidence-tags li { font: 600 18px "IBM Plex Mono"; padding: 10px 12px; background: rgba(9,11,9,.08); border-left: 5px solid var(--oxide); }

.verdict { place-items: center; min-height: 115vh; }
.pressed-paper { position: absolute; inset: 16vh 8vw 10vh; background: var(--pulp); color: rgba(9,11,9,.18); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 24px; padding: 6vw; transform: rotate(-2deg); box-shadow: 0 35px 90px rgba(0,0,0,.5); }
.pressed-paper::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(99deg, rgba(9,11,9,.04) 0 2px, transparent 2px 11px), radial-gradient(circle, rgba(46,107,79,.12), transparent 60%); }
.pressed-paper span { position: relative; font: 800 clamp(30px,5vw,78px) "Bricolage Grotesque"; text-transform: uppercase; letter-spacing: -.05em; transform: rotate(var(--tilt, -4deg)); }
.pressed-paper span:nth-child(2n) { --tilt: 5deg; color: rgba(213,111,52,.24); }
.pressed-paper span:nth-child(3n) { --tilt: -8deg; color: rgba(46,107,79,.28); }
.verdict-sheet { position: relative; z-index: 15; max-width: 780px; padding: 38px 42px; color: var(--pulp); background: rgba(9,11,9,.76); border: 1px solid rgba(232,221,195,.2); backdrop-filter: blur(9px); transform: rotate(1.5deg); }
.final-mark { display: inline-block; margin-top: 18px; padding: 18px 22px; border: 4px solid var(--oxide); color: var(--oxide); font: 800 42px/.86 "Bricolage Grotesque"; transform: rotate(-4deg); text-transform: uppercase; }

body[data-state="wash"] .conveyor { filter: hue-rotate(165deg) saturate(1.2); }
body[data-state="flagged"] .conveyor { filter: drop-shadow(0 0 18px rgba(213,111,52,.28)); }
body[data-state="pressed"] .conveyor { filter: sepia(.38) brightness(1.08); }

@keyframes belt { to { background-position: -34px 0; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes liquid { 0%,100% { transform: translate(-2%, 1%) rotate(-2deg) scale(1); } 50% { transform: translate(2%, -2%) rotate(3deg) scale(1.04); } }
@keyframes pulse { 0%,100% { transform: scale(.84); opacity: .35; } 50% { transform: scale(1.08); opacity: .72; } }
@keyframes flag { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-8px); } }

@media (max-width: 850px) {
  .floor-nav { flex-wrap: wrap; width: 70vw; }
  .status-strip { top: auto; bottom: 16px; right: 12px; }
  .conveyor { height: 100px; top: 52vh; }
  .cardboard-bale, .wash-basin, .sorting-table { opacity: .55; width: 78vw; right: -16vw; left: auto; }
  .object-sheet, .verdict-sheet { width: 88vw; margin: 0; }
  .judgment-stamp { position: relative; right: auto; left: auto; top: auto; bottom: auto; margin-top: 24px; }
}