/* Art Gallery Tolstoy — рыба. Референс визуала: edenart.com
   Noto Serif (дисплей) + Manrope (текст/UI), белый фон, чёрный текст, много воздуха. */

:root{
  --bg:#ffffff;
  --fg:#141414;
  --muted:#8a8a8a;
  --line:#e7e5e2;
  --accent:#8a2b1a;          /* тёплый бордо, используем скупо */
  --paper:#f6f4f1;           /* тёплый off-white для секций */
  --serif:'Noto Serif',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --maxw:1320px;
  --gap:clamp(20px,4vw,56px);
  --pad:clamp(28px,5vw,64px);   /* горизонтальный отступ контента от краёв экрана */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--fg);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- reveal (только при JS) ---------- */
.js .reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* вход первого экрана — CSS-каскад (не GSAP), база видима без JS */
.js .intro-anim{opacity:0;transform:translateY(26px)}
.js .intro-anim.ready{opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
  color:#fff;mix-blend-mode:normal;
}
.site-header.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:var(--fg);padding:14px 0;box-shadow:0 1px 0 var(--line)}
/* шапка как у Eden: название по центру сверху, меню под ним */
.hd-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;gap:20px}
.hd-top{position:relative;width:100%;display:flex;align-items:center;justify-content:center;min-height:28px}
.brand{display:inline-flex;align-items:center;line-height:0;transition:opacity .35s var(--ease)}
.brand svg{display:block;height:40px;width:auto;fill:currentColor}
/* главная: логотип в шапке скрыт над героем, появляется при начале скролла (класс ставит main.js) */
.brand.is-hidden{opacity:0;pointer-events:none}
.nav{display:flex;align-items:center;gap:38px}
.nav a{font-size:13px;letter-spacing:.02em;font-weight:400;position:relative;padding-bottom:4px;opacity:.82}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.active::after{width:100%}
.lang{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:.08em;font-weight:500;border:1px solid currentColor;border-radius:100px;padding:7px 14px;opacity:.85;transition:opacity .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.lang:hover{opacity:1}
.burger{display:none;width:30px;height:20px;position:absolute;left:0;top:50%;transform:translateY(-50%)}
.burger span{position:absolute;left:0;width:100%;height:2px;background:currentColor;transition:.3s var(--ease)}
.burger span:first-child{top:4px}.burger span:last-child{bottom:4px}
.burger.open span:first-child{top:10px;transform:rotate(45deg)}
.burger.open span:last-child{bottom:10px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;transform:translateY(-100%);transition:transform .5s var(--ease)}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:var(--serif);font-size:30px}

/* ---------- hero (контент по центру, как у Eden) ---------- */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:#0d0d0d}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;filter:brightness(.74)}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 45%,rgba(0,0,0,.42))}
.hero-in{position:relative;z-index:2;width:100%;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center}
.hero-title{font-family:var(--serif);font-weight:400;line-height:1;font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.01em}
.hero-logo{width:clamp(280px,58vw,600px);margin:0 auto;color:#fff;line-height:0}
.hero-logo svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 26px rgba(0,0,0,.4))}
.hero-sub{font-size:clamp(.95rem,1.4vw,1.15rem);max-width:440px;margin:22px auto 32px;font-weight:300;opacity:.92}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:1px;height:54px;background:linear-gradient(#fff,transparent);z-index:2;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- buttons (капсулы, медленный ховер как у Eden) ---------- */
.btn{display:inline-block;font-size:14px;letter-spacing:.02em;font-weight:500;padding:14px 34px;border-radius:100px;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);cursor:pointer}
.btn-light{background:#fff;color:#141414;border:1px solid #fff}
.btn-light:hover{background:transparent;color:#fff}
.btn-dark{background:var(--fg);color:#fff;border:1px solid var(--fg)}
.btn-dark:hover{background:transparent;color:var(--fg)}
/* liquid glass — только поверх медиа (герой): полупрозрачное стекло с блюром */
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 30px rgba(0,0,0,.16)}
.btn-glass:hover{background:#fff;color:#141414;border-color:#fff;box-shadow:0 10px 34px rgba(0,0,0,.2)}

/* ---------- intro ---------- */
.intro{padding-top:clamp(80px,14vh,180px);padding-bottom:clamp(80px,14vh,180px)}
.intro-lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.32;max-width:16em;letter-spacing:-.01em}

/* ---------- blocks ---------- */
.block{padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(40px,7vh,80px)}
.block-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(28px,5vh,56px);border-bottom:1px solid var(--line);padding-bottom:22px}
.block-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4vw,3rem);letter-spacing:-.01em}
.link-more{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);transition:color .3s}
.link-more:hover{color:var(--accent)}

/* ---------- artist strip (home) ---------- */
.artist-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.works-soon{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--muted);font-weight:300;padding:clamp(20px,4vh,40px) 0}
.coll-empty{text-align:center}
.coll-empty .link-more{display:inline-block;margin-top:16px}
.a-card-img{aspect-ratio:3/4;overflow:hidden;background:var(--paper)}
.a-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.a-card:hover .a-card-img img{transform:scale(1.05)}
.a-card-name{font-family:var(--serif);font-size:clamp(.95rem,1.3vw,1.15rem);margin-top:14px}
.a-card-years{font-size:12px;color:var(--muted);letter-spacing:.03em;margin-top:2px}

/* ---------- grid works ---------- */
.grid{columns:4;column-gap:clamp(14px,1.6vw,26px)}
.grid .tile{break-inside:avoid;margin-bottom:clamp(14px,1.6vw,26px);cursor:zoom-in}
.grid-video .tile{cursor:default}
.tile-img{position:relative;overflow:hidden;background:var(--paper)}
.tile-img img,.tile-img video{width:100%;height:auto;transition:transform .8s var(--ease)}
.tile:hover .tile-img img{transform:scale(1.04)}
.badge{position:absolute;top:12px;left:12px;background:rgba(20,20,20,.85);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.tile figcaption{padding:12px 2px 4px;display:flex;flex-direction:column;gap:2px}
.t-title{font-family:var(--serif);font-size:1rem}
.t-meta{font-size:12px;color:var(--muted);letter-spacing:.02em}
/* конфеты Julie Jaler — на белом фоне с воздухом */
.tile.candy .tile-img{background:#fff;padding:7% 9%}
.tile.candy:hover .tile-img img{transform:scale(1.03)}
/* карусель ракурсов в плитке */
.tile.multi .tile-img{position:relative}
.ti-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.86);color:#141414;font-size:22px;line-height:0;
  display:flex;align-items:center;justify-content:center;z-index:3;
  opacity:0;transition:opacity .3s var(--ease),background .3s var(--ease);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ti-nav:hover{background:#fff}
.tile.multi:hover .ti-nav{opacity:1}
.ti-prev{left:10px}.ti-next{right:10px}
.ti-count{position:absolute;bottom:10px;right:10px;z-index:3;background:rgba(20,20,20,.72);color:#fff;
  font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:100px}
@media(pointer:coarse){.tile.multi .ti-nav{opacity:.92}}

/* ---------- page head ---------- */
.page-head{padding-top:clamp(120px,18vh,210px);padding-bottom:clamp(30px,5vh,60px)}
.ph-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,7vw,5rem);letter-spacing:-.01em;line-height:1}

/* ---------- artists list ---------- */
.artist-list{padding-bottom:clamp(60px,10vh,120px);display:flex;flex-direction:column;gap:clamp(40px,8vh,110px)}
.artist-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.artist-row:nth-child(even) .ar-img{order:2}
.ar-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.ar-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.artist-row:hover .ar-img img{transform:scale(1.04)}
.ar-years{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ar-name{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.5vw,3.6rem);letter-spacing:-.01em;line-height:1}
.ar-en{color:var(--muted);font-size:1rem;margin-top:6px;letter-spacing:.02em}
.ar-short{font-size:1.05rem;margin:22px 0 26px;max-width:34ch;color:#3a3a3a}
.ar-link{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--fg);padding-bottom:3px;transition:.3s}
.artist-row:hover .ar-link{color:var(--accent);border-color:var(--accent)}

/* ---------- artist page ---------- */
.artist-hero{position:relative;height:70svh;min-height:460px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.artist-hero .ah-img{position:absolute;inset:0}
.artist-hero .ah-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.artist-hero .ah-img::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.6))}
/* лого-аватар (NAOR): вписываем целиком, поля чёрные под цвет лого */
.a-card-img.logo,.ar-img.logo,.artist-hero .ah-img.logo{background:#000}
.a-card-img.logo img,.ar-img.logo img,.artist-hero .ah-img.logo img{object-fit:contain}
.a-card:hover .a-card-img.logo img,.artist-row:hover .ar-img.logo img{transform:none}
.artist-hero .ah-img.logo img{filter:none}
.ah-txt{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,7vh,80px)}
.ah-years{font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.9;margin-bottom:12px}
.ah-name{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:-.02em}
.ah-en{opacity:.85;margin-top:8px;font-size:1.1rem}
.artist-bio{padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(60px,10vh,120px)}
.bio{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.6;max-width:34em}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,5vh,50px)}
.filter{font-size:13px;letter-spacing:.01em;padding:9px 20px;border:1px solid var(--line);border-radius:100px;color:var(--muted);transition:.4s var(--ease)}
.filter:hover{border-color:var(--fg);color:var(--fg)}
.filter.active{background:var(--fg);color:#fff;border-color:var(--fg)}
.tile.hide{display:none}

/* ---------- visit ---------- */
.visit-cta{background:var(--paper);margin-top:clamp(60px,10vh,120px)}
.visit-cta-in{padding-top:clamp(70px,12vh,140px);padding-bottom:clamp(70px,12vh,140px);text-align:center}
.vc-kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.visit-cta-in h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.01em}
.vc-addr{font-size:1.2rem;margin:22px 0 6px}
.vc-note{color:var(--muted);margin-bottom:34px}
.visit-contact{padding-bottom:clamp(60px,9vh,110px)}
.visit-info{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,90px)}
.vi-block{padding:24px 0;border-top:1px solid var(--line)}
.vi-block:nth-child(-n+2){border-top:none;padding-top:0}
.vi-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.vi-big{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;line-height:1.2}
.map-wrap{height:clamp(320px,45vh,520px)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.4) contrast(1.05)}

/* ---------- footer ---------- */
.site-footer{background:var(--fg);color:#e8e6e2;padding:clamp(60px,9vh,100px) 0 30px}
.ft-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:2fr 1fr 1.3fr 1fr;gap:40px}
.ft-brand{font-family:var(--serif);font-size:1.5rem;margin-bottom:14px}
.ft-brand svg{width:200px;max-width:100%;height:auto;display:block}
.ft-muted{color:#9b9893;font-size:14px}
.ft-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7d7a75;margin-bottom:12px}
.ft-grid a:hover{color:#fff}
.ft-bottom{max-width:var(--maxw);margin:60px auto 0;padding:22px var(--pad) 0;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;font-size:12px;color:#7d7a75;letter-spacing:.04em}
.ft-draft{opacity:.7}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(15,14,13,.96);display:none;align-items:center;justify-content:center;flex-direction:column}
.lb.open{display:flex}
.lb img{max-width:88vw;max-height:78vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-cap{color:#fff;text-align:center;margin-top:22px}
.lb-cap .lc-title{font-family:var(--serif);font-size:1.4rem}
.lb-cap .lc-meta{color:#b6b3ae;font-size:14px;margin-top:4px}
.lb-cap .lc-artist{display:inline-block;color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:14px;padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.45);text-decoration:none;transition:opacity .3s}
.lb-cap .lc-artist:hover{opacity:.65}
/* телефоны не переносятся посреди номера */
a[href^="tel:"]{white-space:nowrap}
.lb-close{position:absolute;top:24px;right:28px;font-size:34px;color:#fff;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:44px;color:#fff;opacity:.7;padding:20px;transition:opacity .3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:12px}.lb-next{right:12px}
/* белый режим лайтбокса — для конфет Julie Jaler (полный просмотр на белом) */
.lb.light{background:rgba(255,255,255,.98)}
.lb.light img{box-shadow:none}
.lb.light .lb-close,.lb.light .lb-nav,.lb.light .lc-title{color:#141414}
.lb.light .lc-meta{color:#8a8a8a}
.lb.light .lc-artist{color:#141414;border-bottom-color:rgba(20,20,20,.35)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .grid{columns:3}
  .artist-strip{grid-template-columns:repeat(3,1fr);gap:18px 14px}
}
@media(max-width:768px){
  .nav{display:none}
  .burger{display:block}
  .brand svg{height:28px}   /* логотип компактнее между бургером и языком */
  .lang{padding:7px 12px}
  .grid{columns:2;column-gap:16px}
  .grid .tile{margin-bottom:20px}
  .block-head{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:16px}  /* «Все художники» под заголовком */
  .artist-row{grid-template-columns:1fr;gap:22px}
  .artist-row:nth-child(even) .ar-img{order:0}
  .visit-info{grid-template-columns:1fr}
  .vi-block:nth-child(2){border-top:1px solid var(--line);padding-top:24px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-bottom{flex-direction:column;gap:8px}
}
@media(max-width:480px){
  .grid{columns:1}
  .artist-strip{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr;gap:30px}   /* на телефоне всё в одну колонку — почты/адрес влезают */
  .ft-grid a,.ft-muted{overflow-wrap:break-word}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .intro-anim{opacity:1;transform:none}
  .reveal.in,.intro-anim.ready{transition:none}
}

/* ---- Видео-вкладка: бегущие колонки ---- */
.ph-sub{margin-top:14px;color:var(--muted);font-size:clamp(15px,2vw,18px);max-width:40ch}
.vidwall{position:relative;height:132svh;min-height:900px;overflow:hidden;background:#0b0b0b;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}
.vidwall__col{display:flex;flex-direction:column;gap:12px;will-change:transform}
.vidwall__col--up{animation:vidwall-scroll 30s linear infinite}
.vidwall__col--down{animation:vidwall-scroll 30s linear infinite reverse}
/* дубль половины: -50% попадает в середину gap, лишние -6px (gap/2) дотягивают ровно на стык */
@keyframes vidwall-scroll{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 6px))}}
.vidwall__col video{width:100%;height:auto;display:block;border-radius:6px;object-fit:cover;
  background:#000;cursor:pointer;filter:brightness(.9) saturate(1.03);
  transition:filter .25s var(--ease),transform .25s var(--ease)}
.vidwall__col video:hover{filter:brightness(1) saturate(1.1);transform:scale(1.015)}
@media(max-width:720px){
  .vidwall{grid-template-columns:repeat(2,1fr);height:118svh;min-height:740px}
  .vidwall__col:nth-child(3){display:none}
}
/* видео-лайтбокс */
.vlb{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);background:rgba(8,8,8,.94);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);cursor:pointer}
.vlb.is-open{display:flex}
.vlb-stage{position:relative;display:flex;align-items:center;justify-content:center;
  max-width:min(560px,100%);max-height:100%}
.vlb-stage video{display:block;width:auto;height:auto;max-width:100%;max-height:86vh;border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);background:#000;cursor:default}
.vlb-close{position:fixed;top:clamp(12px,2.6vw,26px);right:clamp(12px,2.6vw,26px);width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;
  font-family:var(--sans);font-size:30px;line-height:1;cursor:pointer;opacity:.75;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.vlb-close:hover{opacity:1;transform:rotate(90deg)}