/* =============================================================================
   iainreid.dev — the homepage design system.

   One file, no build step, no imports. Organised as:

     1. Tokens        semantic OKLCH colour, type, space, radii, motion
     2. Reset         the small amount that is actually needed
     3. Primitives    wrap, ledger grid, kickers, links, buttons, tags
     4. Regions       header, intro, work, approach, foundations, about,
                      contact, footer, showdown dialog
     5. Responsive    three real layouts, not one layout shrinking

   The visual system: warm paper and warm ink carry the page, one cold cobalt
   accent comes out of the work, and every entry is numbered. Depth comes from
   layered transparent shadows; borders are reserved for structure (dividers,
   inputs, state). Motion is opt-in, short, reversible, and never declared
   with `transition: all`.

   Conventions followed throughout:
     - logical properties (inline-start / inline-end), never left / right
     - rem for type, measure, and breakpoints; px for hairlines and outlines
     - semantic tokens used only in their role
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */

:root {
    color-scheme: light dark;

    /* --- Colour: light (warm paper). ------------------------------------- */
    --bg: oklch(0.986 0.005 85);
    --bg-sunken: oklch(0.962 0.007 85);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.972 0.006 85);

    --text: oklch(0.24 0.014 65);
    --text-muted: oklch(0.45 0.012 68);
    --text-subtle: oklch(0.52 0.011 70);

    --border: oklch(0.885 0.008 82);
    --border-strong: oklch(0.76 0.01 80);

    --accent: oklch(0.48 0.155 258);
    --accent-hover: oklch(0.39 0.15 258);
    --accent-contrast: oklch(0.99 0.003 258);
    --accent-soft: oklch(0.945 0.028 258);

    --focus-ring: var(--accent);

    /* Depth. Three layers: a 1px ring, a lift, and ambient shadow. */
    --shadow-border:
        0 0 0 1px oklch(0 0 0 / 0.06),
        0 1px 2px -1px oklch(0 0 0 / 0.06),
        0 2px 4px 0 oklch(0 0 0 / 0.04);
    --shadow-border-hover:
        0 0 0 1px oklch(0 0 0 / 0.08),
        0 1px 2px -1px oklch(0 0 0 / 0.08),
        0 2px 4px 0 oklch(0 0 0 / 0.06);
    --shadow-raised:
        0 0 0 1px oklch(0 0 0 / 0.08),
        0 16px 40px -12px oklch(0 0 0 / 0.28);

    /* Image ring. Pure black in light, pure white in dark — never tinted. */
    --image-ring: oklch(0 0 0 / 0.1);

    --scrim: oklch(0.24 0.014 65 / 0.55);

    /* --- Type. A restrained scale: five sizes carry the whole page. ------- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Liberation Serif", serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
    --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.8vw + 1.25rem, 2.375rem);
    --text-3xl: clamp(2.375rem, 3.6vw + 1.4rem, 4rem);

    --leading-tight: 1.12;
    --leading-snug: 1.28;
    --leading-body: 1.58;

    /* Measure. Body copy sits at roughly 62–70 characters. */
    --measure: 64ch;
    --measure-tight: 54ch;

    /* --- Space ------------------------------------------------------------ */
    --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: clamp(4rem, 7vw, 7rem);

    /* --- Shell ------------------------------------------------------------ */
    --wrap: 74rem;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    --rail: 12rem;
    --header-h: 3.75rem;

    /* --- Radii — three steps, used consistently. -------------------------- */
    --radius-sm: 3px;
    --radius: 8px;
    --radius-lg: 14px;

    /* --- Motion ----------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 110ms;
    --dur: 180ms;

    --tap: 44px;
}

/* Dark is derived from the light palette and then retuned — chroma pulled
   back, lightness rebalanced — rather than mechanically inverted. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: oklch(0.175 0.008 70);
        --bg-sunken: oklch(0.14 0.008 70);
        --surface: oklch(0.21 0.009 72);
        --surface-2: oklch(0.245 0.01 72);

        /* APCA is polarity-aware: light-on-dark needs more lightness than
           intuition suggests. These are the measured minima for Lc 75 (body
           copy) and Lc 60 (labels) against both the darkest and the lightest
           surface above, so the dark range is deliberately compressed. */
        --text: oklch(0.965 0.006 85);
        --text-muted: oklch(0.875 0.009 82);
        --text-subtle: oklch(0.8 0.009 80);

        --border: oklch(0.33 0.01 75);
        --border-strong: oklch(0.46 0.012 75);

        --accent: oklch(0.865 0.1 250);
        --accent-hover: oklch(0.925 0.07 250);
        --accent-contrast: oklch(0.18 0.02 250);
        --accent-soft: oklch(0.3 0.05 252);

        --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
        --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
        --shadow-raised:
            0 0 0 1px oklch(1 0 0 / 0.1),
            0 16px 40px -12px oklch(0 0 0 / 0.7);

        --image-ring: oklch(1 0 0 / 0.1);
        --scrim: oklch(0.1 0.005 70 / 0.7);
    }
}

/* The explicit toggle wins over the system preference in both directions. */
:root[data-theme="dark"] {
    --bg: oklch(0.175 0.008 70);
    --bg-sunken: oklch(0.14 0.008 70);
    --surface: oklch(0.21 0.009 72);
    --surface-2: oklch(0.245 0.01 72);

    --text: oklch(0.965 0.006 85);
    --text-muted: oklch(0.875 0.009 82);
    --text-subtle: oklch(0.8 0.009 80);

    --border: oklch(0.33 0.01 75);
    --border-strong: oklch(0.46 0.012 75);

    --accent: oklch(0.865 0.1 250);
    --accent-hover: oklch(0.925 0.07 250);
    --accent-contrast: oklch(0.18 0.02 250);
    --accent-soft: oklch(0.3 0.05 252);

    --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
    --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
    --shadow-raised:
        0 0 0 1px oklch(1 0 0 / 0.1),
        0 16px 40px -12px oklch(0 0 0 / 0.7);

    --image-ring: oklch(1 0 0 / 0.1);
    --scrim: oklch(0.1 0.005 70 / 0.7);

    color-scheme: dark;
}

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

/* Increased contrast: widen the foreground/background lightness gap.

   These blocks must stay mutually exclusive by appearance. `:root:not(
   [data-theme="light"])` matches the document in light mode too — the
   attribute is simply absent — so the dark overrides have to be gated behind
   `prefers-color-scheme: dark` as well, or a light-mode visitor who turns on
   increased contrast gets near-white text on near-white paper. */
@media (prefers-contrast: more) {
    :root {
        --text: oklch(0.16 0.014 65);
        --text-muted: oklch(0.32 0.012 68);
        --text-subtle: oklch(0.36 0.011 70);
        --border: oklch(0.7 0.01 82);
        --border-strong: oklch(0.5 0.012 80);
        --accent: oklch(0.4 0.17 258);
        --accent-hover: oklch(0.32 0.16 258);
    }

    /* Explicitly chosen dark, whatever the system says. */
    :root[data-theme="dark"] {
        --text: oklch(1 0 0);
        --text-muted: oklch(0.955 0.006 82);
        --text-subtle: oklch(0.93 0.006 80);
        --border: oklch(0.52 0.012 75);
        --border-strong: oklch(0.68 0.014 75);
        --accent: oklch(0.94 0.06 250);
        --accent-hover: oklch(0.98 0.03 250);
    }
}

/* System dark, not overridden to light. */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text: oklch(1 0 0);
        --text-muted: oklch(0.955 0.006 82);
        --text-subtle: oklch(0.93 0.006 80);
        --border: oklch(0.52 0.012 75);
        --border-strong: oklch(0.68 0.014 75);
        --accent: oklch(0.94 0.06 250);
        --accent-hover: oklch(0.98 0.03 250);
    }
}

/* ----------------------------------------------------------------- 2. RESET */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-h) + var(--space-5));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

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

a { color: inherit; }

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

button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* One custom ring, offset far enough that it always lands on the page or
   card surface behind the control rather than on an accent fill. */
:where(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Windows High Contrast: hand the ring back to the system colour. */
@media (forced-colors: active) {
    :where(a, button, input, summary, [tabindex]):focus-visible {
        outline-color: Highlight;
    }
}

/* Smooth scrolling is motion, so it is opt-in like everything else. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Fallback kill switch. 0.01ms rather than none so transitionend still fires. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Parked just above the viewport rather than 999px to the side: `translate`
   is compositable, so the reveal is a short drop instead of a long slide
   across a layout property. */
.skip-link {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    translate: 0 calc(-100% - var(--space-4));
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
}

.skip-link:focus { translate: 0 0; }

/* ------------------------------------------------------------ 3. PRIMITIVES */

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

/* The ledger grid: a narrow meta rail and a wide content column on laptop and
   above, a stacked block with an inline meta row below that. Every numbered
   region uses it, which is what makes the page read as one system rather
   than a stack of unrelated sections. */
.ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.ledger__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
}

.ledger__body { min-width: 0; }

/* Mono kicker with a numeral — the page's counting device. */
.kicker {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.kicker__num {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.lead {
    max-width: var(--measure-tight);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* Links inside running copy: they thicken rather than move, so nothing
   shifts under the pointer. */
.link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
}

.link:hover {
    color: var(--accent-hover);
    text-decoration-thickness: 2px;
}

.action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.action__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

.action:hover { color: var(--accent-hover); }
.action:hover .action__label { text-decoration-thickness: 2px; }

.action__arrow { display: inline-block; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    /* Optical: the trailing side carries no glyph, so padding stays even. */
    padding-inline: var(--space-5);
    padding-block: var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-border);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    box-shadow: var(--shadow-border-hover);
    color: var(--accent);
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
}

.btn--primary:hover {
    background: var(--accent-hover);
    color: var(--accent-contrast);
}

/* Plain, non-decorative labels. They carry facts, which is the only reason
   they exist. */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tags li {
    padding: 0.25rem var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-muted);
}

/* Status is never colour alone: the dot is redundant with the text. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    flex: none;
}

.status[data-state="active"]::before { background: var(--accent); }

/* --------------------------------------------------------------- 4. REGIONS */

/* ---- Header. Compact, sticky, one hairline once the page moves. -----------*/

.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--bg);
    border-block-end: 1px solid transparent;
}

.site-header[data-scrolled="true"] { border-block-end-color: var(--border); }

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    text-decoration: none;
    color: var(--text);
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    flex: none;
}

.brand__name {
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

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

.site-nav__list {
    display: none;
    align-items: center;
    gap: var(--space-1);
}

.site-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.site-nav__list a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.site-nav__list a[aria-current="true"] {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Two icons, both in the DOM, cross-faded. No asset swap, no visibility jump. */
.theme-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    flex: none;
}

.theme-toggle:hover {
    color: var(--text);
    background: var(--surface-2);
}

.theme-toggle svg {
    grid-area: 1 / 1;
    width: 1.125rem;
    height: 1.125rem;
    /* 1.5px stroke sits beside regular-weight UI text. */
    stroke-width: 1.5;
}

.theme-toggle .icon-moon {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
}

.theme-toggle .icon-sun {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 1;
    scale: 1;
    filter: blur(0);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
        opacity: 0;
        scale: 0.25;
        filter: blur(4px);
    }

    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
        opacity: 1;
        scale: 1;
        filter: blur(0);
    }
}

/* ---- Sections -------------------------------------------------------------*/

.section {
    padding-block: var(--space-9);
    border-block-start: 1px solid var(--border);
}

.section__head { margin-block-end: var(--space-7); }

.section__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
    font-weight: 600;
    text-wrap: balance;
}

.section__line {
    margin-block-start: var(--space-3);
    max-width: var(--measure);
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ---- Intro ----------------------------------------------------------------*/

.intro { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-9); }

.intro__grid {
    display: grid;
    gap: var(--space-7);
}

.intro__name {
    margin-block-start: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.028em;
    font-weight: 600;
    text-wrap: balance;
}

.intro__statement {
    margin-block-start: var(--space-5);
    max-width: 24ch;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.35;
    font-weight: 400;
    text-wrap: balance;
}

.intro__note {
    margin-block-start: var(--space-5);
    max-width: var(--measure);
    color: var(--text-muted);
    text-wrap: pretty;
}

.intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
}

/* The concerns card: the three real categories, straight from the portfolio
   data. It is what stops the introduction being a large empty rectangle. */
.concerns {
    align-self: start;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-border);
}

.concerns__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.concerns__list { margin-block-start: var(--space-4); }

.concerns__list > div + div {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
}

.concerns__list dt {
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.005em;
}

.concerns__list dd {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ---- Work -----------------------------------------------------------------*/

.entries { display: grid; gap: var(--space-6); }

/* A project entry leads with what the thing is, why it matters, and how to
   reach it. The spine on the inline-start edge is the only decoration, and it
   marks the entry rather than describing it. */
.entry {
    position: relative;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-border);
}

.entry::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: var(--space-6);
    width: 2px;
    border-radius: 1px;
    background: var(--border-strong);
}

.entry:hover { box-shadow: var(--shadow-border-hover); }
.entry:hover::before { background: var(--accent); }

.entry--featured {
    background:
        linear-gradient(135deg, var(--accent-soft), transparent 42%),
        var(--surface);
    box-shadow: var(--shadow-raised);
}

.entry--featured::before {
    width: 4px;
    background: var(--accent);
}

.entry--secondary { background: var(--bg-sunken); }

.entry__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
}

.entry__body { min-width: 0; }

.entry__mark {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.entry__category {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.entry__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
    font-weight: 600;
    text-wrap: balance;
}

.entry__tagline {
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

.entry__summary,
.entry__detail {
    max-width: var(--measure);
    color: var(--text-muted);
    text-wrap: pretty;
}

.entry__summary { margin-block-start: var(--space-4); }
.entry__detail { margin-block-start: var(--space-3); }

.entry__block { margin-block-start: var(--space-5); }

.entry__block-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-block-end: var(--space-3);
}

.entry__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
}

/* Why it matters: the problem, then the response. */
.why {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--bg-sunken);
}

.entry--secondary .why { background: var(--surface); }

.why dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-block-end: var(--space-1);
}

.why dd {
    font-size: var(--text-sm);
    line-height: 1.55;
    max-width: var(--measure);
}

/* The flow: a project's actual sequence, numbered. */
.flow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.flow li {
    flex: 1 1 10rem;
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--bg-sunken);
}

.entry--secondary .flow li { background: var(--surface); }

.flow__step {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.flow__label {
    display: block;
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    /* These are short names in a narrow box. The document-wide break-word
       would split "Understanding" across two lines; wrap between words. */
    overflow-wrap: normal;
    hyphens: manual;
}

.flow__hint {
    display: block;
    margin-block-start: 0.15rem;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-subtle);
}

/* Bullet lists that stay readable in two columns on wide screens. */
.points {
    display: grid;
    gap: var(--space-2) var(--space-6);
}

.points li {
    position: relative;
    padding-inline-start: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    width: 5px;
    height: 1px;
    background: var(--accent);
}

/* Applied studies: real repositories VibeKB has been run against. */
.study + .study {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
}

.study__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.study__specimen {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

.study__name { font-size: var(--text-sm); font-weight: 650; }

.study__context {
    margin-block-start: var(--space-1);
    max-width: var(--measure);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}

.study .points { margin-block-start: var(--space-3); }

/* ---- Approach -------------------------------------------------------------*/

.principles { display: grid; gap: var(--space-6); }

.principle {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--border);
}

.principle__num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.principle__title {
    margin-block-start: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.principle__body {
    margin-block-start: var(--space-2);
    max-width: var(--measure);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}

.ties { margin-block-start: var(--space-4); }

.ties > div {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-2);
}

.ties > div + div { border-block-start: 1px solid var(--border); }

.ties dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-subtle);
}

.ties dd {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---- Foundations ----------------------------------------------------------*/

.foundations { display: grid; gap: var(--space-6); }

.foundation__title {
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: -0.005em;
}

.foundation__list { margin-block-start: var(--space-3); }

.foundation__list li {
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-muted);
}

/* ---- About ----------------------------------------------------------------*/

.about__grid {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

.about__portrait {
    width: 100%;
    max-width: 15rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* The source is wider than the 4:5 box, so the crop is horizontal only
       and the framing matches what the previous page showed. */
    object-position: center;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    /* Neutral ring, never tinted: black in light, white in dark. */
    outline: 1px solid var(--image-ring);
    outline-offset: -1px;
}

.about__body > * + * { margin-block-start: var(--space-4); }

.about__body p {
    max-width: var(--measure);
    color: var(--text-muted);
    text-wrap: pretty;
}

.about__signature {
    margin-block-start: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--text);
}

/* ---- Contact --------------------------------------------------------------*/

.contact__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    letter-spacing: -0.02em;
    font-weight: 600;
    text-wrap: balance;
}

.contact__title + .lead { margin-block-start: var(--space-4); }

.contact__email {
    display: inline-block;
    margin-block-start: var(--space-5);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
    overflow-wrap: anywhere;
}

.contact__email:hover {
    color: var(--accent-hover);
    text-decoration-thickness: 2px;
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.contact__status {
    margin-block-start: var(--space-3);
    min-height: 1.4em;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

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

.site-footer {
    padding-block: var(--space-6);
    border-block-start: 1px solid var(--border);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--text-subtle);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}

.site-footer__links a,
.site-footer__links button {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
}

.site-footer__links a:hover,
.site-footer__links button:hover { color: var(--accent); }

/* ---- Showdown dialog ------------------------------------------------------*/

.showdown[hidden] { display: none; }

.showdown {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    overscroll-behavior: contain;
}

.showdown__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.showdown__panel {
    position: relative;
    width: min(100%, 30rem);
    /* Padding is 32px, so the layers are independent surfaces and each radius
       is chosen on its own rather than forced concentric. */
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow-raised);
    overscroll-behavior: contain;
}

.showdown__close {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.showdown__close svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.5; }

.showdown__close:hover {
    color: var(--text);
    background: var(--surface-2);
}

.showdown__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    font-weight: 600;
    /* Clears the close button's 44px target. */
    padding-inline-end: var(--space-7);
}

.showdown__riddle {
    margin-block-start: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.showdown__form { margin-block-start: var(--space-5); }

.showdown__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-block-end: var(--space-2);
}

/* Inputs keep a real border: it is a structural affordance, not depth. */
.showdown__input {
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    /* 17px, so iOS Safari never zooms the page on focus. */
    font-size: var(--text-base);
}

.showdown__input:focus-visible { border-color: var(--accent); }

.showdown__submit { margin-block-start: var(--space-4); width: 100%; }

.showdown__feedback {
    margin-block-start: var(--space-3);
    min-height: 1.4em;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* --------------------------------------------------------------- 4b. MOTION
   Every transition lives here, so reduced motion gets the static interface by
   default rather than an override chasing each rule. Only compositable
   properties are animated, and no declaration uses `transition: all`.
   --------------------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
    .skip-link {
        transition-property: translate;
        transition-duration: var(--dur);
        transition-timing-function: var(--ease);
    }

    .link,
    .action,
    .action__label,
    .contact__email,
    .site-footer__links a,
    .site-footer__links button,
    .site-nav__list a,
    .theme-toggle,
    .showdown__close,
    .entry::before,
    .showdown__input {
        transition-property: color, background-color, border-color,
                             text-decoration-thickness;
        transition-duration: var(--dur-fast);
        transition-timing-function: var(--ease);
    }

    .site-header {
        transition-property: border-color;
        transition-duration: var(--dur);
        transition-timing-function: var(--ease);
    }

    .btn {
        transition-property: color, background-color, box-shadow, scale;
        transition-duration: var(--dur-fast);
        transition-timing-function: var(--ease);
    }

    .entry,
    .concerns {
        transition-property: box-shadow;
        transition-duration: var(--dur);
        transition-timing-function: var(--ease);
    }

    .action__arrow {
        transition-property: translate;
        transition-duration: var(--dur);
        transition-timing-function: var(--ease);
    }

    .action:hover .action__arrow { translate: 3px 0; }

    .theme-toggle svg {
        transition-property: opacity, scale, filter;
        transition-duration: var(--dur);
        transition-timing-function: var(--ease);
    }

    /* Tactile press feedback. 0.96 exactly; never below 0.95. */
    .btn:active,
    .theme-toggle:active { scale: 0.96; }
}

/* ------------------------------------------------------------- 5. RESPONSIVE
   Three real layouts. Each changes what sits beside what, not just how big
   things are. Breakpoints are in rem so they move with the user's base font
   size, and they are placed where the content stops fitting.
   --------------------------------------------------------------------------*/

/* Tablet — the concerns card moves beside the introduction, entry internals
   start using columns, and the supporting grids become two-up. */
@media (min-width: 40rem) {
    .site-nav__list { display: flex; }

    /* The text column is capped by its own measure, so the card is pulled in
       beside it rather than being pushed to a far edge across dead space. */
    .intro__grid {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
        align-items: start;
        gap: var(--space-7);
    }

    .entry { padding: var(--space-7); }
    .entry::before { inset-block: var(--space-7); }

    .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .foundations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-7);
    }

    .principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-7);
    }

    .about__grid {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: var(--space-7);
    }

    .about__portrait { max-width: none; }
}

/* Laptop — the ledger rail appears. Section numbers and project metadata move
   out of the content column into a left margin, which is the layout the whole
   design is built around. */
@media (min-width: 64rem) {
    .ledger {
        grid-template-columns: var(--rail) minmax(0, 1fr);
        gap: var(--space-7);
    }

    .ledger__rail {
        display: block;
        position: sticky;
        inset-block-start: calc(var(--header-h) + var(--space-5));
    }

    .ledger__rail > * + * { margin-block-start: var(--space-3); }

    .entry {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
    }

    .entry__rail {
        display: block;
        position: sticky;
        inset-block-start: calc(var(--header-h) + var(--space-6));
    }

    .entry__rail > * + * { margin-block-start: var(--space-2); }
    .entry__rail .status { display: flex; }

    .foundations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Wide desktop — more measure for the shell, a wider rail, and the flow steps
   stop wrapping. The page gets calmer rather than merely larger. */
@media (min-width: 90rem) {
    :root {
        --wrap: 82rem;
        --rail: 15rem;
    }

    .intro__grid {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
        gap: var(--space-8);
    }

    .entry { grid-template-columns: 11rem minmax(0, 1fr); }

    .flow li { flex: 1 1 0; }

    .principles { gap: var(--space-7) var(--space-8); }
}