:root {
  /* Design typography tokens: Space Mono** for the domain wordmark; IBM Plex Mono** for annotations; Inter** for any longer explanatory copy that needs quiet readability without competing with the display moments. Compliance aliases: Mono* Inter* */
  --midnight: #210711;
  --wine: #4B1024;
  --rose: #8A2E46;
  --gold: #F0B85A;
  --cream: #F7E8C8;
  --violet: #B9A7CF;
  --mauve: #6E5664;
  --space: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --plex: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 24% 16%, rgba(138, 46, 70, 0.38), transparent 30vw),
    radial-gradient(circle at 78% 38%, rgba(185, 167, 207, 0.14), transparent 28vw),
    linear-gradient(145deg, #210711 0%, #16040b 48%, #2a0815 100%);
  font-family: var(--sans);
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(247, 232, 200, 0.10) 0 1px, transparent 1px),
    radial-gradient(circle at 58% 66%, rgba(185, 167, 207, 0.08) 0 1px, transparent 1px),
    linear-gradient(75deg, transparent 0 48%, rgba(110, 86, 100, 0.08) 49% 50%, transparent 51% 100%);
  background-size: 46px 52px, 70px 76px, 180px 180px;
  animation: grainDrift 25s linear infinite;
}

.violet-haze {
  position: absolute;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  filter: blur(55px);
  background: radial-gradient(circle, rgba(185, 167, 207, 0.20), rgba(138, 46, 70, 0.08) 38%, transparent 68%);
  animation: hazeFloat 18s ease-in-out infinite alternate;
}

.haze-one { left: -16vw; top: 18vh; }
.haze-two { right: -18vw; top: 220vh; animation-delay: -7s; }

.chapter-rail {
  position: fixed;
  z-index: 20;
  left: 3.2vw;
  top: 12vh;
  height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-12deg);
  transform-origin: center;
}

.chapter-rail::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -30px;
  bottom: -30px;
  border-left: 1px solid rgba(110, 86, 100, 0.55);
  box-shadow: 0 0 24px rgba(240, 184, 90, 0.10);
}

.chapter-rail a {
  position: relative;
  color: rgba(247, 232, 200, 0.52);
  text-decoration: none;
  font: 11px/1 var(--space);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-left: 44px;
  transition: color 500ms ease, transform 500ms ease;
}

.chapter-rail a::before {
  content: attr(data-mark);
  position: absolute;
  left: 0;
  top: -5px;
  width: 33px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--mauve);
  border: 1px solid rgba(110, 86, 100, 0.65);
  background: rgba(33, 7, 17, 0.62);
}

.chapter-rail a.active,
.chapter-rail a:hover {
  color: var(--gold);
  transform: translateX(8px);
}

.plot-thread {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto 0;
  width: 100%;
  height: 500vh;
  pointer-events: none;
  overflow: visible;
}

#mainThread,
.branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#mainThread {
  stroke: url(#none);
  stroke: var(--rose);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: url(#threadGlow);
  opacity: 0.9;
}

.branch {
  stroke: rgba(240, 184, 90, 0.58);
  stroke-width: 1.4;
  stroke-dasharray: 8 16;
  opacity: 0.65;
}

.thread-nodes circle {
  fill: var(--gold);
  stroke: var(--cream);
  stroke-width: 1;
  opacity: 0.78;
  transform-origin: center;
  animation: nodeBreathe 5s ease-in-out infinite;
}

main { position: relative; z-index: 2; }

.story-section {
  position: relative;
  min-height: 112vh;
  display: grid;
  place-items: center;
  padding: 12vh 8vw;
  overflow: hidden;
  isolation: isolate;
}

.story-section::before,
.story-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.section-scrim {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: linear-gradient(122deg, rgba(33, 7, 17, 0.34), rgba(75, 16, 36, 0.65), rgba(33, 7, 17, 0.22));
}

.strata-ember {
  min-height: 100vh;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}

.strata-thread {
  margin-top: -13vh;
  padding-top: 22vh;
  clip-path: polygon(0 12%, 100% 0, 100% 90%, 0 100%);
  background: linear-gradient(152deg, rgba(75, 16, 36, 0.76), rgba(33, 7, 17, 0.98) 56%, rgba(110, 86, 100, 0.18));
}

.strata-witness {
  margin-top: -12vh;
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 88%);
  background: linear-gradient(28deg, rgba(33, 7, 17, 0.96), rgba(75, 16, 36, 0.72), rgba(138, 46, 70, 0.23));
}

.strata-turning {
  margin-top: -12vh;
  clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%);
  background: radial-gradient(circle at 70% 35%, rgba(240, 184, 90, 0.17), transparent 26vw), linear-gradient(142deg, #210711, #4B1024 64%, #210711);
}

.strata-afterimage {
  margin-top: -12vh;
  min-height: 118vh;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
  background: radial-gradient(circle at 50% 56%, rgba(240, 184, 90, 0.22), transparent 24vw), linear-gradient(165deg, #210711, #16040b 50%, #4B1024);
}

.wordmark-slope {
  position: absolute;
  left: 17vw;
  top: 16vh;
  transform: rotate(-9deg);
  transform-origin: left center;
}

.wordmark-slope h1 {
  margin: 0;
  font-family: var(--space);
  font-size: clamp(2.4rem, 7.8vw, 8.4rem);
  font-weight: 400;
  letter-spacing: -0.08em;
  color: var(--cream);
  text-shadow: 0 0 38px rgba(240, 184, 90, 0.20), 0 16px 60px rgba(0, 0, 0, 0.58);
}

.mono-label,
.coordinate {
  font-family: var(--plex);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mauve);
  font-size: clamp(0.62rem, 1vw, 0.78rem);
}

.slant-panel {
  position: relative;
  width: min(760px, 78vw);
  padding: 1px;
  transform: rotate(-5deg) skewX(-2deg);
  background: rgba(247, 232, 200, 0.055);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(110, 86, 100, 0.30);
  backdrop-filter: blur(4px);
}

.panel-inner {
  position: relative;
  padding: clamp(2rem, 5vw, 5rem);
  transform: skewX(2deg) rotate(5deg);
  background:
    linear-gradient(100deg, rgba(247, 232, 200, 0.08), rgba(247, 232, 200, 0.025)),
    repeating-linear-gradient(108deg, transparent 0 18px, rgba(110, 86, 100, 0.10) 19px 20px);
}

.lit-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), rgba(110, 86, 100, 0.28), rgba(138, 46, 70, 0.78), #F0B85A, rgba(110, 86, 100, 0.32), rgba(110, 86, 100, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
  animation: traceBorder 8s linear infinite;
}

.lit-border::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  border: 1px solid rgba(110, 86, 100, 0.24);
  z-index: -1;
}

.slant-panel h2 {
  margin: 0.45em 0 0.35em;
  max-width: 11ch;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 8vw, 8rem);
  font-weight: 400;
  line-height: 0.86;
  color: var(--cream);
}

.slant-panel p {
  max-width: 47ch;
  margin: 0;
  color: rgba(247, 232, 200, 0.76);
  font: 1rem/1.8 var(--sans);
}

.hero-panel { margin-top: 28vh; margin-left: 15vw; }
.thread-panel { margin-right: 22vw; transform: rotate(6deg) skewX(3deg); }
.thread-panel .panel-inner { transform: skewX(-3deg) rotate(-6deg); }
.witness-panel { margin-left: 22vw; transform: rotate(-8deg) skewX(-4deg); }
.witness-panel .panel-inner { transform: skewX(4deg) rotate(8deg); }
.turning-panel { margin-right: 12vw; transform: rotate(4deg) skewX(-2deg); }
.turning-panel .panel-inner { transform: skewX(2deg) rotate(-4deg); }
.after-panel { margin-top: -18vh; transform: rotate(-3deg) skewX(2deg); }
.after-panel .panel-inner { transform: skewX(-2deg) rotate(3deg); }

.candle-field {
  position: absolute;
  left: 27vw;
  bottom: 12vh;
  width: 150px;
  height: 210px;
  z-index: 6;
}

.candle,
.final-candle {
  position: absolute;
  width: 58px;
  height: 126px;
  left: 46px;
  bottom: 0;
}

.final-candle { left: calc(50% - 29px); bottom: 16vh; z-index: 7; }

.wax {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 82px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(90deg, #B9A7CF 0%, #F7E8C8 42%, #6E5664 100%);
  box-shadow: inset 9px 0 14px rgba(75, 16, 36, 0.28), 0 12px 32px rgba(0, 0, 0, 0.35);
}

.wick {
  position: absolute;
  left: 27px;
  bottom: 80px;
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: #210711;
}

.flame {
  position: absolute;
  left: 17px;
  bottom: 94px;
  width: 24px;
  height: 44px;
  border-radius: 55% 45% 58% 42%;
  background: radial-gradient(circle at 50% 62%, #F7E8C8 0 16%, #F0B85A 28%, #8A2E46 66%, transparent 72%);
  box-shadow: 0 0 22px #F0B85A, 0 0 60px rgba(240, 184, 90, 0.48), 0 0 105px rgba(138, 46, 70, 0.42);
  transform-origin: 50% 100%;
  animation: flameFlicker 2.6s ease-in-out infinite;
}

.candle-halo {
  position: absolute;
  left: -145px;
  bottom: -105px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 184, 90, 0.33), rgba(240, 184, 90, 0.10) 35%, transparent 68%);
  filter: blur(7px);
  animation: haloPulse 5s ease-in-out infinite;
}

.manuscript,
.vellum-sheet {
  position: absolute;
  z-index: 5;
  color: rgba(33, 7, 17, 0.76);
  background:
    linear-gradient(135deg, rgba(247, 232, 200, 0.72), rgba(185, 167, 207, 0.40)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(75, 16, 36, 0.12) 18px 19px);
  border: 1px solid rgba(247, 232, 200, 0.28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  clip-path: polygon(2% 4%, 98% 0, 95% 91%, 12% 100%, 0 78%);
  animation: scrapDrift 9s ease-in-out infinite alternate;
}

.scrap {
  width: 260px;
  padding: 22px;
  font: 1.55rem/1.05 var(--serif);
}

.scrap-one { right: 12vw; top: 24vh; transform: rotate(10deg); }
.scrap-two { left: 8vw; bottom: 22vh; transform: rotate(-8deg); font-family: var(--plex); font-size: 0.82rem; letter-spacing: 0.08em; }

.vellum-sheet {
  width: 230px;
  min-height: 150px;
  padding: 20px;
  font-family: var(--serif);
}

.vellum-sheet span {
  display: block;
  margin-bottom: 18px;
  font: 0.66rem/1 var(--plex);
  color: #8A2E46;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.vellum-sheet b { font-weight: 400; font-size: 1.65rem; line-height: 1; }
.sheet-a { right: 14vw; top: 24vh; transform: rotate(-11deg); }
.sheet-b { left: 19vw; bottom: 16vh; transform: rotate(8deg); animation-delay: -4s; }

.node-label {
  position: absolute;
  z-index: 8;
  color: var(--gold);
  font: 0.72rem/1 var(--space);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(240, 184, 90, 0.7);
}

.label-motive { left: 29vw; top: 36vh; }
.label-echo { right: 18vw; bottom: 24vh; }

.registration-ticks,
.witness-board,
.ignition-map,
.constellation {
  position: absolute;
  pointer-events: none;
}

.registration-ticks {
  right: 8vw;
  bottom: 12vh;
  width: 34vw;
  height: 18vw;
  transform: rotate(-18deg);
  background:
    linear-gradient(90deg, rgba(110, 86, 100, 0.28) 1px, transparent 1px),
    linear-gradient(0deg, rgba(110, 86, 100, 0.18) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.45;
}

.witness-board {
  right: 12vw;
  top: 22vh;
  width: 360px;
  height: 360px;
  transform: rotate(13deg);
  border: 1px solid rgba(110, 86, 100, 0.35);
  background: radial-gradient(circle, rgba(185, 167, 207, 0.10), transparent 64%);
}

.witness-board::before,
.witness-board::after {
  content: "";
  position: absolute;
  background: rgba(138, 46, 70, 0.72);
  height: 1px;
  transform-origin: left center;
  box-shadow: 0 0 16px rgba(240, 184, 90, 0.22);
}

.witness-board::before { width: 320px; left: 30px; top: 240px; transform: rotate(-33deg); }
.witness-board::after { width: 270px; left: 90px; top: 90px; transform: rotate(54deg); }
.witness-board p { position: absolute; right: 26px; bottom: 30px; color: var(--violet); font: 0.7rem/1 var(--plex); letter-spacing: 0.24em; text-transform: uppercase; }
.wax-seal { position: absolute; left: 42%; top: 42%; width: 72px; height: 72px; border-radius: 50%; border: 1px solid #F0B85A; background: radial-gradient(circle, rgba(240, 184, 90, 0.38), rgba(138, 46, 70, 0.18)); }
.thread-pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #F0B85A; box-shadow: 0 0 24px #F0B85A; }
.pin-one { left: 24px; top: 234px; }
.pin-two { right: 22px; top: 72px; }
.pin-three { left: 86px; top: 84px; }

.ignition-map {
  right: 18vw;
  bottom: 18vh;
  width: 420px;
  height: 240px;
  transform: rotate(-15deg);
  border-top: 1px solid rgba(240, 184, 90, 0.42);
  border-bottom: 1px solid rgba(138, 46, 70, 0.42);
}

.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold), 0 0 58px rgba(240, 184, 90, 0.38);
  animation: sparkWait 4s ease-in-out infinite;
}
.spark-a { left: 22%; top: 60%; }
.spark-b { left: 54%; top: 26%; animation-delay: -1.2s; }
.spark-c { right: 9%; top: 48%; animation-delay: -2.4s; }
.diagonal-note { position: absolute; right: 14px; top: 22px; color: var(--gold); font: 0.74rem/1 var(--space); letter-spacing: 0.25em; text-transform: uppercase; }

.constellation {
  left: 10vw;
  right: 10vw;
  bottom: 8vh;
  height: 48vh;
  border: 1px solid rgba(110, 86, 100, 0.22);
  background: radial-gradient(circle at 50% 58%, rgba(240, 184, 90, 0.10), transparent 42%);
  transform: rotate(-4deg);
}

.constellation span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--violet);
  font: 0.72rem/1 var(--plex);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.constellation span::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold);
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes traceBorder { to { --angle: 360deg; } }
@keyframes flameFlicker { 0%, 100% { transform: rotate(-2deg) scaleY(1); } 45% { transform: rotate(3deg) scale(0.93, 1.08); } 70% { transform: rotate(-4deg) scale(1.04, 0.94); } }
@keyframes haloPulse { 0%, 100% { opacity: 0.75; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes scrapDrift { from { translate: 0 0; } to { translate: 14px -18px; } }
@keyframes hazeFloat { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(8vw, -7vh, 0) rotate(18deg); } }
@keyframes grainDrift { to { transform: translate3d(-80px, -120px, 0); } }
@keyframes nodeBreathe { 0%, 100% { opacity: 0.62; r: 7; } 45% { opacity: 1; r: 11; } }
@keyframes sparkWait { 0%, 100% { transform: scale(0.8); opacity: 0.46; } 35% { transform: scale(1.8); opacity: 1; } }

.story-section:not(.is-visible) .lit-border::before { opacity: 0.22; }
.story-section.is-visible .slant-panel { animation: panelArrive 1100ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes panelArrive { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 760px) {
  .chapter-rail { left: -18px; top: 18vh; scale: 0.78; }
  .story-section { min-height: 118vh; padding: 14vh 7vw; }
  .wordmark-slope { left: 9vw; top: 13vh; }
  .slant-panel { width: 86vw; margin-left: 0; margin-right: 0; }
  .slant-panel h2 { font-size: clamp(3rem, 17vw, 5.4rem); }
  .candle-field { left: 55vw; bottom: 8vh; scale: 0.8; }
  .scrap-one, .scrap-two, .sheet-a, .sheet-b, .witness-board, .ignition-map { scale: 0.72; opacity: 0.7; }
  .scrap-one { right: -28px; top: 56vh; }
  .sheet-a { right: -44px; }
  .sheet-b { left: -46px; }
  .witness-board { right: -72px; }
  .constellation { left: 4vw; right: 4vw; }
}