/*
Theme Name: MyWinners
Theme URI: https://mywinners.com
Author: MyWinners
Description: A classic, highly editable theme replicating the MyWinners brand — the home of live pari-mutuel betting in the USA. Custom post types (FAQ, Venue, Testimonial) and the homepage are powered by ACF in the companion "MyWinners Core" plugin.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: mywinners
*/

/* =========================================================== Design tokens */
:root {
  --mw-bg: #ffffff;
  --mw-ink: #07181c;          /* brand near-black — hsl(191,60%,7%), live theme-color */
  --mw-ink-2: #2b3a3f;
  --mw-muted: #5d757a;
  --mw-line: #e6e7e9;         /* brand lightAccent */
  --mw-surface: #f4f7f6;
  --mw-surface-2: #eef3f1;
  --mw-dark: #07181c;         /* dark sections / footer */

  --mw-accent: #0ee56e;       /* brand green — hsl(146.79,88.48%,47.65%) */
  --mw-live: #e8442e;         /* "live" state — wireframe vermillion */
  --mw-accent-hover: #0bcb61;
  --mw-accent-strong: #198f4e;/* readable green for links/eyebrow on white */
  --mw-accent-ink: #07181c;   /* dark text on the bright-green buttons */
  --mw-accent-soft: #e7f9ef;

  --mw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --mw-maxw: 1180px;
  --mw-gap: 24px;
  --mw-radius: 5px;
  --mw-radius-lg: 5px;
  --mw-shadow: 0 10px 30px rgba(7, 24, 28, .08);
  --mw-shadow-sm: 0 4px 14px rgba(7, 24, 28, .06);
  --mw-header-h: 76px;
}

/* ================================================================== Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mw-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--mw-ink);
  background: var(--mw-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mw-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
hr { border: 0; border-top: 1px solid var(--mw-line); margin: 2rem 0; }

/* ===================================================== Accessibility a11y */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto; clip: auto;
  z-index: 100000; background: #fff; color: var(--mw-ink); padding: 10px 16px; border-radius: 5px;
}

/* ============================================================== Utilities */
.mw-container { width: 100%; max-width: var(--mw-maxw); margin: 0 auto; padding: 0 22px; }
/* -------------------------------------------------- Section colour tokens
   Every templated band paints from five custom properties rather than from
   literal values, so the "Section styling" controls on each page tab (see
   inc/section-styles.php) can repaint a band without a rule per combination:

     --mw-section-bg           background
     --mw-section-ink          body copy
     --mw-section-ink-soft     the lead paragraph under a heading
     --mw-section-heading      headings
     --mw-section-accent       eyebrow, marker underline, step numbers
     --mw-section-accent-soft  the tint behind a step number or feature tick

   The variant classes below are now nothing but bundles of those properties.
   A preset sets the bundle from a class; a single-colour override sets one
   property inline and wins on the cascade. Same mechanism, two levels.

   --mw-section-accent IS DELIBERATELY LEFT UNDECLARED, here and on every
   variant. Each component keeps the colour it already had as its var()
   fallback, so an unstyled page renders exactly what it rendered before these
   controls existed and the property only ever appears when an editor chooses
   an accent. Declaring a default here instead would have repainted every marker
   underline on the site the moment this landed: the marker draws in the bright
   green and the eyebrow in the readable one, and a single shared default cannot
   be both. Same reasoning for --mw-section-accent-soft, which is mixed from the
   chosen accent inline rather than approximated from it here. */
.mw-section {
  padding: 72px 0;
  background: var(--mw-section-bg, transparent);
  color: var(--mw-section-ink, inherit);
}
.mw-section--tight { padding: 48px 0; }
.mw-section--white { --mw-section-bg: var(--mw-bg); }
.mw-section--surface { --mw-section-bg: var(--mw-surface); }
/* THE ONE EXCEPTION to leaving --mw-section-ink-soft alone is the dark band's
   lead paragraph. The site-wide default is --mw-muted (#5d757a), which measures
   3.1:1 on the near-black — under the 4.5:1 floor for body text. Two templates
   already hand-patched their own copy of it to #a9bdba inline (the Today at the
   Track band and the About page's closing CTA), so this promotes that patch to
   the preset: 8.6:1, and the same colour those two were already using. Without
   it, "Dark" would be a preset an editor could pick that quietly produces
   unreadable lead text. */
.mw-section--dark {
  --mw-section-bg: var(--mw-dark);
  --mw-section-ink: #dbe6e4;
  --mw-section-ink-soft: #a9bdba;
  --mw-section-heading: #fff;
}
/* Dark text on the brand green, the same pairing the Green block style uses —
   white on #0ee56e measures 1.69:1 and is not readable at any weight. The lead
   takes the full ink rather than a softened one for the same reason. */
.mw-section--green {
  --mw-section-bg: var(--mw-accent);
  --mw-section-ink: var(--mw-accent-ink);
  --mw-section-ink-soft: var(--mw-accent-ink);
  --mw-section-heading: var(--mw-accent-ink);
}
/* :where() holds this at the specificity of .mw-section alone, so a component
   that paints its own background — a white step card sitting on a dark band —
   pins its heading colour with an ordinary rule and wins. */
.mw-section :where(h1, h2, h3, h4) { color: var(--mw-section-heading, inherit); }
.mw-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .8rem; color: var(--mw-section-accent, var(--mw-accent-strong)); margin: 0 0 .2rem; }
.mw-section--dark .mw-eyebrow { color: var(--mw-section-accent, var(--mw-accent)); }
.mw-section--green .mw-eyebrow { color: var(--mw-section-accent, var(--mw-accent-ink)); opacity: .72; }
.mw-lead { font-size: 1.15rem; color: var(--mw-section-ink-soft, var(--mw-muted)); }
.mw-center { text-align: center; }
.mw-center .mw-lead { max-width: 720px; margin-inline: auto; }
.mw-head { margin-bottom: 44px; }

/* ================================================================ Buttons */
.mw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none; line-height: 1;
}
.mw-btn:hover { text-decoration: none; transform: translateY(-2px); }
.mw-btn:active { transform: translateY(0); transition-duration: .06s; }
.mw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mw-ink), 0 0 0 5px var(--mw-accent); }
.mw-btn--primary { background: var(--mw-accent); color: var(--mw-accent-ink); border-color: var(--mw-accent); box-shadow: 0 2px 12px rgba(14, 229, 110, .28); }
.mw-btn--primary:hover { background: var(--mw-accent-hover); border-color: var(--mw-accent-hover); color: var(--mw-accent-ink); box-shadow: 0 8px 26px rgba(14, 229, 110, .5); }
.mw-btn--ghost { background: transparent; color: var(--mw-ink); border-color: var(--mw-line); }
.mw-btn--ghost:hover { border-color: var(--mw-ink); color: var(--mw-ink); }
.mw-btn--light { background: #fff; color: var(--mw-ink); border-color: #fff; }
/* Bright green only on a dark band. On a light one that green is 1.7:1 — the
   button would read as a faint outline with no legible label. */
.mw-btn--outline { background: transparent; color: var(--mw-accent-strong); border-color: var(--mw-accent-strong); }
.mw-section--dark .mw-btn--outline { color: var(--mw-accent); border-color: var(--mw-accent); }
.mw-btn--outline:hover { background: var(--mw-accent); color: var(--mw-accent-ink); }
.mw-btn--on-dark { background: var(--mw-accent); color: var(--mw-accent-ink); border-color: var(--mw-accent); }
.mw-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.mw-btn-row--center { justify-content: center; }

/* App store badges (real store button images) */
.mw-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mw-badges--center { justify-content: center; }
.mw-badge-img { display: inline-block; line-height: 0; }
.mw-badge-img img { height: 52px; width: auto; display: block; }
.mw-badge-img:hover { opacity: .9; }
.mw-footer__app .mw-badges { flex-direction: column; align-items: flex-start; gap: 10px; }
.mw-footer__app .mw-badge-img img { height: 42px; }

/* ================================================================= Header */
.mw-header {
  position: sticky; top: 0; z-index: 50; background: rgba(7, 24, 28, .94);
  backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .25s ease, border-color .25s ease;
}
/* On the homepage the header floats transparently over the hero, then turns
   solid once scrolled (toggled by .is-scrolled in main.js). */
.mw-front .mw-header { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.mw-front .mw-header.is-scrolled { background: rgba(7, 24, 28, .94); border-bottom-color: rgba(255, 255, 255, .08); }

.mw-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: var(--mw-header-h); }
.mw-logo, .mw-header .custom-logo-link { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; line-height: 0; }
.mw-logo { font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; color: #fff; }
.mw-logo img, .mw-header .custom-logo { max-height: 44px; width: auto; }
.mw-logo:hover { text-decoration: none; }
.mw-logo span { color: var(--mw-accent); }
.mw-nav { grid-column: 1; justify-self: start; }
.mw-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; }
.mw-nav a { color: #e9f1ef; font-weight: 600; padding: 10px 14px; border-radius: 5px; font-size: .98rem; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.mw-nav__utility { display: none; } /* rendered in the overlay for mobile only */
.mw-nav a:hover { background: rgba(14, 229, 110, .12); color: #fff; text-decoration: none; }
.mw-nav .current-menu-item > a { color: var(--mw-accent); }
.mw-nav a[target="_blank"]::after { content: " \2197"; font-size: .8em; vertical-align: baseline; }
.mw-header__cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* Mega menu — nested WP menu items render as dropdown panels on desktop */
@media (min-width: 761px) {
  .mw-nav li { position: relative; }
  /* Top-level links: subtle accent colour on hover — no caret, no underline
     (every item opens the same mega panel, so a dropdown marker is redundant). */
  .mw-nav > ul > li > a:hover { background: transparent; color: var(--mw-accent); }
  .mw-nav .sub-menu {
    position: absolute; top: 100%; left: 0; z-index: 60; min-width: 264px;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 12px;
    background: rgba(7, 24, 28, .98); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .mw-nav li:hover > .sub-menu, .mw-nav li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .mw-nav .sub-menu a { display: block; padding: 8px 12px; font-size: .93rem; font-weight: 500; color: #cdd9d6; white-space: nowrap; transition: color .15s ease; }
  .mw-nav .sub-menu a:hover { background: none; color: var(--mw-accent); }
  /* Utility menu (Help): anchor to the header — not the centred <li> — so the
     panel drops flush from the header's bottom edge and aligns to the content
     gutter, mirroring the mega panel. Top corners squared for the same effect. */
  .mw-nav--utility .menu-item-has-children { position: static; }
  .mw-nav--utility .sub-menu {
    top: 100%; left: auto;
    right: max(22px, calc((100vw - var(--mw-maxw)) / 2 + 22px));
    border-radius: 0 0 5px 5px;
  }

  /* Single mega menu: once JS builds the shared panel, suppress the primary
     nav's individual dropdowns (the caret still marks expandable items). */
  #mw-nav.has-mega .sub-menu { display: none; }
  .mw-mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: rgba(7, 24, 28, .98); border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .mw-mega.is-open { opacity: 1; visibility: visible; transform: none; }
  .mw-mega__inner { max-width: var(--mw-maxw); margin: 0 auto; padding: 34px 22px 38px; display: flex; gap: 32px; }
  .mw-mega__col { flex: 1; min-width: 0; }
  .mw-mega__title {
    position: relative;
    display: block; font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: -.01em;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .mw-mega__title::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px;
    background: var(--mw-accent); border-radius: 2px;
  }
  .mw-mega__title:hover { color: var(--mw-accent); text-decoration: none; }
  .mw-mega .sub-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
  /* Links sit flush with the column title — no block padding, no hover fill. */
  .mw-mega .sub-menu a { display: block; padding: 7px 0; color: #cdd9d6; font-weight: 500; font-size: .95rem; transition: color .15s ease; }
  .mw-mega .sub-menu a:hover { background: none; color: var(--mw-accent); text-decoration: none; }
}

/* Mega panel is desktop-only; mobile uses the grouped overlay unchanged. */
@media (max-width: 760px) { .mw-mega { display: none; } }
.mw-nav__cta { display: none; }
.mw-burger {
  grid-column: 1; justify-self: start; display: none; background: none; border: 0; padding: 10px; cursor: pointer;
}
.mw-burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }
body.mw-nav-open { overflow: hidden; }

/* =================================================================== Hero */
.mw-hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7,24,28,.72) 0%, rgba(7,24,28,.82) 100%),
    radial-gradient(1200px 600px at 80% -10%, #11433a 0%, var(--mw-dark) 60%);
  background-size: cover; background-position: center;
}
.mw-hero__inner { max-width: 1000px; margin: 0 auto; text-align: center; padding: 132px 0 130px; position: relative; z-index: 2; }
.mw-front .mw-hero__inner { padding-top: 160px; padding-bottom: 50px; }
/* Pull the first section up so its title lands in the viewport on load. */
.mw-front .mw-track { padding-top: 50px; }
/* Content-page heroes are compact — no oversized gap before the content
   (the section below brings its own top padding). */
.mw-hero--page .mw-hero__inner { padding: 72px 0 52px; }
.mw-hero .mw-eyebrow { color: var(--mw-accent); font-weight: 800; font-size: .85rem; letter-spacing: .16em; }
.mw-hero h1 { color: #fff; text-transform: uppercase; font-weight: 900; font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: .3em; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.mw-hero p { font-size: 1.3rem; font-weight: 400; line-height: 1.5; color: #eaf3f0; max-width: 760px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.mw-hero .mw-hero__tagline { color: var(--mw-accent); font-weight: 700; font-size: 1.3rem; margin-top: 8px; }
.mw-hero .mw-badges { margin-top: 30px; }
.mw-hero .mw-hero__note { color: #5d757a; font-style: italic; font-size: 14px; margin-top: 18px; }
.mw-hero__curve { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.mw-hero__curve svg { width: 100%; height: clamp(40px, 6vw, 92px); display: block; }

/* A header with a background photo. The URL arrives inline as --mw-hero-image
   (see template-parts/page-hero.php) so the scrim stays here — set
   background-image inline instead and it replaces the gradient above along
   with the photo, leaving white text on an unmasked picture. */
.mw-hero--image {
  background-image:
    linear-gradient(180deg, rgba(7,24,28,.72) 0%, rgba(7,24,28,.78) 55%, rgba(7,24,28,.9) 100%),
    var(--mw-hero-image);
  background-size: cover;
  background-position: center;
}

/* ------------------------------------------------- A header with artwork ---
   The app mockup beside the copy, switched on per page by the "Header image"
   field (see mw_page_hero_figure() and template-parts/page-hero.php). Nothing
   here can reach a header without one: every selector is under
   .mw-hero--figure, and the plain centred header keeps its inline max-width,
   its centring and its padding untouched. That is load-bearing — this part is
   shared by search results, the blog index and four archives, none of which
   will ever carry artwork.

   THE BAND MUST NOT GET TALLER. The whole trick is capping the artwork by
   HEIGHT (--mw-hero-figure-h) rather than by width: cap the width instead and a
   squarish PNG sets its own height, so a 460px-wide mockup adds 375px to a band
   that measures ~410px today. 232px is roughly what the copy occupies beside
   it, so the two columns come out level and the band does not grow at all —
   measured at 1200px it comes to 356px against the 410px a centred header of
   the same words measures, and at 900px to 300px against 309px.

   The heading scale comes down with it. clamp(2.6rem, 6.2vw, 5rem) was picked
   for a 760px column with nothing beside it; leave it alone in a column that is
   now about 60% of the container and a two-word title wraps to four lines,
   which puts the height straight back. */
.mw-hero--figure .mw-hero__inner {
  --mw-hero-figure-h: 232px;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  text-align: left;
  /* The centred header gets away with no side gutter because the only thing
     wide enough to reach the edge is the h1, and .mw-hero p caps itself at
     760px. A two-column row has no such luck: .mw-hero__inner is 1000px wide,
     so between 761px and 1000px of viewport the artwork would sit flush
     against the right edge of the window. 22px matches .mw-container. */
  padding-left: 22px;
  padding-right: 22px;
}
.mw-hero--page.mw-hero--figure h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.mw-hero__copy { flex: 1 1 auto; min-width: 0; }
/* .mw-hero p centres itself with `margin-left/right: auto`, which in a
   left-aligned column shunts a short standfirst into the middle of it. */
.mw-hero__copy p { margin-left: 0; margin-right: 0; }
/* flex-shrink stays on: at the narrow end of the range a long heading is
   allowed to squeeze the artwork rather than force the copy into a ribbon. */
.mw-hero__figure {
  flex: 0 1 auto;
  display: block;
  width: auto;
  height: auto;
  max-height: var(--mw-hero-figure-h);
  max-width: var(--mw-hero-figure-w, 46%);
  /* The artwork is a transparent PNG that has to sit on top of the brand wash
     AND on top of a background photo when a page sets both. A drop-shadow is
     what keeps it from dissolving into a busy picture — box-shadow would draw a
     rectangle around the transparent bounding box instead of around the phones. */
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .45));
}

/* Tablet: still side by side, because stacking here would cost more height than
   the smaller artwork does. */
@media (max-width: 980px) {
  .mw-hero--figure .mw-hero__inner { --mw-hero-figure-h: 176px; }
}

/* Phone: the artwork goes, and the header returns to exactly the centred block
   every other header on the site shows at this width.

   DROPPED RATHER THAN STACKED. Stacked, it would add its own height plus a gap
   to the one band a visitor has to scroll past before reaching the page — on a
   375×812 screen that is a quarter of the viewport spent on a picture of a
   phone, shown to someone already holding one. `display: none` rather than
   `visibility: hidden` or a zero height so it takes no space and leaves nothing
   in the accessibility tree; nothing is lost there anyway, since the artwork is
   decorative and carries alt="" unless an editor gives the attachment one.

   BE AWARE the file is still downloaded — a hidden <img> keeps its src and
   browsers fetch it regardless of display — so this saves the layout, not the
   bytes. Saving the bytes as well would mean a <picture> with a media-switched
   source, which is a lot of markup to avoid one request; if mobile weight ever
   becomes the pressing problem, that is the change to make. */
@media (max-width: 760px) {
  /* Gutter off again with the artwork: a phone header on a page that happens
     to carry artwork should be indistinguishable from one that does not, and
     every other header on the site runs edge to edge at this width. */
  .mw-hero--figure .mw-hero__inner { display: block; text-align: center; padding-left: 0; padding-right: 0; }
  .mw-hero--page.mw-hero--figure h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
  .mw-hero__copy p { margin-left: auto; margin-right: auto; }
  .mw-hero__figure { display: none; }
}

/* The curved bottom edge is an overlay up to 92px tall drawn over the band's
   last 92px. Centred copy never reaches down there, so nothing needed doing
   before; the artwork does, and would have its feet cut off. Only the
   combination pays for the clearance — see page-hero.php, which is where the
   modifier is decided. */
.mw-hero--figure-curve .mw-hero__inner { padding-bottom: calc(52px + clamp(40px, 6vw, 92px)); }
@media (max-width: 760px) {
  .mw-hero--figure-curve .mw-hero__inner { padding-bottom: 64px; }
}

/* Homepage copy and artwork share the same content edges as the sections below. */
body.mw-front .mw-hero__inner {
  max-width: var(--mw-maxw);
  padding-left: 22px;
  padding-right: 22px;
}
body.mw-front .mw-hero--figure .mw-hero__inner {
  gap: clamp(24px, 2vw, 32px);
  --mw-hero-figure-h: 560px;
  --mw-hero-figure-w: 46%;
}
/* min-width, not max-width, ON PURPOSE. Setting the clearance unconditionally
   and undoing it below would mean restating the phone hero's 84px bottom
   padding here — a second copy of a number that lives at the foot of this
   stylesheet, silently wrong the day anyone changes it there. Bounding it to
   the widths that actually show artwork leaves the phone hero's padding to the
   cascade, so a figure hero and a plain one measure the same on a phone. */
@media (min-width: 761px) {
  body.mw-front .mw-hero--figure .mw-hero__inner { padding-top: 120px; padding-bottom: calc(32px + clamp(40px, 6vw, 92px)); }
}
/* Keep the display headline proportional to the constrained copy column. */
body.mw-front .mw-hero--figure h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
@media (max-width: 760px) {
  /* Artwork gone, so the column is full width again and the headline goes back
     to the full display scale — without this the phone hero on a page carrying
     artwork sets its title 3px smaller than the one on a page without it. */
  body.mw-front .mw-hero--figure h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
  /* front-page.php stops passing `center` to the app badges in figure mode,
     because centred badges under left-aligned copy float away from the text
     above them. At this width the copy is centred again, so the badges have to
     be — left alone they sit hard against the left edge under centred type.
     Done here rather than by re-centring in PHP because the breakpoint is the
     thing that decides it, and PHP cannot see the viewport. */
  body.mw-front .mw-hero--figure .mw-badges { justify-content: center; }
}

/* =============================================================== Sections */
/* Split sections (image + text, e.g. Welcome / Pari-Mutuel) */
.mw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* "Let the image run wide" (the style settings on Bobby V's, Rewards, Welcome
   and Pari-Mutuel). Desktop only — below 981px the split stacks and the image
   is already full width.

   Two things happen: the image column takes a bigger share of the row, and it
   runs out past the container into the page margin on whichever side it sits.
   Both are capped. The breakout is the smaller of the real margin and 130px,
   so on a laptop it uses what is there and on a 27" monitor it stops well
   short of the screen edge; the image itself stops growing at 660px tall, so
   a tall picture cannot push the section to the height of a whole screen.

   The height cap is what actually sizes the image, so width goes to auto and
   the picture is pinned to the bleeding edge — otherwise a capped image would
   float in the middle of its column with a gap on the outside. */
@media (min-width: 981px) {
  .mw-split--wide {
    --mw-split-bleed: min(calc((100vw - var(--mw-maxw)) / 2), 130px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
  .mw-split--wide:has(> .mw-split__media:first-child) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .mw-split--wide > .mw-split__media:last-child { margin-right: calc(var(--mw-split-bleed) * -1); }
  .mw-split--wide > .mw-split__media:first-child { margin-left: calc(var(--mw-split-bleed) * -1); }
  /* Full-width box with a height cap, rather than width:auto — an image
     sized only by its height has no width until it loads, which collapses the
     column and (for a lazy-loaded image) can stop it loading at all. */
  .mw-split--wide > .mw-split__media > img {
    width: 100%; height: auto; max-height: 660px; object-fit: contain;
  }
  .mw-split--wide > .mw-split__media:last-child > img { object-position: right center; }
  .mw-split--wide > .mw-split__media:first-child > img { object-position: left center; }
}
/* The breakout is clipped at the section edge rather than allowed to widen the
   page, so no horizontal scrollbar can appear at any window size. */
.mw-section:has(> .mw-split--wide) { overflow-x: clip; }
.mw-split__media img { width: 100%; height: auto; display: block; }
.mw-split__body h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: .55em; }
.mw-split__body .mw-richtext p { margin-bottom: 1.1rem; }
.mw-split__body .mw-btn { text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; }
.mw-section--dark .mw-richtext p { color: #c6d6d3; }
.mw-section--dark .mw-richtext strong { color: #fff; }
/* Light-first, with the dark band as the override — the same way .mw-btn--ghost
   works. It used to be white at 50% unconditionally, which was fine only while
   the one section using it stayed dark; on a light band it vanished entirely.
   That matters more than usual here: it carries the age and eligibility line. */
.mw-fineprint { color: var(--mw-muted); font-style: italic; font-size: .9rem; margin-top: 24px; max-width: 470px; }
.mw-section--dark .mw-fineprint { color: rgba(255, 255, 255, .5); }

/* Green hand-drawn marker underline on a keyword */
.mw-mark {
  white-space: nowrap; padding-bottom: .08em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%2010%20C35%203%2085%203%20117%208'%20stroke='%230ee56e'%20stroke-width='5'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .36em;
}

/* Green hand-drawn circle around a keyword */
.mw-circle {
  white-space: nowrap; padding: .08em .55em .2em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M70%2084%20C22%2078%206%2050%2026%2030%20C46%2012%20110%206%20156%2014%20C200%2022%20214%2050%20196%2070%20C180%2086%20130%2092%2084%2086%20C64%2083%2052%2078%2060%2090'%20fill='none'%20stroke='%230ee56e'%20stroke-width='7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% 100%;
}

/* THE MARKS FOLLOW THE SECTION'S ACCENT COLOUR.
   The green is baked into the SVG's stroke attribute, and a data URI cannot
   read a custom property, so the tintable version paints a solid colour and
   uses the same drawing as a mask. It has to go on a pseudo-element: masking
   .mw-mark itself would cut the WORD out along with the stroke, since the
   background and the text share one box.

   Guarded by @supports, and the plain background-image above is left in place
   as the fallback, so a browser without mask support still gets the green
   marker rather than no marker at all. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .mw-mark, .mw-circle { position: relative; background-image: none; }
  .mw-mark::after, .mw-circle::after {
    content: ""; position: absolute; pointer-events: none;
    background: var(--mw-section-accent, var(--mw-accent));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  }
  .mw-mark::after {
    left: 0; right: 0; bottom: 0; height: .36em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%2010%20C35%203%2085%203%20117%208'%20stroke='%23000'%20stroke-width='5'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%2010%20C35%203%2085%203%20117%208'%20stroke='%23000'%20stroke-width='5'%20fill='none'%20stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .mw-circle::after {
    inset: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M70%2084%20C22%2078%206%2050%2026%2030%20C46%2012%20110%206%20156%2014%20C200%2022%20214%2050%20196%2070%20C180%2086%20130%2092%2084%2086%20C64%2083%2052%2078%2060%2090'%20fill='none'%20stroke='%23000'%20stroke-width='7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M70%2084%20C22%2078%206%2050%2026%2030%20C46%2012%20110%206%20156%2014%20C200%2022%20214%2050%20196%2070%20C180%2086%20130%2092%2084%2086%20C64%2083%2052%2078%2060%2090'%20fill='none'%20stroke='%23000'%20stroke-width='7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* Layered image stack (Pari-Mutuel: horse over wall) — aspect-ratio box so
   it has height at every width (incl. mobile); object-fit keeps both visible. */
.mw-stack { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-left: auto; }
.mw-stack__back, .mw-stack__front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mw-stack__front { top: -120px; transform: scale(0.8); }

/* Process steps */
.mw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mw-step { background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: 28px; box-shadow: var(--mw-shadow-sm); }
.mw-step__num {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--mw-section-accent-soft, var(--mw-accent-soft)); color: var(--mw-section-accent, var(--mw-accent-strong)); font-weight: 800; font-size: 1.2rem; margin-bottom: 14px;
}
.mw-step img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 12px; }
.mw-step h3 { margin-bottom: .3em; color: var(--mw-ink); }
.mw-step p { color: var(--mw-muted); margin: 0; }

/* Why choose */
.mw-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* The same card as .mw-step (How It Works): white, bordered, soft shadow,
   badge on top, then title and text. */
.mw-feature { background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: 28px; box-shadow: var(--mw-shadow-sm); }
.mw-feature__ico {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50%; background: var(--mw-section-accent-soft, var(--mw-accent-soft));
  color: var(--mw-section-accent, var(--mw-accent-strong)); font-size: 1.3rem; font-weight: 800;
}
.mw-feature img { display: block; width: 56px; height: 56px; object-fit: contain; margin-bottom: 12px; }
.mw-feature h3 { margin-bottom: .3em; color: var(--mw-ink); }
.mw-feature p { color: var(--mw-muted); margin: 0; }

/* Venues */
.mw-venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* An optional full-width photo band behind the venue cards, switched on by
   picking an image in Home → Venues → Section styling. The cards ride UP over
   its lower edge rather than sitting inside it, so the row reads as one object
   overlapping the photography instead of a picture with cards parked on top.

   The band is a sibling of the two .mw-container blocks (see front-page.php)
   rather than a background on the section, so it spans the viewport while the
   heading and the cards stay in the 1180px column.

   --mw-venues-overlap is the one number worth touching: how far the cards
   climb over the band. Raise it for a deeper overlap, drop it to 0 and the
   cards sit directly beneath the photo. The band's own height is separate, so
   the two can be tuned independently — the overlap should stay comfortably
   less than the height or the band disappears behind the cards. */
.mw-venues-section--image { --mw-venues-overlap: clamp(40px, 5vw, 92px); }

.mw-venues-banner {
  height: clamp(170px, 15vw, 300px);
  background-image: var(--mw-venues-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Shows while a large photo decodes, and if the attachment ever goes missing. */
  background-color: var(--mw-surface-2);
}

/* z-index as well as the negative margin: the cards carry their own shadow and
   a hover transform, and a raised element with a transform would otherwise be
   free to paint under the band. */
.mw-venues-section--image .mw-venues {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--mw-venues-overlap) * -1);
}

/* ----------------------------------------------------------- In the app ---
   A row of App Store screenshots that scrolls sideways.

   WHY A SCROLLER AND NOT A THREE-UP. These exports are around 1:2.2. Three
   across the 1136px column would be 362px wide and 785px TALL — a section a
   thousand pixels deep, with three baked-in headlines shouting at the same
   size as the page's own headings. At ~300px each they stay readable (the
   headline is part of the picture, so it has to stay readable) and the section
   comes out a third shorter.

   The row lines up with the content column on the left and runs off the right
   edge on purpose: the shot cut in half is what says there is more to see. */
.mw-app {
  /* Distance from the viewport edge to the content column, so the first shot
     lines up with the heading above it. Falls back to the plain 22px gutter
     once the viewport is narrower than the column. Used twice — as the track's
     padding and as the rail's scroll padding, so a snapped shot lands on the
     column rather than jammed against the screen edge. */
  --mw-app-inset: max(22px, calc((100% - var(--mw-maxw)) / 2 + 22px));
}

.mw-app__viewport { position: relative; }

/* Fades the right edge so the row trails off instead of being sliced. It sits
   over the rail, so it must not swallow pointer events or it would kill
   dragging in the last 90px. Follows --mw-section-bg, so recolouring the
   section in the editor recolours the fade with it. */
.mw-app__viewport::after {
  content: "";
  position: absolute; inset: 0 0 0 auto; width: 90px;
  background: linear-gradient(90deg, transparent, var(--mw-section-bg, var(--mw-dark)));
  pointer-events: none;
}

.mw-app__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--mw-app-inset);
  /* A slim bar rather than the stock one, which is heavy on a dark band —
     but not hidden, because it is the only static hint that this scrolls. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
  /* The rail takes keyboard focus (see front-page.php) so arrow keys can
     scroll it; the ring needs to clear the artwork. */
  outline-offset: 4px;
}

.mw-app__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 20px;
  padding-left: var(--mw-app-inset);
  /* Only the gutter on the right — matching the left inset would trail a
     150px void after the last shot on a wide screen. */
  padding-right: 22px;
}

.mw-app__shot { flex: 0 0 auto; scroll-snap-align: start; }

.mw-app__shot img {
  display: block; height: auto;
  width: clamp(210px, 22vw, 300px);
  border-radius: var(--mw-radius-lg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.mw-venue-card {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); overflow: hidden;
  box-shadow: var(--mw-shadow-sm); transition: transform .15s ease, box-shadow .15s ease; display: flex; flex-direction: column;
}
.mw-venue-card:hover { transform: translateY(-3px); box-shadow: var(--mw-shadow); }
.mw-venue-card__media { aspect-ratio: 16/10; background: var(--mw-surface-2); }
.mw-venue-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* The picture is a link to the venue as well as the "View venue" button, so a
   click anywhere obvious works. display:block kills the inline-image baseline
   gap that would otherwise show a strip of the placeholder underneath.

   No hover transform on the image on purpose — the card already lifts on
   hover, and zooming the photo underneath it as well was too much movement. */
.mw-venue-card__link { display: block; width: 100%; height: 100%; }
.mw-venue-card__link:focus-visible { outline: 3px solid var(--mw-accent); outline-offset: -3px; }
.mw-venue-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.mw-venue-card h3 { font-size: 1.18rem; margin-bottom: .2em; color: var(--mw-ink); }
.mw-venue-card h3 a { color: var(--mw-ink); }
.mw-venue-card .mw-venue-card__addr { color: var(--mw-muted); font-size: .95rem; margin-bottom: 14px; }
.mw-venue-card .mw-btn { margin-top: auto; align-self: flex-start; padding: 10px 18px; font-size: .92rem; }

.mw-venue-card__actions { margin-top: auto; gap: 10px; }
.mw-venue-card__actions .mw-btn { margin-top: 0; }

/* Section head with a side CTA (Today at the Track, Read Up Before You Bet) */
.mw-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.mw-head--row .mw-head__titling { max-width: 640px; }
.mw-head--row h2 { margin-bottom: .35em; }
.mw-head--row .mw-lead { margin: 0; }
.mw-head--row .mw-btn { flex: 0 0 auto; margin-bottom: 6px; }

/* Today at the Track — live racecards */
.mw-track .mw-lead { color: var(--mw-section-ink-soft, #a9bdba); }
.mw-races { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mw-race {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--mw-radius); padding: 20px;
}
/* The live feed renders cards as deep links into the betting app */
a.mw-race { display: block; color: inherit; transition: border-color .15s ease, background .15s ease; }
a.mw-race:hover { text-decoration: none; border-color: var(--mw-accent); background: rgba(14, 229, 110, .08); }
/* ============================================================ Sport icons
   Thoroughbred, harness, greyhound and jai alai, from assets/icons/. Drawn as
   a CSS mask over the text colour, so an icon is always whatever colour the
   text around it is and one file serves every colourway. Width follows the
   artwork's own proportions; set the height (or font-size) and it scales. */
.mw-sport-icon {
  display: inline-block; height: 1em; aspect-ratio: var(--mw-icon-ratio, 1.5);
  background-color: currentColor; vertical-align: middle; flex: none;
  -webkit-mask: var(--mw-icon) center / contain no-repeat;
          mask: var(--mw-icon) center / contain no-repeat;
}
.mw-sport-icon--thoroughbred { --mw-icon: url("assets/icons/thoroughbred.svg"); --mw-icon-ratio: 1.48; }
.mw-sport-icon--harness      { --mw-icon: url("assets/icons/harness.svg");      --mw-icon-ratio: 1.6; }
.mw-sport-icon--greyhound    { --mw-icon: url("assets/icons/greyhound.svg");    --mw-icon-ratio: 2.76; }
.mw-sport-icon--jai-alai     { --mw-icon: url("assets/icons/jai-alai.svg");     --mw-icon-ratio: 1.21; }

/* Menu icons: give a menu item the CSS class mw-icon-thoroughbred (or
   -harness, -greyhound, -jai-alai, -lottery, -venues, -news) in
   Appearance → Menus. On a top-level item the icon shows beside its column
   title in the desktop mega menu and beside the group heading in the mobile
   menu, but not in the header bar itself, which stays words only. On a
   dropdown item it shows before the link. Every icon sits in the same box so
   wide and tall artwork read at one size. */
.mw-mega__title[class*="mw-icon-"],
.mw-nav .sub-menu .menu-item[class*="mw-icon-"] > a { display: flex; align-items: center; gap: 12px; }
.mw-mega__title[class*="mw-icon-"]::before,
.mw-nav .sub-menu .menu-item[class*="mw-icon-"] > a::before {
  content: ""; display: inline-block; width: 1.9em; height: 1.3em; flex: none;
  background-color: var(--mw-accent);
  -webkit-mask: var(--mw-icon) center / contain no-repeat;
          mask: var(--mw-icon) center / contain no-repeat;
}
@media (max-width: 760px) {
  .mw-nav > ul > .menu-item[class*="mw-icon-"] > a { display: flex; align-items: center; gap: 12px; }
  .mw-nav > ul > .menu-item[class*="mw-icon-"] > a::before {
    content: ""; display: inline-block; width: 1.9em; height: 1.3em; flex: none;
    background-color: var(--mw-accent);
    -webkit-mask: var(--mw-icon) center / contain no-repeat;
            mask: var(--mw-icon) center / contain no-repeat;
  }
}
.mw-icon-thoroughbred { --mw-icon: url("assets/icons/thoroughbred.svg"); }
.mw-icon-harness      { --mw-icon: url("assets/icons/harness.svg"); }
.mw-icon-greyhound    { --mw-icon: url("assets/icons/greyhound.svg"); }
.mw-icon-jai-alai     { --mw-icon: url("assets/icons/jai-alai.svg"); }
.mw-icon-lottery      { --mw-icon: url("assets/icons/lottery.svg"); }
.mw-icon-venues       { --mw-icon: url("assets/icons/venues.svg"); }
.mw-icon-news         { --mw-icon: url("assets/icons/news.svg"); }

/* Sport icon after the category ("Thoroughbred", "Greyhound"…). Every icon
   sits in the same fixed box and is scaled to fit it, so the long greyhound
   and the upright jai alai player read as one set instead of four sizes. */
.mw-race__type { display: inline-flex; align-items: center; gap: 10px; }
.mw-race__type .mw-sport-icon { width: 34px; height: 22px; aspect-ratio: auto; color: var(--mw-accent); }
.mw-race__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mw-race__track { text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .74rem; color: var(--mw-accent); }
.mw-race__num { font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.mw-race__status {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.mw-race__status--live { background: var(--mw-live); color: #fff; }
.mw-race__status--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: mw-pulse 1.2s ease-in-out infinite;
}
@keyframes mw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .mw-race__status--live::before { animation: none; } }
.mw-race__status--upcoming { background: rgba(255, 255, 255, .1); color: #dbe6e4; }
.mw-race__status--result { background: rgba(14, 229, 110, .16); color: #7be0a0; }
.mw-race__lines { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.mw-race__lines strong { color: #fff; font-size: .98rem; }
.mw-race__lines span { color: #8aa19d; font-size: .88rem; }
.mw-race__carryover {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .14);
  display: flex; flex-direction: column; gap: 2px;
  color: #f4b740; font-size: .88rem; font-weight: 700;
}
.mw-race__carryover-label { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: #8aa19d; font-weight: 700; }

/* Racecards page — country filter pills + group headings over .mw-races grids */
.mw-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.mw-filters:empty { display: none; }
.mw-filter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; font-family: inherit; font-size: .92rem; font-weight: 700;
  color: #dbe6e4; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mw-filter:hover { border-color: var(--mw-accent); color: #fff; }
.mw-filter.is-active { background: var(--mw-accent); border-color: var(--mw-accent); color: var(--mw-accent-ink); }
.mw-filter__count {
  font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: inherit;
}
.mw-filter.is-active .mw-filter__count { background: rgba(7, 24, 28, .18); }
.mw-racecards__group[hidden] { display: none; }
.mw-racecards__group + .mw-racecards__group { margin-top: 40px; }
.mw-racecards__loading { color: #8aa19d; text-align: center; }
.mw-racecards__country {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 1.35rem; color: #fff; margin: 44px 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mw-racecards__country:first-child { margin-top: 0; }
.mw-racecards__count { font-size: .82rem; font-weight: 600; color: #8aa19d; text-transform: uppercase; letter-spacing: .08em; }

/* The Morning Line archive (/newsletter/) — the racecards page's layout: the
   newest issue as a split feature, then earlier issues grouped by month under
   .mw-racecards__country headings. The issue cards share the race cards'
   dark surface and border but are read as articles — image, headline,
   excerpt — so an issue is never mistaken for a race. */
.mw-newsletter__latest { margin-bottom: 64px; }
.mw-newsletter__latest .mw-split__media img { border-radius: var(--mw-radius-lg); }
.mw-newsletter__latest h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.mw-newsletter__latest h2 a { color: inherit; }
.mw-newsletter__latest .mw-lead { color: #a9bdba; }
.mw-newsletter__meta { margin: 0 0 24px; }
.mw-issues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mw-issue {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--mw-radius); transition: border-color .15s ease, background .15s ease;
}
.mw-issue:hover { text-decoration: none; border-color: var(--mw-accent); background: rgba(14, 229, 110, .08); }
.mw-issue__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255, 255, 255, .06); }
.mw-issue__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mw-issue:hover .mw-issue__img img { transform: scale(1.03); }
.mw-issue__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.mw-issue__meta { font-size: .8rem; font-weight: 600; color: #8aa19d; }
.mw-issue__title { font-size: 1.3rem; line-height: 1.25; margin: 0; color: #fff; }
.mw-issue__excerpt {
  font-size: .95rem; line-height: 1.5; color: #a9bdba;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mw-issue__more { margin-top: auto; padding-top: 6px; font-size: .9rem; font-weight: 700; color: var(--mw-accent); }
@media (max-width: 980px) { .mw-issues { grid-template-columns: repeat(2, 1fr); } }

/* The Morning Line sign-up box — on /newsletter/ and at the foot of an issue.
   Same dark surface as the issue cards, with the accent edge so it reads as
   the one thing on the page asking for something. */
.mw-signup {
  display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 20px 48px; align-items: center;
  padding: 36px 40px; margin-bottom: 64px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-left: 4px solid var(--mw-accent); border-radius: var(--mw-radius-lg);
}
.mw-section > .mw-container > .mw-signup:last-child { margin-bottom: 0; }
.mw-signup__heading { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .3em; color: #fff; }
.mw-signup__text { margin: 0; color: #a9bdba; }
.mw-signup__form { display: flex; flex-wrap: wrap; gap: 10px; }
.mw-signup__input {
  flex: 1 1 220px; min-width: 0; padding: 13px 16px; font: inherit; font-size: 1rem;
  color: #fff; background: rgba(7, 24, 28, .6); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
}
.mw-signup__input::placeholder { color: #6f8783; }
.mw-signup__input:focus { outline: 2px solid var(--mw-accent); outline-offset: 1px; border-color: transparent; }
.mw-signup__form .mw-btn { flex: 0 0 auto; }
.mw-signup__form .mw-btn[disabled] { opacity: .6; cursor: wait; }
.mw-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mw-signup__status { flex-basis: 100%; margin: 0; min-height: 1.4em; font-size: .92rem; font-weight: 600; }
.mw-signup__status.is-ok { color: var(--mw-accent); }
.mw-signup__status.is-error { color: #ff8a80; }
.mw-signup.is-done .mw-signup__input,
.mw-signup.is-done .mw-signup__form .mw-btn { display: none; }
.mw-signup__smallprint { grid-column: 1 / -1; margin: 4px 0 0; font-size: .78rem; line-height: 1.5; color: #8aa19d; }
.mw-signup__smallprint a { color: inherit; text-decoration: underline; }
@media (max-width: 760px) {
  .mw-signup { grid-template-columns: 1fr; padding: 28px 22px; }
}
@media (max-width: 760px) { .mw-issues { grid-template-columns: 1fr; } }

/* Bobby V's featured venue */
/* No aspect-ratio and no object-fit, deliberately: the image keeps the
   proportions it was uploaded at, so a 1:1 or a portrait crop renders whole
   instead of being trimmed to 4:3. Size comes from .mw-split__media img —
   100% of the column, height auto — and .mw-split centres the text column
   against whatever height that produces, so a portrait image is free to run
   taller than the copy beside it. */
/* No shadow by default. "Apply image shadow" below is a true on/off: it used
   to be faint-versus-strong, so switching it off still left a shadow — and on
   a cut-out PNG (the venue collage) a box shadow traces the file's rectangle
   rather than the artwork, which reads as a white card around it. */
.mw-bv__img { border-radius: var(--mw-radius-lg); }

/* "Apply image shadow" in the Bobby V's tab. The image always carries the
   faint --mw-shadow lift above; this is the pronounced version, so the toggle
   reads as more shadow rather than shadow-versus-none.

   Against a dark section a neutral drop shadow is invisible, so there it
   becomes a glow in the section's own accent instead — color-mix to add the
   alpha, the same way --mw-section-accent-soft is mixed in inc/section-styles.php,
   and the same var() fallback chain so an unstyled section glows brand green.
   The hairline keeps the image edge legible where the glow is dimmest. */
/* drop-shadow, not box-shadow: it follows what is actually drawn, so a
   rectangular photo gets the shadow under its edge and a cut-out gets it
   under the artwork. */
.mw-bv__img--shadow { filter: drop-shadow(0 18px 30px rgba(7, 24, 28, .30)); }

.mw-section--dark .mw-bv__img--shadow {
  filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--mw-section-accent, var(--mw-accent)) 40%, transparent));
}
.mw-bv__placeholder {
  aspect-ratio: 4/3; border-radius: var(--mw-radius-lg); background: var(--mw-surface-2);
  display: grid; place-items: center; color: var(--mw-muted); font-weight: 800; font-size: 1.4rem;
}
.mw-bv__features { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.mw-bv__features li { position: relative; padding-left: 34px; font-weight: 600; }
.mw-bv__features li::before {
  content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mw-accent-soft); color: var(--mw-accent-strong);
  display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}

/* News grid, compact — title-only cards, equal heights across the row */
.mw-posts--compact .mw-post-card__excerpt { display: none; }
.mw-posts--compact .mw-post-card h3 { font-size: 1.25rem; flex: 1; }
.mw-posts--compact .mw-post-card__meta { margin-top: 10px; }

/* Rewards & loyalty — intro left, numbered steps right */
/* The rewards row is the Bobby V's split with the columns the other way round:
   copy left, artwork right. It shares .mw-split for the grid itself — same
   1fr 1fr, same 64px gap, same vertical centring — and the reversal needs no
   CSS at all, because .mw-split__body simply comes first in the markup. All
   that is left here is what is particular to rewards.

   .mw-split__media img already sizes the picture at 100% width / auto height,
   so a square or portrait upload keeps its proportions instead of being
   cropped, exactly as on Bobby V's. */
.mw-rewards__intro h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); margin-bottom: .4em; }
.mw-rewards__intro .mw-lead { color: #a9bdba; margin-bottom: 24px; }

/* Spacing for the two items that moved into this column. Adjacent margins
   collapse, so the gap under the lead is the larger of its 24px and this. */
.mw-rewards__intro .mw-reward-steps { margin-top: 38px; }
.mw-rewards__cta { margin-top: 34px; }

/* No artwork picked yet: one column, and the copy capped rather than run out
   to the full 1136px, which is far too wide a measure for the lead and steps. */
.mw-rewards__grid--no-image { grid-template-columns: 1fr; }
.mw-rewards__grid--no-image .mw-split__body { max-width: 760px; }
.mw-reward-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.mw-reward-step { display: flex; gap: 18px; align-items: flex-start; }
.mw-reward-step__num {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
}
/* Number artwork (paint-splatter numerals), the same 56px box as the
   How It Works steps. */
.mw-reward-step__art { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; margin-top: -4px; }
.mw-reward-step h3 { font-size: 1.12rem; margin-bottom: .2em; color: #fff; }
.mw-reward-step p { color: #a9bdba; margin: 0; font-size: .98rem; }

/* Testimonial quote banner (About page) — customisable background image */
.mw-quote-banner {
  padding: 96px 0;
  background-color: var(--mw-section-bg, var(--mw-dark));
  background-image:
    linear-gradient(180deg, rgba(7,24,28,.82) 0%, rgba(7,24,28,.7) 50%, rgba(7,24,28,.86) 100%),
    radial-gradient(1200px 600px at 20% -10%, #11433a 0%, transparent 60%);
  background-size: cover; background-position: center;
}
.mw-quote-banner blockquote { color: var(--mw-section-heading, #fff); }
.mw-quote-banner cite { color: var(--mw-section-ink-soft, #a9bdba); }
.mw-quote-banner .mw-star { color: rgba(255, 255, 255, .28); }
.mw-quote-banner .mw-star.is-on { color: var(--mw-section-accent, #f4b740); }

/* Testimonial */
.mw-testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.mw-stars { color: #f4b740; font-size: 1.5rem; letter-spacing: 2px; display: inline-block; margin-bottom: 14px; }
.mw-star { color: #d7dedd; }
.mw-star.is-on { color: #f4b740; }
.mw-testimonial { margin: 0 auto; }
.mw-testimonial blockquote {
  font-family: 'Industry Bold', sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.22; letter-spacing: -.01em;
  margin: 0 0 28px;
}
/* The oversized green opening mark is the section's graphic. It hangs above
   the quote rather than in the text, so the quote itself stays plain words. */
.mw-testimonial__mark {
  display: block; height: .5em; margin-bottom: 8px;
  font-family: 'Industry Bold', Georgia, serif; font-size: clamp(7rem, 11vw, 10rem); line-height: .9;
  color: var(--mw-accent);
}
.mw-testimonial figcaption { display: flex; flex-direction: column; gap: 10px; }
.mw-testimonial .mw-stars { margin: 0; font-size: 1.2rem; }
.mw-quote-banner .mw-star.is-on { color: var(--mw-accent); }
.mw-testimonial cite { font-style: normal; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; color: var(--mw-section-ink-soft, var(--mw-muted)); }
.mw-testimonial cite strong { color: var(--mw-section-heading, #fff); font-weight: 700; }
/* A short green rule leads into the name. */
.mw-testimonial cite::before { content: ""; width: 36px; height: 2px; background: var(--mw-accent); }
.mw-quote-banner:not(.mw-quote-banner--split) .mw-testimonial figcaption { align-items: center; }
.mw-quote-banner:not(.mw-quote-banner--split) .mw-testimonial cite { justify-content: center; }

/* Photo beside the quote: the "Banner background image" field, with the same
   offset green block as the Bobby V's image and the About chapter photos. */
.mw-quote-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.mw-quote-split .mw-testimonial { max-width: none; text-align: left; }
.mw-quote-split__media { margin: 0 18px 18px 0; }
.mw-quote-split__media img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--mw-radius); box-shadow: 18px 18px 0 var(--mw-accent);
}
@media (max-width: 980px) {
  .mw-quote-split { grid-template-columns: 1fr; gap: 40px; }
  .mw-quote-split__media img { aspect-ratio: 16 / 9; }
}

/* FAQ accordion */
.mw-faqs { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--mw-line); }
.mw-faq { border-bottom: 1px solid var(--mw-line); }
.mw-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 44px 22px 4px;
  font-size: 1.12rem; font-weight: 700; color: var(--mw-ink); position: relative; font-family: inherit;
}
.mw-faq__q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--mw-accent-strong); transition: transform .2s ease;
}
.mw-faq[open] .mw-faq__q::after { content: "–"; }
.mw-faq__a { padding: 0 4px 24px; color: var(--mw-ink-2); }
.mw-faq__a > :last-child { margin-bottom: 0; }
/* native <details> styling */
details.mw-faq > summary { list-style: none; }
details.mw-faq > summary::-webkit-details-marker { display: none; }

/* FAQ + ghost buttons on a dark section */
.mw-section--dark .mw-faqs { border-top-color: rgba(255, 255, 255, .12); }
.mw-section--dark .mw-faq { border-bottom-color: rgba(255, 255, 255, .12); }
.mw-section--dark .mw-faq__q { color: #fff; }
.mw-section--dark .mw-faq__q::after { color: rgba(255, 255, 255, .75); }
.mw-section--dark .mw-faq__a { color: #b8c8c5; }
.mw-section--dark .mw-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .28); }
.mw-section--dark .mw-btn--ghost:hover { color: #fff; border-color: #fff; }

/* Legal */
.mw-legal { color: var(--mw-muted); font-size: .95rem; }
.mw-section--dark .mw-legal { color: #a9bdba; }

/* Licensing & Legal compliance — dark text on white by default, with
   overrides for use inside a dark section. */
.mw-compliance__lead { max-width: 860px; margin: 0 auto 52px; text-align: center; }
.mw-compliance__lead p { color: var(--mw-ink-2); font-size: 1rem; line-height: 1.7; margin: 0; }
.mw-compliance__lead strong { color: var(--mw-ink); }
.mw-compliance__lead a { color: var(--mw-accent-strong); }
/* Dynamic grid: items flow into balanced columns, so a tall item never
   strands gaps beside short ones, and any item count lays out cleanly. */
.mw-compliance__grid { column-count: 3; column-gap: 56px; max-width: 1100px; margin: 0 auto; }
.mw-compliance__item { break-inside: avoid; margin-bottom: 32px; }
.mw-compliance__item h3 { font-size: 1rem; color: var(--mw-ink); margin-bottom: .45em; }
.mw-compliance__body p { color: var(--mw-muted); font-size: .95rem; line-height: 1.65; margin: 0 0 .85rem; }
.mw-compliance__body p:last-child { margin-bottom: 0; }
.mw-compliance__body strong { color: var(--mw-ink-2); font-weight: 700; }
.mw-compliance__body a { color: var(--mw-accent-strong); }

.mw-section--dark .mw-compliance__lead p { color: #c2d2cf; }
.mw-section--dark .mw-compliance__lead strong { color: #fff; }
.mw-section--dark .mw-compliance__lead a { color: var(--mw-accent); }
.mw-section--dark .mw-compliance__item h3 { color: #fff; }
.mw-section--dark .mw-compliance__body p { color: #a9bdba; }
.mw-section--dark .mw-compliance__body strong { color: #dbe6e4; }
.mw-section--dark .mw-compliance__body a { color: var(--mw-accent); }

/* Final CTA — green band with a fading marquee headline */
.mw-cta-band { background: var(--mw-section-bg, var(--mw-accent)); color: var(--mw-section-ink, var(--mw-ink)); padding: 60px 0 70px; overflow: hidden; text-align: center; }
.mw-marquee {
  overflow: hidden; margin-bottom: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mw-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: mw-marquee 60s linear infinite; }
.mw-marquee__track span { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; padding-right: 64px; color: var(--mw-section-heading, var(--mw-ink)); }
.mw-cta-band:hover .mw-marquee__track { animation-play-state: paused; }
@keyframes mw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mw-marquee__track { animation: none; transform: none; } }
.mw-cta-band__inner p { max-width: 620px; margin: 0 auto 26px; font-size: 1.15rem; color: var(--mw-section-ink, var(--mw-ink)); }
.mw-cta-band .mw-badges { justify-content: center; }

/* ============================================================== Blog list */
.mw-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mw-post-card {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--mw-shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.mw-post-card:hover { transform: translateY(-3px); box-shadow: var(--mw-shadow); }
.mw-post-card__media { aspect-ratio: 16/9; background: var(--mw-surface-2); }
.mw-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mw-post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.mw-post-card__cats { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mw-chip { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mw-accent-strong); background: var(--mw-accent-soft); padding: 4px 10px; border-radius: 999px; }
.mw-chip:hover { text-decoration: none; }
.mw-post-card h2, .mw-post-card h3 { font-size: 1.25rem; margin-bottom: .4em; color: var(--mw-ink); }
.mw-post-card h2 a, .mw-post-card h3 a { color: var(--mw-ink); }
.mw-post-card__excerpt { color: var(--mw-muted); flex: 1; }
.mw-post-card__meta { color: var(--mw-muted); font-size: .85rem; margin-top: 14px; }

/* Pagination */
.mw-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.mw-pagination .page-numbers { padding: 10px 16px; border: 1px solid var(--mw-line); border-radius: 5px; color: var(--mw-ink); font-weight: 600; }
.mw-pagination .page-numbers.current { background: var(--mw-accent); color: var(--mw-accent-ink); border-color: var(--mw-accent); }
.mw-pagination a:hover { text-decoration: none; border-color: var(--mw-ink); }

/* ============================================================ Single post */
.mw-article { max-width: 760px; margin: 0 auto; }
.mw-article__header { margin-bottom: 28px; }
.mw-article__header h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin-bottom: .3em; }
.mw-article__meta { color: var(--mw-muted); font-size: .95rem; }
.mw-article__hero { margin: 0 0 32px; border-radius: var(--mw-radius-lg); overflow: hidden; }
/* Blog body — styles the clean semantic HTML produced by migration/sanitize.mjs.
   Squarespace ships no classes/inline styles here any more, so everything is
   scoped to the element inside .mw-article__body. */
.mw-article__body,
.mw-blocks { font-size: 1.08rem; line-height: 1.75; color: var(--mw-ink-2); }
.mw-article__body > *:first-child { margin-top: 0; }
.mw-article__body p { margin: 0 0 1.25em; }
.mw-article__body h2,
.mw-article__body h3,
.mw-article__body h4,
.mw-blocks h2,
.mw-blocks h3,
.mw-blocks h4 { color: var(--mw-ink); line-height: 1.25; scroll-margin-top: calc(var(--mw-header-h) + 16px); }
.mw-article__body h2 { margin: 1.9em 0 .6em; font-size: 1.6rem; }
.mw-article__body h3 { margin: 1.6em 0 .5em; font-size: 1.3rem; }
.mw-article__body h4 { margin: 1.4em 0 .4em; font-size: 1.1rem; }

/* An eyebrow labels the heading below it, in here as much as anywhere else.
   It needs saying twice because the two rules above are a class plus an
   element and so outrank the single-class .mw-eyebrow: without this, the
   eyebrow keeps the body's 1.25em paragraph margin and the heading keeps its
   1.9em run-in, leaving the pair ~49px apart while the rest of the site sits
   at 3px. Same --mw-flow-label the .mw-blocks rule uses, so one value moves
   both, and the two margins collapse to it rather than adding up. */
.mw-article__body .mw-eyebrow { margin-bottom: var(--mw-flow-label); }
.mw-article__body .mw-eyebrow + :where(h1, h2, h3, h4) { margin-top: var(--mw-flow-label); }
.mw-article__body a,
.mw-blocks a { color: var(--mw-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.mw-article__body a:hover,
.mw-blocks a:hover { text-decoration: none; }
.mw-article__body ul,
.mw-article__body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
/* Indented far enough that the markers sit inside the text column rather than
   hanging to the left of the body copy. list-style-position stays outside, so
   the padding has to clear the marker itself. */
.mw-blocks :where(ul, ol) { padding-left: 1.6em; }
.mw-blocks :where(ul, ol) :where(ul, ol) { padding-left: 1.4em; }
.mw-article__body li,
.mw-blocks li { margin: .35em 0; }
.mw-article__body img { max-width: 100%; height: auto; border-radius: var(--mw-radius); margin: 1.5rem 0; }
.mw-article__body figure { margin: 1.5rem 0; }
.mw-article__body figcaption,
.mw-blocks figcaption { margin-top: .5rem; font-size: .9rem; color: var(--mw-muted); text-align: center; }
.mw-article__body hr { margin: 2.5rem 0; }
.mw-article__body blockquote {
  margin: 1.5rem 0; padding: .4rem 0 .4rem 1.25rem;
  border-left: 3px solid var(--mw-accent); color: var(--mw-ink);
  font-size: 1.15rem; font-style: italic;
}

/* Data tables (racecards, odds). Wrapped in .mw-table (see sanitize.mjs) so wide
   tables scroll inside their own box rather than pushing the page sideways; the
   table fills the column width on wider screens. */
.mw-article__body .mw-table { margin: 1.75rem 0; overflow-x: auto; }
.mw-article__body table {
  width: 100%; min-width: 480px; border-collapse: collapse; font-size: .96rem;
}
.mw-article__body th,
.mw-article__body td { padding: 10px 14px; border: 1px solid var(--mw-line); text-align: left; vertical-align: top; }
.mw-article__body thead th { background: var(--mw-ink); color: var(--mw-accent); font-weight: 700; border-color: var(--mw-ink); }
.mw-article__body tbody tr:nth-child(even) { background: var(--mw-surface-2); }
.mw-article__body caption { caption-side: bottom; margin-top: .5rem; font-size: .9rem; color: var(--mw-muted); }

/* Accordions & Table of Contents (native <details>, converted from Squarespace widgets). */
.mw-article__body details {
  margin: 1rem 0; border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  background: var(--mw-surface); overflow: hidden;
}
.mw-article__body details ol, .mw-article__body details ul {
  list-style: none; padding: 0; margin: 0;
}
.mw-article__body details ol li, .mw-article__body details ul li {
  margin: 0; padding: 0;
}
.mw-article__body details summary {
  padding: 14px 18px; font-weight: 700; color: var(--mw-ink); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mw-article__body details summary::-webkit-details-marker { display: none; }
.mw-article__body details summary::after { content: "+"; color: var(--mw-accent-strong); font-size: 1.4rem; line-height: 1; }
.mw-article__body details[open] summary { border-bottom: 1px solid var(--mw-line); }
.mw-article__body details[open] summary::after { content: "\2212"; }
.mw-article__body details > :not(summary) { padding: 0 18px; }
.mw-article__body details > :not(summary):first-of-type { padding-top: 14px; }
.mw-article__body details > :last-child { padding-bottom: 14px; }
.mw-article__body details.mw-toc ul,
.mw-article__body details.mw-toc ol { list-style: none; margin: 0; padding: 0; }
.mw-article__body details.mw-toc li { margin: 0; }
.mw-article__body details.mw-toc > :not(summary) { padding: 10px 0; }
.mw-article__body details.mw-toc a { display: block; padding: 6px 20px; text-decoration: none; }
.mw-article__body details.mw-toc a:hover { text-decoration: underline; }

.mw-article__footer { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--mw-line); }
/* Post tags — small, low-key inline links (not prominent). */
.mw-article__tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: .78rem; }
.mw-article__tags-label { color: var(--mw-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.mw-article__tags a { color: var(--mw-muted); text-decoration: none; }
.mw-article__tags a:hover { color: var(--mw-accent-strong); text-decoration: underline; }

/* ---------------------------------------------- Single post: grid + sidebar */
.mw-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
/* The sidebar is the exception to `align-items: start`. A sticky element can
   only travel inside its containing block, and with `start` the sidebar column
   collapsed to exactly the height of its own content — so .mw-sidebar__sticky
   had nowhere to go and never stuck. Stretching the column to the row height
   gives it the runway. */
.mw-article-grid > .mw-sidebar { align-self: stretch; }
/* The track is already minmax(0, 1fr); this is the other half of it. A grid
   item's default `min-width: auto` lets wide content — the venue gallery's
   thumbnail strip, a broad table — push the column past its track and take the
   page's horizontal scrollbar with it. Content that does not fit scrolls or
   clips inside the column instead. */
.mw-article-grid__main { min-width: 0; }
.mw-article-grid__main .mw-article { max-width: none; margin: 0; } /* fill the column, not the 760px measure */
@media (max-width: 900px) { .mw-article-grid { grid-template-columns: 1fr; gap: 40px; } }

.mw-sidebar { min-width: 0; }
/* The sticky itself was never the problem — it engages fine above 900px. What
   broke it was height: the old venue panel stood 1262px tall against a ~900px
   viewport, so there was nothing left to pin and it simply scrolled away. The
   rebuilt panel is ~740px, which fits.

   When it does not fit (a tall banner, the week expanded, a short or zoomed
   screen) it is NOT squeezed into a scroll box — that clipped the bottom of
   the panel behind its own scrollbar. Instead main.js sets --mw-sticky-top to
   a negative offset, so the panel scrolls with the page until its bottom edge
   is in view and pins there: all of it is always reachable. */
.mw-sidebar__sticky {
  position: sticky; top: var(--mw-sticky-top, calc(var(--mw-header-h) + 20px));
  display: flex; flex-direction: column; gap: 28px;
}
@media (max-width: 900px) { .mw-sidebar__sticky { position: static; } }

/* Sidebar widgets */
.mw-widget__title {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--mw-ink);
}

/* Recent posts list */
.mw-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mw-recent__link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--mw-ink); }
.mw-recent__link:hover { text-decoration: none; }
.mw-recent__link:hover .mw-recent__title { color: var(--mw-accent-strong); }
.mw-recent__thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 5px; overflow: hidden; background: var(--mw-surface); }
.mw-recent__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-recent__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mw-recent__title { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.mw-recent__date { font-size: .8rem; color: var(--mw-muted); }

/* -------------------------------------------------------------- Banners */
.mw-banner { border-radius: var(--mw-radius); overflow: hidden; }
.mw-banner img { width: 100%; height: auto; display: block; }

/* Promo creative — image as scrimmed background, or a solid dark card. */
.mw-banner--promo {
  position: relative; display: flex; align-items: flex-end; min-height: 260px;
  padding: 24px; border-radius: var(--mw-radius-lg); color: #fff; overflow: hidden;
  background-color: var(--mw-ink); background-size: cover; background-position: center;
}
.mw-banner--promo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 28, .15), rgba(7, 24, 28, .85));
}
.mw-banner--promo .mw-banner__inner { position: relative; z-index: 1; }
.mw-banner__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .72rem; margin: 0 0 8px; color: var(--mw-accent); }
.mw-banner__heading { font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 0 0 16px; color: #fff; }
.mw-banner__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--mw-accent); color: var(--mw-accent-ink); font-weight: 700;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.mw-banner__cta:hover { background: var(--mw-accent-hover); color: var(--mw-accent-ink); text-decoration: none; }

/* Card variant (no background image): solid dark box, no scrim, natural height. */
.mw-banner--card { min-height: 0; background-image: none; background-color: var(--mw-ink); }
.mw-banner--card::before { display: none; }

/* Placement slots */
.mw-banner-inarticle { margin: 2rem 0; }
.mw-banner-footer { margin-top: 48px; }

/* A slot rendered as its own band on a page (mw_banner_slot()). The section
   brings the usual vertical rhythm, so a banner between two sections sits at
   the same spacing as any other one. Nothing is printed when the slot is
   empty, so there is no empty band to collapse. */
.mw-banner-section .mw-banner-slot { max-width: 900px; margin-inline: auto; }
.mw-banner-section--footer { padding-top: 0; }

/* Related posts — featured mosaic (1 lead + a 2×2 of image tiles with overlaid text). */
.mw-mosaic {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: clamp(440px, 46vw, 620px);
}
.mw-mosaic__tile--lead { grid-column: 1; grid-row: 1 / span 2; }
.mw-mosaic__tile { position: relative; overflow: hidden; border-radius: var(--mw-radius); background: var(--mw-ink); }
.mw-mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .42s ease; }
.mw-mosaic__tile:hover .mw-mosaic__img { transform: scale(1.05); }
.mw-mosaic__link {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; padding: 16px; text-decoration: none;
}
.mw-mosaic__link:hover { text-decoration: none; }
.mw-mosaic__link::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 24, 28, .92) 0%, rgba(7, 24, 28, .35) 45%, transparent 74%);
}
.mw-mosaic__cat {
  position: relative; z-index: 1; align-self: flex-start;
  background: var(--mw-accent); color: var(--mw-accent-ink);
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px;
}
.mw-mosaic__foot { position: relative; z-index: 1; }
.mw-mosaic__title { display: block; margin: 0 0 4px; font-weight: 800; font-size: 1.05rem; line-height: 1.18; letter-spacing: -.01em; color: #fff; }
.mw-mosaic__tile--lead .mw-mosaic__title { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.mw-mosaic__meta { font-size: .74rem; color: rgba(255, 255, 255, .78); }
@media (max-width: 860px) {
  .mw-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .mw-mosaic__tile { aspect-ratio: 3 / 2; }
  .mw-mosaic__tile--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) { .mw-mosaic { grid-template-columns: 1fr; } }

/* Page (generic) */
.mw-page { margin: 0 auto; }

/* Single FAQ / Venue */
/* ------------------------------------------------- Venue utility panel ---
   The venue sidebar, ordered by what a visitor needs first: am I able to go
   now, where is it, what are today's hours, the full week if they care, then
   the one thing to do. It replaced a definition list where the address, the
   phone number and seven lines of hours all carried the same weight.

   TYPE IS THE BRAND'S OWN. The prototype set the small caps labels in IBM
   Plex Mono; here they are Inter at 700 with the same tracking, which is the
   treatment .mw-eyebrow already uses, so nothing extra is downloaded. */
.mw-venue-panel {
  background: var(--mw-surface);
  border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius);
  padding: 20px;
}

/* --- status ------------------------------------------------------------- */
.mw-venue-panel__status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 15px; }
.mw-venue-panel__status strong { font-size: .95rem; font-weight: 600; color: var(--mw-ink); }
.mw-venue-panel__status-sub { font-size: .88rem; color: var(--mw-muted); }

/* The ring is a spread-only shadow rather than a bigger dot, so the glow does
   not push the text off the baseline it shares with the status. */
.mw-venue-panel__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mw-accent); box-shadow: 0 0 0 3px rgba(14, 229, 110, .25);
}
.mw-venue-panel__dot.is-shut { background: var(--mw-live); box-shadow: 0 0 0 3px rgba(232, 68, 46, .2); }

/* --- map --------------------------------------------------------------- */
/* A shallow band, not a square: it is here to say "roughly there", and the
   address underneath does the precise work. Fixed height so the panel's
   length does not depend on whether Google answers. */
.mw-venue-panel__map {
  height: 116px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--mw-line); background: var(--mw-surface-2);
}
.mw-venue-panel__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- blocks and labels -------------------------------------------------- */
.mw-venue-panel__block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mw-line); }
.mw-venue-panel__label {
  margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mw-muted);
}
.mw-venue-panel__addr { margin: 5px 0 0; font-size: .95rem; line-height: 1.45; color: var(--mw-ink); }

/* Links, not buttons. Two full-width buttons here made "get directions" look
   as important as booking a table, which it is not. */
.mw-venue-panel__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: .88rem; }
.mw-venue-panel__links a { color: var(--mw-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mw-venue-panel__links a:hover { color: var(--mw-ink); }

/* --- today's hours ------------------------------------------------------ */
.mw-venue-panel__hours-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mw-venue-panel__today { margin: 0; font-size: .8rem; font-weight: 600; color: var(--mw-ink); }

/* Two fixed axes: service names start at 0, times at 128px, both left-aligned,
   so several rows read as a column rather than a ragged list. A dl gives the
   pairing real semantics — each time is the definition of its service. */
.mw-venue-hours, .mw-venue-week__list { display: grid; grid-template-columns: 128px 1fr; column-gap: 10px; margin: 0; }
.mw-venue-hours > * { margin: 0; padding: 7px 0; font-size: .88rem; border-bottom: 1px solid var(--mw-line); }
.mw-venue-hours dt { color: var(--mw-ink); font-weight: 500; }
.mw-venue-hours dd { color: var(--mw-ink-2); font-variant-numeric: tabular-nums; }
/* The last pair closes the list, so it carries no rule. */
.mw-venue-hours > *:nth-last-child(-n+2) { border-bottom: 0; }

/* --- the full week ------------------------------------------------------ */
.mw-venue-week { margin-top: 10px; }
.mw-venue-week summary {
  display: inline-block; cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--mw-accent-strong); text-decoration: underline; text-underline-offset: 2px;
  list-style: none;
}
.mw-venue-week summary::-webkit-details-marker { display: none; }
.mw-venue-week summary::marker { content: ''; }
.mw-venue-week summary:hover { color: var(--mw-ink); }
.mw-venue-week summary:focus-visible { outline: 2px solid var(--mw-ink); outline-offset: 3px; border-radius: 2px; }
.mw-venue-week[open] summary { margin-bottom: 10px; }
/* A heading for structure, but set in the panel's own type: the site's h3
   rule would otherwise switch it to the Industry display face mid-panel. */
/* "All times ET": the brand rule for any time on the site. */
.mw-venue-panel__tz { margin: 8px 0 0; font-size: .75rem; color: var(--mw-muted); }
.mw-venue-week .mw-venue-week__svc {
  /* !important only to beat typography.css, which pins every heading to 400
     because the Industry files ship a single weight. This one is in Inter. */
  font-family: inherit; font-size: .72rem; font-weight: 700 !important; font-synthesis: initial;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3; margin: 16px 0 2px; color: var(--mw-muted);
}
.mw-venue-week__svc:first-of-type { margin-top: 0; }
.mw-venue-week__list > * { margin: 0; padding: 7px 0; font-size: .88rem; border-bottom: 1px solid var(--mw-line); }
.mw-venue-week__list dt { color: var(--mw-muted); }
.mw-venue-week__list dd { color: var(--mw-ink-2); font-variant-numeric: tabular-nums; }
/* Today's run is picked out so the expanded week answers "which of these am I
   looking at" without counting down the column: full ink and a green marker,
   at the panel's normal weight rather than a heavier one. */
.mw-venue-week__list .is-today { color: var(--mw-ink); font-weight: 500; }
.mw-venue-week__list dt.is-today::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mw-accent); margin: 0 7px 1px 0; vertical-align: middle;
}
.mw-venue-week__list > *:nth-last-child(-n+2) { border-bottom: 0; }

/* --- CTA and advertisement --------------------------------------------- */
.mw-venue-panel__cta { display: flex; justify-content: center; width: 100%; margin-top: 16px; }

.mw-venue-panel__ad { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mw-line); }
/* A RESERVED BOX, not a box the image decides the size of. An ad that 404s, is
   blocked, or has not been set used to collapse this to nothing, which read as
   a broken panel rather than an empty slot. The tinted min-height keeps the
   space whatever happens, and any image fills it. */
.mw-venue-panel__ad .mw-sidebar__banner {
  min-height: 74px; border-radius: 4px; overflow: hidden;
  background: var(--mw-surface-2); display: flex; flex-direction: column;
}
.mw-venue-panel__ad .mw-sidebar__banner img { display: block; width: 100%; height: auto; }
.mw-venue-panel__ad .mw-sidebar__banner:empty { display: block; }

/* Venue photo gallery — stands in for the featured-image hero when a venue has
   photos. A scroll-snapping strip, so it swipes on touch and pages with the
   arrows on a desktop; the arrows, counter and active thumbnail arrive with
   assets/js/venue-gallery.js. */
.mw-gallery { margin: 0 0 32px; }
.mw-gallery__stage { position: relative; border-radius: var(--mw-radius-lg); overflow: hidden; background: var(--mw-surface-2); }
.mw-gallery__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mw-gallery__track::-webkit-scrollbar { display: none; }
.mw-gallery__track:focus-visible { outline: 3px solid var(--mw-accent); outline-offset: -3px; }
.mw-gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16 / 10; }
.mw-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.mw-gallery__caption {
  position: absolute; inset: auto 0 0; margin: 0; padding: 70px 26px 22px;
  color: #fff; font-size: .98rem; line-height: 1.4;
  background: linear-gradient(to top, rgba(7, 24, 28, .82), rgba(7, 24, 28, 0));
}
.mw-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--mw-ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--mw-shadow-sm); transition: background .15s ease, opacity .15s ease;
}
.mw-gallery__nav:hover { background: #fff; }
.mw-gallery__nav[disabled] { opacity: .35; cursor: default; }
.mw-gallery__nav[hidden] { display: none; }
.mw-gallery__nav--prev { left: 14px; }
.mw-gallery__nav--next { right: 14px; }
.mw-gallery__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mw-gallery__count {
  position: absolute; top: 14px; right: 14px; margin: 0; padding: 5px 13px; border-radius: 999px;
  background: rgba(7, 24, 28, .72); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.mw-gallery__count[hidden] { display: none; }
.mw-gallery__thumbs {
  list-style: none; display: flex; gap: 10px; margin: 12px 0 0; padding: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--mw-surface); border-radius: var(--mw-radius);
}
.mw-gallery__thumbs::-webkit-scrollbar { display: none; }
.mw-gallery__thumbs li { flex: 0 0 auto; }
.mw-gallery__thumb {
  display: block; width: 108px; aspect-ratio: 3 / 2; border-radius: 5px; overflow: hidden;
  border: 3px solid transparent; transition: border-color .15s ease, opacity .15s ease; opacity: .78;
}
.mw-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mw-gallery__thumb:hover { opacity: 1; }
.mw-gallery__thumb.is-active { border-color: var(--mw-accent); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mw-gallery__track, .mw-gallery__thumbs { scroll-behavior: auto; }
}
@media (max-width: 600px) {
  .mw-gallery__slide { aspect-ratio: 4 / 3; }
  .mw-gallery__nav { width: 38px; height: 38px; }
  .mw-gallery__nav--prev { left: 8px; }
  .mw-gallery__nav--next { right: 8px; }
  .mw-gallery__caption { padding: 56px 18px 16px; font-size: .9rem; }
  .mw-gallery__thumb { width: 78px; }
}

/* Toast Tables booking module (Bobby V's) */
.mw-booking { margin: 0; }
.mw-booking iframe { width: 100%; height: 720px; border: 1px solid var(--mw-line); border-radius: var(--mw-radius-lg); background: #fff; }

/* =================================================================== Footer */
.mw-footer {
  position: relative; color: #c2d2cf; padding: 64px 0 28px; background-color: var(--mw-dark);
  background-image: linear-gradient(rgba(7, 24, 28, .62), rgba(7, 24, 28, .82)), url('assets/img/footer-bg.webp');
  background-size: cover; background-position: center;
}
/* Brand, two link columns and the app badges across one row. The links are
   set as quiet body-size text with green only on hover: a full column of
   bright, underlined links at body-plus size was the loudest thing on the
   page, louder than the content above it. */
.mw-footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.mw-footer h4 { color: var(--mw-accent); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin: 4px 0 18px; }
.mw-footer ul { list-style: none; margin: 0; padding: 0; }
.mw-footer li { margin-bottom: 10px; }
.mw-footer__col a { color: #d5e1de; text-decoration: none; font-size: .94rem; font-weight: 400; transition: color .15s ease; }
.mw-footer__col a:hover { color: var(--mw-accent); text-decoration: underline; text-underline-offset: 3px; }
.mw-footer__brand .mw-logo { color: #fff; display: inline-flex; font-size: 1.5rem; }
.mw-footer .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.mw-footer__brand .custom-logo { max-height: 40px; width: auto; }
.mw-footer__brand p { color: #9fb3af; font-size: .92rem; line-height: 1.6; max-width: 300px; margin: 14px 0 0; }
.mw-footer__social { display: flex; gap: 10px; margin: 22px 0 0; }
.mw-footer__social a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mw-footer__social a:hover { background: var(--mw-accent); border-color: var(--mw-accent); color: var(--mw-dark); }
.mw-footer__social svg { width: 14px; height: 14px; fill: currentColor; }
.mw-footer__bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .8rem; color: #7f9692; }
.mw-footer__bottom a { color: #c2d2cf; }

/* ================================================================== Lottery */
/* Homepage "Did You Win the Lotto!?" banner — a purple promo card (purple is
   scoped here; it's not a global brand token). Balls + CTA use the brand green. */
/* Scoped to the front page. The section runs straight into the Bobby V's band
   below it there, so its own bottom padding would double up with that band's
   72px top. The Powerball and Mega Millions pages reuse this section as their
   own results panel and do need the padding. */
.mw-front .mw-lotto-section { padding-bottom: 0 }
.mw-lotto {
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 44px; align-items: center;
  background: linear-gradient(135deg, #5b28e6 0%, #3f18b5 100%);
  color: #fff; border-radius: var(--mw-radius-lg); padding: 46px 50px;
  box-shadow: var(--mw-shadow);
}
.mw-lotto__eyebrow { color: var(--mw-accent); }
.mw-lotto__heading {
  color: #fff; margin: 0 0 24px; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.02; letter-spacing: -.01em;
}
.mw-lotto__balls { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; padding: 0; }
/* Drawn numbers. Shaded like a ball rather than filled flat: one radial for
   the light coming from the top left, a second for the body of the sphere, and
   a soft cast shadow underneath.

   The shading is deliberately restrained — a hard specular highlight reads as
   plastic and fights the Industry headline sitting next to it. Push the last
   stop of the body gradient darker for more relief, lighter for less.

   Percentage stops, so the same rule holds at all three sizes the balls appear
   at (56px in the purple box, 48px on phones, 38px in the history table).

   The cast shadow is not decoration: in the history table these sit on
   --mw-surface, and a flat white circle on #f4f7f6 has no edge at all.

   `background` first, then `background-image` — the shorthand resets the
   image, so a flat white/green fill stays as the fallback if the gradients
   are ever dropped. */
.mw-lotto__ball {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--mw-ink); font-weight: 800; font-size: 1.35rem;
  background-image:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 50% 40%, #fff 0%, #f4f7f8 58%, #d7dee1 100%);
  box-shadow: 0 3px 8px rgba(7, 24, 28, .20), inset 0 -2px 4px rgba(7, 24, 28, .06);
  font-variant-numeric: tabular-nums;
}

/* The Powerball / Mega Ball, same shading in the brand green. */
.mw-lotto__ball--special {
  background: var(--mw-accent); color: var(--mw-accent-ink);
  background-image:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 40%, #5cf7a2 0%, var(--mw-accent) 54%, #07b352 100%);
  box-shadow: 0 3px 8px rgba(7, 24, 28, .20), inset 0 -2px 4px rgba(7, 24, 28, .10);
}
.mw-lotto__check-row { margin: 0; }
.mw-lotto__check {
  color: var(--mw-accent); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.mw-lotto__check:hover { color: #fff; }

/* Right panel — next jackpot readout + "how to play" CTA into the landing page. */
.mw-lotto__cta {
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--mw-radius); padding: 32px; text-align: center;
}
.mw-lotto__cta-label { color: var(--mw-accent); }
.mw-lotto__jackpot { color: #fff; font-weight: 800; line-height: 1; margin: 0 0 8px; font-size: clamp(2.4rem, 5vw, 3.3rem); }
.mw-lotto__next-date { color: rgba(255, 255, 255, .75); font-size: .98rem; margin: 0 0 24px; }
.mw-lotto__btn { width: 100%; justify-content: center; }

/* The purple box with a photo behind it. The URL arrives inline as
   --mw-lotto-image (see front-page.php) rather than as a background-image,
   exactly as .mw-hero--image works and for the same reason: .mw-lotto paints
   its purple in a `background` shorthand, so setting background-image inline
   would replace the gradient along with it and leave white text on an
   unmasked photo.

   The overlay is deliberately not the flat version's gradient. It runs
   left-to-right instead of diagonally and fades from 92% down to 76% opacity,
   so the picture reads through most strongly on the right, behind the jackpot
   panel, and stays densest on the left under the heading and the balls. Lower
   the alphas to show more of the photo, raise them to show less. */
.mw-lotto--image {
  background-image:
    linear-gradient(90deg,
      rgba(49, 19, 170, .92) 0%,
      rgba(68, 24, 205, .82) 45%,
      rgba(52, 18, 150, .76) 100%),
    var(--mw-lotto-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Over a photo the jackpot panel lifts from 9% white to 15%, so the picture
   carries through it rather than stopping at a flat slab. Only in the image
   case — at 15% over the plain gradient it reads as a smudge. */
.mw-lotto--image .mw-lotto__cta { background: rgba(255, 255, 255, .15); }

/* Results block ([mw_lottery_results] + landing page) — one card per game. */
.mw-lotto-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; }
/* Purple cards (same treatment as the homepage banner) — pop on light or dark. */
.mw-lotto-result {
  background: linear-gradient(135deg, #5b28e6 0%, #3f18b5 100%);
  border-radius: var(--mw-radius-lg); padding: 34px 30px; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  box-shadow: var(--mw-shadow);
}
.mw-lotto-result__game { color: #fff; margin: 0; font-size: 1.35rem; }
.mw-lotto-result .mw-lotto__balls { justify-content: center; margin: 0; }
.mw-lotto-result__meta { color: rgba(255, 255, 255, .8); font-size: .95rem; margin: 0; }
.mw-lotto-result__check { margin-top: 4px; }

/* Responsible-play band — editor-supplied (wysiwyg) copy on a dark section. */
.mw-lotto-rg { color: #a9bdba; margin-inline: auto; }
.mw-lotto-rg p { margin: 0 0 12px; font-size: inherit; color: inherit; }
.mw-lotto-rg p:last-child { margin-bottom: 0; }
.mw-lotto-rg strong { color: #fff; }

/* Results section as a full-bleed purple band — breaks the hero → results
   rhythm so the two eyebrow/heading/lead blocks don't read as one. */
.mw-lotto-results-section { background: linear-gradient(135deg, #5b28e6 0%, #3f18b5 100%); color: #fff; }
.mw-lotto-results-section h2 { color: #fff; }
.mw-lotto-results-section .mw-eyebrow { color: var(--mw-accent); }
.mw-lotto-results-section .mw-lead { color: rgba(255, 255, 255, .82); }
/* On the purple band the cards become translucent panels (like the homepage banner). */
.mw-lotto-results-section .mw-lotto-result { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; }

/* Optional game logo in the purple banner — white chip so a colour logo reads. */
.mw-lotto__logo { display: inline-flex; align-items: center; background: #fff; border-radius: 5px; padding: 10px 16px; margin-bottom: 16px; box-shadow: var(--mw-shadow); }
.mw-lotto__logo img { display: block; max-height: 44px; width: auto; height: auto; }

/* Per-game previous-results table (template-lottery-game.php). */
.mw-lotto-history-section .mw-head { margin-bottom: 26px; }
.mw-lotto-history { width: 100%; border-collapse: collapse; margin: 0 auto; max-width: 760px; }
.mw-lotto-history caption { text-align: left; }
.mw-lotto-history thead th {
  text-align: left; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mw-muted); font-weight: 700; padding: 0 0 12px;
}
.mw-lotto-history thead th:last-child { text-align: right; }
.mw-lotto-history tbody tr { border-top: 1px solid var(--mw-line); }
.mw-lotto-history__date { text-align: left; font-weight: 700; color: var(--mw-ink); white-space: nowrap; padding: 14px 16px 14px 0; vertical-align: middle; }
.mw-lotto-history__nums { padding: 14px 0; }
.mw-lotto-history__nums .mw-lotto__balls { justify-content: flex-end; margin: 0; gap: 8px; }
/* Smaller balls than the hero banner so a full row fits comfortably. */
.mw-lotto-history .mw-lotto__ball { width: 38px; height: 38px; font-size: .98rem; }

/* =============================================================== Responsive */
@media (max-width: 980px) {
  .mw-steps, .mw-features, .mw-venues, .mw-posts { grid-template-columns: repeat(2, 1fr); }
  .mw-races { grid-template-columns: repeat(2, 1fr); }
  .mw-split { grid-template-columns: 1fr; gap: 36px; }
  .mw-compliance__grid { column-count: 2; column-gap: 40px; max-width: 720px; }
  .mw-split__media { order: -1; }
  .mw-split__media > img { display: block; max-width: 520px; margin: 0 auto; }
  .mw-stack { width: 100%; max-width: 440px; margin: 0 auto; }
  .mw-stack__front { transform: scale(0.7); top: -120px; }
  .mw-footer__top { grid-template-columns: 1fr 1fr 1fr; gap: 36px 28px; }
  .mw-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mw-compliance__grid { column-count: 1; max-width: 520px; }

  /* Header: logo left, burger right; Login moves into the overlay. */
  .mw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0; }
  .mw-logo, .mw-header .custom-logo-link { order: 1; position: relative; z-index: 60; }
  .mw-burger { display: block; order: 2; z-index: 60; position: relative; }
  .mw-header__cta { display: none; }

  /* Header bar stays solid while the menu is open (opaque strip above the
     overlay), with the logo and close button sitting on top of it. */
  body.mw-nav-open .mw-header { background: var(--mw-dark); border-bottom-color: rgba(255, 255, 255, .08); }

  /* Full-screen overlay menu — starts BELOW the header bar so its scrolling
     content never passes over the logo. Left-aligned, grouped sections. */
  .mw-nav {
    position: fixed; top: var(--mw-header-h); left: 0; right: 0; z-index: 45; width: 100%;
    height: calc(100vh - var(--mw-header-h)); height: calc(100dvh - var(--mw-header-h));
    background: var(--mw-dark); margin: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 28px 28px 48px; transform: translateX(100%); visibility: hidden;
    transition: transform .3s ease, visibility .3s;
  }
  body.mw-nav-open .mw-nav { transform: translateX(0); visibility: visible; }
  .mw-nav ul { flex-direction: column; align-items: flex-start; gap: 22px; }
  .mw-nav ul a { color: var(--mw-accent); font-size: 1.5rem; font-weight: 600; padding: 4px 0; border: 0; }
  .mw-nav ul a:hover { background: none; color: #fff; }
  .mw-nav .sub-menu { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .mw-nav .sub-menu a { color: #c6d6d3; font-size: 1.02rem; font-weight: 500; padding: 4px 0; }
  .mw-nav .sub-menu a:hover { color: #fff; }
  .mw-nav__utility { display: block; margin-top: 26px; }
  .mw-nav__cta { display: inline-flex; align-self: flex-start; position: static; transform: none; margin-top: 34px; text-transform: uppercase; letter-spacing: .04em; }
  .mw-nav__cta::after { content: " \2197"; }

  /* Burger → green X */
  body.mw-nav-open .mw-burger span { background: var(--mw-accent); }
  body.mw-nav-open .mw-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.mw-nav-open .mw-burger span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }
  .mw-section { padding: 52px 0; }
  .mw-hero__inner { padding: 64px 0; }
  .mw-front .mw-hero__inner { padding: 104px 0 84px; }
  .mw-steps, .mw-features, .mw-venues, .mw-posts, .mw-races { grid-template-columns: 1fr; }
  .mw-lotto { grid-template-columns: 1fr; gap: 30px; padding: 34px 26px; }
  .mw-lotto-results { grid-template-columns: 1fr; }
  .mw-lotto__ball { width: 48px; height: 48px; font-size: 1.15rem; }
  .mw-head--row { align-items: flex-start; flex-direction: column; }
  .mw-footer__top { grid-template-columns: 1fr 1fr; }
  .mw-footer__app { grid-column: 1 / -1; }
  .mw-footer__app .mw-badges { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================ Section styles
   Block-editor equivalents of the .mw-section--* bands used by the PHP
   templates. Registered in inc/block-editor.php as Group block styles, so an
   editor picks one from the Styles panel instead of colouring each heading and
   paragraph by hand.

   The pairs are deliberate: .is-style-mw-section-dark must land on the same
   pixels as .mw-section--dark, or a page built in the editor will not sit
   flush against the templated sections above and below it. Change one, change
   both.

   .mw-blocks is the free-form content area (see page-about.php). Its direct
   children are constrained to the container width by default and a section
   opts out with alignfull, rather than the 100vw breakout trick — 100vw counts
   the scrollbar and produces a horizontal wobble on Windows.
   ------------------------------------------------------------------------ */

/* Vertical rhythm for the free-form area. Suppressed at whichever end starts
   or finishes with a full-bleed COLOURED band, so a dark section butts straight
   up against the page header above it instead of showing a white strip.

   The section-style part of that selector is load-bearing. "alignfull" on its
   own is just a width — an editor who wraps their opening paragraphs in a
   full-width Group with no style set (which is what /contact/ does) gets a
   band that paints nothing, and zeroing the padding for it ran the body copy
   straight into the header with no gap at all. Only a band with one of the
   Dark/Green/Grey/White styles has a background worth butting up against, so
   only those suppress the padding. */
.mw-blocks { padding-block: 72px; }
.mw-blocks:has(> [class*="is-style-mw-section-"].alignfull:first-child) { padding-block-start: 0; }
.mw-blocks:has(> [class*="is-style-mw-section-"].alignfull:last-child)  { padding-block-end: 0; }

/* THE GUTTER LIVES ON THE CONTAINER, NOT ON EACH CHILD.
   It used to be `padding-inline: 22px` on every direct child, which any block
   with its own horizontal padding silently destroyed — a list sets
   padding-left for its markers and a blockquote sets padding for its rule, so
   both lost the gutter and sat outdented to the left of the body text. Putting
   the gutter on .mw-blocks instead leaves every child's own padding free for
   what it is actually for.

   --mw-content is the container width minus both gutters, so a child centred
   inside the padded box lands on exactly the same left edge as text inside
   .mw-container in the PHP templates. Keep it in step with the contentSize in
   theme.json, which is what WordPress uses for the same job inside a band. */
.mw-blocks { padding-inline: 22px; }

.mw-blocks > * {
  width: 100%;
  max-width: var(--mw-content);
  margin-inline: auto;
}

.mw-blocks > .alignwide { max-width: calc(1400px - 44px); }

/* Escapes the container gutter with a negative margin, then re-applies it so
   its own contents line up with everything else. */
.mw-blocks > .alignfull {
  max-width: none;
  width: auto;
  margin-inline: -22px;
  padding-inline: 22px;
}

/* --- the bands themselves --- */
.mw-blocks [class*="is-style-mw-section-"] { padding-block: 72px; }

.mw-blocks .is-style-mw-section-dark { background: var(--mw-dark); color: #dbe6e4; }
.mw-blocks .is-style-mw-section-dark h1,
.mw-blocks .is-style-mw-section-dark h2,
.mw-blocks .is-style-mw-section-dark h3,
.mw-blocks .is-style-mw-section-dark h4 { color: #fff; }
.mw-blocks .is-style-mw-section-dark .mw-eyebrow { color: var(--mw-accent); }
/* Buttons are excluded: they carry their own colour pairing, and this rule
   outranks the button rule on specificity, which would paint the label the
   same green as its background. */
.mw-blocks .is-style-mw-section-dark a:not(.wp-block-button__link) { color: var(--mw-accent); }

/* Dark text on the brand green. #0ee56e is far too bright to carry white text
   at any weight — white on green measures 1.69:1, below even the 3:1 floor for
   large text, while the brand ink gives 10.77:1. The pairing is fixed here
   rather than left to whoever builds the page. */
.mw-blocks .is-style-mw-section-green { background: var(--mw-accent); color: var(--mw-accent-ink); }
.mw-blocks .is-style-mw-section-green h1,
.mw-blocks .is-style-mw-section-green h2,
.mw-blocks .is-style-mw-section-green h3,
.mw-blocks .is-style-mw-section-green h4 { color: var(--mw-accent-ink); }
.mw-blocks .is-style-mw-section-green .mw-eyebrow { color: var(--mw-accent-ink); opacity: .72; }
.mw-blocks .is-style-mw-section-green a:not(.wp-block-button__link) { color: var(--mw-accent-ink); text-decoration: underline; }

.mw-blocks .is-style-mw-section-grey { background: var(--mw-surface); }
.mw-blocks .is-style-mw-section-white { background: var(--mw-bg); }

/* Buttons dropped inside a band inherit the theme's pill treatment rather than
   core's default square link. */
.mw-blocks .wp-block-button__link {
  background: var(--mw-accent);
  color: var(--mw-accent-ink);
  border-radius: 999px;
  font-weight: 700;
  padding: 13px 22px;
  /* The shared prose link rule underlines every anchor; a pill button is not
     a prose link. */
  text-decoration: none;
}
.mw-blocks .is-style-mw-section-green .wp-block-button__link {
  background: var(--mw-accent-ink);
  color: #fff;
}

/* -------------------------------------------------- Columns inside a band
   Core's Columns block goes three-across straight to one-across at 781px. Every
   other three-up row on this site (.mw-features, .mw-steps, .mw-venues,
   .mw-posts) steps 3 → 2 at 980px → 1 at 760px, so an editor-built row is
   pulled onto the same rhythm here. Without this a page assembled from blocks
   reflows at different widths from the page above it, which is visible the
   moment you resize.

   The columns carry no flex-basis of their own — core distributes the row
   evenly — so equal thirds are the default and stay equal when one column's
   text runs longer.
   ------------------------------------------------------------------------ */



.mw-blocks .wp-block-columns { gap: 26px; }

/* Column headings inherit the band's heading colour rather than body colour. */
.mw-blocks .is-style-mw-section-dark .wp-block-column h3 { color: #fff; }
.mw-blocks .is-style-mw-section-green .wp-block-column h3 { color: var(--mw-accent-ink); }

/* ------------------------------------------------------ Rows inside a band
   A Group switched to the "Row" layout publishes as `is-layout-flex`, and with
   "Allow to wrap to multiple lines" turned off it also carries `is-nowrap` and
   a generated `flex-wrap: nowrap`. That is an instruction never to break the
   row at ANY width, so a three-item row is still three items across at 375px,
   squeezed to a third of a phone screen each.

   The nowrap setting is worth honouring on a desktop, where it stops a row
   breaking raggedly, and worth overriding on a phone, where there is no width
   to hold. So it is overridden at the same two steps as everything else rather
   than switched off outright.

   SCOPED TO `.wp-block-group` ON PURPOSE. Buttons, social icons and the
   navigation are flex layouts too, and a row of buttons stacking one per line
   on a phone is not a fix, it is a regression. Only a Row an editor built as a
   Group is treated as a layout row. Vertical stacks are excluded because they
   already run one per line. */
@media (max-width: 980px) {
  .mw-blocks .wp-block-group.is-layout-flex:not(.is-vertical) { flex-wrap: wrap !important; }
  .mw-blocks .wp-block-group.is-layout-flex:not(.is-vertical) > * {
    flex-basis: calc(50% - 16px) !important;
    flex-grow: 0;
  }
}

@media (max-width: 760px) {
  .mw-blocks .wp-block-group.is-layout-flex:not(.is-vertical) > * {
    flex-basis: 100% !important;
  }
}

@media (max-width: 980px) {
  .mw-blocks .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
  .mw-blocks .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    /* Half the row, minus the gap, minus 3px of headroom. The arithmetically
       exact figure is 50% - 13px (half the 26px gap), but that makes two
       columns plus the gap total precisely 100% of the content box, leaving the
       wrap decision to sub-pixel rounding at fractional viewport widths and
       zoom levels. The headroom is defensive: 3px is invisible and takes the
       decision away from the rounding. */
    flex-basis: calc(50% - 16px) !important;
    flex-grow: 0;
  }
}

@media (max-width: 760px) {
  .mw-blocks .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
  /* Core stacks Media & Text at 600px, everything else here at 760px. Left
     alone, a media row stays two-across for 160px of width after every
     neighbouring row has already gone single-column. */
  .mw-blocks .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .mw-blocks .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media,
  .mw-blocks .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    grid-column: 1 !important;
  }
  .mw-blocks .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media { grid-row: 1 !important; }
  .mw-blocks .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { grid-row: 2 !important; }
}

/* ---------------------------------------------------- Grid layout in a band
   A Group (or Row, or Query loop) switched to the "Grid" layout publishes with
   `is-layout-grid` and a generated container class carrying a fixed
   `grid-template-columns: repeat(N, minmax(0, 1fr))`. Unlike Columns, core
   gives grid layout NO breakpoint at all: a three-across grid is still three
   across at 375px. That is the bug this block fixes — an editor-built grid row
   stayed three-up on a phone while the Columns row directly above it had
   already stacked.

   Same rhythm as everything else on the site: 3 → 2 at 980px → 1 at 760px.

   `!important` because the generated container rule and the per-child span
   rules that core prints for a manually sized grid item both target the block
   directly; matching their specificity here would mean naming classes that are
   hashed per page and change whenever the block's layout attributes do.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  .mw-blocks .is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .mw-blocks .is-layout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* A child left spanning two columns would open an implicit second column and
     put the row back to two-across, undoing the rule above. */
  .mw-blocks .is-layout-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ========================================================= Block spacing scale
   THE PROBLEM THIS SOLVES. Spacing in the editor area used to be emergent
   rather than specified: it fell out of whichever rule happened to win — the
   blog prose margins (.mw-article__body p/h2/h3), core's block-gap, or the
   columns rule below. Three consecutive "one block after another" gaps
   measured 36px, 22px and 0px on the same page, purely because of which
   element types were involved and how deeply they were nested.

   THE CONTRACT. Four tokens, and every gap on the page is one of them:

     --mw-flow          one block to the next            (paragraph → paragraph)
     --mw-flow-heading  a heading to its own text        (deliberately tight —
                                                          the text belongs to it)
     --mw-flow-block    a heading to a structural block  (columns, group, buttons)
     --mw-flow-section  a new heading after other content (a fresh subject)

   Two rules make it hold everywhere:

   1. TOP MARGINS ONLY. Every bottom margin inside .mw-blocks is zeroed and all
      rhythm comes from margin-top on the following element. One direction means
      no margin collapsing, so a gap is always exactly the token — never the
      larger of two competing values, and never their sum.

   2. EDGES ARE PADDING. The first child of any container has no top margin and
      the last has no bottom, at every nesting level. So a band's breathing room
      is its own padding and nothing else, and it cannot drift because someone
      started a section with a heading instead of a paragraph.

   Keep in step with assets/css/editor.css, which mirrors this for the editor
   canvas, and with the blockGap in theme.json.
   ------------------------------------------------------------------------ */

:root {
  /* Content column inside .mw-blocks: the 1180px container minus its two 22px
     gutters. Matches what .mw-container yields in the PHP templates. */
  --mw-content: 1136px;
  --mw-flow: 22px;
  --mw-flow-heading: 14px;
  --mw-flow-block: 36px;
  --mw-flow-section: 56px;
  --mw-flow-label: .2rem;
}

/* 1 — every bottom margin off; rhythm comes from the top only. */
.mw-blocks :where(p, ul, ol, h1, h2, h3, h4, figure, blockquote, .wp-block-columns, .wp-block-group, .wp-block-buttons, .wp-block-image) {
  margin-bottom: 0;
}

/* Default step between any two consecutive blocks, at every nesting level. */
.mw-blocks :where(.mw-blocks, .wp-block-group, .wp-block-column) > * + * {
  margin-top: var(--mw-flow);
}
.mw-blocks > * + * { margin-top: var(--mw-flow); }

/* A heading holds its own text close … */
.mw-blocks :where(h1, h2, h3, h4) + * { margin-top: var(--mw-flow-heading); }

/* … but gives a structural block room to breathe. */
.mw-blocks :where(h1, h2, h3, h4) + :where(.wp-block-columns, .wp-block-group, .wp-block-buttons) {
  margin-top: var(--mw-flow-block);
}

/* A heading arriving after other content starts a new subject, so it gets the
   largest step — this is the one gap that should read as a break. */
.mw-blocks * + :where(h2, h3) { margin-top: var(--mw-flow-section); }

/* …except after an eyebrow, which is a label belonging TO the heading, not
   content preceding it. Without this it collects the new-subject step and sits
   56px above the title it introduces. The value is the theme's own eyebrow
   spacing, so a band built in the editor pairs its label and heading exactly
   like the hand-built sections in the PHP templates do.

   Deliberately a positive step rather than a negative bottom margin on the
   eyebrow: a negative value would be arithmetic against --mw-flow-section and
   would silently come apart if that token were ever retuned. */
.mw-blocks .mw-eyebrow + :where(h1, h2, h3, h4) { margin-top: var(--mw-flow-label); }

/* 2 — edges are padding. Applies at every nesting depth, not just the top. */
.mw-blocks :where([class*="is-style-mw-section-"], .wp-block-group, .wp-block-column) > *:first-child {
  margin-top: 0;
}
.mw-blocks :where([class*="is-style-mw-section-"], .wp-block-group, .wp-block-column) > *:last-child {
  margin-bottom: 0;
}
.mw-blocks > *:first-child { margin-top: 0; }

/* Columns are laid out by flex gap, so their own top margin would double up. */
.mw-blocks .wp-block-columns > .wp-block-column { margin-top: 0; }

/* Consecutive bands butt straight up against one another. The flow step is for
   blocks inside the reading column; between two full-bleed bands it shows as a
   strip of page background cutting across the stack, which reads as a mistake
   rather than as spacing — the bands already carry 72px of their own padding.
   The step is kept where a band meets ordinary content above or below it. */
.mw-blocks > [class*="is-style-mw-section-"] + [class*="is-style-mw-section-"] {
  margin-top: 0;
}

/* ------------------------------------------- Media & Text, images, separators
   Blocks the section styles did not previously cover. Media & Text bleeds its
   image to the edge of its half (that is the block's whole point, and what
   distinguishes it from a two-column row), so it gets the band's gutter back
   as padding on the content side only.
   ------------------------------------------------------------------------ */

.mw-blocks .wp-block-media-text { border-radius: var(--mw-radius); overflow: hidden; }
/* The content half carries the padding; the media half carries none, so the
   image runs flush to the block edge on whichever side it is placed. That is
   the point of Media & Text over a two-column row — a gutter on the image side
   makes it read as a column with a gap rather than a bled edge. */
.mw-blocks .wp-block-media-text__content { padding: 32px; }
.mw-blocks .wp-block-media-text__media { padding: 0; }
.mw-blocks .wp-block-media-text__media img { border-radius: 0; margin: 0; }

/* Inside a dark or green band the content half needs the band's own colours,
   not the page default it would otherwise inherit through the block wrapper. */
.mw-blocks .is-style-mw-section-dark .wp-block-media-text { background: rgba(255, 255, 255, .04); }
.mw-blocks .is-style-mw-section-green .wp-block-media-text { background: rgba(7, 24, 28, .06); }
.mw-blocks .is-style-mw-section-grey .wp-block-media-text,
.mw-blocks .is-style-mw-section-white .wp-block-media-text { background: #fff; box-shadow: var(--mw-shadow-sm); }

.mw-blocks .wp-block-image img { max-width: 100%; height: auto; border-radius: var(--mw-radius); }
.mw-blocks .wp-block-image.alignfull img { border-radius: 0; width: 100%; }
.mw-blocks .wp-block-column .wp-block-image { margin: 0; }

/* No max-width here: inside a contained group, core's layout rule caps the
   separator at the content width like any other block. `max-width: none` used
   to override that, so a line in a contained section ran out to the band's
   edges while the copy above and below it stayed narrow. Wide and Full width
   separators get their own widths from the alignment rules. */
.mw-blocks .wp-block-separator {
  border: 0; border-top: 1px solid var(--mw-line); width: 100%;
}
.mw-blocks .is-style-mw-section-dark .wp-block-separator { border-top-color: rgba(255, 255, 255, .14); }
/* A colour picked for the separator in the editor wins over the defaults. */
.mw-blocks .wp-block-separator.has-text-color { border-top-color: currentColor; }

.mw-blocks .wp-block-quote {
  padding: .4rem 0 .4rem 1.5rem; border-left: 3px solid var(--mw-accent);
  font-size: 1.15rem; font-style: italic;
}
.mw-blocks .is-style-mw-section-dark .wp-block-quote { color: #fff; }

/* Buttons row keeps the theme's pill gap. */
.mw-blocks .wp-block-buttons { gap: 12px; }

/* ================================================================ About page
   "Who We Are" is block content in the page editor. The chapters after it —
   Our History, What We Offer and the rest — come from the "Story chapters"
   tab (page-about.php), one row per chapter: number, label, heading, photo,
   text. THE WORDS ARE ROB'S; everything here is presentation. */

/* --- Who We Are ---------------------------------------------------------- */
.page-template-page-about .mw-blocks > .wp-block-group:has(> .wp-block-columns) h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem) !important;
  line-height: 1.02;
  margin-bottom: 36px;
}
.page-template-page-about .mw-blocks > .wp-block-group:has(> .wp-block-columns) .wp-block-column p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #cfdcd9;
}
.page-template-page-about .mw-blocks > .wp-block-group:has(> .wp-block-columns) .wp-block-columns { column-gap: 40px; }

/* --- Chapters ------------------------------------------------------------ */
.mw-chapters { padding-block: 88px; }
.mw-chapter { display: grid; gap: 32px; }
@media (min-width: 981px) {
  /* 5:7, copy capped at a comfortable ~64 characters a line. */
  .mw-chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  /* With a photo the left column is the taller one, so the copy centres
     against it rather than leaving a gap under the last paragraph. */
  .mw-chapter--photo { align-items: center; }
  .mw-chapter__body { max-width: 64ch; }
}
/* The full-width photo sits at the text width, not edge to edge, so it
   lines up with the chapters above and below it. */
.mw-chapter-band { max-width: calc(var(--wp--style--global--content-size, 1136px) + 44px); margin-inline: auto; padding-inline: 22px; }
.mw-chapter__rule { border: 0; border-top: 1px solid var(--mw-line); margin: 72px 0; }
.mw-section--dark .mw-chapter__rule { border-top-color: rgba(255, 255, 255, .14); }

/* The number: outlined, from the row's position in the admin list. */
.mw-chapter__num {
  display: block;
  font-family: 'Industry Black', sans-serif;
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--mw-accent-strong);
  margin-bottom: 20px;
}
.mw-section--dark .mw-chapter__num { -webkit-text-stroke-color: var(--mw-accent); }
.mw-chapter__head .mw-eyebrow { margin-bottom: .2rem; }
.mw-chapter__head h2 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); line-height: 1.04; margin: 0; }
.mw-section--dark .mw-chapter__head h2 { color: #fff; }

/* Photo with the offset brand-green block, as on Bobby V's and the quote. */
.mw-chapter__photo { margin: 32px 16px 16px 0; }
.mw-chapter__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--mw-radius);
  box-shadow: 16px 16px 0 var(--mw-accent);
}

/* Copy. The first paragraph is the chapter's point, so it leads. */
.mw-chapter__body { font-size: 1.08rem; line-height: 1.75; color: var(--mw-ink-2); }
.mw-chapter__body p { margin: 0 0 1.1em; }
.mw-chapter__body p:last-child { margin-bottom: 0; }
.mw-chapter__body p:first-child { font-size: 1.2rem; line-height: 1.6; color: var(--mw-ink); }
.mw-chapter__body a { color: var(--mw-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.mw-section--dark .mw-chapter__body { color: #b9cac7; }
.mw-section--dark .mw-chapter__body p:first-child { color: #fff; }
.mw-section--dark .mw-chapter__body a { color: var(--mw-accent); }

@media (max-width: 980px) {
  .mw-chapters { padding-block: 64px; }
  .mw-chapter__rule { margin: 52px 0; }
  .mw-chapter__photo { margin-bottom: 20px; }
  .mw-chapter__photo img { aspect-ratio: 16 / 9; }
}

/* --- Photo band ([mw_photo_band]) ----------------------------------------
   Full-bleed, a shallow strip rather than a tall picture: it is a pause
   between two bands of text, not a section of its own. Margins zeroed on both
   sides because .mw-blocks puts --mw-flow above every top-level child and only
   resets it between two section bands — so without this the band would sit in
   a strip of page background above and below. */
.mw-photo-band {
  height: clamp(220px, 28vw, 420px);
  background: var(--mw-surface-2) var(--mw-photo-band) center / cover no-repeat;
}
.mw-blocks > .mw-photo-band,
.mw-blocks > .mw-photo-band + * { margin-top: 0; }