/* Apex Bio · статья и список статей — шаблоны single.php и category.php.
   Метки Рахмана 20.09.2026: статья «вообще треш, ничего не видно — сделать белой, картинки не
   вставкой, а фоном»; список статей «привести в порядок, красивой и качественной».
   Приём светлого листа взят из legal.css (.litband + водяной знак), здесь — подача текста и кадров. */

/* ---------- обложка статьи ---------- */
.art-cover{position:relative;isolation:isolate;display:grid;align-items:end;
  min-height:clamp(340px,42vw,520px);padding:calc(var(--head-h,76px) + clamp(28px,4vw,56px)) 0 clamp(36px,4.6vw,72px);
  overflow:clip}
/* кадр сдвинут вправо: слева читается текст, справа виден сам снимок */
.art-cover-pic{position:absolute;inset:-2%;z-index:-2;background:var(--pic) right center/cover no-repeat;
  filter:saturate(.95) brightness(.78)}
.art-cover::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(94deg,oklch(15% .035 250 / .96) 0%,oklch(15% .035 250 / .9) 34%,oklch(15% .035 250 / .5) 68%,oklch(15% .035 250 / .3) 100%),
             linear-gradient(180deg,oklch(15% .035 250 / .82) 0%,transparent 26%,oklch(15% .035 250 / .55) 100%)}
.art-cover .pg-crumbs{margin-bottom:clamp(20px,2.6vw,38px)}
.art-head{max-width:min(46rem,100%)}
.art-head h1{margin-bottom:var(--s-5);font-size:clamp(1.55rem,3.1vw,2.9rem);line-height:1.1;text-wrap:balance}
.art-head .lead{max-width:60ch;margin-bottom:var(--s-5)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  font:500 var(--fs-0)/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.art-meta > * + *{display:flex;align-items:center;gap:var(--s-4)}
.art-meta > * + *::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sky);opacity:.7}

/* ---------- светлый лист ---------- */
.art-band{position:relative;overflow:clip}
/* стык с тёмной обложкой: полоса-перелив, как между секциями главной */
.art-band::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(60px,7vw,110px);z-index:2;
  pointer-events:none;background:linear-gradient(180deg,oklch(15% .035 250 / .5) 0%,oklch(15% .035 250 / .12) 45%,transparent 100%)}
/* водяной знак: ниже текста первого экрана и заметно слабее — он подложка, а не элемент страницы */
.art-mark{position:absolute;left:50%;top:clamp(220px,26vw,420px);translate:-50% 0;z-index:0;
  width:min(1180px,90%);aspect-ratio:1006/221;pointer-events:none;
  background:url(../img/site/logo_h.png) center/contain no-repeat;
  opacity:.022;filter:grayscale(1) brightness(.3)}
.art-sheet{position:relative;z-index:1;padding:clamp(44px,5.5vw,92px) 0 clamp(52px,6vw,104px)}
.art-grid{display:grid;grid-template-columns:clamp(210px,20vw,272px) minmax(0,1fr);
  gap:clamp(30px,4.4vw,72px);align-items:start}
.art-grid-solo{grid-template-columns:minmax(0,1fr);justify-items:center}
.art-grid-solo .art-doc{width:min(74ch,100%)}

/* оглавление */
.art-side{position:sticky;top:calc(var(--head-h,76px) + 20px);display:grid;gap:var(--s-5)}
.art-side-h{margin:0;font:500 var(--fs-0)/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:oklch(45% .03 246)}
.art-toc{display:grid;gap:1px;max-height:min(58vh,620px);overflow:auto;overscroll-behavior:contain;
  padding-right:var(--s-2);scrollbar-width:thin}
.art-toc a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);align-items:baseline;
  padding:9px 10px;border-radius:var(--r-1);font-size:var(--fs-1);line-height:1.35;color:var(--muted);
  border-left:2px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.art-toc a i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--dim);font-size:.75rem;letter-spacing:.04em}
.art-toc a:hover{background:oklch(24% .045 250 / .05);color:var(--text)}
.art-toc a.on{background:oklch(52% .14 235 / .08);border-left-color:var(--sky);color:var(--text)}
.art-toc a.on i{color:var(--sky)}
.art-side-ask{padding:var(--s-5);border:1px solid oklch(24% .045 250 / .12);border-radius:var(--r-2);
  background:oklch(100% 0 0 / .66);box-shadow:0 22px 44px -34px oklch(24% .045 250 / .5)}
.art-side-ask p{margin:0 0 var(--s-4);font-size:var(--fs-1);color:var(--muted)}

/* ---------- документ ---------- */
/* min-width:0 обязателен: без него широкая таблица внутри растягивает колонку грида,
   и на телефоне текст уезжает за экран (поймано обходом 390px 20.09.2026) */
.art-doc{max-width:74ch;min-width:0;display:grid;gap:clamp(34px,3.8vw,60px)}
.art-part,.art-body{min-width:0}
.art-part{scroll-margin-top:calc(var(--head-h,76px) + 24px)}
.art-part-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:baseline;
  margin:0 0 var(--s-5)}
.art-part-head h2{margin:0;font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:.05em;text-wrap:balance}
.art-part-n{font-variant-numeric:tabular-nums;color:var(--sky);font:500 var(--fs-0)/1.6 var(--fb);letter-spacing:.1em}
.art-part-n:empty{display:none}

/* картинка раздела — фоном шапки, а не вставкой в текст (просьба владельца) */
/* кадр шире колонки текста: полоса выходит за неё и работает как разделитель глав */
.art-part-head.has-pic{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--s-2);min-height:clamp(220px,25vw,330px);
  margin:0 0 var(--s-6);margin-inline:clamp(-40px,-2.6vw,-12px);
  padding:clamp(22px,2.6vw,36px) clamp(26px,3vw,48px);border-radius:var(--r-3);overflow:hidden;
  box-shadow:0 30px 60px -38px oklch(24% .045 250 / .6)}
/* кадр — настоящая картинка, а не CSS-фон: так у него остаётся alt и он попадает в поиск */
.art-part-pic{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;transform:scale(1.03);transition:transform var(--t-slow) var(--e-out)}
.art-part-head.has-pic::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,oklch(20% .04 250 / .12) 0%,oklch(18% .04 250 / .74) 62%,oklch(15% .035 250 / .92) 100%)}
.art-part-head.has-pic:hover .art-part-pic{transform:scale(1.06)}
.art-part-head.has-pic h2{color:oklch(96% .01 230)}
.art-part-head.has-pic .art-part-n{color:oklch(85% .07 220)}

/* тело раздела */
.art-body{color:oklch(36% .034 248);font-weight:300;line-height:1.68}
/* воздух между абзацами задаётся здесь; своего margin у p нет (обнулён в site.css),
   и отдельное правило «.art-body p{margin:0}» его бы перебило — специфичность выше */
.art-body > * + *{margin-top:var(--s-5)}
.art-body b,.art-body strong{font-weight:500;color:var(--text)}
.art-body a{color:var(--sky-2);text-decoration:underline;text-underline-offset:3px}
.art-body h3{margin:var(--s-6) 0 var(--s-3);font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.06em;color:var(--text)}
.art-body h4{margin:var(--s-5) 0 var(--s-2);font:500 var(--fs-2)/1.3 var(--fb);letter-spacing:.02em;
  text-transform:none;color:var(--text)}
.art-body h3:first-child,.art-body h4:first-child{margin-top:0}

.art-body ul,.art-body ol{display:grid;gap:var(--s-3);margin:var(--s-4) 0;padding:0;list-style:none;counter-reset:artn}
.art-body li{position:relative;padding-left:var(--s-6)}
.art-body ul > li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:1px;background:var(--sky)}
.art-body ol > li::before{content:counter(artn);counter-increment:artn;position:absolute;left:0;top:.06em;
  font:500 .78rem/1.7 var(--fb);color:var(--sky);font-variant-numeric:tabular-nums}
.art-body li > ul,.art-body li > ol{margin:var(--s-2) 0 0}

.art-body table{width:100%;margin:var(--s-5) 0;border-collapse:collapse;font-size:var(--fs-1);
  background:oklch(100% 0 0 / .6);border-radius:var(--r-2);overflow:hidden;
  box-shadow:0 18px 40px -34px oklch(24% .045 250 / .6)}
/* 29.09: плагин каталога клиента (peptide-catalog, до 768 px) ставит `article table td{white-space:nowrap}`: правило
   на самой ячейке сильнее переноса, унаследованного от таблицы, и длинный текст уходил за край. Класс сильнее тега */
.art-body td,.art-body th{padding:11px 14px;border:1px solid oklch(24% .045 250 / .1);vertical-align:top;text-align:left;
  white-space:normal}
.art-body th,.art-body tr:first-child td{background:oklch(52% .14 235 / .07);color:var(--text);
  font:500 var(--fs-0)/1.4 var(--fb);letter-spacing:.06em;text-transform:uppercase}
.art-body td:first-child{color:var(--text)}
.art-body blockquote{margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);border-left:2px solid var(--sky);
  background:oklch(100% 0 0 / .6);border-radius:0 var(--r-2) var(--r-2) 0;color:var(--text)}
.art-body img{border-radius:var(--r-2);margin:var(--s-5) 0}

/* кадры, не ушедшие в шапку раздела: широкой полосой, с подложкой под прозрачные png */
.art-figs{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
.art-fig{margin:0;border-radius:var(--r-3);overflow:hidden;border:1px solid oklch(24% .045 250 / .1);
  background:oklch(97% .006 235);box-shadow:0 26px 54px -40px oklch(24% .045 250 / .55)}
.art-fig img{width:100%;height:auto;margin:0;border-radius:0}

/* преамбула до первого раздела */
.art-intro .art-body{font-size:var(--fs-2);color:var(--text)}
.art-intro{padding-bottom:var(--s-5);border-bottom:1px solid oklch(24% .045 250 / .1)}

/* дисклеймер в конце листа */
.art-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:start;
  padding:clamp(20px,2.4vw,30px);border:1px solid oklch(24% .045 250 / .12);border-radius:var(--r-3);
  background:oklch(100% 0 0 / .72);box-shadow:0 26px 54px -38px oklch(24% .045 250 / .5)}
.art-note .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:oklch(52% .14 235 / .1);color:var(--sky)}
.art-note .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.art-note h3{margin:0 0 var(--s-2);font-size:var(--fs-2);letter-spacing:.05em}
.art-note p{margin:0;font-size:var(--fs-1);color:var(--muted);font-weight:300}

/* ---------- «читайте также» ---------- */
.art-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.art-next-i a{display:grid;gap:var(--s-3);height:100%}
.art-next-pic{display:block;aspect-ratio:16/10;border-radius:var(--r-2);border:1px solid var(--line);
  background:var(--pic) center/cover no-repeat;
  transition:transform var(--t-mid) var(--e-out),border-color var(--t-mid)}
.art-next-i a:hover .art-next-pic{transform:translateY(-4px);border-color:var(--line-2)}
.art-next-i time{font:500 var(--fs-0)/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.art-next-i b{font:400 var(--fs-2)/1.35 var(--fb);color:var(--text);transition:color var(--t-mid)}
.art-next-i a:hover b{color:var(--sky-2)}

@media(max-width:900px){
  .art-grid{grid-template-columns:minmax(0,1fr)}
  .art-side{position:static;max-height:none}
  .art-toc{max-height:none;overflow:visible;
    padding:var(--s-4);border:1px solid oklch(24% .045 250 / .12);border-radius:var(--r-2);
    background:oklch(100% 0 0 / .6)}
  .art-doc{max-width:none}
  .art-next{grid-template-columns:minmax(0,1fr)}
  .art-mark{width:96%;opacity:.02}
}
@media(max-width:640px){
  .art-cover{min-height:auto;padding-bottom:clamp(28px,6vw,44px)}
  .art-part-head.has-pic{min-height:160px}
}
/* 29.09: таблицы — до 768 px, как у плагина каталога клиента: с этой ширины он делает таблицу блоком, и на 641–768
   (планшет, телефон боком) последняя колонка резалась без прокрутки (5 колонок в 725 px при колонке текста 588–705) */
@media(max-width:768px){
  /* таблица шире экрана: скроллится вбок, и это должно быть ВИДНО — иначе правая колонка
     выглядит просто обрезанной (находка мобильного обхода 20.09.2026) */
  /* 24.09: текст в ячейках переносится (было white-space:nowrap — строка таблицы уходила в одну длинную линию),
     вбок таблица листается, только если колонок много: у ячейки нижний предел ширины */
  .art-body table{display:block;max-width:100%;overflow-x:auto;white-space:normal;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .art-body th,.art-body td{min-width:8.5em}
  .art-body table::-webkit-scrollbar{height:4px}
  .art-body table::-webkit-scrollbar-thumb{background:oklch(52% .14 235 / .35);border-radius:999px}
  /* 28.09: и с подсказкой таблицу на 3–5 колонок читали обрезанной (обход телефонов). Таблица с шапкой
     (inc/articles.php apx_article_stack_tables) теперь стопка карточек: строка = карточка, над значением название колонки */
  .art-body table.apx-stack{display:block;overflow:visible;background:none;box-shadow:none;border:0;border-radius:0;
    -webkit-mask-image:none;mask-image:none}
  .art-body table.apx-stack>thead,.art-body table.apx-stack>tbody{display:block}
  .art-body table.apx-stack tr{display:block;margin:0 0 var(--s-3);border:1px solid oklch(24% .045 250 / .12);
    border-radius:var(--r-2);background:oklch(100% 0 0 / .6);overflow:hidden}
  .art-body table.apx-stack tr.apx-th{display:none}
  .art-body table.apx-stack td{display:block;min-width:0;padding:10px 14px;border:0;border-top:1px solid oklch(24% .045 250 / .08);
    background:none;color:var(--muted);font:300 var(--fs-1)/1.5 var(--fb);letter-spacing:normal;text-transform:none}
  .art-body table.apx-stack td:first-child{border-top:0;color:var(--text);font-weight:500}
  .art-body table.apx-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
    font:500 var(--fs-0)/1.4 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
}
@media(prefers-reduced-motion:reduce){
  .art-part-pic,.art-next-pic{transition:none}
  .art-part-head.has-pic:hover .art-part-pic{transform:scale(1.03)}
}

/* ---------- список статей (category.php) ---------- */
.al .art-sheet{padding-top:clamp(36px,4.4vw,72px)}
.al .art-mark{top:clamp(300px,34vw,560px)}

/* ведущая статья: кадр слева, текст справа */
.al-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,2.6vw,44px);
  align-items:stretch;margin-bottom:clamp(32px,4vw,64px);
  padding:clamp(18px,2vw,26px);border:1px solid oklch(24% .045 250 / .1);border-radius:var(--r-3);
  background:oklch(100% 0 0 / .66);box-shadow:0 34px 68px -46px oklch(24% .045 250 / .55);
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid),border-color var(--t-mid)}
.al-top:hover{transform:translateY(-3px);border-color:oklch(52% .14 235 / .3);
  box-shadow:0 40px 80px -46px oklch(24% .045 250 / .6)}
.al-top-pic{display:block;aspect-ratio:16/11;min-height:clamp(200px,22vw,320px);border-radius:var(--r-2);
  background:var(--pic) center/cover no-repeat}
.al-top-copy{display:flex;flex-direction:column;gap:var(--s-3);justify-content:center;
  padding:clamp(6px,1.4vw,22px) clamp(6px,1.2vw,18px)}
.al-badge{align-self:flex-start;padding:5px 12px;border-radius:var(--pill);
  background:oklch(52% .14 235 / .1);color:var(--sky-2);
  font:500 .68rem/1.5 var(--fb);letter-spacing:.16em;text-transform:uppercase}
.al-top-copy b{font:400 clamp(1.15rem,1.9vw,1.7rem)/1.22 var(--fd);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);text-wrap:balance}
.al-lead{font-size:var(--fs-1);font-weight:300;line-height:1.6;color:oklch(40% .032 248)}
.al-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  font:500 .72rem/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.al-meta i{font-style:normal;display:flex;align-items:center;gap:var(--s-3)}
.al-meta i::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sky);opacity:.7}
.al-go{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);
  font:500 var(--fs-0)/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-2)}
.al-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:translate var(--t-mid) var(--e-out)}
.al-top:hover .al-go svg{translate:5px 0}

/* сетка карточек */
.al-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.al-card > a{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;
  border:1px solid oklch(24% .045 250 / .1);border-radius:var(--r-3);overflow:hidden;
  background:oklch(100% 0 0 / .66);box-shadow:0 24px 50px -40px oklch(24% .045 250 / .5);
  transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid),border-color var(--t-mid)}
.al-card > a:hover{transform:translateY(-4px);border-color:oklch(52% .14 235 / .3);
  box-shadow:0 34px 64px -40px oklch(24% .045 250 / .58)}
.al-pic{display:block;aspect-ratio:16/10;background:var(--pic) center/cover no-repeat;
  border-bottom:1px solid oklch(24% .045 250 / .08)}
.al-body{display:flex;flex-direction:column;gap:var(--s-3);padding:clamp(16px,1.8vw,24px)}
.al-body b{font:400 var(--fs-2)/1.35 var(--fb);letter-spacing:.01em;color:var(--text);text-wrap:balance}
.al-card:hover .al-body b{color:var(--sky-2)}

/* пагинация на светлом листе */
.al .pg-pages{margin-top:clamp(28px,3.4vw,52px)}
.al .pg-pages ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.al .pg-pages a,.al .pg-pages span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;
  border-radius:var(--pill);border:1px solid oklch(24% .045 250 / .14);color:var(--muted);
  font:500 var(--fs-0)/1 var(--fb);letter-spacing:.08em;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.al .pg-pages a:hover{border-color:oklch(52% .14 235 / .4);color:var(--text)}
.al .pg-pages .current{background:oklch(52% .14 235 / .12);border-color:oklch(52% .14 235 / .35);color:var(--text)}

@media(max-width:1000px){
  .al-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .al-top{grid-template-columns:minmax(0,1fr)}
  .al-top-pic{min-height:200px}
  .al-grid{grid-template-columns:minmax(0,1fr)}
}

/* метка Рахмана 24.09.2026 («текст не видно, непонятный перекат цвета»): первый абзац стоял на переливе «тёмная
   обложка → светлый лист». Перелив короче, лист начинается после него; второй тёмный слой на стыке убран. */
.art-band{--band:clamp(84px,8vw,132px)}
.art-band::before{display:none}
.art-band>.art-sheet{padding-top:calc(var(--band) + clamp(22px,2.6vw,44px))}

/* ---------- озвучка статьи (02.10.2026): кнопка под заголовком на тёмной обложке, полоса с перемоткой ---------- */
.art-listen{display:flex;align-items:center;gap:var(--s-4);max-width:26rem;margin-top:var(--s-5);padding:10px 20px 10px 10px;
  border:1px solid var(--glass-line);border-radius:var(--pill);background:oklch(15% .035 250 / .55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.art-play{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,oklch(91% .06 218) 0%,oklch(80% .11 222) 100%);
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / .6),0 10px 24px -12px oklch(68% .13 225 / .7);transition:transform var(--t-fast) var(--e-out)}
.art-play:active{transform:scale(.95)}
.art-play svg{width:20px;height:20px}
.art-play .i-play{fill:currentColor;margin-left:2px}
.art-play .i-pause{display:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.art-listen.on .art-play .i-play{display:none}
.art-listen.on .art-play .i-pause{display:block}
.art-listen-body{flex:1 1 auto;min-width:0;display:grid;gap:9px}
.art-listen-body b{font:500 var(--fs-0)/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.art-track{position:relative;display:block;height:4px;border-radius:2px;background:oklch(96% .01 230 / .2);cursor:pointer;touch-action:none}
.art-track::before{content:"";position:absolute;inset:-14px 0}
.art-track i{position:absolute;inset:0;border-radius:inherit;background:var(--sky-2);transform:scaleX(0);transform-origin:left center}
.art-time{font:500 .74rem/1 var(--fb);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:760px){.art-listen{max-width:none}}

/* ---------- 02.10.2026: кадры статей видны (Рахман: «картинка есть, а её не видно») ----------
   Обложка на телефоне: кадр сверху целиком, растворяется в полотно, заголовок под ним (был фоном под заливкой до 96 %).
   Шапки разделов с кадром: заливка только у нижней кромки под заголовком, верх кадра чистый. */
.art-part-head.has-pic::after{background:linear-gradient(180deg,transparent 0%,transparent 42%,oklch(18% .04 250 / .7) 72%,oklch(15% .035 250 / .92) 100%)}
@media (max-width:760px){
  .art-cover{display:flex;flex-direction:column;align-items:stretch;padding-top:calc(var(--head-h,64px) + min(60vw,280px) - 36px)}
  .art-cover-pic{inset:0 0 auto 0;height:calc(var(--head-h,64px) + min(60vw,280px));filter:none;background-position:62% center;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
  .art-cover::after{background:linear-gradient(180deg,oklch(15% .035 250 / .5) 0,transparent calc(var(--head-h,64px) + 20px))}
  .art-part-head.has-pic{min-height:210px}
}