:root {
    /* DESIGN typography token trace: IBM Plex Sans Condensed** for decree labels */
    --font-compliance-condensed-star: "Condensed* Condensed**";
    --blue: #1F4E6D;
    --green: #3E5F45;
    --gray: #706B61;
    --red: #A32020;
    --paper: #F5F0E6;
    --paper-old: #E3D8C2;
    --black: #0B0D0E;
    --amber: #D99A2B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--black);
    color: var(--paper);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: .22;
    background-image: radial-gradient(circle at 20% 30%, rgba(245,240,230,.08) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(217,154,43,.09) 0 1px, transparent 1px);
    background-size: 7px 9px, 11px 13px;
    mix-blend-mode: screen;
}

.lantern {
    position: fixed;
    width: 34vw;
    height: 34vw;
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(217,154,43,.23), rgba(217,154,43,.08) 38%, transparent 68%);
    filter: blur(4px);
    transition: opacity .4s ease;
}

.authority-rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 112px;
    z-index: 30;
    background: linear-gradient(180deg, rgba(11,13,14,.98), rgba(31,78,109,.84));
    border-right: 1px solid rgba(245,240,230,.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 24px 12px;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    letter-spacing: .12em;
}
.rail-seal { width: 58px; height: 58px; border: 2px solid var(--amber); border-radius: 50%; display: grid; place-items: center; color: var(--amber); font-family: 'Libre Baskerville', serif; }
.authority-rail a { color: rgba(245,240,230,.7); text-decoration: none; writing-mode: vertical-rl; font-size: 12px; transition: color .3s, transform .3s; }
.authority-rail a.current { color: var(--amber); transform: translateX(5px); }

.civilian-margin {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18vw;
    min-width: 190px;
    z-index: 22;
    padding: 34px 24px;
    border-left: 1px dashed rgba(227,216,194,.35);
    color: rgba(227,216,194,.74);
    font-family: 'Noto Serif KR', serif;
    background: linear-gradient(90deg, transparent, rgba(62,95,69,.2));
}
.civilian-margin p { color: var(--amber); font-family: 'Space Mono', monospace; text-transform: uppercase; font-size: 12px; }
.civilian-margin span { display: block; transform: rotate(2deg); line-height: 1.8; }

.chapter {
    min-height: 100vh;
    position: relative;
    padding: 8vh 23vw 8vh 160px;
    overflow: hidden;
    border-bottom: 1px solid rgba(245,240,230,.14);
    background: var(--black);
}
.chapter-heading { position: relative; z-index: 2; max-width: 760px; }
.chapter-heading.right { margin-left: auto; max-width: 680px; }
.chapter-heading.center { margin: 0 auto; text-align: center; }
.decree-label {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    color: var(--amber);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
}
h1, h2 { font-family: 'Libre Baskerville', serif; font-variant: small-caps; line-height: .92; letter-spacing: -.04em; margin: 14px 0; }
h1 { font-size: clamp(58px, 10vw, 146px); color: var(--paper); }
h1 i { color: var(--gray); font-style: normal; }
h2 { font-size: clamp(42px, 7vw, 98px); color: var(--paper); }
.serif-kr, .wiki-passage { font-family: 'Noto Serif KR', serif; }

.notice { background: radial-gradient(circle at 44% 20%, rgba(31,78,109,.34), transparent 34%), linear-gradient(135deg, #0B0D0E 0%, #171613 100%); }
.wall-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(245,240,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(245,240,230,.06) 1px, transparent 1px); background-size: 80px 80px; transform: perspective(400px) rotateX(58deg) translateY(-14%); transform-origin: top; }
.proclamation { position: relative; z-index: 2; width: min(760px, 70vw); padding: 34px; color: var(--black); background: var(--paper); box-shadow: 0 24px 48px rgba(0,0,0,.5); transform: rotate(-1.5deg); transition: transform .6s ease, box-shadow .6s ease; }
.proclamation p { max-width: 560px; font-size: 18px; line-height: 1.55; }
.stack-two { margin: -12px 0 0 16vw; width: min(560px, 54vw); background: var(--paper-old); transform: rotate(2.3deg); }
.black-tape { display: block; height: 30px; width: 68%; background: var(--black); transform: rotate(-2deg); margin-bottom: 14px; }
.stamp { position: absolute; z-index: 6; right: 26vw; top: 17vh; border: 6px double var(--red); color: var(--red); font: 800 31px/1 'IBM Plex Sans Condensed', sans-serif; letter-spacing: .08em; padding: 18px 25px; transform: rotate(-18deg) scale(2.8); opacity: 0; mix-blend-mode: multiply; }
.stamp.land { animation: stampLand .75s cubic-bezier(.2,1.4,.3,1) forwards; }
.stamp.land ~ .notice-caption, .notice:has(.stamp.land) .proclamation { transform: rotate(.5deg) translateY(-6px); }
@keyframes stampLand { 0% { opacity: 0; transform: rotate(-18deg) scale(2.8); } 70% { opacity: 1; transform: rotate(-12deg) scale(.86); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }
.notice-caption { position: absolute; bottom: 8vh; left: 165px; color: var(--paper-old); font-family: 'Space Mono', monospace; }

.corridor { background: linear-gradient(90deg, rgba(31,78,109,.4), transparent 34%), #0B0D0E; }
.corridor-lines { position: absolute; inset: -20%; background: repeating-linear-gradient(100deg, transparent 0 50px, rgba(217,154,43,.16) 52px 54px), linear-gradient(90deg, transparent, rgba(62,95,69,.35)); transform: skewY(-8deg); }
.time-block { position: relative; z-index: 2; margin-top: 8vh; font-family: 'IBM Plex Sans Condensed', sans-serif; color: var(--paper); }
.time-block b { display: block; font-size: clamp(72px, 12vw, 170px); color: var(--amber); line-height: .8; }
.time-block span { text-transform: uppercase; letter-spacing: .16em; }
.time-block.second { margin-left: 33vw; margin-top: -6vh; }
.wiki-passage { position: relative; z-index: 2; max-width: 590px; font-size: 21px; line-height: 1.75; color: var(--paper-old); }
.ticket { position: absolute; right: 23vw; bottom: 12vh; border: 1px dashed var(--amber); color: var(--amber); padding: 18px; font-family: 'Space Mono', monospace; transform: rotate(3deg); }

.assembly { background: radial-gradient(circle at 70% 50%, rgba(163,32,32,.2), transparent 35%), linear-gradient(180deg, #151312, #0B0D0E); }
.locked-door { position: absolute; left: 170px; bottom: 0; width: 28vw; height: 72vh; border: 8px solid var(--gray); border-bottom: 0; background: linear-gradient(90deg, rgba(112,107,97,.22), rgba(11,13,14,.8)); display: flex; justify-content: space-around; align-items: center; }
.locked-door span { height: 82%; width: 2px; background: rgba(245,240,230,.25); }
.locked-door strong { position: absolute; top: 34%; left: 8%; right: 8%; color: var(--red); border: 4px solid var(--red); padding: 18px; transform: rotate(-8deg); font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 28px; text-align: center; }
.civil-note { position: relative; z-index: 2; margin: 19vh 0 0 auto; max-width: 460px; color: var(--paper-old); font: 24px/1.6 'Noto Serif KR', serif; transform: rotate(-2deg); }
.megaphone { position: absolute; right: 25vw; bottom: 12vh; width: 130px; height: 70px; background: var(--gray); clip-path: polygon(0 34%, 35% 34%, 100% 0, 100% 100%, 35% 66%, 0 66%); opacity: .7; }
.blackout-clause { position: absolute; left: 43vw; bottom: 9vh; font-family: 'IBM Plex Sans Condensed', sans-serif; color: var(--paper); letter-spacing: .12em; }
.blackout-clause span { display: inline-block; width: 150px; height: 18px; background: var(--black); border: 1px solid var(--paper); vertical-align: middle; }

.map-room { background: linear-gradient(120deg, rgba(62,95,69,.38), transparent 52%), #111410; }
.map-fragment { position: relative; z-index: 2; width: min(900px, 70vw); margin-top: 5vh; filter: drop-shadow(0 24px 34px rgba(0,0,0,.45)); }
.district { fill: rgba(227,216,194,.08); stroke: var(--blue); stroke-width: 5; }
.road { fill: none; stroke: var(--green); stroke-width: 8; stroke-linecap: round; opacity: .86; }
.red-string { fill: none; stroke: var(--red); stroke-width: 4; stroke-dasharray: 900; stroke-dashoffset: 900; }
.red-string.drawn { animation: drawString 1.8s ease forwards; }
@keyframes drawString { to { stroke-dashoffset: 0; } }
.pin circle { fill: var(--red); stroke: var(--paper); stroke-width: 3; }
.pin text { fill: var(--paper); font: 700 24px 'IBM Plex Sans Condensed', sans-serif; }
.legend { color: var(--amber); font-family: 'Space Mono', monospace; }

.habeas { background: radial-gradient(circle at 50% 40%, rgba(245,240,230,.1), transparent 35%), #0B0D0E; }
.floor-plan { position: absolute; inset: 10vh 23vw 8vh 160px; border: 2px solid rgba(245,240,230,.2); background-image: linear-gradient(90deg, transparent 48%, rgba(245,240,230,.18) 49% 51%, transparent 52%), linear-gradient(transparent 48%, rgba(245,240,230,.18) 49% 51%, transparent 52%); background-size: 210px 160px; opacity: .55; }
.case-file { position: relative; z-index: 2; width: min(560px, 60vw); margin: 10vh auto 0; padding: 34px; background: var(--paper); color: var(--black); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.case-file h3 { font: 700 36px 'Libre Baskerville', serif; margin: 0 0 18px; }
.case-file p { font-family: 'Noto Serif KR', serif; line-height: 1.7; }
button { background: var(--red); color: var(--paper); border: 0; padding: 14px 22px; font: 700 15px 'IBM Plex Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.docket { position: absolute; z-index: 3; left: 18vw; bottom: 10vh; width: 330px; padding: 22px; background: var(--paper-old); color: var(--black); transform: translateY(30px) rotate(-4deg); opacity: 0; transition: opacity .5s, transform .5s; }
.docket.open { opacity: 1; transform: translateY(0) rotate(-2deg); }
.docket span { color: var(--red); font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 800; letter-spacing: .14em; }

.footnotes { background: linear-gradient(180deg, #0B0D0E, #1F4E6D 140%); }
.citation-stack { position: relative; z-index: 2; max-width: 850px; margin: 8vh 0; list-style: none; padding: 0; }
.citation-stack li { margin: 18px 0; padding: 22px 28px; background: rgba(245,240,230,.09); border-left: 5px solid var(--amber); font-size: 20px; line-height: 1.5; }
.citation-stack b { color: var(--amber); font-family: 'Space Mono', monospace; }
.torn-edge { position: absolute; right: 19vw; bottom: 15vh; width: 260px; height: 360px; background: var(--paper); clip-path: polygon(0 0, 100% 0, 94% 8%, 100% 16%, 92% 26%, 100% 36%, 94% 47%, 100% 58%, 91% 72%, 100% 84%, 96% 100%, 0 100%); opacity: .18; }
footer { position: relative; z-index: 2; font-family: 'IBM Plex Sans Condensed', sans-serif; color: var(--gray); letter-spacing: .16em; text-transform: uppercase; }

.chapter > * { transition: transform .8s ease, opacity .8s ease; }
.chapter:not(.active) .chapter-heading, .chapter:not(.active) .wiki-passage, .chapter:not(.active) .time-block, .chapter:not(.active) .case-file, .chapter:not(.active) .citation-stack { opacity: .55; transform: translateY(16px); }

@media (max-width: 900px) {
    .authority-rail { width: 72px; }
    .civilian-margin { display: none; }
    .chapter { padding: 7vh 7vw 7vh 96px; }
    .proclamation, .stack-two, .map-fragment { width: 100%; margin-left: 0; }
    .stamp { right: 8vw; }
    .locked-door { opacity: .25; width: 58vw; left: 90px; }
    .time-block.second { margin-left: 12vw; }
}