/* Маршруты Декабристов — оформление.
   Палитра: бумага и сепия для светлой темы, ночной кабинет для тёмной. */
:root{
  --paper:#f6f1e7; --paper-2:#efe8da; --card:#fffdf8; --ink:#241f1b; --ink-2:#5b5147;
  --line:#ddd2bd; --line-2:#c9bda4;
  --accent:#8c2f2f;        /* декабристы */
  --accent-2:#6b3fa0;      /* жёны */
  --accent-3:#3d5a6c;      /* современники */
  --gold:#a6813a;
  --ok:#2e7d5b; --warn:#b3641b;
  --shadow:0 2px 10px rgba(60,45,25,.10), 0 12px 32px rgba(60,45,25,.07);
  --radius:12px; --radius-s:8px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"PT Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
}
[data-theme="dark"]{
  --paper:#17151a; --paper-2:#1e1b21; --card:#232027; --ink:#ece6dc; --ink-2:#a89f92;
  --line:#332e38; --line-2:#443d4a;
  --accent:#d9615f; --accent-2:#b18aec; --accent-3:#7aa6bd; --gold:#d5aa5e;
  --shadow:0 2px 10px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 15% 0%, rgba(166,129,58,.06), transparent 42%),
                   radial-gradient(circle at 85% 12%, rgba(140,47,47,.05), transparent 40%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.22; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.4vw,3rem)} h2{font-size:clamp(1.4rem,2.6vw,2rem)} h3{font-size:1.18rem}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit; color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.muted{color:var(--ink-2)} .small{font-size:.875rem} .tiny{font-size:.79rem}
.center{text-align:center}
.hidden{display:none !important}

/* ── шапка ────────────────────────────────────────────────────────────── */
header.top{
  position:sticky; top:0; z-index:900; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);
}
.top-in{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--ink); white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;flex:0 0 26px}
nav.main{display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  padding:7px 12px; border-radius:99px; color:var(--ink-2); font-size:.925rem; white-space:nowrap;
  transition:background .15s,color .15s
}
nav.main a:hover{background:var(--paper-2); color:var(--ink); text-decoration:none}
nav.main a.active{background:var(--accent); color:#fff}
.top-actions{display:flex; gap:6px; align-items:center}
.icon-btn{
  width:36px;height:36px; border:1px solid var(--line); background:var(--card); border-radius:99px;
  cursor:pointer; display:grid; place-items:center; font-size:1rem; transition:background .15s,border-color .15s
}
.icon-btn:hover{border-color:var(--line-2); background:var(--paper-2)}
.burger{display:none}

/* ── общие блоки ──────────────────────────────────────────────────────── */
.page{padding:28px 0 70px; animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.pad{padding:20px}
.grid{display:grid; gap:16px}
.section-title{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:34px 0 14px}
.section-title h2{margin:0}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px;
  background:var(--paper-2); border:1px solid var(--line); font-size:.78rem; color:var(--ink-2); white-space:nowrap
}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.role-w{border-color:var(--accent-2); color:var(--accent-2)}
.chip.role-d{border-color:var(--accent); color:var(--accent)}
.chip.role-c{border-color:var(--accent-3); color:var(--accent-3)}
button.chip{cursor:pointer}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:99px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:.93rem; transition:filter .15s
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.ghost:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-align:center}
.stat b{display:block; font-family:var(--serif); font-size:1.9rem; line-height:1.1; color:var(--accent)}
.stat span{font-size:.8rem; color:var(--ink-2)}

/* ── главная ──────────────────────────────────────────────────────────── */
.hero{padding:56px 0 30px; text-align:center}
.hero .kicker{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
.hero p.lead{max-width:720px; margin:0 auto 26px; font-size:1.09rem; color:var(--ink-2)}
.hero-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:30px}
.feature{padding:20px; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); transition:transform .18s, box-shadow .18s}
.feature:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none}
.feature .em{font-size:1.6rem; display:block; margin-bottom:8px}
.feature h3{margin:0 0 6px; color:var(--ink)} .feature p{margin:0; font-size:.9rem; color:var(--ink-2)}

/* ── карта ────────────────────────────────────────────────────────────── */
.map-layout{display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start}
@media (max-width:1000px){.map-layout{grid-template-columns:1fr}}
.map-panel{max-height:78vh; overflow:auto}
#map{height:78vh; min-height:460px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); z-index:1}
@media (max-width:1000px){#map{height:62vh}}
.hero-list{display:flex; flex-direction:column; gap:4px; max-height:340px; overflow:auto; padding-right:4px}
.hero-item{
  display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:var(--radius-s);
  cursor:pointer; border:1px solid transparent; font-size:.9rem; text-align:left; background:none; width:100%
}
.hero-item:hover{background:var(--paper-2)}
.hero-item.on{background:var(--paper-2); border-color:var(--line-2)}
.dot{width:11px;height:11px;border-radius:99px;flex:0 0 11px}
.timeline-ctl{display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap}
input[type=range]{flex:1; min-width:160px; accent-color:var(--accent)}
.year-badge{font-family:var(--serif); font-size:1.5rem; color:var(--accent); min-width:64px; text-align:center}
.legend{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.leaflet-popup-content-wrapper{border-radius:var(--radius-s)}
.pop h4{margin:0 0 4px; font-size:1.02rem}
.pop .note{font-size:.83rem; color:#555; margin:6px 0 0; max-height:120px; overflow:auto}
.pop ul{margin:6px 0 0; padding-left:16px; font-size:.85rem}
.route-badge{
  display:inline-block; padding:1px 7px; border-radius:99px; font-size:.72rem;
  background:rgba(0,0,0,.06); color:#333; margin-left:5px
}

/* ── люди ─────────────────────────────────────────────────────────────── */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.search{
  flex:1; min-width:200px; padding:9px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--card); outline:none
}
.search:focus{border-color:var(--accent)}
.people-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.person{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:transform .18s, box-shadow .18s; display:flex; flex-direction:column
}
.person:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.portrait{aspect-ratio:3/4; background:var(--paper-2); position:relative; overflow:hidden}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.portrait .ph{
  width:100%;height:100%; display:grid; place-items:center; font-family:var(--serif);
  font-size:2.6rem; color:var(--line-2); background:
   repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 9px, var(--paper) 9px, var(--paper) 18px)
}
.portrait .band{position:absolute; left:0; right:0; bottom:0; height:4px}
.person .body{padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; gap:5px}
.person h3{margin:0; font-size:1.03rem}
.person .yrs{font-size:.78rem; color:var(--ink-2)}
.person .sb{font-size:.83rem; color:var(--ink-2); margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* ── модальное окно персоны ───────────────────────────────────────────── */
.overlay{
  position:fixed; inset:0; background:rgba(20,15,10,.55); backdrop-filter:blur(3px);
  z-index:1000; display:grid; place-items:center; padding:20px; animation:fade .2s
}
.modal{
  background:var(--card); border-radius:var(--radius); max-width:920px; width:100%; max-height:88vh;
  overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.4); border:1px solid var(--line)
}
.modal-head{display:grid; grid-template-columns:180px 1fr; gap:20px; padding:22px}
@media (max-width:640px){.modal-head{grid-template-columns:1fr}}
.modal-head .portrait{border-radius:var(--radius-s); border:1px solid var(--line)}
.modal .close{position:sticky; top:8px; float:right; margin:8px 10px 0 0; z-index:2}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.87rem; margin:10px 0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0}
.route-line{display:flex; flex-direction:column; gap:0; margin:8px 0}
.route-step{display:grid; grid-template-columns:64px 18px 1fr; gap:10px; align-items:start; font-size:.88rem}
.route-step .yr{color:var(--ink-2); text-align:right; padding-top:1px}
.route-step .rail{position:relative; height:100%; min-height:30px}
.route-step .rail::before{content:""; position:absolute; left:50%; top:6px; bottom:-6px; width:2px; margin-left:-1px; background:var(--line)}
.route-step:last-child .rail::before{display:none}
.route-step .rail i{position:absolute; left:50%; top:4px; width:9px;height:9px;margin-left:-4.5px;border-radius:99px; display:block}
.route-step .txt{padding-bottom:12px}
.route-step .st{font-size:.76rem; color:var(--ink-2)}

/* ── хронология ───────────────────────────────────────────────────────── */
.tl{position:relative; margin-top:10px}
.tl::before{content:""; position:absolute; left:92px; top:6px; bottom:0; width:2px; background:var(--line)}
@media (max-width:700px){.tl::before{left:14px}}
.tl-item{display:grid; grid-template-columns:80px 26px 1fr; gap:12px; margin-bottom:6px; align-items:start}
@media (max-width:700px){.tl-item{grid-template-columns:0 30px 1fr}.tl-item .tl-year{display:none}}
.tl-year{font-family:var(--serif); font-size:1.25rem; text-align:right; color:var(--accent); padding-top:10px}
.tl-mark{position:relative; padding-top:18px}
.tl-mark i{width:13px;height:13px;border-radius:99px;background:var(--card); border:3px solid var(--accent); display:block; margin:0 auto; position:relative; z-index:2}
.tl-body{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; cursor:pointer; transition:box-shadow .15s, transform .15s}
.tl-body:hover{box-shadow:var(--shadow); transform:translateX(2px)}
.tl-body h3{margin:0 0 4px; font-size:1.05rem}
.tl-body p{margin:0; font-size:.9rem; color:var(--ink-2)}
.tl-body .meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}

/* ── граф связей ──────────────────────────────────────────────────────── */
#graph{width:100%; height:74vh; min-height:440px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); touch-action:none}
#graph text{font-size:9px; fill:var(--ink-2); pointer-events:none; font-family:var(--sans)}
#graph .lbl-big{font-size:11px; fill:var(--ink)}
#graph circle{cursor:pointer}
#graph .edge{stroke:var(--line-2); stroke-opacity:.55}
#graph .edge.hl{stroke:var(--accent); stroke-opacity:.95; stroke-width:2}

/* ── предметы ─────────────────────────────────────────────────────────── */
.subj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.contrib{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; border-left:4px solid var(--gold)}
.contrib h3{margin:0 0 3px; font-size:1.06rem}
.contrib .dom{font-size:.76rem; color:var(--gold); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px}
.contrib p{font-size:.9rem; margin:0 0 10px}
.contrib .q{
  background:var(--paper-2); border-radius:var(--radius-s); padding:10px 12px; font-size:.87rem;
  border-left:3px solid var(--accent-3); margin-top:10px
}
.contrib .q b{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin-bottom:3px}

/* ── культура ─────────────────────────────────────────────────────────── */
.cul-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px}
.cul{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:8px}
.cul .kind{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-2)}
.cul h3{margin:0; font-size:1.08rem}
.cul .auth{font-size:.84rem; color:var(--ink-2)}
.cul .why{font-size:.88rem; background:var(--paper-2); border-radius:var(--radius-s); padding:10px 12px; border-left:3px solid var(--accent-2)}
.cul .links{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px}

/* ── викторина ────────────────────────────────────────────────────────── */
.quiz{max-width:760px; margin:0 auto}
.q-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.q-opts{display:flex; flex-direction:column; gap:9px; margin:16px 0}
.q-opt{
  padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper);
  cursor:pointer; text-align:left; transition:border-color .15s, background .15s
}
.q-opt:hover:not(:disabled){border-color:var(--accent)}
.q-opt.right{border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%, transparent)}
.q-opt.wrong{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent)}
.q-expl{background:var(--paper-2); border-radius:var(--radius-s); padding:12px 14px; font-size:.9rem; margin-top:12px}
.progress{height:5px; background:var(--paper-2); border-radius:99px; overflow:hidden; margin-bottom:18px}
.progress i{display:block; height:100%; background:var(--accent); transition:width .3s}

/* ── подвал ───────────────────────────────────────────────────────────── */
footer.bottom{border-top:1px solid var(--line); padding:34px 0; margin-top:40px; font-size:.88rem; color:var(--ink-2)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px}
footer.bottom h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:8px}
footer.bottom a{color:var(--ink-2); display:block; padding:2px 0}
footer.bottom a:hover{color:var(--accent)}

/* ── прочее ───────────────────────────────────────────────────────────── */
.prose{max-width:760px} .prose h2{margin-top:1.6em} .prose ul{padding-left:20px}
.prose li{margin-bottom:.45em}
.loading{padding:80px 20px; text-align:center; color:var(--ink-2)}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:99px;animation:sp .8s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:820px){
  nav.main{position:fixed; left:0; right:0; top:62px; flex-direction:column; background:var(--card);
    border-bottom:1px solid var(--line); padding:8px; display:none; box-shadow:var(--shadow); max-height:70vh}
  nav.main.open{display:flex}
  .burger{display:grid}
}
@media print{header.top,footer.bottom,.toolbar{display:none}}

/* Тонировка подложки «под старую карту»: приглушаем цвет плиток OSM,
   маркеры и линии остаются яркими — фильтр применяется только к слою плиток. */
#map.aged .leaflet-tile-pane{filter:sepia(.42) saturate(.62) brightness(1.06) contrast(.92)}
[data-theme="dark"] #map.aged .leaflet-tile-pane{filter:invert(.9) hue-rotate(180deg) sepia(.22) saturate(.5) brightness(.92)}