/* ============================================================
   Вёрстка страниц. Цвета, шрифты и компоненты — в tokens.css.
   ============================================================ */

/* --- Шапка ---------------------------------------------- */
.site-head{ position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:var(--bw) solid var(--ink) }
.site-head__in{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:-.01em;
  text-transform:uppercase; white-space:nowrap }
.brand__mark{ width:28px; height:28px; background:var(--blue);
  border:2.5px solid var(--ink); transform:rotate(12deg) }
.brand--foot{ color:var(--paper) }
.brand--foot .brand__mark{ border-color:var(--paper) }

.nav{ display:flex; align-items:center; gap:6px }
.nav a{ text-decoration:none; color:var(--text-2); font-weight:800; font-size:14px;
  padding:7px 10px; border:2.5px solid transparent }
.nav a:hover{ color:var(--ink) }
.nav a.is-active{ color:var(--ink); background:var(--yellow); border-color:var(--ink) }

.burger{ display:none; font:inherit; font-weight:800; font-size:14px;
  background:var(--card); color:var(--ink); border:var(--bw) solid var(--ink);
  padding:9px 14px; cursor:pointer }

@media (max-width:900px){
  .burger{ display:block }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:var(--bw) solid var(--ink); padding:8px var(--pad) 14px }
  .nav.is-open{ display:flex }
  .nav a{ padding:11px 8px; border-bottom:1px solid var(--hair) }
  .site-head__in{ position:relative }
}

/* --- Первый экран --------------------------------------- */
.hero{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(24px,3.4vw,44px);
  align-items:center; padding:clamp(34px,5vw,60px) var(--pad) clamp(30px,4vw,48px) }
/* Ниже ~365px слоган сжимается вместе с экраном: «Побеждайте» при 38px — 319px */
.hero h1{ margin:18px 0 16px; font-size:min(var(--t-h1), 10.4vw) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.hero__plate{ aspect-ratio:1 }
@media (max-width:820px){
  .hero{ grid-template-columns:1fr }
  .hero__plate{ aspect-ratio:16/10 }
}

/* --- Секции --------------------------------------------- */
/* отступ прокрутки: «Открыть библиотеку» не прячет заголовок под липкой шапкой */
.sec{ padding:clamp(30px,4vw,48px) var(--pad) 0; scroll-margin-top:80px }
.rows{ display:grid; gap:var(--gap) }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr } }

.row-card__txt{ display:block }
.row-card__h{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,26px);
  line-height:1.14; letter-spacing:-.02em; margin-bottom:4px }
.row-card__d{ display:block; color:var(--text-2); font-size:15px; line-height:1.5 }
.card__plate{ border:0; border-bottom:var(--bw) solid var(--ink); aspect-ratio:16/9 }
.card__body{ display:flex; flex-direction:column; align-items:flex-start; flex:1 }
.card__body .link{ margin-top:auto }

/* --- Шапка внутренней страницы -------------------------- */
.page-hero{ padding:clamp(28px,4vw,46px) 0 clamp(18px,2vw,24px); max-width:980px }
.page-hero .tag{ margin:14px 0 12px }
/* длинные SEO-заголовки: на десктопе две-три строки вместо пяти */
.page-hero h1{ margin-bottom:14px; font-size:clamp(34px,4.2vw,52px) }
@media (max-width:560px){ .page-hero h1{ font-size:min(30px, 8.4vw) } }
.back{ display:inline-block; font-weight:800; font-size:14px; color:var(--blue);
  text-decoration:none; margin-bottom:6px }
.back:hover{ color:var(--red-deep) }
.page-plate{ aspect-ratio:auto; height:clamp(58px,7vw,88px); margin-bottom:clamp(24px,3vw,34px) }

/* --- Статья --------------------------------------------- */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:clamp(20px,2.6vw,32px);
  align-items:start; padding-bottom:clamp(34px,4vw,54px) }
@media (max-width:920px){
  .layout{ grid-template-columns:minmax(0,1fr) }
  .toc{ order:-1 }
}
.article{ min-width:0; background:var(--card); border:var(--bw) solid var(--ink);
  box-shadow:var(--off) var(--off) 0 var(--ink); padding:clamp(22px,3.4vw,44px) }
.article h2{ font-size:clamp(23px,2.8vw,30px); margin:34px 0 12px; scroll-margin-top:96px }
.article h2:first-child, .article .notice + h2{ margin-top:0 }
.article .notice{ margin-bottom:26px }
.article ul{ padding-left:20px; margin:0 0 1em }
.article li{ margin-bottom:6px }
.article--legal h2{ font-size:clamp(20px,2.2vw,24px); margin-top:28px }
.toc{ position:sticky; top:96px }
@media (max-width:920px){ .toc{ position:static } }

/* --- Подвал --------------------------------------------- */
.site-foot{ margin-top:clamp(36px,5vw,64px); background:var(--ink); color:var(--paper);
  padding:clamp(30px,4vw,44px) 0 26px }
.site-foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1fr; gap:clamp(20px,2.6vw,32px) }
@media (max-width:900px){ .site-foot__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .site-foot__grid{ grid-template-columns:1fr } }
.site-foot strong{ display:block; font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px }
.site-foot a{ display:block; color:#C9BFA9; text-decoration:none; font-size:14.5px; margin:8px 0 }
.site-foot a:hover{ color:var(--yellow) }
.site-foot .brand--foot{ display:inline-flex; margin-bottom:12px }
.site-foot p{ color:#A99F8B; font-size:14.5px; max-width:34ch }
.site-foot__upd{ margin-top:12px; font-size:13px }
.site-foot .disclaimer{ max-width:none; border-top:2.5px solid #3A342A; color:#A99F8B; margin-top:24px }

/* --- Узкие экраны: замерено на 320/360/390/412px ---------- */
@media (max-width:560px){
  /* заголовок секции не делит строку с подписью — иначе на 360px рвётся «Остальные» */
  .sec-head{ flex-direction:column; align-items:flex-start; gap:4px }
  /* номер пункта отдельной строкой — иначе на 360px «4.» остаётся в строке один */
  .article--legal .h-num{ display:block; font-size:.72em; color:var(--text-3); margin-bottom:2px }
  .article h2{ font-size:min(23px, 6.3vw) }
  .article--legal h2{ font-size:min(20px, 5.5vw) }
}
@media (max-width:420px){
  .brand{ font-size:20px }
}

/* --- Таблицы, словарь, врезки и «Читайте дальше» в статьях -- */
.table-wrap{ overflow-x:auto; margin:0 0 1.3em; border:var(--bw) solid var(--ink); background:var(--card) }
.article table{ width:100%; min-width:520px; border-collapse:collapse; font-size:15px; line-height:1.5 }
.article th, .article td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1.5px solid var(--hair) }
.article th{ background:var(--ink); color:var(--paper); font-weight:800; font-size:13px; letter-spacing:.04em }
.article tr:last-child td{ border-bottom:0 }
.article td{ color:var(--text-2) }
.article td strong{ color:var(--ink) }
.article ol{ padding-left:22px; margin:0 0 1em }
.article ol li{ margin-bottom:8px }
.article dl{ margin:0 0 1em }
.article dt{ font-family:var(--display); font-weight:700; font-size:17px; margin-top:20px; color:var(--ink) }
.article dd{ margin:4px 0 0; color:var(--text-2) }
.fact{ border:var(--bw) solid var(--ink); background:var(--paper); padding:14px 16px; margin:0 0 1.3em }
.fact strong{ display:block; font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px }
.fact p:last-child{ margin-bottom:0 }
.related{ margin-top:36px; padding-top:18px; border-top:var(--bw) solid var(--ink) }
.related strong{ display:block; font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px }
.related a{ display:inline-block; margin:8px 16px 0 0; font-weight:800; color:var(--blue) }

/* --- Иллюстрации и схемы ----------------------------------- */
.hero__ill{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; background:var(--blue);
  border:var(--bw) solid var(--ink); box-shadow:var(--off) var(--off) 0 var(--ink) }
@media (max-width:820px){ .hero__ill{ aspect-ratio:16/10 } }
.card__ill{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-bottom:var(--bw) solid var(--ink) }
.page-hero--ill{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px);
  gap:clamp(22px,3vw,44px); align-items:center; max-width:none }
.page-hero--ill h1{ font-size:clamp(32px,3.6vw,46px) }
.page-hero__ill{ display:block; width:100%; height:auto; aspect-ratio:16/9;
  border:var(--bw) solid var(--ink); box-shadow:var(--off) var(--off) 0 var(--ink) }
@media (max-width:760px){ .page-hero--ill{ grid-template-columns:1fr; gap:18px } }
@media (max-width:560px){ .page-hero--ill h1{ font-size:min(30px, 8.4vw) } }
/* схема читается и на телефоне: подписи не мельче 12px, лишнее прокручивается внутри рамки */
.scheme{ margin:6px 0 1.4em; border:var(--bw) solid var(--ink); background:var(--paper) }
.scheme__canvas{ overflow-x:auto }
.scheme svg{ display:block; width:100%; height:auto; min-width:540px }
.scheme figcaption{ border-top:var(--bw) solid var(--ink); background:var(--card); padding:10px 14px;
  font-size:14px; line-height:1.5; color:var(--text-2) }
.scheme .scheme__tall{ display:none; min-width:0 }
.scheme__hint{ display:none }
@media (max-width:560px){
  .scheme .scheme__wide{ display:none }
  .scheme .scheme__tall{ display:block }
  .scheme__hint{ display:block; font-weight:800; color:var(--ink); margin-bottom:2px }
}

/* --- Шапка статьи: крошки, дата, оглавление-кнопка ---------- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; font-size:14px; font-weight:700; margin-bottom:8px }
.crumbs a{ color:var(--blue); text-decoration:none; padding:6px 0 }
.crumbs a:hover{ color:var(--red-deep) }
.crumbs span{ color:var(--text-3) }
.page-meta{ font-size:14px; color:var(--text-3); margin:4px 0 0 }
details.toc > summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase }
details.toc > summary::-webkit-details-marker{ display:none }
details.toc > summary::after{ content:"+"; font-size:22px; line-height:1 }
details.toc[open] > summary::after{ content:"–" }
details.toc[open] > summary{ margin-bottom:8px }
@media (min-width:921px){
  details.toc > summary{ pointer-events:none }
  details.toc > summary::after{ content:none }
}
@media (max-width:920px){
  details.toc{ padding:0 }
  details.toc > summary{ min-height:52px; padding:0 16px }
  details.toc[open] > summary{ margin-bottom:0 }
  details.toc .toc__list{ padding:0 16px 8px }
}

/* --- Карточка кликается целиком ----------------------------- */
.card--link{ position:relative }
.card--link .link::after{ content:""; position:absolute; inset:0 }
.card--link:focus-within{ outline:var(--bw) solid var(--blue); outline-offset:3px }

/* --- Подвал: кнопка настроек cookie ------------------------- */
.site-foot__link{ display:block; margin:8px 0; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font:inherit; font-size:14.5px; color:#C9BFA9 }
.site-foot__link:hover{ color:var(--yellow) }

/* --- Окно согласия на cookie -------------------------------- */
.consent{ position:fixed; z-index:50; left:var(--pad); right:var(--pad); bottom:16px; max-width:760px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:16px 18px;
  background:var(--card); border:var(--bw) solid var(--ink); box-shadow:var(--off) var(--off) 0 var(--ink) }
.consent[hidden]{ display:none }
.consent__text{ flex:1 1 320px; margin:0; font-size:14.5px; line-height:1.5; color:var(--text-2) }
.consent__actions{ display:flex; flex-wrap:wrap; gap:10px }
.consent__btn{ min-height:44px; padding:0 16px; font-size:14px }

/* --- Телефоны: крупные зоны нажатия и компактная шапка ------ */
@media (max-width:760px){ .page-hero__ill{ max-width:240px } }
@media (max-width:640px){
  .site-head__in{ min-height:60px }
  .burger{ padding:8px 12px }
  .site-foot a, .site-foot__link{ margin:0; padding:11px 0 }
  .toc a{ padding:12px 0 }
  .related a{ margin:0 18px 0 0; padding:11px 0 }
  .crumbs a{ padding:11px 0 }
  .consent{ bottom:10px; padding:14px }
  .consent__actions{ width:100% }
  .consent__btn{ flex:1 1 auto }
}

/* --- Телефон: текст статьи начинается на первом экране (замер на 360×740) --- */
@media (max-width:560px){
  .page-hero{ padding:16px 0 14px }
  .page-hero--ill{ gap:12px }
  .page-hero__ill{ max-width:200px }
  .page-hero h1{ margin-bottom:10px }
  .page-meta{ margin-top:2px }
  .layout{ gap:16px }
  details.toc > summary{ min-height:48px }
  .article{ padding:18px }
}
@media (max-width:400px){
  .page-hero h1, .page-hero--ill h1{ font-size:min(28px, 7.8vw) }
}
@media (min-width:921px){ details.toc[open] > summary::after{ content:none } }
@media (max-width:640px){
  .consent{ gap:10px; padding:12px }
  .consent__text{ flex-basis:100%; font-size:14px }
  .consent__actions{ flex-wrap:nowrap }
  .consent__btn{ flex:1 1 auto; padding:0 10px; font-size:13px; white-space:nowrap }
}
@media (max-width:360px){ .page-hero .lead{ font-size:16px } }
/* Вопросы FAQ: зона нажатия не меньше 44px */
.faq details{ padding:4px 0 }
.faq summary{ min-height:44px; padding:10px 0; align-items:center }
/* Пять карточек в разделе: второй ряд из двух встаёт по центру, карточки того же размера */
@media (min-width:901px){
  .cards{ grid-template-columns:repeat(6,1fr) }
  .cards > *{ grid-column:span 2 }
  .cards > :nth-child(3n+1):nth-last-child(2){ grid-column:2 / span 2 }
  .cards > :nth-child(3n+2):last-child{ grid-column:4 / span 2 }
}
/* Таблица шире экрана телефона: тень у края подсказывает, что её можно прокрутить */
@media (max-width:640px){
  .table-wrap{ background:
      linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left center / 36px 100% no-repeat local,
      linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0)) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(20,17,13,.3), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(20,17,13,.3), transparent) right center / 14px 100% no-repeat scroll,
      var(--card) }
}