/* Search A Show — design v11 "Night Out" for the public site (design/DESIGN_SYSTEM.md).
   Loaded after sas.css + site.css. Dark by default (fragments.html head script); light stays a full theme.
   Phones first; every motion respects prefers-reduced-motion. */

/* ── 1. Night palette (dark) ───────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #0B0B10; --surface: #14141B; --surface-2: #1D1D27; --surface-3: #272733; --overlay: rgba(0,0,0,.66);
  --line: #262632; --line-strong: #3B3B4B;
  --text: #F6F6F8; --text-2: #CACAD4; --text-3: #A0A0AE; --text-4: #757584;
  --stage: #07070B; --stage-2: #13131B;
  --poster-stage: #101017;
  --glow: rgba(255, 45, 85, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B10; --surface: #14141B; --surface-2: #1D1D27; --surface-3: #272733;
    --line: #262632; --line-strong: #3B3B4B;
    --text: #F6F6F8; --text-2: #CACAD4; --text-3: #A0A0AE;
    --stage: #07070B; --stage-2: #13131B; --poster-stage: #101017; --glow: rgba(255, 45, 85, .28);
  }
}
:root {
  --glow: rgba(224, 16, 63, .18);
  --grad-neon: linear-gradient(135deg, #FF2D55 0%, #C026D3 55%, #6D5BFF 100%);
  /* Badges carry small white text: the same hues, darker (AA 4.5:1 on every stop; contrast-check.mjs). */
  --grad-badge: linear-gradient(135deg, #C8103F 0%, #9A1FB0 55%, #4F3FD6 100%);
  --scrim-bottom: linear-gradient(to top, rgba(8,8,12,.94) 0%, rgba(8,8,12,.62) 42%, rgba(8,8,12,0) 78%);
  --scrim-top: linear-gradient(to bottom, rgba(8,8,12,.55), rgba(8,8,12,0) 40%);
  --fs-display: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  --section-gap: var(--s-12);
  --bottom-nav-h: 0px;
}
@media (min-width: 720px) { :root { --section-gap: 72px; --gutter: 24px; } }

/* ── 2. Rhythm: sections breathe ───────────────────────────────────────── */
.home .section-sm, main > .section-sm { padding-block: var(--section-gap) 0; }
.section-head { margin-bottom: var(--s-6); }

/* ── 3. Touch targets ≥ 44 px, visible focus ───────────────────────────── */
.btn-sm { --btn-h: 44px; }
.chip { min-height: 44px; padding: 0 var(--s-4); font-weight: var(--fw-semibold); }
.see-all, .crumbs a, .sort-links a, .country-line a, .link-btn, .footer-grid a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-grid ul { gap: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.show-card:focus-visible .poster { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ── 4. Show cards ─────────────────────────────────────────────────────── */
.show-card { gap: var(--s-3); border-radius: var(--r-xl); transition: transform var(--dur-2) var(--ease-out); }
.show-card .poster { border-radius: var(--r-xl); background: var(--poster-stage); transition: box-shadow var(--dur-2) var(--ease-out); }
.show-card .poster::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--scrim-top); }
.show-card .poster > picture, .show-card .poster > img { z-index: 0; }
.show-card .poster > img.is-contain { object-fit: contain; }
.show-card .date-badge, .show-card .poster-tag, .show-card .price-pill { z-index: 2; }
.show-card .title { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.3; }
.show-card .performer { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.show-card .when { color: var(--accent-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.show-card .where { color: var(--text-3); }
.show-card .card-body { gap: 3px; }
.price-pill { position: absolute; inset-inline-end: var(--s-2); bottom: var(--s-2); padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(8,8,12,.78); color: #FFFFFF; font-size: var(--fs-xs); font-weight: var(--fw-bold); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .show-card:hover { transform: translateY(-4px); }
  .show-card:hover .poster { box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px var(--glow); }
  .show-card:hover .poster > img, .show-card:hover .poster > picture > img { transform: scale(1.04); }
}
.show-card:active { transform: scale(.985); }

/* Fallback artwork: under every image, visible when there is none (or it fails to load). */
.poster-art { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-4); color: #FFFFFF; background: var(--art, linear-gradient(135deg, #FF2D55, #6D5BFF)); overflow: hidden; }
.poster-art::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); }
.poster-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 65%; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); }
.poster-art .icon { position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); width: 44px; height: 44px; opacity: .9; stroke-width: 1.5; }
.poster-art-title { position: relative; z-index: 1; font-size: clamp(1rem, .8rem + 1vw, 1.35rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.poster picture:has(img.is-broken), .poster img.is-broken { visibility: hidden; }
.art-comedy { --art: linear-gradient(135deg, #FF8A00, #E0103F); }
.art-concerts, .art-classical { --art: linear-gradient(135deg, #6D5BFF, #1E3A8A); }
.art-theatre { --art: linear-gradient(135deg, #B0123A, #4A0E4E); }
.art-festivals { --art: linear-gradient(135deg, #FF5E3A, #C026D3); }
.art-nightlife { --art: linear-gradient(135deg, #3B1E8F, #E0106F); }
.art-dance { --art: linear-gradient(135deg, #FF3D7F, #FF8A00); }
.art-family { --art: linear-gradient(135deg, #0F9D8A, #2563EB); }
.art-sports { --art: linear-gradient(135deg, #16A34A, #0E7490); }
.art-film { --art: linear-gradient(135deg, #334155, #B91C1C); }
.art-exhibitions, .art-culture { --art: linear-gradient(135deg, #0891B2, #7C3AED); }
.art-food-drink { --art: linear-gradient(135deg, #EA580C, #9F1239); }
.art-workshops, .art-conferences { --art: linear-gradient(135deg, #2563EB, #0F172A); }
.art-other { --art: linear-gradient(135deg, #FF2D55, #6D5BFF); }

/* Skeleton cards: the same shape as a show card. */
.card-skeleton { display: flex; flex-direction: column; gap: var(--s-3); }
.card-skeleton .sk-poster { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
.card-skeleton .sk-line { height: 14px; border-radius: var(--r-pill); }
.card-skeleton .sk-line.w60 { width: 60%; } .card-skeleton .sk-line.w80 { width: 80%; }
.skeleton { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; animation: night-shimmer 1.4s ease-in-out infinite; }
@keyframes night-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Phones: home sections are swipeable rails (70% wide cards, snap). */
@media (max-width: 719px) {
  .grid-cards.rail-sm { display: grid; grid-auto-flow: column; grid-auto-columns: 70%; grid-template-columns: none; gap: var(--s-4);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: var(--s-2); }
  .grid-cards.rail-sm::-webkit-scrollbar { display: none; }
  .grid-cards.rail-sm > * { scroll-snap-align: start; }
  .grid-cards:not(.rail-sm) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
}
@media (min-width: 720px) and (max-width: 1079px) { .grid-cards:not(.rail-sm), .grid-cards.rail-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); } }

/* ── 5. Home hero: this week's standout show ───────────────────────────── */
.feature-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--stage); color: #FFFFFF;
  min-height: min(78vh, 640px); display: flex; align-items: flex-end; }
.feature-hero-media { position: absolute; inset: 0; z-index: -1; }
.feature-hero-media .poster-art { padding: 0; }
.feature-hero-media picture, .feature-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.feature-hero-media img.is-contain { object-fit: contain; }
.feature-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-bottom); }
.feature-hero-body { position: relative; padding-block: var(--s-16) var(--s-10); display: grid; gap: var(--s-3); max-width: var(--container); }
.feature-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #FFFFFF; }
.feature-eyebrow::before { content: ""; width: 28px; height: 4px; border-radius: var(--r-pill); background: var(--grad-neon); }
.feature-title { margin: 0; font-size: var(--fs-display); line-height: 1; letter-spacing: -0.04em; font-weight: 800; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.feature-title a { color: inherit; text-decoration: none; }
.feature-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.feature-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: #E8E8EE; }
.feature-meta time { color: #FFFFFF; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.feature-actions .btn-primary { border-radius: var(--r-pill); padding-inline: var(--s-8); box-shadow: 0 10px 30px rgba(224,16,63,.35); }
.feature-price { font-weight: var(--fw-bold); color: #FFFFFF; }
@media (min-width: 720px) {
  .feature-hero { min-height: min(72vh, 620px); }
  .feature-hero-media img:not(.is-contain) { object-position: center; }
  .feature-hero-media::after { background: var(--scrim-bottom), linear-gradient(90deg, rgba(8,8,12,.7), rgba(8,8,12,0) 60%); }
}
/* Phones: the hero first, then search, then the rails (site.css orders home sections on phones). */
@media (max-width: 559px) { .home > .feature-hero { order: -1; } .home > .search-stage { order: 0; } .feature-hero { min-height: 72vh; } }
/* With a hero on top, the search block is a compact stage band. */
.feature-hero + .search-stage { padding-block: var(--s-10); }
.feature-hero + .search-stage h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); max-width: none; }

/* Countdown pill: real start time, ticking in night.js. */
.countdown { display: inline-flex; align-items: center; gap: var(--s-2); width: fit-content; padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #FFFFFF; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
.countdown::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF2D55; box-shadow: 0 0 0 4px rgba(255,45,85,.25); }
.facts .countdown { margin-top: var(--s-2); color: var(--text); background: var(--surface-2); border-color: var(--line-strong); }

/* ── 6. Chips: one horizontal scrolling row ────────────────────────────── */
.chip-scroll { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { flex: none; scroll-snap-align: start; }
ul.chip-scroll { list-style: none; margin-block: 0; }
.chip-rail.chip-scroll a { min-height: 44px; }
.chip .icon { width: 18px; height: 18px; }
.chip.is-active, .chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.is-active::before, .chip[aria-current="true"]::before { content: "✓"; font-weight: 800; }
.chip.is-active .icon, .chip[aria-current="true"] .icon { display: none; }
.cat-chips { margin-bottom: var(--s-1); }

/* ── 7. List / map ─────────────────────────────────────────────────────── */
.view-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--surface-2); align-self: flex-start; }
.view-switch button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.view-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.view-switch .icon { width: 18px; height: 18px; }
.results-layout { display: grid; gap: var(--s-8); }
.results-map { display: none; }
.results-layout.is-map .results-list { display: none; }
.results-layout.is-map .results-map { display: block; }
.map-box { position: relative; height: calc(100dvh - 220px - var(--bottom-nav-h)); min-height: 380px; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
@media (min-width: 1100px) {
  .view-switch { display: none; }
  .results-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); align-items: start; }
  .results-layout .results-list { display: block !important; }
  .results-layout .results-map { display: block; position: sticky; top: 84px; }
  .results-layout .map-box { height: calc(100vh - 120px); }
  .results-layout .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) { .results-layout .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Leaflet: pins and popups in our style */
.map-box .leaflet-container { width: 100%; height: 100%; background: var(--surface-2); font: inherit; }
.night-pin { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  background: var(--grad-neon); color: #FFFFFF; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 2px solid #FFFFFF; }
.night-pin span { transform: rotate(45deg); }
.leaflet-marker-icon:focus-visible .night-pin { outline: 3px solid var(--focus); outline-offset: 3px; }
.leaflet-popup-content-wrapper { border-radius: var(--r-lg) !important; background: var(--surface) !important; color: var(--text) !important; }
.leaflet-popup-tip { background: var(--surface) !important; }
.leaflet-popup-content { margin: var(--s-3) !important; min-width: 220px; }
.leaflet-container a.map-card, .leaflet-container a.map-card:hover { color: var(--text); }
.map-card:hover strong { color: var(--accent-text); }
.map-card { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); align-items: center; color: var(--text); text-decoration: none; }
.map-card img, .map-card .map-card-art { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; background: var(--grad-neon); }
.map-card strong { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.map-card .meta { display: block; font-size: var(--fs-xs); }
.map-card .map-when { color: var(--accent-text); font-weight: var(--fw-semibold); }
.leaflet-control-attribution { font-size: 10px !important; background: color-mix(in srgb, var(--surface) 85%, transparent) !important; color: var(--text-2) !important; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6); }

/* ── 8. Header, theme, bottom navigation ───────────────────────────────── */
.theme-btn { width: 44px; min-height: 44px; }
.theme-btn .icon { width: 20px; height: 20px; }
.theme-btn .i-sun, :root[data-theme="light"] .theme-btn .i-moon { display: none; }
:root[data-theme="light"] .theme-btn .i-sun { display: inline; }
.theme-choice { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.theme-choice button { min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--on-stage-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.theme-choice button[aria-checked="true"] { background: #FFFFFF; color: #0B0B10; border-color: #FFFFFF; font-weight: var(--fw-bold); }
.bottom-nav { display: none; }
@media (max-width: 719px) {
  :root { --bottom-nav-h: calc(64px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--bottom-nav-h); }
  .bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 70; display: grid; grid-template-columns: repeat(5, 1fr);
    height: var(--bottom-nav-h); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px;
    color: var(--text-3); text-decoration: none; font-size: 11px; font-weight: var(--fw-semibold); }
  .bottom-nav a .icon { width: 24px; height: 24px; }
  .bottom-nav a[aria-current="page"] { color: var(--accent-text); font-weight: var(--fw-bold); }
  .bottom-nav a[aria-current="page"] .icon { stroke-width: 2.25; }
  .consent { bottom: calc(var(--bottom-nav-h) + var(--s-3)); }
  .ticket-box { bottom: var(--bottom-nav-h) !important; }
  .site-footer { padding-bottom: var(--s-4); }
}

/* ── 9. Show page: image with a scrim, moodier stage ───────────────────── */
.show-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.show-layout .ticket-box { border-radius: var(--r-xl); }
.show-layout h1 { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -0.03em; }

/* ── 10. Home extras ───────────────────────────────────────────────────── */
.deals-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: var(--r-xl); background: var(--surface-2);
  color: var(--text); text-decoration: none; border: 1px solid var(--line); transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.deals-card > span { flex: 1; display: grid; gap: 2px; }
.deals-card strong { font-size: var(--fs-lg); }
.deals-card .icon:first-child { width: 32px; height: 32px; color: var(--accent-text); }
.deals-card:hover { border-color: var(--accent); color: var(--text); }
@media (hover: hover) { .deals-card:hover { transform: translateY(-2px); } }
.city-tiles a { border-radius: var(--r-xl); min-height: 72px; }


/* ── 11. Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .show-card:hover, .show-card:active, .deals-card:hover { transform: none !important; }
  .show-card:hover .poster > img, .show-card:hover .poster > picture > img { transform: none !important; }
}
.night-pin.is-group { background: #FFFFFF; color: #0B0B10; border-color: #FF2D55; }
.map-cards { display: grid; gap: var(--s-3); }
.map-more { margin: 0; text-align: center; }

/* ── large text (200%): header wraps instead of pushing buttons off-screen ──── */
.site-header .bar { flex-wrap: wrap; row-gap: var(--s-2); padding-block: var(--s-1); }
.site-header .bar > .cluster { flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
/* the hero sits on a dark scrim in both themes */
.feature-hero .feature-title, .feature-hero .feature-title a { color: #FFFFFF; }
.hero-copy, .hero-copy > * { min-width: 0; }
.hero-search .input { min-width: 0; }
.hero-copy h1, .feature-title { overflow-wrap: break-word; }
.duo > * { min-width: 0; }
.band h2, .band p { overflow-wrap: break-word; }
.btn-lg, .band .btn { white-space: normal; max-width: 100%; text-align: center; height: auto; }
.prose a, main p a { overflow-wrap: anywhere; }
.auth-steps { flex-wrap: wrap; }
.auth-card { min-width: 0; max-width: 100%; }
.city-tiles > li, .city-tiles a { min-width: 0; overflow-wrap: anywhere; }
.hero-copy .stack > * { min-width: 0; }

/* ── UX pass (2026-10-08) ─────────────────────────────────────────────────
   Phones: the hero leaves room for the search to peek above the fold, so the page reads as "many shows", not "one ad". */
@media (max-width: 559px) { .feature-hero { min-height: 58vh; } }
/* Theme choice is rare: on phones it lives in the footer, not in the crowded header. */
@media (max-width: 719px) { .site-header .theme-btn { display: none; } }
/* Show pages on phones: the ticket bar takes the bottom bar's place (like the app's detail screens). */
@media (max-width: 719px) {
  :root:has(.ticket-box) { --bottom-nav-h: 0px; }
  body:has(.ticket-box) .bottom-nav { display: none; }
}

/* Listing pages on phones: shows reach the first screen. One line for count + sort, less air above the title,
   and List/Map becomes a floating pill above the bottom bar (only the view you can switch to is shown). */
@media (max-width: 719px) {
  main.section-sm:not(.home) { padding-top: var(--s-5); --stack-gap: var(--s-4) !important; }
  .results-bar { flex-wrap: nowrap; gap: var(--s-3); }
  .results-bar > p { white-space: nowrap; margin: 0; }
  .sort-links { flex-wrap: nowrap; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
  .sort-links > span:first-child { display: none; } /* the nav keeps its "Sort" label for screen readers */
  .view-switch { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom-nav-h) + var(--s-3));
    padding: 0; background: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .view-switch button { min-height: 48px; padding: 0 var(--s-5); background: transparent; color: var(--bg); font-weight: var(--fw-bold); }
  .view-switch button[aria-pressed="true"] { display: none; }
  .results-layout { padding-bottom: 72px; } /* room so the pill never covers the last card */
}
.chip-scroll { scroll-padding-inline: var(--gutter); }

/* ── Featured banner (design/QUESTIONS.md B1–B8) ──────────────────────────────
   Phones: one swipe row, 86% wide slides (a peek of the next), dots + pause. ≥720 px: a mosaic, lead tile + up to 3. */
[data-banner-slot] { background: var(--stage); }
/* A smaller cookie notice on phones so the first shows stay visible (buttons stay equal and full size). */
@media (max-width: 719px) {
  .consent { padding: var(--s-3) var(--s-4); gap: var(--s-2); font-size: var(--fs-xs); line-height: 1.45; }
  .consent p { margin: 0; }
}
.fb-head { display: none; }
.fbanner { position: relative; padding-block: var(--s-4) var(--s-2); }
.fb-track { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.fb-track::-webkit-scrollbar { display: none; }
.fb-slide { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }
.fbanner.fb-n1 .fb-slide { flex-basis: 100%; }
.fb-link { position: relative; display: block; height: 100%; border-radius: var(--r-xl); overflow: hidden; color: #FFFFFF; text-decoration: none;
  isolation: isolate; background: #101017; }
.fb-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fb-media { position: relative; aspect-ratio: 4 / 5; padding: 0; }
.fb-media picture, .fb-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-media img { object-fit: cover; object-position: var(--pos-m, 50% 33%); }
.fb-media img.is-broken { display: none; }
/* Readable text on any image: a strong dark gradient where the text sits (white text ≥ 4.5:1 on the bottom 45%). */
.fb-link::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,12,.94) 0%, rgba(8,8,12,.86) 30%, rgba(8,8,12,.45) 58%, rgba(8,8,12,0) 78%); }
.fb-body { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 6px; padding: var(--s-5); }
.fb-badge { justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--grad-badge); color: #FFFFFF;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; }
.fb-title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800;
  color: #FFFFFF; text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.fb-meta { margin: 0; color: #ECECF1; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.fb-text { margin: 0; color: #DADAE2; font-size: var(--fs-sm); }
.fb-foot { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.fb-cta { min-height: 48px; padding-inline: var(--s-6); border-radius: var(--r-pill); pointer-events: none; }
.fb-price { font-weight: var(--fw-bold); color: #FFFFFF; }
.fb-link:hover .fb-cta { filter: brightness(1.08); }
.fb-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-3) var(--gutter) 0; }
.fb-dots { display: flex; gap: 2px; }
.fb-dot { width: 32px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.fb-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.38); transition: width var(--dur-2) var(--ease-out); }
.fb-dot[aria-current="true"]::before { width: 22px; border-radius: var(--r-pill); background: #FFFFFF; }
.fb-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--r-md); }
.fb-pause { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #FFFFFF;
  display: grid; place-items: center; cursor: pointer; }
.fb-pause .icon { width: 18px; height: 18px; }
.fb-pause .i-play, .fb-pause[aria-pressed="true"] .i-pause { display: none; }
.fb-pause[aria-pressed="true"] .i-play { display: block; }
.fbanner:not([data-autoplay]) .fb-pause { display: none; }

/* Phones (owner, 9 Oct 2026: the big banner filled the first screen): a compact "Featured" row: the whole poster on the
   left, details on the right, over a blurred copy of the poster. About 160 px tall; the next card peeks in; swipe only. */
@media (max-width: 719px) {
  [data-banner-slot] { background: transparent; }
  .fbanner { padding-block: var(--s-3) var(--s-1); }
  .fb-head { display: block; margin: 0 0 var(--s-2); padding-inline: var(--gutter); }
  .fb-track { gap: var(--s-3); padding-bottom: var(--s-2); }
  .fb-slide { flex-basis: 88%; }
  .fbanner.fb-n1 .fb-slide { flex-basis: 100%; }
  .fb-link { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: center;
    min-height: 152px; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-lg); box-shadow: 0 10px 28px -14px rgba(10,10,20,.55); }
  /* No overlay over the poster: the blurred copy behind is dark enough for white text (≤ 42% brightness ≥ 4.5:1). */
  .fb-link::after { display: none; }
  .fb-media { position: static; aspect-ratio: auto; padding: 0; background: none; }
  .fb-media::before, .fb-media::after, .fb-media > .icon, .fb-media > .poster-art-title { display: none; }
  /* No poster (or it failed to load): the category colour block in its place, never an empty gap. */
  .fb-media:not(:has(picture img:not(.is-broken))) { width: 112px; height: 132px; border-radius: var(--r-sm);
    background: var(--art, linear-gradient(135deg, #FF2D55, #6D5BFF)); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
  /* the blurred copy fills the whole card */
  .fb-media .fb-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover;
    filter: blur(22px) saturate(1.2) brightness(.42); transform: none; z-index: 0; display: block; }
  /* the whole poster, never cropped (owner, 8 Oct) */
  .fb-media picture { position: relative; z-index: 2; display: grid; place-items: center; width: 112px; height: 132px; inset: auto; }
  .fb-media picture img { position: static; width: auto; height: auto; max-width: 112px; max-height: 132px; object-fit: contain;
    border-radius: var(--r-sm); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
  .fb-body { position: relative; inset: auto; z-index: 2; padding: 0; gap: 4px; align-content: center; }
  .fb-badge { padding: 2px 8px; font-size: 10px; }
  .fb-title { font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.02em; text-shadow: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fb-meta { font-size: var(--fs-xs); color: #D9D9E3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fb-text { display: none; }
  /* The whole card is the link: on phones the button becomes the price and an arrow. */
  .fb-foot { margin-top: 6px; gap: var(--s-2); align-items: center; }
  .fb-cta { display: none; }
  .fb-price { font-size: var(--fs-sm); }
  .fb-foot::after { content: "→" / ""; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); }
  .fb-controls { display: none; }
  [data-banner-slot] + .browse { padding-top: var(--s-2); }
}
@media (max-width: 379px) {
  .fb-link { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-3); }
  .fb-media picture { width: 84px; height: 112px; }
  .fb-media picture img { max-width: 84px; max-height: 112px; }
  .fb-media:not(:has(picture img:not(.is-broken))) { width: 84px; height: 112px; }
}
@media (min-width: 720px) {
  .fbanner { padding-block: var(--s-6) var(--s-4); }
  .fb-track { display: grid; overflow: visible; gap: var(--s-4); max-width: var(--container); margin-inline: auto;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .fb-slide { min-height: 0; }
  .fb-slide.is-lead { grid-row: span 3; }
  .fbanner.fb-n1 .fb-track, .fbanner.fb-n2 .fb-track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fbanner.fb-n1 .fb-track { grid-template-columns: minmax(0, 1fr); }
  .fbanner.fb-n2 .fb-slide.is-lead, .fbanner.fb-n1 .fb-slide.is-lead { grid-row: auto; }
  .fbanner.fb-n3 .fb-slide.is-lead { grid-row: span 2; }
  .fb-slide:nth-child(n+5) { display: none; }      /* the mosaic shows 4; a 5th stays a phone slide */
  .fb-media { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .fb-slide.is-lead .fb-media { min-height: 460px; }
  .fbanner.fb-n1 .fb-slide.is-lead .fb-media { aspect-ratio: 21 / 9; min-height: 0; }
  .fb-media img { object-position: var(--pos-d, 50% 33%); }
  .fb-slide:not(.is-lead) .fb-body { padding: var(--s-4); gap: 4px; }
  .fb-slide:not(.is-lead) .fb-title { font-size: var(--fs-lg); }
  .fb-slide:not(.is-lead) .fb-text, .fb-slide:not(.is-lead) .fb-meta { font-size: var(--fs-xs); }
  .fb-slide:not(.is-lead) .fb-cta { min-height: 36px; padding-inline: var(--s-4); font-size: var(--fs-sm); }
  .fb-slide.is-lead .fb-title { font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); max-width: 18ch; }
  .fb-slide.is-lead .fb-body { padding: var(--s-8); gap: var(--s-2); }
  .fb-controls { display: none; }
  .fb-link { transition: transform var(--dur-2) var(--ease-out); }
}
@media (min-width: 720px) and (hover: hover) { .fb-link:hover { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fb-link, .fb-dot::before { transition: none; } .fb-link:hover { transform: none; } }
/* Search leads the page; the banner follows straight after it on the same dark stage (B10).
   One centred, generous search box, no headline (B11). */
.search-stage.search-only { padding-block: var(--s-10) var(--s-6); }
.search-stage.search-only .hero-grid { display: block; }
.search-stage.search-only .hero-copy { max-width: 760px; margin-inline: auto; align-items: center; text-align: center; }
.search-stage.search-only .hero-search { width: 100%; max-width: 760px; margin-inline: auto; padding: 8px; }
.search-stage.search-only .hero-search .input { min-height: 60px; font-size: var(--fs-lg); }
.search-stage.search-only .hero-search .btn { min-height: 60px; padding-inline: var(--s-8); }
.search-stage.search-only .hero-when { justify-content: center; }
.search-stage.search-only .hero-posters { display: none; }
@media (max-width: 559px) {
  .search-stage.search-only { padding-block: var(--s-6) var(--s-4); }
  .search-stage.search-only .hero-search .input { min-height: 52px; font-size: var(--fs-md); }
  .search-stage.search-only .hero-search .btn { min-height: 52px; padding-inline: var(--s-5); }
  .search-stage.search-only .hero-when { justify-content: flex-start; }
}
.search-stage:has(+ [data-banner-slot] .fbanner) { padding-bottom: var(--s-6); }
@media (max-width: 559px) { .home > [data-banner-slot] { order: 0; } }

/* ── Eventbrite-style page (design/QUESTIONS.md E1–E6). The featured banner above stays as it is. ───────────── */
/* E2 header: one pill with search + place + round search button; phones use icons and the home search bar. */
.hdr-search { flex: 1; max-width: 560px; margin-inline: var(--s-4); display: flex; align-items: center; min-height: 48px; padding: 4px 4px 4px var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); }
.hdr-search:focus-within, .home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hdr-search input, .home-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-md); padding: 0 var(--s-2); min-height: 40px; }
.hdr-search input:focus, .home-search input:focus { outline: none; }
.hdr-search-icon { display: flex; color: var(--text-3); }
.hdr-sep { width: 1px; align-self: stretch; margin: 8px var(--s-1); background: var(--line); }
.hdr-loc { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.hdr-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-loc:hover { background: var(--surface-2); color: var(--text); }
.hdr-go { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
.hdr-go .icon { width: 18px; height: 18px; }
.hdr-go:hover { filter: brightness(1.08); }
.hdr-icon { display: none !important; }
@media (max-width: 899px) {
  .hdr-search, .hdr-nav { display: none !important; }
  .hdr-icon { display: inline-flex !important; }
}
.home-search { display: none; }
@media (max-width: 899px) {
  .home-search { display: flex; align-items: center; margin: var(--s-4) var(--gutter) var(--s-2); min-height: 52px; padding: 4px 4px 4px var(--s-4);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-2); }
  .home-search .hdr-loc { max-width: 120px; padding-inline: var(--s-2); }
  .home-search .hdr-loc [data-location-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* icon only on phones; still read out */
  body:has(.home-eb) .hdr-icon { display: none !important; }   /* the home search bar has both */
}
/* Light page: the home banner band keeps its dark stage (it is the featured area, unchanged). */

/* E3 categories as round icons (scroll on phones). */
.cat-circles { padding-top: var(--s-8); }
.cat-circles ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-5); justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.cat-circles ul::-webkit-scrollbar { display: none; }
.cat-circles li { flex: none; }
.cat-circles a { display: grid; justify-items: center; gap: var(--s-2); min-width: 88px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: center; }
.cat-circle { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text-2);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.cat-circle .icon { width: 32px; height: 32px; stroke-width: 1.5; }
.cat-circles a:hover .cat-circle { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.cat-circles a:focus-visible { outline: none; }
.cat-circles a:focus-visible .cat-circle { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 559px) { .cat-circles ul { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); gap: var(--s-3); }
  .cat-circle { width: 68px; height: 68px; } .cat-circle .icon { width: 26px; height: 26px; } .cat-circles a { min-width: 76px; font-size: var(--fs-xs); } }

/* E5 "Browse events in <place>" + tabs. */
.browse-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.browse-place { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; }
.browse-place:hover { border-color: var(--accent); }
.browse-place .icon { width: 18px; height: 18px; color: var(--accent-text); }
.browse-tabs { display: flex; gap: var(--s-6); margin: var(--s-4) 0 var(--s-4); border-bottom: 1px solid var(--line); }
.browse-cats { margin-bottom: var(--s-6); }
.browse-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--text-3); font-weight: var(--fw-semibold);
  text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.browse-tabs a:hover { color: var(--text); }
.browse-tabs a[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.browse-more { display: flex; justify-content: center; margin: var(--s-8) 0 0; }
.browse-more .btn { min-width: min(100%, 320px); }

/* E4 cards: wide image (16:9, focal-point crop), text below; four per row on desktop, one per row on phones. */
.show-card .poster { --poster-ratio: 16 / 9; border-radius: var(--r-lg); }
.show-card .poster::after { display: none; }
.show-card .poster-art { align-content: end; }
.show-card .card-body { gap: 2px; }
.show-card .title { font-size: var(--fs-lg); line-height: 1.25; }
.show-card .when { font-size: var(--fs-sm); }
.show-card .where { font-size: var(--fs-sm); color: var(--text-3); }
.show-card .price { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); margin-top: 2px; }
.poster .poster-tag { inset-inline-start: auto; inset-inline-end: var(--s-2); top: var(--s-2); }
.grid-cards.eb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
@media (max-width: 1079px) { .grid-cards.eb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .grid-cards.eb-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
@media (max-width: 719px) { .grid-cards.rail-sm { grid-auto-columns: 82%; } }
/* Phones: the Eventbrite order (search bar, banner, categories, browse, …), replacing the older poster-first order. */
@media (max-width: 559px) {
  .home.home-eb > * { order: 0; }
  .home.home-eb > .trust-strip { order: 0; margin-top: var(--s-8); }
}

/* Featured banner: tiles on desktop/tablet show the whole poster, never cropped (owner, 8 Oct), over a blurred copy. */
.fb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) brightness(.5) saturate(1.2); transform: scale(1.2); }
.fb-media { overflow: hidden; }
.fb-media picture img { object-fit: contain; object-position: center; }
/* Phones: see the compact "Featured" row above (owner, 9 Oct 2026; replaces the 8 Oct 16:9 card). */
@media (prefers-reduced-transparency: reduce) { .fb-bg { filter: brightness(.35); } }


/* ── Creators & influencers, highlighted (owner, 8 Oct) ─────────────────────── */
.duo.duo-one { grid-template-columns: minmax(0, 1fr); }
.creator-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center;
  padding: var(--s-6); border-radius: var(--r-xl); background: var(--grad-badge); color: #FFFFFF; text-decoration: none; }
.creator-band-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); }
.creator-band-icon .icon { width: 28px; height: 28px; }
.creator-band-text { display: grid; gap: 4px; }
.creator-band .eyebrow { color: #FFFFFF; opacity: .9; }
.creator-band .creator-band-text strong { color: #FFFFFF; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.02em; }
.creator-band .meta { color: #FFFFFF; opacity: .92; }
.creator-band-cta { grid-column: 1 / -1; justify-self: start; background: #FFFFFF; color: #3B0A2A; border-color: #FFFFFF; pointer-events: none; }
.creator-band:hover .creator-band-cta { filter: brightness(.95); }
.creator-band:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 559px) {
  .creator-band { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
  .creator-band-icon { display: none; }
  .creator-band .creator-band-text strong { font-size: var(--fs-lg); }
}
@media (min-width: 720px) {
  .creator-band { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--s-6) var(--s-8); }
  .creator-band-cta { grid-column: auto; }
}
.creator-line { display: flex; gap: var(--s-2); align-items: center; }
.creator-line .icon { flex: none; color: var(--accent); }
.site-header .hdr-nav a.nav-creators, .hdr-nav a.nav-creators { color: var(--accent); font-weight: var(--fw-bold); }
/* Sign in: pick an account type when you are new. */
.si-join { border-top: 1px solid var(--line); padding-top: var(--s-4); display: grid; gap: var(--s-3); }
.si-join-h { text-align: center; margin: 0; }
.si-join-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.si-join-grid a { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; padding: var(--s-3) var(--s-2); min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.si-join-grid a:hover { border-color: var(--accent); }
.si-join-grid .icon { color: var(--accent); width: 22px; height: 22px; }
.si-join-grid strong { font-size: var(--fs-sm); }
.si-join-grid span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
@media (max-width: 380px) { .si-join-grid { grid-template-columns: minmax(0, 1fr); } .si-join-grid a { grid-template-columns: auto 1fr; justify-items: start; text-align: start; } .si-join-grid span { grid-column: 2; } }

/* ── Sign in with Google / Apple (owner, 8 Oct) ─────────────────────────────── */
.social-btns { display: grid; gap: var(--s-2); }
.btn-social { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 48px; width: 100%;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong, var(--line)); font-weight: var(--fw-semibold); }
.btn-social:hover { background: var(--surface-2); }
.btn-social[data-social="apple"] { background: #000000; color: #FFFFFF; border-color: #000000; }
.btn-social[data-social="apple"]:hover { background: #1C1C1E; }
.social-logo { width: 20px; height: 20px; flex: none; }
.social-or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-1) 0 0; color: var(--text-3, var(--muted)); font-size: var(--fs-sm); }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Headings focused by script (screen readers start there) don't need a visible ring. */
#social h1[tabindex="-1"]:focus { outline: none; }

/* Footer with "Top cities" (SEO internal links): five columns on wide screens. */
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.listing-intro { max-width: 70ch; margin: 0; }
.show-state { margin: var(--s-4) 0; }

/* Blog (SSR, SEO brief 2.9) */
.blog-list { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-card-link { display: grid; gap: var(--s-2); color: inherit; text-decoration: none; }
.blog-card-link img, .blog-hero { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); }
.blog-card-link h2 { font-size: var(--fs-xl); margin: 0; }
.blog-card-link:hover h2 { text-decoration: underline; }
.blog-post article { max-width: 72ch; margin-inline: auto; }
.blog-body { font-size: 1.0625rem; line-height: 1.7; }
.blog-body h2 { margin-top: var(--s-8); font-size: var(--fs-2xl); }
.blog-body h3 { margin-top: var(--s-6); }
.blog-body p, .blog-body ul, .blog-body ol { margin: var(--s-3) 0; }
.blog-body a { color: var(--accent); }
.blog-body blockquote { border-left: 3px solid var(--accent); margin: var(--s-5) 0; padding: var(--s-1) var(--s-4); color: var(--text-2); }
.blog-more { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.blog-more a { color: inherit; }

/* Android "Get the app" card on phones (SEO brief 2.8): above the bottom navigation, dismissible, never over the cookie notice. */
.app-prompt { position: fixed; z-index: 40; left: var(--s-3); right: var(--s-3); bottom: calc(var(--bottom-nav-h) + var(--s-3));
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.app-prompt[hidden] { display: none; }
.app-prompt img { border-radius: 10px; flex: none; }
.app-prompt-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.app-prompt-text .meta { font-size: .875rem; color: var(--text-2); }
.app-prompt-close { flex: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; font-size: 1.5rem; line-height: 1; border-radius: var(--r-pill); cursor: pointer; }
.app-prompt-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 720px) { .app-prompt { display: none !important; } }
/* Listing pages have the floating Map/List switch: the card sits above it. */
body:has(.view-switch) .app-prompt { bottom: calc(var(--bottom-nav-h) + var(--s-3) + 64px); }