/* Foam Heroes — Журнал. Всё scoped под #journal, чтобы не пересекаться с main.css.
   Тема «наш стиль» (theme-ours из макета): палитра FH. Шапка/подвал — из shell(). */

#journal{
  --maxw:1280px; --gap:24px;
  --ink:#0C0C0C; --muted:#55565A; --muted2:#7A7C82;
  --card-bg:#ffffff; --card-bd:1.5px solid #0C0C0C; --card-rad:16px; --feat-rad:16px;
  --acid:#FFD02F; --prot:#E63A7E;
  --c-wsh:#1F3BD1; --c-prt:#E63A7E; --c-int:#F58A1F; --c-arm:#5A34B8; --c-new:#63BF4A; --c-gen:#0C0C0C;
  --cs-ph:#EAEAEC; --quote-bg:#EDEDEF;
  color:var(--ink); padding-bottom:0;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.55;
}
#journal .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
#journal img{ display:block; max-width:100%; }
#journal a{ color:inherit; text-decoration:none; }

/* ---- шапка раздела: с 09.08 рендерится стандартным page-head из main.css
   (стандартизация заголовков) — своих jrn-стилей больше нет ---- */

/* ---- чипы-фильтр ---- */
#journal .chips{ display:flex; flex-wrap:wrap; gap:10px; padding:30px 0 10px; }
#journal .chip{ padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700;
  font-family:"JetBrains Mono",ui-monospace,monospace; text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; transition:all .18s ease; white-space:nowrap; background:transparent; border:1.5px solid #0C0C0C; color:#0C0C0C; }
#journal .chip:hover{ background:#0C0C0C; color:#fff; }
#journal .chip.is-active{ background:#0C0C0C; border-color:#0C0C0C; color:#fff; }

/* ---- теги/мета ---- */
#journal .tag{ display:inline-block; font-family:ui-monospace,"JetBrains Mono",monospace; font-size:10.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#journal .tag--wsh{ color:var(--c-wsh); } #journal .tag--prt{ color:var(--c-prt); } #journal .tag--int{ color:var(--c-int); }
#journal .tag--arm{ color:var(--c-arm); } #journal .tag--new{ color:var(--c-new); } #journal .tag--gen{ color:var(--c-gen); }
#journal .meta{ font-family:ui-monospace,"JetBrains Mono",monospace; font-size:13px; color:var(--muted2); }
#journal .meta-dot{ margin:0 7px; opacity:.5; }

/* ---- featured ---- */
#journal .featured{ display:grid; grid-template-columns:1.35fr 1fr; background:var(--card-bg);
  border:var(--card-bd); border-radius:var(--feat-rad); overflow:hidden; transition:all .2s ease; margin-top:8px; }
#journal .featured:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #0C0C0C; }
#journal .featured-img{ position:relative; min-height:340px; background:#ECE6D8; }
#journal .featured-img img{ width:100%; height:100%; object-fit:cover; }
#journal .featured-pin{ position:absolute; top:18px; left:18px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 13px; border-radius:999px; z-index:2;
  background:var(--acid); color:#0C0C0C; border:1.5px solid #0C0C0C; }
#journal .featured-body{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
#journal .featured-body h3{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-size:clamp(26px,3.2vw,38px);
  font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:14px 0 0; text-transform:uppercase; }
#journal .featured-body p{ margin:16px 0 0; color:var(--muted); font-size:16px; }
#journal .featured-body .read{ margin-top:24px; align-self:flex-start; background:#0C0C0C; color:#fff; padding:11px 20px;
  border-radius:999px; font-family:ui-monospace,"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; transition:all .18s ease; }
#journal .featured-body .read:hover{ background:var(--acid); color:#0C0C0C; }

/* ---- сетка карточек ---- */
#journal .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:28px; }
#journal .card{ background:var(--card-bg); border:var(--card-bd); border-radius:var(--card-rad); overflow:hidden;
  display:flex; flex-direction:column; transition:all .2s ease; }
#journal .card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #0C0C0C; }
#journal .card-img{ aspect-ratio:122 / 79; background:#ECE6D8; overflow:hidden; }
#journal .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
#journal .card:hover .card-img img{ transform:scale(1.05); }
#journal .card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
#journal .card-body .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#journal .card-body h3{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-size:18px; font-weight:800;
  letter-spacing:-.01em; line-height:1.22; margin:0; flex:1; text-transform:uppercase; }
#journal .card-body .card-foot{ margin-top:14px; }
#journal .empty{ color:var(--muted); font-size:16px; padding:12px 0 8px; }
#journal .card.j-hide-all{ display:none; }  /* закреплённая статья не дублируется в сетке на «Все материалы» */

/* ---- страница статьи ---- */
#journal .article{ padding:30px 0 0; }
#journal .crumbs{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--muted2); margin-bottom:16px; }
#journal .crumbs a:hover{ color:var(--ink); }
#journal .crumbs span{ margin:0 8px; opacity:.5; }
#journal .back{ display:inline-flex; align-items:center; font-family:ui-monospace,"JetBrains Mono",monospace;
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
#journal .back:hover{ color:var(--ink); }
#journal .article-title{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-size:clamp(30px,4.4vw,52px);
  font-weight:800; letter-spacing:-.03em; line-height:1.03; margin:12px 0 0; max-width:30ch; text-transform:uppercase; }
#journal .article-lead{ font-size:clamp(17px,1.6vw,20px); color:var(--muted); margin:18px 0 0; max-width:60ch; }
#journal .article-meta{ margin-top:18px; font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--muted2); }
#journal .article-hero{ max-width:1280px; margin:34px auto 0; padding:0 24px; }
#journal .article-hero img{ width:100%; height:clamp(240px,42vw,520px); object-fit:cover; border-radius:var(--feat-rad); }
#journal .article-narrow{ max-width:1140px; margin-top:44px; }

/* ---- лонгрид ---- */
#journal .prose{ font-size:19px; line-height:1.75; color:var(--ink); max-width:none; }
#journal .prose p{ margin:0 0 22px; }
#journal .prose b{ font-weight:700; }
#journal .prose h2{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-weight:800; letter-spacing:-.02em;
  text-transform:uppercase; margin:46px 0 14px; font-size:27px; }
#journal .prose h2::before{ content:""; display:block; width:34px; height:4px; background:var(--acid); border-radius:2px; margin-bottom:16px; }
#journal .prose figure{ margin:28px 0; }
#journal .prose figure img{ width:100%; border-radius:var(--card-rad); }
#journal .prose figcaption{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.02em;
  color:var(--muted2); margin-top:12px; text-align:center; }
#journal .prose ul{ margin:4px 0 22px; padding-left:22px; }
#journal .prose li{ margin-bottom:9px; }
#journal .prose ul li::marker{ color:var(--prot); }
#journal .prose blockquote{ margin:28px 0; padding:18px 24px; border-left:3px solid var(--c-new);
  background:var(--quote-bg); border-radius:0 14px 14px 0; font-style:italic; color:var(--ink); }
#journal .fig-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0; }
#journal .fig-row figure{ margin:0; position:relative; }
#journal .prose .gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:30px 0; }
#journal .prose .gallery figure{ margin:0; }
#journal .prose .gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4 / 3; border-radius:var(--card-rad); }
#journal .ba{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px; background:#0C0C0C; color:#fff; }
#journal .ba-after{ background:var(--c-new); }
#journal .prose .lead{ position:relative; font-weight:500;
  font-size:clamp(1.25rem,2.3vw,1.6rem); line-height:1.5; margin:0 0 16px; color:var(--ink); }
#journal .prose .lead::before{ content:""; position:absolute; left:-20px; top:6px; bottom:6px; width:4px; border-radius:2px; background:var(--prot); }
#journal .prose .lead-sub{ font-size:18px; line-height:1.7; color:var(--muted); margin:0 0 46px; }
#journal .prose figure.wide{ width:100%; }
#journal .prose figure.wide img{ box-shadow:4px 4px 0 rgba(12,12,12,.10); }
#journal .prose .pull{ margin:42px 0; padding:2px 0 2px 24px; border-left:5px solid var(--acid);
  font-family:"Wix Madefor Display",system-ui,sans-serif; font-weight:800; font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.12; letter-spacing:-.01em; text-transform:uppercase; }
#journal .prose .kicker{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--prot); display:block; margin:44px 0 -4px; }
#journal .prose .callout{ margin:36px 0; background:var(--ink); color:#fff; border-radius:18px; padding:26px 28px; }
#journal .prose .callout .clabel{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--acid); display:block; margin-bottom:10px; }
#journal .prose .callout p{ margin:0; color:rgba(255,255,255,.9); }
#journal .prose .end{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-weight:800; font-size:1.15rem; line-height:1.3; margin-top:32px; }

/* ---- автор ---- */
#journal .author{ margin-top:44px; background:var(--card-bg); border:var(--card-bd); border-radius:18px;
  padding:26px 28px; display:flex; gap:20px; align-items:flex-start; }
#journal .author-ava{ width:60px; height:60px; border-radius:50%; background:#0C0C0C; color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:"Wix Madefor Display",system-ui,sans-serif; font-weight:800;
  font-size:20px; flex-shrink:0; }
#journal .author-name{ font-weight:700; margin:6px 0 6px; font-size:18px; }
#journal .author p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }
/* Мобила (решение владельца): компактная карточка автора (вариант 2) — в строку,
   меньше аватар и отступы, био в 2 строки с многоточием. Десктоп не трогаем. */
@media (max-width: 640px) {
  #journal .author{ flex-direction:row; align-items:center; gap:14px; padding:14px 16px; }
  #journal .author-ava{ width:46px; height:46px; font-size:16px; }
  #journal .author .meta{ font-size:11px; margin:0; }
  #journal .author-name{ font-size:16px; margin:2px 0 3px; }
  #journal .author p{ font-size:13px; line-height:1.4; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ---- related ---- */
/* Ширина как у текста и блока товаров (1140). Раньше блок наследовал общий контейнер
   1280px, и его левый край уезжал влево относительно статьи — владелец заметил 17.08. */
#journal .article-related{ margin-top:56px; max-width:1140px; }
#journal .related-title{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-size:clamp(22px,3vw,30px);
  font-weight:800; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 22px; }

/* ---- кросс-селл ---- */
#journal .crosssell{ margin-top:52px; }
#journal .crosssell-head h2{ font-family:"Wix Madefor Display",system-ui,sans-serif; font-size:clamp(22px,3vw,30px);
  font-weight:800; letter-spacing:-.02em; text-transform:uppercase; margin:0 0 6px; }
#journal .crosssell-head p{ margin:0 0 20px; color:var(--muted); font-size:15px; }
#journal .cs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
#journal .cs-card{ border:var(--card-bd); border-radius:var(--card-rad); padding:14px; display:flex; flex-direction:column;
  gap:12px; background:var(--card-bg); transition:all .18s ease; }
#journal .cs-card:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 #0C0C0C; }
#journal .cs-photo{ aspect-ratio:1/1; border-radius:12px; background:var(--cs-ph); overflow:hidden; display:flex;
  align-items:center; justify-content:center; color:var(--muted2); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; text-align:center; padding:8px; }
#journal .cs-photo img{ width:100%; height:100%; object-fit:contain; padding:6px; }
#journal .cs-name{ font-weight:700; font-size:15px; color:var(--ink); }
#journal .cs-name small{ display:block; font-weight:500; font-size:12px; color:var(--muted2); margin-top:4px; }
#journal .cs-price{ font-family:ui-monospace,"JetBrains Mono",monospace; color:var(--ink); font-weight:700; font-size:15px; }
#journal .cs-btn{ margin-top:auto; border:0; border-radius:999px; padding:11px; font-weight:700; text-align:center;
  font-family:ui-monospace,"JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.04em; font-size:13px;
  cursor:pointer; background:#0C0C0C; color:#fff; transition:all .18s ease; display:block; }
#journal .cs-card:hover .cs-btn{ background:var(--acid); color:#0C0C0C; }

/* ---- прогресс чтения ---- */
#journal .read-progress{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:200;
  background:rgba(12,12,12,.10); opacity:0; transition:opacity .25s ease; pointer-events:none; }
#journal .read-progress.is-on{ opacity:1; }
#journal .read-progress i{ display:block; height:100%; width:0; background:var(--acid); }

/* ---- фокус ---- */
#journal a:focus-visible, #journal button:focus-visible, #journal .chip:focus-visible,
#journal .card:focus-visible, #journal .cs-card:focus-visible, #journal .featured:focus-visible{
  outline:3px solid var(--prot); outline-offset:3px; border-radius:10px; }

/* ---- адаптив ---- */
@media (max-width:1000px){
  #journal .cards{ grid-template-columns:repeat(2,1fr); }
  #journal .featured{ grid-template-columns:1fr; }
  #journal .featured-img{ min-height:280px; }
  #journal .cs-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  #journal .cards{ grid-template-columns:1fr; }
  #journal .featured-body{ padding:28px 24px 32px; }
  /* Пакет А: заголовок закрепа обрезался краем карточки на 360px */
  #journal .featured-body h3{ font-size:22px; overflow-wrap:break-word; hyphens:auto; }
  #journal .chips{ padding:26px 0 6px; }
  #journal .cs-grid{ grid-template-columns:1fr 1fr; }
  #journal .fig-row{ grid-template-columns:1fr; }
  /* кегль основного текста статьи задан ниже, в блоке «единая шкала текста на телефоне» */
  /* 18.08: правило возвращало карточку автора в колонку и перебивало СОГЛАСОВАННЫЙ
     компактный вид «в строку» (он выше, @media 640px) — просто потому, что записано
     позже. Убрано: на телефоне карточка стала 113px вместо 173px. */
}

/* --- Пакет Б хвост (08.08) --- */
/* теги рубрик и «Закреп» были 10.5-11px — функциональные подписи */
@media (max-width:900px){
  #journal .tag{ font-size: 11.5px; }
  #journal .featured-pin{ font-size: 11.5px; }
}
/* планшет 640-1000: кросс-товары в 3 колонки вместо 2 гигантов */
@media (min-width:640px) and (max-width:1000px){
  #journal .cs-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:620px){
  /* тройная шапка статьи: «← Все материалы» дублирует крошки — на мобиле прячем, крошкам тап-зону */
  #journal .back{ display:none; }
  #journal .crumbs a{ display:inline-block; padding: 12px 2px; }
  /* пустая обложка без картинки — тонкая полоска вместо бежевого прямоугольника 200px */
  #journal .card-img:not(:has(img)){ aspect-ratio: auto; height: 42px; }
}

/* 09.08: мобильная автоподгрузка ленты — скрытые до своей порции карточки */
#journal .card.j-lazy{ display:none; }

/* 09.08 дожим (согласовано с владельцем): компакт-закреп ТОЛЬКО на мобиле —
   закреплённая статья занимала почти два экрана телефона. Десктоп не трогаем. */
@media (max-width:640px){
  #journal .featured-img{ min-height:0; height:185px; }
  #journal .featured-body p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
  /* карточка закрепа кликабельна целиком — отдельная кнопка не нужна */
  #journal .featured-body .read{ display:none; }
}
/* переносы: «ПРОФЕССИО-НАЛЬНО» с дефисом — только ручные; break-word остаётся страховкой */
#journal .featured-body h3, #journal .card-body h3{ -webkit-hyphens:manual; hyphens:manual; }

/* 09.08 стандартизация: единый левый край с остальными страницами (гаттер main.css) */
#journal .container{ padding-inline:var(--gutter); }

/* 09.08: чипы-фильтр на мобиле — ровная сетка 2 колонки вместо рваного переноса:
   все пилюли одной ширины, текст по центру, правый край не гуляет */
@media (max-width:640px){
  #journal .chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* глобальный main.css делает кнопки display:flex — центруем содержимое, а не text-align */
  #journal .chip{ width:100%; justify-content:center; align-items:center; text-align:center; padding:10px 8px; font-size:12px; }
}

/* 12.08 (стандартизация шапок): заголовок статьи был 52px/800 при каноне страниц
   48px/900 — единственный оставшийся отступник среди обычных страниц */
#journal .article-title { font-size: var(--fs-page-title); font-weight: 800; line-height: var(--lh-display, 1.05); }
/* Длинные русские слова в заголовке (18.08). Замер на боевом: «концентрированные»
   при 8.5vw = 361px против колонки 358px — вылезало на 3px и обрезалось за краем экрана.
   Два уровня: (1) кегль на узких экранах чуть меньше — самые длинные слова помещаются
   целиком, без переносов и дефисов, которые владелец не любит в заголовках;
   (2) страховка overflow-wrap: если однажды попадётся слово-монстр, оно перенесётся,
   а не уедет за экран. Дефисную расстановку НЕ включаем осознанно. */
/* кегль заголовка статьи — единым блоком в конце файла */
/* ⚠ hyphens:auto здесь ПРОБОВАЛ и УБРАЛ (18.08): браузер режет дефисом не «в крайнем
   случае», а везде, где так строка плотнее — получилось «РАЗ-БАВЛЯТЬ», «КОНЦЕНТРИ-РОВАННЫЕ»,
   владелец такие переносы в заголовках не принимает. Оставлен только overflow-wrap:
   он срабатывает ТОЛЬКО если слово физически не влезает, и уводит его на новую строку,
   а не за край экрана. */
#journal .article-title { overflow-wrap: break-word; }

/* Подпись автора: должность + опыт (E-E-A-T). Появляется, только если заполнено в CMS. */
.article-author-note { margin: 6px 0 0; font-size: .88rem; line-height: 1.45; color: var(--ink-55, #6a6a6a); max-width: 62ch; }

/* Блоки редактора статей (17.08): плашка-выноска, плашка соцсетей, инлайн-разметка автора. */
.prose aside.note {
  margin: 26px 0; padding: 16px 18px; border-left: 3px solid var(--acid, #FFD02F);
  background: rgba(12,12,12,.035); border-radius: 0 12px 12px 0;
}
.prose aside.note p { margin: 0 0 10px; }
.prose aside.note p:last-child { margin-bottom: 0; }
.prose s { text-decoration: line-through; opacity: .75; }
.prose u { text-underline-offset: 3px; }
.prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-color: var(--acid, #FFD02F); }

/* Плашка «Мы в соцсетях» — вариант Б «кружки с подписями» (выбор владельца 18.08).
   Заменяет мою вчерашнюю серую коробку с капс-таблетками. Значки — маской из data-URI
   (те же силуэты, что в подвале), поэтому УЖЕ опубликованные статьи получают новый вид
   без переоткрытия: разметка aside.soc-box не менялась, работает только оформление.
   ⚠ Селекторы со скоупом #journal: в journal.css есть #journal a{color:inherit} (ID),
   и без скоупа он перебивает цвет ссылок. */
#journal .prose .soc-links a{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.9a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4.2c.8 1.1 1.4 2.4 1.8 3.8h-3.6c.4-1.4 1-2.7 1.8-3.8zM4.3 14A8 8 0 0 1 4 12c0-.7.1-1.4.3-2h3.4a17 17 0 0 0 0 4H4.3zm.8 2h2.9c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16zm2.9-8H5.1a8 8 0 0 1 4.3-3.6A15.6 15.6 0 0 0 8 8zm4 11.8c-.8-1.1-1.4-2.4-1.8-3.8h3.6c-.4 1.4-1 2.7-1.8 3.8zM14.2 14H9.8a15 15 0 0 1 0-4h4.4a15 15 0 0 1 0 4zm.4 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.9a8 8 0 0 1-4.3 3.6zM16.3 14a17 17 0 0 0 0-4h3.4c.2.6.3 1.3.3 2s-.1 1.4-.3 2h-3.4z'/%3E%3C/svg%3E"); }
#journal .prose .soc-links a.soc-yt{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.5 7.2a2.8 2.8 0 0 0-2-2C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.5.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 1.1 12a29 29 0 0 0 .4 4.8 2.8 2.8 0 0 0 2 2c1.6.4 8.5.4 8.5.4s6.9 0 8.5-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22.9 12a29 29 0 0 0-.4-4.8zM9.8 15.3V8.7l5.8 3.3-5.8 3.3z'/%3E%3C/svg%3E"); }
#journal .prose .soc-links a.soc-rt{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M108.6 0h294.8C463.4 0 512 48.6 512 108.6v294.8c0 60-48.6 108.6-108.6 108.6H108.6C48.6 512 0 463.4 0 403.4V108.6C0 48.6 48.6 0 108.6 0zM323.4 138.8H96.05V391.5h63.28v-82.22h121.25L335.9 391.5h70.855l-61.004-82.601c18.945-3.031 32.586-10.23 40.922-21.597 8.336-11.367 12.504-29.555 12.504-53.804v-18.946c0-14.398-1.516-25.765-4.168-34.48-2.653-8.714-7.2-16.293-13.641-23.113-6.82-6.441-14.398-10.988-23.492-14.019-9.094-2.653-20.461-4.168-34.48-4.168zM313.166 253.579H159.331V194.471h153.835c8.714 0 14.777 1.515 17.808 4.168 3.031 2.652 4.926 7.578 4.926 14.777v21.218c0 7.578-1.895 12.504-4.926 15.156-3.031 2.653-9.094 3.789-17.808 3.789zM419.52 77.65c17.865 0 32.348 14.483 32.348 32.35 0 17.866-14.483 32.348-32.348 32.348-17.866 0-32.348-14.482-32.348-32.348 0-17.867 14.482-32.35 32.348-32.35z'/%3E%3C/svg%3E"); }
#journal .prose .soc-links a.soc-vk{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1 18.6C6.2 18.6 2.3 13.9 2.1 6h3.5c.1 5.8 2.7 8.3 4.7 8.8V6h3.3v5c2-.2 4.1-2.5 4.8-5h3.3c-.5 3.1-2.8 5.4-4.4 6.3 1.6.8 4.2 2.8 5.2 6.3h-3.6c-.8-2.4-2.7-4.3-5.3-4.6v4.6h-.5z'/%3E%3C/svg%3E"); }
#journal .prose .soc-links a.soc-tg{ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7 4.4 19 19.1c-.2 1-.8 1.3-1.6.8l-4.6-3.4-2.2 2.2c-.25.25-.46.46-.94.46l.33-4.7 8.5-7.7c.37-.33-.08-.51-.57-.19L7.4 13.2 2.9 11.8c-1-.31-1-1 .2-1.47l17.3-6.7c.82-.3 1.54.2 1.3 1.47z'/%3E%3C/svg%3E"); }
/* =====================  ВАРИАНТ Б — «кружки с подписями»  ===================== */
#journal .prose aside.soc-box{
  margin: 34px 0; padding: 0; background: none; border: 0; border-radius: 0;
}
#journal .prose  .soc-title{
  margin: 0 0 14px; font-family:"Wix Madefor Display",system-ui,sans-serif;
  font-weight: 800; font-size: 19px; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase;
}
#journal .prose  .soc-links{ margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
#journal .prose  .soc-links a{
  position: relative; width: 78px; padding: 0; background: none; border: 0; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: "Manrope", system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; text-decoration: none; color: #55565A;
  transition: color .16s ease;
}
#journal .prose  .soc-links a::before{
  content: ""; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid #0C0C0C; background: transparent;
  transition: background .16s ease, transform .16s ease;
}
#journal .prose  .soc-links a::after{
  content: ""; position: absolute; top: 15px; left: 50%; margin-left: -11px; width: 22px; height: 22px;
  background-color: #0C0C0C;
  -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat;
  transition: background-color .16s ease, transform .16s ease;
}
#journal .prose  .soc-links a:hover{ background: none; color: #0C0C0C; }
#journal .prose  .soc-links a:hover::before{ background: #0C0C0C; transform: translateY(-2px); }
#journal .prose  .soc-links a:hover::after{ background-color: #fff; transform: translateY(-2px); }
/* единственный канал не должен висеть одиноким кружком — разворачиваем в строку */
#journal .prose  .soc-links a:only-child{
  flex-direction: row; width: auto; gap: 14px; font-size: 16px; color: #0C0C0C;
}
#journal .prose  .soc-links a:only-child::after{ top: 50%; left: 26px; margin: -11px 0 0 -11px; }
@media (max-width: 620px){
  #journal .prose aside.soc-box{ margin: 28px 0; }
  #journal .prose  .soc-title{ font-size: 18px; margin-bottom: 12px; }
  #journal .prose  .soc-links{ gap: 6px; }
  #journal .prose  .soc-links a{ width: 74px; font-size: 12px; gap: 7px; }
  #journal .prose  .soc-links a::before{ width: 50px; height: 50px; }
  #journal .prose  .soc-links a::after{ top: 14px; }
  #journal .prose  .soc-links a:only-child::after{ top: 50%; left: 25px; }
}

/* Кнопка внутри статьи (блок «Калькулятор»). В начале файла стоит #journal a{color:inherit} —
   правило с ID, оно перебивает белый цвет .btn из main.css, и надпись пропадала: чёрная
   кнопка без текста (поймано 18.08 на боевом). Возвращаем цвета кнопки в том же скоупе. */
#journal .prose .hint .btn{ color: var(--white, #fff); }
#journal .prose .hint .btn:hover{ color: var(--ink, #0C0C0C); }

/* Лесенка размеров в статье на телефоне (18.08, замер на боевом).
   Было: заголовок 28 → подзаголовок 27 → лид 20 → текст 17,5 — подзаголовок почти
   сравнялся с заголовком статьи, иерархия схлопнулась. У подзаголовка вообще не было
   мобильного правила: на десктопе 27 при заголовке 48 — нормально, на телефоне нет.
   Стало: 28 → 21 → 19 → 17,5. Десктоп не трогаем. */
/* ЕДИНАЯ ШКАЛА ТЕКСТА СТАТЬИ НА ТЕЛЕФОНЕ (19.08, вариант «17» — выбор владельца).
   Зачем: один и тот же по роли текст читался на сайте тремя кеглями — статья 17,5,
   описание товара 17, ответ в FAQ 17. Владелец: «если в товарах 17, то и тут 17, или
   как мы вообще дожили до такого». Замер apple.com на 390: основной текст ровно 17.
   Точка переключения 620, а НЕ 560: раньше подзаголовок и вводка переключались на 560,
   а размер текста — на 620, и в полосе 561-619 жили чужие пропорции (заголовок статьи
   30,4 при подзаголовке 27 — иерархия схлопывалась).
   ДЕСКТОП НЕ ТРОГАЕМ: там колонка шире и 19px оправданы длиной строки. */
@media (max-width: 620px) {
  #journal .prose { font-size: 17px; line-height: 1.7; }
  /* отступ между абзацами был 22 при высоте строки 29 — абзацы слипались в полотно */
  #journal .prose p { margin-bottom: 26px; }
  #journal .prose li { line-height: 1.7; }
  #journal .prose h2 { font-size: 21px; margin: 38px 0 12px; }
  #journal .prose h2::before { width: 28px; height: 3px; margin-bottom: 12px; }
  /* Вводка: 18 → 19, вес 500 → 600. Замер веса на переменном Manrope: 500 даёт всего
     +1,7% ширины строки (на глаз ничто), 600 — +31% «чернил», вот это видно.
     ★ ПОЛОСКА. Была left:-20px при поле 16px → уезжала ЗА КРАЙ ЭКРАНА и не рисовалась
     вовсе (0 видимых точек до 402px). Владелец: «полоска должна быть видна». Заводим её
     внутрь колонки: тексту отступ слева, полоска стоит в этом отступе. */
  #journal .prose .lead { font-size: 19px; line-height: 1.5; font-weight: 600; padding-left: 14px; }
  #journal .prose .lead::before { left: 0; top: 4px; bottom: 4px; }
  /* подпись к фото: кегль тот же 12, но серый был #7A7C82 — контраст 3,76 при норме 4,5 */
  #journal .prose figcaption { color: #6A6C72; }
}

/* Заголовок статьи — общая шкала страниц; от разрыва длинных слов («КОНЦЕНТРИРОВАННЫЕ»,
   «ПРОФЕССИОНАЛЬНО») защищает не ручное уменьшение кегля, как раньше, а --h1cap из
   render.js: он считается по самому длинному слову ИМЕННО ЭТОГО заголовка. */
#journal .article-title{
  font-size: min(clamp(28px, calc(10.9px + 5.33vw), 48px), var(--h1cap, 999px));
  overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual;
}

/* ===== МЕЛКИЙ ТЕКСТ ЖУРНАЛА (19.08, вариант «В») — см. комментарий в main.css =====
   Всё моноширинное (рубрика, дата, автор, крошки) — 12; читаемые подписи — 14. */

/* ★ РАЗМЕРЫ — ТОЛЬКО ТЕЛЕФОН (владелец 19.08: «мы же только адаптив меняли»).
   Компьютер остаётся как был. Ниже, без медиазапроса, — то, что является
   исправлением ОШИБКИ и нужно везде: контраст, многоточие, выравнивание. */
@media (max-width: 620px) {
  #journal .tag, #journal .featured-pin{ font-size: 12px; line-height: 1.35; }
  #journal .meta, #journal .article-meta, #journal .crumbs{ font-size: 12px; line-height: 1.35; }
  #journal .card-foot{ font-size: 12px; line-height: 1.35; }
  #journal .prose figcaption{ font-size: 12px; line-height: 1.35; }
  #journal .kicker{ font-size: 12px; }
  #journal .ba{ font-size: 12px; }
  #journal .author .meta, .author .meta{ font-size: 12px; line-height: 1.35; }
}

#journal .tag{ color: #4A4B4F; }
#journal .meta, #journal .article-meta, #journal .card-foot{ color: #55565A; }
#journal .crumbs, #journal .crumbs a, #journal .crumbs span{ color: #616369; }

/* ===== ЗАГОЛОВОЧНЫЙ ШРИФТ: Wix Madefor Display (19.08, решение владельца) =====
   Ушли с Gotham Pro: наши файлы — неофициальная кириллизация с копирайтом Hoefler,
   веб-лицензию в России купить негде. Wix Madefor Display — свободная лицензия (OFL).
   ★ catalog.css и journal.css подключаются ПОСЛЕ main.css и переопределяют --f-disp
   своими значениями, поэтому этот блок дописан во ВСЕ ТРИ файла — иначе сменился бы
   только заголовок страницы, а плитки, цены и статьи остались бы на старом шрифте. */
:root,#catalog,#journal{--f-disp:"Wix Madefor Display",system-ui,sans-serif;--disp:"Wix Madefor Display",system-ui,sans-serif}
.h-display,h1,h2,h3,h4,
#catalog .fh-card__name,#catalog .fh-card__price b,#catalog .pd__name,#catalog .pd__price,
#catalog .pd__price b,#catalog .cat-hero h1,#catalog .cat-banner h2,#catalog .pd-col__h,
#catalog .subcard__title,
#journal .article-title,#journal .featured-body h3,#journal .card-body h3,#journal .prose h2,
#journal .prose .pull{font-family:"Wix Madefor Display",system-ui,sans-serif}

/* Воздух в крупных заголовках: у Wix прописная выше при том же кегле, при интервале
   1,05 строки слипались. Перечислены и те заголовки, у кого был свой жёсткий межстрочный
   с более сильным селектором, — иначе правка их не достаёт. */
.h-display,h1,h2,h3,
#catalog .cat-hero h1,#catalog .cat-banner h2,#catalog .subcard__title,
#journal .article-title,#journal .featured-body h3,
.cat-row-title,.cover-title,.jr-featured-title,.jr-article-title,.fh-hero-name,
#wtb .title,#wtb .block-title,#wtb .sec-h,#wtb .cv-h,#wtb .cta h2,#wtb .opt-title,
#wtb .opt-banner-txt h3{line-height:1.12}