:root { color-scheme: light; }
  *, *::before, *::after { box-sizing: border-box; }
  body {
    font-family: 'Nunito', 'Nunito Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 900px; margin: 0 auto; padding: 28px 20px 72px;
    color: var(--ink); background: var(--sand); line-height: 1.65;
  }
  a { color: var(--teal-deep); }
  a:hover { color: var(--teal); }

  header.top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 24px;
    border-bottom: 1px solid rgba(74,52,40,0.14);
  }
  header.top a.brand {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; letter-spacing: -0.01em;
    text-decoration: none; color: var(--ink); font-size: 1.2rem;
  }
  header.top a:not(.brand) {
    font-size: 0.86rem; font-weight: 700; color: var(--teal-deep); text-decoration: none;
  }
  header.top a:not(.brand):hover { text-decoration: underline; }

  /* Accessibility (2026-10-18): the breadcrumb was dimmed with opacity
     (2.28:1); a solid ink tint keeps the soft look at 4.5:1+, and the
     links are underlined so they are not told apart by colour alone. */
  nav.breadcrumb {
    font-size: 0.8rem; color: rgba(74,52,40,0.8);
    margin-bottom: 22px; letter-spacing: 0.01em;
  }
  nav.breadcrumb a { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; opacity: 1; }
  nav.breadcrumb a:hover { text-decoration-thickness: 2px; }

  h1 {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 2rem;
    line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 6px;
  }
  /* Contrast (2026-10-19, review pass 5): one solid muted token instead of opacity (was 2.57:1). */
  .subtitle { color: var(--ink-muted, #6B5D54); font-size: 1.02rem; margin: 0 0 26px; }

  .card-grid { padding: 0; margin: 0; }
  .venue-card, .category-card {
    list-style: none; background: var(--paper);
    border: 1px solid rgba(74,52,40,0.10); border-radius: 14px;
    padding: 18px 20px; margin-bottom: 14px;
    box-shadow: 0 8px 20px -16px rgba(74,52,40,0.35);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }
  /* Give every shared venue listing card a small regional visual while
     businesses are still supplying their own photography. Event cards keep
     their event-specific presentation. */
  li.venue-card:not(.whatson-event-card) {
    position: relative;
    padding-top: 112px !important;
    background-image:
      linear-gradient(100deg, rgba(25,53,57,0.76), rgba(25,53,57,0.18)),
      url('/images/venue-hero-okanagan.a01552e12e24.jpg?v=a01552e12e24') !important;
    background-position: center top !important;
    background-size: 100% 92px !important;
    background-repeat: no-repeat !important;
  }
  li.venue-card:not(.whatson-event-card) > .venue-top { padding-top: 0 !important; }
  .venue-card h2, .category-card h2 {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.12rem; margin: 0 0 5px;
  }
  .venue-card h2 a, .category-card h2 a { color: var(--ink); text-decoration: none; }
  .venue-card h2 a:hover, .category-card h2 a:hover { color: var(--plum); text-decoration: underline; }
  .venue-meta { color: var(--ink); opacity: 0.62; font-size: 0.86rem; margin: 0 0 10px; }
  .venue-card p, .category-card p { margin: 0 0 10px; font-size: 0.95rem; color: var(--ink); opacity: 0.85; }
  /* Golf-only (2026-09-19): collapsed description + Read more toggle. The
     clamp class is added by the page script, so without JS the full text
     shows and the button stays hidden. Line-clamp is line-based, so the
     "about four lines" holds at every viewport width. */
  .golf-desc p { margin: 0 0 6px; }
  .golf-desc.is-clamped p {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; max-height: calc(4 * 1.55em);
  }
  .desc-toggle {
    background: none; border: 0; padding: 0; margin: 0 0 10px; cursor: pointer;
    font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--plum);
  }
  .desc-toggle:hover { text-decoration: underline; }
  .desc-toggle:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; }
  .desc-toggle[hidden] { display: none; }
  /* Golf-only: one action row (Website, Call, Favorite, Add to Trip)
     directly under the badge chips, divided from the description by a
     hairline so chips + actions read as the card's single "info & actions"
     block. Pill styling mirrors the homepage's .trip-btn/.fav-btn
     (public/styles/app.css) so the controls read as the same feature. */
  .venue-card[data-venue-category="golf"] .chips:empty { display: none; }
  .venue-card[data-venue-category="golf"] .chips:not(:empty) {
    margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(74,52,40,0.10);
  }
  .venue-card[data-venue-category="golf"] .card-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(74,52,40,0.10);
  }
  .venue-card[data-venue-category="golf"] .chips:not(:empty) + .card-actions {
    margin-top: 8px; padding-top: 0; border-top: 0;
  }
  .venue-card[data-venue-category="golf"] .card-action {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    font-size: 0.82rem; font-weight: 700; font-family: 'Nunito', 'Nunito Fallback', sans-serif; line-height: 1.4;
    color: var(--ink); background: var(--sand-deep); border: none; text-decoration: none;
    border-radius: 999px; padding: 5px 12px; cursor: pointer; width: fit-content;
    transition: background 0.15s;
  }
  .venue-card[data-venue-category="golf"] .card-action:hover { background: rgba(224,169,78,0.35); color: var(--ink); text-decoration: none; }
  .venue-card[data-venue-category="golf"] .card-action:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
  .venue-card[data-venue-category="golf"] .trip-btn.in-trip { background: var(--teal, #2A6B67); color: var(--paper); }
  .venue-card[data-venue-category="golf"] .fav-btn.is-fav { background: var(--plum); color: var(--paper); }
  .venue-card[data-venue-category="golf"] .trip-notice { margin: 8px 0 0; font-size: 0.85rem; color: var(--plum); }
  .venue-card[data-venue-category="golf"] .trip-notice:empty { display: none; }

  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip {
    background: var(--sand-deep); color: var(--plum); font-weight: 700;
    font-size: 0.74rem; letter-spacing: 0.01em; padding: 4px 11px; border-radius: 999px;
  }
  /* Hidden Gem badge gets its own visual identity, distinct from ordinary
     amenity chips — same underlying .chip base (per Sprint 3), extended
     here with a warmer, gold-leaning treatment so it reads as editorial
     curation rather than a factual attribute. */
  .chip.hidden-gem-badge {
    background: var(--amber); color: var(--plum-dark);
    box-shadow: inset 0 0 0 1px rgba(74,52,40,0.12);
  }
  .chip.local-favourite-badge {
    background: var(--teal, #2A6B67); color: var(--paper);
    box-shadow: inset 0 0 0 1px rgba(74,52,40,0.12);
  }

  /* Region selector for Okanagan-wide category pages (e.g. /golf) --
     reuses the .chip pill visual language above so it reads as part of
     the same design system rather than a bolted-on control. Shared by
     any future category's wide page, not styled per-category. */
  .category-region-selector {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 0 0 26px;
  }
  .category-region-selector a,
  .category-region-selector-active {
    display: inline-block; padding: 6px 15px; border-radius: 999px;
    font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em;
    text-decoration: none;
  }
  .category-region-selector-active {
    background: var(--plum); color: var(--paper);
  }
  .category-region-selector a {
    background: var(--sand-deep); color: var(--plum);
  }
  .category-region-selector a:hover {
    background: var(--plum); color: var(--paper);
  }
  /* Phones (2026-10-14): one row of towns that scrolls sideways, so the places themselves show on the first screen
     (wrapped, twenty towns took seven rows). */
  @media (max-width: 700px) {
    html body nav.category-region-selector { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
    html body nav.category-region-selector::-webkit-scrollbar { display: none; }
    html body nav.category-region-selector a, html body nav.category-region-selector .category-region-selector-active { flex: none; white-space: nowrap; }
    /* Tap targets (2026-10-19, round 9): the town and category chips are 44px tall on phones (they were 33px). */
    html body nav.category-region-selector a, html body nav.category-region-selector .category-region-selector-active { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
  }

  /* Back-link on a category's single-region page (e.g. /kelowna/golf)
     to its Okanagan-wide page (e.g. /golf) -- only categories in
     ALL_REGIONS_CATEGORIES render this, since it's the only case where
     an Okanagan-wide page actually exists to link back to. */
  .category-back-link {
    display: inline-block; margin: 0 0 14px; font-size: 0.86rem;
    font-weight: 700; color: var(--teal-deep); text-decoration: none;
  }
  .category-back-link:hover { text-decoration: underline; }

  /* Subsection heading used to split a single category's venues into
     groups (e.g. Golf Courses vs. Indoor Golf & Simulators) -- reuses
     the same treatment as .related-section h2 for visual consistency. */
  .category-subsection-heading {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.3rem;
    margin: 30px 0 14px;
  }
  .category-subsection-heading:first-of-type { margin-top: 6px; }

  .related-section { margin-top: 40px; }
  .related-section h2 {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.25rem; margin-bottom: 14px;
  }
  .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .related-card {
    background: var(--paper); border: 1px solid rgba(74,52,40,0.10);
    border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 6px 16px -14px rgba(74,52,40,0.35);
  }
  .related-card a { font-weight: 700; text-decoration: none; color: var(--ink); }
  .related-card a:hover { color: var(--plum); }
  .related-card .related-meta { font-size: 0.8rem; color: rgba(74,52,40,0.8); }
  /* Town event cards (2026-10-19, round 7): the whole card opens the event, not just its name. The card's one link
     is stretched over it by its own ::after (as the Browse cards), so there is still one link per card. */
  .related-card-event { position: relative; }
  .related-card-event > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  /* Round 10 (2026-10-19): the name link itself is 44px tall too (negative margins keep the card's lines in place). */
  .related-card-event > a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .related-card-event > a:focus-visible { outline: none; }
  .related-card-event > a:focus-visible::after { outline: 3px solid var(--teal, #2A6B67); outline-offset: 2px; }
  .related-card-event:hover { border-color: rgba(74,52,40,0.22); }

  .detail-row {
    display: flex; gap: 10px; margin: 0; padding: 9px 0; font-size: 0.95rem;
    border-bottom: 1px solid rgba(74,52,40,0.08);
  }
  .detail-row:last-of-type { border-bottom: none; }
  .detail-row .label {
    color: var(--ink); opacity: 0.78; min-width: 100px; font-weight: 700;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px;
  }
  /* A long unbroken website URL wraps inside its row instead of pushing the
     page wider than a phone screen (Batch 3, 2026-09-26; the Golf pages
     already had this). Display only -- the link and its text are unchanged. */
  .detail-row > span:not(.label) { min-width: 0; }
  .detail-row a { overflow-wrap: anywhere; }

  .cta {
    display: inline-block; margin-top: 28px; margin-right: 10px;
    background: var(--plum); color: var(--paper); text-decoration: none;
    padding: 12px 24px; border-radius: 9px; font-weight: 700; font-size: 0.92rem;
    transition: background 0.15s ease;
  }
  .cta:hover { background: var(--plum-dark); color: var(--paper); }
  .cta.secondary {
    background: var(--paper); color: var(--plum); border: 1.5px solid var(--plum);
  }
  .cta.secondary:hover { background: var(--sand-deep); color: var(--plum); }

  .hours-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.92rem; }
  .hours-list li {
    display: flex; justify-content: space-between; max-width: 280px;
    padding: 4px 0; border-bottom: 1px dotted rgba(74,52,40,0.14);
  }
  .hours-list li:last-child { border-bottom: none; }
  /* Seasons and hours checked (2026-10-18). */
  .venue-hours-season { margin: 4px 0 6px; font-weight: 800; }
  .venue-hours-usual summary { cursor: pointer; font-size: 0.9rem; font-weight: 700; opacity: 0.8; }
  .venue-hours-usual .hours-list { opacity: 0.75; }
  .venue-hours-checked { margin: 8px 0 0; font-size: 0.8rem; color: var(--ink-muted, #6B5D54); }
  .venue-hours-stale { margin: 4px 0 0; font-size: 0.84rem; font-weight: 700; color: #8A4B1F; }

  footer.site-footer {
    margin-top: 48px; padding-top: 20px;
    border-top: 1px solid rgba(74,52,40,0.14);
    font-size: 0.85rem; color: var(--ink); opacity: 0.62;
  }
  footer.site-footer a { color: var(--teal-deep); }

  /* ---- Design Sprint 2: richer venue pages ---- */
  .venue-hero {
    border-radius: 16px; overflow: hidden; margin-bottom: 24px;
    box-shadow: 0 10px 24px -16px rgba(74,52,40,0.35);
  }
  .venue-hero-photo img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
  .venue-hero-fallback {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    min-height: 220px; padding: 28px 30px; color: var(--paper);
    --hero-shade: rgba(25,53,57,0.94); --hero-wash: rgba(25,53,57,0.44);
  }
  .venue-hero-fallback .venue-hero-type {
    font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.85; margin-bottom: 6px;
  }
  .venue-hero-fallback .venue-hero-name {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 700; font-size: 1.9rem; line-height: 1.15;
    text-shadow: 0 2px 12px rgba(12,29,34,0.45);
  }
  /* Per-type gradient — the exact hue family already used for each type's
     badge/tag color elsewhere in this project (the SPA's .type-* rules),
     deepened into a two-stop gradient suitable for a large hero rather
     than a small tag. 'golf' has no prior SPA tag color to match (added
     after the SPA's original palette), so it uses a complementary green
     consistent with the existing 'pub' hue family rather than reusing it
     outright. */
  .venue-hero-restaurant { background: linear-gradient(135deg, #2A6B67, #1E4F4C); --hero-shade: rgba(22,72,68,0.94); --hero-wash: rgba(22,72,68,0.45); }
  .venue-hero-winery     { background: linear-gradient(135deg, #8C4A5E, #6B2C40); --hero-shade: rgba(75,35,52,0.94); --hero-wash: rgba(75,35,52,0.44); }
  .venue-hero-brewery    { background: linear-gradient(135deg, #E0A94E, #B8802E); --hero-shade: rgba(75,50,18,0.93); --hero-wash: rgba(75,50,18,0.42); }
  .venue-hero-distillery { background: linear-gradient(135deg, #B8802E, #8A631F); --hero-shade: rgba(73,48,18,0.94); --hero-wash: rgba(73,48,18,0.44); }
  .venue-hero-cafe       { background: linear-gradient(135deg, #C08A4E, #8A631F); --hero-shade: rgba(68,43,23,0.94); --hero-wash: rgba(68,43,23,0.42); }
  .venue-hero-pub        { background: linear-gradient(135deg, #6B8B5E, #4A6741); --hero-shade: rgba(35,58,43,0.94); --hero-wash: rgba(35,58,43,0.44); }
  .venue-hero-cocktail   { background: linear-gradient(135deg, #A25C93, #7A3B6E); --hero-shade: rgba(64,37,67,0.94); --hero-wash: rgba(64,37,67,0.43); }
  .venue-hero-golf       { background: linear-gradient(135deg, #4E7A5E, #345942); --hero-shade: rgba(30,58,44,0.94); --hero-wash: rgba(30,58,44,0.43); }
  .venue-hero-beach      { background: linear-gradient(135deg, #1B2B3A, #101B24); --hero-shade: rgba(16,31,43,0.94); --hero-wash: rgba(16,31,43,0.43); } /* tokens: --ref-navy -> --ref-navy-deep */
  .venue-hero-outdoor    { background: linear-gradient(135deg, #4A3428, #2F2118); --hero-shade: rgba(43,34,29,0.94); --hero-wash: rgba(43,34,29,0.43); } /* token: --ink, deepened */
  /* Missing-photo heroes share one regional illustration, with a deep
     category tint on the text side so the existing ivory title stays
     readable. Real business photos use .venue-hero-photo and never see
     this artwork. */
  .venue-hero-fallback {
    background-image:
      linear-gradient(100deg, var(--hero-shade) 0%, var(--hero-wash) 58%, rgba(16,32,38,0.12) 100%),
      url('/images/venue-hero-okanagan.a01552e12e24.jpg?v=a01552e12e24');
    background-size: cover;
    background-position: center 48%;
  }

  .venue-header { margin-bottom: 18px; }
  .venue-at-a-glance { color: rgba(74,52,40,0.8); font-size: 0.98rem; margin: 6px 0 12px; }
  .venue-at-a-glance a { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .venue-at-a-glance a:hover { text-decoration-thickness: 2px; }

  .venue-description { font-size: 1.02rem; line-height: 1.7; margin: 0 0 22px; color: var(--ink); }

  .venue-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
  .venue-cta-row .cta { margin: 0; }

  .venue-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(74,52,40,0.12); }
  .venue-section h2 { font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 600; font-size: 1.2rem; margin: 0 0 12px; }
  .venue-address { margin: 0 0 8px; font-size: 0.96rem; }
  .map-link { display: inline-block; font-weight: 700; font-size: 0.88rem; color: var(--teal-deep); text-decoration: none; }
  .map-link:hover { text-decoration: underline; }

  /* related-card type accent — reuses the same hue family as the hero
     gradients above, applied as a thin top border so related/nearby cards
     feel visually consistent with the page's new hero treatment even
     though (per Sprint 2 scope) they still have no photos of their own. */
  .related-card { border-top: 3px solid var(--sand-deep); }
  .related-card-restaurant { border-top-color: #2A6B67; }
  .related-card-winery { border-top-color: #6B2C40; }
  .related-card-brewery { border-top-color: #B8802E; }
  .related-card-distillery { border-top-color: #8A631F; }
  .related-card-cafe { border-top-color: #8A631F; }
  .related-card-pub { border-top-color: #4A6741; }
  .related-card-cocktail { border-top-color: #7A3B6E; }
  .related-card-golf { border-top-color: #345942; }
  .related-card-beach { border-top-color: #101B24; }
  .related-card-outdoor { border-top-color: #2F2118; }

  /* Design Sprint 4: compact visual band, shared with the homepage Hidden
     Gems cards via the same compactVisualBandHtml() helper and the same
     TYPE_ACCENT_GRADIENTS color source — generated here rather than
     hardcoded a second time. */
  .compact-band {
    height: 78px; border-radius: 10px 10px 0 0; margin: -1px -1px 10px -1px;
    display: flex; align-items: flex-end; padding: 8px 12px; box-sizing: border-box;
  }
  .compact-band-sm { height: 56px; }
  .compact-band-label {
    color: var(--paper); font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.92;
  }
  .compact-band-restaurant { background: linear-gradient(135deg, #2A6B67, #1E4F4C); }
  .compact-band-winery { background: linear-gradient(135deg, #8C4A5E, #6B2C40); }
  .compact-band-brewery { background: linear-gradient(135deg, #E0A94E, #B8802E); }
  .compact-band-cafe { background: linear-gradient(135deg, #C08A4E, #8A631F); }
  .compact-band-pub { background: linear-gradient(135deg, #6B8B5E, #4A6741); }
  .compact-band-cocktail { background: linear-gradient(135deg, #A25C93, #7A3B6E); }
  .compact-band-distillery { background: linear-gradient(135deg, #B8802E, #8A631F); }
  .compact-band-golf { background: linear-gradient(135deg, #4E7A5E, #345942); }
  .compact-band-beach { background: linear-gradient(135deg, #1B2B3A, #101B24); }
  .compact-band-outdoor { background: linear-gradient(135deg, #4A3428, #2F2118); }
  .compact-band-indoor { background: linear-gradient(135deg, #34425E, #222C41); }
  .compact-band-tour { background: linear-gradient(135deg, #1E5A61, #2E5531); }
  .compact-band-sport { background: linear-gradient(135deg, #2B5C8A, #B5552F); }
  .compact-band-shop { background: linear-gradient(135deg, #2F5D46, #8A6A3B); }

  @media (max-width: 640px) {
    body { padding: 20px 16px 56px; }
    h1 { font-size: 1.6rem; }
    .subtitle { font-size: 0.95rem; margin-bottom: 20px; }
    .venue-card, .category-card { padding: 14px 16px; }
    .related-grid { grid-template-columns: 1fr; }
    .detail-row .label { min-width: 84px; }
    .cta { display: block; text-align: center; margin-right: 0; }
    .cta + .cta { margin-top: 10px; }
    .venue-hero-photo img { max-height: 220px; }
    .venue-hero-fallback { min-height: 160px; padding: 20px; }
    .venue-hero-fallback .venue-hero-name { font-size: 1.4rem; }
    .venue-at-a-glance { font-size: 0.9rem; }
    .venue-cta-row { flex-direction: column; }
    .venue-cta-row .cta { width: 100%; }
    .compact-band-sm { height: 48px; }
  }

  
  /* Stage 3.4 (2026-09-29): the "App coming soon" footer control is a
     button (it opens the app teaser dialog) styled exactly like the footer's
     links; the dialog reuses the teaser's navy/gold look. */
  .home-footer-link-btn {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.92rem; color: rgba(245,243,237,0.78); transition: color 0.15s;
  }
  .home-footer-link-btn:hover, .home-footer-link-btn:focus-visible { color: var(--ref-gold, #E0A94E); }
  .app-teaser-dialog {
    border: 0; padding: 0; border-radius: 18px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
    background: var(--ref-navy-deep, #16233a); color: var(--ref-cream, #F5F3ED); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
  }
  .app-teaser-dialog::backdrop { background: rgba(10,16,28,0.55); }
  .app-teaser-dialog-inner { position: relative; padding: 34px 30px 28px; font-family: 'Nunito', 'Nunito Fallback', sans-serif; }
  .app-teaser-dialog-eyebrow { display: inline-block; color: var(--ref-gold, #E0A94E); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
  .app-teaser-dialog h2 { font-family: 'Fraunces', 'Fraunces Fallback', serif; color: inherit; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 10px 0 12px; }
  .app-teaser-dialog p { color: rgba(245,243,237,0.78); margin: 0 0 18px; line-height: 1.5; }
  .app-teaser-dialog-stores { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .app-teaser-dialog-store {
    display: flex; align-items: center; gap: 8px; background: rgba(255,252,246,0.1); border: 1px solid rgba(255,252,246,0.3);
    padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 0.9rem; cursor: default;
  }
  .app-teaser-dialog .app-teaser-dialog-note { font-size: 0.85rem; margin: 0; color: rgba(245,243,237,0.62); }
  .app-teaser-dialog-close {
    position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,252,246,0.12); color: inherit; font-size: 1.4rem; line-height: 1;
  }
  .app-teaser-dialog-close:hover, .app-teaser-dialog-close:focus-visible { background: rgba(255,252,246,0.22); }
  /* Contact dialog: the app teaser's shell with a form. Scrolls on short
     screens; 16px controls so phones do not zoom on focus. */
  .contact-dialog { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .contact-dialog, .contact-dialog * { box-sizing: border-box; }
  .contact-dialog h2:focus { outline: none; }
  .contact-field { margin: 0 0 14px; }
  .contact-field label { display: block; font-size: 0.88rem; font-weight: 700; margin: 0 0 6px; color: var(--ref-cream, #F5F3ED); }
  .contact-dialog input[type="text"], .contact-dialog input[type="email"], .contact-dialog textarea {
    display: block; width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 1rem; line-height: 1.4;
    color: var(--ref-cream, #F5F3ED); background: rgba(255,252,246,0.08); border: 1px solid rgba(255,252,246,0.3); border-radius: 12px;
  }
  .contact-dialog textarea { min-height: 120px; resize: vertical; }
  .contact-dialog ::placeholder { color: rgba(245,243,237,0.5); }
  .contact-dialog input:focus-visible, .contact-dialog textarea:focus-visible { outline: 2px solid var(--ref-gold, #E0A94E); outline-offset: 1px; border-color: transparent; }
  .contact-dialog [aria-invalid="true"] { border-color: #FFB4A8; }
  .contact-field-error, .contact-form-error { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.4; color: #FFB4A8; }
  .contact-dialog .contact-field-error, .contact-dialog .contact-form-error { margin: 6px 0 0; color: #FFB4A8; }
  .contact-dialog .contact-form-error { margin: 0 0 14px; }
  .contact-field-error[hidden], .contact-form-error[hidden], .contact-dialog [hidden] { display: none; }
  .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .contact-submit {
    display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--ref-gold, #E0A94E); color: var(--ref-navy-deep, #16233a); font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 1rem; font-weight: 800;
  }
  .contact-submit:hover { filter: brightness(1.06); }
  .contact-submit:focus-visible { outline: 2px solid var(--ref-cream, #F5F3ED); outline-offset: 3px; }
  .contact-submit[disabled] { opacity: 0.65; cursor: progress; }
  @media (max-width: 480px) { .contact-dialog .app-teaser-dialog-inner { padding: 30px 20px 22px; } .contact-submit { width: 100%; } }
  /* Contact topic and app launch sign-up (2026-10-14). */
  .contact-dialog select {
    display: block; width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 1rem;
    color: var(--ref-cream, #F5F3ED); background: rgba(255,252,246,0.08); border: 1px solid rgba(255,252,246,0.3); border-radius: 12px;
  }
  .contact-dialog select option { color: #16233a; }
  .contact-topic-hint { margin: -6px 0 14px; font-size: 0.88rem; line-height: 1.45; color: rgba(245,243,237,0.8); }
  dialog.app-teaser-dialog .contact-topic-hint a, dialog.app-teaser-dialog .contact-alt a, dialog.app-teaser-dialog .app-teaser-dialog-note a { color: var(--ref-gold, #E0A94E); text-decoration: underline; }
  .contact-alt { margin: 14px 0 0; font-size: 0.85rem; line-height: 1.5; color: rgba(245,243,237,0.7); }
  .app-teaser-signup { margin: 14px 0 6px; }
  .app-teaser-signup label { display: block; font-size: 0.88rem; font-weight: 700; margin: 0 0 6px; color: var(--ref-cream, #F5F3ED); }
  .app-teaser-signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .app-teaser-signup-row input { flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 11px 14px; font: inherit; font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 1rem; color: var(--ref-cream, #F5F3ED); background: rgba(255,252,246,0.08); border: 1px solid rgba(255,252,246,0.3); border-radius: 12px; }
  .app-teaser-signup-row input::placeholder { color: rgba(245,243,237,0.5); }
  .app-teaser-signup .app-teaser-dialog-note { margin-top: 8px; }
  .app-teaser-thanks { margin: 14px 0; font-weight: 800; color: var(--ref-gold, #E0A94E); }
  .app-teaser-thanks:focus { outline: none; }
  .app-teaser-thanks[hidden], .app-teaser-dialog [hidden] { display: none; }
  .app-teaser-homescreen { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(255,252,246,0.06); font-size: 0.9rem; line-height: 1.5; color: rgba(245,243,237,0.85); }
  .app-teaser-homescreen p { margin: 4px 0 0; }
  /* Homepage footer redesign (2026-09-17, revised again same day): full-
     width navy band using the same --ref-navy/--ref-gold/--ref-cream
     system as the header/hero, replacing the old footer's --ink/--sand
     palette. Entirely new home-footer-* classes (see renderHomeFooterHTML()
     above) rather than the shared .logo/.foot-* classes the old footer
     used, and .wrap-wide (matching the rest of the redesigned homepage's
     content width) instead of the old footer's narrower .wrap. Scoped to
     / only -- /browse still renders the original static footer/CSS,
     untouched.
     The explicit padding:0 below is a deliberate fix, not a no-op: the
     OLD footer's own unscoped "footer" element-type selector rule
     (padding: 50px 0 36px, further down in this same stylesheet, written
     for the original static footer) still matches any footer element by
     tag, including this new one, since nothing here used to override it.
     A class selector already outranks a bare element-type selector
     regardless of source order, so this single declaration fully
     neutralizes that leak -- every bit of this footer's real spacing
     comes from its own child elements' padding instead
     (.home-footer-top/.home-footer-bottom). CAUTION FOR FUTURE EDITS: this
     whole CSS block is returned as a plain string by
     renderHomepageDiscoveryStyles() and spliced into the page's raw HTML,
     and the / route handler later locates the ORIGINAL static footer tag
     by a plain substring search on that same assembled HTML. Never spell
     that tag's opening or closing form, in angle brackets, anywhere in
     THIS comment block (or anywhere else inside this function's returned
     string) -- doing so once already produced a real, hard-to-spot bug:
     the search matched the mention inside this very comment instead of
     the real tag, and silently deleted every homepage section between
     that point and the real one when the footer was spliced in. */
  .home-footer {
    background: var(--ref-navy); color: var(--ref-cream); margin-top: 8px; padding: 0;
    /* Full-bleed fix (canonical footer consolidation, 2026-09-19): venue/
       region/category/guide/event pages set body{max-width:900px;
       margin:0 auto} (SEO_PAGE_CSS) so their own content reads as a
       comfortable single column -- but that same rule was also boxing in
       the footer, rendering it as a centered navy rectangle with visible
       page background on both sides instead of the homepage's true
       edge-to-edge band. This is the standard, well-known "break out of a
       max-width parent" technique: 100% of the *viewport*, recentered.
       calc(50% - 50vw) resolves to 0 (a no-op) whenever the containing
       block is already full viewport width -- true on / and /browse today
       -- so this is safe there regardless, not just on the narrower pages
       it's actually fixing. */
    width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }
  /* Compact pass (2026-09-19, approved footer refinement): the footer
     previously ran 72px/48px of top/bottom air around the columns plus a
     24-40px bottom band, reading as visually stretched. Tightened across
     desktop and both mobile breakpoints below -- gap/padding values only,
     no content removed, same column structure/links/order throughout. */
  .home-footer-top {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
    gap: 36px; padding: 40px 0 28px;
  }
  .home-footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 260px; flex-shrink: 0; }
  .home-footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .home-footer-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 14px; flex-shrink: 0; color: var(--ref-cream); }
  .home-footer-icon svg { width: 100%; height: 100%; }
  .home-footer-wordmark {
    font-family: 'Fraunces', 'Fraunces Fallback', serif; font-weight: 400; font-size: 1.3rem;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--ref-cream);
  }
  .home-footer-wordmark-accent { color: var(--ref-gold); }
  .home-footer-tagline { font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.85rem; color: rgba(245,243,237,0.6); margin: 0; }
  /* Explicit request (2026-09-17 revision): Regions folded back INTO this
     row as its own 4th column rather than a separate full-width band
     below. Layout correction (same day, follow-up): a strict equal
     repeat(4,1fr) plus CSS Grid's default align-items:stretch forced
     every column to the height of the tallest one (Regions, 20 links) --
     found via direct measurement, all four .home-footer-col boxes were
     501px tall even though About's real content was only 155px and
     Social Media's only 34px, leaving large dead navy gaps under both.
     align-items:start fixes that -- each column now sizes to its own
     content; Regions being visibly the tallest column is expected and
     fine (it has by far the most real content) rather than a bug to hide.
     Column widths are now mildly (not dramatically) uneven rather than a
     strict 1fr each, giving Regions a little more room for its two-column
     region list and taking a little back from About/Social Media, which
     never needed a full equal share to begin with. */
  .home-footer-cols {
    display: grid; grid-template-columns: 1fr 0.9fr 2fr 1fr;
    align-items: start; gap: 28px; flex: 1; min-width: 0;
    /* Brand|Explore divider (FOOTER.png reference, 2026-09-19): matches the
       same rule as the 3 inter-column dividers below, just applied to the
       one seam that isn't between two .home-footer-col siblings (Brand is
       its own flex item, outside this grid). */
    border-left: 1px solid rgba(245,243,237,0.14);
    padding-left: 20px;
  }
  /* Clean vertical separators between the 4 major columns (approved
     footer refinement, 2026-09-19) -- a thin, low-opacity rule on every
     column after the first, inset with padding rather than margin so the
     line sits mid-gutter instead of hugging either column's text. */
  .home-footer-col + .home-footer-col {
    border-left: 1px solid rgba(245,243,237,0.14);
    padding-left: 20px;
  }
  /* Accessibility (2026-10-18): the column headings are h2 (were h4, after the page's h2s); same look. */
  .home-footer-col h2 {
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; line-height: inherit;
    letter-spacing: 0.07em; color: var(--ref-gold); margin: 0 0 12px; padding-bottom: 8px;
    display: inline-block; border-bottom: 2px solid var(--ref-gold);
  }
  .home-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .home-footer-col a, .home-footer-region-group a {
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.92rem; color: rgba(245,243,237,0.78);
    text-decoration: none; transition: color 0.15s;
  }
  .home-footer-col a:hover, .home-footer-region-group a:hover { color: var(--ref-gold); }

  /* Regions column (rebuilt 2026-09-19 to match the approved FOOTER.png
     reference exactly): TWO EXPLICIT subcolumns, each its own independent
     flex column -- subcol 1 stacks Central then South, subcol 2 stacks
     North then Ski resorts (see FOOTER_REGION_GROUPS/renderHomeFooterHTML).
     A same-row 2x2 CSS Grid was tried previously and rejected (Grid sizes
     a ROW to its tallest cell, so a short group got stretched to match a
     tall one beside it, leaving dead space) -- that failure mode doesn't
     apply here because these are two INDEPENDENT flex columns, not grid
     cells sharing a row: each one sizes purely to its own two groups'
     combined height, so North's longer list (5 items) simply makes
     subcolumn 2 start "Ski resorts" a little lower than subcolumn 1's
     "South" -- exactly the (intentional, not a bug) slight stagger visible
     in the reference image. */
  .home-footer-region-groups { display: flex; gap: 20px; }
  .home-footer-region-subcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  /* Region subsection headings (CENTRAL/NORTH/SOUTH/SKI RESORTS): gold,
     uppercase, bold, with the same small underline treatment as the main
     column headings (h4) so they read as clear subsection headings,
     distinct from the town links beneath them -- previously a muted,
     low-contrast cream at the same size as the links, which is exactly
     what made them hard to tell apart. Kept smaller than h4 (0.78rem)
     since these are one level down. */
  .home-footer-region-group h3 {
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.7rem; font-weight: 800; line-height: inherit;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ref-gold); margin: 0 0 8px; padding-bottom: 5px;
    display: inline-block; border-bottom: 1px solid var(--ref-gold);
  }
  .home-footer-region-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .home-footer-region-group a { font-size: 0.82rem; line-height: 1.3; }
  /* Tap targets (2026-10-19, review pass 5): each icon is a 44px target; a 5px clear border keeps the round badge 34px
     (and the row's visible 10px gaps) as before. */
  .home-footer-social-row { display: flex; gap: 0; }
  .home-footer-social-icon {
    position: relative; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 44px; height: 44px; border: 5px solid transparent; border-radius: 50%;
    background: rgba(245,243,237,0.1); color: rgba(245,243,237,0.8);
    cursor: default; transition: background 0.15s, opacity 0.15s;
  }
  .home-footer-social-icon.icon-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff; opacity: 1;
  }
  .home-footer-social-icon.icon-instagram:hover { opacity: 0.85; }
  .home-footer-social-icon.icon-facebook { background: #1877F2; color: #fff; }
  .home-footer-social-icon.icon-tiktok { background: #010101; color: #25F4EE; opacity: 1; }
  .home-footer-social-icon.icon-tiktok:hover { opacity: 0.85; }
  .home-footer-social-row .home-footer-social-icon { background-clip: padding-box; }
  .home-footer-social-icon::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ref-navy-deep); color: var(--ref-cream);
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.72rem; font-weight: 700;
    white-space: nowrap; padding: 5px 10px; border-radius: 8px;
    opacity: 0; pointer-events: none; z-index: 20;
    transition: opacity 0.12s, transform 0.12s;
  }
  .home-footer-social-icon:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* Footer gutter (2026-10-18, review pass 4): "padding: 16px 0" took away .wrap-wide's side padding, so on a phone
     the copyright line ran to 3px from the screen edges. It keeps a 24px gutter (16px on phones). */
  .home-footer-bottom { border-top: 1px solid rgba(245,243,237,0.14); padding: 16px 24px 24px; }
  @media (max-width: 640px) { .home-footer-bottom { padding-left: 16px; padding-right: 16px; } }
  /* Footer refresh (2026-10-14): Privacy, Terms and the app teaser in a
     bottom row; Explore and Regions are <details> that stay open (and
     unclickable) on desktop and fold on phones. */
  .home-footer-legal { font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.84rem; text-align: center; margin: 0 0 8px; color: rgba(245,243,237,0.55); }
  .home-footer-legal a, .home-footer-legal .home-footer-link-btn { color: rgba(245,243,237,0.78); text-decoration: none; font-size: 0.84rem; }
  .home-footer-legal a:hover, .home-footer-legal .home-footer-link-btn:hover { color: var(--ref-gold); }
  /* Fix (2026-10-18): body.golf-page a (navy) out-ranks the rule above on list
     pages, so Privacy and Terms vanished into the navy footer. */
  .home-footer .home-footer-legal a { color: rgba(245,243,237,0.78); }
  .home-footer .home-footer-legal a:hover { color: var(--ref-gold); }
  .home-footer-fold > summary { list-style: none; cursor: default; pointer-events: none; }
  .home-footer-fold > summary::-webkit-details-marker { display: none; }
  .home-footer-all-regions { margin: 14px 0 0; }
  .home-footer-all-regions a { font-weight: 700; }
  .home-footer-copyright { font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-size: 0.8rem; color: rgba(245,243,237,0.55); text-align: center; margin: 0; }

  /* Trip 0 button redesign, homepage-only (2026-09-17): #tripTray/
     #tripTrayToggle/#tripTrayCount are shared, site-wide rules defined in
     app.css (used as-is on /browse, untouched). This block itself is no
     longer homepage-exclusive (the /browse redesign, 2026-09-18, now
     injects it there too, to fix .hero-scenic/.hero-title/etc. having had
     zero CSS on /browse -- see the bug-fix comment on the /browse route
     handler), so these three selectors are explicitly scoped to
     body:not(.page-browse) (the marker only the /browse route sets) to
     keep the original "homepage-only" intent intact now that the block
     they live in is shared.

     2026-09-24 (UX polish pass): the body:not(.page-browse) scoping is GONE.
     It left /browse -- and only /browse -- on app.css's original plum/paper/
     amber toggle with the suitcase emoji, while every other page showed this
     navy/gold one, so the "floating Trip button" was effectively two different
     components depending on where you were. These rules are now unscoped and
     apply everywhere the tray renders. / is unaffected (it already matched the
     negation, and its computed styling is identical); only /browse changes, to
     match everything else. Direction: a small persistent "your trip"
     control, not a primary CTA -- smaller footprint, the homepage's own
     navy/cream/gold system instead of the old plum/paper/amber, a lighter
     shadow, and a smaller/quieter count badge, while leaving position
     (fixed, bottom corner, 20px from the edges -- already comfortable for
     tapping) and every bit of the click/expand/route/clear behavior
     untouched -- this only restyles the closed-state toggle and its
     count, never #tripTrayPanel (the expanded trip list keeps its
     existing look, on both pages). */
  #tripTrayToggle {
    background: var(--ref-navy); color: var(--ref-cream);
    border: 1px solid var(--ref-gold);
    border-radius: 999px; padding: 9px 16px; gap: 8px;
    font-family: 'Nunito', 'Nunito Fallback', sans-serif; font-weight: 700; font-size: 0.78rem;
    box-shadow: 0 4px 14px -6px rgba(16,27,36,0.45);
  }
  #tripTrayToggle:hover { background: var(--ref-navy-deep); }
  #tripTrayCount {
    background: var(--ref-gold); color: var(--ref-navy-deep);
    width: 16px; height: 16px; font-size: 0.62rem; font-weight: 800;
  }
  /* Suitcase-icon removal (approved refinement, 2026-09-19): the 🧳 emoji
     lives in the shared #tripTrayToggle markup in okanagan.html (reused
     as-is by /browse and /trip), wrapped in .trip-toggle-icon specifically
     so it can be hidden without touching that shared markup's actual
     content. Site-wide since the 2026-09-24 polish pass.
     .trip-toggle-arrow is an empty span in that same shared markup; on
     every other page it's simply an empty, invisible inline element, and
     only here does it get real content -- a small gold chevron, replacing
     the suitcase as a subtle "opens something" cue rather than an icon. */
  #tripTrayToggle .trip-toggle-icon { display: none; }
  #tripTrayToggle .trip-toggle-arrow::after {
    content: '\2192'; margin-left: 1px; color: var(--ref-gold); font-weight: 800;
  }

  @media (max-width: 900px) {
    /* align-items:stretch override is required here: the base
       .home-footer-top rule sets align-items:flex-start for the desktop
       row layout, and that alone (even after flipping to
       flex-direction:column here) leaves .home-footer-cols sized to its
       own shrink-to-fit content width instead of the full row width --
       found via direct measurement (it was rendering at roughly half the
       viewport width instead of full width). */
    .home-footer-top { flex-direction: column; align-items: stretch; gap: 28px; padding: 32px 0 24px; }
    .home-footer-cols {
      grid-template-columns: repeat(2, 1fr); gap: 28px 24px;
      border-left: none; padding-left: 0;
    }
    /* The desktop vertical separators (both the Brand|Explore one above,
       via .home-footer-cols, and "every column after the first" below)
       only make sense in a single horizontal row. Once Brand stacks above
       a 2-per-row grid, a leftover border-left just reads as a stray
       vertical line down the block's edge; at 2-per-row, "every column
       after the first" would also draw a stray line on column 3 (first
       item of row 2), which sits below column 1, not beside column 2.
       Both removed here; the 560px single-column block below inherits
       this same removal. */
    .home-footer-col + .home-footer-col { border-left: none; padding-left: 0; }
  }

  @media (max-width: 560px) {
    /* Explicit stacking order requested (2026-09-17 revision): Explore,
       About, Regions, Social Media, one per row -- a single column at
       this width naturally stacks in the same DOM order the 4-column
       grid uses above, so no reordering is needed here. */
    .home-footer-cols { grid-template-columns: 1fr; gap: 28px; }

    /* Mobile-only tightening pass (2026-09-17, follow-up): the desktop
       spacing values (built for a 4-column row with lots of horizontal
       room) felt oversized once stacked into one long mobile column --
       measured at 1416px tall for the footer alone at 390px width before
       this pass. Nothing here changes desktop (all of it lives inside
       this max-width:560px block, and the desktop-facing base rules
       above are untouched) and no content/typography was removed or
       shrunk -- these are gap/margin/padding values only, still leaving
       comfortable breathing room between Explore/About/Regions/Social
       Media, just without the extra desktop-sized air baked into each
       one. */
    .home-footer-top { padding: 24px 0 20px; gap: 24px; }
    .home-footer-col h2 { margin-bottom: 10px; }
    .home-footer-col ul { gap: 8px; }
    .home-footer-region-groups { gap: 16px; }
    .home-footer-region-subcol { gap: 12px; }
    .home-footer-region-group h3 { margin-bottom: 6px; }
    .home-footer-region-group ul { gap: 5px; }

    /* Mobile centering pass (2026-09-17): the footer's desktop layout is a
       4-column row where every column is naturally left-aligned within
       its own cell -- fine side-by-side, but once everything stacks into
       one column on mobile it reads as hugging the left edge instead of
       feeling like a deliberate, centered composition. text-align:center
       cascades onto every heading/link/paragraph in the footer (brand
       wordmark+tagline, all four column headings, every Explore/About/
       Regions/Social Media link, the Regions sub-group headings too,
       since .home-footer-region-group lives inside a .home-footer-col).
       align-items:center on the flex/column lists shrinks each link/icon
       row to its own content width and centers that box too, rather than
       just centering text inside a still-full-width, left-edge-anchored
       link. None of this touches the desktop rules above -- same pattern
       as every other mobile-only override in this block. */
    .home-footer-top, .home-footer-col { text-align: center; }
    /* align-items:center alone isn't enough here: .home-footer-top keeps
       align-items:stretch (from the 900px block above, still in effect)
       because .home-footer-cols genuinely needs to stay full-width (see
       that fix's own comment). Stretch also applies to .home-footer-brand
       as a sibling flex item, which -- capped at max-width:260px -- ends
       up exactly 260px wide but still flush against the left edge
       (stretch sizes an item, it doesn't reposition it). margin:0 auto
       is what actually centers that fixed-width box within the full-
       width row; align-items:center then centers the logo+tagline inside
       the (now-centered) box itself. */
    .home-footer-brand { align-items: center; margin: 0 auto; }
    .home-footer-col ul, .home-footer-region-group ul { align-items: center; }
    .home-footer-social-row { justify-content: center; }

    /* Trip 0 button, mobile: slightly smaller still and pulled in a touch
       from the very edge, so it stays compact and never competes with
       page content on a narrow viewport, while remaining comfortably
       tappable (44px+ touch target maintained via padding, not shrunk
       text alone). */
    #tripTray { bottom: 16px; right: 16px; }
    #tripTrayToggle { padding: 7px 12px; font-size: 0.74rem; gap: 5px; }
    #tripTrayCount { width: 15px; height: 15px; font-size: 0.6rem; }

    /* #tripTray is a site-wide fixed element pinned bottom:20px/right:20px
       (~50px tall) -- at full scroll on narrow viewports it would
       otherwise float directly on top of this column's last row of
       links. Extra bottom padding keeps real clearance below the last
       row instead, so the fixed button always lands in empty space
       below the content, never over a link. Reduced from the earlier
       104px: re-measured after this tightening pass and confirmed (see
       session verification) that a smaller value still leaves the
       fixed button clear of every link/heading/icon/copyright at the
       real resting scroll position -- 104px had far more margin than
       was actually needed. */
    .home-footer-bottom { padding-bottom: 56px; }
    /* Phones: Explore and Regions fold behind their headings, and every
       link is a full-size tap target. */
    .home-footer-fold > summary { pointer-events: auto; cursor: pointer; padding: 6px 0; }
    .home-footer-fold > summary h2 { margin-bottom: 0; }
    .home-footer-fold > summary h2::after { content: ' +'; }
    .home-footer-fold[open] > summary h2::after { content: ' −'; }
    .home-footer-fold[open] > summary { margin-bottom: 8px; }
    .home-footer-col ul, .home-footer-region-group ul { gap: 0; }
    .home-footer-col a, .home-footer-region-group a, .home-footer-col .home-footer-link-btn { display: inline-block; padding: 11px 8px; }
    /* Round 10: 44px tall (the App coming soon button was 37px). */
    .home-footer-legal a, .home-footer-legal .home-footer-link-btn { display: inline-block; padding: 12px 4px; min-height: 44px; box-sizing: border-box; }
  }