:root {
  /* compliance tokens from DESIGN.md: feels like occult scholarship only small measurement ticks Interpret chosen seed Grotes* Grotesk** crisp labels */
  --event-black: #05060B;
  --magnetite-blue: #101B2E;
  --paper: #E7DCC4;
  --field-green: #7CFFB2;
  --pole-violet: #8E5CFF;
  --oxide-red: #A9472A;
  --brass: #C8A45D;
  --pole-x: 72vw;
  --pole-y: 23vh;
  --scroll-pull: 0;
  --display: 'Cormorant Garamond', serif;
  --accent: 'Space Grotesk', sans-serif;
  --body: 'Literata', serif;
  --mono: 'IBM Plex Mono', monospace;
  --inter: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--event-black); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper);
  font-family: var(--body);
  background:
    radial-gradient(circle at var(--pole-x) var(--pole-y), rgba(142, 92, 255, 0.25), transparent 9rem),
    radial-gradient(circle at 15% 58%, rgba(124, 255, 178, 0.07), transparent 28rem),
    linear-gradient(180deg, var(--event-black) 0%, var(--magnetite-blue) 48%, var(--event-black) 100%);
}

.design-token {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.19;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(231, 220, 196, 0.22) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 64%, rgba(200, 164, 93, 0.16) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 44%, rgba(231, 220, 196, 0.035) 45% 46%, transparent 47% 100%);
  background-size: 17px 19px, 23px 29px, 100% 100%;
}

.persistent-pole {
  position: fixed;
  left: var(--pole-x);
  top: var(--pole-y);
  width: 26px;
  height: 26px;
  z-index: 20;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 900ms cubic-bezier(.2,.7,.1,1), top 900ms cubic-bezier(.2,.7,.1,1);
}

.pole-core, .pole-halo {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.pole-core {
  background: radial-gradient(circle at 36% 30%, #101B2E 0 18%, #05060B 48%, #000 100%);
  border: 1px solid rgba(231, 220, 196, 0.28);
  box-shadow: 0 0 24px rgba(142, 92, 255, 0.76), 0 0 46px rgba(124, 255, 178, 0.22);
}

.pole-halo {
  inset: -38px;
  border: 1px solid rgba(124, 255, 178, 0.17);
  box-shadow: inset 0 0 46px rgba(142, 92, 255, 0.16);
  animation: pulseHalo 5s ease-in-out infinite;
}

.field-system {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 500vh;
  z-index: 4;
  pointer-events: none;
  opacity: 0.78;
  transform: translateY(calc(var(--scroll-pull) * -18px));
}

.field-path {
  fill: none;
  stroke: url(#auroraStroke);
  stroke-width: 1.4;
  stroke-dasharray: 10 18;
  filter: drop-shadow(0 0 8px rgba(124, 255, 178, 0.2));
  animation: drawField 12s linear infinite;
}

.path-b, .path-e { animation-duration: 16s; stroke-dasharray: 3 14; }
.path-c, .path-g { animation-duration: 22s; stroke-width: 0.9; }
.path-d, .path-h { animation-direction: reverse; opacity: 0.56; }

.quest { position: relative; z-index: 10; }

.plate {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(200, 164, 93, 0.13);
}

.plate::before {
  content: '';
  position: absolute;
  inset: 5vw;
  border: 1px solid rgba(231, 220, 196, 0.09);
  transform: skew(-5deg) rotate(-1deg);
  pointer-events: none;
}

.plate-number, .plate-label, .coordinates, .specimen-caption, .marginalia, .cavern-readout, .terminal-readout {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 0.75vw, 0.78rem);
  color: rgba(231, 220, 196, 0.68);
}

h1, h2 {
  font-family: var(--display);
  margin: 0;
  line-height: 0.88;
  color: var(--paper);
  text-shadow: 0 0 26px rgba(124, 255, 178, 0.08);
}

h1 { font-size: clamp(4.8rem, 15vw, 15rem); letter-spacing: -0.075em; }
h2 { font-size: clamp(3.3rem, 8vw, 8.5rem); letter-spacing: -0.045em; }
p { font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.62; }

.plate-needle {
  background: radial-gradient(circle at 70% 24%, rgba(142, 92, 255, 0.16), transparent 19rem), var(--event-black);
}

.plate-number { position: absolute; top: 7vh; left: 8vw; font-family: var(--accent); color: var(--brass); }

.hero-inscription {
  position: absolute;
  left: 6vw;
  bottom: 9vh;
  width: min(88vw, 1280px);
  transform: skewY(-1deg);
}

.field-note { max-width: 680px; margin: 1.4rem 0 0 0.6vw; color: rgba(231, 220, 196, 0.78); }

.needle-orbit {
  position: absolute;
  right: 13vw;
  top: 14vh;
  width: 310px;
  height: 310px;
  transform: rotate(calc(var(--scroll-pull) * 32deg));
  transition: transform 200ms linear;
}

.compass-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 93, 0.46);
  background: repeating-conic-gradient(from 7deg, rgba(231,220,196,0.22) 0 1deg, transparent 1deg 12deg);
  mask: radial-gradient(circle, transparent 0 55%, #000 56% 100%);
  animation: slowSpin 28s linear infinite;
}

.compass-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 212px;
  height: 11px;
  transform-origin: 8px center;
  transform: translate(-8px, -50%) rotate(16deg);
  background: linear-gradient(90deg, var(--brass), var(--oxide-red) 48%, transparent 49% 51%, var(--field-green));
  clip-path: polygon(0 50%, 42% 0, 100% 50%, 42% 100%);
  filter: drop-shadow(0 0 16px rgba(200, 164, 93, 0.34));
  animation: trembleNeedle 2.4s ease-in-out infinite;
}

.missing-south { position: absolute; right: 6px; bottom: 27px; color: var(--oxide-red); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; transform: rotate(18deg); }
.chalk-equation { position: absolute; right: 7vw; bottom: 12vh; font-family: var(--mono); color: rgba(231,220,196,0.22); font-size: 1.2rem; transform: rotate(-8deg); }
.chalk-equation span { color: rgba(169, 71, 42, 0.75); margin-left: 1rem; }

.plate-notebook {
  background:
    radial-gradient(circle at 28% 42%, rgba(124,255,178,0.08), transparent 18rem),
    linear-gradient(135deg, #05060B, #101B2E 58%, #05060B);
}

.vellum {
  position: absolute;
  background:
    linear-gradient(145deg, rgba(231,220,196,0.92), rgba(231,220,196,0.7)),
    radial-gradient(circle, rgba(169,71,42,0.2) 0 1px, transparent 1px);
  background-size: auto, 18px 18px;
  color: var(--event-black);
  box-shadow: 0 30px 80px rgba(0,0,0,0.44);
  border: 1px solid rgba(200,164,93,0.5);
  clip-path: polygon(2% 3%, 96% 0, 100% 82%, 93% 100%, 9% 96%, 0 74%);
}

.vellum-left { left: 7vw; top: 17vh; width: min(580px, 48vw); padding: 4rem 4.4rem; transform: rotate(-4deg); }
.vellum-right { right: 7vw; top: 25vh; width: min(460px, 38vw); min-height: 430px; padding: 3rem; transform: rotate(7deg); }
.vellum h2 { color: #101B2E; font-size: clamp(3rem, 6vw, 6.4rem); }
.vellum p { color: rgba(5, 6, 11, 0.77); }
.vellum .plate-label, .vellum .marginalia, .vellum .specimen-caption { color: rgba(16, 27, 46, 0.7); }

.brass-tack { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E7DCC4, #C8A45D 45%, #6d5420); box-shadow: 0 0 13px rgba(200,164,93,0.55); }
.tack-one { right: 42px; top: 32px; }
.tack-two { left: 38px; top: 35px; }
.marginalia { margin-top: 2rem; padding-left: 1rem; border-left: 2px solid #A9472A; }
.map-fragment { position: relative; height: 230px; margin: 3rem 0 2rem; border: 1px dashed rgba(16,27,46,0.4); overflow: hidden; }
.map-fragment span { position: absolute; inset: auto; left: -10%; width: 120%; height: 46px; border-top: 1px solid rgba(16,27,46,0.34); border-radius: 50%; transform: rotate(var(--r)); }
.map-fragment span:nth-child(1) { top: 20px; --r: -9deg; }
.map-fragment span:nth-child(2) { top: 60px; --r: 4deg; }
.map-fragment span:nth-child(3) { top: 105px; --r: -13deg; }
.map-fragment span:nth-child(4) { top: 146px; --r: 8deg; }
.map-fragment span:nth-child(5) { top: 190px; --r: -3deg; }
.wax-seal { position: absolute; left: 54vw; bottom: 18vh; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 3rem; color: #E7DCC4; background: radial-gradient(circle at 35% 28%, #A9472A, #5b1c12); box-shadow: 0 0 0 9px rgba(169,71,42,0.13); }

.plate-cavern { background: radial-gradient(ellipse at 60% 47%, rgba(142,92,255,0.16), transparent 18rem), radial-gradient(ellipse at 50% 70%, #101B2E, #05060B 68%); }
.filings-cloud { position: absolute; inset: 0; overflow: hidden; }
.filing { position: absolute; width: var(--w); height: 1px; left: var(--x); top: var(--y); background: rgba(231,220,196,var(--o)); transform: rotate(var(--a)); transform-origin: center; box-shadow: 0 0 8px rgba(124,255,178,0.14); transition: transform 1200ms ease, opacity 800ms ease; }
.filing.green { background: rgba(124,255,178,0.56); }
.filing.brass { background: rgba(200,164,93,0.48); }
.carved-clearing { position: absolute; left: 12vw; top: 25vh; max-width: 620px; padding: 3rem 3rem 3.5rem; background: radial-gradient(ellipse at center, rgba(5,6,11,0.82), rgba(5,6,11,0.5) 70%, transparent); border-left: 1px solid rgba(124,255,178,0.34); }
.carved-clearing h2 { color: #E7DCC4; }
.cavern-readout { position: absolute; right: 9vw; bottom: 14vh; color: #7CFFB2; border: 1px solid rgba(124,255,178,0.22); padding: 1rem; background: rgba(5,6,11,0.34); }

.plate-chapel { background: linear-gradient(90deg, #05060B, #101B2E 35%, #05060B 100%); }
.chapel-arches { position: absolute; inset: 10vh 7vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; opacity: 0.82; }
.arch { position: relative; border: 1px solid rgba(200,164,93,0.38); border-bottom: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; overflow: hidden; }
.arch span { position: absolute; inset: 16%; border: 1px solid rgba(124,255,178,0.18); border-bottom: 0; border-radius: inherit; }
.arch::after { content: ''; position: absolute; left: 50%; top: 12%; width: 1px; height: 80%; background: linear-gradient(#7CFFB2, transparent); opacity: 0.28; }
.arch-two { transform: translateY(7vh); }
.arch-three { transform: translateY(-3vh); }
.vertical-title { position: absolute; left: 5vw; top: 13vh; writing-mode: vertical-rl; font-family: var(--accent); letter-spacing: 0.24em; text-transform: uppercase; color: #C8A45D; }
.chapel-copy { position: absolute; right: 11vw; top: 20vh; max-width: 620px; text-align: right; }
.split-rose { position: absolute; left: 16vw; bottom: 13vh; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(231,220,196,0.22); animation: precess 14s ease-in-out infinite; }
.split-rose::before { content: ''; position: absolute; inset: 35px; border-radius: 50%; border: 1px dashed rgba(200,164,93,0.42); }
.split-rose i, .split-rose b { position: absolute; left: 50%; top: 50%; width: 9px; height: 190px; background: linear-gradient(#C8A45D 0 45%, transparent 45% 55%, #8E5CFF 55%); transform-origin: center; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); }
.split-rose i { transform: translate(-50%, -50%) rotate(0deg); }
.split-rose b { transform: translate(-50%, -50%) rotate(90deg); }
.rose-n, .rose-e, .rose-w { position: absolute; font-family: var(--accent); color: #E7DCC4; letter-spacing: 0.18em; }
.rose-n { left: 48%; top: 5px; }.rose-e { right: 8px; top: 48%; }.rose-w { left: 8px; top: 48%; }

.plate-aurora { background: radial-gradient(circle at 50% 35%, rgba(142,92,255,0.42), transparent 13rem), linear-gradient(180deg, #101B2E, #05060B 62%); }
.aurora-curtain { position: absolute; left: 50%; top: 4vh; width: 56vw; height: 87vh; border-radius: 47% 53% 50% 50%; filter: blur(18px); mix-blend-mode: screen; opacity: 0.42; transform-origin: 50% 20%; animation: breatheAurora 8s ease-in-out infinite; }
.curtain-one { background: conic-gradient(from 40deg, transparent, #7CFFB2, transparent, #8E5CFF, transparent); transform: translateX(-50%) rotate(-10deg); }
.curtain-two { background: conic-gradient(from 110deg, transparent, #8E5CFF, transparent, #7CFFB2, transparent); animation-delay: -2s; transform: translateX(-50%) scaleX(0.65) rotate(18deg); }
.curtain-three { background: radial-gradient(ellipse, rgba(200,164,93,0.3), transparent 60%); animation-delay: -4s; }
.terminal-inscription { position: absolute; left: 50%; top: 51%; width: min(760px, 88vw); transform: translate(-50%, -50%); text-align: center; }
.terminal-inscription h2 { font-size: clamp(3.5rem, 9vw, 9.5rem); }
.final-line { font-family: var(--display); font-size: clamp(1.7rem, 3.3vw, 3.4rem); color: #7CFFB2; }
.terminal-readout { display: inline-block; margin-top: 1.5rem; padding: 1rem 1.4rem; border-top: 1px solid rgba(200,164,93,0.46); border-bottom: 1px solid rgba(200,164,93,0.46); color: rgba(231,220,196,0.72); }
.final-compass { position: absolute; right: 13vw; bottom: 12vh; width: 150px; height: 150px; border: 1px solid rgba(231,220,196,0.18); border-radius: 50%; }
.final-compass span { position: absolute; left: 50%; top: 50%; width: 110px; height: 8px; background: linear-gradient(90deg, #8E5CFF, #7CFFB2); transform: translate(-12px, -50%) rotate(-42deg); clip-path: polygon(0 50%, 100% 0, 82% 50%, 100% 100%); }

@keyframes drawField { to { stroke-dashoffset: -280; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes trembleNeedle { 0%,100% { transform: translate(-8px, -50%) rotate(13deg); } 45% { transform: translate(-8px, -50%) rotate(22deg); } 55% { transform: translate(-8px, -50%) rotate(10deg); } }
@keyframes pulseHalo { 0%,100% { transform: scale(0.85); opacity: 0.38; } 50% { transform: scale(1.18); opacity: 0.72; } }
@keyframes precess { 0%,100% { transform: rotate(-4deg) skewX(-2deg); } 50% { transform: rotate(17deg) skewX(3deg); } }
@keyframes breatheAurora { 0%,100% { opacity: 0.24; transform: translateX(-50%) scale(0.86) rotate(-10deg); } 50% { opacity: 0.58; transform: translateX(-50%) scale(1.08) rotate(8deg); } }

@media (max-width: 760px) {
  .needle-orbit { right: -18vw; top: 9vh; transform: scale(0.72); }
  .vellum-left, .vellum-right { position: relative; left: auto; right: auto; top: auto; width: 86vw; margin: 12vh auto 0; padding: 2.2rem; }
  .vellum-right { margin-top: 3vh; }
  .chapel-copy { left: 8vw; right: 8vw; text-align: left; }
  .chapel-arches { grid-template-columns: 1fr; opacity: 0.35; }
  .split-rose { left: 8vw; width: 180px; height: 180px; }
  .carved-clearing { left: 6vw; right: 6vw; top: 22vh; }
}