/* Team36 team store: the south metro after dark.
   The hero is a night map of the southern Twin Cities metro drawn from OpenStreetMap: city lights, the Minnesota
   River, the lakes, and the highways traced in orange from the I-35 split on load. The shop below is the map's
   paper side: a legend strip for the collections, crop-marked plates for products, and a bag laid out as a route.
   Loops move opacity only (two sets of twinkling lights) and pause when the hero is off screen. */

:root {
  --night: #11131f;
  --night-2: #181b2e;
  --night-3: #22253d;
  --navy: #2c2c3f;
  --ink: #1b1c2b;
  --orange: #f06724;
  --orange-ink: #a8420d;
  --paper: #f3f0e9;
  --paper-2: #e9e5da;
  --rule: #d6d1c3;
  --mute: #5d5e6e;
  --water: #a9bdf2;
  --disp: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --pad: clamp(16px, 4vw, 56px);
  --bar: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.locked { overflow: hidden; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 16px/1.5 var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.night :focus-visible, .bar :focus-visible, .hero :focus-visible, .foot :focus-visible, .dlg-search :focus-visible { outline-color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: #fff; color: var(--ink); padding: 12px 16px; font-weight: 600; border-radius: 4px; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 3px; font: 700 17px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-go { background: var(--orange); color: #14151f; }
.btn-go:hover { background: #ff7d3c; }
.btn-go:active { transform: scale(.98); }
.btn-go[disabled] { background: #cfcabd; color: #6c6a63; cursor: not-allowed; }
.btn-line { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--navy); }
.btn.is-busy { opacity: .7; pointer-events: none; }

/* ---------- top bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 clamp(10px, 2.4vw, 32px); color: #fff; }
.bar::before { content: ''; position: absolute; inset: 0; background: var(--night); border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transition: opacity .25s; z-index: -1; }
.bar::after { content: ''; position: absolute; inset: 0 0 -28px 0; background: linear-gradient(rgba(12, 13, 25, .82), rgba(12, 13, 25, 0)); z-index: -2; pointer-events: none; transition: opacity .25s; }
.bar.is-solid::before, .view-shop .bar::before { opacity: 1; }
.bar.is-solid::after, .view-shop .bar::after { opacity: 0; }
.bar-home { display: flex; align-items: center; min-height: 44px; padding: 0 6px; }
.bar-home img { height: 26px; width: auto; }
.bar-nav { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-self: center; max-width: 100%; overscroll-behavior-x: contain; }
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav.is-long { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.bar-nav a { position: relative; flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 12px; font: 600 15px/1 var(--disp); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, .74); white-space: nowrap; transition: color .2s; }
.bar-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.bar-nav a:hover, .bar-nav a[aria-current] { color: #fff; }
.bar-nav a[aria-current]::after { transform: scaleX(1); }
/* Down the Alley merch is the podcast's own logo (Hobey's file), last in the bar; its underline sits under the stand.
   The logo is taller than the text links, so they are centred beside it rather than stretched. */
.bar-nav { align-items: center; }
.bar-nav a.nav-logo { padding: 4px 10px 8px; }
.bar-nav a.nav-logo:focus-visible { outline-offset: -3px; }
.nav-logo img { height: 44px; width: auto; opacity: .82; transition: opacity .2s; }
.nav-logo:hover img, .nav-logo[aria-current] img { opacity: 1; }
.bar-nav a.nav-logo::after { left: 10px; right: 10px; bottom: 3px; }
.bar-tools { display: flex; gap: 2px; }
.tool { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background-color .2s; }
.tool:hover { background: rgba(255, 255, 255, .1); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bag-count { position: absolute; right: 2px; top: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #14151f; font: 700 12px/18px var(--disp); text-align: center; transform: scale(0); transition: transform .25s var(--ease); }
.bag-count.has { transform: scale(1); }
.bag-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }

/* ---------- hero: the night map ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: max(1080px, 60vw); overflow: hidden; background: var(--night); color: #fff; container-type: size; }
/* The map is sized by its scale: --ppd is how many pixels one degree of latitude gets. It is set so that Chanhassen
   (44.862 N) sits just under the bar and Northfield (44.458 N) just above the title block, 0.404 degrees apart, at any
   shape of screen. Width must not raise that scale: on a short, wide window the complete north-to-south span
   takes priority, and the map's outer edges fade into the night background. The geographic frame remains
   2.5 degrees of longitude by 0.8 of latitude (see source/build_map.py). */
.hero { --mark: clamp(84px, 9.6vw, 136px); }
.stage, .plate { --north: 104px; --south: var(--map-south, calc(var(--mark) + 100px)); --ppd: calc((100cqh - var(--north) - var(--south)) / .404); }
.stage { position: absolute; width: calc(var(--ppd) * 1.77815); height: calc(var(--ppd) * .8); left: calc(50cqw - var(--ppd) * 1.77815 * var(--fx, .496)); top: calc(100cqh - var(--south) - var(--ppd) * .602); -webkit-mask-image: linear-gradient(#000 calc(100% - 70px), transparent); mask-image: linear-gradient(#000 calc(100% - 70px), transparent); }
.stage {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 70px), transparent), linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 70px), transparent), linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.stage picture { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.stage picture, .stage .lights, .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .lights { object-fit: cover; }
.tw { will-change: opacity; }
.tw path { fill: none; stroke: #fff1dc; stroke-width: 2.4; stroke-linecap: round; }
.tw-a { animation: twinkle 3.4s ease-in-out infinite alternate; }
.tw-b { animation: twinkle 4.9s ease-in-out -2s infinite alternate-reverse; }
@keyframes twinkle { from { opacity: .08; } to { opacity: .95; } }
html.hero-off .tw { animation-play-state: paused !important; }
.mapv { overflow: visible; }
.grat { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: .8; }
.art-glow { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.art { fill: none; stroke: #ff7f3a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len) var(--len); }
.split circle { fill: none; stroke: #fff; stroke-width: 1.1; opacity: .8; }
.split .split-dot { fill: #fff; stroke: none; opacity: 1; }
/* Names are set in pixels, not map units, so they read the same at every scale. Each sits at its place on the map
   (--x, --y). t36.js then fits them to the screen: see fitLabels(). They stay hidden until it has. */
.lbs { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.lb-on .lbs { visibility: visible; }
.lbs .off { visibility: hidden; }
.tn, .rd, .wt { position: absolute; left: var(--x); top: var(--y); }
.tn { width: 0; height: 0; }
.tn::before { content: ''; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.tn b { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 12.5px/1 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 0 2px #0d0e1a, 0 0 3px #0d0e1a, 0 0 5px #0d0e1a, 0 1px 3px #0d0e1a, 0 -1px 3px #0d0e1a; }
.tn.t2::before { left: -2px; top: -2px; width: 4px; height: 4px; background: rgba(255, 255, 255, .6); }
.tn.t2 b { font-size: 11px; letter-spacing: .16em; color: rgba(255, 255, 255, .62); }
.rd { transform: translate(-50%, -50%); padding: 3px 5px 2px; border: 1px solid rgba(255, 127, 58, .85); border-radius: 3px; background: #11131f; font: 700 10px/1 var(--disp); letter-spacing: .04em; color: #ffb48a; white-space: nowrap; }
.wt { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); font: italic 400 13.5px/1 var(--serif); letter-spacing: .22em; color: var(--water); white-space: nowrap; text-shadow: 0 0 3px #0d0e1a, 0 0 5px #0d0e1a; }

.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgba(12, 13, 25, .98) 0, rgba(12, 13, 25, .94) 176px, rgba(12, 13, 25, .3) 204px, rgba(12, 13, 25, 0) 246px),
  linear-gradient(rgba(12, 13, 25, .7) 0, rgba(12, 13, 25, 0) 120px); }

/* the map's title block */
.plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px var(--pad) clamp(22px, 3.6vh, 40px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'mark title cta' 'mark place cta'; column-gap: clamp(18px, 2.6vw, 40px); align-items: end; }
.plate::before { content: ''; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 6px; border-top: 2px solid rgba(255, 255, 255, .78); border-bottom: 1px solid rgba(255, 255, 255, .4); }
.plate-mark { display: contents; }
.plate-mark img { grid-area: mark; height: var(--mark); width: auto; font: 800 64px/1 var(--disp); color: #fff; }
.plate-title { grid-area: title; align-self: end; font: 700 clamp(24px, 2.7vw, 38px)/1 var(--disp); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.plate-place { grid-area: place; align-self: start; margin-top: 10px; font: 500 15px/1.3 var(--text); letter-spacing: .04em; color: rgba(255, 255, 255, .78); }
.plate-key { position: absolute; right: var(--pad); bottom: calc(100% + 16px); display: grid; grid-template-columns: auto auto; grid-template-areas: 'north scale' 'north coord'; column-gap: 16px; align-items: end; color: rgba(255, 255, 255, .8); }
.north { grid-area: north; width: 22px; height: 32px; align-self: center; }
.north path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.north text { font: 700 9px var(--disp); fill: currentColor; }
.scale { grid-area: scale; position: relative; width: calc(var(--ppd) * .14483); display: flex; justify-content: space-between; padding-top: 12px; font: 600 12px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.scale i { position: absolute; left: 0; right: 0; top: 0; height: 7px; border: 1.2px solid currentColor; border-top: 0; }
.scale i::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: 0; border-left: 1.2px solid currentColor; }
.coord { grid-area: coord; margin-top: 8px; font: 500 12px/1 var(--disp); letter-spacing: .16em; white-space: nowrap; }
.plate-cta { grid-area: cta; display: flex; gap: 10px; align-items: center; }
#hero-extra { display: contents; }

/* intro: lights come up, the highways trace out from the split, names settle, the title block rises */
.intro .stage .lights { animation: lights-up 1.4s ease-out both; }
.intro .tw { opacity: 0; animation: tw-in .8s ease-out 1.4s forwards, twinkle 3.4s ease-in-out 2.2s infinite alternate; }
.intro .tw-b { animation: tw-in .8s ease-out 1.6s forwards, twinkle 4.9s ease-in-out 2.4s infinite alternate-reverse; }
.intro .art { animation: trace 1.9s cubic-bezier(.3, .1, .2, 1) .25s both; }
.intro .art-glow { animation: fade-glow .9s ease-out 1.35s both; }
.intro .split { animation: fade-in .4s ease-out .15s both; }
.intro .grat { animation: fade-in .8s ease-out .8s both; }
.intro .lbs { animation: fade-in .8s ease-out 1.25s both; }
.intro .plate { animation: rise .7s var(--ease) .2s both; }
@keyframes lights-up { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes tw-in { to { opacity: .5; } }
@keyframes trace { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes fade-glow { from { opacity: 0; } to { opacity: .2; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- the paper side ---------- */
#app { position: relative; background-color: var(--paper); background-image: linear-gradient(rgba(44, 44, 63, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 44, 63, .05) 1px, transparent 1px); background-size: 112px 112px; background-position: center top; min-height: 60vh; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); }
#shop { scroll-margin-top: var(--bar); }
.view-shop .hero, .view-shop .home { display: none; }
.home-only { display: block; }
.coll { display: none; }
.view-shop .coll { display: block; }

/* feature band (a small collection that is not in the home order, e.g. custom gloves) */
.feat { background: var(--night); color: #fff; padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 88px); position: relative; overflow: hidden; scroll-margin-top: var(--bar); }
.feat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .03) 30.1%, rgba(255, 255, 255, .03) 52%, transparent 52.1%), linear-gradient(62deg, transparent 55%, rgba(240, 103, 36, .05) 55.1%, rgba(240, 103, 36, .05) 76%, transparent 76.1%); pointer-events: none; }
.feat-in { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feat-kicker { font: 600 14px/1 var(--disp); letter-spacing: .26em; text-transform: uppercase; color: #ff9a62; display: flex; align-items: center; gap: 12px; }
.feat-kicker::before { content: ''; width: 34px; height: 2px; background: var(--orange); }
.feat h2 { margin-top: 16px; font: 800 clamp(52px, 7.4vw, 116px)/.86 var(--disp); text-transform: uppercase; letter-spacing: -.005em; }
.feat-note { margin-top: 18px; max-width: 34ch; color: rgba(255, 255, 255, .76); font-size: 16px; }
.feat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 18px; }
.fcard { position: relative; background: var(--night-2); border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; padding: 14px 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.fcard .shot { border-radius: 3px; }
.zoom { position: absolute; inset: 0; transform: scale(1.16); transition: transform .5s var(--ease); }
@media (hover: hover) { .fcard .shot:hover .zoom { transform: scale(1.22); } }
.fcard h3 { margin-top: 16px; font: 700 24px/1.05 var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.fcard-row { margin-top: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fcard-price { font: 700 22px/1 var(--disp); color: #ff9a62; }
.fcard-tag { font: 600 12.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.fcard-try { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.fcard-try label { font: 600 13px/1.1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.fcard-try input { width: 76px; height: 48px; text-align: center; background: #0d0e1a; border: 1.5px solid rgba(255, 255, 255, .34); border-radius: 3px; color: #fff; font: 700 24px/1 var(--disp); letter-spacing: .06em; }
.fcard-try input:focus { border-color: var(--orange); outline: none; }
.fcard .btn { margin-top: 16px; width: 100%; }
.fcard-spacer { flex: 1; }

/* product photo box: always a white square, with room for the cuff number overprint */
.shot { position: relative; display: block; aspect-ratio: 1; background: #fff; overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cuff { position: absolute; display: grid; place-items: center; background: #333e5a; box-shadow: 0 0 1px 1px #333e5a; color: #fff; font: 700 10px/1 var(--disp); container-type: size; overflow: hidden; pointer-events: none; }
.cuff b { font-size: 112cqh; line-height: .8; font-weight: 700; letter-spacing: .02em; transform: translateY(-2%); }

/* sections */
.sec { padding: clamp(44px, 6vw, 80px) 0 clamp(18px, 2.4vw, 30px); scroll-margin-top: calc(var(--bar) - 6px); }
.sec:last-of-type { padding-bottom: clamp(56px, 7vw, 100px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; position: relative; }
.sec-head::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }
.sec-head::after { content: ''; position: absolute; left: 0; bottom: 0; width: clamp(80px, 14vw, 190px); height: 6px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .15s; }
.in .sec-head::after, .sec-head.in::after { transform: scaleX(1); }
.sec-name { display: flex; align-items: flex-end; gap: 14px; min-width: 0; }
.glyph { flex: none; width: 26px; height: 26px; margin-bottom: clamp(4px, .9vw, 12px); fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sec h2, .coll h1 { font: 800 clamp(40px, 6.2vw, 88px)/.88 var(--disp); text-transform: uppercase; color: var(--ink); letter-spacing: -.005em; overflow-wrap: anywhere; }
.more { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 10px; font: 700 15px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.more svg { width: 18px; height: 18px; fill: none; stroke: var(--orange-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.more:hover svg { transform: translateX(4px); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; padding-top: 26px; }
.tiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.tile { position: relative; min-width: 0; display: flex; flex-direction: column; }
.tile-open { display: block; text-decoration: none; color: inherit; border-radius: 4px; }
.tile-plate { position: relative; display: block; aspect-ratio: 1; background: #fff; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.tile-plate img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; transition: transform .5s var(--ease); }
.tile-plate::after { content: ''; position: absolute; inset: 9px; pointer-events: none; opacity: .55; transition: inset .3s var(--ease), opacity .3s; background:
  linear-gradient(var(--ink), var(--ink)) left top / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) left top / 1.5px 12px no-repeat,
  linear-gradient(var(--ink), var(--ink)) right top / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) right top / 1.5px 12px no-repeat,
  linear-gradient(var(--ink), var(--ink)) left bottom / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 1.5px 12px no-repeat,
  linear-gradient(var(--ink), var(--ink)) right bottom / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) right bottom / 1.5px 12px no-repeat; }
@media (hover: hover) {
  .tile-open:hover .tile-plate img { transform: scale(1.06); }
  .tile-open:hover .tile-plate::after { inset: 5px; opacity: 1; }
  .tile-open:hover h3 { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
}
.tile-flag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 5px 8px 4px; background: var(--ink); color: #fff; font: 600 11.5px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }
.tile-flag.hot { background: var(--orange); color: #14151f; }
.tile.is-out .tile-plate img { opacity: .45; }
.tile-meta { display: block; padding: 12px 2px 0; }
.tile-aud { display: block; margin-bottom: 5px; font: 600 12.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.tile-aud:empty { display: none; }
.tile h3 { font: 500 15.5px/1.28 var(--text); color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.tile-price { display: block; margin-top: 6px; font: 700 19px/1 var(--disp); letter-spacing: .02em; color: var(--ink); }
.tile-price s { margin-right: 6px; color: var(--mute); font-weight: 500; }
.picks { display: flex; gap: 0; margin: 6px 0 0 -3px; }
.pick { position: relative; width: 44px; height: 44px; padding: 3px; border-radius: 4px; flex: none; }
.pick img { width: 100%; height: 100%; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 3px; }
.pick[aria-pressed='true'] img { border: 2px solid var(--ink); }
.pick-more { align-self: center; margin-left: 6px; font: 600 13px/1 var(--disp); letter-spacing: .08em; color: var(--mute); }
.tile-end { display: none; }

[data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .7s var(--ease); transition-delay: var(--d, 0s); }
[data-rv].in { opacity: 1; transform: none; }

/* a section set on the night map: the same sheet, a different patch of it */
.sec.night { position: relative; background: var(--night); padding-bottom: clamp(48px, 6vw, 84px); margin: clamp(26px, 3.4vw, 50px) 0 0; overflow: hidden; }
.sec.night::before { content: ''; position: absolute; inset: 0; background: url(/assets/design/team36/36e0cb839802/lights-phone.webp) var(--shift, 50%) 42% / 190% auto no-repeat; opacity: .3; }
.sec.night::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(17, 19, 31, .55), rgba(17, 19, 31, .86) 34%, rgba(17, 19, 31, .92)); }
.sec.night > .wrap { position: relative; z-index: 1; }
.sec.night h2 { color: #fff; }
.sec.night .sec-head::before { background: rgba(255, 255, 255, .8); }
.sec.night .more { color: #fff; }
.sec.night .more svg { stroke: var(--orange); }
.sec.night :focus-visible { outline-color: #fff; }
.sec.night + .sec { padding-top: clamp(44px, 6vw, 80px); }

/* collection page */
.coll { padding: calc(var(--bar) + clamp(20px, 3vw, 40px)) 0 clamp(56px, 7vw, 100px); min-height: 100vh; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 14px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.back svg { width: 18px; height: 18px; fill: none; stroke: var(--orange-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.coll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 8px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); position: relative; }
.coll-head::after { content: ''; position: absolute; left: 0; bottom: -2px; width: clamp(80px, 14vw, 190px); height: 6px; background: var(--orange); }
.coll-count { font: 600 15px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-bottom: 8px; white-space: nowrap; }
.empty { padding: 56px 0; font-size: 17px; color: var(--mute); }

/* ---------- dialogs ---------- */
.veil { position: fixed; inset: 0; z-index: 90; background: rgba(9, 10, 20, .66); opacity: 0; pointer-events: none; transition: opacity .25s; }
.veil.on { opacity: 1; pointer-events: auto; }
.dlg { position: fixed; z-index: 100; }
.x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); border: 1px solid var(--rule); flex: none; }
.x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.x:hover { background: var(--paper-2); }

/* product view */
.dlg-product { inset: 0; display: grid; place-items: center; padding: 24px; overflow: hidden; }
.pv { position: relative; width: min(1080px, 100%); height: min(780px, 100%); grid-template-rows: minmax(0, 1fr); background: var(--paper); border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); animation: pv-in .32s var(--ease); }
@keyframes pv-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.pv-x { position: absolute; right: 14px; top: 14px; z-index: 5; }
.pv-gal { background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--rule); }
.pv-gal .shot { width: 100%; flex: none; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px; scrollbar-width: thin; flex: none; }
.thumb { flex: none; width: 60px; height: 60px; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: #fff; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb[aria-pressed='true'] { border: 2px solid var(--ink); }
.pv-info { padding: 30px clamp(20px, 2.6vw, 34px) 0; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }
.pv-aud { font: 600 13px/1 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--orange-ink); padding-right: 52px; min-height: 13px; }
.pv h2 { margin-top: 8px; font: 700 clamp(30px, 3vw, 40px)/.98 var(--disp); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); padding-right: 44px; overflow-wrap: anywhere; }
.pv-price { margin-top: 12px; font: 700 28px/1 var(--disp); color: var(--ink); }
.pv-price s { margin-right: 8px; color: var(--mute); font-weight: 500; font-size: 22px; }
.fl { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; font: 700 13.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.fl em { font: 500 14px/1 var(--text); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--mute); }
.fl .bad { color: #b3261e; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { min-width: 48px; min-height: 44px; padding: 0 14px; border: 1.5px solid #bdb8a9; border-radius: 3px; background: #fff; font: 600 15px/1 var(--text); color: var(--ink); transition: border-color .15s, background-color .15s, color .15s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[disabled] { color: #a09c90; background: repeating-linear-gradient(135deg, #f1eee6 0 6px, #e6e2d6 6px 7px); border-color: #d5d0c2; cursor: not-allowed; }
.chip-color i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .28); vertical-align: -2px; }
.chip.is-miss:not([aria-pressed='true']) { border-style: dashed; color: var(--mute); }
.designs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.design { width: 64px; height: 64px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; overflow: hidden; padding: 0; }
.design img { width: 100%; height: 100%; object-fit: contain; }
.design[aria-pressed='true'] { border: 2px solid var(--ink); }
.inp { display: block; width: 100%; min-height: 48px; margin-top: 10px; padding: 0 14px; border: 1.5px solid #bdb8a9; border-radius: 3px; background: #fff; font: 500 17px/1.2 var(--text); color: var(--ink); }
.inp:focus { border-color: var(--ink); outline: 2px solid var(--orange); outline-offset: 1px; }
.inp-num { width: 110px; font: 700 26px/1 var(--disp); letter-spacing: .08em; text-align: center; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hint { margin-top: 8px; font-size: 14px; color: var(--mute); }
.err { margin-top: 14px; padding: 12px 14px; border-left: 4px solid #b3261e; background: #fbeceb; color: #7c1c16; font-weight: 500; font-size: 15px; border-radius: 2px; }
.buy { position: sticky; bottom: 0; z-index: 2; margin: 26px calc(-1 * clamp(20px, 2.6vw, 34px)) 0; padding: 14px clamp(20px, 2.6vw, 34px); background: var(--paper); border-top: 1px solid var(--rule); display: flex; gap: 10px; align-items: center; }
.qty { display: flex; align-items: center; border: 1.5px solid #bdb8a9; border-radius: 3px; background: #fff; flex: none; }
.qty button { width: 44px; height: 49px; font: 600 20px/1 var(--text); color: var(--ink); }
.qty button:hover { background: var(--paper); }
.qty output { min-width: 26px; text-align: center; font: 700 18px/1 var(--disp); }
.buy .btn { flex: 1; min-width: 0; padding: 0 14px; }
.desc { order: 9; margin-top: 4px; padding: 22px 0 30px; font-size: 15px; line-height: 1.55; color: #33344a; overflow-x: auto; overflow-y: hidden; overflow-wrap: anywhere; }
.desc h3 { margin: 18px 0 6px; font: 700 15px/1.2 var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.desc p { margin: 0 0 10px; }
.desc table { border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.desc td, .desc th { border: 1px solid var(--rule); padding: 6px 9px; text-align: left; background: #fff; }
.desc img { max-width: 100%; height: auto; }
.desc .alert { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--orange); background: #fff; border-radius: 2px; color: var(--ink); }
.desc-title { order: 8; margin-top: 26px; font: 700 13.5px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); padding-top: 18px; border-top: 1px solid var(--rule); }
.pv-info > .buy { order: 7; }
.skel { border-radius: 4px; background: linear-gradient(90deg, #e9e5da, #f3f0e9, #e9e5da); background-size: 200% 100%; }
.pv-state { padding: 26px 0 40px; }
.pv-state p { font-size: 16px; color: var(--mute); margin-bottom: 14px; }
.pv.pv-none { display: block; width: min(460px, 100%); height: auto; }
.pv-none .pv-info { padding-top: 46px; }
.pv-none .pv-state p { font-size: 18px; color: var(--ink); padding-right: 40px; }

/* bag: a route with one stop per line */
.dlg-bag { right: 0; top: 0; bottom: 0; width: min(460px, 100%); background: var(--paper); display: flex; flex-direction: column; overflow: hidden; animation: bag-in .3s var(--ease); }
@keyframes bag-in { from { transform: translateX(40px); opacity: 0; } }
.bag-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 22px; background: var(--night); color: #fff; }
.bag-top h2 { font: 800 34px/1 var(--disp); text-transform: uppercase; letter-spacing: .02em; }
.bag-top .x { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.bag-top .x:hover { background: rgba(255, 255, 255, .1); }
.bag-list { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 22px 18px 8px 22px; }
.stop { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 0 0 26px 30px; }
.bag-route { position: relative; min-height: 100%; }
.bag-route::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: -8px; border-left: 2px dashed #c9794f; }
.stop::after { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--orange); }
.pack-items .stop { padding-left: 0; padding-bottom: 18px; }
.pack-items .stop::after { display: none; }
.stop.is-bad::after { border-color: #b3261e; background: #b3261e; }
.stop .shot { border: 1px solid var(--rule); border-radius: 4px; }
.stop h3 { font: 600 15.5px/1.25 var(--text); color: var(--ink); }
.stop-sub { margin-top: 3px; font-size: 14px; color: var(--mute); overflow-wrap: anywhere; }
.stop-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stop .qty button { height: 42px; }
.stop-price { font: 700 19px/1 var(--disp); }
.drop { min-height: 44px; padding: 0 4px; font: 600 13px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.drop:hover { color: #b3261e; }
.bag-end::before { content: ''; position: absolute; left: 20px; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink); }
.bag-end { flex: none; position: relative; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: #fff; }
.bag-sum { display: flex; align-items: baseline; justify-content: space-between; font: 700 15px/1 var(--disp); letter-spacing: .14em; text-transform: uppercase; }
.bag-sum strong { font-size: 28px; letter-spacing: .01em; }
.bag-end .btn { width: 100%; margin-top: 14px; }
.bag-end .err { margin-top: 12px; }
.bag-none { padding: 40px 6px; text-align: center; }
.bag-none p { font-size: 17px; color: var(--mute); margin-bottom: 18px; }

/* search */
.dlg-search { inset: 0; background: rgba(13, 14, 26, .985); color: #fff; display: flex; flex-direction: column; overflow: hidden; animation: fade-in .2s ease-out; }
.search-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px var(--pad); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.search-top svg.mag { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.search-top input { flex: 1; min-width: 0; height: 56px; background: none; border: 0; color: #fff; font: 600 clamp(24px, 3.4vw, 40px)/1 var(--disp); letter-spacing: .03em; }
.search-top input::placeholder { color: rgba(255, 255, 255, .42); }
.search-top input:focus { outline: none; }
.search-top input::-webkit-search-cancel-button { display: none; }
.search-top .x { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.search-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 22px var(--pad) 56px; }
.search-note { font: 600 14px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.search-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.search-quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 3px; font: 600 15px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.search-quick a:hover { border-color: #fff; }
.dlg-search .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 18px; }
.on-night .tile h3, .on-night .tile-price { color: #fff; }
.on-night .tile-aud { color: #ff9a62; }
.on-night .tile-plate { border-color: transparent; }
.on-night .pick img { border-color: transparent; }
.on-night .pick[aria-pressed='true'] img { border: 2px solid var(--orange); }
.on-night .pick-more { color: rgba(255, 255, 255, .7); }
.on-night .tile-price s { color: rgba(255, 255, 255, .66); }

/* toast and the dot that flies to the bag */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 120; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 18px; background: var(--night); color: #fff; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; font-weight: 500; font-size: 15px; transition: transform .35s var(--ease), opacity .25s; }
.toast.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast button { flex: none; min-height: 44px; padding: 0 16px; background: var(--orange); color: #14151f; border-radius: 3px; font: 700 14px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; }
.fly { position: fixed; left: 0; top: 0; z-index: 130; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(240, 103, 36, .28); pointer-events: none; }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--night); color: rgba(255, 255, 255, .8); overflow: hidden; }
.foot::before { content: ''; position: absolute; inset: 0; background: url(/assets/design/team36/36e0cb839802/lights-phone.webp) center 46% / cover no-repeat; opacity: .34; }
.foot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(17, 19, 31, .2), rgba(17, 19, 31, .9)); }
.foot-in { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) var(--pad) 34px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.foot-brand img { width: min(300px, 70%); height: auto; }
.foot-brand p { margin-top: 12px; font: 700 18px/1 var(--disp); letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.foot-col h2 { font: 700 14px/1 var(--disp); letter-spacing: .2em; text-transform: uppercase; color: #ff9a62; margin-bottom: 8px; }
.foot-col a { display: flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; color: rgba(255, 255, 255, .86); }
.foot-col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
#foot-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-content: start; }
#foot-shop h2 { grid-column: 1 / -1; }
.foot-base { position: relative; z-index: 1; max-width: 1360px; margin: 0 auto; padding: 20px var(--pad) calc(26px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) center top / calc(100% - 2 * var(--pad)) 1px no-repeat; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.powered { display: flex; align-items: center; gap: 12px; font: 600 13px/1 var(--disp); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.powered a { display: flex; align-items: center; min-height: 44px; }
.powered img { height: 22px; width: auto; }
.osm { font-size: 13px; color: rgba(255, 255, 255, .7); }
.osm a { display: inline-block; padding: 12px 0; }

/* ---------- widths ---------- */
@media (min-width: 1700px) {
  .tn b { font-size: 14px; }
  .tn.t2 b { font-size: 12px; }
  .rd { font-size: 11px; }
  .wt { font-size: 15px; }
}
/* A short, wide window has the least room between the bar and the title block, so the wordmark gives some up. */
@media (min-width: 1001px) and (max-height: 700px) {
  .hero { --mark: clamp(72px, min(9.6vw, 15vh), 136px); }
}
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .tiles > .tile:nth-child(n + 7) { display: none; }
  .dlg-search .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plate-key { display: none; }
  .feat-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .stage, .plate { --south: var(--map-south, 300px); }
  .plate { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'mark title' 'mark place' 'cta cta'; }
  .plate-cta { margin-top: 20px; }
  .hero-shade { background: linear-gradient(to top, rgba(12, 13, 25, .98) 0, rgba(12, 13, 25, .94) 240px, rgba(12, 13, 25, .3) 266px, rgba(12, 13, 25, 0) 300px), linear-gradient(rgba(12, 13, 25, .7) 0, rgba(12, 13, 25, 0) 120px); }
}
@media (max-width: 860px) {
  .pv { display: block; height: auto; max-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .pv-gal { overflow: visible; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pv-gal .shot { max-width: 520px; margin: 0 auto; }
  .pv-info { overflow: visible; }
  .dlg-search .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --bar: 100px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 54px 46px; row-gap: 0; padding: 0 6px 0 10px; align-items: center; }
  .bar-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin: 0 -6px 0 -10px; padding: 0 4px; }
  .bar-tools { grid-column: 2; grid-row: 1; }
  .bar-home img { height: 24px; }
  .bar-nav a { font-size: 14.5px; }
  .bar-nav a.nav-logo { padding: 2px 10px 6px; }
  .nav-logo img { height: 36px; }
  .bar-nav a.nav-logo::after { bottom: 2px; }
  .bar::after { inset: 0 0 -26px 0; background: linear-gradient(rgba(12, 13, 25, .96) 0, rgba(12, 13, 25, .9) 52%, rgba(12, 13, 25, .74) 80%, rgba(12, 13, 25, 0)); }

  .hero { min-height: 600px; max-height: 900px; }
  /* Keep the north/south anchors above the measured title block. Width can cap the scale to keep Chanhassen and
     Rosemount inside the screen, but must never enlarge it to cover the phone raster's edges. */
  .stage, .plate { --north: 134px; --south: var(--map-south, 291px); --fx: .4887; --ppd: min((100cqh - var(--north) - var(--south)) / .404, (100cqw - 80px) / .288); }
  .stage picture { left: 28.864%; right: auto; width: 40%; }
  .tn b { font-size: 11px; letter-spacing: .15em; }
  .tn.t2 b { font-size: 10.5px; letter-spacing: .14em; }
  .lbs .dk { display: none; }
  .rd { font-size: 9.5px; padding: 2px 4px 1px; }
  .wt { font-size: 12px; letter-spacing: .16em; }
  .art { stroke-width: 3.2; }
  .art-glow { stroke-width: 9; }
  .tw path { stroke-width: 4.4; }
  .hero-shade { background: linear-gradient(to top, rgba(12, 13, 25, 1) 0, rgba(12, 13, 25, .96) 240px, rgba(12, 13, 25, .3) 262px, rgba(12, 13, 25, 0) 288px); }
  .plate { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mark' 'title' 'place' 'cta'; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); row-gap: 0; }
  .plate::before { left: 16px; right: 16px; }
  .plate-mark img { height: auto; width: min(64vw, 290px); }
  .plate-title { margin-top: 14px; font-size: 25px; }
  .plate-place { margin-top: 8px; }
  .plate-cta { margin-top: 20px; }
  .plate-cta .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 16px; letter-spacing: .08em; }

  .feat-cards { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .feat-cards::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; }

  .sec-head { align-items: flex-end; }
  .glyph { width: 20px; height: 20px; }
  .more span { display: none; }
  .more { min-width: 44px; padding: 0; justify-content: flex-end; }
  /* home sections become swipe rows */
  .home .tiles { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; margin: 0 calc(-1 * var(--pad)); padding: 22px var(--pad) 6px; scroll-snap-type: x proximity; scroll-padding: 0 var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .home .tiles::-webkit-scrollbar { display: none; }
  .home .tiles > .tile, .home .tiles > .tile:nth-child(n + 7) { display: flex; flex: 0 0 min(62vw, 250px); scroll-snap-align: start; }
  .home .tiles > .tile-end { display: flex; flex: 0 0 150px; align-items: center; justify-content: center; }
  .tile-end a { display: grid; place-items: center; gap: 12px; width: 132px; height: 132px; border: 2px solid var(--ink); border-radius: 50%; font: 700 14px/1.1 var(--disp); letter-spacing: .12em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--ink); align-content: center; }
  .sec.night .tile-end a { border-color: #fff; color: #fff; }
  .sec.night .tile-end svg { stroke: var(--orange); }
  .tile-end svg { width: 22px; height: 22px; fill: none; stroke: var(--orange-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .home [data-rv] { transform: none; }

  .coll .tiles, .dlg-search .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .coll-count { display: none; }

  .dlg-product { padding: 0; place-items: stretch; }
  .pv { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .pv-x { position: fixed; right: 10px; top: 10px; }
  .pv-gal { padding: 12px 12px 14px; }
  .pv-info { padding: 22px 16px 0; }
  .buy { margin: 22px -16px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .buy .btn { font-size: 16px; letter-spacing: .08em; min-height: 50px; }
  .stop .qty button { width: 44px; height: 44px; }

  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .tw { opacity: .5; }
  [data-rv] { opacity: 1; transform: none; }
}