/* Grail Call is deliberately a single dark "HUD" theme. Every color is set explicitly. */
:root{
  color-scheme:dark;
  --bg:#05060A; --bg2:#0B0D14; --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --ink:#F3F5FA; --ink2:#A9B0BE; --ink3:#6C7382;
  --v:#7B61FF; --c:#22D3EE; --grad:linear-gradient(100deg,#7B61FF 0%,#22D3EE 100%);
  --hot:#FF4D2E; --good:#35E0A0; --warn:#FFB020; --rumor:#C58BFF;
  --plate:#F4F4F1;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --hud:"Chakra Petch",ui-monospace,Consolas,monospace;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(900px 500px at 12% -10%,rgba(123,97,255,.22),transparent 60%),
   radial-gradient(800px 500px at 100% 0%,rgba(34,211,238,.14),transparent 60%),
   linear-gradient(var(--bg),var(--bg2));}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
select option,select optgroup{background-color:#0B0D14;color:#F3F5FA}   /* the open list is the browser's own and defaults to white: the light text inherited from the select was invisible on it (sign-up "How did you hear", Oct 9 2026); solid colors because --panel is see-through */
:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.wrap{max-width:1280px;margin:0 auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}
.hud{font-family:var(--hud);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font:600 11px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.eyebrow b{color:var(--c);font-weight:700}
h1,h2,h3,h4{margin:0;font-family:var(--display);line-height:.98;text-wrap:balance}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

body{position:relative}

/* ---------- top bar ---------- */
/* the strip keeps its 30 px from the start: its text arrives with the data, and it used to grow 21 -> 30 px and move the page */
.ticker{height:30px;border-bottom:1px solid var(--line);background:rgba(5,6,10,.8);overflow:hidden;white-space:nowrap;font:600 11px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ticker-track{display:inline-flex;gap:44px;padding:9px 0;animation:tick 80s linear infinite}
.ticker-track span{display:inline-flex;gap:10px;align-items:center}
.ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot)}
.ticker-track b{color:var(--ink)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(5,6,10,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:22px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-img{width:52px;height:52px;border-radius:12px;display:block;box-shadow:0 0 22px rgba(34,120,255,.45);transition:transform .2s}
.logo:hover .logo-img{transform:rotate(-3deg) scale(1.04)}
/* Stan's graffiti banner (transparent background) in the header */
.logo-banner{height:54px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(34,120,255,.35));transition:transform .2s}
.logo:hover .logo-banner{transform:scale(1.03)}
@media (max-width:560px){.logo-banner{height:40px}}
/* Full-width banner across the top of every page (Stan). The small header logo only shows once it scrolls away. */
.hero-banner{display:block;width:100%;line-height:0;background:radial-gradient(ellipse at center,rgba(34,120,255,.14),transparent 70%)}
/* Oct 27 2026 (Stan): the banner is his graffiti-logo video, silent. The clip's own dark wall fades out at its edges so it
   sits on the page like the old transparent logo did (two fades laid over each other: left/right and top/bottom). */
.hero-banner video,.hero-banner .hero-still{display:block;width:100%;height:auto;aspect-ratio:1024/420;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect}
/* Oct 28 2026 (Stan: "why is the banner a play option now and it stopped working"): a phone that blocks autoplay (an iPhone in Low
   Power Mode, Data Saver) paints its own big play button over a video it won't start. The banner is a picture that moves, never a
   player: the browser's play button and controls stay hidden, and the poster (the finished logo) shows until the clip can run. */
.hero-banner video::-webkit-media-controls,
.hero-banner video::-webkit-media-controls-enclosure,
.hero-banner video::-webkit-media-controls-panel,
.hero-banner video::-webkit-media-controls-play-button,
.hero-banner video::-webkit-media-controls-overlay-play-button,
.hero-banner video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0;pointer-events:none}
/* Same day, second try: hiding Safari's button with CSS did not reach Stan's phone web pages. So when a browser refuses to play
   the clip, the video leaves the page altogether (its play button goes with it) and the same picture, the poster, stands in at
   the same size and with the same faded edges (.hero-blocked is put on the banner by the script below; it comes off the moment
   the clip really plays). A phone that allows the clip never sees the picture; one that doesn't never sees a play button. */
.hero-banner .hero-still{display:none}
.hero-banner.hero-blocked video{display:none}
.hero-banner.hero-blocked .hero-still{display:block}
/* Oct 2 2026 review: on a laptop the full-width banner alone took 400-600 px before a single shoe showed. The logo
   stays, at a size that leaves the first screen for shoes; phones keep it edge to edge. */
/* Oct 4 2026 (GTmetrix C): max-height alone left the logo 0 px tall until the file arrived, then it pushed the whole page
   down 120 px. A set height keeps its place from the first paint (the width comes from the img's width/height). */
@media (min-width:761px){.hero-banner{padding:10px 16px 4px}.hero-banner video,.hero-banner .hero-still{width:auto;height:240px;max-width:100%;margin:0 auto}}
.foot-contact a{color:var(--c);font-weight:700}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mcard .plate{position:relative}
.mcard h3 em{font-style:normal;color:var(--c)}
.mcard-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mcard-btns .btn{flex:1 1 auto;justify-content:center}
/* A shoe card's buttons in three tiers (Stan, Oct 10 2026: "find a way to better organize the buttons"): 1 the main action across the card,
   2 where to buy, in equal columns (eBay lit, Stan's Oct 6 rule: outlined in the site's cyan so the main action stays the loudest),
   3 what you do with the pair: Hunting, I own it and the vote, one quiet row. */
.stock-rest{display:contents}.stock-rest[hidden]{display:none}
.mcard-acts{display:grid;gap:8px;margin-top:auto;padding-top:10px}   /* pinned to the card's bottom: a row of cards ends level */
.mact-main{display:grid;gap:6px}
.mact-main:empty{display:none}
.mact-main .btn{width:100%}
.mact-main.stores{grid-template-columns:repeat(2,minmax(0,1fr))}   /* a pair in stock: the first store across the card, the rest two to a row */
.mact-main.stores .btn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:34px}
.mact-main.stores .btn:first-child,.mact-main.stores .btn.snkrs{grid-column:1/-1}
.mact-buy{display:flex;gap:6px}
.mact-buy .btn{flex:1 1 0;justify-content:center}.mact-buy .btn.buy-more{flex:0 0 auto;padding:0 8px}
.mact-buy .btn{height:34px;padding:0 6px;font-size:11px;min-width:0;white-space:nowrap}
.mact-buy .btn.primary{background:rgba(34,211,238,.12);border:1px solid var(--c);color:var(--c);box-shadow:none}
.mact-buy .btn.primary:hover{background:rgba(34,211,238,.22)}
.mact-me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:stretch}
/* .btn.sm sits later in the sheet, so these need .btn.sm to win (Nov 5 2026, Stan: "✓ In my collection" ran out of its button on a phone).
   The label may wrap to two lines inside its own box; it never spills past the border. */
.mact-me .btn,.mact-me .btn.sm{height:auto;min-height:32px;padding:4px 6px;font-size:10.5px;letter-spacing:.06em;line-height:1.15;min-width:0;background:transparent;color:var(--ink2);white-space:normal;text-align:center;overflow-wrap:anywhere;gap:4px}
.mact-me .item-share.btn.sm{min-height:30px}
.mact-me .vote{align-self:center}
.mact-me .btn:hover{color:var(--ink);background:var(--panel2)}
.mact-me .vote{justify-self:end}
/* Archive rows: where to buy on one line, what you do with the pair under it, both on the right (Oct 10 2026) */
.ar-acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ar-buy,.ar-me{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.ar-me .btn{background:transparent;color:var(--ink2)}
.ar-me .btn:hover{color:var(--ink);background:var(--panel2)}
@media (max-width:640px){.ar-acts{align-items:stretch}.ar-buy,.ar-me{justify-content:flex-start}}
/* LEGO drops (Oct 4 2026): no photo yet, so the plate is a plain brick-red block with the set number */
.mcard .plate.lego-plate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:4/3;background:linear-gradient(135deg,#d01012,#8c0a0c);color:#fff;border-radius:12px}
.lego-plate b{font:800 34px/1 var(--hud);letter-spacing:.14em;color:#fff}.lego-plate span{color:#fff;font:700 13px/1 var(--hud);letter-spacing:.2em;opacity:.85}
.lego-when,.lego-bits,.lego-fact,.lego-src{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}.lego-when b{color:var(--ink)}
.lego-src{font-size:12px;color:var(--ink3)}.lego-src a{color:var(--ink3);text-decoration:underline}
.col-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.col-stats>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.col-stats b{font:800 24px/1 var(--display)}.col-stats small{color:var(--ink3);font-size:12px}
.col-list{display:flex;flex-direction:column;gap:12px}
.col-row{display:grid;grid-template-columns:140px 1fr minmax(220px,300px);gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.col-row.col-hit{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset}
.col-row .plate{aspect-ratio:1;border-radius:12px;overflow:hidden}
.gh-vault{padding:18px 20px;margin-bottom:16px;display:grid;gap:12px}
.gh-vault h3{margin:0;font-size:18px}
.gh-vault p{margin:0;color:var(--ink2);line-height:1.5}
.gh-vsw{display:grid;gap:8px}
.gh-vbtns{display:flex;gap:10px;flex-wrap:wrap}
.gh-vbtns .btn{flex:1 1 200px;justify-content:center}
.col-main b{display:block;font:800 17px/1.2 var(--display)}.col-main small{color:var(--ink3)}
.col-fields{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:flex-end}
.col-fields label{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.col-fields input{width:130px;max-width:100%}   /* "Pay up to" ran past a phone's edge at its default width */
.col-fields select,.col-fields input{background:var(--bg2,#0b0d14);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;min-width:92px}
.col-worth{display:flex;flex-direction:column;gap:2px;margin:6px 0}.col-worth small{color:var(--ink3)}
.col-open{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;font:inherit;color:inherit;background:transparent}
.col-open .col-buy-tag{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 6px;border-radius:8px;background:rgba(5,6,10,.82);color:#fff;font:700 10px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.col-open:hover .col-buy-tag,.col-open:focus-visible .col-buy-tag{background:var(--c);color:#05060A}
.col-name{display:block;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:800 17px/1.2 var(--display)}
.col-name:hover,.col-name:focus-visible{color:var(--c);text-decoration:underline}
.col-buy{width:100%;justify-content:center;margin:2px 0 8px}
.col-also{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.col-also small{color:var(--ink3)}.col-also.warn small{color:#ff8a8a}
.col-also label{display:flex;align-items:center;gap:6px;font-size:13px}.col-also select{background:var(--bg2,#0b0d14);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font:inherit}
.col-twins{padding:14px 18px;margin-bottom:16px;border-color:var(--good)}.col-twins p{margin:6px 0 0;color:var(--ink2)}
@media (max-width:760px){.col-row{grid-template-columns:96px 1fr}.col-side{grid-column:1/-1}.col-stats b{font-size:19px}}
/* Stan: every page tells people this was made by sneakerheads for sneakerheads */
.tagline{display:flex;align-items:center;justify-content:center;gap:16px;padding:11px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(123,97,255,.10),rgba(5,6,10,.6) 35%,rgba(5,6,10,.6) 65%,rgba(34,211,238,.10))}
.tagline p{margin:0;display:flex;align-items:center;gap:12px;font:700 13px/1.2 var(--hud);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.tagline i{font-style:normal;font-size:11px;color:var(--c);text-shadow:0 0 10px rgba(34,211,238,.8)}
.tl-line{flex:1;max-width:190px;height:1px;background:linear-gradient(90deg,transparent,rgba(123,97,255,.9))}
.tl-line.r{background:linear-gradient(90deg,rgba(34,211,238,.9),transparent)}
@media (max-width:560px){.tagline{gap:8px;padding:9px 10px}.tagline p{font-size:10px;letter-spacing:.12em;gap:7px}.tl-line{max-width:40px}}
header.top .logo{transition:opacity .2s,width .2s}
body.banner-on header.top .logo{opacity:0;width:0;overflow:hidden;pointer-events:none}
@media (max-width:560px){.logo-word{display:none}}
.logo-word{font:900 21px/1 var(--display);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.live{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.live.on{color:var(--good);border-color:rgba(53,224,160,.35)}
.live.on i{background:var(--good);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(53,224,160,.6)}100%{box-shadow:0 0 0 9px rgba(53,224,160,0)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font:700 13px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.btn:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.btn.primary{border:0;background:var(--grad);color:#05060A;box-shadow:0 8px 30px -8px rgba(123,97,255,.7)}
.btn.hot{border:0;background:var(--hot);color:#fff;box-shadow:0 8px 30px -8px rgba(255,77,46,.8)}
.btn.snkrs{border:0;background:#f4f5f8;color:#05060A}.btn.snkrs:hover{background:#fff}   /* Open in SNKRS: Nike's own black and white */
.btn.sm{height:34px;padding:0 12px;font-size:11px;border-radius:10px}
/* Share menu (Oct 9 2026): a small menu under the Share button; a bottom sheet on phones */
.share-menu{position:absolute;z-index:69;min-width:210px;padding:6px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);box-shadow:0 12px 40px rgba(0,0,0,.55);display:flex;flex-direction:column}
.share-menu a,.share-menu button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--ink);font:700 14px/1 var(--body);text-align:left;cursor:pointer;text-decoration:none}
.share-menu a:hover,.share-menu button:hover,.share-menu a:focus-visible,.share-menu button:focus-visible{background:var(--panel2);outline:none}
.share-menu small{margin-left:auto;padding-left:14px;font:600 10px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.share-n{margin-left:10px;vertical-align:middle}
.btn.buy-more{flex:none;color:var(--ink2)}
.buy-menu-h{margin:0;padding:10px 14px 6px;font:700 10px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.buy-menu .buy-menu-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--c)}
@media (max-width:560px){.share-menu{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));z-index:200}}
.btn.ghost{background:transparent}
/* A permanent entry to existing size/alert setup, beside the Home/page menu. */
.size-alerts-btn{flex-shrink:0;min-height:40px;border-color:rgba(34,211,238,.55);background:linear-gradient(110deg,rgba(123,97,255,.2),rgba(34,211,238,.14));color:var(--ink);box-shadow:0 0 12px rgba(34,211,238,.09)}
.size-alerts-btn:hover{border-color:var(--c);background:rgba(34,211,238,.2)}
.size-alerts-btn:focus-visible{outline:2px solid var(--c);outline-offset:3px}
header.top .menu-btn{margin-right:0}
@media(max-width:700px){
  header.top .topin{flex-wrap:wrap}
  header.top .top-right{flex-basis:100%;justify-content:flex-end}
  header.top .logo{display:none} /* The banner and Home menu retain home navigation. */
}
.sizes-btn b{font-family:var(--hud);font-size:11px;padding:3px 8px;border-radius:999px;background:var(--grad);color:#05060A}
@media (max-width:1020px){.topin{gap:10px}}
/* One Menu for every page, on every screen (Stan, Oct 4 2026: "merge all our internal pages into one single drop down
   that drops to two rows sideways"): the bar is the logo, the Menu button (the current page's name, plus a badge for new
   restocks and raffles) and the account buttons. The dropdown is a grid of tiles: two rows across on a laptop
   (grid-auto-flow: column), three across on a phone (no sideways scrolling: Stan's rule). It replaced the laptop's
   inline tabs + More (Oct 2-3 2026) and the phone's quick-link row, which cost a whole extra line at the top. */
.topin{flex-wrap:nowrap;padding-block:8px;min-height:56px}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:700 13px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-right:auto;transition:border-color .15s,color .15s}
.menu-btn .chev{transition:transform .2s;opacity:.7}
.menu-btn .badge{display:inline-block;min-width:18px;padding:2px 5px;border-radius:999px;background:var(--hot);color:#fff;font-size:10px;text-align:center}
body.menu-open .menu-btn{border-color:var(--c);color:var(--c)}
body.menu-open .menu-btn .chev{transform:rotate(180deg)}
.tabs{display:none;position:absolute;left:12px;right:12px;top:100%;margin:6px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px;border-radius:16px;border:1px solid var(--line2);background:rgba(11,13,20,.98);box-shadow:0 18px 40px -10px rgba(0,0,0,.8);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:40}
body.menu-open #alertHost{display:none}   /* a restock pop-up must not sit on the open menu */
body.menu-open .tabs.main{display:grid}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:74px;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font:600 11px/1.15 var(--hud);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--ink2);transition:border-color .15s,transform .15s}
.tabs a i{font-style:normal;font-size:22px;line-height:1}
/* a grail's photo in place of an emoji (Stan, Oct 27 2026: "get rid of the emojis and add a grail for the photo instead"): Jordans, Dunk Low / High, SB Dunk Low / High, Foamposite, ASICS, Travis Scott, Ewing; img/menu/ is made by tools/menu_photos.py */
.tabs a i.ph{display:block;width:56px;height:38px;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.tabs a i.ph img{display:block;width:100%;height:100%}
.tabs a:hover{color:var(--ink);border-color:var(--line2);transform:translateY(-1px)}
.tabs a[aria-current="page"]{color:var(--ink);border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset,0 0 18px rgba(34,211,238,.25)}
.tabs .badge{position:absolute;top:6px;right:6px;min-width:18px;padding:2px 5px;border-radius:999px;background:var(--hot);color:#fff;font-size:10px;text-align:center}
header.top{position:sticky}
header.top .topin{position:relative}
@media (min-width:1021px){
  .topin{gap:16px}
  header.top .logo-banner{height:44px}
  #menuLabel{max-width:none}
  .tabs{left:0;right:0;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:none;grid-auto-columns:minmax(0,1fr);gap:8px;padding:12px;padding-bottom:12px;max-height:none}
  .tabs a{min-height:80px;font-size:11.5px}
}
/* Phones (Stan, Sep 29 2026: "when scrolling from the top downwards everything shrinks"): once the big banner scrolled away
   the small logo joined the header, the row (logo + Menu + Log in + My sizes) came out ~470px on a 375px phone, and Safari
   zoomed the whole page out to fit it. The header row may never be wider than the screen: it shrinks instead. */
html,body{max-width:100%;overflow-x:clip}
.links-page{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-block:8px 30px}
.links-tag{text-align:center;color:var(--ink2);margin:0 0 10px;font-weight:600}
.lnk{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);transition:transform .15s,border-color .15s}
.lnk:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.3)}
.lnk.hot{background:var(--grad);color:#05060A;border:0}.lnk.hot small{color:#05060A;opacity:.8}
.lnk-i{font-size:24px;text-align:center}.lnk b{display:block;font:800 16px/1.2 var(--display)}.lnk small{color:var(--ink2);font-size:13px}
.lnk-go{font:700 18px/1 var(--hud);opacity:.7}
.links-next{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ln-card{display:flex;flex-direction:column;gap:6px;color:var(--ink)}.ln-card .plate{aspect-ratio:1;border-radius:12px;overflow:hidden}
.ln-card b{font:700 12px/1.25 var(--body)}.ln-card small{color:var(--ink3);font-size:11px}
.links-posted{grid-template-columns:repeat(3,minmax(0,1fr))}.links-posted .ln-buy{margin-top:2px;text-align:center;justify-content:center;font-size:11px;padding:7px 4px;letter-spacing:.04em}
.links-social{text-align:center;margin-top:18px;color:var(--ink3)}.links-social a{color:var(--c);font-weight:700}
.topin{min-width:0}
.menu-btn{flex-shrink:0}   /* never crushed: when it was allowed to shrink it collapsed to a 22px sliver and its badge and arrow spilled over the Vault button (Oct 12 2026) */
#menuLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30vw;display:inline-block;vertical-align:bottom}
.top-right{min-width:0}
@media (max-width:560px){
  .topin{gap:8px}
  .top-right{gap:6px}
  .sizes-btn.has-sizes .sz-lbl{display:none}   /* the badge alone says which sizes are pinned */
  .sizes-btn:not(.has-sizes) b{display:none}
  .sizes-btn:not(.has-sizes) .sz-lbl{font-size:0}.sizes-btn:not(.has-sizes) .sz-lbl::after{content:"Sizes";font-size:11px}
  .top-right .btn.sm{padding:0 10px}
  .menu-btn{padding:0 10px;gap:6px}
}
@media (max-width:400px){ .logo-banner{height:32px} #menuLabel{max-width:22vw} }
/* The bar fits itself (Stan, Oct 12 2026, a phone screenshot scrolled past the banner: "it gets all pushed together"). Once the small logo
   joins the bar it holds logo + Menu + Vault + Account + sizes, ~400px of buttons in 343px: the Menu button, the only piece allowed to
   shrink, became a 22px sliver, its badge and arrow painted over VAULT and the sizes chip ran off the screen. Now nothing shrinks; fitTabs()
   measures the row and, only while it is too wide, adds these classes to .topin one at a time in this order: the sizes chip says "10.5 +1",
   the Menu drops its page name (the burger and the badge stay, the name stays for screen readers), a signed-in Account becomes an icon ("Log in" keeps its
   words: it is the sign-up button), the logo gets smaller with the spacing a little tighter, last the logo goes (the Menu and the banner at the top still link Home). A wide screen gets none of them. */
.sizes-btn .sb-short{display:none}
.topin.fit-label .menu-btn{position:relative;width:40px;padding:0;justify-content:center}
.topin.fit-label #menuLabel,.topin.fit-label .menu-btn .chev{position:absolute;width:1px;height:1px;max-width:none;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topin.fit-label .menu-btn .badge{position:absolute;top:-7px;right:-7px;min-width:0;padding:2px 5px;border:2px solid #05060A;line-height:1.1}
.topin.fit-sizes .sizes-btn .sb-long{display:none}
.topin.fit-sizes .sizes-btn .sb-short{display:inline}
.topin.fit-acct #acctBtn.in{width:40px;padding:0;font-size:0;letter-spacing:0}
.topin.fit-acct #acctBtn.in::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M3.5 21c0-4.6 3.8-8 8.5-8s8.5 3.4 8.5 8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M3.5 21c0-4.6 3.8-8 8.5-8s8.5 3.4 8.5 8z'/%3E%3C/svg%3E") center/contain no-repeat}
.topin.fit-tight{gap:6px}
.topin.fit-tight .logo-banner{height:26px}
.topin.fit-tight .vault-btn{padding:0 9px}
.topin.fit-tight .top-right .btn.sm:not(#acctBtn){padding:0 8px}
.topin.fit-logo .logo{display:none}

/* ---------- common ---------- */
.loading{display:flex;align-items:center;gap:10px;padding:28px 24px;color:var(--ink2);font:600 13px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase}
/* The loading line sits inside the page area, so the first draw replaces it without moving anything; until then the
   footer waits below the screen instead of jumping away when the page fills in (Oct 4 2026, layout shift). */
#view{display:flow-root}   /* a page's first margin stays inside: Home's strip margin used to push the whole page area down 9 px on arrival */
#view > .loading{padding-inline:0}
#view:has(> #loading){min-height:100vh}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--c);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stale-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:8px 16px;background:rgba(255,176,32,.12);border-bottom:1px solid rgba(255,176,32,.4);color:var(--warn);font:600 12px/1.3 var(--hud);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.alert-top button{min-width:40px;min-height:40px}
@media (max-width:760px){.sec-head{flex-wrap:wrap}}
main{min-height:70vh;padding-block:26px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:clamp(34px,5vw,64px);font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em}
.page-head p{margin:10px 0 0;color:var(--ink2);max-width:62ch}
.sec{margin-top:44px}
.cv{content-visibility:auto;contain-intrinsic-size:auto 600px;overflow-clip-margin:28px}
.cv-wait{content-visibility:hidden}   /* released one section per frame right after Home is drawn (cvRelease) */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;font-stretch:115%;text-transform:uppercase}
.sec-head a{font:600 12px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(6px)}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.pill.confirmed{color:var(--good);border-color:rgba(53,224,160,.35);background:rgba(53,224,160,.08)}
.pill.expected{color:var(--warn);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.08)}
.pill.rumored{color:var(--rumor);border-color:rgba(197,139,255,.35);background:rgba(197,139,255,.08)}
.trust{display:block;margin-top:6px;font:600 11px/1.3 var(--hud);letter-spacing:.05em;color:var(--ink3)}
.trust.t-official,.trust.t-collaborator{color:var(--good)}.trust.t-retailer,.trust.t-retailers{color:var(--c)}.trust.t-rumor{color:var(--rumor)}
.src-list{list-style:none;padding:0;margin:8px 0 18px}.src-list li{padding:7px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08))}.src-list small{color:var(--ink3);margin-left:6px}
.news-update{border-left:3px solid var(--c);padding:6px 0 6px 12px;color:var(--ink2,inherit)}
.pill.pulled,.pill.delayed{color:#ff8a8a;border-color:rgba(255,107,122,.4);background:rgba(255,107,122,.08)}
.pill.released,.pill.soldout,.pill.news{color:var(--ink2);border-color:var(--line2);background:var(--panel)}
.pill.restock,.pill.live{color:#fff;background:var(--hot);box-shadow:0 0 14px rgba(255,77,46,.5)}
.pill.new,.pill.instock{color:#05060A;background:var(--good)}
.pill.collab{color:#05060A;background:var(--c);box-shadow:0 0 14px rgba(34,211,238,.45)}
.pill.big{color:#05060A;background:var(--warn)}
.pill.supreme{color:#fff;background:#DA2128;letter-spacing:.08em}
.sz-cap{font:600 10.5px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:6px 0 4px}
.sz span.back{outline:1px solid var(--good);color:var(--good)}
.deal{border-radius:14px}
.deal.open{background:var(--panel);outline:1px solid var(--line2)}
.deal-sizes{padding:4px 14px 14px}
.deal-size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.deal-size-grid a{display:grid;place-items:center;height:40px;border-radius:10px;border:1px solid var(--line2);font:700 13px/1 var(--hud);color:var(--ink);background:var(--bg2)}
.deal-size-grid a:hover{border-color:var(--c);color:var(--c)}
.deal-size-grid a.mine{border-color:var(--good);color:var(--good);box-shadow:0 0 0 1px var(--good) inset}
.rd-shop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.rd-shop>a.chip{height:32px;display:inline-flex;align-items:center}
.rd-shop small{white-space:nowrap}
.rd-sizes{display:flex;flex-wrap:wrap;gap:4px}
.rd-sizes a{display:grid;place-items:center;min-width:40px;height:32px;padding:0 7px;border-radius:8px;border:1px solid var(--line2);font:700 12px/1 var(--hud);color:var(--ink);background:var(--bg2)}
.rd-sizes a:hover{border-color:var(--c);color:var(--c)}
.rd-sizes a.mine{border-color:var(--good);color:var(--good);box-shadow:0 0 0 1px var(--good) inset}
.rd-note{display:block;margin-top:8px}
.resale-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.resale-row .btn{height:28px;padding:0 9px;font-size:11px}
.resale-row .vote,.vote.sm{align-self:center}
.resale-row .vote button,.vote.sm button{height:28px;padding:0 9px;font-size:11px}
.resale-row>.vote{flex:1 0 100%;width:0;min-width:100%}   /* its own full row under the three buttons, and it adds nothing to the row's width (a wider row squeezed the shoe name to nothing in In stock now) */
.resale-row>.vote button{flex:1;justify-content:center}
.sr-main{min-width:0;color:inherit;display:block}
.hunt-stock{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.pill.market{color:#05060A;background:var(--good)}
.pill.exclusive{color:#05060A;background:linear-gradient(90deg,#FF4D2E,#FFB020)}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.sup-item{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .2s,border-color .2s}
.sup-item:hover{transform:translateY(-3px);border-color:rgba(218,33,40,.6)}
.sup-item .plate{aspect-ratio:1;border-radius:0}
.sup-item .plate img{object-fit:contain}
.sup-item b{padding:10px 12px;font:700 13px/1.3 var(--body)}
.sup-item small{padding:0 12px 12px;margin-top:-4px;font:500 12px/1.3 var(--body)}
.sup-logo{display:inline-block;background:#DA2128;color:#fff;font:italic 900 clamp(30px,5vw,56px)/1 "Archivo",sans-serif;padding:6px 14px 8px;letter-spacing:-.02em}
.story-card.lead{grid-column:span 2}
.story-card.lead .plate{aspect-ratio:16/8}
.story-card .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:#0B0D14}
.story-card .strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:#fff}
@media (max-width:700px){.story-card.lead{grid-column:auto}}
.pill.raffle{color:#05060A;background:var(--rumor);box-shadow:0 0 14px rgba(197,139,255,.5)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font:600 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--ink2)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:#05060A;background:var(--ink);border-color:var(--ink)}
.chip .n{opacity:.6;margin-left:6px}
.heat{display:inline-flex;gap:3px;align-items:flex-end}
.heat i{width:5px;border-radius:2px;background:rgba(255,255,255,.14)}
.heat i:nth-child(1){height:6px}.heat i:nth-child(2){height:9px}.heat i:nth-child(3){height:12px}.heat i:nth-child(4){height:15px}.heat i:nth-child(5){height:18px}
.heat i.on{background:linear-gradient(#FF4D2E,#FFB020);box-shadow:0 0 8px rgba(255,77,46,.6)}
.heat-l{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--hud);letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}

/* ---------- photo plates ---------- */
.plate{position:relative;background:radial-gradient(120% 90% at 50% 30%,#FFFFFF 0%,#E9EAEE 100%);overflow:hidden;border-radius:14px}
/* Product photos show the whole shoe, framed the same everywhere (cards, rows, restocks, shoe page). Only editorial
   news/story photos fill their box. */
.plate img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.story-card .plate img,.feature .plate img,.story-card .strip img,.article figure.plate img{object-fit:cover}
.plate .credit{position:absolute;right:8px;bottom:7px;font:600 9px/1 var(--hud);letter-spacing:.06em;color:#fff;background:rgba(5,6,10,.6);padding:4px 6px;border-radius:5px}
.noimg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),linear-gradient(135deg,#171A26,#0D0F16);border:1px dashed var(--line2);border-radius:14px}
.noimg b{font:900 24px/1 var(--display);font-stretch:120%;text-transform:uppercase;color:var(--ink)}
.noimg small{font:600 10px/1.4 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
.ev .noimg,.pt-res .noimg,.stock-row .noimg,.wc-row .noimg{padding:10px;border-radius:12px}.ev .noimg b,.pt-res .noimg b,.stock-row .noimg b,.wc-row .noimg b{font-size:15px}.pt-res .noimg small,.stock-row .noimg small,.wc-row .noimg small{display:none}   /* a feed row with no photo anywhere: a tile naming the brand, not an empty white box */

/* ---------- drop cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.hw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1020px){.hw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.hw{display:flex;flex-direction:column;gap:6px;min-width:0}
.hw .plate{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#12091d;border:1px solid var(--line)}
.hw .plate img{width:100%;height:100%;object-fit:cover;display:block}
.hw b{font-size:15px;line-height:1.25}.hw small{color:var(--ink3)}
a.hw{color:inherit;text-decoration:none}a.hw:hover .plate{border-color:#ff9a3d}
.hw .plate.shot,.hws .plate.shot{background:#fff}.hw .plate.shot img,.hws .plate.shot img{object-fit:contain}
.hw-cover{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:22px}
@media (max-width:1020px){.hw-cover{grid-template-columns:minmax(0,1fr)}}
.hws-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1020px){.hws-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@media (max-width:640px){.hws-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.hws{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.hws .plate{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#12091d;border:1px solid var(--line)}
.hws .plate img{width:100%;height:100%;object-fit:cover;display:block}
.hws-b{display:flex;flex-direction:column;gap:3px;min-width:0}.hws-b b{font-size:14px;line-height:1.25}.hws-b small{color:var(--ink3)}
.hws .st{font:700 11px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}.hws .st.in{color:var(--good)}.hws .st.out{color:var(--ink3)}
.hws-go .btn{width:100%;height:auto;min-height:34px;padding:8px 10px;white-space:normal;text-align:center;line-height:1.25}
.hws-alt{font-size:12px;color:var(--ink3);line-height:1.5}.hws-alt a{color:var(--c);font-weight:700;white-space:nowrap}
.hw-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,140,40,.55);background:linear-gradient(90deg,rgba(255,120,30,.16),rgba(150,70,255,.16));color:var(--ink);font-size:14px}
.hw-banner:hover{border-color:#ff9a3d}
.hw-banner em{font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#ffb066;white-space:nowrap}
[data-hw][hidden],[data-dd][hidden]{display:none!important}
.ns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 14px}
.ns-step{display:block;padding:10px 12px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:12px;background:var(--panel,rgba(255,255,255,.03));color:inherit;text-decoration:none;min-width:0}
.ns-step b{display:block;font-size:15px;line-height:1.25}.ns-step small{display:block;color:var(--ink3);font-size:12px;margin-top:2px;line-height:1.3}
.ns-step:hover,.ns-step:focus-visible{border-color:var(--c)}
@media (max-width:560px){.ns{grid-template-columns:1fr;gap:6px}.ns-step{padding:9px 12px}}
.card{position:relative;display:flex;flex-direction:column;border-radius:18px;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(123,97,255,.5);box-shadow:0 18px 40px -18px rgba(123,97,255,.55)}
.card:hover .plate img{transform:scale(1.05)}
.card .plate{aspect-ratio:4/3;border-radius:0}
.date-chip{position:absolute;left:10px;top:10px;z-index:2;background:rgba(5,6,10,.82);backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:10px;padding:6px 9px;text-align:center;min-width:52px}
.date-chip .m{display:block;font:700 10px/1 var(--hud);letter-spacing:.14em;color:var(--c)}
.date-chip .d{display:block;font:900 22px/1.05 var(--display);margin-top:3px}
.date-chip.tba .d{font:700 10px/1.3 var(--hud);letter-spacing:.06em;margin-top:5px;max-width:92px}
.heart{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:rgba(5,6,10,.7);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.heart[aria-pressed="true"]{color:var(--hot);border-color:var(--hot)}
.heart[aria-pressed="true"] path{fill:currentColor}
.pair-pitch{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0;padding:12px 14px;border:1px solid rgba(53,224,255,.35);border-radius:12px;background:rgba(53,224,255,.06)}
.pair-pitch>div{flex:1 1 240px;min-width:0}.pair-pitch b{display:block;font-size:15px;color:var(--ink)}.pair-pitch span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink2)}
.pair-pitch .btn{flex:0 0 auto}@media(max-width:560px){.pair-pitch .btn{width:100%;justify-content:center}}
.own-hunt{display:flex;gap:8px;padding-top:10px;width:100%}
.own-hunt .btn{flex:1 1 0;justify-content:center;white-space:nowrap;min-width:0}
.dtile .own-hunt,.hws .own-hunt{gap:5px;padding-top:2px}   /* Under Retail and Halloween tiles are narrow (Nov 1 2026: they got the buttons) */
.dtile .own-hunt .btn,.hws .own-hunt .btn{font-size:10px;letter-spacing:.03em;padding:0 4px;height:32px}
.row-side .own-hunt{padding-top:0}
.swipe-back{position:fixed;left:-44px;top:50%;z-index:90;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(5,6,10,.9);border:1px solid var(--line2);color:var(--ink);display:grid;place-items:center;font:700 28px/1 var(--hud);padding-right:3px;opacity:0;pointer-events:none;transition:opacity .12s,background .12s}
.swipe-back.on{opacity:1}
.swipe-back.ready{background:var(--c);color:#05060A;border-color:var(--c)}
@media (prefers-reduced-motion:reduce){.swipe-back{transition:none}}
.photo-n{position:absolute;left:10px;bottom:10px;z-index:2;font:700 10px/1 var(--hud);letter-spacing:.08em;background:rgba(5,6,10,.75);padding:5px 7px;border-radius:6px}
.card-b{padding:14px 15px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-b .model{font:600 10px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.card-b h3{font:700 16px/1.25 var(--body)}
.card-b .cw{font-size:13px;color:var(--ink2)}
.card-f{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.card-f .price{font:700 14px/1 var(--hud)}
.card-f .pill{margin-left:auto}
.cd-mini{font:600 11px/1 var(--hud);letter-spacing:.06em;color:var(--c)}

/* ---------- home hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;padding:26px;border-radius:26px;background:linear-gradient(135deg,rgba(123,97,255,.14),rgba(34,211,238,.06) 60%,rgba(255,255,255,.02));border:1px solid rgba(123,97,255,.3);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 65%);pointer-events:none}
.hero .plate{aspect-ratio:3/2;border-radius:20px;box-shadow:0 30px 80px -30px rgba(123,97,255,.8)}
.hero-info{position:relative;display:flex;flex-direction:column;gap:14px}
.hero-info h1{font-size:clamp(34px,4.6vw,62px);font-weight:900;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em}
.hero-info .cw{font:600 18px/1.3 var(--body);color:var(--ink2)}
.cd{display:flex;gap:8px}
.cd div{min-width:74px;padding:11px 8px 9px;border-radius:12px;background:rgba(5,6,10,.6);border:1px solid var(--line2);text-align:center}
.cd b{display:block;font:700 32px/1 var(--hud);font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd span{display:block;margin-top:5px;font:600 9px/1 var(--hud);letter-spacing:.18em;color:var(--ink3)}
.facts{display:flex;flex-wrap:wrap;gap:10px 26px}
.facts div{display:flex;flex-direction:column;gap:5px}
.facts dt{font:600 10px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.facts dd{margin:0;font:700 15px/1.2 var(--body)}
.hero-dots{display:flex;gap:6px;margin-top:4px}
.hero-dots button{width:26px;height:4px;border-radius:3px;border:0;background:var(--line2);cursor:pointer;padding:0}
.hero-dots button[aria-current="true"]{background:var(--grad);width:44px}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding:16px}.cd div{min-width:0;flex:1}}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,260px);gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.rail .photo-n{display:none}
.hot-rank{position:absolute;left:12px;bottom:10px;z-index:2;font:900 44px/1 var(--display);color:rgba(255,255,255,.95);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.list-row{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--panel)}
.list-row .plate{width:88px;height:62px;border-radius:10px}
.list-row b{display:block;font:700 14px/1.3 var(--body)}
.list-row small{display:block;margin-top:3px;font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.list-row .r{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.feature{display:grid;grid-template-columns:1fr 1.2fr;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(120deg,#12101F,#0A0B11)}
.feature .fx{padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.feature h3{font-size:clamp(24px,3vw,36px);font-weight:900;font-stretch:112%;text-transform:uppercase}
.feature p{margin:0;color:var(--ink2)}
.feature .plate{border-radius:0;min-height:260px}
.tale-video{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);align-items:center;gap:24px;margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.tale-video h3{margin:7px 0;font:800 clamp(21px,2.4vw,28px)/1.15 var(--display)}
.tale-video p{margin:0;color:var(--ink2)}
.tale-video video{display:block;width:100%;max-height:470px;aspect-ratio:9/16;object-fit:contain;border-radius:12px;background:#050710}
.tale-video small{display:block;margin-top:8px;color:var(--ink3);font:600 11px/1.4 var(--hud)}
.article.tale-film .gal .plate{background:#050710}
@media(max-width:600px){.tale-video{grid-template-columns:1fr}.tale-video video{max-width:260px;margin:auto}}
@media (max-width:800px){.feature{grid-template-columns:1fr}}
/* SNKRS Reserve: always the first thing on Home while one is coming, open or just ended */
.reserve{display:grid;grid-template-columns:1.1fr 1fr;border-radius:22px;overflow:hidden;border:1px solid rgba(255,176,32,.55);background:linear-gradient(120deg,#1F1406,#0A0B11 70%);box-shadow:0 0 40px -12px rgba(255,176,32,.55);margin-top:18px}
.reserve .fx{padding:24px 26px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.reserve .tag{align-self:flex-start;font:800 11px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;border-radius:9px;background:var(--warn);color:#05060A}
.reserve .tag.open{background:var(--hot);color:#fff;box-shadow:0 0 16px rgba(255,77,46,.7)}
.reserve h2{margin:0;font-size:clamp(22px,3vw,34px);font-weight:900;font-stretch:112%;text-transform:uppercase;line-height:1.05}
.reserve p{margin:0;color:var(--ink2)}
.reserve .when{font:700 15px/1.3 var(--hud);color:var(--ink)}
.reserve .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.reserve .plate{border-radius:0;min-height:220px}
.reserve .plate img{object-fit:contain}
@media (max-width:800px){.reserve{grid-template-columns:1fr}.reserve .plate{min-height:200px}}


/* ---------- release rows (Drops calendar) ---------- */
.drop-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px}
.search{position:relative;flex:1 1 260px;max-width:380px}
.search input{width:100%;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:0 14px 0 40px;font-size:14px}
.search svg{position:absolute;left:13px;top:12px;color:var(--ink3)}
.viewsw{display:inline-flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.drop-periods{flex-wrap:wrap}
.viewsw button{height:40px;padding:0 14px;border:0;background:transparent;font:700 11px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.viewsw button[aria-pressed="true"]{background:var(--ink);color:#05060A}
.month{position:sticky;top:64px;z-index:5;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 10px;margin-top:22px;background:linear-gradient(var(--bg) 70%,transparent)}
.month h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;font-stretch:115%;text-transform:uppercase}
@media (max-width:1020px){.month{top:104px}}
.rows{display:flex;flex-direction:column;gap:10px}
.row{position:relative;display:grid;grid-template-columns:minmax(0,300px) 1fr auto;gap:22px;align-items:center;padding:12px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s,transform .2s,box-shadow .2s}
.row:hover{border-color:rgba(123,97,255,.5);transform:translateY(-2px);box-shadow:0 16px 40px -22px rgba(123,97,255,.7)}
.row .plate{aspect-ratio:500/289;border-radius:12px}
.row .plate img{object-fit:contain}
.row-day{position:absolute;left:22px;top:22px;z-index:2}
.row-main{display:flex;flex-direction:column;gap:7px;min-width:0}
.row-main .model{font:600 10px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.row-main h3{font:800 clamp(18px,2vw,24px)/1.15 var(--display);font-stretch:104%}
.row-main h3 em{font-style:normal;color:var(--ink2)}
.kv{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:6px 26px;margin-top:4px}
.kv div{display:flex;flex-direction:column;gap:4px}
.kv dt{font:600 9px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.kv dd{margin:0;font:600 14px/1.25 var(--body);color:var(--ink)}
.kv dd.mono{font-family:var(--hud);letter-spacing:.04em}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:150px}
.row-side .cd-mini{font-size:13px}
@media (max-width:900px){.kv{grid-template-columns:repeat(2,auto)}}
/* Phones (Stan, Oct 4 2026: "all the shoe photos are too small... we're featuring shoes"): the photo was a 132 x 76 px
   thumbnail beside the words. Under 560px it now runs the full width of the card (about 3x the shoe) with the words
   under it; a wide phone or small tablet keeps the side-by-side row with a bigger photo (240px). */
@media (max-width:720px){.row{grid-template-columns:240px 1fr;gap:14px;padding:10px}.row-side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-width:0}.row-day{left:16px;top:16px;transform:scale(.85);transform-origin:top left}.kv{gap:6px 16px}.kv .hide-sm{display:none}}
@media (max-width:560px){.row{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px 8px 12px}.row .plate{aspect-ratio:3/2}.row-main,.row-side{padding:0 6px}}
/* Raffles on a drop (Stan, Oct 26 2026): one strip on the row or card, a Raffle tag, the stores, when it ends. A tap opens the "How to cop" sheet. */
.drop-raf{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;padding:9px 11px;border-radius:12px;border:1px solid rgba(197,139,255,.45);background:rgba(197,139,255,.08);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.drop-raf:hover,.drop-raf:focus-visible{background:rgba(197,139,255,.18);border-color:rgba(197,139,255,.8)}
.row-main .drop-raf{max-width:560px}
.card .drop-raf{flex-wrap:wrap;gap:6px 8px}
.card .drop-raf .dr-lab,.card .drop-raf .dr-go{display:none}
.card .drop-raf .dr-txt{flex-basis:calc(100% - 80px)}
.card .drop-raf small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:560px){.row .drop-raf{flex-wrap:wrap;gap:6px 8px}.row .drop-raf .dr-lab{flex-basis:100%}.row .drop-raf .dr-txt{flex-basis:0;min-width:120px}}
.drop-raf .dr-lab{font:600 9px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.drop-raf .dr-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.drop-raf b{font:700 13px/1.2 var(--body)}
.drop-raf small{font:600 11px/1.3 var(--hud);letter-spacing:.05em;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-raf .dr-go{font:700 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--c);white-space:nowrap}
/* Grid really is a grid on a phone (Stan, Oct 26 2026: "row and grid don't actually change anything and it really needs to"). A phone's Rows are big full-width
   cards (the photo across the top, every detail); the Grid's cards were the same card at the same width, because the grid's 250 px columns fit once in 358 px.
   Under 560 px the Drops grid is two across, a square photo and the name, price and status: tap a shoe for the rest. */
@media (max-width:560px){
  .grid.dg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.dg .card{border-radius:14px}
  .grid.dg .card .plate{aspect-ratio:1/1}
  .grid.dg .photo-n,.grid.dg .card-share{display:none}
  .grid.dg .date-chip{left:6px;top:6px;padding:4px 7px;min-width:42px;border-radius:8px}
  .grid.dg .date-chip .d{font-size:17px}
  .grid.dg .date-chip .m{font-size:9px}
  .grid.dg .date-chip.tba .d{font-size:9px;max-width:70px}
  .grid.dg .card-b{padding:9px 9px 10px;gap:4px}
  .grid.dg .card-b .model{font-size:8.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid.dg .card-b h3{font-size:13.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grid.dg .card-b .cw{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid.dg .card-f{flex-wrap:wrap;gap:4px 8px;padding-top:8px}
  .grid.dg .card-f .cd-live{display:none}   /* the ticking countdown is on the shoe's page; a sold out / in stock note stays */
  .grid.dg .card-f .pill{margin-left:0;font-size:9px;padding:4px 7px}
  .grid.dg .own-hunt{gap:5px;padding-top:6px}
  .grid.dg .own-hunt .btn{font-size:10px;letter-spacing:.03em;padding:0 4px;height:32px;min-width:0}
  .grid.dg .drop-raf{flex-wrap:wrap;gap:4px 6px;padding:7px 8px;margin-top:6px}
  .grid.dg .drop-raf .dr-lab,.grid.dg .drop-raf .dr-go{display:none}
  .grid.dg .drop-raf .dr-txt{flex-basis:100%}
  .grid.dg .drop-raf small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .grid.dg .card.pack .pack-cws{display:none}
}

.where{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink2)}
.where a{color:var(--c);font-weight:700;text-decoration:underline;text-underline-offset:2px}   /* the places named here open their pages */
.where svg{flex-shrink:0;margin-top:2px;color:var(--c)}
/* ---------- restocks ---------- */
.ev{display:grid;grid-template-columns:200px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev.fresh{animation:flash 2.4s ease-out}
@keyframes flash{from{background:rgba(255,77,46,.18)}to{background:transparent}}
.ev .plate{width:200px;height:150px;border-radius:12px}
.ev h3,.ev h4{margin:5px 0 6px;font:700 15px/1.3 var(--body)}
.ev-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:600 11px/1 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.ev-meta .ev-ago{font:500 13px/1.2 var(--body);letter-spacing:0;color:var(--ink2)}.ev-meta .ev-ago::before{content:"· ";color:var(--ink3)}   /* "13 minutes ago" (Oct 12 2026) */
.sz{display:flex;flex-wrap:wrap;gap:4px}
.sz span{font:600 11px/1 var(--hud);padding:5px 7px;border-radius:6px;background:var(--panel2);color:var(--ink2)}
.sz span.mine{background:var(--grad);color:#05060A}
.ev-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
@media (max-width:1180px){.ev{grid-template-columns:150px 1fr auto}.ev .plate{width:150px;height:112px}}
@media (max-width:560px){.ev{grid-template-columns:minmax(0,1fr);gap:10px}.ev .plate{width:100%;height:auto;aspect-ratio:3/2}.ev-act{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.ev-act>.btn{flex:1 1 calc(50% - 3px);min-width:0;white-space:normal;height:auto;min-height:34px;padding-block:8px;line-height:1.2;text-align:center}.ev-act>.hud,.ev-act>.resale-row{flex:1 1 100%;text-align:center;justify-content:center}.ev-act>.resale-row .btn{flex:1 1 auto}}   /* phone: the photo runs the card's full width (Stan, Oct 4 2026: "photos are too small"). The buttons WRAP, two across, the price and eBay / StockX / GOAT each on a line of their own: as one no-wrap row (Oct 12 2026, Stan: "can only see other buying styles when the phone is flipped to one side") everything after Save ran off the right edge. */
/* Home's Live restocks: three cards a row (Stan, Oct 3 2026: "save page size ... 3 shoes per row"); two on a tablet, the
   row layout above on a phone. Lines are box-shadows so the panel's own clipped edge needs no border juggling. */
@media (min-width:561px){
  .feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden}
  .feed-grid .ev{grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:10px;padding:14px;border-bottom:0;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
  .feed-grid>.empty{grid-column:1/-1}
  .feed-grid .ev .plate{width:100%;height:170px}
  .feed-grid .ev-act{flex-direction:row;flex-wrap:wrap;align-self:end}
  .feed-grid .ev-act .btn{flex:1 1 110px}
  .feed-grid .ev-act>.hud,.feed-grid .ev-act>.resale-row{flex:1 1 100%;text-align:left;justify-content:flex-start}
}
@media (min-width:1000px){.feed-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Restocks page: compact rows (Oct 30 2026, Stan, a 1700 px screenshot of the Restock feed and In stock now with the shoe names one letter a line:
   "these need to be compacted to get the most info in smaller sections"). The rows were photo | words | buttons with the buttons column sized to
   its widest no-wrap line (Open in SNKRS + eBay + StockX + GOAT + Share is ~400 px), so in a 660 px panel the words got what was left, down to 4 px.
   Now a small photo on the left and the words over the buttons on the right: the buttons wrap under the words and can never squeeze the name.
   Phones (560 px and under) keep their own full-width photo layout above. */
@media (min-width:561px){
  #feed .ev{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"pic info" "pic act";align-items:start;gap:8px 14px;padding:12px 14px}
  #feed .ev>.plate{grid-area:pic;width:112px;height:84px;border-radius:10px}
  #feed .ev>div:not(.plate):not(.ev-act){grid-area:info}
  #feed .ev h3{margin:4px 0 4px;font-size:14px}
  #feed .ev .sz span{padding:4px 6px}
  #feed .ev-act{grid-area:act;flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px}
  #feed .ev-act>.btn{flex:0 1 auto;min-width:0;max-width:100%;height:28px;padding:0 10px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #feed .ev-act>.hud{font:700 13px/1 var(--hud)!important;padding:0 4px}
  #feed .ev-act>.resale-row{justify-content:flex-start}
  #feed .ev-act .resale-row>.vote{flex:0 0 auto;width:auto;min-width:0}
}
.panel-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-top h2,.panel-top h3{font:800 16px/1 var(--display);font-stretch:112%;text-transform:uppercase}
.panel-top .sp{margin-left:auto}
.empty{padding:26px 22px;color:var(--ink2)}
.empty h4,.empty .empty-t{font:800 20px/1.15 var(--display);font-stretch:110%;margin:0 0 8px;color:var(--ink);max-width:none}   /* an empty-state notice is not a section: a plain line, not a heading */
.empty p{margin:0 0 14px;max-width:60ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.steps div{padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.steps b{display:block;font:700 11px/1 var(--hud);letter-spacing:.14em;color:var(--c);margin-bottom:8px}
.steps span{font-size:13px;color:var(--ink2)}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.stock-row{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.stock-row .plate{width:150px;height:112px;border-radius:12px}
.stock-row small{display:block;margin-top:2px}
.stock-row .ship{margin:3px 0 5px;color:var(--ink2)}
.stock-row .ship.ww{color:var(--good)}
@media (max-width:560px){.stock-row{grid-template-columns:minmax(0,1fr);gap:10px}.stock-row .plate{width:100%;height:auto;aspect-ratio:3/2}.stock-row .r{grid-column:1/-1;flex-direction:row;justify-content:space-between}}
.stock-row:hover{background:var(--panel)}
.stock-row b{display:block;font:600 14px/1.3 var(--body);overflow-wrap:anywhere}
.stock-row>span,.ev>div,.pt-res>span{min-width:0}
.ev h3,.ev h4,.pt-res b{overflow-wrap:anywhere}
.stock-row small{font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.stock-row .r{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.stock-row .price{font:700 14px/1 var(--hud)}
/* compact In stock now / history rows (Oct 30 2026, see the restock feed note above): small photo, words over the price and buttons */
@media (min-width:561px){
  .stock-row{grid-template-columns:88px minmax(0,1fr);grid-template-areas:"pic main" "pic r";align-items:start;gap:6px 12px;padding:10px 14px}
  .stock-row>.plate{grid-area:pic;width:88px;height:66px;border-radius:10px}
  .stock-row>a.sr-main,.stock-row>span:not(.r){grid-area:main}
  .stock-row small{display:inline;margin:0}.stock-row .ship{display:block;margin:2px 0 4px}
  .stock-row b{margin-bottom:2px}
  .stock-row .sz{margin-top:5px}.stock-row .sz span{padding:4px 6px}
  .stock-row .r{grid-area:r;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;gap:5px}
  .stock-row .r .resale-row{justify-content:flex-start}
  .stock-row .r .resale-row>.vote{flex:0 0 auto;width:auto;min-width:0}
}
.note{padding:11px 16px;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)}

/* ---------- shoe page ---------- */
.crumbs{font:600 11px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:18px}
.crumbs a{color:var(--c)}
.shoe{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.shoe>.shoe-info{order:2}   /* the h1 column comes first in the page's code (the H1 H2 system) and is still shown on the right; the photos stay first on a phone */
.shoe>*,.gal{min-width:0}   /* big source photos (2800px+) must never widen the column past the screen */
@media (max-width:980px){.shoe{grid-template-columns:1fr}}
/* Nothing sits on the photo (Stan, Oct 11 2026: "I want to be able to see the whole pics and be able to open them to look closer. The arrows make you
   miss spots"): the arrows, the count and the photo credit live in a bar under it, and a tap opens the photo full screen (galOpen). */
.gal .plate{aspect-ratio:4/3;border-radius:22px;width:100%;max-height:70vh;cursor:zoom-in}
.gal .plate img{object-fit:contain}
.gal .plate:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.gal-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.gal-nav{flex:0 0 48px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.gal-nav:hover{border-color:var(--c)}
.gal-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.gal-count{font:700 12px/1 var(--hud);letter-spacing:.12em;color:var(--ink2)}
.gal-credit{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px/1.3 var(--body);color:var(--ink3)}
.gal-credit:empty{display:none}
.thumbs{position:relative;display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.thumbs button{flex:0 0 76px;height:76px;padding:0;border-radius:12px;border:2px solid transparent;background:var(--plate);overflow:hidden;cursor:pointer}
.thumbs button[aria-current="true"]{border-color:var(--c);box-shadow:0 0 14px rgba(34,211,238,.5)}
.thumbs img{width:100%;height:100%;object-fit:contain;display:block}   /* the whole picture in each square, not a cropped middle */
.shoe-info{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.shoe-info h1{font-size:clamp(30px,3.6vw,48px);font-weight:900;font-stretch:110%;text-transform:uppercase;letter-spacing:-.015em}
.shoe-info .cw{font:600 18px/1.3 var(--body);color:var(--ink2)}
.spec{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec div{padding:12px 14px;border-bottom:1px solid var(--line)}
.spec div:nth-child(odd){border-right:1px solid var(--line)}
.spec div:nth-last-child(-n+2){border-bottom:0}
.spec dt{font:600 10px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.spec dd{margin:6px 0 0;font:700 15px/1.25 var(--body)}
.buy{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.buy a{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line);transition:background .15s}
.buy a:last-child{border-bottom:0}
.buy a:hover{background:var(--panel2)}
.buy b{font:700 15px/1.2 var(--body)}
.buy small{grid-column:1;font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.buy .go{grid-row:1/3;grid-column:2;font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.buy a.exact .go{color:var(--good)}
.buy a.raf{background:rgba(197,139,255,.07)}.buy a.raf .go{color:var(--rumor)}
.desc{margin:0;color:var(--ink2);font-size:16px;line-height:1.6}
.box-title{font:700 11px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}

/* ---------- articles ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.story-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .2s,border-color .2s}
.story-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.45)}
.story-card .plate{aspect-ratio:16/10;border-radius:0}
.story-card .sb{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.story-card .meta{display:flex;gap:8px;align-items:center;font:600 11px/1 var(--hud);letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.story-card h3{font:800 19px/1.2 var(--display);font-stretch:104%}
.story-card p{margin:0;color:var(--ink2);font-size:14px}
/* The photos are sized by their own cell (4:3) and fill it from the inside (absolute, cover), never by a percent of a parent's height:
   iPhone Safari does not resolve `height:100%` on an image in a grid row, so the photos took their own ratio, spilled over the
   title and showed white bars (Stan, Oct 19 2026). Nothing here depends on the card's height either: the copy sits under the photos. */
.featured-story{display:flex;flex-direction:column;width:min(100%,370px);overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);transition:transform .2s,border-color .2s}
.featured-story:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.55)}
.featured-row{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.featured-story-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;background:#0B0D14}
.featured-story-shots .shot{position:relative;display:block;min-width:0;aspect-ratio:4/3;overflow:hidden;background:#0B0D14}
.featured-story-shots img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.featured-story-copy{display:flex;flex-direction:column;gap:9px;padding:15px 17px 16px}
.featured-story-copy .eyebrow{color:var(--c)}
.featured-story-copy h3{font:900 clamp(22px,2.5vw,27px)/1.06 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:0}
.featured-story-copy small{font:600 11px/1.3 var(--hud);letter-spacing:.04em;color:var(--ink3)}
.featured-story-copy .arrow{color:var(--c);font-weight:800}
.article{max-width:780px;margin:0 auto}
.article h1{font-size:clamp(32px,4.4vw,56px);font-weight:900;font-stretch:108%;text-transform:uppercase;letter-spacing:-.015em;margin:12px 0 14px}
.article .dek{font-size:19px;line-height:1.55;color:var(--ink2);margin:0 0 18px}
.article .by{font:600 11px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:22px}
.article .by a{color:var(--c)}
.article p{font-size:17px;line-height:1.75;margin:0 0 16px;color:#DADFE8}
.article h2{font-size:24px;font-weight:900;font-stretch:110%;text-transform:uppercase;margin:34px 0 12px}
.article .plate{aspect-ratio:16/9;border-radius:20px;margin-bottom:22px}
.article .plate img{object-fit:contain}
/* a 4:5 page (a carousel slide in a news story, `tall` in stories.json): shown whole, never cropped to the wide frame */
.article figure.plate.tall{aspect-ratio:4/5;max-width:620px;margin-left:auto!important;margin-right:auto!important;background:#07080C}.article figure.plate.tall img{object-fit:contain}
.sources{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
.sources a{color:var(--c)}

/* ---------- settings ---------- */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.set-grid{grid-template-columns:1fr}}
.set-grid .panel{padding:22px}
.set-grid h3{font:900 22px/1.1 var(--display);font-stretch:112%;text-transform:uppercase;margin-bottom:6px}
.set-grid p{margin:0 0 14px;color:var(--ink2)}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}
.size-grid button{height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font:700 15px/1 var(--hud);cursor:pointer;position:relative;color:var(--ink)}
.size-grid button[aria-pressed="true"]{background:var(--grad);color:#05060A;border-color:transparent;box-shadow:0 0 18px rgba(123,97,255,.5)}
.size-grid sup{position:absolute;top:4px;right:6px;font-size:9px}
.toggle{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.toggle:last-child{border-bottom:0}
.toggle small{display:block;color:var(--ink3);font-size:12px}
.toggle input{width:20px;height:20px;accent-color:var(--v)}
/* Notifications in the app's Settings (Oct 19 2026, Stan, a screenshot of another app's list of switches: "We need a section just like this. Where the user decides what notifications
   they want"). The layout is his reference (a heading, grouped cards, one row a kind of alert with a big switch, the words under it); the words and the kinds are ours. */
.ntf-panel{padding:18px 16px 16px}
.ntf-panel h3{margin:0 0 4px}
.ntf-panel>p{margin:0 0 12px;color:var(--ink2)}
.ntf-head{margin:18px 4px 8px;font:600 13px/1.2 var(--body);color:var(--ink2)}
.ntf-card{background:var(--panel2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ntf-item{border-bottom:1px solid var(--line)}
.ntf-item:last-child{border-bottom:0}
.ntf-row{display:flex;gap:14px;align-items:center;justify-content:space-between;min-height:58px;padding:13px 16px;cursor:pointer}
.ntf-row b{display:block;font:600 16px/1.25 var(--body);color:var(--ink)}
.ntf-row small{display:block;margin-top:3px;color:var(--ink3);font-size:13px;line-height:1.35}
.ntf-row input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;padding:0;border:0;border-radius:16px;background:rgba(255,255,255,.2);cursor:pointer;transition:background .18s}
.ntf-row input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .18s}
.ntf-row input[type=checkbox]:checked{background:var(--good)}
.ntf-row input[type=checkbox]:checked::after{transform:translateX(20px)}
.ntf-row input[type=checkbox]:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.ntf-row input[type=checkbox]:disabled{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){.ntf-row input[type=checkbox],.ntf-row input[type=checkbox]::after{transition:none}}
.ntf-sub{display:block;padding:0 16px 14px}
.ntf-sub select{display:block;width:100%;margin-top:6px;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink)}
.ntf-hint{display:block;margin-top:6px;color:var(--ink3);font-size:12px}
.set-grid .ntf-foot{margin:16px 4px 0;color:var(--ink3);font-size:13px;line-height:1.45}
.ntf-foot b{color:var(--ink2)}
/* guided setup (Oct 19 2026): one screen a step, a rail on top, Back / Next at the bottom (stuck to the bottom of a phone so Next is always under the thumb) */
.ob-entry{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 16px}
.ob-entry small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.ob-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0 0 16px;max-width:760px}
.ob-rail i{display:block;height:6px;border-radius:99px;background:var(--line2)}
.ob-rail i.on{background:var(--grad)}
.ob-rail i.now{background:var(--grad);box-shadow:0 0 14px rgba(123,97,255,.6)}
.ob-card{padding:20px;max-width:760px}
.ob-tabs .chip{height:40px}
.ob-tabs .chip[aria-pressed="true"]{background:var(--grad);color:#05060A;border-color:transparent}
.ob-pinned{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.ob-note{margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--warn);font-size:13px;line-height:1.4}
.ob-price{display:block;margin:16px 0 6px}.ob-price input{margin-top:6px;width:100%;max-width:220px}
.ob-more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ob-more summary{cursor:pointer;font-weight:700;color:var(--ink)}.ob-more summary small{color:var(--ink3);font-weight:400}
.ob-perm{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin:0 0 6px}
.ob-perm small{display:block;color:var(--ink3);font-size:12px}
.ob-perm.ok{color:var(--good);font-weight:700}.ob-perm.bad{color:var(--warn)}
.ob-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.ob-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.ob-seg button,.ob-way{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;display:grid;gap:2px}
.ob-seg button small,.ob-way small{color:var(--ink3);font-size:12px}
.ob-seg button[aria-pressed="true"],.ob-way[aria-pressed="true"]{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c);background:var(--panel2)}
.ob-flow{display:grid;gap:8px;margin:0 0 8px}
.ob-flow div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.ob-flow b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#05060A;font:800 15px/1 var(--hud)}
.ob-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.ob-foot{display:flex;gap:10px;align-items:center;margin-top:16px;max-width:760px}
.ob-foot .btn{min-height:48px}.ob-foot .btn.primary{flex:1}
.ob-skip{margin:10px 0 0;max-width:760px;text-align:center}
.ob-link{background:none;border:0;padding:0;color:var(--c);text-decoration:underline;cursor:pointer;font:inherit;text-transform:none;letter-spacing:0}
.ob-sums{display:grid;gap:8px}
.ob-sum{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.ob-sum small{display:block;color:var(--ink3);font:600 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.ob-sum b{font-weight:600;color:var(--ink)}
@media (max-width:760px){.ob-foot{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:5;padding:10px;border-radius:16px;background:rgba(10,11,17,.94);border:1px solid var(--line)}}
.pay{display:grid;gap:10px}
.pay div{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.pay .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:800 12px/1 var(--hud);background:#fff;color:#05060A}
.pay b{display:block;font-size:15px}
.pay span{font-size:13px;color:var(--ink2)}
.acct{max-width:440px;padding:20px}.acct form{display:grid;gap:12px}.acct label{display:grid;gap:6px}
.acct label.toggle{display:flex;gap:12px}.acct .toggle input{height:20px;width:20px;flex:none;padding:0}
.acct input{height:46px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:0 14px;font:500 15px var(--body);color:var(--ink)}
.acct select,.lm-grid select{height:46px;border-radius:12px;border:1px solid var(--line2);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9B0BE' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding:0 38px 0 14px;font:500 15px var(--body);color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;min-width:0}
.lm-grid input,.lm-grid select,.lm-panel textarea{height:44px;border-radius:12px;border:1px solid var(--line2);background-color:var(--panel);padding:0 14px;font:500 15px var(--body);color:var(--ink);min-width:0;width:100%}
.lm-grid select{padding-right:38px}.lm-panel textarea{height:auto;padding:10px 14px;resize:vertical}
.acct select:focus,.lm-grid input:focus,.lm-grid select:focus,.lm-panel textarea:focus{outline:2px solid var(--c);outline-offset:1px}
.acct input:focus{outline:2px solid var(--c);outline-offset:1px}.acct .msg{min-height:20px;margin:0;color:var(--ink2)}.acct .msg.bad{color:#ff6b7a}
.acct-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.acct-tabs button[aria-pressed="true"]{border-color:var(--c);color:var(--c)}
.acct .pw-in{position:relative;display:block}.acct .pw-in input{width:100%;padding-right:70px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink2);font:600 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pw-eye:hover{color:var(--ink);border-color:var(--line2)}
.acct-fine{margin:0;font-size:13px;color:var(--ink3);line-height:1.45}.acct-fine a{color:var(--c)}
.acct-spam{margin:-4px 0 0;font-size:13px;color:var(--ink2);line-height:1.45;text-align:center}.acct-spam b{color:var(--ink)}
.invite{display:grid;gap:6px;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.invite span{color:var(--ink2);font-size:14px}.invrow{display:flex;gap:8px;flex-wrap:wrap}.invrow input{flex:1 1 220px;min-width:0;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);padding:0 10px;font:inherit;font-size:14px}
.acct-value{list-style:none;margin:2px 0 14px;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink2);line-height:1.4}.acct-value li{display:flex;gap:10px}.acct-value li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);margin-top:7px;flex:none}.acct-value b{color:var(--ink)}
/* Continue with Google / Apple (Oct 17 2026): drawn only once the server has the provider's keys; the email form below them is unchanged */
.soc{display:grid;gap:10px;margin:0 0 14px}.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:12px;border:1px solid var(--line2);font:600 15px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s,border-color .15s}
button.sbtn{padding:0;width:100%}.sbtn:hover{transform:translateY(-1px)}.sbtn svg{width:20px;height:20px;flex:none}.sbtn.sg{background:#fff;color:#1f1f1f;border-color:#fff}.sbtn.sa{background:#000;color:#fff;border-color:rgba(255,255,255,.4)}
.soc-or{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--ink3);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.soc-or:before,.soc-or:after{content:"";flex:1;height:1px;background:var(--line)}
.soc-note{margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font-size:14px;line-height:1.45;color:var(--ink2)}.soc-note.bad{border-color:rgba(255,107,122,.55)}
.soc-acct{margin:4px 0 16px;display:grid;gap:8px}.soc-acct h3{margin:0;font-size:15px}.soc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.soc-row>span{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-weight:600}.soc-row svg{width:18px;height:18px}.soc-row .ok{color:var(--good);font-size:13px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--c);text-decoration:underline;cursor:pointer}
.gate-more{border:1px solid var(--line);border-radius:12px;padding:0 14px}.gate-more summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
.gate-more summary::-webkit-details-marker{display:none}.gate-more summary::before{content:"+";color:var(--c);font-weight:900;width:14px;flex:none}.gate-more[open] summary::before{content:"–"}
.gate-more[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}.gate-more .gate-perks{padding-bottom:14px}
.gate-side .gate-ex{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px}.gate-side .gate-ex .ev{grid-template-columns:96px minmax(0,1fr);align-items:center;padding:10px;gap:12px}
.gate-side .gate-ex .ev .plate{width:96px;height:72px}.gate-side .gate-ex .ev h3{font-size:15px;margin:2px 0}
/* the free-account wall on Home's Live restocks and the Restocks page (gateHTML), and Home's free strip */
.gate{padding:20px;margin:0}.gate h2{font-size:clamp(22px,3vw,30px);text-wrap:balance}
.gate-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gate-ex .ev{grid-template-columns:minmax(0,1fr);align-items:start;border:1px solid var(--line);border-radius:14px;padding:12px}
.gate-ex .ev .plate{width:100%;height:150px}
.gate-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.gate-perks{list-style:none;margin:0;padding:0;display:grid;gap:10px}.gate-perks li{display:flex;gap:10px;align-items:flex-start}
.gate-perks li>span{font-size:19px;line-height:1.3;flex:none}.gate-perks b{display:block;color:var(--ink)}.gate-perks small{color:var(--ink2);font-size:13px}
.ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
/* Spotlight (newsTickerHTML): the latest news and one Grail Tale, one at a time, each with its photo, in a fixed-height box */
.nt{position:relative;margin:12px 0 14px;border-radius:14px;border:1px solid var(--line2);background:rgba(11,13,20,.88);overflow:hidden}
.nt-win{position:relative;height:200px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.nt-win.nt-drag{cursor:grabbing}.nt-drag .nt-item.on{transition:none}
.nt-back .nt-item:not(.on){transform:translateX(-14px)}
.nt-item{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);color:var(--ink);text-decoration:none;opacity:0;transform:translateX(14px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.nt-item.on{opacity:1;transform:none;pointer-events:auto}
.nt-pic{position:relative;overflow:hidden;background:#fff}
.nt-pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.nt-pic .noimg{position:absolute;inset:0;border:0;border-radius:0}
.nt-pic .credit{position:absolute;right:8px;bottom:7px;z-index:1;font:600 9px/1 var(--hud);letter-spacing:.06em;color:#fff;background:rgba(5,6,10,.6);padding:4px 6px;border-radius:5px}
.nt-txt{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px 40px}
.nt-kind{align-self:flex-start;padding:4px 9px;border-radius:8px;background:var(--grad);color:#05060A;font:800 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.nt-kind.tale{background:var(--c);}
.nt-txt b{font:900 clamp(17px,2vw,22px)/1.15 var(--display);text-transform:uppercase;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-txt small{color:var(--ink3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-item:hover b,.nt-item:focus-visible b{color:var(--c)}
.nt-foot{position:absolute;left:calc(44% + 12px);right:10px;bottom:6px;display:flex;align-items:center;gap:4px;z-index:2}
.nt-dots{flex:none;display:flex;margin-right:auto}
.nt-dots button{width:18px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.nt-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line2)}
.nt-dots button.on::before{background:var(--c)}
.nt-all{flex:none;font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 6px;white-space:nowrap}
.nt-all:hover{color:var(--ink)}
@media (max-width:560px){.nt-win{height:290px}.nt-item{grid-template-columns:minmax(0,1fr);grid-template-rows:165px minmax(0,1fr)}.nt-txt{padding:10px 12px 36px;gap:5px;justify-content:flex-start}.nt-txt b{font-size:16px;-webkit-line-clamp:2}.nt-foot{left:8px;right:6px;bottom:2px}.nt-all{font-size:12px}}
@media (prefers-reduced-motion:reduce){.nt-item{transition:none;transform:none}}
/* Dropping today (todayHTML): every drop of the day on Home's first screen, photo + Retail / Resale / Release / Hype */
.td{margin:12px 0 14px;padding:18px 18px 14px;border-radius:16px;border:1px solid var(--line2);background:rgba(11,13,20,.88)}
.td-head .eyebrow{display:block;margin-bottom:4px}
.td-head h2{margin:0 0 12px;font:900 clamp(24px,3vw,32px)/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.td-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));gap:10px}
.td-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center;padding:8px;border-radius:14px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.td-row:hover,.td-row:focus-visible{border-color:var(--c)}
.td-row .plate{height:100px}
.td-txt{min-width:0}
.td-txt b{font:800 17px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.005em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.td-txt>small{display:block;color:var(--ink3);font-size:12px;margin-top:2px}
.td-facts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 0}
.td-facts div{min-width:0}
.td-facts dt{color:var(--ink3);font-size:12px}
.td-facts dd{margin:2px 0 0;font:700 15px/1.2 var(--hud);white-space:nowrap}
.td-facts dd.good{color:var(--good)}
.td-foot{display:flex;justify-content:center;margin-top:14px;max-width:100%}
.td-foot .btn{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
@media (max-width:560px){.td{padding:14px 12px 12px}.td-row{grid-template-columns:110px minmax(0,1fr);gap:12px;padding:6px}.td-row .plate{height:90px}.td-txt b{font-size:15px}.td-facts{gap:4px 14px}.td-facts dd{font-size:14px}}
@media (max-width:760px){.gate-ex,.gate-cols{grid-template-columns:minmax(0,1fr)}.gate-cols{gap:18px}}
.field input{width:120px;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:0 12px;font-family:var(--hud)}

/* ---------- raffles grouped by shoe ---------- */
.rmeth{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rmeth .pill{padding:4px 7px;font-size:9px}
.rgroup{border-top:1px solid var(--line)}
.rgroup:first-of-type{border-top:0}
.rgroup-h{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 16px 4px;font:800 15px/1.3 var(--display);font-stretch:104%}
.rgroup-h a:hover{color:var(--c)}

/* ---------- company → model dropdowns ---------- */
.picker{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* packs: several colorways of one shoe in one Drops entry */
.pack-cws{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pack-cws a{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;color:var(--ink2);text-decoration:none}
.pack-cws .plate{width:92px;height:66px;border-radius:10px}
.pack-cws small{font:600 10px/1.2 var(--hud);text-align:center;letter-spacing:.03em;overflow-wrap:anywhere}
.pack-cws a:hover small{color:var(--ink)}
/* Under Retail Now grid: 6 across on a computer, 2 on a phone (Stan) */
.deal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1400px){.deal-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1150px){.deal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:880px){.deal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.deal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.dtile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:5px;min-width:0}
.dtile .plate{aspect-ratio:4/3;width:100%;border-radius:10px}
.dt-name{font:700 13px/1.25 var(--body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.dt-store{font:600 10px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-price b{font:700 16px/1 var(--hud);color:var(--good)}
.dt-price s{font:600 11px/1 var(--hud);color:var(--ink3)}
.dt-post .btn{width:100%;justify-content:center}
.dt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:2px 0}
.dt-share.btn.sm{flex:none;height:30px;padding:0 9px;font-size:11px}
.card-share{padding-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.story-card .card-share{padding-top:0}
.item-share.btn.sm{height:30px;padding:0 10px;font-size:11px;background:transparent;color:var(--ink2)}
.item-share.btn.sm:hover{color:var(--ink);background:var(--panel2)}
.resale-row .item-share.btn.sm{height:28px;padding:0 9px}
.mact-me .item-share{grid-column:1/-1}
.page-share{flex:none;margin-left:auto}
.page-share-row{display:flex;justify-content:flex-end;margin:0 0 10px}
.dt-sizes{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.dt-sizes a{font:700 10px/1 var(--hud);padding:5px 5px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--ink2);min-width:26px;text-align:center}
.dt-sizes a:hover{background:rgba(255,255,255,.14);color:var(--ink)}
.dt-sizes a.mine{background:var(--grad);color:#05060A}
.dt-sizes .none{font:600 10px/1 var(--hud);color:var(--ink3)}
/* StockX box on shoe pages */
.sx-box{border:1px solid var(--line2);border-radius:16px;padding:16px;margin:16px 0;background:var(--panel)}
.sx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sx-main{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.sx-main b{font:800 34px/1 var(--display)}
.sx-sub{display:block;color:var(--ink3);font:600 11px/1.3 var(--hud);letter-spacing:.06em;margin-top:4px}
.sx-mine{margin-top:10px;font-size:15px}.sx-mine b{font-size:18px}
.sx-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sx-sizes span{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);font:700 13px/1.2 var(--hud)}
.sx-sizes span i{font-style:normal;font-size:10px;color:var(--ink3)}
.sx-sizes span.under{color:var(--good)}
.sx-sizes span.mine{outline:2px solid var(--c)}
/* market prices box (heatBox): the cheapest new pair anywhere, what pairs sell for, stock by size */
.hm-box{border:1px solid var(--line2);border-radius:16px;padding:16px;margin:16px 0;background:var(--panel)}
.hm-box.hm-none{padding:12px 16px}.hm-none .sx-sub{letter-spacing:0;font:500 13px/1.4 var(--body);text-transform:none}
.hm-mine{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.06);display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:15px}
.hm-mine b{font-size:18px}.hm-mine small{color:var(--ink3);font:600 11px/1.4 var(--body)}
.hm-mine.under{border-color:rgba(53,224,160,.45);background:rgba(53,224,160,.07)}
.hm-mine.over{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.06)}
.hm-mine.far{border-color:rgba(197,139,255,.4);background:rgba(197,139,255,.06)}
.hm-move{font:700 11px/1 var(--hud);letter-spacing:.06em}.hm-move.down{color:var(--good)}.hm-move.up{color:var(--warn)}
.hm-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.hm-stats div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);display:flex;flex-direction:column;gap:3px}
.hm-stats b{font:800 20px/1.1 var(--display)}.hm-stats span{color:var(--ink3);font:600 10px/1.35 var(--hud);letter-spacing:.06em;text-transform:uppercase}
.hm-h{margin:20px 0 8px;font:700 11px/1.3 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hm-chart{border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:8px 6px 4px}
.hm-svg{display:block;width:100%;height:auto;overflow:visible}
.hm-t{font:600 10px var(--hud);fill:var(--ink3);letter-spacing:.02em}.hm-t.hm-n{fill:var(--ink2);font-weight:700}.hm-t.hm-s{fill:var(--ink);font-weight:700}
.hm-t.hm-p{font-size:9px;letter-spacing:0}
.hm-grid{stroke:rgba(255,255,255,.07)}
.hm-mini{padding:2px 4px 0}.hm-mini b{display:block;font:700 10px/1.6 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.hm-tabs{display:flex;gap:6px;margin:0 0 10px}
.hm-tabs button{flex:1;height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);font:700 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer}
.hm-tabs button.on{border-color:var(--c);color:var(--ink);box-shadow:0 0 0 1px var(--c) inset}
.hm-sites{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hm-site{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}.hm-site:first-child{border-top:0}
.hm-site.best{background:rgba(53,224,160,.07)}.hm-site.best .hm-pr{color:var(--good)}
.hm-s{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.hm-s b{font:700 14px/1.2 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-s small{color:var(--ink3);font:600 11px/1.3 var(--body)}.hm-s em{font-style:normal;color:var(--warn)}
.hm-pr{font:800 18px/1 var(--display);white-space:nowrap}
.hm-where:empty{display:none}
.hm-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.hm-chips button{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font:700 12px/1 var(--body);color:var(--ink2);cursor:pointer}
.hm-chips button.on{background:var(--ink);color:#0B0D14;border-color:var(--ink)}
.hm-pct{font:700 11px/1 var(--body);white-space:nowrap}.hm-pct.under{color:var(--good)}.hm-pct.over{color:var(--rumor)}
.hm-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;font:600 12px/1.3 var(--body);color:var(--ink2)}.hm-strip:hover{border-color:var(--c)}.hm-strip>span{display:flex;flex-direction:column;gap:3px;min-width:0}.hm-tw{color:var(--ink);font-weight:600}.hm-open{color:var(--c);font-weight:700;letter-spacing:.02em}.hm-x{margin-top:8px}.hm-x .hm-chart{max-width:680px}.px-box{margin:14px 0 4px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:rgba(34,211,238,.05)}.px-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}.px-form label{display:flex;flex-direction:column;gap:4px;font:600 11px/1.2 var(--hud);letter-spacing:.06em;color:var(--ink3);text-transform:uppercase}.px-form select,.px-form input{height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);padding:0 10px;font:600 15px var(--body)}.px-usd{display:flex;align-items:center;gap:4px;color:var(--ink);font:700 15px var(--body)}.px-usd input{width:110px}.px-on{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.px-on small{display:block;color:var(--ink3);margin-top:2px}.px-on b{color:var(--good)}.pt-res>.pt-mk{grid-column:1/-1;min-width:0}.pt-res>span.ar-acts{max-width:430px}@media (max-width:1020px){.pt-res>span.ar-acts{grid-column:1/-1;max-width:none;justify-content:flex-start!important}}.pt-mk .hm-strip small{font:600 12px/1.3 var(--body);letter-spacing:0;color:var(--ink2)}.pt-mk .hm-strip .hm-tw{color:var(--ink)}.pt-mk .hm-strip .hm-open{color:var(--c)}.pt-mk .hm-x b{display:inline}.hm-strip b{color:var(--ink);font-size:14px}.hm-strip i{font-style:normal;color:var(--ink3)}
.hm-strip.under i{color:var(--good)}.hm-strip.over i{color:var(--warn)}.hm-strip.far i{color:var(--rumor)}.hm-spark{width:120px;height:28px;flex:none}
.mcard .hm-strip{margin:6px 0 2px}
.hm-legend{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font:600 10px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.hm-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hm-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.hm-flow span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);font:600 12px/1 var(--body);color:var(--ink2)}.hm-flow b{color:var(--ink)}
.hm-flow small{color:var(--ink3);font:600 10px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase}
.hm-cta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.hm-note{display:block;margin:10px 0 0;color:var(--ink3);font:600 11px/1.5 var(--body)}
/* private stats page */
.stat-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (max-width:1200px){.stat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat-cards .panel{padding:16px}
.stat-cards b{display:block;font:800 34px/1.1 var(--display);margin:6px 0 2px}
.stat-cards small{color:var(--ink3);font:600 11px/1.3 var(--hud);letter-spacing:.06em}

/* Traffic Intelligence (Oct 19 2026): cyan = human (solid verified, hatched likely: the hatch is the second cue), grey = unknown, orange = automated; #139fbd and #d95926 pass the dataviz
   validator on this surface (CVD 15.9+, contrast 3:1); grey is the neutral "no evidence" class, not a series. */
.ti-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:6px 0 14px}
.ti-ranges{display:flex;gap:6px;flex-wrap:wrap}
.ti-custom{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--ink2)}
.ti-custom input{height:34px}
.ti-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ti-f{display:grid;gap:3px;font:600 11px/1.2 var(--hud);color:var(--ink3);letter-spacing:.06em}
.ti-f select{height:34px;min-width:112px}
.ti-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 12px}
@media (max-width:1200px){.ti-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.ti-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.ti-tile b{font-size:26px}}
.ti-tile{border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;display:grid;gap:5px;align-content:start}
.ti-tile b{font:800 30px/1.1 var(--display)}
.ti-tag{justify-self:start;white-space:nowrap;font:700 10px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid currentColor}
.ti-tag.k-measured{color:var(--good)}.ti-tag.k-estimate{color:var(--warn)}.ti-tag.k-unavailable{color:var(--ink3)}
.ti-tile small{color:var(--ink3);font-size:12px;line-height:1.35}
.ti-classes{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;color:var(--ink2);margin:0 0 6px}
.ti-classes b{font:800 20px/1 var(--display);color:var(--ink);margin-right:4px}.ti-classes small{color:var(--ink3)}
.ti-chart{margin:18px 0 0}.ti-ch{display:grid;gap:2px}.ti-ch small{color:var(--ink3)}
.ti-keys{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink2);margin:8px 0 0}.ti-key b{color:var(--ink);margin-left:2px}
.ti-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.ti-plot{position:relative;display:flex;align-items:flex-end;gap:2px;height:170px;margin:10px 0 0 34px;border-bottom:1px solid rgba(255,255,255,.16)}
.ti-g{position:absolute;left:-34px;right:0;border-top:1px solid rgba(255,255,255,.07);pointer-events:none}
.ti-g em{position:absolute;left:0;top:-8px;font:600 10px/1 var(--hud);color:var(--ink3);font-style:normal}
.ti-col{flex:1 1 0;min-width:2px;height:100%;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;position:relative;z-index:1;outline-offset:2px}
.ti-col:hover,.ti-col:focus{background:rgba(255,255,255,.06)}
.ti-seg{display:block;width:100%;max-width:40px;border-radius:3px 3px 0 0;min-height:2px}
.ti-seg.vh,.ti-sw.vh{background:#139fbd}
.ti-seg.lh,.ti-sw.lh{background:repeating-linear-gradient(45deg,#139fbd 0 3px,rgba(19,159,189,.3) 3px 6px)}
.ti-seg.un,.ti-sw.un{background:#566079}
.ti-seg.bt,.ti-sw.bt{background:#d95926}
.ti-seg.g1,.ti-sw.g1{background:#3fae6e}
.ti-seg.g2,.ti-sw.g2{background:#d4a72c}
.ti-seg.g3,.ti-sw.g3{background:#8b6fd6}
.ti-seg.g4,.ti-sw.g4{background:repeating-linear-gradient(45deg,#6fa8c9 0 3px,rgba(111,168,201,.3) 3px 6px)}
.ti-x{display:flex;justify-content:space-between;margin:4px 0 0 34px;color:var(--ink3);font:600 11px/1 var(--hud)}
.ti-nums{margin-top:8px}.ti-nums>summary,.ti-more>summary{cursor:pointer;color:var(--ink2)}
.ti-h{margin:24px 0 8px;font:700 16px/1.2 var(--display)}
.ti-ug{display:grid;gap:6px}.ti-ugr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px}.ti-ugr b{font:800 22px/1.1 var(--display)}.ti-ugr small{display:block;color:var(--ink3);margin-top:3px}
.ti-reg{display:grid;gap:6px}.ti-rg{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:10px}.ti-rg.w{opacity:.8}.ti-rg>b{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.ti-rg small{display:block;color:var(--ink3);margin-top:3px;overflow-wrap:anywhere}.ti-rg .ti-read.r-miss{color:var(--warn)}
.ti-read{white-space:nowrap;font:700 11px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase;margin-right:4px}.ti-read.r-people{color:var(--good)}.ti-read.r-programs{color:var(--ink3)}.ti-read.r-unsure{color:var(--warn)}
.ti-funnel{display:grid;gap:10px}.ti-sl{display:flex;justify-content:space-between;gap:10px}.ti-sl b{font-variant-numeric:tabular-nums}
.ti-bar{height:8px;background:rgba(255,255,255,.07);border-radius:4px;margin:4px 0}.ti-bar i{display:block;height:100%;background:#139fbd;border-radius:4px}
.ti-step small{color:var(--ink3)}
.ti .stat-scroll{overflow-x:auto;max-width:100%}.ti-table{width:100%;border-collapse:collapse;font-size:13px}.ti-table th,.ti-table td{padding:6px 8px;border-top:1px solid rgba(255,255,255,.07);text-align:right;vertical-align:top}
.ti-table th{color:var(--ink3);font:700 11px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase}.ti-table td.l,.ti-table th:first-child{text-align:left}
.ti-more{margin-top:14px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.ti-modes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ti-pre{white-space:pre-wrap;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;background:rgba(255,255,255,.04);padding:10px 12px;border-radius:8px;margin:8px 0}
.ti-lim{color:var(--ink2);padding-left:18px;display:grid;gap:4px;font-size:13px;margin:6px 0}
.ti-tip{position:absolute;z-index:200;display:none;background:#10131c;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 10px;font-size:12px;pointer-events:none;min-width:130px}
.ti-tip b{display:block;margin-bottom:3px}
.fold{padding:0}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;min-height:52px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"▸";color:var(--c);font-size:18px;transition:transform .15s;flex:none}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary .panel-top{display:contents}
.fold>summary h3{margin:0!important;font:800 16px/1.15 var(--display);font-stretch:112%;text-transform:uppercase}
.fold>summary .sp{margin-left:auto;text-align:right}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold-body{padding:14px 16px 16px}
.bars{display:flex;align-items:flex-end;gap:4px;height:170px;padding:10px 4px 0}
.bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.bars i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;background:var(--grad)}
.bars span{font:600 9px/1 var(--hud);color:var(--ink3)}
/* The stats page's traffic chart (trafficPanel): measure tabs, period switch, columns on a numbered hairline grid */
.tc-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:4px 0 14px}
.tc-account-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:4px 0 14px}
.tc-account-summary>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.tc-account-summary span,.tc-account-summary small{display:block;color:var(--ink2);font-size:12px}
.tc-account-summary b{display:block;color:var(--ink);font:800 26px/1.2 var(--display);margin:4px 0}
.tc-tab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);text-align:left;cursor:pointer;min-width:0}
.tc-tab span{font:600 11px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.tc-tab b{font:800 22px/1.1 var(--display);color:var(--ink)}
.tc-tab.two b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}   /* "312 · 1,036": two numbers in one tab */
.tc-tab:hover{border-color:var(--line2)}
.tc-tab[aria-selected="true"]{border-color:#139fbd;background:rgba(19,159,189,.12);box-shadow:inset 0 -3px 0 #139fbd}
.tc-tab[aria-selected="true"] span{color:var(--ink)}
@media (max-width:760px){.tc-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-tab b{font-size:18px}.tc-tab.two b{font-size:15px}}
.tc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.tc-sum{min-width:0;color:var(--ink2)}
.tc-sum>b{font:800 34px/1 var(--display);color:var(--ink);margin-right:4px}
.tc-sum>span{color:var(--ink3)}
.tc-sum small{display:block;margin-top:6px;font-size:13px;color:var(--ink3)}
.tc-sum small b.up{color:var(--good)}.tc-sum small b.down{color:var(--warn)}
.tc-pers{display:inline-flex;padding:3px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
.tc-per{border:0;background:none;color:var(--ink2);font:600 12px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:8px;cursor:pointer}
.tc-per[aria-pressed="true"]{background:#139fbd;color:#05060a}
.tc-chart{--pl:44px;position:relative;padding-left:var(--pl)}
.tc-plot{position:relative;height:240px;margin-top:18px}
/* the second row (sign-ups under the measure picked, Oct 17 2026): same day columns, its own scale, its own baseline; sign-ups are always orange
   (#d95926 passes the dataviz validator beside the cyan on this dark surface: CVD 19.9, normal vision 28.8, contrast 3:1) */
.tc-chart.has-sub .tc-plot{border-bottom:1px solid rgba(255,255,255,.16)}
.tc-chart.has-sub .tc-x{border-top:0}
.tc-plot.tc-sm{height:104px}
.tc-sub-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:18px 0 0 calc(var(--pl)*-1);color:var(--ink2);font-size:13px}
.tc-sub-h>b{font:800 22px/1 var(--display);color:var(--ink);margin-right:-2px}
.tc-sub-h span,.tc-sub-h small{color:var(--ink3)}
.tc-sw{align-self:center;width:10px;height:10px;border-radius:3px;background:#139fbd}
.tc-sw.m-signups,.tc-tip b.k-signups::before{background:#d95926}
.tc-keys{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline}
.tc-key{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink2)}
.tc-key b{font:800 34px/1 var(--display);color:var(--ink)}
.tc-sw.m-new{background:#139fbd}
.tc-sw.m-new_minutes,.tc-tip b.k-new::before{background:#139fbd}
.tc-sw.m-account_minutes{background:#a775f0}
.tc-plot.grouped .tc-c i.s-new_minutes{background:#139fbd}
.tc-plot.grouped .tc-c i.s-account_minutes{background:#a775f0}
.tc-plot.grouped .tc-c.cur i.s-new_minutes{background:rgba(19,159,189,.5)}
.tc-plot.grouped .tc-c.cur i.s-account_minutes{background:rgba(167,117,240,.5)}
.tc-plot.grouped .tc-c:hover i.s-new_minutes,.tc-plot.grouped .tc-c:focus-visible i.s-new_minutes,.tc-plot.grouped .tc-c.pair i.s-new_minutes{background:#22d3ee}
.tc-plot.grouped .tc-c:hover i.s-account_minutes,.tc-plot.grouped .tc-c:focus-visible i.s-account_minutes,.tc-plot.grouped .tc-c.pair i.s-account_minutes{background:#c6a5fb}
.tc-sw.m-returning,.tc-tip b.k-returning::before{background:#008300}   /* returning is green, new is cyan, as in Coming back (#008300 beside #139fbd passes the dataviz checks on this surface: CVD 20.9, normal vision 22.3) */
.tc-plot.grouped .tc-c{display:flex;align-items:flex-end;justify-content:center;gap:1px}
.tc-plot.grouped .tc-c i{position:static;transform:none;width:min(11px,40%);flex:none;border-radius:3px 3px 0 0}
.tc-plot.grouped .tc-c i.s-new{background:#139fbd}
.tc-plot.grouped .tc-c i.s-returning{background:#008300}
.tc-plot.grouped .tc-c.cur i.s-new{background:rgba(19,159,189,.5)}
.tc-plot.grouped .tc-c.cur i.s-returning{background:rgba(0,131,0,.6)}
.tc-plot.grouped .tc-c:hover i.s-new,.tc-plot.grouped .tc-c:focus-visible i.s-new,.tc-plot.grouped .tc-c.pair i.s-new{background:#22d3ee}
.tc-plot.grouped .tc-c:hover i.s-returning,.tc-plot.grouped .tc-c:focus-visible i.s-returning,.tc-plot.grouped .tc-c.pair i.s-returning{background:#22b04a}
.tc-plot.grouped .tc-c em.e0{left:calc(50% - 5px)}
.tc-plot.grouped .tc-c em.e1{left:calc(50% + 5px)}
.tc-plot.m-signups .tc-c i{background:#d95926}
.tc-plot.m-signups .tc-c.cur i{background:rgba(217,89,38,.5)}
.tc-plot.m-signups .tc-c:hover i,.tc-plot.m-signups .tc-c:focus-visible i,.tc-plot.m-signups .tc-c.pair i{background:#f08150}
.tc-g{position:absolute;left:0;right:0;height:0;border-top:1px solid rgba(255,255,255,.08)}
.tc-g span{position:absolute;right:100%;margin-right:8px;transform:translateY(-50%);font:500 11px/1 var(--hud);color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.tc-c{position:relative;height:100%;cursor:default;outline:none}
.tc-c i{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(24px,72%);min-height:2px;border-radius:4px 4px 0 0;background:#139fbd;transition:background .15s}
.tc-c.cur i{background:rgba(19,159,189,.5)}
.tc-c:hover i,.tc-c:focus-visible i{background:#22d3ee}
.tc-c:focus-visible{box-shadow:inset 0 0 0 1px rgba(34,211,238,.5);border-radius:6px}
.tc-c.pair{background:rgba(255,255,255,.05);border-radius:6px}   /* the day under the finger lights up in both rows */
.tc-c.pair i{background:#22d3ee}
.tc-c em{position:absolute;left:50%;transform:translate(-50%,-4px);font:700 11px/1 var(--hud);font-style:normal;color:var(--ink);white-space:nowrap;pointer-events:none}
.tc-x{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16);padding-top:6px}
.tc-x span{font:500 11px/1.2 var(--hud);color:var(--ink3);text-align:center;white-space:nowrap;overflow:visible}
.tc-tip{position:absolute;transform:translateX(-50%);z-index:3;pointer-events:none;padding:8px 10px;border-radius:10px;background:#0b0d14;border:1px solid var(--line2);box-shadow:0 8px 24px rgba(0,0,0,.45);white-space:nowrap}
.tc-tip b{display:block;font:800 15px/1.2 var(--display);color:var(--ink)}
.tc-tip b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;background:#139fbd}
.tc-tip b+b{margin-top:3px}
.tc-tip span{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.tc-table{margin-top:14px}
.tc-table summary{cursor:pointer;color:var(--c);font-weight:700;font-size:14px}
.tc-scroll{overflow-x:auto;margin-top:10px}
.tc-table table{width:100%;border-collapse:collapse;font-size:13px}
.tc-table th,.tc-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-table th:first-child,.tc-table td:first-child{text-align:left}
.tc-table th{font:600 11px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.tc-table td small{color:var(--ink3)}
.tc-note{margin:12px 0 0;font-size:12px;color:var(--ink3)}
@media (max-width:560px){.tc-key b{font-size:26px}.tc-chart{--pl:34px}.tc-plot{height:200px}.tc-plot.tc-sm{height:92px}.tc-x span,.tc-g span{font-size:10px}.tc-sum>b{font-size:28px}
  .tc-pers{display:flex;width:100%}.tc-per{flex:1;padding:8px 2px;font-size:11px;letter-spacing:.03em}#tcPanel .panel-top .sp{display:none}}
.stat-list div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.stat-list span{min-width:0;overflow-wrap:anywhere}
.stat-scroll{max-height:var(--sh,360px);overflow:auto}
@media (pointer:coarse),(max-width:760px){.stat-scroll{max-height:none;overflow:visible}}   /* a list that scrolls inside the page traps a finger and cuts a row in half: on a phone it runs down the page instead */
.trail{margin-top:4px}.trail summary{cursor:pointer;color:var(--c);font-size:13px}.trail ol{margin:6px 0 2px;padding-left:0;list-style:none;display:grid;gap:3px;font-size:13px;color:var(--ink2)}
.trail li span{display:inline-block;min-width:38px;color:var(--ink3);font:600 12px var(--hud)}
.ut-row{border-bottom:1px solid var(--line);padding:8px 0}.ut-row summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.ut-row summary::-webkit-details-marker{display:none}
.ut-who{min-width:0;overflow-wrap:anywhere}.ut-who small,.ut-n small{display:block;color:var(--ink3);font-size:12.5px}.ut-n{text-align:right;white-space:nowrap}.ut-n b{font:700 16px/1.2 var(--hud);color:var(--ink)}
@media (max-width:560px){.ut-row summary{flex-direction:column}.ut-n{text-align:left;white-space:normal}}
.sg-table{overflow-x:auto;margin:6px 0 4px}.sg-table table{width:100%;border-collapse:collapse;font-size:14px}
.sg-table th,.sg-table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.sg-table th{color:var(--ink3);font:600 11px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.sg-table td.n,.sg-table th.n{text-align:right;white-space:nowrap}.sg-why{display:block;color:var(--ink3);font-size:12.5px;margin-top:2px}
.pr-work{background:rgba(19,159,189,.08);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0 14px}.pr-work ul{margin:6px 0 0;padding-left:18px}.pr-work li{margin:3px 0;font-size:14px;color:var(--ink2)}
.gr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 6px}@media(min-width:900px){.gr-cards{grid-template-columns:repeat(4,1fr)}}.gr-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}
.gr-card b{display:block;font:700 26px/1.1 var(--display);margin:4px 0 2px}.gr-card small{display:block;color:var(--ink3);font-size:12.5px}
.gr-box{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0;background:rgba(255,255,255,.03)}.gr-box.warn{border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.07)}.gr-box ul{margin:6px 0 0;padding-left:18px}.gr-box li{margin:3px 0;font-size:14px;color:var(--ink2)}
.gr-slots{display:grid;gap:2px}.gr-slot{display:grid;grid-template-columns:86px 130px 120px 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:14px;align-items:start}.gr-t{color:var(--ink);font-weight:600;white-space:nowrap}.gr-c{color:var(--ink2)}.gr-h{color:var(--ink2);overflow-wrap:anywhere}
@media(max-width:640px){.gr-slot{grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px}.gr-slot .gr-s,.gr-slot .gr-h{grid-column:1 / -1}.gr-box+h3,.gr-cards+h3{margin-top:16px}}
.gr-top-label{margin-top:10px}
.pr-post{border-top:1px solid var(--line)}.pr-post summary{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer;list-style:none}.pr-post summary::-webkit-details-marker{display:none}
.pr-head{display:block;min-width:0;overflow-wrap:anywhere}.pr-head small{display:block;color:var(--ink3);margin-top:2px}.pr-head a{color:var(--c)}.pr-nums{white-space:nowrap;text-align:right;font-size:14px}.pr-body{padding:0 0 12px}.pr-body h4{margin:12px 0 2px;font-size:13px;color:var(--ink2)}
@media(max-width:640px){.pr-post summary{flex-direction:column}.pr-nums{text-align:left;white-space:normal}}
.lm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}.lm-grid label{display:grid;gap:4px}
.lm-out{margin-top:12px;display:grid;gap:8px}.lm-out div{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.lm-out code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;color:var(--ink)}
.lm-out .lt-link{flex-wrap:wrap}.lm-out .lt-link small{flex:1 0 100%;min-width:0;color:var(--ink3)}.lm-out .lt-link code{flex:1 1 180px}
/* what Google (and anyone without JavaScript) sees on /shoe/<id> before the page code takes over */
.seo-shoe{padding:30px 0}.seo-shoe img{max-width:100%;height:auto;border-radius:14px;background:#fff}.seo-shoe a{color:var(--c)}
/* the same for the lists, articles and offers the server writes into every page (seoauto/render.py): crawlers read them, the page code replaces them */
.seo-list,.seo-article,.seo-extra{padding:24px 0}.seo-list h1,.seo-article h1{font:800 clamp(28px,5vw,44px)/1.05 var(--display);margin:0 0 10px}
.seo-list p,.seo-article p,.seo-extra p{color:var(--ink2)}.seo-list a,.seo-article a,.seo-extra a{color:var(--c)}.seo-article h2,.seo-extra h2{font:700 20px/1.2 var(--display);margin:18px 0 8px}
.seo-list .cards,.seo-extra .cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.seo-list .cards li,.seo-extra .cards li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)}.seo-list small,.seo-extra small{display:block;color:var(--ink3)}
.seo-extra .box{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px 16px;margin:16px 0}.seo-extra .box h2{margin-top:0}
.seo-extra table{width:100%;border-collapse:collapse;font-size:14px}.seo-extra th,.seo-extra td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}.seo-extra ul.list{padding-left:18px}.seo-extra .stamp{color:var(--ink3);font-size:12px}
/* "What we've seen for this pair" (shoeseen.py writes the html: crawlers get it in the page, the app asks for the same words) */
.seen{border:1px solid rgba(34,211,238,.45);border-radius:var(--r);background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(123,97,255,.04));padding:18px 18px 14px;margin:16px 0}
.seen h2{font:800 22px/1.15 var(--display);margin:0 0 4px;color:var(--ink)}.seen h3{font:700 11px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin:16px 0 8px}
.seen-sub,.seen-none{color:var(--ink2);margin:0 0 12px;font-size:14px}.seen-note{color:var(--ink2);margin:0 0 6px;font-size:15px}
.seen-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}.seen-tile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.seen-tile small{display:block;color:var(--ink3);font:500 10px/1.2 var(--hud);letter-spacing:.1em;text-transform:uppercase}.seen-tile b{display:block;font:800 19px/1.15 var(--display);margin-top:3px;color:var(--ink)}.seen-tile em{font-style:normal;color:var(--ink2);font-size:12px}
.seen-tl{list-style:none;margin:0;padding:0}.seen-tl li{display:grid;grid-template-columns:104px 16px 1fr;gap:8px;align-items:start;padding:7px 0;border-top:1px solid var(--line)}.seen-tl li:first-child{border-top:0}
.seen-when{font:600 13px var(--hud);color:var(--ink)}.seen-when small{display:block;color:var(--ink3);font:400 11px var(--body)}.seen-dot{width:9px;height:9px;border-radius:50%;background:var(--c);margin-top:6px;box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.seen-what{color:var(--ink2);font-size:14px}.seen-what b{color:var(--ink)}.seen-small,.seen-foot{color:var(--ink3);font-size:12.5px;margin:6px 0 0}
@media(max-width:640px){.seen-tiles{grid-template-columns:1fr 1fr}.seen-tl li{grid-template-columns:88px 14px 1fr}}
.brand-pick .bp-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.brand-pick .bp-top .sp{flex:1}
.brand-pick .chips{display:flex;flex-wrap:wrap;gap:8px}
.brand-pick .chip[aria-pressed="false"]{opacity:.55}
.brand-bar{margin:0 0 14px;padding:14px 16px}
.brand-bar summary{cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;list-style:none}
.brand-bar summary::-webkit-details-marker{display:none}
.brand-bar summary::after{content:"▾";margin-left:auto;color:var(--ink3)}
.brand-bar[open] summary{margin-bottom:12px}
.brand-bar[open] summary::after{content:"▴"}
.picker label{display:flex;flex-direction:column;gap:6px}
.picker select{height:44px;min-width:220px;border-radius:12px;border:1px solid var(--line2);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9B0BE' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding:0 38px 0 14px;font:600 14px/1 var(--body);color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer}
.picker select:disabled{opacity:.5;cursor:default}
.picker select option{background:#0B0D14;color:var(--ink)}
.szwrap{display:flex;flex-direction:column;gap:6px}
.szbtn{height:44px;min-width:220px;border-radius:12px;border:1px solid var(--line2);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9B0BE' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding:0 38px 0 14px;font:600 14px/1 var(--body);color:var(--ink);text-align:left;cursor:pointer}
.szbtn[aria-expanded="true"]{border-color:var(--accent,#7B61FF)}
.szpanel{margin:6px 0 14px;padding:14px 16px}
.szhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.szhead span{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:560px){.picker{width:100%}.picker label{flex:1}.picker select{min-width:0;width:100%}.szwrap{flex:1}.szbtn{min-width:0;width:100%}}

/* ---------- hype votes + Top 10 ---------- */
.vote{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:rgba(5,6,10,.5)}
.vote button{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border:0;background:transparent;font:700 12px/1 var(--hud);letter-spacing:.06em;color:var(--ink2);cursor:pointer}
.vote button+button{border-left:1px solid var(--line2)}
.vote button:hover{color:var(--ink);background:var(--panel2)}
.vote button[data-vote="1"][aria-pressed="true"]{color:#05060A;background:linear-gradient(90deg,#FF4D2E,#FFB020)}
.vote button[data-vote="-1"][aria-pressed="true"]{color:#05060A;background:var(--c)}
.vote.lg button{height:42px;padding:0 16px;font-size:14px}
/* Cop or Drop (Home): one big drop at a time, two big buttons, then what everyone picked */
.cod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center;padding:20px}
.cod .plate{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--panel2)}
.cod .plate img{width:100%;height:100%;object-fit:contain}
.cod h3{margin:6px 0 2px;font-size:clamp(20px,3.4vw,28px);line-height:1.1}
.cod-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cod-btns button{height:58px;border-radius:14px;border:1px solid var(--line2);font:800 18px/1 var(--hud);letter-spacing:.1em;cursor:pointer;color:var(--ink);background:var(--panel2)}
.cod-btns button[data-vote="1"]{background:linear-gradient(90deg,#FF4D2E,#FFB020);color:#05060A;border:0}
.cod-btns button[data-vote="-1"]:hover{background:var(--c);color:#05060A}
.cod-bar{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:8px}
.cod-bar span{display:block;height:100%;background:linear-gradient(90deg,#FF4D2E,#FFB020)}
.cod-pct{margin-top:6px;font:700 13px/1.3 var(--hud);letter-spacing:.04em;color:var(--ink2)}
.cod-last{display:flex;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid var(--line2)}
.cod-last img{width:64px;height:48px;object-fit:contain;border-radius:8px;background:var(--panel2)}
@media (max-width:700px){ .cod{grid-template-columns:1fr} }
.nudge{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;width:min(520px,calc(100vw - 32px));display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#10121a;border:1px solid var(--line2);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.nudge p{margin:0;flex:1;font-size:14px;color:var(--ink2)}.nudge b{color:var(--ink)}
.top10{display:flex;flex-direction:column;gap:12px}
.top-row{display:grid;grid-template-columns:70px minmax(0,220px) 1fr auto;gap:18px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.top-row:hover{border-color:rgba(255,77,46,.5);transform:translateY(-2px)}
.top-row .rank{font:900 54px/1 var(--display);font-stretch:120%;text-align:center;background:linear-gradient(180deg,#FF4D2E,#FFB020);-webkit-background-clip:text;background-clip:text;color:transparent}
.top-row .plate{aspect-ratio:16/10;border-radius:12px}
.top-row .plate img{object-fit:contain}
.top-row h3{font:800 clamp(17px,2vw,22px)/1.2 var(--display);font-stretch:104%}
.top-row h3 em{font-style:normal;color:var(--ink2)}
.top-row .meta{margin-top:6px;font:600 11px/1.4 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.hype-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden;max-width:320px}
.hype-bar i{display:block;height:100%;background:linear-gradient(90deg,#FF4D2E,#FFB020)}
@media (max-width:720px){.top-row{grid-template-columns:44px 110px 1fr;gap:10px}.top-row .rank{font-size:34px}.top-row .side{grid-column:1/-1;justify-self:start}}

/* ---------- price tracker ---------- */
.pt-search{position:relative;max-width:640px}
.pt-search input{width:100%;height:54px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);padding:0 16px 0 46px;font-size:16px}
.pt-search svg{position:absolute;left:16px;top:18px;color:var(--ink3)}
.pt-results{display:flex;flex-direction:column;margin-top:10px;max-width:640px}
.pt-res{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:12px;border:1px solid transparent;background:none;text-align:left;color:var(--ink)}
/* the buttons (I own it, Hunting, StockX, GOAT, eBay, stores) never squeeze the shoe's name: they wrap on wide screens and
   get their own line under 1020px (the name had shrunk to one letter a line in the Archive) */
.pt-res>span:last-child{max-width:430px}
@media (max-width:1020px){.pt-res{grid-template-columns:150px minmax(0,1fr)}.pt-res>span:last-child{grid-column:1/-1;max-width:none;justify-content:flex-start!important}}
@media (max-width:560px){.pt-res{grid-template-columns:112px 1fr}.pt-res>span:last-child{grid-column:1/-1}.pt-res .plate{width:112px!important;height:84px!important}}
.pt-res:hover,.pt-res[aria-pressed="true"]{background:var(--panel);border-color:var(--line2)}
.pt-res .plate{width:150px;height:112px;border-radius:12px}
/* Tap a shoe photo to see it full screen (Stan: "larger photos so people can actually look at the shoe") */
[data-zoom] img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:300;background:rgba(5,6,10,.98);display:flex;flex-direction:column;align-items:center;padding:60px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.zoom[hidden]{display:none}
/* the photo has a stage of its own (it zooms and moves inside it); the ✕ sits on the dark, and the ‹ › + - buttons sit in the bar below, never on the photo */
.zoom-stage{flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.zoom-stage img{max-width:min(100%,1400px);max-height:100%;width:auto;height:auto;object-fit:contain;background:radial-gradient(120% 90% at 50% 30%,#FFFFFF 0%,#E9EAEE 100%);border-radius:14px;transform-origin:50% 50%;cursor:zoom-in;-webkit-user-drag:none}
.zoom-stage:not(.dragging) img{transition:transform .18s ease-out}
.zoom-stage.zoomed img{cursor:grab}.zoom-stage.dragging img{cursor:grabbing}
.zoom p{flex:0 0 auto;color:var(--ink);font:600 13px/1.4 var(--body);margin:8px 0 0;text-align:center;max-width:720px}
.zoom-bar{flex:0 0 auto;width:100%;max-width:520px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.zoom-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.zoom-nav{flex:0 0 48px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:28px;line-height:1;cursor:pointer;padding:0 0 3px}
.zoom-nav:hover,.zoom-tools button:not(:disabled):hover{border-color:var(--c)}
.zoom-n{font:700 12px/1 var(--hud);letter-spacing:.12em;color:var(--ink2)}
.zoom-tools{display:flex;gap:8px}
.zoom-tools button{width:48px;height:36px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;padding:0 0 2px}
.zoom-tools button:disabled{opacity:.35;cursor:default}
.zoom-hint{font:600 11px/1.2 var(--body);color:var(--ink3)}
.zoom-hint .h-out,.zoom.is-zoomed .zoom-hint .h-in{display:none}
.zoom.is-zoomed .zoom-hint .h-out{display:inline}
.zoom-strip{flex:0 0 auto;display:flex;gap:8px;margin-top:10px;max-width:96vw;overflow-x:auto;padding:3px}
.zoom-strip button{flex:0 0 auto;width:54px;height:54px;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;background:var(--plate);cursor:pointer;opacity:.7}
.zoom-strip button[aria-current=true]{border-color:var(--c);opacity:1}
.zoom-strip img{width:100%;height:100%;object-fit:contain;display:block}
.zoom-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:18px;cursor:pointer}
/* Post studio (admin only): the Make a post window */
.studio{position:fixed;inset:0;z-index:310;background:rgba(5,6,10,.92);overflow:auto;padding:16px;display:flex;justify-content:center;align-items:flex-start}
.studio[hidden]{display:none}
body.studio-open{overflow:hidden}
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:120;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:calc(100vw - 24px);padding:10px 14px;background:var(--bg2);border:1px solid var(--c);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tray[hidden],body.studio-open .tray{display:none}
.stu-shoe{display:inline-flex;align-items:center;gap:6px;cursor:default}
.stu-chipx{background:none;border:0;color:inherit;cursor:pointer;padding:0 2px;font-size:13px;line-height:1}
a.stu-ph{display:block}
.stu{width:min(780px,100%);margin:auto 0;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;padding:18px 18px 20px;position:relative}
.stu h2{margin:0 44px 4px 0;font:700 20px/1.2 var(--body);color:var(--ink);overflow-wrap:anywhere}
.stu .stu-sub{margin:0 0 14px;color:var(--ink3);font:600 11px/1.4 var(--hud);letter-spacing:.06em}
.stu-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:16px;cursor:pointer}
.stu-angles{margin:0 0 14px}
.stu-prev{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:14px}
.stu-card{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--panel);display:block}
.stu-card.wide{aspect-ratio:1200/630}
.stu-head[hidden]{display:none}
.stu-head{width:100%;aspect-ratio:4/5;border-radius:12px;background:#0b0c12;color:#fff;display:flex;align-items:flex-end;padding:16px;font:700 22px/1.15 var(--body);text-transform:uppercase}
.stu-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stu-ph{position:relative;padding:0;border:2px solid var(--line2);border-radius:10px;background:#fff;overflow:hidden;cursor:pointer;aspect-ratio:1/1}
.stu-ph img{width:100%;height:100%;object-fit:contain;display:block}
.stu-ph[aria-pressed="true"]{border-color:var(--c)}
.stu-ph::after{content:"";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:rgba(5,6,10,.55);border:2px solid #fff}
.stu-ph[aria-pressed="true"]::after{background:var(--c);content:"✓";color:#001018;font:700 13px/16px var(--body);text-align:center}
.stu label.l{display:block;margin:12px 0 6px;color:var(--ink3);font:600 11px/1.3 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.stu textarea{width:100%;min-height:210px;resize:vertical;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:12px;padding:12px;font:500 14px/1.45 var(--body)}
.stu-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.stu-bar .btn{flex:1 1 150px}
/* The performance report at the top of the stats page (Oct 30 2026): cards, the two lists, folded detail tables, and a print sheet that shows only a black-on-white copy of the report (#prfPrint). */
#perfReport .prf-sum{margin:6px 0 4px;font:600 16px/1.4 var(--body);color:var(--ink)}
.prf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 6px}
.prf-card{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg2);break-inside:avoid}
.prf-l{font-size:12px;color:var(--ink3)} .prf-n{font:700 24px/1.2 var(--display)} .prf-m{font-size:12px;margin-top:2px} .prf-u{font-size:11px;color:var(--ink3);margin-top:2px}
.prf-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.prf-ul{margin:0 0 8px;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.prf-ul small{color:var(--ink3);margin-left:6px;font-size:11px} .prf-ul li>div{font-size:13px;color:var(--ink3);margin-top:1px}
.prf-good li::marker{color:var(--good)} .prf-bad li::marker{color:var(--hot)}
.prf-t{font-size:13px;border-collapse:collapse;margin:4px 0 8px} .prf-t th{text-align:left;font-weight:600;color:var(--ink3);font-size:12px;padding:2px 12px 2px 0}
.prf-t td{padding:2px 12px 2px 0} .prf-t .r{text-align:right}
.prf-d{border-top:1px solid var(--line);padding:6px 0} .prf-d>summary{cursor:pointer;font-weight:600;color:var(--ink2)}
#prfPrint{display:none}
@media print{
  @page{margin:14mm}
  body.prf-printing>*:not(#prfPrint){display:none !important}
  body.prf-printing{background:#fff !important;color:#111 !important}
  body.prf-printing #prfPrint{display:block;--ink:#111;--ink2:#222;--ink3:#555;--line:#bbb;--bg2:#f3f3f3;--good:#0a7a3b;--hot:#b3261e;color:#111;background:#fff;font:13px/1.45 system-ui,Segoe UI,Arial,sans-serif}
  #prfPrint .prf-ph{font:700 24px/1.2 system-ui,Arial,sans-serif;margin:0 0 2px;color:#111}
  #prfPrint .prf-pd{margin:0 0 12px;color:#555}
  #prfPrint .prf-n{font-family:system-ui,Arial,sans-serif} #prfPrint .ti-h{font-family:system-ui,Arial,sans-serif;color:#111;margin:16px 0 6px;break-after:avoid}
  #prfPrint .stu-note,#prfPrint .prf-sum,#prfPrint .prf-t td,#prfPrint .prf-t th{color:#222}
  #prfPrint .prf-t,#prfPrint .prf-ul li{break-inside:avoid}
}
.stu-note{margin:12px 0 0;color:var(--ink2);font:500 14px/1.45 var(--body)}
.stu-note.bad{color:#ff8a8a}
.stu-note.good{color:var(--good)}
.stu-video{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.stu-video video{width:min(240px,100%);border-radius:12px;background:#000}
@media (max-width:640px){.stu-prev{grid-template-columns:minmax(0,1fr)}.stu-card,.stu-head{max-width:260px}.stu-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Raffles are shoes (Stan, Oct 11 2026): a grid of shoes, and a tap opens that shoe's "How to cop" sheet (Raffles / Releases / Buy Now) */
.rf-filters{flex:1 1 100%}
.rf-filters summary{list-style:none;cursor:pointer}.rf-filters summary::-webkit-details-marker{display:none}
.rf-filters summary::after{content:"▾";margin-left:6px;opacity:.7}.rf-filters[open] summary::after{content:"▴"}
.rf-body{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}
.cop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.cop-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.cop-new{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font:inherit;min-width:0}
.cop-new:hover,.cop-new:focus-visible{border-color:var(--c);outline:none}
.cop-new .cop-pic{aspect-ratio:1;border-radius:10px}
.cop-new .cop-txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.cop-new.fresh{animation:copFresh 2.6s ease-out}
@keyframes copFresh{0%{border-color:var(--good);box-shadow:0 0 0 3px rgba(53,224,160,.5)}100%{border-color:var(--line);box-shadow:0 0 0 0 rgba(53,224,160,0)}}
@media (prefers-reduced-motion:reduce){.cop-new.fresh{animation:none;border-color:var(--good)}}
.cop-row.is-shut{opacity:.6}
.cop-row.hl{background:rgba(34,211,238,.08);box-shadow:-6px 0 0 rgba(34,211,238,.08),6px 0 0 rgba(34,211,238,.08);border-radius:12px}
.cop-card{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.cop-card:hover,.cop-card:focus-visible{border-color:var(--c);transform:translateY(-1px);outline:none}
.cop-pic{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#FFFFFF 0%,#E9EAEE 100%)}
.cop-pic img{width:100%;height:100%;object-fit:contain;display:block}
.cop-name{font:700 14px/1.25 var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cop-name em,.cop-title em{font-style:normal;color:var(--c)}
.cop-card>small{color:var(--ink2);font:600 12px/1.2 var(--body)}
.cop-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:auto;padding-top:4px}
.cop-meta small{font:600 12px/1.2 var(--body);color:var(--ink2)}.cop-meta small.warn{color:var(--warn)}.cop-meta small.shut{color:#ff8a8a}.cop-meta small.ok{color:var(--good)}
@media (max-width:420px){.cop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cop-card{padding:8px}}
.cop{position:fixed;inset:0;z-index:66;display:flex;align-items:flex-end;justify-content:center}   /* over the page and a restock pop-up, under the toast (70) and the photo viewer (300) */
.cop-back{position:absolute;inset:0;background:rgba(2,3,6,.74)}
.cop-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0;border:1px solid var(--line2);border-bottom:0;background:var(--bg2);box-shadow:0 -18px 60px rgba(0,0,0,.6);outline:none;animation:copUp .22s ease-out}
@keyframes copUp{from{transform:translateY(26px);opacity:.3}to{transform:none;opacity:1}}
@media (min-width:700px){.cop{align-items:center}.cop-panel{border-radius:20px;border-bottom:1px solid var(--line2);max-height:90vh}}
@media (prefers-reduced-motion:reduce){.cop-panel{animation:none}}
body.cop-open{overflow:hidden}
body.cop-open #alertHost{display:none}
/* the soft wall's box (Oct 31 2026) and the sign-up modal */
.soft{margin:12px 0 0;padding:14px 16px;border-radius:14px;border:1px dashed var(--line2);background:linear-gradient(135deg,rgba(34,211,238,.09),rgba(34,211,238,.02))}
.soft-t{display:flex;align-items:center;gap:8px;font:700 15px/1.3 var(--body);color:var(--ink)}.soft-t .ico{width:20px;height:20px;flex:none}
.soft p{margin:6px 0 10px;color:var(--ink2);font-size:14px}
.soft-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.soft-act span{color:var(--ink3);font:600 12px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase}
.join{position:fixed;inset:0;z-index:67;display:flex;align-items:flex-end;justify-content:center}   /* over the raffle sheet (66) and a restock pop-up, under the toast (70) and the photo viewer (300) */
.join-back{position:absolute;inset:0;background:rgba(2,3,6,.78)}
.join-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0;border:1px solid var(--line2);border-bottom:0;background:var(--bg2);box-shadow:0 -18px 60px rgba(0,0,0,.6);outline:none;animation:copUp .22s ease-out}
.join-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}.join-top .sp{flex:1}
.join-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.join-h{margin:0 0 6px;font:800 24px/1.15 var(--display);text-wrap:balance}.join-p{margin:0 0 14px;color:var(--ink2);font-size:14px}.join-n b{color:var(--ink)}
@media (min-width:700px){.join{align-items:center}.join-panel{border-radius:20px;border-bottom:1px solid var(--line2);max-height:90vh}}
@media (prefers-reduced-motion:reduce){.join-panel{animation:none}}
body.join-open{overflow:hidden}body.join-open #alertHost{display:none}
.cop-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cop-top .sp{flex:1}
.cop-share{margin:8px 0 0}   /* Share sits under the title: the header row already fills a 390 px phone */
.cop-x{width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.cop-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 14px calc(20px + env(safe-area-inset-bottom,0px))}
.cop-hero{margin:14px 0 0;aspect-ratio:16/10;max-height:34vh;border-radius:14px}
.cop-title{margin:14px 0 0;font:800 22px/1.15 var(--display)}
.cop-facts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line2);border-radius:12px;margin:12px 0 0}
.cop-facts>div{padding:10px 12px;border-right:1px solid var(--line);min-width:0}.cop-facts>div:last-child{border-right:0}
.cop-facts small{display:block;color:var(--ink3);font:600 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.cop-facts b{display:block;margin-top:7px;font:700 16px/1.1 var(--hud)}.cop-facts b.good{color:var(--good)}
.cop-h{margin:22px 0 10px;font:800 26px/1 var(--display)}
.cop-sub{margin:18px 0 4px;font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.cop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.cop-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 6px;border-radius:12px;border:1px solid var(--line2);background:none;color:var(--ink2);font:700 14px/1 var(--body);cursor:pointer}
.cop-tabs button i{font-style:normal;min-width:24px;padding:5px 7px;border-radius:8px;background:var(--panel2);color:var(--ink);font:700 12px/1 var(--hud);text-align:center}
.cop-tabs button.zero{opacity:.7}
.cop-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;opacity:1}
.cop-list{display:flex;flex-direction:column}
.cop-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.cop-list>.cop-row:first-child{border-top:0}
.cop-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;border-radius:10px}
.cop-main:focus-visible,.cop-check:focus-visible,.cop-tabs button:focus-visible,.cop-x:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.cop-logo{flex:none;width:58px;height:58px;border-radius:12px;display:grid;place-items:center;font:800 15px/1 var(--hud);letter-spacing:.04em;color:#fff;background:hsl(var(--h,220) 38% 30%);border:1px solid var(--line2)}
.cop-logo.long{font-size:11px;letter-spacing:.02em}
.cop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cop-txt b{font:700 16px/1.2 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-txt small{font:600 13px/1.25 var(--body);color:var(--ink2)}.cop-txt small.warn{color:var(--warn)}.cop-txt small.shut{color:#ff8a8a}
.cop-ico{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--c)}
.ci{display:inline-flex}
.cop-cty,.cop-tag{padding:3px 8px;border-radius:999px;background:var(--panel2);color:var(--ink2);font:700 11px/1 var(--hud);letter-spacing:.06em}
.cop-go{flex:none;font:700 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.cop-check{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.cop-check[aria-pressed="true"],.cop-row.is-on .cop-check{background:var(--good);border-color:var(--good);color:#05060A}
.cop-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--ink3);font:600 12px/1.2 var(--body)}
.cop-key span{display:inline-flex;align-items:center;gap:6px}.cop-key .ci{color:var(--c)}
.cop-hint{margin:10px 0 0;color:var(--ink3);font:500 13px/1.45 var(--body)}
.cop-note{margin:4px 0 6px;color:var(--ink2);font:500 14px/1.4 var(--body)}.cop-note b{color:var(--ink)}.cop-note.warn{color:#ff8a8a}
.cop-empty{padding:18px 4px;color:var(--ink2)}.cop-empty b{display:block;color:var(--ink);font:700 16px/1.3 var(--body)}.cop-empty p{margin:6px 0 0;font:500 14px/1.45 var(--body)}
@media (max-width:420px){.cop-go{display:none}.cop-logo{width:52px;height:52px}}
body.zoom-open{overflow:hidden}
.pt-res b{display:block;font:700 14px/1.3 var(--body)}
.pt-res small{font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.ar-runs{display:block;margin-top:3px;font:600 11px/1.35 var(--hud);letter-spacing:.04em;color:var(--ink3)}
.pt-pick{margin-top:14px;padding:18px;max-width:640px}
.pt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:14px}
.pt-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.pt-card.dropped{border-color:rgba(53,224,160,.55);box-shadow:0 0 30px -12px rgba(53,224,160,.6)}
.pt-top{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center}
.pt-top .plate{width:88px;height:62px;border-radius:10px}
.pt-top b{display:block;font:700 15px/1.25 var(--body)}
.pt-top small{font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.pt-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pt-price .big{font:900 34px/1 var(--display);font-stretch:110%}
.pt-price .vs{font:600 12px/1 var(--hud);letter-spacing:.06em}
.up{color:var(--hot)}.down{color:var(--good)}
.pt-offers{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pt-offers a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.pt-offers a:last-child{border-bottom:0}
.pt-offers a:hover{background:var(--panel2)}
.pt-offers b{font:700 13px/1.2 var(--body)}
.pt-offers small{grid-column:1;font:600 10px/1.3 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.pt-offers span{grid-row:1/3;grid-column:2;align-self:center;font:700 15px/1 var(--hud)}
.pt-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-split div{padding:10px 12px;border-radius:10px;background:var(--panel2)}
.pt-split dt{font:600 9px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pt-split dd{margin:6px 0 0;font:700 14px/1.2 var(--body)}
.pt-chart svg{display:block;width:100%;height:110px}
.pt-legend{display:flex;gap:14px;flex-wrap:wrap;font:600 10px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.pt-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.pt-src{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---------- alert, toast, footer ---------- */
.alert{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:min(400px,calc(100vw - 32px));border-radius:18px;overflow:hidden;background:#0A0B11;border:1px solid rgba(255,77,46,.5);box-shadow:0 0 40px rgba(255,77,46,.35),0 30px 60px -20px #000;animation:pop .25s ease-out}
@keyframes pop{from{transform:translateY(20px)}to{transform:none}}   /* solid card, slide only: it was 96% opaque and faded in from 30%, so the page's text showed through it */
.alert-top{display:flex;align-items:center;gap:8px;padding:12px 14px 0;font:700 11px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--hot)}
.alert-top button{margin-left:auto;background:none;border:0;color:var(--ink2);font-size:20px;cursor:pointer}
.alert-body{padding:8px 14px 14px}
.alert-body b{display:block;font-size:16px;line-height:1.3}
.alert-body small{color:var(--ink2)}
.alert-go{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--hot);color:#fff;font:700 13px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;padding:11px 16px;border-radius:12px;background:var(--ink);color:#05060A;font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.update-bar{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:55;max-width:calc(100vw - 36px);display:flex;align-items:center;gap:12px;padding:9px 9px 9px 16px;border-radius:14px;background:#0A0B11;border:1px solid rgba(34,211,238,.5);box-shadow:0 0 30px rgba(34,211,238,.2),0 24px 50px -20px #000;color:var(--ink);font-size:14px;line-height:1.3}
.update-bar[hidden]{display:none}
@media (max-width:640px){.update-bar{left:12px;right:12px;max-width:none;justify-content:space-between;bottom:calc(72px + env(safe-area-inset-bottom,0px))}}   /* above the chat bubble */
footer{border-top:1px solid var(--line);padding-block:30px 44px;color:var(--ink3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
footer p{max-width:70ch;margin:10px 0 0}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer nav a{color:var(--ink2)}
/* Social links (Stan, Nov 1 2026: "small links with our socials on them"): round icon buttons in every page's footer. */
.foot-social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:var(--ink2);transition:color .15s,border-color .15s}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--c);border-color:var(--c)}
.foot-social a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Suggestion box (Stan, Oct 1 2026): in every page's footer. Oct 8 2026 ("takes up way too much space"): closed it is
   one line, "Suggestions?", and a tap opens the form. */
.suggest{flex:1 1 100%;font-size:15px;color:var(--ink2)}
.suggest summary{cursor:pointer;list-style:none;display:inline-block;color:var(--c);font:700 15px/1.3 var(--body)}
.suggest summary::-webkit-details-marker{display:none}.suggest summary:hover{text-decoration:underline}
.suggest-form{display:grid;gap:12px;padding:20px 22px;margin-top:12px}
.suggest p{margin:0;max-width:70ch}.suggest label{display:grid;gap:6px}
.suggest textarea,.suggest input[type=email]{width:100%;max-width:640px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:12px 14px;font:500 15px/1.45 var(--body);color:var(--ink)}
.suggest textarea{min-height:92px;resize:vertical}.suggest input[type=email]{height:46px;padding-block:0}
.suggest textarea:focus,.suggest input[type=email]:focus{outline:2px solid var(--c);outline-offset:1px}
.suggest-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.suggest-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.suggest .msg{color:var(--good);font-weight:600}.suggest .msg.bad{color:#ff6b7a}
.fade-in{animation:fin .35s ease-out}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---------- /welcome: the landing page for first-time visitors (Oct 4 2026) ---------- */
/* Phone first: one column, the words then the feed preview; two columns from 900px. Every piece reuses the site's own
   parts (plates, pills, buttons, perks list, news cards) so the preview looks exactly like the pages it previews. */
.doaf-feature{margin:16px 0 28px;padding:clamp(18px,3vw,32px);border:1px solid #35644d;border-radius:20px;background:linear-gradient(135deg,#13281f,#0b1114 65%);overflow:hidden}
.doaf-feature h2{font-size:clamp(28px,5vw,48px);line-height:1.05;margin:8px 0 12px;text-transform:uppercase}
.doaf-feature .eyebrow{color:#bce794}.doaf-intro{color:var(--muted);max-width:66ch;margin-bottom:20px}
.doaf-layout{display:grid;gap:20px}.doaf-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-self:start}
.doaf-pair{min-width:0;background:#0b1114;border:1px solid #ffffff1f;border-radius:14px;overflow:hidden}
.doaf-pair .plate{display:block;aspect-ratio:4/3;background:#171811}.doaf-pair .plate img{width:100%;height:100%;object-fit:cover}
.doaf-copy{padding:16px}.doaf-copy h3{font-size:24px;margin:0 0 8px}.doaf-copy p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.doaf-film{margin:0 auto;align-self:start;width:100%;max-width:320px}.doaf-film video{display:block;width:100%;aspect-ratio:9/16;border-radius:14px;background:#090e12}
.doaf-film figcaption{font-size:12px;color:var(--muted);line-height:1.6;margin-top:10px}.doaf-foot{font-size:12px;color:var(--muted);margin:16px 0 0}
@media(min-width:900px){.doaf-layout{grid-template-columns:minmax(0,1fr) minmax(240px,320px)}}
@media(max-width:520px){.doaf-pairs{gap:10px}.doaf-copy{padding:12px}.doaf-copy h3{font-size:20px}.doaf-copy .btn{font-size:11px;padding:10px}.doaf-pair .plate{aspect-ratio:1/1}}
.wc-hero{display:grid;gap:28px;align-items:center;padding:6px 0 8px}
.wc-top:has(.reserve,.hw-banner,.dd-banner){margin-bottom:18px}   /* Home's SNKRS Reserve / seasonal banner, when one is on */
.wc-hero h2{font-size:clamp(34px,5.4vw,60px);font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.025em;line-height:.92;margin-top:12px}
.wc-tag{margin:12px 0 0;font:800 clamp(20px,3.2vw,30px)/1.1 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink2)}
.wc-lede{margin:16px 0 0;font-size:clamp(16px,1.8vw,19px);line-height:1.55;color:var(--ink2);max-width:56ch}
.wc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.wc-cta .btn{height:48px;padding:0 22px;font-size:14px}
.wc-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.wc-facts span{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font:600 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.wc-facts b{color:var(--c);font-size:13px}
.wc-facts .wc-asof{border:0;background:none;color:var(--ink3);padding-inline:4px}
.wc-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink3)}
.wc-sub{margin:-6px 0 18px;color:var(--ink2);max-width:72ch;line-height:1.55}
.wc-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.wc-pad{padding:20px 22px}
.wc-device{position:relative;border-radius:26px;border:1px solid var(--line2);padding:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(123,97,255,.2),rgba(11,13,20,.96) 55%);box-shadow:0 40px 90px -40px rgba(34,211,238,.5),0 0 0 1px rgba(255,255,255,.03) inset}
.wc-device::before{content:"";position:absolute;right:-30%;bottom:-40%;width:420px;height:420px;background:radial-gradient(circle,rgba(34,211,238,.22),transparent 65%);pointer-events:none}
.wc-dbar{display:flex;align-items:center;gap:10px;padding:2px 4px 12px;font:600 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.wc-dbar .live{padding:6px 10px}
.wc-dsec{position:relative;background:rgba(5,6,10,.6);border:1px solid var(--line);border-radius:18px;padding:12px;margin-top:10px}
.wc-dsec .eyebrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.wc-dsec .eyebrow a{color:var(--c)}
.wc-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 4px;color:var(--ink);animation:fin .45s ease-out}
.wc-row+.wc-row{border-top:1px solid var(--line)}
.wc-row .plate{width:64px;height:48px;border-radius:10px}
.wc-row b{display:block;font:700 13px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-row small{display:block;margin-top:2px;font:600 10.5px/1.3 var(--hud);letter-spacing:.05em;color:var(--ink3)}
.wc-row .r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
a.wc-row:hover b{color:var(--c)}
.pub-list{list-style:none;margin:0;padding:0}.pub-list li{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}.pub-list li:last-child{border-bottom:0}.pub-list small{color:var(--ink3);font-size:13px}.pub-list a{color:var(--ink)}
.wc-faq{display:grid;gap:8px}.wc-faq details{padding:12px 16px}.wc-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wc-faq summary::-webkit-details-marker{display:none}.wc-faq summary h3{font:700 16px/1.3 var(--body);margin:0}.wc-faq summary::after{content:"+";color:var(--c);font:800 20px/1 var(--display)}
.wc-faq details[open] summary::after{content:"–"}.wc-faq p{margin:10px 0 0;color:var(--ink2);line-height:1.55;max-width:72ch}
.wc-empty{margin:8px 4px 4px;font-size:13px;color:var(--ink3)}
@media (min-width:900px){.wc-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;padding:16px 0 20px}.wc-device{animation:wcFloat 7s ease-in-out infinite}}
@keyframes wcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* opportunity cards: one pair, the store, the price, the sizes and one action */
.wc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.wc-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .2s,border-color .2s,box-shadow .2s}
.wc-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.5);box-shadow:0 18px 40px -18px rgba(34,211,238,.45)}
.wc-card:hover .plate img{transform:scale(1.04)}
.wc-card .plate{display:block;aspect-ratio:4/3;border-radius:0}
.wc-cb{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.wc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 11px/1 var(--hud);letter-spacing:.06em;color:var(--ink3)}
.wc-card h3{font:800 17px/1.2 var(--display);font-stretch:104%}
.wc-card h3 em{font-style:normal;color:var(--ink2)}
.wc-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.wc-kv>span{min-width:0}
.wc-kv i{display:block;font:600 9px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-style:normal;margin-bottom:4px}
.wc-kv b{display:block;font:700 13px/1.3 var(--body);overflow-wrap:anywhere}
.wc-kv s{color:var(--ink3);font-weight:400;margin-left:4px}
.wc-sizes{font-size:12.5px;line-height:1.5;color:var(--ink2);min-height:1.5em}
.wc-sizes .sz{margin-top:2px}
.wc-act{margin-top:auto;align-self:stretch;white-space:normal;height:auto;min-height:36px;padding-block:8px;line-height:1.2}
/* small tablets: two across. Phones: one across with the photo the full width of the card (Stan, Oct 4 2026: "all the
   shoe photos are too small... we're featuring shoes", the same rule main gave Drops, Restocks and in-stock rows that day). */
@media (max-width:640px){.wc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.wc-cb{padding:10px 11px 11px;gap:7px}.wc-card h3{font-size:15px}
  .wc-kv{grid-template-columns:minmax(0,1fr);gap:6px}.wc-sizes{font-size:12px}.wc-meta{font-size:10px}.wc-act{font-size:10.5px;padding-inline:8px}}
@media (max-width:560px){.wc-grid{grid-template-columns:minmax(0,1fr);gap:12px}.wc-card .plate{aspect-ratio:3/2}.wc-cb{padding:14px 15px 15px;gap:9px}.wc-card h3{font-size:17px}.wc-kv{grid-template-columns:minmax(0,1fr) auto;gap:10px}}
/* how it works */
.wc-steps{display:grid;gap:12px;counter-reset:step}
.wc-step{position:relative;padding:22px 20px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.wc-step::before{content:"0" counter(step);counter-increment:step;position:absolute;right:12px;top:2px;font:900 72px/1 var(--display);font-stretch:120%;color:rgba(255,255,255,.055);letter-spacing:-.04em;pointer-events:none}
.wc-step h3{margin:10px 0 8px;font:900 22px/1.1 var(--display);font-stretch:110%;text-transform:uppercase}
.wc-step p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55}
@media (min-width:760px){.wc-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* community: what is live, and what is only planned (dashed) */
.wc-com{display:grid;gap:12px}
.wc-ccard{padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.wc-ccard h3{font:900 20px/1.1 var(--display);text-transform:uppercase;font-stretch:110%}
.wc-ccard p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55}
.wc-ccard .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.wc-ccard.plan{border-style:dashed;border-color:rgba(197,139,255,.5);background:rgba(197,139,255,.06)}
@media (min-width:760px){.wc-com{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.wc-com{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* why join + closing */
.wc-why{display:grid;gap:16px}
@media (min-width:900px){.wc-why{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.wc-honest{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wc-honest li{display:flex;gap:10px;align-items:flex-start;color:var(--ink2);font-size:14.5px;line-height:1.5}
.wc-honest li::before{content:"—";color:var(--c);flex:none;font-weight:700}
.wc-honest b{color:var(--ink)}
.wc-close{position:relative;overflow:hidden;border-radius:26px;border:1px solid rgba(123,97,255,.4);padding:26px 20px;
  background:linear-gradient(135deg,rgba(123,97,255,.2),rgba(34,211,238,.08) 60%,rgba(255,255,255,.02))}
.wc-close::before{content:"";position:absolute;right:-10%;top:-50%;width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,.2),transparent 65%);pointer-events:none}
.wc-close h2{font-size:clamp(36px,6.5vw,64px);font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em;margin-top:8px}
.wc-close-grid{position:relative;display:grid;gap:22px}
.wc-close .acct{max-width:none;padding:18px;background:rgba(5,6,10,.5);border:1px solid var(--line2);border-radius:18px}
@media (min-width:900px){.wc-close{padding:38px 36px}.wc-close-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}}
.wc-by{display:block;color:var(--ink3);font:600 11px/1.3 var(--hud);letter-spacing:.05em}
/* Things to tap and reasons to stay (Oct 4 2026, Stan's stats: 67% left after one page, no store taps): a search box, a
   ticking countdown, a store button and resale buttons on every card, Cop or Drop, and a keep-going rail of real pages. */
.wc-search{display:flex;gap:8px;margin-top:18px;max-width:560px}
.wc-search .search{flex:1 1 auto;max-width:none;min-width:0}
.wc-search input{height:48px;font-size:15px}
.wc-search svg{top:15px}
.wc-search .btn{height:48px;flex:none}
/* Home, rebuilt (Nov 12 2026, Stan: "rebuild my landing page ... Drive eBay conversions and sign up"). Everything is scoped
   under .hx (Home's root) so no other page changes. Motion is transform / opacity only and stops under prefers-reduced-motion.
   The first block was rebuilt again on Nov 13 2026 (Stan, a phone screenshot of the boxed "signal deck" with its grid lines and eight marketplace buttons: "This
   section needs to go ... this looks terrible"): no box, no grid, no scan line. One headline, one search pill, one button, and a shoe: the next drop with its
   countdown, on a phone too. The marketplace links stay out of sight until something is typed in the box. */
.hx-deck{position:relative;isolation:isolate;display:grid;gap:34px;align-items:center;margin:0 0 26px;padding:26px 0 8px}
.hx-deck::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-60px -24px -20px;
  background:radial-gradient(560px 360px at 82% 34%,rgba(123,97,255,.26),transparent 70%),radial-gradient(460px 320px at 96% 78%,rgba(34,211,238,.16),transparent 70%)}
.hx-copy{min-width:0}
.hx-live{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font:600 12px/1 var(--body);color:var(--ink2)}
.hx-live b{color:var(--ink);font-weight:700}
.hx-live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none}
.hx-live.on i{background:var(--good)}
.hx-live.on i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--good);opacity:0;animation:hxPing 2s ease-out infinite}
@keyframes hxPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.hx-deck h1{margin:18px 0 0;font:600 11px/1.4 var(--hud);font-stretch:100%;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.hx-deck h1 .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.hx-title{margin:10px 0 0;font:900 clamp(34px,9.6vw,70px)/.92 var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:-.03em}
.hx-sub{margin:18px 0 0;max-width:46ch;color:var(--ink2);font-size:clamp(16px,1.5vw,18.5px);line-height:1.5}
.hx-deck .wc-search{display:flex;align-items:center;gap:6px;max-width:560px;margin-top:26px;padding:6px 6px 6px 4px;border-radius:999px;border:1px solid var(--line2);background:rgba(12,14,22,.86);box-shadow:0 18px 50px -28px rgba(0,0,0,.9);transition:border-color .2s,box-shadow .2s}
.hx-deck .wc-search:focus-within{border-color:rgba(34,211,238,.7);box-shadow:0 0 0 4px rgba(34,211,238,.12),0 18px 50px -28px rgba(0,0,0,.9)}
.hx-deck .wc-search input{height:46px;border:0;background:transparent;font-size:16px;outline:0;padding-left:44px}
.hx-deck .wc-search svg{left:17px;top:14px}
.hx-deck .wc-search .btn{height:46px;padding:0 22px;border-radius:999px;box-shadow:none}
.hx-places{display:none;flex-wrap:wrap;align-items:center;gap:4px 14px;max-width:560px;margin:12px 4px 0;font-size:13.5px;color:var(--ink3)}
.hx-deck .wc-search:has(input:not(:placeholder-shown)) + .hx-places{display:flex}
.hx-places span{flex:1 0 100%;font:600 11px/1.4 var(--hud);letter-spacing:.14em;text-transform:uppercase}
.hx-places a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;padding:5px 0}
.hx-places a:hover,.hx-places a:focus-visible{color:var(--c);text-decoration-color:var(--c)}
.hx-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.hx-go .btn{height:54px;padding:0 28px;font-size:14px;border-radius:999px}
.hx-go small{flex:1 0 100%;color:var(--ink3);font-size:13px}
.hx-link{font:600 15px/1 var(--body);color:var(--ink);padding:10px 2px;border-bottom:1px solid var(--line2);transition:color .2s,border-color .2s}
.hx-link:hover,.hx-link:focus-visible{color:var(--c);border-color:var(--c)}
.hx-deck .wc-facts{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0;margin-top:0;padding-top:22px;border-top:1px solid var(--line);max-width:560px}
.hx-deck .wc-facts span{display:block;flex:1 1 0;min-width:0;padding:0 14px 0 0;border:0;border-radius:0;background:none;font:500 12.5px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink3)}
.hx-deck .wc-facts span+span{padding-left:16px;border-left:1px solid var(--line)}
.hx-deck .wc-facts b{display:block;margin-bottom:5px;font:800 clamp(24px,3vw,32px)/1 var(--display);font-stretch:112%;color:var(--ink)}
.hx-deck .wc-facts .wc-asof{display:none}
.hx-stage{min-width:0}
.hx-target{display:block;position:relative;padding:10px 10px 18px;border-radius:30px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));color:var(--ink);box-shadow:0 50px 90px -50px rgba(123,97,255,.75),0 30px 70px -40px rgba(34,211,238,.4);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .2s}
.hx-target:hover,.hx-target:focus-visible{border-color:rgba(34,211,238,.6);transform:translateY(-4px)}
.hx-target .plate{aspect-ratio:4/3;border-radius:22px;isolation:isolate}
.hx-target .plate::before{content:"";position:absolute;inset:-12%;z-index:-1;background:var(--hxp) center/cover;filter:blur(26px) saturate(1.05)}
.hx-target .plate img{position:relative}
.hx-target:hover .plate img{transform:scale(1.04)}
.hx-when{position:absolute;left:22px;top:22px;z-index:1;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(5,6,10,.86);font:700 11px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hx-when i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.hx-tb{display:grid;gap:14px;align-items:end;padding:16px 10px 0}
.hx-tb .who{min-width:0}
.hx-tb .who b{display:block;font:800 clamp(19px,2.2vw,24px)/1.12 var(--display);font-stretch:108%;text-transform:uppercase;letter-spacing:-.01em}
.hx-tb .who b em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-tb .who small{display:block;margin-top:7px;color:var(--ink3);font-size:13px}
.hx-target .cd{gap:6px}.hx-target .cd div{flex:1 1 0;min-width:0;padding:10px 4px 8px;border-radius:14px;background:rgba(5,6,10,.5);border-color:var(--line)}.hx-target .cd b{font-size:24px}
.hx-nexts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.hx-mini{display:flex;align-items:center;gap:11px;min-width:0;padding:8px 12px 8px 8px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--ink);transition:border-color .2s,transform .2s}
.hx-mini:hover,.hx-mini:focus-visible{border-color:rgba(34,211,238,.5);transform:translateY(-2px)}
.hx-mini .plate{flex:none;width:62px;height:62px;border-radius:14px}
.hx-mini div+div{min-width:0}
.hx-mini small{display:block;font:700 10px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.hx-mini b{display:-webkit-box;margin-top:5px;font:700 13px/1.25 var(--body);overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:900px){.hx-deck{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:30px 56px;padding:44px 0 26px}.hx-stage{grid-column:2;grid-row:1/span 2}.hx-deck .wc-facts{grid-column:1;align-self:start}.hx-copy{align-self:end}}
@media (max-width:560px){.hx-deck{gap:30px;padding-top:18px}.hx-go .btn{flex:1 1 100%}.hx-go .hx-link{margin:0 auto}.hx-go small{text-align:center}.hx-deck .wc-search .btn{width:46px;padding:0;flex:none}.hx-deck .wc-search .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hx-buy-3 .btn{font-size:10px;letter-spacing:.02em}.hx-buy .hx-buy-st{font-size:10px;letter-spacing:.03em}}
@media (min-width:561px){.hx-deck .wc-search .btn svg{display:none}}
.btn.hx-ebay{border-color:rgba(34,211,238,.55);color:var(--ink);background:rgba(34,211,238,.08)}
.hx-buy{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.hx-buy .btn{margin:0;width:100%;justify-content:center;min-width:0}
.hx-buy-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hx-buy-3 .btn{height:32px;padding:0 2px;font-size:11px;white-space:nowrap}
.hx-buy .hx-buy-st{padding:0 6px;white-space:nowrap}
.hx-buy-3 .btn.primary{background:rgba(34,211,238,.12);border:1px solid var(--c);color:var(--c);box-shadow:none}
.hx-buy .buy-more{height:30px;font-size:11px;color:var(--ink2)}
.hx .td{border-color:rgba(34,211,238,.22);box-shadow:0 26px 70px -52px rgba(34,211,238,.6)}
.hx .sec-head h2::before{content:"";display:inline-block;width:9px;height:9px;margin:0 11px 3px 2px;border:2px solid var(--c);border-radius:2px;transform:rotate(45deg);vertical-align:middle}
.hx .wc-card{transition:transform .2s,border-color .2s,box-shadow .2s}
.hx .wc-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5);box-shadow:0 22px 56px -32px rgba(34,211,238,.7)}
.hx-eb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hx-ebc{display:flex;flex-direction:column;min-width:0;border-radius:16px;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .2s,transform .2s}
.hx-ebc:hover{border-color:rgba(34,211,238,.5);transform:translateY(-3px)}
.hx-ebc .plate{display:block;height:128px;border-radius:0}
.hx-ebc .hx-eb-b{display:flex;flex-direction:column;gap:6px;flex:1;padding:10px 10px 12px}
.hx-ebc h3{margin:0;font:800 13px/1.25 var(--display);text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.hx-ebc h3 a{color:inherit;text-decoration:none}.hx-ebc h3 em{font-style:normal;color:var(--c)}
.hx-ebc small{color:var(--ink3);font:600 11px/1.35 var(--hud);letter-spacing:.04em}
@media (max-width:1100px){.hx-eb{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.hx-eb{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hx-ebc .plate{height:112px}}
.hx-join{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:16px;align-items:center;margin:26px 0 6px;padding:22px 20px;border-radius:20px;border:1px solid rgba(123,97,255,.42);background:linear-gradient(120deg,rgba(123,97,255,.16),rgba(34,211,238,.09) 60%,rgba(5,6,10,.4))}
.hx-join h2{margin:6px 0 0;font:900 clamp(24px,3.6vw,38px)/1 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.015em}
.hx-join p{margin:10px 0 0;max-width:60ch;color:var(--ink2);line-height:1.5}
.hx-join .hx-go{margin-top:0}
@media (min-width:900px){.hx-join{grid-template-columns:minmax(0,1fr) auto;padding:26px 30px}}
@media (prefers-reduced-motion:reduce){.hx-live.on i::after{animation:none}.hx .wc-card:hover,.hx-ebc:hover,.hx-target:hover,.hx-mini:hover{transform:none}}
.wc-row.fresh{animation:flash 2.4s ease-out}
.wc-acts{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.wc-acts .btn:not(.resale-row .btn){white-space:normal;height:auto;min-height:36px;padding-block:8px;line-height:1.2}
.wc-ent{display:flex;gap:6px}
.wc-ent .btn{flex:1 1 auto}
.wc-acts .resale-row{justify-content:flex-start}
.wc-acts .resale-row .btn{flex:1 1 auto}
.wc-link{background:none;border:0;padding:0;font:inherit;color:var(--c);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wc-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.wc-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.wc-tile{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);transition:transform .2s,border-color .2s}
.wc-tile:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5)}
.wc-tile .plate{aspect-ratio:4/3;border-radius:12px}
.wc-tile .plate.cover img{object-fit:cover}
.wc-tile .noimg b{font-size:18px}
.wc-tile b{font:800 15px/1.2 var(--display)}.wc-tile small{color:var(--ink3);font-size:12px;line-height:1.4}
/* ---------- Día de los Muertos (every page Nov 1, 6 AM to Nov 3, 6 AM Eastern; /dia-de-los-muertos all year): marigold,
   pink and plum like the Facebook slides, papel picado, no bats or webs (a day of remembrance) ---------- */
body.muertos::before{background:radial-gradient(900px 520px at 8% -8%,rgba(255,138,31,.24),transparent 60%),radial-gradient(800px 520px at 100% 0%,rgba(255,79,163,.18),transparent 60%),
  radial-gradient(900px 600px at 50% 115%,rgba(155,92,255,.16),transparent 60%),linear-gradient(var(--bg),#100713)}
.papel{position:relative;display:flex;justify-content:space-between;gap:5px;padding:0 4px;overflow:hidden;pointer-events:none}
.papel::before{content:"";position:absolute;left:0;right:0;top:2px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.5),rgba(255,255,255,.12))}
.papel i{flex:0 0 auto;width:34px;transform-origin:50% 2px;animation:papelSway 3.4s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.papel svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
@keyframes papelSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.papel-top .papel i{width:28px}
@media (max-width:560px){.papel i{width:26px}.papel-top .papel i{width:22px}}
.dd-grad{background:linear-gradient(100deg,#ffb020,#ff4fa3 60%,#c58bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dd-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,176,32,.6);background:linear-gradient(90deg,rgba(255,138,31,.18),rgba(255,79,163,.16),rgba(155,92,255,.14));color:var(--ink);font-size:14px}
.dd-banner:hover{border-color:#ffb020}
.dd-banner em{font:700 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#ffc93c;white-space:nowrap}
.dd-home .papel{margin-bottom:10px}
.dd-head{margin-top:8px}
.dd-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:center;padding:14px 0 4px}
.dd-hero h1{font-size:clamp(32px,5vw,58px)}
.dd-hero p{color:var(--ink2);max-width:720px;margin-bottom:0}
.dd-hero .eyebrow b{color:#ffb020}
.dd-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(255,79,163,.3))}
@media (max-width:760px){.dd-hero{grid-template-columns:minmax(0,1fr) 112px;gap:12px}.dd-hero p{font-size:14px}}
.dd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
.dd-chip{font:600 12px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);cursor:pointer}
.dd-chip b{color:var(--ink);margin-left:4px}
.dd-chip:hover{border-color:#ffb020}
.dd-chip.on{border-color:#ffb020;color:#1a0b10;background:linear-gradient(100deg,#ffc93c,#ff8a1f)}.dd-chip.on b{color:#1a0b10}
.dd-year .sec-head h2{font-size:36px;background:linear-gradient(100deg,#ffd23f,#ff8a1f 60%,#ff4fa3);-webkit-background-clip:text;background-clip:text;color:transparent}
.dd-t{border-color:rgba(255,154,31,.24);background:linear-gradient(180deg,rgba(255,138,31,.07),rgba(255,79,163,.04))}
.dd-t small.dd-cw{color:var(--ink3)}
.dd-t small.dd-sku{font:600 11px/1.3 var(--hud);letter-spacing:.06em;color:#ffb020}
.dd-t small.dd-note{color:#ffb6d9}
.hws .plate.dd-noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 40%,#3a1645,#1a0b22)}
.dd-noimg svg{width:62%;height:auto}
.dd-noimg small{color:#ffd27a;font:600 10px/1.2 var(--hud);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 8px}
.dd-foot{margin-top:26px;color:var(--ink2)}
/* Phones and narrow windows: rows become grids so nothing hides off to the side (kept last so it wins) */
@media (max-width:1020px){
  .month{position:static}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-columns:auto;overflow:visible;scroll-snap-type:none}
}
/* The Vault (community-plan.md) */
[data-vault][hidden]{display:none!important}
.v-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.v-note{padding:12px 16px;margin:-6px 0 18px;color:var(--warn);border-color:rgba(255,176,32,.35)}
.v-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.v-hint{margin:0 0 14px;line-height:1.5;text-transform:none;letter-spacing:.04em}
.v-center{text-align:center;margin-top:18px}
.v-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.v-card,.v-full{overflow:hidden;display:flex;flex-direction:column}
.v-full{max-width:760px}
.v-by{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;flex-wrap:wrap}
.v-name{display:inline-flex;align-items:center;gap:8px;color:var(--ink);min-width:0}
.v-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-av{border-radius:50%;object-fit:cover;flex:none;background:var(--panel2);border:1px solid var(--line2)}
.v-av-x{display:inline-grid;place-items:center;font:800 14px/1 var(--display);color:#05060A;background:var(--grad);border:0}
.v-roomlink{background:none;border:0;padding:0;font:inherit;color:var(--c);cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.v-held{margin:0 14px 10px;padding:8px 10px;border-radius:10px;background:rgba(255,176,32,.1);color:var(--warn);font-size:13px}
.v-pic{position:relative;display:block;background:#0B0D14}
.v-pic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.v-list{display:grid;gap:12px;max-width:900px}
.v-item{padding:12px 14px}
.v-item>.v-by,.v-item>.v-held{padding:0 0 8px;margin:0}
.v-item .v-body{padding:0}
.v-item .v-foot{padding:10px 0 0}
.v-item .v-cap{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.v-thumbrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.v-tn{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#0B0D14;border:1px solid var(--line2);cursor:zoom-in}
.v-tn.big{width:88px;height:88px}
.v-tn:hover{border-color:var(--c)}
.v-tn-more{display:inline-grid;place-items:center;min-width:40px;height:56px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);color:var(--ink2);font:700 12px/1 var(--hud)}
.v-postpics{padding:0 0 4px}
.v-body{padding:12px 14px 4px;display:grid;gap:10px}
.v-cap{margin:0;white-space:pre-wrap;word-break:break-word;color:var(--ink);line-height:1.5}
.v-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px 14px}
.v-more{margin-left:auto;display:inline-flex;gap:4px}
.vote button[data-vvote="1"][aria-pressed="true"]{color:#05060A;background:linear-gradient(90deg,#FF4D2E,#FFB020)}
.vote button[data-vvote="-1"][aria-pressed="true"]{color:#05060A;background:var(--c)}
.v-shoe{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--ink)}
.v-shoe img{width:40px;height:40px;object-fit:contain;background:var(--plate);border-radius:8px}
.v-shoe b{display:block;font-size:14px;line-height:1.3}
.v-shoe small{display:block;color:var(--ink2);font-size:12px;margin-top:2px}
.v-shoe .go{font:700 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.v-intel{padding:8px 10px;border-radius:10px;border:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.v-intel.ok{color:var(--good);border-color:rgba(53,224,160,.4);background:rgba(53,224,160,.08)}
.v-intel.no{color:#ff8a8a;border-color:rgba(255,107,122,.35)}
.v-intel small{color:var(--ink3);margin-left:4px}
.v-comments{max-width:760px;margin-top:22px}
.v-comment{border-top:1px solid var(--line);padding:6px 0}
.v-comment .v-by{padding:8px 0 0}
.v-comment .v-foot{padding:4px 0 8px}
.v-cbody{margin:6px 0 0 38px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.v-edited{margin-left:4px;font:600 10px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.v-cedit{margin:6px 0 0 38px}.v-cedit textarea{width:100%;min-height:84px}
.v-comment details summary{margin:6px 0 0 38px;cursor:pointer;color:var(--ink3);font-size:13px}
.v-form{display:grid;gap:12px}
.v-form textarea,.v-form select,.v-form input[type=url],.v-form input[type=email],.v-form input[name=name],.v-form input[name=size]{width:100%;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:12px 14px;font:500 15px/1.4 var(--body);color:var(--ink)}
.v-form select{height:46px;padding:0 14px}
.v-form textarea:focus,.v-form select:focus,.v-form input:focus{outline:2px solid var(--c);outline-offset:1px}
.v-form label{display:grid;gap:6px}
.v-form .msg{min-height:20px;margin:0;color:var(--ink2)}.v-form .msg.bad{color:#ff6b7a}
.v-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v-new,.v-meform{max-width:640px;padding:20px}
.v-check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px!important;color:var(--ink2);font-size:14px}
.v-check input{margin-top:3px}
.v-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.v-thumb{position:relative;width:92px;height:115px;border-radius:10px;overflow:hidden;background:#0B0D14;border:1px solid var(--line2);display:grid;place-items:center;font:700 11px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:center}
.v-thumb img{width:100%;height:100%;object-fit:cover}
.v-thumb button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(5,6,10,.8);color:#fff;cursor:pointer;font-size:16px;line-height:1}
.v-thumb-add{cursor:pointer;border-style:dashed}
.v-hits{display:grid;gap:6px;margin-top:8px}
.v-hit{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;text-align:left;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.v-hit img{width:44px;height:44px;object-fit:contain;background:var(--plate);border-radius:6px}
.v-hit small{display:block;color:var(--ink3)}
.v-tagged{display:grid;gap:8px;margin-top:6px;justify-items:start}
.v-tagged .v-shoe{width:100%}
.v-upls{display:flex;gap:18px;flex-wrap:wrap}
.v-upl{display:grid;gap:8px;justify-items:start}
.v-upl .v-av{width:72px;height:72px}
.v-cover-prev{width:200px;height:70px;object-fit:cover;border-radius:10px}
.v-profile{overflow:hidden;padding:0}
.v-cover{display:block;width:100%;height:clamp(120px,22vw,240px);object-fit:cover}
.v-cover-x{background:var(--grad);opacity:.35}
.v-pro{display:flex;gap:18px;align-items:flex-end;padding:0 20px 18px;margin-top:-40px;flex-wrap:wrap}
.v-pro .v-av{border:3px solid var(--bg)}
.v-pro>div:nth-child(2){flex:1;min-width:220px;padding-top:48px}
.v-pro h1{margin:0;font-size:clamp(24px,4vw,36px);font-weight:900;display:flex;gap:8px;align-items:center;flex-wrap:wrap;word-break:break-word}
.v-pro p{margin:6px 0 0;color:var(--ink2);white-space:pre-wrap}
.v-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;color:var(--ink2);font-size:14px;align-items:center}
.v-stats b{color:var(--ink)}
.v-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.v-pair{overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.v-pair img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--plate)}
.v-pair img[data-vzoom]{object-fit:cover;cursor:zoom-in}
.v-pair>div:last-child{padding:10px 12px;display:grid;gap:4px;justify-items:start}
.v-pair small{color:var(--ink2)}
.v-pair-x{aspect-ratio:1;display:grid;place-items:center;padding:12px;text-align:center;color:var(--ink3)}
.v-pair-go{display:grid;gap:4px;justify-items:start;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%}
.v-pair-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.v-mypairs{padding:20px;margin-top:16px}
.v-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.v-strip a{flex:none;width:110px;color:var(--ink2)}
.v-strip img{width:110px;height:138px;object-fit:cover;border-radius:10px;display:block}
.v-strip small{display:block;margin-top:4px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Shoe of the Day: the way in (a strip on the feed) and the wheel page */
.v-wheelstrip{display:flex;align-items:center;gap:14px;padding:12px 16px;margin:0 0 14px;color:var(--ink);text-decoration:none;border-color:rgba(34,211,238,.35);background:linear-gradient(100deg,rgba(123,97,255,.12),rgba(34,211,238,.10))}
.v-wheelstrip:hover{border-color:var(--c)}
.v-wheelico{font-size:26px;line-height:1;flex:none}
.v-wheeltxt{display:grid;gap:3px;min-width:0;flex:1}
.v-wheeltxt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-wheeltxt small{color:var(--ink2);font-size:13px}
.wh-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:34px;align-items:start;margin-top:6px;max-width:1140px}
.wh-left{display:grid;gap:18px;justify-items:center}
.wh-stage{position:relative;width:100%;padding:34px 22px 26px;border-radius:28px;border:1px solid var(--line);overflow:hidden;touch-action:pan-x pan-y;
  background:radial-gradient(70% 55% at 50% 42%,rgba(123,97,255,.34),transparent 70%),radial-gradient(60% 45% at 50% 100%,rgba(34,211,238,.18),transparent 70%),linear-gradient(180deg,#0E1120,#070810)}
.wh-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:12px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(4px)}
.wh-wheel{position:relative;width:min(100%,430px);margin:0 auto;aspect-ratio:1;z-index:1}
.wh-frame{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,#5B6385,#232843 18%,#8A93B5 32%,#1B1F33 50%,#6F789C 66%,#20243A 84%,#5B6385);box-shadow:0 0 0 2px rgba(255,255,255,.12),0 22px 60px rgba(0,0,0,.65),0 0 70px rgba(123,97,255,.28)}
.wh-frame::before{content:"";position:absolute;inset:5.2%;border-radius:50%;background:linear-gradient(135deg,#7B61FF,#22D3EE);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 4px 10px rgba(255,255,255,.35)}
.wh-bulb{position:absolute;width:2.5%;aspect-ratio:1;margin:-1.25% 0 0 -1.25%;border-radius:50%;background:#FFF1C2;box-shadow:0 0 6px 2px rgba(255,205,90,.9),inset 0 -2px 3px rgba(190,120,0,.5);animation:whBulb 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.057s);z-index:2}
.wh-spinning .wh-bulb{animation-duration:.32s}
@keyframes whBulb{0%,100%{opacity:1}50%{opacity:.3}}   /* opacity only: a filter on 28 bulbs made 28 filtered layers, which a phone has to draw again at every zoom step */
.wh-disc{position:absolute;inset:7.6%;border-radius:50%;background:#0B0D14;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 40px rgba(0,0,0,.5)}
.wh-disc canvas{width:100%;height:100%;display:block;border-radius:50%;transition:transform 5.6s cubic-bezier(.1,.6,.1,1);will-change:transform;cursor:zoom-in}
.wh-pointer{position:absolute;left:50%;top:-5.6%;width:11%;aspect-ratio:.82;margin-left:-5.5%;z-index:4;transform-origin:50% 14%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55))}
.wh-pointer i{position:absolute;inset:0;background:linear-gradient(160deg,#FF8A66,#FF3B1F 55%,#B3220B);clip-path:polygon(50% 100%,0 22%,12% 4%,50% 0,88% 4%,100% 22%)}
.wh-pointer i::after{content:"";position:absolute;left:30%;top:14%;width:16%;height:26%;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(1px)}
.wh-spinning .wh-pointer{animation:whTick .13s ease-in-out infinite alternate}
@keyframes whTick{from{transform:rotate(-13deg)}to{transform:rotate(3deg)}}
.wh-hub{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;padding:0;border-radius:50%;border:0;cursor:pointer;z-index:3;color:#05060A;
  background:radial-gradient(circle at 35% 28%,#fff 0,#C9F5FF 14%,#22D3EE 46%,#7B61FF 100%);box-shadow:0 0 0 5px #151929,0 0 0 7px rgba(255,255,255,.22),0 10px 26px rgba(0,0,0,.6),0 0 26px rgba(34,211,238,.5)}
.wh-hub span{font:900 clamp(13px,3.3vw,18px)/1 var(--hud);letter-spacing:.14em;text-transform:uppercase}
.wh-hub:hover{filter:brightness(1.08)}
.wh-hub:disabled{opacity:.8;cursor:default}
.wh-glow{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;margin:-19% 0 0 -19%;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.55),rgba(123,97,255,.22) 48%,transparent 70%);pointer-events:none;z-index:2;animation:whPulse 2.2s ease-in-out infinite}   /* the hub's pulse: opacity and size of this one element, never a shadow that is painted again every frame */
.wh-spinning .wh-glow{animation:none;opacity:.35}
@keyframes whPulse{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
/* A phone zoomed in on the wheel draws every layer again at the bigger size. While the page is zoomed the lights stand still and the picture layer stops being promoted. */
body.wh-zoomed .wh-bulb,body.wh-zoomed .wh-glow,body.wh-zoomed .wh-pointer,body.wh-zoomed .wh-confetti i{animation:none!important}
body.wh-zoomed .wh-disc canvas{will-change:auto}
.wh-look{cursor:zoom-in}
.wh-confetti{position:absolute;inset:0;pointer-events:none;z-index:6}
.wh-confetti i{position:absolute;left:50%;top:50%;width:9px;height:14px;border-radius:2px;background:var(--c);opacity:0;animation:whConf var(--t) cubic-bezier(.12,.7,.3,1) var(--dl) forwards}
@keyframes whConf{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 150px)) rotate(var(--rot))}}
.wh-ctl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wh-ctl .btn.primary{height:52px;padding:0 32px;font-size:14px;box-shadow:0 10px 30px rgba(123,97,255,.4)}
.wh-ctl .btn{height:52px}
.wh-hint{max-width:440px;text-align:center}
.wh-card{position:relative;display:grid;gap:12px;padding:20px;border-radius:24px;border:1px solid transparent;animation:whPop .5s cubic-bezier(.2,.9,.3,1.2);
  background:linear-gradient(#0E1120,#0E1120) padding-box,linear-gradient(135deg,#7B61FF,#22D3EE) border-box}
.wh-card.wh-none{min-height:200px;align-content:center;justify-items:center;text-align:center;color:var(--ink2);background:var(--panel);border:1px dashed var(--line2)}
.wh-ghost{font-size:44px;filter:grayscale(.3);opacity:.8}
.wh-eb{color:var(--c)}
.wh-card h2{margin:0;font:900 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.01em}
.wh-cw{margin:0;color:var(--ink2);font-size:18px}
.wh-pic{aspect-ratio:16/10;max-height:340px;width:100%;border-radius:18px;background:radial-gradient(80% 90% at 50% 40%,#fff 0%,#EEF0F5 55%,#DCE0EA 100%)}
.wh-pic img{padding:4%;filter:drop-shadow(0 12px 14px rgba(20,24,40,.35))}
.wh-pic-x{aspect-ratio:auto;height:150px}
.wh-nopic{height:100%;display:grid;place-content:center;gap:6px;justify-items:center;padding:16px;text-align:center;color:#6A7390;font-weight:700}
.wh-nopic span{font-size:48px;filter:grayscale(.2)}
.wh-chips{display:flex;gap:8px;flex-wrap:wrap}
.wh-chip{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:var(--ink);font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.wh-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.wh-acts .btn{flex:1 1 170px;height:48px}
@keyframes whPop{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@media (max-width:860px){.wh-grid{grid-template-columns:minmax(0,1fr);gap:22px}.wh-stage{padding:28px 14px 22px;border-radius:22px}}
.v-qrow{display:grid;grid-template-columns:90px 1fr auto;gap:14px;align-items:start;padding:12px;margin-bottom:10px}
.v-qrow img{width:90px;height:112px;object-fit:cover;border-radius:8px;cursor:zoom-in}
.v-qrow p{margin:6px 0;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.v-qbtns{display:flex;flex-direction:column;gap:6px}
.v-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.v-pick select{height:42px;min-width:240px;max-width:100%;border-radius:12px;border:1px solid var(--line2);background:var(--panel);padding:0 14px;font:600 14px/1 var(--body);color:var(--ink)}
.v-pick select:focus{outline:2px solid var(--c);outline-offset:1px}
.v-pick select option,.v-pick select optgroup,.v-form select option,.v-form select optgroup{background:#0B0D14;color:var(--ink)}   /* the open list is the browser's own: light text on its default white was invisible (Oct 8 2026) */
.v-grouphead{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;padding:14px 16px;margin:0 0 16px}
.v-grouphead p{margin:6px 0 4px;color:var(--ink2);line-height:1.5}
.v-grouphead small{color:var(--ink3)}
.v-grouphead .v-runs{display:block;margin-top:8px;color:var(--ink2)}
.v-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.v-gchip{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;border-radius:999px;border:1px solid var(--c);color:var(--ink);font:600 13px/1 var(--body)}
.v-gchip button{border:0;background:transparent;color:var(--ink2);cursor:pointer;font-size:17px;line-height:1;padding:0 4px}
.v-gchip button:hover{color:var(--ink)}
.v-form .v-chips select{width:auto;height:38px;padding:0 14px;border-radius:999px;font:600 13px/1 var(--body)}
.v-grouphead.has-cover{min-height:150px;align-items:flex-end;border-color:rgba(255,255,255,.18)}
.v-grouphead.has-cover p,.v-grouphead.has-cover small,.v-grouphead.has-cover .v-runs{color:#E6E9F2}
.v-thumb.wide{width:200px;height:70px}
.v-runs .btn{margin-left:6px}
.vault-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--c);background:var(--panel);color:var(--ink);font:700 13px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;margin-right:auto;transition:border-color .15s,color .15s}
.vault-btn:hover{border-color:var(--ink)}
.vault-btn[aria-current="page"]{background:var(--grad);color:#05060A;border-color:transparent}
.vault-btn[hidden]{display:none}
.vault-btn .vdot{position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;background:#FF3B30;border:2px solid #05060A}
.vault-btn .vdot[hidden]{display:none}
/* Vault notifications + Active now (Oct 31 2026) */
.v-bell{position:relative;padding-left:12px;padding-right:12px}
.v-bell .n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FF3B30;color:#fff;font:800 11px/18px var(--hud);text-align:center}
.v-bell .n[hidden]{display:none}
.v-pop{position:fixed;right:16px;top:calc(14px + env(safe-area-inset-top,0px));z-index:69;display:flex;align-items:flex-start;gap:6px;max-width:min(380px,calc(100vw - 32px));padding:10px 8px 10px 12px;border-radius:14px;background:rgba(14,16,24,.97);border:1px solid rgba(255,59,48,.5);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.v-pop[hidden]{display:none}
.v-pop-main{display:flex;gap:10px;align-items:flex-start;color:var(--ink);text-decoration:none;flex:1;min-width:0}
.v-pop-main b{display:block;font-size:14px;line-height:1.3}
.v-pop-main small{display:block;color:var(--ink2);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.v-pop-x{background:none;border:0;color:var(--ink3);font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
.v-notes{padding:4px 0}
.v-note{padding:12px 16px;border-top:1px solid var(--line)}
.v-note-main{display:flex;gap:12px;align-items:flex-start;color:var(--ink);text-decoration:none}
.v-note-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0 50px}
.v-active-p{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.v-active-p[aria-expanded="true"] .v-av{outline:2px solid var(--c);outline-offset:2px}
.v-active-card{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0 0;border-top:1px solid var(--line)}
.v-active-card .v-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.v-note:first-child{border-top:0}
.v-note.unread{background:rgba(255,59,48,.07)}
.v-note-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.v-note-t b{font-size:14px}
.v-note-said{color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.v-note-t small{color:var(--ink3);font-size:12px;overflow-wrap:anywhere}
.v-note-ic{font-size:18px}
.v-active{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;min-height:20px}
.v-active[aria-hidden="true"]{border-color:transparent;padding:0;min-height:0;margin:0}
.v-live{width:9px;height:9px;border-radius:50%;background:var(--good);animation:ping 1.6s infinite;flex:none}
.v-active-none{color:var(--ink3);font-size:13px}
.v-active-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.v-active-p{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink2);text-decoration:none;flex:none;max-width:62px}
.v-active-p small{font-size:11px;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-active-more{align-self:center;color:var(--ink3);font-size:13px}
.v-comment.v-flash{animation:vflash 2.4s ease-out}
@keyframes vflash{0%{background:rgba(255,59,48,.22)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.v-live{animation:none}.v-comment.v-flash{animation:none;background:rgba(255,59,48,.12)}}
.v-nfy{padding:14px 16px;margin:0 0 16px;border-color:rgba(255,59,48,.45)}
.v-nfy-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.v-nfy-list{display:grid;gap:6px}
.v-nfy-list a{color:var(--ink);padding:6px 0;border-top:1px solid var(--line)}
.v-nfy-list a b{color:#FF6B5E}
.v-nfy-list small{color:var(--ink3)}
.v-tag{color:var(--c);font-weight:700;white-space:nowrap}
.v-tag small{color:var(--ink3);font-weight:500}
.v-tag.on{text-decoration:underline;text-underline-offset:4px}
.v-trend{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.v-labrow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.v-emoji-btn{border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:4px 10px;font-size:16px;line-height:1;cursor:pointer}
.v-emoji-btn:hover{border-color:var(--c)}
.v-emojipop{position:fixed;z-index:320;width:min(320px,calc(100vw - 16px));max-height:260px;overflow:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;background:#12151F;border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.v-emojipop button{border:0;background:transparent;border-radius:8px;font-size:22px;line-height:1;padding:6px 0;cursor:pointer}
.v-emojipop button:hover{background:rgba(255,255,255,.1)}
.v-modal{position:fixed;inset:0;z-index:300;background:rgba(5,6,10,.8);display:grid;place-items:center;padding:12px}
.v-mbox{width:min(940px,100%);max-height:96vh;overflow:auto;background:#12151F;border:1px solid var(--line2);border-radius:16px;display:grid;gap:12px;padding:14px}
.v-mhead,.v-mfoot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.v-mfoot{justify-content:flex-start;position:sticky;bottom:-14px;background:#12151F;padding:10px 0 2px;margin-bottom:-6px;border-top:1px solid var(--line)}
.v-mbody{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.v-mstage{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid var(--line2)}
.v-mbase{position:absolute;inset:0;background-position:center;background-repeat:no-repeat}
.v-mi{position:absolute;transform:translate(-50%,-50%);white-space:pre;text-align:center;line-height:1.1;cursor:grab;padding:2px 8px;border:1px dashed transparent;touch-action:none;max-width:98%}
.v-mi:active{cursor:grabbing}
.v-mi.sel{border-color:var(--c)}
.v-mi.t{font-family:Impact,"Arial Black",sans-serif;font-weight:900;text-transform:uppercase;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 8px #000}
.v-mi.e{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.v-mtools{display:grid;gap:14px;align-content:start}
.v-mrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.v-mrow .btn{white-space:normal;text-align:left}
.v-mthumb{width:52px;height:52px;padding:0;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer}
.v-mthumb img{width:100%;height:100%;object-fit:contain}
.v-sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);cursor:pointer;padding:0}
.v-sw.on{border-color:var(--c);box-shadow:0 0 0 2px #12151F,0 0 0 4px var(--c)}
.v-mtools textarea,.v-mtools input[type=search]{border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:8px 10px;font:600 14px/1.3 var(--body)}
@media (max-width:760px){.v-mbody{grid-template-columns:1fr}.v-mstage{max-width:min(100%,50vh);margin:0 auto}}
.v-thumb-meme{cursor:pointer;border-style:dashed;padding:6px;gap:4px;align-content:center;color:var(--ink2)}
.v-thumb-meme span{font-size:26px;line-height:1}
.v-thumb-meme:hover{border-color:var(--c);color:var(--ink)}
.v-link{color:var(--c);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.v-top{display:block;margin:2px 0 0;padding:8px 12px;border-left:3px solid #FF6B5E;background:var(--panel);border-radius:0 10px 10px 0;color:var(--ink2);line-height:1.45}
.v-top .eyebrow{display:block;margin-bottom:2px}
.v-top b{margin-left:8px;color:var(--ink);white-space:nowrap}
.v-comment.v-best{border-left:3px solid #FF6B5E;padding-left:10px}
.v-bestflag{display:block;color:#FF6B5E;margin-top:6px}
.v-cpics{margin:6px 0 0 38px}
.v-csort{margin:10px 0 4px}
.v-thumb-sm{width:64px;height:64px}
.v-shoprow{grid-template-columns:1fr auto}
.v-saverow{position:sticky;bottom:0;display:grid;gap:6px;padding:14px 0 6px;margin-top:4px;background:linear-gradient(rgba(10,12,18,0),#0A0C12 30%)}
.v-saverow .msg{margin:0}
.v-intro{padding:16px 18px;margin:0 0 16px;border-color:rgba(20,212,227,.35)}
.v-intro-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.v-intro p{margin:6px 0;color:var(--ink2);line-height:1.5}
.v-intro ol{margin:8px 0;padding-left:20px;display:grid;gap:6px;color:var(--ink2);line-height:1.5}
.v-intro b{color:var(--ink)}
.v-gwrap{overflow-x:auto;margin-top:12px}
.v-growth{width:100%;border-collapse:collapse;font-size:14px}
.v-growth th,.v-growth td{text-align:right;padding:6px 10px;border-top:1px solid var(--line);white-space:nowrap}
.v-growth th:first-child,.v-growth td:first-child{text-align:left}
.v-growth th{color:var(--ink3);font:700 11px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;border-top:0}
.v-nudge{padding:12px 16px;margin:0 0 12px}
.v-nudge form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.v-nudge form>span{display:grid;margin-right:auto}
.v-nudge small{color:var(--ink3)}
.v-nudge input[name=username]{flex:1;min-width:140px;max-width:220px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);padding:9px 12px;color:var(--ink);font:600 14px/1.2 var(--body)}
.v-statbtn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.v-statbtn:hover,.v-statbtn[aria-pressed="true"]{color:var(--c)}
.v-flist{padding:14px 16px;margin:16px 0 0}
.v-frow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.v-modechips{margin-right:auto}
.v-modechips .chip{text-decoration:none}
@media (max-width:560px){.vault-btn{padding:0 11px;letter-spacing:.06em}.vault-btn .vb-the{display:none}}
@media (max-width:640px){.v-tn{width:52px;height:52px}.v-tn.big{width:76px;height:76px}.v-tn-more{height:52px}.v-grid{grid-template-columns:1fr}.v-qrow{grid-template-columns:70px 1fr}.v-qrow img{width:70px;height:88px}.v-qbtns{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .v-shoe{grid-template-columns:40px 1fr}.v-shoe img{width:40px;height:40px}.v-shoe .go{grid-column:2}.v-pro{margin-top:-32px}.v-pro>div:nth-child(2){padding-top:0}.v-pro .v-av{width:72px!important;height:72px!important}}
/* ---------- Grail Social: the shell (Oct 31 2026, Stan: "make the whole section look better ... it will be important eventually so we might as well organize it now") ----------
   One header and tab bar on every page, a feed with a right-hand rail on a laptop, group chips, cards with a clear top line. Prefix so-: gs- is the search button's. */
.so-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.so-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.so-rqtab{display:none!important}
.so-acts .so-pic{display:none}
.so-mark{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:15px;background:var(--grad);color:#05060A;font:900 18px/1 var(--display);letter-spacing:-.02em;box-shadow:0 8px 26px rgba(34,211,238,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.so-brandtx{display:grid;gap:4px;min-width:0}
.so-brandtx h1,.so-brandtx b{margin:0;font:900 clamp(22px,3vw,30px)/1 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-brandtx small{color:var(--ink3);font:600 11px/1.2 var(--hud);letter-spacing:.14em;text-transform:uppercase}
.so-acts{justify-content:flex-end}
.so-acts .btn,.so-acts .share-btn{height:42px}
.so-acts .v-av{margin-right:2px}
.so-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin:0 0 22px}
.so-tabs::-webkit-scrollbar{display:none}
.so-tabs a,.so-tabs button{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:0;background:none;cursor:pointer;color:var(--ink2);font:700 12px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.so-tabs a:hover,.so-tabs button:hover{color:var(--ink)}
.so-tabs a[aria-current="page"],.so-tabs button[aria-pressed="true"]{color:var(--ink)}
.so-tabs a[aria-current="page"]::after,.so-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--grad)}
.so-tabs .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.1);color:var(--ink2);font:800 11px/18px var(--hud);text-align:center}
.so-tabs a .n{background:#FF3B30;color:#fff}
.so-ptabs{margin:24px 0 18px}
.so-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.so-pagehead{margin:0 0 20px}
.so-pagehead h1{margin:0;font:900 clamp(26px,3.6vw,40px)/1.05 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em}
.so-pagehead p{margin:8px 0 0;color:var(--ink2);max-width:62ch;line-height:1.5}
.so-layout{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:26px;align-items:start;max-width:1140px}
.so-main{min-width:0;display:grid;gap:14px}
.so-rail{display:grid;gap:14px;min-width:0}
.so-card{padding:16px;border-radius:16px}
.so-card h3{margin:0 0 10px;font:700 11px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.so-links{margin:0;padding:0 4px;line-height:1.7}
.so-more{display:inline-block;margin-top:10px;color:var(--c);font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
/* the box at the top of the feed */
.so-compose{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px}
.so-compose .v-av,.so-compose-av{width:44px;height:44px;flex:none}
.so-compose-in{flex:1;min-width:0;display:flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--ink2);font:500 15px/1 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-compose-in:hover{border-color:var(--c);color:var(--ink)}
.so-compose-acts{display:flex;gap:8px;flex:none}
.so-join{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px;border-radius:18px;border-color:rgba(34,211,238,.35);background:linear-gradient(100deg,rgba(123,97,255,.16),rgba(34,211,238,.10))}
.so-join span{flex:1 1 260px;color:var(--ink2);line-height:1.45}
.so-join b{display:block;color:var(--ink);font-size:18px;margin-bottom:2px}
/* group chips and the order switch */
.so-bar{display:flex;align-items:center;gap:12px;min-width:0}
.so-barlabel{flex:1;color:var(--ink2);font-weight:600}
.so-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px 22px 2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.so-chips::-webkit-scrollbar{display:none}
.so-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font:600 13px/1 var(--body);white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.so-chip:hover{color:var(--ink);border-color:var(--c)}
.so-chip[aria-current="page"]{background:var(--ink);color:#05060A;border-color:var(--ink)}
.so-chip .n,.so-gl .n,.so-gcard .n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#FF3B30;color:#fff;font:800 11px/18px var(--hud);text-align:center}
.so-chip-add{border-style:dashed;color:var(--c)}
.so-sort{display:inline-flex;flex:none;padding:3px;border-radius:12px;border:1px solid var(--line2);background:var(--panel)}
.so-sort button{height:32px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:var(--ink2);font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.so-sort button[aria-pressed="true"]{background:var(--grad);color:#05060A}
/* the rail */
.so-wheelcard{position:relative;display:grid;grid-template-columns:76px 1fr;gap:6px 16px;align-items:center;padding:16px;border-radius:18px;color:var(--ink);overflow:hidden;border-color:rgba(123,97,255,.45);background:radial-gradient(120% 120% at 0% 0%,rgba(123,97,255,.28),transparent 60%),radial-gradient(100% 100% at 100% 100%,rgba(34,211,238,.2),transparent 55%),var(--panel)}
.so-wheelcard:hover{border-color:var(--c)}
.so-wheelmini{position:relative;width:76px;height:84px;display:block}
.so-minwheel{position:absolute;left:0;right:0;bottom:0;height:76px;border-radius:50%;background:conic-gradient(#7B61FF 0 45deg,#161B2B 0 90deg,#22D3EE 0 135deg,#1B2133 0 180deg,#7B61FF 0 225deg,#161B2B 0 270deg,#22D3EE 0 315deg,#1B2133 0 360deg);box-shadow:0 0 0 4px rgba(255,255,255,.1),0 10px 26px rgba(0,0,0,.55);animation:soSpin 16s linear infinite}
.so-minwheel::after{content:"";position:absolute;inset:31%;border-radius:50%;background:#0B0D14;border:2px solid var(--line2)}
.so-minptr{position:absolute;left:50%;top:0;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:14px solid var(--hot);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));z-index:1}
@keyframes soSpin{to{transform:rotate(360deg)}}
.so-wheeltx{display:grid;gap:4px;min-width:0}
.so-wheeltx b{font-size:16px;line-height:1.25}
.so-wheeltx span{color:var(--ink2);font-size:13px;line-height:1.35}
.so-wheelgo{grid-column:2;justify-self:start;margin-top:4px}
.so-gl{display:grid;gap:2px}
.so-gl a{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px;color:var(--ink)}
.so-gl a:hover{background:rgba(255,255,255,.05)}
.so-gico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:rgba(255,255,255,.07);font-size:17px;line-height:1}
.so-gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.so-rail .v-active{margin:0;padding:16px;border-radius:16px;background:var(--panel);align-items:flex-start}
.so-rail .v-active[aria-hidden="true"]{display:none}
.so-rail .v-active .eyebrow{margin-right:auto}
.so-rail .v-active-row{flex-basis:100%;flex-wrap:wrap;overflow:visible}
.so-rail .v-nfy{margin:0;padding:16px;border-radius:16px;border-color:rgba(255,59,48,.4)}
.so-rail .v-trend{margin:0;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);gap:8px}
.so-rail .v-trend .eyebrow{flex-basis:100%}
.so-rail .v-tag{padding:6px 11px;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28)}
.so-gwrap{display:grid;gap:26px;max-width:1140px}
.so-h2{margin:0 0 12px;font:700 12px/1 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.so-gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.so-gcard{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;color:var(--ink);transition:border-color .15s,transform .15s}
.so-gcard:hover{border-color:var(--c);transform:translateY(-1px)}
.so-gcard b{display:flex;align-items:center;gap:8px;font-size:15px}
.so-gcard small{display:block;margin-top:4px;color:var(--ink2);line-height:1.45}
/* posts */
.v-list{max-width:none;gap:14px}
.v-item{padding:16px 18px 14px;border-radius:18px;transition:border-color .15s}
.v-item:hover{border-color:var(--line2)}
.v-by{padding:0;gap:8px 12px}
.v-item>.v-by,.v-item>.v-held{padding:0 0 12px}
.v-name{gap:12px}
.so-who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.v-name b{font-size:15px;color:var(--ink)}
.so-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-left:auto;justify-content:flex-end}
.so-time{color:var(--ink3);font:600 11px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.so-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid rgba(34,211,238,.3);background:rgba(34,211,238,.08);color:var(--c);font:700 11px/1 var(--hud);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.so-pill:hover{background:rgba(34,211,238,.18)}
.v-cap{font-size:16px;line-height:1.55}
.v-item .v-cap{-webkit-line-clamp:5}
.v-tn{width:84px;height:84px;border-radius:12px}
.v-tn-more{height:84px;min-width:56px;border-radius:12px}
.v-item .v-foot{padding:12px 0 0;margin-top:6px;border-top:1px solid var(--line)}
.v-comment .v-name .v-av{width:30px!important;height:30px!important;font-size:13px!important}
.v-full{max-width:820px;border-radius:18px;padding:18px 20px 14px}
.v-full>.v-by{padding:0 0 12px}
.v-full .v-foot{padding:12px 0 0;margin-top:6px;border-top:1px solid var(--line)}
.v-comments{max-width:820px}
.v-grouphead{padding:18px 20px;margin:0;border-radius:18px}
.v-grouphead>div:first-child>b{font:800 22px/1.15 var(--display);color:var(--ink)}
.v-intro{margin:0;border-radius:18px}
.v-wheelstrip{margin:0;border-radius:18px}
/* profile */
.v-profile{border-radius:20px}
.v-cover{height:clamp(96px,16vw,168px)}
.v-pro{padding:0 24px 22px;margin-top:-46px;gap:20px}
.v-pro .v-av{border:4px solid var(--bg2);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.v-pro>div:nth-child(2){padding-top:60px}
.v-stats{display:flex;gap:10px 26px;margin-top:14px;align-items:flex-end}
.v-stats>span,.v-stats>button{display:flex;flex-direction:column;gap:3px;font:600 11px/1.1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.v-stats b{font:800 21px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}
.v-stats .eyebrow{align-self:center}
.v-pairs{gap:14px}
.v-pair{border-radius:16px}
/* forms */
.v-new,.v-meform{padding:22px;border-radius:18px}
.so-main .crumbs,.crumbs{margin-bottom:16px}
@media (max-width:980px){
  .so-layout{grid-template-columns:minmax(0,1fr)}
  .so-rail .so-wheelcard,.so-rail .so-links{display:none}
}
@media (min-width:981px){.so-m-only{display:none!important}}
@media (max-width:640px){
  .so-top{gap:10px;margin-bottom:12px;flex-wrap:nowrap}
  .so-mark{width:40px;height:40px;border-radius:12px;font-size:15px}
  .so-brandtx h1,.so-brandtx b{font-size:18px}
  .so-brandtx small{display:none}
  .so-acts{gap:6px;flex-wrap:nowrap;flex:none}
  .so-acts .btn{height:40px;padding:0 12px}
  .so-acts .btn.primary{width:40px;padding:0;font-size:20px}
  .so-acts .so-mpb{width:40px;padding:0;justify-content:center}
  .so-acts .so-pic{display:block}
  .so-acts .so-mp,.so-acts .so-pt,.so-acts .share-btn,.so-acts #pageShare,.so-acts .so-rq{display:none}
  .so-rqtab{display:inline-flex!important}
  .so-tabs{margin:0 -16px 18px;padding:0 10px}
  .so-tabs a,.so-tabs button{padding:0 11px;letter-spacing:.07em;font-size:11px}
  .so-compose{flex-wrap:wrap;padding:12px}
  .so-compose-acts{flex-basis:100%}
  .so-compose-acts .btn{flex:1}
  .so-bar{flex-wrap:wrap}
  .so-chips{flex-basis:100%;order:2}
  .so-sort{margin-left:auto;order:1}
  .v-item{padding:14px 14px 12px}
  .v-tn{width:72px;height:72px}.v-tn-more{height:72px}
  .v-by{align-items:flex-start}
  .so-meta{flex-basis:100%;margin-left:0;justify-content:flex-start}
  .v-pro{padding:0 16px 18px;flex-direction:column;align-items:flex-start;gap:12px;margin-top:-38px}
  .v-pro>div:nth-child(2){padding-top:0;min-width:0;width:100%;flex:none}
  .v-stats{gap:10px 20px}
  .v-pro>.v-actions{width:100%}
  .v-pro>.v-actions .btn{flex:1 1 auto}
}
/* A small phone (380 px and under): the brand's mark steps aside, then its name shrinks, before the name could ever run under the buttons (Stan's iPhone, Oct 31 2026: the owner's header). */
@media (max-width:380px){
  .so-top{gap:8px}
  .so-mark{display:none}
  .so-acts{gap:5px}
}
@media (max-width:340px){ .so-brandtx h1,.so-brandtx b{font-size:16px} }
/* Grail Social flight deck: one visible destination picker, calm content, living light.
   Motion is decorative and uses transforms; the global reduced-motion rule disables it. */
.so-top{max-width:1140px;margin:4px 0 18px}
.so-brandtx small{color:var(--ink2);font:500 12px/1.3 var(--body);letter-spacing:.02em;text-transform:none}
.so-mark{width:40px;height:40px;border-radius:12px;background:#121827;border:1px solid #34445e;box-shadow:inset 0 0 18px #22d3ee14;color:var(--c);font-size:14px}
.so-acts .btn,.so-acts .share-btn{height:44px;min-width:44px}
.so-navigation{max-width:1140px;margin:0 0 24px}
.so-nav{position:relative;isolation:isolate;overflow:hidden;border:1px solid #345365;border-radius:20px;background:radial-gradient(ellipse at 5% 0%,#7b61ff20,transparent 65%),linear-gradient(115deg,#111625,#0c1d26);box-shadow:inset 0 1px 0 #ffffff0c,0 12px 40px #0003}
.so-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#22d3ee0d 50%,transparent 70%);transform:translateX(-100%);animation:soSignal 12s ease-in-out infinite;pointer-events:none}
.so-nav[open]{border-color:#6697b1}
.so-nav summary{display:flex;align-items:center;gap:16px;padding:17px 20px;cursor:pointer;list-style:none;min-height:94px;position:relative}
.so-nav summary::-webkit-details-marker,.so-help summary::-webkit-details-marker{display:none}
.so-nav summary:focus-visible{outline-offset:-4px;border-radius:18px}
.so-nav-title{display:grid;gap:4px;min-width:0;flex:1}
.so-nav-title small{font:600 10px/1.25 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:#a9c5d5}
.so-nav-title strong{font:750 23px/1.2 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.so-nav-title>span{font:500 12px/1.35 var(--body);color:#b6c0d1}
.so-nav-chevron{width:32px;height:32px;display:grid;place-items:center;border:1px solid #47728b;border-radius:50%;color:var(--c);font-size:22px;flex:none;transition:transform .2s}
.so-nav[open] .so-nav-chevron{transform:rotate(180deg)}
.so-nav-chevron svg{display:block}
.so-nav[open] .so-nav-links{animation:soReveal .18s ease-out both}
.so-orbit{width:48px;height:48px;position:relative;display:grid;place-items:center;flex:none}
.so-orbit b{font:800 20px/1 var(--display);color:#e9faff;text-shadow:0 0 18px #22d3ee88}
.so-orbit i{position:absolute;inset:2px;border:1px solid #22d3ee80;border-radius:50%;transform:rotate(-35deg) scaleY(.6);animation:soOrbit 16s linear infinite}
.so-orbit i::after{content:"";position:absolute;top:4px;left:4px;width:5px;height:5px;background:#72eaff;border-radius:50%;box-shadow:0 0 10px #22d3ee}
.so-orbit i+i{inset:0;border-color:#a08bff80;animation-direction:reverse;animation-duration:22s}
.so-orbit i+i::after{background:#b6a6ff;box-shadow:0 0 10px #7b61ff}
.so-nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:12px;border-top:1px solid #ffffff15;background:#090e18bb}
.so-nav-links a{min-height:66px;display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid transparent;transition:background .15s,border-color .15s}
.so-nav-links a:hover,.so-nav-links a:focus-visible{background:#ffffff07;border-color:#527386}
.so-nav-links a[aria-current="page"]{background:linear-gradient(100deg,#7b61ff19,#22d3ee0c);border-color:#395c72}
.so-nav-icon{width:34px;height:34px;display:grid;place-items:center;flex:none;font-size:24px;color:#b8aaff}
.so-nav-links a[aria-current="page"] .so-nav-icon{color:#70e5f5}
.so-nav-links a>span:nth-child(2){min-width:0;flex:1}
.so-nav-links b{display:block;font-size:14px;line-height:1.35}
.so-nav-links small{display:block;color:#aab7ca;font-size:12px;line-height:1.4;margin-top:3px}
.so-nav-arrow{color:#74869f}
.so-nav-count{padding:4px 7px;border-radius:6px;background:#1c3945;color:#b1f2fa;font:600 10px/1.3 var(--hud);white-space:nowrap}
.so-layout{gap:24px;grid-template-columns:minmax(0,1fr) 300px}
.so-main{gap:18px}
.so-compose{gap:12px;padding:14px 16px;border-radius:16px;background:#10151f;border-color:#27313f;flex-wrap:nowrap}
.so-compose .v-av,.so-compose-av{width:36px!important;height:36px!important}
.so-compose-in{padding:0;border:0;background:transparent;border-radius:0;font-size:14px;height:44px}
.so-compose-post{height:44px;min-width:78px;padding:0 14px;gap:6px;flex:none;border-radius:11px;font:700 12px/1 var(--body);letter-spacing:0;text-transform:none;box-shadow:none}
.so-compose-post>span{font-size:21px;font-weight:400}
.so-bar{gap:10px;flex-wrap:nowrap;align-items:center}
.so-filter{display:grid;min-width:0;flex:1;gap:7px}
.so-filter>span:not(.so-sr){color:var(--ink2);font:600 11px/1.3 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.so-filter select{width:100%;min-width:0;height:46px;border:1px solid #293545;border-radius:12px;padding:0 30px 0 14px;background-color:#10151f;color:var(--ink);font:600 13px/1 var(--body);text-overflow:ellipsis;cursor:pointer}
.so-sort{padding:0;border:1px solid #293545;border-radius:12px;background:#0b1019;order:0;margin:0}
.so-sort button{height:44px;min-width:48px;padding:0 13px;font:600 12px/1 var(--body);letter-spacing:0;text-transform:none}
.so-sort button[aria-pressed="true"]{background:#243247;color:#e5faff;box-shadow:inset 0 -2px 0 #48c9e2;border-radius:11px}
.so-barlabel{font-size:13px;line-height:1.4}
.so-main .v-item{padding:20px;border-radius:18px;background:linear-gradient(145deg,#121721,#0d111a);border-color:#27303d;box-shadow:0 6px 20px #0002}
.so-main .v-list{gap:18px}
.so-main .v-by{gap:10px;align-items:center}
.so-main .v-name{min-width:0;gap:10px}
.so-main .so-who{min-width:0;flex-wrap:wrap;gap:6px}
.so-main .v-name b{overflow-wrap:anywhere;font-size:14px}
.so-main .v-name .pill{font-size:9px;min-height:19px;padding:3px 7px;letter-spacing:.06em;box-shadow:none}
.so-main .so-meta{font-size:11px;gap:5px 8px;flex-basis:100%;margin-left:50px;justify-content:flex-start}
.so-main .so-time{font-size:10px;color:#98a6ba;letter-spacing:.03em}
.so-main .so-pill{height:26px;padding:0 8px;border:0;background:#1b2835;color:#abd6e1;font:500 11px/1 var(--body);letter-spacing:0;text-transform:none}
.so-main .v-cap{font-size:16px;line-height:1.6;margin:0 0 14px;color:#e1e6ef}
.so-main .v-thumbrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:hidden;margin-top:12px}
.so-main .v-thumbrow .v-tn{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;max-width:none}
.so-main .v-thumbrow .v-tn:only-child{grid-column:1/-1;aspect-ratio:16/10}
.so-main .v-thumbrow .v-tn-more{height:auto;min-height:80px}
.so-main .v-item .v-foot{padding-top:12px;margin-top:16px;gap:8px}
.so-main .v-foot .btn,.so-main .vote button{min-height:44px}
.so-rail .so-card,.so-rail .v-active,.so-rail .v-nfy,.so-rail .v-trend{background:#0e141e;border-color:#26303e;border-radius:16px}
.so-rail .so-card h3{color:#a7b5c9;font:600 11px/1.4 var(--hud)}
.so-wheelcard{background:linear-gradient(135deg,#18152b,#0d2029);border-color:#364354;box-shadow:none}
.so-minwheel{animation-duration:28s}
.so-gl a{min-height:44px;font-size:13px}
.so-help{padding:0;border-color:#28313f;background:#10151f;scroll-margin-top:var(--header-offset,152px)}
.so-help summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;font-size:13px;color:var(--ink2)}
.so-help summary span{font-size:20px;color:var(--c)}
.so-help-body{padding:4px 16px 18px}
.so-profile-bar{max-width:1140px;margin:20px 0}
.so-profile-filter{max-width:420px}
.v-profile{max-width:1140px;background:#10151f;border-color:#283645;overflow:hidden}
.v-profile .v-cover{height:104px;opacity:.8}
.v-profile .v-cover-x{background:radial-gradient(ellipse at 20% 0%,#7b61ff40,transparent 65%),repeating-linear-gradient(90deg,transparent 0 39px,#22d3ee0a 39px 40px),linear-gradient(110deg,#131827,#122833)}
.v-profile .v-pro{margin-top:-32px;padding:0 22px 20px;gap:16px}
.v-profile .v-pro>.v-av{width:72px!important;height:72px!important}
.v-profile .v-pro>div:nth-child(2){padding-top:44px}
.v-profile .v-pro h1{font-size:clamp(22px,3vw,32px);overflow-wrap:anywhere}
.v-profile .v-pro>.v-actions{padding-top:44px;gap:7px}
.v-profile .v-pro>.v-actions .btn{min-height:44px;padding-inline:12px;font:600 12px/1.2 var(--body);letter-spacing:0;text-transform:none}
.v-profile .v-stats{gap:14px 22px;flex-wrap:wrap}
.v-profile .v-stats>span,.v-profile .v-stats>button{color:#a4b0c1;font:500 11px/1.3 var(--body);letter-spacing:0;text-transform:none}
.v-profile .v-stats>button{min-height:44px;justify-content:center}
.v-profile .v-stats b{font-size:18px}
@keyframes soReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes soSignal{0%,20%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
@keyframes soOrbit{to{transform:rotate(325deg) scaleY(.6)}}
@media (prefers-reduced-motion:reduce){.so-nav::before{animation:none!important;transform:none}.so-orbit i,.so-nav-links{animation:none!important}}
@media (max-width:980px){.so-layout{grid-template-columns:minmax(0,1fr)}.so-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.so-rail .so-wheelcard{display:grid}.so-rail .so-links{display:block;grid-column:1/-1}}
@media (max-width:640px){
  .so-top{margin-bottom:14px;gap:10px}.so-brandtx h1,.so-brandtx b{font-size:19px}.so-brandtx small{display:none}.so-mark{display:none}
  .so-acts .btn{height:44px;width:44px;padding:0}.so-acts .share-btn,.so-acts #pageShare{display:none}
  .so-navigation{margin-bottom:18px}.so-nav{border-radius:17px}.so-nav summary{min-height:94px;padding:14px;gap:12px}.so-nav-title strong{font-size:21px}.so-nav-title small{font-size:9px;letter-spacing:.12em}.so-nav-title>span{font-size:11px}.so-orbit{width:38px;height:44px}.so-nav-chevron{width:28px;height:28px}
  .so-nav-links{grid-template-columns:1fr;padding:8px}.so-nav-links a{min-height:62px;padding:10px}
  .so-compose{gap:9px;padding:10px 12px}.so-compose-in{font-size:13px}.so-compose-post{min-width:70px;padding:0 10px}.so-compose .v-av{width:32px!important;height:32px!important}
  .so-main{gap:14px}.so-main .v-item{padding:15px;border-radius:16px}.so-main .v-list{gap:14px}.so-main .v-cap{font-size:15px}
  .so-rail{grid-template-columns:minmax(0,1fr);margin-top:10px}.so-wheelcard{grid-template-columns:52px 1fr auto;padding:14px;gap:12px}.so-wheelmini{width:48px;height:54px}.so-minwheel{height:48px}.so-wheelgo{grid-column:3;grid-row:1;margin:0}.so-wheeltx b{font-size:14px}.so-wheeltx span{font-size:12px}
  .v-profile .v-cover{height:80px}.v-profile .v-pro{margin-top:-24px;padding:0 16px 16px;gap:10px}.v-profile .v-pro>.v-av{width:56px!important;height:56px!important}.v-profile .v-pro>div:nth-child(2),.v-profile .v-pro>.v-actions{padding-top:0}.v-profile .v-stats{gap:10px 18px;margin-top:10px}.v-profile .v-pro>.v-actions{display:flex;flex-wrap:wrap}
  .so-profile-filter{max-width:none}
}
@media (max-width:350px){.so-nav-title>span{font-size:10px}.so-nav summary{gap:9px;padding:12px}.so-nav-title strong{font-size:19px}.so-orbit{width:32px}.so-sort button{padding:0 10px;min-width:44px}.so-filter select{padding-left:10px;font-size:12px}.so-compose .v-av{display:none}}
/* ---------- Search (Oct 13 2026) ----------
   A Search button in the bar of every page (a field on a laptop, an icon on a phone) opens a panel that searches the whole catalogue at once. */
.gs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;font:600 13px/1 var(--body);flex:none;transition:border-color .15s,color .15s}
.gs-btn:hover,.gs-btn:focus-visible{border-color:var(--c);color:var(--c);outline:none}
.gs-btn .gs-lbl,.gs-btn kbd{display:none}
@media (min-width:1021px){
  .gs-btn{width:clamp(200px,22vw,300px);justify-content:flex-start;padding:0 12px;color:var(--ink2)}
  .gs-btn .gs-lbl{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gs-btn kbd{display:inline-block;margin-left:auto;padding:3px 7px;border-radius:6px;border:1px solid var(--line2);font:600 11px/1 var(--hud);color:var(--ink3)}
}
.topin.fit-tight .gs-btn{padding:0 9px}
.gs{position:fixed;left:0;right:0;top:var(--gs-top,0px);height:var(--gs-vh,100%);z-index:68;display:flex;align-items:flex-start;justify-content:center}
.gs[hidden]{display:none}
.gs-back{position:fixed;inset:0;background:rgba(5,6,10,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gs-panel{position:relative;display:flex;flex-direction:column;width:100%;max-height:100%;background:var(--bg2);border-bottom:1px solid var(--line2);box-shadow:0 30px 80px -10px rgba(0,0,0,.9);overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
@media (min-width:761px){.gs{padding:9vh 16px 16px;height:100%;box-sizing:border-box}.gs-panel{width:min(720px,100%);max-height:82vh;border:1px solid var(--line2);border-radius:18px}}
body.gs-open{overflow:hidden}
body.gs-open #alertHost{display:none}
.gs-form{display:flex;align-items:center;gap:8px;margin:0;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line);color:var(--ink2)}
.gs-form input{flex:1;min-width:0;height:46px;border:0;background:transparent;color:var(--ink);font:600 17px/1 var(--body);outline:none;-webkit-appearance:none;appearance:none}
.gs-form input::placeholder{color:var(--ink3)}
.gs-form input::-webkit-search-cancel-button{display:none}
.gs-x{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--ink2);font-size:18px;cursor:pointer}
.gs-x:hover,.gs-x:focus-visible{background:var(--panel2);color:var(--ink);outline:none}
.gs-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 8px 12px}
.gs-h{display:flex;justify-content:space-between;align-items:center;margin:14px 8px 6px;font:700 11px/1 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.gs-link{border:0;background:none;color:var(--c);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:6px}
.gs-note{display:flex;align-items:center;gap:10px;margin:12px 8px;color:var(--ink2);font-size:14px;line-height:1.4}
.gs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 8px}
.gs-chips .chip{display:inline-flex;align-items:center;text-decoration:none}
.gs-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;min-height:64px;padding:8px;border:0;border-radius:12px;background:none;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.gs-row:hover,.gs-row[aria-selected="true"],.gs-row:focus-visible{background:var(--panel2);outline:none}
.gs-row[aria-selected="true"]{box-shadow:0 0 0 1px var(--c) inset}
.gs-pic{width:52px;height:52px;border-radius:10px;background:var(--plate);overflow:hidden;display:grid;place-items:center}
.gs-pic img{width:100%;height:100%;object-fit:contain}
.gs-nopic{padding:2px;font:700 10px/1.1 var(--hud);letter-spacing:.06em;text-transform:uppercase;color:#3a3f4d;text-align:center}
.gs-main{min-width:0}
.gs-main b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 14px/1.25 var(--body)}
.gs-main b em{font-style:normal;color:var(--c)}
.gs-main small{display:block;margin-top:3px;color:var(--ink3);font:600 11px/1.3 var(--hud);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-tag{justify-self:end}
@media (max-width:480px){.gs-row{grid-template-columns:48px minmax(0,1fr);min-height:0}.gs-pic{width:48px;height:48px;grid-row:span 2}.gs-main{align-self:end}.gs-tag{grid-column:2;justify-self:start;align-self:start}.gs-tag .pill{padding:4px 8px;font-size:9px}}
.gs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--bg2)}
.gs-all{display:inline-flex;align-items:center;min-height:44px;color:var(--c);font:700 13px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.gs-keys{color:var(--ink3);font:600 11px/1 var(--hud);letter-spacing:.08em}
@media (max-width:760px){.gs-keys{display:none}}
.gs-none{padding:16px 10px}
.gs-none b{font:800 17px/1.2 var(--display)}
.gs-none p{margin:8px 0 12px;color:var(--ink2);max-width:52ch}
.gs-none .gs-chips{margin:0}
.sq-list{display:grid;gap:10px;margin-top:10px}
/* Messages (Oct 19 2026) */
.chat-wrap{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start}
.chat-side{display:grid;gap:10px}
.chat-list{display:grid;gap:8px}
.chat-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.chat-row[aria-current=true]{border-color:var(--c);background:var(--panel2)}
.chat-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#05060A;font:800 16px/1 var(--hud)}
.chat-row .t{display:grid;gap:3px;min-width:0}.chat-row .t b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-row .t small{color:var(--ink2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row .w{display:grid;gap:6px;justify-items:end;font:700 10px/1 var(--hud);letter-spacing:.08em;color:var(--ink3)}
.chat-dot{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--hot);color:#fff;display:inline-grid;place-items:center;font:800 11px/1 var(--hud)}
.chat-thread{display:flex;flex-direction:column;min-height:440px;max-height:calc(100vh - 200px);padding:0;overflow:hidden}
.chat-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.chat-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-top .back{display:none}
.chat-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:14px;min-height:200px}
.chat-b{max-width:82%;padding:9px 13px;border-radius:16px;background:var(--panel2);overflow-wrap:anywhere;align-self:flex-start}
.chat-b.me{align-self:flex-end;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.35)}
.chat-b .x{white-space:pre-wrap}
.chat-b small{display:block;margin-top:4px;font-size:11px;color:var(--ink3)}
.chat-b .ph{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.chat-b .ph img{display:block;width:150px;max-width:100%;height:150px;object-fit:cover;border-radius:10px;cursor:zoom-in;background:var(--bg2)}
.chat-b .btn{margin-top:8px}
.chat-comp{border-top:1px solid var(--line);padding:12px;display:grid;gap:8px}
.chat-comp textarea{width:100%;min-height:44px;max-height:140px;resize:vertical;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);padding:10px 12px;font:inherit}
.chat-comp .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.chat-comp .row .grow{flex:1}
.chat-thumbs{display:flex;gap:8px;flex-wrap:wrap}.chat-thumbs span{position:relative}.chat-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}
.chat-thumbs button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:12px;line-height:1;cursor:pointer;padding:0}
.chat-to{display:grid;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.chat-to input{height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);padding:0 12px;font:inherit}
#chatBubble{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:var(--bg2);border:1px solid var(--c);color:var(--ink);font:700 12px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 24px rgba(0,0,0,.45)}
#chatBubble svg{width:20px;height:20px;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#chatBubble b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--hot);color:#fff;display:inline-grid;place-items:center;font-size:11px}
@media (max-width:760px){.chat-thread{height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:340px;scroll-margin-top:var(--header-offset,152px)}.chat-wrap{grid-template-columns:minmax(0,1fr)}.chat-wrap.has-thread .chat-side{display:none}.chat-wrap:not(.has-thread) .chat-main{display:none}.chat-thread{max-height:none}.chat-top .back{display:inline-flex}.chat-b{max-width:90%}}

/* Three membership levels: table scroll stays inside the card on a phone. */
.tier-panel{max-width:1100px!important;margin:24px auto!important;scroll-margin-top:var(--header-offset,152px)}.tier-panel h2{font-size:clamp(26px,4vw,44px);margin:10px 0}.tier-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 30px}.tier-card{border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}.tier-card.is-current{border-color:var(--good)}.tier-price{font-size:38px;line-height:1.1;font-weight:800}.tier-price small{font-size:13px;color:var(--ink2);font-weight:400;margin-left:5px}.tier-card p{min-height:42px;margin:0;color:var(--ink2)}.tier-card>small{font-size:12px;color:var(--ink3)}.tier-card .btn{white-space:normal;text-align:center;justify-content:center}.tier-current{color:var(--good);font-weight:700;padding:10px 0}.tier-table{overflow-x:auto}.tier-table table{border-collapse:collapse;width:100%;min-width:470px}.tier-table th,.tier-table td{padding:14px 10px;border-bottom:1px solid var(--line);text-align:center}.tier-table th:first-child{text-align:left;font-weight:500;width:52%}.tier-table th small{display:block;color:var(--warn);font-size:11px;margin-top:4px}.tier-check{color:var(--good);font-size:22px}.tier-planned{font-size:12px;color:var(--ink3)}.tier-details{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.tier-details p{font-size:12px;line-height:1.6;margin:0;color:var(--ink2)}.tier-details b{color:var(--ink)}.raffle-fill-btn{margin:6px 8px;font-size:12px}.rafill-sheet{position:fixed;inset:0;background:#000a;z-index:1200;display:grid;place-items:center;padding:20px}.rafill-sheet .panel{max-width:440px;width:100%}.rafill-sheet select{width:100%;margin:12px 0;padding:10px}.iap-tiers{display:flex;gap:8px;margin:14px 0}
@media(max-width:600px){.tier-cards{grid-template-columns:1fr;gap:10px}.tier-card{padding:18px}.tier-card p{min-height:0}.tier-details{grid-template-columns:1fr}.tier-panel{padding:16px!important}.tier-price{font-size:32px}.tier-table table{min-width:0;table-layout:fixed;font-size:12px}.tier-table th,.tier-table td{padding:12px 4px}.tier-table th:first-child{width:42%}.tier-table thead th{font-size:11px}}

/* Compact shared navigation: equal controls, a clear rhythm, and two painted accents. */
header.top .topin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 8px;align-items:stretch;padding:12px 16px 18px;min-height:0}
header.top .logo{display:none}
header.top .top-right{display:contents}
header.top :is(.menu-btn,.size-alerts-btn,.vault-btn,.gs-btn,[id="acctBtn"],.sizes-btn){
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;height:48px;min-height:48px;margin:0;padding:0 8px;
  border:1px solid rgba(164,179,206,.22);border-radius:11px;background:linear-gradient(160deg,#171b25,#0d1017);color:var(--ink);
  font:700 11px/1.2 var(--hud);letter-spacing:.055em;text-transform:uppercase;text-align:center;white-space:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 8px rgba(0,0,0,.16);transition:border-color .15s,background .15s,box-shadow .15s}
header.top :is(.menu-btn,.size-alerts-btn,.vault-btn,.gs-btn,[id="acctBtn"],.sizes-btn):hover{transform:none;border-color:rgba(153,213,239,.65);background:linear-gradient(160deg,#202a38,#111822)}
header.top :is(.menu-btn,.size-alerts-btn,.vault-btn,.gs-btn,[id="acctBtn"],.sizes-btn):focus-visible{outline:2px solid var(--c);outline-offset:3px}
header.top #menuLabel{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.top .menu-btn .burger{font-size:13px;flex-shrink:0;color:#9aaec3}
header.top .menu-btn .chev{font-size:10px;flex-shrink:0}
header.top .menu-btn .badge{position:absolute;right:5px;top:-6px;min-width:18px;padding:2px 4px;border:2px solid #0b0e16;font-size:9px;line-height:1}
header.top .size-alerts-btn{border-color:rgba(94,197,236,.6);background:linear-gradient(140deg,#192a40,#10242c)}
header.top .vault-btn{border-color:rgba(147,119,242,.55);background:linear-gradient(140deg,#262038,#151c2d)}
header.top .vault-btn .vb-the{display:inline}
header.top .vault-btn .vdot{width:10px;height:10px;top:-4px;right:5px}
header.top :is(.size-alerts-btn,.vault-btn)::after{content:"";position:absolute;bottom:-10px;left:calc(50% - 24px);width:48px;height:12px;pointer-events:none;
  background:linear-gradient(90deg,#598ce4,#51cbe8);filter:drop-shadow(0 2px 3px rgba(51,169,220,.18));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 0h48v2H36c-2 0-2 1-2 3v1a2 2 0 0 1-4 0V4c0-1-1-2-3-2h-7c-2 0-3 1-3 3v4a3 3 0 0 1-6 0V5c0-2-1-3-3-3H0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 0h48v2H36c-2 0-2 1-2 3v1a2 2 0 0 1-4 0V4c0-1-1-2-3-2h-7c-2 0-3 1-3 3v4a3 3 0 0 1-6 0V5c0-2-1-3-3-3H0z'/%3E%3C/svg%3E") center/contain no-repeat}
header.top .vault-btn::after{left:auto;right:14px;transform:scaleX(-1);background:linear-gradient(90deg,#716de9,#55b7ec)}
header.top .gs-btn .gs-lbl{display:inline;overflow:visible;white-space:normal}
header.top .gs-btn svg{width:15px;height:15px;flex-shrink:0;color:#9aaec3}
header.top .gs-btn kbd{display:none}
header.top .sizes-btn.has-sizes{flex-direction:column;gap:3px}
header.top .sizes-btn .sz-lbl,header.top .sizes-btn:not(.has-sizes) .sz-lbl{display:inline;font-size:11px}
header.top .sizes-btn:not(.has-sizes) .sz-lbl::after{content:none}
header.top .sizes-btn b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px;font-size:10px;line-height:1}
header.top .sizes-btn .sb-long{display:none}
header.top .sizes-btn .sb-short{display:inline}
header.top .sizes-btn:not(.has-sizes) b{display:none}
header.top .vault-btn[aria-current="page"],body.menu-open header.top .menu-btn{border-color:var(--c);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(34,211,238,.18)}
@media(min-width:900px){header.top .topin{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:1120px}header.top .topin:not(:has(.vault-btn:not([hidden]))){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:400px){header.top .topin{padding-inline:12px;column-gap:6px;row-gap:13px}header.top :is(.menu-btn,.size-alerts-btn,.vault-btn,.gs-btn,[id="acctBtn"],.sizes-btn){font-size:10px;letter-spacing:.025em;padding-inline:5px;gap:4px}header.top .sizes-btn .sz-lbl{font-size:10px}}
@media(prefers-reduced-motion:reduce){header.top :is(.menu-btn,.size-alerts-btn,.vault-btn,.gs-btn,[id="acctBtn"],.sizes-btn){transition:none}}
.swipe-back.forward{left:auto;right:-44px;padding-right:0;padding-left:3px}