/* Журнал AudioFu (18.10.2026): полоса цвета статьи со шапкой и разворотом, тело с сайдбаром, рубрики, автор.
   Шапка сайта (.mh-*) — общая, в af3.css. Здесь полоса переопределяет токены у себя (как data-theme), поэтому
   шапка и разворот внутри перекрашиваются сами. Палитра яркая (18.10, без пастели): глубокие с белым текстом, светлые с чёрным, APCA ≥ 78. */

.band{position:relative;overflow:hidden;background:var(--bg);color:var(--t1)}
.band--violet{--bg:#4C14F0;--ghost:#5E2CF2}
.band--blue{--bg:#165BE2;--ghost:#2D6BE5}
.band--purple{--bg:#8E26E8;--ghost:#993CEA}
.band--magenta{--bg:#C01895;--ghost:#C62FA0}
.band--raspberry{--bg:#C9184E;--ghost:#CE2F60}
.band--violet,.band--blue,.band--purple,.band--magenta,.band--raspberry{--t1:#FFFFFF;--t2:rgba(255,255,255,.9);--t3:rgba(255,255,255,.76);--line:rgba(255,255,255,.34);--surface-2:rgba(255,255,255,.16)}
.band--lime{--bg:#E4FF52;--ghost:#D4ED4C}
.band--yellow{--bg:#FBD034;--ghost:#EAC231}
.band--green{--bg:#59F170;--ghost:#54E169}
.band--aqua{--bg:#45F3D4;--ghost:#41E3C6}
.band--cyan{--bg:#49E0FE;--ghost:#45D1ED}
.band--lime,.band--yellow,.band--green,.band--aqua,.band--cyan{--t1:#0B0B0D;--t2:rgba(11,11,13,.86);--t3:rgba(11,11,13,.7);--line:rgba(11,11,13,.26);--surface-2:rgba(11,11,13,.12)}
.band--none{--ghost:color-mix(in oklab,var(--bg) 92%,var(--t1));border-bottom:1px solid var(--line)}

/* Слово-призрак за шапкой, как у The Verge. */
.mh-ghost{position:absolute;top:16px;left:28px;z-index:0;font:400 min(210px,22vw)/1 "AF Ghost KO",var(--disp);letter-spacing:-.01em;color:var(--ghost);white-space:nowrap;pointer-events:none;user-select:none}
.band>.mh,.band>.wrap{position:relative;z-index:1}

/* Шапка внутри полосы: блок прижат вправо, линия под ним. */
.band .mh{padding-top:var(--s5)}
.band .mh-bar{width:fit-content;max-width:100%;margin-left:auto;padding-bottom:var(--s3);border-bottom:1px solid var(--t1)}

/* Общие части разворота. */
.vh-tags{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s4);font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vh-tags a,.vh-tags span{color:var(--t1)}
.vh-tags a::before,.vh-tags span::before{content:"+";margin-right:6px}
.vh-t{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(38px,4.3vw,70px);line-height:.98;letter-spacing:-.035em;color:var(--t1);text-wrap:balance}
.vh-dek{margin:var(--s4) 0 0;max-width:46ch;font-size:clamp(18px,1.45vw,22px);line-height:1.38;color:var(--t2)}
.vh-by{margin:var(--s5) 0 0;font-size:15px;line-height:1.45;color:var(--t2)}
.vh-by a{font-weight:700;color:var(--t1)}
.vh-by a::before{content:"+";margin-right:4px}
.vh-by time{display:block;font-size:14px;color:var(--t3)}
.vh-acts{display:flex;gap:var(--s2);margin:var(--s4) 0 0}
.vh-act{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--t1);cursor:pointer;transition:border-color .14s}
.vh-act:hover{border-color:var(--t1)}
.vh-act svg{width:18px;height:18px}
.vh-aff{margin:var(--s4) 0 0;max-width:52ch;font-size:13px;font-style:italic;line-height:1.45;color:var(--t3)}
.vh-aff a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}

/* Плашка со снимком: исходный кадр — по центру, не крупнее натурального; наш снимок — с закрытым значком. */
.mpl{position:relative;display:block;overflow:hidden;background:var(--plate);border-radius:var(--r2)}
.mpl img{display:block;width:100%;height:100%;object-fit:contain}
.mpl::after{content:"";position:absolute;right:0;bottom:0;width:13%;height:15.5%;background:var(--plate)}
.mpl.is-orig{display:flex;align-items:center;justify-content:center;padding:6%}
.mpl.is-orig img{width:auto;height:auto;max-width:100%;max-height:100%}
.mpl.is-orig::after{content:none}

/* split — снимок слева, текст справа. */
.vA-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--s7);align-items:center;padding-top:var(--s7);padding-bottom:var(--s8)}
.vA-fig{margin:0}
.vA-fig .mpl{aspect-ratio:1}
.vA-cap{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s3);font:600 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.vA-cap b{flex:none;font:900 30px/1 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--t1)}

/* stack — автор слева за линией, заголовок с линейками под строками, ряд снимков; цвет обрывается на снимке. */
.vS{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);padding-top:var(--s7)}
.vS-meta{align-self:start;padding-right:var(--s5);border-right:1px solid var(--line)}
.vS-meta .vh-by{margin-top:0}
.vS-main .vh-t{max-width:none;font-size:clamp(40px,4.6vw,76px);line-height:1.04;background-image:linear-gradient(to bottom,transparent calc(1.04em - 1px),var(--line) calc(1.04em - 1px),var(--line) 1.04em);background-size:100% 1.04em}
.vS-main .vh-dek{max-width:56ch}
.vS-fig{margin-top:var(--s6);margin-bottom:0;padding-bottom:var(--s7)}
.vC-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);height:clamp(220px,32vw,460px);overflow:hidden;border-radius:var(--r2)}
.vC-row--1{grid-template-columns:minmax(0,1fr)}
.vC-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vC-row .mpl{height:100%;border-radius:0}
.vS-fig figcaption{margin-top:var(--s3);font-size:14px;line-height:1.45;color:#CACAD2}
.vS-fig figcaption b{color:#EDEDF0}
.band--h-stack{background:linear-gradient(to bottom,var(--bg) calc(100% - 260px),#08080A calc(100% - 260px))}
.band--h-stack.band--none{background:var(--bg)}
[data-theme="light"] .band--h-stack:not(.band--none){background:linear-gradient(to bottom,var(--bg) calc(100% - 260px),#F1EEE7 calc(100% - 260px))}
[data-theme="light"] .vS-fig figcaption{color:#45423C}
[data-theme="light"] .vS-fig figcaption b{color:#111110}

/* number — цифра материала с полосами вместо снимка, ниже ряд товаров. */
.vB{padding-top:var(--s6);padding-bottom:var(--s6)}
.vB-in{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7);align-items:start}
.vB-num{padding-left:var(--s6);border-left:1px solid var(--line)}
.vB-num>b{display:block;font:900 clamp(72px,7.4vw,124px)/.84 var(--disp);letter-spacing:-.055em;color:var(--t1)}
.vB-num>span{display:block;margin-top:var(--s3);font:600 12px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.vB-bars{display:grid;gap:var(--s4);margin-top:var(--s6)}
.vB-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);font-size:14px;color:var(--t2)}
.vB-bar b{font-variant-numeric:tabular-nums;color:var(--t1)}
.vB-bar i{grid-column:1/-1;display:block;height:6px;overflow:hidden;border-radius:3px;background:var(--surface-2)}
.vB-bar i::before{content:"";display:block;width:var(--w);height:100%;background:var(--t1)}
.vB-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.vB-it{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s4);align-items:center;font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums}
.vB-it .mpl{aspect-ratio:1}
.vB-it b{display:block;margin-bottom:var(--s1);font-size:15px;line-height:1.3;color:var(--t1)}

/* Тело и сайдбар. */
.vbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s8);padding-top:var(--s7);padding-bottom:var(--s9)}
.vprose{max-width:68ch;font-size:18px;line-height:1.65}
.vprose h2{margin:var(--s7) 0 var(--s3);font-family:var(--disp);font-weight:900;font-size:clamp(26px,2.3vw,34px);line-height:1.06;letter-spacing:-.025em}
.vprose h3{margin:var(--s7) 0 var(--s2);font-size:21px;line-height:1.25}
.vprose>p:first-child,.vprose>.vad-slot:first-child+p{font-size:20px;line-height:1.6;color:var(--t1)}
.vprose .mtab .r{text-align:right}
.mtw{overflow-x:auto;margin:var(--s5) 0}
.vside{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.vsb-h{margin:0 0 var(--s2);padding-bottom:var(--s2);border-bottom:2px solid var(--t1);font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t1)}
.vsb ul,.vsb ol{margin:0;padding:0;list-style:none}
.vsb li+li{border-top:1px solid var(--line)}
.vsb-link{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;font-size:15px;line-height:1.35;color:var(--t1)}
.vsb-link::after{content:"→";color:var(--t3);transition:transform .14s}
.vsb-link:hover::after{transform:translateX(3px)}
.vsb-drop{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;font-size:14px;line-height:1.3;color:var(--t1)}
.vsb-drop .mpl,.vsb-more .mpl{aspect-ratio:1;border-radius:var(--s1)}
.vsb-drop small{display:block;margin-top:2px;font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums}
.vsb-drop b{font:900 22px/1 var(--disp);letter-spacing:-.02em;color:var(--t1);font-variant-numeric:tabular-nums}
.vsb-more{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);align-items:center;padding:var(--s3) 0;font:700 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.vsb-more b{display:block;margin-top:var(--s1);font:600 15px/1.3 var(--text);letter-spacing:0;text-transform:none;color:var(--t1)}

/* Карточка товара в тексте. */
.mcard{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:var(--s4);align-items:center;margin:var(--s5) 0;padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
.mcard-ph{aspect-ratio:1;border-radius:var(--s2)}
.mcard-b{display:flex;flex-direction:column;gap:var(--s1);min-width:0;font-size:15px;line-height:1.35}
.mcard-b span{color:var(--t3)}
.mcard-b .mcard-p{font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.vprose h3+.mcard{margin-top:var(--s3)}

/* Блок автора в конце статьи. */
.vauth{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s4);margin-top:var(--s8);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vauth p{margin:0}
.vauth .vauth-b{margin-top:var(--s2);font-size:16px;line-height:1.55;color:var(--t2)}
.vauth-n{font-family:var(--disp);font-weight:900;font-size:20px}
.vauth-n a{color:var(--t1)}
.vauth-l{display:inline-block;margin-top:var(--s3);font-weight:700;color:var(--t1)}
.mav{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--t1);color:var(--bg);font:900 20px/1 var(--disp)}
.mav img{display:block;width:100%;height:100%;object-fit:cover}
.vrel{margin-top:var(--s6)}

/* Рубрика и автор: заголовок в полосе, ниже список статей. */
.mpage-h{padding-top:var(--s7);padding-bottom:var(--s7)}
.mpage-h .vh-t{font-size:clamp(56px,8vw,128px);line-height:.9}
.mpage-h .vh-dek{max-width:52ch}
.mpage-a{display:flex;align-items:center;gap:var(--s5)}
.mpage-a .mav{width:96px;height:96px;font-size:44px}
/* Профили автора значками — как соцсети AudioFu в подвале. */
.msoc{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0;list-style:none}
.msoc a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);color:var(--t2);transition:color .14s,border-color .14s}
.msoc a:hover{color:var(--t1);border-color:var(--t3)}
.msoc svg{width:20px;height:20px;fill:currentColor}
.mlist{display:grid;gap:var(--s6);padding-top:var(--s7);padding-bottom:var(--s9)}
.mlist-it{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s6);align-items:center;padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.mlist-cv{position:relative;display:block;padding:var(--s4);border-radius:var(--r2);background:var(--bg)}
.mlist-cv.band--none{background:var(--surface)}
.mlist-cv .mpl{aspect-ratio:4/3}
@media (min-width:901px){.mlist-it:has(.mlist-cv--img){grid-template-columns:400px minmax(0,1fr)}}
.mlist-cv--img{padding:0;overflow:hidden;background:none}
.mlist-cv--img img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.mlist-cv b{position:absolute;left:var(--s5);bottom:var(--s4);font:900 36px/1 var(--disp);letter-spacing:-.03em;color:var(--t1)}
.mlist-k{margin:0 0 var(--s2);font:700 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.mlist-t{margin:0;font-family:var(--disp);font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1.04;letter-spacing:-.025em}
.mlist-t a{color:var(--t1)}
.mlist-d{margin:var(--s3) 0 0;max-width:60ch;font-size:17px;line-height:1.5;color:var(--t2)}
.mlist-empty{padding:var(--s8) 0;color:var(--t3);font-size:18px}

@media (max-width:1100px){
  .vbody{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .vside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s6)}
}
@media (max-width:900px){
  .band .mh-bar{width:100%}
  .mh-ghost{top:10px;left:16px}
  .vA-in{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-top:var(--s5);padding-bottom:var(--s6)}
  .vA-fig{order:2}
  .vS{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding-top:var(--s5)}
  .vS-meta{order:2;padding-top:var(--s4);padding-right:0;border-top:1px solid var(--line);border-right:0}
  .band--h-stack{background:linear-gradient(to bottom,var(--bg) calc(100% - 120px),#08080A calc(100% - 120px))}
  .vB-in{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .vB-num{padding-top:var(--s5);padding-left:0;border-top:1px solid var(--line);border-left:0}
  .vB-strip{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .vB-it{grid-template-columns:88px minmax(0,1fr)}
  .mlist-it{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}
@media (max-width:560px){
  .vbody{padding-top:var(--s6)}
  .vprose{font-size:17px}
  .vprose>p:first-child{font-size:18px}
  .mcard{grid-template-columns:72px minmax(0,1fr)}
  .mcard .cta{grid-column:1/-1}
  .vC-row{gap:2px}
}

/* Сайдбар как у The Verge (18.10.2026, Денис: «сайдбар вот так, и он должен быть липкий, и справа снизу баннер»):
   подпись и номера — светлым акцентом, заголовки крупно, за списком огромное вертикальное слово цветом статьи
   (--acc, тёмный цвет палитры). Внизу липкий блок: баннер 300×600, пока его нет — падения недели. */
.vside{--acc2:#E4FF52}
[data-theme="light"] .vside{--acc2:#4C14F0}
.vsb-k{margin:0 0 var(--s3);font:700 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
.vsb-pop{position:relative;min-height:320px}
.vsb-vert{position:absolute;top:-6px;right:-10px;z-index:0;writing-mode:vertical-rl;transform:rotate(180deg);font:900 150px/.78 var(--disp);letter-spacing:-.045em;color:var(--acc);white-space:nowrap;pointer-events:none;user-select:none}
.vsb-pop>:not(.vsb-vert){position:relative;z-index:1}
.vsb-ol{margin:0;padding:0;list-style:none}
.vsb-ol li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--s2);padding:var(--s4) 0}
.vsb-ol li+li{border-top:0}
.vsb-ol li:not(:last-child)::after{content:"";grid-column:2;height:1px;width:72%;margin-top:var(--s4);background:var(--line)}
.vsb-ol .n{font:900 21px/1.15 var(--disp);color:var(--acc2);font-variant-numeric:tabular-nums}
.vsb-ol a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);align-items:center;font:900 18px/1.2 var(--disp);letter-spacing:-.012em;color:var(--t1);text-shadow:0 1px 0 rgba(0,0,0,.25)}
.vsb-ph{aspect-ratio:1;border-radius:var(--r)}
.vsb-ol a:hover{text-decoration:underline;text-underline-offset:3px}
.vsb-ol small{display:block;margin-top:6px;font:600 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--t3);text-shadow:none}
.vsb-ol small b{color:var(--acc2)}
.vsb-ol--s a{font-size:16px}
.vsb-ol--s li{padding:var(--s3) 0}
.vsb-ol--s li:not(:last-child)::after{margin-top:var(--s3)}
.vside-stick{position:sticky;top:var(--s5)}
.vad-slot{display:flex;flex-direction:column;gap:var(--s1)}
.vad-slot>span{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.vad-slot--article{margin:var(--s6) 0;min-height:280px}
.vprose>.vad-slot--article:first-child{margin-top:0}
.vad-slot--sidebar-top{min-height:280px}
.vad-slot--sidebar-bottom{min-height:620px}
@media (max-width:1100px){.vsb-vert{display:none}.vsb-pop{min-height:0}.vside-stick{position:static}}