/*
Theme Name: Backyard Brew
Theme URI: https://backyard-brew.com
Author: Built By Micah
Author URI: https://built-by-micah.com
Description: Custom multi-page WordPress theme for Backyard Brew, Green Bay's outdoor craft bar and disc golf course. Everything is editable from Appearance > Customize, no page builder, no paid plugins.
Version: 6.8
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: backyard-brew
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  --navy: #0B1C2D;
  --navy-soft: #13293c;
  --gold: #C8922A;
  --gold-bright: #E0A93A;
  --yellow: #F5C842;
  --cream: #F5EFD8;
  --cream-dim: #d9d3bd;
  --blue: #4A90C4;
  --ink: #0B1C2D;
  --line: rgba(245, 239, 216, 0.14);
  --line-dark: rgba(11, 28, 45, 0.12);

  --f-display: "Alfa Slab One", Georgia, serif;
  --f-head: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --navy-deep: #071320;

  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; --s-8: 9rem;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;

  /* Layered, navy-tinted depth ramp (base -> elevated -> floating) */
  --shadow-1: 0 1px 2px rgba(7,19,32,.20), 0 6px 16px rgba(7,19,32,.24);
  --shadow-2: 0 2px 6px rgba(7,19,32,.26), 0 18px 40px rgba(7,19,32,.36);
  --shadow-3: 0 4px 12px rgba(7,19,32,.32), 0 34px 70px rgba(7,19,32,.48);
  --gold-glow: 0 14px 36px rgba(200,146,42,.32);
  /* Back-compat aliases used by older rules */
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  --container: 1200px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--navy);
  color: var(--cream);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* Fine paper grain over the whole site for tactile, printed-poster depth. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("assets/img/grain.svg");
  background-size: 260px 260px;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); }
p { color: var(--cream-dim); }

/* Oversized editorial display for page heroes */
.display-xl { font-size: clamp(3.2rem, 9vw, 7rem); line-height: 0.96; letter-spacing: -0.03em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-3); }
.section { padding: var(--s-7) 0; position: relative; }
.section--tight { padding: var(--s-6) 0; }
.center { text-align: center; }

/* Surfaces */
.bg-navy { background: var(--navy); }
.bg-navy-soft { background: var(--navy-soft); }
.bg-cream { background: var(--cream); color: var(--ink); }
.bg-cream p { color: #44505c; }
.bg-cream h2, .bg-cream h3 { color: var(--navy); }

/* Topographic contour texture — the outdoors, felt not shouted.
   Concentric ring "elevation lines" like a national-park trail map. */
.topo, .topo-lines { position: relative; }
.topo::before, .topo-lines::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 30%, transparent 0 54px, rgba(200,146,42,0.06) 55px 56px, transparent 57px 96px, rgba(200,146,42,0.045) 97px 98px, transparent 99px 150px, rgba(200,146,42,0.03) 151px 152px, transparent 153px),
    radial-gradient(circle at 82% 78%, transparent 0 70px, rgba(74,144,196,0.05) 71px 72px, transparent 73px 128px, rgba(74,144,196,0.035) 129px 130px, transparent 131px);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.topo > *, .topo-lines > * { position: relative; z-index: 1; }
.bg-cream.topo::before, .bg-cream .topo-lines::before { opacity: 0.7; }

/* Duotone navy->gold photo treatment for atmosphere imagery */
.duo { position: relative; overflow: hidden; }
.duo > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.duo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(11,28,45,0.34), rgba(200,146,42,0.16) 62%, rgba(11,28,45,0.28));
  mix-blend-mode: multiply; transition: opacity 0.5s var(--ease); opacity: 1;
}
.duo:hover::after { opacity: 0; }

/* Depth helpers */
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }

/* Intentional on-brand placeholder for any photo slot left empty */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, transparent 0 30px, rgba(200,146,42,0.10) 31px 32px, transparent 33px 64px, rgba(200,146,42,0.07) 65px 66px, transparent 67px),
    linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  color: rgba(245,239,216,0.4); overflow: hidden;
}
.ph__icon { font-size: 2rem; opacity: 0.7; }
.ph::after {
  content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("assets/img/grain.svg"); background-size: 220px 220px;
}

/* Seamless page-to-page flow */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: bb-fade-out 0.22s var(--ease) both; }
::view-transition-new(root) { animation: bb-fade-in 0.32s var(--ease) both; }
@keyframes bb-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes bb-fade-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Eyebrow / badge label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.8rem; color: var(--yellow);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.bg-cream .eyebrow { color: var(--gold); }

.section-head { max-width: 62ch; margin-bottom: var(--s-5); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { margin: 0.9rem 0; }
.section-head p { font-size: 1.12rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 0.95rem; padding: 0.95rem 1.7rem; border-radius: var(--r-sm);
  border: 2px solid transparent; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,146,42,0.35); }
.btn--outline { border-color: var(--cream); color: var(--cream); }
.btn--outline:hover { background: var(--cream); color: var(--navy); transform: translateY(-2px); }
.bg-cream .btn--outline { border-color: var(--navy); color: var(--navy); }
.bg-cream .btn--outline:hover { background: var(--navy); color: var(--cream); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.02rem; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 28, 45, 0.82); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(11,28,45,0.96); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--f-display); font-size: 1.3rem; color: var(--cream); }
.brand img { max-height: 52px; width: auto; border-radius: 50%; }
.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links a { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.92rem; font-weight: 500; color: var(--cream); position: relative; padding: 0.3rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: var(--gold); transition: width 0.25s var(--ease); }
.nav__links a:hover::after, .nav__links a.current::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; background: none; border: 0; width: 46px; height: 46px; flex-direction: column; justify-content: center; gap: 5px; }
.nav__toggle span { display: block; height: 2.5px; width: 26px; background: var(--cream); margin: 0 auto; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,28,45,0.55) 0%, rgba(11,28,45,0.25) 40%, rgba(11,28,45,0.92) 100%); }
.hero__media.zoom img { animation: bb-kenburns 26s ease-in-out infinite alternate; }
.hero__lights { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none; opacity: 0.9; }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--s-6); padding-top: var(--s-6); }
.hero__inner .container { max-width: var(--container); }
.hero h1 { color: var(--cream); text-shadow: 0 4px 30px rgba(0,0,0,0.5); max-width: 16ch; }
.hero .accent { color: var(--yellow); }
.hero__sub { font-size: 1.25rem; color: var(--cream); max-width: 52ch; margin: 1.4rem 0 2rem; text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--cream); opacity: 0.7; font-size: 0.8rem; font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.2em; animation: bb-bob 2.4s ease-in-out infinite; }

@keyframes bb-kenburns { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
@keyframes bb-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* Page hero (interior pages) */
.page-hero { position: relative; padding: var(--s-7) 0 var(--s-5); text-align: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.22; z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--cream); }
.page-hero p { max-width: 60ch; margin: 1rem auto 0; font-size: 1.15rem; }

/* Badge stamp */
.badge-stamp { width: 96px; height: 96px; margin: 0 auto var(--s-3); position: relative; }
.badge-stamp svg { width: 100%; height: 100%; animation: bb-spin 40s linear infinite; }
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* =========================================================
   ACTIVITIES / FEATURE GRID
   ========================================================= */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.feature { background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.feature:hover { transform: translateY(-6px); border-color: var(--gold); }
.feature__img { margin: calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.feature--photo:hover .feature__img img { transform: scale(1.05); }
.feature .ico { width: 54px; height: 54px; border-radius: 14px; background: rgba(200,146,42,0.16); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; }
.feature--photo .ico { width: 44px; height: 44px; font-size: 1.3rem; margin-top: -2.2rem; position: relative; z-index: 2; border: 2px solid var(--navy-soft); background: var(--navy); }
.feature h3 { color: var(--cream); margin-bottom: 0.5rem; }

/* Split feature (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
.split.flip .split__media { order: 2; }
.split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { margin-bottom: 1rem; }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); text-align: center; }
.stat .num { font-family: var(--f-display); font-size: 2.6rem; color: var(--yellow); line-height: 1; }
.stat .lbl { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--cream-dim); margin-top: 0.5rem; }

/* =========================================================
   EVENTS
   ========================================================= */
.week { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.day {
  background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3); position: relative; overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.day:hover { transform: translateY(-5px); border-color: var(--gold); }
.day__img { margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; }
.day__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.day--photo:hover .day__img img { transform: scale(1.05); }
.day__day { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gold); }
.day h3 { color: var(--cream); margin: 0.35rem 0; font-size: 1.5rem; }
.day__time { display: inline-block; font-family: var(--f-head); font-weight: 600; color: var(--navy); background: var(--yellow); padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.82rem; margin-bottom: 0.7rem; }
.day p { font-size: 0.95rem; }
.monthly { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.monthly .day { border-color: rgba(200,146,42,0.4); }
.monthly .ico { font-size: 1.8rem; }

/* =========================================================
   MENU (drinks + food)
   ========================================================= */
.menu-cat { margin-bottom: var(--s-6); }
.menu-cat__head { display: flex; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--gold); padding-bottom: 0.7rem; margin-bottom: 1.4rem; }
.menu-cat__head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.bg-cream .menu-cat__head h2 { color: var(--navy); }
.menu-cat__note { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--gold); margin-left: auto; }
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 2.5rem; }
.menu-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px dotted var(--line-dark); }
/* No white-space: nowrap here. A name like "Nitro Chocolate Peanut Butter
   Porter" cannot fit one line on a phone, and forcing it pushed the whole row
   past the viewport - the price scrolled off the right edge and body's
   overflow-x: hidden quietly clipped it. Wrapping is the correct behaviour;
   min-width: 0 lets the flex item actually shrink so it can. */
.menu-row__name { font-family: var(--f-head); font-weight: 600; font-size: 1.08rem; color: var(--navy); min-width: 0; }
.bg-navy .menu-row { border-bottom-color: var(--line); }
.bg-navy .menu-row__name { color: var(--cream); }
.menu-row__meta { color: #6b7682; font-size: 0.86rem; font-style: italic; }
.bg-navy .menu-row__meta { color: var(--cream-dim); }
.menu-row__dots { flex: 1 1 14px; border-bottom: 1px dotted #aeb6bd; transform: translateY(-4px); min-width: 14px; }
.menu-row__price { flex: 0 0 auto; font-family: var(--f-head); font-weight: 700; color: var(--gold); font-size: 1.05rem; }
.menu-row__abv { flex: 0 0 auto; font-family: var(--f-head); font-size: 0.78rem; color: var(--blue); margin-left: 0.3rem; }

/* =========================================================
   MEMBERSHIP
   ========================================================= */
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); max-width: 880px; margin: 0 auto; align-items: stretch; }
/* Column layout so the sign-up buttons line up across cards with different
   numbers of perks (margin-top:auto on .tier__btn pushes them to the floor). */
.tier {
  display: flex; flex-direction: column;
  background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); position: relative; overflow: hidden;
}
.tier--feature { border-color: var(--gold); }
.tier__ribbon { position: absolute; top: 1.2rem; right: -2.4rem; transform: rotate(45deg); background: var(--gold); color: var(--navy); font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; padding: 0.3rem 3rem; z-index: 2; }
/* The stamp and the ribbon both sit in the top-right corner, so the heading
   block is inset to keep clear of them instead of running underneath. */
.tier__head { padding-right: 84px; }
/* These headings are <h2>, and the global h2 is a 3.6rem display face - it blew
   straight through the side of the card and collided with the corner stamp.
   Size them for the box they live in. */
.tier h2, .tier h3 { color: var(--cream); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.06; overflow-wrap: break-word; }
.tier__price { font-family: var(--f-display); font-size: clamp(2.4rem, 4vw, 3rem); color: var(--yellow); line-height: 1; margin: 0.6rem 0 0.2rem; }
.tier__per { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--cream-dim); }
.tier ul { margin: 1.4rem 0; }
.tier li { padding: 0.6rem 0; border-top: 1px solid var(--line); display: flex; gap: 0.6rem; align-items: flex-start; color: var(--cream); }
.tier li::before { content: "🍺"; font-size: 0.95rem; flex: 0 0 auto; }
.tier__btn { margin-top: auto; align-self: flex-start; }
.tiers__note { max-width: 880px; margin: var(--s-4) auto 0; text-align: center; font-size: 0.95rem; color: var(--cream-dim); }

/* =========================================================
   GALLERY
   ========================================================= */
/* grid-auto-flow: dense backfills the holes the tall/wide spans leave behind,
   so the mosaic stays solid no matter how many photos the owner leaves in. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 0.7rem; }
.gallery .duo { display: block; border-radius: var(--r-md); overflow: hidden; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery a.duo:hover img { transform: scale(1.06); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }

/* =========================================================
   VISIT / MAP / CONTACT
   ========================================================= */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: stretch; }
.visit__map { border-radius: var(--r-lg); overflow: hidden; min-height: 380px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.visit__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }
.info-row { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info-row .ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: rgba(200,146,42,0.16); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.info-row h4, .info-row__h { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; line-height: 1.3; color: var(--gold); margin-bottom: 0.3rem; }
.info-row p { color: var(--cream); margin: 0; }
.hours-line { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px dotted var(--line); color: var(--cream); }
.hours-line span:first-child { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }
.socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.socials a { width: 46px; height: 46px; border-radius: 12px; background: rgba(245,239,216,0.08); display: flex; align-items: center; justify-content: center; color: var(--cream); transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.socials a:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color: var(--navy); text-align: center; }
.cta-band h2 { color: var(--navy); }
.cta-band p { color: rgba(11,28,45,0.8); max-width: 56ch; margin: 1rem auto 1.8rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #07131f; padding: var(--s-5) 0 var(--s-3); border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.footer__brand { font-family: var(--f-display); font-size: 1.5rem; color: var(--cream); }
.footer__tag { margin-top: 0.7rem; max-width: 36ch; font-size: 0.95rem; }
.footer__col h4, .footer__h { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; line-height: 1.3; color: var(--gold); margin-bottom: 0.9rem; }
.footer__col a { display: block; color: var(--cream-dim); padding: 0.3rem 0; font-size: 0.95rem; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--yellow); }
.footer__bottom { padding-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--cream-dim); }
.footer__bottom a:hover { color: var(--yellow); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media.zoom img, .badge-stamp svg, .hero__scroll { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .features, .week, .stats { grid-template-columns: repeat(2, 1fr); }
  .split, .visit, .tiers, .monthly { grid-template-columns: 1fr; }
  .split.flip .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .menu-list { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .site-header.open .nav__links {
    display: flex; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 0.3rem; background: var(--navy); padding: 1.2rem var(--s-3);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  }
  .site-header.open .nav__links a { padding: 0.6rem 0; width: 100%; }
  .features, .week, .stats { grid-template-columns: 1fr; }
  .section { padding: var(--s-6) 0; }
  .hero { min-height: 80vh; }
}

/* =========================================================
   v4 ELEVATION — CHROME (footer, page hero)
   ========================================================= */

/* Footer: gold hairline + warmer depth */
.site-footer { background: var(--navy-deep); border-top: 2px solid var(--gold); }
.site-footer .footer__brand { letter-spacing: -0.01em; }

/* Elevated interior page hero — topo backdrop, big editorial type, gold rule */
.page-hero {
  padding: calc(var(--s-7) + 40px) 0 var(--s-6);
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { margin-bottom: 0.6rem; }
.page-hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.4rem); letter-spacing: -0.03em; line-height: 0.98; }
.page-hero h1::after {
  content: ""; display: block; width: 72px; height: 4px; border-radius: 4px;
  background: var(--gold); margin: 1.1rem auto 0;
}
.page-hero p { max-width: 60ch; margin-left: auto; margin-right: auto; color: var(--cream-dim); }
/* =========================================================
   v4 ELEVATION — HOME SECTIONS
   ========================================================= */

/* Hero "tonight" teaser */
.hero__status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.2rem; margin: 0 0 1.7rem; }
/* inline-block, not inline-flex. As a flex container every child became a flex
   item and the 0.4rem gap landed between the event name and the comma after
   it, printing "Backyard Market & Brews , 4 PM". Normal inline flow spaces
   these correctly. Same reason there is no letter-spacing here. */
.hero__tonight {
  display: inline-block;
  font-family: var(--f-head); font-size: 0.95rem; line-height: 1.5; color: var(--cream);
  padding: 0.5rem 1rem; border-radius: 999px;
  background: rgba(7,19,32,0.55); border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.hero__tonight strong { color: var(--yellow); font-weight: 600; }

/* Tonight rail (signature) */
.tonight { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.7rem; }
.tnight {
  display: flex; flex-direction: column; min-height: 198px;
  background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.05rem 0.95rem 1.15rem; box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tnight:hover { transform: translateY(-5px); border-color: var(--gold); }
.tnight__top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.45rem; min-height: 20px; }
.tnight__day { font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; color: var(--cream-dim); }
.tnight__flag { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; color: var(--navy); background: var(--yellow); padding: 0.16rem 0.5rem; border-radius: 999px; }
.tnight h3 { font-family: var(--f-head); font-weight: 600; color: var(--cream); font-size: 1.1rem; line-height: 1.14; letter-spacing: 0; margin-bottom: 0.35rem; }
.tnight__time { align-self: flex-start; font-family: var(--f-head); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 0.5rem; }
.tnight p { font-size: 0.83rem; line-height: 1.5; color: var(--cream-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.tnight.is-today { border-color: var(--gold); background: linear-gradient(160deg, rgba(200,146,42,0.18), var(--navy-soft)); box-shadow: var(--gold-glow); }
.tnight.is-today h3 { color: var(--yellow); }
.tnight--rest { background: repeating-linear-gradient(45deg, var(--navy-soft) 0 11px, rgba(245,239,216,0.015) 11px 22px); }

/* On Tap teaser */
.taps-head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: var(--s-4); flex-wrap: wrap; }
/* The stamp is a circle with free text in it, so the text has to be kept off the
 * curve. Padding gives it a square safe area inside the round border, and the
 * bottom line wraps instead of running edge to edge ("WISCONSIN POURS" used to
 * touch the gold ring on both sides). */
.taps-badge {
  flex: 0 0 auto; width: 124px; height: 124px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 1.1rem; text-align: center;
  background: var(--navy); color: var(--yellow); font-family: var(--f-display); font-size: 2.05rem; line-height: 1;
  border: 3px solid var(--gold); box-shadow: var(--shadow-2); transform: rotate(-7deg);
}
.taps-badge small {
  display: block; font-family: var(--f-head); font-size: 0.56rem;
  letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase;
  color: var(--cream); margin-top: 0.3rem;
}
.taps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.taps-card { background: #fff; border: 1px solid rgba(11,28,45,0.10); border-radius: var(--r-md); padding: 1.05rem 1.2rem; box-shadow: var(--shadow-1); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.taps-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.taps-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.taps-card__name { font-family: var(--f-head); font-weight: 700; color: var(--navy); font-size: 1.04rem; line-height: 1.15; }
.taps-card__price { font-family: var(--f-head); font-weight: 700; color: var(--gold); white-space: nowrap; }
.taps-card__meta { display: block; color: #6b7682; font-size: 0.84rem; font-style: italic; margin-top: 0.25rem; }
.taps-card__abv { display: inline-block; margin-top: 0.55rem; font-family: var(--f-head); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }

/* Activities (asymmetric) */
.acts { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.act { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--navy-soft); box-shadow: var(--shadow-2); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); }
.act:hover { transform: translateY(-5px); border-color: var(--gold); }
.act--lead { grid-row: 1 / 3; }
.act__media { position: relative; flex: 1 1 auto; min-height: 165px; }
.act--lead .act__media { min-height: 320px; }
.act__media img, .act__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act__body { padding: 1.15rem 1.3rem 1.35rem; }
.act__ico { font-size: 1.55rem; }
.act h3 { color: var(--cream); margin: 0.25rem 0 0.4rem; }
.act p { font-size: 0.94rem; margin: 0; }
/* Vertical padding is what makes this a 44px tap target on a phone. The
   underline rides on a pseudo-element rather than the border so it stays
   tight under the words instead of floating below the padding - the same
   trick .nav__links a already uses. */
.act__link { position: relative; display: inline-block; margin-top: 0.35rem; padding: 0.62rem 0; color: var(--gold); font-family: var(--f-head); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; }
.act__link::after { content: ""; position: absolute; left: 0; bottom: 0.45rem; height: 2px; width: 0; background: var(--gold); transition: width 0.25s var(--ease); }
.act__link:hover::after, .act__link:focus-visible::after { width: 100%; }
/* Gold on navy is 5.4:1 and fine. Gold on the cream sections is 2.4:1 and is
   not - the cross-links on the Disc Golf and Trails pages live there, so they
   take navy text and keep the gold underline. */
.bg-cream .act__link { color: var(--navy); }

/* Plain fact lists on the Disc Golf, Trails and event-night pages. */
.know { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.know li { position: relative; padding: 0.55rem 0 0.55rem 1.5rem; border-bottom: 1px dotted var(--line-dark); }
.know li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
/* The anchor takes the row's padding (and cancels it with a negative margin)
   so the whole row is tappable, not just the 21px of text. */
.know a { display: block; padding: 0.55rem 0; margin: -0.55rem 0; color: inherit; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.know a:hover, .know a:focus-visible { border-bottom-color: var(--gold); }
.know__more { margin-top: 1.4rem; }
.bg-navy .know li { border-bottom-color: var(--line); }

/* Placeholder sizing inside media wrappers */
.ph { width: 100%; height: 100%; min-height: 160px; }

/* Stats band */
.bg-navy-deep { background: var(--navy-deep); }
.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Gallery: duotone reveals to colour on hover */
.gallery .duo::after { border-radius: inherit; }

/* Membership stamp band */
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cta-band { position: relative; overflow: hidden; }
.cta-band--stamp::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 22%, transparent 0 40px, rgba(11,28,45,0.07) 41px 42px, transparent 43px 80px, rgba(11,28,45,0.05) 81px 82px, transparent 83px),
    radial-gradient(circle at 88% 80%, transparent 0 56px, rgba(11,28,45,0.06) 57px 58px, transparent 59px);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band__kicker { display: inline-block; font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; font-weight: 600; color: var(--navy); opacity: 0.72; margin-bottom: 0.55rem; }

/* Home responsive */
@media (max-width: 1100px) {
  .tonight { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(210px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; -webkit-overflow-scrolling: touch; }
  .tnight { scroll-snap-align: start; }
}
@media (max-width: 980px) {
  .taps-grid { grid-template-columns: repeat(2, 1fr); }
  .acts { grid-template-columns: 1fr; grid-template-rows: none; }
  .act--lead { grid-row: auto; }
  .act--lead .act__media { min-height: 220px; }
}
@media (max-width: 600px) {
  .taps-grid { grid-template-columns: 1fr; }
  .taps-head { gap: 1.2rem; }
}
/* =========================================================
   v4 ELEVATION — DRINKS jump-nav
   ========================================================= */
.menu-jump { position: sticky; top: 80px; z-index: 50; background: rgba(245,239,216,0.93); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line-dark); }
.menu-jump__inner { display: flex; gap: 0.45rem; overflow-x: auto; padding-top: 0.7rem; padding-bottom: 0.7rem; -webkit-overflow-scrolling: touch; }
.menu-jump a { flex: 0 0 auto; font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.78rem; font-weight: 600; color: var(--navy); padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid rgba(11,28,45,0.18); transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.menu-jump a:hover, .menu-jump a:focus-visible { background: var(--navy); color: var(--cream); outline: none; }
.menu-cat { scroll-margin-top: 150px; }
.menu-cat__head h2 { letter-spacing: -0.01em; }
@media (max-width: 700px) { .menu-jump { top: 0; } }
/* =========================================================
   v4 ELEVATION — EVENTS (ticket stub) + MEMBERSHIP (passport)
   ========================================================= */
.ticket { padding: 0; overflow: hidden; }
.ticket .day__img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.ticket .day__img img, .ticket .day__img .ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.ticket__body { position: relative; padding: 1.2rem 1.3rem 1.35rem; border-top: 2px dashed var(--line); }
.ticket__body::before, .ticket__body::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--navy); }
.ticket__body::before { left: -9px; }
.ticket__body::after { right: -9px; }
.bg-navy-soft .ticket__body::before, .bg-navy-soft .ticket__body::after { background: var(--navy-soft); }
.day__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
.ticket.is-today { border-color: var(--gold); box-shadow: var(--gold-glow); }
.ticket.is-today h3 { color: var(--yellow); }
.ticket h3 { margin: 0.1rem 0 0.35rem; }

/* Membership passport cards */
.tiers--passport .tier { border-style: dashed; border-width: 2px; border-color: rgba(200,146,42,0.45); }
.tier__stamp {
  position: absolute; top: 1.1rem; right: 1.1rem; width: 66px; height: 66px; border-radius: 50%;
  border: 2px dashed var(--gold); display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.58rem; line-height: 1.1;
  color: var(--gold); transform: rotate(-12deg); opacity: 0.85; padding: 0.4rem; z-index: 2;
}

/* =========================================================
   v5 — ACCESSIBILITY, FAQ, FORM, ODDS AND ENDS
   ========================================================= */

/* Keyboard users get a way past the nav */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--navy); padding: 0.8rem 1.4rem;
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.skip-link:focus { left: 0; }

.container--narrow { max-width: 680px; }
.btn--block { width: 100%; justify-content: center; }

/* Small print under an interior page heading */
.page-hero__note {
  max-width: 60ch; margin: 1rem auto 0; font-size: 0.92rem;
  color: var(--cream-dim); opacity: 0.85;
}

/* Hours list: today stands out, plus the course-access note */
.info-row--block { display: block; }
/* The home page prints all seven days and shows only today's. Server-rendered
   HTML picks it; main.js re-picks from the visitor's clock if the page came out
   of a cache. Without JS the server's choice still stands. */
.today-hours { display: none; }
.today-hours.is-today { display: block; }
.hours-line.is-today span { color: var(--yellow); }
.hours-line.is-today span:first-child::after { content: " (today)"; font-size: 0.78em; opacity: 0.75; letter-spacing: 0; }
.hours-note { margin-top: 0.9rem; font-size: 0.88rem; color: var(--cream-dim); }
.info-row__h--spaced { margin-top: 1.6rem; }
.footer__addr { font-style: normal; color: var(--cream-dim); font-size: 0.95rem; padding: 0.3rem 0; }

/* =========================================================
   FAQ (also what search engines and AI assistants quote)
   ========================================================= */
.faq { max-width: 80ch; margin: 0 auto; }
.faq__item {
  border: 1px solid rgba(11,28,45,0.14); border-radius: var(--r-md);
  background: #fff; margin-bottom: 0.7rem; box-shadow: 0 1px 2px rgba(11,28,45,0.05);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq__item[open] { border-color: rgba(200,146,42,0.55); box-shadow: 0 8px 22px rgba(11,28,45,0.09); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.3rem; position: relative;
  font-family: var(--f-head); font-weight: 600; font-size: 1.06rem; color: var(--navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: var(--r-md); }
.faq__item summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { padding: 0 1.3rem 1.2rem; margin: 0; color: #46525e; max-width: 68ch; }

/* =========================================================
   CONTACT FORM
   ========================================================= */
.form {
  background: var(--navy); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
}
.form__trap { position: absolute; left: -9999px; }
.form__row { margin-bottom: 1rem; }
.form__label {
  display: block; font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  color: var(--gold); margin-bottom: 0.4rem;
}
.form__input {
  width: 100%; padding: 0.8rem 1rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--navy-soft); color: var(--cream);
  font: inherit; resize: vertical;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form__input:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,146,42,0.25); }
.form__msg { padding: 0.9rem 1rem; border-radius: 8px; margin-bottom: 1.2rem; color: var(--cream); }
.form__msg--ok { background: rgba(74,144,196,0.18); }
.form__msg--err { background: rgba(200,60,60,0.18); }
.form button[type="submit"] { margin-top: 0.4rem; }
.form__alt { margin-top: 1.2rem; font-size: 0.92rem; color: var(--cream-dim); }
.form__alt a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  .faq__item summary { font-size: 1rem; padding-right: 2.6rem; }
  .form { padding: var(--s-3); }
}

/* =========================================================
   v6 — PHONE PASS
   Most visitors arrive on a phone, so this block is the one that has to be
   right. Everything here is narrow-screen only; desktop is untouched.
   ========================================================= */

/* Long unbroken strings (an email address, a brewery name) are the usual cause
   of a page that scrolls sideways on a 360px screen. */
@media (max-width: 700px) {
  .footer__col a, .footer__addr, .form__alt, .menu-row__meta { overflow-wrap: break-word; }

  /* Menus: name and price on one line, brewery/style underneath, so a long
     name never squeezes the price into an unreadable column. */
  .menu-list { gap: 0; }
  .menu-row { flex-wrap: wrap; row-gap: 0.15rem; padding: 0.7rem 0; }
  .menu-row__name { flex: 1 1 auto; font-size: 1rem; }
  .menu-row__meta { flex: 1 0 100%; order: 3; font-size: 0.82rem; margin-top: 0.1rem; }
  .menu-row__abv { order: 4; margin-left: 0; }
  .menu-row__dots { display: none; }
  .menu-row__price { margin-left: auto; padding-left: 0.8rem; }
  /* On Tap on a phone. The section shows the whole draft list now, and ten
     chunky white cards stacked one per row ran nearly 3000px of scroll for
     something people only skim. Same markup, collapsed into one card of tight
     rows like the Drinks page: name and price on the first line, brewery and
     ABV on the second. The round stamp also stops claiming a whole empty band
     across the page and sits beside the heading instead. */
  .taps-head { flex-wrap: nowrap; align-items: flex-start; gap: 1rem; }
  .taps-head > div { min-width: 0; }
  .taps-badge {
    width: 86px; height: 86px; padding: 0 0.5rem; border-width: 2px;
    font-size: 1.35rem; margin-top: 0.2rem;
  }
  .taps-badge small { font-size: 0.44rem; letter-spacing: 0.05em; margin-top: 0.2rem; }

  .taps-grid {
    grid-template-columns: 1fr; gap: 0;
    background: #fff; border-radius: var(--r-md);
    box-shadow: var(--shadow-1); padding: 0 1rem;
  }
  .taps-card {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0.7rem 0; display: flex; flex-wrap: wrap; align-items: baseline;
    border-bottom: 1px solid rgba(11,28,45,0.10);
  }
  .taps-card:last-child { border-bottom: 0; }
  .taps-card:hover { transform: none; box-shadow: var(--shadow-1); }
  .taps-card__top { flex: 1 0 100%; }
  .taps-card__meta { flex: 1 1 auto; margin-top: 0.15rem; min-width: 0; }
  .taps-card__abv { margin: 0.15rem 0 0 auto; padding-left: 0.8rem; }

  .menu-cat { margin-bottom: var(--s-5); }
  .menu-cat__head { flex-wrap: wrap; gap: 0.3rem 1rem; }
  .menu-cat__note { margin-left: 0; flex: 1 0 100%; }

  /* Jump-nav pills: 44px tall so they are thumb-sized, and the scroll strip
     bleeds to the screen edge so it reads as swipeable. */
  .menu-jump__inner { padding-left: var(--s-3); padding-right: var(--s-3); }
  .menu-jump a { padding: 0.72rem 1rem; }

  /* Membership: the corner stamp is decorative and eats the width a real
     heading needs on a narrow card. */
  .tier { padding: var(--s-3); }
  .tier__stamp { display: none; }
  .tier__head { padding-right: 0; }
  .tier--feature .tier__head { padding-right: 68px; }
  .tier h2, .tier h3 { font-size: 1.55rem; }
  .tier__btn { align-self: stretch; justify-content: center; }

  /* Footer: one honest column instead of a ragged two. */
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .footer__brand { font-size: 1.35rem; }
  .footer__tag { max-width: none; }
  .footer__bottom { flex-direction: column; gap: 0.5rem; }

  /* Gallery: two columns, and drop the wide/tall spans - on a narrow screen
     they turn into odd holes rather than a mosaic. */
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 0.5rem; }
  .gallery a.tall, .gallery a.wide { grid-row: auto; grid-column: auto; }

  /* Anything that has to be tapped gets a 44px target. */
  .btn { padding: 0.95rem 1.5rem; min-height: 46px; }
  .btn--lg { padding: 1rem 1.6rem; }
  .socials a { width: 48px; height: 48px; }
  /* padding alone landed these at 40px and 41px - a min-height guarantees it
     regardless of the font's line box. */
  .footer__col a { display: flex; align-items: center; min-height: 44px; padding: 0.45rem 0; }
  .nav__links a { display: flex; align-items: center; min-height: 44px; padding: 0.7rem 0; }
  /* The whole row is the tap target on the fact lists, not just the words. */
  .know li { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .know li::before { top: 1.35rem; }
  .know a { padding: 0.8rem 0; margin: -0.8rem 0; }

  /* Hero: 80vh of photo before any words is a lot of thumb on a phone. */
  .hero { min-height: 74vh; }
  .hero__inner { padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .hero__sub { font-size: 1.08rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .page-hero { padding: calc(var(--s-6) + 20px) 0 var(--s-5); }

  .section-head p { font-size: 1.02rem; }
  .visit__map, .visit__map iframe { min-height: 280px; }
  .info-row { padding: 0.9rem 0; }
}

/* Very small phones (SE-class, 360px and under). */
@media (max-width: 380px) {
  .container { padding: 0 1.1rem; }
  .tier__price { font-size: 2.2rem; }
  .stat .num { font-size: 2.2rem; }
}