/* =========================================================
GRIMZ — Drop 01 · style.css
Pink is reserved for buying: CTAs, prices, chosen size, cart.
========================================================= */
/* ---------- tokens ---------- */
:root {
--pink: #E8809C;
--pink-2: #F39AB4;
--ink: #F4F1F2;
--mute: #A9A5AA;
--faint: #8D898E;
--line: rgba(255, 255, 255, .12);
--line-2: rgba(255, 255, 255, .26);
--grey: #B9BDC3;
--warn: #FFB38A;
--nav: 64px;
--stage: clamp(520px, calc(100vh - var(--nav)), 1300px);
/* ---- materials (Night Glass) ---- */
--spring: cubic-bezier(.16, 1, .3, 1); /* = --ease-out: one curve for everything that settles */
/* "fumé": smoked black-and-white glass — white light enters at the top-left, smoke pools at the bottom.
No colour in the glass: colour (pink) is kept for buying only. Three thicknesses, like real sheets:
thin = chips and toggles, medium = panels and cards, thick = the surfaces that float (capsule, buy bar, menu, bag). */
--glass-tint: rgba(10, 10, 12, .26); /* real glass: tint over a live blur */
--glass-tint-2: rgba(12, 12, 14, .55); /* simulated glass / fallback */
--glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 28%, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .22) 78%, rgba(0, 0, 0, .42) 100%);
--glass-edge: linear-gradient(145deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .25) 22%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .12) 78%, rgba(255, 255, 255, .6) 100%);
--glass-blur: blur(24px) saturate(120%) brightness(1.06);
--glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 -16px 30px -18px rgba(0, 0, 0, .7), inset 0 14px 28px -18px rgba(255, 255, 255, .22), 0 24px 50px -20px rgba(0, 0, 0, .9);
--glass-sheen: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .14) 44%, rgba(255, 255, 255, 0) 58%);
/* thin */
--glass-fill-thin: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 45%, rgba(0, 0, 0, .16) 100%), rgba(255, 255, 255, .02);
--chip-ring: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
/* thick: deeper blur, a second inner rim (the far face of the sheet) and a heavier drop */
--glass-blur-thick: blur(30px) saturate(125%) brightness(1.08);
--glass-shadow-thick: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .7), inset 0 -2px 6px -2px rgba(255, 255, 255, .12), inset 0 -22px 36px -22px rgba(0, 0, 0, .8), inset 0 18px 30px -20px rgba(255, 255, 255, .26), 0 30px 60px -24px rgba(0, 0, 0, .95), 0 0 0 .5px rgba(0, 0, 0, .6);
--glass-edge-thick: linear-gradient(145deg, #FFFFFF 0%, rgba(255, 255, 255, .32) 20%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .16) 76%, rgba(255, 255, 255, .7) 100%);
/* motion scale: three durations, two curves — everything on the site moves by these */
--t-1: .18s; --t-2: .32s; --t-3: .6s;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--chrome: linear-gradient(180deg, #FFFFFF 0%, #ECEDEF 34%, #A2A6AD 50%, #F4F5F7 68%, #B4B8BF 100%);
/* film grain (static image, painted once): kills banding in dark gradients */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports (height: 100svh) {
:root { --stage: clamp(520px, calc(100svh - var(--nav)), 1300px); }
}
/* ---------- base ---------- */
html { scroll-behavior: smooth; background: #000; }
body { margin: 0; background: #000; color: var(--ink); font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
html.lock, html.lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.marq { animation: none !important; }
}
[hidden] { display: none !important; }
a { color: inherit; }
.g, .page {
position: relative;
background: #000;
color: var(--ink);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
.g *, .g *::before, .g *::after, .page *, .page *::before, .page *::after { box-sizing: border-box; }
.g img, .g video, .page img { display: block; max-width: 100%; }
picture { display: contents; } /* AVIF with WebP fallback, without changing the layout of the ![]()
*/
.g a, .page a { text-decoration: none; }
:where(.g, .page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.g, .page) :where(h1, h2, h3, p, ol, ul, figure, blockquote) { margin: 0; padding: 0; }
:where(.g, .page) :where(ol, ul) { list-style: none; }
.g section { scroll-margin-top: var(--nav); }
/* focus: a ring of white light that follows each control's own radius (never squares off a pill) */
:focus-visible { outline: 2px solid rgba(255, 255, 255, .95); outline-offset: 3px; }
.btn-pink:focus-visible { outline-color: #F7B2C6; }
.ticker :focus-visible, .lang button:focus-visible { outline-color: #0B0B0C; }
:focus:not(:focus-visible) { outline: none; }
/* bilingual copy: …… */
[data-lang="en"] .it, [data-lang="it"] .en { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* ---------- type ---------- */
.disp { font-family: 'Archivo', 'Arial Narrow', Impact, sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: .88; letter-spacing: -.005em; text-wrap: balance; }
.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.45; }
.eye { color: var(--faint); }
.mute { color: var(--mute); }
.buy-price { color: var(--pink); }
.h-l { font-size: clamp(52px, 7vw, 112px); }
.h-m { font-size: clamp(40px, 4.6vw, 76px); }
.lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--mute); max-width: 42ch; text-wrap: pretty; }
/* typesetting: no orphans in running text, balanced headings, optical tracking on the condensed display face
(the bigger it gets, the tighter it sits), figures that line up wherever numbers are compared */
:where(.g, .page) p, :where(.g, .page) li, :where(.g, .page) dd { text-wrap: pretty; }
:where(.g, .page) :where(h1, h2, h3) { text-wrap: balance; }
.h-l { letter-spacing: -.014em; }
.h-m { letter-spacing: -.008em; }
:where(.g, .page) table, .qty span, [data-subtotal], .dr-r .buy-price, .co-sum, .od-link, .eta, [data-eta] { font-variant-numeric: tabular-nums; }
blockquote, .rv-t { hanging-punctuation: first; }
.g, .page { font-optical-sizing: auto; font-kerning: normal; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* ---------- materials: glass ----------
Real glass (live backdrop blur) is kept to a few small surfaces that float over imagery:
the header capsule, the buy bar and the mobile menu. Everything else uses simulated glass:
same fill, edge and highlight, no live blur (behind it there is black anyway), zero GPU cost. */
.nav-cap, .buybar, .legal-nav .wrap, .co-head .wrap {
background: var(--glass-fill), var(--glass-tint);
-webkit-backdrop-filter: var(--glass-blur-thick); backdrop-filter: var(--glass-blur-thick);
box-shadow: var(--glass-shadow-thick);
}
.btn-line, .qb, .cc, .fit, .upsell, .step, .wd-card, .dintro, .drag-hint, .finder-out, .menu-btn, .cart-btn {
background: var(--glass-fill), var(--glass-tint-2);
box-shadow: var(--glass-shadow);
}
/* 1px light edge: gradient border drawn with a mask — any radius, transparent inside */
.nav-cap::before, .buybar::before, .legal-nav .wrap::before, .co-head .wrap::before,
.btn-line::before, .qb::before, .cc::before, .fit::before, .upsell::before, .step::before, .wd-card::before,
.dintro::before, .drag-hint::before, .finder-out::before, .menu-btn::before, .cart-btn::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: var(--glass-edge);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.nav-cap::before, .buybar::before, .legal-nav .wrap::before, .co-head .wrap::before { background: var(--glass-edge-thick); }
.btn-line, .qb, .cc, .fit, .upsell, .step, .wd-card, .finder-out, .menu-btn, .cart-btn, .legal-nav .wrap, .co-head .wrap { position: relative; }
/* diagonal light streak across the floating glass (static: painted once) */
.nav-cap::after, .buybar::after, .qb::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--glass-sheen);
}
/* fallbacks: no backdrop-filter support, "reduce transparency" setting, low-memory devices */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.nav-cap, .buybar, .legal-nav .wrap, .co-head .wrap, .msheet { background: var(--glass-fill), var(--glass-tint-2); }
}
.lite .drawer { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(12, 12, 15, .97); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .drawer { background-color: rgba(12, 12, 15, .97); } }
.lite .nav-cap, .lite .buybar, .lite .legal-nav .wrap, .lite .co-head .wrap, .lite .msheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill), rgba(14, 14, 18, .92); }
@media (prefers-reduced-transparency: reduce) {
.nav-cap, .buybar, .legal-nav .wrap, .co-head .wrap, .msheet, .drawer { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(18, 18, 22); }
}
/* chrome type: the reflective grey panels of the garment, turned into a material */
.logo, .foot-word, .deg, .piece strong {
background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* ---------- buttons & links ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
position: relative; isolation: isolate;
min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
transition: background var(--t-1), transform var(--t-2) var(--spring), scale var(--t-1) var(--spring), filter var(--t-1), color var(--t-1), box-shadow var(--t-2);
}
.btn.is-mag { transition: background var(--t-1), transform var(--t-1) linear, scale var(--t-1) var(--spring), filter var(--t-1), color var(--t-1), box-shadow var(--t-2); }
.btn:active { scale: .97; }
/* pink liquid — the only saturated, glowing thing on the page: it is where the eye goes.
The specular highlight follows the cursor (--mx is set by the magnetic script). */
.btn-pink {
color: #1A0B11;
background:
radial-gradient(130% 100% at var(--mx, 50%) -35%, rgba(255, 255, 255, .66), rgba(255, 255, 255, 0) 55%),
radial-gradient(80% 60% at 50% 135%, rgba(255, 214, 228, .65), rgba(255, 214, 228, 0) 70%), /* caustic: light bouncing up from below */
linear-gradient(180deg, #F7B2C6 0%, #EC8CA8 46%, #D96E90 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .7),
inset 0 -1px 0 rgba(110, 20, 56, .35),
inset 0 -12px 20px -12px rgba(140, 28, 74, .5),
0 1px 2px rgba(0, 0, 0, .4),
0 12px 30px -10px rgba(232, 128, 156, .6);
}
.btn-pink::after, .btn-line::after { /* lensing on the rims + a light sweep on hover */
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 60%) -160% 0 / 260% 100% no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .16)) 0 0 / 100% 100% no-repeat;
transition: background-position .9s var(--spring);
}
.btn-line::after { z-index: 0; opacity: .55; }
.btn-pink:hover::after, .btn-line:hover::after { background-position: 160% 0, 0 0; }
.btn-pink:hover {
color: #1A0B11; filter: brightness(1.05) saturate(1.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .75),
inset 0 -1px 0 rgba(110, 20, 56, .35),
inset 0 -12px 20px -12px rgba(140, 28, 74, .5),
0 1px 2px rgba(0, 0, 0, .4),
0 18px 44px -12px rgba(232, 128, 156, .8);
}
/* clear glass — secondary actions */
.btn-line { color: var(--ink); }
.btn-line:hover { color: var(--ink); background: var(--glass-fill), rgba(48, 48, 56, .7); }
.btn-block { width: 100%; }
.btn-xl { min-height: 60px; font-size: 16px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color var(--t-1), color var(--t-1); }
.link:hover { border-color: var(--ink); }
.link .ic { width: 16px; height: 16px; transition: transform var(--t-2); }
.link:hover .ic { transform: translateX(4px); }
[data-reveal] { transition: opacity .9s ease, transform 1.1s var(--ease-out); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(32px); }
/* ---------- intro (drop ritual) ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1s; }
.intro.done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.intro-seen .intro { display: none; }
.intro-in { text-align: center; color: #F4F1F2; }
.intro-drop {
font-size: clamp(72px, 15vw, 240px); padding: 0 .04em;
background: linear-gradient(100deg, #6E737B 0%, #9DA1A8 30%, #FFFFFF 46%, #E9EBEE 52%, #9DA1A8 66%, #6E737B 100%) 100% 0 / 260% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
animation: introIn 1.1s cubic-bezier(.2, .7, .1, 1) both, chromeOn 1.5s cubic-bezier(.4, 0, .2, 1) .25s both;
}
@keyframes chromeOn { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.intro-bar { width: min(320px, 60vw); height: 1px; background: rgba(255, 255, 255, .18); margin: 26px auto 12px; overflow: hidden; }
.intro-bar span { display: block; height: 100%; background: #F4F1F2; transform-origin: 0 50%; transform: scaleX(0); }
.intro-count { color: #8D898E; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .2em; }
@keyframes introIn { from { opacity: 0; letter-spacing: .2em; filter: blur(12px); } to { opacity: 1; letter-spacing: -.005em; filter: none; } }
/* ---------- custom cursor (desktop) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 200; width: 0; height: 0; pointer-events: none; }
.cursor::before { content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .65); transition: transform var(--t-2) var(--ease-out), background var(--t-2), border-color var(--t-2); }
.cursor[data-mode="link"]::before { transform: scale(1.45); background: rgba(255, 255, 255, .1); border-color: transparent; }
.cursor[data-mode="drag"]::before, .cursor[data-mode="zoom"]::before, .cursor[data-mode="scroll"]::before { transform: scale(2.5); background: #F4F1F2; border-color: #F4F1F2; }
.cursor.down::before { transform: scale(.8); }
.cursor-lbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 600 10px/1 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #000; white-space: nowrap; opacity: 0; transition: opacity var(--t-1); }
.cursor[data-mode="drag"] .cursor-lbl, .cursor[data-mode="zoom"] .cursor-lbl, .cursor[data-mode="scroll"] .cursor-lbl { opacity: 1; }
/* ---------- cookie banner ---------- */
.cc {
position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(420px, calc(100% - 32px));
padding: 22px 22px 16px; border-radius: 22px; background: var(--glass-fill), rgba(16, 16, 20, .94);
color: #F4F1F2; font-size: 14px; line-height: 1.5;
transform: translateY(130%); opacity: 0; visibility: hidden;
transition: transform var(--t-3) var(--ease-out), opacity var(--t-2), visibility 0s linear .6s;
}
.cc.show { transform: none; opacity: 1; visibility: visible; transition: transform var(--t-3) var(--ease-out), opacity var(--t-2); }
.cc-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: none; border: 0; color: inherit; cursor: pointer; }
.cc-x:hover { background: rgba(255, 255, 255, .08); }
.cc-t { font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 0 0 8px; }
.cc-p { margin: 0; color: #A9A5AA; }
.cc-p a { color: #F4F1F2; text-decoration: underline; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.cc-actions .btn { min-height: 44px; padding: 0 18px; font-size: 14px; flex: 1 1 120px; }
.cc-link { background: none; border: 0; color: #A9A5AA; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 44px; padding: 0 6px; }
.cc-prefs { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; cursor: pointer; }
.cc-row small { display: block; color: #8D898E; font-size: 12px; }
.cc-row input { width: 20px; height: 20px; accent-color: #F4F1F2; flex: none; }
/* ---------- ticker ---------- */
.ticker { height: 34px; overflow: hidden; background: #F4F1F2; color: #0B0B0C; display: flex; align-items: center; }
.marq { display: flex; width: max-content; animation: gmarq 48s linear infinite; }
.marq-set { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.marq-set > span { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.marq-set .ic { width: 13px; height: 13px; stroke-width: 2; }
@keyframes gmarq { to { transform: translateX(-50%); } }
/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav); pointer-events: none; } /* the band is empty: only the capsule is there */
.nav-cap {
pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px;
width: min(1120px, calc(100% - 24px)); height: 52px; margin: 6px auto 0; padding: 0 4px 0 22px; border-radius: 999px;
transition: transform var(--t-3) var(--spring), height var(--t-2) var(--spring), margin var(--t-2) var(--spring);
}
.nav.is-compact .nav-cap { height: 46px; margin-top: 9px; }
.nav.is-hidden .nav-cap { transform: translateY(calc(-100% - 16px)); }
.logo { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; padding-right: .08em; color: var(--ink); }
.nav-links { position: relative; display: flex; gap: 2px; font-size: 14px; color: var(--mute); }
.nav-links a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; transition: color var(--t-1); }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
/* the glass pill that glides under the section you are reading */
.nav-pill {
position: absolute; left: 0; top: 50%; height: 36px; margin-top: -18px; width: 0; border-radius: 999px; opacity: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 14px -6px rgba(0, 0, 0, .6);
transition: transform var(--t-3) var(--spring), width var(--t-3) var(--spring), opacity var(--t-2);
}
.nav-r { display: flex; align-items: center; gap: 6px; }
/* EN / IT: Apple-style segmented control, the white knob slides */
.lang { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 999px; padding: 3px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.lang::after {
content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
background: linear-gradient(180deg, #FFFFFF, #E2E3E6); box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(0, 0, 0, .12);
transition: transform var(--t-2) var(--spring);
}
[data-lang="it"] .lang::after { transform: translateX(100%); }
.lang button { position: relative; z-index: 1; min-width: 40px; height: 32px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .08em; color: var(--mute); transition: color var(--t-2); }
.lang button[aria-pressed="true"] { color: #000; }
.cart-btn { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; transition: background var(--t-1), scale var(--t-1) var(--spring); }
.cart-btn:hover { background: var(--glass-fill), rgba(48, 48, 56, .7); }
.cart-btn:active, .menu-btn:active { scale: .94; }
/* mobile menu button + full-screen glass sheet */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 999px; place-items: center; transition: background var(--t-1), scale var(--t-1) var(--spring); }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform var(--t-2) var(--spring); }
.menu-btn span:first-child { transform: translateY(-3.5px); }
.menu-btn span:last-child { transform: translateY(3.5px); }
.menu-open .menu-btn span:first-child { transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: rotate(-45deg); }
.msheet {
position: fixed; inset: 0; z-index: 45; display: none; flex-direction: column; justify-content: space-between; gap: 32px;
padding: calc(var(--nav) + 40px) 24px calc(28px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%), rgba(8, 8, 10, .5);
-webkit-backdrop-filter: var(--glass-blur-thick); backdrop-filter: var(--glass-blur-thick);
opacity: 0; visibility: hidden; transition: opacity var(--t-2) ease, visibility 0s linear .35s;
}
.msheet.open { opacity: 1; visibility: visible; transition: opacity var(--t-2) ease; }
.msheet-links a { display: block; font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 11.5vw, 60px); line-height: 1.04; padding: 4px 0; color: var(--ink); opacity: 0; transform: translateY(18px); transition: opacity var(--t-2), transform var(--t-3) var(--spring); }
.msheet.open .msheet-links a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 90ms); }
.msheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* lock the page on the root only: overflow on would turn it into the sticky header's scroll container and push the capsule off screen */
html.menu-open { overflow: hidden; }
.msheet { overscroll-behavior: contain; touch-action: none; }
.cart-btn.bump { animation: bump .6s cubic-bezier(.2, .7, .1, 1.4); }
@keyframes bump { 35% { transform: scale(1.28); } }
.badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #000; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
/* ---------- hero ---------- */
.hero { position: relative; height: var(--stage); min-height: 600px; overflow: hidden; background: #000; }
.hero-word { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(150px, 23vw, 440px); letter-spacing: -.05em; line-height: .8; color: #18181B; background: linear-gradient(180deg, #2B2B31 0%, #141417 48%, #1F1F24 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; user-select: none; pointer-events: none; padding: 0 .07em;}
.hero-vwrap {
position: absolute; left: 50%; bottom: 0; height: min(100%, calc((100vw - 640px) * 1.23)); aspect-ratio: 832 / 1024;
transform: translateX(-50%); mix-blend-mode: screen; container-type: inline-size;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
mask-composite: intersect;
}
.hero-vwrap video { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 44px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero-l { max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.hero-r { max-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.kin { display: grid; font-size: clamp(46px, 5vw, 78px); }
.kin > span { grid-area: 1 / 1; display: block; opacity: 0; transform: translateY(16px); transition: opacity var(--t-3) ease, transform var(--t-3) var(--ease-out); }
.hero:not([data-phase]) .ka, .hero[data-phase="a"] .ka, .hero[data-phase="b"] .kb, .hero[data-phase="c"] .kc { opacity: 1; transform: none; }
.hero-price { font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.sound { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--mute); transition: color var(--t-1); }
.sound:hover { color: var(--ink); }
.sound .ic-on, .sound .lbl-off { display: none; }
.sound[aria-pressed="true"] .ic-on, .sound[aria-pressed="true"] .lbl-off { display: inline; }
.sound[aria-pressed="true"] .ic-off, .sound[aria-pressed="true"] .lbl-on { display: none; }
/* notification overlays — positioned in % of the hero video, text in cqw */
.ov { position: absolute; opacity: 0; transform: translateY(-5%) scale(.97); transition: opacity var(--t-1) ease, transform var(--t-2) var(--ease-out); pointer-events: none; }
.ov[data-on="1"] { opacity: 1; transform: none; }
/* iOS-26 "Liquid Glass" lock screen: light wallpaper lit pink from below, glass notification with a specular rim */
.ov-phone { border-radius: 4cqw; padding: 2.4cqw 1.7cqw; color: #111; display: flex; flex-direction: column; align-items: center; overflow: hidden;
background: radial-gradient(120% 60% at 50% 112%, #F4C3D1 0%, rgba(244, 195, 209, 0) 62%), radial-gradient(90% 50% at 0% 0%, #FFFFFF, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F5F5F8, #ECE8EE); }
.ph-island { width: 8cqw; height: 1.9cqw; border-radius: 2cqw; background: #0b0b0b; margin-bottom: 3.4cqw; }
.ph-clock { font-weight: 500; font-size: 6.6cqw; letter-spacing: -.045em; line-height: 1; margin-bottom: 4.2cqw; color: rgba(22, 22, 26, .78); text-shadow: 0 .1cqw 0 rgba(255, 255, 255, .9); font-variant-numeric: tabular-nums; }
.ph-card { position: relative; width: 100%; border-radius: 2.4cqw; padding: 1.6cqw; display: flex; gap: 1.3cqw; align-items: flex-start;
background: linear-gradient(160deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5));
-webkit-backdrop-filter: blur(1.2cqw) saturate(1.8); backdrop-filter: blur(1.2cqw) saturate(1.8);
box-shadow: inset 0 .15cqw 0 #FFFFFF, inset 0 0 0 .1cqw rgba(255, 255, 255, .7), inset 0 -.3cqw .8cqw rgba(60, 20, 36, .06), 0 .6cqw 1.8cqw rgba(60, 20, 36, .16); }
.app { flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 1.1cqw; background: #E8809C; color: #0b0b0c; display: grid; place-items: center; font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: 2.4cqw; line-height: 1; }
.ph-txt { min-width: 0; flex: 1; }
.ph-meta { font-size: 1.25cqw; color: #66666b; line-height: 1.3; display: flex; justify-content: space-between; gap: 1cqw; text-transform: uppercase; letter-spacing: .04em; }
.ph-h { font-size: 1.75cqw; font-weight: 700; line-height: 1.25; color: #111; }
.ph-b { font-size: 1.5cqw; line-height: 1.3; color: #3a3a3e; }
.ov-ban { border-radius: 2.8cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 0 2.2cqw; color: #111; overflow: hidden;
background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(250, 246, 248, .66));
-webkit-backdrop-filter: blur(1.4cqw) saturate(1.8); backdrop-filter: blur(1.4cqw) saturate(1.8);
box-shadow: inset 0 .15cqw 0 #FFFFFF, inset 0 0 0 .1cqw rgba(255, 255, 255, .75), inset 0 -.4cqw 1cqw rgba(0, 0, 0, .08), 0 .8cqw 2.4cqw rgba(0, 0, 0, .28); }
/* specular sweep: one pass of light across the glass when the notification lands */
.ov-ban::after, .ph-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, 0) 60%) -150% 0 / 250% 100% no-repeat; }
.ov[data-on="1"].ov-ban::after, .ov[data-on="1"] .ph-card::after { animation: ovSweep .9s var(--ease-out) .12s both; }
@keyframes ovSweep { to { background-position: 150% 0; } }
.ov-ban .app { width: 5.2cqw; height: 5.2cqw; font-size: 2.8cqw; border-radius: 1.4cqw; }
.ban-txt { min-width: 0; }
.ban-t { font-size: 1.7cqw; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ban-b { font-size: 1.5cqw; line-height: 1.25; color: #444; white-space: nowrap; }
.ov-l { justify-content: flex-end; border-radius: 0 2.6cqw 2.6cqw 0; text-align: right; }
/* ---------- scroll stages ---------- */
.dsec { position: relative; background: #000; }
.sec-360 { height: calc(var(--stage) * 3.2); }
.sec-detail { height: calc(var(--stage) * 6); }
.sec-detail.has-shop { height: calc(var(--stage) * 7.3); } /* 5 stages of video + the hand-off to the product shop + a short hold */
.dstick { position: sticky; top: var(--nav); height: var(--stage); overflow: hidden; }
.dgrid { height: 100%; max-width: 1440px; margin: 0 auto; padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 48px; align-items: center; }
.dleft { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.dttl { font-size: clamp(48px, 5.4vw, 88px); }
.dframe { position: relative; height: min(calc(var(--stage) - 96px), calc((100vw - 780px) * 1.23)); aspect-ratio: 832 / 1024; }
.dframe.sq { aspect-ratio: 1 / 1; height: min(calc(var(--stage) - 96px), calc(100vw - 780px)); }
.dclip { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: #000; }
.dclip video { width: 100%; height: 100%; object-fit: cover; }
.dprog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); overflow: hidden; }
.dprog .fill { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.dintro { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; white-space: nowrap; z-index: 4; transition: opacity var(--t-2); }
.dintro[data-on="0"] { opacity: 0; }
/* 360 */
.rot-frame { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.orbit { position: absolute; left: 12%; right: 12%; bottom: 2%; width: 76%; pointer-events: none; }
.orbit ellipse { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .6; }
.orbit circle { fill: var(--ink); }
.drag-hint { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.rcol { display: flex; flex-direction: column; gap: 26px; }
.deg { font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 800; font-size: clamp(72px, 8vw, 128px); line-height: .85; font-variant-numeric: tabular-nums; }
.rcaps { position: relative; min-height: 150px; }
.rcap { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(10px); transition: opacity var(--t-2), transform var(--t-3); }
.rcap[data-on="1"] { opacity: 1; transform: none; }
.rcap h3 { font-size: clamp(30px, 2.8vw, 44px); margin: 6px 0 10px; }
.angles { display: flex; gap: 8px; flex-wrap: wrap; }
.angles button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: box-shadow var(--t-1), background var(--t-1), color var(--t-1), scale var(--t-1) var(--spring); }
.angles button:hover { background: linear-gradient(180deg, #FFFFFF, #E3E4E7); color: #0B0B0C; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 8px 20px -10px rgba(255, 255, 255, .45); }
.facts { border-top: 1px solid var(--line); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts li span:first-child { color: var(--faint); }
.rot-buy { margin-top: 8px; }
/* under the lens: nothing on the sides — the video and the description */
.lgrid {
--fh: min(calc(var(--stage) - 72px), calc((100vw - 640px) * 1.23)); /* frame height */
--fw: calc(var(--fh) * .8125); /* frame width (832:1024) */
--cw: clamp(220px, calc((100vw - var(--fw)) / 2 - 76px), 400px); /* card width */
height: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 40px; display: grid; grid-template-columns: auto; justify-content: center; align-items: center;
}
/* the video sits in the middle of the page; the description cards share its grid cell and open out to its left or right */
.lframe { grid-area: 1 / 1; height: var(--fh); }
.lframe .dclip { border-radius: 0; }
/* the video melts into the black stage: a black gradient on top is much cheaper than a live mask on a playing video */
.lframe .dclip::after {
content: ""; position: absolute; inset: -1px; pointer-events: none;
background:
linear-gradient(90deg, #000 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, #000 100%),
linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, #000 100%);
}
.dcol { grid-area: 1 / 1; align-self: stretch; position: relative; pointer-events: none; }
/* the loupe: minimal precision lens — real magnification on canvas (1.6x), thin chrome rim, no fill, no handle.
It lands slightly out of focus and pulls focus, like a camera. */
.loupe {
--d: 112px;
position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
border-radius: 50%; z-index: 3; pointer-events: none;
opacity: 0; transform: scale(.82);
transition: opacity var(--t-2) ease, transform var(--t-3) var(--spring);
}
.loupe[data-on="1"] { opacity: 1; transform: none; }
.loupe canvas {
position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; background: transparent;
filter: blur(3px); transition: filter var(--t-3) ease .14s;
box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 22px rgba(255, 255, 255, .1);
}
.loupe[data-on="1"] canvas { filter: none; }
/* chrome rim, 1.5px, drawn as a gradient ring */
.loupe::before {
content: ""; position: absolute; inset: -1.5px; z-index: 1; border-radius: 50%; padding: 1.5px; pointer-events: none;
background: linear-gradient(160deg, #FFFFFF 0%, #D9DCE1 30%, #8E939B 52%, #F2F3F5 72%, #A9AEB5 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* glass glare: a small specular highlight, nothing that darkens the detail */
.loupe-glass {
position: absolute; inset: 0; border-radius: 50%; z-index: 2;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 26%),
radial-gradient(circle at 74% 84%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 22%);
}
/* line that carries the description out of the lens (geometry set by main.js) */
.dline { position: absolute; left: 0; top: 0; width: 0; height: 1px; transform-origin: 0 50%; z-index: 2; pointer-events: none; }
.dline > span { position: absolute; inset: 0; background: rgba(255, 255, 255, .7); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--t-1) ease; }
.dline[data-on="1"] > span { transform: scaleX(1); transition: transform var(--t-3) cubic-bezier(.6, 0, .2, 1) .15s; }
.dcard { position: absolute; width: var(--cw); transform: translateY(-50%); opacity: 0; transition: opacity var(--t-1); pointer-events: none; }
.dcard::before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #B4B8BF 70%); box-shadow: 0 0 12px rgba(255, 255, 255, .45); }
/* right of the video (dot sits 12px from the frame edge — main.js ends the line there) */
.dcard, .dcard[data-side="r"] { left: 100%; margin-left: 12px; padding-left: 24px; }
.dcard::before, .dcard[data-side="r"]::before { left: -4px; }
/* left of the video */
.dcard[data-side="l"] { left: auto; right: 100%; margin-left: 0; margin-right: 12px; padding-left: 0; padding-right: 24px; text-align: right; }
.dcard[data-side="l"]::before { left: auto; right: -4px; }
.dcard[data-side="l"] .dc-p { margin-left: auto; }
.dcard[data-on="1"] { opacity: 1; pointer-events: auto; transition: opacity var(--t-2) ease .45s; }
.dc-in { transform: translateX(-22px); transition: transform var(--t-1); }
.dcard[data-side="l"] .dc-in { transform: translateX(22px); }
.dcard[data-on="1"] .dc-in { transform: none; transition: transform var(--t-3) var(--ease-out) .45s; }
/* editorial card: index + ticks, serif italic title, readable body, technical rows */
.dc-idx { display: flex; align-items: center; gap: 10px; color: var(--faint); }
.dc-n { color: var(--ink); }
.dc-ticks { display: inline-flex; gap: 4px; }
.dc-ticks i { width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.dc-ticks i.on { background: linear-gradient(90deg, #FFFFFF, #B4B8BF); box-shadow: 0 0 8px rgba(255, 255, 255, .35); }
.dc-t { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(36px, 3.1vw, 52px); line-height: 1.02; letter-spacing: -.01em; margin: 14px 0 14px; color: var(--ink); text-wrap: balance; }
.dc-p { color: #CFCBD0; font-size: 15.5px; line-height: 1.6; max-width: 32ch; text-wrap: pretty; }
.dc-spec { margin: 18px 0 0; max-width: 32ch; }
.dc-spec div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.dc-spec div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.dc-spec dt { color: var(--faint); }
.dc-spec dd { margin: 0; color: var(--ink); text-align: right; }
.dcard[data-side="l"] .dc-idx { justify-content: flex-end; }
.dcard[data-side="l"] .dc-spec { margin-left: auto; }
/* each line enters a beat after the previous one */
.dc-in > * { opacity: 0; transform: translateY(10px); transition: opacity var(--t-1), transform var(--t-1); }
.dcard[data-on="1"] .dc-in > * { opacity: 1; transform: none; transition: opacity var(--t-3) ease, transform var(--t-3) var(--spring); }
.dcard[data-on="1"] .dc-in > :nth-child(1) { transition-delay: .4s; }
.dcard[data-on="1"] .dc-in > :nth-child(2) { transition-delay: .48s; }
.dcard[data-on="1"] .dc-in > :nth-child(3) { transition-delay: .58s; }
.dcard[data-on="1"] .dc-in > :nth-child(4) { transition-delay: .68s; }
/* ---------- product shop at the end of each detail video ----------
The video frame cross-fades into the front still and glides into .ps-slot (main.js sets the transform);
then the shop fades in, one quiet action: no countdown, no pressure. */
.ps-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.ps-prod { display: none; }
.lframe { transform-origin: 50% 50%; will-change: transform; }
/* a black hairline ring over the frame edge: when the frame is scaled, anti-aliasing could leave a 1px seam of video visible */
.lframe::before { content: ""; position: absolute; inset: -3px; z-index: 1; border: 4px solid #000; pointer-events: none; }
.is-shop .dcol, .is-shop .dline, .is-shop .loupe, .is-shop .dintro { opacity: 0 !important; pointer-events: none !important; transition: opacity var(--t-1) ease; }
.pshop { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pshop.in { pointer-events: auto; }
.ps-grid {
height: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 40px;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "slot photos info";
gap: 40px; align-items: center;
}
.ps-slot { grid-area: slot; position: relative; align-self: stretch; }
.ps-views { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); }
.ps-views button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--mute); transition: background var(--t-2), color var(--t-2); }
.ps-views button.on { background: linear-gradient(180deg, #FFFFFF, #E2E3E6); color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.ps-photos { grid-area: photos; align-self: stretch; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; padding: 4vh 0; }
.ps-ph { min-height: 0; border-radius: 18px; overflow: hidden; background: #0a0a0a; }
.ps-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ps-model { color: var(--faint); }
.ps-info { grid-area: info; display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.ps-name { font-size: clamp(44px, 4.4vw, 72px); line-height: .92; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em; }
.ps-name-a { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; }
.ps-name-b { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.ps-price { font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.ps-desc { color: #CFCBD0; font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--ink); background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: box-shadow var(--t-1), scale var(--t-1) var(--spring); }
.ps-chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .16); }
.ps-chip:active { scale: .96; }
.ps-size-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ps-guide { font-size: 13px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.ps-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ps-sizes button { min-height: 46px; border-radius: 12px; font-family: 'Geist Mono', monospace; font-size: 13px; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: box-shadow var(--t-1), background var(--t-1), color var(--t-1), scale var(--t-1) var(--spring); }
.ps-sizes button:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .14); }
.ps-sizes button:active { scale: .96; }
.ps-sizes button.on { background: linear-gradient(180deg, #FFFFFF, #E3E4E7); color: #0B0B0C; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 8px 20px -10px rgba(255, 255, 255, .45); }
.ps-fit { color: var(--ink); font-size: 11px; letter-spacing: .06em; margin-top: 10px; }
.ps-foot { display: flex; flex-direction: column; gap: 10px; }
.ps-next { align-self: flex-start; }
.ps-trust { color: var(--faint); font-size: 11px; }
/* entrance: each block a beat after the previous one */
.pshop .ps-photos, .pshop .ps-info > *, .pshop .ps-views { opacity: 0; transform: translateY(16px); transition: opacity var(--t-1) ease, transform var(--t-1) ease; }
.pshop.in .ps-photos, .pshop.in .ps-info > *, .pshop.in .ps-views { opacity: 1; transform: none; transition: opacity var(--t-3) ease, transform .8s var(--spring); }
.pshop.in .ps-photos { transition-delay: .05s; }
.pshop.in .ps-views { transition-delay: .25s; }
.pshop.in .ps-info > :nth-child(1) { transition-delay: .12s; }
.pshop.in .ps-info > :nth-child(2) { transition-delay: .18s; }
.pshop.in .ps-info > :nth-child(3) { transition-delay: .24s; }
.pshop.in .ps-info > :nth-child(4) { transition-delay: .3s; }
.pshop.in .ps-info > :nth-child(5) { transition-delay: .36s; }
.pshop.in .ps-info > :nth-child(n+6) { transition-delay: .42s; }
@media (min-width: 960px) and (max-width: 1179px) {
.ps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "slot photos" "slot info"; grid-template-rows: 150px minmax(0, 1fr); gap: 20px 32px; }
.ps-photos { grid-template-rows: none; grid-template-columns: 1fr 1fr; padding: 0; }
.ps-model { display: none; }
.ps-chips { display: none; }
}
/* ---------- manifesto ---------- */
.mani { padding: 120px 0; border-top: 1px solid var(--line); }
.mani-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mani-img { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #000; }
.mani-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.mani-copy { display: flex; flex-direction: column; gap: 28px; }
.mani-list { counter-reset: mk; }
.mani-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.mani-list li:first-child { border-top: 1px solid var(--line); }
.mani-list .mono { color: var(--ink); display: block; margin-bottom: 6px; }
.mani-list .mono::before { counter-increment: mk; content: "0" counter(mk); margin-right: 12px; color: var(--pink); }
.mani-list p { font-size: 18px; color: var(--mute); transition: color .6s ease; }
.mani-list li.done p { color: var(--ink); }
/* the three monkeys draw themselves while you scroll (main.js sets each stroke's dash offset) */
.mk { width: 84px; height: 84px; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: filter .7s ease, stroke .7s ease; }
.mk path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mk .hf { stroke: none; fill: #000; stroke-dasharray: none; opacity: 0; transition: opacity .25s ease; }
.mani-list li.done .mk { stroke: #fff; filter: drop-shadow(0 0 9px rgba(232, 128, 156, .55)); }
/* headline: outlined text that fills with liquid chrome as it scrolls into view */
.mani-h { position: relative; }
.mh-base { display: block; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .4); }
.mh-fill {
position: absolute; inset: 0; display: block; color: transparent; pointer-events: none; -webkit-user-select: none; user-select: none;
--lv: 9999px;
background-image:
radial-gradient(52% 150% at calc((var(--p, .5) + var(--px, 0) * .35) * 100%) 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 64%),
linear-gradient(104deg, #4a4a52 0%, #ececf1 9%, #8a8a94 19%, #ffffff 30%, #f3a9c0 41%, #ffffff 50%, #7a7a85 62%, #dedee4 74%, #ffe0ea 84%, #8f8f99 100%);
background-size: 100% 100%, 260% 100%;
background-position: 0 0, calc((var(--p, .5) + var(--px, 0) * .3) * 100%) 0;
background-repeat: no-repeat;
-webkit-background-clip: text; background-clip: text;
-webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12' viewBox='0 0 90 12'%3E%3Cpath d='M0 12V6C15 0 30 0 45 6S75 12 90 6V12Z'/%3E%3C/svg%3E");
mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12' viewBox='0 0 90 12'%3E%3Cpath d='M0 12V6C15 0 30 0 45 6S75 12 90 6V12Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
-webkit-mask-size: 100% calc(var(--lv) - 12px), 90px 12px; mask-size: 100% calc(var(--lv) - 12px), 90px 12px;
-webkit-mask-position: 0 100%, var(--wx, 0px) calc(100% - var(--lv) + 12px); mask-position: 0 100%, var(--wx, 0px) calc(100% - var(--lv) + 12px);
}
@property --wx { syntax: ""; inherits: false; initial-value: 0px; }
@keyframes mh-wave { to { --wx: 90px; } }
.mani.live .mh-fill { animation: mh-wave 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mani.live .mh-fill { animation: none; } }
/* ---------- worn by ---------- */
.worn { padding: 140px 0 120px; }
.worn-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; margin-bottom: 48px; }
.worn-head .mono { margin-bottom: 18px; }
.worn-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 280px); grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.wt { position: relative; overflow: hidden; border-radius: 10px; background: #0d0d0f; }
.wt-tall { grid-row: span 2; }
.wt img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); transition: transform 1.1s var(--ease-out), filter var(--t-3); }
.wt:hover img { transform: scale(1.06); filter: none; }
.wt figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.reviews-mq { display: contents; }
.rv-clone { display: none; }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.rv { padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; }
.stars { letter-spacing: .25em; font-size: 13px; color: var(--ink); }
.rv-t { font-size: 19px; line-height: 1.45; text-wrap: pretty; }
.rv footer { color: var(--faint); }
.worn-note { margin-top: 36px; color: var(--faint); font-size: 11px; }
/* ---------- shop ---------- */
.shop { padding: 120px 0; border-top: 1px solid var(--line); }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: start; }
.gal { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; position: sticky; top: calc(var(--nav) + 28px); }
.thumbs { display: flex; flex-direction: column; gap: 12px; }
/* thumbnails sit in thin glass frames; the one you are looking at gets the thick sheet and a white rim */
.thumb { position: relative; width: 88px; aspect-ratio: 2 / 3; padding: 3px; border-radius: 14px; border: 0 !important; background: var(--glass-fill-thin) !important; box-shadow: var(--chip-ring); opacity: .55; transition: opacity var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out), scale var(--t-1) var(--spring); }
.thumb:hover { opacity: .9; }
.thumb:active { scale: .96; }
.thumb.on { opacity: 1; background: var(--glass-fill), rgba(255, 255, 255, .04) !important; box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 24px -12px rgba(255, 255, 255, .3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; background: #0a0a0a; }
.main-img { position: relative; aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; background: #0a0a0a; touch-action: pan-y; }
.main-img img { width: 100%; height: 100%; object-fit: cover; }
.main-img .mi-ghost { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.mi-ghost.out { opacity: 0; transform: scale(.985); }
.mi-ghost.out-l { opacity: 0; transform: translateX(-8%); }
.mi-ghost.out-r { opacity: 0; transform: translateX(8%); }
[data-main-img].mi-in { animation: miIn var(--t-3) var(--ease-out) both; }
[data-main-img].mi-in-r { animation: miInR var(--t-3) var(--ease-out) both; }
[data-main-img].mi-in-l { animation: miInL var(--t-3) var(--ease-out) both; }
@keyframes miIn { from { transform: scale(1.045); } }
@keyframes miInR { from { transform: translateX(10%) scale(1.02); } }
@keyframes miInL { from { transform: translateX(-10%) scale(1.02); } }
/* glass dots (phones): which view you are on, tappable */
.mi-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; gap: 2px; padding: 5px; border-radius: 999px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); }
.mi-dots button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; }
.mi-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .38); transition: width var(--t-2) var(--ease-out), background var(--t-2); }
.mi-dots button.on::before { width: 16px; background: #FFFFFF; }
.buy { display: flex; flex-direction: column; gap: 22px; }
.buy-title { font-size: clamp(52px, 5.2vw, 88px); }
.price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.price { font-size: 30px; font-weight: 600; line-height: 1; }
.save { font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #0B0B0C; background: var(--grey); padding: 6px 10px; border-radius: 999px; }
.install { font-size: 14px; margin-top: -12px; }
.piece { color: var(--mute); }
.piece strong { color: var(--ink); font-weight: 600; letter-spacing: .08em; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.seg button { min-height: 46px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mute); transition: background var(--t-2), color var(--t-2), box-shadow var(--t-2), scale var(--t-1) var(--spring); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: linear-gradient(180deg, #FFFFFF, #E2E3E6); color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(0, 0, 0, .12); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.guide-btn { font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; min-height: 32px; }
.guide { margin-top: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; color: var(--mute); display: flex; flex-direction: column; gap: 12px; }
.guide-t { color: var(--ink); font-weight: 600; }
.finder { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.finder label { display: flex; flex-direction: column; gap: 6px; }
.finder input { height: 48px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); color: var(--ink); padding: 0 14px; font: inherit; width: 100%; transition: border-color var(--t-1), box-shadow var(--t-1); }
.finder input:focus { outline: none; border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .08); }
.finder .btn { min-height: 48px; }
.finder-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--ink); }
.finder-out .btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
.chart-wrap { overflow-x: auto; }
.chart { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart th, .chart td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.chart th { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--faint); font-weight: 500; text-transform: uppercase; }
.chart tr.on td { color: var(--ink); font-weight: 600; }
.chart-note { font-size: 10.5px; }
.sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sizes button { min-height: 52px; border-radius: 14px; font-family: 'Geist Mono', monospace; font-size: 14px; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: box-shadow var(--t-1), background var(--t-1), color var(--t-1), scale var(--t-1) var(--spring); }
.sizes button:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sizes button.on { background: linear-gradient(180deg, #FFFFFF, #E3E4E7); color: #0B0B0C; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 8px 20px -10px rgba(255, 255, 255, .45); }
.fit { margin-top: 12px; padding: 16px 18px; border-radius: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; animation: fitIn .45s cubic-bezier(.2, .7, .1, 1); }
.fit-h { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; color: var(--ink); font-weight: 600; font-size: 14px; }
.fit .k { display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.fit .v { display: block; font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 2px; }
.fit-note { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }
@keyframes fitIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.err { color: var(--warn); font-size: 14px; margin-top: 10px; }
.express-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.xp { min-height: 48px; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #E4E5E8) !important; color: #000 !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 8px 20px -12px rgba(255, 255, 255, .5); transition: filter var(--t-1), scale var(--t-1) var(--spring); }
.xp:hover { filter: brightness(1.04); }
.xp:active { scale: .97; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--mute); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust .ic { width: 18px; height: 18px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ic { transition: transform var(--t-2); }
.acc details[open] summary .ic { transform: rotate(45deg); }
.acc-b { padding: 0 0 20px; color: var(--mute); font-size: 15px; }
.acc-b li { padding: 3px 0; }
.acc-b a { text-decoration: underline; color: var(--ink); }
/* ---------- aurora: light leaks behind shop, globe and footer ----------
Each section gets its own composition (never the same blob twice). Static: painted once. */
.shop, .world, .foot { position: relative; isolation: isolate; }
.shop::before, .world::before, .foot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 160px 160px, auto, auto, auto; }
.shop::before {
background-image: var(--grain),
radial-gradient(42% 36% at 26% 28%, rgba(232, 128, 156, .17), rgba(232, 128, 156, 0) 72%),
radial-gradient(34% 40% at 90% 80%, rgba(118, 96, 255, .1), rgba(118, 96, 255, 0) 70%),
radial-gradient(30% 26% at 72% 6%, rgba(214, 218, 226, .07), rgba(214, 218, 226, 0) 70%);
}
.world::before {
background-image: var(--grain),
radial-gradient(38% 56% at 74% 50%, rgba(118, 96, 255, .13), rgba(118, 96, 255, 0) 70%),
radial-gradient(30% 36% at 8% 92%, rgba(232, 128, 156, .11), rgba(232, 128, 156, 0) 70%),
radial-gradient(24% 30% at 44% 4%, rgba(214, 218, 226, .05), rgba(214, 218, 226, 0) 70%);
}
.foot::before {
background-image: var(--grain),
radial-gradient(64% 52% at 50% 118%, rgba(232, 128, 156, .22), rgba(232, 128, 156, 0) 70%),
radial-gradient(30% 34% at 94% 6%, rgba(214, 218, 226, .06), rgba(214, 218, 226, 0) 70%),
radial-gradient(26% 30% at 4% 40%, rgba(118, 96, 255, .07), rgba(118, 96, 255, 0) 70%);
}
/* ---------- worldwide globe ---------- */
.world { padding: 120px 0; border-top: 1px solid var(--line); overflow: hidden; }
.world-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.world-copy { display: flex; flex-direction: column; gap: 24px; }
.world-facts { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 8px; }
.world-facts li { display: flex; flex-direction: column; gap: 6px; }
.world-facts strong { font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 800; font-size: 36px; text-transform: uppercase; line-height: 1; }
.world-facts .mono { color: var(--faint); }
.globe-wrap { position: relative; width: min(660px, 100%); aspect-ratio: 1; justify-self: center; touch-action: pan-y; }
.globe { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
/* the sphere itself is CSS (painted once); the canvas only draws dots, arcs and pins */
.globe-wrap::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .07) 87.5%, rgba(255, 255, 255, 0) 97%); }
.globe-glow { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
background:
radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 40%, rgba(255, 255, 255, 0) 62%),
radial-gradient(closest-side, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .6) 100%),
#0B0B0D;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 90px 6px rgba(255, 255, 255, .035), 0 40px 90px -30px rgba(0, 0, 0, .9); }
/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 96px 0 32px; overflow: hidden; }
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; padding-bottom: 72px; }
.news h2 { margin-top: 14px; }
.news-form { display: flex; gap: 10px; }
.news-form input { flex: 1; min-width: 0; height: 56px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); color: var(--ink); padding: 0 22px; font: inherit; }
.news-form input::placeholder { color: var(--faint); }
.news-form input:focus { outline: none; border-color: var(--ink); }
.news-note { margin-top: 12px; font-size: 13px; }
.news-note a { text-decoration: underline; color: var(--ink); }
.news-ok { font-size: 20px; font-weight: 600; }
.foot-word { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(96px, 21vw, 380px); letter-spacing: -.05em; line-height: .8; white-space: nowrap; padding-right: .07em;}
.foot-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; padding-top: 28px; border-top: 1px solid var(--line); margin-top: 28px; color: var(--mute); font-size: 13px; }
.foot-links nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot-links a:hover { color: var(--ink); }
.company { margin-top: 24px; color: var(--faint); font-size: 10.5px; }
/* ---------- sticky buy bar ---------- */
.buybar { position: fixed; left: 50%; bottom: 16px; z-index: 40; width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: stretch; padding: 8px; border-radius: 30px; transform: translate(-50%, 160%); visibility: hidden; transition: transform var(--t-3) var(--ease-out), visibility 0s linear .5s; }
.buybar.show { transform: translate(-50%, 0); visibility: visible; transition: transform var(--t-3) var(--ease-out); }
.bb-row { display: flex; align-items: center; gap: 14px; }
.buybar img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; object-position: 50% 18%; flex: none; }
.bb-sz { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .06em; vertical-align: 1px; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); }
.bb-pick { max-height: 0; opacity: 0; overflow: hidden; padding: 0 6px; transition: max-height var(--t-2) var(--ease-out), opacity var(--t-2) var(--ease-out), padding var(--t-2) var(--ease-out); }
.buybar.pick .bb-pick { max-height: 120px; opacity: 1; padding: 8px 6px 12px; }
.bb-pick-t { color: var(--faint); margin-bottom: 8px; }
.bb-sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bb-sizes button { min-height: 44px; border-radius: 14px; font-family: 'Geist Mono', monospace; font-size: 13px; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: background var(--t-1), color var(--t-1), scale var(--t-1) var(--spring); }
.bb-sizes button:active { scale: .95; }
.bb-sizes button.on { background: linear-gradient(180deg, #FFFFFF, #E3E4E7); color: #0B0B0C; box-shadow: 0 6px 16px -8px rgba(255, 255, 255, .5); }
.bb-sizes button.oos { color: var(--faint); background-image: linear-gradient(to top right, transparent calc(50% - .5px), rgba(255, 255, 255, .28) 50%, transparent calc(50% + .5px)), var(--glass-fill-thin); }
.bb-txt { flex: 1; min-width: 0; }
.bb-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-price { font-size: 13px; color: var(--pink); }
.buybar .btn { min-height: 44px; padding: 0 20px; }
/* ---------- cart drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 59; width: 100%; height: 100%; background: rgba(0, 0, 0, .55) !important; opacity: 0; pointer-events: none; transition: opacity var(--t-2); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100%); background: radial-gradient(90% 34% at 0% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .3) 100%), rgba(10, 10, 12, .74); -webkit-backdrop-filter: var(--glass-blur-thick); backdrop-filter: var(--glass-blur-thick); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .3), inset 2px 0 0 rgba(255, 255, 255, .04), -40px 0 80px -30px rgba(0, 0, 0, .9); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform var(--t-3) var(--ease-out), visibility 0s linear .5s; }
.drawer.open { transform: none; visibility: visible; transition: transform var(--t-3) var(--ease-out); }
.dr-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--line); }
.dr-head h2 { font-size: 30px; }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; transition: background var(--t-1); }
.icon-btn:hover { background: rgba(255, 255, 255, .08) !important; }
.free { padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.free-bar { margin-top: 8px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.free-bar span { display: block; height: 100%; background: var(--pink); transform-origin: 0 50%; transition: transform var(--t-3); }
.dr-body { flex: 1; overflow-y: auto; padding: 4px 24px; }
.dr-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); transition: opacity var(--t-2); }
.dr-item { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; padding: 18px 0; background: transparent; touch-action: pan-y; transition: transform var(--t-2) var(--ease-out); }
.dr-del { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity var(--t-1), color var(--t-1); }
.dr-row.arm .dr-del, .dr-row.gone .dr-del { opacity: 1; color: var(--ink); }
.dr-row:has(.dr-item[style*="translateX"]) .dr-del { opacity: .7; }
.dr-row.gone { opacity: 0; transition: opacity var(--t-2) var(--t-1); }
.drawer.stag .dr-row { animation: drIn var(--t-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms); }
@keyframes drIn { from { opacity: 0; transform: translateX(28px); } }
.dr-item img { width: 76px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #111; }
.dr-name { font-weight: 600; }
.dr-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; text-align: right; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; margin-top: 12px; background: var(--glass-fill-thin); box-shadow: var(--chip-ring); }
.qty button { width: 40px; height: 40px; display: grid; place-items: center; }
.qty button .ic { width: 16px; height: 16px; }
.qty span { min-width: 22px; text-align: center; font-family: 'Geist Mono', monospace; font-size: 13px; }
.rm { font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.rm:hover { color: var(--ink); }
.upsell { margin: 20px 0; padding: 14px; border-radius: 18px; display: flex; gap: 14px; align-items: center; }
.upsell img { width: 52px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.upsell .ut { flex: 1; min-width: 0; font-size: 14px; }
.upsell .ut strong { display: block; font-weight: 600; color: var(--ink); }
.upsell .ut span { color: var(--mute); }
.upsell .btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
.dr-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.dr-sub { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; }
.dr-note { font-size: 13px; }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 40px 24px; }
.empty .disp { font-size: 44px; }
/* product flying into the bag */
.fly { position: fixed; z-index: 120; pointer-events: none; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); will-change: transform, opacity; }
.fly img { width: 100%; height: 100%; object-fit: cover; }
/* =========================================================
CHECKOUT
========================================================= */
.co-head { position: sticky; top: 0; z-index: 20; height: 64px; pointer-events: none; }
.co-head .wrap { pointer-events: auto; width: min(1120px, calc(100% - 24px)); height: 52px; margin: 6px auto 0; padding: 0 20px 0 22px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.co-secure { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.demo-bar { background: #161618; color: var(--mute); text-align: center; font-size: 12.5px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); min-height: calc(100vh - 100px); }
.co-main { padding: 40px clamp(20px, 5vw, 72px) 96px; max-width: 760px; width: 100%; justify-self: end; }
.co-aside { background: radial-gradient(70% 35% at 80% 0%, rgba(255, 255, 255, .07), transparent 70%), var(--glass-fill), #0B0B0D; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); padding: 40px clamp(20px, 3vw, 48px); }
.co-aside-in { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); margin-bottom: 28px; }
.crumbs .on { color: var(--ink); }
.crumbs a { text-decoration: underline !important; text-underline-offset: 3px; }
.co-title { font-size: clamp(44px, 5vw, 72px); margin-bottom: 24px !important; }
.co-express { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.or { display: flex; align-items: center; gap: 14px; color: var(--faint); font-size: 12px; margin: 26px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.step { border-radius: 22px; padding: 22px; margin-bottom: 14px; transition: opacity var(--t-2), box-shadow var(--t-2); }
.step:not([data-state="active"])::before { opacity: .45; }
.step[data-state="active"] { box-shadow: var(--glass-shadow), 0 24px 60px -30px rgba(232, 128, 156, .25); }
.step[data-state="locked"] { opacity: .45; }
.step-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-h h2 { font-size: 28px; display: flex; align-items: baseline; gap: 12px; }
.step-n { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--faint); font-weight: 500; letter-spacing: .1em; }
.step-sum { color: var(--mute); font-size: 14px; margin-top: 8px !important; }
.step-edit { font-size: 13px; text-decoration: underline; color: var(--mute); min-height: 32px; }
.step-body { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.step[data-state="done"] .step-body, .step[data-state="locked"] .step-body { display: none; }
.step:not([data-state="done"]) .step-sum, .step:not([data-state="done"]) .step-edit { display: none; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f-row.three { grid-template-columns: 1.2fr 1fr 1fr; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span { font-size: 12px; color: var(--mute); }
.fld input, .fld select { height: 52px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background-color: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); transition: border-color var(--t-1), box-shadow var(--t-1); color: var(--ink); padding: 0 14px; font: inherit; font-size: 15px; width: 100%; appearance: none; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.fld input:focus, .fld select:focus { outline: none; border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .08); }
.fld select option { background: #141418; color: var(--ink); }
.fld.bad input, .fld.bad select { border-color: var(--warn); }
.fld .msg { color: var(--warn); font-size: 12px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mute); cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.chk a { text-decoration: underline !important; color: var(--ink); }
.chk.bad { color: var(--warn); }
.ship-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color var(--t-1), background var(--t-1); }
.ship-opt input { accent-color: var(--ink); width: 18px; height: 18px; }
.ship-opt .so-t { flex: 1; display: flex; flex-direction: column; }
.ship-opt .so-t small { color: var(--mute); font-size: 13px; }
.ship-opt:has(input:checked) { border-color: var(--ink); background: rgba(255, 255, 255, .03); }
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-tab { min-height: 52px; border-radius: 12px; border: 1px solid var(--line-2) !important; font-weight: 500; transition: border-color var(--t-1), background var(--t-1); }
.pay-tab.on { border-color: var(--ink) !important; background: rgba(255, 255, 255, .05) !important; }
.card-box { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.test-hint { font-size: 12px; color: var(--faint); }
.co-legal { font-size: 13px; color: var(--faint); }
.co-legal a { text-decoration: underline !important; color: var(--mute); }
.sum-toggle { display: none; }
.sum-items { display: flex; flex-direction: column; gap: 16px; }
.sum-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 14px; }
.sum-thumb { position: relative; width: 64px; aspect-ratio: 2 / 3; }
.sum-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: #111; }
.sum-qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #000; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.sum-item small { display: block; color: var(--mute); }
.disc { display: flex; gap: 8px; }
.disc input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); padding: 0 14px; font: inherit; }
.disc input:focus { outline: none; border-color: var(--ink); }
.disc .btn { min-height: 48px; padding: 0 18px; }
.disc-msg { font-size: 13px; color: var(--mute); }
.sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 24px; font-weight: 600; padding-top: 16px; border-top: 1px solid var(--line); }
.sum-total small { font-size: 12px; color: var(--faint); font-weight: 400; margin-right: 8px; }
.sum-trust { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--mute); padding-top: 8px; }
.sum-trust li { display: flex; gap: 8px; align-items: center; }
.sum-trust .ic { width: 16px; height: 16px; }
.co-empty, .done-box { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; align-items: flex-start; }
.done-ic { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; animation: fitIn .6s cubic-bezier(.2, .7, .1, 1); }
.done-ic .ic { width: 28px; height: 28px; }
.done-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; font-size: 14px; color: var(--mute); }
.done-grid strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.pieces { display: flex; flex-wrap: wrap; gap: 8px; }
.pieces span { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; color: var(--ink); background: var(--glass-fill-thin); box-shadow: var(--chip-ring); }
/* =========================================================
LEGAL PAGES
========================================================= */
.legal-nav { position: sticky; top: 0; z-index: 20; height: 64px; pointer-events: none; }
.legal-nav .wrap { pointer-events: auto; width: min(1120px, calc(100% - 24px)); height: 52px; margin: 6px auto 0; padding: 0 6px 0 22px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal-nav .back { font-size: 14px; color: var(--mute); display: inline-flex; gap: 8px; align-items: center; }
.legal-nav .back:hover { color: var(--ink); }
.legal { max-width: 820px; margin: 0 auto; padding: 72px 20px 120px; }
.legal h1 { font-size: clamp(48px, 7vw, 100px); margin: 16px 0 14px !important; }
.legal .upd { color: var(--faint); }
.legal h2 { font-family: 'Archivo', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; margin: 48px 0 14px !important; }
.legal h3 { font-size: 17px; margin: 22px 0 8px !important; }
.legal p, .legal li { color: #C9C5CA; font-size: 16px; line-height: 1.7; }
.legal p + p { margin-top: 12px !important; }
.legal ul.dots { list-style: disc; padding-left: 20px !important; margin-top: 8px !important; }
.legal ul.dots li { padding: 2px 0; }
.legal a { text-decoration: underline !important; color: var(--ink); }
.legal .note { border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; color: var(--mute); font-size: 14px; margin-top: 28px !important; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); color: #C9C5CA; vertical-align: top; }
.legal th { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.wd-card { margin-top: 32px; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.wd-card h2 { margin: 0 !important; }
.wd-card .fld input.bad { border-color: var(--warn); }
.legal-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--faint); font-size: 12px; }
.legal-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.legal-foot a:hover { color: var(--ink); }
/* =========================================================
PHONE + TABLET
========================================================= */
@media (max-width: 959px) {
.wrap { padding: 0 20px; }
.nav-links { display: none; }
.nav-cap { padding-left: 18px; gap: 10px; }
.nav .lang { display: none; }
.menu-btn { display: grid; }
.msheet { display: flex; }
.legal-nav .wrap, .co-head .wrap { padding-left: 18px; }
.hero { height: auto; min-height: 0; padding-bottom: 8px; }
.hero-word { top: 22%; font-size: 31vw; }
.hero-vwrap { position: relative; left: auto; bottom: auto; transform: none; width: min(100%, 560px); height: auto; margin: 0 auto; }
.hero-copy { position: relative; padding: 0 20px 36px; flex-direction: column; align-items: stretch; gap: 24px; margin-top: -36px; }
.hero-l, .hero-r { max-width: none; }
.hero-r { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hero-r .mono { width: 100%; }
.dgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px 20px 18px; align-items: stretch; }
.dleft { gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.dleft .lead, .dleft .eye { display: none; }
.dttl { font-size: 40px; }
.rot-buy { margin: 0; min-height: 40px; padding: 0 14px; font-size: 13px; }
.dframe, .dframe.sq { height: 100%; max-width: 100%; justify-self: center; }
.rcol { gap: 12px; }
.deg, .facts { display: none; }
.rcaps { min-height: 100px; }
.rcap h3 { font-size: 28px; margin: 2px 0 6px; }
.rcap p { font-size: 15px; }
.drag-hint { top: 10px; }
.lgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px 22px; justify-content: stretch; }
.lframe { height: 100%; max-width: 100%; justify-self: center; }
.lgrid { --cw: 100%; }
.lframe { grid-area: auto; }
.dcol { grid-area: auto; align-self: auto; height: auto; min-height: 150px; pointer-events: auto; }
.dline { display: none; }
.dcard, .dcard[data-side] { position: absolute; left: 0; right: auto; width: 100%; margin: 0; top: 0 !important; transform: none; padding: 0; text-align: left; }
.dcard::before, .dcard[data-side]::before { display: none; }
.dcard[data-side="l"] .dc-p { margin-left: 0; }
.dc-t { font-size: 32px; margin: 6px 0 6px; }
.dc-p { font-size: 15px; max-width: none; }
.dc-spec { display: none; }
.loupe { --d: 84px; }
.pshop { background: #000; opacity: 0; transition: opacity var(--t-2) ease; }
.pshop.in { opacity: 1; }
.ps-grid { display: flex; flex-direction: column; gap: 14px; padding: 12px 20px 18px; height: 100%; }
.ps-slot { display: none; }
.ps-photos { order: -1; display: flex; gap: 8px; padding: 0; flex: 0 0 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.ps-photos::-webkit-scrollbar { display: none; }
.ps-ph { flex: 0 0 64%; scroll-snap-align: center; border-radius: 16px; }
.ps-prod { display: block; }
.ps-prod img { object-position: 50% 50%; }
.ps-model { display: none; }
.ps-info { gap: 10px; max-width: none; flex: 1; min-height: 0; }
.ps-name { font-size: 40px; }
.ps-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.ps-chips, .ps-trust { display: none; }
.ps-sizes button { min-height: 42px; }
.ps-price { font-size: 19px; }
.mani { padding: 72px 0; }
.mani-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mani-list li { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; }
.mk { width: 68px; height: 68px; }
.worn { padding: 80px 0; }
.worn-head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
.worn-grid { grid-template-rows: 340px; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
.wt, .wt-tall { grid-row: auto; scroll-snap-align: center; }
/* reviews: an endless horizontal loop on phones (the cards are cloned once by main.js) */
.reviews-mq { display: block; overflow: hidden; margin: 36px -20px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.reviews { display: flex; width: max-content; gap: 16px; margin-top: 0; padding-right: 16px; animation: rv-loop 52s linear infinite; will-change: transform; }
.reviews .rv { flex: none; width: min(80vw, 330px); opacity: 1 !important; transform: none !important; }
.reviews .rv-clone { display: flex; }
.reviews-mq.is-hold .reviews { animation-play-state: paused; }
.shop { padding: 72px 0; }
.shop-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.gal { grid-template-columns: minmax(0, 1fr); position: static; }
.thumbs { display: none; }
.mi-dots { display: flex; }
.finder { grid-template-columns: 1fr 1fr; }
.finder .btn { grid-column: 1 / -1; }
.fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.world { padding: 80px 0; }
.world-grid { grid-template-columns: minmax(0, 1fr); }
.globe-wrap { width: min(440px, 100%); }
.news { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
.news-form { flex-direction: column; }
.news-form input { flex: none; }
.foot { padding: 64px 0 28px; }
.co { grid-template-columns: minmax(0, 1fr); }
.co-aside { order: -1; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 20px; }
.co-aside-in { position: static; gap: 14px; }
.sum-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; font-size: 14px; }
.co-aside[data-collapsed="1"] .co-aside-body { display: none; }
.co-aside-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 20px; }
.co-main { justify-self: stretch; padding: 28px 20px 72px; }
.f-row, .f-row.three { grid-template-columns: minmax(0, 1fr); }
.co-express { grid-template-columns: minmax(0, 1fr); }
.done-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 960px) {
.co-aside-body { display: flex; flex-direction: column; gap: 18px; }
}
/* =========================================================
STORY (storia.html) — founder's voice, six chapters, never the same layout twice
========================================================= */
.story { background: #000; }
.story-nav { display: flex; gap: 2px; font-size: 14px; }
.story-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; color: var(--mute); transition: color var(--t-1), background var(--t-1); }
.story-nav a:hover { color: var(--ink); }
.story-nav a[aria-current="page"] { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.story .draft { display: inline-flex; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px dashed rgba(255, 179, 138, .7); color: var(--warn); font-size: 10px; letter-spacing: .12em; vertical-align: 1px; }
.story .slot { font-weight: 500; color: var(--ink); background: rgba(255, 179, 138, .1); border-bottom: 1px dashed rgba(255, 179, 138, .8); padding: 0 3px; border-radius: 3px; }
.st-num { font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: .14em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 10px !important; }
.st-h { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -.015em; margin: 14px 0 22px !important; text-wrap: balance; }
.st-h-xl { font-size: clamp(52px, 7vw, 120px); }
.st-text > p:not(.st-num):not(.eye) { color: #CFCBD0; font-size: 18px; line-height: 1.65; max-width: 38ch; margin-bottom: 14px !important; }
.st-ch { position: relative; padding: clamp(96px, 14vh, 160px) 0; border-top: 1px solid var(--line); overflow: hidden; }
/* hero */
.st-hero { position: relative; min-height: calc(100svh - 64px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; margin-top: -64px; padding-top: 64px; }
.st-hero-bg { position: absolute; inset: 0; z-index: -1; }
.st-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .6; }
.st-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .1) 40%, #000 96%), radial-gradient(60% 50% at 20% 100%, rgba(232, 128, 156, .18), transparent 70%); }
.st-hero-in { padding-bottom: 9vh; display: flex; flex-direction: column; gap: 22px; }
.st-title { font-size: clamp(64px, 11vw, 200px); line-height: .86; display: flex; flex-wrap: wrap; gap: 0 .2em; }
.st-a { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; }
.st-b { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.st-down { display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.st-down .ic { width: 16px; height: 16px; }
/* 01 origin: image left, text right */
.st-origin-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.st-img { border-radius: 22px; overflow: hidden; background: #0a0a0a; }
.st-img img { width: 100%; height: 100%; object-fit: cover; }
.st-origin .st-img { aspect-ratio: 4 / 5; }
/* 02 name: a giant chrome word, the placeholder card floats on it */
.st-name .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-word { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(110px, 24vw, 420px); line-height: .8; letter-spacing: -.05em; padding-right: .07em; margin: 18px 0 -0.32em !important; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.st-fill { position: relative; max-width: 520px; padding: 22px 24px; border-radius: 22px; background: var(--glass-fill), rgba(14, 14, 18, .88); box-shadow: var(--glass-shadow); text-align: left; display: flex; flex-direction: column; gap: 8px; border: 1px dashed rgba(255, 179, 138, .6); }
.st-fill .mono { color: var(--warn); }
.st-fill p:last-child { color: #CFCBD0; }
/* 03 path: text left, wide image right */
.st-path-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.st-img-wide { aspect-ratio: 4 / 3; }
/* 04 symbols: three cards */
.st-symbols-head { max-width: 720px; margin-bottom: 48px; }
.st-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-card { display: flex; flex-direction: column; gap: 14px; }
.st-card figure { aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #0a0a0a; }
.st-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--spring); }
.st-card:hover figure img { transform: scale(1.04); }
.st-card-type { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 36%, rgba(255, 255, 255, .13), transparent 70%), var(--glass-fill), #0b0b0d !important; }
.st-card-type span { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-size: clamp(40px, 4vw, 64px); line-height: .95; text-align: center; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.st-card-t { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; }
.st-card p { color: #CFCBD0; font-size: 15.5px; line-height: 1.6; }
/* 05 method: the numbered card */
.st-method-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.st-cert { display: grid; place-items: center; padding: 40px 0; }
.st-cert-in {
position: relative; width: min(420px, 100%); aspect-ratio: 1.586; border-radius: 22px; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between;
background: radial-gradient(90% 80% at 0% 0%, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(0, 0, 0, .5), transparent 60%), var(--glass-fill), #101013;
box-shadow: var(--glass-shadow), 0 40px 80px -30px rgba(0, 0, 0, .9); transform: rotate(-4deg);
}
.st-cert-in::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.st-cert-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-sheen); pointer-events: none; }
.st-cert-no { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(56px, 6vw, 84px); line-height: 1; padding-right: .06em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.st-cert-sub { color: var(--mute); }
.st-cert-qr { position: absolute; right: 26px; bottom: 24px; width: 54px; height: 54px; color: rgba(255, 255, 255, .85); }
/* 06 next: centred, aurora */
.st-next { isolation: isolate; text-align: center; }
.st-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background-size: 160px 160px, auto, auto; background-image: var(--grain), radial-gradient(60% 50% at 50% 110%, rgba(232, 128, 156, .24), transparent 70%), radial-gradient(30% 40% at 85% 10%, rgba(118, 96, 255, .1), transparent 70%); }
.st-next-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.st-next .lead { margin: 0 auto; }
.st-sign { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-size: 44px; margin-top: 24px !important; }
.st-form { width: min(520px, 100%); margin-top: 22px; }
.st-shop { margin-top: 16px; }
@media (max-width: 959px) {
/* sub-page header on phones: keep Shop / Story / Archive reachable, in a compact row */
.legal-nav .wrap { gap: 6px; padding: 0 6px 0 16px; }
.legal-nav .logo { font-size: 20px; }
.story-nav { gap: 0; font-size: 12.5px; margin-left: auto; }
.story-nav a { height: 32px; padding: 0 9px; }
.legal-nav .lang button { min-width: 32px; height: 30px; font-size: 11px; }
.st-origin-in, .st-path-in, .st-method-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.st-path-in .st-img { order: -1; }
.st-cards { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.st-text > p:not(.st-num):not(.eye) { font-size: 16.5px; }
.st-cert-in { transform: rotate(-3deg); }
}
/* story teaser on the home page */
.st-teaser { padding: 40px 0 120px; }
.st-tz { position: relative; display: block; border-radius: 28px; overflow: hidden; min-height: min(78vh, 720px); isolation: isolate; color: var(--ink); }
.st-tz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; z-index: -2; }
.st-tz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 50%); }
.st-tz-copy { position: absolute; left: clamp(24px, 5vw, 72px); bottom: clamp(24px, 6vw, 72px); max-width: 560px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.st-tz-h { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(42px, 5vw, 84px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.st-tz .lead { color: #D8D4D9; }
@media (max-width: 959px) { .st-teaser { padding: 24px 0 80px; } .st-tz { min-height: 560px; border-radius: 22px; } }
/* ---------- shop extras: zoom, wishlist, delivery estimate, back in stock, drop state ---------- */
.mi-btn { position: absolute; top: 14px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); transition: scale var(--t-1) var(--spring), background var(--t-1); }
.mi-btn:active { scale: .92; }
.mi-zoom { right: 66px; }
.mi-wish { right: 14px; }
.mi-wish.on svg { fill: var(--ink); }
.eta { color: var(--mute); font-size: 11.5px; letter-spacing: .06em; }
.ps-foot .eta { color: var(--faint); }
.bis { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); }
.bis-t { color: var(--ink); font-size: 14px; }
.bis .news-form input { height: 48px; }
.bis .btn { min-height: 48px; }
.sizes button.oos, .ps-sizes button.oos { color: var(--faint); background-image: linear-gradient(to top right, transparent calc(50% - .5px), rgba(255, 255, 255, .28) 50%, transparent calc(50% + .5px)), var(--glass-fill-thin); }
.sizes button.oos.on, .ps-sizes button.oos.on { color: #0B0B0C; }
.drop-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px; border-radius: 16px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); font-size: 14px; }
.drop-note .dn-k { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.drop-note .dn-t { font-weight: 600; font-variant-numeric: tabular-nums; }
.drop-note a { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.drop-note-hero { margin-top: 4px; }
.drop-soon [data-action="add"], .drop-soon [data-ps-add], .drop-soon [data-qb-add], .drop-soon .express, .drop-soon .rot-buy, .drop-soon .buybar,
.drop-soldout [data-action="add"], .drop-soldout [data-ps-add], .drop-soldout [data-qb-add], .drop-soldout .express, .drop-soldout .rot-buy, .drop-soldout .buybar { display: none !important; }
.seg-sm button { min-height: 38px; font-size: 13px; }
.chart + .chart { margin-top: 14px; }
.mat { margin-top: 14px; }
.mat div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.mat dt { color: var(--faint); }
.mat dd { margin: 0; color: var(--ink); text-align: right; }
.mat dd.todo { color: var(--warn); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.care { display: flex; flex-direction: column; gap: 10px; }
.care li { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.care-note { color: var(--warn); font-size: 11px; margin-top: 12px; }
/* reviews: fit indicator */
.rv-fit { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; }
.fitbar { position: relative; flex: 0 0 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .15)); }
.fitbar i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #B4B8BF 70%); box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
.rv-fit > span:last-child { color: var(--ink); }
/* bag drawer: delivery estimate, gift, saved for later, help */
.dr-gift { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--mute); cursor: pointer; }
.dr-gift input { width: 18px; height: 18px; margin-top: 1px; accent-color: #F4F1F2; flex: none; }
.dr-gift-msg { width: 100%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--ink); padding: 10px 14px; font: inherit; font-size: 14px; resize: none; }
.dr-gift-msg:focus { outline: none; border-color: rgba(255, 255, 255, .6); }
.dr-saved { padding: 14px 24px 6px; border-top: 1px solid var(--line); }
.sv-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.sv-item img { width: 52px; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 8px; background: #111; }
.sv-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dr-help { align-self: center; font-size: 13px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
/* zoom viewer */
.lb { position: fixed; inset: 0; z-index: 130; background: rgba(0, 0, 0, .94); display: grid; place-items: center; opacity: 0; transition: opacity var(--t-2) ease; }
.lb.open { opacity: 1; }
html.lb-open { overflow: hidden; }
.lb-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: pinch-zoom; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--t-2) var(--spring); cursor: zoom-in; }
.lb-stage.zoomed img { transform: scale(2.2); cursor: zoom-out; }
.lb-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); }
.lb-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--faint); }
/* page transitions between pages of the site (Chrome, Edge, Safari 18.2+; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.logo { view-transition-name: grimz-logo; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.co-gift { color: var(--ink); font-size: 11px; letter-spacing: .06em; margin-top: 12px !important; }
.co-eta { margin-top: 8px !important; }
/* =========================================================
ARCHIVE · VERIFY · ORDERS · HELP
========================================================= */
.sub { background: #000; }
.ar-hero { padding: clamp(80px, 14vh, 140px) 40px 60px; display: flex; flex-direction: column; gap: 22px; }
.ar-drop { padding: 60px 40px 100px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 32px; }
.ar-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.ar-head .st-h { margin: 0 0 6px !important; }
.ar-no { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(80px, 10vw, 160px); line-height: .8; padding-right: .06em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ar-no-dim { opacity: .35; }
.ar-film { position: relative; border-radius: 24px; overflow: hidden; background: #0a0a0a; aspect-ratio: 16 / 9; }
.ar-film video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ar-film figcaption { position: absolute; left: 18px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); color: var(--ink); }
.ar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; grid-auto-flow: dense; gap: 14px; }
.ar-ph { border-radius: 18px; overflow: hidden; background: #0a0a0a; }
.ar-ph img { width: 100%; height: 100%; object-fit: cover; }
.ar-tall { grid-row: span 2; }
.ar-credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.ar-credits div { padding: 14px 0; border-top: 1px solid var(--line); }
.ar-credits dt { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ar-credits dd { margin: 6px 0 0; color: var(--ink); }
.ar-next { padding: 80px 40px 120px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vf-out { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.vf-cert { width: 100%; padding: 10px 0 0; place-items: start; }
.vf-msg { color: var(--ink); max-width: 52ch; }
.vf-bad { color: var(--warn); }
.vf-bad a, .vf-msg a { text-decoration: underline; color: var(--ink); }
.od-out { margin-top: 18px; }
.od-steps { display: flex; flex-direction: column; gap: 0; margin: 8px 0 0 !important; }
.od-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--faint); }
.od-steps li span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); flex: none; }
.od-steps li.done { color: var(--ink); }
.od-steps li.done span { background: radial-gradient(circle at 35% 30%, #FFFFFF, #B4B8BF 70%); box-shadow: 0 0 10px rgba(255, 255, 255, .45); }
.od-steps li:not(:last-child)::after { content: ""; position: absolute; left: 5.5px; top: 30px; height: calc(100% - 18px); width: 1px; background: rgba(255, 255, 255, .14); }
.od-links { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.od-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); color: var(--ink); text-decoration: none !important; }
.od-link small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.od-link .ic { transition: transform var(--t-2) var(--spring); }
.od-link:hover .ic { transform: translateX(4px); }
.faq-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 8px; }
.faq-c { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); color: var(--ink); text-decoration: none !important; }
.faq-c small { display: block; color: var(--mute); font-size: 13px; }
.faq-sla { grid-column: 1 / -1; color: var(--faint); }
.faq-g { margin-top: 40px; }
.faq-h { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif !important; font-style: italic; font-weight: 400 !important; font-size: 34px !important; text-transform: none !important; margin: 0 0 8px !important; }
.faq .acc-b p { margin: 0 0 6px; }
.faq .acc-b a { text-decoration: underline; color: var(--ink); }
@media (max-width: 959px) {
.ar-hero, .ar-drop, .ar-next { padding-left: 20px; padding-right: 20px; }
.ar-head { grid-template-columns: auto minmax(0, 1fr); }
.ar-head .btn { grid-column: 1 / -1; justify-self: start; }
.ar-film { aspect-ratio: 4 / 5; }
.ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
.ar-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-contact { grid-template-columns: minmax(0, 1fr); }
}
.drop-soon .buy .eta, .drop-soldout .buy .eta, .drop-soon .ps-foot .eta, .drop-soldout .ps-foot .eta { display: none; }
.ar-wide { border-radius: 24px; overflow: hidden; background: #0a0a0a; aspect-ratio: 16 / 9; }
.ar-wide img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) { .ar-wide { aspect-ratio: 4 / 3; } }
/* =========================================================
PREMIUM MOTION LAYER
========================================================= */
/* price odometer: tabular digits roll; cents small and raised; € lighter — present, never loud */
.od { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-int, .od-frac { display: inline-flex; }
.od-d { display: inline-block; height: 1.08em; overflow: hidden; }
.od-col { display: block; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.od-col > span { display: block; height: 1.08em; line-height: 1.08em; text-align: center; }
.od-frac, .od-dec { font-size: .56em; transform: translateY(.06em); }
.od-frac .od-d, .od-frac .od-col > span { height: 1.08em; line-height: 1.08em; }
.od-cur { font-weight: 400; opacity: .78; font-size: .78em; margin: .14em .06em 0; }
.od-lit { width: .12em; }
.price .od, .hero-price .od, .ps-price .od { letter-spacing: -.01em; }
.save.pop { animation: savePop .7s var(--spring) both; }
@keyframes savePop { from { opacity: 0; transform: scale(.86); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.badge.pop { animation: badgePop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes badgePop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.piece strong, [data-piece-no] { font-variant-numeric: tabular-nums; }
/* the button confirms by itself */
.btn .b-l, .btn .b-ok { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform var(--t-3) var(--spring), opacity var(--t-2) ease; }
.btn .b-ok { position: absolute; inset: 0; transform: translateY(110%); opacity: 0; pointer-events: none; }
.btn.added .b-l { transform: translateY(-110%); opacity: 0; }
.btn.added .b-ok { transform: none; opacity: 1; }
.btn { overflow: hidden; }
.b-check path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.btn.added .b-check path { animation: drawCheck .5s .18s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
/* one pill glides between the options */
.has-pill { position: relative; }
.has-pill > button { position: relative; z-index: 1; }
.has-pill > button.on { background: transparent !important; box-shadow: none !important; }
.slide-pill {
position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
background: linear-gradient(180deg, #FFFFFF, #E2E3E6); box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(0, 0, 0, .12);
transition: transform var(--t-3) var(--spring), width var(--t-3) var(--spring), height var(--t-3) var(--spring), opacity var(--t-1);
}
.seg > .slide-pill, .ps-views > .slide-pill { border-radius: 999px; }
.sizes > .slide-pill { border-radius: 14px; }
.ps-sizes > .slide-pill { border-radius: 12px; }
/* headings rise line by line */
.lines .ln { display: block; overflow: hidden; padding: 0 .12em .08em 0; margin-bottom: -.08em; }
.lines .ln-in { display: block; transform: translateY(108%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.lines.lines-in .ln-in { transform: none; }
/* photos open like a curtain, then drift */
.js [data-curtain] { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1); }
.js [data-curtain].in { clip-path: inset(0 0 0 0); }
.js [data-curtain] img { scale: 1.18; transition: scale 1.6s cubic-bezier(.16, 1, .3, 1); }
.js [data-curtain].in img { scale: 1.06; }
[data-parallax] { scale: 1.1; will-change: transform; }
.js [data-curtain].in [data-parallax] { scale: 1.1; }
/* signed veil between pages */
.veil {
position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: grid; place-items: center;
transform: translateY(100%);
background: radial-gradient(70% 40% at 50% 0%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, 0) 40%), #050506;
box-shadow: 0 -1px 0 rgba(255, 255, 255, .28), 0 -40px 80px rgba(0, 0, 0, .6);
}
.veil-g {
font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: clamp(96px, 14vw, 180px); line-height: 1; padding: 0 .08em;
background: linear-gradient(100deg, #6E737B 0%, #9DA1A8 30%, #FFFFFF 46%, #E9EBEE 52%, #9DA1A8 66%, #6E737B 100%) 100% 0 / 260% 100%;
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0;
}
.veil.drop { transform: none; transition: transform var(--t-2) cubic-bezier(.7, 0, .3, 1); }
.veil.drop .veil-g { opacity: 1; transition: opacity var(--t-1) .15s; animation: chromeOn .8s .1s cubic-bezier(.4, 0, .2, 1) both; }
.veil.cover { transform: none; transition: none; }
.veil.cover .veil-g { opacity: 1; background-position: 0 0; }
.veil.lift { transform: translateY(-100%); transition: transform var(--t-3) cubic-bezier(.7, 0, .3, 1); }
.veil.lift .veil-g { opacity: 0; transition: opacity var(--t-1); }
html.veil-in::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: #050506; }
/* shared elements during page transitions */
::view-transition-group(story-hero), ::view-transition-group(product) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
/* checkout: the numbered card turns and lands */
.done-cert { perspective: 1400px; padding: 10px 0 18px; }
.cert-flip { width: min(400px, 100%); animation: certIn 1.3s cubic-bezier(.16, 1, .3, 1) .15s both; transform-style: preserve-3d; }
.cert-flip::after { animation: certSheen 1.6s .9s cubic-bezier(.4, 0, .2, 1) both; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 46%, transparent 62%) 160% 0 / 260% 100% no-repeat !important; }
@keyframes certIn { 0% { opacity: 0; transform: rotateY(-120deg) rotateZ(-12deg) translateY(60px) scale(.82); } 45% { opacity: 1; } 100% { opacity: 1; transform: rotateY(0) rotateZ(-4deg); } }
@keyframes certSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
.od-col, .slide-pill, .lines .ln-in, .js [data-curtain], .js [data-curtain] img { transition: none !important; }
.lines .ln-in { transform: none !important; }
.js [data-curtain] { clip-path: none !important; }
.cert-flip, .cert-flip::after, .save.pop, .badge.pop { animation: none !important; }
}
/* safety: if scripts fail, the arriving cover never blocks the page */
html.veil-in::after { animation: veilSafety .01s 2.5s forwards; }
@keyframes veilSafety { to { opacity: 0; visibility: hidden; } }
.ps-views.has-pill { position: absolute; }
@media (max-width: 959px) {
.ps-photos { flex-basis: 38%; }
.ps-info > * { flex-shrink: 0; }
}
/* =========================================================
PREMIUM LAYER — flash test, chrome light, ambient light, thawing photos,
local-currency hint, sounds toggle, end-of-page signature
========================================================= */
/* flash test: a camera flash at night — the reflective panels blaze, the rest falls into the dark */
.flash-btn { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink); background: var(--glass-fill), var(--glass-tint-2); box-shadow: var(--glass-shadow); transition: background var(--t-2) var(--ease-out), color var(--t-2), box-shadow var(--t-2), scale var(--t-1) var(--spring); }
.flash-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.flash-btn .ic { width: 17px; height: 17px; }
.flash-btn:active { scale: .95; }
.flash-btn .f-on, .flash-btn[aria-pressed="true"] .f-off { display: none; }
.flash-btn[aria-pressed="true"] .f-on { display: inline; }
.flash-btn[aria-pressed="true"] { color: #0B0B0C; background: linear-gradient(180deg, #FFFFFF, #E6E7EA); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, .12), 0 0 26px -2px rgba(255, 255, 255, .55); }
.flash-btn[aria-pressed="true"] .ic { fill: currentColor; }
.flash-btn.busy .ic { animation: flashBusy .7s var(--ease-io) infinite alternate; }
@keyframes flashBusy { to { opacity: .3; } }
.mi-flash { top: 16px; left: 14px; }
.ps-flash { top: 14px; left: 14px; }
.ps-prod { position: relative; }
.ps-prod .ps-flash { top: 10px; left: 10px; height: 36px; font-size: 12px; }
.ps-slot .ps-flash { opacity: 0; transform: translateY(-8px); transition: opacity var(--t-3) var(--ease-out) .3s, transform var(--t-3) var(--ease-out) .3s, background var(--t-2), color var(--t-2), box-shadow var(--t-2); }
.pshop.in .ps-slot .ps-flash { opacity: 1; transform: none; }
.flashfx { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 60% at 50% 42%, #FFFFFF, rgba(255, 255, 255, .9) 55%, rgba(236, 240, 255, .78)); opacity: 0; animation: flashPop .62s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes flashPop { 0% { opacity: 0; } 9% { opacity: 1; } 20% { opacity: .96; } 100% { opacity: 0; } }
/* chrome that catches the light (site.js moves the highlight) */
.chrome-live { background-image: linear-gradient(115deg, #9EA2A9 0%, #ECEDEF 16%, #B4B8BF 30%, #FFFFFF 44%, #F4F5F7 50%, #9A9EA5 60%, #E4E6E9 76%, #A8ACB3 100%) !important; background-size: 260% 260% !important; background-position: 50% 50%; }
/* ambient light: fixed, above the page, under every floating control; crossfades between sections */
.amb { position: fixed; inset: 0; z-index: 35; pointer-events: none; }
/* one glow per mood, sized to the edge it comes from (small layers: cheap to blend); hidden ones are not drawn at all */
.amb i { position: absolute; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease-io), visibility 0s linear 1.4s; }
.amb-pink { left: 0; bottom: 0; width: 62vw; height: 56vh; background: radial-gradient(75% 70% at 0% 100%, rgba(232, 128, 156, .14), rgba(232, 128, 156, 0) 70%); }
.amb-cold { right: 0; top: 15vh; width: 48vw; height: 70vh; background: radial-gradient(90% 60% at 100% 50%, rgba(126, 140, 255, .12), rgba(126, 140, 255, 0) 70%); }
.amb-warm { left: 10vw; right: 10vw; bottom: 0; height: 44vh; background: radial-gradient(60% 90% at 50% 100%, rgba(255, 168, 112, .11), rgba(255, 168, 112, 0) 70%); }
.amb[data-on="pink"] .amb-pink, .amb[data-on="cold"] .amb-cold, .amb[data-on="warm"] .amb-warm { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease-io), visibility 0s; }
html.menu-open .amb, html.lock .amb { opacity: 0; }
/* photos that thaw: frosted preview with a slow shimmer, then the picture comes into focus */
img.lq { background-size: 220% 100%, cover; background-position: -120% 0, 50% 30%; background-repeat: no-repeat; animation: lqShine 1.6s var(--ease-io) infinite; }
@keyframes lqShine { to { background-position: 220% 0, 50% 30%; } }
img.lq-thaw { animation: lqThaw .9s var(--ease-out) both; }
@keyframes lqThaw { from { filter: blur(14px) saturate(.7) brightness(1.15); transform: scale(1.03); } to { filter: none; transform: none; } }
/* local currency hint next to the price */
.fx-chip { position: relative; display: inline-flex; }
.fx-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: .04em; color: var(--mute); background: var(--glass-fill-thin); box-shadow: var(--chip-ring); transition: color var(--t-1), box-shadow var(--t-1); }
.fx-btn .ic { width: 13px; height: 13px; opacity: .7; }
.fx-btn:hover, .fx-chip.open .fx-btn { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .2); }
.fx-tip { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 6; width: 260px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--mute); background: var(--glass-fill), rgba(14, 14, 18, .96); box-shadow: var(--glass-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out), visibility 0s linear var(--t-2); }
.fx-tip strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 600; }
.fx-chip.open .fx-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) { .fx-chip:hover .fx-tip, .fx-btn:focus-visible + .fx-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.ps-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
/* sounds toggle (capsule on desktop, menu sheet on phones) */
.sfx-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--mute); transition: color var(--t-1), background var(--t-1); }
.sfx-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.sfx-btn .ic { width: 18px; height: 18px; }
.sfx-btn .s-on, .sfx-btn[aria-pressed="true"] .s-off { display: none; }
.sfx-btn[aria-pressed="true"] .s-on { display: block; }
.sfx-btn[aria-pressed="true"] { color: var(--ink); }
.sfx-row { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14px; color: var(--mute); background: var(--glass-fill-thin); box-shadow: var(--chip-ring); }
.sfx-row .ic { width: 18px; height: 18px; }
.sfx-row .s-on, .sfx-row[aria-pressed="true"] .s-off { display: none; }
.sfx-row[aria-pressed="true"] .s-on { display: block; }
.sfx-row[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 959px) { .nav-cap .sfx-btn { display: none; } }
/* end-of-page signature: a blind-embossed G that gets stamped in chrome */
.endsig { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 56px 0 8px; user-select: none; }
.endsig-g { font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900; font-style: italic; font-size: 68px; line-height: 1; padding-right: .06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .12); transform-origin: 50% 60%; }
.endsig-t { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-size: 26px; line-height: 1; color: var(--ink); clip-path: inset(0 100% 0 0); opacity: 0; }
.endsig.stamped .endsig-g { -webkit-text-stroke: 0; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sigStamp .7s cubic-bezier(.3, 1.4, .5, 1) both; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .25)); }
.endsig.stamped .endsig-t { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out) .35s, opacity .2s .35s; }
@keyframes sigStamp { 0% { transform: scale(1.9) rotate(-8deg); opacity: 0; } 55% { transform: scale(.92) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (max-width: 959px) { .endsig { flex-direction: column; gap: 10px; padding-top: 40px; } .endsig-g { font-size: 56px; } .endsig-t { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) {
.flashfx, img.lq, img.lq-thaw, .endsig.stamped .endsig-g { animation: none !important; }
.endsig.stamped .endsig-t { transition: none; }
.amb i { transition: none; }
}
@media (forced-colors: active) { .chrome-live { background: none !important; -webkit-text-fill-color: CanvasText; } .amb { display: none; } }
/* ---------- rendering budget ----------
The sections after the shop are not laid out or painted until they come close to the screen
("auto" remembers their real height once seen, so anchors and the scrollbar stay right). */
.st-teaser { content-visibility: auto; contain-intrinsic-size: auto 860px; }
.world { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.foot { content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* ---------- accessibility: higher contrast & forced colours (EAA) ----------
"Increase contrast" turns the smoke into solid dark glass: same shapes, readable over anything. */
@media (prefers-contrast: more) {
:root {
--glass-tint: rgba(8, 8, 10, .9); --glass-tint-2: rgba(8, 8, 10, .94);
--mute: #D9D6DA; --faint: #C2BEC3; --line: rgba(255, 255, 255, .32); --line-2: rgba(255, 255, 255, .5);
--chip-ring: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
--glass-edge: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
--glass-edge-thick: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8));
}
.nav-cap, .buybar, .legal-nav .wrap, .co-head .wrap, .msheet, .drawer { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(12, 12, 15); }
.nav-cap::after, .buybar::after, .qb::after { display: none; }
:focus-visible { outline-width: 3px; outline-offset: 2px; }
}
@media (forced-colors: active) {
.nav-cap, .buybar, .drawer, .msheet, .btn, .qb, .cc, .sizes button, .ps-sizes button, .seg button, .bis, .drop-note { border: 1px solid CanvasText; }
.btn-pink { background: ButtonFace; color: ButtonText; }
.logo, .foot-word, .deg, .piece strong { -webkit-text-fill-color: CanvasText; color: CanvasText; background: none; }
}
/* frame-sequence canvas (touch screens): replaces the scrubbed