/* ============================================================
   ОРПАУ — сетка и каркас. Концепция «Вестник».
   Шапка — титульная полоса: словесный знак по центру между
   линейками, ряд разделов под ним. При прокрутке сжимается
   в одну строку. Подвал — светлый, с двойной линейкой.
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.section{padding-block:var(--section-y);background:var(--bg);color:var(--fg)}
.section--tight{padding-block:calc(var(--section-y) * .62)}
.section--alt{--bg:var(--paper-2);background:var(--bg)}

/* Заголовок секции */
.section-head{margin-bottom:var(--s-5)}
.section-head .label{display:block;margin-bottom:var(--s-2)}
.section-head::before{
  content:"";display:block;width:56px;height:2px;
  background:var(--accent);margin-bottom:var(--s-2);
}
.section-head h2{max-width:none;text-wrap:balance}
.section-head .lead{margin-top:var(--s-2);max-width:var(--measure)}

/* Колоночные помощники: полный набор 1–12 */
.col-1{grid-column-end:span 1}  .col-2{grid-column-end:span 2}  .col-3{grid-column-end:span 3}
.col-4{grid-column-end:span 4}  .col-5{grid-column-end:span 5}  .col-6{grid-column-end:span 6}
.col-7{grid-column-end:span 7}  .col-8{grid-column-end:span 8}  .col-9{grid-column-end:span 9}
.col-10{grid-column-end:span 10} .col-11{grid-column-end:span 11} .col-12{grid-column:1 / -1}
.start-1{grid-column-start:1}  .start-2{grid-column-start:2}  .start-3{grid-column-start:3}
.start-4{grid-column-start:4}  .start-5{grid-column-start:5}  .start-6{grid-column-start:6}
.start-7{grid-column-start:7}  .start-8{grid-column-start:8}  .start-9{grid-column-start:9}
.start-10{grid-column-start:10} .start-11{grid-column-start:11} .start-12{grid-column-start:12}

/* ---------- Шапка страницы и заголовок секции на общей сетке ----------
   Заголовок, лид и подзаголовок стоят прямо в .wrap, вне 12-колоночной
   сетки, поэтому раньше их ширину задавал только max-width — и на ноутбуке,
   где колонка уже, лид переставал совпадать с текстом под ним.
   Контейнер остаётся сеткой ради общих отступов, но текст занимает
   всю ширину: пустого поля справа быть не должно нигде. */
@media (min-width:1001px){
  .page-hero > .wrap,
  .section-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter)}
  .page-hero > .wrap > *,
  .section-head > *,
  .section-head::before{grid-column:1 / -1}
}

/* ---------- Титульная шапка ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--rule-ink)}
.header a{color:inherit}

.header__util{
  font-size:var(--fs-xs);color:var(--fg-3);
  border-bottom:1px solid var(--rule);
  height:2.25rem;overflow:hidden;
  transition:height var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.header__util .wrap{display:flex;align-items:center;gap:var(--s-3);height:2.25rem;white-space:nowrap}
.header__util a:hover{color:var(--navy)}
.header__util .spacer{margin-left:auto}
.header__util .tagline{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media (max-width:900px){.header__util .tagline{display:none}}
@media (max-width:640px){.header__util{display:none}}

/* Титул: словесный знак по центру */
.header__title{
  text-align:center;padding:.85rem 0 .7rem;
  transition:padding var(--dur) var(--ease);
}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem}
.brand__logo{height:clamp(3.25rem,2.4rem + 2vw,4.5rem);width:auto;display:block;
  transition:height var(--dur) var(--ease)}
.header.is-compact .brand__logo{height:2.375rem}
.brand__mark{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,1.2rem + 1.8vw,2.625rem);
  letter-spacing:.32em;text-indent:.32em;color:var(--navy);line-height:1;
  transition:font-size var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);
}
.brand__sub{
  font-family:var(--font-text);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);line-height:1.4;
}

/* Ряд разделов */
.header__main{border-top:1px solid var(--rule)}
.header__main .wrap{display:flex;align-items:center;justify-content:center;gap:var(--s-4);
  height:3rem;transition:height var(--dur) var(--ease)}
.nav{display:flex;align-items:center;gap:var(--s-3)}
.nav a{
  font-size:var(--fs-sm);font-weight:500;color:var(--ink);position:relative;padding-block:.45rem;
  white-space:nowrap;transition:color var(--dur) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--bronze);transition:width var(--dur) var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav .btn{margin-left:var(--s-2)}
/* «Вступить» в шапке: не плашка, а акцентная ссылка — золотой ромб, тонкая золотая линия */
.header .nav a.btn{
  background:transparent;color:var(--brand);border:0;padding:.45rem 0 .45rem 1.1rem;
  margin-left:var(--s-3);font-weight:600;letter-spacing:.03em;position:relative;
  box-shadow:inset 0 -1px 0 var(--gold);
  transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease);
}
.header .nav a.btn::before{
  content:"";position:absolute;left:0;top:50%;width:.5rem;height:.5rem;
  background:var(--gold);transform:translateY(-50%) rotate(45deg);
  transition:background var(--dur) var(--ease);
}
.header .nav a.btn::after{display:none}
.header .nav a.btn:hover{color:var(--brand-2);box-shadow:inset 0 -2px 0 var(--brand)}
.header .nav a.btn:hover::before{background:var(--brand)}
.nav__util{display:none}

.nav-toggle{display:none;background:none;border:1px solid var(--rule-2);color:var(--ink);
  padding:.5rem .9rem;font:inherit;font-size:var(--fs-sm);cursor:pointer}

/* Компактная шапка при прокрутке: одна строка, знак слева */
.header.is-compact .header__util{height:0;opacity:0;border-bottom-color:transparent}
.header.is-compact .header__title{padding:0;position:absolute;left:var(--pad-x);top:0;height:var(--header-h-compact);
  display:flex;align-items:center}
.header.is-compact .brand{flex-direction:row;align-items:center;gap:.75rem}
.header.is-compact .brand__mark{font-size:1.25rem;letter-spacing:.2em;text-indent:0}
.header.is-compact .brand__sub{display:none}
.header.is-compact .header__main{border-top:0}
.header.is-compact .header__main .wrap{height:var(--header-h-compact);justify-content:flex-end}
.header.is-compact{position:sticky}
.header{position:sticky}
.header.is-compact .wrap{position:relative}

/* ---------- Подвал ---------- */
.footer{
  background:var(--paper-2);color:var(--ink-2);padding-block:var(--s-6) var(--s-4);
  font-size:var(--fs-sm);border-top:3px double var(--rule-ink);
}
.footer a{color:var(--ink-2);transition:color var(--dur) var(--ease)}
.footer a:hover{color:var(--navy)}
.footer h3{font-family:var(--font-text);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;margin-bottom:var(--s-2)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.55rem}
.footer__brand .brand__mark{font-size:1.75rem;letter-spacing:.2em;text-indent:0;color:var(--navy)}
.footer__logo{height:9rem;width:auto;margin-bottom:var(--s-3)}
.footer__brand p{margin-top:var(--s-2);color:var(--fg-3);max-width:26ch;line-height:1.5}
.footer__legal{
  margin-top:var(--s-6);padding-top:var(--s-3);border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;gap:var(--s-3);font-size:var(--fs-xs);color:var(--fg-3);
}
.footer__legal .spacer{margin-left:auto}

/* ---------- Адаптив ---------- */
@media (max-width:1340px){
  .nav{gap:1.1rem}
  .nav a{font-size:.9375rem}
  .nav .btn{padding:.75rem 1.15rem}
}
@media (max-width:1180px){
  .nav{gap:.85rem}
  .nav a{font-size:.875rem}
}
@media (max-width:1100px){
  .header__main .wrap{justify-content:space-between}
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:auto 0 0 0;top:auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);padding:var(--s-2) var(--pad-x) var(--s-6);
    overflow-y:auto;border-top:1px solid var(--rule-ink);
  }
  .nav[hidden]{display:none}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--rule);font-size:1.0625rem}
  .nav a::after{display:none}
  .nav .btn{margin:var(--s-3) 0 0;text-align:center;padding:1rem 1.75rem}
  .header .nav a.btn{background:var(--brand);color:#fff;box-shadow:none;padding:1rem 1.75rem;margin-left:0;letter-spacing:.02em}
  .header .nav a.btn::before{display:none}
  .header .nav a.btn:hover{background:var(--brand-2);color:#fff;box-shadow:none}
  .nav__util{display:flex;flex-direction:column;margin-top:var(--s-3);border-top:1px solid var(--rule-ink);padding-top:var(--s-2)}
  .nav__util a{font-size:var(--fs-sm);color:var(--fg-2);padding:.6rem 0;border-bottom:0}
  .header__util .wrap{gap:var(--s-2)}
  .header.is-compact .header__title{position:static;height:auto;padding:.5rem 0 .4rem}
  .header.is-compact .header__main{border-top:1px solid var(--rule)}
  .header.is-compact .header__main .wrap{justify-content:space-between;height:3rem}
}
/* Планшет: 12-колоночная сетка схлопывается до половин */
@media (max-width:1000px){
  .col-3,.col-4,.col-5{grid-column-end:span 6}
  .col-7,.col-8,.col-9,.col-10,.col-11{grid-column:1 / -1}
  [class*="start-"]{grid-column-start:auto}
}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(6,1fr);gap:1.25rem}
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
  .col-7,.col-8,.col-9,.col-10,.col-11{grid-column:1 / -1}
}
@media (max-width:1000px) and (min-width:821px){
  .footer .col-3{grid-column-end:span 6}
}