:root {
    /* Typography compass: mariner-scholar voice. IBM Plex Mono sparingly for chronometer readouts; Space Grotesk** for UI labels. */
    --ivory: #F3E7C8;
    --night: #071526;
    --wax: #8E2F28;
    --teal: #1D6F73;
    --abyss: #02070D;
    --silver: #C7D3DF;
    --brass: #B8873B;
    --title: 'Fraunces', serif;
    --log: 'Cormorant Garamond', serif;
    --ui: 'Space Grotesk', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --space-grotesk-marker: 'Grotesk**';
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--abyss);
    color: var(--ivory);
    font-family: var(--ui);
    overflow-x: hidden;
}

button, a { font: inherit; }

.sea-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .28;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(243, 231, 200, .08) 0 1px, transparent 1.5px),
        radial-gradient(circle at 80% 10%, rgba(199, 211, 223, .08) 0 1px, transparent 1.5px),
        linear-gradient(115deg, transparent 0 47%, rgba(184, 135, 59, .05) 48% 49%, transparent 50% 100%);
    background-size: 42px 42px, 57px 57px, 180px 180px;
    mix-blend-mode: screen;
}

.cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(184, 135, 59, .7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 30;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 7px rgba(184, 135, 59, .05), 0 0 18px rgba(184, 135, 59, .18);
}

.longitude-index {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    display: grid;
    gap: 9px;
    padding: 14px 12px;
    border: 1px solid rgba(184, 135, 59, .44);
    background: rgba(2, 7, 13, .66);
    backdrop-filter: blur(8px);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.index-title {
    color: var(--brass);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 5px 4px;
}

.longitude-index a {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    color: rgba(243, 231, 200, .62);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .04em;
    transition: color .3s ease, transform .3s ease;
}

.longitude-index a span { color: var(--silver); font-family: var(--mono); }
.longitude-index a.active, .longitude-index a:hover { color: var(--ivory); transform: translateX(-5px); }
.longitude-index a.active span { color: var(--brass); }

.voyage { background: var(--night); }

.act {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 28% 24%, rgba(184, 135, 59, .16), transparent 27%),
        radial-gradient(circle at 77% 72%, rgba(29, 111, 115, .22), transparent 35%),
        linear-gradient(145deg, var(--night), var(--abyss) 72%);
}

.act::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(199, 211, 223, .075) 43px 44px, transparent 45px 86px),
        linear-gradient(var(--angle), transparent 0 49.5%, rgba(184, 135, 59, .16) 50%, transparent 50.5% 100%);
    transform: rotate(var(--angle));
    opacity: .52;
    z-index: -2;
}

.act::after {
    content: var(--chapter);
    position: absolute;
    left: clamp(18px, 4vw, 58px);
    bottom: 4vh;
    font-family: var(--mono);
    color: rgba(199, 211, 223, .13);
    font-size: clamp(5rem, 17vw, 19rem);
    line-height: .7;
    z-index: -1;
}

.horizon-line {
    position: absolute;
    left: -8vw;
    right: -8vw;
    top: var(--horizon);
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(199, 211, 223, .28), var(--brass), rgba(199, 211, 223, .25), transparent);
    box-shadow: 0 0 20px rgba(184, 135, 59, .24);
    transform: rotate(calc(var(--angle) / 10));
}

.horizon-line.wave {
    height: 36px;
    background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(199, 211, 223, .25) 19px 20px, transparent 22px 36px);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.chart-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(199, 211, 223, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199, 211, 223, .055) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: rotate(-8deg) scale(1.15);
}

.hero-ring {
    position: absolute;
    width: min(75vw, 760px);
    height: min(75vw, 760px);
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%) rotate(-8deg);
    filter: drop-shadow(0 0 28px rgba(184, 135, 59, .22));
}

.ring-shadow { fill: none; stroke: rgba(199, 211, 223, .09); stroke-width: 28; }
.split-ring { fill: none; stroke: var(--brass); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 780 210; animation: searchRing 14s linear infinite; }
.split-ring.secondary { stroke: rgba(199, 211, 223, .45); stroke-width: 2; stroke-dasharray: 360 90; animation-duration: 20s; animation-direction: reverse; }
.sighting-arm { stroke: var(--brass); stroke-width: 3; stroke-linecap: round; transform-origin: 250px 250px; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.screw { fill: var(--brass); stroke: var(--abyss); stroke-width: 3; }

@keyframes searchRing { to { stroke-dashoffset: -990; } }

.moon {
    position: absolute;
    top: 7vh;
    right: 24vw;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--silver);
    box-shadow: 0 0 38px rgba(199, 211, 223, .45);
}
.moon::after { content: ""; position: absolute; inset: -2px -12px 2px 18px; border-radius: 50%; background: var(--night); }

.curved-wordmark {
    position: absolute;
    left: 50%;
    top: 13vh;
    width: 420px;
    height: 210px;
    transform: translateX(-50%);
    font-family: var(--title);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4.8rem);
    color: var(--ivory);
    text-shadow: 0 0 30px rgba(243, 231, 200, .22);
}
.curved-wordmark span { position: absolute; left: 50%; top: 50%; transform-origin: 0 190px; }
.curved-wordmark span:nth-child(1) { transform: rotate(-43deg) translateY(-190px); }
.curved-wordmark span:nth-child(2) { transform: rotate(-35deg) translateY(-190px); }
.curved-wordmark span:nth-child(3) { transform: rotate(-27deg) translateY(-190px); }
.curved-wordmark span:nth-child(4) { transform: rotate(-19deg) translateY(-190px); }
.curved-wordmark span:nth-child(5) { transform: rotate(-11deg) translateY(-190px); }
.curved-wordmark span:nth-child(6) { transform: rotate(-3deg) translateY(-190px); }
.curved-wordmark span:nth-child(7) { transform: rotate(5deg) translateY(-190px); }
.curved-wordmark span:nth-child(8) { transform: rotate(13deg) translateY(-190px); }
.curved-wordmark span:nth-child(9) { transform: rotate(21deg) translateY(-190px); }
.curved-wordmark span:nth-child(10) { transform: rotate(29deg) translateY(-190px); color: var(--brass); }
.curved-wordmark span:nth-child(11) { transform: rotate(37deg) translateY(-190px); }
.curved-wordmark span:nth-child(12) { transform: rotate(45deg) translateY(-190px); }
.curved-wordmark span:nth-child(13) { transform: rotate(53deg) translateY(-190px); }
.curved-wordmark span:nth-child(14) { transform: rotate(61deg) translateY(-190px); }
.curved-wordmark span:nth-child(15) { transform: rotate(69deg) translateY(-190px); }

.vellum-slip, .log-panel, .coordinate-slip {
    background: linear-gradient(135deg, rgba(243, 231, 200, .92), rgba(243, 231, 200, .76));
    color: var(--night);
    border: 1px solid rgba(184, 135, 59, .55);
    box-shadow: 0 22px 80px rgba(0,0,0,.35), inset 0 0 35px rgba(184, 135, 59, .1);
}

.hero-log {
    position: absolute;
    left: clamp(22px, 7vw, 100px);
    bottom: 10vh;
    width: min(560px, 86vw);
    padding: clamp(24px, 4vw, 46px);
    clip-path: polygon(0 7%, 92% 0, 100% 86%, 8% 100%);
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--wax);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1, h2 {
    font-family: var(--title);
    font-weight: 900;
    line-height: .92;
    margin: 0;
}
h1 { font-size: clamp(3rem, 8vw, 7.2rem); max-width: 820px; }
h2 { font-size: clamp(2.6rem, 6vw, 6.4rem); }
p { font-family: var(--log); font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; }
.log-copy { max-width: 42ch; }

.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.instrument-button {
    border: 1px solid var(--brass);
    background: var(--night);
    color: var(--ivory);
    padding: 13px 18px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(243, 231, 200, .12), 0 0 24px rgba(184, 135, 59, .18);
}
.instrument-button:hover { background: var(--brass); color: var(--abyss); }
.drag-instruction { font-family: var(--mono); color: var(--teal); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }

.chronometer-face {
    position: absolute;
    right: 11vw;
    bottom: 13vh;
    width: 190px;
    height: 190px;
    border: 3px solid var(--brass);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243,231,200,.88), rgba(184,135,59,.35) 56%, rgba(2,7,13,.78) 57%);
    box-shadow: 0 0 45px rgba(184, 135, 59, .22);
}
.chronometer-face::before { content: ""; position: absolute; inset: 15px; border: 1px dashed rgba(7, 21, 38, .5); border-radius: 50%; }
.chrono-label { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-family: var(--mono); color: var(--night); font-size: 12px; }
.hand { position: absolute; left: 50%; top: 50%; width: 2px; transform-origin: 50% 100%; background: var(--night); }
.hand.hour { height: 45px; transform: translate(-50%, -100%) rotate(35deg); }
.hand.minute { height: 65px; transform: translate(-50%, -100%) rotate(144deg); }
.hand.second { height: 75px; width: 1px; background: var(--wax); transform: translate(-50%, -100%) rotate(var(--second-rot, 245deg)); }
.chronometer-face.wound .second { transition: transform 1.1s cubic-bezier(.34,1.56,.64,1); }

.act-number {
    position: absolute;
    top: 8vh;
    left: 6vw;
    font-family: var(--title);
    font-size: clamp(5rem, 18vw, 18rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(184, 135, 59, .42);
}

.log-panel {
    position: absolute;
    width: min(530px, 82vw);
    padding: 34px;
    left: 10vw;
    top: 22vh;
    transform: rotate(-2deg);
    clip-path: polygon(4% 0, 100% 3%, 94% 100%, 0 92%);
}
.log-panel.right { left: auto; right: 8vw; top: 28vh; transform: rotate(2deg); }
.log-panel.small { left: auto; right: 9vw; top: 16vh; width: min(470px, 82vw); }
.mono-readout { font-family: var(--mono); color: var(--teal); font-size: 1rem; letter-spacing: .08em; }

.deck-instrument {
    position: absolute;
    right: 12vw;
    top: 20vh;
    width: min(38vw, 430px);
    aspect-ratio: 1;
    border: 2px solid rgba(184, 135, 59, .82);
    border-radius: 50%;
    background: repeating-conic-gradient(from 2deg, rgba(184,135,59,.22) 0 3deg, transparent 3deg 8deg), radial-gradient(circle, transparent 0 43%, rgba(29,111,115,.2) 44% 56%, transparent 57%);
    animation: instrumentTurn 24s linear infinite;
}
.gear-ring { position: absolute; inset: 11%; border: 1px dashed var(--silver); border-radius: 50%; }
.wound-spring { position: absolute; inset: 28%; border-radius: 50%; border: 16px double rgba(184,135,59,.58); transform: rotate(28deg); }
.tick-band { position: absolute; inset: -17%; border-radius: 50%; border: 1px solid rgba(199,211,223,.16); }
@keyframes instrumentTurn { to { transform: rotate(360deg); } }

.coordinate-slip {
    position: absolute;
    font-family: var(--mono);
    padding: 14px 20px;
    color: var(--night);
    letter-spacing: .06em;
    font-size: 12px;
}
.red-stamp { right: 17vw; bottom: 17vh; border-color: var(--wax); transform: rotate(6deg); }
.wax { left: 12vw; bottom: 12vh; border-color: var(--wax); transform: rotate(-5deg); }

.lunar-diagram { position: absolute; left: 2vw; top: 14vh; width: min(68vw, 920px); height: 70vh; }
.draw-path { fill: none; stroke: var(--brass); stroke-width: 3; stroke-dasharray: 1040; stroke-dashoffset: 1040; animation: drawPath 5.5s ease-in-out infinite alternate; }
.draw-path.delay { stroke: var(--teal); animation-delay: 1s; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.diagram-moon { fill: var(--silver); opacity: .9; }
.stars circle { fill: var(--ivory); }
.hairline { stroke: rgba(199, 211, 223, .48); stroke-width: 1; stroke-dasharray: 7 9; }

.split-stage { position: absolute; inset: 9vh 5vw; }
.half-ring { position: absolute; top: 8vh; width: min(38vw, 470px); aspect-ratio: 1; border: 5px solid var(--brass); border-radius: 50%; filter: drop-shadow(0 0 26px rgba(184,135,59,.26)); }
.half-ring.left { left: 10vw; clip-path: polygon(0 0, 58% 0, 44% 100%, 0 100%); animation: leftJaw 7s ease-in-out infinite alternate; }
.half-ring.right { right: 10vw; clip-path: polygon(42% 0, 100% 0, 100% 100%, 56% 100%); animation: rightJaw 7s ease-in-out infinite alternate; }
@keyframes leftJaw { to { transform: translateX(40px) rotate(-8deg); } }
@keyframes rightJaw { to { transform: translateX(-40px) rotate(8deg); } }
.aperture-note { position: absolute; left: 50%; top: 22vh; transform: translateX(-50%); width: min(560px, 82vw); text-align: center; color: var(--ivory); }
.aperture-note p { color: rgba(243, 231, 200, .82); }

.folded-chart { position: absolute; left: 5vw; top: 15vh; width: min(64vw, 840px); filter: drop-shadow(0 35px 60px rgba(0,0,0,.45)); }
.folded-chart svg { width: 100%; }
.chart-plane { fill: rgba(243, 231, 200, .86); stroke: var(--brass); stroke-width: 3; }
.rhumb { fill: none; stroke: var(--teal); stroke-width: 3; stroke-dasharray: 12 9; }
.rhumb.corrected { stroke: var(--wax); stroke-width: 4; stroke-dasharray: 700; animation: drawRoute 6s ease-in-out infinite alternate; }
@keyframes drawRoute { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.tide-marks path { fill: none; stroke: rgba(7, 21, 38, .32); stroke-width: 2; }
.map-pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--wax); box-shadow: 0 0 0 7px rgba(142,47,40,.16); }
.map-pin.one { left: 18%; top: 72%; } .map-pin.two { left: 58%; top: 45%; } .map-pin.three { left: 78%; top: 81%; }

.dawn-band { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(243,231,200,.46), rgba(184,135,59,.18) 28%, transparent 58%); opacity: .78; }
.horizon-line.dawn { height: 4px; box-shadow: 0 0 65px rgba(243,231,200,.65); }
.prime-gate { position: absolute; inset: 0; }
.rail { position: absolute; top: 10vh; bottom: 8vh; width: 6px; background: linear-gradient(var(--brass), var(--ivory), var(--brass)); box-shadow: 0 0 28px rgba(184,135,59,.55); transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.rail.left { left: calc(50% - 45px); } .rail.right { right: calc(50% - 45px); }
.landfall.open .rail.left { transform: translateX(-11vw); }
.landfall.open .rail.right { transform: translateX(11vw); }
.final-ring { position: absolute; left: 50%; top: 48%; width: min(48vw, 540px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid var(--brass); border-left-color: transparent; animation: finalAlign 8s linear infinite; }
@keyframes finalAlign { to { transform: translate(-50%, -50%) rotate(360deg); } }
.final-log { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); width: min(720px, 88vw); padding: 34px; text-align: center; clip-path: polygon(6% 0, 100% 7%, 94% 100%, 0 92%); }
.domain-final { font-family: var(--title); font-size: clamp(2.2rem, 6vw, 5.5rem); line-height: 1; color: var(--wax); margin: 16px 0; }

.act.revealed .log-panel, .act.revealed .vellum-slip { animation: paperWake .9s ease both; }
@keyframes paperWake { from { opacity: .35; transform: translateY(24px) rotate(-4deg); } }

@media (max-width: 850px) {
    .longitude-index { right: 8px; top: auto; bottom: 8px; transform: none; grid-template-columns: repeat(3, 1fr); max-width: calc(100vw - 16px); }
    .index-title { grid-column: 1 / -1; }
    .longitude-index a { font-size: 10px; grid-template-columns: 18px 1fr; }
    .cursor-ring { display: none; }
    .hero-log, .log-panel, .log-panel.right, .log-panel.small { left: 18px; right: auto; top: auto; bottom: 14vh; width: calc(100vw - 36px); padding: 24px; }
    .chronometer-face { right: 8vw; bottom: 43vh; width: 140px; height: 140px; }
    .deck-instrument, .lunar-diagram, .folded-chart { width: 92vw; left: 4vw; right: auto; top: 8vh; }
    .half-ring { width: 62vw; opacity: .55; }
    .aperture-note { top: 17vh; }
    .curved-wordmark { transform: translateX(-50%) scale(.68); top: 8vh; }
}