/* ============================================================
   «Хроника» — иммерсивный журнальный макет
   Вариант 2: полноэкранная обложка с заголовком поверх фото,
   тёплая бумага, крупная антиква, полосы во всю ширину.
   ============================================================ */

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

  --ink:      #17140f;
  --ink-soft: #423c33;
  --ink-mute: #6b6154;   /* 5.2:1 на paper-2 — контраст AA для мелкого текста */
  --paper:    #fbf8f3;
  --paper-2:  #f2ece2;
  --line:     #ddd4c6;
  --accent:   #8c2f24;   /* тёмная киноварь — акцент раздела */
  --dark:     #100e0b;

  --col:   680px;   /* колонка текста      */
  --page: 1280px;   /* предельная ширина   */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;      /* полосы во всю ширину используют 100vw */
}
body.is-locked{ overflow:hidden; }

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:200;
  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(--accent); outline-offset:3px; }

.wrap{ max-width:var(--col); margin:0 auto; padding:0 24px; }
.wrap--wide{ max-width:var(--page); }

/* ── Индикатор чтения ─────────────────────────────────────── */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{ display:block; height:100%; width:0; background:var(--accent); }

/* ── Верхняя панель ───────────────────────────────────────── */
.topbar{
  position:fixed; inset:3px 0 auto 0; z-index:110;
  font-family:var(--sans); color:#fff;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.topbar__in{
  max-width:var(--page); margin:0 auto; padding:14px 24px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}

.menu{
  justify-self:start;
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font-size:13px; letter-spacing:.04em;
}
.menu__bars{
  width:18px; height:12px; display:block; position:relative;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.menu__bars::after{
  content:""; position:absolute; left:0; top:3px; width:100%; border-top:2px solid currentColor;
}

.wordmark{
  justify-self:center;
  font-family:var(--serif); font-weight:700; font-size:26px;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap;
}

.topbar__right{ justify-self:end; display:flex; align-items:center; gap:18px; }
.topbar__link{ font-size:13px; text-decoration:none; }
.topbar__link:hover{ opacity:.7; }

.cta{
  font-family:var(--sans); font-size:12.5px; font-weight:700;
  text-decoration:none; padding:8px 16px; background:var(--accent); color:#fff;
  border:0; cursor:pointer; white-space:nowrap;
}
.cta:hover{ background:#6d241b; }
.cta--lg{ font-size:15px; padding:14px 26px; }

/* лента разделов — видна только когда шапка «приземлилась» */
.rail{
  max-height:0; overflow:hidden; border-top:1px solid transparent;
  transition:max-height .25s ease, border-color .25s ease;
}
.rail ul{
  max-width:var(--page); margin:0 auto; padding:0 24px;
  display:flex; gap:0 24px; overflow-x:auto; scrollbar-width:none;
}
.rail ul::-webkit-scrollbar{ display:none; }
.rail a{
  display:block; padding:10px 0; font-size:13px; text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.rail a:hover{ color:var(--accent); }
.rail a[aria-current="page"]{ font-weight:700; border-bottom-color:var(--accent); }

.topbar.is-solid{
  background:var(--paper); color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.topbar.is-solid .rail{ max-height:46px; border-top-color:var(--line); }

/* ── Выдвижное меню ───────────────────────────────────────── */
.drawer{
  position:fixed; inset:0; z-index:130; background:var(--dark); color:#fff;
  padding:96px 24px 40px; overflow-y:auto;
}
.drawer__close{
  position:absolute; top:22px; right:20px;
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:#fff;
}
.drawer__close svg{ width:24px; height:24px; display:block; }
.drawer__close:hover{ color:var(--accent); }

.drawer__title{
  margin:0 0 14px; font-family:var(--sans); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#9b8f7d;
}
.drawer__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px 24px; margin-bottom:44px; max-width:var(--page);
}
.drawer__list a{
  display:block; padding:11px 0; font-size:28px; text-decoration:none;
  border-bottom:1px solid #2b2620;
}
.drawer__list a:hover{ color:var(--accent); }
.drawer__list--small a{ font-size:17px; font-family:var(--sans); }

/* ── Обложка ──────────────────────────────────────────────── */
.cover{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--dark); overflow:hidden;
}
.cover__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cover__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,7,5,.94) 0%, rgba(8,7,5,.72) 34%, rgba(8,7,5,.28) 62%, rgba(8,7,5,.55) 100%);
}
.cover__text{
  position:relative; max-width:var(--page); width:100%;
  margin:0 auto; padding:0 24px 84px; color:#fff;
}
.cover__kicker{
  margin:0 0 22px; font-family:var(--sans); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#e8b7a6;
}
.cover h1{
  font-size:clamp(38px,7.2vw,90px); line-height:1.02; letter-spacing:-.02em;
  max-width:16ch; text-wrap:balance;
}
.cover__deck{
  margin:24px 0 0; max-width:56ch;
  font-size:clamp(17px,1.9vw,21px); line-height:1.5; color:#e6e0d6;
}
.cover__by{
  margin:30px 0 0; font-family:var(--sans); font-size:13px;
  letter-spacing:.03em; color:#c8c0b4;
}
.cover__by .sep{ margin:0 9px; opacity:.5; }
.cover__credit{
  position:absolute; right:24px; bottom:14px; margin:0;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.cover__scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.cover__scroll span{ width:26px; border-top:1px solid currentColor; }

/* ── Текст ────────────────────────────────────────────────── */
.body{ padding:70px 0 0; }

.body p{ margin:0 0 24px; font-size:20px; line-height:1.65; }
.body i{ font-style:italic; }

.lede{
  font-size:24px !important; line-height:1.5 !important;
  color:var(--ink); letter-spacing:-.004em;
}
.lede::first-letter{
  float:left; font-size:76px; line-height:.78; font-weight:700;
  padding:6px 10px 0 0; color:var(--accent);
}

.body h2{
  margin:46px 0 18px; font-size:31px; line-height:1.18; letter-spacing:-.012em;
}
.body h2::before{
  content:""; display:block; width:44px; border-top:3px solid var(--accent);
  margin-bottom:16px;
}

.pull{
  margin:44px 0; padding:0; text-align:center;
}
.pull p{
  margin:0; font-size:clamp(22px,3vw,30px); line-height:1.32;
  letter-spacing:-.012em; color:var(--accent); font-style:italic;
}
.pull::before,.pull::after{
  content:""; display:block; width:70px; height:1px; background:var(--line); margin:0 auto;
}
.pull::before{ margin-bottom:26px; }
.pull::after{  margin-top:26px; }

/* Иллюстрация во всю ширину экрана */
.bleed{
  margin:52px calc(50% - 50vw); width:100vw;
}
.bleed img{ width:100%; max-height:78vh; object-fit:cover; }
.bleed figcaption{
  max-width:var(--col); margin:14px auto 0; padding:0 24px;
  font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--ink-mute);
}

/* Пара работ рядом */
.pair{
  margin:48px 0 8px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
/* Репродукции не кадрируем — вписываем целиком в общее поле. */
.pair img{
  width:100%; height:430px; object-fit:contain; background:var(--paper-2); padding:16px;
}
.pair figcaption{
  margin-top:12px; font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--ink-mute);
}
.figcredit{
  margin:0 0 34px !important; font-family:var(--sans);
  font-size:11px !important; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-mute);
}

.body .credit{
  display:block; margin-top:5px; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* Цифры */
.numbers{
  margin:46px 0; padding:30px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.numbers div{ text-align:center; }
.numbers b{
  display:block; font-size:clamp(24px,3.2vw,34px); line-height:1.1; letter-spacing:-.02em;
}
.numbers span{
  display:block; margin-top:8px; font-family:var(--sans); font-size:12.5px;
  line-height:1.4; color:var(--ink-mute);
}

.end::after{ content:"◆"; font-size:.6em; margin-left:8px; vertical-align:.2em; color:var(--accent); }

.tags{
  margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:9px;
}
.tags a{
  font-family:var(--sans); font-size:12.5px; text-decoration:none;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.tags a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.note{
  margin:22px 0 0 !important; font-family:var(--sans);
  font-size:12.5px !important; line-height:1.55 !important; color:var(--ink-mute);
}

/* ── Ещё в разделе ────────────────────────────────────────── */
.more{ margin-top:80px; padding:56px 0 10px; background:var(--paper-2); }
.more__title{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
  padding-bottom:16px; border-bottom:2px solid var(--ink);
}
.more__grid{
  margin-top:32px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px;
}
.card{ text-decoration:none; display:block; }
.card img{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:14px; }
.card__kicker{
  margin:0 0 7px; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.card h3{ font-size:21px; line-height:1.22; letter-spacing:-.008em; }
.card:hover h3{ color:var(--accent); }
.card__deck{ margin:10px 0 0; font-size:16px; line-height:1.5; color:var(--ink-mute); }

.card--lead{ grid-row:span 2; }
.card--lead img{ aspect-ratio:3/2; }
.card--lead h3{ font-size:30px; line-height:1.14; }

/* ── Рассылка ─────────────────────────────────────────────── */
.signup{ padding:70px 0; text-align:center; }
.signup__kicker{
  margin:0; font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.signup h2{ margin:12px 0 12px; font-size:clamp(28px,4vw,40px); letter-spacing:-.015em; }
.signup p{ margin:0 auto; max-width:48ch; font-size:17.5px; color:var(--ink-soft); }
.signup form{ margin:26px auto 0; display:flex; gap:10px; max-width:460px; }
.signup input{
  flex:1; min-width:0; padding:14px 16px; font-family:var(--sans); font-size:15px;
  border:1px solid #b9ad9b; background:#fff; color:var(--ink);
}

/* ── Подвал ───────────────────────────────────────────────── */
.footer{ background:var(--dark); color:#cdc5b8; font-family:var(--sans); padding:52px 0 0; }
.footer__head{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding-bottom:30px; border-bottom:1px solid #2b2620;
}
.wordmark--foot{ color:#fff; font-size:24px; }
.footer__soc{ display:flex; flex-wrap:wrap; gap:22px; font-size:13px; }
.footer__soc a{ text-decoration:none; }
.footer__soc a:hover{ color:#fff; }

.footer__cols{
  padding:34px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:30px;
}
.footer__cols h3{ margin:0 0 14px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.footer__cols li{ margin-bottom:10px; }
.footer__cols a{ font-size:13.5px; text-decoration:none; }
.footer__cols a:hover{ color:#fff; text-decoration:underline; }

.footer__legal{ border-top:1px solid #2b2620; padding:20px 0 40px; }
.footer__legal ul{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer__legal a{ font-size:12px; color:#8d8375; text-decoration:none; }
.footer__legal a:hover{ color:#fff; }
.footer__legal p{ margin:12px 0 0; font-size:11.5px; line-height:1.55; color:#8a8073; max-width:80ch; }

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .more__grid{ grid-template-columns:repeat(2,1fr); }
  .card--lead{ grid-row:auto; grid-column:1 / -1; }
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
  .numbers{ grid-template-columns:repeat(2,1fr); gap:24px; }
}

@media (max-width:760px){
  .topbar__in{ grid-template-columns:auto 1fr auto; padding:11px 18px; }
  .menu__label,.topbar__link--hide{ display:none; }
  .wordmark{ font-size:19px; letter-spacing:.12em; }
  .cta{ padding:7px 12px; font-size:11.5px; }

  .cover{ min-height:88svh; }
  .cover__text{ padding:0 20px 64px; }
  .cover__scroll{ display:none; }

  .wrap{ padding:0 20px; }
  .body{ padding-top:44px; }
  .body p{ font-size:18.5px; }
  .lede{ font-size:21px !important; }
  .lede::first-letter{ font-size:60px; }
  .body h2{ font-size:26px; margin-top:38px; }

  .pair{ grid-template-columns:1fr; gap:26px; }
  .pair img{ height:360px; }
  .bleed{ margin:38px -20px; width:auto; }
  .bleed figcaption{ padding:0 20px; }

  .numbers{ grid-template-columns:1fr; gap:22px; padding:24px 0; }
  .numbers div{ text-align:left; display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:baseline; }
  .numbers span{ margin-top:0; }

  .more{ margin-top:56px; padding-top:44px; }
  .more__grid{ grid-template-columns:1fr; gap:30px; }
  .card--lead h3{ font-size:25px; }

  .signup{ padding:52px 0; }
  .signup form{ flex-direction:column; }

  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .drawer{ padding-top:82px; }
  .drawer__list a{ font-size:22px; }
}

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

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}

@media print{
  .topbar,.progress,.drawer,.more,.signup,.footer__cols,.footer__soc,.cover__scroll{ display:none; }
  .cover{ min-height:auto; }
  body{ background:#fff; }
}