/* ARTTIM — второй слой вида (подключается после style.css).

   Зачем отдельный файл: style.css — каркас, собранный нами раньше. Здесь только
   правки по разбору художника: меньше текста, крупнее работы, живое движение и
   честная примерка в интерьере. Сцены интерьера собраны кодом, а не фотографиями
   из открытых источников: чужая комната с чужой мебелью всегда читается как
   «не мой дом», плюс бесплатные кадры нужного размера и света найти не удалось,
   а собранная стена весит ноль килобайт — телефону легче. */

:root{
  --linen:#f4efe6;
  --linen2:#e7dfd2;
  --ink:#211c18;
  --ink-soft:#5b524a;
}

/* ─────────── 1. ПЕРВЫЙ ЭКРАН ───────────
   Работа занимает почти весь правый столбец, текст сжат до трёх строк:
   у галерейного сайта первый экран показывает картин, а не абзацы. */
.hero{padding:120px 0 40px;min-height:auto}
.hero__grid{grid-template-columns:1.06fr .94fr;gap:48px}
.hero__name{font-size:clamp(44px,7.4vw,104px);line-height:.98;margin:10px 0 16px}
.hero__roles{font:600 14px/1.45 var(--txt);letter-spacing:.02em;color:var(--mut);margin-bottom:16px}
.hero .lead{font-size:17.5px;line-height:1.62;max-width:46ch}
.hero__proof{
  margin:18px 0 0;padding:12px 16px;max-width:46ch;
  border-left:2px solid var(--warm);background:rgba(224,167,99,.05);
  font-size:14px;color:var(--body);border-radius:0 12px 12px 0;
}
.hero__actions{margin-top:22px}
.frame--hero{box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}

/* полоса избранных работ внизу первого экрана: сразу видно, что здесь картины */
.hero__strip{margin-top:44px;border-top:1px solid var(--line);padding-top:20px}
.strip__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.strip__label{font:600 11px/1 var(--txt);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:0}
.strip__all{font-size:13px;color:var(--warm)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.strip__item{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.strip__item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.strip__item span{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;
  font:500 12.5px/1.3 var(--txt);color:var(--text);
  background:linear-gradient(180deg,rgba(10,9,12,0),rgba(10,9,12,.88));
}
@media (hover:hover){.strip__item:hover img{transform:scale(1.05)}}
@media (max-width:900px){
  .hero{padding:104px 0 32px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ─────────── 2. СВЕТЛАЯ ПОЛОСА (известные герои) ───────────
   Один светлый блок посреди тёмного сайта: воздух, контраст и «музейная»
   подача вместо ещё одного чёрного экрана. */
.sec--linen{
  background:linear-gradient(180deg,var(--linen),var(--linen2));
  color:var(--ink-soft);border-top:0;border-bottom:0;
}
.sec--linen .sec__num{color:#a9803e}
.sec--linen .sec__title,.sec--linen h3,.sec--linen h4{color:var(--ink)}
.sec--linen .sec__lead{color:var(--ink-soft)}
.sec--linen .hcard{background:#fffdf9;border-color:rgba(33,28,24,.12);box-shadow:0 24px 44px -34px rgba(33,28,24,.6)}
.sec--linen .hcard p{color:var(--ink-soft)}
.sec--linen .hcard h3{font-size:21px}
.sec--linen .facts dt{color:#8a7f73}
.sec--linen .facts dd{color:var(--ink)}
.sec--linen .ph{border-color:rgba(33,28,24,.2);color:#8a7f73;background:rgba(33,28,24,.03)}
.sec--linen .ph__hint{color:#9a8f83}
.sec--linen .names li{color:var(--ink-soft);border-color:rgba(33,28,24,.14);background:#fffdf9}
.sec--linen .btn{background:var(--ink);color:#fff5e8;border-color:transparent}
.sec--linen .btn--ghost{background:transparent;color:var(--ink);border-color:rgba(33,28,24,.28)}
.sec--linen .btn--ghost:hover{background:rgba(33,28,24,.06)}
.sec--linen .hgroup h3{color:var(--ink)}
.sec--linen .all-heroes__note{color:#8a7f73}

/* «герои» — лента карточек: горизонтальный скролл вместо трёх огромных блоков */
.heroes--row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);
  gap:16px;overflow-x:auto;padding:6px 4px 18px;margin-top:30px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.heroes--row .hcard{scroll-snap-align:start}
.heroes--row::-webkit-scrollbar{height:6px}
.heroes--row::-webkit-scrollbar-thumb{background:rgba(33,28,24,.25);border-radius:3px}
.heroes-rowhint{font-size:12.5px;color:#8a7f73;margin:0}

/* ─────────── 3. СЛУЖЕБНОЕ: <details> для длинных текстов ───────────
   «Много воды» лечится не удалением фактов, а тем, что факты не мешают читать:
   основное видно, подробности открываются по клику. */
.more{margin-top:20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.more > summary{
  cursor:pointer;padding:15px 18px;font:600 14px/1.3 var(--txt);color:var(--text);
  display:flex;align-items:center;gap:10px;list-style:none;
}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:'+';margin-left:auto;color:var(--warm);font-size:18px;line-height:1}
.more[open] > summary::after{content:'–'}
.more > summary:hover{background:rgba(224,167,99,.06)}
.more__body{padding:2px 18px 20px}
.more__body h3{font-size:17px;margin:20px 0 8px}
.more__body p{font-size:15px;max-width:78ch}
.more__body .roles{margin-top:12px}
.sec--linen .more{background:#fffdf9;border-color:rgba(33,28,24,.12)}
.sec--linen .more > summary{color:var(--ink)}

/* ─────────── 4. ФАКТЫ ОБ АВТОРЕ ─────────── */
.facts-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.factc{padding:14px 14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.factc b{display:block;font:700 22px/1.1 var(--display);color:var(--warm);margin-bottom:5px}
.factc span{font-size:13px;line-height:1.4;color:var(--body)}
@media (max-width:700px){.facts-row{grid-template-columns:1fr 1fr}}

/* ─────────── 5. НАПРАВЛЕНИЯ: карточка-оффер ───────────
   Было «скучно и информации не до конца»: не хватало состава работы и того,
   что нужно от человека. Добавляем список включённого и строку-итог. */
.svc{position:relative;display:flex;flex-direction:column;padding:26px 24px}
.svc__i{font:700 13px/1 var(--txt);letter-spacing:.16em;color:var(--warm);margin-bottom:12px}
.svc h3{font-size:21px}
.svc__inc{display:flex;flex-direction:column;gap:7px;margin:16px 0 0}
.svc__inc li{position:relative;padding-left:18px;font-size:14px;color:var(--body)}
.svc__inc li::before{
  content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
  border:1px solid var(--warm);border-radius:50%;
}
.svc__meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.svc__tag{
  font:600 11.5px/1 var(--txt);letter-spacing:.05em;color:var(--body);
  padding:8px 11px;border:1px solid var(--line);border-radius:999px;
}
.svc__tag--todo{color:var(--warm);border-color:rgba(224,167,99,.35)}
.svc .btn{margin-top:20px}
.svc:hover{border-color:rgba(224,167,99,.3)}

/* ─────────── 6. ПУТЬ: лента без простыни ─────────── */
.timeline--lead li{padding:16px 0}
.timeline--lead b{font-size:15px}
.timeline--lead span{font-size:15px}
.timeline-more{margin-top:22px}

/* ─────────── 7. СМИ: стена логотипов одним полем ─────────── */
.press__wall{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.press__wall .ph--logo{min-width:150px;flex:1 1 150px}
.press__wall-title{font:600 12px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}

/* ─────────── 8. БЕГУЩАЯ СТРОКА РАБОТ ───────────
   Медленная, по одному ряду: показывает, что работ больше, чем сетка,
   и не тянет процессор (только transform). */
.marquee{position:relative;overflow:hidden;margin:34px 0 0;padding:14px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.marquee__track{display:flex;gap:14px;width:max-content;animation:marquee 58s linear infinite}
.marquee img{height:132px;width:auto;border-radius:10px;opacity:.9}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ─────────── 9. НАКЛОН КАРТОЧКИ (только мышь) ───────────
   Atropos крутит кадр за курсором. На тачфонах выключено: там это только
   мешает и ест батарею. */
.tilt{width:100%;height:100%}
@media (hover:hover) and (pointer:fine){
  .work.tiltable{z-index:1}
  .work.tiltable:focus-within{z-index:2}
}

/* ─────────── 10. ПОЛНЫЙ ПРОСМОТР (PhotoSwipe) ─────────── */
.pswp{--pswp-bg:#08070a}
.pswp__button,.pswp__counter{opacity:.85}
.work__zoom{
  position:absolute;right:10px;top:10px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(10,9,12,.72);border:1px solid var(--line);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s ease;
}
.work__zoom svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:1.7}
.work:hover .work__zoom,.work:focus-within .work__zoom{opacity:1}
@media (hover:none){.work__zoom{opacity:1;width:34px;height:34px}}

/* ─────────── 11. ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ ───────────
   Без библиотек: тёмная штора на время загрузки новой страницы. Ссылки не
   ломаются (если JS не сработал — обычный переход), клавиатура и новое окно
   работают как раньше. */
html.motion .curtain{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
html.motion.leaving .curtain{opacity:1;pointer-events:auto}
html.motion .page-enter{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─────────── 12. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ───────────
   Классы ставит js/motion.js (GSAP). Без GSAP всё остаётся видимым: правило
   включается только при html.motion, поэтому «пустой сайт» невозможен. */
html.motion .rise{opacity:0;transform:translateY(26px)}
html.motion .zoomable{pointer-events:none}

/* ─────────── 13. АДАПТИВ ─────────── */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__strip{margin-top:28px}
  .svc{padding:22px 18px}
  .marquee img{height:96px}
  .heroes--row{grid-auto-columns:minmax(268px,86vw)}
}