/* Wargames Nearby — Warhammer-keyed directory.
   Light parchment theme, saturated heraldic system colors,
   full-color photography, bold display typography.
   Reference: Warhammer studio mini photography (light backdrop)
   + Codex chapter pages (parchment + faction color + heraldic type). */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Surfaces — parchment, off-white, near-black */
  --bg:           oklch(0.945 0.014 85);   /* warm parchment */
  --bg-tint:      oklch(0.965 0.010 85);   /* paler parchment */
  --surface:      oklch(0.995 0.004 85);   /* card / panel */
  --surface-2:    oklch(0.970 0.012 85);   /* subtle elevated */
  --surface-deep: oklch(0.180 0.025 30);   /* dark hero overlay / footer */
  --surface-mid:  oklch(0.300 0.030 30);   /* secondary dark */
  --surface-track: oklch(0.930 0.018 85);  /* recessed groove behind segmented toggles */
  --surface-review: oklch(0.975 0.030 82); /* internal review surface: needs-review row */

  /* Text — deep sealed ink */
  --text:         oklch(0.180 0.020 30);   /* near-black, warm undertone */
  --text-muted:   oklch(0.420 0.018 30);
  --text-faint:   oklch(0.580 0.015 30);
  --text-inverse: oklch(0.965 0.012 85);
  --text-inverse-muted: oklch(0.935 0.018 85);  /* body copy on the dark hero */

  /* Brand action: Mephiston crimson + Imperial gold */
  --crimson:        oklch(0.495 0.205 25);
  --crimson-deep:   oklch(0.405 0.195 22);
  --crimson-bright: oklch(0.580 0.215 25);

  --gold:           oklch(0.725 0.160 85);
  --gold-deep:      oklch(0.580 0.155 80);
  --gold-bright:    oklch(0.820 0.150 88);

  /* Lines */
  --line:          oklch(0.860 0.018 85);
  --line-strong:   oklch(0.760 0.020 85);
  --line-dark:     oklch(0.250 0.020 30);

  /* ── System color identity — full saturation, faction-coded ── */
  /* On light surface, filled chip uses system bg + light text. */

  /* Slightly desaturated from full-vivid so colors read painted rather than printed,
     matching the aged-mini reference imagery. */
  --sys-40k:           oklch(0.495 0.175 25);    /* Mephiston crimson, aged */
  --sys-40k-on:        oklch(0.985 0.020 85);
  --sys-40k-soft:      oklch(0.945 0.052 25);

  --sys-aos:           oklch(0.450 0.160 250);   /* Stormcast storm blue, aged */
  --sys-aos-on:        oklch(0.985 0.020 85);
  --sys-aos-soft:      oklch(0.945 0.048 250);

  --sys-old-world:     oklch(0.595 0.135 88);    /* Bretonnian honey-ochre, aged */
  --sys-old-world-on:  oklch(0.180 0.030 35);
  --sys-old-world-soft:oklch(0.952 0.062 88);

  --sys-hh:            oklch(0.460 0.110 175);   /* Sons of Horus seafoam, aged */
  --sys-hh-on:         oklch(0.985 0.020 85);
  --sys-hh-soft:       oklch(0.948 0.046 175);

  --sys-kt:            oklch(0.405 0.090 235);   /* Kill Team gunmetal indigo */
  --sys-kt-on:         oklch(0.985 0.020 85);
  --sys-kt-soft:       oklch(0.942 0.035 235);

  --sys-necromunda:    oklch(0.575 0.155 55);    /* hive rust, aged */
  --sys-necromunda-on: oklch(0.180 0.030 35);
  --sys-necromunda-soft: oklch(0.952 0.062 55);

  --sys-warcry:        oklch(0.490 0.185 15);    /* Khorne ember, aged */
  --sys-warcry-on:     oklch(0.985 0.020 85);
  --sys-warcry-soft:   oklch(0.945 0.055 15);

  --sys-underworlds:   oklch(0.490 0.125 200);   /* arcane teal, aged */
  --sys-underworlds-on:oklch(0.985 0.020 85);
  --sys-underworlds-soft: oklch(0.948 0.046 200);

  --sys-bloodbowl:     oklch(0.490 0.130 145);   /* pitch green, aged */
  --sys-bloodbowl-on:  oklch(0.985 0.020 85);
  --sys-bloodbowl-soft:oklch(0.945 0.046 145);

  --sys-mtg:           oklch(0.475 0.082 80);    /* aged brass */
  --sys-mtg-on:        oklch(0.985 0.020 85);
  --sys-mtg-soft:      oklch(0.938 0.042 80);

  --sys-dnd:           oklch(0.530 0.115 85);    /* scroll gold, aged */
  --sys-dnd-on:        oklch(0.180 0.030 35);
  --sys-dnd-soft:      oklch(0.948 0.050 85);

  --sys-default:       oklch(0.455 0.020 30);
  --sys-default-on:    oklch(0.985 0.020 85);
  --sys-default-soft:  oklch(0.910 0.012 85);

  /* Reusable "painted" inset highlight + shadow for filled chips/badges */
  --paint-inset: inset 0 1px 0 oklch(1 0 0 / 0.22), inset 0 -1px 0 oklch(0 0 0 / 0.28);
  --paint-drop:  0 1px 2px oklch(0.20 0.020 30 / 0.18);

  /* Type */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --s-0: 0.25rem; --s-1: 0.5rem;  --s-2: 0.75rem;
  --s-3: 1rem;    --s-4: 1.5rem;  --s-5: 2rem;
  --s-6: 3rem;    --s-7: 4rem;    --s-8: 6rem;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --rail-w: 280px;
  --max-w: 1320px;

  --shadow-card: 0 1px 2px oklch(0.30 0.020 30 / 0.08), 0 4px 12px oklch(0.30 0.020 30 / 0.06);
  --shadow-card-hover: 0 4px 12px oklch(0.30 0.020 30 / 0.12), 0 12px 28px oklch(0.30 0.020 30 / 0.14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
}

/* Geographic landing pages: state → area → city → store. */
.geo-page .header { position: sticky; }
.geo-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: var(--s-5) 0 var(--s-7); position: relative; z-index: 2; }
.geo-breadcrumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: var(--s-4); color: var(--text-faint); font-size: .82rem; }
.geo-breadcrumbs a { color: var(--text-muted); }
.geo-heading { max-width: 780px; margin-bottom: var(--s-6); }
.geo-heading h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: var(--s-3); }
.geo-heading p { max-width: 68ch; color: var(--text-muted); font-size: 1.05rem; }
.geo-directory { margin: var(--s-6) 0; }
.geo-directory h2, .geo-results-head h2 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-3); }
.geo-place-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.geo-place { display: flex; justify-content: space-between; gap: var(--s-2); padding: .95rem 0; margin-right: var(--s-4); border-bottom: 1px solid var(--line); color: var(--text); }
.geo-place:hover strong { color: var(--crimson); }
.geo-place strong { font-family: var(--font-display); font-size: .9rem; letter-spacing: .03em; }
.geo-place span { color: var(--text-faint); font-size: .76rem; text-align: right; }
.geo-results { margin-top: var(--s-6); }
.geo-results-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--text); margin-bottom: var(--s-4); }
.geo-results-head h2 { margin-bottom: .65rem; }
.geo-results-head a { font-size: .82rem; font-weight: 700; }
.geo-store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.geo-store-grid > .ad-container { grid-column: 1 / -1; }
.geo-store { display: grid; grid-template-columns: 132px 1fr; min-width: 0; background: var(--surface); border-bottom: 2px solid var(--line-strong); }
.geo-store-photo { min-height: 142px; background: var(--surface-2); overflow: hidden; }
.geo-store-photo img { width: 100%; height: 100%; object-fit: cover; }
.geo-store-copy { padding: var(--s-3); min-width: 0; }
.geo-store h2 { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; margin-bottom: .25rem; }
.geo-store h2 a { color: var(--text); }
.geo-store p { color: var(--text-muted); font-size: .8rem; margin-bottom: .65rem; }
.geo-systems { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem; }
.geo-system { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .18rem .4rem; background: var(--surface-2); color: var(--text-muted); }
.geo-detail { font-size: .78rem; font-weight: 700; }
.browse-more { display: flex; justify-content: center; margin: var(--s-5) 0; }
.browse-mobile-ad-host { display: none; }
.load-more { background: var(--surface-deep); color: var(--text-inverse); padding: .75rem 1.25rem; border-radius: var(--r-md); font-weight: 700; }
.load-more:hover, .load-more:focus-visible { background: var(--crimson-deep); }

@media (max-width: 820px) {
  .geo-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .geo-store-grid { grid-template-columns: 1fr; }
  .browse-mobile-ad-host { display: block; grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .geo-shell { width: min(100% - 24px, 1120px); padding-top: var(--s-4); }
  .geo-place-grid { grid-template-columns: 1fr; }
  .geo-place { margin-right: 0; }
  .geo-store { grid-template-columns: 96px 1fr; }
  .geo-store-photo { min-height: 122px; }
}
/* Paper grain overlay — subtle, pinned to viewport, never overpowers content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.header, .shell, .footer { position: relative; z-index: 2; }

a { color: var(--crimson); text-decoration: none; transition: color 120ms var(--ease); }
a:hover { color: var(--crimson-deep); }

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ─── Typography ───────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.section-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.section-label::before {
  content: '';
  width: 24px;
  height: 3px;
  background: var(--crimson);
  flex-shrink: 0;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.meta {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ─── Top stripe + header ──────────────────────────────── */

.topstripe {
  height: 3px;
  background: linear-gradient(90deg,
    var(--crimson) 0%,
    var(--crimson) 33%,
    var(--gold) 33%,
    var(--gold) 66%,
    var(--surface-deep) 66%,
    var(--surface-deep) 100%);
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px oklch(0.30 0.020 30 / 0.06);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-mark {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--crimson);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: var(--s-5);
}
.nav a {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav a:hover { color: var(--crimson); }
.nav a.active { color: var(--text); position: relative; }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -22px;
  height: 3px;
  background: var(--crimson);
}

.location-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.location-pill:hover { border-color: var(--crimson); }
.location-pill .meta { font-size: 0.66rem; color: var(--text-faint); letter-spacing: 0.14em; }
.location-pill strong { font-weight: 700; }

.location-control {
  position: relative;
  margin-left: auto;
}

/* ─── Filter typeahead (browse + events) ───────────────── */

/* Replaces a <datalist>, which the browser draws in its own chrome, lists in
   full on focus, and pads with saved-address autofill entries. Shared by the
   browse filter row and the events filter panel, so it lives here rather than
   in either page's inline styles. Both fields need a positioned ancestor. */
.filter-search,
.filter-field { position: relative; }

.filter-menu {
  position: absolute;
  z-index: 90;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 5px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card-hover);
}
.filter-menu[hidden] { display: none; }
.filter-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: 700 0.76rem var(--font-body);
  text-align: left;
  cursor: pointer;
}
.filter-option:hover,
.filter-option:focus-visible,
.filter-option[aria-selected="true"] { background: var(--bg-tint); }
.filter-menu-empty {
  padding: 7px 8px;
  color: var(--text-faint);
  font: 600 0.72rem var(--font-body);
}

/* Suggestion list inside the location picker. Replaces a <datalist>, which the
   browser draws in its own chrome and pads with saved-address autofill. */
.location-suggest {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  padding: 4px;
}
.location-suggest[hidden] { display: none; }
.location-suggest-option {
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: 700 0.78rem var(--font-body);
  text-align: left;
  cursor: pointer;
}
.location-suggest-option:hover,
.location-suggest-option:focus-visible,
.location-suggest-option[aria-selected="true"] {
  background: var(--surface);
  color: var(--crimson);
}
.location-suggest-empty {
  padding: 7px 8px;
  color: var(--text-faint);
  font: 600 0.74rem var(--font-body);
}

.location-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 0.55rem;
  width: min(360px, calc(100vw - 24px));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 14px 36px oklch(0 0 0 / 0.24);
  padding: var(--s-3);
}
.location-menu[hidden] { display: none; }

.location-menu label {
  color: var(--text-faint);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.location-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
}

.location-menu-row input {
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 700 0.82rem var(--font-body);
  padding: 0 var(--s-2);
}

.location-menu button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 0 var(--s-3);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-menu button:hover {
  border-color: var(--crimson);
  color: var(--crimson);
}

.location-menu-note {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ─── Page shell ───────────────────────────────────────── */

.shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-8);
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  gap: var(--s-6);
  align-items: start;
}
.shell-narrow {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-8);
}
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
}

/* ─── HERO with battle-art background ──────────────────── */

.hero {
  position: relative;
  overflow: visible;
  margin-bottom: var(--s-6);
  border-radius: var(--r-md);
  background:
    linear-gradient(105deg,
      oklch(0.140 0.040 25 / 0.92) 0%,
      oklch(0.140 0.040 25 / 0.78) 35%,
      oklch(0.140 0.040 25 / 0.35) 70%,
      oklch(0.140 0.040 25 / 0.20) 100%),
    var(--surface-deep);
  color: var(--text-inverse);
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-bottom: 4px solid var(--crimson);
}
/* The hero art is served at the width it is displayed at, not at its 3840px
   master. Phones take the 800px file (56KB) and desktops the 1600px one
   (187KB), where the original was a single 1.63MB download for everyone. The
   default is declared here rather than inline on the element, because an
   inline custom property would outrank the media query below. */
.hero[data-bg] {
  --hero-bg: url('/wh_4-800.jpg');
  background:
    linear-gradient(105deg,
      oklch(0.140 0.040 25 / 0.94) 0%,
      oklch(0.140 0.040 25 / 0.82) 30%,
      oklch(0.140 0.040 25 / 0.42) 65%,
      oklch(0.140 0.040 25 / 0.20) 100%),
    var(--hero-bg, var(--surface-deep));
  background-size: cover;
  background-position: center right;
}
@media (min-width: 801px) {
  .hero[data-bg] { --hero-bg: url('/wh_4-1600.jpg'); }
}
.hero-eyebrow {
  color: var(--gold-bright);
  margin-bottom: var(--s-3);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  line-height: 0.92;
  letter-spacing: 0.015em;
  margin-bottom: var(--s-3);
  max-width: 14ch;
  color: var(--text-inverse);
  text-shadow: 0 2px 24px oklch(0 0 0 / 0.5);
}
.hero h1 .gold-rule {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: var(--gold);
  vertical-align: middle;
  margin: 0 0.2em 0.2em 0;
}
.hero p {
  max-width: 50ch;
  color: oklch(0.92 0.020 85);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 400;
}

/* ─── Composer (search row) ────────────────────────────── */

.composer {
  position: relative;
  z-index: 30;
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr 200px auto;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: visible;
  box-shadow: 0 4px 20px oklch(0 0 0 / 0.25);
}
.composer-cell {
  padding: var(--s-3) var(--s-3);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-cell:first-child {
  border-top-left-radius: var(--r-md);
  border-bottom-left-radius: var(--r-md);
}
.composer-cell:last-of-type { border-right: none; }
.composer-cell .meta { color: var(--text-faint); font-size: 0.66rem; }
.composer-cell select,
.composer-cell input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  outline: none;
  padding: 0;
  width: 100%;
}
.composer-cell select { appearance: none; cursor: pointer; padding-right: 20px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--crimson) 50%),
    linear-gradient(135deg, var(--crimson) 50%, transparent 50%);
  background-position: right 10px top 60%, right 5px top 60%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.near-cell {
  position: relative;
  z-index: 40;
}
.near-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: var(--s-2);
  right: var(--s-2);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 30px oklch(0 0 0 / 0.22);
}
.near-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
}
.near-option small {
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}
.near-option:hover,
.near-option:focus-visible {
  background: var(--bg-tint);
  color: var(--crimson);
  outline: none;
}
.near-option:hover small,
.near-option:focus-visible small {
  color: var(--crimson);
}
.near-menu-label {
  padding: 7px 9px 3px;
  color: var(--text-faint);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.near-menu-note {
  padding: 7px 9px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
}
.composer .submit {
  background: var(--crimson);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 0 var(--s-5);
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  transition: background 140ms var(--ease);
}
.composer .submit:hover { background: var(--crimson-deep); }

@media (max-width: 800px) {
  .composer { grid-template-columns: 1fr; }
  .composer-cell:first-child {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--r-md);
  }
  .composer-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .composer .submit {
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--r-md);
  }
}

/* ─── System shortcuts (hero) — faction badges ─────────── */

.system-shortcuts {
  position: relative;
  z-index: 1;
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.system-shortcuts .meta {
  color: oklch(0.85 0.020 85);
  font-weight: 700;
  margin-right: var(--s-2);
}
.system-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 8px 16px;
  background: var(--sys-default);
  color: var(--sys-default-on);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
  cursor: pointer;
  box-shadow: var(--paint-inset), var(--paint-drop);
}
.system-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--paint-inset), 0 6px 16px oklch(0 0 0 / 0.32);
}
.system-chip .count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.8;
  text-transform: none;
}

.system-chip[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.system-chip[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.system-chip[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.system-chip[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.system-chip[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.system-chip[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.system-chip[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.system-chip[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.system-chip[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }

/* ─── Section ──────────────────────────────────────────── */

.section { margin: var(--s-7) 0; }
.section-head {
  margin-bottom: var(--s-4);
}
.section-head .meta { margin-bottom: var(--s-1); }

/* ─── Store cards ──────────────────────────────────────── */

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}

.store-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.store-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sys-default);
  z-index: 3;
}
.store-card[data-sys="40k"]::before          { background: var(--sys-40k); }
.store-card[data-sys="aos"]::before          { background: var(--sys-aos); }
.store-card[data-sys="old-world"]::before    { background: var(--sys-old-world); }
.store-card[data-sys="horus-heresy"]::before { background: var(--sys-hh); }
.store-card[data-sys="kill-team"]::before    { background: var(--sys-kt); }
.store-card[data-sys="necromunda"]::before   { background: var(--sys-necromunda); }
.store-card[data-sys="warcry"]::before       { background: var(--sys-warcry); }
.store-card[data-sys="underworlds"]::before  { background: var(--sys-underworlds); }
.store-card[data-sys="blood-bowl"]::before   { background: var(--sys-bloodbowl); }

.store-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}
.store-card.featured { border-color: var(--gold); }
.store-card.featured::before { background: var(--gold); height: 5px; }

.store-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-tint);
}
.store-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
  transition: transform 320ms var(--ease);
}
.store-card:hover .store-photo img { transform: scale(1.04); }

.gw-badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-deep);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15), 0 2px 8px oklch(0 0 0 / 0.35);
}
.gw-badge svg { width: 11px; height: 11px; }

.distance-tag {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  padding: 5px 10px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.25);
}

.discount-tag {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-3);
  padding: 5px 10px;
  background: var(--crimson);
  color: var(--text-inverse);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  z-index: 2;
  box-shadow: var(--paint-inset), 0 2px 8px oklch(0 0 0 / 0.32);
}

.store-body {
  padding: var(--s-3) var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.store-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
}
.store-loc {
  font-size: 0.82rem;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.store-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.store-rating .stars { color: var(--gold-deep); letter-spacing: 0.04em; font-size: 0.9rem; }
.store-rating .num { color: var(--text); font-weight: 700; }

/* ─── System chips (cards) — filled by system ──────────── */

.store-systems {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.sys-tag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--sys-default);
  color: var(--sys-default-on);
  border-radius: var(--r-sm);
  box-shadow: var(--paint-inset);
}
.sys-tag[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.sys-tag[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.sys-tag[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.sys-tag[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.sys-tag[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.sys-tag[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.sys-tag[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.sys-tag[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.sys-tag[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }
.sys-tag[data-sys="mtg"]          { background: var(--sys-mtg);         color: var(--sys-mtg-on); }
.sys-tag[data-sys="dnd"]          { background: var(--sys-dnd);         color: var(--sys-dnd-on); }
.sys-tag:not(.primary) { opacity: 0.78; }

/* ─── Amenity icons row ────────────────────────────────── */

.store-amenities {
  display: flex;
  gap: var(--s-2);
  padding-top: var(--s-2);
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.amenity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  color: var(--text-faint);
  position: relative;
  border: 1px solid transparent;
}
.amenity.on {
  background: var(--surface-deep);
  color: var(--gold);
  border-color: var(--gold);
}
.amenity svg { width: 15px; height: 15px; }
.amenity .tt {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--surface-deep);
  color: var(--text-inverse);
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms var(--ease);
  z-index: 5;
}
.amenity:hover .tt { opacity: 1; }

/* ─── Next-event tag on card (colored by system) ───────── */

.next-event {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--sys-default-soft);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  position: relative;
}
.next-event[data-sys="40k"]          { background: var(--sys-40k-soft); }
.next-event[data-sys="aos"]          { background: var(--sys-aos-soft); }
.next-event[data-sys="old-world"]    { background: var(--sys-old-world-soft); }
.next-event[data-sys="horus-heresy"] { background: var(--sys-hh-soft); }
.next-event[data-sys="kill-team"]    { background: var(--sys-kt-soft); }
.next-event[data-sys="necromunda"]   { background: var(--sys-necromunda-soft); }
.next-event[data-sys="warcry"]       { background: var(--sys-warcry-soft); }
.next-event[data-sys="underworlds"]  { background: var(--sys-underworlds-soft); }
.next-event[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl-soft); }
.next-event[data-sys="mtg"]          { background: var(--sys-mtg-soft); }
.next-event[data-sys="dnd"]          { background: var(--sys-dnd-soft); }

.next-event-day {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  font-size: 0.68rem;
  background: var(--surface);
  padding: 3px 7px;
  border-radius: var(--r-sm);
}
.next-event-name { color: var(--text); font-weight: 600; }

/* ─── Page band — decorative photo divider ────────────── */

.page-band {
  position: relative;
  margin: var(--s-7) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 5 / 1;
  background-color: var(--surface-deep);
  background-size: cover;
  background-position: center 35%;
}
.page-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    oklch(0.14 0.025 30 / 0.55) 0%,
    transparent 35%,
    transparent 70%,
    oklch(0.14 0.025 30 / 0.40) 100%);
  z-index: 1;
}
.page-band-content {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-5);
  right: var(--s-5);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
}
.page-band-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 2px 12px oklch(0 0 0 / 0.6);
  max-width: 40ch;
  line-height: 1.15;
}
.page-band-attribution {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.88 0.020 85);
  opacity: 0.85;
  text-shadow: 0 1px 6px oklch(0 0 0 / 0.6);
}

/* 3-up gallery band — three portrait minis side by side */

.gallery-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2);
  margin: var(--s-7) 0;
}
.gallery-band-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--surface-deep);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
}
.gallery-band-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    oklch(0.14 0.025 30 / 0.75) 100%);
}
.gallery-band-tile .label {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 1px 8px oklch(0 0 0 / 0.7);
}
.gallery-band-tile .sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: oklch(0.90 0.018 85);
  opacity: 0.85;
  margin-top: 2px;
}

/* ─── Region tiles ─────────────────────────────────────── */

.regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
}
.region-tile {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  transition: all 140ms var(--ease);
  box-shadow: var(--shadow-card);
}
.region-tile:hover {
  border-color: var(--crimson);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.region-name { font-weight: 700; color: var(--text); font-size: 1.05rem; }
.region-state { font-size: 0.72rem; color: var(--text-faint); display: block; margin-top: 2px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.region-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--crimson);
}

/* ─── Right rail: events feed ──────────────────────────── */

.rail {
  position: sticky;
  top: 76px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.rail-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.rail-head .count {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--crimson);
  font-weight: 800;
}
.rail-scope {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}
.rail-scope strong { color: var(--text-muted); font-weight: 700; }

.event-list { display: flex; flex-direction: column; gap: var(--s-2); }
.event {
  padding: var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
  cursor: pointer;
  display: block;
}
.event:hover { background: var(--bg-tint); border-color: var(--line); }
.event-day {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
}
.event-day-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--sys-default);
  color: var(--sys-default-on);
  box-shadow: var(--paint-inset);
}
.event-day-name[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.event-day-name[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.event-day-name[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.event-day-name[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.event-day-name[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.event-day-name[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.event-day-name[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.event-day-name[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.event-day-name[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }
.event-day-name[data-sys="mtg"]          { background: var(--sys-mtg);         color: var(--sys-mtg-on); }
.event-day-name[data-sys="dnd"]          { background: var(--sys-dnd);         color: var(--sys-dnd-on); }
.event-day-name[data-sys="multi"]        { background: var(--gold);            color: var(--surface-deep); }

.live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
}
.live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.event-name {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.event-store {
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 2px;
  font-weight: 500;
}
.event-store .dist { color: var(--text-muted); }

.rail-empty {
  padding: var(--s-4) var(--s-2);
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
}
.rail-expand {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  text-align: center;
  font-weight: 600;
}

/* ─── Browse: filter row ───────────────────────────────── */

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-card);
}
.filter-group { display: flex; flex-direction: column; gap: var(--s-2); }
.filter-group .meta { font-size: 0.66rem; }
.filter-group input[type=search] {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 700 0.82rem var(--font-body);
  padding: 0 var(--s-2);
}
.filter-group input[type=search]::placeholder {
  color: var(--text-faint);
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.filter-chip {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: var(--bg-tint);
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms var(--ease);
  user-select: none;
}
.filter-chip:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.filter-chip.on {
  background: var(--crimson);
  color: var(--text-inverse);
  border-color: var(--crimson);
}
.filter-chip[data-system="40k"].on          { background: var(--sys-40k);         border-color: var(--sys-40k); }
.filter-chip[data-system="aos"].on          { background: var(--sys-aos);         border-color: var(--sys-aos); }
.filter-chip[data-system="old-world"].on    { background: var(--sys-old-world);   border-color: var(--sys-old-world); color: var(--sys-old-world-on); }
.filter-chip[data-system="horus-heresy"].on { background: var(--sys-hh);          border-color: var(--sys-hh); }
.filter-chip[data-system="kill-team"].on    { background: var(--sys-kt);          border-color: var(--sys-kt); }
.filter-chip[data-system="necromunda"].on   { background: var(--sys-necromunda);  border-color: var(--sys-necromunda); color: var(--sys-necromunda-on); }
.filter-chip[data-system="warcry"].on       { background: var(--sys-warcry);      border-color: var(--sys-warcry); }
.filter-chip[data-system="underworlds"].on  { background: var(--sys-underworlds); border-color: var(--sys-underworlds); }
.filter-chip[data-system="blood-bowl"].on   { background: var(--sys-bloodbowl);   border-color: var(--sys-bloodbowl); }

.radius-control {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.radius-control .meta { font-size: 0.66rem; }
.radius-control .value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--crimson);
  line-height: 1;
}
.radius-control input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  background: var(--line);
  height: 3px;
  border-radius: 1.5px;
  outline: none;
}
.radius-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--crimson);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.3);
}
.radius-control input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--crimson);
  cursor: pointer;
  border: 2px solid var(--surface);
}

@media (max-width: 900px) {
  .filter-row { grid-template-columns: 1fr; }
}

.browse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--line);
  gap: var(--s-3);
  flex-wrap: wrap;
}
.browse-count {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}
.browse-count strong {
  color: var(--text);
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin-right: 6px;
}

.sort-group {
  display: flex;
  gap: 2px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
}
.sort-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: all 120ms var(--ease);
}
.sort-btn:hover { color: var(--text); }
.sort-btn.active {
  background: var(--surface-deep);
  color: var(--text-inverse);
}

/* ─── Store detail page ────────────────────────────────── */

.breadcrumb {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb .sep { margin: 0 8px; color: var(--line-strong); }

.detail-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  align-items: start;
}

/* New media stack: one large feature plate + a 4-thumb strip */
.detail-media {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.feature-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-deep);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* No photo on file. The panel keeps its shape so the hero does not reflow,
   and says so rather than showing a broken image. */
.feature-image.is-empty::after {
  content: 'No photo yet';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
  transition: opacity 180ms var(--ease);
}
.feature-image .gw-badge {
  top: var(--s-3);
  right: var(--s-3);
}
.feature-image .feature-caption {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  padding: 5px 10px;
  background: oklch(0.14 0.025 30 / 0.78);
  color: var(--text-inverse);
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 2;
}
.feature-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.feature-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-tint);
  border: 1.5px solid transparent;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
  padding: 0;
}
.feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
.feature-thumb:hover { transform: translateY(-1px); }
.feature-thumb.active {
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px oklch(0.495 0.205 25 / 0.18);
}

/* Legacy 2x2 gallery: kept so older mockup variants still render */
.detail-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.detail-gallery img:first-child { grid-column: 1 / -1; }
.detail-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
  background: var(--bg-tint);
}

.detail-info { display: flex; flex-direction: column; }
.detail-tags {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.detail-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  line-height: 1.0;
  color: var(--text);
}
.detail-address {
  color: var(--text-muted);
  margin-bottom: var(--s-3);
  font-size: 0.95rem;
}
.detail-stats {
  display: flex;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  margin-bottom: var(--s-4);
}
.detail-stat { display: flex; flex-direction: column; gap: 2px; }
.detail-stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.detail-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.05;
}
.detail-stat-value .stars { color: var(--gold-deep); font-size: 1rem; letter-spacing: 0.04em; }

.detail-systems { margin-bottom: var(--s-4); }
.detail-systems h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
  font-weight: 700;
}
.system-stock-row { display: flex; flex-wrap: wrap; gap: 6px; }
.system-stock {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--bg-tint);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.system-stock.in-stock { color: var(--text-inverse); border-color: transparent; box-shadow: var(--paint-inset); }
.system-stock.in-stock[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.system-stock.in-stock[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.system-stock.in-stock[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.system-stock.in-stock[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.system-stock.in-stock[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.system-stock.in-stock[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.system-stock.in-stock[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.system-stock.in-stock[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.system-stock.in-stock[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }
.system-stock-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.detail-amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.detail-amenity {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-tint);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.detail-amenity.on {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
.detail-amenity.on svg { color: var(--crimson); }
.detail-amenity svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); }
.detail-amenity .label { font-weight: 700; }
.detail-amenity .sub { display: block; font-size: 0.72rem; color: var(--text-faint); font-weight: 500; margin-top: 1px; }

.detail-actions { display: flex; gap: var(--s-2); }
.btn {
  flex: 1;
  padding: var(--s-3);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: center;
  transition: all 120ms var(--ease);
  border: 1.5px solid;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.primary {
  background: var(--crimson);
  color: var(--text-inverse);
  border-color: var(--crimson);
}
.btn.primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); }
.btn.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn.ghost:hover { background: var(--bg-tint); border-color: var(--crimson); color: var(--crimson); }
/* The ICONS glyphs carry a viewBox but no width/height, so without this they
   size to the container. In the desktop row `flex: 1` squeezed them small by
   accident; at phone width `.detail-actions` goes column, each button spans the
   page, and a 24x24 viewBox rendered ~390px tall across the whole layout.
   Sized to match `.amenity svg`, the convention everywhere else. */
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Source / freshness pill — sits under the address line. Filled gold dot = verified,
   hollow ring = unverified. Per PRODUCT.md, provenance earns trust. */
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  margin-bottom: var(--s-3);
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}
.source-pill::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px oklch(0.725 0.160 85 / 0.18);
}
.source-pill.unverified::before {
  background: transparent;
  border: 1.5px solid var(--text-faint);
  box-shadow: none;
}
.source-pill .freshness { color: var(--text-faint); font-weight: 500; }
.source-pill .sep { color: var(--line-strong); margin: 0 4px; }

/* "This week here" callout in the hero info panel — promotes the next 1-2 events
   at THIS store. Adjacent to the action buttons, so deciding whether to drive
   today/this week is one glance, not a scroll. */
.hero-week {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.hero-week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.hero-week-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}
.hero-week-jump {
  font-size: 0.7rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hero-week-jump a { color: var(--text-muted); }
.hero-week-jump a:hover { color: var(--crimson); }
.hero-week-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.hero-week-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.3;
}
.hero-week-row .when {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--sys-default);
  color: var(--sys-default-on);
  border-radius: var(--r-sm);
  box-shadow: var(--paint-inset);
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
}
.hero-week-row .when[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.hero-week-row .when[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.hero-week-row .when[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.hero-week-row .when[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.hero-week-row .when[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.hero-week-row .when[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.hero-week-row .when[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.hero-week-row .when[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.hero-week-row .when[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }
.hero-week-row .when[data-sys="mtg"]          { background: var(--sys-mtg);         color: var(--sys-mtg-on); }
.hero-week-row .when[data-sys="dnd"]          { background: var(--sys-dnd);         color: var(--sys-dnd-on); }
.hero-week-row .when[data-sys="multi"]        { background: var(--gold);            color: var(--surface-deep); }
.hero-week-row .what {
  flex: 1;
  min-width: 0;
}
.hero-week-row .what strong { color: var(--text); font-weight: 600; }
.hero-week-row .what .sub {
  display: block;
  font-size: 0.74rem;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.hero-week-empty {
  font-size: 0.86rem;
  color: var(--text-faint);
  font-style: italic;
}

/* Tight key-amenities list in the info panel (replaces the 6-cell .detail-amenities
   grid here — comparing cells is for browse/list pages, not detail). */
.hero-amenities {
  margin-bottom: var(--s-3);
}
.hero-amenities-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.hero-amenities-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--s-3);
  font-size: 0.9rem;
  color: var(--text);
}
.hero-amenities-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
}
.hero-amenities-list svg {
  width: 16px;
  height: 16px;
  color: var(--crimson);
  flex-shrink: 0;
}
.hero-amenities-list li .sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 0;
  letter-spacing: 0.02em;
}

/* Pricing note — text-only, no percentage, when discount data isn't verified. */
.pricing-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: var(--s-2);
  font-style: italic;
  line-height: 1.45;
}
.pricing-note strong { font-weight: 700; font-style: normal; color: var(--text); }

/* Schedule strip: per-day verification dot in the corner. Filled gold = the event
   came from the store's schedule; hollow ring = mock/inferred. Pairs with a
   legend at the strip head. */
.schedule-day { position: relative; }
.schedule-day-source {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.35);
  z-index: 1;
}
.schedule-day-source.mock {
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.65;
  box-shadow: none;
}
.schedule-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.7rem;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.schedule-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.schedule-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.schedule-legend-dot.mock {
  background: transparent;
  border: 1.5px solid var(--text-faint);
}

/* Grouped insights — five tip categories (pro_tip, what_to_expect, first_timer,
   money_saver, best_time) get small labeled bands so readers find what they want.
   Money saver gets a gold marker (signals value); the rest crimson. */
.insights-grouped {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.insight-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insight-group-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.insight-group-label::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--crimson);
  transform: rotate(45deg);
  box-shadow: var(--paint-inset);
  flex-shrink: 0;
}
.insight-group[data-kind="money_saver"] .insight-group-label { color: var(--gold-deep); }
.insight-group[data-kind="money_saver"] .insight-group-label::before { background: var(--gold); }
.insight-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.insight-group-list p {
  margin: 0;
}

/* Mock indicator inline within copy — small, low-emphasis */
.inline-mock {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg-tint);
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 2px;
  vertical-align: 2px;
}

/* Events rail row source indicator */
.event-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.event-source::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.event-source.mock::before {
  background: transparent;
  border: 1.2px solid currentColor;
}

@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; }
}

/* ─── Schedule strip ───────────────────────────────────── */

.schedule {
  margin: var(--s-6) 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.schedule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.schedule-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-1);
}
.schedule-day {
  padding: var(--s-2);
  background: var(--bg-tint);
  border-radius: var(--r-sm);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  border: 1px solid var(--line);
}
.schedule-day-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.schedule-day.has-event { border-color: transparent; }
.schedule-day[data-sys="40k"]          { background: var(--sys-40k);         color: var(--sys-40k-on); }
.schedule-day[data-sys="40k"] .schedule-day-name { color: var(--sys-40k-on); opacity: 0.85; }
.schedule-day[data-sys="aos"]          { background: var(--sys-aos);         color: var(--sys-aos-on); }
.schedule-day[data-sys="aos"] .schedule-day-name { color: var(--sys-aos-on); opacity: 0.85; }
.schedule-day[data-sys="old-world"]    { background: var(--sys-old-world);   color: var(--sys-old-world-on); }
.schedule-day[data-sys="old-world"] .schedule-day-name { color: var(--sys-old-world-on); opacity: 0.85; }
.schedule-day[data-sys="horus-heresy"] { background: var(--sys-hh);          color: var(--sys-hh-on); }
.schedule-day[data-sys="horus-heresy"] .schedule-day-name { color: var(--sys-hh-on); opacity: 0.85; }
.schedule-day[data-sys="kill-team"]    { background: var(--sys-kt);          color: var(--sys-kt-on); }
.schedule-day[data-sys="kill-team"] .schedule-day-name { color: var(--sys-kt-on); opacity: 0.85; }
.schedule-day[data-sys="necromunda"]   { background: var(--sys-necromunda);  color: var(--sys-necromunda-on); }
.schedule-day[data-sys="necromunda"] .schedule-day-name { color: var(--sys-necromunda-on); opacity: 0.85; }
.schedule-day[data-sys="warcry"]       { background: var(--sys-warcry);      color: var(--sys-warcry-on); }
.schedule-day[data-sys="warcry"] .schedule-day-name { color: var(--sys-warcry-on); opacity: 0.85; }
.schedule-day[data-sys="underworlds"]  { background: var(--sys-underworlds); color: var(--sys-underworlds-on); }
.schedule-day[data-sys="underworlds"] .schedule-day-name { color: var(--sys-underworlds-on); opacity: 0.85; }
.schedule-day[data-sys="blood-bowl"]   { background: var(--sys-bloodbowl);   color: var(--sys-bloodbowl-on); }
.schedule-day[data-sys="blood-bowl"] .schedule-day-name { color: var(--sys-bloodbowl-on); opacity: 0.85; }
.schedule-day[data-sys="multi"]        { background: var(--gold);            color: var(--surface-deep); }
.schedule-day[data-sys="multi"] .schedule-day-name { color: var(--surface-deep); opacity: 0.85; }

.schedule-evt {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}
.schedule-evt-time {
  font-size: 0.66rem;
  opacity: 0.75;
  font-weight: 500;
  margin-top: 1px;
}

/* ─── Two-column callouts ──────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-6) 0;
}
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

.callout {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.callout h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  color: var(--text);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--crimson);
  display: inline-block;
}
.callout-list { display: flex; flex-direction: column; gap: var(--s-3); }
.callout-item {
  position: relative;
  padding-left: var(--s-4);
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.callout-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 2px;
  background: var(--crimson);
}
.callout-item strong { color: var(--text); font-weight: 700; }

/* ─── Landmarks ────────────────────────────────────────── */

.landmarks { margin: var(--s-6) 0; }
.landmark-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
}
.landmark {
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
}
.landmark-name { color: var(--text); font-weight: 600; }
.landmark-type { font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; font-weight: 600; }

/* ─── Not found ────────────────────────────────────────── */

/* The shell is a two-column grid expecting the events rail. The 404 has no
   rail, so it collapses to a single column rather than leaving a 280px gap. */
.shell-single { grid-template-columns: 1fr; }

.notfound-lede {
  max-width: 56ch;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--s-5);
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
/* .btn is flex:1 for the store-detail action row; here the buttons size to
   their own labels instead of stretching across the page. */
.notfound-actions .btn { flex: 0 0 auto; padding: var(--s-3) var(--s-4); }

/* ─── Footer ───────────────────────────────────────────── */

.footer {
  background: var(--surface-deep);
  color: var(--text-inverse);
  padding: var(--s-6) var(--s-5);
  margin-top: var(--s-8);
  border-top: 4px solid var(--crimson);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-5);
}
.footer-inner h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  color: var(--gold);
}
.footer-inner p, .footer-inner li {
  font-size: 0.86rem;
  color: oklch(0.78 0.015 85);
  line-height: 1.7;
}
.footer-inner ul { list-style: none; }
.footer-inner a { color: oklch(0.85 0.012 85); }
.footer-inner a:hover { color: var(--gold-bright); }

.fineprint {
  max-width: var(--max-w);
  margin: var(--s-5) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid oklch(0.32 0.020 30);
  font-size: 0.74rem;
  color: oklch(0.65 0.015 85);
  letter-spacing: 0.04em;
}

/* ─── Mock data flag ───────────────────────────────────── */

.mock-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--crimson);
  color: var(--text-inverse);
  border-radius: 2px;
  vertical-align: middle;
}

/* ─── Utilities ────────────────────────────────────────── */

.flex { display: flex; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-3 { margin-bottom: var(--s-3); }

/* ═══════════════════════════════════════════════════════
   MOBILE ADAPTATION
   The design is desktop-first. The blocks below rework
   layout for tablet (≤1000) and phone (≤768, ≤480), not
   just shrinking pixels — restructuring info density,
   collapsing parallel layouts to sequential ones, and
   bumping touch targets to 36–44px minimums.
   ═══════════════════════════════════════════════════════ */

/* ─── Tablet & below: rail moves below content ─────────── */

@media (max-width: 1000px) {
  .rail {
    position: static;
    top: auto;
  }
  /* Cap rail height when stacked — it's a secondary surface, not the focus */
  .rail .event-list { max-height: 480px; overflow-y: auto; }
}

/* ─── Phone (≤768) ─────────────────────────────────────── */

@media (max-width: 768px) {

  /* Tighter page rhythm */
  .shell {
    padding: var(--s-3) var(--s-2) var(--s-5);
    gap: var(--s-4);
  }
  .shell-narrow { padding: var(--s-3) var(--s-2) var(--s-5); }

  /* Header: brand row + nav row stacked, scroll-nav if it overflows */
  .header-inner {
    flex-wrap: wrap;
    padding: var(--s-2) var(--s-3);
    gap: var(--s-2);
  }
  .brand { font-size: 0.92rem; letter-spacing: 0.13em; }
  .brand-mark { width: 20px; height: 20px; }
  .brand-mark svg { width: 17px; height: 17px; }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: var(--s-3);
    padding-top: var(--s-1);
    border-top: 1px solid var(--line);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    font-size: 0.7rem;
    padding: 6px 0;
    flex-shrink: 0;
  }
  .nav a.active::after { bottom: -6px; height: 2px; }
  .location-pill {
    margin-left: auto;
    padding: 5px 9px;
    font-size: 0.74rem;
  }
  .location-pill .meta { display: none; }
  .location-control {
    margin-left: auto;
  }
  .location-menu {
    right: 0;
  }

  /* Hero: tight padding, dial back the display type */
  .hero {
    padding: var(--s-3) var(--s-3) var(--s-3);
    margin-bottom: var(--s-4);
  }
  .hero h1 {
    font-size: clamp(1.35rem, 6vw, 2.1rem);
    line-height: 0.98;
    max-width: 100%;
    margin-bottom: var(--s-1);
  }
  .hero h1 .gold-rule { width: 32px; height: 2px; }
  .hero p {
    font-size: 0.78rem;
    max-width: 100%;
    line-height: 1.4;
  }
  .hero-eyebrow { margin-bottom: var(--s-1); font-size: 0.58rem; }

  /* Composer: vertical stack with TIGHT cells — label inline above value */
  .composer { margin-top: var(--s-3); }
  .composer-cell {
    padding: 6px var(--s-3);
    border-right: none;
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  .composer-cell:last-of-type { border-bottom: none; }
  .composer-cell .meta { font-size: 0.56rem; line-height: 1.1; margin-bottom: 1px; }
  .composer-cell input, .composer-cell select {
    font-size: 0.85rem;
    line-height: 1.2;
    min-height: 18px;
  }
  .composer .submit {
    padding: var(--s-2);
    font-size: 0.72rem;
    min-height: 40px;
    letter-spacing: 0.14em;
  }

  /* System shortcuts: chips wrap, smaller */
  .system-shortcuts { margin-top: var(--s-3); gap: 5px; }
  .system-shortcuts .meta { font-size: 0.62rem; }
  .system-chip {
    padding: 6px 11px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    min-height: 32px;
  }
  .system-chip .count { font-size: 0.62rem; }

  /* Section headings */
  .section { margin: var(--s-4) 0; }
  .section-head { margin-bottom: var(--s-2); }
  .section-head .meta { font-size: 0.62rem; }
  .section-label { font-size: 0.92rem; letter-spacing: 0.08em; gap: var(--s-2); }
  .section-label::before { width: 14px; height: 2px; }

  /* ─── Store cards: HORIZONTAL list view ─────────────── */
  /* Photo becomes a square thumbnail on the left, info on the right.
     Cuts card height ~3× vs the desktop vertical layout. */
  .stores-grid {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .store-card {
    flex-direction: row;
    align-items: stretch;
  }
  .store-photo {
    width: 110px;
    aspect-ratio: auto;
    flex-shrink: 0;
    align-self: stretch;
  }
  .store-photo img { height: 100%; }
  /* Photo overlays repositioned for thumbnail */
  .gw-badge {
    top: 5px; right: 5px; left: 5px;
    padding: 2px 4px;
    font-size: 0.54rem;
    letter-spacing: 0.10em;
    justify-content: center;
    gap: 3px;
  }
  .gw-badge svg { width: 8px; height: 8px; }
  .distance-tag {
    bottom: 5px; left: 5px;
    padding: 2px 5px;
    font-size: 0.62rem;
  }
  .discount-tag {
    bottom: 5px; right: 5px;
    padding: 2px 5px;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
  /* Body becomes the dominant column */
  .store-body {
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
    gap: 4px;
    min-width: 0; /* allow text-overflow to work */
    flex: 1;
  }
  .store-name {
    font-size: 0.95rem;
    letter-spacing: 0.005em;
    line-height: 1.15;
  }
  .store-loc { font-size: 0.72rem; }
  .store-rating { font-size: 0.74rem; gap: 4px; }
  .store-rating .stars { font-size: 0.78rem; }
  .store-systems { gap: 3px; }
  .sys-tag { padding: 2px 6px; font-size: 0.6rem; letter-spacing: 0.06em; }
  .next-event {
    padding: 4px 6px;
    font-size: 0.7rem;
    gap: 6px;
  }
  .next-event-day { font-size: 0.58rem; padding: 2px 4px; }
  /* Amenities row: tighter and the icons get smaller */
  .store-amenities {
    padding-top: 4px;
    gap: 5px;
  }
  /* Touch has no hover, so show labels inline and only for amenities present */
  .store-amenities { flex-wrap: wrap; }
  .amenity {
    width: auto;
    height: auto;
    gap: 5px;
    padding: 4px 8px;
  }
  .amenity:not(.on) { display: none; }
  .amenity svg { width: 13px; height: 13px; }
  .amenity .tt {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    background: none;
    color: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  /* Region tiles: 2-up, much tighter */
  .regions-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .region-tile {
    padding: var(--s-2) var(--s-3);
    align-items: center;
  }
  .region-name { font-size: 0.92rem; }
  .region-state { font-size: 0.62rem; letter-spacing: 0.10em; }
  .region-count { font-size: 1.2rem; }

  /* Page-band: taller aspect so the quote can breathe */
  .page-band {
    aspect-ratio: 4 / 3;
    margin: var(--s-5) 0;
  }
  .page-band-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    bottom: var(--s-3);
    left: var(--s-3);
    right: var(--s-3);
  }
  .page-band-quote {
    font-size: 1.05rem;
    line-height: 1.25;
    max-width: 100%;
  }
  .page-band-attribution { font-size: 0.66rem; }

  /* Gallery-band: stack to single column so each tile is large */
  .gallery-band { grid-template-columns: 1fr; gap: var(--s-3); }
  .gallery-band-tile { aspect-ratio: 4 / 3; }

  /* Browse: filter row stays vertical, sort group scrolls horizontally */
  .filter-row { padding: var(--s-3); gap: var(--s-3); }
  .browse-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
  }
  .sort-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sort-group::-webkit-scrollbar { display: none; }
  .sort-btn { flex-shrink: 0; padding: 9px 14px; font-size: 0.72rem; min-height: 36px; }
  .filter-chip { padding: 7px 12px; font-size: 0.72rem; min-height: 36px; }

  /* Schedule strip: 7-col grid becomes vertical day-row list */
  .schedule { padding: var(--s-3); }
  .schedule-week { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .schedule-day {
    min-height: auto;
    padding: var(--s-2) var(--s-3);
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
  }
  .schedule-day-name {
    min-width: 48px;
    flex-shrink: 0;
  }
  .schedule-evt { flex: 1; min-width: 0; }
  .schedule-evt-time { display: inline; margin-left: 8px; }

  /* Detail hero: stack, slightly tighter */
  .detail-hero { gap: var(--s-3); margin-bottom: var(--s-4); }
  .detail-gallery { aspect-ratio: 4 / 3; }
  .detail-media { gap: var(--s-1); }
  .feature-image { aspect-ratio: 4 / 3; }
  /* One scrolling row instead of a wrapping 4-col grid. With five photos the
     grid ran to two rows -- 210px of secondary browsing that pushed the store's
     own name below the fold. The fifth thumb peeking is the scroll affordance. */
  .feature-thumbs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .feature-thumbs::-webkit-scrollbar { display: none; }
  .feature-thumb {
    aspect-ratio: 4 / 3;
    flex: 0 0 22%;
    scroll-snap-align: start;
  }
  .detail-name { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .detail-stats {
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
    padding: var(--s-2) 0;
  }
  .detail-stat-value { font-size: 1.25rem; }
  .detail-amenities { grid-template-columns: 1fr 1fr; gap: var(--s-1); }
  .detail-amenity { padding: var(--s-2); gap: var(--s-1); }
  .detail-actions { flex-wrap: wrap; gap: var(--s-2); }
  .btn { min-height: 44px; padding: var(--s-2) var(--s-3); flex: 1 1 calc(50% - var(--s-1)); }

  /* New hero components — keep dense and one-thumb-tall on phones */
  .source-pill { font-size: 0.72rem; margin-bottom: var(--s-2); }
  .hero-week { padding: var(--s-2) var(--s-3); }
  .hero-week-row { font-size: 0.88rem; }
  .hero-week-row .when { min-width: 56px; font-size: 0.66rem; padding: 3px 6px; }
  .hero-amenities-list { grid-template-columns: 1fr; gap: 6px; font-size: 0.88rem; }
  .pricing-note { font-size: 0.74rem; }

  /* Schedule strip: at this width the per-day dot moves to a leading marker on
     the day row (since the strip itself becomes a vertical list) */
  .schedule-day-source { top: 50%; right: var(--s-2); transform: translateY(-50%); }
  .schedule-legend { font-size: 0.62rem; gap: var(--s-2); }

  /* Grouped insights: stack at full width, tighter rhythm */
  .insights-grouped { gap: var(--s-3); }
  .insight-group-label { font-size: 0.66rem; letter-spacing: 0.12em; gap: 7px; }
  .insight-group-list { font-size: 0.88rem; }

  /* Card amenity chips: reach a thumb-sized target with min-height, not a
     fixed box. The labeled treatment above needs auto width for its inline
     label; a 36px square clipped it and let the nowrap text spill. */
  .amenity { min-height: 36px; padding: 6px 10px; }
  .amenity svg { width: 15px; height: 15px; }

  /* Events rail: when stacked, rail head and scope sit horizontally */
  .rail { padding: var(--s-3); }
  .rail-head h3 { font-size: 0.95rem; }
  .event { padding: var(--s-2) var(--s-2); min-height: 56px; }
  .event-name { font-size: 0.86rem; }

  /* Two-col callouts */
  .two-col { gap: var(--s-3); margin: var(--s-5) 0; }
  .callout { padding: var(--s-3); }
  .callout h3 { font-size: 0.95rem; }

  /* Landmarks */
  .landmark-list { grid-template-columns: 1fr 1fr; }

  /* Footer: full stack */
  .footer { padding: var(--s-5) var(--s-3); margin-top: var(--s-6); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-4); }

  /* Reduce body grain a touch — it's more visible at small DPI */
  body::before { opacity: 0.04; }
}

/* ─── Tight phone (≤480) — finer compaction ─────────────── */

@media (max-width: 480px) {

  .shell { padding: var(--s-2) var(--s-2) var(--s-5); gap: var(--s-3); }

  /* Header: brand smaller, location pill compact */
  .brand { font-size: 0.84rem; letter-spacing: 0.11em; }
  .nav { gap: var(--s-2); }
  .nav a { font-size: 0.66rem; letter-spacing: 0.08em; }
  .location-pill {
    padding: 4px 7px;
    font-size: 0.68rem;
    border-radius: var(--r-sm);
  }
  .location-pill strong { font-weight: 600; }

  /* Hero — final shrink */
  .hero { padding: var(--s-3) var(--s-2) var(--s-3); }
  .hero h1 { font-size: 1.25rem; line-height: 1; letter-spacing: 0.015em; }
  .hero h1 .gold-rule { width: 26px; height: 2px; }
  .hero p { font-size: 0.74rem; line-height: 1.35; }
  .hero-eyebrow { font-size: 0.54rem; }

  /* Composer: even tighter at small phone */
  .composer-cell { padding: 5px var(--s-2); }
  .composer-cell .meta { font-size: 0.52rem; }
  .composer-cell input, .composer-cell select { font-size: 0.82rem; }
  .composer .submit { min-height: 38px; font-size: 0.68rem; }

  /* Store cards stay horizontal but get tighter */
  .store-photo { width: 96px; }
  .store-body { padding: var(--s-1) var(--s-2) var(--s-1) var(--s-2); }
  .store-name { font-size: 0.9rem; }
  .amenity { padding: 3px 7px; }
  .amenity svg { width: 12px; height: 12px; }
  .amenity .tt { font-size: 0.6rem; }

  /* Regions stay 2-up but tighter */
  .region-tile { padding: var(--s-2); }
  .region-name { font-size: 0.85rem; }
  .region-count { font-size: 1.1rem; }

  /* Detail page: stack stats and actions vertically */
  .detail-stats { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .detail-amenities { grid-template-columns: 1fr; }
  .detail-actions { flex-direction: column; }
  .btn { flex: 1 1 100%; }
  /* New components at tight phone */
  .hero-week-row { flex-direction: row; align-items: flex-start; gap: var(--s-1); }
  .feature-thumbs { gap: 3px; }

  /* Landmark list 1 col */
  .landmark-list { grid-template-columns: 1fr; }

  /* Top stripe thinner */
  .topstripe { height: 2px; }
}