/* WCWPT? — rack edition */
:root{
  --ink:#050505; --paper:#f4f4ef;
  --rose:#e0a48f; --rose-deep:#b9776a; --rose-hi:#f6cfbf; --pink:#e78bb0;
  --rose-grad:linear-gradient(100deg,#b9776a 0%,#e0a48f 22%,#f6cfbf 40%,#e0a48f 58%,#e78bb0 78%,#b9776a 100%);
  --f-display:"Unbounded",system-ui,sans-serif;
  --f-sans:"Space Grotesk",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.7,0,.2,1);
  --edge:clamp(16px,2.4vw,34px); --tick:38px;
}
html[data-theme=dark]{--bg:var(--ink);--fg:#f2f2ee;--mute:rgba(242,242,238,.52);--line:rgba(242,242,238,.14);--bar-hi:#fff;--bar-lo:#5b5e63;--inv-bg:var(--paper);--inv-fg:var(--ink);color-scheme:dark}
html[data-theme=light]{--bg:var(--paper);--fg:#0b0b0b;--mute:rgba(11,11,11,.5);--line:rgba(11,11,11,.14);--bar-hi:#fff;--bar-lo:#8d9097;--inv-bg:var(--ink);--inv-fg:#f2f2ee;color-scheme:light}
/* details view inverts relative to the current theme */
html[data-view=details]{--bg:var(--inv-bg);--fg:var(--inv-fg)}
html[data-theme=dark][data-view=details]{--mute:rgba(11,11,11,.52);--line:rgba(11,11,11,.14)}
html[data-theme=light][data-view=details]{--mute:rgba(242,242,238,.55);--line:rgba(242,242,238,.16)}
/* accent: full = rose gold through details UI; minimal = monochrome details (ticker + clasp bead only) */
html{--acc:var(--fg);--acc-ink:var(--bg)}
/* per-piece accent: JS sets data-accent per piece (bracelet + clasp bead = full); ?accent= overrides globally */
html[data-accent=full][data-theme=dark][data-view=qv],html[data-accent=full][data-theme=light][data-view=details]{--acc:var(--rose);--acc-ink:var(--ink)}
html[data-accent=full][data-theme=light][data-view=qv],html[data-accent=full][data-theme=dark][data-view=details]{--acc:var(--rose-deep);--acc-ink:#fff}
html[data-accent=full][data-view=qv],html[data-accent=full][data-view=qv] .qv-kicker{color:var(--acc)}
html[data-accent=full][data-view=qv] .seg{border-color:var(--acc-line)}
html[data-accent=full] .seg-btn.is-on{background:var(--acc);color:var(--acc-ink)}
html[data-accent=full][data-view=qv] .arrow{border-color:var(--acc-line);color:var(--acc)}
.qv-kicker,.seg,.seg-btn,.arrow,.dt-back,.dt-index,.dt-specs dt,.dt-specs dd,.dt-status .dot,.acc details,.acc summary::after,.dt-foot a,.nav-link,.qv-close{transition:color .6s var(--ease),background-color .6s var(--ease),border-color .6s var(--ease),opacity .4s}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);transition:background-color .7s var(--ease),color .7s var(--ease)}
body{font-family:var(--f-sans);overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:focus-visible{outline:1px solid var(--rose);outline-offset:4px}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:100;background:#050505;color:#f2f2ee;display:grid;place-items:center;transition:opacity 1s var(--ease),visibility 1s}
#gate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.35) contrast(1.05)}
.gate-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,5,5,.2),rgba(5,5,5,.88) 75%)}
.gate-ui{position:relative;text-align:center;display:grid;justify-items:center;gap:18px;padding:24px}
.gate-ui .kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;opacity:.8}
.gate-ui h1{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,15vw,220px);line-height:.85;letter-spacing:-.04em}
.gate-ui h1 .o{background:var(--rose-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate-ui .tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
#enter-btn{margin-top:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.42em;padding:16px 40px 16px 46px;border:1px solid rgba(242,242,238,.5);border-radius:999px;transition:background .4s,color .4s,border-color .4s}
#enter-btn:hover{background:#f2f2ee;color:#050505;border-color:#f2f2ee}
.gate-ui .hint{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.45}
html.entered #gate{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- corners ---------- */
.nav{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:var(--edge);pointer-events:none}
.nav>*{pointer-events:auto}
.nav-l,.nav-r{display:flex;gap:clamp(14px,2vw,28px);align-items:center}
.nav-link,.wordmark,.tt-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.nav-link{position:relative;color:var(--acc);transition:color .6s,opacity .3s;opacity:.92}
html:not([data-view=details]):not([data-view=qv]) .nav-link{color:var(--fg)}
html[data-view=qv] .qv-close{color:var(--acc)}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .45s var(--ease)}
.nav-link:hover::after{right:0}
.wordmark{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-weight:800;letter-spacing:.06em;font-size:13px}
.theme-toggle{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:99px;transition:border-color .6s}
.tt-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--fg) 50%,transparent 50%);border:1px solid var(--fg);transition:transform .6s var(--ease)}
html[data-theme=light] .tt-dot{transform:rotate(180deg)}
.stamp{position:fixed;z-index:55;left:var(--edge);bottom:calc(var(--tick) + var(--edge));width:clamp(58px,6vw,84px);aspect-ratio:1;pointer-events:none}
.stamp img{width:100%;height:100%;animation:spin 16s linear infinite;filter:invert(var(--stamp-inv,0));transition:filter .7s}
html[data-theme=light]:not([data-view=details]) .stamp,html[data-theme=dark][data-view=details] .stamp{--stamp-inv:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ticker ---------- */
.ticker{position:fixed;z-index:58;left:0;right:0;bottom:0;height:var(--tick);overflow:hidden;background:var(--rose-grad);background-size:200% 100%;animation:sheen 9s linear infinite;color:#1a0f0c;display:flex;align-items:center}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;white-space:nowrap;padding-right:0}
.ticker b{font-weight:400;margin:0 26px;opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes sheen{to{background-position:-200% 0}}

/* ---------- home / rack ---------- */
.home{position:fixed;inset:0;bottom:var(--tick);transition:opacity .6s var(--ease)}
.home-meta{position:absolute;left:var(--edge);right:var(--edge);top:calc(var(--edge) + 34px);display:flex;justify-content:space-between;color:var(--mute)}
.home-title{position:absolute;left:0;right:0;bottom:clamp(70px,13vh,130px);display:flex;flex-direction:column;align-items:center;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,8.6vw,150px);line-height:.88;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none;white-space:nowrap}
.rack{position:absolute;left:0;right:0;top:22vh;height:62vh;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rack.dragging{cursor:grabbing}
.bar{position:absolute;left:clamp(10px,5vw,80px);right:clamp(10px,5vw,80px);top:0;height:9px;border-radius:9px;background:linear-gradient(180deg,var(--bar-hi) 0%,#c9ccd1 22%,var(--bar-lo) 55%,#2a2c2f 78%,#9a9da2 100%);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.bar::before{content:"";position:absolute;inset:1px 3% auto 3%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 30%,rgba(255,255,255,.4) 60%,transparent)}
.cap{position:absolute;top:-14px;width:12px;height:36px;border-radius:3px;background:linear-gradient(90deg,#4b4e53,#e8eaee 40%,#7b7e84)}
.cap.l{left:-6px}.cap.r{right:-6px}
.track{position:absolute;left:50%;top:4px;height:100%;will-change:transform}
.hanger{position:absolute;top:0;transform-origin:50% 0;will-change:transform;transition:opacity .5s var(--ease),filter .5s}
.hook{display:block;margin:0 auto;width:14px;overflow:visible}
.hook path{fill:none;stroke:url(#steel);stroke-width:2.2;stroke-linecap:round}
/* product cutouts are true-alpha webp; no CSS filters on them (WebKit clips large drop-shadow/blur filters to a visible box) */
.hanger img{display:block;margin:-2px auto 0;height:var(--h);width:auto;pointer-events:none;-webkit-user-drag:none;transition:opacity .3s}
/* both clasps clip over the bar; drape bracelet loops over it */
.hanger.hang-u img{margin-top:calc(var(--h) * -.022)}
.hanger.hang-drape img{margin-top:calc(var(--h) * -.02)}
/* soft contact shadow, drawn in CSS so it follows the theme */
.hanger::after{content:"";position:absolute;left:12%;right:12%;bottom:-16px;height:22px;border-radius:50%;background:radial-gradient(closest-side,var(--shadow) 0%,transparent 100%);pointer-events:none}
html[data-theme=dark]{--shadow:rgba(0,0,0,.55)}html[data-theme=light]{--shadow:rgba(0,0,0,.13)}
.hanger .hit{position:absolute;inset:0;cursor:pointer}
.hanger:hover img{opacity:.9}
.rack-foot{position:absolute;left:var(--edge);right:var(--edge);bottom:calc(var(--edge) + 4px);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px}
.rack-foot .rack-hint{text-align:right;color:var(--mute)}
#rack-count{color:var(--mute);padding-left:clamp(70px,8vw,110px)}
.rack-name{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.14em}

/* ---------- quick view ---------- */
.qv{position:fixed;inset:0;bottom:var(--tick);z-index:40;visibility:hidden;pointer-events:none}
html[data-view=qv] .qv,html[data-view=details] .qv{visibility:visible;pointer-events:auto}
html[data-view=qv] .home,html[data-view=details] .home{pointer-events:none}
html[data-view=qv] .hanger:not(.is-sel){opacity:.05}
html[data-view=qv] .hanger.is-sel,html[data-view=details] .hanger{opacity:0}
html[data-view=qv] .home-title,html[data-view=qv] .rack-foot,html[data-view=qv] .home-meta,html[data-view=details] .home{opacity:.0}
html[data-view=qv] .bar{opacity:.25}
html[data-view=qv][data-hang=u] .bar,html[data-view=qv][data-hang=drape] .bar{opacity:.07}
.qv-close{position:absolute;z-index:3;right:var(--edge);top:calc(var(--edge) + 34px);font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:0;transition:opacity .4s .2s}
html[data-view=qv] .qv-close,.about.open .qv-close{opacity:.8}
.qv-stage{position:absolute;left:50%;top:41%;width:min(50vh,44vw);height:min(50vh,44vw);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;transition:left .9s var(--ease-io),top .9s var(--ease-io),width .9s var(--ease-io),height .9s var(--ease-io),transform .9s var(--ease-io)}
#qv-img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;transition:opacity .35s}
.qv-stage::after{content:"";position:absolute;left:22%;right:22%;bottom:-4%;height:7%;border-radius:50%;background:radial-gradient(closest-side,var(--shadow) 0%,transparent 100%);pointer-events:none;transition:opacity .35s}
html[data-view=details][data-theme=dark]{--shadow:rgba(0,0,0,.14)}html[data-view=details][data-theme=light]{--shadow:rgba(0,0,0,.5)}
.qv-bar{position:absolute;z-index:0;height:8px;border-radius:8px;background:linear-gradient(180deg,#fff 0%,#c9ccd1 22%,#5b5e63 55%,#2a2c2f 78%,#9a9da2 100%);opacity:0;transition:opacity .5s .5s;pointer-events:none}
.qv-bar .cap{top:-10px;width:9px;height:28px}.qv-bar .cap.l{left:-4px}.qv-bar .cap.r{right:-4px}
html[data-hang=u] .qv-bar,html[data-hang=drape] .qv-bar{opacity:1}
.qv.mode-3d .qv-bar,.qv.mode-3d .qv-stage::after{opacity:0}
.qv-3d{position:absolute;z-index:2;inset:-6%;opacity:0;pointer-events:none;transition:opacity .5s}
.qv-3d model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent;touch-action:none;cursor:grab;outline:none}
.qv-3d model-viewer:active{cursor:grabbing}
.qv-3d-hint{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);pointer-events:none;opacity:0;transition:opacity .5s .4s}
.qv.mode-3d .qv-3d-hint{opacity:.8}
.qv.mode-3d .qv-3d-hint.gone{opacity:0;transition-delay:0s}
.qv.mode-3d .qv-3d{opacity:1;pointer-events:auto}
.qv.mode-3d #qv-img{opacity:0;pointer-events:none}
#qv-img{cursor:pointer}
.qv-ui{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,40px);display:grid;justify-items:center;gap:14px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
html[data-view=qv] .qv-ui{opacity:1;transform:none;transition-delay:.25s}
.qv-kicker{color:var(--mute)}
.qv-title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,52px);letter-spacing:-.03em;line-height:.9;text-align:center}
.seg{display:flex;border:1px solid var(--line);border-radius:99px;padding:3px}
.seg-btn{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:7px 16px;border-radius:99px;transition:background .35s,color .35s}
.seg-btn.is-on{background:var(--fg);color:var(--bg)}
.swatches{display:flex;gap:10px;align-items:center;min-height:22px}
.sw{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:3px 9px 3px 4px;border:1px solid transparent;border-radius:99px;transition:border-color .3s,color .3s}
.sw i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset -2px -3px 4px rgba(0,0,0,.35),inset 2px 2px 3px rgba(255,255,255,.6)}
.sw.is-on{border-color:var(--line);color:var(--fg)}
.qv-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pill{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:13px 22px;border-radius:99px;border:1px solid var(--acc);transition:background .35s,color .35s,border-color .6s,transform .35s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill-solid{background:var(--acc);color:var(--acc-ink)}
.pill-line{color:var(--fg);border-color:var(--line)}
.pill-line:hover{border-color:var(--fg)}
.pill.big{padding:16px 26px}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:1px solid var(--line);border-radius:50%;font-size:18px;opacity:0;transition:opacity .4s,background .3s,color .3s}
html[data-view=qv] .arrow{opacity:1}
.arrow:hover{background:var(--fg);color:var(--bg)}
.arrow.prev{left:var(--edge)}.arrow.next{right:var(--edge)}

/* ---------- details ---------- */
html[data-view=details] .qv-stage{left:25%;top:50%;width:min(70vh,40vw);height:min(70vh,40vw);transform:translate(-50%,-50%)}
html[data-view=details] .qv-ui,html[data-view=details] .arrow,html[data-view=details] .qv-close{opacity:0;pointer-events:none}
.dt{position:absolute;top:0;right:0;bottom:0;width:50%;overflow:auto;padding:calc(var(--edge) + 70px) clamp(24px,5vw,90px) 50px clamp(20px,3vw,50px);border-left:1px solid var(--line);opacity:0;transform:translateX(40px);pointer-events:none;transition:opacity .5s var(--ease),transform .8s var(--ease),border-color .7s;scrollbar-width:thin}
html[data-view=details] .dt{opacity:1;transform:none;pointer-events:auto;transition-delay:.35s}
.dt-inner{max-width:560px}
.dt-back{color:var(--acc);margin-bottom:34px;display:inline-block}
.dt-index{color:var(--acc);margin-bottom:14px}
.dt-title{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.4vw,72px);letter-spacing:-.035em;line-height:.88;margin-bottom:22px}
.dt-lede{font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:46ch;margin-bottom:30px;opacity:.86}
.dt-specs{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--acc-line,var(--line));margin-bottom:24px}
.dt-specs dt,.dt-specs dd{padding:12px 0;border-bottom:1px solid var(--acc-line,var(--line))}
.dt-specs dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);padding-right:30px;opacity:.95}
html[data-accent=minimal] .dt-specs dt{color:var(--mute)}
.dt-specs dd{font-size:15px;font-weight:500;text-align:right}
.dt-status{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.dt-status .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 var(--acc);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dt-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.acc details{border-top:1px solid var(--acc-line,var(--line))}
.acc details:last-child{border-bottom:1px solid var(--acc-line,var(--line))}
.acc summary{list-style:none;display:flex;justify-content:space-between;padding:16px 0;cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--acc);transition:transform .35s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 0 18px;font-size:14px;line-height:1.6;opacity:.8;max-width:52ch}
.dt-foot{margin-top:30px;color:var(--mute)}
.dt-foot a{color:var(--acc)}
html[data-accent=minimal] .dt-foot a{color:var(--fg)}

/* ---------- about ---------- */
.about{position:fixed;inset:0;bottom:var(--tick);z-index:70;background:var(--bg);overflow:auto;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.about.open{opacity:1;visibility:visible}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);padding:calc(var(--edge) + 80px) var(--edge) 60px;min-height:100%;align-items:center}
.about-copy{display:grid;gap:22px;justify-items:start}
.about-copy h2{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(44px,7vw,120px);line-height:.86;letter-spacing:-.045em}
.about-copy .outline{color:transparent;-webkit-text-stroke:1.2px var(--fg)}
.about-copy p:not(.mono){font-size:clamp(16px,1.3vw,20px);line-height:1.55;max-width:48ch;opacity:.85}
.about-copy .mono{color:var(--mute)}
.about .pill-solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.about-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-media figure{display:grid;gap:8px}
.about-media video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;background:#111}
.about-media figcaption{color:var(--mute)}
.about-media figure:nth-child(2){margin-top:60px}

/* ---------- mobile ---------- */
@media (max-width:760px){
  :root{--tick:32px}
  .wordmark{display:none}
  .nav-l .nav-link[data-home]{display:none}
  .nav-r{gap:10px}
  html .nav-r .nav-link[data-waitlist]{padding:6px 10px;margin:-7px 0;border-radius:99px;border:1px solid var(--rose);color:var(--fg)}
  .nav-r .nav-link[data-waitlist]::after{display:none}
  .tt-label{display:none}.theme-toggle{padding:6px}
  .home-meta{flex-direction:column;gap:6px;top:calc(var(--edge) + 30px)}
  .home-title{font-size:13vw;bottom:96px}
  .rack{top:24vh;height:56vh}
  .bar{left:0;right:0;border-radius:0}.cap{display:none}
  .rack-foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px}
  #rack-count{padding-left:0}.rack-foot .rack-hint{text-align:center}
  .stamp{left:auto;right:var(--edge);bottom:calc(var(--tick) + 76px);width:54px}
  .qv-stage{top:calc(var(--edge) + 70px);width:76vw;height:min(76vw,40vh);transform:translate(-50%,0)}
  .arrow{top:calc(var(--edge) + 70px + min(38vw,20vh));width:40px;height:40px;transform:translateY(-50%)}
  .qv-ui{gap:10px}
  html[data-view=details] .qv-stage{left:50%;top:calc(var(--edge) + 60px);width:62vw;height:34vh;transform:translate(-50%,0)}
  .dt{top:calc(34vh + 70px);width:100%;border-left:0;border-top:1px solid var(--line);padding:24px 20px 50px;transform:translateY(40px)}
  .dt-back{margin-bottom:18px}
  .about-grid{grid-template-columns:1fr;padding-top:90px}
  .about-media figure:nth-child(2){margin-top:30px}
}
@media (max-width:420px){.nav-r a[href*=instagram]{font-size:0}.nav-r a[href*=instagram]::before{content:"IG";font-size:11px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:.01s!important}}
@media (max-width:760px){.stamp{transition:opacity .4s}html[data-view=qv] .stamp,html[data-view=details] .stamp{opacity:0}}
/* prices */
.rack-price{margin-left:.7em;color:var(--rose);font-family:var(--f-mono);font-weight:500;letter-spacing:.08em}
.qv-price{text-align:center;color:var(--mute);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:-4px}
.qv-price b{color:var(--fg);font-size:14px;font-weight:500;letter-spacing:.06em}
.dt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:2px 0 6px}
.dt-price b{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1;background:var(--rose-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dt-price span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.qv-price[hidden],.dt-price[hidden]{display:none}

/* ---------- clip fixes (v16) ----------
   Unbounded 800 + negative tracking: the last glyph's ink runs past its (shrunken) advance box,
   so background-clip:text cut the "?" and wide lines overflowed the viewport on phones. */
.gate-ui h1{max-width:100%;padding-inline:.06em}
.gate-ui h1 .o{padding-right:.1em;margin-right:-.1em}
.home-title > span{padding-inline:.06em}
@media (max-width:760px){
  .gate-ui h1{font-size:clamp(40px,14vw,110px)}
  .home-title{font-size:10vw}
}