/* ============================================================
   Журнальная статья блога (layout: magazine).
   Всё под .mag-page / .mag: общие стили блога (blog_head_styles)
   и хвост статьи (blog_tail_styles) остаются как есть.

   Сетка: колонка текста 680 по центру, тело — обычный блочный
   поток (float у врезки .stat в grid не работает). Поля по бокам —
   --pad, как у шапки. Врезки .pair, .cards и блок автора:
     ≥1181 px — от левого края колонки вправо до 910 (на 1181–1266
                правое поле уже 230 и врезки кончаются у края шапки);
     640–1180 — до 860 по центру;
     <640    — во всю колонку, картинки во всю ширину экрана.
   Цвета — переменные сайта, подложка #050505, радиус 0, линии
   вместо теней.
   ============================================================ */

.mag-page{
  --main:680px; --side:230px; --wide:910px; --mid:860px;
  --gut:var(--pad);
  --text:#d9d6cd;
  --surface:#050505;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
.mag h1,.mag h2,.mag h3{text-transform:none}
.mag [id]{scroll-margin-top:96px}
.mag-page :focus-visible{outline:2px solid var(--coral); outline-offset:2px}

/* полоса прочитанного: над шапкой (у неё z-index 50) */
.mag-progress{position:fixed; top:0; left:0; width:100%; height:2px; background:var(--pulse);
  transform:scaleX(0); transform-origin:0 50%; z-index:51; pointer-events:none}

/* «← все статьи» и герой — по левому краю шапки и подвала */
.mag-top{max-width:calc(1280px + 2 * var(--pad)); margin:0 auto; padding:clamp(12px,2vw,20px) var(--pad) 0}
.mag-page .back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  text-transform:uppercase; color:var(--on-dark-mute)}
.mag-page .back:hover{color:var(--on-dark)}

.mag-hero{max-width:calc(1280px + 2 * var(--pad)); margin:0 auto;
  padding:clamp(24px,4vw,56px) var(--pad) clamp(28px,4vw,52px);
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(20px,2.4vw,32px) clamp(24px,4vw,64px);
  align-items:end}
.mag-hero .art-meta{grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0; color:var(--on-dark-mute)}
.mag-hero .art-meta .cat{color:var(--coral)}
.mag-hero .art-meta .dot{opacity:.5}
/* «· N мин чтения» не разрывается: иначе точка повисает в конце строки */
.mag-hero .art-meta .nw{display:inline-flex; gap:10px; white-space:nowrap}
.mag-hero h1{font-family:var(--sans); font-weight:300; font-size:clamp(40px,6.4vw,92px); line-height:1.02;
  letter-spacing:-0.045em; color:var(--on-dark)}
.mag-hero-side{display:grid; gap:22px; padding-bottom:6px}
.mag-lead{font-size:clamp(17px,1.5vw,20px); line-height:1.38; color:#bdbab1}
.mag-byline{display:flex; align-items:center; gap:12px}
.mag-byline .ava{width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--line-dark);
  object-fit:cover; background:#111}
.mag-byline b{display:block; font-weight:400; font-size:15px; letter-spacing:-0.02em; color:var(--on-dark)}
.mag-byline .role{display:block; font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--on-dark-mute)}

/* обложка целиком: без обрезки, не выше 90 % экрана, не шире 1600.
   Ширина считается из пропорции файла (--ar из шаблона), поэтому место под
   картинку известно до загрузки и текст под ней не прыгает. */
.mag-cover{margin:0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); background:var(--surface)}
.mag-cover img{display:block; margin:0 auto; width:100%; height:auto;
  max-width:min(1600px, calc(90vh * var(--ar, 16 / 9))); max-height:90vh}

/* оглавление на полях — только от 1181 px; показывает скрипт после обложки */
.mag-toc{display:none}
.mag-toc ol,.mag-toc-m ol{list-style:none}
.mag-toc-t{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0; color:var(--on-dark-mute); margin-bottom:12px}
.mag-toc a{display:grid; grid-template-columns:24px minmax(0,1fr); padding:6px 0; border-top:1px solid var(--line-dark);
  color:var(--on-dark-mute); transition:color .15s var(--ease-out)}
.mag-toc a span,.mag-toc-m a span{color:var(--coral)}
.mag-toc a:hover,.mag-toc a[aria-current="location"]{color:var(--on-dark)}

/* свёрнутое «содержание» в начале текста — до 1180 px */
.mag-toc-m{border:1px solid var(--line-dark); padding:12px 14px; font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--on-dark-mute)}
.mag-toc-m summary{cursor:pointer; list-style:none; color:var(--on-dark); text-transform:uppercase}
.mag-toc-m summary::-webkit-details-marker{display:none}
.mag-toc-m summary::after{content:"+"; float:right; color:var(--coral)}
.mag-toc-m[open] summary::after{content:"−"}
.mag-toc-m ol{margin-top:8px}
/* .mag-body .mag-toc-m a — сильнее .mag-body a: ссылки «содержания» не
   коралловые и без подчёркивания, как на полях */
.mag-body .mag-toc-m a{display:grid; grid-template-columns:28px minmax(0,1fr); padding:9px 0; border-top:1px solid var(--line-dark);
  color:var(--on-dark-mute); text-decoration:none}
.mag-body .mag-toc-m a:hover,.mag-body .mag-toc-m a[aria-current="location"]{color:var(--on-dark); opacity:1}

/* тело */
.mag-body{padding:clamp(40px,6vw,88px) var(--gut) 0; font-size:18px; line-height:1.66; color:var(--text); overflow-wrap:break-word}
.mag-body::after{content:""; display:block; clear:both}
.mag-body > *{max-width:var(--main); margin-left:auto; margin-right:auto}
.mag-body > * + *{margin-top:24px}
.mag-body a{color:var(--coral); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.mag-body a:hover{opacity:.8}
.mag-body strong{color:var(--on-dark); font-weight:500}
.mag-body .opening{font-size:clamp(26px,3vw,34px); line-height:1.2; font-weight:300; letter-spacing:-0.035em; color:var(--on-dark)}
.mag-body ul{padding-left:24px; display:grid; gap:9px}
.mag-body code{font-family:var(--mono); font-size:.88em; background:rgba(243,239,231,0.08); padding:2px 6px}

/* разделы: номер 01… над заголовком */
.mag-body h2{margin-top:clamp(56px,7vw,96px); font-family:var(--sans); font-weight:300; font-size:clamp(30px,3.6vw,46px);
  line-height:1.05; letter-spacing:-0.035em; color:var(--on-dark)}
.mag-body h2 .h-num{display:block; font-family:var(--mono); font-weight:400; font-size:12px; line-height:1.4; letter-spacing:0;
  color:var(--coral); margin-bottom:14px}
.mag-body h3{margin-top:clamp(36px,4vw,48px); font-family:var(--sans); font-weight:400; font-size:clamp(20px,2.2vw,24px);
  line-height:1.2; letter-spacing:-0.03em; color:var(--on-dark)}

/* картинка и подпись */
.mag-body .fig img{display:block; width:100%; height:auto; border:1px solid var(--line-dark); background:var(--surface)}
.mag-body .fig + .cap{margin-top:10px}
.mag-body .cap{font-family:var(--mono); font-size:12px; line-height:1.5; letter-spacing:0; color:var(--on-dark-mute)}
.mag-body .cap em{font-style:normal}

/* цитата-вынос; у цитаты из двух и больше абзацев последний — подпись */
.mag-body blockquote{border-top:2px solid var(--coral); padding-top:18px; font-weight:300; font-size:clamp(28px,3.2vw,44px);
  line-height:1.08; letter-spacing:-0.045em; color:var(--on-dark)}
.mag-body blockquote > p + p{margin-top:14px}
.mag-body blockquote > p:last-child:not(:first-child){font-family:var(--mono); font-weight:400; font-size:12px; line-height:1.5;
  letter-spacing:0; color:var(--on-dark-mute)}

/* шаги: нумерованный список верхнего уровня тела (вложенные списки и
   «содержание» — не шаги) */
.mag-body > ol{list-style:none; counter-reset:step; border-top:1px solid var(--line-dark)}
.mag-body > ol > li{counter-increment:step; display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px; padding:18px 0;
  border-bottom:1px solid var(--line-dark)}
.mag-body > ol > li::before{content:counter(step); font-weight:300; font-size:40px; line-height:1; letter-spacing:-0.05em; color:var(--coral)}

/* источники: список сразу после «## Источники {.plain}» */
.mag-body h2.plain + ul{display:block; list-style:none; padding:0; columns:2; column-gap:32px; font-family:var(--mono)}
.mag-body h2.plain + ul li{break-inside:avoid; padding:10px 0; border-top:1px solid var(--line-dark); font-size:12px; line-height:1.55;
  letter-spacing:0; color:var(--on-dark-mute)}
.mag-body h2.plain + ul a{color:var(--on-dark); text-decoration:none; border-bottom:1px solid var(--line-dark)}

/* врезка с цифрой */
.mag-body .stat{font-family:var(--mono); font-size:12px; line-height:1.5; letter-spacing:0; color:var(--on-dark-mute)}
.mag-body .stat b{display:block; font-family:var(--sans); font-weight:300; font-size:72px; line-height:.9; letter-spacing:-0.06em;
  background:var(--pulse); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px}

/* карточки: сетка из линий в 1 px */
.mag-body .cards{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); clear:right}
.mag-body .cards > div{background:var(--surface); padding:22px; font-size:16px; line-height:1.5}
.mag-body .cards .k{display:block; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0;
  color:var(--coral); margin-bottom:10px}
.mag-body .cards b{display:block; font-weight:400; font-size:22px; line-height:1.2; letter-spacing:-0.03em; color:var(--on-dark); margin-bottom:6px}

/* пара «картинка + текст/цитата/картинка» */
.mag-body .pair{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center; clear:right}
.mag-body .pair.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.mag-body .pair > div > * + *{margin-top:12px}

/* автор */
.mag-author{box-sizing:border-box; width:calc(100% - 2 * var(--gut)); margin:clamp(56px,7vw,96px) auto 0;
  display:grid; grid-template-columns:140px minmax(0,1fr); gap:28px; align-items:start;
  border:1px solid var(--line-dark); background:var(--surface); padding:28px; clear:both}
.mag-author .ph{display:block; width:140px; height:140px; border-radius:50%; border:1px solid var(--line-dark); object-fit:cover; background:#111}
.mag-author .lbl{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0; color:var(--coral)}
.mag-author h2{margin:6px 0 4px; font-family:var(--sans); font-weight:300; font-size:30px; line-height:1.1; letter-spacing:-0.04em; color:var(--on-dark)}
.mag-author p{margin-top:10px; font-size:15px; line-height:1.55; color:var(--text)}

/* хвост статьи внутри журнальной страницы — в ширину колонки */
.mag-page .art-cta .wrap{max-width:680px}

/* ---------- компьютер: поля по бокам колонки ---------- */
@media (min-width:1181px){
  /* правое поле — до 230, но не дальше края шапки: на 1181–1266 оно уже */
  .mag-page{--side:min(230px, calc((100vw - var(--main)) / 2 - var(--pad))); --wide:calc(var(--main) + var(--side))}

  /* Скрыто прозрачностью, а не visibility: ссылки остаются в порядке Tab,
     и с клавиатуры оглавление проявляется (:focus-within) ещё до обложки. */
  .mag-toc{display:block; position:fixed; top:120px; z-index:10;
    left:max(var(--gut), calc(50% - var(--main) / 2 - var(--side) - 24px)); width:calc(var(--side) - 40px);
    font-family:var(--mono); font-size:11px; line-height:1.45; letter-spacing:0;
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .2s var(--ease-out), transform .2s var(--ease-out)}
  .mag-toc.is-on,.mag-toc:focus-within{opacity:1; pointer-events:auto; transform:none}
  .mag-toc-m{display:none}

  /* врезки — от левого края колонки до правого края поля */
  .mag-body > .pair,.mag-body > .cards{max-width:none; width:var(--wide); margin-left:calc(50% - var(--main) / 2); margin-right:0}
  .mag-author{width:var(--wide); margin-left:calc(50% - var(--main) / 2)}

  /* цифра плавает в правом поле: правый край — как у .pair, верх — на 6 px
     ниже первой строки абзаца (у абзаца отступ 24, float его не схлопывает) */
  .mag-body > .stat{float:right; clear:right; width:calc(var(--side) - 40px); max-width:none;
    margin:30px calc(50% - var(--main) / 2 - var(--side)) 12px 0}
}

/* ---------- планшет: полей нет, врезки до 860 по центру ---------- */
@media (min-width:640px) and (max-width:1180.98px){
  .mag-body > .pair,.mag-body > .cards{max-width:var(--mid)}
  .mag-author{max-width:var(--mid)}
}
@media (max-width:1180.98px){
  .mag-body .stat{display:flex; align-items:baseline; gap:16px; border-left:2px solid var(--coral); padding-left:14px}
  .mag-body .stat b{flex:none; font-size:48px; margin:0}
}
@media (max-width:980px){
  .mag-hero{grid-template-columns:minmax(0,1fr)}
}

/* ---------- телефон ---------- */
@media (max-width:639.98px){
  .mag-body{padding-top:32px; font-size:17px; line-height:1.62}
  .mag-body > *{max-width:none}
  .mag-body .opening{font-size:26px}
  .mag-body h2{font-size:32px; margin-top:56px}
  .mag-body .fig{margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut))}
  .mag-body .fig img{border-left:0; border-right:0}
  .mag-body .pair,.mag-body .pair.rev{grid-template-columns:minmax(0,1fr)}
  .mag-body .cards{grid-template-columns:minmax(0,1fr)}
  .mag-body blockquote{font-size:30px}
  .mag-body > ol > li{grid-template-columns:40px minmax(0,1fr)}
  .mag-body > ol > li::before{font-size:30px}
  .mag-body h2.plain + ul{columns:1}
  .mag-author{grid-template-columns:minmax(0,1fr); padding:22px}
  .mag-author .ph{width:104px; height:104px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mag-page *,.mag-page *::before,.mag-page *::after{transition:none !important}
}