/* Metric-compatible fallbacks, measured (not guessed) against the real faces via
   canvas metrics. When fonts arrive late on a throttled connection, text set in
   these occupies the same space, so the swap moves nothing: the CLS 0.30 that
   Lighthouse saw on slow 4G was the page reflowing when Marcellus and Inter landed. */
@font-face{font-family:'Marcellus-fallback';src:local('Georgia');
  size-adjust:102.3%;ascent-override:94.9%;descent-override:27.4%;line-gap-override:0%}
@font-face{font-family:'Inter-fallback';src:local('Arial');
  size-adjust:107%;ascent-override:90.6%;descent-override:22.4%;line-gap-override:0%}
/* jew.tech research pages — Digital Twin Pro design system, 2026-08-14.
   This file loads AFTER assets/site.css and overrides it, so the tokens here are
   what the evidence, methodology, agenda and paper pages actually render with.
   Flipping site.css alone left all four of them painting cream text on a
   transparent body: legible only because nothing had repainted the ground yet.

   Same rule as everywhere else: --accent is a rule/marker colour, never text.
   NVIDIA green is 2.3:1 on white. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raised: #fbfbfa;
  --bg-card: #ffffff;
  --fg: #000000cf;
  --muted: #5c635a;
  --accent: #76B900;
  --accent-dim: #5c635a;          /* where the accent was used for TEXT */
  --line: #e2e4dd;
  --line-faint: rgba(118, 185, 0, 0.22);

  --dtp-muted: #5c635a;
  --dtp-ink-soft: #3c4139;
  --dtp-border: #e2e4dd;
  --dtp-accent: #76B900;

  --serif: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Marcellus', 'Marcellus-fallback', Georgia, serif;
  --sans: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
  --max: 68ch;
  --max-wide: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.page {
  /* Colour first, then the gradient on top. The `background` shorthand resets
     background-color to transparent, so these four pages were rendering with no
     ground of their own and looked correct only because the browser default
     happens to be white. */
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% -20%, var(--bg-raised) 0%, var(--bg) 60%);
  background-attachment: fixed;
}

/* ---------- header / nav ---------- */

.site-header {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 1.4rem 1.5rem 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-faint);
}

.site-header .wordmark {
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}
.site-header .wordmark .tld { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
/* nine numbered path steps need a wider header than the 46rem reading column */
.site-header { max-width: 72rem; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--line);
}

/* ---------- layout ---------- */

main.prose {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
main.wide { max-width: var(--max-wide); }

h1 {
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: normal;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
h1 .tld { color: var(--accent); }

h2 {
  font-size: 1.35rem;
  font-weight: normal;
  color: var(--accent);
  margin: 2.4rem 0 0.8rem;
}

h3 {
  /* was 1.05rem (16.8px), which sat under the 17px paragraphs it heads */
  font-size: 1.25rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 1.8rem 0 0.5rem;
}

p { margin-bottom: 1rem; }
p.lede { font-size: 1.12rem; color: var(--fg); }
p.muted, .muted { color: var(--muted); }

a { color: var(--accent); }
a:hover { color: #e6c06a; }

em.he, span.he { font-style: normal; }
[lang="he"] { direction: rtl; unicode-bidi: isolate; }

.rule {
  width: 6rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 1.6rem 0;
}
.rule.center { margin-left: auto; margin-right: auto; }

blockquote {
  border-left: 2px solid var(--line);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.4rem 0;
  color: var(--muted);
  font-style: italic;
}
blockquote cite { display: block; margin-top: 0.4rem; font-style: normal; font-family: var(--sans); font-size: 0.8rem; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; max-width: 100%; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
}
th {
  text-align: left;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.9rem 0.5rem 0;
  white-space: nowrap;
}
td {
  border-bottom: 1px solid var(--line-faint);
  padding: 0.55rem 0.9rem 0.55rem 0;
  vertical-align: top;
}

/* ---------- stat grid ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: var(--line-faint);
  border: 1px solid var(--line-faint);
  margin: 1.6rem 0;
}
.stats .stat {
  background: var(--bg-raised);
  padding: 1.1rem 1.2rem;
}
.stat .n {
  display: block;
  font-size: 1.55rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
}
.card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--line-faint);
  padding: 1.2rem 1.3rem 1.1rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--line); color: var(--fg); }
.card h3 { margin: 0 0 0.35rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.card p { margin: 0; font-family: var(--sans); font-size: 0.84rem; color: var(--muted); }

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 1.8rem 0; position: relative; padding-left: 1.4rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.28rem; top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.timeline li { position: relative; margin-bottom: 1.15rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.4rem; top: 0.52rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
}
.timeline .when {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}
.timeline .what { color: var(--fg); }
.timeline .why { display: block; font-family: var(--sans); font-size: 0.84rem; color: var(--muted); }

/* ---------- code / formulas ---------- */

code, pre {
  font-family: var(--mono);
  font-size: max(0.88em, 0.75rem);
  background: var(--bg-raised);
}
code { padding: 0.1em 0.35em; border: 1px solid var(--line-faint); }
pre {
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border: 1px solid var(--line-faint);
  margin: 1.3rem 0;
  line-height: 1.55;
}
pre code { padding: 0; border: 0; background: none; }

.formula {
  text-align: center;
  margin: 1.4rem 0;
  overflow-x: auto;
  padding: 0.4rem 0;
}

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 2rem 1.5rem 2.4rem;
  border-top: 1px solid var(--line-faint);
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-faint); }
.site-footer a:hover { color: var(--accent); }
.site-footer .cols { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ---------- hero (home) ---------- */

.hero {
  text-align: center;
  padding: 4.5rem 1.5rem 3rem;
  max-width: 44rem;
  margin: 0 auto;
}
.hero .star {
  font-size: 2rem;
  color: var(--accent);
  letter-spacing: 0.5rem;
  margin-bottom: 1.2rem;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.hero .tagline {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* ---------- misc ---------- */

.note {
  background: var(--bg-raised);
  border: 1px solid var(--line-faint);
  border-left: 2px solid var(--accent-dim);
  padding: 0.9rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  margin: 1.4rem 0;
}

.crumbs {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

html, body { overflow-x: hidden; }
body { overflow-wrap: break-word; }
h1, h2 { text-wrap: balance; }

@media (max-width: 480px) {
  .site-header { padding: 1.1rem 1rem 0.9rem; }
  main.prose { padding: 1.8rem 1rem 3rem; }
  .site-nav { gap: 0.8rem; }
  .hero h1 br, h1 br { display: none; }
  .hero { padding: 3rem 1rem 2rem; }
}

h2.h3-style { margin: 0 0 0.35rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; }

/* ---------- navigation, sitemap footer, TOC, pager (v2 structure) ---------- */

.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--line); }

/* Rich footer sitemap — the whole structure, always visible */
.site-footer { display: block; }
.sitemap {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 2.4rem 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 2rem;
}
.sitemap h3 {
  font-family: var(--sans);
  /* was 0.75rem (12px) above 0.95rem (15.2px) links - a heading smaller than the
     list it heads. Still an uppercase label, now correctly ranked above it. */
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li { margin-bottom: 0.75rem; line-height: 1.4; }
.sitemap li a {
  display: block;
  color: var(--fg);
  text-decoration: none;
  border: 0;
  font-size: 0.95rem;
}
.sitemap li a:hover { color: var(--accent); }
.sitemap li span {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
}
.fmeta {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 1.2rem 1.5rem 2.4rem;
  border-top: 1px solid var(--line-faint);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fmeta a { color: var(--muted); border-bottom: 1px solid var(--line-faint); text-decoration: none; }
.fmeta a:hover { color: var(--accent); }

/* On this page */
.toc {
  border: 1px solid var(--line-faint);
  border-left: 2px solid var(--accent-dim);
  background: var(--bg-raised);
  padding: 1rem 1.2rem 0.9rem;
  margin: 1.8rem 0;
}
.toc .toch {
  font-family: var(--sans);
  /* was 0.75rem (12px) heading a 17px list - three quarters the size of the thing
     it heads. Still an uppercase label, no longer outranked by its own contents. */
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.toc li { margin-bottom: 0.35rem; break-inside: avoid; }
.toc a { font-family: var(--sans); font-size: 0.85rem; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 620px) { .toc ul { columns: 1; } }

/* Continue-reading pager */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-faint);
  flex-wrap: wrap;
}
.pager a {
  flex: 0 1 auto;
  min-width: 14rem;
  text-decoration: none;
  color: var(--fg);
  border: 1px solid var(--line-faint);
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease;
}
.pager a:hover { border-color: var(--line); }
.pager a.next { text-align: right; }
.pager span {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

/* Start-here path (home) */
.path { counter-reset: step; list-style: none; margin: 1.8rem 0; padding: 0; }
.path li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1rem;
}
.path li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0.1rem;
  width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.path a { text-decoration: none; font-size: 1.05rem; }
.path a:hover { text-decoration: underline; }
.path .what { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); }
.nowrap { white-space: nowrap; }

/* run-in rubric labels (intersections source/mirror/built scaffold) */
.rubric { color: var(--accent); font-weight: 600; font-family: var(--sans); font-size: 0.9em; letter-spacing: 0.01em; }

/* ---------- design pass: personality + delight ---------- */

h1, h2, .site-header .wordmark { font-family: var(--display); }

/* Hero: the two fields in two typefaces — the type enacts the convergence */
.hero h1 { font-family: var(--display); }
.hero .f-cs {
  font-family: var(--mono);
  font-size: 0.66em;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.hero .f-and { font-style: italic; color: var(--muted); }

/* Illuminated initial — drawn from the manuscript tradition */
p.dropcap::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.1em;
  line-height: 0.74;
  color: var(--accent);
  padding: 0.06em 0.14em 0 0;
  font-weight: 600;
}
p.dropcap { clear: both; }

/* Pull-quote — gives the strongest lines room and breaks the wall of text */
.pullquote {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--fg);
  border: 0;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  padding: 1.5rem 0 1.5rem 0;
  margin: 2.4rem 0;
  font-style: normal;
  text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 0.7rem;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.03em;
  color: var(--muted); font-style: normal;
}
@media (max-width: 480px) { .pullquote { font-size: 1.25rem; } }

/* ---------- reading-path step indicator (2026-08-04) ---------- */

.pager .step {
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
}
.pager .step b { color: var(--accent); font-weight: 600; }

/* ---------- discoveries (2026-08-04) ---------- */

:root {
  --cat-graph: #56b3a7;
  --cat-math: #7ea6dd;
  --cat-tradition: #d4a94e;
  --cat-engineering: #d59a7a;
  --cat-history: #b1a3dd;
}

.disco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}
.disco {
  background: var(--bg-card);
  border: 1px solid var(--line-faint);
  border-top: 2px solid var(--line);
  padding: 1.1rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.disco:target, .disco.lit {
  border-color: var(--accent);
  border-top-color: var(--accent);
}
.disco .chip {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.disco[data-cat="graph"] { border-top-color: var(--cat-graph); }
.disco[data-cat="graph"] .chip { color: var(--cat-graph); }
.disco[data-cat="math"] { border-top-color: var(--cat-math); }
.disco[data-cat="math"] .chip { color: var(--cat-math); }
.disco[data-cat="tradition"] { border-top-color: var(--cat-tradition); }
.disco[data-cat="tradition"] .chip { color: var(--cat-tradition); }
.disco[data-cat="engineering"] { border-top-color: var(--cat-engineering); }
.disco[data-cat="engineering"] .chip { color: var(--cat-engineering); }
.disco[data-cat="history"] { border-top-color: var(--cat-history); }
.disco[data-cat="history"] .chip { color: var(--cat-history); }
.disco p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.disco .src {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.disco .src a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.disco .src a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.disco-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0.2rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}
button.surprise {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-dim);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
button.surprise:hover { border-color: var(--accent); background: var(--bg-raised); }

.disco-legend {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.disco-legend .k { display: inline-flex; align-items: center; gap: 0.35rem; }
.disco-legend .k::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: currentColor; }
.disco-legend .k.graph { color: var(--cat-graph); }
.disco-legend .k.math { color: var(--cat-math); }
.disco-legend .k.tradition { color: var(--cat-tradition); }
.disco-legend .k.engineering { color: var(--cat-engineering); }
.disco-legend .k.history { color: var(--cat-history); }

/* home teaser */
.disco-teaser {
  background: var(--bg-card);
  border: 1px solid var(--line-faint);
  border-left: 2px solid var(--accent);
  padding: 1.2rem 1.3rem;
  margin: 2rem 0;
}
.disco-teaser .kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.disco-teaser p { margin: 0 0 0.6rem; }
.disco-teaser .more { font-family: var(--sans); font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- chain of transmission (home signature motif, 2026-08-05) ----------
   Gold-on-dark stations threaded on a single line. Column layout by default with
   one continuous vertical rule; a single row on wide screens, where the rule is
   drawn per-station so it can stop cleanly at the final node. */

.chain {
  list-style: none;
  margin: 2.2rem 0 1.8rem;
  padding: 0;
  display: grid;
  gap: 1.5rem 0;
  position: relative;
}

/* the continuous thread, faded at both ends so the endpoints need no arithmetic */
.chain::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.7rem;
  bottom: 0.7rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 5%, var(--line) 95%, transparent);
}

.chain .station {
  position: relative;
  padding-left: 2.2rem;
}

/* each dot is opaque, so it punches a bead onto the thread behind it */
.chain .station::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  background: var(--bg);
}
.chain .station.now::after {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 169, 78, 0.14);
}

.chain .era {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dim);
  line-height: 1.5;
}
.chain .name {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--fg);
  line-height: 1.35;
}
.chain .gloss {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.chain-caption {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Wide screens only: one row, breaking out of the 46rem prose column to the
   64rem measure so seven labels have room. Gated at 1080px, the narrowest
   viewport where the breakout still clears both margins. */
@media (min-width: 1080px) {
  .chain {
    grid-template-columns: repeat(7, 1fr);
    gap: 0 1.1rem;
    margin: 2.6rem 0 2.4rem;
    width: var(--max-wide);
    margin-left: calc((100% - var(--max-wide)) / 2);
  }
  .chain::before { display: none; }
  .chain .station { padding: 1.9rem 0 0; }
  /* dot-to-dot: starts just right of the previous dot, stops at this one, so
     the thread never runs past the final node */
  .chain .station + .station::before {
    content: "";
    position: absolute;
    left: calc(0.85rem - 100% - 1.1rem);
    top: 0.42rem;
    width: calc(100% + 1.1rem - 0.85rem);
    height: 1px;
    background: linear-gradient(to right, var(--line-faint), var(--line));
  }
  .chain .station::after { top: 0; }
  .chain .name { font-size: 0.94rem; }
  /* three lines reserved so every name sits on one baseline, whichever era
     labels happen to wrap */
  .chain .era { font-size: 0.75rem; letter-spacing: 0.1em; min-height: 3em; text-wrap: balance; }
  .chain .gloss { font-size: 0.75rem; }
  .chain-caption {
    width: var(--max-wide);
    margin-left: calc((100% - var(--max-wide)) / 2);
  }
}

/* ---------- mission block ---------- */

.mission {
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  padding: 1.8rem 0 1.4rem;
  margin: 2.4rem 0;
}
.mission h2 { margin-top: 0; }

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

.hero .byline {
  font-family: var(--sans);
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-top: 1.6rem;
}
.hero .byline strong { color: var(--fg); font-weight: 600; }
.hero .hero-claim {
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: 1.2rem;
  text-align: left;
}
.hero-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
}
.hero-actions a {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 0.6rem 1.1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-actions a:hover { border-color: var(--accent); background: var(--bg-raised); }

/* The three hero actions total ~760px and the hero column is 44rem (704px), so they
   can never sit on one line inside it — a plain flex-wrap orphans the third button.
   Wide viewports: break the row out symmetrically so all three fit on one line.
   Narrow: stack one per line, which is a deliberate shape rather than a 2+1 orphan. */
@media (min-width: 60rem) {
  .hero-actions {
    width: 48rem;
    margin-left: calc((100% - 48rem) / 2);
    flex-wrap: nowrap;
  }
  .hero-actions a { white-space: nowrap; }
}
@media (max-width: 59.99rem) {
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions a { width: 100%; max-width: 22rem; text-align: center; }
}

/* ---------- definition list (what the Torah is) ---------- */

.defs { margin: 1.4rem 0; }
.defs dt {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 1rem;
}
.defs dd {
  margin: 0.2rem 0 0;
  color: var(--fg);
}

/* long, explicit hero headline needs a smaller ramp than the short one */
.hero h1.h1-long { font-size: clamp(1.65rem, 3.4vw, 2.45rem); line-height: 1.3; }
.hero .hero-claim { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* the home path lists steps 2–8; step 1 is the page you are on */
.path.from-2 { counter-reset: step 1; }

/* ---------- foldable reference block (bibliography background) ---------- */

details.fold {
  border: 1px solid var(--line-faint);
  border-left: 2px solid var(--accent-dim);
  background: var(--bg-raised);
  padding: 0 1.2rem;
  margin: 1.8rem 0;
}
details.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  color: var(--accent-dim);
}
details.fold[open] > summary::before { content: "\2212"; }
details.fold[open] > summary { border-bottom: 1px solid var(--line-faint); margin-bottom: 0.6rem; }
details.fold > *:last-child { margin-bottom: 1.1rem; }
details.fold h3 { margin-top: 1.4rem; }

/* breadcrumb: the position marker (step number or "Reference") reads in accent */
.crumbs .where { color: var(--accent-dim); }

/* nav step numbers — the primary nav is the reading path, so it shows the step */
.site-nav a { display: inline-flex; align-items: baseline; gap: 0.4em; }
.site-nav .n {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dim);
  opacity: 0.75;
}
.site-nav a:hover .n, .site-nav a[aria-current="page"] .n { color: var(--accent); opacity: 1; }

/* visually-hidden: keeps the document outline complete without adding visual noise */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ============ Digital Twin Pro type system ============ */
body { font-family: var(--sans); text-wrap: pretty; color: var(--fg); background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.22; }
p, li { max-width: var(--max); }
a { color: var(--fg); border-bottom: 1px solid var(--line-faint); text-decoration: none; }
a:hover { border-bottom-color: var(--accent); }
[id] { scroll-margin-top: 88px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* Anything that inherited the old gold-as-text role must be ink now: green measures
   2.33:1 on this ground, which is why the standard keeps it off type entirely. */
.toc .toch, .toc h2, .toc-title, h2.toch { color: var(--fg); }
.toc a, .toch a { color: var(--fg); }

/* Same 24px control target on the reference pages' standalone links. */
/* Standalone links: table cells that hold nothing but a source link, the primary
   nav, the contents list and the breadcrumb. Links inline in a sentence are exempt
   under WCAG 2.2 2.5.8 and are deliberately excluded. */
li > a:only-child, dd > a:only-child, td > a:only-child,
.toc a, .site-nav a, .site-header a, .breadcrumb a {
  min-height: 24px; display: inline-flex; align-items: center;
}

/* Every link inside a <nav> is a control, so all of them get the 24px target.
   Targeting classes missed two cases: the breadcrumb is .crumbs (not .breadcrumb),
   and the chain items are not :only-child because each carries a number span.

   BUT display must not be forced on a link that wraps block content. Some of these
   cards are anchors containing an eyebrow, a heading and a paragraph; making them
   inline-flex laid those three out as three cramped columns on a phone. Height is
   safe for every link, the display switch only for single-line ones. */
nav a { min-height: 24px; }
nav a:not(:has(p, h1, h2, h3, h4, ul, ol, div)) {
  display: inline-flex; align-items: center;
}

/* The footer sitemap is a list of controls too: FOOTER.site-footer > .sitemap >
   .fcol > ul > li > a, each with a number span beside it. */
.sitemap a, .site-footer li > a { min-height: 24px; display: inline-flex; align-items: center; }

@media (max-width: 1024px) {
  .site-nav a, .toc a, .crumbs a, .sitemap a, .site-footer li > a,
  td > a:only-child { min-height: 44px; }
}