/* Дополнения нового сайта (этап C, 5.10.2026). Остальные стили перенесены из прототипа с изумрудной гаммой. */

/* Блок «Works» в шапке компактнее (замечание Андрея 5.10): тот же шрифт и цвета, меньше размер */
.works-panel{left:auto;width:min(560px,calc(100vw - 2 * var(--pad)));padding:20px 26px 14px}
.works-panel .eyebrow{font-size:10px}
.works-links{column-gap:28px;margin-top:8px}
.works-links a{font-size:15px;padding:11px 0}
.works-links a span{font-size:15px}

/* Страница работы: обложка, если галереи ещё нет */
.project-cover{margin:28px 0 56px}
.project-cover img{width:100%;max-height:72vh;object-fit:cover;display:block}
.project-cover.is-contain img{object-fit:contain;background:#c5c3b6;max-height:60vh}
.project-cover figcaption{font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.04em}
.project-fulltitle{color:var(--muted);font-size:14px;margin-top:8px}
.project-pending{color:var(--muted);font-style:italic}
.project-myrole-title{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:28px 0 8px;font-weight:500}

/* Видео */
.project-videos{border-top:1px solid var(--line);padding-top:44px;margin-top:44px}
.project-videos h2{margin-bottom:24px}
.video-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media(max-width:700px){.video-list{grid-template-columns:1fr}}
.video{margin:0}
.video-frame{position:relative;aspect-ratio:16/9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:12px;color:var(--muted);margin-top:8px}

.project-details .text-link{margin-right:28px}
.experience-list h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.video-poster{display:block;width:100%;padding:0;border:0;cursor:pointer;overflow:hidden}
.video-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s}
.video-poster:hover img{transform:scale(1.025)}
.video-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#ffffffe6;box-shadow:0 6px 24px #0007}
.video-play::after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #0c2a1f}
.video-poster:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.video-note{opacity:.7}

/* Фон за галереей темнее, чтобы передние фото выделялись (Андрей 5.10) */
.gallery-backdrop{opacity:.55}
@media(max-width:700px){.gallery-backdrop{opacity:.5}}

/* Больше фона вокруг слайдов (+200 px на компьютере, +60 px на телефоне), слайды того же размера (Андрей 5.10) */
.gallery-stage{height:calc(var(--opening-gallery-height,500px) + 350px)}
@media(max-width:700px){.gallery-stage{height:calc(var(--opening-gallery-height,400px) + 60px)}}

/* Свайп по галерее останавливается на каждом фото, в том числе узком (Андрей 6.10) */
.gallery-slide{scroll-snap-stop:always}

/* Фото первого экрана (Андрей 7.10): на компьютере от линии меню, выходит из-под Home, левый и правый края растворяются,
   низ чуть уходит за экран; срезана только пустая ткань над головой; нижний край тоже растворяется, верх — чёткий от линии меню */
.hero-picture{aspect-ratio:.9;width:auto;max-width:60vw;height:calc(100svh - 10px);max-height:none;min-height:560px;align-self:start;justify-self:end;margin:-28px 4vw 0 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 82%,transparent),linear-gradient(to top,transparent,#000 22%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 82%,transparent),linear-gradient(to top,transparent,#000 22%);mask-composite:intersect}
.hero-picture img{object-position:center 65%;box-shadow:none}
@media(max-width:700px){.hero-picture{aspect-ratio:2/3;height:auto;min-height:0;max-width:none;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));align-self:auto;-webkit-mask-image:none;mask-image:none}.hero-picture img{object-position:center center}}


/* ===== Палитра «Л — Кулисы» (выбор Андрея 9.10) =====
   Идея (дизайнер): вид со сцены в глубину между кулисами — плоскости петроль / мох / изумруд / графит сходятся к точке ниже экрана.
   Глубина цветом, без пятна света. Цвета не зависят от фото. Акцент — кислотный лайм, только на метках.
   Перекрывает старые цвета из depth.css (там был фиолетовый — признак «сайта от нейросети»). */
:root{
  --bg:#151d1a;
  --fg:#f2f5ef;
  --muted:#c6d2cb;
  --line:#3d5a4f;
  --accent:#d4fa3c;
  --on-accent:#10201b;
  --surface-header:rgba(18,26,24,.84);
  --surface-panel:#1a2623;
  --surface-card:#18231f;
  --surface-card-2:#1c2a25;
  --surface-footer:#0d1513;
  --surface-stage:#0a1210;
  --line-soft:rgba(242,245,239,.14);
}

/* Фон: неподвижный слой — одинаков на всех страницах и на телефоне */
html{background:#131917}
body{background:transparent!important}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  /* пол сцены темнее — плоскости «стоят» на нём */
  linear-gradient(180deg,rgba(13,17,16,0) 52%,rgba(13,17,16,.55) 100%),
  /* веер кулис: точка схода ниже экрана, плоскости разных цветов с мягкими краями */
  conic-gradient(from -62deg at 56% 128%,
    #141a18 0deg,#161d1b 8deg,
    #173a33 16deg,#1a4239 26deg,#1a4239 27.4deg,   /* левая кулиса: петрольно-зелёная, мягкий край слева, жёсткий справа */
    #151b19 28deg,#181f1d 38deg,                   /* тень за кулисой */
    #24432e 47deg,#2a4b31 55deg,#2a4b31 56.4deg,   /* задник: мшисто-зелёный */
    #161d1b 57deg,#19221f 61deg,                   /* тень */
    #1c4a3a 70deg,#20543f 79deg,#20543f 80.4deg,   /* правая кулиса: изумруд */
    #141b18 81deg,#121715 124deg,#141a18 360deg)}

@media(max-width:700px){body::after{background:
  conic-gradient(from -70deg at 50% 52%,
    #141a18 0deg,#173a33 14deg,#1a4239 30deg,#1a4239 31.5deg,#151b19 32.5deg,#181f1d 40deg,
    #24432e 54deg,#2a4b31 74deg,#2a4b31 75.5deg,#161d1b 76.5deg,#19221f 84deg,
    #1c4a3a 98deg,#20543f 116deg,#20543f 117.5deg,#141b18 118.5deg,#121715 180deg,#141a18 360deg)}}

/* Зерно 0.12 — фактура ткани кулис, убирает полосатость градиента */
body::before{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Поверхности */
.site-header{background:var(--surface-header);border-color:var(--line-soft)}
.works-panel,.language-panel,.mobile-panel{background:var(--surface-panel);border-color:var(--line)}
.about{background:transparent;border-top-color:var(--line-soft)}
.work{background:var(--surface-card);border-top-color:var(--line-soft)}
.work:nth-child(2){background:var(--surface-card-2)}
.collaborate{background:transparent}
.footer{background:var(--surface-footer);border-top-color:var(--line-soft)}
.practice-services{border-top-color:var(--line-soft)}
.gallery-stage,dialog.photo-viewer{background:var(--surface-stage)}
.gallery-arrow{background:rgba(10,18,16,.9);border-color:var(--line)}
.awaiting{background:var(--surface-card);border-color:var(--line)}
.back-top{border-color:var(--line)}

/* Акцент — только здесь */
.desktop-nav{color:#e4ebe6}
.desktop-nav a:after,.desktop-nav button:after{background:var(--accent)}
.image-arrow{background:var(--accent);color:var(--on-accent)}
.text-link:hover{color:var(--accent);border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-location{color:var(--muted)}

/* Фото: чёткие края, как в Г и Е */
.hero-picture{-webkit-mask-image:none;mask-image:none}

/* Карточка работы без фото (фестивали): название крупно вместо года */
.awaiting span.awaiting-name{font:600 italic clamp(30px,3.2vw,50px)/1.05 var(--display);letter-spacing:-.03em;color:var(--fg);max-width:12ch}
.catalog-card,.awaiting{min-width:0}
@media(max-width:700px){.awaiting span.awaiting-name{font-size:clamp(24px,7.4vw,34px);overflow-wrap:anywhere}}

/* ===== Первый экран (Андрей 9.10): имя ×1.5, под ним профессии, место работы, внизу маленькими «BOCHUM, GERMANY» ===== */
/* ===== Первый экран: имя крупнее (×1.5), строки под ним по-новому ===== */
body .hero h1{font-size:clamp(64px,8.2vw,138px);line-height:.94}
body .hero h1 span{margin-top:6px}               /* фамилия остаётся 0.69 от имени */
body .hero .hero-content{justify-content:center}
body .hero .professions{order:2;margin-top:30px;font-size:clamp(15px,1.18vw,19px);line-height:1.5;font-weight:700;color:var(--fg)}
body .hero .hero-bottom{order:3;margin-top:18px;padding-top:0}
body .hero .current-work{font-size:clamp(13px,1vw,15px);line-height:1.7;color:var(--muted)}
body .hero .current-work strong{font-weight:600;color:var(--fg)}
body .hero .hero-location{order:4;margin-top:22px;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media(max-width:700px){
  body .hero h1{font-size:clamp(48px,18.4vw,80px);line-height:.94}
  body .hero h1 span{margin-top:4px}
  body .hero .professions{margin-top:22px;font-size:14px}
  body .hero .hero-bottom{margin-top:14px}
  body .hero .current-work{font-size:13px}
  body .hero .hero-location{margin-top:16px;font-size:11px}
}

/* Средние экраны (701–1100): фамилия не заезжает на фото — фото уже, имя чуть меньше (проверено на 1024) */
@media(min-width:701px) and (max-width:1100px){.hero-picture{max-width:52vw}body .hero h1{font-size:7vw}}
@media(min-width:1101px) and (max-width:1440px){.hero-picture{max-width:50vw}body .hero h1{font-size:7.4vw}}

/* Фон за галереей (9.10): тёмные ночные снимки осветлены каждый на свою величину; светлые (Archiving Future, The Effect) не тронуты.
   Замер средней яркости фона (0–255): было AF 57, Effect 51, TMH 27, Hamlet 19, Himmel 17, Perfect Murder 16, Societae 12. */
[data-work="take-me-home"] .gallery-backdrop{opacity:.8;filter:brightness(1.45) saturate(.9)}
[data-work="hamlet-fleisch-maschine"] .gallery-backdrop{opacity:.85;filter:brightness(2.1) saturate(.9)}
[data-work="himmel-ueber-charkiw"] .gallery-backdrop{opacity:.85;filter:brightness(2.3) saturate(.9)}
[data-work="the-perfect-murder"] .gallery-backdrop{opacity:.85;filter:brightness(2.6) saturate(.9)}
[data-work="societae-simulacra"] .gallery-backdrop{opacity:.8;filter:brightness(1.6) saturate(.85)}

/* Фон за галереей на всю ширину экрана, края мягко растворяются в фоне сайта — галерея появляется «из темноты сцены» (Андрей 9.10).
   Высота блока галереи НЕ меняется (колёсико мыши не должно чаще попадать на фото). */
html,body{overflow-x:clip}
.gallery-stage{overflow:visible;background:transparent}
.gallery-stage .gallery-backdrop,.gallery-stage:after{left:calc(50% - 50vw);right:calc(50% - 50vw);width:auto}
.gallery-stage .gallery-backdrop{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.gallery-stage:after{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}

/* ===== Страница CV (9.10) ===== */
.cv-page{padding-top:56px;padding-bottom:96px;max-width:1240px}
.cv-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-soft)}
.cv-heading .eyebrow{color:var(--muted);margin-bottom:14px}
.cv-heading h1{font:600 italic clamp(44px,6vw,92px)/.98 var(--display);letter-spacing:-.035em;margin:0}
.cv-profile{max-width:52ch;margin-top:22px;font-size:clamp(16px,1.25vw,19px);line-height:1.6}
.cv-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.cv-actions .text-link span{font-size:18px}
.cv-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px 48px;padding:40px 0;border-bottom:1px solid var(--line-soft)}
.cv-section h2{font:600 11px/1.6 var(--body);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:4px 0 0}
.cv-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.cv-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px}
.cv-list li.cv-plain{grid-template-columns:minmax(0,1fr)}
.cv-when{font-size:13px;line-height:1.7;color:var(--muted);font-variant-numeric:tabular-nums}
.cv-main{font-size:16px;line-height:1.55;margin:0;font-weight:600}
.cv-main em{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.cv-sep{color:var(--muted);font-weight:400}
.cv-details{font-size:14px;line-height:1.65;color:var(--fg);opacity:.86;margin:4px 0 0}
.cv-plain .cv-details{font-size:15px;opacity:1}
.cv-note{font-size:13px;line-height:1.6;color:var(--muted);margin:4px 0 0}
@media(max-width:800px){.cv-heading{flex-direction:column;align-items:flex-start}.cv-actions{align-items:flex-start}.cv-section{grid-template-columns:minmax(0,1fr);padding:30px 0}}
@media(max-width:560px){.cv-page{padding-top:32px}.cv-list li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* PDF / печать CV: только текст резюме, чёрным по белому, без меню, фона и кнопок */
@media print{
  @page{margin:16mm 16mm 18mm}
  html,body{background:#fff!important;color:#111!important}
  body{padding-top:0!important}
  body::before,body::after,.site-header,.footer,.skip,.cv-pdf,dialog{display:none!important}
  .cv-page{padding:0;max-width:none}
  .cv-heading,.cv-section{border-color:#ccc}
  .cv-heading{padding-bottom:18px}
  .cv-heading h1{font-size:34px;color:#111}
  .cv-heading .eyebrow,.cv-section h2,.cv-when,.cv-note,.cv-sep{color:#555!important}
  .cv-actions .text-link{border:0;color:#111}
  .cv-actions .text-link span{display:none}
  .cv-profile,.cv-main,.cv-details{color:#111!important;opacity:1}
  .cv-section{padding:14px 0;break-inside:avoid-page}
  .cv-list{gap:9px}
  .cv-list li{break-inside:avoid}
  .cv-main{font-size:11.5pt}.cv-details{font-size:10pt}.cv-note,.cv-when{font-size:9pt}
}
.cv-page .cv-section h2{transform:none!important;animation:none;font:600 11px/1.6 var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:4px 0 0;text-wrap:balance}

/* Линии (Андрей 10.10): между большими блоками — убраны (фон-«кулисы» идёт сплошной сценой);
   внутри списков (команда, CV, фильтры каталога) — оставлены, но бледнее. */
:root{--line-faint:rgba(242,245,239,.08)}
.about,.collaborate,.footer,.practice-services,.project-story,.project-details,.project-team,.project-videos,.project-ending,.festival{border-top:0!important}
.filters{border-top:0;border-bottom-color:var(--line-faint)}
.project-team dl>div{border-bottom-color:var(--line-faint)}
.cv-heading,.cv-section{border-bottom-color:var(--line-faint)}
.work{border-top-color:var(--line-faint)}
.footer{background:linear-gradient(to bottom,rgba(13,21,19,0),var(--surface-footer) 70%)}
.filters{border-bottom:0}

/* Наведение и выбор в лайме, как в меню (Андрей 10.10): вкладки каталога и кнопка «наверх» */
.filters a{transition:color .2s,border-color .2s}
.filters a:hover,.filters a[aria-current]{border-color:var(--accent)}
.filters a:hover{color:var(--fg)}
.back-top{transition:color .2s}
.back-top:hover,.back-top:focus-visible{color:var(--accent);background:transparent}
.footer .back-top:hover,.footer .back-top:focus-visible,body .back-top:hover{color:var(--accent)!important;background:transparent!important}

/* Избранные работы на главной (10.10): вторая подложка на ступень светлее и с мягкой тенью — при наезде видно, что она лежит сверху */
.work{background:#16211d}
.work:nth-child(2){background:#1f2e28;box-shadow:0 -22px 50px rgba(0,0,0,.45)}

/* Перевод названия мелкой строкой под немецким названием (11.10): каталог, главная, страница работы */
.title-translation{color:#b9c7c0;font-weight:300;font-size:14px;line-height:1.5;letter-spacing:.01em;margin-top:6px}
.work .title-translation{grid-column:2}
.project-heading .title-translation{font-size:clamp(15px,1.25vw,19px);margin:-2px 0 14px}

/* Страница «не найдено» (11.10) */
body:has(.notfound){display:flex;flex-direction:column;min-height:100svh}
body:has(.notfound)>footer,body:has(.notfound)>header{width:100%}
.notfound{flex:1 0 auto;width:100%;display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:100px}
.notfound .eyebrow{color:var(--muted)}
.notfound h1{font-size:clamp(44px,6.5vw,104px);line-height:1.02;letter-spacing:-.035em;margin:18px 0 26px;max-width:14ch;text-wrap:balance}
.notfound-text{font-size:16px;line-height:1.8;max-width:46ch;color:var(--muted)}
.notfound-links{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:34px}
@media(max-width:700px){.notfound{padding-top:48px;padding-bottom:64px}.notfound h1{font-size:clamp(40px,11vw,60px)}.notfound-text{font-size:15px}}

/* Проход дизайнера (11.10) */
/* 1. Названия работ реагируют на наведение (раньше правило было для кнопок, а теперь это ссылки) */
.work h3 a:hover,.catalog-card h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.work:has(h3 a:hover) .image-link img,.catalog-card:has(h2 a:hover) .image-link img{transform:scale(1.035)}
/* 2. В галерее видна только подпись текущего фото */
.gallery-slide figcaption{transition:opacity .2s}
.gallery-slide:not([aria-current="true"]) figcaption{opacity:0}
/* 8. Team: колонки как у Project details */
@media(min-width:701px){.project-team dl>div{grid-template-columns:1fr 1fr;gap:9vw}}
/* 9. «My role» — как остальные метки капсом */
.project-myrole-title.project-myrole-title{letter-spacing:.14em;font-weight:500}
/* 10. Арабский текст в названии */
.ar{font-style:normal;white-space:nowrap}
/* 11. Стрелочки ⌄ на уровне текста; профессии не рвутся посередине; стрелки галереи — лаймовые при наведении */
.works-toggle span,.language-toggle span{display:inline-block;transform:translateY(-3px)}
.professions .role{padding:0;color:inherit;white-space:nowrap}
.gallery-arrow:hover:not(:disabled){background:rgba(10,18,16,.9);color:var(--accent);border-color:var(--accent)}
/* Подпись фотографа первого экрана */
.hero-credit{position:absolute;right:var(--pad);bottom:18px;font-size:11px;letter-spacing:.04em;color:#c6d2cb;text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:1}
@media(max-width:700px){
  /* 4–6. Телефон: места для пальца от 44 px, мелкие надписи 10 px */
  .mobile-panel details div{gap:0}
  .mobile-panel details a{display:flex;align-items:center;min-height:44px}
  .language-toggle{min-width:44px;min-height:44px;justify-content:center}
  .instagram-link{width:44px;justify-content:center}
  .section-heading .eyebrow,.hero-location{font-size:10px}
  .hero-credit{position:static;order:3;align-self:flex-end;margin:-18px var(--pad) 0 0;font-size:11px}
}
/* Подпись фотографа на компьютере: вертикально у левого нижнего края фото (место считает скрипт на главной; без скрипта — справа внизу) */
@media(min-width:701px){.hero-credit.is-placed{right:auto;bottom:auto;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}}