/* 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 */

  /* 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);

  /* 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;
}
/* 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; }

/* ─── 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: hidden;
  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);
}
.hero[data-bg] {
  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;
}
.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 {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: 1fr 1fr 200px auto;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  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: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;
}
.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);
  transition: background 140ms var(--ease);
}
.composer .submit:hover { background: var(--crimson-deep); }

@media (max-width: 800px) {
  .composer { grid-template-columns: 1fr; }
  .composer-cell { border-right: none; border-bottom: 1px solid var(--line); }
}

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

.system-shortcuts {
  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: 1fr 1fr 1fr 200px;
  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-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.filter-chip {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  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.4fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.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); }

@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, 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; }

/* ─── 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; }

  /* 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;
  }
  .amenity {
    width: 26px;
    height: 26px;
  }
  .amenity svg { width: 13px; height: 13px; }
  .amenity .tt { display: none; } /* no hover tooltips on touch */

  /* 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: 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; }
  .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-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)); }

  /* Card amenity icons: bump to 36px for thumb tap */
  .amenity { width: 36px; height: 36px; }
  .amenity svg { width: 17px; height: 17px; }

  /* 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 { width: 24px; height: 24px; }
  .amenity svg { width: 12px; height: 12px; }

  /* 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%; }

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

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