/* ============================================================================
   Aletheia — hand-maintained stylesheet.
   Plain CSS. No framework, no build step, no preprocessor. If you are reading
   this: yes, a person keeps this file tidy on purpose.

   The colours come from the mark itself: a person with both arms up, checked
   by hand, in green. So the chrome is a deep green-black ink, the reading
   surface is bone paper, white panels hold anything a machine produced, and
   the green is spent only where something has been witnessed or checked.
   Gold appears in exactly one place: the signing key.

   Aletheia is the Greek for truth as unconcealment — what stops being hidden.
   So: no hidden chrome, no mystery meat navigation, and the fingerprint that
   proves who signs these certificates stays on screen on every single page.

   Fonts are the reader's own. Nothing is downloaded. See the colophon.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* surfaces */
  --paper: #ece9e0;
  --paper-2: #f4f2ec;
  --panel: #ffffff;
  --ink: #0e1c15;
  --ink-2: #152a1f;
  --ink-3: #1d3629;

  /* text */
  --text: #101c16;
  --text-2: rgba(16, 28, 22, 0.72);
  --text-3: rgba(16, 28, 22, 0.5);
  --slate: #4a5c52;
  --chrome-text: #e6e9e3;
  --chrome-muted: rgba(230, 233, 227, 0.58);

  /* the one accent, in three strengths */
  --accent: #22b04c;              /* the logo's green: fills, marks, rules */
  --accent-text: #0f6b2f;         /* green that passes as text on paper   */
  --accent-lit: #5fd48a;          /* green that passes as text on ink     */
  --accent-wash: rgba(34, 176, 76, 0.10);

  /* the key, and only the key */
  --gold: #b08a3e;
  --gold-lit: #dcbf85;

  --good: #0f6b2f;
  --bad: #9c2b2b;

  --line: rgba(16, 28, 22, 0.16);
  --line-soft: rgba(16, 28, 22, 0.09);
  --line-hard: rgba(16, 28, 22, 0.8);
  --rule: var(--line);            /* legacy alias used by badge-options.html */

  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  --shadow: 0 1px 2px rgba(16, 28, 22, 0.06), 0 18px 40px -22px rgba(16, 28, 22, 0.35);

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Charter', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  --rail: 236px;
  --bar: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index, the whole scale */
  --z-grain: 5;
  --z-rail: 55;
  --z-bar: 60;
  --z-skip: 100;
}

/* Dark: the paper becomes the ink, and the panels sit a shade above it. The
   distinction between "a person talking" and "a machine's output" survives. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c1711;
    --paper-2: #101d16;
    --panel: #13221a;
    --ink: #08110c;
    --ink-2: #0f1c15;
    --ink-3: #152a1f;
    --text: #e3e6df;
    --text-2: rgba(227, 230, 223, 0.72);
    --text-3: rgba(227, 230, 223, 0.5);
    --slate: #a3ada6;
    --accent-text: #5fd48a;
    --accent-wash: rgba(34, 176, 76, 0.13);
    --gold: #dcbf85;
    --good: #5fd48a;
    --bad: #e07a7a;
    --line: rgba(227, 230, 223, 0.14);
    --line-soft: rgba(227, 230, 223, 0.08);
    --line-hard: rgba(227, 230, 223, 0.75);
    --btn-bg: var(--accent);
    --btn-fg: #08110c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 4rem); }
[id] { scroll-margin-top: calc(var(--bar) + 1.5rem); }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A breath of paper grain over everything. Fixed, so it never repaints on
   scroll, and it ignores the pointer. Three percent: felt, not seen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------ skip link */

.skip {
  position: absolute;
  left: -200vw;
  top: 0.75rem;
  z-index: var(--z-skip);
  background: var(--accent);
  color: #08110c;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip:focus { left: 0.75rem; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  height: var(--bar);
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 1.6rem);
  border-bottom: 1px solid rgba(95, 212, 138, 0.18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--chrome-text);
  transition: opacity 0.3s var(--ease);
}
.brand:hover { opacity: 0.85; color: var(--chrome-text); }

.brand img {
  width: 38px;
  height: 38px;
  display: block;
  transition: transform 0.6s var(--ease);
}
.brand:hover img { transform: rotate(-6deg) scale(1.04); }

.brand span {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
}

.brand small {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  font-weight: 400;
  margin-top: 0.2rem;
}

/* The fingerprint, always on screen. This is the point of the whole site. */
.keyline {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--gold-lit);
  text-align: right;
  text-decoration: none;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}
.keyline b {
  font-weight: 600;
  display: block;
  color: var(--chrome-muted);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
a.keyline:hover { color: #fff; }

@media (max-width: 720px) { .keyline { display: none; } }

/* --------------------------------------------------------------- the rail */

.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--bar)); }

.sidenav {
  width: var(--rail);
  flex: 0 0 var(--rail);
  background: var(--ink-2);
  position: sticky;
  top: var(--bar);
  align-self: flex-start;
  height: calc(100vh - var(--bar));
  overflow-y: auto;
  padding: 0.75rem 0 2rem;
}

.sidenav a {
  display: block;
  padding: 0.72rem 1.3rem;
  color: rgba(230, 233, 227, 0.8);
  text-decoration: none;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), padding-left 0.3s var(--ease);
}

.sidenav a:hover { background: rgba(255, 255, 255, 0.045); color: #fff; padding-left: 1.5rem; }

.sidenav a.on {
  background: rgba(34, 176, 76, 0.14);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--accent);
}
.sidenav a.on:hover { padding-left: 1.3rem; }

.sidenav .railhead {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  padding: 1.6rem 1.3rem 0.4rem;
}

@media (max-width: 860px) {
  .shell { display: block; }
  .sidenav {
    width: auto; flex: none; height: auto; overflow-y: hidden;
    position: sticky; top: var(--bar);
    padding: 0; display: flex; overflow-x: auto; z-index: var(--z-rail);
    border-bottom: 1px solid rgba(95, 212, 138, 0.18);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sidenav::-webkit-scrollbar { display: none; }
  .sidenav a {
    border-left: none; border-bottom: 3px solid transparent;
    white-space: nowrap; padding: 0.75rem 1rem; flex: 0 0 auto;
  }
  .sidenav a:hover, .sidenav a.on:hover { padding-left: 1rem; }
  .sidenav a.on { border-left-color: transparent; border-bottom-color: var(--accent); background: transparent; }
  .sidenav .railhead { display: none; }
}

/* ------------------------------------------------------------ the content */

.page {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(2rem, 4.5vw, 3.6rem) clamp(1.2rem, 4vw, 3.6rem) 5rem;
  max-width: 80rem;
}

.page > p, .page > ul, .page > ol, .page > h2, .page > h3,
.page > blockquote, .page > pre, .page > .note-card, .page > .panel,
.page > table, .page > .fingerprint, .page > div:not(.hero):not(.proof-grid):not(.creator-grid):not(.people) {
  max-width: 46rem;
}

/* ------------------------------------------------------------------- type */

h1, h2, h3 { color: var(--text); line-height: 1.14; margin-top: 0; font-family: var(--serif); text-wrap: balance; }

h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 0.6rem;
}

h2 {
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 3.4rem 0 0.9rem;
}

/* A short green rule above every section heading: the section marker is a
   mark, not another line of small capitals. */
h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: 1rem;
}
h2.plain::before { display: none; }

h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.4rem; font-family: var(--sans); letter-spacing: -0.005em; }

p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--accent); transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease); }
a:hover { color: var(--accent-text); text-decoration-color: currentColor; }

.kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.71rem;
  color: var(--text-2);
  margin: 0 0 1rem;
}

.lede { font-size: 1.14rem; line-height: 1.62; max-width: 44rem; color: var(--text); }
.smallprint { font-size: 0.86rem; color: var(--slate); }
.mono { font-family: var(--mono); font-size: 0.9em; letter-spacing: 0.04em; }

code, pre { font-family: var(--mono); font-size: 0.86em; }
code { background: var(--paper-2); padding: 0.12em 0.4em; border: 1px solid var(--line); }
pre {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { border: none; background: none; padding: 0; }

/* Legacy section label. Pages now use plain h2 headings; this stays so the
   orphan badge-options.html and any old bookmarklet still render. */
.seclabel {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 3rem 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.seclabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.seclabel .no { color: var(--text-3); }

/* ------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}

.display {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.7vw, 4.1rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 1.3rem;
}
.display .accent { color: var(--accent-text); }
.display .quiet { color: var(--slate); font-style: italic; padding-bottom: 0.06em; display: inline-block; }

/* The mark, presented the way the app presents anything a machine checked:
   on a white plate, inside a paper tray, with the key it was signed by. */
.hero-mark {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 0.5rem;
  box-shadow: var(--shadow);
}
.hero-mark .plate {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 2.6vw, 2rem) 1.2rem;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.hero-mark .plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 42%, var(--accent-wash), transparent 62%);
}
.hero-mark img {
  width: min(100%, 21rem);
  display: block;
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 8px 18px rgba(14, 28, 21, 0.14));
}
.hero-mark .caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.3rem;
}
.hero-mark .key {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin: 0;
  word-spacing: 0.1em;
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .hero-mark { max-width: 26rem; }
  .hero-mark img { width: min(100%, 15rem); }
}

/* Load-in. CSS only, so it runs with or without the script, and it is off
   entirely for anyone who asked their system for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.9s var(--ease) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.13s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.21s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.29s; }
  .hero-mark { animation: settle 1.1s var(--ease) 0.2s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }

/* The properties row: what every entry has. Replaces the old dark strip. */
.checks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.checks li::before { content: "✓"; color: var(--accent-text); font-weight: 700; margin-right: 0.55rem; }

/* ----------------------------------------------------------------- panels */

/* A panel is anything a machine produced or checks: white, hairline, exact.
   Paper is for a person talking. The distinction is load-bearing. */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.1rem 1.3rem;
  margin: 1.2rem 0;
}
.panel > :last-child { margin-bottom: 0; }

.panel.log {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.75;
}

.fingerprint {
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  word-break: break-word;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding: 0.8rem 1rem;
  margin: 0.9rem 0;
  font-variant-numeric: tabular-nums;
}

/* Added by reveal.js next to every fingerprint. Not in the HTML on purpose:
   a copy button with no script to power it would be a lie. */
.copy {
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.copy:hover { color: var(--accent-text); border-color: var(--accent); }
.copy:active { transform: scale(0.96); }
.copy.done { color: var(--accent-text); border-color: var(--accent); }

/* The verdict block, as the app draws it */
.verdict {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0.7rem 0;
}
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }

/* --------------------------------------------------------------- the note */

.note-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.6rem 1.8rem;
  margin: 1.2rem 0 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.62;
}

.note-card .from {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.9rem;
}

.note-card p:last-child { margin-bottom: 0; }
.sig { font-family: var(--serif); font-style: italic; color: var(--slate); }

/* ------------------------------------------------------------- the people */

/* Two of us, side by side, each on paper: a person talking, not a machine.
   The portrait is round because the mark is. */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0 0;
}

.person {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.6rem 1.8rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.62;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.person .who {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.person .who img {
  width: 6rem;
  height: 6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.person h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 0.25rem; }
.person .role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
  line-height: 1.5;
}
.person .from {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.9rem;
}
.person p:last-child { margin-bottom: 0; }
.person .sig { margin-top: auto; padding-top: 0.8rem; }

/* ------------------------------------------------------------------ grids */

/* One panel, three columns, hairlines between: one idea in three parts. */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
  margin: 1.6rem 0;
  box-shadow: var(--shadow);
}

.proof {
  background: var(--panel);
  padding: 1.6rem 1.4rem;
  transition: background 0.4s var(--ease);
}
.proof:hover { background: var(--paper-2); }

.proof .n {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: block;
  margin-bottom: 0.7rem;
}
.proof h3 { font-family: var(--serif); font-size: 1.3rem; }
.proof p:last-child { margin-bottom: 0; }

.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}

.creator-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
}
.creator-card:hover { transform: translateY(-2px); }

.creator-card .tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.creator-card h3 { font-family: var(--serif); font-size: 1.25rem; margin-top: 0.3rem; }
.creator-card .craft { color: var(--slate); font-size: 0.92rem; }
.creator-card p:last-child { margin-bottom: 0; }

.empty-seat {
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(
      -45deg, transparent, transparent 9px,
      var(--line-soft) 9px, var(--line-soft) 18px);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6rem 1rem;
  min-height: 7rem;
}

/* ------------------------------------------------------------------ steps */

/* How a verification runs: a numbered line down the page, green nodes. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.4rem 0 0;
  padding: 0 0 0 3rem;
  position: relative;
  max-width: 46rem;
}
.steps::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--line);
}
.steps li { position: relative; padding-bottom: 1.8rem; }
.steps li:last-child { padding-bottom: 0.4rem; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -3rem;
  top: -0.05rem;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 50%;
  background: var(--accent);
  color: #08110c;
  font: 700 0.8rem/1.95rem var(--mono);
  text-align: center;
  box-shadow: 0 0 0 4px var(--paper);
}
.steps h3 { font-family: var(--serif); font-size: 1.22rem; margin-bottom: 0.4rem; }
.steps p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- data table */

table.facts { border-collapse: collapse; width: 100%; margin: 1.1rem 0; background: var(--panel); border: 1px solid var(--line); }
table.facts td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.facts tr:last-child td { border-bottom: none; }
table.facts td:first-child {
  color: var(--slate);
  width: 34%;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 0.8rem;
}
table.facts .hash { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; }

/* ------------------------------------------------------------- site notes */

/* Styled as the app's log pane: this is a machine-readable record of changes,
   and it should look like one. */
.site-notes { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); }
.site-notes li { display: flex; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.site-notes li:last-child { border-bottom: none; }
.site-notes time {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  white-space: nowrap;
  flex: 0 0 6.4rem;
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.site-notes span { font-size: 0.93rem; }

@media (max-width: 560px) {
  .site-notes li { flex-direction: column; gap: 0.25rem; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--text);
  color: var(--text);
  background: transparent;
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn.solid { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn.solid:hover { background: var(--accent); border-color: var(--accent); color: #08110c; }

.btnrow { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0; }

/* ----------------------------------------------------------- status strip */

/* Kept for old pages. New pages use .checks above. */
.strip {
  background: var(--ink);
  color: rgba(230, 233, 227, 0.82);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem clamp(1.2rem, 4vw, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.6rem;
  margin: 2rem 0;
}
.strip .dot { color: var(--accent-lit); }

/* --------------------------------------------------------------- the foot */

.footbar {
  background: var(--ink);
  color: rgba(230, 233, 227, 0.75);
  font-size: 0.92rem;
  padding: 3rem clamp(1.2rem, 4vw, 3.6rem) 1rem;
  overflow: hidden;
  border-top: 1px solid rgba(95, 212, 138, 0.18);
}

.footbar a { color: var(--accent-lit); text-decoration-color: rgba(95, 212, 138, 0.35); }
.footbar a:hover { color: #fff; text-decoration-color: #fff; }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: start;
  max-width: 80rem;
}
.foot-grid p { max-width: 34rem; }

.foot-brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; color: var(--chrome-text); font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.foot-brand img { width: 40px; height: 40px; }

.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.5rem;
  font-size: 0.92rem;
}
.foot-links a { color: rgba(230, 233, 227, 0.85); text-decoration: none; transition: color 0.25s var(--ease); }
.foot-links a:hover { color: var(--accent-lit); }

.footbar .sig {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-muted);
  font-style: normal;
  margin-top: 2rem;
  font-variant-numeric: tabular-nums;
}
.footbar .sig a { color: var(--gold-lit); }

.footbar .wordmark {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3rem, 15vw, 12rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(230, 233, 227, 0.22);
  white-space: nowrap;
  margin: 1.6rem -0.04em -0.1em;
  user-select: none;
}

@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------------------------------------------------------------- ledger */

/* The withdrawn list. It is a machine's record, so it lives on a white
   panel, and it is designed to be read at its most common size: empty. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ledger { margin: 1.8rem 0 0; max-width: 46rem; }

.ledger-empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 2.6rem);
  text-align: center;
  position: relative;
  isolation: isolate;
}
.ledger-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 0%, var(--accent-wash), transparent 60%);
}
.ledger-empty .seal {
  display: inline-grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: #08110c;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.1rem;
  box-shadow: 0 0 0 6px var(--accent-wash);
}
.ledger-empty .statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.ledger-empty .meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.2rem;
}
.ledger-empty .smallprint { max-width: 32rem; margin: 0 auto; }

.ledger-entry {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bad);
  padding: 1.2rem 1.4rem 0.4rem;
  margin: 0 0 1rem;
}
.ledger-entry .when {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bad);
  margin: 0 0 0.3rem;
}
.ledger-entry h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 0.6rem; }
.ledger-entry h3 em { font-weight: 400; color: var(--slate); }
.ledger-entry table.facts { border: none; margin: 0.4rem 0 0.6rem; }

/* ---------------------------------------------------------------- errors */

.lost { padding-top: clamp(1rem, 4vw, 3rem); }
.lost .code {
  font-family: var(--mono);
  font-size: clamp(3rem, 10vw, 6rem);
  color: var(--accent-text);
  line-height: 1;
  margin: 0 0 1rem;
  letter-spacing: -0.04em;
}

/* ---------------------------------------------------------------- motion */

/* Default is VISIBLE. reveal.js sets .js on <html>, and only then do we hide
   things to fade them in. No JavaScript, old browser, script blocked: the page
   simply shows everything. Never hide content behind a script that may not run. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  body::before, .topbar, .sidenav, .footbar .wordmark, .copy { display: none !important; }
  .page { max-width: none; padding: 0; }
  .js [data-reveal] { opacity: 1; transform: none; }
}