:root {
    /* compliance terms: Condensed* Condensed** headers Interpret domain investigative about objects their */
    --conveyor-black: #11140F;
    --paper-pulp: #D8CBB0;
    --bottle-green: #1E7C58;
    --safety-orange: #F26D21;
    --aluminum: #B9C4BE;
    --bin-blue: #246BCE;
    --label-purple: #5A3F73;
    --inspection-lime: #C6FF3D;
    --title: "Climate Crisis", sans-serif;
    --body: "Bricolage Grotesque", sans-serif;
    --condensed: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--conveyor-black);
    color: var(--paper-pulp);
    font-family: var(--body);
    cursor: crosshair;
}

body.manifest-open .manifest { transform: translate3d(4vw, -2vh, 0) rotate(-3deg) scale(1.03); }
body.manifest-open .stamp-ring { animation: stampLand 520ms cubic-bezier(.3, 1.6, .4, 1) both; }
body.label-traced .bottle-morph .bottle { opacity: .2; transform: translateY(-20px) rotate(-10deg) scale(.85); }
body.label-traced .cullet { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
body.material-follow .metal-ribbon { width: min(72vw, 920px); filter: brightness(1.28); }
body.material-follow .metal-ribbon span { transform: translateX(58vw) scaleX(2.5); }

.grain {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .22;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(198,255,61,.16) 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 62%, rgba(216,203,176,.16) 0 1px, transparent 1.4px),
        linear-gradient(115deg, transparent 0 47%, rgba(185,196,190,.08) 48% 49%, transparent 50%);
    background-size: 22px 19px, 31px 29px, 100% 100%;
    mix-blend-mode: screen;
}

.scanner {
    position: fixed;
    left: 0;
    right: 0;
    top: -14vh;
    height: 12vh;
    z-index: 18;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(198,255,61,.18), transparent);
    box-shadow: 0 0 50px rgba(198,255,61,.14);
    transform: translateY(var(--scan-y, 0));
}

.cursor-loupe {
    position: fixed;
    z-index: 30;
    width: 138px;
    height: 138px;
    border: 1px solid rgba(198,255,61,.72);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(198,255,61,.1), rgba(36,107,206,.07) 48%, transparent 70%);
    box-shadow: inset 0 0 22px rgba(198,255,61,.2), 0 0 24px rgba(198,255,61,.12);
    opacity: .7;
}

.chapter-tabs {
    position: fixed;
    z-index: 25;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    transform: rotate(1deg);
}

.chapter-tabs a {
    position: relative;
    color: var(--conveyor-black);
    background: rgba(216,203,176,.82);
    border: 1px solid rgba(17,20,15,.55);
    padding: 8px 10px 7px;
    font-family: var(--condensed);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    box-shadow: 3px 4px 0 rgba(242,109,33,.65);
}

.chapter-tabs a::before { content: attr(data-station); color: var(--label-purple); margin-right: 6px; }
.chapter-tabs a.active { background: var(--inspection-lime); box-shadow: 3px 4px 0 var(--bin-blue); }

.audit { position: relative; }
.station {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(34px, 5vw, 84px);
    isolation: isolate;
}

.station::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(185,196,190,.04) 0 1px, transparent 1px 80px),
        radial-gradient(circle at 75% 25%, rgba(90,63,115,.28), transparent 32%),
        var(--conveyor-black);
}

.diagonal, .conveyor {
    position: absolute;
    left: -18vw;
    top: 28vh;
    width: 140vw;
    height: 36vh;
    background:
        repeating-linear-gradient(90deg, rgba(185,196,190,.08) 0 2px, transparent 2px 54px),
        linear-gradient(180deg, rgba(17,20,15,.1), rgba(185,196,190,.08), rgba(17,20,15,.18));
    border-top: 1px solid rgba(185,196,190,.22);
    border-bottom: 1px solid rgba(185,196,190,.18);
    transform: rotate(-14deg);
    box-shadow: 0 28px 70px rgba(0,0,0,.52);
}

.inspection-light {
    position: absolute;
    left: 48%;
    top: -10%;
    width: 36vw;
    height: 88vh;
    background: radial-gradient(ellipse at top, rgba(185,196,190,.22), rgba(198,255,61,.07) 38%, transparent 70%);
    transform: translateX(-50%) rotate(8deg);
    filter: blur(2px);
}

.sheet, .evidence-plate, .return-label {
    background:
        linear-gradient(93deg, rgba(17,20,15,.08), transparent 18% 76%, rgba(90,63,115,.1)),
        repeating-linear-gradient(0deg, rgba(17,20,15,.04) 0 1px, transparent 1px 13px),
        var(--paper-pulp);
    color: var(--conveyor-black);
    border: 1px solid rgba(17,20,15,.65);
    box-shadow: 14px 18px 0 rgba(90,63,115,.5), 0 30px 90px rgba(0,0,0,.45);
}

.manifest {
    position: absolute;
    left: 8vw;
    top: 17vh;
    width: min(640px, 74vw);
    padding: clamp(24px, 4vw, 46px);
    transform: rotate(-5deg);
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.crumpled { clip-path: polygon(1% 4%, 98% 0, 96% 23%, 100% 44%, 97% 96%, 65% 100%, 42% 97%, 3% 100%, 0 67%, 2% 38%); }
.kicker, .plate-number, .side-note, .note-stack span, .lens-label { font-family: var(--condensed); text-transform: uppercase; letter-spacing: .13em; }
.kicker { margin: 0 0 18px; color: var(--label-purple); font-weight: 700; }

h1, h2 {
    font-family: var(--title);
    font-weight: 400;
    line-height: .82;
    margin: 0;
    text-transform: uppercase;
}

h1 { font-size: clamp(54px, 10vw, 132px); letter-spacing: -.05em; }
h1 em { color: var(--safety-orange); font-style: normal; }
h2 { font-size: clamp(42px, 7vw, 94px); color: var(--conveyor-black); max-width: 900px; }

.stamp-ring {
    display: grid;
    place-items: center;
    width: 178px;
    height: 178px;
    margin: 24px 0;
    border: 4px double var(--safety-orange);
    border-radius: 50%;
    color: var(--safety-orange);
    font-family: var(--condensed);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .12em;
    transform: rotate(-14deg);
}

.manifest-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px 18px;
    margin: 22px 0;
    font-family: var(--condensed);
    font-size: 17px;
    border-top: 2px solid rgba(17,20,15,.35);
    padding-top: 16px;
}
.manifest-grid span { color: var(--label-purple); text-transform: uppercase; }
.manifest-grid strong { font-weight: 600; }

.world-button {
    border: 1px solid var(--conveyor-black);
    background: var(--inspection-lime);
    color: var(--conveyor-black);
    padding: 12px 16px;
    font-family: var(--condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 5px 5px 0 var(--safety-orange);
    cursor: pointer;
}

.world-button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--safety-orange); }

.container-specimen {
    position: absolute;
    right: 13vw;
    top: 38vh;
    width: 230px;
    height: 210px;
    transform: rotate(17deg);
}
.can-body {
    position: absolute;
    inset: 38px 32px;
    background: linear-gradient(110deg, #B9C4BE, #D8CBB0 24%, #B9C4BE 42%, #5A3F73 44% 53%, #B9C4BE 58%, #11140F);
    border-radius: 44% 52% 46% 54%;
    border: 2px solid rgba(17,20,15,.8);
    box-shadow: inset -20px 0 24px rgba(17,20,15,.35), 0 24px 44px rgba(0,0,0,.42);
}
.can-body span { position: absolute; inset: 22px 14px auto; height: 18px; border: 2px solid rgba(17,20,15,.45); border-radius: 50%; }
.label-tear { position: absolute; right: 0; top: 80px; background: var(--bin-blue); color: white; padding: 10px; font-family: var(--condensed); font-weight: 700; transform: rotate(-18deg); clip-path: polygon(0 7%, 100% 0, 93% 100%, 7% 92%); }
.material-ghost { position: absolute; border: 2px dashed rgba(198,255,61,.55); opacity: .48; }
.ghost-one { inset: 16px 50px 20px 16px; border-radius: 45%; transform: rotate(-12deg); }

.floating-scraps span, .receipt-confetti b { position: absolute; animation: drift 9s ease-in-out infinite alternate; }
.cap { width: 30px; height: 30px; border-radius: 50%; border: 5px solid var(--bin-blue); left: 72vw; top: 18vh; }
.receipt { left: 61vw; top: 73vh; padding: 6px 18px; background: var(--paper-pulp); color: var(--conveyor-black); font-family: var(--condensed); transform: rotate(26deg); }
.glass-shard { left: 28vw; top: 74vh; width: 72px; height: 50px; background: rgba(30,124,88,.65); clip-path: polygon(18% 0, 100% 28%, 62% 100%, 0 62%); }
.fiber { width: 94px; height: 2px; background: var(--inspection-lime); opacity: .5; }
.f1 { left: 22vw; top: 16vh; transform: rotate(24deg); } .f2 { left: 82vw; top: 64vh; transform: rotate(-31deg); }
.side-note { position: absolute; right: 3vw; bottom: 9vh; max-width: 260px; color: var(--aluminum); font-size: 13px; writing-mode: vertical-rl; }

.evidence { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 6vw; }
.evidence-plate { position: relative; z-index: 2; max-width: 720px; padding: clamp(28px, 5vw, 64px); transform: rotate(-2deg); }
.evidence-plate p:not(.plate-number) { font-size: clamp(20px, 2.2vw, 34px); line-height: 1.15; }
.plate-number { color: var(--safety-orange); font-weight: 700; margin: 0 0 20px; }
.note-stack { display: grid; gap: 8px; margin-top: 26px; }
.note-stack span { background: rgba(242,109,33,.18); border-left: 4px solid var(--safety-orange); padding: 8px 12px; }

.route-map, .bale-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.draw-path, .wire { fill: none; stroke: var(--inspection-lime); stroke-width: 4; stroke-dasharray: 14 16; opacity: .55; stroke-linecap: round; }
.draw-path.second { stroke: var(--bin-blue); opacity: .42; }

.grease-stain { position: relative; width: min(42vw, 540px); aspect-ratio: 1; border-radius: 48%; background: radial-gradient(circle, rgba(242,109,33,.88), rgba(242,109,33,.25) 42%, transparent 70%); filter: blur(.2px); transform: rotate(13deg); }
.grease-stain span { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--safety-orange); animation: bloom 4s infinite alternate; }
.grease-stain span:nth-child(1){ left:22%; top:18%; }.grease-stain span:nth-child(2){ left:64%; top:28%; animation-delay:.3s; }.grease-stain span:nth-child(3){ left:45%; top:68%; animation-delay:.7s; }.grease-stain span:nth-child(4){ left:18%; top:55%; animation-delay:1s; }.grease-stain span:nth-child(5){ left:78%; top:61%; animation-delay:1.3s; }
.barcode-unravel { position: absolute; right: 9vw; bottom: 9vh; display: flex; gap: 8px; align-items: end; height: 190px; }
.barcode-unravel i { width: 10px; height: var(--h, 120px); background: var(--paper-pulp); display: block; transform-origin: bottom; animation: unravel 3.8s ease-in-out infinite alternate; }
.barcode-unravel i:nth-child(2){ --h:160px; animation-delay:.1s; }.barcode-unravel i:nth-child(3){ --h:80px; animation-delay:.2s; }.barcode-unravel i:nth-child(4){ --h:180px; animation-delay:.3s; }.barcode-unravel i:nth-child(5){ --h:110px; animation-delay:.4s; }.barcode-unravel i:nth-child(6){ --h:150px; animation-delay:.5s; }.barcode-unravel i:nth-child(7){ --h:70px; animation-delay:.6s; }.barcode-unravel i:nth-child(8){ --h:130px; animation-delay:.7s; }

.prism::before { background: radial-gradient(circle at 68% 48%, rgba(30,124,88,.4), transparent 31%), var(--conveyor-black); }
.acetate-window { position: absolute; inset: 12vh 11vw; border: 1px solid rgba(198,255,61,.48); background: rgba(185,196,190,.07); backdrop-filter: blur(2px); transform: rotate(5deg); box-shadow: inset 0 0 60px rgba(198,255,61,.08); }
.lens-label { position: absolute; right: 20px; top: 18px; color: var(--inspection-lime); }
.bottle-morph { position: relative; width: min(40vw, 470px); height: 600px; }
.bottle { position: absolute; left: 35%; top: 8%; width: 150px; height: 390px; background: linear-gradient(90deg, rgba(30,124,88,.22), rgba(198,255,61,.35), rgba(30,124,88,.7)); border: 2px solid rgba(198,255,61,.7); border-radius: 40px 40px 70px 70px; transition: .8s; }
.bottle::before { content:""; position:absolute; left:42px; top:-72px; width:64px; height:100px; border-radius:24px 24px 8px 8px; background: inherit; border: inherit; }
.cullet { position:absolute; width:70px; height:70px; background:rgba(30,124,88,.78); clip-path: polygon(50% 0, 100% 38%, 74% 100%, 5% 78%, 12% 18%); opacity:.28; transition:.8s; --r: 20deg; }
.c1 { left: 12%; top: 45%; transform: translate(120px,-100px); }.c2 { left: 50%; top: 54%; transform: translate(-80px,-130px); --r:-36deg; }.c3 { left: 32%; top: 72%; transform: translate(70px,-160px); --r:82deg; }.c4 { left: 70%; top: 34%; transform: translate(-120px,90px); --r:18deg; }
.glow-pool { position:absolute; left:14%; bottom:30px; width:78%; height:78px; border-radius:50%; background:radial-gradient(ellipse, rgba(198,255,61,.8), rgba(30,124,88,.35) 55%, transparent 74%); }
.ghost-bottle { left: 25%; top: 13%; width: 180px; height: 390px; border-radius: 40px 40px 80px 80px; }
.resin-moons { position:absolute; right:5vw; top:13vh; display:flex; flex-direction:column; gap:13px; }
.resin-moons span { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--conveyor-black); border:1px solid var(--inspection-lime); color:var(--inspection-lime); font-family:var(--condensed); }

.pulp { background: linear-gradient(180deg, var(--conveyor-black), #1b1912); }
.pulp-waves { position: relative; height: 70vh; }
.pulp-waves span { position:absolute; left:4vw; right:2vw; height:72px; border-radius:50%; border-top:5px solid rgba(216,203,176,.86); background:linear-gradient(180deg, rgba(216,203,176,.18), transparent); animation: wave 5s ease-in-out infinite alternate; }
.pulp-waves span:nth-child(1){ top:12%; }.pulp-waves span:nth-child(2){ top:26%; animation-delay:.3s; }.pulp-waves span:nth-child(3){ top:40%; animation-delay:.6s; }.pulp-waves span:nth-child(4){ top:55%; animation-delay:.9s; }.pulp-waves span:nth-child(5){ top:70%; animation-delay:1.2s; }
.receipt-confetti b { background: var(--paper-pulp); color: var(--conveyor-black); padding: 5px 12px; font-family: var(--condensed); font-weight: 700; }
.receipt-confetti b:nth-child(1){ left:56%; top:24%; transform:rotate(18deg); }.receipt-confetti b:nth-child(2){ left:76%; top:37%; transform:rotate(-22deg); }.receipt-confetti b:nth-child(3){ left:47%; top:72%; transform:rotate(9deg); }.receipt-confetti b:nth-child(4){ left:84%; top:68%; transform:rotate(31deg); }.receipt-confetti b:nth-child(5){ left:62%; top:55%; transform:rotate(-7deg); }.receipt-confetti b:nth-child(6){ left:70%; top:17%; transform:rotate(-41deg); }

.metal::before { background: radial-gradient(circle at 70% 55%, rgba(185,196,190,.18), transparent 34%), var(--conveyor-black); }
.metal-ribbon { position: relative; width: min(42vw, 540px); height: 170px; transition: width 900ms cubic-bezier(.2,.9,.1,1); }
.metal-ribbon::before { content:""; position:absolute; inset:35px 0; background:linear-gradient(90deg, #11140F, #B9C4BE, #D8CBB0, #B9C4BE, #5A3F73); border-radius:50%; transform:skewX(-18deg); box-shadow: 0 20px 60px rgba(185,196,190,.22); }
.metal-ribbon span { position:absolute; left:0; top:58px; width:120px; height:54px; border-radius:50%; border:3px solid #11140F; transition: transform 1s cubic-bezier(.2,.9,.1,1); }
.stamp-cluster { position:absolute; right:9vw; bottom:14vh; display:grid; gap:16px; transform:rotate(-8deg); }
.stamp-cluster span { border:3px solid var(--safety-orange); color:var(--safety-orange); padding:12px 18px; font-family:var(--condensed); font-weight:700; font-size:30px; opacity:.72; }

.finale { display:grid; place-items:center; }
.return-printer { position:relative; width:min(86vw, 950px); padding-top:92px; }
.printer-mouth { height:92px; background:linear-gradient(180deg, #090b08, #242820); border:1px solid rgba(185,196,190,.35); border-radius:22px 22px 6px 6px; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.return-label { margin:-8px auto 0; width:min(760px, 78vw); padding:44px; transform:rotate(1deg); animation: printLabel 4s ease-in-out infinite alternate; }
.fragment-word { display:flex; flex-wrap:wrap; gap:5px; margin:22px 0; font-family:var(--title); font-size:clamp(38px, 7vw, 88px); line-height:.9; color:var(--conveyor-black); }
.fragment-word span, .fragment-word em { display:inline-block; background:rgba(198,255,61,.56); padding:0 4px; transform:rotate(var(--rot)); font-style:normal; }
.fragment-word span:nth-child(odd){ --rot:-4deg; background:rgba(36,107,206,.24); }.fragment-word span:nth-child(even){ --rot:3deg; background:rgba(242,109,33,.24); }
.orbit-loop { position:absolute; inset:12vh 8vw; border:2px dashed rgba(198,255,61,.45); border-radius:50%; animation: orbitRotate 18s linear infinite; }
.orb { position:absolute; width:34px; height:34px; border-radius:50%; }
.orb.glass { left:50%; top:-17px; background:var(--bottle-green); }.orb.paper { right:-17px; top:50%; background:var(--paper-pulp); }.orb.metalbit { left:50%; bottom:-17px; background:var(--aluminum); }.orb.capbit { left:-17px; top:50%; background:var(--bin-blue); }

@keyframes drift { from { translate: 0 0; } to { translate: 18px -22px; } }
@keyframes bloom { to { transform: scale(2.8); opacity: .15; } }
@keyframes unravel { to { transform: rotate(18deg) scaleY(.38); border-radius: 8px; background: var(--inspection-lime); } }
@keyframes wave { to { transform: translateX(-32px) scaleY(1.18); border-color: var(--inspection-lime); } }
@keyframes stampLand { 0% { transform: rotate(20deg) scale(1.8); opacity: 0; } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }
@keyframes printLabel { from { transform: translateY(-20px) rotate(1deg); } to { transform: translateY(16px) rotate(-1deg); } }
@keyframes orbitRotate { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    .chapter-tabs { left: 10px; right: 10px; top: 10px; overflow-x: auto; }
    .chapter-tabs a { white-space: nowrap; }
    .evidence { display: block; padding-top: 92px; }
    .evidence-plate { margin-bottom: 38px; }
    .manifest { left: 5vw; top: 14vh; width: 88vw; }
    .container-specimen { right: 4vw; top: 66vh; scale: .72; }
    .cursor-loupe { display: none; }
    .side-note { display: none; }
}