/* ═══════════════════════════════════════════════════════════
   BASE — каркас, общий для главной и услуг:
   сброс · лист · меню · герой · кнопки · заголовки секций · подвал.
   Подключается ПОСЛЕ tokens.css.  Блоки контента — в blocks.css.
   ═══════════════════════════════════════════════════════════ */

/* ── сброс ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background-color:var(--canvas);color:var(--navy);
  font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;   /* страховка от горизонтального выезда */
}
section[id]{scroll-margin-top:24px}
a{color:inherit}
.serif{font-family:var(--font-serif)}

/* ── лист контента поверх белого поля ── */
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--page-pad);background:var(--panel);position:relative;z-index:1}

/* ── меню — navy-плашка сверху листа, ссылки справа, оранжевые точки ── */
.nav{display:flex;justify-content:flex-end;align-items:center;
  margin:0 calc(-1*var(--page-pad)) 0;padding:18px var(--page-pad);
  background:var(--navy);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.nav nav{display:flex;align-items:center}
.nav nav a{color:#e7edf4;text-decoration:none;font-size:14.5px;letter-spacing:.01em;padding:4px 2px}
.nav nav a:hover{color:var(--orange)}
.nav nav a + a::before{content:"·";color:var(--orange);font-weight:700;margin:0 15px}

/* ── кнопка ── */
.btn{display:inline-block;background:var(--navy);color:var(--bg);text-decoration:none;font-weight:500;font-size:15px;
  letter-spacing:.02em;padding:15px 30px;border-radius:var(--radius-sm);transition:.15s}
.btn:hover{background:var(--orange)}

/* ── герой — navy-шапка (продолжение меню), оранжевый акцент ── */
.hero{background:var(--navy);color:#eef3f8;margin:0 calc(-1*var(--page-pad));padding:var(--hero-pad-top) var(--page-pad) 58px;max-width:none;
  box-shadow:0 6px 0 0 var(--blue-t)}
.eyebrow{color:var(--orange);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:26px}
.hero h1{font-family:var(--font-serif);font-size:var(--text-hero);font-weight:400;line-height:1.04;
  letter-spacing:-.02em;max-width:none;margin-bottom:26px;color:#fbfaf6}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero .lead{color:#b9cede;font-size:var(--text-lead);max-width:54ch;margin-bottom:34px;font-weight:400}
.hero .btn{background:var(--orange);color:#fff}
.hero .btn:hover{background:var(--orange-d)}

/* ── примитивы секций: надзаголовок, заголовок, подпись, разделитель ── */
.k{color:var(--orange);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.k.center{text-align:center;margin-bottom:34px}
.sec-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3.6vw,40px);color:var(--navy);
  text-align:center;letter-spacing:-.01em;line-height:1.12;max-width:22ch;margin:0 auto 14px}
.note{text-align:center;color:var(--sub);max-width:64ch;margin:0 auto 34px;font-size:16px;line-height:1.55}
.lnk{color:var(--orange);text-decoration:none;font-weight:600;font-size:15px}
.lnk:hover{text-decoration:underline}

/* журнальный разделитель — тонкие линии + оранжевые точки */
.divider{display:flex;align-items:center;justify-content:center;gap:20px;padding:34px 0 8px}
.divider::before,.divider::after{content:"";width:74px;height:1px;background:#e2ddcf}
.divider b{color:var(--orange);font-size:14px;letter-spacing:.5em;font-weight:400}

/* ── подвал ── */
footer{padding:30px 0 64px;color:var(--sub);font-size:13px;border-top:1px solid var(--line)}
footer a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line)}

/* ── адаптив каркаса ── */
@media(max-width:860px){
  .page{padding:0 22px}
  .nav{display:block;margin-left:-22px;margin-right:-22px;padding:16px 22px;border-radius:0} /* на мобильном шапка во всю ширину, без скруглений */
  .nav nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;width:100%}
  .nav nav a{padding:3px 2px}
  .nav nav a + a::before{content:none}      /* убираем точки-разделители — вместо них gap, чтобы при переносе ничего не висело */
  .hero{margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px;box-shadow:none} /* убираем голубую полосу под шапкой на мобильном */
  .hero h1,.hero .lead{overflow-wrap:break-word}
}
/* телефоны — чуть меньше eyebrow, больше воздуха у разделителей */
@media(max-width:560px){
  .eyebrow{font-size:12px;letter-spacing:.16em}
  .divider{padding:44px 0 10px}
}