:root {
    --obsidian: #090B12;
    --slate: #1D2733;
    --blue: #7DA7D9;
    --parchment: #F1E4C8;
    --amber: #F0A84B;
    --moss: #5F8F63;
    --blood: #A9363E;
    --display: "Cormorant Garamond", serif;
    --body: "Spectral", serif;
    --mono: "Space Mono", monospace;
    --inter: "Inter", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 47% 12%, rgba(29,39,51,.86), #090B12 46%, #05060a 100%);
    color: var(--parchment);
    font-family: var(--body);
    overflow-x: hidden;
}

body.lantern-awake .trail-svg path { stroke-dashoffset: 0; filter: drop-shadow(0 0 12px rgba(240,168,75,.65)); }
body.lantern-awake .station-dot { opacity: 1; transform: scale(1); }
body.lantern-awake .conscience-compass { opacity: 1; transform: translateY(0); }

.weather { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.fog { position: absolute; width: 72vw; height: 32vh; border-radius: 50%; background: rgba(241,228,200,.055); filter: blur(28px); animation: drift 22s linear infinite; }
.fog-a { top: 14%; left: -18%; }
.fog-b { bottom: 12%; right: -20%; animation-duration: 29s; background: rgba(125,167,217,.045); }
.rain-field { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(115deg, transparent 0 46%, rgba(125,167,217,.24) 47% 49%, transparent 50%); background-size: 18px 46px; animation: rain 780ms linear infinite; transition: opacity .7s ease; }
.dawn-wash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 55% 100%, rgba(240,168,75,.34), transparent 38%), linear-gradient(to top, rgba(241,228,200,.28), transparent 58%); transition: opacity 1s ease; }
body.weather-rain .rain-field { opacity: .52; }
body.weather-dawn .dawn-wash { opacity: 1; }
body.weather-green .fog-b { background: rgba(95,143,99,.13); }
body.weather-red .fog-a { background: rgba(169,54,62,.15); }
body.weather-blue .fog-b { background: rgba(125,167,217,.15); }

.trail-map { position: fixed; left: clamp(18px, 5vw, 74px); top: 7vh; height: 86vh; width: 120px; z-index: 4; pointer-events: none; opacity: .9; }
.trail-svg { width: 100%; height: 100%; overflow: visible; }
.trail-svg path { fill: none; stroke: var(--amber); stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: .78; transition: stroke-dashoffset 2.2s cubic-bezier(.2,.8,.2,1); }
.station-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--parchment); box-shadow: 0 0 18px var(--amber); opacity: 0; transform: scale(.2); transition: .9s ease; }
.dot-1 { left: 50px; top: 3%; } .dot-2 { left: 60px; top: 28%; } .dot-3 { left: 34px; top: 52%; } .dot-4 { left: 46px; top: 68%; } .dot-5 { left: 63px; top: 81%; } .dot-6 { left: 75px; top: 97%; }

.conscience-compass { position: fixed; right: clamp(18px, 4vw, 64px); top: 32px; width: 190px; z-index: 8; opacity: .36; transform: translateY(-8px); transition: .8s ease; font-family: var(--mono); color: var(--blue); }
.compass-ring { position: relative; width: 150px; height: 150px; margin-left: auto; border: 1px solid rgba(125,167,217,.48); border-radius: 50%; background: radial-gradient(circle, rgba(241,228,200,.06), rgba(29,39,51,.52) 58%, rgba(9,11,18,.36)); box-shadow: inset 0 0 24px rgba(125,167,217,.12), 0 0 28px rgba(9,11,18,.9); }
.compass-ring:before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(241,228,200,.22); border-radius: 50%; }
.compass-label { position: absolute; font-size: 9px; letter-spacing: .12em; }
.north { top: 8px; left: 58px; } .east { right: 5px; top: 69px; } .south { bottom: 8px; left: 62px; } .west { left: 5px; top: 69px; }
.flame-needle { position: absolute; left: 72px; top: 27px; width: 7px; height: 52px; border-radius: 80% 20% 55% 45%; background: linear-gradient(var(--parchment), var(--amber), var(--blood)); transform-origin: 50% 48px; transform: rotate(-24deg); box-shadow: 0 0 18px var(--amber); transition: transform 1s cubic-bezier(.2,.8,.2,1), background .7s ease; }
.ember-core { position: absolute; left: 66px; top: 66px; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 25px var(--amber); }
.conscience-compass p { margin: 10px 0 0; font-size: 10px; text-align: right; letter-spacing: .08em; color: rgba(241,228,200,.72); }

.scene { position: relative; min-height: 100vh; padding: 16vh clamp(28px, 9vw, 150px) 12vh clamp(150px, 19vw, 270px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; z-index: 2; }
.scene:before { content: ""; position: absolute; inset: 4vh 4vw; border: 1px solid rgba(241,228,200,.08); border-radius: 44% 56% 48% 52% / 8% 13% 10% 15%; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(240,168,75,.08), transparent 18%), linear-gradient(135deg, rgba(29,39,51,.18), transparent 62%); z-index: -1; }
.chapter-mark, .kicker, .consequence-note { font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--blue); }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: .88; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
h1 { font-size: clamp(72px, 15vw, 190px); letter-spacing: -.055em; color: transparent; background: linear-gradient(180deg, var(--parchment), rgba(241,228,200,.42)); -webkit-background-clip: text; background-clip: text; }
h2 { font-size: clamp(54px, 10vw, 132px); max-width: 860px; color: var(--parchment); }
.narrative, .opening-riddle { max-width: 640px; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.42; color: rgba(241,228,200,.82); }
.opening-riddle { font-style: italic; color: rgba(241,228,200,.72); }
.ritual-prompt { width: fit-content; margin-top: 28px; border: 1px solid rgba(240,168,75,.72); color: var(--amber); background: rgba(9,11,18,.38); padding: 15px 24px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; box-shadow: 0 0 30px rgba(240,168,75,.14), inset 0 0 16px rgba(240,168,75,.06); transition: .35s ease; }
.ritual-prompt:hover { color: var(--obsidian); background: var(--amber); transform: translateY(-3px); }
.secondary { border-color: rgba(241,228,200,.6); color: var(--parchment); }

.hero { padding-left: clamp(40px, 12vw, 190px); background: radial-gradient(circle at 57% 56%, rgba(240,168,75,.18), transparent 13%), radial-gradient(circle at 28% 75%, rgba(95,143,99,.08), transparent 25%); }
.stone-title { position: relative; z-index: 3; }
.lantern { position: absolute; right: 22vw; top: 46vh; width: 90px; height: 130px; filter: drop-shadow(0 0 35px rgba(240,168,75,.5)); transform: translateY(0); animation: floatLantern 4s ease-in-out infinite; }
.lantern-halo { position: absolute; inset: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(240,168,75,.22), rgba(240,168,75,.05) 32%, transparent 62%); opacity: .8; }
.lantern-cage { position: absolute; left: 20px; top: 18px; width: 48px; height: 72px; border: 3px solid var(--parchment); border-radius: 28px 28px 16px 16px; box-shadow: inset 0 0 18px rgba(240,168,75,.22); }
.lantern-cage:before { content: ""; position: absolute; left: 13px; top: -23px; width: 18px; height: 28px; border: 2px solid var(--parchment); border-bottom: none; border-radius: 20px 20px 0 0; }
.lantern-flame { position: absolute; left: 39px; top: 50px; width: 16px; height: 30px; border-radius: 80% 20% 55% 45%; background: var(--amber); box-shadow: 0 0 28px var(--amber); animation: flicker .9s infinite alternate; }
.root { position: absolute; bottom: 0; height: 38vh; width: 36vw; border-top: 2px solid rgba(95,143,99,.32); border-radius: 50%; opacity: .55; }
.root-left { left: -8vw; transform: rotate(12deg); } .root-right { right: -8vw; transform: rotate(-16deg); }

.choice-stones, .burden-stalls { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; max-width: 850px; }
.choice-stones button { transform: rotate(var(--r, -2deg)); border: 1px solid rgba(241,228,200,.24); background: linear-gradient(145deg, rgba(29,39,51,.82), rgba(9,11,18,.9)); color: var(--parchment); padding: 24px 28px; min-width: 190px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; box-shadow: 0 18px 30px rgba(0,0,0,.28); transition: .35s ease; }
.choice-stones button:nth-child(2) { --r: 3deg; } .choice-stones button:nth-child(3) { --r: -5deg; }
.choice-stones button.chosen, .choice-stones button:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-8px) rotate(0deg); }
.chalk-constellation { position: absolute; right: 12vw; top: 26vh; width: 220px; height: 220px; opacity: .7; }
.chalk-constellation:before { content: ""; position: absolute; inset: 20px; background: linear-gradient(28deg, transparent 49%, rgba(241,228,200,.22) 50%, transparent 51%), linear-gradient(122deg, transparent 49%, rgba(125,167,217,.18) 50%, transparent 51%); }
.chalk-constellation span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--parchment); box-shadow: 0 0 12px var(--blue); }
.chalk-constellation span:nth-child(1){left:18px;top:44px}.chalk-constellation span:nth-child(2){left:122px;top:18px}.chalk-constellation span:nth-child(3){left:184px;top:100px}.chalk-constellation span:nth-child(4){left:70px;top:160px}.chalk-constellation span:nth-child(5){left:145px;top:190px}

.bridge-scene { background: linear-gradient(180deg, transparent, rgba(125,167,217,.06), transparent); }
.stepping-bridge { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); gap: 8px; max-width: 880px; margin: 40px 0 12px; perspective: 600px; }
.stepping-bridge span { display: grid; place-items: center; min-height: 84px; background: radial-gradient(circle at 50% 20%, rgba(241,228,200,.13), rgba(29,39,51,.95)); border: 1px solid rgba(125,167,217,.26); border-radius: 48% 52% 40% 60%; font-family: var(--mono); font-size: 11px; color: rgba(241,228,200,.78); transform: translateY(var(--y, 0)) rotate(var(--rot, 0)); transition: .4s ease; cursor: default; }
.stepping-bridge span:nth-child(odd){--y:18px;--rot:-4deg}.stepping-bridge span:nth-child(even){--y:-8px;--rot:5deg}.stepping-bridge span:hover{background:rgba(240,168,75,.2);color:var(--amber);transform:translateY(-12px)}

.grove { position: relative; height: 340px; max-width: 760px; margin-top: 30px; }
.tree { position: absolute; bottom: 0; width: 120px; height: 320px; border-left: 8px solid rgba(95,143,99,.5); filter: drop-shadow(0 0 18px rgba(95,143,99,.18)); }
.tree:before, .tree:after { content: ""; position: absolute; width: 130px; border-top: 4px solid rgba(241,228,200,.22); transform-origin: left; top: 95px; }
.tree:before { transform: rotate(-34deg); } .tree:after { transform: rotate(28deg); }
.tree-a { left: 3%; } .tree-b { left: 34%; height: 300px; transform: scale(1.12); } .tree-c { left: 68%; height: 280px; }
.tree i, .tree b, .tree em { position: absolute; display: block; width: 82px; height: 12px; background: var(--blood); top: 118px; left: 26px; transform: rotate(16deg); box-shadow: 0 6px 18px rgba(169,54,62,.25); }
.tree b { top: 172px; left: -18px; background: var(--amber); transform: rotate(-10deg); } .tree em { top: 224px; left: 34px; background: var(--blue); }
.oath-board { display: grid; gap: 9px; font: 12px var(--mono); color: rgba(241,228,200,.62); }

.mirror-lake { position: relative; width: min(760px, 78vw); height: 310px; margin-top: 36px; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(125,167,217,.25), rgba(9,11,18,.92) 62%); box-shadow: inset 0 -34px 70px rgba(0,0,0,.8), 0 0 38px rgba(125,167,217,.13); overflow: hidden; }
.moon-line { position: absolute; left: 12%; right: 12%; top: 46%; height: 2px; background: linear-gradient(90deg, transparent, var(--parchment), transparent); opacity: .45; animation: shimmer 3s infinite; }
.reflection-mask { position: absolute; width: 90px; height: 120px; border-radius: 50% 50% 42% 42%; border: 1px solid rgba(241,228,200,.22); top: 92px; background: rgba(29,39,51,.48); }
.mask-one { left: 32%; transform: rotate(-12deg); } .mask-two { right: 26%; transform: rotate(14deg); }
.ripple { position: absolute; border: 1px solid rgba(125,167,217,.28); border-radius: 50%; animation: ripple 4s ease-out infinite; }
.ripple-one { inset: 32% 24%; } .ripple-two { inset: 18% 12%; animation-delay: 1.4s; }

.burden-stalls article { position: relative; width: 240px; min-height: 210px; padding: 26px; background: linear-gradient(180deg, rgba(29,39,51,.88), rgba(9,11,18,.9)); border: 1px solid rgba(169,54,62,.34); box-shadow: 0 22px 50px rgba(0,0,0,.32); }
.burden-stalls span { font-family: var(--mono); color: var(--amber); }
.burden-stalls strong { display: block; margin: 30px 0 12px; font: 600 31px/1 var(--display); }
.burden-stalls small { font: 12px var(--mono); color: rgba(241,228,200,.58); }
.hand-shadows span { position: absolute; bottom: -40px; width: 90px; height: 240px; background: rgba(0,0,0,.3); filter: blur(8px); border-radius: 60px 60px 10px 10px; transform: rotate(-24deg); }
.hand-shadows span:nth-child(1){right:10vw}.hand-shadows span:nth-child(2){right:18vw;height:180px;transform:rotate(18deg)}.hand-shadows span:nth-child(3){left:7vw;height:210px;transform:rotate(28deg)}

.dawn-scene { background: linear-gradient(180deg, transparent 0%, rgba(240,168,75,.12) 62%, rgba(241,228,200,.2) 100%); }
.dawn-altar { max-width: 620px; margin-top: 36px; padding: 34px; border-top: 1px solid rgba(241,228,200,.38); border-bottom: 1px solid rgba(241,228,200,.25); }
.basin { display: block; width: 210px; height: 72px; border-radius: 0 0 50% 50%; background: radial-gradient(ellipse at 50% 0, var(--parchment), var(--amber) 42%, rgba(9,11,18,.4) 43%); box-shadow: 0 0 70px rgba(240,168,75,.32); }
.dawn-altar p { font: italic 26px var(--display); color: var(--obsidian); text-shadow: 0 1px 12px rgba(241,228,200,.45); }

@keyframes drift { from { transform: translateX(0); } to { transform: translateX(46vw); } }
@keyframes rain { from { background-position: 0 0; } to { background-position: 0 46px; } }
@keyframes floatLantern { 50% { transform: translateY(-14px); } }
@keyframes flicker { from { transform: scaleY(.86) rotate(-6deg); } to { transform: scaleY(1.12) rotate(4deg); } }
@keyframes shimmer { 50% { opacity: .88; transform: scaleX(.88); } }
@keyframes ripple { from { transform: scale(.7); opacity: .55; } to { transform: scale(1.25); opacity: 0; } }

@media (max-width: 820px) {
    .trail-map { left: 8px; width: 74px; opacity: .45; }
    .conscience-compass { position: fixed; right: 12px; top: 12px; transform: scale(.75); transform-origin: top right; }
    .scene { padding: 16vh 24px 11vh 86px; }
    .hero { padding-left: 28px; }
    .lantern { right: 8vw; opacity: .55; }
    .stepping-bridge { grid-template-columns: repeat(2, minmax(90px,1fr)); }
    .chalk-constellation { opacity: .25; right: -30px; }
}