/* ==========================================================================
   Klaas — site styles. Plain modern CSS: no framework, no build step.
   Direction: a warm logbook. Cream paper, warm ink, square panels, headings in a serif
   with character, North Sea blue as the colour and a short, thick stroke on a thin line as the mark.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Monospace for small labels, dates and code. */
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-latin.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* Headings: a soft serif with character; optical size follows the font size. */
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/Fraunces-latin-Italic.woff2") format("woff2");
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
    color-scheme: light dark;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Fraunces", ui-serif, Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

    --bg: light-dark(oklch(98.6% 0.017 88), oklch(17% 0.008 60));
    --surface: light-dark(oklch(95.6% 0.027 84), oklch(21.5% 0.01 60));
    --surface-2: light-dark(oklch(92.4% 0.035 80), oklch(26% 0.012 60));
    --text: light-dark(oklch(20% 0.012 60), oklch(95% 0.015 85));
    --muted: light-dark(oklch(46% 0.02 60), oklch(72% 0.02 75));
    --border: light-dark(oklch(87.5% 0.03 80), oklch(32% 0.012 60));
    /* North Sea blue: buttons, links, the mark. */
    --accent: light-dark(oklch(45% 0.085 215), oklch(76% 0.08 200));
    --accent-text: light-dark(oklch(43% 0.085 215), oklch(80% 0.08 200));
    --accent-contrast: light-dark(oklch(98.6% 0.017 88), oklch(17% 0.008 60));
    /* Ochre: the warm second colour, for highlights and marks on dark panels. */
    --ochre: oklch(80% 0.13 78);
    --ochre-soft: light-dark(oklch(88% 0.1 85), oklch(45% 0.08 75));
    /* Deep sea: the dark panel of the newest post. */
    --deep: light-dark(oklch(31% 0.055 220), oklch(29% 0.05 220));

    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0: clamp(1.0625rem, 1.03rem + 0.17vw, 1.1875rem);
    --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
    --step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.65rem);
    --step-3: clamp(1.65rem, 1.45rem + 1vw, 2.25rem);
    --step-4: clamp(2rem, 1.6rem + 2vw, 3.25rem);
    --step-5: clamp(2.4rem, 1.7rem + 3.4vw, 4.5rem);
    --step-6: clamp(2.8rem, 1.6rem + 5vw, 5.75rem);

    --measure: 42rem;
    --wide: 76rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-height: 4.25rem;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --tok-keyword: light-dark(oklch(50% 0.17 300), oklch(77% 0.13 300));
    --tok-string: light-dark(oklch(48% 0.12 150), oklch(81% 0.13 150));
    --tok-number: light-dark(oklch(55% 0.15 50), oklch(81% 0.12 65));
    --tok-property: light-dark(oklch(47% 0.13 245), oklch(79% 0.1 235));
    --tok-type: light-dark(oklch(50% 0.1 195), oklch(81% 0.1 190));
    --tok-function: light-dark(oklch(48% 0.15 265), oklch(80% 0.1 270));
    --tok-variable: light-dark(oklch(52% 0.17 355), oklch(79% 0.12 355));
}

/* Explicit choice via the theme toggle; otherwise the system decides. */
:root[data-theme="light"] {
    color-scheme: light;
}

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

/* ---------- Base ---------- */

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

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-optical-sizing: auto;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0;
}

p, li, figcaption, blockquote {
    text-wrap: pretty;
}

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

a {
    color: inherit;
}

::selection {
    background: var(--ochre-soft);
    color: oklch(20% 0.012 60);
}

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

.wrap {
    width: min(100% - 2 * var(--gutter), var(--measure));
    margin-inline: auto;
}

.wrap--wide {
    width: min(100% - 2 * var(--gutter), var(--wide));
}

/* Pages sit in the reading column; .bleed widens a section to --wide. */
.site-main {
    flex: 1;
    display: grid;
    container-type: inline-size;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
        [content-start] min(100% - 2 * var(--gutter), var(--measure))
        [content-end] minmax(0, calc((var(--wide) - var(--measure)) / 2))
        [wide-end] minmax(var(--gutter), 1fr) [full-end];
    align-content: start;
    padding-bottom: 6rem;

    & > * {
        grid-column: content;
        min-width: 0;
    }

    & > :is(.bleed, .page-header--wide) {
        grid-column: wide;
    }

    & > .horizon {
        grid-column: full;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -4rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;

    &:focus {
        top: 0.75rem;
    }
}

/* Small monospace capitals: dates, counts, section names. */
.label,
.eyebrow,
.section-label {
    margin: 0 0 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.section-label {
    margin-top: 3.5rem;
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--ochre);
    color: oklch(20% 0.012 60);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.empty {
    margin-block: 3rem;
    color: var(--muted);
}

.icon {
    flex: none;
    width: 1.1em;
    height: 1.1em;
}

/* Square buttons in sea blue. */
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;

    & .icon {
        transition: translate 0.2s var(--ease);
    }

    &:hover {
        border-color: var(--text);
        background: var(--text);
        color: var(--bg);

        & .icon {
            translate: 0.2rem 0;
        }
    }
}

.button--ghost {
    border-color: var(--text);
    background: transparent;
    color: var(--text);

    &:hover {
        border-color: var(--text);
        background: var(--text);
        color: var(--bg);
    }
}

/* ---------- The motif: a short, thick sea-blue stroke on a thin line ---------- */

.horizon {
    position: relative;
    height: 1px;
    background: var(--border);

    &::before {
        content: "";
        position: absolute;
        top: -1px;
        left: max(var(--gutter), (100% - var(--wide)) / 2);
        width: 3rem;
        height: 3px;
        background: var(--accent);
    }
}

.horizon--end::before {
    left: auto;
    right: max(var(--gutter), (100% - var(--wide)) / 2);
}

/* The same stroke under page and post titles. */
.page-header::after,
.post-header::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 2.5rem;
    background: var(--accent);
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
}

.wordmark {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

/* A full stop in sea blue; ochre on hover. */
.wordmark__dot {
    margin-left: 0.02em;
    color: var(--accent);
    transition: color 0.2s var(--ease);

    .wordmark:hover & {
        color: var(--ochre);
    }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    & a,
    & .theme-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 0.8rem;
        border: 0;
        background: none;
        font: inherit;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s, background-color 0.15s;

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

    & a.active {
        color: var(--text);
    }

    /* Search is the black button on the right. */
    & .site-nav__search {
        margin-left: 0.5rem;
        background: var(--accent);
        color: var(--accent-contrast);

        &:hover,
        &.active {
            background: var(--text);
            color: var(--bg);
        }

        & kbd {
            padding: 0 0.35em;
            border: 1px solid currentColor;
            font: 500 0.6875rem var(--font-mono);
            opacity: 0.6;
        }
    }
}

/* Small screens: the search button shrinks to its icon. */
@media (max-width: 34rem) {
    .site-nav__search :is(kbd, .site-nav__label) {
        display: none;
    }
}

.theme-toggle {
    &[hidden] {
        display: none !important;
    }

    /* Moon in light mode, sun in dark mode. */
    & .icon-sun {
        display: none;
    }
}

:root[data-theme="dark"] .theme-toggle {
    & .icon-sun {
        display: block;
    }

    & .icon-moon {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle {
        & .icon-sun {
            display: block;
        }

        & .icon-moon {
            display: none;
        }
    }
}

/* Bar at the top that fills while reading (scroll-driven, no JS). */
.reading-progress {
    display: none;
}

@supports (animation-timeline: scroll()) {
    .reading-progress {
        display: block;
        position: fixed;
        inset: 0 0 auto;
        z-index: 20;
        height: 3px;
        background: var(--accent);
        transform-origin: 0 50%;
        animation: reading-progress linear both;
        animation-timeline: scroll(root);
    }

    @keyframes reading-progress {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--surface);
    font-size: var(--step--1);
    color: var(--muted);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 4rem;
    padding-block: 3.5rem 2rem;

    & p {
        margin: 0;
    }
}

.site-footer__about {
    flex: 3 1 18rem;
    max-width: 28rem;

    & p {
        margin-top: 1rem;
        font-size: var(--step-0);
        line-height: 1.5;
    }
}

.site-footer__column {
    flex: 1 1 8rem;

    & h2 {
        margin: 0.3rem 0 1rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    & ul {
        display: grid;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--text);
        text-decoration: none;

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

.site-footer__legal {
    flex-basis: 100%;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
}

/* ---------- Hero & page headers ---------- */

.hero {
    padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5rem);
}

.hero--compact {
    padding-block: clamp(4rem, 10vw, 8rem) 2rem;
}

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

.hero__title {
    max-width: 15ch;
    font-size: var(--step-6);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.hero__intro {
    max-width: 38rem;
    margin-top: 1.75rem;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--muted);

    & p {
        margin: 0 0 0.75em;
    }

    & a {
        color: var(--text);
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.2em;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

/* Big type slides up into place when the page opens. */
@media (prefers-reduced-motion: no-preference) {
    .hero > *,
    .page-header > *,
    .post-header > * {
        animation: enter 0.7s var(--ease) both;
    }

    :is(.hero, .page-header, .post-header) > :nth-child(2) {
        animation-delay: 0.05s;
    }

    :is(.hero, .page-header, .post-header) > :nth-child(n + 3) {
        animation-delay: 0.1s;
    }

    @keyframes enter {
        from {
            opacity: 0;
            translate: 0 1rem;
        }
    }
}

.topics {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: clamp(3.5rem, 8vw, 5.5rem) 0 1.5rem;
}

.section-head__title {
    font-size: var(--step-4);
    font-weight: 400;
    letter-spacing: -0.025em;
}

.section-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s, gap 0.2s var(--ease);

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

.page-header {
    padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3rem);
}

.page-title {
    font-size: var(--step-5);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
}

.page-lede {
    margin: 1rem 0 0;
    font-size: var(--step-1);
    color: var(--muted);

    & a {
        color: var(--text);
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.2em;
    }
}

/* ---------- Tags ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;

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

.chip--active {
    border-color: var(--text);
    background: var(--text);
    color: var(--bg);

    & .chip__count {
        color: inherit;
        opacity: 0.6;
    }
}

.chip__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
}

.tag-cloud {
    margin-block: 0;
}

.page-header--wide + .bleed .tag-cloud {
    margin-bottom: 2.5rem;
}

/* ---------- Post cards: beige panels in a tight grid ---------- */

.cards {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    transition: background-color 0.2s;

    &:hover {
        background: var(--surface-2);

        & .card__cover {
            scale: 1.04;
        }

        & .card__more {
            color: var(--accent-text);

            & .icon {
                translate: 0.25rem 0;
            }
        }
    }
}

.card__media {
    overflow: hidden;
}

.card__cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: scale 0.6s var(--ease);
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.card__topic {
    font-weight: 600;
    color: var(--accent-text);
}

.card__title {
    font-size: var(--step-2);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;

    & a {
        text-decoration: none;

        /* Whole card is clickable. */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
        }
    }
}

.card__summary {
    margin: 0.75rem 0 0;
    font-size: 0.975em;
    line-height: 1.55;
    color: var(--muted);
}

.card__more {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: auto 0 0;
    padding-top: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s;

    & .icon {
        transition: translate 0.2s var(--ease);
    }

    & span {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        color: var(--muted);
    }
}

/* The newest post: an inverted panel across the full width. */
.card--featured {
    grid-column: 1 / -1;
    background: var(--deep);
    color: oklch(96% 0.015 85);

    &:hover {
        background: var(--deep);

        & .card__title {
            color: var(--ochre);
        }
    }

    & :is(.card__meta, .card__summary, .card__more span) {
        color: inherit;
        opacity: 0.7;
    }

    & .card__topic,
    & .card__more {
        color: var(--ochre);
    }

    & .card__title {
        max-width: 22ch;
        font-size: var(--step-4);
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.05;
        transition: color 0.15s;
    }

    & .card__summary {
        max-width: 40rem;
        font-size: var(--step-1);
    }

    & .card__body {
        padding: clamp(1.75rem, 5vw, 3.5rem);
    }
}

@container (min-width: 46rem) {
    .card--featured.card--photo {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);

        & .card__cover {
            height: 100%;
            aspect-ratio: auto;
        }
    }
}

/* Cards rise into view while scrolling (scroll-driven, no JS). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .card {
            animation: rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }

        @keyframes rise {
            from {
                opacity: 0;
                translate: 0 1.5rem;
            }
        }
    }
}

/* ---------- Post ---------- */

/* The article's parts take their place in the page grid directly. */
.post {
    display: contents;

    & > * {
        grid-column: content;
        min-width: 0;
    }
}

.post-header {
    padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3rem);
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.post-meta__topic {
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;

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

.post-title {
    font-size: var(--step-5);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.post-lede {
    margin: 1.5rem 0;
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--muted);
}

.post-cover {
    /* Breaks out of the reading column up to --wide. */
    margin: 0 calc(50% - min(50cqi - var(--gutter), var(--wide) / 2)) 3.5rem;

    & img {
        width: 100%;
        max-height: 36rem;
        object-fit: cover;
    }
}

.post-layout {
    position: relative;
}

.toc {
    margin-bottom: 2.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    font-size: 0.9375rem;

    & ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & li {
        margin-block: 0.35rem;
    }

    & a {
        display: block;
        color: var(--muted);
        text-decoration: none;
        line-height: 1.4;
        transition: color 0.15s;

        &:hover,
        &.is-active {
            color: var(--text);
        }

        &.is-active {
            font-weight: 600;
        }
    }
}

.toc__title {
    margin: 0 0 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.toc__level-3 {
    padding-left: 0.9rem;
}

/* Wide screens: table of contents moves into the right margin and sticks. */
@media (min-width: 84rem) {
    .toc {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% + 3.5rem);
        width: 14rem;
        margin: 0;
        padding: 0;
        background: none;
    }

    .toc__inner {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
        padding-left: 1rem;
        border-left: 1px solid var(--border);
    }
}

.post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 3rem;
}

.post-actions__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;

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

.related {
    margin-top: 4.5rem;

    & .section-label {
        margin-top: 0;
    }
}

.related__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    text-decoration: none;
    transition: background-color 0.15s;

    &:hover {
        background: var(--surface-2);
    }
}

.related__title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.related__date {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--muted);
}

.related + .post-nav {
    margin-top: 0.5rem;
}

.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 4.5rem;
}

.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--surface);
    text-decoration: none;
    transition: background-color 0.15s;

    &:hover {
        background: var(--surface-2);
    }
}

.post-nav__link--next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.post-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.post-nav__title {
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

@media (max-width: 40rem) {
    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav__link--next {
        grid-column: auto;
    }
}

/* ---------- Prose (rendered markdown) ---------- */

.prose {
    line-height: 1.75;

    & > :first-child {
        margin-top: 0;
    }

    & p,
    & ul,
    & ol,
    & blockquote,
    & figure,
    & table,
    & .code-block,
    & pre {
        margin-block: 0 1.4em;
    }

    & h2 {
        margin: 2.4em 0 0.7em;
        font-size: var(--step-3);
        letter-spacing: -0.035em;
    }

    & h3 {
        margin: 2em 0 0.6em;
        font-size: var(--step-2);
    }

    & h4 {
        margin: 1.8em 0 0.5em;
        font-size: var(--step-1);
    }

    & a {
        color: inherit;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.2em;
        transition: color 0.15s;

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

    & strong {
        font-weight: 650;
    }

    & ul,
    & ol {
        padding-left: 1.4em;
    }

    & li {
        margin-block: 0.35em;

        &::marker {
            color: var(--accent);
        }
    }

    & ul > li::marker {
        content: "–\00a0\00a0";
        font-weight: 600;
    }

    & ol > li::marker {
        font-family: var(--font-mono);
        font-size: 0.85em;
    }

    & .contains-task-list {
        padding-left: 0.25em;
        list-style: none;
    }

    & .task-list-item input {
        margin: 0 0.6em 0 0;
        accent-color: var(--accent);
    }

    & blockquote {
        margin-inline: 0;
        padding: 0.1em 0 0.1em 1.25em;
        border-left: 3px solid var(--accent);
        font-size: var(--step-1);
        font-weight: 500;
        line-height: 1.45;
        letter-spacing: -0.015em;

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

    & img {
        margin-inline: auto;
        cursor: zoom-in;
    }

    & figure {
        margin-inline: 0;
    }

    & figcaption {
        margin-top: 0.75rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.03em;
        color: var(--muted);
    }

    & hr {
        position: relative;
        overflow: visible;
        height: 1px;
        margin: 3.5em 0;
        border: 0;
        background: var(--border);

        &::after {
            content: "";
            position: absolute;
            top: -1px;
            left: 50%;
            width: 3rem;
            height: 3px;
            translate: -50% 0;
            background: var(--accent);
        }
    }

    & code {
        font-family: var(--font-mono);
        font-size: 0.85em;
        /* Show => and >= as typed, not as ligatures. */
        font-variant-ligatures: none;
    }

    & :not(pre) > code {
        padding: 0.1em 0.35em;
        background: var(--surface-2);
    }

    & pre {
        overflow-x: auto;
        padding: 2.25rem 1.35rem 1.25rem;
        background: var(--surface);
        font-size: 0.85rem;
        line-height: 1.7;
        tab-size: 4;

        & code {
            font-size: inherit;
        }
    }

    & table {
        display: block;
        overflow-x: auto;
        border-collapse: collapse;
        font-size: 0.9375rem;
        font-variant-numeric: tabular-nums;
    }

    & th,
    & td {
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
        vertical-align: top;
    }

    & th {
        border-bottom-color: var(--text);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    & kbd {
        padding: 0.1em 0.4em;
        border: 1px solid var(--border);
        border-bottom-width: 2px;
        background: var(--surface);
        font-family: var(--font-mono);
        font-size: 0.8em;
    }

    & mark {
        padding: 0 0.15em;
        background: var(--ochre-soft);
        color: inherit;
    }

    & .footnotes {
        margin-top: 3rem;
        font-size: var(--step--1);
        color: var(--muted);
    }
}

/* "#" link next to headings, added by site.js. */
.prose .heading-anchor {
    margin-left: 0.35em;
    color: var(--muted);
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s;

    :is(h2, h3):hover > &,
    &:focus-visible {
        opacity: 1;
    }

    @media (hover: none) {
        display: none;
    }
}

/* Syntax highlighting (server-side, see SyntaxHighlighter.cs). */
.tok-comment {
    color: var(--muted);
    font-style: italic;
}

.tok-keyword {
    color: var(--tok-keyword);
}

.tok-string {
    color: var(--tok-string);
}

.tok-number {
    color: var(--tok-number);
}

.tok-property {
    color: var(--tok-property);
}

.tok-type {
    color: var(--tok-type);
}

.tok-function {
    color: var(--tok-function);
}

.tok-variable {
    color: var(--tok-variable);
}

/* Code blocks get a copy button and language label from site.js. */
.code-block {
    position: relative;

    & pre {
        margin: 0;
    }

    &[data-lang]::before {
        content: attr(data-lang);
        position: absolute;
        top: 0.65rem;
        left: 1.35rem;
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
    }
}

.copy-button {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 0;
    background: var(--text);
    color: var(--bg);
    font: 500 0.75rem var(--font-sans);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s;

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

    .code-block:hover &,
    &:focus-visible {
        opacity: 1;
    }

    @media (hover: none) {
        opacity: 1;
    }
}

/* ---------- About page: wide intro with portrait, numbers, text beside a side column ---------- */

.about-hero {
    container-type: inline-size;
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);

    & .hero__actions {
        padding: 0;
        list-style: none;
    }

    @media (min-width: 56rem) {
        &:has(.portrait) {
            grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr);
            align-items: end;
            gap: clamp(2.5rem, 6vw, 5rem);
        }
    }
}

/* The photo from `cover:` in over.md: small above the text on phones, tall beside it on wide screens. */
.portrait {
    position: relative;
    width: 7.5rem;
    aspect-ratio: 1;
    overflow: hidden;
    order: -1;
    background: var(--deep);

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (min-width: 56rem) {
        width: 100%;
        aspect-ratio: 4 / 5;
        order: 0;
    }
}

/* A row of numbers in beige panels. */
.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;

    @media (min-width: 48rem) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fact {
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--surface);

    & dt {
        margin: 0;
    }

    & dd {
        margin: 0.75rem 0 0;
        font-family: var(--font-serif);
        font-size: var(--step-5);
        font-weight: 400;
        font-variant-numeric: lining-nums tabular-nums;
        letter-spacing: -0.03em;
        line-height: 1;
    }
}

.about-body {
    display: grid;
    gap: 3rem;
    margin-top: clamp(3.5rem, 8vw, 5.5rem);

    @media (min-width: 60rem) {
        grid-template-columns: minmax(0, var(--measure)) minmax(17rem, 22rem);
        justify-content: space-between;
    }

    & > .prose > :first-child {
        margin-top: 0;
    }
}

.about-aside {
    display: grid;
    gap: 1rem;
    align-self: start;

    @media (min-width: 60rem) {
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
    }
}

.about-panel {
    padding: 1.5rem;
    background: var(--surface);

    & .chip {
        background: var(--bg);
    }

    & .section-head__link {
        margin-top: 1.25rem;
    }
}

.about-panel--deep {
    background: var(--deep);
    color: oklch(96% 0.015 85);

    & .label,
    & .section-head__link {
        color: var(--ochre);
    }
}

.about-latest {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;

    & li + li {
        border-top: 1px solid color-mix(in oklch, currentColor 18%, transparent);
    }

    & a {
        display: grid;
        gap: 0.3rem;
        padding-block: 0.85rem;
        text-decoration: none;

        &:hover span {
            color: var(--ochre);
        }
    }

    & time {
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        opacity: 0.7;
    }

    & span {
        font-family: var(--font-serif);
        font-size: var(--step-1);
        line-height: 1.2;
        transition: color 0.15s;
    }
}

/* ---------- Archive ---------- */

/* Per year: a big year on the left that stays in view, the posts as rows beside it. */
.archive-year {
    display: grid;
    gap: 1rem 2rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);

    @media (min-width: 48rem) {
        grid-template-columns: 13rem minmax(0, 1fr);
    }
}

.archive-year__title {
    align-self: start;
    font-size: var(--step-5);
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;

    @media (min-width: 48rem) {
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
    }
}

.archive-year__count {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.archive-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row as a beige panel: date, title with summary, topic and reading time, arrow. */
.archive-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "date meta"
        "body body";
    align-items: baseline;
    gap: 0.6rem 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    text-decoration: none;
    transition: background-color 0.2s;

    & > .icon {
        display: none;
    }

    &:hover {
        background: var(--surface-2);

        & .archive-item__title {
            color: var(--accent-text);
        }

        & > .icon {
            translate: 0.25rem 0;
            color: var(--accent-text);
        }
    }

    @media (min-width: 40rem) {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
        grid-template-areas: "date body meta arrow";
        padding: 1.5rem 1.75rem;

        & > .icon {
            display: block;
            grid-area: arrow;
            align-self: center;
            transition: translate 0.2s var(--ease), color 0.15s;
        }
    }
}

.archive-item__body {
    grid-area: body;
    display: grid;
    gap: 0.4rem;
}

.archive-item__title {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-wrap: balance;
    transition: color 0.15s;
}

.archive-item__summary {
    max-width: 44rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}

.archive-item__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.archive-item__topic {
    font-weight: 600;
    color: var(--accent-text);
}

.archive-item__date {
    grid-area: date;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* ---------- Search ---------- */

.search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    transition: border-color 0.15s;

    &:focus-within {
        border-color: var(--text);
    }
}

.search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--step-1);

    &::placeholder {
        color: color-mix(in oklch, var(--muted) 75%, transparent);
    }

    &::-webkit-search-cancel-button {
        appearance: none;
    }
}

.search-results:empty {
    display: none;
}

.search-count {
    margin: 2rem 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.result-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.result {
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.result__title {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;

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

.result__meta {
    margin: 0.3rem 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.result__snippet {
    margin: 0;
    color: var(--muted);

    & mark {
        padding: 0 0.1em;
        background: var(--ochre-soft);
        color: var(--text);
    }
}

.search-browse .tag-cloud {
    margin-top: 1rem;
}

/* ---------- Callouts: > [!TIP], > [!LETOP] … (see Callouts.cs) ---------- */

.markdown-alert {
    --hue: 235;
    --alert: light-dark(oklch(50% 0.15 var(--hue)), oklch(76% 0.13 var(--hue)));
    margin-block: 0 1.4em;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--alert);
    background: var(--surface);

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

.markdown-alert-tip {
    --hue: 150;
}

.markdown-alert-important {
    --hue: 295;
}

.markdown-alert-warning {
    --hue: 65;
}

.markdown-alert-caution {
    --hue: 28;
}

.markdown-alert-title {
    margin-bottom: 0.4em !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alert);
}

/* ---------- Figures and galleries (see FigureRenderer.cs) ---------- */

.prose figure img {
    width: 100%;
}

/* Several images in one paragraph: a grid that is a bit wider than the text. */
.prose .gallery {
    display: grid;
    grid-template-columns: repeat(min(var(--count), 3), 1fr);
    gap: 0.4rem;
    margin-inline: calc(50% - min(50cqi - var(--gutter), 30rem));

    & img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    /* Two-up on small screens. */
    @media (max-width: 40rem) {
        grid-template-columns: repeat(min(var(--count), 2), 1fr);
    }
}

/* ---------- Search window (Ctrl+K, see site.js) ---------- */

.palette {
    width: min(100% - 2 * var(--gutter), 40rem);
    max-height: min(70dvh, 36rem);
    margin: 12dvh auto auto;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 2rem 5rem -1rem oklch(20% 0.03 60 / 0.35);
    overflow: hidden;

    &[open] {
        display: flex;
        flex-direction: column;
    }

    &::backdrop {
        background: oklch(20% 0.02 60 / 0.35);
        backdrop-filter: blur(3px);
    }

    & kbd {
        padding: 0.05em 0.4em;
        border: 1px solid var(--border);
        font: 500 0.6875rem var(--font-mono);
        color: var(--muted);
    }
}

.palette__field {
    flex: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: none;
}

.palette__results {
    overflow-y: auto;
    padding: 0;

    &:empty {
        display: none;
    }

    & .result {
        padding: 0.9rem 1.25rem;

        &.is-active {
            background: var(--surface);
            box-shadow: inset 3px 0 0 var(--accent);
        }
    }

    & .result__title {
        display: block;
        font-size: 1.0625rem;
        line-height: 1.3;
    }

    & .result__meta {
        margin-block: 0.25rem;
    }

    & .result__snippet {
        font-size: 0.9375rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.palette__empty {
    padding: 1rem 1.25rem;
    color: var(--muted);
}

.palette__hint {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--muted);
}

/* ---------- Lightbox ---------- */

.lightbox {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100dvh;
    padding: var(--gutter);
    border: 0;
    background: transparent;
    cursor: zoom-out;
    outline: 0;

    &[open] {
        display: grid;
        place-items: center;
    }

    &::backdrop {
        background: oklch(12% 0.01 60 / 0.94);
    }

    & figure {
        display: grid;
        justify-items: center;
        gap: 0.75rem;
        margin: 0;
    }

    & img {
        /* Fill the screen; object-fit keeps the proportions (also for SVGs without a size). */
        width: min(100vw - 2 * var(--gutter), 72rem);
        max-height: calc(100dvh - 2 * var(--gutter) - 2.5rem);
        object-fit: contain;
    }

    & figcaption {
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        color: oklch(85% 0.02 85);
        white-space: pre;
    }
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    background: oklch(100% 0 0 / 0.12);
    color: white;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s;

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

.lightbox__nav--prev {
    left: var(--gutter);
}

.lightbox__nav--next {
    right: var(--gutter);
}

/* ---------- View transitions between pages ---------- */

@view-transition {
    navigation: auto;
}

::view-transition-group(*) {
    animation-duration: 0.35s;
    animation-timing-function: var(--ease);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Print: just the text, with the address of every link ---------- */

@media print {
    :root {
        color-scheme: light;
    }

    .site-header,
    .site-footer,
    .horizon,
    .reading-progress,
    .toc,
    .post-cover,
    .post-actions,
    .related,
    .post-nav,
    .copy-button,
    .heading-anchor,
    .skip-link {
        display: none !important;
    }

    body {
        font-size: 11pt;
    }

    .site-main {
        padding: 0;
    }

    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--muted);
    }

    .prose pre {
        white-space: pre-wrap;
    }

    .prose :is(pre, figure, blockquote, .markdown-alert) {
        break-inside: avoid;
    }

    .prose :is(h2, h3) {
        break-after: avoid;
    }

    .card {
        animation: none !important;
    }
}