:root {
    --ink: #252622;
    --ink-soft: #363731;
    --paper: #f3eee2;
    --paper-deep: #e8e0d2;
    --muted: #787267;
    --accent: #b65f46;
    --accent-soft: #cf8168;
    --start-pin: #687a68;
    --line: rgba(37, 38, 34, 0.17);
    --header-height: 96px;
    --footer-height: 56px;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--serif);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 9999;
    padding: .75rem 1rem;
    background: var(--paper);
    font: 700 .75rem var(--sans);
    text-transform: uppercase;
}

.skip-link:focus {
    top: 1rem;
}

.site-header {
    position: relative;
    z-index: 1000;
    height: var(--header-height);
    padding: 0 clamp(1.25rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f6f0e5;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--sans);
}

.brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    gap: 4px
}

.brand-name {

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.3vw, 32px);
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1
}

.brand-tagline {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    opacity: .65
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.site-nav a {
    position: relative;
    padding: .6rem 0;
    color: #aaa79f;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-decoration: none;
    text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: #fff;
}

.site-nav a[aria-current="page"]::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
}

.site-footer {
    min-height: var(--footer-height);
    padding: 12px 4.5vw;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--muted);
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.site-footer p {
    margin: 0;
}

.footer-brand {
    color: #f4efe5;
    font-weight: 700;
    letter-spacing: .18em;
}

.footer-mark {
    text-align: right;
}

/* Map */
.map-main {
    position: relative;
    height: calc(100vh - var(--header-height) - var(--footer-height));
    min-height: 610px;
    overflow: hidden;
    background: #c4c0b5;
}

.map-canvas {
    width: 100%;
    height: 100%;
    background: #c4c0b5;
}

.leaflet-container .leaflet-tile {
    max-width: none !important;
    max-height: none !important;
}

.map-canvas .leaflet-tile-pane {
    filter:
        grayscale(12%) sepia(8%) saturate(82%) contrast(90%) brightness(104%);
}

.map-canvas .leaflet-control-attribution {
    color: rgba(45, 45, 41, .62);
    background: rgba(242, 237, 225, .74);
    font: 9px var(--sans);
}

.map-canvas .leaflet-control-attribution a {
    color: rgba(45, 45, 41, .78);
}

.map-canvas .leaflet-bar {
    border: 0;
    box-shadow: none;
}

.map-canvas .leaflet-bar a {
    color: #eee9df;
    border: 0;
    background: rgba(37, 38, 34, .74);
}

.map-canvas .leaflet-bar a:hover {
    background: var(--ink);
}

/* --------------------------------------------------------------------------
   Map markers
   --------------------------------------------------------------------------
   Default state:
   - Start and destination pins use the same 18px teardrop language.
   - The start pin is a muted green.
   - Destination pins use the Motoletters terracotta palette.
   - The newest destination keeps the gentle two-stage pulse.

   Active route state:
   JavaScript adds `.is-route-active` while the newest destination/popup is
   being hovered. Both endpoint pins then scale from 18px to 25px.
   -------------------------------------------------------------------------- */

.map-pin {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
}

/* Destination pin: 18px teardrop at rest. */
.map-pin i {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;

    width: 18px;
    height: 18px;

    background: #9b6e5f;
    border: 2px solid rgba(249, 242, 230, .94);
    border-radius: 50% 50% 50% 0;
    box-shadow: -2px 2px 6px rgba(37, 38, 34, .28);

    transform: rotate(-45deg);
    transition:
        width .2s ease,
        height .2s ease,
        top .2s ease,
        left .2s ease,
        box-shadow .2s ease;
}

/* Cream centre shared by destination pins. */
.map-pin i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;

    background: rgba(249, 242, 230, .96);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* The latest letter uses the stronger Motoletters terracotta. */
.map-pin.is-newest i {
    background: var(--accent);
    box-shadow: -2px 2px 7px rgba(76, 43, 32, .38);
}

/* Hover/active journey state: destination grows to 25px. */
.map-pin.is-route-active i {
    top: 2.5px;
    left: 2.5px;

    width: 25px;
    height: 25px;

    box-shadow: -2px 2px 9px rgba(76, 43, 32, .42);
}

/* Latest-letter pulse. The second ring starts halfway through the cycle. */
.map-pin.is-newest::before,
.map-pin.is-newest::after {
    content: '';
    position: absolute;
    inset: 2px;

    border: 1.1px solid rgba(182, 95, 70, .55);
    border-radius: 50%;

    animation: pin-pulse 3.6s ease-out infinite;
    pointer-events: none;
}

.map-pin.is-newest::after {
    animation-delay: 1.8s;
}

@keyframes pin-pulse {
    0% {
        transform: scale(.45);
        opacity: .75;
    }

    75%,
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Start pin: same visual language, muted green, 18px at rest. */
.start-marker {
    position: relative;
    display: block;

    width: 18px;
    height: 18px;

    background: var(--start-pin);
    border: 2px solid rgba(249, 242, 230, .94);
    border-radius: 50% 50% 50% 0;
    box-shadow: -2px 2px 5px rgba(37, 38, 34, .25);

    transform: rotate(-45deg);
    transition:
        width .2s ease,
        height .2s ease,
        box-shadow .2s ease;
}

/* Cream centre shared by the start pin. */
.start-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;

    background: rgba(249, 242, 230, .96);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Hover/active journey state: start pin grows to 25px. */
.start-marker.is-route-active {
    width: 25px;
    height: 25px;
    box-shadow: -2px 2px 8px rgba(37, 38, 34, .32);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .map-pin i,
    .start-marker {
        transition: none;
    }

    .map-pin.is-newest::before,
    .map-pin.is-newest::after {
        animation: none;
        opacity: .45;
    }
}


/* --------------------------------------------------------------------------
   Leaflet popup
   -------------------------------------------------------------------------- */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    color: var(--paper);
    background: rgba(41, 42, 39, .94);
    border-radius: 0;
    box-shadow: none;
}

.leaflet-popup-content {
    display: grid;
    gap: .35rem;
    margin: 1rem 1.15rem;
    font-family: var(--serif);
}

.leaflet-popup-content p,
.leaflet-popup-content strong,
.leaflet-popup-content span {
    margin: 0;
}

.leaflet-popup-content strong {
    font-size: 1rem;
    font-weight: 400;
}

.leaflet-popup-content span {
    color: #bdb9b0;
    font: .65rem var(--sans);
}

.leaflet-popup-content a {
    margin-top: .35rem;
    color: #d98a70;
    font: 700 .65rem var(--sans);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.popup-kicker {
    color: #c57963;
    font: 700 .58rem var(--sans);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.newest-card {
    position: absolute;
    z-index: 500;
    right: clamp(1.25rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 5vw, 4.5rem);
    width: min(408px, calc(100vw - 2.5rem));
    padding: 2rem 2.15rem 1.9rem;
    color: #f4eee4;
    background: rgba(31, 32, 29, .88);
    border-top: 2px solid var(--accent);
    box-shadow: 0 20px 55px rgba(37, 31, 27, .2);
    backdrop-filter: blur(7px);
}

.eyebrow {
    margin: 0 0 1.05rem;
    color: var(--accent);
    font: 700 .62rem var(--sans);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.newest-card h1 {
    margin: 0 0 .8rem;
    font-size: clamp(2rem, 3vw, 2.55rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.018em;
}

.card-dateline {
    margin: 0;
    color: #aaa69d;
    font: .61rem var(--sans);
    letter-spacing: .075em;
    text-transform: uppercase;
}

.card-excerpt {
    margin: 1.35rem 0 1.45rem;
    color: #d4cec3;
    font-size: 1rem;
    line-height: 1.62;
}

.card-details {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.card-details div {
    display: grid;
    gap: .25rem;
}

.card-details dt {
    color: #8f8c85;
    font: .58rem var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.card-details dd {
    margin: 0;
    color: #d8d3c9;
    font: .7rem var(--sans);
}

.text-link {
    color: var(--accent-soft);
    font: 700 .65rem var(--sans);
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.text-link:hover {
    color: #fff;
}

.map-credit {
    position: absolute;
    z-index: 400;
    left: 4rem;
    bottom: 2rem;
    margin: 0;
    background: rgba(243, 239, 229, .88);
    padding: 10px 13px;
    color: var(--ink);
    font: italic .8rem var(--serif);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Archive */
.letters-layout {
    display: grid;
    grid-template-columns: minmax(230px, 20vw) minmax(0, 1fr);
    align-items: start;
    max-width: 1500px;
    margin: 0 auto;
}

.letters-sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: 5.5rem 2rem 4rem clamp(1.5rem, 3vw, 3rem);
    border-right: 1px solid var(--line);
    background: rgba(232, 224, 210, .3);
}

.archive-toggle {
    display: none;
}

.archive-heading {
    margin: 0 0 3rem;
    font: 700 .64rem var(--sans);
    letter-spacing: .26em;
    text-transform: uppercase;
}

.archive-year+.archive-year {
    margin-top: 2.5rem;
}

.archive-year h2 {
    margin: 0 0 1.1rem;
    color: var(--accent);
    font: 700 .62rem var(--sans);
    letter-spacing: .18em;
}

.archive-year a {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .65rem;
    margin-left: -.85rem;
    padding: .9rem 0 .9rem .85rem;
    border-top: 1px solid var(--line);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}

.archive-year a::before {
    content: '';
    position: absolute;
    top: .45rem;
    bottom: .45rem;
    left: 0;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.archive-year a:hover,
.archive-year a:focus-visible,
.archive-year a[aria-current="location"] {
    background: rgba(182, 95, 70, .045);
    outline: 0;
}

.archive-year a:hover::before,
.archive-year a:focus-visible::before,
.archive-year a[aria-current="location"]::before {
    transform: scaleY(1);
}

.archive-year a:hover strong,
.archive-year a:focus-visible strong,
.archive-year a[aria-current="location"] strong {
    color: var(--accent);
}

.archive-number {
    padding-top: .15rem;
    color: var(--muted);
    font: .6rem var(--sans);
}

.archive-entry {
    display: grid;
    gap: .3rem;
}

.archive-entry strong {
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.25;
    transition: color .2s;
}

.archive-entry time {
    color: var(--muted);
    font: .57rem var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.letters-reading {
    width: min(100%, 920px);
    padding: 0 clamp(2rem, 7vw, 7rem) 8rem;
}

.archive-intro {
    padding: clamp(5.5rem, 10vw, 9rem) 0 clamp(6rem, 12vw, 11rem);
}

.archive-intro h1 {
    max-width: 700px;
    margin: 0 0 2rem;
    font-size: clamp(2.9rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
}

.archive-intro>p:last-child {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.letter-article {
    scroll-margin-top: 2rem;
    padding: 0 0 clamp(7rem, 14vw, 12rem);
}

.letter-article+.letter-article {
    padding-top: clamp(7rem, 14vw, 12rem);
    border-top: 1px solid var(--line);
}

.letter-header h1 {
    max-width: 760px;
    margin: 0 0 1.5rem;
    font-size: clamp(2.8rem, 6vw, 5.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.035em;
}

.letter-deck {
    max-width: 660px;
    margin: 0 0 2.5rem;
    color: #58574f;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-style: italic;
    line-height: 1.55;
}

.letter-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 0 0 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.letter-meta div {
    display: grid;
    gap: .4rem;
}

.letter-meta dt {
    color: var(--muted);
    font: 700 .56rem var(--sans);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.letter-meta dd {
    margin: 0;
    font: .68rem var(--sans);
    line-height: 1.35;
}

.letter-cover {
    margin: 0 calc(clamp(2rem, 7vw, 7rem) * -.5) 4.5rem;
}

.letter-cover img {
    width: 100%;
    aspect-ratio: 5/3;
    object-fit: cover;
}

.story-body {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.12rem;
    line-height: 1.85;
}

.story-body p {
    margin: 0 0 1.7rem;
}

.story-body .story-lede {
    font-size: 1.35rem;
    line-height: 1.65;
}

.story-body h2 {
    margin: 4rem 0 1.3rem;
    font-size: 2rem;
    font-weight: 400;
}

.story-body blockquote {
    margin: 3.5rem -2rem;
    padding: 1.5rem 2rem;
    color: var(--accent);
    border-left: 2px solid var(--accent);
    font-size: 1.55rem;
    font-style: italic;
    line-height: 1.55;
}

.story-body ul {
    margin: 1.5rem 0 2rem;
    padding-left: 1.4rem;
}

.story-body li {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.story-body h3 {
    margin: 1rem 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 400;
    font-style: italic;
}

.section-meta {
    color: var(--muted);
    font: .65rem var(--sans);
    line-height: 1.7;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.story-video {
    width: min(900px, calc(100vw - 4rem));
    max-width: calc(100vw - 2rem);
    margin: 4rem 0;
}


.story-video .video-embed {
    margin-top: 0;
}

.video-label {
    margin: 0 0 .8rem;

    color: var(--accent);

    font: 700 .58rem var(--sans);
    letter-spacing: .16em;

    text-transform: uppercase;
}

.story-figure {
    margin: 4rem -4rem;
}

.story-figure img {
    width: 100%;
}

.story-figure figcaption {
    margin-top: .75rem;
    color: var(--muted);
    font: .6rem var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.story-cover {
    width: min(900px, calc(100vw - 4rem));
    margin: 0 0 4rem;
}

.story-cover img {
    display: block;
    width: 100%;
    height: auto;
}

.story-closing {
    padding-top: 2rem;
}

.video-embed {
    position: relative;
    margin-top: 4rem;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: var(--ink);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 820px) {
    :root {
        --header-height: 68px;
    }

    .site-header {
        position: relative;
        z-index: 1000;
        height: var(--header-height);
        padding: 0 clamp(1.25rem, 4vw, 4rem);

        display: flex;
        align-items: center;
        justify-content: space-between;

        color: #f6f0e5;
        background: var(--ink);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;

        text-decoration: none;
    }

    .brand-name {
        color: #f6f0e5;

        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 400;

        letter-spacing: .12em;
        line-height: 1;
        text-transform: uppercase;
    }

    .brand-tagline {
        color: #9f9b92;

        font-family: var(--serif);
        font-size: .68rem;
        font-style: italic;

        letter-spacing: .02em;
    }

    .site-nav {
        gap: 1.5rem;
    }

    .map-main {
        min-height: 650px;
    }

    .newest-card {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        padding: 1.4rem 1.5rem;
    }

    .map-credit {
        display: none;
    }

    .card-excerpt {
        margin-block: 1rem;
    }

    .letters-layout {
        display: block;
    }

    .letters-sidebar {
        position: sticky;
        top: 0;
        z-index: 600;
        min-height: 0;
        padding: 0;
        border: 0;
        background: var(--paper);
        box-shadow: 0 1px 0 var(--line);
    }

    .archive-toggle {
        width: 100%;
        padding: 1rem 1.25rem;
        display: flex;
        justify-content: space-between;
        border: 0;
        color: var(--ink);
        background: transparent;
        font: 700 .62rem var(--sans);
        letter-spacing: .15em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .archive-nav {
        display: none;
        max-height: 62vh;
        padding: .5rem 1.25rem 1.5rem;
        overflow-y: auto;
        border-top: 1px solid var(--line);
        background: var(--paper);
    }

    .archive-nav.is-open {
        display: block;
    }

    .archive-heading {
        display: none;
    }

    .archive-year a {
        grid-template-columns: 2.5rem 1fr;
    }

    .letters-reading {
        width: 100%;
        padding: 0 1.25rem 5rem;
    }

    .archive-intro {
        padding-block: 5rem 7rem;
    }

    .letter-meta {
        grid-template-columns: 1fr 1fr;
    }

    .letter-cover {
        margin: 0 0 3rem;
    }

    .story-body {
        font-size: 1.05rem;
    }

    .story-figure {
        margin: 3rem 0;
    }

    .story-body blockquote {
        margin-inline: 0;
    }

    .site-footer {
        grid-template-columns: 1fr;
        gap: .75rem;
        align-items: start;
    }

    .footer-mark {
        text-align: left;
    }
}

@media (max-width: 440px) {
    .brand-name {
        font-size: .85rem;
    }

    .site-nav a {
        font-size: .64rem;
    }

    .newest-card h1 {
        font-size: 1.65rem;
    }

    .card-excerpt {
        display: none;
    }

    .archive-intro h1,
    .letter-header h1 {
        font-size: 2.75rem;
    }
}