/* Public site: "plain web, done carefully". Navy palette, Verdana.
   Light by default; dark only when the reader picks it (data-theme="dark"). */

:root {
    --bg: #ffffff;
    --fg: #1b1d22;
    --muted: #5c6270;
    --line: #d9dce3;
    --soft: #f5f7fb;
    --band: #1f3a5f;
    --band-fg: #ffffff;
    --band-sub: #b9c9e0;
    --accent: #c2410c;
    --link: #1a4fd6;
    --visited: #6b3fb3;
    --note-bg: #fdf7dc;
    --note-line: #e8d98f;
    --warn-bg: #fdf0e6;
    --warn-line: #e9b48a;
    --code-bg: #f3f6fb;
    --code-line: #d5deec;
    --code-k: #0b4fa3;
    --code-s: #1f7a4a;
    --code-n: #b45309;
    --code-c: #6b7280;
    --code-t: #7a3fb0;
    --topic-mix: 0%;
    --sans: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
    --mono: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #141619;
    --fg: #e3e5e8;
    --muted: #a0a6b1;
    --line: #30343b;
    --soft: #1c1f24;
    --band: #172a45;
    --band-fg: #ffffff;
    --band-sub: #9fb3cf;
    --accent: #f08a4b;
    --link: #8db0ff;
    --visited: #c5a3f5;
    --note-bg: #29261a;
    --note-line: #5c5328;
    --warn-bg: #2c2118;
    --warn-line: #6e4a2c;
    --code-bg: #1a1f27;
    --code-line: #2c3542;
    --code-k: #8db0ff;
    --code-s: #8fd19e;
    --code-n: #f0b37a;
    --code-c: #8d939c;
    --code-t: #c5a3f5;
    --topic-mix: 45%;
    color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.7 var(--sans);
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* ── header band ── */
.band { background: var(--band); border-bottom: 4px solid var(--accent); }
.band-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.band a.name { color: var(--band-fg); font-weight: bold; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration: none; }
.band a.name span { font-weight: normal; font-size: 0.75rem; color: var(--band-sub); margin-left: 0.6rem; }
.nav { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--band-sub); }
.nav a, .nav a:visited { color: var(--band-fg); }
.mode {
    margin-left: 0.5rem; font: 0.72rem var(--sans); color: var(--band-sub); background: none;
    border: 1px solid var(--band-sub); padding: 0.15rem 0.45rem; cursor: pointer;
}
.mode:hover { color: var(--band-fg); border-color: var(--band-fg); }

main.wrap { padding-top: 1.75rem; padding-bottom: 2rem; }

/* ── article index ── */
.intro { margin: 0 0 2.25rem; max-width: 36em; }
.label { font-size: 0.72rem; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.year { font-size: 0.95rem; color: var(--accent); margin: 1.5rem 0 0.4rem; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.index time { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.index .t { font-size: 1.05rem; line-height: 1.4; }
.index .d { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
.index .m { margin: 0.35rem 0 0; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; font-size: 0.72rem; color: var(--muted); }
.empty { color: var(--muted); }

.topic, .topic:visited {
    --tcol: color-mix(in srgb, var(--tc, var(--muted)), #ffffff var(--topic-mix));
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; color: var(--tcol); text-decoration: none; margin-right: 0.5rem;
}
.topic::before { content: ""; width: 0.55rem; height: 0.55rem; background: var(--tcol); }
.topic:hover { text-decoration: underline; }
.topic-big { font-size: 1.6rem; font-weight: bold; gap: 0.6rem; }
.topic-big::before { width: 1rem; height: 1rem; }
.page-title { margin: 0 0 0.5rem; }

/* ── article ── */
.crumb { font: 0.74rem/1.4 var(--mono); color: var(--muted); margin: 0 0 1.25rem; overflow-wrap: anywhere; }
.crumb a, .crumb a:visited { color: var(--muted); }
.post h1 { font-size: 1.9rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5rem; text-wrap: balance; }
.deck { font-size: 1.1rem; line-height: 1.5; color: var(--muted); margin: 0 0 0.8rem; }
.meta { font-size: 0.76rem; color: var(--muted); margin: 0 0 1.6rem; }
.meta .topic { font-size: 0.76rem; margin: 0 0 0 0.35rem; }
.cover { display: block; width: 100%; height: auto; border: 1px solid var(--line); margin: 0 0 1.75rem; }
.draft-banner { border: 1px solid var(--warn-line); border-left-width: 4px; background: var(--warn-bg); padding: 0.6rem 0.9rem; font-size: 0.82rem; margin: 0 0 1.25rem; }

.toc { display: inline-block; min-width: min(100%, 20rem); max-width: 100%; border: 1px solid var(--note-line); background: var(--note-bg); padding: 0.8rem 1.25rem 0.9rem 1rem; margin: 0 0 2rem; }
.toc b { display: block; font-size: 0.8rem; margin-bottom: 0.4rem; }
.toc ol { margin: 0; padding-left: 1.4rem; font-size: 0.86rem; line-height: 1.65; }
.toc ol ol { list-style: lower-alpha; padding-left: 1.2rem; }
.toc li::marker { color: var(--accent); font-weight: bold; }

/* ── article body ── */
.prose { counter-reset: section; }
.prose > * { margin-top: 0; margin-bottom: 1.15rem; }
.prose p { max-width: 38em; }
.prose h2 { font-size: 1.3rem; line-height: 1.35; margin: 2.4rem 0 0.8rem; letter-spacing: -0.01em; }
.prose h2::before { counter-increment: section; content: counter(section) "."; color: var(--accent); margin-right: 0.45em; }
.prose h3 { font-size: 1.05rem; margin: 1.8rem 0 0.6rem; }
.prose .anchor { margin-left: 0.4em; font-weight: normal; color: var(--muted); text-decoration: none; opacity: 0; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 1; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.35rem; }
.prose li > p { margin: 0; }
.prose li::marker { color: var(--muted); }
.prose blockquote { margin-left: 0; margin-right: 0; padding: 0.1rem 0 0.1rem 1rem; border-left: 3px solid var(--band); color: var(--muted); }
.prose blockquote p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.25rem 0; }
.prose :not(pre) > code { font: 0.86em var(--mono); background: var(--soft); border: 1px solid var(--line); padding: 0.05em 0.3em; }
.prose img { max-width: 100%; height: auto; }

.callout { padding: 0.75rem 1rem; border: 1px solid var(--note-line); border-left-width: 4px; background: var(--note-bg); }
.callout--warning { border-color: var(--warn-line); background: var(--warn-bg); }
.callout > * { margin: 0; }
.callout > * + * { margin-top: 0.6rem; }

.figure { margin-left: 0; margin-right: 0; }
.figure img { display: block; margin: 0 auto; border: 1px solid var(--line); }
.figure figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; text-align: center; }
.figure--wide img, .figure--full img { width: 100%; }
@media (min-width: 62rem) {
    .figure--wide { margin-left: -5rem; margin-right: -5rem; }
}
.figure--full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.figure--full img { border-left: 0; border-right: 0; }

/* code blocks (highlighted on the server by chroma) */
.code { border: 1px solid var(--code-line); border-left: 3px solid var(--code-k); background: var(--code-bg); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--code-line); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--code-k); }
.copy { font: 0.68rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--code-k); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.code pre { margin: 0; padding: 0.85rem 1rem; overflow-x: auto; }
.code code { font: 0.82rem/1.65 var(--mono); }
.code .k, .code .kc, .code .kd, .code .kn, .code .kp, .code .kr, .code .kt { color: var(--code-k); font-weight: bold; }
.code .nb { color: var(--code-k); }
.code .s, .code .s1, .code .s2, .code .sb, .code .sc, .code .sd, .code .se, .code .sh, .code .si, .code .sx { color: var(--code-s); }
.code .m, .code .mi, .code .mf, .code .mh, .code .mo, .code .il { color: var(--code-n); }
.code .c, .code .c1, .code .cm, .code .cs, .code .cp, .code .ch { color: var(--code-c); font-style: italic; }
.code .nt, .code .nf, .code .na, .code .nc { color: var(--code-t); }

.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; margin-top: 2.5rem; padding-top: 0.9rem; border-top: 3px solid var(--band); }
.pager span:last-child { text-align: right; margin-left: auto; }

.elsewhere { list-style: none; padding: 0; margin: 0 0 2.25rem; display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.9rem; }
.about .label { margin-top: 1rem; }

/* ── footer ── */
.colophon { border-top: 1px solid var(--line); padding-top: 0.9rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 0.72rem; color: var(--muted); }
.colophon p { margin: 0 0 0.25rem; }
.colophon a, .colophon a:visited { color: var(--muted); }

@media (max-width: 30rem) {
    body { font-size: 14.5px; }
    .index li { grid-template-columns: 1fr; gap: 0.2rem; }
    .post h1 { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .prose .anchor { transition: opacity 0.15s; }
}