/* Homepage (public/index.html) — the narrative one-pager.
 *
 * Built only from the shared tokens in styles.css (DESIGN.md §4): no new
 * colors. The one deliberate departure is the run ledger (#run), which inverts
 * paper and ink so it reads as the page's centrepiece in both themes.
 * Layout is left-aligned and rule-separated. Cards appear only where the page
 * shows something concrete: the scenarios (#imagine) and the deep-dive art. */

main { display: block; }


main:focus { outline: none; }

/* ─── Shared rhythm ─────────────────────────────────────────────────── */
.h-section { padding-block: clamp(72px, 10vw, 136px) 0; }
/* #imagine is followed directly by the #run band, which has its own
 * background, so it needs bottom padding of its own or its cards sit flush
 * against the band. */
#imagine.h-section { padding-bottom: clamp(72px, 10vw, 136px); }
.h-section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.h-section-head h2,
.h-run-head h2 {
  font-family: var(--serif);
  font-weight: var(--weight-display);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h-section-head p a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.h-section-head p a:hover { color: var(--clay-text); border-color: var(--clay); }
.h-section-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  max-width: 52ch;
}

.h-display {
  font-family: var(--serif);
  font-weight: var(--weight-display);
  font-size: clamp(48px, 8.4vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.h-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 80px); }
.h-release { margin: 0 0 clamp(20px, 2.5vw, 32px); font-size: 14px; color: var(--ink-3); }
.h-release a { display: inline-flex; align-items: center; gap: 10px; }
.h-release a:hover { color: var(--ink); }
.h-release .v {
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--clay-rule);
  color: var(--clay-text);
  background: var(--clay-soft);
}
/* The hero names the category, a longer line than a slogan, so it is set a
 * little smaller and wider than the other display lines. */
.h-hero .h-display { font-size: clamp(44px, 6.6vw, 100px); max-width: 26ch; }
.h-display em, .h-section-head h2 em, .h-statement em { font-style: normal; color: var(--clay-text); }
.h-hero-body { display: grid; gap: 28px; margin-top: clamp(24px, 3vw, 36px); }
.h-hero .actions { align-items: center; }
.h-hero-link { color: var(--clay-text); font-size: 16px; padding: 12px 4px; }
.h-hero-link:hover { color: var(--ink); }
.h-lede {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
}

/* The intro film (video/ renders it). Click-to-play, narrated with captions, poster first. */
.h-film { margin: clamp(40px, 6vw, 72px) 0 0; }
.h-film video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 20px; border: 1px solid var(--rule);
  background: var(--paper-2);
  box-shadow: 0 30px 70px -40px rgb(var(--shadow-rgb) / 0.45);
}
.h-film-frame { position: relative; }
.h-film-play {
  position: absolute; top: clamp(12px, 5%, 40px); right: clamp(12px, 3%, 40px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 16px/1 var(--sans); color: var(--paper); background: var(--ink);
  box-shadow: 0 16px 40px -16px rgb(var(--shadow-rgb) / 0.6);
  transition: background .2s;
}
.h-film-play:hover { background: var(--clay-text); }
/* Fades out while the video plays and back in when it ends (main.js).
 * Visibility is delayed until the fade completes, so the button stays
 * clickable only while it can be seen. */
.h-film-play { transition: background .2s, opacity .35s ease, visibility 0s linear 0s; }
.h-film-play.is-faded { opacity: 0; visibility: hidden; pointer-events: none; transition: background .2s, opacity .35s ease, visibility 0s linear .35s; }
.h-film-play:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.h-film-len { font-family: var(--mono); font-size: 13px; opacity: 0.75; }
.h-film video:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.h-film figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-3); max-width: 80ch; }

/* ─── Imagine ───────────────────────────────────────────────────────── */
.h-imagine {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.h-imagine a {
  height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper-2);
  color: var(--ink);
  transition: border-color .2s, transform .2s;
}
.h-imagine a:hover { border-color: var(--clay-rule); transform: translateY(-2px); }
.h-imagine a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.h-imagine .h-tag { font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--clay-text); }
.h-imagine strong { font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; }
.h-imagine span { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.h-imagine .is-ink a { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.h-imagine .is-ink span { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.h-imagine .is-ink .h-tag { color: color-mix(in oklch, var(--clay) 60%, var(--paper)); }

/* In one minute: the questions people ask first. The same text is the
 * FAQPage in index.html's JSON-LD, so answer engines read what people do. */
.h-faq {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--ink);
}
.h-faq > div { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.h-faq dt { font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; color: var(--ink); margin: 0 0 12px; }
.h-faq dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.h-faq dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.h-faq dd a:hover { color: var(--clay-text); text-decoration-color: var(--clay); }
@media (max-width: 760px) { .h-faq { grid-template-columns: 1fr; } }

/* ─── The run ledger (signature) ────────────────────────────────────── */
.h-run {
  --run-bg: var(--ink);
  --run-fg: var(--paper);
  --run-muted: color-mix(in srgb, var(--paper) 74%, var(--ink)); /* AA on the band and on the approval panel, both themes */
  --run-rule: color-mix(in srgb, var(--paper) 16%, var(--ink));
  --run-raise: color-mix(in srgb, var(--paper) 6%, var(--ink));
  --run-clay: color-mix(in oklch, var(--clay) 78%, var(--run-fg)); /* --clay-text, but mixed toward the inverted band's foreground */
  background: var(--run-bg);
  color: var(--run-fg);
  padding-block: clamp(56px, 8vw, 104px);
}
.h-run a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--run-muted); }
.h-run a:hover { text-decoration-color: var(--clay); }
.h-run-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.h-run-head p { margin: 0; color: var(--run-muted); font-size: 17px; max-width: 52ch; }

.ledger {
  border: 1px solid var(--run-rule);
  border-radius: 14px;
  background: var(--run-raise);
  overflow: hidden;
}
.ledger-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--run-rule);
}
.ledger-disclosure {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--run-muted);
}
.ledger-status { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.ledger-status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--run-muted);
  flex: none;
}
.ledger[data-state="running"] .ledger-status::before { background: var(--clay); animation: ledger-pulse 1.2s ease-in-out infinite; }
.ledger[data-state="waiting"] .ledger-status::before { background: var(--clay); }
.ledger-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.ledger-controls[hidden] { display: none; }
.ledger-btn {
  font: inherit;
  font-size: 14px;
  color: var(--run-fg);
  background: transparent;
  border: 1px solid var(--run-rule);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
}
.ledger-btn:hover:not(:disabled) { border-color: var(--run-fg); }
.ledger-btn:disabled { opacity: 0.4; cursor: default; }
.h-run :focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.ledger-status:focus { outline: none; }
.ledger-status:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; border-radius: 4px; }

.ledger-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--run-rule);
}
.ledger-row > span {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ledger-row > span + span { border-left: 1px solid var(--run-rule); }
.ledger-head > span { font-size: 13px; color: var(--run-muted); padding-block: 11px; }
.ledger-seq { font-family: var(--mono); font-size: 13px; color: var(--run-muted); align-items: flex-end; }
.ledger-row code {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--run-fg);
}
.ledger-row em { font-style: normal; font-size: 14px; color: var(--run-muted); }
.ledger-row.is-human code { color: var(--run-clay); }
.ledger-row.is-human .ledger-seq { box-shadow: inset 3px 0 0 var(--clay); }
/* Reused history is labelled, not faded: fading dropped the text below AA. */
.ledger-row.is-replayed .ledger-seq { box-shadow: inset 3px 0 0 var(--run-rule); }
.ledger-row.is-replayed .ledger-seq::after { content: "copied"; font-size: 11px; color: var(--run-muted); }
.ledger-row.is-suppressed em { color: var(--run-clay); }
.ledger-row .is-pending code,
.ledger-row .is-pending em { visibility: hidden; }
.ledger-row .is-pending::before {
  content: "";
  width: 28px; height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--run-rule);
}
.ledger-row.is-new { animation: ledger-in .32s ease-out both; }

.ledger-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px;
  border-bottom: 1px solid var(--run-rule);
  box-shadow: inset 3px 0 0 var(--clay);
  background: color-mix(in srgb, var(--clay) 10%, var(--run-raise));
}
.ledger-ask[hidden] { display: none; }
.ledger-ask p { margin: 0; color: var(--run-muted); max-width: 52ch; }
.ledger-ask .ledger-ask-title { font-family: var(--serif); font-weight: var(--weight-display); font-size: 26px; line-height: 1.15; color: var(--run-fg); margin-bottom: 4px; }
.ledger-ask-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.h-run .btn-primary { background: var(--run-fg); color: var(--run-bg); border-color: var(--run-fg); }
.h-run .btn-primary:hover { background: var(--clay-text); border-color: var(--clay-text); color: var(--paper); }
.h-run .btn-ghost { color: var(--run-fg); border-color: var(--run-rule); }
.h-run .btn-ghost:hover { border-color: var(--run-fg); }

.ledger-match {
  margin: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.ledger-match[hidden] { display: none; }
.ledger-match-mark {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
  position: relative;
}
.ledger-match-mark::after {
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border: solid var(--clay);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.h-run-note { margin: 20px 0 0; font-size: 14px; color: var(--run-muted); max-width: 72ch; }

.h-real {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--run-rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 48px;
  align-items: center;
}
.h-real h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.h-real p { margin: 0; color: var(--run-muted); max-width: 64ch; }
.h-real .btn { text-decoration: none; }
@media (max-width: 760px) { .h-real { grid-template-columns: 1fr; } .h-real .btn { justify-self: start; } }

@keyframes ledger-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ledger-pulse { 50% { opacity: 0.35; } }

/* The work itself, above the protocol evidence: input → checks → outcome. */
.ledger-task {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--run-rule);
}
.ledger-task-part { padding: 18px 20px; }
.ledger-task-part + .ledger-task-part { border-left: 1px solid var(--run-rule); }
.ledger-task-part p { margin: 0; color: var(--run-muted); font-size: 14px; }
.ledger-task .ledger-task-label { font-size: 13px; margin-bottom: 6px; }
.ledger-task .ledger-task-value { font-family: var(--serif); font-weight: var(--weight-display); font-size: 24px; line-height: 1.15; color: var(--run-fg); margin-bottom: 4px; }
.ledger-checks { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ledger-checks li { padding-left: 20px; position: relative; margin-bottom: 4px; }
.ledger-checks li::before {
  content: "";
  position: absolute; left: 2px; top: 5px;
  width: 5px; height: 9px;
  border: solid var(--run-clay);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.ledger-checks[hidden], .ledger-task-wait[hidden] { display: none; }
.ledger-log-title { margin: 0; padding: 12px 20px; font-size: 13px; color: var(--run-muted); border-bottom: 1px solid var(--run-rule); }

/* ─── The shift ─────────────────────────────────────────────────────── */
.h-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(24px, 5vw, 80px);
}
.h-statement {
  font-family: var(--serif);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.h-prose p { margin: 0 0 1.1em; font-size: 18px; line-height: 1.62; color: var(--ink-2); max-width: 60ch; }
.h-prose p:last-child { margin-bottom: 0; }

.h-history { margin-top: clamp(56px, 7vw, 96px); }
.h-history h3 {
  font-family: var(--serif);
  font-weight: var(--weight-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  margin: 0 0 32px;
  max-width: 30ch;
}
.h-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--rule-2);
}
.h-timeline li {
  position: relative;
  padding: 22px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.h-timeline li::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink-3);
}
.h-timeline strong { font-family: var(--serif); font-weight: var(--weight-display); font-size: 26px; line-height: 1.1; color: var(--ink); }
.h-year { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.h-timeline li.is-lesson strong { color: var(--ink-3); }
.h-timeline li.is-lesson::before { border-style: dashed; }
.h-timeline li.is-now::before { background: var(--clay); border-color: var(--clay); box-shadow: 0 0 0 5px var(--clay-soft); }
.h-timeline li.is-now strong { color: var(--clay-text); }
.h-timeline li.is-now .h-year { color: var(--clay-text); }

/* ─── Deep dives ────────────────────────────────────────────────────── */
.h-dives { display: grid; }
.h-dive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--rule-2);
}
.h-dive:nth-child(even) .h-dive-art { order: -1; }
.h-dive-text { display: grid; gap: 16px; }
.h-dive-num { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.h-dive h3 { margin: 0; font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(32px, 3.6vw, 50px); line-height: 1.04; text-wrap: balance; }
.h-dive-text > p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 56ch; }
.h-dive .h-wire { font-size: 14px; color: var(--ink-3); }
.h-dive-art {
  display: grid; gap: 14px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--paper-2);
}
.h-dive-art p { margin: 0; }
.h-art-meta { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.h-approve { background: var(--paper); box-shadow: 0 24px 48px -28px rgb(var(--shadow-rgb) / 0.35); }
.h-approve-title { font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; }
.h-approve > p:not([class]) { color: var(--ink-2); font-size: 16px; }
.h-approve-actions { display: flex; flex-wrap: wrap; gap: 10px; pointer-events: none; }
.h-replay, .h-bundle { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h-replay li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-2);
}
.h-replay code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.h-replay li.is-reused { background: transparent; border-style: dashed; color: var(--ink-3); }
.h-replay li.is-held { border-color: var(--clay-rule); background: var(--clay-wash); }
.h-replay li.is-held span { color: var(--clay-text); }
.h-bundle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-bundle li {
  padding: 14px 16px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.h-bundle li::before { content: "✓ "; color: var(--clay-text); }
.h-bundle li.is-left { grid-column: 1 / -1; background: transparent; border-style: dashed; color: var(--ink-3); }
.h-bundle li.is-left::before { content: "○ "; color: var(--ink-3); }
.h-meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.h-meter i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--rule); position: relative; overflow: hidden; }
.h-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: 4px; background: var(--ink); }
.h-meter.is-hot i::after { background: var(--clay); }
.h-budget .h-meter:nth-of-type(2) i { --fill: 19%; }
.h-budget .h-meter:nth-of-type(3) i { --fill: 18%; }
.h-budget .h-meter:nth-of-type(4) i { --fill: 82%; }
.h-budget-flag { padding-top: 14px; border-top: 1px solid var(--rule); }
.h-budget-flag code { font-family: var(--mono); font-size: 13px; color: var(--clay-text); }
.h-wire a { color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.h-wire a:hover { color: var(--clay-text); border-color: var(--clay); }
.h-wire code { font-family: var(--mono); font-size: 13px; }

/* ─── Where it fits ─────────────────────────────────────────────────── */
.h-stack { margin: 0; display: grid; gap: 10px; }
.h-layer {
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px 20px;
  align-items: baseline;
}
.h-layer strong { font-family: var(--serif); font-weight: var(--weight-display); font-size: 30px; line-height: 1; }
.h-layer span { color: var(--ink-2); }
.h-layer.is-ours { border-color: var(--clay-rule); background: var(--clay-wash); padding-block: 30px; }
.h-layer.is-ours strong { color: var(--clay-text); }
.h-layer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h-layer-pair .h-layer { grid-template-columns: 1fr; }
.h-stack figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); max-width: 72ch; }

.h-details { margin-top: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.h-details summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.h-details summary::-webkit-details-marker { display: none; }
.h-details summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.h-details[open] summary::after { content: "−"; }
.h-details summary:hover { color: var(--clay-text); }
.h-details summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.h-details > p { margin: 16px 0 24px; font-size: 14px; color: var(--ink-3); max-width: 80ch; }
.h-details > p a { color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
/* The comparison table is always shown: crawlers that skip collapsed
 * content, and readers, see the whole answer. */
.h-compare { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.h-compare h3 { margin: 0 0 18px; font-family: var(--serif); font-weight: var(--weight-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--ink); }
.h-compare > p { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); max-width: 80ch; }
.h-compare > p a { color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.h-table-wrap { overflow-x: auto; }
.h-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.h-table th, .h-table td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.h-table thead th { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.h-table tbody th { font-weight: 400; color: var(--ink-2); }
.h-table td:first-of-type { color: var(--ink); font-weight: 500; }

/* ─── The app ───────────────────────────────────────────────────────── */
.h-app {
  margin-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(64px, 8vw, 104px);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.h-app-shot { margin: 0 0 32px; }
.h-app-shot a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2); box-shadow: 0 24px 60px -30px rgb(var(--shadow-rgb) / 0.35); }
.h-app-shot img { display: block; width: 100%; height: auto; }
.h-shot-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .h-shot-light { display: none !important; }
  :root:not(.theme-light) .h-shot-dark { display: block !important; }
}
:root.theme-dark .h-shot-light { display: none !important; }
:root.theme-dark .h-shot-dark { display: block !important; }
.h-app-facts {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
}
.h-app-facts li { border-top: 1px solid var(--rule-2); padding-top: 16px; color: var(--ink-2); font-size: 15px; }
.h-app-facts a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.h-app-facts a:hover { color: var(--clay-text); border-color: var(--clay); }
.h-app-facts strong { display: block; color: var(--ink); font-weight: 500; font-size: 16px; margin-bottom: 4px; }

/* ─── Build on it ───────────────────────────────────────────────────── */
.h-build {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px clamp(24px, 5vw, 64px);
  align-items: start;
}
.h-terminal { margin: 0; }
.h-terminal .term-body:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.h-paths { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.h-paths li { border-bottom: 1px solid var(--rule); }
.h-paths a { display: block; padding: 18px 0; }
.h-paths strong { display: block; font-weight: 500; font-size: 17px; }
.h-paths span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.h-paths code { font-family: var(--mono); font-size: 13px; }
.h-paths a:hover strong { color: var(--clay-text); }

/* ─── Evidence ──────────────────────────────────────────────────────── */
.h-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-2);
}
.h-fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 24px 0;
  color: var(--ink-2);
  font-size: 15px;
}
.h-fact + .h-fact { padding-left: 24px; border-left: 1px solid var(--rule); }
.h-fact .ship-num {
  font-family: var(--serif);
  font-weight: var(--weight-display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.h-fact:hover .ship-num { color: var(--clay-text); }

.h-gap {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 5vw, 72px);
  border: 2px dashed var(--rule-2);
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px clamp(24px, 5vw, 80px);
  align-items: end;
}
.h-gap > * { grid-column: 1; }
.h-gap-mark { margin: 0 0 -8px; font-family: var(--serif); font-weight: var(--weight-display); font-size: 112px; line-height: 0.6; color: var(--clay); }
.h-gap h3 { margin: 0; font-family: var(--serif); font-weight: var(--weight-display); font-style: normal; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; color: var(--ink-2); text-wrap: balance; }
.h-gap > p:not(.h-gap-mark) { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 60ch; }
.h-gap-actions { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: 12px; justify-items: start; }

.h-spec { margin: 0 0 24px; }
.h-spec > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 24px; padding-block: 16px; border-top: 1px solid var(--rule); }
.h-spec dt { font-weight: 500; }
.h-spec dd { margin: 0; }
.h-spec .row-summary { margin: 0 0 4px; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.h-spec dd p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 72ch; }
.h-spec a { border-bottom: 1px solid var(--rule-2); }
.h-wire-band {
  margin-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(64px, 8vw, 104px);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.h-capabilities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.h-capabilities li {
  padding: 18px 20px; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink-2); font-size: 15px; line-height: 1.5;
}
.h-capabilities strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; font-size: 16px; }
.h-wire-more { margin: 28px 0 0; }
.h-wire-more a { color: var(--clay-text); }
.h-wire-more a:hover { color: var(--ink); }

/* ─── Close ─────────────────────────────────────────────────────────── */
.h-close { padding-block: clamp(96px, 12vw, 168px) clamp(72px, 9vw, 120px); }
.h-close .h-display { font-size: clamp(40px, 6.4vw, 92px); max-width: 17ch; margin-bottom: 28px; }
.h-close-lede { margin: 0 0 36px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .h-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; border-top: 0; }
  .h-timeline li { border-top: 1px solid var(--rule-2); }
  .h-app-facts, .h-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .h-build { grid-template-columns: 1fr; }
  .h-imagine, .h-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-dive { grid-template-columns: 1fr; }
  .h-dive:nth-child(even) .h-dive-art { order: 0; }
}
@media (max-width: 760px) {
  .h-section-head, .h-run-head, .h-split, .h-gap { grid-template-columns: 1fr; }
  .h-gap-actions { grid-column: 1; grid-row: auto; }
  .h-imagine, .h-capabilities { grid-template-columns: 1fr; }
  .h-timeline { grid-template-columns: 1fr; row-gap: 0; border-top: 0; border-left: 1px solid var(--rule-2); margin-left: 4px; }
  .h-timeline li { border-top: 0; padding: 0 0 24px 24px; }
  .h-timeline li::before { top: 4px; left: -5px; }
  .h-layer, .h-layer-pair { grid-template-columns: 1fr; }
  .h-capabilities { columns: 1; }
  .h-spec > div { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
  .ledger-head > span { font-size: 12px; }
  .ledger-row > span { padding: 11px 10px; }
  .ledger-row code { font-size: 12px; }
  .ledger-row em { font-size: 12.5px; }
  .ledger-seq { align-items: center; }
}
@media (max-width: 480px) {
  .h-film-play { padding: 9px 14px 9px 11px; gap: 8px; font-size: 13px; }
  .h-film-play svg { width: 16px; height: 16px; }
  .h-film-len { display: none; }
  .h-app-facts, .h-facts { grid-template-columns: 1fr; }
  .h-fact + .h-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .ledger-task { grid-template-columns: 1fr; }
  .ledger-task-part + .ledger-task-part { border-left: 0; border-top: 1px solid var(--run-rule); }
  .ledger-row { grid-template-columns: 40px minmax(0, 1fr) 52px; }
  .ledger-row > span:nth-child(3) { align-items: center; justify-content: center; }
  .ledger-row > span:nth-child(3) > * {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ledger-row:not(.ledger-head) > span:nth-child(3):not(.is-pending)::before {
    content: "";
    width: 5px; height: 10px; margin-top: -4px;
    border: solid var(--run-clay);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .ledger-head > span:nth-child(3) { font-size: 0; }
  .ledger-head > span:nth-child(3)::after { content: "Python"; font-size: 12px; }
  .ledger-row.is-replayed .ledger-seq::after { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .h-film-play, .h-film-play.is-faded { transition: none; }
  .h-imagine a { transition: none; }
  .h-imagine a:hover { transform: none; }
  .ledger-row.is-new { animation: none; }
  .ledger[data-state="running"] .ledger-status::before { animation: none; }
}