:root{
  --graphite-deep:#131416;
  --graphite:#1B1D20;
  --graphite-up:#24272B;
  --bone:#E8E6E2;
  --muted:#7E8085;
  --line:rgba(232,230,226,.12);
  --f:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{background:var(--graphite-deep);color:var(--bone);font-family:var(--f);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- фонові світлові поля (головна) ---------- */
.stage{position:fixed;inset:0;z-index:0;background:var(--graphite-deep)}
.field{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);background-size:cover;background-position:center}
.field.on{opacity:1}
.f-photography{background:radial-gradient(120% 80% at 72% 38%,rgba(214,220,232,.20) 0%,transparent 58%),radial-gradient(60% 50% at 30% 78%,rgba(120,132,150,.14) 0%,transparent 70%)}
.f-film{background:linear-gradient(103deg,transparent 38%,rgba(226,232,240,.13) 46%,transparent 54%),radial-gradient(90% 70% at 80% 62%,rgba(150,160,178,.16) 0%,transparent 66%)}
.f-personal{background:radial-gradient(45% 60% at 22% 30%,rgba(236,230,222,.16) 0%,transparent 68%),radial-gradient(80% 90% at 88% 88%,rgba(96,104,118,.16) 0%,transparent 72%)}
.f-directing{background:conic-gradient(from 210deg at 62% 44%,rgba(228,232,238,.15),transparent 28%,transparent 72%,rgba(228,232,238,.09)),radial-gradient(70% 60% at 50% 100%,rgba(110,118,132,.18) 0%,transparent 70%)}
.f-contact{background:radial-gradient(100% 90% at 50% 50%,rgba(180,188,200,.10) 0%,transparent 72%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.35'/></svg>")}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(19,20,22,.86) 0%,rgba(19,20,22,.52) 40%,rgba(19,20,22,.90) 100%)}

/* ---------- каркас ---------- */
.shell{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,3.2vw,38px);gap:clamp(24px,5vh,56px)}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.mark{width:clamp(44px,5vw,60px);height:auto}
.where{font-size:clamp(10px,1vw,12px);letter-spacing:.14em;color:var(--muted);text-align:right;line-height:1.7}
.where a{text-decoration:none}
.where a:hover{color:var(--bone)}

/* ---------- індекс розділів ---------- */
.index{align-self:center;display:flex;flex-direction:column;gap:clamp(2px,.8vh,8px);max-width:1100px}
.entry{display:block;text-decoration:none;position:relative;padding:clamp(4px,.9vh,10px) 0;transition:opacity .35s ease}
.entry-line{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,34px);flex-wrap:wrap}
.entry h2{font-size:clamp(34px,7.6vw,96px);font-weight:600;letter-spacing:-.035em;line-height:.98;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.entry .note{font-size:clamp(10px,1.05vw,13px);color:var(--muted);letter-spacing:.06em;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;white-space:nowrap;padding-bottom:clamp(4px,.8vh,10px)}
.index:hover .entry{opacity:.28}
.index:hover .entry:hover,.index .entry:focus-visible{opacity:1}
.entry:hover h2,.entry:focus-visible h2{transform:translateX(clamp(8px,1.4vw,20px))}
.entry:hover .note,.entry:focus-visible .note{opacity:1;transform:translateY(0)}
.entry:focus-visible{outline:1px solid var(--bone);outline-offset:6px}

.base{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:clamp(12px,2vh,20px);border-top:1px solid var(--line)}
.who{font-size:clamp(12px,1.25vw,15px);font-weight:500;letter-spacing:-.01em}
.who span{display:block;color:var(--muted);font-weight:400;font-size:.82em;letter-spacing:.04em;margin-top:3px}
.mail{font-size:clamp(11px,1.15vw,14px);color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .3s,border-color .3s}
.mail:hover{color:var(--bone);border-color:var(--line)}

/* ---------- внутрішні сторінки ---------- */
.page{position:relative;z-index:1;padding:clamp(18px,3.2vw,38px);max-width:1600px;margin:0 auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(40px,8vh,90px)}
.nav-left{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.back{font-size:12px;letter-spacing:.1em;color:var(--muted);text-decoration:none;transition:color .3s}
.back:hover{color:var(--bone)}
.nav-links{display:flex;gap:clamp(12px,1.8vw,24px);flex-wrap:wrap}
.nav-links a{font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a.is-current{color:var(--bone)}

.page-head{margin-bottom:clamp(30px,6vh,64px)}
.page-head h1{font-size:clamp(30px,5.4vw,66px);font-weight:600;letter-spacing:-.035em;line-height:1}
.page-head .sub{color:var(--muted);font-size:clamp(12px,1.2vw,15px);margin-top:10px;letter-spacing:.03em}
.meta-row{display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:clamp(11px,1.1vw,13px);letter-spacing:.05em}
.meta-row b{color:var(--bone);font-weight:500}

/* сітка проєктів */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(10px,1.4vw,18px)}
.tile{display:block;text-decoration:none;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--graphite-up)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .4s;opacity:.86}
.tile:hover img{transform:scale(1.04);opacity:1}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(0deg,rgba(19,20,22,.92) 0%,transparent 100%)}
.tile-cap h3{font-size:clamp(15px,1.7vw,20px);font-weight:600;letter-spacing:-.02em}
.tile-cap span{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;margin-top:3px}
.tile-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:.06em}


/* ---------- галерея проєкту: сітка прев'ю ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(8px,1vw,14px)}
.cell{position:relative;display:block;padding:0;border:0;background:var(--graphite-up);
  aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;border-radius:2px}
.cell img{width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .3s}
.cell:hover img,.cell:focus-visible img{transform:scale(1.045);opacity:1}
.cell:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.cell-blank{display:block;width:100%;height:100%;background:var(--graphite-up)}
.cell-video{cursor:pointer}
.play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(19,20,22,.62);border:1px solid rgba(232,230,226,.45);
  transition:background .25s,border-color .25s}
.play::after{content:'';position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:12px solid var(--bone);border-top:8px solid transparent;border-bottom:8px solid transparent}
.cell-video:hover .play{background:rgba(19,20,22,.85);border-color:var(--bone)}

/* ---------- лайтбокс ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(10,11,12,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(48px,7vh,80px) clamp(52px,7vw,110px)}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:2px;user-select:none}
.lb-stage .lb-embed{position:relative;width:min(100%,1500px);aspect-ratio:16/9;background:#000}
.lb-stage .lb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.lb-close{position:absolute;top:14px;right:16px;z-index:3;background:none;border:0;
  color:var(--muted);font-size:34px;line-height:1;cursor:pointer;padding:6px 12px;
  transition:color .2s;font-family:var(--f)}
.lb-close:hover,.lb-close:focus-visible{color:var(--bone)}

.lb-nav{position:absolute;top:0;bottom:0;width:clamp(48px,7vw,110px);z-index:2;
  background:none;border:0;cursor:pointer;transition:background .25s}
.lb-nav::before{content:'';position:absolute;top:50%;left:50%;width:14px;height:14px;
  border-top:1.5px solid var(--bone);border-right:1.5px solid var(--bone);opacity:.55;transition:opacity .2s}
.lb-prev{left:0}
.lb-prev::before{transform:translate(-40%,-50%) rotate(-135deg)}
.lb-next{right:0}
.lb-next::before{transform:translate(-60%,-50%) rotate(45deg)}
.lb-nav:hover{background:rgba(232,230,226,.04)}
.lb-nav:hover::before,.lb-nav:focus-visible::before{opacity:1}
.lb-nav:focus-visible{outline:1px solid var(--line);outline-offset:-2px}

.lb-bar{position:absolute;left:0;right:0;bottom:0;padding:14px clamp(16px,3vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);pointer-events:none}
.lb-cap{max-width:70%}
.lb-count{font-variant-numeric:tabular-nums}


@media (max-width:700px){
  .nav{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:34px}
  .nav-left{flex-direction:column;align-items:flex-start;gap:12px;width:100%}
  .nav-links{gap:14px 16px}
  .nav .back{order:-1}
}

@media (max-width:640px){
  .gal{grid-template-columns:repeat(2,1fr);gap:6px}
  .lb-stage{padding:44px 10px 56px}
  .lb-nav{width:56px}
  .play{width:38px;height:38px;margin:-19px 0 0 -19px}
}

.note-empty{color:var(--muted);font-size:13px;letter-spacing:.04em;padding:40px 0}
.page-foot{margin-top:clamp(50px,10vh,110px);padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:12px;letter-spacing:.05em}
.page-foot a{text-decoration:none}
.page-foot a:hover{color:var(--bone)}

.contact-box{max-width:620px}
.contact-box p{color:var(--muted);line-height:1.8;font-size:clamp(13px,1.3vw,16px);margin-bottom:22px}
.contact-box a.big{font-size:clamp(20px,3vw,34px);font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.contact-box a.big:hover{border-color:var(--bone)}

@media (max-width:640px){
  .index:hover .entry{opacity:1}
  .entry .note{opacity:1;transform:none;font-size:11px}
  .entry-line{flex-direction:column;gap:2px}
  .base{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}