/* ==========================================================================
   FONTS
   ========================================================================== */

/* Self-hosted fonts (latin and latin-ext subsets from Google Fonts, SIL Open Font License).
   Each file downloads only when a page uses characters in its range. */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("../fonts/archivo-normal-700-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo latin is declared in default.hbs so its preload and @font-face share one URL. */

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-normal-400-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-normal-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-normal-500-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-normal-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-italic-400-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/newsreader-italic-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/newsreader-normal-400-600-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/newsreader-normal-400-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

/* Design tokens from the canvas. Change values here, not in component CSS. */

:root {
    --color-bg: #ffffff;
    --color-text: #0a0a0a;
    --color-secondary: #595959;
    --color-hairline: #d4d4d4;
    --color-rule: #0a0a0a;
    --color-soft: #f4f4f2;
    --color-dark: #0a0a0a;
    --color-on-dark: #ffffff;
    --color-on-dark-secondary: #a3a3a3;
    --color-placeholder: #eeeeee;
    --color-river: #9b9b9b;

    --font-headline: var(--gh-font-heading, "Archivo", "Helvetica Neue", Arial, sans-serif);
    --font-headline-weight: 700;
    --font-headline-stretch: 100%;
    --font-headline-tracking: -0.02em;
    --font-body: var(--gh-font-body, "Newsreader", Georgia, "Times New Roman", serif);
    --font-label: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --text-body: 21px;
    --text-body-leading: 1.65;
    --text-label: 12px;
    --text-label-tracking: 0.12em;

    --measure: 660px;
    --wide: 1080px;
    --max: 1312px;
    --margin: 64px;
    --gap: 24px;
    --nav-height: 88px;

    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 32px;
    --space-l: 64px;
    --space-xl: 120px;
}

@media (max-width: 767px) {
    :root {
        --text-body: 19px;
        --margin: 20px;
        --gap: 16px;
        --nav-height: 64px;
        --space-l: 48px;
        --space-xl: 80px;
    }
}

/* Headline font switch (Design panel → Headline font). */
.headline-Serif {
    --font-headline: "Newsreader", Georgia, serif;
    --font-headline-weight: 500;
    --font-headline-tracking: -0.01em;
}

.headline-Condensed {
    --font-headline-stretch: 75%;
    --font-headline-tracking: -0.01em;
}

/* ==========================================================================
   BASE
   ========================================================================== */

/* Reset, typography, layout grid, nav, footer, subscribe, shared pieces. */

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

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--text-body-leading);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, iframe, svg { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: var(--font-headline-weight);
    font-stretch: var(--font-headline-stretch);
    letter-spacing: var(--font-headline-tracking);
    line-height: 1.05;
}

p { margin: 0; }

::selection { background: var(--color-text); color: var(--color-bg); }

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

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--margin);
    z-index: 100;
    padding: 10px 16px;
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-label);
    font-size: var(--text-label);
    text-transform: uppercase;
    letter-spacing: var(--text-label-tracking);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Shared type ---------- */

.label {
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-secondary);
}

.label a { text-decoration: none; }
.label strong, .label .label-strong { color: var(--color-text); font-weight: 500; }

.link-arrow {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-family: var(--font-label);
    font-size: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    text-decoration: none;
}

.standfirst {
    font-size: 1.45em;
    line-height: 1.45;
}

/* ---------- Layout ---------- */

.container {
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--margin));
    margin: 0 auto;
    padding: 0 var(--margin);
}

.site-main { min-height: 60vh; }

/* Content grid: main column, wide, and full bleed. */
.gh-canvas {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--margin), 1fr)
        [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
        [main-start] min(var(--measure), calc(100% - 2 * var(--margin)))
        [main-end] minmax(0, calc((var(--wide) - var(--measure)) / 2))
        [wide-end] minmax(var(--margin), 1fr)
        [full-end];
}
.gh-canvas > * { grid-column: main; }

/* ---------- Nav ---------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-height);
    background: var(--color-bg);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.site-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-logo {
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-decoration: none;
}
.site-logo img { max-height: 32px; width: auto; }

.site-nav-actions,
.site-menu {
    display: flex;
    align-items: center;
    gap: 40px;
}

.site-menu .nav {
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu .nav a,
.nav-subscribe {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-menu .nav a {
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
}
.site-menu .nav a:hover,
.site-menu .nav-current a { border-bottom-color: currentColor; }

.nav-subscribe {
    padding: 13px 20px;
    border: 1px solid currentColor;
}
.nav-subscribe:hover { background: var(--color-text); color: var(--color-bg); }

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 1.5px;
    margin: 0 auto;
    background: currentColor;
    transition: transform 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Over a hero: transparent until scrolled. Templates opt in with the nav-overlay body class.
   Sticky with a negative margin so the hero slides under it and Ghost's announcement bar stays above. */
.nav-overlay .site-nav {
    margin-bottom: calc(-1 * var(--nav-height));
    background: transparent;
    border-bottom-color: transparent;
    color: var(--color-on-dark);
}
.nav-overlay .site-nav.is-solid {
    background: var(--color-bg);
    border-bottom-color: #f0f0f0;
    color: var(--color-text);
}
.nav-overlay .nav-subscribe:hover { background: var(--color-on-dark); color: var(--color-text); }
.nav-overlay .site-nav.is-solid .nav-subscribe:hover { background: var(--color-text); color: var(--color-bg); }

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .site-nav-actions { gap: 16px; }
    .nav-subscribe { padding: 9px 12px; font-size: 11px; }

    .site-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        overflow-y: auto;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 40px var(--margin);
        background: var(--color-bg);
        color: var(--color-text);
    }
    .nav-open { overflow: hidden; }
    .nav-open .site-menu { display: flex; }
    .nav-open .site-nav { background: var(--color-bg); color: var(--color-text); }

    .site-menu .nav { flex-direction: column; gap: 24px; }
    .site-menu .nav a { font-family: var(--font-headline); font-weight: 700; font-size: 32px; letter-spacing: -0.01em; text-transform: none; }
}

/* ---------- Subscribe block ---------- */

.subscribe {
    padding: var(--space-l) 0;
    border-top: 1px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
}

.subscribe-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: center;
}

.subscribe-title { font-size: clamp(36px, 4.4vw, 60px); }
.subscribe-text { margin-top: 16px; color: #3a3a3a; font-size: 20px; }

.subscribe-form .label { display: block; margin-bottom: 8px; }

.subscribe-field {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--color-secondary);
}

.subscribe-field input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--font-body);
    font-size: 21px;
}
.subscribe-field input::placeholder { color: #8a8a8a; }
.subscribe-field input:focus { outline: none; }
.subscribe-field:focus-within { border-bottom-color: var(--color-text); }

.subscribe-field button {
    padding: 12px 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-label);
    font-size: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    cursor: pointer;
}

.subscribe-message { display: none; margin-top: 12px; font-size: 17px; }
.subscribe-form.success .subscribe-message-success,
.subscribe-form.error .subscribe-message-error { display: block; }
.subscribe-form.loading button { opacity: 0.5; }

@media (max-width: 767px) {
    .subscribe-inner { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* ---------- Story card (phase 2 extends this) ---------- */

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m) var(--gap);
}

.story-card a { text-decoration: none; }

.story-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-placeholder);
}
.story-card-image img { width: 100%; height: 100%; object-fit: cover; }

.story-card .label { margin-top: 14px; }
.story-card-title { margin-top: 6px; font-size: 26px; line-height: 1.15; }
.story-card-deck { margin-top: 6px; color: var(--color-secondary); font-size: 17px; line-height: 1.45; }

.story-card a:hover .story-card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 900px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .story-grid { grid-template-columns: 1fr; }
}

.section-label {
    margin-bottom: var(--space-m);
    color: var(--color-text);
    font-weight: 500;
}

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

.site-footer {
    padding: var(--space-l) 0 var(--space-m);
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: var(--space-l);
    padding-bottom: var(--space-l);
    border-bottom: 1px solid #262626;
}

.footer-brand .site-logo { font-size: 32px; }
.footer-tagline { margin-top: 14px; font-style: italic; font-size: 20px; }

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, auto));
    gap: 24px 80px;
}

.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: 12px; }
.footer-links a {
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: var(--space-m);
}
.footer-bottom .label { color: var(--color-on-dark-secondary); }

@media (max-width: 767px) {
    .footer-top { flex-direction: column; gap: var(--space-m); }
    .footer-links { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; }
}

/* ---------- Section heads ---------- */

.section-rule {
    padding-top: 18px;
    border-top: 1px solid var(--color-secondary);
    margin-bottom: var(--space-m);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-secondary);
    margin-bottom: var(--space-m);
}
.section-head .section-label { margin-bottom: 0; }
.section-head a { color: var(--color-text); text-decoration: none; }

/* ---------- Story card sizes ---------- */

.story-grid--two { grid-template-columns: repeat(2, 1fr); }
.story-grid--four { grid-template-columns: repeat(4, 1fr); }
.story-card--tall .story-card-image { aspect-ratio: 3 / 4; }
.story-card--large .story-card-title { font-size: 34px; }

@media (max-width: 900px) {
    .story-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .story-grid--two, .story-grid--four { grid-template-columns: 1fr; }
}

/* ---------- Lead story ---------- */

.story-lead { margin-bottom: var(--space-l); }
.story-lead a { text-decoration: none; }
.story-lead-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-placeholder); }
.story-lead-image img { width: 100%; height: 100%; object-fit: cover; }

.story-lead-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    margin-top: 20px;
}
.story-lead-title { margin-top: 6px; font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.story-lead-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.story-lead-deck { margin: 10px 0 18px; font-size: 22px; font-style: italic; }

@media (max-width: 767px) {
    .story-lead-text { grid-template-columns: 1fr; }
}

/* ---------- Numbered story list ---------- */

.story-list {
    margin: var(--space-l) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: story;
    border-top: 1px solid var(--color-secondary);
}
.story-list:empty { display: none; }

.story-list-item { counter-increment: story; border-bottom: 1px solid #ececec; }
.story-list-item a {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: baseline;
    gap: var(--gap);
    padding: 22px 0;
    text-decoration: none;
}
.story-list-number::before { content: counter(story, decimal-leading-zero); }
.story-list-title { font-family: var(--font-headline); font-weight: var(--font-headline-weight); font-stretch: var(--font-headline-stretch); letter-spacing: var(--font-headline-tracking); font-size: 32px; line-height: 1.1; }
.story-list-item a:hover .story-list-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.story-list-tags { text-align: right; }

@media (max-width: 767px) {
    .story-list-item a { grid-template-columns: 40px 1fr; }
    .story-list-tags { grid-column: 2; text-align: left; }
    .story-list-title { font-size: 24px; }
}

/* ---------- Play circle ---------- */

.play-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
.play-circle::before {
    content: "";
    margin-left: 5px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent currentColor;
}

/* ---------- Video modal ---------- */

.video-open { overflow: hidden; }

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--margin);
    background: rgba(10, 10, 10, 0.94);
}
.video-modal-frame { width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; }
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal-close {
    position: absolute;
    top: 24px;
    right: var(--margin);
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--color-on-dark);
    cursor: pointer;
}

/* ---------- Partner ---------- */

.partner { padding: var(--space-xl) 0; background: var(--color-soft); }
.partner-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); }
.partner-title { margin-top: 16px; font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.partner-text { margin: 24px 0 var(--space-m); max-width: 560px; color: #3a3a3a; font-size: 20px; }
.partner-services ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-secondary); }
.partner-services li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--color-hairline); font-size: 23px; line-height: 1.3; }
.partner-services li + li { margin-top: 0; }

.partner-compact { padding-left: var(--space-m); border-left: 1px solid var(--color-hairline); }
.partner-compact-title { margin-top: 18px; font-size: 40px; }
.partner-compact-text { margin: 16px 0 24px; font-size: 19px; color: #3a3a3a; }

@media (max-width: 767px) {
    .partner-inner { grid-template-columns: 1fr; }
    .partner-compact { padding-left: 0; padding-top: var(--space-m); border-left: 0; border-top: 1px solid var(--color-hairline); }
}

/* ==========================================================================
   CARDS
   ========================================================================== */

/* Post content and every Ghost editor card. Ghost's own card CSS/JS also loads
   (card_assets in package.json); these rules bring the cards onto the RIVERS tokens. */

/* ---------- Body text ---------- */

.gh-content > * + * { margin-top: 1.25em; }

.gh-content > h2,
.gh-content > h3,
.gh-content > h4 { margin-top: 2.2em; }
.gh-content > h2 + *,
.gh-content > h3 + *,
.gh-content > h4 + * { margin-top: 0.7em; }

.gh-content h2 { font-size: 36px; line-height: 1.1; }
.gh-content h3 { font-size: 28px; line-height: 1.15; }
.gh-content h4 { font-size: 22px; line-height: 1.2; }
.gh-content h5,
.gh-content h6 {
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
}

.gh-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.gh-content a:hover { text-decoration-thickness: 2px; }

.gh-content ul,
.gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: 0.4em; }

.gh-content strong { font-weight: 600; }

.gh-content code {
    padding: 0.1em 0.3em;
    background: var(--color-soft);
    font-family: var(--font-label);
    font-size: 0.8em;
}

.gh-content pre {
    overflow-x: auto;
    padding: 20px;
    background: var(--color-soft);
    font-size: 15px;
    line-height: 1.5;
}
.gh-content pre code { padding: 0; background: none; font-size: inherit; }

.gh-content sup { line-height: 0; }

/* Section break: a small centered mark, not a rule. */
.gh-content hr {
    width: 72px;
    height: 4px;
    margin: 2.6em auto;
    border: 0;
    background: radial-gradient(circle, var(--color-text) 1.2px, transparent 1.6px) center / 36px 4px repeat-x;
}

/* Quote: a single line, large and alone. */
.gh-content blockquote:not([class]) {
    grid-column: wide;
    margin: 1.8em 0;
    padding: 0;
    border: 0;
    font-size: clamp(26px, 2.8vw, 38px);
    font-style: italic;
    line-height: 1.25;
    text-align: center;
}

/* Alternate quote (aside). */
.gh-content blockquote.kg-blockquote-alt {
    margin: 1.6em 0;
    padding: 0;
    border: 0;
    color: var(--color-text);
    font-size: 1.35em;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

/* ---------- Card widths ---------- */

.kg-card { margin: 2.2em 0 0; }
.kg-card + * { margin-top: 2.2em; }

.kg-width-wide { grid-column: wide; }
.kg-width-full { grid-column: full; }
.kg-width-full img { width: 100%; }

.kg-card figcaption,
.gh-content figcaption {
    margin-top: 12px;
    color: var(--color-secondary);
    font-size: 16px;
    font-style: italic;
    line-height: 1.45;
}
.kg-width-full figcaption { padding: 0 var(--margin); }
.kg-card figcaption a { color: inherit; }

/* ---------- Image ---------- */

.kg-image-card img { margin: 0 auto; }
.kg-image-card.kg-width-wide img,
.kg-image-card.kg-width-full img { width: 100%; }

/* ---------- Gallery ---------- */

.kg-gallery-card { grid-column: wide; }
.kg-gallery-container { gap: 0; }
.kg-gallery-row:not(:first-of-type) { margin-top: var(--gap); }
.kg-gallery-image:not(:first-of-type) { margin-left: var(--gap); }

/* ---------- Embeds (YouTube, Vimeo, Spotify, Instagram) ---------- */

.kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kg-embed-card > * { width: 100%; }

.kg-embed-card iframe[src*="youtube"],
.kg-embed-card iframe[src*="youtu.be"],
.kg-embed-card iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.kg-embed-card iframe[src*="spotify"] { width: 100%; border: 0; }
.kg-embed-card .instagram-media { margin: 0 auto !important; }

/* ---------- Video ---------- */

.kg-video-card { background: var(--color-dark); }
.kg-video-card video { width: 100%; }
.kg-video-card .kg-video-player { font-family: var(--font-label); }
.kg-video-card .kg-video-large-play-icon {
    width: 76px;
    height: 76px;
    padding: 0;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: transparent;
}
.kg-video-card .kg-video-large-play-icon svg { width: 22px; height: 22px; margin-left: 4px; fill: #fff; }

/* ---------- Audio ---------- */

.kg-audio-card {
    border: 0;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-hairline);
    border-radius: 0;
    box-shadow: none;
}
.kg-audio-title { font-family: var(--font-headline); font-weight: var(--font-headline-weight); }
.kg-audio-player-container { font-family: var(--font-label); }

/* ---------- Bookmark ---------- */

.kg-bookmark-card a.kg-bookmark-container {
    min-height: 140px;
    border: 1px solid var(--color-hairline);
    border-radius: 0;
    box-shadow: none;
    color: var(--color-text);
    text-decoration: none;
}
.kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--color-text); }
.kg-bookmark-content { padding: 20px; }
.kg-bookmark-title { font-family: var(--font-headline); font-weight: var(--font-headline-weight); font-size: 18px; line-height: 1.25; }
.kg-bookmark-description { margin-top: 8px; color: var(--color-secondary) !important; opacity: 1 !important; font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
.kg-bookmark-metadata .kg-bookmark-author, .kg-bookmark-metadata .kg-bookmark-publisher { color: var(--color-secondary); opacity: 1; }
.kg-bookmark-metadata { margin-top: 14px; color: var(--color-secondary); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.kg-bookmark-thumbnail img { border-radius: 0; }

/* ---------- Header ---------- */

.kg-header-card { border-radius: 0; }
.kg-header-card h2.kg-header-card-heading,
.kg-header-card .kg-header-card-header {
    font-family: var(--font-headline);
    font-weight: var(--font-headline-weight);
    letter-spacing: var(--font-headline-tracking);
}
.kg-header-card .kg-header-card-subheading,
.kg-header-card .kg-header-card-subheader { font-family: var(--font-body); }

/* ---------- Buttons (button, header, CTA, signup, product) ---------- */

.kg-btn,
.kg-header-card-button,
.kg-cta-button,
.kg-signup-card-button,
.kg-product-card-button {
    border-radius: 0 !important;
    font-family: var(--font-label) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kg-button-card { margin-top: 2em; }
.kg-btn-accent { background: var(--color-text); color: var(--color-bg); }

/* ---------- Signup ---------- */

.kg-signup-card { border-radius: 0; }
.kg-signup-card.kg-width-full .kg-signup-card-content,
.kg-signup-card.kg-width-wide .kg-signup-card-content { padding-left: var(--margin); padding-right: var(--margin); }
.kg-signup-card.kg-width-full .kg-signup-card-text { max-width: calc(var(--max)); margin: 0 auto; width: 100%; }
.kg-signup-card-heading { font-family: var(--font-headline); font-weight: var(--font-headline-weight); letter-spacing: var(--font-headline-tracking); }
.kg-signup-card-subheading,
.kg-signup-card-disclaimer { font-family: var(--font-body); }
.kg-signup-card-input,
.kg-signup-card-fields { border-radius: 0 !important; font-family: var(--font-body); }

/* ---------- Call to action ---------- */

.kg-cta-card { border-radius: 0; }
.kg-cta-card.kg-cta-bg-none { border: 1px solid var(--color-hairline); }
.kg-cta-text { font-family: var(--font-body); }
.kg-cta-sponsor-label { font-family: var(--font-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; }
.kg-cta-image-container img { border-radius: 0; }

/* ---------- Callout ---------- */

.kg-callout-card { border-radius: 0; }
.kg-callout-text { font-family: var(--font-body); font-size: 19px; line-height: 1.55; }

/* ---------- Toggle ---------- */

.kg-toggle-card {
    border: 0;
    border-top: 1px solid var(--color-hairline);
    border-bottom: 1px solid var(--color-hairline);
    border-radius: 0;
    box-shadow: none;
    padding: 20px 0;
    background: none;
}
.kg-toggle-heading-text { font-family: var(--font-headline); font-weight: var(--font-headline-weight); font-size: 20px; }
.kg-toggle-content { font-family: var(--font-body); }

/* ---------- File and product ---------- */

.kg-file-card-container,
.kg-product-card-container { border-radius: 0; box-shadow: none; border: 1px solid var(--color-hairline); }
.kg-file-card-title,
.kg-product-card-title { font-family: var(--font-headline); font-weight: var(--font-headline-weight); }
.kg-file-card-caption,
.kg-file-card-metadata { font-family: var(--font-label); font-size: 12px; }

/* ---------- Members-only (paywall) ---------- */

.gh-post-upgrade-cta { margin-top: 2.4em; }

.gh-post-upgrade-cta-content {
    padding: var(--space-m) !important;
    border-radius: 0 !important;
    background: var(--color-soft) !important;
    color: var(--color-text) !important;
    text-align: center;
}
.gh-post-upgrade-cta h2 { color: var(--color-text) !important; font-size: 28px; }
.gh-post-upgrade-cta a.gh-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 13px 20px;
    border-radius: 0;
    background: var(--color-text) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.gh-post-upgrade-cta p { margin-top: 12px; color: var(--color-text); }
.gh-post-upgrade-cta p a { color: inherit !important; }

@media (max-width: 767px) {
    .gh-content h2 { font-size: 28px; }
    .gh-content h3 { font-size: 23px; }
    .kg-gallery-row:not(:first-of-type) { margin-top: 8px; }
    .kg-gallery-image:not(:first-of-type) { margin-left: 8px; }
    .kg-width-full figcaption { padding: 0 var(--margin); }
}

/* ==========================================================================
   TEMPLATES
   ========================================================================== */

/* Template-specific layouts. Phase 1: post, page, archive, error. */

/* ---------- Post header ---------- */

.post-header {
    padding-top: var(--space-l);
    padding-bottom: var(--space-m);
}

.post-header-inner { max-width: 900px; }

.post-title {
    margin-top: 18px;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.02;
}

.post-meta { margin-top: 24px; }
.post-meta p + p { margin-top: 4px; }

.post-feature {
    grid-column: wide;
    margin: var(--space-m) 0 0;
}
.post-feature img { width: 100%; }

.post-standfirst {
    grid-column: main;
    margin-top: var(--space-l);
}

@media (min-width: 1000px) {
    .post-standfirst { grid-column: main-start / wide-end; max-width: 920px; margin-left: calc(-1 * (var(--wide) - var(--measure)) / 4); }
}

.post-content { margin-top: var(--space-l); }

/* ---------- Post footer: filed under, credits ---------- */

.post-footer { margin-top: var(--space-xl); }

.post-footer-end {
    width: 72px;
    height: 1px;
    margin-bottom: var(--space-l);
    background: var(--color-text);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid #ececec;
}
.post-tags a {
    color: var(--color-text);
    border-bottom: 1px solid currentColor;
}

.post-credits { padding: var(--space-m) 0; }
.post-credit + .post-credit { margin-top: var(--space-m); }
.post-credit p:not(.label) { margin-top: 4px; font-size: 19px; line-height: 1.55; }
.post-credit a { text-decoration: none; font-weight: 600; }

.post-comments { margin-top: var(--space-l); }

.post-after { margin-top: var(--space-xl); }
.post-after .subscribe { margin-bottom: var(--space-l); }

.keep-reading { padding-bottom: var(--space-xl); }

/* ---------- Page ---------- */

.page-header { padding-top: var(--space-l); padding-bottom: var(--space-m); }
.page-title { font-size: clamp(40px, 6vw, 80px); }
.page-content { padding-bottom: var(--space-xl); }

/* ---------- Archive and error ---------- */

.archive-header {
    padding-top: var(--space-l);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--color-rule);
    margin-bottom: var(--space-l);
}
.archive-title { margin-top: 12px; font-size: clamp(40px, 6vw, 80px); }
.archive-description { margin-top: 16px; max-width: var(--measure); color: var(--color-secondary); }

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-l) 0 var(--space-xl);
    font-family: var(--font-label);
    font-size: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
}
.pagination a { text-decoration: none; border-bottom: 1px solid currentColor; }

.error-page { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.error-code { color: var(--color-secondary); }
.error-message { margin-top: 12px; font-size: clamp(40px, 6vw, 80px); }
.error-page .link-arrow { margin-top: var(--space-m); }

/* ---------- Hero (Home and pillars) ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-on-dark);
}

.hero-media { position: absolute; inset: 0; }
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.45) 100%);
}
.hero-image, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 0.8s ease; }
.hero-video.is-playing { opacity: 1; }

.hero-content { position: relative; z-index: 1; padding-bottom: var(--space-l); }
.hero-label { color: var(--color-on-dark); }

.hero-title { color: var(--color-on-dark); }
.hero-title--centered { max-width: 900px; margin: 18px auto 0; font-size: clamp(56px, 8.5vw, 132px); line-height: 0.98; text-align: center; }
.hero-title--giant { font-size: clamp(64px, 15vw, 240px); line-height: 0.9; letter-spacing: -0.03em; }

.hero:has(.hero-title--centered) { justify-content: center; }
.hero:has(.hero-title--centered) .hero-content { padding-bottom: 0; text-align: center; }

.hero-bar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    min-height: 1px;
    padding-bottom: 40px;
}
.hero:has(.hero-title--centered) .hero-bar { position: absolute; bottom: 0; left: 0; right: 0; }
.hero-reel { border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; cursor: pointer; }

.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    font-size: 24px;
    text-decoration: none;
}

/* ---------- Home ---------- */

.home-intro {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.home-intro-body { max-width: 720px; }
.home-intro-body > p:first-child { font-size: 34px; line-height: 1.3; }
.home-intro-body > p:first-child + p { margin-top: 28px; }
.home-intro-body .kg-button-card { justify-content: flex-start; }
.home-intro-body .kg-btn {
    padding: 0 0 4px;
    height: auto;
    border-bottom: 1px solid currentColor;
    background: none !important;
    color: var(--color-text) !important;
}

.home-pillars { padding-bottom: var(--space-xl); }
.pillar-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: pillar; }
.pillar-tile { counter-increment: pillar; text-decoration: none; }
.pillar-tile-image { aspect-ratio: 13 / 15; overflow: hidden; background: var(--color-placeholder); }
.pillar-tile-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pillar-tile:hover .pillar-tile-image img { transform: scale(1.03); }
.pillar-tile-number { margin-top: 16px; }
.pillar-tile-number::before { content: counter(pillar, decimal-leading-zero); }
.pillar-tile-title { margin-top: 4px; font-size: clamp(32px, 3.3vw, 48px); }
.pillar-tile-deck { margin-top: 10px; color: var(--color-secondary); font-size: 19px; font-style: italic; }

.home-film { padding: var(--space-l) 0; background: var(--color-dark); color: var(--color-on-dark); }
.home-film .label { color: var(--color-on-dark-secondary); }
.film-feature { position: relative; display: block; margin-top: var(--space-m); aspect-ratio: 16 / 8.5; overflow: hidden; text-decoration: none; }
.film-feature img { width: 100%; height: 100%; object-fit: cover; }
.film-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.6)); }
.film-feature-text { position: absolute; left: 48px; bottom: 48px; z-index: 1; max-width: 60%; }
.film-feature-text .label { color: var(--color-on-dark); }
.film-feature-title { margin-top: 8px; font-size: clamp(48px, 6.5vw, 96px); line-height: 0.95; }
.film-feature-deck { margin-top: 12px; font-size: 22px; font-style: italic; line-height: 1.4; }
.film-feature .play-circle { position: absolute; right: 48px; bottom: 48px; z-index: 1; }
.film-feature:hover .play-circle { background: rgba(255, 255, 255, 0.12); }

.home-latest { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.home-rooted {
    display: grid;
    grid-template-columns: 5fr 1fr 5fr;
    align-items: center;
    padding-bottom: var(--space-xl);
}
.home-rooted-image { aspect-ratio: 5 / 6; overflow: hidden; background: var(--color-placeholder); }
.home-rooted-image img { width: 100%; height: 100%; object-fit: cover; }
.home-rooted-text { grid-column: 3; }
.home-rooted-statement { margin: 18px 0 28px; font-size: 30px; line-height: 1.35; }

.home-subscribe { padding: var(--space-xl) var(--margin); }
.home-subscribe .subscribe { padding: 0; border: 0; }
.home-subscribe .subscribe-inner { grid-template-columns: 1fr; justify-items: center; gap: var(--space-m); text-align: center; }
.home-subscribe .subscribe-form { width: min(100%, 560px); text-align: left; }

@media (max-width: 900px) {
    .home-intro, .home-rooted { grid-template-columns: 1fr; gap: var(--space-m); }
    .home-rooted-text { grid-column: 1; }
    .pillar-tiles { grid-template-columns: 1fr; gap: var(--space-l); }
    .film-feature { aspect-ratio: 4 / 5; }
    .film-feature-text { left: 20px; right: 20px; bottom: 24px; max-width: none; }
    .film-feature .play-circle { top: 20px; right: 20px; bottom: auto; width: 56px; height: 56px; }
    .home-intro-body > p:first-child { font-size: 26px; }
    .home-rooted-statement { font-size: 24px; }
}

/* ---------- Pillar ---------- */

.manifesto {
    display: grid;
    grid-template-columns: 5fr 1fr 7fr;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-l);
}
.manifesto-aside { grid-column: 1; align-self: start; }
.manifesto-body { grid-column: 3; min-width: 0; }
.manifesto.has-intro .manifesto-aside { grid-row: 1; }
.manifesto.has-intro .manifesto-intro { grid-row: 1; }
.manifesto.has-intro .manifesto-intro + .manifesto-body { grid-row: 2; }
.manifesto.has-intro .manifesto-intro + .manifesto-body > .kg-card:first-child { margin-top: var(--space-xl); }

/* Left column */
.manifesto-aside > h2 { margin-top: 16px; font-size: clamp(40px, 4vw, 60px); line-height: 1; }
.manifesto-aside > p:not(.label) { margin-top: 12px; }
.manifesto-aside > h2 + p { color: var(--color-secondary); font-size: 22px; font-style: italic; }
.manifesto-aside > h4 {
    margin-top: var(--space-m);
    padding-top: 20px;
    border-top: 1px solid var(--color-secondary);
    font-family: var(--font-label);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
}
.manifesto-aside > h4 + p {
    margin-top: 4px;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
}
.manifesto-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--space-l); align-items: start; }
.manifesto-photos .kg-card { margin: 0; }
.manifesto-photos .kg-card:nth-child(2) { margin-top: 54px; }
.manifesto-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.manifesto-photos figcaption { font-family: var(--font-label); font-size: 12px; font-style: normal; letter-spacing: 0.04em; }

/* Manifesto text */
.manifesto-body > p:first-child { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
.manifesto-body h3 { margin-top: var(--space-l); font-size: clamp(28px, 2.6vw, 38px); }
.manifesto-body h4 {
    margin-top: var(--space-l);
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
}
.manifesto-body h4 + * { margin-top: 0.8em; }
.manifesto-body .kg-button-card { justify-content: flex-start; margin-top: var(--space-m); }
.manifesto-body .kg-btn {
    height: auto;
    padding: 0 0 4px;
    border-bottom: 1px solid currentColor;
    background: none !important;
    color: var(--color-text) !important;
}

/* Breakouts: full-bleed photos, the statement, and numbered lists. The text column is 7 of 13
   parts of the container, so these stretch back across the left 6 parts. */
.pillar { overflow-x: clip; }
/* The text column starts 6/13 of the way across the container, so step back by that much plus
   the container's own left edge to reach the window edge. */
.manifesto-body .kg-width-full,
.manifesto-body .kg-width-wide {
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * (max(var(--margin), (100vw - var(--max)) / 2) + min(100vw - 2 * var(--margin), var(--max)) * 6 / 13));
    margin-top: var(--space-xl);
}
.manifesto-body .kg-width-full + *,
.manifesto-body .kg-width-wide + * { margin-top: var(--space-xl); }
.manifesto-body .kg-width-full img,
.manifesto-body .kg-width-wide img { width: 100%; max-height: 92vh; object-fit: cover; }
.manifesto-body .kg-width-full figcaption,
.manifesto-body .kg-width-wide figcaption {
    padding: 0 var(--margin);
    font-family: var(--font-label);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.04em;
}

.manifesto.has-aside .manifesto-body blockquote:not([class]),
.manifesto.has-aside .manifesto-body > ol,
.manifesto.has-aside .manifesto-body > h4:has(+ ol),
.manifesto.has-aside .manifesto-body > ol + p {
    width: calc(100% * 13 / 7);
    margin-left: calc(-100% * 6 / 7);
}
.manifesto-body blockquote:not([class]) {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-l);
    padding: var(--space-l) 0;
    border-top: 1px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
    font-family: var(--font-headline);
    font-size: clamp(40px, 5.6vw, 84px);
    font-style: normal;
    font-weight: var(--font-headline-weight);
    letter-spacing: var(--font-headline-tracking);
    line-height: 1.02;
    text-align: left;
}
.manifesto-body blockquote:not([class]) em { font-family: var(--font-body); font-weight: 400; letter-spacing: -0.01em; }

/* "We believe": statements as ruled rows. */
.manifesto-body > ul { padding: 0; list-style: none; border-top: 1px solid var(--color-secondary); }
.manifesto-body > ul > li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--color-hairline); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.manifesto-body > ul + p { color: #3a3a3a; font-size: 18px; }

/* "RIVERS exists to": numbered aims in columns. */
.manifesto-body > ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 0; list-style: none; counter-reset: aim; }
.manifesto-body > ol > li {
    counter-increment: aim;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--color-secondary);
    font-family: var(--font-headline);
    font-weight: var(--font-headline-weight);
    letter-spacing: var(--font-headline-tracking);
    font-size: 20px;
    line-height: 1.2;
}
.manifesto-body > ol > li::before {
    content: counter(aim, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
}
.manifesto.has-aside .manifesto-body > ol + p { margin-top: var(--space-m); font-size: 22px; font-style: italic; }

.pillar-stories { padding-bottom: var(--space-xl); }
.pillar-stories-title { padding-top: 24px; border-top: 1px solid var(--color-secondary); margin-bottom: var(--space-m); font-size: clamp(32px, 3.4vw, 48px); }
.pillar-all { margin-top: var(--space-m); }

.pillar-cta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-l);
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
    border-top: 1px solid var(--color-secondary);
}
.pillar-cta .subscribe { padding: 0; border: 0; }
.pillar-cta .subscribe-inner { grid-template-columns: 1fr; gap: var(--space-m); }

.next-pillars { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-secondary); }
.next-pillar { padding: var(--space-l) var(--space-m) var(--space-l) 0; text-decoration: none; }
.next-pillar + .next-pillar { padding-left: var(--space-m); border-left: 1px solid var(--color-hairline); }
.next-pillar-title { margin-top: 10px; font-family: var(--font-headline); font-weight: var(--font-headline-weight); font-stretch: var(--font-headline-stretch); letter-spacing: var(--font-headline-tracking); font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.next-pillar-deck { margin-top: 10px; color: var(--color-secondary); font-size: 20px; font-style: italic; }
.next-pillar:hover .next-pillar-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

@media (max-width: 900px) {
    .manifesto, .pillar-cta, .next-pillars { grid-template-columns: 1fr; }
    .manifesto-aside { margin-bottom: var(--space-m); }
    .manifesto-body { grid-column: 1; }
    .manifesto.has-intro .manifesto-aside, .manifesto.has-intro .manifesto-intro, .manifesto.has-intro .manifesto-intro + .manifesto-body { grid-row: auto; }
    .manifesto.has-aside .manifesto-body blockquote:not([class]),
    .manifesto.has-aside .manifesto-body > ol,
    .manifesto.has-aside .manifesto-body > h4:has(+ ol),
    .manifesto.has-aside .manifesto-body > ol + p { width: 100%; margin-left: 0; }
    .manifesto-body > ol { grid-template-columns: 1fr 1fr; }
    .manifesto-body > p:first-child { font-size: 24px; }
    .manifesto-body .kg-width-full, .manifesto-body .kg-width-wide { margin-left: calc(-1 * var(--margin)); }
    .next-pillar, .next-pillar + .next-pillar { padding: var(--space-m) 0; border-left: 0; }
    .next-pillar + .next-pillar { border-top: 1px solid var(--color-hairline); }
}

/* ---------- Written story: title slides ---------- */

.story-title { margin-top: 18px; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; }

.story-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100svh - var(--nav-height));
}
.story-split-image { position: relative; margin: 0; background: var(--color-placeholder); }
.story-split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-split-image figcaption { position: absolute; left: 20px; bottom: 16px; margin: 0; color: #fff; font-size: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.story-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-l) var(--margin) var(--space-l) clamp(32px, 6vw, 96px);
    max-width: 760px;
}

.story-hero-full { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; color: var(--color-on-dark); background: var(--color-dark); }
.story-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 35%, rgba(0, 0, 0, 0.6)); }
.story-hero-full-text { position: relative; z-index: 1; padding-bottom: var(--space-l); }
.story-hero-full .label, .story-hero-full .label-strong { color: var(--color-on-dark); }
.story-hero-full .story-title { max-width: 1000px; color: var(--color-on-dark); }
.story-hero-full .listen { color: var(--color-on-dark); border-top-color: rgba(255, 255, 255, 0.5); }
.story-hero-caption { margin-top: 12px; color: var(--color-secondary); font-size: 15px; font-style: italic; }

.story-plain { padding-top: var(--space-l); max-width: calc(900px + 2 * var(--margin)); margin-left: 0; }

.listen {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 560px;
    margin-top: 32px;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--color-secondary);
    background: none;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.listen[hidden] { display: none; }
.listen .label { color: inherit; }
.listen-icon {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
.listen-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}
.listen.is-playing .listen-icon::before { width: 10px; height: 12px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }

.story .post-standfirst { margin-top: var(--space-xl); }

@media (max-width: 900px) {
    .story-split { grid-template-columns: 1fr; min-height: 0; }
    .story-split-image { aspect-ratio: 4 / 5; }
    .story-split-text { padding: var(--space-m) var(--margin) 0; }
    .story .post-standfirst { margin-top: var(--space-l); }
}

/* ---------- Credits lines ---------- */

.credits-line { padding-top: 18px; border-top: 1px solid #ececec; }
.credits-line + .credits-line { border-top: 0; padding-top: 6px; }
.credits-line a { color: var(--color-text); border-bottom: 1px solid currentColor; }
.credits-logo { max-height: 48px; width: auto; margin-top: 12px; }

/* ---------- Clean video ---------- */

.video-lite {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: var(--color-dark);
    color: #fff;
    cursor: pointer;
    overflow: hidden;
}
.video-lite img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, opacity 0.3s ease; }
.video-lite::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); transition: background 0.3s ease; }
.video-lite .play-circle { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); }
.video-lite:hover::after { background: rgba(0, 0, 0, 0.3); }
.video-lite:hover img { transform: scale(1.02); }
.video-lite:focus-visible { outline-offset: 4px; }
.video-lite-player { aspect-ratio: 16 / 9; background: var(--color-dark); }
.video-lite-player iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Film ---------- */

.film-theater { padding: var(--space-m) 0 var(--space-l); background: var(--color-dark); }
.film-theater-slot { position: relative; aspect-ratio: 16 / 9; background: #111; }
.film-theater-slot.has-video { aspect-ratio: auto; }
.film-theater-poster { width: 100%; height: 100%; object-fit: cover; }
.film-theater-slot .kg-card { margin: 0; }
.film-theater-slot .play-circle { width: 96px; height: 96px; }

.film-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-l);
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}
.film-title { margin-top: 18px; font-size: clamp(56px, 9vw, 140px); line-height: 0.92; }
.film-logline { margin-top: 24px; max-width: 720px; font-size: clamp(22px, 2.2vw, 30px); font-style: italic; line-height: 1.35; }
.film-facts:empty { display: none; }

.film-facts-list, .credit-grid { margin: 0; }
.film-facts-list { border-top: 1px solid var(--color-secondary); }
.film-facts-list > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline);
}
.film-facts-list dt,
.credit-grid dt {
    font-family: var(--font-label);
    font-size: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-secondary);
}
.film-facts-list dd { margin: 0; font-size: 18px; text-align: right; }

.gh-content .credit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px var(--gap);
    margin-top: var(--space-l);
    text-align: center;
}
.credit-grid dd { margin: 4px 0 0; font-size: 19px; }

.gh-content ol.chapters {
    grid-column: wide;
    padding: 0;
    list-style: none;
    counter-reset: chapter;
    border-top: 1px solid var(--color-secondary);
}
.gh-content ol.chapters > li {
    counter-increment: chapter;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: baseline;
    gap: var(--gap);
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid #ececec;
}
.gh-content ol.chapters > li::before {
    content: counter(chapter, decimal-leading-zero);
    font-family: var(--font-label);
    font-size: var(--text-label);
    color: var(--color-secondary);
}
.gh-content ol.chapters strong { font-family: var(--font-headline); font-weight: var(--font-headline-weight); letter-spacing: var(--font-headline-tracking); font-size: 30px; margin-right: 24px; }
.gh-content ol.chapters em { color: #3a3a3a; }
.chapter-jump { border: 0; background: none; color: var(--color-text); cursor: pointer; white-space: nowrap; }
.chapter-jump:hover { text-decoration: underline; }

.film-content .kg-gallery-card { grid-column: wide; }

.work-ask {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-m);
    padding: var(--space-l) 0;
    border-top: 1px solid var(--color-secondary);
    border-bottom: 1px solid var(--color-secondary);
    margin-bottom: var(--space-l);
}
.work-ask-title { margin-top: 12px; font-size: clamp(32px, 4vw, 56px); }

@media (max-width: 900px) {
    .work-ask { flex-direction: column; align-items: flex-start; }
    .film-header { grid-template-columns: 1fr; gap: var(--space-m); }
    .gh-content .credit-grid { grid-template-columns: 1fr 1fr; }
    .gh-content ol.chapters > li { grid-template-columns: 36px 1fr; }
    .gh-content ol.chapters > li .chapter-jump { grid-column: 2; justify-self: start; }
    .gh-content ol.chapters strong { display: block; font-size: 24px; }
    .work-ask { flex-direction: column; align-items: flex-start; }
}

/* ---------- Dossier ---------- */

.dossier-header {
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: end;
    gap: var(--space-l);
    padding-top: var(--space-l);
    padding-bottom: var(--space-m);
}
.dossier-badge { display: inline-block; margin-right: 10px; padding: 5px 9px; border: 1px solid var(--color-text); color: var(--color-text); }
.dossier-title { margin-top: 22px; font-size: clamp(56px, 8vw, 120px); line-height: 0.95; }
.dossier-deck { margin-top: 18px; font-size: clamp(22px, 2.2vw, 30px); font-style: italic; }

.dossier-status { margin: 0; padding-top: 16px; border-top: 1px solid var(--color-secondary); }
.dossier-status > div { display: flex; gap: 8px; margin-top: 4px; }
.dossier-status dt, .dossier-status dd { margin: 0; }
.dossier-status [hidden] { display: none; }
.dossier-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--color-text); }

.dossier-image { margin: var(--space-m) 0 0; padding: 0 var(--margin); }
.dossier-image img { width: 100%; max-height: 80vh; object-fit: cover; }
.dossier-image figcaption { margin-top: 10px; font-style: normal; }

.dossier-body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-l);
    padding-top: var(--space-l);
    padding-bottom: var(--space-xl);
}
.dossier-index { align-self: start; position: sticky; top: calc(var(--nav-height) + 24px); border-top: 1px solid var(--color-secondary); }
.dossier-index a {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
    font-family: var(--font-label);
    font-size: var(--text-label);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-secondary);
}
.dossier-index a:hover { color: var(--color-text); }
.dossier-main { min-width: 0; }

.dossier-content > p:first-child { font-size: 28px; line-height: 1.35; }
.dossier-content h2 { scroll-margin-top: calc(var(--nav-height) + 24px); }
.dossier-section { margin-top: var(--space-xl); }
.dossier-section > * + * { margin-top: 1.25em; }
.dossier-section-head,
.dossier-stories .dossier-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 22px;
    border-top: 1px solid var(--color-secondary);
}
.dossier-section-head h2 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); }
.dossier-section h3 { margin-top: 2em; font-size: 26px; }

/* Bookmark cards as source rows. */
.dossier-source { margin-top: 0 !important; border-bottom: 1px solid #ececec; }
.dossier-source a.kg-bookmark-container { min-height: 0; border: 0; border-radius: 0; padding: 22px 0; }
.dossier-source a.kg-bookmark-container:hover { border: 0; }
.dossier-source .kg-bookmark-content { padding: 0; display: grid; grid-template-columns: 1fr; }
.dossier-source .kg-bookmark-title { font-family: var(--font-body); font-weight: 500; font-size: 22px; letter-spacing: 0; }
.dossier-source .kg-bookmark-container:hover .kg-bookmark-title { text-decoration: underline; text-underline-offset: 4px; }
.dossier-source .kg-bookmark-description { font-size: 17px; }
.dossier-source .kg-bookmark-metadata { order: -1; margin: 0 0 6px; color: var(--color-secondary); }
.dossier-source .kg-bookmark-thumbnail { flex: 0 0 160px; margin-left: var(--gap); }
.dossier-source .kg-bookmark-thumbnail img { position: static; width: 100%; height: 110px; object-fit: cover; }

.dossier-stories { margin-top: var(--space-xl); }
.dossier-stories .story-grid { margin-top: var(--space-m); }
.dossier-main .post-footer { margin-top: var(--space-l); }

.dossier-ask { padding: var(--space-xl) 0; background: var(--color-soft); }
.dossier-ask-title { margin: 16px 0 var(--space-m); font-size: clamp(36px, 4.5vw, 64px); max-width: 760px; }

@media (max-width: 900px) {
    .dossier-header, .dossier-body { grid-template-columns: 1fr; gap: var(--space-m); }
    .dossier-image { padding: 0; }
    .dossier-image figcaption { padding: 0 var(--margin); }
    .dossier-index { position: static; }
    .dossier-content > p:first-child { font-size: 22px; }
    .dossier-source .kg-bookmark-thumbnail { flex-basis: 96px; }
    .dossier-source .kg-bookmark-thumbnail img { height: 72px; }
}

/* ---------- About ---------- */

.about-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(78vh, 760px);
    margin: var(--space-s) var(--margin) 0;
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-on-dark);
    text-align: center;
}
.about-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
.about-hero-text { position: relative; z-index: 1; max-width: 900px; padding: var(--space-l) var(--margin); }
.about-hero .label { color: var(--color-on-dark); }
.about-statement {
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25;
}

.about-content { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.about-content > p:first-child { font-size: 26px; line-height: 1.4; }

/* Header cards on About become the typographic values rows on a grey band. */
.about-content .kg-header-card {
    grid-column: full;
    margin: 0;
    padding: 0 var(--margin);
    background: #5a5a5a !important;
    min-height: 0 !important;
}
.about-content .kg-header-card + .kg-header-card { margin-top: 0; }
.about-content :not(.kg-header-card) + .kg-header-card { margin-top: var(--space-l); padding-top: var(--space-l); }
.about-content .kg-header-card:not(:has(+ .kg-header-card)) { padding-bottom: var(--space-l); }
.about-content .kg-header-card-image,
.about-content .kg-header-card picture { display: none !important; }
.about-content .kg-header-card-content { display: block; padding: 0 !important; }
.about-content .kg-header-card-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: var(--gap);
    max-width: var(--max);
    margin: 0 auto;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    text-align: left !important;
}
.about-content .kg-header-card-heading {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(32px, 4vw, 60px) !important;
    line-height: 1.02 !important;
}
.about-content .kg-header-card-subheading {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-body);
    font-size: 20px !important;
    font-style: italic;
    line-height: 1.4 !important;
}
.about-content .kg-header-card-button { grid-column: 2; justify-self: start; margin-top: 8px !important; }

.about-team { padding-bottom: var(--space-l); }
.about-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--gap); }
.about-team-grid:empty, .about-team:has(.about-team-grid:empty) { display: none; }
.team-portrait { aspect-ratio: 6 / 5; overflow: hidden; background: var(--color-placeholder); margin-bottom: 14px; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; }
.team-name { margin-top: 6px; font-size: 36px; }
.team-name a { text-decoration: none; }
.team-bio { margin-top: 10px; color: #3a3a3a; font-size: 18px; line-height: 1.55; }

@media (max-width: 767px) {
    .about-hero { margin: 0; min-height: 70vh; }
    .about-content .kg-header-card-text { grid-template-columns: 1fr; gap: 8px; }
    .about-content .kg-header-card-button { grid-column: 1; }
    .about-team-grid { grid-template-columns: 1fr; }
}

/* ---------- Project ---------- */

.project-hero { justify-content: flex-end; }
.project-hero-content { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-m); padding-bottom: var(--space-l); }
.project-title { margin-top: 16px; max-width: 900px; font-size: clamp(52px, 7.5vw, 116px); line-height: 0.95; }
.project-deck { margin-top: 18px; font-size: clamp(20px, 1.8vw, 26px); font-style: italic; }
.project-hero-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: none; }
.project-hero-links [hidden] { display: none; }

.project-film { padding: var(--space-l) 0; background: var(--color-dark); color: var(--color-on-dark); }
.project-film[hidden] { display: none; }
.project-film .kg-card { margin: 0; }
.project-film figcaption { margin-top: 24px; max-width: 760px; color: var(--color-on-dark); font-size: clamp(20px, 2vw, 28px); line-height: 1.35; }

.project-content { padding-top: var(--space-xl); padding-bottom: var(--space-l); }
.project-content > p:first-child { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; }
.project-content > h2 {
    grid-column: wide;
    margin-top: var(--space-xl);
    padding-top: 22px;
    border-top: 1px solid var(--color-secondary);
    font-size: clamp(32px, 3.6vw, 52px);
}

/* "The work": product cards in a row. */
.project-content .work-row {
    grid-column: wide;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
}
.project-content .kg-product-card { margin: 0; }
.project-content .kg-product-card-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 0;
    background: none;
    max-width: none;
}
.project-content .kg-product-card-image { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; margin-bottom: 14px; }
.project-content .kg-product-card-title-container { margin: 0; }
.project-content .kg-product-card-title { font-size: 26px; line-height: 1.1; }
.project-content .kg-product-card-description { margin-top: 8px; color: #3a3a3a; opacity: 1; font-size: 16px; line-height: 1.45; }
.project-content .kg-product-card-description strong:first-child {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-secondary);
}
.project-content a.kg-product-card-button {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-top: 14px;
    padding: 0 0 4px;
    border-bottom: 1px solid currentColor;
    background: none !important;
    color: var(--color-text) !important;
    font-size: var(--text-label) !important;
    letter-spacing: var(--text-label-tracking);
}

.project-section-title { font-size: clamp(32px, 3.6vw, 52px); }
.project-dispatches { padding-bottom: var(--space-xl); }
.project-dispatches .section-head { align-items: flex-end; border-bottom: 0; padding-top: 22px; border-top: 1px solid var(--color-secondary); }
.dispatch-grid { display: grid; grid-template-columns: 7fr 5fr; grid-auto-rows: auto; gap: var(--space-m) var(--gap); }
.dispatch-grid .dispatch-lead { grid-row: span 2; }
.dispatch-grid .dispatch-lead .story-card-image { aspect-ratio: 4 / 4.2; }
.dispatch-grid .dispatch-side .story-card-image { aspect-ratio: 16 / 9; }
.dispatch-grid .dispatch-side .story-card-title { font-size: 22px; }

.project-help { padding: var(--space-xl) 0; background: var(--color-soft); }
.project-help-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-l); align-items: start; }
.project-help-title { margin-top: 16px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; }
.project-help-body { margin-top: 20px; max-width: 560px; font-size: 20px; color: #3a3a3a; }
.project-supporters { margin-top: var(--space-m); padding-top: 18px; border-top: 1px solid var(--color-hairline); }
.project-supporters[hidden] { display: none; }
.project-supporters span { display: block; margin-top: 6px; color: var(--color-text); }

.project-help-box { padding: var(--space-m); background: var(--color-bg); }
.donate-title { font-size: 26px; line-height: 1.15; }
.ways-in p { margin: 12px 0 0; color: #3a3a3a; font-size: 17px; line-height: 1.5; }
.donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0 12px; padding: 0; border: 0; }
.donate-amounts label { position: relative; }
.donate-amounts input { position: absolute; opacity: 0; }
.donate-amounts span {
    display: block;
    padding: 12px 0;
    border: 1px solid var(--color-secondary);
    font-family: var(--font-label);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.donate-amounts input:checked + span { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.donate-amounts input:focus-visible + span { outline: 2px solid var(--color-text); outline-offset: 2px; }
.donate-button {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    border: 0;
    background: var(--color-text);
    color: var(--color-bg);
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.donate .donate-button { margin-top: 0; }
.ways-other { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ececec; }
.ways-other a { margin-left: 14px; color: var(--color-text); border-bottom: 1px solid currentColor; text-decoration: none; }

.project-follow { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.project-follow .subscribe { padding: 0; border: 0; }
.project-follow .subscribe-inner { grid-template-columns: 1fr; justify-items: center; gap: var(--space-m); text-align: center; }
.project-follow .subscribe-form { width: min(100%, 560px); text-align: left; }

@media (max-width: 900px) {
    .project-hero-content { flex-direction: column; align-items: flex-start; }
    .project-help-inner, .dispatch-grid { grid-template-columns: 1fr; }
    .dispatch-grid .dispatch-lead { grid-row: auto; }
    .project-content .work-row { grid-template-columns: 1fr 1fr; }
}

.project-content .kg-product-card-container { align-items: flex-start; text-align: left; }
.project-content .kg-product-card-title-container { justify-content: flex-start; width: 100%; }
.project-content .kg-product-card-title { text-align: left; }
.project-content .kg-product-card-description { text-align: left; width: 100%; font-family: var(--font-body); }
.project-content .kg-product-card-description p { margin: 0; opacity: 1; }

/* ---------- Phone layouts from the mobile artboards ---------- */

@media (max-width: 767px) {
    .hero:has(.hero-title--centered) { justify-content: flex-end; }
    .hero:has(.hero-title--centered) .hero-content { padding-bottom: 96px; text-align: left; }
    .hero-title--centered { margin: 12px 0 0; text-align: left; font-size: clamp(44px, 13vw, 64px); }
    .hero:has(.hero-title--centered) .hero-bar { justify-content: flex-start; }

    .story-split-image { aspect-ratio: 5 / 4; }

    .dossier-index {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        border-top: 0;
        margin: 0 calc(-1 * var(--margin));
        padding: 0 var(--margin) 4px;
        scrollbar-width: none;
    }
    .dossier-index::-webkit-scrollbar { display: none; }
    .dossier-index a { flex: none; gap: 8px; padding: 9px 12px; border: 1px solid var(--color-hairline); white-space: nowrap; }
    .dossier-index a:first-child { border-color: var(--color-text); color: var(--color-text); }

    .gh-content ol.chapters > li { grid-template-columns: 32px 1fr auto; }
    .gh-content ol.chapters > li .chapter-jump { grid-column: auto; }
    .gh-content ol.chapters strong { display: block; margin-right: 0; }
}

/* ==========================================================================
   STORY FORMATS: design-match pass
   ========================================================================== */

/* ---------- Footer: full, or slim (one line) on stories and pillar pages ---------- */

.footer-slim-row { display: none; }
.footer-slim .footer-full { display: none; }
.footer-slim .site-footer { padding: 36px 0; }
.footer-slim .footer-slim-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); }
.footer-slim-row .site-logo { font-size: 26px; }
.footer-slim-row .label { color: var(--color-on-dark); text-decoration: none; }
@media (max-width: 767px) {
    .footer-slim .footer-slim-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Photos side by side ---------- */

.gh-content .image-pair,
.gh-content .image-row { grid-column: wide; display: grid; gap: var(--space-m); margin-top: 3em; align-items: start; }
.gh-content .image-pair { grid-template-columns: 1fr 1fr; }
.gh-content .image-pair > .kg-card:nth-child(2) { margin-top: 132px; }
.gh-content .image-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); }
.gh-content .image-pair > .kg-card,
.gh-content .image-row > .kg-card { margin: 0; }
.gh-content .image-pair img,
.gh-content .image-row img { width: 100%; }
.gh-content .image-row img { aspect-ratio: 16 / 9; object-fit: cover; }
.gh-content .image-pair + *, .gh-content .image-row + * { margin-top: 3em; }
@media (max-width: 767px) {
    .gh-content .image-pair { grid-template-columns: 1fr; }
    .gh-content .image-pair > .kg-card:nth-child(2) { margin-top: 0; }
    .gh-content .image-row { grid-template-columns: 1fr; }
}

/* ---------- Film ---------- */

.film-links { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 28px; }
.film-links:empty { display: none; }

.video-lite-cue {
    position: absolute;
    top: calc(50% + 66px);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    color: #fff;
    white-space: nowrap;
}
.film-theater-slot .play-circle { width: 96px; height: 96px; }

.film-content h4 {
    margin-top: var(--space-l);
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
}
.film-content h4 + p { margin-top: 0.8em; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.film-content h4 + p + p { color: #3a3a3a; }

.chapters-head {
    grid-column: wide;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-xl);
    padding-bottom: 12px;
}
.chapters-head h4 { margin: 0; color: var(--color-text); }
.chapters-head + ol.chapters { margin-top: 0; }
.gh-content ol.chapters > li { grid-template-columns: 70px 1fr 1fr auto; align-items: baseline; padding: 24px 0; }
.chapter-title { font-family: var(--font-headline); font-weight: var(--font-headline-weight); letter-spacing: var(--font-headline-tracking); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.chapter-desc { color: #3a3a3a; font-size: 20px; font-style: italic; }
@media (max-width: 767px) {
    .gh-content ol.chapters > li { grid-template-columns: 32px 1fr auto; }
    .chapter-desc { grid-column: 2; grid-row: 2; font-size: 17px; }
}

.film-content h4:has(+ .image-row) { grid-column: wide; margin-top: var(--space-xl); }
.film-content .image-row { margin-top: 1em; }
.film-content .image-row figcaption { margin-top: 8px; }

.gh-content .screenings {
    grid-column: wide;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-l);
    margin-top: var(--space-xl);
    padding-bottom: var(--space-l);
    border-bottom: 1px solid var(--color-secondary);
}
.screenings h2 { font-size: clamp(36px, 3.6vw, 52px); }
.screenings p { margin-top: 12px; font-size: 19px; color: #3a3a3a; }
.screenings .link-arrow { margin-top: 24px; }
.screenings-list { border-top: 1px solid var(--color-secondary); }
.screenings-list > div { display: grid; grid-template-columns: 1fr 2fr auto; align-items: baseline; gap: var(--gap); padding: 18px 0; border-bottom: 1px solid #ececec; }
.screening-date { color: var(--color-text); }
.screening-venue { font-size: 21px; }
@media (max-width: 767px) { .gh-content .screenings { grid-template-columns: 1fr; gap: var(--space-m); } }

.film-content h4:has(+ .credit-grid) { text-align: center; color: var(--color-text); }
.gh-content .credit-grid { margin-top: var(--space-m); max-width: 640px; margin-left: auto; margin-right: auto; }

.work-ask-text { margin-top: 14px; max-width: 620px; color: #3a3a3a; font-size: 19px; }
.keep-watching .story-card .label::before { content: "▸ "; }

/* ---------- Dossier rows ---------- */

.dossier-section-head h2 { font-size: clamp(32px, 3.4vw, 48px); }

/* Updates: date and source | title and summary | ↗ */
.dossier-updates .dossier-source a.kg-bookmark-container {
    display: grid;
    grid-template-columns: 160px 1fr 24px;
    gap: var(--gap);
    padding: 24px 0;
    min-height: 0;
    border: 0;
}
.dossier-updates .dossier-source .kg-bookmark-thumbnail,
.dossier-updates .dossier-source .kg-bookmark-metadata { display: none; }
.dossier-updates .dossier-source .kg-bookmark-content { padding: 0; }
.source-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.source-date { font-family: var(--font-label); font-size: 13px; color: var(--color-text); }
.source-name { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); }
.source-arrow { padding-top: 6px; font-size: 14px; text-align: right; }
.dossier-updates .kg-bookmark-title { font-family: var(--font-body); font-weight: 500; font-size: 22px; letter-spacing: 0; line-height: 1.3; }
.dossier-updates .kg-bookmark-description { margin-top: 8px; font-size: 17px; -webkit-line-clamp: 3; }
.dossier-updates > p:not(:first-child),
.dossier-updates > h3,
.dossier-updates > p strong:only-child { font-size: 17px; }

/* Films: first large, then small beside their text. */
.dossier-films .film-large { margin-top: var(--space-m); }
.dossier-films .film-info h3 { margin-top: 16px; font-size: 26px; }
.dossier-films .film-info p { margin-top: 6px; font-size: 17px; color: #3a3a3a; }
.dossier-films .film-info .label { color: var(--color-secondary); }
.dossier-films .film-small { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; margin-top: var(--space-m); }
.dossier-films .film-small .film-info h3 { margin-top: 0; font-size: 22px; }

/* Research: thumbnail left, label line, title, summary, read link. */
.dossier-research .dossier-source a.kg-bookmark-container { display: flex; flex-direction: row-reverse; gap: var(--gap); padding: 24px 0; border: 0; border-bottom: 1px solid #ececec; }
.dossier-research .kg-bookmark-thumbnail { flex: 0 0 34%; margin: 0; }
.dossier-research .kg-bookmark-thumbnail img { position: static; width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 0; }
.dossier-research .kg-bookmark-content { padding: 0; }
.dossier-research .kg-bookmark-metadata { display: none; }
.dossier-research .kg-bookmark-title { margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: 24px; letter-spacing: 0; }
.source-more { margin-top: 12px; color: var(--color-text); }

/* Organizations: name and Visit ↗, description, tags. */
.dossier-orgs .org { padding: 24px 0; border-bottom: 1px solid #ececec; }
.dossier-orgs .org-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); }
.dossier-orgs .org-top h3 { margin: 0; font-size: 26px; }
.dossier-orgs .org-top h3 a { text-decoration: none; }
.dossier-orgs .org > p { margin-top: 10px; font-size: 19px; line-height: 1.5; }
.dossier-orgs .org-tags { margin-top: 10px !important; font-style: normal; }
.dossier-orgs .org-tags em { font-style: normal; }

.dossier-ask-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-l); align-items: end; }
.dossier-ask-text { margin: 0 0 var(--space-m); max-width: 520px; font-size: 19px; color: #3a3a3a; }
.dossier-support { padding-left: var(--space-m); border-left: 1px solid var(--color-hairline); }
.dossier-support-logo { max-height: 56px; width: auto; margin: 14px 0 20px; }
.dossier-support-name { margin: 12px 0 20px; font-size: 20px; }
@media (max-width: 767px) {
    .dossier-updates .dossier-source a.kg-bookmark-container { grid-template-columns: 1fr 20px; }
    .source-meta { grid-column: 1 / -1; flex-direction: row; gap: 10px; }
    .dossier-films .film-small, .dossier-ask-inner { grid-template-columns: 1fr; }
    .dossier-research .dossier-source a.kg-bookmark-container { flex-direction: column-reverse; }
    .dossier-support { padding-left: 0; border-left: 0; }
}

/* ---------- Project additions ---------- */

.project-hero-caption { position: absolute; left: var(--margin); bottom: 28px; color: rgba(255, 255, 255, 0.8); }
.project-hero-content { position: relative; padding-bottom: calc(var(--space-l) + 24px); }
.project-film-labels { display: flex; justify-content: space-between; gap: var(--gap); margin-bottom: 24px; color: var(--color-on-dark-secondary); }
.project-film figcaption { font-style: italic; }

.project-content > h2.has-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); }
.project-content > h2.has-label .label { font-weight: 400; letter-spacing: var(--text-label-tracking); }
.work-type { margin-bottom: 6px; }

.project-after { padding-bottom: var(--space-xl); }
.project-after[hidden] { display: none; }
.project-after h4 { font-family: var(--font-label); font-size: var(--text-label); font-weight: 400; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.project-after .image-row { margin-top: 16px; }
.project-after .image-row img { aspect-ratio: 1 / 1; }
.project-after .image-row figcaption { font-size: 14px; }

.feature-pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-l); align-items: center; margin-top: var(--space-xl); }
.feature-pair > .kg-card { margin: 0; }
.feature-pair img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.feature-pair h4 { margin: 0; }
.feature-pair h2, .feature-pair h3 { margin-top: 14px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; }
.feature-pair p { margin-top: 16px; font-size: 19px; line-height: 1.55; color: #3a3a3a; }
.feature-pair p em:only-child { font-family: var(--font-label); font-size: 12px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); }
.feature-pair .link-arrow { margin-top: 22px; }

.project-help-signature { margin-top: 18px; font-style: italic; color: #3a3a3a; }
.donate-text { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #3a3a3a; }
.project-follow .subscribe-title { font-size: clamp(40px, 5vw, 72px); }
@media (max-width: 900px) {
    .feature-pair { grid-template-columns: 1fr; gap: var(--space-m); }
    .project-hero-caption { position: static; margin-top: 16px; }
}
.dossier-support:not(:has(.dossier-support-logo, .dossier-support-name)) > .label { display: none; }

/* ---------- River line (pillar pages tagged #river-line) ---------- */

.manifesto.has-aside .manifesto-body > .river-section {
    display: grid;
    grid-template-columns: 5fr 1fr 7fr;
    width: calc(100% * 13 / 7);
    margin-left: calc(-100% * 6 / 7);
}
.river-text { grid-column: 3; min-width: 0; }
.river-text > * + * { margin-top: 1.25em; }
.river-text h4 { margin-top: var(--space-l); }
.river-text h3 { margin-top: var(--space-l); }
.river-text .kg-button-card { justify-content: flex-start; margin-top: var(--space-m); }

.river-line { grid-column: 1; position: relative; min-height: 100%; }
.river-line svg {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: calc(100% - 16px);
    overflow: visible;
}
.river-line polyline { stroke: var(--color-river); stroke-linecap: round; stroke-linejoin: round; }
.river-source { fill: var(--color-river); }

@media (max-width: 900px) {
    .manifesto.has-aside .manifesto-body > .river-section { display: block; width: 100%; margin-left: 0; }
    .river-line { display: none; }
}

/* ==========================================================================
   CONTRIBUTORS
   ========================================================================== */

.contributor-portrait { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--color-soft); }
.contributor-portrait img { width: 100%; height: 100%; object-fit: cover; }
.contributor-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-weight: var(--font-headline-weight);
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    font-size: 30%;
}
.contributor-portrait--large { width: clamp(140px, 18vw, 240px); container-type: inline-size; }
.contributor-portrait--large .contributor-initials { font-size: 30cqw; }
.contributor-portrait--small { width: 64px; flex: none; }
.contributor-portrait--small .contributor-initials { font-size: 20px; }

/* Profile page */
.contributor {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-l);
    align-items: center;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-l);
}
.contributor-name { margin-top: 12px; font-size: clamp(48px, 6.5vw, 96px); line-height: 0.95; }
.contributor-bio { margin-top: 20px; max-width: 680px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; }
.contributor-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.contributor-links:empty { display: none; }
.contributor-links a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; }
.contributor-stories { padding-bottom: var(--space-xl); }
.contributor-stories .section-head .label:not(.section-label) { color: var(--color-secondary); }
@media (max-width: 767px) {
    .contributor { grid-template-columns: 1fr; gap: var(--space-m); padding-top: var(--space-l); }
}

/* Contributors index */
.contributors-header { padding-top: var(--space-xl); padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-secondary); }
.contributors-title { margin-top: 14px; max-width: 1000px; font-size: clamp(48px, 7vw, 108px); line-height: 0.95; }
.contributors-deck { margin-top: 22px; max-width: 720px; font-size: clamp(20px, 1.8vw, 24px); font-style: italic; color: #3a3a3a; }
.contributors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l) var(--gap); padding-top: var(--space-l); padding-bottom: var(--space-xl); }
.contributor-card-link { display: block; text-decoration: none; }
.contributor-card .contributor-portrait { width: 132px; margin-bottom: 20px; font-size: 44px; }
.contributor-card .contributor-initials { font-size: 40px; }
.contributor-card-name { margin-top: 6px; font-size: 34px; line-height: 1.05; }
.contributor-card-bio { margin-top: 10px; color: #3a3a3a; font-size: 18px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.contributor-card-count { margin-top: 14px; color: var(--color-text); }
.contributor-card-link:hover .contributor-card-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contributors-pitch { padding: var(--space-xl) 0; background: var(--color-soft); max-width: none; }
.contributors-pitch-inner { max-width: var(--measure); margin: 0 auto; padding: 0 var(--margin); }
@media (max-width: 900px) { .contributors-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .contributors-grid { grid-template-columns: 1fr; } }

/* End-of-story author cards */
.post-credit { display: flex; gap: 20px; align-items: flex-start; }
.post-credit-name { margin-top: 2px; font-size: 21px; font-weight: 600; }
.post-credit-name a { text-decoration: none; }
.post-credit-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-credit-name .label { font-weight: 400; }
.post-credit-bio { margin-top: 6px; color: #3a3a3a; font-size: 17px; line-height: 1.5; }
.post-credit-more { display: inline-block; margin-top: 10px; color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; }
.post-meta a.label-strong { text-decoration: none; border-bottom: 1px solid transparent; }
.post-meta a.label-strong:hover { border-bottom-color: currentColor; }
.story-hero-full .post-meta a.label-strong { color: var(--color-on-dark); }

.about-contributors { padding-bottom: var(--space-l); }
.contributors-pitch .kg-button-card { justify-content: flex-start; }
.contributors-pitch .kg-btn { height: auto; padding: 0 0 4px; border-bottom: 1px solid currentColor; background: none !important; color: var(--color-text) !important; }
.contributors-pitch h2 { font-size: clamp(32px, 3.4vw, 48px); }




/* ==========================================================================
   DESCENT (custom-descent.hbs + assets/js/descent.js)
   A journey down one river: movements, stamps, field notes, handwriting that
   writes itself, and the river's course drawn in the margin as you read.
   ========================================================================== */

.descent .post-standfirst { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.5; }

.descent .gh-content > .dm-movement {
    margin-top: 160px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    text-align: center;
    text-wrap: balance;
}
.descent .dm-movement .dm-num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-secondary);
}
.descent .dm-movement .dm-title { display: block; }
.descent .gh-content > .dm-stamp { margin-top: 18px; color: var(--color-secondary); text-align: center; }
.descent .gh-content > .dm-stamp + * { margin-top: var(--space-m); }

/* Field notes: the notebook, in monospace with a rule. */
.descent .gh-content blockquote.dm-note {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding: 0 0 0 20px;
    border-left: 2px solid var(--color-hairline);
    font-family: var(--font-label);
    font-size: 15px;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-text);
    max-width: none;
}
.descent .gh-content blockquote.dm-note + blockquote.dm-note { margin-top: -0.6em; }

/* Spoken lines: what someone said out loud. */
.descent .gh-content blockquote.dm-voice {
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-style: italic;
    line-height: 1.45;
    text-align: left;
    max-width: none;
}

/* Big statements. */
.descent .gh-content blockquote.dm-big {
    grid-column: wide;
    margin-top: 160px;
    margin-bottom: 160px;
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: clamp(30px, 4vw, 46px);
    font-style: italic;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

/* Crew. */
.descent .dm-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--gap); margin-top: var(--space-l); margin-bottom: var(--space-l); }
.descent .dm-crew-member { margin: 0; font-size: 17px; line-height: 1.5; color: var(--color-secondary); }
.descent .dm-crew-member strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-label);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-text);
}

/* Photographs sit above the river line, so the river slips beneath them. */
.descent .gh-content figure { position: relative; z-index: 2; }

/* Emergence-style media: landscape frames run edge to edge with no border or box, and two in a row
   join into one continuous strip; portraits stand centred at reading height. Everything fades in. */
.descent .gh-content > figure.dm-bleed { grid-column: full; margin-top: var(--space-l); margin-bottom: var(--space-l); }
.descent .gh-content > figure.dm-bleed + figure.dm-bleed { margin-top: 0; }
.descent .gh-content > figure.dm-bleed img,
.descent .gh-content > figure.dm-bleed video { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: cover; }
.descent .gh-content > figure.dm-portrait { grid-column: wide; justify-self: center; width: min(100%, 640px); margin-top: var(--space-l); margin-bottom: var(--space-l); }
.descent .gh-content > figure.dm-portrait img,
.descent .gh-content > figure.dm-portrait video { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: cover; }
.descent .gh-content > figure + p { margin-top: 0; }
.descent .gh-content > figure figcaption {
    margin-top: 8px;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: right;
    color: var(--color-secondary);
}
.descent .gh-content > figure.dm-bleed figcaption { padding: 0 var(--margin); }
.descent .dm-fade { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s ease; }
.descent .dm-fade.is-in { opacity: 1; transform: none; }
.descent .gh-content .kg-image-card img { transition: filter 0.2s linear; }
.descent .dm-gray img,
.descent .dm-gray video { filter: grayscale(var(--dm-gray, 1)); }
.descent .gh-content .kg-video-card video { display: block; width: 100%; height: auto; background: var(--color-dark); }
.descent .gh-content .kg-video-card video { transition: filter 0.2s linear; }
.descent .gh-content .kg-image-card.kg-width-full img,
.descent .gh-content .kg-image-card.kg-width-wide img { max-height: 92vh; object-fit: cover; }

/* Handwriting: a tall track whose sticky stage writes the page as it scrolls. */
.descent .gh-content > .dm-hw { grid-column: wide; position: relative; z-index: 2; margin-top: var(--space-l); margin-bottom: var(--space-l); background: var(--color-bg); }
.dm-hw-stage { padding: var(--space-s) 0; }
.dm-hw-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: var(--space-s); font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.dm-hw-canvas { display: block; width: 100%; height: auto; }
.descent .gh-content .dm-hw-transcript { max-width: var(--measure); margin-top: var(--space-s); font-family: var(--font-label); font-size: 13px; line-height: 1.6; color: var(--color-secondary); }

/* Tap-to-define. */
.dm-term { position: relative; }
.dm-term-word {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.dm-term-word[aria-expanded="true"] { text-decoration-style: solid; }
.dm-term-def {
    position: absolute;
    z-index: 20;
    left: 0;
    top: calc(100% + 8px);
    width: min(320px, 80vw);
    padding: 12px 14px;
    background: var(--color-dark);
    color: var(--color-on-dark);
    font-family: var(--font-label);
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
}
.dm-term-def[hidden] { display: none; }

/* The river instrument: the true course in the left margin on wide screens. */
.dm-rail {
    position: fixed;
    z-index: 1;
    left: max(24px, calc((100vw - var(--max)) / 2));
    top: calc(var(--nav-height) + 32px);
    width: clamp(120px, calc((100vw - var(--wide)) / 2 - 56px), 200px);
    font-family: var(--font-label);
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.descent-on .dm-rail:not(.dm-rail-road) { opacity: 1; }
.descent-road-on .dm-rail-road { opacity: 1; }
.dm-road-seg { stroke: var(--color-text); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.dm-road-place { fill: var(--color-bg); stroke: var(--color-secondary); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dm-rail svg { display: block; width: 100%; height: min(52vh, 460px); overflow: visible; }
.dm-rail-name { margin: 0 0 12px; text-transform: uppercase; letter-spacing: var(--text-label-tracking); }
.dm-rail-label { margin: 14px 0 0; }
.dm-rail-label b { font-weight: 500; color: var(--color-text); }
.dm-rail-note { margin: 10px 0 0; opacity: 0; transition: opacity 0.4s ease; }
.dm-rail-note.is-shown { opacity: 1; }
.dm-rail-ghost { fill: none; stroke: var(--color-hairline); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dm-rail-seg { fill: none; stroke: var(--color-river); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dm-rail-seg.is-diverted { stroke: var(--color-text); stroke-dasharray: 2 4; stroke-linecap: butt; }
.dm-rail-intake { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dm-rail-dot { fill: var(--color-text); stroke: var(--color-bg); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Phone and tablet: an elevation strip along the bottom of the screen. */
.dm-bar {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px var(--margin) calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-hairline);
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.descent-on .dm-bar { transform: none; }
.dm-bar svg { flex: 1 1 auto; min-width: 0; width: 100%; height: 30px; overflow: visible; }
.dm-bar-label { flex: 0 0 auto; margin: 0; text-align: right; white-space: nowrap; }
.dm-bar-label b { font-weight: 500; color: var(--color-text); }
.dm-bar-ghost { fill: none; stroke: var(--color-hairline); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dm-bar-div { fill: none; stroke: var(--color-text); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dm-bar-done { fill: none; stroke: var(--color-river); stroke-width: 2; vector-effect: non-scaling-stroke; }
.has-descent-bar .post-after { padding-bottom: 60px; }

@media (min-width: 1200px) { .dm-bar { display: none; } }
@media (max-width: 1199px) { .dm-rail { display: none; } }
@media (max-width: 600px) {
    .descent .dm-crew { grid-template-columns: 1fr; }
    .descent .gh-content blockquote.dm-note { font-size: 14px; }
    .descent .gh-content blockquote.dm-voice { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .descent .gh-content .kg-image-card img, .dm-rail, .dm-rail-note, .dm-bar { transition: none; }
}

/* Claude-built maps and Ben's numbers */
.descent .gh-content > .dm-map-card { grid-column: wide; margin-top: var(--space-l); margin-bottom: var(--space-l); position: relative; z-index: 2; background: var(--color-bg); }
.dm-map { display: block; width: 100%; height: auto; }
.dm-map .m-road { fill: none; stroke: var(--color-secondary); stroke-width: 1.5; stroke-linejoin: round; }
.dm-map .m-hike { fill: none; stroke: var(--color-text); stroke-width: 1.2; stroke-dasharray: 2 3; }
.dm-map .m-river { fill: none; stroke: var(--color-text); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.dm-map .m-dot { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1.3; }
.dm-map .m-end { fill: var(--color-text); }
.dm-map .m-lab { font-family: var(--font-label); font-size: 13px; letter-spacing: 0.06em; fill: var(--color-secondary); }
.dm-map .m-strong { fill: var(--color-text); font-weight: 500; }
.dm-map .m-river-lab { font-family: var(--font-body); font-style: italic; font-size: 20px; letter-spacing: 0; fill: var(--color-text); }
.dm-map .m-park { font-size: 11px; letter-spacing: 0.3em; fill: var(--color-river); }
.dm-map .m-scale line { stroke: var(--color-text); stroke-width: 1.5; }
.dm-map .m-scale text { font-family: var(--font-label); font-size: 12px; fill: var(--color-secondary); }
.descent .gh-content > .dm-map-card figcaption { max-width: var(--measure); margin: 12px 0 0 auto; }

.descent .gh-content > .dm-ledger { grid-column: main; margin-top: var(--space-l); margin-bottom: var(--space-l); position: relative; z-index: 2; background: var(--color-bg); }
.dm-ledger .lg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.dm-ledger .lg-head span:first-child { color: var(--color-text); font-weight: 500; }
.dm-ledger table { width: 100%; border-collapse: collapse; font-family: var(--font-label); font-size: 13px; }
.dm-ledger th { padding: 0 8px 8px 0; text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); border-bottom: 1px solid var(--color-hairline); }
.dm-ledger td { padding: 5px 8px 5px 0; vertical-align: middle; border-bottom: 1px solid var(--color-soft); white-space: nowrap; }
.dm-ledger td.lg-n { white-space: normal; color: var(--color-secondary); }
.dm-ledger .lg-g { position: relative; width: 34%; }
.dm-ledger .lg-gv { display: inline-block; width: 3.4em; }
.dm-ledger .lg-bar { display: inline-block; height: 6px; margin-left: 4px; width: calc(var(--g) * 60%); background: var(--color-river); vertical-align: middle; }
.dm-ledger tr.is-hot td { color: var(--color-text); font-weight: 500; font-size: 15px; padding-top: 10px; padding-bottom: 10px; }
.dm-ledger tr.is-hot .lg-bar { background: var(--color-text); height: 8px; }
.dm-ledger tr.is-hot td.lg-n { color: var(--color-text); }
.dm-row { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
.dm-row.is-in { opacity: 1; transform: none; }
@media (max-width: 600px) { .dm-ledger td.lg-e { display: none; } .dm-ledger th:nth-child(3) { display: none; } }

/* Content sits above the margin line, so photographs, maps and tables slip over it. */
.descent .post-content { position: relative; z-index: 2; }

/* Ben's numbers, one short ledger under each river movement's stamp */
.descent .gh-content > .dm-ledger-mini { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.dm-ledger-mini .lg-head { margin-bottom: 6px; font-size: 11px; }
.dm-ledger-mini table { font-size: 12px; }
.dm-ledger-mini td { padding: 3px 8px 3px 0; }
.dm-ledger-mini tr.is-hot td { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }

/* Cold open: black, one line at a time, then grey dawn */
.descent .gh-content > .dm-cold { grid-column: full; margin-top: 0; background: #050505; color: #e9e9e6; position: relative; z-index: 3; }
.descent .post-standfirst + .post-content > .dm-cold,
.descent .gh-content > .dm-cold:first-child { margin-top: var(--space-l); }
.dm-cold-inner { max-width: var(--measure); margin: 0 auto; padding: 45vh var(--margin) 30vh; }
.descent .gh-content .dm-cold-line { margin: 0 0 38vh; font-family: var(--font-body); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1.6s ease, transform 1.6s ease; }
.descent .gh-content .dm-cold-line.is-question { font-style: italic; margin-bottom: 30vh; }
.descent .gh-content .dm-cold-line.is-in { opacity: 1; transform: none; }
.dm-cold-dawn { height: 70vh; background: linear-gradient(180deg, #050505 0%, #3a3a38 45%, #a9a9a5 75%, var(--color-bg) 100%); }
@media (prefers-reduced-motion: reduce) { .descent .gh-content .dm-cold-line { transition: none; } }

/* Field notes that open with a date carry the notebook's heading, small, above the words. */
.descent .gh-content blockquote.dm-note.is-dated .dm-hw-head { display: flex; margin: 0 0 10px; font-size: 11px; }
.descent .gh-content blockquote.dm-note.is-dated { padding-top: 2px; }
/* A short handwritten note (a word or a line) sits small, the size it was written. */
.descent .gh-content > .dm-hw.is-short .dm-hw-head { justify-content: flex-start; }

/* Coda: the fade back out of the mission. White, not black: the lines arrive one at a time. */
.descent .gh-content > .dm-coda { grid-column: full; margin: var(--space-xl) 0 0; background: #fff; color: #111; position: relative; z-index: 3; }
.dm-coda-in { height: 60vh; background: linear-gradient(180deg, var(--color-bg) 0%, #fff 100%); }
.dm-coda-out { height: 60vh; background: linear-gradient(180deg, #fff 0%, var(--color-bg) 100%); }
.dm-coda-inner { max-width: 46rem; margin: 0 auto; padding: 30vh var(--margin) 34vh; }
.dm-coda-group { margin: 0 0 38vh; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 1.8s ease, transform 1.8s ease; }
.dm-coda-group:last-child { margin-bottom: 0; }
.dm-coda-group.is-in { opacity: 1; transform: none; }
.descent .gh-content .dm-coda-line { margin: 0; font-family: var(--font-body); font-size: clamp(30px, 4.2vw, 54px); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; color: #111; }
.descent .gh-content .dm-coda-line.is-small { margin-top: 18px; font-family: var(--font-label); font-size: 13px; line-height: 1.6; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: #6b6b67; }
@media (prefers-reduced-motion: reduce) { .dm-coda-group { transition: none; } }

/* Credits: the end matter, set like a field card. */
.descent .gh-content > .dm-credits { grid-column: wide; margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--color-text); font-family: var(--font-label); }
.dm-cr-block { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 12px 32px; padding: 22px 0; border-bottom: 1px solid var(--color-hairline); }
.descent .gh-content .dm-cr-kicker { margin: 2px 0 0; font-size: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.dm-cr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--color-hairline); border-left: 1px solid var(--color-hairline); }
.dm-cr-facts > div { padding: 12px 14px 14px; border-right: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
.dm-cr-facts dt, .dm-cr-list dt { font-size: 11px; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.dm-cr-facts dd { margin: 6px 0 0; font-family: var(--font-body); font-size: 19px; line-height: 1.3; color: var(--color-text); }
.dm-cr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin: 0; }
.dm-cr-list dd { margin: 3px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.35; }
.descent .gh-content .dm-cr-thanks { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.6; max-width: var(--measure); }
.dm-cr-marks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dm-cr-marks li { margin: 0; padding: 12px 18px; border: 1px solid var(--color-hairline); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.dm-cr-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.descent .gh-content .dm-cr-btn { display: inline-block; padding: 13px 18px; border: 1px solid var(--color-text); font-size: 13px; letter-spacing: 0.04em; text-decoration: none; color: var(--color-text); }
.descent .gh-content .dm-cr-btn.is-primary { background: var(--color-text); color: var(--color-bg); }
.descent .gh-content .dm-cr-colophon { margin: 22px 0 0; max-width: var(--measure); font-size: 12px; line-height: 1.7; color: var(--color-secondary); }
@media (max-width: 760px) {
    .dm-cr-block { grid-template-columns: 1fr; }
    .dm-cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-cr-list { grid-template-columns: 1fr; }
}
.descent .gh-content > .dm-hw.is-short .dm-hw-transcript { display: none; }
.descent .gh-content ul.dm-cr-marks { margin: 0; padding: 0; }
.descent .gh-content ul.dm-cr-marks > li { margin: 0; padding: 12px 18px; line-height: 1; }
.descent .gh-content ul.dm-cr-marks > li::before { content: none; display: none; }

/* The last lines of the story fade into the white of the coda. */
.descent .gh-content > .dm-coda { background: transparent; margin-top: 0; }
.dm-coda-in { position: relative; z-index: 4; height: 75vh; margin-top: -32vh; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 45%, #fff 75%); pointer-events: none; }
.dm-coda-inner { background: #fff; }

/* One action, set apart. */
.descent .gh-content > .dm-action { margin: var(--space-l) 0; padding: 28px 28px 30px; border: 1px solid var(--color-text); }
.descent .gh-content .dm-action-kicker { margin: 0 0 10px; font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.descent .gh-content .dm-action-title { margin: 0; font-family: var(--font-body); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.descent .gh-content .dm-action-body { margin: 10px 0 20px; font-size: 18px; }
.descent .gh-content .dm-action-btn { display: inline-block; padding: 14px 20px; background: var(--color-text); color: var(--color-bg); font-family: var(--font-label); font-size: 13px; letter-spacing: 0.04em; text-decoration: none; }
.descent .gh-content .dm-action-also { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--color-hairline); font-size: 15px; line-height: 1.5; color: var(--color-secondary); }
.descent .gh-content .dm-action-also span { margin-right: 8px; font-family: var(--font-label); font-size: 11px; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-text); }
.descent .gh-content .dm-action-also a { color: var(--color-text); }

/* Sound: a quiet pill that rides along the cold open and the coda. */
.dm-sound-bar { position: sticky; top: calc(100vh - 76px); height: 0; z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.dm-sound { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.dm-sound svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.dm-cold .dm-sound { color: #e9e9e6; background: rgba(0,0,0,0.35); }
.dm-coda .dm-sound { color: #111; background: rgba(255,255,255,0.7); }
.dm-coda .dm-sound-bar { top: calc(100vh - 76px); }

/* A small player for Sophia's song. */
.descent .gh-content > figure.dm-audio { margin: var(--space-m) 0; padding: 16px 18px; border: 1px solid var(--color-hairline); }
.dm-audio-row { display: flex; align-items: center; gap: 14px; }
.dm-audio-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-text); cursor: pointer; position: relative; }
.dm-audio-btn::before { content: ""; position: absolute; left: 17px; top: 14px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--color-bg); }
.dm-audio-btn.is-playing::before { left: 15px; top: 14px; width: 4px; height: 16px; border: 0; background: var(--color-bg); box-shadow: 9px 0 0 var(--color-bg); }
.dm-audio-track { flex: 1; height: 4px; background: var(--color-hairline); cursor: pointer; position: relative; }
.dm-audio-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-text); }
.dm-audio-time { flex: none; min-width: 72px; text-align: right; font-family: var(--font-label); font-size: 12px; color: var(--color-secondary); }
.descent .gh-content figure.dm-audio figcaption { margin: 10px 0 0; font-family: var(--font-label); font-size: 12px; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-secondary); }
.descent .gh-content figure.dm-audio figcaption { text-align: left; font-style: normal; padding: 0; }

/* Typed field notes write themselves, word by word. */
.descent .gh-content blockquote.dm-note.is-writing .dm-word { opacity: 0.1; transition: opacity 0.35s ease; }
.descent .gh-content blockquote.dm-note.is-writing .dm-word.is-on { opacity: 1; }

/* Map stack: Guzmán's map dissolves into today's roads and river; the confluence plate arrives last. */
.descent .gh-content > .dm-mapstack { --mix: 0; --plate: 0; }
.dm-ms-track { height: 240vh; position: relative; }
.dm-ms-stage { position: sticky; top: 8vh; }
.dm-ms-frame { position: relative; aspect-ratio: 1000 / 683; }
.dm-ms-old, .dm-ms-new { position: absolute; inset: 0; }
.dm-ms-old { display: flex; align-items: center; opacity: calc(1 - var(--mix)); transform: scale(calc(1 + var(--mix) * 0.04)); transform-origin: 50% 40%; }
.dm-ms-old img { width: 100%; height: 100%; object-fit: contain; }
.dm-ms-new { opacity: var(--mix); }
.dm-map .m-leader { fill: none; stroke: var(--color-text); stroke-width: 1; stroke-dasharray: 2 4; opacity: var(--plate); }
.dm-ms-plate { position: absolute; left: 12%; top: 16%; width: 17%; opacity: var(--plate); transform: translateY(calc((1 - var(--plate)) * 12px)); background: var(--color-bg); padding: 6px 6px 8px; box-shadow: 0 1px 0 var(--color-hairline), 0 0 0 1px var(--color-hairline); }
.dm-ms-plate img { display: block; width: 100%; height: auto; }
.descent .gh-content .dm-ms-plate p { margin: 8px 2px 0; font-family: var(--font-label); font-size: 10.5px; line-height: 1.5; color: var(--color-secondary); }
.descent .gh-content .dm-ms-plate p em { display: block; margin-bottom: 4px; font-family: var(--font-body); font-size: 13px; color: var(--color-text); }
.dm-ms-labels { position: relative; min-height: 3.4em; margin-top: 14px; font-family: var(--font-label); font-size: 12px; line-height: 1.5; color: var(--color-secondary); }
.dm-ms-labels > span { position: absolute; inset: 0 auto auto 0; max-width: 46ch; }
.dm-ms-labels b { margin-right: 8px; font-weight: 600; letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--color-text); }
.dm-ms-then { opacity: max(0, 1 - var(--mix) * 2); }
.dm-ms-now { opacity: max(0, var(--mix) * 2 - 1); }
html.dm-stack-on .dm-rail { opacity: 0 !important; }
.dm-mapstack.is-static .dm-ms-track { height: auto; }
.dm-mapstack.is-static .dm-ms-stage { position: static; }
.dm-mapstack.is-static .dm-ms-frame { aspect-ratio: auto; }
.dm-mapstack.is-static .dm-ms-old, .dm-mapstack.is-static .dm-ms-new { position: relative; opacity: 1; transform: none; }
.dm-mapstack.is-static .dm-ms-new { margin-top: 24px; }
.dm-mapstack.is-static .dm-ms-plate, .dm-mapstack.is-static .m-leader { opacity: 1; }
.dm-mapstack.is-static .dm-ms-labels > span { position: static; display: block; opacity: 1; }
@media (max-width: 760px) {
    .dm-ms-plate { left: 4%; top: 30%; width: 30%; padding: 4px; }
    .descent .gh-content .dm-ms-plate p { display: none; }
    .dm-ms-stage { top: 14vh; }
}

/* Opening film behind the title, with its sound toggle */
.story-hero-full video.dm-hero-film { background: #000; }
.story-hero-full .dm-hero-sound { position: absolute; z-index: 2; inset: auto max(24px, var(--margin)) 32px auto; height: auto; top: auto; display: block; }
.story-hero-full .dm-hero-sound .dm-sound { color: #fff; border-color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); }
@media (max-width: 767px) {
    .story-hero-full .dm-hero-sound { inset: calc(var(--nav-height, 64px) + 16px) 16px auto auto; }
}

/* Long bare URLs in old posts (reference lists) must wrap, or they push phones sideways. */
.gh-content p, .gh-content li, .gh-content figcaption, .gh-content blockquote { overflow-wrap: anywhere; }
/* Button cards in stories: a 44px touch target (Ghost's default is 31px). */
.post-content .kg-button-card .kg-btn { height: 44px; padding: 0 20px; }
/* About with no feature image yet: a plain title instead of an empty black frame. */
.about-hero--plain { min-height: 0; background: none; color: var(--color-text); padding: var(--space-l) 0 0; }
.about-hero--plain::after { content: none; }
.about-hero--plain .label { color: var(--color-secondary); }
.about-hero--plain .about-statement { font-family: var(--font-headline); font-weight: var(--font-headline-weight); letter-spacing: var(--font-headline-tracking); font-size: clamp(48px, 7vw, 96px); line-height: 1; }

/* ---------- About, raw (no feature image): one white column, plain type, no bands ---------- */
.about--raw .about-hero--plain { display: block; margin: 0; padding: var(--space-l) var(--margin) 0; text-align: left; }
.about--raw .about-hero-text { max-width: var(--measure); margin: 0 auto; padding: 0; }
.about--raw .about-hero--plain .about-statement { margin-top: 12px; font-size: clamp(56px, 9vw, 112px); }
.about--raw .about-deck { margin-top: 20px; font-size: 24px; line-height: 1.4; }
.about--raw .about-content .kg-header-card { grid-column: main; background: transparent !important; padding: 0 !important; }
.about--raw .about-content :not(.kg-header-card) + .kg-header-card { margin-top: var(--space-m); padding-top: 0 !important; }
.about--raw .about-content .kg-header-card:not(:has(+ .kg-header-card)) { padding-bottom: 0 !important; margin-bottom: 8px; }
.about--raw .about-content .kg-header-card-text { display: block; max-width: none; border-bottom: 0; padding: 14px 0; }
.about--raw .about-content .kg-header-card-heading { color: var(--color-text) !important; font-size: clamp(28px, 3vw, 40px) !important; }
.about--raw .about-content .kg-header-card-subheading { margin-top: 6px !important; color: #3a3a3a !important; font-size: 19px !important; font-style: normal; line-height: 1.55 !important; }
.about--raw .about-content .kg-header-card-subheading > br:first-child { display: none; }
.about--raw .about-content .kg-header-card-button { margin-top: 12px !important; }
/* Heading-only cards ("RIVERS VALUES", "ALL WITH REVERENCE") read as small section labels. */
.about--raw .about-content .kg-header-card:not(:has(.kg-header-card-subheading)) .kg-header-card-text { padding: 24px 0 0; }
.about--raw .about-content .kg-header-card:not(:has(.kg-header-card-subheading)) .kg-header-card-heading {
    font-family: var(--font-label) !important; font-size: 13px !important; font-weight: 400 !important;
    letter-spacing: 0.12em !important; text-transform: uppercase; color: var(--color-secondary) !important;
}
.about--raw .about-content > p:first-child { font-size: inherit; line-height: inherit; }

/* ---------- Projects page ---------- */
.projects-intro { padding-bottom: var(--space-m); }
.projects-intro .gh-content { max-width: 760px; font-size: 22px; line-height: 1.5; }
.projects-intro .gh-content > * + * { margin-top: 1em; }
.projects-list { padding-bottom: var(--space-xl); }
@media (max-width: 767px) {
    .projects-intro .gh-content { font-size: 19px; }
    .about--raw .about-deck { font-size: 20px; }
}