/* ==========================================================================
   site.css — CUSTOM layer on top of Manifesto's screen.css
   Everything site-specific lives here so screen.css stays as Kyle shipped it
   and future Manifesto updates can be merged by hand.

   Contents
   1.  Fonts (Paste, bundled) and font roles
   2.  Palette: Sand, Canvas, Dune, Clay
   3.  Dark mode palette
   4.  Paste: one weight, lowercase everywhere it is used
   5.  Post titles and standfirst (Freight Display / Text)
   6.  Body faces: Freight Text, or Freight Micro on "Letter" posts
   7.  Quotes, callouts, captions
   8.  Editor cards kept inside the four colours
   9.  Archive (archive.hbs)
   10. Film grain (reusable)
   11. Homepage hero (partials/site-hero.hbs)
   12. Text links to other places, "listen on"
   13. Episodes: player at the top
   ========================================================================== */


/* ==========================================================================
   1. Fonts
   Paste ships in assets/fonts. It has a single weight, so the face is
   declared across the whole weight range: any font-weight the theme asks
   for maps to the real file and the browser never fakes a bold.
   Freight families come from the Typographer snippet (Code Injection).
   ========================================================================== */

@font-face {
    font-family: "Paste";
    src: url("../fonts/paste-regular.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Paste";
    src: url("../fonts/paste-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Roles. Freight names match the Typographer kit; Georgia stands in if it hasn't loaded */
    --font-paste: "Paste", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-freight-text: "Freight Text", Georgia, "Times New Roman", serif;
    --font-freight-micro: "Freight Micro", "Freight Text", Georgia, serif;
    --font-freight-display: "Freight Display", "Freight Text", Georgia, serif;

    /* Manifesto's variables, pointed at the roles above. Ghost's own font picker
       (--gh-font-*) is deliberately ignored so the type system can't be changed by accident */
    --font-display: var(--font-paste);
    --font-heading: var(--font-paste);
    --font-text: var(--font-freight-text);
    --font-body: var(--font-freight-text);
}


/* ==========================================================================
   2. Palette — four colours only. Tints are Dune mixed into Sand.
   Contrast (WCAG): Dune on Sand 12.4:1 · Dune on Canvas 9.9:1 · muted on Sand 6.7:1,
   on Canvas 5.3:1 · Clay on Sand 5.0:1 · Sand on Clay 5.0:1 · Canvas on Dune 9.9:1.
   Clay on Canvas is 4.0:1, so small text on Canvas stays Dune (Clay only underlines).
   ========================================================================== */

:root {
    --sand: #F7F3F2;
    --canvas: #E2D9D3;
    --dune: #302D28;
    --clay: #A74D4A;

    --color-paper: var(--sand);
    --color-paper-deep: var(--canvas);
    --color-ink: var(--dune);
    --color-ink-muted: #585550;            /* 80% Dune on Sand */
    --color-rule: var(--dune);
    --color-rule-soft: var(--canvas);
    --color-inverse-text: var(--sand);
    --color-inverse-muted: var(--canvas);
    --color-inverse-rule: #625e5a;         /* 25% Sand on Dune */

    /* Always Clay; Ghost's Accent colour setting is deliberately not used (default.hbs) */
    --color-accent: var(--clay);
    /* Always Sand on Clay (5.0:1), instead of Manifesto's automatic black/white */
    --color-on-accent: var(--sand);
}


/* ==========================================================================
   3. Dark mode — follows the visitor's system setting, as Manifesto does.
   Page is Dune, type is Sand. Clay on Dune is only 2.5:1, so Clay is used
   for fills and underlines in dark mode, never for text.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-paper: var(--dune);
        --color-paper-deep: #3e3b36;       /* 7% Sand on Dune */
        --color-ink: var(--sand);
        --color-ink-muted: var(--canvas);  /* 9.9:1 */
        --color-rule: #625e5a;
        --color-rule-soft: #484540;
        --color-inverse-text: var(--dune);
        --color-inverse-muted: #585550;
        --color-inverse-rule: var(--canvas);
    }
}


/* ==========================================================================
   4. Paste — titles, navigation, buttons and metadata, always lowercase.
   Manifesto sets these in uppercase; here everything is lowercase, with a
   touch of tracking at small sizes because Paste is heavy.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.display,
.eyebrow,
.button,
.arrow-link,
.site-nav .nav a,
.site-tools__link,
.masthead__date,
.masthead__description,
.meta-row,
.access-badge,
.article-header__section,
.footer-column__title,
.post-nav__label,
.post-nav__title,
.pagination__count,
.share__label,
.byline__comments,
.post-card__eyebrow,
.post-card__top,
.episode-row__cue,
.site-footer {
    font-weight: 400;
    text-transform: lowercase;
}

.display {
    line-height: 0.95;              /* lowercase descenders need more room than Manifesto's capitals */
    letter-spacing: -0.02em;
}

.eyebrow,
.button,
.arrow-link,
.masthead__date,
.access-badge,
.footer-column__title,
.post-nav__label,
.meta-row {
    letter-spacing: 0.02em;
}

.meta-row dt {
    font-weight: 400;
}

.button {
    font-size: var(--text-base);
}


/* ==========================================================================
   5. Inside a post: the title moves from Paste to Freight Display Black,
   still lowercase. The standfirst is Freight Text italic.
   ========================================================================== */

.article-title,
.profile__name,
.hero__title {
    font-family: var(--font-freight-display);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

.article-standfirst,
.hero__standfirst {
    font-family: var(--font-freight-text);
    font-style: italic;
}


/* ==========================================================================
   6. Body faces
   One body face per post. Quotes are always set in the OTHER face, so they
   read as a second voice:
     standard post     body Freight Text   · quotes Freight Micro
     "Letter" post     body Freight Micro  · quotes Freight Text
   ========================================================================== */

.gh-content {
    --face-body: var(--font-freight-text);
    --face-voice: var(--font-freight-micro);
    font-family: var(--face-body);
    font-weight: 400;
}

.article--letter .gh-content {
    --face-body: var(--font-freight-micro);
    --face-voice: var(--font-freight-text);
}

/* Subheads inside a post stay in the Freight family, lowercase */
.gh-content h2,
.gh-content h3,
.gh-content h4 {
    font-family: var(--font-freight-display);
    font-weight: 700;
    text-transform: lowercase;
}

.gh-content h5,
.gh-content h6 {
    font-family: var(--font-paste);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   7. Quotes, callouts, captions
   Ghost's quote button cycles two styles:
     press once  → <blockquote>                    small caps, in the other face
     press twice → <blockquote class="kg-blockquote-alt">  black italic, lowercase, other face
   Callout cards → Freight Text Black Italic, lowercase.
   ========================================================================== */

.gh-content blockquote:not(.kg-blockquote-alt) {
    padding: 1.25em 0 1.25em 2.75rem;
    border-block: 1px solid var(--color-rule);
    font-family: var(--face-voice);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    font-weight: 400;
    font-variant-caps: all-small-caps;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.gh-content blockquote:not(.kg-blockquote-alt)::before {
    top: 0.15em;
    left: 0;
    font-family: var(--face-voice);
    font-variant-caps: normal;
    font-size: 2.5em;
}

.gh-content .kg-blockquote-alt {
    margin-block: 2em;
    padding-inline: 0.5em;
    font-family: var(--face-voice);
    font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
    font-style: italic;
    font-weight: 900;
    line-height: 1.15;
    text-transform: lowercase;
}

.gh-content .kg-callout-card,
.gh-content .kg-callout-text {
    font-family: var(--font-freight-text);
    font-style: italic;
    font-weight: 900;
    text-transform: lowercase;
}

.gh-content .kg-callout-text {
    font-size: 1.15em;
    line-height: 1.35;
}

/* Captions, footnote-sized text: Freight Micro, which was drawn for exactly this */
.article-image figcaption,
.gh-content figcaption {
    font-family: var(--font-freight-micro);
    font-size: var(--text-sm);
}


/* ==========================================================================
   8. Editor cards kept inside the four colours
   Ghost's callout card offers grey, blue, green, yellow, red, pink and purple
   backgrounds. All of them render as Canvas here; "accent" renders as Clay.
   ========================================================================== */

.gh-content .kg-callout-card-grey,
.gh-content .kg-callout-card-white,
.gh-content .kg-callout-card-blue,
.gh-content .kg-callout-card-green,
.gh-content .kg-callout-card-yellow,
.gh-content .kg-callout-card-red,
.gh-content .kg-callout-card-pink,
.gh-content .kg-callout-card-purple {
    background: var(--color-paper-deep);
    color: var(--color-ink);
}

.gh-content .kg-callout-card-accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* Square corners, like the rest of the theme */
.gh-content .kg-callout-card {
    border-radius: 0;
}


/* ==========================================================================
   9. Archive (archive.hbs)
   A ruled list of titles, grouped by season — no per-row dates.
   site.js writes the season into the first row of each season.
   ========================================================================== */

.archive-list {
    padding-bottom: var(--space-xl);
}

.archive-list__items:not(:has(li)) {
    display: none;
}

.archive-list__items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

.archive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--color-rule-soft);
}

.archive-row__season {
    display: none;
    grid-column: 1 / -1;
    margin: var(--space-lg) 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--rule);
    font-family: var(--font-paste);
    font-size: var(--text-lg);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

.archive-row.is-first-of-season .archive-row__season {
    display: block;
}

.archive-row.is-first-of-season:first-child .archive-row__season {
    margin-top: 0;
}

.archive-row__kind {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-paste);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: var(--color-ink-muted);
}

.archive-row__title {
    font-family: var(--font-paste);
    font-size: var(--text-md);
    line-height: 1.2;
    text-transform: lowercase;
    overflow-wrap: anywhere;
}

.archive-row__title:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}


/* ==========================================================================
   10. Film grain
   A tiny SVG noise tile, generated by the browser — no image file to download.
   Applied with ::after so the photo underneath stays a clean, small upload.
   Always still (a moving version was tried and dropped).
   ========================================================================== */

:root {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: 0.32;
}

.site-hero--grain .site-hero__media::after {
    position: absolute;
    inset: -50%;
    z-index: 1;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}


/* ==========================================================================
   11. Homepage hero
   Full-bleed photo under the header. Height leaves a sliver of the next
   section visible so it's clear the page continues. Text sits at the bottom
   on a Dune scrim heavy enough to keep Sand type readable (4.5:1 or better)
   over any photo, including a pale one.
   ========================================================================== */

.site-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88svh, 62rem);
    overflow: hidden;
    background: var(--dune);
    color: var(--sand);
}

.site-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.site-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.site-hero--focus-left .site-hero__media img {
    object-position: 28% 40%;
}

.site-hero--focus-right .site-hero__media img {
    object-position: 72% 40%;
}

/* Scrim: clear at the top, Dune at the bottom where the type sits */
.site-hero__media::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top,
        rgba(48, 45, 40, 0.94) 0%,
        rgba(48, 45, 40, 0.82) 45%,
        rgba(48, 45, 40, 0.25) 75%,
        rgba(48, 45, 40, 0) 92%);
    content: "";
}

.site-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block: var(--space-xl) var(--space-lg);
}

.site-hero__title {
    max-width: 14ch;
    font-size: var(--text-3xl);
    color: var(--sand);
}

.site-hero__description {
    max-width: 38rem;
    font-family: var(--font-freight-text);
    font-size: var(--text-md);
    line-height: 1.4;
    color: var(--sand);
}

/* One line per | in the "Hero text" setting. site.js eases the size down so
   each line stays whole where it can; on phones a line wraps, filling the
   first line and breaking between phrases (site.js §10). */
.site-hero__line {
    display: block;
    text-wrap: pretty;
}

.site-hero__description.is-fitted .site-hero__line,
.site-hero__description.is-measuring .site-hero__line {
    white-space: nowrap;
}

.site-hero__form {
    width: 100%;
    max-width: 30rem;
    margin-top: var(--space-xs);
}

.site-hero__fields {
    display: flex;
    gap: 0.5rem;
}

.site-hero__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--sand);
    border-radius: 0;
    background: rgba(247, 243, 242, 0.08);
    color: var(--sand);
    font-family: var(--font-paste);
    font-size: var(--text-base);
    text-transform: lowercase;
}

.site-hero__input::placeholder {
    color: var(--canvas);
    opacity: 1;
}

.site-hero__input:focus-visible,
.site-hero :focus-visible {
    outline-color: var(--sand);
}

.site-hero__button {
    flex: none;
}

.site-hero__button:hover {
    border-color: var(--sand);
    background: var(--sand);
    color: var(--dune);
}

/* Ghost adds loading / success / error classes to the form */
.site-hero__message {
    display: none;
    margin-top: 0.75rem;
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
}

.site-hero__form.success .site-hero__fields {
    display: none;
}

.site-hero__form.success .site-hero__message--success,
.site-hero__form.error .site-hero__message--error {
    display: block;
}

.site-hero__form.loading .site-hero__button {
    opacity: 0.6;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero layout "Diagonal" (the default)
   The photo keeps close to its own width (capped at 68rem ≈ the 1086px
   original), so it isn't stretched across a wide screen. A Dune panel,
   cut on a diagonal, holds the words. The slant leans like "\": narrow at the
   top (clear of the face), wider at the bottom where the text and form sit.
   Phones and tablets: photo on top, a slanted edge, then the words on Dune.
   -------------------------------------------------------------------------- */

.site-hero__panel {
    display: none;
}

.site-hero--diagonal {
    --hero-slant: clamp(2.5rem, 9vw, 9rem);
    container-type: inline-size;
}

.site-hero--diagonal .site-hero__media::before {
    display: none;
}

@media (min-width: 1100px) {
    .site-hero--diagonal {
        --hero-photo: min(50cqw, 68rem);
        /* left edge of the page's text column */
        --hero-left: max(var(--gutter), calc((100cqw - var(--container)) / 2));
        min-height: min(82svh, 48rem);
    }

    .site-hero--diagonal .site-hero__media {
        inset: 0 0 0 auto;
        width: var(--hero-photo);
    }

    .site-hero--diagonal .site-hero__panel {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 2;
        display: block;
        width: calc(100cqw - var(--hero-photo) + var(--hero-slant));
        overflow: hidden;
        background: var(--dune);
        clip-path: polygon(0 0, calc(100% - var(--hero-slant)) 0, 100% 100%, 0 100%);
    }

    .site-hero--diagonal .site-hero__inner {
        width: calc(100cqw - var(--hero-photo) + var(--hero-slant) * 0.35);
        max-width: none;
        margin: 0;
        padding-inline: var(--hero-left) var(--space-md);
    }

    .site-hero--diagonal .site-hero__title {
        max-width: none;
        /* "counterculture"-length words fit the panel without breaking */
        font-size: min(var(--text-3xl), calc((100cqw - var(--hero-photo) - var(--hero-left) - var(--space-md)) / 7.6));
    }

    .site-hero--diagonal .site-hero__description {
        font-size: var(--text-base);
    }
}

@media (max-width: 1099px) {
    .site-hero--diagonal {
        display: block;
        min-height: 0;
    }

    .site-hero--diagonal .site-hero__media {
        position: relative;
        inset: auto;
        aspect-ratio: 3 / 2; /* a camera photo's own shape: shown whole on phones */
    }

    /* CUSTOM (round 39): on narrow phones the headline scales with the screen,
       so "counterculture"-length words fit without breaking (at 320px the
       minimum size was wider than the screen) */
    .site-hero--diagonal .site-hero__title {
        font-size: min(var(--text-3xl), calc((100vw - 2 * var(--gutter)) / 7.6));
    }

    @media (min-width: 600px) {
        .site-hero--diagonal .site-hero__media {
            aspect-ratio: 2 / 1;
        }

        .site-hero--diagonal .site-hero__title {
            font-size: min(var(--text-3xl), 4.5rem);
        }
    }

    /* the slanted edge between photo and words; sits under the grain so it
       matches the grained panel below it */
    .site-hero--diagonal .site-hero__media::before {
        position: absolute;
        inset: auto 0 -1px 0;
        z-index: 1;
        display: block;
        height: var(--hero-slant);
        background: var(--dune);
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        content: "";
    }

    .site-hero--diagonal .site-hero__inner {
        padding-block: var(--space-sm) var(--space-lg);
        background: var(--dune);
    }

    .site-hero--diagonal .site-hero__media::after {
        z-index: 2;
    }

    /* room for the stitches that cross the seam */
    .site-hero--stitched .site-hero__inner {
        padding-top: var(--space-md);
    }
}

/* Grain on the panel too, so photo and panel read as one printed surface */
.site-hero--diagonal.site-hero--grain .site-hero__panel::after,
.site-hero--diagonal.site-hero--grain .site-hero__inner::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

@media (min-width: 1100px) {
    .site-hero--diagonal .site-hero__inner::before {
        content: none !important;
    }
}


/* Stitches across the seam ("Diagonal + stitches"). site.js places and angles
   them; they stay hidden until placed. */
.site-hero__stitches {
    display: none;
}

.site-hero--stitched .site-hero__stitches {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    pointer-events: none;
}

.site-hero__stitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 8.5rem;
    height: 1.42rem;
    overflow: visible;
    color: var(--sand);
    visibility: hidden;
}

.site-hero__stitch.is-placed {
    visibility: visible;
}

@media (max-width: 1099px) {
    .site-hero__stitch {
        width: 6rem;
        height: 1rem;
    }
}

@media (max-width: 479px) {
    .site-hero__fields {
        flex-direction: column;
    }

    .site-hero__button {
        width: 100%;
    }
}


/* ==========================================================================
   12. Text links to other places (footer) and "listen on" (Listen, episodes)
   Plain lowercase words in Paste instead of logo icons.
   ========================================================================== */

.social-links--text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-inline: 0;
}

.social-links--text a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
}

.social-links--text a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.listen-on {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin-top: var(--space-sm);
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.listen-on__label {
    color: var(--color-ink-muted);
}

.listen-on__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.listen-on__list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.listen-on__list a:hover {
    text-decoration-color: currentColor;
}

/* The meta row on a post: season first, quietly */
.meta-row__item--season dd {
    color: var(--color-ink);
}

/* Line the footer links up with their column heading (Manifesto pulls icon links left) */
.footer-column .social-links--text {
    margin-inline: 0;
}


/* ==========================================================================
   13. Episodes: the player always sits at the top
   Wherever the audio card is placed in the editor, on an episode it moves to
   the top of the content (the content area is a CSS grid, so `order` does it —
   no script). Styled into the palette; Ghost's card script still runs it.
   ========================================================================== */

.tag-podcast .gh-content > .kg-audio-card,
.tag-hash-audio .gh-content > .kg-audio-card {
    order: -1;
    margin-top: 0;
    margin-bottom: 1.5em;
}

.gh-content .kg-audio-card {
    border-radius: 0;
    border: 1px solid var(--color-rule);
    background: var(--color-paper-deep);
    box-shadow: none;
    font-family: var(--font-paste);
}

.gh-content .kg-audio-title {
    font-family: var(--font-paste);
    text-transform: lowercase;
}

.gh-content .kg-audio-play-icon svg,
.gh-content .kg-audio-pause-icon svg {
    fill: var(--color-accent);
}

.gh-content .kg-audio-seek-slider,
.gh-content .kg-audio-volume-slider {
    accent-color: var(--color-accent);
}

/* Episode artwork stays small so the player is close to the top on a phone.
   (The artwork still appears full size in podcast apps, from the feed.) */
.article-image--square img {
    width: min(100%, 15rem);
}

@media (min-width: 900px) {
    .article-image--square img {
        width: min(100%, 22rem);
    }
}

/* Ghost's player prints the total time in light grey (1.7:1 on Canvas); use muted ink */
.gh-content .kg-audio-time,
.gh-content .kg-audio-duration,
.gh-content .kg-audio-current-time,
.gh-content .kg-audio-playback-rate {
    color: var(--color-ink-muted);
}

.gh-content .kg-audio-current-time {
    color: var(--color-ink);
}

.gh-content .kg-audio-thumbnail { border-radius: 0; }

/* Site title: Paste, all caps (owner's choice) */
.site-brand__title {
    font-family: var(--font-paste);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* Footer: Terms and Privacy, beside the copyright line */
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-inline-end: auto;
}

/* Buttons inside posts and pages (button, product and header cards) match the
   theme's own buttons: Paste, lowercase */
.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-product-card a.kg-product-card-button,
.gh-content .kg-header-card a.kg-header-card-button {
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0;
    font-family: var(--font-paste);
    font-size: var(--text-base);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   14. Read media (index.hbs) and pause/play for moving pictures
   The page whose URL is "read" supplies one video, GIF or photo, shown
   beside the giant "Read" heading on wider screens and under it on phones:
   square corners, a Dune frame, the same grain as the hero. Anything else
   on that page is ignored, so the slot can't break the layout.
   ========================================================================== */

.archive-header--media {
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 760px) {
    .archive-header--media:has(.read-media .kg-video-card, .read-media .kg-image-card) {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 26rem);
        align-items: end;
    }
}

.archive-header__words {
    min-width: 0;
}

.read-media > * {
    display: none;
}

.read-media > :is(.kg-video-card, .kg-image-card):first-of-type,
.read-media > p + :is(.kg-video-card, .kg-image-card) {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border: 2px solid var(--color-ink);
    background: var(--color-paper-deep);
}

.read-media :is(.kg-video-card, .kg-image-card) ~ :is(.kg-video-card, .kg-image-card) {
    display: none !important;
}

.read-media img,
.read-media video {
    display: block;
    width: 100%;
    height: auto;
}

.read-media figcaption {
    display: none;
}

/* Ghost's own video controls are replaced by one pause/play button */
.read-media .kg-video-overlay,
.read-media .kg-video-player-container {
    display: none !important;
}

.read-media :is(.kg-video-card, .kg-image-card)::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

.media-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.media-toggle {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: var(--dune);
    color: var(--sand);
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
    cursor: pointer;
}

.media-toggle:hover {
    background: var(--clay);
}

.media-toggle:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 2px;
}

/* GIFs placed in posts and pages: same pause/play button, bottom-left */
.content-gif {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.content-gif .media-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.read-media.gh-content {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   15. The book, at the end of posts tagged #book (partials/book-card.hbs)
   ========================================================================== */

.book-card {
    margin-block: var(--space-lg);
}

.book-card__link {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    max-width: 42rem;
    margin-inline: auto;
    padding: var(--space-sm);
    border: 2px solid var(--color-ink);
    background: var(--color-paper-deep);
    color: var(--color-ink);
    text-decoration: none;
}

.book-card__link:hover .book-card__title {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.book-card__cover {
    flex: none;
    width: 5.5rem;
    height: auto;
}

.book-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.book-card__eyebrow {
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
    color: var(--color-ink-muted);
}

.book-card__title {
    font-family: var(--font-freight-display);
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1.1;
    text-transform: lowercase;
}

.book-card__excerpt {
    font-family: var(--font-freight-text);
    font-size: var(--text-base);
    line-height: 1.4;
}

.book-card__more svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    color: var(--color-accent);
}


/* ==========================================================================
   16. Tally forms (pasted into an HTML card, or as a link Ghost embeds)
   The form sits on Sand in both modes, so Tally's dark text stays readable
   even when the site is in dark mode.
   ========================================================================== */

.gh-content iframe[src*="tally.so"],
.gh-content iframe[data-tally-src] {
    width: 100%;
    border: 0;
    background: var(--sand);
    color-scheme: light;
}


/* ==========================================================================
   17. Gatherings template (custom-gatherings.hbs; grouping done in site.js)
   ========================================================================== */

.article--gatherings .gh-content > hr {
    grid-column: wide-start / wide-end;
    width: 100%;
    margin-block: var(--space-lg);
    border: 0;
    border-top: 2px solid var(--color-ink);
}

.article--gatherings .gh-content > hr::after {
    content: none;
}

/* section headings line up with the wide blocks they introduce */
.article--gatherings .gh-content > h2 {
    grid-column: wide-start / wide-end;
}

/* Formats: product cards side by side */
.gatherings-formats {
    display: grid;
    gap: var(--space-md);
    grid-column: wide-start / wide-end;
}

@media (min-width: 760px) {
    .gatherings-formats {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

.gatherings-formats {
    align-items: stretch;
}

.article--gatherings .kg-product-card {
    display: flex;
    width: 100%;
    max-width: none;
    margin: 0;
}

.article--gatherings .kg-product-card-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
    padding: var(--space-md);
    border: 2px solid var(--color-ink);
    border-radius: 0;
    background: var(--color-paper-deep);
    box-shadow: none;
}

.article--gatherings .kg-product-card-title-container {
    margin: 0;
}

.gh-content .article--gatherings .kg-product-card-title,
.article--gatherings .gh-content .kg-product-card .kg-product-card-title {
    font-family: var(--font-freight-display);
    font-size: var(--text-xl);
    font-weight: 900;
    line-height: 1.05;
    text-transform: lowercase;
    color: var(--color-ink);
}

/* first line of the description = the facts (who, how long, where) */
.article--gatherings .kg-product-card-description > p:first-child {
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-transform: lowercase;
}

.article--gatherings .gh-content .kg-product-card .kg-product-card-description {
    margin: 0;
    font-family: var(--font-freight-text);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-ink);
    opacity: 1;
}

.article--gatherings .kg-product-card-description p + p {
    margin-top: 0.75em;
}

/* A band of words. Each dot stays with the word before it, so a line never
   starts with a dot. */
.dot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dot-list li {
    display: inline;
    white-space: nowrap;
}

.dot-list li:not(:last-child)::after {
    margin-inline: 0.3em 0.45em;
    color: var(--color-accent);
    content: "·";
}

.dot-list--band {
    grid-column: wide-start / wide-end;
    margin-block: var(--space-md);
    font-family: var(--font-freight-display);
    font-size: clamp(2rem, 1.2rem + 3.6vw, 4.5rem);
    font-style: italic;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-transform: lowercase;
}

/* The question above the word band: centred over it, with room to breathe */
.gh-content > .band-intro {
    grid-column: wide-start / wide-end;
    text-align: center;
    text-wrap: balance;
}

.gh-content > .band-intro + .dot-list--band {
    margin-top: var(--space-md);
}

/* Labelled lists: H3 label, list beside it */
.gatherings-facts {
    grid-column: wide-start / wide-end;
    display: grid;
    gap: 0.5rem var(--space-md);
    padding-block: var(--space-sm);
    border-top: 1px solid var(--color-rule);
}

.gatherings-facts + .gatherings-facts {
    margin-top: 0;
}

@media (min-width: 760px) {
    .gatherings-facts {
        grid-template-columns: 12rem minmax(0, 1fr);
        align-items: baseline;
    }
}

.gh-content .gatherings-facts h3 {
    margin: 0;
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-ink-muted);
}

.gatherings-facts .dot-list {
    font-family: var(--font-freight-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    text-transform: lowercase;
}

/* Testimonials: quote + attribution, in columns */
.gatherings-testimonials {
    grid-column: wide-start / wide-end;
    columns: 2 22rem;
    column-gap: var(--space-lg);
}

.gatherings-testimonial {
    break-inside: avoid;
    margin: 0 0 var(--space-lg);
}

.gh-content .gatherings-testimonial blockquote:not(.kg-blockquote-alt) {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-freight-text);
    font-size: var(--text-md);
    font-variant-caps: normal;
    letter-spacing: 0;
    line-height: 1.45;
}

.gh-content .gatherings-testimonial blockquote::before {
    display: none;
}

.gatherings-testimonial figcaption {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--color-accent);
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
}

/* "Carried forward": quotes pressed twice, set apart by two small stitches */
.gatherings-carry {
    display: grid;
    gap: var(--space-lg);
}

.gatherings-carry {
    grid-column: wide-start / wide-end;
    max-width: 44rem;
}

.gh-content .gatherings-carry .kg-blockquote-alt {
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: var(--font-freight-text);
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}

.gh-content .gatherings-carry .kg-blockquote-alt + .kg-blockquote-alt::before {
    display: block;
    width: 3.75rem;
    height: 2.5rem;
    margin: 0 0 var(--space-lg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23A74D4A' d='M4 14C14 9 42 7 56 12 44 17 16 18 4 14Z'/%3E%3Cpath fill='%23A74D4A' d='M6 28C18 23 44 22 55 26 43 31 18 32 6 28Z'/%3E%3C/svg%3E") left center / contain no-repeat;
    content: "";
}

.gatherings-formats > .kg-product-card {
    margin: 0 !important;
}

.article--gatherings .kg-product-card-title-container,
.article--gatherings .gh-content .kg-product-card .kg-product-card-title {
    text-align: left;
}

.article--gatherings .gh-content .kg-product-card .kg-product-card-container {
    align-items: stretch;
}

.article--gatherings .gh-content .kg-product-card .kg-product-card-description p {
    opacity: 1;
}

/* Names as a strip of cells (a large heading, then names split by " · ").
   The names are set in the site's own type, never as anyone's logo. */
.gatherings-strip {
    grid-column: wide-start / wide-end;
    margin-block: var(--space-md);
}

.gh-content .gatherings-strip :is(h2, h3) {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-ink-muted);
}

.name-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--color-ink);
    border-left: 2px solid var(--color-ink);
    list-style: none;
}

.name-strip li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    margin: 0;
    padding: var(--space-sm);
    border-right: 2px solid var(--color-ink);
    border-bottom: 2px solid var(--color-ink);
    font-family: var(--font-freight-display);
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    text-wrap: balance;
}

.name-strip li::after {
    content: none !important;
}

.gh-content .name-strip,
.gh-content .name-strip li {
    margin: 0 !important;
}

.gh-content .name-strip li {
    padding: var(--space-sm);
}

@media (min-width: 760px) {
    .name-strip {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.gh-content .name-strip {
    padding: 0 !important;
}

/* ==========================================================================
   18. Book template (custom-book.hbs) and button rows
   ========================================================================== */

.book-hero {
    display: grid;
    gap: var(--space-md) var(--space-lg);
    align-items: end;
    padding-block: var(--space-lg) var(--space-md);
}

@media (min-width: 760px) {
    .book-hero {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    }

    /* No cover yet: the title takes the full width instead of the cover's narrow column */
    .book-hero--no-cover {
        grid-template-columns: minmax(0, 1fr);
    }
}

.book-hero__cover {
    width: min(100%, 18rem);
    margin: 0;
}

.book-hero__cover img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--color-ink);
}

.book-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.book-hero__top.gh-content {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}

.book-hero__top > * + * {
    margin-top: var(--space-sm);
}

.book-hero__top:empty {
    display: none;
}

/* Two or more buttons in a row sit side by side (any post or page) */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gh-content .button-row > .kg-button-card {
    width: auto;
    margin: 0 !important;
}

/* Buttons sit a clear step below the words above them: more than the gap
   between paragraphs, so they read as the action, not another line. */
.gh-content > .button-row,
.gh-content > .kg-button-card {
    margin-top: 2.25em;
    margin-bottom: 0;
}

.book-hero__top.gh-content > .button-row,
.book-hero__top.gh-content > .kg-button-card {
    margin-top: 1.75em;
}

.gh-content > .button-row + *,
.gh-content > .kg-button-card + * {
    margin-top: 2.25em;
}

.article--book [data-book-body] {
    margin-top: var(--space-lg);
}

/* ==========================================================================
   19. Post types (internal tags #quote, #photo, #link, #audio)
   ========================================================================== */

/* Quote: the post's title set large over its photo, with grain */
.quote-panel {
    position: relative;
    display: grid;
    place-content: center;
    gap: 1rem;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: clamp(1.25rem, 8cqi, 3rem);
    overflow: hidden;
    container-type: inline-size;
    background: var(--dune);
    color: var(--sand);
    text-align: center;
}

.quote-panel__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* a wash of Dune so Sand type reads on any photo, then grain over all */
.quote-panel--photo::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(48, 45, 40, 0.5);
    content: "";
}

.quote-panel::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

.quote-panel__quote,
.quote-panel__source {
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 0;
    border: 0;
}

.quote-panel__quote,
.quote-panel__text,
.quote-panel__link {
    font-family: var(--font-freight-display);
    /* CUSTOM (round 36): --quote-scale is set by site.js from the quote's length */
    font-size: clamp(calc(1.375rem * min(1, var(--quote-scale, 1))), calc(9cqi * var(--quote-scale, 1)), calc(4.5rem * var(--quote-scale, 1)));
    font-weight: 700;
    line-height: 1.12;
    text-transform: none;
    text-wrap: balance;
    color: var(--sand);
}

.quote-panel__link {
    text-decoration: none;
}

/* the whole panel is the link in listings */
.quote-panel__link::after {
    position: absolute;
    inset: 0;
    z-index: 4;
    content: "";
}

.quote-panel__link:focus-visible {
    outline: none;
}

.quote-panel:has(.quote-panel__link:focus-visible) {
    outline: 3px solid var(--clay);
    outline-offset: 3px;
}

.quote-panel__source {
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
    color: var(--canvas);
}

.quote-panel__source::before {
    content: "— ";
}

/* CUSTOM (round 36–37): quote type styles, an extra internal tag beside #quote
   (classes set in partials/quote-panel.hbs). Quote POSTS only; the quote
   blocks inside posts (section 7) are separate and unchanged. The two options
   are the site's pull-quote voices from inside posts, set large.
     (none)      Freight Display Bold; every "&" and the quote's fourth word
                 in Freight Display Bold Italic (site.js wraps them)
     #smallcaps  Freight Micro small caps (confirmed in the kit)
     #italic     Freight Micro Black Italic, lowercase
     #sentence   with either: the capitals as typed */
.quote-panel__ital {
    font-style: italic;
}

.quote-panel--smallcaps :is(.quote-panel__quote, .quote-panel__text, .quote-panel__link) {
    font-family: var(--font-freight-micro);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-variant-caps: all-small-caps;
}

.quote-panel--smallcaps.quote-panel--sentence :is(.quote-panel__quote, .quote-panel__text, .quote-panel__link) {
    font-variant-caps: small-caps;
}

.quote-panel--italic :is(.quote-panel__quote, .quote-panel__text, .quote-panel__link) {
    font-family: var(--font-freight-micro);
    font-style: italic;
    font-weight: 900;
    line-height: 1.08;
    text-transform: lowercase;
}

.quote-panel--italic.quote-panel--sentence :is(.quote-panel__quote, .quote-panel__text, .quote-panel__link) {
    text-transform: none;
}

/* on the post itself: larger, nearly a screen tall */
.article-quote .quote-panel {
    aspect-ratio: auto;
    min-height: min(82svh, 52rem);
}

.article-quote .quote-panel__text {
    font-size: clamp(calc(2rem * min(1, var(--quote-scale, 1))), calc(6.5cqi * var(--quote-scale, 1)), calc(5rem * var(--quote-scale, 1)));
}

.article-header--after {
    padding-top: var(--space-sm);
}

/* homepage lead */
@media (min-width: 760px) {
    .featured-post--quote .quote-panel {
        aspect-ratio: 16 / 9;
    }

    .featured-post--quote .quote-panel__link {
        font-size: clamp(calc(2rem * min(1, var(--quote-scale, 1))), calc(5.5cqi * var(--quote-scale, 1)), calc(4.5rem * var(--quote-scale, 1)));
    }
}

.post-card--type-quote {
    padding: 0;
}

.post-card__footer--quote:empty {
    display: none;
}

/* Link: the title goes to the page shared; its site's name sits under it */
.post-card__out,
.article-title__out,
.featured-post__title a {
    color: inherit;
    text-decoration: none;
}

.post-card__out:hover,
.article-title__out:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
}

.link-arrow {
    color: var(--color-accent);
}

.post-card__host,
.article-host {
    margin: 0;
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    text-transform: lowercase;
    color: var(--color-ink-muted);
}

.article-host {
    margin-top: 0.5rem;
}

.post-card--type-link .post-card__body {
    gap: 0.5rem;
}

.post-card--type-link .post-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Photo: the photograph leads; taller in listings, wide on the post */
.post-card--type-photo .post-card__image {
    aspect-ratio: 4 / 5;
}

.article-image--photo img {
    width: 100%;
    max-height: 88svh;
    object-fit: contain;
    background: var(--color-paper-deep);
}

.article--type-photo .article-title {
    font-size: var(--text-2xl);
}

/* quote cards fill their cell in a grid row */
.post-card--type-quote {
    display: flex;
    flex-direction: column;
}

.post-card--type-quote .quote-panel {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 22rem;
}

/* CUSTOM (round 34): a quote card left alone at the end of a homepage grid
   row spans the row, like any lone card, as a wide panel. screen.css centres
   a lone card's contents, which shrank the quote panel to its padding (96px). */
@media (min-width: 640px) {
    .post-feed--grid > .post-card--type-quote:last-child:nth-child(odd) {
        align-items: stretch;
    }

    .post-feed--grid > .post-card--type-quote:last-child:nth-child(odd) .quote-panel {
        aspect-ratio: 5 / 2;
    }
}

/* Link previews (bookmark cards) in the site's palette and type */
.gh-content .kg-bookmark-card .kg-bookmark-container {
    border: 2px solid var(--color-ink);
    border-radius: 0;
    background: var(--color-paper-deep);
    box-shadow: none;
    color: var(--color-ink);
}

.gh-content .kg-bookmark-title {
    font-family: var(--font-freight-display);
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-ink);
}

.gh-content .kg-bookmark-description {
    font-family: var(--font-freight-text);
    color: var(--color-ink-muted);
}

.gh-content .kg-bookmark-metadata {
    font-family: var(--font-paste);
    text-transform: lowercase;
    color: var(--color-ink-muted);
}

.gh-content .kg-bookmark-thumbnail img {
    border-radius: 0;
}

.gh-content .kg-bookmark-description,
.gh-content .kg-bookmark-metadata,
.gh-content .kg-bookmark-author,
.gh-content .kg-bookmark-publisher {
    opacity: 1;
}

.quote-panel__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 5;
}

/* ==========================================================================
   20. Lists in posts and pages
   Bullets: a short Clay dash in Paste. Numbers: Paste numerals in Clay.
   (Drawn with ::before so every browser, Safari included, shows them alike.)
   ========================================================================== */

.gh-content ul:not(.dot-list):not(.name-strip),
.gh-content ol {
    padding-left: 1.6em;
    list-style: none;
}

.gh-content ol {
    counter-reset: gh-list;
}

.gh-content ul:not(.dot-list):not(.name-strip) > li,
.gh-content ol > li {
    position: relative;
}

.gh-content ul:not(.dot-list):not(.name-strip) > li::before,
.gh-content ol > li::before {
    position: absolute;
    left: -1.6em;
    width: 1.3em;
    font-family: var(--font-paste);
    font-weight: 400;
    color: var(--list-marker, var(--color-accent));
    text-align: right;
}

/* Clay is too dark to read on Dune, so markers turn Canvas in dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --list-marker: var(--canvas);
    }
}

.gh-content ul:not(.dot-list):not(.name-strip) > li::before {
    content: "–";
}

.gh-content ol > li {
    counter-increment: gh-list;
}

.gh-content ol > li::before {
    content: counter(gh-list) ".";
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   21. Recurring marks
   ========================================================================== */

/* Dividers in posts: the hero's two stitches instead of Manifesto's stars */
.gh-content hr::after {
    display: block;
    width: 3.75rem;
    height: 2.5rem;
    margin-inline: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23A74D4A' d='M4 14C14 9 42 7 56 12 44 17 16 18 4 14Z'/%3E%3Cpath fill='%23A74D4A' d='M6 28C18 23 44 22 55 26 43 31 18 32 6 28Z'/%3E%3C/svg%3E") center / contain no-repeat;
    font-size: 0;
    letter-spacing: 0;
    content: "";
}

/* The same grain over the dark bands, so the whole site reads as one printed surface */
.newsletter-band,
.site-footer {
    position: relative;
    isolation: isolate;
}

.newsletter-band::after,
.site-footer::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

/* Selected text in Clay */
::selection {
    background: var(--clay);
    color: var(--sand);
}

/* An episode card showing the show's artwork keeps the square shape */
.post-card__media--show:empty {
    display: none;
}

.episode-row__art:has(.show-art) .episode-row__placeholder {
    display: none;
}

.post-card__media--show .show-art {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.episode-row__art .show-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   22. Page not found (error-404.hbs)
   ========================================================================== */

.error-page__line {
    display: block;
}

.error-page--404 .error-page__message {
    margin-top: var(--space-md);
    font-family: var(--font-freight-text);
    font-size: var(--text-lg);
    line-height: 1.35;
}

.error-page__explore {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: var(--space-md);
    font-family: var(--font-paste);
    font-size: var(--text-md);
    text-transform: lowercase;
}

.error-page__explore a {
    color: var(--color-ink);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* ==========================================================================
   23. Grain on post images (cards, feature images, images in posts, galleries)
   The same still grain as the hero, a touch lighter, laid over each photo.
   Wrappers for images with captions are added by site.js.
   ========================================================================== */

.post-card__media,
.featured-post__media,
.episode-row__art,
.kg-gallery-image,
.grain-wrap {
    position: relative;
}

.grain-wrap {
    display: block;
}

.gh-content .kg-image-card .grain-wrap {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.post-card__media::after,
.featured-post__media::after,
.episode-row__art::after,
.kg-gallery-image::after,
.grain-wrap::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: 0.28;
    pointer-events: none;
    content: "";
}

/* the pause/play button sits above the grain */
.media-toggle {
    z-index: 3;
}

/* QA fixes */
/* episode art: the grain wrapper takes the art's size, the image fills it */
.article-image--square .grain-wrap {
    width: min(100%, 15rem);
}

.article-image--square .grain-wrap img {
    width: 100%;
}

@media (min-width: 900px) {
    .article-image--square .grain-wrap {
        width: min(100%, 22rem);
    }
}

.article-image + .gh-content,
.article-image + .article-header--after + .gh-content {
    margin-top: var(--space-lg);
}

.tag-podcast .gh-content > .kg-audio-card,
.tag-hash-audio .gh-content > .kg-audio-card {
    margin-top: 0;
}

.article-image--square + .gh-content {
    margin-top: var(--space-md);
}

.link-arrow {
    color: var(--list-marker, var(--color-accent));
}

.episode-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.article-header__meta {
    align-items: center;
}

/* ==========================================================================
   24. Remaining editor cards in the site's palette: file, product, toggle
   (square corners, ruled edges, Canvas fill; same in both modes via tokens)
   ========================================================================== */

.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-product-card-container,
.gh-content .kg-toggle-card {
    border: 2px solid var(--color-ink);
    border-radius: 0;
    background: var(--color-paper-deep);
    box-shadow: none;
    color: var(--color-ink);
}

.gh-content .kg-file-card-title,
.gh-content .kg-product-card-title,
.gh-content .kg-toggle-heading-text {
    font-family: var(--font-freight-display);
    font-weight: 700;
    color: var(--color-ink);
    text-transform: lowercase;
}

.gh-content .kg-file-card-caption,
.gh-content .kg-file-card-metadata,
.gh-content .kg-product-card-description {
    color: var(--color-ink-muted);
    opacity: 1;
}

.gh-content .kg-file-card-metadata {
    font-family: var(--font-paste);
    text-transform: lowercase;
}

.gh-content .kg-file-card-icon {
    border-radius: 0;
    background: var(--color-paper);
    color: var(--color-accent);
}

.gh-content .kg-file-card-icon svg {
    color: var(--color-accent);
}

.gh-content .kg-product-card-image {
    border-radius: 0;
}

.gh-content .kg-toggle-card-icon svg {
    color: var(--color-accent);
}

.gh-content .kg-toggle-content {
    font-family: var(--font-freight-text);
    color: var(--color-ink);
}

/* A name strip between labelled lists reads as one more row of them */
.gh-content > .gatherings-facts + .gatherings-strip {
    margin-top: 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-rule);
}

.gh-content > .gatherings-strip + .gatherings-facts {
    margin-top: 0;
}

/* Word lists carry no list indent (Ghost's list padding would push them
   off their label and pull the centred band off-centre) */
.gh-content .dot-list {
    padding-left: 0;
}

/* Two names per row on phones: an odd last name takes the whole row */
@media (max-width: 759px) {
    .gh-content .name-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gh-content .name-strip li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   25. People (custom-people.hbs) and a person's page (author.hbs)
   Square photos with the same grain and Dune frame as post images; name in
   Freight Display; bio in Freight Text; links as plain lowercase words.
   ========================================================================== */

.people {
    margin-block: var(--space-lg) var(--space-xl);
}

.people-grid,
.gh-content > .people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-lg) var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-content > .people-grid {
    grid-column: wide-start / wide-end;
}

.people-grid > li::before {
    content: none !important;
}

.person,
.people-grid .kg-product-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
}

.person__photo,
.article--people .people-grid .kg-product-card-image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
    border: 2px solid var(--color-ink);
    background: var(--color-paper-deep);
    object-fit: cover;
}

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

.person__photo .icon {
    position: absolute;
    inset: 25%;
    width: 50%;
    height: 50%;
    color: var(--color-ink-muted);
}

.person__photo::after {
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

.person__name,
.article--people .people-grid .kg-product-card-title {
    margin: 0.25rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-freight-display);
    font-size: var(--text-lg);
    font-weight: 900;
    line-height: 1.1;
    text-transform: lowercase;
}

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

.person__name a:hover {
    color: var(--color-accent);
}

.person__bio,
.article--people .people-grid .kg-product-card-description {
    margin: 0;
    font-family: var(--font-freight-text);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-ink);
}

.person__location,
.profile__location {
    margin: 0;
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    text-transform: lowercase;
}

/* Product cards on the People page are people who don't publish here:
   same layout as the automatic list, no card box */
.article--people .people-grid .kg-product-card-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
}

.article--people .people-grid .kg-product-card-title-container {
    margin: 0;
}

.person-links {
    margin-top: 0.25rem;
}

.profile__location {
    margin-top: var(--space-xs);
}

.article--people .people-grid .kg-product-card-description p {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.article--people .people-grid .kg-product-card-button {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* A person's page: the same square, framed, grained photo as the People page */
.profile__avatar {
    position: relative;
    width: min(100%, 16rem);
    border: 2px solid var(--color-ink);
    border-radius: 0;
}

.profile__avatar::after {
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: var(--grain-opacity);
    pointer-events: none;
    content: "";
}

/* Bylines appear only once a second person has published (default.hbs) */
body:not(.has-writers) .meta-row__item--author {
    display: none;
}

.article--people .people-grid .kg-product-card-container {
    border: 0 !important;
    box-shadow: none !important;
}

.article--people .people-grid .kg-product-card-description,
.article--people .people-grid .kg-product-card-description p {
    opacity: 1;
    color: var(--color-ink);
}

/* No photo yet: the same empty frame as a Staff profile without one */
.article--people .people-grid .kg-product-card-container:not(:has(.kg-product-card-image))::before {
    display: block;
    aspect-ratio: 1;
    width: 100%;
    border: 2px solid var(--color-ink);
    background: var(--color-paper-deep);
    content: "";
}

@media (max-width: 759px) {
    .people-grid,
    .gh-content > .people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   26. Footnotes (site.js §7c): heading ending "*" → Clay mark; paragraph
   starting "*" → a small note in Paste
   ========================================================================== */

.footnote-mark {
    margin-left: 0.05em;
    color: var(--list-marker, var(--color-accent)); /* CUSTOM (round 39): Canvas in dark mode, like list markers */
    font-family: var(--font-paste);
    font-size: 0.6em;
    font-style: normal;
    font-weight: 700;
    vertical-align: super;
    line-height: 0;
}

.gh-content > .footnote {
    font-family: var(--font-paste);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-ink-muted);
    text-transform: lowercase;
}

.gh-content > .footnote .footnote-mark {
    margin: 0 0.2em 0 0;
    font-size: 1em;
    vertical-align: baseline;
}

.article--gatherings .gh-content > .footnote {
    grid-column: wide-start / wide-end;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-rule);
}

/* People: three across on laptops, two on tablets and phones */
@media (min-width: 760px) {
    .people-grid,
    .gh-content > .people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .people-grid,
    .gh-content > .people-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Listen: rows that aren't podcast episodes (#audio) carry a small "audio" mark */
.episode-row__type {
    font-family: var(--font-paste);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-ink-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   27. Dark mode: the newsletter band and footer stay dark (Dune, Sand type)
   instead of turning into a light block at the bottom of a dark page.
   A rule marks where the band begins.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .newsletter-band,
    .site-footer {
        --color-inverse-text: var(--sand);
        --color-inverse-muted: var(--canvas);
        --color-inverse-rule: #625e5a;
        background: var(--dune);
        color: var(--sand);
    }

    .newsletter-band {
        border-top: 1px solid var(--color-rule);
    }
}

/* Ghost's editor cards (buttons, product and signup cards, accent callouts…) take
   Ghost's Accent colour setting; pin it to Clay so they always match the site. */
html:root {
    --ghost-accent-color: #A74D4A;
}

/* A card grid with nothing in it yet (new site): no half-drawn box, just the
   empty-state message across the full width */
.card-grid:has(> .empty-state) {
    display: block;
    border: 0;
}

.card-grid > .empty-state {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
    padding-inline: 0;
}

/* Footer without the wordmark block: the link columns take the full width */
@media (min-width: 760px) {
    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Newsletter band without a heading: just the line and the button */
.newsletter-band__inner:has(> .visually-hidden:first-child) {
    padding-block: var(--space-lg);
}

.newsletter-band__inner:has(> .visually-hidden:first-child) .newsletter-band__action {
    padding-top: 0;
    border-top: 0;
}

/* One line between the band and the footer links, not two */
.newsletter-band + .site-footer .site-footer__top {
    border-top: 0;
    padding-top: 0;
}

/* The site title is always set in capitals, wherever it appears
   (header, copyright line, and the hero if no headline is set) */
.site-footer__name,
.site-hero__title--name {
    text-transform: uppercase;
}

/* CUSTOM (round 34): no posts marked Featured yet = no "Most loved" list, so
   the empty sidebar is hidden and "Latest" takes the full width on wide
   screens (it left a blank 19rem column). */
.home-sidebar:not(:has(*)) {
    display: none;
}

@media (min-width: 1100px) {
    .home-layout:not(:has(> .home-sidebar > *)) {
        grid-template-columns: minmax(0, 1fr);
    }
}