/* ============================================================ */
/* Tokens */
/* ============================================================ */

/*
 * Each colour is light-dark(<light>, <dark>). Which one applies is
 * controlled by `color-scheme`, set from the theme's "Color scheme"
 * setting (Design → Theme in Ghost Admin) via a class on <html>.
 *
 * The look in one sentence: a loud accent band (the "stamp") with a dot
 * grid frames each page; the reading area between stays calm.
 * Structure is drawn with thick ink rules, subdivisions with dotted ones.
 */

:root { color-scheme: light; }
:root.dark-mode { color-scheme: dark; }
:root.auto-color { color-scheme: light dark; }

:root {
    /* Accent: Ghost Admin → Settings → Design → Brand → Accent colour */
    --accent: var(--ghost-accent-color, #db2777);
    --on-accent: #fff;
    /* Accent as text on the page: darkened in light mode, lightened in dark, so it stays readable */
    --accent-text: light-dark(color-mix(in oklab, var(--accent), black 18%), color-mix(in oklab, var(--accent), white 40%));
    --accent-text-hover: light-dark(color-mix(in oklab, var(--accent), black 35%), color-mix(in oklab, var(--accent), white 60%));
    --accent-wash: light-dark(color-mix(in oklab, var(--accent) 22%, white), color-mix(in oklab, var(--accent) 40%, transparent));

    --paper: light-dark(#fcfcfb, #141416);
    --paper-raised: light-dark(#ffffff, #1c1c20);
    --ink: light-dark(#111111, #f4f4f5);        /* headings and thick rules */
    --text: light-dark(#2f2f33, #d4d4d8);
    --text-soft: light-dark(#45454c, #b4b4bb);
    --muted: light-dark(#55555c, #a1a1aa);      /* ≥ 4.5:1 on paper in both schemes */
    --faint: light-dark(#c4c4ca, #3f3f46);      /* disabled states only */
    --year-past: light-dark(#85858e, #7a7a84);  /* older years in the log, ≥ 3:1 at display size */
    --rule: light-dark(#9a9aa2, #52525b);       /* dotted rules */
    --border: light-dark(#e4e4e7, #2e2e33);
    --dot: light-dark(#d9d9de, #2e2e33);

    --code-background: #18181b;
    --code-text: #d4d4d8;
    --code-inline-background: light-dark(color-mix(in oklab, var(--accent) 7%, white), color-mix(in oklab, var(--accent) 16%, #141416));

    /* Fixed colours for things sitting on the accent band */
    --sticker-ink: #111111;
    --sticker-paper: #ffffff;

    --font-display: var(--gh-font-heading, 'Archivo', 'Arial Narrow', sans-serif);
    --font-body: var(--gh-font-body, 'Source Serif 4', Georgia, serif);
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --wide: 1100px;   /* headers, archive pages */
    --measure: 720px; /* post body */
    --gutter: 24px;
}

/* ============================================================ */
/* Reset */
/* ============================================================ */

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

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

body { margin: 0; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button, input, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* ============================================================ */
/* Base */
/* ============================================================ */

body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* full-width cards use 100vw, which includes the scrollbar */
}

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

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

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

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

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.site-main {
    flex: 1;
    transition: opacity 300ms ease;

    /* Page transition for AJAX navigation */
    &.is-fading { opacity: 0; }
}

/* The dot grid, on the accent band and inside a few boxes */
.accent-band {
    background-color: var(--accent);
    background-image: radial-gradient(rgb(255 255 255 / 0.32) 1px, transparent 1px);
    background-size: 18px 18px;
    color: var(--on-accent);

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

.dots {
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Rotated label, e.g. "Latest" */
.sticker {
    background: var(--sticker-ink);
    color: #fff;
    display: inline-block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
    padding: 4px 9px;
    rotate: -2deg;
    text-transform: uppercase;
}

.section-label {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

/* ============================================================ */
/* Site Nav (inside every accent header) */
/* ============================================================ */

.site-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 14px var(--gutter) 0;
}

.site-nav-brand {
    font-family: var(--font-display);
    font-size: 30px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 1;
    padding: 8px 0;
    text-transform: uppercase;
}

.site-nav-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 14px;
    gap: 0 22px;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;

    a {
        display: inline-block;
        padding: 12px 0;

        &:hover { text-decoration: underline; text-underline-offset: 4px; }
    }

    .nav-current a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

.site-nav-search {
    align-items: center;
    background: var(--sticker-paper);
    border: 0;
    color: var(--sticker-ink);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;

    kbd {
        font-family: inherit;
        font-size: 12px;
        opacity: 0.6;
    }

    &:hover { background: var(--sticker-ink); color: #fff; }
}

/* ============================================================ */
/* Home Header */
/* ============================================================ */

.home-header-inner {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 40px var(--gutter) 48px;
}

.home-intro {
    display: flex;
    flex: 999 1 520px;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.home-title {
    font-family: var(--font-display);
    font-size: clamp(64px, 12vw, 160px);
    font-stretch: 62%;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.82;
    margin: 0;
    max-width: 7ch; /* "Dave Bauman" stacks onto two lines */
    text-transform: uppercase;
}

.home-description {
    font-size: 22px;
    line-height: 1.5;
    margin: 0;
    max-width: 560px;
}

.home-now {
    background: var(--sticker-paper);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 6px 6px 0 var(--sticker-ink);
    color: #2f2f33;
    flex: 1 1 260px;
    padding: 18px 20px;
    rotate: 1.5deg;
}

.home-now-label {
    color: color-mix(in oklab, var(--accent), black 18%);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.home-now-text {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================ */
/* Page Header (paged index, tag, author) */
/* ============================================================ */

.page-header-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 48px var(--gutter) 40px;
}

.page-header-label {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
}

.page-header-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 8vw, 96px);
    font-stretch: 62%;
    font-weight: 900;
    line-height: 0.88;
    margin: 0;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.author-header {
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 20px;
}

.author-avatar {
    border: 3px solid var(--sticker-paper);
    border-radius: 50%;
    height: 72px;
    object-fit: cover;
    width: 72px;
}

.author-meta {
    flex-direction: row;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 14px;
    gap: 8px 24px;
    padding-top: 0;

    span { align-items: center; display: inline-flex; gap: 8px; }
}

/* ============================================================ */
/* Archive (homepage, tag, author) */
/* ============================================================ */

.archive {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 56px var(--gutter) 24px;
    width: 100%;
}

.archive-description {
    color: var(--text-soft);
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    max-width: var(--measure);
}

/* Latest post card */

.featured {
    background: var(--paper-raised);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--accent);
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 32px;
    position: relative;

    &:hover { box-shadow: 12px 12px 0 var(--accent); }
}

.featured-body {
    display: flex;
    flex: 999 1 440px;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.featured-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    gap: 6px 12px;
    line-height: 1.4;
    margin: 0;
}

.featured-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-stretch: 62%;
    font-weight: 900;
    line-height: 0.92;
    margin: 0;
    text-transform: uppercase;

    a {
        color: var(--ink);

        /* The whole card is the link */
        &::after { content: ""; inset: 0; position: absolute; }
    }
}

.featured-excerpt {
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1.65;
    margin: 0;
}

.featured-more {
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
}

.featured-image {
    align-self: stretch;
    flex: 1 1 240px;
    object-fit: cover;
    min-height: 200px;
}

/* Tag and series links, wherever they appear */

.tag-link,
.series-badge {
    position: relative; /* above the featured card's link overlay */
    z-index: 1;
}

.tag-link { color: var(--accent-text); }

.series-badge {
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    text-transform: uppercase;

    &:hover { background: var(--sticker-ink); color: #fff; }
}

/* The year log */

.log {
    border-top: 3px solid var(--ink);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Without JS: one row per post, each with its own year */
.log-item,
.log-group {
    border-top: 1px dotted var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    padding: 28px 0;

    &:first-child { border-top: 0; }
}

.log-year,
.log-group-year {
    color: var(--accent);
    flex: 0 0 120px;
    font-family: var(--font-display);
    font-size: 64px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 0.85;
}

/* With JS: posts grouped by year; the year sticks while its posts scroll past */
.log.is-grouped {
    .log-group-year {
        align-self: flex-start;
        position: sticky;
        top: 16px;
    }

    .log-group:not(:first-child) .log-group-year { color: var(--year-past); }

    .log-year { display: none; }

    .log-item {
        border-top: 0;
        padding: 0;
    }
}

.log-group-entries {
    display: flex;
    flex: 999 1 480px;
    flex-direction: column;
    gap: 26px;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.log-body {
    display: flex;
    flex: 999 1 480px;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.log-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-stretch: 75%;
    font-weight: 800;
    line-height: 1.05;
    margin: 0;

    a {
        color: var(--ink);

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

.log-meta {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 13px;
    gap: 4px 12px;
    line-height: 1.5;
    margin: 0;
}

.log-excerpt {
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

/* Consecutive posts from one series, collapsed by scripts.js */
.log-series {
    align-items: flex-start;
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px dotted var(--rule);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
}

.log-series-label {
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
    padding: 5px 9px;
    text-transform: uppercase;

    &:hover { background: var(--sticker-ink); color: #fff; }
}

.log-series-entries {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;

    /* Titles only, each on a paper chip so the dots don't run through the text */
    .log-title {
        background: var(--paper);
        font-size: 24px;
        padding: 0 4px;
    }

    .log-meta,
    .log-excerpt { display: none; }
}

/* A series' own page: parts in reading order */

.series-list {
    border-top: 3px solid var(--ink);
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.series-list-item {
    border-top: 1px dotted var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    padding: 28px 0;

    &:first-child { border-top: 0; }
}

.series-list-number {
    color: var(--accent);
    flex: 0 0 120px;
    font-family: var(--font-display);
    font-size: 64px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 0.85;
}

/* Topics page (custom-topics.hbs) */

.topics-section {
    display: flex;
    flex-direction: column;
}

.topics-series,
.topics-list {
    border-top: 3px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topics-series {
    gap: 20px;
    padding-top: 24px;
}

.topics-series-item {
    align-items: flex-start;
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px dotted var(--rule);
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;

    .series-box-label span {
        background: var(--accent);
        color: var(--on-accent);
        display: inline-block;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.1em;
        line-height: 1.4;
        padding: 5px 9px;
        text-transform: uppercase;
    }
}

.topics-series-name {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 36px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 1;
    padding: 0 4px;
    text-transform: uppercase;

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

.topics-series-description {
    background: var(--paper);
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0 4px;
}

.topics-list { column-gap: 32px; }

.topics-item {
    align-items: baseline;
    border-bottom: 1px dotted var(--rule);
    display: flex;
    flex: 1 1 300px;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 0;
}

.topics-name {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 32px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    text-transform: uppercase;

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

.topics-count {
    color: var(--muted);
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 13px;
}

.topics-series-item .topics-count {
    background: var(--paper);
    padding: 0 4px;
}

/* Pagination */

.pagination {
    align-items: center;
    border-top: 3px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding-top: 28px;
}

.pagination-newer,
.pagination-older {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 14px 22px;
    text-transform: uppercase;

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

.pagination-page {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ============================================================ */
/* Post Header */
/* ============================================================ */

.post-header-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 64px var(--gutter) 52px;
}

.post-header-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1.4;
    margin: 0;

    .tag-link {
        background: var(--sticker-paper);
        color: color-mix(in oklab, var(--accent), black 35%);
        font-family: var(--font-mono);
        font-size: 13px;
        padding: 5px 10px;
        rotate: 1.5deg;

        &:first-child { background: var(--sticker-ink); color: #fff; rotate: -2deg; }
        &:hover { background: var(--sticker-ink); color: #fff; }
    }

    .series-badge {
        background: var(--sticker-ink);
        color: #fff;
        font-size: 13px;
        padding: 5px 10px;
        rotate: -1deg;
    }
}

.post-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 8vw, 112px);
    font-stretch: 62%;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.88;
    margin: 0;
    max-width: 1000px;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 14px;
    gap: 4px 0;
    line-height: 1.5;
    margin: 0;

    > * + *::before { content: "·"; margin: 0 10px; }

    a:hover { text-decoration: underline; }
}

/* ============================================================ */
/* Post Body */
/* ============================================================ */

/* Not .post: Ghost's {{post_class}} puts that class on every post card and log entry */
.article {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--measure);
    padding: 60px var(--gutter) 32px;
    width: 100%;
}

.post-feature-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 44px;

    figcaption {
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 13px;
    }
}

/* Series box */

.series-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px dotted var(--rule);
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 18px 18px;
    margin: 0 0 44px;
    padding: 20px 22px;
}

.series-box-label {
    line-height: 1.4;
    margin: 0;

    a {
        background: var(--accent);
        color: var(--on-accent);
        display: inline-block;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.1em;
        padding: 5px 9px;
        text-transform: uppercase;
    }
}

.series-box-parts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 28px;

    li {
        font-family: var(--font-display);
        font-size: 20px;
        font-stretch: 75%;
        font-weight: 800;
        line-height: 1.3;

        &::marker { color: var(--accent-text); font-family: var(--font-mono); font-size: 14px; font-weight: 400; }
    }

    a {
        background: var(--paper);
        color: var(--ink);
        padding: 0 4px;

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

    .is-current a {
        background: var(--ink);
        color: var(--paper);
    }
}

/* Content */

.post-content {
    > * { margin-top: 0; margin-bottom: 28px; }

    > p:first-child { font-size: 21px; line-height: 1.7; }

    a:not([class]) {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 3px;
        text-underline-offset: 4px;

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

    h1, h2, h3, h4, h5, h6 {
        color: var(--ink);
        font-family: var(--font-display);
        margin-top: 48px;
        margin-bottom: 18px;
    }

    h1, h2, h3 {
        display: flex;
        gap: 12px;
        align-items: baseline;
        font-stretch: 62%;
        font-weight: 900;
        line-height: 0.95;
        text-transform: uppercase;

        &::before {
            color: var(--accent-text);
            flex-shrink: 0;
            font-family: var(--font-mono);
            font-size: 20px;
            font-stretch: normal;
            font-weight: 400;
        }
    }

    h1 { font-size: 52px; &::before { content: "#"; } }
    h2 { font-size: 48px; &::before { content: "##"; } }
    h3 { font-size: 34px; &::before { content: "###"; font-size: 16px; } }
    h4 { font-size: 24px; font-stretch: 75%; font-weight: 800; line-height: 1.15; }
    h5, h6 { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

    ul, ol {
        padding-left: 24px;

        li { margin-bottom: 8px; }
        li::marker { color: var(--accent-text); }
        ul, ol { margin: 8px 0 0; }
    }

    mark {
        background: linear-gradient(transparent 58%, var(--accent-wash) 58%);
        color: inherit;
    }

    strong { color: var(--ink); font-weight: 600; }

    blockquote:not([class]) {
        border: 0;
        margin: 40px 0;
        padding: 0;

        &::before {
            color: var(--accent);
            content: "“";
            display: block;
            font-family: var(--font-display);
            font-size: 96px;
            font-stretch: 62%;
            font-weight: 900;
            height: 40px;
            line-height: 0.9;
        }

        p {
            color: var(--ink);
            font-size: 24px;
            font-style: italic;
            line-height: 1.5;
            margin: 0 0 12px;

            &:last-child { margin-bottom: 0; }
        }
    }

    .kg-blockquote-alt {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 36px;
        font-stretch: 75%;
        font-style: normal;
        font-weight: 800;
        line-height: 1.15;
        margin: 48px 0;
        padding: 0;
        text-align: center;
    }

    hr {
        border: 0;
        border-top: 1px dotted var(--rule);
        margin: 48px 0;
    }

    > img,
    .kg-image-card img { margin: 0 auto; }

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

    table {
        border-top: 3px solid var(--ink);
        display: block;
        font-size: 16px;
        overflow-x: auto;
        width: 100%;

        th {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.04em;
            padding: 12px 10px;
            text-align: left;
            text-transform: uppercase;
        }

        td { padding: 10px; }
        tr { border-bottom: 1px dotted var(--rule); }
    }

    /* Responsive video embeds */
    iframe[src*="youtube.com"],
    iframe[src*="youtube-nocookie.com"],
    iframe[src*="player.vimeo.com"] {
        aspect-ratio: 16 / 9;
        height: auto;
        width: 100%;
    }
}

/* ============================================================ */
/* Code */
/* ============================================================ */

code,
kbd,
pre {
    font-family: var(--font-mono);
}

.post-content {
    :not(pre) > code {
        background: var(--code-inline-background);
        color: var(--accent-text);
        font-size: 0.82em;
        padding: 0.12em 0.4em;
        white-space: pre-wrap;
    }

    pre {
        background: var(--code-background);
        box-shadow: 8px 8px 0 var(--accent);
        color: var(--code-text);
        font-size: 14px;
        line-height: 1.7;
        margin: 36px 0 40px;
        overflow-x: auto;
        position: relative;
        white-space: pre;

        code {
            background: none;
            display: block;
            padding: 20px 22px;
        }

    }

    pre code.hljs { background: none; padding: 20px 22px; }

    /* Code card caption becomes a filename tab above the block */
    .kg-code-card {
        display: flex;
        flex-direction: column-reverse;
        margin: 36px 0 40px;

        pre { margin: 0; }
    }

    /* Header bar: the code card's caption (filename) and/or the language
       label added by scripts.js. Blocks with neither have no header. */
    .kg-code-card figcaption,
    .code-header {
        align-items: center;
        background: var(--sticker-ink);
        border-bottom: 1px solid #3f3f46;
        color: #fff;
        display: flex;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        gap: 16px;
        line-height: 1.5;
        margin: 0;
        padding: 8px 14px;
        text-align: left;

        /* Keep the offset shadow continuous behind the header */
        box-shadow: 8px 0 0 var(--accent);
    }

    .code-header {
        margin-top: 36px;

        + pre { margin-top: 0; }
    }

    .code-lang {
        color: #f9a8d4;
        font-weight: 400;
        margin-left: auto;
    }

    kbd {
        background: var(--paper-raised);
        border: 1px solid var(--border);
        box-shadow: 0 2px 0 var(--border);
        font-size: 0.8em;
        padding: 1px 7px;
    }
}

/* ============================================================ */
/* Koenig Editor Cards */
/* ============================================================ */

.post-content {
    .kg-image-card,
    .kg-gallery-card,
    .kg-embed-card {
        margin: 40px 0;
    }

    .kg-width-wide {
        margin-left: min(0px, calc(50% - min(42.5vw, 520px)));
        margin-right: min(0px, calc(50% - min(42.5vw, 520px)));
        min-width: 100%;
        position: relative;
        width: min(85vw, 1040px);

        img { width: 100%; }
    }

    .kg-width-full {
        left: 50%;
        margin-left: -50vw;
        position: relative;
        width: 100vw;

        img { width: 100%; }

        figcaption { padding: 0 16px; }
    }

    /* Bookmark: the same frame as the featured card. Selectors start at
       .kg-bookmark-card to outrank Ghost's own card stylesheet. */
    .kg-bookmark-card {
        margin: 36px 0 40px;

        a.kg-bookmark-container {
            background: var(--paper-raised);
            border: 3px solid var(--ink);
            border-radius: 0;
            box-shadow: 6px 6px 0 var(--accent);
            color: var(--text);
            text-decoration: none;

            &:hover { box-shadow: 9px 9px 0 var(--accent); color: var(--text); }
        }

        .kg-bookmark-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 18px 20px;
        }

        .kg-bookmark-title {
            color: var(--ink);
            font-family: var(--font-display);
            font-size: 24px;
            font-stretch: 75%;
            font-weight: 800;
            line-height: 1.1;
        }

        .kg-bookmark-description {
            color: var(--text-soft);
            font-family: var(--font-body);
            font-size: 16px;
            line-height: 1.5;
            margin: 0;
        }

        .kg-bookmark-metadata {
            align-items: center;
            color: var(--muted);
            display: flex;
            flex-wrap: wrap;
            font-family: var(--font-mono);
            font-size: 12px;
            gap: 6px;
            margin: 4px 0 0;
        }

        .kg-bookmark-icon {
            height: 16px;
            margin: 0;
            width: 16px;
        }

        .kg-bookmark-author,
        .kg-bookmark-publisher { color: inherit; }

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

    /* Callout */
    .kg-callout-card {
        border-radius: 0;
        font-size: 17px;
        line-height: 1.6;
    }
}

/* ============================================================ */
/* Post Footer */
/* ============================================================ */

.post-footer {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 48px;
}

.post-nav {
    border-bottom: 3px solid var(--ink);
    border-top: 3px solid var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}

.post-nav-link {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
}

.post-nav-newer { text-align: right; }

.post-nav-label {
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
}

.post-nav-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 30px;
    font-stretch: 65%;
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
}

a.post-nav-link:hover .post-nav-title { color: var(--accent-text); }

.post-nav-link.is-empty {
    .post-nav-label { color: var(--muted); }
    .post-nav-title { color: var(--faint); }
}

.author-box {
    align-items: center;
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 18px 18px;
    border: 1px dotted var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
}

.author-box-avatar {
    border-radius: 50%;
    height: 48px;
    object-fit: cover;
    width: 48px;
}

.author-box-text {
    background: var(--paper);
    color: var(--text-soft);
    flex: 1 1 300px;
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    padding: 2px 6px;

    a { color: var(--ink); font-weight: 600; }
}

.post-comments {
    border-top: 1px dotted var(--rule);
    margin-top: 48px;
    padding-top: 40px;
}

/* ============================================================ */
/* Site Footer */
/* ============================================================ */

.site-footer {
    margin-top: 48px;
}

.site-footer-inner {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--wide);
    padding: 36px var(--gutter);
}

.site-footer-title {
    font-family: var(--font-display);
    font-size: 64px;
    font-stretch: 62%;
    font-weight: 900;
    line-height: 0.85;
    text-transform: uppercase;
}

.site-footer-copyright {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;

    a { text-decoration: underline; text-underline-offset: 3px; }
}

.site-footer-top {
    align-items: center;
    background: var(--sticker-paper);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;

    .accent-band & { color: var(--sticker-ink); }

    &:hover { background: var(--sticker-ink); }
    .accent-band &:hover { color: #fff; }
}

/* ============================================================ */
/* NProgress (runs over the accent band, so it's white) */
/* ============================================================ */

#nprogress .bar { background: #fff; height: 3px; }

#nprogress .peg { box-shadow: 0 0 10px #fff, 0 0 5px #fff; }

#nprogress .spinner-icon {
    border-top-color: #fff;
    border-left-color: #fff;
}

/* ============================================================ */
/* Icons */
/* ============================================================ */

.icon {
    display: inline-block;
    height: 1em;
    vertical-align: -0.125em;
    width: 1em;
}

/* ============================================================ */
/* Small Screens */
/* ============================================================ */

@media (max-width: 640px) {
    :root { --gutter: 16px; }

    body { font-size: 18px; }

    .site-nav-links { margin-left: 0; }

    .site-nav-search kbd { display: none; }

    .home-header-inner { padding-top: 28px; }

    .home-now { rotate: 0deg; }

    .featured { padding: 22px; box-shadow: 6px 6px 0 var(--accent); }

    /* Years become a sticky strip above their posts */
    .log-year,
    .log-group-year,
    .series-list-number {
        flex-basis: 100%;
        font-size: 44px;
    }

    .log.is-grouped .log-group-year {
        background: var(--paper);
        padding: 6px 0;
        top: 0;
        z-index: 2;
    }

    .log-title { font-size: 26px; }

    .article { padding-top: 40px; }

    .post-content {
        h1 { font-size: 40px; }
        h2 { font-size: 38px; }
        h3 { font-size: 28px; }
        pre { box-shadow: 5px 5px 0 var(--accent); }
        .kg-code-card figcaption, .code-header { box-shadow: 5px 0 0 var(--accent); }
        blockquote:not([class]) p { font-size: 21px; }
    }

    .post-nav-newer { text-align: left; }
}