/* ============================================================
   selam — bağımsız metin dergisi
   Kaynak: /Selam/styles.css (sabit klein palette + apple glass +
   modern font pair + orta okuma boyutu).
   --accent customizer'dan inline CSS ile override edilir.
   ============================================================ */

/* ============ TOKENS ============ */
:root {
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body:    "Source Serif 4", Georgia, serif;
    --font-ui:      "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

    --bg:         oklch(98.4% 0.008 80);
    --bg-elev:    oklch(99.5% 0.005 80);
    --bg-side:    oklch(97% 0.010 80);
    --bg-tinted:  oklch(94.5% 0.012 80);
    --ink:        oklch(22% 0.015 60);
    --ink-soft:   oklch(38% 0.012 60);
    --ink-mute:   oklch(56% 0.010 60);
    --ink-faint:  oklch(78% 0.008 60);
    --rule:       oklch(89% 0.010 70);
    --rule-soft:  oklch(93% 0.008 70);

    --accent:     #ff3b1f;
    --accent-on:  oklch(98% 0.008 80);

    --glass-bg:     oklch(99% 0.006 80 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.55);
    --glass-shadow:
        0 1px 0 oklch(100% 0 0 / 0.7) inset,
        0 8px 32px -12px oklch(20% 0.02 60 / 0.18),
        0 1px 2px oklch(20% 0.02 60 / 0.04);

    --read-size:    1.18rem;
    --read-leading: 1.72;
    --read-measure: 40rem;

    --sidebar-w: 296px;
}

[data-theme="dark"] {
    --bg:         oklch(17% 0.012 70);
    --bg-elev:    oklch(21% 0.012 70);
    --bg-side:    oklch(20% 0.012 70);
    --bg-tinted:  oklch(24% 0.012 70);
    --ink:        oklch(95% 0.008 80);
    --ink-soft:   oklch(82% 0.010 80);
    --ink-mute:   oklch(62% 0.010 80);
    --ink-faint:  oklch(40% 0.010 80);
    --rule:       oklch(30% 0.012 70);
    --rule-soft:  oklch(25% 0.012 70);
    --glass-bg:     oklch(22% 0.012 70 / 0.7);
    --glass-border: oklch(60% 0.010 80 / 0.16);
    --glass-shadow:
        0 1px 0 oklch(70% 0.010 80 / 0.08) inset,
        0 8px 32px -12px oklch(0% 0 0 / 0.5);
    --accent-on:  oklch(17% 0.012 70);
}

/* ============ PALETTE: MÜREKKEP (soğuk gri + IKB) ============ */
[data-palette="murekkep"] {
    --bg:         oklch(98% 0.003 250);
    --bg-elev:    oklch(99% 0.002 250);
    --bg-side:    oklch(96% 0.005 250);
    --bg-tinted:  oklch(93% 0.006 250);
    --ink:        oklch(18% 0.020 250);
    --ink-soft:   oklch(35% 0.018 250);
    --ink-mute:   oklch(55% 0.012 250);
    --ink-faint:  oklch(78% 0.008 250);
    --rule:       oklch(88% 0.005 250);
    --rule-soft:  oklch(93% 0.004 250);
    --accent:     #1c4faf;
    --accent-on:  oklch(98% 0.003 250);
    --glass-bg:     oklch(99% 0.003 250 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.55);
    --glass-shadow:
        0 1px 0 oklch(100% 0 0 / 0.7) inset,
        0 8px 32px -12px oklch(18% 0.02 250 / 0.20),
        0 1px 2px oklch(18% 0.02 250 / 0.05);
}

[data-palette="murekkep"][data-theme="dark"] {
    --bg:         oklch(14% 0.020 250);
    --bg-elev:    oklch(18% 0.020 250);
    --bg-side:    oklch(16% 0.020 250);
    --bg-tinted:  oklch(22% 0.022 250);
    --ink:        oklch(94% 0.005 250);
    --ink-soft:   oklch(80% 0.008 250);
    --ink-mute:   oklch(60% 0.008 250);
    --ink-faint:  oklch(40% 0.008 250);
    --rule:       oklch(28% 0.018 250);
    --rule-soft:  oklch(22% 0.022 250);
    --glass-bg:     oklch(20% 0.020 250 / 0.7);
    --glass-border: oklch(60% 0.012 250 / 0.16);
    --glass-shadow:
        0 1px 0 oklch(70% 0.010 250 / 0.08) inset,
        0 8px 32px -12px oklch(0% 0 0 / 0.5);
    --accent-on:  oklch(14% 0.020 250);
}

/* ============ PALETTE: TOPRAK (sıcak sepia + bakır) ============ */
[data-palette="toprak"] {
    --bg:         oklch(96% 0.015 60);
    --bg-elev:    oklch(98% 0.010 60);
    --bg-side:    oklch(94% 0.018 60);
    --bg-tinted:  oklch(90% 0.022 60);
    --ink:        oklch(22% 0.030 40);
    --ink-soft:   oklch(38% 0.024 40);
    --ink-mute:   oklch(55% 0.018 50);
    --ink-faint:  oklch(78% 0.014 50);
    --rule:       oklch(86% 0.012 60);
    --rule-soft:  oklch(92% 0.008 60);
    --accent:     #b8541a;
    --accent-on:  oklch(98% 0.010 60);
    --glass-bg:     oklch(99% 0.008 60 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.55);
    --glass-shadow:
        0 1px 0 oklch(100% 0 0 / 0.7) inset,
        0 8px 32px -12px oklch(22% 0.03 40 / 0.18),
        0 1px 2px oklch(22% 0.03 40 / 0.05);
}

[data-palette="toprak"][data-theme="dark"] {
    --bg:         oklch(16% 0.018 40);
    --bg-elev:    oklch(20% 0.020 40);
    --bg-side:    oklch(18% 0.022 40);
    --bg-tinted:  oklch(24% 0.025 40);
    --ink:        oklch(94% 0.010 60);
    --ink-soft:   oklch(80% 0.014 60);
    --ink-mute:   oklch(60% 0.012 60);
    --ink-faint:  oklch(40% 0.012 50);
    --rule:       oklch(28% 0.020 40);
    --rule-soft:  oklch(23% 0.022 40);
    --glass-bg:     oklch(20% 0.020 40 / 0.7);
    --glass-border: oklch(60% 0.014 60 / 0.16);
    --glass-shadow:
        0 1px 0 oklch(70% 0.012 60 / 0.08) inset,
        0 8px 32px -12px oklch(0% 0 0 / 0.5);
    --accent-on:  oklch(16% 0.018 40);
}

/* ============ PALETTE: DENİZ (soğuk turkuaz + teal) ============ */
[data-palette="deniz"] {
    --bg:         oklch(97% 0.008 210);
    --bg-elev:    oklch(99% 0.005 210);
    --bg-side:    oklch(95% 0.012 210);
    --bg-tinted:  oklch(92% 0.015 210);
    --ink:        oklch(20% 0.025 220);
    --ink-soft:   oklch(36% 0.022 220);
    --ink-mute:   oklch(54% 0.015 220);
    --ink-faint:  oklch(77% 0.010 220);
    --rule:       oklch(87% 0.008 210);
    --rule-soft:  oklch(92% 0.006 210);
    --accent:     #0f7a8f;
    --accent-on:  oklch(98% 0.008 210);
    --glass-bg:     oklch(99% 0.006 210 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.55);
    --glass-shadow:
        0 1px 0 oklch(100% 0 0 / 0.7) inset,
        0 8px 32px -12px oklch(20% 0.025 220 / 0.20),
        0 1px 2px oklch(20% 0.025 220 / 0.05);
}

[data-palette="deniz"][data-theme="dark"] {
    --bg:         oklch(15% 0.022 220);
    --bg-elev:    oklch(19% 0.022 220);
    --bg-side:    oklch(17% 0.025 220);
    --bg-tinted:  oklch(23% 0.028 220);
    --ink:        oklch(94% 0.008 220);
    --ink-soft:   oklch(80% 0.012 220);
    --ink-mute:   oklch(60% 0.012 220);
    --ink-faint:  oklch(40% 0.010 220);
    --rule:       oklch(28% 0.020 220);
    --rule-soft:  oklch(23% 0.024 220);
    --glass-bg:     oklch(20% 0.022 220 / 0.7);
    --glass-border: oklch(60% 0.014 220 / 0.16);
    --glass-shadow:
        0 1px 0 oklch(70% 0.012 220 / 0.08) inset,
        0 8px 32px -12px oklch(0% 0 0 / 0.5);
    --accent-on:  oklch(15% 0.022 220);
}

/* ============ PALETTE: ORMAN (yumuşak sage + orman yeşili) ============ */
[data-palette="orman"] {
    --bg:         oklch(97% 0.012 110);
    --bg-elev:    oklch(99% 0.008 110);
    --bg-side:    oklch(95% 0.014 110);
    --bg-tinted:  oklch(92% 0.018 110);
    --ink:        oklch(20% 0.025 140);
    --ink-soft:   oklch(36% 0.022 140);
    --ink-mute:   oklch(54% 0.016 140);
    --ink-faint:  oklch(77% 0.010 140);
    --rule:       oklch(87% 0.010 110);
    --rule-soft:  oklch(92% 0.008 110);
    --accent:     #2e6b32;
    --accent-on:  oklch(98% 0.010 110);
    --glass-bg:     oklch(99% 0.008 110 / 0.7);
    --glass-border: oklch(100% 0 0 / 0.55);
    --glass-shadow:
        0 1px 0 oklch(100% 0 0 / 0.7) inset,
        0 8px 32px -12px oklch(20% 0.025 140 / 0.20),
        0 1px 2px oklch(20% 0.025 140 / 0.05);
}

[data-palette="orman"][data-theme="dark"] {
    --bg:         oklch(15% 0.020 140);
    --bg-elev:    oklch(19% 0.022 140);
    --bg-side:    oklch(17% 0.024 140);
    --bg-tinted:  oklch(23% 0.026 140);
    --ink:        oklch(94% 0.008 110);
    --ink-soft:   oklch(80% 0.012 110);
    --ink-mute:   oklch(60% 0.012 110);
    --ink-faint:  oklch(40% 0.010 110);
    --rule:       oklch(28% 0.020 140);
    --rule-soft:  oklch(23% 0.024 140);
    --glass-bg:     oklch(20% 0.022 140 / 0.7);
    --glass-border: oklch(60% 0.014 110 / 0.16);
    --glass-shadow:
        0 1px 0 oklch(70% 0.012 110 / 0.08) inset,
        0 8px 32px -12px oklch(0% 0 0 / 0.5);
    --accent-on:  oklch(15% 0.020 140);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
}

/* Subtle ambient tint */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 50% 35% at 0% 0%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 65%),
        radial-gradient(ellipse 50% 35% at 100% 100%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 65%);
    opacity: 0.5;
}
[data-theme="dark"] body::before { opacity: 0.3; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

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

/* ============ APP SHELL ============ */
.app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    transition: grid-template-columns 0.25s ease;
    overflow-x: clip;
}
.app[data-sidebar="closed"] { grid-template-columns: 0 1fr; }
.app[data-sidebar="closed"] .sidebar { transform: translateX(-100%); }

/* ============ SIDEBAR ============ */
.sidebar {
    position: sticky;
    top: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--bg-side);
    border-right: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
    z-index: 30;
}

.sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.85rem;
}
.brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-transform: lowercase;
}
.brand__dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    transform: translateY(-2px);
}
.icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.icon-btn:hover { color: var(--ink); background: var(--bg-tinted); }

/* Görünür klavye odağı (a11y) — tüm buton ve linkler */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Menü butonu: ikon + görünür "Menü" etiketi (net erişilebilir ad) */
.topbar__menu-btn {
    width: auto;
    gap: 0.4rem;
    padding: 0 0.6rem 0 0.5rem;
    color: var(--ink-soft);
}
.topbar__menu-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* Hareket azaltma tercihi: sidebar kayma geçişini kapat */
@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* Search */
.sidebar__search {
    margin: 0 1rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sidebar__search:focus-within {
    border-color: var(--ink-mute);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}
.sidebar__search-icon { color: var(--ink-mute); display: flex; }
.sidebar__search input {
    flex: 1; min-width: 0;
    border: none; outline: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--ink);
}
.sidebar__search input::placeholder { color: var(--ink-mute); }
.sidebar__search kbd {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--bg-tinted);
    color: var(--ink-mute);
    border: 1px solid var(--rule);
}
.sidebar__search-clear { width: 22px; height: 22px; }

/* Nav */
.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 8px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.sidebar__nav::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

.cat { margin-bottom: 0.15rem; }
.cat__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.92rem;
    text-align: left;
    transition: background 0.12s ease;
}
.cat__head:hover { background: var(--bg-tinted); }
.cat__chevron {
    width: 14px; height: 14px;
    color: var(--ink-mute);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    display: inline-flex;
}
.cat[data-open="true"] .cat__chevron { transform: rotate(90deg); }
.cat__label { flex: 1; }
.cat__count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--bg-tinted);
}
.cat[data-active="true"] .cat__head { color: var(--ink); }
.cat[data-active="true"] .cat__count {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--ink);
}

.cat__panel { display: none; padding: 0.5rem 0.6rem 0.85rem; }
.cat[data-open="true"] .cat__panel { display: block; }

.numgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.numgrid__cell {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.45rem 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    transition: all 0.12s ease;
    text-align: center;
    cursor: pointer;
    display: block;
}
.numgrid__cell:hover { background: var(--bg-tinted); color: var(--ink); }
.numgrid__cell.is-active { background: var(--ink); color: var(--bg); }
.numgrid__cell.is-match  { border-color: var(--accent); color: var(--ink); }

/* Sidebar foot */
.sidebar__foot {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--rule-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
}

/* ============ MAIN ============ */
.main {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky; top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.topbar__crumbs {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.topbar__crumbs strong { color: var(--ink); font-weight: 500; }
.topbar__crumbs .sep   { color: var(--ink-faint); }
.topbar__crumbs .crumb-link { color: var(--ink-mute); transition: color 0.15s ease; }
.topbar__crumbs .crumb-link:hover { color: var(--ink); }
.topbar__actions { display: flex; gap: 0.25rem; align-items: center; }

/* Mobile drawer scrim */
.scrim { display: none; }

@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        width: min(320px, 86vw);
        transform: translateX(-100%);
        box-shadow: 0 24px 60px -8px oklch(0% 0 0 / 0.25);
    }
    .app[data-sidebar="open"] .sidebar { transform: translateX(0); }
    .topbar { z-index: 26; }
    .app[data-sidebar="open"] .scrim {
        display: block;
        position: fixed; inset: 0;
        background: oklch(0% 0 0 / 0.35);
        z-index: 25;
        backdrop-filter: blur(3px);
    }
}

/* ============ HOME (category grid) ============ */
.page { display: contents; }

.home {
    /*padding: 4rem 3rem 6rem;*/
    width: 100%;
}
.home__h {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1.5rem;
    margin-left: 15px;
}
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
    border-radius: 14px;
    overflow: hidden;
}
.cat-card {
    padding: 1.5rem 1.5rem 1.4rem;
    background: var(--bg);
    text-align: left;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 8.5rem;
    transition: background 0.15s ease;
    position: relative;
}
.cat-card:hover { background: var(--bg-side); }
.cat-card__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}
.cat-card__label {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.05;
    margin-top: auto;
}
.cat-card__count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-mute); }
.cat-card__count strong { color: var(--ink); font-weight: 500; }

/* ============ ARTICLE ============ */
.article {
    padding: 3.5rem 2rem 7rem;
    max-width: var(--read-measure);
    /*margin: 0 auto;*/
    width: 100%;
}
.article__meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.article__num {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 12vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 0 0 2rem;
    color: var(--ink);
    font-weight: 400;
}
.article__body {
    font-size: var(--read-size);
    line-height: var(--read-leading);
    color: var(--ink);
}
.article__body p { margin: 0 0 1.4em; text-wrap: pretty; hyphens: auto; }
.article__body h2,
.article__body h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; margin: 2em 0 0.6em; }
.article__body h2 { font-size: 1.8em; }
.article__body h3 { font-size: 1.4em; }
.article__body a  { color: var(--accent); border-bottom: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); }
.article__body a:hover { border-bottom-color: var(--accent); }
.article__body blockquote {
    margin: 1.4em 0;
    padding: 0 0 0 1.2em;
    border-left: 3px solid var(--accent);
    color: var(--ink-soft);
    font-style: italic;
}
.article__body code {
    font-family: var(--font-mono);
    background: var(--bg-tinted);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.92em;
}
.article__body pre {
    background: var(--bg-tinted);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
}
.article__body pre code { background: transparent; padding: 0; }

/* WordPress core image classes inside .article__body */
.article__body img,
.article__body .wp-block-image img { border-radius: 6px; margin: 1.4em 0; }
.article__body .alignleft  { float: left;  margin: 0.4em 1.4em 1em 0; }
.article__body .alignright { float: right; margin: 0.4em 0 1em 1.4em; }
.article__body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.article__body .alignwide  { max-width: calc(var(--read-measure) + 8rem); margin-left: -4rem; margin-right: -4rem; }
.article__body .alignfull  { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.article__body .wp-caption-text,
.article__body figcaption {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-mute);
    text-align: center;
    margin-top: 0.5em;
}

/* Bottom nav between posts */
.posts-nav {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.posts-nav__btn {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-family: var(--font-ui);
    transition: all 0.15s ease;
}
.posts-nav__btn:hover { background: var(--bg-tinted); border-color: var(--ink-faint); }
.posts-nav__btn.is-disabled { opacity: 0.35; pointer-events: none; }
.posts-nav__btn--next { text-align: right; align-items: flex-end; }
.posts-nav__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    text-transform: uppercase;
}
.posts-nav__num { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; }

/* ============ ARCHIVE (category page) ============ */
.archive {
    /*padding: 3.5rem 3rem 6rem;*/
    width: 100%;
}
.archive__meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 0.8rem;
}
.archive__h {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 2.5rem;
    font-weight: 400;
}
.numgrid--lg {
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 8px;
}
.numgrid--lg .numgrid__cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    border: 1px solid var(--rule);
    background: var(--bg-elev);
}
.numgrid--lg .numgrid__cell:hover {
    border-color: var(--ink-faint);
    background: var(--bg-side);
    color: var(--ink);
}

/* ============ SEARCH RESULTS ============ */
.search-results {
    /*padding: 3rem 3rem 6rem;*/
    width: 100%;
}
.search-results__head {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.search-results__count {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -0.01em;
    margin: 0 0 2rem;
    color: var(--ink);
}
.search-result {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.25rem 0;
    border-top: 1px solid var(--rule-soft);
    cursor: pointer;
    transition: padding 0.2s ease;
    color: inherit;
}
.search-result:hover { padding-left: 0.5rem; }
.search-result:hover .search-result__num { color: var(--accent); }
.search-result__num {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--ink);
    line-height: 1;
    transition: color 0.18s ease;
}
.search-result__cat {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.search-result__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}
.search-result__snip { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.search-result__snip mark {
    background: color-mix(in oklch, var(--accent) 30%, transparent);
    color: var(--ink);
    padding: 0 2px;
    border-radius: 2px;
}
.search-empty {
    color: var(--ink-mute);
    font-family: var(--font-ui);
    padding: 2rem 0;
}

/* ============ 404 ============ */
.notfound {
    padding: 4rem 2rem 6rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}
.notfound__num {
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 0.9;
    color: var(--ink);
    margin: 0;
    font-weight: 400;
}
.notfound__text {
    font-family: var(--font-mono);
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    margin: 1rem 0 2.5rem;
}
.notfound__link {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    font-family: var(--font-ui);
    color: var(--ink);
    transition: all 0.15s ease;
}
.notfound__link:hover { background: var(--bg-tinted); border-color: var(--ink-faint); }

@media (max-width: 1100px) {
    .home, .archive, .search-results {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 640px) {
    .home, .article, .search-results, .archive, .notfound {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .article { padding-top: 2rem; }
    .topbar  { padding: 0.75rem 1rem; }
    .topbar__crumbs { font-size: 0.72rem; }
    .article__body .alignwide,
    .article__body .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }
}