/* ─────────────────────────────────────────────────────────────
   araternitas.art — оболочка портала

   Два правила.
   1. Интерфейс ахроматичен. Единственный цвет на странице — плазма.
      Любой акцентный оттенок в рамках и кнопках тянет сцену в сторону
      «духовного техно», и работа начинает читаться как декор.
   2. Ничего, кроме текста, не рисуем сплошным цветом: фон у панели —
      стекло, сцена за ней видна и продолжает идти.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:#07080a;          /* холодный почти-чёрный, не бурый */
  --text:#e9ebec;
  --muted:#8d9398;
  --dim:#5c6267;
  --line:rgba(255,255,255,.10);
  --glass:rgba(9,10,12,.50);
  --glass-hi:rgba(9,10,12,.74);
  --gut:clamp(20px,5vw,64px);
  --font:"Jost",ui-sans-serif,system-ui,"Futura","Century Gothic",sans-serif;
  --track:.08em;          /* разрядка: геометрический гротеск её требует */
  color-scheme:dark;
}

/* ── днём ──
   Графит, который ночью читается как глубина, при свете из окна
   превращается в кашу: тонкие линии пропадают, серый текст сливается с
   фоном. Поэтому днём обвязка подтягивается — чуть светлее текст, чуть
   плотнее стекло, линии виднее. Палитра та же, ахроматичная: это
   поправка на свет в комнате, а не вторая тема. */
body[data-day="1"]{
  --text:#f4f6f7;
  --muted:#a6acb1;
  --dim:#7b8186;
  --line:rgba(255,255,255,.17);
  --glass:rgba(9,10,12,.60);
  --glass-hi:rgba(9,10,12,.82);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font);font-weight:300;font-size:calc(16px + var(--fs-up));line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:1px solid var(--text);outline-offset:3px;}

/* ── сцена ── */
#stage{position:fixed;inset:0;display:block;width:100%;height:100%;background:var(--ink);}
.nogl{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);}
#veil{
  position:fixed;inset:0;pointer-events:none;
  background:
    /* фигура теперь по центру и заходит под список — слева нужна подложка,
       иначе крупные капители лежат прямо на искрах */
    linear-gradient(to right, rgba(7,8,10,.78) 0, rgba(7,8,10,.34) 26%, transparent 46%),
    radial-gradient(130% 95% at 50% 48%, transparent 42%, rgba(7,8,10,.55) 100%),
    linear-gradient(to bottom, rgba(7,8,10,.72) 0, transparent 20%, transparent 76%, rgba(7,8,10,.74) 100%);
  transition:opacity .9s ease;
}

/* ── шапка ── */
#brand{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(18px,3.4vw,34px) var(--gut);
  pointer-events:none;
}
#brand > *{pointer-events:auto;}
.sig{display:grid;gap:clamp(6px,.8vw,11px);text-decoration:none;max-width:min(62vw,720px);}
.sig b{
  font-weight:300;font-size:clamp(21px,3.2vw,44px);line-height:1.08;
  letter-spacing:.17em;text-transform:uppercase;
}
.sig span{
  font-size:clamp(10px,1.2vw,15px);font-weight:300;line-height:1.5;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

.modes{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:2px;padding:2px;
  background:var(--glass);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);}
.modes button{
  padding:7px 15px;border-radius:1px;color:var(--dim);
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  transition:color .25s,background .25s;
}
.modes button[aria-selected="true"]{color:var(--text);background:rgba(255,255,255,.07);}
.modes button:hover{color:var(--text);}

/* ── афиша: крупный список слева ──
   Размер пункта смотрит и на высоту кадра: восемь строк не влезают
   в низкое окно и список уезжает за верхний край. */
body[data-view="portal"]{ --msz:clamp(19px,min(3.1vw,5.1vh),40px); }
body[data-view="reading"]{ --msz:12px; }

#menu{
  position:fixed;z-index:25;left:var(--gut);
  top:50%;transform:translateY(-50%);
  width:min(46vw,540px);
  transition:top .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;
}
#menu ol{list-style:none;margin:0;padding:0;}
#menu li + li{margin-top:.52em;}
#menu a{
  position:relative;display:block;text-decoration:none;
  color:rgba(233,235,236,.90);
  transition:color .3s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
#menu em{
  font-style:normal;font-weight:300;
  font-size:var(--msz);line-height:1.18;
  letter-spacing:var(--track);text-transform:uppercase;
  text-shadow:0 2px 30px rgba(7,8,10,.95);
  transition:font-size .55s cubic-bezier(.2,.8,.2,1),letter-spacing .4s;
}
/* Номер вынесен из потока влево: в потоке он сдвигал весь список на свою
   ширину, и левый край списка не совпадал ни с именем, ни с нижней строкой. */
#menu .n{
  position:absolute;right:calc(100% + 11px);top:.34em;
  font-size:10px;font-weight:300;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s;
}
#menu a:hover,#menu a:focus-visible{color:#fff;transform:translateX(9px);}
#menu a:hover .n,#menu a:focus-visible .n{opacity:1;}
#menu a[aria-current="page"]{color:#fff;}
#menu a[aria-current="page"] .n{opacity:1;color:var(--muted);}
/* подпись одной строкой под списком: меняется на наведении, вёрстку не двигает */
/* подпись раздела: одна строка под списком, меняется на наведении.
   Светлее самого списка не делаем, но и шептать она не должна. */
#menu-sub{
  margin:26px 0 0;min-height:1.5em;
  font-size:clamp(11px,1.05vw,13px);font-weight:300;letter-spacing:.16em;
  text-transform:uppercase;color:#c6cbce;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .3s ease;
}
#menu-sub[data-on="1"]{opacity:1;transform:none;}
#menu-sub[data-on="1"]{opacity:1;}

/* при чтении список становится тихой колонкой у верхнего края */
body[data-view="reading"] #menu{top:calc(clamp(18px,3.4vw,34px) + 118px);transform:none;width:auto;}
body[data-view="reading"] #menu a{padding:5px 0;}
body[data-view="reading"] #menu em{letter-spacing:.22em;font-weight:400;}
body[data-view="reading"] #menu-sub{display:none;}
body[data-view="index"] #menu{opacity:0;pointer-events:none;}

/* подпись об интерактиве: её должно быть видно, иначе никто не поймёт,
   что сцену можно вести колесом. Поэтому не шёпот, а строка со штрихом. */
/* какой «я» сейчас горит и на каком языке — тихая подпись над нижней строкой */
#glyph-label{
  position:fixed;left:var(--gut);bottom:calc(clamp(16px,3vw,30px) + 42px);z-index:25;
  display:flex;align-items:baseline;gap:11px;margin:0;
  pointer-events:none;opacity:0;transition:opacity .8s ease;
}
body[data-view="portal"] #glyph-label{opacity:1;}
body[data-ui="off"] #glyph-label{opacity:0;}
#glyph-label b{font-weight:300;font-size:clamp(17px,1.8vw,23px);line-height:1;color:var(--text);}
#glyph-label span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}

#hint{
  position:fixed;left:var(--gut);bottom:clamp(16px,3vw,30px);z-index:25;
  display:block;margin:0;
  font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;opacity:0;transition:opacity .8s ease;
}
/* штрих над строкой, а не перед ней: перед ней он уводил текст вправо */
#hint::before{content:"";display:block;width:30px;height:1px;
  background:rgba(255,255,255,.34);margin:0 0 10px;}
body[data-view="portal"] #hint{opacity:1;}

/* ── наедине со сценой: клавиша H или ?scene ── */
/* гасим без перехода: на плавный переход тут полагаться нельзя — в окне,
   которое браузер придерживает, анимация прозрачности замирает на полпути
   и обвязка остаётся висеть поверх сцены */
body[data-ui="off"] #brand,
body[data-ui="off"] #menu,
body[data-ui="off"] #hint,
body[data-ui="off"] #veil{opacity:0;visibility:hidden;pointer-events:none;transition:none;}

/* ── ABOUT: портрет и подпись о месте ── */
.where{
  margin:-6px 0 22px;font-size:calc(10px + var(--fs-up));letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.port{margin:0 0 26px;max-width:min(420px,78%);}
.port .shot{width:100%;}
.port .shot img{aspect-ratio:auto;height:auto;}

/* ── CV: половина кадра ──
   Список длинный, строка «год — проект — где» требует размаха, а кнопкам
   разделов нужно место справа. Поэтому страница шире обычной читалки, но
   не во весь экран: сцена слева остаётся частью композиции. */
/* Доля кадра — ручка «Страница → Ширина страницы» (--read-w). Левому краю
   при этом всегда остаётся не меньше 430px: там имя и список разделов. */
/* Прибавка к кеглю всех текстов для чтения — ручка «Страница → Текст:
   прибавка». Меню, шапку, крутилки и кнопки редактора она не трогает. */
:root{ --fs-up:2px; }
:root{ --read-w:0.65; }
body[data-half="1"] #reader{ width:max(620px, min(calc(var(--read-w) * 100vw), calc(100% - 430px))); }

/* Кромка панели дышит светом: иначе тёмное стекло на тёмной сцене
   сливается и непонятно, где начинается страница. Мигает прозрачностью
   отдельного слоя — это не заставляет браузер перерисовывать текст. */
body[data-half="1"] #reader::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  border-left:1px solid rgba(176,206,255,.55);
  box-shadow:inset 14px 0 30px -22px rgba(140,180,255,.9);
  animation:edgeglow 6s ease-in-out infinite;
}
@keyframes edgeglow{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ── шапка CV с кнопками разделов ── */
.cvtop{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,3vw,40px);flex-wrap:wrap;margin:0 0 6px;
}
.cvtitle{min-width:0;flex:0 0 auto;}
.cvtitle .h-big{margin-top:0;}
.cvnav{
  flex:1 1 420px;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:flex-end;align-content:flex-start;padding-top:12px;
}
.cvnav button{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:12px 20px;line-height:1;
  background:rgba(255,255,255,.015);
  transition:background .3s ease;
  animation:cvpulse 5.2s ease-in-out infinite;
}
/* каждая кнопка вступает чуть позже предыдущей — свет идёт по ряду волной */
.cvnav button:nth-child(2){animation-delay:.42s;}
.cvnav button:nth-child(3){animation-delay:.84s;}
.cvnav button:nth-child(4){animation-delay:1.26s;}
.cvnav button:nth-child(5){animation-delay:1.68s;}
.cvnav button:nth-child(6){animation-delay:2.1s;}
.cvnav button:nth-child(7){animation-delay:2.52s;}
.cvnav button:nth-child(8){animation-delay:2.94s;}
@keyframes cvpulse{
  0%,100%{ border-color:rgba(255,255,255,.17); color:var(--muted);
           box-shadow:0 0 0 rgba(130,170,255,0); text-shadow:none; }
  50%    { border-color:rgba(160,196,255,.7);  color:#dce8ff;
           box-shadow:0 0 15px -2px rgba(120,165,255,.5);
           text-shadow:0 0 10px rgba(150,190,255,.55); }
}
.cvnav button:hover{background:rgba(255,255,255,.08);}
.cvnav button[data-on="1"]{
  background:rgba(255,255,255,.08);
  animation-duration:2.6s;        /* текущий раздел дышит заметно чаще */
}
/* заголовок не должен прилипать к самому верху, когда к нему ведёт кнопка */
.block-h{scroll-margin-top:14px;}

/* ── CV: кегль под ширину ──
   В узкой читалке мелкий кегль был оправдан, в половине кадра он
   превращается в петит: строки длинные, а буквы крошечные. Поднимаем
   только на этой странице, чтобы не трогать остальные. */
body[data-half="1"] .block-h{font-size:calc(11px + var(--fs-up));letter-spacing:.28em;margin:44px 0 14px;}
body[data-half="1"] .rows div{grid-template-columns:112px minmax(0,1fr);padding:13px 0;}
body[data-half="1"] .rows b{font-size:calc(12.5px + var(--fs-up));}
body[data-half="1"] .rows em{font-size:calc(17px + var(--fs-up));letter-spacing:.015em;}
body[data-half="1"] .rows i{font-size:calc(12.5px + var(--fs-up));line-height:1.55;margin-top:3px;}
body[data-half="1"] .skgroup b{font-size:calc(11px + var(--fs-up));}
body[data-half="1"] .skgroup li{font-size:calc(15px + var(--fs-up));}
body[data-half="1"] .h-sub{font-size:calc(11px + var(--fs-up));}

/* Второй «CV» сверху: крошка повторяет заголовок страницы слово в слово.
   На этой странице она лишняя — кнопка закрытия рядом и так на месте. */
body[data-half="1"] .crumb{display:none;}
@media (max-width:760px){
  .cvtop{gap:12px;}
  .cvnav{justify-content:flex-start;padding-top:0;flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  .cvnav button,body[data-half="1"] #reader::after{animation:none;}
  body[data-half="1"] #reader::after{opacity:.6;}
}

/* ── CV: раздел отбивается линией, а не рамкой ──
   Рамка вокруг списка превращала страницу в набор карточек и спорила с
   самими строками. Линия делает то же самое тише: заголовок, за ним
   светящаяся черта до края, и она дышит. Каждый следующий раздел
   вступает позже — свет идёт по странице волной. */
body[data-half="1"] .block-h{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  margin:46px 0 10px;
}
body[data-half="1"] .block-h::after{
  content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(to right, rgba(170,202,255,.8), rgba(150,185,255,.1));
  box-shadow:0 0 10px -1px rgba(120,165,255,.7);
  animation:blockglow 7.5s ease-in-out infinite;
}
@keyframes blockglow{ 0%,100%{opacity:.28;} 50%{opacity:1;} }
body[data-half="1"] .block-h:nth-of-type(2)::after{animation-delay:.9s;}
body[data-half="1"] .block-h:nth-of-type(3)::after{animation-delay:1.8s;}
body[data-half="1"] .block-h:nth-of-type(4)::after{animation-delay:2.7s;}
body[data-half="1"] .block-h:nth-of-type(5)::after{animation-delay:3.6s;}
body[data-half="1"] .block-h:nth-of-type(6)::after{animation-delay:4.5s;}
body[data-half="1"] .block-h:nth-of-type(7)::after{animation-delay:5.4s;}
@media (prefers-reduced-motion:reduce){
  body[data-half="1"] .block-h::after{animation:none;opacity:.6;}
}

/* ── навыки ── */
.skills{display:grid;gap:22px;margin:14px 0 0;}
.skgroup b{display:block;font-weight:400;font-size:calc(10px + var(--fs-up));letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.skgroup ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;}
.skgroup li{position:relative;padding-left:16px;font-size:calc(14px + var(--fs-up));line-height:1.6;color:var(--text);}
.skgroup li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;
  background:rgba(255,255,255,.34);}

/* ── подсвеченные буквы в подписи раздела ──
   Единственное цветное пятно в обвязке, и оно оправдано: «CV» внутри
   «CVITAE» нужно увидеть, иначе слово читается как опечатка. Холодный
   синий тот же, что у дышащих кнопок CV, — чужого оттенка не вносим. */
.mk{ font-style:normal; }
/* Через #menu: у пункта меню своя тёмная тень, заданная через id, и она
   перебивала свечение по силе правила — синего попросту не было видно.
   Цвет заодно взят гуще: бледно-голубой на тёмном почти не отличим от
   белого, особенно в разрядку и прописными. */
/* Цвета и сила свечения — крутилки «Меню: свечение CV» в панели сцены:
   они пишут --cv-* на корень страницы. Здесь же заводские значения на
   случай, если сцена не поднялась.
   Буквы тонкие (начертание 300), а ореол у text-shadow тем слабее, чем
   тоньше штрих, поэтому тени наложены стопкой: одинаковые слои
   складываются и плотнеют. Прозрачность каждого слоя умножена на силу;
   больше единицы браузер её не поднимает, так что сила выше 1 сначала
   добирает слабые широкие слои. Тёмная подложка — последней: тени
   рисуются сверху вниз по списку, первая ложится поверх. */
:root{ --cv-c:143 188 255; --cv-g:100 150 255; --cv-k:1; --cv-w:1; --cv-hk:1.5; }
#menu em .mk,.h-big .mk{
  --k:var(--cv-k); --w:var(--cv-w);
  color:rgb(var(--cv-c));
  text-shadow:0 0 calc(1px * var(--w))  rgb(var(--cv-c) / calc(var(--k) * 1)),
              0 0 calc(4px * var(--w))  rgb(var(--cv-g) / calc(var(--k) * 1)),
              0 0 calc(4px * var(--w))  rgb(var(--cv-g) / calc(var(--k) * 1)),
              0 0 calc(10px * var(--w)) rgb(var(--cv-g) / calc(var(--k) * .95)),
              0 0 calc(10px * var(--w)) rgb(var(--cv-g) / calc(var(--k) * .95)),
              0 0 calc(22px * var(--w)) rgb(var(--cv-g) / calc(var(--k) * .8)),
              0 0 calc(22px * var(--w)) rgb(var(--cv-g) / calc(var(--k) * .8)),
              0 0 calc(44px * var(--w)) rgb(var(--cv-g) / calc(var(--k) * .6)),
              0 2px 30px rgba(7,8,10,.95);
  transition:color .3s ease;
}
#menu a:hover em .mk,#menu a:focus-visible em .mk{
  --k:calc(var(--cv-k) * var(--cv-hk));
  --w:calc(var(--cv-w) * (1 + (var(--cv-hk) - 1) * .25));
  color:color-mix(in srgb, rgb(var(--cv-c)) 55%, #fff);
}

/* ── читалка ── */
#reader{
  position:fixed;z-index:40;top:0;right:0;bottom:0;
  width:min(620px,100%);
  display:flex;flex-direction:column;
  background:linear-gradient(to left,var(--glass-hi),rgba(9,10,12,.40));
  /* Матовость — ручка «Страница → Матовость стекла». За панелью идёт
     живая сцена, поэтому браузер размывает её площадь заново каждый
     кадр: цена растёт и с площадью панели, и с радиусом. Когда ручка
     на нуле, фильтр снимается совсем (правило ниже) — нулевой радиус
     сам по себе кадр через фильтр всё равно прогоняет. */
  backdrop-filter:blur(var(--glass-blur,16px)) saturate(1.1);
  -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(1.1);
  border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .75s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
html[data-glass="off"] #reader{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(to left,rgba(9,10,12,.93),rgba(9,10,12,.80));
}
body[data-view="reading"] #reader{transform:none;}
.reader-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(18px,3vw,30px) clamp(22px,3.4vw,44px) 10px;
}
.crumb{font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.crumb button{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:calc(10px + var(--fs-up));}
.crumb button:hover{color:var(--text);}
.shut{width:32px;height:32px;border:1px solid var(--line);border-radius:1px;color:var(--muted);line-height:1;font-size:13px;}
.shut:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.reader-body{
  padding:4px clamp(22px,3.4vw,44px) clamp(40px,7vw,80px);
  overflow-y:auto;overscroll-behavior:contain;flex:1;
}

/* ── широкая страница: раздел со съёмкой ──
   Левая сторона остаётся как была — сцена, имя, список разделов. Шире
   становится только сама страница: материалу нужно место, а фигуре —
   воздух. Левому краю всегда оставляем не меньше 430px, иначе список
   разделов начинает тесниться. */


/* Внутреннее устройство страницы — одно на все разделы: заголовки и текст
   идут от левого края, абзац держится своей меры (длинную строку читать
   тяжело), а картинки занимают всю ширину страницы. */
body[data-half="1"] .reader-body{ padding:4px 0 clamp(60px,9vw,120px); }
body[data-half="1"] .reader-body > *,
body[data-half="1"] .ed > *{
  padding-left:clamp(26px,3vw,60px);padding-right:clamp(26px,3vw,60px);
}
body[data-half="1"] .ed{max-width:none;padding:0;}
/* Мера строки. Прежние 46 и 64 знака ставились под узкую читалку; на
   широкой странице такая колонка жалась к левому краю, и половина кадра
   оставалась пустой без всякого замысла. Подводка и абзац подросли до
   58 и 78 знаков — верхняя граница удобного чтения, — а справка под
   текстом держит ту же меру, чтобы правый край у всего был один. */
body[data-half="1"] .lead{ max-width:58ch; margin-right:auto; }
body[data-half="1"] .prose p{ max-width:78ch; }
body[data-half="1"] .facts dd{ max-width:78ch; }
body[data-half="1"] .slot-full{ padding:0; }

/* Содержимое стоит выше светящейся кромки панели: иначе её тень
   ложится поверх текста у левого края. */
.reader-top,.reader-body{position:relative;z-index:4;}

/* ── гнёзда под картинки и видео ──
   Пока файла нет, на его месте стоит размеченное место: видно пропорцию и
   что сюда идёт. Так страницу можно собрать и посмотреть целиком заранее. */
/* ширина от высоты: вертикальный блок не выше экрана (--vr — ширина/высота) */
.slot{margin:30px auto;display:grid;place-items:center;width:min(100%, calc(78vh * var(--vr, 10)));
  border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);}
.slot figcaption{display:grid;gap:7px;justify-items:center;text-align:center;padding:18px;}
.slot figcaption b{font-weight:400;font-size:calc(9px + var(--fs-up));letter-spacing:.3em;text-transform:uppercase;color:var(--muted);}
.slot figcaption span{font-size:calc(11px + var(--fs-up));color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.1em;}
.slot figcaption i{font-style:normal;font-size:calc(12px + var(--fs-up));color:var(--dim);max-width:44ch;line-height:1.5;}
.slot.filled{border:0;background:none;position:relative;overflow:hidden;}
.slot.filled img,.slot.filled video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
.slot.filled figcaption{position:absolute;left:0;right:0;bottom:0;justify-items:start;text-align:left;
  padding:16px clamp(18px,3vw,40px);background:linear-gradient(to top,rgba(7,8,10,.86),transparent);}


.ed{ margin:46px 0 0; }
.ed h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 4px;font-weight:300;font-size:calc(clamp(19px,2vw,25px) + var(--fs-up));letter-spacing:.05em;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);
}
.ed h3 span{font-size:calc(11px + var(--fs-up));color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.14em;flex:none;}
.ed-where{margin:10px 0 14px;font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* auto-fit, а не auto-fill: когда снимков в выпуске три, они растягиваются
   на всю ширину, а не жмутся в угол пустой сетки */
.shots{display:grid;gap:4px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:18px 0 0;}
.shot{padding:0;border:0;display:block;overflow:hidden;background:rgba(255,255,255,.03);cursor:zoom-in;}
.shot img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  opacity:.82;transform:scale(1.001);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.shot:hover img{opacity:1;transform:scale(1.045);}

#lightbox{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  padding:clamp(16px,4vw,64px);background:rgba(4,5,7,.93);cursor:zoom-out;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
body[data-lb="1"] #lightbox{opacity:1;visibility:visible;}
/* Снимок вписан в экран целиком. Проценты тут не годятся: ячейка сетки
   растёт по снимку, и «100% высоты» от неё не ограничивало ничего —
   большой кадр вылезал за край, и увидеть его целиком было нельзя. */
#lightbox img{width:auto;height:auto;object-fit:contain;
  max-width:calc(100vw - 2 * clamp(16px,4vw,64px));
  max-height:calc(100vh - 2 * clamp(16px,4vw,64px));
  max-height:calc(100dvh - 2 * clamp(16px,4vw,64px));}
#lightbox .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-size:18px;
  background:rgba(8,9,14,.55);cursor:pointer;display:grid;place-items:center;}
#lightbox .lb-nav:hover{border-color:#fff;}
#lightbox .lb-prev{left:clamp(8px,2vw,24px);}
#lightbox .lb-next{right:clamp(8px,2vw,24px);}
#lightbox .lb-count{position:fixed;bottom:clamp(10px,2vw,22px);left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.7);}
#lightbox[data-one="1"] .lb-nav,#lightbox[data-one="1"] .lb-count{display:none;}

/* ── окно письма ──
   Полей в рамках нет: рамка превращает страницу в анкету, а тут человек
   пишет художнику. Поэтому только линия снизу — и она загорается под тем
   полем, в котором стоит курсор, как хорда в фигуре. */
.write{margin:30px 0 0;max-width:min(580px,100%);}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.chip{
  font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.chip:hover{color:var(--text);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04);}

.field{position:relative;padding-top:20px;}
.field + .field{margin-top:10px;}
.field input,.field textarea{
  width:100%;display:block;background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--text);font:inherit;font-size:16px;letter-spacing:.02em;
  padding:9px 0 12px;border-radius:0;
}
.field textarea{min-height:132px;line-height:1.66;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;}
.field label{
  position:absolute;left:0;top:29px;pointer-events:none;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  transition:top .32s cubic-bezier(.2,.8,.2,1),font-size .32s ease,color .32s ease;
}
/* подпись уезжает наверх, как только в поле что-то есть */
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{top:0;font-size:9px;letter-spacing:.3em;color:var(--muted);}
.field i{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--text);
  transform:scaleX(0);transform-origin:left;opacity:.8;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.field:focus-within i{transform:scaleX(1);}
/* поле, которое ждёт ответа: мигает линией, без красного — цвет тут только у плазмы */
.field.ask i{transform:scaleX(1);animation:ask .9s ease;}
@keyframes ask{0%,100%{opacity:.8;}25%,75%{opacity:.14;}}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.send-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:26px 0 0;}
.send{
  border:1px solid rgba(255,255,255,.26);padding:13px 32px;
  font-size:calc(11px + var(--fs-up));letter-spacing:.3em;text-transform:uppercase;color:var(--text);
  transition:background .35s ease,border-color .35s ease,letter-spacing .35s ease;
}
.send:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.52);letter-spacing:.36em;}
.send[disabled]{opacity:.4;cursor:default;}
.write-note{margin:0;font-size:calc(12px + var(--fs-up));line-height:1.5;color:var(--muted);max-width:40ch;}
.sent{margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line);}
.sent p:first-child{margin:0 0 8px;font-size:calc(clamp(17px,1.8vw,21px) + var(--fs-up));font-weight:300;letter-spacing:.04em;}

/* ── почта и ссылки ── */
.reach{margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line);}
.reach-h{margin:0 0 10px;font-size:calc(10px + var(--fs-up));letter-spacing:.26em;text-transform:uppercase;color:var(--dim);}
.mailto{
  display:inline-block;text-decoration:none;color:var(--text);
  font-size:calc(clamp(17px,1.9vw,23px) + var(--fs-up));font-weight:300;letter-spacing:.04em;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .35s ease;
}
.mailto:hover{border-color:var(--text);}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;}
.soc{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 10px;
  transition:color .35s ease,border-color .35s ease,background .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.soc i{display:grid;place-items:center;width:24px;height:24px;}
.soc svg{width:20px;height:20px;display:block;}
.soc span{font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;}
.soc:hover{color:var(--text);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04);transform:translateY(-2px);}

/* ── каталог ── */
#index{
  position:fixed;inset:0;z-index:35;overflow-y:auto;
  padding:calc(clamp(18px,3.4vw,34px) + 104px) var(--gut) 90px;
  background:rgba(7,8,10,.84);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;
}
body[data-view="index"] #index{opacity:1;visibility:visible;}
.idx-grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:1180px;}
.idx-col h3{
  margin:0 0 16px;font-weight:400;font-size:calc(10px + var(--fs-up));
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.idx-col ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;}
.idx-col li a{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:8px 0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);
  font-weight:300;transition:color .2s,padding .2s;
}
.idx-col li a:hover{color:#fff;padding-left:6px;}
.idx-col li a span{color:var(--dim);font-size:calc(11px + var(--fs-up));font-variant-numeric:tabular-nums;flex:none;}

/* ── типографика содержимого ── */
.h-kick{font-size:calc(9px + var(--fs-up));font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
.h-big{
  font-weight:200;line-height:1.08;margin:0 0 8px;
  font-size:calc(clamp(30px,4.4vw,46px) + var(--fs-up));letter-spacing:.02em;
}
.h-sub{color:var(--muted);margin:0 0 28px;font-size:calc(13px + var(--fs-up));letter-spacing:.04em;}
.lead{font-size:calc(clamp(17px,1.9vw,20px) + var(--fs-up));font-weight:300;line-height:1.55;color:#f2f4f5;margin:0 0 22px;}
.prose p{margin:0 0 17px;color:#c9ced1;}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 28px;font-size:calc(10px + var(--fs-up));color:var(--dim);
  letter-spacing:.18em;text-transform:uppercase;}

.list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.list a{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:15px 0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);
  transition:padding .25s ease,border-color .25s;
}
.list a:hover{padding-left:8px;border-color:rgba(255,255,255,.22);}
.list .t{font-size:calc(18px + var(--fs-up));font-weight:300;line-height:1.25;letter-spacing:.03em;}
.list .y{color:var(--dim);font-size:calc(11px + var(--fs-up));font-variant-numeric:tabular-nums;}
.list .p{grid-column:1/-1;color:var(--dim);font-size:calc(10px + var(--fs-up));letter-spacing:.18em;text-transform:uppercase;margin-top:3px;}

.rows{display:grid;gap:0;margin:0 0 30px;}
/* Год бывает пустым — у сертификата без даты, у награды. Пустые
   редактируемые места скрываются целиком, и строка тогда проваливалась в
   узкую колонку года и ломалась по буквам. Поэтому текст жёстко привязан
   ко второй колонке, а сама колонка умеет сжиматься. */
.rows div > span{grid-column:2;min-width:0;}
.rows div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);align-items:baseline;}
.rows b{font-weight:300;color:var(--dim);font-size:calc(11px + var(--fs-up));font-variant-numeric:tabular-nums;letter-spacing:.1em;}
.rows i{font-style:normal;color:var(--dim);font-size:calc(11px + var(--fs-up));display:block;letter-spacing:.06em;}
.block-h{font-size:calc(10px + var(--fs-up));font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:36px 0 12px;}
.block-h:first-child{margin-top:0;}

.term{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.term h4{margin:0 0 8px;font-weight:300;font-size:calc(19px + var(--fs-up));letter-spacing:.05em;}

.draft{
  display:inline-block;margin:0 0 20px;padding:6px 11px;border-radius:1px;
  border:1px dashed rgba(255,255,255,.2);color:var(--muted);
  font-size:calc(10px + var(--fs-up));letter-spacing:.12em;
}
.empty{color:var(--dim);font-size:calc(14px + var(--fs-up));}

.live{margin:26px 0 8px;padding:18px 20px;border:1px solid var(--line);border-radius:1px;background:rgba(255,255,255,.03);}
.live p{margin:0 0 12px;font-size:calc(13px + var(--fs-up));color:var(--muted);}
.live button{color:var(--text);font-size:calc(10px + var(--fs-up));letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:3px;}
.live button:hover{border-color:rgba(255,255,255,.4);}

/* ── крутилки: инструмент автора, зрителю не нужен (клавиша K) ── */
/* крутилки убраны насовсем — см. index.html */
#panel{display:none !important;}
.panel{
  position:fixed;right:18px;bottom:18px;z-index:60;width:min(300px,calc(100vw - 24px));
  background:var(--glass-hi);border:1px solid var(--line);border-radius:2px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.6);overflow:hidden;display:none;
}
.panel[data-show="1"]{display:block;}
.panel-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;padding:13px 15px;}
.panel-body{padding:2px 15px 15px;display:grid;gap:10px;max-height:min(62vh,560px);overflow-y:auto;}
.grp{margin:4px 0 -2px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400;}
.row{display:grid;gap:4px;}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.row-head label{font-size:11px;opacity:.9;}
.row-head output{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:none;cursor:pointer;margin:0;}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.22);}
input[type=range]::-moz-range-track{height:1px;background:rgba(255,255,255,.22);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:#e9ebec;border:0;}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#e9ebec;border:0;}
.colors{display:flex;gap:12px;align-items:center;padding-top:2px;}
.swatch{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);}
input[type=color]{width:28px;height:22px;padding:0;border:1px solid var(--line);border-radius:1px;background:none;cursor:pointer;}
.foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:9px;border-top:1px solid var(--line);}
.reset{border:1px solid var(--line);color:var(--muted);border-radius:1px;font-size:10px;letter-spacing:.1em;padding:6px 11px;}
.reset:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.fps{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;}

/* ── узкий экран ── */
@media (max-width:760px){
  /* на телефоне широкой страницы нет: читалка и так во весь экран */
  body[data-half="1"] #reader{width:100%;}
  #reader{width:100%;top:auto;height:82%;border-left:0;border-top:1px solid var(--line);
    border-radius:2px 2px 0 0;transform:translateY(102%);
    background:linear-gradient(to top,var(--glass-hi),rgba(9,10,12,.55));}
  body[data-view="reading"] #reader{transform:none;}
  /* афиша уходит вниз, фигура поднимается над ней */
  body[data-view="portal"]{--msz:clamp(17px,5.6vw,24px);}
  #menu{top:auto;bottom:62px;transform:none;width:auto;}
  #menu li + li{margin-top:.22em;}
  #menu .n{display:none;}   /* в узкой колонке номеру негде встать слева */
  #menu-sub{display:none;}
  body[data-view="reading"] #menu{opacity:0;pointer-events:none;}
  #hint{bottom:34px;}
}
@media (prefers-reduced-motion:reduce){
  #reader,#index,#veil,#menu{transition:none;}
}

/* ── WORKS: серии и плитки ── */
.series-nav{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;}
.series-nav button{font-size:calc(10px + var(--fs-up));letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:8px 12px;border:1px solid var(--line);border-radius:1px;transition:color .2s,border-color .2s;}
.series-nav button:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
.series{margin:54px 0 0;scroll-margin-top:12px;}
.ser-kick{margin:0 0 10px;font-size:calc(9px + var(--fs-up));letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}
.ser-t{margin:0 0 12px;font-weight:300;font-size:calc(clamp(22px,2.4vw,30px) + var(--fs-up));line-height:1.2;letter-spacing:.03em;
  padding-bottom:14px;border-bottom:1px solid var(--line);}
.ser-x{margin:0 0 22px;max-width:62ch;color:#c2c7ca;font-size:calc(14px + var(--fs-up));line-height:1.65;}
.tiles{display:grid;gap:28px 18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.tile{display:grid;gap:5px;align-content:start;color:var(--text);text-decoration:none;}
.tile-img{display:block;overflow:hidden;aspect-ratio:3 / 2;background:rgba(255,255,255,.03);margin-bottom:8px;position:relative;}
.tile-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.84;
  transform:scale(1.001);transition:opacity .35s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.tile:hover .tile-img img,.tile:focus-visible .tile-img img{opacity:1;transform:scale(1.04);}
.tile-live{display:grid;place-items:center;border:1px solid var(--line);
  background:radial-gradient(60% 70% at 50% 55%,rgba(90,120,255,.22),transparent 70%);}
.tile-live i{width:46%;aspect-ratio:1;border:1px solid rgba(160,180,255,.5);transform:rotate(22.5deg);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(135deg,rgba(140,160,255,.25),rgba(190,120,255,.10));animation:breath 6s ease-in-out infinite;}
.tile-live b{position:absolute;bottom:10px;left:12px;font-weight:400;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);}
@keyframes breath{0%,100%{opacity:.55;transform:rotate(22.5deg) scale(.94);}50%{opacity:1;transform:rotate(22.5deg) scale(1.04);}}
.tile-t{font-size:calc(17px + var(--fs-up));font-weight:300;letter-spacing:.03em;line-height:1.25;}
.tile-s{font-size:calc(10px + var(--fs-up));letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.tile-m{font-size:calc(12px + var(--fs-up));color:var(--dim);}
.tile:hover .tile-t{color:#fff;}

/* ── страница работы ── */
/* Заглавный кадр показываем целиком: обрезка по рамке превращала
   вертикальный снимок или ролик в увеличенную полосу из середины. */
.whero{margin:0 0 30px;padding:0 !important;background:#000;}
.whero img,.whero video{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;margin:0 auto;}
.facts{margin:26px 0 6px;display:grid;gap:20px;border-top:1px solid var(--line);padding-top:16px;}
/* Подпись стоит над своей строкой, а не сбоку от неё. Раньше под подпись
   отводили долю страницы, и на широком кадре она разъезжалась до трёхсот
   с лишним пикселей — текст «Shown» оказывался посреди страницы, будто
   встал случайно. Теперь у всего на странице один левый край. */
.facts div{display:grid;gap:5px;}
.facts dt{font-size:calc(9px + var(--fs-up));letter-spacing:.26em;text-transform:uppercase;color:var(--dim);padding-top:3px;}
.facts dd{margin:0;font-size:calc(14px + var(--fs-up));color:#c9ced1;line-height:1.55;}
.wvids{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start;}
.wvid{margin:0;}
/* Вертикальное видео — своей пропорции и не выше экрана: ширину считаем
   от высоты, а не наоборот, иначе в широкой колонке ролик 9:16 вырастал
   выше окна. Внутри рамки — contain: если записанная пропорция чуть
   не совпала с файлом, лучше тонкие поля, чем срезанные края. */
.wvid.tall{width:min(100%, calc(78vh * var(--vr, .5625)));justify-self:center;}
.wvids:has(.wvid.tall){grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));}
.wvid-box{position:relative;background:#000;overflow:hidden;}
/* ряд с вертикальными видео: см. videosHtml — flex-grow делит ширину так,
   что все ролики ряда одной высоты; не выше 78% экрана */
.vrow{display:flex;gap:14px;align-items:flex-start;margin:0 0 22px;}
.vcell{flex:var(--g) 1 0;min-width:0;}
.vcell .wvid,.vcell .wvid.tall,.vcol .wvid{width:100%;}
/* ширина колонки — формула из videosHtml: тогда вертикальное ровно по
   высоте колонки вместе с зазорами и подписями между роликами */
.vcol{flex:none;display:flex;flex-direction:column;gap:14px;
  width:calc((100% - 14px * var(--nt) - var(--rv) * 42px * (var(--ns) - 1)) / (1 + var(--rv) * var(--s)));}
/* строка подписи одной высоты у всех роликов ряда, есть подпись или нет */
.vrow .wvid{display:grid;grid-template-rows:auto 28px;}
.vrow .wvid figcaption{margin:0;padding-top:8px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:760px){
  .vrow{flex-direction:column;max-width:none !important;}
  .vcol{width:100%;}
  .vcell{width:100%;}
  .vcell .wvid.tall{width:min(100%, calc(70vh * var(--vr, .5625)));margin:0 auto;}
}
/* видео во весь экран: вписано в окно по своей пропорции (--r — ширина/высота) */
#vbox{position:fixed;inset:0;z-index:72;display:grid;place-items:center;background:rgba(3,4,6,.96);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;cursor:zoom-out;}
body[data-vb="1"] #vbox{opacity:1;visibility:visible;}
.vb-stage{width:min(94vw, calc(88vh * var(--r, 1.7778)));width:min(94vw, calc(88dvh * var(--r, 1.7778)));background:#000;cursor:auto;}
.vb-stage video,.vb-stage iframe{display:block;width:100%;height:100%;border:0;object-fit:contain;}
.vb-x{position:fixed;top:clamp(10px,2vw,24px);right:clamp(10px,2vw,24px);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(8,9,14,.6);font-size:16px;cursor:pointer;}
.vb-x:hover{border-color:#fff;}
.lite-out{display:grid;place-items:center;background:#0b0c12;color:var(--text);text-decoration:none;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.lite-out::before{display:none;}
.wvid-box video,.wvid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:contain;}
.wvid figcaption{margin-top:9px;font-size:calc(11px + var(--fs-up));letter-spacing:.06em;color:var(--dim);}
.wvid figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25);}
.wvid figcaption a:hover{color:var(--text);}
.lite{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;
  display:grid;place-items:center;cursor:pointer;}
.lite::before{content:"";position:absolute;inset:0;background:rgba(7,8,10,.45);transition:background .3s;}
.lite:hover::before{background:rgba(7,8,10,.2);}
.lite i{position:relative;width:64px;height:64px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.lite i::after{content:"";position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent rgba(255,255,255,.9);}
/* Снимки одной лентой во всю ширину — так они выглядят в узкой читалке и
   на телефоне, где разворота нет. На широкой странице этот же список
   уезжает в правую колонку и становится превью (ниже, в разделе
   «разворот»): крупно кадр показывает уже полный экран по щелчку. */
.gal{display:grid;gap:16px;}
.gal .shot{width:100%;margin:0;background:none;}
.gal .shot img{aspect-ratio:auto;width:100%;height:auto;}
.gal .shot.tall{justify-self:center;}
.gal .shot.tall img{width:auto;max-width:100%;max-height:82vh;margin:0 auto;}

/* ── разворот страницы работы ──
   Слева читают, справа смотрят. Правая колонка стоит липко: лента превью
   едет вместе с чтением и не уходит вверх, пока глаз идёт по тексту.
   Превью нарочно одинаковыми плитками, подрезанными по центру, — ряд
   должен читаться как опись снятого, а не как галерея разной высоты;
   настоящий кадр целиком открывается по щелчку во весь экран. */
body[data-half="1"] .wgrid{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* поровну: слово и снятое равны */
  gap:clamp(26px,3vw,54px);
}
/* top:0 — чтобы верх ленты встал ровно по верху названия: при ненулевом
   отступе колонка сразу уезжала вниз на его величину, и верхняя черта
   разворота ломалась. */
body[data-half="1"] .wrail{position:sticky;top:0;align-self:start;display:grid;gap:14px;}
/* Превью по одному в ряд и во всю ширину колонки: двумя в ряд кадр
   уменьшался до ногтя, и работу в нём было не разглядеть. Пропорция у
   каждого своя — ничего не подрезаем; у вертикального только потолок по
   высоте, чтобы он не занял собой весь экран. */
body[data-half="1"] .wrail .gal{grid-template-columns:1fr;gap:12px;}
body[data-half="1"] .wrail .shot{background:rgba(255,255,255,.03);}
body[data-half="1"] .wrail .shot img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;}
body[data-half="1"] .wrail .shot.tall{justify-self:center;}
body[data-half="1"] .wrail .shot.tall img{width:auto;max-width:100%;max-height:62vh;}
body[data-half="1"] .wrail .win-hero{aspect-ratio:16 / 10;max-height:none;}
/* Страница-окно: проём — это сама работа, поэтому он занимает правую
   полосу целиком, во всю высоту текста рядом. Липкость тут не нужна:
   растянутой колонке некуда ехать, она и так всегда на виду. */
body[data-half="1"] .wrail.wlive{position:static;align-self:stretch;}
body[data-half="1"] .wrail.wlive .win-hero{aspect-ratio:auto;height:100%;min-height:62vh;}
/* В колонке мера строки уже задана самой колонкой — потолок в знаках
   тут только мешал бы ей заполниться. */
body[data-half="1"] .wtext .lead,
body[data-half="1"] .wtext .prose p,
body[data-half="1"] .wtext .facts dd{max-width:none;}
/* Узкому окну разворот не нужен: колонки встают друг под друга, и
   снимки снова идут лентой во всю ширину. */
@media (max-width:900px){
  body[data-half="1"] .wgrid{grid-template-columns:1fr;gap:30px;}
  body[data-half="1"] .wrail{position:static;}
  body[data-half="1"] .wrail .gal{grid-template-columns:1fr;gap:16px;}
  body[data-half="1"] .wrail .shot img{aspect-ratio:auto;object-fit:contain;}
}
/* Живая сцена у работы-окна стоит в том же ряду, что и снимки. */
.wshot{margin:0;}
.wnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:46px 0 0;padding-top:18px;border-top:1px solid var(--line);}
.wnext a{display:grid;gap:5px;color:var(--text);text-decoration:none;padding:6px 0;}
.wnext a:last-child{text-align:right;}
.wnext small{font-size:calc(9px + var(--fs-up));letter-spacing:.26em;text-transform:uppercase;color:var(--dim);}
.wnext span{font-size:calc(16px + var(--fs-up));font-weight:300;letter-spacing:.03em;}
.wnext a:hover span{color:#fff;}
@media (prefers-reduced-motion:reduce){ .tile-live i{animation:none;} }

/* Широкая страница оставляет слева ~430px: крупное имя туда не влезает и
   ложилось поверх текста. При чтении широкой страницы имя ужимается до
   колонки, а переключатель Portal/Index уходит — справа сверху стоит ✕. */
.sig b,.sig span{transition:font-size .6s cubic-bezier(.2,.8,.2,1);}
body[data-view="reading"][data-half="1"] .sig b{font-size:clamp(15px,1.45vw,21px);letter-spacing:.2em;}
body[data-view="reading"][data-half="1"] .sig span{font-size:9px;letter-spacing:.22em;max-width:34ch;}
body[data-view="reading"] .modes{opacity:0;visibility:hidden;pointer-events:none;}
.facts{border-top:0;padding-top:0;}
.facts div:first-child{border-top:1px solid var(--line);padding-top:16px;}
.facts dd{max-width:64ch;}

/* крутилки: заголовок группы — кнопка, группа раскрывается щелчком */
.panel .grp-btn{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.07);padding:10px 0 4px;margin:4px 0 0;
  cursor:pointer;text-align:left;font:inherit;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.panel .grp-btn:first-child{border-top:0;padding-top:2px;}
.panel .grp-btn:hover{color:var(--text);}
.panel .grp-btn i{font-style:normal;font-size:10px;opacity:.7;}
.panel .grp-body{display:grid;gap:10px;padding:6px 0 4px;}
.panel .grp-body[hidden]{display:none;}

/* ── пустые поля не видны, пока не включено редактирование ── */
body:not([data-edit="1"]) [data-k]:empty{display:none;}
body:not([data-edit="1"]) .fact-shown:has(dd:empty),
body:not([data-edit="1"]) .fact-tech:has(dd:empty){display:none;}
/* Подсказку в пустом поле рисует общее правило ниже, из атрибута
   data-ph. Отдельного правила для «Technique» тут нет нарочно: своё
   content всё равно проигрывало бы тому, общему, по весу селектора. */
body:not([data-edit="1"]) .facts:not(:has(dd:not(:empty))){display:none;}
body:not([data-edit="1"]) .meta:not(:has(span:not(:empty))){display:none;}

/* ── режим редактирования ── */
.edit-toggle{margin-left:auto;margin-right:10px;height:32px;padding:0 14px;border:1px solid var(--line);border-radius:1px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.edit-toggle:hover{color:var(--text);border-color:rgba(255,255,255,.3);}
body[data-edit="1"] .edit-toggle{color:#0b0d12;background:#cfd9ff;border-color:#cfd9ff;}
body[data-edit="1"] #reader-body [data-k]{outline:1px dashed rgba(160,180,255,.35);outline-offset:4px;border-radius:1px;cursor:text;min-height:1.2em;}
body[data-edit="1"] #reader-body [data-k]:hover{outline-color:rgba(160,180,255,.7);}
body[data-edit="1"] #reader-body [data-k]:focus{outline:1px solid #9fb4ff;background:rgba(120,140,255,.06);}
body[data-edit="1"] #reader-body [data-k]:empty::before{content:attr(data-ph);color:var(--dim);font-style:italic;}
body[data-edit="1"] .meta span{min-width:3ch;}
body[data-edit="1"] .meta span:empty{display:inline-block;}
#editbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px 10px 8px 16px;background:rgba(16,18,28,.92);border:1px solid rgba(160,180,255,.35);border-radius:2px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:11px;color:var(--muted);max-width:calc(100vw - 24px);}
#editbar b{font-weight:400;letter-spacing:.24em;text-transform:uppercase;font-size:9px;color:#cfd9ff;}
#editbar .eb-st{min-width:9ch;color:var(--dim);}
#editbar button{padding:6px 10px;border:1px solid var(--line);font-size:10px;letter-spacing:.12em;color:var(--text);border-radius:1px;}
#editbar button:hover{border-color:rgba(255,255,255,.35);}
#editbar[hidden]{display:none;}
.edm{margin:40px 0 0;padding:18px;border:1px dashed rgba(160,180,255,.35);background:rgba(120,140,255,.04);}
.edm h4{margin:18px 0 8px;font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--text);}
.edm h4 small{color:var(--dim);font-size:11px;margin-left:8px;}
.edm-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0;}
.edm label{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;}
.edm select,.edm input[type=text],.edm input[type=url]{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:12px;padding:6px 8px;border-radius:1px;min-width:0;}
.edm input[type=url]{flex:1 1 240px;}
.edm-list{display:grid;gap:6px;}
.edm-it{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:4px;border:1px solid rgba(255,255,255,.06);}
.edm-it.vid{grid-template-columns:64px 1fr auto;}
.edm-it img{width:64px;height:44px;object-fit:cover;display:block;}
.edm-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;}
.edm-btns{display:flex;gap:4px;}
.edm-btns button,.edm-row button,.edm-add{padding:6px 9px;border:1px solid var(--line);font-size:11px;color:var(--text);border-radius:1px;cursor:pointer;}
.edm-btns button.on{background:#cfd9ff;color:#0b0d12;border-color:#cfd9ff;}
.edm-btns button:hover,.edm-row button:hover,.edm-add:hover{border-color:rgba(255,255,255,.4);}
.edm-add{display:inline-block;margin-top:10px;}
.edm-note{font-size:11px;color:var(--dim);margin:8px 0 0;}
.edm-new{margin-top:16px;}
.edm-new input{flex:1 1 200px;}
body:not([data-edit="1"]) .edm-new{display:none;}
/* карточки снимков и видео: сетка, перетаскивание */
.edm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;}
.edm-grid.vids{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.edm-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:opacity .15s,border-color .15s;}
.edm-card.dragging{opacity:.35;}
.edm-card.drop-l{box-shadow:-3px 0 0 #9fc0ff;}
.edm-card.drop-r{box-shadow:3px 0 0 #9fc0ff;}
.edm-pic{position:relative;aspect-ratio:4 / 3;background:rgba(0,0,0,.35);overflow:hidden;display:grid;place-items:center;}
.edm-pic[draggable="true"]{cursor:grab;}
.edm-pic[draggable="true"]:active{cursor:grabbing;}
.edm-pic img,.edm-pic video{width:100%;height:100%;object-fit:cover;display:block;}
.edm-card.vid .edm-pic{aspect-ratio:16 / 9;}
.edm-card.vid .edm-pic video{object-fit:contain;background:#000;}
.edm-num{position:absolute;left:4px;top:4px;font-size:10px;line-height:1;color:#fff;padding:3px 5px;background:rgba(8,9,14,.75);}
.edm-tags{position:absolute;right:4px;top:4px;display:flex;gap:3px;}
.edm-tags b,.edm-grip b{font-weight:500;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 5px;background:#cfd9ff;color:#0b0d12;}
.edm-grip{cursor:grab;user-select:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:4px 6px;border:1px dashed rgba(255,255,255,.14);display:flex;gap:6px;align-items:center;}
.edm-grip:active{cursor:grabbing;}
.edm-card input[type=text]{width:100%;}
.edm-card .edm-btns{flex-wrap:wrap;}
.edm-card .edm-btns{gap:3px;}
.edm-card .edm-btns button{padding:5px 6px;font-size:10px;}
.edm .edm-add{width:fit-content;}
.edm-pl{flex-wrap:wrap;}
.edm-dup{margin:0 0 10px;}
.edm-media{margin-top:6px;}
.edm-grid.file-over{outline:2px dashed #9fc0ff;outline-offset:4px;}
.edm-empty{grid-column:1/-1;margin:0;padding:22px;border:1px dashed rgba(255,255,255,.15);font-size:12px;color:var(--dim);text-align:center;}
.edm-loop{font-size:10px !important;}
.edm-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;margin:8px 0 12px;align-items:end;}
.edm-f{display:grid !important;gap:4px !important;}
.edm-f span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.edm-f input{width:100%;}
.edm-line{display:grid;grid-template-columns:1fr 2fr auto auto;gap:6px;margin:0 0 6px;}
.edm-line:has(input[data-f="kind"]){grid-template-columns:110px 2fr 1fr auto auto;}
.edm-line input,.edm-skill input,.edm-skill textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:12px;padding:6px 8px;border-radius:1px;min-width:0;}
.edm-line button{padding:4px 8px;border:1px solid var(--line);font-size:11px;color:var(--text);}
.edm-skill{display:grid;grid-template-columns:200px 1fr auto;gap:8px;margin:0 0 10px;align-items:start;}
.edm-skill textarea{resize:vertical;line-height:1.5;}
.edm-hid{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);padding:4px 8px;border:1px solid var(--line);}
.edm-hid a{color:var(--muted);font-size:11px;}
.is-hidden{opacity:.45;}
.list li{position:relative;}
.list-tools{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;}
.essay{position:relative;}
.essay .list-tools{top:8px;transform:none;}
.slot-shape{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(16,18,28,.9);
  border:1px solid rgba(160,180,255,.35);color:#dfe5ff;font-size:10px;padding:3px 6px;}
body:not([data-edit="1"]) .slot-shape{display:none;}
@media (max-width:760px){ .edm-line,.edm-skill{grid-template-columns:1fr;} }
/* полоса редактора — в левой колонке, под списком разделов, чтобы не закрывать текст */
#editbar{left:var(--gut);transform:none;bottom:18px;max-width:min(400px,calc(100vw - 24px));}
@media (max-width:760px){ #editbar{top:10px;bottom:auto;left:10px;right:10px;max-width:none;} }
#editbar{max-width:min(340px,calc(100vw - 24px));}

/* окно в сцену: ни стекла, ни рамки — только тонкая кромка проёма */
.tile-win,.win-hero{position:relative;background:transparent;box-shadow:inset 0 0 0 1px rgba(200,215,255,.22);}
.tile-win canvas,.win-hero canvas{display:block;width:100%;height:100%;}
.tile-win b{position:absolute;bottom:10px;left:12px;font-weight:400;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(230,236,255,.85);text-shadow:0 0 12px rgba(0,0,0,.8);}
.win-hero{aspect-ratio:16 / 7;max-height:62vh;width:100%;}
.tile:hover .tile-win{box-shadow:inset 0 0 0 1px rgba(200,215,255,.5);}
.tile-empty{display:grid;place-items:center;border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.015);}
.tile-empty b{font-weight:400;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);}

/* ── редактор: всё остальное ── */
.rows em,.ed h3 em{font-style:normal;}
body[data-edit="1"] .sig b[contenteditable="true"],body[data-edit="1"] .sig span[contenteditable="true"]{outline:1px dashed rgba(160,180,255,.45);outline-offset:4px;cursor:text;}
.edm-new input,.edm-row input[type=text]{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);font:inherit;font-size:12px;padding:7px 9px;border-radius:1px;}
.edm-new button{padding:7px 10px;border:1px solid var(--line);font-size:11px;color:var(--text);border-radius:1px;}
.tile-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.tile-tools button,.ser-tools button,.slot-up,.shot-add,.row-add{padding:4px 8px;border:1px solid rgba(160,180,255,.35);background:rgba(16,18,28,.85);
  font-size:10px;letter-spacing:.08em;color:#dfe5ff;border-radius:1px;cursor:pointer;}
.tile-tools button:hover,.ser-tools button:hover,.slot-up:hover,.shot-add:hover,.row-add:hover{border-color:#cfd9ff;}
.ser-tools{display:flex;gap:6px;margin:0 0 10px;}
[data-mk]{position:relative;}
.slot-up{position:absolute;top:10px;right:10px;z-index:3;}
.slot-x{right:auto;left:10px;}
.slot-msg{position:absolute;bottom:8px;left:10px;font-size:11px;color:#dfe5ff;z-index:3;}
.shots .shot{position:relative;}
.shot-x{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;background:rgba(16,18,28,.85);
  border:1px solid rgba(160,180,255,.4);color:#dfe5ff;font-size:11px;cursor:pointer;z-index:2;}
.shot-add{align-self:center;justify-self:start;margin:6px 0;}
.rows [data-ri]{position:relative;}
.row-x{position:absolute;right:0;top:4px;width:22px;height:22px;border:1px solid var(--line);color:var(--muted);font-size:11px;}
/* Инструменты строки: поднять, опустить, убрать. Стоят у правого края и
   проявляются при наведении на строку — в покое список остаётся списком. */
.row-tools{position:absolute;right:0;top:3px;display:flex;gap:3px;opacity:.25;transition:opacity .25s ease;}
.rows [data-ri]:hover .row-tools,.row-tools:focus-within{opacity:1;}
.row-tools button{width:22px;height:22px;display:grid;place-items:center;line-height:1;
  border:1px solid rgba(160,180,255,.3);background:rgba(16,18,28,.85);color:#dfe5ff;font-size:11px;border-radius:1px;cursor:pointer;}
.row-tools button:hover{border-color:#cfd9ff;}
.row-add{margin:4px 0 8px;}
body:not([data-edit="1"]) .shots:empty{display:none;}

/* этикетка работы: техника / год / площадка — город, страна */
.wlabel{margin:6px 0 30px;display:grid;gap:5px;}
.wlabel p{margin:0;}
.wlabel .lb-m{font-size:calc(15px + var(--fs-up));font-weight:300;letter-spacing:.02em;color:#d6dadd;}
.wlabel .lb{font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
body[data-edit="1"] .wlabel span{display:inline-block;min-width:4ch;}
.tile-m{order:0;}

/* ── WRITING ── */
.essays{display:grid;gap:34px;margin-top:10px;}
.essay{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:center;color:var(--text);text-decoration:none;
  padding-bottom:30px;border-bottom:1px solid var(--line);}
.essay-img{display:block;aspect-ratio:3 / 2;overflow:hidden;background:rgba(255,255,255,.03);}
.essay-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.86;transition:opacity .35s,transform .7s cubic-bezier(.2,.8,.2,1);}
.essay:hover .essay-img img{opacity:1;transform:scale(1.03);}
.essay-t{display:grid;gap:12px;}
.essay-pub{font-size:calc(9px + var(--fs-up));letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.essay-h{font-size:calc(clamp(20px,2vw,26px) + var(--fs-up));font-weight:300;line-height:1.25;letter-spacing:.02em;}
.essay-l{font-size:calc(14px + var(--fs-up));line-height:1.6;color:#bfc4c7;}
.essay-go{font-size:calc(10px + var(--fs-up));letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.essay:hover .essay-go{color:var(--text);}
@media (max-width:900px){ .essay{grid-template-columns:1fr;} }

.a-title{font-size:calc(clamp(28px,3.6vw,46px) + var(--fs-up));line-height:1.1;text-wrap:balance;}
.a-sub{max-width:60ch;}
.a-by{font-size:calc(10px + var(--fs-up));letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 34px;}
.article{max-width:none;}
.article .a-p,.article .prose p{max-width:66ch;color:#c9ced1;font-size:calc(15.5px + var(--fs-up));line-height:1.75;margin:0 0 18px;}
.a-intro{max-width:56ch;font-size:calc(13px + var(--fs-up));line-height:1.75;letter-spacing:.14em;text-transform:uppercase;color:#e6e9ff;margin:0 0 30px;}
.a-h2{font-weight:300;font-size:calc(clamp(24px,2.8vw,34px) + var(--fs-up));letter-spacing:.06em;text-transform:uppercase;margin:58px 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--line);}
.a-h3{font-weight:400;font-size:calc(12px + var(--fs-up));letter-spacing:.24em;text-transform:uppercase;color:#cfd9ff;margin:36px 0 12px;max-width:60ch;line-height:1.6;}
.a-h4{font-weight:400;font-size:calc(15px + var(--fs-up));letter-spacing:.14em;text-transform:uppercase;margin:24px 0 8px;}
.a-quote{margin:34px 0;padding:6px 0 6px 22px;border-left:1px solid #9fb4ff;max-width:46ch;
  font-size:calc(clamp(18px,1.9vw,22px) + var(--fs-up));font-weight:300;line-height:1.5;color:#eef1ff;}
.a-fig{margin:0;}
.a-fig .shot{width:100%;}
.a-fig img{width:100%;height:auto;display:block;}
.a-fig figcaption{font-size:calc(11px + var(--fs-up));color:var(--dim);margin-top:8px;letter-spacing:.06em;}
.a-wide{margin:30px 0;}
.a-row{display:grid;gap:6px;margin:30px 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start;}
.a-works{display:grid;gap:44px 30px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));margin:30px 0 20px;}
.a-work h4{font-weight:400;font-size:calc(14px + var(--fs-up));letter-spacing:.16em;text-transform:uppercase;margin:14px 0 6px;line-height:1.45;}
.a-work-by{font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.a-note{display:inline-block;font-size:calc(10px + var(--fs-up));letter-spacing:.14em;text-transform:uppercase;color:#0b0d12;background:#cfd9ff;padding:3px 7px;margin:0 0 10px;}
.a-work .prose p{font-size:calc(14px + var(--fs-up));line-height:1.65;margin:0 0 12px;}
.a-work-imgs{display:grid;gap:4px;}
.a-work-imgs.n2{grid-template-columns:1fr 1fr;}
.a-pdf{margin:46px 0 0;padding:18px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;}
.a-pdf a{font-size:calc(11px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--text);text-decoration:none;border:1px solid var(--line);padding:10px 14px;}
.a-pdf a:hover{border-color:rgba(255,255,255,.4);}
.a-pdf span{font-size:calc(11px + var(--fs-up));color:var(--dim);}
.a-row{max-width:980px;}

/* ── журнал: листалка разворотов ── */
.mag{margin:8px 0 34px;}
.mag-stage{position:relative;background:#000;user-select:none;touch-action:pan-y;}
.mag-page{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;cursor:pointer;}
.mag-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:1px solid rgba(255,255,255,.18);
  background:rgba(7,8,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:18px;opacity:.75;transition:opacity .2s;}
.mag-nav:hover{opacity:1;}
.mag-nav.prev{left:10px;} .mag-nav.next{right:10px;}
.mag-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0;border-bottom:1px solid var(--line);}
.mag-part{font-size:calc(9px + var(--fs-up));letter-spacing:.28em;text-transform:uppercase;color:#cfd9ff;}
.mag-count{font-size:calc(11px + var(--fs-up));letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:auto;}
.mag-full,.mag-pdf{font-size:calc(10px + var(--fs-up));letter-spacing:.2em;text-transform:uppercase;color:var(--text);border:1px solid var(--line);padding:7px 11px;text-decoration:none;}
.mag-full:hover,.mag-pdf:hover{border-color:rgba(255,255,255,.4);}
.mag-thumbs{display:flex;gap:6px;overflow-x:auto;padding:12px 0 6px;scrollbar-width:thin;align-items:center;}
.mag-th{flex:none;padding:0;border:1px solid transparent;opacity:.5;transition:opacity .2s,border-color .2s;}
.mag-th img{display:block;height:58px;width:auto;}
.mag-th:hover{opacity:.85;} .mag-th.on{opacity:1;border-color:#cfd9ff;}
.mag-sep{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding:0 4px;
  border-left:1px solid var(--line);margin-left:6px;}
/* полный экран: журнал поверх всего */
.mag.full{position:fixed;inset:0;z-index:90;margin:0;background:rgba(5,6,8,.97);display:grid;grid-template-rows:1fr auto auto;padding:14px clamp(10px,3vw,40px);}
.mag.full .mag-stage{background:none;display:grid;place-items:center;min-height:0;}
.mag.full .mag-page{max-height:calc(100vh - 150px);width:auto;max-width:100%;}
.mag.full .mag-bar{border:0;}