/* Outbox — "Post": paper and ink, as in the app. Fraunces for letters and headings,
   Instrument Sans to read, JetBrains Mono for commands. Post-box red marks, airmail blue
   acts; the airmail stripe edges code like an envelope, and the H1 carries the dashed
   postmark a waiting letter wears.
   Drawing roles (figures/outbox.py): warn waiting · a in flight · ok goes out (sent, sinks)
   · err failed or unknown · d back to the sender (changes, routes) · c senders · b reviewers
   · accent the daemon · muted closed. */

:root {
  --page-bg: #f3eee4;
  --page-text: #2b2721;
  --page-muted: #6b6457;
  --page-line: #ddd5c7;
  --page-accent: #c13a2b;
  --page-ui: "Instrument Sans", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #fbf8f2;
  --raise: #ebe4d6;
  --code-bg: #fbf8f2;
  --code-text: #1e1b16;
  --strong: #1e1b16;
  --airmail: #2a4a9b;
  --ochre: #a77723;
  --sheet-shadow: 0 1px 0 rgba(30, 27, 22, .04), 0 10px 30px -14px rgba(30, 27, 22, .28);
  --k-ink: #1e1b16; --k-accent: #1e1b16; --k-a: #2a4a9b; --k-b: #2f6f7a; --k-c: #5a544a;
  --k-d: #6b4c8c; --k-ok: #4b7652; --k-warn: #a77723; --k-err: #c13a2b; --k-muted: #8d8577; --k-file: #7a7468;
  color-scheme: light;
}

::selection { background: #f4dcd6; color: #1e1b16; }
a { color: var(--airmail); }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero h1 {
  font: 700 clamp(48px, 7vw, 92px)/0.95 var(--display); font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.025em;
}
.hero h1::after {
  content: ""; display: inline-block; width: 0.36em; height: 0.36em; margin-left: 0.14em; vertical-align: 0.3em;
  border: max(3px, 0.045em) dashed var(--ochre); border-radius: 50%; transform: rotate(-12deg);
}
.kicker { color: var(--page-accent); }
.lede { font: 400 clamp(18px, 1.5vw, 20.5px)/1.55 var(--display); font-variation-settings: "opsz" 24; color: #2b2721; }
.hero-shot img { border: 0; box-shadow: var(--sheet-shadow); border-radius: 8px; }
.hero-term { margin: 0; }
@media (min-width: 1080px) {
  .hero.split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; }
  .hero-term { grid-column: 1 / -1; }
}

/* ── headings ─────────────────────────────────────────────────────── */
.part > h2 { font: 650 clamp(30px, 3.6vw, 44px)/1.05 var(--display); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; }
.part h3 { font: 650 19px/1.3 var(--display); }

/* ── code: a sheet with an airmail edge ───────────────────────────── */
pre {
  position: relative; padding: 20px 18px 16px; background: var(--code-bg); border: 1px solid var(--page-line);
  border-radius: 6px; box-shadow: var(--sheet-shadow);
}
pre::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(-45deg, var(--page-accent) 0 9px, transparent 9px 14px, var(--airmail) 14px 23px, transparent 23px 28px);
  opacity: .85;
}
pre code { font-size: 13.2px; font-variant-ligatures: none; }
.term .p { color: #1e1b16; font-weight: 500; }
.term .p::before { color: var(--page-accent); }
.term .o { color: #5a544a; }
.yaml .k { color: var(--airmail); }
.yaml .c { color: var(--page-muted); font-style: italic; }
p code, li code, td code, figcaption code, th code { background: var(--raise); }

/* ── figures, shots, phones ───────────────────────────────────────── */
.fig { padding: 20px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 8px; box-shadow: var(--sheet-shadow); }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.dg .node { fill: #fffdf8; }
.shot img { border-color: var(--page-line); }
.pair { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pair .shot { margin: 0; }

.phones { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; margin: 30px 0; }
.phone { margin: 0; }
.phone img { border-radius: 26px; border: 6px solid #1e1b16; box-shadow: var(--sheet-shadow); }
@media (max-width: 700px) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
  .phone { scroll-snap-align: start; }
}

/* ── tables and lists ─────────────────────────────────────────────── */
table { background: var(--surface); border: 1px solid var(--page-line); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; white-space: nowrap; }
tbody th code { background: none; padding: 0; color: var(--airmail); }
table.keys td { padding: 7px 12px; }
table.keys td:nth-child(odd) { white-space: nowrap; width: 1%; }
table.keys kbd { background: var(--code-bg); }
.facts li { border-left: 3px dashed var(--ochre); }

@media (max-width: 640px) {
  .hero h1::after { border-width: 3px; }
  tbody th { white-space: normal; }
}
@media print {
  pre::before { display: none; }
}