/* MAISON AUBERTIN — витрина. Светлый люкс: типографика, воздух, ни одного лишнего объекта. */

:root{
  --paper:#f2efeb;
  --paper-2:#e9e5df;
  --ink:#1a1613;
  --ink-2:#6d645c;
  --line:#dcd5cb;
  --gold:#b3805c;
  --pad:clamp(20px,5vw,72px);
  --serif:"Didot","Bodoni MT","Playfair Display","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --micro:.68rem;
  --track:.22em;
}

*,*::before,*::after{box-sizing:border-box}
/* ⚠️ именно clip, а не hidden: hidden делает предка скролл-контейнером и
   ломает position:sticky в Safari, прежде всего на iOS (кейс 17.08) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,canvas{display:block;max-width:100%}
/* ⚠️ Строка выше перебивает браузерное [hidden]{display:none} — атрибут hidden на <img>
   переставал работать, и постер героя висел поверх канваса: кадры листались под ним,
   а на экране стоял первый кадр (кейс 17.08, «скроллю — движения нет»). */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px}

/* ─────────── навигация ─────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px var(--pad);
  font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink);text-shadow:none;
  transition:color .45s ease,text-shadow .45s ease;
}
/* ниже героя навбар проезжает над кадрами кампании — без подложки надписи тонут */
.nav--ink{
  color:var(--ink);
  background:rgba(242,239,235,.88);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(26,22,19,.06);
}
.nav__mark{display:flex;align-items:center;gap:9px;font-family:var(--serif);
  font-size:1.02rem;letter-spacing:.3em;text-transform:none}
.nav__ring{width:11px;height:11px;border:1.4px solid currentColor;border-radius:50%;display:inline-block}
.nav__links{display:flex;gap:clamp(16px,2.6vw,36px)}
.nav__links a{opacity:.82;transition:opacity .25s}
.nav__links a:hover{opacity:1}
@media (max-width:700px){.nav__links{display:none}}

/* ─────────── герой ─────────── */
/* дистанция скраба: 120 кадров на ~120vh прокрутки = кадр на каждые ~8 px,
   один щелчок колеса продвигает секвенцию заметно, а не на пару кадров */
.hero{position:relative;height:220vh}
@media (max-width:700px){.hero{height:200vh}}
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--paper-2);
}
.hero__canvas,.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;
}
.hero__canvas{opacity:0;transition:opacity .5s ease}
.hero__canvas.on{opacity:1}
/* Лёгкая молочная подложка слева — она держит контраст тёмной типографики
   на светлой стене, не трогая руку и лицо. */
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(246,243,239,.82) 0%,rgba(246,243,239,.45) 22%,
      rgba(246,243,239,0) 46%),
    linear-gradient(to bottom,rgba(246,243,239,.88) 0%,rgba(246,243,239,.52) 6%,
      rgba(246,243,239,0) 15%);
}
/* Раскладка продиктована самим кадром: рука занимает правую половину сверху донизу,
   лицо — левый низ. Свободна только светлая стена слева вверху, поэтому заголовок
   стоит там и набран тёмным по светлому, а не белым по фотографии. */
.hero__copy{
  position:absolute;left:var(--pad);top:clamp(104px,15vh,168px);z-index:2;color:var(--ink);
  max-width:min(15ch,52vw);
}
.hero__title{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(2.9rem,7.2vw,6.6rem);line-height:.94;letter-spacing:-.012em;
}
.hero__sub{
  margin:20px 0 28px;font-size:clamp(.8rem,1.35vw,.98rem);
  letter-spacing:.05em;color:var(--ink-2);max-width:24ch;
}
.hero__hint{
  position:absolute;left:var(--pad);bottom:clamp(46px,8vh,92px);z-index:2;color:var(--ink);
  font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  display:flex;align-items:center;gap:10px;opacity:.7;transition:opacity .5s ease;
}
.hero__hint.off{opacity:0}

/* Телефон: горизонтальный кадр в cover на узком экране показывает четверть ширины —
   модель пропадает. Поэтому кадр занимает верх экрана, а типографика уходит под него
   на бумагу: обложка журнала, а не обрезанная фотография. */
@media (max-width:700px){
  .hero__canvas,.hero__poster{height:56vh;height:56svh}
  .hero__veil{height:56vh;height:56svh;background:linear-gradient(to bottom,
    rgba(246,243,239,.85) 0%,rgba(246,243,239,.45) 8%,rgba(246,243,239,0) 20%)}
  .hero__copy{top:auto;bottom:clamp(76px,12vh,110px);max-width:none}
  .hero__title{font-size:clamp(3rem,15vw,4.6rem)}
  .hero__sub{max-width:30ch}
  .hero__hint{bottom:30px}
}
.hero__hint i{display:block;width:44px;height:1px;background:currentColor;transform-origin:left;
  animation:sweep 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
@media (prefers-reduced-motion:reduce){.hero__hint i{animation:none}}

/* ─────────── кнопки ─────────── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:13px 20px 13px 24px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:#fff;
  backdrop-filter:blur(3px);transition:background .3s,color .3s,border-color .3s;
}
.btn i{
  width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;font-style:normal;font-size:.9rem;line-height:1;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1);
}
.btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn:hover i{background:var(--ink);color:#fff;transform:rotate(90deg)}
.btn--dark{color:var(--ink);border-color:var(--line);backdrop-filter:none}
.btn--dark i{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--dark:hover i{background:var(--paper);color:var(--ink)}

/* ─────────── общие заголовки секций ─────────── */
.sec__h{
  display:flex;align-items:baseline;gap:18px;margin:0 0 clamp(28px,5vw,56px);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.2vw,3.1rem);line-height:1;
}
.sec__h span{
  font-family:var(--sans);font-size:var(--micro);letter-spacing:var(--track);
  color:var(--gold);transform:translateY(-.35em)
}

/* ─────────── манифест ─────────── */
.manifesto{padding:clamp(72px,13vh,150px) var(--pad) clamp(48px,8vh,90px);max-width:1180px;margin:0 auto}
.manifesto__lead{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.32rem,3.3vw,2.55rem);line-height:1.28;letter-spacing:-.005em;max-width:22ch;
}
.manifesto__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;
  margin-top:clamp(40px,7vh,84px);padding-top:26px;border-top:1px solid var(--line);
}
.manifesto__meta b{
  display:block;font-weight:400;font-size:var(--micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--gold);margin-bottom:7px;
}
.manifesto__meta span{color:var(--ink-2);font-size:.94rem}

/* ─────────── кадры кампании ─────────── */
.film{padding:clamp(48px,8vh,96px) var(--pad);max-width:1180px;margin:0 auto}
.film__grid{display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:1.55fr 1fr;
  grid-template-areas:"a b" "a c"}
.film figure{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.film img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.film figure:hover img{transform:scale(1.035)}
.film__a{grid-area:a}
.film__b{grid-area:b}
.film__c{grid-area:c}
/* подписи лежат на светлой фотографии — без подложки белый текст пропадает */
.film figure::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(to top,rgba(24,19,14,.52),rgba(24,19,14,0));
}
.film figcaption{
  position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;
  font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;
  text-shadow:0 1px 14px rgba(20,15,10,.6);
}
@media (max-width:760px){
  .film__grid{grid-template-columns:1fr;grid-template-areas:"a" "b" "c"}
  .film__b img,.film__c img{max-height:70vh}
}

/* ─────────── изделия ─────────── */
.pieces{padding:clamp(56px,9vh,110px) var(--pad);max-width:1180px;margin:0 auto}
.pieces__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0}
.pieces__list li{
  padding:clamp(24px,3vw,40px) clamp(18px,2.2vw,32px);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  transition:background .45s ease;
}
.pieces__list li:last-child{border-right:1px solid var(--line)}
.pieces__list li:hover{background:rgba(255,255,255,.55)}
.pieces__list b{font-weight:400;font-size:var(--micro);letter-spacing:var(--track);color:var(--gold)}
.pieces__list h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.3vw,1.72rem);
  margin:14px 0 10px;
}
.pieces__list p{margin:0 0 20px;color:var(--ink-2);font-size:.95rem;max-width:28ch}
.pieces__list span{font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:640px){
  .pieces__list li{border-right:1px solid var(--line)}
  .pieces__list li:last-child{border-bottom:1px solid var(--line)}
}

/* ─────────── запись на показ ─────────── */
.viewing{
  padding:clamp(64px,11vh,130px) var(--pad);max-width:1180px;margin:0 auto;
  border-top:1px solid var(--line);
}
.viewing__p{
  margin:0 0 34px;font-family:var(--serif);font-size:clamp(1.12rem,2.4vw,1.72rem);
  line-height:1.4;max-width:32ch;
}

/* ─────────── подвал ─────────── */
.foot{
  padding:clamp(40px,7vh,72px) var(--pad);background:var(--ink);color:#cfc6bb;
  display:grid;gap:20px;
}
.foot__mark{
  display:flex;align-items:center;gap:10px;color:var(--paper);
  font-family:var(--serif);font-size:1rem;letter-spacing:.3em;
}
.foot__note{margin:0;max-width:66ch;font-size:.85rem;line-height:1.65;color:#9a9086}
.foot__by{margin:0;font-size:var(--micro);letter-spacing:var(--track);text-transform:uppercase;color:#7d746b}