/* Palawan, the long voyage. Most motion reads --p (0 to 1), set by voyage.js while a section scrubs. */

:root {
    /* Earth from the air: night and day, earth blue, green and brown, white, and gold */
    --night: #09121e;
    --deep: #12304a;
    --lagoon: #4a86b0;
    --limestone: #f5f2ea;
    --paper: #f8f5ee;
    --karst: #8c6e50;
    --forest: #2c4732;
    --green: #6f8f5a;
    --ember: #a0663c;
    --sun: #cfa54f;
    --ink: #0f1924;
    --foam: #e9eef0;
    --line: rgba(245, 242, 234, 0.16);
    --line-dark: rgba(15, 25, 36, 0.14);
    --muted: rgba(245, 242, 234, 0.72);
    --muted-dark: rgba(15, 25, 36, 0.68);

    /* Playfair Display Black for headings; Barlow Condensed for the small line above them;
       Figtree for reading */
    --display: 'Playfair Display', 'Didot', 'Bodoni 72', serif;
    --wide: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --text: 'Figtree', system-ui, sans-serif;
    --mono: 'Figtree', system-ui, sans-serif;

    --gutter: clamp(1rem, 4vw, 3.5rem);
    --max: 1520px;
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --vh: 100vh;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 0;
}
body {
    margin: 0;
    background: var(--night);
    color: var(--limestone);
    font: 400 1.0625rem/1.65 var(--text);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
img {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
}
button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}
:focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: 3px;
}
.skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 300;
    padding: 0.7rem 1rem;
    background: var(--sun);
    color: var(--ink);
}
.skip:focus {
    left: 1rem;
}
.wrap {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Type ---------- */

.kicker {
    margin: 0;
    font: 500 0.7rem/1.4 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sun);
}
.display {
    margin: 0;
    font: 700 clamp(2.6rem, 6.4vw, 6.4rem) / 0.98 var(--display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.display em,
.title em {
    font-style: italic;
    color: var(--sun);
}
.title {
    margin: 0;
    font: 700 clamp(2rem, 4vw, 3.6rem) / 1.04 var(--display);
    text-wrap: balance;
}
.lede {
    margin: 0;
    max-width: 38rem;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}
.prose {
    max-width: 36rem;
    color: var(--muted);
}
.prose p {
    margin: 0 0 1em;
    text-wrap: pretty;
}
.prose strong {
    color: var(--limestone);
    font-weight: 600;
}
.mono {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}
.act-no {
    display: block;
    font: 300 0.8rem/1 var(--wide);
    font-stretch: 140%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--sun);
}

/* Lines that rise into place */
[data-reveal] {
    opacity: 0;
    transform: translateY(1.4rem);
    transition:
        opacity 1.5s var(--ease),
        transform 1.7s var(--ease);
    transition-delay: calc(var(--d, 0) * 180ms);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Photographs that open from a thin slit */
.slit {
    position: relative;
    overflow: hidden;
    clip-path: inset(46% 0 46% 0);
    transition: clip-path 1.9s var(--ease);
}
.slit.is-in {
    clip-path: inset(0 0 0 0);
}
.slit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    transition: transform 2.8s var(--ease);
}
.slit.is-in img {
    transform: scale(1);
}

figure {
    margin: 0;
}
figcaption,
.credit {
    margin-top: 0.6rem;
    font: 400 0.68rem/1.5 var(--mono);
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Labelled placeholder plate for photos the owner will supply */
.plate {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    padding: 1.5rem;
    background: var(--deep);
    border: 1px dashed rgba(245, 242, 234, 0.28);
    color: var(--muted);
    text-align: center;
    font: 400 0.72rem/1.5 var(--mono);
    letter-spacing: 0.06em;
}
.plate b {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--sun);
    font-weight: 500;
}

/* ---------- Ribbon, header, rail ---------- */

.ribbon {
    position: relative;
    z-index: 60;
    padding: 0.5rem var(--gutter);
    background: var(--sun);
    color: var(--ink);
    font-size: 0.78rem;
    text-align: center;
}
.ribbon a {
    font-weight: 600;
}
.ribbon__close {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    width: 1.8rem;
    height: 1.8rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font: 400 1.25rem/1 var(--text);
    cursor: pointer;
}
.ribbon__close:hover,
.ribbon__close:focus-visible {
    background: rgba(15, 25, 36, 0.12);
}
.ribbon {
    padding-right: 2.8rem;
}

.header {
    position: fixed;
    inset: 0 0 auto;
    top: var(--ribbon, 0px);
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem var(--gutter);
    transition:
        background 0.5s,
        padding 0.5s,
        transform 0.5s var(--ease);
}
.header.is-scrolled {
    top: 0;
    padding-block: 0.65rem;
    background: rgba(9, 18, 30, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
}
.brand b {
    font: 700 1.5rem/1 var(--display);
}
.brand span {
    font: 400 0.62rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.where {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    text-align: center;
}
.where small {
    font: 400 0.58rem/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sun);
}
.where b {
    font: 500 0.98rem/1.1 var(--wide);
    font-stretch: 125%;
    letter-spacing: 0.04em;
}
.where span {
    font: 400 0.62rem/1 var(--mono);
    color: var(--muted);
}
.header__end {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: transparent;
    font: 500 0.72rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.3s,
        color 0.3s,
        border-color 0.3s;
}
.btn:hover {
    border-color: var(--limestone);
}
.btn--solid {
    background: var(--limestone);
    border-color: var(--limestone);
    color: var(--ink);
}
.btn--solid:hover {
    background: var(--sun);
    border-color: var(--sun);
}

/* ---------- Dialogs ---------- */

dialog {
    max-width: min(100% - 2rem, 46rem);
    max-height: min(100% - 2rem, 52rem);
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border: 1px solid var(--line);
    background: var(--night);
    color: var(--limestone);
}
dialog::backdrop {
    background: rgba(5, 10, 18, 0.72);
    backdrop-filter: blur(6px);
}
dialog[open] {
    animation: rise 0.6s var(--ease);
}
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}
.dialog__close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--line);
    background: none;
    font-size: 1.1rem;
}
.notice p {
    color: var(--muted);
}
.notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    margin-top: 1.6rem;
}

/* ---------- Flight (cloud descent) ---------- */

.flight {
    /* --g: how far the film grade has come in (0 in the clouds, 1 on the landed photo) */
    --g: clamp(0, (var(--p, 0) - 0.75) * 4, 1);
    position: relative;
    height: calc(var(--vh) * 3.4);
    background: var(--night);
}
.flight--short {
    height: calc(var(--vh) * 3);
}
.flight__stage {
    position: sticky;
    top: 0;
    height: var(--vh);
    overflow: hidden;
}
.flight__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.35 - 0.35 * var(--p, 0)));
    filter: blur(calc((1 - var(--p, 0)) * 6px)) brightness(calc(1 - 0.24 * var(--g)))
        contrast(calc(1 + 0.08 * var(--g))) saturate(calc(0.6 + 0.28 * var(--p, 0)))
        sepia(calc(0.1 * var(--g)));
}
.flight__mist {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(240, 244, 245, 0.9), transparent 70%),
        radial-gradient(ellipse 70% 60% at 75% 60%, rgba(225, 233, 236, 0.85), transparent 70%),
        rgba(214, 225, 229, 0.6);
    opacity: calc(1 - var(--p, 0) * 1.25);
}
.has-flight .flight[data-flight]:not(.is-plain) .flight__photo,
#flight {
    transform: none;
    /* The same film grade on the canvas and the photo beneath it, so the hand-over is seamless */
    filter: brightness(calc(1 - 0.24 * var(--g))) contrast(calc(1 + 0.08 * var(--g)))
        saturate(calc(1 - 0.12 * var(--g))) sepia(calc(0.1 * var(--g)));
}
.has-flight .flight[data-flight]:not(.is-plain) .flight__mist {
    display: none;
}
#flight {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;
}
#flight.is-on {
    display: block;
}
.flight__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 70% 55% at 50% 52%, rgba(9, 18, 30, 0.62), transparent 78%),
        linear-gradient(
            180deg,
            rgba(9, 18, 30, 0.45),
            transparent 30%,
            transparent 60%,
            rgba(9, 18, 30, 0.8)
        );
    opacity: clamp(0, (var(--p, 0) - 0.82) * 6, 1);
}
.flight__open,
.flight__land {
    position: absolute;
    z-index: 3;
    inset: auto var(--gutter) clamp(2.5rem, 9vh, 6rem);
    max-width: var(--max);
    margin-inline: auto;
}
.flight__open {
    inset: 50% var(--gutter) auto;
    transform: translateY(calc(-50% - var(--p, 0) * 30vh));
    text-align: center;
    color: var(--ink);
    opacity: clamp(0, 1 - var(--p, 0) * 4.5, 1);
}
.flight__open .act-no {
    color: #3a4a5c;
}
.flight__open .title {
    margin-top: 0.9rem;
    color: #13253a;
}
.flight__land {
    inset: 50% var(--gutter) auto;
    max-width: 52rem;
    text-align: center;
    opacity: clamp(0, (var(--p, 0) - 0.86) * 9, 1);
    transform: translateY(calc(-50% + (1 - var(--p, 0)) * 6rem));
}
.flight__land .display {
    font-size: clamp(3rem, 10vw, 9.5rem);
}
.flight__land .lede {
    max-width: 36rem;
    margin: 1.2rem auto 0;
    color: rgba(243, 239, 230, 0.94);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.flight__land .display {
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

/* A leg opens with a cloudless descent: the photo settles from high up, then the title holds */
.flight--leg {
    --g: 1;
}
.flight--leg .flight__photo {
    transform: scale(calc(1.28 - 0.28 * var(--p, 0)));
    /* A fixed grade only: an animated blur here re-paints a full-screen photo every frame */
    filter: brightness(0.76) contrast(1.08) saturate(0.88) sepia(0.1);
    will-change: transform;
}
.flight--leg .flight__shade {
    opacity: 1;
}
.flight--leg .flight__open {
    color: var(--limestone);
    opacity: clamp(0, 1 - var(--p, 0) * 3, 1);
}
.flight--leg .flight__open .act-no {
    color: var(--sun);
}
.flight--leg .flight__open .title {
    color: var(--limestone);
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}
.flight--leg .flight__land {
    opacity: clamp(0, (var(--p, 0) - 0.45) * 3.5, 1);
    transform: translateY(calc(-50% + clamp(0, 1 - (var(--p, 0) - 0.45) * 3.5, 1) * 3rem));
}
.flight--leg .flight__credit {
    opacity: 1;
}
.flight__credit {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    bottom: 1rem;
    margin: 0;
    opacity: clamp(0, (var(--p, 0) - 0.9) * 10, 1);
}

/* Hero: the title sits above the clouds, then the flight lands on the aerial */
.hero .flight__open .display {
    font-size: clamp(4.2rem, 17vw, 15rem);
    line-height: 0.85;
    color: #0e1c2b;
}
.hero .flight__open .lede {
    margin: 1.4rem auto 0;
    color: #263646;
}
.hero__cue {
    margin-top: 2.2rem;
    font: 400 0.66rem/1 var(--mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #3a4a5c;
}
.hero__cue::after {
    content: '';
    display: block;
    width: 1px;
    height: 3.2rem;
    margin: 0.9rem auto 0;
    background: currentColor;
    transform-origin: top;
    animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
    0% {
        transform: scaleY(0);
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ---------- Generic act opener and chapters ---------- */

.act {
    position: relative;
    padding: clamp(6rem, 16vh, 11rem) 0;
}
.act--paper {
    background: var(--paper);
    color: var(--ink);
}
.act--paper .lede,
.act--paper .prose,
.act--paper figcaption,
.act--paper .credit {
    color: var(--muted-dark);
}
.act--paper .prose strong {
    color: var(--ink);
}
.act--paper .kicker,
.act--paper .act-no {
    color: #7d5130;
}
.act--paper .display em,
.act--paper .title em {
    color: #7d5130;
}
.act__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem clamp(2rem, 5vw, 6rem);
    align-items: end;
}
.act__head .display {
    margin-top: 1.2rem;
}

/* Pinned scrub containers */
[data-pin] {
    position: relative;
}
.stage {
    position: sticky;
    top: 0;
    height: var(--vh);
    overflow: hidden;
}

/* ---------- Prologue: deep time ---------- */

.deep {
    height: calc(var(--vh) * 3.4);
    background: #060d17;
}
.deep__photo {
    position: absolute;
    inset: 0;
    clip-path: inset(calc(48% - var(--p, 0) * 60%) calc(30% - var(--p, 0) * 40%));
}
.deep__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.25 - var(--p, 0) * 0.25));
    filter: brightness(0.62);
}
.deep__clock {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    padding: var(--gutter);
}
.deep__years {
    display: block;
    font: 300 clamp(3.6rem, 13vw, 11rem) / 0.9 var(--wide);
    font-stretch: calc(60% + var(--p, 0) * 80%);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.deep__unit {
    display: block;
    margin-top: 0.8rem;
    font: 400 0.72rem/1 var(--mono);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--sun);
}
.deep__steps {
    position: absolute;
    z-index: 2;
    inset: auto var(--gutter) clamp(2rem, 8vh, 5rem);
    max-width: 34rem;
}
.deep__steps p {
    position: absolute;
    bottom: 0;
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.8s,
        transform 0.8s var(--ease);
}
.deep__steps p.is-on {
    opacity: 1;
    transform: none;
}
.deep__steps p.is-on:has(+ p.is-on) {
    opacity: 0;
    transform: translateY(-1rem);
}

/* ---------- Horizontal passages ---------- */

.passage {
    position: relative;
    height: calc(var(--vh) * 4);
}
.passage__track {
    display: flex;
    height: 100%;
    width: max-content;
    transform: translate3d(calc(var(--p, 0) * var(--dist, 0px) * -1), 0, 0);
    will-change: transform;
}
.panel {
    position: relative;
    flex: none;
    width: 100vw;
    height: 100%;
    overflow: hidden;
}
.panel__bg {
    position: absolute;
    inset: 0 -12vw;
    transform: translate3d(calc(var(--p, 0) * 10vw), 0, 0);
}
.panel__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.76) contrast(1.08) saturate(0.88) sepia(0.1);
}
.panel__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 55%, rgba(9, 18, 30, 0.66), transparent 78%),
        linear-gradient(
            180deg,
            rgba(9, 18, 30, 0.35),
            transparent 30%,
            transparent 65%,
            rgba(9, 18, 30, 0.6)
        );
}
.panel__copy {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(40rem, 100vw - 2 * var(--gutter));
    transform: translate(-50%, -50%);
    text-align: center;
}
.panel__copy .lede {
    margin: 1.2rem auto 0;
    color: rgba(243, 239, 230, 0.94);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.panel--word {
    display: grid;
    place-items: center;
    width: 70vw;
    background: var(--night);
}
.panel--word .display {
    font-size: clamp(3rem, 9vw, 8rem);
    text-align: center;
}
.passage__route {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 1.4rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    pointer-events: none;
}
.passage__route i {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--line);
}
.passage__route i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sun);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

/* ---------- Act I: the range (layered parallax) ---------- */

.range {
    height: calc(var(--vh) * 4);
    background: #0f1f2c;
}
.range__layer {
    position: absolute;
    inset: -10% -4%;
    will-change: transform;
}
.range__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.range__sky {
    transform: translate3d(0, calc(var(--p, 0) * -4vh), 0) scale(1.05);
}
.range__far {
    transform: translate3d(0, calc(var(--p, 0) * -12vh), 0) scale(calc(1.02 + var(--p, 0) * 0.08));
    -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 18%, #000 42%);
}
.range__mist {
    inset: 0;
    background:
        radial-gradient(ellipse 60% 22% at 20% 64%, rgba(232, 238, 240, 0.55), transparent 70%),
        radial-gradient(ellipse 55% 18% at 78% 70%, rgba(232, 238, 240, 0.45), transparent 70%),
        radial-gradient(ellipse 90% 28% at 50% 86%, rgba(232, 238, 240, 0.35), transparent 70%);
    filter: blur(8px);
    animation: drift 26s ease-in-out infinite alternate;
    transform: translate3d(0, calc(var(--p, 0) * -20vh), 0);
}
.range__mist--near {
    animation-duration: 19s;
    animation-direction: alternate-reverse;
    transform: translate3d(0, calc(var(--p, 0) * -34vh), 0);
    opacity: 0.8;
}
@keyframes drift {
    to {
        translate: 6vw 0;
    }
}
.range__near {
    inset: auto -4% -2%;
    height: 60%;
    transform: translate3d(0, calc(var(--p, 0) * -26vh + 12vh), 0);
}
.range__near svg {
    width: 100%;
    height: 100%;
}
.range__fg {
    inset: auto -4% -6%;
    height: 42%;
    transform: translate3d(0, calc(var(--p, 0) * -44vh + 22vh), 0);
}
.range__fg svg {
    width: 100%;
    height: 100%;
}
.range__alt {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: var(--gutter);
    transform: translateY(-50%);
    display: grid;
    gap: 0.4rem;
}
.range__alt b {
    font: 300 clamp(3rem, 9vw, 7.5rem) / 0.9 var(--wide);
    font-stretch: 70%;
    font-variant-numeric: tabular-nums;
}
.range__alt b small {
    font-size: 0.32em;
    font-stretch: 100%;
    margin-left: 0.3rem;
}
.range__peaks {
    position: absolute;
    z-index: 4;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    width: min(28rem, 44vw);
    margin: 0;
    padding: 0;
    list-style: none;
}
.range__peaks li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(245, 242, 234, 0.22);
    opacity: 0.18;
    transition: opacity 0.6s;
}
.range__peaks li.is-on {
    opacity: 1;
}
.range__peaks b {
    font: 700 clamp(1.2rem, 2vw, 1.7rem) / 1.1 var(--display);
}
.range__peaks span {
    font: 400 0.7rem/1.6 var(--mono);
    color: var(--sun);
}
.range__peaks small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* Spreads: editorial photo plus text */
.spread {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    align-items: end;
    margin-top: clamp(4rem, 10vh, 7rem);
}
.spread__img {
    grid-column: 1 / span 7;
}
.spread__img .slit {
    aspect-ratio: 4 / 3;
}
.spread__copy {
    grid-column: 9 / span 4;
    padding-bottom: 1rem;
}
.spread--flip .spread__img {
    grid-column: 6 / span 7;
    grid-row: 1;
}
.spread--flip .spread__copy {
    grid-column: 1 / span 4;
    grid-row: 1;
}
.spread__copy .title {
    margin: 0.8rem 0 1.2rem;
}
.spread__pair {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: inherit;
    align-items: end;
}
.spread__pair .slit:last-child {
    aspect-ratio: 3 / 4;
}
.wide {
    margin-top: clamp(4rem, 10vh, 7rem);
}
.wide .slit {
    height: min(78vh, 56vw);
}

/* ---------- Act II: the dive ---------- */

.dive {
    height: calc(var(--vh) * 6);
    background: #060d17;
}
.dive .stage {
    /* Open sea, not a pool: blue-green near the surface, darkening as the gauge goes down */
    background: linear-gradient(
        180deg,
        color-mix(in oklab, #2b6f86 calc((1 - var(--p, 0) * 1.4) * 100%), #050c15),
        color-mix(in oklab, #0d3346 calc((1 - var(--p, 0) * 1.2) * 100%), #02070d)
    );
}
/* Plankton: specks of life drifting up through the water (drawn in voyage.js) */
.plankton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.dive__gauge {
    position: absolute;
    z-index: 3;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.2rem;
}
.dive__scale {
    position: relative;
    width: 1px;
    height: 46vh;
    background: rgba(245, 242, 234, 0.25);
}
.dive__scale::after {
    content: '';
    position: absolute;
    left: -4px;
    top: calc(var(--p, 0) * 100%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sun);
}
.dive__depth b {
    display: block;
    font: 300 clamp(2.6rem, 7vw, 5.6rem) / 0.9 var(--wide);
    font-stretch: 70%;
    font-variant-numeric: tabular-nums;
}
.dive__depth span {
    font: 400 0.66rem/1 var(--mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sun);
}
.dive__stops {
    position: absolute;
    inset: 0;
}
.dive__stop {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2.4rem);
    align-items: end;
    width: min(64rem, 100% - 16rem - var(--gutter));
    opacity: 0;
    transform: translateY(calc(-50% + 8vh));
    transition:
        opacity 0.9s,
        transform 1.1s var(--ease);
    pointer-events: none;
}
.dive__stop.is-on {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
}
.dive__stop.is-on:has(~ .dive__stop.is-on) {
    opacity: 0;
    transform: translateY(calc(-50% - 8vh));
    pointer-events: none;
}
.dive__stop figure {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.dive__stop figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dive__stop .title {
    margin: 0.7rem 0 1rem;
}
.dive__stop .credit {
    position: absolute;
    left: 0;
    bottom: -1.6rem;
}

/* ---------- Act III: creatures (sideways) ---------- */

.beast {
    position: relative;
    flex: none;
    display: grid;
    grid-template-rows: 1fr auto;
    width: min(74vw, 64rem);
    height: 100%;
    padding: clamp(5rem, 13vh, 8rem) clamp(1rem, 2.5vw, 2.5rem) clamp(3.5rem, 9vh, 5rem);
}
.beast figure {
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.beast figure img,
.beast figure .plate {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12) translate3d(calc((var(--p, 0) - 0.5) * -5%), 0, 0);
}
.beast figure .plate {
    transform: none;
}
.beast__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1rem 2rem;
    padding-top: 1.2rem;
}
.beast__name {
    margin: 0;
    font: 700 clamp(1.8rem, 3.2vw, 2.9rem) / 1 var(--display);
}
.beast__latin {
    display: block;
    margin-top: 0.4rem;
    font: italic 400 0.76rem/1.4 var(--mono);
    color: var(--muted);
}
.beast__local {
    display: block;
    margin-top: 0.2rem;
    font: 500 0.8rem/1.4 var(--wide);
    font-stretch: 120%;
    letter-spacing: 0.06em;
    color: var(--sun);
}
.beast__meta p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
}
.status {
    display: inline-block;
    margin-bottom: 0.5rem;
    font: 500 0.62rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
}
.status::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.beast__credit {
    position: absolute;
    right: 0.6rem;
    bottom: 0.5rem;
    margin: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(9, 18, 30, 0.6);
    font-size: 0.58rem;
}
.panel--intro {
    display: grid;
    align-content: center;
    width: min(46vw, 40rem);
    padding: 0 var(--gutter);
}
.panel--intro .display {
    margin: 1.2rem 0 1.4rem;
}

/* ---------- Act IV: people and the script ---------- */

.people__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(3.5rem, 8vh, 6rem);
}
.peoples {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-dark);
}
.peoples li {
    padding: 1.4rem 1.4rem 1.6rem 0;
    border-bottom: 1px solid var(--line-dark);
}
.peoples b {
    display: block;
    font: 700 1.6rem/1.1 var(--display);
}
.peoples span {
    display: block;
    margin: 0.3rem 0 0.6rem;
    font: 400 0.66rem/1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7d5130;
}
.peoples p {
    margin: 0;
    color: var(--muted-dark);
    font-size: 0.95rem;
}
.script {
    margin-top: clamp(4rem, 10vh, 7rem);
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--ink);
    color: var(--limestone);
}
.act--paper .script .lede,
.act--paper .script figcaption,
.act--paper .script .credit {
    color: var(--muted);
}
.script__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 0.4rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.script__row li {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 0.9rem 0.3rem 0.7rem;
    border: 1px solid var(--line);
    opacity: 0;
    transform: translateY(0.8rem);
    transition:
        opacity 0.7s,
        transform 0.9s var(--ease),
        border-color 0.3s;
    transition-delay: calc(var(--i) * 45ms);
}
.script.is-in .script__row li {
    opacity: 1;
    transform: none;
}
.script__row li:hover {
    border-color: var(--sun);
}
.script__row b {
    font:
        400 2.2rem/1 'Noto Sans Tagbanwa',
        serif;
    color: var(--sun);
}
.script__row span {
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.08em;
}

/* ---------- Act V: the voyage ---------- */

.voyage-intro {
    padding: clamp(6rem, 16vh, 10rem) 0 clamp(4rem, 10vh, 6rem);
}
.voyage-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.voyage-intro__chart svg {
    width: 100%;
    height: auto;
    max-height: 82vh;
}
.legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: leg;
}
.legs li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
}
.legs b {
    display: block;
    font: 500 0.9rem/1.2 var(--wide);
    font-stretch: 120%;
}
.legs span {
    font-size: 0.86rem;
    color: var(--muted);
}

/* Chart drawing */
.chart-land {
    fill: var(--land-fill, #1d3a2b);
    stroke: var(--land-stroke, rgba(245, 242, 234, 0.22));
    stroke-width: var(--land-stroke-width, 0.6);
}
.chart-route {
    fill: none;
    stroke: var(--sun);
    stroke-width: 1.4;
    stroke-dasharray: 4 5;
}
.chart-port {
    fill: var(--sun);
}
.chart-label {
    fill: var(--muted);
    font: 400 13px var(--mono);
    letter-spacing: 0.04em;
}
.voyage-intro__chart .chart-route {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 4s var(--ease);
}
.voyage-intro__chart.is-in .chart-route {
    stroke-dashoffset: 0;
}

/* Sail: the chart pans from one port to the next */
.sail {
    height: calc(var(--vh) * 2.6);
    background: #0b1828;
}
/* The next town opens from a slit as the boat closes in */
.sail__peek {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    width: min(24vw, 21rem);
    aspect-ratio: 3 / 4;
    margin: 0;
    overflow: hidden;
    transform: translateY(-50%);
    clip-path: inset(calc((1 - var(--p, 0)) * 50%) 0 calc((1 - var(--p, 0)) * 50%) 0);
}
.sail__peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(1.25 - 0.25 * var(--p, 0)));
    filter: brightness(0.86) contrast(1.06) saturate(0.92) sepia(0.08);
}
.sail .stage {
    background: radial-gradient(ellipse at 50% 50%, #10263a, #08111c 70%);
}
.sail__map {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--cw) * var(--z) * 1px);
    height: calc(var(--ch) * var(--z) * 1px);
    transform: translate3d(
        calc((var(--ax) + (var(--bx) - var(--ax)) * var(--p, 0)) * var(--z) * -1px),
        calc((var(--ay) + (var(--by) - var(--ay)) * var(--p, 0)) * var(--z) * -1px),
        0
    );
}
.sail__map svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.sail__from {
    fill: color-mix(in oklab, #1d3a2b, var(--ember) calc((1 - var(--p, 0)) * 55%));
}
.sail__to {
    fill: color-mix(in oklab, #1d3a2b, var(--lagoon) calc(var(--p, 0) * 60%));
}
.sail__line {
    fill: none;
    stroke: var(--sun);
    stroke-width: calc(2px / var(--z));
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--p, 0));
}
.sail__boat {
    fill: var(--sun);
    stroke: var(--night);
    stroke-width: calc(2px / var(--z));
}
.sail__label {
    position: absolute;
    left: 50%;
    bottom: clamp(2rem, 8vh, 5rem);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}
.sail__label span {
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.sail__label b {
    font: 700 clamp(1.8rem, 4vw, 3rem) / 1 var(--display);
}
.sail__label em {
    max-width: 30rem;
    font: 700 clamp(1rem, 1.6vw, 1.2rem) / 1.4 var(--display);
    color: rgba(243, 239, 230, 0.86);
    opacity: clamp(0, (var(--p, 0) - 0.35) * 3, 1);
}
.sail__label small {
    font: 400 0.7rem/1 var(--mono);
    color: var(--sun);
}
.sail__boatmark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--sun);
    box-shadow: 0 0 0 6px rgba(207, 165, 79, 0.22);
}

/* Landfall: one town */
.landfall {
    position: relative;
    background: var(--night);
}
.landfall__hero {
    position: relative;
    height: calc(var(--vh) * 1.3);
    overflow: hidden;
}
.landfall__hero > img,
.landfall__hero > .plate {
    position: absolute;
    inset: -8% 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * 10%), 0);
    filter: brightness(0.76) contrast(1.08) saturate(0.88) sepia(0.1);
}
.landfall__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(9, 18, 30, 0.6), transparent 78%),
        linear-gradient(
            180deg,
            rgba(9, 18, 30, 0.5),
            transparent 26%,
            transparent 62%,
            rgba(9, 18, 30, 0.95)
        );
}
.landfall__head {
    position: absolute;
    z-index: 2;
    left: var(--gutter);
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
.landfall__no {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;
    font: 400 0.68rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sun);
}
.landfall__no span {
    color: rgba(245, 242, 234, 0.78);
}
.landfall__name {
    margin: 0.8rem 0 0;
    font: 300 clamp(3.4rem, 13vw, 12rem) / 0.86 var(--wide);
    font-stretch: calc(52% + var(--p, 0.5) * 90%);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.landfall--minor .landfall__name {
    font-size: clamp(2.8rem, 10vw, 9rem);
}
.landfall__essence {
    max-width: 40rem;
    margin: 1.2rem auto 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    font: 700 clamp(1.15rem, 2vw, 1.6rem) / 1.35 var(--display);
    color: rgba(245, 242, 234, 0.92);
    text-wrap: balance;
}
.landfall__credit {
    position: absolute;
    z-index: 2;
    right: var(--gutter);
    top: 5.5rem;
    margin: 0;
}
.landfall__body {
    padding: clamp(3rem, 8vh, 5rem) 0 clamp(4rem, 10vh, 7rem);
}
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}
.facts div {
    padding: 1rem 1rem 1rem 0;
    border-bottom: 1px solid var(--line);
}
.facts dt {
    font: 400 0.6rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.facts dd {
    margin: 0.5rem 0 0;
    font: 500 1.05rem/1.2 var(--wide);
    font-stretch: 110%;
}
.landfall__intro {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2rem clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.landfall__intro .prose {
    max-width: none;
}

/* Spots, compact towns: an editorial grid */
.spots {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.8rem);
}
.spot {
    grid-column: span 4;
}
.spots--2 .spot {
    grid-column: span 6;
}
.spots--4 .spot:nth-child(1),
.spots--5 .spot:nth-child(1) {
    grid-column: span 8;
    grid-row: span 2;
}
.spots--4 .spot:nth-child(1) .slit,
.spots--5 .spot:nth-child(1) .slit {
    aspect-ratio: auto;
    height: calc(100% - 7rem);
    min-height: 22rem;
}
.spots--5 .spot:nth-child(n + 4) {
    grid-column: span 6;
}
.spot .slit,
.spot .plate {
    aspect-ratio: 4 / 3;
}
.spot h4 {
    margin: 1rem 0 0.35rem;
    font: 700 1.45rem/1.15 var(--display);
}
.spot p:not(.credit) {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}
.spot .how {
    display: block;
    margin-top: 0.5rem;
    font: 400 0.66rem/1.5 var(--mono);
    color: var(--sun);
    letter-spacing: 0.04em;
}

/* Spots, major towns: a sideways reel */
.reel {
    height: calc(var(--vh) * 3);
}
.reel .stage {
    display: flex;
    align-items: center;
}
.reel__track {
    display: flex;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0 var(--gutter);
    width: max-content;
    height: min(76vh, 46rem);
    transform: translate3d(calc(var(--p, 0) * var(--dist, 0px) * -1), 0, 0);
    will-change: transform;
}
.reel__intro {
    flex: none;
    display: grid;
    align-content: end;
    width: min(26rem, 80vw);
    padding-bottom: 1rem;
}
.reel__intro .title {
    margin-top: 0.8rem;
}
.reel__card {
    position: relative;
    flex: none;
    display: grid;
    grid-template-rows: 1fr auto;
    width: min(54vw, 52rem);
}
.reel__card:nth-of-type(even) {
    width: min(38vw, 34rem);
}
.reel__card figure {
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.reel__card figure img,
.reel__card figure .plate {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reel__card figure img {
    transform: scale(1.15) translate3d(calc((var(--p, 0) - 0.5) * -7%), 0, 0);
}
.reel__card h4 {
    margin: 1rem 0 0.3rem;
    font: 700 clamp(1.4rem, 2.2vw, 2rem) / 1.1 var(--display);
}
.reel__card p {
    margin: 0;
    max-width: 34rem;
    color: var(--muted);
    font-size: 0.95rem;
}
.reel__card .credit {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    margin: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(9, 18, 30, 0.6);
    font-size: 0.58rem;
}
.reel__count {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.reel__count i {
    position: relative;
    flex: 1;
    height: 1px;
    background: var(--line);
}
.reel__count i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sun);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

/* ---------- Act VI: seasons ---------- */

.year {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: clamp(3rem, 8vh, 5rem);
    border-top: 1px solid var(--line-dark);
}
.month {
    position: relative;
    min-height: 15rem;
    padding: 0.9rem 0.6rem 1rem;
    border-right: 1px solid var(--line-dark);
}
.month:first-child {
    border-left: 1px solid var(--line-dark);
}
.month h4 {
    margin: 0 0 0.8rem;
    font: 500 0.7rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.month[data-season='dry'] {
    background: linear-gradient(180deg, rgba(207, 165, 79, 0.16), transparent 70%);
}
.month[data-season='wet'] {
    background: linear-gradient(180deg, rgba(74, 134, 176, 0.14), transparent 70%);
}
.month ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
}
.month li {
    font-size: 0.8rem;
    line-height: 1.35;
}
.month li small {
    display: block;
    font: 400 0.6rem/1.4 var(--mono);
    color: var(--muted-dark);
}
.season-key {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 1rem;
    font: 400 0.66rem/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dark);
}
.season-key span::before {
    content: '';
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.5rem;
    vertical-align: -0.1rem;
    background: rgba(207, 165, 79, 0.4);
}
.season-key span + span::before {
    background: rgba(74, 134, 176, 0.35);
}

/* ---------- Capitol tools ---------- */

.capitol {
    background: var(--paper);
    color: var(--ink);
}
.tools {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(3rem, 7vh, 4.5rem);
    background: var(--line-dark);
    border: 1px solid var(--line-dark);
}
.tool {
    grid-column: span 4;
    padding: clamp(1.3rem, 2.4vw, 2rem);
    background: var(--paper);
}
.tool--wide {
    grid-column: span 8;
}
.tool--half {
    grid-column: span 6;
}
.tool h3 {
    margin: 0 0 1rem;
    font: 700 1.5rem/1.1 var(--display);
}
.tool .kicker {
    color: #7d5130;
    margin-bottom: 0.6rem;
}
.tool p {
    color: var(--muted-dark);
    font-size: 0.95rem;
}
.tool select,
.tool input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line-dark);
    border-radius: 2px;
    background: #fff;
    color: var(--ink);
    font: 400 0.95rem var(--text);
}
.wx {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.wx div {
    padding-top: 0.8rem;
    border-top: 1px solid var(--line-dark);
}
.wx dt {
    font: 400 0.6rem/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-dark);
}
.wx dd {
    margin: 0.4rem 0 0;
    font: 400 clamp(1.4rem, 2.6vw, 2.2rem) / 1 var(--wide);
    font-stretch: 80%;
}
.wx-row {
    display: flex;
    gap: 0.8rem;
}
.wx-row select {
    flex: 1;
}
.open {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font: 700 1.6rem/1.1 var(--display);
}
.open::before {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--karst);
}
.open.is-open::before {
    background: #6f8f5a;
    box-shadow: 0 0 0 5px rgba(111, 143, 90, 0.18);
}
.list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow: auto;
}
.list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 0.92rem;
}
.list li small {
    display: block;
    color: var(--muted-dark);
    font-size: 0.8rem;
}
.list a {
    font: 400 0.76rem/1.5 var(--mono);
    white-space: nowrap;
}
.list .empty {
    color: var(--muted-dark);
}

/* Governor and news */
.governor {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.governor .plate,
.governor .slit {
    aspect-ratio: 4 / 5;
}
.news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(2.5rem, 6vh, 4rem);
}
.news article {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.news time {
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sun);
}
.news h3 {
    margin: 0.7rem 0 0.6rem;
    font: 700 1.35rem/1.2 var(--display);
}
.news h3 a {
    text-decoration: none;
}
.news h3 a:hover {
    text-decoration: underline;
}
.news p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

/* ---------- Footer ---------- */

.footer {
    background: #060d17;
    padding: clamp(4rem, 10vh, 6rem) 0 0;
    font-size: 0.92rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}
.footer h2 {
    margin: 0 0 1rem;
    font: 400 0.64rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sun);
}
.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    color: var(--muted);
}
.footer a {
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.footer__brand b {
    display: block;
    font: 700 2.4rem/1 var(--display);
}
.footer__brand p {
    color: var(--muted);
    max-width: 24rem;
}
.govph {
    margin-top: clamp(3rem, 7vh, 4rem);
    padding: 2rem 0;
    border-top: 1px solid var(--line);
    background: #040b0e;
}
.govph__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
.govph p {
    color: var(--muted);
    font-size: 0.85rem;
}
.concept-note {
    margin: 0;
    padding: 1.6rem 0 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
}
.credits {
    padding-bottom: 5rem;
}
.credits summary {
    cursor: pointer;
    font: 400 0.7rem/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sun);
    padding: 0.8rem 0;
}
.credits ol {
    columns: 3 18rem;
    column-gap: 2rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.74rem;
    color: var(--muted);
}
.credits li {
    break-inside: avoid;
    margin-bottom: 0.45rem;
}
.credits li b {
    color: var(--limestone);
    font-weight: 500;
}

.vivito-badge {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 120;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(9, 18, 30, 0.85);
    color: var(--limestone);
    font-size: 0.72rem;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .act__head,
    .voyage-intro__grid,
    .landfall__intro,
    .governor {
        grid-template-columns: minmax(0, 1fr);
    }
    .spread__img,
    .spread--flip .spread__img,
    .spread__copy,
    .spread--flip .spread__copy {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .tool,
    .tool--wide,
    .tool--half {
        grid-column: span 12;
    }
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .year {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .month {
        min-height: 10rem;
        border-bottom: 1px solid var(--line-dark);
    }
    .month:nth-child(7) {
        border-left: 1px solid var(--line-dark);
    }
    .range__peaks {
        top: auto;
        bottom: 2rem;
        transform: none;
        width: auto;
        left: var(--gutter);
    }
    .range__alt {
        top: 6.5rem;
        transform: none;
    }
    .dive__stop {
        left: var(--gutter);
        right: var(--gutter);
        width: auto;
        top: auto;
        bottom: 3rem;
        grid-template-columns: minmax(0, 1fr);
        transform: translateY(8vh);
    }
    .dive__stop.is-on {
        transform: none;
    }
    .dive__stop.is-on:has(~ .dive__stop.is-on) {
        transform: translateY(-8vh);
    }
    .dive__stop figure {
        aspect-ratio: 16 / 9;
        max-height: 34vh;
    }
    .dive__gauge {
        top: 6rem;
        transform: none;
    }
    .dive__scale {
        height: 16vh;
    }
    .beast {
        width: 86vw;
    }
    .beast__meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }
    .panel--intro {
        width: 86vw;
    }
    .reel__card,
    .reel__card:nth-of-type(even) {
        width: 78vw;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 1rem;
    }
    .header {
        grid-template-columns: auto 1fr auto;
        padding-block: 0.7rem;
    }
    .brand span {
        display: none;
    }
    .where small {
        display: none;
    }
    .spot,
    .spots--2 .spot,
    .spots--4 .spot:nth-child(1),
    .spots--5 .spot:nth-child(1),
    .spots--5 .spot:nth-child(n + 4) {
        grid-column: span 12;
        grid-row: auto;
    }
    .spots--4 .spot:nth-child(1) .slit,
    .spots--5 .spot:nth-child(1) .slit {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .legs {
        grid-template-columns: minmax(0, 1fr);
    }
    .year {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .month,
    .month:first-child,
    .month:nth-child(7) {
        min-height: 0;
        border-left: 0;
    }
    .month:nth-child(odd) {
        border-left: 1px solid var(--line-dark);
    }
    .wx {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer__grid,
    .govph__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .landfall__name {
        font-size: clamp(2.6rem, 14vw, 5rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .landfall--minor .landfall__name {
        font-size: clamp(2.4rem, 12vw, 4.4rem);
    }
    .landfall__credit {
        display: none;
    }
    .vivito-badge {
        right: 0.6rem;
        bottom: 0.6rem;
    }
    .range__peaks li {
        padding: 0.5rem 0;
    }
    .range__peaks small {
        display: none;
    }
    .deep__years {
        font-size: clamp(3rem, 18vw, 6rem);
    }
}

/* ---------- Reduced motion and previews: everything still, passages stacked ---------- */

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    .slit,
    .slit img,
    .script__row li {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .range__mist,
    .hero__cue::after {
        animation: none;
    }
}

/* Mountain scene: darken the mist photo so the type reads, and soften the ridge edges */
.range__sky img {
    filter: brightness(0.62) contrast(1.08) saturate(0.85);
}
.range__near {
    filter: blur(1.2px);
}
.range__near svg,
.range__fg svg {
    filter: drop-shadow(0 -6px 18px rgba(214, 226, 230, 0.35));
}
.range__shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            rgba(9, 18, 30, 0.7),
            transparent 38%,
            transparent 58%,
            rgba(9, 18, 30, 0.72)
        ),
        linear-gradient(180deg, rgba(9, 18, 30, 0.35), transparent 30%);
    pointer-events: none;
}
.deep__steps p {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.deep__clock {
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 760px) {
    .header__end .btn:not(.btn--solid) {
        display: none;
    }
    .header .btn {
        padding: 0.55rem 0.75rem;
    }
    .where b {
        font-size: 0.82rem;
    }
}

/* ---------- Type and legibility pass: Gloock numerals, bold sans labels, real shade on photos ---------- */

.act-no {
    font: 600 0.72rem/1.2 var(--text);
    font-stretch: normal;
    letter-spacing: 0.26em;
}
.kicker {
    font: 600 0.7rem/1.4 var(--text);
    letter-spacing: 0.2em;
}
.deep__photo img {
    filter: brightness(0.5) saturate(0.8) contrast(1.05);
}
.deep__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 48%, rgba(6, 12, 20, 0.62), transparent 75%),
        linear-gradient(
            180deg,
            rgba(6, 12, 20, 0.35),
            transparent 35%,
            transparent 55%,
            rgba(6, 12, 20, 0.9)
        );
}
.deep__years {
    font: 700 clamp(4.2rem, 14vw, 12rem) / 0.9 var(--display);
    font-stretch: normal;
    letter-spacing: -0.015em;
    color: var(--limestone);
}
.deep__unit {
    margin-top: 1.1rem;
    font: 700 0.78rem/1 var(--text);
    letter-spacing: 0.32em;
}
.deep__steps {
    max-width: 38rem;
}
.deep__steps p {
    font: 500 clamp(1.05rem, 1.5vw, 1.3rem) / 1.5 var(--text);
    color: #f3efe6;
}
.deep__steps strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.2em;
    color: var(--sun);
}
.range__alt b,
.dive__depth b {
    font-family: var(--display);
    font-weight: 400;
    font-stretch: normal;
}
.range__alt b small {
    font: 700 0.24em var(--text);
    letter-spacing: 0.1em;
}
.dive__depth span {
    font: 700 0.7rem/1 var(--text);
    letter-spacing: 0.26em;
}
.landfall__name {
    font-weight: 600;
    font-stretch: calc(60% + var(--p, 0.5) * 60%);
    letter-spacing: -0.01em;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
.landfall__no {
    font: 600 0.7rem/1.2 var(--text);
    letter-spacing: 0.16em;
}
.where b {
    font: 700 1rem/1.1 var(--display);
    font-stretch: normal;
    letter-spacing: 0;
}
.where small {
    font: 700 0.56rem/1 var(--text);
}
.legs b,
.facts dd {
    font-family: var(--text);
    font-weight: 700;
    font-stretch: normal;
}
.beast__local {
    font: 700 0.78rem/1.4 var(--text);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.wx dd {
    font-family: var(--display);
    font-weight: 400;
    font-stretch: normal;
}

@media (max-width: 760px) {
    .sail__peek {
        top: calc(var(--ribbon, 0px) + 5rem);
        width: 34vw;
        transform: none;
    }
}

/* ---------- Type, 1 Nov (owner): Playfair Display Black headings, Barlow Condensed labels, Figtree reading ---------- */

/* Headings carry power: black, high-contrast, with true bold italics for the gold words */
.display,
.title,
.landfall__name,
.deep__years,
.sail__label b,
.spot h4,
.reel__card h4,
.range__alt b,
.dive__depth b,
.wx dd,
.brand b,
.where b {
    font-family: var(--display);
    font-weight: 900;
    font-stretch: normal;
    letter-spacing: -0.01em;
}
.title,
.spot h4,
.reel__card h4,
.sail__label b {
    font-weight: 800;
}
.landfall__name {
    font-size: clamp(3.2rem, 11vw, 10rem);
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: none;
}
.landfall--minor .landfall__name {
    font-size: clamp(2.6rem, 8.5vw, 7.5rem);
}
.where b {
    font-weight: 600;
}
/* The small line above a heading: condensed capitals, semibold, widely spaced */
.act-no,
.kicker,
.landfall__no,
.sail__label span,
.where small,
.deep__unit,
.dive__depth span,
.beast__local,
.reel__count span,
.hero__cue {
    font-family: var(--wide);
    font-weight: 600;
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
    line-height: 1.15;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-stretch: normal;
}
.where small {
    font-size: 0.66rem;
}
body,
.lede,
.prose {
    font-family: var(--text);
}
.credit,
figcaption,
.mono,
.how,
.sail__label small {
    font-variant-numeric: tabular-nums;
}

/* ---------- Weather and touch: fog that drifts, photos that lean, names that arrive ---------- */

/* Two banks of low fog crossing the photo at different speeds; tiles repeat, so the loop is seamless */
.fog {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.fog i {
    position: absolute;
    left: -100%;
    width: 200%;
    height: 44%;
    background:
        radial-gradient(ellipse 16% 50% at 12% 50%, rgba(238, 243, 246, 0.2), transparent 70%),
        radial-gradient(ellipse 14% 42% at 31% 58%, rgba(238, 243, 246, 0.13), transparent 70%),
        radial-gradient(ellipse 12% 46% at 44% 42%, rgba(238, 243, 246, 0.16), transparent 70%);
    background-size: 50% 100%;
    background-repeat: repeat-x;
    filter: blur(18px);
    animation: drift 80s linear infinite;
}
.fog i:first-child {
    top: 14%;
}
.fog i:last-child {
    top: 56%;
    opacity: 0.75;
    animation-duration: 130s;
    animation-direction: reverse;
}
@keyframes drift {
    to {
        transform: translateX(50%);
    }
}

/* Photos lean toward the pointer and the words lean away, so each moment has depth */
.landfall__hero > img,
.flight--leg .flight__photo,
.panel__bg img,
.sail__peek img {
    translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px);
    scale: 1.04;
}
.landfall__head,
.flight--leg .flight__land,
.panel__copy {
    translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px);
}

/* A town's name arrives letter by letter */
.landfall__name[data-reveal] {
    opacity: 1;
    transform: none;
}
.landfall__name span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(8px);
    transition:
        opacity 1.2s ease,
        transform 1.7s var(--ease),
        filter 1.2s ease;
    transition-delay: calc(var(--i) * 70ms + 150ms);
}
.landfall__name.is-in span {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .fog i {
        animation: none;
    }
    .landfall__name span {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Over the bright clouds at the top, the header carries a soft fade of night so it stays legible */
.header:not(.is-scrolled) {
    background: linear-gradient(
        180deg,
        rgba(9, 18, 30, 0.62),
        rgba(9, 18, 30, 0.28) 70%,
        transparent
    );
}
.flight__land .kicker,
.flight__land .act-no {
    margin-bottom: 1.1rem;
}
.act--paper .script .kicker,
.act--paper .script .title em {
    color: var(--sun);
}

/* ---------- The prologue: scrolled, not played ---------- */

/* Night, then sunrise, then a white day that becomes the hero's clouds. The hero is pulled up
   under the prologue (negative margin) and holds still (data-lead) while the last lines are
   read over its clouds; when they are gone, the reader descends through them to the island. */
.prelude {
    /* White from the first screen: a sunlit page, dark type */
    --day: 1;
    position: relative;
    z-index: 40;
    height: calc(var(--vh) * 7);
    /* The hero starts at the same point, so its clouds are behind the prologue from the start */
    margin-bottom: calc(var(--vh) * -7);
}
.prelude__stage {
    position: sticky;
    top: 0;
    height: var(--vh);
    overflow: hidden;
}
/* Fireflies over the epilogue's dusk */
.fireflies {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.prelude__words {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--gutter);
}
.prelude__line {
    /* Sharp for most of its stretch: a short fade in and out at the ends, no blur */
    --in: clamp(0, min((var(--p, 0) - var(--a)) * 45, (var(--b) - var(--p, 0)) * 45), 1);
    position: relative;
    grid-area: 1 / 1;
    max-width: 38rem;
    margin: 0;
    font: 700 clamp(1.7rem, 3.6vw, 3rem) / 1.25 var(--display);
    text-align: center;
    text-wrap: balance;
    /* White at night, ink by day; a dark shadow at night, a soft white glow over the clouds */
    color: color-mix(in oklab, var(--limestone), var(--ink) calc(var(--day) * 100%));
    text-shadow:
        0 2px 24px rgba(0, 0, 0, calc((1 - var(--day)) * 0.5)),
        0 0 28px rgba(255, 255, 255, calc(var(--day) * 0.9));
    opacity: var(--in);
    transform: translateY(calc(((var(--a) + var(--b)) / 2 - var(--p, 0)) * 18vh));
}
/* The opening statement, set like a feature's front matter */
.prelude__line--intro {
    max-width: 50rem;
}
.prelude__line--intro p {
    margin: 0;
    font: 600 clamp(1.15rem, 1.9vw, 1.6rem) / 1.6 var(--display);
    color: rgba(15, 25, 36, 0.86);
}
.prelude__line--intro a {
    color: #7d5130;
}
.prelude__line--intro .prelude__by {
    margin-bottom: 1.6rem;
    font: 600 0.82rem/1 var(--wide);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7d5130;
}
.prelude__line--quote p {
    margin: 0;
    font-size: clamp(1.35rem, 2.7vw, 2.2rem);
    font-style: italic;
    line-height: 1.35;
}
.prelude__line--quote cite {
    display: block;
    margin-top: 1.6rem;
    font: 600 clamp(0.78rem, 1vw, 0.88rem) / 1.4 var(--wide);
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7d5130;
}
.prelude__cue {
    position: absolute;
    left: 50%;
    bottom: 0;
    margin: 0;
    transform: translateX(-50%);
    font: 600 0.8rem/1 var(--wide);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(15, 25, 36, 0.7);
    opacity: clamp(0, 1 - var(--p, 0) * 12, 1);
}
.prelude__cue::after {
    content: '';
    display: block;
    width: 1px;
    height: clamp(3rem, 12vh, 6rem);
    margin: 1.2rem auto 0;
    background: rgba(15, 25, 36, 0.4);
}
.prelude__skip {
    position: absolute;
    left: var(--gutter);
    bottom: clamp(1.2rem, 4vh, 2.4rem);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid currentColor;
    font: 600 0.78rem/1 var(--wide);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(
        in oklab,
        rgba(245, 242, 234, 0.75),
        rgba(15, 25, 36, 0.7) calc(var(--day) * 100%)
    );
    text-decoration: none;
    opacity: clamp(0, min((var(--p, 0) - 0.12) * 20, (0.94 - var(--p, 0)) * 20), 1);
}
.prelude__skip:hover,
.prelude__skip:focus-visible {
    color: var(--sun);
}

/* Without motion, the prologue is a short, still night page of the same lines */
@media (prefers-reduced-motion: reduce) {
    .prelude {
        height: auto;
        margin-bottom: 0;
    }
    .prelude__stage {
        position: relative;
        height: auto;
    }
    .prelude__words {
        background: #eef3f7;
    }
    .fireflies,
    .prelude__cue,
    .prelude__skip {
        display: none;
    }
    .prelude__words {
        position: relative;
        gap: 2.4rem;
        padding-block: 8rem;
    }
    .prelude__line,
    .prelude__line--intro {
        grid-area: auto;
        opacity: 1;
        transform: none;
    }
}

/* The hero: down through the clouds, and the name arrives when they open over the island */
.hero {
    height: calc(var(--vh) * 9.2);
}
.hero 
/* ---------- Film title cards (owner, 1 Nov): big titles bottom left over a vignetted photo ---------- */

/* Each photo moment reads like a still from a film: the image darkens into its edges and
   corners, deeper at the foot where the title sits. No bars. The prologue stays centred. */
.panel__shade,
.flight--leg .flight__shade,
.landfall__hero::after {
    background:
        radial-gradient(
            ellipse 85% 80% at 55% 42%,
            transparent 30%,
            rgba(6, 12, 20, 0.55) 72%,
            rgba(6, 12, 20, 0.92) 100%
        ),
        linear-gradient(180deg, transparent 50%, rgba(6, 12, 20, 0.85)),
        linear-gradient(90deg, rgba(6, 12, 20, 0.4), transparent 50%);
}
/* The title card: bottom left, large, the line above it and the sentence below */
.panel__copy,
.flight--leg .flight__land,
.landfall__head {
    left: calc(var(--gutter) * 1.4);
    right: auto;
    top: auto;
    bottom: clamp(4rem, 13vh, 8.5rem);
    width: min(62rem, 100% - var(--gutter) * 2.8);
    max-width: none;
    margin: 0;
    text-align: left;
}
.panel__copy,
.landfall__head {
    transform: none;
}
.flight--leg .flight__land {
    inset: auto auto clamp(4rem, 13vh, 8.5rem) calc(var(--gutter) * 1.4);
    transform: translateY(calc(clamp(0, 1 - (var(--p, 0) - 0.45) * 3.5, 1) * 3rem));
}
.panel__copy .title,
.flight--leg .flight__land .display {
    font-size: clamp(3rem, 7.6vw, 8.2rem);
    line-height: 0.95;
    text-shadow: 0 6px 50px rgba(0, 0, 0, 0.45);
}
.landfall__name {
    font-size: clamp(3.6rem, 12.5vw, 12.5rem);
    line-height: 0.88;
    text-shadow: 0 6px 50px rgba(0, 0, 0, 0.45);
}
.landfall--minor .landfall__name {
    font-size: clamp(3rem, 10vw, 9.5rem);
}
.panel__copy .lede,
.flight--leg .flight__land .lede,
.landfall__essence {
    max-width: 34rem;
    margin: 1.4rem 0 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    text-align: left;
}
.landfall__no {
    justify-content: flex-start;
}
/* The credit sits quietly under the title card's sentence */
.panel__copy .credit {
    margin: 1.2rem 0 0;
    opacity: 0.75;
}
.flight--leg .flight__credit {
    bottom: 1rem;
}

@media (max-width: 760px) {
    .panel__copy,
    .flight--leg .flight__land,
    .landfall__head {
        left: var(--gutter);
        width: calc(100% - var(--gutter) * 2);
        bottom: clamp(3.4rem, 10vh, 5rem);
    }
    .flight--leg .flight__land {
        inset: auto auto clamp(3.4rem, 10vh, 5rem) var(--gutter);
    }
    .landfall__name,
    .landfall--minor .landfall__name {
        white-space: normal;
    }
}
/* A landfall's opening shot is exactly one screen, so its title card sits inside the frame */
.landfall__hero {
    height: var(--vh);
}

/* Pigafetta's line, given room */
.prelude__line--quote {
    max-width: 54rem;
}
.prelude__line--quote p {
    font-size: clamp(1.9rem, 3.9vw, 3.5rem);
    line-height: 1.25;
}
.prelude__line--quote cite {
    margin-top: 2rem;
    font-size: clamp(0.92rem, 1.25vw, 1.1rem);
}

/* ---------- The hero, landed: centred, the name, its line, and the facts ---------- */

/* It simply fades in once the descent has landed (data-step), with no movement */
.hero .flight__land {
    inset: 50% var(--gutter) auto;
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-46%);
    opacity: 0;
    transition: opacity 1.6s ease;
}
.hero .flight__land.is-on {
    opacity: 1;
}
.hero__name {
    margin: 0;
    font-size: clamp(4rem, 14vw, 14rem) !important;
    line-height: 0.85;
    letter-spacing: -0.02em;
    text-shadow: 0 8px 60px rgba(0, 0, 0, 0.45);
}
.hero__frontier {
    margin: 0.8rem 0 0;
    font: 700 clamp(1.4rem, 2.6vw, 2.6rem) / 1 var(--display);
    color: var(--limestone);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.hero__frontier em {
    font-style: italic;
    color: var(--sun);
}
/* Deeper shade at the foot, under the name and the strip */
.hero .flight__shade {
    background:
        radial-gradient(ellipse 125% 95% at 55% 35%, transparent 40%, rgba(6, 12, 20, 0.6) 100%),
        linear-gradient(
            180deg,
            rgba(6, 12, 20, 0.3),
            transparent 25%,
            transparent 38%,
            rgba(6, 12, 20, 0.9)
        );
}

/* The mountain list: a solid dark field under it, so the names read over the mist */
.range__shade {
    background:
        linear-gradient(
            90deg,
            rgba(9, 18, 30, 0.7),
            transparent 30%,
            rgba(9, 18, 30, 0.55) 42%,
            rgba(9, 18, 30, 0.9) 54%,
            rgba(9, 18, 30, 0.94)
        ),
        linear-gradient(180deg, rgba(9, 18, 30, 0.35), transparent 30%);
}
.range__peaks b,
.range__peaks small {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.range__peaks b {
    font-size: clamp(1.4rem, 2.3vw, 2rem);
}
.range__peaks span {
    font: 700 0.85rem/1.6 var(--text);
    font-variant-numeric: tabular-nums;
}
.range__peaks small {
    color: rgba(245, 242, 234, 0.86);
    font-size: 0.92rem;
}
.range__peaks li {
    opacity: 0.32;
}
.range__peaks li.is-on {
    opacity: 1;
}

/* The same film vignette on the other full-frame photographs */
.deep__photo::after {
    background:
        radial-gradient(
            ellipse 85% 80% at 50% 45%,
            rgba(6, 12, 20, 0.35) 25%,
            rgba(6, 12, 20, 0.7) 70%,
            rgba(6, 12, 20, 0.95) 100%
        ),
        linear-gradient(180deg, transparent 50%, rgba(6, 12, 20, 0.85));
}
.hero .flight__shade {
    background:
        radial-gradient(
            ellipse 85% 80% at 55% 35%,
            transparent 30%,
            rgba(6, 12, 20, 0.5) 72%,
            rgba(6, 12, 20, 0.9) 100%
        ),
        linear-gradient(180deg, transparent 40%, rgba(6, 12, 20, 0.9));
}

/* The depth reading: a big number with its unit set small beside it */
.dive__depth b {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.6rem;
    font: 900 clamp(3.4rem, 8vw, 6.4rem) / 0.9 var(--display);
    font-variant-numeric: lining-nums tabular-nums;
}
.dive__depth b .dive__num {
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: var(--limestone);
}
.dive__depth b small {
    font: 700 0.3em/1 var(--text);
    color: var(--sun);
}

/* ---------- History: a year, large, over each moment ---------- */

.panel__year {
    font-weight: 700;
    color: var(--limestone);
}
.panel--history .title {
    font-size: clamp(2.2rem, 4.6vw, 4.8rem);
}
.panel--history .lede {
    max-width: 38rem;
}

/* ---------- Creatures: one frame size for every animal ---------- */

/* Every photo fills the same frame (cover, centred); the text below no longer changes
   the picture's size */
.beast {
    grid-template-rows: auto auto;
    align-content: center;
    width: min(64vw, 56rem);
}
.beast figure {
    height: calc(var(--vh) * 0.52);
    background: #0b1522;
}
.beast figure img {
    object-fit: cover;
    object-position: center;
    transform: none;
}
.beast__meta {
    min-height: 9.5rem;
    align-content: start;
}
@media (max-width: 760px) {
    .beast {
        width: 86vw;
    }
    .beast figure {
        height: calc(var(--vh) * 0.4);
    }
    .beast__meta {
        min-height: 0;
    }
}

/* The name takes the full width on one line; the other names and the status share the row
   below it; the description runs underneath */
.beast__meta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
}
.beast__name {
    grid-column: 1 / -1;
    font-size: clamp(1.8rem, 2.8vw, 2.7rem);
    line-height: 1.05;
}
.beast__names {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.9rem;
    margin: 0;
}
.beast__names .beast__local,
.beast__names .beast__latin {
    display: inline;
    margin: 0;
}
.beast__meta .status {
    margin: 0;
    justify-self: end;
    white-space: nowrap;
}
.beast__meta .beast__text {
    grid-column: 1 / -1;
    max-width: 44rem;
    margin-top: 0.3rem;
}
@media (max-width: 760px) {
    .beast__meta {
        grid-template-columns: minmax(0, 1fr);
    }
    .beast__meta .status {
        justify-self: start;
    }
}

/* ---------- The land: four real ridgelines in line art (owner, 1 Nov) ---------- */

/* No photograph and no mist: night blue, and the peaks drawn from elevation data on one
   height scale. Each ridge draws itself in gold when the altimeter passes it; the ones
   already climbed stay as quiet lines. */
.range .stage {
    background: radial-gradient(ellipse 90% 70% at 60% 30%, #12253b, var(--night) 75%);
}
.range__art {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 72%;
}
.ridge__fill {
    fill: #0b1624;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.ridge__line {
    fill: none;
    stroke: var(--sun);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition:
        stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1),
        stroke 1.6s ease;
}
.ridge__echo {
    fill: none;
    stroke: rgba(245, 242, 234, 0.16);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 1.6s ease calc(0.6s + var(--k) * 0.25s);
}
.ridge__summit {
    fill: var(--sun);
    opacity: 0;
    transition: opacity 0.8s ease 1.8s;
}
.ridge__label {
    font: 600 15px/1 var(--wide);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    fill: var(--limestone);
    opacity: 0;
    transition: opacity 0.8s ease 1.9s;
}
.ridge.is-on .ridge__fill,
.ridge.is-on .ridge__summit,
.ridge.is-on .ridge__label {
    opacity: 1;
}
.ridge.is-on .ridge__echo {
    opacity: calc(1 - var(--k) * 0.28);
}
.ridge.is-on .ridge__line {
    stroke-dashoffset: 0;
}
/* Peaks already climbed step back: a pale line, no label */
.ridge.is-on:has(~ .ridge.is-on) .ridge__line {
    stroke: rgba(245, 242, 234, 0.45);
}
.ridge.is-on:has(~ .ridge.is-on) .ridge__label,
.ridge.is-on:has(~ .ridge.is-on) .ridge__summit {
    opacity: 0.35;
}

/* The altimeter top left; one caption at a time, top right, for the peak being climbed */
.range__alt {
    top: clamp(5rem, 14vh, 8rem);
    transform: none;
}
.range__peaks {
    top: clamp(5rem, 14vh, 8rem);
    transform: none;
    width: min(30rem, 40vw);
}
.range__peaks li {
    position: absolute;
    inset: 0 0 auto;
    border: 0;
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.8s ease,
        transform 1s var(--ease);
}
.range__peaks li.is-on {
    opacity: 1;
    transform: none;
}
.range__peaks li.is-on:has(~ li.is-on) {
    opacity: 0;
    transform: translateY(-1rem);
}
.range__peaks b {
    font-size: clamp(2rem, 3.6vw, 3.4rem);
}
.range__peaks span {
    font-size: 1rem;
}
.range__peaks small {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    max-width: 26rem;
}

@media (max-width: 760px) {
    .range__art {
        height: 52%;
    }
    .range__peaks {
        left: var(--gutter);
        right: var(--gutter);
        top: auto;
        bottom: 54%;
        width: auto;
    }
    .range__peaks li {
        inset: auto 0 0;
    }
}

/* ---------- The dive: each stop fills the frame (owner, 1 Nov) ---------- */

/* The photo takes most of the width beside the gauge, tall; the words sit beside it, larger */
@media (min-width: 761px) {
    .dive__stop {
        left: calc(var(--gutter) + clamp(11rem, 16vw, 15rem));
        right: var(--gutter);
        width: auto;
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
        gap: clamp(1.6rem, 3vw, 3.4rem);
        align-items: center;
    }
    .dive__stop figure {
        aspect-ratio: auto;
        height: calc(var(--vh) * 0.68);
    }
    .dive__stop .title {
        font-size: clamp(2.2rem, 3.6vw, 3.8rem);
        line-height: 1.02;
    }
    .dive__stop .prose p:not(.kicker) {
        font-size: clamp(1rem, 1.2vw, 1.15rem);
        line-height: 1.6;
    }
}

/* Plain ink type over the clouds: no glow */
.prelude__line {
    text-shadow: none;
}
/* Centred type over the lagoon: the shade deepens behind it as well as at the edges */
.hero .flight__shade {
    background:
        radial-gradient(ellipse 60% 45% at 50% 52%, rgba(6, 12, 20, 0.55), transparent 80%),
        radial-gradient(
            ellipse 85% 80% at 50% 45%,
            transparent 35%,
            rgba(6, 12, 20, 0.6) 75%,
            rgba(6, 12, 20, 0.9) 100%
        );
}

/* ---------- Sideways passages: smooth (owner, 1 Nov) ---------- */

/* No live filter on the big photos: the grade is a flat darkening in the shade, which costs
   nothing to paint. Each panel is its own layer, and the photos don't follow the pointer here. */
.panel {
    contain: layout paint;
}
.panel__bg {
    will-change: transform;
}
.panel__bg img {
    filter: none;
    translate: none;
    scale: none;
}
.panel__shade {
    background:
        linear-gradient(rgba(6, 12, 20, 0.22), rgba(6, 12, 20, 0.22)),
        radial-gradient(
            ellipse 85% 80% at 55% 42%,
            transparent 30%,
            rgba(6, 12, 20, 0.55) 72%,
            rgba(6, 12, 20, 0.92) 100%
        ),
        linear-gradient(180deg, transparent 50%, rgba(6, 12, 20, 0.85)),
        linear-gradient(90deg, rgba(6, 12, 20, 0.4), transparent 50%);
}
.panel__copy {
    translate: none;
}
.passage__track {
    backface-visibility: hidden;
}

/* The paired opening line: two sentences, one thought */
.prelude__line--pair {
    max-width: 44rem;
}

/* ---------- Each town: its story, its fiesta, what it is known for ---------- */

.town-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0;
    margin: clamp(2.4rem, 6vh, 4rem) 0 0;
    border-top: 1px solid var(--line);
}
.town-notes div {
    padding: 1.4rem 2rem 0 0;
}
.town-notes div + div {
    padding-left: 2rem;
    border-left: 1px solid var(--line);
}
.town-notes dt {
    font: 600 0.8rem/1 var(--wide);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sun);
}
.town-notes dd {
    margin: 0.8rem 0 0;
    max-width: 34rem;
    font: 700 clamp(1.15rem, 1.6vw, 1.45rem) / 1.4 var(--display);
    color: var(--limestone);
}
@media (max-width: 760px) {
    .town-notes div + div {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
        margin-top: 1.4rem;
    }
}

/* ---------- The province at a glance, in the voyage intro ---------- */

.glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: clamp(2rem, 5vh, 3rem) 0 0;
    border-top: 1px solid var(--line);
}
.glance div {
    padding: 1.2rem 1.4rem 1.2rem 0;
    border-bottom: 1px solid var(--line);
}
.glance div:nth-child(even) {
    padding-left: 1.4rem;
    border-left: 1px solid var(--line);
}
.glance dt {
    font: 900 clamp(1.8rem, 3vw, 2.8rem) / 1 var(--display);
    color: var(--sun);
    font-variant-numeric: lining-nums;
}
.glance dd {
    margin: 0.5rem 0 0;
    font-size: 0.98rem;
    line-height: 1.45;
    color: rgba(245, 242, 234, 0.85);
}

/* ---------- The side map: the province, the route and a dot per town ---------- */

.sidemap {
    position: fixed;
    z-index: 45;
    right: clamp(0.8rem, 1.6vw, 1.6rem);
    top: 50%;
    width: clamp(120px, 10.5vw, 176px);
    aspect-ratio: 997 / 1034;
    transform: translate(1.2rem, -50%);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.6s ease,
        transform 0.6s var(--ease);
}
.show-map .sidemap {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
}
.sidemap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Lines in chart units: about 1px at this size */
    --land-fill: rgba(9, 18, 30, 0.6);
    --land-stroke: rgba(245, 242, 234, 0.6);
    --land-stroke-width: 6;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
}
.sidemap__route {
    fill: none;
    stroke: rgba(207, 165, 79, 0.75);
    stroke-width: 6;
    stroke-dasharray: 18 26;
}
.sidemap__dot {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
}
.sidemap__dot::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(245, 242, 234, 0.75);
    transition:
        inset 0.3s ease,
        background 0.3s ease;
}
.sidemap__dot:hover::before,
.sidemap__dot:focus-visible::before {
    inset: 2px;
    background: var(--limestone);
}
.sidemap__dot.is-here::before {
    inset: 1px;
    background: var(--sun);
    box-shadow: 0 0 0 4px rgba(207, 165, 79, 0.28);
}
/* The name shows beside a dot on hover, and always for the town being read */
.sidemap__dot span {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 50%;
    padding: 0.3rem 0.55rem 0.25rem;
    border-radius: 2px;
    background: rgba(9, 18, 30, 0.9);
    font: 600 0.72rem/1 var(--wide);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--limestone);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidemap__dot:hover span,
.sidemap__dot:focus-visible span,
.sidemap__dot.is-here span {
    opacity: 1;
}
.sidemap__dot.is-here span {
    color: var(--sun);
}

/* ---------- The menu: one button, every section ---------- */

.menu-btn {
    position: fixed;
    z-index: 70;
    top: 14px;
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem 0.55rem 1rem;
    border: 1px solid rgba(245, 242, 234, 0.25);
    border-radius: 999px;
    background: rgba(9, 18, 30, 0.82);
    color: var(--limestone);
    font: 600 0.8rem/1 var(--wide);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}
.menu-btn i {
    position: relative;
    width: 18px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
}
.menu-btn:hover,
.menu-btn:focus-visible {
    border-color: var(--sun);
    color: var(--sun);
}
.menu {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(4.5rem, 12vh, 7rem) var(--gutter) 3rem;
    border: 0;
    background: rgba(7, 13, 22, 0.97);
    color: var(--limestone);
    overflow-y: auto;
}
.menu::backdrop {
    background: transparent;
}
.menu[open] {
    animation: menu-in 0.45s ease both;
}
@keyframes menu-in {
    from {
        opacity: 0;
    }
}
.menu__close {
    position: absolute;
    top: 14px;
    right: var(--gutter);
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(245, 242, 234, 0.25);
    border-radius: 50%;
    background: transparent;
    color: var(--limestone);
    font: 400 1.4rem/1 var(--text);
    cursor: pointer;
}
.menu__close:hover,
.menu__close:focus-visible {
    border-color: var(--sun);
    color: var(--sun);
}
.menu__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 0 clamp(2rem, 4vw, 4rem);
    max-width: var(--max);
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}
.menu__list a {
    display: block;
    padding: 1.1rem 0 1rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}
.menu__list small {
    display: block;
    font: 600 0.75rem/1 var(--wide);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sun);
}
.menu__list b {
    display: block;
    margin-top: 0.5rem;
    font: 900 clamp(1.8rem, 3vw, 2.8rem) / 1.05 var(--display);
    transition: color 0.25s ease;
}
.menu__list a:hover b,
.menu__list a:focus-visible b {
    color: var(--sun);
}

@media (max-width: 760px) {
    .sidemap {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .menu[open] {
        animation: none;
    }
}
/* A quiet dark mount behind the map, so the island reads over any photograph */
.sidemap::before {
    content: '';
    position: absolute;
    inset: -12px;
    z-index: -1;
    border: 1px solid rgba(245, 242, 234, 0.14);
    border-radius: 6px;
    background: rgba(7, 13, 22, 0.72);
}
.sidemap svg {
    --land-fill: rgba(245, 242, 234, 0.1);
    --land-stroke: rgba(245, 242, 234, 0.7);
    filter: none;
}

/* ---------- Side map, bottom left: no mount, quiet until hovered (owner, 1 Nov) ---------- */

.sidemap {
    left: var(--gutter);
    right: auto;
    top: auto;
    bottom: clamp(1.2rem, 3vh, 2rem);
    width: clamp(110px, 9vw, 150px);
    transform: translateY(1rem);
}
.sidemap::before {
    content: none;
}
.show-map .sidemap {
    opacity: 0.4;
    transform: none;
}
.show-map .sidemap:hover,
.show-map .sidemap:focus-within {
    opacity: 1;
}
.sidemap svg {
    --land-fill: rgba(245, 242, 234, 0.08);
    --land-stroke: rgba(245, 242, 234, 0.75);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}
/* Names open to the right, away from the screen edge */
.sidemap__dot span {
    right: auto;
    left: calc(100% + 0.5rem);
}
/* While the map is up, the bottom-left title cards sit above it */
@media (min-width: 761px) {
    .show-map .landfall__head,
    .show-map .flight--leg .flight__land {
        bottom: calc(clamp(4rem, 13vh, 8.5rem) + clamp(110px, 9vw, 150px) * 0.6);
    }
}

/* ---------- A history moment shown whole: the Manunggul Jar (owner, 1 Nov) ---------- */

/* The jar is photographed on black, so it sits on black, whole, to the right of the words,
   instead of being cropped to fill the screen */
.panel--object {
    background: #000;
}
.panel--object .panel__bg {
    inset: 9vh 6vw 9vh auto;
    width: min(48vw, 78vh);
}
.panel--object .panel__bg img {
    object-fit: contain;
    object-position: center;
}
@media (max-width: 760px) {
    .panel--object .panel__bg {
        inset: 8vh 0 auto;
        width: auto;
        height: 46vh;
    }
}
/* Only the words need shade here; the jar's base stays lit */
.panel--object .panel__shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 55%);
}
@media (max-width: 760px) {
    .panel--object .panel__shade {
        background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.7));
    }
}

/* A tall photo cropped to a wide screen keeps its subject in frame (panel pos, owner 1 Nov) */
.panel__bg img {
    object-position: var(--pos, 50% 50%);
}

/* ---------- Creatures painted in watercolour (owner, 1 Nov) ---------- */

/* Each painting shows whole, on a mat of its own paper colour, never cropped */
.beast figure.beast__painting {
    background: #f9f6f0;
}
.beast figure.beast__painting img {
    object-fit: contain;
}

/* ---------- One frame rule for every town's photos (owner, 1 Nov) ---------- */

/* Like the creatures: every reel card is the same width, and every photo fills the same frame
   (cover, centred), whatever its shape */
.reel__card,
.reel__card:nth-of-type(even) {
    grid-template-rows: auto auto;
    align-content: center;
    width: min(64vw, 56rem);
}
.reel__card figure {
    height: calc(var(--vh) * 0.52);
}
.reel__card figure img {
    object-position: center;
}
/* The towns without a reel: one size for every spot, no lead photo */
.spot,
.spots--4 .spot:nth-child(1),
.spots--5 .spot:nth-child(1),
.spots--5 .spot:nth-child(n + 4) {
    grid-column: span 4;
    grid-row: auto;
}
.spots--2 .spot,
.spots--4 .spot {
    grid-column: span 6;
}
.spot .slit,
.spot .plate,
.spots--4 .spot:nth-child(1) .slit,
.spots--5 .spot:nth-child(1) .slit {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
}
@media (max-width: 760px) {
    .reel__card,
    .reel__card:nth-of-type(even) {
        width: 86vw;
    }
    .reel__card figure {
        height: calc(var(--vh) * 0.4);
    }
    .spot,
    .spots--2 .spot,
    .spots--4 .spot,
    .spots--4 .spot:nth-child(1),
    .spots--5 .spot:nth-child(1),
    .spots--5 .spot:nth-child(n + 4) {
        grid-column: 1 / -1;
    }
}

/* ---------- A lighter vignette and a little more colour (owner, 1 Nov) ---------- */

/* The film look stays, at about half strength: edges and the foot under the title darken
   less, so the photographs carry more of the frame */
.panel__shade,
.flight--leg .flight__shade,
.landfall__hero::after {
    background:
        radial-gradient(
            ellipse 95% 90% at 55% 42%,
            transparent 45%,
            rgba(6, 12, 20, 0.3) 78%,
            rgba(6, 12, 20, 0.6) 100%
        ),
        linear-gradient(180deg, transparent 55%, rgba(6, 12, 20, 0.7)),
        linear-gradient(90deg, rgba(6, 12, 20, 0.28), transparent 45%);
}
.deep__photo::after {
    background:
        radial-gradient(
            ellipse 95% 90% at 50% 45%,
            rgba(6, 12, 20, 0.15) 30%,
            rgba(6, 12, 20, 0.4) 75%,
            rgba(6, 12, 20, 0.7) 100%
        ),
        linear-gradient(180deg, transparent 55%, rgba(6, 12, 20, 0.7));
}
/* A fixed, gentle vibrance in place of the old muted grade: no sepia, a touch more saturation.
   Fixed values only, so nothing re-paints as you scroll. */
.flight--leg .flight__photo,
.landfall__hero > img,
.panel__bg img,
.sail__peek img,
.reel__card figure img,
.spot img,
.spread__img img,
.wide img,
.deep__photo img {
    filter: brightness(0.94) contrast(1.06) saturate(1.18);
}
/* The watercolours and the jar keep their own colour */
.beast figure.beast__painting img,
.panel--object .panel__bg img {
    filter: none;
}

/* ---------- Festivals, each town (owner, 1 Nov; photos from travel-palawan.com) ---------- */

/* Same frame rule as the reels: one size for every photo, cover, centred */
.festivals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: clamp(1.4rem, 3vw, 2.4rem);
    margin-top: clamp(2.4rem, 6vh, 4rem);
}
.festival figure {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0b1522;
}
.festival figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.94) contrast(1.06) saturate(1.18);
}
.festival__credit {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    margin: 0;
    padding: 0.2rem 0.4rem;
    background: rgba(9, 18, 30, 0.6);
}
.festival__when {
    margin: 1rem 0 0;
    font: 600 0.8rem/1 var(--wide);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sun);
}
.festival h4 {
    margin: 0.55rem 0 0.4rem;
    font: 700 clamp(1.4rem, 2.2vw, 2rem) / 1.1 var(--display);
}
.festival p:not(.credit):not(.festival__when) {
    margin: 0;
    max-width: 34rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ---------- Strips: every photo the same height, all lined up at the top (owner, 1 Nov) ---------- */

/* The cards start at the top of the strip, so every photo sits on one line and keeps one height;
   the text below takes whatever room it needs */
.reel__card,
.reel__card:nth-of-type(even),
.beast {
    align-content: start;
    align-self: flex-start;
}
.reel__card figure,
.beast figure {
    flex: none;
}

/* The 1898 vehicles: four street photos tiled as one background */
.panel__collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    width: 100%;
    height: 100%;
    background: #000;
}
.panel__collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 0;
}

/* ---------- A painting shown whole: the Manunggul Jar watercolour (owner, 1 Nov) ---------- */

/* The whole painting fits the screen on a mat of its own night blue; nothing is cut off */
.panel--art {
    background: var(--art-mat, #0c1520);
}
.panel--art .panel__bg {
    inset: 0;
    transform: none;
}
.panel--art .panel__bg img {
    object-fit: contain;
    filter: none;
}
.panel--art .panel__shade {
    background: linear-gradient(90deg, rgba(6, 12, 20, 0.45), transparent 50%);
}

/* ---------- Sideways passages: one layer per strip (owner, 1 Nov) ---------- */

/* Each panel photo used to drift on its own layer, 124% of the screen wide. Twelve of those in
   the history passage meant twelve large layers to draw as it slid, and it stuttered where the
   short passages didn't. The strip itself still slides; the photos inside it no longer drift. */
.passage .panel__bg {
    inset: 0;
    transform: none;
    will-change: auto;
}
/* The colour grade is left off these photos: as a live filter it doubled the drawing work of
   each panel, and with twelve large ones the history passage felt it most */
.passage .panel__bg img {
    filter: none;
}

/* The jar watercolour fills the width on any screen: the trim comes off the water at its foot,
   never the figures on its lid (owner, 1 Nov) */
.panel--art .panel__bg img {
    object-fit: cover;
    object-position: 70% 0%;
}

/* ---------- The people: a portrait painting shown whole (owner, 1 Nov) ---------- */

/* The painting keeps its own 2:3 shape: no crop, no frame. The words sit beside it, centred on
   its height, instead of at its foot */
.spread--portrait {
    align-items: center;
}
.spread--portrait .spread__img {
    grid-column: 1 / span 6;
}
.spread--portrait .spread__img .slit {
    aspect-ratio: 2 / 3;
    /* Never taller than the screen, so the whole painting is in view at once */
    width: min(100%, calc(var(--vh) * 0.88 * 2 / 3));
    margin-left: auto;
}
.spread--portrait .spread__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
    /* No reveal zoom and no pointer lean: either would push the edges out of the frame */
    transform: none;
    scale: none;
    translate: none;
}
.spread--portrait .spread__copy {
    grid-column: 7 / span 5;
    padding-bottom: 0;
}
@media (max-width: 760px) {
    .spread--portrait .spread__img,
    .spread--portrait .spread__copy {
        grid-column: 1 / -1;
    }
    .spread--portrait .spread__img .slit {
        width: 100%;
        margin-left: 0;
    }
}