/* Deadstock & Dandies
   Palette, type scale and section geometry are ported from the Claude Design
   prototype. Desktop (>1100px) is pixel-faithful to it; everything below that
   is new, since the prototype is desktop-only. */

:root{
  --ink:#111; --accent:#e0262d; --accent2:#ff5a5f; --green:#00a35c;
  --line:#e6e6e6; --line2:#ededed; --muted:#6b6b6b; --muted2:#8a8a8a; --muted3:#9a9a9a;
  --wash:#f3f3f3; --wash2:#f7f7f7; --max:1280px;
  --pad:24px;
  /* aliases the browse/filter block reads by these names */
  --paper:#fff; --mut:var(--muted); --mut2:var(--muted2); --gut:var(--pad);
  --disp:'Anton',Impact,'Haettenschweiler',sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:#fff;color:var(--ink);
  font-family:'Barlow',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
button{font-family:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{margin:0}
p{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display-xl,.display-lg,.display-lg2,.display-lg3,.display-lg4,.display-lg5,.display-lg6,
.display-md,.display-sm,.display-sm2,.display-sm3,.display-sm4,.display-hero,.beat-h,h1{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;line-height:1}
.display-xl{font-size:56px}
.display-lg{font-size:52px;line-height:1.05}
.display-lg2{font-size:44px;margin:16px 0 6px}
.display-lg3{font-size:34px}
.display-lg4{font-size:40px}
.display-lg5{font-size:38px}
.display-lg6{font-size:44px}
.display-md{font-size:38px}
.display-sm{font-size:22px;margin-bottom:8px}
.display-sm2{font-size:26px}
.display-sm3{font-size:26px}
.display-sm4{font-size:28px;margin-bottom:18px}
.display-hero{font-size:clamp(32px,4vw,54px)}
h1{font-size:clamp(34px,4vw,58px);line-height:.95}

.eyebrow{font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--muted2)}
.eyebrow.accent{color:var(--accent2);margin-bottom:14px}
.eyebrow.accent2{color:var(--accent2);margin-bottom:10px}
.eyebrow.accent3{color:var(--accent);margin-bottom:14px}
.micro{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--muted2)}
.micro.dim{color:var(--muted3)}
.micro.dim2{letter-spacing:.2em;color:var(--muted2)}
.sub{font-size:13px;color:var(--muted)}
.sub.mt{margin-top:8px;font-size:14px}
.nowrap{white-space:nowrap}
.muted-14{font-size:14px;color:var(--muted3)}
.muted-15{font-size:15px;color:var(--muted3)}
.mt6{margin-top:6px}
.tnum{font-variant-numeric:tabular-nums}
.accent{color:var(--accent)}
.fine{font-size:13px;line-height:1.5;color:var(--muted2)}
.fine.light{color:var(--muted3);margin-top:18px}
.link-accent{margin-top:auto;padding-top:18px;font-size:13px;font-weight:700;color:var(--accent)}

/* ---------- buttons ---------- */
.btn-dark,.btn-light,.btn-ghost,.btn-outline{
  display:inline-block;font-size:14px;font-weight:700;border-radius:6px;cursor:pointer;border:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn-dark{background:var(--ink);color:#fff;padding:9px 18px}
.btn-dark:hover{background:var(--accent);color:#fff}
.btn-light{background:#fff;color:var(--ink);padding:12px 22px}
.btn-light:hover{background:#f0f0f0;color:var(--ink)}
.btn-ghost{padding:13px 24px;border:1px solid rgba(255,255,255,.3);color:#fff;background:transparent}
.btn-ghost:hover{color:#fff;border-color:#fff}
.btn-outline{font-size:13px;font-weight:600;padding:10px 18px;border:1px solid #d8d8d8;background:#fff}
.btn-outline:disabled{opacity:.45;cursor:not-allowed}
.block{display:block;width:100%;text-align:center}

/* ---------- chrome ---------- */
.announce{background:var(--ink);color:#fff;text-align:center;font-size:12px;letter-spacing:.14em;
  font-weight:600;padding:9px 16px}
.hdr{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease}
.hdr.scrolled{box-shadow:0 1px 16px rgba(0,0,0,.09)}
.hdr-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:24px;padding:14px var(--pad)}
.logo{flex:none}
.logo img{height:34px;width:auto;mix-blend-mode:multiply}
.search{flex:1;display:flex;align-items:center;gap:10px;background:var(--wash);
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-width:0}
.search-ico{width:13px;height:13px;border:2px solid var(--muted2);border-radius:50%;flex:none}
.search input{flex:1;min-width:0;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:15px;color:var(--ink);-webkit-appearance:none}
.hdr-right{display:flex;align-items:center;gap:16px;flex:none}
.views{display:flex;gap:2px;background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:3px}
.views button{font-size:13px;font-weight:600;padding:7px 14px;border:none;border-radius:6px;
  cursor:pointer;background:transparent;color:var(--muted)}
.views button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cats{max-width:var(--max);margin:0 auto;display:flex;gap:26px;padding:0 var(--pad) 12px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  overflow-x:auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats a{color:var(--muted);border-bottom:2px solid transparent;padding-bottom:8px;white-space:nowrap}
.cats a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- the 360 stage ---------- */
.stage{position:relative;height:420vh;background:#0b0b0b;color:#fff}
.stage-pin{position:sticky;top:0;height:100vh;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);gap:24px}
.stage::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 42% 46%,rgba(224,38,45,.16),transparent 70%)}
.stage-canvas-wrap{position:relative;height:min(60vh,620px);touch-action:pan-y}
.stage-canvas{width:100%;height:100%;display:block;cursor:grab}
.stage.is-dragging .stage-canvas{cursor:grabbing}
.stage-poster{width:100%;height:100%;object-fit:contain;border-radius:12px}
.spin-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.18em;font-weight:700;color:rgba(255,255,255,.45);
  opacity:0;transition:opacity .4s ease}
.stage.is-loaded .spin-hint{opacity:1}
.stage.is-dragging .spin-hint{opacity:0}

.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#fff}
.loader-ring{width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p,0) * 360deg), rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0)}
.loader-lbl{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.5);font-weight:600}

.beats{position:relative;height:min(60vh,620px)}
.beat{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  opacity:0;transition:opacity .45s ease,transform .45s ease;max-width:460px}
.beat .eyebrow{color:var(--accent2)}
.beat-h{font-size:clamp(30px,3.4vw,46px);margin:10px 0 14px}
.beat-p{font-size:16px;line-height:1.55;color:#c9c9c9}
.beat-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:18px 0 0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden}
.specs>div{background:#0b0b0b;padding:12px 14px}
.specs dt{font-size:10px;letter-spacing:.14em;color:var(--muted3);font-weight:700;margin-bottom:4px}
.specs dd{margin:0;font-size:16px;font-weight:700}
.stage.is-fallback .stage-canvas,.stage.is-fallback .spin-hint{display:none}
.stage-cap{position:absolute;left:0;right:0;top:4px;margin:0;text-align:center;font-size:12px;
  line-height:1.5;color:rgba(255,255,255,.62);opacity:0;transition:opacity .4s ease;pointer-events:none}
.stage.is-loaded .stage-cap{opacity:1}
.stage-cap-k{font-size:10px;letter-spacing:.18em;font-weight:700;color:rgba(255,255,255,.45);margin-right:4px}
.stage-credit{display:block;font-size:11px;color:rgba(255,255,255,.45);pointer-events:auto}
.stage-credit a{color:inherit;text-decoration:underline}

/* ---------- hero ---------- */
.hero{max-width:var(--max);margin:0 auto;padding:24px var(--pad);
  display:grid;grid-template-columns:1.55fr 1fr;gap:16px}
.hero-main,.hero-bid{position:relative;border-radius:12px;overflow:hidden;min-height:320px;background:var(--ink)}
.hero-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-img.dim{opacity:.55}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.15) 70%)}
.hero-copy{position:relative;padding:44px;color:#fff;max-width:520px}
.hero-copy p{margin:14px 0 22px;font-size:16px;color:#d6d6d6;line-height:1.5}
.hero-bid{display:block;transition:filter .2s ease}
.hero-bid:hover{filter:brightness(1.08)}
.hero-bid-in{position:relative;padding:36px;color:#fff;height:100%;display:flex;
  flex-direction:column;justify-content:space-between;gap:24px}
.hero-bid-in .display-md{margin-top:16px}
.hero-bid-in .micro{letter-spacing:.18em;color:#c9c9c9;font-weight:400;font-size:12px}
.hero-bid-in .sub{font-size:14px;color:#c9c9c9;margin-top:4px}
.pill-live{display:inline-block;background:var(--accent);font-size:10px;font-weight:700;
  letter-spacing:.16em;padding:5px 10px;border-radius:4px;color:#fff}

/* ---------- browse ---------- */
.browse{max-width:var(--max);margin:0 auto;padding:28px var(--pad) 56px;
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px}
.filters{display:flex;flex-direction:column;gap:26px}
.filter-h{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.size-grid{display:flex;flex-wrap:wrap;gap:6px}
.size-grid button{min-width:46px;font-size:13px;font-weight:600;padding:8px 6px;border-radius:6px;
  cursor:pointer;border:1px solid #d8d8d8;background:#fff;color:var(--ink)}
.size-grid button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cond-list{display:flex;flex-direction:column;gap:8px}
.cond-list button{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;
  padding:6px 0;background:none;border:none;cursor:pointer;text-align:left}
.cond-list button[aria-pressed="true"]{font-weight:700}
.cond-list i{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid #c4c4c4;background:#fff}
.cond-list button[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.sell-card{border:1px solid var(--line);border-radius:10px;padding:18px}
.sell-card p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.5}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.row-head.tight{margin-bottom:16px;gap:12px}
.row-head.bottom{align-items:flex-end;gap:20px;margin-bottom:22px}
.row-head.wrap{flex-wrap:wrap}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card-product{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff;transition:border-color .18s ease,transform .18s ease}
.card-product:hover{border-color:var(--ink);transform:translateY(-3px)}
.card-product:hover .p-name,.card-product:hover .p-price{color:var(--accent)}
.p-shot{position:relative;aspect-ratio:4/3;background:var(--wash)}
.p-shot img{width:100%;height:100%;object-fit:cover}
.p-tag{position:absolute;top:10px;left:10px;font-size:9px;font-weight:700;letter-spacing:.12em;
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:4px}
.p-tag.live{background:var(--accent)}
.p-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.p-brand{font-size:11px;color:var(--muted2);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.p-name{font-size:15px;font-weight:600;line-height:1.25}
.p-size{font-size:13px;color:var(--muted)}
.p-foot{margin-top:auto;padding-top:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.p-label{font-size:10px;color:var(--muted2);font-weight:600;letter-spacing:.1em}
.p-price{font-size:19px;font-weight:700;line-height:1.1}
.p-cta{font-size:12px;font-weight:700;color:var(--accent)}
.empty{border:1px dashed var(--line);border-radius:12px;padding:48px 24px;text-align:center}
.empty p{margin:6px 0 18px;font-size:14px;color:var(--muted)}

/* ---------- daily bid ---------- */
.bid{background:var(--ink);color:#fff;padding:56px var(--pad)}
.bid-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bid-img{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.bid-img img{width:100%;height:100%;object-fit:cover}
.bid-copy{display:flex;flex-direction:column;gap:22px}
.bid-figs{display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap}
.bid-figs .micro{margin-bottom:6px}
.bid-steps{display:flex;gap:10px;flex-wrap:wrap}
.bid-steps button{flex:1;min-width:100px;font-size:15px;font-weight:700;color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:13px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.bid-steps button:hover{border-color:var(--accent);color:var(--accent2)}
#raffle{padding:15px}

/* ---------- market ---------- */
.market{max-width:var(--max);margin:0 auto;padding:8px var(--pad) 0;
  display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:12px;padding:24px}
.card.pad{padding:22px 24px;background:#fff}
.trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.trend-name{font-size:20px;font-weight:700;margin-top:8px}
.trend-figs{display:flex;align-items:baseline;gap:12px;margin-top:8px;flex-wrap:wrap}
.trend-delta{font-size:15px;font-weight:700}
.trend-tabs{display:flex;gap:6px;flex-wrap:wrap}
.trend-tabs button{font-size:13px;font-weight:600;padding:8px 14px;border-radius:6px;cursor:pointer;
  border:1px solid #d8d8d8;background:#fff;color:var(--ink)}
.trend-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chart-wrap{position:relative;margin-top:18px}
.chart{width:100%;height:190px;display:block}
.chart .grid{stroke:var(--line2);stroke-width:1;fill:none}
.chart .spark{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart polygon{fill:rgba(224,38,45,.10)}
.chart-dots{position:absolute;inset:0}
.chart-dots button{position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);
  border:none;background:transparent;cursor:pointer;padding:0;border-radius:50%}
.chart-dots button::after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--accent);
  opacity:0;transition:opacity .15s ease}
.chart-dots button:hover::after,.chart-dots button:focus-visible::after{opacity:1}
.chart-tip{position:absolute;transform:translate(-50%,-140%);background:var(--ink);color:#fff;
  font-size:12px;font-weight:600;padding:6px 9px;border-radius:6px;pointer-events:none;white-space:nowrap}
.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);
  font-weight:600;letter-spacing:.08em;margin-top:8px}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:18px}
.stat-strip>div{background:#fff;padding:14px 16px}
.stat-strip .k{font-size:10px;letter-spacing:.14em;color:var(--muted2);font-weight:700;margin-bottom:5px}
.stat-strip .v{font-size:17px;font-weight:700}
.cal-card{display:flex;flex-direction:column}
.cal-list{display:flex;flex-direction:column}
.cal-row{display:flex;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line2)}
.cal-chip{flex:none;width:46px;text-align:center;border-radius:8px;padding:6px 0;background:var(--wash);color:var(--ink)}
.cal-row.today .cal-chip{background:var(--accent);color:#fff}
.cal-chip .m{font-size:9px;letter-spacing:.12em;font-weight:700}
.cal-chip .d{font-family:'Anton',Impact,sans-serif;font-size:20px;line-height:1.05}
.cal-main{flex:1;min-width:0}
.cal-name{font-size:14px;font-weight:600;line-height:1.25}
.cal-meta{font-size:12px;color:var(--muted2);margin-top:2px}
.tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.1em;padding:5px 9px;border-radius:999px}
.tag.BID{background:var(--accent);color:#fff}
.tag.RAFFLE,.tag.GIVEAWAY{background:var(--ink);color:#fff}
.tag.DROP{background:#efefef;color:var(--ink)}

/* ---------- pipeline summary ---------- */
.pipe-summary{max-width:var(--max);margin:0 auto;padding:56px var(--pad) 8px}
.pipe-summary .row-head{margin-bottom:6px}
.stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.stage-card{border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;
  flex-direction:column;gap:12px;background:#fff}
.stage-card.live{background:#fffafa;border-color:#f3d5d6}
.stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage-step{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--muted2)}
.stage-card.live .stage-step{color:var(--accent)}
.stage-pill{font-size:11px;font-weight:700;letter-spacing:.08em;background:var(--wash);color:var(--muted);
  padding:4px 9px;border-radius:999px}
.stage-card.live .stage-pill{background:var(--accent);color:#fff}
.stage-name{font-size:18px;font-weight:700;line-height:1.2}
.stage-card p{font-size:13px;color:var(--muted);line-height:1.5}
.stage-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:auto}
.stage-bar>div{height:100%;background:var(--muted2)}
.stage-card.live .stage-bar>div{background:var(--accent)}
.stage-sla{font-size:11px;color:var(--muted2);font-weight:600;letter-spacing:.06em}

/* ---------- sell ---------- */
.sell{max-width:var(--max);margin:0 auto;padding:40px var(--pad) 56px}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tri-cell{background:#fff;padding:36px 30px}
.tri-cell p{color:var(--muted);font-size:15px;line-height:1.55}
.tri-cell .display-md{margin-bottom:12px}

/* ---------- film ---------- */
.film{background:var(--ink);color:#fff;padding:56px var(--pad)}
.film-in{max-width:var(--max);margin:0 auto}
.film-in .sub{color:var(--muted3)}
.film-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:20px}
.player{position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer;
  border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000}
.player img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .25s ease}
.player:hover img{opacity:.7}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play::before{content:'';width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.94);
  position:absolute;transition:transform .25s ease}
.player:hover .play::before{transform:scale(1.06)}
.tri-play{position:relative;width:0;height:0;border-left:22px solid var(--ink);
  border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.now{position:absolute;left:22px;bottom:20px;text-align:left}
.now .micro{display:block;font-size:11px;letter-spacing:.16em;color:#d6d6d6}
.now .display-sm3{display:block;color:#fff;margin-top:4px}
.scrub{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.scrub>span{display:block;height:100%;background:var(--accent);transition:width .3s ease}
.film-blurb{margin-top:16px;color:var(--muted3);font-size:15px;line-height:1.55;max-width:700px}
.chapters{display:flex;flex-direction:column;gap:8px}
.chapters button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;
  border-radius:10px;cursor:pointer;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;
  transition:border-color .18s ease,background .18s ease}
.chapters button:hover{border-color:rgba(255,255,255,.4)}
.chapters button[aria-pressed="true"]{border-color:var(--accent);background:rgba(224,38,45,.12)}
.ch-num{font-family:'Anton',Impact,sans-serif;font-size:20px;color:var(--muted3);min-width:24px}
.chapters button[aria-pressed="true"] .ch-num{color:var(--accent2)}
.ch-mid{flex:1}
.ch-title{display:block;font-size:15px;font-weight:600}
.ch-blurb{display:block;font-size:12px;color:var(--muted3);margin-top:2px}
.ch-len{font-size:12px;color:var(--muted3);font-variant-numeric:tabular-nums}

/* ---------- visit + footer ---------- */
.visit{background:var(--wash2);border-top:1px solid var(--line);padding:56px var(--pad)}
.visit-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.v-16{font-size:16px;line-height:1.5;margin-top:10px;display:inline-block}
.visit .micro{display:block}
.foot{border-top:1px solid var(--line);padding:26px var(--pad);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted2);max-width:var(--max);margin:0 auto}
.foot a{color:var(--muted2)}
.foot div{display:flex;gap:22px}

/* ---------- watch view ---------- */
.watch{background:#0a0a0a;color:#fff;padding:40px var(--pad) 64px}
.watch-in{max-width:1120px;margin:0 auto}
.watch-player{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#141414}
.watch-player>img{width:100%;height:100%;object-fit:cover;opacity:.72}
.watch-play{position:absolute;inset:0;width:100%;border:none;background:transparent;cursor:pointer}
.play.big::before{width:84px;height:84px}
.play.big .tri-play{border-left-width:26px;border-top-width:16px;border-bottom-width:16px;border-left-color:#0a0a0a}
.watch-bar{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.watch-scrub{height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;margin-bottom:12px}
.watch-scrub>div{width:0;height:100%;background:var(--accent)}
.watch-times{display:flex;justify-content:space-between;font-size:13px;color:#d6d6d6}
.notice{margin-top:14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 18px;
  font-size:14px;color:#c9c9c9}
.watch-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;margin-top:40px}
.watch-blurb{margin-top:18px;color:#c9c9c9;font-size:17px;line-height:1.6}
.watch-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.watch-cta .btn-light{padding:13px 24px}
.ch-list{display:flex;flex-direction:column;margin-top:16px}
.ch-row{display:flex;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.12)}
.ch-time{font-variant-numeric:tabular-nums;color:var(--muted2);font-size:14px;flex:none;width:44px}
.ch-row span:last-child{font-size:15px;font-weight:500}
.recaps{margin-top:56px}
.recap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.recap{border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden}
.recap-shot{aspect-ratio:16/9;background:#141414;position:relative}
.recap-shot img{width:100%;height:100%;object-fit:cover;opacity:.8}
.recap-len{position:absolute;bottom:8px;right:8px;font-size:11px;font-weight:700;
  background:rgba(0,0,0,.75);padding:3px 7px;border-radius:4px}
.recap-body{padding:14px}
.recap-title{font-size:15px;font-weight:600}
.recap-date{font-size:13px;color:var(--muted2);margin-top:3px}

/* ---------- pipeline board ---------- */
.board{background:var(--wash2);padding:28px var(--pad) 64px;min-height:70vh}
.board-in{max-width:var(--max);margin:0 auto}
.board-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.board-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.board-stat .v{font-family:'Anton',Impact,sans-serif;font-size:34px;line-height:1.15;margin-top:6px}
.board-stat .n{font-size:12px;color:var(--muted)}
.board-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.col{background:#efefef;border:1px solid #e2e2e2;border-radius:10px;padding:10px;min-height:220px}
.col-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px}
.col-name{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.col.live .col-name{color:var(--accent)}
.col-count{font-size:11px;font-weight:700;color:var(--muted2)}
.col-items{display:flex;flex-direction:column;gap:8px}
.chip{text-align:left;width:100%;background:#fff;border:1px solid #e0e0e0;border-left:3px solid var(--muted2);
  border-radius:8px;padding:12px;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.chip:hover{border-color:var(--ink);transform:translateY(-3px)}
.chip-name{font-size:14px;font-weight:600;line-height:1.25}
.chip-meta{font-size:12px;color:var(--muted2);margin-top:3px}
.chip-val{font-size:14px;font-weight:700;margin-top:8px}
.board-foot{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:22px}
.sched{display:flex;flex-direction:column;margin-top:14px}
.sched-row{display:flex;align-items:center;gap:16px;padding:11px 0;border-top:1px solid #efefef}
.sched-day{font-size:13px;font-weight:700;width:80px;flex:none}
.sched-item{font-size:14px;flex:1}
.sched-kind{font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 9px;border-radius:4px}
.close-card{background:var(--ink);color:#fff;border-radius:10px;padding:22px 24px;display:flex;
  flex-direction:column;justify-content:space-between}

/* ---------- scroll reveal ---------- */
[data-reveal]>*{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(6px);
  transition:opacity 760ms cubic-bezier(.22,.61,.36,1),transform 760ms cubic-bezier(.22,.61,.36,1),
             filter 760ms cubic-bezier(.22,.61,.36,1)}
[data-reveal].shown>*{opacity:1;transform:none;filter:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .stage{height:360vh}
  .stage-pin{grid-template-columns:1fr;align-content:center;gap:20px}
  .stage-canvas-wrap{height:min(52vh,460px)}
  .beats{height:auto;min-height:230px}
  .beat{position:absolute;top:0;transform:none;max-width:none;text-align:center;left:0;right:0}
  .beat-cta{justify-content:center}
  .specs{max-width:420px;margin-inline:auto}
  .hero,.bid-in,.market,.watch-grid,.board-foot,.film-grid{grid-template-columns:1fr}
  .hero-copy{padding:32px}
  .browse{grid-template-columns:1fr;gap:24px}
  .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
  .visit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .stage-grid,.board-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tri,.recap-grid{grid-template-columns:1fr}
  .watch-grid{gap:32px}
  /* the board metaphor survives: columns scroll sideways instead of stacking */
  .board-cols{display:flex;overflow-x:auto;gap:12px;padding-bottom:10px;scroll-snap-type:x mandatory}
  .col{flex:0 0 70vw;max-width:280px;scroll-snap-align:start}
  .display-xl{font-size:44px}
  .display-lg,.display-lg6{font-size:40px}
  .display-lg2,.display-lg4,.display-lg5{font-size:34px}
}
@media (max-width:760px){
  :root{--pad:16px}
  .announce{font-size:10px;letter-spacing:.1em;padding:8px 12px}
  /* keep logo, tabs and the CTA on one row so the header stays out of the way */
  .hdr-in{flex-wrap:wrap;gap:10px;padding:10px var(--pad)}
  .search{order:3;flex-basis:100%;padding:9px 12px}
  .search input{font-size:14px}
  .logo img{height:26px}
  .hdr-right{margin-left:auto;gap:8px}
  .views{padding:2px}
  .views button{font-size:12px;padding:6px 9px}
  .btn-dark{font-size:12px;padding:8px 12px}
  .cats{gap:18px;font-size:12px}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage-grid,.board-stats,.visit-grid{grid-template-columns:1fr}
  .bid-figs{gap:24px}
  .display-xl{font-size:36px}
  .display-lg,.display-lg6{font-size:34px}
  .hero-copy{padding:24px}
  .foot{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]>*{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .stage{height:100vh}
  .stage-pin{position:relative}
  .beat{position:relative;top:auto;transform:none;opacity:1}
  .beats{height:auto}
  .beat:not(:first-child){display:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- product cards are buttons now (they open the sheet) ---------- */
.card-product{font-family:inherit;text-align:left;padding:0;cursor:pointer;color:inherit}

/* ---------- product sheet ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.sheet-panel{position:relative;background:#fff;width:min(1080px,100%);max-height:92vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:28px;box-shadow:0 -8px 60px rgba(0,0,0,.3)}
.sheet-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.sheet-x:hover{border-color:var(--ink);color:var(--ink)}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.sheet-media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--wash)}
.sheet-thumbs{display:flex;gap:8px;margin-top:10px}
.sheet-thumbs button{width:68px;height:68px;padding:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#fff;cursor:pointer}
.sheet-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.sheet-thumbs img{width:100%;height:100%;object-fit:cover}
.sheet-body .p-brand{margin-bottom:6px}
.sheet-colorway{font-size:15px;color:var(--muted);margin-top:6px}
.sheet-price-row{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.sheet-price{font-family:'Anton',Impact,sans-serif;font-size:34px;line-height:1}
.sheet-cond{font-size:10px;font-weight:700;letter-spacing:.12em;background:var(--ink);color:#fff;
  padding:5px 9px;border-radius:4px}
.sheet-blurb{margin:16px 0 20px;font-size:15px;line-height:1.55;color:var(--muted)}
.sheet-body .filter-h{margin-bottom:10px}
.sheet-cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sheet-cta>*{flex:1;min-width:150px}
.sheet-cta .btn-dark,.sheet-cta .btn-outline{padding:13px 18px;text-align:center}
.facts{width:100%;border-collapse:collapse;margin-top:22px;font-size:13px}
.facts td{padding:11px 0;border-top:1px solid var(--line2);vertical-align:top;line-height:1.5}
.facts td:first-child{width:34%;color:var(--muted2);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:10px;padding-right:16px}
@media (max-width:1100px){
  .sheet-grid{grid-template-columns:1fr;gap:20px}
  .sheet-panel{padding:22px 18px}
}

/* ---------- documentary hero ---------- */
.doc{background:#0a0a0a;color:#fff;padding:56px var(--pad);border-bottom:1px solid #1c1c1c}
.doc-in{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:center}
.doc-h{font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,50px);line-height:1;margin:0}
.doc-p{margin:16px 0 0;color:#c9c9c9;font-size:16px;line-height:1.6;max-width:52ch}
.doc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.doc-media{position:relative;border-radius:14px;overflow:hidden;background:#141414;aspect-ratio:16/9}
.doc-media video{width:100%;height:100%;display:block;background:#000}
.doc-poster{position:relative;display:block;width:100%;height:100%;padding:0;border:none;
  cursor:pointer;background:#000}
.doc-poster img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .25s ease}
.doc-poster:hover img{opacity:.74}
.doc-badge{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.14em;
  font-weight:700;color:#d6d6d6;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:4px}

/* ---------- live bidding ---------- */
.bid-form{display:flex;flex-direction:column;gap:12px}
.bid-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.bid-fields input,.raffle-form input{padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);color:#fff;font-size:15px;min-width:0;-webkit-appearance:none}
.bid-fields input::placeholder,.raffle-form input::placeholder{color:#8a8a8a}
.bid-fields input:focus,.raffle-form input:focus{outline:2px solid var(--accent2);outline-offset:1px}
.bid-msg{margin:0;font-size:13px;line-height:1.45;min-height:1px}
.bid-msg.err{color:var(--accent2)}
.bid-msg.ok{color:#5fd39a}
.raffle-box{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px 18px}
.raffle-count{font-family:'Anton',Impact,sans-serif;font-size:26px;line-height:1.1;margin:6px 0 12px}
.raffle-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.raffle-form .btn-dark{background:#fff;color:#111;white-space:nowrap}
.raffle-form .btn-dark:hover{background:#f0f0f0;color:#111}
.bid-closed{opacity:.55;pointer-events:none}
@media (max-width:1100px){
  .doc-in{grid-template-columns:1fr;gap:24px}
  .doc-media{order:-1}
  .bid-fields{grid-template-columns:1fr}
  .raffle-form{grid-template-columns:1fr}
}

/* ---------- buy / make an offer ---------- */
.sheet-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.offer{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--wash)}
.offer-head{display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--muted2);text-transform:uppercase}
.offer-x{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted2);padding:0 2px}
.offer-amount-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.offer-dollar{font-family:'Anton',Impact,sans-serif;font-size:26px;color:var(--muted)}
.offer-amount-row input{width:130px;padding:10px 12px;border:1px solid #d8d8d8;border-radius:8px;
  font-family:'Anton',Impact,sans-serif;font-size:24px;background:#fff;color:var(--ink);-webkit-appearance:none}
.offer-amount-row input:focus{outline:2px solid var(--accent);outline-offset:1px}
.offer-listed{font-size:13px;color:var(--muted)}
.offer-note{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.offer-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.ch{padding:12px 8px;border:1px solid #d8d8d8;border-radius:8px;background:#fff;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink);transition:border-color .15s ease,transform .15s ease}
.ch:hover{border-color:var(--ink);transform:translateY(-1px)}
.ch-ig{background:#111;color:#fff;border-color:#111}
.ch-ig:hover{background:var(--accent);border-color:var(--accent)}
.offer-msg{margin:10px 0 0;font-size:13px;line-height:1.5;min-height:1px}
.offer-msg.ok{color:#0a6b3d}
.offer-msg.err{color:var(--accent)}
.offer-call{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted);text-decoration:underline}
@media (max-width:560px){
  .sheet-cta{grid-template-columns:1fr}
  .offer-channels{grid-template-columns:1fr}
}

.offer-copy{margin-top:10px}
.offer-copy textarea{width:100%;padding:10px 12px;border:1px solid #d8d8d8;border-radius:8px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:13px;line-height:1.5;resize:vertical}

/* ---------- footer NAP ---------- */
.foot{flex-wrap:wrap;gap:14px 32px;align-items:flex-start}
.foot-nap{font-size:13px;line-height:1.7;color:var(--muted)}
.foot-nap strong{color:var(--ink);font-weight:700}
.foot-nap a{color:var(--muted);text-decoration:none;border-bottom:1px solid #e0e0e0}
.foot-nap a:hover{color:var(--accent);border-color:var(--accent)}
.foot-links{display:flex;gap:22px}
.foot-copy{width:100%;font-size:12px;color:var(--muted2)}

/* ---------- per-pair price trend, inside the sheet ---------- */
.sheet-trend{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.sheet-trend .trend-figs{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.sheet-trend .chart{width:100%;height:150px;display:block}
.sheet-trend .axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);
  font-weight:600;letter-spacing:.08em;margin-top:8px}
.sheet-trend .stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:16px}
.sheet-trend .stat-strip div{background:#fff;padding:12px 14px}
.sheet-trend .stat-strip .k{font-size:10px;letter-spacing:.14em;color:var(--muted2);font-weight:700;margin-bottom:4px}
.sheet-trend .stat-strip .v{font-size:16px;font-weight:700}
.st-note{margin:12px 0 0;font-size:12px;color:var(--muted2);line-height:1.5}
.market.one-up{grid-template-columns:minmax(0,1fr)}
.trend-delta.up{color:var(--green)}
.trend-delta.down{color:var(--accent)}
.size-grid button.size-sold{opacity:.4;text-decoration:line-through;cursor:not-allowed;border-style:dashed}
.foot-disclaimer{width:100%;margin:14px 0 0;font-size:11px;line-height:1.6;color:var(--muted2);max-width:82ch}

/* ══════════ STOCK PLATE — the no-photograph state of the 4/3 product shot ══════════
   Built only from what the shop may lawfully use: the brand and model names as text,
   and colour words found in them. No logos, no depiction of the shoe. */
.p-shot--plate{container-type:inline-size;overflow:hidden;background:var(--wash)}
.p-shot--plate .plate{position:absolute;left:0;right:0;top:0;bottom:22px;
  display:flex;flex-direction:column;padding:28px 11px 0;
  font-family:'Barlow',system-ui,sans-serif;color:var(--ink);
  background:repeating-linear-gradient(to bottom,transparent 0 13px,rgba(17,17,17,.045) 13px 14px)}
.p-shot--plate .plate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink)}
.p-shot--plate .pl-fam{flex:none;font-size:9px;font-weight:700;letter-spacing:.16em;line-height:1.1;
  color:var(--muted2);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-shot--plate .pl-dist{flex:1;min-height:0;display:flex;align-items:flex-end;padding-bottom:2px;
  font-family:'Anton',Impact,sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:.005em;color:var(--ink);overflow:hidden}
.p-shot--plate .pl-dist span{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;overflow:hidden;word-break:break-word}
.p-shot--plate .pl-xl span{font-size:36px;font-size:clamp(26px,20cqw,46px);-webkit-line-clamp:2}
.p-shot--plate .pl-l  span{font-size:29px;font-size:clamp(22px,15.5cqw,36px);-webkit-line-clamp:3}
.p-shot--plate .pl-m  span{font-size:24px;font-size:clamp(19px,12.5cqw,30px)}
.p-shot--plate .pl-s  span{font-size:20px;font-size:clamp(16px,10.5cqw,26px)}
.p-shot--plate .pl-xs span{font-size:17px;font-size:clamp(14px,9cqw,22px);-webkit-line-clamp:5}
/* Separate chips, never a contiguous bar: a bar would imply a proportion of the upper. */
.p-shot--plate .pl-rule{flex:none;display:flex;align-items:center;gap:7px;margin-top:7px;
  padding:6px 0 7px;border-top:1px solid #dcdcdc;transition:border-color .18s ease}
.card-product:hover .p-shot--plate .pl-rule{border-color:var(--ink)}
.p-shot--plate .pl-chips{display:flex;gap:3px;flex:none}
.p-shot--plate .pl-chips i{width:9px;height:9px;border-radius:2px;background:var(--c,#fff);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.30)}
.p-shot--plate .pl-chips.is-none i{width:22px;background-image:repeating-linear-gradient(45deg,#c9c9c9 0 2px,transparent 2px 5px);
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.22)}
.p-shot--plate .pl-words{font-size:9px;font-weight:600;letter-spacing:.10em;color:var(--muted2);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Not scoped to the plate: it appears on photographed cards too, which is what makes
   "No photo yet" read as one value of a field rather than a failure. */
.p-shot .pl-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;height:22px;display:flex;
  align-items:center;justify-content:space-between;gap:6px;padding:0 10px;background:#fff;
  border-top:1px solid var(--line);font-family:'Barlow',system-ui,sans-serif;font-size:8px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.p-shot .pl-state{color:var(--muted2);overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-shot .pl-ask{color:var(--accent);flex:none}
.card-product:hover .p-shot .pl-ask{text-decoration:underline;text-underline-offset:2px}
.p-shot .pl-foot--shot{background:rgba(255,255,255,.92);border-top:0;justify-content:flex-start}
@container (max-width:196px){
  .p-shot--plate .plate{padding:26px 9px 0}
  .p-shot--plate .pl-fam{font-size:8px;letter-spacing:.12em}
  .p-shot--plate .pl-words{font-size:8px;letter-spacing:.06em}
  .p-shot .pl-foot{font-size:7px;letter-spacing:.06em;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){.p-shot--plate .pl-rule,.p-shot .pl-ask{transition:none}}
/* A 63-character name otherwise makes the grid rows ragged. */
.card-product .p-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card-product .p-size:empty{display:none}


/* =================== BROWSE / FILTER — added for the 456-model catalogue ===
   Phone-first: every rule here is the 375px rule and the media queries only
   widen it. Class names carry a b- prefix where the older storefront already
   owns the plain one. */
/* These blocks set display in their own rules, which beats the browser default
   sheet's [hidden]{display:none} — so hidden has to be said again, louder. */
.browse [hidden],#size-sheet[hidden],#filter-sheet[hidden],
#size-sheet [hidden],#filter-sheet [hidden]{display:none!important}

/* The old browse was a two-column grid: a 210px filter sidebar beside the wall.
   Facets live in a sheet now, so it goes back to being a plain block and each
   child owns its own gutter. */
.browse{display:block;max-width:none;margin:0;padding:0 0 64px;
  font-family:var(--body);color:var(--ink);background:var(--paper)}

/* ----------------------------------------------------------- sticky bar --- */
.bstick{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line)}
.brow-find{display:flex;gap:8px;align-items:center;height:48px;padding:0 var(--gut)}

.search{position:relative}
.qclear{flex:none;width:26px;height:26px;margin:-6px -8px -6px 0;border:0;background:none;
  font-size:19px;line-height:1;color:var(--muted);cursor:pointer}
.fbtn{flex:0 0 auto;height:38px;padding:0 14px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);font:700 12px/1 var(--body);
  letter-spacing:.09em;cursor:pointer;display:flex;align-items:center;gap:6px}
.fbtn:active{background:var(--ink);color:#fff}
.fbadge{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;font:700 11px/1 var(--body)}

/* The size lens. Loud until answered. */
.mysize{display:flex;align-items:center;gap:10px;width:100%;height:46px;
  padding:0 var(--pad);border:0;border-top:1px solid var(--line);
  background:var(--accent);color:#fff;cursor:pointer;text-align:left;
  font-family:var(--body)}
.mysize[data-set="true"]{background:var(--ink)}
.ms-key{font:700 10px/1 var(--body);letter-spacing:.16em;opacity:.72;flex:0 0 auto}
.ms-val{font-family:var(--disp);font-size:19px;line-height:1;letter-spacing:.01em;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-count{font:600 12px/1 var(--body);opacity:.8;flex:0 0 auto}
.ms-caret{flex:0 0 auto;width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.9}

/* --------------------------------------------------------- results head --- */
.rhead{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 0}
.rh-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rh-title{font-family:var(--disp);font-size:25px;line-height:.94;margin:0;
  letter-spacing:.01em;text-transform:uppercase}
.rh-count{margin:0;font:500 13px/1.2 var(--body);color:var(--mut);
  white-space:nowrap;flex:0 0 auto}
.rh-count strong{color:var(--ink);font-weight:700;font-size:15px}
.rh-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px}
.sortsel{height:32px;border:1px solid var(--line);background:var(--wash);
  font:600 12px/1 var(--body);letter-spacing:.04em;color:var(--ink);padding:0 26px 0 10px;
  -webkit-appearance:none;appearance:none;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 13px) 14px,calc(100% - 8px) 14px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.clear-all{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;
  font:700 12px/1 var(--body);letter-spacing:.09em;text-decoration:underline;
  text-underline-offset:3px}

/* chips */
.bchips{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:12px var(--pad) 0}
.bchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 10px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  font:600 12px/1 var(--body)}
.bchip b{font-weight:700;letter-spacing:.05em;font-size:10px;opacity:.6;text-transform:uppercase}
.bchip i{font-style:normal;font-size:15px;line-height:1;opacity:.75}

/* the one tap back to browsing */
.lens{max-width:var(--max);display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;
  margin:12px auto 0;padding:9px 11px;background:var(--wash);
  border-left:3px solid var(--accent);font:500 13px/1.35 var(--body);color:var(--mut)}
.lens button{border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
  font:700 13px/1.35 var(--body);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- grid --- */
.bgrid{max-width:var(--max);margin:0 auto;display:grid;gap:10px;padding:14px var(--pad) 0;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
@media (min-width:600px){.bgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}}

.bcard{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);
  background:var(--paper);padding:0;cursor:pointer;font-family:var(--body);
  color:var(--ink);text-decoration:none;
  /* Off-screen cards cost nothing to lay out or paint; the reserved height keeps
     the scrollbar honest and the back-button scroll position restorable. */
  content-visibility:auto;contain-intrinsic-size:0 272px}
.bcard:active{border-color:var(--ink)}

.shot{position:relative;aspect-ratio:1/1;background:var(--wash);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.ctag{position:absolute;top:0;left:0;z-index:2;padding:4px 6px;background:var(--ink);
  color:#fff;font:700 9px/1 var(--body);letter-spacing:.1em}
.ctag.ds{background:var(--accent)}

/* stock plate: type and colour words only, no depiction of the shoe */
.bplate{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:5px;padding:24px 10px 30px;
  background:linear-gradient(170deg,#fafafa,#ececec)}
.bpl-fam{font:700 8px/1.25 var(--body);letter-spacing:.14em;color:var(--mut2)}
.bpl-dist{font-family:var(--disp);font-size:19px;line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bpl-chips{display:flex;gap:3px;margin-top:1px;min-height:11px}
.bpl-chips i{width:11px;height:11px;background:var(--c,#ccc);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.bpl-nophoto{position:absolute;left:0;right:0;bottom:0;padding:4px 10px;
  background:rgba(17,17,17,.88);color:#fff;font:600 9px/1 var(--body);
  letter-spacing:.06em;display:flex;justify-content:space-between}

.bcard-b{padding:9px 10px 10px;display:flex;flex-direction:column;gap:2px;flex:1}
.b-brand{font:700 9px/1 var(--body);letter-spacing:.13em;color:var(--mut2)}
.b-name{font:600 13px/1.25 var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b-foot{margin-top:auto;padding-top:8px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:6px}
.b-size{font:700 11px/1.15 var(--body);letter-spacing:.02em;color:var(--mut)}
.b-size.mine{color:var(--accent)}
.b-size.mine::before{content:"● ";font-size:8px;vertical-align:2px}
.b-size small{display:block;font:500 10px/1.2 var(--body);color:var(--mut2);
  letter-spacing:0;text-transform:none}
.b-price{font-family:var(--disp);font-size:16px;line-height:1;white-space:nowrap}
.b-price.ask{font-family:var(--body);font-weight:700;font-size:11px;
  letter-spacing:.09em;color:var(--mut);padding-bottom:2px}

/* a model that does not come in the chosen size, while browsing with the lens on */
.bcard.other .shot,.bcard.other .bcard-b{opacity:.62}
.bcard.other{border-style:dashed}
.bcard.mine{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* the solitary result gets the full width and says everything at once */
.bgrid.single{grid-template-columns:1fr}
.bgrid.single .bcard{flex-direction:row;align-items:stretch}
.bgrid.single .shot{flex:0 0 42%;aspect-ratio:1/1;align-self:flex-start}
.bgrid.single .bpl-dist{font-size:21px}
.bgrid.single .b-name{font-size:16px;-webkit-line-clamp:3}
.bgrid.single .b-price{font-size:26px}

.near{max-width:var(--max);margin:20px auto 0;padding:14px;border:1px solid var(--line)}
.near-h{margin:0 0 10px;font:600 13px/1.35 var(--body);color:var(--mut)}
.near-row{display:flex;gap:8px;flex-wrap:wrap}
.nearb{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:66px;
  min-height:48px;justify-content:center;border:1px solid var(--ink);background:var(--paper);
  cursor:pointer;font-family:var(--body);padding:6px 8px}
.nearb span{font-family:var(--disp);font-size:17px;line-height:1;color:var(--ink)}
.nearb em{font:600 10px/1 var(--body);font-style:normal;color:var(--mut2)}

/* ---------------------------------------------------------------- more --- */
.more{max-width:var(--max);margin:0 auto;padding:22px var(--pad) 0;text-align:center}
.bbtn-ghost{border:1px solid var(--ink);background:none;color:var(--ink);
  height:42px;padding:0 24px;font:700 12px/1 var(--body);letter-spacing:.11em;cursor:pointer}
.more-n{margin:8px 0 0;font:500 12px/1 var(--body);color:var(--mut2)}

/* ---------------------------------------------------------------- zero --- */
.zero{max-width:var(--max);margin:24px auto 0;padding:22px 18px;background:var(--wash);
  border-top:3px solid var(--accent)}
.zero-h{font-family:var(--disp);font-size:24px;line-height:1;margin:0}
.zero-p{margin:8px 0 0;font:500 14px/1.45 var(--body);color:var(--mut)}
.zero-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.zero-acts button{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);cursor:pointer;text-align:left;
  font:600 14px/1.3 var(--body);display:flex;justify-content:space-between;gap:10px}
.zero-acts button b{font-family:var(--disp);font-weight:400;font-size:16px;
  color:var(--accent);white-space:nowrap}
.zero-dm{display:block;margin-top:16px;padding:14px;background:var(--ink);color:#fff;
  text-decoration:none}
.zero-dm strong{display:block;font-family:var(--disp);font-size:17px;letter-spacing:.01em}
.zero-dm span{display:block;margin-top:3px;font:500 12px/1.4 var(--body);opacity:.7}

/* =============================================================== sheets === */
.bsheet{position:fixed;inset:0;z-index:100}
.bsheet-scrim{position:absolute;inset:0;background:rgba(17,17,17,.42)}
.bsheet-panel{position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--paper);animation:rise .22s cubic-bezier(.2,.7,.3,1)}
@media (min-width:700px){
  .bsheet-panel{inset:auto 0 0 auto;top:0;width:440px;border-left:1px solid var(--line)}
}
@keyframes rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bsheet-panel{animation:none}}

.bsheet-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:54px;padding:0 var(--gut);border-bottom:1px solid var(--line)}
.bsheet-top h2{font-family:var(--disp);font-size:22px;line-height:1;margin:0;
  letter-spacing:.01em}
.bsheet-x{width:40px;height:40px;margin-right:-10px;border:0;background:none;
  font-size:28px;line-height:1;color:var(--ink);cursor:pointer}

.bsheet-note{margin:0;padding:12px var(--gut);background:var(--wash);
  font:500 12px/1.4 var(--body);color:var(--mut)}

.agetabs{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line)}
.agetabs button{height:44px;border:0;border-bottom:3px solid transparent;
  background:none;cursor:pointer;font:700 12px/1 var(--body);letter-spacing:.11em;
  color:var(--mut)}
.agetabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

.sizegrid{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px var(--gut) 20px;
  align-content:start}
.szb{min-height:58px;padding:8px 4px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-family:var(--body)}
.szb .n{font-family:var(--disp);font-size:20px;line-height:.9;color:var(--ink)}
.szb .w{font:600 9px/1 var(--body);color:var(--mut2);letter-spacing:.03em}
.szb .c{font:600 10px/1 var(--body);color:var(--mut)}
.szb[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.szb[aria-pressed="true"] .n,.szb[aria-pressed="true"] .w,.szb[aria-pressed="true"] .c{color:#fff}
.szb[data-zero="true"]{opacity:.38}
.szb[data-zero="true"] .c{color:var(--accent)}

/* --------------------------------------------------------------- facets --- */
.facets{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.facet{border-bottom:1px solid var(--line)}
.facet-h{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;
  padding:0 var(--gut);border:0;background:none;cursor:pointer;font-family:var(--body)}
.facet-h span{font:700 13px/1 var(--body);letter-spacing:.11em}
.facet-h em{flex:1;text-align:right;font:500 12px/1.3 var(--body);color:var(--mut);
  font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet-h i{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);transform:rotate(45deg);margin-top:-4px;
  transition:transform .15s}
.facet-h[aria-expanded="true"] i{transform:rotate(-135deg);margin-top:2px}
.facet-h[aria-expanded="false"]+.facet-b{display:none}
.facet-b{padding:0 var(--gut) 14px}

.opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  border:0;background:none;padding:0;cursor:pointer;font-family:var(--body);
  text-align:left;color:var(--ink)}
.opt .box{flex:0 0 auto;width:19px;height:19px;border:1.5px solid var(--mut2);
  position:relative;background:var(--paper)}
.opt[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink)}
.opt[aria-pressed="true"] .box::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.opt .lab{flex:1;font:500 15px/1.2 var(--body);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .num{flex:0 0 auto;font:600 13px/1 var(--body);color:var(--mut2);
  font-variant-numeric:tabular-nums}
.opt[data-zero="true"]{opacity:.4}
.opt[data-zero="true"] .box{border-style:dashed}
.opts-more{margin-top:6px;border:0;background:none;padding:6px 0;cursor:pointer;
  color:var(--ink);font:700 11px/1 var(--body);letter-spacing:.1em;
  text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------- sheet footer --- */
.bsheet-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper)}
.btn-go{flex:1;min-height:48px;border:0;background:var(--ink);color:#fff;cursor:pointer;
  font-family:var(--disp);font-size:16px;letter-spacing:.03em}
.btn-go[disabled]{background:var(--mut2);cursor:default}
.btn-clear{flex:0 0 auto;min-height:48px;padding:0 14px;border:1px solid var(--line);
  background:none;color:var(--mut);cursor:pointer;font:700 12px/1 var(--body);
  letter-spacing:.09em}
.tgl{flex:0 0 auto;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:4px 0;max-width:47%}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl-box{width:40px;height:23px;border-radius:12px;background:var(--line);
  position:relative;transition:background .15s;flex:0 0 auto}
.tgl-box::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;
  border-radius:50%;background:#fff;transition:transform .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.28)}
.tgl input:checked+.tgl-box{background:var(--accent)}
.tgl input:checked+.tgl-box::after{transform:translateX(17px)}
.tgl input:focus-visible+.tgl-box{outline:2px solid var(--ink);outline-offset:2px}
.tgl-lab{font:600 12px/1.15 var(--body)}

:where(button,input,select,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The browse block lives inside the site's own sticky header, so the phone rules
   put FILTER on the search row and let MY SIZE take the row the category rail had. */
@media (max-width:760px){
  .hdr-in{gap:8px}
  .search{order:3;flex-basis:auto;flex:1 1 60%}
  .fbtn{order:4;height:36px;padding:0 12px;font-size:11px}
  .hdr-right{order:2}
  .mysize{height:44px}
  .lens,.near,.zero,.bchips{margin-left:0;margin-right:0}
}
.browse .sell-card{max-width:var(--max);margin:34px auto 0}

/* The consent row. Deliberately unticked, deliberately plain: an opt-in that reads like a
   trick is not consent, and PA SB 992 lands 19 Oct 2026. */
.bid-consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .9rem 0 1rem;
  font-size: .82rem;
  line-height: 1.45;
  /* Inherit, because this row sits on the dark #bid section AND on the light auction
     page. A fixed grey was 2.5:1 on one of them, and this is the sentence the law says
     the customer has to be able to read. */
  color: inherit;
  cursor: pointer;
}
.bid-consent span { opacity: .82; }
.bid-consent input { margin-top: .18rem; flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: currentColor; }
.bid-form .micro.dim { margin-top: .7rem; }

/* The wall has four states now that there is no stand-in catalogue: loading, loaded, empty,
   and failed. The filter-oriented "NOTHING MATCHES THAT" must never show while loading or
   after a failure, because it reads as a shop with nothing in it. */
.wall-state{display:none;margin:28px 0;font:500 15px/1.5 var(--body);color:var(--mut)}
.wall-state a{color:var(--accent);text-decoration:underline}
#browse.is-loading .wall-loading{display:block}
#browse.load-failed .wall-failed{display:block}
#browse.is-loading #zero,#browse.load-failed #zero{display:none!important}

/* The name plate inside the product sheet. The grid's .bplate is absolutely positioned to
   fill a card, so in the sheet it needs a box of its own and bigger type. */
.sheet-bplate{position:relative;inset:auto;width:100%;aspect-ratio:1;border-radius:12px;
  padding:28px 22px 26px;gap:8px}
.sheet-bplate .bpl-fam{font-size:11px}
.sheet-bplate .bpl-dist{font-size:34px;-webkit-line-clamp:4}
.bpl-note{font:500 12px/1.4 var(--body);color:var(--mut);margin-top:6px}

/* Sell section actions, and the announce bar's jump to the address. */
.sell-acts{max-width:var(--max);margin:22px auto 0;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center}
.announce a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- The wall, by size ------------------------------------------------------------------
   Horizontal bars, one row per size, in size order (sizes are ordinal, so never sorted by
   count). Marks follow the dataviz spec: <=24px thick, 4px rounded at the data end and square
   at the baseline, hairline solid gridlines, labels in text colours never the bar colour.
   Colours validated with the skill's script against the white surface:
     ink #111 (single series)   ·  #8f8f8f de-emphasis, 3:1 on white
     #e0262d the chosen size    ·  red vs grey dE 12.1 deutan, 22.7 normal vision
   The first grey tried, #d4d4d4, failed at 1.48:1 and would have hidden the bars.        */
.sizes-card{position:relative}
.sz-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 18px}
.sz-tabs button{font:600 12px/1 var(--body);padding:8px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink)}
.sz-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sz-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sz-tab-n{opacity:.62;font-variant-numeric:tabular-nums;margin-left:2px}

.sz-plot{position:relative}
/* Gridlines live in one overlay inset to the track column, so they run unbroken through the
   2px gaps between rows. A per-row gradient would have read as dashed. */
.sz-grid{position:absolute;top:0;bottom:0;left:56px;right:44px;pointer-events:none}
.sz-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.sz-chart{position:relative;display:flex;flex-direction:column;gap:2px}
.sz-row{display:grid;grid-template-columns:46px minmax(0,1fr) 34px;column-gap:10px;align-items:center;
  min-height:30px;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sz-lab{font:600 12px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.sz-track{position:relative;height:16px}
.sz-bar{position:absolute;left:0;top:0;bottom:0;min-width:2px;border-radius:0 4px 4px 0;
  background:var(--ink);transition:opacity .15s ease}
.sz-val{font:600 12px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--muted)}
.sz-chart.has-mine .sz-bar{background:#8f8f8f}
.sz-row.is-mine .sz-bar{background:var(--accent)}
.sz-row.is-mine .sz-lab,.sz-row.is-mine .sz-val{color:var(--ink);font-weight:800}
.sz-row:hover .sz-bar,.sz-row:focus-visible .sz-bar{opacity:.7}
.sz-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sz-axis{position:relative;height:16px;margin:8px 44px 0 56px}
.sz-axis span{position:absolute;top:0;transform:translateX(-50%);font:500 10px/1 var(--body);
  color:var(--muted2);font-variant-numeric:tabular-nums}
.sz-axis span:first-child{transform:none}
.sz-tip{position:absolute;z-index:5;pointer-events:none;white-space:nowrap;
  background:var(--ink);color:#fff;padding:6px 9px;border-radius:6px;font:500 12px/1.3 var(--body)}
.sz-tip b{font-weight:700}
.sz-table{margin-top:16px}
.sz-table summary{cursor:pointer;font-size:12px;color:var(--muted)}
.sz-table table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.sz-table th,.sz-table td{padding:6px 0;border-top:1px solid var(--line);text-align:left;
  font-variant-numeric:tabular-nums}
.sz-table th:last-child,.sz-table td:last-child{text-align:right}
@media (prefers-reduced-motion:reduce){.sz-bar{transition:none}}

/* Calendar tiers. How sure a date is gets its own look, so a press report never reads as a
   release. Confirmed is solid ink; anything unconfirmed is outlined; a shopping day uses the
   accent. The label text carries the meaning, so none of this is colour alone. */
.tag.tier-confirmed{background:var(--ink);color:#fff}
.tag.tier-preview,.tag.tier-press,.tag.tier-expected{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tag.tier-conflict{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.tag.tier-day{background:var(--accent);color:#fff}
.cal-row.tier-day .cal-chip{background:var(--accent);color:#fff}
.cal-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cal-more{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font:600 12px/1 var(--body);color:var(--ink);cursor:pointer}
.cal-note{margin:14px 0 10px;font-size:11px;line-height:1.5;color:var(--muted2)}