/* UI-04 (R427, R431 «Статьи / журнал»): журнал статей — /guides/ (темы слева, ведущая и компактные справа, остальные ниже) и главная (ведущая + две).
   Образцы владельца r431: 06 — список тем pill-кнопками, 05 — крупная ведущая и колонка компактных. Дат, авторов и счётчиков нет.
   Вся карточка нажимается (растянутая ссылка заголовка), обложки декоративные. Цвета — токены hub.css; анимации — только transform. */
.hg-journal{color:var(--hg-ink)}
.hg-journal ul{margin:0;padding:0;list-style:none}
.hg-journal li{margin:0}
.hg-journal--index{margin:36px 0 88px}
.hg-store .hg-journal__title{margin:0 0 26px;font-size:28px;line-height:1.35;font-weight:700}
.hg-journal__layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:48px;align-items:start}

/* Темы: «все темы» и разделы; текущая — заливка и aria-current="page". Переход — обычная ссылка ?topic=, «назад» — история браузера. */
.hg-journal__topics{position:sticky;top:calc(var(--hg-sticky-h,0px) + 24px)}
.hg-store .hg-journal__topics-label{margin:0 0 12px;font-size:13px;font-weight:700;line-height:1.5;color:var(--hg-ink)}
.hg-journal__topics ul{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hg-journal__topic{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--hg-ink);border-radius:999px;color:var(--hg-ink);font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;box-sizing:border-box;overflow-wrap:anywhere}
.hg-journal__topic:hover{border-color:var(--hg-red);color:var(--hg-red)}
.hg-journal__topic[aria-current=page]{border-color:var(--hg-ink);background:var(--hg-ink);color:var(--hg-paper)}
.hg-journal__topic:focus-visible{outline:2px solid var(--hg-red);outline-offset:3px}

/* Лента: ведущая слева, две компактные справа (05); остальные — сеткой ниже. */
.hg-journal__top{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:32px;align-items:start}
.hg-journal__side{display:grid;gap:28px}
.hg-journal__more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin-top:44px;padding-top:40px;border-top:1px solid var(--hg-line)}

.hg-journal-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.hg-journal-cover{position:relative;display:grid;place-items:center;aspect-ratio:16 / 10;overflow:hidden;border-radius:14px;background:var(--hg-soft)}
.hg-journal-cover>*,.hg-journal-cover .jp-category-image,.hg-journal-cover img,.hg-journal-cover svg{transition:transform .35s var(--hg-ease,ease)}
.hg-journal-card:hover .hg-journal-cover>*{transform:scale(1.025)}
.hg-journal-cover svg{display:block;width:100%;height:100%}
.hg-journal-cover--k2{background:var(--hg-white)}
/* Вид спереди — белый лист стока K2: поля обложки того же белого цвета в обеих темах. */
.hg-journal-cover[data-cover="k2:wheel-offset"]{background:#fff}
.hg-journal-cover--photo img,.hg-journal-cover--category-art img{display:block;width:100%;height:100%;object-fit:cover}
.hg-store .hg-journal-cover .jp-category-image{display:block;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:none}
.hg-journal-cover--mascot{background:var(--hg-sun)}
.hg-journal-cover--scene{background:var(--hg-soft)}
.hg-journal-cover--scene img{display:block;width:100%;height:100%;object-fit:contain}
.hg-journal-cover__pose{display:block;width:auto;height:88%;margin-top:12%}
.hg-journal-cover [data-hg-cover-theme=night],html[data-theme=dark] .hg-journal-cover [data-hg-cover-theme=day]{display:none}
html[data-theme=dark] .hg-journal-cover [data-hg-cover-theme=night]{display:block}
.hg-journal-cover__glyph{font-family:RoadRadio,Montserrat,sans-serif;font-size:clamp(30px,4vw,52px);line-height:1.1;color:var(--hg-red);white-space:nowrap}

.hg-journal-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.hg-store .hg-journal-card__topic{margin:0;padding:2px 8px;border-radius:6px;background:var(--hg-soft);color:var(--hg-ink);font-size:12px;font-weight:600;line-height:1.6}
.hg-store .hg-journal-card__title{margin:0;font-size:18px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.hg-store .hg-journal-card--lead .hg-journal-card__title{font-size:28px;line-height:1.35}
.hg-journal-card__title a{color:inherit;text-decoration:none}
.hg-journal-card__title a::after{content:"";position:absolute;inset:-6px;border-radius:16px}
.hg-journal-card__title a:focus-visible{outline:none}
.hg-journal-card__title a:focus-visible::after{outline:2px solid var(--hg-red);outline-offset:2px}
.hg-journal-card:hover .hg-journal-card__title{color:var(--hg-red)}
.hg-store .hg-journal-card__teaser{margin:0;font-size:14px;line-height:1.8;color:var(--hg-muted);overflow-wrap:anywhere}
.hg-journal-card--compact .hg-journal-card__teaser{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hg-store .hg-journal-card--lead .hg-journal-card__teaser{font-size:15px}
.hg-journal-card__read{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:8px 0;border-bottom:1px solid var(--hg-red);font-size:14px;font-weight:600;line-height:1.4}
.hg-journal-card__read svg{width:18px;height:18px}

@media(max-width:999px){
 .hg-journal__layout{grid-template-columns:minmax(0,1fr);gap:24px}
 .hg-journal__topics{position:static}
 .hg-journal__topics ul{flex-direction:row;flex-wrap:wrap}
 .hg-journal__more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .hg-journal--index{margin:24px 0 56px}
 .hg-store .hg-journal__title{margin-bottom:18px;font-size:22px}
 .hg-journal__topics ul{gap:6px}
 .hg-journal__topic{padding:0 14px;font-size:13px}
 .hg-journal__top{grid-template-columns:minmax(0,1fr);gap:22px}
 .hg-journal__side{gap:0}
 .hg-journal__more{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0;padding-top:0;border-top:0}
 .hg-store .hg-journal-card--lead .hg-journal-card__title{font-size:22px}
 /* Компактные — строкой: миниатюра слева, тема и заголовок справа. */
 .hg-journal-card--compact{flex-direction:row;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--hg-line)}
 .hg-journal-card--compact .hg-journal-cover{flex:none;width:112px;aspect-ratio:4 / 3;border-radius:10px}
 .hg-journal-card--compact .hg-journal-cover__glyph{font-size:22px}
 .hg-store .hg-journal-card--compact .hg-journal-card__title{font-size:16px}
 .hg-journal-card--compact .hg-journal-card__teaser{display:none}
}
@media(prefers-reduced-motion:reduce){
 .hg-journal-cover>*,.hg-journal-cover .jp-category-image,.hg-journal-cover img,.hg-journal-cover svg{transition:none}
 .hg-journal-card:hover .hg-journal-cover>*{transform:none}
}

/* R522: блок главной короче, вторичные статьи строками, медиа не съедают целый экран. */
.hg-journal--home .hg-journal__top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px}
.hg-journal--home .hg-journal-card--lead .hg-journal-cover{aspect-ratio:2/1}
.hg-journal--home .hg-journal-card--lead .hg-journal-card__title{font-size:23px}
.hg-journal--home .hg-journal-card--compact{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:0 0 20px;border-bottom:1px solid var(--hg-line)}
.hg-journal--home .hg-journal-card--compact .hg-journal-cover{aspect-ratio:4/3}
.hg-journal--home .hg-journal-card--compact .hg-journal-card__title{font-size:16px}
.hg-journal--home .hg-journal-card--compact .hg-journal-card__teaser{-webkit-line-clamp:2;font-size:12px}
@media(max-width:767px){.hg-journal--home .hg-journal__top{grid-template-columns:1fr}.hg-journal--home .hg-journal-card--compact{grid-template-columns:112px minmax(0,1fr)}.hg-journal--home .hg-journal-card--lead .hg-journal-card__title{font-size:21px}}