:root {
  --candle-ivory: #F8F1DF;
  --pressed-clay: #D7CDBB;
  --aurora-mint: #66F2C2;
  --aurora-violet: #9A6CFF;
  --sunrise-coral: #FF7A8A;
  --deep-wick: #1C2430;
  --wax-gold: #FFC857;
  --aurora: linear-gradient(135deg, #66F2C2 0%, #9A6CFF 48%, #FF7A8A 100%);
  --flame-glow: radial-gradient(circle, #FFC857 0%, #FF7A8A 45%, transparent 70%);
  --soft-shadow: 18px 18px 38px rgba(215, 205, 187, 0.82), -16px -16px 34px rgba(255, 255, 255, 0.68);
  --inset-shadow: inset 10px 10px 24px rgba(215, 205, 187, 0.7), inset -10px -10px 24px rgba(255, 255, 255, 0.65);
  --font-required-inter-star: "Inter**";
  --font-required-mono-star: "Mono**";
  --font-required-snippets: "snippets";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-wick);
  background: var(--candle-ivory);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.wax-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.34;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(28,36,48,0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(154,108,255,0.09) 0 1px, transparent 1px);
  background-size: 18px 18px, 27px 27px;
  mix-blend-mode: multiply;
}

.aurora-field {
  position: fixed;
  inset: -20vh -12vw;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(102, 242, 194, 0.38), transparent 36%),
    radial-gradient(ellipse at 78% 18%, rgba(154, 108, 255, 0.28), transparent 38%),
    radial-gradient(ellipse at 66% 82%, rgba(255, 122, 138, 0.24), transparent 44%);
  filter: blur(22px);
  transform: translate3d(0, var(--drift-y, 0px), 0) rotate(var(--drift-r, -2deg));
}

.story-shell { position: relative; z-index: 1; }

.chapter {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 5vw, 72px);
  isolation: isolate;
}

.chapter-strike {
  display: grid;
  grid-template-columns: minmax(160px, 24vw) 1fr;
  align-items: stretch;
  overflow: hidden;
}

.edge-masthead {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(7rem, 18vw, 19rem);
  line-height: 0.78;
  letter-spacing: -0.035em;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translate3d(0, calc(var(--letter-shift, 0) * 1px), 0);
  color: transparent;
  -webkit-text-stroke: 2px rgba(28, 36, 48, 0.28);
  text-shadow: 8px 8px 18px rgba(215,205,187,0.86), -8px -8px 16px rgba(255,255,255,0.78);
  background: var(--aurora);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.96;
}

.edge-masthead .dotline { filter: drop-shadow(0 0 18px rgba(255, 200, 87, 0.34)); }

.strike-notes {
  width: min(520px, 46vw);
  margin: 7vh 0 0 5vw;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 42px;
  background: rgba(248, 241, 223, 0.76);
  box-shadow: var(--inset-shadow);
}

.route-label, .chapter-kicker, .mono {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.route-label, .chapter-kicker {
  margin: 0 0 18px;
  color: rgba(28, 36, 48, 0.62);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

h1 { font-size: clamp(4rem, 9vw, 10rem); margin-bottom: 20px; }
h2 { font-size: clamp(3.8rem, 8vw, 9rem); margin-bottom: 24px; }
h3 { font-size: clamp(1.6rem, 3vw, 2.7rem); margin-bottom: 12px; }
p { line-height: 1.65; font-size: clamp(1rem, 1.25vw, 1.18rem); }

.paper-slip, .editorial-panel, .margin-note, .command-chip, .afterlight-plate, .signal-prism {
  background: rgba(248, 241, 223, 0.82);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(16px);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.paper-slip:hover, .editorial-panel:hover, .margin-note:hover, .command-chip:hover, .afterlight-plate:hover {
  box-shadow: 12px 12px 28px rgba(215,205,187,0.72), -12px -12px 28px rgba(255,255,255,0.8);
}

.paper-slip {
  position: absolute;
  padding: 18px 22px;
  max-width: 260px;
  border-radius: 28px;
}

.slip-one { top: 14vh; right: 12vw; transform: rotate(7deg); }
.slip-two { bottom: 16vh; left: 29vw; transform: rotate(-6deg); }
.wick-mark { display: inline-block; width: 6px; height: 40px; border-radius: 9px; background: var(--deep-wick); margin-right: 12px; vertical-align: middle; }

.candle-stage {
  position: absolute;
  right: clamp(28px, 8vw, 150px);
  bottom: 7vh;
  width: min(360px, 42vw);
  height: 520px;
  transform: translate3d(0, calc(var(--candle-lag, 0) * 1px), 0);
}

.halo {
  position: absolute;
  width: 340px;
  height: 340px;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  background: var(--flame-glow);
  filter: blur(22px);
  opacity: 0.72;
  animation: pulseHalo 4.8s ease-in-out infinite;
}

.aurora-ribbon { position: absolute; inset: 0; overflow: visible; filter: blur(0.25px) drop-shadow(0 0 12px rgba(102,242,194,0.55)); animation: riseRibbon 7s ease-in-out infinite alternate; }
.ribbon { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 14; opacity: 0.78; stroke-dasharray: 790; stroke-dashoffset: 0; }
.ribbon-l { stroke: var(--aurora-mint); animation: drawRibbon 8s ease-in-out infinite alternate; }
.ribbon-r { stroke: var(--aurora-violet); animation: drawRibbon 9s ease-in-out infinite alternate-reverse; }
.ribbon-x { stroke: var(--sunrise-coral); stroke-width: 10; animation: drawRibbon 10s ease-in-out infinite alternate; }

.flame {
  position: absolute;
  width: 40px;
  height: 58px;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%) rotate(4deg);
  background: linear-gradient(180deg, #FFC857 0%, #FF7A8A 74%);
  border-radius: 58% 42% 55% 45% / 72% 68% 32% 28%;
  box-shadow: 0 0 32px rgba(255, 200, 87, 0.85);
  animation: flameLean 2.6s ease-in-out infinite alternate;
}

.flame span { position: absolute; inset: 16px 12px 7px; border-radius: inherit; background: #F8F1DF; opacity: 0.58; }
.wick { position: absolute; left: 50%; bottom: 98px; width: 5px; height: 34px; background: var(--deep-wick); border-radius: 8px; transform: translateX(-50%); }
.candle-body { position: absolute; left: 50%; bottom: 0; width: 110px; height: 118px; border-radius: 28px 28px 18px 18px; transform: translateX(-50%); background: linear-gradient(145deg, #fff9ea, #D7CDBB); box-shadow: var(--soft-shadow); overflow: hidden; }
.wax-top { height: 34px; border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(215,205,187,0.58)); box-shadow: var(--inset-shadow); }
.wax-drip { position: absolute; top: 27px; width: 16px; border-radius: 0 0 12px 12px; background: rgba(248,241,223,0.7); }
.drip-a { left: 25px; height: 50px; } .drip-b { right: 26px; height: 32px; }
.candle-base { position: absolute; left: 50%; bottom: -22px; width: 190px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: rgba(215,205,187,0.52); box-shadow: var(--inset-shadow); }

.chapter-glow { padding-top: 11vh; overflow: hidden; }
.glow-columns { display: grid; grid-template-columns: 1.25fr 0.45fr 0.7fr; gap: clamp(22px, 5vw, 70px); align-items: center; min-height: 72vh; }
.editorial-panel, .margin-note { border-radius: 48px; padding: clamp(24px, 4vw, 54px); position: relative; z-index: 1; }
.editorial-panel.wide { transform: translateY(6vh); }
.editorial-panel.narrow { transform: translateY(-8vh); }
.margin-note { align-self: start; margin-top: 5vh; border-radius: 36px; }
.ribbon-backdrop { position: absolute; width: 120vw; height: 38vh; left: -8vw; top: 32vh; background: var(--aurora); opacity: 0.42; filter: blur(28px); border-radius: 50%; transform: rotate(-9deg) translate3d(var(--medium-x, 0px), 0, 0); }

.chapter-relay { display: grid; grid-template-columns: 1fr minmax(310px, 42vw); gap: 5vw; align-items: center; overflow: hidden; }
.diagonal-rail { position: relative; height: 74vh; transform: rotate(-12deg); }
.command-chip { position: absolute; border-radius: 999px; padding: 22px 34px; color: var(--deep-wick); }
.chip-a { left: 4%; top: 12%; }
.chip-b { left: 31%; top: 43%; background: linear-gradient(145deg, rgba(102,242,194,0.28), rgba(248,241,223,0.82)); }
.chip-c { left: 58%; top: 71%; }
.signal-prism { position: absolute; width: 130px; height: 150px; clip-path: polygon(50% 0, 100% 80%, 12% 100%); background: var(--aurora); opacity: 0.75; }
.prism-a { left: 36%; top: 18%; transform: rotate(26deg); }
.prism-b { left: 14%; top: 62%; transform: rotate(-18deg); }
.relay-copy { padding: clamp(26px, 4vw, 58px); border-radius: 48px; box-shadow: var(--inset-shadow); background: rgba(248,241,223,0.66); }
.signal-arcs span { position: absolute; border: 2px solid rgba(154,108,255,0.26); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-16deg); }
.signal-arcs span:nth-child(1) { width: 420px; height: 420px; left: 9vw; top: 22vh; }
.signal-arcs span:nth-child(2) { width: 580px; height: 580px; left: 17vw; top: 14vh; }
.signal-arcs span:nth-child(3) { width: 760px; height: 760px; left: 24vw; top: 4vh; }

.chapter-afterlight { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,200,87,0.2), transparent 42%); }
.afterlight-plate { width: min(920px, 88vw); min-height: 62vh; border-radius: 64px; padding: clamp(34px, 7vw, 86px); text-align: center; box-shadow: var(--inset-shadow), 24px 24px 60px rgba(215,205,187,0.64), -22px -22px 52px rgba(255,255,255,0.72); }
.wax-seal { width: min(420px, 72vw); aspect-ratio: 1 / 0.42; margin: 42px auto 24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #FFC857 0%, #FF7A8A 66%, #D7CDBB 100%); box-shadow: inset 12px 12px 22px rgba(28,36,48,0.14), inset -10px -10px 22px rgba(255,255,255,0.32), 0 28px 50px rgba(255,122,138,0.22); }
.wax-seal span { font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(4.5rem, 13vw, 9rem); letter-spacing: -0.03em; color: rgba(28,36,48,0.56); text-shadow: 2px 2px 4px rgba(255,255,255,0.35); }
.closing-note { max-width: 560px; margin: 0 auto; }
.ember-line { position: absolute; bottom: 36px; display: flex; gap: 16px; align-items: center; color: rgba(28,36,48,0.55); }
.ember { width: 12px; height: 12px; border-radius: 50%; background: var(--sunrise-coral); box-shadow: 0 0 24px var(--wax-gold); animation: ember 2.8s ease-in-out infinite; }

@keyframes pulseHalo { 0%, 100% { transform: translateX(-50%) scale(0.94); opacity: 0.58; } 50% { transform: translateX(-50%) scale(1.06); opacity: 0.82; } }
@keyframes riseRibbon { from { transform: translateY(12px) scale(0.98); filter: blur(0.2px) drop-shadow(0 0 9px rgba(102,242,194,0.45)); } to { transform: translateY(-16px) scale(1.02); filter: blur(1px) drop-shadow(0 0 18px rgba(154,108,255,0.45)); } }
@keyframes drawRibbon { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -70; } }
@keyframes flameLean { from { transform: translateX(-50%) rotate(-6deg) scaleY(0.95); } to { transform: translateX(-50%) rotate(8deg) scaleY(1.04); } }
@keyframes ember { 0%, 100% { transform: scale(0.8); opacity: 0.45; } 50% { transform: scale(1.25); opacity: 1; } }

@media (max-width: 860px) {
  .chapter { padding: 26px; }
  .chapter-strike { grid-template-columns: 1fr; min-height: 118vh; }
  .edge-masthead { writing-mode: horizontal-tb; transform: none; font-size: clamp(6rem, 30vw, 10rem); }
  .strike-notes { width: auto; margin: 4vh 0 0; }
  .paper-slip { position: relative; inset: auto; margin: 18px 0; max-width: none; }
  .candle-stage { right: 50%; transform: translateX(50%); bottom: 3vh; width: 320px; }
  .glow-columns, .chapter-relay { grid-template-columns: 1fr; }
  .editorial-panel.wide, .editorial-panel.narrow { transform: none; }
  .diagonal-rail { height: 52vh; transform: rotate(-8deg) scale(0.84); transform-origin: left center; }
}