/* Мастерская Сергея Козловского — стили поверх собранного Tailwind.
   Основа — шаблон mestudio-photo; правки шаблона помечены «шаблон: …». */

:root {
  --ink: #050609;
  --paper: #f2f2f2;
  --stone: #d9d9d9;
  --mute: #adadad;
  /* красный лабораторного фонаря — снят с кадров ролика мастерской */
  --ac: #e4432a;
  --ac-rgb: 228, 67, 42;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.44, 0, .13, .96);
}

html { scroll-padding-top: 4rem; -webkit-text-size-adjust: 100%; }
/* шаблон: overflow-x:hidden на body не спасал — на телефоне страница была шире экрана */
body { background: var(--ink); color: #fff; font-family: var(--sans); overflow-x: clip; }
main, footer { overflow-x: clip; }
::selection { background: var(--ac); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
img, video { display: block; }

.c-ac { color: var(--ac); }
.bg-ac { background-color: var(--ac); }
.bg-ink { background-color: var(--ink); }
.bg-paper { background-color: var(--paper); }
.bg-stone { background-color: var(--stone); }
.c-ink { color: var(--ink); }
.c-mute { color: var(--mute); }

/* ---------- типографика ----------
   шаблон: трекинг −0.08em и интерлиньяж 0.78–0.82 подобраны под латиницу —
   в кириллице слипаются буквы и строки (Й, Д, Ц, Щ, р, у). Кегли заданы от ширины окна
   под длину русских слов, а не ступенями шаблона. */
.mono { font-family: var(--mono); font-size: .75rem; line-height: 1.6; letter-spacing: .02em; text-transform: uppercase; }
.t-xl, .t-lg, .t-md, .t-word { font-weight: 600; text-transform: uppercase; letter-spacing: -.05em; text-wrap: balance; }
.t-xl { font-size: clamp(2.5rem, 7.4vw, 8rem); line-height: .93; }
.t-lg { font-size: clamp(2.1rem, 5.3vw, 5.75rem); line-height: .95; }
.t-md { font-size: clamp(1.7rem, 3.6vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.t-lead { font-size: clamp(1.3rem, 2.5vw, 2.75rem); line-height: 1.12; letter-spacing: -.03em; text-wrap: pretty; }
.t-body { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.35; text-wrap: pretty; }
.t-note { font-size: 1rem; line-height: 1.4; }
.t-low { text-transform: none; }
/* огромное слово: кегль приходит в --fs, строка не переносится */
.t-word { font-size: var(--fs); line-height: .86; letter-spacing: -.06em; white-space: nowrap; }
.dim { color: #6e6e6e; }
/* слово с дефисом не рвётся по дефису («чему-/то» на телефоне) */
.nb { white-space: nowrap; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .7rem 1.15rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; transition: background-color .25s, color .25s, border-color .25s;
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn-ac { background: var(--ac); border-color: var(--ac); color: var(--ink); }
.btn-ac:hover { background: #fff; border-color: #fff; }
.btn-line:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover { background: transparent; color: var(--ink); }
.btn-inkline:hover { background: var(--ink); color: #fff; }
.link { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- зерно ----------
   шаблон: зерном была картинка на весь экран; здесь — шум SVG, без файла */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- шапка ----------
   шаблон: шапка красилась через mix-blend-difference и на акцентных секциях становилась голубой,
   а текст секций проезжал прямо под ней. Цвет ставит скрипт по data-tone секции под шапкой,
   под шапкой — размытие фона, которое гасит проезжающий текст на любой заливке. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3.75rem; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; color: #fff; transition: color .3s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -1.25rem 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
}
.site-header[data-tone="light"], .site-header[data-tone="accent"] { color: var(--ink); }
/* одного размытия мало: над фотографиями внутри секций тёмные пункты шапки пропадали на тёмных кадрах,
   белые — на светлых. Под шапкой вуаль в цвет секции (на первом экране, tone="photo", её нет);
   у светлых секций два фона (#f2f2f2 и #d9d9d9) — цвет вуали средний между ними */
.site-header::before { transition: background-color .3s; }
.site-header[data-tone="dark"]::before { background-color: rgba(5, 6, 9, .62); }
.site-header[data-tone="light"]::before { background-color: rgba(230, 230, 230, .68); }
.site-header[data-tone="accent"]::before { background-color: rgba(var(--ac-rgb), .7); }
.site-header.is-open { color: var(--ink); }
.site-header.is-open::before { display: none; }
.logo { font-size: 1rem; font-weight: 600; letter-spacing: -.06em; text-transform: lowercase; }
.site-nav { display: none; align-items: center; gap: 1.15rem; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.site-nav a { transition: translate .2s; }
.site-nav a:hover { translate: 0 -2px; }
.site-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.menu-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem; }
.menu-btn svg { width: 1.6rem; height: 1.6rem; }
.menu-btn .x { display: none; }
.is-open .menu-btn .x { display: block; }
.is-open .menu-btn .bars { display: none; }
@media (min-width: 900px) {
  .site-header { padding: 0 1.5rem; }
  .site-nav { display: flex; }
  .menu-btn { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: 85; background: var(--ac); color: var(--ink);
  padding: 5.5rem 1.25rem 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .25s; }
.menu-links { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, .25); }
.menu-links a {
  border-bottom: 1px solid rgba(0, 0, 0, .25); padding: .7rem 0;
  font-size: clamp(2.2rem, 11vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -.05em;
}
html.menu-open { overflow: hidden; }

.rail { position: fixed; right: 0; top: 0; z-index: 95; width: 4px; height: 100vh; background: rgba(255, 255, 255, .1); }
.rail span { display: block; width: 100%; height: 0; background: var(--ac); }
.to-top {
  position: fixed; bottom: 1rem; left: 50%; translate: -50% 0; z-index: 84; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .75rem; transition: opacity .3s, visibility .3s;
}
.to-top svg { width: 1rem; height: 1rem; }
/* на телефоне кнопка по центру закрывала текст — уходит в правый угол */
@media (max-width: 899px) { .to-top { left: auto; right: .75rem; translate: none; bottom: .75rem; } }
/* на первом экране кнопка «наверх» не нужна и закрывала бы текст */
.to-top.is-hidden { opacity: 0; visibility: hidden; }

.skip { position: fixed; left: 1.25rem; top: .75rem; z-index: 100; translate: 0 -6rem; background: var(--ac); color: var(--ink); padding: .5rem 1rem; font-size: .75rem; font-weight: 600; }
.skip:focus { translate: 0 0; }

/* ---------- появление ---------- */
.js .reveal, .js .blur-reveal {
  opacity: 0; translate: 0 2.5rem;
  transition: opacity 1.1s var(--ease), translate 1.1s var(--ease), filter 1.1s cubic-bezier(.09, .62, .56, 1);
}
.js .blur-reveal { filter: blur(.625rem); }
.js .reveal.is-in, .js .blur-reveal.is-in { opacity: 1; translate: 0 0; filter: none; }

/* ---------- первый экран ----------
   Сцена шаблона: липкий экран в высокой обёртке, все слои — анимации на паузе,
   которые перематывает переменная --p (0…1, ставит скрипт по прокрутке).
   шаблон: при p = 0 были скрыты и слово, и текст, кнопки не было вовсе; видео не грузилось.
   Здесь первое слово, заголовок и кнопки видны сразу, текст остаётся на экране всю сцену. */
.stage { position: relative; height: 420svh; background: #000; }
html:not(.js) .stage { height: 100svh; }
.hero {
  --p: 0; position: sticky; top: 0; height: 100svh; min-height: 30rem; overflow: hidden; background: #000;
  contain: paint; isolation: isolate;
}
.hero-cam, .hero-grade, .hero-word, .hero-meta, .hero-index, .hero-rays, .hero-fog, .hero-dust, .hero-vignette, .hero::after {
  animation-duration: 1s; animation-timing-function: linear; animation-delay: calc(var(--p) * -1s);
  animation-play-state: paused; animation-fill-mode: both;
}
.hero-cam { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 45%; animation-name: heroCam; will-change: transform, filter; }
.hero-cam img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.hero-grade { position: absolute; inset: 0; z-index: 1; animation-name: heroGrade; }
.hero-word {
  position: absolute; z-index: 6; white-space: nowrap; font-weight: 600; line-height: .8; letter-spacing: -.065em;
  color: var(--ac); font-size: min(27vw, 37svh); text-shadow: 0 0 2.5rem rgba(var(--ac-rgb), .18); will-change: transform, opacity, filter;
}
.hero-word b { display: block; font-weight: inherit; }
.hero-word-1 { left: 1.25rem; top: 11%; animation-name: heroWord1; }
.hero-word-2 { left: 50%; top: 34%; animation-name: heroWord2; }
.hero-word-3 { right: 1.25rem; bottom: 13%; animation-name: heroWord3; }
.hero-copy { position: absolute; z-index: 10; left: 1.25rem; right: 1.25rem; bottom: 2rem; max-width: 36rem; }
.hero-title { font-size: clamp(2rem, min(4.6vw, 7.6svh), 4.5rem); font-weight: 600; line-height: .96; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 0 0 2rem rgba(0, 0, 0, .55); }
.hero-sub { margin-top: 1.1rem; text-shadow: 0 0 1rem rgba(0, 0, 0, .8); }
.hero-cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-meta { position: absolute; z-index: 10; right: 1.5rem; top: 5.5rem; display: none; animation-name: heroMeta; text-shadow: 0 0 1rem rgba(0, 0, 0, .8); }
.hero-index {
  position: absolute; z-index: 10; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: none; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .3); padding-top: .5rem; animation-name: heroIndex;
}
.hero-rays {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none; mix-blend-mode: screen; filter: blur(1.5rem); transform-origin: 72% 4%;
  background: conic-gradient(from 205deg at 72% 4%, transparent 0deg, rgba(255, 255, 255, .14) 8deg, transparent 20deg, rgba(var(--ac-rgb), .1) 28deg, transparent 43deg);
  animation-name: heroRays;
}
.hero-fog {
  position: absolute; inset: auto -25% -28%; z-index: 3; height: 58%; pointer-events: none; filter: blur(3rem); mix-blend-mode: screen;
  background: radial-gradient(ellipse at 30% 55%, rgba(255, 255, 255, .16), transparent 50%), radial-gradient(ellipse at 72% 60%, rgba(var(--ac-rgb), .14), transparent 48%);
  animation-name: heroFog;
}
.hero-dust { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; animation-name: heroDustField; }
.hero-dust i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(255, 255, 255, .75); box-shadow: 0 0 .8rem rgba(var(--ac-rgb), .65); opacity: 0;
  animation: heroDust 1s linear calc(var(--p) * -1s) paused both;
}
.hero-dust i:nth-child(1){--x:8%;--y:78%;--s:2px;--d:-8vw}.hero-dust i:nth-child(2){--x:17%;--y:44%;--s:3px;--d:6vw}.hero-dust i:nth-child(3){--x:27%;--y:68%;--s:1px;--d:-4vw}.hero-dust i:nth-child(4){--x:38%;--y:24%;--s:2px;--d:8vw}.hero-dust i:nth-child(5){--x:48%;--y:83%;--s:4px;--d:-7vw}.hero-dust i:nth-child(6){--x:58%;--y:35%;--s:2px;--d:5vw}.hero-dust i:nth-child(7){--x:67%;--y:74%;--s:3px;--d:-5vw}.hero-dust i:nth-child(8){--x:76%;--y:18%;--s:2px;--d:7vw}.hero-dust i:nth-child(9){--x:84%;--y:58%;--s:4px;--d:-6vw}.hero-dust i:nth-child(10){--x:92%;--y:82%;--s:2px;--d:4vw}.hero-dust i:nth-child(11){--x:33%;--y:91%;--s:3px;--d:-9vw}.hero-dust i:nth-child(12){--x:71%;--y:92%;--s:1px;--d:8vw}
.hero-vignette {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; animation-name: heroVignette;
  background: radial-gradient(circle at 50% 44%, transparent 32%, rgba(0, 0, 0, .16) 68%, rgba(0, 0, 0, .62) 118%),
              linear-gradient(to top, rgba(0, 0, 0, .7), transparent 46%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle at 52% 45%, rgba(255, 255, 255, .26), rgba(var(--ac-rgb), .14) 22%, transparent 58%);
  animation-name: heroFlash;
}

@keyframes heroCam {
  0% { transform: scale(1.03); filter: brightness(.86) contrast(1.02) }
  22% { transform: translate3d(-1.2%, 1%, 0) scale(1.1) rotate(-.25deg); filter: brightness(.94) }
  42% { transform: translate3d(1.6%, -1.2%, 0) scale(1.16) rotate(.3deg); filter: brightness(.8) }
  49% { transform: translate3d(.6%, .3%, 0) scale(1.22) rotate(.35deg); filter: brightness(1.08) blur(1.2px) }
  52% { transform: translate3d(-.6%, -.3%, 0) scale(1.2) rotate(-.3deg); filter: brightness(.88) }
  76% { transform: translate3d(2%, 1%, 0) scale(1.14) rotate(.2deg); filter: brightness(.84) }
  100% { transform: scale(1.08); filter: brightness(.66) }
}
@keyframes heroGrade {
  0% { background: rgba(0, 0, 0, .12) } 24% { background: rgba(0, 0, 0, .3) } 49% { background: rgba(var(--ac-rgb), .1) }
  54% { background: rgba(0, 0, 0, .36) } 78% { background: rgba(0, 0, 0, .18) } 100% { background: rgba(0, 0, 0, .5) }
}
@keyframes heroWord1 {
  0% { opacity: 1; transform: none; filter: none }
  16% { opacity: 1; transform: translate3d(-1.5vw, -1vh, 0) scale(1.03); filter: none }
  30%, 100% { opacity: 0; transform: translate3d(-24vw, -5vh, 0) scale(1.14); filter: blur(.6rem) }
}
@keyframes heroWord2 {
  0%, 22% { opacity: 0; transform: translate3d(-50%, -40vh, 0) scale(.9) rotate(-2deg); filter: blur(1.4rem) }
  35% { opacity: 1; transform: translate3d(-50%, 0, 0); filter: none }
  50% { opacity: 1; transform: translate3d(-50%, 2vh, 0) scale(1.07) rotate(.3deg); filter: none }
  63%, 100% { opacity: 0; transform: translate3d(-50%, 22vh, 0) scale(1.2) rotate(1deg); filter: blur(.8rem) }
}
/* шаблон: третье слово тоже улетало, сцена кончалась пустым кадром — здесь оно остаётся до конца */
@keyframes heroWord3 {
  0%, 52% { opacity: 0; transform: translate3d(-40vw, 12vh, 0) scale(.9); filter: blur(1.3rem) }
  66% { opacity: 1; transform: none; filter: none }
  100% { opacity: 1; transform: translate3d(.5vw, -2vh, 0) scale(1.05); filter: none }
}
@keyframes heroIndex { 0% { opacity: 1 } 78% { opacity: 1; transform: none } 92%, 100% { opacity: 0; transform: translate3d(0, 1.5rem, 0) } }
@keyframes heroMeta {
  0%, 30% { opacity: 0; transform: translate3d(2rem, -1rem, 0); filter: blur(.5rem) }
  42%, 100% { opacity: 1; transform: none; filter: none }
}
@keyframes heroRays {
  0% { opacity: .1; transform: rotate(-8deg) scale(.9) } 23% { opacity: .5; transform: rotate(-2deg) scale(1.05) }
  49% { opacity: .9; transform: rotate(3deg) scale(1.18) } 66% { opacity: .25; transform: rotate(7deg) scale(1.1) }
  86% { opacity: .6; transform: rotate(11deg) scale(1.24) } 100% { opacity: .12; transform: rotate(14deg) scale(1.3) }
}
@keyframes heroFog {
  0% { opacity: .1; transform: translate3d(-8%, 8%, 0) scale(.9) } 40% { opacity: .4; transform: translate3d(7%, -5%, 0) scale(1.2) }
  72% { opacity: .22; transform: translate3d(-3%, -14%, 0) scale(1.35) } 100% { opacity: .5; transform: translate3d(10%, -22%, 0) scale(1.55) }
}
@keyframes heroDustField { 0% { opacity: .15 } 12% { opacity: .35 } 50% { opacity: .85 } 86% { opacity: .4 } 100% { opacity: 0 } }
@keyframes heroDust {
  0% { opacity: 0; transform: translate3d(0, 12vh, 0) scale(.6) } 18% { opacity: .15 }
  52% { opacity: .8; transform: translate3d(var(--d), -10vh, 0) scale(1.2) }
  100% { opacity: 0; transform: translate3d(calc(var(--d) * -1), -38vh, 0) scale(.4) }
}
@keyframes heroVignette { 0% { opacity: .8 } 32% { opacity: .6 } 49% { opacity: .5 } 54% { opacity: .9 } 78% { opacity: .65 } 100% { opacity: 1 } }
@keyframes heroFlash {
  0%, 44% { opacity: 0; clip-path: inset(50% 0) } 48% { opacity: .12; clip-path: inset(22% 0) } 49.5% { opacity: .45; clip-path: inset(0) }
  51% { opacity: .16; clip-path: inset(8% 0) } 55%, 100% { opacity: 0; clip-path: inset(50% 0) }
}

/* вход при загрузке — на внутренних обёртках: сами слои заняты анимацией прокрутки */
.js .hero-in { animation: heroIn .9s cubic-bezier(.15, .77, .56, 1) both; animation-delay: var(--d, 0s); }
@keyframes heroIn { from { opacity: 0; transform: translate3d(var(--from, 0), 1.25rem, 0); filter: blur(.5rem) } to { opacity: 1; transform: none; filter: none } }

@media (min-width: 900px) {
  .hero-word-1 { left: 1rem; top: max(9%, 4rem); }
  .hero-word-3 { right: 1.5rem; bottom: 11%; }
  .hero-copy { left: 1.5rem; bottom: 6.25rem; }
  .hero-meta { display: block; }
  .hero-index { display: grid; }
}
@media (max-width: 899px) {
  .stage { height: 360svh; }
  .hero-cam img { object-position: 50% 22%; }
  .hero-word { font-size: min(27vw, 26svh); }
  .hero-word-1 { top: 5.25rem; }
  .hero-word-2 { top: 30%; }
  .hero-word-3 { bottom: auto; top: 46%; }
  .hero-rays { inset: -10% -70%; transform-origin: 75% 8%; }
  .hero-fog { height: 48%; }
}
@media (max-height: 560px) and (min-width: 900px) {
  .hero-title { font-size: 1.9rem; }
  .hero-sub { display: none; }
}

/* ---------- кадры с подписью у курсора ----------
   шаблон: подпись под кадром лежала внутри рамки с обрезкой и была срезана;
   на тач-экранах и с клавиатуры подписи не было вовсе. */
.shot { position: relative; outline: none; }
.shot-frame { position: relative; overflow: hidden; background: #0c0d10; }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: scale .7s, translate .7s; }
.shot-label {
  position: absolute; left: 0; top: 0; z-index: 2; max-width: 16rem; padding: .7rem .8rem; pointer-events: none;
  background: #fff; color: #000; opacity: 0; transition: opacity .3s;
}
.shot-label.is-ac { background: var(--ac); }
.shot-label b { display: block; font-weight: 500; }
.shot-label span { display: block; margin-top: .25rem; opacity: .75; }
.shot:focus-visible .shot-label { opacity: 1; }
.shot:focus-visible .shot-frame { outline: 2px solid var(--ac); outline-offset: 3px; }
.shot figcaption { margin-top: .75rem; color: var(--mute); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .shot figcaption { display: none; } }

/* ---------- светлый блок о технологии ----------
   шаблон: «PERSPECTIVE» вылезало из колонки, на телефоне сетка без заданных колонок растягивала страницу */
/* :where — нулевая специфичность, чтобы утилиты Tailwind (grid-cols-2 и т. п.) перебивали одну колонку */
:where(.cols) { display: grid; grid-template-columns: minmax(0, 1fr); }
:where(.cols) > * { min-width: 0; }

/* ---------- натюрморты: коллаж ---------- */
.collage { position: relative; min-height: 34rem; overflow: hidden; background: #000; }
.collage img { position: absolute; object-fit: cover; }
.collage .c1 { left: 0; top: 0; width: 56%; height: 62%; }
.collage .c2 { right: 0; top: 14%; width: 40%; height: 46%; }
.collage .c3 { left: 6%; bottom: 0; width: 62%; height: 32%; object-position: 50% 42%; }
.collage .c4 { right: 4%; bottom: 5%; width: 30%; height: 30%; }
.collage-word { position: absolute; left: 1.25rem; top: 56%; z-index: 2; font-size: clamp(2.2rem, 6vw, 6rem); font-weight: 600; letter-spacing: -.06em; line-height: 1; color: var(--ac); }
@media (min-width: 900px) { .collage { min-height: 46rem; } }

/* ---------- направления ----------
   шаблон: описания неактивных строк были #292929 по чёрному — их нельзя прочитать */
.archive-row { transition: background-color .5s; }
.archive-row .archive-description { color: #7c7c7c; translate: 0 .75rem; transition: color .6s, translate .6s; }
.archive-row.is-active { background: rgba(255, 255, 255, .03); }
.archive-row.is-active .archive-description, .archive-row:hover .archive-description, .archive-row:focus-within .archive-description { color: var(--mute); translate: 0 0; }
html:not(.js) .archive-row .archive-description { color: var(--mute); translate: 0 0; }

/* ---------- бегущая строка с именем ----------
   шаблон: слово стояло на месте и обрезалось краем экрана */
.band { overflow: hidden; border-block: 1px solid rgba(0, 0, 0, .2); padding-block: 2.2rem; }
.band-track { display: flex; width: max-content; animation: band 38s linear infinite; }
.band-track span { padding-right: .35em; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- о мастере: «помехи» на кадре ---------- */
.glitch { position: relative; overflow: hidden; background: #0c0d10; }
.glitch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.glitch .glitch-layer { opacity: .28; mix-blend-mode: screen; transition: opacity .5s; }
.glitch .glitch-layer + .glitch-layer { opacity: .2; mix-blend-mode: difference; }
.glitch::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; transition: opacity .5s; background: repeating-linear-gradient(0deg, transparent, transparent .2rem, rgba(255, 255, 255, .05) .25rem); }
.glitch:hover .glitch-layer, .glitch:hover::after { opacity: 0; }
html:not(.js) .glitch-layer { display: none; }

/* ---------- подвал ---------- */
.contact-big { display: block; max-width: 100%; font-weight: 600; line-height: 1; letter-spacing: -.05em; overflow-wrap: anywhere; }
.contact-big:hover { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .06em; }
.copy-btn { display: inline-flex; align-items: center; gap: .4rem; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.copy-btn svg { width: .9rem; height: .9rem; }
/* огромное имя стоит в обёртке с обрезкой (низ букв срезан линией — так задумано), но при интерлиньяже .8
   обёртка срезала и кратку у «Й»: читалось «КОЗЛОВСКИИ». Поле сверху — под кратку */
footer .t-word { padding-top: .16em; }

/* ---------- уменьшенное движение ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .stage { height: 100svh; }
  .hero { position: relative; }
  .hero-cam, .hero-grade, .hero-word, .hero-meta, .hero-index, .hero-vignette, .hero-in, .js .hero-in { animation: none !important; }
  .hero-rays, .hero-fog, .hero-dust, .hero::after { display: none; }
  /* без прокрутки сцены на экране остаётся одно слово — показываем его целиком и тише */
  .hero-word-2, .hero-word-3 { display: none; }
  .hero-word-1 { opacity: .92; }
  .js .reveal, .js .blur-reveal { opacity: 1; translate: 0 0; filter: none; transition: none; }
  .band-track { animation: none; }
  .glitch-layer, .glitch::after { display: none; }
  .shot-frame img { transition: none; }
}