/* ==========================================================================
   Chayka — Ghost theme
   Type:  Raceway (wordmark) · Golos Text (UI/headings) · Lora (body) · IBM Plex Mono (meta)
   Color: warm paper #F5F0E6 · navy #22293D · sea #135372 · brass #8D5E00
   ========================================================================== */

@font-face {
    font-family: 'Raceway';
    src: url('../fonts/raceway.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/golos-text-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lora-italic-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lora-italic-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lora-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/lora-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-regular-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-regular-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-regular-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --paper:        oklch(0.96 0.012 85);
    --paper-2:      oklch(0.925 0.014 85);
    --rule:         oklch(0.86 0.015 85);
    --ink:          oklch(0.24 0.03 250);
    --ink-2:        oklch(0.32 0.02 250);
    --ink-3:        oklch(0.48 0.02 250);
    --navy:         oklch(0.28 0.03 250);
    --navy-deep:    oklch(0.22 0.02 250);
    --sea:          oklch(0.42 0.08 235);
    --brass:        oklch(0.52 0.11 75);
    --brass-light:  oklch(0.95 0.06 82);
    --on-navy:      oklch(0.92 0.01 250);
    --white:        oklch(0.99 0.008 85);

    --sans: 'Golos Text', system-ui, sans-serif;
    --serif: 'Lora', Georgia, serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --display: 'Raceway', 'Golos Text', sans-serif;

    --wrap: 808px;
    --prose: 760px;
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--sea); text-decoration: none; }
a:hover { color: var(--brass); }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }

/* --- buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 14px;
    border-radius: 2px;
    border: 1px solid transparent;
}
.btn-ghost { border-color: var(--brass-light); color: var(--brass-light); }
.btn-ghost:hover { background: var(--brass-light); color: var(--navy-deep); }
.btn-brass { background: var(--brass-light); color: oklch(0.28 0.06 60); padding: 11px 20px; font-size: 15px; }
.btn-brass:hover { color: oklch(0.2 0.05 60); }
.btn-brass-outline { border-color: var(--brass); color: var(--brass); padding: 10px 18px; font-size: 14px; }
.btn-brass-outline:hover { background: var(--brass); color: var(--paper); }

/* --- site bar ----------------------------------------------------------- */

.site-bar { background: var(--navy); }
.site-bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}
.site-bar-mark {
    font-family: var(--display);
    font-size: 26px;
    line-height: 1;
    color: var(--white);
}
.site-bar-mark:hover { color: var(--brass-light); }
.site-bar-actions { display: flex; gap: 12px; align-items: center; }

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-navy); }
.nav a:hover, .nav .nav-current a { color: var(--brass-light); }

/* --- hero (home) -------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    background: var(--navy);
}
.hero-photo {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 560px;
}
.hero[data-hero-height="short"] { min-height: 220px; }
.hero-photo[data-hero-height="short"] {
    min-height: 380px;
}
.hero-photo[data-hero-height="short"] .hero-inner { padding-bottom: 44px; }
.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        oklch(0.14 0.02 70 / 0.86) 0,
        oklch(0.2 0.03 250 / 0.78) 280px,
        oklch(0.2 0.03 250 / 0.3) 340px,
        oklch(0.2 0.03 250 / 0) 420px);
}
.hero-inner {
    position: relative;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 44px;
    text-align: center;
}
.hero-photo .hero-inner { padding-bottom: 88px; }
.hero-eyebrow {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass-light);
}
.hero-mark {
    margin: 12px 0 0;
    font-family: var(--display);
    font-size: 78px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--white);
}

/* --- meta / byline ------------------------------------------------------ */

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.meta-tag { color: var(--brass); }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: oklch(0.78 0.02 85); }
.meta-date { font-weight: 500; color: var(--ink-3); }

.meta-on-photo .meta-tag { color: var(--brass-light); }
.meta-on-photo .meta-dot { background: var(--brass-light); }
.meta-on-photo .meta-date { color: var(--on-navy); }

.byline {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--ink-3);
}
.byline a { font-weight: 600; }
.byline-on-photo { color: var(--on-navy); }
.byline-on-photo a { color: var(--brass-light); }

/* --- home: lede post ---------------------------------------------------- */

.lede { padding: 56px 0 48px; border-bottom: 1px solid var(--rule); }
.lede-title {
    margin: 12px 0 0;
    font-size: 36px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}
.lede-title a { color: var(--ink); }
.lede-title a:hover { color: var(--sea); }
.lede-excerpt {
    margin: 18px 0 0;
    max-width: var(--prose);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.68;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* --- home: photo cards -------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 40px;
    padding: 48px 0;
}
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-media {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 2;
    padding: 20px;
    background-size: cover;
    background-position: center;
}
.card-media-empty {
    background-image: repeating-linear-gradient(135deg,
        oklch(0.88 0.02 85) 0 10px, oklch(0.845 0.02 85) 10px 20px);
}
.card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        oklch(0.2 0.03 250 / 0.94) 0%,
        oklch(0.2 0.03 250 / 0.86) 52%,
        oklch(0.2 0.03 250 / 0.06) 88%);
}
.card-meta {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-light);
}
.card-title {
    position: relative;
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.24;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--white);
    text-wrap: pretty;
}
.card-excerpt {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* --- post list (dated rows) --------------------------------------------- */

.post-list { border-top: 1px solid var(--rule); }
.post-list-flush { border-top: 0; }
.row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.row-date { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.26;
    font-weight: 500;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}
.row-title a { color: var(--ink); }
.row-title a:hover { color: var(--sea); }
.row-excerpt {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* --- pagination --------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0 64px;
}
.page-number { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.newer-posts, .older-posts {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 18px;
    border-radius: 2px;
    border: 1px solid var(--brass);
    color: var(--brass);
}
.newer-posts:hover, .older-posts:hover { background: var(--brass); color: var(--paper); }

/* --- archive heads ------------------------------------------------------ */

.archive-head { padding: 56px 24px 24px; }
.archive-kicker {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass);
}
.archive-title {
    margin: 12px 0 0;
    font-size: 40px;
    line-height: 1.16;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.archive-desc {
    margin: 14px 0 0;
    max-width: var(--prose);
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2);
    text-wrap: pretty;
}
.error-page { padding: 40px 24px 96px; }

/* --- post --------------------------------------------------------------- */

.post-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--navy);
    min-height: 220px;
}
.post-hero.hero-photo {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 560px;
}
.post-hero-inner {
    position: relative;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 44px;
}
.post-hero.hero-photo .post-hero-inner { padding-bottom: 88px; }
.post-title {
    margin: 16px 0 0;
    max-width: 900px;
    font-size: 44px;
    line-height: 1.14;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--white);
    text-wrap: pretty;
}

.prose {
    max-width: var(--prose);
    padding-top: 48px;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.72;
    color: oklch(0.3 0.02 250);
}
.prose > p { margin: 0 0 24px; text-wrap: pretty; }
.prose-lede {
    font-size: 21px;
    line-height: 1.62;
    color: oklch(0.26 0.02 250);
}
.prose h2, .prose h3, .prose h4 {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: pretty;
}
.prose h2 { margin: 40px 0 16px; font-size: 26px; line-height: 1.26; }
.prose h3 { margin: 32px 0 12px; font-size: 26px; line-height: 1.26; }
.prose h4 { margin: 28px 0 10px; font-size: 19px; line-height: 1.35; }
.prose ul, .prose ol { margin: 0 0 26px; padding-left: 24px; }
.prose li { margin-bottom: 10px; text-wrap: pretty; }
.prose blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--brass);
    font-style: italic;
    font-size: 21px;
    line-height: 1.6;
    color: oklch(0.34 0.03 250);
}
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }
.prose code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--paper-2);
    padding: 2px 5px;
}
.prose pre {
    margin: 0 0 26px;
    padding: 18px 20px;
    overflow-x: auto;
    background: var(--navy-deep);
    color: var(--on-navy);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
}
.prose pre code { background: none; padding: 0; color: inherit; }

/* Koenig cards */
.prose figure, .prose .kg-card { margin: 32px 0; }
.prose figcaption, .prose .kg-image-card figcaption {
    margin: 10px 0 0;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-3);
    text-align: left;
}
.kg-width-wide { width: min(calc(var(--wrap) - 48px), calc(100vw - 48px)); }
.kg-width-full { width: 100vw; margin-left: min(calc(var(--wrap) / 2 - 24px - 50vw), -24px); }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image img { display: block; width: 100%; height: auto; }
.kg-gallery-image img.is-zoomable, .prose .kg-image-card img.is-zoomable { cursor: zoom-in; }

/* Lightbox */
html.lightbox-lock { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: oklch(0.16 0.03 250 / 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
}
.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 112px);
    width: auto;
    height: auto;
    background: var(--navy-deep);
    box-shadow: 0 24px 64px oklch(0 0 0 / 0.45);
    cursor: zoom-out;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.lightbox-img.is-loaded { opacity: 1; transform: scale(1); }
.lightbox-caption {
    margin-top: 16px;
    max-width: 640px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--on-navy);
    text-align: center;
}
.lightbox-caption[hidden] { display: none; }
.lightbox-close, .lightbox-nav {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--on-navy);
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { opacity: 1; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 1px solid var(--on-navy); outline-offset: 2px; }
.lightbox-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
}
.lightbox-nav {
    top: 50%;
    width: 56px;
    height: 56px;
    transform: translateY(-50%);
    font-size: 32px;
    line-height: 1;
}
.lightbox-prev { left: 4px; }
.lightbox-next { right: 4px; }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 640px) {
    .lightbox { padding: 40px 16px; }
    .lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
    .lightbox-prev { left: -4px; }
    .lightbox-next { right: -4px; }
}

.kg-bookmark-card { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.kg-bookmark-container { display: flex; min-height: 148px; color: inherit; }
.kg-bookmark-container:hover { color: inherit; }
.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 20px;
}
.kg-bookmark-title { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.kg-bookmark-description {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-3);
}
.kg-bookmark-icon { width: 18px; height: 18px; }
.kg-bookmark-author { color: var(--ink-3); }
.kg-bookmark-publisher::before { content: '·'; margin-right: 8px; }
.kg-bookmark-thumbnail { flex: 0 0 220px; background: var(--paper-2); }
.kg-bookmark-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* tags, author, prev/next, cta */

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: var(--prose);
    margin: 40px 0 0;
}
.tag-chip {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border: 1px solid oklch(0.82 0.02 85);
    border-radius: 2px;
    color: var(--ink-2);
}
.tag-chip:hover { border-color: var(--brass); color: var(--brass); }

.author-box {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    max-width: var(--prose);
    margin: 40px 0 0;
    padding: 24px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-avatar-empty {
    display: block;
    background-image: repeating-linear-gradient(135deg,
        oklch(0.88 0.02 85) 0 8px, oklch(0.845 0.02 85) 8px 16px);
}
.author-name { font-size: 16px; font-weight: 600; }
.author-bio {
    margin: 4px 0 0;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    text-wrap: pretty;
}

.post-comments {
    max-width: var(--prose);
    margin: 40px 0 0;
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 24px;
    margin: 40px 0 64px;
}
.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--paper-2);
}
.post-nav-next { text-align: right; }
.post-nav-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.post-nav-title {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: pretty;
}
.post-nav-link:hover .post-nav-title { color: var(--sea); }

.post-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 64px;
    padding: 28px 32px;
    background: var(--navy);
}
.post-cta p {
    margin: 0;
    max-width: 420px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    color: var(--on-navy);
}

/* --- footer ------------------------------------------------------------- */

.site-foot { background: var(--navy-deep); color: oklch(0.85 0.01 250); margin-top: 0; }
.site-foot-top {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0 28px;
}
.site-foot-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.site-foot-note { font-family: var(--serif); font-size: 15px; color: oklch(0.82 0.01 250); }
.site-foot .nav a { color: oklch(0.85 0.01 250); }
.site-foot .nav a:hover { color: var(--brass-light); }
.site-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 26px;
    border-top: 1px solid oklch(0.3 0.02 250);
    font-size: 13px;
    color: oklch(0.72 0.01 250);
}
.site-foot-bottom a { color: inherit; }
.site-foot-bottom a:hover { color: var(--brass-light); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 700px) {
    .hero-mark { font-size: 54px; }
    .lede-title, .post-title, .archive-title { font-size: 32px; }
    .prose { font-size: 18px; }
    .row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .row-date { order: -1; }
    .hero-photo, .post-hero.hero-photo { min-height: 420px; }
    .hero-photo[data-hero-height="short"] { min-height: 340px; }
    .kg-bookmark-container { flex-direction: column-reverse; }
    .kg-bookmark-thumbnail { flex: 0 0 180px; }
}

/* background-attachment: fixed is unreliable on touch devices */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .hero-photo, .post-hero.hero-photo { background-attachment: scroll; }
}