@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Literata:ital,opsz,wght@0,7..72,400..800;1,7..72,400..600&display=swap");
/* =========================================================
   ПОЛДЕНЬ — news site style template
   1. Tokens  2. Base  3. Layout  4. Header/Nav  5. Components
   6. Sections  7. Media (gallery, video, audio)  8. Article
   9. Dialogs  10. Utilities / motion
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F0F0EB; --surface-3:#E6E6DF;
  --ink:#15171C; --ink-2:#3A3E47; --muted:#646A75; --rule:#DDDBD3; --rule-strong:#15171C;
  --accent:#0E4C92; --accent-hover:#0A3B73; --accent-ink:#FFFFFF; --accent-soft:#E4ECF7;
  --live:#C62828; --live-soft:#FBE9E7; --ok:#1E7A4C;
  --focus:#2F6FEB;
  --overlay:rgb(10 12 16 / .72);
  --shadow-1:0 1px 2px rgb(20 22 28 / .06), 0 4px 14px rgb(20 22 28 / .06);
  --shadow-2:0 2px 6px rgb(20 22 28 / .08), 0 18px 48px rgb(20 22 28 / .14);

  --f-display:"Literata", Georgia, "Times New Roman", serif;
  --f-text:"Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-2xs:.6875rem; --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --t-xl:clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --t-2xl:clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --t-3xl:clamp(2.125rem, 1.4rem + 3.2vw, 4rem);

  --container:1320px;
  --gutter:clamp(16px, 3vw, 32px);
  --gap:clamp(16px, 2vw, 28px);
  --radius-s:4px; --radius-m:8px; --radius-l:14px;
  --nav-h:56px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1115; --surface:#161920; --surface-2:#1C2028; --surface-3:#252A34;
    --ink:#ECEBE6; --ink-2:#C8CAD0; --muted:#959BA6; --rule:#2A2F38; --rule-strong:#ECEBE6;
    --accent:#86B4F2; --accent-hover:#A8CAF7; --accent-ink:#0B1422; --accent-soft:#17263A;
    --live:#FF6259; --live-soft:#3A1614; --ok:#4FC28A;
    --focus:#86B4F2; --overlay:rgb(0 0 0 / .8);
    --shadow-1:0 1px 2px rgb(0 0 0 / .4); --shadow-2:0 20px 50px rgb(0 0 0 / .5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1115; --surface:#161920; --surface-2:#1C2028; --surface-3:#252A34;
  --ink:#ECEBE6; --ink-2:#C8CAD0; --muted:#959BA6; --rule:#2A2F38; --rule-strong:#ECEBE6;
  --accent:#86B4F2; --accent-hover:#A8CAF7; --accent-ink:#0B1422; --accent-soft:#17263A;
  --live:#FF6259; --live-soft:#3A1614; --ok:#4FC28A;
  --focus:#86B4F2; --overlay:rgb(0 0 0 / .8);
  --shadow-1:0 1px 2px rgb(0 0 0 / .4); --shadow-2:0 20px 50px rgb(0 0 0 / .5);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--bg); color:var(--ink);
  font:400 var(--t-base)/1.55 var(--f-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.has-player{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:650; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg,video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent); color:var(--accent-ink)}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.icon{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icon--fill{fill:currentColor; stroke:none}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(32px, 5vw, 64px); border-top:1px solid var(--rule)}
.section--tint{background:var(--surface-2); border-top:0}
.section--ink{background:#12151B; color:#ECEBE6; border-top:0;
  --ink:#ECEBE6; --ink-2:#C8CAD0; --muted:#98A0AB; --rule:#2B3039; --surface:#1A1E26; --surface-2:#20252E; --surface-3:#2A303A; --accent:#86B4F2; --accent-ink:#0B1422}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:clamp(18px, 2.4vw, 28px); padding-top:10px; border-top:3px solid var(--rule-strong)}
.section--tint .section-head,.section--ink .section-head{border-top-color:var(--ink)}
.section-title{font-size:var(--t-xl); font-weight:700}
.section-title small{display:block; font:500 var(--t-sm)/1.4 var(--f-text); color:var(--muted); letter-spacing:0; margin-top:4px}
.more{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); font-weight:600; color:var(--accent); white-space:nowrap}
.more:hover{text-decoration:underline; text-underline-offset:3px}
.more .icon{width:16px; height:16px}

/* ---------- 4. Header / Nav ---------- */
.topbar{border-bottom:1px solid var(--rule); font-size:var(--t-xs); color:var(--muted)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px}
.topbar__list{display:flex; gap:18px; align-items:center; overflow:hidden; white-space:nowrap}
.topbar__list b{color:var(--ink); font-weight:600}
.topbar__links{display:flex; gap:16px}
.topbar__links a:hover{color:var(--ink)}
@media (max-width:720px){ .topbar__links, .topbar__hide-s{display:none} }

.masthead .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding-block:clamp(14px, 2.4vw, 26px)}
.logo{font-family:var(--f-display); font-weight:800; font-size:clamp(2rem, 1.2rem + 3.6vw, 3.75rem); letter-spacing:.02em; line-height:1; text-align:center; font-variation-settings:"opsz" 72}
.logo span{color:var(--accent)}
.masthead__tag{font-size:var(--t-xs); color:var(--muted); text-align:center; margin-top:6px; letter-spacing:.14em; text-transform:uppercase}
.masthead__left,.masthead__right{display:flex; align-items:center; gap:8px}
.masthead__right{justify-content:flex-end}
@media (max-width:720px){
  .masthead .wrap{grid-template-columns:auto 1fr auto}
  .logo{text-align:left}
  .masthead__tag{display:none}
  .masthead__brand{justify-self:start}
  .masthead__left .btn-text{display:none}
}

.icon-btn{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; color:var(--ink); transition:background .2s}
.icon-btn:hover{background:var(--surface-2)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 16px; border-radius:999px; font-weight:600; font-size:var(--t-sm); transition:background .2s, color .2s, border-color .2s}
.btn--primary{background:var(--accent); color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border:1px solid var(--rule); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
@media (max-width:520px){
  /* Поиск доступен в строке рубрик ниже — убираем дубль из шапки, освобождаем место под «Войти». */
  .masthead__left #searchBtn2{display:none}
  /* «Войти» остаётся видимой на мобильном, но компактной. */
  .btn--subscribe{display:inline-flex; padding:0 14px; min-height:36px; font-size:var(--t-xs)}
  .logo{font-size:2rem}
}

.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-block:1px solid var(--rule)}
.nav .wrap{display:flex; align-items:center; gap:12px; height:var(--nav-h)}
.nav__mini{font-family:var(--f-display); font-weight:800; font-size:1.25rem; white-space:nowrap; max-width:0; opacity:0; overflow:hidden; transition:max-width .35s var(--ease), opacity .25s}
.nav__mini span{color:var(--accent)}
.nav.is-stuck .nav__mini{max-width:140px; opacity:1}
.nav__list{display:flex; gap:4px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; flex:1; mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.nav__list::-webkit-scrollbar{display:none}
.nav__link{display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px; font-size:var(--t-sm); font-weight:500; white-space:nowrap; color:var(--ink-2); transition:background .2s, color .2s}
.nav__link:hover{background:var(--surface-2); color:var(--ink)}
.nav__link[aria-current="page"]{background:var(--ink); color:var(--bg)}
.nav__link .icon{width:16px; height:16px}
.nav__actions{display:flex; gap:4px}

/* breaking */
.breaking{background:var(--live); color:#fff; font-size:var(--t-sm)}
.breaking .wrap{display:flex; align-items:center; gap:14px; min-height:42px; overflow:hidden}
.breaking__label{display:inline-flex; align-items:center; gap:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:var(--t-xs); white-space:nowrap}
.breaking__track{overflow:hidden; flex:1; min-width:0; mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 48px),transparent)}
.breaking__items{display:flex; gap:48px; width:max-content; animation:ticker 48s linear infinite}
.breaking__items a{white-space:nowrap}
.breaking__items a:hover{text-decoration:underline}
.breaking__items time{opacity:.75; margin-right:8px}
.breaking:hover .breaking__items{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
.pulse{width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 rgb(255 255 255 / .7); animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgb(255 255 255 / 0)}100%{box-shadow:0 0 0 0 rgb(255 255 255 / 0)}}

/* ---------- 5. Components ---------- */
/* "photo" placeholders: replace with <img> in production */
.ph{position:relative; overflow:hidden; background:var(--g, #8895a7); isolation:isolate; max-width:100%}
.ph::after{content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mix-blend-mode:overlay; opacity:.55; pointer-events:none}
.ph img{width:100%; height:100%; object-fit:cover}
.g1{--g:linear-gradient(165deg,#24334d 0%,#56698a 38%,#d9955c 72%,#f3d19c 100%)}
.g2{--g:linear-gradient(180deg,#b9cfdd 0%,#e7dac1 47%,#4b6f84 49%,#173344 100%)}
.g3{--g:radial-gradient(120% 90% at 25% 15%,#a9c792 0%,#4f7c4a 42%,#1a2d1d 100%)}
.g4{--g:linear-gradient(135deg,#0d2638 0%,#1c5876 42%,#5fb0c8 78%,#d3ecf1 100%)}
.g5{--g:radial-gradient(90% 55% at 50% 115%,#4c9a55 0%,#2a5f33 42%,#0e1913 78%)}
.g6{--g:radial-gradient(55% 70% at 50% 28%,#e0ad55 0%,#8d302b 46%,#250d10 100%)}
.g7{--g:linear-gradient(180deg,#eef2f6 0%,#c8d3de 52%,#8497ab 100%)}
.g8{--g:linear-gradient(118deg,#f1b84c 0%,#d7612a 38%,#792c3b 72%,#2b1829 100%)}
.g9{--g:linear-gradient(180deg,#f5d8a6 0%,#e1a563 42%,#b4643a 68%,#4f2c1f 100%)}
.g10{--g:radial-gradient(22% 22% at 72% 28%,#f6e8bb 0 30%,transparent 32%),linear-gradient(180deg,#0a0f1f 0%,#1b2748 60%,#3a4767 100%)}
.g11{--g:linear-gradient(200deg,#d6d0e8 0%,#8c86b8 40%,#3c3868 100%)}
.g12{--g:linear-gradient(160deg,#c9d9c5 0%,#8fae93 45%,#3f5d4d 100%)}
.r-16x9{aspect-ratio:16/9} .r-3x2{aspect-ratio:3/2} .r-4x3{aspect-ratio:4/3} .r-1x1{aspect-ratio:1} .r-4x5{aspect-ratio:4/5}

.kicker{display:inline-flex; align-items:center; gap:8px; font:700 var(--t-2xs)/1 var(--f-text); text-transform:uppercase; letter-spacing:.1em; color:var(--accent)}
.kicker--live{color:var(--live)}
.kicker--live::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:var(--t-xs); color:var(--muted)}
.meta > * + *::before{content:""; display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; margin-right:12px; vertical-align:middle; opacity:.7}
.badge{position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:rgb(10 12 16 / .72); color:#fff; font:600 var(--t-xs)/1 var(--f-text); backdrop-filter:blur(6px)}
.badge .icon{width:14px; height:14px}
.badge--tl{top:12px; left:12px} .badge--br{right:12px; bottom:12px}

/* headline link: underline grows on hover of whole card */
.hl{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .35s var(--ease)}
.card:hover .hl,.hl:hover,.hl:focus-visible{background-size:100% 1px}
.stretched::after{content:""; position:absolute; inset:0; z-index:1}

/* card */
.card{position:relative; display:flex; flex-direction:column; gap:12px}
.card .ph{border-radius:var(--radius-m)}
.card .ph > .ph-in{position:absolute; inset:0; background:inherit; transition:transform .6s var(--ease)}
.card:hover .ph > .ph-in{transform:scale(1.04)}
.card__title{font-size:var(--t-lg); font-weight:620}
.card__dek{color:var(--ink-2); font-size:var(--t-sm); line-height:1.5}
.card__body{display:flex; flex-direction:column; gap:8px}

.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1060px){ .grid-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){
  .grid-4{grid-template-columns:minmax(0,1fr); gap:0}
  .grid-4 .card{flex-direction:row-reverse; align-items:flex-start; gap:14px; padding-block:14px; border-top:1px solid var(--rule)}
  .grid-4 .card:first-child{border-top:0; padding-top:0}
  .grid-4 .card .ph{width:108px; flex:none; aspect-ratio:1}
  .grid-4 .card__dek{display:none}
  .grid-4 .card__title{font-size:var(--t-md)}
}

/* ---------- 6. Sections ---------- */
/* lead */
.lead{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,.95fr); gap:var(--gap); padding-block:clamp(20px, 3vw, 36px)}
.lead-main .ph{border-radius:var(--radius-m)}
.lead-main .card__title{font-size:var(--t-2xl); font-weight:700; line-height:1.08}
.lead-main .card__dek{font-size:var(--t-md)}
.lead-side{display:flex; flex-direction:column; border-left:1px solid var(--rule); padding-left:var(--gap)}
.lead-side .card{padding-block:16px; border-top:1px solid var(--rule)}
.lead-side .card:first-child{padding-top:0; border-top:0}
.lead-side .card__title{font-size:var(--t-md); line-height:1.3}
.lead-side .card--with-img .ph{aspect-ratio:16/9}
.mostread{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); padding:20px; align-self:start}
.mostread h2{font-size:var(--t-md); font-family:var(--f-text); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:var(--t-xs); margin-bottom:8px}
.mostread ol{list-style:none; margin:0; padding:0; counter-reset:mr}
.mostread li{position:relative; counter-increment:mr; display:grid; grid-template-columns:32px 1fr; gap:10px; padding-block:12px; border-top:1px solid var(--rule)}
.mostread li:first-child{border-top:0}
.mostread li::before{content:counter(mr); font:700 1.5rem/1 var(--f-display); color:var(--accent)}
.mostread a{font-weight:500; font-size:var(--t-sm); line-height:1.4}
.mostread .meta{margin-top:4px}
@media (max-width:1100px){
  .lead{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .mostread{grid-column:1 / -1}
  .mostread ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
  .mostread li:nth-child(2){border-top:0}
}
@media (max-width:760px){
  .lead{grid-template-columns:minmax(0,1fr)}
  .lead-side{border-left:0; padding-left:0}
  .lead-side .card:first-child{padding-top:16px; border-top:1px solid var(--rule)}
  .mostread ol{grid-template-columns:1fr}
  .mostread li:nth-child(2){border-top:1px solid var(--rule)}
}

/* feed with filter */
.feed-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:calc(var(--gap) * 1.5)}
@media (max-width:980px){ .feed-layout{grid-template-columns:minmax(0,1fr)} }
.chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-bottom:12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--rule); font-size:var(--t-sm); font-weight:500; color:var(--ink-2); transition:all .2s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.feed{list-style:none; margin:0; padding:0}
.feed__item{position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; padding-block:14px; border-top:1px solid var(--rule)}
.feed__item time{font-weight:600; font-size:var(--t-sm); color:var(--muted); padding-top:2px}
.feed__item h3{font-family:var(--f-text); font-size:var(--t-base); font-weight:600; line-height:1.4; letter-spacing:0}
.feed__item .kicker{margin-top:6px}
.feed__item.is-important h3{font-weight:700}
.feed__item.is-important time{color:var(--live)}
.feed__item[hidden]{display:none}
.feed__empty{padding:24px 0; color:var(--muted)}

.newsletter{background:var(--accent); color:var(--accent-ink); border-radius:var(--radius-l); padding:24px; display:flex; flex-direction:column; gap:14px; align-self:start; position:sticky; top:calc(var(--nav-h) + 20px + env(safe-area-inset-top, 0px))}
.newsletter h3{font-size:var(--t-xl)}
.newsletter p{opacity:.9; font-size:var(--t-sm)}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:var(--t-xs); font-weight:600}
.field input{height:46px; border-radius:var(--radius-m); border:1px solid transparent; background:var(--bg); color:var(--ink); padding:0 14px}
.field input:focus{outline:2px solid var(--accent-ink); outline-offset:2px}
.newsletter .btn{background:var(--accent-ink); color:var(--accent); min-height:46px}
.newsletter__ok{font-weight:600}
.newsletter__err{font-size:var(--t-xs); font-weight:600}

/* opinions */
.opinions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:900px){ .opinions{grid-template-columns:minmax(0,1fr)} }
.opinion{position:relative; display:grid; grid-template-columns:56px 1fr; gap:16px; padding:20px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); transition:border-color .2s, transform .3s var(--ease)}
.opinion:hover{border-color:var(--ink)}
.avatar{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font:700 1.125rem/1 var(--f-display); color:#fff}
.opinion__author{font-size:var(--t-xs); color:var(--muted); margin-bottom:6px}
.opinion__author b{color:var(--ink); font-weight:600}
.opinion h3{font-size:var(--t-md); font-style:italic; font-weight:500; line-height:1.35}

/* ---------- 7. Media ---------- */
/* gallery */
.gallery{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:clamp(120px, 14vw, 190px); gap:10px}
.gallery__item{margin:0; position:relative; border-radius:var(--radius-m); overflow:hidden; cursor:zoom-in}
.gallery__item:nth-child(1){grid-column:span 3; grid-row:span 2}
.gallery__item:nth-child(2){grid-column:span 3}
.gallery__item:nth-child(3){grid-column:span 2}
.gallery__item:nth-child(4){grid-column:span 1}
.gallery__item:nth-child(5){grid-column:span 2}
.gallery__item:nth-child(6){grid-column:span 2}
.gallery__item:nth-child(7){grid-column:span 2}
.gallery__item .ph{position:absolute; inset:0; transition:transform .6s var(--ease)}
.gallery__item:hover .ph{transform:scale(1.04)}
.gallery__item figcaption{position:absolute; inset:auto 0 0 0; z-index:2; padding:28px 12px 10px; color:#fff; font-size:var(--t-xs); background:linear-gradient(transparent, rgb(0 0 0 / .65)); opacity:0; transform:translateY(6px); transition:all .3s var(--ease)}
.gallery__item:hover figcaption,.gallery__item:focus-visible figcaption{opacity:1; transform:none}
.gallery__count{position:absolute; right:12px; top:12px; z-index:2}
@media (max-width:760px){
  .gallery{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; grid-auto-rows:auto; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery__item{flex:0 0 78%; aspect-ratio:4/5; scroll-snap-align:center}
  .gallery__item figcaption{opacity:1; transform:none}
}
.gallery-intro{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; margin-bottom:18px}
.gallery-intro h3{font-size:var(--t-2xl)}
.gallery-intro p{color:var(--ink-2); max-width:60ch; margin-top:8px}

/* video */
.video-layout{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:var(--gap)}
@media (max-width:980px){ .video-layout{grid-template-columns:minmax(0,1fr)} }
.player{position:relative; border-radius:var(--radius-l); overflow:hidden; background:#000; color:#fff; aspect-ratio:16/9; max-width:100%}
.player .ph{position:absolute; inset:0}
.player.is-playing .ph{animation:kenburns 24s linear infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translate(-2%, 1%)}}
.player__big{position:absolute; inset:0; margin:auto; z-index:3; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:rgb(255 255 255 / .92); color:#111; box-shadow:0 10px 40px rgb(0 0 0 / .4); transition:transform .25s var(--ease), opacity .25s}
.player__big:hover{transform:scale(1.07)}
.player__big .icon{width:32px; height:32px; margin-left:4px}
.player.is-playing .player__big{opacity:0; pointer-events:none; transform:scale(.8)}
.player__title{position:absolute; left:0; right:0; top:0; z-index:2; padding:18px 20px 40px; background:linear-gradient(rgb(0 0 0 / .6), transparent)}
.player__title h3{font-size:var(--t-lg); color:#fff}
.player__controls{position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center; gap:10px; padding:28px 14px 12px; background:linear-gradient(transparent, rgb(0 0 0 / .7)); transition:opacity .3s}
.player.is-playing:not(:hover):not(:focus-within) .player__controls{opacity:0}
.player__controls .icon-btn{color:#fff; width:36px; height:36px}
.player__controls .icon-btn:hover{background:rgb(255 255 255 / .15)}
.player__time{font-size:var(--t-xs); font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.9}
.range{--p:0%; -webkit-appearance:none; appearance:none; flex:1; height:18px; background:transparent; cursor:pointer; min-width:0}
.range::-webkit-slider-runnable-track{height:4px; border-radius:4px; background:linear-gradient(90deg, var(--track-fill, #fff) var(--p), var(--track-bg, rgb(255 255 255 / .3)) var(--p))}
.range::-moz-range-track{height:4px; border-radius:4px; background:linear-gradient(90deg, var(--track-fill, #fff) var(--p), var(--track-bg, rgb(255 255 255 / .3)) var(--p))}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:var(--track-fill, #fff); border:0; transition:transform .15s}
.range::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--track-fill, #fff); border:0}
.range:hover::-webkit-slider-thumb{transform:scale(1.25)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus); outline-offset:2px}
.video-meta{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.video-meta p{color:var(--ink-2); max-width:70ch}
.playlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.playlist__item{display:grid; grid-template-columns:148px minmax(0,1fr); gap:14px; padding:8px; border-radius:var(--radius-m); text-align:left; width:100%; transition:background .2s}
.playlist__item:hover{background:var(--surface-2)}
.playlist__item[aria-current="true"]{background:var(--surface-3)}
.playlist__item .ph{border-radius:var(--radius-s); aspect-ratio:16/9}
.playlist__item h4{font-family:var(--f-text); font-size:var(--t-sm); font-weight:600; line-height:1.35; letter-spacing:0}
.playlist__item .meta{margin-top:6px}
.playlist__now{display:none; color:var(--accent); font-size:var(--t-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px}
.playlist__item[aria-current="true"] .playlist__now{display:block}
@media (max-width:980px){
  .playlist{flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); gap:12px}
  .playlist::-webkit-scrollbar{display:none}
  .playlist > li{flex:0 0 min(72%, 280px); scroll-snap-align:start}
  .playlist__item{grid-template-columns:1fr; padding:0}
  .playlist__item:hover,.playlist__item[aria-current="true"]{background:none}
  .playlist__item[aria-current="true"] .ph{outline:2px solid var(--accent); outline-offset:2px}
}

/* audio / podcasts */
.episodes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
@media (max-width:980px){ .episodes{grid-template-columns:minmax(0,1fr)} }
.episode{display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:16px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); align-items:start}
.episode .ph{border-radius:var(--radius-m); aspect-ratio:1}
.episode__show{font-size:var(--t-xs); font-weight:600; color:var(--accent); margin-bottom:4px}
.episode h3{font-size:var(--t-md); line-height:1.3}
.episode__row{display:flex; align-items:center; gap:12px; margin-top:12px}
.play-btn{display:inline-grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--ink); color:var(--bg); transition:transform .2s var(--ease), background .2s}
.play-btn:hover{transform:scale(1.06)}
.play-btn .icon{width:18px; height:18px}
.play-btn[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.wave{display:flex; align-items:center; gap:2px; height:28px; flex:1; min-width:0; overflow:hidden}
.wave i{flex:1; min-width:2px; max-width:4px; border-radius:2px; background:var(--rule); height:var(--h)}
.wave i.on{background:var(--accent)}
.episode.is-playing .wave i{animation:eq 1s ease-in-out infinite alternate; animation-delay:var(--d)}
@keyframes eq{to{transform:scaleY(.45)}}

.miniplayer{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--surface); border-top:1px solid var(--rule); box-shadow:var(--shadow-2); padding-bottom:env(safe-area-inset-bottom, 0px); transform:translateY(110%); visibility:hidden; transition:transform .4s var(--ease), visibility 0s .4s}
.miniplayer.is-open{transform:none; visibility:visible; transition:transform .4s var(--ease)}
.miniplayer .wrap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; min-height:76px}
.miniplayer__info{display:flex; align-items:center; gap:12px; min-width:0}
.miniplayer__info .ph{width:48px; height:48px; border-radius:var(--radius-s); flex:none}
.miniplayer__text{min-width:0}
.miniplayer__text b{display:block; font-size:var(--t-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.miniplayer__text span{font-size:var(--t-xs); color:var(--muted)}
.miniplayer__center{display:flex; flex-direction:column; gap:2px; min-width:0}
.miniplayer__btns{display:flex; align-items:center; justify-content:center; gap:6px}
.miniplayer__bar{display:flex; align-items:center; gap:10px; font-size:var(--t-xs); color:var(--muted)}
.miniplayer .range{--track-fill:var(--accent); --track-bg:var(--surface-3)}
.speed{min-width:44px; height:30px; border-radius:999px; border:1px solid var(--rule); font-size:var(--t-xs); font-weight:700}
.speed:hover{border-color:var(--ink)}
.miniplayer__right{display:flex; align-items:center; gap:6px}
@media (max-width:760px){
  .miniplayer .wrap{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info right" "bar bar"; gap:6px 10px; padding-block:10px}
  .miniplayer__info{grid-area:info}
  .miniplayer__right{grid-area:right}
  .miniplayer__center{display:contents}
  .miniplayer__btns{display:none}
  .miniplayer__bar{grid-area:bar}
  .miniplayer__right .mp-skip{display:none}
}
@media (min-width:761px){ .miniplayer__right .mp-mobile{display:none} }

/* ---------- 8. Article ---------- */
.progress{position:fixed; left:0; top:env(safe-area-inset-top, 0px); height:3px; width:100%; z-index:70; background:var(--accent); transform-origin:0 50%; transform:scaleX(var(--read, 0)); pointer-events:none}
.article{--article-size:1.1875rem; padding-block:clamp(24px, 4vw, 48px)}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:var(--t-sm); color:var(--muted); margin-bottom:18px}
.crumbs a:hover{color:var(--ink)}
.crumbs li{list-style:none}
.crumbs ol{display:flex; gap:8px; margin:0; padding:0}
.crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5}
.article__head{max-width:860px}
.article h1{font-size:var(--t-3xl); font-weight:750; line-height:1.04; letter-spacing:-.02em; margin-block:14px 18px; font-variation-settings:"opsz" 72}
.article__dek{font-family:var(--f-display); font-size:var(--t-lg); line-height:1.45; color:var(--ink-2); font-weight:400}
.byline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding-block:14px; border-block:1px solid var(--rule)}
.byline__who{display:flex; align-items:center; gap:12px}
.byline__who .avatar{width:44px; height:44px; font-size:1rem}
.byline__who b{display:block; font-size:var(--t-sm)}
.byline__tools{display:flex; align-items:center; gap:4px}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden}
.seg button{height:36px; padding:0 12px; font-weight:600; font-size:var(--t-sm)}
.seg button:hover{background:var(--surface-2)}
.seg button + button{border-left:1px solid var(--rule)}
.article__hero{margin-block:28px}
.article__hero .ph{border-radius:var(--radius-m)}
figcaption.caption{margin-top:10px; font-size:var(--t-xs); color:var(--muted); max-width:70ch}
figcaption.caption b{color:var(--ink-2); font-weight:600}
.article__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 680px) minmax(0,1fr); gap:var(--gap)}
.article__body{grid-column:2; font-family:var(--f-display); font-size:var(--article-size); line-height:1.7; font-variation-settings:"opsz" 16}
.article__body > * + *{margin-top:1.1em}
.article__body > p:first-of-type::first-letter{float:left; font-size:3.6em; line-height:.86; font-weight:700; margin:.06em .1em 0 0; color:var(--accent)}
.article__body h2{font-size:1.45em; margin-top:1.8em}
.article__body a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.article__body a:hover{text-decoration-thickness:2px}
.article__body ul{padding-left:1.2em}
.article__body li + li{margin-top:.4em}
.article__body li::marker{color:var(--accent)}
.pullquote{margin-inline:0; margin-block:1.8em!important; padding:4px 0 4px 24px; border-left:4px solid var(--accent); font-size:1.35em; line-height:1.35; font-style:italic}
.pullquote cite{display:block; margin-top:10px; font:500 var(--t-sm)/1.4 var(--f-text); font-style:normal; color:var(--muted)}
.factbox{font-family:var(--f-text); font-size:var(--t-base); line-height:1.55; background:var(--surface-2); border-radius:var(--radius-l); padding:20px 22px}
.factbox h3{font-family:var(--f-text); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px}
.factbox dl{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0}
.factbox dt{font:700 var(--t-lg)/1.1 var(--f-display); color:var(--accent); font-variant-numeric:tabular-nums}
.factbox dd{margin:0; color:var(--ink-2); align-self:center}
.inline-audio{display:flex; align-items:center; gap:14px; font-family:var(--f-text); font-size:var(--t-sm); padding:14px 16px; border:1px solid var(--rule); border-radius:var(--radius-l)}
.inline-audio b{display:block}
.inline-audio span{color:var(--muted); font-size:var(--t-xs)}
.figure-wide{grid-column:1 / -1; margin:0}
.figure-wide .ph{border-radius:var(--radius-m)}
.tags{display:flex; flex-wrap:wrap; gap:8px; font-family:var(--f-text)}
.tag{display:inline-flex; height:32px; align-items:center; padding:0 12px; border-radius:999px; background:var(--surface-2); font-size:var(--t-sm); font-weight:500}
.tag:hover{background:var(--surface-3)}
@media (max-width:760px){ .article__grid{grid-template-columns:1fr} .article__body,.figure-wide{grid-column:1} }

/* ---------- 9. Dialogs ---------- */
dialog{border:0; padding:0; color:var(--ink); background:var(--surface); max-width:100%; max-height:100%}
dialog::backdrop{background:var(--overlay); backdrop-filter:blur(3px)}
.drawer{margin:0 auto 0 0; height:100%; width:min(360px, 88vw); padding:calc(16px + env(safe-area-inset-top, 0px)) 20px 24px; display:none; flex-direction:column; gap:16px}
.drawer[open]{display:flex; animation:slidein .35s var(--ease)}
@keyframes slidein{from{transform:translateX(-100%)}}
.drawer__head{display:flex; align-items:center; justify-content:space-between}
.drawer nav a,
.drawer nav .drawer__acct button{display:flex; justify-content:space-between; align-items:center; width:100%; padding:14px 4px; border:0; border-bottom:1px solid var(--rule); background:none; color:inherit; font-family:inherit; font-weight:600; font-size:var(--t-md); text-align:left; cursor:pointer}
.drawer nav a:hover,
.drawer nav .drawer__acct button:hover{color:var(--accent)}
.drawer__foot{margin-top:auto; display:flex; flex-direction:column; gap:10px}

.search{width:min(720px, calc(100% - 32px)); margin:clamp(16px, 10vh, 120px) auto auto; border-radius:var(--radius-l); box-shadow:var(--shadow-2)}
.search[open]{animation:pop .25s var(--ease)}
@keyframes pop{from{opacity:0; transform:translateY(-8px) scale(.98)}}
.search__bar{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 18px; border-bottom:1px solid var(--rule)}
.search__bar input{flex:1; height:44px; border:0; background:none; font-size:var(--t-md); outline:none; min-width:0}
.search__results{list-style:none; margin:0; padding:8px; max-height:min(60vh, 460px); overflow:auto}
.search__results a{display:block; padding:12px; border-radius:var(--radius-m)}
.search__results a:hover,.search__results a:focus-visible{background:var(--surface-2)}
.search__results b{display:block; font-weight:600; font-size:var(--t-sm)}
.search__results small{color:var(--muted)}
.search__results mark{background:var(--accent-soft); color:inherit; border-radius:2px}
.search__hint{padding:14px 20px; font-size:var(--t-xs); color:var(--muted); border-top:1px solid var(--rule)}
kbd{font:600 var(--t-2xs)/1 var(--f-text); padding:3px 6px; border:1px solid var(--rule); border-bottom-width:2px; border-radius:4px}

.lightbox{width:100%; height:100%; background:rgb(8 9 12 / .96); color:#fff; display:none; flex-direction:column}
.lightbox[open]{display:flex; animation:fade .25s}
.lightbox::backdrop{background:transparent}
@keyframes fade{from{opacity:0}}
.lightbox__top{display:flex; justify-content:space-between; align-items:center; padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px}
.lightbox__top .icon-btn{color:#fff}
.lightbox__top .icon-btn:hover{background:rgb(255 255 255 / .12)}
.lightbox__stage{flex:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:0 12px; min-height:0}
.lightbox__img{width:100%; max-height:100%; aspect-ratio:3/2; max-width:min(100%, calc((100vh - 220px) * 1.5)); margin:auto; border-radius:var(--radius-s); touch-action:pan-y}
.lightbox__nav{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgb(255 255 255 / .1); color:#fff}
.lightbox__nav:hover{background:rgb(255 255 255 / .2)}
.lightbox__cap{padding:14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); max-width:820px; margin-inline:auto; text-align:center; font-size:var(--t-sm); color:#d9dbe0}
.lightbox__cap b{color:#fff}
@media (max-width:620px){ .lightbox__nav{display:none} .lightbox__stage{grid-template-columns:1fr} }

.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:90; transform:translate(-50%, 20px); opacity:0; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:999px; font-size:var(--t-sm); font-weight:600; transition:all .3s var(--ease); pointer-events:none}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}
body.has-player .toast{bottom:calc(100px + env(safe-area-inset-bottom, 0px))}

/* footer */
.footer{background:#0F1115; color:#C8CAD0; padding-block:48px 32px; margin-top:0}
.footer .logo{text-align:left; color:#ECEBE6; font-size:2.25rem}
.footer__grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px}
.footer h4{font:700 var(--t-xs)/1 var(--f-text); text-transform:uppercase; letter-spacing:.1em; color:#8E94A0; margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:var(--t-sm)}
.footer a:hover{color:#fff}
.footer__bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:20px; border-top:1px solid #2A2F38; font-size:var(--t-xs); color:#8E94A0}
.footer p{font-size:var(--t-sm); max-width:40ch; margin-top:12px}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__grid > :first-child{grid-column:1 / -1} }

/* ---------- 9b. Ads ----------
   Slot = fixed box per breakpoint (no layout shift when the creative loads).
   Integration: render the creative into .ad__slot, add .is-filled.
   data-ad-slot / data-sizes are hooks for GPT / Yandex RTB / Prebid. */
.ad{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; margin-inline:auto}
.ad__label{display:flex; justify-content:space-between; gap:12px; width:100%; max-width:var(--ad-w, 100%); font:600 var(--t-2xs)/1 var(--f-text); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ad__label a{letter-spacing:0; text-transform:none; font-weight:500}
.ad__label a:hover{color:var(--ink)}
.ad__slot{position:relative; display:grid; place-items:center; width:var(--ad-w); height:var(--ad-h); max-width:100%; overflow:hidden; border-radius:var(--radius-s);
  background:repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); border:1px dashed var(--rule);
  color:var(--muted); font:600 var(--t-xs)/1.3 var(--f-text); text-align:center; font-variant-numeric:tabular-nums}
.ad__slot.is-filled{background:none; border:0}
.ad__slot small{display:block; font-weight:400; opacity:.8}
.ad__slot > iframe,.ad__slot > img,.ad__slot > a{width:100%; height:100%; border:0}

/* formats (IAB) */
.ad--billboard{--ad-w:970px; --ad-h:250px}
.ad--leader{--ad-w:728px; --ad-h:90px}
.ad--mrec{--ad-w:300px; --ad-h:250px}
.ad--halfpage{--ad-w:300px; --ad-h:600px}
@media (max-width:1010px){ .ad--billboard{--ad-w:728px; --ad-h:90px} }
@media (max-width:760px){
  .ad--billboard,.ad--leader{--ad-w:320px; --ad-h:100px}
  .ad--halfpage{--ad-w:300px; --ad-h:250px}
}

/* placements */
.ad-band{padding-block:clamp(16px, 2.4vw, 28px); border-top:1px solid var(--rule)}
.ad-band--top{border-top:0; border-bottom:1px solid var(--rule)}
/* два (или больше) 300×250 в ряд — как блоки «В тексте» на статье */
.ad-row{display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,28px); justify-content:center}
.ad-row .ad{width:auto}
.rail{display:flex; flex-direction:column; gap:var(--gap); align-self:stretch}
.rail .newsletter{position:static}
.rail .ad{position:sticky; top:calc(var(--nav-h) + 20px + env(safe-area-inset-top, 0px))}
@media (max-width:980px){ .rail .ad{position:static} .rail{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items:start} }
.ad--inbody{margin-block:1.6em!important; padding-block:16px; border-block:1px solid var(--rule)}
.article__rail{display:none}
@media (min-width:1200px){
  .article__grid{grid-template-columns:minmax(0,1fr) minmax(0,680px) 300px}
  .article__rail{display:block; grid-column:3; grid-row:1; align-self:stretch}
  .article__rail .ad{position:sticky; top:calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px))}
}

/* native ad in feed */
.feed__item--ad{background:var(--surface-2); border-radius:var(--radius-m); padding-inline:14px; border-top-color:transparent}
.feed__item--ad + .feed__item{border-top-color:transparent}
.feed__item--ad .ad-mark{font:700 var(--t-2xs)/1.3 var(--f-text); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:4px}
.feed__item--ad .meta{margin-top:6px}
.feed__ad-link{display:block; text-decoration:none; color:inherit}
.feed__ad-text{font-family:var(--f-text); font-size:var(--t-base); font-weight:600; line-height:1.4; color:var(--ink); margin:0}
.feed__ad-link:hover .feed__ad-text{color:var(--accent-strong, var(--accent))}

/* mobile anchor (sticky bottom 320×50) */
.anchor-ad{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; justify-content:center; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--surface); border-top:1px solid var(--rule); box-shadow:var(--shadow-2)}
.anchor-ad .ad{--ad-w:320px; --ad-h:50px}
.anchor-ad__close{position:absolute; right:8px; top:-28px; width:28px; height:28px; border-radius:6px 6px 0 0; display:grid; place-items:center; background:var(--surface); border:1px solid var(--rule); border-bottom:0; color:var(--muted)}
.anchor-ad__close .icon{width:14px; height:14px}
@media (max-width:760px){
  body.has-anchor:not(.has-player) .anchor-ad{display:flex}
  body.has-anchor:not(.has-player){padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- 10. Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .breaking__items{animation:none; flex-wrap:nowrap}
}

/* =========================================================
   11. Полдень — интеграция реальных данных (наши дополнения)
   ========================================================= */

/* Реальные фото в .ph: убираем шумовой оверлей и серую подложку */
.ph--img{background:var(--surface-2)}
.ph--img::after{display:none}
.ph--img img.ph-in{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Аккаунт в топбаре */
.topbar__links form{display:inline}
.topbar__links form button{font:inherit; color:var(--muted); cursor:pointer}
.topbar__links form button:hover{color:var(--ink)}
.topbar__links b{color:var(--ink); font-weight:600}

/* Заголовок страницы (рубрика, поиск) */
.page-head{padding-block:clamp(20px,3vw,36px) 4px}
.page-title{font-size:var(--t-3xl); font-weight:750; line-height:1.05; letter-spacing:-.02em; font-variation-settings:"opsz" 72}
.page-standfirst{margin-top:12px; color:var(--ink-2); font-size:var(--t-md); max-width:70ch}
.page-count{margin-top:8px; color:var(--muted); font-size:var(--t-sm)}

/* Пустые состояния и ошибки */
.empty-state,.error-state{max-width:640px; margin:clamp(40px,8vw,96px) auto; text-align:center}
.empty-mark{font:700 clamp(2.5rem,6vw,4rem)/1 var(--f-display); color:var(--accent); margin-bottom:10px}
.empty-state h2,.error-state h2{font-size:var(--t-2xl); margin-bottom:8px}
.empty-state p,.error-state p{color:var(--muted)}
.error-state .empty-mark{color:var(--live)}

/* Пагинация ленты рубрики */
.pager{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin-top:clamp(28px,4vw,48px)}
.pager-btn,.pager-num{display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border-radius:999px; border:1px solid var(--rule); font-size:var(--t-sm); font-weight:600; color:var(--ink); transition:border-color .2s, background .2s}
.pager-btn:hover,.pager-num:hover{border-color:var(--ink)}
.pager-num--active{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.pager-gap{color:var(--muted); padding-inline:4px}

/* Статья: тело из WP-контента */
.article__body img{border-radius:var(--radius-m); margin-block:1.2em}
.article__body h3{font-size:1.25em; margin-top:1.6em}
.article__body blockquote:not(.pullquote){margin-inline:0; padding-left:20px; border-left:3px solid var(--rule); color:var(--ink-2); font-style:italic}
.back-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent)}
.back-link:hover{text-decoration:underline; text-underline-offset:3px}

/* Комментарии */
.comments{max-width:720px; margin:clamp(32px,5vw,56px) auto 0}
.comments-title{font-size:var(--t-xl); padding-top:14px; border-top:3px solid var(--rule-strong); margin-bottom:20px}
.comments-count{color:var(--muted); font-family:var(--f-text); font-weight:600; font-size:var(--t-md)}
.comment-notice{padding:12px 16px; border-radius:var(--radius-m); font-size:var(--t-sm); font-weight:600; margin-bottom:16px}
.comment-notice--ok{background:var(--accent-soft); color:var(--accent)}
.comment-notice--err{background:var(--live-soft); color:var(--live)}
.comment-form{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); padding:16px; margin-bottom:28px}
.comment-form textarea{width:100%; min-height:88px; resize:vertical; border:1px solid var(--rule); border-radius:var(--radius-m); background:var(--bg); color:var(--ink); padding:12px 14px; font:inherit}
.comment-form textarea:focus{outline:2px solid var(--focus); outline-offset:1px}
.comment-form-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.comment-as{font-size:var(--t-sm); color:var(--muted)}
.comment-as b{color:var(--ink)}
.comment-form button[type=submit]{min-height:40px; padding:0 20px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600}
.comment-form button[type=submit]:hover{background:var(--accent-hover)}
.reply-to{display:flex; align-items:center; gap:8px; font-size:var(--t-sm); color:var(--muted); margin-bottom:10px}
.reply-to button{color:var(--accent); font-weight:600}
.comment-login-prompt{color:var(--muted); margin-bottom:28px}
.comment-login-prompt a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.comment-list,.comment-children{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px}
.comment-children{margin-top:20px; padding-left:20px; border-left:2px solid var(--rule)}
.comment-head{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.comment-author{font-weight:600}
.comment-date{font-size:var(--t-xs); color:var(--muted)}
.comment-body{color:var(--ink-2); line-height:1.55; white-space:pre-wrap}
.reply-btn{margin-top:6px; font-size:var(--t-xs); font-weight:600; color:var(--accent)}
.reply-btn:hover{text-decoration:underline; text-underline-offset:3px}
.comments-empty{color:var(--muted)}

/* Авторизация */
.auth-box{max-width:400px; margin:clamp(40px,8vw,96px) auto; padding:28px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l)}
.auth-title{font-size:var(--t-2xl); margin-bottom:20px}
.auth-error{background:var(--live-soft); color:var(--live); padding:10px 14px; border-radius:var(--radius-m); font-size:var(--t-sm); font-weight:600; margin-bottom:16px}
.auth-form{display:flex; flex-direction:column; gap:14px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:var(--t-sm); font-weight:600}
.auth-form input{height:46px; border:1px solid var(--rule); border-radius:var(--radius-m); background:var(--bg); color:var(--ink); padding:0 14px; font:inherit}
.auth-form input:focus{outline:2px solid var(--focus); outline-offset:1px}
.auth-form button{min-height:46px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600; margin-top:6px}
.auth-form button:hover{background:var(--accent-hover)}
.auth-switch{margin-top:18px; font-size:var(--t-sm); color:var(--muted); text-align:center}
.auth-switch a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* Поиск: форма на странице /search */
.search-page-form{display:flex; gap:10px; margin-top:20px}
.search-page-form input{flex:1; height:48px; border:1px solid var(--rule); border-radius:999px; background:var(--surface); color:var(--ink); padding:0 20px; font:inherit}
.search-page-form input:focus{outline:2px solid var(--focus); outline-offset:1px}
.search-page-form button{min-height:48px; padding:0 24px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600}
.search-count{margin-block:18px; color:var(--muted); font-size:var(--t-sm)}

/* Ссылка-заголовок в ленте наследует hover-подчёркивание карточки */
.feed__item .hl{color:inherit}

/* Сетка карточек (поиск/архив) */
.card-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
@media (max-width:1060px){ .card-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .card-grid{grid-template-columns:minmax(0,1fr)} }

/* Комментарии — приведение к общему стилю шаблона */
.comment-jump{width:auto; gap:6px; padding:0 12px; border-radius:999px}
.comment-jump__n{font-weight:700; font-size:var(--t-sm); font-variant-numeric:tabular-nums}
.comments{max-width:760px}
.comments-title{display:flex; align-items:baseline; gap:10px}
.comment-list,.comment-children{gap:22px}
.comment{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px}
.comment__avatar{width:44px; height:44px; font-size:1rem; background:var(--accent); flex:none}
.comment__main{min-width:0; display:flex; flex-direction:column; gap:6px}
.comment-head{margin-bottom:0; gap:8px}
.comment-body{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); border-top-left-radius:2px; padding:12px 16px; color:var(--ink); margin-top:2px}
.reply-btn{align-self:flex-start; margin-top:2px}
.comment-children{margin-top:16px; padding-left:16px; border-left:2px solid var(--rule)}
@media (max-width:520px){
  .comment{grid-template-columns:32px minmax(0,1fr); gap:10px}
  .comment__avatar{width:32px; height:32px; font-size:.8rem}
  .comment-children{padding-left:10px}
}

/* =========================================================
   12. Статья — раскладка во всю ширину, без «воздуха» по краям.
   Контент прижат влево (край в край с меню), рекламный рельс — справа.
   ========================================================= */
.article__layout{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:start}
.article__content{min-width:0}
.article__head{max-width:none}            /* шапка по ширине колонки */
.article__hero{margin-block:clamp(20px,3vw,32px)}
.article__body{grid-column:auto; max-width:780px}   /* текст комфортной ширины, слева */
.article__content > .ad--inbody{margin-inline:0}
.article__back{margin-top:24px}
.article__rail{display:none}
/* Широкий экран — контент во всю ширину (1fr) + рельс 300 справа, без боковых полей */
@media (min-width:1080px){
  .article__layout{grid-template-columns:minmax(0,1fr) 300px}
  .article__content{grid-column:1; grid-row:1}
  .article__rail{display:block; grid-column:2; grid-row:1; align-self:stretch}
  .article__rail .ad{position:sticky; top:calc(var(--nav-h) + 24px + env(safe-area-inset-top,0px))}
}
.comments{max-width:820px; margin-inline:0}   /* слева, вровень со статьёй */

/* Отступ контента от футера (пагинация/секции не липнут к подвалу) */
main{padding-bottom:clamp(40px,5vw,64px)}

/* =========================================================
   13. Реклама: кнопка «Разместить рекламу» + страница /advertise + модалка
   ========================================================= */
/* Всплывающая кнопка поверх рекламного места */
.ad{position:relative}
.ad__place{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); z-index:6;
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:999px;
  background:var(--ink); color:var(--bg); font:600 var(--t-sm)/1 var(--f-text); white-space:nowrap;
  opacity:0; pointer-events:none; box-shadow:var(--shadow-2); transition:opacity .18s, transform .18s var(--ease), background .2s}
.ad:hover .ad__place, .ad:focus-within .ad__place{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.ad__place:hover{background:var(--accent); color:var(--accent-ink)}
@media (hover:none){ .ad__place{opacity:1; pointer-events:auto; position:static; transform:none; height:34px; margin-top:8px; background:var(--surface-2); color:var(--ink)} }

/* Страница «Разместить рекламу» */
.adv{padding-block:clamp(20px,3vw,36px) 8px}
.adv__title{font-size:var(--t-3xl); font-weight:750; line-height:1.05; letter-spacing:-.02em; font-variation-settings:"opsz" 72}
.adv__lead{margin-top:12px; color:var(--ink-2); font-size:var(--t-md); max-width:72ch; line-height:1.5}
.adv__grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; margin-top:clamp(20px,3vw,32px)}
.place-slot{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:156px; padding:18px; text-align:left; cursor:pointer; color:var(--ink);
  border:1px dashed var(--rule); border-radius:var(--radius-l);
  background:repeating-linear-gradient(-45deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
  transition:border-color .2s, transform .2s var(--ease), box-shadow .2s}
.place-slot:hover{border-color:var(--accent); border-style:solid; transform:translateY(-2px); box-shadow:var(--shadow-1)}
.place-slot.is-selected{border-color:var(--accent); border-style:solid; box-shadow:0 0 0 2px var(--accent-soft)}
.place-slot__badge{font:700 var(--t-2xs)/1 var(--f-text); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.place-slot__label{font-family:var(--f-display); font-weight:650; font-size:var(--t-md); line-height:1.2}
.place-slot__size{margin-top:auto; font:700 var(--t-lg)/1 var(--f-display); color:var(--accent); font-variant-numeric:tabular-nums}
.place-slot__id{font-size:var(--t-2xs); color:var(--muted); letter-spacing:.04em}

/* Модалка загрузки рекламы */
.adv-modal{width:min(560px, calc(100% - 32px)); margin:clamp(16px,8vh,96px) auto auto; padding:0; border:0; border-radius:var(--radius-l); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2)}
.adv-modal::backdrop{background:var(--overlay); backdrop-filter:blur(3px)}
.adv-modal[open]{animation:pop .25s var(--ease)}
.adv-modal__form{display:flex; flex-direction:column; gap:14px; padding:22px}
.adv-modal__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.adv-modal__title{font-size:var(--t-xl)}
.adv-modal__place{font-size:var(--t-sm); color:var(--muted)}
.adv-modal__place b{color:var(--ink)}
.adv-field{display:flex; flex-direction:column; gap:6px; font-size:var(--t-sm); font-weight:600}
.adv-field__hint{font-size:var(--t-2xs); font-weight:400; color:var(--muted); line-height:1.35}
.adv-field input{height:44px; border:1px solid var(--rule); border-radius:var(--radius-m); background:var(--bg); color:var(--ink); padding:0 12px; font:inherit; font-weight:400}
.adv-field input[type=file]{height:auto; padding:10px 12px; font-size:var(--t-sm)}
.adv-field input:focus{outline:2px solid var(--focus); outline-offset:1px}
.adv-modal__submit{width:100%; margin-top:4px; min-height:46px}
.adv-status{padding:12px 14px; border-radius:var(--radius-m); font-size:var(--t-sm); font-weight:600; line-height:1.4}
.adv-status--checking{background:var(--surface-2); color:var(--ink-2)}
.adv-status--ok{background:var(--accent-soft); color:var(--accent)}
.adv-status--review{background:#FBF0DA; color:#8A5A00}
.adv-status--err{background:var(--live-soft); color:var(--live)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .adv-status--review{background:#3A2E12; color:#E7B84f} }
:root[data-theme="dark"] .adv-status--review{background:#3A2E12; color:#E7B84f}
/* Требования к макету + спеки на карточках мест */
.place-slot__specs{font-size:var(--t-2xs); color:var(--muted); font-weight:600; line-height:1.3}
.adv-req{margin-top:clamp(24px,4vw,40px); background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); padding:clamp(18px,2.5vw,24px)}
.adv-req__title{font-size:var(--t-lg); margin-bottom:14px}
.adv-req__list{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px; color:var(--ink-2); font-size:var(--t-sm); line-height:1.5}
.adv-req__list b{color:var(--ink)}
.adv-req__list li::marker{color:var(--accent)}
.adv-modal__req{font-size:var(--t-xs); color:var(--ink-2); background:var(--surface-2); border-radius:var(--radius-m); padding:9px 12px}

/* Медиакит: визуальная схема рекламных мест */
.mediakit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); margin-top:clamp(20px,3vw,32px)}
@media (max-width:860px){ .mediakit{grid-template-columns:1fr} }
.mk{margin:0}
.mk__cap{font:700 var(--t-2xs)/1 var(--f-text); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.mk__page{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-l); padding:16px; display:flex; flex-direction:column; gap:12px; overflow:hidden}
.mk__chrome{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--rule)}
.mk__logo{font-family:var(--f-display); font-weight:800; font-size:1rem}
.mk__logo b{color:var(--accent)}
.mk__dots{display:flex; gap:6px}
.mk__dots i{width:16px; height:5px; border-radius:3px; background:var(--surface-3)}
.mk__cols{display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:12px; align-items:start}
.mk__main{display:flex; flex-direction:column; gap:8px; min-width:0}
.mk__rail{display:flex; flex-direction:column; gap:10px}
.mk__ln{height:7px; border-radius:3px; background:var(--surface-2); width:100%}
.mk__ln.w90{width:90%} .mk__ln.w80{width:80%} .mk__ln.w70{width:70%} .mk__ln.w60{width:60%} .mk__ln.w50{width:50%}
.mk__ln--h{height:10px; width:60%; background:var(--surface-3)}
.mk__ln--title{height:15px; width:85%; background:var(--surface-3)}
.mk__ln--hero{height:76px; border-radius:var(--radius-s); background:var(--surface-2)}
.mk-slot{position:relative; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; aspect-ratio:var(--ar); min-height:28px; padding:6px; cursor:pointer;
  border:1.5px dashed var(--accent); border-radius:var(--radius-s); background:var(--accent-soft); color:var(--accent);
  font-family:var(--f-text); transition:background .18s, transform .15s var(--ease)}
.mk-slot:hover, .mk-slot[data-sel="1"]{background:var(--accent); color:var(--accent-ink); transform:translateY(-1px)}
.mk-slot__t{font-size:9.5px; font-weight:600; line-height:1.25}
.mk-slot__t b{font-size:11px; font-variant-numeric:tabular-nums}
.mk-num{position:absolute; top:-9px; left:-9px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font:700 11px/1 var(--f-text); box-shadow:var(--shadow-1)}
.mk-slot--tall{align-items:flex-start; padding-top:14px}
.mk-slot--anchor{max-width:220px; margin-inline:auto}
.mk-slot--box{max-width:150px}
.mk-row{display:flex; gap:10px; align-items:flex-start; margin-block:2px}
.mk-row .mk-slot--box{flex:0 0 150px; min-width:0}
/* мини-лента новостей со встроенной нативной рекламой — как на сайте */
.mk-feed{border:1px solid var(--rule); border-radius:var(--radius-m); padding:10px 12px; display:flex; flex-direction:column; gap:10px; margin-block:2px}
.mk-feed__cap{font:700 8px/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.mk-feed__item{display:flex; align-items:center; gap:9px; padding-bottom:9px; border-bottom:1px solid var(--rule)}
.mk-feed__item:last-child{border-bottom:0; padding-bottom:0}
.mk-feed__time{flex:0 0 26px; height:7px; border-radius:3px; background:var(--surface-3)}
.mk-feed__item .mk__ln{margin:0}
/* нативный рекламный блок в ленте — широкая тонкая полоса 880×80 во всю ширину записи ленты */
.mk-feed__native{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; padding:2px 0; cursor:pointer; text-align:center}
.mk-feed__admark{align-self:flex-start; font:700 7px/1 var(--f-text); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent); padding:3px 5px; border-radius:3px}
.mk-feed__adbanner{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:880/80; min-height:22px;
  border:1px solid var(--rule); border-radius:var(--radius-s); background:var(--surface-2); color:var(--muted);
  transition:background .15s ease, border-color .15s ease}
.mk-feed__native:hover .mk-feed__adbanner, .mk-feed__native[data-sel="1"] .mk-feed__adbanner{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.mk-feed__native .mk-slot__t{font-size:9.5px; font-weight:600; line-height:1.25}
.mk-feed__native .mk-slot__t b{font-size:11px}

/* Полное (не обрезанное) фото в статье */
.article__hero-img{display:block; width:100%; height:auto; border-radius:var(--radius-m); background:var(--surface-2)}

/* Страница «Вся лента» */
.feed-page{max-width:900px; margin-top:24px}

/* Скрытие неактивных рекламных мест: нет объявления → место и его обёртка не видны */
.ad--empty{display:none !important}
.ad-band:has(.ad--empty){display:none}
.article__rail:has(.ad--empty){display:none}
.anchor-ad:has(.ad--empty){display:none !important}
@media (min-width:1080px){
  .article__layout:has(.article__rail .ad--empty){grid-template-columns:minmax(0,1fr)}
}