/* ═══════════════════════════════════════════════════════════
   ATAI SAMA — v6
   Three territories, kept apart:
     RESTRAINT owns the token set   (below)
     SCALE     owns the layout      (§ LAYOUT)
     THEATRE   owns time + the hero (§ MOTION)
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* ── INK. three values. nothing else carries text colour ── */
  --ink:#0a0a0a;
  --ink-2:#6b6b6b;
  --ink-3:#a4a4a4;
  --bg:#ffffff;
  --hair:rgba(10,10,10,0.14);

  /* ── TYPE SCALE. six sizes. no clamp below display ── */
  --t-xs:11px;   /* labels, nav, meta */
  --t-s:12px;    /* product name, price, links */
  --t-m:14px;    /* body */
  --t-l:20px;    /* section lead */
  /* One moment per page. Measured: "A CROWN ISN'T" is 7.10x the font-size wide
     in Yeseva One, so it spans the viewport at 14.1vw and runs past it above
     that. Phone fits edge to edge (13.4vw) because cropping a brand line on a
     narrow screen eats a whole word; desktop bleeds. */
  --t-display:clamp(44px,13.4vw,300px);
  --t-hero:clamp(30px,5vw,58px);

  /* ── SPACE. one scale ── */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px;
  --s-5:40px; --s-6:64px; --s-7:96px;

  --gutter:0px;         /* photos meet with no seam. one token if you want it back. */
  --pad-x:16px;
  --header-h:56px;

  /* ── FONTS. two ── */
  --font:'Montserrat',system-ui,sans-serif;
  --font-display:'Yeseva One',Georgia,serif;

  /* ── MOTION. two tiers, and that is the whole system ──
     ambient  = anything the user triggers more than once
     event    = anything that happens once per page        */
  --ease-ambient:cubic-bezier(.25,.1,.25,1);
  --dur-ambient:.3s;
  --ease-event:cubic-bezier(.5,0,0,1);
  --dur-event:.8s;
}

@media(min-width:64em){ :root{ --pad-x:30px; --header-h:68px; --t-display:clamp(44px,15vw,340px); } }

html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  font-size:var(--t-m);
  line-height:20px;
  letter-spacing:.04em;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{text-decoration:none;color:inherit;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

/* ═══════════ HEADER ═══════════
   Sits transparent over the hero. One variable flips, nothing else.
   Gucci's move, one token wide.                                   */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  --fg:#ffffff;                       /* over the hero */
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);
  color:var(--fg);
  background:transparent;
  border-bottom:1px solid transparent;
  text-shadow:0 0 12px rgba(0,0,0,.35);
  transition:background var(--dur-event) var(--ease-event),
             color var(--dur-event) var(--ease-event),
             border-color var(--dur-event) var(--ease-event);
}
.hdr[data-past-hero="true"]{
  --fg:var(--ink);
  background:var(--bg);
  border-bottom-color:var(--hair);
  text-shadow:none;
}
/* Scrim that keeps a white wordmark legible on pale photography.
   Fades out on the same event-tier curve as the token flip. */
.hdr::before{
  content:'';position:absolute;inset:0 0 auto 0;height:200%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.36) 0%,rgba(0,0,0,.12) 55%,transparent 100%);
  transition:opacity var(--dur-event) var(--ease-event);
}
.hdr[data-past-hero="true"]::before{opacity:0;}
.hdr-nav,.hdr-act{display:flex;gap:var(--s-4);flex:1;}
.only-mobile{display:none!important;}
.hdr-act{justify-content:flex-end;align-items:center;}
.hdr a,.hdr button{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
  transition:opacity var(--dur-ambient) var(--ease-ambient);
}
.hdr a:hover,.hdr button:hover{opacity:.55;}
.hdr-logo{
  font-family:var(--font-display);
  font-size:17px;letter-spacing:.06em;text-transform:none;
  white-space:nowrap;
}
@media(max-width:63.99em){
  .hdr-nav{display:none;}
  .hdr-act{gap:var(--s-3);}
  /* no centred wordmark on a phone: it collides with the actions.
     logo left, actions right, nothing overlapping. */
  .hdr-logo{position:static;transform:none;font-size:15px;flex:0 0 auto;}
  .hdr-act a,.hdr-act button{font-size:10px;letter-spacing:.1em;}
  /* show the hamburger; hide links moved into the overlay */
  .hdr-burger{display:flex!important;}
  .hdr-secondary{display:none!important;}
}

/* ── tighten header on narrow phones (≤400px) ── */
@media(max-width:400px){
  .hdr-act{gap:var(--s-2);}
}
/* ── Z Fold folded + smallest Androids (≤360px) ── */
@media(max-width:360px){
  .hdr-logo{font-size:13px;}
  .hdr-act{gap:6px;}
  .hdr-act a,.hdr-act button{font-size:9px;letter-spacing:.05em;}
}

/* ── hamburger button (hidden on desktop) ── */
.hdr-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  padding:5px;
  flex-shrink:0;
}
.hdr-burger span{
  display:block;
  width:20px;height:1.5px;
  background:currentColor;
  border-radius:1px;
  transform-origin:center;
  transition:transform var(--dur-ambient) var(--ease-ambient),
             opacity   var(--dur-ambient) var(--ease-ambient);
}
.hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0);}
.hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* header merges into the black overlay when the menu is open */
.hdr.mob-open{
  --fg:#ffffff;
  background:#0a0a0a!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
  text-shadow:none!important;
}
.hdr.mob-open::before{opacity:0;}

/* ═══════════ MOBILE NAV OVERLAY ═══════════
   Full-screen black panel that slides up from just below the header.
   z-index 95 sits under the header (100) so the wordmark + burger X
   stay on top and always clickable.                                    */
.mob-nav{
  position:fixed;inset:0;z-index:95;
  background:#0a0a0a;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:calc(var(--header-h) + var(--s-4)) var(--pad-x) var(--s-6);
  overflow-y:auto;overflow-x:hidden;
  visibility:hidden;
  opacity:0;
  transform:translateY(-10px);
  transition:
    opacity   .45s var(--ease-event),
    transform .45s var(--ease-event),
    visibility 0s linear .45s;
}
@media(min-width:64em){.mob-nav{display:none!important;}}
.mob-nav.open{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity   .45s var(--ease-event),
    transform .45s var(--ease-event);
}

/* main nav links — display typeface, large */
.mob-nav-main{list-style:none;margin-bottom:var(--s-5);}
.mob-nav-main a{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(26px,8vw,44px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:#fff;
  padding:6px 0;
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity   .4s var(--ease-event),
    transform .4s var(--ease-event),
    color var(--dur-ambient) var(--ease-ambient);
}
.mob-nav-main a:hover{color:rgba(255,255,255,.4);}
.mob-nav.open .mob-nav-main a{opacity:1;transform:translateY(0);}
.mob-nav.open .mob-nav-main li:nth-child(1) a{transition-delay:.06s;}
.mob-nav.open .mob-nav-main li:nth-child(2) a{transition-delay:.12s;}
.mob-nav.open .mob-nav-main li:nth-child(3) a{transition-delay:.18s;}
.mob-nav.open .mob-nav-main li:nth-child(4) a{transition-delay:.24s;}
.mob-nav.open .mob-nav-main li:nth-child(5) a{transition-delay:.30s;}

/* hairline divider */
.mob-nav-sep{
  height:1px;
  background:rgba(255,255,255,.14);
  margin-bottom:var(--s-4);
  opacity:0;
  transition:opacity .3s var(--ease-event) .33s;
}
.mob-nav.open .mob-nav-sep{opacity:1;}

/* utility row — small caps */
.mob-nav-util{
  list-style:none;
  display:flex;
  gap:var(--s-5);
  flex-wrap:wrap;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity   .35s var(--ease-event) .38s,
    transform .35s var(--ease-event) .38s;
}
.mob-nav.open .mob-nav-util{opacity:1;transform:translateY(0);}
.mob-nav-util a{
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  transition:color var(--dur-ambient) var(--ease-ambient);
}
.mob-nav-util a:hover{color:#fff;}

/* ═══════════ LAYOUT — SCALE ═══════════
   The image is the layout. No card, no radius, no border, no wash.
   5px between anything. One column on a phone.                     */

/* HERO.
   A 3:4 source in a 16:10 desktop frame loses about half the picture to
   object-fit:cover, so the desktop hero is TWO portraits side by side rather
   than one stretched across. Each panel lands near 4:5, which is what the
   photography actually is. A phone viewport is already portrait, so there one
   image fills the screen with almost no crop. */
.hero{
  position:relative;height:100vh;height:100svh;overflow:hidden;
  background:var(--bg);
  display:grid;grid-template-columns:1fr;gap:var(--gutter);
}
@media(min-width:64em){ .hero{grid-template-columns:1fr 1fr;} }
.hero-panel{position:relative;overflow:hidden;background:#f4f4f2;}
.hero-panel:nth-child(2){display:none;}
@media(min-width:64em){ .hero-panel:nth-child(2){display:block;} }
.hero img{transform:scale(1.12);object-position:50% 22%;}
@media(max-width:63.99em){ .hero img{object-position:50% 16%;} }
.hero-cap{
  position:absolute;left:var(--pad-x);bottom:var(--s-5);z-index:3;
  color:#fff;max-width:520px;
}
.hero-line{
  font-family:var(--font-display);
  font-size:var(--t-hero);line-height:1.02;letter-spacing:.01em;
}
.hero-sub{
  margin-top:var(--s-3);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;opacity:.8;
}
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 38%,transparent 62%);
}

/* two-up editorial. one per row on a phone. */
.pair{display:grid;grid-template-columns:1fr;gap:var(--gutter);padding:var(--gutter);}
@media(min-width:64em){ .pair{grid-template-columns:1fr 1fr;} }
/* on mobile each pair image fills the screen, same as the hero */
@media(max-width:63.99em){ .pair .frame{aspect-ratio:unset;height:100svh;} }
.frame{position:relative;overflow:hidden;background:#f4f4f2;}
.frame.portrait{aspect-ratio:2/3;}
.frame.tile{aspect-ratio:3/4;}
.frame-cap{
  position:absolute;left:var(--s-3);bottom:var(--s-3);z-index:2;
  color:#fff;font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 18px rgba(0,0,0,.4);
}

.solo{padding:var(--gutter);}
.solo .frame{aspect-ratio:3/4;}
@media(min-width:64em){ .solo .frame{aspect-ratio:16/9;} }

/* section label. a hairline and one word. */
.label{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-6) var(--pad-x) var(--s-4);
}
.label span{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
}
.label::after{content:'';flex:1;height:1px;background:var(--hair);}

/* product grid. two up on a phone, not thumbnails. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding:0 var(--gutter) var(--s-6);}
@media(min-width:48em) and (max-width:63.99em){ .grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:64em){ .grid{grid-template-columns:repeat(4,1fr);} }
.card{display:block;}
.card .frame{aspect-ratio:3/4;}
.card .frame img{transition:transform var(--dur-ambient) var(--ease-ambient);object-position:50% 10%;}
.card:hover .frame img{transform:scale(1.03);}
.card-body{padding:var(--s-2) var(--s-2) 0;}
.card-name{font-size:var(--t-s);font-weight:500;letter-spacing:.04em;}
.card-price{font-size:var(--t-s);font-weight:300;color:var(--ink-2);margin-top:2px;}
.card-flag{
  position:absolute;top:var(--s-2);left:var(--s-2);z-index:2;
  font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;text-shadow:0 0 14px rgba(0,0,0,.5);
}

/* ═══════════ THE ONE TYPE MOMENT ═══════════
   Display face, once. Everything around it is empty.              */
/* Full bleed and clipped. The longest line is WIDER than the viewport, which
   is the whole point, so the section crops it rather than the page growing a
   horizontal scrollbar. */
.moment{
  padding:var(--s-7) 0;
  overflow:hidden;
  padding-left:var(--pad-x);
}
.moment p{
  font-family:var(--font-display);
  font-size:var(--t-display);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.moment .quiet{color:var(--ink-3);}
.moment cite{
  display:block;margin-top:var(--s-5);
  font-family:var(--font);font-style:normal;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);
}

/* ═══════════ FOOTER ═══════════ */
/* The footer inverts by redefining the ink tokens on itself. Every child is
   already written against those roles, so nothing else changes. */
.foot{
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.66);
  --ink-3:rgba(255,255,255,.40);
  --hair:rgba(255,255,255,.18);
  background:#0a0a0a;
  color:#ffffff;
  border-top:none;
  padding:var(--s-6) var(--pad-x) var(--s-4);
}
.foot-note{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);
  padding-bottom:var(--s-5);
}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4);}
@media(min-width:48em) and (max-width:63.99em){ .foot-cols{grid-template-columns:repeat(3,1fr);} }
@media(min-width:64em){ .foot-cols{grid-template-columns:repeat(5,1fr);} }
.foot h3{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:var(--s-3);
}
.foot li{list-style:none;margin-bottom:10px;}
.foot li a{
  font-size:var(--t-s);font-weight:300;color:var(--ink-2);
  transition:color var(--dur-ambient) var(--ease-ambient);
}
.foot li a:hover{color:var(--ink);}
.foot-end{
  margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--ink-3);
}

/* ═══════════ MOTION — THEATRE ═══════════
   Event tier only. Ambient tier lives inline above, on hover.
   Rule: triggered more than once → ambient. Once per page → event. */
[data-rise]{opacity:0;transform:translateY(40px);}
[data-rise].in{
  opacity:1;transform:translateY(0);
  transition:opacity var(--dur-event) var(--ease-event),
             transform var(--dur-event) var(--ease-event);
}
.hero img{transition:transform 1.4s var(--ease-event);}
.hero.in img{transform:scale(1);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
  [data-rise]{opacity:1;transform:none;}
  .hero img{transform:scale(1);}
}

/* ═══════════ LOOKBOOK ═══════════
   Same frames, same gutter token, same two motion tiers. The only new
   idea is that a 'wide' image spans the full row.                     */
.lb-head{padding:calc(var(--header-h) + var(--s-6)) var(--pad-x) var(--s-5);max-width:900px;}
.lb-title{font-family:var(--font-display);font-size:clamp(34px,6vw,72px);line-height:.94;text-transform:uppercase;letter-spacing:-.02em;}
.lb-season{font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s-3);}
.lb-intro{font-size:var(--t-m);color:var(--ink-2);margin-top:var(--s-4);max-width:56ch;}

.lb-run{display:grid;grid-template-columns:1fr;gap:var(--gutter);}
@media(min-width:64em){ .lb-run{grid-template-columns:1fr 1fr;} }
.lb-run .frame.wide{grid-column:1 / -1;}
.frame.wide{aspect-ratio:3/4;}
@media(min-width:64em){ .frame.wide{aspect-ratio:16/9;} }

/* the index of lookbooks */
.lb-index{display:grid;grid-template-columns:1fr;gap:var(--gutter);}
@media(min-width:64em){ .lb-index{grid-template-columns:1fr 1fr;} }
.lb-card{position:relative;display:block;}
.lb-card .frame img{transition:transform var(--dur-ambient) var(--ease-ambient);}
.lb-card:hover .frame img{transform:scale(1.03);}
.lb-card-meta{position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:3;color:#fff;text-shadow:0 0 20px rgba(0,0,0,.45);}
.lb-card-meta strong{display:block;font-family:var(--font-display);font-size:clamp(22px,3vw,38px);font-weight:400;text-transform:uppercase;line-height:1;}
.lb-card-meta span{display:block;margin-top:6px;font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.85;}

/* empty / loading states, so a page with no rows says so instead of
   rendering a blank screen */
.state{padding:var(--s-7) var(--pad-x);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}

/* ═══════════ SEARCH ═══════════
   A panel that comes down out of the header. Ambient tier only, because
   it is opened many times per visit.                                    */
.srch{position:fixed;inset:0;z-index:900;visibility:hidden;opacity:0;
  background:rgba(10,10,10,.28);
  transition:opacity var(--dur-ambient) var(--ease-ambient),visibility 0s linear var(--dur-ambient);}
.srch[data-open="true"]{visibility:visible;opacity:1;transition-delay:0s;}

.srch-panel{position:absolute;inset:0 0 auto 0;background:var(--bg);
  padding:var(--s-4) var(--pad-x) var(--s-5);
  transform:translateY(-100%);
  transition:transform var(--dur-ambient) var(--ease-ambient);
  max-height:88vh;overflow-y:auto;}
.srch[data-open="true"] .srch-panel{transform:translateY(0);}

.srch-row{display:flex;align-items:center;gap:var(--s-3);
  border-bottom:1px solid var(--hair);padding-bottom:var(--s-3);}
.srch-input{flex:1;border:none;outline:none;background:none;
  font-family:var(--font);font-weight:300;font-size:var(--t-l);
  letter-spacing:.02em;color:var(--ink);min-width:0;}
.srch-input::placeholder{color:var(--ink-3);}
/* Chrome draws a blue native clear button inside type="search". Off brand. */
.srch-input::-webkit-search-cancel-button,
.srch-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
.srch-close{font-size:var(--t-xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);flex-shrink:0;
  transition:color var(--dur-ambient) var(--ease-ambient);}
.srch-close:hover{color:var(--ink);}

.srch-label{font-size:var(--t-xs);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:var(--s-4) 0 var(--s-3);}
.srch-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.srch-tag{font-size:var(--t-s);font-weight:300;color:var(--ink-2);
  padding:6px 0;margin-right:var(--s-3);
  border-bottom:1px solid transparent;
  transition:color var(--dur-ambient) var(--ease-ambient),
             border-color var(--dur-ambient) var(--ease-ambient);}
.srch-tag:hover{color:var(--ink);border-bottom-color:var(--ink);}

.srch-results{display:grid;grid-template-columns:1fr;gap:var(--s-1);}
@media(min-width:64em){ .srch-results{grid-template-columns:1fr 1fr;} }
.srch-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;}
.srch-thumb{width:44px;height:59px;flex-shrink:0;overflow:hidden;background:#f4f4f2;}
.srch-thumb img{width:100%;height:100%;object-fit:cover;}
.srch-name{font-size:var(--t-s);font-weight:500;}
.srch-name b{font-weight:500;border-bottom:1px solid var(--ink);}
.srch-price{font-size:var(--t-s);font-weight:300;color:var(--ink-2);margin-top:2px;}
.srch-empty{font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--s-4) 0;}