:root {
  /* Typography compliance note: IBM Plex Mono* Mono** for tiny ledger ticks; Interface/body: **Source Serif 4* 4** for readable narrative paragraphs and annotation text. */
  --midnight: #070A18;
  --sapphire: #123C8C;
  --emerald: #0F7A5A;
  --ruby: #B51E4B;
  --amethyst: #6F3FB5;
  --gold: #F4C76A;
  --pearl: #FFF2D2;
  --cyan: #7EE7FF;
  --display: "Cormorant Garamond", Georgia, serif;
  --engraved: "Fraunces", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--pearl);
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 199, 106, 0.18), transparent 34rem),
    radial-gradient(circle at 12% 35%, rgba(18, 60, 140, 0.45), transparent 42rem),
    radial-gradient(circle at 90% 62%, rgba(111, 63, 181, 0.34), transparent 40rem),
    linear-gradient(180deg, #070A18 0%, #080d24 45%, #090812 74%, #1b1021 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(255, 242, 210, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 242, 210, 0.028) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 72%);
}

#spark-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ambient,
.flare-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient {
  z-index: 0;
  filter: blur(6px);
}

.ambient-sapphire {
  background: radial-gradient(ellipse at 20% 20%, rgba(126, 231, 255, 0.16), transparent 28%), radial-gradient(ellipse at 73% 18%, rgba(18, 60, 140, 0.22), transparent 30%);
}

.ambient-ruby {
  background: radial-gradient(ellipse at 70% 78%, rgba(181, 30, 75, 0.22), transparent 33%), radial-gradient(ellipse at 35% 82%, rgba(244, 199, 106, 0.12), transparent 28%);
}

.flare-layer {
  z-index: 4;
  overflow: hidden;
}

.flare-layer::before,
.flare-layer::after {
  content: "";
  position: absolute;
  width: 58vw;
  height: 1.2rem;
  left: -65vw;
  top: 22vh;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(126, 231, 255, 0.2), rgba(255, 242, 210, 0.72), rgba(244, 199, 106, 0.28), transparent);
  filter: blur(1px);
  transform: rotate(-18deg);
  opacity: 0;
}

.flare-layer::after {
  width: 18vw;
  height: 18vw;
  border: 1px solid rgba(255, 242, 210, 0.24);
  background: radial-gradient(circle, rgba(255, 242, 210, 0.2), rgba(126, 231, 255, 0.08), transparent 60%);
  filter: blur(4px);
}

.flare-layer.sweep::before,
.flare-layer.sweep::after {
  animation: flareSweep 1.65s ease-out forwards;
}

.flare-layer.angle-b::before,
.flare-layer.angle-b::after { transform: rotate(14deg); top: 48vh; }
.flare-layer.angle-c::before,
.flare-layer.angle-c::after { transform: rotate(-31deg); top: 68vh; }

.site-seal,
.current-ember {
  position: fixed;
  z-index: 20;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 242, 210, 0.7);
}

.site-seal {
  top: 1.4rem;
  left: 1.4rem;
}

.current-ember {
  right: 1.4rem;
  bottom: 1.4rem;
  color: var(--cyan);
}

.chapter-rail {
  position: fixed;
  right: 1.55rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rail-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 242, 210, 0.45);
  background: rgba(7, 10, 24, 0.6);
  box-shadow: 0 0 0 rgba(244, 199, 106, 0);
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.rail-dot.active {
  background: var(--gold);
  transform: scale(1.35);
  box-shadow: 0 0 22px rgba(244, 199, 106, 0.82), 0 0 42px rgba(126, 231, 255, 0.28);
}

.ritual-scroll {
  position: relative;
  z-index: 5;
}

.timeline-spine {
  position: fixed;
  z-index: 6;
  left: 50%;
  top: 0;
  width: 18px;
  height: 100vh;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent 0 5px, rgba(255, 242, 210, 0.18) 5px 6px, rgba(255, 242, 210, 0.04) 7px 11px, rgba(255, 242, 210, 0.18) 12px 13px, transparent 13px 100%),
    linear-gradient(180deg, rgba(18, 60, 140, 0.1), rgba(15, 122, 90, 0.18), rgba(181, 30, 75, 0.12));
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(126, 231, 255, 0.12);
}

.spine-fill {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 10px;
  height: 0%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--cyan), var(--gold) 28%, var(--ruby) 55%, var(--emerald));
  box-shadow: 0 0 18px rgba(244, 199, 106, 0.78), 0 0 42px rgba(126, 231, 255, 0.25);
}

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) minmax(0, 34rem) 7rem minmax(0, 34rem) minmax(1.5rem, 1fr);
  align-items: center;
  isolation: isolate;
  padding: 7rem 0;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 9vh 8vw;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(255, 242, 210, 0.08), transparent 58%);
  clip-path: polygon(9% 22%, 48% 2%, 91% 24%, 76% 82%, 34% 96%, 6% 65%);
  opacity: 0.16;
  transform: scale(0.9) rotate(-3deg);
  transition: opacity 900ms ease, transform 900ms ease;
}

.chapter.active::before {
  opacity: 0.55;
  transform: scale(1) rotate(0deg);
}

.hero {
  grid-template-columns: 1fr;
  text-align: center;
  place-items: center;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 199, 106, 0.2);
  box-shadow: inset 0 0 60px rgba(111, 63, 181, 0.14), 0 0 100px rgba(18, 60, 140, 0.15);
  animation: slowSpin 24s linear infinite;
}

.hero-wordmark {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(5.4rem, 17vw, 18rem);
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 0.8;
  color: var(--pearl);
  text-shadow: 0 0 32px rgba(244, 199, 106, 0.16), 0 0 80px rgba(18, 60, 140, 0.36);
}

.domain-dot {
  display: inline-block;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(244, 199, 106, 1), 0 0 55px rgba(181, 30, 75, 0.8);
  animation: emberPulse 2.4s ease-in-out infinite;
}

.hero-kicker {
  z-index: 2;
  max-width: 42rem;
  margin: 1.4rem auto 0;
  font-family: var(--engraved);
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  color: rgba(255, 242, 210, 0.78);
}

.hero-glyph {
  position: absolute;
  right: 10vw;
  bottom: 9vh;
  font-family: var(--display);
  font-size: clamp(6rem, 18vw, 17rem);
  color: rgba(126, 231, 255, 0.09);
  text-shadow: 0 0 50px rgba(126, 231, 255, 0.24);
}

.gem-field {
  position: absolute;
  inset: 14vh auto auto 8vw;
  width: 16rem;
  height: 20rem;
  background: linear-gradient(135deg, rgba(18, 60, 140, 0.5), rgba(111, 63, 181, 0.16), rgba(244, 199, 106, 0.08));
  clip-path: polygon(50% 0, 92% 22%, 78% 80%, 40% 100%, 8% 70%, 16% 16%);
  opacity: 0.38;
}

.chapter-left .chapter-copy { grid-column: 2; }
.chapter-left .specimen { grid-column: 4; }
.chapter-right .chapter-copy { grid-column: 4; }
.chapter-right .specimen { grid-column: 2; }

.chapter-copy {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 900ms ease, transform 900ms ease;
}

.chapter.active .chapter-copy {
  opacity: 1;
  transform: translateY(0);
}

.node-label {
  font-family: var(--engraved);
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 1rem;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.8rem, 7vw, 8.4rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  color: var(--pearl);
}

h1 em {
  color: var(--gold);
  font-style: italic;
  text-shadow: 0 0 24px rgba(244, 199, 106, 0.35);
}

p {
  margin: 1.35rem 0 0;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  color: rgba(255, 242, 210, 0.78);
}

.ledger-line {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
  border-left: 1px solid rgba(126, 231, 255, 0.45);
  padding-left: 1rem;
}

.node {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 242, 210, 0.5);
  background: radial-gradient(circle at 50% 35%, rgba(255, 242, 210, 0.8), var(--ruby) 28%, rgba(18, 60, 140, 0.6) 60%, rgba(7, 10, 24, 0.95));
  box-shadow: 0 0 0 rgba(244, 199, 106, 0), inset 0 -8px 10px rgba(7, 10, 24, 0.48);
  transition: box-shadow 700ms ease, transform 700ms ease, border-color 700ms ease;
}

.node span {
  position: absolute;
  left: 50%;
  top: -0.9rem;
  width: 0.7rem;
  height: 1.35rem;
  transform: translateX(-50%) scaleY(0.35);
  transform-origin: bottom;
  border-radius: 80% 20% 70% 35%;
  background: linear-gradient(180deg, var(--pearl), var(--gold), var(--ruby));
  filter: blur(0.1px);
  opacity: 0.35;
  transition: opacity 700ms ease, transform 700ms ease;
}

.node-hero {
  top: auto;
  bottom: 9vh;
}

.chapter.active .node {
  border-color: var(--cyan);
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 30px rgba(244, 199, 106, 0.85), 0 0 74px rgba(126, 231, 255, 0.34), 0 0 118px rgba(181, 30, 75, 0.24);
}

.chapter.active .node span {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  animation: flameWaver 1.4s ease-in-out infinite alternate;
}

.specimen {
  position: relative;
  justify-self: center;
  width: min(32vw, 24rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translateY(2rem) scale(0.92);
  transition: opacity 900ms ease 120ms, transform 900ms ease 120ms;
}

.chapter.active .specimen {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.specimen::before,
.specimen::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255, 242, 210, 0.17);
  box-shadow: 0 0 54px rgba(126, 231, 255, 0.12);
}

.specimen::after {
  inset: 22%;
  border-color: rgba(244, 199, 106, 0.2);
  animation: slowSpin 18s linear infinite reverse;
}

.coin-core {
  position: absolute;
  inset: 24%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-size: clamp(4rem, 8vw, 8rem);
  color: var(--gold);
  background: radial-gradient(circle at 35% 25%, rgba(255, 242, 210, 0.36), rgba(244, 199, 106, 0.16) 35%, rgba(181, 30, 75, 0.2) 62%, rgba(18, 60, 140, 0.34));
  box-shadow: inset 0 0 28px rgba(255, 242, 210, 0.12), 0 0 64px rgba(244, 199, 106, 0.24);
}

.orbit {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(126, 231, 255, 0.35);
  border-radius: 50%;
  transform: rotate(25deg) scaleY(0.45);
}

.orbit-two {
  transform: rotate(-35deg) scaleY(0.5);
  border-color: rgba(244, 199, 106, 0.26);
}

.aperture-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(126, 231, 255, 0.38);
  box-shadow: inset 0 0 50px rgba(18, 60, 140, 0.35), 0 0 60px rgba(111, 63, 181, 0.24);
  animation: slowSpin 16s linear infinite;
}

.aperture-ring.small {
  inset: 35%;
  border-color: rgba(244, 199, 106, 0.45);
  animation-direction: reverse;
}

.aperture-blade {
  position: absolute;
  left: 44%;
  top: 15%;
  width: 12%;
  height: 70%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 242, 210, 0.15), rgba(111, 63, 181, 0.44), rgba(18, 60, 140, 0.05));
  transform-origin: 50% 50%;
}

.blade-b { transform: rotate(60deg); }
.blade-c { transform: rotate(120deg); }

.scale-beam {
  position: absolute;
  left: 18%;
  top: 40%;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: rotate(-6deg);
  box-shadow: 0 0 20px rgba(244, 199, 106, 0.55);
}

.scale-cup {
  position: absolute;
  top: 48%;
  width: 26%;
  height: 15%;
  border-bottom: 2px solid rgba(255, 242, 210, 0.62);
  border-radius: 0 0 50% 50%;
}

.cup-left { left: 13%; transform: rotate(8deg); }
.cup-right { right: 13%; transform: rotate(-11deg); }

.wax-pool {
  position: absolute;
  left: 35%;
  bottom: 18%;
  width: 30%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 122, 90, 0.7), rgba(181, 30, 75, 0.12), transparent 70%);
  box-shadow: 0 0 40px rgba(15, 122, 90, 0.4);
}

.specimen-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-content: center;
  font-family: var(--mono);
  color: var(--cyan);
}

.specimen-ribbon span {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(126, 231, 255, 0.25);
  background: rgba(7, 10, 24, 0.5);
  box-shadow: 0 0 24px rgba(126, 231, 255, 0.12);
  animation: ribbonFloat 3s ease-in-out infinite;
}

.specimen-ribbon span:nth-child(2n) {
  color: var(--gold);
  animation-delay: -1.3s;
}

.ledger-page {
  position: absolute;
  inset: 13% 20%;
  padding: 2rem;
  border: 1px solid rgba(255, 242, 210, 0.28);
  background: linear-gradient(135deg, rgba(255, 242, 210, 0.14), rgba(244, 199, 106, 0.08), rgba(18, 60, 140, 0.2));
  box-shadow: 0 0 80px rgba(244, 199, 106, 0.18);
  transform: rotate(4deg);
}

.ledger-page span {
  display: block;
  font-family: var(--display);
  font-size: 6rem;
  color: var(--pearl);
  text-shadow: 0 0 34px rgba(244, 199, 106, 0.45);
}

.ledger-page i {
  display: block;
  height: 1px;
  margin: 1rem 0;
  background: linear-gradient(90deg, rgba(255, 242, 210, 0.6), transparent);
}

@keyframes emberPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08) translateY(-0.04em); filter: brightness(1.35); }
}

@keyframes flameWaver {
  from { border-radius: 80% 20% 70% 35%; transform: translateX(-50%) scaleY(0.9) rotate(-4deg); }
  to { border-radius: 45% 70% 35% 80%; transform: translateX(-50%) scaleY(1.15) rotate(5deg); }
}

@keyframes slowSpin {
  to { transform: rotate(360deg); }
}

@keyframes flareSweep {
  0% { left: -65vw; opacity: 0; }
  18% { opacity: 0.85; }
  100% { left: 120vw; opacity: 0; }
}

@keyframes ribbonFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-1rem) rotate(2deg); }
}

@media (max-width: 860px) {
  .timeline-spine { left: 2rem; }
  .chapter {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    padding: 6rem 1.2rem 6rem 0;
  }
  .chapter-left .chapter-copy,
  .chapter-right .chapter-copy,
  .chapter-left .specimen,
  .chapter-right .specimen {
    grid-column: 2;
  }
  .specimen {
    width: min(70vw, 22rem);
    margin-top: 2rem;
  }
  .node { left: 2rem; }
  .chapter-rail { display: none; }
  .hero { padding-inline: 1rem; }
  .hero-wordmark { font-size: clamp(5rem, 24vw, 10rem); }
  h1 { font-size: clamp(3.2rem, 15vw, 6rem); }
}