/* ============================================================
   OLYMPUS · design system
   dark · gold · ether
   ============================================================ */

:root {
  --block-h: 42vh;
  --block-h-narrow: 52vh;

  --bg: #05060a;
  --bg2: #0a0c14;
  --panel: rgba(13, 16, 25, .72);
  --panel2: rgba(17, 20, 31, .85);
  --line: rgba(233, 231, 224, .08);
  --line-soft: rgba(233, 231, 224, .05);
  --gold: #c21019;
  --gold-2: #e3434b;
  --gold-dim: rgba(201, 168, 106, .28);
  --text: #e9e7e0;
  --muted: #9b9aa3;
  --dim: #6d6c76;
  --ok: #7fb98a;
  --fail: #c96a5f;
  --ether: #9db8ff;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.7, 0, .9, .4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: rgba(201,168,106,.25) transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(201, 168, 106, .3); color: #fff; }

a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
img { max-width: 100%; }

/* ============ atmosphere ============ */

.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#atmos { position: absolute; inset: 0; width: 100%; height: 100%; }

/* static fallback when WebGL is unavailable: baked gradients, no filter */
.no-gl-fog {
  position: absolute; inset: 0; opacity: .55;
  background:
    radial-gradient(60vw 60vw at -10% -20%, rgba(201, 168, 106, .10), transparent 60%),
    radial-gradient(55vw 55vw at 110% 40%, rgba(157, 184, 255, .08), transparent 60%),
    radial-gradient(70vw 40vw at 30% 110%, rgba(201, 168, 106, .06), transparent 60%);
}
body.no-gl #atmos { display: none; }
body:not(.no-gl) .no-gl-fog { display: none; }

/* ============ progress ============ */

#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  pointer-events: none;
}
#progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(201,168,106,.5), var(--gold-2));
  box-shadow: 0 0 12px rgba(201, 168, 106, .5);
  transition: width .12s linear;
}

/* ============ top bar ============ */

#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  height: 64px;
  display: flex; align-items: center;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: linear-gradient(to bottom, rgba(5, 6, 10, .97), rgba(5, 6, 10, .9));
  border-bottom: 1px solid var(--line-soft);
}
.bar-inner {
  width: min(1240px, calc(100vw - 88px));
  margin: 0 auto;
  display: flex; align-items: center; gap: 34px;
}

.wordmark {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: .26em; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
.wordmark .key {
  width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 14px rgba(201,168,106,.8);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.wordmark:hover .key { transform: rotate(225deg); box-shadow: 0 0 22px rgba(232,200,142,.95); }

.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  letter-spacing: .06em; padding: 6px 2px; position: relative;
  transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: right .35s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }

.proof-seal {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--text);
  border: 1px solid rgba(201,168,106,.4); border-radius: 999px;
  padding: 7px 16px 7px 12px;
  background: rgba(201,168,106,.06);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.proof-seal:hover {
  border-color: rgba(201,168,106,.85);
  box-shadow: 0 0 22px rgba(194,16,25,.28);
  background: rgba(201,168,106,.12);
}
.seal-ring { flex: none; filter: drop-shadow(0 0 6px rgba(127,185,138,.35)); }
.seal-num { font-weight: 600; color: var(--gold); }
.seal-sub { color: var(--dim); }

/* ============ right rail ============ */

#rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 105; display: flex; flex-direction: column; gap: 18px;
}
.rail-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; color: var(--dim);
  border: 1px solid transparent;
  transition: color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.rail-dot:hover { color: var(--gold); border-color: rgba(201,168,106,.35); transform: scale(1.12); }
.rail-dot.active {
  color: var(--gold); border-color: rgba(201,168,106,.7);
  box-shadow: 0 0 16px rgba(201,168,106,.35), inset 0 0 10px rgba(201,168,106,.15);
}

/* ============ stage + pages ============ */

#stage {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;   /* fallback: pre-dvh engines */
  height: 100dvh;  /* tracks the iOS URL bar where supported */
  height: 100svh;  /* expanded-bar height — the visible minimum (JS overrides with visualViewport) */
  z-index: 2;
}

.page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,106,.2) transparent;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.page::-webkit-scrollbar { width: 8px; }
.page::-webkit-scrollbar-thumb { background: rgba(201,168,106,.18); border-radius: 8px; }
.page::-webkit-scrollbar-thumb:hover { background: rgba(201,168,106,.4); }

.page.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* dissolve: the page collapses into the picked point */
.page.is-leaving {
  animation: page-dissolve 560ms var(--ease-in) forwards;
  will-change: clip-path, transform, filter;
}
@keyframes page-dissolve {
  0%   { clip-path: circle(141% at var(--cx, 50%) var(--cy, 50%)); opacity: 1; filter: none; }
  100% { clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); opacity: 0; filter: blur(6px) brightness(.6); }
}

/* ghost: the new page materialises from the mist */
.page.is-entering {
  animation: page-ghost 780ms var(--ease-out) both;
  will-change: transform, opacity, filter;
}
@keyframes page-ghost {
  0%   { opacity: 0; filter: blur(16px) brightness(.65); transform: translateY(20px) scale(.985); }
  60%  { filter: blur(5px) brightness(.9); }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: none; }
}

/* ============ ether words ============ */

.w { display: inline-block; white-space: pre; }
/* space spans stay plain inline text so lines can wrap between word-blocks
   (inline-block atoms + flex nowrap made headings unbreakable and blew out
   grid min-content on narrow screens) */
.w.sp { display: inline; white-space: normal; width: 0.28em; min-width: 0.28em; }
.wi {
  display: inline-block;
  transform: translateY(1em) rotate(3deg);
  opacity: 0; filter: blur(4px);
  transition:
    transform 700ms var(--ease-out),
    opacity 620ms ease,
    filter 700ms ease;
  transition-delay: var(--d, 0ms);
}
.page.ether-in .wi {
  transform: none; opacity: 1; filter: none;
}

/* ============ scroll reveals ============ */

.reveal {
  opacity: 0; transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s ease;
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ============ shared type ============ */

.wrap { width: min(1060px, calc(100vw - 96px)); margin: 0 auto; }

.hero { padding: 128px 0 84px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 52px; align-items: start; }
/* grid tracks must be allowed to shrink below content min-content (the ether
   word-spans measure unbreakable) or the hero column overflows small screens */
.hero-grid > * { min-width: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
/* the dot keeps its offset; the ether-split turns every word+space into a flex
   item, so any flex gap here would double-count between words */
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); margin-right: 10px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: .005em; }
h1 { font-size: clamp(2.9rem, 6vw, 4.7rem); margin: 20px 0 18px; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 18px; }
h3 { font-size: 1.45rem; margin-bottom: 12px; }

.gold { color: var(--gold); }
.g { color: var(--gold); }
.ok { color: var(--ok); }
.fail { color: var(--fail); }

.shine {
  background: linear-gradient(100deg, var(--gold) 30%, #f0a9a4 48%, var(--gold) 66%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: -220% 0; } }

.sub { font-size: 1.13rem; color: var(--muted); max-width: 34em; }
.sub b { color: var(--text); font-weight: 500; }

.lead { font-size: 1.16rem; color: var(--muted); max-width: 44em; }
.lead b { color: var(--text); font-weight: 500; }
.lead-p { font-size: 1.1rem; max-width: 60em; }

.hero-ctas { display: flex; gap: 16px; margin: 28px 0 22px; flex-wrap: wrap; }
.hero-note { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .04em; }
.hero-note .g { color: var(--gold); }

.keyline {
  height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ============ page hero (deep pages) ============ */

.page-hero { padding: 110px 0 64px; }
.crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--dim); margin-bottom: 34px;
}
.crumbs a { color: var(--muted); transition: color .3s; }
.crumbs a:hover { color: var(--gold); }
.crumbs .sep { margin: 0 10px; color: rgba(233,231,224,.18); }
.crumbs .here { color: var(--gold); }
.page-hero h1 { margin: 0 0 24px; }
.page-hero .lead { margin: 0; }

/* ============ buttons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  /* gap stays 0: data-ether splits button labels into word spans, and any
     flex gap would double-count between words (see .eyebrow) */
  gap: 0;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .08em; padding: 13px 26px; border-radius: 3px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s, color .3s, background .3s;
}
.btn-gold {
  background: linear-gradient(120deg, #6e0c11, var(--gold) 45%, var(--gold-2));
  color: #f3ece7;
  box-shadow: 0 6px 24px rgba(194,16,25,.28);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(194,16,25,.42); }
.btn-ghost {
  color: var(--text); border: 1px solid var(--line);
  background: rgba(233,231,224,.02);
}
.btn-ghost:hover {
  border-color: rgba(201,168,106,.55); color: var(--gold-2);
  transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(201,168,106,.14);
}

/* ============ section heads ============ */

section { padding: 72px 0; }
.sec-head { margin-bottom: 36px; max-width: 46em; }
.sec-head p { color: var(--muted); font-size: 1.04rem; }

.kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-dim); color: var(--gold);
  margin-bottom: 16px;
}

/* ============ cards ============ */

.tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tcard {
  position: relative;
  background: linear-gradient(160deg, rgba(233,231,224,.03), rgba(233,231,224,.008));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 28px 26px;
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.tcard:hover, .card:hover {
  border-color: rgba(201,168,106,.4);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 24px rgba(201,168,106,.08);
}
.tcard .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  color: var(--gold); margin-bottom: 16px; display: block;
}
.tcard h3 { font-size: 1.35rem; }
.tcard p { color: var(--muted); font-size: .95rem; }
.tcard.fault .n { color: var(--fail); }
.tcard.fault:hover { border-color: rgba(201,165,95,.45); }

.card-grid { display: grid; gap: 20px; margin: 34px 0; }
.card-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.card { position: relative; display: block; cursor: pointer; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; padding: 30px 28px; transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s; }
.card .num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--dim); display: block; margin-bottom: 14px; }
.card h3 { font-size: 1.35rem; }
.card p { color: var(--muted); font-size: .95rem; }

.more {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: var(--gold); text-transform: uppercase;
  transition: letter-spacing .3s;
}
.more:hover { letter-spacing: .16em; }

.quote { margin: 54px auto 0; text-align: center; max-width: 34em; }
.quote .rule { width: 56px; height: 1px; margin: 0 auto 24px; background: var(--gold-dim); }
.quote p { font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.3; color: var(--text); }
.quote b { color: var(--gold); font-weight: 500; }

.geek-gate {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 28px 32px; margin: 12px 0 40px;
  background: rgba(233,231,224,.015);
}
.geek-gate .mono-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; display: block; margin-bottom: 14px; }
.geek-gate p { color: var(--muted); font-size: .98rem; }
.geek-gate b { color: var(--text); }

/* ============ gate verdict (summit hero) ============ */

.verdict {
  display: block; position: relative;
  background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-top: 8px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  transition: border-color .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.verdict:hover { border-color: rgba(201,168,106,.5); transform: translateY(-3px); box-shadow: 0 36px 90px rgba(0,0,0,.6), 0 0 34px rgba(201,168,106,.12); }
.verdict-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(233,231,224,.02);
}
.verdict-title { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: .06em; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #c96a5f; } .dot.y { background: #c9a568; } .dot.g { background: #7fb98a; }

.verdict-body { padding: 22px 20px 10px; font-family: var(--mono); font-size: 12.5px; }
.v-line { padding: 6px 0; }
.v-line .d { color: var(--dim); }
.v-line { display: grid; grid-template-columns: 9.5ch 4.5ch 1fr; column-gap: 12px; align-items: baseline; }
/* single-span rows (command + verdict) must cross all three columns,
   not crush into the 9.5ch axis column */
.v-line .v-cmd, .v-line .v-verdict { grid-column: 1 / -1; }
.v-axis { color: var(--dim); letter-spacing: .02em; }
.v-pass { color: var(--ok); font-weight: 700; letter-spacing: .06em; }
.v-desc { color: var(--muted); }
.v-verdict { color: var(--text); font-weight: 500; }
/* long mono commands must wrap instead of blowing out the card on narrow screens */
.v-line .v-cmd, .v-line .v-verdict, .t-line, code, .flowline { overflow-wrap: anywhere; }
.verdict-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 20px; font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--line-soft); font-family: var(--mono);
}
.verdict-foot b { color: var(--text); }
.na-chip {
  border: 1px solid rgba(201,168,106,.4); color: var(--gold);
  padding: 2px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .08em;
}

/* ============ god grid ============ */

.god-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.god {
  position: relative;
  background: linear-gradient(165deg, rgba(233,231,224,.035), rgba(233,231,224,.008));
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 26px 24px; min-height: 208px;
  display: flex; flex-direction: column;
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
  transform-style: preserve-3d;
}
.god:hover {
  border-color: rgba(201,168,106,.5);
  box-shadow: 0 22px 48px rgba(0,0,0,.5), 0 0 30px rgba(201,168,106,.12);
}
.god .mono {
  font-family: var(--serif); font-size: 2.2rem; color: var(--gold);
  text-shadow: 0 0 24px rgba(201,168,106,.45);
  line-height: 1; margin-bottom: 18px; display: block;
  transition: text-shadow .35s;
}
.god:hover .mono { text-shadow: 0 0 38px rgba(201,168,106,.8); }
.god .mono svg { width: 30px; height: 30px; display: block; }
.god:hover .mono svg { filter: drop-shadow(0 0 22px rgba(201,168,106,.8)); }
.god h3 { font-size: 1.25rem; }
.god p { color: var(--muted); font-size: .92rem; flex: 1; }
.god .more { margin-top: 14px; }

/* ============ laws ============ */

.laws-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.law {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 24px 22px; min-height: 132px;
  background: linear-gradient(165deg, rgba(233,231,224,.025), rgba(233,231,224,.005));
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.law:hover { border-color: rgba(201,168,106,.45); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.law .gl { font-family: var(--serif); font-size: 2rem; color: var(--gold); line-height: 1; text-shadow: 0 0 22px rgba(201,168,106,.4); }
.law p { font-size: .98rem; color: var(--text); }
.laws-note { margin-top: 30px; color: var(--muted); font-size: .97rem; border-left: 2px solid var(--gold-dim); padding-left: 18px; }
.laws-note b { color: var(--text); }

/* ============ state ============ */

.state-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.state-quote { font-family: var(--serif); font-style: italic; font-size: 1.3rem; margin-top: 30px; color: var(--text); }
.sect-h { margin: 44px 0 8px; }
.num { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--dim); }
.num.mono { font-size: 10.5px; letter-spacing: .12em; color: var(--gold-dim); color: var(--gold); }

.fixed-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.fixed {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 18px 20px; background: var(--panel);
  transition: border-color .3s, background .3s;
}
.fixed:hover { border-color: rgba(201,168,106,.35); background: var(--panel2); }
.fixed .ck { color: var(--ok); font-family: var(--mono); font-size: 14px; line-height: 1.5; }
.fixed p { color: var(--muted); font-size: .95rem; }
.fixed b { color: var(--text); font-weight: 600; }

.warn-box {
  border: 1px solid rgba(201,168,106,.45); border-radius: 8px;
  background: linear-gradient(150deg, rgba(201,168,106,.09), rgba(201,168,106,.02));
  padding: 26px 26px;
}
.warn-box .t { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-2); margin-bottom: 10px; }
.warn-box p { color: var(--muted); font-size: .95rem; }
.warn-box b { color: var(--text); }

.phases {
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); overflow: hidden; margin-top: 18px;
}
.phases .t {
  padding: 16px 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
}
.phases .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }

/* A measurement taken against the RUNNING system, shown under the item it
   concerns. Added 2026-09-14: every finding from that day's audit was written
   into the register and this page rendered none of it, so it showed OPEN for
   an item whose first measured line is "Olympus CAN read a scanned page".
   Quieter than the row -- it is evidence about the item, not a second item. */
.phases .meas {
  margin: -2px 0 10px 0;
  padding: 6px 10px;
  border-left: 2px solid var(--line, #2a3242);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mut, #8b96a8);
  background: rgba(255, 255, 255, 0.015);
}
/* Dimmer than the finding: WHEN it was checked matters less than WHAT was
   found, but a measurement with no date is a claim with no age. */
.phases .meas .when {
  color: var(--acc, #6aa9ff);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  margin-right: 8px;
  white-space: nowrap;
}
.phases .row:hover { background: rgba(233,231,224,.02); }
.phases .nm { color: var(--muted); }
.phases .note { padding: 14px 20px; color: var(--dim); font-size: .85rem; }
.phases .note b { color: var(--text); }

.st { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; white-space: nowrap; padding: 3px 10px; border-radius: 999px; }
.st.done { color: var(--ok); border: 1px solid rgba(127,185,138,.4); }
.st.open { color: var(--gold); border: 1px solid rgba(201,168,106,.4); }
.st.na { color: var(--dim); border: 1px solid var(--line); }

.gold-block { border-left: 2px solid var(--gold); padding-left: 22px; margin: 34px 0; }
.gold-block p { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--text); }

/* ============ prose ============ */

.prose { padding: 66px 0 96px; }
.prose h3 { margin-top: 58px; font-size: 1.6rem; display: flex; align-items: baseline; gap: 14px; }
.prose h3 .num { flex: none; }
.prose h3 .num svg { width: 15px; height: 15px; display: block; }
.prose p { color: var(--muted); margin: 16px 0; max-width: 64em; }
.prose p b { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 20px 0 20px 4px; max-width: 64em; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.prose li { color: var(--muted); position: relative; padding-left: 26px; }
.prose li::before { content: "▸"; position: absolute; left: 0; color: var(--gold); font-size: 12px; top: 4px; }
.prose .numlist { counter-reset: nl; }
.prose .numlist li { counter-increment: nl; }
.prose .numlist li::before { content: counter(nl, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: .1em; }
.prose li b { color: var(--text); font-weight: 600; }

code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(233,231,224,.06);
  border: 1px solid rgba(233,231,224,.07);
  border-radius: 4px; padding: 1.5px 6px; color: var(--gold-2);
}

blockquote { margin: 28px 0; padding: 22px 26px; border-left: 2px solid var(--gold); background: rgba(201,168,106,.04); border-radius: 0 8px 8px 0; }
blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.22rem; color: var(--text); line-height: 1.5; }

.mono-note { font-family: var(--mono); font-size: 13px !important; color: var(--muted) !important; }

.note-box {
  border: 1px dashed rgba(201,168,106,.3); border-radius: 8px;
  background: rgba(201,168,106,.03);
  padding: 18px 22px; margin: 26px 0;
}
.note-box p { margin: 0; color: var(--muted); font-size: .93rem; }
.flowline { font-family: var(--mono) !important; font-size: 12.5px !important; letter-spacing: .01em; color: var(--gold-2) !important; word-break: break-word; }

/* ============ tables ============ */

.tbl-wrap { overflow-x: auto; margin: 26px 0; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 480px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 13px 18px; color: var(--muted); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(233,231,224,.02); }
.tbl td b { color: var(--text); font-weight: 600; }
.tbl td code { white-space: nowrap; }

/* ============ verify terminal ============ */

.verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; margin-bottom: 20px; }

/* summit verify: centered composition — the terminal is the bottom-center
   object, not a right-column afterthought. .verify-grid stays for the
   #/verify page where the side-by-side split works. */
.verify-hero { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: 20px; text-align: center; }
.verify-hero .verify-intro { max-width: 640px; }
.verify-hero .ctas { display: flex; justify-content: center; }
.verify-hero .terminal { width: min(680px, 100%); }

.terminal {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #07080f; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  background: rgba(233,231,224,.02);
}
.terminal-title { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: .06em; }
.terminal-body { padding: 14px 18px 18px; font-family: var(--mono); font-size: 12.5px; }
.terminal-foot {
  padding: 11px 18px; font-size: 10.5px; color: var(--dim); letter-spacing: .06em;
  border-top: 1px solid var(--line-soft); font-family: var(--mono);
}

.t-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; row-gap: 2px;
  padding: 5px 0; cursor: pointer; border-radius: 4px;
  transition: background .25s;
}
.t-line:hover { background: rgba(233,231,224,.04); }
.t-prompt { color: var(--gold); flex: none; }
.t-out { color: var(--dim); font-style: italic; }
.t-ok { color: var(--ok); }
.t-cmd { color: var(--text); }
.t-typing { color: var(--text); border-right: 1px solid var(--gold); animation: blink 1s steps(1) infinite; }
.t-spinner { color: var(--gold); animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { border-color: transparent; } }
.t-cursor { display: inline-block; width: 8px; height: 14px; background: var(--gold); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }

/* ============ cta band ============ */

#cta { padding-top: 20px; }
.cta-band {
  border: 1px solid rgba(201,168,106,.35); border-radius: 14px;
  background:
    radial-gradient(900px 400px at 70% 0%, rgba(201,168,106,.1), transparent 60%),
    linear-gradient(160deg, rgba(13,16,25,.9), rgba(5,6,10,.9));
  padding: 64px 56px;
  position: relative; overflow: hidden;
}
.cta-inner { max-width: 42em; }
.cta-inner h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 8px 0 16px; }
.cta-inner p { color: var(--muted); margin-bottom: 30px; }
.cta-inner p b { color: var(--text); }

.dive-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 10px 0 6px; }
.dive {
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 16px 14px;
  background: rgba(233,231,224,.02);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .3s, transform .3s var(--ease-out), background .3s;
}
.dive:hover { border-color: rgba(201,168,106,.5); transform: translateY(-3px); background: rgba(201,168,106,.06); }
.dive .gl { font-family: var(--serif); color: var(--gold); font-size: 1.5rem; }
.dive .nm { color: var(--text); font-size: .95rem; font-weight: 600; }
.dive .ln { color: var(--dim); font-size: .8rem; }

/* ============ footer ============ */

.page-foot { border-top: 1px solid var(--line-soft); padding: 44px 0 56px; background: rgba(5,6,10,.6); }
.page-foot .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.page-foot .brand { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .32em; color: var(--text); }
.page-foot .links { display: flex; gap: 22px; flex-wrap: wrap; }
.page-foot .links a { color: var(--muted); font-size: 13px; transition: color .3s; }
.page-foot .links a:hover { color: var(--gold); }
.page-foot p { color: var(--dim); font-size: .85rem; max-width: 60em; margin-top: 10px; }
.page-foot .src { font-family: var(--mono); font-size: 11px; }

/* ============ ripple ============ */

.ripple {
  position: fixed; z-index: 200; pointer-events: none;
  width: 0; height: 0; border-radius: 50%;
  border: 1.5px solid rgba(232, 200, 142, .9);
  box-shadow: 0 0 30px rgba(201,168,106,.5), inset 0 0 22px rgba(201,168,106,.3);
  transform: translate(-50%, -50%);
  animation: ripple 850ms cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes ripple {
  0%   { width: 0; height: 0; opacity: 1; }
  100% { width: 340px; height: 340px; opacity: 0; }
}
.ripple-glow {
  position: fixed; z-index: 199; pointer-events: none;
  width: 0; height: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,106,.28), rgba(201,168,106,.05) 55%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: ripple-glow 620ms cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes ripple-glow {
  0%   { width: 0; height: 0; opacity: 1; }
  100% { width: 260px; height: 260px; opacity: 0; }
}

/* ---------- Gate axes (ported from old olympus.css) ---------- */
.gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 34px; }
.axis {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 26px 22px;
  transition: transform .2s, border-color .2s;
}
.axis:hover { transform: translateY(-3px); border-color: rgba(201, 168, 106, .45); }
.axis:hover .more { opacity: 1; }
.axis .glyph {
  font-family: var(--serif); font-size: 1.5rem; color: var(--gold);
  margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;
}
.axis .glyph .sw { display: flex; gap: 4px; }
.axis .glyph .sw i {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(201, 168, 106, .3); background: rgba(201, 168, 106, .05);
}
.axis h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; font-family: var(--serif); }
.axis p { font-size: .88rem; color: var(--muted); margin: 0 0 14px; }

/* ============ mobile menu button ============ */

.mnav-toggle {
  display: none;
  flex: none;
  width: 42px; height: 42px;
  margin-left: auto;
  background: transparent; border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; padding: 0;
  position: relative;
}
.mnav-toggle:hover { border-color: rgba(201,168,106,.45); }
.mnav-toggle i {
  position: absolute; left: 10px; right: 10px; height: 1.5px;
  background: var(--gold); border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s, top .35s var(--ease-out);
}
.mnav-toggle i:nth-child(1) { top: 13px; }
.mnav-toggle i:nth-child(2) { top: 20px; }
.mnav-toggle i:nth-child(3) { top: 27px; }
body.nav-open .mnav-toggle i:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.nav-open .mnav-toggle i:nth-child(2) { opacity: 0; }
body.nav-open .mnav-toggle i:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ============ responsive ============ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .god-grid, .laws-grid { grid-template-columns: repeat(3, 1fr); }
  .gate-grid { grid-template-columns: repeat(2, 1fr); }
  .dive-grid { grid-template-columns: repeat(3, 1fr); }
  .tax-grid { grid-template-columns: repeat(2, 1fr); }
  .state-grid { grid-template-columns: 1fr; }
  .verify-grid { grid-template-columns: 1fr; }
  .card-grid.cols3 { grid-template-columns: repeat(2, 1fr); }
  #rail { display: none; }
  .bar-inner { width: min(1060px, calc(100vw - 48px)); }
}

/* drawer nav for phones and portrait tablets */
@media (max-width: 920px) {
  .bar-inner { gap: 12px; }
  .mnav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 105;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px 0 14px;
    background: rgba(5, 6, 10, .97);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 28px 56px rgba(0,0,0,.55);
    backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .28s ease, transform .34s var(--ease-out), visibility .28s;
  }
  body.nav-open .nav-links {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 15px; letter-spacing: .08em;
    padding: 15px 24px; margin: 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
  }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--gold); }
  .nav-links a:active { background: rgba(201,168,106,.08); }
}

@media (max-width: 720px) {
  .god-grid, .laws-grid, .tax-grid, .gate-grid, .card-grid.cols2, .card-grid.cols3, .dive-grid { grid-template-columns: 1fr; }
  .proof-seal .seal-sub { display: none; }
  .hero { padding: 120px 0 60px; }
  section { padding: 60px 0; }
  .cta-band { padding: 40px 26px; }
  .wrap { width: calc(100vw - 44px); }
  .hero-ctas .btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
  .hero { padding: 106px 0 48px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .quote p { font-size: 1.35rem; }
  .cta-band { padding: 34px 20px; }
  .terminal-body { padding: 12px 12px 16px; font-size: 11.5px; }
  .verdict-body { padding: 18px 16px 8px; font-size: 11.5px; }
  .page-foot .row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tcard, .card { padding: 24px 20px; }
}

@media (max-width: 360px) {
  .proof-seal { padding: 8px 11px; }
  .proof-seal .seal-num { display: none; }
  .nav-links a { padding: 14px 20px; }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .wi, .reveal { transform: none; opacity: 1; filter: none; }
}

/* ---------------------------------------------------------------------------
   The worked-example verdict cards (2026-08-16).

   `.v-line` is a three-column grid whose verdict column is 4.5ch -- sized for
   PASS and FAIL. "UNAVAIL" is seven characters, so it overflowed its cell and
   ran into the description beside it. Two things were wrong: the token was too
   long for the column, and it was marked up with `.na-chip`, a pill with its
   own border and padding that was never meant to sit inside a grid cell.

   Fixed by widening the verdict column on THESE cards only -- the hero card
   keeps its tighter grid -- and giving the unavailable state a plain text span
   in the same gold the rest of the site uses for "could not be checked".
--------------------------------------------------------------------------- */
.verdict.ex-verdict .v-line {
  grid-template-columns: 9.5ch 8ch 1fr;
}

.v-na {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .06em;
}

/* Worked-example two-column layout: prose beside the before/after cards. */
.ex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: start;
}

.ex-body p { margin: 0 0 14px; }

@media (max-width: 900px) {
  .ex-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ============ the catch log: expandable, and it grows ============ */

.cl-lede { color: var(--muted); font-size: .95rem; line-height: 1.7; margin: 8px 0 2px; }
.catch-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.catch {
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); overflow: hidden;
  transition: border-color .3s, background .3s;
}
.catch:hover { border-color: rgba(201,168,106,.28); }
.catch[open] { border-color: rgba(201,168,106,.35); background: var(--panel2); }
.catch > summary {
  list-style: none; cursor: pointer;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px;
}
.catch > summary::-webkit-details-marker { display: none; }
.catch > summary::before {
  content: "+"; color: var(--gold); font-family: var(--mono);
  font-size: 15px; line-height: 1.35; flex: none; width: 12px;
}
.catch[open] > summary::before { content: "\2212"; }
.catch > summary:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: -2px; }
.catch .head { flex: 1; min-width: 0; }
.catch .ct { display: block; color: var(--text); font-weight: 600; font-size: .98rem; line-height: 1.4; }
.catch .cl { display: block; color: var(--dim); font-size: .87rem; margin-top: 6px; line-height: 1.5; }
.catch .cl .cdate { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--gold); }
.catch .tag {
  flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
  margin-top: 2px;
}
.catch .tag.t-fixed { color: var(--ok); border-color: rgba(127,185,138,.35); }
.catch .tag.t-open { color: var(--gold); border-color: rgba(201,168,106,.4); }
.catch .body { padding: 2px 22px 20px 46px; }
.catch .body p { color: var(--muted); font-size: .95rem; margin-top: 13px; line-height: 1.65; }
.catch .body p:first-child { margin-top: 0; }
.catch .body b { color: var(--text); font-weight: 600; }
.catch .body .note-box { margin: 16px 0 0; }
@media (max-width: 720px) {
  .catch > summary { flex-wrap: wrap; }
  .catch .tag { order: 3; }
  .catch .body { padding-left: 20px; }
}


/* catch list: bounded and scrollable */
/* The log grows by design -- 22 entries and counting -- and at that length it
   pushed the register block below the fold, so a reader arriving at #/state
   scrolled a defect log to reach the summary that sent them there. Bounded to
   the viewport rather than to a pixel height: the constraint is "fits the
   screen the reader has". */
.catch-scroll {
  position: relative;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  margin: 18px 0;
}
/* PADDING INSIDE THE SCROLL AREA, not on the box. On the box it sat between the
   border and the scrollbar, so this block was a bordered frame around bordered
   items while the register's rows ran edge to edge -- two constructions, and
   the difference showed at the bottom edge. Inside, both boxes are the same
   object and their content simply scrolls within it. */
.catch-scroll .catch-list { margin: 0; padding: 14px; }

/* THE PAGE'S OWN SCROLLBAR, not a second one. `.page` defines this exact
   treatment; repeating the values rather than inventing a variant is what keeps
   two scroll regions on one screen looking like one site. */
.catch-scroll::-webkit-scrollbar { width: 8px; }
.catch-scroll::-webkit-scrollbar-thumb {
  background: rgba(201,168,106,.18);
  border-radius: 8px;
}
.catch-scroll::-webkit-scrollbar-thumb:hover { background: rgba(201,168,106,.4); }
.catch-scroll { scrollbar-width: thin; scrollbar-color: rgba(201,168,106,.28) transparent; }

/* A hard edge reads as a list that happens to be cut off; a fade reads as more
   below. Sticky so it stays at the bottom of the viewport as the reader
   scrolls, and pointer-events:none so it never eats a click on an entry. */
.catch-scroll::after {
  content: "";
  position: sticky;
  bottom: -4px;
  display: block;
  height: 34px;
  margin-top: -34px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--panel));
}

@media (max-width: 720px) {
  /* Less vertical room to spare, and a shorter scroller on a phone means the
     register block is reachable without a long swipe. */
}


/* register block: bounded to match the catch list */
/* Paired with .catch-scroll deliberately: the two blocks answer the same
   question from opposite ends -- what was caught, and what is still open -- and
   one bounded beside one unbounded reads as an accident rather than a layout.
   Same 62vh, same scrollbar, same fade.

   CSS ONLY, and on the id rather than the class. `update_register.py` rewrites
   everything between its markers whenever a row closes, so a wrapper div would
   not survive the next close; and `.phases` matches a second block on this page
   that is not the register. */
#open {
  position: relative;   /* the fade below needs a positioned ancestor */
  overflow-y: auto;
  /* The header row scrolls with the list. Sticky would keep "Open items: the
     register, verbatim" in view, but it is one line above a border and would
     sit over the rows it labels; the catch list has no sticky header either,
     and matching it is the point. */
}
#open::-webkit-scrollbar { width: 8px; }
#open::-webkit-scrollbar-thumb {
  background: rgba(201,168,106,.18);
  border-radius: 8px;
}
#open::-webkit-scrollbar-thumb:hover { background: rgba(201,168,106,.4); }
#open { scrollbar-width: thin; scrollbar-color: rgba(201,168,106,.28) transparent; }

@media (max-width: 720px) {
}

/* THE SAME BOTTOM EDGE ON BOTH. One block fading and one stopping dead is the
   difference the owner saw; a hard edge reads as a list that happens to be cut
   off, so either both fade or neither does. */
#open::after {
  content: "";
  position: sticky;
  bottom: -1px;
  display: block;
  height: 34px;
  margin-top: -34px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--panel));
}


/* state grid: the two bounded blocks end together */
/* `.state-grid` was `align-items: start`, so each column sized to its own
   content and sat at the top of the row. The left column has a heading and a
   lede above its scroller and the right column has neither, so two blocks of
   the SAME height ended a heading and a paragraph apart. The gap was never the
   heights. */
.state-grid { align-items: stretch; }

/* A grid item defaults to `min-height: auto`, which will not shrink below its
   content -- so a scroll container inside one grows to full height and never
   scrolls. This is the line that makes the column, rather than the block,
   decide. */
.state-grid > * { min-width: 0; min-height: 0; }

/* Each column becomes a column, and the scroller takes what is left after the
   heading and lede above it. Written as `flex: 1` rather than a height so the
   two end together whatever sits above them -- a fixed height tuned to today's
   copy drifts the first time a sentence is added. */
.state-grid > * { display: flex; flex-direction: column; }
.state-grid .catch-scroll,
.state-grid #open {
  /* A HEIGHT CHOSEN FOR READING, not for filling. `flex: 1` made these grow to
     the tallest column and turned the section into a wall of scroll. */
  flex: 0 0 auto;
  min-height: 0;
  max-height: var(--block-h);
  /* PUSHED TO THE BOTTOM OF THE COLUMN. The columns still stretch, so this is
     what keeps the two bottoms flush -- the slack collects as whitespace above
     the shorter column's block, where it costs nothing, instead of stretching
     the block itself. */
  margin-top: auto;
}

@media (max-width: 1080px) {
  /* One column below this width -- `.state-grid` already collapses -- so there
     is nothing to align against and the viewport cap comes back. */
  /* One column below this width, so there is nothing to align against and
     nothing to push to a bottom. A little more height is affordable when the
     block has the full width to itself. */
  .state-grid .catch-scroll,
  .state-grid #open { margin-top: 18px; max-height: var(--block-h-narrow); }
}


/* only the scrollers absorb the slack */
/* A flex column makes every child shrinkable -- flex-shrink defaults to 1 --
   so the warn-box, the six measured items and the #phases block would all give
   up height before the scrollers did, squashing content that has no scrollbar
   to compensate. Only the two bounded blocks should take up the difference. */
.state-grid > * > *:not(.catch-scroll):not(#open) { flex: 0 0 auto; }


/* the phase list takes the slack, so the column has no hole */
/* `margin: auto` on the register pushed it to the bottom of the column and left
   ~400px of empty page above it. The slack has to go somewhere; the block
   directly above is the right place for it, so the column reads as two blocks
   filling their space rather than block, hole, block.

   It grows rather than scrolls: 11 rows fit comfortably, and a third scroll
   region on one screen would be a scrollbar for no reason. */
.state-grid #phases {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.state-grid #phases::-webkit-scrollbar { width: 8px; }
.state-grid #phases::-webkit-scrollbar-thumb {
  background: rgba(201,168,106,.18);
  border-radius: 8px;
}
.state-grid #phases::-webkit-scrollbar-thumb:hover { background: rgba(201,168,106,.4); }

/* With the phase list taking the slack there is nothing left for the register
   to be pushed past, so the auto margin becomes a plain gap between the two
   blocks -- the same 18px every other pair of blocks on this page uses. */
.state-grid #open { margin-top: 18px; }

@media (max-width: 1080px) {
  /* One column: nothing to fill, nothing to align. */
  .state-grid #phases { flex: 0 0 auto; overflow-y: visible; }
}


/* align on the last child of each column, not on the scrollers */
/* `.catch-scroll` is not the last thing in the left column -- a blockquote
   follows it -- so aligning the two scrollers could never make the columns end
   together. The bottom edge of a column is its LAST child, and that is what has
   to meet. */
.state-grid .catch-scroll { margin-top: 0; }
.state-grid .state-left > blockquote { margin-top: auto; }

/* The register is last in its column, so it keeps the auto margin. The phase
   list above it no longer needs to absorb anything: with both columns ending on
   their last child, the slack is distributed by these two auto margins. */
.state-grid #phases { flex: 0 0 auto; overflow-y: visible; }
.state-grid #open { margin-top: auto; }


/* the register fills its column; the hole was the last thing left */
/* Every earlier attempt moved the slack around: above the register (a hole),
   below the scrollers (unequal bottoms), into the phase list (whitespace inside
   a border). It has to be absorbed by a block that BENEFITS from being taller,
   and the register is the only one -- 35 rows, of which more visible is more of
   the thing a reader came for. */
.state-grid #open {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 18px;     /* the ordinary gap, not an auto push */
}

/* The quote no longer needs pinning: with the register filling the right
   column, both columns end on their last child at the same height on their
   own. An auto margin here would only add a second gap the eye reads as an
   accident. */
.state-grid .state-left > blockquote { margin-top: 22px; }

@media (max-width: 1080px) {
  /* One column: nothing to fill. The register gets the same readable bound the
     catch list has, or it runs the length of the page again. */
  .state-grid #open {
    flex: 0 0 auto;
    max-height: var(--block-h-narrow);
  }
}


/* both bounded, top-aligned: unequal columns cannot end together */
/* Two columns in one grid row take the height of the taller, so whichever block
   is allowed to fill decides the row and the other column gets the gap. The
   content above each block differs by a warning box, six measured items, a
   heading, a lede and a quote -- no arrangement of flex and auto margins closes
   that, it only moves it. Five attempts moved it: 600px apart, a wall of
   scroll, a 400px hole, a 535px hole, a 300px overshoot.

   Both bounded, both scrolling, both in natural flow. The bottoms do not meet;
   nothing is empty, nothing overshoots, and each block is legibly a list that
   continues. */
.state-grid { align-items: start; }
.state-grid > * { display: block; }
.state-grid .catch-scroll,
.state-grid #open {
  flex: none;
  margin-top: 18px;
  max-height: var(--block-h);
  overflow-y: auto;
}
.state-grid .state-left > blockquote { margin-top: 22px; }
.state-grid #phases { overflow-y: visible; }

@media (max-width: 1080px) {
  .state-grid .catch-scroll,
  .state-grid #open { max-height: var(--block-h-narrow); }
}


/* the register grows down to the catch list, and cannot set the row */
/* The columns stretch again, so both end together. What broke this before was
   letting the register count toward its own column's height: with 35 rows it
   became the taller column and the left one got the gap. */
.state-grid { align-items: stretch; }
.state-grid > * {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* Nothing else gives up height. A flex column makes every child shrinkable, and
   the warning box and measured items have no scrollbar to compensate with. */
.state-grid > * > * { flex: 0 0 auto; }

/* The catch list keeps the readable cap: it is what the row is sized around. */
.state-grid .catch-scroll {
  flex: 0 0 auto;
  margin-top: 18px;
  max-height: var(--block-h);
  overflow-y: auto;
}
.state-grid .state-left > blockquote { margin-top: 22px; }

/* FLEX-BASIS ZERO. The register contributes no height to its column, so the
   left column sizes the row and this grows into what is left -- down to the
   same bottom edge, still scrolling. `1 1 auto` counted its 35 rows and made
   the right column the tallest, which is the bug this replaces. */
.state-grid #open {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  margin-top: 18px;
  overflow-y: auto;
}
.state-grid #phases { flex: 0 0 auto; overflow-y: visible; }

@media (max-width: 1080px) {
  /* One column: nothing to fill or align against, so the register takes the
     same readable bound rather than running the length of the page. */
  .state-grid > * { display: block; }
  .state-grid #open {
    flex: none;
    max-height: var(--block-h-narrow);
  }
}


/* ---- the way home: Olympus is a wing of blksheepltd.com. Inside the bar
   rather than above it, because #topbar is fixed at 64px and anything
   stacked on top of it is simply covered. ---- */
.umbrella{
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .16em; white-space: nowrap;
  color: rgba(237,231,222,.45); text-decoration: none;
  padding: 5px 11px 5px 0; margin-right: 14px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.umbrella:hover, .umbrella:focus-visible { color: #ede7de; }
@media (max-width: 720px){ .umbrella{ display:none; } }