/* ============================================================
   «Меридиан» — классический полосный макет
   Вариант 1: центрированная шапка, узкая колонка текста,
   строгая чёрно-белая типографика.
   ============================================================ */

:root{
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;

  --ink:      #121212;
  --ink-soft: #363636;
  --ink-mute: #6b6b6b;
  --line:     #dfdfdf;
  --line-str: #121212;
  --link:     #326891;
  --link-hov: #1c4a70;
  --paper:    #ffffff;
  --wash:     #f7f7f7;

  --col:   600px;   /* колонка текста        */
  --wide:  945px;   /* широкая иллюстрация   */
  --page: 1200px;   /* предельная ширина     */
}

/* ── База ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

h1,h2,h3{ margin:0; font-weight:700; }

ul{ margin:0; padding:0; list-style:none; }

button{ font:inherit; color:inherit; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:12px 18px;
  font-family:var(--sans); font-size:14px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--link); outline-offset:3px; }

/* ── Служебная полоса ─────────────────────────────────────── */
.utility{
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  background:var(--paper);
}
.utility__in{
  max-width:var(--page); margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.utility__side{ display:flex; align-items:center; gap:18px; }
.utility__side--right{ justify-content:flex-end; }

.utility__link{ font-size:13px; text-decoration:none; }
.utility__link:hover{ text-decoration:underline; }

.utility__date{ font-size:12.5px; color:var(--ink-mute); }

.iconbtn{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:0; padding:4px 0; cursor:pointer; font-size:13px;
}
.burger{
  width:17px; height:11px; display:inline-block;
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  position:relative;
}
.burger::after{
  content:""; position:absolute; left:0; top:3.5px;
  width:100%; border-top:2px solid var(--ink);
}

.btn{
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  text-decoration:none; padding:7px 13px; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap; cursor:pointer;
}
.btn--ghost{ border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--solid{ background:#567b95; color:#fff; }
.btn--solid:hover{ background:#3f5f76; }
.btn--lg{ font-size:14px; padding:12px 22px; }

/* ── Шапка ────────────────────────────────────────────────── */
.masthead{
  max-width:var(--page); margin:0 auto; padding:26px 24px 18px;
  text-align:center;
}
.masthead__eyebrow,
.masthead__tagline{
  margin:0; font-family:var(--sans); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.masthead__logo{
  display:block; margin:10px 0 12px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(40px,8.5vw,74px); line-height:1;
  letter-spacing:.04em; text-decoration:none;
}
.masthead__tagline{ letter-spacing:.1em; }

/* ── Навигация по разделам ────────────────────────────────── */
.sections{
  border-top:1px solid var(--line-str);
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  position:sticky; top:0; z-index:19; background:var(--paper);
}
.sections ul{
  max-width:var(--page); margin:0 auto; padding:0 24px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:0 22px;
}
.sections a{
  display:block; padding:11px 0; font-size:13.5px; text-decoration:none;
  border-bottom:3px solid transparent;
}
.sections a:hover{ color:var(--ink-mute); }
.sections a[aria-current="page"]{ font-weight:700; border-bottom-color:var(--ink); }

/* ── Материал ─────────────────────────────────────────────── */
.article{ max-width:var(--page); margin:0 auto; padding:0 24px; }

.article__head{ max-width:var(--wide); margin:44px auto 0; }

.kicker{
  margin:0 0 14px; font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink);
}
.kicker a{ text-decoration:none; }
.kicker a:hover{ text-decoration:underline; }
.kicker__sep{ color:var(--ink-mute); margin:0 4px; font-weight:400; }

.article__head h1{
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.06; letter-spacing:-.012em;
  max-width:15ch;
}

.deck{
  margin:20px 0 0; max-width:var(--col);
  font-size:19px; line-height:1.5; color:var(--ink-soft);
}

.byline{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin:26px 0 0; padding:16px 0 14px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--sans);
}
.byline__author{ margin:0 0 4px; font-size:14px; font-weight:700; }
.byline__author a{ text-decoration:none; }
.byline__author a:hover{ text-decoration:underline; }
.byline__meta{ margin:0; font-size:12.5px; color:var(--ink-mute); }
.dot{ margin:0 5px; }

.share{ display:flex; gap:10px; }
.share a{
  width:34px; height:34px; border:1px solid var(--line);
  display:grid; place-items:center; border-radius:50%;
}
.share a:hover{ background:var(--wash); }
.share svg{ width:16px; height:16px; fill:var(--ink-soft); }

/* ── Иллюстрации ──────────────────────────────────────────── */
.figure{ margin:0 auto; }
.figure--lead{ max-width:var(--wide); margin-top:28px; }
.figure--wide{ max-width:var(--wide); margin:38px auto; }
.figure--col{  max-width:var(--col);  margin:38px auto; }

.figure img{ width:100%; }
/* Исходники квадратные — кадрируем их в горизонталь, фактура при этом не страдает. */
.figure--lead img{ aspect-ratio:3/2;  object-fit:cover; }
.figure--wide img{ aspect-ratio:16/9; object-fit:cover; }

.figure figcaption{
  margin-top:9px; font-family:var(--sans); font-size:13px; line-height:1.45;
  color:var(--ink-mute);
}
.figure .cap{ color:var(--ink-soft); }
.figure .credit{ display:inline-block; margin-left:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Тело текста ──────────────────────────────────────────── */
.body{ max-width:var(--col); margin:38px auto 0; }

.body p{
  margin:0 0 22px;
  font-size:19.5px; line-height:1.62; letter-spacing:.002em;
}
.body a{ color:var(--link); text-decoration:none; border-bottom:1px solid #c8d6e1; }
.body a:hover{ color:var(--link-hov); border-bottom-color:currentColor; }

.body .lede::first-letter{
  float:left; font-size:64px; line-height:.82; font-weight:700;
  padding:4px 8px 0 0; margin-top:2px;
}

.body h2{
  margin:38px 0 14px;
  font-size:25px; line-height:1.22; letter-spacing:-.005em;
}

.pullquote{
  margin:32px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--ink);
}
.pullquote p{
  margin:0; font-size:24px; line-height:1.34; font-weight:700; letter-spacing:-.005em;
}

.factbox{
  margin:34px 0; padding:22px 24px;
  background:var(--wash); border-top:3px solid var(--ink);
}
.factbox h3{
  margin:0 0 12px; font-family:var(--sans); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase;
}
.factbox ul{ display:grid; gap:10px; }
.factbox li{ font-size:16px; line-height:1.5; padding-left:16px; position:relative; }
.factbox li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--ink);
}
.factbox b{ font-weight:700; }

.ending::after{
  content:"■"; font-size:.72em; margin-left:7px; vertical-align:.08em;
}

/* ── Низ материала ────────────────────────────────────────── */
.article__foot{
  max-width:var(--col); margin:34px auto 0; padding-top:20px;
  border-top:1px solid var(--line); font-family:var(--sans);
}
.tags{ margin:0 0 14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; }
.tags span{ text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); margin-right:2px; }
.tags a{
  padding:5px 11px; border:1px solid var(--line); text-decoration:none;
  font-size:12.5px; border-radius:999px;
}
.tags a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.corr{ margin:0; font-size:12.5px; color:var(--ink-mute); line-height:1.5; }

/* ── Рассылка ─────────────────────────────────────────────── */
.promo{
  max-width:var(--wide); margin:56px auto 0; padding:32px 30px;
  border:1px solid var(--ink); text-align:center;
}
.promo__kicker{
  margin:0; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.promo h2{ margin:8px 0 10px; font-size:30px; }
.promo__text{ margin:0 auto; max-width:52ch; font-size:17px; color:var(--ink-soft); }
.promo__form{ margin:22px auto 0; display:flex; gap:10px; max-width:470px; }
.promo__form input{
  flex:1; min-width:0; padding:12px 14px; font-family:var(--sans); font-size:15px;
  border:1px solid #767676; background:#fff; color:var(--ink);
}
.promo__form input:focus{ outline:2px solid var(--link); outline-offset:0; border-color:var(--link); }

/* ── Читайте также ────────────────────────────────────────── */
.more{ max-width:var(--page); margin:60px auto 0; padding:0 24px; }
.more__title{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:12px; border-bottom:1px solid var(--line-str);
}
.more__grid{
  margin-top:26px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px;
}
.card{ text-decoration:none; display:block; }
.card img{ width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:12px; }
.card__kicker{
  margin:0 0 6px; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-mute);
}
.card h3{ font-size:18px; line-height:1.24; letter-spacing:-.005em; }
.card:hover h3{ color:var(--ink-mute); }
.card__deck{ margin:8px 0 0; font-size:15px; line-height:1.45; color:var(--ink-mute); }

/* ── Подвал ───────────────────────────────────────────────── */
.footer{
  margin-top:70px; border-top:1px solid var(--line-str);
  font-family:var(--sans);
}
.footer__top{
  max-width:var(--page); margin:0 auto; padding:28px 24px 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.footer__logo{
  font-family:var(--serif); font-weight:700; font-size:30px;
  letter-spacing:.04em; text-decoration:none;
}
.footer__social{ display:flex; gap:20px; font-size:13px; }
.footer__social a{ text-decoration:none; }
.footer__social a:hover{ text-decoration:underline; }

.footer__grid{
  max-width:var(--page); margin:0 auto; padding:10px 24px 30px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px;
  border-top:1px solid var(--line);
  padding-top:28px;
}
.footer__grid h3{
  margin:0 0 12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.footer__grid li{ margin-bottom:9px; }
.footer__grid a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; }
.footer__grid a:hover{ text-decoration:underline; color:var(--ink); }

.footer__legal{
  border-top:1px solid var(--line);
}
.footer__legal ul{
  max-width:var(--page); margin:0 auto; padding:18px 24px 0;
  display:flex; flex-wrap:wrap; gap:8px 22px;
}
.footer__legal a{ font-size:12px; color:var(--ink-mute); text-decoration:none; }
.footer__legal a:hover{ text-decoration:underline; }
.footer__note{
  max-width:var(--page); margin:0 auto; padding:12px 24px 34px;
  font-size:11.5px; color:var(--ink-mute); line-height:1.5;
}

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .more__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:760px){
  .utility__date{ display:none; }
  .utility__side{ gap:12px; }
  .masthead{ padding:20px 20px 14px; }
  .masthead__tagline{ display:none; }

  .sections{ position:static; }
  .sections ul{
    display:none; flex-direction:column; align-items:flex-start;
    padding:6px 20px 14px; gap:0;
  }
  .sections.is-open ul{ display:flex; }
  .sections a{ padding:10px 0; font-size:16px; width:100%; border-bottom:0; }

  .article,.more{ padding:0 20px; }
  .article__head{ margin-top:26px; }
  .article__head h1{ max-width:none; }
  .body p{ font-size:18.5px; }
  .body .lede::first-letter{ font-size:54px; }
  .pullquote p{ font-size:21px; }

  .figure--lead{ margin-left:-20px; margin-right:-20px; }
  .figure--lead figcaption{ padding:0 20px; }

  .promo{ padding:26px 20px; margin-top:44px; }
  .promo__form{ flex-direction:column; }

  .more__grid{ grid-template-columns:1fr; gap:26px; }
  .card{ display:grid; grid-template-columns:1fr 108px; gap:4px 14px; align-items:start; }
  .card__kicker{ grid-column:1; grid-row:1; }
  .card h3{      grid-column:1; grid-row:2; }
  .card img{ grid-column:2; grid-row:1 / span 2; margin:0; aspect-ratio:1/1; }
  .card__deck{ display:none; }

  .footer__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px){
  /* «Iniciar sesión» и «Suscríbete» вместе не помещаются в служебную полосу */
  .utility .btn--ghost{ display:none; }
}

@media (max-width:420px){
  .footer__grid{ grid-template-columns:1fr; }
}

/* ── Печать ───────────────────────────────────────────────── */
@media print{
  .utility,.sections,.share,.promo,.more,.footer__grid,.footer__social{ display:none; }
  .body{ max-width:none; }
  a{ text-decoration:none; }
}