/* =====================================================================
   Waykeeper · site-v2.css · слой вёрстки v2 «Атлас на бумаге» (26.10.2026)
   Подключается СРАЗУ ПОСЛЕ assets/site.css (до стилей страницы):
     <link rel="stylesheet" href="assets/site-v2.css">
     <script src="assets/site-v2.js" defer></script>   (после site.js)
   Бриф: ../design-brief-v4.md. Образец всех компонентов: _template.html.
   Что здесь:
     0. Токены v2 (поля во всю ширину, размер «дисплей», тёплые чернила)
     1. Каркас во всю ширину: .frame, .cols и пролёты .s-* / .at-*
     2. Типографика: .display, .lede, .lede-em, .label, .num
     3. Первый экран во всю ширину: .cover
     4. Полосы: .band, .band--split, .band--offset
     5. Вид во всю ширину с подписью: .view (+ --print, --framed, --inset)
     6. Сетка карточек: .tiles > .tile--kb / .tile--product
     7. Список-указатель: .index
     8. Статусы: .status--open / --wip / --wait
     9. Материал: бумага, [data-topo], .graticule, .ruler, .rose, .nodes
    10. Шапка v2 и окошко «База знаний»
    11. Подвал v2
    12. Движение: .rise, параллакс видов, меньше движения
    13. Цитата-отзыв .testimony, галерея .artifacts > .artifact, витрина проекта .showcase
    14. Картинки: светлые, общая обработка (assets/img/pd/processed, role structure/living)
    15. Svg-ауры практик (assets/ill/) спрятаны со всего сайта
   Старые классы site.css (.wrap, .sec, .cards, .folds, .rows…) работают как раньше.
   ===================================================================== */

/* ---------- 0. Токены v2 ---------- */
:root{
  /* Палитра и атмосфера — как в site-v1 (бриф v3): страница #FCFDFF, дымка #EEF3FA, текст #0F1722 и его
     прозрачности, огонёк #EA5F22. Цвета задаёт site.css, здесь они НЕ переопределяются (решение Саши 26.10:
     «старый сайт был норм»). Старина живёт только внутри картинок. */
  --paper-2:rgba(255,255,255,.62);  /* подложка вида и карточек: стекло v3 */

  /* поля во всю ширину */
  --frame-max:1680px;               /* дальше этой ширины страница не растягивается, поля растут */
  --edge:clamp(20px, 4.4vw, 72px);  /* поле от края окна до текста */
  --col-gap:clamp(16px, 2vw, 32px); /* промежуток между 12 колонками */

  /* шестой размер — только для первого экрана и подвала */
  --s0:var(--s1);                   /* дисплей = H1 (типографика v1: пять размеров, решение Саши 26.10) */
  --s-mark:var(--s1);               /* слово Waykeeper в подвале — размер H1, не больше */

  --r-plate:var(--r-m);             /* скругление видов и листов — как у фото v1 */
}
@media (max-width:760px){
  :root{ --edge:20px; }
}


/* ---------- 1. Каркас во всю ширину ---------- */
/* .frame — ряд во всю ширину окна с полями --edge; на очень широких экранах поля растут */
.frame{width:100%; padding-left:max(var(--edge), (100% - var(--frame-max)) / 2); padding-right:max(var(--edge), (100% - var(--frame-max)) / 2)}
/* .cols — 12 колонок; детям ставим пролёт .s-N (сколько колонок) и начало .at-N (с какой колонки) */
.cols{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:var(--sp-6)}
.cols > *{grid-column:1 / -1; min-width:0}
.s-3{grid-column-end:span 3} .s-4{grid-column-end:span 4} .s-5{grid-column-end:span 5} .s-6{grid-column-end:span 6}
.s-7{grid-column-end:span 7} .s-8{grid-column-end:span 8} .s-9{grid-column-end:span 9} .s-12{grid-column:1 / -1}
.cols > [class*="s-"]{grid-column-start:auto}
.at-1{grid-column-start:1 !important} .at-2{grid-column-start:2 !important} .at-3{grid-column-start:3 !important} .at-4{grid-column-start:4 !important}
.at-5{grid-column-start:5 !important} .at-6{grid-column-start:6 !important} .at-7{grid-column-start:7 !important} .at-8{grid-column-start:8 !important} .at-9{grid-column-start:9 !important}
@media (max-width:1024px){
  .cols > .s-3{grid-column-end:span 6} .cols > .s-4,.cols > .s-5{grid-column-end:span 6}
  .cols > .s-7,.cols > .s-8,.cols > .s-9{grid-column:1 / -1}
  .cols > [class*="at-"]{grid-column-start:auto !important}
}
@media (max-width:760px){
  .cols{row-gap:var(--sp-5)}
  .cols > *,.cols > [class*="at-"]{grid-column:1 / -1 !important}
}
/* .wrap--wide — старый .wrap, но во всю ширину (для страниц, которые переводим постепенно) */
.wrap.wrap--wide{max-width:none; padding-left:max(var(--edge), (100% - var(--frame-max)) / 2); padding-right:max(var(--edge), (100% - var(--frame-max)) / 2)}

/* ---------- 2. Типографика ---------- */
/* Дисплей: крупное имя раздела. Курсив внутри — <em>. Строки с проявлением — <span class="ln"><span>…</span></span> */
.display{font:300 var(--s1)/1.04 var(--f-head); letter-spacing:-.015em; color:var(--ink); margin:0; text-wrap:balance}
.display em{font-style:italic; font-weight:300}
.display .ln{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.display .ln > span{display:inline-block}
/* лид: обычный текст размера 3; курсивная строка рядом — Spectral курсив */
.lede{font:400 var(--s3)/1.5 var(--f-text); color:var(--ink-2); max-width:34em; margin:0}
.lede-em{font:300 italic var(--s3)/1.4 var(--f-head); color:var(--ink); max-width:26em; margin:0}
/* тихая подпись группы (подвал, окошко «База знаний»): без капители и разрядки — правило v1 */
.label{display:inline-block; font:500 var(--s5)/1.3 var(--f-text); color:var(--ink-3)}
/* номер: ровные цифры одной ширины (оглавление, карточки) */
.num{font:400 var(--s5)/1 var(--f-text); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 3. Первый экран во всю ширину: .cover ---------- */
/* Высота и воздух — как у .hero v1 (--hero-top, --hero-min, --hero-bottom): H1 на всех страницах на одной высоте,
   текст стоит сверху, не по центру. Слева H1 (--s1) и лид (--s3), справа картина или поле;
   внизу тихая строка ссылок вниз по странице (без делений и координат — решение Саши 26.10). */
.cover{position:relative; isolation:isolate; min-height:var(--hero-min); display:flex; flex-direction:column; padding-top:var(--hero-top)}
.cover > .frame{flex:1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap);
  grid-template-rows:auto 1fr auto; grid-template-areas:none}
.cover-title{grid-column:1 / span 6; grid-row:1; align-self:start; position:relative; z-index:2}
.cover-text{grid-column:1 / span 5; grid-row:2; align-self:start; padding:var(--sp-5) 0 var(--hero-bottom); position:relative; z-index:2}
.cover-text > * + *{margin-top:var(--sp-5)}
.cover-aside{grid-column:7 / -1; grid-row:1 / span 2; position:relative; min-height:380px; align-self:stretch}
.cover-foot{grid-column:1 / -1; grid-row:3; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-3) var(--sp-6);
  padding:var(--sp-3) 0 var(--sp-4); position:relative}
.cover-foot::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line)}
.cover-links{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6)}
.cover-links a{position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; font:400 var(--s4)/1.3 var(--f-text)}
.cover-links a::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--line-2); transform-origin:0 50%; transition:transform .5s var(--ease), background .2s}
.cover-links a:hover::after{background:var(--ink)}
.cover-meta{display:flex; gap:var(--sp-5); flex-wrap:wrap; color:var(--ink-3); font-size:var(--s5); font-variant-numeric:tabular-nums}
/* только текст, без вида справа */
.cover--text .cover-title{grid-column:1 / span 8}
.cover--text .cover-text{grid-column:1 / span 6}
@media (max-width:1024px){
  .cover-title{grid-column:1 / -1}
  .cover-text{grid-column:1 / span 8; align-self:start; padding-top:var(--sp-5); padding-bottom:var(--sp-7)}
  .cover-aside{grid-column:1 / -1; grid-row:3; min-height:340px; margin-top:0}
  .cover-foot{grid-row:4}
  .cover > .frame{grid-template-rows:auto auto auto auto}
}
@media (max-width:760px){
  .cover{min-height:0; padding-top:var(--hero-top)}
  .cover > .frame{display:block}
  .cover-text{padding:var(--sp-4) 0 var(--sp-6)}
  .cover-text > * + *{margin-top:var(--sp-4)}
  .cover-aside{min-height:280px; margin:0 calc(var(--edge) * -1) var(--sp-4)}
  .cover-aside .view-cap{padding-left:var(--edge); padding-right:var(--edge)}
  .cover-foot{justify-content:flex-start}
}

/* ---------- 4. Полосы во всю ширину: .band ---------- */
/* .band — секция v2 (воздух сверху как у .sec). Внутри — .frame.cols или готовые раскладки ниже. */
.band{position:relative; padding-top:var(--section)}
.band:last-child{padding-bottom:var(--section)}
/* линия между полосами (data-atmo-rule, рисует atmo.js по верху секции) — посередине воздуха, а не впритык к тексту выше (финальная проверка 26.10) */
.band[data-atmo-rule]{margin-top:calc(var(--section) * .5); padding-top:calc(var(--section) * .5)}
.band-head{margin-bottom:var(--head-gap)}
.band-head > h2 + *{margin-top:var(--sp-3)}
.band-head .sub{color:var(--ink-3); max-width:40em}
/* «заголовок слева — текст справа», асимметрично: H2 в колонках 1–4 (прилипает), текст в 6–11 */
.band--split > .frame{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:start}
.band--split .band-side{grid-column:1 / span 4; position:sticky; top:calc(var(--head-h) + var(--sp-5))}
.band--split .band-side h2{max-width:9em}
.band--split .band-side > * + *{margin-top:var(--sp-4)}
.band--split .band-main{grid-column:6 / span 6}
.band--split .band-main > .prose,.band--split .band-main > p{max-width:var(--measure)}
.band--split .band-main.is-wide{grid-column:6 / -1}
/* текст со сдвигом: колонка чтения начинается с 4-й колонки, слева воздух (как в журнале) */
.band--offset .band-main{margin-left:calc((100% + var(--col-gap)) / 12 * 3); max-width:var(--measure)}
.band--offset .band-main.is-wide{max-width:none}
@media (max-width:1024px){
  .band--split .band-side{grid-column:1 / span 4}
  .band--split .band-main,.band--split .band-main.is-wide{grid-column:5 / -1}
  .band--offset .band-main{margin-left:calc((100% + var(--col-gap)) / 12 * 2)}
}
@media (max-width:760px){
  .band--split > .frame{display:block}
  .band--split .band-side{position:static; margin-bottom:var(--h2-gap)}
  .band--offset .band-main{margin-left:0}
}

/* ---------- 5. Вид во всю ширину с подписью: .view ---------- */
/* <figure class="view"><div class="view-img"><img …></div><figcaption class="view-cap">
     <span class="view-n">Лист I</span><span class="view-t"><em>Название</em>, год</span><span class="view-src">Автор · собрание</span>
   </figcaption></figure>
   Картинка от края до края окна; подпись — как этикетка в музее или легенда на карте. */
.view{position:relative; margin:0; isolation:isolate}
.view-img{position:relative; height:var(--view-h, clamp(320px, 64vh, 760px)); overflow:hidden; background:var(--paper-2)}
.view-img img{position:absolute; left:0; top:-6%; width:100%; height:112%; max-width:none; object-fit:cover; object-position:var(--view-at, 50% 50%); will-change:transform}
.view-cap{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,4fr); column-gap:var(--col-gap); align-items:baseline;
  padding:var(--sp-3) max(var(--edge), (100% - var(--frame-max)) / 2) 0; font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.view-n{display:none}   /* «Лист I/II» убраны (решение Саши 26.10) */
.view-t{font:400 var(--s4)/1.4 var(--f-text); color:var(--ink-2)}
.view-t em{font:300 italic var(--s3)/1.2 var(--f-head); color:var(--ink)}
.view-src{text-align:right}
/* офорт, гравюра, старая карта: бумага листа растворяется в бумаге сайта, остаётся только штрих */
.view--print .view-img{background:transparent}
.view--print .view-img img{mix-blend-mode:multiply}
/* края листа тают в страницу сверху и снизу (для печатных листов без рамки) */
.view--fade .view-img{-webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent)}
/* вид в колонках страницы с тонкой линией по краю (без стилизации под старую карту) */
.view--framed .view-img{margin:0 max(var(--edge), (100% - var(--frame-max)) / 2); border:1px solid var(--line); border-radius:var(--r-m)}
/* вид не во всю ширину, а в колонках сетки (внутри .frame/.cols или .band-main) */
.view--inset .view-img{border-radius:var(--r-m)}
.view--inset .view-cap{padding-left:0; padding-right:0; grid-template-columns:auto minmax(0,1fr); column-gap:var(--sp-4)}
.view--inset .view-src{grid-column:2; text-align:left}
@media (max-width:760px){
  .view-img{height:var(--view-h-m, 300px)}
  .view-cap{grid-template-columns:1fr; row-gap:2px}
  .view-src{text-align:left}
}

/* ---------- 6. Сетка карточек разного размера: .tiles ---------- */
/* .tiles — 12 колонок. Два вида карточек:
   .tile--kb       база знаний: напечатана на странице, без коробки — линия сверху, номер, статус, название, две строки «Внутри / Когда сюда», ссылка.
   .tile--product  работа со мной: вещь, которая лежит на бумаге — лист с узлами по углам, вид сверху, крупное название, единственная чёрная кнопка.
   Ширина: .tile--kb = 3 колонки (4 в ряд), .tile--product = 6 колонок (2 в ряд); .tile--wide — вдвое шире. */
.tiles{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--sp-7) var(--col-gap)}
.tile{position:relative; grid-column:span 3; min-width:0; color:var(--ink)}
.tile--wide{grid-column:span 6}
.tile--product{grid-column:span 6}
.tile--product.tile--wide{grid-column:1 / -1}
/* база знаний */
.tile--kb{display:flex; flex-direction:column; padding-top:var(--sp-4); border-top:1px solid var(--line-2)}
.tile--kb::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.tile--kb:hover::before,.tile--kb:focus-within::before{transform:scaleX(1)}
.tile-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); min-height:24px}
.tile-title{font:400 var(--s3)/1.25 var(--f-head); margin:var(--sp-5) 0 0}
.tile p{color:var(--ink-2); margin-top:var(--sp-3)}
.tile .run{font-weight:500; color:var(--ink)}
.tile-go{margin-top:auto; padding-top:var(--sp-5)}
/* вся карточка — ссылка: <a class="tile tile--kb" href="…"> */
a.tile{text-decoration:none}
a.tile:hover .tile-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--line-2)}
/* продукт */
.tile--product{display:flex; flex-direction:column; overflow:hidden; background:var(--glass); border:1px solid rgba(15,23,34,.08); border-radius:var(--r-l);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,34,.03), 0 16px 36px -28px rgba(15,23,34,.18)}
.tile--product .tile-view{position:relative; margin:0; height:clamp(220px, 26vw, 360px); overflow:hidden; border-bottom:1px solid var(--line)}
.tile--product .tile-view img{width:100%; height:100%; object-fit:cover}
.tile--product .tile-body{display:flex; flex-direction:column; flex:1; padding:var(--sp-6) var(--sp-7) var(--sp-7)}
.tile--product .tile-title{font:300 var(--s2)/1.12 var(--f-head); margin-top:var(--sp-4)}
.tile--product p{max-width:var(--measure)}
.tile--product .actions{margin-top:auto; padding-top:var(--sp-6)}
/* .nodes — узлы по углам. По решению Саши (26.10) не рисуются: это стилизация под старую карту. Класс оставлен, чтобы разметка не ломалась. */
.nodes{position:relative}
@media (max-width:1024px){
  .tile{grid-column:span 6}
  .tile--product{grid-column:1 / -1}
}
@media (max-width:760px){
  .tiles{gap:var(--sp-6)}
  .tile,.tile--wide{grid-column:1 / -1}
  .tile--product .tile-body{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
}

/* ---------- 7. Список-указатель: .index ---------- */
/* Строки ситуаций как оглавление атласа: номер · строка · (куда) · стрелка.
   <ol class="index"><li><a class="index-row" href="…"><span class="index-t">…</span><span class="index-m">…</span></a></li></ol>
   Номера ставятся сами (.index--numbered); стрелку рисует CSS. При наведении — тёплая точка «ты здесь» слева. */
.index{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); counter-reset:ix}
.index > li{counter-increment:ix; border-bottom:1px solid var(--line)}
.index-row{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto 28px; align-items:baseline; column-gap:var(--sp-5);
  min-height:44px; padding:20px 0 20px 0; color:var(--ink); text-decoration:none; transition:padding .45s var(--ease)}
.index--numbered .index-row{grid-template-columns:56px minmax(0,1fr) auto 28px}
.index--numbered .index-row::before{content:counter(ix, decimal-leading-zero); font:400 var(--s5)/1 var(--f-text); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-3)}
.index-t{font:300 var(--s3)/1.35 var(--f-head); color:var(--ink); text-wrap:pretty}
.index-m{font-size:var(--s5); line-height:1.45; color:var(--ink-3); white-space:nowrap}
.index-row::after{content:"→"; justify-self:end; color:var(--ink-3); font:400 var(--s4)/1 var(--f-text); transition:transform .4s var(--ease), color .2s}
.index-row:hover,.index-row:focus-visible{padding-left:18px}
.index-row:hover::after,.index-row:focus-visible::after{transform:translateX(5px); color:var(--ink)}
.index-row > .index-dot{position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .3s, transform .45s var(--ease)}
.index-row:hover > .index-dot,.index-row:focus-visible > .index-dot{opacity:1; transform:none}
.index-row:focus-visible{outline-offset:-2px}
@media (max-width:760px){
  .index-row,.index--numbered .index-row{grid-template-columns:minmax(0,1fr) 24px; padding:16px 0}
  .index--numbered .index-row::before{display:none}
  .index-m{grid-column:1; grid-row:2; white-space:normal}
  .index-row::after{grid-column:2; grid-row:1}
}

/* ---------- 8. Статусы: ● открыто · ○ в работе · ◌ лист ожидания ---------- */
/* <span class="status status--open">открыто</span>. Знак рисует CSS (одинаково во всех шрифтах),
   слово остаётся текстом. Знак без слова — <span class="status status--wip"><span class="visually-hidden">в работе</span></span>. */
.status{display:inline-flex; align-items:center; gap:8px; font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-3); white-space:nowrap}
.status::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; box-sizing:border-box}
.status--open::before{background:var(--ink)}
.status--wip::before{border:1px solid var(--ink-2)}
.status--wait::before{width:9px; height:9px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Ccircle cx='4.5' cy='4.5' r='3.9' fill='none' stroke='%230F1722' stroke-opacity='.75' stroke-dasharray='1.5 1.6'/%3E%3C/svg%3E") center/9px 9px no-repeat}
.status-legend{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); list-style:none; margin:0; padding:0}

/* ---------- 9. Материал: бумага, рельеф, сетка координат, деления, роза ветров ---------- */
/* Бумага-волокно: по решению Саши (26.10) выключена — зерно даёт атмосфера, как в v1. Включить: <body data-paper>. */
.paper-layer{position:fixed; inset:0; z-index:-2; pointer-events:none; background-repeat:repeat; opacity:.9}
/* Рельеф: едва заметные холодные горизонтали (в духе v1: фон-местность, не рисунок). <section data-topo> или data-topo="seed".
   Фон = местность, не знак: без подписей. Слой рисует site-v2.js один раз (и при смене размера). */
[data-topo]{position:relative; isolation:isolate}
.topo-layer{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%); mask-image:radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%)}
.topo-layer canvas{display:block; width:100%; height:100%}
[data-topo-at="left"] .topo-layer{-webkit-mask-image:radial-gradient(110% 90% at 15% 50%, #000 25%, transparent 75%); mask-image:radial-gradient(110% 90% at 15% 50%, #000 25%, transparent 75%)}
/* Сетка координат: тонкие меридианы и параллели; подписи — только настоящие (Амстердам, «где я»). */
.graticule{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--grat, 160px)),
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px var(--grat, 160px));
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); mask-image:linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent)}
.graticule > span{position:absolute; font:400 var(--s5)/1 var(--f-text); font-variant-numeric:tabular-nums; color:var(--ink-3); padding:4px 6px}
/* Разделитель: <div class="ruler" aria-hidden="true"></div> */
/* По решению Саши (26.10) деления убраны: это стилизация под старую карту. Класс остался — теперь одна ровная линия. */
.ruler{height:1px; margin:0; background:var(--line)}
/* Роза ветров: по решению Саши (26.10) НЕ ставим — стилизация под старину. Класс оставлен, чтобы ничего не сломать. */
.rose{display:block; width:var(--rose, 96px); height:var(--rose, 96px); color:var(--ink); opacity:.78}
.rose .rose-needle{transform-origin:50% 50%; transform:rotate(var(--rose-turn, 0deg)); transition:transform 1.2s var(--ease)}
.rose text{font:400 var(--s5) var(--f-text); fill:currentColor}

/* ---------- 10. Шапка v2 и окошко «База знаний» ---------- */
.site-head .head-row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); padding-top:16px; padding-bottom:16px}
.site-head.is-glass .head-row{padding-top:8px; padding-bottom:8px}
@media (max-width:980px){ .site-head .head-row,.site-head.is-glass .head-row{padding-top:12px; padding-bottom:12px} }
@media (min-width:981px){ .site-nav > ul{align-items:center} }
/* пункт «База знаний» */
.kb{position:relative}
.kb-btn{position:relative; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 0; border:0; background:none; cursor:pointer;
  font:400 var(--s4)/1.2 var(--f-text); color:var(--ink-2)}
.kb-btn:hover,.kb-btn[aria-expanded="true"]{color:var(--ink)}
.kb-caret{width:6px; height:6px; margin-top:-3px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease), margin .3s var(--ease)}
.kb-btn[aria-expanded="true"] .kb-caret{transform:rotate(225deg); margin-top:3px}
.kb-btn.is-current{color:var(--ink)}
.kb-btn.is-current::after{content:""; position:absolute; left:0; right:13px; bottom:9px; height:1.5px; border-radius:2px; background:var(--accent)}
/* само окошко: маленький лист-карта с узлами по углам */
.kb-pop{position:absolute; z-index:60; top:calc(100% + 6px); left:-28px; width:min(480px, calc(100vw - 32px)); padding:18px 10px 10px;
  background:rgba(252,253,255,.97); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(15,23,34,.08); border-radius:var(--r-l);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -30px rgba(15,23,34,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.985); transform-origin:28px 0;
  transition:opacity .2s, transform .35s var(--ease), visibility 0s .35s}
.kb.is-open .kb-pop{opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .35s var(--ease)}
/* мостик над щелью между пунктом и окошком, чтобы окно не закрывалось, пока ведёшь мышь */
.kb-pop::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.kb-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:0 14px 12px; margin:0 0 4px; border-bottom:1px solid var(--line)}
.kb-note{font-size:var(--s5); color:var(--ink-3)}
.site-nav .kb-list{display:block; list-style:none; margin:0; padding:0}
.site-nav .kb-list > li + li{border-top:0}
.site-nav a.kb-item{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-4); row-gap:2px; align-items:baseline;
  padding:12px 14px 12px 26px; border-radius:var(--r-s); color:var(--ink); text-decoration:none; transition:background .2s}
.site-nav a.kb-item:hover,.site-nav a.kb-item:focus-visible{background:rgba(15,23,34,.04)}
.site-nav a.kb-item::before{content:""; position:absolute; left:11px; top:21px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .25s, transform .35s var(--ease)}
.site-nav a.kb-item:hover::before,.site-nav a.kb-item:focus-visible::before,.site-nav a.kb-item[aria-current="page"]::before{opacity:1; transform:none}
.site-nav a.kb-item[aria-current="page"]::after{content:none}
.kb-t{font:400 var(--s3)/1.25 var(--f-head)}
.kb-d{grid-column:1; font-family:var(--f-text); font-size:var(--s5); line-height:1.4; color:var(--ink-3)}
.kb-item .status{grid-column:2; grid-row:1}
/* узлы по углам окошка */
@media (max-width:980px){
  /* в листе меню окошко всегда раскрыто: заголовок группы и четыре строки */
  .kb-btn{display:none}
  .kb-pop{position:static; width:auto; padding:6px 0 10px; margin:0; opacity:1; visibility:visible; transform:none; background:none; border:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none}
  .kb-pop::before{content:none}
  .kb-head{padding:10px 0 8px}
  .site-nav a.kb-item{padding:10px 0 10px 18px; border-radius:0}
  .site-nav a.kb-item::before{left:2px; top:19px}
  .site-nav{max-height:calc(100svh - 20px); overflow:auto}
}

/* ---------- 11. Подвал v2 ---------- */
.site-foot--v2{padding:0 0 var(--sp-5); border-top:0}
.site-foot--v2 .ruler{margin-bottom:var(--sp-8)}
.foot-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); row-gap:var(--sp-7)}
.foot-care-col{grid-column:1 / span 4}
.site-foot--v2 .foot-care{max-width:30em}
.site-foot--v2 .foot-bounds{max-width:30em}
.foot-doors{grid-column:6 / -1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.15fr); column-gap:var(--col-gap); row-gap:var(--sp-6)}
.foot-group .label{margin-bottom:var(--sp-3)}
.foot-group ul{list-style:none; margin:0; padding:0}
.foot-group li{display:flex; align-items:center; flex-wrap:wrap; gap:0 10px}
.foot-group li + li{margin-top:2px}
.site-foot--v2 .foot-group a{display:inline-block; padding:8px 0; color:var(--ink); font-size:var(--s4)}
.site-foot--v2 .foot-group a::before{content:none}
.site-foot--v2 .foot-group a{min-height:44px; display:inline-flex; align-items:center}
.foot-base{margin-top:var(--sp-8)}
.foot-mark{display:block; font:300 var(--s-mark)/1.04 var(--f-head); letter-spacing:-.015em; color:var(--ink); text-decoration:none; margin-left:-.04em; white-space:nowrap; overflow:hidden}
.site-foot--v2 a.foot-mark{color:var(--ink)}
.site-foot--v2 a.foot-mark:hover{text-decoration:none; color:var(--ink-2)}
.site-foot--v2 a.foot-mark::before{content:none}
.foot-line{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-6); margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line)}
.site-foot--v2 .foot-sign{margin-top:0}
@media (max-width:1024px){
  .foot-care-col{grid-column:1 / -1}
  .foot-doors{grid-column:1 / -1}
}
@media (max-width:760px){
  .foot-doors{grid-template-columns:1fr 1fr}
  .site-foot--v2 .ruler{margin-bottom:var(--sp-7)}
}

/* ---------- 13. Цитата-отзыв, галерея артефактов, витрина проекта (решения Саши 26.10) ---------- */
/* Цитата-отзыв: слова участника крупным курсивом, подпись — кто и когда. Без фото и звёздочек.
   <figure class="testimony"><blockquote><p>…</p></blockquote><figcaption><span class="testimony-who">Первый участник «Перехода»</span><span class="testimony-when">неделя 5 из 12</span></figcaption></figure>
   .testimony--side — рядом артефакт (скриншот, лист): второй ребёнок <figure class="artifact">. */
.testimony{position:relative; margin:0; padding-top:var(--sp-5); border-top:1px solid var(--line-2); max-width:44rem}
.testimony blockquote{margin:0}
.testimony blockquote p{font:300 italic var(--s2)/1.24 var(--f-head); color:var(--ink); text-wrap:pretty; margin:0}
.testimony blockquote p + p{margin-top:.6em}
.testimony blockquote p:first-child::before{content:"«"} .testimony blockquote p:last-child::after{content:"»"}
.testimony figcaption{display:flex; flex-wrap:wrap; gap:4px var(--sp-4); margin-top:var(--sp-4); font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.testimony-who{color:var(--ink-2); font-weight:500}
.testimony--side{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto 1fr; column-gap:var(--sp-8); align-items:start; max-width:none}
.testimony--side > .artifact{grid-row:1 / span 2; grid-column:2}
.testimony--small blockquote p{font-size:var(--s3); line-height:1.4}
/* несколько отзывов подряд — в сетку */
.testimonies{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-8) var(--col-gap)}
@media (max-width:1024px){ .testimony--side{grid-template-columns:1fr; row-gap:var(--sp-5)} .testimony--side > .artifact{grid-row:auto; grid-column:1} }
@media (max-width:760px){ .testimonies{grid-template-columns:1fr; gap:var(--sp-7)} }

/* Артефакт: скриншот, страница тетради, карта паттернов — отпечаток на бумаге с подписью «рис. N».
   <figure class="artifact"><div class="artifact-img"><img …></div><figcaption>Компас: ценности из поступков</figcaption></figure>
   Номер «рис. N» ставится сам внутри .artifacts. --artifact-ratio — пропорция окна (по умолчанию 4/3). */
.artifact{margin:0; min-width:0}
.artifact-img{position:relative; aspect-ratio:var(--artifact-ratio, 4/3); overflow:hidden; background:#fff; border:1px solid rgba(15,23,34,.08); border-radius:var(--r-s);
  box-shadow:0 1px 2px rgba(15,23,34,.03), 0 16px 36px -26px rgba(15,23,34,.22)}
.artifact-img img{width:100%; height:100%; object-fit:cover; object-position:var(--artifact-at, 50% 0%)}
.artifact figcaption{display:flex; gap:var(--sp-3); align-items:baseline; margin-top:var(--sp-3); font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
/* Галерея артефактов: лента во всю ширину с прокруткой вбок (на телефоне — пальцем), или сетка.
   <ul class="artifacts"><li><figure class="artifact">…</figure></li>…</ul>; .artifacts--grid — сетка 3/2/1 */
.artifacts{list-style:none; margin:0; padding:0 0 var(--sp-4); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 30%); gap:var(--col-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; counter-reset:fig; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.artifacts > li{scroll-snap-align:start; counter-increment:fig}
.artifacts .artifact figcaption::before{content:counter(fig, decimal-leading-zero); flex:none; font:500 var(--s5)/1.45 var(--f-text); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.artifacts:focus-visible{outline-offset:6px}
.artifacts--grid{grid-auto-flow:row; grid-template-columns:repeat(3, minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; row-gap:var(--sp-7)}
/* лента, которая выходит за поле справа до края окна (внутри .frame) */
.artifacts--bleed{margin-right:calc(max(var(--edge), (100vw - var(--frame-max)) / 2) * -1); padding-right:var(--edge)}
@media (max-width:1024px){ .artifacts{grid-auto-columns:minmax(240px, 44%)} .artifacts--grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){ .artifacts{grid-auto-columns:78%} .artifacts--grid{grid-template-columns:1fr} }

/* Витрина проекта: слева название, годы, роль, что это и ссылка; справа 2–3 скриншота внахлёст, как отпечатки на столе.
   <article class="showcase"><div class="showcase-text">…</div><div class="showcase-media"><figure class="artifact">…</figure>×2–3</div></article>
   .showcase--flip — картинки слева. Несколько витрин подряд — просто друг за другом, между ними линия. */
.showcase{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:center; padding:var(--sp-8) 0; border-top:1px solid var(--line)}
.showcase + .showcase{border-top:1px solid var(--line)}
.showcase-text{grid-column:1 / span 4}
.showcase-text > * + *{margin-top:var(--sp-4)}
.showcase-title{font:300 var(--s2)/1.1 var(--f-head); margin-top:var(--sp-2)}
.showcase-text .rows{margin-top:var(--sp-5)}
.showcase-media{grid-column:6 / -1; position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); align-items:start}
.showcase-media > .artifact:nth-child(1){grid-column:1 / span 9; grid-row:1; position:relative; z-index:1}
.showcase-media > .artifact:nth-child(2){grid-column:6 / -1; grid-row:1; margin-top:22%; position:relative; z-index:2}
.showcase-media > .artifact:nth-child(3){grid-column:2 / span 6; grid-row:2; margin-top:-8%; position:relative; z-index:3}
.showcase-media > .artifact:only-child{grid-column:1 / -1; margin-top:0}
.showcase--flip .showcase-text{grid-column:9 / -1; grid-row:1}
.showcase--flip .showcase-media{grid-column:1 / span 7; grid-row:1}
.showcase--soon .showcase-media{opacity:.55}
@media (max-width:1024px){
  .showcase-text,.showcase--flip .showcase-text{grid-column:1 / -1; grid-row:1}
  .showcase-media,.showcase--flip .showcase-media{grid-column:1 / -1; grid-row:2; margin-top:var(--sp-6)}
}
@media (max-width:760px){
  .showcase{padding:var(--sp-7) 0}
  .showcase-media{display:block}
  .showcase-media > .artifact + .artifact{margin-top:var(--sp-5)}
}

/* ---------- 14. Картинки: светлые, общая обработка ---------- */
/* Картинки из assets/img/pd/processed/ уже обработаны (агент v2-imagery, поле role в credits.json):
   role:"structure" — карты, атласы, гравюры-карты, текстуры: сквозная линия, .view--print, рамки, фон;
   role:"living"    — живые виды и интерьеры: первые экраны главной, «Перехода», «Нового сезона», «О себе», финал.
   Обработанным версиям CSS-фильтры не нужны: ставь data-processed на <figure>, фильтры снимаются. */
.view[data-processed] .view-img img,.tile-view[data-processed] img{filter:none; mix-blend-mode:normal}
.view--print[data-processed] .view-img img{mix-blend-mode:multiply}

/* ---------- 15. Без svg-аур практик (решение Саши 26.10) ---------- */
/* Градиентные рисунки практик из assets/ill/ («Свет») со всего сайта убраны: «некрасивые». Файлы не удалены.
   Карточка остаётся без картинки; на её место — картина-лист: <img class="card-art"> с картинкой из assets/img/pd/processed/
   (кадр через object-position). Вернуть отдельный рисунок: атрибут data-ill-keep. */
img[src*="assets/ill/"]:not([data-ill-keep]),svg.wk-ill:not([data-ill-keep]){display:none !important}

/* ---------- 12. Движение ---------- */
/* Проявление при прокрутке: .rise (или само — у .tile, строк .index, .view, .band-head).
   Пока site-v2.js не загрузился, всё видно (класс v2-js ставит скрипт). */
.v2-js .rise:not(.is-in){opacity:0; transform:translateY(14px)}
.v2-js .rise{transition:opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay:var(--rise-d, 0s)}
/* дисплей: строки выезжают из-под маски один раз */
.v2-js .display:not(.is-in) .ln > span{transform:translateY(108%)}
.v2-js .display .ln > span{transition:transform 1.2s var(--ease); transition-delay:var(--ln-d, 0s)}
.v2-js .display.is-in .ln:nth-child(2) > span{--ln-d:.12s}
.v2-js .display.is-in .ln:nth-child(3) > span{--ln-d:.24s}
@media (prefers-reduced-motion: reduce){
  .v2-js .rise:not(.is-in),.v2-js .display:not(.is-in) .ln > span{opacity:1; transform:none}
  .view-img img{transform:none !important}
  .rose .rose-needle{transition:none}
}

/* ---------- 16. Живая картина .plate-alive, карта-полоса .plate-map, картинка карточки .tile-view--melt (26.10, решение Саши) ----------
   Картина — законченная композиция: показываем ЦЕЛИКОМ, в родных пропорциях, без рамки, скругления и тени.
   Края растворены неровно, как акварель (маску рисует site-v2.js, раздел 8). Картина проявляется, как фото в проявителе:
   сначала бледный размытый подмалёвок, потом из точки смысла (data-pa-from) расходится пятно резкости и цвета.
   Разметка:
   <figure class="plate-alive" data-processed data-clear data-pa-from=".42 .88" style="--pa-r:.859">
     <div class="pa-img"><img src="…-1200.jpg" width="1031" height="1200" alt="…" loading="lazy" decoding="async"></div>
     <figcaption class="pa-cap">Исаак Левитан · «Весна. Большая вода», 1897<span class="pa-src"> · Третьяковская галерея</span></figcaption>
   </figure>
   --pa-r — ширина/высота картины (числом), --pa-h — сколько картина занимает по высоте (по умолчанию min(68vh, 620px)).
   .is-right / .is-center — куда прижать лист в колонке. .plate-alive--quiet — тихая: без точек, только растекание.
   data-pa-eager — первый экран: начинается сразу (3,6 с), без ожидания прокрутки и без loading="lazy"; остальные — 1,8 с при входе в экран.
   data-pa-from="x y" — откуда расходится проявка (доли листа, по умолчанию .5 .55).
   data-clear — поле field.js расступается под листом и рядом тише картины. */
.plate-alive{position:relative; isolation:isolate; margin:0; --pa-r:1; --pa-h:min(68vh, 620px); width:min(100%, calc(var(--pa-h) * var(--pa-r)))}
.plate-alive.is-right{margin-left:auto}
.plate-alive.is-center{margin-left:auto; margin-right:auto}
.pa-img{position:relative; aspect-ratio:var(--pa-r)}
.pa-img img{display:block; width:100%; height:100%; max-width:none; object-fit:fill; border-radius:0;
  /* запас без скрипта: мягко растворённые края */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
          mask-composite:intersect;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
/* подмалёвок для проявки (создаёт site-v2.js): бледная холодная размытая копия под картиной, тает в конце */
.pa-ghost{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:fill; pointer-events:none;
  filter:blur(16px) saturate(.3) contrast(.5) brightness(1.22) hue-rotate(-8deg); opacity:.55; will-change:opacity}
.pa-img > img:not(.pa-ghost){position:relative}
.pa-cap{margin-top:var(--sp-2); font:400 var(--s5)/1.45 var(--f-text); color:var(--ink-3); transition:opacity 1s var(--ease)}
.pa-cap .pa-src,.pm-cap .pa-src{display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; vertical-align:bottom; opacity:0; transition:max-width .7s var(--ease), opacity .5s var(--ease)}
.plate-alive:hover .pa-src,.plate-alive:focus-within .pa-src,.plate-map:hover .pa-src{max-width:40em}
.plate-alive:hover .pa-src,.plate-alive:focus-within .pa-src{opacity:1}
.is-right > .pa-cap,.plate-alive.is-right .pa-cap{text-align:right}
.plate-alive.is-center .pa-cap{text-align:center}
/* 27.10: подпись не ждёт картину (старое .plate-alive:not([data-pa="done"]) .pa-cap{opacity:0} снято вместе с проявкой site-v2.js) */
@media (hover:none){ .pa-cap .pa-src{display:none} }

/* картина на первом экране: прижата вправо и вверх колонки, на телефоне — по центру между полями */
.cover-aside:has(> .plate-alive){display:flex; align-items:flex-start; justify-content:flex-end; min-height:0}
@media (max-width:760px){
  .cover-aside:has(> .plate-alive){justify-content:center; margin:var(--sp-2) 0 var(--sp-5)}
  .cover-aside > .plate-alive{--pa-h:min(56vh, 440px)}
}
.band-aside-plate{margin-top:var(--sp-6)}

/* Карта, атлас, научный лист — «структура и знание»: чёткие, полосой во всю ширину окна, бумага листа уходит в бумагу сайта,
   верх и низ растворяются в фон. Без рамок. Одна такая полоса на страницу.
   <figure class="plate-map" data-processed style="--pm-at:50% 45%; --pm-h:clamp(260px, 28vw, 420px)">
     <div class="pm-img"><img …></div><figcaption class="pm-cap">Автор · «Название», год<span class="pa-src"> · собрание</span></figcaption></figure> */
.plate-map{position:relative; margin:0}
.pm-img{position:relative; height:var(--pm-h, clamp(240px, 28vw, 420px)); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent)}
.pm-img img{position:absolute; left:0; top:-6%; width:100%; height:112%; max-width:none; object-fit:cover; object-position:var(--pm-at, 50% 50%); mix-blend-mode:multiply; will-change:transform}
.pm-cap{padding:var(--sp-2) max(var(--edge), (100% - var(--frame-max)) / 2) 0; font:400 var(--s5)/1.45 var(--f-text); color:var(--ink-3)}
.plate-map:hover .pa-src,.plate-map:focus-within .pa-src{opacity:1}
/* карта в колонке, не во всю ширину (лист 3:1 у сезона «Амстердам»): .plate-map--inset — целиком, края растворены со всех сторон */
.plate-map--inset .pm-img{height:auto; aspect-ratio:var(--pm-r, 3); overflow:visible;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-composite:intersect}
.plate-map--inset .pm-img img{position:static; height:100%; object-fit:contain}
.plate-map--inset .pm-cap{padding-left:0; padding-right:0}
@media (max-width:760px){ .pm-img{height:var(--pm-h-m, 220px)} }

/* Картинка карточки продукта тает в карточку сверху вниз: без нижнего края и линии.
   <figure class="tile-view tile-view--melt" data-processed style="--tv-at:50% 42%"><img …><figcaption>…</figcaption></figure> */
@property --melt{syntax:'<percentage>'; inherits:true; initial-value:0%}
.tile--product .tile-view.tile-view--melt{border-bottom:0; --melt:0%; transition:--melt 2.2s cubic-bezier(.33,0,.15,1)}
.tile-view--melt img{object-position:var(--tv-at, 50% 50%);
  -webkit-mask-image:linear-gradient(180deg, #000 calc(var(--melt) * .45), transparent var(--melt)); mask-image:linear-gradient(180deg, #000 calc(var(--melt) * .45), transparent var(--melt))}
.tile--product .tile-view.tile-view--melt.is-in,.tile-view.tile-view--melt.is-in{--melt:100%}
.tile-view--melt figcaption{position:absolute; left:var(--sp-5); right:var(--sp-5); bottom:var(--sp-2); font:400 var(--s5)/1.4 var(--f-text); color:var(--ink-3); opacity:0; transition:opacity .4s var(--ease)}
.tile--product:hover .tile-view--melt figcaption,.tile--product:focus-within .tile-view--melt figcaption{opacity:1}
@media (hover:none){ .tile-view--melt figcaption{display:none} }

/* Тихое место под живое фото Саши: без рамки и углов — мягкое облако дымки, по краю растворяется. Класс .photo-slot */
.photo-slot{position:relative; margin:0; display:grid; place-items:center; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ink) 7%, var(--cool)), color-mix(in srgb, var(--cool) 60%, transparent) 58%, transparent) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
.photo-slot > *{font:400 var(--s5)/1.4 var(--f-text) !important; color:var(--ink-3) !important}

@media (prefers-reduced-motion: reduce){
  .tile--product .tile-view.tile-view--melt{transition:none; --melt:100%}
  .pa-cap{transition:none}
}