:root {
  --black: #070606;
  --red: #D31827;
  --blue: #B7C8FF;
  --white: #FFFDF6;
  --paper: #F2E9D8;
  --gold: #A77A34;
  --purple: #3B244D;
  --display: "Bodoni Moda", serif;
  --serif-kr: "Noto Serif KR", serif;
  --stamp: "Archivo Black", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --inter: "Inter", sans-serif;
  --space: "Space Grotesk", sans-serif;
  --compliance-condensed-token: "Condensed* Condensed**";
}

/* IBM Plex Sans Condensed** for narrow marginal notes */

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

.noise-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .12;
  background-image: radial-gradient(var(--white) .8px, transparent .8px), radial-gradient(var(--red) .6px, transparent .6px);
  background-size: 17px 17px, 29px 29px;
  mix-blend-mode: screen;
}

.cursor-lacquer {
  position: fixed;
  width: 28vw;
  height: 28vw;
  border: 1px solid var(--red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  opacity: .16;
  background: radial-gradient(circle, rgba(211,24,39,.28), transparent 62%);
}

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--paper);
  isolation: isolate;
}

.hero-stage {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 52% 42%, rgba(59,36,77,.55), transparent 35%), var(--black);
}

.stage-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 21vw;
  background: repeating-linear-gradient(90deg, var(--black), var(--black) 17px, #130b0b 18px, #130b0b 31px);
  border-inline: 1px solid var(--red);
}
.left-curtain { left: 0; clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
.right-curtain { right: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }

.dominance-panel { position: absolute; inset: 0; transition: clip-path .35s ease; }
.panel-spear { background: linear-gradient(90deg, rgba(211,24,39,.36), transparent 58%); clip-path: polygon(0 0, var(--split, 50%) 0, calc(var(--split, 50%) - 9vw) 100%, 0 100%); }
.panel-shield { background: linear-gradient(270deg, rgba(183,200,255,.28), transparent 58%); clip-path: polygon(var(--split, 50%) 0, 100% 0, 100% 100%, calc(var(--split, 50%) + 9vw) 100%); }

.sliding-axis {
  position: absolute;
  top: -10vh;
  bottom: -10vh;
  left: var(--split, 50%);
  width: 3px;
  background: var(--paper);
  transform: rotate(var(--axis-rotate, -4deg));
  box-shadow: 0 0 0 6px rgba(211,24,39,.18);
  z-index: 3;
}
.sliding-axis span { position: absolute; font-family: var(--serif-kr); font-size: clamp(2rem, 8vw, 8rem); color: var(--blue); opacity: .18; writing-mode: vertical-rl; }
.sliding-axis span:first-child { top: 12vh; right: 18px; }
.sliding-axis span:last-child { bottom: 12vh; left: 18px; color: var(--red); }

.hero-claims { position: relative; width: min(1120px, 94vw); height: 58vh; z-index: 5; }
.claim { position: absolute; margin: 0; line-height: .78; letter-spacing: -.06em; text-transform: uppercase; }
.claim-spear { left: 0; top: 4vh; font-family: var(--display); font-size: clamp(4.4rem, 13vw, 14rem); font-weight: 900; color: var(--paper); text-shadow: 12px 12px 0 var(--red); }
.claim-shield { right: 0; bottom: 2vh; font-family: var(--stamp); font-size: clamp(3.3rem, 10vw, 11rem); color: var(--blue); text-align: right; transform: skewY(-5deg); mix-blend-mode: difference; }
.domain-cutout { position: absolute; inset: 29% 8% auto; margin: 0; font-family: var(--space); font-size: clamp(2rem, 8vw, 8rem); font-weight: 700; text-align: center; color: var(--black); background: var(--white); letter-spacing: .02em; transform: rotate(-2deg); mix-blend-mode: screen; box-shadow: 0 0 0 10px var(--black), 18px 18px 0 var(--gold); }

.hero-caption { position: absolute; left: 4vw; bottom: 5vh; display: flex; gap: .4rem; z-index: 6; }
.hero-caption span, .stamp, .proof-slip { font-family: var(--stamp); background: var(--red); color: var(--white); padding: .35rem .55rem; border: 2px solid var(--black); transform: rotate(-3deg); }
.hero-caption span:nth-child(2n) { background: var(--blue); color: var(--black); transform: rotate(4deg); }

.marginal-note { position: absolute; z-index: 6; max-width: 15rem; font-family: var(--condensed); font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.note-one { right: 3vw; top: 12vh; writing-mode: vertical-rl; }
.note-two { left: 25vw; top: 7vh; transform: rotate(-8deg); }

.suspended-prop { position: absolute; z-index: 4; animation: pendulum 6s ease-in-out infinite; transform-origin: top center; }
.suspended-prop::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 32vh; border-left: 1px solid var(--paper); }
.spear-prop { width: 28vw; height: 9px; right: 12vw; top: 18vh; background: var(--paper); box-shadow: -60px 20px 0 rgba(211,24,39,.45); }
.spear-prop::after { content: ""; position: absolute; right: -48px; top: -19px; border-left: 55px solid var(--paper); border-top: 24px solid transparent; border-bottom: 24px solid transparent; }
.shield-prop { width: 10vw; height: 14vw; left: 11vw; top: 26vh; border: 6px solid var(--blue); border-radius: 50% 50% 45% 45%; background: rgba(183,200,255,.09); animation-delay: -2s; }

.chapter-number { position: absolute; top: 3vh; left: 3vw; font-family: var(--display); font-size: clamp(8rem, 22vw, 25rem); color: rgba(255,253,246,.08); line-height: .8; z-index: 0; }
.vertical-slab { position: absolute; top: 0; bottom: 0; width: 16vw; }
.slab-red { left: 8vw; background: var(--red); transform: skewX(-8deg); }
.slab-paper { left: 31vw; background: var(--paper); opacity: .92; transform: skewX(5deg); }
.moon-gate { position: absolute; border-radius: 50%; border: clamp(8px, 1.5vw, 18px) solid; z-index: 1; }
.gate-blue { width: 54vw; height: 54vw; right: -12vw; top: 10vh; border-color: var(--blue); background: radial-gradient(circle, rgba(183,200,255,.08), transparent 62%); }
.gate-gold { width: 58vw; height: 58vw; left: -14vw; top: 13vh; border-color: var(--gold); }

.chapter-copy { position: absolute; z-index: 5; right: 7vw; top: 22vh; width: min(560px, 44vw); }
.chapter-copy h2, .witness-text h2, .exit-copy h2 { margin: 1rem 0; font-family: var(--display); font-size: clamp(2.8rem, 6vw, 7rem); line-height: .88; color: var(--white); }
.chapter-copy p:not(.stamp), .witness-text p:not(.stamp), .exit-copy p:not(.stamp) { font-family: var(--serif-kr); font-size: clamp(1.1rem, 1.7vw, 1.65rem); line-height: 1.45; color: var(--paper); }
.weapon.spear-object { position: absolute; left: 10vw; top: 53vh; width: 52vw; height: 12px; background: var(--black); border: 2px solid var(--white); z-index: 4; transform: rotate(-13deg); }
.weapon.spear-object span { position: absolute; inset: 20px 3vw auto 10vw; height: 16px; background: rgba(7,6,6,.55); filter: blur(3px); }
.weapon.spear-object::after { content: ""; position: absolute; right: -76px; top: -32px; border-left: 82px solid var(--black); border-top: 38px solid transparent; border-bottom: 38px solid transparent; filter: drop-shadow(0 0 0 var(--white)); }

.proof-stack { position: absolute; left: 6vw; bottom: 9vh; z-index: 6; display: grid; gap: .8rem; }
.proof-slip { font-size: clamp(1.1rem, 2vw, 2rem); border-color: var(--paper); cursor: pointer; transition: transform .25s ease, background .25s ease; }
.proof-slip.active { background: var(--blue); color: var(--black); transform: translateX(3vw) rotate(7deg); }

.shield-chapter { background: linear-gradient(115deg, var(--purple) 0 45%, var(--black) 45%); }
.right-copy { left: 48vw; right: auto; }
.reflection-pool { position: absolute; left: 8vw; bottom: 9vh; width: 58vw; height: 22vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(183,200,255,.42), rgba(59,36,77,.4) 52%, transparent 68%); transform: skewX(-18deg); }
.shield-object { position: absolute; left: 16vw; top: 20vh; width: 26vw; height: 34vw; max-height: 62vh; border: 14px double var(--blue); border-radius: 50% 50% 44% 44%; background: linear-gradient(135deg, rgba(255,253,246,.1), rgba(183,200,255,.2)); box-shadow: 22px 26px 0 var(--black), inset 0 0 40px rgba(255,253,246,.16); z-index: 3; }
.missing-blade { position: absolute; left: 55%; top: 10%; width: 7px; height: 80%; background: var(--red); transform: rotate(37deg); opacity: .75; box-shadow: 0 0 20px var(--red); }
.verdict-orbit { position: absolute; right: 6vw; bottom: 10vh; width: 21vw; height: 21vw; border: 1px dashed var(--paper); border-radius: 50%; animation: orbit 14s linear infinite; }
.verdict-orbit span { position: absolute; font-family: var(--stamp); color: var(--gold); font-size: 2rem; }
.verdict-orbit span:nth-child(1) { left: 45%; top: -1rem; } .verdict-orbit span:nth-child(2) { right: -1rem; top: 45%; } .verdict-orbit span:nth-child(3) { left: 45%; bottom: -1rem; } .verdict-orbit span:nth-child(4) { left: -1rem; top: 45%; }

.witness-chapter { background: var(--paper); color: var(--black); }
.witness-chapter .chapter-number { color: rgba(7,6,6,.12); }
.split-mask { position: absolute; left: 6vw; top: 14vh; width: 39vw; height: 68vh; display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(22px 22px 0 var(--gold)); }
.mask-half { display: grid; place-items: center; font-family: var(--serif-kr); font-size: clamp(8rem, 20vw, 22rem); font-weight: 900; color: var(--white); }
.mask-red { background: var(--red); clip-path: polygon(0 0, 100% 7%, 82% 100%, 0 91%); }
.mask-blue { background: var(--blue); color: var(--black); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 93%); transform: translateY(5vh); }
.witness-text { position: absolute; right: 6vw; top: 13vh; width: min(580px, 43vw); z-index: 3; }
.witness-text h2, .witness-text p:not(.stamp) { color: var(--black); }
.paper-field { position: absolute; right: 5vw; bottom: 8vh; width: 50vw; height: 27vh; }
.paper-slip { position: absolute; min-width: 15rem; padding: 1rem 1.5rem; background: var(--white); border: 2px solid var(--black); font-family: var(--serif-kr); font-size: 1.15rem; box-shadow: 8px 8px 0 var(--red); transition: transform .5s ease; }
.paper-slip:nth-child(1) { left: 0; top: 2vh; transform: rotate(-8deg); } .paper-slip:nth-child(2) { left: 15vw; top: 8vh; transform: rotate(6deg); } .paper-slip:nth-child(3) { left: 5vw; top: 15vh; transform: rotate(3deg); } .paper-slip:nth-child(4) { right: 0; top: 0; transform: rotate(-2deg); }

.exit-chapter { background: conic-gradient(from 90deg at 50% 50%, var(--black), var(--purple), var(--black), var(--red), var(--black)); display: grid; place-items: center; }
.exit-maze { position: absolute; inset: 9vh 7vw; border: 3px solid var(--paper); transform: rotate(-3deg); }
.stair { position: absolute; background: repeating-linear-gradient(90deg, var(--paper) 0 12px, transparent 12px 24px); border: 2px solid var(--paper); }
.stair-a { width: 42vw; height: 13vh; left: 5vw; top: 11vh; transform: skewY(-16deg); }
.stair-b { width: 36vw; height: 13vh; right: 8vw; top: 35vh; transform: skewY(16deg); background-color: rgba(183,200,255,.18); }
.stair-c { width: 48vw; height: 13vh; left: 24vw; bottom: 12vh; transform: skewY(-16deg) rotate(180deg); background-color: rgba(211,24,39,.2); }
.exit-copy { position: relative; z-index: 4; width: min(760px, 74vw); text-align: center; padding: 4rem; background: rgba(7,6,6,.78); border: 2px solid var(--paper); box-shadow: 18px 18px 0 var(--red), -18px -18px 0 var(--blue); }
.exit-seal { display: inline-block; margin-top: 1rem; font-family: var(--stamp); color: var(--white); background: var(--red); text-decoration: none; padding: 1rem 1.2rem; border: 2px solid var(--white); }
.final-domain { position: absolute; bottom: 4vh; right: 4vw; font-family: var(--space); font-size: clamp(2rem, 6vw, 7rem); color: transparent; -webkit-text-stroke: 1px var(--paper); }

.chapter-index { position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: .5rem; }
.chapter-index a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-family: var(--stamp); color: var(--black); background: var(--paper); text-decoration: none; border: 2px solid var(--black); transition: transform .2s ease, background .2s ease; }
.chapter-index a.active { background: var(--red); color: var(--white); transform: translateX(-.55rem) rotate(8deg); }

.reveal { opacity: 0; transform: translateY(8vh) rotate(-2deg); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0) rotate(0); }

@keyframes pendulum { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .hero-claims { height: 66vh; }
  .chapter-copy, .right-copy, .witness-text { left: 7vw; right: 7vw; width: auto; top: 18vh; }
  .split-mask, .shield-object, .moon-gate { opacity: .35; }
  .paper-field { width: 86vw; right: 7vw; }
  .chapter-index { display: none; }
  .claim-shield { bottom: 10vh; }
}