/* Self-hosted fonts
   Previously loaded from fonts.googleapis.com, which cost a DNS lookup, TLS
   handshake and an extra round trip on the critical path before a single glyph
   was requested — and hotlinking Google Fonts has been held to breach the GDPR in
   Germany, which matters for a theme sold to European publishers. The files are
   the same faces, redistributed under the SIL Open Font License. unicode-range is
   preserved so a page still only downloads the subsets it actually needs. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root {
    --ink: #171816;
    --paper: #f4f0e7;
    --white: #fffdf8;
    --rule: #a9a59c;
    --soft-rule: #d9d4c9;
    --muted: #65645f;
    /* One step softer than ink, for decks and card excerpts. Replaces three
       near-identical literals that differed by two or three hex digits. */
    --ink-soft: #45443f;
    --error: #a33529;
    /* Foreground colours that always sit on a dark band (ticker, footer). Named
       rather than inverted so a dark scheme can leave them alone. */
    --on-dark: #c2c0b9;
    --on-dark-muted: #9f9d97;
    --on-dark-rule: #575752;
    /* Brand accent. Set by the publisher in Design & branding; default.hbs feeds
       @site.accent_color in here and derives the two companions below from it. */
    --accent: #f2c744;
    /* Readable foreground for text sitting ON the accent (auto black/white). */
    --accent-contrast: var(--ink);
    /* Ink-weight companion for underlines and hairlines that sit on paper and
       must clear 3:1; the display accent alone only manages 2.08:1. */
    --accent-ink: #8a6a00;
    /* Rule weight for interactive boundaries, which need 3:1 under WCAG 1.4.11.
       --rule (2.42:1) stays for decorative dividers, which are exempt. */
    --rule-strong: #8c887e;
    /* Ghost's own font settings map to what a publisher expects them to change.
       Previously --serif took --gh-font-heading yet carried all the body copy, so
       picking a new *heading* font restyled the reading text and picking a new
       *body* font did almost nothing. */
    --display: var(--gh-font-heading, "Newsreader", Georgia, serif);
    --serif: var(--gh-font-body, "Newsreader", Georgia, serif);
    --sans: "Libre Franklin", Arial, sans-serif;
    --utility: "DM Sans", Arial, sans-serif;
    --shell: min(1280px, calc(100vw - 40px));

    /* Editorial type scale — 1.25 major third on a 16px root.
       Every size in the theme comes from this ladder; nothing is hand-picked.
       Display sizes interpolate between two steps with clamp(). */
    --t-body: 1rem;           /* 16 */
    --t-body-lg: 1.25rem;     /* 20 — long-form reading size */
    --t-1: 1.5625rem;         /* 25 */
    --t-2: 1.9531rem;         /* 31 */
    --t-3: 2.4414rem;         /* 39 */
    --t-4: 3.0518rem;         /* 49 */
    --t-5: 3.8147rem;         /* 61 */
    --t-6: 4.7684rem;         /* 76 */
    --t-7: 5.9605rem;         /* 95 */

    /* Utility type is a separate system: uppercase, letterspaced, sans. A 1.25
       ratio is too coarse below 16px, so these three steps sit off the ladder
       deliberately rather than by accident. */
    --t-label-s: .6875rem;    /* 11 */
    --t-label-m: .75rem;      /* 12 */
    --t-label-l: .875rem;     /* 14 */

    /* Space scale — 4px base. Values of 3px and under are optical hairlines and
       stay literal; everything structural comes from here. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 48px;
    --s-10: 56px;
    --s-11: 64px;
    --s-12: 80px;
    --s-13: 96px;
    --s-14: 120px;
}

* {
    box-sizing: border-box;
}

html {
    /* clip, not hidden: clip contains stray overflow without creating a scroll
       container, so position: sticky on the homepage rail keeps working. */
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

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

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

button,
input {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.shell--narrow {
    max-width: 940px;
}

/* 120 rail + 56 gap + 720 measure + 56 gap + 120 spacer. The mirrored spacer is
   what puts the measure on the page's centre line; see .article-layout. Keep this
   in step with the gap token there — the two are one measurement. */
.shell--article {
    max-width: 1072px;
}

.shell--content {
    max-width: 760px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    color: var(--white);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Focus
   One authored ring for every interactive element. :focus-visible keeps it away
   from pointer users, and currentColor guarantees contrast on any surface — it is
   by definition the text colour there — so the same rule works on paper, on the
   dark footer band, on the accent button and in both colour schemes, without
   needing a palette of focus colours. */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Elements with their own contrasting fill: currentColor is legible *on* the
   element but the ring is drawn outside it, so it needs the page's text colour
   instead. --ink flips with the scheme, so this holds in both. */
.skip-link:focus-visible,
.button--accent:focus-visible,
.button--dark:focus-visible,
.gh-content .kg-button-card a.kg-btn:focus-visible,
.gh-content .kg-product-card a.kg-product-card-button:focus-visible,
.gh-post-upgrade-cta a.gh-btn:focus-visible {
    outline-color: var(--ink);
}

/* Image links have no text of their own, so the ring is drawn tight to the crop
   rather than floating away from it. */
.story-card__image:focus-visible,
.lead-story__image:focus-visible,
.wordmark:focus-visible {
    outline-offset: 3px;
}

.private-card input:focus-visible {
    outline-offset: 1px;
}

/* Removes content visually while leaving it in the accessibility tree. Use this
   instead of display: none wherever the hidden text is an element's only label. */
.u-visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

.eyebrow {
    display: inline-block;
    color: var(--ink);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--s-3) var(--s-5);
    border: 1px solid transparent;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.button--accent {
    background: var(--accent);
    color: var(--accent-contrast);
}

.button--accent:hover {
    background: var(--ink);
    color: var(--white);
}

.button--dark {
    background: var(--ink);
    color: var(--white);
}

.button--dark:hover {
    background: var(--accent);
    color: var(--accent-contrast);
}

.button--light {
    border-color: var(--on-dark);
    color: var(--on-dark);
}

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

.text-link {
    border-bottom: 1px solid currentColor;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Advertising */
.ad-zone {
    position: relative;
    text-align: center;
}

.ad-zone__label {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ad-zone__creative {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    background: var(--paper);
}

.ad-zone__creative > * {
    max-width: 100%;
}

.ad-zone__creative iframe,
.ad-zone__creative img,
.ad-zone__creative video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    object-fit: contain;
}

.ad-zone__creative--970x250 {
    width: min(970px, 100%);
    aspect-ratio: 970 / 250;
}

.ad-zone__creative--300x250 {
    width: 300px;
    aspect-ratio: 300 / 250;
}

.ad-zone__creative--728x90 {
    width: min(728px, 100%);
    aspect-ratio: 728 / 90;
}

.ad-zone--billboard {
    width: min(1040px, calc(100vw - 40px));
    margin: var(--s-6) auto var(--s-7);
    padding: var(--s-4) var(--s-7) var(--s-6);
    border: 1px solid var(--soft-rule);
}

.ad-zone--mpu {
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--rule);
}

.ad-zone--leaderboard {
    margin-top: var(--s-9);
    margin-bottom: var(--s-9);
    padding: var(--s-5);
    border-block: 1px solid var(--soft-rule);
}

/* Header */
.site-header {
    background: var(--white);
}

.utility-bar {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    border-bottom: 1px solid var(--ink);
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: var(--s-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
}

.menu-toggle__icon {
    display: grid;
    width: 19px;
    gap: var(--s-1);
}

.menu-toggle__icon i {
    display: block;
    height: 1px;
    background: currentColor;
}

/* Not a box on desktop: the nav and action links lay out as direct children of
   the utility bar. It only becomes a container below 860px, as the mobile drawer. */
.utility-drawer {
    display: contents;
}

.primary-nav {
    margin-right: auto;
}

.utility-subscribe {
    margin-left: var(--s-5);
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list a {
    transition: opacity .2s ease;
}

.nav-list a:hover {
    opacity: .55;
}

/* The current page is marked with a rule, not by dimming. Reduced opacity reads
   as "disabled" and was previously identical to the hover state. */
.nav-current a {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.utility-actions {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

.masthead {
    display: grid;
    min-height: 154px;
    align-items: center;
    border-bottom: 1px solid var(--ink);
    grid-template-columns: 1fr minmax(320px, 2.3fr) 1fr;
}

.masthead__edition,
.masthead__note {
    display: flex;
    max-width: 210px;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--serif);
    font-size: var(--t-label-l);
    line-height: 1.25;
}

.edition-mark,
.note-mark {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--ink);
    font-family: var(--display);
    font-size: var(--t-1);
    font-style: italic;
    line-height: 1;
}

/* Optically centre the capital: trim the line box to cap height so the
   glyph, not the font's ascender/descender space, is what gets centred. */
.edition-mark {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.wordmark {
    display: block;
    overflow: hidden;
    padding-block: .1em;
    text-align: center;
    font-family: var(--display);
    font-size: clamp(var(--t-4), 7.6vw, var(--t-7));
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .8;
    text-transform: uppercase;
}

.wordmark img {
    max-width: 520px;
    max-height: 110px;
    margin-inline: auto;
    object-fit: contain;
}

.masthead__note {
    justify-self: end;
    text-align: right;
}

.note-mark {
    order: 2;
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--sans);
    font-style: normal;
}

.topic-nav {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ink);
    font-family: var(--serif);
    font-size: var(--t-body);
    letter-spacing: .035em;
    text-transform: uppercase;
}

.topic-nav .nav-list {
    justify-content: center;
    gap: 0;
}

.topic-nav .nav-list__item + .nav-list__item::before {
    margin-inline: var(--s-3);
    content: "|";
}

/* Collapse the topic band entirely when no secondary navigation is set, rather
   than leaving an empty 48px strip and a rule under the masthead. */
.topic-nav:not(:has(.nav-list__item)) {
    display: none;
}

/* Homepage */
.lead-grid {
    padding-block: var(--s-7) var(--s-8);
}

.lead-story {
    display: grid;
    gap: var(--s-7);
    grid-template-columns: minmax(300px, .75fr) minmax(480px, 1.55fr);
}

.lead-story__copy {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-right: var(--s-3);
}

.lead-story h1 {
    margin: var(--s-4) 0 var(--s-5);
    font-family: var(--display);
    font-size: clamp(var(--t-3), 4.2vw, var(--t-5));
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .98;
}

.lead-story h1 a:hover,
.story-card__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.lead-story__copy > p {
    max-width: 46ch;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.35;
}

.lead-story__image {
    display: block;
    min-height: 460px;
    background: var(--paper);
}

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

.story-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.top-stack {
    display: grid;
    margin-top: var(--s-7);
    border-top: 1px solid var(--ink);
    grid-template-columns: repeat(3, 1fr);
}

.story-card {
    min-width: 0;
}

.story-card--compact {
    display: grid;
    padding: var(--s-5) var(--s-6) 0;
    border-right: 1px solid var(--rule);
    grid-template-columns: 140px 1fr;
}

.story-card--compact:first-child {
    padding-left: 0;
}

.story-card--compact:last-child {
    padding-right: 0;
    border-right: 0;
}

.story-card--compact .story-card__image {
    margin-right: var(--s-5);
}

.story-card--compact .story-card__image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.story-card--compact .story-card__title {
    margin: var(--s-2) 0 var(--s-5);
    font-family: var(--display);
    font-size: var(--t-body-lg);
    font-weight: 500;
    line-height: 1.1;
}

.story-card--compact .story-card__excerpt {
    display: none;
}

.ticker-band {
    background: var(--ink);
    color: var(--white);
}

.ticker-band__inner {
    display: grid;
    min-height: 76px;
    align-items: center;
    gap: var(--s-5);
    grid-template-columns: auto 1fr auto;
    font-size: var(--t-label-l);
}

.ticker-band__live {
    padding: var(--s-2) var(--s-3);
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ticker-band__inner strong {
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    font-weight: 500;
}

.ticker-band__inner > a {
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.latest-section {
    padding-block: var(--s-10) var(--s-11);
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-3);
    border-bottom: 3px solid var(--ink);
}

.section-heading h2 {
    margin: 0;
    font-family: var(--utility);
    font-size: var(--t-body-lg);
    letter-spacing: .025em;
    line-height: 1;
    text-transform: uppercase;
}

.section-heading > span {
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-label-l);
    font-style: italic;
}

.latest-layout {
    display: grid;
    align-items: start;
    gap: var(--s-8);
    grid-template-columns: minmax(0, 1fr) 300px;
}

.story-grid,
.archive-grid {
    display: grid;
    gap: var(--s-7) var(--s-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.story-card__image {
    display: block;
    overflow: hidden;
    background: var(--paper);
}

.story-card--grid .story-card__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .45s ease;
}

.story-card--grid:hover .story-card__image img {
    transform: scale(1.025);
}

.story-card--grid .story-card__body {
    padding-top: var(--s-4);
}

/* Featured posts
   Marked with a rule above the card and a flag in the body, rather than by size,
   so a featured post stays legible inside an even grid. */
.story-card--grid.featured .story-card__body {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 3px solid var(--accent);
}

.story-card__flag {
    display: inline-block;
    margin-right: var(--s-2);
    padding: 3px var(--s-2);
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.story-card__title {
    margin: var(--s-2) 0 var(--s-3);
    font-family: var(--display);
    font-size: var(--t-1);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.08;
}

.story-card__excerpt {
    margin-bottom: var(--s-4);
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: var(--t-body);
    line-height: 1.35;
}

.home-rail {
    position: sticky;
    top: 20px;
}

.rail-note {
    margin-top: var(--s-7);
    padding: var(--s-7);
    background: var(--paper);
}

.rail-note h3 {
    margin: var(--s-4) 0;
    font-family: var(--display);
    font-size: var(--t-2);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1;
}

.rail-note p {
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body);
}

.membership-cta {
    display: grid;
    align-items: end;
    gap: var(--s-7);
    margin-bottom: var(--s-12);
    padding: var(--s-9);
    background: var(--accent);
    color: var(--accent-contrast);
    grid-template-columns: 1.5fr 1fr auto;
}

.membership-cta h2 {
    max-width: 680px;
    margin: var(--s-3) 0 0;
    font-family: var(--display);
    font-size: clamp(var(--t-2), 4vw, var(--t-5));
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .98;
}

.membership-cta > p {
    margin: 0;
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.35;
}

/* Archives */
.archive-page {
    padding-block: var(--s-11) var(--s-13);
}

.archive-header {
    max-width: 780px;
    margin-bottom: var(--s-9);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--ink);
}

.archive-header h1,
.page-header h1 {
    margin: var(--s-3) 0 var(--s-4);
    font-family: var(--display);
    font-size: clamp(var(--t-4), 7vw, var(--t-7));
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: .9;
}

.archive-header p,
.page-header > p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.35;
}

.archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.author-header {
    display: grid;
    max-width: none;
    align-items: end;
    gap: var(--s-7);
    grid-template-columns: 180px minmax(0, 650px);
}

.author-header > img {
    width: 180px;
    aspect-ratio: 1;
    object-fit: cover;
}

.pagination {
    display: grid;
    align-items: center;
    margin-top: var(--s-10);
    padding-top: var(--s-5);
    border-top: 1px solid var(--ink);
    grid-template-columns: 1fr auto 1fr;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.pagination > div:last-child {
    text-align: right;
}

.pagination__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pagination__count {
    color: var(--muted);
}

/* Article */
.article-header {
    padding-block: var(--s-11) var(--s-8);
}

.article-header h1 {
    margin: var(--s-4) 0 var(--s-6);
    font-family: var(--display);
    font-size: clamp(var(--t-4), 7.2vw, var(--t-7));
    font-weight: 500;
    letter-spacing: -.052em;
    line-height: .9;
}

.article-deck {
    max-width: 750px;
    margin-bottom: var(--s-7);
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: clamp(var(--t-body-lg), 2.2vw, var(--t-1));
    line-height: 1.28;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.article-byline img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.article-byline div {
    display: grid;
    gap: 2px;
}

.article-byline div span:last-child {
    color: var(--muted);
}

.article-byline a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The hero is usually the LCP element. Without an intrinsic ratio the browser
   cannot reserve its height, so every post shifted layout as the image arrived.
   object-fit absorbs whatever ratio the publisher actually uploaded. */
.article-hero img {
    width: 100%;
    max-height: 780px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-hero figcaption {
    margin-top: var(--s-2);
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
}

/* The third track is an empty spacer mirroring the share rail. Without it the
   two-track grid pushed the measure 42px right of the page centre, which broke
   optical alignment against the headline and hero and made kg-width-full cards
   overhang the viewport by the same 42px. */
.article-layout {
    display: grid;
    gap: var(--s-10);
    padding-block: var(--s-10) var(--s-7);
    grid-template-columns: 120px minmax(0, 720px) 120px;
}

.article-share {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s-4);
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.article-share__rule {
    display: block;
    width: 100%;
    border-top: 3px solid var(--ink);
}

.article-share a {
    border-bottom: 1px solid currentColor;
}

.gh-content {
    min-width: 0;
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.62;
    /* Long unbroken URLs are common in editorial copy and otherwise blow out
       the measure and force the whole page to scroll sideways. */
    overflow-wrap: break-word;
}

/* Code is the one place a mid-token break destroys meaning: let it scroll. */
.gh-content pre,
.gh-content code {
    overflow-wrap: normal;
}

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

/* Scoped so the drop cap can be switched off from theme settings. */
body:not(.no-drop-cap) .gh-content > p:first-child::first-letter {
    float: left;
    margin: .08em .1em 0 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 5.4em;
    font-weight: 500;
    line-height: .72;
}

/* Content headings descend the ladder to h4, then become labels. Body copy is
   --t-body-lg (20px), so h5 and h6 cannot out-size it; they are set uppercase and
   letterspaced instead, which reads as a deliberate label rather than as a
   heading that failed to get bigger. Previously h4 carried no size at all (so it
   matched body copy exactly) and h5/h6 were never selected, leaving them smaller
   than the text they introduced. */
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    margin-top: 1.8em;
    margin-bottom: .65em;
    font-family: var(--sans);
    line-height: 1.1;
}

.gh-content h2 {
    font-size: var(--t-3);
}

.gh-content h3 {
    font-size: var(--t-2);
}

.gh-content h4 {
    font-size: var(--t-1);
}

.gh-content h5,
.gh-content h6 {
    font-family: var(--utility);
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.3;
    text-transform: uppercase;
}

.gh-content h5 {
    font-size: var(--t-body);
}

.gh-content h6 {
    color: var(--muted);
    font-size: var(--t-label-l);
}

.gh-content a {
    text-decoration: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gh-content blockquote {
    margin: 2em 0;
    padding: var(--s-2) 0 var(--s-2) var(--s-7);
    border-left: 6px solid var(--accent);
    font-size: var(--t-1);
    font-style: italic;
    line-height: 1.25;
}

.gh-content hr {
    width: 120px;
    margin: 3em auto;
    border: 0;
    border-top: 1px solid var(--ink);
}

.gh-content figure,
.gh-content .kg-card {
    margin-block: 2.4em;
}

.gh-content figcaption {
    margin-top: var(--s-2);
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    line-height: 1.4;
    text-align: left;
}

.gh-content pre {
    overflow-x: auto;
    padding: var(--s-6);
    background: var(--ink);
    color: var(--white);
    font-size: var(--t-label-l);
}

.gh-content .kg-width-wide {
    width: min(980px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
}

.gh-content .kg-width-full {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.gh-content .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.gh-content .kg-gallery-row {
    display: flex;
    gap: var(--s-2);
}

.gh-content .kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Koenig cards
   card_assets stays on so Ghost supplies the gallery behaviour and the audio and
   video players, but its default CSS is a rounded, system-sans look that belongs
   to no theme in particular. Ghost injects that CSS through {{ghost_head}} — i.e.
   after this stylesheet — so these rules are scoped one level deeper to win on
   specificity rather than on source order. Squared corners, hairline rules, serif
   titles and utility labels, matching the rest of the theme. */

.gh-content .kg-bookmark-card a,
.gh-content .kg-button-card a,
.gh-content .kg-product-card a,
.gh-content .kg-file-card a {
    text-decoration: none;
}

/* Bookmark.
   Ghost qualifies several card rules with an element token — .kg-bookmark-card
   a.kg-bookmark-container — so those need matching here or its defaults win. */
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover {
    display: flex;
    min-height: 148px;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
    color: inherit;
}

.gh-content .kg-bookmark-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--s-5);
}

.gh-content .kg-bookmark-title {
    color: var(--ink);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    font-weight: 500;
    line-height: 1.2;
}

.gh-content .kg-bookmark-description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: var(--s-2);
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gh-content .kg-bookmark-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-4);
    color: var(--ink);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gh-content .kg-bookmark-icon {
    width: 18px;
    height: 18px;
}

.gh-content .kg-bookmark-thumbnail {
    flex: 0 0 33%;
    min-height: 100%;
}

.gh-content .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

/* Buttons */
.gh-content .kg-button-card.kg-align-left {
    justify-content: flex-start;
}

.gh-content .kg-button-card.kg-align-center {
    justify-content: center;
}

.gh-content .kg-button-card a.kg-btn {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    padding: var(--s-3) var(--s-6);
    border-radius: 0;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
}

.gh-content .kg-button-card a.kg-btn-accent {
    background: var(--accent);
    color: var(--accent-contrast);
}

.gh-content .kg-button-card a.kg-btn-accent:hover {
    background: var(--ink);
    color: var(--white);
}

/* Callouts */
.gh-content .kg-callout-card {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-6);
    border-radius: 0;
    background: var(--paper);
}

.gh-content .kg-callout-emoji {
    font-size: var(--t-body-lg);
    line-height: 1.3;
}

.gh-content .kg-callout-card div.kg-callout-text {
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.45;
}

.gh-content .kg-callout-card-white { background: var(--white); box-shadow: inset 0 0 0 1px var(--soft-rule); }
.gh-content .kg-callout-card-grey { background: #eceae3; }
.gh-content .kg-callout-card-blue { background: #e3e9ef; }
.gh-content .kg-callout-card-green { background: #e2eae1; }
.gh-content .kg-callout-card-yellow { background: #f6eccd; }
.gh-content .kg-callout-card-red { background: #f2e2df; }
.gh-content .kg-callout-card-pink { background: #f2e2ea; }
.gh-content .kg-callout-card-purple { background: #e8e4ef; }
.gh-content .kg-callout-card-accent { background: var(--accent); color: var(--accent-contrast); }

/* Toggle */
.gh-content .kg-toggle-card {
    padding: var(--s-5) 0;
    border-block: 1px solid var(--soft-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.gh-content .kg-toggle-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.gh-content .kg-toggle-card h4.kg-toggle-heading-text {
    font-family: var(--serif);
    font-size: var(--t-1);
    font-weight: 500;
    line-height: 1.2;
}

.gh-content .kg-toggle-content {
    margin-top: var(--s-3);
    font-size: var(--t-body-lg);
}

/* File */
.gh-content .kg-file-card a.kg-file-card-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}

.gh-content .kg-file-card-title {
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    font-weight: 500;
}

.gh-content .kg-file-card-caption {
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body);
}

.gh-content .kg-file-card-metadata,
.gh-content .kg-file-card-filename,
.gh-content .kg-file-card-filesize {
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Product */
.gh-content .kg-product-card-container {
    padding: var(--s-6);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--white);
}

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

.gh-content .kg-product-card h4.kg-product-card-title {
    font-family: var(--serif);
    font-size: var(--t-1);
    font-weight: 500;
}

.gh-content .kg-product-card-description {
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body);
}

.gh-content .kg-product-card-rating-active {
    color: var(--accent);
}

.gh-content .kg-product-card a.kg-product-card-button {
    border-radius: 0;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.gh-content .kg-product-card a.kg-product-card-btn-accent {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* Audio and video chrome. Ghost supplies the player behaviour; this is the skin. */
.gh-content .kg-audio-card,
.gh-content .kg-video-container {
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    background: var(--white);
}

.gh-content .kg-audio-title,
.gh-content .kg-video-title {
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    font-weight: 500;
}

.gh-content .kg-audio-player-container {
    background: var(--white);
}

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

.gh-content .kg-audio-current-time,
.gh-content .kg-audio-time,
.gh-content .kg-audio-duration,
.gh-content .kg-video-current-time,
.gh-content .kg-video-time,
.gh-content .kg-video-duration {
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
}

.gh-content .kg-audio-playback-rate,
.gh-content .kg-video-playback-rate {
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
}

.gh-content .kg-audio-seek-slider::-webkit-slider-runnable-track,
.gh-content .kg-video-seek-slider::-webkit-slider-runnable-track {
    background: var(--soft-rule);
}

/* Before / after */
.gh-content .kg-before-after-card {
    border-radius: 0;
}

/* NFT */
.gh-content .kg-nft-card .kg-nft-card-container {
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: none;
}

.gh-content .kg-nft-title {
    font-family: var(--serif);
    font-weight: 500;
}

.gh-content .kg-nft-creator,
.gh-content .kg-nft-description {
    font-family: var(--serif);
}

/* Header and signup cards carry their own background, so only the type is set. */
.gh-content .kg-header-card h2,
.gh-content .kg-signup-card-heading {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -.02em;
}

.gh-content .kg-header-card h3,
.gh-content .kg-signup-card-subheading {
    font-family: var(--serif);
    font-weight: 400;
}

.gh-content .kg-signup-card-button {
    border-radius: 0;
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    text-transform: uppercase;
}

.gh-content .kg-signup-card-input {
    border-radius: 0;
    font-family: var(--sans);
}

/* Alternate blockquote */
.gh-content .kg-blockquote-alt {
    padding: 0 0 0 var(--s-6);
    border-left: 0;
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-1);
    font-style: normal;
    line-height: 1.3;
}

/* Base elements
   Everything below is markup a writer can produce from the editor or an HTML
   card but which the theme previously left to browser defaults: tables rendered
   with no borders and 1px of padding, inline code was indistinguishable from
   prose, and lists sat on the UA's 40px indent. */

.gh-content ul,
.gh-content ol {
    padding-left: var(--s-6);
}

.gh-content li {
    margin-bottom: .4em;
}

.gh-content li::marker {
    color: var(--muted);
}

/* Nested lists tighten up and change marker so depth is legible. */
.gh-content li > ul,
.gh-content li > ol {
    margin-top: .4em;
    margin-bottom: 0;
}

.gh-content ul ul {
    list-style-type: circle;
}

.gh-content ul ul ul {
    list-style-type: square;
}

.gh-content table {
    width: 100%;
    margin-block: 2em;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.45;
}

.gh-content th,
.gh-content td {
    padding: var(--s-3) var(--s-4) var(--s-3) 0;
    border-bottom: 1px solid var(--soft-rule);
    overflow-wrap: break-word;
    text-align: left;
    vertical-align: top;
}

.gh-content thead th {
    border-bottom: 2px solid var(--ink);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gh-content tbody tr:last-child td {
    border-bottom: 0;
}

.gh-content code {
    padding: .1em .35em;
    background: var(--paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
}

/* Inside a code block the inline treatment would double up. */
.gh-content pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.gh-content sub,
.gh-content sup {
    /* Zero line-height stops super/subscripts opening up the line they sit on. */
    font-size: .7em;
    line-height: 0;
}

.gh-content mark {
    padding: .05em .2em;
    background: var(--accent);
    color: var(--accent-contrast);
}

.gh-content abbr[title] {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.gh-content del {
    color: var(--muted);
}

.gh-content kbd {
    padding: .1em .4em;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8em;
}

.gh-content blockquote cite {
    display: block;
    margin-top: .5em;
    color: var(--muted);
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-style: normal;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Markdown footnotes arrive as .footnotes containing its own <hr>, which would
   otherwise pick up the theme's decorative centred rule. */
.gh-content .footnotes {
    margin-top: 3em;
    padding-top: var(--s-6);
    border-top: 1px solid var(--soft-rule);
    font-size: var(--t-body);
}

.gh-content .footnotes hr {
    display: none;
}

.gh-content .footnotes li {
    margin-bottom: .6em;
}

.gh-content .footnote-backref {
    text-decoration: none;
}

/* Raw embeds from HTML cards have intrinsic widths that overflow the measure. */
.gh-content iframe,
.gh-content video,
.gh-content embed,
.gh-content object {
    max-width: 100%;
}

/* Paywall
   Ghost appends this block to {{content}} when the reader cannot access the full
   post. It is not part of the theme's markup, so without these rules a gated post
   ends in unstyled system-sans defaults that match nothing else on the page. */
.gh-post-upgrade-cta {
    margin-block: 3em;
    padding: var(--s-10) var(--s-8);
    background: var(--paper);
    text-align: center;
}

.gh-post-upgrade-cta h2 {
    margin: 0 0 var(--s-4);
    font-family: var(--serif);
    font-size: var(--t-2);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.gh-post-upgrade-cta p {
    max-width: 46ch;
    margin: 0 auto var(--s-6);
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.4;
}

.gh-post-upgrade-cta p:last-child {
    margin-bottom: 0;
    font-size: var(--t-body);
}

.gh-post-upgrade-cta a.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--s-3) var(--s-6);
    background: var(--ink);
    color: var(--white);
    font-family: var(--utility);
    font-size: var(--t-label-m);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
}

.gh-post-upgrade-cta a.gh-btn:hover {
    background: var(--accent);
    color: var(--accent-contrast);
}

.gh-post-upgrade-cta a:not(.gh-btn) {
    text-decoration-color: var(--accent-ink);
}

.article-footer {
    padding-block: var(--s-7) var(--s-11);
    border-top: 1px solid var(--ink);
}

.article-comments {
    padding-block: var(--s-5) var(--s-11);
}

.article-tags {
    margin-bottom: var(--s-8);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.article-tags a {
    display: inline-block;
    margin-left: var(--s-2);
    padding: var(--s-1) var(--s-2);
    border: 1px solid var(--rule-strong);
}

.author-box {
    display: grid;
    align-items: center;
    gap: var(--s-6);
    grid-template-columns: 110px 1fr;
}

.author-box > img {
    width: 110px;
    aspect-ratio: 1;
    object-fit: cover;
}

.author-box h2 {
    margin: var(--s-2) 0;
    font-family: var(--display);
    font-size: var(--t-2);
    font-weight: 500;
}

.author-box p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-family: var(--serif);
}

.related-stories {
    padding-block: var(--s-7) var(--s-12);
}

.page-shell {
    padding-block: var(--s-11) var(--s-13);
}

.page-header {
    margin-bottom: var(--s-8);
}

.page-shell > .gh-content {
    padding-top: var(--s-9);
}

/* Footer */
.site-footer {
    padding-top: var(--s-10);
    background: var(--ink);
    color: var(--white);
}

.footer-lead {
    display: grid;
    align-items: end;
    gap: var(--s-7);
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--on-dark-rule);
    grid-template-columns: 1.3fr 1fr auto;
}

.footer-wordmark {
    font-family: var(--display);
    font-size: clamp(var(--t-4), 7vw, var(--t-6));
    letter-spacing: -.045em;
    line-height: .8;
    text-transform: uppercase;
}

.footer-lead p {
    max-width: 420px;
    margin: 0;
    color: var(--on-dark);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
}

.footer-grid {
    display: grid;
    gap: var(--s-9);
    padding-block: var(--s-9) var(--s-10);
    grid-template-columns: .75fr .75fr 1.5fr;
}

.site-footer .eyebrow {
    color: var(--on-dark-muted);
}

.footer-grid .nav-list {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s-2);
    font-family: var(--utility);
    font-size: var(--t-label-m);
}

.footer-newsletter {
    max-width: 480px;
}

.footer-newsletter h2 {
    margin: var(--s-3) 0;
    font-family: var(--display);
    font-size: var(--t-2);
    font-weight: 500;
    line-height: 1;
}

.footer-newsletter > p:not(.eyebrow) {
    color: var(--on-dark);
    font-family: var(--serif);
}

.footer-base {
    display: flex;
    justify-content: space-between;
    padding-block: var(--s-5);
    border-top: 1px solid var(--on-dark-rule);
    color: var(--on-dark-muted);
    font-family: var(--utility);
    font-size: var(--t-label-s);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Utility pages */
.error-page {
    min-height: 64vh;
    padding-block: var(--s-14);
}

.error-page h1,
.private-card h1 {
    max-width: 760px;
    margin: var(--s-3) 0 var(--s-5);
    font-family: var(--display);
    font-size: clamp(var(--t-4), 8vw, var(--t-7));
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: .9;
}

.private-page {
    display: grid;
    min-height: 100vh;
    padding: var(--s-7);
    background: var(--paper);
    place-items: center;
}

.private-card {
    width: min(720px, 100%);
    padding: var(--s-10);
    background: var(--white);
}

.private-card .footer-wordmark {
    display: block;
    margin-bottom: var(--s-11);
    font-size: var(--t-3);
}

.private-card form {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-7);
}

.private-card label {
    font-family: var(--utility);
    font-size: var(--t-label-s);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.private-card input {
    width: 100%;
    min-height: 48px;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--ink);
}

.form-error {
    color: var(--error);
}

/* Shown in place of a grid when a collection comes back empty. */
.empty-state {
    max-width: 46ch;
    margin: 0;
    color: var(--muted);
    font-family: var(--serif);
    font-size: var(--t-body-lg);
    line-height: 1.35;
}

@media (max-width: 1050px) {
    .masthead {
        grid-template-columns: .7fr 2.3fr .7fr;
    }

    /* Not display: none — this span is the only label on .masthead__note, which
       is a link to signup. Removing it left the link with no accessible name. */
    .masthead__edition span:last-child,
    .masthead__note span:last-child {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .masthead__note {
        justify-self: end;
    }

    .lead-story {
        grid-template-columns: minmax(280px, .8fr) 1.4fr;
    }

    .story-card--compact {
        display: block;
    }

    .story-card--compact .story-card__image {
        margin: 0 0 var(--s-4);
    }

    .story-card--compact .story-card__image img {
        aspect-ratio: 16 / 10;
    }

    .membership-cta {
        align-items: start;
        grid-template-columns: 1.4fr 1fr;
    }

    .membership-cta .button {
        justify-self: start;
    }

    /* Below this the mirrored grid can no longer hold a readable measure — the
       rail would squeeze it to roughly 48 characters — so the rail is dropped and
       the measure runs full width. Nothing is lost: the rail only repeats the
       reading time (in the byline) and the primary tag (in the article footer). */
    .article-layout {
        display: block;
    }

    /* Without the grid tracks the measure would run the full container — 98
       characters at 1024px — so cap it and keep it on the centre line. */
    .article-layout > .gh-content {
        max-width: 720px;
        margin-inline: auto;
    }

    .article-share {
        display: none;
    }
}

@media (max-width: 860px) {
    :root {
        --shell: min(100% - 30px, 720px);
    }

    /* Only offer the toggle when scripting can actually operate it. */
    .js .menu-toggle {
        display: flex;
    }

    .utility-bar {
        flex-wrap: wrap;
        gap: var(--s-4);
        justify-content: space-between;
    }

    /* With scripting the drawer collapses into a panel. Without it the base
       display: contents still applies, so navigation, search and sign-in stay
       in the bar and simply wrap. */
    .js .utility-drawer {
        position: absolute;
        z-index: 20;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        padding: var(--s-6);
        border: 1px solid var(--ink);
        background: var(--white);
    }

    .js .nav-open .utility-drawer {
        display: grid;
        gap: var(--s-5);
        justify-items: start;
    }

    .primary-nav .nav-list,
    .utility-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--s-3);
    }

    .utility-subscribe {
        margin-left: 0;
    }

    .masthead {
        min-height: 120px;
    }

    .wordmark {
        font-size: clamp(var(--t-3), 12vw, var(--t-5));
    }

    .topic-nav {
        overflow-x: auto;
        justify-content: flex-start;
        padding-block: var(--s-3);
    }

    .topic-nav .nav-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .lead-story {
        grid-template-columns: 1fr;
    }

    .lead-story__image {
        min-height: 0;
        grid-row: 1;
    }

    .lead-story__image img {
        aspect-ratio: 16 / 10;
    }

    .lead-story__copy .story-meta {
        margin-top: var(--s-2);
    }

    /* Three cards in two columns. The vertical rules are dropped here because
       they cannot survive a wrapped row without leaving a stray border at the
       grid edge; spacing carries the separation instead. */
    .top-stack {
        gap: var(--s-6);
        grid-template-columns: repeat(2, 1fr);
    }

    .story-card--compact,
    .story-card--compact:first-child,
    .story-card--compact:last-child {
        padding: 0;
        border-right: 0;
    }

    .latest-layout {
        grid-template-columns: 1fr;
    }

    /* auto-fit, not a fixed 300px track: the ad zone is optional, so by default
       the rail has a single child and a fixed track left the rest of the row blank. */
    .home-rail {
        position: static;
        display: grid;
        align-items: start;
        gap: var(--s-7);
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .rail-note {
        margin-top: 0;
    }

    .archive-grid,
    .story-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-lead {
        grid-template-columns: 1fr auto;
    }

    .footer-lead p {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 620px) {
    :root {
        --shell: calc(100vw - 24px);
    }


    .ad-zone--billboard {
        width: calc(100vw - 24px);
        margin-block: var(--s-3) var(--s-5);
        padding: var(--s-2) var(--s-2) var(--s-4);
    }

    .utility-bar {
        min-height: 50px;
    }

    .masthead {
        min-height: 96px;
        grid-template-columns: 44px 1fr 44px;
    }

    .edition-mark,
    .note-mark {
        width: 36px;
        height: 36px;
        font-size: var(--t-body-lg);
    }

    .wordmark {
        font-size: clamp(var(--t-2), 14vw, var(--t-4));
    }

    .topic-nav {
        font-size: var(--t-label-l);
    }

    .lead-grid {
        padding-top: var(--s-5);
    }

    .lead-story h1 {
        margin-top: var(--s-3);
        font-size: var(--t-3);
    }

    .top-stack {
        gap: 0;
        grid-template-columns: 1fr;
    }

    /* Single column: back to a horizontal list row, separated by rules. */
    .story-card--compact,
    .story-card--compact:first-child,
    .story-card--compact:last-child {
        display: grid;
        padding: var(--s-5) 0;
        border-right: 0;
        border-bottom: 1px solid var(--soft-rule);
        grid-template-columns: 120px 1fr;
    }

    .story-card--compact:last-child {
        border-bottom: 0;
    }

    .story-card--compact .story-card__image {
        margin: 0 var(--s-4) 0 0;
    }

    .story-card--compact .story-card__image img {
        aspect-ratio: 1 / 1;
    }

    .ticker-band__inner {
        padding-block: var(--s-4);
        grid-template-columns: auto 1fr;
    }

    .ticker-band__inner > a {
        display: none;
    }

    .latest-section {
        padding-block: var(--s-8) var(--s-9);
    }

    .section-heading > span {
        display: none;
    }

    .story-grid,
    .archive-grid,
    .story-grid--three {
        grid-template-columns: 1fr;
    }

    .story-card__title {
        font-size: var(--t-1);
    }

    .home-rail {
        display: block;
    }

    .rail-note {
        margin-top: var(--s-7);
    }

    .membership-cta {
        gap: var(--s-6);
        margin-bottom: var(--s-9);
        padding: var(--s-7) var(--s-6);
        grid-template-columns: 1fr;
    }

    .archive-page,
    .page-shell {
        padding-block: var(--s-9) var(--s-11);
    }

    .archive-header h1,
    .page-header h1 {
        font-size: var(--t-4);
    }

    .author-header {
        grid-template-columns: 90px 1fr;
    }

    .author-header > img {
        width: 90px;
    }

    .pagination {
        align-items: end;
        grid-template-columns: 1fr 1fr;
    }

    .pagination__count {
        display: none;
    }

    .article-header {
        padding-block: var(--s-9) var(--s-7);
    }

    .article-header h1 {
        font-size: var(--t-4);
    }

    .article-layout {
        padding-top: var(--s-8);
    }

    .gh-content {
        font-size: var(--t-body-lg);
    }

    .gh-content blockquote {
        font-size: var(--t-1);
    }

    .gh-content .kg-width-wide,
    .gh-content .kg-width-full {
        width: 100vw;
    }

    .author-box {
        align-items: start;
        grid-template-columns: 72px 1fr;
    }

    .author-box > img {
        width: 72px;
    }

    .footer-lead,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-lead .button {
        justify-self: start;
    }

    .footer-lead p {
        grid-column: auto;
        grid-row: auto;
    }

    .footer-base {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--s-2);
    }

    .private-card {
        padding: var(--s-7);
    }
}

/* Dark scheme
   Purpose-built values rather than an inversion. The page keeps its warm cast —
   a brown-black rather than a neutral grey — so the palette still reads as paper
   and ink at night. Two rules need explicit handling because they use --ink as a
   *surface* rather than as text: the ticker and footer bands, which would flip to
   light panels, and the code block, which would end up light-on-light. */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #ece7db;
        --ink-soft: #bdb8ac;
        --muted: #a09b90;
        --paper: #211f19;
        --white: #15140f;
        --rule: #4f4b43;
        --soft-rule: #33302a;
        --rule-strong: #6d685e;
        --error: #e0897c;
        /* Static fallback; default.hbs lightens this from the publisher's accent
           where relative colour syntax is available. */
        --accent-ink: #e8c766;
        --on-dark: #c2c0b9;
        --on-dark-muted: #9f9d97;
        --on-dark-rule: #45423b;
    }

    /* These bands are dark by design; one step above the page rather than inverted. */
    .ticker-band,
    .site-footer {
        background: var(--paper);
        color: var(--ink);
    }

    .gh-content pre {
        background: var(--paper);
        color: var(--ink);
    }

    /* Ghost's callout palette is tuned for a light page. */
    .gh-content .kg-callout-card-grey { background: #26241e; }
    .gh-content .kg-callout-card-white { background: #1c1b15; }
    .gh-content .kg-callout-card-blue { background: #1c2530; }
    .gh-content .kg-callout-card-green { background: #1c2620; }
    .gh-content .kg-callout-card-yellow { background: #2c2717; }
    .gh-content .kg-callout-card-red { background: #2e211e; }
    .gh-content .kg-callout-card-pink { background: #2c1f26; }
    .gh-content .kg-callout-card-purple { background: #24202e; }

    /* Feature images carry their own light; damp them slightly so they do not
       glare against a dark page. */
    .story-card__image img,
    .lead-story__image img,
    .article-hero img {
        filter: brightness(.92);
    }
}

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

/* Theme settings
   Driven by body classes set in default.hbs from package.json config. The default
   choice for each setting adds no class, so these only ever describe departures
   from the theme's intended look. */

.no-edition-marks .edition-mark,
.no-edition-marks .note-mark {
    display: none;
}

/* Feed as a list: image beside the copy rather than above it. */
.feed-list .story-grid,
.feed-list .archive-grid {
    gap: var(--s-7);
    grid-template-columns: minmax(0, 1fr);
}

.feed-list .story-card--grid {
    display: grid;
    align-items: start;
    gap: var(--s-6);
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--soft-rule);
}

.feed-list .story-card--grid .story-card__body {
    padding-top: 0;
}

.feed-list .story-card--grid .story-card__image img {
    aspect-ratio: 4 / 3;
}

@media (max-width: 620px) {
    .feed-list .story-card--grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fallbacks
   Every grid above reserves a fixed first track for an image. Feature images,
   author portraits and card thumbnails are all optional in Ghost, and when one is
   absent the surviving text child lands in that fixed track and is clamped to it —
   an author with no portrait had their name and bio rendered in 180px of a 1280px
   container. These guards collapse the track instead.

   Deliberately last in the file: the responsive blocks above re-declare these same
   grids at equal specificity, so source order is what keeps the fallback winning
   at every breakpoint. */
.lead-story:not(:has(.lead-story__image)),
.author-header:not(:has(> img)),
.author-box:not(:has(> img)),
.story-card--compact:not(:has(.story-card__image)) {
    grid-template-columns: minmax(0, 1fr);
}