:root{
  --paper:#f6f2e9; --paper2:#efe9db; --ink:#1c1a16; --ink2:#5c564a;
  --blue:#122e6b; --blue2:#1d3f8f; --red:#b5122e; --gold:#8a6c1f;
  --card:#fffdf7; --line:#d8d0bd; --ok:#2c6e3f; --bad:#a01c1c;
  --shadow:0 1px 2px rgba(28,26,22,.08),0 6px 18px rgba(28,26,22,.07);
  --serif:"Iowan Old Style","Charter","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",Verdana,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
  background-image:radial-gradient(rgba(28,26,22,.028) 1px,transparent 1px);background-size:22px 22px}
a{color:var(--blue2)}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px 80px}
header{padding:26px 0 0;text-align:center}
.tricolore{height:5px;display:flex;border-radius:3px;overflow:hidden;max-width:1060px;margin:0 auto}
.tricolore i{flex:1}.tricolore i:nth-child(1){background:var(--blue)}.tricolore i:nth-child(2){background:#fffdf7}.tricolore i:nth-child(3){background:var(--red)}
h1{font-family:var(--serif);font-size:clamp(30px,6vw,46px);letter-spacing:.06em;color:var(--blue);margin-top:18px}
h1 .lam{color:var(--red)}
.motto .ai{color:var(--red)}
.motto{font-family:var(--serif);font-style:italic;color:var(--ink2);font-size:14px;letter-spacing:.24em;text-transform:uppercase;margin:6px 0 4px}
.updated{font-size:12px;color:var(--ink2)}
nav{position:sticky;top:0;z-index:50;background:linear-gradient(var(--paper) 82%,rgba(246,242,233,0));padding:14px 0 10px;margin-top:14px}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tab{font-family:var(--serif);font-size:15px;letter-spacing:.04em;padding:9px 18px;border:1.5px solid var(--blue);
  border-radius:999px;background:var(--card);color:var(--blue);cursor:pointer;box-shadow:var(--shadow);transition:.18s}
.tab:hover{transform:translateY(-1px)}
.tab.on{background:var(--blue);color:#fdfbf4}
main section{display:none;animation:fade .35s ease}
main section.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 14px}
.bar input[type=search],.bar select{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);min-width:0}
.bar input[type=search]{flex:1 1 180px}
.chip{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink2);transition:.15s}
.chip.on{border-color:var(--red);color:var(--red);font-weight:600;background:#fdf3f0}
.count{font-size:12.5px;color:var(--ink2);margin-left:auto}
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.card.rA{border-left-color:var(--red)}
.card.rB{border-left-color:var(--blue2)}
.card.rC{border-left-color:var(--gold)}
.card.rD{border-left-color:var(--line)}
.q{font-family:var(--serif);font-size:18.5px;line-height:1.35;color:var(--ink)}
.meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px;font-size:11.5px;color:var(--ink2)}
.badge{font-weight:700;font-size:11px;letter-spacing:.08em;border-radius:5px;padding:2.5px 7px;border:1.2px solid}
.bA{color:var(--red);border-color:var(--red)} .bB{color:var(--blue2);border-color:var(--blue2)}
.bC{color:var(--gold);border-color:var(--gold)} .bD{color:var(--ink2);border-color:var(--line)}
.upd{font-weight:700;font-size:10.5px;letter-spacing:.04em;color:#1f6b3a;background:#e6f4ea;border:1px solid #a9d3b6;border-radius:5px;padding:2.5px 7px;white-space:nowrap}
.m{background:var(--paper2);border-radius:5px;padding:2.5px 8px;white-space:nowrap;max-width:100%;overflow-wrap:anywhere}
/* перечень префектур бывает длиннее узкого экрана: на 320px строка «Lyon / Rhône (69)·5, …»
   выпирала за край и давала горизонтальную прокрутку всей странице */
@media (max-width:380px){.m{white-space:normal}}
.m b{color:var(--ink)}
.srcs a{font-size:11px;text-decoration:none;background:#eef1f8;border:1px solid #ccd4e8;color:var(--blue2);border-radius:5px;padding:2.5px 7px;margin-right:4px}
.ans{margin-top:11px;border-top:1px dashed var(--line);padding-top:10px}
.ans h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.ans .alt{margin-top:7px}
.ans .alt-lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.ans .alt ul{margin:3px 0 0 0;padding:0;list-style:none}
.ans .alt li{position:relative;padding-left:14px;margin-top:4px;color:var(--ink2);font-size:14px}
.ans .alt li:before{content:"·";position:absolute;left:4px;color:var(--gold);font-weight:700}
.jbox{margin-top:11px;border-top:1px dashed var(--line);padding-top:10px}
.jrow{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:start;margin-bottom:8px}
.jlab{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue2);padding-top:3px;font-weight:600}
.jrow.warn .jlab{color:var(--red)}
.jrow.warn .jtxt{background:#fdf3f0;border-left:2px solid var(--red);padding:5px 9px;border-radius:0 6px 6px 0}
.jtxt{font-size:14px;line-height:1.5}
.jsrc{font-size:11.5px;color:var(--ink2);font-style:italic;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
@media(max-width:640px){.jrow{grid-template-columns:1fr;gap:2px}.jlab{padding-top:0}}
.ans .empty{color:var(--ink2);font-style:italic;font-size:13px}
.maj{display:inline-block;font-size:10.5px;letter-spacing:.04em;color:#8a4a00;background:#fdf2e2;border:1px solid #e8cfa8;border-radius:5px;padding:2px 7px;margin-bottom:6px}
.jus{margin-top:8px}
.jus h4{color:var(--blue2)}
/* --- предгенерированные страницы: вопрос, тема, особенности, справочник ---
   Живут в общей таблице стилей: у них та же типографика и те же карточки, а
   вторая таблица разъехалась бы с первой на первой же правке. */
.subhead{padding:18px 0 6px;text-align:center}
.brandlink{font-family:var(--serif);font-size:clamp(21px,4vw,28px);letter-spacing:.06em;
  color:var(--blue);text-decoration:none;display:inline-block}
.brandlink .lam{color:var(--red)}
.crumbs{margin-top:10px;font-size:13.5px;color:var(--ink2)}
.crumbs a{color:var(--blue2)}
.crumb-sep{margin:0 7px;color:var(--line)}
.qlink{display:block;text-decoration:none;color:inherit}
.qlink:hover{text-decoration:underline;text-decoration-color:var(--line)}
.qpage{margin-top:6px}
.qpage h1.q{font-size:clamp(20px,3.6vw,26px);margin:0 0 10px}
.related{margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.related h2{font-family:var(--serif);font-size:16px;color:var(--blue);margin:0 0 8px}
.related ul,.catlist{list-style:none;padding:0;margin:0}
.related li,.catrow{padding:7px 0;border-bottom:1px dotted var(--line)}
.catrow{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.backlink{margin:22px 0 6px;font-size:14.5px}
/* страницы раздела «Справочник» из content/ и вкладка t4: абзацы, списки, цитата, таблица.
   Общий сброс *{margin:0;padding:0} снимает у списков отступ под маркер —
   без padding-left цифры «1.» висят за краем текста, а на телефоне за краем экрана. */
.cbody{font-size:14.5px}
.cbody p{margin:0 0 8px}
.cbody ul,.cbody ol{margin:0 0 10px;padding-left:22px}
.cbody li{margin:4px 0}
.cbody h3{font-family:var(--serif);font-size:16px;line-height:1.35;color:var(--blue);margin:16px 0 6px}
.cbody blockquote{margin:4px 0 12px;padding:8px 14px;border-left:3px solid var(--gold);background:var(--paper2);border-radius:0 8px 8px 0}
.cbody blockquote p{margin:4px 0}
.cbody a{overflow-wrap:anywhere}
.tscroll{overflow-x:auto;margin:4px 0 12px}
.cbody table{border-collapse:collapse;font-size:14px;min-width:100%}
.cbody th,.cbody td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.cbody th{background:var(--paper2);font-weight:600}
.changes-list{margin:0;padding-left:18px}
.changes-list li{margin:5px 0}
.changes-list time{color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-title{font-family:var(--serif);font-size:clamp(19px,3.4vw,23px);line-height:1.28;color:var(--blue);margin:2px 0 14px;font-weight:600}
.sec-title{font-family:var(--serif);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:20px 0 10px;border-bottom:1px solid var(--line);padding-bottom:5px}
.p-text{margin-top:8px;font-size:14.5px;white-space:pre-wrap}
/* trainer */
.arena{max-width:640px;margin:22px auto 0}
.scorebar{display:flex;justify-content:center;gap:14px;margin-bottom:16px;font-size:13px;color:var(--ink2)}
.scorebar b{font-size:18px;color:var(--blue);font-family:var(--serif)}
.tq{font-family:var(--serif);font-size:22px;line-height:1.4;text-align:center;margin:6px 0 4px}
.tmeta{text-align:center;font-size:12px;color:var(--ink2);margin-bottom:14px}
.opt{display:block;width:100%;text-align:left;font:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:9px;cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--blue2)}
.opt.pick{border-color:var(--blue);background:#eef1f8}
.opt.good{border-color:var(--ok);background:#eaf4ec}
.opt.badx{border-color:var(--bad);background:#f9ecec}
.btnrow{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.btn{font:inherit;font-weight:600;padding:10px 22px;border-radius:999px;border:1.5px solid var(--blue);background:var(--blue);color:#fdfbf4;cursor:pointer;box-shadow:var(--shadow)}
.btn.ghost{background:var(--card);color:var(--blue)}
.btn.okb{border-color:var(--ok);background:var(--ok)}
.btn.badb{border-color:var(--bad);background:var(--bad)}
.reveal{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-top:14px;box-shadow:var(--shadow)}
.verdict{text-align:center;font-family:var(--serif);font-size:17px;margin-top:12px}
.verdict.g{color:var(--ok)} .verdict.b{color:var(--bad)}
footer{margin-top:44px;text-align:center;font-size:11.5px;color:var(--ink2)}
@media(max-width:640px){
  .wrap{padding:0 10px 70px}
  .card{padding:13px 13px 13px 15px}
  .q{font-size:16.5px}
  .tab{font-size:13.5px;padding:8px 13px}
  .m{font-size:10.5px}
}

/* отзывы посетителей */
.revs{display:grid;gap:14px}
.rev{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
 border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.rev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rev-stars{color:var(--gold);letter-spacing:.08em;font-size:15px}
.rev-who{font-weight:600;color:var(--blue);font-size:14px}
.rev-meta{font-size:12.5px;color:var(--ink2)}
.rev-text{font-size:14.5px;line-height:1.6;white-space:pre-wrap}
.rev-empty{text-align:center;padding:38px 20px;color:var(--ink2)}
.rev-empty b{display:block;font-family:var(--serif);font-size:19px;color:var(--blue);margin-bottom:8px}
.rev-empty a{color:var(--blue);font-weight:600}

/* подзаголовок и счётчики в шапке */
.subtitle{font-family:var(--serif);font-size:15.5px;font-style:italic;color:var(--ink2);
 margin:10px auto 14px;max-width:30rem;line-height:1.5;text-wrap:balance;padding:0 4px}
@media (max-width:560px){.subtitle{font-size:14px;max-width:22rem}}
.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 4px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
 min-width:92px;max-width:100%;box-shadow:var(--shadow);overflow:hidden}
.stat b{display:block;font-family:var(--serif);font-size:21px;color:var(--blue);line-height:1.1}
.stat span{display:block;font-size:10px;letter-spacing:.03em;text-transform:uppercase;
 color:var(--ink2);margin-top:4px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.stat.upd b{font-size:15px;padding-top:4px}
@media (max-width:560px){
  .stats{gap:6px}
  /* две колонки вместо четырёх: подписи вроде «свидетельства очевидцев»
     в узкую плашку не помещаются и вылезали за рамку */
  .stat{padding:7px 8px;min-width:0;flex:1 1 calc(50% - 6px);max-width:calc(50% - 3px)}
  .stat b{font-size:17px}
  .stat.upd b{font-size:12.5px}
  .stat span{font-size:9px;letter-spacing:0}
}

/* блок источников: их бывает и одна, и семьдесят — поэтому свёрнут */
.srcbox{display:inline-block;vertical-align:middle}
.srcbox>summary{cursor:pointer;list-style:none;font-size:11.5px;color:var(--blue);
 background:var(--paper2);border:1px solid var(--line);border-radius:5px;padding:2.5px 9px;
 display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.srcbox>summary::-webkit-details-marker{display:none}
.srcbox>summary::after{content:"▾";font-size:9px;opacity:.7}
.srcbox[open]>summary::after{content:"▴"}
.srcbox>summary:hover{border-color:var(--blue2);background:var(--card)}
.srcbox ul{margin:8px 0 2px;padding:0 0 0 16px;max-height:190px;overflow-y:auto}
.srcbox li{font-size:12px;margin:0 0 4px;word-break:break-word}
.srcbox a{color:var(--blue2)}
.m.dim{opacity:.6}

/* девиз: на узком экране ужимаем до одной строки, а не переносим */
@media (max-width:560px){
  .motto{font-size:11.5px;letter-spacing:.12em;white-space:nowrap;
   transform:scale(.94);transform-origin:center}
}
@media (max-width:380px){
  .motto{font-size:10px;letter-spacing:.06em}
}

/* --- утилитарные классы вместо инлайновых style=: строгий CSP на своём домене
   запрещает style-src 'unsafe-inline', а значит и атрибуты style в разметке.
   Блок идёт последним, чтобы перебивать одноимённые свойства компонентов. --- */
.u-center{justify-content:center}
.u-g14{gap:14px}
.u-m0{margin:0}
.u-mt6{margin-top:6px}
.u-mt8{margin-top:8px}
.u-mt10{margin-top:10px}
.u-mt12{margin-top:12px}
.u-mt14{margin-top:14px}
.u-ml-auto{margin-left:auto}
.u-mw260{max-width:260px;margin:18px auto 0}
.u-mw290{max-width:290px}
.u-nolink{text-decoration:none}
.u-tac{text-align:center}
.u-fs165{font-size:16.5px}
.u-fs19{font-size:19px}
.u-fs21{font-size:21px;margin-top:6px}
.u-sub{color:var(--ink2);font-size:14px;margin-top:6px}
.u-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.u-blw5{border-left-width:5px}
.u-dim{opacity:.55}
.u-soft{opacity:.7;font-weight:400}
.u-grade{flex:1;min-width:80px;padding:11px 8px;font-size:13.5px}
.u-hidden{display:none}

.loaderr{max-width:36rem;margin:4rem auto;padding:1.5rem;border-radius:.75rem;
 background:#fff5f5;border:1px solid #f0c0c0;color:#7a1020;font:16px/1.5 system-ui,sans-serif;
 text-align:center}