/* акцент — масляная лиственница с фасадов Level House; на тёмном фоне он светлее */
:root { --accent: #A8541F; --ink: #16161A; --bone: #E8E6E1; }
.on-dark { --accent: #D4905A; }

html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter Tight', system-ui, sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 1px; }

/* ── кнопки ── */
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
  background: var(--ink); color: var(--bone); font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  transition: background-color .4s ease;
}
.btn-solid:hover { background: var(--accent); }
.btn-line {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .16em;
  border-bottom: 1px solid rgba(22,22,26,.3); transition: border-color .4s ease, color .4s ease;
}
.btn-line:hover { border-color: var(--accent); color: var(--accent); }
.f-link { display: block; width: max-content; padding: .3rem 0; color: rgba(232,230,225,.85); transition: color .3s ease; }
.f-link:hover { color: var(--accent); }

/* ── первый экран ── */
.hero-title { line-height: .9; letter-spacing: -.035em; }
.hero-line { font-size: 19.5vw; overflow: hidden; }
.hero-line > span, .hero-line .ch { display: inline-block; }
@media (min-width: 768px) { .hero-line { font-size: min(17vw, 34svh); } }

/* ── закреплённый кадр ── */
#pin-img { object-position: 50% 45%; }
.pin-scrim { background: linear-gradient(180deg, rgba(22,22,26,.3) 0%, rgba(22,22,26,.12) 38%, rgba(22,22,26,.82) 100%); }
/* маскам строк — поля под выносные «р», «у» и кавычки-ёлочки */
.pin-mask { overflow: hidden; padding: .08em .06em .14em; margin: -.08em -.06em -.14em; }
.cta-mask { display: block; overflow: hidden; padding: .06em .04em .16em; margin: -.06em -.04em -.16em; }

/* ── лента этапов ── */
.h-track-panel { width: 78vw; flex-shrink: 0; }
@media (min-width: 768px) { .h-track-panel { width: min(42vw, 62svh); } }
#h-stage.is-reduced { height: auto; overflow-x: auto; padding: 6rem 0; }

/* ── список проектов: превью у курсора ── */
.cat-list { list-style: none; }
.cat-row {
  position: relative; display: grid;
  grid-template-columns: 4rem 1fr auto; align-items: baseline; gap: 2vw;
  padding: 1.6rem 0; border-bottom: 1px solid rgba(22,22,26,.15); cursor: pointer;
  text-decoration: none; color: inherit;
}
.cat-no { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .2em; }
.cat-name {
  font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 5vw, 4rem); line-height: 1; color: var(--ink);
  transition: letter-spacing .6s cubic-bezier(.33,1,.68,1), color .5s ease, transform .6s cubic-bezier(.33,1,.68,1);
}
.cat-meta {
  display: flex; align-items: baseline; gap: 1.5rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(22,22,26,.65);
}
.cat-meta b { font-weight: 500; font-size: .95rem; letter-spacing: .04em; color: var(--ink); min-width: 9.5em; text-align: right; }
.cat-thumb { display: none; }
@media (hover: hover) {
  /* пока строки появляются (класс is-revealing ставит скрипт), перехода нет: он догонял каждый кадр GSAP, и строки проявлялись на секунду позже — полэкрана стояло пустым */
  .cat-list:not(.is-revealing) .cat-row { transition: opacity .5s ease; }
  .cat-list:hover .cat-row:not(:hover) { opacity: .35; }
  .cat-row:hover .cat-name { letter-spacing: .04em; color: var(--accent); transform: translateX(1.25rem); }
}
.cat-preview {
  position: fixed; top: 0; left: 0; z-index: 55; pointer-events: none;
  width: clamp(240px, 26vw, 420px); aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; will-change: transform;
}
@media (max-width: 767px) {
  .cat-row { grid-template-columns: 2rem 1fr 5.5rem; grid-template-areas: "no name thumb" "no meta thumb"; gap: .35rem 1rem; align-items: center; padding: 1.1rem 0; }
  .cat-no { grid-area: no; align-self: start; padding-top: .5rem; }
  .cat-name { grid-area: name; font-size: 2rem; }
  .cat-meta { grid-area: meta; flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .7rem; letter-spacing: .08em; }
  .cat-meta b { min-width: 0; text-align: left; font-size: .9rem; }
  .cat-thumb { grid-area: thumb; display: block; width: 5.5rem; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
  .cat-preview { display: none; }
}

/* ── закреплённые кадры ── */
.plates { position: relative; height: 100svh; overflow: hidden; background: var(--ink); }
.plates-frames { position: absolute; inset: 0; }
.plate-frame { position: absolute; inset: 0; opacity: 0; }
.plate-frame:first-child { opacity: 1; }
.plate-img { width: 100%; height: 100%; background-size: cover; background-position: center; transform-origin: center; will-change: transform; }
.plates-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,22,26,.6) 0%, rgba(22,22,26,.08) 30%, rgba(22,22,26,.2) 52%, rgba(22,22,26,.88) 100%);
}
.plates-label, .plates-count {
  position: absolute; top: 5rem; z-index: 2; color: rgba(232,230,225,.8);
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
}
.plates-label { left: 1.5rem; } .plates-count { right: 1.5rem; }
.plates-count b { color: var(--bone); font-weight: 400; }
.plates-caps { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 3rem; z-index: 2; min-height: 9.5em; }
.plate-cap {
  position: absolute; left: 0; top: 0; right: 0; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.33,1,.68,1);
}
.plate-cap.is-on { opacity: 1; transform: none; }
.cap-title { font-weight: 500; letter-spacing: -.01em; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--bone); }
.cap-desc { margin-top: .7rem; max-width: 44ch; font-size: 1rem; line-height: 1.5; color: rgba(232,230,225,.85); }
@media (min-width: 768px) {
  .plates-label { top: 6.5rem; left: 3rem; } .plates-count { top: 6.5rem; right: 3rem; }
  .plates-caps { left: 3rem; right: 3rem; bottom: 4rem; min-height: 7.5em; }
}
/* без анимации: кадры стоят стопкой, подпись — сразу под своим кадром */
.plates.is-reduced { height: auto; display: flex; flex-direction: column; padding-bottom: 1.5rem; }
.plates.is-reduced .plates-frames { position: relative; }
.plates.is-reduced .plate-frame { position: relative; opacity: 1; height: 70svh; }
.plates.is-reduced .plates-scrim, .plates.is-reduced .plates-count, .plates.is-reduced .plates-caps { display: none; }
.plates.is-reduced .plates-label { position: static; order: -1; padding: 6rem 1.5rem 1.5rem; }
.plates.is-reduced .plate-cap { position: static; opacity: 1; transform: none; padding: 1.25rem 1.5rem 2.25rem; }
@media (min-width: 768px) {
  .plates.is-reduced .plates-label { padding: 7rem 3rem 2rem; }
  .plates.is-reduced .plate-cap { padding: 1.5rem 3rem 3rem; }
}

/* перспектива у каждой карточки своя (ставит скрипт): с общей на сетку номера и подписи крайних карточек съезжали вбок */
.tilt-card { position: relative; transform-style: preserve-3d; will-change: transform; }
.tilt-media { position: relative; overflow: hidden; }
.tilt-media img { transform: scale(1.05); transition: filter .6s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.tilt-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.30), transparent 45%);
  transition: opacity .4s ease;
}
.tilt-no {
  position: absolute; top: .75rem; left: .75rem; z-index: 2; transition: transform .5s cubic-bezier(.22,1,.36,1);
  padding: .25rem .5rem; background: rgba(22,22,26,.72); color: var(--bone);
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .16em;
}
.tilt-meta { transition: transform .5s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .tilt-card:hover .tilt-no { transform: translateZ(50px); }
  .tilt-card:hover .tilt-meta { transform: translateZ(25px); }
  .tilt-card:hover .tilt-media img { filter: contrast(1.05) brightness(1.04); transform: scale(1.1); }
  .tilt-card:hover .tilt-sheen { opacity: 1; }
}

/* ── шапка ── */
#site-header { transition: background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease; border-bottom: 1px solid transparent; }
#site-header.is-scrolled {
  background-color: rgba(232,230,225,.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(22,22,26,.08);
}
#site-header nav a { position: relative; padding: .75rem 0; color: rgba(22,22,26,.72); transition: color .3s ease; }
#site-header nav a:hover { color: var(--ink); }
#site-header nav a.nav-active { color: var(--accent); }
#site-header nav a.nav-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: var(--accent); }

/* ── подвал ── */
/* подвал лежит поверх шапки (z-91), но в высоком окне он ниже экрана: в конце страницы над ним оставалась светлая полоса шапки (14 px на 1440×900).
   Теперь он не ниже окна, запас уходит в отступ над крупной надписью */
#contact { min-height: 100vh; display: flex; flex-direction: column; }
#contact > :nth-child(2) { margin-top: auto; }
.cta-better { position: relative; white-space: nowrap; }
.cta-underline { position: absolute; left: 0; right: 0; bottom: -.04em; height: .05em; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.footer-mark { font-size: calc((100vw - 3rem) * .1436); line-height: .82; letter-spacing: -.035em; color: rgba(232,230,225,.06); }

@media (min-width: 768px) { .footer-mark { font-size: calc((100vw - 6rem) * .1436); } }

/* ── параллакс тёмного блока: запас по краям ── */
#studio-bg { transform: scale(1.25); }

/* ── курсор: кольцо читается и на светлом, и на тёмном ── */
#cursor { mix-blend-mode: difference; opacity: 0; }
#cursor .cursor-ring { border-color: #fff; }
#cursor > div:last-child { background: #fff; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* ── планшет, 768–1023 px: колонки в 5 и 7 долей уже своего содержимого ── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* название и телефон в шапке переносились в две строки, навигация упиралась в телефон */
  #site-header a[href="#top"], #site-header a[href^="tel:"] { white-space: nowrap; }
  /* «Индивидуальный» в 48 px не помещался в колонку: слово резалось краем экрана, страница получала прокрутку вбок */
  [id^="work-"] h3 { font-size: min(3rem, calc(5.8vw - 16px)); }
  /* заголовок подвала в 96 px резался маской строки («прозрачн», «в договор»), почта вылезала за край */
  .footer-cta { font-size: min(6rem, calc(11.4vw - 14px)); }
  #contact > :first-child > :last-child { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 899.98px) {
  #site-header a[href^="tel:"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plate-cap, .tilt-media img, .tilt-no, .tilt-meta, .cat-name { transition: none; }
}