/* Hana Lampelová · Edna Beck z״l — styles
   Typeface: Segoe UI where installed (Windows); elsewhere Selawik (Microsoft's open Segoe-compatible face)
   for Latin and Open Sans Hebrew for Hebrew — both bundled in assets/fonts (SIL Open Font License).
   Selawik’s “…” and curly double-quote glyphs are poorly spaced, so those few characters fall through to the system font.
   Logical properties (inline-start/end) make the layout mirror for Hebrew. */
@font-face { font-family: "Selawik"; src: url("assets/fonts/selawik-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-201B, U+201F-2025, U+2027-10FFFF; }
@font-face { font-family: "Selawik"; src: url("assets/fonts/selawik-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-201B, U+201F-2025, U+2027-10FFFF; }
@font-face { font-family: "Selawik"; src: url("assets/fonts/selawik-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-201B, U+201F-2025, U+2027-10FFFF; }
@font-face { font-family: "Open Sans Hebrew"; src: url("assets/fonts/open-sans-hebrew-variable.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  --font: "Segoe UI", "Selawik", "Open Sans Hebrew", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #faf9f7; --surface: #ffffff; --soft: #f3f1ed;
  --ink: #1d1d1f; --ink-2: #3d3d40; --muted: #6e6e73; --line: #e7e4de; --line-2: #d2cdc4;
  --her: #9b2c2c; --her-soft: #f7ebe9;
  --ctx: #2b5b87; --ctx-soft: #eef3f8;
  --fam: #8a6a1c; --fam-soft: #f6efdd;
  --ok: #2f6b3a; --gray: #6b6762;
  --focus: #1f6feb;
  --radius: 12px; --measure: 700px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131314; --surface: #1c1c1e; --soft: #232326;
    --ink: #ececee; --ink-2: #cfcfd4; --muted: #9b9ba1; --line: #2e2e32; --line-2: #45454b;
    --her: #ec8f86; --her-soft: #33211f; --ctx: #8db8e2; --ctx-soft: #1b2430; --fam: #d8b562; --fam-soft: #2e2716;
    --ok: #8fc797; --gray: #b0aba5; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131314; --surface: #1c1c1e; --soft: #232326;
  --ink: #ececee; --ink-2: #cfcfd4; --muted: #9b9ba1; --line: #2e2e32; --line-2: #45454b;
  --her: #ec8f86; --her-soft: #33211f; --ctx: #8db8e2; --ctx-soft: #1b2430; --fam: #d8b562; --fam-soft: #2e2716;
  --ok: #8fc797; --gray: #b0aba5; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0 0 .45em; letter-spacing: -.01em; }
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3 { letter-spacing: 0; }
p { margin: 0 0 1em; }
a { color: var(--ctx); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.he-text { direction: rtl; text-align: right; }
.muted { color: var(--muted); }
abbr.zl { text-decoration: none; color: var(--muted); font-weight: 400; cursor: help; }

/* disclosure (details/summary) — the main tool for “more information on demand” */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.dsum::after { content: "+"; font-weight: 400; color: var(--muted); margin-inline-start: auto; padding-inline-start: 12px; font-size: 1.2em; line-height: 1; }
details[open] > .dsum::after { content: "−"; }

/* ---------- Top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
.top-inner { max-width: 1160px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { font-weight: 600; font-size: 16.5px; white-space: nowrap; text-decoration: none; color: var(--ink); line-height: 1.3; }
.brand small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
nav.main { flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
nav.main::-webkit-scrollbar { display: none; }
nav.main a { padding: 6px 10px; text-decoration: none; color: var(--ink-2); font-size: 15px; white-space: nowrap; border-radius: 8px; }
nav.main a:hover { background: var(--soft); }
nav.main a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--her); border-radius: 0; }
.controls { display: flex; gap: 6px; }
.menu-btn { display: none; }
.btn { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--ink-2); }
.btn.icon { padding: 5px 9px; }
@media (max-width: 900px) {
  .top-inner { flex-wrap: wrap; row-gap: 4px; padding: 8px 16px; }
  nav.main { order: 3; flex-basis: 100%; justify-content: flex-start; margin-inline: -16px; padding-inline: 10px; }
  .brand small { display: none; }
  .controls { margin-inline-start: auto; }
}
/* phones: a menu button instead of a scrolling row of tabs */
@media (max-width: 760px) {
  .top-inner { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .brand { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .controls { margin-inline-start: 0; flex: none; }
  .menu-btn { display: inline-flex; }
  .btn { min-height: 38px; }
  .btn.icon { min-width: 38px; justify-content: center; }
  nav.main { display: none; }
  .top.open nav.main { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 6px; padding: 0; overflow: visible; order: 3; flex-basis: 100%; }
  .top.open nav.main a { padding: 11px 12px; font-size: 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
  .top.open nav.main a[aria-current="page"] { border-color: var(--her); color: var(--her); }
  .hero h1 .sep { display: none; }
  .hero h1 > .nw, .hero h1 > .nm2 { display: block; }
}

main { max-width: 1160px; margin: 0 auto; padding: 0 20px 80px; }
.view-head { padding: 40px 0 8px; max-width: var(--measure); }
.view-head h1 { font-size: clamp(30px, 4vw, 40px); }
.lede { font-size: 19px; color: var(--ink-2); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
html[lang="he"] .eyebrow { letter-spacing: 0; font-size: 14px; }
.section-title { margin: 44px 0 14px; }
.section-title h2 { font-size: 22px; margin: 0; }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; padding: 48px 0 20px; }
.hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.12; margin-bottom: .25em; }
.hero h1 .zl { font-size: .46em; margin-inline-start: .3em; }
html[lang="en"] .hero h1 .zl { margin-inline-start: 0; font-size: .4em; }
.nw { white-space: nowrap; }
.hero .life { font-size: 16px; color: var(--muted); margin-bottom: 2px; }
.gravel { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.hero .summary { font-size: 19.5px; line-height: 1.7; color: var(--ink-2); max-width: 620px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.btn-primary { background: var(--ink); color: var(--bg); border-radius: 999px; padding: 11px 20px; text-decoration: none; font-size: 16px; font-weight: 600; }
.btn-text { padding: 11px 8px; text-decoration: none; font-size: 16px; color: var(--ink-2); }
.btn-text:hover { color: var(--ink); text-decoration: underline; }
.hero-fig { margin: 0; }
.hero-fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.hero-fig figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; } .hero-fig { max-width: 420px; } }

.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; counter-reset: st; }
.journey a { display: block; height: 100%; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.journey a:hover { border-color: var(--line-2); }
.journey .n { font-size: 12.5px; color: var(--her); font-weight: 600; }
.journey .p { display: block; font-weight: 600; font-size: 16.5px; }
.journey .w { display: block; font-size: 13.5px; color: var(--muted); }
.journey .x { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: var(--line-2); }
.card .thumb { aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .cb { padding: 14px 16px 16px; }
.card h3 { font-size: 18px; margin: 0 0 2px; }
.card p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.5; }
.morelinks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 16px; }

/* ---------- Sources (collapsed by default) ---------- */
.srcs { margin: -6px 0 16px; font-size: 13px; color: var(--muted); }
.srcs > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.srcs > summary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.srcs[open] > summary::before { background: var(--muted); }
.srcs > summary:hover { color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.tag { font: 500 12.5px/1.25 var(--font); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-align: start; }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.tag.her::before { background: var(--her); } .tag.doc::before, .tag.photo::before { background: var(--fam); }
.tag.archive::before { background: var(--ok); } .tag.ctx::before { background: var(--ctx); }
.tag:hover { border-color: var(--line-2); }

/* ---------- Story ---------- */
.chapnav { position: sticky; top: var(--top-h, 61px); z-index: 10; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--line); }
.chapnav::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .chapnav { top: var(--top-h, 92px); } }
.chapnav a { white-space: nowrap; font-size: 14px; padding: 4px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); }
.chapnav a:hover { background: var(--soft); }
.chapnav a.on { background: var(--ink); color: var(--bg); }
.chapter { scroll-margin-top: calc(var(--top-h, 61px) + 60px); padding: 44px 0 20px; }
.chapter + .chapter { border-block-start: 1px solid var(--line); }
.ch-kicker { font-size: 14px; color: var(--muted); margin-bottom: 2px; }
.ch-kicker b { color: var(--her); font-weight: 600; }
.chapter h2 { font-size: clamp(26px, 3.2vw, 34px); margin-bottom: 22px; }
.cols { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(260px, 340px); gap: 56px; align-items: start; justify-content: space-between; }
@media (max-width: 980px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.col.her > p { font-size: 18.5px; line-height: 1.75; }
html[lang="he"] .col.her > p { font-size: 19px; }
.blk-h { font-size: 21px; margin: 30px 0 10px; }

.quote { margin: 4px 0 26px; padding: 2px 0 2px 20px; border-inline-start: 3px solid var(--her); }
html[dir="rtl"] .quote { padding: 2px 20px 2px 0; }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink); }
.quote .iv { color: var(--muted); font-size: .86em; }
.q-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.play { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--her); background: transparent; color: var(--her); border-radius: 999px; padding: 3px 11px 3px 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
html[dir="rtl"] .play { padding: 3px 8px 3px 11px; }
.play:hover, .play.playing { background: var(--her); color: #fff; }
.play svg { width: 12px; height: 12px; fill: currentColor; }
.prog { flex: 1 1 80px; max-width: 160px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--her); }
.orig { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.orig > summary:hover { color: var(--ink-2); }
.orig p { margin: 8px 0 0; font-size: 17px; line-height: 1.75; color: var(--ink-2); }

.fig { margin: 6px 0 26px; }
.fig button.zoom { display: block; width: 100%; padding: 0; border: 0; background: var(--soft); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.fig img { width: 100%; max-height: 460px; object-fit: contain; }
.fig figcaption { font-size: 14.5px; color: var(--muted); margin-top: 8px; line-height: 1.55; }
.fig figcaption a, .fig figcaption .linklike { white-space: nowrap; }
.figrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 26px; }
.figrow .fig { margin: 0; }
.figrow .fig img { height: 200px; object-fit: cover; }
.figrow figcaption { font-size: 13px; }
@media (max-width: 640px) { .figrow { grid-template-columns: 1fr; } .figrow .fig img { height: auto; max-height: 380px; object-fit: contain; } }

.fact { margin: 4px 0 24px; font-size: 19px; line-height: 1.6; color: var(--ink); padding-inline-start: 20px; border-inline-start: 3px solid var(--line-2); }
.note { margin: 4px 0 22px; padding: 12px 14px; background: var(--soft); border-radius: 10px; font-size: 15px; color: var(--ink-2); }

.memorial { margin: 10px 0 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.memorial .mn { font-size: 20px; font-weight: 600; }
.memorial .md { color: var(--ink-2); font-size: 16px; }
.memorial .mg { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.memorial .mf { margin-top: 14px; padding-top: 12px; border-block-start: 1px solid var(--line); }
.memorial .mfn { font-size: 17px; font-weight: 600; }

/* research column */
.ctx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ctx-head .lbl { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ctx); }
html[lang="he"] .ctx-head .lbl { letter-spacing: 0; font-size: 14px; }
.ctx-head button { background: none; border: 0; padding: 0; font-size: 13px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ctx-card { border-block-end: 1px solid var(--line); }
.ctx-card:first-of-type { border-block-start: 1px solid var(--line); }
.ctx-card > summary { display: flex; align-items: center; gap: 8px; padding: 11px 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ctx-card > summary:hover { color: var(--ctx); }
.ctx-card.fact-card > summary { color: var(--ctx); }
.ctx-body { padding: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.ctx-body p { margin-bottom: .7em; }
.ctx-body .srcs { margin-top: -4px; }

/* ---------- Timeline ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 26px; }
.chip { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 13px; cursor: pointer; font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px; }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tl { max-width: 820px; }
.tl-year { font-size: 22px; font-weight: 600; margin: 26px 0 6px; color: var(--ink); }
.tl-item { border-block-end: 1px solid var(--line); }
.tl-item > summary { display: grid; grid-template-columns: 170px 14px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; }
.tl-item > summary::after { content: "+"; color: var(--muted); font-size: 1.15em; }
.tl-item[open] > summary::after { content: "−"; }
.tl-date { font-size: 14px; color: var(--muted); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; align-self: center; }
.tl-item.life .tl-dot { color: var(--her); } .tl-item.family .tl-dot { color: var(--fam); } .tl-item.world .tl-dot { color: var(--ctx); } .tl-item.memory .tl-dot { color: var(--gray); }
.tl-title { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.tl-item.world .tl-title { font-weight: 400; color: var(--ink-2); }
.tl-body { padding: 0 0 12px; margin-inline-start: 196px; font-size: 16px; color: var(--ink-2); }
.tl-body p { margin-bottom: .5em; }
.tl-body .tl-link { font-size: 14px; display: inline-block; padding: 4px 0; }
@media (max-width: 640px) {
  .tl-item > summary { grid-template-columns: 10px minmax(0, 1fr) auto; row-gap: 0; }
  .tl-date { grid-column: 2; grid-row: 1; }
  .tl-dot { grid-column: 1; grid-row: 1 / span 2; }
  .tl-title { grid-column: 2; grid-row: 2; }
  .tl-item > summary::after { grid-column: 3; grid-row: 1 / span 2; }
  .tl-body { margin-inline-start: 22px; }
}

/* ---------- Family ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--ink-2); margin: 4px 0 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 13px; border-radius: 4px; border: 2px solid; display: inline-block; }
/* the tree box may use a little more than the text column on wide screens */
.tree-box { position: relative; margin-inline: max(calc(50% - 50vw + 16px), -130px); }
.tree-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tree-tools .btn { height: 36px; min-width: 36px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tree-tools .tt-pct { font-size: 13.5px; min-width: 58px; font-variant-numeric: tabular-nums; }
.tree-tools .tt-full { font-size: 14px; padding-inline: 12px; }
.tt-hint { font-size: 13.5px; color: var(--muted); margin-inline-end: auto; }
.tree-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tree-sizer { position: relative; margin: 0 auto; }
.tree { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.tree-box.is-full { position: fixed; inset: 0; z-index: 900; margin: 0; background: var(--bg); display: flex; flex-direction: column; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.tree-box.is-full .tree-wrap { flex: 1; min-height: 0; }
.tree-sheet { position: absolute; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-height: 48%; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 12px 16px 14px; z-index: 2; }
.tree-box:not(.is-full) .tree-sheet { display: none !important; }
.tree-sheet .person-panel { margin-top: 0; }
.tree-sheet .person-panel h3 { font-size: 20px; padding-inline-end: 40px; }
.sheet-close { position: sticky; top: 0; float: right; z-index: 1; width: 34px; height: 34px; font-size: 20px; line-height: 1; }
html[dir="rtl"] .sheet-close { float: left; }
body.noscroll { overflow: hidden; }
.tree svg { position: absolute; inset: 0; overflow: visible; }
.tree svg path { fill: none; stroke: var(--line-2); stroke-width: 1.6; }
.tree svg path.marry { stroke: var(--fam); stroke-width: 2; }
.gen-label { position: absolute; inset-inline-start: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
html[lang="he"] .gen-label { letter-spacing: 0; font-size: 12.5px; }
.pbox { position: absolute; width: 112px; min-height: 90px; padding: 8px 9px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--line-2); text-align: start; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.pbox:hover { background: var(--soft); }
.pbox b { font-size: 13.5px; line-height: 1.25; font-weight: 600; padding-inline-end: 12px; }
.pbox .yrs { font-size: 11.5px; color: var(--muted); }
.pbox .rel { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; margin-top: auto; }
.pbox.probable { border-style: dashed; }
.pbox.self { box-shadow: 0 0 0 3px var(--her-soft); }
.pbox.on { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.pbox::after { content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; }
.st-murdered { border-color: var(--her); } .st-murdered::after { background: var(--her); }
.st-diedTz { border-color: var(--gray); } .st-diedTz::after { background: var(--gray); }
.st-survived { border-color: var(--ok); } .st-survived::after { background: var(--ok); }
.st-emigrated { border-color: var(--ctx); } .st-emigrated::after { background: var(--ctx); }
.st-later { border-color: var(--fam); } .st-later::after { background: var(--fam); }
.person-panel { margin-top: 18px; max-width: var(--measure); scroll-margin-top: 120px; }
.person-panel h3 { font-size: 24px; margin-bottom: 0; }
.person-panel::after { content: ""; display: block; clear: both; }
.pp-photo { float: right; width: 112px; margin: 4px 0 10px 18px; padding: 0; border: 0; background: var(--soft); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
html[dir="rtl"] .pp-photo { float: left; margin: 4px 18px 10px 0; }
.pp-photo img { width: 100%; height: auto; display: block; }
.tes { list-style: none; padding: 0; margin: 10px 0 6px; }
.tes li { padding: 9px 0; border-block-end: 1px solid var(--line); font-size: 16px; }
.tes a { font-weight: 600; }
.tes-by { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.tes-all { font-size: 14px; margin-top: 10px; }
.person-panel .meta { color: var(--muted); margin-bottom: 8px; font-size: 15.5px; }
.person-panel .badges { margin-bottom: 10px; }
.badge { display: inline-block; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--soft); color: var(--ink-2); margin-inline-end: 6px; }
.badge.conf-probable { background: transparent; border: 1px dashed var(--line-2); }
.person-panel p { font-size: 17px; }
.person-panel .ev { font-size: 15px; color: var(--muted); }
.acc { max-width: var(--measure); border-block-start: 1px solid var(--line); margin-top: 30px; }
.acc > details { border-block-end: 1px solid var(--line); }
.acc > details > summary { display: flex; align-items: center; padding: 13px 0; font-size: 18px; font-weight: 600; }
.acc > details > div { padding: 0 0 14px; }
.leads { list-style: none; padding: 0; margin: 0; }
.leads li { padding: 10px 0; border-block-start: 1px dashed var(--line); font-size: 15.5px; color: var(--ink-2); }
.leads li:first-child { border-block-start: 0; }
.leads p { margin: 0 0 4px; }

/* ---------- Letters ---------- */
.letters { max-width: 900px; border-block-start: 1px solid var(--line); }
.letter { border-block-end: 1px solid var(--line); scroll-margin-top: 110px; }
.letter > summary { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; align-items: baseline; }
.letter > summary::after { content: "+"; color: var(--muted); font-size: 1.2em; grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.letter[open] > summary::after { content: "−"; }
.lt-date { font-weight: 600; font-size: 16px; }
.lt-who { font-size: 15.5px; color: var(--ink-2); }
.lt-kind { font-size: 12.5px; color: var(--muted); grid-column: 1; }
.lt-prev { grid-column: 2; font-size: 14.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 4px 0 22px; }
.lt-body .lt-img button { width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; }
.lt-meta { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.55; }
.lt-meta b { color: var(--ink-2); font-weight: 600; }
.lt-text { font-size: 17.5px; line-height: 1.75; }
.lt-orig { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.lt-orig p { font-size: 15px; color: var(--ink-2); direction: ltr; text-align: left; margin-top: 8px; }
.lt-note { font-size: 14.5px; color: var(--ink-2); background: var(--soft); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
@media (max-width: 760px) {
  .letter > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .lt-kind, .lt-prev { grid-column: 1; }
  .letter > summary::after { grid-column: 2; grid-row: 1 / span 4; }
  .lt-body { grid-template-columns: 1fr; }
  .lt-body .lt-img { max-width: 320px; }
}
.intro-box { max-width: 900px; font-size: 17.5px; color: var(--ink-2); margin-bottom: 18px; }
.intro-box p { margin-bottom: 6px; }
.explain { margin: -6px 0 22px; max-width: 900px; }
.explain > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--her); font-weight: 600; }
.explain[open] > summary { margin-bottom: 12px; }
.explain > summary svg { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- Documents & album ---------- */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; text-align: start; padding: 0; display: flex; flex-direction: column; }
.dcard:hover { border-color: var(--line-2); }
.dcard .dthumb { aspect-ratio: 4 / 3; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.dcard .dthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dcard .dthumb .txt { color: var(--muted); font-size: 34px; }
.dcard .dbody { padding: 10px 12px 12px; }
.dcard h3 { font-size: 15px; margin: 0 0 2px; line-height: 1.35; }
.dcard .ddate { font-size: 13px; color: var(--muted); }
.album { columns: 3 260px; column-gap: 16px; }
.album figure { break-inside: avoid; margin: 0 0 16px; }
.album button { display: block; width: 100%; border: 0; padding: 0; background: var(--soft); cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.album figcaption { padding: 8px 2px 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.album .k { font-size: 12px; color: var(--muted); display: block; }
.album .k.cap { color: var(--ok); } .album .k.likely { color: var(--fam); }

/* ---------- Recordings ---------- */
.clips { list-style: none; padding: 0; margin: 0; max-width: 900px; border-block-start: 1px solid var(--line); }
.clips li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-block-end: 1px solid var(--line); }
.clips .ct { font-size: 15.5px; line-height: 1.45; }
.clips .cs { font-size: 12.5px; color: var(--muted); }
.reclist { list-style: none; padding: 0; margin: 0; }
.reclist li { padding: 8px 0; border-block-start: 1px dashed var(--line); font-size: 15px; }
.reclist li:first-child { border-block-start: 0; }
.reclist .file { font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.search { width: 100%; max-width: 420px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 15px; color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tx { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 18px; max-height: 70vh; overflow-y: auto; }
.tx p { direction: rtl; text-align: right; font-size: 16.5px; line-height: 1.75; margin: 10px 0; display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.tx p .tm { font: 12px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); direction: ltr; }
.tx mark { background: var(--fam-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.tx .redact { color: var(--muted); font-style: italic; }

/* ---------- Sources ---------- */
.biblio { columns: 2 320px; column-gap: 28px; padding: 0; list-style: none; margin: 0; }
.biblio li { break-inside: avoid; margin: 0 0 9px; font-size: 15px; line-height: 1.45; }
button.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ctx); text-decoration: underline; text-underline-offset: 3px; text-align: start; font-size: inherit; }
.plain-list { padding-inline-start: 20px; margin: 0; }
.plain-list li { margin-bottom: 10px; font-size: 16px; color: var(--ink-2); }
.legend-list { list-style: none; padding: 0; margin: 0; }
.legend-list li { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; font-size: 15.5px; }
.legend-list .tag { white-space: nowrap; flex: none; }

/* ---------- Modal / lightbox ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(10,10,12,.9); display: grid; grid-template-rows: auto 1fr auto; color: #f2f2f2; }
.modal[hidden] { display: none; }
.m-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.m-top .m-title { flex: 1; font-size: 14px; }
.m-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 14px; }
.m-btn:hover { background: rgba(255,255,255,.22); }
.m-stage { overflow: auto; display: grid; place-items: center; padding: 0 12px; }
.m-stage img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; cursor: zoom-in; border-radius: 4px; background: #fff; }
.m-stage.zoomed { place-items: start center; }
.m-stage.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.m-cap { padding: 10px 16px 16px; font-size: 14.5px; max-width: 860px; margin: 0 auto; text-align: center; line-height: 1.5; }
.m-nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 20px; }
.m-prev { inset-inline-start: 10px; } .m-next { inset-inline-end: 10px; }
.docmodal { position: fixed; inset: 0; z-index: 45; background: rgba(10,10,12,.55); display: grid; place-items: center; padding: 16px; }
.docmodal[hidden] { display: none; }
.dm { background: var(--surface); color: var(--ink); border-radius: 14px; max-width: 1020px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dm-head { position: sticky; top: 0; background: var(--surface); border-block-end: 1px solid var(--line); padding: 14px 18px; display: flex; gap: 12px; align-items: start; z-index: 1; }
.dm-head h2 { font-size: 21px; margin: 0; flex: 1; }
.dm-head .ddate { color: var(--muted); font-size: 14px; display: block; margin-top: 2px; font-weight: 400; }
.dm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 18px; }
@media (max-width: 760px) { .dm-body { grid-template-columns: 1fr; } }
.dm-imgs { display: grid; gap: 10px; }
.dm-imgs button { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: #fff; }
.dm-text { font-size: 16px; }
.dm-text h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px; }
html[lang="he"] .dm-text h4 { letter-spacing: 0; font-size: 13.5px; }
.dm-text .orig-box { direction: ltr; text-align: left; font-size: 15px; background: var(--soft); border-radius: 8px; padding: 10px 12px; color: var(--ink-2); }
.dm-text .trans { font-size: 16.5px; line-height: 1.7; }

footer.site { border-block-start: 1px solid var(--line); margin-top: 48px; padding: 26px 20px 40px; color: var(--muted); font-size: 14px; text-align: center; }
footer.site .mem { font-size: 16px; color: var(--ink-2); margin-bottom: 6px; }
@media print { .top, .chapnav, .controls, .play, .prog, footer.site { display: none !important; } details { display: block; } body { background: #fff; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Map page ---------- */
.map-wrap { margin: 4px 0 6px; }
#map.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88); }
#map { height: min(62vh, 520px); min-height: 340px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); z-index: 0; }
.map-note { font-size: 13.5px; margin: 8px 0 0; max-width: var(--measure); }
.leaflet-container { font: inherit; }
.leaflet-container a { color: var(--ctx); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
.leaflet-popup-content { font-size: 14px; line-height: 1.5; margin: 10px 14px; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.leaflet-container .leaflet-control-attribution { background: var(--surface); color: var(--ink-2); opacity: .92; }
.pin { background: var(--surface); border: 2px solid var(--ctx); color: var(--ink); border-radius: 50%; display: grid !important; place-items: center; font: 600 12px/1 var(--font); box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.pin-home { border-color: var(--fam); } .pin-camps { border-color: var(--her); } .pin-israel { border-color: var(--ctx); }
.pin.ex-town { border-style: dashed; }
.places { display: grid; gap: 14px; }
.place { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; scroll-margin-top: 84px; transition: box-shadow .4s; }
.place.flash { box-shadow: 0 0 0 3px var(--ctx); }
.pl-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.pl-n { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.pl-head h3 { font-size: 18.5px; margin: 0; line-height: 1.3; }
.pl-when { font-size: 14px; color: var(--muted); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.pl-grid.one { grid-template-columns: minmax(0, 1fr); }
.pl-grid p { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
.pl-exact { display: inline-block; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); margin-bottom: 8px; }
.pl-exact.ex-house { border-color: var(--ok); color: var(--ok); }
.pl-exact.ex-town { border-style: dashed; }
.pl-links { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 -8px 2px; }
.pl-links .btn-text { font-size: 14.5px; padding: 6px 8px; color: var(--ctx); }
button.btn-text { background: none; border: 0; cursor: pointer; font-family: inherit; }
.pl-photo { margin: 0; }
.pl-photo button { display: block; width: 100%; padding: 0; border: 0; background: var(--soft); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.pl-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pl-photo figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media (max-width: 720px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } .place { padding: 14px; } }
@media print { #map, .filters, .pl-links { display: none !important; } }

/* ---------- touch screens: bigger targets ---------- */
@media (pointer: coarse) {
  .srcs > summary { padding: 8px 0; }
  .tag { padding: 7px 11px; }
  .ctx-head button, button.linklike, .biblio a, .tes a, .tes-all a, .morelinks a, .lt-orig > summary, .orig > summary { display: inline-block; padding-block: 7px; }
  .chip { min-height: 38px; }
  .tl-item > summary { padding: 13px 0; }
  .pl-links .btn-text { padding: 10px 8px; }
}