: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-image:url('../uploads/bg-photography.jpg')}
.f-film{background-image:url('../uploads/bg-film.jpg')}
.f-personal{background-image:url('../uploads/bg-personal.jpg')}
.f-directing{background-image:url('../uploads/bg-directing.jpg')}
.f-contact{background-image:url('../uploads/bg-contact.jpg')}
.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}

/* галерея проєкту — вертикальна стрічка */
.reel{display:flex;flex-direction:column;gap:clamp(12px,2vw,26px);max-width:1400px;margin:0 auto}
.reel figure{background:var(--graphite);overflow:hidden}
.reel img{width:100%;height:auto}
.reel .embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.reel .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel figcaption{padding:10px 2px;color:var(--muted);font-size:12px;letter-spacing:.04em}

.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}}