@charset "utf-8";
/* ===========================================================================
gratisspinns.com — скин прогона gsn (24.09.2026)
Порядок секций совпадает с порядком блоков в разметке и с именами маркеров
… .
0 токены и сброс 6 проза статьи 12 полоса размещений
1 полоса и ширины 7 фото и подписи 13 лента анонсов
2 лист на полотне 8 плитка бренда 14 главная: лид
3 шапка (mast) 9 оффер (unit) 15 виджеты форм
4 ряд рубрик (rub) 10 CTA /go/ 16 подвал (foot)
5 крошки и мета 11 таблицы, список, FAQ 17 мобилка
=========================================================================== */
/* --- 0 токены ------------------------------------------------------------ */
:root{
--gsn-ink:#111417;
--gsn-paper:#ffffff;
--gsn-canvas:#e8e6e1;
--gsn-tint:#f5f3ee; /* второй тон: врезки внутри листа */
--gsn-accent:#c2410c;
--gsn-forest:#14352c;
--gsn-muted:#5b6169;
--gsn-rule:#d5d1c8;
--gsn-w:888px; /* текстовая колонка */
--gsn-band:1120px; /* контент шапки и подвала */
--gsn-pad:20px; /* общий горизонтальный отступ */
--gsn-sheet:36px; /* рабочее поле внутри листа */
--gsn-gap:28px; /* поле вокруг листа */
--gsn-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
"URW Palladio L",Georgia,"Times New Roman",serif;
--gsn-sans:"Segoe UI","Noto Sans",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
/* сброс голого слоя: специфичность (0,0,1) — ровно как у правил донора,
наш лист ниже, поэтому выигрывает без !important */
:where(html){-webkit-text-size-adjust:100%}
:where(body.gsn-page){margin:0;padding:0}
:where(body.gsn-page h1,body.gsn-page h2,body.gsn-page h3,body.gsn-page h4,
body.gsn-page p,body.gsn-page ul,body.gsn-page ol,body.gsn-page figure,
body.gsn-page blockquote,body.gsn-page table,body.gsn-page hr){margin:0;padding:0}
:where(body.gsn-page ul,body.gsn-page ol){list-style:none}
:where(body.gsn-page img){display:block;max-width:100%;height:auto;border:0}
:where(body.gsn-page a){color:var(--gsn-accent);text-decoration:underline}
:where(body.gsn-page table){border-collapse:collapse;width:100%}
:where(body.gsn-page svg){fill:currentColor}
:where(body.gsn-page hr){border:0;height:1px;background:var(--gsn-rule)}
body.gsn-page{
background:var(--gsn-canvas);
color:var(--gsn-ink);
font:400 1rem/1.62 var(--gsn-sans);
font-size:16px;
}
.gsn-page *,.gsn-page *::before,.gsn-page *::after{box-sizing:border-box}
.gsn-i{vertical-align:-.18em;flex:none}
/* --- 1 полоса: один центрирующий контейнер на каждую full-bleed секцию --- */
.gsn-band{
width:100%;max-width:var(--gsn-band);
margin-left:auto;margin-right:auto;
padding-left:var(--gsn-pad);padding-right:var(--gsn-pad);
}
/* --- 2 лист на полотне -------------------------------------------------- */
.gsn-main{
max-width:calc(var(--gsn-w) + var(--gsn-sheet)*2 + var(--gsn-gap)*2);
margin-left:auto;margin-right:auto;
padding-left:var(--gsn-gap);padding-right:var(--gsn-gap);
}
.gsn-sheet{
width:100%;
max-width:calc(var(--gsn-w) + var(--gsn-sheet)*2);
margin-left:auto;margin-right:auto;
background:var(--gsn-paper);
border:1px solid var(--gsn-rule);
box-shadow:0 1px 0 rgba(17,20,23,.03),0 22px 46px -34px rgba(17,20,23,.45);
padding-left:var(--gsn-sheet);padding-right:var(--gsn-sheet);
padding-top:30px;padding-bottom:38px;
margin-top:var(--gsn-gap);margin-bottom:var(--gsn-gap);
}
.gsn-page--narrow{--gsn-w:760px}
/* --- 3 шапка ------------------------------------------------------------ */
/* Все три яруса (лента, логотип, рубрики) лежат внутри .gsn-hd. Собственных
отступов у обёртки нет — иначе шапка перестаёт начинаться от нуля по верху
документа, а рендер-гейт мерит её именно так. */
.gsn-hd{position:relative;background:var(--gsn-paper)}
.gsn-ribbon{background:var(--gsn-ink);color:#e6e3dd}
.gsn-ribbon__in{
display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;
padding-top:7px;padding-bottom:6px;
font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
}
.gsn-ribbon__age{margin-left:auto;font-weight:700;color:#fff}
.gsn-mast{background:var(--gsn-paper);border-bottom:1px solid var(--gsn-rule)}
.gsn-mast__in{
display:flex;align-items:center;gap:22px;
padding-top:18px;padding-bottom:16px;
}
.gsn-logo{
font:700 1.75rem/1 var(--gsn-serif);
letter-spacing:-.015em;color:var(--gsn-ink);text-decoration:none;flex:none;
}
.gsn-logo__b{color:var(--gsn-accent)}
.gsn-logo:hover .gsn-logo__a{color:var(--gsn-accent)}
.gsn-mast__tag{
margin-left:auto;max-width:30em;
font-size:.8125rem;line-height:1.45;color:var(--gsn-muted);
text-align:right;
}
.gsn-burger{display:none}
/* --- 4 ряд рубрик ------------------------------------------------------- */
.gsn-navtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gsn-rub{background:var(--gsn-paper);border-bottom:3px solid var(--gsn-ink)}
.gsn-rub__list{
display:flex;flex-wrap:wrap;align-items:stretch;
gap:0 28px;
}
.gsn-rub__list a{
display:block;
padding-top:13px;padding-bottom:12px;
font-size:.8125rem;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
color:var(--gsn-ink);text-decoration:none;
border-bottom:3px solid transparent;margin-bottom:-3px;
}
.gsn-rub__list a:hover{color:var(--gsn-accent);border-bottom-color:var(--gsn-accent)}
.gsn-rub__list a[aria-current]{color:var(--gsn-accent);border-bottom-color:var(--gsn-accent)}
.gsn-rub__close{display:none}
/* --- 5 крошки, кикер, мета --------------------------------------------- */
.gsn-crumbs{
font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--gsn-muted);margin-bottom:14px;
}
.gsn-crumbs a{color:var(--gsn-muted);text-decoration:none}
.gsn-crumbs a:hover{color:var(--gsn-accent);text-decoration:underline}
.gsn-kicker{
display:inline-block;
font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--gsn-accent);margin-bottom:9px;
}
.gsn-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
font-size:.8125rem;color:var(--gsn-muted);
border-top:1px solid var(--gsn-rule);border-bottom:1px solid var(--gsn-rule);
padding-top:9px;padding-bottom:9px;margin-bottom:24px;
}
.gsn-meta span{display:inline-flex;align-items:center;gap:6px}
/* --- 6 проза статьи ----------------------------------------------------- */
.gsn-art h1,.gsn-hub h1{
font:700 clamp(1.85rem,1.2rem + 2.1vw,2.55rem)/1.14 var(--gsn-serif);
letter-spacing:-.017em;margin-bottom:12px;text-wrap:balance;
}
.gsn-lede{
font-size:1.1875rem;line-height:1.5;color:#2c3237;margin-bottom:22px;
font-family:var(--gsn-serif);
}
.gsn-art h2{
font:700 1.5rem/1.22 var(--gsn-serif);letter-spacing:-.01em;
margin-top:34px;margin-bottom:12px;
padding-top:14px;border-top:1px solid var(--gsn-rule);
}
.gsn-art h3{font:700 1.1875rem/1.3 var(--gsn-sans);margin-top:24px;margin-bottom:9px}
.gsn-art h4{font:700 1.0625rem/1.35 var(--gsn-sans);margin-top:18px;margin-bottom:7px}
.gsn-art p{font-size:1.0625rem;line-height:1.68;margin-bottom:17px}
.gsn-art p a{text-underline-offset:2px}
.gsn-art p a:hover{color:var(--gsn-ink)}
.gsn-art strong{font-weight:700}
.gsn-art > :first-child{margin-top:0}
.gsn-art blockquote{
margin-top:22px;margin-bottom:22px;
padding-left:20px;border-left:3px solid var(--gsn-accent);
font:italic 400 1.125rem/1.55 var(--gsn-serif);color:#2c3237;
}
/* --- 7 фото и подписи --------------------------------------------------- */
.gsn-fig{margin-top:24px;margin-bottom:24px}
.gsn-fig img{width:100%;background:var(--gsn-tint)}
.gsn-fig figcaption{
padding-top:9px;font-size:.875rem;line-height:1.45;color:#3a4046;
border-top:1px solid var(--gsn-rule);margin-top:9px;
}
.gsn-credit{display:block;margin-top:4px;font-size:.75rem;color:var(--gsn-muted)}
.gsn-fig--lead{margin-top:0;margin-bottom:18px}
/* --- 8 плитка бренда (логотип не приехал — набираем типографикой) -------- */
.gsn-tile{
display:flex;align-items:center;justify-content:center;
min-height:58px;padding-left:14px;padding-right:14px;
background:var(--gsn-tint);
font:700 1.0625rem/1.15 var(--gsn-serif);letter-spacing:.01em;
color:var(--gsn-ink);text-align:center;
border-left:3px solid var(--gsn-accent);
}
.gsn-tile--wide{min-height:74px;font-size:1.25rem;margin-bottom:16px}
/* логотип оффера: донорский кадр 140 px шириной. Плашка под ним нужна —
половина логотипов прозрачные PNG со светлой краской по краю.
⚠ Класс НЕ `gsn-logo`: так называется ссылка-логотип в шапке (стр. 97), и общее
имя вешало на неё отступ снизу на каждой странице. */
.gsn-brandmark{margin-bottom:12px}
.gsn-brandmark img{
display:block;max-width:180px;height:auto;
padding:6px 8px;background:#fff;border:1px solid var(--gsn-rule);
}
/* --- 9 оффер: врезка на втором тоне, своей рамки нет -------------------- */
.gsn-unit{
background:var(--gsn-tint);
border-left:3px solid var(--gsn-accent);
padding-left:18px;padding-right:18px; /* горизонталь здесь своя, обёртка её не даёт */
padding-top:18px;padding-bottom:18px;
margin-top:26px;margin-bottom:26px;
}
.gsn-unit > :last-child{margin-bottom:0}
.gsn-unit__head{
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:10px;
}
.gsn-unit__head h2,.gsn-unit__head h3{
font:700 1.25rem/1.2 var(--gsn-serif);margin:0;padding:0;border:0;
}
.gsn-unit p{font-size:1rem;line-height:1.6;margin-bottom:12px}
.gsn-unit__ad{
font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--gsn-muted);
}
/* --- 10 CTA /go/ -------------------------------------------------------- */
.gsn-go{
display:inline-flex;align-items:center;gap:9px;
min-height:46px;padding-left:22px;padding-right:20px;
background:var(--gsn-accent);color:#fff;
font:700 .9375rem/1 var(--gsn-sans);letter-spacing:.01em;
text-decoration:none;border:0;
}
.gsn-go:hover{background:#9a330a;color:#fff}
.gsn-go .gsn-i{transition:transform .15s}
.gsn-go:hover .gsn-i{transform:translateX(3px)}
.gsn-art p .gsn-go{margin-top:2px}
.gsn-cta{margin-top:16px;margin-bottom:22px}
.gsn-cta--inline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.gsn-note{font-size:.8125rem;color:var(--gsn-muted)}
/* --- 11 таблицы, списки, FAQ -------------------------------------------- */
.gsn-tw{overflow-x:auto;margin-top:22px;margin-bottom:24px;-webkit-overflow-scrolling:touch}
.gsn-tw table{min-width:520px}
.gsn-art th{
background:var(--gsn-tint);text-align:left;
font:700 .8125rem/1.3 var(--gsn-sans);letter-spacing:.05em;text-transform:uppercase;
padding:11px 14px;border-bottom:2px solid var(--gsn-ink);
}
.gsn-art td{
padding:11px 14px;font-size:.9375rem;line-height:1.5;
border-bottom:1px solid var(--gsn-rule);vertical-align:top;
}
.gsn-art tr:last-child td{border-bottom:0}
/* таблица-карточка: скролл — последняя мера, поэтому на узком экране (а у
широких таблиц всегда) строка раскладывается «подпись → значение» */
.gsn-tw--card{overflow-x:visible}
.gsn-tw--card table{min-width:0}
@media (max-width:640px){.gsn-tw{overflow-x:visible}.gsn-tw table{min-width:0}}
.gsn-tw--card table,.gsn-tw--card thead,.gsn-tw--card tbody,
.gsn-tw--card tr,.gsn-tw--card td,.gsn-tw--card th{display:block;width:auto}
.gsn-tw--card thead,.gsn-tw--card .gsn-hrow{display:none}
.gsn-tw--card tr{
border:0;border-bottom:1px solid var(--gsn-rule);
padding-top:12px;padding-bottom:12px;
}
.gsn-tw--card tr:last-child{border-bottom:0}
.gsn-art .gsn-tw--card td{
display:grid;grid-template-columns:minmax(84px,36%) 1fr;gap:4px 12px;
padding:4px 0;border-bottom:0;
}
.gsn-tw--card td > *{min-width:0}
.gsn-tw--card td::before{
content:attr(data-gsn-l);
font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--gsn-muted);
}
.gsn-tw--card td[data-gsn-l=""]::before{content:none}
.gsn-art .gsn-tw--card td.gsn-td--lead{
display:block;font:700 1.0625rem/1.3 var(--gsn-serif);padding-bottom:6px;
}
.gsn-tw--card td.gsn-td--lead::before{content:none}
@media (max-width:640px){
.gsn-tw table,.gsn-tw thead,.gsn-tw tbody,.gsn-tw tr,.gsn-tw td,.gsn-tw th{
display:block;width:auto}
.gsn-tw thead,.gsn-tw .gsn-hrow{display:none}
.gsn-tw tr{border-bottom:1px solid var(--gsn-rule);
padding-top:12px;padding-bottom:12px}
.gsn-tw tr:last-child{border-bottom:0}
.gsn-art .gsn-tw td{display:grid;grid-template-columns:minmax(84px,36%) 1fr;
gap:4px 12px;padding:4px 0;border-bottom:0}
.gsn-tw td::before{content:attr(data-gsn-l);
font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--gsn-muted)}
.gsn-tw td[data-gsn-l=""]::before{content:none}
.gsn-art .gsn-tw td.gsn-td--lead{display:block;
font:700 1.0625rem/1.3 var(--gsn-serif);padding-bottom:6px}
.gsn-tw td.gsn-td--lead::before{content:none}
}
/* вводный блок: фото рядом с первым абзацем, на телефоне — под текстом (§6) */
.gsn-intro{display:grid;grid-template-columns:1fr 318px;gap:26px;align-items:start;
margin-bottom:26px}
.gsn-intro > *{min-width:0}
.gsn-intro .gsn-lede{margin-bottom:12px}
.gsn-intro > :last-child > .gsn-fig{margin-top:0;margin-bottom:0}
@media (max-width:780px){
.gsn-intro{grid-template-columns:1fr;gap:18px}
}
.gsn-list{margin-top:4px;margin-bottom:20px}
.gsn-list li{
position:relative;padding-left:22px;font-size:1.0625rem;line-height:1.6;
margin-bottom:9px;
}
.gsn-list li::before{
content:"";position:absolute;left:2px;top:.62em;
width:7px;height:7px;background:var(--gsn-accent);
}
.gsn-list--num{counter-reset:gsn}
.gsn-list--num li{counter-increment:gsn;padding-left:32px}
.gsn-list--num li::before{
content:counter(gsn);left:0;top:0;width:22px;height:22px;background:var(--gsn-tint);
color:var(--gsn-ink);font:700 .8125rem/22px var(--gsn-sans);text-align:center;
}
.gsn-toc{background:var(--gsn-tint);padding-left:18px;padding-right:18px;padding-top:14px;padding-bottom:14px;
margin-bottom:26px}
.gsn-toc > summary{
cursor:pointer;font:700 .8125rem/1.3 var(--gsn-sans);
letter-spacing:.08em;text-transform:uppercase;min-height:22px;
}
.gsn-toc ol{margin-top:12px;counter-reset:t}
.gsn-toc li{counter-increment:t;margin-bottom:7px;font-size:.9375rem;line-height:1.45}
.gsn-toc li::before{content:counter(t) ". ";color:var(--gsn-muted)}
.gsn-toc a{color:var(--gsn-ink);text-decoration:none;border-bottom:1px solid var(--gsn-rule)}
.gsn-toc a:hover{color:var(--gsn-accent);border-bottom-color:var(--gsn-accent)}
.gsn-faq{margin-top:30px}
.gsn-faq__q{
font:700 1.0625rem/1.35 var(--gsn-sans);
padding-top:16px;border-top:1px solid var(--gsn-rule);margin-bottom:7px;
}
.gsn-faq__a{font-size:1rem;line-height:1.64;margin-bottom:16px;color:#2c3237}
/* --- 11b врезки из статей: формула, панель, лесенка ---------------------- */
/* Писатель отдал их псевдографикой в ``` — здесь они уже настоящая разметка. */
.gsn-art caption{
caption-side:top;text-align:left;
font:700 .8125rem/1.3 var(--gsn-sans);letter-spacing:.08em;text-transform:uppercase;
color:var(--gsn-muted);padding-bottom:9px;
}
.gsn-formula{
background:var(--gsn-tint);border-left:3px solid var(--gsn-accent);
padding:14px 18px;margin-top:22px;margin-bottom:22px;
font:600 1rem/1.5 var(--gsn-sans);font-variant-numeric:tabular-nums;
letter-spacing:.005em;
}
.gsn-box{
background:var(--gsn-tint);padding:16px 18px 14px;
margin-top:24px;margin-bottom:24px;
}
.gsn-box > :last-child{margin-bottom:0}
.gsn-box__head{
font:700 .8125rem/1.3 var(--gsn-sans);letter-spacing:.08em;text-transform:uppercase;
color:var(--gsn-ink);margin-bottom:12px;
padding-bottom:9px;border-bottom:1px solid var(--gsn-rule);
}
.gsn-art .gsn-box p{font-size:1rem;line-height:1.6;margin-bottom:10px}
.gsn-art .gsn-box .gsn-list{margin-bottom:0}
.gsn-art .gsn-box li{font-size:1rem}
.gsn-box__note{font-size:.9375rem;color:#2c3237;margin-top:10px}
.gsn-art .gsn-ladder{
background:var(--gsn-tint);padding:16px 18px 6px;margin-top:24px;margin-bottom:24px;
}
.gsn-art .gsn-ladder li{margin-bottom:12px}
.gsn-art .gsn-ladder .gsn-note{white-space:nowrap}
/* --- 11в карточки: одна раскладка на статью, раздел и кластер ------------ */
.gsn-cards{
display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
gap:22px 24px;margin-top:20px;margin-bottom:26px;
}
.gsn-cards > *{min-width:0}
.gsn-card{display:flex;flex-direction:column}
.gsn-card > a{
display:block;height:100%;
color:var(--gsn-ink);text-decoration:none;
border-top:3px solid var(--gsn-ink);padding-top:12px;
}
.gsn-card > a:hover{border-top-color:var(--gsn-accent)}
.gsn-card > a:hover .gsn-card__t{color:var(--gsn-accent)}
.gsn-card__ph{display:block;margin-bottom:10px}
.gsn-card__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--gsn-tint)}
.gsn-card__k{
display:block;
font:700 .6875rem/1.2 var(--gsn-sans);letter-spacing:.12em;text-transform:uppercase;
color:var(--gsn-accent);margin-bottom:6px;
}
.gsn-card__t{display:block;font:700 1.0625rem/1.3 var(--gsn-serif);margin-bottom:6px}
.gsn-card__n{display:block;font-size:.875rem;line-height:1.5;color:#3a4046}
/* подзаголовок внутри кластера: без верхней линейки, иначе он спорит с h2 прозы */
.gsn-art .gsn-sub__h{
font:700 .8125rem/1.2 var(--gsn-sans);letter-spacing:.11em;text-transform:uppercase;
color:var(--gsn-muted);
margin-top:6px;margin-bottom:12px;padding-top:0;border-top:0;
}
/* карточка-плитка без фото: для кластера старых страниц на хабе */
.gsn-cards--tile .gsn-card > a{
background:var(--gsn-tint);padding:14px 16px 16px;border-top-width:3px;
}
.gsn-cards--tile .gsn-card > a:hover{background:#fff}
/* --- 12 полоса размещений (правая колонка донора) ----------------------- */
.gsn-part{background:var(--gsn-tint);padding-left:18px;padding-right:18px;padding-top:18px;padding-bottom:16px;
margin-top:34px}
.gsn-part__head{
display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
font:700 .8125rem/1.3 var(--gsn-sans);letter-spacing:.08em;text-transform:uppercase;
}
.gsn-part__head span{font-weight:400;letter-spacing:.06em;color:var(--gsn-muted)}
.gsn-part__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;
background:var(--gsn-rule)}
.gsn-part__grid > *{min-width:0;background:var(--gsn-tint)}
.gsn-part__i{
display:flex;align-items:center;gap:10px;
/* 16px — нижняя граница нормы по gate_padding: при 14px текст ячейки прилипал
к её краю на 1440 и 1024 */
padding:12px 16px;min-height:56px;
color:var(--gsn-ink);text-decoration:none;font-size:.9375rem;line-height:1.35;
}
.gsn-part__i:hover{background:#fff;color:var(--gsn-accent)}
.gsn-part__i img{width:40px;height:40px;object-fit:contain;background:#fff;flex:none}
.gsn-part__n{font-weight:600}
.gsn-part__note{display:block;font-size:.8125rem;font-weight:400;color:var(--gsn-muted)}
/* вторая проданная ссылка строки: у донора она сидела внутри первой, а вложенная
ссылка — невалидная разметка, поэтому строка стала ячейкой из двух ссылок */
.gsn-part__c{display:flex;flex-direction:column}
.gsn-part__c .gsn-part__i{flex:1}
.gsn-part__alt{
/* 16px, как у .gsn-part__i: при 14px gate_padding ловил прилипший текст
во второй ссылке строки на 1440 и 1024 */
display:block;padding:0 16px 11px;margin-top:-6px;
font-size:.8125rem;line-height:1.4;color:var(--gsn-muted);
}
.gsn-part__alt:hover{color:var(--gsn-accent)}
/* --- 13 лента анонсов --------------------------------------------------- */
.gsn-feed{margin-top:8px}
.gsn-feed__head{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding-bottom:8px;border-bottom:3px solid var(--gsn-ink);margin-bottom:4px;
margin-top:34px;
}
.gsn-feed__head h2{
font:700 1.0625rem/1.2 var(--gsn-sans);letter-spacing:.09em;text-transform:uppercase;
margin:0;padding:0;border:0;
}
.gsn-feed__more{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-decoration:none;
white-space:nowrap}
.gsn-feed__more:hover{color:var(--gsn-ink)}
.gsn-item{
display:grid;grid-template-columns:132px 1fr;gap:16px;
padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--gsn-rule);
}
.gsn-item > *{min-width:0}
.gsn-item:last-child{border-bottom:0}
.gsn-item__ph{margin:0}
.gsn-item__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--gsn-tint)}
.gsn-item h3{font:700 1.125rem/1.28 var(--gsn-serif);margin-bottom:6px}
.gsn-item h3 a{color:var(--gsn-ink);text-decoration:none}
.gsn-item h3 a:hover{color:var(--gsn-accent)}
.gsn-item p{font-size:.9375rem;line-height:1.52;color:#3a4046;margin:0}
.gsn-item--flat{grid-template-columns:1fr}
.gsn-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 26px}
.gsn-cols > *{min-width:0}
.gsn-cols--rule > * + *{border-left:1px solid var(--gsn-rule);padding-left:26px}
/* --- 13b разметка робота автопостинга ----------------------------------- */
/* Анонс на /nyheter/ вставляет робот moz.biz, СРАЗУ после маркера ,
и разметку кладёт свою — в шаблоне она не настраивается:
То есть прямой потомок .gsn-hub с ИНЛАЙНОВЫМ style и без класса. Приписать ему
свой класс нечем, поэтому ряд ленты набирается по этому признаку: своих
`div[style]` на сайте нет ни одного (проверено по всем шести типам страниц),
а `.gsn-hub` есть только у хабов, из которых анонсы приходят на один.
В робот кладёт ДАТУ, а не отрывок, — значит это мета-строка, не проза. */
.gsn-hub > div[style]{
/* инлайновый style сильнее класса — иначе 20px робота ломают ритм ленты */
margin-bottom:0 !important;
padding-top:18px;padding-bottom:18px;
border-bottom:1px solid var(--gsn-rule);
}
.gsn-hub > div[style] h4{
font:700 1.1875rem/1.28 var(--gsn-serif);margin-top:0;margin-bottom:6px;
}
.gsn-hub > div[style] h4 a{color:var(--gsn-ink);text-decoration:none}
.gsn-hub > div[style] h4 a:hover{color:var(--gsn-accent)}
.gsn-hub > div[style] p{
font-size:.8125rem;line-height:1.5;color:var(--gsn-muted);margin-bottom:0;
}
/* дату своей статьи робот кладёт ВНУТРЬ тела, этим классом; пустого места под неё
в шаблоне не оставляем — токена даты у робота нет, а поле без источника не ставим */
.gsn-art .pbn-published-date{
font-size:.8125rem;line-height:1.5;color:var(--gsn-muted);margin-bottom:20px;
}
/* --- 14 главная: лид ---------------------------------------------------- */
/* H1 полосы — строка выходных данных: она обязана быть, но доминировать на
первом экране должен лид, как на газетной полосе. */
.gsn-front__head{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 26px;
align-items:baseline;
padding-bottom:14px;border-bottom:1px solid var(--gsn-rule);margin-bottom:24px;
}
.gsn-front__head h1{
font:700 1.5rem/1.2 var(--gsn-serif);letter-spacing:-.012em;margin:0;
padding:0;border:0;
}
.gsn-front__head p{font-size:.9375rem;line-height:1.55;color:#3a4046;margin:0}
.gsn-lead{padding-bottom:26px;border-bottom:3px solid var(--gsn-ink);margin-bottom:6px;
display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:24px}
.gsn-lead__ph{display:block}
.gsn-lead__ph img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--gsn-tint)}
.gsn-lead__tx{min-width:0}
.gsn-lead h2{
font:700 clamp(1.7rem,1.1rem + 2vw,2.35rem)/1.12 var(--gsn-serif);
letter-spacing:-.017em;margin-bottom:11px;text-wrap:balance;
}
.gsn-lead h2 a{color:var(--gsn-ink);text-decoration:none}
.gsn-lead h2 a:hover{color:var(--gsn-accent)}
.gsn-lead p{font:400 1.125rem/1.5 var(--gsn-serif);color:#2c3237;max-width:44em}
.gsn-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 24px;
padding-top:20px}
.gsn-sub > *{min-width:0}
.gsn-sub > * + *{border-left:1px solid var(--gsn-rule);padding-left:24px}
.gsn-sub h3{font:700 1.0625rem/1.3 var(--gsn-serif);margin-bottom:6px}
.gsn-sub h3 a{color:var(--gsn-ink);text-decoration:none}
.gsn-sub h3 a:hover{color:var(--gsn-accent)}
.gsn-sub p{font-size:.875rem;line-height:1.5;color:#3a4046;margin:0}
.gsn-sub__ph img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--gsn-tint);
margin-bottom:9px}
/* донорская часть первой полосы: она ниже новостной, отделена жирной линейкой */
.gsn-donor{margin-top:40px;padding-top:4px;border-top:3px solid var(--gsn-ink)}
.gsn-donor > h2:first-child{border-top:0;padding-top:0;margin-top:18px}
/* --- 15 виджеты форм (наши, приезжают с сервера) ------------------------ */
.gsn-widget{
background:var(--gsn-tint);padding-left:18px;padding-right:18px;padding-top:18px;padding-bottom:18px;
margin-top:28px;
}
.gsn-widget h2{font:700 1.1875rem/1.25 var(--gsn-serif);margin-bottom:8px;border:0;padding:0}
.gsn-widget p{font-size:.9375rem;line-height:1.55;margin-bottom:12px}
.gsn-widget input,.gsn-widget textarea,.gsn-widget select{
width:100%;min-height:46px;padding:10px 12px;
font:400 1rem/1.4 var(--gsn-sans);color:var(--gsn-ink);
background:#fff;border:1px solid var(--gsn-rule);
}
.gsn-widget textarea{min-height:120px}
.gsn-widget label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:5px;
margin-top:12px}
.gsn-widget button,.gsn-widget input[type=submit]{
width:auto;min-height:46px;padding-left:22px;padding-right:22px;
background:var(--gsn-ink);color:#fff;border:0;
font:700 .9375rem/1 var(--gsn-sans);cursor:pointer;margin-top:14px;
}
.gsn-widget button:hover,.gsn-widget input[type=submit]:hover{background:var(--gsn-accent)}
/* --- 16 подвал ---------------------------------------------------------- */
.gsn-foot{margin-top:0}
.gsn-foot__plate{background:var(--gsn-forest);color:#e7ece9}
.gsn-foot__grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 34px;
padding-top:34px;padding-bottom:32px;
}
.gsn-foot__grid > *{min-width:0}
.gsn-foot__cell h2{
display:flex;align-items:center;gap:9px;
font:700 .8125rem/1.3 var(--gsn-sans);letter-spacing:.1em;text-transform:uppercase;
color:#fff;margin-bottom:11px;
}
.gsn-foot__cell p{font-size:.875rem;line-height:1.6;color:#c6d1cb;margin-bottom:9px}
.gsn-foot__cell p:last-child{margin-bottom:0}
.gsn-foot__big{display:flex;align-items:center;gap:10px;color:#fff}
/* номер Хjelpelinjen стоит в двух местах: в тёмном подвале и во врезке .gsn-box
на светлом листе (/ansvarlig-spill/). Белый по умолчанию давал во врезке
контраст 1.11 — то есть невидимый телефон помощи. Базовый цвет тёмный,
белый — только внутри плиты подвала. */
.gsn-tel{
font:700 1.5rem/1.1 var(--gsn-serif);color:var(--gsn-ink);text-decoration:none;
letter-spacing:.01em;
}
.gsn-tel:hover{color:var(--gsn-accent)}
.gsn-foot__plate .gsn-tel{color:#fff}
.gsn-foot__plate .gsn-tel:hover{color:#f4a261}
.gsn-age{display:flex;align-items:center;gap:9px;font-size:.8125rem}
.gsn-age span{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;flex:none;
border:2px solid #e7ece9;border-radius:50%;
font:700 .8125rem/1 var(--gsn-sans);color:#fff;
}
.gsn-foot__strip{background:var(--gsn-canvas);border-top:1px solid var(--gsn-rule)}
.gsn-foot__strip .gsn-band{padding-top:20px;padding-bottom:24px}
.gsn-foot__chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
.gsn-foot__chips a{
display:inline-flex;align-items:center;min-height:34px;
padding-left:13px;padding-right:13px;
background:#fff;border:1px solid var(--gsn-rule);
font-size:.8125rem;font-weight:600;color:var(--gsn-ink);text-decoration:none;
}
.gsn-foot__chips a:hover{border-color:var(--gsn-accent);color:var(--gsn-accent)}
.gsn-foot__tech{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:12px}
.gsn-foot__tech a{
display:inline-flex;align-items:center;min-height:32px;
font-size:.8125rem;color:var(--gsn-muted);text-decoration:none;
border-bottom:1px solid transparent;
}
.gsn-foot__tech a:hover{color:var(--gsn-accent);border-bottom-color:var(--gsn-accent)}
.gsn-foot__legal{font-size:.75rem;line-height:1.55;color:var(--gsn-muted);max-width:70em}
/* --- 17 мобилка --------------------------------------------------------- */
@media (max-width:900px){
.gsn-mast__in{flex-wrap:wrap;gap:6px 14px;padding-top:14px;padding-bottom:12px}
/* слоган не прячется, а переносится второй строкой: display:none на тексте —
это скрытый текст, его снимает гейт, и для читателя на телефоне подзаголовок
издания нужен не меньше, чем на большом экране */
.gsn-mast__tag{
order:3;flex-basis:100%;margin-left:0;max-width:none;
text-align:left;font-size:.75rem;line-height:1.4;
}
.gsn-burger{
display:inline-flex;align-items:center;justify-content:center;
width:46px;height:46px;margin-left:auto;margin-right:-8px;
color:var(--gsn-ink);cursor:pointer;
}
.gsn-rub{display:none;border-bottom-width:1px}
#gsn-nav:checked ~ .gsn-rub{display:block}
.gsn-rub .gsn-band{padding-top:6px;padding-bottom:10px}
.gsn-rub__list{display:block}
.gsn-rub__list a{
display:flex;align-items:center;min-height:48px;
padding-top:0;padding-bottom:0;
border-bottom:1px solid var(--gsn-rule);margin-bottom:0;
font-size:.9375rem;letter-spacing:.05em;
}
.gsn-rub__list a:hover,.gsn-rub__list a[aria-current]{border-bottom-color:var(--gsn-rule)}
.gsn-rub__list a[aria-current]::after{content:" ●";color:var(--gsn-accent);margin-left:6px}
.gsn-rub__close{
display:flex;align-items:center;justify-content:center;
min-height:46px;margin-top:10px;
background:var(--gsn-ink);color:#fff;cursor:pointer;
font:700 .8125rem/1 var(--gsn-sans);letter-spacing:.1em;text-transform:uppercase;
}
}
@media (max-width:780px){
/* поле вокруг листа 14px, а не 10: по нему же меряется зазор под шапкой,
а нижняя граница нормы рендер-гейта на мобилке — 12px */
:root{--gsn-pad:14px;--gsn-sheet:16px;--gsn-gap:14px}
.gsn-sheet{padding-top:22px;padding-bottom:28px}
.gsn-logo{font-size:1.4375rem}
.gsn-art h2{margin-top:28px}
.gsn-item{grid-template-columns:96px 1fr;gap:13px}
/* колонки схлопываются в одну: иначе рамка-разделитель уезжает на бок
колонки, которой на узком экране уже нет */
.gsn-sub,.gsn-cols,.gsn-lead,.gsn-front__head{grid-template-columns:1fr}
.gsn-lead{gap:16px}
.gsn-lead__ph img{aspect-ratio:16/9}
.gsn-cols--rule > * + *,.gsn-sub > * + *{border-left:0;padding-left:0;
border-top:1px solid var(--gsn-rule);padding-top:16px;margin-top:16px}
.gsn-foot__grid{padding-top:26px;padding-bottom:26px;gap:22px}
.gsn-tel{font-size:1.375rem}
}
@media (max-width:430px){
.gsn-item{grid-template-columns:1fr;gap:10px}
.gsn-item__ph img{aspect-ratio:16/9}
.gsn-unit,.gsn-part,.gsn-widget,.gsn-toc{padding-left:14px;padding-right:14px}
}