/* ==========================================================================
   strahovanie — base.css: сброс, типографика, сетка, шапка, подвал.
   Порядок: tokens.css → base.css → components.css → page-*.css
   Плоско: теней, размытия и цветовых переходов нет. Медиазапросы — только 768 и 1200.
   ========================================================================== */

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font: var(--st-fw-regular) var(--st-fs-body)/var(--st-lh-body) var(--st-font-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, figure, dl, dd, blockquote { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { padding: 0; text-align: left; vertical-align: top; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

/* ---------- Типографика ---------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--st-font-heading);
  font-weight: var(--st-fw-regular);
  font-synthesis: none;
  letter-spacing: var(--st-ls-heading);
}
h1 { font-size: var(--st-fs-h1); line-height: var(--st-lh-h1); }
h2 { font-size: var(--st-fs-h2); line-height: var(--st-lh-h2); }
h3 { font-size: var(--st-fs-h3); line-height: var(--st-lh-h3); }
h4 { margin: 0; font: var(--st-fw-bold) var(--st-fs-h4)/var(--st-lh-h4) var(--st-font-body); }
b, strong { font-weight: var(--st-fw-bold); }

/* числа, «№» и «₽» внутри заголовков: в Prata их нет или они читаются плохо */
.st-hnum { font-family: var(--st-font-body); font-weight: var(--st-fw-regular); }

/* моноширинное число: графа бланка */
.st-num {
  font-family: var(--st-font-mono);
  font-weight: var(--st-fw-regular);
  font-synthesis: none;
  font-size: var(--st-fs-num);
  word-spacing: var(--st-ws-num);
  white-space: nowrap;
}
.st-num--l { font-size: var(--st-fs-num-l); line-height: 1.2; }

/* строка-номер: настоящие данные моноширинным, прописными */
.st-serial {
  font-family: var(--st-font-mono);
  font-weight: var(--st-fw-regular);
  font-synthesis: none;
  font-size: var(--st-fs-num-s);
  line-height: var(--st-lh-micro);
  letter-spacing: var(--st-ls-serial);
  text-transform: uppercase;
  color: var(--st-text-muted);
}
.st-serial--n { font-size: var(--st-fs-num); color: var(--st-text); letter-spacing: 0; white-space: nowrap; }
.st-serial--accent { color: var(--st-accent-2); }

.st-lead { font-size: var(--st-fs-lead); line-height: var(--st-lh-lead); max-width: var(--st-measure); }
.st-small { font-size: var(--st-fs-small); line-height: var(--st-lh-small); }
.st-micro { font-size: var(--st-fs-micro); line-height: var(--st-lh-micro); }
.st-muted { color: var(--st-text-muted); }
.st-ok { color: var(--st-success); font-weight: var(--st-fw-bold); }
.st-nowrap { white-space: nowrap; }

/* ---------- Ссылки и фокус ---------- */
a { color: var(--st-accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--st-t); }
a:hover { color: var(--st-accent-2-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--st-focus); outline-offset: var(--st-focus-offset); }
:focus:not(:focus-visible) { outline: 0; }

/* ---------- Служебное ---------- */
.st-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.st-skip { position: absolute; left: 8px; top: -60px; z-index: var(--st-z-tip); padding: 10px 14px; background: var(--st-dark); color: var(--st-on-dark); }
.st-skip:focus { top: 8px; color: var(--st-on-dark); }
.st-ico { width: var(--st-ico); height: var(--st-ico); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.st-ico--l { width: var(--st-ico-l); height: var(--st-ico-l); }
.st-ico--s { width: var(--st-ico-s); height: var(--st-ico-s); stroke-width: 2; }

/* ---------- Сетка ---------- */
.st-wrap { width: 100%; max-width: var(--st-container); margin-inline: auto; padding-inline: var(--st-gutter); }
.st-main { display: block; padding-bottom: var(--st-section); }
.st-grid { display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); gap: var(--st-gap); }
.st-grid > * { min-width: 0; grid-column: 1 / -1; }
.st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-scroll:focus-visible { outline-offset: -2px; }
.st-stack > * + * { margin-top: var(--st-sp-16); }

/* текст + боковая колонка: 8 + 4 колонки от 1200px */
.st-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-sp-32) var(--st-gap); align-items: start; }
.st-split > * { min-width: 0; }

/* ---------- Фирменный приём: гильош, лента, бумага ---------- */
.st-guil {
  border: var(--st-guil-w) solid var(--st-line);
  border-image: var(--st-guil-img) 12 / var(--st-guil-w) round;
  border-radius: var(--st-r-0);
  background: var(--st-surface);
  padding: var(--st-pad);
}
.st-guil-band { height: 12px; background: var(--st-guil-band) repeat-x 0 0 / 12px 12px; }
.st-paper { background: var(--st-bg) var(--st-paper-img) 0 0 / 48px 24px; }

/* ---------- Шапка ---------- */
.st-header { background: var(--st-bg); position: relative; }
.st-header__top { border-bottom: var(--st-border); }
.st-header__top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--st-sp-16); min-height: var(--st-topline-h); }
.st-header__top-in .st-serial { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.st-header__more { display: none; }
.st-header__meta { display: none; gap: var(--st-sp-20); font-size: var(--st-fs-small); }
.st-header__meta a { color: var(--st-text); text-decoration: none; }
.st-header__meta a:hover { color: var(--st-accent-2); text-decoration: underline; }

.st-header__bar { display: flex; align-items: center; gap: var(--st-sp-8); min-height: var(--st-bar-h); }
.st-brand { display: inline-flex; align-items: center; gap: var(--st-sp-8); margin-right: auto; color: var(--st-text); text-decoration: none; min-height: 44px; }
.st-brand:hover { color: var(--st-text); text-decoration: none; }
.st-brand:hover .st-brand__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.st-mark { width: 32px; height: 32px; flex: none; }
.st-brand__name { font-family: var(--st-font-heading); font-size: var(--st-fs-brand); line-height: 1; white-space: nowrap; }

.st-header .st-header__search { display: none; }
.st-header__cmp { display: none; }
.st-header__btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 44px; height: 44px; padding: 0 4px; border-radius: var(--st-r-1);
  font-size: var(--st-fs-micro); line-height: 1; color: var(--st-text); text-decoration: none;
  transition: background-color var(--st-t);
}
.st-header__btn:hover { background: var(--st-bg-2); color: var(--st-text); text-decoration: none; }

.st-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: var(--st-border-ink); border-radius: var(--st-r-1);
  font-family: var(--st-font-mono); font-size: var(--st-fs-num-s); line-height: 1;
}

.st-nav { display: none; }

/* мобильное меню: лист на весь экран */
.st-menu {
  position: fixed; inset: 0; z-index: var(--st-z-menu); overflow-y: auto;
  background: var(--st-surface); padding: 0 var(--st-gutter) var(--st-sp-32);
}
.st-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--st-bar-h); border-bottom: var(--st-rule); }
.st-menu__title { font-family: var(--st-font-heading); font-size: var(--st-fs-brand); }
.st-menu__search { margin-top: var(--st-sp-16); }
.st-menu__list { margin-top: var(--st-sp-8); }
.st-menu__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--st-sp-12); min-height: 48px;
  border-bottom: var(--st-border); color: var(--st-text); text-decoration: none; font-weight: var(--st-fw-bold);
}
.st-menu__list a:hover { background: var(--st-bg-2); }
.st-menu__list--sub a { font-weight: var(--st-fw-regular); }
.st-menu__cap { margin-top: var(--st-sp-24); display: block; }
body.st-lock { overflow: hidden; }

@media (min-width: 768px) {
  .st-header__more { display: inline; }
  .st-header__meta { display: flex; }
  .st-header__bar { gap: var(--st-sp-16); }
  .st-header .st-header__search { display: flex; width: 280px; }
  .st-header__btn--search { display: none; }
  .st-header__cmp {
    display: inline-flex; align-items: center; gap: var(--st-sp-8); min-height: 44px; padding: 0 var(--st-sp-8);
    color: var(--st-text); text-decoration: none; font-weight: var(--st-fw-bold); font-size: var(--st-fs-ui); border-radius: var(--st-r-1);
    transition: background-color var(--st-t);
  }
  .st-header__cmp:hover { background: var(--st-bg-2); color: var(--st-text); text-decoration: none; }
}

@media (min-width: 1200px) {
  .st-header__btn--menu { display: none; }
  .st-menu { display: none; }
  .st-nav { display: block; border-top: var(--st-border-ink); border-bottom: var(--st-border-ink); }
  .st-nav__in { display: flex; align-items: stretch; min-height: var(--st-nav-h); }
  .st-nav__list { display: flex; flex-wrap: wrap; margin-left: -12px; }
  .st-nav__link {
    display: flex; align-items: center; height: 100%; min-height: var(--st-nav-h); padding: 0 12px;
    color: var(--st-text); text-decoration: none; font-weight: var(--st-fw-bold); font-size: var(--st-fs-ui); line-height: var(--st-lh-ui);
    border-bottom: var(--st-bw-mark) solid transparent; border-top: var(--st-bw-mark) solid transparent;
    transition: background-color var(--st-t);
  }
  .st-nav__link:hover { background: var(--st-bg-2); color: var(--st-text); text-decoration: none; }
  .st-nav__link[aria-current] { border-bottom-color: var(--st-accent-2); }
  .st-nav__aside { margin-left: auto; display: flex; margin-right: -12px; }
}

/* ---------- Подвал ---------- */
.st-footer-band { margin-top: var(--st-section); }
.st-footer { background: var(--st-dark); color: var(--st-on-dark); padding-block: var(--st-sp-32) var(--st-sp-24); }
.st-footer a { color: var(--st-on-dark); text-decoration: none; }
.st-footer a:hover { color: var(--st-accent-2-on-dark); text-decoration: underline; text-decoration-thickness: 1px; }
.st-footer :focus-visible { outline-color: var(--st-on-dark); }
.st-footer__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-sp-24) var(--st-gap); }
.st-footer__cols > * { min-width: 0; }
.st-footer__cap {
  margin-bottom: var(--st-sp-8); font: var(--st-fw-bold) var(--st-fs-th)/var(--st-lh-th) var(--st-font-body);
  letter-spacing: var(--st-ls-caps); text-transform: uppercase; color: var(--st-on-dark-muted);
}
.st-footer__list a { display: flex; align-items: center; min-height: 40px; font-size: var(--st-fs-ui); line-height: var(--st-lh-ui); }
.st-footer__bottom {
  margin-top: var(--st-sp-32); padding-top: var(--st-sp-24); border-top: 1px solid var(--st-dark-line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-sp-16) var(--st-gap);
  font-size: var(--st-fs-small); line-height: var(--st-lh-small); color: var(--st-on-dark-muted);
}
.st-footer__bottom > * { min-width: 0; }
.st-footer__brand { display: inline-flex; align-items: center; gap: var(--st-sp-8); color: var(--st-on-dark); }
.st-footer__brand .st-brand__name { font-size: var(--st-fs-brand); }
.st-footer__legal a, .st-footer__disc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.st-footer__legal { display: flex; flex-wrap: wrap; gap: var(--st-sp-8) var(--st-sp-20); }
.st-footer .st-serial { color: var(--st-on-dark-muted); }
.st-footer__disc { max-width: var(--st-measure); color: var(--st-on-dark); }

@media (min-width: 768px) {
  .st-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-footer__list a { min-height: 32px; }
  .st-footer__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 1200px) {
  .st-split { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .st-footer { padding-block: var(--st-sp-48) var(--st-sp-32); }
  .st-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-footer__bottom { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
}