:root {
  --paper: #F5EFE4; --paper-2: #EBE3D5; --ink: #2B2622; --ink-2: #6B6157; --line: #CFC4B3;
  --gumerov: #A8482A; --gataullin: #2E7564; --borisov: #2F5A8A; --osipov: #85600E; --murtazin: #7B3F72;
  --sans: "Montserrat", "PT Sans", system-ui, sans-serif; --serif: "PT Serif", Georgia, serif;
  --fs: 18px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1B1815; --paper-2: #26221E; --ink: #EDE6DA; --ink-2: #A89E92; --line: #3E3832;
    --gumerov: #E48A66; --gataullin: #5FBFA6; --borisov: #7FA9DA; --osipov: #D9AE4E; --murtazin: #C98BC0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1B1815; --paper-2: #26221E; --ink: #EDE6DA; --ink-2: #A89E92; --line: #3E3832;
  --gumerov: #E48A66; --gataullin: #5FBFA6; --borisov: #7FA9DA; --osipov: #D9AE4E; --murtazin: #C98BC0;
  color-scheme: dark;
}
:root.big { --fs: 22px; }
* { box-sizing: border-box; }
html { font-size: var(--fs); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--serif); padding-bottom: 64px; }
a { color: inherit; }
h1, h2, h3, .brand, .nav, button, .chips, .tabbar, input { font-family: var(--sans); }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .4em; font-weight: 800; }
h2 { font-size: 1.35rem; margin: 0 0 .3em; font-weight: 700; display: flex; align-items: center; gap: .4em; }
h3 { font-size: 1.05rem; margin: 1em 0 .3em; }
button { font-size: .8rem; cursor: pointer; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); border-radius: 6px; padding: .45em .8em; min-height: 44px; }
button.ghost { background: none; border-color: transparent; }
button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.muted { color: var(--ink-2); }

.top { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 1rem; padding: .4rem 16px; background: var(--paper); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 800; font-size: .78rem; text-decoration: none; letter-spacing: .02em; }
.nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: .75rem; padding: .5em .6em; border-radius: 6px; }
.nav a.on { background: var(--ink); color: var(--paper); }
.tools { margin-left: auto; display: flex; gap: .3rem; align-items: center; }
input[type=search] { font-size: .8rem; padding: .55em .8em; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); color: var(--ink); width: 14rem; min-height: 44px; }
.chips { display: flex; gap: .4rem; padding: .4rem 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.chip { font-size: .72rem; display: inline-flex; gap: .35em; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: .2em .7em; background: none; min-height: 36px; }
.chip[aria-pressed="false"] { opacity: .4; }
.mark { font-style: normal; }
.tabbar { display: none; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.panel { position: relative; }
.head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.head .ctl { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.frame { border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); overflow: auto; position: relative; }
svg text { font-family: var(--sans); fill: var(--ink); }

/* «i»: пояснения только по запросу */
.info { width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; font: italic 700 .75rem var(--serif); flex: none; }
.tip { max-width: 26rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); padding: .8rem 1rem; font: .85rem/1.5 var(--serif); box-shadow: 0 6px 24px rgb(0 0 0 / .18); }

/* Главная */
.hero { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.5rem; align-items: center; min-height: 70vh; }
.hero .lead { font-size: 1.15rem; }
.stats { font-family: var(--sans); font-size: .8rem; color: var(--ink-2); display: flex; align-items: center; gap: .4rem; }
.cta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.cta a { font-family: var(--sans); font-size: .8rem; font-weight: 700; text-decoration: none; border: 1px solid var(--ink); border-radius: 6px; padding: .7em 1.1em; }
.cta a:first-child { background: var(--ink); color: var(--paper); }
#heromap { height: 62vh; min-height: 360px; border-radius: 8px; }
.scenes { max-width: 46rem; margin: 3rem auto; }
.scene { padding: 1.5rem 0 2rem; border-top: 1px solid var(--line); }
.scene .when { font-family: var(--sans); font-size: .75rem; color: var(--ink-2); letter-spacing: .05em; text-transform: uppercase; }
.scene a.go { font-family: var(--sans); font-size: .78rem; font-weight: 700; }

/* Карта */
#map { height: calc(100vh - 230px); min-height: 420px; border-radius: 8px; }
.slider { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-family: var(--sans); font-size: .8rem; }
.slider input { flex: 1; accent-color: var(--ink); }
.year { font-weight: 800; font-size: 1.4rem; min-width: 4ch; }
.leaflet-container { background: var(--paper-2); font-family: var(--sans); }
.leaflet-popup-content { font: .85rem/1.5 var(--serif); }
.leaflet-popup-content a { cursor: pointer; }
.pl { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink); background: none; border: 0; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); white-space: nowrap; }

/* Древо, веер, шежере */
.node rect { fill: var(--paper); stroke-width: 1.5; rx: 6; }
.node.living rect { stroke-dasharray: 3 3; }
.node.hyp rect, .node.oral rect { stroke-dasharray: 2 4; }
.node { cursor: pointer; }
.node:focus { outline: none; }
.node:focus rect, .node:hover rect { stroke-width: 3; }
.link { fill: none; stroke: var(--line); stroke-width: 1.5; }
.link.oral { stroke-dasharray: 6 4; }
.link.hyp { stroke-dasharray: 1 4; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Лента времени */
.epoch { opacity: .12; }

/* Люди */
.letters { display: flex; flex-wrap: wrap; gap: .2rem; margin: .5rem 0; }
.people { columns: 3 18rem; column-gap: 2rem; }
.people a { display: block; break-inside: avoid; text-decoration: none; padding: .2em 0; }
.people a:hover { text-decoration: underline; }

/* Истории */
.story { max-width: 46rem; }
.story p { margin: 0 0 1em; }
.conf { font-family: var(--sans); font-size: .65rem; border: 1px solid currentColor; border-radius: 4px; padding: 0 .35em; margin-left: .3em; color: var(--ink-2); white-space: nowrap; }
.src { font-size: .8rem; color: var(--ink-2); }

/* Карточка персоны */
.card { position: fixed; right: 0; top: 0; bottom: 0; width: min(28rem, 100%); background: var(--paper); border-left: 1px solid var(--line); z-index: 2000; overflow: auto; padding: 1rem 1.2rem 5rem; box-shadow: -8px 0 30px rgb(0 0 0 / .15); }
.card .close { position: sticky; top: 0; float: right; font-size: 1rem; }
.card .rod { font-family: var(--sans); font-size: .75rem; font-weight: 700; }
.card img { max-width: 9rem; border-radius: 6px; float: right; margin: 0 0 .5rem .8rem; }
.card dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: .2rem .6rem; margin: .5rem 0; font-size: .9rem; }
.card dt { color: var(--ink-2); font-family: var(--sans); font-size: .75rem; padding-top: .2em; }
.card dd { margin: 0; }
.card .rel a { cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); }
.fact { border-left: 3px solid var(--line); padding: .2rem .7rem; margin: .5rem 0; font-size: .9rem; }
.fact.oral { border-left-style: dashed; font-style: italic; }
.fact.hyp { border-left-style: dotted; font-style: italic; color: var(--ink-2); }

@media (max-width: 860px) {
  .brand { display: none; }
  .nav { order: 2; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav a { white-space: nowrap; }
  .tools { margin-left: 0; width: 100%; }
  input[type=search] { flex: 1; width: auto; }
  .hero, .side { grid-template-columns: 1fr; }
  #heromap { height: 46vh; }
  h1 { font-size: 1.6rem; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500; background: var(--paper); border-top: 1px solid var(--line); }
  .tabbar a { flex: 1; text-align: center; font-size: .68rem; padding: .9em 0; text-decoration: none; min-height: 48px; }
  .tabbar a.on { font-weight: 800; }
  .card { top: 10vh; border-radius: 12px 12px 0 0; border-left: 0; border-top: 1px solid var(--line); width: 100%; }
  #map { height: calc(100vh - 300px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .top, .chips, .tabbar, .card .close, button { display: none !important; }
  body { background: #fff; padding: 0; }
  .frame { border: 0; overflow: visible; }
}
#heromap path.leaflet-interactive { opacity: 0; transition: opacity 1s ease-out; }
#heromap path.leaflet-interactive.grow { opacity: 1; }
/* светлая подложка рельефа в тёмной теме инвертируется, чтобы подписи и линии читались */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); } }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.pl.big { font-size: 17px; font-weight: 800; }
.frame { max-height: 78vh; }