/* 1. первый экран: полка корешков + поиск */
.b-hero{padding:140px 0 60px}
.b-hero .verh{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.poisk{position:relative;margin-top:30px}
.poisk input{width:100%;min-height:72px;border-radius:99px;border:1.5px solid rgba(237,235,230,.35);background:rgba(8,8,10,.7);padding:0 28px 0 64px;font:600 22px var(--tekst);outline:none;transition:border-color .3s}
.poisk input:focus{border-color:var(--acid)}
.poisk svg{position:absolute;left:24px;top:50%;translate:0 -50%}
.schety{display:flex;gap:36px;flex-wrap:wrap;margin-top:22px}
.schety div{display:flex;flex-direction:column}
.schety b{font:900 48px/.9 var(--zag)}
.schety span{font-size:13px;color:var(--mute)}
.polka{margin-top:56px;position:relative}
.polka svg{width:100%;height:auto;display:block;overflow:visible}
.polka .kor{cursor:pointer;transition:opacity .4s,transform .5s var(--ease);transform-box:fill-box;transform-origin:bottom}
.polka .kor:hover{transform:translateY(-10px)}
.polka .kor.tusk{opacity:.12}
.polka .doska{fill:rgba(237,235,230,.18)}
.polka .podp{position:absolute;left:0;top:-30px;font:600 15px var(--tekst);color:var(--acid);min-height:22px;pointer-events:none}
@media (max-width:760px){.b-hero{padding:104px 0 40px}.b-hero .verh{grid-template-columns:1fr;gap:10px}.poisk input{min-height:60px;font-size:18px;padding-left:56px}.schety{gap:22px}.schety b{font-size:38px}}

/* 2. рубрики — слова с числом-степенью */
.rubriki{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:36px;align-items:baseline}
.rubriki button{font:800 clamp(40px,5.6vw,92px)/1 var(--zag);text-transform:uppercase;color:rgba(237,235,230,.28);transition:color .3s;position:relative;min-height:44px;text-align:left}
.rubriki button sup{font:700 .32em var(--tekst);color:var(--acid);vertical-align:top;margin-left:.15em;position:relative;top:.3em}
.rubriki button:hover{color:var(--bone)}
.rubriki button[aria-pressed=true]{color:var(--bone)}
.rubriki button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;top:54%;height:.08em;background:var(--acid);box-shadow:0 0 12px rgba(204,255,0,.5)}

/* 3. начать отсюда — полосы, наведение раздвигает */
.start{display:flex;gap:10px;margin-top:44px;height:460px}
.start a{flex:1;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:flex-grow .7s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:26px;min-width:0}
.start a:hover,.start a:focus-visible{flex-grow:2.6}
.start a svg{position:absolute;inset:0;width:100%;height:100%}
.start a .t{position:relative;z-index:1}
.start h3{font:800 clamp(26px,2.4vw,38px)/.98 var(--zag);max-width:16ch}
.start .metka{margin-bottom:10px}
.start a::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,8,10,.95) 25%,transparent 80%)}
@media (max-width:860px){.start{flex-direction:column;height:auto}.start a{min-height:200px}.start a:hover{flex-grow:1}}

/* 4. все темы — строки с обложкой-генерацией */
.temy{margin-top:40px;border-top:1px solid var(--line)}
.tema{display:grid;grid-template-columns:150px 1fr 200px 120px;gap:28px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);transition:background .3s}
.tema:hover{background:rgba(237,235,230,.03)}
.tema .obl{aspect-ratio:3/2;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tema .obl svg{width:100%;height:100%;display:block}
.tema h3{font:700 clamp(22px,2vw,30px)/1.05 var(--zag)}
.tema .rb{font-size:14px;color:var(--mute)}
.tema .rb b{display:block;color:var(--bone);font-weight:600}
.tema .st{justify-self:end;font:600 12px var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px dashed rgba(237,235,230,.3);border-radius:99px;padding:8px 12px;white-space:nowrap}
.tema mark{background:var(--acid);color:var(--ink);border-radius:3px}
.pusto{padding:40px 0;color:var(--mute);display:none}
@media (max-width:860px){.tema{grid-template-columns:96px 1fr;gap:6px 16px}.tema .obl{grid-row:span 2}.tema .rb{grid-column:2}.tema .st{display:none}}

/* 5. календарь выхода */
.kal{margin-top:44px}
.kal svg{width:100%;height:auto;overflow:visible}
.kal .kv{fill:rgba(237,235,230,.06);stroke:rgba(237,235,230,.25);stroke-width:1.2;transition:fill .3s}
.kal .kv.zap{fill:rgba(204,255,0,.18);stroke:var(--acid)}
.kal .kv:hover{fill:var(--acid)}
.kal .ned{fill:var(--mute);font:600 12px var(--tekst);letter-spacing:.06em}
.kal .start-l{stroke:var(--acid);stroke-width:2;stroke-dasharray:4 5}
.kal .start-t{fill:var(--acid);font:800 18px var(--zag)}
.kal-podp{min-height:28px;margin-top:16px;font-weight:600}

/* 6. как мы пишем — разметка статьи с выносками */
.kak{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px;align-items:center}
.list{position:relative;padding:34px 30px;border-radius:var(--r);background:var(--bone);color:var(--ink);box-shadow:0 40px 120px -40px rgba(108,75,255,.7)}
.list .ln{height:9px;border-radius:5px;background:rgba(8,8,10,.14);margin:8px 0}
.list .h{font:900 34px/.95 var(--zag);text-transform:uppercase;margin-bottom:14px}
.list .kor{background:var(--ink);color:var(--bone);border-radius:12px;padding:14px 16px;margin:16px 0;font-size:14px}
.list .kor b{color:var(--acid);display:block;font:700 12px var(--tekst);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.list .sn{display:inline-block;background:var(--acid);border-radius:4px;padding:1px 6px;font-size:12px;font-weight:700}
.list .avt{display:flex;gap:12px;align-items:center;margin-top:16px;font-size:14px}
.list .avt i{width:40px;height:40px;border-radius:50%;border:1.5px dashed rgba(8,8,10,.4)}
.list .tchk{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--viol);color:var(--bone);display:grid;place-items:center;font:800 14px var(--tekst);box-shadow:0 0 0 6px rgba(108,75,255,.25)}
.pravila-p{list-style:none;display:grid;gap:22px;counter-reset:p}
.pravila-p li{display:grid;grid-template-columns:40px 1fr;gap:14px;counter-increment:p}
.pravila-p li::before{content:counter(p);width:30px;height:30px;border-radius:50%;background:var(--viol);display:grid;place-items:center;font:800 14px var(--tekst)}
.pravila-p b{display:block;font:800 26px/1 var(--zag);margin-bottom:4px}
.pravila-p p{color:#cfcdc8;font-size:16px}
@media (max-width:860px){.kak{grid-template-columns:1fr}}

/* 7. не нашли */
.nenashli{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:44px 0;border-top:2px solid var(--acid);border-bottom:1px solid var(--line)}
.nenashli h2{font:900 clamp(48px,6vw,96px)/.86 var(--zag);text-transform:uppercase}
/* заголовок: разрез без дубля текста в DOM — половинки рисуют псевдоэлементы */
.rz{position:relative;display:inline-block;-webkit-text-fill-color:transparent}
.rz::before,.rz::after{content:attr(data-t);position:absolute;inset:0;-webkit-text-fill-color:currentColor}
.rz::before{clip-path:inset(0 0 50% 0)}
.rz::after{clip-path:inset(50% 0 0 0);transform:translateX(.06em);transition:transform 1s var(--ease)}
.rz.vidno::after,.rz:hover::after{transform:none}
.h1-pod{display:block;font:700 clamp(24px,2.3vw,34px)/1.12 var(--zag);text-transform:none;letter-spacing:0;color:var(--bone);margin-top:18px;max-width:28ch}
@media (prefers-reduced-motion:reduce){.rz::after{transform:none}}