/* Журнал AudioFu (макет 11.10.2026) — только на страницах журнала. Токены — af3.css.
   Деталь журнала: каждый материал открывается своей цифрой — число вместо фото на обложке. */

.mag{padding-bottom:var(--s8)}

/* шапка журнала */
.mhead{display:grid;gap:var(--s2);padding:var(--s6) 0 0;border-bottom:1px solid var(--line)}
.mhead-name{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.4vw,52px);line-height:.95;letter-spacing:-.035em;color:var(--t1)}
.mhead-name em{font-style:normal;color:var(--red)}
.mhead-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.mhead-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s5)}
.mhead--big{padding-top:var(--s7)} .mhead--big .mhead-name{font-size:clamp(52px,9.4vw,148px);line-height:.84;letter-spacing:-.05em}
.mhead-meta{display:grid;gap:var(--s1);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
@media(min-width:900px){.mhead-meta{text-align:right;padding-bottom:var(--s2)}}
.mhead-nav{display:flex;gap:var(--s5);overflow-x:auto;margin-top:var(--s3);scrollbar-width:none}
.mhead-nav::-webkit-scrollbar{display:none}
.mhead-nav a{padding:var(--s3) 0;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--t2);border-bottom:2px solid transparent;white-space:nowrap}
.mhead-nav a:hover{color:var(--t1)} .mhead-nav a[aria-current]{color:var(--t1);border-color:var(--red)}

/* подписи и цифры */
.mkick{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.mkick a:hover{color:var(--t1)}
.mnum{display:block;font-family:var(--disp);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.045em;line-height:.86;color:var(--t1)}
.mnum--xl{font-size:clamp(76px,12vw,172px);color:var(--red)}
.mnum--m{font-size:clamp(44px,5vw,68px);color:var(--t2)}
.mnum-u{display:block;margin-top:var(--s2);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.mh2{font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.6vw,50px);line-height:1;letter-spacing:-.03em;max-width:22ch}
.mh2 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.mdek{color:var(--t2);font-size:16px;max-width:60ch} .mdek--l{font-size:19px;line-height:1.5}
.mby{font-family:var(--mono);font-size:12px;color:var(--t3)}
.mby--row{display:flex;align-items:center;gap:var(--s3);line-height:1.45} .mby--row b{color:var(--t1);font-weight:600}
.mby--row img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.mlabel{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.05;letter-spacing:-.02em}
.msrc{margin-top:var(--s3);font-size:13px;color:var(--t3)}

/* обложка */
.mcover{display:grid;gap:var(--s5);padding:var(--s7) 0 var(--s6)}
.mcover-txt{display:grid;gap:var(--s4);align-content:start}
@media(min-width:1000px){.mcover{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s7)}.mcover-ch{grid-column:1/-1}}

/* реклама: место зарезервировано заранее — блок AdSense встаёт без сдвига вёрстки */
.mad{display:grid;gap:var(--s1);margin:var(--s6) 0}
.mad-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.mad-box{display:grid;place-items:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--t3);font-family:var(--mono);font-size:12px}
.mad--wide .mad-box{min-height:100px} @media(min-width:760px){.mad--wide .mad-box{min-height:90px}}
.mad--rect .mad-box{min-height:250px;max-width:300px}
.mad--inline .mad-box{min-height:280px}
.mad--tall{margin:0;position:sticky;top:var(--s5)} .mad--tall .mad-box{min-height:600px;width:300px}

/* разделы главной */
.msec{padding:var(--s7) 0 0;border-top:1px solid var(--line);margin-top:var(--s6)}
.mcards{display:grid;gap:var(--s6);margin-top:var(--s5)} @media(min-width:900px){.mcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcard{display:grid;gap:var(--s3);align-content:start;padding-top:var(--s4);border-top:2px solid var(--t1)}
.mcard .mnum{font-size:clamp(48px,5vw,64px)}
.mcard h3{margin-top:var(--s3);font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.1;letter-spacing:-.015em}
.mcard-a:hover h3{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.mdrops{display:grid;gap:var(--s6)} @media(min-width:1000px){.mdrops{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.mdrops .mad{margin-top:0}}
.mdr{margin-top:var(--s4);border-top:1px solid var(--line)}
.mdr li a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s2) var(--s5);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.mdr li a:hover .mdr-n b{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.mdr-n{display:grid;min-width:0} .mdr-n b{font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdr-n span{font-size:13px;color:var(--t3)}
.mdr-p{font-variant-numeric:tabular-nums;color:var(--t1);white-space:nowrap} .mdr-p s{color:var(--t3);margin-right:var(--s1)}
.mdr-c{font-family:var(--disp);font-weight:900;font-size:20px;color:var(--down);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
@media(max-width:560px){.mdr li a{grid-template-columns:minmax(0,1fr) auto}.mdr-p{grid-column:1;grid-row:2;font-size:14px}.mdr-c{grid-row:1/3;grid-column:2}}

/* график: широкая версия и версия для телефона, легенда и источник — текстом под графиком */
.mch{margin:0;display:grid;gap:var(--s3)}
.mch svg{display:block;width:100%;height:auto}
.mch .mch-n{display:none} @media(max-width:700px){.mch .mch-w{display:none}.mch .mch-n{display:block}}
.mch-g{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.mch-ax{fill:var(--t3);font-family:var(--mono)}
.mch-hb{fill:none;stroke:var(--red);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.mch-rest{fill:none;stroke:var(--t3);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.mch-dot--hb{fill:var(--red)} .mch-dot--rest{fill:var(--t3)}
.mch-end{fill:var(--t2);font-family:var(--disp);font-weight:600} .mch-end--hb{fill:var(--red)}
.mch-cap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;font-size:13px;color:var(--t3)}
.mch-key{display:inline-flex;align-items:center;gap:var(--s2);color:var(--t2)} .mch-key b{color:var(--t1);font-variant-numeric:tabular-nums}
.mch-sw{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--t3)} .mch-sw--hb{height:4px;background:var(--red)}
.mch-src{flex:1 1 100%} .mch-dom{margin-left:auto}
@media(min-width:701px){.mch-key{display:none}}   /* на широком графике подписи стоят у концов линий */
@media(min-width:900px){.mch-src{flex:1 1 auto}}

/* статья */
.mart-h{display:grid;gap:var(--s4);padding:var(--s7) 0 var(--s5);max-width:900px}
.mart-t{font-size:clamp(36px,5.2vw,68px);line-height:.98;max-width:20ch}
.mart-fig{display:grid;gap:var(--s5);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mbig{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s5) var(--s8)}
.mart-body{display:grid;gap:var(--s7);padding-top:var(--s6)}
@media(min-width:1200px){.mart-body{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1199px){.mart-rail{display:none}}
.mart-prose{max-width:68ch;font-size:18px;line-height:1.65}
.mart-prose p:first-child{font-size:21px;line-height:1.55}
.mart-prose h2{margin-top:var(--s5);font-family:var(--disp);font-weight:900;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:var(--t1)}
.mtab{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.mtab th,.mtab td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--line);text-align:left}
.mtab th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);font-weight:400}
.mtab td:not(:first-child),.mtab th:not(:first-child){text-align:right}
.mtab .down{color:var(--down)} .mtab .up{color:var(--up)}
.mhow{margin-top:var(--s7);padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);max-width:900px}
.mhow p{margin-top:var(--s3);color:var(--t2);font-size:15px;max-width:80ch}
.mhow a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}

/* вторая версия главной (11.10.2026): строение журнала с колонками — вертикальные подписи разделов,
   «главные истории» рядом с главной, лента слева и колонка справа */
.mrail{display:none}
@media(min-width:1100px){
  .mrail{display:flex;justify-content:center;align-items:flex-start;border-right:1px solid var(--line);padding-right:var(--s3)}
  .mrail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--t1);border-bottom:4px solid var(--red);padding-bottom:var(--s3)}
}
.mtops{display:grid;gap:var(--s6);padding:var(--s7) 0 0}
@media(min-width:1100px){.mtops{grid-template-columns:44px minmax(0,7fr) minmax(0,4fr);grid-template-areas:"rail lead list";column-gap:var(--s6)}
  .mtops>.mrail{grid-area:rail}.mlead{grid-area:lead}.mtoplist{grid-area:list}}
.mlead{display:grid;gap:var(--s4);align-content:start}
.mlead-cv{display:block;margin-bottom:var(--s2)}
.mtoplist{display:grid;align-content:start;border-top:2px solid var(--t1)}
.mtoplist li a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.mtoplist .mth{width:96px;height:96px}
.mtl-t{display:grid;gap:var(--s2)}
.mtoplist h3{font-family:var(--disp);font-weight:900;font-size:20px;line-height:1.1;letter-spacing:-.015em}
.mtl-n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.mtl-n b{font-family:var(--disp);font-size:18px;letter-spacing:-.02em;text-transform:none;color:var(--red);margin-right:var(--s1)}
.mtoplist a:hover h3,.mfs a:hover h3,.mq a:hover .mq-h b{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.mbody{display:grid;gap:var(--s7);margin-top:var(--s6)}
@media(min-width:1100px){.mbody{grid-template-columns:minmax(0,1fr) 340px;column-gap:var(--s7)}}
.mriver{display:grid;gap:var(--s6)} @media(min-width:1100px){.mriver{grid-template-columns:44px minmax(0,1fr)}}
.mfeed{margin-top:var(--s4);border-top:2px solid var(--t1)}
.mfeed>li{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.mq a{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s4);align-items:start}
.mq .mth{width:80px;height:80px}
.mq-t{display:grid;gap:var(--s1)} .mq-h{font-size:18px;line-height:1.35;color:var(--t2)} .mq-h b{color:var(--t1);font-weight:600}
.mq-cat{font-size:13px;color:var(--t3)}
.mq--drop .mkick{color:var(--down)}
.mfs a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5);align-items:start;padding:var(--s3) 0}
.mfs-t{display:grid;gap:var(--s2);align-content:start}
.mfs h3{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.05;letter-spacing:-.02em}
@media(max-width:600px){.mfs a{grid-template-columns:1fr;gap:var(--s3)}}
.mside{display:grid;gap:var(--s6);align-content:start}
.mside-b{border-top:2px solid var(--t1);padding-top:var(--s3)}
.mside-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t1)}
.mpop{margin-top:var(--s2)} .mpop li{display:grid;grid-template-columns:2.2ch 1fr;gap:var(--s3);align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.mpop-i{font-family:var(--disp);font-weight:900;font-size:40px;line-height:.85;color:var(--red);font-variant-numeric:tabular-nums}
.mpop a{display:grid;gap:var(--s1)} .mpop b{font-weight:600;color:var(--t1);line-height:1.25} .mpop span{font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums} .mpop em{font-style:normal;color:var(--down);font-weight:600}
.mpop a:hover b{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.mmv{margin-top:var(--s2)} .mmv li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--t2)}
.mmv b{font-variant-numeric:tabular-nums} .mmv .down{color:var(--down)} .mmv .up{color:var(--up)}
.mside .mad{margin:0}
.mart-rail{display:grid;gap:var(--s6);align-content:start}
.msec .chips{margin-top:var(--s4)}

/* обложки и миниатюры (третья версия, 11.10.2026): наши фото товаров на белой плашке. Снимки на белом
   фоне — multiply смыкает их без рамок; кадр узкий и по центру, водяной знак в углу снимка уходит за край */
.mcv{display:grid;background:var(--plate);border-radius:var(--r2);overflow:hidden}
.mcv-ph{display:flex;justify-content:center;min-height:0;overflow:hidden}
.mcv-i{position:relative;flex:1 1 0;min-width:0;height:100%}
.mcv-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.mcv-i::after,.mth::after{content:"";position:absolute;right:0;bottom:0;width:17%;height:17%;background:var(--plate)}   /* водяной знак снимка */
.mth::after{width:12%;height:12%}
.mcv-i img,.mth img{filter:brightness(1.03)}   /* фон снимков 254 — дотянуть до белого плашки, иначе виден край кадра */
.mcv-txt{display:grid;gap:var(--s2);align-content:end}
.mcv-num{font-family:var(--disp);font-weight:900;line-height:.84;letter-spacing:-.05em;color:var(--red-fill);font-variant-numeric:tabular-nums}
.mcv-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4d4a44}
.mcv--lead{aspect-ratio:16/10;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mcv--lead .mcv-txt{grid-area:1/1;padding:var(--s6) var(--s5)}
.mcv--lead .mcv-ph{grid-area:1/2;height:100%}
.mcv--lead .mcv-i+.mcv-i{margin-left:-7%}
.mcv--lead .mcv-num{font-size:clamp(60px,7.2vw,124px)}
.mcv--card{aspect-ratio:5/4;grid-template-rows:minmax(0,1fr) auto}
.mcv--card .mcv-ph{height:100%}
.mcv--card .mcv-i+.mcv-i{margin-left:-10%}
.mcv--card .mcv-txt{padding:0 var(--s4) var(--s4)}
.mcv--card .mcv-num{font-size:clamp(38px,4vw,56px)}
@media(max-width:700px){.mcv--lead{aspect-ratio:auto;grid-template-columns:1fr}.mcv--lead .mcv-ph{grid-area:1/1;height:320px}.mcv--lead .mcv-txt{grid-area:2/1;padding:var(--s4) var(--s4) var(--s5)}}
.mth{position:relative;display:block;flex:none;width:72px;height:72px;border-radius:var(--r);background:var(--plate);overflow:hidden}
.mth img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);mix-blend-mode:multiply}