/* Lifesaver — shared styles.
   One deliberate light look, matched to the campaign imagery: warm white, ink, grey, one type family (Inter). */
:root{
  --hero:#FBFAF8; --paper:#F4F3F0; --studio:#EDECE8; --white:#FFFFFF;
  --band-top:#FAF9F7; --band-bot:#F1F0ED;
  --ink:#0B0E14; --ink-2:#5F6168; --ink-3:#9C9DA2; --line:#E7E5E1; --focus:#2F55D4;
  --signal:#0B0E14; --signal-light:#0B0E14;
  --t-original:#F1F0ED; --t-paisley:#EFEEEB; --t-spikes:#F3F4F5; --t-fur:#F2EEF5; --t-sparkle:#EDF3EF;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--display);
  --mono:var(--display);
  --gutter:clamp(16px,4vw,56px); --ease:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light}
body{margin:0; background:var(--hero); color:var(--ink); font-family:var(--body); font-size:16px; font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"}
a{color:inherit}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:6px}
.wrap{max-width:1320px; margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* labels */
.eyebrow,.tag{font:600 11.5px/1.3 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0}

/* headline system: bold ink line + same-weight grey line */
.h2{margin:0; font-weight:800; line-height:1.02; letter-spacing:-.035em; text-wrap:balance}
.h2 .a{display:block; font-family:var(--display); font-weight:800; font-size:clamp(34px,4.2vw,60px); letter-spacing:-.04em; color:var(--ink)}
.h2 .b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(34px,4.2vw,60px); letter-spacing:-.04em; color:var(--ink-3)}
.lede{color:var(--ink-2); font-size:clamp(16px,1.25vw,18.5px); line-height:1.6; max-width:46ch; margin:0}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding-inline:24px; border-radius:999px; font:600 12.5px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1.5px solid var(--ink); cursor:pointer; white-space:nowrap; transition:transform .2s var(--ease), background .2s, color .2s}
.btn:hover{transform:translateY(-1px)}
.btn.solid{background:var(--ink); color:var(--white)}
.btn.line{background:transparent; color:var(--ink)}
.btn.line:hover{background:var(--ink); color:var(--white)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.textlink{font-size:14px; font-weight:600; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:1px}
section{scroll-margin-top:64px}

/* availability labels: monochrome, no badges */
.status{display:inline-flex; align-items:center; gap:8px; font:600 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; padding:0; background:none; color:var(--ink)}
.status::before{content:""; width:7px; height:7px; border-radius:50%; flex:none}
.status.now{color:var(--ink)}
.status.now::before{background:var(--ink)}
.status.soon{color:var(--ink-2); background:none; box-shadow:none}
.status.soon::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.tbc{font-weight:500; font-size:.82em; letter-spacing:.02em; color:var(--ink-3); margin-left:8px; white-space:nowrap}
h3 .tbc{font-family:var(--body); font-size:12px; letter-spacing:.12em; text-transform:uppercase; vertical-align:2px}
.concept-note{font-size:12.5px; color:var(--ink-3); margin:0}

/* official wordmark (image asset, never set as text) */
.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); flex:none}
.brand .logo{height:15px; width:auto}
footer .brand .logo{height:12px}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(251,250,248,.86); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid transparent}
.nav.line{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:32px; height:64px}
.links{display:flex; gap:32px; list-style:none; margin:0 0 0 auto; padding:0}
.links a{text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2)}
.links a:hover,.links a[aria-current="page"]{color:var(--ink)}
.cart{position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; text-decoration:none}
.cart svg{width:20px; height:20px}
.cart i{position:absolute; top:3px; right:1px; font:600 10px/16px var(--body); font-style:normal; min-width:16px; height:16px; padding-inline:4px; border-radius:8px; background:var(--ink); color:var(--white); text-align:center; font-variant-numeric:tabular-nums}
.menu-btn{display:none; background:none; border:0; width:40px; height:40px; border-radius:50%; cursor:pointer; color:var(--ink)}
.menu-btn svg{width:22px; height:22px}
.sheet{display:none}

/* crops from the real photographs */
.crop{position:relative; overflow:hidden; aspect-ratio:var(--w)/var(--h); background:var(--bg,var(--white))}
.crop .in{position:absolute; width:calc(1122 / var(--w) * 100%); left:calc(var(--x) / var(--w) * -100%); top:calc(var(--y) / var(--h) * -100%); aspect-ratio:1122/1402}
.crop .in img,.crop .in svg{position:absolute; inset:0; width:100%; height:100%}
.crop .in img{mix-blend-mode:multiply}
.full{--x:150;--y:90;--w:820;--h:1230}

/* forms */
.waitlist{display:grid; gap:10px; max-width:460px}
.waitlist label{font-size:13px; font-weight:600}
.waitlist .row{display:flex; gap:8px}
.waitlist input{flex:1 1 auto; min-width:0; height:50px; border-radius:999px; border:1px solid var(--line); padding:0 18px; font:16px var(--body); color:var(--ink); background:var(--white)}
.waitlist input:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:transparent}
.waitlist-note{font-size:12px; color:var(--ink-3); line-height:1.45; margin:0}
.waitlist .msg{font-size:13.5px; color:var(--ink-2); min-height:20px; margin:0}
.waitlist .msg.ok{color:var(--ink)}

/* shared page blocks */
.sec{padding-block:112px}
.sec.paper{background:var(--paper)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:32px; align-items:end}
.crumbs{font-size:13px; color:var(--ink-2); padding-block:18px 0}
.crumbs a{text-decoration:none} .crumbs a:hover{text-decoration:underline}

/* edition tiles */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:56px 0 0}
.tile{display:grid; gap:14px; align-content:start; text-decoration:none}
.tile .crop{border-radius:2px}
.tile .meta{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.tile h3{margin:0; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; line-height:1.15}
.tile p{margin:0; color:var(--ink-2); font-size:14px}
.tile:hover h3{text-decoration:underline; text-underline-offset:3px}

footer{border-top:1px solid var(--line); padding-block:40px; font-size:13px; color:var(--ink-2); background:var(--hero)}
footer .wrap{display:flex; justify-content:space-between; gap:18px 32px; flex-wrap:wrap; align-items:center}
footer nav{display:flex; gap:22px; flex-wrap:wrap}
footer a{text-decoration:none} footer a:hover{text-decoration:underline}

/* subtle reveal for lower-page content (content stays readable if JS never runs) */
.rv{transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.pre{opacity:.25; transform:translateY(18px)}

@media (max-width:1000px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .links{display:none}
  .nav .wrap{gap:4px; height:58px}
  .brand .logo{height:13px}
  .cart{margin-left:auto}
  .menu-btn{display:grid; place-items:center}
  .sheet{position:absolute; top:60px; left:var(--gutter); right:var(--gutter); background:var(--white); border:1px solid var(--line); border-radius:14px; padding:8px; display:grid; z-index:40; box-shadow:0 18px 40px rgba(11,14,20,.08)}
  .sheet[hidden]{display:none}
  .sheet a{padding:14px 16px; text-decoration:none; font-weight:500; border-radius:10px}
  .sec{padding-block:72px}
  .sec-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){ .waitlist .row{flex-direction:column} .tiles{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} .rv.pre{opacity:1; transform:none} }

/* ---------- customer reviews ---------- */
.rw{display:grid; gap:40px}
.rw-banner{margin:0; padding:12px 16px; border:1px dashed var(--ink-3); border-radius:8px; font-size:14px; color:var(--ink-2); background:var(--white)}
.rw-banner b{color:var(--ink); font-weight:600}
.rw-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:32px 64px; align-items:end}
.rw-head{display:grid; gap:18px}
.rw-head .lede b{color:var(--ink); font-weight:600}
.rw-sum{display:grid; gap:22px; padding-top:22px; border-top:1px solid var(--ink)}
.rw-score{display:grid; gap:8px; justify-items:start}
.rw-score .big{font-weight:800; font-size:clamp(40px,4vw,56px); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.rw-basis{font-size:14px; color:var(--ink-2)}
.rw-sum.is-demo .big{color:var(--ink-3)}
.rw-cats{margin:0; display:grid; gap:10px}
.rw-cats div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:center}
.rw-cats dt{font-size:13.5px; color:var(--ink-2)}
.rw-cats dd{margin:0; display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:12px; align-items:center}
.rw-cats .bar{height:2px; background:var(--line); position:relative; display:block}
.rw-cats .bar i{position:absolute; inset:0 auto 0 0; background:var(--ink)}
.rw-cats .v{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}

.stars{position:relative; display:inline-block; line-height:0; white-space:nowrap}
.stars .s-bg,.stars .s-fg{display:flex; gap:2px}
.stars .s-fg{position:absolute; inset:0 auto 0 0; overflow:hidden}
.stars svg{width:15px; height:15px; flex:none}
.stars .s-bg svg{fill:none; stroke:var(--ink-3); stroke-width:1.2; stroke-linejoin:round}
.stars .s-fg svg{fill:var(--ink)}
.stars.lg svg{width:20px; height:20px}

.rw-controls{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; padding-block:14px; border-block:1px solid var(--line)}
.rw-controls .sel{display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2)}
.rw-controls .sel span{font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px}
.rw-controls select{appearance:none; -webkit-appearance:none; height:44px; padding:0 34px 0 14px; border:1px solid var(--line); border-radius:999px; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%230B0E14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px; font:500 14px var(--body); color:var(--ink); cursor:pointer}
.rw-controls .chk{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; color:var(--ink); cursor:pointer}
.rw-controls .chk input{width:18px; height:18px; accent-color:var(--ink); margin:0}
.rw-count{margin-left:auto; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}

.rw-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px}
.rw-card{display:grid; gap:12px; align-content:start; padding-block:28px; border-bottom:1px solid var(--line); min-width:0}
.rw-card h3{margin:4px 0 0; font-weight:700; font-size:19px; letter-spacing:-.02em; line-height:1.25; text-wrap:balance}
.rw-card .body{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6}
.rw-card .body.clamp{display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
.rw-card .more{justify-self:start; background:none; border:0; padding:0; min-height:32px; font:600 13.5px var(--body); color:var(--ink); border-bottom:1.5px solid currentColor; cursor:pointer}
.rw-card .photos{display:flex; gap:8px}
.rw-card .photos img{width:72px; height:72px; object-fit:cover; border-radius:4px}
.rw-card .meta{margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.rw-card .meta .who{color:var(--ink); font-weight:600}
.rw-card .badge{display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.rw-card .badge svg{width:14px; height:14px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rw-card .badge.is-demo{color:var(--ink-3)}
.rw-card .helpful{margin:0; font-size:13px; color:var(--ink-3)}
.rw-card.is-demo{position:relative}
.rw-card .demo-tag{margin:0 0 4px; justify-self:start; font:600 10.5px/1.3 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:5px 8px; border:1px dashed var(--ink-3); border-radius:4px}
.rw-none{grid-column:1/-1; margin:0; padding-block:40px; color:var(--ink-2)}
.rw-nav{display:none}
.rw-foot{display:flex; justify-content:center}
.rw-foot .btn[hidden]{display:none}
.rw-empty{max-width:560px; padding-top:22px; border-top:1px solid var(--line)}
.rw-empty p{margin:0; color:var(--ink-2); font-size:16.5px}
.rw-empty b{color:var(--ink); font-weight:600}

.ready{padding-block:96px; text-align:center; border-top:1px solid var(--line)}
.ready .wrap{display:grid; gap:26px; justify-items:center}
.ready h2{margin:0; font-weight:800; font-size:clamp(34px,4.2vw,60px); letter-spacing:-.045em; line-height:1.02; text-wrap:balance}

@media (max-width:1000px){ .rw-top{grid-template-columns:minmax(0,1fr)} }
@media (max-width:860px){
  .rw{gap:28px}
  .rw-controls{gap:10px 14px}
  .rw-controls .sel{flex:1 1 140px}
  .rw-controls .sel select{flex:1; min-width:0}
  .rw-count{margin-left:0; width:100%}
  .rw-rail{margin-inline:calc(-1 * var(--gutter))}
  .rw-list{display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:86%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain}
  .rw-list::-webkit-scrollbar{display:none}
  .rw-card{scroll-snap-align:start; border:1px solid var(--line); border-radius:12px; padding:24px 22px; background:var(--white)}
  .rw-card .body{font-size:16px}
  .rw-card .meta{font-size:14px}
  .rw-nav{display:flex; justify-content:center; align-items:center; gap:18px; margin-top:16px}
  .rw-nav .nb{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--white); display:grid; place-items:center; cursor:pointer; color:var(--ink)}
  .rw-nav svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .rw-nav .pos{min-width:48px; text-align:center; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
  .ready{padding-block:72px}
}
#reviews{border-top:1px solid var(--line)}

/* ---------- cart panel ---------- */
.cart-panel{position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--hero); border-left:1px solid var(--line); box-shadow:-24px 0 60px rgba(11,14,20,.06); display:grid; grid-template-rows:auto minmax(0,1fr); padding:calc(env(safe-area-inset-top,0px) + 18px) 24px calc(env(safe-area-inset-bottom,0px) + 24px); transform:translateX(100%); transition:transform .25s var(--ease)}
.cart-panel.open{transform:none}
.cp-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--ink)}
.cp-head h2{margin:0; font-weight:800; font-size:22px; letter-spacing:-.03em}
.cp-x{width:44px; height:44px; border:0; background:none; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.cp-x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.cp-body{overflow-y:auto; display:grid; align-content:start; gap:18px; padding-top:6px}
.cp-empty{margin:18px 0 0; color:var(--ink-2)}
.cp-links{display:grid; gap:12px; justify-items:start}
.cp-lines{list-style:none; margin:0; padding:0}
.cp-lines li{display:grid; gap:12px; padding-block:18px; border-bottom:1px solid var(--line)}
.cp-l{display:grid; gap:2px}
.cp-name{font-weight:700; text-decoration:none; letter-spacing:-.01em}
.cp-var{font-size:14px; color:var(--ink); font-weight:500}
.cp-each{font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cp-r{display:flex; align-items:center; gap:14px}
.cp-qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; height:40px}
.cp-qty button{width:38px; height:100%; border:0; background:none; font-size:16px; cursor:pointer; border-radius:999px; color:var(--ink)}
.cp-qty output{min-width:18px; text-align:center; font-variant-numeric:tabular-nums}
.cp-tot{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums}
.cp-rm{border:0; background:none; padding:0; min-height:32px; font:500 13px var(--body); color:var(--ink-2); text-decoration:underline; cursor:pointer}
.cp-sum{display:flex; justify-content:space-between; align-items:baseline; font-size:15px}
.cp-sum b{font-size:20px; font-variant-numeric:tabular-nums}
.cp-go{width:100%}
.cp-msg{margin:0; font-size:13.5px; color:var(--ink-2); min-height:20px}

/* ---------- homepage product lineup ---------- */
.lineup{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.pcard{display:grid; gap:18px; text-decoration:none; color:var(--ink)}
.pcard .ph{aspect-ratio:1/1; background:var(--hero); display:grid; place-items:center; overflow:hidden}
.pcard .ph img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s var(--ease)}
.pcard:hover .ph img{transform:scale(1.02)}
.pcard .pm{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:baseline; padding-top:16px; border-top:1px solid var(--line)}
.pcard h3{margin:0; font-weight:800; font-size:clamp(22px,2vw,28px); letter-spacing:-.035em; line-height:1.1}
.pcard .tl{margin:0; grid-column:1; color:var(--ink-2); font-size:15.5px}
.pcard .pr{grid-column:2; grid-row:1; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums}
.pcard .go{grid-column:1/-1; margin-top:8px; justify-self:start}
@media (max-width:760px){ .lineup{grid-template-columns:minmax(0,1fr)} }
.cart-panel[hidden]{display:none}
.pcard .ph img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent); mask-composite:intersect}

/* ---------- Shop dropdown (desktop) ---------- */
.links .has-sub{position:relative}
.links .sub{position:absolute; top:calc(100% + 14px); left:-18px; min-width:250px; list-style:none; margin:0; padding:8px; background:var(--hero); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px rgba(11,14,20,.07); display:grid; opacity:0; visibility:hidden; translate:0 -4px; transition:opacity .18s, translate .18s, visibility .18s}
.links .has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:16px}
.links .has-sub:hover .sub,.links .has-sub:focus-within .sub{opacity:1; visibility:visible; translate:0 0}
.links .sub a{display:flex; justify-content:space-between; gap:18px; padding:11px 12px; border-radius:8px; color:var(--ink); font-weight:500}
.links .sub a span{color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums}
.links .sub a:hover{background:var(--paper)}
.sheet a.subl{padding-left:32px; font-weight:400; color:var(--ink-2)}

/* ---------- finish selector (shared: PDP, homepage, shop) ---------- */
.fsel{display:grid; gap:12px}
.fsel-label{margin:0; font-size:14px; color:var(--ink-2)}
.fsel-label b{color:var(--ink); font-weight:600; margin-left:4px}
.fsel-row{display:flex; gap:10px; flex-wrap:wrap}
.fsel-opt{position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; display:grid; place-items:center}
.fsel-opt i{width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(11,14,20,.14), inset 0 1px 1px rgba(255,255,255,.35); transition:transform .25s var(--ease)}
.fsel-opt::after{content:""; position:absolute; inset:2px; border-radius:50%; box-shadow:0 0 0 1px transparent; transition:box-shadow .2s}
.fsel-opt:hover i{transform:scale(1.05)}
.fsel-opt[aria-checked="true"]::after{box-shadow:0 0 0 1.5px var(--ink)}
.fsel-opt:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* ---------- release countdown (shared) ---------- */
.countdown{display:inline-block; font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums; line-height:1.4}
.countdown .cd-units{display:inline-flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:4px}
.countdown .cd-u{white-space:nowrap}
.countdown b{display:inline-block; min-width:2ch; text-align:right; color:var(--ink); font-weight:600; font-size:1.2em; letter-spacing:-.01em}
.countdown .cd-dot{color:var(--ink-3)}
.countdown .cd-live{display:none; color:var(--ink); font-weight:600}
.countdown.is-live .cd-units{display:none}
.countdown.is-live .cd-live{display:inline}
.countdown.lg{font-size:16px}
.countdown.lg b{font-size:1.75em; font-weight:700; letter-spacing:-.03em}

/* ---------- Original finish cards (homepage + shop) ---------- */
.fin-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,28px)}
.fin-card{display:grid; gap:16px; text-decoration:none; color:var(--ink)}
.fin-card .ph{aspect-ratio:1/1; background:var(--paper); border-radius:4px; overflow:hidden; display:grid; place-items:center}
.fin-card .ph img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .8s var(--ease)}
.fin-card:hover .ph img{transform:scale(1.025)}
.fin-card .fm{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.fin-card h3{margin:0; font-weight:700; font-size:clamp(19px,1.6vw,22px); letter-spacing:-.025em; display:flex; align-items:center; gap:10px}
.fin-card h3 i{width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(11,14,20,.14); flex:none}
.fin-card .pr{font-weight:500; font-size:16px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.fin-card .go{font-size:13.5px; font-weight:600; color:var(--ink); justify-self:start; border-bottom:1.5px solid transparent; transition:border-color .2s}
.fin-card:hover .go{border-bottom-color:currentColor}
@media (max-width:760px){
  .fin-cards{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:76%; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); scrollbar-width:none}
  .fin-cards::-webkit-scrollbar{display:none}
  .fin-card{scroll-snap-align:start}
}

/* ---------- upcoming release block (homepage + shop) ---------- */
.upnext{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:center}
.upnext figure{margin:0}
.upnext figure img{width:100%; height:auto; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent); mask-composite:intersect}
.upnext .txt{display:grid; gap:16px; justify-items:start}
.upnext h2,.upnext h3{margin:0; font-weight:800; font-size:clamp(28px,2.8vw,42px); letter-spacing:-.04em; line-height:1.04}
.upnext .sub{margin:0; color:var(--ink-2); font-size:17px}
.upnext .when{margin:6px 0 0; padding-top:16px; border-top:1px solid var(--line); width:100%; display:grid; gap:8px}
.upnext .when .d{font-weight:600; font-size:15px; color:var(--ink)}
.upnext .fine{margin:0; font-size:13px; color:var(--ink-3)}
@media (max-width:860px){ .upnext{grid-template-columns:minmax(0,1fr); gap:20px} .upnext figure{margin-inline:calc(-1 * var(--gutter))} }

/* nav: secondary detail in Shop menu */
.links .sub a em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); font-weight:400; margin-top:1px}
.links .sub{min-width:290px}
.links .sub a b{font-weight:500; display:block}
@media (max-width:420px){ .countdown{font-size:14px} .countdown .cd-units{column-gap:6px} .countdown.lg b{font-size:1.3em} }
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){ .tiles.three{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} .tiles.three .tile h3{font-size:16px} }