/* ==========================================================================
    The Donat Dion Record
    --------------------------------------------------------------------------
    Layers, lowest to highest priority:
        reset       Element normalisation
        base        Tokens, document defaults, typography primitives
        layout      Sections, containers, scene scaffolding
        components  Reusable pieces (tags, quotes, buttons, panels…)
        sections    Page-specific regions, in document order
        motion      Scroll-driven and ambient animation (opt-in by preference)
        utilities   Single-purpose helpers
========================================================================== */

@layer reset, base, layout, components, sections, motion, utilities;


/* ==========================================================================
    Reset
========================================================================== */

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body,
    h1, h2, h3, h4,
    p,
    figure,
    blockquote,
    dl, dd {
        margin: 0;
    }

    img,
    video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    svg {
        flex-shrink: 0;
    }

    button,
    input,
    textarea {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    [hidden] {
        display: none !important;
    }
}


/* ==========================================================================
    Base
========================================================================== */

@layer base {
    :root {
        /* Ink & paper */
        --c-ink: #2A2721;
        --c-ink-soft: #3A352D;
        --c-ink-muted: #6A6154;
        --c-paper: #F3EEE1;
        --c-paper-deep: #EAE3D0;
        --c-paper-bright: #FAF7EE;
        --c-rule: rgba(42, 39, 33, 0.22);

        /* Night */
        --c-night: #1D1C1A;
        --c-night-deep: #0F0E0D;
        --c-slate: #14181A;
        --c-bone: #E6DFD0;
        --c-bone-soft: #CFC6B3;
        --c-bone-muted: #A39A8A;
        --c-stone: #B8AF9E;
        --c-moon: #F1EBDC;

        /* Accents */
        --c-brass: #C9AE7E;
        --c-brass-rule: rgba(201, 174, 126, 0.55);
        --c-blaze: #B85A2C;
        --c-rust: #A04E26;
        --c-pine: #2F4636;
        --c-focus: #C2511F;

        /* Type */
        --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;
        --f-serif: "Fraunces", Georgia, serif;
        --f-display: "Libre Caslon Display", "Libre Caslon Text", Didot, Georgia, serif;
        --f-sans: "Josefin Sans", Futura, "Avenir Next", sans-serif;
        --f-gothic: "League Gothic", "Arial Narrow", sans-serif;
        --f-script: "Yellowtail", "Brush Script MT", cursive;
        --f-mono: "Courier Prime", "Courier New", monospace;

        /* Spacing */
        --gutter: clamp(20px, 4vw, 56px);
        --content-width: 1328px;
        --section-space: clamp(64px, 7vw, 104px);
        --treeline-height: max(10vw, 110px);
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        min-height: 100vh;
        background: var(--c-night);
        color: var(--c-ink);
        font-family: var(--f-body);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Film grain over the whole page */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 80;
        pointer-events: none;
        background: url("../img/texture/grain.svg") 0 0 / 240px 240px;
        mix-blend-mode: soft-light;
        opacity: 0.55;
    }

    p {
        font-variant-numeric: oldstyle-nums;
    }

    a {
        color: inherit;
        text-underline-offset: 4px;
    }

    a:hover {
        opacity: 0.8;
    }

    :focus-visible {
        outline: 2px solid var(--c-focus);
        outline-offset: 3px;
    }

    ::selection {
        background: var(--c-focus);
        color: var(--c-paper);
    }

    /* Small uppercase label set in Josefin Sans; size via context */
    .caps {
        font-family: var(--f-sans);
        font-weight: 600;
        text-transform: uppercase;
    }
}


/* ==========================================================================
    Layout
========================================================================== */

@layer layout {
    .section {
        position: relative;
        padding: var(--section-space) var(--gutter);
    }

    .section--night {
        background: var(--c-night);
        color: var(--c-bone);
    }

    .section--paper {
        background: var(--c-paper);
        color: var(--c-ink);
    }

    .section--paper-deep {
        background: var(--c-paper-deep);
        color: var(--c-ink);
    }

    .container {
        position: relative;
        z-index: 1;
        max-width: var(--content-width);
        margin-inline: auto;
    }

    /* Silhouetted spruce line along the foot of a paper section */
    .has-treeline {
        padding-bottom: calc(clamp(40px, 4vw, 64px) + var(--treeline-height));
    }

    /*
        The scaled SVG rarely lands on a whole pixel, and its anti-aliased
        bottom row lets the paper show through as a hairline. Bleeding 2px
        under the next section, over a solid night strip, hides the seam.
    */
    .has-treeline::before {
        content: "";
        position: absolute;
        inset: auto 0 -2px;
        height: calc(var(--treeline-height) + 2px);
        background:
            linear-gradient(var(--c-night), var(--c-night)) center bottom / 100% 4px no-repeat,
            url("../img/texture/treeline.svg") center bottom / max(100vw, 1100px) auto no-repeat;
        pointer-events: none;
    }

    /* Two-column heading row: title block + supporting paragraph */
    .section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px 64px;
    }

    .section-head__title {
        flex: 2 1 520px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .section-head__intro {
        flex: 1 1 340px;
        font-size: 19px;
        line-height: 1.6;
        color: var(--c-bone-soft);
        text-wrap: pretty;
    }

    /* ----------------------------------------------------------------------
        Layered landscape scenes (hero and footer).
        --u is the scene's unit: one hundredth of the artwork's width, which
        grows past the viewport on small screens so the mountain stays legible.
    ---------------------------------------------------------------------- */

    .scene {
        --u: 1vw;
        --fs: max(12.6vw, 44px);
        overflow: hidden;
        overflow: clip;
    }

    @media (max-width: 900px) {
        .scene {
            --u: 1.3vw;
        }
    }

    @media (max-width: 560px) {
        .scene {
            --u: 2.1vw;
        }
    }

    .scene__layer {
        position: absolute;
        left: 50%;
        width: calc(100 * var(--u));
        margin-left: calc(-50 * var(--u));
        pointer-events: none;
    }

    .scene__layer img {
        width: 100%;
    }

    .scene__stars {
        position: absolute;
        inset: 0 0 auto;
        background: url("../img/scene/stars.png") 50% 0 / calc(100 * var(--u)) auto repeat-x;
        -webkit-mask-image: linear-gradient(#000 35%, transparent);
        mask-image: linear-gradient(#000 35%, transparent);
    }

    .scene__mist {
        position: absolute;
        left: 0;
        right: 0;
        height: calc(10 * var(--u));
        overflow: hidden;
        pointer-events: none;
    }

    /*
        Two banks drifting against each other. ::after is mirrored and
        packed tighter (64u tiles) so its wisps read as separate shapes;
        each bank's drift distance must equal its tile width to loop cleanly.
        The width must still cover the scene at the far end of the drift:
        at least 214u minus --mist-offset (243u at the current -29u).
    */
    .scene__mist::before,
    .scene__mist::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--mist-offset, 0px);
        width: calc(250 * var(--u));
        background: url("../img/scene/mist-dawn.svg") 0 0 / calc(100 * var(--u)) 100% repeat-x;
    }

    .scene__mist::after {
        left: calc(var(--mist-offset, 0px) - 50 * var(--u));
        background-size: calc(64 * var(--u)) 100%;
        transform: scaleX(-1);
        opacity: 0.6;
    }
}


/* ==========================================================================
    Components
========================================================================== */

@layer components {

    /* Eyebrow: small label above a heading ----------------------------- */

    .eyebrow {
        font-size: 12px;
        letter-spacing: 0.2em;
        color: var(--c-brass);
    }

    .eyebrow--rust {
        color: var(--c-rust);
    }

    /* Headings ---------------------------------------------------------- */

    .heading {
        font-family: var(--f-serif);
        font-weight: 340;
        text-wrap: balance;
    }

    .heading--l {
        font-size: clamp(44px, 5.4vw, 78px);
        line-height: 1.05;
    }

    .heading--xl {
        font-weight: 320;
        font-size: clamp(52px, 6.4vw, 100px);
        line-height: 1.02;
        letter-spacing: -0.01em;
    }

    /* Gothic word + script tail ("The trails / have a name.") --------- */

    .lockup {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 400;
    }

    .lockup__gothic {
        font-family: var(--f-gothic);
        font-size: clamp(84px, 13vw, 188px);
        line-height: 0.82;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--c-brass);
    }

    .lockup__script {
        margin-top: -0.18em;
        font-family: var(--f-script);
        font-size: clamp(52px, 7.4vw, 108px);
        line-height: 1;
        color: var(--c-bone);
        transform: rotate(-4deg);
    }

    .lockup--long .lockup__gothic {
        font-size: clamp(48px, 12vw, 160px);
        text-wrap: balance;
    }

    .lockup--compact {
        margin-top: -6px;
    }

    .lockup--compact .lockup__gothic {
        font-size: clamp(56px, 7vw, 100px);
        line-height: 0.85;
        letter-spacing: 0.08em;
    }

    .lockup--compact .lockup__script {
        margin-top: -0.12em;
        font-size: clamp(36px, 4.4vw, 62px);
        line-height: 1.1;
        transform: rotate(-3deg);
    }

    /* Text set on an arc (inline SVG) --------------------------------- */

    .arc-title {
        display: block;
        width: min(500px, 100%);
        height: auto;
    }

    .arc-title__text {
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 22px;
        letter-spacing: 7px;
        fill: var(--c-brass);
    }

    .rule-ornament {
        color: var(--c-brass);
    }

    /* Ruled tag ---------------------------------------------------------- */

    .tag {
        padding: 7px 14px;
        border-block: 1px solid var(--c-brass);
        font-size: 12.5px;
        letter-spacing: 0.24em;
        color: var(--c-brass);
    }

    .badge {
        padding: 5px 12px 3px;
        border: 1px solid var(--c-pine);
        border-radius: 999px;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.2em;
        color: var(--c-pine);
    }

    /* Links & buttons ------------------------------------------------- */

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        text-decoration: none;
    }

    .link-arrow--underlined {
        border-bottom: 1px solid var(--c-brass);
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 52px;
        padding: 0 24px;
        font-family: var(--f-sans);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        text-decoration: none;
        transition: transform 0.2s ease;
    }

    .button:hover {
        opacity: 1;
        transform: translateY(-2px);
    }

    .button--outline {
        border: 1.5px solid var(--c-brass);
        background: transparent;
        color: var(--c-bone);
    }

    /* Quotes ------------------------------------------------------------ */

    .quote {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .quote__body {
        padding: 0;
    }

    .quote__body p {
        font-family: var(--f-serif);
        font-style: italic;
        font-weight: 340;
        font-size: clamp(23px, 2.3vw, 30px);
        line-height: 1.45;
        color: var(--c-pine);
        text-wrap: balance;
    }

    .quote__source {
        font-size: 12px;
        letter-spacing: 0.18em;
        color: var(--c-ink-muted);
    }

    .quote--centered {
        max-width: 860px;
        margin-inline: auto;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .quote--ruled {
        margin-top: 16px;
        padding-top: 26px;
        border-top: 1px solid var(--c-rule);
    }

    /* ----------------------------------------------------------------------
        Textured panels with drafting-style corner ticks.
        Eight one-pixel gradients draw the ticks; --texture-fill sits beneath.
    ---------------------------------------------------------------------- */

    .texture-vignette {
        --tick: 12px;
        --tick-inset: 6px;
        --tick-line: linear-gradient(var(--tick-color), var(--tick-color));
        background-image:
            var(--tick-line), var(--tick-line), var(--tick-line), var(--tick-line),
            var(--tick-line), var(--tick-line), var(--tick-line), var(--tick-line),
            var(--texture-fill);
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
        background-size:
            var(--tick) 1px, 1px var(--tick), var(--tick) 1px, 1px var(--tick),
            var(--tick) 1px, 1px var(--tick), var(--tick) 1px, 1px var(--tick),
            auto;
        background-position:
            left var(--tick-inset) top var(--tick-inset), left var(--tick-inset) top var(--tick-inset),
            right var(--tick-inset) top var(--tick-inset), right var(--tick-inset) top var(--tick-inset),
            left var(--tick-inset) bottom var(--tick-inset), left var(--tick-inset) bottom var(--tick-inset),
            right var(--tick-inset) bottom var(--tick-inset), right var(--tick-inset) bottom var(--tick-inset),
            0 0;
    }

    .texture-vignette {
        --tick: 16px;
        --tick-inset: 9px;
        --tick-color: rgba(201, 174, 126, 0.8);
        --texture-fill: radial-gradient(ellipse 72% 64% at 50% 55%, #3F3B32 0%, #282621 56%, #1D1C1A 100%);
        background-color: var(--c-night);
    }

    /* Vertical hairline divider used between flex items */
    .vrule {
        align-self: stretch;
        width: 1.5px;
        background: var(--c-ink);
    }

    /* Long-form copy ---------------------------------------------------- */

    .prose p {
        text-wrap: pretty;
    }

    .drop-cap::first-letter {
        float: left;
        padding: 0.08em 0.12em 0 0;
        font-family: var(--f-serif);
        font-weight: 500;
        font-size: 4.6em;
        line-height: 0.8;
        color: var(--c-pine);
    }

    @media (max-width: 760px) {
        .vrule {
            display: none;
        }
    }
}


/* ==========================================================================
    Sections (document order)
========================================================================== */

@layer sections {

    /* Skip link --------------------------------------------------------- */

    .skip-link {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 100;
        padding: 12px 18px;
        background: var(--c-paper);
        color: var(--c-ink);
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        transform: translateY(-200%);
    }

    .skip-link:focus {
        transform: none;
    }

    /* Header & navigation --------------------------------------------- */

    .site-header {
        position: relative;
        z-index: 10;
        padding: 0 var(--gutter);
        background: var(--c-slate);
        color: var(--c-bone);
    }

    .site-header__inner {
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 12px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 32px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        text-decoration: none;
    }

    .brand__mark {
        color: var(--c-brass);
    }

    .brand__name {
        font-family: var(--f-sans);
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.32em;
        text-transform: uppercase;
    }

    .site-nav__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 clamp(28px, 3.4vw, 48px);
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 12.5px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .site-nav__link {
        display: block;
        padding: 14px 0;
        text-decoration: none;
    }

    .nav-toggle,
    .site-nav__close {
        display: none;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--c-brass);
        background: transparent;
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .nav-toggle__bars {
        width: 18px;
        height: 12px;
        background:
            linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
            linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
            linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
    }

    /*
        Small screens use the native Popover API for the menu: no script,
        with Escape and outside-click dismissal built in. Browsers without
        popover support simply show the wrapped link list.
    */
    @supports selector(:popover-open) {
        @media (max-width: 59.99em) {
            .nav-toggle {
                display: inline-flex;
            }

            .site-nav:popover-open {
                position: fixed;
                inset: 0 0 0 auto;
                width: min(22rem, 86vw);
                height: 100%;
                max-height: none;
                margin: 0;
                padding: 20px 28px 32px;
                overflow-y: auto;
                border: 0;
                border-left: 1px solid var(--c-brass-rule);
                background: var(--c-slate);
                color: var(--c-bone);
            }

            .site-nav::backdrop {
                background: rgba(10, 12, 13, 0.6);
            }

            .site-nav:popover-open .site-nav__close {
                display: inline-flex;
                margin: 0 0 24px auto;
            }

            .site-nav:popover-open .site-nav__list {
                flex-direction: column;
                align-items: flex-start;
                font-size: 14px;
            }

            .site-nav:popover-open .site-nav__list li {
                width: 100%;
                border-bottom: 1px solid rgba(201, 174, 126, 0.2);
            }

            .site-nav:popover-open .site-nav__list li:last-child {
                border-bottom: 0;
            }
        }
    }

    /* At desktop widths the nav is always inline, popover or not. */
    @media (min-width: 60em) {
        .site-nav {
            position: static;
            inset: auto;
            display: block;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            overflow: visible;
            border: 0;
            background: none;
            color: inherit;
        }
    }

    /* Hero ---------------------------------------------------------------- */

    .hero {
        --lift: 4.7;
        position: relative;
        height: clamp(640px, 58vw, 1240px);
        background: var(--c-slate);
        color: var(--c-paper);
    }

    .hero__sky {
        position: absolute;
        inset: auto 0 0;
        height: calc(66 * var(--u));
        background: linear-gradient(to top,
            #EFC58A 0,
            #EFC58A calc(21.6 * var(--u)),
            #D79A5F calc(28.4 * var(--u)),
            #A9734A calc(31.8 * var(--u)),
            #6B5B4B calc(36 * var(--u)),
            #39403F calc(42 * var(--u)),
            #1E2528 calc(51.3 * var(--u)),
            #14181A calc(64 * var(--u)));
    }

    .hero__glow {
        position: absolute;
        left: 50%;
        bottom: calc(7.2 * var(--u));
        width: calc(60 * var(--u));
        height: calc(32 * var(--u));
        margin-left: calc(-30 * var(--u));
        background: radial-gradient(closest-side,
            rgba(246, 215, 160, 0.75) 0,
            rgba(246, 215, 160, 0.4) 34%,
            rgba(246, 215, 160, 0.12) 68%,
            rgba(246, 215, 160, 0) 100%);
    }

    .hero__stars {
        height: calc(24 * var(--u));
        opacity: 0.55;
    }

    .hero__ridge {
        z-index: 1;
    }

    .hero__ridge--far {
        bottom: calc(19.33 * var(--u));
    }

    .hero__ridge--mid {
        bottom: calc(17.46 * var(--u));
    }

    .hero__ridge--near {
        bottom: calc(15.33 * var(--u));
    }

    .hero__mist-far {
        bottom: calc(15.5 * var(--u));
        z-index: 1;
        opacity: 0.7;
    }

    /*
        The peak of mountain-dawn.svg sits 32.21u up the scene. The name's
        baseline rests --lift above it (0.148em is the display face's
        descent at line-height 1), and the intro stacks on the name's
        cap height (0.74em) rather than the top of the hero, so the two
        stay together whatever the hero's height.
    */
    .hero__title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc((32.21 + var(--lift)) * var(--u) - 0.148 * var(--fs));
        z-index: 2;
        font-family: var(--f-display);
        font-weight: 400;
        font-size: var(--fs);
        line-height: 1;
        letter-spacing: 0.05em;
        text-indent: 0.05em;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .hero__mountain {
        bottom: calc(-0.52 * var(--u));
        z-index: 3;
    }

    .hero__foothill {
        bottom: calc(-3.2 * var(--u));
        z-index: 3;
    }

    .hero__haze {
        position: absolute;
        inset: auto 0 0;
        z-index: 4;
        height: calc(12.5 * var(--u));
        background: linear-gradient(to top, rgba(142, 133, 114, 0.55), rgba(142, 133, 114, 0));
    }

    .hero__mist-near {
        --mist-offset: calc(-29 * var(--u));
        --mist-duration: 45s;
        bottom: calc(1.2 * var(--u));
        z-index: 4;
        opacity: 0.9;
    }

    .hero__forest {
        bottom: calc(-5.2 * var(--u));
        z-index: 5;
    }

    .hero__fade {
        position: absolute;
        inset: auto 0 0;
        z-index: 6;
        height: max(calc(8 * var(--u)), 120px);
        background: linear-gradient(to top,
            var(--c-night) 0,
            var(--c-night) 26%,
            rgba(29, 28, 26, 0.86) 44%,
            rgba(29, 28, 26, 0.58) 62%,
            rgba(29, 28, 26, 0.26) 82%,
            rgba(29, 28, 26, 0.07) 94%,
            rgba(29, 28, 26, 0) 100%);
    }

    .hero__frame {
        position: absolute;
        inset: clamp(10px, 1.2vw, 18px);
        z-index: 6;
        border: 1px solid rgba(243, 238, 225, 0.14);
        pointer-events: none;
    }

    .hero__intro {
        position: absolute;
        bottom: calc((32.21 + var(--lift) + 1.8) * var(--u) + 0.74 * var(--fs));
        left: 0;
        right: 0;
        z-index: 7;
        padding: 0 clamp(24px, 5vw, 72px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }

    .hero__tagline {
        font-style: italic;
        font-size: clamp(18px, 1.95vw, 28px);
        line-height: 1.3;
        text-wrap: balance;
    }

    .hero__actions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(14px, 2vw, 34px);
        z-index: 7;
        padding: 0 clamp(24px, 5vw, 72px);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 36px;
        font-size: 12.5px;
        letter-spacing: 0.24em;
    }

    @media (max-width: 760px) {
        .hero__actions {
            justify-content: center;
        }
    }

    /* The record ------------------------------------------------------- */

    .record {
        padding-top: clamp(48px, 6vw, 92px);
        padding-bottom: clamp(72px, 8vw, 112px);
    }

    .record__intro {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(24px, 3vw, 40px);
        text-align: center;
    }

    .record__byline {
        margin-top: -14px;
        font-size: 13px;
        letter-spacing: 0.32em;
    }

    .record__lede {
        max-width: 720px;
        font-size: clamp(22px, 2.3vw, 30px);
        line-height: 1.45;
        text-wrap: balance;
    }

    .record__origin {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 16px 36px;
    }

    .record__role {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .record__role-title {
        font-family: var(--f-gothic);
        font-size: 26px;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .record__role-note {
        font-style: italic;
        font-size: 15px;
        color: var(--c-bone-muted);
    }

    /* The early years --------------------------------------------------- */

    .early__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .plate-label {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--c-rule);
        text-align: center;
    }

    .plate-label__text {
        font-size: 14px;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        text-wrap: balance;
    }

    .early__lede {
        max-width: 680px;
        margin: clamp(28px, 3.5vw, 44px) auto 0;
        font-size: clamp(19px, 1.9vw, 23px);
        line-height: 1.6;
        text-align: center;
        text-wrap: balance;
    }

    .leaf {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
        align-items: center;
        margin-top: clamp(48px, 6vw, 80px);
    }

    /* The drawings already pad each leaf, so consecutive leaves sit close */
    .leaf + .leaf {
        margin-top: clamp(8px, 1.5vw, 24px);
    }

    .leaf .study {
        grid-column: 1 / 6;
        grid-row: 1;
    }

    .leaf__body {
        grid-column: 7 / 13;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .leaf--flip .study {
        grid-column: 8 / 13;
    }

    .leaf--flip .leaf__body {
        grid-column: 1 / 7;
    }

    .leaf__meta {
        font-size: 11.5px;
        letter-spacing: 0.16em;
        color: var(--c-rust);
    }

    .leaf__title {
        font-family: var(--f-serif);
        font-weight: 400;
        font-size: clamp(28px, 2.8vw, 38px);
        line-height: 1.15;
    }

    .leaf__text {
        font-size: 18px;
        line-height: 1.65;
        color: var(--c-ink-soft);
        text-wrap: pretty;
    }

    .study {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Hand-cut vignette behind each line drawing, after a naturalist's plate */
    .study__art {
        width: 100%;
        aspect-ratio: 4 / 3;
        background-image: repeating-linear-gradient(118deg, rgba(47, 76, 62, 0.1) 0 1px, transparent 1px 7px);
    }

    /*
        The drawings' ground and edge trees run nearly to the frame's sides
        in the lower half, so the bottom corners must stay under about 22%
        or they clip the art. Each was checked against its own drawing.
    */
    .study--1 .study__art {
        border-radius: 24% 28% 22% 20% / 30% 26% 20% 24%;
    }

    .study--2 .study__art {
        border-radius: 28% 24% 20% 22% / 24% 30% 22% 20%;
    }

    .study--3 .study__art {
        border-radius: 26% 27% 22% 20% / 28% 24% 22% 20%;
    }

    .study--4 .study__art {
        border-radius: 30% 24% 20% 22% / 26% 28% 22% 24%;
    }

    .study__caption {
        align-self: center;
        font-style: italic;
        font-size: 14px;
        color: var(--c-pine);
    }

    @media (max-width: 760px) {
        .leaf {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .leaf .study {
            width: min(100%, 420px);
            align-self: center;
        }

        .leaf + .leaf {
            margin-top: 48px;
        }
    }

    .horses__quote {
        margin-top: clamp(48px, 6vw, 80px);
    }

    .horses__quote .quote__body p {
        font-size: clamp(24px, 2.6vw, 34px);
        line-height: 1.5;
    }

    .horses__quote .quote__source {
        letter-spacing: 0.2em;
    }

    .horses__facts {
        margin-top: clamp(48px, 6vw, 72px);
        padding-top: 40px;
        border-top: 1px solid var(--c-rule);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 32px 48px;
    }

    .seal {
        color: var(--c-pine);
    }

    .seal__ring {
        fill: none;
        stroke: currentColor;
    }

    .seal__arc {
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 12.5px;
        letter-spacing: 2.5px;
        fill: currentColor;
    }

    .seal__word {
        font-family: var(--f-gothic);
        letter-spacing: 3px;
        fill: currentColor;
    }

    .seal__word--large {
        letter-spacing: 2px;
    }

    .horses__body {
        flex: 1 1 480px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .horses__lede {
        font-size: 19px;
        line-height: 1.65;
        text-wrap: pretty;
    }

    .horses__notes {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 32px;
        padding-top: 20px;
        border-top: 1px solid var(--c-rule);
    }

    .note {
        flex: 1 1 220px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .note__title {
        font-family: var(--f-serif);
        font-weight: 500;
        font-size: 21px;
        line-height: 1.2;
    }

    .note__text {
        font-size: 16px;
        line-height: 1.55;
        color: var(--c-ink-muted);
    }

    /* Donat & Loretta ---------------------------------------------------- */

    .loretta-banner {
        position: relative;
        overflow: hidden;
        overflow: clip;
        min-height: clamp(560px, 60vw, 860px);
        padding: 96px var(--gutter) clamp(56px, 7vw, 96px);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: #2A2823;
        color: var(--c-paper);
    }

    /* Taller than the banner so the parallax drift never shows an edge */
    .loretta-banner__photo {
        position: absolute;
        inset: -12% 0;
    }

    .loretta-banner__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 30%;
        filter: sepia(0.35) contrast(0.9) brightness(0.85);
    }

    .loretta-banner__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(29, 28, 26, 0.92) 0%, rgba(29, 28, 26, 0.6) 38%, rgba(29, 28, 26, 0.15) 68%, rgba(29, 28, 26, 0.35) 100%);
    }

    .loretta-banner__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        text-align: center;
    }

    .loretta-banner__title {
        font-family: var(--f-script);
        font-weight: 400;
        font-size: clamp(64px, 9.5vw, 140px);
        line-height: 1;
        transform: rotate(-3deg);
    }

    .loretta-banner__place {
        font-size: clamp(12px, 1.2vw, 15px);
        line-height: 1;
        letter-spacing: 0.42em;
    }

    .loretta-story__inner {
        display: flex;
        flex-wrap: wrap;
        gap: 40px 80px;
    }

    .loretta-story__aside {
        flex: 1 1 380px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /* Keeps the heading and print in view beside the longer text column, but
       only where the whole aside fits the viewport */
    @media (min-width: 960px) and (min-height: 860px) {
        .loretta-story__aside {
            position: sticky;
            top: 40px;
            align-self: flex-start;
        }
    }

    /* Block flow rather than flex, so the inset print can float beside the text */
    .loretta-story__body {
        flex: 1.3 1 440px;
        min-width: 0;
        font-size: 19px;
        line-height: 1.7;
        color: var(--c-ink-soft);
    }

    .loretta-story__body > * + * {
        margin-top: 20px;
    }

    .loretta-story__body .quote {
        display: flow-root;
    }

    .loretta-story__subhead {
        clear: both;
        padding-top: 20px;
        font-family: var(--f-serif);
        font-weight: 400;
        font-size: clamp(28px, 2.8vw, 38px);
        line-height: 1.15;
        color: var(--c-ink);
    }

    .snapshot {
        max-width: 340px;
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .loretta-story__body .snapshot--inset {
        float: right;
        width: min(46%, 300px);
        margin: 8px 0 20px 36px;
    }

    @media (max-width: 560px) {
        .loretta-story__body .snapshot--inset {
            float: none;
            width: min(100%, 300px);
            margin: 28px auto;
        }
    }

    .snapshot__print {
        border: 6px solid var(--c-paper-bright);
        outline: 1px solid rgba(22, 20, 15, 0.25);
        background: var(--c-paper-bright);
        box-shadow: 0 18px 36px rgba(22, 20, 15, 0.16);
        transform: rotate(-2deg);
    }

    .snapshot--inset .snapshot__print {
        transform: rotate(1.5deg);
    }

    .snapshot__print img {
        width: 100%;
    }

    .snapshot__caption {
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--c-ink-muted);
    }

    /* How a trail was cut ------------------------------------------------ */

    .profile {
        position: relative;
        aspect-ratio: 10 / 3;
        margin-top: clamp(32px, 4vw, 56px);
    }

    .profile__ground {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 83.333%;
    }

    .profile__chart {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        fill: none;
    }

    .profile__line {
        stroke: var(--c-bone);
        stroke-opacity: 0.45;
        stroke-width: 1.5;
    }

    .profile__blaze {
        stroke: var(--c-blaze);
        stroke-width: 5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
    }

    .profile__ticks {
        stroke: var(--c-brass);
        stroke-width: 1;
        stroke-dasharray: 2 4;
    }

    .profile__labels,
    .profile__numbers {
        font-family: var(--f-sans);
        font-weight: 600;
    }

    .profile__labels {
        font-size: 15px;
        letter-spacing: 3.5px;
        fill: var(--c-bone);
    }

    .profile__stations {
        fill: var(--c-night);
        stroke: var(--c-brass);
        stroke-width: 2;
    }

    .profile__numbers {
        font-size: 14px;
        fill: var(--c-brass);
    }

    @media (max-width: 560px) {
        .profile__labels {
            display: none;
        }
    }

    .method__body {
        margin-top: clamp(40px, 5vw, 64px);
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(36px, 4.5vw, 72px);
    }

    @media (max-width: 900px) {
        .method__body {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* The photo holds still beside the steps only where it fits the viewport */
    @media (min-width: 901px) and (min-height: 640px) {
        .method__photo {
            position: sticky;
            top: 40px;
        }
    }

    .method__photo {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .method__photo img {
        width: 100%;
        border: 1px solid rgba(230, 223, 208, 0.18);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    }

    .method__caption {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 62ch;
        font-style: italic;
        font-size: 15px;
        line-height: 1.5;
        color: var(--c-bone-muted);
    }

    .method__caption-step {
        font-style: normal;
        font-size: 11.5px;
        letter-spacing: 0.14em;
        color: var(--c-brass);
    }

    .steps {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: clamp(28px, 3vw, 40px);
    }

    .step {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .step__head {
        display: flex;
        align-items: baseline;
        gap: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--c-brass-rule);
    }

    .step__num {
        font-family: var(--f-display);
        font-size: 32px;
        line-height: 1;
        color: var(--c-brass);
    }

    .step__title {
        font-family: var(--f-serif);
        font-weight: 400;
        font-size: 29px;
        line-height: 1.15;
    }

    .step__text {
        font-size: 17px;
        line-height: 1.6;
        color: var(--c-bone-soft);
    }

    .step__tools {
        font-size: 11.5px;
        letter-spacing: 0.14em;
        color: var(--c-brass);
    }

    /* At the height of it (statement-of-work ledger) --------------------- */

    .ledger {
        padding: clamp(20px, 3.4vw, 48px);
        border: 2px solid var(--c-ink);
    }

    .ledger__title {
        font-family: var(--f-gothic);
        font-weight: 400;
        font-size: clamp(58px, 8.4vw, 128px);
        line-height: 0.85;
        letter-spacing: 0.005em;
        text-transform: uppercase;
    }

    .ledger__subtitle {
        display: inline-block;
        margin-top: 14px;
        padding-bottom: 4px;
        border-bottom: 2px solid var(--c-ink);
        font-family: var(--f-gothic);
        font-size: clamp(18px, 1.8vw, 24px);
        line-height: 1.1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .ledger__head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px 32px;
    }

    .ledger__firm {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 4px 9px;
        border-top: 2px solid var(--c-ink);
        border-bottom: 2px solid var(--c-ink);
        text-align: center;
    }

    .ledger__firm-name {
        font-family: var(--f-gothic);
        font-size: clamp(20px, 2vw, 26px);
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ledger__firm-place {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    .ledger__grid {
        margin-top: clamp(28px, 3.6vw, 48px);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
        border-top: 2px solid var(--c-ink);
        border-left: 2px solid var(--c-ink);
    }

    .ledger__cell {
        padding: 14px 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-right: 2px solid var(--c-ink);
        border-bottom: 2px solid var(--c-ink);
    }

    .ledger__label {
        font-size: 11px;
        line-height: 1.4;
        letter-spacing: 0.12em;
    }

    .ledger__figure {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .ledger__value {
        font-family: var(--f-gothic);
        font-size: clamp(64px, 6.4vw, 96px);
        line-height: 0.85;
        white-space: nowrap;
    }

    .ledger__unit {
        font-size: 12px;
        letter-spacing: 0.12em;
    }

    .ledger__note {
        margin-top: 16px;
        font-size: 11.5px;
        letter-spacing: 0.1em;
    }

    /* The mountains: survey map ------------------------------------------ */

    .survey {
        border: 1px solid var(--c-rule);
    }

    .survey__head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 28px clamp(32px, 5vw, 72px);
        padding: clamp(24px, 3.4vw, 48px);
    }

    .survey__title {
        flex: 1 1 440px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .survey__title .eyebrow {
        letter-spacing: 0.22em;
    }

    .survey__motto {
        flex: 0 0 auto;
        margin-left: auto;
        font-style: italic;
        font-size: clamp(21px, 2vw, 27px);
        line-height: 1.35;
    }

    .survey__motto span {
        display: block;
    }

    @media (max-width: 760px) {
        .survey__motto {
            margin-left: 0;
        }
    }

    .map {
        position: relative;
        aspect-ratio: 1000 / 650;
        overflow: hidden;
        border-top: 1px solid var(--c-rule);
        container-type: inline-size;
    }

    .map__base,
    .map__labels {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .map__labels {
        overflow: visible;
    }

    .map__labels text {
        font-family: var(--f-sans);
    }

    .map__grid {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.06em;
        fill: var(--c-ink-muted);
    }

    .map__state {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.55em;
        fill: var(--c-ink);
        fill-opacity: 0.38;
    }

    .map__state--small {
        font-size: 12px;
        letter-spacing: 0.4em;
    }

    .map__river,
    .map__peak-name,
    .map__town-name {
        paint-order: stroke;
        stroke: #F1ECDE;
        stroke-width: 3px;
        stroke-linejoin: round;
    }

    .map__labels .map__river {
        font-family: var(--f-body);
        font-style: italic;
        font-size: 11px;
        letter-spacing: 0.02em;
        fill: #4F6B78;
    }

    .map__labels .map__peak-name {
        font-family: var(--f-body);
        font-style: italic;
        font-size: 11.5px;
        fill: var(--c-ink);
    }

    .map__peak-elev {
        font-family: var(--f-sans);
        font-style: normal;
        font-weight: 600;
        font-size: 8.5px;
        letter-spacing: 0.08em;
        fill: var(--c-ink-muted);
    }

    .map__peak {
        fill: var(--c-ink);
    }

    .map__town {
        fill: var(--c-paper);
        stroke: var(--c-ink);
        stroke-width: 1.1;
    }

    .map__town-name {
        font-size: 8.5px;
        font-weight: 600;
        letter-spacing: 0.14em;
        fill: var(--c-ink-soft);
    }

    .map__scale text {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.06em;
        fill: var(--c-ink);
    }

    .map-pin {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 7px;
        color: var(--c-ink);
        text-decoration: none;
        white-space: nowrap;
        transform: translate(-13px, -50%);
    }

    .map-pin:hover {
        opacity: 1;
    }

    .map-pin--left {
        flex-direction: row-reverse;
        transform: translate(calc(-100% + 13px), -50%);
    }

    .map-pin__dot {
        flex: none;
        width: 26px;
        height: 26px;
        padding-top: 2px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--c-blaze);
        color: var(--c-paper);
        font: 600 10.5px / 1 var(--f-sans);
        letter-spacing: 0.04em;
        box-shadow:
            0 0 0 2px var(--c-paper),
            0 0 0 3px rgba(42, 39, 33, 0.6),
            0 3px 8px rgba(42, 39, 33, 0.22);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .map-pin:hover .map-pin__dot,
    .map-pin:focus-visible .map-pin__dot {
        background: var(--c-ink);
        transform: scale(1.08);
    }

    .map-pin__name {
        font-family: var(--f-serif);
        font-weight: 420;
        font-size: clamp(14px, 1.55cqw, 21px);
        line-height: 1;
        text-shadow:
            0 0 2px var(--c-paper),
            0 0 3px var(--c-paper),
            0 0 5px var(--c-paper),
            0 0 8px var(--c-paper);
    }

    .map-pin--stratton  { left: 30.63%; top: 83.69%; }
    .map-pin--okemo     { left: 43.47%; top: 42.66%; }
    .map-pin--bromley   { left: 28.47%; top: 67.46%; }
    .map-pin--round-top { left: 41.30%; top: 23.72%; }
    .map-pin--magic     { left: 40.54%; top: 72.46%; }
    .map-pin--sunapee   { left: 86.88%; top: 55.20%; }

    @container (max-width: 720px) {
        .map__grid,
        .map__state,
        .map__river,
        .map__peak,
        .map__peak-name,
        .map__town,
        .map__town-name {
            display: none;
        }

        .map-pin {
            transform: translate(-10px, -50%);
        }

        .map-pin--left {
            transform: translate(calc(-100% + 10px), -50%);
        }

        .map-pin__dot {
            width: 20px;
            height: 20px;
            font-size: 9px;
        }
    }

    .map-legend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 28px;
        padding: 14px clamp(16px, 2.4vw, 28px);
        border-top: 1px solid var(--c-rule);
        font-size: 10.5px;
        letter-spacing: 0.12em;
        color: var(--c-ink-muted);
    }

    .map-legend__keys {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 22px;
    }

    .map-legend__key {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .map-legend__key svg {
        color: var(--c-ink);
    }

    .map-legend__pin {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--c-blaze);
        box-shadow: 0 0 0 1.5px var(--c-paper), 0 0 0 2.5px rgba(42, 39, 33, 0.6);
    }

    /* The mountains: one article per ski area ---------------------------- */

    .mountain {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 32px clamp(32px, 5vw, 72px);
        padding: clamp(40px, 5vw, 72px) 0;
        border-bottom: 1px solid var(--c-rule);
    }

    .mountain--reverse {
        flex-direction: row-reverse;
    }

    .plan {
        flex: 1.25 1 500px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .plan__sheet {
        position: relative;
        padding: clamp(34px, 3.6vw, 56px) clamp(16px, 2.6vw, 40px);
        color: var(--c-bone);
        box-shadow: 0 22px 44px -26px rgba(29, 28, 26, 0.6);
    }

    /* Relief models vary in height; a shared frame keeps the plans in step. */
    .plan__drawing {
        aspect-ratio: 1200 / 745;
    }

    .plan__drawing img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .plan__caption {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 20px;
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--c-ink-muted);
    }

    .mountain__body {
        flex: 1 1 400px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .mountain__kicker {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        font-size: 12px;
        letter-spacing: 0.2em;
    }

    .mountain__name {
        font-family: var(--f-serif);
        font-weight: 340;
        font-size: clamp(54px, 6vw, 92px);
        line-height: 1;
        letter-spacing: -0.01em;
    }

    .mountain__text {
        font-size: 18px;
        line-height: 1.65;
        color: var(--c-ink-soft);
        text-wrap: pretty;
    }

    .facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--c-rule);
        border-left: 1px solid var(--c-rule);
    }

    .facts__item {
        padding: 10px 12px;
        border-right: 1px solid var(--c-rule);
        border-bottom: 1px solid var(--c-rule);
    }

    .facts dt {
        font-size: 10.5px;
        letter-spacing: 0.14em;
    }

    .facts dd {
        margin-top: 4px;
        font-size: 17px;
        font-weight: 700;
    }

    .highways {
        display: grid;
        gap: 32px;
        padding-top: 40px;
    }

    .highways__item {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .highways__item + .highways__item {
        padding-top: 32px;
        border-top: 1px solid var(--c-rule);
    }

    @media (min-width: 48em) {
        .highways {
            grid-template-columns: 1fr 1fr;
            gap: 0;
        }

        .highways__item {
            padding-right: clamp(28px, 4vw, 56px);
        }

        .highways__item + .highways__item {
            padding-top: 0;
            padding-right: 0;
            padding-left: clamp(28px, 4vw, 56px);
            border-top: 0;
            border-left: 1px solid var(--c-rule);
        }
    }

    .highways__title {
        font-family: var(--f-serif);
        font-weight: 340;
        font-size: clamp(36px, 4vw, 56px);
        line-height: 1;
        white-space: nowrap;
        font-variant-numeric: lining-nums;
    }

    .highways__text {
        font-size: 18px;
        line-height: 1.6;
        color: var(--c-ink-soft);
    }

    .mountains__sources {
        margin-top: 28px;
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 0.06em;
        color: var(--c-ink-muted);
    }

    /* General store ------------------------------------------------------ */

    /* Small screens: the photo sits across the top and fades into the card.
       The 40% top padding is a share of the card's width, so the text always
       starts in the darker lower part of the photo (which is 60.75% tall). */
    .store-card {
        position: relative;
        overflow: hidden;
        padding: 40% var(--gutter) clamp(56px, 6vw, 72px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        background: var(--c-night);
        color: var(--c-bone);
        text-align: center;
    }

    .store-card > :not(.store-card__figure) {
        position: relative;
    }

    .store-card__figure {
        position: absolute;
        inset: 0;
    }

    .store-card__photo {
        position: absolute;
        inset: 0 0 auto;
        width: 100%;
        height: auto;
        opacity: 0.75;
    }

    .store-card__figure::after {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        aspect-ratio: 1200 / 729;
        background: linear-gradient(to bottom,
            rgba(29, 28, 26, 0.15) 0,
            rgba(29, 28, 26, 0.45) 45%,
            rgba(29, 28, 26, 0.9) 78%,
            var(--c-night) 100%);
    }

    .store-card__caption {
        position: absolute;
        right: 18px;
        bottom: 16px;
        z-index: 1;
        font-size: 10.5px;
        letter-spacing: 0.12em;
        color: var(--c-bone-muted);
    }

    .store-card__place {
        font-size: 12px;
        letter-spacing: 0.22em;
        color: var(--c-brass);
    }

    .store-card__text {
        max-width: 620px;
        font-size: 18px;
        line-height: 1.65;
        color: var(--c-bone-soft);
        text-wrap: pretty;
    }

    @media (min-width: 48em) {
        .store-card {
            min-height: clamp(440px, 42vw, 540px);
            padding: clamp(48px, 5vw, 72px);
            align-items: flex-start;
            justify-content: center;
            text-align: left;
        }

        .store-card > :not(.store-card__figure) {
            width: min(100%, 440px);
        }

        .store-card .lockup {
            align-items: flex-start;
        }

        .store-card__photo {
            inset: 0 0 0 auto;
            width: 68%;
            height: 100%;
            object-fit: cover;
            object-position: 35% center;
        }

        .store-card__figure::after {
            inset: 0;
            aspect-ratio: auto;
            background: linear-gradient(to right,
                var(--c-night) 32%,
                rgba(29, 28, 26, 0.82) 44%,
                rgba(29, 28, 26, 0.4) 62%,
                rgba(29, 28, 26, 0.12) 100%);
        }
    }

    /* Photos & film ------------------------------------------------------ */

    .archive .section-head__intro {
        font-size: 18px;
    }

    .archive__lead {
        display: grid;
        gap: clamp(36px, 4.4vw, 56px);
    }

    .film {
        display: grid;
        gap: 16px;
    }

    /* Wide screens: the video spans both rows on the left; the section heading
       takes the top right and the film's caption (via subgrid) the bottom right. */
    @media (min-width: 60em) {
        .archive__lead {
            grid-template-columns: minmax(0, 720px) minmax(0, 1fr);
            grid-template-rows: auto 1fr;
            gap: 32px clamp(32px, 5vw, 72px);
        }

        .archive__lead .section-head {
            position: relative;
            z-index: 1;
            grid-column: 2;
            grid-row: 1;
            flex-direction: column;
            align-items: flex-start;
        }

        .archive__lead .section-head__title,
        .archive__lead .section-head__intro {
            flex: none;
        }

        .archive__lead .heading--xl {
            font-size: clamp(48px, 4.6vw, 72px);
        }

        .film {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
            gap: normal;
        }

        .film__screen {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: start;
        }

        .film__caption {
            grid-column: 2;
            grid-row: 2;
            align-self: end;
        }
    }

    .film__screen {
        aspect-ratio: 4 / 3;
        border: 1px solid rgba(230, 223, 208, 0.18);
        background: var(--c-night-deep);
    }

    .film__video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .film__caption {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .film__label,
    .film__meta {
        font-size: 11.5px;
        letter-spacing: 0.14em;
    }

    .film__label {
        color: var(--c-brass);
    }

    .film__meta {
        color: var(--c-bone-muted);
    }

    .film__title {
        font-family: var(--f-serif);
        font-weight: 340;
        font-size: clamp(30px, 3vw, 42px);
        line-height: 1.1;
        color: var(--c-moon);
    }

    .film__desc {
        max-width: 440px;
        font-style: italic;
        font-size: 18px;
        line-height: 1.5;
        color: var(--c-bone-soft);
    }

    .prints {
        margin: clamp(48px, 6vw, 80px) 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 32px 20px;
    }

    /* Column widths are each photo's width ÷ height, so all three print at
       the same height with nothing cropped. Update them if the photos change. */
    @media (min-width: 48em) {
        .prints {
            grid-template-columns: minmax(0, 1.597fr) minmax(0, 0.684fr) minmax(0, 1.309fr);
        }
    }

    .print {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .print__photo {
        width: 100%;
        height: auto;
        border: 1px solid rgba(230, 223, 208, 0.18);
    }

    .print__caption {
        font-size: 10.5px;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: var(--c-bone-muted);
    }

    .archive__wanted {
        max-width: 760px;
        margin-top: clamp(36px, 4vw, 52px);
        padding-top: 20px;
        border-top: 1px solid rgba(230, 223, 208, 0.14);
        font-size: 16px;
        line-height: 1.6;
        color: var(--c-bone-muted);
    }

    .archive__wanted .caps {
        margin-right: 10px;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: var(--c-brass);
    }

    /* Alaska & after (closing) ------------------------------------------ */

    .coda {
        max-width: 660px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .coda__title {
        font-family: var(--f-serif);
        font-weight: 400;
        font-size: clamp(34px, 4vw, 56px);
        line-height: 1.1;
    }

    .coda__text {
        font-size: 19px;
        line-height: 1.65;
        color: var(--c-ink-soft);
        text-wrap: pretty;
    }

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

    .site-footer {
        position: relative;
        background: linear-gradient(to top,
            #27323A 0,
            #27323A calc(22.6 * var(--u)),
            #1B2228 calc(29.7 * var(--u)),
            #12161A calc(38.2 * var(--u)),
            #0C0E10 calc(50.9 * var(--u)),
            var(--c-night) 100%);
        color: var(--c-moon);
    }

    .site-footer__top {
        position: relative;
        z-index: 7;
        padding: clamp(56px, 7vw, 104px) var(--gutter) 0;
    }

    .site-footer__grid {
        max-width: var(--content-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
        gap: 48px clamp(32px, 5vw, 72px);
        align-items: start;
    }

    .footer-mark {
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .footer-mark__name {
        margin-top: 6px;
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 19px;
        line-height: 1;
        letter-spacing: 0.34em;
        text-indent: 0.34em;
        text-transform: uppercase;
    }

    .footer-mark__rule {
        width: 100%;
        height: 1px;
        background: rgba(241, 235, 220, 0.3);
    }

    .footer-mark__motto {
        font-family: var(--f-sans);
        font-weight: 600;
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.4em;
        text-indent: 0.4em;
        text-transform: uppercase;
        color: rgba(241, 235, 220, 0.72);
    }

    .footer-heading {
        margin-bottom: 14px;
        font-family: var(--f-sans);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.34em;
        text-transform: uppercase;
        color: var(--c-brass);
    }

    .footer-nav__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .footer-nav__link,
    .site-footer__top-link {
        display: inline-block;
        text-decoration: none;
        transition: color 0.25s ease;
    }

    .footer-nav__link {
        padding: 7px 0;
        font-family: var(--f-sans);
        font-size: 13px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(241, 235, 220, 0.72);
    }

    .footer-nav__link:hover,
    .site-footer__top-link:hover {
        opacity: 1;
        color: var(--c-paper-bright);
    }

    .footer-about__text {
        font-size: 16px;
        line-height: 1.8;
        color: rgba(241, 235, 220, 0.72);
    }

    .footer-about__text a {
        color: var(--c-moon);
    }

    .site-footer__scene {
        position: relative;
        height: calc(59 * var(--u));
        min-height: 440px;
        margin-top: clamp(28px, 3.4vw, 56px);
    }

    .site-footer__stars {
        height: calc(38 * var(--u));
    }

    .site-footer__glow {
        position: absolute;
        left: 50%;
        bottom: calc(10.6 * var(--u));
        width: calc(68 * var(--u));
        height: calc(24 * var(--u));
        margin-left: calc(-34 * var(--u));
        background: radial-gradient(closest-side,
            rgba(96, 116, 128, 0.42) 0,
            rgba(96, 116, 128, 0.2) 40%,
            rgba(96, 116, 128, 0) 100%);
    }

    /* The night ridges run 15.5 units deeper than the dawn ones to fill the ground below. */
    .site-footer__ridge {
        z-index: 1;
    }

    .site-footer__ridge--far {
        bottom: calc(4.83 * var(--u));
    }

    .site-footer__ridge--mid {
        bottom: calc(2.96 * var(--u));
    }

    .site-footer__ridge--near {
        bottom: calc(0.83 * var(--u));
    }

    .site-footer__dedication {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(38.4 * var(--u));
        z-index: 2;
        padding: 0 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(12px, 1.4vw, 20px);
        text-align: center;
    }

    .site-footer__dedication p {
        font-family: var(--f-serif);
        font-style: italic;
        font-weight: 340;
        font-size: clamp(22px, 2.9vw, 44px);
        line-height: 1.45;
        color: var(--c-paper-bright);
    }

    .site-footer__mountain {
        bottom: calc(-4.02 * var(--u));
        z-index: 3;
    }

    .site-footer__foothill {
        bottom: calc(-5.2 * var(--u));
        z-index: 3;
    }

    .site-footer__haze {
        position: absolute;
        inset: auto 0 0;
        z-index: 4;
        height: calc(13 * var(--u));
        background: linear-gradient(to top, rgba(58, 69, 73, 0.5), rgba(58, 69, 73, 0));
    }

    .site-footer__mist {
        --mist-offset: calc(-29 * var(--u));
        --mist-duration: 55s;
        bottom: calc(2.2 * var(--u));
        z-index: 4;
        opacity: 0.75;
    }

    .site-footer__mist::before,
    .site-footer__mist::after {
        background-image: url("../img/scene/mist-night.svg");
    }

    .site-footer__forest {
        bottom: calc(-5.2 * var(--u));
        z-index: 5;
    }

    .site-footer__bar {
        position: absolute;
        inset: auto 0 0;
        z-index: 7;
        padding: clamp(24px, 3vw, 44px) var(--gutter) 0;
        /* #101315 must match the fill in forest-front-night.svg */
        background: linear-gradient(to top,
            #101315 0,
            #101315 30%,
            rgba(16, 19, 21, 0.86) 48%,
            rgba(16, 19, 21, 0.58) 66%,
            rgba(16, 19, 21, 0.26) 84%,
            rgba(16, 19, 21, 0.07) 95%,
            rgba(16, 19, 21, 0) 100%);
    }

    .site-footer__bar-inner {
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 12px 0 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 4px 32px;
        border-top: 1px solid rgba(241, 235, 220, 0.18);
        font-size: 11px;
        letter-spacing: 0.24em;
        color: rgba(241, 235, 220, 0.78);
    }

    .site-footer__top-link {
        padding: 12px 0;
    }

    /* 404 ----------------------------------------------------------------- */

    .not-found {
        min-height: calc(100vh - 68px);
        display: grid;
        place-items: center;
    }

    .not-found__inner {
        max-width: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        text-align: center;
    }

    .not-found .lockup__gothic {
        font-size: clamp(64px, 11vw, 150px);
    }

    .not-found__text {
        max-width: 34em;
        font-size: 19px;
        line-height: 1.6;
        color: var(--c-bone-soft);
        text-wrap: balance;
    }
}


/* ==========================================================================
    Motion
    Everything here is decorative and respects prefers-reduced-motion.

    Scene parallax: the hero and the footer landscape each carry a single
    --progress value from 0 to 1. Native scroll-driven animations drive it
    where supported, and main.js drives it everywhere else. Each layer
    derives its movement from that one number, scaled by its depth: the
    farther away a layer is, the further it travels.
========================================================================== */

@property --progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@layer motion {
    @keyframes scene-progress {
        from { --progress: 0; }
        to   { --progress: 1; }
    }

    @keyframes mist-drift {
        to {
            transform: translate3d(calc(-100 * var(--u)), 0, 0);
        }
    }

    @keyframes mist-drift-back {
        from { transform: translate3d(calc(-64 * var(--u)), 0, 0) scaleX(-1); }
        to   { transform: scaleX(-1); }
    }

    @keyframes mist-swell {
        from { opacity: 0.2; }
        to   { opacity: 0.95; }
    }

    @keyframes mist-bob {
        from { translate: 0 calc(-0.7 * var(--u)); }
        to   { translate: 0 calc(0.7 * var(--u)); }
    }

    @keyframes parallax-b {
        from { transform: translate3d(0, -70px, 0); }
        to   { transform: translate3d(0, 70px, 0); }
    }

    @keyframes reveal-rise {
        from {
            opacity: 0;
            transform: translate3d(0, 28px, 0);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes draw-line {
        from { stroke-dashoffset: 1; }
        to   { stroke-dashoffset: 0; }
    }

    @media (prefers-reduced-motion: no-preference) {
        .scene__mist::before {
            animation: mist-drift var(--mist-duration, 70s) linear infinite;
        }

        .scene__mist::after {
            animation:
                mist-drift-back calc(var(--mist-duration, 70s) * 0.8) linear infinite,
                mist-swell 9s ease-in-out infinite alternate,
                mist-bob 13s ease-in-out infinite alternate;
        }

        /* ------------------------------------------------------------------
            Hero, at dawn. --progress runs 0 → 1 as the hero scrolls away.
            Distant layers sink fastest, the name sets behind the peak,
            the mountain leans in, and the front row of trees holds still.
        ------------------------------------------------------------------ */

        .hero {
            --progress: 0;
            --depth: 1.5;
        }

        .hero__stars,
        .hero__ridge,
        .hero__title,
        .hero__foothill,
        .hero__forest--back {
            will-change: translate;
        }

        .hero__mountain {
            will-change: translate, scale;
        }

        /*
            Each layer eases toward its scroll position rather than jumping
            with every wheel step. Deeper layers trail further behind (--lag),
            which reads as depth even when the page is barely moving.
        */
        .hero__stars,
        .hero__glow,
        .hero__ridge,
        .hero__mist-far,
        .hero__title,
        .hero__mountain,
        .hero__foothill,
        .hero__mist-near,
        .hero__forest--back,
        .hero__intro,
        .hero__actions,
        .site-footer__stars,
        .site-footer__glow,
        .site-footer__ridge,
        .site-footer__dedication,
        .site-footer__mountain,
        .site-footer__foothill,
        .site-footer__mist,
        .site-footer__forest--back {
            transition-property: translate, scale, opacity;
            transition-duration: var(--lag, 0.6s);
            transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        }

        .hero__stars,
        .hero__glow,
        .site-footer__stars,
        .site-footer__glow {
            --lag: 1.2s;
        }

        .hero__ridge,
        .hero__mist-far,
        .site-footer__ridge {
            --lag: 1s;
        }

        .hero__title,
        .site-footer__dedication {
            --lag: 0.85s;
        }

        .hero__mountain,
        .site-footer__mountain {
            --lag: 0.75s;
        }

        .hero__mist-near,
        .hero__forest--back,
        .hero__actions,
        .site-footer__mist,
        .site-footer__forest--back {
            --lag: 0.5s;
        }

        .hero__stars {
            translate: 0 calc(var(--progress) * var(--depth) * 26 * var(--u));
        }

        .hero__glow {
            translate: 0 calc(var(--progress) * var(--depth) * 20 * var(--u));
            opacity: calc(1 - var(--progress) * 0.6);
        }

        .hero__ridge--far {
            translate: 0 calc(var(--progress) * var(--depth) * 18 * var(--u));
        }

        .hero__ridge--mid {
            translate: 0 calc(var(--progress) * var(--depth) * 16.5 * var(--u));
        }

        .hero__ridge--near {
            translate: 0 calc(var(--progress) * var(--depth) * 15 * var(--u));
        }

        .hero__mist-far {
            translate: 0 calc(var(--progress) * var(--depth) * 15 * var(--u));
        }

        .hero__title {
            translate: 0 calc(var(--progress) * var(--depth) * 13 * var(--u));
            opacity: calc(1 - clamp(0, (var(--progress) - 0.2) / 0.6, 1) * 0.9);
        }

        .hero__mountain {
            translate: 0 calc(var(--progress) * var(--depth) * 6 * var(--u));
            scale: calc(1 + var(--progress) * 0.06);
            transform-origin: 50% 100%;
        }

        .hero__foothill {
            translate: 0 calc(var(--progress) * var(--depth) * 3.5 * var(--u));
        }

        .hero__mist-near {
            translate: 0 calc(var(--progress) * var(--depth) * 2.5 * var(--u));
        }

        .hero__forest--back {
            translate: 0 calc(var(--progress) * var(--depth) * 1 * var(--u));
        }

        .hero__intro {
            translate: 0 calc(var(--progress) * var(--depth) * -14 * var(--u));
            opacity: calc(1 - clamp(0, var(--progress) / 0.45, 1));
        }

        .hero__actions {
            translate: 0 calc(var(--progress) * var(--depth) * -4 * var(--u));
            opacity: calc(1 - clamp(0, var(--progress) / 0.3, 1));
        }

        /* ------------------------------------------------------------------
            Footer, at night. --progress runs 0 → 1 as the scene arrives,
            and 1 is the composed resting state at the foot of the page.
            The far layers settle into place and the dedication rises
            from behind the mountain like the moon.
        ------------------------------------------------------------------ */

        /*
            No --depth boost here: the night ridges run 15.5u deeper than the
            dawn ones, which only just hides their lower edge over 14u of travel.
        */
        .site-footer__scene {
            --progress: 1;
        }

        .site-footer__stars,
        .site-footer__ridge,
        .site-footer__dedication,
        .site-footer__mountain,
        .site-footer__foothill,
        .site-footer__forest--back {
            will-change: translate;
        }

        .site-footer__stars {
            translate: 0 calc((1 - var(--progress)) * -20 * var(--u));
        }

        .site-footer__glow {
            translate: 0 calc((1 - var(--progress)) * -12 * var(--u));
            opacity: calc(1 - (1 - var(--progress)) * 0.7);
        }

        .site-footer__ridge--far {
            translate: 0 calc((1 - var(--progress)) * -14 * var(--u));
        }

        .site-footer__ridge--mid {
            translate: 0 calc((1 - var(--progress)) * -12 * var(--u));
        }

        .site-footer__ridge--near {
            translate: 0 calc((1 - var(--progress)) * -10 * var(--u));
        }

        .site-footer__dedication {
            translate: 0 calc((1 - var(--progress)) * 10 * var(--u));
            opacity: clamp(0, (var(--progress) - 0.35) / 0.55, 1);
        }

        .site-footer__mountain {
            translate: 0 calc((1 - var(--progress)) * -5 * var(--u));
        }

        .site-footer__foothill {
            translate: 0 calc((1 - var(--progress)) * -3 * var(--u));
        }

        .site-footer__mist {
            translate: 0 calc((1 - var(--progress)) * -2 * var(--u));
        }

        .site-footer__forest--back {
            translate: 0 calc((1 - var(--progress)) * -1 * var(--u));
        }

        @supports (animation-timeline: view()) {
            .hero {
                animation: scene-progress linear both;
                animation-timeline: view();
                animation-range: exit 0% exit 100%;
            }

            .site-footer__scene {
                animation: scene-progress linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 100%;
            }

            .parallax--b {
                animation: parallax-b linear both;
                animation-timeline: view();
            }

            .reveal {
                animation: reveal-rise linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 80%;
            }

            .draw {
                animation: draw-line linear both;
                animation-timeline: view();
                animation-range: cover 15% cover 55%;
            }
        }

        /* Fallback reveal, toggled by main.js */
        .reveal--pending {
            opacity: 0;
            transform: translate3d(0, 28px, 0);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .reveal--pending.reveal--visible {
            opacity: 1;
            transform: none;
        }
    }
}


/* ==========================================================================
    Utilities
========================================================================== */

@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}


/* ==========================================================================
    Print
========================================================================== */

@media print {
    body::after,
    .skip-link,
    .site-header,
    .scene__mist,
    .scene__stars {
        display: none !important;
    }

    .reveal,
    .reveal--pending {
        opacity: 1 !important;
        transform: none !important;
    }
}