/* ═══ DONYA — v3 · editorial gallery-wall + technical mono ═══ */
:root{
  --bg:#efe7d9;--bg-2:#e5d9c6;--ink:#171310;--ink-2:#4a453d;--mut:#978c78;
  --line:rgba(23,19,16,.17);--accent:#b4462b;
  --disp:"Bodoni Moda",Georgia,serif;--mono:"Space Mono",ui-monospace,monospace;--sig:"Sacramento",cursive;
  --pad:clamp(1.1rem,4vw,3.4rem);--e:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;overflow-anchor:none}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-weight:400;line-height:1.5;overflow-x:hidden;cursor:none}
@media (hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--bg)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}

/* film grain + faint vignette over everything */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(23,19,16,.08))}

.ln{display:block;overflow:hidden}
.ln>span{display:inline-block;transform:translateY(115%);transition:transform 1.1s var(--e)}
.in-view .ln>span,.ln.in-view>span{transform:translateY(0)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .9s var(--e),transform .9s var(--e)}
.reveal.in-view{opacity:1;transform:none}
[data-rise]{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
[data-rise].in{opacity:1;transform:none}
.it{font-style:italic}

/* ═══ LOADER ═══ */
.loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);transition:transform 1.1s var(--e)}
.loader.done{transform:translateY(-101%)}
.loader__n{font-family:var(--disp);font-size:clamp(4rem,20vw,16rem);line-height:.8;font-weight:500}
.loader__w{font-family:var(--sig);font-size:clamp(2rem,7vw,4rem);color:var(--accent);margin-bottom:.5rem}

/* ═══ CURSOR ═══ */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--ink);z-index:998;pointer-events:none;transform:translate(-50%,-50%);transition:width .4s var(--e),height .4s var(--e),background .3s;mix-blend-mode:difference}
.cursor__l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .3s}
.cursor.view{width:84px;height:84px;background:#fff}
.cursor.view .cursor__l{opacity:1}
.cursor.hide{opacity:0}
@media (hover:none){.cursor{display:none}}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1.3rem var(--pad);transition:.5s var(--e);mix-blend-mode:difference;color:#fff}
.nav.small{mix-blend-mode:normal;color:var(--ink);padding:.85rem var(--pad);background:rgba(241,238,231,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav__logo{font-family:var(--disp);font-size:1.3rem;font-weight:500;letter-spacing:.02em}
.nav__reg{font-size:.5rem;vertical-align:super}
.nav__mid{display:flex;gap:1.8rem}
.nav__lnk{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;position:relative}
.nav__lnk::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:currentColor;transition:width .45s var(--e)}
.nav__lnk:hover::after{width:100%}
.nav__burger{display:none;flex-direction:column;gap:5px;width:26px;background:none;border:0;cursor:pointer}
.nav__burger span{height:1.5px;background:currentColor;transition:.4s var(--e)}
.nav.open .nav__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.open .nav__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e)}
.mmenu.open{clip-path:inset(0 0 0 0)}
.mmenu__i{font-family:var(--disp);font-size:clamp(2.6rem,13vw,4.5rem);font-weight:500;line-height:1.1}
.mmenu__ig{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;margin-top:2rem;color:var(--accent)}

/* ═══ HERO ═══ */
.hero{position:relative;height:340vh}
.hero__sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#0d0b0a}
.hero__videowrap{position:absolute;inset:0;will-change:transform}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.hero__veil{position:absolute;inset:0;background:rgba(13,11,10,.42)}
.hero__grid{position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/33.33% 100%,
   linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/100% 50%;
  opacity:.5;mix-blend-mode:overlay}
.hero__ui{position:absolute;inset:0;z-index:3;color:#f1eee7}
.hero__c{position:absolute;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.hero__c--tl{top:6.5rem;left:var(--pad)}
.hero__c--tr{top:6.5rem;right:var(--pad);text-align:right}
.hero__c--bl{bottom:2.2rem;left:var(--pad)}
.hero__c--br{bottom:2.2rem;right:var(--pad)}
.hero__c i{font-style:normal}
.hero__name{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;will-change:transform}
.hero__name .hero__ln{display:block;overflow:hidden}
.hero__name .hero__ln>span{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(3.4rem,16vw,15rem);line-height:.86;letter-spacing:.02em}
.hero__sig{display:block;font-family:var(--sig);font-size:clamp(2rem,7vw,5rem);color:var(--accent);margin-top:-.15em;transform:rotate(-4deg)}
@media (max-width:720px){.hero__c br{display:none}}

/* ═══ WORK — gallery wall (pinned horizontal, organic) ═══ */
.work{position:relative}
.work__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.work__head{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;padding:6rem var(--pad) 0;z-index:4;color:var(--ink)}
.wall{display:flex;align-items:center;gap:clamp(3rem,7vw,9rem);padding:0 12vw;width:max-content;will-change:transform}
.wcell{position:relative;flex:0 0 auto;cursor:none}
.wcell img{display:block;width:auto;height:var(--h,54vh);max-height:660px;object-fit:cover;transition:transform 1s var(--e),filter .6s;filter:grayscale(.05)}
.wcell{transform:translateY(var(--off,0)) rotate(var(--rot,0deg));transition:transform .9s var(--e)}
.wcell:hover{transform:translateY(var(--off,0)) rotate(0deg)}
.wcell:hover img{transform:scale(1.03)}
.wcell__t{position:absolute;left:0;bottom:-2rem;font-family:var(--sig);font-size:1.7rem;color:var(--ink);opacity:.85;white-space:nowrap}
.wcell__n{position:absolute;right:0;top:-1.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--mut)}

/* ═══ BREAK ═══ */
.break{position:relative;height:130vh;background:var(--ink)}
.break__media{position:sticky;top:0;height:100vh;overflow:hidden}
.break__media img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;object-position:50% 24%;will-change:transform;opacity:.9}
.break__cap{position:absolute;left:var(--pad);bottom:2.2rem;z-index:2;color:var(--bg)}

/* ═══ DIGITALS — clean contact-sheet grid ═══ */
.dig{padding:clamp(5rem,10vw,9rem) var(--pad);background:var(--bg-2)}
.dig__head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.dig__t{font-family:var(--disp);font-weight:500;font-size:clamp(3rem,11vw,9rem);line-height:.86}
.dig__sub{color:var(--mut)}
.digrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.5rem,1.2vw,1rem)}
.digcell{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg);cursor:none;opacity:1}
.digcell.in{animation:digIn .85s var(--e)}
@keyframes digIn{from{transform:translateY(24px)}to{transform:none}}
.digcell img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e);filter:grayscale(.1)}
.digcell:hover img{transform:scale(1.05)}
@media (max-width:900px){.digrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.digrid{grid-template-columns:repeat(2,1fr)}}

/* ═══ MEASUREMENTS ═══ */
.facts{padding:clamp(5rem,10vw,9rem) var(--pad)}
.facts__head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.facts__t{font-family:var(--disp);font-weight:500;font-size:clamp(3rem,11vw,9rem);line-height:.84}
.facts__list{list-style:none}
.fact{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.4vw,1.8rem) 0}
.fact::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e)}
.fact.in::before{transform:scaleX(1)}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact__k{color:var(--mut);letter-spacing:.1em}
.fact__v{font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,7vw,5.4rem);line-height:1;display:flex;align-items:baseline;gap:.3rem;font-variant-numeric:tabular-nums;transform:translateY(24px);opacity:0;transition:transform .9s var(--e),opacity .9s var(--e)}
.fact.in .fact__v{transform:none;opacity:1}
.fact__v i{font-style:normal}
.fact__v em{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.05em}
.fact__v--w{font-style:italic}

/* ═══ CONTACT ═══ */
.contact{padding:clamp(6rem,14vw,12rem) var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.contact__big{font-family:var(--disp);font-weight:500;font-size:clamp(3.2rem,13vw,10rem);line-height:.9;letter-spacing:.01em}
.contact__ig{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .4s;will-change:transform}
.contact__ig:hover{border-color:var(--accent)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.8rem var(--pad);border-top:1px solid var(--line);color:var(--mut)}

/* ═══ LIGHTBOX ═══ */
.lb{position:fixed;inset:0;z-index:900;background:rgba(13,11,10,.95);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.5s var(--e)}
.lb.open{opacity:1;visibility:visible}
.lb__stage{max-width:min(92vw,620px);max-height:86vh}
.lb__stage img{max-width:100%;max-height:86vh;object-fit:contain;transform:scale(.96);transition:transform .5s var(--e)}
.lb.open .lb__stage img{transform:scale(1)}
.lb__x{position:absolute;top:1.4rem;right:1.5rem;background:none;border:0;color:var(--bg);cursor:none;opacity:.8}
.lb__a{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--bg);font-size:1.7rem;cursor:none;opacity:.7;padding:1rem}
.lb__a--p{left:.8rem}.lb__a--n{right:.8rem}
.lb__c{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:var(--bg)}
.lb__c i{color:var(--accent)}
body.lock{overflow:hidden}

/* ═══ MOBILE ═══ */
@media (max-width:820px){
  .nav__mid{display:none}.nav__burger{display:flex}
  .hero{height:250vh}
  /* gallery → clean vertical stack, no transforms */
  .work,.work__pin{position:static;height:auto;display:block;overflow:visible}
  .work__head{position:static;padding:0 var(--pad) 1.6rem}
  .wall{flex-direction:column;width:100%;gap:2.6rem;padding:0 var(--pad) 1rem;transform:none!important}
  .wcell{width:100%;transform:none!important}
  .wcell img{width:100%;height:auto;max-height:none}
  .wcell__t{position:static;display:block;margin-top:.6rem}
  .wcell__n{top:-1.4rem}
  .break{height:70vh}.break__media{height:70vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  .ln>span,[data-rise],.reveal,.fact__v,.digcell{transform:none!important;opacity:1!important}
  .fact::before{transform:scaleX(1)!important}
  .cursor{display:none}body{cursor:auto}
}
