:root {
    --dossier-paper: #EEE6D2;
    --carbon-black: #11100E;
    --redaction-charcoal: #2B2924;
    --revision-red: #D71920;
    --consular-violet: #5D3A9B;
    --oxidized-teal: #007C73;
    --stamp-blue: #1F4E79;
    --highlighter-acid: #D7FF37;
    --manila-shadow: #B9A77E;
    --scene-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--carbon-black);
    background: var(--dossier-paper);
    font-family: "Fraunces", serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(17,16,14,.09) 1px, transparent 1px) 0 0 / 8.333vw 100%,
        repeating-linear-gradient(0deg, transparent 0 15px, rgba(43,41,36,.045) 16px 17px);
    mix-blend-mode: multiply;
    z-index: 1;
}

.photocopy-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .33;
    background:
        radial-gradient(circle at 12% 18%, rgba(17,16,14,.28) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 61%, rgba(43,41,36,.2) 0 1px, transparent 2px),
        repeating-linear-gradient(115deg, rgba(17,16,14,.05) 0 1px, transparent 1px 7px);
    background-size: 19px 23px, 31px 29px, 100% 100%;
    mix-blend-mode: multiply;
    z-index: 40;
}

.index-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 52px;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 24px 0;
    background: rgba(238,230,210,.67);
    border-color: var(--carbon-black);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    mix-blend-mode: multiply;
}

.left-rail { left: 0; border-right: 4px solid var(--carbon-black); }
.right-rail { right: 0; border-left: 4px solid var(--carbon-black); }
.index-rail a, .index-rail span {
    color: var(--carbon-black);
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 15px;
}
.index-rail a.active { color: var(--revision-red); }

.archive-wall { position: relative; z-index: 2; }

.scene {
    min-height: 100vh;
    position: relative;
    padding: 7vw 8vw 6vw;
    isolation: isolate;
    border-bottom: 7px solid var(--carbon-black);
    background:
        linear-gradient(97deg, rgba(185,167,126,.28), transparent 37%, rgba(31,78,121,.08)),
        var(--dossier-paper);
    overflow: hidden;
}

.scene:nth-child(even) { background-color: #e7dcc4; }

.scene-label {
    position: absolute;
    top: 24px;
    left: 8vw;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(24px, 4vw, 54px);
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--dossier-paper);
    background: var(--carbon-black);
    padding: 4px 16px 7px;
    transform: rotate(-2deg) scaleX(1.12);
    text-transform: uppercase;
    mix-blend-mode: multiply;
}

.torn-document {
    position: relative;
    background: var(--dossier-paper);
    border: 4px solid var(--carbon-black);
    box-shadow: 16px 18px 0 rgba(43,41,36,.22), -7px -6px 0 rgba(185,167,126,.45);
    clip-path: polygon(0 1.2%, 8% 0, 22% 1.7%, 37% .4%, 54% 2%, 69% 0, 82% 1.4%, 100% .2%, 99% 18%, 100% 37%, 98.8% 52%, 100% 73%, 99% 100%, 88% 98.5%, 71% 100%, 55% 98.9%, 38% 100%, 21% 98.6%, 8% 100%, 0 98%, 1.2% 75%, 0 61%, 1.1% 40%, 0 22%);
}

h1, h2, .wordmark, .giant-clause, .cropped-wordmark {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
    line-height: .85;
    letter-spacing: -.07em;
}

.bureau-code, .lang-code, .article-scatter, .map-note, .folder-trigger, .layer-stack, .stamp {
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}

.bureau-code, .citation-ladder li { font-family: "Noto Sans Mono", monospace; }

.redaction-door {
    display: grid;
    place-items: center;
    padding: 5vw 8vw;
}

.door-paper {
    width: min(1040px, 84vw);
    min-height: 68vh;
    padding: clamp(28px, 5vw, 72px);
    transform: rotate(-1.4deg);
}

.wordmark {
    font-size: clamp(58px, 12vw, 178px);
    margin: 5vh 0 3vh;
    transform: scaleX(1.08);
    color: var(--carbon-black);
    text-shadow: 5px 3px 0 rgba(215,25,32,.25), -4px -3px 0 rgba(0,124,115,.23);
}

.intro-copy {
    max-width: 730px;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.05;
    margin: 0;
}

.language-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.language-tabs span {
    border: 2px solid var(--carbon-black);
    padding: 4px 12px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 900;
    background: var(--manila-shadow);
}

.folder-trigger {
    border: 4px solid var(--carbon-black);
    background: var(--highlighter-acid);
    color: var(--carbon-black);
    font-size: 22px;
    font-weight: 900;
    margin-top: 34px;
    padding: 10px 18px;
    transform: rotate(1.5deg);
    cursor: pointer;
    box-shadow: 6px 6px 0 var(--carbon-black);
}

.article-scatter {
    position: absolute;
    inset: auto 22px 22px auto;
    display: grid;
    gap: 6px;
    color: var(--stamp-blue);
    font-weight: 900;
    font-size: 20px;
    transform: rotate(-5deg);
}

.redaction-slab {
    position: absolute;
    width: min(1120px, 88vw);
    height: 73vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(.8deg);
    background: var(--carbon-black);
    color: var(--dossier-paper);
    display: grid;
    place-items: center;
    text-align: center;
    border: 8px solid var(--redaction-charcoal);
    transition: transform 900ms cubic-bezier(.2,.8,.12,1), clip-path 900ms steps(7, end), opacity 900ms ease;
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.redaction-slab strong { font-family: "Archivo Black"; font-size: clamp(34px, 7vw, 105px); line-height: .86; max-width: 800px; }
.redaction-slab span { position: absolute; top: 10%; font-family: "Noto Sans Mono"; font-size: 30px; }
.redaction-slab em { position: absolute; bottom: 12%; font-family: "Fraunces"; font-size: 24px; }
.redaction-slab.open {
    transform: translate(38vw, -51%) rotate(-7deg);
    clip-path: polygon(16% 0, 100% 4%, 89% 100%, 0 92%);
    opacity: .78;
}

.registration { position: absolute; width: 58px; height: 58px; border: 9px solid var(--revision-red); opacity: .72; }
.registration-a { top: 14vh; left: 12vw; }
.registration-b { right: 14vw; bottom: 15vh; transform: rotate(45deg); }
.punched-strip { position: absolute; left: 76px; top: 0; bottom: 0; width: 30px; background: repeating-radial-gradient(circle, transparent 0 9px, rgba(17,16,14,.6) 10px 12px, transparent 13px 42px); opacity: .4; }

.map-document { min-height: 72vh; padding: 7vw 6vw 4vw; transform: rotate(1.1deg); }
.map-document h2, .queue-heading, .collision-sheet h2, .final-dossier h2 { font-size: clamp(48px, 8vw, 122px); margin: 0; }
.chapter-intro, .treaty-prose { max-width: 760px; font-size: clamp(23px, 3vw, 37px); line-height: 1.06; }
.border-map { width: 100%; height: 48vh; margin-top: -20px; }
.border, .annotation-line, .leader { fill: none; stroke-linecap: square; stroke-linejoin: bevel; }
.border { stroke-width: 8; stroke-dasharray: 22 17; animation: borderJitter 1.8s steps(2,end) infinite; }
.border-black { stroke: var(--carbon-black); }
.border-teal { stroke: var(--oxidized-teal); transform: translate(calc(var(--scene-progress) * -10px), calc(var(--scene-progress) * 9px)); }
.border-violet { stroke: var(--consular-violet); transform: translate(calc(var(--scene-progress) * 13px), calc(var(--scene-progress) * -7px)); }
.crease { stroke: rgba(43,41,36,.22); stroke-width: 4; stroke-dasharray: 9 10; }
.annotation-line { stroke: var(--revision-red); stroke-width: 4; stroke-dasharray: 1; }
.coordinate { mix-blend-mode: multiply; }
.coordinate-red { fill: var(--revision-red); }
.coordinate-teal { fill: var(--oxidized-teal); }
.map-note {
    position: absolute;
    width: 250px;
    padding: 12px;
    border: 3px solid var(--carbon-black);
    background: var(--manila-shadow);
    font-size: 23px;
    font-weight: 900;
}
.note-a { left: 8%; top: 29%; transform: rotate(-8deg); }
.note-b { right: 5%; top: 34%; transform: rotate(6deg); background: var(--dossier-paper); color: var(--consular-violet); }
.tape { position: absolute; padding: 9px 62px; background: rgba(215,255,55,.45); border: 2px solid var(--carbon-black); font-family: "Barlow Condensed"; font-weight: 900; font-size: 28px; mix-blend-mode: multiply; }
.tape-one { top: 14vh; right: 12vw; transform: rotate(18deg); }
.tape-two { bottom: 16vh; left: 9vw; transform: rotate(-13deg); }

.footnote-chamber { min-height: 112vh; }
.giant-clause { font-size: clamp(70px, 13vw, 210px); width: 82vw; transform: translateX(-6vw) scaleX(1.18); color: var(--redaction-charcoal); }
.citation-ladder {
    position: absolute;
    top: 16vh;
    right: 8vw;
    width: min(380px, 36vw);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.citation-ladder li { background: var(--carbon-black); color: var(--dossier-paper); padding: 10px; transform: rotate(var(--tilt, -2deg)); font-size: 14px; }
.citation-ladder li:nth-child(2n) { --tilt: 2deg; background: var(--stamp-blue); }
.footnote-card { width: min(590px, 72vw); padding: 34px; margin-top: 5vh; transform: rotate(4deg); background: #f2ead7; }
.footnote-card h2 { font-size: clamp(36px, 5vw, 84px); margin: 0; }
.footnote-card p { font-size: 24px; }

.translation-queue { padding-top: 14vh; }
.queue-heading { max-width: 1050px; transform: rotate(-1deg) scaleX(1.05); }
.translation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 9vh;
    position: relative;
    z-index: 2;
}
.translation-column {
    min-height: 300px;
    padding: 26px;
    border: 4px solid var(--carbon-black);
    background: rgba(238,230,210,.9);
    box-shadow: 10px 11px 0 rgba(43,41,36,.24);
    transition: transform 400ms steps(3,end);
}
.translation-column p { font-size: clamp(25px, 3.4vw, 45px); line-height: 1; }
.lang-code { color: var(--revision-red); font-family: "Noto Sans Mono"; font-weight: 700; }
.drift-one { transform: translateY(calc(var(--scene-progress) * 20px)) rotate(-3deg); }
.drift-two { transform: translateY(calc(var(--scene-progress) * -34px)) rotate(2deg); color: var(--consular-violet); }
.drift-three { transform: translateY(calc(var(--scene-progress) * 44px)) rotate(-1deg); color: var(--oxidized-teal); }
.leader-web { position: absolute; left: 7vw; right: 7vw; bottom: 10vh; width: 86vw; height: 44vh; z-index: 1; pointer-events: none; }
.leader { stroke: var(--revision-red); stroke-width: 5; stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - var(--scene-progress) * 1200); }
.leader-b { stroke: var(--stamp-blue); }
.leader-c { stroke: var(--oxidized-teal); }
.acid-note { position: absolute; right: 10vw; bottom: 10vh; background: var(--highlighter-acid); border: 3px solid var(--carbon-black); padding: 16px 22px; font-family: "Barlow Condensed"; font-size: 34px; font-weight: 900; transform: rotate(-5deg); z-index: 4; }

.collision-sheet { min-height: 70vh; padding: 7vw; transform: rotate(-1deg); }
.stamp-field { position: relative; height: 34vh; }
.stamp {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 900;
    font-size: clamp(38px, 7vw, 100px);
    border: 8px solid currentColor;
    color: var(--revision-red);
    padding: 12px 30px;
    opacity: .78;
    mix-blend-mode: multiply;
    transform: translateY(-120px) rotate(var(--stamp-rotate, -7deg)) scale(1.45);
    animation: stampImpact 760ms steps(3,end) both paused;
}
.active-scene .stamp { animation-play-state: running; }
.stamp-draft { left: 2%; top: 4%; --stamp-rotate: -9deg; animation-delay: 110ms; }
.stamp-denied { right: 13%; top: 15%; color: var(--carbon-black); --stamp-rotate: 8deg; animation-delay: 260ms; }
.stamp-revision { left: 31%; bottom: -4%; color: var(--oxidized-teal); --stamp-rotate: -2deg; animation-delay: 440ms; }
.stamp-consular { right: 2%; bottom: 12%; color: var(--consular-violet); --stamp-rotate: 15deg; animation-delay: 610ms; }
.paperclip { position: absolute; width: 70px; height: 170px; border: 9px solid var(--carbon-black); border-left-width: 0; border-radius: 0 45px 45px 0; top: 12vh; left: 12vw; transform: rotate(19deg); }
.collision-redaction { position: absolute; height: 42px; background: var(--carbon-black); mix-blend-mode: multiply; }
.bar-a { width: 42vw; right: 10vw; top: 31vh; transform: rotate(5deg); }
.bar-b { width: 35vw; left: 15vw; bottom: 22vh; transform: rotate(-4deg); }

.revision-dawn { min-height: 104vh; display: grid; place-items: center; }
.final-dossier { width: min(1060px, 82vw); min-height: 70vh; padding: 5vw; transform: rotate(.7deg); background: linear-gradient(145deg, rgba(215,255,55,.18), transparent 38%), var(--dossier-paper); }
.final-dossier h2 { color: var(--carbon-black); text-shadow: -6px 5px 0 rgba(31,78,121,.18); }
.layer-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.layer-stack span { border: 3px solid var(--carbon-black); padding: 9px 14px; font-weight: 900; background: var(--dossier-paper); }
.layer-stack span:nth-child(2) { color: var(--oxidized-teal); }
.layer-stack span:nth-child(3) { color: var(--revision-red); }
.layer-stack span:nth-child(4) { color: var(--consular-violet); }
.layer-stack span:nth-child(5) { background: var(--highlighter-acid); }
.final-note { display: inline-block; margin-top: 50px; background: var(--highlighter-acid); border: 5px solid var(--carbon-black); padding: 18px 26px; font-family: "Barlow Condensed"; font-size: clamp(34px, 5vw, 78px); font-weight: 900; transform: rotate(-8deg); }
.cropped-wordmark { position: absolute; bottom: -3vw; left: -4vw; font-size: 12vw; opacity: .13; white-space: nowrap; }

@keyframes borderJitter { 0%,100% { filter: none; } 50% { filter: url(#none); transform: translate(4px,-3px); } }
@keyframes stampImpact { 0% { opacity: 0; transform: translateY(-160px) rotate(var(--stamp-rotate)) scale(1.7); } 62% { opacity: .84; transform: translateY(7px) rotate(var(--stamp-rotate)) scale(.92); } 100% { opacity: .78; transform: translateY(0) rotate(var(--stamp-rotate)) scale(1); } }

@media (max-width: 850px) {
    .index-rail { display: none; }
    .scene { padding: 92px 22px 56px; }
    .door-paper, .redaction-slab, .final-dossier { width: 94vw; }
    .translation-grid { grid-template-columns: 1fr; }
    .citation-ladder { position: relative; top: auto; right: auto; width: auto; margin-top: 24px; }
    .giant-clause { width: 100%; transform: none; }
    .stamp-field { height: 58vh; }
    .map-note { position: relative; width: auto; left: auto; right: auto; top: auto; margin: 12px 0; }
}