/* ══════════════ портфолио ══════════════
   Страница экранами. Цвета и шрифт берутся у владельца страницы: текст
   его цветом (--ink2), подложки из его цвета фона (--bg) с его же
   плотностью карточки (--card), линии и приглушённый текст из цвета
   текста. Так один и тот же каркас читается и на тёмной странице, и на
   светлой, при любом акценте.

   Язык свой: тонкие линии вместо теней, мелкие моноширинные подписи
   капсом, номера экранов, крупные узкие заголовки капсом, всё прижато к
   краям окна, а не собрано колонкой по центру. Свечений и градиентов нет. */

.stage.pf,.blk-pf{
  --pf-ink:var(--ink2,#fff);
  --pf-line:color-mix(in srgb,var(--ink2,#fff) 17%,transparent);
  --pf-line2:color-mix(in srgb,var(--ink2,#fff) 32%,transparent);
  --pf-dim:color-mix(in srgb,var(--ink2,#fff) 62%,transparent);
  /* Подложка не прозрачнее трети: при нулевой плотности карточки текст
     поверх пёстрого фона было бы не прочесть. */
  --pf-pan:color-mix(in srgb,var(--bg,#0a0a0e) calc(max(var(--card,.55),.32) * 100%),transparent);
  --pf-r:6px;
  --pf-g:clamp(16px,3.2vw,44px);
  --pf-mono:var(--mono,ui-monospace,monospace);
}

/* ── прокрутка ──
   Прилипания средствами CSS больше нет. На телефоне оно спорило с
   инерцией пальца и с адресной строкой Safari, на компьютере прыжок был
   мгновенным и резким. Теперь на телефоне прокрутка обычная, а на
   компьютере экран за экраном ведёт скрипт плавным переходом (или не
   ведёт вовсе, если владелец выбрал «плавно без привязки»). */
/* Предпросмотр в кабинете ужимает карточку и может запретить прокрутку
   корня (prof.js). У портфолио листать нужно всегда. */
html:has(> body.pf-on){overflow-y:auto!important}

/* У сцены place-items:center от одиночной карточки, а свежий Chrome
   применяет выравнивание и к блочным потомкам: экраны сжимались по
   содержимому и вставали по центру. Экрану нужна вся ширина окна. */
.stage.pf{place-items:normal}
/* svh, а не vh и не dvh: высота не прыгает, когда на телефоне прячется
   и появляется адресная строка, и страница не дёргается под пальцем */
.stage.pf .pfs{position:relative;z-index:2;width:100%;justify-self:stretch;min-height:100vh;min-height:100svh}
.stage.pf .pf-hero{min-height:100vh;min-height:100svh}

/* Экраны ниже первого не рисуются, пока до них далеко: место под них
   держится заранее, поэтому ничего не прыгает. Экран с текстом песни не
   откладываем: караоке меряет строки и в отложенном экране получило бы нули. */
/* content-visibility здесь больше нет: заготовка размера считалась без
   отступов экрана, и невидимые экраны были выше настоящих на сотню
   пикселей, а при появлении сжимались. Листание по экранам мерило их
   до этого и промахивалось. Разметка экранов лёгкая, картинки и так
   грузятся по мере прокрутки. */


.stage.pf section.pfs{display:flex;color:var(--pf-ink);
  padding-block:clamp(20px,3.6vh,36px) clamp(56px,9vh,84px);
  padding-inline:var(--pf-g) calc(var(--pf-g) + 64px)}
.pf-in{flex:1;display:flex;flex-direction:column;min-width:0;width:var(--pf-w,100%);max-width:1360px}
.stage.pf.pf-narrow .pf-in{margin-inline:auto}
/* линия между экранами, если владелец её включил */
.stage.pf.pf-div section.pfs::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;background:var(--pf-line2)}

/* Шапка экрана: номер из общего числа, линия во всю ширину, вид раздела. */
.pf-h{display:flex;align-items:center;gap:14px;font:500 10.5px/1 var(--pf-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--pf-dim)}
.pf-h b{color:var(--accent);font-weight:600}
/* номер «02 / 07» читается слева направо и на арабском: иначе порядок
   чисел переворачивается и выходит «07 / 02» */
.pf-n,.pf-idx b,.pf-idx .pf-of{direction:ltr;unicode-bidi:isolate}
.pf-rule{flex:1;height:1px;background:var(--pf-line)}
.pf-k{white-space:nowrap}
/* Заголовок экрана: узкий и крупный, капсом, плотный интерлиньяж. Шрифт
   владельца: у каждой страницы он свой, и заголовок должен быть её. */
.pf-t{margin:0;padding-top:clamp(14px,3vh,30px);font-family:var(--font,inherit);font-weight:800;
  font-size:clamp(36px,5.2vw,84px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;
  overflow-wrap:anywhere;max-width:18ch}
.pf-b{padding-top:clamp(14px,2.6vh,26px);min-width:0}

/* ── расположение внутри экрана ──
   Заголовок и содержимое живут в одной группе (.pf-g), и двигается вся
   группа: по умолчанию по центру окна. «По краям» (pv-split) оставляет
   прежний вид: заголовок у шапки, содержимое у нижнего края. */
.pf-g{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.pv-top .pf-g{justify-content:flex-start}
.pv-bottom .pf-g{justify-content:flex-end}
.pv-split .pf-g{justify-content:space-between}
/* размер заголовка */
.hs-m .pf-t{font-size:clamp(28px,3.4vw,54px)}
.hs-s .pf-t{font-size:clamp(20px,2vw,32px);letter-spacing:-.015em;line-height:1}
/* скрытый заголовок остаётся для программ чтения с экрана */
.hs-none .pf-t{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hs-none .pf-b{padding-top:clamp(14px,2.6vh,26px)}
/* выравнивание: заголовок и узкие панели; сетки проектов и навыков и так во всю ширину */
.ph-center .pf-t{text-align:center;margin-inline:auto}
.ph-center .pf-b > *{margin-inline:auto}
.ph-right .pf-t{text-align:end;margin-inline-start:auto}
.ph-right .pf-b > *{margin-inline-start:auto}
/* рядом: заголовок в левой колонке, содержимое в правой */
.pa-side .pf-g{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);column-gap:clamp(24px,3.4vw,56px);
  align-content:center;align-items:start}
.pa-side.pv-top .pf-g{align-content:start}
.pa-side.pv-bottom .pf-g{align-content:end}
.pa-side.pv-split .pf-g{align-content:stretch}
.pa-side.pv-split .pf-b{align-self:end}
.pa-side .pf-t{max-width:none}
.pa-side.hs-l .pf-t{font-size:clamp(32px,4vw,68px)}
.pa-side.ph-right .pf-g{grid-template-columns:minmax(0,1fr) minmax(180px,.42fr)}
.pa-side.ph-right .pf-t{order:2}
.pa-side.ph-center .pf-t{text-align:center}
.pa-side.hs-none .pf-g{grid-template-columns:minmax(0,1fr)}
/* высота по содержимому: экран не растягивается на окно */
.stage.pf section.pfs.ht-auto{min-height:0;padding-block:clamp(40px,8vh,96px) clamp(40px,8vh,96px)}
.ht-auto .pf-g{justify-content:flex-start}

/* Мелкая подпись внутри экранов: номер акцентом и слова капсом. */
.pf-ml{display:flex;align-items:baseline;gap:10px;font:500 10.5px/1.3 var(--pf-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--pf-dim);min-width:0}
.pf-ml i{font-style:normal;color:var(--accent);font-weight:600}

/* Общая подложка панелей. Тонкая рамка, небольшое скругление, без тени. */
.pf-about,.pf-md,.pf-sk,.pf-ly,.pf-pj,.stage.pf section.pfs .blk{
  background:var(--pf-pan);border:1px solid var(--pf-line);border-radius:var(--pf-r);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none}

/* Экраны проявляются, когда до них долистали (класс ставит скрипт). */
.pf-js .stage.pf:not(.pf-seq) section.pfs .pf-in{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.pf-js .stage.pf:not(.pf-seq) section.pfs:not(.pf-seen) .pf-in{opacity:0;transform:translateY(14px)}
/* по очереди: шапка, заголовок, потом части содержимого одна за другой */
.pf-js .stage.pf.pf-seq section.pfs :is(.pf-h,.pf-g > *,.pf-proj > *,.pf-ics > *,.pf-sk > *){
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.pf-js .stage.pf.pf-seq section.pfs:not(.pf-seen) :is(.pf-h,.pf-g > *,.pf-proj > *,.pf-ics > *,.pf-sk > *){opacity:0;transform:translateY(12px)}
.pf-seq .pf-g > :nth-child(1){transition-delay:.08s}
.pf-seq .pf-g > :nth-child(2){transition-delay:.16s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(1){transition-delay:.24s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(2){transition-delay:.32s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(3){transition-delay:.40s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(4){transition-delay:.48s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(5){transition-delay:.56s}
.pf-seq :is(.pf-proj,.pf-ics,.pf-sk) > :nth-child(6){transition-delay:.64s}

/* ── метки сбоку ──
   Короткие штрихи у правого края, текущий длиннее и цветом акцента.
   Название экрана появляется при наведении, с номером. */
.pf-nav{position:fixed;z-index:40;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  display:grid;gap:2px;justify-items:end}
.pf-nav a{display:flex;align-items:center;gap:10px;padding:5px 0 5px 12px;color:var(--pf-ink);text-decoration:none}
.pf-nav i{display:block;width:14px;height:1px;background:var(--pf-line2);transition:width .25s ease,background .25s ease}
.pf-nav a:hover i,.pf-nav a:focus-visible i{background:var(--pf-ink);width:20px}
.pf-nav a.on i{width:30px;height:2px;background:var(--accent)}
.pf-nav span{font:500 10px/1 var(--pf-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:6px 8px;border:1px solid var(--pf-line);border-radius:3px;background:var(--pf-pan);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateX(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
[dir=rtl] .pf-nav span{transform:translateX(-6px)}
.pf-nav a:hover span,.pf-nav a:focus-visible span{opacity:1;transform:none}
.pf-nav a:focus-visible{outline:none}
.pf-nav a:focus-visible span{border-color:var(--accent)}

/* Счётчик у нижнего края: номер экрана, сколько всего и как он называется. */
.pf-idx{position:fixed;z-index:40;inset-inline-start:var(--pf-g);bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:baseline;gap:8px;font:500 10.5px/1 var(--pf-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--pf-dim);pointer-events:none}
.pf-idx b{color:var(--accent);font-weight:600}
.pf-idx .pf-nm{color:var(--pf-ink);opacity:.8;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* У каждого экрана номер уже есть в шапке: счётчик внизу нужен только
   первому экрану, где шапки нет. */
.pf-idx{transition:opacity .3s ease}
.pf-js:not(.pf-first) .pf-idx{opacity:0}

/* Полоса прогресса: на телефоне вместо меток, на широком экране по желанию. */
.pf-bar{display:none;position:fixed;z-index:40;inset-inline:0;top:0;height:2px;background:var(--pf-line)}
.pf-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .12s linear}
[dir=rtl] .pf-bar i{transform-origin:right}
.stage.pf.pf-bar-all .pf-bar{display:block}
@media (max-width:760px){
  .pf-nav,.pf-idx{display:none}
  .pf-bar{display:block}
  .pf-b{padding-top:18px}
  .pa-side .pf-g{display:flex;flex-direction:column}
  .pa-side.ph-right .pf-t{order:0}
  .hs-l .pf-t,.pa-side.hs-l .pf-t{font-size:clamp(32px,10vw,50px)}
  .hs-m .pf-t{font-size:clamp(26px,7.4vw,38px)}
  .hs-s .pf-t{font-size:22px}
  .stage.pf section.pfs.ht-auto{padding-block:32px 40px}
  .stage.pf section.pfs{padding-inline:16px;padding-block:22px 64px}
  .pf-idx{inset-inline-start:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
/* на первом экране нижняя строка карточки не должна упираться в счётчик */
.stage.pf .pf-hero{padding-bottom:52px}

/* ═════ обо мне ═════ */
.pf-about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.pf-about.solo{grid-template-columns:1fr;max-width:900px}
.pf-about.nolead{grid-template-columns:1fr}
.pf-lead{padding:clamp(18px,2.4vw,30px);font-size:clamp(16px,1.45vw,21px);line-height:1.5;font-weight:400}
.pf-lead p{margin:0 0 .7em;max-width:52ch}
.pf-lead p:last-child{margin:0}
.pf-ics{display:grid;align-content:stretch;border-inline-start:1px solid var(--pf-line)}
.pf-about.nolead .pf-ics{border:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pf-ic{padding:clamp(16px,2vw,22px);display:grid;align-content:start;gap:10px}
.pf-ic + .pf-ic{border-top:1px solid var(--pf-line)}
.pf-about.nolead .pf-ic + .pf-ic{border-top:0;border-inline-start:1px solid var(--pf-line)}
.pf-icd p{margin:0 0 .5em;font-size:14.5px;line-height:1.55;opacity:.9}
.pf-icd p:last-child{margin:0}
@media (max-width:760px){
  .pf-about,.pf-about.solo{grid-template-columns:1fr}
  .pf-ics{border-inline-start:0;border-top:1px solid var(--pf-line)}
  .pf-about.nolead .pf-ics{border-top:0;grid-template-columns:1fr}
  .pf-about.nolead .pf-ic + .pf-ic{border-inline-start:0;border-top:1px solid var(--pf-line)}
}
.pf-lead a,.pf-icd a,.pf-md a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ═════ проекты ═════
   Обложка в рамке 16:10: место отведено до загрузки картинки. */
.pf-proj{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-proj.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-proj.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-proj.n1{grid-template-columns:1fr}
.pf-pj{display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;
  transition:border-color .25s ease}
a.pf-pj:hover,a.pf-pj:focus-visible{border-color:var(--accent);outline:none}
.pf-cv{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--pf-line);
  background:color-mix(in srgb,var(--pf-ink) 5%,transparent)}
.pf-cv img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
a.pf-pj:hover .pf-cv img{transform:scale(1.03)}
.pf-cv > i{position:absolute;inset-inline-start:14px;bottom:8px;font-style:normal;font-family:var(--font,inherit);
  font-weight:800;font-size:clamp(48px,6vw,88px);line-height:.8;letter-spacing:-.04em;opacity:.14}
.pf-pjm{display:grid;gap:7px;padding:13px 14px 14px;align-content:start;flex:1}
.pf-pjm b{font-size:16.5px;font-weight:650;line-height:1.2;letter-spacing:-.01em}
.pf-pjd{font-size:13.5px;line-height:1.5;opacity:.82;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pf-host{margin-top:auto;padding-top:4px;font:500 10.5px/1.2 var(--pf-mono);letter-spacing:.04em;color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* один проект: обложка слева крупно, текст справа */
.pf-proj.n1 .pf-pj{flex-direction:row;max-width:1100px}
.pf-proj.n1 .pf-cv{flex:0 0 58%;border-bottom:0;border-inline-end:1px solid var(--pf-line)}
.pf-proj.n1 .pf-pjm{padding:clamp(16px,2vw,26px)}
.pf-proj.n1 .pf-pjm b{font-size:clamp(20px,2vw,28px)}
@media (max-width:1180px){
  .pf-proj.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pf-proj,.pf-proj.n2,.pf-proj.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pf-proj,.pf-proj.n2,.pf-proj.n4{grid-template-columns:1fr}
  .pf-proj.n1 .pf-pj{flex-direction:column}
  .pf-proj.n1 .pf-cv{flex:none;border-inline-end:0;border-bottom:1px solid var(--pf-line)}
}

/* ═════ навыки ═════
   Таблица из ячеек в одну линию: группа слева подписью, значки справа. */
.pf-sk{display:grid}
.pf-skg{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr)}
.pf-skg + .pf-skg{border-top:1px solid var(--pf-line)}
.pf-skg > .pf-ml{padding:16px 16px 0;align-self:start}
/* Ячейки гибкие, а не сетка с жёсткой шириной: в сетке длинное название
   (After Effects, Marvelous Designer) обрезалось многоточием, особенно в
   широких шрифтах вроде Press Start 2P. Теперь ячейка не уже своего самого
   длинного слова, текст переносится на вторую строку, а последний ряд
   растягивается до края, и таблица остаётся сплошной. */
.pf-skg ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  border-inline-start:1px solid var(--pf-line)}
.pf-skg li{flex:1 1 158px;display:flex;align-items:center;gap:10px;padding:13px 14px;font-size:14px;font-weight:500;
  border-inline-end:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line);margin-bottom:-1px}
.pf-skg li span{min-width:0;line-height:1.25;overflow-wrap:break-word;hyphens:manual}
.pf-skg li svg{flex:none;opacity:.9;transition:color .2s ease}
.pf-skg li:hover svg{color:var(--sc,var(--accent))}
.pf-skg li.w{flex-basis:316px}
.pf-skg li em{font-style:normal;font:600 14px/1 var(--pf-mono);color:var(--accent);width:20px;text-align:center;flex:none}
.pf-skg ul{overflow:hidden}
@media (max-width:640px){
  .pf-skg{grid-template-columns:1fr}
  .pf-skg > .pf-ml{padding:14px 14px 10px}
  .pf-skg ul{border-inline-start:0;border-top:1px solid var(--pf-line)}
  .pf-skg li{flex-basis:132px;padding:11px 12px;font-size:13px}
  .pf-skg li.w{flex-basis:264px}
}

/* ═════ текст с оформлением ═════ */
.pf-md{padding:clamp(18px,2.6vw,32px);max-width:820px;font-size:15.5px;line-height:1.65}
.pf-md.cols{max-width:1240px;columns:2 340px;column-gap:clamp(24px,3vw,48px);column-rule:1px solid var(--pf-line)}
.pf-md > :first-child{margin-top:0}
.pf-md p,.pf-md ul,.pf-md ol,.pf-md blockquote{margin:0 0 .85em}
.pf-md h3,.pf-md h4{font-family:var(--font,inherit);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;
  line-height:1;margin:1.1em 0 .5em;break-after:avoid}
.pf-md h3{font-size:clamp(22px,2.2vw,30px)}
.pf-md h4{font-size:18px}
.pf-md h5{font:600 11px/1.3 var(--pf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-dim);margin:1.2em 0 .5em}
.pf-md strong{font-weight:700}
.pf-md ul,.pf-md ol{list-style:none;padding:0}
.pf-md li{position:relative;padding-inline-start:26px;margin:0 0 .35em}
.pf-md ul > li::before{content:"";position:absolute;inset-inline-start:4px;top:.72em;width:7px;height:1px;background:var(--accent)}
.pf-md ol{counter-reset:pfo}
.pf-md ol > li{counter-increment:pfo}
.pf-md ol > li::before{content:counter(pfo,decimal-leading-zero);position:absolute;inset-inline-start:0;top:.3em;
  font:600 10.5px/1.2 var(--pf-mono);color:var(--accent)}
.pf-md blockquote{padding:2px 0 2px 16px;border-inline-start:2px solid var(--accent);font-size:1.08em;opacity:.92}
[dir=rtl] .pf-md blockquote{padding:2px 16px 2px 0}
.pf-md hr{border:0;border-top:1px solid var(--pf-line);margin:1.2em 0}
.pf-plain p{margin:0 0 .85em}

/* ═════ текст песни ═════
   Шапка как у проигрывателя, ниже строки караоке крупно и слева. */
.pf-ly{max-width:1120px;padding:clamp(16px,2.2vw,26px)}
.pf-lyh{display:flex;align-items:center;gap:14px;min-width:0}
.pf-play{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--pf-r);cursor:pointer;
  border:1px solid var(--pf-line2);background:none;color:var(--pf-ink);transition:border-color .2s,background .2s,color .2s}
.pf-play:hover,.pf-play:focus-visible{border-color:var(--accent);outline:none}
.pf-play.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#141311)}
.pf-play svg{width:18px;height:18px}
.pf-play .i-pause,.pf-play.on .i-play{display:none}
.pf-play.on .i-pause{display:block}
.pf-lyt{display:grid;min-width:0;flex:1;gap:3px}
.pf-lyt b{font-size:17px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-lyt i{font:500 10.5px/1.2 var(--pf-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--pf-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-lytime{flex:none;font:500 11px/1 var(--pf-mono);color:var(--pf-dim);font-variant-numeric:tabular-nums}
.pf-lybar{height:1px;margin:14px 0 4px;background:var(--pf-line)}
.pf-lybar i{display:block;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
[dir=rtl] .pf-lybar i{transform-origin:right}
/* строки караоке: крупнее и с переносом, выравнивание по краю */
.lyr.pf-lyr{margin-top:clamp(16px,3vh,30px);text-align:start;justify-items:start;min-height:clamp(210px,34vh,300px);gap:6px}
.lyr.pf-lyr i,.lyr.pf-lyr b{white-space:normal;overflow:visible;max-width:34ch}
.lyr.pf-lyr i,.lyr.pf-lyr.fx-scroll i{font-size:clamp(15px,1.5vw,20px);font-weight:500;opacity:.4;filter:none}
.lyr.pf-lyr .lp2,.lyr.pf-lyr .ln2,.lyr.pf-lyr.fx-scroll .lp2,.lyr.pf-lyr.fx-scroll .ln2{font-size:clamp(14px,1.3vw,18px);opacity:.2}
.lyr.pf-lyr b{font-family:var(--font,inherit);font-size:clamp(24px,3.4vw,46px);font-weight:800;line-height:1.05;
  letter-spacing:-.02em;min-height:1.05em}
.lyr.pf-lyr.n5 .lp2,.lyr.pf-lyr.n5 .ln2{display:block}
/* пока строк нет, место не пустует: подпись вместо текста */
.pf-lywait{margin:clamp(16px,3vh,30px) 0 0;font:500 11px/1.4 var(--pf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pf-dim);
  min-height:clamp(170px,30vh,260px)}
.pf-ly:has(.lyr:not([hidden])) .pf-lywait{display:none}
.pf-ly.ext .pf-lyh{padding-bottom:12px;border-bottom:1px solid var(--pf-line)}

/* ═════ прежние виды разделов на экране ═════
   Только section.pfs, то есть сами экраны. Первый экран (div.pf-hero) тоже
   помечен .pfs, и правило без section цепляло разделы, поставленные внутрь
   карточки: они получали рамку, отступы и размытие подложки, карточка
   вытягивалась, а в карточке с наклоном размытие гасило всё, что ниже. 
   Рамку и подложку им даёт общее правило выше; здесь только размеры,
   чтобы раздел не сжимался в узкую колонку посреди экрана. */
.stage.pf section.pfs .blk{text-align:start;padding:clamp(16px,2.2vw,24px);max-width:1120px}
.stage.pf section.pfs .blk-cards .bgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.stage.pf section.pfs .bcard{border-radius:4px;border-color:var(--pf-line);background:none}
.stage.pf section.pfs .btags i{border-radius:3px}
.stage.pf section.pfs .bgo{border-radius:4px}
.stage.pf section.pfs .blk-banner{min-height:clamp(240px,48vh,520px);max-width:none;background-size:cover}
.stage.pf section.pfs .blk-banner .bh{font-family:var(--font,inherit);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,4vw,60px);line-height:.92;letter-spacing:-.02em}
.stage.pf section.pfs .blk-dsv{max-width:640px}
.stage.pf section.pfs .blk-text p{font-size:15.5px}

/* ═════ длинная страница ═════
   Новые виды в обычной колонке под карточкой: те же части, мельче. */
.blk-pf .pf-about,.blk-pf .pf-md,.blk-pf .pf-sk,.blk-pf .pf-ly,.blk-pf .pf-pj{background:none;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.blk-pf .pf-about{grid-template-columns:1fr}
.blk-pf .pf-lead{padding:0 0 12px;font-size:15px}
.blk-pf .pf-ics{border:0;border-top:1px solid var(--pf-line)}
.blk-pf .pf-about.nolead .pf-ics{border-top:0}
.blk-pf .pf-ic{padding:12px 0}
.blk-pf .pf-proj,.blk-pf .pf-proj.n2,.blk-pf .pf-proj.n4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.blk-pf .pf-proj.n1{grid-template-columns:1fr}
.blk-pf .pf-proj.n1 .pf-pj{flex-direction:column}
.blk-pf .pf-proj.n1 .pf-cv{flex:none;border-inline-end:0;border-bottom:1px solid var(--pf-line)}
.blk-pf .pf-pj{border:1px solid var(--pf-line);border-radius:var(--pf-r)}
.blk-pf .pf-pjm b{font-size:14px}
.blk-pf .pf-skg{grid-template-columns:1fr}
.blk-pf .pf-skg > .pf-ml{padding:10px 0 8px}
.blk-pf .pf-skg ul{border-inline-start:0;border-top:1px solid var(--pf-line)}
.blk-pf .pf-skg li{flex-basis:132px;padding:9px 10px;font-size:13px}
.blk-pf .pf-md{padding:0;font-size:14px}
.blk-pf .pf-md.cols{columns:auto}
.blk-pf .pf-ly{padding:0}
.blk-pf .lyr.pf-lyr{min-height:170px}
.blk-pf .lyr.pf-lyr b{font-size:22px}
.blk-pf .lyr.pf-lyr i{font-size:14px}
.blk-pf .pf-lywait{min-height:120px}
@media (max-width:420px){.blk-pf .pf-proj,.blk-pf .pf-proj.n2,.blk-pf .pf-proj.n4{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .pf-js .stage.pf section.pfs .pf-in{transition:none}
  .pf-js .stage.pf section.pfs:not(.pf-seen) .pf-in,
  .pf-js .stage.pf.pf-seq section.pfs:not(.pf-seen) :is(.pf-h,.pf-g > *,.pf-proj > *,.pf-ics > *,.pf-sk > *){opacity:1;transform:none}
  .pf-cv img{transition:none}
}

/* На телефоне без размытия под панелями: браузер пересчитывает его на
   каждом кадре прокрутки, и именно это делало листание тяжёлым. Панели
   зато плотнее, чтобы текст поверх фона читался так же. */
@media (hover:none),(pointer:coarse){
  .pf-about,.pf-md,.pf-sk,.pf-ly,.pf-pj,.stage.pf section.pfs .blk,.pf-nav span{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:color-mix(in srgb,var(--bg,#0a0a0e) calc(max(var(--card,.55),.72) * 100%),transparent)}
}