:root {
  --bg: #f5efe4; --paper: #fffdf8; --ink: #2b2520; --muted: #7a6f63; --line: #e0d5c2;
  --accent: #8a4b2a; --accent-ink: #fff;
  --m: #e3ebf2; --m-edge: #9fb6c9; --f: #f5e3dc; --f-edge: #d3a595; --u: #efe9de; --u-edge: #c9bca6;
  --focus: #8a4b2a; --chip: #efe5d3; --link: #b8a78e; --shadow: 0 1px 2px rgba(60, 40, 20, .08), 0 4px 14px rgba(60, 40, 20, .06);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15120e; --paper: #1f1b16; --ink: #ede5d7; --muted: #a79a89; --line: #3a3229;
    --accent: #e0a578; --accent-ink: #1b150f;
    --m: #1f2c36; --m-edge: #3f5a6e; --f: #35241f; --f-edge: #7a4e40; --u: #26211b; --u-edge: #4d4336;
    --focus: #e0a578; --chip: #2d271f; --link: #5d5243; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--serif); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h2 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; font-weight: 600; }
h3 { font-size: 20px; margin: 32px 0 6px; font-weight: 600; }
.sub { color: var(--muted); margin: 0 0 16px; max-width: 760px; }

/* ---------- header */
.bar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, 280px); grid-template-areas: "brand tabs search"; align-items: end; gap: 0 20px; padding: 8px 20px 0; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.brand { grid-area: brand; min-width: 0; align-self: center; padding-bottom: 6px; white-space: normal; max-width: 220px; }
.eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.brand h1 { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.2; margin: 4px 0 0; font-weight: 600; }
.search { grid-area: search; position: relative; align-self: center; padding-bottom: 6px; }
.search input, .filter { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 15px var(--sans); }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto; z-index: 30; }
.search-results li button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.search-results li button:hover, .search-results li button:focus { background: var(--chip); outline: none; }
.search-results small { display: block; color: var(--muted); font: 12px var(--sans); }
.tabs { grid-area: tabs; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px 10px; font: 500 14px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pill { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--chip); color: var(--ink); font: 600 11px/18px var(--sans); text-align: center; }
.pill:empty { display: none; }

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view { display: none; }
.view.active { display: flex; flex-direction: column; flex: 1; }
.page { max-width: 1040px; width: 100%; margin: 0 auto; padding: 28px 20px 40px; }

/* ---------- tree */
.tree-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px 0; flex-wrap: wrap; }
.branches { display: flex; gap: 6px; flex-wrap: wrap; }
.branches button, .zoom button, .btn { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: 500 13px var(--sans); cursor: pointer; }
.branches button:hover, .zoom button:hover, .btn:hover { border-color: var(--accent); }
.zoom { display: flex; gap: 6px; }
.zoom button { min-width: 34px; }
.crumbs { padding: 8px 20px 0; font: 13px var(--sans); color: var(--muted); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 26px; }
.crumbs button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.canvas { position: relative; flex: 1; min-height: 480px; overflow: hidden; margin: 8px 12px 0; border: 1px solid var(--line); border-radius: 12px; background:
  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px, var(--paper); cursor: grab; touch-action: none; }
.canvas.dragging { cursor: grabbing; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage.animate { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.canvas.dragging .stage { will-change: transform; }
.canvas.dragging .card, .canvas.dragging .wcard { transition: none; }
.branches-toggle { display: none; }
.tree-side-bar { display: contents; }
.orient { flex: none; white-space: nowrap; }
.stage.horiz .card { width: 260px; height: 52px; padding: 4px 10px; gap: 0; }
.stage.horiz .card .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.horiz .card .more { left: auto; right: 10px; transform: none; bottom: -8px; }
/* «Древо»: ветви и фамилии — колонкой слева, чтобы холсту досталась вся высота */
#view-tree.active { flex-direction: row; }
.tree-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tree-side { flex: none; width: 176px; padding: 12px 0 12px 16px; display: flex; flex-direction: column; gap: 10px; align-self: flex-start; position: sticky; top: 0; max-height: calc(100vh - 70px); overflow-y: auto; }
.tree-side .branches { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.tree-side .branches button { border-radius: 8px; padding: 4px 10px; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
.tree-side .orient { align-self: stretch; }
#view-tree .canvas { margin-top: 6px; margin-bottom: 12px; }
@media (max-width: 720px) {
  .place-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 0 16px 7px 0; scrollbar-width: thin; }
  .place-filters button { white-space: nowrap; flex: none; }
  .place-map { height: min(50vh, 390px); }
  .place-then-now { grid-template-columns: 1fr; }
  .place-card-list { grid-template-columns: 1fr; }
  /* Телефон: древо на весь экран, как приложение; страница под ним не прокручивается */
  body.tree-mode { height: 100vh; height: 100dvh; overflow: hidden; }
  body.tree-mode .foot { display: none; }
  body.tree-mode .meta-top { display: none; }
  body.tree-mode .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand search" "tabs tabs"; gap: 6px 12px; padding-top: 6px; }
  body.tree-mode .brand, body.tree-mode .search { padding-bottom: 0; }
  body.tree-mode main { min-height: 0; overflow: hidden; }
  #view-tree.active { flex-direction: column; min-height: 0; position: relative; }
  #view-tree .tree-main { min-height: 0; }
  #view-tree .canvas { margin: 0; flex: 1; min-height: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .tree-side { width: auto; position: static; max-height: none; padding: 8px 16px 4px; overflow: visible; }
  .tree-side-bar { display: flex; gap: 8px; }
  .branches-toggle { display: inline-flex; flex: 1; justify-content: center; }
  .tree-side .orient { flex: none; align-self: auto; }
  .tree-side .branches { display: none; }
  .tree-side.open .branches { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; position: absolute; left: 8px; right: 8px; top: 48px; z-index: 12;
    max-height: 60vh; overflow-y: auto; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .tree-side.open .branches button { display: inline-flex; gap: 6px; }
  #view-tree .crumbs { padding: 2px 16px 6px; min-height: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  #view-tree .crumbs::-webkit-scrollbar { display: none; }
}
.links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.links path { fill: none; stroke: var(--link); stroke-width: 1.6; }
.links path.marr { stroke-dasharray: none; stroke-width: 2.2; }
.links path.ghost { stroke-dasharray: 4 4; }
.card { position: absolute; width: 200px; height: 86px; border-radius: 10px; border: 1.5px solid var(--u-edge); background: var(--u); padding: 8px 10px 6px; text-align: left; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; gap: 1px; transition: transform .12s; }
.card:hover { transform: translateY(-1px); }
.card.m { background: var(--m); border-color: var(--m-edge); }
.card.f { background: var(--f); border-color: var(--f-edge); }
.card.ghost { background: transparent; border-style: dashed; box-shadow: none; color: var(--muted); align-items: center; text-align: center; }
.card.focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.card.selected { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.card .nm { font: 600 13.5px/1.18 var(--serif); overflow-wrap: anywhere; }
.card .yr { font: 12px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .badge { position: absolute; top: -8px; right: -8px; background: var(--accent); color: var(--accent-ink); font: 700 11px/20px var(--sans); min-width: 20px; height: 20px; border-radius: 10px; text-align: center; padding: 0 5px; }
.card .more { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; font: 600 10px/16px var(--sans); padding: 0 6px; color: var(--muted); white-space: nowrap; }
.card.sib { opacity: .92; }
.rowlabel { position: absolute; font: 600 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hint { font: 13px var(--sans); color: var(--muted); padding: 8px 20px 16px; margin: 0; }
.legend { white-space: nowrap; margin-left: 8px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin: 0 4px 0 8px; border: 1.5px solid; }
.lg.m { background: var(--m); border-color: var(--m-edge); } .lg.f { background: var(--f); border-color: var(--f-edge); } .lg.u { border-style: dashed; border-color: var(--u-edge); }

/* ---------- panel */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0, 0, 0, .12); transform: translateX(105%); transition: transform .25s ease; z-index: 40; overflow-y: auto; padding: 22px 22px 40px; }
.panel.open { transform: none; }
.scrim { position: fixed; inset: 0; background: rgba(20, 14, 8, .35); z-index: 35; }
.panel-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; }
.p-rel { font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 40px 4px 0; }
.p-name { font-size: 26px; line-height: 1.15; margin: 0 40px 4px 0; font-weight: 600; }
.p-alias { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.p-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.facts dt { font: 13px var(--sans); color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; }
.rel-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 2px 8px; font: 14px var(--serif); cursor: pointer; text-align: left; }
.chip small { font: 11px var(--sans); color: var(--muted); }
.chip:hover { border-color: var(--accent); }
.src { display: inline-block; font: 600 11px/1.6 var(--sans); background: var(--chip); color: var(--ink); border-radius: 4px; padding: 0 6px; margin: 0 2px; text-decoration: none; cursor: pointer; border: 0; }
.p-sec { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.notes { margin: 0; padding-left: 18px; }
.notes li { margin: 4px 0; font-size: 15px; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs button { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; width: 88px; height: 88px; cursor: zoom-in; background: var(--bg); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs a.pdf { display: flex; width: 88px; height: 88px; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 6px; font: 600 13px var(--sans); text-decoration: none; }

/* ---------- comments */
.comments { display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.comment .meta { font: 12px var(--sans); color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.comment .meta b { color: var(--ink); font-weight: 600; }
.comment .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.comment .about { font: 12px var(--sans); }
.empty { color: var(--muted); font-style: italic; font-size: 15px; margin: 0; }
.cform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cform input, .cform textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: 15px var(--sans); }
.cform textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.cform .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cform .status { font: 13px var(--sans); color: var(--muted); }
.cform .status.err { color: #b3261e; }
.cform button[type=submit] { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 9px 18px; font: 600 14px var(--sans); cursor: pointer; }
.cform button[disabled] { opacity: .6; cursor: default; }
.general-form { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 4px 16px 16px; margin-bottom: 20px; }
.feed .comment { background: var(--paper); }

/* ---------- lists & cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cardbox { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cardbox h4 { margin: 0; font-size: 16px; }
.cardbox p { margin: 0; }
.cardbox .where { font: 13px var(--sans); color: var(--muted); }
.cardbox details summary { cursor: pointer; color: var(--accent); }
.cardbox details p { margin-top: 10px; }
.place-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0; }
.place-filters button { border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); padding: 7px 12px; font: 13px var(--sans); cursor: pointer; }
.place-filters button:not(:first-child) { border-left: 4px solid var(--place-color); }
.place-filters button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.place-filters button:focus-visible, .place-card:focus-visible, .place-source-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.place-map-section { position: relative; z-index: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.place-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.place-map-head h3 { margin: 0; font-size: 17px; }
.place-map, .place-map.leaflet-container { height: clamp(340px, 48vh, 560px); background: #dce8e7; }
.place-map.no-basemap { background: var(--bg); }
.place-map[hidden], .place-map-note[hidden] { display: none; }
.place-map-note { margin: 0; padding: 8px 14px 11px; color: var(--muted); font: 12px/1.45 var(--sans); }
.place-distance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px 12px; border-top: 1px solid var(--line); font: 13px var(--sans); }
.place-distance select { max-width: min(100%, 230px); padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
.place-distance strong { color: var(--accent); }
.place-map .leaflet-control-attribution { font: 11px var(--sans); }
.place-regions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.place-regions[hidden] { display: none; }
.place-regions button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 4px 11px; font: 12.5px var(--sans); cursor: pointer; }
.place-regions button:hover { border-color: var(--accent); }
.place-regions button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.place-map .leaflet-tooltip.place-label { display: none; background: transparent; border: 0; box-shadow: none; padding: 0 2px; color: var(--ink); font: 600 11.5px var(--sans);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper); }
.place-map .leaflet-tooltip.place-label:before { display: none; }
.place-map.show-labels .leaflet-tooltip.place-label, .place-map .leaflet-tooltip.place-label.on { display: block; }
.place-map .leaflet-tooltip.place-label.on { z-index: 700; font-size: 12.5px; }
.place-map.show-labels .leaflet-tooltip.place-label.twin:not(.on) { display: none; }
.place-card.hl { border-color: var(--place-color); box-shadow: var(--shadow); }
.place-card-geog .was { opacity: .8; }
.place-card-people { display: flex; flex-wrap: wrap; gap: 4px; }
.place-person { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font: 11.5px/1.5 var(--sans); }
.place-person.more { color: var(--muted); }
.place-then-now.single { grid-template-columns: 1fr; }
.place-groups { margin-top: 28px; }
.place-group { margin: 0 0 28px; }
.place-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; border-bottom: 2px solid var(--place-color); padding-bottom: 8px; margin-bottom: 10px; }
.place-group-head h3 { margin: 0; font-size: 19px; }
.place-group-head p { margin: 0; color: var(--muted); font: 13px var(--sans); }
.place-group-head span { margin-left: auto; color: var(--muted); font: 12px var(--sans); }
.place-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 8px; }
.place-card { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 118px; padding: 12px 14px; text-align: left; cursor: pointer; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--place-color); border-radius: 8px; font-family: var(--sans); }
.place-card:hover { border-color: var(--place-color); box-shadow: var(--shadow); }
.place-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.place-card-top strong { min-width: 0; font: 600 16px/1.3 var(--serif); }
.place-card-period { flex: 0 1 45%; color: var(--place-color); font: 600 12px/1.25 var(--sans); text-align: right; }
.place-card-geog { color: var(--muted); font: 12px/1.35 var(--sans); }
.place-card-people { margin-top: auto; font: 12px/1.35 var(--sans); }
.place-unmatched { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 4px; }
.place-unmatched h3 { margin-top: 18px; }
.place-suggestion-list { margin: 0 0 8px; padding-left: 20px; font: 13px/1.55 var(--sans); }
.place-suggestion-list li { margin: 5px 0; }
.place-unmatched details summary { color: var(--accent); cursor: pointer; font: 13px var(--sans); }
.place-period { margin: 0 0 12px; color: var(--accent); font: 600 13px var(--sans); }
.place-then-now { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.place-then-now span { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: 13px/1.4 var(--sans); }
.place-then-now small { display: block; color: var(--muted); margin-bottom: 3px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.place-summary { font-weight: 600; }
.place-detail { margin: 0 0 11px; }
.place-geo-note { color: var(--muted); font: 12px/1.4 var(--sans); }
.place-ref { color: var(--accent); background: none; padding: 0; border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.place-timeline { list-style: none; padding: 0 0 0 16px; margin: 8px 0 0 4px; border-left: 2px solid var(--line); }
.place-timeline li { position: relative; margin: 0 0 14px; font: 13px/1.45 var(--sans); }
.place-timeline li:before { content: ''; position: absolute; left: -22px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.place-timeline time { display: block; font-weight: 700; color: var(--accent); }
.place-event-sources { margin-top: 3px; }
.place-event-sources button { padding: 0; border: 0; background: none; color: var(--muted); font: 11px/1.3 var(--sans); text-align: left; text-decoration: underline; cursor: pointer; }
.place-event-sources button + button:before { content: ' · '; text-decoration: none; }
.place-links { padding-left: 20px; margin: 6px 0 16px; font: 13px/1.45 var(--sans); }
.place-links li { margin-bottom: 6px; }
.place-source-link { border: 0; background: none; padding: 0; color: var(--accent); text-align: left; font: inherit; text-decoration: underline; cursor: pointer; }
.place-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 14px; max-width: 1000px; }
.place-media { margin: 0; }
.place-media img { display: block; width: 100%; max-height: 320px; object-fit: contain; object-position: left center; border-radius: 6px; background: var(--bg); }
.place-media figcaption { margin-top: 5px; color: var(--muted); font: 12px/1.45 var(--sans); }
.place-materials { margin-top: 12px; font: 13px/1.5 var(--sans); }
.place-materials ul { margin: 5px 0 0; padding-left: 20px; }
.place-materials li + li { margin-top: 3px; }
.cardbox .foot-row { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lid { font: 600 12px var(--sans); color: var(--accent); margin-right: 4px; }
.qcard .ans { font: 13px var(--sans); color: var(--muted); }
.plist { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.prow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) 110px 28px; gap: 12px; align-items: baseline; text-align: left; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.prow:hover { border-color: var(--accent); }
.prow .n { font-weight: 600; }
.prow .r { color: var(--muted); font-size: 14px; }
.prow .y { font: 13px var(--sans); color: var(--muted); white-space: nowrap; }
.prow .c { font: 600 12px var(--sans); color: var(--accent); text-align: right; }
.plist h4 { margin: 18px 0 4px; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.srclist { display: flex; flex-direction: column; gap: 10px; }
.srcrow { display: grid; grid-template-columns: 110px 1fr; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.srcrow.nothumb { grid-template-columns: 1fr; }
.srcrow .thumbs button, .srcrow .thumbs a.pdf { width: 110px; height: 110px; }
.srcrow h4 { margin: 0 0 4px; font-size: 16px; }
.srcrow p { margin: 0 0 4px; }
.srcrow .loc { font: 13px var(--sans); color: var(--muted); }
.srcrow:target { outline: 2px solid var(--accent); }
.tblwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 7px 8px; vertical-align: top; }
th { font: 600 12px var(--sans); color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(10, 8, 6, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 16px 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 4px; }
.lightbox p { color: #ddd; font: 14px var(--sans); margin: 10px 0 0; text-align: center; }
.lightbox .panel-close { background: #222; color: #eee; border-color: #444; }

.foot { padding: 14px 20px 20px; font: 13px var(--sans); color: var(--muted); border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .bar { grid-template-columns: 1fr; grid-template-areas: "brand" "search" "tabs"; gap: 8px; padding: 10px 16px 0; align-items: stretch; }
  .tree-tools, .crumbs, .hint { padding-left: 16px; padding-right: 16px; }
  .canvas { margin: 8px 0 0; border-radius: 0; border-left: 0; border-right: 0; min-height: 60vh; }
  .page { padding: 20px 16px 32px; }
  .panel { top: auto; height: 88vh; width: 100vw; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(105%); padding: 20px 16px 32px; }
  .panel.open { transform: none; }
  .prow { grid-template-columns: 1fr auto; }
  .prow .r { grid-column: 1 / -1; grid-row: 2; }
  .prow .c { display: none; }
  .srcrow { grid-template-columns: 76px 1fr; }
  .srcrow .thumbs button, .srcrow .thumbs a.pdf { width: 76px; height: 76px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dt { padding-top: 8px; }
  .legend { display: block; margin: 4px 0 0; }
}

/* ---------- wide (horizontal, whole family) */
.wide-note { font: 13px var(--sans); color: var(--muted); }
.wide-canvas { min-height: calc(100vh - 120px); }
#view-wide:fullscreen { background: var(--bg); padding: 8px; display: flex; flex-direction: column; }
#view-wide:fullscreen .wide-canvas { flex: 1; min-height: 0; margin: 8px 0 0; }
.wcard { position: absolute; width: 240px; height: 64px; border-radius: 8px; border: 1.5px solid var(--u-edge); background: var(--u); padding: 4px 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow); overflow: hidden; }
.wcard.m { background: var(--m); border-color: var(--m-edge); }
.wcard.f { background: var(--f); border-color: var(--f-edge); }
.wcard.chain { border-width: 2.5px; }
.wcard.root { outline: 3px solid var(--focus); outline-offset: 2px; }
.wcard .nm { font: 600 12.5px/1.15 var(--serif); white-space: normal; overflow-wrap: anywhere; }
.wcard .yr { font: 11px/1.2 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard .badge { position: absolute; top: 2px; right: 3px; background: var(--accent); color: var(--accent-ink); font: 700 10px/16px var(--sans); min-width: 16px; height: 16px; border-radius: 8px; text-align: center; padding: 0 4px; }
.links path.half { stroke-dasharray: 5 4; }
.wide-col { position: absolute; top: 6px; font: 600 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* print mode for PNG export */
.print-wide .bar, .print-wide .foot, .print-wide .tree-tools, .print-wide .panel, .print-wide .scrim { display: none !important; }
.print-wide body { background: var(--paper); }
.print-wide #view-wide .wide-canvas { position: static; margin: 0; border: 0; border-radius: 0; min-height: 0; overflow: visible; background: var(--paper); }
.print-wide #view-wide { display: block; }
.print-wide .stage { position: relative; }

.branches button.sn small { font: 600 11px var(--sans); color: var(--muted); margin-left: 2px; }

@media (min-width: 721px) and (max-width: 1100px) {
  .bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand search" "tabs tabs"; }
}

.zoom.overlay { position: absolute; top: 10px; right: 10px; z-index: 5; }
.zoom.overlay button { box-shadow: var(--shadow); }
.print-wide .zoom.overlay { display: none; }

.meta-top { display: block; font: 11px/1.5 var(--sans); color: var(--muted); margin-top: 4px; }
.header-links { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.meta-top a { color: var(--muted); }
.print-wide .meta-top { display: none; }

/* ---------- story */
.story { max-width: 760px; }
.story .lead { font-size: 18px; }
.story p, .story li { line-height: 1.65; }
.story ul { padding-left: 20px; }
.story li { margin: 6px 0; }
.story .part { font-size: 22px; margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.story section { scroll-margin-top: 90px; }
.story h3 { font-size: 22px; margin: 30px 0 8px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.story .yr { font: 600 12px/1 var(--sans); letter-spacing: .06em; color: var(--accent); background: var(--chip); border-radius: 999px; padding: 5px 9px; }
.story a.pl { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.story a.pl:hover { color: var(--accent); }
.story-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 8px; }
.story-toc button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 12px; font: 500 13px var(--sans); cursor: pointer; }
.story-toc button:hover { border-color: var(--accent); }
.story h4 { font: 600 15px var(--sans); margin: 22px 0 4px; color: var(--muted); }

#story-nav { margin: 16px 0 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.story-up { position: fixed; right: 18px; bottom: 70px; z-index: 15; box-shadow: var(--shadow); }
.story-up[hidden] { display: none; }
#story-nav .nav-block { margin: 0 0 8px; }
#story-nav h4, #story-nav summary { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; cursor: pointer; }
.tl { display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; padding: 8px 0 4px; position: relative; }
.tl-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; border-top: 2px solid var(--line); padding: 8px 12px 2px 0; margin-right: 4px; cursor: pointer; position: relative; text-align: left; max-width: 120px; }
.tl-item::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.tl-item b { font: 600 13px var(--sans); color: var(--accent); }
.tl-item span { font: 12px/1.25 var(--sans); color: var(--muted); }
.tl-item:hover span { color: var(--ink); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pl-chips button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px; font: 500 12.5px var(--sans); cursor: pointer; }
.pl-chips button small { margin-left: 6px; color: var(--muted); }
.pl-chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pl-chips button[aria-pressed="true"] small { color: inherit; }
.pl-status { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 16; display: flex; align-items: center; gap: 8px; font: 13px var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.pl-status .btn { padding: 4px 10px; }
.pl-status[hidden] { display: none; }
#story.filtering section > p, #story.filtering section > ul > li, #story.filtering section > figure { opacity: .35; transition: opacity .2s; }
#story.filtering .hit { opacity: 1 !important; background: var(--chip); border-radius: 8px; box-shadow: 0 0 0 6px var(--chip); }
.story section[id], .story p[id] { scroll-margin-top: 80px; }
.sfig { margin: 16px 0 20px; }
.sfig img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.sfig.map img { max-height: 560px; object-fit: cover; object-position: center; }
.sfig figcaption { font: 13.5px/1.45 var(--sans); color: var(--muted); margin-top: 6px; }
.sfig .credit { display: block; font-size: 11.5px; opacity: .85; margin-top: 2px; }

.story .authorship { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; font-style: italic; }
.manuscript { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; font-style: italic; }
.manuscript p { margin: 0 0 10px; }
.manuscript u { text-decoration-color: var(--accent); font-style: normal; font-weight: 600; }
.manuscript .ms-title { text-align: center; font-size: 19px; font-style: normal; font-weight: 600; }
.manuscript .ms-gen { text-align: center; font-style: normal; text-decoration: underline; margin-top: 18px; }
.manuscript .ms-date { text-align: right; }
.manuscript .pg { font: normal 11px var(--sans); color: var(--muted); margin: 0 3px; }
.sfig.photo { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---------- story v2 */
:root { --b-kol: #7a5c99; --b-fig: #2f6f8f; --b-bus: #8a6d1f; --b-mel: #9a3d2b; --b-kam: #2e7d5b; --b-kal: #a0522d; }
.story { max-width: 760px; }
.story > h2 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.01em; margin-bottom: 14px; }
.story .lead { font-size: 19px; line-height: 1.6; }
.story .part { font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border-top: 0; margin: 56px 0 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.story .part::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.story h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin: 44px 0 6px; flex-direction: column; align-items: flex-start; gap: 4px; }
.story h3 .yr { background: none; padding: 0; font: 600 13px var(--sans); letter-spacing: .1em; }
.br-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; }
.br { font: 600 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; color: #fff; }
.br-kol { background: var(--b-kol); } .br-fig { background: var(--b-fig); } .br-bus { background: var(--b-bus); }
.br-mel { background: var(--b-mel); } .br-kam { background: var(--b-kam); } .br-kal { background: var(--b-kal); }
.story section p > b:first-child { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.story .authorship { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 18px; font-style: italic; font-size: 17px; }
.sfig figcaption { font-size: 13px; }
.sfig img { cursor: zoom-in; box-shadow: var(--shadow); }
.sfig.map img { max-height: 420px; }
.sfig.photo.solo { max-width: 420px; }
.sgal { display: grid; gap: 14px; margin: 18px 0 22px; align-items: start; }
.sgal.n2 { grid-template-columns: 1fr 1fr; } .sgal.n3 { grid-template-columns: 1fr 1fr 1fr; }
.sgal .sfig { margin: 0; max-width: none; }
.sgal .sfig img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
@media (min-width: 900px) {
  .story .sfig.photo.solo { float: right; width: 42%; margin: 6px 0 14px 26px; }
  .story section::after { content: ""; display: block; clear: both; }
  .story .part, .story h3, .story .sgal, .story .sfig.map, .story .manuscript { clear: both; }
}
@media (max-width: 600px) { .sgal.n3 { grid-template-columns: 1fr 1fr; } }
.manuscript { position: relative; background: #fbf6ea; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .manuscript { background: #26211a; } }
/* лента времени */
.tl-item.on::before { background: var(--accent); transform: scale(1.3); }
.tl-item.on b { text-decoration: underline; text-underline-offset: 3px; }
.tl-item.past::before { background: var(--accent); opacity: .5; }
/* боковая колонка */
.story-rail { display: none; }
@media (min-width: 1180px) {
  #view-story .page.story { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 740px) 300px; column-gap: 56px; justify-content: center; }
  .page.story > h2, .page.story > #story { grid-column: 1; }
  .page.story > h2 { grid-row: 1; } .page.story > #story { grid-row: 2; }
  .story-rail { display: block; grid-column: 2; grid-row: 1 / span 2; }
  .story-rail #story-nav { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; border: 0; margin: 0; padding: 4px 0 20px; scrollbar-width: thin; }
  .story-rail .tl { flex-direction: column; overflow: visible; padding: 0 0 0 14px; border-left: 2px solid var(--line); max-height: 46vh; overflow-y: auto; }
  .story-rail .tl-item { flex-direction: row; align-items: baseline; gap: 8px; border-top: 0; padding: 5px 0; margin: 0; max-width: none; }
  .story-rail .tl { padding-left: 24px; border-left: 0; background: linear-gradient(var(--line), var(--line)) no-repeat 9px 0 / 2px 100%; }
  .story-rail .tl-item::before { top: 9px; left: -21px; }
  .story-rail .tl-item b { min-width: 44px; }
  .story-rail .tl-item span { font-size: 13px; }
  .story-rail .pl-chips button { font-size: 12px; padding: 3px 9px; }
}
.story-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; pointer-events: none; }
.story-progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---------- story: аудит по redesign-skill */
.skip { position: absolute; left: 12px; top: -48px; z-index: 60; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 6px; font: 600 14px var(--sans); text-decoration: none; }
.skip:focus { top: 10px; }
:where(button, a, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.story p, .story li, .sfig figcaption { text-wrap: pretty; }
.story h2, .story h3, .story .part { text-wrap: balance; }
.story { --measure: 68ch; }
.story #story > p, .story section > p, .story section > ul { max-width: var(--measure); }
@media (min-width: 900px) { .story section > p, .story section > ul, .story .lead { font-size: 17.5px; } }
.story h3 { letter-spacing: -.012em; font-weight: 650; }
.story h3 .yr, .tl-item b, .pl-chips small { font-variant-numeric: tabular-nums; }
/* вводные слова абзацев — полужирный курсив вместо капса */
.story section p > b:first-child { font: 600 italic 1em var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
.br { font-weight: 600; letter-spacing: .03em; text-transform: none; font-size: 11.5px; padding: 3px 7px; border-radius: 3px; }
:root { --b-kol: #6f5a86; --b-fig: #3a6a80; --b-bus: #7d6a35; --b-mel: #8a4436; --b-kam: #3c715a; --b-kal: #8e5a3a; }
/* состояния */
.tl-item, .pl-chips button, .story-toc button, .sfig img, .story a.pl { transition: color .2s, background-color .2s, border-color .2s, transform .2s, box-shadow .2s, opacity .2s; }
.pl-chips button:hover { border-color: var(--accent); }
.pl-chips button:active, .tl-item:active, .btn:active { transform: translateY(1px) scale(.98); }
.sfig a:hover img { box-shadow: 0 2px 4px rgba(60, 40, 20, .12), 0 10px 28px rgba(60, 40, 20, .14); }
.tl-item:hover::before { background: var(--chip); }
/* плавное появление фото при прокрутке */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .story .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .story .reveal.in { opacity: 1; transform: none; }
}
/* лёгкая «бумажная» фактура */
.page.story { background-image: radial-gradient(rgba(120, 90, 50, .035) 1px, transparent 1px); background-size: 4px 4px; }

/* ---------- вопросы и обсуждение */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.subnav button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 14px; font: 500 13.5px var(--sans); cursor: pointer; }
.subnav button:hover { border-color: var(--accent); }
.qa section { scroll-margin-top: 80px; margin-bottom: 28px; }

/* ---------- архив */
.archive { max-width: 1180px; }
.arch-tools { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 18px; }
.arch-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.arch-lbl { font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.arch-count { margin-left: auto; font: 13px var(--sans); color: var(--muted); }
.arch-wide { display: block; width: 100%; text-align: left; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit; }
.arch-wide:hover { border-color: var(--accent); }
.arch-wide-t { display: block; font: 600 16px var(--serif); }
.arch-wide-t::after { content: ' →'; color: var(--accent); }
.arch-wide-s { display: block; margin-top: 3px; font: 13px var(--sans); color: var(--muted); }
#wide-back { flex: none; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 36px; }
.acard { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.acard:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.acard:active { transform: translateY(1px); }
.acard-pic { height: 150px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.acard-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.acard-ph { font: 700 26px var(--sans); color: var(--muted); opacity: .6; }
.acard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.acard-kind { margin: 0; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: flex; gap: 2px; }
.acard-id { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.acard-title { margin: 0; font: 600 14.5px/1.35 var(--serif); }
.acard-ppl { margin: 0; font: 12.5px/1.35 var(--sans); color: var(--muted); }
.k-research .acard-kind { color: #8a6d1f; }
.rlog { display: flex; flex-direction: column; gap: 6px; margin-bottom: 30px; }
.rlog-item { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.rlog-item summary { cursor: pointer; font: 14px var(--sans); }
.rlog-item p { margin: 6px 0 0; font-size: 14px; }
.rlog-date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* ---------- просмотр документа */
.doc { position: fixed; inset: 0; z-index: 50; background: rgba(20, 15, 10, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.doc[hidden] { display: none; }
.doc-inner { position: relative; background: var(--paper); border-radius: 12px; width: min(1240px, 100%); height: min(92vh, 900px); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.doc-view { background: #2a241d; display: flex; align-items: center; justify-content: center; overflow: auto; }
.doc-view img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.doc-view a { display: flex; max-width: 100%; max-height: 100%; }
.doc-view iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.doc-noimg { color: #d9cbb4; font: 15px var(--sans); padding: 30px; text-align: center; }
.doc-meta { padding: 22px 22px 28px; overflow-y: auto; }
.doc-meta h2 { font-size: 21px; margin: 6px 0 10px; }
.doc-meta h3 { font-size: 15px; font-family: var(--sans); margin: 18px 0 8px; }
.doc-scope { line-height: 1.55; margin: 0 0 10px; }
.doc-links { font: 14px var(--sans); }
.doc-ppl { display: flex; flex-wrap: wrap; gap: 6px; }
.doc .panel-close { position: absolute; top: 8px; right: 10px; z-index: 2; }
body.doc-open { overflow: hidden; }
@media (max-width: 820px) { .doc { padding: 0; } .doc-inner { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: 100vh; border-radius: 0; } .arch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .acard-pic { height: 120px; } }

/* вероятные связи */
.card.probable::after { content: "≈"; position: absolute; top: 3px; right: 7px; font: 700 13px var(--sans); color: var(--accent); }
.card.probable { border-style: dashed; }
.probable-note { grid-column: 1 / -1; font: 13px/1.45 var(--sans); color: var(--muted); background: var(--chip); border-radius: 6px; padding: 6px 9px; margin: 2px 0 6px; }
.wcard.probable { border-style: dashed; }
.wcard.probable::after { content: "≈"; position: absolute; top: 2px; right: 6px; font: 700 12px var(--sans); color: var(--accent); }
.res-h { grid-column: 1 / -1; }
.res-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.res-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 6px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.res-date { font: 600 12.5px var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .res-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- «Места»: дороги семьи — маршрут по годам и карта, которая следует за чтением */
.page.routes { max-width: 1320px; }
.routes-head .sub { max-width: 62ch; }
.route-filters { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 8px; border-bottom: 1px solid var(--line); }
.route-filters button { position: relative; background: none; border: 0; padding: 8px 0 10px 16px; font: 500 14px var(--sans); color: var(--muted); cursor: pointer; }
.route-filters button::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-radius: 50%; background: var(--route-color, var(--ink)); opacity: .8; }
.route-filters button:first-child { padding-left: 0; }
.route-filters button:first-child::before { display: none; }
.route-filters button:hover { color: var(--ink); }
.route-filters button.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--route-color, var(--accent)); }
.route-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.routes-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); gap: 40px; align-items: start; margin-top: 26px; }
.routes-map { position: sticky; top: calc(var(--bar-h, 64px) + 14px); }
.route-map, .route-map.leaflet-container { height: calc(100vh - var(--bar-h, 64px) - 70px); min-height: 380px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font: 12px var(--sans); }
.route-map-note { margin: 8px 2px 0; color: var(--muted); font: 12px/1.45 var(--sans); }
.route-line { margin: 0 0 64px; }
.route-line-head { margin: 0 0 22px; }
.route-line-head h3 { margin: 0; font-size: 26px; line-height: 1.2; }
.route-line-head p { margin: 4px 0 0; color: var(--muted); font: 14px var(--sans); }
.route-stops { list-style: none; margin: 0; padding: 0; }
.route-stop { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
.route-year { padding: 3px 18px 0 0; text-align: right; font: 600 15px/1.35 var(--serif); font-variant-numeric: tabular-nums oldstyle-nums; color: var(--route-color); }
.route-body { position: relative; padding: 0 0 6px 26px; border-left: 2px solid color-mix(in srgb, var(--route-color) 45%, transparent); }
.route-body::before { content: ''; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--route-color); transition: transform .25s, background-color .25s; }
.route-stop.active .route-body::before { background: var(--route-color); transform: scale(1.35); }
.route-body h4 { margin: 0; }
.route-name { background: none; border: 0; padding: 0; margin: 0; color: var(--ink); font: 600 21px/1.25 var(--serif); text-align: left; cursor: pointer; }
.route-name:hover { text-decoration: underline; text-decoration-color: var(--route-color); text-underline-offset: 4px; }
.route-where { margin: 4px 0 0; color: var(--muted); font: 13px/1.45 var(--sans); }
.route-arrow { color: var(--route-color); }
.route-text { margin: 10px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.62; }
.route-text.muted { color: var(--muted); font-size: 14px; }
.route-people { margin: 8px 0 0; font: 13px/1.5 var(--sans); color: var(--ink); opacity: .85; }
.route-more { margin: 8px 0 0; padding: 0; background: none; border: 0; color: var(--accent); font: 500 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.route-name:focus-visible, .route-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.route-stop.shared .route-name { font-size: 18px; }
.route-gap { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
.route-gap::before { content: ''; }
.route-gap span { display: block; padding: 10px 0 26px 26px; border-left: 2px dotted color-mix(in srgb, var(--route-color, var(--muted)) 55%, transparent); color: var(--muted); font: italic 13px/1.4 var(--serif); }
.route-line .route-gap span { border-left-color: color-mix(in srgb, var(--route-color) 55%, transparent); }
.route-map .leaflet-tooltip.place-label { display: none; background: transparent; border: 0; box-shadow: none; padding: 0 3px; color: var(--ink); font: 600 12px var(--sans); white-space: nowrap;
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 2px var(--paper); }
.route-map .leaflet-tooltip.place-label::before { display: none; }
.route-map .leaflet-tooltip.place-label.on, .route-map .leaflet-tooltip.place-label.hover { display: block; }
.route-map .leaflet-tooltip.place-label.on { font-size: 13.5px; z-index: 700; }
.routes .place-unmatched { margin-top: 10px; }
@media (max-width: 900px) {
  .routes-body { grid-template-columns: 1fr; gap: 0; }
  .routes-map { order: -1; top: var(--bar-h, 0px); z-index: 5; background: var(--bg); padding: 6px 0 10px; margin: 0 -16px; }
  .route-map, .route-map.leaflet-container { height: 34vh; min-height: 220px; border-radius: 0; border-left: 0; border-right: 0; }
  .route-map-note { display: none; }
  .routes-list { padding-top: 18px; }
  .route-stop, .route-gap { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .route-year { font-size: 13px; padding-right: 12px; }
  .route-body { padding-left: 20px; }
  .route-gap span { padding-left: 20px; }
  .route-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; }
  .route-filters::-webkit-scrollbar { display: none; }
  .route-filters button { flex: none; white-space: nowrap; }
  .route-line-head h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .route-body::before { transition: none; } }
.place-fn { line-height: 0; margin-left: 1px; }
.place-fn button { background: none; border: 0; padding: 0 1px; color: var(--accent); font: 600 11px var(--sans); cursor: pointer; vertical-align: super; line-height: 1; }
.place-fn button:hover { text-decoration: underline; }
.place-fn button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
ol.place-sources { padding-left: 22px; }
ol.place-sources .place-source-link { display: inline; text-align: left; line-height: inherit; }
ol.place-sources li::marker { color: var(--accent); font: 600 12px var(--sans); }
@media (max-width: 900px) {
  body.places-mode .bar { position: static; }
  body.places-mode .routes-map { top: 0; }
}

/* ---------- «Для Маши и Алисы»: рассказ по главам */
.page.children-story { display: block; max-width: 760px; padding-bottom: 96px; }
.children-story > header { padding: 12px 0 4px; }
.children-story > header h2 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.01em; margin: 8px 0 10px; }
.children-story > header .sub { font: 15px/1.5 var(--sans); }
.children-story p, .children-story li { font-size: 18px; line-height: 1.7; }
.children-story section > p, .children-story section > ul { max-width: none; }
/* оглавление — карточки глав */
.children-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 8px; counter-reset: none; }
.children-toc a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.children-toc a:hover { border-color: var(--accent); transform: translateY(-1px); }
.children-toc a img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 0; }
.children-toc a.noimg::before { content: ""; grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 8px; background: var(--chip); }
.children-toc .n { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); align-self: end; }
.children-toc .n::before { content: "Глава "; }
.children-toc .t { font: 600 16px/1.3 var(--serif); align-self: start; margin-top: 4px; }
/* главы */
.children-story section { scroll-margin-top: 80px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.children-story section#children-0 { border-top: 0; padding-top: 12px; margin-top: 24px; }
.children-story h3 { display: block; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; margin: 0 0 18px; }
.children-story .ch-n { display: block; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.children-story .sfig { float: none; width: 100%; max-width: 560px; margin: 28px auto; }
.children-story .sfig img { width: 100%; height: auto; max-height: none; border-radius: 10px; box-shadow: var(--shadow); }
.children-story .sfig figcaption { text-align: center; margin-top: 10px; }
/* вопросы детям и карта — отдельные карточки */
.children-question, .children-map { position: relative; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 20px 16px 58px; margin: 28px 0 0; font-size: 17px !important; box-shadow: var(--shadow); }
.children-question::before, .children-map::before { position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 16px/28px var(--sans); text-align: center; }
.children-question::before { content: "?"; }
.children-map::before { content: "⌖"; }
.children-map h4 { font: 600 17px var(--serif); margin: 2px 0 6px; color: var(--ink); }
.children-map p { margin: 0; font-size: 16px; }
.children-story .place-link { text-underline-offset: 3px; }
/* переход к следующей главе */
.ch-next { margin-top: 32px; display: flex; justify-content: flex-end; }
.ch-next a { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font: 600 16px/1.3 var(--serif); color: var(--accent); text-decoration: none; text-align: right; max-width: 100%; }
.ch-next a:hover { border-color: var(--accent); }
.ch-next small { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ch-next a.up { flex-direction: row; font: 500 15px var(--sans); }
@media (max-width: 600px) {
  .children-toc { grid-template-columns: 1fr; gap: 8px; }
  .children-toc a { grid-template-columns: 52px minmax(0, 1fr); }
  .children-toc a img, .children-toc a.noimg::before { width: 52px; height: 52px; }
  .children-story p, .children-story li { font-size: 17px; }
  .children-story section { margin-top: 40px; padding-top: 28px; }
  .children-question, .children-map { padding: 14px 14px 14px 52px; }
  .children-question::before, .children-map::before { left: 12px; top: 13px; }
  .ch-next a { width: 100%; }
}

/* Caption for unlinked research cards on a surname canvas. */
.card.candidate-label { border: 0; background: transparent; box-shadow: none; cursor: default; overflow: visible; }
.card.candidate-label .nm, .card.candidate-label .yr { white-space: normal; overflow: visible; }

/* The language controls fit both the tree header and standalone archive pages. */
.language-tools { font: 12px/1.4 var(--sans); color: var(--muted); text-align: right; }
.search .language-tools { margin-top: 3px; }
body > .language-tools { padding: 10px 20px; border-bottom: 1px solid var(--line); }
.language-nav { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; justify-content: flex-end; }
.language-nav a { display: inline-block; padding: 4px 0; text-decoration: none; }
.language-nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.translation-note { position: relative; margin: 1px 0 4px; }
.translation-note summary { cursor: pointer; color: var(--muted); }
.translation-note p { position: absolute; top: 100%; right: 0; text-align: left; width: min(290px, 80vw); padding: 12px; margin: 4px 0; z-index: 45; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
@media (max-width: 720px) { .language-nav { gap: 2px 8px; font-size: 11px; } }
@media print { .language-tools { display: none; } }