:root {
  /* Google Fonts from DESIGN.md; JavaScript uses IntersectionObserver state changes. */
  --archive-ink: #0D0B0A;
  --lamp-umber: #2A1712;
  --terracotta-seal: #B85F3A;
  --burnt-sienna: #8F3F2A;
  --parchment-ash: #E4D4BE;
  --muted-vellum: #BCA990;
  --candle-gold: #D8A24A;
  --dried-blood-brown: #4A1E18;
  --serif-kr: "Noto Serif KR", serif;
  --serif-latin: "Cormorant Garamond", serif;
  --sans-kr: "IBM Plex Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(184,95,58,0.16), transparent 34rem),
    linear-gradient(180deg, #0D0B0A 0%, #160D0B 48%, #0D0B0A 100%);
  color: var(--parchment-ash);
  font-family: var(--serif-kr);
  overflow-x: hidden;
}

.archive-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .09;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(228,212,190,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 66%, rgba(228,212,190,.25) 0 1px, transparent 1.4px),
    linear-gradient(93deg, transparent 0 48%, rgba(228,212,190,.08) 49%, transparent 52%);
  background-size: 42px 42px, 57px 57px, 13px 100%;
  mix-blend-mode: screen;
}

.cursor-lamp {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(216,162,74,.12), rgba(184,95,58,.07) 36%, transparent 70%);
  opacity: .72;
  transition: opacity .35s ease;
}

.codex { position: relative; z-index: 3; }

.folio {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
  isolation: isolate;
}

.folio::before {
  content: attr(data-folio);
  position: absolute;
  inset: 10vh auto auto 50%;
  transform: translateX(-50%);
  font-family: var(--serif-latin);
  font-size: clamp(7rem, 16vw, 16rem);
  color: rgba(188,169,144,.035);
  letter-spacing: .08em;
  z-index: -1;
}

.folio::after {
  content: "";
  position: absolute;
  width: min(72vw, 860px);
  height: min(70vh, 720px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,95,58,0.16), rgba(42,23,18,0.08) 45%, transparent 70%);
  filter: blur(8px);
  opacity: .32;
  transition: opacity .9s ease;
  z-index: -2;
}

.folio.in-view::after { opacity: .78; }

.folio-page {
  position: relative;
  width: min(100%, 760px);
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.2rem, 6vw, 5.6rem) clamp(1.4rem, 5vw, 4.4rem);
  background:
    linear-gradient(135deg, rgba(228,212,190,.035), transparent 28%),
    radial-gradient(circle at 50% 24%, rgba(184,95,58,.11), transparent 45%),
    rgba(42,23,18,.82);
  border: 1px solid rgba(188,169,144,.25);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.54), inset 0 0 0 1px rgba(228,212,190,.035);
  filter: blur(5px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}

.folio.in-view .folio-page {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.folio-page::before,
.folio-page::after {
  content: "";
  position: absolute;
  inset: .7rem;
  border: 1px solid rgba(184,95,58,.28);
  clip-path: polygon(0 2%, 99% 0, 100% 96%, 2% 100%);
  pointer-events: none;
}

.folio-page::after {
  inset: -.65rem;
  border-color: rgba(188,169,144,.12);
  transform: rotate(-.35deg);
}

.page-rule {
  width: 64%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terracotta-seal), transparent);
  opacity: .7;
}

.top-rule { margin-bottom: 2rem; }
.bottom-rule { margin-top: 2rem; }

.folio-label,
.pronunciation,
.marginalia,
.spread-title,
.quiet-footnote,
.fragment,
.annotation-note {
  font-family: var(--serif-latin), var(--sans-kr);
}

.folio-label {
  margin: 0 0 1.1rem;
  color: var(--muted-vellum);
  font-size: .92rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif-kr);
  font-weight: 900;
  line-height: 1.08;
  color: var(--parchment-ash);
  text-shadow: 0 0 2rem rgba(216,162,74,.12);
}

h1 { font-size: clamp(5rem, 16vw, 11rem); letter-spacing: -.08em; }
h2 { font-size: clamp(2.05rem, 5vw, 4.55rem); }

.pronunciation {
  color: var(--muted-vellum);
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .06em;
  margin: 1rem 0 2.2rem;
}

.opening-text,
.clause-block,
.spread-half p,
.archive-page h2 + .archive-stack {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.9;
  color: rgba(228,212,190,.9);
}

.wax-seal {
  width: 5.4rem;
  height: 5.4rem;
  display: grid;
  place-items: center;
  margin: .2rem auto 1.8rem;
  border-radius: 45% 52% 47% 54%;
  background: radial-gradient(circle at 34% 32%, #B85F3A, #8F3F2A 68%, #4A1E18);
  color: #2A1712;
  font-size: 2.3rem;
  font-weight: 900;
  box-shadow: inset .3rem .35rem .85rem rgba(255,214,164,.16), inset -.4rem -.5rem .8rem rgba(74,30,24,.55), 0 .7rem 1.7rem rgba(0,0,0,.45);
  transition: transform .32s ease, box-shadow .32s ease;
}

.wax-seal:hover,
.orbit-seal:hover {
  transform: rotate(4deg) scale(1.025);
  box-shadow: inset .2rem .25rem .95rem rgba(255,214,164,.18), inset -.55rem -.55rem .9rem rgba(74,30,24,.68), 0 0 2.2rem rgba(216,162,74,.18);
}

.marginalia {
  position: fixed;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 10.5rem;
  color: var(--muted-vellum);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-50%) translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}

.folio.in-view .marginalia { opacity: .86; transform: translateY(-50%); }
.left-rail { left: 4.2vw; text-align: right; align-items: flex-end; }
.right-rail { right: 4.2vw; text-align: left; align-items: flex-start; }
.rail-number { color: var(--terracotta-seal); }
.vertical-note { writing-mode: vertical-rl; }

.layered-page { box-shadow: 13px 13px 0 rgba(74,30,24,.44), -10px -8px 0 rgba(188,169,144,.045), 0 2rem 5rem rgba(0,0,0,.54); }

.clause-block p { margin: .7rem 0; }
.legal-term {
  position: relative;
  color: var(--parchment-ash);
  cursor: help;
  background-image: linear-gradient(transparent 70%, rgba(184,95,58,.55) 70%);
}
.legal-term::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.45rem;
  width: 0;
  height: 1px;
  background: var(--candle-gold);
  transition: width .28s ease, left .28s ease;
}
.legal-term.active::after,
.legal-term:hover::after { width: 9rem; left: 100%; }

.annotation-note {
  min-height: 3.2rem;
  margin-top: 1.2rem;
  padding: .75rem 1rem;
  border-left: 1px solid var(--terracotta-seal);
  color: var(--muted-vellum);
  background: rgba(13,11,10,.28);
  opacity: .76;
}

.gate-illustration {
  width: min(88%, 320px);
  margin-top: 1.2rem;
  fill: none;
  stroke: var(--terracotta-seal);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .78;
}

.threshold-page { overflow: hidden; }
.threshold-spread {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: 2.4rem;
}
.spread-half {
  padding: 1.3rem;
  border: 1px solid rgba(188,169,144,.16);
  background: rgba(13,11,10,.24);
  transition: transform 1s ease;
}
.folio.in-view .ordinary { transform: translateX(-.45rem); }
.folio.in-view .exception { transform: translateX(.45rem); }
.spread-title {
  display: block;
  color: var(--terracotta-seal);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.crease {
  width: 1px;
  min-height: 15rem;
  background: linear-gradient(180deg, transparent, var(--dried-blood-brown), var(--terracotta-seal), transparent);
  box-shadow: 0 0 0 rgba(184,95,58,0);
  transition: width 1.4s ease, box-shadow 1.4s ease;
}
.folio.in-view .crease { width: .7rem; box-shadow: 0 0 2rem rgba(184,95,58,.22); }
.balance-pages {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
  color: var(--muted-vellum);
  font-family: var(--serif-kr);
}
.balance-pages i { width: 8rem; height: 1px; background: var(--terracotta-seal); transform: rotate(-2deg); }

.archive-stack {
  position: relative;
  width: 100%;
  min-height: 15rem;
  margin-top: 1.8rem;
}
.fragment {
  position: absolute;
  width: min(18rem, 78%);
  padding: .9rem 1rem;
  color: var(--muted-vellum);
  background: rgba(13,11,10,.34);
  border: 1px solid rgba(188,169,144,.18);
  text-align: left;
  box-shadow: .5rem .6rem 0 rgba(74,30,24,.28);
}
.fragment b { color: var(--terracotta-seal); margin-right: .6rem; }
.fragment-one { left: 3%; top: 0; transform: rotate(-2deg); }
.fragment-two { right: 0; top: 4.8rem; transform: rotate(1.4deg); }
.fragment-three { left: 20%; top: 10rem; transform: rotate(-.8deg); }
.orbit-seal {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  display: grid;
  place-items: center;
  margin: 1.2rem auto 0;
  border-radius: 50%;
  background: radial-gradient(circle, #B85F3A, #8F3F2A 72%, #4A1E18);
  color: var(--lamp-umber);
  transition: transform .32s ease, box-shadow .32s ease;
}
.orbit-seal strong { font-size: 2.4rem; }
.orbit-seal span {
  position: absolute;
  color: var(--candle-gold);
  font-size: .9rem;
}
.orbit-seal span:nth-child(1) { top: -.8rem; left: 48%; }
.orbit-seal span:nth-child(2) { right: -.8rem; top: 48%; }
.orbit-seal span:nth-child(3) { bottom: -.8rem; left: 48%; }
.orbit-seal span:nth-child(4) { left: -.8rem; top: 48%; }

.question-page {
  min-height: 72vh;
  background: radial-gradient(circle at 50% 50%, rgba(74,30,24,.42), rgba(13,11,10,.92) 62%);
}
.question-page h2 { max-width: 670px; }
.quiet-footnote {
  margin-top: 2.5rem;
  color: var(--muted-vellum);
  font-size: 1.05rem;
  letter-spacing: .05em;
}
.footnote {
  color: var(--candle-gold);
  display: inline-block;
  margin-left: .2rem;
}
.footnote.pulse { animation: footnotePulse 1.05s ease 1; }
.final-mark { margin-right: .35rem; filter: drop-shadow(0 0 .5rem rgba(216,162,74,.7)); }

@keyframes footnotePulse {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(216,162,74,0); }
  38% { transform: scale(1.55); text-shadow: 0 0 1.2rem rgba(216,162,74,.9); }
  100% { transform: scale(1); text-shadow: 0 0 .18rem rgba(216,162,74,.24); }
}

@media (max-width: 920px) {
  .marginalia { position: absolute; top: 8vh; transform: none; max-width: 36vw; font-size: .68rem; }
  .folio.in-view .marginalia { transform: none; }
  .left-rail { left: 6vw; }
  .right-rail { right: 6vw; }
  .threshold-spread { grid-template-columns: 1fr; }
  .crease { width: 100%; min-height: 1px; height: 1px; }
  .folio.in-view .crease { width: 100%; height: .55rem; }
}

@media (max-width: 620px) {
  .folio { padding: 9vh 1rem; }
  .folio-page { min-height: 64vh; }
  h1 { font-size: clamp(4.4rem, 24vw, 7rem); }
  .fragment { position: relative; inset: auto; width: 100%; margin: .75rem 0; transform: none; }
  .archive-stack { min-height: auto; }
  .cursor-lamp { display: none; }
}