:root {
    --void: #080A12;
    --stone: #8D929A;
    --vellum: #E9E0C8;
    --verdigris: #4FB7A5;
    --amber: #F2B84B;
    --wine: #3B1738;
    --navy: #12355B;
    --fraunces: "Fraunces", serif;
    --newsreader: "Newsreader", serif;
    --instrument: "Instrument Sans", "Inter", sans-serif;
    --space: "Space Grotesk", sans-serif;
    --coordinate: "Space Mono", monospace;
}

/* Space Mono only as a restrained accent for coordinates. */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: #080A12;
}

body {
    margin: 0;
    min-height: 100vh;
    color: #E9E0C8;
    background:
        radial-gradient(circle at 70% 12%, rgba(79, 183, 165, 0.22), transparent 30vw),
        radial-gradient(circle at 18% 78%, rgba(59, 23, 56, 0.72), transparent 44vw),
        linear-gradient(125deg, #080A12 0%, #12355B 48%, #080A12 100%);
    font-family: var(--newsreader);
    overflow-x: hidden;
}

.cosmos, .grain, .starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.cosmos { z-index: 0; overflow: hidden; }

.starfield {
    opacity: .72;
    background-image:
        radial-gradient(circle, rgba(233, 224, 200, .75) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(79, 183, 165, .65) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(242, 184, 75, .62) 0 1px, transparent 1.3px);
    background-size: 89px 89px, 137px 137px, 211px 211px;
    background-position: 12px 9px, 70px 30px, 21px 88px;
    mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 74%);
}

.grain {
    opacity: .18;
    background-image:
        repeating-radial-gradient(circle at 20% 30%, rgba(233, 224, 200, .2) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(100deg, rgba(233,224,200,.08) 0 1px, transparent 1px 9px);
    mix-blend-mode: screen;
}

.fixed-orrery {
    position: fixed;
    width: min(82vw, 850px);
    aspect-ratio: 1;
    left: -13vw;
    top: 50%;
    transform: translateY(-50%) rotate(var(--orbit-rotation, 0deg));
    transition: filter .7s ease;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(233, 224, 200, .26);
    border-radius: 50%;
    inset: 2%;
    box-shadow: inset 0 0 50px rgba(79, 183, 165, .04), 0 0 38px rgba(242, 184, 75, .06);
}

.orbit::before, .orbit::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0 7deg, rgba(242, 184, 75, .7) 7deg 8deg, transparent 8deg 15deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.orbit-two { inset: 15%; transform: rotate(23deg); border-color: rgba(79, 183, 165, .35); }
.orbit-three { inset: 29%; transform: rotate(-17deg); border-style: dashed; border-color: rgba(141,146,154,.45); }

.date-disk {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    color: #080A12;
    background:
        radial-gradient(circle at 58% 38%, rgba(233, 224, 200, .92), rgba(233, 224, 200, .68) 44%, rgba(79, 183, 165, .24) 62%, rgba(18, 53, 91, .18) 100%),
        conic-gradient(from 120deg, #E9E0C8, #F2B84B, #4FB7A5, #E9E0C8);
    box-shadow: 0 0 70px rgba(233, 224, 200, .21), inset -28px -36px 80px rgba(8, 10, 18, .35);
    transform: rotate(calc(var(--orbit-rotation, 0deg) * -1)) scale(var(--disk-scale, 1));
    transition: border-radius .9s ease, background .9s ease;
}

.date-disk::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(8, 10, 18, .32);
    border-radius: inherit;
    background: repeating-conic-gradient(from -7deg, rgba(8,10,18,.18) 0 .55deg, transparent .55deg 6deg);
}

.date-month, .date-year, .chapter-label, .orbital-nav, .scroll-cue, .kicker, .rewind {
    font-family: var(--instrument);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: clamp(.65rem, .9vw, .78rem);
    font-weight: 700;
}

.orbital-nav, .scroll-cue {
    font-family: var(--coordinate);
}

.date-day {
    position: relative;
    z-index: 1;
    margin: -.04em 0;
    font: 850 clamp(7rem, 18vw, 13.5rem)/.78 var(--fraunces);
    color: #080A12;
}

.date-month, .date-year { position: relative; z-index: 1; color: rgba(8,10,18,.78); }

.clock-hand {
    position: absolute;
    width: 42%;
    height: 2px;
    left: 50%;
    top: 50%;
    transform-origin: left center;
    transform: rotate(var(--hand-angle, -48deg));
    background: linear-gradient(90deg, #F2B84B, rgba(242, 184, 75, .1));
    box-shadow: 0 0 18px #F2B84B;
}

.eclipse-shadow {
    position: absolute;
    inset: 29%;
    border-radius: 50%;
    background: #080A12;
    opacity: var(--eclipse-opacity, .08);
    transform: translate(var(--eclipse-x, 45%), -8%);
    box-shadow: 0 0 50px rgba(8,10,18,.9);
    transition: opacity .6s ease;
}

.spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4FB7A5;
    box-shadow: 0 0 18px #4FB7A5, 0 0 34px rgba(79,183,165,.55);
    transform: scale(var(--spark-scale, 1));
}
.spark-a { left: 69%; top: 21%; }
.spark-b { left: 82%; top: 47%; }
.spark-c { left: 59%; top: 76%; }
.spark-d { left: 36%; top: 18%; }
.spark-e { left: 20%; top: 58%; }
.spark-f { left: 43%; top: 88%; }

.orbital-nav {
    position: fixed;
    z-index: 4;
    right: 2rem;
    top: 2rem;
    display: flex;
    gap: .65rem;
    color: #8D929A;
}
.orbital-nav a {
    color: inherit;
    text-decoration: none;
    padding: .7rem .82rem;
    border: 1px solid rgba(233,224,200,.18);
    border-radius: 999px;
    background: rgba(8,10,18,.38);
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.orbital-nav a.active, .orbital-nav a:hover { color: #F2B84B; border-color: rgba(242,184,75,.55); background: rgba(18,53,91,.52); }

.story { position: relative; z-index: 2; }
.act {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8rem clamp(1.5rem, 5vw, 5rem);
}

.hero { justify-content: flex-end; }
.hero-copy { width: min(660px, 58vw); margin-right: 4vw; }
.kicker { color: #4FB7A5; margin: 0 0 1.1rem; }
h1, h2 {
    font-family: var(--fraunces);
    font-weight: 760;
    line-height: .92;
    letter-spacing: -.055em;
    margin: 0;
}
h1 { font-size: clamp(4.6rem, 9.5vw, 10.8rem); max-width: 900px; }
h2 { font-size: clamp(3.3rem, 7vw, 8rem); color: #E9E0C8; }
p, blockquote {
    font-size: clamp(1.22rem, 2vw, 2rem);
    line-height: 1.42;
    color: rgba(233, 224, 200, .78);
}
blockquote {
    margin: 2rem 0 0;
    padding-left: 1.5rem;
    border-left: 2px solid #F2B84B;
    color: #E9E0C8;
    font-style: italic;
}
.chapter-label { color: #F2B84B; display: block; margin-bottom: 1.25rem; }
.scroll-cue { position: absolute; bottom: 2rem; right: 5rem; color: #8D929A; }

.act-panel {
    width: min(640px, 49vw);
    padding: clamp(1.4rem, 3vw, 3rem);
    background: linear-gradient(135deg, rgba(8,10,18,.72), rgba(18,53,91,.36));
    border: 1px solid rgba(233,224,200,.16);
    border-radius: 34px;
    box-shadow: 0 30px 110px rgba(0,0,0,.32);
    backdrop-filter: blur(12px);
}
.left-panel { margin-left: 44vw; }
.right-panel { margin-left: auto; margin-right: 7vw; }
.narrow { width: min(560px, 46vw); }
.closing-panel { margin: 0 auto; text-align: center; width: min(780px, 82vw); }

.strata, .transit-map, .isobars {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
.strata {
    right: -5vw;
    bottom: 11vh;
    width: 64vw;
    height: 32vh;
    transform: rotate(-7deg);
    opacity: .8;
}
.strata span { display:block; height:25%; border-radius: 999px; margin: .55rem 0; }
.strata span:nth-child(1) { background: rgba(242,184,75,.18); }
.strata span:nth-child(2) { background: rgba(79,183,165,.20); }
.strata span:nth-child(3) { background: rgba(59,23,56,.58); }
.strata span:nth-child(4) { background: rgba(233,224,200,.12); }

.transit-map {
    left: 30vw;
    top: 12vh;
    width: 58vw;
    height: 72vh;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 52%, rgba(242,184,75,.10) 53%, transparent 55%);
}
.route {
    position: absolute;
    inset: 10% 5%;
    border: 2px solid transparent;
    border-top-color: #4FB7A5;
    border-radius: 50%;
    transform: rotate(var(--route-rot));
    filter: drop-shadow(0 0 10px rgba(79,183,165,.55));
}
.route-one { --route-rot: 19deg; }
.route-two { --route-rot: 71deg; border-top-color: #F2B84B; }
.route-three { --route-rot: 132deg; border-top-color: #8D929A; }
.station { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #F2B84B; box-shadow: 0 0 22px #F2B84B; }
.s1 { left: 24%; top: 26%; } .s2 { left: 64%; top: 18%; } .s3 { left: 70%; top: 62%; } .s4 { left: 36%; top: 72%; }

.isobars { inset: 10vh 0 0 34vw; }
.iso { position: absolute; border: 1px solid rgba(233,224,200,.25); border-radius: 48% 52% 44% 56%; transform: rotate(-16deg); }
.iso-a { width: 42vw; height: 28vh; left: 3vw; top: 10vh; }
.iso-b { width: 56vw; height: 44vh; left: -2vw; top: 1vh; border-color: rgba(79,183,165,.34); }
.iso-c { width: 68vw; height: 60vh; left: -8vw; top: -7vh; border-color: rgba(242,184,75,.22); }

.rewind {
    border: 1px solid rgba(242,184,75,.65);
    color: #080A12;
    background: #F2B84B;
    border-radius: 999px;
    padding: 1rem 1.35rem;
    cursor: pointer;
    box-shadow: 0 0 35px rgba(242,184,75,.25);
}

body.mode-sundial .date-disk { border-radius: 48% 52% 50% 46%; }
body.mode-compass .fixed-orrery { filter: hue-rotate(8deg) contrast(1.1); }
body.mode-transit .date-disk { background: radial-gradient(circle at 42% 30%, #E9E0C8, rgba(79,183,165,.55) 44%, rgba(18,53,91,.78) 80%); }
body.mode-eclipse { background: radial-gradient(circle at 60% 50%, rgba(59,23,56,.75), transparent 38vw), linear-gradient(125deg, #080A12, #12355B 48%, #080A12); }

@media (max-width: 850px) {
    .fixed-orrery { width: 115vw; left: -58vw; opacity: .75; }
    .orbital-nav { right: 1rem; left: 1rem; top: 1rem; overflow-x: auto; }
    .hero { justify-content: flex-start; }
    .hero-copy, .act-panel, .narrow { width: 100%; margin: 0; }
    .act { padding: 7rem 1.1rem 4rem; }
    .left-panel, .right-panel { margin-left: 0; margin-right: 0; }
    h1 { font-size: clamp(3.4rem, 18vw, 6rem); }
    h2 { font-size: clamp(2.7rem, 15vw, 5rem); }
}