/* Hallmark · macrostructure: Long Document · tone: technical · anchor hue: Pika yellow · pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · mobile: pass (34,49,50–57) */
/* pika-blog — visual parity with pika-site (tokens.css transcribed verbatim
 * from /website/site tokens.css; nav/footer/card patterns from its
 * styles.css). Square corners, 2px ink rules, no shadows, accent #ffde34,
 * dark bands not dark mode. Zero inline styles anywhere: entrance stagger
 * uses nth-child delays.
 *
 * Fonts are vendored @fontsource-variable woff2 files served from the
 * content-addressed asset bundle; the URLs below hard-code each file's
 * asset hash (first 128 bits of its SHA-256). A page.zig unit test pins
 * these URLs against the generated bundle. */

@font-face {
  font-family: 'Ubuntu Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/8f34f6aeb6d02bae33e841c33848bfa6/ubuntu-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Ubuntu Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/6dbc809e2d4bcfd83ce69eb2d5187f81/ubuntu-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu Sans Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/dae1c963ed7bc60f9614e391f36f12e8/ubuntu-sans-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/18be452724bfdc236c074ca94a249a7f/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/79bfdab9ba467e26eea4122e6f2567e1/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- tokens.css (pika-site, verbatim) ---- */
:root {
  --color-paper: oklch(97.5% 0.015 96);
  --color-paper-2: oklch(94% 0.025 96);
  --color-paper-3: oklch(89% 0.04 96);
  --color-ink: oklch(26% 0.012 96);
  --color-ink-2: oklch(36% 0.014 96);
  --color-muted: oklch(48% 0.018 96);
  --color-rule: oklch(72% 0.025 96);
  --color-accent: oklch(90.2% 0.173 96.7);
  --color-accent-hot: oklch(95.1% 0.202 104.5);
  --color-accent-ink: oklch(24% 0.012 96);
  --color-focus: oklch(44% 0.15 82);
  --color-dark-paper: oklch(18% 0.015 96);
  --color-dark-paper-2: oklch(23% 0.016 96);
  --color-dark-ink: oklch(95% 0.014 96);
  --color-dark-muted: oklch(76% 0.018 96);
  --color-dark-rule: oklch(38% 0.02 96);

  --font-display: 'Ubuntu Sans Variable', 'Ubuntu Sans', ui-sans-serif, sans-serif;
  --font-body: 'Ubuntu Sans Variable', 'Ubuntu Sans', ui-sans-serif, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --text-3xl: 3.052rem;
  --text-4xl: 3.815rem;
  --text-display: clamp(3rem, 6vw + 1rem, 5.25rem);
  --text-display-small: clamp(2.35rem, 4vw + 1rem, 4rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --rule-hair: 1px;
  --rule-heavy: 2px;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --control-height: 3rem;
  --control-height-sm: 2.25rem;
  --page-gutter: clamp(1rem, 4vw, 4rem);
  --page-max: 92rem;
  --banner-height: 4.5rem;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-sticky-nav: 210;

  --measure: 65ch;
}

/* ---- base (pika-site styles.css) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--color-paper); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
a:active, summary:active { transform: translateY(1px); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.page-shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- nav slab ---- */
.nav-slab {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky-nav);
  min-height: var(--banner-height);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--page-gutter);
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand-word { color: var(--color-ink); }
.brand-mark {
  width: 8rem;
  height: 2.5rem;
  object-fit: contain;
  display: block;
}
.brand-chip {
  padding: 0 var(--space-xs);
  background: var(--color-ink);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.desktop-nav {
  display: none;
  margin-inline-start: auto;
  align-items: center;
  gap: var(--space-lg);
}
.desktop-nav a, .mobile-nav a, .mobile-nav summary,
.nav-signout, .account-name {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.account-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.nav-signout-form { margin: 0; }
.nav-signout {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-signout:hover, .nav-signout:focus-visible { background: var(--color-accent); }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--rule-heavy);
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-short) var(--ease-out);
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.mobile-nav { position: relative; margin-inline-start: auto; min-width: 4.5rem; }
.mobile-nav summary {
  cursor: pointer;
  list-style: none;
  padding-inline: var(--space-sm);
  border: var(--rule-heavy) solid var(--color-ink);
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav > div {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  min-width: 12rem;
  display: none;
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-3);
}
.mobile-nav[open] > div { display: grid; }
.mobile-nav a {
  padding-inline: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-ink);
}
.mobile-nav .account-name, .mobile-nav .nav-signout {
  max-width: none;
  width: 100%;
  padding-inline: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-ink);
}

/* ---- buttons + text links ---- */
.button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-lg);
  border: var(--rule-heavy) solid var(--color-ink);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out),
              background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.button.primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button.secondary { background: var(--color-paper); color: var(--color-ink); }
.button:hover, .button:focus-visible { background: var(--color-ink); color: var(--color-accent); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: 0.55; }
.footer-meta a, .pager-link, .post-pager-link, .author-links a {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.pager-link:hover, .pager-link:focus-visible,
.post-pager-link:hover, .post-pager-link:focus-visible,
.author-links a:hover, .author-links a:focus-visible { background: var(--color-accent); }

/* ---- listing header ---- */
.listing-header {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-xl) var(--space-lg);
}
.listing-header h1 { font-size: var(--text-display-small); max-width: 18ch; }
.listing-header .lead {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  max-width: 52ch;
}

/* ---- post cards (edition-card pattern) ---- */
.post-list {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  padding-block: var(--space-lg) var(--space-2xl);
}
.post-card {
  min-width: 0;
  display: grid;
  align-content: start;
  border-block-start: var(--rule-heavy) solid var(--color-ink);
}
.post-card-link { display: grid; gap: 0; min-width: 0; }
.post-card figure {
  min-width: 0;
  overflow: hidden;
  background: var(--color-paper-3);
  margin: 0;
}
.post-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}
.post-card:focus-within img { transform: scale(1.015); }
.post-card-copy { display: grid; gap: var(--space-sm); padding-block-start: var(--space-lg); }
.post-card-copy h2 { font-size: var(--text-xl); }
.post-card-link:hover h2, .post-card-link:focus-visible h2 { background: var(--color-accent); }
.post-card-meta, .post-meta, .search-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.post-card-excerpt { max-width: 48ch; color: var(--color-ink-2); }
.post-card-tags, .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.post-card-tags a, .post-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.post-card-tags a:hover, .post-card-tags a:focus-visible,
.post-tags a:hover, .post-tags a:focus-visible {
  background: var(--color-ink);
  color: var(--color-accent);
}

/* ---- pager ---- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-2xl);
  border-block-start: var(--rule-heavy) solid var(--color-ink);
}
.pager-status {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- search ---- */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
}
.search-form input[type="search"] {
  flex: 1 1 16rem;
  min-height: var(--control-height);
  padding-inline: var(--space-sm);
  border: var(--rule-heavy) solid var(--color-ink);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.empty-state {
  padding-block: var(--space-xl) var(--space-2xl);
  color: var(--color-ink-2);
}
.empty-state p { max-width: 52ch; }

/* ---- post page ---- */
.post { padding-block: var(--space-xl) var(--space-2xl); }
.post-header { display: grid; gap: var(--space-sm); max-width: 60rem; }
.post-header h1 { font-size: var(--text-display-small); }
.post-meta a { border-block-end: var(--rule-heavy) solid var(--color-ink); }
.post-meta a:hover, .post-meta a:focus-visible { background: var(--color-accent); }
.preview-banner {
  width: fit-content;
  margin-block-end: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-cover { position: relative; margin-block: var(--space-xl); max-width: 60rem; }
.hero-figure::before {
  content: '';
  position: absolute;
  inset: var(--space-sm) calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) var(--space-sm);
  z-index: -1;
  background: var(--color-accent);
  border: var(--rule-heavy) solid var(--color-ink);
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--rule-heavy) solid var(--color-ink);
}

/* ---- markdown body (~65ch measure, research type scale) ---- */
.post-body, .author-bio {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink);
}
.post-body { margin-block-start: var(--space-xl); }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote,
.post-body table, .post-body pre { margin-block: 0 var(--space-lg); }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  margin-block: var(--space-2xl) var(--space-md);
}
.post-body h1 { font-size: var(--text-2xl); }
.post-body h2 { font-size: var(--text-xl); }
.post-body h3 { font-size: var(--text-lg); }
.post-body h4 { font-size: var(--text-md); font-family: var(--font-mono); }
.post-body a {
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  transition: background-color var(--dur-short) var(--ease-out);
}
.post-body a:hover, .post-body a:focus-visible { background: var(--color-accent); }
.post-body blockquote {
  padding: var(--space-sm) var(--space-lg);
  border-inline-start: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}
.post-body hr {
  margin-block: var(--space-xl);
  border: 0;
  border-block-start: var(--rule-heavy) solid var(--color-ink);
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.post-body th, .post-body td {
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  text-align: start;
}
.post-body th {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-paper-3);
  border-color: var(--color-ink);
}
.post-body .align-center { text-align: center; }
.post-body .align-right { text-align: right; }
.post-body li { margin-block-end: var(--space-2xs); }
.task-list-item { list-style: none; }
.task-checkbox { accent-color: var(--color-accent); margin-inline-end: var(--space-xs); }
.markdown-image {
  margin-block: var(--space-lg);
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-3);
}
.post-body video {
  display: block;
  width: 100%;
  margin-block: var(--space-lg);
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-dark-paper);
}
.post-body code, .author-bio code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--color-paper-3);
  border: var(--rule-hair) solid var(--color-rule);
}
.post-body pre code, .author-bio pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--text-sm);
}
.code-block {
  margin-block: 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  overflow-x: auto;
  background: var(--color-paper-3);
  border: var(--rule-heavy) solid var(--color-ink);
  line-height: 1.55;
}

/* ---- zhl palette (21 classes) recolored to the pika ink/paper scheme ---- */
.zhl-plain { color: var(--color-ink); }
.zhl-comment, .zhl-doc-comment, .zhl-container-doc-comment {
  color: var(--color-muted);
  font-style: italic;
}
.zhl-string, .zhl-multiline-string, .zhl-char { color: oklch(43% 0.11 140); }
.zhl-escape, .zhl-format-placeholder { color: oklch(45% 0.13 50); }
.zhl-number-integer, .zhl-number-float { color: oklch(45% 0.13 50); }
.zhl-keyword { color: var(--color-ink); font-weight: 800; }
.zhl-operator { color: var(--color-ink-2); }
.zhl-builtin { color: oklch(42% 0.13 310); }
.zhl-function { color: oklch(40% 0.11 255); }
.zhl-type-name { color: oklch(42% 0.1 200); }
.zhl-parameter { color: var(--color-ink-2); }
.zhl-field { color: oklch(38% 0.08 280); }
.zhl-label { color: var(--color-muted); font-weight: 700; }
.zhl-punctuation { color: var(--color-muted); }
.zhl-invalid {
  color: oklch(45% 0.19 25);
  text-decoration: underline wavy oklch(45% 0.19 25);
}

/* ---- post footer: tags, author, pager, comments ---- */
.post-footer {
  display: grid;
  gap: var(--space-xl);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-heavy) solid var(--color-ink);
  max-width: 60rem;
  background: transparent;
  color: var(--color-ink);
}
.author-card {
  display: flex;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg);
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
}
.author-avatar {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: var(--rule-heavy) solid var(--color-ink);
  flex: none;
}
.author-card-copy { display: grid; gap: var(--space-xs); min-width: 0; }
.author-name {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
}
.author-name a:hover, .author-name a:focus-visible { background: var(--color-accent); }
.author-bio { font-size: var(--text-base); color: var(--color-ink-2); }
.author-bio p { margin-block: 0 var(--space-xs); }
.author-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-pager {
  display: grid;
  gap: var(--space-md);
}
.post-pager-link { white-space: normal; }
.post-pager-link span {
  color: var(--color-muted);
  margin-inline-end: var(--space-xs);
}
.comments {
  width: 100%;
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  padding: var(--space-lg);
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.comments h2 { font-size: var(--text-lg); }
.comment-count {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-ink-2);
}
.comments-placeholder, .comments-empty { color: var(--color-ink-2); max-width: var(--measure); }
.comment-list {
  width: 100%;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}
.comment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.comment-pending { border: var(--rule-heavy) dashed var(--color-ink); }
.comment-avatar {
  width: 3rem;
  height: 3rem;
  flex: none;
  object-fit: cover;
  overflow: hidden;
  border: var(--rule-heavy) solid var(--color-ink);
  /* Paints the box (and hides broken-image glyphs) while the CDN loads
   * or 404s. */
  background: var(--color-paper-3);
  color: var(--color-paper-3);
}
.comment-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.comment-author {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.comment-flag {
  padding: 0 var(--space-2xs);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comment-body { color: var(--color-ink); overflow-wrap: anywhere; max-width: var(--measure); }
.comment-delete { margin-block-start: var(--space-3xs); }
.comment-delete .button {
  min-height: 36px;
  padding-inline: var(--space-sm);
  font-size: var(--text-sm);
}
.button.danger { background: var(--color-paper); color: var(--color-ink); }
.button.danger:hover, .button.danger:focus-visible {
  background: var(--color-ink);
  color: var(--color-accent-hot);
}
.comments-truncated, .comment-charcount {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.comments-closed {
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.comments-cta { margin: 0; }
.comment-form {
  width: 100%;
  max-width: var(--measure);
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}
.comment-form-identity {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.comment-form-identity .comment-avatar { width: 2rem; height: 2rem; }
.comment-form-identity strong { color: var(--color-ink); overflow-wrap: anywhere; }
.comment-form textarea {
  width: 100%;
  min-height: 10rem;
  padding: var(--space-md);
  border: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  resize: vertical;
}
.comment-form textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---- error page ---- */
.error-page {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  padding-block: var(--space-3xl);
}
.error-page h1 { font-size: var(--text-display-small); }
.error-message { color: var(--color-ink-2); max-width: 52ch; }

/* ---- footer band + marquee ---- */
body > footer { background: var(--color-dark-paper); color: var(--color-dark-ink); }
.footer-marquee {
  overflow: hidden;
  border-block: var(--rule-heavy) solid var(--color-dark-paper);
  background: var(--color-dark-paper);
  color: var(--color-accent);
}
.marquee-track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.marquee-group { display: flex; flex: none; }
.footer-marquee span {
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.footer-marquee:hover > div { animation-play-state: paused; }
.footer-meta {
  min-height: 5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-lg);
  color: var(--color-dark-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.footer-meta > span { margin-inline-end: auto; }
.footer-meta a { border-color: var(--color-dark-muted); color: var(--color-dark-ink); }
.footer-meta a:hover, .footer-meta a:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
body > footer a:focus-visible { outline-color: var(--color-accent); }

/* ---- entrance stagger (nth-child, no inline styles) ---- */
.entrance {
  opacity: 0;
  transform: translateY(var(--space-xs));
  animation: enter var(--dur-long) var(--ease-out) forwards;
}
@keyframes enter { to { opacity: 1; transform: none; } }
.post-list .post-card:nth-child(1) { animation-delay: 0ms; }
.post-list .post-card:nth-child(2) { animation-delay: 80ms; }
.post-list .post-card:nth-child(3) { animation-delay: 160ms; }
.post-list .post-card:nth-child(4) { animation-delay: 240ms; }
.post-list .post-card:nth-child(5) { animation-delay: 320ms; }
.post-list .post-card:nth-child(6) { animation-delay: 400ms; }
.post-list .post-card:nth-child(7) { animation-delay: 480ms; }
.post-list .post-card:nth-child(8) { animation-delay: 560ms; }
.post-list .post-card:nth-child(9) { animation-delay: 640ms; }
.post-list .post-card:nth-child(10) { animation-delay: 720ms; }

/* ---- responsive ---- */
@media (min-width: 40rem) {
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .desktop-nav { display: flex; }
  .mobile-nav { display: none; }
  .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover img { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .entrance { opacity: 1; transform: none; animation: none; }
  .marquee-track { animation: none; }
}