:root {
  /* Design typography tokens: Condensed** compact annotations when needed. */
  --midnight: #071126;
  --shadow: #121B3F;
  --rose: #CFA0B8;
  --parchment: #D7C7A1;
  --edge: #9E8558;
  --moon: #F2EBD2;
  --phosphor: #A9F5C8;
  --gold: #C9A24A;
  --ink: #26324D;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 18% 8%, rgba(169,245,200,.12), transparent 28%), radial-gradient(circle at 86% 38%, rgba(207,160,184,.1), transparent 24%), linear-gradient(180deg, var(--midnight), #040913 58%, var(--midnight));
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  overflow-x: hidden;
}

.archive-void {
  position: relative;
  min-height: 100vh;
  padding: 5vh 0 8vh;
  isolation: isolate;
}

.archive-void::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(242,235,210,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(242,235,210,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.fairy-lights { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.light {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow: 0 0 18px var(--phosphor), 0 0 34px rgba(169,245,200,.55);
  opacity: .18;
  transform: translate3d(0,0,0);
}

.ambient-sigil {
  position: fixed;
  color: rgba(201,162,74,.35);
  font-family: "Roboto Condensed", sans-serif;
  font-size: clamp(3rem, 9vw, 9rem);
  z-index: 1;
  filter: blur(.2px);
}
.sigil-left { left: 7vw; top: 28vh; }
.sigil-right { right: 8vw; top: 62vh; }

.parchment-spine {
  position: relative;
  z-index: 3;
  width: min(76vw, 760px);
  margin: 0 auto;
  background: linear-gradient(90deg, rgba(158,133,88,.42), transparent 6%, transparent 94%, rgba(158,133,88,.42)), radial-gradient(circle at 25% 12%, rgba(242,235,210,.65), transparent 18%), radial-gradient(circle at 70% 58%, rgba(158,133,88,.18), transparent 22%), linear-gradient(180deg, var(--moon), var(--parchment) 24%, #ccb98d 66%, var(--moon));
  border-left: 1px solid rgba(201,162,74,.5);
  border-right: 1px solid rgba(201,162,74,.38);
  box-shadow: 0 0 80px rgba(169,245,200,.08), 0 30px 120px rgba(0,0,0,.55), inset 0 0 90px rgba(158,133,88,.28);
  transform-origin: top center;
  animation: unfurl 1800ms cubic-bezier(.2,.7,.08,1) both;
}

.parchment-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(38,50,77,.16) 1px, transparent 2px), linear-gradient(90deg, transparent 49%, rgba(38,50,77,.12) 50%, transparent 51%);
  background-size: 38px 38px, 100% 34px;
  mix-blend-mode: multiply;
  opacity: .45;
  pointer-events: none;
}

@keyframes unfurl { from { transform: scaleY(.08); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }

.deckle { height: 34px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(158,133,88,.25) 18px 21px), var(--parchment); filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
.deckle-top { clip-path: polygon(0 28%, 7% 52%, 15% 30%, 25% 60%, 39% 25%, 52% 54%, 69% 32%, 82% 64%, 100% 28%, 100% 100%, 0 100%); }
.deckle-bottom { clip-path: polygon(0 0, 100% 0, 100% 70%, 87% 48%, 73% 78%, 59% 50%, 41% 72%, 28% 48%, 12% 76%, 0 52%); }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 9vw, 8rem) clamp(2rem, 8vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
}

.chamber:nth-of-type(3) { margin-left: -3vw; width: calc(100% + 6vw); }
.chamber:nth-of-type(4) { width: 92%; margin: 0 auto; }

h1, h2 { font-family: "Oswald", sans-serif; margin: 0; text-transform: uppercase; color: var(--ink); letter-spacing: .12em; line-height: .92; }
h1 { font-size: clamp(4.8rem, 15vw, 10.5rem); text-shadow: 0 1px 0 var(--moon); }
h2 { font-size: clamp(2.7rem, 8vw, 6.3rem); max-width: 9ch; }

p { font-size: clamp(1rem, 1.55vw, 1.22rem); line-height: 1.9; max-width: 48ch; margin: 0; }
.subtitle { color: var(--shadow); font-size: clamp(1.1rem, 2vw, 1.6rem); max-width: 28ch; }
.theorem-label, .vertical-label { font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .24em; color: var(--edge); font-weight: 700; }
.vertical-label { writing-mode: vertical-rl; position: absolute; right: 2rem; top: 7rem; }
.chapter-mark { font-family: "Oswald", sans-serif; color: rgba(201,162,74,.58); font-size: 8rem; line-height: .8; position: absolute; top: 3rem; left: 2rem; }

.seal-tab, .paper-button {
  align-self: flex-start;
  margin-top: 2rem;
  border: 1px solid rgba(158,133,88,.65);
  background: linear-gradient(135deg, var(--moon), var(--parchment));
  color: var(--ink);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: .85rem 1.2rem;
  box-shadow: 6px 6px 0 rgba(158,133,88,.28);
  cursor: pointer;
}

.lottie-moth { width: min(55vw, 320px); margin-bottom: 1rem; filter: drop-shadow(0 0 16px rgba(169,245,200,.55)); }
.moth-svg path, .moth-svg circle, .margin-diagram path { fill: none; stroke: var(--phosphor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.moth-svg .node { fill: var(--gold); stroke: none; animation: pulse 2400ms infinite ease-in-out; }
.theorem-path { stroke-dasharray: 620; animation: drawLoop 5400ms infinite ease-in-out; }
.wing-line { stroke: var(--gold); opacity: .9; animation: wing 4200ms infinite ease-in-out; }
@keyframes drawLoop { 0% { stroke-dashoffset: 620; opacity: .1; } 45%,70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -620; opacity: .1; } }
@keyframes wing { 50% { transform: translateY(3px); opacity: .55; } }
@keyframes pulse { 50% { r: 6px; opacity: .55; } }

.margin-diagram { position: absolute; right: -110px; top: 25%; width: 180px; opacity: .58; }
.margin-diagram path { stroke: var(--ink); stroke-dasharray: 540; stroke-dashoffset: 540; transition: stroke-dashoffset 1800ms ease; }
.margin-diagram.is-drawn path { stroke-dashoffset: 0; }

.armor-charm { position: relative; width: min(90%, 410px); height: 250px; margin: 2rem 0; }
.plate { position: absolute; width: 230px; height: 86px; display: grid; place-items: center; font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .2em; background: rgba(242,235,210,.62); border: 1px solid var(--edge); clip-path: polygon(9% 0, 100% 0, 92% 100%, 0 100%); box-shadow: inset 0 0 24px rgba(201,162,74,.24); transition: transform 900ms ease; }
.plate-one { left: 20px; top: 0; transform: rotate(-6deg); }
.plate-two { left: 90px; top: 74px; transform: rotate(4deg); }
.plate-three { left: 38px; top: 148px; transform: rotate(-2deg); }
.armor-charm.folded .plate-one { transform: translate(45px, 44px) rotate(-22deg); }
.armor-charm.folded .plate-two { transform: translate(-12px, 10px) rotate(18deg); }
.armor-charm.folded .plate-three { transform: translate(42px, -42px) rotate(-14deg); }

.stitch-svg { width: 100%; overflow: visible; }
.stitch-path, .stitch-dashes path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.stitch-path { stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 2200ms ease; }
.stitch-dashes path { opacity: .75; }
.stitch-svg.is-stitched .stitch-path { stroke-dashoffset: 0; }

.garden-bed { position: relative; height: 250px; margin-top: 1.5rem; border-bottom: 1px solid rgba(38,50,77,.28); }
.mushroom { position: absolute; bottom: 24px; width: 82px; height: 58px; background: var(--rose); border-radius: 70% 70% 22% 22%; box-shadow: inset 0 -18px 0 rgba(158,133,88,.18); }
.mushroom::after { content: ""; position: absolute; width: 22px; height: 70px; left: 30px; top: 48px; background: var(--moon); border: 1px solid rgba(158,133,88,.4); }
.cap-a { left: 12%; }.cap-b { right: 22%; transform: scale(.72); background: var(--phosphor); }
.fern { position: absolute; left: 45%; bottom: 20px; width: 130px; height: 160px; border-left: 2px solid var(--edge); transform: rotate(18deg); }
.fern::before { content: ""; position: absolute; inset: 18px 0 0 -46px; background: repeating-linear-gradient(155deg, transparent 0 13px, rgba(38,50,77,.45) 14px 16px, transparent 17px 28px); }
.dew-abacus { position: absolute; right: 8%; top: 18px; width: 160px; height: 80px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: radial-gradient(circle at 20% 50%, var(--phosphor) 0 5px, transparent 6px), radial-gradient(circle at 44% 50%, var(--gold) 0 5px, transparent 6px), radial-gradient(circle at 69% 50%, var(--phosphor) 0 5px, transparent 6px); }

.folding-paper { width: 260px; height: 260px; position: relative; margin-top: 2rem; perspective: 700px; }
.folding-paper span { position: absolute; inset: 0; background: linear-gradient(135deg, var(--moon), var(--parchment)); border: 1px solid var(--edge); transition: transform 1000ms ease, opacity 1000ms ease; transform-origin: center; }
.folding-paper span:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 50%); background: rgba(201,162,74,.28); }
.folding-paper span:nth-child(3) { clip-path: polygon(0 100%, 100% 100%, 50% 50%); background: rgba(207,160,184,.22); }
.folding-paper.folded span:nth-child(1) { transform: rotate(45deg) scale(.62); }
.folding-paper.folded span:nth-child(2) { transform: rotateX(68deg) translateY(34px); }
.folding-paper.folded span:nth-child(3) { transform: rotateX(-68deg) translateY(-34px); }

.chamber::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(158,133,88,.55), transparent); }

@media (max-width: 760px) {
  .parchment-spine { width: 92vw; }
  .chamber { padding: 4rem 1.5rem; }
  .margin-diagram { right: 1rem; top: auto; bottom: 3rem; width: 110px; }
  .vertical-label { right: 1rem; }
  .chamber:nth-of-type(3), .chamber:nth-of-type(4) { width: 100%; margin: 0; }
}