/* ============================================================
   Фольклористическое наследие А.М. Листопадова
   Стиль «бумага · чернила · кумач» (по дизайн-макету)
   Шрифты: Old Standard TT + Source Serif 4 (локально, см. fonts/fonts.css)
   ============================================================ */

/* ============ Токены: бумага · чернила · кумач ============ */
:root{
  --paper:      oklch(95.6% 0.012 85);   /* #f5f2ef */
  --paper-warm: oklch(93.2% 0.02 85);
  --ink:        oklch(24.5% 0.015 70);   /* #1a1a1a */
  --ink-2:      oklch(36% 0.02 70);
  --ink-3:      oklch(50% 0.02 70);      /* приглушённый текст */
  --red:        oklch(60% 0.185 22);     /* #db3356 — акцент */
  --red-deep:   oklch(47% 0.145 22);     /* #a52a44 — красный мелкий текст */
  --line:       oklch(24.5% 0.015 70 / .16);
  --water:      oklch(90% 0.025 205);
  --font-display:"Old Standard TT", "PT Serif", serif;
  --font-body:"Source Serif 4", "PT Serif", Georgia, serif;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.62;
  min-height:100dvh;
}
::selection{background:var(--red); color:var(--paper)}
h1,h2,h3,h4,.display{font-family:var(--font-display); font-weight:700; line-height:1.12; letter-spacing:.015em; margin:0 0 var(--space-4)}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}
h3{font-size:1.25rem}
h4{font-size:1.0625rem}
p{margin:0 0 var(--space-4); max-width:68ch}
a{color:var(--red-deep); text-underline-offset:.18em}
a:hover{color:var(--ink)}
a:focus-visible{outline:3px solid var(--red); outline-offset:2px; border-radius:2px}
img,svg{max-width:100%}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:var(--space-3) var(--space-4); z-index:60}
.skip:focus{left:0}

/* ============ Верхняя плашка и шапка ============ */
.announce{background:var(--ink); color:var(--paper); text-align:center;
  font-family:var(--font-display); font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  padding:var(--space-2) var(--space-4)}
.announce b{color:var(--red); font-weight:700}
header.site{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:2px solid var(--ink)}
.bar{max-width:76.875rem; margin:0 auto; padding:var(--space-3) var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4)}
.wordmark{font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:var(--space-3)}
.wordmark:hover{color:var(--ink)}
.wordmark .mark{flex:none}
nav.main ul{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); list-style:none; margin:0; padding:0}
nav.main a{font-family:var(--font-display); font-size:.875rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:var(--space-2) 0; border-bottom:2px solid transparent}
nav.main a:hover{border-bottom-color:var(--red); color:var(--ink)}
nav.main a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav-toggle{display:none}
@media (max-width:52rem){
  nav.main{display:none}
  .nav-toggle{display:block; position:relative}
  .nav-toggle summary{list-style:none; cursor:pointer; font-family:var(--font-display); font-size:.875rem;
    letter-spacing:.09em; text-transform:uppercase; padding:var(--space-3) var(--space-4); border:1.5px solid var(--ink);
    min-height:2.75rem; display:flex; align-items:center; gap:var(--space-2)}
  .nav-toggle summary::-webkit-details-marker{display:none}
  .nav-toggle[open] summary{background:var(--ink); color:var(--paper)}
  .nav-toggle nav{position:absolute; right:0; top:calc(100% + 2px); background:var(--paper); border:2px solid var(--ink);
    min-width:16rem; padding:var(--space-4)}
  .nav-toggle nav a{display:block; padding:var(--space-3) var(--space-2); font-family:var(--font-display);
    font-size:.9375rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none;
    border-bottom:1px solid var(--line)}
  .nav-toggle nav a:hover{background:var(--paper-warm); color:var(--red-deep)}
}

/* ============ Орнамент-рубец ============ */
.ornament{border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:.3125rem 0}
.ornament svg{display:block; width:100%; height:1.125rem}

/* ============ Герой ============ */
.hero{max-width:76.875rem; margin:0 auto; padding:var(--space-16) var(--space-4) var(--space-12)}
.hero .eyebrow{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 var(--space-6)}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.75rem); max-width:22ch; margin-bottom:var(--space-6)}
.hero h1 .accent{color:var(--red-deep)}
.hero .ornament{max-width:26rem; margin:0 0 var(--space-8)}
.lede{font-size:1.1875rem; max-width:60ch; margin-bottom:var(--space-8)}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-16)}
.btn{font-family:var(--font-display); font-size:.9375rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; padding:var(--space-4) var(--space-6); min-height:3rem; display:inline-flex; align-items:center;
  border:2px solid var(--ink); border-radius:.25rem; cursor:pointer; background:var(--paper); color:var(--ink);
  transition:background .25s ease-out, color .25s ease-out}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--paper); color:var(--ink)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--space-8);
  border-top:2px solid var(--ink); padding-top:var(--space-6)}
.stats b{display:block; font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.5rem); font-weight:700; line-height:1.1}
.stats b .accent{color:var(--red)}
.stats span{font-size:.9375rem; color:var(--ink-3)}

/* ============ Секции и контейнер страницы ============ */
section{max-width:76.875rem; margin:0 auto; padding:var(--space-16) var(--space-4) var(--space-8)}
.page{max-width:76.875rem; margin:0 auto; padding:var(--space-12) var(--space-4) var(--space-16)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-6);
  flex-wrap:wrap; margin-bottom:var(--space-8)}
.section-head .kicker,.kicker{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-deep); margin:0 0 var(--space-2)}
.rule-top{border-top:2px solid var(--ink); padding-top:var(--space-8)}
.lead{font-size:1.1875rem}
.meta{font-size:.875rem; color:var(--ink-3)}
.sig{font-family:var(--font-display); font-style:italic; color:var(--ink-2)}

/* ============ Карта ============ */
.map-grid{display:grid; gap:var(--space-8); grid-template-columns:1fr}
@media (min-width:60rem){ .map-grid{grid-template-columns:minmax(0,1fr) 20rem} }
.chips{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-6); padding:0; list-style:none}
.chips button{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.07em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); border:1.5px solid var(--ink); border-radius:6.25rem;
  padding:var(--space-2) var(--space-4); min-height:2.75rem; cursor:pointer;
  transition:background .2s ease-out, color .2s ease-out}
.chips button:hover{background:var(--paper-warm)}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.chips a{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.07em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); border-radius:6.25rem;
  padding:var(--space-2) var(--space-4); min-height:2.75rem; display:inline-flex; align-items:center;
  transition:background .2s ease-out, color .2s ease-out}
.chips a:hover{background:var(--paper-warm)}
.chips a[aria-current="page"]{background:var(--ink); color:var(--paper)}
.map-frame{border:2px solid var(--ink); background:var(--paper-warm); padding:var(--space-3)}
.map-frame #map{height:min(72vh,640px); width:100%}
.map-frame .leaflet-container{font-family:var(--font-body)}
.map-note{font-size:.875rem; color:var(--ink-3); margin-top:var(--space-3)}
.info-panel{border-top:2px solid var(--ink); padding-top:var(--space-6); align-self:start}
.info-panel h3{margin-bottom:var(--space-2)}
.info-panel dl{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); margin:var(--space-4) 0; font-size:.9375rem}
.info-panel dt{font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:.2em}
.info-panel dd{margin:0}
.legend{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-6); margin-top:var(--space-6); font-size:.875rem; color:var(--ink-2)}
.legend svg{vertical-align:-.35em; margin-right:var(--space-2)}
.plain-list{list-style:none; margin:var(--space-4) 0 0; padding:0; column-gap:var(--space-6)}
.plain-list li{margin-bottom:var(--space-2); break-inside:avoid}
.leaflet-container a{color:var(--red-deep)}
.leaflet-bar a{color:var(--ink) !important}

/* ============ Фильтр (форма выбора года) ============ */
.filter-form{display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-4); margin:0}
.filter-form label{display:block; font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--space-2)}
.filter-form select{font-family:var(--font-body); font-size:1rem; padding:var(--space-3) var(--space-4);
  min-height:3rem; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:.25rem}

/* ============ Хроника ============ */
.timeline{display:flex; gap:var(--space-6); overflow-x:auto; padding-bottom:var(--space-4);
  scroll-snap-type:x proximity; scrollbar-width:thin}
.timeline article{flex:0 0 15.5rem; scroll-snap-align:start; border-top:2px solid var(--ink); padding-top:var(--space-4)}
.timeline .years{font-family:var(--font-display); font-weight:700; font-size:1.375rem; letter-spacing:.02em}
.timeline .years .accent{color:var(--red-deep)}
.timeline p{font-size:.9375rem; color:var(--ink-2); margin:var(--space-2) 0 0}

/* ============ Таблицы (каталог песен и справочники) ============ */
.table-wrap{overflow-x:auto; border:2px solid var(--ink); margin-bottom:var(--space-8)}
table.songs{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:38rem}
table.songs caption{caption-side:top; text-align:left; font-family:var(--font-display); font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:var(--space-3) var(--space-4)}
table.songs th{font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:left; padding:var(--space-3) var(--space-4); border-bottom:2px solid var(--ink)}
table.songs td{padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line); vertical-align:top}
table.songs tbody tr:hover{background:var(--paper-warm)}
table.songs .song-title{font-family:var(--font-display); font-weight:700}
.tag{display:inline-block; font-family:var(--font-display); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--red-deep); color:var(--red-deep); border-radius:6.25rem; padding:.125rem .625rem; white-space:nowrap}

/* ============ Переключатель томов ============ */
.tabs{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-8); padding:0; list-style:none}
.tabs a{font-family:var(--font-display); font-size:.8125rem; letter-spacing:.07em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); border-radius:6.25rem;
  padding:var(--space-2) var(--space-4); min-height:2.75rem; display:inline-flex; align-items:center;
  transition:background .2s ease-out, color .2s ease-out}
.tabs a:hover{background:var(--paper-warm)}
.tabs a[aria-current="page"]{background:var(--ink); color:var(--paper)}

/* ============ Биография / портрет ============ */
.bio-grid{display:grid; gap:var(--space-8); grid-template-columns:1fr}
@media (min-width:56rem){ .bio-grid{grid-template-columns:1fr 1fr} }
.portrait-frame{border:2px solid var(--ink); background:var(--paper-warm); padding:var(--space-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center}
.portrait-frame .dates{font-family:var(--font-display); font-size:1.125rem; letter-spacing:.12em}
.portrait-frame .caption{font-size:.875rem; color:var(--ink-3)}

/* ============ Статьи ============ */
.articles{list-style:none; margin:0; padding:0}
.articles li{display:grid; gap:var(--space-2) var(--space-8); border-top:2px solid var(--ink);
  padding:var(--space-6) 0; grid-template-columns:1fr}
@media (min-width:48rem){ .articles li{grid-template-columns:9.5rem 1fr auto} }
.articles time{font-family:var(--font-display); font-size:.9375rem; letter-spacing:.06em; color:var(--ink-3)}
.articles h3{margin:0}
.articles h3 a{color:var(--ink); text-decoration:none; border-bottom:2px solid transparent}
.articles h3 a:hover{color:var(--red-deep); border-bottom-color:var(--red)}
.articles p{margin:0; color:var(--ink-2); font-size:.9375rem}
.articles .tag{align-self:start; justify-self:end}

/* ============ Текст статьи ============ */
.prose{font-size:1.0625rem; max-width:72ch}
.prose p{margin:0 0 var(--space-4)}
.prose img{max-width:100%; height:auto; border:2px solid var(--ink)}
.prose h2,.prose h3{margin-top:var(--space-8)}

/* ============ Страница песни ============ */
.notes{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); margin:var(--space-6) 0 var(--space-8)}
.notes a{display:block; border:2px solid var(--ink); background:var(--paper-warm); padding:var(--space-2)}
.notes img{display:block; width:100%; height:14rem; object-fit:contain}

/* ============ Поиск ============ */
.search-form{margin-bottom:var(--space-8)}
.search-form input{font-family:var(--font-body); font-size:1.0625rem; padding:var(--space-4) var(--space-4);
  min-height:3.25rem; width:100%; max-width:44rem; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:.25rem}

/* ============ Навигация по страницам (сканы) ============ */
.pager{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:var(--space-8) 0 0; padding:0}
.pager a{font-family:var(--font-display); font-size:.9375rem; text-decoration:none; padding:var(--space-2) var(--space-4);
  min-height:2.75rem; display:inline-flex; align-items:center; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink)}
.pager a:hover{background:var(--ink); color:var(--paper)}
.pager a[aria-current="page"]{background:var(--ink); color:var(--paper)}
.scan-page{display:block; max-height:80vh; width:auto; max-width:100%; border:2px solid var(--ink); margin:0 auto var(--space-8)}

/* ============ О проекте / подвал ============ */
footer.site{background:var(--ink); color:var(--paper); margin-top:var(--space-16)}
footer.site .inner{max-width:76.875rem; margin:0 auto; padding:var(--space-16) var(--space-4) var(--space-8)}
footer.site h2{color:var(--paper)}
footer.site p{color:oklch(95.6% 0.012 85 / .85)}
footer.site a{color:var(--paper); text-decoration-color:var(--red)}
footer.site a:hover{color:var(--red)}
footer.site .kicker{color:var(--red)}
.foot-grid{display:grid; gap:var(--space-8); grid-template-columns:1fr}
@media (min-width:48rem){ .foot-grid{grid-template-columns:1.4fr 1fr} }
.foot-grid dt{color:oklch(95.6% 0.012 85 / .6)}
.foot-grid dd{margin:0 0 var(--space-3)}
footer.site dl{display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-4); margin:var(--space-4) 0; font-size:.9375rem}
footer.site dt{font-family:var(--font-display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.2em}
footer.site nav ul{list-style:none; margin:0; padding:0}
footer.site nav li{margin-bottom:var(--space-2)}
footer.site nav a{color:var(--paper); text-decoration:none; font-family:var(--font-display); font-size:.9375rem;
  letter-spacing:.08em; text-transform:uppercase}
footer.site nav a:hover{color:var(--red)}
.colophon{border-top:1px solid oklch(95.6% 0.012 85 / .3); margin-top:var(--space-12); padding-top:var(--space-6);
  display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between;
  font-family:var(--font-display); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:oklch(95.6% 0.012 85 / .75)}

/* ============ Партнёры ============ */
.partners{border-top:1px solid oklch(95.6% 0.012 85 / .3); margin-top:var(--space-12); padding-top:var(--space-6)}
.partners-row{display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-12); align-items:center}
.partners a{line-height:0; text-decoration:none}
.partners img{height:4.5rem; width:auto; opacity:.92; transition:opacity .2s ease-out}
.partners a:hover img{opacity:1}

/* ============ Появление ============ */
@keyframes fade-up{from{opacity:0; transform:translateY(.75rem) scale(.99)} to{opacity:1; transform:none}}
.fade-in{animation:fade-up .8s cubic-bezier(.25,.46,.45,.94) both}
.fade-in.d2{animation-delay:.12s}
.fade-in.d3{animation-delay:.24s}