/* Direction lives in DESIGN.md: a homing flight. Feed-sack paper, slate ink, the
   pigeon's orange eye as the one accent, its neck teal as the data color. */
:root {
  color-scheme: light;
  --paper: #f3efe6;
  --plate: #faf8f3;
  --sunk: #e9e4d8;
  --ink: #1f2328;
  --muted: #5c6168;
  --rule: #cfc9bc;
  --rule-strong: #8f8a7e;   /* control borders: 3:1 on paper */
  --slate: #8f99a6;         /* the pigeon's body: marks only, never text */
  --accent: #b5401a;        /* the pigeon's eye: 4.9:1 on paper, so it can carry text */
  --accent-ink: #f3efe6;
  --teal: #2e8a72;          /* data marks */
  --teal-text: #1f6b58;     /* the same hue dark enough for words */
  --warn: #98591a;
  --bad: #a83a3a;

  /* The mascot drawings (birds.js) read these, the same names as on the pigeon site. */
  --bird-line: #2a2f33;
  --bird-rib: #5b4a3c;
  --bird-shadow: rgba(31, 35, 40, 0.08);
  --bone: #b9ae95;
  --bone-dark: #7d7361;
  --bird-beak-cere: #eeeae2;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --maxw: 1200px;
  --radius: 4px;
  --tap: 44px;
  --measure: 62ch;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f2328' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #131517; --plate: #1b1e22; --sunk: #0e1012; --ink: #e8e5de; --muted: #a3a8ae;
    --rule: #2d3137; --rule-strong: #6b7177; --slate: #7f8894;
    --accent: #f0864f; --accent-ink: #131517; --teal: #6cc1af; --teal-text: #6cc1af;
    --warn: #e0a15c; --bad: #e07a7a;
    --bird-line: #0d1113; --bird-rib: #3b2f27; --bird-shadow: rgba(0, 0, 0, 0.35); --bone: #d9d2c2; --bone-dark: #6b6358;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8e5de' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #131517; --plate: #1b1e22; --sunk: #0e1012; --ink: #e8e5de; --muted: #a3a8ae;
  --rule: #2d3137; --rule-strong: #6b7177; --slate: #7f8894;
  --accent: #f0864f; --accent-ink: #131517; --teal: #6cc1af; --teal-text: #6cc1af;
  --warn: #e0a15c; --bad: #e07a7a;
  --bird-line: #0d1113; --bird-rib: #3b2f27; --bird-shadow: rgba(0, 0, 0, 0.35); --bone: #d9d2c2; --bone-dark: #6b6358;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8e5de' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; position: relative; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (max-width: 759px) { body { font-size: 16px; } }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; font-variation-settings: "SOFT" 30; }
h2 { font-size: clamp(34px, 5vw, 64px); font-variation-settings: "opsz" 144, "SOFT" 30; }
/* One word in each big heading is set in the wonky italic: the voice of the page, used once per heading. */
h2 em { font-style: italic; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
h3 { font-size: clamp(28px, 3.2vw, 42px); }
h4 { font: 600 1rem/1.4 var(--body); margin: 1.6em 0 0.4em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
/* The flight-log voice: mono, lowercase, normal tracking. */
.log { font: 500 12.5px/1.5 var(--mono); color: var(--muted); margin: 0 0 0.6em; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; }
.fine { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 18px;
  background: var(--accent); color: var(--accent-ink); font: 600 15px var(--body);
  border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); text-decoration: none; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn.secondary:hover { background: var(--sunk); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { background: var(--accent); }
.btn.secondary:disabled:hover { background: transparent; }
select, input[type="range"] { font: inherit; color: inherit; accent-color: var(--accent); }
select {
  min-height: var(--tap); padding: 0 30px 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: var(--plate) var(--chevron) no-repeat right 10px center;
}
select:hover { background-color: var(--sunk); }

/* ---------- the perch and the flight layer ---------- */
/* A short wire between two posts. The pigeon lands on it; it turns orange while the bird sits there. */
.perch { display: inline-block; position: relative; width: 48px; height: 16px; flex: none; }
.perch::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }
.perch::after { content: ""; position: absolute; bottom: -2px; left: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); box-shadow: 44px 0 0 var(--ink); }
.perch.lit::before { background: var(--accent); }
.perch.lit::after { background: var(--accent); box-shadow: 44px 0 0 var(--accent); }
.perch::before, .perch::after { transition: background 0.3s, box-shadow 0.3s; }

#flight-layer { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
#flight { position: absolute; top: 0; left: 0; display: block; }
#flight .route { fill: none; stroke: var(--ink); stroke-opacity: 0.22; stroke-width: 1.5; stroke-dasharray: 5 9; stroke-linecap: round; }
#flight .flown { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
#pigeon-guide { position: absolute; top: 0; left: 0; width: 115px; height: 99px; overflow: visible; opacity: 0; will-change: transform; transition: opacity 0.3s; pointer-events: auto; cursor: pointer; }
#pigeon-guide.air { pointer-events: none; cursor: default; }
#pigeon-guide .pose { transition: opacity 0.22s; }

/* The bird's gestures. Each is a class flight.js puts on the svg for a moment; the drawing is rigged
   with .head, .tail and .lid groups by tools/birds-gen.mjs. Purpose: a bird that blinks and pecks
   reads as alive; a frozen drawing reads as a sticker. */
#pigeon-guide .pose, #pigeon-guide .head, #pigeon-guide .tail, .lid, .scoreboard .bird svg { transform-box: fill-box; }
.lid { transform-origin: 50% 50%; transform: scaleY(0.04); transition: transform 0.06s ease-out; }
.blink .lid { transform: scaleY(1); }
#pigeon-guide .head { transform-origin: 20% 95%; transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.6, 1); }
#pigeon-guide.peck .head { transform: translateY(4px) rotate(10deg); }
#pigeon-guide .tail { transform-origin: 100% 50%; transition: transform 0.2s ease-out; }
#pigeon-guide.flick .tail { transform: rotate(-12deg); }
#pigeon-guide .pose-perched { transform-origin: 50% 100%; }
#pigeon-guide.land .pose-perched { animation: land 0.38s cubic-bezier(0.3, 1.5, 0.5, 1); }
#pigeon-guide.hop .pose-perched { animation: hop 0.52s ease-out; }
#pigeon-guide.air .pose-flying { animation: glide 1.8s ease-in-out infinite alternate; }
@keyframes land { 0% { transform: scale(1.1, 0.82); } 55% { transform: scale(0.97, 1.04); } 100% { transform: none; } }
@keyframes hop { 0% { transform: scale(1.06, 0.9); } 32% { transform: translateY(-18px) scale(0.95, 1.07); } 66% { transform: translateY(0) scale(1.1, 0.86); } 100% { transform: none; } }
@keyframes glide { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
/* Hats: each perch names one (data-hat); the guide shows that one and keeps it through the next flight.
   Purpose: the hat says where he is in the story (deliveries, the barn, school) and is the cheapest joke on the page. */
#pigeon-guide .hat { display: none; }
#pigeon-guide[data-hat="cap"] .hat-cap, #pigeon-guide[data-hat="hardhat"] .hat-hardhat, #pigeon-guide[data-hat="mortarboard"] .hat-mortarboard,
#pigeon-guide[data-hat="beanie"] .hat-beanie, #pigeon-guide[data-hat="party"] .hat-party, #pigeon-guide[data-hat="tophat"] .hat-tophat, #pigeon-guide[data-hat="bucket"] .hat-bucket { display: block; }
#pigeon-guide .hats { transform-box: fill-box; transform-origin: 50% 100%; }
/* Take-off: the hat pops up and tumbles off behind him. Landing: the new one falls from above and bounces. */
#pigeon-guide.hatoff .hats { animation: hatoff 0.52s cubic-bezier(0.25, 0.6, 0.5, 1) forwards; }
@keyframes hatoff {
  0% { transform: none; opacity: 1; }
  35% { transform: translate(-8px, -30px) rotate(-35deg); opacity: 1; }
  100% { transform: translate(-46px, 30px) rotate(-170deg); opacity: 0; }
}
#pigeon-guide.haton .hats { animation: haton 0.62s linear; }
@keyframes haton {
  0% { transform: translateY(-90px) rotate(18deg); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  12% { opacity: 1; }
  55% { transform: translateY(0) rotate(-2deg) scale(1.12, 0.84); animation-timing-function: ease-out; }
  75% { transform: translateY(-8px) rotate(2deg) scale(0.96, 1.06); animation-timing-function: ease-in; }
  90% { transform: translateY(0) scale(1.04, 0.96); }
  100% { transform: none; opacity: 1; }
}
#pigeon-guide .prop { transform-box: fill-box; transform-origin: 50% 50%; }
#pigeon-guide.air .prop { animation: spin 0.22s linear infinite alternate; }
@keyframes spin { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
@media (prefers-reduced-motion: reduce) {
  #pigeon-guide { cursor: default; }
  #pigeon-guide .pose, #pigeon-guide .head, #pigeon-guide .tail, #pigeon-guide .hats, #pigeon-guide .prop, .lid { transition: none; animation: none; }
}
@media (max-width: 759px) {
  #flight { display: none; }
  #pigeon-guide { width: 83px; height: 71px; }
}

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.bar .wrap { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.wordmark { font: 600 19px var(--display); text-decoration: none; margin-right: auto; font-variation-settings: "SOFT" 60; min-height: var(--tap); display: inline-flex; align-items: center; }
.menu-btn { display: none; }
#nav { display: flex; align-items: center; gap: 4px 22px; }
#nav a { font: 500 14px var(--body); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
#nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
#nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--ink); }
.theme { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--body); color: var(--muted); margin-left: 8px; }
.theme select { min-height: 36px; font-size: 13px; }
@media (max-width: 759px) {
  .menu-btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius); font: 600 14px var(--body); cursor: pointer; }
  .menu-btn[aria-expanded="true"] { background: var(--sunk); }
  #nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
  #nav[data-open] { display: flex; }
  #nav a { min-height: 48px; font-size: 17px; border-bottom: 1px solid var(--rule); }
  .theme { margin: 14px 0 0; justify-content: space-between; }
  .theme select { min-height: var(--tap); }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); min-height: min(92svh, 1000px); display: flex; flex-direction: column; justify-content: center; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; width: 100%; padding-top: clamp(96px, 10vw, 128px); padding-bottom: clamp(48px, 6vw, 88px); pointer-events: none; }
.hero .wrap a, .hero .wrap button { pointer-events: auto; }
.hero-log { margin-bottom: 0.4em; }
.name {
  font-weight: 800; font-size: clamp(72px, 15.5vw, 230px); line-height: 0.86; letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 0; margin: 0 0 0.12em -0.04em;
}
.name span { display: block; }
.name span:last-child { font-style: italic; font-weight: 700; font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1; }
.thesis {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(25px, 3.2vw, 42px); line-height: 1.2;
  font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; max-width: 24ch; margin: 0.6em 0 0.5em; text-wrap: balance;
}
/* The one accent in the hero: a thick orange underline on the half of the sentence that is the point. */
.under { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.13em; text-underline-offset: 0.1em; text-decoration-skip-ink: none; }
.lede { font-size: clamp(17px, 1.5vw, 20px); max-width: 54ch; line-height: 1.55; }
.hero .lede { margin-bottom: 2em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 32px; margin: 0; max-width: 980px; }
.facts div { border-top: 1px solid var(--rule); padding-top: 10px; }
.facts dt { font: 500 12px var(--mono); color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 600; }
.canvas-note { position: absolute; right: var(--gutter-r); bottom: 10px; margin: 0; font: 500 12px var(--mono); color: var(--muted); text-align: right; max-width: 60%; }
@media (max-width: 759px) { .canvas-note { position: static; padding: 0 var(--gutter) 12px; text-align: left; max-width: none; } }

/* ---------- sections ---------- */
.leg { padding-top: clamp(64px, 9vw, 128px); }
/* A section head: the leg's numeral, big and light, beside the log line and the heading, with the perch at the end. */
.head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no log log" "no h2 perch";
  column-gap: clamp(14px, 2.5vw, 28px); row-gap: 6px; align-items: end;
  border-top: 2px solid var(--ink); padding-top: 18px; margin-bottom: clamp(36px, 5vw, 72px);
}
.legno { grid-area: no; font: italic 300 clamp(60px, 9vw, 124px)/0.78 var(--display); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -0.04em; align-self: end; }
.head .log { grid-area: log; margin: 0; }
.head h2 { grid-area: h2; }
.head .perch { grid-area: perch; margin-bottom: 0.2em; }
.case { margin-bottom: clamp(64px, 9vw, 128px); }
.case:last-child { margin-bottom: 0; }
.case-text { max-width: var(--measure); min-width: 0; }
.kind { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; font-weight: 500; margin: 0.5em 0 1em; text-wrap: pretty; }
.uses, .steps { padding-left: 1.2em; margin: 0 0 1em; }
.uses li, .steps li { margin-bottom: 0.55em; padding-left: 0.2em; }
.uses li::marker { color: var(--accent); }
.steps li::marker { font: 600 0.9em var(--mono); color: var(--muted); }
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 1.4em 0 1em; border-top: 1px solid var(--rule); padding-top: 12px; }
.spec div { display: contents; }
.spec dt { font: 500 12.5px/1.7 var(--mono); color: var(--muted); }
.spec dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.4em; }
.chips span { font: 500 12.5px/1 var(--mono); padding: 7px 9px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--plate); }
.go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* A plate: where a real thing is shown. */
.plate { position: relative; margin: 0; background: var(--plate); border: 1px solid var(--rule); padding: 12px; }
.plate > .perch { position: absolute; top: -16px; right: 28px; }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.plate figcaption { font-size: 0.85rem; color: var(--muted); line-height: 1.45; padding: 10px 2px 0; }

/* Barn Manager: text beside the screenshot. */
.spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.spread .plate { order: -1; }
@media (min-width: 900px) {
  .spread { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 64px); }
  .spread .plate { order: 0; position: sticky; top: 80px; }
}

/* Marketing Tools and autoalgo: a single column, with a perch out at the right edge where the bird is off the text. */
.narrow { position: relative; }
.narrow .case-text { max-width: 70ch; }
.perch-edge { position: absolute; right: 0; top: 2.2em; }
.perch-title { margin-left: 22px; vertical-align: baseline; }
@media (max-width: 759px) { .perch-edge { top: -8px; } }
.shift { width: 100%; border-collapse: collapse; margin: 1.2em 0 0.6em; font-size: 0.95rem; }
.shift caption { text-align: left; font: 600 1rem var(--body); padding-bottom: 8px; }
.shift th { text-align: left; font: 500 12.5px var(--mono); color: var(--muted); padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink); }
.shift td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); width: 50%; }
.shift td + td { font-weight: 500; }

/* Pigeon: text beside a sticky demo. The method block is the one passage set apart with heavier rules,
   because it is the idea the whole project (and the demo) is built on. */
.method { margin: 1.8em 0 1.6em; padding: 16px 0 6px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.method .log { margin-bottom: 0.3em; }
.method-title { font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--display); font-variation-settings: "opsz" 72, "SOFT" 30; margin: 0 0 0.45em; }
.method-lede { font-family: var(--display); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; font-variation-settings: "opsz" 48, "SOFT" 40; max-width: 46ch; }
.loop { counter-reset: loop; list-style: none; margin: 0 0 1em; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 400px) { .loop { grid-template-columns: minmax(0, 1fr); } }
.loop li { counter-increment: loop; border-top: 1px solid var(--rule); padding-top: 8px; font-size: 0.95rem; line-height: 1.45; }
.loop li::before { content: counter(loop, decimal-leading-zero); display: block; font: 500 12px/1.6 var(--mono); color: var(--muted); }
.loop b { font-weight: 600; }
.method .measured { margin: 0.4em 0 0.8em; }
.method .fine { margin: 0; }

/* Pigeon: text beside a sticky demo. */
.carve { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.measured { margin: 0 0 0.6em; border-top: 1px solid var(--rule); }
.measured div { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.measured dt { font: 500 12.5px/1.7 var(--mono); color: var(--muted); }
.measured dd { margin: 0; font-size: 0.95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
@media (min-width: 980px) {
  .carve { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(40px, 5vw, 72px); }
  .carve .demo { position: sticky; top: 80px; z-index: 16; }
}
.demo { padding: 16px; }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.demo-head h4 { margin: 0; font: 600 1.15rem var(--display); }
.demo-head .log { margin: 0; }
.demo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 560px) { .demo-body { grid-template-columns: minmax(0, 3fr) minmax(150px, 2fr); } }
#carve-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--sunk); border: 1px solid var(--rule); }
.scoreboard { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scoreboard .bird { width: 100%; max-width: 180px; }
.scoreboard .bird svg { display: block; width: 100%; height: auto; transform-origin: 50% 90%; }
.scoreboard .bird.swap svg { animation: pop 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes pop { 0% { transform: scale(0.92, 1.08); } 55% { transform: scale(1.05, 0.95); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .scoreboard .bird.swap svg { animation: none; } }
.bird-name { margin: 0; font: 600 1.05rem var(--display); }
.bird-latin { margin: 0; font: italic 500 0.9rem var(--display); color: var(--muted); }
.bird-note { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.45; }
.bird-note[data-state="starving"] { color: var(--warn); }
.bird-note[data-state="skeleton"] { color: var(--bad); }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 12px; }
.readout div { border-top: 1px solid var(--rule); padding-top: 6px; min-width: 0; }
.readout dt { font: 500 12px var(--mono); color: var(--muted); }
.readout dd { margin: 0; font: 600 1.05rem var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.controls label { display: flex; flex-direction: column; gap: 4px; font: 500 13px var(--body); color: var(--muted); }
.controls .ctl-range { grid-column: 1 / -1; }
.controls .ctl-range output { color: var(--ink); font-family: var(--mono); }
.controls input[type="range"] { width: 100%; min-height: var(--tap); margin: 0; }
.controls .btn { width: 100%; }
@media (min-width: 560px) { .controls { grid-template-columns: minmax(0, 1fr) auto auto auto; } .controls .ctl-range { grid-column: auto; } .controls .btn { width: auto; } }
.demo-status { margin: 12px 0 8px; font: 500 13px/1.5 var(--mono); color: var(--teal-text); min-height: 1.5em; }
.demo-status[data-state="busy"] { color: var(--muted); }
.demo-status[data-state="error"] { color: var(--bad); }
.demo .fine { margin: 0; }

/* The backup system: text beside the diagram. */
.diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.diagram .plate { order: -1; }
@media (min-width: 900px) { .diagram { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); } .diagram .plate { order: 0; } }
.tunnel svg { display: block; width: 100%; height: auto; }
.dia-label { font: 500 12px var(--mono); fill: var(--muted); }
.dia-quiet { fill: var(--teal-text); }
/* The photo travels the tunnel twice when the figure comes into view, to show the direction of flow, then rests at the server. */
.tunnel .packet { transform: translateX(0); }
html.js .tunnel.in .packet { animation: travel 2.4s ease-in-out 2 forwards; }
@keyframes travel { from { transform: translateX(0); } to { transform: translateX(376px); } }
@media (prefers-reduced-motion: reduce) { html.js .tunnel.in .packet { animation: none; transform: translateX(188px); } }

/* Experiments: a ruled list, not cards. */
.hops { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hops li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .hops li { grid-template-columns: 200px minmax(0, 1fr); } }
.hops .log { margin: 0; padding-top: 6px; }
.hops h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 0.25em; }
.hops h3 a { display: inline-block; padding: 9px 0; margin: -9px 0; }
.hops p { margin: 0; max-width: var(--measure); }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); } }
.about .lede { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; font-variation-settings: "opsz" 48, "SOFT" 40; margin-bottom: 0.8em; }
.about p { max-width: var(--measure); }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.timeline .when { font: 500 12.5px/1.8 var(--mono); color: var(--muted); }
.timeline b { display: block; font-weight: 600; }
.timeline b + span { display: block; color: var(--muted); font-size: 0.92rem; }

/* Contact: home. */
.contact { margin-top: clamp(72px, 10vw, 140px); border-top: 2px solid var(--ink); padding: clamp(56px, 9vw, 128px) 0 32px; }
.contact h2 { margin: 0.2em 0 0.5em; font-size: clamp(38px, 6vw, 84px); }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 28px; }
.mail { padding: 5px 0; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 4vw, 48px); text-decoration-thickness: 2px; overflow-wrap: anywhere; font-variation-settings: "opsz" 72, "SOFT" 40; }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 56px; font-weight: 500; }
.links a { min-height: var(--tap); display: inline-flex; align-items: center; }
.soon { color: var(--muted); min-height: var(--tap); display: inline-flex; align-items: center; }
.foot { justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 14px; margin: 0; }

/* ---------- reveals ---------- */
/* Heads and case notes rise in once as they arrive, to pace the page. Off entirely without scripts or with reduced motion. */
html.js .rise { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rise { opacity: 1; transform: none; transition: none; } }

/* groundwork + works-in */
/* Works in: the last fact spans the row and is grouped by area, so a recruiter can scan for the skill they need. */
.facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.facts .works { grid-column: 1 / -1; }
.stack { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 32px; }
.stack li { font-weight: 600; line-height: 1.45; }
.stack li span { display: block; font: 500 12px/1.6 var(--mono); color: var(--muted); }
/* Groundwork: Barn Manager's spread mirrored (screenshot left, text right) so consecutive case studies don't share a composition. */
@media (min-width: 900px) {
  .spread.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .spread.flip .plate { order: -1; }
}