:root {
    --ink: #111018;
    --vellum: #EFE2C4;
    --teal: #1F6F78;
    --ember: #C44536;
    --gold: #C6A35B;
    --violet: #4C3A8F;
    --plum: #5B3148;
    --path-progress: 0;
    --lens-x: 50vw;
    --lens-y: 50vh;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 700vh;
    color: var(--vellum);
    background:
        radial-gradient(circle at 18% 14%, rgba(76, 58, 143, .28), transparent 34rem),
        radial-gradient(circle at 72% 62%, rgba(91, 49, 72, .35), transparent 28rem),
        linear-gradient(115deg, #111018 0%, #17121d 46%, #0d1114 100%);
    font-family: 'Newsreader', serif;
    overflow-x: hidden;
    cursor: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(87deg, rgba(239, 226, 196, .025) 0 1px, transparent 1px 17px),
        repeating-linear-gradient(2deg, rgba(198, 163, 91, .018) 0 1px, transparent 1px 23px);
    mix-blend-mode: screen;
    opacity: .7;
    z-index: 1;
}

.story-room {
    position: relative;
    min-height: 700vh;
    isolation: isolate;
}

.paper-field {
    position: fixed;
    inset: 6vh 5vw;
    border: 1px solid rgba(239, 226, 196, .16);
    background:
        radial-gradient(circle at 22% 78%, rgba(239, 226, 196, .12), transparent 13rem),
        radial-gradient(circle at 80% 22%, rgba(31, 111, 120, .1), transparent 16rem),
        linear-gradient(106deg, rgba(239, 226, 196, .045), rgba(239, 226, 196, .018));
    clip-path: polygon(1% 2%, 98% 0, 100% 93%, 96% 100%, 2% 98%, 0 8%);
    box-shadow: inset 0 0 80px rgba(17, 16, 24, .9), 0 0 70px rgba(0,0,0,.55);
    z-index: 0;
}

.constellation-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        radial-gradient(circle, rgba(239, 226, 196, .32) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(198, 163, 91, .22) 0 1px, transparent 1.4px);
    background-size: 127px 139px, 211px 193px;
    opacity: .24;
}

.story-graph {
    position: fixed;
    left: -10vw;
    top: -18vh;
    width: 120vw;
    height: 136vh;
    z-index: 3;
    overflow: visible;
    filter: drop-shadow(0 0 14px rgba(31,111,120,.28));
    transform: translate3d(0, calc(var(--path-progress) * -7vh), 0) rotate(-1.5deg);
}

.main-path, .ghost-line, .braid {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-path {
    stroke: url(#tealInk);
    stroke-width: 9;
    stroke-dasharray: 6200;
    stroke-dashoffset: calc(6200 - (6200 * var(--path-progress)));
    filter: url(#inkGlow);
}

.ghost-line {
    stroke: var(--plum);
    stroke-width: 4;
    stroke-dasharray: 18 18;
    opacity: calc(.08 + (var(--path-progress) * .5));
}

.braid-a { stroke: var(--ember); stroke-width: 5; stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - (1200 * var(--path-progress))); }
.braid-b { stroke: var(--violet); stroke-width: 5; stroke-dasharray: 1150; stroke-dashoffset: calc(1150 - (1150 * var(--path-progress))); }
.braid-c { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1030; stroke-dashoffset: calc(1030 - (1030 * var(--path-progress))); }

.node {
    transform-box: fill-box;
    transform-origin: center;
    stroke: rgba(239,226,196,.55);
    stroke-width: 4;
    filter: url(#inkGlow);
    opacity: calc(.25 + (var(--path-progress) * .75));
    animation: nodePulse 4.8s ease-in-out infinite;
}

.node.active { stroke-width: 8; filter: drop-shadow(0 0 20px currentColor); }
.node.ember { fill: url(#sealGlow); color: var(--ember); opacity: 1; }
.node.teal { fill: var(--teal); color: var(--teal); }
.node.violet { fill: var(--violet); color: var(--violet); }
.node.plum { fill: var(--plum); color: var(--plum); }
.node.gold { fill: var(--gold); color: var(--gold); }
.node.small { opacity: .7; }
.pin-head { fill: var(--gold); filter: drop-shadow(0 0 12px rgba(198,163,91,.8)); transform-origin: center; animation: pinDrop 2s cubic-bezier(.2,.9,.2,1) both; }
.chapter-moons path { fill: rgba(198,163,91,.34); stroke: rgba(239,226,196,.3); stroke-width: 2; }

.bookmark-rail {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: .55rem;
    padding: .7rem .45rem;
    background: linear-gradient(90deg, rgba(198,163,91,.22), rgba(17,16,24,.82));
    border-left: 2px solid var(--gold);
    box-shadow: -12px 0 30px rgba(0,0,0,.38);
    z-index: 20;
}

.bookmark-rail button {
    width: 2.25rem;
    height: 4.6rem;
    border: 1px solid rgba(198,163,91,.45);
    border-radius: 999px 999px .4rem .4rem;
    color: var(--gold);
    background: rgba(17,16,24,.72);
    font-family: 'Spline Sans Mono', monospace;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    writing-mode: vertical-rl;
    transition: transform .35s ease, background .35s ease, color .35s ease;
}

.bookmark-rail button.active, .bookmark-rail button:hover {
    transform: translateX(-.65rem);
    background: var(--gold);
    color: var(--ink);
}

.act {
    position: relative;
    min-height: 100vh;
    z-index: 5;
}

.opening {
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
}

.vellum-outline {
    position: absolute;
    width: min(76vw, 980px);
    height: min(70vh, 620px);
    border: 1px solid rgba(239,226,196,.22);
    clip-path: polygon(3% 0, 98% 3%, 95% 96%, 8% 100%, 0 12%);
    box-shadow: inset 0 0 90px rgba(239,226,196,.05), 0 0 60px rgba(198,163,91,.08);
}

.folio-stamp, .coord, .brass-ruler, .thread-label, .delta-mark, .folio-corner {
    font-family: 'Spline Sans Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.folio-stamp {
    position: absolute;
    top: 17vh;
    color: rgba(198,163,91,.7);
    font-size: .78rem;
}

h1, h2 {
    font-family: 'Cormorant Garamond', serif;
    margin: 0;
    font-weight: 600;
    line-height: .92;
}

h1 {
    font-size: clamp(4.5rem, 13vw, 14rem);
    letter-spacing: -.07em;
    color: var(--vellum);
    text-shadow: 0 0 32px rgba(239,226,196,.16), 0 0 80px rgba(76,58,143,.25);
}

h2 {
    font-size: clamp(3rem, 7vw, 7.5rem);
    color: var(--ink);
}

.subtitle {
    margin: 1rem 0 0;
    color: var(--gold);
    font-family: 'UnifrakturCook', cursive;
    font-size: clamp(1.4rem, 3vw, 3.3rem);
}

.first-note {
    position: absolute;
    bottom: 13vh;
    max-width: 30rem;
    color: rgba(239,226,196,.78);
    font-size: 1.2rem;
    line-height: 1.55;
}

.inciting-seal {
    position: absolute;
    left: 13vw;
    bottom: 16vh;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 46% 54% 43% 57%;
    background: radial-gradient(circle, var(--ember), var(--plum));
    box-shadow: 0 0 38px rgba(196,69,54,.66);
    animation: nodePulse 3s ease-in-out infinite;
}

.chamber { display: grid; align-items: center; }
.chamber-pin { padding-left: 10vw; }
.chamber-motive { justify-items: end; padding-right: 11vw; }
.chamber-braids { padding-left: 8vw; }
.chamber-false { justify-items: end; padding-right: 9vw; }
.chamber-lens { padding-left: 11vw; }
.chamber-index { place-items: center; }

.annotation, .index-panel {
    position: relative;
    width: min(42rem, 78vw);
    padding: clamp(1.4rem, 3vw, 3.1rem);
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 20%, rgba(198,163,91,.28), transparent 9rem),
        linear-gradient(140deg, rgba(239,226,196,.96), rgba(239,226,196,.82));
    box-shadow: 0 24px 70px rgba(0,0,0,.46), inset 0 0 35px rgba(91,49,72,.1);
    border: 1px solid rgba(198,163,91,.5);
    clip-path: polygon(0 4%, 97% 0, 100% 92%, 93% 100%, 3% 96%);
    transform: translateY(5rem) rotate(var(--tilt, -1.8deg));
    opacity: .18;
    transition: transform .9s cubic-bezier(.2,.85,.2,1), opacity .9s ease;
}

.annotation.in-view, .index-panel.in-view { opacity: 1; transform: translateY(0) rotate(var(--tilt, -1.8deg)); }
.annotation.right { --tilt: 1.6deg; }
.annotation.torn { clip-path: polygon(2% 0, 100% 5%, 97% 88%, 89% 100%, 0 94%, 4% 50%); }
.large-note { width: min(52rem, 84vw); }
.coord { color: var(--teal); font-size: .75rem; margin: 0 0 .85rem; }
.annotation p:not(.coord), .index-panel p:not(.coord) { font-size: clamp(1.15rem, 1.65vw, 1.55rem); line-height: 1.55; }
.illuminated { float: left; font-family: 'UnifrakturCook', cursive; color: var(--ember); font-size: 5rem; line-height: .72; padding-right: .5rem; }

.brass-ruler {
    position: absolute;
    left: 44vw;
    top: 42vh;
    width: 34rem;
    padding: .75rem 1rem;
    color: var(--ink);
    background: linear-gradient(90deg, var(--gold), rgba(198,163,91,.28));
    transform: rotate(-18deg);
    box-shadow: 0 12px 22px rgba(0,0,0,.35);
}

.delta-mark {
    position: absolute;
    left: 15vw;
    bottom: 20vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    color: var(--gold);
}

.delta-mark span { border: 1px solid rgba(198,163,91,.6); padding: .8rem; background: rgba(17,16,24,.72); }
.thread-label { position: absolute; color: var(--vellum); padding: .45rem .65rem; background: rgba(17,16,24,.75); border: 1px solid currentColor; font-size: .72rem; }
.label-a { right: 14vw; top: 24vh; color: var(--ember); transform: rotate(11deg); }
.label-b { right: 20vw; bottom: 28vh; color: var(--violet); transform: rotate(-8deg); }
.label-c { left: 40vw; bottom: 18vh; color: var(--gold); transform: rotate(3deg); }

.folio-corner {
    position: absolute;
    left: 18vw;
    bottom: 18vh;
    border: 1px solid var(--gold);
    color: var(--gold);
    background: rgba(17,16,24,.8);
    padding: 1rem 1.3rem;
    transition: transform .4s ease, background .4s ease;
}
.folio-corner:hover, .folio-corner.turned { transform: rotate(-5deg) translateY(-.6rem); background: rgba(198,163,91,.18); }
.false-card::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 5rem 5rem; border-color: transparent transparent rgba(91,49,72,.3) transparent; }

.glass-lens, .cursor-lens {
    position: fixed;
    width: 12rem;
    height: 12rem;
    border: 2px solid var(--gold);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239,226,196,.2), rgba(31,111,120,.08) 60%, transparent 70%);
    box-shadow: inset 0 0 28px rgba(239,226,196,.2), 0 0 34px rgba(31,111,120,.22);
    pointer-events: none;
    z-index: 15;
    mix-blend-mode: screen;
}

.cursor-lens { left: calc(var(--lens-x) - 6rem); top: calc(var(--lens-y) - 6rem); opacity: .7; transform: scale(.74); }
.glass-lens { position: absolute; right: 16vw; top: 28vh; display: grid; place-items: center; font-family: 'Spline Sans Mono', monospace; color: var(--gold); text-transform: uppercase; letter-spacing: .18em; animation: driftLens 6s ease-in-out infinite; }
.hidden-script { position: absolute; right: 12vw; top: 56vh; color: rgba(239,226,196,.16); font-family: 'Cormorant Garamond', serif; font-size: 3rem; transform: rotate(-8deg); transition: color .4s ease, text-shadow .4s ease; }
.lens-lit .hidden-script { color: var(--vellum); text-shadow: 0 0 24px rgba(198,163,91,.72); }

.index-panel { width: min(62rem, 86vw); text-align: center; --tilt: .5deg; }
.afterimages { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.afterimages button, .diegetic-cta {
    border: 1px solid var(--plum);
    background: rgba(91,49,72,.14);
    color: var(--plum);
    padding: .85rem 1rem;
    font-family: 'Spline Sans Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    transition: transform .35s ease, color .35s ease, background .35s ease;
}
.afterimages button:hover, .afterimages button.lit { color: var(--vellum); background: var(--plum); transform: translateY(-.45rem) rotate(-2deg); }
.diegetic-cta { position: absolute; bottom: 12vh; border-color: var(--gold); color: var(--gold); background: rgba(17,16,24,.76); }

@keyframes nodePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px currentColor); }
    50% { transform: scale(1.12); filter: drop-shadow(0 0 24px currentColor); }
}

@keyframes pinDrop {
    0% { transform: translateY(-150px); opacity: 0; }
    70% { transform: translateY(10px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes driftLens {
    0%, 100% { transform: translate(0,0) rotate(0); }
    50% { transform: translate(-1.4rem, 1rem) rotate(4deg); }
}

@media (max-width: 760px) {
    body { cursor: auto; }
    .cursor-lens { display: none; }
    .bookmark-rail { right: .25rem; transform: translateY(-50%) scale(.82); transform-origin: right center; }
    .story-graph { left: -46vw; width: 180vw; }
    .chamber { padding: 0 1.3rem; justify-items: start; }
    .annotation, .index-panel { width: calc(100vw - 4.5rem); }
    .brass-ruler, .delta-mark, .thread-label, .glass-lens, .hidden-script { display: none; }
    h1 { font-size: 20vw; }
}