/* ==========================================================================
   Proza — a quiet, typographic Ghost theme
   Designed and built by Daniël van der Winden · https://daniel.pizza

   Contents
   1. Tokens
   2. Reset & base typography
   3. Layout
   4. Header & navigation
   5. Home
   6. Post lists
   7. Post
   8. Post content (Ghost cards)
   9. Subscribe form
   10. Footer & pagination
   11. Utilities & motion
   ========================================================================== */


/* Literata — variable, optical sizes 7–72, OFL (see assets/fonts/OFL.txt) */

@font-face {
    font-family: "Literata";
    font-style: italic;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: block;
    src: url("../fonts/literata-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Literata";
    font-style: italic;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: block;
    src: url("../fonts/literata-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: "Literata";
    font-style: normal;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: block;
    src: url("../fonts/literata-roman-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Literata";
    font-style: normal;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: block;
    src: url("../fonts/literata-roman-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;
}


/* Source Sans 3 — variable, OFL (see assets/fonts/OFL-source-sans.txt); for the apparatus around the text */

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 200 900;
    font-display: block;
    src: url("../fonts/source-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 200 900;
    font-display: block;
    src: url("../fonts/source-sans-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: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: block;
    src: url("../fonts/source-sans-roman-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: block;
    src: url("../fonts/source-sans-roman-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;
}


/* Metric-matched fallback for Literata, used only in the moment before it arrives */
@font-face {
    font-family: "Literata Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 104%;
    ascent-override: 92%;
    descent-override: 26%;
    line-gap-override: 0%;
}


/* 1. Tokens
   ------------------------------------------------------------------------ */

:root {
    /* Literata by default, Times New Roman as the "typeface" setting's alternative;
       Ghost's own custom-font setting can still override via --gh-font-* */
    --font-times: "Times New Roman", Times, "Nimbus Roman", "Liberation Serif", "Tinos", serif;
    --font-literata: "Literata", "Literata Fallback", var(--font-times);
    --font-serif: var(--font-literata);
    --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-ui: var(--font-sans);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-body: var(--gh-font-body, var(--font-serif));
    --font-heading: var(--gh-font-heading, var(--font-body));

    /* Type scale: fluid between phone and desktop, generous for a serif */
    --size-base: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
    --size-small: 0.8125em;
    /* Source Sans runs small on the body; the apparatus is set a touch larger to match */
    --size-ui: 0.9em;
    --size-ui-small: 0.85em;
    --size-meta: 0.8em;
    --size-h1: 1.3em;
    --size-h2: 1.2em;
    --leading: 1.45;
    --leading-tight: 1.2;
    --weight-body: 380;

    /* Measure: ~58 characters of Literata at this size — a book page rather than a screen column */
    --measure: 36rem;

    /* Hairline for underlines: half a device pixel where the screen allows, never heavier than the font's own */
    --rule-thin: max(0.5px, 0.035em);
    --rule-hair: 0.5px;
    --radius-img: 3px;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* Vertical rhythm */
    --space: 1.5rem;

    /* Colour: warm paper, near-black ink, grey for the quiet parts */
    --color-bg: #fdfdfb;
    --color-text: #111111;
    --color-muted: #6b6b6b;
    --color-faint: #a3a3a3;
    --color-quote: var(--color-muted);
    --color-rule: #dcdcd8;
    --color-mark: #fff2a8;
    --color-code-bg: #f3f3f0;

    /* Accent: Ghost's setting, exactly as picked; dark mode lightens it below */
    --accent-raw: var(--ghost-accent-color, #b23a2e);
    --color-accent: var(--accent-raw);
    --color-link: var(--color-accent);
    --color-link-underline: color-mix(in srgb, var(--color-accent) 45%, transparent);
    --color-on-accent: #ffffff;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]) {
        --color-bg: #151515;
        /* a warm off-white a step below pure: ~11:1 on the ground, easy on the eyes for long reading */
        --color-text: #d3d0c9;
        --color-muted: #9a978f;
        --color-faint: #6a6862;
        /* quotations are italic and light-weight on the dark ground, so they get a step more light than other muted text */
        --color-quote: #aaa69e;
        --color-rule: #2a2a28;
        --color-mark: #5a4b00;
        --color-code-bg: #1f1f1e;
        --weight-body: 360;
        color-scheme: dark;
    }
}

:root[data-scheme="dark"] {
        --color-bg: #151515;
        /* a warm off-white a step below pure: ~11:1 on the ground, easy on the eyes for long reading */
        --color-text: #d3d0c9;
        --color-muted: #9a978f;
        --color-faint: #6a6862;
        /* quotations are italic and light-weight on the dark ground, so they get a step more light than other muted text */
        --color-quote: #aaa69e;
        --color-rule: #2a2a28;
        --color-mark: #5a4b00;
        --color-code-bg: #1f1f1e;
        --weight-body: 360;
        color-scheme: dark;
}

:root[data-scheme="light"] {
    color-scheme: light;
}


/* In dark mode the accent keeps the admin's hue and chroma, but its lightness is
   held in a band that reads on the dark page; a deep accent picked for paper
   would otherwise sink into the background. In light mode it is used exactly as
   picked. Browsers without relative colour syntax keep the raw accent. */
@supports (color: oklch(from red l c h)) {
    @media (prefers-color-scheme: dark) {
        :root:not([data-scheme="light"]) {
            --color-accent: oklch(from var(--accent-raw) clamp(0.70, l, 0.80) min(c, 0.13) h);
            --color-on-accent: #151515;
        }
    }

    :root[data-scheme="dark"] {
        --color-accent: oklch(from var(--accent-raw) clamp(0.70, l, 0.80) min(c, 0.13) h);
        --color-on-accent: #151515;
    }
}


/* Typeface setting */
.typeface-times {
    --font-serif: var(--font-times);
    --weight-body: 400;
    --size-base: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
    --leading: 1.42;
    --measure: 34rem;
}

/* Times has no small caps; fall back to spaced capitals for labels and plain text for the header */
.typeface-times .section-label,
.typeface-times .post-nav-label {
    font-variant-caps: normal;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.typeface-times .site-header {
    font-variant-caps: normal;
    letter-spacing: 0;
}


/* 2. Reset & base typography
   ------------------------------------------------------------------------ */

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

html {
    overflow-x: clip; /* Safari grows the document for a wide descendant even when body clips */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: clip; /* a stray wide element must never give the page a sideways scroll */
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: var(--leading);
    /* Literata's 400 is drawn for small sizes and runs dark at reading size; dark mode lighter still */
    font-weight: var(--weight-body);

    /* OpenType: let the font do its work — kern, liga, calt, onum, pnum.
       (ordn is left off: Adobe's implementation raises letters after capitals.) */
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Paragraph shaping */
    hanging-punctuation: first last;
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--leading-tight);
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: var(--rule-thin);
    text-underline-offset: 0.18em;
    text-decoration-color: var(--color-link-underline);
    text-decoration-skip-ink: auto;
    transition: text-decoration-color 150ms ease-out, text-decoration-thickness 150ms ease-out,
                text-underline-offset 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

@media (hover: hover) {
    a:hover {
        text-decoration-color: currentColor;
    }
}

/* Links in running text: on hover the underline firms up and the words take a faint wash */
.gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container):not(.kg-product-card-button):not(.kg-header-card-button):not(.kg-signup-card-button),
.intro-text a,
.archive-description a,
.post-subtitle a,
figcaption a {
    transition: text-decoration-color 150ms ease-out, text-decoration-thickness 150ms ease-out, text-underline-offset 150ms ease-out;
}

@media (hover: hover) {
    .gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container):not(.kg-product-card-button):not(.kg-header-card-button):not(.kg-signup-card-button):hover,
    .intro-text a:hover,
    .archive-description a:hover,
    .post-subtitle a:hover,
    figcaption a:hover {
        text-decoration-color: currentColor;
    }
}

a:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

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

em, i {
    font-style: italic;
}

strong, b {
    font-weight: 600;
}

small {
    font-size: var(--size-small);
}

abbr,
.caps {
    text-decoration: none;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.04em;
}

sup, sub {
    font-size: 0.7em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-variant-numeric: lining-nums;
}

sup { top: -0.55em; }
sub { bottom: -0.25em; }

/* Literata carries real superior and inferior figures; use them instead of scaling */
.typeface-literata sup,
.typeface-literata sub {
    font-size: 1em;
    top: 0;
    bottom: 0;
    line-height: 0;
}

.typeface-literata sup {
    font-variant-position: super;
    font-feature-settings: "sups" 1;
}

.typeface-literata sub {
    font-variant-position: sub;
    font-feature-settings: "subs" 1;
}

/* Ordinals and fractions where they are written as such */
.ord {
    font-variant-numeric: ordinal;
}

.frac,
.gh-content .kg-callout-text .frac {
    font-variant-numeric: diagonal-fractions;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg));
    color: var(--color-text);
}

::selection img,
img::selection {
    background: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Lining figures wherever numbers sit in rows or tables */
table,
.pagination {
    font-variant-numeric: lining-nums tabular-nums;
}

.sep {
    color: var(--color-faint);
    margin: 0 0.35em;
}

/* Figures set beside small capitals: lining, a touch smaller, so they neither bounce nor tower */
.fig {
    font-variant-numeric: lining-nums tabular-nums;
    font-size: 0.88em;
}

/* Acronyms in running text (wrapped by main.js) are set in small caps, a little
   spaced. Times New Roman has none, and faked ones are worse than capitals */
.caps {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
    font-synthesis: none;
}

.typeface-times .caps {
    font-variant-caps: normal;
    letter-spacing: 0;
}

/* In the footer the © is drawn at cap height; bring it down to meet the small caps */
.colophon .copyright {
    font-size: 0.82em;
    position: relative;
    top: -0.03em;
}

/* The apparatus — navigation, labels, metadata, captions, forms — sits in the sans */
.ui,
.site-nav,
.section-label,
.post-meta,
.post-tags,
.post-nav-label,
.post-item-date,
figcaption,
.pagination,
.site-footer,
.subscribe-label,
.subscribe-input,
.subscribe-message-error {
    font-weight: 400;
}

.ui,
.site-nav,
.section-label,
.post-meta,
.post-tags,
.post-nav-label,
.post-item-date,
figcaption,
.pagination,
.site-footer,
.subscribe-label,
.subscribe-input,
.subscribe-button,
.subscribe-message-error,
.gh-content .kg-bookmark-metadata,
.gh-content .kg-file-card-metadata,
.gh-content .kg-audio-player,
.gh-content .kg-signup-card-disclaimer,
.gh-content .kg-product-card-description {
    font-family: var(--font-ui);
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: normal;
}


/* 3. Layout
   ------------------------------------------------------------------------ */

.site-header,
.site-main,
.site-footer {
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main {
    padding-block: calc(var(--space) * 3.5) calc(var(--space) * 3);
    min-height: 50vh;
}

.section-label {
    font-size: var(--size-ui);
    color: var(--color-muted);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    font-variant-numeric: oldstyle-nums;
    margin: 0 0 var(--space);
}

/* Once the list carries year labels, the first year opens the list, so the section
   label above it steps aside; it stays as a heading for assistive technology */
.post-list-section:has(> .post-list.has-years) > .section-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* 4. Header & navigation
   ------------------------------------------------------------------------ */

/* The wordmark and the actions — search and the member link — share the first line;
   the navigation takes the line beneath, set left so the ragged edge falls where the
   eye expects it. All of it in the sans small caps */
.site-header {
    padding-top: calc(var(--space) * 1.5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title actions"
        "nav nav";
    align-items: baseline;
    column-gap: 2rem;
    row-gap: 0;
    /* a tight leading keeps the navigation close beneath the wordmark: the two lines
       read as one block, the way a running head sits over its subhead */
    line-height: 1.3;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums proportional-nums;
    letter-spacing: 0.04em;
}

.site-title {
    grid-area: title;
    justify-self: start;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

/* The icon hangs in the left margin so the wordmark and navigation share an edge. It sits
   in the line as an inline image, aligned to the middle of the x-height, which is where
   the eye reads the centre of small capitals; the negative margin pulls it out into the
   margin without taking any width from the line. On narrow screens, where there is no
   margin, it moves back inline */
.site-icon {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    border-radius: var(--radius-img);
    object-fit: cover;
    vertical-align: middle;
    margin-left: calc(-1.35em - 0.65em);
    margin-right: 0.65em;
}

/* Without a margin to hang in, the icon sits inline before the name and the two take
   the first line on their own; the navigation, Search and Subscribe share the second,
   so the page's links all sit together on one line beneath the masthead */
@media (max-width: 48em) {
    .site-icon {
        margin-left: 0;
        margin-right: 0.6em;
    }

    .site-header {
        grid-template-areas:
            "title title"
            "nav actions";
        row-gap: 0.5rem;
    }

    /* a logo no longer shares its line with Search and Subscribe */
    .site-logo {
        margin-bottom: 0;
    }

    .site-header:has(.site-logo) .site-actions {
        align-self: baseline;
        margin-bottom: 0;
    }
}

/* Phones: the header steps up a size, so its small capitals and the magnifier are not
   lost against the body text below */
@media (max-width: 40em) {
    .site-header {
        font-size: 1em;
    }

    .nav-search svg {
        width: 1em;
        height: 1em;
        top: 0.16em;
    }
}

.site-nav {
    grid-area: nav;
    font-weight: 400;
}

.site-nav .nav {
    gap: 0 1.4rem;
}

.site-actions {
    grid-area: actions;
    font-weight: 400;
    gap: 0.35rem 1.25rem;
}

.site-header .site-actions a {
    color: var(--color-text);
}

/* Search is a utility, set in the navigation's grey; Subscribe is the one link in ink */
.site-header .site-actions .nav-search a {
    color: var(--color-muted);
}

@media (hover: hover) {
    .site-header .site-actions a:hover {
        color: var(--color-accent);
    }
}

/* Search is a magnifier alone, at every width; its label is left to screen readers.
   Clicking it opens Ghost's search with the field already focused. The link's
   padding widens the target without moving anything */
.nav-search a {
    display: inline-flex;
    align-items: baseline;
    padding: 0.5em;
    margin: -0.5em;
}

.nav-search svg {
    flex: none;
    width: 0.85em;
    height: 0.85em;
    position: relative;
    top: 0.12em;
}

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

/* Long navigations (set by main.js: six links on phones, nine on wider screens) fold
   behind a Menu button on the second line; the list opens beneath it */
.nav-toggle {
    font: inherit;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.04em;
    font-variant-numeric: oldstyle-nums;
    color: var(--color-text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.nav-toggle[hidden] {
    display: none;
}

.nav-toggle::after {
    content: "";
    width: 0.38em;
    height: 0.38em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 150ms ease-out;
    opacity: 0.7;
}

.nav-toggle[aria-expanded="true"]::after {
    transform: translateY(0.08em) rotate(225deg);
}

@media (hover: hover) {
    .nav-toggle:hover {
        color: var(--color-accent);
    }
}

.site-nav.is-folded:not(.is-open) .site-nav-list {
    display: none;
}

.site-nav.is-folded .nav {
    padding-top: 0.5rem;
    gap: 0.6rem 1.4rem;
}

/* Ghost's Portal, search and announcement bar live in iframes that draw their own light
   chrome; in dark mode their canvas turns opaque white unless the colour scheme is left
   alone. Comments are different: their frame follows the page's scheme (mode=auto), so
   it is deliberately not listed here. */
#ghost-portal-root,
#ghost-portal-root iframe,
#ghost-search-root,
#ghost-search-root iframe,
#announcement-bar-root,
#announcement-bar-root iframe {
    color-scheme: normal;
}

/* Comments: the frame's document has no colour scheme of its own (it draws its dark
   styling from the mode attribute, set in post.hbs). A browser paints such a frame
   opaque white whenever the embedding element resolves to dark, so the frame is pinned
   to "light" here — which, with a transparent canvas, lets the page show through. */
#ghost-comments-root,
#ghost-comments-root iframe {
    background: transparent;
    color-scheme: light;
}

/* Publication logo in place of the wordmark */
.site-logo {
    display: block;
    height: 1.5rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    object-position: left center;
    /* an image has no descender space of its own; a little air before the navigation */
    margin-bottom: 0.35rem;
}

/* A logo has no baseline to share, so Search and Subscribe are centred on it instead */
.site-header:has(.site-logo) .site-actions {
    align-self: center;
    margin-bottom: 0.35rem;
}

/* Ghost's announcement bar: injected above the page; set its text in the sans */
.gh-announcement-bar {
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-variant-numeric: lining-nums;
}

.gh-announcement-bar-content a {
    text-decoration-thickness: var(--rule-thin);
    text-underline-offset: 0.16em;
}

/* Visually hidden, read by assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Skip link: visible only when focused */
.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100%;
    z-index: 100;
    padding: 0.4em 0.8em;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-rule);
    border-radius: 4px;
}

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

@media (max-width: 40em) {
    .site-header {
        letter-spacing: 0.05em;
        column-gap: 1.25rem;
    }

    .site-title {
        overflow-wrap: anywhere;
    }

    .site-nav .nav {
        gap: 0 1rem;
    }
}

@media (hover: hover) {
    .site-title:hover {
        color: var(--color-accent);
    }
}

.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

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

@media (hover: hover) {
    .nav a:hover {
        color: var(--color-accent);
    }
}

.nav-current a {
    color: var(--color-accent);
    text-decoration: none;
}


/* 5. Home
   ------------------------------------------------------------------------ */

.intro {
    margin-bottom: calc(var(--space) * 2.5);
}

.intro-text {
    font-size: 1.1em;
    max-width: var(--measure);
}

.intro .subscribe {
    margin-top: calc(var(--space) * 1.5);
}


/* 6. Post lists
   ------------------------------------------------------------------------ */

.archive-header {
    margin-bottom: calc(var(--space) * 2);
}

.archive-title {
    font-size: var(--size-h1);
}

.archive-description {
    margin-top: 0.75rem;
    color: var(--color-muted);
}

.archive-links {
    margin-top: 0.5rem;
}

.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
}

.post-item {
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* Year labels, inserted by main.js where the year changes */
.post-list-year {
    padding: 2.25rem 0 0.6rem;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.post-list.has-years {
    border-top: 0;
}

.post-list-year:first-child {
    padding-top: 0;
}

/* The year label draws the rule that opens its section, so the item before it
   needs no closing rule of its own */
.post-item:has(+ .post-list-year) {
    border-bottom: 0;
}

/* The whole row is the link; the padding lives on the anchor so every part is clickable */
.post-item-link {
    display: block;
    position: relative;
    padding-block: 1.5rem;
    color: var(--color-text);
    text-decoration: none;
}

.post-item-row {
    display: flex;
    justify-content: space-between;
    align-items: first baseline;
    gap: 1rem 1.5rem;
}

.post-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 400;
    line-height: 1.3;
    text-wrap: balance;
    transition: color 120ms ease-out;
}

.post-item-date {
    flex: 0 0 auto;
    color: var(--color-muted);
    white-space: nowrap;
    font-size: var(--size-meta);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums tabular-nums;
    letter-spacing: 0.06em;
    position: relative;
    top: -0.05em;
}

.post-item-excerpt {
    display: block;
    color: var(--color-muted);
    font-size: var(--size-small);
    line-height: 1.45;
    margin-top: 0.65rem;
    max-width: 34rem;
    text-wrap: pretty;
}

.post-item-link:focus-visible .post-item-title {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: var(--rule-thin);
    text-underline-offset: 0.18em;
    text-decoration-color: var(--color-link-underline);
}

@media (hover: hover) {
    .post-item-link:hover .post-item-title {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--rule-thin);
        text-underline-offset: 0.18em;
        text-decoration-color: var(--color-link-underline);
    }
}

.post-item-link:focus-visible {
    outline: none;
}

/* An asterisk marks featured pieces, hung in the left margin so titles stay aligned.
   It is drawn rather than typed: iOS shows the ✳ character as a green emoji */
.post-item-featured .post-item-title::before {
    content: "";
    position: absolute;
    left: -1.4em;
    top: 1.5rem;
    font-size: 0.7em;
    width: 1em;
    height: calc(var(--leading) / 0.7 * 1em);
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4'/%3E%3C/svg%3E") center / 0.8em no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4'/%3E%3C/svg%3E") center / 0.8em no-repeat;
}

/* Narrow screens have no margin to hang it in, so the asterisk sits inside the
   column, just before the title */
@media (max-width: 48em) {
    .post-item-featured .post-item-title::before {
        position: static;
        display: inline-block;
        vertical-align: top;
        margin-right: 0.45em;
    }
}

@media (max-width: 30em) {
    .post-item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }

    /* The base size is smallest on phones, so titles step up for scanning and the
       descriptions, full sentences in grey, come up to a size that reads easily */
    .post-item-title {
        font-size: 1.1em;
    }

    .post-item-excerpt {
        font-size: 0.9em;
    }
}


/* 7. Post
   ------------------------------------------------------------------------ */

.post-header {
    margin-bottom: calc(var(--space) * 1.75);
}

/* Display sizes of a text face close up; a touch of tracking opens them again */
.post-title {
    font-size: var(--size-h1);
    letter-spacing: 0.012em;
}

.post-subtitle {
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.38;
    letter-spacing: 0.01em;
    margin-top: 0.5rem;
    text-wrap: balance;
}

.post-meta {
    margin-top: 1.4rem;
    color: var(--color-muted);
    font-size: var(--size-meta);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums proportional-nums;
    letter-spacing: 0.06em;
    line-height: 1.35;
}

.post-meta .sep {
    margin: 0 0.3em;
}

/* Each item stays whole; the line breaks only at the separators */
.post-meta > time,
.post-meta > span:not(.sep),
.post-meta > a {
    white-space: nowrap;
}

.post-meta .byline a {
    white-space: nowrap;
}

.post-meta a {
    color: inherit;
}

/* Authors on their own line, in the ink */
.post-meta .byline {
    display: block;
    margin-top: 0;
}

.post-meta .byline a {
    color: var(--color-text);
    text-decoration: none;
}

@media (hover: hover) {
    .post-meta .byline a:hover {
        color: var(--color-accent);
    }
}

/* Author page: the portrait hangs in the left margin, like the publication icon */
.archive-header-author {
    position: relative;
}

.author-portrait {
    position: absolute;
    right: calc(100% + 1.25rem);
    top: -0.35rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 48em) {
    .author-portrait {
        position: static;
        display: block;
        margin-bottom: 1rem;
    }
}

.author-links {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.05em;
}

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

@media (hover: hover) {
    .author-links a:hover {
        color: var(--color-accent);
    }
}

.author-location {
    color: var(--color-muted);
}

.post-feature-image {
    margin: 0 0 calc(var(--space) * 2);
}

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

figcaption {
    margin-top: 0.6rem;
    font-size: 0.75em;
    line-height: 1.45;
    color: var(--color-muted);
    text-align: center;
    max-width: 34rem;
    margin-inline: auto;
    text-wrap: balance;
    hyphens: manual;
}

.post-footer {
    margin-top: calc(var(--space) * 3);
    padding-top: var(--space);
    border-top: 1px solid var(--color-rule);
}

.post-tags {
    color: var(--color-muted);
    font-size: var(--size-ui-small);
}

.post-tags a {
    color: inherit;
}

.post-footer .subscribe {
    margin-top: calc(var(--space) * 1.5);
}

.post-comments {
    margin-top: calc(var(--space) * 2);
}

.post-nav {
    margin-top: calc(var(--space) * 3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space);
    border-top: 1px solid var(--color-rule);
    padding-top: var(--space);
}

.post-nav a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--color-text);
    text-decoration: none;
}

.post-nav-title {
    line-height: 1.3;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-nav-next {
    text-align: right;
    grid-column: 2;
}

.post-nav-label {
    font-size: var(--size-ui-small);
    color: var(--color-muted);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}

@media (hover: hover) {
    .post-nav a:hover .post-nav-title {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: var(--rule-thin);
        text-underline-offset: 0.18em;
        text-decoration-color: var(--color-link-underline);
    }
}

@media (max-width: 30em) {
    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav-next {
        grid-column: 1;
        text-align: left;
    }
}


/* 8. Post content (Ghost cards)
   ------------------------------------------------------------------------ */

.gh-content {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
    hyphenate-limit-lines: 2;
    overflow-wrap: break-word;
}

/* Justified setting: straight edges on screens wide enough to hold a full line */
@media (min-width: 40em) {
    .text-justified .gh-content > p,
    .text-justified .gh-content > blockquote:not(.kg-blockquote-alt) {
        text-align: justify;
        text-align-last: start;
        text-wrap: wrap;
    }
}

.gh-content > * + * {
    margin-top: var(--space);
}

/* Book-style paragraphs: adjacent paragraphs run on, with a first-line indent */
.paragraphs-indented .gh-content > p + p {
    margin-top: 0;
    text-indent: 1.5em;
}

/* Section headings: more room above than below, as in a book */
.gh-content > h2 {
    margin-top: calc(var(--space) * 2.5);
}

.gh-content > h3,
.gh-content > h4 {
    margin-top: calc(var(--space) * 1.75);
}

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

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

/* A heading resets the indent on the paragraph that follows */
.gh-content > :not(p) + p {
    text-indent: 0;
}

.gh-content h2 {
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.gh-content h3 {
    font-size: 1.05em;
    font-weight: 500;
    font-style: italic;
    line-height: 1.3;
}

.gh-content h3 em {
    font-style: normal;
}

.gh-content h4,
.gh-content h5,
.gh-content h6 {
    font-size: 1em;
    font-weight: 500;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.04em;
}

/* Titles sit close to the text in size and weight; the italic subtitle does the rest */
.post-title,
.archive-title {
    font-weight: 500;
}


/* Quotations: a lighter voice, set off by a hairline */
.gh-content blockquote {
    margin: var(--space) 0;
    padding: 0.1em 0 0.1em 1.5em;
    border-left: 1px solid var(--color-rule);
    font-style: italic;
    color: var(--color-quote);
}

.gh-content blockquote em,
.gh-content blockquote cite {
    font-style: normal;
}

.gh-content blockquote strong {
    color: var(--color-text);
}

.gh-content blockquote.kg-blockquote-alt {
    margin: calc(var(--space) * 2) 0;
    font-size: 1.2em;
    line-height: 1.35;
    text-align: center;
    padding: 0 1em;
    border-left: 0;
    color: var(--color-text);
}

.gh-content > blockquote.kg-blockquote-alt + * {
    margin-top: calc(var(--space) * 2);
}

/* Lists: the text lines up with the paragraph indent and the marks hang in front of
   it, set in the text face. Items are short lines, so they stay ragged even when
   paragraphs are justified — stretching a line of six words opens rivers — and
   wrap with balanced breaks rather than leaving a word alone on the last line */
.gh-content ul,
.gh-content ol {
    padding-left: 1.5em;
}

.gh-content li {
    padding-left: 0;
    text-align: start;
    text-wrap: pretty;
    hyphens: manual;
    -webkit-hyphens: manual;
}

.gh-content li::marker {
    color: var(--color-muted);
    font-variant-numeric: oldstyle-nums tabular-nums;
}

.gh-content ol > li::marker {
    content: counter(list-item) ".\2002";
}

/* An en dash, as in a manuscript. Safari ignores content on ::marker, so the list
   keeps its (invisible) bullet for assistive technology and the dash is drawn in front */
.gh-content ul > li {
    position: relative;
}

.gh-content ul > li::marker {
    color: transparent;
}

.gh-content ul > li::before {
    content: "\2013";
    position: absolute;
    right: 100%;
    padding-right: 0.5em;
    color: var(--color-muted);
}

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

.gh-content li > ul,
.gh-content li > ol {
    margin-top: 0.35em;
}



.gh-content hr {
    border: 0;
    margin: calc(var(--space) * 2) 0;
    text-align: center;
    line-height: 1;
}

.gh-content hr::after {
    content: "\2042"; /* ⁂ asterism */
    color: var(--color-faint);
    font-size: 1em;
    letter-spacing: 0.25em;
}

.gh-content mark {
    background: var(--color-mark);
    color: inherit;
    padding: 0 0.1em;
}

.gh-content code {
    font-family: var(--font-mono);
    font-size: 0.82em;
    background: var(--color-code-bg);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-variant-numeric: lining-nums slashed-zero;
    font-variant-ligatures: none;
}

.gh-content pre {
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.82em;
    line-height: 1.5;
    font-variant-numeric: lining-nums slashed-zero;
    font-variant-ligatures: none;
    background: var(--color-code-bg);
    padding: 1em 1.25em;
    border-radius: 4px;
    overflow-x: auto;
    hyphens: none;
}

.gh-content pre code {
    display: block;   /* a block child scrolls inside the pre instead of widening the page */
    min-width: 0;
    background: none;
    padding: 0;
    font-size: inherit;
}

.gh-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
}

.gh-content th,
.gh-content td {
    text-align: left;
    padding: 0.5em 0.75em 0.5em 0;
    border-bottom: 1px solid var(--color-rule);
    vertical-align: top;
}

.gh-content th {
    font-weight: 600;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.04em;
}

/* Images & galleries */
.gh-content figure {
    margin: 0;
}

.gh-content > figure,
.gh-content > .kg-card {
    margin-block: calc(var(--space) * 1.5);
}

.gh-content > .kg-image-card,
.gh-content > .kg-gallery-card,
.gh-content > .kg-video-card,
.gh-content > .kg-embed-card {
    margin-block: calc(var(--space) * 2.25);
}

/* Pictures that follow one another sit close, like plates in a book */
.gh-content > .kg-image-card + .kg-image-card,
.gh-content > .kg-gallery-card + .kg-gallery-card,
.gh-content > .kg-image-card + .kg-gallery-card,
.gh-content > .kg-gallery-card + .kg-image-card,
.gh-content > figure + figure {
    margin-top: 0.5rem;
}

.gh-content > .kg-image-card:has(+ .kg-image-card),
.gh-content > .kg-image-card:has(+ .kg-gallery-card),
.gh-content > .kg-gallery-card:has(+ .kg-image-card),
.gh-content > .kg-gallery-card:has(+ .kg-gallery-card),
.gh-content > figure:has(+ figure) {
    margin-bottom: 0.5rem;
}

/* …unless the first carries a caption, which needs air beneath it */
.gh-content > .kg-card-hascaption:has(+ .kg-image-card),
.gh-content > .kg-card-hascaption:has(+ .kg-gallery-card) {
    margin-bottom: calc(var(--space) * 1.25);
}

.gh-content .kg-image {
    margin-inline: auto;
    border-radius: var(--radius-img);
}

.gh-content .kg-width-wide {
    width: min(100vw - 2 * var(--gutter), var(--measure) + 12rem);
    margin-left: 50%;
    transform: translateX(-50%);
}

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

.gh-content .kg-width-full .kg-image {
    width: 100%;
    border-radius: 0;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kg-gallery-row {
    display: flex;
    gap: 0.3rem;
}

.gh-content .kg-gallery-row:not(:first-of-type) {
    margin: 0.3rem 0 0;
}

.gh-content .kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.3rem;
}

/* Pictures open in the lightbox */
.post-feature-image img,
.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img {
    cursor: zoom-in;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-img);
}

/* Bookmark card */
.kg-bookmark-card,
.kg-bookmark-card * {
    text-decoration: none;
}

/* Ghost's card stylesheet adds its own padding, shadow and minimum height; all reset here */
.kg-bookmark-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 0;
    padding: 1rem 1.25rem;
    color: var(--color-text);
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

.kg-bookmark-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.kg-bookmark-title {
    font-weight: 700;
}

.kg-bookmark-description {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: var(--size-small);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kg-bookmark-metadata {
    margin-top: 0.5rem;
    font-size: var(--size-small);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kg-bookmark-icon {
    width: 1em;
    height: 1em;
}

/* The picture is an inset square, not a bleed to the card's edge */
.kg-bookmark-thumbnail {
    position: static;
    flex: 0 0 auto;
    width: clamp(5.5rem, 26%, 8rem);
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
}

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

/* On narrow screens the thumbnail sits above the text rather than beside it */
@media (max-width: 30em) {
    .kg-bookmark-container {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.9rem;
        padding: 1rem;
    }

    .kg-bookmark-thumbnail {
        width: auto;
        aspect-ratio: 2 / 1;
    }
}

/* Callout: a quiet box; the editor's emoji is not shown */
.kg-callout-card {
    display: block;
    padding: 1.1rem 1.4rem;
    border-radius: 4px;
    background: var(--color-code-bg);
}

.gh-content .kg-callout-card .kg-callout-emoji {
    display: none;
}

.kg-callout-text {
    flex: 1 1 auto;
}

/* Toggle: set between two hairlines rather than in a box */
.gh-content .kg-card.kg-toggle-card {
    border: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 0;
    background: transparent;
    color: var(--color-text);
}

.gh-content .kg-toggle-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    cursor: pointer;
}

.gh-content .kg-toggle-card h4.kg-toggle-heading-text {
    font-size: 1em;
    font-weight: 500;
    font-variant-caps: normal;
    letter-spacing: 0;
    line-height: var(--leading);
}

.gh-content .kg-toggle-card-icon {
    flex: 0 0 auto;
    width: 0.8em;
    height: 0.8em;
    align-self: center;
    color: var(--color-faint);
    transition: transform 150ms ease-out, color 150ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-toggle-heading:hover .kg-toggle-card-icon {
        color: var(--color-accent);
    }
}

.gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-card-icon {
    transform: rotate(-90deg);
}

.gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
    display: none;
}

.gh-content .kg-toggle-content {
    margin-top: 0.75rem;
    color: var(--color-muted);
}

/* Button card */
.kg-button-card {
    display: flex;
}

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

.gh-content .kg-btn,
.gh-content .kg-header-card-button,
.gh-content .kg-signup-card-button,
.gh-content .kg-product-card-button {
    display: inline-block;
    font: inherit;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-weight: 500;
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    padding: 0.4em 1em;
    line-height: var(--leading);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-btn:hover,
    .gh-content .kg-header-card-button:hover,
    .gh-content .kg-signup-card-button:hover,
    .gh-content .kg-product-card-button:hover {
        background: color-mix(in oklch, var(--color-accent) 80%, var(--color-text));
        border-color: color-mix(in oklch, var(--color-accent) 80%, var(--color-text));
        color: var(--color-on-accent);
    }
}

/* Embeds: fluid, 16:9 when the provider gives fixed dimensions; the frame takes the
   same corners as a picture */
.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kg-embed-card iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-img);
}

/* Audio embeds keep the height their provider asked for (set from the attribute by main.js) */
.kg-embed-card iframe[src*="spotify"],
.kg-embed-card iframe[src*="soundcloud"],
.kg-embed-card iframe[src*="bandcamp"],
.kg-embed-card iframe[src*="mixcloud"] {
    aspect-ratio: auto;
    height: var(--embed-height, 152px);
}

/* Bandcamp draws a square one-pixel border inside its frame, which a rounded corner would
   cut through. The frame is clipped a pixel in to lose that border, and the figure draws
   the theme's own hairline in its place, rounded like a picture */
.kg-embed-card:has(> iframe[src*="bandcamp"]) {
    position: relative;
}

.kg-embed-card:has(> iframe[src*="bandcamp"])::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--embed-height, 152px);
    box-sizing: border-box;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-img);
    pointer-events: none;
}

.kg-embed-card iframe[src*="bandcamp"] {
    clip-path: inset(1px round var(--radius-img));
}

.kg-embed-card > figcaption {
    align-self: stretch;
}

/* Video card */
.gh-content .kg-video-card .kg-video-container {
    border-radius: var(--radius-img);
    overflow: hidden;
}

.gh-content .kg-video-card video {
    width: 100%;
    display: block;
}

/* Audio card: a small round mark for the file, controls in the sans */
.gh-content .kg-audio-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: 4px;
    background: transparent;
    min-height: 0;
}

.gh-content .kg-audio-thumbnail {
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    aspect-ratio: 1;
    flex: 0 0 3.25rem;
    border-radius: 3px;
    object-fit: cover;
    margin: 0;
}

/* No artwork: a disc in the accent, light enough to sit on either paper */
.gh-content .kg-audio-thumbnail.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
    color: var(--color-accent);
}

/* Ghost's placeholder glyph is white; draw our own note in the accent instead */
.gh-content .kg-audio-thumbnail.placeholder svg {
    display: none;
}

.gh-content .kg-audio-thumbnail.placeholder::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18V5l12-2v13%22/%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2216%22 r=%223%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18V5l12-2v13%22/%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2216%22 r=%223%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.gh-content .kg-audio-player-container {
    flex: 1 1 auto;
    min-width: 0;
}

.gh-content .kg-audio-card,
.gh-content .kg-audio-card .kg-audio-title {
    color: var(--color-text) !important;
}

.gh-content .kg-audio-card .kg-audio-title {
    font: inherit;
    font-weight: 500 !important;
    font-size: 1em;
    line-height: var(--leading-tight);
    margin: 0 0 0.45rem;
    padding: 0;
}

.gh-content .kg-audio-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8em;
    color: var(--color-muted);
    font-variant-numeric: lining-nums tabular-nums;
}

.gh-content .kg-audio-player button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    transition: color 120ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-audio-player button:hover {
        color: var(--color-accent);
    }
}

.gh-content .kg-audio-player svg {
    width: 0.9rem;
    height: 0.9rem;
}

.gh-content .kg-audio-time {
    white-space: nowrap;
}

.gh-content .kg-audio-seek-slider,
.gh-content .kg-audio-volume-slider {
    flex: 1 1 auto;
    min-width: 2rem;
    accent-color: var(--color-accent);
    height: 2px;
    margin: 0;
}

.gh-content .kg-audio-volume-slider {
    flex: 0 0 3.5rem;
}

@media (max-width: 30em) {
    .gh-content .kg-audio-mute-icon,
    .gh-content .kg-audio-volume-slider {
        display: none;
    }
}

/* File card: a line of type with a small arrow, between hairlines */
.gh-content .kg-file-card a.kg-file-card-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    min-height: 0;
    border: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
}

.gh-content .kg-file-card-contents {
    min-width: 0;
    margin: 0;
}

.gh-content .kg-file-card-title {
    font: inherit;
    font-weight: 500;
    line-height: var(--leading);
}

.gh-content .kg-file-card-caption {
    font-family: var(--font-ui) !important;
    font-size: var(--size-ui-small);
    font-style: normal;
    color: var(--color-muted);
    opacity: 1;
    margin-top: 0.1rem;
}

.gh-content .kg-file-card-metadata {
    display: flex;
    gap: 0.6em;
    font-size: 0.75em;
    color: var(--color-muted);
    margin-top: 0.3rem;
    font-variant-numeric: lining-nums;
}

.gh-content .kg-file-card-filename,
.gh-content .kg-file-card-filesize {
    font: inherit;
    font-size: inherit;
    opacity: 1;
}

.gh-content .kg-file-card-icon {
    flex: 0 0 auto;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 0;
    padding: 0;
    color: var(--color-muted);
    transition: color 150ms ease-out, transform 150ms ease-out;
}

.gh-content .kg-file-card-icon::before {
    display: none;
}

.gh-content .kg-file-card-icon svg {
    width: 1rem;
    height: 1rem;
}

@media (hover: hover) {
    .gh-content .kg-file-card-container:hover .kg-file-card-icon {
        color: var(--color-accent);
        transform: translateY(0.1em);
    }
}

@media (hover: hover) {
    .gh-content .kg-file-card-container:hover .kg-file-card-title {
        color: var(--color-accent);
        text-decoration: none;
    }
}

/* Product card: picture set apart from the card by a hair of paper */
.gh-content .kg-product-card {
    display: block;
}

.gh-content .kg-product-card-container {
    display: block;
    max-width: none;
    padding: 0;
    border: 1px solid var(--color-rule);
    border-radius: 4px;
    overflow: visible;
    box-shadow: none;
    background: var(--color-bg);
}

.gh-content .kg-product-card-image {
    display: block;
    width: calc(100% - 6px);
    margin: 3px 3px 0;
    border-radius: 2px;
}

.gh-content .kg-product-card-title-container,
.gh-content .kg-product-card-description,
.gh-content .kg-product-card-rating {
    padding-inline: 1.25rem;
}

.gh-content .kg-product-card-title-container {
    margin-top: 1rem;
}

.gh-content .kg-product-card-title {
    font: inherit;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0;
    line-height: var(--leading-tight);
}

.gh-content .kg-product-card-description,
.gh-content .kg-product-card-description p {
    margin-top: 0.6rem;
    color: var(--color-muted);
    font-size: var(--size-ui);
    line-height: 1.4;
}

.gh-content .kg-product-card-description p {
    margin: 0;
    opacity: 1;
}

.gh-content .kg-product-card-rating {
    margin-top: 0.5rem;
    color: var(--color-muted);
}

.gh-content .kg-product-card a.kg-product-card-button {
    margin: 1.1rem 1.25rem 1.25rem;
    padding: 0.45em 0.9em;
    font-size: 0.8em;
    line-height: 1.2;
    height: auto;
    width: auto;
    justify-content: flex-start;
}

.gh-content .kg-product-card-button span {
    font: inherit;
}

/* Card buttons: the theme's accent over the editor's inline colours */
.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-header-card .kg-header-card-button,
.gh-content .kg-product-card a.kg-product-card-button {
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    border-color: var(--color-accent) !important;
}

@media (hover: hover) {
    .gh-content .kg-button-card a.kg-btn:hover,
    .gh-content .kg-header-card .kg-header-card-button:hover,
    .gh-content .kg-product-card a.kg-product-card-button:hover {
        background: color-mix(in oklch, var(--color-accent) 80%, var(--color-text)) !important;
        border-color: color-mix(in oklch, var(--color-accent) 80%, var(--color-text)) !important;
    }
}

/* Header card: a quiet interlude, set on the paper rather than a block of colour */
.gh-content .kg-header-card {
    padding: calc(var(--space) * 2) var(--gutter);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
    min-height: 0;
    text-align: center;
}

.gh-content .kg-header-card:not(.kg-style-image) {
    background: transparent !important;
    color: var(--color-text) !important;
}

.gh-content .kg-header-card.kg-style-image {
    border: 0;
    border-radius: 4px;
    overflow: hidden;
}

.gh-content .kg-header-card .kg-header-card-content {
    padding: 0;
}

.gh-content .kg-header-card .kg-header-card-text {
    max-width: var(--measure);
    margin-inline: auto;
}

.gh-content .kg-header-card-heading {
    font: inherit;
    font-size: var(--size-h1);
    line-height: var(--leading-tight);
    color: inherit !important;
    margin: 0;
    text-wrap: balance;
}

.gh-content .kg-header-card-subheading {
    font: inherit;
    font-style: italic;
    color: inherit !important;
    opacity: 0.75;
    margin: 0.5rem 0 0;
    text-wrap: balance;
}

.gh-content .kg-header-card-button {
    margin-top: 1.25rem;
}

/* End of post: the tombstone — a small square set flush right, as magazines close a piece */
.post-template .gh-content::after {
    content: "\25A0"; /* ■ */
    display: block;
    text-align: right;
    margin-top: 0.5rem;
    color: var(--color-accent);
    font-size: 0.5em;
    line-height: 1;
    font-family: var(--font-ui);
}

/* Ghost card overrides
   Ghost injects cards.min.css with its own sans-serif, sizes and white
   backgrounds. These selectors match or beat its specificity so the cards
   read as part of the page. */

.gh-content .kg-card,
.gh-content .kg-card *:not(pre):not(code):not(figcaption):not(figcaption *) {
    font-family: inherit;
}

/* Ghost pads the inner text wrappers in vmin units; the card itself carries the spacing here */
/* Apparatus inside cards stays in the sans; !important because the card-wide
   serif inheritance above has to outrank Ghost's own selectors */
.gh-content .kg-card figcaption,
.gh-content .kg-card figcaption *,
.gh-content figure figcaption,
.gh-content .kg-card .kg-bookmark-description,
.gh-content .kg-card .kg-bookmark-metadata,
.gh-content .kg-card .kg-bookmark-metadata *,
.gh-content .kg-card .kg-file-card-metadata,
.gh-content .kg-card .kg-file-card-metadata *,
.gh-content .kg-card .kg-audio-player,
.gh-content .kg-card .kg-audio-player *,
.gh-content .kg-card .kg-video-player,
.gh-content .kg-card .kg-video-player *,
.gh-content .kg-card .kg-video-player-container,
.gh-content .kg-card .kg-video-player-container *,
.gh-content .kg-card .kg-signup-card-disclaimer,
.gh-content .kg-card .kg-product-card-description,
.gh-content .kg-card .kg-product-card-description * {
    font-family: var(--font-ui) !important;
    font-variant-numeric: lining-nums proportional-nums;
}

.gh-content .kg-card .kg-header-card-text,
.gh-content .kg-card .kg-signup-card-text {
    padding: 0 !important;
}

.gh-content .kg-card pre,
.gh-content .kg-card code {
    font-family: var(--font-mono);
}

.gh-content .kg-product-card-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-video-card .kg-video-container {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: none;
    border: 1px solid var(--color-rule);
    border-radius: 4px;
}

@media (hover: hover) {
    .gh-content .kg-bookmark-card a.kg-bookmark-container:hover {
        background: var(--color-bg);
        color: var(--color-text);
        box-shadow: none;
        border: 1px solid var(--color-rule);
        border-radius: 4px;
    }
}

/* Buttons — colours are !important because Ghost writes the editor's picks inline */
.gh-content .kg-button-card a.kg-btn,
.gh-content .kg-header-card.kg-v2 .kg-header-card-button,
.gh-content .kg-header-card a.kg-header-card-button,
.gh-content .kg-product-card a.kg-product-card-button {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    width: auto;
    padding: 0.45em 1.1em;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-weight: 500;
    letter-spacing: 0;
    line-height: var(--leading);
    color: var(--color-on-accent);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-button-card a.kg-btn:hover,
    .gh-content .kg-header-card.kg-v2 .kg-header-card-button:hover,
    .gh-content .kg-signup-card .kg-signup-card-button:hover,
    .gh-content .kg-product-card a.kg-product-card-button:hover {
        background: color-mix(in oklch, var(--color-accent) 80%, var(--color-text));
        border-color: color-mix(in oklch, var(--color-accent) 80%, var(--color-text));
        color: var(--color-on-accent);
        opacity: 1;
    }
}

/* Header card */
.gh-content .kg-header-card.kg-v2,
.gh-content .kg-header-card.kg-size-small,
.gh-content .kg-header-card.kg-size-medium,
.gh-content .kg-header-card.kg-size-large {
    min-height: 0;
    padding: calc(var(--space) * 2) var(--gutter);
}

.gh-content .kg-header-card:not(.kg-style-image) h2.kg-header-card-heading,
.gh-content .kg-header-card:not(.kg-style-image) .kg-header-card-subheading {
    color: var(--color-text) !important;
}

.gh-content .kg-header-card h2.kg-header-card-heading,
.gh-content .kg-header-card.kg-width-wide h2.kg-header-card-heading,
.gh-content .kg-header-card.kg-width-full h2.kg-header-card-heading {
    font-size: 1.35em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: var(--leading-tight);
}

.gh-content .kg-header-card .kg-header-card-subheading,
.gh-content .kg-header-card.kg-width-wide .kg-header-card-subheading,
.gh-content .kg-header-card.kg-width-full .kg-header-card-subheading {
    font-size: 1.05em;
    font-weight: 400;
    font-style: italic;
    line-height: var(--leading);
    max-width: var(--measure);
    margin-inline: auto;
}

/* Sign-up card: centred, set like the theme's own form; never a colour block */
.gh-content .kg-signup-card:not(.kg-style-image) {
    background: transparent !important;
    color: var(--color-text) !important;
}

.gh-content .kg-signup-card,
.gh-content .kg-signup-card.kg-width-wide,
.gh-content .kg-signup-card.kg-width-full {
    padding: calc(var(--space) * 1.75) var(--gutter);
    border-top: var(--rule-hair) solid var(--color-rule);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    min-height: 0;
    text-align: center;
}

.gh-content .kg-signup-card-content {
    padding: 0;
    display: block;
}

.gh-content .kg-signup-card-text,
.gh-content .kg-signup-card-text.kg-align-left,
.gh-content .kg-signup-card-text.kg-align-center {
    max-width: 30rem;
    margin-inline: auto;
    text-align: center !important;
    align-items: center;
}

.gh-content .kg-signup-card h2.kg-signup-card-heading,
.gh-content .kg-signup-card.kg-width-wide h2.kg-signup-card-heading,
.gh-content .kg-signup-card.kg-width-full h2.kg-signup-card-heading {
    font-size: var(--size-h2);
    font-weight: 500;
    letter-spacing: 0;
    line-height: var(--leading-tight);
    text-wrap: balance;
    color: var(--color-text) !important;
}

.gh-content .kg-signup-card .kg-signup-card-subheading {
    font-size: 1em;
    font-weight: 400;
    color: var(--color-muted) !important;
    margin: 0.5rem auto 0;
    text-wrap: balance;
}

.gh-content .kg-signup-card-form {
    margin-top: 1.25rem;
    max-width: none;
    display: block;
}

.gh-content .kg-signup-card-fields,
.gh-content .kg-width-wide .kg-signup-card-fields,
.gh-content .kg-width-full .kg-signup-card-fields {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    transition: border-color 160ms ease-out;
}

.gh-content .kg-signup-card-fields:focus-within {
    border-bottom-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.gh-content .kg-signup-card-input,
.gh-content .kg-signup-card-input::placeholder {
    color: var(--color-text) !important;
}

.gh-content .kg-signup-card-input::placeholder {
    color: var(--color-faint) !important;
}

.gh-content .kg-signup-card-input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0.45em 0;
    font: inherit;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    text-align: left;
    color: var(--color-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    caret-color: var(--color-accent);
}

.gh-content .kg-signup-card-input::placeholder {
    color: var(--color-faint);
}

.gh-content .kg-signup-card-input:focus,
.gh-content .kg-signup-card-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.gh-content .kg-signup-card .kg-signup-card-button,
.gh-content .kg-signup-card.kg-width-wide .kg-signup-card-button,
.gh-content .kg-signup-card.kg-width-full .kg-signup-card-button {
    flex: 0 0 auto;
    display: inline-flex;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0.45em 0;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-weight: 500;
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.08em;
    color: var(--color-accent) !important;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    transition: color 120ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-signup-card .kg-signup-card-button:hover {
        color: var(--color-text) !important;
    }
}

.gh-content .kg-signup-card-button span {
    font: inherit;
}

.gh-content .kg-signup-card-disclaimer {
    font-size: 0.75em;
    font-style: normal;
    color: var(--color-muted) !important;
    margin: 0.75rem auto 0;
}

.gh-content .kg-signup-card-form.success .kg-signup-card-success,
.gh-content .kg-signup-card-success,
.gh-content .kg-signup-card-error {
    font: inherit;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    height: auto;
    color: var(--color-muted);
    margin-top: 0.75rem;
    justify-content: center;
}

/* Bookmark card */
.gh-content .kg-bookmark-title {
    color: var(--color-text);
}

.gh-content .kg-bookmark-author,
.gh-content .kg-bookmark-publisher {
    color: var(--color-muted);
}

.gh-content .kg-bookmark-title {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 120ms ease-out;
}

.gh-content .kg-bookmark-description {
    margin-top: 0.4rem;
    font-family: var(--font-ui);
    font-size: var(--size-ui-small);
    line-height: 1.4;
}

/* Ghost injects an inline white background for bookmark cards; the theme's quiet surface wins */
.gh-content figure.kg-bookmark-card {
    background: transparent !important;
}

.gh-content .kg-bookmark-card a.kg-bookmark-container {
    background: var(--color-code-bg) !important;
    color: var(--color-text);
}

@media (hover: hover) {
    .gh-content .kg-bookmark-card a.kg-bookmark-container:hover {
        background: var(--color-code-bg) !important;
        color: var(--color-text);
    }
}

.gh-content .kg-bookmark-card a.kg-bookmark-container {
    transition: background-color 120ms ease-out;
}

@media (hover: hover) {
    .gh-content .kg-bookmark-card a.kg-bookmark-container:hover {
        background: color-mix(in srgb, var(--color-text) 2%, var(--color-code-bg)) !important;
    }
}

@media (hover: hover) {
    .gh-content .kg-bookmark-card a.kg-bookmark-container:hover .kg-bookmark-title {
        text-decoration: underline;
        text-decoration-thickness: var(--rule-thin);
        text-underline-offset: 0.18em;
        text-decoration-color: var(--color-link-underline);
    }
}

.gh-content .kg-bookmark-metadata {
    margin-top: 0.9rem;
    font-size: var(--size-ui-small);
    color: var(--color-muted);
}

.gh-content .kg-bookmark-icon {
    width: 1.25em;
    height: 1.25em;
    margin: 0 !important;
    border-radius: 50%;
}

.gh-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.45em;
}

.gh-content .kg-bookmark-metadata > span:nth-of-type(2)::before {
    margin: 0 0.1em 0 0;
}

.gh-content .kg-bookmark-author,
.gh-content .kg-bookmark-publisher {
    display: inline;
}

.gh-content .kg-callout-card {
    padding: 1rem 1.25rem;
    border-radius: 4px;
}

/* Ghost's card scripts toggle these; make sure they stay hidden */
.kg-audio-hide,
.kg-video-hide {
    display: none !important;
}

/* Footnotes (Ghost HTML cards or markdown) */
.footnotes,
.gh-content .footnotes {
    font-size: var(--size-small);
    color: var(--color-muted);
    border-top: 1px solid var(--color-rule);
    padding-top: var(--space);
    margin-top: calc(var(--space) * 2);
}

.footnotes ol {
    padding-left: 1.5em;
}

.footnote-backref,
.footnote-ref {
    text-decoration: none;
}


/* 9. Subscribe form
   ------------------------------------------------------------------------ */

/* The sign-up sits in a quiet box so it reads as an invitation rather than a field in the text */
.subscribe {
    background: var(--color-code-bg);
    border-radius: 4px;
    padding: 1.25rem 1.5rem 1.4rem;
}

.subscribe-form {
    max-width: var(--measure);
}

.subscribe-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-muted);
    font-size: var(--size-ui);
}

.subscribe-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.subscribe-row:focus-within {
    border-bottom-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.subscribe-input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.45em 0;
}

.subscribe-input::placeholder {
    color: var(--color-faint);
}

.subscribe-input:focus,
.subscribe-input:focus-visible {
    outline: none;
}

.subscribe-button {
    flex: 0 0 auto;
    font: inherit;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-weight: 500;
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.45em 0;
    cursor: pointer;
    transition: color 120ms ease-out;
}

@media (hover: hover) {
    .subscribe-button:hover {
        color: var(--color-text);
        background: none;
        border: 0;
    }
}

.subscribe-button:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 4px;
}

.subscribe-message {
    display: none;
    margin-top: 0.75rem;
    color: var(--color-muted);
}

/* After signing up the box reads like a small notice: a title and a quiet line under it,
   at the same scale as the form it replaces */
.subscribe-message-success {
    margin-top: 0;
}

.subscribe-message-title {
    margin: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    color: var(--color-text);
}

.subscribe-message-text {
    margin: 0.25rem 0 0;
    max-width: 34rem;
    font-size: var(--size-ui);
    line-height: 1.4;
}

.subscribe-form.success .subscribe-row,
.subscribe-form.success .subscribe-label {
    display: none;
}

.subscribe-form.success .subscribe-message-success,
.subscribe-form.error .subscribe-message-error {
    display: block;
}

.subscribe-form.loading .subscribe-button {
    opacity: 0.5;
    pointer-events: none;
}

/* On phones the field and its button stay on one line, so the rule reads as the
   field's underline; only the narrowest screens let the button drop below */
@media (max-width: 22em) {
    .subscribe-row {
        flex-wrap: wrap;
    }
}


/* 10. Footer & pagination
   ------------------------------------------------------------------------ */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: calc(var(--space) * 1.5);
    font-size: var(--size-ui);
}

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

@media (hover: hover) {
    .pagination a:hover {
        text-decoration: underline;
        text-decoration-thickness: var(--rule-thin);
        text-underline-offset: 0.18em;
        text-decoration-color: var(--color-link-underline);
    }
}

.pagination-count {
    color: var(--color-muted);
}

.site-footer {
    margin-top: calc(var(--space) * 3);
    padding-block: 0 calc(var(--space) * 2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 2rem;
    font-size: var(--size-meta);
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums proportional-nums;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

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

@media (hover: hover) {
    .site-footer a:hover {
        color: var(--color-accent);
    }
}

/* The rule is drawn by a pseudo-element so it spans the measure, not the padded container */
.site-footer::before {
    content: "";
    flex: 0 0 100%;
    border-top: var(--rule-hair) solid var(--color-rule);
    margin-bottom: var(--space);
}

.colophon {
    flex: 0 0 auto;
    margin: 0;
}

/* Row one: copyright left, secondary navigation right */
.footer-nav {
    flex: 1 1 auto;
}

.footer-nav .nav {
    justify-content: flex-end;
    gap: 0.35rem 1.25rem;
}

.footer-nav .nav a {
    color: inherit;
}

.footer-nav .nav .nav-current a {
    color: var(--color-accent);
}

@media (hover: hover) {
    .footer-nav .nav a:hover {
        color: var(--color-accent);
    }
}

/* Row two: members, search, feeds and accounts, set left */
.footer-meta {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
}

.footer-meta a {
    color: inherit;
}

@media (hover: hover) {
    .footer-meta a:hover {
        color: var(--color-accent);
    }
}

/* The Ghost credit sits with the copyright */
.colophon .sep {
    margin: 0 0.3em;
}

.footer-credit {
    color: inherit;
}

.typeface-times .site-footer {
    font-variant-caps: normal;
    letter-spacing: 0;
}

/* On phones the copyright takes the first line and every link, secondary navigation
   and members alike, runs on in one wrapping line beneath it */
@media (max-width: 40em) {
    .site-footer {
        justify-content: flex-start;
        gap: 0.4rem 1.25rem;
    }

    .colophon {
        flex-basis: 100%;
    }

    .footer-nav,
    .footer-nav .nav,
    .footer-meta {
        display: contents;
    }
}


/* Lightbox (opened by main.js for image and gallery cards) */
.lightbox {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: transparent;
    color: var(--color-bg);
    display: none;
}

.lightbox[open] {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr auto;
    gap: 1.25rem;
    background: #141414;
    transition: background-color 400ms ease-out;
    padding: 2rem var(--gutter);
    box-sizing: border-box;
    cursor: zoom-out;
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox img {
    border-radius: var(--radius-img);
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-caption {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--size-ui-small);
    line-height: 1.5;
    color: color-mix(in srgb, #fff 72%, transparent);
    text-align: center;
    max-width: 34rem;
    text-wrap: balance;
}

.lightbox-caption a {
    color: inherit;
}

.lightbox-caption:empty {
    display: none;
}

.lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: color-mix(in srgb, #fff 65%, transparent);
    cursor: pointer;
    transition: color 120ms ease-out;
}

.lightbox-close svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .lightbox-close:hover {
        color: #fff;
    }
}

.lightbox-close:focus-visible {
    outline: 1px solid color-mix(in srgb, #fff 50%, transparent);
    outline-offset: 6px;
    border-radius: 2px;
}


/* Empty states */
.empty {
    color: var(--color-muted);
    font-style: italic;
    padding-block: var(--space);
    border-top: var(--rule-hair) solid var(--color-rule);
}

/* Members content gate */
.paywall {
    margin-top: calc(var(--space) * 2);
    padding: calc(var(--space) * 1.5) 1.5rem;
    background: var(--color-code-bg);
    border-radius: 4px;
    text-align: center;
    position: relative;
}

/* a soft fade from the truncated text above (only when there is text above) */
.paywall:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--space) * -2.5);
    height: calc(var(--space) * 2.5);
    background: linear-gradient(to bottom, transparent, var(--color-bg));
    pointer-events: none;
}

.paywall-title {
    font-size: var(--size-h2);
    font-weight: 500;
}

.paywall-text {
    margin-top: 0.4rem;
    color: var(--color-muted);
    line-height: 1.35;
}

.paywall-form {
    margin: 1.25rem auto 0;
    max-width: 24rem;
    text-align: left;
}

.paywall-actions {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.paywall-button {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: var(--size-ui);
    font-weight: 500;
    padding: 0.45em 1.1em;
    color: var(--color-on-accent);
    background: var(--color-accent);
    border-radius: 4px;
    text-decoration: none;
}

@media (hover: hover) {
    .paywall-button:hover {
        background: color-mix(in oklch, var(--color-accent) 80%, var(--color-text));
    }
}

.paywall-signin {
    margin-top: 1rem;
    font-family: var(--font-ui);
    font-size: var(--size-ui-small);
    color: var(--color-muted);
}

.paywall-signin a {
    color: var(--color-link);
}

/* with no upgrade path (paid tiers off) the sign-in line is the only action: give it room */
.paywall-title + .paywall-signin {
    margin-top: 0.75rem;
}

/* Comments: Ghost's iframe inherits little; keep the label in step */
.post-comments .section-label {
    margin-bottom: var(--space);
}

/* the count sits in parentheses after the word: “Comments (3)” */
.post-comments-count::before { content: "("; }
.post-comments-count::after { content: ")"; }

/* Tables scroll sideways on narrow screens (wrapper added by main.js) */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.table-scroll > table {
    min-width: 28rem;
}

/* Justified text never applies inside code or tables */
.text-justified .gh-content pre,
.text-justified .gh-content table {
    text-align: start;
    text-align-last: auto;
}


/* Motion — one quiet thing, only when the reader has not asked for less:
   pictures settle into place as they scroll into view. The rise uses the separate
   translate property, so it never touches the transform that centres wide and
   full-width cards */
@media (prefers-reduced-motion: no-preference) {
    .has-js .gh-content > .kg-image-card,
    .has-js .gh-content > .kg-gallery-card,
    .has-js .gh-content > .kg-video-card,
    .has-js .gh-content > .kg-embed-card,
    .has-js .gh-content > .kg-bookmark-card,
    .has-js .post-feature-image {
        opacity: 0;
        translate: 0 12px;
        transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1), translate 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
    }

    .has-js .gh-content > .settled,
    .has-js .post-feature-image.settled {
        opacity: 1;
        translate: none;
    }
}


/* In the dark, pictures come down a step so a white-ground image does not glare;
   the lightbox shows them at full strength */
@media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]) .gh-content img,
    :root:not([data-scheme="light"]) .post-feature-image img {
        filter: brightness(0.9);
    }
}

:root[data-scheme="dark"] .gh-content img,
:root[data-scheme="dark"] .post-feature-image img {
    filter: brightness(0.9);
}

.lightbox img {
    filter: none;
}


/* 11. Utilities & motion
   ------------------------------------------------------------------------ */

.error {
    text-align: left;
    margin-bottom: calc(var(--space) * 3);
}

.error .archive-description {
    margin-top: 0.75rem;
    max-width: var(--measure);
}

.error-recent .section-label {
    color: var(--color-muted);
}

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

@media print {
    :root,
    :root[data-scheme="dark"] {
        --color-bg: #fff;
        --color-text: #000;
        --color-muted: #444;
        --color-faint: #777;
        --color-rule: #bbb;
        --color-code-bg: #f2f2f2;
        --color-accent: #000;
        color-scheme: light;
    }

    .site-nav,
    .site-footer,
    .subscribe,
    .paywall,
    .post-nav,
    .pagination,
    .post-comments,
    .lightbox {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    .gh-content > p {
        text-align: start;
        orphans: 3;
        widows: 3;
    }

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

    .gh-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-family: var(--font-ui);
        font-size: 0.8em;
        color: #444;
    }

    figure, .kg-card {
        break-inside: avoid;
    }
}

/* Forced colours (Windows high contrast): hairlines become real lines */
@media (forced-colors: active) {
    :root {
        --rule-hair: 1px;
        --rule-thin: 1px;
    }

    .post-list, .post-item, .post-list-year, .site-footer::before, .post-footer, .post-nav,
    .gh-content blockquote, .kg-toggle-card, .kg-file-card-container, .subscribe-row {
        border-color: CanvasText;
    }

    .post-template .gh-content::after {
        color: CanvasText;
    }

    /* cards drawn by surface colour alone get an edge */
    .kg-bookmark-container, .kg-callout-card {
        border: 1px solid CanvasText;
    }
}