/* ==========================================================================
   All Leaders Follow — core stylesheet
   Tokens -> base -> layout -> components -> pages -> motion -> responsive
   ========================================================================== */

:root{
  --ink:#0b0b0c;
  --ink-2:#16171a;
  --ink-3:#22242a;
  --paper:#f4f4f2;
  --paper-2:#e9e9e6;
  --line:#d7d7d3;
  --line-dark:#2b2d33;
  --mute:#6f7378;
  --mute-dark:#9aa0a6;
  --ice:#a9c7de;
  --ice-deep:#7fa8c6;
  --steel:#8b9298;

  --wrap:1320px;
  --gut:clamp(18px,4vw,54px);
  --r:2px;

  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --nav-h:68px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:.96;letter-spacing:-.02em;text-transform:uppercase}
h1{font-weight:900;font-size:clamp(2.6rem,9vw,7rem)}
h2{font-weight:800;font-size:clamp(1.9rem,4.6vw,3.6rem)}
h3{font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--ice-deep);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding:clamp(56px,9vw,120px) 0}
.section--tight{padding:clamp(40px,6vw,76px) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark h1,.dark h2,.dark h3{color:#fff}

.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin:0 0 14px
}
.dark .eyebrow{color:var(--ice)}
.lead{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--mute);max-width:62ch}
.dark .lead{color:var(--mute-dark)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  padding:15px 30px;border-radius:var(--r);
  font-family:var(--f-display);font-weight:800;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.5)}
.btn--outline-light:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link-u{
  font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px
}

/* ---------- announcement + nav ---------- */
.announce{
  background:var(--ink);color:#fff;overflow:hidden;
  font-family:var(--f-display);font-weight:700;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;padding:9px 0
}
.announce .track{display:flex;width:max-content;gap:48px;animation:slide 34s linear infinite}
.announce span{white-space:nowrap;display:flex;align-items:center;gap:48px}
.announce span::after{content:"";width:5px;height:5px;background:var(--ice);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}

/* The header floats over the page: translucent at the top so the artwork
   shows through, firming up once you scroll so it stays readable. */
.nav{
  position:sticky;top:0;z-index:80;color:#fff;overflow:hidden;
  background:rgba(11,11,12,.24);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .28s ease,border-color .28s ease
}
/* clearer as you scroll, not blacker — the water carries legibility */
.nav.is-stuck{background:rgba(11,11,12,.58)}
/* without backdrop blur the tint has to carry legibility on its own */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{background:rgba(11,11,12,.55)}
  .nav.is-stuck{background:rgba(11,11,12,.45)}
}
/* a pale section behind the glass needs a little more tint under the type */
body.light-top .nav{background:rgba(11,11,12,.62)}
body.light-top .nav.is-stuck{background:rgba(11,11,12,.62)}

/* the pulse trace, behind the header contents */
.nav-sky{position:absolute;inset:0;display:block;z-index:0;pointer-events:none}

/* how far down the page you are */
.nav-prog{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--ice);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none;z-index:2
}

/* content starts underneath the bar, so the hero runs to the very top */
main{margin-top:calc(var(--nav-h) * -1)}
main > *:first-child:not(.hero){padding-top:var(--nav-h)}
/* every page floats now; the water gives the bar its own ground */
.nav-in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:var(--nav-h);display:flex;align-items:center;gap:12px
}
/* equal flex on both sides keeps the wordmark centred whatever they hold */
.nav-side{flex:1 1 0;display:flex;align-items:center;gap:22px;min-width:0}
.nav-side--r{justify-content:flex-end;gap:16px}
.brand{flex:0 0 auto}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:30px;height:auto}
.brand .word{
  font-family:var(--f-display);font-weight:900;font-size:.86rem;
  letter-spacing:.2em;text-transform:uppercase;line-height:1
}
.brand .word i{display:block;font-style:normal;font-weight:600;font-size:.56rem;letter-spacing:.34em;color:var(--mute-dark);margin-top:3px}
.nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0;flex:1}
.nav-links a{
  font-family:var(--f-display);font-weight:700;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;position:relative;padding:6px 0
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:currentColor;transition:right .3s var(--ease)
}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-tools{display:flex;align-items:center;gap:16px;margin-left:auto}
.icon-btn{
  background:none;border:0;padding:6px;display:grid;place-items:center;position:relative;
  color:inherit
}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bag-count{
  position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  background:#fff;color:var(--ink);border-radius:9px;
  font-family:var(--f-display);font-weight:800;font-size:.6rem;
  display:grid;place-items:center;transform:scale(0);transition:transform .2s var(--ease)
}
.bag-count.show{transform:scale(1)}
.burger{display:none;background:none;border:0;padding:6px;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,860px);display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;opacity:.92}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,.14) 30%,rgba(11,11,12,.56) 62%,rgba(11,11,12,.92) 100%)
}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) clamp(38px,6vw,72px)}
.hero h1{color:#fff;max-width:14ch}
.hero h1 em{font-style:normal;display:block;color:var(--ice)}
.hero__sub{color:rgba(255,255,255,.82);max-width:44ch;margin:20px 0 28px;font-size:1.02rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__meta{
  position:absolute;right:var(--gut);bottom:clamp(38px,6vw,72px);z-index:2;
  writing-mode:vertical-rl;font-family:var(--f-display);font-weight:700;font-size:.68rem;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)
}

/* ---------- marquee band ---------- */
.band{background:var(--ink);color:#fff;padding:14px 0;overflow:hidden}
.band .track{display:flex;width:max-content;animation:slide 30s linear infinite}
.band b{
  font-family:var(--f-display);font-weight:900;font-size:clamp(1.1rem,2.4vw,1.9rem);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-inline:26px;
  display:flex;align-items:center;gap:26px
}
.band b::after{content:"";width:9px;height:9px;background:var(--ice);transform:rotate(45deg)}
.band b:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}

/* ---------- section head ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,4vw,46px);flex-wrap:wrap}
.head p{margin:10px 0 0}

/* ---------- collection tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);
  display:flex;align-items:flex-end;padding:26px;isolation:isolate
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.05),rgba(11,11,12,.78))}
.tile:hover img{transform:scale(1.06)}
.tile--graphic{background:
  radial-gradient(120% 90% at 20% 10%,rgba(169,199,222,.30),transparent 60%),
  linear-gradient(160deg,#1a1c21,#0b0b0c 70%)}
.tile__body{position:relative;color:#fff}
.tile__body h3{margin-bottom:6px}
.tile__body span{font-family:var(--f-display);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 14px}
.card{display:flex;flex-direction:column;background:transparent}
.card__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center
}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.045)}
.card__flag{
  position:absolute;top:11px;left:11px;z-index:2;background:var(--ink);color:#fff;
  padding:5px 10px;font-family:var(--f-display);font-weight:800;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase
}
.card__flag--ice{background:var(--ice);color:var(--ink)}
.card__body{padding:14px 2px 0;display:flex;flex-direction:column;gap:5px;flex:1}
.card__name{font-family:var(--f-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1.15}
.card__meta{font-size:.8rem;color:var(--mute)}
.card__price{font-family:var(--f-display);font-weight:700;font-size:.9rem;margin-top:auto;padding-top:8px}
.card__price s{color:var(--mute);font-weight:500;margin-right:8px}
/* placeholder card art — replace src when studio shots land */
.ph{
  position:absolute;inset:0;display:grid;place-items:center;gap:10px;
  background:linear-gradient(150deg,#1b1d22,#0b0b0c);color:rgba(255,255,255,.6)
}
.ph img{width:54px;height:auto;opacity:.5;object-fit:contain}
.ph span{
  font-family:var(--f-display);font-weight:700;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase
}

/* ---------- feature (split) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.split__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body h2{margin-bottom:18px}
.spec{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.dark .spec{border-color:var(--line-dark)}
.spec li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.dark .spec li{border-color:var(--line-dark)}
.spec b{font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dark .spec b{color:var(--mute-dark)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark)}
.stats div{background:var(--ink);padding:clamp(22px,3vw,34px)}
.stats strong{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(1.8rem,4vw,3rem);color:#fff;line-height:1}
.stats span{display:block;margin-top:8px;font-size:.8rem;color:var(--mute-dark)}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);align-items:start}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gallery a{display:block;background:var(--paper-2);overflow:hidden;aspect-ratio:4/5}
.gallery a:first-child{grid-column:1/-1;aspect-ratio:4/4.4}
.gallery img{width:100%;height:100%;object-fit:cover}
.pdp__panel{position:sticky;top:calc(var(--nav-h) + 22px)}
.price{font-family:var(--f-display);font-weight:800;font-size:1.5rem;margin:12px 0 4px}
.price s{color:var(--mute);font-weight:500;font-size:1.05rem;margin-right:10px}
.swatches{display:flex;gap:9px;margin:18px 0 4px}
.swatch{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);padding:3px;background:none}
.swatch i{display:block;width:100%;height:100%;border-radius:50%}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;margin:12px 0 6px}
.size{
  border:1.5px solid var(--line);background:#fff;padding:13px 6px;border-radius:var(--r);
  font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.08em;
  transition:border-color .2s,background .2s,color .2s
}
.size:hover{border-color:var(--ink)}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.size[disabled]{color:var(--mute);background:var(--paper-2);text-decoration:line-through;cursor:not-allowed}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.note{font-size:.82rem;color:var(--mute)}
.acc{border-top:1px solid var(--line);margin-top:26px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.2rem;font-weight:400;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .acc__body{padding:0 0 18px;font-size:.92rem;color:var(--mute)}
.acc .acc__body ul{margin:0;padding-left:18px}

/* ---------- bag drawer ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(11,11,12,.55);opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;z-index:90;backdrop-filter:blur(2px)
}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);
  background:var(--ink);color:#fff;
  z-index:95;transform:translateX(100%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column
}
.drawer h3,.drawer h4,.drawer .total{color:#fff}
.drawer .note,.drawer .bag-empty{color:var(--mute-dark)}
.drawer .btn{--bg:#fff;--fg:var(--ink);--bd:#fff}
.drawer .btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.45)}
.drawer .btn--ghost:hover{--bg:#fff;--fg:var(--ink);--bd:#fff}
.drawer .bag-line button{color:var(--mute-dark)}
.drawer .bag-line button:hover{color:#fff}
.drawer.open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line-dark)}
.drawer__head h3{font-size:1rem;letter-spacing:.14em}
.drawer__body{flex:1;overflow:auto;padding:18px 22px}
.drawer__foot{border-top:1px solid var(--line-dark);padding:20px 22px;display:grid;gap:12px}
.bag-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-dark)}
.bag-line img{width:64px;height:80px;object-fit:cover;background:#1a1c20}
.bag-line h4{font-family:var(--f-display);font-weight:800;font-size:.82rem;text-transform:uppercase;margin:0 0 4px}
.bag-line p{margin:0;font-size:.78rem;color:var(--mute)}
.bag-line button{background:none;border:0;padding:0;font-size:.74rem;color:var(--mute);text-decoration:underline;margin-top:6px}
.bag-empty{text-align:center;color:var(--mute);padding:48px 0;font-size:.92rem}
.total{display:flex;justify-content:space-between;font-family:var(--f-display);font-weight:800;font-size:1rem;text-transform:uppercase}

/* ---------- mobile menu ---------- */
.mmenu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:70;overflow:auto;
  background:var(--ink);color:#fff;
  transform:translateY(-10px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s
}
.mmenu.open{transform:none;opacity:1;visibility:visible}
.mmenu__in{padding:12px var(--gut) 40px;max-width:var(--wrap);margin-inline:auto}
.mmenu ul{list-style:none;margin:0 0 30px;padding:0;display:grid}
.mmenu ul a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 0;border-bottom:1px solid var(--line-dark);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:1.6rem;
  letter-spacing:-.01em;text-transform:uppercase;
  transform:translateY(14px);opacity:0
}
.mmenu ul a::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--ice);border-top:2px solid var(--ice);
  transform:rotate(45deg);opacity:.8
}
/* each line arrives just after the one above it */
.mmenu.open ul a{animation:mIn .42s var(--ease) forwards}
.mmenu.open li:nth-child(1) a{animation-delay:.04s}
.mmenu.open li:nth-child(2) a{animation-delay:.09s}
.mmenu.open li:nth-child(3) a{animation-delay:.14s}
.mmenu.open li:nth-child(4) a{animation-delay:.19s}
.mmenu.open li:nth-child(5) a{animation-delay:.24s}
.mmenu.open li:nth-child(6) a{animation-delay:.29s}
@keyframes mIn{to{transform:none;opacity:1}}

/* the drop, sold rather than listed */
.mmenu__feature{
  display:flex;align-items:center;gap:16px;padding:14px;
  background:#141518;border:1px solid var(--line-dark);border-radius:var(--r);
  color:#fff;opacity:0;transform:translateY(14px)
}
.mmenu.open .mmenu__feature{animation:mIn .45s var(--ease) .34s forwards}
.mmenu__feature img{width:86px;height:108px;object-fit:cover;flex:0 0 auto}
.mmenu__copy{display:grid;gap:5px}
.mmenu__copy b{
  font-family:var(--f-display);font-weight:700;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ice)
}
.mmenu__copy strong{font-family:var(--f-display);font-weight:800;font-size:1rem;text-transform:uppercase;line-height:1.15}
.mmenu__copy em{font-style:normal;font-size:.9rem;color:var(--mute-dark)}

.mmenu__foot{
  display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;
  font-family:var(--f-display);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase
}
.mmenu__foot a{color:var(--mute-dark)}
.mmenu__foot a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  .mmenu ul a,.mmenu__feature{opacity:1;transform:none;animation:none}
}

/* ---------- newsletter ---------- */
.signup{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px;margin-top:22px}
input,select,textarea{
  font:inherit;width:100%;padding:14px 16px;border-radius:var(--r);
  border:1.5px solid var(--line);background:#fff;color:var(--ink)
}
.dark input,.dark textarea,.dark select{background:transparent;border-color:var(--line-dark);color:#fff}
.dark input::placeholder,.dark textarea::placeholder{color:var(--mute-dark)}
textarea{min-height:140px;resize:vertical}
label{display:block;font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
.field{margin-bottom:18px}
.form-note{font-size:.8rem;color:var(--mute);margin-top:10px}
.dark .form-note{color:var(--mute-dark)}
.status{margin-top:14px;font-size:.9rem;font-weight:600}

/* ---------- prose / tables ---------- */
.prose{max-width:74ch}
.prose h2{margin:44px 0 14px}
.prose h3{margin:30px 0 10px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:7px}
.table-wrap{overflow-x:auto;margin:22px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
th{font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:var(--paper-2)}

/* ---------- page hero ---------- */
.phero{background:var(--ink);color:#fff;padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px)}
.phero h1{font-size:clamp(2.2rem,6.4vw,4.6rem);max-width:18ch}
.phero .lead{margin-top:18px;color:var(--mute-dark)}
.crumbs{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dark);margin-bottom:18px;font-family:var(--f-display);font-weight:700}
.crumbs a:hover{color:#fff}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
  border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:9px 18px;
  font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  transition:.2s
}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--mute-dark);padding:clamp(52px,7vw,90px) 0 30px}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,50px)}
.foot h4{font-family:var(--f-display);font-weight:800;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.9rem}
.foot a:hover{color:#fff}
.foot__brand img{width:44px;margin-bottom:16px}
.foot__brand p{font-size:.9rem;max-width:34ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
  width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;
  display:grid;place-items:center;transition:.2s
}
.socials a:hover{background:#fff;border-color:#fff;color:var(--ink)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.foot__bar{
  margin-top:clamp(38px,5vw,60px);padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.78rem
}
.foot__bar ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .announce .track,.band .track{animation:none}
  .tile img,.card__media img{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-side{gap:10px}
  .tiles{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .pdp__panel{position:static}
  .hero__meta{display:none}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .signup{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery a:first-child{aspect-ratio:4/5}
}

/* visually hidden (kept focusable/readable for screen readers) */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Wishlist, search and the opening sequence
   ========================================================================== */

/* ---------- wishlist heart ---------- */
.wish{
  position:absolute;top:9px;right:9px;z-index:3;
  width:36px;height:36px;display:grid;place-items:center;
  background:rgba(255,255,255,.86);border:0;border-radius:50%;padding:0;
  backdrop-filter:blur(3px);
  transition:background .2s,transform .18s var(--ease)
}
.wish svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.wish:hover{background:#fff;transform:scale(1.08)}
.wish[aria-pressed="true"] svg{fill:#d2404a;stroke:#d2404a}
.wish.pop{animation:pop .34s var(--ease)}
@keyframes pop{40%{transform:scale(1.28)}100%{transform:scale(1)}}

/* full-width variant on the product page */
.wish--wide{
  position:static;width:100%;height:auto;border-radius:var(--r);
  background:transparent;backdrop-filter:none;margin-top:10px;gap:10px;
  display:inline-flex;align-items:center;justify-content:center
}
.wish--wide:hover{background:var(--ink);transform:none}
.wish--wide:hover svg{stroke:#fff}
.wish--wide[aria-pressed="true"] svg{fill:#d2404a;stroke:#d2404a}
.wish--wide svg{width:17px;height:17px}

/* stretched card link — keeps the heart clickable above it */
.card{position:relative}
.card__link{position:static}
.card__link::after{content:"";position:absolute;inset:0;z-index:1}

/* ---------- search ---------- */
.search-panel{
  position:fixed;left:0;right:0;top:0;z-index:96;
  background:var(--ink);color:#fff;border-bottom:1px solid var(--line-dark);
  box-shadow:0 24px 44px rgba(11,11,12,.14);
  animation:dropIn .28s var(--ease)
}
@keyframes dropIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.search-in{max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut) 22px}
.search-form{display:flex;align-items:center;gap:12px;border-bottom:2px solid #fff;padding-bottom:10px}
.search-ico{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.search-form input{
  border:0;padding:8px 0;background:none;color:#fff;font-family:var(--f-display);
  font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:-.01em
}
.search-form input:focus{outline:0}
.search-form input::-webkit-search-cancel-button{display:none}
.search-results{margin-top:18px;max-height:min(52vh,420px);overflow:auto}
.sr-row{
  display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;
  padding:11px 4px;border-bottom:1px solid var(--line-dark);color:#fff
}
.sr-row:hover{background:#16171a}
.sr-row img{width:56px;height:70px;object-fit:cover;background:#1a1c20}
.sr-row .sr-ph{width:56px;height:70px;background:linear-gradient(150deg,#1b1d22,#0b0b0c);display:grid;place-items:center}
.sr-row .sr-ph img{width:26px;height:auto;object-fit:contain;opacity:.55;background:none}
.sr-row h4{font-family:var(--f-display);font-weight:800;font-size:.86rem;text-transform:uppercase;margin:0 0 3px}
.sr-row p{margin:0;font-size:.78rem;color:var(--mute-dark);text-transform:capitalize}
.sr-row b{font-family:var(--f-display);font-weight:700;font-size:.86rem}
.sr-empty{padding:26px 4px;color:var(--mute-dark);font-size:.92rem}

/* ---------- opening sequence ----------
   Two clipped panes show the same rendered frame; at the reveal they are
   thrown apart, so the scene tears in half rather than sliding away. */
#intro{display:none}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on #intro{
  display:block;position:fixed;inset:0;z-index:200;background:#0b0b0c;overflow:hidden
}
/* Both halves cover the whole screen and carry the same frame. At the tear
   each is clipped to one side of the crack the last bolt left, so the image
   breaks along that jagged line rather than a straight seam. */
.intro__pane{position:absolute;inset:0;overflow:hidden;will-change:transform}
.intro__canvas{position:absolute;left:0;top:0;width:100%;height:auto;display:block}

/* the panes paint their own black, so drop the backdrop as they part —
   otherwise the gap reveals the overlay instead of the page */
html.intro-on #intro.is-torn{background:transparent}
#intro.is-torn .intro__pane{
  transition:transform .78s cubic-bezier(.62,0,.18,1);
  transition-delay:.10s
}
#intro.is-torn .intro__pane--top{transform:translateY(-102%)}
#intro.is-torn .intro__pane--bottom{transform:translateY(102%)}

@media (prefers-reduced-motion:reduce){
  html.intro-on #intro{display:none}
  html.intro-on,html.intro-on body{overflow:auto}
}

/* three icons need a touch less air between them on small screens */
@media (max-width:520px){
  .nav-in{gap:12px}
  .nav-side{gap:4px}
  .nav-side--r{gap:0}
  .brand{gap:8px}
  .brand img{width:30px}
  .brand .word{font-size:.72rem;letter-spacing:.09em}
  .brand .word i{font-size:.5rem;letter-spacing:.2em;margin-top:2px}
  .icon-btn{padding:6px}
  .icon-btn svg{width:26px;height:26px}
  .burger{padding:4px}
  .burger span{width:24px;height:2px}
}
/* With search moved across, the two sides carry two controls each and the
   wordmark sits in balanced space, so it barely has to give ground even on
   the narrowest phones. */
@media (max-width:400px){
  .nav-in{gap:8px}
  .brand{gap:7px}
  .brand img{width:28px}
  .brand .word{font-size:.66rem;letter-spacing:.06em}
  .brand .word i{font-size:.46rem;letter-spacing:.18em;margin-top:2px}
  .icon-btn{padding:4px}
  .icon-btn svg{width:24px;height:24px}
  .burger{padding:3px}
  .burger span{width:22px}
}
/* No overflow-x here: it makes <html> a scroll container, which silently
   breaks position:sticky on the header. The nav fix above removed the
   actual overflow, and body still carries the safety net. */

/* ---------- scroll-scrubbed drop hero ---------- */
.scrub{position:relative;height:560vh;background:#000;color:#fff}
.scrub__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#000}
.scrub__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrub__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.scrub.is-live .scrub__poster{display:none}
.scrub__copy{position:absolute;inset:0;z-index:2;pointer-events:none;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut)}
.scrub__block{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(64px,11vh,120px);max-width:34rem;
  opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.scrub__block.is-on{opacity:1;transform:none}
.scrub__block--r{left:auto;text-align:right;margin-left:auto}
.scrub__block--c{left:var(--gut);right:var(--gut);max-width:none;text-align:center;bottom:auto;top:clamp(96px,17vh,170px)}
.scrub__block .eyebrow{color:var(--ice)}
.scrub__block h1,.scrub__block h2{color:#fff;font-size:clamp(2.4rem,7.4vw,6rem);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.scrub__block h2{font-size:clamp(2rem,5.6vw,4.4rem)}
.scrub__block .lead{color:rgba(255,255,255,.78);margin-top:14px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.scrub__block .btn{pointer-events:auto}
.scrub__facts{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.95rem,1.6vw,1.25rem)}
.scrub__facts li{display:flex;gap:14px;align-items:baseline}
.scrub__block--r .scrub__facts li{justify-content:flex-end}
.scrub__facts b{color:var(--ice);font-weight:800;font-size:.72em;letter-spacing:.2em}

.scrub__facts li{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s ease}
.scrub__block.is-on .scrub__facts li{opacity:1;transform:none}
.scrub__block.is-on .scrub__facts li:nth-child(2){transition-delay:.12s}
.scrub__block.is-on .scrub__facts li:nth-child(3){transition-delay:.24s}
.scrub__block.is-on .scrub__facts li:nth-child(4){transition-delay:.36s}
.scrub__words{
  position:absolute;left:52%;right:var(--gut);top:clamp(80px,14vh,140px);z-index:2;pointer-events:none;
  text-align:left;font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(2.4rem,5.6vw,5rem);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.7)
}
.scrub__words span{display:inline-block;opacity:0;margin:0 .12em}
.scrub__words span.is-on{animation:wordIn .42s steps(1,end) forwards}
.scrub__words span:nth-child(3){color:var(--ice)}
@keyframes wordIn{0%{opacity:1}12%{opacity:0}22%{opacity:1}34%{opacity:.2}46%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.scrub__words span{opacity:1;animation:none}}
.scrub__hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  font-family:var(--f-display);font-weight:700;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s;
}
.scrub__hint i{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:scrubHint 1.6s ease-in-out infinite}
.scrub.is-live .scrub__hint:not(.is-on){opacity:0}
@keyframes scrubHint{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
.scrub__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ice);transform:scaleX(0);transform-origin:0 50%;z-index:3}
.scrub__cta{position:absolute;left:0;right:0;bottom:clamp(64px,11vh,120px);text-align:center;z-index:2;pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s}
.scrub__cta.is-on{opacity:1;transform:none}
.scrub__cta .btn{pointer-events:auto}
@media (max-width:640px){
  .scrub{height:620vh}
  .scrub__cta{bottom:clamp(56px,9vh,96px)}
  .scrub__block.scrub__block--cta{bottom:calc(clamp(56px,9vh,96px) + 84px)}
  .scrub__block.scrub__block--cta h2{font-size:clamp(1.5rem,7vw,2.2rem)}
  .scrub__block.scrub__block--cta .lead{margin-top:6px;font-size:.9rem}
  .scrub__block,.scrub__block--r,.scrub__block--c{left:var(--gut);right:var(--gut);max-width:none;margin:0;bottom:clamp(56px,9vh,96px);top:auto;text-align:left}
  .scrub__block--c{text-align:center}
  .scrub__block--r .scrub__facts li{justify-content:flex-start}
  .scrub__words{left:var(--gut);text-align:center;font-size:clamp(2.4rem,10vw,3.6rem)}
  .scrub__block h1{font-size:clamp(2.2rem,11vw,3.4rem)}
  .scrub__block h2{font-size:clamp(1.7rem,8.4vw,2.6rem)}
  .scrub__facts{font-size:.95rem;gap:7px}
  }
@media (prefers-reduced-motion:reduce){
  .scrub{height:auto}
  .scrub__stage{position:relative;height:auto;aspect-ratio:16/9}
  .scrub__stage canvas,.scrub__hint,.scrub__bar{display:none}
  .scrub.is-live .scrub__poster{display:block}
  .scrub__block,.scrub__cta{position:static;opacity:1;transform:none;padding:24px var(--gut)}
}