/* ==========================================================================
   Latch journal — Ghost theme stylesheet
   Brand: latch design/brand-kit (README § Tokens) and the new design of record
   (GRAPHICS/Latch Protocol/screenshots). Dark by default; the light theme is
   derived from the same tokens and keeps 4.5:1 for text.

   Contents
     1. Fonts (self-hosted, SIL OFL 1.1 — assets/fonts/OFL-*.txt)
     2. Tokens (dark default, light)
     3. Base
     4. Primitives: wrap, eyebrow, label, chip, buttons, grid ground
     5. Header, navigation, theme toggle, mobile menu
     6. Hero, golem
     7. Feed: lead post, post grid, cards, pagination, empty state
     8. Archive heads (tag, author)
     9. Article: header, feature image, content, footer, share, subscribe
    10. Ghost content + Koenig cards
    11. Footer
    12. Motion (only under prefers-reduced-motion: no-preference)
   ========================================================================== */

/* 1. Fonts ================================================================ */
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 2. Tokens =============================================================== */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* kit table */
    --latch-blue: #2b8bff;
    --deep-blue: #0a63e0;
    --signal-blue: #4a9bff;
    --void: #04060c;
    --success: #5fd39a;

    /* surfaces */
    --ground: #04060c;            /* Void: the page */
    --ground-card: #0a0f1a;       /* the new design's card ground */
    --grid-line: #0c172a;         /* 1 px hairline every 48 px on the card ground */
    --panel: #070c17;             /* Panel */
    --panel-2: #0a1222;
    --panel-grad: linear-gradient(180deg, #0a1222 0%, #070c17 60%);
    --header-bg: rgba(4, 6, 12, 0.86);
    --hairline: #16223a;          /* Hairline */
    --border: #1b2942;
    --border-strong: #24314c;
    --border-hover: #25528f;
    --chip-border: #1c3a68;

    /* ink */
    --ink: #e4ecf9;               /* Ink */
    --ink-bright: #ffffff;
    --muted: #8a9bb6;             /* Muted */
    --label: #7a88a1;             /* the cards' muted-blue mono label */
    --accent: #2b8bff;            /* Latch Blue */
    --accent-ink: #4a9bff;        /* links: Signal Blue */
    --accent-hover: #8fc2ff;
    --eyebrow: #3f8ff0;
    --headline-accent: #2b8bff;
    --on-accent: #04060c;
    --btn-hover: #4a9bff;
    --code-inline: #8fc2ff;
    --accent-soft: rgba(43, 139, 255, 0.1);
    --glow: rgba(26, 127, 255, 0.18);
    --golem-disc: transparent;
    --selection: #173768;

    /* code blocks are dark in both themes */
    --code-ground: #05080f;
    --code-border: #16223a;
    --code-ink: #e4ecf9;

    /* type */
    --font-display: var(--gh-font-heading, "Chakra Petch"), ui-sans-serif, system-ui, sans-serif;
    --font-body: var(--gh-font-body, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* layout */
    --wrap: 1312px;
    --gutter: 64px;
    --measure: 720px;
    --header-h: 76px;
    --chamfer: 10px;

    /* motion */
    --dur: 160ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

    --ground: #f6f8fc;
    --ground-card: #eef2f8;
    --grid-line: #e1e8f2;
    --panel: #ffffff;
    --panel-2: #f2f5fa;
    --panel-grad: #ffffff;
    --header-bg: rgba(246, 248, 252, 0.9);
    --hairline: #dde4ef;
    --border: #dde4ef;
    --border-strong: #b9c5d8;
    --border-hover: #7c90b0;
    --chip-border: #b9c5d8;

    --ink: #0b1424;
    --ink-bright: #04060c;
    --muted: #4b5c78;
    --label: #56698a;
    --accent: #0a63e0;            /* Deep Blue: Latch Blue fails 4.5:1 on light grounds */
    --accent-ink: #0a5fd6;
    --accent-hover: #084aae;
    --eyebrow: #0a5ccf;
    --headline-accent: #0a63e0;
    --on-accent: #ffffff;
    --btn-hover: #084aae;
    --code-inline: #0850bf;
    --accent-soft: #dce9ff;
    --glow: rgba(10, 99, 224, 0.14);
    --golem-disc: #04060c;        /* the renders are dark-ground art: sit them on a Void disc */
    --selection: #cfe0fb;
}

@media (max-width: 900px) {
    /* same specificity as the theme blocks above, so this wins in both themes */
    :root,
    :root[data-theme] {
        --gutter: 20px;
        --header-h: 68px;
    }
}

/* 3. Base ================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.site-main {
    flex: 1 0 auto;
}

::selection {
    background: var(--selection);
}

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

img {
    height: auto;
}

a {
    color: var(--accent-ink);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    color: var(--ink-bright);
    text-wrap: balance;
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

/* Theme-paired images: the kit's dark-ground and -onlight files. */
:root[data-theme="light"] .only-dark,
:root:not([data-theme="light"]) .only-light {
    display: none !important;
}

.mono {
    font-family: var(--font-mono);
}

.dot {
    margin: 0 8px;
    color: var(--label);
}

/* 4. Primitives =========================================================== */
.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Mono section eyebrow: blue, tracked. --square prefixes the kit square. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    text-decoration: none;
}

a.eyebrow:hover {
    color: var(--accent-hover);
}

.eyebrow--square::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--accent);
}

.label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--label);
}

.lede {
    margin: 0;
    max-width: 38em;
    font-size: 20px;
    line-height: 1.55;
    color: var(--muted);
}

.accent {
    color: var(--headline-accent);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--chip-border);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--code-inline);
    text-decoration: none;
    white-space: nowrap;
}

.chip--accent {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.chip--muted {
    color: var(--muted);
    border-color: var(--border-strong);
}

.chip--link {
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip--link:hover {
    border-color: var(--accent);
    color: var(--ink-bright);
}

/* Buttons: primary = the chamfered Latch Blue; outline = sharp 1 px Latch Blue. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ink-bright);
    font: 500 15px/1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.btn--sm {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
    clip-path: polygon(
        var(--chamfer) 0,
        100% 0,
        100% calc(100% - var(--chamfer)),
        calc(100% - var(--chamfer)) 100%,
        0 100%,
        0 var(--chamfer)
    );
}

.btn--primary:hover {
    background: var(--btn-hover);
    color: var(--on-accent);
}

.btn--primary:focus-visible {
    outline: 2px solid var(--on-accent);
    outline-offset: -5px;
}

.btn--outline {
    border-color: var(--accent);
}

.btn--outline:hover {
    background: var(--accent-soft);
}

.btn--ghost {
    color: var(--muted);
    padding-inline: 10px;
}

.btn--ghost:hover {
    color: var(--ink-bright);
}

.icon {
    display: block;
    flex: none;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.icon-btn:hover {
    color: var(--ink-bright);
    border-color: var(--border-hover);
}

/* The new design's card ground: #0A0F1A with a 1 px hairline every 48 px. */
.grid-ground {
    position: relative;
    background-color: var(--ground-card);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: 0 0;
    border-bottom: 1px solid var(--hairline);
}

/* 5. Header =============================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    border-bottom: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: var(--header-h);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: none;
}

.brand-lockup {
    display: block;
    line-height: 0;
}

/* The kit's compact lockup (1562:420), as the design header draws it.
   Kit minimum: lockup 120 px wide, i.e. at least 33 px tall. */
.brand-lockup img {
    width: auto;
    height: 44px;
}

.site-name {
    padding-left: 18px;
    border-left: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.site-name:hover {
    color: var(--ink-bright);
}

.site-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.nav {
    display: flex;
    flex-wrap: nowrap; /* one row, always: below the header breakpoint the menu moves into the sheet instead */
    white-space: nowrap;
    gap: 4px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav a {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

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

.nav .is-current a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
}

.site-nav__mobile-extra {
    display: none;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: none;
}

.site-header__members {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
}

.theme-toggle__btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--label);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.theme-toggle__btn + .theme-toggle__btn {
    border-left: 1px solid var(--border);
}

.theme-toggle__btn:hover {
    color: var(--ink-bright);
}

.theme-toggle__btn[aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.theme-toggle__btn:focus-visible {
    outline-offset: -2px;
}

.menu-toggle {
    display: none;
}

.menu-toggle .icon--close,
body.menu-open .menu-toggle .icon--menu {
    display: none;
}

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

@media (max-width: 1100px) {
    .site-header__members {
        display: none;
    }
    .site-nav__mobile-extra .site-nav__members {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }
}

/* The header switches to the menu sheet at 1180px: the full menu, the lockup and the actions need about
   that much room on one row, and a menu that wraps onto a second or third line is never acceptable. */
@media (max-width: 1180px) {
    .site-header__inner {
        gap: 16px;
    }
    .brand-lockup img {
        height: 36px;
    }
    .site-name {
        display: none;
    }
    .menu-toggle {
        display: inline-grid;
    }
    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 20px var(--gutter) 28px;
        background: var(--ground);
        border-bottom: 1px solid var(--hairline);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    }
    body.menu-open .site-nav {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .nav {
        flex-direction: column;
        gap: 0;
    }
    .nav a {
        display: block;
        padding: 12px 0;
        font-size: 17px;
        border-bottom: 1px solid var(--hairline);
    }
    .nav .is-current a::after {
        display: none;
    }
    .site-nav__mobile-extra {
        display: block;
        margin-top: 20px;
    }
    .site-header__cta {
        display: none;
    }
}

@media (max-width: 420px) {
    .site-header__actions {
        gap: 8px;
    }
    .theme-toggle__btn {
        width: 30px;
    }
}

/* 6. Hero ================================================================= */
.hero {
    overflow: hidden;
}

.hero::before {
    /* the Latch Blue glow behind the figure */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(640px 420px at 76% 50%, var(--glow), transparent 70%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 48px;
    padding-block: 88px 96px;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

.hero__title {
    margin: 0;
    font-size: clamp(52px, 7.4vw, 108px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero__line {
    display: block;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

.hero__figure {
    display: flex;
    justify-content: center;
}

.hero--error .hero__inner {
    min-height: calc(100vh - var(--header-h) - 200px);
}

.error-details {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 14px;
}

/* Golem ------------------------------------------------------------------ */
.golem-frame {
    position: relative;
    width: min(100%, 460px);
    margin: 0;
    padding: 44px 36px 32px;
}

.golem-frame--brackets {
    --b: var(--accent);
    --l: 26px;
    --t: 1.5px;
    background:
        linear-gradient(var(--b), var(--b)) top left / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) top left / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) top right / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) top right / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left / var(--t) var(--l) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--t) no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / var(--t) var(--l) no-repeat;
}

.golem-frame__label {
    position: absolute;
    top: 16px;
    left: 36px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--label);
}

.golem-halo {
    position: relative;
    isolation: isolate;
}

.golem-halo::before {
    content: "";
    position: absolute;
    inset: 6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(26, 127, 255, 0.18), transparent 72%);
}

.golem-disc {
    border-radius: 50%;
    background: var(--golem-disc);
    overflow: hidden;
    aspect-ratio: 1;
}

.golem {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-block: 56px 64px;
    }
    .golem-frame {
        width: min(70vw, 280px);
        padding: 36px 24px 20px;
    }
    .golem-frame__label {
        left: 24px;
        top: 12px;
    }
    .lede {
        font-size: 17px;
    }
    .hero--error .hero__inner {
        min-height: 0;
    }
}

/* 7. Feed ================================================================= */
.feed {
    padding-block: 72px 112px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 72px 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}

.section-head:has(+ .post-grid:not(:has(.card))),
.post-grid:not(:has(.card)) {
    display: none;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1060px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
    .feed {
        padding-block: 40px 72px;
    }
}

/* Card */
.card {
    min-width: 0;
}

.card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--hairline);
    background: var(--panel-grad);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card__link:hover {
    border-color: var(--border-hover);
}

.card__media,
.lead__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--ground-card);
    border-bottom: 1px solid var(--hairline);
}

.card__media img,
.lead__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}

.card__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
}

.card__placeholder img {
    width: auto;
    height: 34%;
    min-height: 40px;
    opacity: 0.55;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 22px 24px 24px;
}

.card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card__chips:empty {
    display: none;
}

.card__title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.22;
    transition: color var(--dur) var(--ease);
}

.card__link:hover .card__title {
    color: var(--accent-ink);
}

.card__excerpt {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto 0 0;
    padding-top: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--label);
}

/* Lead */
.lead__link {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    border: 1px solid var(--hairline);
    background: var(--panel-grad);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease);
}

.lead__link:hover {
    border-color: var(--border-hover);
}

.lead__media {
    aspect-ratio: auto;
    min-height: 360px;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
}

.lead__media > img {
    position: absolute;
    inset: 0;
}

.lead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px 40px 36px;
}

.lead__title {
    margin: 4px 0 0;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    transition: color var(--dur) var(--ease);
}

.lead__link:hover .lead__title {
    color: var(--accent-ink);
}

.lead__excerpt {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.lead__body .card__meta {
    margin-top: auto;
}

.lead__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-ink);
    font-weight: 500;
    font-size: 15px;
}

@media (max-width: 900px) {
    .lead__link {
        grid-template-columns: 1fr;
    }
    .lead__media {
        aspect-ratio: 16 / 9;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--hairline);
    }
    .lead__body {
        padding: 24px;
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
}

.pagination__count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--label);
}

.pagination__spacer {
    width: 96px;
}

/* Empty state */
.empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 48px;
    border: 1px solid var(--hairline);
    background: var(--panel-grad);
}

.empty__text {
    margin: 0;
    max-width: 36em;
    color: var(--muted);
}

/* 8. Archive heads ======================================================== */
.archive-head__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: 72px 64px;
}

.archive-head__inner--author {
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

.archive-head__inner--author > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.archive-head__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-strong);
}

.archive-head__title {
    margin: 0;
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
}

.archive-head__count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--label);
}

.archive-head__count a {
    color: var(--accent-ink);
}

@media (max-width: 640px) {
    .archive-head__inner--author {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 9. Article ============================================================== */
.article {
    padding-top: 64px;
}

.article__header {
    width: min(100% - 2 * var(--gutter), var(--measure));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.article__title {
    margin: 0;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.01em;
}

.article__lede {
    margin: 0;
    font-size: 21px;
    line-height: 1.55;
    color: var(--muted);
}

.article__meta {
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
}

.byline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.byline__avatars {
    display: flex;
}

.avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: var(--panel);
}

.avatar + .avatar {
    margin-left: -10px;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar img[src$=".svg"] {
    object-fit: contain;
    padding: 8px;
}

.byline__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.byline__names {
    font-weight: 500;
    color: var(--ink-bright);
}

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

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

.byline__facts {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--label);
}

.article__image {
    width: min(100% - 2 * var(--gutter), 1080px);
    margin: 48px auto 0;
}

.article__image img {
    display: block;
    width: 100%;
    border: 1px solid var(--hairline);
}

.article__image figcaption {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--label);
    text-align: center;
}

.article__content {
    margin-top: 48px;
}

.article__footer {
    width: min(100% - 2 * var(--gutter), var(--measure));
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--hairline);
}

.article__tags,
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.article__tags .label,
.share .label {
    min-width: 72px;
}

.share__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
    font: 500 14px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.share__link:hover {
    border-color: var(--accent);
    color: var(--ink-bright);
}

.share__link[hidden] {
    display: none;
}

.subscribe {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px;
    border: 1px solid var(--hairline);
    background: var(--panel-grad);
}

.subscribe__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink-bright);
}

.subscribe__text {
    margin: 0 0 6px;
    color: var(--muted);
}

.article__comments {
    width: min(100% - 2 * var(--gutter), var(--measure));
    margin: 56px auto 0;
}

/* The comments app is an iframe with its own (light) colour scheme. An iframe whose
   scheme differs from its parent element's gets an opaque white canvas, so give it
   the normal scheme and let the app draw on the page ground. */
.article__comments iframe {
    color-scheme: normal;
}

.related {
    padding-block: 32px 112px;
}

.related .section-head {
    margin-top: 56px;
}

.article--page {
    padding-bottom: 96px;
}

/* Reading progress */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 3px;
    pointer-events: none;
}

.read-progress__bar {
    display: block;
    height: 100%;
    background: var(--latch-blue);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* 10. Ghost content + Koenig cards ======================================== */
/* The content grid: text on "main", kg-width-wide on "wide", kg-width-full edge to edge. */
.gh-content {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, 160px)
        [main-start] min(var(--measure), 100% - 2 * var(--gutter))
        [main-end] minmax(0, 160px)
        [wide-end] minmax(var(--gutter), 1fr)
        [full-end];
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink);
}

.gh-content > * {
    grid-column: main-start / main-end;
    margin: 0;
    min-width: 0;
}

.gh-content > * + * {
    margin-top: 1.4em;
}

.gh-content > .kg-width-wide {
    grid-column: wide-start / wide-end;
}

.gh-content > .kg-width-full {
    grid-column: full-start / full-end;
}

.kg-width-full img {
    width: 100%;
}

.gh-content > h2,
.gh-content > h3,
.gh-content > h4 {
    margin-top: 2em;
}

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

.gh-content h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
}

.gh-content h3 {
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
}

.gh-content h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.gh-content h5,
.gh-content h6 {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.kg-file-card-container):not([class*="kg-"]) {
    color: var(--accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur) var(--ease);
}

.gh-content a:not([class*="kg-"]):hover {
    color: var(--accent-hover);
}

.gh-content strong {
    color: var(--ink-bright);
    font-weight: 600;
}

.gh-content ul,
.gh-content ol {
    padding-left: 1.4em;
}

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

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

.gh-content ol li::marker {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--accent-ink);
}

.gh-content hr {
    height: 1px;
    margin-block: 2.6em;
    border: 0;
    background: var(--hairline);
    overflow: visible;
    position: relative;
}

.gh-content hr::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3.5px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--accent);
}

.gh-content blockquote:not([class]) {
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--accent);
    color: var(--ink-bright);
    font-size: 20px;
    line-height: 1.6;
}

.gh-content blockquote.kg-blockquote-alt {
    padding: 8px 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-bright);
}

.gh-content code {
    padding: 0.12em 0.4em;
    border: 1px solid var(--hairline);
    background: var(--panel-2);
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--code-inline);
}

.gh-content pre {
    padding: 22px 24px;
    border: 1px solid var(--code-border);
    background: var(--code-ground);
    color: var(--code-ink);
    font-family: var(--font-mono);
    font-size: 14.5px;
    line-height: 1.65;
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

.gh-content pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    color: inherit;
}

.gh-content table:not([class]) {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.gh-content table:not([class]) th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-strong);
    background: var(--panel-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: left;
    text-transform: uppercase;
    color: var(--label);
    white-space: nowrap;
}

.gh-content table:not([class]) td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.gh-content figure img {
    display: block;
    margin-inline: auto;
}

.gh-content figcaption {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--label);
    text-align: center;
}

.gh-content figcaption a {
    color: var(--accent-ink);
}

.kg-width-full figcaption {
    padding-inline: var(--gutter);
}

/* Koenig: Ghost injects the card layout (card_assets); these rules put the
   cards on the Latch grounds, hairlines and type. */
.kg-image-card:not(.kg-width-full) img {
    border: 1px solid var(--hairline);
}

.kg-gallery-image img {
    border: 0;
}

.kg-bookmark-card .kg-bookmark-container {
    border: 1px solid var(--hairline);
    border-radius: 0;
    background: var(--panel-grad);
    color: var(--ink);
    transition: border-color var(--dur) var(--ease);
}

.kg-bookmark-card .kg-bookmark-container:hover {
    border-color: var(--border-hover);
}

.kg-bookmark-card .kg-bookmark-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-bright);
}

.kg-bookmark-card .kg-bookmark-description,
.kg-bookmark-card .kg-bookmark-metadata {
    color: var(--muted);
}

.kg-bookmark-card .kg-bookmark-metadata {
    font-family: var(--font-mono);
    font-size: 12px;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
    border-radius: 0;
}

.kg-callout-card {
    border-radius: 0 !important;
    border-left: 2px solid var(--accent);
}

.kg-callout-card-grey,
.kg-callout-card-white {
    background: var(--panel-2) !important;
}

.kg-callout-card-accent {
    background: var(--accent) !important;
    color: var(--on-accent);
}

.kg-callout-card .kg-callout-text {
    font-size: 17px;
    line-height: 1.6;
}

.kg-toggle-card {
    border: 1px solid var(--hairline) !important;
    border-radius: 0 !important;
    background: var(--panel-grad) !important;
    box-shadow: none !important;
}

.kg-toggle-card .kg-toggle-heading-text {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-bright);
}

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

.kg-button-card .kg-btn,
.kg-product-card .kg-product-card-button,
.kg-header-card .kg-header-card-button,
.kg-cta-card .kg-cta-button {
    border-radius: 0 !important;
    font-family: var(--font-body);
    font-weight: 500;
}

.kg-button-card .kg-btn-accent,
.kg-product-card .kg-product-card-btn-accent {
    background-color: var(--ghost-accent-color, var(--accent));
    color: #ffffff;
    clip-path: polygon(
        var(--chamfer) 0,
        100% 0,
        100% calc(100% - var(--chamfer)),
        calc(100% - var(--chamfer)) 100%,
        0 100%,
        0 var(--chamfer)
    );
}

.kg-product-card .kg-product-card-container,
.kg-file-card .kg-file-card-container,
.kg-audio-card,
.kg-cta-card {
    border: 1px solid var(--hairline) !important;
    border-radius: 0 !important;
    background: var(--panel-grad) !important;
    box-shadow: none !important;
    color: var(--ink);
}

.kg-product-card .kg-product-card-title,
.kg-file-card .kg-file-card-title,
.kg-audio-card .kg-audio-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-bright);
}

.kg-file-card .kg-file-card-caption,
.kg-file-card .kg-file-card-metadata,
.kg-product-card .kg-product-card-description {
    color: var(--muted);
}

.kg-file-card .kg-file-card-metadata {
    font-family: var(--font-mono);
}

.kg-file-card .kg-file-card-container:hover {
    border-color: var(--border-hover) !important;
}

.kg-header-card h2,
.kg-header-card .kg-header-card-heading {
    font-family: var(--font-display);
    font-weight: 700;
}

.kg-header-card .kg-header-card-subheading {
    font-family: var(--font-body);
}

.kg-signup-card {
    border-radius: 0;
}

.kg-signup-card .kg-signup-card-heading {
    font-family: var(--font-display);
    font-weight: 700;
}

.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

@media (max-width: 640px) {
    .gh-content {
        font-size: 17px;
    }
    .gh-content h2 {
        font-size: 26px;
    }
    .gh-content h3 {
        font-size: 22px;
    }
    .gh-content pre {
        margin-inline: calc(-1 * var(--gutter));
        border-left: 0;
        border-right: 0;
        font-size: 13.5px;
    }
    .article {
        padding-top: 40px;
    }
    .article__lede {
        font-size: 18px;
    }
}

/* 11. Footer ============================================================== */
.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--hairline);
    background: var(--ground);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
    padding-block: 64px 48px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-mark {
    display: block;
    line-height: 0;
}

/* Kit minimum for the mark: 24 px tall. */
.footer-mark img {
    width: auto;
    height: 44px;
}

.site-footer__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-bright);
}

.site-footer__desc {
    margin: 0;
    max-width: 30em;
    color: var(--muted);
    font-size: 15px;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 32px;
}

.footer-col ul,
.footer-col .nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.footer-col a,
.footer-col .nav a {
    padding: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    border: 0;
}

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

.footer-col .nav .is-current a::after {
    display: none;
}

.site-footer__base {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px 28px;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--label);
}

.site-footer__base a {
    color: var(--label);
    text-decoration: none;
}

.site-footer__base a:hover {
    color: var(--ink-bright);
}

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-block: 48px 32px;
    }
}

@media (max-width: 900px) {
    .footer-col .nav {
        flex-direction: column;
    }
    .footer-col .nav a {
        display: inline;
        padding: 0;
        font-size: 15px;
        border: 0;
    }
}

/* 12. Motion ============================================================== */
/* Everything that moves lives here, and only when the reader has not asked
   for reduced motion. The golem: a slow float on a sine and a Latch Blue glow
   that breathes in phase (same vocabulary as apps/web Golem.module.css);
   transform and opacity only, so nothing around it reflows. */
@media (prefers-reduced-motion: no-preference) {
    .golem {
        --golem-float: 8px;
        animation: golem-float 3s ease-in-out infinite alternate;
        will-change: transform;
    }

    .golem-halo::before {
        background: radial-gradient(closest-side, rgba(26, 127, 255, 0.243), transparent 72%);
        animation: golem-breathe 3s ease-in-out infinite alternate;
    }

    .card__link:hover {
        transform: translateY(-3px);
    }

    .card__link:hover .card__media img,
    .lead__link:hover .lead__media > img {
        transform: scale(1.03);
    }

    .reveal {
        animation: reveal 650ms var(--ease) both;
    }
}

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

@media (max-width: 900px) {
    .golem {
        --golem-float: 5px;
    }
}

@keyframes golem-float {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, calc(-1 * var(--golem-float)), 0);
    }
}

@keyframes golem-breathe {
    from {
        opacity: 0.48;
    }
    to {
        opacity: 1;
    }
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Navigation icons (owner, 2026-09-28: "add icons to all navigation menu"). Every header, mobile-menu and
   footer link carries one; the icon inherits the link colour and stays decorative (aria-hidden). */
.nav a,
.footer-col a,
.site-footer__base a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.nav a .icon,
.footer-col a .icon,
.site-footer__base a .icon {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.nav a:hover .icon,
.footer-col a:hover .icon { opacity: 1; }
.icon--mark { object-fit: contain; }