@font-face {
  font-family: "IBM Plex Mono";
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
}

/* The theme follows the visitor's system setting; there is no switch. */
:root {
  color-scheme: light dark;
  --paper: #f6f6f3;
  --surface: #ffffff;
  --ink: #15171a;
  --ink-muted: #555b63;
  --line: #dcdcd5;
  --accent: #a34a00;
  --code-string: #1a6b3c;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Text sizes: small labels, interface text, body, lede and figures. */
  --text-s: 0.8125rem;
  --text-m: 0.9375rem;
  --text-body: 1.0625rem;
  --text-l: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1012;
    --surface: #15181b;
    --ink: #e7e8e6;
    --ink-muted: #9aa1a9;
    --line: #272b30;
    --accent: #ffb454;
    --code-string: #8fd19e;
  }
}

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

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

/* The footer sits at the bottom even on the short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.6;
}

h1, h2, p, ul, dl, dd, pre { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, dt, dd, pre, code, .bar, .role, .links a, .panel__name, .row a, .updated, footer { font-family: var(--mono); }

a { color: var(--accent); text-underline-offset: 0.2em; }

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

main { flex: 1; }

/* Top bar */

.bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* The domain links home on the other pages, and reads as the site's name
   rather than as the muted location next to it. */
.bar a { color: var(--ink); text-decoration: none; }
.bar a:hover { color: var(--accent); }

/* Intro */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(3rem, 9vw, 6rem);
  border-bottom: 1px solid var(--line);
}

h1 {
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.role { margin-top: 0.75rem; color: var(--ink-muted); }

.lede { margin-top: 1.5rem; max-width: 30rem; font-size: var(--text-l); line-height: 1.5; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-m);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.links a:hover { border-color: var(--ink); }
.links a:active { translate: 0 1px; }

/* Code panel */

.panel {
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.panel__name {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-s);
  color: var(--ink-muted);
}

/* Lines wrap at spaces on narrow screens rather than scrolling out of view. */
pre {
  padding: 1rem;
  font-size: var(--text-m);
  line-height: 1.65;
  white-space: pre-wrap;
}

.row code { font-size: var(--text-m); }

.k { color: var(--accent); }
.s { color: var(--code-string); }
.c { color: var(--ink-muted); }

/* The three figures: rows with the label left and the figure right. */
.stats { border-top: 1px solid var(--line); }
.stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 1rem; }
.stats div + div { border-top: 1px solid var(--line); }
.stats dt { font-size: var(--text-s); color: var(--ink-muted); }
.stats dd { font-weight: 500; }

/* Three columns once the panel has room for each label on one line.
   Browsers without container queries keep the rows. */
@container (min-width: 33rem) {
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats div { display: block; padding-block: 0.75rem; }
  .stats div + div { border-top: 0; border-left: 1px solid var(--line); }
  .stats dd { font-size: var(--text-l); }
}

/* Rows */

.row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 15rem;
  column-gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.row h2 { font-size: var(--text-m); font-weight: 500; }

.row p { max-width: 36rem; overflow-wrap: break-word; }

.row ul { display: flex; justify-content: flex-end; gap: 1.25rem; white-space: nowrap; }

.row a { font-size: var(--text-m); text-decoration: none; }
.row a:hover { text-decoration: underline; }

/* An image, not a "→" character: the font files carry no arrows, so the
   glyph would come from whatever fallback font the device has. */
.row a::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.7em;
  margin-left: 0.5em;
  background: currentColor;
  -webkit-mask: url("/arrow.svg") center / contain no-repeat;
  mask: url("/arrow.svg") center / contain no-repeat;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem 2.5rem;
  font-size: var(--text-m);
  color: var(--ink-muted);
}

footer a { color: inherit; }
footer a:hover { color: var(--ink); }

/* A taller tap area than the line of text, without moving the layout. */
.row a, .bar a, footer a { position: relative; }
.row a::before, .bar a::before, footer a::before { content: ""; position: absolute; inset: -0.75rem 0; }

/* Text pages: privacy and "not found" */

.prose { max-width: 36rem; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.prose h1 { font-size: clamp(1.75rem, 4vw, 2.375rem); }
.prose p { margin-top: 1rem; }
.nowrap { white-space: nowrap; }
.updated { font-size: var(--text-m); color: var(--ink-muted); }

@media (max-width: 60rem) {
  pre { font-size: var(--text-s); }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
  .row ul { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 50rem) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .panel { max-width: 36rem; }
}

/* Phones: a little more room, so the code sample fits unwrapped from 360px. */
@media (max-width: 26rem) {
  .panel__name, pre, .stats div { padding-inline: 0.75rem; }
  pre { letter-spacing: -0.04em; }
}

@media print {
  .intro { padding-block: 2rem; }
  .row { break-inside: avoid; }
  /* Browsers leave backgrounds out of print, and the arrow is one. */
  .row a::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (forced-colors: active) {
  .row a::after { background: LinkText; }
}