/* ============================================================
   NP-MAG — «журнальная заметка».
   Слой поверх np.css + np_article.css. Подключается, если страница
   задала $page_mag = true до include np_blog_head.php.

   Идея раскладки: текст живёт в узкой колонке (~596px), справа
   остаётся постоянное поле (~212px) — туда уходят выносы, цитаты,
   маргиналии и подписи. Это и даёт «журнал», а не «веб-статью».

   Все цвета — на токенах --np-* (см. np.css).
   Классы: .mag-*
   ============================================================ */

.mag{
  --mag-col:596px;      /* ширина текстовой колонки   */
  --mag-rail:228px;     /* ширина поля справа         */
  --mag-gutter:36px;    /* просвет между ними  (596+36+228 = 860 = полоса) */
  max-width:940px;margin:0 auto;padding:22px 40px 8px;
}

/* ---------- текстовая колонка ---------- */
.mag-body{max-width:var(--mag-col)}
.mag-body::after{content:'';display:block;clear:both}

.mag-body p{font-size:16px;line-height:1.72;color:var(--np-body);margin:0 0 19px}
.mag-body p strong,.mag-body b{color:var(--np-ink);font-weight:700}
.mag-body a{color:var(--np-ink);border-bottom:1px solid var(--np-rule)}
.mag-body a:hover{color:var(--np-accent);border-color:var(--np-accent)}
.mag-body ul,.mag-body ol{margin:0 0 20px;padding-left:22px;max-width:var(--mag-col)}
.mag-body li{font-size:16px;line-height:1.65;color:var(--np-body);margin:0 0 9px}
.mag-body li::marker{color:var(--np-accent)}

/* ============================================================
   1. ШАПКА ЗАМЕТКИ
   ============================================================ */
.mag-head{border-bottom:3px double var(--np-ink);padding-bottom:20px;margin:0 0 32px}
.mag-kicker{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--np-accent);margin-bottom:16px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.mag-kicker .mag-kicker-dim{color:var(--np-faint)}
.mag-head h1{
  font-size:46px;line-height:1.04;letter-spacing:-.035em;font-weight:700;
  color:var(--np-ink);margin:0;max-width:15ch;
}
/* подзаголовок-«дек»: одно предложение, которое дочитывают вместо статьи */
.mag-deck{
  font-size:19px;line-height:1.5;color:var(--np-body);font-weight:400;
  max-width:46ch;margin:16px 0 0;
}
.mag-deck b{color:var(--np-ink);font-weight:600}
.mag-byline{
  display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--np-faint);
  margin-top:22px;padding-top:14px;border-top:1px solid var(--np-rule);
}
.mag-byline b{color:var(--np-ink);font-weight:700}

/* ============================================================
   2. ВХОД В ТЕКСТ — буквица + капитель первых слов
   ============================================================ */
.mag-lede{font-size:17px;line-height:1.68;color:var(--np-body)}
.mag-lede::first-letter{
  float:left;font-size:76px;line-height:.78;font-weight:700;
  color:var(--np-ink);padding:8px 12px 0 0;
}
.mag-lede--accent::first-letter{color:var(--np-accent)}
/* первые 2-4 слова вразрядку — «вход» без буквицы либо вместе с ней */
.mag-first{
  text-transform:uppercase;font-size:.84em;letter-spacing:.09em;
  font-weight:600;color:var(--np-ink);
}

/* ============================================================
   3. ПОЛЕ СПРАВА — общий механизм выноса
   ============================================================ */
.mag-side{
  float:right;clear:right;width:var(--mag-rail);
  margin-right:calc(-1 * (var(--mag-rail) + var(--mag-gutter)));
  margin-left:var(--mag-gutter);margin-bottom:24px;
}
.mag-side--left{
  float:left;clear:left;
  margin-left:calc(-1 * (var(--mag-rail) + var(--mag-gutter)));
  margin-right:var(--mag-gutter);
}

/* 3.1 вынос-цитата в поле */
.mag-pull{
  border-top:2px solid var(--np-ink);border-bottom:1px solid var(--np-rule);
  padding:14px 0 12px;
  font-size:19px;line-height:1.32;font-weight:700;letter-spacing:-.02em;
  color:var(--np-ink);
}
.mag-pull .mag-pull-src{
  display:block;margin-top:10px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--np-faint);
}

/* 3.2 маргиналия — комментарий на полях */
.mag-note{
  border-left:2px solid var(--np-accent);padding:2px 0 2px 12px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.6;
  color:var(--np-faint);
}
.mag-note b{color:var(--np-body);font-weight:700}
/* сноска с номером: <sup class="mag-ref">1</sup> в тексте */
.mag-ref{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  color:var(--np-accent);vertical-align:super;line-height:0;padding:0 1px;
}
.mag-note[data-ref]::before{
  content:attr(data-ref);display:block;
  font-size:10px;font-weight:700;color:var(--np-accent);margin-bottom:4px;
}

/* 3.3 цифра на полях */
.mag-fignum{border-top:2px solid var(--np-accent);padding-top:12px}
.mag-fignum b{
  display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;
  color:var(--np-accent);line-height:1;
}
.mag-fignum span{
  display:block;margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--np-faint);
}

/* 3.3.1 расчёт на полях — «на салфетке», моноширинный столбик */
.mag-calc{
  border-top:1px solid var(--np-ink);border-bottom:1px solid var(--np-ink);
  padding:12px 0;white-space:pre-line;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.75;
  color:var(--np-ink);
}
.mag-calc span{
  display:block;margin-top:10px;padding-top:8px;border-top:1px dotted var(--np-rule);
  font-size:10.5px;line-height:1.5;color:var(--np-faint);white-space:normal;
}

/* 3.4 фото в поле */
.mag-side img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.06)}
.mag-side figcaption,.mag-cap{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.5;
  color:var(--np-faint);margin-top:8px;
}
.mag-cap b{color:var(--np-body)}

/* ============================================================
   4. ВЫНОС ВО ВСЮ ШИРИНУ (разрыв колонки)
   ============================================================ */
/* Всё, что шире колонки, обязано очистить поле — иначе наедет на вынос.
   max-width:none — иначе ширину срежет .mag-body (596px); на узких
   экранах ширину возвращает медиазапрос в конце файла */
.mag-wide,.mag-shout,.mag-2col{clear:both}
.mag-wide{width:860px;max-width:none;margin:38px 0}
.mag-wide img{width:100%;height:auto;display:block;border:1px solid var(--np-rule)}

/* цитата-плашка через всю полосу */
.mag-shout{
  width:860px;max-width:none;margin:44px 0;padding:30px 0;
  border-top:3px double var(--np-ink);border-bottom:3px double var(--np-ink);
  text-align:center;
}
.mag-shout p{
  font-size:27px;line-height:1.28;font-weight:700;letter-spacing:-.03em;
  color:var(--np-ink);max-width:24ch;margin:0 auto;
}
.mag-shout .mag-pull-src{
  display:block;margin-top:16px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--np-faint);
}

/* ============================================================
   5. ПОДЗАГОЛОВКИ ЗАМЕТКИ
   ============================================================ */
.mag-body h2{
  font-size:25px;line-height:1.2;letter-spacing:-.025em;font-weight:700;
  color:var(--np-ink);margin:42px 0 14px;
}
/* нумерованный подзаголовок: моно-цифра над строкой */
.mag-body h2[data-num]::before{
  content:attr(data-num);display:block;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:var(--np-accent);margin-bottom:8px;font-weight:400;
}
.mag-body h3{
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--np-ink);margin:28px 0 10px;
}

/* ============================================================
   6. ВРЕЗКИ В ТЕКСТЕ
   ============================================================ */
/* «в двух словах» — верхняя врезка-конспект */
.mag-tldr{
  border:1px solid var(--np-ink);background:#faf9f6;
  padding:24px 26px 22px;margin:0 0 34px;position:relative;
}
.mag-tldr-label{
  position:absolute;top:-9px;left:22px;background:#faf9f6;padding:0 10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--np-accent);
}
.mag-tldr ul{margin:0;padding-left:18px}
.mag-tldr li{font-size:14.5px;line-height:1.6;color:var(--np-body);margin:0 0 8px}
.mag-tldr li:last-child{margin-bottom:0}

/* «справка» — боковая колонка внутри полосы */
.mag-aside{
  border-top:2px solid var(--np-ink);border-bottom:2px solid var(--np-ink);
  padding:20px 0 18px;margin:34px 0;
}
.mag-aside-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--np-accent);margin-bottom:10px;
}
.mag-aside h3{margin:0 0 8px;font-size:17px}
.mag-aside p{font-size:14.5px;line-height:1.65;margin:0 0 10px}
.mag-aside p:last-child{margin-bottom:0}

/* ============================================================
   7. ДВЕ КОЛОНКИ (короткая заметка «в подвал полосы»)
   ============================================================ */
.mag-2col{
  width:860px;max-width:none;
  column-count:2;column-gap:38px;column-rule:1px solid var(--np-rule);
  margin:30px 0;
}
.mag-2col p{font-size:15px;line-height:1.68;margin:0 0 16px;color:var(--np-body)}
.mag-2col p:first-child{margin-top:0}
.mag-2col h3{margin-top:0;break-after:avoid}

/* ============================================================
   8. РАЗДЕЛИТЕЛИ И ЗНАК КОНЦА
   ============================================================ */
.mag-sep{
  border:none;text-align:center;margin:38px 0;height:auto;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:1.2em;
  color:var(--np-rule);
}
.mag-sep::before{content:'✳ ✳ ✳'}
.mag-rule{border:none;border-top:1px solid var(--np-rule);margin:34px 0;clear:both}
.mag-rule--double{border-top:3px double var(--np-ink)}

/* концевой знак: <p class="mag-end">…текст.</p> */
.mag-end::after{
  content:'■';color:var(--np-accent);font-size:.72em;
  vertical-align:.08em;margin-left:8px;
}

/* подпись автора в конце заметки */
.mag-sign{
  clear:both;margin-top:30px;padding-top:16px;border-top:1px solid var(--np-rule);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--np-faint);
}
.mag-sign b{color:var(--np-ink)}

/* ============================================================
   9. МОБИЛЬНАЯ ВЁРСТКА — поле схлопывается в поток
   ============================================================ */
@media (max-width:920px){
  .mag{padding:18px 20px 6px}
  .mag-body,.mag-wide,.mag-shout,.mag-2col{max-width:100%;width:100%}
  .mag-side,.mag-side--left{
    float:none;width:auto;margin:26px 0;
  }
  .mag-pull{border-bottom-width:2px;font-size:21px}
  .mag-2col{column-count:1;column-rule:none}
  /* подпись под фото читают чаще текста — на мобиле уводим её
     с моноширинного на основной шрифт, чтобы не спотыкаться */
  .mag-cap,.mag-side figcaption{
    font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.5;
  }
}
@media (max-width:760px){
  .mag-head h1{font-size:31px;max-width:none}
  .mag-deck{font-size:17px}
  .mag-lede::first-letter{font-size:60px;padding:6px 9px 0 0}
  .mag-body p,.mag-body li{font-size:16.5px}
  .mag-body h2{font-size:22px;margin:34px 0 12px}
  .mag-shout{padding:24px 0;margin:34px 0}
  .mag-shout p{font-size:21px}
  .mag-tldr{padding:22px 18px 20px}
}