/* ============================================================================
   Tee Off At The Wharf

   Direction: "coastal country club, turned up." The brand is already olive, cream,
   arches and a checkerboard rule — heritage-preppy. The job here is to give it the
   energy of a sports bar without losing the polish: oversized display type, a
   marquee that never stops moving, arches that open on hover, and a page that
   arrives in sequence rather than all at once.

   Motion rules that are not negotiable:
     - Reveals are ARMED BY JS (.js-on). No JS, no hiding. Content never depends on
       an animation to become visible.
     - prefers-reduced-motion kills all of it, including the marquee.
   ========================================================================= */

/* ---------- type ---------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --olive:       #4a6234;
  --olive-deep:  #33452a;
  --olive-ink:   #22301a;
  --olive-soft:  #6b8352;
  --sage:        #a3be86;
  --sand:        #e8dcc0;
  --cream:       #fbf9f2;
  --cream-warm:  #f3efe2;
  --ink:         #1d2817;
  --flame:       #e2703a;   /* single warm accent — used sparingly, never decoratively */

  --wrap: 78rem;
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body: 'Karla', ui-sans-serif, system-ui, sans-serif;

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

  /* Every photo frame on the site reads from these two — hero, splits, gallery rails, sport cards
     and the bay switcher. They were 0.9rem / 0.8rem / 0.35rem / square before, which showed most
     on the homepage, where a square hero sat directly above rounded everything-else. Change the
     radius here and all of them move together; there is no second place to update. */
  --img-radius: 0.9rem;
  --img-border: 2px solid rgba(74, 98, 52, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0 0 0.42em;
  font-variation-settings: 'opsz' 96;
  text-wrap: balance;   /* no orphaned last word on a line of its own */
}
h1 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
p  { margin: 0 0 1.15em; text-wrap: pretty; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--cream); padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button, summary):focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; border-radius: 2px; }

/* ---------- reveal (armed only when JS runs) ---------- */

.js-on [data-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  will-change: opacity, transform;
}
.js-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- eyebrow + buttons ---------- */

.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--olive-soft);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 2px; background: currentColor; flex: none;
}
.eyebrow--light { color: var(--sage); }

.btn {
  --btn-fg: var(--cream);
  --btn-bg: var(--olive);
  position: relative;
  display: inline-block;
  padding: 0.95rem 1.9rem;
  margin: 0 0.6rem 0.6rem 0;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
/* Fill sweeps up from the base rather than a flat colour swap. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fg);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}
.btn:hover { transform: translateY(-3px); color: var(--btn-bg); }
.btn:hover::after { transform: translateY(0); }

.btn--cream { --btn-fg: var(--olive-ink); --btn-bg: var(--cream); }
.btn--flame { --btn-fg: var(--cream); --btn-bg: var(--flame); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; background: transparent; }
.btn--ghost::after { background: var(--cream); }
.btn--ghost:hover { color: var(--olive-ink); }

/* ---------- header ---------- */

.hdr {
  background: var(--olive);
  color: var(--cream);
  position: sticky; top: 0; z-index: 50;
}
.hdr__in {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  /* padding-block, not a taller min-height: the logo is now 5.5rem and would otherwise meet the
     bar's top and bottom edges exactly, with no air around it. */
  min-height: 4.75rem; padding-block: 0.6rem; flex-wrap: wrap;
}
.hdr__brand { text-decoration: none; display: flex; align-items: center; margin-right: auto; }
/* Real brand logo (white flag lockup on transparent) in place of a text wordmark. Height-capped so
   it sits in the bar; the "powered by" subline is legible at this size on the flag artwork. */
.hdr__logo { height: 5.5rem; width: auto; }
/* Bigger logo on tablets. Threshold is 46rem (736px), NOT 48rem, so sub-768 tablets — an iPad mini
   is 744px portrait — are treated as tablets, not phones. The header bar uses padding-block below
   62rem (not a fixed height), so it grows to fit whatever the logo measures. */
@media (min-width: 46rem) and (max-width: 61.99rem) {
  .hdr__logo { height: 8rem; }
}
@media (max-width: 45.99rem) {
  .hdr__logo { height: 5rem; }
}
/* Larger nav text on tablet (the hamburger menu is open-tap, so bigger targets read better). */
@media (min-width: 46rem) and (max-width: 61.99rem) {
  .nav__top { font-size: 1.05rem; letter-spacing: 0.12em; }
  .nav__sub a { font-size: 1.05rem; }
  .nav__call { font-size: 1.05rem; }
}

.nav__list { display: flex; flex-wrap: wrap; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__d { position: relative; }
.nav__top {
  cursor: pointer; list-style: none;
  padding: 0.55rem 0.85rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 0.25s var(--ease);
}
.nav__top::-webkit-details-marker { display: none; }
.nav__top::after { content: "＋"; margin-left: 0.4rem; font-size: 0.7em; opacity: 0.65; }
.nav__d[open] .nav__top::after { content: "－"; }
.nav__d[open] .nav__top, .nav__top:hover { background: var(--olive-deep); }
.nav__sub {
  list-style: none; margin: 0; padding: 0.5rem;
  background: var(--cream); color: var(--ink);
  border-radius: 1rem; min-width: 15.5rem;
  box-shadow: 0 22px 50px rgba(29, 40, 23, 0.32);
}
.nav__sub a { display: block; padding: 0.58rem 0.8rem; border-radius: 0.6rem; text-decoration: none; font-size: 0.95rem; }
.nav__sub a:hover { background: var(--cream-warm); }
@media (min-width: 62rem) { .nav__sub { position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 40; } }

.hdr__cta {
  font-weight: 700; text-decoration: none; letter-spacing: 0.06em;
  border: 2px solid var(--cream); border-radius: 999px; padding: 0.5rem 1.15rem;
  font-size: 0.88rem; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hdr__cta:hover { background: var(--cream); color: var(--olive-ink); }

/* ---------- mobile menu (checkbox toggle, no JS) ----------
   The input is visually hidden rather than display:none so it stays focusable and the label
   remains operable by keyboard. */
.hdr__toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hdr__burger {
  display: flex; align-items: center; gap: 0.6rem;
  cursor: pointer; padding: 0.5rem 0.9rem;
  border: 2px solid var(--cream); border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.hdr__burger-box { display: block; width: 1.05rem; height: 0.7rem; position: relative; }
.hdr__burger-bar, .hdr__burger-bar::before, .hdr__burger-bar::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.hdr__burger-bar { top: 50%; margin-top: -1px; }
.hdr__burger-bar::before { top: -0.35rem; }
.hdr__burger-bar::after  { top:  0.35rem; }
/* Bars morph into an X when open — the control shows its own state. */
.hdr__toggle:checked ~ .hdr__burger .hdr__burger-bar { background: transparent; }
.hdr__toggle:checked ~ .hdr__burger .hdr__burger-bar::before { transform: translateY(0.35rem) rotate(45deg); }
.hdr__toggle:checked ~ .hdr__burger .hdr__burger-bar::after  { transform: translateY(-0.35rem) rotate(-45deg); }
.hdr__toggle:focus-visible ~ .hdr__burger { outline: 3px solid var(--flame); outline-offset: 3px; }

.nav__item--call { display: none; }

@media (max-width: 61.99rem) {
  /* PADDING, not a fixed min-height. The logo varies (4.3rem phone, 3.4rem tablet); padding-block
     wraps whatever it is with even breathing room, so the logo can never jam against the top edge
     the way a too-small min-height let it. */
  .hdr__in { min-height: 0; padding-block: 0.9rem; }
  .hdr__cta { display: none; }              /* the number moves inside the open menu */
  .nav {
    display: none;
    flex-basis: 100%;
    padding-bottom: 1rem;
  }
  .hdr__toggle:checked ~ .nav { display: block; }
  .nav__list { flex-direction: column; gap: 0.2rem; }
  .nav__item--call { display: block; margin-top: 0.6rem; }
  .nav__call {
    display: inline-block; text-decoration: none; font-weight: 700;
    border: 2px solid var(--cream); border-radius: 999px; padding: 0.55rem 1.2rem;
  }
  .nav__top { font-size: 0.85rem; padding: 0.75rem 0.9rem; }
  .nav__sub { margin: 0.2rem 0 0.5rem; }
}

@media (min-width: 62rem) {
  .hdr__burger { display: none; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--olive);
  color: var(--cream);
  display: grid;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: 1.02fr 1fr; align-items: stretch;
         min-height: min(86vh, 42rem); max-height: 46rem; }
}

/* aspect-ratio, not the image's own proportions. The hero photo is 900x1050 PORTRAIT; letting it
   size the grid row stretched the hero to 924px while the copy needed only ~500px, leaving a band
   of empty green above and below the text. Now the frame is fixed and the photo crops into it, so
   swapping in any image cannot re-break the layout. */
.hero__media { order: 2; position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: var(--img-radius); border: var(--img-border); }
/* Keep a LANDSCAPE frame on desktop too. Leaving it `auto` let the portrait source push the
   row back toward 900px+, stranding the copy in the middle of a tall green column. */
@media (min-width: 64rem) { .hero__media { aspect-ratio: 5 / 4; } }

/* Tablet: side-by-side with the IMAGE ON THE LEFT (was stacked, text over image). The media column
   stretches to the copy's height (aspect-ratio: auto + align-items: stretch) so there is no empty
   green band. 46rem threshold matches the logo/nav rules above so all three switch together. The
   left-aligning overrides here cancel the ≤47.99rem phone centring for the 46–47.99rem overlap. */
@media (min-width: 46rem) and (max-width: 61.99rem) {
  .hero { grid-template-columns: 0.92fr 1fr; align-items: stretch; }
  .hero__media { order: 1; aspect-ratio: auto; min-height: 22rem; }
  .hero__panel { order: 2; text-align: left; padding-top: clamp(2rem, 1rem + 2vw, 3.25rem); }
  .hero__panel .eyebrow { justify-content: flex-start; }
  .hero__p { margin-inline: 0; }
  .hero__h em { display: inline; }
}
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  animation: heroPan 1.6s var(--ease) both;
}
@keyframes heroPan { from { transform: scale(1.09); } to { transform: scale(1); } }

.hero__panel {
  order: 1; align-self: center; position: relative; z-index: 2;
  padding: clamp(2rem, 1rem + 2vw, 3.25rem) clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
}

/* Staggered arrival. Delays are small and the whole sequence is under a second — this should
   feel like the page settling, not like waiting for it. */
.hero__panel > * { animation: riseIn 0.85s var(--ease) both; }
.hero__panel > :nth-child(1) { animation-delay: 0.05s; }
.hero__panel > :nth-child(2) { animation-delay: 0.15s; }
.hero__panel > :nth-child(3) { animation-delay: 0.28s; }
.hero__panel > :nth-child(4) { animation-delay: 0.4s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

.hero__h { margin-bottom: 0.34em; }
.hero__h em {
  font-style: normal; display: block;
  color: var(--sage);
}
.hero__p { font-size: 1.1rem; max-width: 40ch; opacity: 0.92; }
.hero__cta { margin-top: 1.4rem; }
.hero .eyebrow { color: var(--sage); }

/* ---------- marquee (the sports, always moving) ---------- */

.marquee {
  background: var(--olive-ink);
  color: var(--cream);
  padding: 0.9rem 0;
  overflow: hidden;
  display: flex;
  border-block: 3px solid var(--sage);
}
.marquee__track {
  display: flex; flex: none; gap: 2.5rem; padding-right: 2.5rem;
  animation: slide 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1rem, 0.8rem + 0.7vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; display: flex; align-items: center; gap: 2.5rem;
}
.marquee__item::after { content: "●"; color: var(--flame); font-size: 0.55em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- checkerboard rule ---------- */

.checks {
  height: 1.2rem;
  background:
    repeating-linear-gradient(90deg, var(--sage) 0 2.4rem, transparent 2.4rem 4.8rem),
    repeating-linear-gradient(90deg, transparent 0 2.4rem, var(--sand) 2.4rem 4.8rem);
}

/* ---------- proof strip ---------- */

.proof { background: var(--cream-warm); padding: clamp(2rem, 1rem + 2vw, 3rem) 0; }
.proof__in {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  /* Each number sits centred over its label at EVERY width. This used to be capped below 992px,
     so a landscape tablet (1024px) fell into the desktop layout and the numbers went left-aligned
     — the reason "centre the numbers" kept coming back. */
  text-align: center;
}
.proof__n {
  font-family: var(--display); font-weight: 800; line-height: 0.85;
  font-size: clamp(2.6rem, 1.5rem + 3vw, 4rem);
  color: var(--olive); display: block;
}
.proof__l {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; color: var(--olive-soft); margin-top: 0.5rem; display: block;
}
/* Centre the four stats below desktop. The default auto-fit gave 3 columns on a tablet, which
   stranded the 4th stat alone on a second row at the left. Force a balanced grid instead: all four
   in one row on tablet, a centred 2x2 on phones. */
@media (max-width: 61.99rem) {
  .proof__in { text-align: center; justify-items: center; }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .proof__in { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 47.99rem) {
  .proof__in { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- bands ---------- */

.band { padding: clamp(3.5rem, 1.5rem + 6vw, 7rem) 0; }
.band--cream { background: var(--cream); }
.band--dark { background: var(--olive); color: var(--cream); }
.band--dark .band__h { color: var(--cream); }
.band--dark .band__lede { color: rgba(251, 249, 242, 0.9); }
.band--dark .bay__tab { color: rgba(251, 249, 242, 0.6); }
.band--dark .bay__tab:hover { color: var(--cream); background: var(--olive-deep); }
.band--dark .bay__num { color: var(--sage); }
.band--dark .bay__blurb { color: rgba(251, 249, 242, 0.75); }
.band__h { max-width: 16ch; }
.band__lede { max-width: 54ch; font-size: 1.1rem; }


/* ---------- the bay switcher (replaces seven static cards) ----------
   Radios drive it, so it works with JS off and gets keyboard support free. The panel is styled as
   a simulator SCREEN — dark bezel, inset shadow — because that is literally what the guest looks
   at. The arch was dropped: it is a Squarespace-template shape, and a rounded dome fights the
   16:9 game stills it was cropping. */

.bay { margin-top: 2.75rem; display: grid; gap: clamp(1.5rem, 0.5rem + 3vw, 3rem); }
@media (min-width: 60rem) { .bay { grid-template-columns: 15rem 1fr; align-items: start; } }

.bay__radio { position: absolute; opacity: 0; pointer-events: none; }

.bay__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (min-width: 60rem) { .bay__list { flex-direction: column; gap: 0; } }

.bay__tab {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border-radius: 0.65rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  text-transform: uppercase; letter-spacing: -0.01em;
  color: #7d8a72;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.bay__tab:hover { color: var(--olive); background: var(--cream-warm); }
.bay__num {
  font-size: 0.68rem; letter-spacing: 0.1em; font-family: var(--body); font-weight: 700;
  color: var(--sage);
}

/* Sibling selectors bind each radio to its tab and panel. Verbose, but it is the price of a
   switcher that needs no JavaScript. */
.bay__radio:nth-of-type(1):checked ~ .bay__list .bay__tab:nth-of-type(1),
.bay__radio:nth-of-type(2):checked ~ .bay__list .bay__tab:nth-of-type(2),
.bay__radio:nth-of-type(3):checked ~ .bay__list .bay__tab:nth-of-type(3),
.bay__radio:nth-of-type(4):checked ~ .bay__list .bay__tab:nth-of-type(4),
.bay__radio:nth-of-type(5):checked ~ .bay__list .bay__tab:nth-of-type(5),
.bay__radio:nth-of-type(6):checked ~ .bay__list .bay__tab:nth-of-type(6),
.bay__radio:nth-of-type(7):checked ~ .bay__list .bay__tab:nth-of-type(7) {
  color: var(--olive-ink); background: var(--sand);
}
.bay__radio:focus-visible ~ .bay__list .bay__tab { outline: none; }
.bay__radio:nth-of-type(1):focus-visible ~ .bay__list .bay__tab:nth-of-type(1),
.bay__radio:nth-of-type(2):focus-visible ~ .bay__list .bay__tab:nth-of-type(2),
.bay__radio:nth-of-type(3):focus-visible ~ .bay__list .bay__tab:nth-of-type(3),
.bay__radio:nth-of-type(4):focus-visible ~ .bay__list .bay__tab:nth-of-type(4),
.bay__radio:nth-of-type(5):focus-visible ~ .bay__list .bay__tab:nth-of-type(5),
.bay__radio:nth-of-type(6):focus-visible ~ .bay__list .bay__tab:nth-of-type(6),
.bay__radio:nth-of-type(7):focus-visible ~ .bay__list .bay__tab:nth-of-type(7) {
  outline: 3px solid var(--flame); outline-offset: 2px;
}

.bay__panels { position: relative; }
/* NOT display:none. A display:none panel never loads its lazy image, so the first click on a sport
   showed a black rectangle while the file fetched. visibility:hidden keeps the image in the render
   tree — it loads with the section, and switching is instant and cross-fades. */
.bay__panel {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease);
}
.bay__radio:nth-of-type(1):checked ~ .bay__panels .bay__panel:nth-of-type(1),
.bay__radio:nth-of-type(2):checked ~ .bay__panels .bay__panel:nth-of-type(2),
.bay__radio:nth-of-type(3):checked ~ .bay__panels .bay__panel:nth-of-type(3),
.bay__radio:nth-of-type(4):checked ~ .bay__panels .bay__panel:nth-of-type(4),
.bay__radio:nth-of-type(5):checked ~ .bay__panels .bay__panel:nth-of-type(5),
.bay__radio:nth-of-type(6):checked ~ .bay__panels .bay__panel:nth-of-type(6),
.bay__radio:nth-of-type(7):checked ~ .bay__panels .bay__panel:nth-of-type(7) {
  position: relative; opacity: 1; visibility: visible;
}

.bay__screen {
  background: #12180e;
  padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.85rem);
  border-radius: var(--img-radius); border: var(--img-border);
  box-shadow: 0 26px 60px rgba(29, 40, 23, 0.3);
}
.bay__screen img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  /* Derived, not a second magic number: the inner still sits inside the bezel padding. */
  border-radius: calc(var(--img-radius) - 0.5rem);
}
/* Desktop: the panels column is wide, so a 16/10 image renders very tall — tall enough that the
   caption below it (.bay__meta) and the bottom of the image both fall out of view after a click.
   Shorten it (16/9) and cap its height so the image AND its words always sit together on screen. */
@media (min-width: 60rem) {
  .bay__screen img { aspect-ratio: 16 / 9; max-height: 56vh; }
}
.bay__meta { margin-top: 1.4rem; display: grid; gap: 0.15rem; }
.bay__h { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.bay__blurb { margin: 0 0 0.7rem; max-width: 46ch; color: #4f5c46; }
.bay__link {
  justify-self: start;
  font-family: var(--body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--flame); padding-bottom: 0.2rem;
}
.bay__link:hover { color: var(--olive); }


/* ---------- BAR section (dark) ----------
   Same marquee rail as the food section, but on olive so the bar reads as its own place — the
   alternation the food/drink split was asking for. Heading + Bar Menu share a row up top. */
.bar { background: var(--olive); color: var(--cream); }
.bar .rail__h { color: var(--cream); }
.bar .rail__item { background: var(--olive-deep); }
.rail__head {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 2rem;
}
.rail__head .rail__h { margin-bottom: 0.4rem; }
/* margin-left:auto pins the menu button to the RIGHT — beside the heading when it fits, and still
   right-aligned (not dropped to the left) when it wraps to its own line on narrower screens. */
.rail__head .btn { margin: 0 0 0 auto; flex: none; }
.rail__lede { margin: 0; max-width: 46ch; color: #4f5c46; }
.bar .rail__lede { color: rgba(251, 249, 242, 0.82); }

/* ---------- reviews carousel ---------- */

.says { background: var(--cream-warm); padding: clamp(3.5rem, 1.5rem + 6vw, 6.5rem) 0; }
.says__head {
  display: grid; gap: 1.25rem; align-items: end;
  margin-bottom: 2.25rem;
}
@media (min-width: 56rem) { .says__head { grid-template-columns: 1fr auto; } }
.says__agg { margin: 0; display: grid; gap: 0.2rem; }
.says__stars { color: #d9a441; letter-spacing: 0.12em; font-size: 1.05rem; }
.says__count strong { font-family: var(--display); font-size: 1.15rem; }
.says__all {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 0.3rem;
}

/* Reviews: same CSS transform marquee as the food/drink rails. */
.says__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.says__viewport::-webkit-scrollbar { display: none; }
.says__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; width: max-content;
  gap: 1.25rem;
}
.says__card {
  flex: 0 0 min(88%, 23rem);
  background: var(--cream);
  border-radius: 1rem;
  padding: 1.6rem 1.5rem 1.4rem;
  display: grid; align-content: start; gap: 0.7rem;
  box-shadow: 0 10px 30px rgba(29, 40, 23, 0.07);
}
.says__stars--card { margin: 0; font-size: 0.95rem; }
.says__quote {
  margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink);
}
.says__quote::before { content: "\201C"; }
.says__quote::after  { content: "\201D"; }
.says__who {
  margin: 0; font-weight: 700; font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
}
.says__when { font-weight: 400; font-size: 0.8rem; color: #6f7b66; }

/* ---------- split ---------- */

.split {
  display: grid; gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
  align-items: center;
  padding: clamp(3.5rem, 1.5rem + 6vw, 7rem) 0;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}
/* min-width:0 — a grid item defaults to min-width:auto, so it refuses to shrink below its content's
   own minimum. With the pricing block inside a split, the .price-grid rate cards (minmax(13rem,1fr),
   two of them) held the column at 434px on a 390px phone and scrolled the whole page sideways. */
.split__media, .split__body { min-width: 0; }
.split__media { aspect-ratio: 4 / 3; border-radius: var(--img-radius); border: var(--img-border); overflow: hidden; }

/* The sport-page hero nests the switcher bezel inside a split media slot. The bezel is already a
   frame, so the slot must not add a second one — and its 4:3 box against the bezel's 16:10 left a
   bordered empty strip hanging below the image. The strip was always there; a transparent border
   is just what kept it invisible. The bezel is the frame; the slot gets out of the way. */
.split__media:has(> .bay__screen) { aspect-ratio: auto; border: 0; border-radius: 0; overflow: visible; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* A POSTER, not a photograph. The Turned Up artwork is a 1080x1350 (4:5) social graphic whose
   wordmark is centred and fills the frame, so the slot's 4:3 box + object-fit:cover sliced
   "PORTSIDE STAGE" clean off the bottom on mobile — the desktop view hid the bug because
   .split--fill relaxes the ratio, and that override starts at 60rem. A photo can lose its edges;
   a lockup cannot. This slot keeps the image's own ratio at every width and never crops. */
.split__media--poster { aspect-ratio: auto; }
.split__media--poster img { height: auto; object-fit: contain; }
.split__body { max-width: 44ch; }
.split__cta { margin-top: 1.5rem; }

/* Inside an existing .band. A page-header band owns its background (.band--cream/.band--dark) and
   its vertical rhythm, so the split cannot replace the section — it goes in the band's .wrap and
   drops its own width/padding, letting .wrap do the centring. This is what gives the eight header
   bands a media column without restructuring a single section or losing a background. */
.split--inband { padding: 0; width: 100%; max-width: none; margin-inline: 0; }

/* Media stretches to the copy's height instead of holding 4:3. For a block like the Swing Suite
   pricing page — heading, rate cards, hours, fine print, buttons, ~1000px of it — a 4:3 image
   fills a third of the column and the rest of the gutter stays as empty as before. */
@media (min-width: 60rem) {
  .split--fill { align-items: stretch; }
  .split--fill .split__media {
    aspect-ratio: auto; height: 100%;
    /* Capped, and top-aligned rather than filling to the last pixel. Uncapped against the ~1150px
       pricing column, object-fit:cover crushed a 4:3 frame into a narrow vertical strip — the
       party shot lost its screens and banner and showed mostly tablecloth. */
    min-height: 22rem; max-height: 34rem; align-self: start;
  }
}

/* A split that ends on a long column of prose, followed by a band of the SAME background. Even
   with --fill the media caps at 34rem, so on the sport pages the copy outruns it and the section
   finishes on text. The split's bottom padding then stacks with the next band's top padding into
   ~220px — and with no colour change at the join, that lands as one void exactly where the reader
   has just finished reading, rather than as two sections meeting. Same problem, and the same fix,
   as .band--rail-end. */
.split--tight-end { padding-bottom: clamp(1.5rem, 0.5rem + 2vw, 3rem); }
.split--tight-end + .band { padding-top: clamp(2rem, 1rem + 2vw, 3.25rem); }

/* Text-heavy variant (the sport pages' "X in the bay." section runs ~800 characters, against the
   ~180 an About-page split carries). The copy gets the wider track and a longer measure so it does
   not tower over a 4:3 image, and both columns align to the top rather than centring — with copy
   this long, a centred image floats in the middle of the text block and reads as unanchored. */
@media (min-width: 60rem) {
  .split--text { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.split--text .split__body { max-width: 54ch; }

/* ---------- pricing cards (Swing Suite hourly rates + bay/lounge rentals) ----------
   Deliberately flat/square — no radius, a plain rule border — so a rate reads as a rate card,
   not another gallery tile. Centred text, like the .proof stat blocks. */

.price-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width: 40rem;
}
.price-card {
  text-align: center;
  background: var(--cream-warm);
  border: 2px solid rgba(74, 98, 52, 0.22);
  padding: 1.9rem 1.6rem;
}
.price-card__name {
  margin: 0 0 0.6rem;
  font-family: var(--body); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--olive-soft);
}
.price-card__amount {
  margin: 0; line-height: 1;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 2.9rem);
  color: var(--olive);
}
.price-card__unit {
  display: block; margin-top: 0.4rem;
  font-family: var(--body); font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--olive-soft);
}
.price-card__desc { margin: 0.7rem 0 0; font-size: 0.92rem; color: #4f5c46; }

/* Dark variant, used on the .band--dark rentals section. */
.price-card--dark {
  background: var(--olive-deep);
  border-color: rgba(251, 249, 242, 0.22);
}
.price-card--dark .price-card__name,
.price-card--dark .price-card__unit { color: var(--sage); }
.price-card--dark .price-card__amount { color: var(--cream); }
.price-card--dark .price-card__desc { color: rgba(251, 249, 242, 0.78); }

.price-note { margin-top: 2rem; max-width: 56ch; font-size: 1.05rem; color: #4f5c46; }
/* That colour is a fixed dark olive-grey, picked for a cream band — on .band--dark it is nearly
   the background. Game day moved onto a dark band in August, which is when this surfaced. */
.band--dark .price-note { color: rgba(251, 249, 242, 0.78); }
.price-hours {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 2px solid rgba(74, 98, 52, 0.22);
  max-width: 26rem;
}
.price-hours__h { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); }
.price-fine { margin-top: 1.6rem; font-size: 0.85rem; color: #6f7b66; max-width: 56ch; }

/* A caption sitting under a split's image — qualifies what the picture shows, so it is set
   quieter and in italic to read as a note rather than as more body copy. Lives outside
   .split__media because that box clips to the frame. */
.media-note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: #6f7b66;
}
.band--dark .media-note { color: rgba(251, 249, 242, 0.72); }

/* ---------- package cards (PAR-TEE) ----------
   Same rounded/shadowed language as .says__card and .rail__item, so a party package reads as
   part of this site rather than a bolted-on pricing table. */

.pkg-grid {
  margin-top: 2.75rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.pkg-card {
  background: var(--cream);
  border-radius: 1rem;
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: 0 10px 30px rgba(29, 40, 23, 0.08);
  display: grid; align-content: start; gap: 0.2rem;
}
.pkg-card__sub {
  margin: 0; font-family: var(--body); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--olive-soft);
}
.pkg-card__name { margin: 0.2rem 0 0.5rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.pkg-card__price {
  margin: 0 0 1.1rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  color: var(--olive);
}
.pkg-card__list { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.45rem; color: #3c4735; }
.pkg-card__list li { font-size: 0.96rem; }

/* ---------- league ---------- */

.league { background: var(--olive-deep); color: var(--cream); padding: clamp(3.5rem, 1.5rem + 6vw, 7rem) 0; }
/* Image + text, image on the LEFT so it alternates with the events split above (image right). */
.league__grid { display: grid; gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .league__grid { grid-template-columns: 1fr 1fr; } }
.league__in { max-width: 50ch; }
.league p { opacity: 0.92; }

.league__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.league__cta .btn { margin: 0; }

/* ---------- closing call ---------- */

.call {
  background: var(--olive); color: var(--cream);
  padding: clamp(3.5rem, 1.5rem + 6vw, 6.5rem) 0;
  text-align: center;
}
.call__h { max-width: 18ch; margin-inline: auto; }
.call__p { max-width: 46ch; margin-inline: auto; opacity: 0.9; }
.call__phone {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem);
  text-decoration: none; display: inline-block; margin-top: 0.6rem;
  border-bottom: 3px solid var(--flame);
  transition: color 0.3s var(--ease);
}
.call__phone:hover { color: var(--sage); }

/* ---------- visit ---------- */

.visit { padding: clamp(3.5rem, 1.5rem + 6vw, 6rem) 0; background: var(--cream); }
.visit__in { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .visit__in { grid-template-columns: 1.3fr 1fr; } }
.visit__addr { font-style: normal; font-size: 1.2rem; line-height: 1.5; margin-bottom: 0.8rem; }
.visit__contact a { font-weight: 700; }
.visit__h { margin-bottom: 0.7rem; }
.visit__hours, .ftr__hours { margin: 0; }
.visit__hours dt, .ftr__hours dt {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.73rem;
  margin-top: 0.95rem; color: var(--olive-soft);
}
.visit__hours dd, .ftr__hours dd { margin: 0.15rem 0 0; font-size: 1.05rem; }

/* ---------- contact page ---------- */

.contact__grid {
  margin-top: 2.75rem;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 54rem) {
  .contact__grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
}
.contact__info-h { margin-bottom: 0.9rem; }
.contact__directions { margin-top: 1.6rem; }
.contact__directions .btn { margin: 0; }

/* ---------- form ---------- */

.form { display: grid; gap: 1.5rem; max-width: 34rem; }
.form__grid2 { display: grid; gap: 1.5rem; }
@media (min-width: 32rem) { .form__grid2 { grid-template-columns: 1fr 1fr; } }
.form__row { display: grid; gap: 0.4rem; }
.form__label {
  font-family: var(--body); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--olive-soft);
}
.form__opt { text-transform: none; letter-spacing: normal; font-weight: 400; opacity: 0.75; }
.form__input, .form__textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--cream-warm);
  border: 2px solid rgba(74, 98, 52, 0.25);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.form__textarea { resize: vertical; min-height: 8rem; }
.form__input:hover, .form__textarea:hover { border-color: rgba(74, 98, 52, 0.45); }
.form__input:focus-visible, .form__textarea:focus-visible {
  outline: 3px solid var(--flame); outline-offset: 1px;
  border-color: var(--olive); background: var(--cream);
}
.form__err { margin: 0; font-size: 0.85rem; font-weight: 700; color: #a1381c; }
.form__notice {
  margin: 0 0 1.5rem; padding: 0.9rem 1.1rem;
  background: rgba(226, 112, 58, 0.12); border: 2px solid var(--flame);
  border-radius: 0.6rem; font-weight: 700; color: var(--olive-ink);
}

/* Honeypot: off-screen (not display:none, so a simple computed-style bot check finds nothing
   obviously suspicious), out of tab order (tabindex="-1" in markup) and hidden from assistive
   tech (aria-hidden on the wrapper) — a real visitor can never see or reach it. */
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__success {
  background: var(--cream-warm); border-radius: 0.9rem; max-width: 34rem;
  padding: 2rem clamp(1.25rem, 1rem + 1vw, 2rem);
  display: grid; gap: 0.5rem;
}
.form__success-h {
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--olive); margin: 0;
}

/* ---------- footer ---------- */

.ftr { background: var(--olive-ink); color: var(--cream); padding: clamp(2.5rem, 1rem + 5vw, 4.5rem) 0 0; }
.ftr__in {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* Portrait tablet (768–992px): four equal columns squeezed Visit so its email wrapped. Two columns
   give it real width. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .ftr__in { grid-template-columns: 1fr 1.5fr; column-gap: 3rem; }
}
/* Landscape tablet AND desktop (≥992px): keep four across, but make the Visit column (2nd) the
   widest so the email fits on one line. Equal auto-fit columns were ~216px and the email needs
   ~215px — it wrapped on a 1024px iPad. Explicit ratios end that. */
@media (min-width: 62rem) {
  .ftr__in { grid-template-columns: 0.9fr 1.4fr 0.85fr 1fr; }
}
.ftr__logo { width: 14rem; max-width: 70%; height: auto; }
.ftr__h { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sage); font-family: var(--body); font-weight: 700; }
.ftr__addr { font-style: normal; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr__links { list-style: none; margin: 0; padding: 0; }
.ftr__links li { margin-bottom: 0.45rem; }
/* Award line — badge beside a sentence, used in body copy (/events live music, home). Distinct
   from .ftr__award only in scale and colour context; kept separate because the footer sits on
   dark and this sits on cream, and merging them would mean one rule fighting two grounds. */
.award-note {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.8rem 0 0; padding: 1rem 1.2rem;
  background: var(--cream-warm); border: 2px solid rgba(74, 98, 52, 0.22);
  font-size: 0.9rem; line-height: 1.45;
}
.award-note__badge { width: 3.5rem; height: auto; flex: none; }
.award-note strong { display: block; }

/* Best of Baldwin winner badge, footer brand column. The artwork is a portrait tombstone on
   transparent, so it needs a width and nothing else — no card, no border. Deliberately small:
   a third-party badge blown up starts competing with our own logo directly above it. */
.ftr__award { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.8rem; }
.ftr__award-badge { width: 4.6rem; height: auto; flex: none; }
.ftr__award-txt {
  margin: 0; font-size: 0.8rem; line-height: 1.35; font-weight: 700;
}
.ftr__award-txt span { display: block; font-weight: 400; opacity: 0.72; font-size: 0.74rem; }

.ftr__base {
  margin-top: 3rem; padding: 1.3rem 0;
  border-top: 1px solid rgba(251, 249, 242, 0.16);
  text-align: center; font-size: 0.85rem; opacity: 0.72;
}
.ftr__base p { margin: 0; }

/* ---------- 404 ---------- */

.oops { padding: clamp(4rem, 2rem + 8vw, 8rem) 0; text-align: center; }

/* ---------- reduced motion: stop everything ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track { animation: none; }
  .hero__media img { animation: none; }
  /* The galleries are native scrollers now, not CSS animations — nothing here to exempt. motion.js
     checks reduce-motion itself and simply leaves them as static, hand-swipeable strips. */
}

/* marquee separator dot between sport names */
.marquee__sep { display: inline-flex; align-items: center; }
.marquee__sep::after { content: "●"; color: var(--flame); font-size: 0.5em; margin: 0 1.4rem; vertical-align: middle; }
.marquee__item::after { content: none; }

/* the closing call is centred, so its eyebrow rule must not hang off to the left */
.call__eyebrow { justify-content: center; }

/* ---------- food / drink gallery rails (native scroller) ----------
   A NATIVE horizontal scroll container (overflow-x: auto). This is the single most reliable way to
   show a row of images on iOS Safari: the browser paints and repaints content as it scrolls, so it
   can never go blank the way a CSS-transform layer can (iOS fails to repaint a large transformed
   layer as it slides in — that was the "scroll through once then disappear" bug). motion.js gently
   auto-advances scrollLeft and BOUNCES at each end, so the position stays inside the content and
   never lands on empty space. It is also fully usable by hand: swipe/drag on touch, tab + arrows on
   desktop. No transforms, no duplicate copies. */

.rail { padding: clamp(2.5rem, 1rem + 4vw, 4.5rem) 0; }

/* A rail nested INSIDE a .band, which already owns that section's vertical rhythm. It still wants
   the gap above, to separate the strip from the copy — but not the one below: .band's own bottom
   padding is already there, and the two together left ~180px of dead space under the game-night
   strip. Same reasoning as .split--inband. */
.rail--inband { padding-bottom: 0; }

/* A band that ENDS in a full-bleed rail. Zeroing the rail's own bottom padding still left the
   band's ~110px underneath, and a strip that runs edge to edge already reads as the section's
   bottom boundary — so that space landed as an empty shelf rather than as breathing room. The
   band keeps its full padding at the TOP, where it is still separating copy from the band above. */
.band--rail-end { padding-bottom: clamp(1rem, 0.5rem + 1vw, 1.75rem); }

/* …and the band AFTER it drops most of its top padding too. Tightening only the rail's own side
   did not close the gap: the next band contributes its own ~110px, and when both bands are light
   there is no colour change to mark the join — so the two paddings read as one continuous void
   rather than as two sections meeting. A full-bleed strip is already a hard edge; whatever
   follows does not need to re-announce itself. */
.band--rail-end + .band { padding-top: clamp(2rem, 1rem + 2vw, 3.25rem); }
.rail__h { max-width: 18ch; margin-bottom: 1.6rem; }

.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum + correct repaint on iOS */
  scrollbar-width: none;               /* Firefox */
  scroll-snap-type: none;              /* JS drives position; snap would fight it */
}
.rail__viewport::-webkit-scrollbar { display: none; }   /* Safari/Chrome */
.rail__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; width: max-content;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
}

.rail__item {
  flex: 0 0 min(78vw, 26rem);
  border-radius: var(--img-radius);
  border: var(--img-border);
  overflow: hidden;
  background: var(--cream-warm);
}
.rail__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- mobile: centre the things that read as stranded when stacked ---------- */

@media (max-width: 47.99rem) {
  /* Display type is sized DOWN here so each heading holds on one or two clean lines at phone
     widths instead of orphaning a last word ("...day.", "Orange Beach.", "...place."). The wide
     desktop scale stays untouched above this breakpoint. */
  .hero__h { font-size: clamp(1.9rem, 8vw, 2.7rem); }
  h2       { font-size: clamp(1.7rem, 7vw, 2.5rem); }

  /* Extra room up top on phones so the hero copy doesn't crowd the header. */
  .hero__panel { text-align: center; padding-top: 2.75rem; }
  .hero .eyebrow { justify-content: center; }
  .hero__p { margin-inline: auto; }
  .hero__h em { display: block; }           /* the two sentences each get their own line */


  /* An eyebrow is a one-line kicker — never let its label wrap under its own dash. */
  .eyebrow { flex-wrap: nowrap; white-space: nowrap; }


  .band__h, .band__lede, .rail__h,
  .price-note, .price-hours, .price-fine { margin-inline: auto; }

  /* One column, stated outright. `repeat(auto-fit, minmax(13rem, 1fr))` picked its column count
     correctly while .price-grid sat straight in a .wrap (definite 350px), but inside a split
     column — whose width is itself being resolved — it settled on two 208px tracks and pushed
     the page 64px wider than the phone. A definite value can't be resolved circularly. */
  .price-grid { grid-template-columns: 1fr; }

  /* The bay switcher: centre the sport chips instead of ragging them to the left edge. */
  .bay__list { justify-content: center; }
  .bay__tab { flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; }

  .split__body { text-align: center; margin-inline: auto; }
  .split__body .eyebrow { justify-content: center; }

  /* …but only for the short splits it was written for (~180 characters). `--text` carries ~800,
     and centred body copy that long rags on BOTH edges for fifteen-plus lines — unreadable on a
     phone. Heading and eyebrow stay centred; the paragraphs rag right like normal prose. */
  .split--text .split__body p:not(.eyebrow):not(.split__cta) { text-align: left; }

  /* League block was never centred with the rest — do it, and centre its button group. */
  .league__in { text-align: center; margin-inline: auto; }
  .league__in .eyebrow { justify-content: center; }
  .league__cta { justify-content: center; }

  .says__head { text-align: center; justify-items: center; }
  .says__head .eyebrow { justify-content: center; }

  .visit__in { text-align: center; }
  .visit__in .eyebrow { justify-content: center; }
  .ftr__in { text-align: center; }
  .ftr__h { justify-content: center; }
}

/* ---------- game cards (the named games within a sport: TopContender/TopPressure/TopChallenge on
   golf, the nine games on the About TOPGOLF Swing Suite page) ----------
   Flat/square like .price-card, not rounded like .pkg-card — a game entry reads as a spec, not a
   photo tile. */

.game-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.game-card {
  background: var(--cream-warm);
  border: 2px solid rgba(74, 98, 52, 0.22);
  padding: 1.7rem 1.6rem;
}
.game-card__name {
  margin: 0 0 0.6rem;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--olive);
}
.game-card__desc { margin: 0 0 0.7rem; font-size: 0.92rem; color: #4f5c46; }
.game-card__desc:last-child { margin-bottom: 0; }

/* ---------- sport cards (cross-links to the other simulator pages) ----------
   Same photo-tile language as .rail__item, but a full link (image + name) rather than a caption —
   these point at another page, not just illustrate one. */

.sim-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.sim-card {
  display: grid;
  text-decoration: none;
  color: inherit;
  background: var(--cream-warm);
  border-radius: var(--img-radius);
  border: var(--img-border);
  overflow: hidden;
  transition: transform 0.35s var(--ease);
}
.sim-card:hover { transform: translateY(-4px); }
.sim-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sim-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.sim-card:hover .sim-card__img img { transform: scale(1.06); }
.sim-card__name {
  padding: 0.85rem 1rem 1rem;
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--olive-ink);
}
/* Dark context (the "others" band on a sport page): swap the card to the same olive-deep tone the
   bay tabs and league section use, so it does not read as a stray light tile. */
.band--dark .sim-card { background: var(--olive-deep); }
.band--dark .sim-card__name { color: var(--cream); }

/* ---------- menu (Restaurant Menu + Bar Menu) ----------
   One shared component. A section is a name/price list with a dotted leader connecting the two —
   the classic printed-menu convention — so a price always reads as attached to its item even when
   descriptions run long. `.menu__cols` flows sections into two columns on desktop (columns:2 reads
   top-to-bottom then wraps, exactly like a physical two-page menu) and back to one on mobile.
   `.menu__items--compact` is for plain name+price lists with no description (spirits, wine, draft
   beer) — the bar menu's spirits list alone runs to 23 items, so it gets its own tight grid rather
   than one long column. Flat/no-price sections (kids' menu, package beer) show one price line and
   list their items as names only. */

.menu__links { margin-top: 1.6rem; }

.menu__cols { column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 60rem) { .menu__cols { columns: 2; } }

.menu__section {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 2.5rem;
}
.menu__section-h {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  padding-bottom: 0.5rem;
  margin-bottom: 0.3rem;
  border-bottom: 2px solid rgba(74, 98, 52, 0.22);
}
.menu__section-note {
  margin: 0 0 1rem;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--olive-soft);
}
.menu__subhead {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--olive-soft);
}
.menu__subhead:first-of-type { margin-top: 0; }

.menu__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.menu__items--compact {
  gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.menu__item-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.menu__item-name {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.01em; text-transform: uppercase;
  /* long spirit names (e.g. "The Dalmore Sherry Cask Single Malt") must shrink + wrap,
     never force horizontal overflow on a phone */
  flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.menu__item-leader { flex: 1 1 auto; min-width: 0.75rem; border-bottom: 2px dotted rgba(74, 98, 52, 0.35); margin-bottom: 0.32em; }
.menu__item-price { flex: none; font-family: var(--display); font-weight: 800; color: var(--olive); white-space: nowrap; }
.menu__item-desc { margin: 0.3rem 0 0; font-size: 0.88rem; color: #4f5c46; }
.menu__item-options { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.84rem; color: #4f5c46; }

.menu__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.menu__chip {
  background: var(--cream-warm); border: 2px solid rgba(74, 98, 52, 0.18); border-radius: 999px;
  padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}

/* Dark variant — the bar menu's own header band (name/price/notes on olive). */
.band--dark .menu__section-h { border-bottom-color: rgba(251, 249, 242, 0.28); }
.band--dark .menu__item-leader { border-bottom-color: rgba(251, 249, 242, 0.4); }
.band--dark .menu__item-price { color: var(--sage); }
.band--dark .menu__section-note, .band--dark .menu__subhead { color: var(--sage); }
.band--dark .menu__chip { background: var(--olive-deep); border-color: rgba(251, 249, 242, 0.22); color: var(--cream); }
.band--dark .menu__item-desc, .band--dark .menu__item-options { color: rgba(251, 249, 242, 0.8); }

.menu__cash-note { margin: 1.4rem 0 0; font-size: 0.85rem; color: rgba(251, 249, 242, 0.75); max-width: 46ch; }

/* Bar menu: named groups (Cocktails / Wine / Beer / Spirits) + jump nav. scroll-margin-top clears
   the sticky header when a nav pill jumps to a group. */
.menu__group { scroll-margin-top: 6.5rem; margin-bottom: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.menu__group:last-child { margin-bottom: 0; }
.menu__group-h {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  color: var(--olive);
  margin-bottom: 1.5rem;
}

.menu__nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.menu__nav a {
  display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 2px solid currentColor; color: inherit;
  font-family: var(--body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.menu__nav a:hover { background: var(--cream); color: var(--olive-ink); }

@media (max-width: 47.99rem) {
  .menu__items--compact { grid-template-columns: 1fr; }
}

/* ---------- prose / longform (rules + legal pages) ----------
   A readable long-form column for text-heavy pages: capped width, a rule between sections instead
   of a big gap, and list styling that matches the rest of the site (olive tones, no bullets-as-
   default-black). Built for the league rules; the legal pages (privacy/terms/copyright) reuse it
   as-is — general on purpose, not league-specific. */

.prose { max-width: 42rem; margin-top: 2.75rem; }
.prose h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 2px solid rgba(74, 98, 52, 0.22);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose p { color: #3c4735; }
.prose ul, .prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.55rem;
  color: #3c4735;
}
.prose li { font-size: 1rem; line-height: 1.55; }
.prose strong { color: var(--olive-ink); }

.prose__cta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.prose__cta .btn { margin: 0; }

/* Small "Last updated" line above the intro paragraph on the legal pages. */
.prose__meta { font-size: 0.85rem; color: var(--olive-soft); margin-bottom: 1.75em; }

@media (max-width: 47.99rem) {
  .prose { margin-inline: auto; }
}