:root {
    /* DESIGN TYPOGRAPHY TOKENS: IBM Plex Sans Condensed** Condensed* labels Source Serif 4** 4* narrative passages Space Mono sparingly coordinates */
    --navy: #07111F;
    --glass: #B8F3FF;
    --acid: #B8FF3D;
    --parchment: #E8D8B0;
    --brass: #B8863B;
    --violet: #6F4CFF;
    --red: #A13B2D;
    --chalk: #F4F0E6;
    --serif: "Cormorant Garamond", serif;
    --body: "Source Serif 4", serif;
    --condensed: "IBM Plex Sans Condensed", sans-serif;
    --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--chalk);
    background: var(--navy);
    font-family: var(--body);
    overflow-x: hidden;
    cursor: crosshair;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 12%, rgba(184, 243, 255, .12), transparent 30%),
        radial-gradient(circle at 75% 75%, rgba(111, 76, 255, .16), transparent 34%),
        linear-gradient(115deg, rgba(7, 17, 31, .4), rgba(7, 17, 31, .88));
    pointer-events: none;
    z-index: 0;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .22;
    background-image:
        repeating-radial-gradient(circle at 13% 17%, rgba(244, 240, 230, .12) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(97deg, transparent 0 11px, rgba(184, 134, 59, .08) 12px 13px);
    mix-blend-mode: screen;
}

.inspection-lamp {
    position: fixed;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184, 243, 255, .18), rgba(184, 255, 61, .08) 34%, transparent 70%);
    border: 1px solid rgba(184, 243, 255, .16);
    pointer-events: none;
    z-index: 18;
    opacity: .75;
}

.field-ledger {
    position: fixed;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 86px;
    padding: 16px 10px;
    border-left: 1px solid rgba(184, 134, 59, .75);
    background: linear-gradient(90deg, rgba(232, 216, 176, .08), rgba(7, 17, 31, .1));
    z-index: 15;
    font-family: var(--condensed);
    letter-spacing: .08em;
}

.ledger-title {
    color: var(--brass);
    font-size: 10px;
    writing-mode: vertical-rl;
    position: absolute;
    left: -13px;
    top: 8px;
}

.ledger-link {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 5px;
    color: rgba(244, 240, 230, .55);
    text-decoration: none;
    margin: 10px 0;
    font-size: 11px;
    transition: color .35s, transform .35s;
}

.ledger-link span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(184, 243, 255, .28);
    border-radius: 50%;
    color: var(--glass);
    font-family: var(--mono);
    font-size: 9px;
}

.ledger-link em { font-style: normal; }

.ledger-link.active {
    color: var(--acid);
    transform: translateX(7px);
}

.ledger-link.active span {
    border-color: var(--acid);
    box-shadow: 0 0 18px rgba(184, 255, 61, .45);
}

.route-gauge {
    height: 110px;
    width: 2px;
    background: rgba(184, 243, 255, .18);
    margin: 16px auto 0;
}

.route-gauge i {
    display: block;
    width: 100%;
    height: 0%;
    background: var(--acid);
    box-shadow: 0 0 12px var(--acid);
}

.expedition-route {
    position: fixed;
    inset: 0 auto 0 9vw;
    width: 82vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
    opacity: .52;
}

.expedition-route path {
    fill: none;
    stroke: url(#none);
    stroke: var(--brass);
    stroke-width: .34;
    stroke-dasharray: 4 9;
    filter: drop-shadow(0 0 6px rgba(184, 134, 59, .5));
}

.station {
    min-height: 100vh;
    position: relative;
    display: grid;
    align-items: center;
    padding: 8vh 8vw 8vh 16vw;
    isolation: isolate;
    overflow: hidden;
}

.station::before {
    content: "";
    position: absolute;
    inset: 5vh 5vw;
    border: 1px solid rgba(184, 243, 255, .11);
    background-image:
        linear-gradient(rgba(184, 243, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 243, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: rotate(-1.4deg);
    pointer-events: none;
    z-index: -1;
}

.station-label, .sample-id {
    font-family: var(--mono);
    color: var(--acid);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.station-label {
    position: absolute;
    top: 9vh;
    right: 8vw;
    color: var(--brass);
}

h1, h2 {
    font-family: var(--serif);
    margin: 0;
    font-weight: 600;
    line-height: .9;
}

h1 {
    font-size: clamp(70px, 12vw, 170px);
    letter-spacing: -.055em;
    text-shadow: 2px 0 var(--violet), -2px 0 rgba(184, 243, 255, .7), 0 0 28px rgba(184, 243, 255, .18);
}

h2 { font-size: clamp(42px, 7vw, 96px); }

p { font-size: clamp(18px, 2vw, 25px); line-height: 1.45; }

.opening {
    background: radial-gradient(circle at 55% 45%, rgba(184, 243, 255, .1), transparent 32%), var(--navy);
}

.aurora-line {
    position: absolute;
    top: 17vh;
    left: 16vw;
    width: 62vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--glass), var(--acid), var(--violet), transparent);
    filter: blur(.2px) drop-shadow(0 0 18px var(--glass));
    animation: tremble 3.2s infinite linear;
}

@keyframes tremble {
    0%, 100% { transform: translateY(0) scaleX(.98); opacity: .75; }
    50% { transform: translateY(5px) scaleX(1.02); opacity: 1; }
}

.microscope-lens {
    position: absolute;
    width: min(58vw, 650px);
    aspect-ratio: 1;
    border-radius: 50%;
    right: 5vw;
    top: 16vh;
    background:
        radial-gradient(circle, rgba(244, 240, 230, .1), transparent 23%),
        radial-gradient(circle at 45% 40%, rgba(184, 243, 255, .18), rgba(7, 17, 31, .16) 42%, rgba(7, 17, 31, .72) 68%),
        conic-gradient(from 40deg, rgba(184, 243, 255, .1), rgba(111, 76, 255, .22), rgba(184, 255, 61, .08), rgba(184, 243, 255, .1));
    border: 1px solid rgba(184, 243, 255, .55);
    box-shadow: inset 0 0 70px rgba(184, 243, 255, .15), 0 0 80px rgba(111, 76, 255, .18);
    transition: transform 1.1s ease, filter 1.1s ease;
}

.microscope-lens.focused { transform: scale(1.08) rotate(7deg); filter: brightness(1.3); }

.microscope-lens::before, .microscope-lens::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px dashed rgba(244, 240, 230, .28);
}

.microscope-lens::after { inset: 30%; border-style: solid; opacity: .7; }

.constellation span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chalk);
    box-shadow: 0 0 16px var(--acid);
}

.constellation span:nth-child(1) { left: 32%; top: 30%; }
.constellation span:nth-child(2) { left: 55%; top: 35%; }
.constellation span:nth-child(3) { left: 43%; top: 58%; }
.constellation span:nth-child(4) { left: 68%; top: 62%; }
.constellation span:nth-child(5) { left: 26%; top: 66%; }

.hero-monograph { max-width: 980px; z-index: 3; }
.hero-monograph h2 { color: var(--parchment); font-size: clamp(32px, 5vw, 72px); margin-top: 10px; }

.field-action {
    margin-top: 32px;
    border: 1px solid var(--brass);
    color: var(--parchment);
    background: rgba(7, 17, 31, .62);
    padding: 14px 22px;
    font-family: var(--condensed);
    font-size: 15px;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: rotate(-1deg);
    box-shadow: 0 0 0 1px rgba(232, 216, 176, .1) inset;
}

.field-action:hover, .field-action.engaged { color: var(--navy); background: var(--acid); border-color: var(--acid); }
.field-action.small { font-size: 12px; padding: 11px 16px; }

.field-note, .margin-note {
    font-family: var(--body);
    background: rgba(232, 216, 176, .92);
    color: var(--navy);
    padding: 18px 22px;
    max-width: 360px;
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
    border-top: 4px solid var(--brass);
}

.tilted { position: absolute; right: 13vw; bottom: 12vh; transform: rotate(5deg); }
.wide { max-width: 560px; transform: rotate(-2deg); }

.contour-map, .botanical-silhouette {
    position: absolute;
    inset: auto 6vw 8vh auto;
    width: 330px;
    height: 230px;
    opacity: .34;
    background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 13px, rgba(184, 243, 255, .45) 14px 15px, transparent 16px 30px);
    transform: rotate(-18deg);
}

.split-observation {
    display: grid;
    grid-template-columns: minmax(280px, 520px) 1fr;
    gap: 7vw;
    align-items: center;
}

.split-observation article p:last-child, .well-note p:last-child, .summit-ledger p { color: rgba(244, 240, 230, .78); }

.prism-apparatus {
    min-height: 520px;
    display: grid;
    place-items: center;
    position: relative;
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.prism-apparatus.aligned { transform: rotate(8deg) scale(1.03); }

.prism-core {
    width: min(45vw, 530px);
    height: 360px;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: clamp(38px, 6vw, 86px);
    color: var(--chalk);
    clip-path: polygon(50% 0, 100% 88%, 0 88%);
    background: linear-gradient(135deg, rgba(184, 243, 255, .18), rgba(111, 76, 255, .55), rgba(184, 255, 61, .18));
    border: 1px solid rgba(184, 243, 255, .42);
    text-shadow: 5px 0 var(--red), -5px 0 var(--glass), 0 0 28px var(--violet);
}

.instrument-knob { position: absolute; bottom: 12px; right: 10%; }

.spectral-bands {
    position: absolute;
    right: -8vw;
    top: 22vh;
    width: 62vw;
    height: 40vh;
    transform: skewY(-12deg);
    opacity: .35;
}

.spectral-bands i { display: block; height: 18%; margin: 14px 0; filter: blur(2px); }
.spectral-bands i:nth-child(1) { background: var(--glass); }
.spectral-bands i:nth-child(2) { background: var(--acid); }
.spectral-bands i:nth-child(3) { background: var(--violet); }
.spectral-bands i:nth-child(4) { background: var(--red); }

.margin-note { position: absolute; left: 18vw; bottom: 9vh; transform: rotate(-7deg); }

.drawer {
    width: min(980px, 74vw);
    min-height: 520px;
    border: 2px solid var(--brass);
    background: linear-gradient(180deg, rgba(232, 216, 176, .18), rgba(7, 17, 31, .65));
    box-shadow: inset 0 0 80px rgba(184, 134, 59, .15), 0 28px 70px rgba(0,0,0,.35);
    padding: 72px 52px 46px;
    transform: translateY(80px);
    transition: transform .85s ease;
}

.drawer.open { transform: translateY(0); }
.drawer-handle { font-family: var(--condensed); color: var(--brass); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 34px; }
.specimen-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.specimen-card {
    min-height: 240px;
    background: rgba(244, 240, 230, .88);
    color: var(--navy);
    border: 1px solid var(--brass);
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    transform: rotate(var(--r));
}

.specimen-card::before {
    content: "";
    position: absolute;
    top: 20px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 5px rgba(161, 59, 45, .18);
}

.specimen-card b { font-family: var(--mono); color: var(--red); font-size: 14px; }
.specimen-card span { font-family: var(--serif); font-size: 32px; padding: 0 18px; }
.meteor { --r: -3deg; }
.vial { --r: 2deg; }
.moth { --r: -1deg; }

.specimen-station .field-action { position: absolute; right: 12vw; bottom: 18vh; }

.telescope-station {
    grid-template-columns: 1fr 440px;
    gap: 6vw;
}

.telescope-well {
    width: min(58vw, 670px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(7, 17, 31, 1) 0 22%, rgba(111, 76, 255, .18) 23% 34%, rgba(184, 243, 255, .1) 35% 48%, rgba(7, 17, 31, .95) 49%);
    border: 4px solid rgba(184, 134, 59, .65);
    box-shadow: inset 0 0 90px rgba(0,0,0,.8), 0 0 60px rgba(184, 243, 255, .12);
    transition: transform 1s ease;
}

.telescope-well.turned { transform: rotate(28deg); }
.well-rings { position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--glass); }
.deep-sky { font-family: var(--serif); font-size: 180px; color: var(--acid); opacity: .8; }

.well-note { max-width: 430px; }

.chalk-marsh {
    display: grid;
    gap: 36px;
    font-family: var(--serif);
    color: rgba(244, 240, 230, .82);
    font-size: clamp(34px, 6vw, 90px);
    transform: rotate(-4deg);
}

.chalk-marsh span { text-shadow: 0 0 18px rgba(244, 240, 230, .18); }
.parchment { position: absolute; right: 11vw; bottom: 12vh; transform: rotate(3deg); }
.botanical-silhouette { left: 20vw; right: auto; bottom: 8vh; background: linear-gradient(120deg, transparent 40%, rgba(184, 255, 61, .28) 41% 43%, transparent 44%), repeating-radial-gradient(ellipse, rgba(184, 243, 255, .24) 0 3px, transparent 4px 14px); }

.particle-gate {
    width: min(78vw, 980px);
    overflow: visible;
    filter: url(#glow);
}

.particle-gate circle { fill: rgba(111, 76, 255, .07); stroke: var(--violet); stroke-width: 2; }
.track { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.track-one { stroke: var(--acid); }
.track-two { stroke: var(--glass); }
.track-three { stroke: var(--violet); }
.particle-station.in-view .track, .particle-gate.bloom .track { animation: drawTrack 3s ease forwards; }
@keyframes drawTrack { to { stroke-dashoffset: 0; } }
.gate-note { position: absolute; right: 9vw; bottom: 12vh; max-width: 480px; }

.summit-station { grid-template-columns: 1fr 520px; gap: 4vw; }
.summit-constellation { position: relative; width: min(45vw, 600px); height: 570px; }
.summit-constellation::before { content: ""; position: absolute; inset: 80px; background: linear-gradient(32deg, transparent 18%, rgba(184,255,61,.6) 19% 20%, transparent 21% 43%, rgba(184,243,255,.55) 44% 45%, transparent 46% 64%, rgba(111,76,255,.55) 65% 66%, transparent 67%); }
.summit-constellation span {
    position: absolute;
    width: 74px;
    height: 34px;
    background: var(--parchment);
    color: var(--navy);
    border-left: 5px solid var(--brass);
    font-family: var(--mono);
    font-size: 11px;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
    transition: transform .75s ease;
}
.summit-constellation span::after { content: attr(data-tag); }
.summit-constellation span:nth-child(1) { left: 8%; top: 18%; transform: rotate(-8deg); }
.summit-constellation span:nth-child(2) { left: 58%; top: 12%; transform: rotate(6deg); }
.summit-constellation span:nth-child(3) { left: 30%; top: 43%; transform: rotate(-2deg); }
.summit-constellation span:nth-child(4) { left: 68%; top: 62%; transform: rotate(9deg); }
.summit-constellation span:nth-child(5) { left: 14%; top: 72%; transform: rotate(-5deg); }
.summit-constellation.sealed span { transform: translate(20px, -10px) rotate(0deg); }

.summit-ledger { position: relative; }
.review-stamp {
    position: absolute;
    right: 0;
    bottom: -110px;
    width: 160px;
    height: 160px;
    border: 8px double var(--red);
    border-radius: 50%;
    color: var(--red);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--condensed);
    font-size: 28px;
    line-height: .95;
    transform: rotate(-18deg) scale(2.4);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2,1.5,.3,1), opacity .3s;
}
.review-stamp.landed { transform: rotate(-18deg) scale(1); opacity: .82; }

@media (max-width: 850px) {
    .field-ledger { display: none; }
    .station { padding: 9vh 6vw; }
    .split-observation, .telescope-station, .summit-station { grid-template-columns: 1fr; }
    .specimen-chain { grid-template-columns: 1fr; }
    .drawer { width: 100%; padding: 54px 24px 28px; }
    .station-label { position: relative; top: auto; right: auto; margin-bottom: 28px; }
    .tilted, .parchment, .gate-note, .specimen-station .field-action { position: relative; right: auto; bottom: auto; margin-top: 24px; }
}