/* passepartout — a logbook, not a magazine.
 *
 * The writing this frames is a series of dated entries, each an incident worked
 * through methodically, each ending with the rule its author would keep. That is
 * a logbook. So the design is a field notebook rather than a magazine: warm
 * paper and ink, ruled rather than shadowed, a botanical green for links and a
 * rust for marks, a serif with some character for titles and a quiet sans for
 * the reading.
 *
 *   - Entries, not articles. The index is the log: date in the margin, ruled
 *     rows, no hero. Pinned entries carry a mark, nothing else is promoted.
 *   - The margin is marginalia. Beside each entry: when it was logged, where it
 *     is filed, and — because the author sees the same shapes in software,
 *     in neurodivergence and in a Star Trek rewatch — what else they have been
 *     working through in other domains.
 *   - Nothing moves. Ever. Not behind a preference; by construction.
 *   - The reader can set the type. Size and spacing, remembered.
 *   - One quiet thread of colour in the header rule. Present, not loud.
 *
 * The grid mechanics (named lines, rail row placement, the asymmetric breakout
 * for wide/full images, the no-rail case) are the ones verified in the browser
 * for the previous version. Do not "simplify" them without re-measuring.
 */

/* =========================================================== 1. FONTS ===== */

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

/* ========================================================== 2. TOKENS ===== */

:root {
    color-scheme: light;

    /* Field notebook. The values are the ones the author chose for their own
       site; the blog is the same person in a different medium. */
    --paper:   #fbf8f1;
    --surface: #f3ece0;
    --ink:     #241f1a;   /* 15.1:1 on paper */
    --ink-70:  #4d453d;   /*  8.6:1 */
    --ink-45:  #6d635a;   /*  5.6:1 */
    --rule:    #e2d8c7;
    --green:   #2f5d50;   /*  7.3:1 — links */
    --rust:    #b45309;   /*  4.6:1 — marks, never body text */
    --mark:    var(--rust);
    --mark-ink: #fbf8f1;

    /* Six pale stops. On paper they read as a thread; you notice it only if you look. */
    --spectrum: linear-gradient(90deg, #d9a3ae, #ddb58c, #d9cd8a, #a8c7a1, #9fbfcf, #b8a8d2);

    --serif: var(--gh-font-heading, "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif);
    --sans:  var(--gh-font-body, "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid scale, ~1.2 opening to ~1.28. */
    --s-2: clamp(0.7500rem, 0.73rem + 0.10vw, 0.8125rem);
    --s-1: clamp(0.8750rem, 0.85rem + 0.12vw, 0.9375rem);
    --s0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
    --s1:  clamp(1.2500rem, 1.18rem + 0.36vw, 1.5000rem);
    --s2:  clamp(1.5000rem, 1.36rem + 0.70vw, 2.0000rem);
    --s3:  clamp(1.8750rem, 1.60rem + 1.35vw, 2.8125rem);
    --s4:  clamp(2.2500rem, 1.78rem + 2.35vw, 3.7500rem);

    --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.75rem; --space-4: 3rem;
    --space-5: clamp(4rem, 3rem + 4vw, 7rem);

    --measure: 34rem;
    --rail: 11rem;
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

    --size-scale: 1;
    --lh: 1.65;
}

[data-accent="Green"]       { --mark: var(--green); }
[data-accent="Ink"]         { --mark: var(--ink); }
[data-accent="Site accent"] { --mark: var(--ghost-accent-color, var(--rust)); }

/* Reader settings. */
[data-size="large"]  { --size-scale: 1.125; }
[data-size="larger"] { --size-scale: 1.25; }
[data-spacing="roomy"] { --lh: 1.9; }

@media (prefers-color-scheme: dark) {
    :root:not([data-scheme="Light"]) {
        color-scheme: dark;
        --paper: #1b1915; --surface: #25221d; --ink: #ece5d7; --ink-70: #bfb5a6; --ink-45: #9a9082;
        --rule: #3a352d; --green: #8ec2ad; --rust: #e39a56; --mark-ink: #1b1915;
        --spectrum: linear-gradient(90deg, #8f5c67, #8f6e4c, #8a824a, #4f7a58, #4f6f86, #6c5c87);
    }
}
:root[data-scheme="Dark"] {
    color-scheme: dark;
    --paper: #1b1915; --surface: #25221d; --ink: #ece5d7; --ink-70: #bfb5a6; --ink-45: #9a9082;
    --rule: #3a352d; --green: #8ec2ad; --rust: #e39a56; --mark-ink: #1b1915;
    --spectrum: linear-gradient(90deg, #8f5c67, #8f6e4c, #8a824a, #4f7a58, #4f6f86, #6c5c87);
}

/* ============================================================ 3. BASE ===== */

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

/* Nothing moves. By construction, not by preference. */
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: calc(var(--s0) * var(--size-scale));
    line-height: var(--lh);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

h1, h2, h3, .entry-title, .archive-title { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }

::selection { background: var(--green); color: var(--paper); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: var(--space-2); z-index: 10; font-size: var(--s-1); }
.skip:focus { left: var(--space-2); top: var(--space-2); }

a { color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent); }
a:hover { text-decoration-color: var(--green); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; border-radius: 1px; }

/* ============================================================ 4. GRID ===== */

.canvas {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start rail-start] minmax(0, var(--rail))
        [rail-end main-start] minmax(0, var(--measure))
        [main-end wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    column-gap: var(--space-4);
}
.canvas > * { grid-column: main; }

@media (max-width: 62rem) {
    .canvas {
        grid-template-columns:
            [full-start] minmax(var(--gutter), 1fr)
            [wide-start rail-start main-start] minmax(0, var(--measure))
            [main-end rail-end wide-end] minmax(var(--gutter), 1fr)
            [full-end];
        column-gap: 0; /* three columns still carry two gaps; this stole 96px on phones */
    }
}

/* ======================================================= 5. FURNITURE ===== */

.site-head { padding-block: var(--space-4) 0; }
.site-head-inner {
    grid-column: wide;
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: var(--space-2) var(--space-3);
    padding-bottom: var(--space-2);
}

/* Ruled, not shadowed. A thin rule and a heavy one, the way a ledger is ruled.
   The heavy one carries the spectrum when it is on. */
.rule-double {
    grid-column: wide;
    block-size: 5px;
    background:
        linear-gradient(var(--rule), var(--rule)) top / 100% 1px no-repeat,
        linear-gradient(var(--ink), var(--ink)) bottom / 100% 3px no-repeat;
}
[data-spectrum="on"] .rule-double {
    background:
        linear-gradient(var(--rule), var(--rule)) top / 100% 1px no-repeat,
        var(--spectrum) bottom / 100% 3px no-repeat;
}
.rule-double-top { margin-bottom: var(--space-3); transform: scaleY(-1); }

.wordmark { margin: 0; font-family: var(--serif); font-size: var(--s1); font-weight: 600; letter-spacing: -0.015em; }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark a:hover { text-decoration: underline; text-decoration-color: var(--mark); }
.site-logo { display: block; max-height: 2rem; width: auto; }

.site-tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--s-1); font-weight: 600; }
.site-nav a { color: var(--ink-70); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }
.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--s-1); }

.search-btn, .portal-link, .button {
    font: inherit; font-size: var(--s-1); font-weight: 600;
    color: var(--ink-70); background: none; border: 0; padding: 0; text-decoration: none; cursor: pointer;
}
.search-btn:hover, .portal-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }
.portal-link-primary, .button {
    display: inline-block; color: var(--mark-ink); background: var(--mark);
    padding: 0.5em 0.95em; border-radius: 2px;
}
.portal-link-primary:hover, .button:hover { color: var(--mark-ink); text-decoration: none; opacity: 0.92; }

main { padding-block: var(--space-4) var(--space-5); }

/* The mark. A short rule in the mark colour before a label: the one ornament. */
.eyebrow {
    margin: 0 0 var(--space-1);
    font-size: var(--s-2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-45);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em;
}
.eyebrow::before { content: ""; inline-size: 1.5rem; block-size: 2px; background: var(--mark); flex: none; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }
.eyebrow:empty { display: none; }
.pinned { color: var(--mark); }
.pinned::after { content: "·"; margin-inline-start: 0.6em; color: var(--ink-45); }

.lede {
    grid-column: wide; margin: 0 0 var(--space-4);
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: var(--s2); line-height: 1.25; letter-spacing: -0.01em; max-width: 24ch;
}

.meta { font-size: var(--s-2); color: var(--ink-45); letter-spacing: 0.02em; font-variant-numeric: tabular-nums lining-nums; display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0; }

/* ============================================================= 6. LOG ===== */

.archive-head { grid-column: wide; margin-bottom: var(--space-3); }
.archive-title { font-family: var(--serif); font-size: var(--s3); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 var(--space-2); }
.author-head { display: flex; gap: var(--space-3); align-items: flex-start; }
/* A tag with a cover image: text left, the picture right, its foot on the
   standfirst's baseline. Below the rail breakpoint it drops under the text. */
.archive-head.has-image { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: end; }
.archive-image { width: 14rem; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
@media (max-width: 62rem) {
    .archive-head.has-image { grid-template-columns: 1fr; row-gap: var(--space-2); }
    .archive-image { width: 100%; max-width: 20rem; }
}

/* An entry: date in the margin, ruled above, the title set in the serif. */
.entry {
    grid-column: wide;
    display: grid; grid-template-columns: subgrid;
    padding-block: var(--space-3);
    border-top: 1px solid var(--rule);
}
@supports not (grid-template-columns: subgrid) {
    .entry { grid-template-columns: minmax(0, var(--rail)) minmax(0, var(--measure)); column-gap: var(--space-4); }
}
.entry.is-pinned { border-top-color: var(--mark); }
.entry-rail {
    margin: 0; font-size: var(--s-2); color: var(--ink-45);
    font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em;
    display: flex; flex-direction: column; gap: 0.25em;
}
.entry-read { color: var(--ink-45); }
.entry-body { max-width: var(--measure); }
.entry-title { font-family: var(--serif); font-size: var(--s2); line-height: 1.14; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 var(--space-1); }
.entry-title a { color: var(--ink); text-decoration: none; }
.entry-title a:hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.entry-excerpt { margin: 0; color: var(--ink-70); }

@media (max-width: 62rem) {
    .entry { grid-template-columns: 1fr; gap: var(--space-1); }
    .entry-rail { order: -1; flex-direction: row; gap: 0.75em; }
}

.empty { color: var(--ink-45); font-family: var(--serif); font-style: italic; }

.pagination { grid-column: wide; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); font-size: var(--s-1); color: var(--ink-45); }
.pagination a { color: var(--ink-70); text-decoration: none; }
.pagination a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }

/* =========================================================== 7. ENTRY ===== */

/* The article wrapper. Its own class, NOT `.post`: {{post_class}} emits `post` on
   every card too, and display:contents on a card dissolves it into the grid. */
.article { display: contents; }

/* Auto-placement will not put the rail beside the text on its own. */
@media (min-width: 62.0625rem) {
    .post-head    { grid-row: 1; }
    .feature      { grid-row: 2; }
    .rail         { grid-row: 3; }
    .post-content { grid-row: 3; }
    .post-foot    { grid-row: 4; }
    /* Pinned too: auto-placement would drop it into row 2 whenever there is no
       feature image, and "More on" would appear above the entry. */
    .read-next    { grid-row: 5; }
}

.post-head { grid-column: main; margin-bottom: var(--space-3); }
.post-title { font-family: var(--serif); font-size: var(--s3); line-height: 1.06; letter-spacing: -0.022em; font-weight: 600; margin: 0; }
.standfirst { margin: var(--space-2) 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--s1); line-height: 1.4; color: var(--ink-70); max-width: 38ch; }

/* Marginalia. */
.rail { grid-column: rail; align-self: start; font-size: var(--s-2); line-height: 1.5; color: var(--ink-45); padding-top: 0.45rem; }
.rail dl { margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.rail dt, .rail-label { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); margin: 0; }
.rail dd { margin: 0.2rem 0 0; color: var(--ink-70); font-variant-numeric: tabular-nums lining-nums; }
.rail a { color: var(--ink-70); text-decoration-color: var(--rule); }
.rail a:hover { color: var(--ink); text-decoration-color: var(--mark); }

.rail-elsewhere { margin: 0 0 var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.rail-elsewhere ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.rail-elsewhere li { line-height: 1.35; }
.rail-elsewhere a { color: var(--ink-70); font-family: var(--serif); font-size: var(--s-1); font-weight: 600; text-decoration: none; }
.rail-elsewhere a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }
.rail-tag { display: block; color: var(--ink-45); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; margin-top: 0.15rem; }

.reading { padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.reading > summary { cursor: pointer; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-45); }
.reading-body { padding-top: var(--space-2); }
.reading-label { margin: 0 0 0.35rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--space-2); }
.choices button {
    font: inherit; font-size: var(--s-2); color: var(--ink-70); background: var(--surface);
    border: 1px solid var(--rule); padding: 0.3rem 0.6rem; min-height: 2rem; cursor: pointer; border-radius: 2px;
}
.choices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

@media (max-width: 62rem) {
    .rail { padding-top: 0; margin-bottom: var(--space-3); }
    .rail dl { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-2) var(--space-3); padding-block: var(--space-2); border-block: 1px solid var(--rule); }
    .rail-elsewhere { display: none; } /* the margin is gone; this belongs to the margin */
}

.feature { grid-column: wide; margin: var(--space-3) 0 var(--space-4); }
.feature img { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--rule); }
.feature figcaption { margin-top: var(--space-1); font-size: var(--s-2); color: var(--ink-45); max-width: var(--measure); }

.post-content { grid-column: main; }
.post-content > * { margin-block: 0 var(--space-2); }
.post-content > *:first-child { margin-top: 0; }
.post-content h2, .post-content h3, .post-content h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin-block: var(--space-4) var(--space-2); }
.post-content h2 { font-size: var(--s2); letter-spacing: -0.018em; }
.post-content h3 { font-size: var(--s1); letter-spacing: -0.012em; }
.post-content h4 { font-size: var(--s0); }
.post-content ul, .post-content ol { padding-inline-start: 1.2em; }
.post-content li { margin-bottom: var(--space-1); }
.post-content li::marker { color: var(--mark); }
.post-content img { max-width: 100%; height: auto; }
.post-content figure { margin-inline: 0; margin-block: var(--space-3); }
.post-content figcaption { margin-top: var(--space-1); font-size: var(--s-2); color: var(--ink-45); }

/* Pull quotes in the serif italic, opening mark hung into the margin. */
.post-content blockquote {
    margin: var(--space-4) 0; padding: 0 0 0 1rem; border-left: 2px solid var(--mark);
    font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--s1); line-height: 1.38; color: var(--ink); max-width: 34ch;
}
.post-content blockquote p { margin-bottom: var(--space-2); }
.post-content blockquote p:first-child { text-indent: -0.38em; }
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content code { font-family: var(--mono); font-size: 0.88em; background: var(--surface); border: 1px solid var(--rule); padding: 0.08em 0.32em; border-radius: 2px; }
.post-content pre { background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--green); padding: var(--space-2); overflow-x: auto; font-size: var(--s-1); line-height: 1.55; border-radius: 2px; }
.post-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.post-content hr { border: 0; block-size: 1px; background: var(--rule); margin-block: var(--space-4); }
.post-content table { width: 100%; border-collapse: collapse; font-size: var(--s-1); font-variant-numeric: tabular-nums lining-nums; }
.post-content th, .post-content td { border-bottom: 1px solid var(--rule); padding: 0.6em 0.8em 0.6em 0; text-align: left; }
.post-content th { font-size: var(--s-2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); font-weight: 600; border-bottom-color: var(--ink-45); }

.post-foot { grid-column: main; margin-top: var(--space-5); }

.subscribe-cta { border-block: 1px solid var(--rule); padding-block: var(--space-3); margin-block: 0 var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.subscribe-cta-text { margin: 0; font-family: var(--serif); font-size: var(--s1); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; max-width: 26ch; }

.author-card { display: flex; gap: var(--space-2); align-items: flex-start; padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.author-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); }
.author-avatar-lg { width: 5rem; height: 5rem; }
.author-name { margin: 0; font-size: var(--s-1); letter-spacing: 0.02em; color: var(--ink-45); }
.author-name a { color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: var(--s0); text-decoration: none; }
.author-name a:hover { text-decoration: underline; text-decoration-color: var(--mark); }
.author-bio { margin: 0.25rem 0 0; color: var(--ink-70); max-width: 44ch; }
.comments { margin-block-start: var(--space-4); }

.read-next { grid-column: wide; display: grid; grid-template-columns: subgrid; margin-top: var(--space-5); padding-top: var(--space-3); border-top: 3px solid var(--ink); }
.read-next > .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.read-next > .entry { grid-column: 1 / -1; }
.read-next > .entry:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 62rem) { .read-next { display: block; } }

.error-page { grid-column: wide; padding-block: var(--space-4); }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-3); }

.site-foot { padding-block: var(--space-4) var(--space-5); }
.site-foot-inner { grid-column: wide; }
.site-foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.site-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--s-1); }
.wordmark-sm { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.012em; }
.site-desc { margin: var(--space-1) 0 0; color: var(--ink-70); max-width: 42ch; font-family: var(--serif); font-style: italic; }
.secondary-nav ul, .site-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.secondary-nav a, .site-social a { color: var(--ink-70); text-decoration: none; }
.secondary-nav a:hover, .site-social a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mark); }
.colophon { margin: var(--space-3) 0 0; font-size: var(--s-2); color: var(--ink-45); display: flex; flex-wrap: wrap; gap: 0.6em; }

/* ======================================== 8. NO-RAIL + KOENIG BREAKOUT ===== */

/* A page has no rail, so it spans both columns. The author's call was to let
   the text fill that span rather than stop at the reading measure — about 90
   characters a line at this size. Longer lines want more leading, so pages get
   a little. */
@media (min-width: 62.0625rem) {
    .page .post-head, .page .post-content, .page .post-foot,
    .no-rail .post-head, .no-rail .post-content, .no-rail .post-foot { grid-column: wide; }
    .page .post-content, .no-rail .post-content { line-height: calc(var(--lh) + 0.1); }
    .page .standfirst, .no-rail .standfirst { max-width: none; }
    .page .post-content blockquote, .no-rail .post-content blockquote { max-width: 48ch; }
}

/* Distance from the viewport's left edge to the text column's left edge, from
   the template columns. The text column is deliberately off-centre, so the
   usual translateX(-50%) trick overhangs the page by the rail's width. */
.article { --content-offset: max(var(--gutter), 50vw - var(--measure) / 2); }
@media (min-width: 62.0625rem) {
    .article { --content-offset: calc(50vw + var(--rail) / 2 - var(--measure) / 2 + var(--space-4) / 2); }
    .article.page, .article.no-rail { --content-offset: calc(50vw - var(--rail) / 2 - var(--measure) / 2 - var(--space-4) / 2); }
}
/* No :where() here: `.post-content figure { margin-inline: 0 }` outranks a
   zero-specificity rule and the breakout silently never happens. */
.post-content > .kg-width-wide, .post-content > .kg-width-full { max-width: none; }
.post-content > .kg-width-wide { width: calc(var(--rail) + var(--space-4) + var(--measure)); margin-inline-start: calc(-1 * (var(--rail) + var(--space-4))); }
.article.page .post-content > .kg-width-wide, .article.no-rail .post-content > .kg-width-wide { width: 100%; margin-inline-start: 0; }
@media (max-width: 62rem) { .post-content > .kg-width-wide { width: 100%; margin-inline-start: 0; } }
.post-content > .kg-width-full { width: 100vw; margin-inline-start: calc(-1 * var(--content-offset)); }
.post-content > .kg-width-full img, .post-content > .kg-width-wide img { width: 100%; height: auto; }

/* ========================================================== 9. CARDS ===== */

.post-content :where(.kg-card) { margin-block: var(--space-3); }

/* The note. Their posts end with "what I took from it"; a callout is how that
   gets written in the editor, so it is set as a ruled note in the margin colour. */
.post-content :where(.kg-callout-card) {
    border-radius: 2px; border-left: 3px solid var(--mark);
    background: var(--surface); padding: var(--space-2) var(--space-3);
    font-size: var(--s0);
}
.post-content :where(.kg-callout-card .kg-callout-text) { color: var(--ink); font-family: var(--serif); font-style: italic; }
.post-content :where(.kg-button-card .kg-btn, .kg-signup-card .kg-signup-card-button, .kg-header-card .kg-header-card-button) { background: var(--mark) !important; color: var(--mark-ink) !important; border-radius: 2px; font-weight: 600; }
.post-content :where(.kg-toggle-card) { border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); }
.post-content :where(.kg-toggle-heading-text) { font-family: var(--serif); font-weight: 600; }
/* Audio. Ghost paints this card white with dark text but leaves its buttons on
   the UA default (ButtonText), which is white once the page is color-scheme:
   dark, so play/pause/mute/speed vanished. Set it in the notebook palette and
   make every control take the card's colour. No :where(): cards.min.css loads
   after this sheet and would win a specificity tie. */
.post-content .kg-audio-card { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; box-shadow: none; }
.post-content .kg-audio-card button, .post-content .kg-audio-card input[type="range"] { color: inherit; }
.post-content .kg-audio-time { color: var(--ink-45); }
.post-content :where(.kg-bookmark-container) { border: 1px solid var(--rule); border-radius: 2px; color: inherit; text-decoration: none; }
.post-content :where(.kg-bookmark-title) { font-family: var(--serif); font-weight: 600; }
.post-content :where(.kg-bookmark-description, .kg-bookmark-metadata) { color: var(--ink-70); }
.post-content :where(.kg-header-card, .kg-product-card) { border-radius: 2px; }
.gh-post-upgrade-cta { border-block: 1px solid var(--rule); padding-block: var(--space-3); margin-block: var(--space-4); }
.gh-post-upgrade-cta-content { background: none !important; color: var(--ink) !important; padding: 0 !important; }
.gh-post-upgrade-cta h2 { font-family: var(--serif); }
.gh-post-upgrade-cta .gh-btn { background: var(--mark) !important; color: var(--mark-ink) !important; border-radius: 2px; }

/* ========================================================== 10. PRINT ===== */

@media print {
    body { background: #fff; color: #000; font-size: 11pt; }
    .site-nav, .skip, .pagination, .site-foot, .site-actions, .reading, .rail-elsewhere, .read-next { display: none !important; }
    .canvas { display: block; }
    .post-content > *, .post-head, .rail { max-width: none; }
    .rule-double { display: none; }
    .rail { border-block: 1pt solid #999; padding-block: 6pt; margin-bottom: 12pt; }
    .rail dl { display: block; }
    .rail dt { display: inline; font-size: 8pt; }
    .rail dd { display: inline; margin: 0 1em 0 0.4em; }
    .post-content a[href^="http"]::after { content: " <" attr(href) ">"; font-family: monospace; font-size: 0.8em; word-break: break-all; }
    h1, h2, h3 { break-after: avoid-page; }
    p, li, blockquote { orphans: 3; widows: 3; }
    figure, pre, table { break-inside: avoid-page; }
}