/* =============================================================================
   ZAVENZA — Version 2
   A fashion campaign that happens to be a website.
   Sections: tokens · base · type · nav · hero · manifesto · film · collection
             about · instagram · contact · footer · modal · lightbox · motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------- */
:root{
  /* The palette. Warm, not neutral — bone and ink, one metal. */
  --bone:      #EFEBE3;
  --paper:     #F7F5F0;
  --ink:       #0E0E0D;
  --ink-2:     #17171A;
  --ash:       #6E6A63;
  --line:      rgba(14,14,13,.14);
  --clay:      #9C6F52;   /* the accent. Used sparingly, like jewellery. */
  --champagne: #C6A27A;

  /* Live theme — tweened per section by JS. */
  --bg:  var(--ink);
  --fg:  var(--bone);
  --mut: rgba(239,235,227,.52);
  --rule:rgba(239,235,227,.16);
  --accent: var(--champagne);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gut:  clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
  --nav-h: 74px;
}

body[data-theme="light"]{
  --bg: var(--bone);
  --fg: var(--ink);
  --mut: rgba(14,14,13,.56);
  --rule: rgba(14,14,13,.14);
  --accent: var(--clay);
}
body[data-theme="paper"]{
  --bg: var(--paper);
  --fg: var(--ink);
  --mut: rgba(14,14,13,.56);
  --rule: rgba(14,14,13,.12);
  --accent: var(--clay);
}

/* --------------------------------------------------------------------------
   2. BASE
   ----------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .9s var(--slow), color .9s var(--slow);
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--bg); }

:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:4px;
}

.skip{
  position:fixed; top:-100px; left:var(--gut); z-index:999;
  background:var(--fg); color:var(--bg); padding:12px 20px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ top:16px; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Film grain — the single cheapest luxury effect there is. */
.grain{
  position:fixed; inset:-50%; z-index:200; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }      16%{ transform:translate(-4%,-3%) }
  33%{ transform:translate(3%,-4%) }       50%{ transform:translate(-3%,3%) }
  66%{ transform:translate(4%,2%) }        83%{ transform:translate(-2%,-2%) }
}

/* --------------------------------------------------------------------------
   3. TYPE
   ----------------------------------------------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.88;
  letter-spacing:-.02em;
  margin:0;
}
.display em{ font-style:italic; font-weight:300; }

.eyebrow{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mut); font-weight:400; margin:0;
}
.lede{
  font-family:var(--serif); font-size:clamp(20px,2.4vw,30px);
  line-height:1.35; font-weight:300; color:var(--fg);
}
.body{ color:var(--mut); font-size:15px; line-height:1.75; max-width:46ch; }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* The underline that draws itself. Used on every text link. */
.ln{ position:relative; display:inline-block; }
.ln::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--slow);
}
.ln:hover::after,.ln:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

/* Primary button — a rule with a name, not a pill. */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding:16px 0; border-bottom:1px solid var(--rule);
  transition:border-color .5s var(--slow), gap .5s var(--slow), color .4s;
}
.btn i{ font-style:normal; transition:transform .5s var(--slow); }
.btn:hover{ border-color:var(--accent); color:var(--accent); gap:22px; }
.btn:hover i{ transform:translateX(4px); }
.btn--solid{
  background:var(--fg); color:var(--bg); border:0; padding:18px 34px;
}
.btn--solid:hover{ background:var(--accent); color:var(--bg); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn[disabled]:hover{ gap:14px; border-color:var(--rule); color:inherit; }

/* --------------------------------------------------------------------------
   4. CURSOR (desktop only)
   ----------------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--accent); z-index:400; pointer-events:none;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .4s var(--slow), height .4s var(--slow), opacity .3s;
  opacity:0;
}
.cursor.is-on{ opacity:1; }
.cursor.is-lg{ width:64px; height:64px; background:transparent; border:1px solid var(--accent); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* --------------------------------------------------------------------------
   5. PRELOADER
   ----------------------------------------------------------------------- */
#preloader{
  position:fixed; inset:0; z-index:500; background:var(--ink); color:var(--bone);
  display:grid; place-items:center;
}
#preloader.done{ opacity:0; pointer-events:none; transition:opacity .9s var(--slow); }
.pre__word{
  font-family:var(--serif); font-size:clamp(38px,7vw,86px); font-weight:300;
  letter-spacing:.22em; padding-left:.22em;
}
.pre__word span{ display:inline-block; opacity:0; transform:translateY(18px); }
.pre__bar{ width:min(220px,40vw); height:1px; background:rgba(239,235,227,.2); margin:26px auto 0; }
.pre__bar i{ display:block; height:100%; width:0; background:var(--champagne); }

/* --------------------------------------------------------------------------
   6. NAV
   ----------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gut); color:var(--fg);
  transition:background-color .5s var(--slow), backdrop-filter .5s, height .5s var(--slow), color .9s var(--slow);
}
.nav::after{
  content:""; position:absolute; left:var(--gut); right:var(--gut); bottom:0;
  height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--slow);
}
.nav.is-stuck{
  height:62px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.nav.is-stuck::after{ transform:scaleX(1); }
.nav.is-hidden{ transform:translateY(-100%); transition:transform .5s var(--slow); }

.nav__logo{
  font-family:var(--serif); font-size:22px; letter-spacing:.34em;
  padding-left:.34em; line-height:1; font-weight:400;
}
.nav__links{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
  transition:color .4s;
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--fg); }
.nav__right{ display:flex; align-items:center; gap:28px; }

.burger{
  display:none; width:30px; height:14px; position:relative;
}
.burger span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .5s var(--slow), opacity .3s;
}
.burger span:first-child{ top:0; } .burger span:last-child{ bottom:0; }
body.menu-open .burger span:first-child{ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:last-child{ transform:translateY(-6.5px) rotate(-45deg); }

/* Fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:290; background:var(--ink); color:var(--bone);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 4vh) var(--gut) 0;
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .9s var(--slow);
}
.menu{ touch-action:none; }                     /* no scrolling the page behind it */
.menu nav{
  flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0;
  touch-action:pan-y; overflow-y:auto; overscroll-behavior:contain;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu ol{ list-style:none; margin:0; padding:0; }
.menu li{ overflow:hidden; }
.menu li a{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,7.4vw,74px); line-height:1.16; letter-spacing:-.01em;
  transform:translateY(105%); transition:transform .8s var(--slow), color .4s;
}
.menu li a:hover{ color:var(--champagne); }
.menu li a small{
  font-family:var(--sans); font-size:11px; letter-spacing:.24em;
  vertical-align:super; color:rgba(239,235,227,.4); margin-right:14px;
}
body.menu-open .menu li a{ transform:translateY(0); }
body.menu-open .menu li:nth-child(1) a{ transition-delay:.10s }
body.menu-open .menu li:nth-child(2) a{ transition-delay:.16s }
body.menu-open .menu li:nth-child(3) a{ transition-delay:.22s }
body.menu-open .menu li:nth-child(4) a{ transition-delay:.28s }
body.menu-open .menu li:nth-child(5) a{ transition-delay:.34s }
body.menu-open .menu li:nth-child(6) a{ transition-delay:.40s }
body.menu-open .menu li:nth-child(7) a{ transition-delay:.46s }
.menu__foot{
  padding:22px 0 34px; display:flex; gap:24px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(239,235,227,.5); opacity:0; transition:opacity .6s .5s;
}
body.menu-open .menu__foot{ opacity:1; }

@media (max-width:900px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}

/* --------------------------------------------------------------------------
   7. HERO
   ----------------------------------------------------------------------- */
.hero{
  background:var(--bg); z-index:3;
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 var(--gut) clamp(28px,5vh,56px);
  overflow:hidden; isolation:isolate;
}
.hero__media{
  position:absolute; inset:-8% 0 0; z-index:-2;
  will-change:transform;
}
.hero__plate{ position:absolute; inset:0; }
.hero__plate .ph{
  background:
    radial-gradient(78% 58% at 68% 22%, rgba(198,162,122,.20), transparent 62%),
    radial-gradient(60% 70% at 18% 82%, rgba(120,110,98,.22), transparent 66%),
    linear-gradient(170deg, #26251F 0%, #16160F 48%, #0B0B09 100%);
}
.hero__plate .ph__mark,.hero__plate .ph__txt{ display:none; }
.hero__plate .ph::after{      /* a shaft of light across a bare studio wall */
  content:""; position:absolute; inset:0;
  background:linear-gradient(104deg, transparent 34%, rgba(255,255,255,.055) 44%,
             rgba(255,255,255,.10) 50%, rgba(255,255,255,.045) 56%, transparent 68%);
}
.hero__media img{ width:100%; height:116%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(14,14,13,.94) 0%, rgba(14,14,13,.18) 46%, rgba(14,14,13,.5) 100%);
}
.hero__inner{ position:relative; }
.hero__word{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(60px,15.5vw,260px); line-height:.82; letter-spacing:-.015em;
  margin:0; display:flex; flex-wrap:wrap;
}
.hero__word span{ display:inline-block; will-change:transform; }
.hero__meta{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  flex-wrap:wrap; margin-top:clamp(18px,3vh,34px);
}
.hero__tag{
  font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.3vw,30px);
  line-height:1.25; max-width:26ch; margin:0; color:var(--fg);
}
.hero__top{
  position:absolute; top:calc(var(--nav-h) + 4vh); left:var(--gut); right:var(--gut);
  display:flex; justify-content:space-between; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
}
.scroll-cue{
  display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--mut);
}
.scroll-cue i{
  display:block; width:1px; height:44px; background:var(--rule); position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  animation:cue 2.4s var(--slow) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* the ticker under the hero */
.ticker{
  position:relative; z-index:3; background:var(--bg);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  overflow:hidden; padding:16px 0; white-space:nowrap;
}
.ticker__row{ display:inline-flex; gap:54px; will-change:transform; }
.ticker span{
  font-family:var(--serif); font-size:clamp(16px,2vw,26px); font-style:italic;
  color:var(--mut);
}
.ticker span::after{ content:"—"; margin-left:54px; color:var(--accent); font-style:normal; }

/* --------------------------------------------------------------------------
   8. MANIFESTO
   ----------------------------------------------------------------------- */
.manifesto{ position:relative; z-index:3; background:var(--bg); padding:clamp(90px,16vh,190px) var(--gut); }
.manifesto p{
  font-family:var(--serif); font-weight:300; margin:0 auto; max-width:20ch;
  font-size:clamp(30px,5.4vw,84px); line-height:1.06; letter-spacing:-.02em;
  text-align:center;
}
.manifesto .w{ display:inline-block; opacity:.14; transition:opacity .5s; }

/* --------------------------------------------------------------------------
   9. THE FILM — one figure, four chapters, fixed stage
   ----------------------------------------------------------------------- */
#film{ position:relative; }

.stage{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; place-items:center; overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--slow), visibility .8s;
}
.stage.is-live{ opacity:1; visibility:visible; }
.stage.is-out{ opacity:0; }
/* the coloured ground that changes per chapter */
.stage__plate{
  position:absolute; inset:0;
  background-color:#0E0E0D;
  transition:background-color 1.2s var(--slow);
}
.stage__plate::before{     /* the key light */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 26%, rgba(255,255,255,.09), transparent 68%);
}
.stage__plate::after{      /* a slow light sweep, like a moving softbox */
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(40% 40% at 50% 40%, rgba(198,162,122,.16), transparent 70%);
  animation:sweep 14s ease-in-out infinite alternate;
}
@keyframes sweep{ from{ transform:translate3d(-12%,-6%,0) } to{ transform:translate3d(12%,8%,0) } }

.stage__frame{
  position:relative; height:88vh; aspect-ratio:2/5; max-width:86vw;
  will-change:transform;
}
.figure{ width:100%; height:100%; overflow:visible; transition:opacity 1s var(--slow); }
.spark{ opacity:0; animation:twinkle 3.4s ease-in-out infinite; }
.spark--b{ animation-delay:1.1s } .spark--c{ animation-delay:2.2s }
@keyframes twinkle{ 0%,72%,100%{ opacity:0; transform:scale(.6) } 84%{ opacity:.95; transform:scale(1) } }
.figure .lay{ opacity:0; }   /* GSAP drives this — no CSS transition here */
.figure #lay-clothing{ opacity:1; }  /* the suit is where the story starts */
.stage__shadow{
  position:absolute; left:50%; bottom:-1%; width:120%; height:8%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 78%);
  filter:blur(6px);
}
/* the photo variant — appears the moment a real asset exists */
.stage__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:bottom center; opacity:0;
  transition:opacity 1s var(--slow);
}
.stage__photo.is-on{ opacity:1; }
.stage__photo.is-on ~ .figure{ opacity:0; }

/* chapters */
.chapter{ position:relative; height:230vh; }
.chapter__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; padding:0 var(--gut);
  z-index:2; pointer-events:none;
}
.chapter__grid{
  width:100%; display:grid;
  grid-template-columns:minmax(0,1fr) clamp(200px,26vw,380px) minmax(0,1fr);
  align-items:center; gap:clamp(16px,2.4vw,40px);
}
.chapter__plates{ grid-column:3; }
.chapter__text{ pointer-events:auto; max-width:34ch; position:relative; }
.chapter__num{
  display:block; font-family:var(--serif); font-size:clamp(58px,7.4vw,130px);
  line-height:.86; margin-bottom:.14em;
  color:transparent; -webkit-text-stroke:1px var(--rule);
  user-select:none; pointer-events:none;
}
.chapter__title{
  font-family:var(--serif); font-weight:300; letter-spacing:-.02em;
  font-size:clamp(38px,6.6vw,104px); line-height:.94; margin:.1em 0 .18em;
}
.chapter__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,2vw,26px);
  color:var(--accent); margin:0 0 18px;
}
.chapter__body{ color:var(--mut); font-size:14px; max-width:34ch; margin:0 0 26px; }

/* the three plates that float beside the figure */
.chapter__plates{
  display:grid; grid-template-columns:1fr 1fr; max-height:82vh;
  gap:clamp(10px,1.6vw,24px); align-content:center;
  pointer-events:auto;
}
.plate{
  width:clamp(104px,12.5vw,176px); position:relative;
  will-change:transform,opacity;
}
.plate:nth-child(1){ justify-self:end; }
.plate:nth-child(2){ margin-top:clamp(24px,6vh,72px); }
.plate:nth-child(3){ justify-self:end; margin-top:clamp(-30px,-3vh,-8px); }
.plate .card__meta{ padding-top:10px; }
.plate .card__name{ font-size:clamp(13px,1.1vw,16px); }

/* --------------------------------------------------------------------------
   10. PRODUCT CARD (shared by plates and the grid)
   ----------------------------------------------------------------------- */
.card{ display:block; width:100%; text-align:left; }
.card__frame{
  position:relative; overflow:hidden; aspect-ratio:3/4;
  background:color-mix(in srgb, var(--fg) 6%, transparent);
}
.zimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--slow), filter .7s;
  will-change:transform;
}
.card:hover .card__frame img{ transform:scale(1.06); }
.card__frame::after{         /* the hairline that appears on hover */
  content:""; position:absolute; inset:10px;
  border:1px solid color-mix(in srgb, var(--fg) 38%, transparent);
  opacity:0; transition:opacity .6s var(--slow), inset .6s var(--slow);
  pointer-events:none;
}
.card:hover .card__frame::after{ opacity:1; inset:14px; }
.card__view{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--bg) 94%, transparent),
    color-mix(in srgb, var(--bg) 55%, transparent) 60%, transparent);
  transform:translateY(100%); opacity:0;
  transition:transform .6s var(--slow), opacity .5s;
}
.card:hover .card__view,.card:focus-visible .card__view{ transform:translateY(0); opacity:1; }
.card__meta{ padding:14px 0 0; display:flex; justify-content:space-between; gap:14px; }
.card__name{
  font-family:var(--serif); font-size:clamp(16px,1.5vw,21px); line-height:1.2;
  font-weight:400; margin:0;
}
.card__brand{
  display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mut); margin-bottom:6px;
}
.card__price{ font-size:12px; letter-spacing:.06em; color:var(--mut); white-space:nowrap; }

/* The designed placeholder. Shown until a real image exists at the path. */
.ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:10px;
  text-align:center; padding:18px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #201F1C 0%, #14140F 100%);
  color:rgba(239,235,227,.5);
}
body[data-theme="light"] .ph,body[data-theme="paper"] .ph{
  background:
    repeating-linear-gradient(135deg, rgba(14,14,13,.03) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #E4DFD5 0%, #D6D0C4 100%);
  color:rgba(14,14,13,.45);
}
.modal__panel .ph{
  background:
    repeating-linear-gradient(135deg, rgba(14,14,13,.03) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #E4DFD5 0%, #D6D0C4 100%);
  color:rgba(14,14,13,.45);
}
.ph__mark{ font-family:var(--serif); font-size:30px; letter-spacing:.2em; padding-left:.2em; opacity:.6; }
.ph__txt{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; }

/* --------------------------------------------------------------------------
   11. FINALE
   ----------------------------------------------------------------------- */
.finale{ position:relative; height:190vh; }
.finale__sticky{
  position:sticky; top:0; height:100svh; display:grid; place-items:center;
  text-align:center; padding:0 var(--gut); z-index:2; pointer-events:none;
}
.finale__sticky::before{      /* the figure stays visible, the words stay legible */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 62%, rgba(8,8,7,.9) 0%, rgba(8,8,7,.5) 58%, transparent 80%),
    linear-gradient(to bottom, transparent 0%, transparent 58%, rgba(8,8,7,.66) 100%);
}
.finale__inner{ pointer-events:auto; position:relative; }
.finale__title{
  font-family:var(--serif); font-weight:300; letter-spacing:-.025em;
  font-size:clamp(38px,8.4vw,132px); line-height:.9; margin:0;
  text-shadow:0 10px 60px rgba(0,0,0,.5);
}
.finale__sub{
  font-family:var(--serif); font-style:italic; color:var(--accent);
  font-size:clamp(18px,2.4vw,30px); margin:20px 0 40px;
}

/* --------------------------------------------------------------------------
   12. COLLECTION
   ----------------------------------------------------------------------- */
.sec{ padding:clamp(80px,13vh,160px) var(--gut); position:relative; z-index:3; background:var(--bg); }
.sec__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--rule);
}
.sec__title{
  font-family:var(--serif); font-weight:300; margin:.16em 0 0;
  font-size:clamp(34px,5.6vw,88px); line-height:.94; letter-spacing:-.02em;
}

.filters{ display:flex; gap:26px; flex-wrap:wrap; padding:26px 0 44px; }
.filters button{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
  padding-bottom:5px; border-bottom:1px solid transparent; transition:color .4s, border-color .4s;
}
.filters button:hover{ color:var(--fg); }
.filters button.is-on{ color:var(--fg); border-color:var(--accent); }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(20px,3vw,52px) clamp(16px,2vw,34px);
}
/* editorial rhythm: every 5th item drops and grows. No two rows alike. */
.grid > *:nth-child(5n+2){ margin-top:clamp(20px,5vw,80px); }
.grid > *:nth-child(7n+4){ margin-top:clamp(10px,3vw,44px); }

/* --------------------------------------------------------------------------
   13. ABOUT
   ----------------------------------------------------------------------- */
.about__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,6vw,100px);
  align-items:center; margin-top:clamp(40px,7vh,90px);
}
.about__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:color-mix(in srgb, var(--fg) 6%, transparent); }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__copy p{ font-family:var(--serif); font-size:clamp(19px,2.1vw,28px); line-height:1.45; }
.about__copy p + p{ color:var(--mut); font-size:clamp(15px,1.5vw,19px); }

/* --------------------------------------------------------------------------
   14. INSTAGRAM
   ----------------------------------------------------------------------- */
.ig{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.2vw,18px); margin-top:44px; }
.ig a{ position:relative; overflow:hidden; aspect-ratio:1; display:block; }
.ig a:nth-child(1),.ig a:nth-child(6){ grid-row:span 2; aspect-ratio:1/2.04; }
.ig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow), filter .6s; }
.ig a:hover img{ transform:scale(1.07); filter:brightness(.82); }
.ig a::after{
  content:"↗"; position:absolute; right:12px; bottom:10px; font-size:14px;
  color:#EFEBE3; opacity:0; transform:translateY(6px); transition:.5s var(--slow);
}
.ig a:hover::after{ opacity:1; transform:translateY(0); }

/* --------------------------------------------------------------------------
   15. CONTACT
   ----------------------------------------------------------------------- */
.contact{ text-align:center; }
.contact .eyebrow{ margin:20px 0 0; }
.contact__title{ border:0; }
.contact .socials{ margin-top:14px; }
.contact__mail{
  display:inline-block; font-family:var(--serif); font-weight:300;
  font-size:clamp(32px,7vw,104px); line-height:1; letter-spacing:-.02em;
  margin:26px 0 30px;
}
.socials{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; }
.socials a{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); }
.socials a:hover{ color:var(--fg); }

/* --------------------------------------------------------------------------
   16. FOOTER
   ----------------------------------------------------------------------- */
.foot{ background:var(--ink); color:var(--bone); padding:clamp(60px,9vh,110px) var(--gut) 34px; position:relative; z-index:3; }
.foot__word{
  font-family:var(--serif); font-weight:300; font-size:clamp(52px,15vw,220px);
  line-height:.82; letter-spacing:.04em; margin:0 0 clamp(34px,6vh,70px);
  color:rgba(239,235,227,.9);
}
.foot__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:34px; padding-top:34px; border-top:1px solid rgba(239,235,227,.14);
}
.foot h4{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(239,235,227,.4); margin:0 0 16px; font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot a{ font-size:13px; color:rgba(239,235,227,.72); }
.foot a:hover{ color:var(--champagne); }
.foot__base{
  margin-top:clamp(34px,6vh,64px); padding-top:22px;
  border-top:1px solid rgba(239,235,227,.12);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11px; color:rgba(239,235,227,.42); line-height:1.7;
}
.foot__base p{ margin:0; max-width:62ch; }

/* --------------------------------------------------------------------------
   17. PRODUCT MODAL
   ----------------------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:350; display:grid; grid-template-columns:1fr;
  visibility:hidden;
}
.modal.is-open{ visibility:visible; }
.modal__scrim{
  position:absolute; inset:0; background:rgba(8,8,7,.72); backdrop-filter:blur(8px);
  touch-action:none;
  opacity:0; transition:opacity .6s var(--slow);
}
.modal.is-open .modal__scrim{ opacity:1; }
.modal__panel{
  position:relative; justify-self:end; width:min(1020px,100%); height:100%;
  background:var(--paper); color:var(--ink); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .8s var(--slow);
  display:grid; grid-template-columns:1.02fr .98fr;
}
.modal.is-open .modal__panel{ transform:translateX(0); }
.modal__close{
  position:absolute; top:18px; right:18px; z-index:4; width:42px; height:42px;
  border-radius:50%; background:rgba(247,245,240,.88); display:grid; place-items:center;
  font-size:15px; transition:background .4s, transform .4s;
}
.modal__close:hover{ background:var(--ink); color:var(--paper); transform:rotate(90deg); }
.modal__media{ position:relative; cursor:zoom-in; background:#E7E2D8; min-height:260px; }
.modal__media img{ width:100%; height:100%; object-fit:cover; }
.modal__zoom{
  position:absolute; left:16px; bottom:16px; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; background:rgba(247,245,240,.9); padding:9px 14px;
}
.modal__body{ padding:clamp(30px,4vw,60px); display:flex; flex-direction:column; align-items:flex-start; }
.modal__body > *{ width:100%; }
#mShop{ width:auto; }
.btn--muted{
  background:none; color:var(--ash); border:1px solid rgba(14,14,13,.2);
  padding:17px 30px; cursor:default;
}
.btn--muted:hover{ background:none; color:var(--ash); gap:14px; }
.modal__cat{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ash); }
.modal__name{
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,3.4vw,48px);
  line-height:1.04; margin:12px 0 14px; letter-spacing:-.01em;
}
.modal__price{ font-size:15px; letter-spacing:.04em; margin:0 0 20px; }
.modal__desc{ color:var(--ash); font-size:15px; line-height:1.8; margin:0 0 28px; max-width:44ch; }
.modal__tags{ display:flex; gap:9px; flex-wrap:wrap; margin:0 0 30px; padding:0; list-style:none; }
.modal__tags li{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(14,14,13,.18); padding:6px 11px; color:var(--ash);
}
.modal__note{ font-size:11px; color:var(--ash); margin:14px 0 0; line-height:1.7; }
.modal__share{ display:flex; gap:20px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.modal__share button{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); }
.modal__share button:hover{ color:var(--ink); }
.modal__rel{ margin-top:auto; padding-top:34px; }
.modal__rel h4{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); margin:0 0 16px; font-weight:400; }
#mRel{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.modal__rel .card__meta{ padding-top:9px; }
.modal__rel .card__name{ font-size:14px; }

/* --------------------------------------------------------------------------
   18. LIGHTBOX
   ----------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:380; background:rgba(8,8,7,.95);
  display:grid; place-items:center; padding:clamp(16px,4vw,60px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--slow), visibility .5s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; transform:scale(.94); transition:transform .6s var(--slow); }
.lightbox.is-open img{ transform:scale(1); }
.lightbox__close{ position:absolute; top:22px; right:26px; color:var(--bone); font-size:24px; }
.lightbox__cap{
  position:absolute; bottom:22px; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(239,235,227,.6);
}

/* --------------------------------------------------------------------------
   19. REVEALS
   ----------------------------------------------------------------------- */
[data-rev]{ opacity:0; will-change:transform,opacity; }
[data-rev="up"]{ transform:translateY(34px); }
[data-rev="left"]{ transform:translateX(-40px); }
[data-rev="right"]{ transform:translateX(40px); }
[data-rev="scale"]{ transform:scale(.94); }
.is-in[data-rev]{
  opacity:1; transform:none;
  transition:opacity 1s var(--slow), transform 1.1s var(--slow);
}
.is-in [data-rev]{
  opacity:1; transform:none;
  transition:opacity 1s var(--slow), transform 1.1s var(--slow);
}

/* masked line reveal for headings */
.mask{ overflow:hidden; display:block; }
.mask > *{ display:block; transform:translateY(102%); transition:transform 1.1s var(--slow); }
.is-in .mask > *{ transform:translateY(0); }

/* --------------------------------------------------------------------------
   20. RESPONSIVE — the mobile build is a different edit, not a squeeze
   ----------------------------------------------------------------------- */
@media (max-width:1024px){
  .modal__panel{ grid-template-columns:1fr; }
  .modal__media{ aspect-ratio:auto; height:46svh; min-height:300px; }
  .about__grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  :root{ --nav-h:62px; }

  /* Touch targets. Nothing interactive gets smaller than a fingertip, so the
     hit area is padded out even where the ink stays small. */
  .burger{ width:44px; height:44px; margin-right:-8px; }
  .burger span{ left:7px; width:30px; }
  .burger span:first-child{ top:15px; } .burger span:last-child{ bottom:15px; }
  body.menu-open .burger span:first-child{ transform:translateY(6.5px) rotate(45deg); }
  body.menu-open .burger span:last-child{ transform:translateY(-6.5px) rotate(-45deg); }

  .filters{ gap:0 4px; padding:18px 0 34px; }
  .filters button{ min-height:44px; padding:0 12px; }
  .filters button.is-on{ border-bottom-width:1px; }
  .socials{ gap:8px 4px; }
  .socials a, .foot a, .menu__foot a{
    display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  }
  .socials a:first-child, .foot a{ padding-left:0; }
  .foot ul{ gap:0; }
  .modal__close{ width:46px; height:46px; top:12px; right:12px; }
  .modal__share{ gap:0 6px; }
  .modal__share button{ min-height:44px; padding:0 10px; }
  .modal__share button:first-child{ padding-left:0; }

  /* backdrop-filter is a full-viewport blur repainted on every scroll frame.
     A phone gets a flat wash instead — it reads the same, costs nothing. */
  .nav.is-stuck{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:color-mix(in srgb, var(--bg) 94%, transparent);
  }

  .hero__top{ display:none; }
  .hero__meta{ flex-direction:column; align-items:flex-start; gap:22px; }

  /* Chapters: the figure sits behind, the words and plates stack over it.
     Shorter than desktop — a thumb covers far less ground than a scroll wheel,
     and the film was running 10+ screens before this. */
  .chapter{ height:160vh; }
  .chapter__grid{ grid-template-columns:1fr; gap:26px; align-content:center; }
  .chapter__plates{ grid-column:1; }
  .chapter__sticky{ align-items:flex-end; padding-bottom:6vh; }
  .chapter__text{ max-width:none; text-shadow:0 2px 30px rgba(0,0,0,.75); }
  .chapter__num{ font-size:clamp(48px,14vw,90px); }
  .chapter__body{ display:none; }            /* keep the frame breathing on a phone */
  .chapter__plates{
    display:flex; gap:12px; padding-bottom:8px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    overscroll-behavior-x:contain;           /* swiping the rail never turns a page */
  }
  .chapter__plates::-webkit-scrollbar{ display:none; }
  /* small enough that the figure still reads through the rail — the pieces
     are a caption to the look, not a shelf in front of it */
  .plate{ flex:0 0 44%; scroll-snap-align:start; }
  .plate .card__name{ font-size:13px; }
  .plate:nth-child(2),.plate:nth-child(3){ margin:0; }

  .finale{ height:130vh; }
  /* constrain by HEIGHT, not width: with aspect-ratio set, a binding
     max-width silently recomputes the height and crops the figure's head. */
  .stage__frame{ height:62vh; width:auto; max-width:none; opacity:.92; }
  .stage__plate::after{ animation:none; }     /* one less compositor layer */

  .ig{ grid-template-columns:repeat(2,1fr); }
  .ig a:nth-child(1),.ig a:nth-child(6){ grid-row:auto; aspect-ratio:1; }

  .grid{ grid-template-columns:repeat(2,1fr); gap:26px 14px; }
  .grid > *{ margin-top:0 !important; }

  /* related products swipe, like everything else on a phone */
  #mRel{
    display:flex; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none;
    margin-right:calc(var(--gut) * -1); padding-right:var(--gut);
  }
  #mRel::-webkit-scrollbar{ display:none; }
  .modal__rel .card{ flex:0 0 46%; scroll-snap-align:start; }

  .foot__base{ flex-direction:column; }
  .grain{ display:none; }

  /* hover states are dead weight on touch — and the sticky :hover that phones
     leave behind after a tap is worse than no effect at all */
  .card:hover .card__frame img{ transform:none; }
  .card:hover .card__frame::after{ opacity:0; }
  .ig a:hover img{ transform:none; filter:none; }
}

/* --------------------------------------------------------------------------
   21. REDUCED MOTION — everything still works, nothing moves
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rev]{ opacity:1 !important; transform:none !important; }
  .mask > *{ transform:none !important; }
  .chapter{ height:auto; padding:14vh 0; }
  .chapter__sticky{ position:static; height:auto; }
  .finale{ height:auto; padding:16vh 0; }
  .finale__sticky{ position:static; height:auto; }
  .stage{ position:sticky; opacity:1; visibility:visible; height:70vh; }
  .grain{ display:none; }
}

/* --------------------------------------------------------------------------
   22. NO-MOTION FALLBACK
   Applied when the GSAP/Lenis CDN is unreachable. The scroll film becomes a
   plain stack of chapters — less cinema, still the whole collection.
   ----------------------------------------------------------------------- */
.no-motion .chapter{ height:auto; padding:12vh 0; }
.no-motion .chapter__sticky{ position:static; height:auto; pointer-events:auto; }
.no-motion .finale{ height:auto; padding:14vh 0; }
.no-motion .finale__sticky{ position:static; height:auto; }
.no-motion .stage{
  position:sticky; top:0; height:70vh; opacity:1; visibility:visible;
}
.no-motion .stage__frame{ height:62vh; }
.no-motion .stage__plate::after{ animation:none; }
.no-motion .figure .lay{ opacity:1; }
.no-motion .grain{ display:none; }
.no-motion [data-rev]{ opacity:1; transform:none; }