/* =========================================================================
   Design system — monochrome, one accent
   Achromatic greys carry the interface. Colour appears only on links, the
   focus ring and the active navigation item. Contrast ratios in the comments
   are measured against the background of the same theme.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
    color-scheme: dark;

    --bg: #0b0b0c;
    --bg-subtle: #141417;
    --bg-inset: #1c1c20;

    --border: #2a2a2f;         /* decorative hairline */
    --border-strong: #3f3f47;  /* section edge */
    --field-border: #63636c;   /* 3.3:1 on --bg, 3.1:1 on the field fill (WCAG 1.4.11) */
    --field-border-hover: #7c7c86;

    --fg: #f2f2f3;             /* 17.6:1 */
    --fg-2: #c9c9ce;           /* 11.9:1 */
    --fg-muted: #9d9da6;       /*  7.3:1 */

    --accent: #7fb2ff;         /*  9.1:1 */
    --accent-hover: #9cc3ff;   /* 10.9:1, hover raises contrast */

    --btn-bg: #f2f2f3;
    --btn-fg: #0b0b0c;
    --btn-bg-hover: #ffffff;

    --selection-bg: #2f3c52;
    --selection-fg: #f2f2f3;

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

    --step--1: clamp(0.8125rem, 0.797rem + 0.066vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
    --step-1: clamp(1.1875rem, 1.11rem + 0.33vw, 1.375rem);
    --step-2: clamp(1.375rem, 1.235rem + 0.6vw, 1.75rem);
    --step-3: clamp(1.75rem, 1.46rem + 1.24vw, 2.5rem);
    --step-4: clamp(2rem, 1.6rem + 1.7vw, 3rem);

    --leading-tight: 1.14;
    --leading-snug: 1.32;
    --leading-prose: 1.7;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-full: 999px;

    --width-page: 46rem;
    --measure: 68ch;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* A double ring reads on any surface, unlike a single outline on a hairline. */
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

    --duration: 150ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Light tokens live in two rules: the system preference, and the explicit
   toggle. `:not([data-theme="dark"])` lets the toggle win in both directions. */

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --bg: #ffffff;
        --bg-subtle: #fafafa;
        --bg-inset: #f1f1f3;

        --border: #e5e5e8;
        --border-strong: #cdcdd3;
        --field-border: #8f8f98;   /* 3.2:1 on --bg, 3.1:1 on the field fill */
        --field-border-hover: #75757e;

        --fg: #111113;             /* 18.9:1 */
        --fg-2: #3b3b42;           /* 11.1:1 */
        --fg-muted: #61616b;       /*  6.1:1 */

        --accent: #0b57d0;         /*  6.4:1 */
        --accent-hover: #08419c;   /*  9.4:1 */

        --btn-bg: #111113;
        --btn-fg: #ffffff;
        --btn-bg-hover: #000000;

        --selection-bg: #cddcfb;
        --selection-fg: #111113;
    }
}

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

    --bg: #ffffff;
    --bg-subtle: #fafafa;
    --bg-inset: #f1f1f3;

    --border: #e5e5e8;
    --border-strong: #cdcdd3;
    --field-border: #8f8f98;
    --field-border-hover: #75757e;

    --fg: #111113;
    --fg-2: #3b3b42;
    --fg-muted: #61616b;

    --accent: #0b57d0;
    --accent-hover: #08419c;

    --btn-bg: #111113;
    --btn-fg: #ffffff;
    --btn-bg-hover: #000000;

    --selection-bg: #cddcfb;
    --selection-fg: #111113;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------------------------- */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: var(--space-6);
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-prose);
    text-rendering: optimizeLegibility;
}

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

ul,
ol {
    list-style: none;
}

a {
    color: var(--accent);
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    text-underline-offset: 0.2em;
    transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}

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

button,
input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-4) * -4);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--duration) var(--ease);
}

.skip-link:focus {
    top: var(--space-4);
}

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */

.site-header,
.site-main,
.footer-inner,
.announcement-inner {
    width: 100%;
    max-width: var(--width-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main {
    flex: 1;
    padding-block: var(--space-7) var(--space-9);
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.wordmark {
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-right: auto;
}

.wordmark a {
    color: var(--fg);
    text-decoration: none;
}

.wordmark a:hover {
    color: var(--fg);
    text-decoration: underline;
}

.site-nav {
    display: flex;
    gap: var(--space-4);
}

.nav-link {
    color: var(--fg-muted);
    font-size: var(--step--1);
    text-decoration: none;
    padding-block: var(--space-1);
}

.nav-link:hover {
    color: var(--fg);
}

.nav-link.is-active {
    color: var(--fg);
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.social-links {
    display: flex;
    gap: var(--space-1);
}

/* 44x44 hit target on a 18px glyph, per the touch-target guideline. */
.icon-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    cursor: pointer;
    transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.icon-button:hover {
    color: var(--fg);
    background: var(--bg-inset);
}

.theme-toggle .icon-sun {
    display: none;
}

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

:root[data-theme="light"] .theme-toggle .icon-moon {
    display: none;
}

/* -------------------------------------------------------------------------
   5. Announcement
   ------------------------------------------------------------------------- */

.announcement {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    font-size: var(--step--1);
}

.announcement-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: var(--space-3);
    color: var(--fg-muted);
}

.announcement-date {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.8em;
}

/* -------------------------------------------------------------------------
   6. Index
   ------------------------------------------------------------------------- */

.intro {
    margin-bottom: var(--space-8);
}

.intro-title {
    font-size: var(--step-3);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

.intro-tagline {
    margin-top: var(--space-2);
    color: var(--fg-muted);
}

.post-group + .post-group {
    margin-top: var(--space-8);
}

.group-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.group-period {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* The rule fills whatever space the label and the RSS link leave. */
.group-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
    order: 1;
}

.rss-link {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-decoration: none;
}

.rss-link:hover {
    color: var(--fg);
}

/* Dividers, not cards: no shadow, no lift, no border box. */
.post-card {
    padding-block: var(--space-5);
    border-top: 1px solid var(--border);
}

.post-card:first-child {
    border-top: none;
    padding-top: 0;
}

.post-card-title {
    font-size: var(--step-1);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
}

.post-card-title a {
    color: var(--fg);
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--accent);
}

.post-card-meta,
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step--1);
}

.post-card-description {
    margin-top: var(--space-3);
    color: var(--fg-2);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tag-list:empty {
    display: none;
}

.tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-decoration: none;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

a.tag:hover {
    color: var(--fg);
    border-color: var(--border-strong);
}

.empty-state {
    padding-block: var(--space-8);
    color: var(--fg-muted);
    text-align: center;
}

/* -------------------------------------------------------------------------
   7. Post
   ------------------------------------------------------------------------- */

.breadcrumb {
    margin-bottom: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--step--1);
}

.breadcrumb a {
    color: var(--fg-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--fg);
}

.post-header {
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.post-title {
    font-size: var(--step-4);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* The article body is a grid, so code, tables and images break out of the
   reading measure while the prose stays at ~68 characters. */
.post-content {
    display: grid;
    grid-template-columns:
        [wide-start] minmax(0, 1fr)
        [text-start] min(100%, var(--measure)) [text-end]
        minmax(0, 1fr) [wide-end];
    margin-top: var(--space-7);
}

.post-content > * {
    grid-column: text;
}

.post-content > pre,
.post-content > table,
.post-content > figure,
.post-content > img,
.post-content > .table-scroll {
    grid-column: wide;
}

.post-content > * + * {
    margin-top: var(--space-4);
}

/* Markdown headings arrive one level down, so `##` is an h3 and `###` an h4.
   The scale follows that shift instead of the raw tag name. */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-top: var(--space-7);
    color: var(--fg);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
    scroll-margin-top: var(--space-6);
}

.post-content > :is(h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.post-content h2 {
    font-size: var(--step-2);
}

.post-content h3 {
    font-size: var(--step-1);
}

.post-content h4 {
    font-size: var(--step-0);
}

.post-content h5,
.post-content h6 {
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
}

/* Body prose keeps the primary colour. Muted greys are for metadata only. */
.post-content p,
.prose p {
    color: var(--fg);
}

.post-content ul,
.post-content ol,
.prose ul,
.prose ol {
    padding-left: var(--space-5);
    list-style: revert;
}

.post-content li + li,
.prose li + li {
    margin-top: var(--space-2);
}

.post-content li::marker {
    color: var(--fg-muted);
}

.post-content strong {
    font-weight: 600;
}

.post-content blockquote {
    padding-left: var(--space-4);
    border-left: 2px solid var(--border-strong);
    color: var(--fg-muted);
    font-style: italic;
}

.post-content hr {
    margin-block: var(--space-7);
    border: none;
    border-top: 1px solid var(--border);
}

.post-content img {
    margin-block: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.post-content code {
    padding: 0.15em 0.4em;
    background: var(--bg-inset);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875em;
}

.post-content pre {
    margin-block: var(--space-6);
    padding: var(--space-4);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.post-content pre code {
    padding: 0;
    background: none;
    font-size: var(--step--1);
    line-height: 1.6;
}

/* Tables: the Markdown renderer emits them, so they need real styling. */
.post-content table {
    width: 100%;
    margin-block: var(--space-6);
    border-collapse: collapse;
    font-size: var(--step--1);
    display: block;
    overflow-x: auto;
}

.post-content th,
.post-content td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.post-content th {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-color: var(--border-strong);
    white-space: nowrap;
}

.post-content tbody tr:last-child td {
    border-bottom: none;
}

/* -------------------------------------------------------------------------
   8. Post navigation
   ------------------------------------------------------------------------- */

.post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.post-nav:empty {
    display: none;
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--duration) var(--ease);
}

.post-nav-link:hover {
    border-color: var(--border-strong);
}

.post-nav-link.is-next {
    text-align: right;
    align-items: flex-end;
}

.post-nav-label {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step--1);
}

.post-nav-title {
    color: var(--fg);
    font-weight: 500;
    line-height: var(--leading-snug);
}

/* -------------------------------------------------------------------------
   9. Pages
   ------------------------------------------------------------------------- */

.page-title {
    font-size: var(--step-3);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.page-lede {
    margin-top: var(--space-2);
    color: var(--fg-muted);
}

.tag-name {
    font-family: var(--font-mono);
    color: var(--accent);
}

.page .post-list {
    margin-top: var(--space-7);
}

.page.is-centered {
    padding-block: var(--space-8);
    text-align: center;
}

.error-code {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: var(--step-2);
}

.page.is-centered .button {
    margin-top: var(--space-6);
}

.section-title {
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.about-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.avatar {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.prose > * + * {
    margin-top: var(--space-4);
}

.link-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.link-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    font-size: var(--step--1);
    text-decoration: none;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.link-row:hover {
    color: var(--fg);
    border-color: var(--border-strong);
}

/* -------------------------------------------------------------------------
   10. Footer and subscribe
   ------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--border);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    padding-block: var(--space-6);
}

.footer-meta {
    color: var(--fg-muted);
    font-size: var(--step--1);
}

.built-with {
    margin-top: var(--space-1);
}

.built-with a {
    color: var(--fg-muted);
    text-decoration-color: var(--border-strong);
}

.built-with a:hover {
    color: var(--fg);
}

.subscribe {
    max-width: 22rem;
    flex: 1 1 18rem;
}

.subscribe-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--fg-muted);
    font-size: var(--step--1);
}

.subscribe-row {
    display: flex;
    gap: var(--space-2);
}

.subscribe-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-subtle);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    font-size: var(--step--1);
    transition: border-color var(--duration) var(--ease);
}

.subscribe-input::placeholder {
    color: var(--fg-muted);
}

.subscribe-input:hover {
    border-color: var(--field-border-hover);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius-md);
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.button:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg);
}

/* -------------------------------------------------------------------------
   11. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 40rem) {
    :root {
        --gutter: var(--space-4);
    }

    .site-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .site-nav {
        order: 3;
        width: 100%;
        gap: var(--space-5);
        padding-top: var(--space-2);
    }

    .about-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .post-nav-link.is-next {
        text-align: left;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
   12. Motion and print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

@media print {
    .site-header,
    .site-footer,
    .announcement,
    .post-nav,
    .breadcrumb,
    .skip-link {
        display: none;
    }

    body {
        background: #ffffff;
        color: #000000;
    }
}