/* ADVNC Lacrosse: "Advance the ball." Night field, chalk lines, one cyan ball. */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  --night: #05070a;
  --night-2: #0a0e12;
  --night-3: #11171c;
  --chalk: #f3f4ef;
  --chalk-2: rgba(243, 244, 239, .72);
  --chalk-3: rgba(243, 244, 239, .5);
  --chalk-faint: rgba(243, 244, 239, .16);
  --chalk-line: rgba(243, 244, 239, .09);
  --ball: #00aeef;
  --ball-hi: #4fd0ff;
  --ball-glow: rgba(0, 174, 239, .5);
  --plate: #e8eae5;
  --ink: #05070a;
  --warn: #ff8a5c;
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --nav-h: 68px;
  --gutter: clamp(16px, 4.2vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html.locked, html.intro-on { overflow: hidden; }
body {
  margin: 0; min-height: 100svh; background: var(--night); color: var(--chalk);
  font: 400 16px/1.55 var(--display); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
/* Film grain over everything, very faint. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ball); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ball); color: var(--ink); }
.mono { font-family: var(--mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
em { font-style: normal; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 12px var(--ball-glow); vertical-align: middle; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ball); color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- the mark ---------- */
.mark { width: 34px; height: auto; flex: none; overflow: visible; }
.mark path { fill: currentColor; }
.mark circle { fill: var(--ball); }

/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: var(--night);
  --bx: 50vw; --by: 50vh;
  -webkit-mask-image: radial-gradient(circle at var(--bx) var(--by), transparent var(--r), #000 calc(var(--r) + 1px));
  mask-image: radial-gradient(circle at var(--bx) var(--by), transparent var(--r), #000 calc(var(--r) + 1px));
}
html:not(.intro-on) .intro { display: none; }
.intro-mark { width: clamp(120px, 16vw, 190px); overflow: visible; }
.intro-a { fill: transparent; stroke: var(--chalk); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; }
.intro-ball { fill: var(--ball); transform-box: fill-box; transform-origin: center bottom; opacity: 0; }
.intro.play .intro-a { animation: introDraw .75s var(--ease-out) forwards, introFill .4s ease .55s forwards; }
.intro.play .intro-ball { animation: introDrop 1s linear .35s forwards; }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill { to { fill: var(--chalk); stroke-width: 0; } }
@keyframes introDrop {
  0% { opacity: 1; transform: translateY(-260px) scale(.9, 1.1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42% { transform: translateY(0) scale(1.25, .72); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  48% { transform: translateY(0) scale(1, 1); }
  64% { transform: translateY(-46px) scale(.96, 1.04); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80% { transform: translateY(0) scale(1.12, .86); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  88% { transform: translateY(-10px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  96%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-ring { position: fixed; left: var(--bx); top: var(--by); width: 0; height: 0; border-radius: 50%; border: 3px solid var(--ball); box-shadow: 0 0 40px var(--ball-glow), inset 0 0 40px var(--ball-glow); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.intro.open { --r: 150vmax; transition: --r 1s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
.intro.open .intro-ring { opacity: 1; width: 300vmax; height: 300vmax; transition: width 1s cubic-bezier(.7, 0, .2, 1), height 1s cubic-bezier(.7, 0, .2, 1), opacity .3s ease .7s; }
.intro.open .intro-mark { transform: scale(1.4); opacity: 0; transition: transform .8s var(--ease-out), opacity .3s; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent;
}
.nav.scrolled, html.locked .nav, html.menu-open .nav { background: rgba(5, 7, 10, .78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--chalk-line); }
html.menu-open .nav { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { display: flex; align-items: center; gap: 11px; justify-self: start; color: var(--chalk); }
.brand .mark { width: 36px; transition: transform .5s var(--spring); }
.brand:hover .mark { transform: translateY(-2px) rotate(-4deg); }
.brand-word { font-weight: 900; font-stretch: 125%; font-size: 21px; letter-spacing: -.01em; line-height: 1; }
.brand-sub { font-size: 8.5px; line-height: 1.25; color: var(--chalk-3); border-left: 1px solid var(--chalk-faint); padding-left: 10px; }
.nav-links { display: flex; gap: 4px; }
.nav-links > * { position: relative; font-weight: 650; font-stretch: 112%; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; color: var(--chalk-2); transition: color .25s; }
.nav-links > *::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ball); transform: translateX(-50%) scale(0); transition: transform .35s var(--spring); }
.nav-links > *:hover { color: var(--chalk); }
.nav-links > *:hover::after { transform: translateX(-50%) scale(1); }
.nav-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-btn { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 999px; color: var(--chalk-2); transition: background .25s, color .25s; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn kbd { font-size: 10px; border: 1px solid var(--chalk-faint); border-radius: 5px; padding: 1px 6px; color: var(--chalk-3); }
.icon-btn:hover { background: rgba(243, 244, 239, .07); color: var(--chalk); }
.bag-btn { position: relative; width: 50px; height: 44px; display: grid; place-items: center; color: var(--chalk); border-radius: 12px; transition: background .25s; }
.bag-btn:hover { background: rgba(243, 244, 239, .07); }
.bag-btn .goal { width: 30px; height: 26px; overflow: visible; }
.bag-btn .net { transform-box: fill-box; transform-origin: 50% 0; }
.bag-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0; background: var(--night); color: var(--chalk-3); border: 1px solid var(--chalk-faint); transition: background .3s, color .3s, border-color .3s; }
.bag-btn.has .bag-count { background: var(--ball); color: var(--ink); border-color: var(--ball); box-shadow: 0 0 14px var(--ball-glow); }
.bag-btn.goal-fx .net { animation: net .7s var(--ease-out); }
.bag-btn.goal-fx .crease { animation: crease-flash .7s ease-out; }
@keyframes crease-flash { 0%, 100% { stroke: currentColor; } 25%, 55% { stroke: var(--ball); opacity: 1; } }
.bag-btn.goal-fx .bag-count { animation: pop .6s var(--spring); }
.bag-btn.goal-fx::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ball); animation: ripple .7s ease-out forwards; pointer-events: none; }
@keyframes net { 0% { transform: none; } 30% { transform: scale(1.22, 1.3) translateY(1px); } 60% { transform: scale(.94, .95); } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.menu-btn { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 12px; }
.menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--chalk); transition: transform .45s var(--ease-out); }
.menu-btn:hover { background: rgba(243, 244, 239, .07); }
html.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
html.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav-meter { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; display: none; }
.nav-meter i { position: absolute; top: -3px; left: calc(var(--p, 0) * (100% - 7px)); width: 7px; height: 7px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 10px var(--ball-glow); opacity: 0; transition: opacity .3s; }
.nav.scrolled .nav-meter i { opacity: 1; }

/* ---------- buttons & bits ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 800; font-stretch: 112%; font-size: 13.5px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; transition: background .25s, color .25s, box-shadow .35s, transform .35s var(--ease-out), border-color .25s; }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--spring); }
.btn:hover svg { transform: translateX(4px); }
.btn-ball { background: var(--ball); color: var(--ink); box-shadow: 0 10px 40px -12px var(--ball-glow); }
.btn-ball:hover { background: var(--ball-hi); box-shadow: 0 14px 50px -10px var(--ball-glow); }
.btn-ball:disabled { background: var(--night-3); color: var(--chalk-3); box-shadow: none; }
.btn-ghost { border: 1.5px solid var(--chalk-faint); color: var(--chalk); }
.btn-ghost:hover { border-color: var(--chalk); background: rgba(243, 244, 239, .05); }
/* A button with a line under its name (where a collection ships on its own clock), and the ball
   button's outlined sibling. */
.btn-line { border: 1.5px solid rgba(0, 174, 239, .75); color: var(--chalk); }
.btn-line:hover { border-color: var(--ball); background: rgba(0, 174, 239, .12); }
.btn-line svg { color: var(--ball); }
.btn-two { flex-direction: column; gap: 4px; }
.btn-main { display: inline-flex; align-items: center; gap: 10px; line-height: 1.1; }
.btn-note { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; font-size: 9.5px; line-height: 1.1; letter-spacing: .08em; opacity: .78; }
.btn .btn-note svg { width: 11px; height: 11px; transform: none; }
.btn-block { width: 100%; }
.btn.busy { pointer-events: none; }
.btn.busy::before, .roll { content: ''; width: 14px; height: 14px; border-radius: 50%; background: currentColor; animation: roll .7s var(--spring) infinite alternate; }
@keyframes roll { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-stretch: 112%; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--chalk); padding: 10px 0; white-space: nowrap; }
.link-arrow svg { width: 18px; height: 18px; color: var(--ball); transition: transform .35s var(--spring); }
.link-arrow:hover svg { transform: translateX(5px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-width: 50px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--chalk-faint); font-weight: 650; font-stretch: 105%; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .2s, background .2s, color .2s, transform .3s var(--spring); }
.chip:hover:not(:disabled) { border-color: var(--chalk-2); }
.chip[aria-pressed="true"] { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.chip.dim { opacity: .5; }
.chip:disabled { opacity: .28; text-decoration: line-through; }
.chip:active:not(:disabled) { transform: scale(.94); }
.chip sup, .cv-jump sup, .tab sup, .menu sup { font-size: 9.5px; letter-spacing: 0; opacity: .6; vertical-align: super; margin-left: 2px; }
.tag { position: absolute; left: 12px; top: 12px; z-index: 2; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--chalk); }
.tag-ball { background: var(--ball); color: var(--ink); }
.tag + .tag { top: 42px; }
.qty { display: inline-flex; align-items: center; height: 58px; border-radius: 999px; border: 1.5px solid var(--chalk-faint); }
.qty button { width: 46px; height: 100%; font-size: 20px; color: var(--chalk-2); border-radius: 999px; }
.qty button:hover { color: var(--ball); }
.qty output { min-width: 22px; text-align: center; font-weight: 800; font-stretch: 112%; }
.qty-sm { height: 36px; margin-top: 10px; }
.qty-sm button { width: 34px; font-size: 16px; }
.field { display: grid; gap: 6px; }
.field > span { color: var(--chalk-3); }
.field > span em { color: var(--chalk-3); opacity: .7; margin-left: 4px; }
.field > span em.warn { color: var(--warn); opacity: 1; }
.field input, .field select { width: 100%; height: 52px; background: rgba(243, 244, 239, .04); border: 1.5px solid var(--chalk-faint); border-radius: 12px; padding: 0 16px; font-weight: 650; font-size: 17px; outline: none; transition: border-color .2s, background .2s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--chalk-2) 50%), linear-gradient(135deg, var(--chalk-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--night-2); }
.field input:focus, .field select:focus { border-color: var(--ball); background: rgba(0, 174, 239, .06); }
.field.bad input { border-color: var(--warn); }
.field-num input { font-stretch: 112%; font-weight: 800; letter-spacing: .06em; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { color: var(--chalk-3); font-size: 13px; margin: -4px 0 0; }
.error { color: var(--warn); font-weight: 600; font-size: 14.5px; margin: 14px 0 0; }
.empty { color: var(--chalk-3); grid-column: 1 / -1; padding: 40px 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding: calc(var(--nav-h) + clamp(24px, 5vh, 64px)) var(--gutter) clamp(48px, 7vh, 88px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(640px circle at var(--mx, 72%) var(--my, 40%), rgba(0, 174, 239, .11), transparent 62%); transition: background .2s; }
.hero-lights { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-lights i { position: absolute; top: -30vh; width: 70vw; height: 90vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 240, 255, .13), rgba(220, 240, 255, .04) 55%, transparent); filter: blur(10px); animation: flicker 7s ease-in-out infinite; }
.hero-lights i:first-child { left: -25vw; }
.hero-lights i:last-child { right: -25vw; animation-delay: -3.5s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 50% { opacity: .95; } 53% { opacity: .78; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: clamp(24px, 4vw, 72px); translate: 0 calc(var(--sy, 0) * -.08px); }
.hero-copy { position: relative; z-index: 2; }
.hero-title { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(50px, 7.3vw, 136px); line-height: .86; letter-spacing: -.035em; text-transform: uppercase; }
.hero-title .ln { display: block; white-space: nowrap; overflow: hidden; padding: .02em 0 .05em; margin-bottom: -.05em; }
.hero-title .ln > span { display: inline-block; }
.hero-title em { color: transparent; -webkit-text-stroke: 1.5px var(--chalk); }
.hero-title .ln:last-child { overflow: visible; }
.title-ball { display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #b6ecff, var(--ball) 52%, #0079ab); box-shadow: 0 0 .25em var(--ball-glow); vertical-align: baseline; transform-origin: 50% 100%; opacity: 0; }
.ready .title-ball { animation: titleDrop 1.1s linear 1.05s forwards; }
@keyframes titleDrop {
  0% { opacity: 1; transform: translateY(-3.2em) scale(.9, 1.1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  40% { transform: translateY(0) scale(1.35, .65); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  47% { transform: translateY(0) scale(1); }
  64% { transform: translateY(-.9em) scale(.95, 1.05); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80% { transform: translateY(0) scale(1.15, .85); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  89% { transform: translateY(-.22em); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  96%, 100% { opacity: 1; transform: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-sub { max-width: 34em; margin: clamp(20px, 3.4vh, 34px) 0 0; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--chalk-2); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: clamp(24px, 4vh, 38px); }
/* The season's collection and the pop-up, side by side under one label while both are in the store. */
.hero-pair { position: relative; display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.hero-pair .btn { flex: 1 1 auto; }
.hero-pair[role="group"] { padding-top: 28px; }
/* The label's rule runs the width of the buttons under it, so it sits outside their row. */
.hero-pair-label { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; margin: 0; color: var(--chalk-2); white-space: nowrap; }
.hero-pair-label::after { content: ''; flex: 1; height: 1px; background: var(--chalk-faint); }
.hero-stage { position: relative; justify-self: center; width: min(100%, 560px, 64vh); aspect-ratio: 1; translate: 0 calc(var(--sy, 0) * .06px); }
.stage-field { position: absolute; inset: -7%; pointer-events: none; }
.stage-field svg { width: 100%; height: 100%; overflow: visible; }
.stage-field circle { fill: none; stroke: var(--chalk-faint); stroke-width: .25; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ready .stage-field circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-out) .6s; }
/* Photos have white backgrounds, so they sit on a white disc with no blend mode, clipped by a
   separate layer, and the plate's shading is a plain overlay on top. Blend modes and
   border-radius clipping both drop out on phones mid-scroll and showed the photo's square. */
.stage-disc { position: absolute; inset: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 50px 120px -40px rgba(0, 174, 239, .45); }
.stage-disc::after, .pv-disc::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 38% 30%, rgba(40, 50, 45, 0) 0%, rgba(40, 50, 45, .02) 30%, rgba(40, 50, 45, .09) 58%, rgba(40, 50, 45, .19) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.stage-clip, .pv-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; clip-path: circle(50% at 50% 50%); background: #fff; }
.stage-disc img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; opacity: 0; transform: translateX(46%) rotate(12deg) scale(.86); filter: blur(10px); transition: opacity .7s ease, transform 1.1s var(--ease-out), filter .8s ease; }
.stage-disc img.on { opacity: 1; transform: none; filter: none; }
.stage-disc img.out { opacity: 0; transform: translateX(-46%) rotate(-12deg) scale(.86); filter: blur(10px); }
.stage-disc:hover img.on { transform: scale(1.04); }
/* No photo could load: the club mark holds the disc. */
.stage-mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); }
.stage-mark .mark { width: 44%; }
.no-photo .stage-disc { cursor: default; }
.stage-orbit { position: absolute; inset: -4.5%; border-radius: 50%; pointer-events: none; animation: orbit 5.6s linear infinite; animation-play-state: paused; }
.ready .stage-orbit { animation-play-state: running; }
.hero-stage:hover .stage-orbit { animation-play-state: paused; }
.stage-orbit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(0, 174, 239, .7) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.stage-orbit i { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #b6ecff, var(--ball) 52%, #0079ab); box-shadow: 0 0 22px var(--ball-glow), 0 0 4px #fff; }
@keyframes orbit { to { transform: rotate(360deg); } }
.stage-cap { position: absolute; left: 50%; bottom: -2%; transform: translate(-50%, 50%); z-index: 3; display: flex; align-items: center; gap: 14px; max-width: 110%; padding: 10px 12px 10px 18px; border-radius: 999px; background: rgba(10, 14, 18, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--chalk-faint); white-space: nowrap; transition: border-color .3s; }
.stage-cap:hover { border-color: var(--ball); }
.cap-idx { color: var(--ball); }
.cap-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.cap-price { font-weight: 900; font-stretch: 112%; font-size: 14px; background: var(--ball); color: var(--ink); border-radius: 999px; padding: 6px 12px; }
.stage-cap.flip .cap-title, .stage-cap.flip .cap-price { animation: capIn .7s var(--ease-out); }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } }
.turf { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: -1; perspective: 300px; perspective-origin: 50% 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 75%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 75%); opacity: 0; transition: opacity 2.4s ease .5s; }
.ready .turf { opacity: 1; }
.turf-plane { position: absolute; left: -18%; right: -18%; bottom: 0; height: 520%; transform-origin: 50% 100%; transform: rotateX(80deg);
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), rgba(243, 244, 239, .22) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(90deg, transparent 6%, rgba(243, 244, 239, .2) 6% calc(6% + 5px), transparent calc(6% + 5px) calc(94% - 5px), rgba(243, 244, 239, .2) calc(94% - 5px) 94%, transparent 94%),
    repeating-linear-gradient(0deg, rgba(243, 244, 239, .2) 0 5px, transparent 5px 420px),
    repeating-linear-gradient(0deg, rgba(120, 200, 170, .045) 0 105px, transparent 105px 210px);
  will-change: transform; animation: turf 6s linear infinite; }
/* The plane itself slides one pattern period toward the viewer: a compositor-only transform, no repaint. */
@keyframes turf { from { transform: rotateX(80deg) translateY(0); } to { transform: rotateX(80deg) translateY(420px); } }
html.hero-off .turf-plane, html.hero-off .hero-lights i, html.hero-off .stage-orbit, html.tape-off .tape-run > div { animation-play-state: paused; }

/* hero entrance */
[data-in] { opacity: 0; transform: translateY(28px); }
.ready [data-in] { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) calc(var(--d, 0) * 90ms + 120ms), transform 1.2s var(--ease-out) calc(var(--d, 0) * 90ms + 120ms); }
.hero-title [data-in] { opacity: 1; transform: translateY(110%) skewY(6deg); }
.ready .hero-title [data-in] { transform: none; }
.hero-stage[data-in] { transform: scale(.82) rotate(-8deg); }
.ready .hero-stage[data-in] { transform: none; transition: opacity 1s ease .3s, transform 1.4s var(--spring) .3s; }

/* ---------- ticker: two tapes crossing like the face-off X ---------- */
.ticker { position: relative; z-index: 3; height: clamp(130px, 13vw, 200px); margin-top: clamp(-40px, -2.5vw, -20px); pointer-events: none; overflow: hidden; }
.tape { position: absolute; left: -4%; right: -4%; top: 50%; overflow: hidden; }
.tape-run { display: flex; width: max-content; }
.tape-run > div { display: flex; align-items: center; flex: none; animation: tick calc(60s * var(--tick-k, 1)) linear infinite; }
.tape-front { background: var(--ball); color: var(--ink); padding: clamp(12px, 1.3vw, 20px) 0; transform: translateY(-50%) rotate(-2.6deg); box-shadow: 0 24px 60px -24px rgba(0, 174, 239, .6); }
.tape-back { background: var(--night-3); color: var(--chalk-3); padding: clamp(9px, 1vw, 15px) 0; border-block: 1px solid var(--chalk-faint); transform: translateY(-50%) rotate(2.4deg); }
.tape-back .tape-run > div { animation-direction: reverse; animation-duration: calc(80s * var(--tick-k, 1)); }
.ticker span { font-weight: 900; font-stretch: 125%; font-size: clamp(22px, 2.9vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; padding: 0 .55em; }
.tape-back span { font-size: clamp(15px, 1.7vw, 26px); }
.tape-front span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.ticker i { width: clamp(11px, 1.1vw, 17px); height: clamp(11px, 1.1vw, 17px); border-radius: 50%; background: currentColor; flex: none; }
.tape-back i { width: 8px; height: 8px; background: var(--ball); }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------- sections ---------- */
.sec { position: relative; padding: clamp(80px, 11vw, 160px) var(--gutter) 0; }
.sec-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px clamp(18px, 2.4vw, 36px); padding-bottom: clamp(20px, 2.4vw, 32px); margin-bottom: clamp(28px, 3.4vw, 48px); }
.sec-num { position: relative; font-weight: 900; font-stretch: 125%; font-size: clamp(60px, 8.6vw, 148px); line-height: .78; letter-spacing: -.04em; user-select: none; }
.sec-num-o { color: transparent; -webkit-text-stroke: 1.5px rgba(243, 244, 239, .26); }
.sec-num-f { position: absolute; inset: 0; color: var(--ball); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-out) .25s; }
.sec-head.in .sec-num-f { clip-path: inset(64% 0 0 0); }
.sec-titles { min-width: 0; }
.sec-titles .mono { color: var(--chalk-3); margin: 0 0 10px; }
.sec-titles h2 { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(32px, 4.9vw, 82px); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; }
.sec-titles h2 em { color: var(--ball); }
.chalk { position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--chalk-faint); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out); }
.sec-head.in .chalk { transform: none; }
[data-reveal]:not(.tile) { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out) calc(var(--i, 0) * 70ms), transform 1.1s var(--ease-out) calc(var(--i, 0) * 70ms); }
[data-reveal].in:not(.tile) { opacity: 1; transform: none; }

/* ---------- tiles ---------- */
.tile { position: relative; display: flex; flex-direction: column; min-width: 0; opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 65ms), transform 1s var(--ease-out) calc(var(--i, 0) * 65ms); }
.tile.in { opacity: 1; transform: none; }
.tile-media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--plate); isolation: isolate; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), box-shadow .5s; }
.tile-plate { position: absolute; inset: 0; display: grid; place-items: center; }
.tile-plate img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform .9s var(--ease-out), opacity .4s; }
.tile-plate img.swap { animation: swapIn .5s var(--ease-out); }
@keyframes swapIn { from { opacity: .2; transform: scale(.94) translateX(6%); } }
.tile-media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .4s; pointer-events: none; }
.tile-media:hover { box-shadow: 0 36px 70px -36px rgba(0, 174, 239, .7); }
.tile-media:hover::after { box-shadow: inset 0 0 0 1.5px var(--ball); }
.tile-media:hover .tile-plate img { transform: scale(1.07) translateY(-2%); }
.tile-go { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ball); color: var(--ink); transform: scale(0) rotate(-120deg); transition: transform .5s var(--spring); box-shadow: 0 8px 24px -6px var(--ball-glow); }
.tile-go svg { width: 18px; height: 18px; }
.tile-media:hover .tile-go, .tile-media:focus-visible .tile-go { transform: none; }
.tile.is-out .tile-plate img { opacity: .45; filter: grayscale(1); }
.swatches { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.sw { width: 34px; height: 34px; border-radius: 50%; background: var(--plate); overflow: hidden; box-shadow: 0 0 0 1px var(--chalk-faint); transition: box-shadow .25s, transform .3s var(--spring); flex: none; }
.sw img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.35); }
.sw:hover { transform: translateY(-2px); }
.sw.on { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ball); }
.sw-more { font-family: var(--mono); font-size: 10px; color: var(--chalk-3); padding: 0 4px; }
/* A narrow card shows three styles and counts the rest. */
.more-t, .sw-more-t { display: none; }
.tile-s .sw:nth-child(n + 4) { display: none; }
.tile-s .more-w { display: none; }
.tile-s .more-t, .tile-s .sw-more-t { display: inline; }
.tile-info { padding-top: 12px; display: grid; gap: 4px; }
.swatches + .tile-info { padding-top: 10px; }
.tile-meta { margin: 0; font-family: var(--mono); font-stretch: 87.5%; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-3); }
.tile-info h3 { margin: 0; font-weight: 600; font-size: 15.5px; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-info h3 a:hover { color: var(--ball-hi); }
.tile-price { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; }
.tile-price b { font-weight: 900; font-stretch: 112%; font-size: 17px; }
.tile-price small { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; color: var(--chalk-3); letter-spacing: .06em; }
.tile-price s { color: var(--chalk-3); font-size: 14px; }

/* ---------- drop ---------- */
.drop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 1.8vw, 28px); }
/* The first two collections, the pop-up and the season's, sit in small cards so more of each shows at
   once. `--cols` is how many go across a wide screen, set from the count so the rows come out whole.
   Every other column of the season's grid sits a little lower. */
.sec-drop .drop-grid, .ltd-grid { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 36px) clamp(12px, 1.4vw, 22px); }
.sec-drop { padding-bottom: 28px; }
.tile-s .tile-media { border-radius: 16px; }
.tile-s .tile-info { padding-top: 10px; }
.tile-s .tile-info h3 { font-size: 14px; }
.tile-s .tile-price b { font-size: 15.5px; }
.tile-s .tile-go { right: 9px; bottom: 9px; width: 36px; height: 36px; }
.tile-s .tag { left: 9px; top: 9px; }
@media (min-width: 1000px) {
  .sec-drop .drop-grid:not([style*="--cols:5"]) .tile.in:nth-child(even), .sec-drop .drop-grid[style*="--cols:5"] .tile.in:nth-child(5n + 2), .sec-drop .drop-grid[style*="--cols:5"] .tile.in:nth-child(5n + 4) { transform: translateY(clamp(16px, 1.9vw, 28px)); }
}

/* ---------- fit ---------- */
.fit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--chalk-line); }
.fit-list li { border-bottom: 1px solid var(--chalk-line); }
.fit-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto 56px; align-items: center; gap: 18px; padding: clamp(14px, 1.8vw, 26px) 0; isolation: isolate; }
.fit-row::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--ball); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-out); }
.fit-idx { color: var(--chalk-3); transition: color .3s; }
.fit-name { font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 5.6vw, 96px); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; transition: transform .6s var(--ease-out), color .3s; }
.fit-mini { display: none; gap: 6px; }
.fit-mini img { width: 44px; height: 44px; border-radius: 10px; background: var(--plate); object-fit: contain; padding: 3px; }
.fit-count { color: var(--chalk-3); font-size: 12px; transition: color .3s; }
.fit-go { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--chalk-faint); display: grid; place-items: center; transition: transform .5s var(--spring), border-color .3s, background .3s, color .3s; }
.fit-go svg { width: 22px; height: 22px; }
.fit-row:hover::before, .fit-row:focus-visible::before { transform: scaleY(1); }
.fit-row:hover .fit-name, .fit-row:focus-visible .fit-name { color: var(--ink); transform: translateX(clamp(8px, 1.4vw, 24px)); }
.fit-row:hover .fit-idx, .fit-row:hover .fit-count { color: rgba(5, 7, 10, .7); }
.fit-row:hover .fit-go { background: var(--ink); color: var(--ball); border-color: var(--ink); transform: rotate(-45deg); }
.fit-float { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; width: 0; height: 0; }
.fit-float img { position: absolute; max-width: none; width: 190px; height: 230px; object-fit: contain; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(0); transition: opacity .3s, transform .5s var(--spring); }
.fit-float.on img { opacity: 1; }
.fit-float.on img:nth-child(1) { transform: translate(-128%, -60%) scale(1) rotate(-10deg); transition-delay: .04s; }
.fit-float.on img:nth-child(2) { transform: translate(-50%, -72%) scale(1) rotate(2deg); }
.fit-float.on img:nth-child(3) { transform: translate(28%, -58%) scale(1) rotate(11deg); transition-delay: .08s; }
.fit-float img[hidden] { display: none; }

/* ---------- shipping line ---------- */
/* When a collection ships on its own clock (the pop-up, the holiday pieces), the line says so: on the
   collection's section and page, on its pieces' product pages and on those pieces in the bag. */
.ship { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid rgba(0, 174, 239, .5); background: rgba(0, 174, 239, .09); color: var(--chalk); font-family: var(--mono); font-stretch: 87.5%; font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ship svg { width: 16px; height: 16px; flex: none; color: var(--ball); }
.sec-head > .ship { grid-column: 2; justify-self: start; }
.cv-ship { margin-top: 16px; }
.pv-ship { align-self: flex-start; margin: -8px 0 0; }
.bag-ship { margin-top: 8px; padding: 5px 10px 5px 8px; gap: 7px; font-size: 9.5px; }
.bag-ship svg { width: 13px; height: 13px; }

/* ---------- alternate logos: shop by logo ---------- */
.alt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 24px); }
/* The wall: every logo in a round window, the club's own print cut from one of the store's photos.
   Picking one fills the grid below with the pieces that carry it. */
.wall { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(10px, 1.25vw, 18px); }
.disc { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border-radius: 50%; transition: transform .35s var(--spring); }
.disc img { width: 100%; height: 100%; border-radius: 50%; clip-path: circle(50%); object-fit: cover; background: #efefef; transition: opacity .3s; }
.disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transition: box-shadow .25s; }
.disc[aria-pressed="true"]::after { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--ball); }
.wall:has([aria-pressed="true"]) .disc[aria-pressed="false"] img, .cv-wall:has(.disc:not(.disc-all)[aria-pressed="true"]) .disc[aria-pressed="false"] img { opacity: .5; }
@media (hover: hover) {
  .disc:hover { transform: translateY(-3px); }
  .wall .disc[aria-pressed="false"]:hover img, .cv-wall .disc[aria-pressed="false"]:hover img { opacity: 1; }
}
.disc-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* A picture that did not load leaves the logo's name in its window. */
.disc.no-art { border: 1.5px solid var(--chalk-faint); background: var(--night-3); }
.disc.no-art .disc-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; padding: 0 6px; font-family: var(--mono); font-stretch: 87.5%; font-size: 9.5px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.alt-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: clamp(16px, 1.8vw, 24px) 0 clamp(18px, 2vw, 28px); padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--chalk-line); }
.alt-now p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; color: var(--chalk-3); }
.alt-now b, .cv-logos b { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 17px; line-height: 1.2; letter-spacing: .02em; color: var(--chalk); }
.alt-now .chip { flex: none; white-space: nowrap; }
.alt-now .chip[hidden] { display: none; }
/* The same logos on the Alternate Logos collection page, as a filter. */
.cv-logos { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--chalk-line); }
.cv-logos > .mono { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; color: var(--chalk-3); }
/* One row while it fits (`--n` is how many there are), two below that, and a row to swipe on a phone. */
.cv-wall { display: grid; grid-template-columns: repeat(var(--n, 21), minmax(0, 56px)); gap: 9px; padding: 6px 0; }
@media (max-width: 1420px) { .cv-wall { grid-template-columns: repeat(11, minmax(0, 56px)); } }
.disc-all { border: 1.5px solid var(--chalk-faint); color: var(--chalk); transition: background .2s, color .2s, border-color .2s, transform .35s var(--spring); }
.disc-all[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }
.disc-all[aria-pressed="true"]::after { box-shadow: none; }

/* ---------- limited-time pop-up ---------- */
/* The live light: the ball, by the pop-up's name in the nav and in its header. It breathes in the
   header only, and only while the section is on screen (opacity, so nothing repaints). */
.live { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 10px var(--ball-glow); vertical-align: 1px; }
.sec-ltd .live { animation: live 1.8s ease-in-out infinite; }
html.ltd-off .sec-ltd .live { animation-play-state: paused; }
@keyframes live { 50% { opacity: .25; } }
/* The logo chooser: one logo for every piece of the pop-up. It rides under the nav while its pieces
   are on screen, so the choice is always within reach. */
.logo-bar { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 4; display: flex; align-items: center; gap: 16px; width: max-content; max-width: 100%; min-height: 58px; padding: 6px 7px 6px 20px; margin-bottom: clamp(22px, 2.6vw, 36px); border-radius: 999px; background: rgba(10, 14, 18, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--chalk-faint); }
.logo-bar[hidden] { display: none; }
.logo-bar-label { display: flex; gap: 10px; margin: 0; color: var(--chalk-3); white-space: nowrap; }
.logo-bar-label b { display: none; color: var(--chalk); font-weight: 400; }
.logo-chips { display: flex; align-items: center; gap: 6px; min-width: 0; }
.logo-chip { padding: 0 16px 0 4px; gap: 9px; white-space: nowrap; }
.logo-chip.no-art { padding-left: 16px; }
.logo-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ball); }
/* A logo's picture: a square of the store's own photo of it, shown whole in a round window. */
.logo-art { width: 36px; height: 36px; flex: none; border-radius: 50%; clip-path: circle(50%); object-fit: cover; background: #efefef; }
.logo-chips > i { width: 120px; height: 44px; border-radius: 999px; background: rgba(243, 244, 239, .06); }
.logo-err { font-size: 14px; color: var(--chalk-2); }
/* In a collection view the chooser sits with the other tools; it has no long page to ride down. */
.cv .logo-bar { position: static; margin: 18px 0 0; }
/* The pieces, in small cards (sized with the season's grid, above): one row on a wide screen, three
   across on a tablet, and a row to swipe on a phone, so the chooser and the pieces it changes share
   the screen. */
.ltd-grid { display: grid; }
.tile-s .ltd-cycle { gap: 9px; }
.tile-s .ltd-dots { gap: 5px; }
.tile-s .ltd-dot { width: 22px; height: 22px; }
/* The colour line under a pop-up piece's photo. Its height is kept before the colours arrive. */
.ltd-colors { display: flex; align-items: center; min-height: 44px; margin-top: 4px; }
.ltd-colors + .tile-info { padding-top: 2px; }
.ltd-color { min-width: 0; color: var(--chalk-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltd-cycle { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; height: 44px; text-align: left; }
.ltd-dots { display: flex; gap: 7px; flex: none; }
.ltd-dot { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--plate); box-shadow: 0 0 0 1px var(--chalk-faint); transition: box-shadow .25s, transform .3s var(--spring); }
.ltd-dot img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.5); }
.ltd-dot.on { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ball); }
.ltd-cycle:hover .ltd-dot:not(.on) { transform: translateY(-1px); }
.ltd-cycle:hover .ltd-color { color: var(--chalk-2); }

/* ---------- make it yours ---------- */
.yours-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.jersey { position: relative; max-width: 540px; width: 100%; justify-self: center; margin: 0; }
.jersey::before { content: ''; position: absolute; inset: 6% 2% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 174, 239, .2), transparent); filter: blur(12px); z-index: -1; }
.j-frame { position: relative; }
.j-stage { position: relative; transition: opacity .18s ease, transform .18s ease; }
.jersey.swap .j-stage, .jersey.swap .j-photo, .jersey.swap .j-loupe, .jersey.swap .j-mark { opacity: 0; transform: translateY(6px) scale(.985); }
/* A piece the kit can't draw (the backpack): its own photo on a white plate, with a patch of its plain
   fabric over the sample number and the typed number in its place. The kit's drawing stays in the
   frame, hidden, so the frame keeps its size. Everything on the plate is sized from the plate. */
.j-photo { position: absolute; inset: 0; display: none; place-items: center; transition: opacity .18s ease, transform .18s ease; }
.jersey.is-photo .j-photo { display: grid; }
.jersey.is-photo .j-stage { visibility: hidden; }
.j-shot { position: relative; display: block; width: 78%; aspect-ratio: 1; border-radius: 9%; overflow: hidden; background: #fff; container-type: inline-size; }
.j-shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-patch { position: absolute; background-repeat: no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.j-num { position: absolute; transform: translate(-50%, -50%); font-weight: 500; font-stretch: 62%; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.j-loupe .j-shot { position: absolute; width: 480%; left: calc(50% - var(--fx) * 480%); top: calc(50% - (var(--fy) - .042) * 480%); border-radius: 0; }
.j-stage > svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Reveal: the outline draws in like chalk, then the fabric fills. */
.j-stage .ak-outline { stroke: var(--chalk-2); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 1; transition: stroke-dashoffset 1.8s var(--ease-out), opacity 1s 1.6s; }
.j-stage .ak > g > :not(.ak-outline) { opacity: 0; transition: opacity 1.1s .8s; }
.jersey.in .j-stage .ak-outline { stroke-dashoffset: 0; opacity: .35; }
.jersey.in .j-stage .ak > g > :not(.ak-outline) { opacity: 1; }
.j-mark { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--ball); box-shadow: inset 0 0 0 1px rgba(5, 7, 10, .5), 0 0 0 1.5px rgba(5, 7, 10, .6), 0 0 18px rgba(0, 174, 239, .45); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .5s 1.8s, transform .18s ease; }
.j-loupe { position: absolute; right: -11%; bottom: 4%; width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #05070a; border: 2px solid var(--ball); box-shadow: 0 0 0 6px rgba(0, 174, 239, .12), 0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(0, 174, 239, .28); opacity: 0; transform: scale(.85); transition: opacity .6s 2s, transform .6s 2s var(--spring), left .3s, right .3s; }
.j-loupe.on-left { right: auto; left: -11%; }
.j-loupe.on-top { bottom: auto; top: 0; }
.j-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .6s 2s; }
.j-link line { stroke: var(--ball); stroke-width: 1.25; stroke-dasharray: 3 4; }
.jersey.in .j-link { opacity: .8; }
.jersey.swap .j-link { opacity: 0; transition-delay: 0s; }
.j-loupe > svg { width: 100%; height: 100%; display: block; }
.jersey.in .j-mark { opacity: 1; }
.jersey.in .j-loupe { opacity: 1; transform: none; }
.jersey.in.swap .j-loupe { opacity: 0; }
.j-cap { margin: 14px 0 0; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); }
.yours-copy { display: grid; gap: 22px; max-width: 520px; }
.yours-lede { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--chalk-2); }
.yours-copy .field input { height: 64px; font-weight: 800; font-stretch: 112%; font-size: 24px; text-transform: uppercase; letter-spacing: .06em; }
.yours-copy .field-num { max-width: 140px; }
.yours-picks { display: grid; gap: 10px; margin-top: 6px; }
.pick { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; border: 1px solid var(--chalk-line); background: rgba(243, 244, 239, .025); transition: border-color .3s, background .3s; }
.pick-plate { width: 64px; height: 64px; border-radius: 12px; background: var(--plate); display: grid; place-items: center; }
.pick-plate img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.pick b { display: block; font-weight: 650; font-size: 15px; line-height: 1.3; }
.pick small { color: var(--chalk-3); }
.pick svg { width: 20px; height: 20px; color: var(--ball); transition: transform .35s var(--spring); }
.pick:hover, .pick.is-on { border-color: var(--ball); background: rgba(0, 174, 239, .06); }
.pick:hover svg { transform: translateX(5px); }
/* More than four pieces: compact rows, in two columns where there is room, titles held to two lines. */
.yours-picks.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.yours-picks.is-many .pick { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; }
.yours-picks.is-many .pick-plate { width: 52px; height: 52px; border-radius: 10px; }
.yours-picks.is-many .pick b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yours-picks.is-many .pick > svg { display: none; }

/* ---------- locker ---------- */
.tabs { position: relative; display: flex; gap: clamp(8px, 2vw, 32px); padding-bottom: 22px; margin-bottom: clamp(26px, 3vw, 44px); border-bottom: 1px solid var(--chalk-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font-weight: 850; font-stretch: 118%; font-size: clamp(17px, 1.8vw, 26px); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk-3); padding: 6px 4px; transition: color .3s; }
.tab:hover { color: var(--chalk-2); }
.tab[aria-selected="true"] { color: var(--chalk); }
.tab-ball { position: absolute; left: -6px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 16px var(--ball-glow); transition: transform .45s var(--ease-out); }
.locker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 40px) clamp(14px, 1.6vw, 24px); }
.locker-foot { margin-top: clamp(24px, 3vw, 40px); display: flex; justify-content: flex-end; }

/* ---------- regions ---------- */
.regions { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.region-list { display: grid; border-top: 1px solid var(--chalk-line); }
.region-btn { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--chalk-line); transition: background .3s; }
.region-btn::before { content: ''; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--chalk-faint); transition: background .3s, border-color .3s, box-shadow .3s, transform .4s var(--spring); }
.region-name { font-weight: 900; font-stretch: 125%; font-size: clamp(19px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; color: var(--chalk-2); transition: color .3s; }
.region-where { grid-column: 1; color: var(--chalk-3); font-size: 9.5px; }
.region-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--chalk-3); font-size: 12px; }
.region-btn:hover .region-name { color: var(--chalk); }
.region-btn[aria-selected="true"] .region-name { color: var(--ball); }
.region-btn[aria-selected="true"]::before { background: var(--ball); border-color: var(--ball); box-shadow: 0 0 14px var(--ball-glow); transform: scale(1.2); }
/* A long list (the store has eleven) packs tighter beside the map. */
@media (min-width: 901px) {
  .region-list.is-long { --rn: clamp(17px, 1.5vw, 22px); }
  .region-list.is-long .region-btn { padding-block: 10px; }
  .region-list.is-long .region-btn::before { top: calc(10px + var(--rn) * .55 - 5px); }
  .region-list.is-long .region-name { font-size: var(--rn); }
}
.map { position: relative; width: 100%; }
.map canvas { display: block; width: 100%; height: auto; }
#map-live { position: absolute; inset: 0; height: 100%; pointer-events: none; }
.map-pin { position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%; }
/* On a touch screen, and wherever the map is stacked above the list, the pins are marks and not
   controls: several sit closer together than a fingertip, so a 44px target on one would take its
   neighbour's taps. The rows of the list are the controls there. (advnc.js disables the buttons under
   the same condition.) */
@media (max-width: 900px), (pointer: coarse) { .map-pin { pointer-events: none; } }
.map-pin span { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translate(-50%, 6px); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: var(--chalk); color: var(--ink); opacity: 0; transition: opacity .3s, transform .4s var(--spring); pointer-events: none; }
.map-pin.on span, .map-pin:hover span, .map-pin:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.map-pin.pin-r span { left: auto; right: 30%; transform: translate(0, 6px); }
.map-pin.pin-l span { left: 30%; transform: translate(0, 6px); }
.map-pin.pin-r.on span, .map-pin.pin-r:hover span, .map-pin.pin-l.on span, .map-pin.pin-l:hover span { transform: none; }
/* PNW's label sits to the left of its pin: Seattle's pin is up and to its right, where a west-edge
   pin's label goes, and the label would cover it. A phone's map has no room beside the pin, so
   there the label goes under it, out over the water. */
.map-pin.pin-w span { left: auto; right: calc(50% + 4px); transform: translate(0, 6px); }
.map-pin.pin-w.on span, .map-pin.pin-w:hover span, .map-pin.pin-w:focus-visible span { transform: none; }
@media (max-width: 480px) { .map-pin.pin-w span { right: calc(50% - 7px); bottom: auto; top: calc(50% + 12px); } }
/* The pop-out: one card per region thrown out of the lit pin. .pop is the fixed hit area; only
   .pop-face moves on hover. */
.pop { position: absolute; left: 50%; top: 50%; z-index: 4; width: clamp(176px, 21%, 212px); display: block; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--pop-fx, 0px), var(--pop-fy, 0px)) scale(.16);
  transition: transform .2s ease-in, opacity .18s ease-in; }
.pop.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) translate(0px, 0px) scale(1); transition: transform .6s var(--spring), opacity .22s ease-out; }
.pop.swap { transition: none; }
.map.pop-off .pop, .map.pop-off .pop-lead { display: none; }
.pop-face { display: block; border-radius: 18px; overflow: hidden; background: var(--chalk); box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.pop-shot { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; }
.pop-shot img { position: absolute; inset: 8% 14%; width: 72%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.pop-shot img[hidden] { display: none; }
.pop-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 11px 12px 12px 16px; background: var(--ink); color: var(--chalk); }
.pop-name { grid-column: 1; font-weight: 900; font-stretch: 108%; font-size: 16px; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.pop-count { grid-column: 1; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-3); }
.pop-go { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ball); color: var(--ink); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.pop-go svg { width: 16px; height: 16px; }
.pop:hover .pop-face, .pop:focus-visible .pop-face { transform: translateY(-5px); box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .9), 0 0 0 2px var(--ball), 0 0 34px rgba(0, 174, 239, .3); }
.pop:hover .pop-go { transform: translateX(3px); }
.pop-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.pop-lead line { stroke: var(--ball); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: 0; transition: opacity .2s; }
.map.pop-on .pop-lead line { opacity: .75; transition-delay: .25s; }
.map-pin.pin-national span { background: var(--ball); }
.region-shop { grid-column: 1 / -1; margin-top: clamp(10px, 2vw, 28px); }
.region-shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--chalk-line); }
.region-shop-head .mono { color: var(--chalk-3); margin: 0; }
.region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(14px, 1.6vw, 24px); }

/* ---------- footer ---------- */
.foot { position: relative; margin-top: clamp(100px, 13vw, 190px); padding: clamp(60px, 7vw, 100px) var(--gutter) 28px; border-top: 1px solid var(--chalk-line); overflow: hidden; background: linear-gradient(180deg, var(--night), #070b0f); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(36px, 5vw, 80px); }
.foot-cta .mono { color: var(--chalk-3); margin: 0 0 18px; }
.foot-cta h2 { margin: 0 0 30px; font-weight: 900; font-stretch: 125%; font-size: clamp(40px, 5.2vw, 86px); line-height: .88; letter-spacing: -.035em; text-transform: uppercase; }
.foot-cta h2 em { color: var(--ball); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.foot-cols h4 { margin: 0 0 14px; color: var(--chalk-3); font-weight: 400; }
.foot-cols a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--chalk-2); transition: color .2s, transform .3s var(--ease-out); overflow-wrap: anywhere; }
.foot-cols a:hover { color: var(--ball-hi); transform: translateX(3px); }
.foot-word { margin: clamp(50px, 7vw, 100px) calc(-1 * var(--gutter)) 0; text-align: center; line-height: .74; user-select: none; }
.foot-word span { display: inline-block; font-weight: 900; font-stretch: 125%; font-size: 21.5vw; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 244, 239, .22); background: linear-gradient(0deg, rgba(0, 174, 239, .95) calc(var(--fy, 0) * 70%), transparent calc(var(--fy, 0) * 70%)); -webkit-background-clip: text; background-clip: text; translate: 0 calc((1 - var(--fy, 0)) * 16%); }
.foot-base { display: flex; padding-top: 22px; margin-top: 24px; border-top: 1px solid var(--chalk-line); }
.ss { display: inline-flex; align-items: center; gap: 12px; color: var(--chalk-3); transition: color .25s; }
.ss img { display: block; width: auto; height: 19px; opacity: .85; transition: opacity .25s; }
.ss:hover { color: var(--chalk-2); }
.ss:hover img { opacity: 1; }

/* ---------- field meter (desktop) ---------- */
.fmeter { position: fixed; right: clamp(10px, 1.4vw, 22px); top: 50%; z-index: 20; width: 24px; height: min(58vh, 540px); transform: translate(12px, -50%); opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s var(--ease-out); }
.fmeter.show { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
html.locked .fmeter { opacity: 0; pointer-events: none; }
.field-pitch { position: absolute; inset: 0; border: 1.5px solid var(--chalk-faint); border-radius: 5px; }
.field-pitch .mid { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--chalk-faint); }
.field-pitch .crease { position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 1.5px solid var(--chalk-faint); }
.field-pitch .c1 { top: 13%; }
.field-pitch .c2 { bottom: 13%; }
.field-pitch .goal { position: absolute; left: 50%; width: 8px; height: 5px; margin-left: -4px; border: 1.5px solid var(--chalk-faint); }
.field-pitch .g1 { top: calc(13% + 2px); border-top: 0; }
.field-pitch .g2 { bottom: calc(13% + 2px); border-bottom: 0; transition: border-color .4s, box-shadow .4s; }
.fmeter.scored .g2 { border-color: var(--ball); box-shadow: 0 0 12px var(--ball-glow); }
.field-mark { position: absolute; right: 100%; top: calc(var(--at, 0) * 100%); transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; height: 18px; padding-right: 8px; }
.field-mark::after { content: ''; width: 8px; height: 1.5px; background: var(--chalk-faint); transition: background .3s, width .3s; }
/* The label sits outside the button's box, so the invisible label doesn't take hover from the page beside the rail. */
.field-mark span { position: absolute; right: calc(100% + 8px); top: 50%; color: var(--chalk-2); padding: 3px 8px; border-radius: 999px; background: rgba(10, 14, 18, .9); border: 1px solid var(--chalk-line); opacity: 0; transform: translate(6px, -50%); transition: opacity .3s, transform .3s; white-space: nowrap; pointer-events: none; }
.field-mark:hover span { opacity: 1; transform: translate(0, -50%); }
.field-mark.on::after { background: var(--ball); width: 14px; }
.field-ball { position: absolute; left: 50%; top: calc(var(--p, 0) * (100% - 12px)); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #b6ecff, var(--ball) 55%, #0079ab); box-shadow: 0 0 16px var(--ball-glow); transition: top .18s linear; }
/* Scored (the page is at its end): the ball's glow swells and settles, on a loop. The two glows are
   fixed shadows on two layers that trade opacity, so the loop runs on the compositor. Animating the
   shadow itself repainted the page 120 times a second for as long as it sat at the bottom. */
.field-ball::before, .field-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.field-ball::before { box-shadow: 0 0 16px var(--ball-glow); }
.field-ball::after { box-shadow: 0 0 26px var(--ball); }
.fmeter.scored .field-ball { box-shadow: none; }
.fmeter.scored .field-ball::before { opacity: 1; animation: scored-rest 1.2s ease-in-out infinite; }
.fmeter.scored .field-ball::after { animation: scored 1.2s ease-in-out infinite; }
@keyframes scored-rest { 50% { opacity: 0; } }
@keyframes scored { 50% { opacity: 1; } }

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: var(--nav-h) 0 0; z-index: 44; background: rgba(2, 3, 5, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.scrim.open { opacity: 1; visibility: visible; transition: opacity .35s; }
.view { position: fixed; inset: var(--nav-h) 0 0; z-index: 40; background: var(--night); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(28px); transition: opacity .3s ease, transform .55s var(--ease-out), visibility 0s .55s; }
.view.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .55s var(--ease-out), visibility 0s; }
.view-p { z-index: 41; }
.view-s { z-index: 42; }
.view-close { position: fixed; top: calc(var(--nav-h) + 14px); right: clamp(12px, 2vw, 28px); z-index: 5; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(17, 23, 28, .9); border: 1px solid var(--chalk-faint); transition: background .25s, color .25s, transform .4s var(--spring); }
.view-close svg { width: 20px; height: 20px; }
.view-close:hover { background: var(--ball); color: var(--ink); transform: rotate(90deg); }
.skeleton { height: 120px; border-radius: 14px; margin-top: 22px; background: linear-gradient(100deg, rgba(243, 244, 239, .04) 30%, rgba(243, 244, 239, .09) 50%, rgba(243, 244, 239, .04) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton.short { height: 58px; width: 70%; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* collection */
.cv { padding: clamp(36px, 5vw, 70px) var(--gutter) 120px; }
.cv-head { margin-bottom: clamp(28px, 3vw, 44px); }
.cv-head > .mono { color: var(--chalk-3); margin: 0 0 12px; }
.cv-title { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(44px, 8.4vw, 150px); line-height: .84; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; animation: rise .8s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
.cv-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: clamp(24px, 3vw, 36px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; }
.cv-jump::-webkit-scrollbar { display: none; }
.cv-jump a { flex: none; font-weight: 650; font-stretch: 105%; font-size: 14px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--chalk-line); color: var(--chalk-2); transition: border-color .2s, color .2s, background .2s; }
.cv-jump a:hover { border-color: var(--chalk-faint); color: var(--chalk); }
.cv-jump a.on { background: var(--ball); color: var(--ink); border-color: var(--ball); }
.cv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--chalk-line); }
.sort { display: flex; align-items: center; gap: 10px; color: var(--chalk-3); }
.sort select { appearance: none; height: 44px; padding: 0 38px 0 16px; border-radius: 999px; border: 1.5px solid var(--chalk-faint); background: transparent; font-family: var(--display); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--chalk); background-image: linear-gradient(45deg, transparent 50%, var(--chalk-2) 50%), linear-gradient(135deg, var(--chalk-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sort select option { background: var(--night-2); }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 24px); }

/* product */
.pv { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); min-height: 100%; }
.pv-gallery { position: sticky; top: 0; height: calc(100svh - var(--nav-h)); background: var(--night); display: flex; flex-direction: column; justify-content: center; padding: 24px var(--gutter) 24px; overflow: hidden; }
.pv-gallery::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, rgba(0, 174, 239, .12), transparent 70%); pointer-events: none; }
.pv-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.pv-disc { position: relative; width: min(86%, 72vh); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 50px 120px -40px rgba(0, 174, 239, .45); animation: discIn .9s var(--spring); }
.pv-clip { display: grid; place-items: center; }
@keyframes discIn { from { transform: scale(.7); opacity: 0; } }
.pv-img { width: 80%; height: 80%; object-fit: contain; }
.pv-img.swap { animation: pvIn .7s var(--ease-out); }
@keyframes pvIn { from { opacity: 0; transform: translateX(8%) rotate(4deg) scale(.94); } }
.pv-thumbs { position: relative; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.pv-thumbs button { width: 62px; height: 62px; border-radius: 14px; background: var(--plate); overflow: hidden; box-shadow: 0 0 0 1px var(--chalk-faint); transition: box-shadow .25s, transform .3s var(--spring); }
.pv-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.pv-thumbs button:hover { transform: translateY(-3px); }
.pv-thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ball); }
.pv-detail { padding: clamp(40px, 5vw, 72px) var(--gutter) 90px clamp(20px, 3vw, 44px); max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.pv-detail > * { margin: 0; }
.pv-crumb { color: var(--chalk-3); }
.pv-title { font-weight: 900; font-stretch: 118%; font-size: clamp(30px, 3.3vw, 52px); line-height: .96; letter-spacing: -.03em; text-transform: uppercase; margin-top: -10px !important; animation: rise .7s var(--ease-out); }
.pv-price { font-weight: 900; font-stretch: 112%; font-size: 26px; display: flex; align-items: baseline; gap: 10px; }
.pv-price s { font-size: 18px; color: var(--chalk-3); font-weight: 600; }
.opt { display: grid; gap: 12px; }
.opt-label { color: var(--chalk-3); margin: 0; display: flex; gap: 10px; }
.opt-label b { color: var(--chalk); font-weight: 400; }
.pv-personal { display: grid; gap: 16px; padding: 20px; border-radius: 20px; border: 1px solid rgba(0, 174, 239, .35); background: linear-gradient(160deg, rgba(0, 174, 239, .09), rgba(0, 174, 239, .02)); }
.pv-personal-h { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 112%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.pv-buy { display: flex; gap: 12px; align-items: center; }
.btn-add { flex: 1; min-width: 0; height: 58px; }
.btn-add.done { background: var(--chalk); color: var(--ink); }
.btn-add svg { width: 20px; height: 20px; }
.pv-viewbag { align-self: flex-start; padding: 0; margin-top: -8px !important; animation: rise .5s var(--ease-out); }
.pv-note { color: var(--chalk-3); }
.pv-notice { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 13px 16px; border: 1px solid var(--chalk-faint); border-radius: 14px; font-size: 14.5px; line-height: 1.45; color: var(--chalk-2); }
.pv-notice .dot { flex: none; transform: translateY(-1px); }
.pv-notice strong { color: var(--chalk); font-weight: 700; }
.opt-link { margin: -16px 0 -16px auto; padding: 16px 0 16px 12px; color: var(--chalk); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ball); }
.opt-link:hover { color: var(--ball-hi); }
.pv-desc-body h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 800; font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--chalk); scroll-margin-top: 80px; }
.pv-desc { border-top: 1px solid var(--chalk-line); padding-top: 6px; }
.pv-desc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 800; font-stretch: 112%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.pv-desc summary::-webkit-details-marker { display: none; }
.pv-desc summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--ball); transition: transform .3s; }
.pv-desc[open] summary::after { transform: rotate(45deg); }
.pv-desc-body { color: var(--chalk-2); font-size: 15px; line-height: 1.6; }
.pv-desc-body img { max-width: 100%; height: auto; border-radius: 12px; }
/* Under each embedded video: the link the keyboard uses to watch it (the frame is out of the Tab order). */
.pv-watch { display: flex; width: max-content; max-width: 100%; min-height: 44px; margin: 2px 0 12px; font-family: var(--display); font-style: normal; line-height: 1.2; }
.pv-watch.is-centred { margin-inline: auto; }
.pv-watch svg { transform: rotate(-45deg); }
.pv-watch:hover svg { transform: rotate(-45deg) translateX(4px); }
.pv-desc-body ul { padding-left: 1.2em; }
.pv-desc-body table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pv-desc-body td, .pv-desc-body th { border: 1px solid var(--chalk-line); padding: 6px 8px; }

/* search */
.sv { padding: clamp(30px, 5vw, 70px) var(--gutter) 120px; max-width: 1500px; margin: 0 auto; }
.sv-box { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--chalk-faint); padding-bottom: 14px; transition: border-color .3s; margin-right: 56px; }
.sv-box:focus-within { border-color: var(--ball); }
.sv-box svg { width: clamp(24px, 3vw, 40px); height: auto; color: var(--ball); flex: none; }
.sv-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-weight: 850; font-stretch: 118%; font-size: clamp(26px, 4.4vw, 64px); letter-spacing: -.02em; text-transform: uppercase; }
.sv-box input::placeholder { color: rgba(243, 244, 239, .2); }
.sv-box input::-webkit-search-cancel-button { display: none; }
.sv-hints { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.sv-hints button { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--chalk-line); color: var(--chalk-2); transition: border-color .2s, color .2s; }
.sv-hints button:hover { border-color: var(--ball); color: var(--chalk); }
.sv-count { color: var(--chalk-3); margin: 18px 0 22px; min-height: 1.5em; }

/* bag drawer */
.drawer { position: fixed; top: var(--nav-h); right: 0; bottom: 0; z-index: 45; width: min(470px, 100vw); display: flex; flex-direction: column; background: var(--night-2); border-left: 1px solid var(--chalk-line); transform: translateX(104%); visibility: hidden; transition: transform .55s var(--ease-out), visibility 0s .55s; }
.drawer.open { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s; }
.bag-head { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 26px 24px 20px; border-bottom: 1px solid var(--chalk-line); }
.bag-head h2 { margin: 0; font-weight: 900; font-stretch: 125%; font-size: 30px; letter-spacing: -.03em; text-transform: uppercase; }
.bag-head .mono { color: var(--chalk-3); }
.bag-head .view-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; }
.bag-lines { flex: 1; overflow-y: auto; padding: 8px 24px; }
.bag-line { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--chalk-line); animation: rise .5s var(--ease-out); }
.bag-img { width: 78px; height: 94px; border-radius: 14px; background: var(--plate); display: grid; place-items: center; }
.bag-img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.bag-info h3 { margin: 0 0 3px; font-size: 15px; font-weight: 650; line-height: 1.3; }
.bag-info .mono { color: var(--chalk-3); margin: 0; }
.bag-attrs { margin: 5px 0 0; font-size: 13px; color: var(--ball-hi); }
.bag-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.bag-end b { font-weight: 900; font-stretch: 112%; }
.remove { color: var(--chalk-3); font-size: 9.5px; padding: 4px 0; transition: color .2s; }
.remove:hover { color: var(--warn); }
.bag-empty { height: 100%; min-height: 340px; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; color: var(--chalk-2); }
.bag-empty p { margin: 0; font-weight: 800; font-stretch: 112%; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.bounce { position: relative; width: 90px; height: 90px; }
.bounce::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 44px; height: 6px; margin-left: -22px; border-radius: 50%; background: rgba(0, 174, 239, .25); animation: shadow .9s ease-in infinite alternate; }
.bounce i { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #b6ecff, var(--ball) 55%, #0079ab); animation: hop .9s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
@keyframes hop { to { transform: translateY(58px) scale(1.08, .92); } }
@keyframes shadow { from { transform: scale(.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.bag-foot { padding: 20px 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--chalk-line); background: var(--night-2); display: grid; gap: 10px; }
.bag-sum { display: flex; justify-content: space-between; align-items: baseline; }
.bag-sum span { font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--chalk-2); }
.bag-sum b { font-weight: 900; font-stretch: 118%; font-size: 26px; }
.bag-foot .hint { margin: 0 0 6px; }

/* menu */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--night); overflow-y: auto; visibility: hidden; clip-path: circle(0 at calc(100% - var(--gutter) - 22px) 34px); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1), visibility 0s .75s; }
.menu.open { visibility: visible; clip-path: circle(150vmax at calc(100% - var(--gutter) - 22px) 34px); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.menu-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px clamp(24px, 4vw, 64px); padding: calc(var(--nav-h) + clamp(30px, 6vh, 70px)) var(--gutter) 80px; }
.menu-group h4 { margin: 0 0 16px; color: var(--ball); font-weight: 400; }
.menu-group a { display: flex; align-items: baseline; gap: 4px; padding: 4px 0; font-weight: 900; font-stretch: 118%; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: var(--chalk); opacity: 0; transform: translateY(24px); transition: color .25s, opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.menu.open .menu-group a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--g) * 60ms + var(--i) * 35ms); }
.menu-group a:hover { color: var(--ball); }

/* toast + shot */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px; border-radius: 999px; background: rgba(17, 23, 28, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--chalk-faint); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); transform: translate(-50%, 150%); transition: transform .55s var(--spring); }
.toast.show { transform: translate(-50%, 0); }
.toast-ball { width: 12px; height: 12px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 12px var(--ball-glow); flex: none; }
.toast span { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast button { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ball); color: var(--ink); font-weight: 800; font-stretch: 112%; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.shot { position: fixed; left: -9px; top: -9px; z-index: 80; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 32%, #c5f0ff, var(--ball) 52%, #0079ab); box-shadow: 0 0 22px var(--ball-glow); }
.shot-trail { background: var(--ball); box-shadow: none; filter: blur(1px); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .hero-pair .btn { padding: 0 20px; font-size: 12.5px; }
  .yours-picks.is-many { grid-template-columns: minmax(0, 1fr); }
  .fmeter { display: none; }
  .nav-meter { display: block; }
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .locker-grid, .region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .locker-grid .tile:nth-child(n + 7), .region-grid .tile:nth-child(n + 4) { display: none; }
  .alt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alt-grid:not(.is-logo) .tile:nth-child(n + 7), .alt-grid:not(.is-logo) .tile:nth-child(4):last-child { display: none; }
  .foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  .hero { justify-content: flex-start; }
  /* minmax(0, ...): the headline's lines don't wrap, and a plain 1fr track grew to hold them, so the
     whole hero ran wider than the screen and was cut off at its right edge. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { width: min(84vw, 460px); margin-top: 12px; }
  .hero-title { font-size: clamp(46px, 12.6vw, 104px); }
  .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions { grid-template-columns: minmax(0, 1fr); }
  .region-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; order: 2; }
  /* An odd number of regions: the last row runs the full width, not half of it beside a gap. */
  .region-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .map { order: 1; }
  .region-shop { order: 3; }
  .yours-grid { grid-template-columns: 1fr; }
  .yours-picks.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jersey { max-width: 400px; }
  .j-loupe { width: 36%; right: -2%; bottom: 2%; }
  .j-loupe.on-left { left: -2%; }
  .pv { grid-template-columns: 1fr; }
  .pv-gallery { position: relative; height: auto; padding: 18px var(--gutter) 0; }
  .pv-stage { aspect-ratio: 1; flex: none; }
  .pv-disc { width: 88%; }
  .pv-detail { padding: 26px var(--gutter) 120px; max-width: none; }
  .pv-buy { position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--gutter)) !important; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(5, 7, 10, 0), var(--night) 30%); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small cards below a wide screen: three across, nine of the season's pieces, the middle column lower. */
@media (max-width: 999px) {
  .sec-drop .drop-grid, .ltd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec-drop .drop-grid .tile:nth-child(n + 10) { display: none; }
}
@media (min-width: 641px) and (max-width: 999px) {
  .sec-drop .drop-grid .tile.in:nth-child(3n + 2) { transform: translateY(26px); }
}
@media (max-width: 640px) {
  .brand-sub, .icon-btn kbd { display: none; }
  /* The season's pieces on a phone: two across, eight of them, the right column lower. */
  .sec-drop .drop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-drop .drop-grid .tile:nth-child(n + 9) { display: none; }
  .sec-drop .drop-grid .tile.in:nth-child(even) { transform: translateY(24px); }
  /* The hero's buttons, one under another. */
  .hero-pair { flex: 1 1 100%; }
  /* "Alternate" is the longest word in any section title. On the narrowest phones the title shrinks
     just enough for it to fit beside the section number. */
  .sec-alt .sec-titles h2 { font-size: min(32px, calc((100vw - 140px) * .132)); }
  /* Shop by logo: the wall is two rows to swipe, and the collection page's row is one. */
  .wall { grid-template-columns: none; grid-template-rows: repeat(2, 64px); grid-auto-flow: column; grid-auto-columns: 64px; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter); scrollbar-width: none; }
  .wall::-webkit-scrollbar, .cv-wall::-webkit-scrollbar { display: none; }
  .cv-wall { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56px; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter); scrollbar-width: none; }
  .alt-now { margin-top: 8px; }
  .alt-now b, .cv-logos b { font-size: 15px; }
  /* Swatches a thumb can hit, under every card on a phone: three styles, each in a 44px square, and a
     count of the rest. */
  .sw:nth-child(n + 4), .more-w { display: none; }
  .more-t, .sw-more-t { display: inline; }
  .swatches { gap: 0; margin: 7px 0 -5px -5px; }
  .sw { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: visible; background: radial-gradient(circle, var(--plate) 16.5px, transparent 17px); box-shadow: none; }
  .sw::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; box-shadow: 0 0 0 1px var(--chalk-faint); pointer-events: none; }
  .sw.on { box-shadow: none; }
  .sw.on::before { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--ball); }
  .sw img { width: 34px; height: 34px; clip-path: circle(12.5px); }
  .sw-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  /* Tap areas of at least 44px on a phone. Where a control looks smaller than that, an unseen ::after
     carries its area out to 44px and nothing moves; no two areas overlap. The stepper in the bag, its
     Remove, the nav's Search, the locker's tabs, the search suggestions and the toast's button are done
     this way. The Size guide link's own padding is shifted up 4px so the size buttons under it keep
     theirs. */
  .icon-btn, .tab, .qty button, .toast button, .remove, .sv-hints button, .pv-viewbag { position: relative; }
  .icon-btn::after, .tab::after, .qty button::after, .toast button::after, .remove::after, .sv-hints button::after, .pv-viewbag::after, .bag-head .view-close::after { content: ''; position: absolute; }
  .icon-btn::after { inset: -1px -3px; }
  .tabs { padding-top: 3px; margin-top: -3px; }
  .tab::after { inset: -3px 0 -6px; }
  .tab-ball { pointer-events: none; }
  .pv-buy .qty button::after { inset: 0 -2px; }
  .qty-sm button::after { inset: -5px; }
  .toast button::after { inset: -3px 0; }
  .remove::after { inset: -11px -4px; }
  .sv-hints { row-gap: 10px; }
  .sv-hints button::after { inset: -6px 0; }
  .pv-viewbag::after { inset: -12px 0; }
  .bag-head .view-close::after { inset: -3px; }
  .opt-link { margin: -20px 0 -12px auto; padding: 20px 0 12px 12px; }
  /* The pop-up on a phone: its pieces in one row to swipe, and the chooser as three logo buttons with
     the chosen one named beside "Logo". */
  .ltd-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(40vw, 190px); gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scrollbar-width: none; }
  .ltd-grid::-webkit-scrollbar { display: none; }
  .ltd-grid > * { scroll-snap-align: start; }
  .logo-bar { position: static; width: auto; justify-content: space-between; gap: 10px; padding-left: 16px; }
  .logo-bar-label { flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
  .logo-bar-label b { display: block; }
  .logo-chip:not(.no-art) { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
  .logo-chip:not(.no-art) .logo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .logo-chips > i { width: 44px; }
  .logo-bar.is-text { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 24px; }
  .logo-bar.is-text .logo-bar-label b { display: none; }
  .logo-bar.is-text .logo-chips { flex-wrap: wrap; }
  .cv-grid .ltd-color, .sv .ltd-color { display: none; }
  .cv-grid .ltd-dots, .sv .ltd-dots { gap: 5px; }
  .yours-picks.is-many { grid-template-columns: minmax(0, 1fr); }
  .j-cap { min-height: 3.2em; }
  .brand-word { font-size: 19px; }
  .icon-btn { padding: 0 10px; }
  .hero { padding-top: calc(var(--nav-h) + 18px); }
  .hero-title .ln > span { display: inline; }
  .hero-title .ln { overflow: visible; white-space: normal; }
  .hero-title { font-size: 12.6vw; }
  .hero-title [data-in] { transform: none; opacity: 0; }
  .ready .hero-title [data-in] { opacity: 1; }
  .hero-ctas .btn { flex: 1; padding: 0 18px; font-size: 13.5px; }
    .stage-cap { gap: 10px; padding: 8px 8px 8px 14px; }
  .cap-idx { display: none; }
  .cap-title { max-width: 18ch; font-size: 13px; }
  .sec-head { grid-template-columns: auto minmax(0, 1fr); }
  .sec-head > .link-arrow, .sec-head > .ship { grid-column: 1 / -1; justify-self: start; }
  .sec-head > .ship { order: 1; }
  .sec-head > .link-arrow { order: 2; }
  .alt-grid .tile:nth-child(4):last-child { display: flex; }
  .alt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-num { font-size: 56px; }
  .fit-row { grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "name name go" "mini count go"; gap: 10px 12px; padding: 16px 0; }
  .fit-idx { display: none; }
  .fit-name { grid-area: name; font-size: 7.6vw; }
  .fit-mini { display: flex; grid-area: mini; }
  .fit-mini img { width: 38px; height: 38px; border-radius: 9px; }
  .fit-count { grid-area: count; align-self: center; }
  .fit-go { grid-area: go; width: 40px; height: 40px; }
  .fit-go svg { width: 16px; height: 16px; }
  .locker-grid, .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .locker-grid .tile:nth-child(n + 7), .region-grid .tile:nth-child(n + 4) { display: flex; }
  .region-grid .tile:nth-child(n + 5) { display: none; }
  .region-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-name { font-size: 15px; font-stretch: 108%; }
  .region-btn { padding: 12px 0 12px 22px; min-height: 44px; align-content: center; }
  .region-btn::before { top: 18px; }
  .region-where { display: none; }
  /* Seattle's is the map's northernmost pin (.pin-t). On a phone its label sits nearer its dot, and
     stays clear of the rule under the section's heading. */
  .map-pin.pin-t span { bottom: calc(50% + 12px); }
  .cv-grid, .sv .cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-info h3 { font-size: 14px; }
  .tile-media { border-radius: 16px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .toast span { font-size: 13px; }
  .sv-box { margin-right: 52px; }
  .btn-add { padding: 0 16px; min-width: 0; font-size: 12.5px; letter-spacing: .05em; }
  .pv-buy .qty button { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .title-ball { opacity: 1; }
  .tape-run > div { animation: none; }
  .stage-orbit { animation: none; }
  .turf-plane { animation: none; }
}