:root {
  /* DESIGN typography tokens: IBM Plex Sans Condensed* Condensed** Condense for side annotations */
  --lacquer: #07080A;
  --iron: #1B2632;
  --steel: #56616B;
  --parchment: #E6D8B8;
  --vermilion: #C5281C;
  --chalk: #B8B2A3;
  --gold: #A87C2F;
  --violet: #4B315E;
  --serif-jp: "Noto Serif JP", serif;
  --arsenal: "Archivo Black", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --philosophy: "Cormorant Garamond", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lacquer);
  color: var(--parchment);
  font-family: var(--condensed);
  overflow-x: hidden;
}

.grain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    radial-gradient(circle at 18% 23%, rgba(230,216,184,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 61%, rgba(184,178,163,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 42%, rgba(168,124,47,.08) 43%, transparent 44%);
  background-size: 37px 43px, 53px 47px, 100% 100%;
  mix-blend-mode: screen;
}

.progress-cord {
  position: fixed;
  right: 28px;
  top: 8vh;
  width: 2px;
  height: 84vh;
  background: rgba(86,97,107,.38);
  z-index: 30;
}

.progress-cord span {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--vermilion);
  box-shadow: 0 0 18px rgba(197,40,28,.7);
}

.chapter {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 6vw, 88px);
  border-bottom: 1px solid rgba(184,178,163,.16);
  background:
    linear-gradient(90deg, rgba(86,97,107,.14) 1px, transparent 1px) 0 0 / 9.6vw 100%,
    radial-gradient(circle at 78% 20%, rgba(75,49,94,.24), transparent 30%),
    var(--lacquer);
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.chapter::before {
  inset: 10vh auto 8vh 12vw;
  width: 1px;
  background: linear-gradient(var(--steel), transparent, var(--gold));
  opacity: .55;
  box-shadow: 18vw 0 0 rgba(86,97,107,.45), 43vw 0 0 rgba(86,97,107,.32), 71vw 0 0 rgba(86,97,107,.5);
}

.chapter::after {
  left: 0;
  right: 0;
  bottom: 18vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,216,184,.25), transparent);
}

.arsenal-gate {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(27,38,50,.85), transparent 42%),
    linear-gradient(90deg, rgba(7,8,10,.9), rgba(27,38,50,.34), rgba(7,8,10,.96));
}

.inventory-stamp,
.rack-number,
.inspection-tag,
.side-annotation {
  font-family: var(--condensed);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chalk);
}

.inventory-stamp {
  position: absolute;
  top: 34px;
  left: 40px;
  font-size: 12px;
  border: 1px solid rgba(168,124,47,.55);
  padding: 7px 12px;
  transform: rotate(-2deg);
}

.vertical-title {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-size: clamp(92px, 17vw, 230px);
  line-height: .78;
  letter-spacing: -.09em;
  color: var(--parchment);
  text-shadow: 0 10px 0 rgba(0,0,0,.8), 0 0 34px rgba(230,216,184,.14);
  clip-path: inset(0 10% 0 0);
}

.gate-whisper {
  position: absolute;
  bottom: 8vh;
  left: 12vw;
  margin: 0;
  font-family: var(--philosophy);
  font-size: clamp(30px, 5vw, 72px);
  color: rgba(230,216,184,.45);
}

.gate-rack { position: absolute; inset: 0; }

.sheath-rail {
  position: absolute;
  top: 7vh;
  bottom: 8vh;
  width: 2px;
  background: linear-gradient(transparent, var(--steel), transparent);
}

.rail-one { left: 26%; }
.rail-two { left: 53%; }
.rail-three { left: 76%; }

.gate-plate {
  position: absolute;
  width: clamp(120px, 18vw, 260px);
  height: 58vh;
  top: 18vh;
  border: 1px solid rgba(168,124,47,.45);
  border-radius: 48% 48% 16px 16px;
  background:
    linear-gradient(100deg, rgba(230,216,184,.08), transparent 28%),
    linear-gradient(180deg, #11151b, #07080A 60%, #1B2632);
  box-shadow: inset 0 0 28px rgba(0,0,0,.8), 0 20px 60px rgba(0,0,0,.55);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.gate-plate span {
  position: absolute;
  bottom: 26px;
  left: 20px;
  font-family: var(--arsenal);
  font-size: 12px;
  color: rgba(184,178,163,.48);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.plate-left { left: 25%; transform: translateX(-20%); }
.plate-center { left: 43%; height: 66vh; top: 13vh; }
.plate-right { left: 58%; transform: translateX(18%); }
.arsenal-gate.open .plate-left { transform: translateX(-46%) rotate(-2deg); }
.arsenal-gate.open .plate-center { transform: translateY(-3vh); }
.arsenal-gate.open .plate-right { transform: translateX(48%) rotate(2deg); }

.premise-tag {
  position: absolute;
  right: 12vw;
  bottom: 18vh;
  max-width: 310px;
  padding: 18px 22px;
  background: rgba(230,216,184,.92);
  color: var(--lacquer);
  border-left: 8px solid var(--vermilion);
  font-family: var(--condensed);
  letter-spacing: .05em;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.rack-number {
  position: absolute;
  top: 36px;
  left: 42px;
  font-size: 12px;
  color: var(--gold);
}

h2 {
  max-width: 900px;
  margin: 18vh 0 0 7vw;
  font-family: var(--serif-jp);
  font-size: clamp(46px, 8vw, 118px);
  line-height: .92;
  font-weight: 900;
  color: var(--parchment);
}

.thesis-fragment {
  max-width: 570px;
  margin: 42px 0 0 16vw;
  font-family: var(--philosophy);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.04;
  color: rgba(230,216,184,.78);
}

.long-rail {
  position: absolute;
  top: 33vh;
  left: 6vw;
  right: 9vw;
  height: 12px;
  border-top: 2px solid var(--steel);
  border-bottom: 1px solid rgba(168,124,47,.5);
}

.suspended-labels {
  position: absolute;
  right: 12vw;
  top: 22vh;
  display: grid;
  gap: 24px;
}

.suspended-labels span,
.counter-slips article {
  background: rgba(230,216,184,.9);
  color: var(--lacquer);
  padding: 14px 22px;
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .12em;
  transform: rotate(var(--tilt, -2deg));
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
}

.suspended-labels span:nth-child(2) { --tilt: 1.5deg; margin-left: 46px; }
.suspended-labels span:nth-child(3) { --tilt: -4deg; margin-left: 8px; }

.chalk-marks { position: absolute; left: 12vw; bottom: 14vh; width: 220px; height: 120px; }
.chalk-marks i { position: absolute; width: 160px; height: 2px; background: var(--chalk); transform: rotate(-18deg); opacity: .55; }
.chalk-marks i:nth-child(2) { top: 28px; left: 36px; width: 120px; }
.chalk-marks i:nth-child(3) { top: 62px; left: 10px; width: 190px; }
.chalk-marks i:nth-child(4) { top: 94px; left: 54px; width: 90px; }

.definition-rack { min-height: 116vh; }
.vertical-heading {
  position: absolute;
  right: 10vw;
  top: 11vh;
  writing-mode: vertical-rl;
  margin: 0;
  color: rgba(230,216,184,.16);
  font-size: clamp(100px, 18vw, 240px);
}

.armor-rack {
  position: relative;
  width: min(780px, 70vw);
  margin: 16vh 0 0 9vw;
  display: grid;
  gap: 28px;
}

.premise-plate {
  position: relative;
  min-height: 98px;
  padding: 20px 28px 20px 92px;
  border: 1px solid rgba(168,124,47,.42);
  background:
    radial-gradient(circle at 20px 20px, var(--gold) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(27,38,50,.95), rgba(7,8,10,.88));
  box-shadow: inset 0 -14px 22px rgba(0,0,0,.38), 18px 20px 40px rgba(0,0,0,.32);
  transform: translateX(var(--offset, 0));
}
.premise-plate:nth-child(2) { --offset: 12vw; }
.premise-plate:nth-child(3) { --offset: 3vw; }
.premise-plate:nth-child(4) { --offset: 17vw; }
.premise-plate b { position: absolute; left: 24px; top: 24px; font-family: var(--arsenal); color: var(--vermilion); }
.premise-plate span { font-size: clamp(23px, 3vw, 38px); color: var(--parchment); }

.red-cord-path,
.tightening-cords,
.final-cords {
  position: absolute;
  inset: 12vh 6vw 8vh auto;
  width: min(58vw, 900px);
  height: auto;
  overflow: visible;
}
.red-cord-path path,
.tightening-cords path,
.final-cords path {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 8px rgba(197,40,28,.5));
}
.red-cord-path circle { fill: var(--vermilion); }
.chapter.in-view .red-cord-path path,
.chapter.in-view .tightening-cords path,
.chapter.in-view .final-cords path { animation: cordDraw 1.8s ease forwards; }

@keyframes cordDraw { to { stroke-dashoffset: 0; } }

.inspection-tag { right: 10vw; bottom: 12vh; position: absolute; font-size: 13px; }

.counterexample-forge {
  background:
    radial-gradient(circle at 50% 58%, rgba(197,40,28,.34), transparent 20%),
    radial-gradient(circle at 52% 60%, rgba(168,124,47,.28), transparent 35%),
    linear-gradient(90deg, var(--lacquer), var(--iron));
}
.forge-core {
  position: absolute;
  left: 50%; top: 52%;
  width: 44vmin; height: 44vmin;
  border: 1px solid rgba(197,40,28,.46);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 20deg, rgba(197,40,28,.08) 0 8deg, transparent 8deg 22deg);
  animation: forgeTurn 18s linear infinite;
}
@keyframes forgeTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.counter-slips {
  position: absolute;
  right: 9vw;
  bottom: 12vh;
  width: min(540px, 44vw);
  display: grid;
  gap: 18px;
}
.counter-slips article { display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; text-transform: none; }
.counter-slips span { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--vermilion); color: var(--parchment); font-family: var(--serif-jp); }
.counter-slips b { font-family: var(--arsenal); text-transform: uppercase; }
.counter-slips em { font-family: var(--philosophy); font-size: 22px; }

.fitting-frame {
  position: relative;
  height: 48vh;
  margin-top: 5vh;
}
.joint {
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168,124,47,.56);
  background: radial-gradient(circle, rgba(230,216,184,.12), rgba(27,38,50,.78));
  font-family: var(--arsenal);
  color: var(--parchment);
  text-transform: uppercase;
}
.joint-a { left: 12vw; top: 18vh; }
.joint-b { left: 43vw; top: 4vh; }
.joint-c { right: 12vw; top: 17vh; }
.tightening-cords { left: 9vw; top: 2vh; width: 78vw; }
.side-annotation { position: absolute; right: 9vw; bottom: 10vh; width: 310px; font-size: 18px; line-height: 1.3; }

.contradiction-cut { display: grid; place-items: center; }
.contradiction-cut h2 { margin: 0; position: absolute; top: 13vh; left: 8vw; max-width: 850px; }
.weak-statement {
  font-family: var(--arsenal);
  font-size: clamp(42px, 8vw, 118px);
  text-transform: uppercase;
  color: rgba(184,178,163,.24);
  max-width: 900px;
  line-height: .9;
}
.cut-blade {
  position: absolute;
  width: 140vw;
  height: 18px;
  background: var(--vermilion);
  box-shadow: 0 0 30px rgba(197,40,28,.7);
  transform: rotate(-24deg) scaleX(0);
  transform-origin: left center;
}
.contradiction-cut.in-view .cut-blade { animation: cutAcross 1.1s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes cutAcross { to { transform: rotate(-24deg) scaleX(1); } }
.violet-note {
  position: absolute;
  right: 11vw;
  bottom: 15vh;
  width: 330px;
  padding: 18px 22px;
  background: var(--violet);
  color: var(--parchment);
  font-family: var(--philosophy);
  font-size: 28px;
}

.armored-thesis { min-height: 112vh; display: grid; place-items: center; }
.final-kanji {
  position: absolute;
  left: 8vw;
  top: 4vh;
  margin: 0;
  font-size: clamp(130px, 28vw, 360px);
  color: rgba(230,216,184,.12);
}
.display-case {
  position: relative;
  width: min(760px, 78vw);
  min-height: 72vh;
  border: 1px solid rgba(230,216,184,.22);
  background: linear-gradient(145deg, rgba(230,216,184,.08), rgba(7,8,10,.76));
  box-shadow: inset 0 0 80px rgba(0,0,0,.74), 0 30px 100px rgba(0,0,0,.5);
  display: grid;
  place-items: center;
  padding: 42px;
}
.armor-silhouette { position: absolute; top: 11vh; width: 260px; display: grid; gap: 10px; }
.armor-silhouette span {
  height: 52px;
  border-radius: 50% 50% 12px 12px;
  border: 1px solid rgba(168,124,47,.55);
  background: linear-gradient(90deg, rgba(86,97,107,.8), rgba(7,8,10,.95), rgba(168,124,47,.24));
}
.armor-silhouette span:nth-child(even) { transform: scaleX(.82); }
.final-cords { inset: 5vh auto auto 50%; width: 520px; transform: translateX(-50%); }
.armored-thesis .thesis-fragment { position: relative; margin: 46vh 0 0; text-align: center; }
.seal-button {
  margin-top: 30px;
  padding: 16px 24px;
  border: 1px solid var(--vermilion);
  background: rgba(197,40,28,.18);
  color: var(--parchment);
  font-family: var(--arsenal);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.seal-button.sealed,
.seal-button:hover { transform: rotate(-1deg) translateY(-2px); background: var(--vermilion); }

.chapter .premise-plate,
.chapter h2,
.chapter .thesis-fragment,
.chapter .suspended-labels,
.chapter .counter-slips,
.chapter .joint,
.chapter .violet-note,
.chapter .display-case {
  opacity: .22;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.chapter.in-view .premise-plate,
.chapter.in-view h2,
.chapter.in-view .thesis-fragment,
.chapter.in-view .suspended-labels,
.chapter.in-view .counter-slips,
.chapter.in-view .joint,
.chapter.in-view .violet-note,
.chapter.in-view .display-case {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .progress-cord { right: 12px; }
  .chapter { padding: 28px; }
  .suspended-labels, .counter-slips, .inspection-tag, .side-annotation { position: relative; right: auto; bottom: auto; top: auto; width: auto; margin: 38px 0 0; }
  h2 { margin-left: 0; }
  .armor-rack { width: 100%; margin-left: 0; }
  .premise-plate, .premise-plate:nth-child(n) { transform: none; }
  .red-cord-path { opacity: .35; }
  .joint { width: 124px; height: 124px; }
  .joint-a { left: 0; }
  .joint-b { left: 32vw; }
  .joint-c { right: 0; }
}