/* Правки шаблона под BŪRO. main.css и base.css — от шаблона, здесь только отличия. */

/* Cormorant Garamond светлее Instrument Serif и с меньшей строчной — берём вес 500 */
#loader .ld-word,#loader .ld-tag,.nav .brand,.hero h1 .l2,.cap h2,.outro h3,
.shop-head h2,.shop-head p,.prod h3,.cat-head h2,.cat-head p,.mat-head h2,.mat-head p,
.mat-panel h3,.chap h3,.feat-meta b,.mat-item h3,#story h2,.foot-state h2,.news p,.foot-mark{font-weight:500}

/* отрицательный трекинг подобран под латиницу: в кириллице буквы слипаются */
.shop-head h2,.cat-head h2,.mat-head h2,.mat-panel h3,.foot-state h2,#story h2{letter-spacing:-.012em}
.chap h3,.mat-item h3,.prod h3,.cap h2{letter-spacing:0}
.foot-mark{letter-spacing:-.02em}
.outro h3{letter-spacing:-.01em}

/* шапка: в шаблоне пункты — span без ссылок */
.nav a{pointer-events:auto;color:inherit;text-decoration:none}
.nav .links a{transition:color .3s}
.nav .links a:hover,.nav .links a:focus-visible{color:var(--ink)}
body.shop .nav .links a:hover,body.shop .nav .links a:focus-visible{color:var(--sink)}
body.shop.onstory .nav .links a:hover,body.shop.onstory .nav .links a:focus-visible{color:var(--ink)}

/* на светлых секциях шапка лежала прямо на заголовках и фото — подкладываем под неё бумагу */
body.shop .nav{background:linear-gradient(to bottom,rgba(239,235,228,.97) 58%,rgba(239,235,228,0));padding-bottom:30px}
/* над кадром VR шапка белая и без своей подложки: текст блока проезжал прямо сквозь название и пункты.
   Тёмная подложка — часть самого кадра: она закреплена у верха окна и обрезана границами секции
   (clip-path режет и fixed-потомков), поэтому не выходит на бумагу, когда кадр уезжает из-под шапки */
body.shop.onstory .nav{background:none}
#story{clip-path:inset(0)}
#story:after{content:"";position:fixed;left:0;right:0;top:0;height:92px;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(20,16,12,.92) 58%,rgba(20,16,12,0))}
body.onstory #story:after{opacity:1}
.shop-head{padding-top:92px}

/* подписи этапов на 3D-сцене: строки длиннее английских */
.cap{max-width:min(420px,78vw)}
.cap h2{font-size:clamp(30px,3.4vw,54px);line-height:1.02}
.cap p{max-width:340px;font-size:13px}
.hero p{max-width:400px;font-size:13px}
.outro p{font-size:14px}
/* финал сцены: светлый текст ложился на освещённый пол спальни — абзац и половина кнопки не читались,
   на телефоне абзац шёл от края до края экрана. Под текст — мягкое затемнение, абзацу — ширина */
.outro:before{content:"";position:absolute;left:50%;top:50%;width:min(900px,160vw);height:min(600px,84vh);transform:translate(-50%,-46%);background:radial-gradient(closest-side,rgba(14,11,8,.76),rgba(14,11,8,.5) 52%,rgba(14,11,8,0));pointer-events:none}
.outro>*{position:relative}
.outro p{max-width:min(480px,calc(100vw - 56px));text-wrap:balance;color:var(--ink);opacity:.92;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.outro .cta{background:rgba(14,11,8,.42);border-color:rgba(243,239,232,.55)}

/* сетка проектов: длинные названия и подписи */
.prod h3{line-height:1.08}
.prod .cat{line-height:1.5;letter-spacing:.22em}
/* в шаблоне подпись карточки не видна: класс .cap общий с подписями 3D-сцены (opacity:0, position:absolute) */
.prod .cap{position:static;opacity:1;transform:none;max-width:none;align-items:flex-start}
.prod .price{padding-top:20px}
.shop-head p{max-width:420px}

/* витринный проект */
.chap h3{max-width:480px;line-height:1.12}
.feat-chapters{height:clamp(220px,28vh,300px)}

/* подход: портрет арт-директора кадрируем по верху */
.mat-panel img.top{object-position:50% 18%}
.mat-panel h3{font-size:clamp(40px,4.8vw,84px);line-height:.98}
.mat-head p{max-width:400px}

/* VR */
/* светлый текст ложится на мраморный остров — затемняем низ и левый край кадра */
#story .story-shade{background:linear-gradient(to top,rgba(20,16,12,.82),rgba(20,16,12,.34) 46%,rgba(20,16,12,0) 72%),linear-gradient(to right,rgba(20,16,12,.5),rgba(20,16,12,0) 62%)}
#story .story-copy{max-width:1040px}
#story h2{font-size:clamp(30px,3.8vw,60px);line-height:1.06;text-shadow:0 2px 24px rgba(0,0,0,.45)}
#story .story-p{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--ink);opacity:.86;max-width:440px}
#story a{margin-top:26px}

/* подвал */
.foot-state h2{max-width:none}
.foot-cols li{line-height:1.5;margin-bottom:.6em}
.news-link{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--sink);padding:10px 0;color:var(--sink);text-decoration:none;font-size:14px}
.news-link span{white-space:nowrap}
.news-link b{font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
/* «BŪRO» в Cormorant шире, чем «MØBEL» в шрифте шаблона: на телефоне слово обрезалось */
.foot-mark{font-size:clamp(88px,32vw,520px)}

@media(max-width:1000px){
  .news{grid-column:1/-1}
  #story h2 br{display:none}
  .feat-chapters{height:170px}
}
@media(max-width:700px){
  .nav .links{gap:16px;font-size:11px}
  .hero .eyebrow{letter-spacing:.16em}
  /* подпись этапа поднята над счётчиком: длинная последняя строка залезала под «03 / 05» */
  .cap{bottom:76px}
  .shop-head{padding-top:84px}
  .mat-panel h3{font-size:clamp(34px,10vw,48px)}
  /* подписи вразрядку набраны 10 px — на телефоне мелко. Поднимаем до 11, длинным строкам
     ужимаем разрядку, чтобы ширина осталась прежней */
  .eyebrow,.hint,.cap .n,.prod .cat,.prod .view,.chap .n,.mat-item .n,.mat-panel .n,
  .mat-idx,.mat-hint,.foot-cols h4,.news-link b,.foot-bottom{font-size:11px}
  .eyebrow{letter-spacing:.24em}
  .hero .eyebrow{letter-spacing:.08em}
  .prod .cat{letter-spacing:.15em}
  /* «Смотреть проект» проявляется по наведению, которого на телефоне нет */
  .prod .view{opacity:.85}
}

@media(prefers-reduced-motion:reduce){
  .hint i{animation:none}
  body.revealed #ui,body.revealed #nav{animation:none;opacity:1}
  .prod img,.prod:hover img{transition:opacity .3s;transform:none}
}