/* ==========================================================================
   Bold — screen.css
   A bold, high-contrast editorial theme for Ghost.

   Hand-written, no build step. Mobile-first: base styles target small
   screens, min-width media queries layer on larger layouts.

   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Utilities
   4.  Layout
   5.  Buttons, links & pills
   6.  Meta row
   7.  Site header
   8.  Ticker
   9.  Homepage (masthead, featured post, feed, sidebar)
   10. Section headings & card grids
   11. Post card
   12. Author card
   13. Archive pages (tag, index, podcast, authors)
   14. Author profile
   15. Article (post & page)
   16. Post content & Koenig cards
   17. Newsletter
   18. Footer
   19. Pagination & error page
   20. Members, recommendations & post navigation
   21. Dark mode
   22. Motion preferences
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   Colours were checked for WCAG AA contrast (see README → Accessibility).
   ========================================================================== */

:root {
    /* Palette: warm newsprint, near-black ink, and the site's brand colour */
    --color-paper: #f5f2ea;
    --color-paper-deep: #e9e4d8;
    --color-ink: #121210;                /* 16.8:1 on paper */
    --color-ink-muted: #55524a;          /* 7.0:1 on paper, 6.2:1 on paper-deep */
    --color-rule: #121210;
    --color-rule-soft: #cdc7b9;
    --color-inverse-text: #f5f2ea;       /* 16.8:1 on ink */
    --color-inverse-muted: #b3aea1;      /* 8.5:1 on ink */
    --color-inverse-rule: #3b3a35;

    /* Brand colour. default.hbs overrides this with Settings → Design & branding → Accent colour */
    --color-accent: #ff1a75;

    /* Text on the accent colour: white or black, whichever passes contrast (see below) */
    --color-on-accent: #121210;

    /* Typography. --gh-font-* are set by Ghost when a custom font is chosen in Design & branding */
    --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-text: "Newsreader", Georgia, "Times New Roman", serif;
    --font-heading: var(--gh-font-heading, var(--font-display));
    --font-body: var(--gh-font-body, var(--font-text));
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem;
    --text-md: 1.25rem;
    --text-lg: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --text-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --text-2xl: clamp(2.5rem, 1.4rem + 4.8vw, 5.5rem);
    --text-3xl: clamp(2.5rem, 0.6rem + 7.5vw, 7.5rem);
    --text-giant: clamp(3.5rem, 13vw, 14rem);

    /* Spacing & layout */
    --gutter: clamp(1rem, 4vw, 3rem);
    --container: 82.5rem;               /* 1320px */
    --content: 43rem;                   /* reading measure */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
    --rule: 1px solid var(--color-rule);

    --radius-pill: 999px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Tells the browser to match its own UI (scrollbars, form controls) to the scheme in use */
    color-scheme: light dark;
}

/*
   Pick black or white text for the accent colour automatically, so any brand
   colour chosen in Ghost Admin keeps AA contrast (worst case 4.58:1).
   Lightness 49.4 (CIE LCH) is the point where white and black give equal
   contrast; brighter colours get black text, darker colours get white.
*/
@supports (color: lch(from red l c h)) {
    :root {
        --color-on-accent: lch(from var(--color-accent) clamp(0, (49.4 - l) * 1000, 100) 0 0);
    }
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 1rem;
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
}

img, svg, video, iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* One strong, consistent focus ring. Inverted on dark and accent surfaces below. */
:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 3px;
}

.site-main:focus {
    outline: none;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-main {
    flex: 1 0 auto;
}


/* ==========================================================================
   3. Utilities
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    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: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-heading);
    font-weight: 600;
    transform: translateY(-200%);
}

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

/* Big uppercase display type used for mastheads and section titles */
.display {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    /* "anywhere" (not "break-word") lets headings inside flex and grid layouts shrink,
       so a single very long word breaks instead of pushing the page sideways on phones */
    overflow-wrap: anywhere;
}

/* Titles sized to fill their container by main.js (data-fit-text) */
[data-fit-text] {
    font-size: var(--text-giant);
}

[data-fit-text].is-fitted {
    white-space: nowrap;
}

.eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}


/* ==========================================================================
   4. Layout
   ========================================================================== */

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


/* ==========================================================================
   5. Buttons, links & pills
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--color-accent);
    border-radius: 0;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.button:hover {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
}

.button--outline {
    border-color: var(--color-ink);
    background: transparent;
    color: var(--color-ink);
}

.button--block {
    width: 100%;
}

.button--large {
    min-height: 3.5rem;
    padding: 1rem 1.75rem;
    font-size: var(--text-base);
}

.button--on-dark:hover {
    border-color: var(--color-paper);
    background: var(--color-paper);
    color: var(--color-ink);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s var(--ease);
}

.icon-button:hover {
    opacity: 0.6;
}

/* "All episodes →" style links */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.arrow-link .icon {
    transition: transform 0.25s var(--ease);
}

.arrow-link:hover .icon {
    transform: translateX(4px);
}

.arrow-link--back:hover .icon {
    transform: translateX(-4px);
}

/* Tag pills */
.tag-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tag-pill:hover,
.tag-pill.is-current,
.tag-pill--accent {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.tag-pill--accent:hover {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-paper);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}


/* ==========================================================================
   6. Meta row — label over value (partials/meta-row.hbs)
   ========================================================================== */

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.meta-row:empty {
    display: none;
}

.meta-row__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
}

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

.meta-row dd {
    color: var(--color-ink-muted);
}

.meta-row a {
    position: relative;
    z-index: 2;
    color: var(--color-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.meta-row a:hover {
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
}

/* Stacked: one item per line, label left, value right, with rules */
.meta-row--stacked {
    flex-direction: column;
    gap: 0;
    font-size: var(--text-sm);
}

.meta-row--stacked .meta-row__item {
    justify-content: space-between;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--color-rule-soft);
}


/* ==========================================================================
   7. Site header
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 20;
    background: var(--color-paper);
}

.site-header__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.75rem;
}

/* Hairline under the header, inset to the container like the rest of the grid */
.site-header__inner::after {
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    left: var(--gutter);
    border-bottom: var(--rule);
    content: "";
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.site-brand__title {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.site-brand__logo {
    width: auto;
    max-width: 12rem;
    max-height: 2.5rem;
}

.menu-toggle {
    display: none;
    margin-right: -0.625rem;
}

.menu-toggle__close {
    display: none;
}

.site-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.site-nav .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    padding: 0;
    list-style: none;
}

.site-nav .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--text-base);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 80%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size 0.25s var(--ease);
}

.site-nav .nav a:hover,
.site-nav .nav a[aria-current="page"] {
    background-size: 100% 2px;
}

.site-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.site-tools__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    font-size: var(--text-sm);
    font-weight: 600;
}

.site-tools__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-inline: -0.625rem;
    padding: 0;
    list-style: none;
}

/* With JavaScript available, the menu collapses behind the toggle on small screens */
.js .menu-toggle {
    display: inline-flex;
}

.js .site-menu {
    display: none;
}

.js .site-header.is-open .site-menu {
    display: flex;
    padding-block: 0.5rem 1rem;
}

.js .site-header.is-open .menu-toggle__open {
    display: none;
}

.js .site-header.is-open .menu-toggle__close {
    display: inline;
}

@media (min-width: 900px) {
    .site-header__inner {
        flex-wrap: nowrap;
        padding-block: 1rem;
    }

    .js .menu-toggle {
        display: none;
    }

    .site-menu,
    .js .site-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 1.5rem;
        width: auto;
        padding: 0;
    }

    .site-nav .nav a {
        font-size: var(--text-sm);
    }

    /* A short rule separating navigation from the icons, a nod to print mastheads */
    .site-tools {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .site-tools::before {
        width: 1.5rem;
        margin-right: 0.75rem;
        border-top: var(--rule);
        content: "";
    }

    .social-links {
        margin-inline: 0;
    }

    .site-tools .icon-button {
        width: 2.25rem;
    }

    .site-tools .button {
        margin-left: 0.5rem;
    }
}


/* ==========================================================================
   8. Ticker (partials/ticker.hbs)
   ========================================================================== */

.ticker {
    --ticker-duration: 45s;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ticker :focus-visible {
    outline-color: currentColor;
    outline-offset: -3px;
}

.ticker__label {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0.875rem var(--gutter);
    background: var(--color-ink);
    color: var(--color-paper);
    letter-spacing: 0.08em;
}

.ticker__viewport {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.ticker__track {
    display: flex;
    flex: none;
    width: max-content;
    animation: ticker-scroll var(--ticker-duration) linear infinite;
}

.ticker__list {
    display: flex;
    flex: none;
    padding: 0;
    list-style: none;
}

.ticker__item {
    display: flex;
    align-items: center;
    padding-block: 0.875rem;
    white-space: nowrap;
}

.ticker__item a {
    padding-inline: 0.25rem;
}

.ticker__item a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.ticker__divider {
    padding-inline: 1.25rem;
}

.ticker--static {
    font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}

.ticker--static .ticker__item {
    padding-block: 0.75rem;
}

/* Pause / play control */
.ticker__toggle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 0;
    background: var(--color-ink);
    color: var(--color-paper);
    cursor: pointer;
}

.ticker__toggle .icon {
    width: 1rem;
    height: 1rem;
}

.ticker__toggle-play,
.ticker__toggle[aria-pressed="true"] .ticker__toggle-pause {
    display: none;
}

.ticker__toggle[aria-pressed="true"] .ticker__toggle-play {
    display: block;
}

.ticker__label :focus-visible,
.ticker__toggle:focus-visible {
    outline-color: var(--color-paper);
}

/* Pause on hover, via the button, or while a headline has keyboard focus */
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track {
    animation-play-state: paused;
}

/* When tabbing through headlines, stop the loop and let the row scroll so the focused link is visible */
.ticker__viewport:focus-within {
    overflow-x: auto;
    scrollbar-width: none;
}

.ticker__viewport:focus-within .ticker__track {
    animation: none;
}

@keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (min-width: 900px) {
    .ticker {
        font-size: var(--text-base);
    }
}


/* ==========================================================================
   9. Homepage
   ========================================================================== */

/* Masthead: the site title set as large as the container allows */
.masthead {
    padding-block: var(--space-lg) var(--space-md);
}

.masthead__title {
    margin-left: -0.04em;           /* optical alignment of the big capitals */
}

.masthead__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 2rem;
    margin-top: var(--space-sm);
    padding-top: 0.75rem;
    border-top: var(--rule);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}

.masthead__date {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

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

/* Featured post */
.featured-post {
    padding-block: var(--space-xl) var(--space-lg);
}

.featured-post__header {
    display: grid;
    gap: var(--space-md);
}

.featured-post__title {
    font-size: var(--text-2xl);
}

.featured-post__title a {
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-position: 0 88%;
    background-repeat: no-repeat;
    background-size: 0 0.12em;
    transition: background-size 0.4s var(--ease);
}

.featured-post__title a:hover {
    background-size: 100% 0.12em;
}

.featured-post__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.featured-post__excerpt {
    font-size: var(--text-md);
    line-height: 1.5;
}

.featured-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.featured-post__media {
    display: block;
    margin-top: var(--space-lg);
    overflow: hidden;
    background: var(--color-paper-deep);
}

.featured-post__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.featured-post__media:hover img {
    transform: scale(1.02);
}

@media (min-width: 900px) {
    .featured-post__header {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: var(--space-xl);
    }

    .featured-post__media img {
        aspect-ratio: 16 / 8;
    }
}

/* Feed + sidebar */
.home-layout {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-lg) var(--space-xl);
}

.home-feed__title {
    padding-bottom: 0.75rem;
    border-bottom: var(--rule);
}

.home-feed__more {
    margin-top: var(--space-lg);
}

.post-feed {
    display: grid;
}

/* Grid layout: two columns; a lone final card spans the row as a horizontal card */
.post-feed--grid {
    gap: 0 var(--space-lg);
}

.post-feed--grid > .post-card {
    padding-block: var(--space-lg);
    border-bottom: var(--rule);
}

@media (min-width: 640px) {
    .post-feed--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-feed--grid > .post-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
}

/* List layout: image beside text, ruled rows */
.post-feed--list > .post-card {
    padding-block: var(--space-lg);
    border-bottom: var(--rule);
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

@media (min-width: 1100px) {
    .home-layout {
        grid-template-columns: minmax(0, 1fr) 19rem;
        gap: var(--space-xl);
    }

    /* Only a featured post so far: the sidebar takes the full width */
    .home-layout--no-feed {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Editor's picks: a numbered list */
.picks .eyebrow {
    padding-bottom: 0.75rem;
    border-bottom: var(--rule);
}

.picks__list {
    padding: 0;
    list-style: none;
    counter-reset: picks;
}

.picks__item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.75rem 0;
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--color-rule-soft);
    counter-increment: picks;
}

.picks__item::before {
    grid-row: 1 / span 2;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1.1;
    content: counter(picks, decimal-leading-zero);
}

.picks__title {
    font-size: var(--text-md);
}

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

.picks__item .meta-row {
    grid-column: 2;
}


/* ==========================================================================
   10. Section headings & card grids
   ========================================================================== */

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

.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-bottom: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--rule);
}

.section-heading__title {
    font-size: var(--text-3xl);
}

/* Keeps "All authors →" style links on the right, even when a long heading pushes them onto their own line */
.section-heading .arrow-link {
    margin-left: auto;
}

/*
   Bordered card grids, drawn like a print layout: the grid carries the top and
   left rules, each cell carries its right and bottom rules, so rows of any
   length close neatly.
*/
.card-grid {
    display: grid;
    border-top: var(--rule);
    border-left: var(--rule);
}

.card-grid > * {
    min-width: 0;
    border-right: var(--rule);
    border-bottom: var(--rule);
}

@media (min-width: 640px) {
    .card-grid--2,
    .card-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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


/* ==========================================================================
   11. Post card (partials/post-card.hbs)
   ========================================================================== */

.post-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-md);
}

.post-card__media {
    overflow: hidden;
    background: var(--color-paper-deep);
}

.post-card__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.post-card:hover .post-card__image {
    transform: scale(1.03);
}

.post-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.post-card__title {
    font-size: var(--text-lg);
    line-height: 1.12;
}

/* The title link covers the whole card */
.post-card__link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.post-card__link:focus-visible {
    outline: none;
}

.post-card:has(.post-card__link:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
}

.post-card:hover .post-card__title a {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.12em;
}

.post-card__excerpt {
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
}

.post-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

.post-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
}

.post-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post-card__eyebrow .icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

/* List variant */
@media (min-width: 640px) {
    .post-card--list {
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .post-card--list .post-card__image {
        aspect-ratio: 1;
    }

    .post-card--list .post-card__title {
        font-size: var(--text-xl);
    }
}

/* Boxed and episode variants live inside .card-grid cells */
.post-card--boxed,
.post-card--episode {
    padding: var(--space-md);
}

.post-card--boxed .post-card__image {
    aspect-ratio: 4 / 3;
}

.post-card--episode .post-card__image {
    aspect-ratio: 1;
}

/* Compact variant: thumbnail beside the title */
.post-card--compact {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    padding: var(--space-md);
}

.post-card--compact .post-card__image {
    aspect-ratio: 1;
}

.post-card--compact .post-card__title {
    font-size: var(--text-md);
}

@media (min-width: 640px) {
    .post-card--compact {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }
}


/* ==========================================================================
   12. Author card (partials/author-card.hbs)
   ========================================================================== */

.author-card {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding: var(--space-md);
}

.author-card__avatar {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-paper-deep);
    color: var(--color-ink-muted);
}

.author-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.4s var(--ease);
}

.author-card:hover .author-card__avatar img {
    filter: none;
}

.author-card__avatar .icon {
    width: 45%;
    height: 45%;
}

.author-card__name {
    align-self: end;
    font-size: var(--text-lg);
}

.author-card__meta {
    align-self: start;
}

.author-card__link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.author-card__link:focus-visible {
    outline: none;
}

.author-card:has(.author-card__link:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: -3px;
}

.author-card:hover .author-card__name a {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.12em;
}

@media (min-width: 640px) {
    .author-card {
        grid-template-columns: 6rem minmax(0, 1fr);
        padding: var(--space-lg);
    }
}

/* Row variant (authors directory) */
.author-card--row {
    padding-inline: 0;
    border-bottom: var(--rule);
}

.author-card__cue {
    display: none;
}

@media (min-width: 900px) {
    .author-card--row {
        grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-rows: auto;
        gap: 2rem;
        padding-block: var(--space-md);
    }

    .author-card--row .author-card__avatar {
        grid-row: auto;
    }

    .author-card--row .author-card__name,
    .author-card--row .author-card__meta {
        align-self: center;
    }

    .author-card__cue {
        display: inline-flex;
    }

    .author-card--row:hover .author-card__cue .icon {
        transform: translateX(4px);
    }
}


/* ==========================================================================
   13. Archive pages
   ========================================================================== */

.archive-header {
    padding-block: var(--space-lg);
}

.archive-header .eyebrow {
    margin-bottom: var(--space-sm);
}

.archive-title {
    margin-left: -0.04em;
}

.archive-description {
    max-width: 40rem;
    margin-top: var(--space-md);
    font-size: var(--text-md);
    line-height: 1.5;
}

.category-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-bottom: var(--space-lg);
}

.category-bar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.archive-feed,
.author-directory,
.episode-list {
    padding-bottom: var(--space-xl);
}

.author-directory__list {
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

/* Podcast episode rows */
.episode-list__items {
    padding: 0;
    list-style: none;
    border-top: var(--rule);
}

.episode-row {
    position: relative;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-block: var(--space-md);
    border-bottom: var(--rule);
}

.episode-row__art {
    grid-row: 1 / span 2;
    overflow: hidden;
    background: var(--color-paper-deep);
}

.episode-row__art img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.episode-row__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.episode-row__title {
    align-self: end;
    font-size: var(--text-lg);
}

.episode-row__meta {
    align-self: start;
}

.episode-row__link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

.episode-row__link:focus-visible {
    outline: none;
}

.episode-row:has(.episode-row__link:focus-visible) {
    outline: 3px solid var(--color-ink);
    outline-offset: 4px;
}

.episode-row:hover .episode-row__title a {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.12em;
}

.episode-row__cue {
    display: none;
}

@media (min-width: 900px) {
    .episode-row {
        grid-template-columns: 10rem minmax(0, 1.4fr) minmax(0, 1fr) auto;
        gap: 2.5rem;
        padding-block: var(--space-lg);
    }

    .episode-row__art {
        grid-row: auto;
    }

    .episode-row__title {
        align-self: center;
        font-size: var(--text-xl);
    }

    .episode-row__meta {
        align-self: center;
    }

    .episode-row__cue {
        display: inline-flex;
    }

    .episode-row:hover .episode-row__cue .icon {
        transform: translateX(4px);
    }
}


/* ==========================================================================
   14. Author profile (author.hbs)
   ========================================================================== */

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

.profile__grid {
    display: grid;
    gap: var(--space-md);
    padding-top: var(--space-lg);
}

.profile__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-paper-deep);
    color: var(--color-ink-muted);
}

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

.profile__avatar .icon {
    width: 40%;
    height: 40%;
}

.profile__follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-bottom: var(--rule);
}

.profile__follow-label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile__follow .social-links {
    justify-content: flex-end;
    margin-inline: 0 -0.625rem;
}

.profile__name {
    font-size: var(--text-2xl);
}

.profile__bio {
    max-width: 40rem;
    margin-top: var(--space-md);
    font-size: var(--text-lg);
    line-height: 1.45;
}

.author-posts__title {
    margin-bottom: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--rule);
    font-size: var(--text-xl);
}

@media (min-width: 900px) {
    .profile__grid {
        grid-template-columns: 18rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "avatar main"
            "aside  main";
        gap: var(--space-md) var(--space-xl);
    }

    .profile__avatar {
        grid-area: avatar;
        width: 100%;
    }

    .profile__main {
        grid-area: main;
    }

    .profile__aside {
        grid-area: aside;
    }
}


/* ==========================================================================
   15. Article (post.hbs & page.hbs)
   ========================================================================== */

.article-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: var(--space-md);
}

/* Section label (tag name on posts, "Authors heading" setting on author profiles).
   Stays right-aligned even when a long label wraps below the "Go back" link. */
.article-header__section {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

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

.article-header__main {
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-lg);
}

.article-header__heading .eyebrow {
    margin-bottom: var(--space-sm);
}

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

.article-standfirst {
    font-size: var(--text-md);
    line-height: 1.5;
}

.article-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: var(--space-lg);
}

.article-header--page .article-header__main {
    padding-block: var(--space-xl) var(--space-lg);
}

@media (min-width: 900px) {
    .article-header__main {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        gap: var(--space-xl);
        padding-block: var(--space-xl) var(--space-lg);
    }

    .article-header--page .article-header__main {
        grid-template-columns: minmax(0, 1fr);
    }
}

.article-image img {
    width: 100%;
    max-height: 85vh;
    object-fit: cover;
}

.article-image figcaption,
.gh-content figcaption {
    padding-top: 0.75rem;
    color: var(--color-ink-muted);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.article-image figcaption a,
.gh-content figcaption a {
    text-decoration: underline;
}

.article-image--square img {
    width: min(100%, 36rem);
    aspect-ratio: 1;
}

/* Byline card */
.byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    margin-block: var(--space-lg) var(--space-xl);
    padding-block: var(--space-sm);
    border-block: var(--rule);
}

.byline__authors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0;
    list-style: none;
}

.byline__author {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.byline__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-paper-deep);
    color: var(--color-ink-muted);
}

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

.byline__name {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.1;
}

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

.byline .meta-row {
    font-size: var(--text-sm);
}

.share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.share__label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
}

.share__list {
    display: flex;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .byline .meta-row {
        margin-right: auto;
    }
}

.article-comments {
    max-width: calc(var(--content) + var(--gutter) * 2);
    padding-block: var(--space-lg);
}

.more-posts {
    padding-top: var(--space-xl);
}


/* ==========================================================================
   16. Post content & Koenig cards
   Content sits on a named grid so cards can break out:
   main (reading width) → wide → full (edge to edge).
   ========================================================================== */

.gh-content {
    --wide-gap: minmax(0, 10rem);
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] var(--wide-gap)
        [main-start] min(var(--content), 100% - var(--gutter) * 2)
        [main-end] var(--wide-gap)
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    padding-bottom: var(--space-xl);
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    line-height: 1.65;
}

.gh-content > * {
    grid-column: main;
    min-width: 0;
}

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

.gh-content > .kg-width-wide {
    grid-column: wide;
}

.gh-content > .kg-width-full {
    grid-column: full;
}

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

/* Lead paragraph */
.post-template .gh-content > p:first-child {
    font-size: 1.2em;
    line-height: 1.5;
}

.gh-content > h2,
.gh-content > h3,
.gh-content > h4 {
    margin-top: 2em;
}

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

.gh-content h2 {
    font-size: 1.75em;
}

.gh-content h3 {
    font-size: 1.35em;
}

.gh-content h4 {
    font-size: 1.1em;
}

.gh-content h5,
.gh-content h6 {
    font-size: 0.95em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gh-content a:not([class]) {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.2s var(--ease);
}

.gh-content a:not([class]):hover {
    text-decoration-color: currentColor;
}

.gh-content ul,
.gh-content ol {
    padding-left: 1.25em;
}

.gh-content li + li {
    margin-top: 0.5em;
}

.gh-content li::marker {
    font-family: var(--font-heading);
    font-weight: 800;
}

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

/* Pull quote */
.gh-content blockquote:not(.kg-blockquote-alt) {
    position: relative;
    margin-block: 2.5em;
    padding: 1.5em 0 1.5em 3.25rem;
    border-block: 2px solid var(--color-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.gh-content blockquote:not(.kg-blockquote-alt)::before {
    position: absolute;
    top: 0.2em;
    left: -0.05em;
    color: var(--color-accent);
    font-size: 3em;
    line-height: 1;
    content: "“";
}

@media (min-width: 1000px) {
    .gh-content > blockquote:not(.kg-blockquote-alt) {
        grid-column: wide;
        padding-left: 5rem;
    }
}

.gh-content blockquote p + p {
    margin-top: 0.75em;
}

/* Alternative quote style */
.gh-content .kg-blockquote-alt {
    margin-block: 2em;
    padding-inline: 1em;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.gh-content hr {
    width: 100%;
    height: auto;
    margin-block: 3em;
    border: 0;
    text-align: center;
}

.gh-content hr::after {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 1.5em;
    content: "✦✦✦";
}

.gh-content code {
    padding: 0.1em 0.35em;
    background: var(--color-paper-deep);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.gh-content pre {
    overflow-x: auto;
    padding: 1.5rem;
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: 0.85rem;
    line-height: 1.6;
}

.gh-content pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

.gh-content table:not(.gist table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.gh-content th,
.gh-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-rule-soft);
    text-align: left;
}

.gh-content th {
    border-bottom: var(--rule);
    font-weight: 800;
}

/* Koenig cards — card_assets are enabled in package.json, so Ghost ships the card
   styles; these rules only integrate cards with the theme's type and spacing */
.gh-content .kg-card + .kg-card,
.gh-content > .kg-card,
.gh-content > figure {
    margin-block: 2em;
}

.gh-content .kg-image {
    margin-inline: auto;
}

.gh-content .kg-gallery-container,
.gh-content .kg-gallery-row,
.gh-content .kg-gallery-image {
    min-width: 0;
}

.gh-content .kg-embed-card iframe {
    width: 100%;
}

.gh-content .kg-bookmark-card,
.gh-content .kg-callout-card,
.gh-content .kg-product-card,
.gh-content .kg-toggle-card,
.gh-content .kg-file-card,
.gh-content .kg-header-card,
.gh-content .kg-signup-card,
.gh-content .kg-cta-card {
    font-family: var(--font-heading);
}

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

.gh-content .kg-button-card a.kg-btn {
    border-radius: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Paywall call to action rendered by {{content}} */
.gh-content .gh-post-upgrade-cta {
    font-family: var(--font-heading);
}


/* ==========================================================================
   17. Newsletter
   ========================================================================== */

/* Sidebar box */
.newsletter-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--space-md);
    background: var(--color-paper-deep);
}

.newsletter-box__title {
    font-size: var(--text-lg);
}

.newsletter-box__text {
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* Full-width band above the footer */
.newsletter-band {
    background: var(--color-ink);
    color: var(--color-inverse-text);
}

.newsletter-band :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--color-paper);
}

.newsletter-band__inner {
    display: grid;
    gap: var(--space-lg);
    padding-block: var(--space-xl);
}

/* The heading is editable in Design settings, so it runs full width to handle
   anything from two words to a full sentence */
.newsletter-band__title {
    max-width: 18em;
    font-size: var(--text-2xl);
}

.newsletter-band__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.newsletter-band__text {
    max-width: 34rem;
    color: var(--color-inverse-muted);
    font-size: var(--text-md);
    line-height: 1.5;
}

@media (min-width: 900px) {
    .newsletter-band__action {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-inverse-rule);
    }

    .newsletter-band__action .button {
        margin-left: auto;
    }
}


/* ==========================================================================
   18. Footer
   ========================================================================== */

.site-footer {
    background: var(--color-ink);
    color: var(--color-inverse-text);
    font-family: var(--font-heading);
}

.site-footer__top {
    display: grid;
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-lg);
    border-top: 1px solid var(--color-inverse-rule);
}

.newsletter-band + .site-footer .site-footer__top {
    padding-top: var(--space-lg);
}

.site-footer__title {
    display: inline-block;
    font-size: var(--text-xl);
}

.site-footer__description {
    max-width: 24rem;
    margin-top: var(--space-sm);
    color: var(--color-inverse-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-lg);
}

.footer-column {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-inverse-rule);
}

.footer-column__title {
    margin-bottom: 0.5rem;
    color: var(--color-inverse-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column .nav {
    padding: 0;
    list-style: none;
}

.footer-column .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    font-size: var(--text-sm);
}

.footer-column .nav a:hover,
.site-footer__bottom a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.footer-column .social-links {
    margin-inline: -0.625rem;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: var(--space-md);
    border-top: 1px solid var(--color-inverse-rule);
    color: var(--color-inverse-muted);
    font-size: var(--text-sm);
}

.site-footer__bottom a {
    color: var(--color-inverse-text);
}

@media (min-width: 900px) {
    .site-footer__top {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-xl);
    }
}


/* ==========================================================================
   19. Pagination & error page
   ========================================================================== */

.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: var(--rule);
}

.pagination[data-pages="1"] {
    display: none;
}

.pagination__count {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.pagination__next {
    text-align: right;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-block: var(--space-xl);
}

/* The page is a left-aligned flex column; let the big status code span the full width so it can be sized to fill it */
.error-page .archive-title {
    align-self: stretch;
}

.error-page__message {
    font-size: var(--text-lg);
}


/* ==========================================================================
   20. Members, recommendations & post navigation
   ========================================================================== */

/* Badge on members-only and paid posts (partials/access-badge.hbs) */
.access-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.875rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.access-badge .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.post-card__tags,
.post-card__top-right {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Paywall prompt shown in place of the rest of a gated post (partials/content-cta.hbs) */
.paywall {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    max-width: calc(var(--content) + var(--gutter) * 2);
    margin-top: var(--space-lg);
    padding-block: var(--space-lg);
    border-top: 3px solid var(--color-ink);
    border-bottom: 1px solid var(--color-rule-soft);
}

.paywall__title {
    font-size: var(--text-xl);
}

.paywall__signin {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

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

/* Comment count in the byline (Ghost swaps the script tag for the count) */
.byline__comments {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
}

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

/* Recommendations (partials/recommendations.hbs) */
.recommendations {
    padding: 0;
    list-style: none;
}

.recommendation__link {
    display: grid;
    gap: 0.5rem;
    height: 100%;
    padding: var(--space-md);
}

.recommendation__favicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    background: var(--color-paper-deep);
}

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

.recommendation__title {
    font-size: var(--text-md);
}

.recommendation__link:hover .recommendation__title {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.12em;
}

.recommendation__url {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.recommendation__description {
    color: var(--color-ink-muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

/* Further reading: the "Latest posts" row is a fallback, hidden whenever the
   related-posts row above it was rendered (see partials/more-posts.hbs) */
.more-posts--related + .more-posts--fallback {
    display: none;
}

/* Empty states (partials/empty-state.hbs) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding-block: var(--space-xl);
    border-top: var(--rule);
    border-bottom: var(--rule);
}

.card-grid .empty-state,
.episode-list__items .empty-state,
.author-directory__list .empty-state {
    grid-column: 1 / -1;
    padding-inline: var(--space-md);
    border-top: 0;
    border-bottom: 0;
}

.empty-state__title {
    font-size: var(--text-xl);
}

.empty-state__text {
    max-width: 34rem;
    color: var(--color-ink-muted);
    font-size: var(--text-md);
    line-height: 1.5;
}

.empty-state .button {
    margin-top: var(--space-xs);
}

/* Previous / next post (partials/post-nav.hbs) */
.post-nav {
    display: grid;
    gap: 1px;
    margin-bottom: var(--space-xl);
    border-top: var(--rule);
    border-bottom: var(--rule);
}

/* Nothing to link to on the newest and oldest posts */
.post-nav:not(:has(a)) {
    display: none;
}

.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: var(--space-md);
}

.post-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.post-nav__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.15;
}

.post-nav__link:hover .post-nav__title {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.12em;
}

.post-nav__link:hover .post-nav__label .icon {
    transform: translateX(-4px);
}

.post-nav__link--next:hover .post-nav__label .icon {
    transform: translateX(4px);
}

.post-nav__label .icon {
    transition: transform 0.25s var(--ease);
}

@media (min-width: 700px) {
    .post-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .post-nav__link--next {
        grid-column: 2;
        align-items: flex-end;
        text-align: right;
    }
}

/* Tag and author banner images */
.archive-banner {
    margin-bottom: var(--space-lg);
}

.archive-banner img {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    background: var(--color-paper-deep);
}

.archive-banner--author {
    padding-top: var(--space-md);
    margin-bottom: 0;
}

/* Custom template: "Feature hero" (custom-feature-hero.hbs) */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(38rem, 76vh);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-inverse-text);
}

.hero__media {
    position: absolute;
    inset: 0;
}

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

/*
   Scrim over the feature image. Publishers can upload any image, including a
   near-white one, so it is deliberately heavy: at 85% ink the lightest possible
   image still leaves paper-on-image at about 4.6:1, above the 4.5:1 AA minimum.
*/
.hero__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 18, 16, 0.95), rgba(18, 18, 16, 0.85) 60%, rgba(18, 18, 16, 0.85));
    content: "";
}

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    padding-block: var(--space-xl);
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 60rem;
    margin-top: auto;
}

.hero__title {
    font-size: var(--text-2xl);
}

.hero__standfirst {
    max-width: 36rem;
    font-size: var(--text-md);
    line-height: 1.5;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.hero .meta-row dd,
.hero .article-header__section {
    color: var(--color-inverse-muted);
}

.hero .meta-row a,
.hero .article-header__section a {
    color: var(--color-inverse-text);
}

.hero .access-badge {
    background: var(--color-paper);
    color: var(--color-ink);
}

.hero :focus-visible {
    outline-color: var(--color-paper);
}


/* ==========================================================================
   21. Dark mode
   Follows the visitor's system setting. Only the colour tokens change: the
   palette flips so the page becomes ink and the type becomes paper, which also
   inverts the footer, newsletter band and hero into light panels — the same
   high-contrast switch the theme uses in light mode, the other way round.
   Ratios checked: body 16.3:1, muted 7.5:1, panel text 14.8:1, inverse 16.3:1.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-paper: #131310;              /* page */
        --color-paper-deep: #1d1d19;         /* panels: newsletter box, code, media placeholders */
        --color-ink: #f3f0e7;                /* type, and the background of inverted panels */
        --color-ink-muted: #a8a49a;           /* 7.5:1 on the page */
        --color-rule: #464439;               /* hairlines, softened so the grid doesn't glare */
        --color-rule-soft: #2c2b26;
        --color-inverse-text: #131310;       /* type on the inverted (light) panels */
        --color-inverse-muted: #56544c;      /* 6.7:1 on those panels */
        --color-inverse-rule: #c8c2b2;
    }

    /* Code blocks stay a dark panel rather than flipping to a light slab */
    .gh-content pre {
        background: var(--color-paper-deep);
        color: var(--color-ink);
        box-shadow: inset 0 0 0 1px var(--color-rule);
    }

    /* The feature-hero scrim inverts too, so dark type stays readable on any image */
    .hero__media::after {
        background: linear-gradient(to top, rgba(243, 240, 231, 0.95), rgba(243, 240, 231, 0.85) 60%, rgba(243, 240, 231, 0.85));
    }

    /* Slightly calmer images against a dark page */
    .post-card__image,
    .featured-post__media img,
    .article-image img,
    .archive-banner img,
    .gh-content img {
        filter: brightness(0.92);
    }

    /*
        Ghost's own card styles (public/cards.min.css) are light-only and hardcode
        white backgrounds with dark text on these cards, so they are repainted here.
    */
    .gh-content .kg-bookmark-card a.kg-bookmark-container,
    .gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
    .gh-content .kg-audio-card,
    .gh-content .kg-file-card a.kg-file-card-container,
    .gh-content .kg-product-card-container,
    .gh-content .kg-nft-card a.kg-nft-card-container {
        background: var(--color-paper-deep);
        color: var(--color-ink);
    }

    .gh-content .kg-nft-card p.kg-nft-description,
    .gh-content .kg-nft-creator span,
    .gh-content .kg-bookmark-description,
    .gh-content .kg-bookmark-metadata {
        color: var(--color-ink-muted);
    }

    .gh-content .kg-nft-header h4.kg-nft-title,
    .gh-content .kg-bookmark-title {
        color: var(--color-ink);
    }

    .gh-content .kg-signup-card-fields,
    .gh-content .kg-signup-card-input {
        background: var(--color-paper-deep);
        color: var(--color-ink);
    }
}

/* ==========================================================================
   22. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* The ticker becomes a still row that can be scrolled sideways */
    .ticker__track {
        animation: none;
    }

    .ticker__viewport {
        overflow-x: auto;
    }

    .ticker__list[aria-hidden="true"],
    .ticker--static .ticker__list + .ticker__list,
    .ticker__toggle {
        display: none;
    }
}