/* ============================================================
   VOLT CULTURE — Shop prototype
   Shared design tokens + components for shop/index.html and
   the product pages. UI/UX only — no payment wired up.
   ============================================================ */

:root{
  --void:#0B0B0C;--ink:#141416;--sheen:#EDEBE7;--sand:#D2C7B8;
  --dim:rgba(237,235,231,.5);--dimmer:rgba(237,235,231,.28);--dimmest:rgba(237,235,231,.14);
  --line:rgba(237,235,231,.16);
  /* Product "stage" — graphite backdrop so BLACK garments keep their
     silhouette, seams and construction. Product visibility is a UX
     requirement: never place a black garment on flat black. */
  --bone:#F0EDE7;         /* warm off-white studio ground */
  --bone-deep:#E4DFD5;
  --stage-core:#33333A;   /* light pool directly behind the garment */
  --stage-mid:#232328;
  --stage-edge:#151518;   /* falls off to near-black at the frame edge */
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* CRITICAL: component rules like `.soverlay{display:flex}` have the same
   specificity as the UA `[hidden]` rule and win on source order, which left
   closed overlays sitting invisibly over the page and swallowing every click.
   This makes `hidden` authoritative everywhere. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--void);color:var(--sheen);
  font-family:var(--display);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--sheen);outline-offset:4px}
.mono{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.19em;text-transform:uppercase}

/* ---------- global header ---------- */
/* Akimbo-style: the mark stays centred and persistent while content scrolls
   PAST it. Deliberately NOT a solid sticky bar — the background is a short,
   soft scrim that only exists for legibility, and the controls carry their own
   blurred pills so they stay readable over any imagery. */
:root{ --navh:76px; --navh-sm:60px; }
@media(max-width:760px){ :root{ --navh:64px; --navh-sm:52px; } }

body{padding-top:var(--navh)}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(10px,3vw,28px);height:var(--navh);box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  /* NO bar, NO scrim, NO backdrop — only the logo and controls float. */
  background:none;
  transition:height .35s var(--ease);
  pointer-events:none;
}
.nav > *{pointer-events:auto}
.nav.scrolled{height:var(--navh-sm)}

/* Controls retire while scrolling DOWN and return on scroll UP, so they never
   form a permanent floating strip over the page. The mark never leaves. */
.nav .side{
  display:flex;align-items:center;gap:clamp(2px,1vw,8px);
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav.hide-controls .side{opacity:0;transform:translateY(-10px);visibility:hidden}
.nav .side.left{grid-column:1;justify-self:start}
.nav .side.right{grid-column:3;justify-self:end}

/* 44px targets. Each control carries its own small blurred disc so it stays
   legible over imagery without needing a full-width background. */
.iconbtn,.bagbtn{
  position:relative;width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--sheen);
  border-radius:50%;transition:opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.iconbtn::before,.bagbtn::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:rgba(11,11,12,.42);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s var(--ease);
}
.nav.scrolled .iconbtn::before,.nav.scrolled .bagbtn::before{opacity:1}
.iconbtn:hover,.bagbtn:hover{opacity:.7}
.iconbtn svg,.bagbtn svg{width:21px;height:21px;display:block;position:relative;z-index:1}

/* THE PERSISTENT MARK
   Mathematically centred to the VIEWPORT (not to a grid cell), so it cannot
   drift when the icon sets on either side differ in width.
   No glow, halo, drop-shadow or blurred backing anywhere — legibility comes
   from adaptive colour alone (see .is-dark / .is-light below). */
.nav .mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  line-height:1;text-decoration:none;
}
.nav .mark img{
  height:clamp(43px,6.6vw,55px);width:auto;   /* ~+25% */
  filter:invert(1);
  transition:height .35s var(--ease),filter .28s linear;
}
.nav.scrolled .mark img{height:clamp(38px,5.6vw,47px)}
.nav .mark .wordmark{
  font-weight:900;font-stretch:118%;letter-spacing:-.005em;
  font-size:clamp(10px,1.5vw,13px);white-space:nowrap;color:var(--sheen);
  max-height:20px;opacity:1;overflow:hidden;
  transition:max-height .35s var(--ease),opacity .25s var(--ease),color .28s linear;
}
.nav.scrolled .mark .wordmark{max-height:0;opacity:0}

/* Adaptive colour. `is-light` = the pixels under the mark are light, so the
   mark goes solid black; otherwise it stays solid white. Crisp either way. */
.nav.is-light .mark img{filter:none}
.nav.is-light .mark .wordmark{color:var(--void)}
.nav.is-light .iconbtn,.nav.is-light .bagbtn{color:var(--void)}
.nav.is-light .iconbtn::before,.nav.is-light .bagbtn::before{background:rgba(240,237,231,.62)}

.bagbtn .n{
  position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:50%;
  background:var(--sand);color:var(--void);font-family:var(--mono);font-size:9px;line-height:16px;
  text-align:center;z-index:2;
}
.bagbtn .n:empty{display:none}

/* shared scrim for menu + search */
.navscrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .4s var(--ease);z-index:140}
.navscrim.on{opacity:1}
body.vc-locked{overflow:hidden}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skiplink{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--sheen);color:var(--void);
  padding:12px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.skiplink:focus{left:8px;top:8px}

/* ---------- menu drawer ---------- */
.mdrawer{
  position:fixed;top:0;left:0;bottom:0;width:min(380px,88vw);background:var(--void);
  border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .5s var(--ease);
  z-index:145;display:flex;flex-direction:column;
}
.mdrawer.on{transform:none}
.mdrawer .dhead{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(18px,4vw,26px);border-bottom:1px solid var(--line)}
.mdrawer .dhead img{height:26px;filter:invert(1)}
.mdrawer nav{flex:1;padding:14px clamp(18px,4vw,26px)}
.mdrawer nav a{display:block;padding:18px 0;border-bottom:1px solid var(--line);font-weight:800;font-stretch:114%;font-size:22px;transition:color .3s,padding-left .4s var(--ease)}
.mdrawer nav a:hover{color:var(--sand);padding-left:6px}
.mdrawer .dfoot{padding:20px clamp(18px,4vw,26px) 28px;border-top:1px solid var(--line)}
.mdrawer .signin{display:flex;align-items:center;gap:10px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;transition:color .3s;text-decoration:none}
.mdrawer .signin:hover{color:var(--sheen)}
.mdrawer .signin svg{width:16px;height:16px}
.dnote-sm{margin:18px 0 0;color:var(--dimmest);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- search overlay ---------- */
.soverlay{
  position:fixed;inset:0;background:var(--void);z-index:145;opacity:0;
  transition:opacity .4s var(--ease);display:flex;flex-direction:column;
}
.soverlay.on{opacity:1}
.soverlay .shead{display:flex;justify-content:flex-end;padding:20px clamp(18px,4vw,26px)}
.soverlay .sbody{flex:1;padding:0 clamp(18px,6vw,80px);max-width:900px;margin:0 auto;width:100%}
.soverlay input{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--sheen);
  font-family:var(--display);font-weight:800;font-stretch:114%;font-size:clamp(22px,5vw,44px);
  padding:14px 0;outline:none;
}
.soverlay input::placeholder{color:var(--dimmer)}
.soverlay input:focus{border-bottom-color:var(--sheen)}
.sresults{margin-top:28px;display:flex;flex-direction:column}
.sresults a{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;color:var(--sheen);transition:color .3s}
.sresults a:hover{color:var(--sand)}
.sresults .empty{color:var(--dimmer);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:16px 0}

/* ---------- footer ---------- */
.sfoot{border-top:1px solid var(--line);padding:34px clamp(18px,4vw,36px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--dimmer);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- generic layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}

/* ---------- editorial headline block ---------- */
.editorial{padding:clamp(48px,9vw,110px) 0}
.editorial h2{
  margin:0;font-weight:900;font-stretch:118%;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(40px,8.6vw,108px);color:var(--sheen);
}
.editorial .sub{margin:18px 0 0;color:var(--dim);max-width:44ch;font-size:15px;line-height:1.65}
.rule{height:1px;background:var(--line);margin:clamp(24px,4vw,40px) 0}

/* ---------- shop grid (asymmetric — hero + pair, never a catalogue) ---------- */
.shopgrid{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
@media(min-width:760px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
.pcard{position:relative;background:var(--void);overflow:hidden;display:block}
.pcard .frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(68% 58% at 50% 40%, var(--stage-core) 0%, var(--stage-mid) 46%, var(--stage-edge) 78%);
}
.pcard .frame .ground{
  position:absolute;left:50%;bottom:9%;width:58%;height:10%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 75%);
  transform:translateX(-50%) scale(var(--gs,1));filter:blur(2px);transition:transform .4s var(--ease),opacity .4s;
  opacity:.7;pointer-events:none;
}
.pcard .frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9% 13%;
  transition:opacity .7s var(--ease),transform .5s var(--ease);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.pcard .frame img.back{opacity:0}
.pcard:hover .frame img.back,.pcard.touch-flip .frame img.back{opacity:1}
.pcard:hover .frame img.front,.pcard.touch-flip .frame img.front{opacity:0}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 20px 26px}
.pcard .code{color:var(--sand);font-family:var(--mono);font-size:10px;letter-spacing:.14em;display:block;margin-bottom:6px}
.pcard .nm{font-weight:800;font-stretch:114%;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.005em}
.pcard .go{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .3s}
.pcard:hover .go{color:var(--sheen)}

/* hero card: two portraits side by side, forming a diptych rather than one squashed photo */
.pcard.hero-card{grid-column:1 / -1}
.hero-card .frame{
  aspect-ratio:16/11;display:grid;grid-template-columns:1fr 1fr;
  background:radial-gradient(78% 66% at 50% 42%, var(--stage-core) 0%, var(--stage-mid) 48%, var(--stage-edge) 80%);
}
@media(min-width:760px){.hero-card .frame{aspect-ratio:22/9}}
.hero-card .frame .half{position:relative;overflow:hidden}
.hero-card .frame .half img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6% 14%;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease);
}
.hero-card .frame .ground{
  position:absolute;left:50%;bottom:6%;width:70%;height:12%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent 75%);
  transform:translateX(-50%) scale(var(--gs,1));filter:blur(3px);opacity:.65;pointer-events:none;
  transition:transform .4s var(--ease);
}
.hero-card .meta .nm{font-size:clamp(24px,3.6vw,40px)}
.hero-card .tagline{position:absolute;left:20px;top:18px;z-index:3;color:var(--sheen);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.7)}

/* signature interaction: torch — a light passing over the tonal print, tracked by the cursor.
   Reserved for the product page only, so it stays a discovery rather than wallpaper. */
.torch{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--tx,50%) var(--ty,42%),rgba(255,255,255,.85),rgba(255,255,255,0) 36%);
  transition:opacity .5s var(--ease);}
.torch.on{opacity:1}
.torch.sweep{opacity:1;animation:torchsweep 3.6s ease-in-out infinite}
@keyframes torchsweep{
  0%,100%{--tx:18%;--ty:30%}
  50%{--tx:82%;--ty:60%}
}
@media(prefers-reduced-motion:reduce){.torch.sweep{animation:none;opacity:.35}}
@media(prefers-reduced-motion:reduce){.pcard .frame img,.hero-card .frame .half img{transform:none!important}}

/* custom cursor — desktop / fine-pointer only */
@media(hover:hover) and (pointer:fine){
  body.shop-page{cursor:none}
  .vcursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--sheen);
    pointer-events:none;z-index:500;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .25s;mix-blend-mode:difference}
  .vcursor.big{width:64px;height:64px}
  .vcursor.hide{opacity:0}
}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:960px){.pdp{grid-template-columns:1.15fr 1fr}}
.gallery{position:relative;background:var(--ink)}
.gallery .main{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(68% 58% at 50% 40%, var(--stage-core) 0%, var(--stage-mid) 46%, var(--stage-edge) 78%);
}
.gallery .main .ground{
  position:absolute;left:50%;bottom:8%;width:56%;height:11%;z-index:1;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 75%);
  transform:translateX(-50%) scale(var(--gs,1));filter:blur(3px);opacity:.7;pointer-events:none;
  transition:transform .4s var(--ease);
}
.gallery .main img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8% 12%;opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.gallery .main img.on{opacity:1}
.gallery .main .torch{z-index:2}
.gallery .thumbs{display:flex;gap:2px;background:var(--line)}
.gallery .thumbs button{
  flex:1;aspect-ratio:1;border:0;padding:8px;cursor:pointer;opacity:.5;transition:opacity .3s;
  background:radial-gradient(72% 66% at 50% 42%, var(--stage-mid), var(--stage-edge) 82%);
}
.gallery .thumbs button img{width:100%;height:100%;object-fit:contain;display:block}
.gallery .thumbs button.on,.gallery .thumbs button:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.gallery .main img{transform:none!important}}

.pinfo{padding:clamp(34px,4.4vw,72px) clamp(20px,4vw,60px)}
.pinfo .code{color:var(--sand)}
.pinfo h1{font-weight:900;font-stretch:118%;font-size:clamp(34px,5vw,58px);margin:14px 0 0;letter-spacing:-.015em;line-height:.98}
.pinfo .price{margin:16px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pinfo .lede{margin:20px 0 0;color:var(--dim);font-size:14.5px;line-height:1.7;max-width:48ch}

.opt{margin-top:30px}
.opt .lbl{display:block;color:var(--dimmer);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.swatches{display:flex;gap:22px;flex-wrap:wrap}
.swatches button{display:flex;align-items:center;gap:9px;border:0;border-bottom:1px solid transparent;padding:0 0 4px;background:none;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);transition:border-color .3s,color .3s}
.swatches button .dot{width:14px;height:14px;border-radius:50%;display:block}
.swatches button.on,.swatches button:hover{border-color:var(--sheen);color:var(--sheen)}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sizes button{min-width:52px;padding:10px 6px;border:1px solid var(--line);background:none;cursor:pointer;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.05em;transition:border-color .3s,color .3s,background .3s}
.sizes button.on{border-color:var(--sheen);color:var(--void);background:var(--sheen)}
.sizes button:hover:not(.on){border-color:var(--sheen);color:var(--sheen)}
.sizes button.oos{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.swatches button.oos{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.swatches button.oos .dot{position:relative}
.swatches button.oos .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(to bottom right,transparent 44%,var(--sheen) 46%,var(--sheen) 54%,transparent 56%);
}

.addbag{
  margin-top:34px;display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:800;font-stretch:114%;font-size:clamp(19px,2.6vw,24px);color:var(--sheen);
  padding:0 0 6px;border-bottom:2px solid var(--sheen);transition:opacity .3s,gap .3s;
}
.addbag:hover{gap:16px}
.addbag:disabled{opacity:.35;cursor:not-allowed}
.addbag .arrow{transition:transform .3s var(--ease)}
.addbag:hover .arrow{transform:translate(3px,-3px)}
.addhint{margin-top:10px;color:var(--dimmer);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;min-height:1.4em}

.spec{margin:38px 0 0;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.spec .k{color:var(--dimmer);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:10px;white-space:nowrap}
.spec .v{color:var(--dim);text-align:right}

.backlink{display:inline-flex;align-items:center;gap:8px;padding:20px clamp(18px,4vw,36px) 0;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.backlink:hover{color:var(--sheen)}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:190}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--void);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .5s var(--ease);
  z-index:191;display:flex;flex-direction:column;
}
.drawer.on{transform:none}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(18px,4vw,26px);border-bottom:1px solid var(--line)}
.drawer .dhead h3{margin:0;font-weight:800;font-stretch:114%;font-size:16px}
.drawer .close{background:none;border:0;color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.drawer .close:hover{color:var(--sheen)}
.drawer .items{flex:1;overflow-y:auto;padding:6px clamp(18px,4vw,26px)}
.drawer .empty{color:var(--dimmer);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:40px 0;text-align:center}
.citem{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.citem img{width:64px;height:82px;object-fit:contain;padding:4px;
  background:radial-gradient(72% 66% at 50% 42%, var(--stage-mid), var(--stage-edge) 84%);}
.citem .nm{font-weight:700;font-size:13.5px}
.citem .meta{color:var(--dimmer);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.citem .qty{display:flex;align-items:center;gap:10px;margin-top:10px}
.citem .qty button{width:20px;height:20px;border:1px solid var(--line);background:none;color:var(--sheen);cursor:pointer;line-height:1;font-family:var(--mono);font-size:11px}
.citem .rm{color:var(--dimmer);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;align-self:start;background:none;border:0;cursor:pointer;transition:color .3s}
.citem .rm:hover{color:var(--sheen)}
.citem-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lineprice{color:var(--sheen);font-size:11px;letter-spacing:.06em;white-space:nowrap}
.drawer .dfoot{border-top:1px solid var(--line);padding:20px clamp(18px,4vw,26px) 26px}
.csub{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;font-weight:800;font-stretch:114%;font-size:16px}
.csub .mono{color:var(--dimmer)}
.drawer .dnote{color:var(--dimmer);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;margin:0 0 16px}
.checkout{display:block;width:100%;text-align:center;background:var(--sheen);color:var(--void);border:0;padding:16px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:opacity .3s}
.checkout:hover{opacity:.85}
.checkout:disabled{opacity:.3;cursor:not-allowed}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--sheen);color:var(--void);
  padding:13px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  z-index:195;transition:transform .5s var(--ease);white-space:nowrap;
}
.toast.on{transform:translate(-50%,0)}

/* ============================================================
   HOMEPAGE — culture → brand → product → purchase
   ============================================================ */

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;margin-top:calc(var(--navh,84px) * -1);
  display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--void);
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* cinematic grade: vignette + top scrim so the header stays readable */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(11,11,12,.72) 0%,rgba(11,11,12,0) 26%,rgba(11,11,12,0) 42%,rgba(11,11,12,.88) 100%),
    radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,0) 38%,rgba(0,0,0,.6) 100%);
}
/* 35mm grain, drawn not downloaded */
.hero-grain{
  position:absolute;inset:-150%;z-index:1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grainshift 700ms steps(3) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}
}

.hero-inner{
  position:relative;z-index:3;width:100%;max-width:1360px;margin:0 auto;
  padding:0 clamp(18px,4vw,40px) clamp(38px,7vw,80px);
}
.hero-eyebrow{color:var(--sand);display:block;margin-bottom:16px}
.hero h1{
  margin:0;font-weight:900;font-stretch:118%;letter-spacing:-.028em;line-height:.86;
  font-size:clamp(34px,9.6vw,150px);text-transform:uppercase;
  text-shadow:0 18px 60px rgba(0,0,0,.6);
}
/* narrower faces on small screens so the longest word never clips */
@media(max-width:430px){.hero h1{font-stretch:108%;letter-spacing:-.032em}}
/* clip vertically for the reveal, but never crop a glyph horizontally */
.hero h1 .ln{display:block;overflow:hidden;padding-right:.06em;margin-right:-.06em}
.hero h1 .ln span{
  display:block;transform:translateY(105%);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.hero.in h1 .ln:nth-child(1) span{transition-delay:.05s}
.hero.in h1 .ln:nth-child(2) span{transition-delay:.15s}
.hero.in h1 .ln span{transform:none}
.hero-sub{
  margin:22px 0 0;max-width:40ch;color:rgba(237,235,231,.78);font-size:clamp(14px,1.6vw,16.5px);
  line-height:1.6;opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease) .45s,transform .9s var(--ease) .45s;
}
.hero.in .hero-sub{opacity:1;transform:none}
.hero-actions{
  margin:30px 0 0;display:flex;align-items:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease) .6s,transform .9s var(--ease) .6s;
}
.hero.in .hero-actions{opacity:1;transform:none}
.linkcta{
  display:inline-flex;align-items:center;gap:10px;color:var(--sheen);
  font-family:var(--display);font-weight:800;font-stretch:114%;font-size:clamp(15px,2vw,18px);
  padding:0 0 6px;border-bottom:2px solid var(--sheen);transition:gap .3s var(--ease),opacity .3s;
}
.linkcta:hover{gap:16px}
.linkcta.ghost{border-bottom-color:var(--dimmer);color:var(--dim)}
.linkcta.ghost:hover{color:var(--sheen);border-bottom-color:var(--sheen)}

/* Sits in the right gutter so it never collides with the hero CTAs.
   Hidden on short/narrow viewports where there is no room for it. */
.hero-scroll{
  position:absolute;right:clamp(18px,4vw,40px);bottom:clamp(38px,7vw,80px);z-index:3;
  color:var(--dimmer);font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
@media(max-width:900px),(max-height:680px){.hero-scroll{display:none}}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--dimmer),transparent);animation:scrollpulse 2.4s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* clearly-labelled temporary imagery marker — delete with the placeholder */
.hero-placeholder-badge{
  position:absolute;top:calc(var(--navh,84px) + 12px);left:clamp(18px,4vw,40px);z-index:4;
  border:1px solid var(--dimmer);color:var(--sand);background:rgba(11,11,12,.6);
  padding:6px 12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}

/* ---------- section furniture ---------- */
.sec{padding:clamp(64px,11vw,150px) 0}
.sec-head{max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.sec-eyebrow{color:var(--sand);display:block;margin-bottom:14px}
.sec h2{
  margin:0;font-weight:900;font-stretch:118%;letter-spacing:-.02em;line-height:.92;
  font-size:clamp(34px,7vw,86px);text-transform:uppercase;
}
.sec .lede{margin:20px 0 0;max-width:46ch;color:var(--dim);font-size:clamp(14px,1.6vw,16px);line-height:1.7}

/* ---------- culture statement ---------- */
.culture{border-top:1px solid var(--line)}
.culture .pillars{
  max-width:1360px;margin:clamp(40px,6vw,70px) auto 0;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);
}
@media(min-width:760px){.culture .pillars{grid-template-columns:repeat(3,1fr)}}
.pillar .no{color:var(--sand);font-family:var(--mono);font-size:10px;letter-spacing:.16em;display:block;margin-bottom:12px}
.pillar h3{margin:0 0 10px;font-weight:800;font-stretch:114%;font-size:clamp(17px,2.2vw,21px)}
.pillar p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}

/* ---------- live product rail (Shopify-powered) ---------- */
.drop{border-top:1px solid var(--line)}
.dropgrid{
  max-width:1360px;margin:clamp(36px,5vw,60px) auto 0;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:1fr;gap:2px;
}
@media(min-width:700px){.dropgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.dropgrid{grid-template-columns:repeat(3,1fr)}}
.dcard{position:relative;display:block;background:var(--void);overflow:hidden}
.dcard .frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(68% 58% at 50% 40%, var(--stage-core) 0%, var(--stage-mid) 46%, var(--stage-edge) 78%);
}
.dcard .frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9% 12%;
  transition:opacity .7s var(--ease),transform .9s var(--ease);
}
.dcard .frame img.b{opacity:0}
.dcard:hover .frame img.b,.dcard:focus-visible .frame img.b{opacity:1}
.dcard:hover .frame img.a,.dcard:focus-visible .frame img.a{opacity:0}
.dcard:hover .frame img{transform:scale(1.03)}
.dcard .ground{
  position:absolute;left:50%;bottom:9%;width:56%;height:10%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 75%);
  transform:translateX(-50%);filter:blur(2px);opacity:.7;pointer-events:none;
}
.dcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 2px 30px}
.dcard .code{color:var(--sand);font-family:var(--mono);font-size:10px;letter-spacing:.14em;display:block;margin-bottom:7px}
.dcard .nm{font-weight:800;font-stretch:114%;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.005em}
.dcard .pr{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.dcard .pr.soon{color:var(--dimmer);text-transform:uppercase;font-size:9px;letter-spacing:.16em}
.dcard .flag{
  position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--void);background:var(--sand);padding:5px 9px;
}
.dcard .flag.out{background:transparent;color:var(--dim);border:1px solid var(--line)}
.railnote{max-width:1360px;margin:26px auto 0;padding:0 clamp(18px,4vw,40px);color:var(--dimmer);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}


/* ---------- bag: reservation countdown ---------- */
.hold{
  margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sand);font-variant-numeric:tabular-nums;
}
.hold.urgent{color:#E4A0A0}
.dnote-caveat{color:var(--dimmer)}

@media(prefers-reduced-motion:reduce){
  .hero-grain{animation:none}
  .hero-scroll i{animation:none}
  .hero h1 .ln span{transform:none}
  .hero-sub,.hero-actions{opacity:1;transform:none}
}

.dsocial{display:flex;gap:18px;margin-top:20px;flex-wrap:wrap}
.dsocial a{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.dsocial a:hover{color:var(--sheen)}

/* ============================================================
   INTERIOR PAGES — Culture / Contact / Policies
   ============================================================ */
.pagehead{padding:clamp(50px,10vw,110px) 0 clamp(30px,5vw,50px);border-bottom:1px solid var(--line)}
.pagehead-inner{max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.pagehead h1{
  margin:14px 0 0;font-weight:900;font-stretch:118%;letter-spacing:-.025em;line-height:.9;
  font-size:clamp(38px,9vw,104px);text-transform:uppercase;
}
.pagehead h1 .ln{display:block}
.pagehead .lede{margin:22px 0 0;max-width:52ch;color:var(--dim);font-size:clamp(14px,1.7vw,16.5px);line-height:1.7}

.editorial-body{padding-top:clamp(40px,7vw,86px)}
.prose{max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.prose-block{max-width:62ch;margin:0 0 clamp(38px,6vw,64px)}
.prose-block h2{
  margin:0 0 14px;font-weight:800;font-stretch:114%;letter-spacing:-.01em;
  font-size:clamp(21px,3.2vw,32px);
}
.prose-block p{margin:0;color:var(--dim);font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.78}
.closing-mark{
  max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(30px,6vw,64px);color:var(--sand);
}

.cta-band{border-top:1px solid var(--line)}
.cta-band .sec-head h2{font-size:clamp(30px,6vw,64px)}
.cta-band .lede{margin-bottom:26px}

/* contact */
.contactgrid{
  max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,44px);
}
@media(min-width:720px){.contactgrid{grid-template-columns:repeat(2,1fr)}}
.cblock .lbl{display:block;color:var(--dimmer);margin-bottom:12px}
.biglink{
  display:inline-block;font-weight:800;font-stretch:114%;font-size:clamp(18px,2.6vw,26px);
  color:var(--sheen);border-bottom:2px solid var(--line);padding-bottom:4px;margin:0 18px 10px 0;
  transition:border-color .3s,color .3s;
}
.biglink:hover{border-bottom-color:var(--sheen);color:var(--sand)}
.ctext{margin:0;color:var(--dim);font-size:16px}

/* policies */
.policygrid{
  max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:1fr;gap:2px;
}
@media(min-width:720px){.policygrid{grid-template-columns:repeat(2,1fr)}}
.polcard{
  display:flex;flex-direction:column;gap:8px;padding:clamp(24px,3.4vw,34px);
  border:1px solid var(--line);transition:border-color .3s,background .3s;
}
.polcard:hover{border-color:var(--sheen);background:rgba(237,235,231,.03)}
.polcard .nm{font-weight:800;font-stretch:114%;font-size:clamp(17px,2.2vw,21px)}
.polcard .ds{color:var(--dim);font-size:14px;line-height:1.6}
.polcard .go{color:var(--dimmer);margin-top:6px;transition:color .3s}
.polcard:hover .go{color:var(--sheen)}
.polpending{
  grid-column:1/-1;padding:clamp(22px,3vw,30px);border:1px dashed var(--line);margin-top:14px;
}
.polpending .lbl{display:block;color:var(--sand);margin-bottom:10px}
.polpending p{margin:0;color:var(--dim);font-size:14px;line-height:1.7}
.ulink{color:var(--sheen);border-bottom:1px solid var(--line)}
.ulink:hover{border-bottom-color:var(--sheen)}

/* status chip used on product cards for non-purchasable pieces */
.dcard .flag.preview{background:transparent;color:var(--sand);border:1px solid var(--sand)}

/* ============================================================
   STUDIO SECTIONS — "CULTURE = DARK, PRODUCT = CLARITY"
   ------------------------------------------------------------
   Applied ONLY to clean product-display sections. The site stays
   dark everywhere else. This works by re-pointing the existing
   design tokens inside the section, so every child component
   (cards, prices, rules, meta) inverts correctly without any
   component being rewritten.
   ============================================================ */
.studio{
  background:var(--bone);
  color:var(--void);
  /* token re-map — do not add per-component overrides below */
  --sheen:#0B0B0C;
  --dim:rgba(11,11,12,.62);
  --dimmer:rgba(11,11,12,.44);
  --dimmest:rgba(11,11,12,.16);
  --line:rgba(11,11,12,.14);
  --sand:#6E6252;
  --ink:var(--bone-deep);
  /* garment stage: warm, subtly lit, never a flat white box */
  --stage-core:#FAF8F3;
  --stage-mid:#F1EEE7;
  --stage-edge:#E2DDD2;
}
/* soft seams where dark meets light, so the change reads as intentional */
.studio::before,
.studio::after{content:"";display:block;height:1px;background:rgba(11,11,12,.10)}
.studio + .sec:not(.studio),
.sec:not(.studio) + .studio{border-top:0}

/* keep the garment shadow believable on a light ground */
.studio .ground{
  background:radial-gradient(closest-side,rgba(11,11,12,.30),transparent 76%)!important;
  opacity:.55;
}
/* the sold-out / preview chips need light-ground treatment */
.studio .flag{background:var(--void);color:var(--bone)}
.studio .flag.out,
.studio .flag.preview{background:transparent;color:var(--void);border:1px solid rgba(11,11,12,.34)}

/* PDP gallery sits in the studio too */
.studio .gallery{background:var(--bone-deep)}
.studio .thumbs{background:rgba(11,11,12,.12)}
.studio .thumbs button{background:radial-gradient(72% 66% at 50% 42%, var(--stage-mid), var(--stage-edge) 82%)}
.studio .sizes button.on{background:var(--void);color:var(--bone);border-color:var(--void)}
.studio .addbag{border-bottom-color:var(--void)}
.studio .checkout{background:var(--void);color:var(--bone)}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.sitefoot{border-top:1px solid var(--line);background:var(--void);color:var(--sheen)}

/* never miss a drop */
.dropsignup{border-bottom:1px solid var(--line);padding:clamp(48px,8vw,96px) clamp(18px,4vw,40px)}
.dsinner{max-width:1360px;margin:0 auto}
.dropsignup h2{
  margin:0;font-weight:900;font-stretch:118%;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(30px,6.4vw,68px);text-transform:uppercase;
}
.dropsignup p{margin:14px 0 0;color:var(--dim);font-size:clamp(14px,1.6vw,16px);max-width:44ch}
.nlform{margin:26px 0 0;max-width:520px}
.nlrow{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);transition:border-color .3s}
.nlrow:focus-within{border-bottom-color:var(--sheen)}
.nlrow input{
  flex:1;min-width:0;background:none;border:0;color:var(--sheen);outline:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;padding:14px 2px;
}
.nlrow input::placeholder{color:var(--dimmer);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.nlrow button{
  background:none;border:0;cursor:pointer;color:var(--sheen);padding:14px 2px;min-height:44px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:opacity .3s;
}
.nlrow button:hover{opacity:.65}
.nlrow button:disabled{opacity:.35;cursor:not-allowed}
.nlhint{margin:12px 0 0;min-height:1.3em;color:var(--dimmer);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.nlhint.ok{color:var(--sand)}
.nlhint.err{color:#E4A0A0}
.hp{position:absolute;left:-9999px}

/* link columns */
.fcols{
  max-width:1360px;margin:0 auto;padding:clamp(40px,6vw,70px) clamp(18px,4vw,40px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,40px);
}
@media(min-width:640px){.fcols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.fcols{grid-template-columns:repeat(5,1fr)}}
.fcol h3{margin:0 0 16px;color:var(--dimmer);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 2px}
.fcol a,.fcol .pendinglink{
  display:block;padding:9px 0;font-size:13.5px;color:var(--dim);transition:color .3s;min-height:38px;
}
.fcol a:hover{color:var(--sheen)}
.pendinglink{color:var(--dimmest);cursor:default}
.pendinglink i{
  font-style:normal;margin-left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--dimmest);padding:2px 5px;vertical-align:middle;
}

/* base row */
.fbase{
  max-width:1360px;margin:0 auto;padding:0 clamp(18px,4vw,40px) clamp(34px,5vw,52px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.fmark{display:flex;align-items:center;gap:12px}
.fmark img{height:30px;filter:invert(1)}
.fmark span{font-weight:900;font-stretch:118%;font-size:14px;letter-spacing:-.005em}
.fbase .legal{margin:0;color:var(--dimmest);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.7}
.fbase .legal a{color:var(--dimmer)}
.fbase .legal a:hover{color:var(--sheen)}

/* ============================================================
   ENTRY ANIMATION — two bolts converge into the mark (~1.4s)
   ============================================================ */
body.vc-entering{overflow:hidden}
.entry{
  position:fixed;inset:0;z-index:300;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .45s var(--ease),visibility .45s;
}
.entry.done{opacity:0;visibility:hidden;pointer-events:none}
.entry-stage{position:relative;width:clamp(84px,15vw,132px);aspect-ratio:378/327}
.ebolt{position:absolute;top:0;height:100%;width:52%;
  transition:transform .62s cubic-bezier(.2,.9,.25,1),opacity .5s ease,filter .62s ease}
.ebolt img{width:100%;height:100%;object-fit:contain;filter:invert(1)}
.ebolt.l{left:0;transform:translateX(-52vw) rotate(-24deg);opacity:0;filter:blur(7px)}
.ebolt.r{right:0;transform:translateX(52vw) rotate(24deg);opacity:0;filter:blur(7px)}
.entry.merge .ebolt.l,.entry.merge .ebolt.r{transform:none;opacity:1;filter:none}
.eflash{
  position:absolute;inset:-70% -170%;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 43%,rgba(255,255,255,.9) 50%,transparent 57%);
}
.eflash.go{animation:eswipe 460ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes eswipe{0%{opacity:0;transform:translateX(-52%)}22%{opacity:1}100%{opacity:0;transform:translateX(52%)}}
.eword{
  font-weight:900;font-stretch:118%;letter-spacing:.02em;color:var(--sheen);
  font-size:clamp(15px,2.6vw,22px);opacity:0;transform:translateY(8px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.eword.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .entry{display:none}
  .ebolt,.eword{transition:none}
}

/* size guide table */
.tbl-wrap{max-width:1360px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sgtable{width:100%;border-collapse:collapse;min-width:640px}
.sgtable th,.sgtable td{
  text-align:left;vertical-align:top;padding:18px 20px 18px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.65;
}
.sgtable thead th{
  color:var(--dimmer);font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;padding-bottom:12px;
}
.sgtable tbody th{font-weight:800;font-stretch:114%;font-size:15px;color:var(--sheen);white-space:nowrap;padding-right:28px}
.sgtable td{color:var(--dim)}


/* Cards keep an explicit dark ground for the dark site; inside a studio
   section they must sit on the bone ground or the product name renders
   black-on-black. */
.studio .dcard,
.studio .pcard{background:transparent}
.studio .dropgrid,
.studio .shopgrid{background:rgba(11,11,12,.12)}
.studio .hero-card .frame,
.studio .pcard .frame,
.studio .dcard .frame{
  background:radial-gradient(68% 58% at 50% 40%, var(--stage-core) 0%, var(--stage-mid) 46%, var(--stage-edge) 78%);
}

/* Shop pages open directly into the product studio, so the page ground itself
   is bone — otherwise a dark strip shows behind the transparent header. */
body.studio-page{background:var(--bone)}
body.studio-page .backlink{color:rgba(11,11,12,.55)}
body.studio-page .backlink:hover{color:var(--void)}

/* ---------- footer: dense columns (accordion on mobile) ---------- */
.fcols{
  max-width:1360px;margin:0 auto;padding:clamp(26px,4vw,52px) clamp(18px,4vw,40px) 0;
  display:grid;grid-template-columns:1fr;gap:0;
}
@media(min-width:640px){
  .fcols{grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);padding-bottom:clamp(20px,3vw,32px)}
}
.fcol{border-bottom:1px solid var(--line)}
@media(min-width:640px){.fcol{border-bottom:0}}
.fcol summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;min-height:48px;
  color:var(--dimmer);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.fcol summary::-webkit-details-marker{display:none}
.fcol summary::after{
  content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.fcol[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
@media(min-width:640px){
  .fcol summary{padding:0 0 14px;min-height:0;cursor:default}
  .fcol summary::after{display:none}
}
.fcol ul{list-style:none;margin:0;padding:0 0 14px}
@media(min-width:640px){.fcol ul{padding-bottom:0}}
.fcol li{margin:0}
.fcol a,.fcol .pendinglink{
  display:block;padding:9px 0;font-size:13.5px;color:var(--dim);transition:color .3s;min-height:38px;
}
.fcol a:hover{color:var(--sheen)}
.pendinglink{color:var(--dimmest);cursor:default}
.pendinglink i{
  font-style:normal;margin-left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--dimmest);padding:2px 5px;vertical-align:middle;
}

/* ---------- footer: horizontal social row ---------- */
.fsocial{
  max-width:1360px;margin:0 auto;padding:clamp(18px,3vw,26px) clamp(18px,4vw,40px);
  display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,40px);
  border-top:1px solid var(--line);
}
.fsocial a{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s;
}
.fsocial a:hover{color:var(--sheen)}
.fsocial svg{width:17px;height:17px;flex:0 0 17px}

/* ---------- footer: closing brand moment ---------- */
.signoff{
  border-top:1px solid var(--line);
  padding:clamp(44px,7vw,80px) clamp(18px,4vw,40px) clamp(30px,4vw,44px);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.signoff .sym{
  height:clamp(46px,7vw,62px);width:auto;filter:invert(1);
  opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.signoff.play .sym,.signoff.shown .sym{opacity:1;transform:none}

.phrasewrap{position:relative;display:inline-block;padding:2px 0}
.phrasewrap .phrase{
  display:block;font-weight:900;font-stretch:118%;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(22px,4.6vw,44px);color:var(--sheen);
  /* revealed by the strike wiping across */
  clip-path:inset(0 100% 0 0);
}
.signoff.play .phrase{animation:phraseReveal .46s cubic-bezier(.22,1,.36,1) .26s forwards}
.signoff.shown .phrase{clip-path:inset(0 0 0 0)}
@keyframes phraseReveal{to{clip-path:inset(0 0 0 0)}}

/* the strike: a sharp line leaving the symbol and passing through the phrase */
.phrasewrap .strike{
  position:absolute;left:0;right:0;top:50%;height:2px;background:var(--sheen);
  transform:scaleX(0);transform-origin:50% 50%;opacity:0;
}
.signoff.play .strike{animation:strikeThrough .5s cubic-bezier(.3,0,.2,1) .06s forwards}
@keyframes strikeThrough{
  0%{transform:scaleX(0);opacity:0}
  22%{opacity:1}
  55%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1) translateX(101%);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .signoff .sym{opacity:1;transform:none}
  .signoff .phrase{clip-path:inset(0 0 0 0);animation:none}
  .signoff .strike{display:none}
}

/* ---------- footer base ---------- */
.fbase{
  max-width:1360px;margin:0 auto;
  padding:0 clamp(18px,4vw,40px) clamp(28px,4vw,44px);text-align:center;
}
.fbase .legal{margin:0;color:var(--dimmest);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.7}
.fbase .legal a{color:var(--dimmer)}
.fbase .legal a:hover{color:var(--sheen)}

/* signup states */
.nlhint.busy{color:var(--dimmer)}
.nlsuccess{margin:0;display:flex;flex-direction:column;gap:6px}
.nlsuccess strong{font-weight:900;font-stretch:118%;font-size:clamp(17px,2.4vw,22px);text-transform:uppercase;letter-spacing:-.01em}
.nlsuccess span{color:var(--sand);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}