/* Mirabelle · Анфилада. Перенос макета из Claude Design в статический сайт. */

/* ---------- Шрифты (локально, те же наборы, что отдаёт Google Fonts) ---------- */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/golos-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prata-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prata-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/prata-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Токены ---------- */
:root{
  --bg:#f2eee6;
  --ink:#2a2622;
  --accent:#a0563a;
  --muted:#8a7f72;
  --text2:#5a5249;
  --paper:#fbf9f5;
  --line:rgba(42,38,34,.12);
  --green:#dfe5d8;
  --green-ink:#5f6b55;
  --pad:clamp(18px,4vw,44px);
  --serif:'Prata',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}

/* ---------- База ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* якоря встают под шапку; залы встают ровно в верх экрана, у них своя подложка под шапкой */
.coll,.about,.contact{scroll-margin-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
img{display:block}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:14px}
.skip:focus{top:12px;color:var(--bg)}

/* ---------- Шапка ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(242,238,230,0);transition:background .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
/* при прокрутке вниз шапка уезжает, при прокрутке вверх возвращается (site.js) */
.hdr.is-hidden{transform:translateY(-100%)}
.hdr.is-scrolled{background:rgba(242,238,230,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(42,38,34,.08)}
.hdr.is-menu{background:var(--bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none}
.hdr__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:64px;padding:0 var(--pad)}
.hdr__logo{display:flex;align-items:center;height:44px}
.hdr__logo img{height:15px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);font-size:13px;letter-spacing:.02em;white-space:nowrap}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--ink);color:var(--bg);border-radius:99px}
.pill:hover{background:var(--accent);color:var(--bg)}
.burger{all:unset;cursor:pointer;height:44px;padding:0 2px;display:none;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.burger__lines{display:flex;flex-direction:column;gap:5px}
.burger__lines span{width:22px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.burger[aria-expanded="true"] .burger__lines span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__lines span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:759.98px){.nav{display:none}.burger{display:flex}}

/* ---------- Мобильное меню ---------- */
.menu{position:fixed;inset:0;z-index:19;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:96px var(--pad) 36px;overflow:auto}
/* закрыто: невидимо и недоступно; открыто: фон проявляется, пункты подъезжают по очереди */
.menu{visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
.menu.is-open{visibility:visible;opacity:1;transition:opacity .35s ease,visibility 0s}
.menu__nav a,.menu__contacts{opacity:0;transform:translateY(22px) scale(.96);transform-origin:left center;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.menu.is-open .menu__nav a,.menu.is-open .menu__contacts{opacity:1;transform:none}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.05s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.1s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.15s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.2s}
.menu.is-open .menu__contacts{transition-delay:.28s}
.menu__nav{display:flex;flex-direction:column;font-family:var(--serif);font-size:clamp(34px,9vw,52px);line-height:1.25}
.menu__nav a{padding:12px 0;border-bottom:1px solid var(--line)}
.menu__contacts{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.7;color:var(--text2)}
.menu__contacts span{text-wrap:pretty;margin-bottom:4px}
.menu__contacts a{display:flex;align-items:center;min-height:44px}
.menu__phone{font-size:22px;font-weight:500;line-height:1.4;color:var(--ink)}
@media (min-width:760px){.menu{display:none!important}}

/* ---------- Главный экран: веер работ ---------- */
.hero{height:200vh;position:relative}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:64px 12px 0}
.fan{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,28px)}
.fan__item{flex:none;width:clamp(96px,16vw,240px);height:auto;background:#e0d9cd;box-shadow:0 30px 50px -25px rgba(60,40,20,.45);transform:translateY(calc(var(--dy) * (1 - var(--p,0) * 1.4))) rotate(calc(var(--rot) * (1 - var(--p,0) * 1.6))) scale(calc(.85 + var(--p,0) * .4));opacity:calc(1 - var(--p,0) * .8)}
/* Подложка под заголовком: эллипс closest-side доходит до нуля ровно у краёв блока,
   иначе на узком экране край блока резал боковые картины веера жёсткой линией */
.hero__title{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:clamp(56px,12vw,140px) clamp(20px,8vw,160px);background:radial-gradient(closest-side,rgba(242,238,230,.98) 0%,rgba(242,238,230,.94) 55%,rgba(242,238,230,.6) 80%,rgba(242,238,230,0) 100%);transform:translateY(calc(var(--p,0) * -40vh));opacity:calc(1 - var(--p,0) * 2)}
/* «МИРАБЕЛЬ» капсом, как в логотипе и портфолио: шире латиницы, поэтому кегль и поля меньше */
.hero h1{font-size:clamp(38px,9.4vw,116px);line-height:1;letter-spacing:.04em;margin-right:-.04em}
.hero__lead{max-width:420px;font-size:17px;line-height:1.75;color:var(--text2);text-wrap:balance}
.hero__hint{margin-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--muted)}

/* ---------- Залы: вертикальный скролл двигает анфиладу вбок ---------- */
/* Залы наезжают на первый экран снизу, как лист (margin-top), пока веер
   доигрывает. Текст входа едет у самой кромки листа (--v от fx.js: 0 когда лист
   только показался, 1 когда прилип) и к моменту, когда лист встал, опускается
   на своё место по центру, как в макете (--rest меряет site.js).
   «Новые работы 2026» появляется сразу, как растаял заголовок. */
.halls{position:relative;margin-top:-55vh}
.halls__stage{position:sticky;top:0;height:100vh;overflow:hidden;box-shadow:0 -20px 40px -20px rgba(60,40,20,.3)}
.halls__track{display:flex;height:100%;will-change:transform}
.halls__intro{flex:none;width:min(100%,720px);height:100%;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:64px clamp(24px,6vw,80px) 40px;background:var(--bg)}
.halls__intro>*{transform:translateY(calc((1 - var(--v,1)) * (28px - var(--rest,28px))))}
.halls__intro h2{font-size:clamp(40px,5vw,72px);line-height:1.1}
.halls__intro p{font-size:17px;line-height:1.75;color:var(--text2);max-width:420px;text-wrap:pretty}
.halls__arrow{font-family:var(--serif);font-size:40px;line-height:1;color:var(--accent)}
/* Зал. Вертикальный экран: подпись под картиной, высота картины считается так,
   чтобы картина + подпись влезли между шапкой (80px) и полосой прогресса (60px),
   под подпись оставлено до 220px. Горизонтальный экран: подпись всегда рядом,
   картина ужимается по ширине, чтобы подписи хватило места. */
.room{--gap:clamp(28px,5vw,80px);flex:none;width:100%;height:100%;position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:20px var(--gap);padding:80px clamp(20px,5vw,80px) 60px}
.room__no{position:absolute;top:68px;left:clamp(20px,5vw,80px);font-family:var(--serif);font-size:clamp(72px,14vw,200px);line-height:.8;color:rgba(255,255,255,.45)}
.room__art{position:relative;width:min(100%,calc(clamp(160px,100vh - 380px,52vh) * var(--ar)));height:auto;box-shadow:0 2px 0 rgba(0,0,0,.05),0 40px 60px -30px rgba(40,25,10,.5)}
@media (min-aspect-ratio:11/10){
  .room{flex-wrap:nowrap}
  .room__art{width:min(calc(100% - 280px - var(--gap)),calc(min(58vh,100vh - 150px) * var(--ar)))}
}
.room__card{position:relative;flex:0 1 280px;min-width:0;display:flex;flex-direction:column;gap:8px;background:var(--paper);padding:18px 20px;box-shadow:0 10px 20px -12px rgba(40,25,10,.3)}
.room__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--muted)}
.room__title{font-size:22px;line-height:1.3}
.room__meta{font-size:13px;line-height:1.65;color:var(--text2)}
/* зона касания 44px, текст стоит там же, где в макете */
.room__cta{align-self:flex-start;padding:12px 0;margin:-6px 0 -12px;font-size:13px;color:var(--accent)}
.halls__progress{position:absolute;left:var(--pad);right:var(--pad);bottom:26px;height:2px;background:rgba(42,38,34,.15)}
.halls__progress span{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ink)}

/* ---------- Вся коллекция: слайдер ---------- */
.coll{padding:clamp(72px,12vh,140px) 0 clamp(40px,8vh,80px)}
.coll__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:0 var(--pad);margin-bottom:28px}
.coll__head h2{font-size:clamp(36px,4.4vw,60px);line-height:1.1}
.coll__ctrl{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.round{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center}
.round:hover{background:var(--accent)}
.round:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 16px;scroll-padding:0 var(--pad);scrollbar-width:none;list-style:none;margin:0}
.slider::-webkit-scrollbar{display:none}
.card{flex:none;width:clamp(230px,70vw,300px);scroll-snap-align:start;padding:22px;display:flex;flex-direction:column;gap:16px}
.card__frame{height:260px;display:flex;align-items:center;justify-content:center}
.card__frame img{width:min(100%,calc(260px * var(--ar)));height:auto;background:rgba(42,38,34,.05);box-shadow:0 18px 30px -16px rgba(40,25,10,.45)}
.card__text{display:flex;flex-direction:column;gap:6px;background:var(--paper);padding:14px 16px}
.card__title{font-size:19px;line-height:1.3}
.card__meta{font-size:13px;line-height:1.65;color:var(--text2)}

/* ---------- О художнице ---------- */
.about{padding:clamp(60px,12vh,140px) var(--pad);max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(32px,6vh,56px)}
.about__row{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,96px);align-items:center}
/* Круг с обложки портфолио: проявляется из центра, под ним мягкая тень, как в презентации */
.about__img{position:relative;flex:1 1 280px;max-width:400px}
.about__img img{width:100%;height:auto;border-radius:50%;clip-path:circle(calc(34% + var(--e,1) * 16%))}
.about__img::after{content:'';position:absolute;left:16%;right:16%;bottom:-8%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,25,10,.24),rgba(40,25,10,0));opacity:var(--e,1);pointer-events:none}
.about__text{flex:1 1 380px;display:flex;flex-direction:column;gap:22px}
.about__text h2{font-size:clamp(40px,5vw,72px);line-height:1.1}
.about__lead{font-size:18px;line-height:1.8;color:#4a433c;text-wrap:pretty}
.about__note{font-size:15px;line-height:1.8;color:#6b6259;text-wrap:pretty}
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.year{padding:26px;display:flex;flex-direction:column;gap:16px}
/* проявляются один раз, когда доезжают до экрана (site.js), без привязки к скроллу */
.js .year{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .year:nth-child(2){transition-delay:.12s}
.js .year:nth-child(3){transition-delay:.24s}
.js .year.is-in{opacity:1;transform:none}
.year__y{font-family:var(--serif);font-size:clamp(44px,4.4vw,60px);line-height:.9}
.year__item{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid rgba(42,38,34,.14)}
.year__t{font-size:15px;font-weight:500;line-height:1.5}
.year__d{font-size:14px;line-height:1.65;color:var(--text2)}

/* ---------- Контакты ---------- */
.contact{margin:0 clamp(10px,2vw,20px) clamp(10px,2vw,20px);border-radius:24px;background:var(--green);padding:clamp(56px,10vw,120px) clamp(20px,5vw,64px) 28px;display:flex;flex-direction:column;gap:32px}
.contact .eyebrow{color:var(--green-ink)}
.contact h2{font-size:clamp(32px,5vw,76px);line-height:1.15;max-width:1000px;text-wrap:balance}
.contact__btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:99px;font-size:16px}
.btn--solid{background:var(--ink);color:var(--bg);font-weight:500}
.btn--solid:hover{background:var(--accent);color:var(--bg)}
.btn--line{border:1px solid var(--ink)}
.btn--line:hover{border-color:var(--accent);color:var(--accent)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--green-ink)}
.foot img{height:13px;width:auto;opacity:.85}

/* ---------- Без JS: залы листаются вбок вручную, анимации стоят ---------- */
.no-js .hero{height:auto}
.no-js .hero__stage{position:relative}
.no-js .halls{margin-top:0}
.no-js .halls__stage{position:relative;overflow-x:auto}
.no-js .halls__progress{display:none}

/* ---------- Меньше движения по настройке системы ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .year{opacity:1;transform:none;transition:none}
  .menu,.menu.is-open,.menu__nav a,.menu__contacts,.burger__lines span{transition:none}
  .menu__nav a,.menu__contacts{transform:none}
  .about__img img{clip-path:none}
  .about__img::after{opacity:1}
  .hdr{transition:none}
}