/* inout — Tufte-inspired, mobile-first theme for long reads
   Principles: paper-like background, high-contrast "ink", hairline rules, sparing accent color.
*/

/* Design tokens */
:root {
    /* Color (paper + ink, sparing color) */
    --bg: #fcfbf7;               /* paper */
    --surface: #ffffff;          /* elevated surface */
    --text: #111111;             /* ink */
    --muted: #4f4f4f;            /* secondary ink */
    --faint: rgba(17, 17, 17, 0.58);

    --rule: rgba(17, 17, 17, 0.12);
    --rule-strong: rgba(17, 17, 17, 0.18);
    --shadow: rgba(17, 17, 17, 0.06);

    /* Tufte-like accents (use sparingly) */
    --accent: #1d4e6d;           /* muted blue */
    --accent-2: #a23e2a;         /* muted red */
    --highlight: #f7f1df;        /* warm highlight */

    --code-bg: #f6f3eb;
    --code-border: rgba(17, 17, 17, 0.14);

    /* Typography */
    --serif: "Merriweather", ui-serif, "Iowan Old Style", "New York", Georgia, "Times New Roman", Times, serif;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --fz-body: 1.12rem;          /* ~18px */
    --lh-body: 1.82;

    /* Layout */
    --content-max: 68ch;
    --pad: 20px;

    /* Spacing scale */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;

    --radius: 10px;
}

@media (min-width: 48rem) {
    :root {
        --fz-body: 1.2rem;
        --pad: 24px;
    }
}

@media (min-width: 72rem) {
    :root { --pad: 28px; }
}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family: var(--serif);
    font-weight: 300;
    font-size: var(--fz-body);
    line-height: var(--lh-body);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

/* Typographic niceties (progressive enhancement) */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Text selection / highlights */
::selection { background: var(--highlight); }

mark {
    background: var(--highlight);
    padding: 0 0.12em;
    border-radius: 4px;
}

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

/* Links: mostly-ink, accent underline */
a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, var(--accent), transparent 35%);
}

a:hover {
    text-decoration-color: var(--accent);
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent), transparent 10%);
    outline-offset: 3px;
}

/* Layout helpers */
.content {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}


/* Full-height page layout (sticky footer) */
.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
}
.site-main {
    padding-bottom: var(--s-8);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-top: var(--s-4);
    padding-bottom: var(--s-4);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
}

.site-logo {
    height: 28px;
    width: auto;
}

.site-title {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* Accessible helpers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html.nav-open {
    overflow: hidden;
}

.nav-toggle {
    position: relative;
    z-index: 70;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-toggle:hover {
    border-color: color-mix(in srgb, var(--text), transparent 80%);
}

.nav-toggle__icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle__icon span {
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle.is-open .nav-toggle__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__icon span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 40;
}

.nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.site-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50vw;
    max-width: 420px;
    background: var(--bg);
    border-left: 1px solid var(--rule);
    padding: calc(var(--s-8) + var(--s-3)) var(--s-5) var(--s-5);
    transform: translateX(100%);
    transition: transform 220ms ease;
    overflow-y: auto;
    z-index: 60;
    box-shadow: -20px 0 40px rgba(0, 0, 0, 0.06);
    visibility: hidden;
    pointer-events: none;
}

.site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);

    font-family: var(--sans);
    font-size: 0.98rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}

.nav-link {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    text-decoration: none;
    color: var(--muted);
}

.nav-item a.nav-link:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.nav-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent), transparent 35%);
    outline-offset: 3px;
    border-radius: 4px;
}

.nav-item.is-current .nav-link {
    color: var(--accent-2);
    text-decoration: underline;
    text-decoration-color: var(--accent-2);
    cursor: default;
}

@media (min-width: 52rem) {
    html.nav-open { overflow: auto; }

    .nav-toggle { display: none; }
    .nav-overlay { display: none; }

    .site-nav {
        position: static;
        height: auto;
        width: auto;
        max-width: none;
        padding: 0;
        transform: none;
        transition: none;
        border: 0;
        box-shadow: none;
        visibility: visible;
        pointer-events: auto;
        overflow: visible;
    }

    .site-nav.is-open { transform: none; }

    .nav-list {
        flex-direction: row;
        gap: var(--s-4);
        align-items: center;
    }
}


/* Reading progress (posts/pages) */
.reading-progress {
    display: none;
    height: 2px;
    width: 100%;
    background: transparent;
}

.post-template .reading-progress,
.page-template .reading-progress {
    display: block;
}

.reading-progress__bar {
    height: 2px;
    width: 0%;
    background: color-mix(in srgb, var(--accent), transparent 55%);
    transition: width 120ms linear;
}

/* Hero */
.hero {
    padding-top: var(--s-8);
    padding-bottom: var(--s-6);
}

.hero-title {
    font-size: clamp(2.1rem, 7vw, 3.2rem);
    line-height: 1.06;
    margin: 0 0 var(--s-3) 0;
    letter-spacing: -0.02em;
}

.hero-description {
    margin: 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Topic tabs (lightweight, tab-like) */
.topic-tabs {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

.topic-tabs__inner {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
    scrollbar-width: none;
}

.topic-tabs__inner::-webkit-scrollbar { display: none; }

.topic-tab {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;

    color: var(--muted);
    text-decoration: none;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
}

.topic-tab:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 35%);
}

/* Feed + cards */
.feed { padding-top: var(--s-6); }

/* Home page: after the featured story, show remaining posts in a more visual grid */
.feed--home .feed-grid {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    align-items: start;
}
.feed--home .feed-grid .post-card { align-self: start; }


@media (min-width: 48rem) {
    .feed--home .feed-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-8);
    }

    .feed--home .feed-grid .post-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "body";
        border-bottom: 0;
        padding: 0;
    }

    .feed--home .feed-grid .post-card__image-link {
        aspect-ratio: 16 / 10;
    }
}

.post-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "image"
        "body";
    gap: var(--s-4);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--rule);
}

.post-card__image-link {
    grid-area: image;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--rule);
    aspect-ratio: 4 / 3;
}

.post-card--lead .post-card__image-link {
    aspect-ratio: 16 / 9;
}

.post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.post-card__body {
    grid-area: body;
}

.post-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0.85rem;
    background: none;
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* When a generated SVG cover is applied, keep the image clean (no label overlay) */
.post-card__placeholder.is-generated {
    padding: 0;
}

.post-card__placeholder.is-generated .post-card__placeholder-label {
    display: none;
}

.post-card__placeholder-label {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--text), transparent 35%);
    border: 1px solid color-mix(in srgb, var(--text), transparent 85%);
    background: color-mix(in srgb, var(--bg), transparent 10%);
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.post-card__kicker,
.post-card__tags {
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.3;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}

.post-card__tags {
    margin-top: var(--s-3);
}

.post-card__tags a {
    text-decoration: none;
    color: var(--muted);
    border-bottom: 1px solid transparent;
}

.post-card__tags a:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.meta-sep {
    padding: 0 0.35rem;
    color: color-mix(in srgb, var(--muted), transparent 30%);
}

.post-card__title {
    margin: var(--s-2) 0 0;
    font-size: clamp(1.45rem, 3.1vw, 1.9rem);
    line-height: 1.14;
    letter-spacing: 0.125rem;
    font-family: var(--serif);
    font-weight: 825;
}

.post-card__title a {
    text-decoration: none;
    color: var(--text);
}

.post-card__title a:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.post-card__excerpt {
    margin: var(--s-3) 0 0;
    color: color-mix(in srgb, var(--text), transparent 8%);
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.22;
}

.post-card--lead {
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
}

/* Home only: non-featured cards use a softer title colour */
.home-template .post-card:not(.post-card--featured) .post-card__title a {
    color: rgba(17, 17, 17, 0.5);
}

@media (min-width: 48rem) {
    .post-card {
        grid-template-columns: 1fr 320px;
        grid-template-areas: "body image";
        align-items: start;
        gap: var(--s-6);
    }

    .post-card--lead {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "body";
    }
}




/* Tag archives: consistent side-by-side rows (no bottom divider line) */
.tag-template .post-card {
    border-bottom: 0;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "image body";
    align-items: start;
    gap: var(--s-6);
}

@media (min-width: 48rem) {
    .tag-template .post-card {
        grid-template-columns: 260px 1fr;
    }
}

/* Pagination (Ghost helper output) */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-7) var(--pad) 0;
    max-width: var(--content-max);
    margin: 0 auto;

    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.pagination a {
    text-decoration: none;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    line-height: 1;
    color: var(--text);
}

.pagination a:hover {
    border-color: var(--rule-strong);
}

/* Post / Page headers */
.post-header,
.page-header,
.archive-header {
    padding-top: var(--s-8);
    padding-bottom: var(--s-6);
}


.archive-kicker {
    margin: 0 0 var(--s-2);
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-size: 0.9rem;
}

.archive-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.archive-rss {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.archive-rss:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 35%);
}

.archive-year-nav {
    margin-top: var(--s-1);
    margin-bottom: var(--s-2);
}

.archive-year-nav:empty {
    display: none;
}

.archive-year-nav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: baseline;
}

.archive-year-link {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.archive-year-link:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 35%);
}

.archive-year-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent), transparent 60%);
    outline-offset: 2px;
    border-bottom-color: transparent;
}

.post-back {
    display: inline-block;
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: var(--s-3);
}

.post-back:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }

.post-meta {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-size: 0.98rem;
    margin-bottom: var(--s-3);
}

.meta-link {
    text-decoration: none;
    color: var(--muted);
    border-bottom: 1px solid transparent;
}

.meta-link:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.post-title,
.page-title,
.archive-title {
    margin: 0;
    font-size: clamp(2.1rem, 6vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 600;
}

/* Post page title requirements */
.post-title {
    font-weight: 825;
    letter-spacing: 0.125rem;
}

/* Post excerpt (under title) */
.post-excerpt {
    margin: var(--s-4) 0 0;
    color: var(--muted);
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    line-height: 1.55;
}

/* Post tags row (under excerpt) */
.post-tags-inline {
    margin-top: var(--s-4);
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.98rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
}

.post-tag-link {
    text-decoration: none;
    color: var(--muted);
    border-bottom: 1px solid transparent;
}

.post-tag-link:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.post-subtitle,
.page-subtitle,
.archive-description {
    margin: var(--s-3) 0 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.65;
}

.post-byline {
    margin-top: var(--s-4);
    font-family: var(--sans);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.byline-name a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.byline-name a:hover {
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 45%);
}

.byline-role { font-size: 0.95rem; }

/* Feature image */
.post-feature-image,
.page-feature-image {
    margin: 0 auto var(--s-7);
    padding-left: var(--pad);
    padding-right: var(--pad);
    max-width: min(100%, calc(var(--content-max) + 18rem));
}

.post-feature-image img,
.page-feature-image img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
}

/* Generated cover (used when a post has no feature image) */
.post-generated-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.post-generated-cover.is-generated {
    border: 1px solid var(--rule);
}

.post-feature-image figcaption,
.page-feature-image figcaption {
    margin-top: var(--s-2);
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--muted);
}

/* Page title/feature image toggle (Ghost beta page editor) */
.page-no-title .page-content { padding-top: 0; }
.page-no-title .kg-width-full:first-child { margin-top: 0; }

/* Content */
.post-content,
.page-content { hyphens: auto; }

/* Slightly tighter leading for posts (long-read comfort) */
.post-content {
    line-height: 1.72;
}


/* Body weight + emphasis weights */
.post-content p,
.page-content p,
.post-content li,
.page-content li {
    font-weight: 300;
}

.post-content strong,
.post-content b,
.page-content strong,
.page-content b {
    font-weight: 400;
}

.post-content a,
.page-content a {
    text-decoration-color: color-mix(in srgb, var(--accent), transparent 25%);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    border-radius: 2px;
    transition: background-color 140ms ease,
        text-decoration-color 140ms ease,
        text-decoration-thickness 140ms ease;
}

.post-content a:hover,
.page-content a:hover {
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    background-color: color-mix(in srgb, var(--highlight), transparent 60%);
}

.post-content p,
.page-content p { margin: 0 0 1.15em 0; }

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    margin: 2.05em 0 0.65em;
    line-height: 1.16;
    letter-spacing: -0.012em;
}

.post-content h1,
.page-content h1 {
    font-size: 2.05rem;
    font-weight: 600;
}

.post-content h2,
.page-content h2 {
    font-size: 1.86rem;
    font-weight: 500;
}

.post-content h3,
.page-content h3 {
    font-size: 1.49rem;
    font-weight: 450;
}

.post-content h4,
.page-content h4 { font-size: 1.26rem; font-weight: 450; }

/* Headings: bold text should not jump weight */
.post-content h1 strong,
.post-content h1 b,
.post-content h2 strong,
.post-content h2 b,
.post-content h3 strong,
.post-content h3 b,
.post-content h4 strong,
.post-content h4 b,
.page-content h1 strong,
.page-content h1 b,
.page-content h2 strong,
.page-content h2 b,
.page-content h3 strong,
.page-content h3 b,
.page-content h4 strong,
.page-content h4 b {
    font-weight: inherit;
}

.post-content hr,
.page-content hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.2em 0;
}

.post-content blockquote,
.page-content blockquote {
    margin: 1.8em auto 1.8em 0.75rem;
    padding: 0;
    border: 0;
    width: 80%;
    color: var(--muted);
    font-style: italic;
}

.post-content ul,
.page-content ul {
    margin: 0 0 1.25em 1.15em;
    padding: 0;
}

.post-content ol,
.page-content ol {
    margin: 0 0 1.25em 1.35em;
    padding: 0;
    list-style-type: decimal;
}

.post-content ol ol,
.page-content ol ol { list-style-type: lower-alpha; }

.post-content ol ol ol,
.page-content ol ol ol { list-style-type: decimal; }

.post-content li,
.page-content li { margin: 0.35em 0; }

/* Lighter bullets/markers */
.post-content ul li::marker,
.page-content ul li::marker {
    color: rgba(0, 0, 0, 0.1);
}

.post-content ol li::marker,
.page-content ol li::marker {
    color: color-mix(in srgb, var(--text), transparent 70%);
}

/* Roman-numeral outline lists: if a UL's items begin with roman numerals (e.g. "i.", "iv.")
   we remove bullets entirely. A small JS enhancement applies the .list-roman class. */
.post-content ul.list-roman,
.page-content ul.list-roman {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.post-content ul.list-roman ul,
.page-content ul.list-roman ul {
    list-style: none;
    margin-left: 1.05em;
    padding-left: 0;
}

/* Content outline / Table of contents
   If you add a heading like "Content" or "Contents", Ghost will auto-generate the id.
   Remove bullets and style it like an outline list. */
.post-content #content + ul,
.post-content #contents + ul,
.post-content #table-of-contents + ul,
.post-content #toc + ul,
.page-content #content + ul,
.page-content #contents + ul,
.page-content #table-of-contents + ul,
.page-content #toc + ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.post-content #content + ul ul,
.post-content #contents + ul ul,
.post-content #table-of-contents + ul ul,
.post-content #toc + ul ul,
.page-content #content + ul ul,
.page-content #contents + ul ul,
.page-content #table-of-contents + ul ul,
.page-content #toc + ul ul {
    list-style: none;
    margin: 0.55em 0 0.9em 1.05em;
}

.post-content #content + ul li,
.post-content #contents + ul li,
.post-content #table-of-contents + ul li,
.post-content #toc + ul li,
.page-content #content + ul li,
.page-content #contents + ul li,
.page-content #table-of-contents + ul li,
.page-content #toc + ul li {
    margin: 0.35em 0;
}

.post-content #content + ul a,
.post-content #contents + ul a,
.post-content #table-of-contents + ul a,
.post-content #toc + ul a,
.page-content #content + ul a,
.page-content #contents + ul a,
.page-content #table-of-contents + ul a,
.page-content #toc + ul a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 10%);
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
}

.post-content #content + ul a:hover,
.post-content #contents + ul a:hover,
.post-content #table-of-contents + ul a:hover,
.post-content #toc + ul a:hover,
.page-content #content + ul a:hover,
.page-content #contents + ul a:hover,
.page-content #table-of-contents + ul a:hover,
.page-content #toc + ul a:hover {
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 30%);
    color: var(--text);
}

.post-content code,
.page-content code {
    font-family: var(--mono);
    font-size: 0.95em;
    background: var(--code-bg);
    border: 1px solid color-mix(in srgb, var(--code-border), transparent 40%);
    padding: 0.1em 0.32em;
    border-radius: 6px;
}

.post-content pre,
.page-content pre {
    font-family: var(--mono);
    font-size: 0.95em;
    line-height: 1.55;
    background: var(--code-bg);
    padding: 1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    border: 1px solid var(--code-border);
    margin: 1.8em 0;
}

.post-content pre code,
.page-content pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

/* Tables: minimal rules, readable on mobile */
.post-content table,
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-family: var(--sans);
    font-size: 0.98rem;
}

.post-content th,
.post-content td,
.page-content th,
.page-content td {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 0.7rem 0.75rem;
    vertical-align: top;
}

.post-content th,
.page-content th {
    text-align: left;
    color: var(--text);
}

/* Make tables usable on mobile */
.post-content .kg-table-card,
.page-content .kg-table-card { overflow-x: auto; }

/* Koenig cards */
.kg-card { margin: 2em 0; }

.kg-image-card img { border-radius: var(--radius); border: 1px solid var(--rule); }
.kg-image-card figcaption {
    margin-top: 0.55rem;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--muted);
}

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

.kg-callout-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--highlight), transparent 55%);
    font-family: var(--sans);
}

.kg-bookmark-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}

.kg-bookmark-container {
    text-decoration: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1rem;
}

@media (min-width: 40rem) {
    .kg-bookmark-container {
        grid-template-columns: 1fr 180px;
        align-items: start;
    }
}

.kg-bookmark-title {
    font-family: var(--sans);
    font-weight: 650;
    line-height: 1.2;
}

.kg-bookmark-description,
.kg-bookmark-metadata {
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.95rem;
}

/* Wide/full-width media breakout (desktop only) */
.post-content .kg-width-wide,
.page-content .kg-width-wide { width: 100%; }

@media (min-width: 64rem) {
    .post-content .kg-width-wide,
    .page-content .kg-width-wide {
        width: min(100vw - (var(--pad) * 2), calc(var(--content-max) + 18rem));
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* Full-width: keep comfortable gutters on mobile; go full-bleed only on large screens */
.post-content .kg-width-full,
.page-content .kg-width-full {
    width: 100%;
    margin-left: 0;
    transform: none;
}

@media (min-width: 64rem) {
    .post-content .kg-width-full,
    .page-content .kg-width-full {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* Footnotes (Markdown/HTML) */
.footnotes {
    border-top: 1px solid var(--rule);
    margin-top: 2.5em;
    padding-top: 1.25em;
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.98rem;
}

.footnotes ol {
    list-style-type: decimal;
    margin-left: 1.25em;
}

.footnotes li::marker {
    color: color-mix(in srgb, var(--text), transparent 58%);
}

.footnotes a { color: var(--muted); }

.post-content sup a,
.page-content sup a {
    text-decoration: none;
    color: var(--accent);
}

/* Optional Tufte-style margin notes (use in HTML cards) */
.marginnote,
.sidenote {
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

@media (min-width: 84rem) {
    .marginnote {
        float: right;
        clear: right;
        width: 18rem;
        margin-right: -20rem;
        margin-top: 0.2rem;
    }
}

/* Post footer tags */
.post-footer { padding-top: var(--s-6); }

.post-tags {
    border-top: 1px solid var(--rule);
    padding-top: var(--s-4);
    font-family: var(--sans);
    color: var(--muted);
    font-size: 0.95rem;
}

.post-tags-label {
    font-variant-caps: all-small-caps;
    letter-spacing: 0.08em;
    margin-right: 0.35rem;
}

.post-tags-list a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.post-tags-list a:hover {
    color: var(--text);
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 45%);
}

/* Related posts */
.related { padding-top: var(--s-7); }

.section-title {
    font-family: var(--sans);
    font-size: 0.98rem;
    color: var(--muted);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    margin: 0 0 var(--s-4);
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
}

@media (min-width: 48rem) {
    .related-grid { grid-template-columns: 1fr 1fr 1fr; }

    .related-grid .post-card {
        border-bottom: 0;
        padding: 0;
    }
}

/* Topics */
.topics-index {
    padding-top: var(--s-2);
}

/* Archive (All posts) */
.archive-list {
    padding-bottom: var(--s-8);
}

.archive-posts {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 0;
    display: grid;
    gap: 0.15rem;
}

.archive-year {
    margin: 1.75rem 0 0.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
}

.archive-year-label {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-size: 0.92rem;
}

.archive-item {
    display: grid;
    grid-template-columns: 7.75rem 1fr;
    column-gap: 1.25rem;
    align-items: baseline;
    padding: 0.18rem 0;
}

.archive-date {
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-size: 0.92rem;
    white-space: nowrap;
}

.archive-link {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 25%);
    line-height: 1.35;
}

.archive-link:hover {
    border-bottom-color: var(--accent);
}

@media (max-width: 32rem) {
    .archive-item {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
    }

    .archive-date {
        font-size: 0.9rem;
    }
}


.topic-block {
    padding: var(--s-5) 0;
    border-top: 1px solid var(--rule);
}

.topic-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.topic-title {
    margin: 0 0 var(--s-3);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.topic-title a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.topic-title a:hover {
    border-bottom-color: color-mix(in srgb, var(--accent), transparent 35%);
}

.topic-count {
    margin-left: 0.35rem;
    font-family: var(--sans);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-size: 0.95rem;
}

.topic-posts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.topic-post { margin: 0; }

.topic-post a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 20%);
}

.topic-post a:hover {
    border-bottom-color: var(--accent);
}

/* Author */
.author-head {
    display: flex;
    gap: var(--s-4);
    align-items: center;
}

.author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--rule);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--rule);
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
    font-family: var(--sans);
    color: var(--muted);
}

.footer-row {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

/* Footer: single-line meta with RSS aligned to the right */
.footer-row--meta {
    align-items: baseline;
    flex-wrap: nowrap;
}

.footer-brand {
    text-decoration: none;
    color: var(--text);
    font-weight: 650;
}

.footer-links {
    display: flex;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.footer-meta {
    margin: 0;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
}

.footer-rss {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.95rem;
}

.footer-rss:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

/* Utility */
.empty-state {
    font-family: var(--sans);
    color: var(--muted);
    padding: var(--s-7) 0;
}

.error-title {
    font-family: var(--sans);
    margin: 0;
    font-size: 3rem;
    line-height: 1;
}

.error-message {
    color: var(--muted);
    font-family: var(--sans);
}