/* ============================================================
   The Names of God in Bereishit — torahtech.co/names
   Program theme. Loads AFTER shared.css and tt-brand.css,
   which supply the Torah Tech tokens, chrome and primitives.
   This file owns the source blocks, the verse map, the level
   cards, the snake conversation and the quiz.
   Base blocks are shared in shape with /adam and /sefirot (prefix nm-).
   ============================================================ */
:root {
  --ink:          var(--tt-ink);
  --ink-soft:     var(--tt-ink-soft);
  --muted:        var(--tt-ink-muted);
  --line:         var(--tt-line);
  --line-soft:    #f1f5fa;
  --surface:      var(--tt-surface);
  --surface-2:    var(--tt-surface-2);
  --accent:       var(--tt-blue);
  --accent-deep:  var(--tt-navy);
  --accent-soft:  var(--tt-line-strong);
  --font-display: var(--tt-font-display);
  --font-body:    var(--tt-font-body);
  --font-serif:   var(--tt-font-serif);
  --font-hebrew:  var(--tt-font-hebrew);
  --radius:       var(--tt-radius);
  --radius-sm:    var(--tt-radius-sm);
  --shadow:       var(--tt-shadow-card);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* shared.js injects the header after load; reserve its height so the hero does not jump (CLS). */
#shared-header:empty { min-height: 71px; }
@media (max-width: 768px) { #shared-header:empty { min-height: 67px; } }

/* ── Utility bar (sits under the shared header) ──────────────── */
.nm-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 9px clamp(12px, 4vw, 28px);
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nm-home { flex: none; display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.nm-home .nm-kicker { font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); opacity: .8; }
.nm-home > span:last-child { font: 600 .95rem/1.2 var(--font-display); color: var(--accent-deep); margin-top: 2px; }
.nm-toc {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 4px; margin: 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.nm-toc::-webkit-scrollbar { display: none; }
.nm-toc a {
  flex: none; text-decoration: none; white-space: nowrap;
  font: 600 .74rem/1 var(--font-body); color: var(--ink-soft);
  padding: 8px 12px; border-radius: 999px; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nm-toc a:hover { background: var(--surface-2); border-color: var(--line); color: var(--accent-deep); }
.nm-toc a.on { background: var(--accent-deep); color: #fff; }
.nm-btn {
  flex: none; appearance: none; cursor: pointer; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--accent-deep); font: 600 .78rem/1 var(--font-body);
  padding: 8px 11px; min-width: 40px; min-height: 34px;
  transition: background .15s, transform .1s, border-color .15s, color .15s;
}
.nm-btn:hover { background: var(--surface-2); transform: translateY(-1px); border-color: var(--accent-soft); }
.nm-btn:active { transform: translateY(0); }
.nm-btn[aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.nm-btn .he { font-family: var(--font-hebrew); font-size: .95rem; }
@media (max-width: 620px) {
  .nm-home { display: none; }
  .nm-toc { margin-left: -4px; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* These three sit inside clipping containers (overflow hidden / scroll), so the ring has to be drawn inside the box. */
.nm-faq summary:focus-visible, .nm-seg button:focus-visible, .nm-toc a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -3px; }
.nm-seg button[aria-pressed="true"]:focus-visible, .nm-toc a.on:focus-visible { outline-color: #fff; }
.nm-seg button:first-child { border-radius: 999px 0 0 999px; }
.nm-seg button:last-child { border-radius: 0 999px 999px 0; }

/* ── Page ────────────────────────────────────────────────────── */
.nm-wrap { max-width: 860px; margin: 0 auto; padding: 30px clamp(16px, 5vw, 28px) 20px; }
.nm-he-inline { font-family: var(--font-hebrew); font-size: 1.15em; direction: rtl; unicode-bidi: isolate; }

.nm-section { margin: 64px 0 0; scroll-margin-top: 64px; }
.nm-section:first-child { margin-top: 18px; }
.nm-section > .tt-eyebrow { display: flex; justify-content: center; margin-bottom: 12px; }
/* Brand blue on white is ~3:1, too light for small caps; keep the blue hairlines, darken the text. */
.nm-section > .tt-eyebrow.on-light { color: var(--accent-deep); }
.nm-section > h2 {
  font: 700 clamp(1.4rem, 4vw, 1.85rem)/1.22 var(--font-display); color: var(--accent-deep);
  letter-spacing: -.5px; margin: 0 0 12px; text-align: center;
}
.nm-section > h2::after {
  content: ''; display: block; width: 60px; height: 2px;
  background: var(--accent); margin: 14px auto 0;
}
.nm-sub { text-align: center; color: var(--muted); font-size: .95rem; max-width: 56ch; margin: 14px auto 26px; line-height: 1.6; }

.nm-prose { font-size: 1rem; line-height: 1.82; color: var(--ink-soft); }
.nm-prose p { margin: 0 0 15px; }
.nm-prose strong { color: var(--accent-deep); font-weight: 700; }
.nm-prose a, .nm-faq a { color: var(--accent-deep); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.nm-prose a:hover, .nm-faq a:hover { color: var(--tt-navy-deep); text-decoration-color: var(--accent-deep); text-decoration-thickness: 2px; }
.nm-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: clamp(18px, 3.8vw, 28px); }
.nm-panel > :last-child { margin-bottom: 0; }
.nm-gap { margin-top: 22px; }

/* ── Source blocks ───────────────────────────────────────────── */
.nm-src {
  margin: 22px 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
}
.nm-src-he {
  font-family: var(--font-hebrew); direction: rtl; text-align: right;
  font-size: clamp(1.12rem, 2.9vw, 1.32rem); line-height: 1.95; color: var(--ink);
  padding: clamp(16px, 3.6vw, 24px) clamp(16px, 3.6vw, 26px) 6px;
}
.nm-src-en {
  font-family: var(--font-serif); font-size: clamp(1.06rem, 2.4vw, 1.18rem); line-height: 1.6; color: var(--ink-soft);
  padding: 6px clamp(16px, 3.6vw, 26px) 4px;
}
.nm-src-ref {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px clamp(16px, 3.6vw, 26px);
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
  font: 700 .6rem/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep);
}
.nm-src-ref a { color: var(--accent-deep); text-decoration: none; font-weight: 600; letter-spacing: .06em; text-transform: none; font-size: .74rem; }
.nm-src-ref a:hover { color: var(--tt-navy-deep); text-decoration: underline; }

/* deep variant: the page's few load-bearing quotes */
.nm-src.deep { background: var(--tt-grad-deep); border-color: transparent; box-shadow: 0 14px 36px rgba(12,35,80,.22); text-align: center; }
.nm-src.deep .nm-src-he { color: #fff; text-align: center; font-size: clamp(1.25rem, 3.4vw, 1.55rem); }
.nm-src.deep .nm-src-en { color: rgba(255,255,255,.9); text-align: center; }
.nm-src.deep .nm-src-ref { background: rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.12); color: var(--tt-ice); justify-content: center; }
.nm-src.deep .nm-src-ref a { color: var(--tt-ice); }

body.nm-no-en .nm-src-en, body.nm-no-en .nm-en-opt { display: none; }
body.nm-no-he .nm-src-he, body.nm-no-he .nm-he-opt { display: none; }
body.nm-no-he .nm-src-en { padding-top: clamp(16px, 3.6vw, 24px); }
.nm-fade { animation: nm-fade .32s ease both; }
@keyframes nm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nm-switch { display: flex; justify-content: center; margin: 0 0 20px; }
.nm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.nm-seg button {
  appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--ink-soft);
  font: 600 .84rem/1 var(--font-body); padding: 12px 20px; transition: background .15s, color .15s;
}
.nm-seg button:hover { background: rgba(94,144,227,.14); }
.nm-seg button[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }
/* ── Guardrails list ─────────────────────────────────────────── */
.nm-guard { display: grid; gap: 12px; margin-top: 4px; }
.nm-guard-item { display: flex; gap: 14px; align-items: flex-start; }
.nm-guard-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .82rem/1 var(--font-display); color: #fff; background: var(--tt-grad-header);
}
.nm-guard-item p { margin: 3px 0 0; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.nm-faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  padding: 0; margin-bottom: 10px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.nm-faq details[open] { border-color: var(--accent-soft); box-shadow: var(--shadow); }
.nm-faq summary {
  cursor: pointer; list-style: none; padding: 16px 18px;
  font: 600 .97rem/1.45 var(--font-body); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .15s;
}
.nm-faq summary::-webkit-details-marker { display: none; }
.nm-faq summary:hover { background: var(--surface-2); }
.nm-faq summary::after { content: '+'; flex: none; color: var(--accent); font-size: 1.3rem; line-height: 1; font-weight: 400; }
.nm-faq details[open] summary::after { content: '\2013'; }
.nm-faq details[open] summary { background: var(--surface-2); }
.nm-faq-body { padding: 14px 18px 16px; font-size: .94rem; line-height: 1.78; color: var(--ink-soft); }
.nm-faq-body p { margin: 0 0 10px; }
.nm-faq-body p:last-child { margin: 0; }

/* ── Related ─────────────────────────────────────────────────── */
.nm-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nm-related a {
  display: block; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 20px 20px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nm-related a:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-lift); border-color: var(--accent-soft); }
.nm-rel-he { font-family: var(--font-hebrew); direction: rtl; font-size: 1.3rem; color: var(--accent-deep); }
.nm-rel-en { font: 700 .58rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep); margin-top: 4px; }
.nm-rel-note { font-size: .82rem; color: var(--muted); margin-top: 6px; line-height: 1.55; }
@media (max-width: 720px) { .nm-related { grid-template-columns: 1fr; } }

/* credits strip, above the CTA band */
.nm-credits {
  max-width: 860px; margin: 56px auto 0; padding: 26px clamp(16px, 5vw, 28px) 40px;
  border-top: 1px solid var(--line); text-align: center;
  color: var(--muted); font-size: .8rem; line-height: 1.75;
}
.nm-credits a { color: var(--accent-deep); }
.nm-credits p { margin: 0 0 6px; }

/* ── Reveal on scroll ──────────────────────────────────────────
   CSS scroll-driven only. Content is never hidden by default: browsers without
   animation-timeline (or with reduced motion, or printing) simply show it. An
   earlier JS/IntersectionObserver version left all content at opacity 0 in
   browsers where the observer never fired. Do not bring that back. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .nm-reveal {
      animation: nm-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes nm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Skeleton shimmer for the interactive mounts before JS fills them ── */
.nm-skel { border-radius: 10px; min-height: 120px; background: linear-gradient(90deg, #eef3fa 25%, #f7f9fc 37%, #eef3fa 63%); background-size: 400% 100%; animation: nm-shimmer 1.3s ease infinite; }
@keyframes nm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.nm-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The two names: text highlights and tags ─────────────────────
   Navy stands for Elokim (justice), cyan for Hashem (mercy). Color is never
   the only cue: the map also uses shape, and every tag carries the name in words. */
.nm-h, .nm-e { font-weight: 700; border-radius: 5px; padding: 0 .2em; }
.nm-h { color: #00606c; background: rgba(0,200,220,.18); }
.nm-e { color: var(--accent-deep); background: rgba(28,71,165,.1); }
.nm-src.deep .nm-h { color: #06223f; background: var(--tt-ice); }
.nm-src.deep .nm-e { color: #fff; background: rgba(255,255,255,.18); }
.nm-tag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 700 .62rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; border: 2px solid transparent;
}
.nm-tag.e { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
.nm-tag.h { background: var(--tt-cyan); color: #06223f; border-color: var(--tt-cyan); }
.nm-tag.he { background: var(--accent-deep); color: #fff; border-color: var(--tt-cyan); }
.nm-tag.x { background: var(--surface); color: var(--accent-deep); border: 2px dashed var(--accent-soft); }
.nm-tag.none { background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* ── The verse map ───────────────────────────────────────────── */
.nm-map {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); padding: clamp(14px, 3.4vw, 24px);
}
.nm-map-top { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.nm-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.nm-legend li { display: flex; align-items: center; gap: 7px; font: 600 .78rem/1.2 var(--font-body); color: var(--ink-soft); }
.nm-legend .nm-cell { width: 22px; min-height: 22px; cursor: default; pointer-events: none; }
.nm-map-top .nm-seg button { padding: 10px 14px; font-size: .76rem; }

.nm-band { padding: 18px 0 4px; border-top: 1px solid var(--line-soft); scroll-margin-top: 70px; }
.nm-band:first-of-type { border-top: 0; }
.nm-band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nm-band-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .9rem/1 var(--font-display); color: #fff; background: var(--tt-grad-header);
}
.nm-band-title { font: 700 1rem/1.25 var(--font-display); color: var(--accent-deep); margin: 0; }
.nm-band-ref { font: 700 .58rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nm-band-short { flex-basis: 100%; font-size: .86rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; margin-top: 12px; }
.nm-chap {
  display: grid; place-items: center; min-height: 34px; text-align: center;
  font: 700 .5rem/1.15 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.nm-cell {
  appearance: none; position: relative; cursor: pointer; padding: 0; margin: 0;
  min-height: 34px; aspect-ratio: 1; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: #eef3fa; color: #55657f;
  font: 700 .72rem/1 var(--font-display);
  transition: transform .12s, box-shadow .15s, opacity .2s;
}
.nm-cell[data-k="e"] { background: var(--accent-deep); color: #fff; }
.nm-cell[data-k="h"] { background: var(--tt-cyan); color: #06223f; border-radius: 50%; }
.nm-cell[data-k="he"], .nm-cell[data-k="mix"] { background: var(--accent-deep); color: #fff; border: 3px solid var(--tt-cyan); border-radius: 12px; }
.nm-cell[data-k="x"] { background: var(--surface); color: var(--accent-deep); border: 2px dashed var(--accent); }
button.nm-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(28,71,165,.25); }
button.nm-cell:active { transform: translateY(0); }
button.nm-cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 2; }
button.nm-cell[aria-pressed="true"] { outline: 3px solid #091836; outline-offset: 2px; transform: scale(1.08); z-index: 1; }
/* A dot marks the places where the pattern breaks. */
.nm-cell.flag::after {
  content: ''; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 3px solid #091836;
}
.nm-map.only-flags button.nm-cell:not(.flag) { opacity: .3; }

.nm-slot:empty { display: none; }
.nm-detail {
  margin-top: 14px; border: 1px solid var(--accent-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: clamp(14px, 3.2vw, 20px);
}
.nm-d-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.nm-d-ref { font: 700 1.08rem/1.2 var(--font-display); color: var(--accent-deep); margin: 0 4px 0 0; }
.nm-d-who { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; }
.nm-d-who b { color: var(--accent-deep); }
.nm-d-he { font-family: var(--font-hebrew); direction: rtl; text-align: right; font-size: clamp(1.15rem, 3vw, 1.34rem); line-height: 2; color: var(--ink); margin: 10px 0 0; }
.nm-d-en { font-family: var(--font-serif); font-size: clamp(1.06rem, 2.4vw, 1.16rem); line-height: 1.6; color: var(--ink-soft); margin: 8px 0 0; }
.nm-d-note { font-size: .88rem; line-height: 1.6; color: var(--ink-soft); border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; margin: 12px 0 0; }
.nm-d-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nm-d-nav a { font: 600 .78rem/1 var(--font-body); color: var(--accent-deep); text-underline-offset: 3px; }
.nm-d-nav a:hover { color: var(--tt-navy-deep); text-decoration-thickness: 2px; }
.nm-btn[disabled] { opacity: .45; cursor: default; transform: none; }
.nm-btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; padding-inline: 16px; }
.nm-btn.primary:hover { background: #163a8a; }
body.nm-no-he .nm-d-he, body.nm-no-he .nm-line-he { display: none; }
body.nm-no-en .nm-d-en, body.nm-no-en .nm-line-en { display: none; }

/* the summary table under the map */
.nm-table { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: .9rem; }
.nm-table caption { caption-side: top; text-align: left; font: 700 .6rem/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep); padding-bottom: 8px; }
.nm-table th, .nm-table td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-soft); line-height: 1.45; }
.nm-table thead th { border-top: 0; font: 700 .58rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nm-table tbody th { font: 700 .95rem/1.2 var(--font-display); color: var(--accent-deep); white-space: nowrap; }
.nm-table td.num { font: 700 1.05rem/1 var(--font-display); color: var(--accent-deep); }
@media (max-width: 480px) {
  .nm-table th, .nm-table td { padding: 9px 5px; font-size: .82rem; }
  .nm-tag { font-size: .56rem; padding: 5px 8px; letter-spacing: .07em; }
}

/* ── The five levels (prose) ─────────────────────────────────── */
.nm-level { margin-top: 44px; scroll-margin-top: 70px; }
.nm-level:first-of-type { margin-top: 8px; }
.nm-level-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nm-level-n {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.25rem/1 var(--font-display); color: #fff; background: var(--tt-grad-header);
  box-shadow: 0 8px 18px rgba(28,71,165,.22);
}
.nm-level-head h3 { font: 700 clamp(1.12rem, 3.2vw, 1.32rem)/1.25 var(--font-display); color: var(--accent-deep); margin: 0; letter-spacing: -.2px; }
.nm-level-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; font: 700 .58rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nm-jump {
  appearance: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--accent-deep); font: 600 .78rem/1 var(--font-body); padding: 9px 14px; min-height: 34px;
  transition: background .15s, transform .1s, border-color .15s;
}
.nm-jump:hover { background: var(--surface-2); transform: translateY(-1px); border-color: var(--accent-soft); }
.nm-jump:active { transform: translateY(0); }
.nm-jump-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }

/* ── The snake conversation ──────────────────────────────────── */
.nm-talk { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: clamp(16px, 3.6vw, 26px); }
.nm-talk-log { display: grid; gap: 10px; min-height: 96px; }
.nm-line { max-width: 90%; padding: 12px 15px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.nm-line[data-who="narrator"] { max-width: none; border-style: dashed; background: var(--surface); }
.nm-line[data-who="snake"] { justify-self: start; border-bottom-left-radius: 4px; background: #eef3fa; border-color: #d5e0f3; }
.nm-line[data-who="chava"] { justify-self: end; border-bottom-right-radius: 4px; background: #e9fafc; border-color: #b9e9ef; }
.nm-line.now { box-shadow: 0 0 0 3px rgba(94,144,227,.35); }
.nm-line-who { font: 700 .56rem/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep); }
.nm-line-he { font-family: var(--font-hebrew); direction: rtl; text-align: right; font-size: clamp(1.08rem, 2.8vw, 1.22rem); line-height: 1.9; color: var(--ink); margin-top: 4px; }
.nm-line-en { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); margin-top: 4px; }
.nm-talk-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.nm-step-n { font: 700 .58rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nm-step-title { font: 700 1.14rem/1.3 var(--font-display); color: var(--accent-deep); margin-top: 6px; }
.nm-step-text { font-size: .98rem; line-height: 1.72; color: var(--ink-soft); margin: 8px 0 0; min-height: 6.8em; }
.nm-dots { display: flex; gap: 5px; margin: 14px 0 0; }
.nm-dots span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .25s; }
.nm-dots span.on { background: var(--tt-cyan); }
.nm-flow-nav { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 640px) { .nm-step-text { min-height: 10.5em; } .nm-line { max-width: 96%; } }

/* ── The exceptions (cards that jump to the map) ─────────────── */
.nm-spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nm-spot {
  appearance: none; cursor: pointer; text-align: left; font-family: var(--font-body);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nm-spot:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-lift); border-color: var(--accent-soft); }
.nm-spot:active { transform: translateY(-2px); }
.nm-spot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nm-spot-name { font: 700 1.02rem/1.25 var(--font-display); color: var(--accent-deep); }
.nm-spot-ref { font: 700 .56rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.nm-spot-why { font-size: .87rem; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.nm-spot-go { display: inline-block; margin-top: 10px; font: 700 .72rem/1 var(--font-body); color: var(--accent-deep); }

/* ── The quiz ────────────────────────────────────────────────── */
.nm-quiz { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: clamp(16px, 3.6vw, 26px); }
.nm-quiz-n { font: 700 .58rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nm-quiz-q { font: 600 clamp(1.05rem, 2.9vw, 1.2rem)/1.5 var(--font-display); color: var(--accent-deep); margin: 8px 0 16px; min-height: 3em; }
.nm-quiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nm-opt {
  appearance: none; cursor: pointer; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-2);
  color: var(--accent-deep); font: 700 .86rem/1.25 var(--font-body); padding: 14px 8px; min-height: 58px;
  display: grid; gap: 4px; place-items: center; text-align: center;
  transition: background .15s, border-color .15s, transform .1s;
}
.nm-opt .he { font: 600 1.05rem/1.2 var(--font-hebrew); color: var(--ink); }
.nm-opt:hover { background: rgba(94,144,227,.14); border-color: var(--accent-soft); transform: translateY(-1px); }
.nm-opt:active { transform: translateY(0); }
.nm-opt[aria-disabled="true"] { cursor: default; transform: none; }
.nm-opt[aria-disabled="true"]:hover { background: var(--surface-2); border-color: var(--line); }
.nm-opt.right, .nm-opt.right:hover { background: #e7f7ee; border-color: #16a34a; color: #0d5f2c; }
.nm-opt.wrong, .nm-opt.wrong:hover { background: #fdeeee; border-color: #c62828; color: #8e1b1b; }
.nm-opt.right::after { content: '\2713  Correct'; font: 700 .6rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.nm-opt.wrong::after { content: '\2717  Not this one'; font: 700 .6rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.nm-quiz-fb { margin-top: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); padding: 14px 16px; min-height: 92px; font-size: .95rem; line-height: 1.65; color: var(--ink-soft); }
.nm-quiz-fb b { color: var(--accent-deep); }
.nm-quiz-fb:empty::before { content: 'Pick an answer.'; color: var(--muted); }
.nm-quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nm-quiz-score { font: 700 .62rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 480px) { .nm-opt { font-size: .76rem; padding: 12px 4px; } .nm-opt .he { font-size: .98rem; } }

@media (prefers-reduced-motion: reduce) {
  .nm-fade, .nm-skel { animation: none; }
  .nm-cell, .nm-spot, .nm-related a, .nm-btn, .nm-opt, .nm-jump { transition: none; }
  button.nm-cell:hover, .nm-spot:hover, .nm-related a:hover, .nm-btn:hover, .nm-opt:hover, .nm-jump:hover { transform: none; }
  button.nm-cell[aria-pressed="true"] { transform: none; }
}

/* ── Print / PDF ─────────────────────────────────────────────────
   Screen: the static print blocks stay hidden. Print: interactive widgets,
   chrome and buttons drop out, and the static blocks list every name by verse,
   every line of the conversation and every quiz answer. names.js opens all FAQs
   on beforeprint. Ink-light: borders instead of navy fills. */
.nm-print-only { display: none; }
@media print { .nm-screen-only { display: none !important; } }
.nm-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.nm-hero-actions .tt-btn-ghost { padding: 11px 22px; font-size: 14px; cursor: pointer; font-family: var(--font-body); }
#t-print svg { display: block; }

@media print {
  @page { margin: 16mm 15mm 18mm; }
  html, body { background: #fff !important; }
  body { color: #111; font-size: 10.5pt; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }

  #shared-header, #shared-footer, .wa-widget, .nm-bar, .nm-hero-actions, .tt-band, #more,
  .nm-map, .nm-talk, .nm-quiz, .nm-skel, .nm-jump-row, .nm-spot-go { display: none !important; }
  .nm-print-only { display: block !important; }

  /* every quote shows both languages, whatever the toggles were set to */
  .nm-src-he, .nm-src-en { display: block !important; }

  a { color: inherit !important; text-decoration: none !important; }
  .nm-src-ref a { display: none !important; }

  /* title block */
  .tt-hero { background: none !important; color: #111; padding: 0 0 12pt; border-bottom: 2pt solid #1C47A5; }
  .tt-hero::before { display: none; }
  .nm-print-head { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 10pt; font: 600 9pt var(--font-body); color: #555; }
  .nm-print-head img { height: 22pt; width: auto; filter: brightness(0) saturate(100%) invert(19%) sepia(63%) saturate(2400%) hue-rotate(214deg) brightness(92%); }
  .tt-hero .tt-eyebrow { color: #1C47A5; }
  .tt-hero .tt-eyebrow::before, .tt-hero .tt-eyebrow::after { background: #1C47A5; }
  .tt-hero-he { color: #111; font-size: 26pt; margin: 8pt 0 2pt; }
  .tt-hero h1 { color: #1C47A5; font-size: 22pt; margin: 0 0 6pt; }
  .tt-hero-lede { color: #333; font-size: 10.5pt; font-weight: 400; max-width: none; }

  /* body */
  .nm-wrap { max-width: none; padding: 0; }
  .nm-section { margin: 20pt 0 0; }
  .nm-section > .tt-eyebrow { margin-bottom: 4pt; color: #1C47A5; display: block !important; text-align: center; break-after: avoid; page-break-after: avoid; }
  .nm-section > h2 { font-size: 15pt; margin-bottom: 4pt; break-before: avoid; break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; border-bottom: 1.5pt solid #5E90E3; padding-bottom: 4pt; display: table; margin-left: auto; margin-right: auto; }
  .nm-section > h2::after { display: none; }
  .nm-section > .nm-sub { break-before: avoid; page-break-before: avoid; break-after: avoid; break-inside: avoid; }
  .nm-sub { color: #444; font-size: 9.5pt; margin: 6pt auto 10pt; }
  .nm-prose { font-size: 10.5pt; line-height: 1.55; color: #111; }
  .nm-prose p { margin: 0 0 7pt; orphans: 3; widows: 3; }
  .nm-panel { background: none !important; border: 1px solid #cfdcf0; padding: 10pt 12pt; }
  .nm-guard-item { break-inside: avoid; page-break-inside: avoid; }
  .nm-guard-n, .nm-level-n { background: none !important; color: #1C47A5; border: 1.5pt solid #1C47A5; }
  .nm-level { margin-top: 16pt; }
  .nm-level-head { break-after: avoid; page-break-after: avoid; break-inside: avoid; margin-bottom: 6pt; padding-bottom: 6pt; }
  .nm-level-n { width: 26pt; height: 26pt; font-size: 12pt; }
  .nm-level-head h3 { font-size: 12.5pt; }

  .nm-h, .nm-e, .nm-src.deep .nm-h, .nm-src.deep .nm-e { background: none !important; color: #111; padding: 0; text-decoration: underline; text-decoration-thickness: 1.2pt; text-underline-offset: 2pt; }
  .nm-tag, .nm-tag.e, .nm-tag.h, .nm-tag.he { background: none !important; color: #1C47A5; border: 1px solid #1C47A5; padding: 2pt 5pt; }

  .nm-src, .nm-src.deep { background: #fff !important; border: 1px solid #cfdcf0; border-left: 3pt solid #1C47A5; border-radius: 6pt; margin: 9pt 0; text-align: left; break-inside: avoid; page-break-inside: avoid; }
  .nm-src-he, .nm-src.deep .nm-src-he { color: #111; text-align: right; font-size: 13pt; line-height: 1.7; padding: 8pt 12pt 2pt; }
  .nm-src-en, .nm-src.deep .nm-src-en { color: #333; text-align: left; font-size: 11pt; line-height: 1.45; padding: 2pt 12pt 2pt; }
  .nm-src-ref, .nm-src.deep .nm-src-ref { background: none !important; color: #1C47A5; border-top: 1px solid #e9eef6; justify-content: flex-start; margin-top: 6pt; padding: 5pt 12pt; }

  .nm-table { font-size: 9.5pt; break-inside: avoid; page-break-inside: avoid; }
  .nm-spots { display: block; }
  .nm-spot { display: block; width: 100%; border: 0; border-bottom: 1px solid #e9eef6; border-radius: 0; padding: 6pt 0; break-inside: avoid; page-break-inside: avoid; }

  .nm-faq details { border: 0; border-bottom: 1px solid #e9eef6; border-radius: 0; margin: 0; break-inside: avoid; page-break-inside: avoid; }
  .nm-faq summary { padding: 8pt 0 2pt; background: none !important; font-size: 10.5pt; }
  .nm-faq summary::after { display: none; }
  .nm-faq-body { padding: 0 0 8pt; font-size: 10pt; color: #222; }

  .nm-credits { margin: 18pt 0 0; padding: 8pt 0 0; font-size: 8.5pt; color: #555; text-align: left; }
  .nm-print-foot { margin-top: 8pt; font: 600 8.5pt var(--font-body); color: #1C47A5; }

  /* static versions of the interactive pieces */
  .nm-p-item { border-bottom: 1px solid #e9eef6; padding: 6pt 0; break-inside: avoid; page-break-inside: avoid; }
  .nm-p-head { color: #1C47A5; font-size: 10.5pt; font-weight: 700; }
  .nm-p-he { font-family: var(--font-hebrew); font-size: 11.5pt; text-align: right; direction: rtl; margin: 2pt 0; }
  .nm-p-note { font-size: 9.5pt; color: #333; margin-top: 3pt; line-height: 1.45; }
  .nm-p-cite { font-size: 9.5pt; line-height: 1.45; padding: 3pt 0 3pt 9pt; border-left: 2pt solid #cfdcf0; margin: 3pt 0; break-inside: avoid; page-break-inside: avoid; }
}