.masthead-responsive{display:contents}
.masthead-responsive>img{display:block;width:100%;height:auto}

/* Phase 1: opt-in public guide only; desktop/tablet retain their existing styles.
   Navigation uses ordinary links and works without JavaScript. */
.mobile-brand,
.mobile-bottom-nav,
.mobile-category-nav { display: none; }

@media (max-width: 600px) {
  html:has(body.mobile-guide) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.mobile-guide {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .mobile-guide .buzz-masthead { width: 100%; margin: 0; }
  .mobile-guide .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: var(--paper);
    text-decoration: none;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
  }
  .mobile-brand strong { color: var(--orange); }
  .mobile-brand small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 500; }
  .mobile-guide .buzz-masthead-art { overflow: visible; border: 0; border-radius: 0; background: var(--paper); }
  .mobile-guide .buzz-masthead-art > img,
  .mobile-guide .buzz-masthead-art > .masthead-responsive,
  .mobile-guide .masthead-home-hotspot { display: none; }
  .mobile-guide .buzz-masthead-hotspots,
  .mobile-guide .mobile-category-nav {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 0 12px 12px;
    scroll-margin-top: 16px;
  }
  .mobile-guide .masthead-hotspot,
  .mobile-guide .mobile-category-nav a {
    position: static;
    width: auto;
    min-height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
  }
  /* Existing illustration row cropped, at the same display scale. */
  .mobile-guide :is(.masthead-hotspot, .mobile-category-nav a)::before {
    content: "";
    display: block;
    flex: none;
    width: 60px;
    height: 36px;
    background-image: url('/mobile-navigation-icons.webp');
    background-repeat: no-repeat;
    background-size: 663.36px 40.96px;
    background-position: var(--mobile-icon-x) -0.56px;
    mix-blend-mode: lighten;
  }
  /* The shared Stay navigation loads later; override only its six masthead crops.
     Explore uses the same artwork at a smaller scale. Keep the separate SVG icons. */
  .mobile-guide .buzz-masthead .stay-category-nav :is(.hotspot-restaurants, .hotspot-trucks, .hotspot-things, .hotspot-events, .hotspot-sports, .hotspot-taprooms)::before,
  .mobile-guide .explore-category-icon:is(.explore-icon-restaurants, .explore-icon-trucks, .explore-icon-things, .explore-icon-events, .explore-icon-sports, .explore-icon-taprooms) {
    background-image: url('/mobile-navigation-icons.webp');
    background-size:663.36px 40.96px;
    background-position:var(--mobile-icon-x) -0.56px;
  }
  .mobile-guide .explore-category-icon:is(.explore-icon-restaurants, .explore-icon-trucks, .explore-icon-things, .explore-icon-events, .explore-icon-sports, .explore-icon-taprooms) {
    background-size:398.016px 24.576px;
    background-position:var(--explore-icon-x) -0.336px;
  }
  .mobile-guide :is(.hotspot-restaurants, .mobile-category-nav a[href='/restaurants.html']) { --mobile-icon-x: -39.76px; }
  .mobile-guide :is(.hotspot-trucks, .mobile-category-nav a[href='/food-trucks.html']) { --mobile-icon-x: -150.16px; }
  .mobile-guide :is(.hotspot-things, .mobile-category-nav a[href='/things-to-do.html']) { --mobile-icon-x: -250.64px; }
  .mobile-guide :is(.hotspot-events, .mobile-category-nav a[href='/events.html']) { --mobile-icon-x: -351.76px; }
  .mobile-guide :is(.hotspot-sports, .mobile-category-nav a[href='/sports/']) { --mobile-icon-x: -458.32px; }
  .mobile-guide :is(.hotspot-taprooms, .mobile-category-nav a[href='/taprooms.html']) { --mobile-icon-x: -566.48px; }
  :root[data-site-theme=light] .mobile-guide :is(.masthead-hotspot, .mobile-category-nav a)::before { mix-blend-mode: normal; border-radius: 50%; }
  .mobile-guide .masthead-hotspot span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .mobile-guide .masthead-hotspot:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  .mobile-guide .buzz-masthead-tools { padding: 8px 16px; gap: 8px 16px; justify-content: flex-start; }
  .mobile-guide .buzz-masthead-tools > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .mobile-guide .masthead .mobile-category-nav { width: 100%; padding: 0; }
  .mobile-guide .mobile-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px #0002;
  }
  .mobile-bottom-nav a {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }
  .mobile-bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-bottom-nav a[aria-current="page"] { color: var(--action); background: var(--light); }
  .mobile-bottom-nav a:focus-visible { outline-offset: -3px; }
  .mobile-guide :is(button, input, select, .primary-button, .map-button, .source-link, .truck-link, .hero-link, .home-deal-action, .featured-buzz-actions a) { min-height: 44px; }
  .mobile-guide :is(input, select) { font-size: 16px; max-width: 100%; }
  .mobile-guide button { min-width: 44px; }
  .mobile-guide :is(.source-link, .map-button, .truck-link, .hero-link, .home-deal-action, .primary-button) { display: inline-flex; align-items: center; }
  .mobile-guide :is(.card-actions, .featured-buzz-actions) { gap: 8px 12px; flex-wrap: wrap; }
  .mobile-guide :is(.source-link, .map-button, .card-detail, .schedule-note, .home-deal-time, .buzz-detail) { font-size: 14px; }
  .mobile-guide :is(.hero, .home-dashboard, .things-directory, .directory-main, .watch-page, .sports-landing) { padding-left: 16px; padding-right: 16px; }
  .mobile-guide .hero { min-height: 0; padding-top: 20px; gap: 20px; grid-template-columns: minmax(0, 1fr); }
  .mobile-guide .hero h1 { font-size: clamp(38px, 11vw, 58px); letter-spacing: -1.5px; }
  .mobile-guide .hero .eyebrow { flex-wrap: wrap; letter-spacing: 1px; }
  .mobile-guide :is(.hero-description, .featured-buzz-copy) { font-size: 15px; }
  .mobile-guide :is(.featured-buzz, .buzz-panel, .buzz-today) { padding: 20px 16px; }
  .mobile-guide :is(.featured-buzz-top, .card-top, .results-heading) { flex-wrap: wrap; }
  .mobile-guide :is(.card-grid, .today-grid, .home-dashboard-grid, .home-games-grid, .watch-featured-teams) { grid-template-columns: minmax(0, 1fr); }
  .mobile-guide :is(.card, .watch-team, .home-deal-card, .hero-copy, .featured-buzz, .home-section-heading > div) { min-width: 0; overflow-wrap: anywhere; }
  .mobile-guide .home-buzz-row { width: calc(100% - 32px); }
  .mobile-guide .filter-row { align-items: stretch; }
  .mobile-guide .search-wrap { min-width: 0; width: 100%; }
  .mobile-guide :is(.rest-filters, .rest-select) { min-width: 0; }
  .mobile-guide dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .mobile-guide .card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-guide { scroll-behavior: auto; }
}

/* Native modal keeps Explore available above the fixed bottom navigation. */
.mobile-explore-menu {
  width: min(440px, calc(100% - 24px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
}
.mobile-explore-menu::backdrop { background: #0008; }
.mobile-explore-menu h2 { margin: 8px 0 20px; font-size: 24px; }
.mobile-explore-close {
  display: block;
  margin-left: auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--light);
  color: var(--ink);
}
.mobile-explore-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-explore-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--light);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}
.mobile-explore-links a:focus-visible, .mobile-explore-close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Approved phone layout, October 29, 2026. Desktop retains its existing cascade. */
@media (max-width:600px) {
  /* All nine categories remain visible in the same three-row phone grid. */
  .mobile-guide.phone-layout-page .buzz-masthead-hotspots.stay-category-nav,
  .home-streamlined.mobile-guide .buzz-masthead-hotspots.stay-category-nav {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    box-sizing:border-box; width:100%; min-width:0; max-width:100%;
    overflow:visible; gap:6px 8px; padding:0 12px 12px;
    scroll-snap-type:none; background:var(--paper);
  }
  .mobile-guide.phone-layout-page .buzz-masthead-hotspots.stay-category-nav .masthead-hotspot {
    box-sizing:border-box; min-width:0; min-height:68px;
    font-size:12px; justify-content:center; gap:5px;
  }
  /* Blend the sprite's dark rectangular backdrop into the row itself.
     The SVG filter removes the baked-in dark backdrop without recoloring the artwork. */
  .home-streamlined.mobile-guide .buzz-masthead .stay-category-nav :is(.hotspot-restaurants, .hotspot-trucks, .hotspot-things, .hotspot-events, .hotspot-sports, .hotspot-taprooms)::before {
    background-color:transparent; mix-blend-mode:normal;
    box-shadow:none; filter:url(#home-nav-remove-dark); border-radius:0;
  }
  .mobile-guide.phone-layout-page .buzz-masthead-tools {padding-block:0;}
  .mobile-guide.phone-layout-page.home-streamlined .hero {padding-top:16px; padding-bottom:16px; gap:12px;}
  .mobile-guide.phone-layout-page.home-streamlined .hero h1 {font-size:38px; margin:10px 0;}
  .mobile-guide.phone-layout-page.home-streamlined .hero-description {margin-block:10px;}
  .mobile-guide.phone-layout-page.home-streamlined .hero-mascot {display:none;}
  .mobile-guide.phone-layout-page .phone-layout-shortcuts {display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0;}
  .phone-layout-shortcuts a {display:inline-flex; min-height:44px; align-items:center; padding:8px 14px; border:1px solid var(--line); border-radius:24px; text-decoration:none; font-weight:700; color:var(--ink); background:var(--light);}
  .mobile-guide.phone-layout-page .directory-main[aria-label=Breadcrumb] {padding:14px 16px 10px; font-size:12px;}
  .mobile-guide.phone-layout-page main#profile {padding:8px 16px 24px;}
  .mobile-guide.phone-layout-page .profile-card .card-body {padding:20px 18px;}
  .mobile-guide.phone-layout-page .profile-card h1 {font-size:38px; margin:0 0 12px;}
  .mobile-guide.phone-layout-page .profile-card .card-actions {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0;}
  .mobile-guide.phone-layout-page .profile-card .card-actions a {justify-content:center; padding:8px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
}

/* Review retains its desktop administration layout. */
.review-mobile-header { display:none; }
@media(max-width:600px) {
 .review-mobile-header { display:block; margin:0 0 16px; }
 .review-mobile-header .buzz-masthead { width:100%; margin:0; padding:0; }
 :is(.review-mobile-header,.utility-header-page) .mobile-brand { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--paper); text-decoration:none; color:var(--ink); font:800 24px/1.2 system-ui,sans-serif; }
 .review-mobile-header .mobile-brand strong { color:var(--orange); }
 .review-mobile-header .buzz-masthead-art { border:0; border-radius:0; }
 .review-mobile-header .stay-category-nav .hotspot-stay { grid-column:auto; }
}

@media(max-width:600px) {
 .utility-header-page .stay-brand-art {display:none;}
 .utility-header-page .buzz-masthead {width:100%;margin:0;}
 .utility-header-page .buzz-masthead-art {border:0;border-radius:0;}
}

.review-mobile-header { --paper:#11142c; --ink:#f5f3ff; --orange:#ff2a85; --muted:#b0b6d5; --line:#30345e; }
@media(max-width:600px) {
 .review-mobile-header .buzz-masthead {display:block;}
 .review-mobile-header .mobile-brand {box-sizing:border-box;width:100%;margin:0;}
 .review-mobile-header .buzz-masthead-art {width:100%;margin:0;padding:0;}
 body:has(.review-mobile-header) .public-header-categories,
 body:has(.review-mobile-header) .public-header-mobile-brand,
 body:has(.review-mobile-header) .public-header-brand {display:none;}
 body:has(.review-mobile-header) > .policy-original-brand {display:none;}
}