:root {
  --aged-parchment: #E8D6B3;
  --burnt-sepia: #7B4A2F;
  --charred-ink: #19140F;
  --tobacco-shadow: #3A2518;
  --pressed-leaf-olive: #58613A;
  --oxidized-sage: #9B9A6D;
  --glitch-rust: #B94E32;
  --bone-highlight: #FFF0D0;
  --border: 5px solid #19140F;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Commissioner", system-ui, sans-serif;
  color: var(--charred-ink);
  background: var(--charred-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,240,208,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(25,20,15,.32) 0 1px, transparent 2px);
  background-size: 18px 18px, 26px 26px;
  mix-blend-mode: multiply;
  z-index: 50;
}

.folio {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--aged-parchment);
  border: 10px solid var(--charred-ink);
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px) skewX(-1deg);
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.9,.1,1);
}

.scene.is-active { opacity: 1; pointer-events: auto; transform: translateX(0) skewX(0); }

.evidence-half, .viewport-half {
  position: relative;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  padding: 72px 54px 64px;
}

.evidence-half {
  background:
    linear-gradient(90deg, rgba(25,20,15,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(25,20,15,.08) 1px, transparent 1px),
    var(--aged-parchment);
  background-size: 64px 64px;
  border-right: var(--border);
}

.viewport-half {
  background:
    linear-gradient(135deg, rgba(123,74,47,.45), rgba(155,154,109,.24)),
    var(--tobacco-shadow);
}

.split-ruler {
  position: fixed;
  top: -100vh;
  bottom: -100vh;
  left: 50%;
  width: 18px;
  transform: translateX(-50%);
  background: var(--charred-ink);
  z-index: 20;
  box-shadow: 8px 0 0 var(--glitch-rust), -7px 0 0 var(--bone-highlight);
  animation: cutterSnap .9s cubic-bezier(.16,1,.3,1) forwards;
}

.folio.state-protocol .split-ruler { box-shadow: 0 0 0 7px var(--burnt-sepia), inset 0 0 0 5px var(--aged-parchment); }
.folio.state-proof .split-ruler { width: 28px; background: repeating-linear-gradient(0deg, var(--charred-ink) 0 12px, var(--bone-highlight) 12px 17px); }
.folio.state-reveal .split-ruler { width: 132px; height: 132px; top: calc(50% - 66px); bottom: auto; border-radius: 50%; border: var(--border); background: var(--glitch-rust); box-shadow: 0 0 0 12px var(--aged-parchment), 0 0 0 18px var(--charred-ink); }

.ruler-tick { position: absolute; left: -16px; width: 50px; height: 4px; background: var(--bone-highlight); }
.tick-one { top: 42%; } .tick-two { top: 50%; } .tick-three { top: 58%; }
.ruler-label { position: absolute; top: 18%; left: 24px; writing-mode: vertical-rl; color: var(--bone-highlight); font: 800 10px/1 "Commissioner"; letter-spacing: .18em; }
.folio.state-reveal .ruler-tick, .folio.state-reveal .ruler-label { display: none; }

.chapter-nav {
  position: fixed;
  left: 24px;
  top: 18px;
  z-index: 30;
  display: flex;
  gap: 10px;
}

.nav-stamp, .advance-panel button {
  border: 4px solid var(--charred-ink);
  background: var(--bone-highlight);
  color: var(--charred-ink);
  font: 800 11px/1 "Commissioner", sans-serif;
  letter-spacing: .12em;
  padding: 10px 12px;
  box-shadow: 5px 5px 0 var(--charred-ink);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}

.nav-stamp.is-active, .advance-panel button:hover { background: var(--glitch-rust); color: var(--bone-highlight); transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--charred-ink); }

.advance-panel { position: fixed; right: 24px; bottom: 22px; z-index: 35; display: flex; gap: 12px; }

.paper-stack { position: absolute; border: var(--border); background: var(--bone-highlight); box-shadow: 10px 10px 0 var(--charred-ink); }
.stack-a { width: 58%; height: 67%; left: 8%; top: 17%; transform: rotate(-3deg); }
.stack-b { width: 54%; height: 60%; left: 22%; top: 25%; background: var(--oxidized-sage); transform: rotate(4deg); }

.dossier-card, .passport-page {
  position: relative;
  grid-column: 1 / 7;
  align-self: center;
  padding: 34px;
  background: var(--bone-highlight);
  border: var(--border);
  box-shadow: 13px 13px 0 var(--charred-ink);
  z-index: 2;
}

.hero-card { grid-column: 1 / 6; }
.dossier-tab, .final-tab {
  position: absolute;
  top: -31px;
  left: 22px;
  padding: 8px 18px;
  background: var(--glitch-rust);
  color: var(--bone-highlight);
  border: 4px solid var(--charred-ink);
  font: 800 12px/1 "Commissioner";
  letter-spacing: .18em;
}
.dossier-tab.angled { transform: rotate(-3deg); transform-origin: left bottom; }

.deco-label { font-family: "Poiret One", "Commissioner", sans-serif; font-size: clamp(20px, 3vw, 34px); letter-spacing: .08em; margin: 0 0 16px; color: var(--burnt-sepia); }
h1, h2 { font-family: "Limelight", "Georgia", serif; font-weight: 400; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(82px, 13vw, 184px); line-height: .78; letter-spacing: -.04em; }
h1 span { display: block; }
h2 { font-size: clamp(56px, 8vw, 118px); line-height: .86; color: var(--charred-ink); }
.manifesto { font-family: "Limelight", serif; font-size: clamp(24px, 4vw, 52px); line-height: .95; color: var(--burnt-sepia); margin: 26px 0 12px; }
.annotation { max-width: 560px; font-size: 15px; line-height: 1.55; font-weight: 700; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.stamp-row span { border: 3px solid var(--charred-ink); padding: 8px 10px; background: var(--aged-parchment); font-size: 11px; font-weight: 800; letter-spacing: .14em; }

.portrait-frame, .mechanical-mask, .id-crop {
  grid-column: 1 / 7;
  align-self: center;
  height: min(74vh, 760px);
  border: 6px solid var(--charred-ink);
  position: relative;
  overflow: hidden;
  background: var(--tobacco-shadow);
  box-shadow: -12px 12px 0 var(--charred-ink);
}

.duotone-portrait, .collar-photo, .profile-silhouette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 25%, var(--aged-parchment) 0 9%, transparent 10%),
    radial-gradient(ellipse at 54% 38%, var(--oxidized-sage) 0 17%, transparent 18%),
    linear-gradient(90deg, transparent 0 32%, var(--charred-ink) 32% 36%, transparent 36%),
    radial-gradient(ellipse at 52% 52%, var(--charred-ink) 0 28%, transparent 29%),
    linear-gradient(135deg, var(--burnt-sepia), var(--tobacco-shadow));
  filter: contrast(1.2) sepia(.7);
}
.portrait-frame.glitching .duotone-portrait, .scene.is-active .glitch-word { animation: rustGlitch .38s steps(2,end); }

.photo-strip { position: absolute; top: 0; bottom: 0; width: 16%; opacity: .82; mix-blend-mode: hard-light; }
.strip-rust { left: 16%; background: var(--glitch-rust); transform: skewX(-8deg); }
.strip-olive { right: 18%; background: var(--pressed-leaf-olive); transform: skewX(7deg); }
.mask-slit { position: absolute; inset: 20% 18%; border: 5px solid var(--bone-highlight); background: rgba(25,20,15,.32); clip-path: polygon(0 30%, 100% 13%, 100% 67%, 0 86%); }

.leaf, .fern-shadow, .leaf-aperture, .seal-leaf {
  position: absolute;
  background: var(--pressed-leaf-olive);
  border: 4px solid var(--charred-ink);
  border-radius: 4% 70% 5% 70%;
  transform: rotate(-35deg);
}
.leaf::after, .fern-shadow::after, .leaf-aperture::after, .seal-leaf::after { content: ""; position: absolute; left: 48%; top: 7%; bottom: 7%; width: 3px; background: var(--bone-highlight); opacity: .7; }
.leaf-large { width: 180px; height: 72px; left: -210px; top: 20%; animation: leafSweep 7s ease-in-out infinite 1s; }
.leaf-small { width: 110px; height: 46px; left: -140px; top: 62%; animation: leafSweep 8.5s ease-in-out infinite 2.4s; background: var(--oxidized-sage); }

.registration-cross { position: absolute; width: 46px; height: 46px; border: 4px solid var(--bone-highlight); }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--bone-highlight); }
.registration-cross::before { left: 18px; top: -14px; width: 4px; height: 68px; } .registration-cross::after { top: 18px; left: -14px; height: 4px; width: 68px; }
.cross-one { top: 28px; right: 36px; } .cross-two { bottom: 32px; left: 38px; }

.hinged-left { transform-origin: right center; }
.protocol-card { grid-column: 1 / 7; }
.numbered-note { display: grid; grid-template-columns: 70px 1fr; gap: 14px; border-top: 4px solid var(--charred-ink); padding: 14px 0; font-weight: 700; }
.numbered-note b { font-family: "Limelight"; font-size: 34px; color: var(--glitch-rust); }
.pull-quote { font-family: "Poiret One"; font-size: clamp(26px, 3.5vw, 48px); margin: 18px 0 0; color: var(--pressed-leaf-olive); }
.collar-photo { background: radial-gradient(ellipse at 52% 34%, var(--aged-parchment) 0 13%, transparent 14%), linear-gradient(115deg, transparent 0 42%, var(--charred-ink) 43% 48%, transparent 49%), radial-gradient(ellipse at 50% 72%, var(--oxidized-sage) 0 32%, var(--burnt-sepia) 33% 46%, var(--tobacco-shadow) 47%); }
.redaction-bar { position: absolute; left: 10%; right: 8%; height: 42px; background: var(--charred-ink); border: 4px solid var(--bone-highlight); box-shadow: 8px 8px 0 var(--glitch-rust); }
.bar-a { top: 22%; } .bar-b { top: 45%; transform: translateX(38px); } .bar-c { top: 68%; transform: translateX(-28px); }
.fern-a { width: 240px; height: 52px; right: 5%; top: 16%; opacity: .9; }
.fern-b { width: 270px; height: 58px; left: 6%; bottom: 12%; transform: rotate(28deg); background: var(--oxidized-sage); }

.passport-page { grid-column: 1 / 7; background: var(--aged-parchment); }
.passport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
.stamp-block { min-height: 96px; display: grid; place-items: center; text-align: center; padding: 12px; border: 4px solid var(--charred-ink); background: var(--bone-highlight); font-weight: 800; letter-spacing: .12em; box-shadow: 5px 5px 0 var(--charred-ink); }
.stamp-block.olive { background: var(--oxidized-sage); } .stamp-block.rust { background: var(--glitch-rust); color: var(--bone-highlight); }
.profile-silhouette { inset: 7%; border: 5px solid var(--bone-highlight); background: radial-gradient(ellipse at 43% 25%, var(--aged-parchment) 0 12%, transparent 13%), radial-gradient(ellipse at 51% 50%, var(--charred-ink) 0 24%, transparent 25%), linear-gradient(135deg, var(--burnt-sepia), var(--oxidized-sage)); }
.offset-dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,240,208,.55) 0 2px, transparent 3px); background-size: 20px 20px; mix-blend-mode: overlay; }
.wax-ring { position: absolute; width: 210px; height: 210px; right: 10%; bottom: 11%; border-radius: 50%; border: 18px double var(--glitch-rust); opacity: .86; }
.leaf-aperture { width: 170px; height: 66px; left: 18%; top: 22%; background: var(--bone-highlight); mix-blend-mode: screen; }
.aperture-two { left: auto; right: 13%; top: 55%; transform: rotate(35deg); background: var(--oxidized-sage); }

.closing-panel { position: relative; height: 100vh; display: grid; align-content: center; padding: 90px 70px; border-right: var(--border); background: var(--aged-parchment); transition: transform .5s cubic-bezier(.2,.9,.1,1); }
.right-close { border-right: 0; border-left: var(--border); background: var(--tobacco-shadow); color: var(--bone-highlight); justify-items: center; }
.scene-reveal.is-active .left-close { transform: translateX(5vw); }
.scene-reveal.is-active .right-close { transform: translateX(-5vw); }
.seal { width: min(48vw, 430px); aspect-ratio: 1; border: 8px solid var(--charred-ink); border-radius: 50%; background: var(--glitch-rust); color: var(--bone-highlight); display: grid; place-items: center; box-shadow: 0 0 0 18px var(--aged-parchment), 18px 18px 0 var(--charred-ink); position: relative; }
.seal-name { font-family: "Limelight"; font-size: clamp(44px, 7vw, 92px); text-transform: uppercase; z-index: 2; }
.seal-leaf { width: 230px; height: 86px; background: var(--pressed-leaf-olive); top: 38%; left: 20%; transform: rotate(-28deg); }
.final-label { position: absolute; bottom: 58px; }

.scene.entering .dossier-card, .scene.entering .passport-page { animation: slamPanel .34s cubic-bezier(.2,1.2,.2,1); }
.scene.entering .redaction-bar { animation: jitterBorder .28s steps(2,end) 2; }

@keyframes cutterSnap { 0% { transform: translateX(-50%) translateY(-120vh); } 72% { transform: translateX(-50%) translateY(2vh); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes leafSweep { 0%, 18% { transform: translateX(0) rotate(-35deg); } 48%, 62% { transform: translateX(68vw) rotate(-20deg); } 100% { transform: translateX(90vw) rotate(-35deg); } }
@keyframes rustGlitch { 0% { transform: translate(0); filter: contrast(1.2) sepia(.7); } 25% { transform: translate(4px,-2px); filter: sepia(1) hue-rotate(-20deg); } 50% { transform: translate(-3px,3px); } 75% { transform: translate(2px,0); } 100% { transform: translate(0); } }
@keyframes slamPanel { 0% { transform: translateX(-42px) rotate(-2deg); } 100% { transform: translateX(0) rotate(0); } }
@keyframes jitterBorder { 0% { transform: translate(0); } 50% { transform: translate(4px,-3px); } 100% { transform: translate(-2px,3px); } }

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .folio { height: auto; min-height: 100vh; overflow: visible; }
  .scene { position: relative; min-height: 100vh; display: none; grid-template-columns: 1fr; }
  .scene.is-active { display: grid; }
  .evidence-half, .viewport-half, .closing-panel { height: 50vh; padding: 70px 24px 34px; }
  .split-ruler { left: auto; right: 18px; }
  .chapter-nav { flex-wrap: wrap; right: 16px; }
  .nav-stamp { padding: 7px; font-size: 9px; }
  .hero-card { grid-column: 1 / 7; }
  h1 { font-size: 74px; }
  h2 { font-size: 54px; }
}