:root {
  --archive-green: #101711;
  --redaction-ink: #2A1E21;
  --lamp-amber: #D7A84F;
  --carmine: #B94343;
  --aged-paper: #E6D8B8;
  --chalk-gray: #C5C1B2;
  --oxidized-teal: #2F7D73;
  --shadow: rgba(2, 4, 3, .62);
  --font-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--archive-green);
  color: var(--aged-paper);
  font-family: var(--font-body);
  overflow: hidden;
}

button { font: inherit; color: inherit; }

.archive-desk {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 64% 18%, rgba(215, 168, 79, .14), transparent 30%),
    radial-gradient(circle at 14% 85%, rgba(47, 125, 115, .18), transparent 34%),
    linear-gradient(115deg, #0b110d 0%, var(--archive-green) 48%, #15100f 100%);
}

.archive-desk::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .23;
  background-image:
    linear-gradient(rgba(230, 216, 184, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 216, 184, .025) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  pointer-events: none;
}

.archive-desk::after {
  content: "CBDC STUDY · ROOM 10 · TABLE 17";
  position: fixed;
  right: 28px;
  bottom: 22px;
  z-index: 4;
  color: rgba(197, 193, 178, .28);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
}

.lamp-cone {
  position: absolute;
  width: 72vw;
  height: 74vh;
  left: var(--lamp-x, 24vw);
  top: var(--lamp-y, -9vh);
  transform: rotate(9deg);
  transform-origin: 14% 3%;
  background: radial-gradient(ellipse at 28% 12%, rgba(215, 168, 79, .38), rgba(215, 168, 79, .16) 34%, rgba(215, 168, 79, .04) 62%, transparent 73%);
  filter: blur(5px);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: left .45s ease, top .45s ease;
  z-index: 2;
}

.dust-field span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(230, 216, 184, .45);
  border-radius: 50%;
  filter: blur(1px);
  animation: dustFloat 9s infinite ease-in-out;
  z-index: 3;
}
.dust-field span:nth-child(1) { left: 24%; top: 22%; animation-delay: -1s; }
.dust-field span:nth-child(2) { left: 48%; top: 14%; animation-delay: -3s; }
.dust-field span:nth-child(3) { left: 72%; top: 36%; animation-delay: -5s; }
.dust-field span:nth-child(4) { left: 34%; top: 68%; animation-delay: -2s; }
.dust-field span:nth-child(5) { left: 86%; top: 72%; animation-delay: -7s; }
.dust-field span:nth-child(6) { left: 58%; top: 82%; animation-delay: -4s; }

.chapter-shelf {
  position: fixed;
  left: 0;
  top: 0;
  width: 116px;
  height: 100vh;
  padding: 24px 12px;
  background: linear-gradient(90deg, rgba(42, 30, 33, .96), rgba(42, 30, 33, .62));
  border-right: 1px solid rgba(230, 216, 184, .16);
  box-shadow: 14px 0 40px rgba(0, 0, 0, .32);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shelf-mark, .accession, .folio, .index-tab b, .index-tab span, .folder-tab, .classification-slip, .typed-excerpt, .library-stamp, .diagram-coordinate, .case-stamp, .closing-note span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.shelf-mark { color: var(--lamp-amber); font-size: 10px; writing-mode: vertical-rl; align-self: center; height: 128px; }
.accession { margin-top: auto; font-size: 9px; line-height: 1.7; color: rgba(197, 193, 178, .62); writing-mode: vertical-rl; align-self: center; }
.index-tab {
  min-height: 76px;
  padding: 8px 6px;
  border: 1px solid rgba(230, 216, 184, .22);
  background: rgba(16, 23, 17, .48);
  color: var(--chalk-gray);
  cursor: pointer;
  font-family: var(--font-ui);
  transform: rotate(-2deg);
  transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.index-tab:nth-of-type(even) { transform: rotate(2deg); }
.index-tab b { display: block; color: var(--carmine); font-size: 11px; }
.index-tab span { display: block; margin-top: 6px; font-size: 9px; writing-mode: vertical-rl; margin-inline: auto; }
.index-tab.active, .index-tab:hover { background: rgba(215, 168, 79, .22); border-color: var(--lamp-amber); color: var(--aged-paper); transform: translateX(9px) rotate(0deg); }

.scene {
  position: absolute;
  inset: 0;
  padding: clamp(26px, 5vw, 68px) clamp(20px, 6vw, 84px) clamp(26px, 5vw, 68px) max(150px, 12vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(32px) rotate(.8deg) scale(.985);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.22,1), visibility .7s;
  z-index: 5;
}
.scene.active { opacity: 1; visibility: visible; transform: translateY(0) rotate(0deg) scale(1); z-index: 10; }

.dossier-sheet, .manila-folder, .chalk-panel, .acetate-overlay, .index-card, .closing-note {
  box-shadow: 0 30px 60px var(--shadow), inset 0 0 44px rgba(42, 30, 33, .08);
}
.dossier-sheet, .manila-folder, .index-card, .closing-note {
  position: relative;
  color: var(--redaction-ink);
  background:
    radial-gradient(circle at 18% 14%, rgba(185, 67, 67, .11), transparent 14%),
    linear-gradient(rgba(42, 30, 33, .045) 1px, transparent 1px),
    var(--aged-paper);
  background-size: auto, 100% 29px, auto;
  border: 1px solid rgba(42, 30, 33, .25);
}
.dossier-sheet::before, .manila-folder::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(42, 30, 33, .16);
  pointer-events: none;
}
.dossier-sheet::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(185, 67, 67, .5);
  transform: rotate(-12deg);
  opacity: .55;
}
.folio { display: inline-block; color: var(--carmine); font-size: 12px; margin-bottom: 18px; }
h1, h2, h3, .rubber-stamp { font-family: var(--font-display); font-weight: 600; }
h1 { max-width: 760px; margin: 18px 0 30px; font-size: clamp(50px, 8vw, 112px); line-height: .88; color: var(--redaction-ink); }
h2 { margin: 0 0 22px; font-size: clamp(38px, 6vw, 86px); line-height: .95; color: var(--redaction-ink); }
p { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.65; }

.folder-wrap { position: relative; width: min(1050px, 82vw); height: min(680px, 78vh); margin: 5vh auto 0; perspective: 1200px; }
.folder-back { position: absolute; inset: 12% 5% 0 4%; background: #caa96c; transform: rotate(-4deg); box-shadow: 0 26px 70px rgba(0,0,0,.58); }
.folder-back::before { content: ""; position: absolute; left: 10%; top: -42px; width: 230px; height: 62px; background: #caa96c; border-radius: 10px 10px 0 0; }
.manila-folder {
  position: absolute;
  inset: 5% 3% 6% 5%;
  padding: clamp(34px, 5vw, 72px);
  background: linear-gradient(138deg, #e0bf78, #caa96c 54%, #b98d52);
  transform-origin: 10% 98%;
  transform: rotate(-2deg) rotateX(0deg);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
  z-index: 4;
}
.archive-desk.opened .manila-folder { transform: rotate(-13deg) rotateX(72deg) translateY(48px); opacity: .24; pointer-events: none; }
.folder-tab { display: inline-block; padding: 8px 12px; background: rgba(42, 30, 33, .13); color: var(--redaction-ink); font-size: 11px; }
.classification-slip { position: absolute; right: 42px; top: 48px; max-width: 210px; padding: 10px 12px; border-left: 4px solid var(--carmine); color: rgba(42,30,33,.68); font-size: 10px; line-height: 1.5; transform: rotate(3deg); }
.rubber-stamp { display: inline-block; margin: 44px 0 0; padding: 7px 18px; border: 4px double var(--carmine); color: var(--carmine); font-size: clamp(42px, 7vw, 102px); transform: rotate(-7deg); opacity: .82; }
.folder-lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 680px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.folder-lines span { border-top: 2px solid rgba(42,30,33,.32); padding-top: 8px; }
.open-folder {
  position: absolute;
  right: clamp(28px, 5vw, 66px);
  bottom: clamp(24px, 4vw, 52px);
  border: 1px solid var(--redaction-ink);
  background: rgba(42, 30, 33, .9);
  color: var(--aged-paper);
  padding: 12px 18px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
}
.intake-brief { position: absolute; inset: 12% 7% 4% 8%; padding: clamp(38px, 5vw, 72px); transform: rotate(2deg) translateY(38px); opacity: 0; transition: transform .9s ease .35s, opacity .9s ease .35s; }
.archive-desk.opened .intake-brief, .scene.active .dossier-sheet { animation: sheetLift .7s ease both; }
.archive-desk.opened .intake-brief { opacity: 1; transform: rotate(1.2deg) translateY(0); }
.typed-excerpt { margin-top: 28px; padding: 16px 18px; border-left: 5px solid var(--oxidized-teal); color: rgba(42, 30, 33, .78); font-size: 12px; line-height: 1.7; background: rgba(47,125,115,.08); }
.margin-note { position: absolute; max-width: 220px; color: var(--carmine); font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive; font-size: clamp(22px, 2.5vw, 35px); line-height: 1.05; transform: rotate(-8deg); right: 7%; bottom: 14%; }
.margin-note.right { right: 8%; top: 24%; bottom: auto; transform: rotate(7deg); }

.glossary-sheet { width: min(960px, 75vw); min-height: 72vh; padding: clamp(32px, 4vw, 62px); transform: rotate(-3deg); }
.definition-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(760px, 100%); }
.index-card { padding: 22px; min-height: 142px; transform: rotate(var(--r, 1deg)); }
.index-card:nth-child(2) { --r: -2deg; }
.index-card:nth-child(3) { --r: 2deg; }
.index-card:nth-child(4) { --r: -1deg; }
.index-card b { font-family: var(--font-display); font-size: 34px; color: var(--redaction-ink); }
.index-card p { margin: 6px 0 0; font-size: 15px; }
.pencil-path { width: min(520px, 68vw); height: 80px; margin-top: 18px; }
.pencil-path path { fill: none; stroke: var(--carmine); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: underlineDraw 1.8s ease forwards; }
.library-stamp { position: absolute; right: 44px; bottom: 38px; width: 210px; height: 72px; display: grid; place-items: center; border: 3px double rgba(185,67,67,.62); color: rgba(185,67,67,.72); font-size: 10px; text-align: center; transform: rotate(-9deg); }
.acetate-overlay { position: absolute; padding: 24px; color: var(--oxidized-teal); background: rgba(197, 193, 178, .18); border: 1px solid rgba(47, 125, 115, .56); backdrop-filter: blur(3px); }
.glossary-overlay { right: 8vw; top: 19vh; width: 310px; transform: rotate(7deg); }
.acetate-overlay p, .acetate-overlay span { margin: 0; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.acetate-overlay span { display: block; margin-top: 18px; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 1.5; }

.map-sheet { width: min(1080px, 78vw); min-height: 78vh; padding: clamp(32px, 4vw, 62px); transform: rotate(2deg); margin-left: 3vw; }
.map-artifact { position: relative; height: min(430px, 48vh); margin-top: 16px; border: 1px dashed rgba(42,30,33,.3); background: rgba(16,23,17,.05); overflow: hidden; }
.map-artifact svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route { fill: none; stroke-width: 4; stroke-linecap: round; marker-end: url(#arrow); stroke-dasharray: 900; stroke-dashoffset: 900; animation: routeDraw 1.5s ease forwards; }
.route.teal { stroke: var(--oxidized-teal); }
.route.carmine { stroke: var(--carmine); animation-delay: .25s; }
.route.amber { stroke: var(--lamp-amber); animation-delay: .45s; }
#arrow path { fill: var(--oxidized-teal); }
.node { position: absolute; min-width: 98px; padding: 13px 14px; border-radius: 50%; background: var(--aged-paper); border: 2px solid var(--oxidized-teal); color: var(--redaction-ink); text-align: center; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; box-shadow: 0 12px 28px rgba(42,30,33,.24); }
.central { left: 45%; top: 7%; border-color: var(--carmine); }
.treasury { left: 18%; top: 44%; }
.banks { right: 14%; top: 46%; }
.public { left: 45%; bottom: 8%; border-color: var(--lamp-amber); }
.merchants { right: 34%; bottom: 22%; }
.evidence-string { position: absolute; height: 2px; background: var(--carmine); transform-origin: left center; opacity: .75; }
.s1 { left: 27%; top: 55%; width: 250px; transform: rotate(22deg); }
.s2 { left: 49%; top: 20%; width: 240px; transform: rotate(34deg); }
.s3 { left: 52%; top: 78%; width: 180px; transform: rotate(-20deg); }
.diagram-coordinate { position: absolute; color: rgba(42,30,33,.45); font-size: 10px; }
.c1 { left: 8%; top: 12%; } .c2 { right: 10%; top: 18%; } .c3 { left: 12%; bottom: 10%; }

.privacy-file { width: min(920px, 74vw); min-height: 76vh; padding: clamp(34px, 4vw, 64px); transform: rotate(-1.8deg); }
.passport-line { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: center; margin: 22px 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.passport-line span { color: rgba(42,30,33,.72); font-size: 12px; }
.redaction-strip { display: block; height: 22px; background: var(--redaction-ink); transform-origin: left; animation: redactSweep 1s ease both; }
.redaction-strip.delay { animation-delay: .35s; }
.passport-line em { color: var(--oxidized-teal); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 17px; }
.microscope { position: relative; margin-top: 38px; padding-left: 230px; min-height: 190px; }
.lens { position: absolute; left: 0; top: -8px; width: 180px; height: 180px; border: 4px solid var(--oxidized-teal); border-radius: 50%; display: grid; place-items: center; color: var(--oxidized-teal); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; background: rgba(47,125,115,.08); box-shadow: inset 0 0 34px rgba(47,125,115,.24); }
.lens::after { content: ""; position: absolute; width: 115px; height: 4px; right: -76px; bottom: 8px; background: var(--oxidized-teal); transform: rotate(43deg); }
.case-stamp { position: absolute; right: 9%; top: 46%; width: 230px; padding: 12px; border: 2px solid rgba(185,67,67,.55); color: rgba(185,67,67,.68); font-size: 10px; text-align: center; transform: rotate(8deg); }
.threat-overlay { right: 10vw; bottom: 12vh; width: 260px; transform: rotate(5deg); }
.threat-overlay ol { margin: 16px 0 0; padding-left: 22px; font-family: var(--font-mono); color: var(--redaction-ink); }

.chalk-panel {
  position: relative;
  width: min(1020px, 78vw);
  min-height: 72vh;
  margin: 4vh auto 0;
  padding: clamp(36px, 5vw, 72px);
  background:
    radial-gradient(circle at 24% 18%, rgba(197,193,178,.08), transparent 18%),
    linear-gradient(120deg, #111611, #162018 58%, #0c110d);
  border: 14px solid #261b16;
  color: var(--chalk-gray);
  transform: rotate(1.2deg);
}
.chalk-panel h2 { color: var(--chalk-gray); text-shadow: 0 0 1px var(--chalk-gray); }
.folio.chalk { color: var(--lamp-amber); }
.chalk-questions { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 18px; }
.chalk-questions li { font-family: var(--font-display); font-size: clamp(25px, 3vw, 46px); line-height: 1.12; opacity: 0; transform: translateX(-12px); animation: chalkWrite .8s ease forwards; }
.scene.active .chalk-questions li:nth-child(1) { animation-delay: .12s; }
.scene.active .chalk-questions li:nth-child(2) { animation-delay: .32s; }
.scene.active .chalk-questions li:nth-child(3) { animation-delay: .52s; }
.scene.active .chalk-questions li:nth-child(4) { animation-delay: .72s; }
.chalk-equation { margin-top: 34px; font-family: var(--font-mono); color: var(--lamp-amber); font-size: clamp(17px, 2vw, 28px); }
.closing-note { position: absolute; right: 7vw; bottom: 8vh; width: 330px; padding: 24px; transform: rotate(-7deg); }
.closing-note h3 { margin: 0; font-size: 34px; }
.closing-note p { margin-bottom: 0; font-size: 16px; }
.closing-note span { display: block; margin-top: 16px; color: var(--carmine); font-size: 9px; }

@keyframes dustFloat { 0%, 100% { transform: translate3d(0,0,0); opacity: .2; } 50% { transform: translate3d(18px,-28px,0); opacity: .7; } }
@keyframes sheetLift { from { filter: blur(1px); transform: translateY(36px) rotate(var(--start-rotate, 0deg)); } to { filter: blur(0); } }
@keyframes underlineDraw { to { stroke-dashoffset: 0; } }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@keyframes redactSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes chalkWrite { to { opacity: 1; transform: translateX(0); } }

@media (max-width: 760px) {
  body { overflow: auto; }
  .archive-desk { height: auto; min-height: 100vh; overflow: hidden; }
  .chapter-shelf { width: 100%; height: 74px; flex-direction: row; padding: 9px; align-items: center; overflow-x: auto; }
  .shelf-mark, .accession { display: none; }
  .index-tab { min-width: 86px; min-height: 52px; }
  .index-tab span { writing-mode: initial; }
  .scene { position: relative; min-height: 100vh; padding: 106px 18px 36px; display: none; }
  .scene.active { display: block; }
  .folder-wrap, .glossary-sheet, .map-sheet, .privacy-file, .chalk-panel { width: 100%; }
  .definition-stack { grid-template-columns: 1fr; }
  .acetate-overlay, .closing-note { position: relative; right: auto; bottom: auto; top: auto; width: auto; margin: 18px; }
  .passport-line { grid-template-columns: 1fr; }
  .microscope { padding-left: 0; padding-top: 190px; }
}