/* Публичные страницы сайта. Та же «бумажная» палитра, что у базы данных. */
:root{
  --paper:#f4ecd8; --surface:#faf6ec; --surface-2:#f0e7d0;
  --ink:#232634; --ink-soft:#333849; --muted:#4f4b3c;
  --rule:#c9bfa9; --rule-soft:#ded3ba; --accent:#405270;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1e2130; --surface:#262a3b; --surface-2:#2e3346;
    --ink:#e8e2d4; --ink-soft:#d6d0c2; --muted:#a8a190;
    --rule:#3d4358; --rule-soft:#333849; --accent:#8aa2c4;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--accent)}

.top{background:var(--surface); border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem clamp(.9rem,2.4vw,1.6rem)}
.brand{display:flex; align-items:baseline; gap:.55rem; text-decoration:none; color:inherit}
.brand b{font-size:1.4rem; font-weight:700; letter-spacing:-.02em}
.brand span{font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted)}
nav{display:flex; gap:clamp(.7rem,1.4vw,1.25rem); flex-wrap:wrap; flex:1}
nav a{color:var(--ink-soft); text-decoration:none; font-size:.97rem; white-space:nowrap;
  padding-bottom:.2rem; border-bottom:2px solid transparent}
nav a:hover{color:var(--accent)}
nav a.on{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.switch{display:flex; border:1px solid var(--rule); border-radius:.3rem; overflow:hidden}
.switch a{padding:.3rem .6rem; font-size:.8rem; text-decoration:none;
  color:var(--muted); background:var(--surface)}
.switch a.on{background:var(--accent); color:#fff}

main{max-width:88rem; margin:0 auto; padding:clamp(1.4rem,4vw,3rem) clamp(1.2rem,4vw,2.4rem) 5rem}
h1{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:700; letter-spacing:-.02em;
   margin:0 0 1rem; line-height:1.15; text-wrap:balance}
.prose{font-size:1.1rem}
.prose h2{font-size:1.45rem; margin:2.2rem 0 .7rem; letter-spacing:-.01em; text-wrap:balance}
.prose h3{font-size:1.2rem; margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.5rem}
.prose li{margin-bottom:.4rem}
.prose blockquote{margin:1.4rem 0; padding:.4rem 0 .4rem 1.2rem;
  border-left:3px solid var(--rule); color:var(--ink-soft); font-style:italic}
.prose img{max-width:100%; height:auto; border-radius:.4rem}
.prose figure{margin:1.6rem 0}
.prose figcaption{font-size:.9rem; color:var(--muted); margin-top:.4rem}
.prose table{border-collapse:collapse; width:100%; font-size:.95rem; margin:1.4rem 0}
.prose th,.prose td{padding:.45rem .7rem; border-bottom:1px solid var(--rule-soft); text-align:left}
.prose thead th{background:var(--surface-2)}
.prose a{text-decoration:underline; text-underline-offset:2px}

.meta{color:var(--muted); font-size:.92rem; margin:0 0 1.2rem}
.lead-big{font-size:1.2rem; color:var(--ink-soft); margin-bottom:1.6rem}
.back{margin:0 0 1.2rem; font-size:.95rem}
.empty{color:var(--muted); font-style:italic}

.items{display:flex; flex-direction:column; gap:1.6rem}
.item{padding-bottom:1.4rem; border-bottom:1px solid var(--rule-soft)}
.item a{text-decoration:none; color:inherit}
.item h2{font-size:1.35rem; margin:0 0 .3rem; letter-spacing:-.01em}
.item a:hover h2{color:var(--accent)}
.item .lead{color:var(--ink-soft); margin:.4rem 0 0; font-size:1.02rem}

.tag{display:inline-block; font-size:.75rem; padding:.12rem .45rem; border-radius:.25rem;
  border:1px solid var(--rule); color:var(--muted); vertical-align:middle; margin-left:.4rem}
.tag.draft{border-color:#a8822c; color:#8a6a1f}
@media (prefers-color-scheme:dark){ .tag.draft{border-color:#d0a94b; color:#d0a94b} }

.draft-note{background:var(--surface); border:1px solid #a8822c; border-radius:.4rem;
  padding:.7rem 1rem; margin-bottom:1.6rem; font-size:.95rem; color:var(--ink-soft)}
.admbar{position:fixed; bottom:0; left:0; right:0; background:var(--surface);
  border-top:1px solid var(--rule); padding:.5rem 1rem; font-size:.88rem; color:var(--muted)}

/* ── блок «Скачать» под статьёй ── */
.downloads{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--rule)}
.downloads h2{font-size:1.15rem; margin:0 0 .8rem}
.dl{display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem; margin-bottom:.5rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:.4rem;
  text-decoration:none; color:inherit}
.dl:hover{border-color:var(--accent)}
.dl-i{font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--surface);
  background:var(--accent); padding:.3rem .45rem; border-radius:.25rem; min-width:3.1rem;
  text-align:center}
.dl-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dl-s{color:var(--muted); font-size:.88rem; white-space:nowrap}

/* ── главная: эмблема слева, текст обтекает её по контуру ── */
/* Текст обтекает эмблему, а не стоит рядом столбиком: иначе под картинкой
   остаётся пустая полоса во всю высоту. Обтекание прямоугольное — по контуру
   пирамиды левый край строк получается рваным и читается как небрежность. */
.home-eye{float:left; height:auto; width:clamp(16rem,30vw,26rem);
  margin:2.6rem 2.6rem 1.4rem calc(-1 * clamp(1rem,3.4vw,2.6rem))}
.home .prose{font-size:1.14rem}
.home h2:first-child{margin-top:0}
@media (max-width:720px){
  .home-eye{float:none; display:block; width:min(21rem,74vw); margin:0 auto 1.4rem;
    shape-outside:none}
}

/* ── методика: оглавление по разделам ── */
.mth{margin-top:2.4rem}
.mth h2{font-size:1.3rem; margin:0 0 .9rem; padding-bottom:.35rem;
  border-bottom:1px solid var(--rule)}
.mth-grid{display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr))}
.mth-card{display:flex; flex-direction:column; gap:.3rem; padding:.85rem 1rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:.4rem;
  text-decoration:none; color:inherit}
.mth-card:hover{border-color:var(--accent)}
.mth-name{font-size:1.02rem; line-height:1.3}
.mth-meta{font-size:.86rem; color:var(--muted); font-variant-numeric:tabular-nums}
.mth-tags{display:flex; gap:.35rem; flex-wrap:wrap}
.mth-tags .tag{display:inline-block; font-size:.74rem; padding:.08rem .4rem;
  border:1px solid var(--rule); border-radius:.25rem; color:var(--muted)}
.mth-tags .tag.muted{border-style:dashed}

/* ── методика: карточка показателя ── */
.lead-big{font-size:1.15rem; color:var(--ink-soft); margin:0 0 1.4rem}
.facts{display:grid; gap:.1rem .6rem; margin:0 0 1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.facts div{padding:.55rem .75rem; background:var(--surface);
  border:1px solid var(--rule-soft); border-radius:.35rem}
.facts dt{font-size:.8rem; color:var(--muted); margin:0}
.facts dd{margin:.15rem 0 0; font-size:1.05rem; font-variant-numeric:tabular-nums}
.btn-look{display:inline-block; padding:.5rem .9rem; border-radius:.35rem;
  background:var(--accent); color:var(--surface); text-decoration:none; font-size:.98rem}
.crumbs{color:var(--muted); font-size:.95rem; margin:0 0 .6rem}
.crumbs a{color:var(--muted)}

/* ── поиск ── */
.topsearch{margin-left:auto}
.topsearch input{font:inherit; font-size:.92rem; width:min(11rem,22vw);
  padding:.32rem .6rem; border:1px solid var(--rule); border-radius:.3rem;
  background:var(--paper); color:var(--ink)}
.topsearch input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* На телефоне раскладываем шапку по трём понятным строкам:
   название и языки, меню, поиск. Иначе меню рвётся на четыре строки,
   а переключатель языков уезжает к правому краю. */
@media (max-width:720px){
  .top{gap:.45rem .8rem; padding:.6rem .9rem}
  .brand{flex:0 1 auto; min-width:0}
  .switch{order:1; flex:0 0 auto; margin-left:auto}
  nav{order:2; flex:1 0 100%; gap:.5rem .95rem; margin-top:.1rem}
  .topsearch{order:3; flex:1 0 100%; margin-left:0}
  .topsearch input{width:100%}
}
.bigsearch{display:flex; gap:.5rem; margin:0 0 .8rem; max-width:44rem; flex-wrap:wrap}
.bigsearch input{flex:1 1 11rem; min-width:0; font:inherit; font-size:1.05rem; padding:.5rem .75rem;
  border:1px solid var(--rule); border-radius:.35rem; background:var(--surface); color:var(--ink)}
.bigsearch button{font:inherit; font-size:1rem; padding:.5rem 1.1rem; cursor:pointer;
  border:1px solid var(--accent); border-radius:.35rem; background:var(--accent); color:var(--surface)}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip-l{display:inline-flex; gap:.45rem; align-items:baseline; padding:.35rem .65rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:.3rem;
  text-decoration:none; color:inherit; font-size:.98rem}
.chip-l:hover{border-color:var(--accent)}
.chip-l .mono{color:var(--muted); font-size:.82rem}
.found{display:flex; flex-direction:column; gap:.5rem}
.found-row{display:flex; flex-direction:column; gap:.2rem; padding:.75rem .9rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:.4rem;
  text-decoration:none; color:inherit}
.found-row:hover{border-color:var(--accent)}
.found-title{font-size:1.05rem}
.found-lead{color:var(--ink-soft); font-size:.94rem}
.found-kind{color:var(--muted); font-size:.84rem}
.mth-cell{display:flex; flex-direction:column; gap:.3rem}
.mth-write{align-self:flex-start; font-size:.85rem; color:var(--accent);
  text-decoration:none; border-bottom:1px dashed currentColor}
.editbar{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  margin:1.2rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule-soft)}
.btn-edit{display:inline-block; padding:.4rem .8rem; border-radius:.35rem;
  border:1px solid var(--accent); color:var(--accent);
  text-decoration:none; font-size:.95rem; white-space:nowrap}
.btn-edit:hover{background:var(--accent); color:var(--surface)}

/* ── подвал: справочные страницы ── */
.bottom{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:baseline;
  padding:1.1rem clamp(.9rem,2.4vw,1.6rem); margin-top:2rem;
  border-top:1px solid var(--rule); background:var(--surface); font-size:.94rem}
.bottom a{color:var(--ink-soft); text-decoration:none}
.bottom a:hover, .bottom a.on{color:var(--accent)}
.bottom .sub{margin-left:auto; color:var(--muted); font-size:.86rem}
main.wide + .bottom{margin-top:0}
.brand.on b{border-bottom:2px solid var(--accent); padding-bottom:.1rem}

/* Шесть пунктов меню, поиск и переключатель языков в одну строку помещаются
   не всегда. Первой уступает подпись у названия: она украшение, а меню — нет. */
@media (max-width:1320px){ .brand span{display:none} }
@media (max-width:1080px){ .topsearch input{width:8.5rem} nav a{font-size:.94rem} }

/* Кнопка правки текущей страницы — видна только вошедшим. Нижней полоски
   мало: её не замечают, а найти нужный текст в админке по названию — лишний шаг. */
.pageedit{float:right; margin:.1rem 0 .6rem 1rem; padding:.32rem .7rem;
  font-size:.9rem; text-decoration:none; white-space:nowrap;
  color:var(--accent); background:var(--surface);
  border:1px solid var(--rule); border-radius:.35rem}
.pageedit:hover{border-color:var(--accent); background:var(--accent); color:var(--surface)}
@media (max-width:520px){ .pageedit{float:none; display:inline-block; margin-left:0} }

/* ---------- глубина рядов на странице методики ---------- */
.mth.early .early-note{max-width:52rem; margin:0 0 .9rem; color:var(--ink-soft)}
.early-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.3rem .9rem; grid-template-columns:repeat(auto-fill, minmax(min(17rem,100%),1fr));
}
.early-list li{
  display:flex; justify-content:space-between; gap:.6rem;
  padding:.28rem 0; border-bottom:1px dotted var(--rule-soft); font-size:.94rem;
}
.early-list b{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-soft); white-space:nowrap}