/* ===========================================================
   Krino Media — base tokens
   Straight from Krino Brand Guidelines v1.0: Bone (editorial paper) as the
   default surface, Ink for text and dark panels, Gold as the sole accent
   (deliberately not red/blue), Slate for calm-authority UI, Stone for quiet
   metadata. Gold/Ink are also exposed as Admin-editable theme settings.
   =========================================================== */

:root {
    --bone: #F4EFE3;
    --ink: #16140F;
    --gold: #C8971F;
    --gold-dark: #9b7416;
    --slate: #33424A;
    --stone: #8A867C;
    --border: #d8d2c4;
    --teal: #093329;

    --bg: #ffffff;
    --bg-elevated: #ffffff;
    /* Full-strength per request. Note: the masthead logo image has a
       dark charcoal wordmark baked in, which now has weak contrast
       against this dark teal -- see the header-text-light overrides
       below for what this forced elsewhere (nav/trending/toggle turned
       light-on-dark); the logo image itself can't be recolored from
       CSS since it's a flattened PNG. */
    --header-bg: var(--teal);
    --fg: var(--ink);
    --muted: var(--slate);
    --caption: var(--stone);

    --font-display: Fraunces, serif;
    --font-sans: var(--gh-font-body, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --content-width: 72rem;
    --content-narrow: 42rem;
    --radius: 0.5rem;
    --shadow: 0 1px 2px rgba(22, 20, 15, 0.06), 0 10px 28px rgba(22, 20, 15, 0.08);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --bg: var(--ink);
        --bg-elevated: #1c1a14;
        --header-bg: #1c1a14;
        --fg: var(--bone);
        --muted: #a9c1c9;
        --caption: #a49f8f;
        --border: #33302688;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
    }
}

html[data-theme="dark"] {
    --bg: var(--ink);
    --bg-elevated: #1c1a14;
    --header-bg: #1c1a14;
    --fg: var(--bone);
    --muted: #a9c1c9;
    --caption: #a49f8f;
    --border: #33302688;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

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

a {
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--gh-font-heading, var(--font-display));
    font-weight: 700;
    color: var(--fg);
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0 0 0.5em;
}

p {
    margin: 0 0 1em;
}

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

.skip-link {
    position: absolute;
    top: -3rem;
    left: 1rem;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    z-index: 1000;
    transition: top 0.15s ease;
}

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

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

.eyebrow,
.hero__eyebrow,
.tri-link__eyebrow,
.article-card__eyebrow,
.post__eyebrow,
.page__eyebrow,
.collection-header__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0 0 0.6em;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9em 1.4em;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.btn--gold {
    background: var(--gold);
    color: var(--ink);
}

.btn--gold:hover {
    background: var(--teal);
    color: var(--bone);
}

/* Buttons that already sit on a teal background (header bar, footer,
   subscribe band) keep the original gold-brighten hover instead --
   a teal hover there would vanish into its own backdrop. */
.site-header__bar .btn--gold:hover,
.site-footer .btn--gold:hover,
.subscribe-band .btn--gold:hover {
    background: var(--gold);
    color: var(--ink);
    filter: brightness(1.06);
}

.btn--ink {
    background: var(--ink);
    color: var(--bone);
}

.btn--ink:hover {
    filter: brightness(1.2);
}

.btn--outline {
    background: transparent;
    border-color: var(--fg);
    color: var(--fg);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--fg);
}

.btn--small {
    padding: 0.55em 1em;
    font-size: 0.72rem;
}

.btn--large {
    padding: 1.1em 1.9em;
    font-size: 0.9rem;
}

/* ---------- layout helpers ---------- */

main > section,
.post,
.page,
.collection-header,
.article-grid,
.error-page {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.post__content,
.page__content {
    max-width: var(--content-narrow);
    margin-inline: auto;
}

section {
    padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* ===========================================================
   Header
   =========================================================== */

.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

/* ---------- masthead: the finished logo lockup image (wordmark,
   tagline and Watch/Listen/Read all baked into the graphic), scrolls
   away normally (the sticky bar below carries no logo of its own --
   see .site-header__bar) ---------- */

.masthead {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 2.5rem 1.5rem 1.5rem;
    text-align: center;
}

.masthead__logo {
    display: inline-block;
    text-decoration: none;
}

.masthead__logo img {
    max-width: 100%;
    height: auto;
}

/* ---------- compact sticky bar: nav + actions, no logo (the big
   lockup lives in .masthead above and scrolls away) ---------- */

.site-header__bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--header-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--gold);
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
}

.nav-primary {
    flex: 1;
    min-width: 0;
}

.nav-primary ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(1rem, 2.4vw, 2rem);
    margin: 0;
    padding: 0;
}

.nav-primary__divider {
    width: 1px;
    height: 1rem;
    background: var(--bone);
    opacity: 0.35;
    flex-shrink: 0;
}

.nav-primary a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--bone);
    white-space: nowrap;
}

.nav-primary a:hover {
    color: var(--gold);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--bone);
}

.theme-toggle__icon::before {
    content: "\2600";
}

html[data-theme="dark"] .theme-toggle__icon::before {
    content: "\263E";
}

.nav-toggle {
    display: none;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1.4rem;
    height: 2px;
    background: var(--bone);
    transform: translateX(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle__bar {
    top: 50%;
    margin-top: -1px;
}

.nav-toggle__bar::before {
    top: -0.5rem;
}

.nav-toggle__bar::after {
    top: 0.5rem;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    top: 0;
    transform: translateX(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    top: 0;
    transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1100px) {
    .nav-primary a {
        font-size: 0.82rem;
    }

    .nav-primary ul {
        gap: 1rem;
    }
}

@media (max-width: 780px) {
    .nav-toggle {
        display: block;
    }

    .site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--header-bg);
        border-bottom: 1px solid var(--gold);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem 1.5rem;
        display: none;
    }

    .site-header__nav.is-open {
        display: flex;
    }

    .nav-primary ul {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-primary__divider {
        display: none;
    }

    .site-header__actions {
        margin-top: 1rem;
    }
}

/* ---------- trending bar: sits right under the nav ---------- */

.trending-bar {
    border-bottom: 1px solid var(--border);
}

.trending-bar__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 0.65rem 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow: hidden;
}

.trending-bar__label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bone);
    flex-shrink: 0;
}

.trending-bar__list {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow: hidden;
}

.trending-bar__list li {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.trending-bar__list a {
    display: block;
    text-decoration: none;
    color: color-mix(in srgb, var(--bone) 75%, transparent);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trending-bar__list a:hover {
    color: var(--gold);
}

@media (max-width: 780px) {
    .trending-bar__inner {
        gap: 1rem;
    }

    .trending-bar__list {
        gap: 1rem;
    }

    .trending-bar__list li {
        flex-shrink: 0;
    }
}


/* ===========================================================
   Tri-link (Watch / Listen / Read)
   =========================================================== */

.tri-link {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--gold);
    padding-block: 0 !important;
}

.tri-link__item {
    display: block;
    text-decoration: none;
    color: var(--fg);
    padding: 1.6rem 1.8rem;
    border-right: 1px solid var(--border);
}

.tri-link__item:last-child {
    border-right: none;
}

.tri-link__item h3 {
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
}

.tri-link__item p:last-child {
    color: var(--caption);
    font-size: 0.85rem;
    margin: 0;
}

.tri-link__item:hover {
    background: rgba(200, 151, 31, 0.08);
}

.tri-link__item:hover h3 {
    color: var(--gold-dark);
}

.tri-link--compact {
    border-top: none;
    border-bottom: 1px solid var(--gold);
    padding-block: 0 0 2rem !important;
}

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

    .tri-link__item:nth-child(2) {
        border-right: none;
    }

    .tri-link__item:nth-child(1),
    .tri-link__item:nth-child(2) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 560px) {
    .tri-link,
    .tri-link--compact {
        grid-template-columns: 1fr;
    }

    .tri-link__item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

/* ===========================================================
   Episode / article cards + grids
   =========================================================== */

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.75rem;
    padding-block: 2rem 4rem;
}

.episode-card__art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}

.episode-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-card__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.episode-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.episode-card__play::before {
    content: "";
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.episode-card__art:hover .episode-card__play::before {
    opacity: 0.92;
}

.episode-card__date {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--caption);
    margin-top: 0.75rem;
}

.episode-card__title {
    font-size: 1.05rem;
    margin: 0.25rem 0 0.4rem;
}

.episode-card__title a {
    text-decoration: none;
}

.episode-card__excerpt {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

.article-card__image img {
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    margin-bottom: 0.85rem;
}

.article-card__title {
    font-size: 1.25rem;
    margin: 0.35rem 0 0.5rem;
}

.article-card__title a {
    text-decoration: none;
}

.article-card__excerpt {
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.article-card__meta {
    display: flex;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--caption);
}

.article-list__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.article-list__header a {
    text-decoration: none;
    color: var(--gold-dark);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.article-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.75rem;
}

/* ===========================================================
   Platform / "listen on" links
   =========================================================== */

.platform-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 1rem 0 0;
}

.platform-links li a {
    display: inline-block;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.4em 0.9em;
}

.platform-links li a:hover {
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* ===========================================================
   Newsletter capture
   =========================================================== */

.newsletter-cta {
    background: var(--ink);
    color: var(--bone);
    border-radius: calc(var(--radius) * 2);
    padding: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    max-width: var(--content-narrow);
    margin-inline: auto;
}

.newsletter-cta--footer,
.newsletter-cta--end-of-post,
.newsletter-cta--page-end,
.newsletter-cta--sidebar {
    background: transparent;
    color: var(--fg);
    padding-inline: 0;
}

.newsletter-cta--sidebar {
    text-align: left;
    max-width: none;
    margin-inline: 0;
}

.newsletter-cta--sidebar .newsletter-cta__copy h2 {
    font-size: 1.1rem;
}

.newsletter-cta--sidebar .newsletter-cta__form {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.newsletter-cta--sidebar .newsletter-cta__form input[type="email"] {
    width: 100%;
}

.newsletter-cta--end-of-post,
.newsletter-cta--page-end {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 2);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.newsletter-cta__copy h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: inherit;
}

.newsletter-cta__copy p {
    color: var(--stone);
}

.newsletter-cta--footer .newsletter-cta__copy p,
.newsletter-cta--end-of-post .newsletter-cta__copy p,
.newsletter-cta--page-end .newsletter-cta__copy p {
    color: var(--muted);
}

.newsletter-cta__form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.25rem;
}

.newsletter-cta__form input[type="email"] {
    flex: 1;
    min-width: 14rem;
    font: inherit;
    padding: 0.75em 1em;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
}

.newsletter-cta__message {
    width: 100%;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.message-success {
    color: #4fae63;
}

.message-error {
    color: #e0685a;
}

[data-members-form] .newsletter-cta__message {
    display: none;
}

[data-members-form].success .message-success,
[data-members-form].error .message-error {
    display: block;
}

.newsletter-cta__fineprint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--stone);
    margin-top: 0.9rem;
    margin-bottom: 0;
}

.newsletter-cta__thanks {
    font-family: var(--font-display);
    font-size: 1.1rem;
}

/* ===========================================================
   Splash subscribe overlay — first-visit gate, dismissed once
   and remembered via localStorage (see main.js)
   =========================================================== */

.splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg);
    color: var(--fg);
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

.splash[hidden] {
    display: none;
}

.splash__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: 0;
    color: var(--fg);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
}

.splash__inner {
    max-width: 30rem;
    width: 100%;
    text-align: center;
}

.splash__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.splash__wordmark {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.splash__wordmark-sub {
    color: var(--gold-dark);
}

.splash__tagline {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.splash__copy {
    color: var(--muted);
    margin-bottom: 1rem;
}

.splash__stat {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 1.5rem;
}

.splash__form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.splash__form input[type="email"] {
    flex: 1;
    min-width: 14rem;
    font: inherit;
    padding: 0.9em 1em;
    border-radius: 4px;
    border: 1px solid var(--gold);
    background: var(--bg-elevated);
    color: var(--fg);
}

.splash__message {
    width: 100%;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

[data-members-form] .splash__message {
    display: none;
}

[data-members-form].success .message-success,
[data-members-form].error .message-error {
    display: block;
}

.splash__fineprint {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--stone);
    margin-top: 0.9rem;
}

.splash__continue {
    margin-top: 1.75rem;
}

body.splash-open {
    overflow: hidden;
}

/* ===========================================================
   Post / page
   =========================================================== */

.post,
.page {
    padding-block: 3rem 4rem;
}

.post__header,
.page__header {
    max-width: var(--content-narrow);
    margin-inline: auto;
    text-align: left;
}

.post__title,
.page__title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
}

.post__byline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--caption);
}

.post__byline-name {
    color: var(--slate);
}

.post__rule {
    height: 1px;
    background: var(--gold);
    margin: 1.5rem 0;
}

.post__meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--caption);
}

.post__feature-image {
    max-width: 100%;
    margin: 2rem 0;
}

.post__feature-image img {
    border-radius: var(--radius);
    width: 100%;
}

.post__listen {
    max-width: var(--content-narrow);
    margin-inline: auto;
}

.post__content,
.page__content {
    --gap: max(4vmin, 1.25rem);
    --main: min(var(--content-narrow), 100% - var(--gap) * 2);
    --wide: minmax(0, calc((var(--content-width) - var(--content-narrow)) / 2));
    --full: minmax(var(--gap), 1fr);
    display: grid;
    grid-template-columns:
        [full-start] var(--full)
        [wide-start] var(--wide)
        [main-start] var(--main)
        [main-end] var(--wide)
        [wide-end] var(--full)
        [full-end];
    font-family: var(--font-sans);
    font-size: 1.06rem;
    line-height: 1.75;
}

.post__content > *,
.page__content > * {
    grid-column: main-start / main-end;
}

.post__content > p:first-of-type {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--fg);
}

.kg-width-wide {
    grid-column: wide-start / wide-end;
}

.kg-width-full {
    grid-column: full-start / full-end;
}

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

.post__content img,
.page__content img {
    border-radius: var(--radius);
    max-width: 100%;
}

.post__content a,
.page__content a {
    color: var(--gold-dark);
}

.post__content blockquote,
.page__content blockquote {
    border-left: 3px solid var(--gold);
    padding: 0.4rem 0 0.4rem 1.4rem;
    margin: 1.75rem 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--fg);
}

.post__content hr,
.page__content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.75rem 0;
}

.post__author {
    display: flex;
    gap: 1rem;
    align-items: center;
    max-width: var(--content-narrow);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.post__author img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    object-fit: cover;
}

.post__author-name {
    font-weight: 700;
    margin: 0;
}

.post__author-bio {
    color: var(--muted);
    margin: 0;
    font-size: 0.9rem;
}

.post__pagination {
    max-width: var(--content-narrow);
    margin: 2rem auto 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.post__pagination a {
    text-decoration: none;
    color: var(--muted);
}

.post__newsletter,
.page__newsletter {
    max-width: var(--content-narrow);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* ===========================================================
   Collection headers (watch / listen / read / tag / author)
   =========================================================== */

.collection-header {
    text-align: center;
    padding-block: 3rem 2rem;
}

.author-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    object-fit: cover;
    margin: 0 auto 1rem;
}

.author-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    font-size: 0.9rem;
}

/* ===========================================================
   Advertise / media kit page
   =========================================================== */

.page--advertise .page__header {
    text-align: center;
    max-width: 40rem;
}

.page__lede {
    color: var(--muted);
    font-size: 1.05rem;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 1.5rem;
    text-align: center;
    padding-block: 1rem 3rem !important;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-tile__value {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 600;
    color: var(--gold-dark);
}

.stat-tile__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--caption);
}

.rate-card {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-block: 1rem 2rem !important;
}

.rate-card__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.rate-card__table td {
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--border);
}

.rate-card__table td:last-child {
    text-align: right;
    color: var(--gold-dark);
    font-weight: 600;
}

.advertise-cta {
    text-align: center;
    padding-block: 1rem 3rem !important;
}

/* ===========================================================
   Error page
   =========================================================== */

.error-page {
    text-align: center;
    padding-block: 5rem;
    background: var(--bone);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.error-page h1 {
    font-size: 4rem;
    margin: 0.5rem 0 0;
}

/* ===========================================================
   Footer
   =========================================================== */

.site-footer {
    background: var(--teal);
    color: var(--bone);
    padding-block: 3rem 2rem;
}

.site-footer .newsletter-cta {
    background: transparent;
    color: inherit;
    padding-inline: 0;
}

.site-footer .newsletter-cta__copy p {
    color: var(--stone);
}

.site-footer .newsletter-cta__form input[type="email"] {
    background: #211e17;
    border-color: #3a362a;
    color: var(--bone);
}

.site-footer__newsletter {
    max-width: var(--content-width);
    margin: 0 auto 3rem;
    padding-inline: 1.5rem;
}

.site-footer__grid {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    font-size: 0.9rem;
}

.site-footer__tagline {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--gold);
    font-size: 1.1rem;
    margin: 0.75rem 0 0.4rem;
}

.site-footer__about {
    max-width: 22rem;
}

.site-footer__about p:not(.site-footer__tagline) {
    color: var(--stone);
}

.site-footer__grid h3 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--stone);
    margin-bottom: 0.9rem;
}

.site-footer__grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.site-footer__grid a {
    text-decoration: none;
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.site-footer__grid a:hover {
    color: var(--gold);
}

.site-footer .platform-links li a {
    border-color: #3a362a;
    color: var(--bone);
}

.site-footer .platform-links li a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.site-footer__meta {
    max-width: var(--content-width);
    margin: 2rem auto 0;
    padding-inline: 1.5rem;
    color: var(--stone);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__about {
        grid-column: auto;
    }
}

/* ===========================================================
   Shared: topic chips (used on Watch/Listen/Learn cards)
   =========================================================== */

.topic-chips {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 0.5rem;
}

.topic-chips a {
    text-decoration: none;
    color: inherit;
}

.topic-chips--small {
    font-size: 0.68rem;
    margin-bottom: 0.35rem;
}

.topic-chips--on-dark {
    color: var(--gold);
}

/* ===========================================================
   /watch/ — Vox Explainers-style: lead feature + dense grid
   =========================================================== */

.explainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.75rem 1.5rem;
    padding-block: 1rem 4rem;
}

.watch-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.watch-feature__image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}

.watch-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-feature__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.watch-feature__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.watch-feature__play::before {
    content: "";
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.94;
}

.watch-feature__title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.05;
    margin: 0 0 0.6rem;
}

.watch-feature__title a {
    text-decoration: none;
}

.watch-feature__excerpt {
    color: var(--muted);
    font-size: 1.05rem;
}

@media (max-width: 780px) {
    .watch-feature {
        grid-template-columns: 1fr;
    }
}

.watch-card__image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    margin-bottom: 0.75rem;
}

.watch-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-card__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.watch-card__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.watch-card__play::before {
    content: "";
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.watch-card__image:hover .watch-card__play::before {
    opacity: 0.94;
}

.watch-card__title {
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
}

.watch-card__title a {
    text-decoration: none;
}

.watch-card__excerpt {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}

/* ===========================================================
   /listen/ — 99% Invisible-style: text-forward vertical list +
   topic/newsletter sidebar
   =========================================================== */

.listen-layout {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1rem 4rem;
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.listen-layout__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 6rem;
}

.listen-sidebar__box h3 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--caption);
    margin-bottom: 0.9rem;
}

.listen-sidebar__topics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.listen-sidebar__topics a {
    text-decoration: none;
    color: var(--fg);
    font-size: 0.92rem;
    border-bottom: 1px solid transparent;
}

.listen-sidebar__topics a:hover {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

@media (max-width: 900px) {
    .listen-layout {
        grid-template-columns: 1fr;
    }

    .listen-layout__sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem 3rem;
    }
}

.listen-list {
    display: flex;
    flex-direction: column;
}

.listen-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--border);
}

.listen-row:first-child {
    padding-top: 0;
}

.listen-row__play {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ink);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.listen-row__play-icon {
    width: 0;
    height: 0;
    border-left: 0.85rem solid var(--gold);
    border-top: 0.55rem solid transparent;
    border-bottom: 0.55rem solid transparent;
    margin-left: 0.2rem;
}

.listen-row__meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--caption);
    margin-bottom: 0.4rem;
}

.listen-row__title {
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
}

.listen-row__title a {
    text-decoration: none;
}

.listen-row__excerpt {
    color: var(--muted);
    margin: 0 0 0.6rem;
}

.listen-row__actions {
    display: flex;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--gold-dark);
}

.listen-row__actions a {
    text-decoration: none;
    color: inherit;
}

.listen-row__actions a:hover {
    text-decoration: underline;
}

/* ===========================================================
   /read/ — n+1-style category tabs (Essays / Fiction / Poems /
   Book Review), each its own URL — tabs just navigate
   =========================================================== */

.read-tabs {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.9rem;
    margin-bottom: 0.5rem;
}

.read-tabs__item {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--caption);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1rem;
}

.read-tabs__item:hover {
    color: var(--fg);
}

.read-tabs__item.is-active {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

/* ===========================================================
   /read/ — literary essay archive (spare, type-led, whitespace
   over imagery)
   =========================================================== */

.essay-archive {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-block: 1rem 4rem;
}

.essay-feature {
    padding-bottom: 3rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--gold);
}

.essay-feature__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.04;
    margin: 0.4rem 0 1.1rem;
}

.essay-feature__title a {
    text-decoration: none;
}

.essay-feature__excerpt {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--fg);
    margin-bottom: 1.5rem;
}

.essay-feature__byline {
    display: flex;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--caption);
    margin-bottom: 1.25rem;
}

.essay-feature__author {
    color: var(--slate);
}

.essay-feature__link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    text-decoration: none;
}

.essay-row {
    padding-block: 2rem;
    border-bottom: 1px solid var(--border);
}

.essay-row:last-child {
    border-bottom: none;
}

.essay-row__title {
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0 0 0.6rem;
}

.essay-row__title a {
    text-decoration: none;
}

.essay-row__excerpt {
    color: var(--muted);
    margin: 0 0 0.7rem;
}

.essay-row__byline {
    display: flex;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--caption);
}

/* ===========================================================
   /learn/ — MasterClass-style: cinematic Ink hero + grid
   =========================================================== */

.learn-hero {
    background: var(--ink);
    color: var(--bone);
    text-align: center;
    padding-block: clamp(3rem, 7vw, 5.5rem) !important;
}

.learn-hero__eyebrow {
    color: var(--gold);
}

.learn-hero__title {
    color: var(--bone);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.learn-hero__tagline {
    font-family: var(--font-sans);
    color: var(--stone);
    max-width: 34rem;
    margin-inline: auto;
    font-size: 1.05rem;
}

.learn-hero__note {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-top: 1rem;
}

.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.75rem;
    padding-block: 3rem !important;
}

.archive-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
}

.learn-card {
    background: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.learn-card__art {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, #201d15, var(--ink));
}

.learn-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.learn-card__avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0.85;
}

.learn-card__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--gold);
    padding: 0.3em 0.6em;
    border-radius: 3px;
}

.learn-card__body {
    padding: 1.1rem 1.2rem 1.4rem;
    color: var(--bone);
}

.learn-card__title {
    font-size: 1.1rem;
    color: var(--bone);
    margin: 0 0 0.4rem;
}

.learn-card__title a {
    text-decoration: none;
    color: inherit;
}

.learn-card__excerpt {
    color: var(--stone);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
}

.learn-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid #2e2b22;
}

.learn-card__certificate,
.learn-card__instructor {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
}

.learn-card__instructor {
    color: var(--stone);
}

/* ---------- "what's included" value-prop row ---------- */

.learn-included {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 2rem;
    padding-block: 2.5rem 1rem !important;
    text-align: center;
}

.learn-included__icon {
    color: var(--gold);
    font-size: 1.3rem;
    margin: 0 0 0.6rem;
}

.learn-included__item h3 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

.learn-included__item p:last-child {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

.collection-header--learn {
    padding-block: 3rem 0.5rem !important;
}

/* ===========================================================
   /author/jamal-awil/ ("Write") — gladwellbooks.com-style:
   featured-piece hero, bio block, "also by" grid
   =========================================================== */

.write-hero {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem !important;
}

.write-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.write-hero__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.05;
    margin: 0.4rem 0 1rem;
}

.write-hero__title a {
    text-decoration: none;
}

.write-hero__excerpt {
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.write-hero__image img {
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 780px) {
    .write-hero {
        grid-template-columns: 1fr;
    }

    .write-hero__image {
        order: -1;
    }
}

.write-bio {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    padding-block: 2.5rem !important;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.write-bio__portrait {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-elevated, var(--bone));
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
}

.write-bio__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.write-bio__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 0.3rem;
}

.write-bio h2 {
    font-size: 1.6rem;
    margin: 0 0 0.6rem;
}

.write-bio__text {
    color: var(--muted);
    max-width: 40rem;
}

.write-bio__links {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0.75rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.write-bio__links a {
    text-decoration: none;
    color: var(--gold-dark);
}

@media (max-width: 560px) {
    .write-bio {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

.write-more {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 3rem 4rem !important;
}

.write-more__heading {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.write-more__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.75rem;
}

/* ===========================================================
   /about/ — mission + goals grid
   =========================================================== */

.about-hero {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    text-align: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem !important;
}

.about-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
}

.about-hero__lede {
    font-family: var(--font-sans);
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 34rem;
    margin-inline: auto;
}

.goals-grid {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    padding-block: 0 !important;
}

.goals-grid__item {
    background: var(--bg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
}

.goals-grid__number {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    margin: 0 0 0.75rem;
}

.goals-grid__item h3 {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
}

.goals-grid__item p:last-child {
    color: var(--muted);
    margin: 0;
}

@media (max-width: 700px) {
    .goals-grid {
        grid-template-columns: 1fr;
    }
}

.about-editor {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--caption);
    padding-block: 2.5rem 1rem !important;
}

.about-editor a {
    color: var(--gold-dark);
    text-decoration: none;
}

/* ===========================================================
   /contact/ — form (or a plain email fallback when no backend
   endpoint is configured)
   =========================================================== */

.page--contact .page__lede {
    color: var(--muted);
}

.contact-form {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    gap: 1.25rem;
    padding-block: 1rem 3rem;
}

.contact-form__row {
    display: grid;
    gap: 0.4rem;
}

.contact-form__row label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--caption);
}

.contact-form__row input,
.contact-form__row textarea {
    font: inherit;
    font-family: var(--font-sans);
    padding: 0.75em 1em;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
    resize: vertical;
}

.contact-form button {
    justify-self: start;
}

.contact-form-placeholder {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1rem 3rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
}

.contact-form-placeholder a {
    color: var(--gold-dark);
}

/* ===========================================================
   Native Ghost content cards — video, audio, generic embeds.
   Editors add these directly in the post editor (paste a YouTube/
   Vimeo/Spotify link, or use the Video/Audio card to upload a
   file) — Ghost renders the markup, this just makes it responsive
   and on-brand. card_assets:true in package.json already loads
   Ghost's own player CSS/JS for the audio/video cards.
   =========================================================== */

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

.kg-embed-card iframe {
    width: 100%;
    border: 0;
    border-radius: var(--radius);
}

/* Full-bleed video platforms get a true 16:9 frame */
.kg-embed-card iframe[src*="youtube.com"],
.kg-embed-card iframe[src*="youtube-nocookie.com"],
.kg-embed-card iframe[src*="player.vimeo.com"] {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Podcast platform widgets (Spotify/SoundCloud/Anchor) keep their
   own natural height instead of being squashed to 16:9 */
.kg-embed-card iframe[src*="spotify.com"],
.kg-embed-card iframe[src*="soundcloud.com"],
.kg-embed-card iframe[src*="anchor.fm"] {
    height: 232px;
}

.kg-video-card {
    border-radius: var(--radius);
    overflow: hidden;
}

.kg-video-card video {
    width: 100%;
    display: block;
    border-radius: var(--radius);
}

.kg-audio-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.kg-bookmark-card a {
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Video/audio embeds read better wide on Watch/Listen posts */
.post--episode .post__content .kg-embed-card,
.post--episode .post__content .kg-video-card,
.post--episode .post__content .kg-audio-card {
    grid-column: wide-start / wide-end;
}

@media (max-width: 780px) {
    .post--episode .post__content .kg-embed-card,
    .post--episode .post__content .kg-video-card,
    .post--episode .post__content .kg-audio-card {
        grid-column: main-start / main-end;
    }
}

/* Native Ghost Button card — used as the real "Buy now" CTA on Shop
   product pages (the editor pastes their actual checkout link into a
   Button card; this just makes it look like a proper CTA). */
.kg-btn {
    display: inline-flex !important;
    font-family: var(--font-mono) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: var(--gold) !important;
    color: var(--ink) !important;
    border-radius: 4px !important;
    padding: 0.9em 1.6em !important;
    text-decoration: none !important;
}

/* ===========================================================
   /shop/ — Gumroad-style storefront
   =========================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.75rem;
    padding-block: 1rem 4rem;
}

.product-card__image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    margin-bottom: 0.85rem;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.product-card__title {
    font-size: 1.05rem;
    margin: 0 0 0.3rem;
}

.product-card__title a {
    text-decoration: none;
}

.product-card__seller {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--caption);
    margin: 0 0 0.4rem;
}

.product-card__price {
    font-weight: 600;
    color: var(--gold-dark);
    margin: 0;
}

.post__price {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-dark);
    margin: 0.75rem 0 0;
}

/* ===========================================================
   /stream/ — live embed + breaking feed
   =========================================================== */

.stream-section {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1rem 2.5rem !important;
}

.stream-embed {
    display: grid;
    gap: 1.5rem;
}

.stream-embed__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}

.stream-embed__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.stream-embed__placeholder {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

.stream-embed__radio audio {
    width: 100%;
}

.breaking-feed {
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1rem 4rem !important;
}

.breaking-feed__heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.breaking-row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--border);
}

.breaking-row:first-child {
    padding-top: 0;
}

.breaking-row:last-child {
    border-bottom: none;
}

.breaking-row__time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--caption);
    white-space: nowrap;
}

.breaking-row__title {
    font-size: 1rem;
    margin: 0 0 0.3rem;
}

.breaking-row__title a {
    text-decoration: none;
}

.breaking-row__excerpt {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 500px) {
    .breaking-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

/* ===========================================================
   YouTube click-to-load facade (assets/js/main.js)
   =========================================================== */

.yt-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
    cursor: pointer;
    padding: 0;
}

.yt-facade__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.yt-facade__play::before {
    content: "";
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.yt-facade__play::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1.2rem solid var(--ink);
    border-top: 0.75rem solid transparent;
    border-bottom: 0.75rem solid transparent;
    margin-left: 0.2rem;
}

/* ===========================================================
   Reading progress bar + table of contents (Read posts)
   =========================================================== */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--gold);
    z-index: 200;
    transition: width 0.1s linear;
}

.post-toc {
    display: none;
}

@media (min-width: 1400px) {
    .post-toc:not([hidden]) {
        display: block;
        position: fixed;
        top: 8rem;
        left: calc(50% - (var(--content-narrow) / 2) - 13rem);
        width: 11rem;
        max-height: 70vh;
        overflow-y: auto;
    }
}

.post-toc__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--caption);
    margin: 0 0 0.75rem;
}

.post-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
    border-left: 1px solid var(--border);
}

.post-toc__item a {
    display: block;
    padding-left: 0.9rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
}

.post-toc__item--h3 a {
    padding-left: 1.6rem;
    font-size: 0.8rem;
}

.post-toc__item a.is-active {
    color: var(--gold-dark);
    border-left-color: var(--gold);
}

/* ===========================================================
   Footnotes, pull quotes, drop cap (native Koenig markup)
   =========================================================== */

.post__content .footnotes,
.page__content .footnotes {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--muted);
}

.post__content .footnotes ol,
.page__content .footnotes ol {
    padding-left: 1.2rem;
}

@media (min-width: 1100px) {
    /* Sidenote treatment: footnote references float into the right
       margin instead of jumping to a list at the bottom. Opt-in per
       piece by wrapping footnotes in a "sidenotes" internal tag isn't
       automatic here — this upgrades the *reference links* only, which
       is safe on every Read post regardless. */
    .post__content sup[id^="fnref"] a {
        color: var(--gold-dark);
        font-weight: 600;
    }
}

.kg-blockquote-alt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.35;
    border: none;
    padding: 0;
    margin: 2.5rem 0;
    color: var(--fg);
}

/* Drop cap: opt-in via an internal #dropcap tag on the post (adds
   .has-dropcap to <article>) rather than forced on every essay. */
.has-dropcap .post__content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 0.8;
    padding: 0.1em 0.1em 0 0;
    color: var(--gold-dark);
}

/* ===========================================================
   Related videos block (Watch posts)
   =========================================================== */

.post__related {
    max-width: var(--content-width);
    margin: 3rem auto 0;
    padding-inline: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.post__related-heading {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.post__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1.5rem;
}

/* ===========================================================
   Vertical video support — opt in per post via an internal
   #vertical tag (adds .is-vertical to the embed's parent via a
   post-level class on <article>)
   =========================================================== */

.is-vertical .kg-embed-card iframe,
.is-vertical .kg-video-card video {
    aspect-ratio: 9 / 16 !important;
    max-height: 90vh;
    width: auto !important;
    margin-inline: auto;
}

/* ===========================================================
   Sticky mini-player (Listen posts)
   =========================================================== */

.sticky-player {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--ink);
    color: var(--bone);
    border-radius: 999px;
    padding: 0.6rem 0.6rem 0.6rem 1.1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    max-width: calc(100vw - 2rem);
}

.sticky-player[hidden] {
    display: none;
}

.sticky-player__title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.sticky-player__toggle {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--ink);
    border: none;
    border-radius: 999px;
    padding: 0.4em 0.9em;
    cursor: pointer;
}

.sticky-player__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--stone);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem;
}

/* ===========================================================
   Transcript disclosure — a native <details>/<summary> the
   editor adds via an HTML card, no theme logic required
   =========================================================== */

.post__content details {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.75rem 0;
}

.post__content details summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.post__content details[open] summary {
    margin-bottom: 1rem;
}

.post__content details p {
    color: var(--muted);
}

/* ===========================================================
   Learn / lesson scaffolding
   =========================================================== */

.lesson-complete-row {
    max-width: var(--content-narrow);
    margin: 2.5rem auto 0;
    text-align: center;
}

.lesson-complete-row .btn.is-complete {
    background: var(--slate);
    color: var(--bone);
}

.lesson-nav {
    max-width: var(--content-narrow);
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.lesson-nav a {
    text-decoration: none;
    color: var(--gold-dark);
}

/* Curriculum lists (course landing pages) — [data-lesson-slug] items get
   a checkmark once main.js finds them in localStorage completion state */
[data-lesson-slug] {
    position: relative;
}

[data-lesson-slug].is-complete::after {
    content: "\2713";
    position: absolute;
    right: 0;
    top: 0;
    color: var(--gold);
    font-weight: 700;
}

/* Native Ghost File card — downloadable resources (PDFs, worksheets) */
.kg-file-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--fg);
    background: var(--bg-elevated);
}

.kg-file-card-title {
    font-weight: 600;
}

.kg-file-card-caption {
    color: var(--muted);
    font-size: 0.85rem;
}

.kg-file-card-metadata {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--caption);
}

.kg-file-card-icon {
    flex-shrink: 0;
}

/* ===========================================================
   Native comments wrapper
   =========================================================== */

.post__comments {
    max-width: var(--content-narrow);
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* ===========================================================
   /listen/shows/ — shows index grid
   =========================================================== */

.shows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.75rem;
    padding-block: 1rem 4rem;
}

.show-card__image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
    margin-bottom: 0.85rem;
}

.show-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.show-card__avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.show-card__title {
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.show-card__title a {
    text-decoration: none;
}

.show-card__description {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.show-card__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0;
}

/* ===========================================================
   /listen/shows/{show}/ — single show page
   =========================================================== */

.show-hero {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    align-items: center;
    padding-block: clamp(2rem, 5vw, 3.5rem) 2rem !important;
}

.show-hero__image {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}

.show-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.show-hero__avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.show-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.show-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0.3rem 0 0.75rem;
}

.show-hero__description {
    color: var(--muted);
}

.show-hero__count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--caption);
}

@media (max-width: 600px) {
    .show-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .show-hero__image {
        max-width: 12rem;
        margin-inline: auto;
    }
}

.season-tabs {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
}

.season-tabs__item {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold-dark);
}

.season-tabs__item:hover {
    color: var(--gold);
}

.show-season {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1.5rem 2rem !important;
    scroll-margin-top: 6rem;
}

.show-season__heading {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.show-season__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.5rem;
}

/* ===========================================================
   Shows accordion — embedded directly on /listen/ (native
   <details>/<summary>, no JS)
   =========================================================== */

.listen-shows {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 1rem 3rem !important;
}

.listen-shows__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.listen-shows__header h2 {
    font-size: 1.3rem;
    margin: 0;
}

.listen-shows__header a:hover {
    color: var(--gold);
}

.listen-shows__header a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--gold-dark);
    white-space: nowrap;
}

.listen-shows__list {
    display: grid;
    gap: 0.75rem;
}

.show-accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.show-accordion[open] {
    border-color: var(--gold);
}

.show-accordion__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.show-accordion__summary::-webkit-details-marker {
    display: none;
}

.show-accordion__summary:hover,
.show-accordion__summary:focus-visible {
    background: rgba(200, 151, 31, 0.08);
}

.show-accordion__summary:hover .show-accordion__name,
.show-accordion__summary:focus-visible .show-accordion__name {
    color: var(--gold-dark);
}

.show-accordion__summary:hover .show-accordion__chevron,
.show-accordion__summary:focus-visible .show-accordion__chevron {
    border-color: var(--gold-dark);
}

.show-accordion__thumb {
    position: relative;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ink);
    display: grid;
    place-items: center;
}

.show-accordion__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.show-accordion__meta {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.show-accordion__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
}

.show-accordion__description {
    color: var(--muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.show-accordion__count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.show-accordion__chevron {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--caption);
    border-bottom: 2px solid var(--caption);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 0.3rem;
}

.show-accordion[open] .show-accordion__chevron {
    transform: rotate(-135deg);
}

.show-accordion__content {
    padding: 0 1.25rem 1.5rem;
    border-top: 1px solid var(--border);
}

.show-accordion__season {
    padding-top: 1.25rem;
}

.show-accordion__season h4 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--caption);
    margin: 0 0 0.9rem;
}

.show-accordion__episodes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.25rem;
}

.show-accordion__full-link {
    display: inline-block;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--gold-dark);
}

.show-accordion__full-link:hover {
    color: var(--gold);
}

@media (max-width: 500px) {
    .show-accordion__description {
        display: none;
    }
}

/* ===========================================================
   Brand sendoff — large logo lockup before the footer
   =========================================================== */

.brand-sendoff {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal);
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
}

.brand-sendoff__logo {
    max-width: 100%;
    height: auto;
}

/* ===========================================================
   Section-taxonomy homepage layout
   Everything below powers index.hbs's lead grid, river+rail, the
   reusable section-box grid, Featured Videos, and the subscribe band --
   plus the shared Most Read rail module section-page.hbs reuses on
   every one of the 10 official sections' archive pages.
   =========================================================== */

/* ---------- lead grid: 2 headlines | big feature | Most Read rail ---------- */

.lead-grid {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.lead-grid__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lead-grid__item-title {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}

.lead-grid__item-title a {
    text-decoration: none;
    color: inherit;
}

.lead-grid__item-title a:hover {
    color: var(--gold-dark);
}

.lead-grid__item-excerpt {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.lead-grid__feature-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink);
    margin-bottom: 1rem;
}

.lead-grid__feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lead-grid__feature-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.lead-grid__feature-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    line-height: 1.06;
    margin: 0 0 0.6rem;
}

.lead-grid__feature-title a {
    text-decoration: none;
    color: inherit;
}

.lead-grid__feature-title a:hover {
    color: var(--gold-dark);
}

.lead-grid__feature-byline {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--caption);
    margin: 0;
}

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

    .lead-grid__feature {
        order: -1;
    }

    .lead-grid__aside--left {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
    }

    .lead-grid__aside--left .lead-grid__item {
        flex: 1 1 14rem;
    }
}

/* ---------- rail modules: Most Read + Opinions (shared by the
   homepage river and every new section's section-page.hbs) ---------- */

.rail-module {
    padding-block: 1.75rem;
    border-top: 1px solid var(--border);
}

.rail-module:first-child {
    padding-top: 0;
    border-top: none;
}

.rail-module__title {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    display: block;
}

.most-read__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.most-read__item {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.most-read__num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--gold-dark);
    flex-shrink: 0;
}

.most-read__link {
    text-decoration: none;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
}

.most-read__link:hover {
    color: var(--gold-dark);
}

/* ---------- river + rail: repeating large story blocks paired with
   a persistent Most Read sidebar ---------- */

.section-river-wrap {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section-river {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.section-river__main {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .section-river {
        grid-template-columns: 1fr;
    }
}

.river-story {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    padding-block: 2.25rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.river-story:first-child {
    padding-top: 0;
}

.river-story:last-child {
    border-bottom: none;
}

.river-story__image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink);
}

.river-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.river-story__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.river-story__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0 0 0.5rem;
}

.river-story__title {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    margin: 0 0 0.6rem;
}

.river-story__title a {
    text-decoration: none;
    color: inherit;
}

.river-story__title a:hover {
    color: var(--gold-dark);
}

.river-story__excerpt {
    color: var(--muted);
    margin: 0 0 0.6rem;
}

.river-story__byline {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--caption);
    margin: 0;
}

@media (max-width: 640px) {
    .river-story {
        grid-template-columns: 1fr;
    }
}

/* ---------- reusable section-box: eyebrow header + feature image +
   3-headline list + big feature headline below ---------- */

.section-box-grid {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 3rem;
}

@media (max-width: 780px) {
    .section-box-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.section-box {
    padding-top: 1.5rem;
    border-top: 2px solid var(--fg);
}

.section-box__header {
    margin-bottom: 1rem;
}

.section-box__header a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg);
}

.section-box__header a:hover {
    color: var(--gold-dark);
}

.section-box__grid {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.section-box__feature-image {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ink);
}

.section-box__feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-box__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.section-box__list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.section-box__list-item {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}

.section-box__list-item a {
    text-decoration: none;
    color: inherit;
}

.section-box__list-item a:hover {
    color: var(--gold-dark);
}

.section-box__feature-title {
    font-size: 1.3rem;
    line-height: 1.18;
    margin: 0;
}

.section-box__feature-title a {
    text-decoration: none;
    color: inherit;
}

.section-box__feature-title a:hover {
    color: var(--gold-dark);
}

/* ---------- subscribe band: full-bleed tinted CTA ---------- */

.subscribe-band {
    background: var(--teal);
    color: var(--bone);
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
}

.subscribe-band__mark {
    display: block;
    line-height: 0;
}

.subscribe-band h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin: 0;
    color: var(--bone);
}

/* ---------- horizontal-scroll rows: Featured Videos
   (shared behavior added in main.js) ---------- */

[data-hscroll] {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}

[data-hscroll] > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.hscroll-wrap {
    position: relative;
}

.hscroll-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--fg);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 2;
}

.hscroll-arrow--prev {
    left: -1.2rem;
}

.hscroll-arrow--next {
    right: -1.2rem;
}

@media (max-width: 640px) {
    .hscroll-arrow {
        display: none;
    }
}

/* ---------- Featured Videos ---------- */

.video-strip-section {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.video-strip-card {
    width: 14rem;
}

.video-strip-card__image {
    position: relative;
    display: block;
    aspect-ratio: 9 / 12;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink);
    margin-bottom: 0.75rem;
}

.video-strip-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-strip-card__cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.video-strip-card__play {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(22, 20, 15, 0.68);
}

.video-strip-card__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0.35rem 0 0.35rem 0.55rem;
    border-color: transparent transparent transparent var(--bone);
}

.video-strip-card__title {
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 0;
}

.video-strip-card__title a {
    text-decoration: none;
    color: inherit;
}

.video-strip-card__title a:hover {
    color: var(--gold-dark);
}