/* wedgworth.dev shared base.
   Consumes tokens only. Overlays define every token in theme.css (loaded after this file)
   on :root (light) and [data-mode="dark"] (dark). The defaults below are neutral and use
   :where() so any overlay value wins. Koenig card rules are scoped to .gh-content so they
   beat Ghost's card_assets CSS, which loads later via {{ghost_head}}. */

/* ==========================================================================
   1. Tokens (neutral defaults)
   ========================================================================== */

:where(:root) {
    color-scheme: light;
    --bg: #f7f7f5;
    --fg: #1c1f23;
    --muted: #5b626b;
    --line: #dcdee1;
    --surface: #ffffff;
    --accent: #2b6a4e;
    --accent-fg: #ffffff;
    --accent2: #96561a;
    --code-bg: #17191c;
    --code-fg: #e4e6e9;
    --code-ln: #6c737c;
    --tk-keyword: #8fbcf0;
    --tk-string: #b5d68a;
    --tk-comment: #80878f;
    --tk-function: #e6c07b;
    --tk-number: #eb9a73;
    --tk-operator: #aeb5bd;
    --tk-tag: #ef8f8f;
    --tk-attr: #d4a9e8;
    --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --radius: 8px;
    /* Prose measure. Use rem, not ch: ch resolves against each element's own font, so headings,
       code and tables would each get a different width and left edge. */
    --content-width: 40rem;
    --wide-width: 1040px;
    --page-width: 1140px;

    /* Extra knobs (not required from overlays). */
    /* Fill for Koenig accent surfaces (header/signup/CTA/button/callout). Ghost writes white text
       inline on several of them, so this must give >= 4.5:1 with --accent-solid-fg (white) in
       both modes. Overlays with a light dark-mode accent set a deeper value here. */
    --accent-solid: var(--accent);
    --accent-solid-fg: #ffffff;
    --gutter: 20px;
    --toc-width: 220px;
    --toc-gap: 56px;
    /* TOC column at 960px+. Contents on the left: --toc-columns: var(--toc-width) minmax(0, 1fr);
       --toc-areas: "toc content". The post footer follows the same columns. */
    --toc-columns: minmax(0, 1fr) var(--toc-width);
    --toc-areas: "content toc";
    --scroll-offset: 96px;
    --scroll-shade: rgb(0 0 0 / 16%);
    --ok: #2c8a4b;
    --bad: #c03b3b;
    --read-progress: 0;
}

:where([data-mode="dark"]) {
    color-scheme: dark;
    --bg: #131518;
    --fg: #e3e5e8;
    --muted: #9aa1aa;
    --line: #2b2f35;
    --surface: #1b1e22;
    --accent: #7cc4a0;
    --accent-fg: #0f1311;
    --accent2: #e0a458;
    --code-bg: #0d0f11;
    --code-fg: #e3e5e8;
    --code-ln: #5f666e;
    --ok: #6fcf8f;
    --bad: #ff8a80;
    --scroll-shade: rgb(0 0 0 / 55%);
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

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

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--gh-font-body, var(--font-body));
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--gh-font-heading, var(--font-head));
    line-height: 1.2;
    text-wrap: balance;
}

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

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

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

code, kbd, samp, pre { font-family: var(--font-mono); }

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

table { border-collapse: collapse; }

[hidden] { display: none !important; }

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

::placeholder { color: var(--muted); opacity: 1; }

.site-main {
    display: block;
    flex: 1 0 auto;
    overflow-x: clip; /* full-bleed cards use 100vw; never let them scroll the page */
}
.site-main:focus { outline: none; }

.icon { flex: none; }

/* ==========================================================================
   3. Layout, a11y helpers, motion
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 1000;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--fg);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

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

@keyframes wdev-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   4. Buttons and inputs
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding: 0.55em 1.15em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.button:hover { filter: brightness(1.08); }
.button-ghost { border-color: var(--line); background: transparent; color: var(--fg); }
.button-ghost:hover { border-color: var(--fg); filter: none; }

.input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55em 0.85em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
}

/* Round icon buttons used in headers. */
.mode-toggle,
.search-toggle,
.nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.mode-toggle:hover,
.search-toggle:hover,
.nav-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.mode-toggle .icon-sun { display: none; }
[data-mode="dark"] .mode-toggle .icon-sun { display: block; }
[data-mode="dark"] .mode-toggle .icon-moon { display: none; }

.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }
.nav-open .nav-toggle .icon-menu { display: none; }

/* Navigation list rendered by {{navigation}}. */
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.nav-link { text-decoration: none; }
.nav-current > .nav-link { text-decoration: underline; text-decoration-thickness: 2px; }

/* ==========================================================================
   5. Post layout and table of contents
   ========================================================================== */

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content";
    column-gap: var(--toc-gap);
    align-items: start;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.post-content { grid-area: content; min-width: 0; }
.post-toc { display: none; grid-area: toc; }

/* TOC column at 960px+ when the post has 3+ h2 (.has-toc: set before first paint by post.hbs,
   and by main.js). Side and widths come from --toc-columns / --toc-areas (see tokens), which the
   post footer and comments share so they line up with the content column on either side. */
@media (min-width: 960px) {
    .post-layout.has-toc {
        grid-template-columns: var(--toc-columns);
        grid-template-areas: var(--toc-areas);
    }
    .post-layout.has-toc .post-toc {
        display: block;
        position: sticky;
        top: var(--scroll-offset);
        max-height: calc(100vh - var(--scroll-offset) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* A scroll box clips both axes (overflow-x can't stay visible), so the box bleeds 12px
           past its column: active markers and focus rings at the edges stay visible. */
        margin: -4px -12px;
        padding: 4px 12px;
    }
}

.post-toc { font-size: 0.875rem; line-height: 1.4; }
.toc-label {
    margin: 0 0 0.6em;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.toc-list,
.toc-sublist { margin: 0; padding: 0; list-style: none; }
.toc-list { border-left: 1px solid var(--line); }
.toc-sublist .toc-link { padding-left: 1.7em; font-size: 0.95em; }
.toc-link {
    display: block;
    margin-left: -1px;
    padding: 0.3em 0 0.3em 0.9em;
    border-left: 2px solid transparent;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.toc-link:hover { color: var(--fg); }
.toc-link.is-active { border-left-color: var(--accent); color: var(--fg); }

/* ==========================================================================
   6. Prose (.gh-content) and width breakouts
   ========================================================================== */

.gh-content {
    font-family: var(--gh-font-body, var(--font-body));
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Every block sits in the reading measure (one rem-based width, so one left edge); wide/full cards break out. */
.gh-content > * {
    max-width: var(--content-width);
    margin-block: 0;
    margin-inline: auto;
}
.gh-content > * + * { margin-top: 1.25em; }
.gh-content > :first-child { margin-top: 0; }

.gh-content > .kg-width-wide { max-width: var(--wide-width); }
.gh-content > .kg-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* With a TOC column, prose aligns left and wide/full fill the column. */
@media (min-width: 960px) {
    .post-layout.has-toc .gh-content > * { margin-inline: 0; }
    .post-layout.has-toc .gh-content > .kg-width-wide,
    .post-layout.has-toc .gh-content > .kg-width-full {
        width: auto;
        max-width: none;
        margin-inline: 0;
    }
    .post-layout.has-toc .gh-content .kg-width-full figcaption { padding-inline: 0; }
}

/* Headings */
.gh-content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: var(--scroll-offset); }
.gh-content h1 { font-size: 2em; }
.gh-content h2 { font-size: 1.55em; letter-spacing: -0.01em; }
.gh-content h3 { font-size: 1.27em; }
.gh-content h4 { font-size: 1.08em; }
.gh-content h5 { font-size: 1em; }
.gh-content h6 { font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; }
.gh-content > h1, .gh-content > h2 { margin-top: 2em; }
.gh-content > h3 { margin-top: 1.75em; }
.gh-content > :is(h4, h5, h6) { margin-top: 1.5em; }
.gh-content > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0.6em; }
.gh-content > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* Links in running text (card links have kg- classes and are styled below). */
.gh-content a:not([class*="kg-"]) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}
.gh-content a:not([class*="kg-"]):hover { text-decoration-thickness: 2px; }

/* Lists */
.gh-content :is(ul, ol) { padding-left: 1.4em; }
.gh-content li + li { margin-top: 0.4em; }
.gh-content li > :is(ul, ol, p) { margin-top: 0.4em; }
.gh-content li::marker { color: var(--muted); }
.gh-content dl:not(.trial-summary) dt { font-weight: 600; }
.gh-content dl:not(.trial-summary) dd { margin: 0.2em 0 0.8em 1.2em; }

/* Inline text */
.gh-content strong, .gh-content b { font-weight: 700; }
.gh-content mark { padding: 0 0.15em; border-radius: 2px; background: color-mix(in srgb, var(--accent2) 28%, transparent); color: inherit; }
.gh-content small { font-size: 0.85em; }
.gh-content sup, .gh-content sub { line-height: 0; }
.gh-content abbr[title] { text-decoration: underline dotted; cursor: help; }
.gh-content kbd {
    padding: 0.1em 0.4em;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface);
    font-size: 0.82em;
}
.gh-content :not(pre) > code {
    padding: 0.12em 0.38em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    font-size: 0.86em;
    overflow-wrap: break-word;
}

/* Rules */
.gh-content > hr { margin-top: 2.5em; border-top-color: var(--line); }
.gh-content > hr + * { margin-top: 2.5em; }

/* Quotes */
.gh-content blockquote:not([class]) {
    padding-left: 1.1em;
    border-left: 3px solid var(--accent);
}
.gh-content blockquote:not([class]) > * + * { margin-top: 0.8em; }
.gh-content .kg-blockquote-alt {
    padding: 0 1.5em;
    border: 0;
    color: var(--fg);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}
@media (max-width: 600px) {
    .gh-content .kg-blockquote-alt { padding: 0 0.75em; font-size: 1.15em; }
}

/* Figures and captions (image captions render as figcaption) */
.gh-content figcaption {
    margin-top: 0.75em;
    color: var(--muted);
    font-size: 0.875em;
    line-height: 1.5;
    text-align: left;
}
.gh-content figcaption :is(b, strong) { color: var(--fg); }
.gh-content .kg-width-full figcaption {
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Footnotes (Markdown card) */
.gh-content .footnotes-sep { margin-top: 3em; }
.gh-content .footnotes { color: var(--muted); font-size: 0.875em; }
.gh-content .footnotes ol { padding-left: 1.2em; }
.gh-content .footnotes li + li { margin-top: 0.3em; }
.gh-content .footnote-ref a,
.gh-content a.footnote-backref { text-decoration: none; }

/* ==========================================================================
   7. Code blocks, Prism tokens, line numbers, copy button
   ========================================================================== */

.gh-content pre {
    overflow-x: auto;
    padding: 1em 1.1em;
    border-radius: var(--radius);
    background: var(--code-bg);
    color: var(--code-fg);
    font-size: 0.84em;
    line-height: 1.7;
    tab-size: 4;
    white-space: pre;
    color-scheme: dark; /* code is always on a dark surface: keep scrollbars dark */
    scrollbar-color: color-mix(in srgb, var(--code-fg) 30%, transparent) transparent;
    -webkit-overflow-scrolling: touch;
}
.gh-content pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* main.js wraps each pre in .code-block with a .code-head bar (language + copy button). */
.code-block {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--code-bg);
    color: var(--code-fg);
}
.code-block > pre { border-radius: 0; }
.code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 2.5rem;
    padding: 0.35rem 0.5rem 0.35rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--code-fg) 12%, transparent);
    color: color-mix(in srgb, var(--code-fg) 72%, var(--code-bg));
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.2;
}
.code-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-code {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-left: auto;
    min-height: 1.9rem;
    padding: 0.25em 0.6em;
    border: 1px solid color-mix(in srgb, var(--code-fg) 20%, transparent);
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-code:hover { border-color: color-mix(in srgb, var(--code-fg) 40%, transparent); color: var(--code-fg); }
.copy-code .icon { width: 14px; height: 14px; }
.copy-code .icon-check { display: none; }
.copy-code.is-copied { color: var(--code-fg); }
.copy-code.is-copied .icon-copy { display: none; }
.copy-code.is-copied .icon-check { display: block; }

/* Prism tokens mapped to theme tokens */
code[class*="language-"],
pre[class*="language-"] { color: var(--code-fg); text-shadow: none; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--tk-comment); font-style: italic; }
.token.punctuation { color: color-mix(in srgb, var(--code-fg) 70%, var(--code-bg)); }
.token.namespace { opacity: 0.75; }
.token.keyword,
.token.atrule,
.token.rule,
.token.important,
.token.directive,
.token.delimiter,
.token.shell-symbol,
.token.section,
.token.title,
.token.coord { color: var(--tk-keyword); }
.token.string,
.token.char,
.token.attr-value,
.token.template-string,
.token.url,
.token.value { color: var(--tk-string); }
.token.function,
.token.class-name,
.token.builtin,
.token.decorator,
.token.annotation { color: var(--tk-function); }
.token.number,
.token.boolean,
.token.constant,
.token.symbol,
.token.regex,
.token.unit { color: var(--tk-number); }
.token.operator,
.token.entity,
.token.arrow { color: var(--tk-operator); }
.token.tag,
.token.selector,
.token.doctype .token.name { color: var(--tk-tag); }
.token.tag .token.punctuation { color: color-mix(in srgb, var(--tk-tag) 70%, var(--code-bg)); }
.token.attr-name,
.token.property,
.token.key,
.token.variable,
.token.parameter,
.token.assign-left { color: var(--tk-attr); }
.token.output { color: color-mix(in srgb, var(--code-fg) 70%, var(--code-bg)); }
.token.inserted { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--code-fg); }
.token.deleted { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--code-fg); }
.token.bold, .token.important { font-weight: 700; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Prism line-numbers plugin (main.js adds .line-numbers to blocks with 5+ lines) */
pre.line-numbers {
    position: relative;
    padding-left: 3.6em;
    counter-reset: linenumber;
}
pre.line-numbers > code { position: relative; white-space: inherit; }
.line-numbers .line-numbers-rows {
    position: absolute;
    top: 0;
    left: -3.6em;
    width: 2.8em;
    font-size: 100%;
    letter-spacing: -1px;
    border-right: 1px solid color-mix(in srgb, var(--code-fg) 12%, transparent);
    pointer-events: none;
    user-select: none;
}
.line-numbers-rows > span { display: block; counter-increment: linenumber; }
.line-numbers-rows > span::before {
    content: counter(linenumber);
    display: block;
    padding-right: 0.8em;
    color: var(--code-ln);
    text-align: right;
}

/* ==========================================================================
   8. Tables (main.js wraps each in .table-wrap)
   ========================================================================== */

.gh-content > table { display: block; overflow-x: auto; } /* before JS runs */
/* Scroll hint: shadows at an edge that has more table behind it. The --bg covers scroll with
   the content (local) and hide the shadows (scroll) once that edge is reached. */
.gh-content .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--bg) 40%, transparent) left / 28px 100% no-repeat local,
        linear-gradient(to left, var(--bg) 40%, transparent) right / 28px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right / 12px 100% no-repeat scroll;
}
.gh-content table {
    width: 100%;
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}
/* main.js marks long-text columns .is-long (a minimum width so they never go one word per line)
   and gives a table .is-wide when fitting it to the column would squeeze its other columns well
   below their natural width (.is-measuring is that test). A wide table keeps its natural width
   and scrolls in .table-wrap; its long-text columns wrap at a fixed, readable width. */
.gh-content :is(th, td).is-long { min-width: min(12em, 40vw); }
.gh-content table.is-wide { width: max-content; min-width: 100%; }
.gh-content table.is-wide :is(th, td).is-long { width: 18em; }
.gh-content table.is-measuring :is(th, td).is-long { width: 0; }
.gh-content caption {
    padding-bottom: 0.6em;
    caption-side: top;
    color: var(--muted);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.92em;
    text-align: left;
}
.gh-content :is(th, td) {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.gh-content th {
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
}
.gh-content thead th { border-bottom: 2px solid var(--fg); vertical-align: bottom; }
.gh-content :is(th, td).num,
.gh-content :is(th, td)[align="right"] { text-align: right; }
.gh-content td.num { font-family: var(--font-mono); font-size: 0.95em; white-space: nowrap; }
.gh-content tr.best td { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ==========================================================================
   9. Trial summary data sheet
   <dl class="trial-summary"><div><dt>Crop</dt><dd>Sweet corn</dd></div>...</dl>
   ========================================================================== */

.trial-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.trial-summary > div {
    padding: 0.65em 0.9em;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.trial-summary dt {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.trial-summary dd {
    margin: 0.15em 0 0;
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.35;
}

/* ==========================================================================
   10. Koenig cards
   ========================================================================== */

.gh-content > .kg-card + *,
.gh-content > * + .kg-card { margin-top: 2em; }
.gh-content > .kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
.gh-content > .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.gh-content > .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.gh-content > .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card { margin-top: 0.75rem; }

/* --- Image --- */
.gh-content .kg-image-card picture { display: block; }
.gh-content .kg-image-card img,
.gh-content .kg-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}
.gh-content .kg-width-wide .kg-image,
.gh-content .kg-width-full .kg-image { width: 100%; }

/* --- Gallery (Ghost's card JS sets flex ratios on .kg-gallery-image; main.js does too) --- */
.gh-content .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.gh-content .kg-gallery-container .kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}
.gh-content .kg-gallery-row .kg-gallery-image { flex: 1 1 0%; min-width: 0; margin: 0; }
.gh-content .kg-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
@media (max-width: 600px) {
    .gh-content .kg-gallery-container,
    .gh-content .kg-gallery-container .kg-gallery-row { gap: 0.4rem; }
}

/* --- Callout --- */
.gh-content .kg-callout-card {
    display: flex;
    gap: 0.8em;
    padding: 1.05em 1.3em;
    border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--fg) 6%, var(--surface));
    box-shadow: none;
    color: var(--fg);
}
.gh-content .kg-callout-card div.kg-callout-emoji {
    flex: none;
    padding: 0;
    font-size: 1.15em;
    line-height: 1.45;
}
.gh-content .kg-callout-card div.kg-callout-text {
    min-width: 0;
    font-size: 0.95em;
    line-height: 1.6;
}
.gh-content .kg-callout-card + .kg-callout-card { margin-top: 0.75em; }
.gh-content .kg-callout-card-grey { background: color-mix(in srgb, var(--fg) 7%, var(--surface)); }
.gh-content .kg-callout-card-white { border-color: var(--line); background: var(--surface); box-shadow: none; }
.gh-content .kg-callout-card-blue { --kg-tint: #2f7fd1; }
.gh-content .kg-callout-card-green { --kg-tint: #2f9a4f; }
.gh-content .kg-callout-card-yellow { --kg-tint: #d29a10; }
.gh-content .kg-callout-card-red { --kg-tint: #d14040; }
.gh-content .kg-callout-card-pink { --kg-tint: #d4489a; }
.gh-content .kg-callout-card-purple { --kg-tint: #8457e0; }
.gh-content .kg-callout-card:is(.kg-callout-card-blue, .kg-callout-card-green, .kg-callout-card-yellow, .kg-callout-card-red, .kg-callout-card-pink, .kg-callout-card-purple) {
    border-color: color-mix(in srgb, var(--kg-tint) 35%, transparent);
    background: color-mix(in srgb, var(--kg-tint) 12%, var(--surface));
}
.gh-content .kg-callout-card-accent {
    border-color: transparent;
    background: var(--accent-solid);
    color: var(--accent-solid-fg);
}
.gh-content .kg-callout-card.kg-callout-card-accent a { color: inherit; text-decoration: underline; }
.gh-content .kg-callout-card-accent :not(pre) > code { background: color-mix(in srgb, var(--accent-solid-fg) 18%, transparent); }

/* --- Toggle --- */
.gh-content .kg-toggle-card {
    padding: 1em 1.2em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}
.gh-content .kg-toggle-card .kg-toggle-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    cursor: pointer;
}
.gh-content .kg-toggle-card h4.kg-toggle-heading-text {
    margin: 0;
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.4;
}
.gh-content .kg-toggle-card .kg-toggle-card-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.gh-content .kg-toggle-card .kg-toggle-heading svg {
    width: 14px;
    color: inherit;
    transform: rotate(-180deg);
    transition: transform 0.2s ease;
}
.gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-heading svg { transform: none; }
.gh-content .kg-toggle-card .kg-toggle-heading path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}
.gh-content .kg-toggle-card .kg-toggle-content {
    position: static;
    height: auto;
    margin-top: 0.7em;
    opacity: 1;
    font-size: 0.95em;
}
.gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.gh-content .kg-toggle-card .kg-toggle-content > * { margin: 0; font-size: inherit; line-height: 1.6; }
.gh-content .kg-toggle-card .kg-toggle-content > * + * { margin-top: 0.8em; }
.gh-content .kg-toggle-card + .kg-toggle-card { margin-top: 0.75em; }

/* --- Button --- */
.gh-content .kg-button-card { display: flex; justify-content: center; width: 100%; }
.gh-content .kg-button-card.kg-align-left { justify-content: flex-start; }
.gh-content .kg-button-card a.kg-btn {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 2.75rem;
    padding: 0.55em 1.2em;
    border-radius: var(--radius);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.gh-content .kg-button-card a.kg-btn:hover { opacity: 1; filter: brightness(1.08); }
.gh-content .kg-button-card a.kg-btn-accent { background: var(--accent-solid); color: var(--accent-solid-fg); }

/* --- Bookmark --- */
.gh-content .kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover { border-color: color-mix(in srgb, var(--fg) 35%, var(--line)); }
.gh-content .kg-bookmark-card .kg-bookmark-content {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 1em 1.2em;
    font-family: inherit;
}
.gh-content .kg-bookmark-card .kg-bookmark-title {
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1em;
    font-weight: 600;
    line-height: 1.35;
}
.gh-content .kg-bookmark-card .kg-bookmark-description {
    display: -webkit-box;
    max-height: none;
    margin-top: 0.35em;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.875em;
    line-height: 1.5;
    opacity: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.gh-content .kg-bookmark-card .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: 0.9em;
    color: var(--muted);
    font-size: 0.8em;
    font-weight: 500;
    white-space: nowrap;
}
.gh-content .kg-bookmark-card .kg-bookmark-metadata > *:not(img) { opacity: 1; }
.gh-content .kg-bookmark-card .kg-bookmark-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0 0.45em 0 0;
}
.gh-content .kg-bookmark-card .kg-bookmark-author,
.gh-content .kg-bookmark-card .kg-bookmark-publisher {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-content .kg-bookmark-card .kg-bookmark-thumbnail {
    position: relative;
    flex: 0 0 32%;
    min-width: 0;
    max-width: 260px;
}
.gh-content .kg-bookmark-card .kg-bookmark-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}
@media (max-width: 600px) {
    .gh-content .kg-bookmark-card a.kg-bookmark-container { flex-direction: column-reverse; }
    .gh-content .kg-bookmark-card .kg-bookmark-thumbnail { flex-basis: auto; max-width: none; aspect-ratio: 16 / 8; }
}

/* --- File --- */
.gh-content .kg-file-card { display: flex; }
.gh-content .kg-file-card a.kg-file-card-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
    min-height: 0;
    padding: 0.9em 1em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg);
    font-family: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.gh-content .kg-file-card a.kg-file-card-container:hover { border-color: color-mix(in srgb, var(--fg) 35%, var(--line)); }
.gh-content .kg-file-card .kg-file-card-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2em;
    width: auto;
    min-width: 0;
    margin: 0;
}
.gh-content .kg-file-card .kg-file-card-title {
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
}
.gh-content .kg-file-card .kg-file-card-caption { color: var(--muted); font-size: 0.875em; line-height: 1.4; opacity: 1; }
.gh-content .kg-file-card .kg-file-card-caption:empty,
.gh-content .kg-file-card .kg-file-card-title:empty { display: none; }
.gh-content .kg-file-card .kg-file-card-metadata {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.25em;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78em;
    line-height: 1.4;
}
.gh-content .kg-file-card .kg-file-card-filename { font-weight: 500; overflow-wrap: anywhere; }
.gh-content .kg-file-card .kg-file-card-filesize { font-size: inherit; opacity: 1; }
.gh-content .kg-file-card .kg-file-card-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.5rem;
    min-width: 0;
    height: auto;
    min-height: 3.5rem;
    border-radius: calc(var(--radius) - 2px);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}
.gh-content .kg-file-card .kg-file-card-icon::before { display: none; }
.gh-content .kg-file-card .kg-file-card-icon svg { width: 24px; height: 24px; color: var(--accent); }
.gh-content .kg-file-card + .kg-file-card { margin-top: 0.75em; }

/* --- Product --- */
.gh-content .kg-product-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gh-content .kg-product-card .kg-product-card-container {
    display: grid;
    grid-template-columns: auto min-content;
    align-items: center;
    row-gap: 1em;
    width: 100%;
    max-width: 34rem;
    padding: 1.25em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
    color: var(--fg);
    font-family: inherit;
}
.gh-content .kg-product-card .kg-product-card-image {
    grid-column: 1 / 3;
    justify-self: center;
    height: auto;
    border-radius: calc(var(--radius) - 2px);
}
.gh-content .kg-product-card .kg-product-card-title-container { grid-column: 1 / 2; }
.gh-content .kg-product-card h4.kg-product-card-title {
    margin: 0;
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.2;
}
.gh-content .kg-product-card .kg-product-card-rating {
    display: flex;
    grid-column: 2 / 3;
    align-items: center;
    align-self: start;
    justify-self: end;
    padding-left: 1em;
    color: var(--fg);
}
.gh-content .kg-product-card .kg-product-card-rating-star { width: 20px; height: 20px; }
.gh-content .kg-product-card .kg-product-card-rating-star svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.2; }
.gh-content .kg-product-card .kg-product-card-rating-active.kg-product-card-rating-star svg { opacity: 1; }
.gh-content .kg-product-card .kg-product-card-description { grid-column: 1 / 3; color: var(--muted); font-size: 0.92em; }
.gh-content .kg-product-card .kg-product-card-description :is(p, ul, ol) {
    margin: 0.6em 0 0;
    font-size: inherit;
    line-height: 1.55;
    opacity: 1;
}
.gh-content .kg-product-card .kg-product-card-description > :first-child { margin-top: 0; }
.gh-content .kg-product-card a.kg-product-card-button {
    display: flex;
    grid-column: 1 / 3;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding: 0.5em 1em;
    border-radius: var(--radius);
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
}
.gh-content .kg-product-card a.kg-product-card-btn-accent { background: var(--accent-solid); color: var(--accent-solid-fg); }
@media (max-width: 400px) {
    .gh-content .kg-product-card .kg-product-card-title-container { grid-column: 1 / 3; }
    .gh-content .kg-product-card .kg-product-card-rating { grid-column: 1 / 3; justify-self: start; padding-left: 0; }
}

/* --- Audio (player JS comes from Ghost's card assets) --- */
.gh-content .kg-audio-card {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 0.4em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
    color: var(--fg);
    font-family: inherit;
}
.gh-content .kg-audio-card .kg-audio-thumbnail {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    min-width: 0;
    height: 4.5rem;
    margin: 0.25em;
    border-radius: calc(var(--radius) - 2px);
    object-fit: cover;
}
.gh-content .kg-audio-card .kg-audio-thumbnail.placeholder { background: var(--accent-solid); }
.gh-content .kg-audio-card .kg-audio-thumbnail.placeholder svg { fill: var(--accent-solid-fg); }
.gh-content .kg-audio-card .kg-audio-player-container { flex: 1; min-width: 0; }
.gh-content .kg-audio-card .kg-audio-title {
    margin: 0;
    padding: 0.35em 0.75em 0;
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
}
.gh-content .kg-audio-card .kg-audio-player { gap: 0.2em; padding: 0.35em 0.6em; }
.gh-content .kg-audio-card :is(.kg-audio-current-time, .kg-audio-time, .kg-audio-playback-rate) {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.gh-content .kg-audio-card .kg-audio-time { width: auto; }
.gh-content .kg-audio-card .kg-audio-player-container button { padding: 4px; border-radius: 4px; background: transparent; color: var(--fg); }
.gh-content .kg-audio-card .kg-audio-seek-slider::before,
.gh-content .kg-audio-card .kg-audio-volume-slider::before { background-color: var(--accent); }
.gh-content .kg-audio-card input[type="range"]::-webkit-slider-runnable-track { background: color-mix(in srgb, var(--fg) 18%, transparent); }
.gh-content .kg-audio-card input[type="range"]::-moz-range-track { background: color-mix(in srgb, var(--fg) 18%, transparent); }
.gh-content .kg-audio-card input[type="range"]::-moz-range-progress { background: var(--accent); }
.gh-content .kg-audio-card input[type="range"]::-webkit-slider-thumb { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / 25%); }
.gh-content .kg-audio-card input[type="range"]::-moz-range-thumb { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / 25%); }

/* --- Video (player JS comes from Ghost's card assets) ---
   The video sits in flow with its own inline aspect-ratio. Ghost's cards.min.js also writes an
   inline padding-bottom ratio box on the container (made for an absolutely positioned video);
   with the video in flow that doubles the height into an empty block, so it is cancelled here. */
.gh-content .kg-video-card { position: relative; }
.gh-content .kg-video-card .kg-video-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-bottom: 0 !important;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--code-bg);
}
.gh-content .kg-video-card .kg-video-container video {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.gh-content .kg-width-full.kg-video-card .kg-video-container { border-radius: 0; }

/* --- Embed --- */
.gh-content .kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.gh-content .kg-embed-card > :not(figcaption) { max-width: 100%; }
.gh-content .kg-embed-card iframe { max-width: 100%; border: 0; }
.gh-content .kg-embed-card figcaption { align-self: stretch; }

/* --- Header card v1 (always full width) --- */
.gh-content .kg-header-card:not(.kg-v2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: clamp(3rem, 10vmin, 7rem) var(--gutter);
    background-color: var(--code-bg);
    color: var(--code-fg);
    text-align: center;
}
.gh-content .kg-header-card.kg-size-small:not(.kg-v2) { padding-block: clamp(2.5rem, 8vmin, 5rem); min-height: 0; }
.gh-content .kg-header-card.kg-size-large:not(.kg-v2) { padding-block: clamp(4rem, 14vmin, 10rem); min-height: 0; }
.gh-content .kg-header-card.kg-align-left:not(.kg-v2) { align-items: flex-start; text-align: left; }
.gh-content .kg-header-card.kg-style-dark { background-color: var(--code-bg); color: var(--code-fg); }
.gh-content .kg-header-card.kg-style-light { border-block: 1px solid var(--line); background-color: var(--surface); color: var(--fg); }
.gh-content .kg-header-card.kg-style-accent { background-color: var(--accent-solid); color: var(--accent-solid-fg); }
.gh-content .kg-header-card.kg-style-image {
    position: relative;
    background-color: var(--code-bg);
    background-position: center;
    background-size: cover;
    color: #fff;
}
.gh-content .kg-header-card.kg-style-image:not(.kg-v2)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(0 0 0 / 35%), rgb(0 0 0 / 55%));
}
.gh-content .kg-header-card.kg-style-image > * { position: relative; z-index: 1; }
.gh-content .kg-header-card h2.kg-header-card-header {
    margin: 0;
    color: inherit;
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.gh-content .kg-header-card.kg-size-small h2.kg-header-card-header { font-size: clamp(1.75rem, 5vw, 2.8rem); }
.gh-content .kg-header-card.kg-size-large h2.kg-header-card-header { font-size: clamp(2.3rem, 7vw, 4.4rem); }
.gh-content .kg-header-card h3.kg-header-card-subheader {
    max-width: 40em;
    margin: 0.5em 0 0;
    color: inherit;
    font-size: clamp(1.05rem, 2.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.88;
}
.gh-content .kg-header-card :is(h2, h3) a { color: inherit; }
.gh-content .kg-header-card a.kg-header-card-button {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 2.75rem;
    margin-top: 1.5em;
    padding: 0.5em 1.2em;
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
}
.gh-content .kg-header-card.kg-style-light a.kg-header-card-button { background: var(--accent-solid); color: var(--accent-solid-fg); }

/* --- Header card v2 (colors come from inline styles chosen in the editor) --- */
.gh-content .kg-header-card.kg-v2 {
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius);
    text-align: initial;
}
.gh-content .kg-header-card.kg-v2.kg-width-full { border-radius: 0; }
.gh-content .kg-header-card.kg-v2.kg-style-accent { background-color: var(--accent-solid); }
.gh-content .kg-header-card.kg-v2 a,
.gh-content .kg-header-card.kg-v2 a span { color: currentColor; }
.gh-content .kg-header-card.kg-v2 > picture > .kg-header-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.gh-content .kg-header-card.kg-v2 .kg-header-card-content { position: relative; width: 100%; }
.gh-content .kg-header-card.kg-layout-split .kg-header-card-content { display: grid; grid-template-columns: 1fr 1fr; }
.gh-content .kg-header-card.kg-v2 .kg-header-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem);
    text-align: left;
}
.gh-content .kg-header-card.kg-v2.kg-width-full:not(.kg-layout-split) .kg-header-card-text {
    padding-inline: max(var(--gutter), (100% - var(--page-width)) / 2 + var(--gutter));
}
.gh-content .kg-header-card.kg-v2 .kg-header-card-text.kg-align-center { align-items: center; text-align: center; }
.gh-content .kg-header-card.kg-swapped .kg-header-card-text { grid-row: 1; }
.gh-content .kg-header-card.kg-v2 .kg-header-card-content .kg-header-card-image {
    width: 100%;
    height: 0;
    min-height: 100%;
    object-fit: cover;
}
.gh-content .kg-header-card.kg-content-wide.kg-layout-split .kg-header-card-content .kg-header-card-image {
    height: 100%;
    padding: 3em 0;
    object-fit: contain;
}
.gh-content .kg-header-card.kg-v2 h2.kg-header-card-heading {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.01em;
}
.gh-content .kg-header-card.kg-v2 .kg-header-card-subheading {
    margin: 0.6em 0 0;
    font-weight: 500;
    line-height: 1.35;
}
.gh-content .kg-header-card.kg-v2 .kg-header-card-button {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 2.75rem;
    margin-top: 1.5em;
    padding: 0.5em 1.2em;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}
.gh-content .kg-header-card.kg-v2 .kg-header-card-button.kg-style-accent { background-color: var(--accent-solid); }
@media (max-width: 640px) {
    .gh-content .kg-header-card.kg-layout-split .kg-header-card-content { grid-template-columns: 1fr; }
    .gh-content .kg-header-card.kg-v2 .kg-header-card-content .kg-header-card-image { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
}

/* --- Signup card (Ghost shows it only when members are on) --- */
.gh-content .kg-signup-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
}
.gh-content .kg-signup-card.kg-width-full { border-radius: 0; }
.gh-content .kg-signup-card.kg-style-accent { background-color: var(--accent-solid); }
.gh-content .kg-signup-card a,
.gh-content .kg-signup-card a span { color: currentColor; }
.gh-content .kg-signup-card > picture > .kg-signup-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.gh-content .kg-signup-card .kg-signup-card-content { position: relative; }
.gh-content .kg-signup-card.kg-layout-split .kg-signup-card-content { display: grid; grid-template-columns: 1fr 1fr; }
.gh-content .kg-signup-card .kg-signup-card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
    text-align: left;
}
.gh-content .kg-signup-card.kg-width-full:not(.kg-layout-split) .kg-signup-card-text {
    padding-inline: max(var(--gutter), (100% - var(--page-width)) / 2 + var(--gutter));
}
.gh-content .kg-signup-card .kg-signup-card-text.kg-align-center { align-items: center; text-align: center; }
.gh-content .kg-signup-card.kg-swapped .kg-signup-card-text { grid-row: 1; }
.gh-content .kg-signup-card .kg-signup-card-content .kg-signup-card-image {
    width: 100%;
    height: 0;
    min-height: 100%;
    object-fit: cover;
}
.gh-content .kg-signup-card h2.kg-signup-card-heading {
    margin: 0;
    line-height: 1.08;
}
.gh-content .kg-signup-card .kg-signup-card-subheading {
    margin: 0.6em 0 0;
    font-weight: 500;
    line-height: 1.4;
}
.gh-content .kg-signup-card .kg-signup-card-form {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 30rem;
    margin: 1.5em 0 0;
}
.gh-content .kg-signup-card .kg-align-center .kg-signup-card-form { align-items: center; }
.gh-content .kg-signup-card .kg-signup-card-fields {
    display: flex;
    gap: 0.4em;
    width: 100%;
    max-width: none;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.gh-content .kg-signup-card .kg-signup-card-fields:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.gh-content .kg-signup-card .kg-signup-card-input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 2.6rem;
    margin: 0;
    padding: 0.5em 0.75em;
    border: 0;
    background: transparent;
    color: var(--fg);
    font-size: 1rem;
}
.gh-content .kg-signup-card .kg-signup-card-input:focus { outline: none; }
.gh-content .kg-signup-card .kg-signup-card-button {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 2.6rem;
    padding: 0 1.1em;
    border: 0;
    border-radius: calc(var(--radius) - 3px);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.gh-content .kg-signup-card .kg-signup-card-button.kg-style-accent { background-color: var(--accent-solid); }
.gh-content .kg-signup-card .kg-signup-card-button-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.gh-content .kg-signup-card .kg-signup-card-form.loading .kg-signup-card-button-default { visibility: hidden; }
.gh-content .kg-signup-card .kg-signup-card-form.loading .kg-signup-card-button-loading { display: flex; }
.gh-content .kg-signup-card .kg-signup-card-success,
.gh-content .kg-signup-card .kg-signup-card-error { display: none; }
.gh-content .kg-signup-card .kg-signup-card-form.success .kg-signup-card-fields { display: none; }
.gh-content .kg-signup-card .kg-signup-card-form.success .kg-signup-card-success {
    display: block;
    height: auto;
    font-size: 1.1em;
    font-weight: 600;
}
.gh-content .kg-signup-card .kg-signup-card-form.error .kg-signup-card-fields { border-color: var(--bad); box-shadow: none; }
.gh-content .kg-signup-card .kg-signup-card-form.error .kg-signup-card-error {
    position: static;
    display: block;
    margin-top: 0.5em;
    font-size: 0.9em;
}
.gh-content .kg-signup-card .kg-signup-card-disclaimer { margin: 0.9em 0 0; font-size: 0.85em; opacity: 0.85; }
@media (max-width: 640px) {
    .gh-content .kg-signup-card.kg-layout-split .kg-signup-card-content { grid-template-columns: 1fr; }
    .gh-content .kg-signup-card .kg-signup-card-content .kg-signup-card-image { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
}

/* --- Header v2 and signup heading sizes ---
   Ghost's cards.min.css loads after this file and sizes these per card width with selectors
   as specific as base's (up to 0,5,0 for full-width subheadings), so it won ties. Each selector
   below is Ghost's own plus .gh-content: one class more, so it always wins. Sizes come from
   custom properties; overlays resize by setting them on the card, e.g.
   .gh-content .kg-signup-card { --kg-heading-size: 2rem; } (the defaults are 0-specificity). */
:where(.gh-content .kg-header-card) {
    --kg-heading-size: clamp(1.75rem, 4vw, 2.6rem);
    --kg-subheading-size: clamp(1.05rem, 2vw, 1.35rem);
}
:where(.gh-content .kg-header-card.kg-width-wide) { --kg-heading-size: clamp(1.9rem, 5vw, 3.3rem); }
:where(.gh-content .kg-header-card.kg-width-full) { --kg-heading-size: clamp(2.1rem, 5.6vw, 4.2rem); }
:where(.gh-content .kg-signup-card) {
    --kg-heading-size: clamp(1.6rem, 4vw, 2.4rem);
    --kg-subheading-size: clamp(1rem, 2vw, 1.25rem);
}
:where(.gh-content .kg-signup-card.kg-width-wide) { --kg-heading-size: clamp(1.75rem, 4.4vw, 2.8rem); }
:where(.gh-content .kg-signup-card.kg-width-full) { --kg-heading-size: clamp(1.9rem, 5vw, 3.2rem); }
/* Split layouts put the text in half the card. */
:where(.gh-content :is(.kg-header-card, .kg-signup-card).kg-layout-split) { --kg-heading-size: clamp(1.75rem, 3.6vw, 2.8rem); }

.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,
.gh-content .kg-header-card.kg-width-full.kg-layout-split h2.kg-header-card-heading,
.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,
.gh-content .kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading {
    font-size: var(--kg-heading-size);
}
.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:not(.kg-layout-split .kg-header-card-subheading),
.gh-content .kg-header-card.kg-width-full.kg-layout-split .kg-header-card-subheading,
.gh-content .kg-signup-card .kg-signup-card-subheading,
.gh-content .kg-signup-card.kg-width-wide .kg-signup-card-subheading,
.gh-content .kg-signup-card.kg-width-full .kg-signup-card-subheading:not(.kg-layout-split .kg-signup-card-subheading),
.gh-content .kg-signup-card.kg-width-full.kg-layout-split .kg-signup-card-subheading {
    max-width: 40em;
    font-size: var(--kg-subheading-size);
}

/* --- Call to action --- */
.gh-content .kg-cta-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--fg) 6%, var(--surface));
}
.gh-content .kg-cta-card.kg-cta-bg-none { background: transparent; }
.gh-content .kg-cta-card.kg-cta-bg-white { border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.gh-content .kg-cta-card.kg-cta-bg-grey { background: color-mix(in srgb, var(--fg) 7%, var(--surface)); }
.gh-content .kg-cta-card.kg-cta-bg-blue { --kg-tint: #2f7fd1; }
.gh-content .kg-cta-card.kg-cta-bg-green { --kg-tint: #2f9a4f; }
.gh-content .kg-cta-card.kg-cta-bg-yellow { --kg-tint: #d29a10; }
.gh-content .kg-cta-card.kg-cta-bg-red { --kg-tint: #d14040; }
.gh-content .kg-cta-card.kg-cta-bg-pink { --kg-tint: #d4489a; }
.gh-content .kg-cta-card.kg-cta-bg-purple { --kg-tint: #8457e0; }
.gh-content .kg-cta-card:is(.kg-cta-bg-blue, .kg-cta-bg-green, .kg-cta-bg-yellow, .kg-cta-bg-red, .kg-cta-bg-pink, .kg-cta-bg-purple) {
    background: color-mix(in srgb, var(--kg-tint) 12%, var(--surface));
}
.gh-content .kg-cta-card .kg-cta-sponsor-label-wrapper {
    margin: 0 1.5em;
    padding: 0.7em 0;
    border-bottom: 1px solid var(--line);
}
.gh-content .kg-cta-card.kg-cta-bg-none .kg-cta-sponsor-label-wrapper { margin: 0; }
.gh-content .kg-cta-card .kg-cta-sponsor-label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gh-content .kg-cta-card .kg-cta-content { display: flex; gap: 1.25em; padding: 1.5em; }
.gh-content .kg-cta-card.kg-cta-bg-none .kg-cta-content { padding-inline: 0; }
.gh-content .kg-cta-card.kg-cta-minimal .kg-cta-content { flex-direction: row; align-items: flex-start; }
.gh-content .kg-cta-card.kg-cta-immersive .kg-cta-content { flex-direction: column; }
.gh-content .kg-cta-card .kg-cta-content-inner { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.gh-content .kg-cta-card.kg-cta-immersive.kg-cta-centered .kg-cta-content-inner { align-items: center; text-align: center; }
.gh-content .kg-cta-card .kg-cta-image-container { flex-shrink: 0; }
.gh-content .kg-cta-card .kg-cta-image-container img {
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: calc(var(--radius) - 2px);
    object-fit: cover;
}
.gh-content .kg-cta-card.kg-cta-minimal .kg-cta-image-container img { width: 64px; height: 64px; }
.gh-content .kg-cta-card .kg-cta-text p { margin: 0; line-height: 1.55; }
.gh-content .kg-cta-card .kg-cta-text p + p { margin-top: 1em; }
.gh-content .kg-cta-card .kg-cta-text a { color: inherit; text-decoration: underline; }
.gh-content .kg-cta-card.kg-cta-link-accent .kg-cta-text a,
.gh-content .kg-cta-card.kg-cta-link-accent .kg-cta-sponsor-label a { color: var(--accent); }
.gh-content .kg-cta-card a.kg-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: auto;
    min-height: 2.75rem;
    padding: 0.5em 1.15em;
    border-radius: var(--radius);
    font-family: var(--gh-font-heading, var(--font-head));
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
}
.gh-content .kg-cta-card a.kg-cta-button.kg-style-accent { background-color: var(--accent-solid); }
.gh-content .kg-cta-card.kg-cta-immersive.kg-cta-has-img a.kg-cta-button { width: 100%; }
@media (max-width: 600px) {
    .gh-content .kg-cta-card .kg-cta-content { gap: 1em; padding: 1.25em; }
    .gh-content .kg-cta-card.kg-cta-minimal .kg-cta-content { flex-direction: column; }
}

/* ==========================================================================
   11. Lists of posts, pagination, archive and error pages
   ========================================================================== */

.post-feed { display: grid; gap: 1.5rem; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}
.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.75rem;
    color: var(--fg);
    font-weight: 600;
    text-decoration: none;
}
a.pagination-link:hover { color: var(--accent); }
.pagination-link.is-disabled { visibility: hidden; }
.pagination-prev .icon { transform: scaleX(-1); }
.pagination-info { color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; text-align: center; }

.archive-header { padding-block: clamp(2rem, 6vw, 4rem) 1.75rem; }
.archive-avatar { width: 80px; height: 80px; margin-bottom: 1rem; border-radius: 50%; object-fit: cover; }
.archive-kicker {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.archive-title { margin-top: 0.25em; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; }
.archive-desc { max-width: 60ch; margin-top: 0.75em; color: var(--muted); font-size: 1.1rem; }
.archive-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 1em;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.archive-meta a { color: var(--accent); }
.archive-posts { padding-bottom: 4rem; }

.error-page { padding-block: clamp(3rem, 10vw, 7rem) 2.5rem; }
.error-code { color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.08em; }
.error-title { margin-top: 0.2em; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.error-text { max-width: 52ch; margin-top: 0.75em; color: var(--muted); font-size: 1.1rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.error-details { margin-top: 2rem; font-size: 0.9rem; }
.error-details ul { padding-left: 1.2em; }
.error-page + .related-posts { padding-bottom: 4rem; }

/* ==========================================================================
   12. Post footer: tags, author box, subscribe, related posts
   ========================================================================== */

.post-footer {
    display: grid;
    gap: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.post-footer > * { width: 100%; max-width: var(--content-width); margin-inline: auto; }
.post-footer > .related-posts { max-width: var(--wide-width); }
/* With a TOC, the footer and comments take the post layout's columns (--toc-columns/--toc-areas):
   blocks sit in the content column whichever side the TOC is on; related posts run from the
   content column to the end (under a right-hand TOC, not under a left one). */
@media (min-width: 960px) {
    .post.has-toc :is(.post-footer, .post-comments) {
        display: grid;
        grid-template-columns: var(--toc-columns);
        grid-template-areas: var(--toc-areas);
        column-gap: var(--toc-gap);
    }
    .post.has-toc :is(.post-footer, .post-comments) > * { grid-column: content; margin-inline: 0; }
    .post.has-toc .post-footer > .related-posts { grid-column: content-start / -1; }
}

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tag-list:empty { display: none; }
.tag-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2em 0.8em;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--fg);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tag-link:hover { border-color: var(--accent); color: var(--accent); }

.post-authors { display: grid; }
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--line);
}
.author-box:last-child { border-bottom: 1px solid var(--line); }
.author-box-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--line);
    object-fit: cover;
}
.author-box-body { min-width: 0; }
.author-box-name { font-family: var(--gh-font-heading, var(--font-head)); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.author-box-name a { text-decoration: none; }
.author-box-name a:hover { color: var(--accent); }
.author-box-bio { margin-top: 0.3em; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.author-box-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5em; font-size: 0.85rem; }
.author-box-links a { color: var(--accent); }

.subscribe {
    display: grid;
    align-items: center;
    gap: 1rem 2rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
@media (min-width: 720px) {
    .subscribe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.subscribe-title { font-size: 1.35rem; line-height: 1.15; }
.subscribe-desc { margin-top: 0.4em; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.subscribe-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscribe-field { display: block; flex: 1 1 14rem; min-width: 0; }
.subscribe-input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55em 0.85em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
}
.subscribe-input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.subscribe-button { position: relative; flex: none; }
.subscribe-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 1.1em;
    height: 1.1em;
    margin: -0.55em 0 0 -0.55em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wdev-spin 0.7s linear infinite;
}
.subscribe-form.loading .subscribe-button { pointer-events: none; }
.subscribe-form.loading .subscribe-button-label { visibility: hidden; }
.subscribe-form.loading .subscribe-spinner { display: block; }
.subscribe-message { display: none; margin-top: 0.6rem; font-size: 0.9rem; }
.subscribe-form.success .subscribe-fields { display: none; }
.subscribe-form.success .subscribe-success { display: block; margin-top: 0; color: var(--fg); font-weight: 600; }
.subscribe-form.error .subscribe-error { display: block; color: var(--bad); }
.subscribe-form.error .subscribe-input { border-color: var(--bad); }

.related-title { margin-bottom: 1rem; font-size: 1.25rem; }

.post-comments { margin-bottom: 4rem; }

/* ==========================================================================
   13. Print
   ========================================================================== */

@media print {
    .skip-link, .post-toc, .subscribe, .related-posts, .copy-code,
    .mode-toggle, .search-toggle, .nav-toggle, .pagination { display: none !important; }
    body { background: #fff; color: #000; }
    .gh-content pre { white-space: pre-wrap; }
    .gh-content a:not([class*="kg-"]) { color: inherit; }
}