:root {
  --bg: #f7f4ee;
  --fg: #1d1b18;
  --muted: #6f6a61;
  --line: #d9d3c7;
  --accent: #a4532b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151413; --fg: #ebe6dc; --muted: #9a9387; --line: #34312c; --accent: #e08a5c; }
}
*, ::before, ::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 46rem; margin: 0 auto; padding: 6rem 1.5rem 4rem; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .5rem .85rem;
}
.badge::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--accent); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

h1 {
  font: 400 clamp(2.6rem, 8vw, 4.2rem)/1.05 var(--serif);
  letter-spacing: -.02em; margin: 2rem 0 1.5rem;
}
h1 em { color: var(--accent); }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }

h2 {
  font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 5rem 0 1.75rem;
}

blockquote {
  margin: 4rem 0 0; padding-left: 1.5rem; border-left: 1px solid var(--accent);
  font: italic 1.6rem/1.4 var(--serif);
}

/* Pipeline: a single packet travels from the forge to a fresh checkout. */
.pipeline { list-style: none; margin: 0 0 2.5rem; padding: 0; position: relative; }
/* Markers use whole pixels so the browser rounds them all alike: every dot is
   11px wide, centred 5.5px in and 14.5px down from its item, and the last item
   is 29px tall, so the line and the packet share that centre at both ends. */
.pipeline::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px;
  width: 1px; background: var(--line);
}
.pipeline::after {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: travel 6s cubic-bezier(.65, 0, .35, 1) infinite;
}
/* Fade in and out while parked on a dot, never while moving. */
@keyframes travel {
  0% { top: 11px; opacity: 0; }
  8% { top: 11px; opacity: 1; }
  84% { top: calc(100% - 18px); opacity: 1; }
  92%, 100% { top: calc(100% - 18px); opacity: 0; }
}
.pipeline li { padding: 0 0 1.4rem 2rem; position: relative; }
.pipeline li:last-child { height: 29px; padding-bottom: 0; }
.pipeline li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--muted);
}
.pipeline b { font: 400 1.15rem var(--serif); display: block; }
.pipeline span { color: var(--muted); font-size: .92rem; }
code { font: .88em var(--mono); }

.phases { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.phase { background: var(--bg); padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.phase .state { font: .72rem/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.phase.now .state { color: var(--accent); }
.phase.done { color: var(--muted); }
.phase b { font: 400 1.05rem var(--serif); display: block; color: var(--fg); }
.phase.done b { color: var(--muted); }
.phase p { margin: .2rem 0 0; font-size: .92rem; color: var(--muted); }

pre {
  font: .9rem/1.7 var(--mono); padding: 1.25rem 1.4rem; margin: 0;
  border: 1px solid var(--line); border-radius: 6px; overflow-x: auto;
}
pre .p { color: var(--accent); user-select: none; }
pre .o { color: var(--muted); }

footer {
  margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .88rem; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .badge::before, .pipeline::after { animation: none; }
  .pipeline::after { display: none; }
}

/* Specification page, rendered from SPEC.md by the Pages workflow. pandoc lifts
   the document title out, so its sections arrive as h1 and subsections as h2. */
.spec .title { font-size: clamp(2rem, 6vw, 2.8rem); margin: 2rem 0 1.5rem; }
.spec h1:not(.title) { font: 400 1.5rem/1.3 var(--serif); margin: 3.5rem 0 1rem; }
.spec h2 {
  font: 400 1.2rem/1.3 var(--serif); letter-spacing: normal; text-transform: none;
  color: var(--fg); margin: 2.25rem 0 .75rem;
}
.spec pre { margin: 1rem 0; }
.spec table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92rem; margin: 1rem 0; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: .45rem .9rem .45rem 0; border-bottom: 1px solid var(--line); }
.spec .back { font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.spec #TOC { font-size: .92rem; border-left: 1px solid var(--line); padding-left: 1.25rem; margin: 0 0 2.5rem; }
.spec #TOC ul { list-style: none; padding-left: 1rem; margin: .2rem 0; }
.spec #TOC > ul { padding-left: 0; }
.spec #TOC a { text-decoration: none; color: var(--muted); }
.spec #TOC a:hover { color: var(--accent); }
.spec .back + p { margin: 2.5rem 0 0; }
.spec h3 { font: 400 1.05rem/1.3 var(--serif); margin: 1.75rem 0 .5rem; }