/* ==========================================================================
   Blogga — screen.css

   Ink, paper, one electric thread.

   Table of contents
   -----------------
    0.  Fonts
    1.  Design tokens (light, dark, motion)
    2.  Reset and base
    3.  Utilities
    4.  Base typography and links
    5.  Page frame (header, navigation, footer)
    6.  Masthead greeting
    7.  The ledger index (the signature element)
    8.  Pagination
    9.  Archive headers (tag and author)
   10.  Post and page
   11.  Prose — the content grid and body typography
   12.  Editor cards
   13.  After the article (tags, author, read next, subscribe, comments)
   14.  Members: paywall CTA
   15.  Error and private pages
   16.  Feed layouts: Journal and Grid
   17.  Archives, directories and page extras
   18.  Reading features (post.js)
   19.  Motion
   ========================================================================== */


/* 0. Fonts
   --------------------------------------------------------------------------
   Both faces are self-hosted variable fonts, subset to Latin and Latin Extended.
   Newsreader (SIL OFL) is the voice; Instrument Sans (SIL OFL) is the
   permanent utility face for meta text, and the alternative voice. */

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/newsreader.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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";
    src: url("../fonts/newsreader-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    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: "Instrument Sans";
    src: url("../fonts/instrument-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    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: "Instrument Sans";
    src: url("../fonts/instrument-sans-italic.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    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;
}


/* Latin Extended (Polish, Czech, Turkish, Hungarian, Romanian, Baltic …):
   separate files, fetched only when a page actually uses those characters.
   Cyrillic, Greek and CJK text use the visitor's system fonts. */

@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    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: "Instrument Sans";
    src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    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: "Newsreader";
    src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    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: "Newsreader";
    src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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;
}


/* 1. Design tokens
   --------------------------------------------------------------------------
   Plain values come first as fallbacks; color-mix refinements override them
   in supporting browsers. --accent and --accent-soft are written into :root
   by default.hbs from Ghost's native accent colour; --thread is the accent
   as actually used, lightened in the dark scheme for contrast. */

:root {
    /* Ink and paper */
    --paper: #FFFFFF;
    --ink: #151515;
    --ink-soft: #646464;                                            /* ~64% ink — AA on paper */
    --ink-soft: color-mix(in srgb, var(--ink) 64%, var(--paper));
    --ink-faint: #C9C9C9;                                           /* decorative only */
    --ink-faint: color-mix(in srgb, var(--ink) 22%, var(--paper));
    --ink-ghost: #8E8E8E;                                           /* large decorative type: 3:1 on paper */
    --ink-ghost: color-mix(in srgb, var(--ink) 46%, var(--paper));
    --hairline: rgba(21, 21, 21, 0.1);                              /* the only border */
    --hairline: color-mix(in srgb, var(--ink) 10%, transparent);

    /* The electric thread */
    --accent: #3F33F0;                       /* overridden from Ghost Admin */
    --accent-soft: rgba(63, 51, 240, 0.08);
    --thread: var(--accent);
    --thread-contrast: #FFFFFF;
    --accent-contrast: #FFFFFF;              /* text on an accent-coloured ground */

    /* Type */
    --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --voice-display: var(--font-serif);
    --voice-body: var(--font-serif);

    --text-meta: 0.8125rem;
    --text-small: 0.9375rem;
    --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.1875rem);
    --text-ledger: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-title: clamp(2.4rem, 1.2rem + 4.5vw, 4.2rem);
    --measure: 42rem;

    /* Space — whitespace is the luxury material */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --space-xs: 0.625rem;
    --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --space-m: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
    --space-l: clamp(3rem, 2.2rem + 3.2vw, 5rem);
    --space-xl: clamp(4.5rem, 3.2rem + 5.5vw, 8rem);

    /* Frame widths */
    --page-width: calc(var(--measure) + 2 * var(--gutter));  /* the reading column, plus its gutters,
                                                                 so headers, lists and prose share one left edge */
    --wide-width: 60rem;   /* kg-width-wide and feature images         */
    --frame-width: 76rem;  /* header and footer                        */

    /* Shape: 0 on structure; 2px on buttons and fields only */
    --radius-control: 2px;
}

/* Owner-chosen accents can be any colour, including pale ones. Where the
   browser supports relative colour syntax (Chrome 119+, Safari 16.4+,
   Firefox 128+) the accent is adapted instead of used raw:
   - --thread (links, rules, dots, focus rings, text on paper) is capped at
     OKLCH lightness 0.5 so it keeps at least 4.5:1 against white paper;
     saturated mid-tones like the default ultramarine are untouched.
   - --accent-contrast picks black or white for text sitting on the accent. */
@supports (color: oklch(from red l c h)) {
    :root {
        --thread: oklch(from var(--accent) min(l, 0.5) c h);
        --accent-contrast: oklch(from var(--accent) clamp(0, (0.56 - l) * 1000, 1) 0 0);
    }
}

/* Dark ink on dark paper, chosen by the owner or by the visitor */
[data-theme="dark"] {
    --paper: #0F0F10;
    --ink: #E9E8E4;
    --ink-soft: #9B9A96;
    --ink-soft: color-mix(in srgb, var(--ink) 64%, var(--paper));
    --ink-faint: #3C3C3D;
    --ink-faint: color-mix(in srgb, var(--ink) 22%, var(--paper));
    --ink-ghost: #78777A;
    --ink-ghost: color-mix(in srgb, var(--ink) 46%, var(--paper));
    --hairline: rgba(233, 232, 228, 0.12);
    --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
    --thread-contrast: #0F0F10;
}

/* Lighten the thread for contrast against dark paper */
@supports (color: color-mix(in srgb, red 50%, white)) {
    [data-theme="dark"] {
        --thread: color-mix(in srgb, var(--accent) 62%, #FFFFFF);
    }
}

/* The same cap applied the other way round: never let the thread fall
   below OKLCH lightness 0.72 on dark paper (a deep navy accent, say) */
@supports (color: oklch(from red l c h)) {
    [data-theme="dark"] {
        --thread: oklch(from color-mix(in srgb, var(--accent) 62%, #FFFFFF) max(l, 0.72) c h);
    }
}

/* System scheme without JavaScript: follow the device */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --paper: #0F0F10;
        --ink: #E9E8E4;
        --ink-soft: #9B9A96;
        --ink-soft: color-mix(in srgb, var(--ink) 64%, var(--paper));
        --ink-faint: #3C3C3D;
        --ink-faint: color-mix(in srgb, var(--ink) 22%, var(--paper));
        --ink-ghost: #78777A;
        --ink-ghost: color-mix(in srgb, var(--ink) 46%, var(--paper));
        --hairline: rgba(233, 232, 228, 0.12);
        --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
        --thread-contrast: #0F0F10;
    }

    @supports (color: color-mix(in srgb, red 50%, white)) {
        :root:not([data-theme]) {
            --thread: color-mix(in srgb, var(--accent) 62%, #FFFFFF);
        }
    }

    @supports (color: oklch(from red l c h)) {
        :root:not([data-theme]) {
            --thread: oklch(from color-mix(in srgb, var(--accent) 62%, #FFFFFF) max(l, 0.72) c h);
        }
    }
}


/* 2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--gh-font-body, var(--voice-body));
    font-size: var(--text-body);
    line-height: 1.7;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The alternative voice: Instrument Sans takes over body and display */
body.voice-sans {
    --voice-display: var(--font-sans);
    --voice-body: var(--font-sans);
}

/* Author display rules (.icon-button etc.) would otherwise beat the browser's
   own [hidden] rule and show buttons that are meant to wait for JavaScript */
[hidden] {
    display: none !important;
}

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

iframe {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--hairline);
}

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

@supports (color: color-mix(in srgb, red 50%, white)) {
    ::selection {
        background-color: color-mix(in srgb, var(--thread) 22%, transparent);
    }
}

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


/* 3. Utilities
   -------------------------------------------------------------------------- */

/* Visually hidden, still read by assistive technology */
.u-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 100;
    padding: 0.5rem 0.875rem;
    background-color: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-m)));
}

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

.svg-sprite {
    position: absolute;
}

/* Small-caps utility label used for section headings like "Featured" */
.section-label,
.footer-label {
    margin: 0 0 var(--space-s);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}


/* 4. Base typography and links
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gh-font-heading, var(--voice-display));
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ink);
}

p {
    text-wrap: pretty;
}

/* A single very long word (or URL) must never push the page wider than the screen */
h1, h2, h3, h4, h5, h6,
.ledger-title,
.card-title,
.spotlight-title,
.post-nav-title {
    overflow-wrap: anywhere;
}

.prose,
.post-standfirst,
.ledger-excerpt,
.journal-excerpt,
.card-excerpt,
.spotlight-excerpt,
.archive-description,
.site-brand-title {
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration-color: var(--hairline);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-color: var(--thread);
}

/* The signature link: no underline at rest; on hover a 1px accent line
   draws in from the left. Applied to nav, ledger titles and footer links. */
.u-draw,
.nav a,
.footer-nav a,
.footer-social a,
.site-subscribe,
.site-signin,
.site-nav-member a,
.share-link,
.ledger-title-text,
.recommendation-title,
.error-home {
    text-decoration: none;
    background-image: linear-gradient(var(--thread), var(--thread));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 0.05em);
    background-size: 0 1px;
}

a:hover .ledger-title-text,
a:hover .recommendation-title,
.u-draw:hover,
.nav a:hover,
.footer-nav a:hover,
.footer-social a:hover,
.site-subscribe:hover,
.site-signin:hover,
.site-nav-member a:hover,
.error-home:hover {
    background-size: 100% 1px;
}

/* Meta text — the permanent utility voice */
.post-meta,
.ledger-date,
.archive-count,
.archive-meta,
.footer-meta,
.pagination {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}


/* 5. Page frame
   -------------------------------------------------------------------------- */

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

.site-main {
    flex-grow: 1;
    padding-bottom: var(--space-xl);
}

/* Header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    max-width: var(--frame-width);
    margin: 0 auto;
    width: 100%;
    padding: var(--space-m) var(--gutter);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.site-brand-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.site-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
}

.nav a {
    color: var(--ink-soft);
}

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

.nav a[aria-current="page"] {
    color: var(--ink);
    background-size: 100% 1px;
}

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

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
}

.icon-button:hover {
    color: var(--thread);
}

/* The toggle shows the scheme you would switch to */
.scheme-toggle .scheme-toggle-sun { display: none; }
.scheme-toggle .scheme-toggle-moon { display: block; }
[data-theme="dark"] .scheme-toggle .scheme-toggle-sun { display: block; }
[data-theme="dark"] .scheme-toggle .scheme-toggle-moon { display: none; }

.site-signin,
.site-nav-member a {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    color: var(--ink-soft);
}

.site-signin:hover,
.site-nav-member a:hover {
    color: var(--ink);
}

/* The member links join the folded menu on phones only */
.site-nav-member {
    display: none;
    margin: 0;
}

/* Sticky header: the paper ground runs edge to edge behind the frame */
.has-sticky-header .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--paper);
    box-shadow: 0 0 0 100vmax var(--paper);
    clip-path: inset(0 -100vmax);
}

/* The menu button is a small-screen affair; see the media query below */
.menu-toggle {
    display: none;
}

.menu-toggle .menu-toggle-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle-close { display: block; }

/* Small screens: brand and actions share one line, and the primary menu
   folds behind the menu button (only once main.js has added .has-menu —
   without JavaScript the menu just stays visible and wraps). */
@media (max-width: 48rem) {
    .site-header {
        padding-block: var(--space-s);
    }

    .site-header-right {
        display: contents;
    }

    .site-actions {
        order: 2;
        gap: 0.25rem;
    }

    .site-subscribe {
        margin-right: 0.5rem;
    }

    .menu-toggle:not([hidden]) {
        display: inline-flex;
    }

    .site-signin {
        display: none;
    }

    .site-header.is-open .site-nav-member {
        display: block;
        padding: 0.625rem 0 0.5rem;
    }

    .site-header.is-open .site-nav-member a {
        font-size: var(--text-small);
        color: var(--ink);
    }

    .site-nav {
        order: 3;
        flex-basis: 100%;
    }

    .site-header.has-menu:not(.is-open) .site-nav {
        display: none;
    }

    .site-header.is-open .nav {
        flex-direction: column;
        gap: 0;
        padding: 0.25rem 0 0.5rem;
        border-top: 1px solid var(--hairline);
    }

    .site-header.is-open .nav a {
        display: inline-block;
        padding: 0.625rem 0;
        font-size: var(--text-small);
    }

    .site-header.is-open .nav li {
        border-bottom: 1px solid var(--hairline);
    }

    .site-header.is-open .nav li:last-child {
        border-bottom: 0;
    }
}

.site-subscribe {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.015em;
    color: var(--thread);
}

/* Footer */

.site-footer {
    max-width: var(--frame-width);
    margin: 0 auto;
    width: 100%;
    padding: var(--space-l) var(--gutter) var(--space-m);
    border-top: 1px solid var(--hairline);
}

.footer-elsewhere {
    margin-bottom: var(--space-l);
}

.footer-signup {
    margin-bottom: var(--space-l);
}

.footer-signup .subscribe-cta {
    padding-top: 0;
    border-top: 0;
}

.footer-signup .subscribe-cta-heading {
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-s) var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.recommendation a {
    display: block;
    text-decoration: none;
}

.recommendation-title {
    display: inline;
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink);
}

.recommendation-url {
    display: block;
    margin-top: 0.125rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.recommendation-description {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-soft);
}

.footer-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
}

.footer-nav-row:not(:empty) {
    margin-bottom: var(--space-m);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
}

.footer-social:empty {
    display: none;
}

.footer-social a {
    color: var(--ink-soft);
}

.footer-social a:hover {
    color: var(--ink);
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    color: var(--ink-soft);
}

.footer-meta p {
    margin: 0;
}

.footer-meta a {
    text-decoration: none;
    color: var(--ink-soft);
}

.footer-meta a:hover {
    color: var(--ink);
}


/* 6. Masthead greeting
   --------------------------------------------------------------------------
   The site description set large and conversationally — a person saying
   hello — with the publication icon inline. */

.masthead {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-l) var(--gutter) var(--space-xl);
}

.masthead-greeting {
    margin: 0;
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: 420;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--ink);
}

.masthead-avatar {
    width: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
    height: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
    margin-right: 0.5rem;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -0.55em;
}

.masthead-compact {
    padding-block: var(--space-m) var(--space-l);
}

.masthead-compact .masthead-greeting {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: 450;
}

.masthead-compact .masthead-avatar {
    width: 1.75rem;
    height: 1.75rem;
    vertical-align: -0.45em;
}


/* 7. The ledger index
   --------------------------------------------------------------------------
   Not a card grid: a writing index. Each entry is a single row — title in
   the serif, date right-aligned in tabular sans. Years hang as large, light
   numerals in the left margin on wide screens and become quiet sticky
   labels on small ones. Featured posts carry a small accent dot. */

.post-index,
.featured-strip {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.featured-strip {
    margin-bottom: var(--space-l);
}

.ledger {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ledger-row {
    border-bottom: 1px solid var(--hairline);
}

.ledger-link {
    display: flex;
    align-items: baseline;
    gap: var(--space-m);
    padding: 1.125rem 0 1.0625rem;
    text-decoration: none;
    color: var(--ink);
}

.ledger-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: var(--text-ledger);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ledger-date {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The accent dot marking featured posts */
.ledger-dot {
    display: inline-block;
    width: 0.4375em;
    height: 0.4375em;
    margin-right: 0.625rem;
    border-radius: 50%;
    background-color: var(--thread);
    vertical-align: 0.18em;
}

.ledger-excerpt {
    max-width: var(--measure);
    margin: -0.375rem 0 1.125rem;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ledger-empty {
    padding: var(--space-l) 0;
    font-style: italic;
    color: var(--ink-soft);
}

/* Year markers. Small screens: quiet sticky labels above their group. */
.ledger-year {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 1.375rem 0 0.5rem;
    background-color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* Below the wide layout the year labels stick; keep them under a sticky header */
@media (max-width: 67.99rem) {
    .has-sticky-header .ledger-year {
        top: 3.5rem;
    }
}

/* Wide screens: the year hangs in the left margin as a large, light
   numeral — the ledger's signature. Decorative (aria-hidden); the year
   also lives in each row's datetime. */
@media (min-width: 68rem) {
    .ledger-year {
        position: relative;
        top: auto;
        z-index: auto;
        height: 0;
        padding: 0;
        background: none;
        overflow: visible;
    }

    .ledger-year-numeral {
        position: absolute;
        top: 0.875rem;
        right: calc(100% + 2.5rem);
        font-family: var(--gh-font-heading, var(--voice-display));
        font-size: 3.25rem;
        font-weight: 200;
        line-height: 1;
        letter-spacing: 0.01em;
        color: var(--ink-ghost);
    }
}

/* When grouping is on, the year leaves the row and hangs in the margin —
   but only once JavaScript has inserted the remaining markers. Hidden
   accessibly so the full date is still announced. */
.ledger.is-grouped .ledger-date-year {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The featured strip: the same anatomy, set one step larger */
.ledger-featured .ledger-title {
    font-size: calc(var(--text-ledger) * 1.14);
}

/* Read next: one step smaller, no bottom rule on the last row */
.ledger-related .ledger-title {
    font-size: 1.125rem;
}

.ledger-related .ledger-row:last-child {
    border-bottom: 0;
}


/* 8. Pagination
   -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    max-width: var(--page-width);
    margin: var(--space-l) auto 0;
    padding: 0 var(--gutter);
}

.pagination-newer,
.pagination-older {
    flex: 1 1 0;
}

.pagination-older {
    text-align: right;
}

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

.pagination-link:hover {
    color: var(--thread);
}

.pagination-status {
    color: var(--ink-soft);
}


/* 9. Archive headers
   -------------------------------------------------------------------------- */

.archive-header {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-l) var(--gutter) var(--space-l);
}

.archive-title {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.archive-description {
    max-width: var(--measure);
    margin: var(--space-s) 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.archive-count {
    margin: var(--space-s) 0 0;
}

.archive-avatar {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-s);
    border-radius: 50%;
    object-fit: cover;
}

.archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.375rem;
    margin: var(--space-s) 0 0;
}

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

.archive-meta-link {
    text-decoration: none;
    color: var(--ink-soft);
}

.archive-meta-link:hover {
    color: var(--thread);
}


/* 10. Post and page
   -------------------------------------------------------------------------- */

.post-header {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-l) var(--gutter) 0;
}

.post-meta {
    margin: 0 0 var(--space-s);
}

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

.post-meta a:hover {
    color: var(--thread);
}

.post-title {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.post-standfirst {
    max-width: var(--measure);
    margin: var(--space-m) 0 0;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-soft);
}

.post-feature {
    max-width: calc(var(--wide-width) + 2 * var(--gutter));
    margin: var(--space-l) auto 0;
    padding: 0 var(--gutter);
}

.post-feature-image {
    display: block;
    width: 100%;
}

.post-feature-caption,
.prose figcaption {
    margin-top: 0.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    line-height: 1.5;
    text-align: center;
    color: var(--ink-soft);
}

.post-feature-caption a,
.prose figcaption a {
    color: inherit;
}

.post-content {
    margin-top: var(--space-l);
}

/* The custom-narrow template has no title chrome; give the prose room */
.narrow-page .post-content {
    margin-top: var(--space-xl);
}


/* 11. Prose
   --------------------------------------------------------------------------
   The content grid. Everything sits in a 42rem measure; cards marked wide
   break out to 60rem and full-bleed cards span the viewport. */

.prose {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, 9rem)
        [main-start] min(var(--measure), calc(100% - 2 * var(--gutter)))
        [main-end] minmax(0, 9rem)
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
}

/* Grid items don't collapse margins, so all rhythm flows one way: down
   from the element above, via margin-top only. */
.prose > * {
    grid-column: main;
    margin-top: 0;
    margin-bottom: 0;
}

.prose > * + * {
    margin-top: var(--space-s);
}

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

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

/* Generous air on both sides of anything larger than a paragraph */
.prose > * + figure,
.prose > * + .kg-card,
.prose > * + pre,
.prose > * + table,
.prose > * + .table-scroll,
.prose > * + blockquote,
.prose > * + hr,
.prose > figure + *,
.prose > .kg-card + *,
.prose > pre + *,
.prose > table + *,
.prose > .table-scroll + *,
.prose > blockquote + *,
.prose > hr + * {
    margin-top: var(--space-m);
}

/* Headings: air above, tight to what follows */
.prose > * + h2,
.prose > * + h3,
.prose > * + h4 {
    margin-top: var(--space-l);
}

.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
    margin-top: var(--space-s);
}

.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.625rem; font-weight: 550; letter-spacing: -0.015em; }
.prose h3 { font-size: 1.3125rem; font-weight: 550; }
.prose h4 { font-size: 1.125rem; font-weight: 600; }
.prose h5,
.prose h6 {
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Prose links are honestly underlined; hover recolours the line */
.prose a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-faint);
    text-underline-offset: 0.2em;
}

.prose a:hover {
    text-decoration-color: var(--thread);
    color: var(--thread);
}

/* Lists with hanging markers, so text edges stay flush */
.prose ul,
.prose ol {
    padding-left: 1.375rem;
}

.prose li {
    padding-left: 0.25rem;
}

.prose li + li {
    margin-top: 0.375rem;
}

.prose li::marker {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
    margin-top: 0.375rem;
}

/* Blockquotes: a hairline, an italic voice, a real opening quote */
.prose blockquote {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--hairline);
    font-style: italic;
    color: var(--ink);
}

.prose blockquote:not(.kg-blockquote-alt)::before {
    content: "\201C";
    position: absolute;
    left: 0.375rem;
    top: -0.05em;
    font-size: 1.5em;
    line-height: 1;
    color: var(--ink-faint);
    font-style: normal;
}

/* The alternate blockquote: larger, centred, no frame */
.prose blockquote.kg-blockquote-alt {
    border-left: 0;
    padding: 0;
    text-align: center;
    font-size: 1.4em;
    line-height: 1.45;
    font-weight: 450;
    color: var(--ink);
}

/* Code: the utility mono. Blocks get a hairline frame; inline code stays
   quiet with the faintest of grounds so paragraphs aren't full of boxes. */
.prose code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1em 0.375em;
    border-radius: var(--radius-control);
    background-color: rgba(21, 21, 21, 0.05);
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
}

.prose pre {
    padding: 1.25rem;
    border: 1px solid var(--hairline);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.65;
}

.prose pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
}

/* Wide tables scroll sideways inside the column rather than widening the page.
   post.js wraps each one in .table-scroll (keyboard-focusable); until then the
   table itself scrolls. */
.prose > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.prose > .table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.table-scroll > table {
    display: table;
    min-width: 100%;
}

/* Tables: hairline rules only, set in the utility sans */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.prose th {
    text-align: left;
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.prose th,
.prose td {
    padding: 0.625rem 1rem 0.625rem 0;
    border-bottom: 1px solid var(--hairline);
}

/* Dividers: a short centred hairline */
.prose hr {
    width: 5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Small print and footnotes */
.prose small,
.prose .footnotes {
    font-size: var(--text-meta);
    font-family: var(--font-sans);
    color: var(--ink-soft);
}

.prose sup a {
    text-decoration: none;
    color: var(--thread);
}

/* Images and figures inside content (including bare Markdown images) */
.prose img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.prose figure {
    margin-left: 0;
    margin-right: 0;
}


/* 12. Editor cards
   --------------------------------------------------------------------------
   card_assets is on, so Ghost ships base card CSS/JS; these rules seat every
   card in Blogga's type system: hairline frames, 0/2px radii, no shadows. */

/* Galleries (classes required by theme validation) */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-gallery-row:not(:first-of-type) {
    margin-top: 0.5rem;
}

.kg-gallery-image:not(:first-of-type) {
    margin-left: 0.5rem;
}

/* Bookmarks: a hairline object, thumbnail to the right */
.kg-bookmark-card {
    width: 100%;
}

/* Ghost's card CSS sets a white ground, #222 text, a 6px radius and 70% opacity on
   the description and metadata using `.kg-bookmark-card a.kg-bookmark-container`,
   and loads after this file, so match its specificity: the card must follow the
   page's paper and ink (one extra class beats it, as it loads later) (dark mode!), and the secondary text must not be faded twice. */
.kg-bookmark-container,
.kg-card.kg-bookmark-card a.kg-bookmark-container,
.kg-card.kg-bookmark-card a.kg-bookmark-container:hover {
    display: flex;
    border: 1px solid var(--hairline);
    border-radius: 0;
    background: var(--paper);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
}

.kg-bookmark-card .kg-bookmark-description,
.kg-bookmark-card .kg-bookmark-metadata > *:not(img) {
    opacity: 1;
}

.kg-bookmark-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.125rem 1.25rem;
    min-width: 0;
}

.kg-bookmark-title {
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: 1.0625rem;
    font-weight: 550;
    line-height: 1.35;
}

.kg-bookmark-description {
    margin-top: 0.375rem;
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.kg-bookmark-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.kg-bookmark-thumbnail {
    position: relative;
    flex-shrink: 0;
    min-width: 33%;
    max-height: 100%;
}

.kg-bookmark-thumbnail img,
.kg-bookmark-card .kg-bookmark-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

@media (max-width: 40rem) {
    .kg-bookmark-container {
        flex-direction: column;
    }

    .kg-bookmark-thumbnail {
        order: -1;
        min-width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* Embeds: keep iframes fluid */
.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

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

.fluid-width-video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;
}

.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Buttons (button card, and shared button look) */
.kg-btn,
.kg-card.kg-button-card a.kg-btn,
.content-cta-button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-align: center;
}

/* Ghost's card CSS targets `.kg-button-card a.kg-btn-accent` and loads after this file, so beat its
   specificity or the owner's accent never reaches (or contrasts with) the text */
.kg-btn-accent,
.kg-card.kg-button-card a.kg-btn-accent,
.content-cta-button {
    background-color: var(--accent);
    color: var(--accent-contrast);
}

.kg-btn-accent:hover,
.kg-card.kg-button-card a.kg-btn-accent:hover,
.content-cta-button:hover {
    opacity: 0.92;
}

/* Callouts: quiet tints, never loud. The accent variant uses the thread. */
.kg-callout-card {
    border-radius: var(--radius-control);
}

.kg-callout-card.kg-callout-card-accent {
    background-color: var(--accent-soft);
    color: var(--ink);
}

.kg-card.kg-callout-card.kg-callout-card-accent a {
    color: inherit;
}

[data-theme="dark"] .kg-callout-card.kg-callout-card-grey {
    background-color: rgba(233, 232, 228, 0.08);
    color: var(--ink);
}

[data-theme="dark"] .kg-callout-card.kg-callout-card-white {
    background-color: transparent;
    border: 1px solid var(--hairline);
    color: var(--ink);
}

/* Ghost's coloured callout grounds are translucent tints (about 12% alpha), so
   they take their lightness from the page: the text must follow the page ink
   in both schemes, never a fixed dark colour. */
.kg-callout-card {
    color: var(--ink);
}

/* The same adjustments for no-JS visitors following a dark system scheme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .kg-callout-card.kg-callout-card-grey {
        background-color: rgba(233, 232, 228, 0.08);
        color: var(--ink);
    }

    :root:not([data-theme]) .kg-callout-card.kg-callout-card-white {
        background-color: transparent;
        border: 1px solid var(--hairline);
        color: var(--ink);
    }

    :root:not([data-theme]) .subscribe-error {
        color: #F2B8B5;
    }
}

/* Toggle cards: hairline rules instead of a filled box */
.kg-toggle-card {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
}

.kg-toggle-heading-text {
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: 1.125rem;
    font-weight: 550;
}

.kg-toggle-content {
    font-size: var(--text-small);
    line-height: 1.65;
}

.kg-toggle-card-icon {
    color: var(--ink-soft);
}

/* Header cards: let the card set its colours, keep the theme's faces */
.kg-header-card h2.kg-header-card-header {
    font-family: var(--gh-font-heading, var(--voice-display));
    letter-spacing: -0.015em;
}

.kg-header-card h3.kg-header-card-subheader {
    font-family: var(--font-sans);
}

/* Signup cards: theme faces and control shapes */
.kg-signup-card h2.kg-signup-card-heading {
    font-family: var(--gh-font-heading, var(--voice-display));
    letter-spacing: -0.015em;
}

.kg-signup-card h3.kg-signup-card-subheading,
.kg-signup-card .kg-signup-card-disclaimer {
    font-family: var(--font-sans);
}

.kg-signup-card .kg-signup-card-input {
    border-radius: var(--radius-control);
}

.kg-signup-card .kg-signup-card-button {
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-weight: 600;
}

/* Product cards: hairline object */
.kg-product-card .kg-product-card-container {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    padding: 1.25rem;
}

.kg-product-card .kg-product-card-title {
    font-family: var(--gh-font-heading, var(--voice-display));
}

.kg-product-card .kg-product-card-description {
    font-size: var(--text-small);
    color: var(--ink-soft);
}

.kg-card.kg-product-card .kg-product-card-description p,
.kg-card.kg-product-card .kg-product-card-description ol,
.kg-card.kg-product-card .kg-product-card-description ul {
    opacity: 1;
    color: var(--ink-soft);
}

.kg-product-card a.kg-product-card-button {
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-weight: 600;
}

/* File cards: hairline object, mono metadata */
/* Ghost's file, audio and product cards ship a white ground, #222 text and faded
   (opacity) secondary text, and load after this file. Each rule below carries one
   extra class so it wins, and secondary text is coloured rather than faded: the
   cards follow the page's paper and ink in both schemes and stay AA. */
.kg-card.kg-file-card a.kg-file-card-container,
.kg-card.kg-file-card a.kg-file-card-container:hover {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    color: var(--ink);
}

.kg-card.kg-file-card .kg-file-card-caption,
.kg-card.kg-file-card .kg-file-card-filesize {
    opacity: 1;
    color: var(--ink-soft);
}

.kg-file-card .kg-file-card-title {
    font-family: var(--gh-font-heading, var(--voice-display));
    font-weight: 550;
}

.kg-file-card .kg-file-card-metadata {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* Audio cards: hairline frame */
.kg-card.kg-audio-card {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    box-shadow: none;
    color: var(--ink);
}

.kg-card.kg-audio-card .kg-audio-time {
    color: var(--ink-soft);
}

/* Ghost leaves the player's buttons on the browser's default (black) text colour */
.kg-card.kg-audio-card .kg-audio-player-container button {
    color: var(--ink);
}

.kg-audio-card .kg-audio-title {
    font-family: var(--gh-font-heading, var(--voice-display));
}

/* Video cards: square corners, no chrome */
.kg-video-card {
    border-radius: 0;
    box-shadow: none;
}

/* Paid-content divider shown around public previews */
.kg-card-hascaption + figcaption {
    font-family: var(--font-sans);
}


/* 13. After the article
   -------------------------------------------------------------------------- */

.post-footer {
    max-width: var(--page-width);
    margin: var(--space-xl) auto 0;
    padding: 0 var(--gutter);
}

.post-footer > * + * {
    margin-top: var(--space-l);
}

.post-tags {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    color: var(--ink-soft);
}

.post-tags-label {
    margin-right: 0.375rem;
}

.post-tag {
    margin-right: 0.875rem;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-faint);
    text-underline-offset: 0.2em;
}

.post-tag:hover {
    color: var(--thread);
}

.post-author {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    padding-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}

.post-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.post-author-text {
    min-width: 0;
}

.post-author-name {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
}

.post-author-name a {
    text-decoration: none;
    color: var(--ink);
}

.post-author-name a:hover {
    color: var(--thread);
}

.post-author-label {
    font-weight: 400;
    color: var(--ink-soft);
}

.post-author-bio {
    margin: 0.25rem 0 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--ink-soft);
}

.read-next {
    padding-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}

/* Subscribe form */

.subscribe-cta {
    padding-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}

.subscribe-cta-heading {
    margin: 0 0 var(--space-s);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.subscribe-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    max-width: 26rem;
}

.subscribe-input {
    flex: 1 1 12rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
}

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

.subscribe-button {
    padding: 0.625rem 1.25rem;
    border: 0;
    border-radius: var(--radius-control);
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.subscribe-button:hover {
    background-color: var(--thread);
    color: var(--thread-contrast);
}

/* Form states — classes are swapped in by Ghost's members script */
.subscribe-button-loading { display: none; }
.subscribe-form.loading .subscribe-button-default { display: none; }
.subscribe-form.loading .subscribe-button-loading { display: inline; }

.subscribe-success { display: none; }
.subscribe-form.success .subscribe-fields { display: none; }
.subscribe-form.success .subscribe-success {
    display: block;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    color: var(--ink);
}

.subscribe-error {
    display: none;
    margin: 0.5rem 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    color: #B3261E;
}

[data-theme="dark"] .subscribe-error {
    color: #F2B8B5;
}

.subscribe-form.error .subscribe-error {
    display: block;
}

/* Comments */

.post-comments {
    padding-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}


/* 14. Members: paywall CTA (partials/content-cta.hbs)
   -------------------------------------------------------------------------- */

.content-cta {
    grid-column: main;
    margin-top: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    text-align: center;
}

.content-cta-heading {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.content-cta-text {
    margin: 0.625rem 0 var(--space-s);
    font-size: var(--text-small);
    color: var(--ink-soft);
}

.content-cta-signin {
    margin: var(--space-s) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    color: var(--ink-soft);
}

.content-cta-signin a {
    color: var(--thread);
}


/* 15. Error and private pages
   -------------------------------------------------------------------------- */

.error-page,
.private-page {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--gutter);
    text-align: center;
}

.error-code {
    margin: 0;
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: clamp(4rem, 2rem + 8vw, 7rem);
    font-weight: 200;
    line-height: 1;
    color: var(--ink-ghost);
    font-variant-numeric: tabular-nums;
}

.error-title,
.private-title {
    margin: var(--space-s) 0 0;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.015em;
}

.error-text,
.private-text {
    max-width: 32rem;
    margin: var(--space-s) auto 0;
    color: var(--ink-soft);
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    margin-top: var(--space-m);
}

.error-home {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--ink);
}

/* error.hbs stands alone without body_class or the header; keep it composed */
.error-template .site-main {
    padding: 0;
}

.private-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    max-width: 26rem;
    margin: var(--space-m) auto 0;
}

.private-label {
    flex: 1 1 12rem;
    display: block;
}

.private-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
}


/* Meta lines (post, journal, card, spotlight): items separated by a middle dot
   drawn in CSS, so an item that is empty (reading time on a gated post, say)
   leaves no stray separator behind. */
.meta-line > * + *::before {
    content: "\00B7";
    margin: 0 0.5rem;
}

.meta-line > .meta-read:empty,
.meta-line > .meta-read:empty::before {
    display: none;
}

.meta-line > .meta-dot + *::before {
    content: none;
}

/* 16. Feed layouts: Journal and Grid
   --------------------------------------------------------------------------
   The ledger is the default voice. Journal adds a thumbnail beside each
   entry; Grid sets posts as cards in the wider frame. Both borrow the
   ledger's type, hairlines and accent dot. */

/* Members-only posts carry a small padlock in every layout */
.ledger-lock {
    margin-left: 0.5rem;
    color: var(--ink-soft);
    vertical-align: -0.02em;
}

/* Journal */

.ledger-row-journal .ledger-link {
    align-items: flex-start;
    gap: var(--space-m);
    padding: 1.5rem 0 1.4rem;
}

.journal-text {
    flex: 1 1 auto;
    min-width: 0;
}

.journal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.journal-meta .meta-dot {
    align-self: center;
    margin-right: 0.5rem;
}

.journal-meta .ledger-dot {
    margin-right: 0;
}

.journal-tag {
    color: var(--ink);
    font-weight: 500;
}

.journal-text .ledger-title {
    display: block;
    margin: 0.375rem 0 0;
}

.journal-excerpt {
    margin: 0.5rem 0 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.journal-thumb {
    order: 2;
    flex: 0 0 auto;
    width: 9rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--accent-soft);
}

@media (max-width: 40rem) {
    .journal-thumb {
        width: 6.5rem;
    }
}

/* Grid */

.post-index-grid {
    max-width: var(--frame-width);
}

.ledger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-l) var(--space-m);
}

.card {
    min-width: 0;
}

.card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--ink);
}

.card-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--accent-soft);
}

.card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No feature image: the date, set large — it belongs to the ledger family */
.card-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 1.25rem;
    color: var(--thread);
}

.card-placeholder-day {
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: 4.5rem;
    font-weight: 200;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.card-placeholder-month {
    margin-top: 0.375rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.card-body {
    flex: 1 1 auto;
    padding-top: var(--space-s);
}

.card-meta,
.card-foot {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    color: var(--ink-soft);
}

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

.card-tag {
    color: var(--ink);
    font-weight: 500;
}

.card-title {
    margin: 0.375rem 0 0.5rem;
    font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-excerpt {
    margin: 0 0 0.75rem;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.card-foot {
    font-variant-numeric: tabular-nums;
}

/* Featured Spotlight: the lead post, image first. The block is as wide as a
   feature image; its text and the rows beneath sit in the reading column. */

.featured-spotlight {
    max-width: calc(var(--wide-width) + 2 * var(--gutter));
}

.featured-spotlight > .section-label,
.featured-spotlight > .ledger,
.spotlight-text {
    max-width: calc(var(--page-width) - 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
}

.spotlight {
    margin-bottom: var(--space-l);
}

.spotlight-media {
    display: block;
}

.spotlight-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--accent-soft);
}

.spotlight-text {
    margin-top: var(--space-m);
}

.spotlight-text .spotlight-meta,
.spotlight-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 var(--space-xs);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    color: var(--ink-soft);
}

.spotlight-title {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.spotlight-title a {
    color: var(--ink);
    text-decoration: none;
}

.spotlight-excerpt {
    max-width: var(--measure);
    margin: var(--space-s) 0 0;
    font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
    line-height: 1.5;
    color: var(--ink-soft);
}

.spotlight-text:only-child {
    margin-top: 0;
}

/* Load more pagination */

.pagination-load-more {
    justify-content: center;
}

.load-more {
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.load-more:hover:not(:disabled) {
    border-color: var(--thread);
    color: var(--thread);
}

.load-more:disabled {
    cursor: progress;
    color: var(--ink-soft);
}


/* 17. Archives, directories and page extras
   -------------------------------------------------------------------------- */

/* Tag and author covers */
.archive-cover {
    max-width: calc(var(--wide-width) + 2 * var(--gutter));
    margin: var(--space-m) auto 0;
    padding: 0 var(--gutter);
}

.archive-cover-image {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.archive-cover + .archive-header {
    padding-top: var(--space-m);
}

.archive-meta-text {
    color: var(--ink-soft);
}

/* /archive/, /topics/ and /team/ pages */
.archive-index,
.directory {
    margin-top: var(--space-l);
}

.directory-row .ledger-link {
    align-items: center;
}

.directory-row .ledger-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.directory-description {
    margin-top: 0.25rem;
    font-family: var(--gh-font-body, var(--voice-body));
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--ink-soft);
}

.directory-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* The lost-visitor list on the 404 page */
.error-latest {
    margin-top: var(--space-l);
}


/* 18. Reading features (post.js)
   -------------------------------------------------------------------------- */

.post-meta-lock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Reading progress */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 3px;
    background-color: var(--thread);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* Table of contents */
.toc {
    max-width: var(--page-width);
    margin: var(--space-m) auto 0;
    padding: 0 var(--gutter);
}

.toc-details {
    padding: 0.875rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
}

.toc-summary::-webkit-details-marker {
    display: none;
}

.toc-summary::after {
    content: "+";
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0;
}

.toc-details[open] .toc-summary::after {
    content: "\2212";
}

.toc-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.toc-item a {
    display: block;
    padding: 0.3125rem 0;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    line-height: 1.4;
    color: var(--ink-soft);
    text-decoration: none;
}

.toc-item a:hover,
.toc-item.is-current a {
    color: var(--ink);
}

.toc-item.is-current a {
    font-weight: 600;
}

.toc-item-sub {
    padding-left: 1.125rem;
}

/* Heading anchors: a quiet "#" that appears on hover or focus */
.heading-anchor {
    margin-left: 0.5em;
    font-family: var(--font-sans);
    font-size: 0.75em;
    font-weight: 400;
    text-decoration: none;
    color: var(--ink-soft);
    opacity: 0;
}

.prose a.heading-anchor:hover {
    color: var(--thread);
}

.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.heading-anchor:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .heading-anchor {
        display: none;
    }
}

/* Share */
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 1.25rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
}

.share-label {
    color: var(--ink-soft);
}

.share-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.share-link:hover {
    color: var(--thread);
}

.share-status {
    color: var(--thread);
}

/* Previous and next */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--hairline);
}

.post-nav:not(:has(.post-nav-link)) {
    display: none;
}

.post-nav-link {
    display: block;
    text-decoration: none;
    color: var(--ink);
}

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

.post-nav-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    letter-spacing: 0.015em;
    color: var(--ink-soft);
}

.post-nav-title {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--gh-font-heading, var(--voice-display));
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.3;
}

.post-nav-link:hover .post-nav-title {
    color: var(--thread);
}

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

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

/* Code: a copy button on every block, and a restrained Prism palette — the
   accent for keywords, a mix of accent and ink for literals, nothing loud. */
.prose > * + .code-block,
.prose > .code-block + * {
    margin-top: var(--space-m);
}

.code-block {
    position: relative;
}

.prose .code-block pre {
    margin: 0;
}

.code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background-color: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
}

.code-block:hover .code-copy,
.code-copy:focus-visible {
    opacity: 1;
}

.code-copy:hover {
    color: var(--ink);
}

@media (hover: none) {
    .code-copy {
        opacity: 1;
    }
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--ink-soft);
    font-style: italic;
}

.token.punctuation,
.token.operator {
    color: var(--ink-soft);
}

.token.keyword,
.token.atrule,
.token.selector,
.token.important,
.token.tag,
.token.boolean {
    color: var(--thread);
}

.token.string,
.token.attr-value,
.token.char,
.token.number,
.token.regex,
.token.url {
    color: color-mix(in srgb, var(--thread) 55%, var(--ink));
}

.token.function,
.token.class-name,
.token.property,
.token.attr-name,
.token.builtin,
.token.constant {
    color: var(--ink);
    font-weight: 600;
}

.token.inserted {
    color: color-mix(in srgb, var(--thread) 55%, var(--ink));
}

.token.deleted {
    color: var(--ink-soft);
    text-decoration: line-through;
}

.token.bold {
    font-weight: 700;
}

.token.italic {
    font-style: italic;
}

/* Lightbox */
.is-zoomable {
    cursor: zoom-in;
}

html.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 4.5rem;
    background-color: rgba(255, 255, 255, 0.97);
}

[data-theme="dark"] .lightbox {
    background-color: rgba(15, 15, 16, 0.97);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .lightbox {
        background-color: rgba(15, 15, 16, 0.97);
    }
}

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    max-height: calc(100dvh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-caption {
    margin-top: 0.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    text-align: center;
    color: var(--ink-soft);
}

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

.lightbox-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    font-size: 1.5rem;
    cursor: pointer;
}

.lightbox-button:hover {
    color: var(--thread);
}

.lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    margin-top: -1.375rem;
}

.lightbox-prev {
    left: 0.75rem;
}

.lightbox-next {
    right: 0.75rem;
}

.lightbox:not(.has-many) .lightbox-prev,
.lightbox:not(.has-many) .lightbox-next {
    display: none;
}

@media (max-width: 40rem) {
    .lightbox {
        padding: 3.5rem 1rem 4.5rem;
    }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 0.75rem;
        margin-top: 0;
    }

    .lightbox-prev {
        left: calc(50% - 3.5rem);
    }

    .lightbox-next {
        right: calc(50% - 3.5rem);
    }
}


/* 19. Motion
   --------------------------------------------------------------------------
   150–200ms, ease-out, and only for those who haven't asked for less.
   Two signatures: link underlines drawing in from the left, and a soft
   cross-fade when the colour scheme changes. */

@media (prefers-reduced-motion: no-preference) {
    .u-draw,
    .nav a,
    .footer-nav a,
    .footer-social a,
    .site-subscribe,
    .site-signin,
    .site-nav-member a,
    .ledger-title-text,
    .recommendation-title,
    .error-home {
        transition: background-size 180ms ease-out;
    }

    a,
    .icon-button,
    .subscribe-button,
    .kg-btn,
    .content-cta-button {
        transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, text-decoration-color 150ms ease-out, opacity 150ms ease-out;
    }

    /* Cross-fade while switching schemes; the class lives ~250ms */
    html.scheme-transition,
    html.scheme-transition body,
    html.scheme-transition .site-header,
    html.scheme-transition .site-footer,
    html.scheme-transition .site-main * {
        transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out !important;
    }
}

/* A post already ends with its own subscribe form; don't ask twice on one screen */
body:has(.post-footer .subscribe-cta) .footer-signup {
    display: none;
}


/* Print: just the writing */
@media print {
    .site-header,
    .site-footer,
    .skip-link,
    .toc,
    .share,
    .post-nav,
    .read-next,
    .subscribe-cta,
    .post-comments,
    .read-progress,
    .code-copy,
    .heading-anchor,
    .pagination,
    .content-cta {
        display: none !important;
    }

    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 11pt;
    }

    .prose a {
        color: inherit;
        text-decoration: underline;
    }

    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    .prose img,
    .prose pre,
    .prose blockquote {
        break-inside: avoid;
    }
}