/**
 * site.css
 * All the styles for kinderforce.org. The neutral colours, widths and
 * radius are the old blog's (Hugo PaperMod), light or dark to match the
 * visitor's system; the accents are sampled from the Kinderforce logo.
 *
 * Everything that moves is in the "Motion" section at the end, inside
 * `prefers-reduced-motion: no-preference`, so visitors who ask for reduced
 * motion get a still page. Scroll-linked effects are also behind
 * `@supports`, so browsers without them simply show the content.
 *
 * Created: 2026-11-04
 * Last modified: 2026-11-04
 */

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

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: light dark;

  /* PaperMod's sizes */
  --gap: 24px;
  --content-gap: 20px;
  --nav-width: 1024px;
  --main-width: 720px;
  --radius: 8px;

  /* PaperMod's light theme */
  --theme: rgb(255, 255, 255);
  --entry: rgb(255, 255, 255);
  --primary: rgb(30, 30, 30);
  --secondary: rgb(108, 108, 108);
  --tertiary: rgb(214, 214, 214);
  --content: rgb(31, 31, 31);
  --code-block-bg: rgb(28, 29, 33);
  --code-bg: rgb(245, 245, 245);
  --border: rgb(238, 238, 238);

  /* The logo's own colours */
  --night: #050407;
  --magenta: #d5066b;
  --lime: #aadc05;
  --cyan: #16a7ce;

  /* Accent text: the logo's magenta, darkened to read on white */
  --accent: #b8055c;
  --accent-tint: rgba(213, 6, 107, 0.1);
  --list-background: var(--code-bg);
  /* Tags and the next and previous post links */
  --chip-background: var(--code-bg);
  --raised-shadow: 0 12px 32px rgba(17, 17, 26, 0.08), 0 2px 6px rgba(17, 17, 26, 0.04);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PaperMod's dark theme */
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --tertiary: rgb(65, 66, 68);
    --content: rgb(196, 196, 197);
    --code-block-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(51, 51, 51);

    /* The logo's magenta, lightened to read on the dark theme */
    --accent: #ff5fa2;
    --accent-tint: rgba(255, 95, 162, 0.12);
    --list-background: var(--theme);
    /* PaperMod's grey text is too faint on its dark code background */
    --chip-background: var(--entry);
    --raised-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  }
}

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

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

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

body {
  --page-background: var(--theme);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--page-background);
  color: var(--content);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

body.list {
  --page-background: var(--list-background);
}

main {
  flex: 1;
}

h1,
h2,
h3,
h4 {
  color: var(--primary);
  line-height: 1.25;
}

a {
  color: inherit;
}

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

code,
pre {
  font-family: var(--font-code);
}

::selection {
  background: var(--magenta);
  color: #fff;
}

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

/* Anchored headings and sections clear the sticky header. */
[id] {
  scroll-margin-top: 88px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--nav-width) + var(--gap) * 2);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.wrap--prose {
  max-width: calc(var(--main-width) + var(--gap) * 2);
}

.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;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gap);
  z-index: 50;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--theme);
  font-size: 16px;
}

.skip-link:focus {
  top: 8px;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

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

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--page-background) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand__mark {
  width: 45px;
  height: 30px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(213, 6, 107, 0.25);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--primary);
  font-size: 16px;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--tertiary);
  transform: scaleX(0);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  font-weight: 600;
}

.site-nav a[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transform: scaleX(1);
}

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

.site-footer {
  margin-top: 72px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  color: var(--secondary);
  font-size: 14px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.site-footer p {
  margin: 0;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer__mark {
  width: 36px;
  height: 24px;
  border-radius: 5px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-block;
  padding: 4px 0;
  color: var(--secondary);
  text-underline-offset: 3px;
}

.site-footer a:hover {
  color: var(--accent);
}

/* ---------- Shared pieces ---------- */

.kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Kickers outside the hero start with a short accent rule. */
.page-heading .kicker::before,
.band__kicker::before,
.teaser__kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  margin-right: 10px;
  border-radius: 2px;
  background: currentColor;
  vertical-align: middle;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
  background: var(--magenta);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.button:hover {
  border-color: #b8055c;
  background: #b8055c;
  box-shadow: 0 10px 28px rgba(213, 6, 107, 0.35);
}

.button__icon {
  width: 18px;
  height: 18px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--secondary);
  font-size: 15px;
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
}

.breadcrumbs a {
  color: var(--secondary);
  text-underline-offset: 3px;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.page-heading {
  padding: 48px 0 28px;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 44px);
  letter-spacing: -0.015em;
}

.page-heading .lede {
  margin: 12px 0 0;
  color: var(--secondary);
  font-size: 20px;
}

.page-heading .lede a {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Positioned, so the visually hidden text in its cells is clipped with
   the rest of the table rather than widening the page. */
.table-scroll {
  position: relative;
  max-width: 100%;
  margin: 0 0 var(--content-gap);
  overflow-x: auto;
}

/* ---------- Home: hero ---------- */

/* The hero is its own stacking context, so its decorative layers sit
   behind the content and the logo can blend with them (see .hero__logo). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: #e9e9ea;
}

/* A faint circuit grid, fading out away from the logo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(22, 167, 206, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 167, 206, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 65% 85% at 72% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 85% at 72% 50%, #000 15%, transparent 72%);
}

/* Coloured light from the logo */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 46%, rgba(213, 6, 107, 0.22), transparent 30%),
    radial-gradient(circle at 66% 30%, rgba(22, 167, 206, 0.16), transparent 34%),
    radial-gradient(circle at 12% 95%, rgba(170, 220, 5, 0.07), transparent 28%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 32px 64px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hero__lede {
  max-width: 34em;
  margin: 18px 0 0;
  color: #c9c9cb;
  font-size: 20px;
}

/* The evidence under the introduction: ruled rows of a label and a link.
   Each row's label and the short stroke over its rule take one of the
   logo's three colours, lightened where needed to read on the near-black.
   The whole row is the link, through the link's stretched ::after. */
.ledger {
  max-width: 40em;
  margin: 32px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ledger__row {
  --row-colour: #ff5fa2;
  position: relative;
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  gap: 2px 20px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ledger__row:nth-child(2) {
  --row-colour: var(--lime);
}

.ledger__row:nth-child(3) {
  --row-colour: #46c9ee;
}

.ledger__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--row-colour);
}

.ledger__label {
  grid-row: span 2;
  padding-top: 2px;
  color: var(--row-colour);
  font-size: 15px;
  font-weight: 700;
}

.ledger__name,
.ledger__detail {
  margin: 0;
}

.ledger__name a {
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.ledger__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ledger__row:hover .ledger__name a {
  text-decoration: underline;
  text-decoration-color: var(--row-colour);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.ledger__detail {
  color: #a9a9ad;
  font-size: 15px;
}

.hero__art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

/* The logo sits on its own near-black; lighten lets the hero's light
   show through it, so the square has no visible edge. */
.hero__logo {
  display: block;
  width: 100%;
  mix-blend-mode: lighten;
}

/* Circuit traces running out from the logo, drawn in home.mjs. The layer
   is three logo-widths wide and 2.2 tall, centred on the logo, and fades
   out towards its edges. Like the glow, it sits behind the logo, so the
   traces show through the logo's dark border and read as its own. Still,
   they're faint lines; with motion, current pulses along them (see
   "Motion"). */
.circuit {
  position: absolute;
  top: -60%;
  left: -100%;
  z-index: -1;
  width: 300%;
  height: 220%;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 35%, transparent);
  mask-image: radial-gradient(ellipse farthest-side, #000 35%, transparent);
}

.circuit__trace--magenta {
  color: #e01a7a;
}

.circuit__trace--cyan {
  color: #22b4dc;
}

.circuit__trace--lime {
  color: var(--lime);
}

/* Each trace's rhythm: how long one pulse takes, and when it starts */
.circuit__trace--a {
  --pulse-duration: 3s;
  --pulse-delay: 0s;
}

.circuit__trace--b {
  --pulse-duration: 3.7s;
  --pulse-delay: 0.9s;
}

.circuit__trace--c {
  --pulse-duration: 4.3s;
  --pulse-delay: 1.8s;
}

.circuit__trace--d {
  --pulse-duration: 3.4s;
  --pulse-delay: 2.5s;
}

.circuit__trace--e {
  --pulse-duration: 4s;
  --pulse-delay: 0.5s;
}

.circuit__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.45;
  opacity: 0.35;
}

.circuit__pad {
  fill: var(--night);
  stroke: currentColor;
  stroke-width: 0.45;
  opacity: 0.6;
}

.circuit__glow,
.circuit__spark {
  fill: none;
  stroke-linecap: round;
  visibility: hidden;
}

.circuit__glow {
  stroke: currentColor;
  stroke-width: 3.2;
  opacity: 0.4;
}

.circuit__spark {
  stroke: color-mix(in srgb, currentColor 35%, #fff);
  stroke-width: 0.85;
}

/* ---------- Home: bands ---------- */

.band {
  padding: 64px 0 0;
}

.band__title {
  margin: 0 0 24px;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.band__more {
  margin: 20px 0 0;
  font-size: 16px;
}

.band__more a {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* Every work area in a ruled list: the title on the left, then what it
   covers and the post that shows it in practice. */
.focus-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tertiary);
}

.focus {
  display: grid;
  grid-template-columns: minmax(0, 16em) minmax(0, 1fr);
  gap: 6px 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--tertiary);
}

.focus__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.focus__title a {
  text-decoration: none;
}

.focus__title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.focus__summary {
  margin: 0;
  font-size: 17px;
}

.focus__writing {
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: 15px;
}

.focus__writing-label {
  margin-right: 4px;
  font-weight: 600;
}

.focus__writing a {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.focus__writing a:hover {
  color: var(--accent);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: var(--entry);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.badge:hover {
  border-color: color-mix(in srgb, var(--cyan) 45%, var(--border));
  box-shadow: var(--raised-shadow);
}

.badge__icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(22, 167, 206, 0.14);
  color: var(--cyan);
}

.badge__text {
  display: flex;
  flex-direction: column;
}

.badge__name {
  color: var(--primary);
  font-weight: 600;
  line-height: 1.35;
}

.badge__kind {
  color: var(--secondary);
  font-size: 14px;
}

/* A dark card with a slowly turning gradient border */
.teaser {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 36px;
  border: 1.5px solid transparent;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(circle at 100% 0%, rgba(170, 220, 5, 0.13), transparent 45%) padding-box,
    radial-gradient(circle at 0% 100%, rgba(213, 6, 107, 0.16), transparent 50%) padding-box,
    linear-gradient(var(--night), var(--night)) padding-box,
    conic-gradient(from var(--border-angle), rgba(213, 6, 107, 0.9), rgba(22, 167, 206, 0.9), rgba(170, 220, 5, 0.9), rgba(213, 6, 107, 0.9)) border-box;
  color: #c9c9cb;
}

.teaser .band__title {
  margin-bottom: 8px;
  color: #fff;
}

.teaser .teaser__kicker {
  color: var(--lime);
}

.teaser p {
  max-width: 36em;
  margin: 0;
}

/* ---------- Prose: about, work, contact and posts ---------- */

.prose h2 {
  margin: 44px 0 16px;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 32px 0 12px;
  font-size: 24px;
}

.prose h4 {
  margin: 24px 0 12px;
  font-size: 18px;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
  margin: 0 0 var(--content-gap);
}

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

.prose li {
  margin-top: 6px;
}

.prose li::marker {
  color: var(--accent);
}

.prose li > p {
  margin: 0;
}

.prose a,
.area a,
.contact__handle {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-thickness 0.15s;
}

.prose a:hover,
.area a:hover,
.contact__handle:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

.prose blockquote {
  margin-left: 0;
  padding: 0 0 0 16px;
  border-left: 3px solid var(--accent);
  color: var(--secondary);
}

.prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.prose code {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--code-bg);
  font-size: 0.82em;
}

.prose pre {
  max-width: 100%;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--code-block-bg);
  box-shadow: inset 3px 0 0 var(--magenta);
  color: rgb(213, 213, 214);
  font-size: 15px;
  line-height: 1.5;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--code-bg);
  color: var(--primary);
}

.post-content img {
  display: block;
  margin: 24px auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-content .post-image {
  display: block;
}

.post-content .post-image:hover img {
  border-color: var(--accent);
  box-shadow: var(--raised-shadow);
}

.principles {
  padding-left: 1.2em;
}

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

.contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.contents a {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip-background);
  color: var(--primary);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.contents a:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.area {
  padding: 36px 0 8px;
  border-top: 1px solid var(--border);
}

.area + .area {
  margin-top: 16px;
}

.area__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.area__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
}

.area h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.01em;
}

/* Sections without an icon beside their heading */
.area > h2 {
  margin-bottom: 10px;
}

.area p {
  margin: 0 0 16px;
}

.area__points {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.area__points li {
  margin-top: 4px;
}

.area__points li::marker {
  color: var(--accent);
}

.area__related-title {
  margin: 0 0 6px;
  color: var(--secondary);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.area__related {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.area__related li {
  margin-top: 4px;
}

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

.project {
  padding: 16px 0 4px;
}

.project + .project {
  border-top: 1px solid var(--border);
}

.project__name {
  margin: 0 0 6px;
  font-size: 21px;
}

.area .project__fork {
  margin: -2px 0 8px;
  color: var(--secondary);
  font-size: 15px;
}

.area .project p {
  margin-bottom: 10px;
}

.area .project__stack {
  color: var(--secondary);
  font-size: 15px;
}

.project__stack-label {
  margin-right: 4px;
  font-weight: 600;
}

.credentials {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.credentials th,
.credentials td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.credentials thead th {
  color: var(--secondary);
  font-size: 14px;
  font-weight: 600;
}

.credentials tbody th {
  color: var(--primary);
}

.credentials tbody tr {
  transition: background-color 0.2s;
}

.credentials tbody tr:hover {
  background: var(--accent-tint);
}

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

.contacts {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.contact {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}

.contact:hover {
  background: var(--accent-tint);
}

.contact__label {
  color: var(--secondary);
}

/* ---------- Blog lists ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-block;
  padding: 2px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--chip-background);
  color: var(--secondary);
  font-size: 14px;
  line-height: 30px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

body.list .tag {
  background: var(--entry);
}

.tag:hover {
  border-color: var(--accent);
  color: var(--primary);
}

.tag__count {
  margin-left: 4px;
  color: var(--secondary);
}

.tag-nav {
  margin: 0 0 var(--gap);
}

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

/* The whole card is the link, through the title's stretched ::after. */
.entry {
  position: relative;
  margin-bottom: var(--gap);
  padding: var(--gap) 64px var(--gap) var(--gap);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: var(--entry);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.entry:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--raised-shadow);
}

.entry__title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
}

.entry__title a {
  text-decoration: none;
}

.entry__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.entry:hover .entry__title a {
  color: var(--accent);
}

.entry__summary {
  margin: 0 0 8px;
  color: var(--secondary);
  font-size: 16px;
}

.entry__arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: var(--tertiary);
  transition: color 0.25s;
}

.entry:hover .entry__arrow {
  color: var(--accent);
}

.post-meta {
  margin: 0;
  color: var(--secondary);
  font-size: 14px;
}

.page-heading .post-meta {
  margin-top: 12px;
}

/* ---------- A post ---------- */

.post .page-heading h1 {
  font-size: clamp(30px, 5.6vw, 42px);
}

.post-footer {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) + 4px);
  background: var(--chip-background);
  color: var(--primary);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-nav__link:hover {
  border-color: var(--accent);
  box-shadow: var(--raised-shadow);
}

.post-nav__link--older {
  grid-column: 2;
  text-align: right;
}

.post-nav__direction {
  color: var(--secondary);
  font-size: 14px;
}

.post-footer__back {
  margin: 24px 0 0;
  font-size: 16px;
}

.post-footer__back a {
  color: var(--primary);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

/* ---------- Wider windows ---------- */

/* The header stays in view while scrolling where there's room for it. */
@media (min-width: 761px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  /* "Blog post" and "Write-up" stay on one line each where the table has
     room; on phones they wrap, so the table fits without scrolling. */
  .credentials th:last-child,
  .credentials td:last-child {
    white-space: nowrap;
  }

  /* With the text beside the logo, the circuit layer also fades out just
     left of the logo (its left edge is a third of the way across the
     layer), so no trace runs behind the text at any width. */
  .circuit {
    -webkit-mask-image:
      radial-gradient(ellipse farthest-side, #000 35%, transparent),
      linear-gradient(90deg, transparent 29%, #000 34%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(ellipse farthest-side, #000 35%, transparent),
      linear-gradient(90deg, transparent 29%, #000 34%);
    mask-composite: intersect;
  }
}

/* ---------- Phones and narrow windows ---------- */

@media (max-width: 760px) {
  :root {
    --gap: 16px;
  }

  [id] {
    scroll-margin-top: 16px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 32px;
    padding-bottom: 44px;
  }

  .hero__art {
    order: -1;
    max-width: 150px;
  }

  .hero__lede {
    font-size: 18px;
  }

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

  .ledger__label {
    grid-row: auto;
  }

  .band {
    padding-top: 48px;
  }

  .band__title {
    font-size: 26px;
  }

  .focus {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 0;
  }

  .teaser {
    padding: 26px 22px;
  }

  .page-heading {
    padding-top: 32px;
  }

  .prose h2 {
    font-size: 26px;
  }

  .prose h3 {
    font-size: 21px;
  }

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

  /* Narrower cells, so the credentials table fits without scrolling */
  .credentials th,
  .credentials td {
    padding-right: 8px;
    padding-left: 8px;
  }

  .entry {
    padding-right: var(--gap);
  }

  .entry__arrow {
    display: none;
  }

  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-nav__link--older {
    grid-column: 1;
  }
}

/* ---------- Motion ---------- */

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

  /* Pages fade into each other, and the header stays put, in browsers
     with cross-document view transitions. */
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-old(root) {
    animation: fade-out 0.18s ease both;
  }

  ::view-transition-new(root) {
    animation: rise 0.36s var(--ease-out) both;
  }

  /* Hover: underlines grow, cards and buttons lift, arrows nudge */
  .site-nav a::after {
    transition: transform 0.25s var(--ease-out);
  }

  .button,
  .badge,
  .entry,
  .post-nav__link {
    transition-property: background-color, border-color, box-shadow, translate;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease-out);
  }

  .button:hover,
  .badge:hover,
  .post-nav__link:hover {
    translate: 0 -2px;
  }

  .entry:hover {
    translate: 0 -4px;
  }

  .button__icon,
  .entry__arrow {
    transition: translate 0.25s var(--ease-out), color 0.25s;
  }

  .button:hover .button__icon,
  .entry:hover .entry__arrow {
    translate: 4px 0;
  }

  /* The hero's heading is there from the first frame; the text under it
     comes in quickly, the logo fades up, and the background keeps gently
     alive. */
  .hero__text > :not(h1) {
    animation: rise 0.3s var(--ease-out) both;
  }

  .hero__text > .ledger {
    animation-delay: 0.05s;
  }

  .hero__logo {
    animation: logo-in 0.6s var(--ease-out) both;
  }

  .hero::before {
    animation: grid-drift 24s linear infinite;
  }

  .hero::after {
    animation: aurora 18s ease-in-out infinite alternate;
  }

  /* Current runs out along each circuit trace: a short spark, 9% of the
     trace long, travels from the logo to the end in the first 60% of the
     trace's cycle, and the pad at the end flashes as it arrives. */
  .circuit__glow,
  .circuit__spark {
    visibility: visible;
    stroke-dasharray: 9 100;
    stroke-dashoffset: 9;
    animation: current var(--pulse-duration) linear var(--pulse-delay) infinite both;
  }

  .circuit__pad {
    animation: pad-flash var(--pulse-duration) linear var(--pulse-delay) infinite both;
  }

  .teaser {
    animation: border-spin 10s linear infinite;
  }

  /* Inner pages: the title is there from the first frame, and the rest
     of the heading comes in quickly around it. */
  .page-heading > :not(h1) {
    animation: rise 0.3s var(--ease-out) both;
  }

  .page-heading > h1 ~ * {
    animation-delay: 0.05s;
  }

  /* Cards and sections rise into place as they scroll into view */
  @supports (animation-timeline: view()) {
    .focus-list,
    .badge,
    .entry,
    .area,
    .contacts,
    .post-nav {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    .badges > :nth-child(2n) {
      animation-range: entry 6% entry 46%;
    }

    .teaser {
      animation:
        reveal linear both,
        border-spin 10s linear infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry 40%, normal;
    }
  }

  /* Header shadow and the reading-progress bar follow the scroll */
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }

    body.post-page::before {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 30;
      height: 3px;
      background: linear-gradient(90deg, var(--magenta), var(--cyan), var(--lime));
      transform-origin: 0 50%;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
}

@keyframes logo-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes grid-drift {
  to {
    background-position: 44px 44px, 44px 44px;
  }
}

@keyframes aurora {
  to {
    transform: translate(-3%, 4%) scale(1.06);
  }
}

@keyframes current {
  from {
    stroke-dashoffset: 9;
  }

  60%,
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes pad-flash {
  from,
  52% {
    fill: var(--night);
    opacity: 0.6;
  }

  58% {
    fill: currentColor;
    opacity: 1;
  }

  80%,
  to {
    fill: var(--night);
    opacity: 0.6;
  }
}

@keyframes border-spin {
  to {
    --border-angle: 360deg;
  }
}

@keyframes header-settle {
  to {
    border-bottom-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
}

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

  to {
    transform: scaleX(1);
  }
}