/* ============================================================
   AFTER HOURS SOCIETY — core stylesheet
   Mobile first. Black canvas. Editorial type. Neon accent.
   ============================================================ */

/* ---------- 0. Fonts (self-hosted — no third-party request, GDPR-clean) ----------
   Playfair Display + Inter, SIL Open Font License. Licences in assets/fonts/. */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol,hr{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--pink);outline-offset:3px}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#080808;
  --ink-2:#0d0d0d;
  --char:#141414;
  --char-2:#1c1c1c;
  --paper:#f5f5f2;
  --paper-dim:rgba(245,245,242,.56);
  --paper-faint:rgba(245,245,242,.28);
  --line:rgba(245,245,242,.14);
  --pink:#ff2d8f;
  --pink-soft:rgba(255,45,143,.14);
  --pink-glow:rgba(255,45,143,.42);

  --serif:"Playfair Display","Didot","Bodoni MT","Times New Roman",serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gut:22px;
  --max:1560px;
  --nav-h:62px;

  --grain-url:url("../img/grain.png");

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){:root{--gut:44px;--nav-h:76px}}

/* ---------- 3. Base ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.5;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
::selection{background:var(--pink);color:#000}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pink);color:#000;padding:12px 18px}
.skip:focus{left:0}

/* ---------- 4. Type ---------- */
.serif{font-family:var(--serif)}
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  font-size:clamp(2.6rem,10.6vw,9.4rem);
}
.display--sm{font-size:clamp(2rem,6.6vw,5.2rem)}
.display--xl{font-size:clamp(3rem,13vw,12rem)}
.display em{font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.kicker{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.kicker--pink{color:var(--pink)}
.lede{font-size:clamp(.95rem,2.2vw,1.12rem);line-height:1.65;color:var(--paper-dim);max-width:52ch;font-weight:300}
.rule{height:1px;background:var(--line);border:0;width:100%}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:0 30px;
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--paper);color:var(--paper);
  background:transparent;position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--paper);
  transform:translateY(101%);transition:transform .45s var(--ease-out);z-index:-1;
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--ink)}
.btn:hover::after{transform:translateY(0)}
.btn--pink{background:var(--pink);border-color:var(--pink);color:#0a0a0a;font-weight:600}
.btn--pink::after{background:var(--paper)}
.btn--pink:hover{color:#0a0a0a;border-color:var(--paper)}
.btn--ghost{border-color:var(--line);color:var(--paper-dim)}
.btn--ghost:hover{color:var(--ink);border-color:var(--paper)}
.btn--block{width:100%}
.btn--lg{min-height:62px}
.btn[disabled]{opacity:.4;pointer-events:none}

.link-u{
  display:inline-block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  padding-bottom:5px;background-image:linear-gradient(var(--pink),var(--pink));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease-out),color .3s;
}
.link-u:hover{background-size:100% 1px;color:var(--pink)}

/* ---------- 6. Grain / flash / vignette ---------- */
.grain{position:fixed;inset:-120px;z-index:60;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:var(--grain-url);background-size:220px 220px;animation:grain 1.1s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 25%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.9) 100%)}
.flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;mix-blend-mode:screen}
.flash.fire{animation:flash 620ms ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:.62}18%{opacity:.05}30%{opacity:.24}100%{opacity:0}}

/* ---------- 7. Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(8,8,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav__in>*{min-width:0}
.nav__left{display:flex;align-items:center;gap:14px}
.nav__links{display:none;gap:34px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim)}
.nav__links a{transition:color .3s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--paper)}
.nav__links a[aria-current="page"]{color:var(--pink)}
.nav__links a[href$="ibiza-special-drop.html"]{
  color:var(--pink);border:1px solid rgba(255,45,143,.62);padding:8px 11px;
  margin-block:-8px;background:rgba(255,45,143,.07);letter-spacing:.19em
}
.nav__links a[href$="ibiza-special-drop.html"]:hover,
.nav__links a[href$="ibiza-special-drop.html"][aria-current="page"]{
  color:#080808;background:var(--pink);border-color:var(--pink)
}
.nav__right{display:flex;align-items:center;justify-content:flex-end;gap:18px}
@media (min-width:1000px){.nav__links{display:flex}.nav__burger{display:none!important}}

/* house mark — the vector wordmark, colour driven by currentColor */
.logo{display:block;color:var(--paper);transition:color .4s var(--ease)}
.logo svg{display:block;width:100%;height:auto;fill:currentColor}
.logo--pink{color:var(--pink)}
.logo--glow{filter:drop-shadow(0 0 18px var(--pink-glow)) drop-shadow(0 0 62px rgba(255,45,143,.28))}
.nav__mark{width:clamp(74px,9vw,104px);margin-inline:auto}
.nav__mark:hover{color:var(--pink)}
.hero__logo{width:min(78vw,760px);color:var(--paper)}
.foot__logo{width:min(58vw,420px);color:var(--char-2)}
.nav__cart{position:relative;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-dim);transition:color .3s}
.nav__cart:hover{color:var(--paper)}
.nav__cart b{color:var(--pink);font-weight:500}
.nav__burger{width:34px;height:34px;display:grid;place-items:center}
.nav__burger i{display:block;width:20px;height:1px;background:var(--paper);position:relative;transition:background .3s}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--paper);transition:transform .4s var(--ease)}
.nav__burger i::before{top:-6px}.nav__burger i::after{top:6px}
body.menu-open .nav__burger i{background:transparent}
body.menu-open .nav__burger i::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .nav__burger i::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:75;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);pointer-events:none}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu a{font-family:var(--serif);font-size:clamp(2.4rem,13vw,4.4rem);text-transform:uppercase;line-height:1.02;
  padding:6px 0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s,color .3s}
body.menu-open .menu a{opacity:1;transform:none}
body.menu-open .menu a:nth-child(1){transition-delay:.16s}
body.menu-open .menu a:nth-child(2){transition-delay:.22s}
body.menu-open .menu a:nth-child(3){transition-delay:.28s}
body.menu-open .menu a:nth-child(4){transition-delay:.34s}
body.menu-open .menu a:nth-child(5){transition-delay:.40s}
.menu a:hover{color:var(--pink)}
.menu a[href$="ibiza-special-drop.html"]{color:var(--pink)}
.menu a[href$="ibiza-special-drop.html"]::after{
  content:"  ·  6 PIECES";font-family:var(--sans);font-size:9px;letter-spacing:.2em;
  vertical-align:middle;color:var(--paper-faint)
}
.menu__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:38px;display:flex;justify-content:space-between;gap:16px}

/* ---------- 8. Sound toggle ---------- */
.sound-dock{
  position:fixed;left:var(--gut);bottom:22px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  mix-blend-mode:difference
}
.sound{
  position:static;
  display:flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-faint);
  transition:color .3s;
}
.sound:hover{color:var(--paper)}
.sound-link{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);text-decoration:underline;text-underline-offset:3px}
.sound-link:hover,.sound-link:focus-visible{color:var(--pink)}
.sound__eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound__eq i{width:2px;height:3px;background:currentColor;transition:background .3s}
.sound.on{color:var(--pink)}
.sound.on .sound__eq i{animation:eq .9s ease-in-out infinite}
.sound.on .sound__eq i:nth-child(2){animation-delay:.15s}
.sound.on .sound__eq i:nth-child(3){animation-delay:.3s}
.sound.on .sound__eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (prefers-reduced-motion:reduce){.sound.on .sound__eq i{animation:none;height:8px}}

/* ---------- 9. Hero ----------
   The campaign film is 9:16. Rather than stretch it across a desktop viewport,
   the hero splits: masthead on the left, the film at its native ratio on the
   right. On phones the film sits above the masthead, where 9:16 belongs. */
.hero{position:relative;min-height:100svh;display:grid;align-content:center;
  gap:clamp(26px,5vh,54px);padding:calc(var(--nav-h) + 20px) var(--gut) clamp(46px,8vh,80px);
  max-width:var(--max);margin-inline:auto;isolation:isolate;overflow:hidden}
@media (min-width:960px){
  .hero{grid-template-columns:1.06fr .94fr;align-items:center;gap:clamp(40px,5vw,90px)}
}
.hero__copy{position:relative;z-index:2;order:2}
@media (min-width:960px){.hero__copy{order:1}}
.hero__film{position:relative;order:1;justify-self:center;width:100%;max-width:520px}
@media (min-width:960px){.hero__film{order:2;justify-self:end}}
.hero__film .film{border:1px solid var(--line);max-height:52svh}
@media (min-width:960px){.hero__film .film{max-height:min(78svh,760px)}}
.hero__film::after{content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 46%,rgba(255,45,143,.26),transparent 70%);filter:blur(24px)}
.hero__title{font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:.86;
  letter-spacing:-.02em;font-size:clamp(3.1rem,15.5vw,13.5rem)}
.hero__est{margin-top:22px;display:flex;align-items:center;gap:14px}
.hero__est .rule{width:44px;flex:0 0 44px}
.hero__drop{margin-top:clamp(18px,3vh,28px);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper-dim);line-height:2}
.hero__drop em{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,3vw,2rem);
  letter-spacing:0;text-transform:none;color:var(--pink);display:block;margin-top:2px}
.hero__cta{margin-top:clamp(26px,5vh,44px);display:flex;flex-wrap:wrap;gap:12px}
.hero__logo{width:min(86%,620px);color:var(--paper)}
.hero__scroll{position:absolute;right:var(--gut);bottom:26px;z-index:2;display:none;
  writing-mode:vertical-rl;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
.hero__scroll::after{content:"";display:block;width:1px;height:52px;
  background:linear-gradient(var(--paper-faint),transparent);margin:12px auto 0}
@media (min-width:1200px){.hero__scroll{display:block}}

/* cinematic fallback backdrop (until real footage is dropped in) */
.night{position:absolute;inset:0;background:
  radial-gradient(62% 48% at 76% 14%,rgba(255,45,143,.52),transparent 64%),
  radial-gradient(48% 38% at 22% 26%,rgba(120,40,200,.30),transparent 66%),
  radial-gradient(70% 46% at 18% 86%,rgba(255,110,60,.26),transparent 68%),
  radial-gradient(96% 60% at 50% 116%,rgba(255,45,143,.24),transparent 62%),
  linear-gradient(178deg,#1b0a19 0%,#0d0a12 46%,#080808 100%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.13) translate3d(-2.2%,-1.6%,0)}}
@media (prefers-reduced-motion:reduce){.night{animation:none}}
.night::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 26%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.4px 1.4px at 62% 18%,rgba(255,45,143,.75),transparent),
    radial-gradient(1.8px 1.8px at 82% 44%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.4px 1.4px at 34% 62%,rgba(255,45,143,.6),transparent),
    radial-gradient(1.2px 1.2px at 72% 76%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.6px 1.6px at 46% 88%,rgba(255,45,143,.5),transparent);
  filter:blur(.4px)}
.night::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(96deg,transparent 0 74px,rgba(255,255,255,.028) 74px 76px)}
.slot{position:absolute;right:12px;bottom:12px;z-index:3;font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(245,245,242,.26);border:1px solid rgba(245,245,242,.12);padding:4px 8px}
.hero .slot{bottom:auto;top:calc(var(--nav-h) + 14px)}

/* ---------- 10. Sections ---------- */
section{position:relative}
.pad{padding-block:clamp(72px,13vh,170px)}
.pad-t{padding-top:clamp(72px,13vh,170px)}
.pad-b{padding-bottom:clamp(72px,13vh,170px)}
.statement{text-align:left}
.statement .display span{display:block}
.statement .display span:nth-child(2){color:var(--pink)}
.statement__meta{margin-top:34px;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:end;
  border-top:1px solid var(--line);padding-top:18px}

/* section index label */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:1px solid var(--line);padding-top:16px;margin-bottom:clamp(30px,6vh,64px)}

/* ---------- 11. Editorial drop rows ---------- */
.ed{display:grid;gap:clamp(26px,5vw,64px);align-items:center}
@media (min-width:900px){
  .ed{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px)}
  .ed--flip .ed__media{order:2}
}
.ed+.ed{margin-top:clamp(56px,9vh,110px)}
.ed__media{position:relative;display:block}
.ed__media .shot img{max-height:76svh;width:auto;max-width:100%;margin-inline:auto}
.ed__no{font-family:var(--serif);font-size:clamp(3rem,9vw,7rem);line-height:.8;color:var(--pink);opacity:.9}
.ed__title{font-family:var(--serif);text-transform:uppercase;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(1.8rem,5.2vw,3.5rem);margin-top:14px}
.ed__copy{margin-top:18px}
.ed__foot{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.price{font-size:12px;letter-spacing:.2em;color:var(--paper-dim)}

/* ---------- 12. Media: product shots + campaign film ---------- */
.shot{display:block;position:relative;background:#0a0a0a;overflow:hidden}
.shot img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease-out),opacity .8s}
.shot--zoom img{transform:scale(1.02)}
a:hover>.shot img,.card:hover .shot img{transform:scale(1.035)}

.film{position:relative;overflow:hidden;background:#0a0a0a;aspect-ratio:9/16}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.films{display:grid;gap:clamp(10px,2vw,20px);grid-template-columns:1fr}
@media (min-width:760px){.films{grid-template-columns:repeat(3,1fr)}}

/* full-bleed editorial photograph — framed on the garment, not the sky */
.bleed{position:relative;margin-block:clamp(60px,10vh,120px);overflow:hidden;
  height:min(96svh,820px)}
.bleed picture{position:absolute;inset:0;display:block}
.bleed img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
@media (max-width:720px){.bleed{height:min(78svh,640px)}.bleed img{object-position:50% 40%}}
.bleed--short{height:min(60svh,520px)}
.bleed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.72) 0%,transparent 26%,transparent 62%,rgba(8,8,8,.92) 100%)}
.bleed__cap{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;z-index:2;
  display:flex;justify-content:space-between;gap:14px;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-dim)}

/* ---------- 13. Product grid (shop) ---------- */
.grid{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--ink);padding:clamp(16px,2.4vw,26px);display:flex;flex-direction:column;
  transition:background .5s var(--ease)}
.card:hover{background:var(--ink-2)}
.card__media{position:relative;overflow:hidden;background:#0a0a0a}
.card__meta{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-top:1px solid var(--line)}
.card__name{font-family:var(--serif);text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.card__sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);margin-top:5px}
.card__price{font-size:12px;letter-spacing:.14em;color:var(--paper-dim);white-space:nowrap}
.card__tag{position:absolute;left:14px;bottom:14px;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink)}
.card::after{
  content:"VIEW PRODUCT  →";display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;padding:11px 0 2px;border-top:1px solid var(--line);
  color:var(--paper-faint);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  transition:color .3s,border-color .3s
}
.card:hover::after,.card:focus-visible::after{color:var(--pink);border-color:rgba(255,45,143,.58)}
.card:focus-visible{outline:1px solid var(--pink);outline-offset:-1px}

/* ---------- 14. Society ---------- */
.society{position:relative;display:grid;gap:clamp(28px,5vw,70px);align-content:center;
  padding:calc(var(--nav-h) + clamp(30px,7vh,74px)) var(--gut) clamp(40px,8vh,90px);
  max-width:var(--max);margin-inline:auto}
@media (min-width:960px){.society{grid-template-columns:.8fr 1.2fr;align-items:center}}
.society__film{width:100%;max-width:430px;justify-self:center;order:1}
.society__film .film{border:1px solid var(--line);max-height:min(74svh,720px)}
.society__in{order:2;padding:0}
.society__in .display{font-size:clamp(2.1rem,5.6vw,4.4rem)}
.line-hero__body .display{font-size:clamp(2.6rem,7.4vw,6.4rem)}
.society__wash{display:none}

.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:16px;white-space:nowrap}
.marq__t{display:inline-flex;gap:46px;animation:marq 34s linear infinite;padding-right:46px}
.marq__t span{font-family:var(--serif);text-transform:uppercase;font-size:clamp(1.1rem,3.4vw,2.2rem);
  letter-spacing:.04em;color:var(--paper-faint)}
.marq__t span b{color:var(--pink);font-weight:400}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}
.locs{display:grid;gap:0;margin-top:clamp(34px,6vh,60px);border-top:1px solid var(--line)}
.loc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line);transition:color .4s,padding-left .5s var(--ease)}
.loc:hover{color:var(--pink);padding-left:10px}
.loc__n{font-size:10px;letter-spacing:.2em;color:var(--paper-faint)}
.loc__name{font-family:var(--serif);text-transform:uppercase;font-size:clamp(1.2rem,4.2vw,2.4rem);line-height:1}
.loc__note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);text-align:right}

/* ---------- 15. UGC wall ---------- */
.ugc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,22px)}
@media (min-width:760px){.ugc{grid-template-columns:repeat(4,1fr)}}
.pola{background:#101010;padding:9px 9px 34px;position:relative;transition:transform .6s var(--ease-out),background .4s}
.pola:nth-child(odd){transform:rotate(-1.4deg)}
.pola:nth-child(even){transform:rotate(1.1deg)}
.pola:hover{transform:rotate(0) translateY(-6px);background:#151515}
.pola__img{aspect-ratio:4/5;position:relative;overflow:hidden;background:#0a0a0a}
.pola__cap{position:absolute;left:10px;right:10px;bottom:10px;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-faint);display:flex;justify-content:space-between;gap:8px}
/* stand-in for flash photography until the real film lands in these slots */
.flashfield{position:absolute;inset:0;overflow:hidden}
.flashfield::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(22% 16% at 54% 26%,rgba(255,255,255,.34),transparent 70%),
    radial-gradient(46% 34% at 46% 44%,rgba(255,255,255,.10),transparent 72%),
    radial-gradient(60% 46% at 26% 84%,rgba(255,45,143,.42),transparent 66%),
    radial-gradient(52% 40% at 88% 70%,rgba(120,40,200,.28),transparent 68%),
    linear-gradient(168deg,#1a0f1c 0%,#0d0a12 52%,#07070a 100%)}
.flashfield::after{content:"";position:absolute;inset:-30%;
  background:
    linear-gradient(112deg,transparent 42%,rgba(255,255,255,.07) 48%,transparent 54%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen}
.pola__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 82% at 50% 42%,transparent 38%,rgba(0,0,0,.62) 100%)}

/* ---------- 16. Newsletter ---------- */
.news{text-align:center}
.news__headline{font-size:clamp(2.5rem,7.2vw,7.4rem);line-height:.88;max-width:12ch;margin-inline:auto}
.news__question{max-width:28ch;margin-inline:auto;font-size:clamp(1.15rem,2.6vw,1.75rem);font-style:italic;line-height:1.25;color:var(--paper)}
.news__form{margin:34px auto 0;max-width:620px;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){.news__form{flex-direction:row}}
.news__input{flex:1;border-bottom:1px solid var(--line);padding:18px 2px;font-size:13px;letter-spacing:.1em;
  text-align:center;transition:border-color .4s}
@media (min-width:700px){.news__input{text-align:left}}
.news__input::placeholder{color:var(--paper-faint);text-transform:uppercase;font-size:10px;letter-spacing:.24em}
.news__input:focus{border-color:var(--pink);outline:none}
.news__note{margin-top:18px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-faint)}
.news__ok{color:var(--pink);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-top:16px;min-height:16px}

/* ---------- 17. Footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(46px,8vh,86px) 30px}
.foot__grid{display:grid;gap:38px}
@media (min-width:800px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot h4{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:16px;font-weight:500}
.foot li+li{margin-top:9px}
.foot a{font-size:12px;letter-spacing:.06em;color:var(--paper-dim);transition:color .3s}
.foot a:hover{color:var(--pink)}
.foot__bar{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-faint)}
.foot__mark{font-family:var(--serif);text-transform:uppercase;letter-spacing:.4em;
  font-size:clamp(1.4rem,7vw,4.6rem);line-height:1;color:var(--char-2);
  margin-top:52px;text-align:center;user-select:none}

/* ---------- 18. PDP ---------- */
.pdp{display:grid;gap:clamp(26px,4vw,64px);padding-top:calc(var(--nav-h) + 18px)}
@media (min-width:960px){.pdp{grid-template-columns:1.25fr .75fr;align-items:start}}
.pdp__media{position:relative}
.pdp__stage{position:relative;overflow:hidden;background:radial-gradient(66% 58% at 50% 34%,#121212 0%,#0b0b0b 60%,#080808 100%)}
.pdp__slide .shot{background:transparent;display:flex;justify-content:center}
.pdp__slide .shot img{max-height:84svh;width:auto;max-width:100%}
.pdp__slides{display:flex;transition:transform .6s var(--ease-out)}
.pdp__slide{min-width:100%}
.pdp__toggle{display:flex;gap:1px;margin-top:1px;background:var(--line)}
.pdp__toggle button{flex:1;background:var(--ink-2);padding:14px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--paper-faint);transition:color .3s,background .3s}
.pdp__toggle button[aria-selected="true"]{color:var(--pink);background:var(--char)}
@media (min-width:960px){.pdp__info{position:sticky;top:calc(var(--nav-h) + 26px)}}
.pdp__name{font-family:var(--serif);text-transform:uppercase;line-height:.98;
  font-size:clamp(2rem,5.6vw,3.4rem);margin-top:12px}
.pdp__price{margin-top:14px;font-size:15px;letter-spacing:.16em;color:var(--paper)}
.pdp__specs{margin-top:26px;border-top:1px solid var(--line)}
.pdp__specs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper-dim)}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.size{min-width:52px;height:48px;padding:0 12px;border:1px solid var(--line);font-size:11px;letter-spacing:.14em;
  display:grid;place-items:center;transition:border-color .3s,color .3s,background .3s}
.size:hover{border-color:var(--paper-dim)}
.size[aria-pressed="true"]{border-color:var(--pink);color:var(--pink)}
.size[disabled]{opacity:.28;text-decoration:line-through}
.pdp__cta{margin-top:24px}
.pdp__oath{margin-top:18px;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:13px;letter-spacing:.06em;color:var(--paper-faint);line-height:1.7}
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim)}
.acc__b span:last-child{color:var(--pink);font-size:14px;line-height:1}
.acc__p{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.acc__p p{padding-bottom:18px;font-size:12px;line-height:1.75;color:var(--paper-faint)}

/* ---------- 19. Bag drawer ---------- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(4,4,4,.7);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .45s}
body.bag-open .scrim{opacity:1;pointer-events:auto}
.bag{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(430px,100%);background:var(--ink-2);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .6s var(--ease-out)}
body.bag-open .bag{transform:none}
.bag__head{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--line)}
.bag__body{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px}
.bag__foot{padding:22px;border-top:1px solid var(--line)}
.bag__row{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:start}
.bag__thumb{background:var(--char);position:relative;overflow:hidden}
.bag__nm{font-family:var(--serif);text-transform:uppercase;font-size:13px;line-height:1.2}
.bag__sz{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);margin-top:5px}
.bag__qty{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11px;color:var(--paper-dim)}
.bag__qty button{width:20px;height:20px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;line-height:1}
.bag__rm{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-top:8px}
.bag__rm:hover{color:var(--pink)}
.bag__empty{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);text-align:center;margin:auto 0}
.bag__tot{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}

/* ---------- 20. Legal / long form ---------- */
.prose{max-width:74ch;padding-top:calc(var(--nav-h) + 40px)}
.prose h1{font-family:var(--serif);text-transform:uppercase;font-size:clamp(2rem,7vw,3.6rem);line-height:1}
.prose h2{font-family:var(--serif);text-transform:uppercase;font-size:1.15rem;letter-spacing:.04em;margin-top:40px}
.prose p,.prose li{color:var(--paper-dim);font-size:13.5px;line-height:1.85;margin-top:12px}
.prose ul{list-style:none}
.prose li::before{content:"—";color:var(--pink);margin-right:10px}
.prose a{color:var(--pink)}

/* ---------- 21. Reveal / parallax ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ---------- 22. Consent ---------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:88;
  background:rgba(11,11,11,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .6s var(--ease-out)}
.consent__in{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:14px}
@media (min-width:820px){
  .consent__in{flex-direction:row;align-items:center;justify-content:space-between;gap:30px}
  .consent p{max-width:64ch}
}
.consent.show{transform:none}
/* the bar owns the bottom edge while it is up — move the sound control clear */
body.consent-open .sound-dock{bottom:calc(100px + env(safe-area-inset-bottom))}
@media (min-width:820px){body.consent-open .sound-dock{bottom:96px}}
.consent p{font-size:11px;line-height:1.7;color:var(--paper-dim)}
.consent p a{color:var(--pink)}
.consent__row{display:flex;gap:10px;flex-shrink:0}
.consent__row .btn{flex:1;min-height:44px;font-size:9px;padding:0 18px;white-space:nowrap}

/* ---------- 23. Utility ---------- */
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:48px}
.pink{color:var(--pink)}.dim{color:var(--paper-dim)}
.center{text-align:center}
.stack-sm>*+*{margin-top:10px}
.hide-m{display:none}
@media (min-width:900px){.hide-m{display:block}.hide-d{display:none}}
.no-js [data-reveal]{opacity:1;transform:none;clip-path:none}

/* ---------- 24. Collection doors (MEN / WOMEN) ---------- */
.doors{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:800px){.doors{grid-template-columns:1fr 1fr}}
.door{position:relative;display:block;background:var(--ink);overflow:hidden;isolation:isolate}
.door__media{position:relative}
.door__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.45) 0%,transparent 34%,rgba(8,8,8,.9) 100%)}
.door__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3.4vw,44px);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.door__t{font-family:var(--serif);text-transform:uppercase;line-height:.9;letter-spacing:-.01em;
  font-size:clamp(2.6rem,7.4vw,5.2rem)}
.door__n{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-faint)}
.door__cta{margin-top:14px;min-height:46px;padding-inline:26px;pointer-events:none;
  border-color:var(--paper-faint);color:var(--paper)}
.door:hover .door__cta{color:var(--ink)}
.door:hover .door__cta::after{transform:translateY(0)}

/* ---------- 25. Film + copy split ---------- */
.split{display:grid;gap:clamp(26px,5vw,70px);align-items:center;
  padding-block:clamp(60px,11vh,140px);padding-inline:var(--gut);
  max-width:var(--max);margin-inline:auto}
@media (min-width:860px){.split{grid-template-columns:.85fr 1.15fr}}
.split__film{max-width:460px;width:100%}
.split__film .film{border:1px solid var(--line)}

/* ---------- 26. Collection hero ---------- */
.line-hero{display:grid;gap:clamp(26px,5vw,64px);align-items:center;
  padding:calc(var(--nav-h) + clamp(30px,7vh,80px)) var(--gut) clamp(40px,8vh,90px);
  max-width:var(--max);margin-inline:auto}
@media (min-width:900px){.line-hero{grid-template-columns:.8fr 1.2fr}}
.line-hero__film{max-width:430px;width:100%}
.line-hero__film .film{border:1px solid var(--line)}
.line-hero__q{font-size:clamp(1.25rem,3.4vw,2.1rem);font-style:italic;line-height:1.24;
  color:var(--paper);max-width:22ch}

/* ---------- 27. PDP additions ---------- */
.crumb{padding-top:calc(var(--nav-h) + 20px);display:flex;gap:10px;align-items:center;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-faint)}
.crumb a{transition:color .3s}
.crumb a:hover{color:var(--pink)}
.pdp{padding-top:22px}
.pdp__phrase{margin-top:16px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.4rem);line-height:1.34;color:var(--pink)}
.loc__name--sm{font-size:clamp(.95rem,2.6vw,1.55rem)}

/* ---------- 28. Reduced motion ----------
   Films are never auto-started (handled in JS); the poster frame stays visible
   and the element keeps its native controls-free look. */
@media (prefers-reduced-motion:reduce){.shot img{transition:none}}

/* ---------- 29. Lookbook strip ---------- */
.look{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2vw,20px)}
@media (min-width:860px){.look{grid-template-columns:repeat(4,1fr)}}
.look__i{position:relative;background:#101010;padding:9px 9px 34px;overflow:hidden;
  transition:transform .6s var(--ease-out),background .4s}
.look__i:nth-child(odd){transform:rotate(-1.1deg)}
.look__i:nth-child(even){transform:rotate(.9deg)}
.look__i:hover{transform:rotate(0) translateY(-6px);background:#151515}
.look__i img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%;display:block}
.look__cap{position:absolute;left:12px;right:12px;bottom:11px;display:flex;justify-content:space-between;
  gap:8px;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint)}

/* ---------- 30. Waitlist mode ---------- */
.announce{position:fixed;top:0;left:0;right:0;z-index:82;background:var(--pink);color:#0a0a0a;
  text-align:center;padding:7px 16px;font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;line-height:1.5}
body:has(.announce) .nav{top:28px}
body:has(.announce) .hero{padding-top:calc(var(--nav-h) + 48px)}
body:has(.announce) .crumb{padding-top:calc(var(--nav-h) + 48px)}
body:has(.announce) .line-hero,body:has(.announce) .society{padding-top:calc(var(--nav-h) + 58px)}
body:has(.announce) .pad-t{padding-top:calc(clamp(72px,13vh,170px) + 28px)}
body:has(.announce) .prose{padding-top:calc(var(--nav-h) + 68px)}
@supports not selector(:has(*)){.announce{position:static}}

.notify{border-top:1px solid var(--line);padding-top:22px}
.notify__row{display:flex;flex-direction:column;gap:10px}
@media (min-width:520px){
  .notify__row{flex-direction:row;align-items:stretch}
  .notify__input{flex:1}
  .notify__row .btn{flex-shrink:0;padding-inline:26px}
}
.notify__input{text-align:left;border-bottom:1px solid var(--line)}
.notify__input::placeholder{font-size:10px;letter-spacing:.22em}
.pdp__at{font-size:9px;letter-spacing:.24em;color:var(--paper-faint);margin-left:10px;
  vertical-align:middle;text-transform:uppercase}

/* ---------- 31. Soundtrack embed ----------
   The SoundCloud player is audio-only here: parked off-screen, never visible,
   and only inserted into the page once the visitor presses SOUND ON. */
.sc-frame{position:fixed;width:1px;height:1px;left:-9999px;bottom:0;border:0;opacity:0;pointer-events:none}
.sound__t{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 32. Consistent garment presentation ----------
   Every product image lives on the same centered 4:5 canvas.  The browser may
   scale the complete source image, but it must never stretch or crop it. */
.card__media,
.door__media,
.ed__media,
.line-hero__film>.shot{
  aspect-ratio:4/5;
  display:grid;
  place-items:center;
}
.card__media>.shot,
.door__media>.shot,
.ed__media>.shot,
.line-hero__film>.shot{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.card__media .shot img,
.card__media>img,
.door__media .shot img,
.ed__media .shot img,
.line-hero__film>.shot img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:50% 50%;
}
.card:hover .shot img,.card:hover .card__media>img{transform:none}

/* ---------- 33. Ibiza Special Drop / clearer commerce ---------- */
.announce a{display:block;color:inherit}
.announce a:hover,.announce a:focus-visible{text-decoration:underline;text-underline-offset:3px}

.ibiza-hero{overflow:hidden;padding-bottom:clamp(56px,9vh,104px)}
.ibiza-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 45%,rgba(255,45,143,.23),transparent 72%)
}
.ibiza-hero__grid{position:relative;display:grid;gap:clamp(34px,6vw,88px);align-items:center}
@media (min-width:900px){.ibiza-hero__grid{grid-template-columns:1.02fr .98fr}}
.ibiza-hero__badge{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--pink);
  padding:9px 12px;color:var(--pink);font-size:9px;letter-spacing:.22em;text-transform:uppercase
}
.ibiza-hero__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink)}
.ibiza-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,38px)}
.ibiza-hero__visual{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.ibiza-hero__visual picture{aspect-ratio:4/5;background:#050505;overflow:hidden}
.ibiza-hero__visual img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.ibiza-hero__visual picture:last-child{margin-top:clamp(22px,5vw,72px);margin-bottom:calc(clamp(22px,5vw,72px) * -1)}
.ibiza-hero__visual::after{
  content:"LIMITED · SIX PIECES · IBIZA";position:absolute;right:12px;bottom:12px;
  color:var(--pink);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(8,8,8,.82);border:1px solid rgba(255,45,143,.38);padding:7px 9px
}

.ibiza-grid{background:rgba(255,45,143,.18);border-color:rgba(255,45,143,.34)}
.ibiza-grid .card{position:relative}
.ibiza-grid .card__media{background:#050505;border:1px solid rgba(255,255,255,.055)}
.ibiza-grid .card__media>.shot,.ibiza-grid .card__media>img{width:100%;height:100%}
.ibiza-grid .card__media .shot img,.ibiza-grid .card__media>img{
  width:100%;height:100%;object-fit:contain;object-position:50% 50%;padding:clamp(7px,1vw,14px)
}
.ibiza-grid img[src*="marcos-booth"]{scale:1.13}
.ibiza-grid img[src*="put-us-on-list"],.ibiza-grid img[src*="villa-party-math"]{scale:1.06}
.ibiza-grid .card::after{content:"VIEW TEE · FRONT + BACK  →";color:var(--paper-dim)}
.ibiza-grid .card:hover::after,.ibiza-grid .card:focus-visible::after{color:var(--pink)}
.ibiza-grid .card:hover{box-shadow:inset 0 0 0 1px rgba(255,45,143,.45)}
.ibiza-grid .card__tag{background:rgba(8,8,8,.84);border:1px solid rgba(255,45,143,.38);padding:7px 9px;left:12px;bottom:12px}

/* Product detail pages use the identical frame, independently of viewport. */
.pdp__media{
  width:min(100%,67.2svh);
  margin-inline:auto;
}
.pdp__stage{aspect-ratio:4/5}
.pdp__slides,
.pdp__slide,
.pdp__slide .shot{
  height:100%;
}
.pdp__slide .shot{
  width:100%;
  display:grid;
  place-items:center;
}
.pdp__slide .shot img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:50% 50%;
}

/* ---------- 34. Compact mobile storefront ----------
   Keep category choices and product grids useful above the fold on phones.
   Tablet and desktop layouts remain unchanged. */
@media (max-width:639px){
  :root{--gut:16px}

  .menu{
    justify-content:flex-start;
    padding-top:calc(var(--nav-h) + 20px);
    padding-bottom:18px;
    overflow-y:auto;
  }
  .menu a{
    font-size:clamp(1.08rem,5.35vw,1.48rem);
    line-height:1.06;
    padding:3px 0;
    letter-spacing:-.01em;
  }
  .menu a[href$="ibiza-special-drop.html"]::after{
    display:inline;
    margin-left:5px;
    font-size:6px;
    line-height:1;
  }
  .menu__foot{
    position:static;
    margin-top:auto;
    padding-top:12px;
    padding-bottom:max(4px,env(safe-area-inset-bottom));
    font-size:8px;
  }

  .sec-head{gap:10px;margin-bottom:18px}
  .sec-head .kicker{font-size:7px;letter-spacing:.2em}

  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door__body{padding:12px;gap:3px}
  .door__body .kicker{font-size:6px;letter-spacing:.16em;line-height:1.35}
  .door__t{font-size:clamp(1.35rem,7vw,1.9rem);line-height:.95}
  .door__n{font-size:7px;letter-spacing:.18em}
  .door__cta{
    margin-top:5px;
    min-height:32px;
    padding-inline:12px;
    font-size:7px;
    letter-spacing:.18em;
  }

  .line-hero{
    gap:18px;
    padding:calc(var(--nav-h) + 18px) var(--gut) 34px;
  }
  .line-hero__film{
    max-width:min(58vw,220px);
    justify-self:center;
  }
  .line-hero__body{text-align:center}
  .line-hero__body .display{font-size:clamp(2rem,11vw,2.8rem)}
  .line-hero__q{
    margin-inline:auto;
    font-size:1.02rem;
    line-height:1.2;
  }
  .line-hero__body .lede{
    max-width:34ch;
    margin-inline:auto;
    font-size:13px;
    line-height:1.5;
  }

  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:10px;min-width:0}
  .card__meta{
    display:block;
    padding-top:10px;
    min-width:0;
  }
  .card__name{
    font-size:clamp(.76rem,3.65vw,.94rem);
    line-height:1.08;
    overflow-wrap:anywhere;
  }
  .card__sub{
    margin-top:4px;
    font-size:7px;
    line-height:1.35;
    letter-spacing:.12em;
  }
  .card__price{
    display:block;
    margin-top:7px;
    font-size:9px;
    letter-spacing:.1em;
  }
  .card__tag{
    left:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    font-size:6px;
    line-height:1.25;
    letter-spacing:.13em;
  }
  .card::after{
    content:"VIEW  ->";
    margin-top:9px;
    padding-top:8px;
    font-size:7px;
    letter-spacing:.14em;
  }
  .ibiza-grid .card::after{content:"VIEW TEE  ->"}
  .ibiza-grid .card__tag{left:7px;bottom:7px;padding:5px 6px}
  .ibiza-grid img[src*="marcos-booth"]{scale:1.06}
  .ibiza-grid img[src*="put-us-on-list"],
  .ibiza-grid img[src*="villa-party-math"]{scale:1.02}
}

@media (max-width:359px){
  .door__body .kicker,.door__n{display:none}
  .door__cta{margin-top:3px}
  .card__sub{display:none}
}