:root {
    --ink: #1F2A31;
    --lamp: #D6A35F;
    --mist: #AAB8BF;
    --rose: #D9B8AE;
    --slate: #4E5B62;
    --paper: #E8ECE7;
    --moss: #8D9B86;
    --horizon-y: 58vh;
    --aperture-x: 50vw;
    --aperture-y: 44vh;
    --scroll-fog: 0;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    background:
        radial-gradient(circle at 50% 10%, rgba(232, 236, 231, 0.20), transparent 32rem),
        linear-gradient(180deg, #1F2A31 0%, #4E5B62 39%, #AAB8BF 72%, #E8ECE7 100%);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.weather-shell {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}

.sky-noise,
.fog-field,
.dew-layer,
.visibility-aperture,
.shared-horizon {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.sky-noise {
    z-index: 2;
    opacity: 0.19;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(232, 236, 231, .6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 48%, rgba(170, 184, 191, .42) 0 1px, transparent 1.4px),
        radial-gradient(circle at 41% 79%, rgba(217, 184, 174, .34) 0 1px, transparent 1.3px);
    background-size: 31px 37px, 47px 53px, 71px 67px;
}

.fog-field {
    z-index: 5;
    opacity: calc(.82 - (var(--scroll-fog) * .32));
    filter: blur(18px);
    will-change: transform, opacity;
}

.fog-field-one {
    background:
        linear-gradient(90deg, rgba(232,236,231,.02), rgba(232,236,231,.58), rgba(170,184,191,.17), rgba(232,236,231,.66), transparent),
        radial-gradient(ellipse at 20% 45%, rgba(232,236,231,.65), transparent 39%),
        radial-gradient(ellipse at 86% 36%, rgba(170,184,191,.54), transparent 43%);
    animation: fogSlide 38s linear infinite alternate;
}

.fog-field-two {
    opacity: calc(.64 - (var(--scroll-fog) * .18));
    background:
        radial-gradient(ellipse at 42% 62%, rgba(232,236,231,.76), transparent 46%),
        linear-gradient(115deg, transparent 0%, rgba(170,184,191,.38) 32%, rgba(232,236,231,.57) 51%, transparent 83%);
    animation: fogSlideReverse 53s linear infinite alternate;
}

.fog-field-three {
    z-index: 11;
    opacity: calc(.42 - (var(--scroll-fog) * .12));
    background: linear-gradient(180deg, transparent 3%, rgba(232,236,231,.36) 30%, rgba(170,184,191,.28) 50%, rgba(232,236,231,.48) 100%);
    filter: blur(30px);
    animation: fogBreathe 11s ease-in-out infinite;
}

.visibility-aperture {
    z-index: 12;
    backdrop-filter: blur(5px) saturate(.82);
    background: radial-gradient(circle at var(--aperture-x) var(--aperture-y), transparent 0 8rem, rgba(232,236,231,.12) 14rem, rgba(232,236,231,.35) 24rem, rgba(170,184,191,.18) 100%);
    mix-blend-mode: screen;
}

.dew-layer {
    z-index: 8;
    background-image:
        radial-gradient(circle, rgba(232,236,231,.72) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(217,184,174,.48) 0 1px, transparent 1.5px);
    background-size: 113px 149px, 167px 131px;
    transform: translateY(calc(var(--scroll-fog) * -35px));
    opacity: .38;
}

.shared-horizon {
    z-index: 4;
    height: 1px;
    top: var(--horizon-y);
    background: linear-gradient(90deg, transparent, rgba(232,236,231,.18), rgba(31,42,49,.34), rgba(232,236,231,.20), transparent);
    box-shadow: 0 -28px 70px rgba(31,42,49,.28), 0 24px 80px rgba(232,236,231,.18);
    transition: top .6s ease;
}

.site-header {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 34px;
    color: var(--paper);
    mix-blend-mode: screen;
}

.wordmark-wrap { position: relative; }

.lamp-halo {
    position: absolute;
    width: 96px;
    height: 96px;
    left: -28px;
    top: -35px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214,163,95,.95), rgba(214,163,95,.33) 36%, transparent 72%);
    filter: blur(9px);
    animation: lampSearch 6s ease-in-out infinite alternate;
}

.wordmark {
    position: relative;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 650;
    font-size: clamp(2rem, 5vw, 5.5rem);
    letter-spacing: -.08em;
    filter: blur(3.5px);
    text-shadow: 0 0 16px rgba(214,163,95,.42);
    transition: filter .8s ease, letter-spacing .8s ease;
}

body.has-entered .wordmark,
.wordmark:hover {
    filter: blur(.45px);
    letter-spacing: -.055em;
}

.weather-bearing,
.passage-nav,
.instrument-panel,
.weather-label,
.annotation,
.closing-mark,
.weather-log span {
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
}

.weather-bearing {
    display: grid;
    gap: 7px;
    text-align: right;
    color: rgba(232,236,231,.78);
}

.weather-bearing strong {
    font-size: 22px;
    color: var(--lamp);
    letter-spacing: .04em;
}

.passage-nav {
    position: fixed;
    z-index: 31;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 18px;
    color: rgba(232,236,231,.54);
}

.passage-nav a {
    position: relative;
    writing-mode: vertical-rl;
    transition: color .45s ease, transform .45s ease;
}

.passage-nav a.is-active {
    color: var(--lamp);
    transform: translateX(-7px);
}

.transect { position: relative; z-index: 10; }

.passage {
    position: relative;
    min-height: 108vh;
    overflow: hidden;
    padding: 18vh 9vw;
}

.passage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(31,42,49,.72), rgba(78,91,98,.36), rgba(232,236,231,.04));
}

.passage-window { min-height: 118vh; }
.passage-lane { background: linear-gradient(180deg, rgba(78,91,98,.22), rgba(31,42,49,.4)); }
.passage-marsh { background: linear-gradient(180deg, rgba(78,91,98,.18), rgba(141,155,134,.21), rgba(31,42,49,.49)); }
.passage-hill { background: linear-gradient(180deg, rgba(170,184,191,.08), rgba(78,91,98,.28), rgba(232,236,231,.19)); }
.passage-noon { background: linear-gradient(180deg, rgba(170,184,191,.36), rgba(232,236,231,.74)); color: var(--ink); }

.passage-copy {
    position: relative;
    max-width: 620px;
    opacity: .35;
    transform: translateY(35px) scale(.985);
    filter: blur(2.6px);
    transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}

.passage.is-visible .passage-copy {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.near-copy { margin-top: 28vh; margin-left: 5vw; }
.far-copy { margin-top: 18vh; margin-left: 43vw; }
.low-copy { margin-top: 43vh; margin-left: 13vw; }
.ridge-copy { margin-top: 25vh; margin-left: 36vw; }
.noon-copy { margin: 22vh auto 0; text-align: center; }

h1, h2 {
    margin: 0 0 24px;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 620;
    line-height: .9;
    letter-spacing: -.075em;
}

h1 { font-size: clamp(4.5rem, 13vw, 15rem); max-width: 1050px; }
h2 { font-size: clamp(3.8rem, 9.8vw, 11rem); }

.passage-copy p:not(.weather-label) {
    margin: 0;
    font-size: clamp(1.15rem, 1.55vw, 1.75rem);
    line-height: 1.55;
    color: rgba(232,236,231,.83);
}

.passage-noon .passage-copy p:not(.weather-label) { color: rgba(31,42,49,.72); }
.weather-label { color: var(--lamp); margin: 0 0 18px; }

.window-pane {
    position: absolute;
    left: 7vw;
    top: 13vh;
    width: 40vw;
    height: 64vh;
    border: 1px solid rgba(232,236,231,.13);
    background: linear-gradient(110deg, rgba(232,236,231,.07), rgba(170,184,191,.03));
    box-shadow: inset 0 0 80px rgba(232,236,231,.09);
    filter: blur(.2px);
}

.window-pane span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(232,236,231,.34), transparent);
    animation: streak 8s linear infinite;
}
.window-pane span:nth-child(1) { left: 18%; animation-delay: -1s; }
.window-pane span:nth-child(2) { left: 39%; animation-delay: -3s; }
.window-pane span:nth-child(3) { left: 63%; animation-delay: -5s; }
.window-pane span:nth-child(4) { left: 82%; animation-delay: -7s; }

.streetlamp {
    position: absolute;
    right: 20vw;
    top: 34vh;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow: 0 0 22px 9px rgba(214,163,95,.55), 0 0 120px 52px rgba(214,163,95,.22);
}

.annotation {
    position: absolute;
    left: 8vw;
    bottom: 17vh;
    color: rgba(232,236,231,.44);
}

.roofline {
    position: absolute;
    height: 21vh;
    bottom: 31vh;
    background: rgba(31,42,49,.33);
    filter: blur(4px);
    clip-path: polygon(0 100%, 0 45%, 12% 45%, 18% 25%, 25% 45%, 41% 45%, 49% 18%, 57% 45%, 100% 45%, 100% 100%);
}
.roofline-one { left: -5vw; width: 55vw; opacity: .45; }
.roofline-two { right: 2vw; width: 46vw; opacity: .25; transform: scaleY(.72); }

.puddle {
    position: absolute;
    bottom: 13vh;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(232,236,231,.36), rgba(170,184,191,.12) 48%, transparent 70%);
    filter: blur(2px);
}
.puddle-one { left: 21vw; width: 31vw; transform: rotate(-3deg); }
.puddle-two { right: 12vw; width: 19vw; transform: rotate(5deg); }

.weather-log {
    position: absolute;
    left: 12vw;
    top: 22vh;
    width: 260px;
    padding: 24px;
    color: rgba(31,42,49,.72);
    background: rgba(232,236,231,.56);
    border: 1px solid rgba(232,236,231,.24);
    backdrop-filter: blur(12px);
    transform: rotate(-2deg);
}
.weather-log p { margin: 10px 0 0; font-size: 1.05rem; line-height: 1.4; }

.reed-bed {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18vh;
    height: 42vh;
}
.reed-bed i {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: var(--reed-height, 32vh);
    left: var(--reed-left, 10%);
    background: linear-gradient(180deg, rgba(232,236,231,.05), rgba(31,42,49,.82));
    transform-origin: bottom center;
    animation: reedSway 5s ease-in-out infinite alternate;
}
.reed-bed i:nth-child(1) { --reed-left: 8%; --reed-height: 24vh; }
.reed-bed i:nth-child(2) { --reed-left: 14%; --reed-height: 38vh; animation-delay: -.9s; }
.reed-bed i:nth-child(3) { --reed-left: 23%; --reed-height: 29vh; animation-delay: -1.4s; }
.reed-bed i:nth-child(4) { --reed-left: 31%; --reed-height: 42vh; animation-delay: -.5s; }
.reed-bed i:nth-child(5) { --reed-left: 39%; --reed-height: 34vh; animation-delay: -2s; }
.reed-bed i:nth-child(6) { --reed-left: 48%; --reed-height: 47vh; animation-delay: -1.2s; }
.reed-bed i:nth-child(7) { --reed-left: 55%; --reed-height: 28vh; animation-delay: -2.7s; }
.reed-bed i:nth-child(8) { --reed-left: 62%; --reed-height: 41vh; animation-delay: -.2s; }
.reed-bed i:nth-child(9) { --reed-left: 70%; --reed-height: 36vh; animation-delay: -2.4s; }
.reed-bed i:nth-child(10) { --reed-left: 78%; --reed-height: 31vh; animation-delay: -.8s; }
.reed-bed i:nth-child(11) { --reed-left: 86%; --reed-height: 45vh; animation-delay: -1.8s; }
.reed-bed i:nth-child(12) { --reed-left: 93%; --reed-height: 26vh; animation-delay: -.6s; }

.dew-web {
    position: absolute;
    right: 13vw;
    top: 28vh;
    width: 230px;
    height: 160px;
    opacity: .56;
    background:
        linear-gradient(28deg, transparent 49.5%, rgba(232,236,231,.42) 50%, transparent 50.5%),
        linear-gradient(152deg, transparent 49.5%, rgba(232,236,231,.28) 50%, transparent 50.5%),
        radial-gradient(circle at 25% 55%, rgba(232,236,231,.85) 0 2px, transparent 2.5px),
        radial-gradient(circle at 58% 38%, rgba(217,184,174,.75) 0 1.5px, transparent 2px),
        radial-gradient(circle at 77% 62%, rgba(232,236,231,.7) 0 1.8px, transparent 2.4px);
    filter: blur(.3px);
}

.crow-smudge {
    position: absolute;
    width: 70px;
    height: 18px;
    background: rgba(31,42,49,.64);
    border-radius: 50%;
    filter: blur(6px);
}
.crow-one { top: 26vh; left: 22vw; transform: rotate(13deg); }
.crow-two { top: 18vh; right: 25vw; transform: rotate(-8deg) scale(.7); opacity: .58; }

.hill-form {
    position: absolute;
    left: -5vw;
    right: -5vw;
    bottom: 9vh;
    height: 56vh;
    background: radial-gradient(ellipse at 52% 100%, rgba(31,42,49,.48), rgba(78,91,98,.24) 52%, transparent 72%);
    filter: blur(9px);
}

.contour-map {
    position: absolute;
    inset: 10vh 7vw auto auto;
    width: 44vw;
    height: 48vh;
    opacity: .36;
}
.contour-map span {
    position: absolute;
    inset: var(--inset, 0);
    border: 1px solid rgba(232,236,231,.32);
    border-radius: 45% 55% 48% 52%;
    transform: rotate(var(--turn, 0deg));
}
.contour-map span:nth-child(2) { --inset: 42px; --turn: 8deg; }
.contour-map span:nth-child(3) { --inset: 88px; --turn: -6deg; }
.contour-map span:nth-child(4) { --inset: 132px; --turn: 12deg; }

.breath-ring {
    position: absolute;
    border: 1px solid rgba(232,236,231,.35);
    border-radius: 50%;
    filter: blur(2px);
    animation: breath 6.5s ease-out infinite;
}
.ring-one { width: 160px; height: 80px; left: 16vw; top: 29vh; }
.ring-two { width: 230px; height: 105px; right: 20vw; bottom: 30vh; animation-delay: -2.8s; }

.pale-disc {
    position: absolute;
    left: 50%;
    top: 18vh;
    width: 32vw;
    height: 32vw;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,236,231,.82), rgba(232,236,231,.24) 55%, transparent 72%);
    filter: blur(8px);
}

.closing-mark {
    position: absolute;
    left: 50%;
    bottom: 16vh;
    transform: translateX(-50%);
    color: rgba(31,42,49,.55);
    white-space: nowrap;
}

.instrument-panel {
    position: fixed;
    z-index: 32;
    left: 34px;
    right: 34px;
    bottom: 26px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    color: rgba(232,236,231,.62);
    mix-blend-mode: difference;
}

.progress-track {
    height: 1px;
    background: rgba(232,236,231,.18);
    overflow: hidden;
}
.progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--lamp), var(--rose), var(--paper));
}

@keyframes fogSlide { from { transform: translateX(-8vw) scale(1.05); } to { transform: translateX(7vw) scale(1.12); } }
@keyframes fogSlideReverse { from { transform: translateX(8vw) translateY(2vh); } to { transform: translateX(-9vw) translateY(-3vh); } }
@keyframes fogBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06) translateY(3vh); } }
@keyframes lampSearch { from { transform: translate(0, 0) scale(.82); opacity: .65; } to { transform: translate(58px, 21px) scale(1.18); opacity: .95; } }
@keyframes streak { from { transform: translateY(-105%); opacity: 0; } 25% { opacity: .7; } to { transform: translateY(105%); opacity: 0; } }
@keyframes reedSway { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes breath { 0% { transform: scale(.4); opacity: 0; } 18% { opacity: .55; } 100% { transform: scale(1.8) translateY(-22px); opacity: 0; } }

@media (max-width: 760px) {
    .site-header { padding: 20px; }
    .weather-bearing { display: none; }
    .passage-nav { right: 14px; gap: 12px; }
    .passage { padding: 18vh 8vw; }
    .near-copy, .far-copy, .low-copy, .ridge-copy, .noon-copy { margin-left: 0; margin-right: 8vw; }
    .weather-log { left: 8vw; top: 14vh; width: 210px; }
    .instrument-panel { left: 20px; right: 20px; grid-template-columns: 1fr; }
    .coordinates { display: none; }
}