:root {
  --bg: #ffffff;
  --ink: #0c0c0c;
  --muted: #86867f;
  --line: #e6e6e2;
  --tile: #f1f1ee;
  --gut: clamp(16px, 2.2vw, 28px);
  --head: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 13px/1.45 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.up { text-transform: uppercase; letter-spacing: .08em; }

/* ── header */
.demo-bar { background: var(--ink); color: #fff; text-align: center; font-size: 11px; padding: 7px var(--gut); letter-spacing: .04em; }
.demo-bar a { text-decoration: underline; }
.top {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--head); padding: env(safe-area-inset-top, 0px) var(--gut) 0;
  background: #fff;   /* solid: a blurred see-through header re-renders on every scroll frame and made phones lag */
}
.nav-link { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.nav-link:hover { opacity: .55; }
.bag-btn { justify-self: end; }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: .28em; text-transform: uppercase; padding-left: .28em; }
.wordmark:has(.logo) { padding-left: 0; display: flex; align-items: center; gap: 10px; }
.wordmark .logo { height: 26px; width: auto; }
.admin-tag { font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
@media (min-width: 760px) { .wordmark .logo { height: 30px; } }
.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }

/* ── shop */
.cats {
  position: sticky; top: var(--head); z-index: 10; background: var(--bg);
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  padding: 14px var(--gut); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
}
.cats::-webkit-scrollbar { display: none; }
.cats a { color: var(--muted); white-space: nowrap; transition: color .2s; }
.cats a sup { font-size: 9px; margin-left: 2px; }
.cats a.on, .cats a:hover { color: var(--ink); }

.grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 28px 6px; padding: 4px var(--gut) 80px;
}
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 40px 8px; } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card { display: block; }
.card .ph { position: relative; aspect-ratio: 4 / 5; background: var(--tile); overflow: hidden; }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.card .ph img.alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .ph img.alt { opacity: 1; }
  .card:hover .ph img { transform: scale(1.025); }
}
.card .meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; }
.card .name { font-weight: 500; }
.card .ref, .card .price.muted { color: var(--muted); }
.card .ref { font-size: 11px; margin-top: 2px; letter-spacing: .04em; }
.tag { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--bg); padding: 4px 7px; }

/* reveal on scroll — cards start visible, JS only adds a gentle lift */
.card.rise { animation: rise .7s var(--ease) both; }
@keyframes rise { from { transform: translateY(14px); opacity: .001; } }

.empty { padding: 120px var(--gut); text-align: center; color: var(--muted); }

/* ── product page */
.pdp { display: grid; grid-template-columns: 1fr; padding: 0 0 80px; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--tile); }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; }
.pager { display: flex; justify-content: center; gap: 6px; padding: 12px 0 0; }
.pager i { width: 18px; height: 1px; background: var(--line); transition: background .3s; }
.pager i.on { background: var(--ink); }
.info { padding: 24px var(--gut) 0; display: grid; gap: 22px; align-content: start; max-width: 520px; }
.info .back { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.info .back:hover { color: var(--ink); }
.info h1 { font-size: 20px; font-weight: 500; margin: 0; line-height: 1.2; text-wrap: balance; }
.info .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.info .ref { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.info .price { font-size: 15px; }
.label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; display: flex; justify-content: space-between; }
.label span { color: var(--muted); font-weight: 400; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sizes button { min-width: 52px; height: 40px; padding: 0 12px; border: 1px solid var(--line); font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.sizes button:hover { border-color: var(--ink); }
.sizes button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sizes button.out { color: #b9b9b3; cursor: not-allowed; background: linear-gradient(to top right, transparent calc(50% - .5px), #d6d6d1 50%, transparent calc(50% + .5px)); }
.sizes button.out:hover { border-color: var(--line); }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: opacity .2s; }
.btn:hover { opacity: .82; }
.btn[disabled] { opacity: .3; cursor: not-allowed; }
.btn.added { opacity: .75; }
.btn.ghost { background: var(--bg); color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost.done { border-color: var(--line); color: var(--muted); }
.votes { display: flex; gap: 8px; }
.votes button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s, color .15s; }
.votes button:hover { border-color: var(--ink); }
.votes button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.votes button.pop svg { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35) rotate(-8deg); } }
.desc { color: #3c3c38; max-width: 60ch; white-space: pre-line; }
.note { font-size: 12px; color: var(--muted); }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.more { padding: 0 var(--gut); margin-top: 56px; }
.more h2 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }
.more .grid { padding: 0 0 20px; }

@media (min-width: 900px) {
  .pdp-main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: 0 clamp(24px, 4vw, 64px); padding-right: var(--gut); align-items: start; }
  .gallery { display: grid; gap: 4px; overflow: visible; background: none; }
  .gallery img { background: var(--tile); }
  .pager { display: none; }
  .info { position: sticky; top: calc(var(--head) + 24px); padding: 24px 0 0; align-self: start; }
  .more { padding-inline: var(--gut); margin-top: 80px; }
}

/* ── bag drawer */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 40; opacity: 0; transition: opacity .3s; }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(420px, 100%); background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .42s var(--ease);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.on { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; height: var(--head); padding: 0 var(--gut); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 var(--gut); overscroll-behavior: contain; }
.drawer-foot { padding: 16px var(--gut) 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line img { width: 76px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tile); }
.line .n { font-weight: 500; }
.line .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 10px; }
.qty button { width: 30px; height: 28px; }
.qty span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.line .rm { font-size: 11px; color: var(--muted); text-decoration: underline; margin-top: 10px; display: inline-block; margin-left: 12px; }
.line .p { text-align: right; font-variant-numeric: tabular-nums; }
.tot { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.bag-empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* ── checkout: one column, three numbered steps */
.order { max-width: 560px; margin: 0 auto; padding: 20px var(--gut) 60px; display: grid; gap: 28px; }
.order h1 { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.step { display: grid; gap: 14px; }
.step-h { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.num { width: 26px; height: 26px; display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); border-radius: 50%; font-size: 12px; letter-spacing: 0; }
.tip { margin: 0; color: #3c3c38; line-height: 1.55; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.field label { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.field label span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field input { width: 100%; height: 48px; border: 1px solid var(--line); padding: 0 12px; font: inherit; font-size: 16px; background: var(--bg); color: var(--ink); border-radius: 0; }
.field input:focus { outline: none; border-color: var(--ink); }
.receipt { background: var(--tile); padding: 12px; }
.receipt img { width: auto; max-width: 100%; max-height: calc(100svh - var(--head) - 60px); margin: 0 auto; box-shadow: 0 1px 0 var(--line); -webkit-touch-callout: default; }
.ship { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); cursor: pointer; transition: border-color .15s; }
.opt:has(input:checked) { border-color: var(--ink); }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.opt-body { display: grid; gap: 2px; }
.opt-name { font-weight: 500; }
.opt-note { font-size: 12px; color: var(--muted); }
.opt-price { font-variant-numeric: tabular-nums; }
.row-links { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px solid var(--line); }
.row-links a.linkish { display: inline-flex; align-items: center; }
.linkish { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; text-decoration: underline; color: var(--muted); justify-self: start; min-height: 40px; }
@media (min-width: 900px) { .order { padding-top: 40px; } .receipt { padding: 24px; } .receipt img { max-height: none; } }

/* ── footer (black, left-aligned) */
.foot { background: #0c0c0c; color: #f4f4f1; margin-top: 24px; padding: 40px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 28px; justify-items: start; text-align: left; }
.foot-main { display: grid; gap: 12px; justify-items: start; }
.foot-logo { height: 34px; width: auto; }
.foot-name { font-weight: 600; letter-spacing: .28em; font-size: 16px; }
.foot p { margin: 0; color: #a3a39c; font-size: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #6f6f69; }
.foot-links a { color: #c9c9c3; }
.foot-links a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 760px) { .foot { grid-template-columns: 1fr auto; align-items: end; padding-top: 48px; } }
.btn.light { background: #f4f4f1; color: #0c0c0c; width: auto; padding: 0 26px; }

/* ── phone: floating bag button */
.fab { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 18px; align-items: center; height: 48px; padding: 0 22px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.28); animation: fabin .4s var(--ease); }
.fab #fabTotal { font-variant-numeric: tabular-nums; opacity: .7; }
@keyframes fabin { from { transform: translate(-50%, 20px); opacity: 0; } }
body.pdp-view .fab, body.order-view .fab { display: none; }
@media (min-width: 900px) { .fab { display: none !important; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 75; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 12px 18px; font-size: 12px; transition: opacity .25s, transform .35s var(--ease); white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { text-decoration: underline; margin-left: 10px; color: inherit; }

.page-in { animation: pagein .45s var(--ease) both; }
@keyframes pagein { from { opacity: .001; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── phone tuning */
html { -webkit-tap-highlight-color: transparent; }
a, button, label { touch-action: manipulation; }
@media (max-width: 759px) {
  .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cats { gap: 0; padding-inline: calc(var(--gut) - 10px); }
  .cats a { padding: 8px 10px; }
  .card .meta { display: grid; gap: 2px; }
  .card .price { order: 2; font-size: 13px; }
  .card .ref { order: 3; }
  .card .meta > div:first-child { display: contents; }
  .grid { gap: 22px 4px; padding-inline: 4px; }
  .card .meta { padding-inline: 12px; }
  .sizes button { min-width: 56px; height: 46px; }
  .btn { height: 52px; }
  .info h1 { font-size: 22px; }
  .pdp { padding-bottom: 40px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); white-space: normal; text-align: center; }
}
@media (max-width: 899px) {
  /* keep footer clear of the floating bag button */
  .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ── password gate */
body.locked .top, body.locked .foot, body.locked .fab, body.locked .cats { display: none !important; }
.gate { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 40px var(--gut); text-align: center; }
.gate-logo { height: 54px; width: auto; margin-bottom: 8px; }
.gate-sub { margin: 0; color: #3c3c38; }
.gate-form { display: flex; gap: 8px; width: min(340px, 100%); }
.gate-form input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line); padding: 0 14px; font: inherit; font-size: 16px; background: var(--bg); color: var(--ink); border-radius: 0; }
.gate-form input:focus { outline: none; border-color: var(--ink); }
.gate-form .btn { width: auto; padding: 0 22px; height: 48px; }
.gate-err { margin: 0; min-height: 1.2em; color: #b3261e; font-size: 12px; }
.gate .note a { text-decoration: underline; color: var(--ink); }

/* ── coupon + totals at checkout */
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line); padding: 0 12px; font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg); color: var(--ink); border-radius: 0; }
.coupon-row input::placeholder { text-transform: none; letter-spacing: 0; }
.coupon-row input:focus { outline: none; border-color: var(--ink); }
.coupon-row .btn { width: auto; padding: 0 20px; height: 48px; }
.cp-msg { margin-top: 8px; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cp-msg:empty { display: none; }
.cp-msg .linkish { min-height: 0; }
.good { color: #1f6b3a; }
.warn { color: #a15c00; }
.sum { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sum div { display: flex; justify-content: space-between; color: #3c3c38; }
.sum .total { color: var(--ink); font-weight: 600; font-size: 15px; padding-top: 4px; }

/* ── free-shipping bar (bag) */
.fsb { display: grid; gap: 8px; }
.fsb-t { font-size: 12px; color: #3c3c38; }
.fsb-bar { height: 4px; background: var(--line); overflow: hidden; }
.fsb-bar i { display: block; height: 100%; background: var(--ink); transition: width .5s var(--ease); }
.fsb.done .fsb-t b { color: #1f6b3a; }
.fs-hint { margin: -4px 0 0; font-size: 12px; color: #3c3c38; }

/* ── order code at checkout */
.code-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--tile); }
.code-box > div { display: grid; gap: 2px; }
.code-box b { font-size: 18px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.code-box .linkish { min-height: 0; color: var(--ink); }
.foot-link { color: #8b8b85 !important; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; text-decoration: underline; }

/* ── track page */
.track { max-width: 560px; margin: 0 auto; padding: 24px var(--gut) 60px; display: grid; gap: 20px; }
.track h1 { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.track .coupon-row .btn { width: auto; }
.my-orders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-orders .note { width: 100%; }
.my-orders a { font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.my-orders a.on { border-color: var(--ink); }
.tr-miss { padding: 16px; background: var(--tile); line-height: 1.55; }
.tr-miss a, .tl-s a { text-decoration: underline; }
.tr-card { display: grid; gap: 24px; border: 1px solid var(--line); padding: 20px; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tr-code { font-size: 22px; font-weight: 600; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.st { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 5px 9px; border: 1px solid var(--line); white-space: nowrap; }
.st-unpaid { color: #a15c00; border-color: #e2b56b; }
.st-paid, .st-shipped { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.st-delivered { color: #1f6b3a; border-color: #9cc9ab; }
.st-cancelled { color: #b3261e; border-color: #e7a19b; }
.tl { list-style: none; margin: 0; padding: 0; display: grid; }
.tl li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 20px; color: var(--muted); }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl li.done::before { background: var(--ink); }
.tl .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); margin-top: 2px; position: relative; z-index: 1; }
.tl li.done { color: var(--ink); }
.tl li.done .dot { background: var(--ink); border-color: var(--ink); }
.tl li.cur .dot { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(12,12,12,.08); }
.tl li.cur { color: var(--ink); }
.tl-t { font-weight: 500; }
.tl-s { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.trk { margin-top: 6px; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.trk .linkish { min-height: 0; color: var(--ink); }
.tr-note { padding: 14px 16px; background: var(--tile); }
.tr-note p { margin: 4px 0 0; white-space: pre-line; }
.tr-sub { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.qc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.qc-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tile); }
.tr-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tr-item img, .tr-item .ph0 { width: 48px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--tile); display: block; }
.track .sum { border-top: 0; padding-top: 12px; }
.gate .linkish { justify-self: center; }

/* ── optional animations (config.js → flair) */
.fly { position: fixed; z-index: 70; object-fit: cover; pointer-events: none; background: var(--tile); box-shadow: 0 10px 30px rgba(0,0,0,.18); will-change: transform; }

.logo-stack { position: relative; display: block; height: 26px; aspect-ratio: 756 / 273; }
.logo-stack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-star { transform-origin: 48.6% 83.1%; will-change: transform; }
.ls-arcs { transform-origin: 47.5% 47%; }
@media (hover: hover) { .wordmark:hover .ls-arcs { animation: ls-spin 1s cubic-bezier(.45,0,.3,1), ls-dim 1s linear; } }
@keyframes ls-spin { to { transform: rotateX(360deg); } }
@keyframes ls-dim { 50% { opacity: .35; } }
@media (min-width: 760px) { .logo-stack { height: 30px; } }

html.fx-imageReveal .card.rv .ph { background: var(--tile); }
html.fx-imageReveal .card.rv .ph img:not(.alt) { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1s cubic-bezier(.7,0,.2,1), transform 1.3s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--col) * 90ms); }
html.fx-imageReveal .card.rv .meta { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--col) * 90ms + 250ms); }
html.fx-imageReveal .card.rv.in .ph img:not(.alt) { clip-path: inset(0 0 0 0); transform: scale(1); }
html.fx-imageReveal .card.rv.in .meta { opacity: 1; transform: none; }
@media (hover: hover) { html.fx-imageReveal .card.rv.in:hover .ph img { transform: scale(1.025); transition-delay: 0s; } }

html.fx-receiptPrint .receipt { position: relative; overflow: hidden; }
html.fx-receiptPrint .receipt.waiting img { transform: translateY(-100%); }
html.fx-receiptPrint .receipt.waiting::before,
html.fx-receiptPrint .receipt.printing::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 6px; background: var(--ink); border-radius: 3px; z-index: 2; }
html.fx-receiptPrint .receipt.printing img { animation: print-feed 1.5s cubic-bezier(.3,0,.3,1) both; }
@keyframes print-feed {
  0% { transform: translateY(-100%); }
  22% { transform: translateY(-74%); } 28% { transform: translateY(-72%); }
  50% { transform: translateY(-40%); } 56% { transform: translateY(-38%); }
  80% { transform: translateY(-6%); } 100% { transform: translateY(0); }
}

html.fx-trackingDraw .tl li::before { transform-origin: top; animation: tl-draw .45s calc(var(--i) * .28s + .2s) cubic-bezier(.6,0,.3,1) both; }
html.fx-trackingDraw .tl li .dot { animation: tl-dot .35s calc(var(--i) * .28s) cubic-bezier(.3,1.6,.5,1) both; }
html.fx-trackingDraw .tl li.cur .dot { animation: tl-dot .35s calc(var(--i) * .28s) cubic-bezier(.3,1.6,.5,1) both, tl-pulse 1.8s calc(var(--i) * .28s + .4s) ease-out infinite; }
@keyframes tl-draw { from { transform: scaleY(0); } }
@keyframes tl-dot { from { transform: scale(0); } }
@keyframes tl-pulse { 0% { box-shadow: 0 0 0 0 rgba(12,12,12,.28); } 100% { box-shadow: 0 0 0 12px rgba(12,12,12,0); } }

/* ── scrolling ticker under the header */
.ticker { background: var(--ink); color: var(--bg); overflow: hidden; height: 30px; display: flex; align-items: center; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.tk-track { display: flex; flex: none; width: max-content; align-items: center; gap: 22px; padding-left: 22px; animation: tk-run 40s linear infinite; will-change: transform; backface-visibility: hidden; }
.ticker, .wl-band { contain: layout paint; }
.tk-track i { font-style: normal; opacity: .5; font-size: 9px; }
.ticker.still .tk-track { animation: none; }
@media (hover: hover) { .ticker:hover .tk-track { animation-play-state: paused; } }
@keyframes tk-run { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
body.locked .ticker { display: none; }

/* ── sliding underline on the category bar (the bar is sticky, so it already anchors the line) */
.cat-ink { position: absolute; left: 0; bottom: 8px; height: 1px; width: 0; background: var(--ink); transition: transform .45s cubic-bezier(.6,0,.2,1), width .45s cubic-bezier(.6,0,.2,1); pointer-events: none; }
@media (max-width: 759px) { .cat-ink { bottom: 6px; } }

/* ── bag count rolls */
#bagCount { display: inline-block; }

/* ═════════════════ Blackout launch ═════════════════ */
body.no-shop .bag-btn, body.no-shop .fab { display: none !important; }
.demo-bar b { font-weight: 600; }
.dh-k { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }

/* ── shop: drop header + sold-out banner */
.drop-head { padding: 28px var(--gut) 20px; display: grid; gap: 6px; }
.drop-head h1 { margin: 0; font-size: clamp(26px, 5vw, 44px); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
.drop-head p { margin: 0; color: var(--muted); }
.so-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 var(--gut) 18px; padding: 14px 16px; background: var(--ink); color: var(--bg); font-size: 12px; }
.so-banner b { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* ── product page */
.save { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--bg); vertical-align: 2px; }
.pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.pieces a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); transition: border-color .15s, background .15s, color .15s; }
.pieces a span { font-weight: 500; }
.pieces a em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pieces a:hover { border-color: var(--ink); }
.pieces a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pieces a.on em { color: #bdbdb6; }
.pieces a.out:not(.on) { color: #b9b9b3; }
.fit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.fit-row .linkish { min-height: 0; color: var(--ink); white-space: nowrap; }
.ship-note { text-align: center; }
.notify { display: grid; gap: 10px; }
.notify .coupon-row input { text-transform: none; letter-spacing: 0; }
.notify .note, .notify .gate-err { margin: 0; }
.notified { padding: 14px 16px; background: var(--tile); }
.ptabs { border-top: 1px solid var(--line); }
.ptab-bar { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-top: 14px; }
.ptab-bar::-webkit-scrollbar { display: none; }
.ptab-bar button { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s; }
.ptab-bar button.on { color: var(--ink); border-color: var(--ink); }
.ptab-body { padding-top: 12px; color: #3c3c38; white-space: pre-line; line-height: 1.6; min-height: 6.5em; }

/* ── waitlist page */
body.wl-view .foot { margin-top: 0; }
.wl { display: grid; }
.wl-hero { position: relative; overflow: hidden; background: #0c0c0c; color: #f4f4f1; min-height: min(720px, calc(100svh - var(--head) - 30px)); display: grid; align-content: center; justify-items: center; gap: 18px; padding: 56px var(--gut) 64px; text-align: center; }
.wl-kicker { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8b8b85; }
.wl-title { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em; font-size: clamp(40px, 11vw, 120px); font-weight: 600; line-height: .92; letter-spacing: -.02em; }
.wl-title span { display: inline-block; animation: wl-up .9s cubic-bezier(.2,.7,.2,1) both; }
.wl-title span:nth-child(2) { animation-delay: .08s; color: #6f6f69; font-weight: 400; }
.wl-title span:nth-child(3) { animation-delay: .16s; }
@media (max-width: 759px) { .wl-title { flex-direction: column; align-items: center; } .wl-title .dash { display: none; } }
@keyframes wl-up { from { transform: translateY(40%); opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10% 0); } }
.wl-line { margin: 0; color: #c9c9c3; font-size: 14px; max-width: 34ch; }
.wl-line b { color: #fff; font-weight: 600; letter-spacing: .06em; }
.cd { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 6px; margin-top: 10px; width: min(460px, 100%); }
.cd > div { display: grid; gap: 4px; padding: 14px 6px 12px; border: 1px solid #2a2a27; background: rgba(255,255,255,.02); }
.cd b { display: block; font-size: clamp(28px, 7vw, 44px); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.cd span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8b8b85; }
.wl-when { margin: 0; font-size: 12px; color: #8b8b85; }
.wl-hero .btn.light { margin-top: 8px; height: 52px; }

.wl-join { padding: 56px var(--gut); scroll-margin-top: calc(var(--head) + 8px); background: var(--bg); }
.wl-form, .wl-done { max-width: 460px; margin: 0 auto; display: grid; gap: 18px; }
.wl-form h2, .wl-sec h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.005em; }
.wl-form > .note { margin-top: -10px; font-size: 13px; line-height: 1.5; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-chips button { height: 42px; min-width: 52px; padding: 0 14px; border: 1px solid var(--line); font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.wl-chips button em { font-style: normal; color: var(--muted); margin-left: 4px; }
.wl-chips button:hover { border-color: var(--ink); }
.wl-chips button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wl-chips button.on em { color: #bdbdb6; }
.wl-more { border-top: 1px solid var(--line); padding-top: 12px; }
.wl-more summary { cursor: pointer; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; list-style: none; display: flex; justify-content: space-between; }
.wl-more summary::-webkit-details-marker { display: none; }
.wl-more summary span { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.wl-more summary::after { content: "+"; font-size: 14px; }
.wl-more[open] summary::after { content: "−"; }
.wl-more .field { margin-top: 14px; }
.wl-consent { margin: -6px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.wl-consent a { text-decoration: underline; }
.wl-form .gate-err { text-align: center; margin-top: -8px; }
.wl-done { text-align: center; justify-items: center; }
.wl-pos { display: grid; justify-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.wl-pos b { font-size: clamp(64px, 18vw, 120px); font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wl-done p { margin: 0; max-width: 40ch; line-height: 1.55; color: #3c3c38; }
.wl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.wl-done .linkish { justify-self: center; }

.wl-sec { padding: 48px var(--gut); border-top: 1px solid var(--line); display: grid; gap: 20px; }
.wl-img { background: var(--tile); overflow: hidden; }
.wl-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-up { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) % 3 * 80ms); }
.rv-up.in { opacity: 1; transform: none; }
.wl-fit { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.wl-fit::-webkit-scrollbar { display: none; }
.wl-fit .wl-img { flex: 0 0 min(62vw, 300px); aspect-ratio: 1 / 2; scroll-snap-align: start; }
.wl-fit .wl-img img { object-fit: contain; background: #fff; }
.wl-specs dl { margin: 0; display: grid; }
.wl-specs dl div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wl-specs dt { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 1px; }
.wl-specs dd { margin: 0; }
.wl-journal { display: grid; gap: 22px; }
.jr { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.jr:not(:has(.wl-img)) { grid-template-columns: 1fr; }
.jr .wl-img { aspect-ratio: 4 / 5; }
.jr time { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.jr h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 500; }
.jr p { margin: 0; color: #3c3c38; white-space: pre-line; }
.wl-faq { gap: 0; }
.wl-faq h2 { margin-bottom: 12px; }
.wl-faq details { border-bottom: 1px solid var(--line); }
.wl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary::after { content: "+"; font-weight: 400; transition: transform .25s var(--ease); }
.wl-faq details[open] summary::after { transform: rotate(45deg); }
.wl-faq details p { margin: 0 0 16px; color: #3c3c38; line-height: 1.6; max-width: 62ch; }
.wl-end { display: grid; justify-items: center; gap: 14px; padding: 64px var(--gut) 56px; border-top: 1px solid var(--line); text-align: center; }
.wl-end p { margin: 0; font-size: clamp(24px, 5vw, 40px); font-weight: 500; letter-spacing: -.01em; }
.wl-end .btn { width: min(320px, 100%); }
.socials { display: flex; justify-content: center; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: border-color .2s; }
.socials a:hover { border-color: var(--ink); }
.socials svg { width: 20px; height: 20px; }
/* ── landing flair: photo hero, swipe rail, word band, big numbers */
.wl-hero { min-height: calc(100svh - var(--head)); align-content: center; padding: 0 var(--gut) 88px; isolation: isolate; }   /* just the drop name, centred; the floating Join button owns the bottom */
.wl-hero-bg { position: absolute; inset: 0; z-index: -1; }
.wl-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 18%); animation: wl-zoom 2.8s cubic-bezier(.2,.7,.2,1) both; }
.wl-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,.35) 0%, rgba(12,12,12,0) 30%, rgba(12,12,12,.55) 62%, #0c0c0c 96%); }
@keyframes wl-zoom { from { transform: scale(1.2); filter: brightness(.25) blur(6px); } }
.wl-hero-in { display: grid; justify-items: center; gap: 14px; }
.wl-hero-in > :not(.wl-title) { animation: wl-fade 1s cubic-bezier(.2,.7,.2,1) both; }
.wl-hero-in > .wl-kicker { animation-delay: .35s; }
.wl-hero-in > .wl-line { animation-delay: .7s; }
.wl-hero-in > .wl-when { animation-delay: .8s; }
.wl-hero-in > .btn { animation-delay: .95s; width: min(320px, 100%); }
@keyframes wl-fade { from { opacity: 0; transform: translateY(14px); } }
.wl-hero .wl-title { font-size: clamp(56px, 17vw, 180px); letter-spacing: -.04em; }
.wl-hero .wl-title span { animation-delay: .45s; animation-duration: 1.1s; }

.wl-look { background: #0c0c0c; color: #f4f4f1; padding: 36px 0 44px; display: grid; gap: 16px; }
.wl-look-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gut); }
.wl-look h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.005em; }
.wl-count { font-size: 11px; letter-spacing: .16em; color: #8b8b85; font-variant-numeric: tabular-nums; }
.wl-count b { color: #f4f4f1; font-weight: 500; }
.wl-rail { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gut); scroll-padding: 0 var(--gut); overscroll-behavior-x: contain; }
.wl-rail::-webkit-scrollbar { display: none; }
.wl-slide { position: relative; margin: 0; flex: 0 0 88%; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a18; scroll-snap-align: start; cursor: pointer; }
.wl-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1.2s; filter: brightness(.55); }
.wl-slide.on img { transform: none; filter: none; }
.wl-slide figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.wl-bar { margin: 0 var(--gut); height: 1px; background: #2a2a27; overflow: hidden; }
.wl-bar i { display: block; height: 100%; background: #f4f4f1; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.wl-looknote { margin: 0; padding: 0 var(--gut); font-size: 11px; color: #8b8b85; }

.wl-band { background: #0c0c0c; overflow: hidden; padding: 22px 0 26px; }
.wl-band-track { display: flex; align-items: center; width: max-content; animation: tk-run 32s linear infinite; will-change: transform; backface-visibility: hidden; }
.wl-band.off .wl-band-track { animation-play-state: paused; }
.wl-band-track span { font-size: clamp(52px, 15vw, 128px); font-weight: 600; line-height: 1; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px #6a6a64; }
.wl-band-track span:nth-of-type(2n) { color: #f4f4f1; -webkit-text-stroke: 0; }
.wl-band-track i { font-style: normal; color: #6a6a64; font-size: clamp(22px, 6vw, 48px); padding: 0 .6em; }


.wl-stats { background: #0c0c0c; color: #f4f4f1; padding: 56px var(--gut) 64px; display: grid; gap: 34px; }
.stat { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid #2a2a27; opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.stat:nth-child(2) { transition-delay: .12s; } .stat:nth-child(3) { transition-delay: .24s; }
.wl-stats.in .stat { opacity: 1; transform: none; }
.stat b { font-size: clamp(96px, 30vw, 190px); font-weight: 600; line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.stat p { margin: 0; font-size: 13px; color: #8b8b85; }

.wl-faq summary { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 8px; padding: 20px 0; font-size: 17px; letter-spacing: -.005em; }
.wl-faq summary em { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .16em; color: var(--muted); }
.wl-faq summary::after { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 15px; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.wl-faq details[open] summary::after { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wl-faq details p { padding: 0 36px 20px 38px; margin: 0; }
.wl-faq details[open] p { animation: faq-in .5s cubic-bezier(.2,.7,.2,1); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

.wl-end { background: #0c0c0c; color: #f4f4f1; border-top: 0; padding: 96px var(--gut) 80px; gap: 28px; }
.wl-end p { font-size: clamp(48px, 14vw, 112px); font-weight: 600; line-height: .92; letter-spacing: -.04em; max-width: 9ch; }
.wl-end p span { display: inline-block; opacity: 0; transform: translateY(50%); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 110ms); }
.wl-end.in p span { opacity: 1; transform: none; }
.wl-end .socials a { border-color: #2a2a27; color: #f4f4f1; }
.wl-end .socials a:hover { border-color: #f4f4f1; }
body.wl-view .foot { border-top: 1px solid #1f1f1d; }

.wl-sticky { position: fixed; left: var(--gut); right: var(--gut); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; height: 52px; display: flex; align-items: center; justify-content: center; background: #0c0c0c; color: #f4f4f1; border: 1px solid rgba(255,255,255,.18); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 12px 32px rgba(0,0,0,.28); transform: translateY(160%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.wl-sticky.on { transform: none; }
.wl-joined { margin: 6px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #d6d6d0; animation: wl-fade .8s cubic-bezier(.2,.7,.2,1) both; }
.wl-end .wl-joined { color: #9a9a94; }
.wl-joined { display: inline-block; background: none; border: 0; padding: 8px 4px; font-family: inherit; cursor: pointer; }
.wl-joined span { color: #f4f4f1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244,244,241,.4); transition: text-decoration-color .25s; }
.wl-joined:hover span { text-decoration-color: #f4f4f1; }

/* ── manifesto: the star, line by line */
.wl-specs details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 500; letter-spacing: -.005em; }
.wl-specs details summary::-webkit-details-marker { display: none; }
.wl-specs details summary::after { content: "+"; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 15px; font-weight: 400; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.wl-specs details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wl-specs details dl { margin-top: 16px; }
.wl-specs details[open] dl { animation: faq-in .5s cubic-bezier(.2,.7,.2,1); }
@media (min-width: 760px) { .wl-specs { grid-template-columns: 1fr; } .wl-specs details { max-width: 760px; } }

/* ── the buyer's set number */
.th-num { display: grid; justify-items: center; gap: 2px; margin: 4px 0 6px; }
.th-num span { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.th-num b { font-size: clamp(64px, 20vw, 112px); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; animation: wl-fade .9s cubic-bezier(.2,.7,.2,1) .2s both; }
.tr-num { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; }

/* ── join popup + sign-up celebration */
html.jm-lock, html.jm-lock body { overflow: hidden; }
.jm { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.jm[hidden] { display: none; }
.jm-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.jm.on .jm-scrim { opacity: 1; }
.jm-card { position: relative; z-index: 1; background: #0c0c0c; color: #f4f4f1; padding: 30px var(--gut) calc(22px + env(safe-area-inset-bottom)); max-height: 94svh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #2a2a27; transform: translateY(105%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.jm.on .jm-card { transform: none; }
.jm-card::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent) no-repeat; background-size: 40% 100%; animation: jm-scan 2.6s linear infinite; }
@keyframes jm-scan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.jm-grab { position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: #2a2a27; }
.jm-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #2a2a27; border-radius: 50%; color: #bdbdb6; font-size: 13px; transition: border-color .2s, color .2s, transform .3s; }
.jm-x:hover { border-color: #f4f4f1; color: #f4f4f1; transform: rotate(90deg); }
.jm-k { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8b8b85; }
.jm .wl-form, .jm .wl-done { max-width: none; gap: 18px; }
.jm .wl-form h2 { font-size: clamp(40px, 12vw, 52px); font-weight: 600; line-height: .92; letter-spacing: -.035em; margin-top: -6px; }
.jm .wl-form > .note { margin-top: -6px; color: #9a9a94; }
.jm.on .wl-form > * { animation: wl-fade .7s cubic-bezier(.2,.7,.2,1) both; }
.jm.on .wl-form > :nth-child(2) { animation-delay: .05s; } .jm.on .wl-form > :nth-child(3) { animation-delay: .1s; } .jm.on .wl-form > :nth-child(4) { animation-delay: .15s; }
.jm.on .wl-form > :nth-child(5) { animation-delay: .2s; } .jm.on .wl-form > :nth-child(6) { animation-delay: .25s; } .jm.on .wl-form > :nth-child(n+7) { animation-delay: .3s; }
.jm-proof { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #d6d6d0; }
.jm-proof i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #f4f4f1; }
.jm-proof i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #f4f4f1; animation: jm-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes jm-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.jm .field label { color: #bdbdb6; } .jm .field label span { color: #6a6a64; }
.jm .field input { height: 58px; background: #151514; border: 1px solid #2a2a27; color: #f4f4f1; font-size: 19px; letter-spacing: .02em; transition: border-color .25s, box-shadow .35s, background .25s; }
.jm .field input::placeholder { color: #55554f; }
.jm .field input:focus { border-color: #f4f4f1; background: #181817; box-shadow: 0 0 0 4px rgba(255,255,255,.07), 0 0 36px rgba(255,255,255,.1); }
.jm .wl-chips button { height: 44px; min-width: 58px; border: 1px solid #2a2a27; border-radius: 999px; color: #f4f4f1; }
.jm .wl-chips button:hover { border-color: #8b8b85; }
.jm .wl-chips button.on { background: #f4f4f1; color: #0c0c0c; border-color: #f4f4f1; animation: chip-pop .4s cubic-bezier(.2,.9,.3,1.5); }
@keyframes chip-pop { 40% { transform: scale(1.14); } }
.jm .wl-more { border-color: #2a2a27; } .jm .wl-more summary { color: #bdbdb6; } .jm .wl-more summary span { color: #6a6a64; }
.jm-go { position: relative; overflow: hidden; height: 58px; gap: 12px; background: #f4f4f1; color: #0c0c0c; font-size: 12px; font-weight: 600; }
.jm-go b { font-weight: 400; font-size: 16px; transition: transform .3s; }
.jm-go:hover b { transform: translateX(4px); }
.jm-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-18deg); animation: jm-shine 3.2s ease-in-out infinite 1s; }
@keyframes jm-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.jm-go.busy { pointer-events: none; }
.jm-go.busy b { display: none; }
.jm-go.busy span::after { content: "…"; }
.jm .wl-consent { color: #6a6a64; margin-top: -4px; }
.jm .gate-err { color: #ff8a80; }
.jm .wl-done { text-align: center; justify-items: center; padding: 10px 0 4px; }
.jm .wl-done > * { animation: wl-fade .8s cubic-bezier(.2,.7,.2,1) both; }
.jm .wl-done > :nth-child(2) { animation-delay: .08s; } .jm .wl-done > :nth-child(3) { animation-delay: .5s; } .jm .wl-done > :nth-child(n+4) { animation-delay: .65s; }
.jm .wl-pos span { color: #9a9a94; }
.jm .wl-pos b { color: #f4f4f1; font-size: clamp(96px, 32vw, 168px); letter-spacing: -.05em; text-shadow: 0 0 60px rgba(255,255,255,.25); }
.jm .wl-done p { color: #bdbdb6; } .jm .wl-done p b { color: #f4f4f1; }
.jm .wl-done .btn { background: #f4f4f1; color: #0c0c0c; width: 100%; height: 54px; }
.jm .wl-done .btn.ghost { background: transparent; color: #f4f4f1; border: 1px solid #2a2a27; height: 48px; margin-top: -8px; }
.jm-story { gap: 10px; }
.jm-story svg { width: 18px; height: 18px; }
/* reopened from "You're #12 on the list": their story image, tap to share */
.jm .wl-done.again > :nth-child(n+2) { animation-delay: .1s; } .jm .wl-done.again > :nth-child(n+3) { animation-delay: .2s; }
.wl-story-prev { position: relative; height: min(46vh, 420px); aspect-ratio: 9 / 16; padding: 0; border: 1px solid #2a2a27; border-radius: 14px; overflow: hidden; background: #151514; cursor: pointer; box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgba(255,255,255,.06); }
.wl-story-prev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06), transparent 70%) no-repeat; background-size: 200% 100%; animation: prev-load 1.2s linear infinite; }
.wl-story-prev.in::after { display: none; }
@keyframes prev-load { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.wl-story-prev img { display: block; width: 100%; height: 100%; object-fit: cover; animation: wl-fade .6s ease both; }
.jm .wl-done .linkish { color: #8b8b85; }
.jm .socials a { border-color: #2a2a27; color: #f4f4f1; }
.jm-card.pop { animation: jm-pop .7s cubic-bezier(.2,.9,.3,1.3); }
@keyframes jm-pop { 25% { transform: scale(1.035); } }
.jm-flash { position: fixed; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
.jm-flash.go { animation: jm-flash .7s ease-out; }
@keyframes jm-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.jm-fx { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 760px) {
  .jm { align-items: center; justify-items: center; }
  .jm-card { width: min(480px, 92vw); padding: 44px 40px 34px; border: 1px solid #2a2a27; opacity: 0; transform: translateY(28px) scale(.96); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .35s; }
  .jm.on .jm-card { opacity: 1; transform: none; }
  .jm-grab { display: none; }
}
@media (min-width: 760px) {
  .wl-hero-bg img { object-position: var(--pos-wide, var(--pos, 50% 18%)); }
  .wl-sticky { left: 50%; right: auto; width: 320px; margin-left: -160px; bottom: 24px; }
  .wl-slide { flex-basis: min(44%, 560px); }
  .wl-look { padding: 72px 0; }
  .wl-stats { grid-template-columns: repeat(3, 1fr); padding: 96px var(--gut); gap: 24px; }
  .stat b { font-size: clamp(88px, 11vw, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-slide img { transform: none; }
  .stat, .wl-end p span { opacity: 1; transform: none; }
}
@media (min-width: 760px) {
  .wl-sec { padding: 72px var(--gut); grid-template-columns: 240px 1fr; align-items: start; }
  .wl-sec h2 { position: sticky; top: calc(var(--head) + 24px); }
  .wl-fit { grid-column: 2; margin: 0; padding: 0; }
  .jr { grid-template-columns: 140px 1fr; }
}

/* ── info pages */
.info-page { max-width: 640px; margin: 0 auto; padding: 32px var(--gut) 64px; }
.info-page h1 { font-size: 28px; font-weight: 500; margin: 0 0 20px; letter-spacing: -.01em; }
.info-page h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin: 32px 0 10px; }
.info-page p { margin: 0 0 12px; line-height: 1.65; color: #3c3c38; }
.info-page p a { text-decoration: underline; color: var(--ink); }
.info-page.about p:first-of-type { font-size: clamp(26px, 6vw, 40px); font-weight: 500; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 24px; }
.ip-foot { margin-top: 32px !important; }
.sg-wrap { overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
.sg { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.sg thead th:first-child, .sg tbody th { width: 34%; }
.sg th, .sg td { padding: 10px 2px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; }
.sg thead th { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.sg tbody th { text-align: left; color: #3c3c38; padding-left: 0; }
.sg td.tbc { color: #b9b9b3; font-size: 11px; letter-spacing: .06em; }

/* ── checkout + thanks */
.mini .tr-item:last-child { border-bottom: 0; }
.pay-note { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; margin: 0; }
.lock { flex: 0 0 10px; width: 10px; height: 8px; margin-top: 5px; background: var(--muted); border-radius: 1px; position: relative; }
.lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; border: 1.5px solid var(--muted); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
#payErr a { color: var(--ink); }
.thanks { max-width: 480px; margin: 0 auto; min-height: 60svh; padding: 64px var(--gut); display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; }
.thanks h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.thanks p { margin: 0; line-height: 1.6; color: #3c3c38; }
.th-spin { width: 36px; height: 36px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: th-spin .8s linear infinite; }
@keyframes th-spin { to { transform: rotate(360deg); } }
.th-check circle { stroke-dasharray: 151; animation: th-draw .7s cubic-bezier(.6,0,.3,1) both; }
.th-check path { stroke-dasharray: 36; animation: th-draw2 .45s .55s cubic-bezier(.6,0,.3,1) both; }
@keyframes th-draw { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
@keyframes th-draw2 { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
.gate .dh-k { margin-top: -4px; }

/* ── Stars are always there (press and hold) */
.stars-sec { background: #000; color: #f4f4f1; border-top: 1px solid #1f1f1d; overflow: hidden; }   /* the glow spills past the edges on purpose; clip it so phones can't scroll sideways */
.stars { position: relative; min-height: max(640px, min(100svh, 860px)); max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: 72px 24px 56px; display: grid; grid-template-rows: auto 1fr auto auto; gap: 20px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; outline: none; }
.stars:focus-visible { box-shadow: inset 0 0 0 1px #6f6f69; }
.stars-top { display: grid; gap: 14px; }
.stars-k { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #6f6f69; }
.stars-h { margin: 0; font-size: clamp(40px, 10vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.stars-mid { position: relative; display: grid; place-items: center; min-height: 200px; }
.stars-glow { position: absolute; inset: -20% -30%; background: radial-gradient(ellipse 45% 40% at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0)); opacity: 0; transition: opacity 1s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.stars-star { width: min(100%, 560px); aspect-ratio: 504 / 228; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.stars-star img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; pointer-events: none; filter: brightness(.38) contrast(1.15); transform: scale(.96); transition: filter 1s cubic-bezier(.4,0,.2,1), transform 1.5s cubic-bezier(.4,0,.2,1); }
.stars.on .stars-star img { filter: brightness(1.15) contrast(1.1); transform: scale(1.04); transition: filter 1.2s cubic-bezier(.2,.7,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1); }
.stars.on .stars-glow { opacity: 1; transition: opacity 1.2s ease; }
.stars-lines { position: relative; display: grid; gap: 6px; min-height: 70px; }
.stars-lines p { margin: 0; font-size: clamp(22px, 5vw, 28px); font-weight: 500; line-height: 1.25; }
.stars-a, .stars-b { grid-area: 1 / 1; transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.stars-a { color: #8b8b85; }
.stars-b { opacity: 0; transform: translateY(8px); }
.stars.on .stars-a:not(.stars-keep) { opacity: 0; transform: translateY(-8px); }
.stars.on .stars-b { opacity: 1; transform: none; }
.stars-end { grid-area: 2 / 1; opacity: 0; transform: translateY(8px); transition: opacity .9s ease .5s, transform 1s cubic-bezier(.2,.7,.2,1) .5s; }
.stars.seen .stars-end { opacity: 1; transform: none; }
.stars-pill { display: grid; justify-items: center; gap: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #a3a39c; transition: opacity .4s ease; }
.stars.on .stars-pill { opacity: .25; }
.stars-ring { stroke-dashoffset: 126; transition: stroke-dashoffset 1.35s cubic-bezier(.3,0,.2,1); }   /* drains a little quicker than it fills, not a snap */
.stars.arming .stars-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s linear; }   /* fills from the first touch; the star lights at 0.4s */

/* ── Details deck (swipe) */
.dk { background: #0c0c0c; color: #f4f4f1; padding: 56px 0 44px; display: grid; gap: 28px; overflow: hidden; }
.dk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 var(--gut); }
.dk-head > div:first-child { display: grid; gap: 8px; }
.dk-k { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8b8b85; }
.dk-head h2 { margin: 0; font-size: clamp(30px, 6vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.dk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-num b { display: inline-block; font-size: 44px; font-weight: 500; line-height: .9; letter-spacing: -.03em; }
.dk-num span { font-size: 14px; color: #6f6f69; letter-spacing: .04em; }
.dk-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); padding: 0 var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; overscroll-behavior-x: contain; }
.dk-track::-webkit-scrollbar { display: none; }
.dk-card { flex: 0 0 min(82vw, 380px); margin: 0; display: grid; gap: 16px; align-content: start; scroll-snap-align: start; transition: opacity .4s ease; }
.dk-card:not(.on) { opacity: .45; }
.dk-img { aspect-ratio: 16 / 13; overflow: hidden; background: #1a1a18; }
.dk-img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.dk-card:not(.on) .dk-img img { transform: scale(1.06); }
.dk-card figcaption { display: grid; gap: 6px; }
.dk-card figcaption b { font-size: 20px; font-weight: 500; }
.dk-card figcaption span { font-size: 14px; line-height: 1.5; color: #a3a39c; max-width: 36ch; }
.dk-end { flex: 0 0 1px; }
.dk-foot { display: flex; align-items: center; gap: 20px; padding: 0 var(--gut); }
.dk-bars { flex: 1; display: flex; gap: 4px; }
.dk-bars i { flex: 1; height: 2px; background: #2a2a27; transition: background .3s; }
.dk-bars i.on { background: #f4f4f1; }
.dk-nav { display: flex; gap: 6px; }
.dk-nav button { width: 44px; height: 44px; border: 1px solid #3a3a37; color: #f4f4f1; font-size: 16px; transition: border-color .2s, background .2s, color .2s; }
.dk-nav button:hover { border-color: #f4f4f1; background: #f4f4f1; color: #0c0c0c; }
@media (hover: none) { .dk-nav { display: none; } }
@media (min-width: 760px) { .dk { padding: 80px 0 64px; } }