/**
 * Main Screen CSS — State Street Brats child theme
 * (version of record lives in functions.php's wp_enqueue_style call)
 *
 * =======================================================================
 * PLACEMENT CONVENTION (2026-06-06) — where new rules go
 * =======================================================================
 * The file layers in this conceptual order. New work lands in the matching
 * layer; never mint a new top-level :root block (see the satellite-token
 * index inside the main :root below).
 *
 *   1. TOKENS        — main :root + satellite component-token blocks
 *   2. ELEMENTS      — bare-tag defaults (headings, p, img, forms/labels)
 *   3. PATTERNS      — reusable components, pattern-named (.section + its
 *                      archetypes, .card, .btn-box, .eyebrow, .info-grid,
 *                      .status-tile, .now-status, .package-card,
 *                      .ssb-form-box, .section__decor, .styled-header …)
 *   4. PAGE GLUE     — page-prefixed rules that LAYER ON a pattern base
 *                      (.grad-*, .wtb-*, .biz-gifting-*, .day-drink-* …).
 *                      One banner block per page family. Glue is thin:
 *                      surface paint, deliberate scale exceptions, layout
 *                      shims. If you're re-implementing head/title/intro/
 *                      grid boilerplate, use the pattern instead.
 *   5. OVERRIDES     — third-party (GF/WC/TapHunter) + motion +
 *                      prefers-reduced-motion passes
 *
 * Naming: pattern-first BEM-ish (`block__element--modifier`). Page-scoped
 * classes are legitimate ONLY as thin glue on a pattern base or for
 * genuinely brand-bound surfaces (.brathaus, .heritage, hero family —
 * heroes are deliberately OUTSIDE the .section system, see the SECTION
 * SYSTEM banner). "Patch rules" (a later same-specificity rule overriding
 * an earlier one, commented "override the rule above") are how duplicates
 * accumulate — fold them into the base rule when touching that area.
 *
 * The physical file order predates this convention and is cascade-load-
 * bearing — do NOT bulk re-sort. Relocate whole self-contained blocks only
 * when already touching them, and re-verify computed styles when you do.
 *
 * =======================================================================
 * TABLE OF CONTENTS — search the banner text (line numbers rot)
 * =======================================================================
 *  TOKENS/BASE   "CSS Variables" (main :root + satellite index) · headings
 *  FORMS         "Apple-style Fields" (+ GF/WC field overrides 1-8)
 *  NAV/CHROME    "Status tile" · ".now-status" · nav icon group · popover ·
 *                "Nav Hint" · mega-menu (+ "Order mega-menu")
 *  FOOTER        "Site Footer"
 *  LAYOUT        "Grid Utility System" · "Content Layout Grids" ·
 *                "Layout helpers" · "Section inner width modifier"
 *  COMPONENTS    "COMPONENT DESIGN SYSTEM" (Pill Button · Action Tile ·
 *                Card · Collection) · "Account shell" · "FBB ORDER-FLOW
 *                READOUT" · "Brat Reveal" · "Shop Category Filter"
 *  ★ SECTION SYSTEM  "SECTION SYSTEM — canonical stack-section primitives"
 *                + "SHARED UTILITIES — class generalization" (eyebrow,
 *                section__decor, butcher texture, edges/seams)
 *  PAGE GLUE     Specials · Bratmobile · "FRONT-PAGE 2026 REDESIGN" ·
 *                "LEGACY heritage band" · "FOOD / BAR MENU PAGES" ·
 *                "GRADUATION PAGE" · "Shared Phase-1 components"
 *                (package-card/faq/review home) · "Catering / Phase 3" ·
 *                "Press clips" · Watch/Events blocks (P5a-P5e) ·
 *                "Featured Event Panel" · "Calendar" · "SITE STATUS
 *                BANNER + TODAY PAGE" · "/jobs/" · "HISTORY PAGE" ·
 *                "MAY FEATURES" · "DAY DRINK HERO/PAGE" · /visit redesign ·
 *                /order · business-gifting · spotted-cow (wtb) · "PATIO PAGE"
 *  MOTION        "MOTION — gentle entrance + interaction"
 * =======================================================================
**/
 
/* Prevent layout shifts during transitions */
[data-barba="container"] {
    min-height: 50vh; /* Prevents collapse during swap */
}

/* Ensure images don't cause reflow */
img {
    height: auto;
    max-width: 100%;
}


/* CSS Variables */
:root {
  /* Colors: use the theme.json presets (--wp--preset--color--*) — the legacy
     --color-* namespace was removed 2026-06-06 (it had been commented out and
     undefined for months; all consumers were converged to the presets). */

  /* Fonts (sizes: use the theme.json presets --wp--preset--font-size--*) */
 --font-family-base: 'Averia Libre', sans-serif;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;

  /* Border radius: ALL radius tokens live in the theme.json bridge block
     (search "Border Radius — bridge"). Earlier duplicates here (--radius-sm 4px,
     --radius-md 0.6rem) were dead-by-override — the bridge block, being later
     in source at equal :root specificity, already won — and were removed
     2026-06-06 along with the never-consumed --radius-nav / --font-weight-light
     / --font-size-sm. */

  /* Section system — vertical rhythm and max-widths.
   * Consumed by .section and section
   * archetype modifiers (--split, --cards, --band, --fineprint, --form,
   * --faq, --status). See "SECTION SYSTEM" block below.
   *
   * NOTE: `--ssb-section-y-hero` was declared here in Pass 1 and removed in
   * Pass 1 patch — the hero family (see SECTION SYSTEM block-top comment)
   * is out of section-system scope and will declare its own token when
   * that work happens. Don't reintroduce here.
   */
  --ssb-section-y: clamp(2.5rem, 5vw, 4.5rem);
  --ssb-section-y-band: clamp(2rem, 4vw, 3.5rem);
  --ssb-section-y-fineprint: clamp(0.5rem, 1.5vw, 1rem);
  --ssb-section-x: clamp(1rem, 4vw, 2rem);
  --ssb-section-head-mb: clamp(2rem, 4vw, 3rem);
  --ssb-section-cta-mt: clamp(1.5rem, 3vw, 2.5rem);
  --ssb-section-max: 1200px;
  --ssb-section-max-wide: 1400px;
  --ssb-section-max-narrow: 900px;
  --ssb-section-max-faq: 760px;

  /* Brand surface tokens — GLOBAL DEFAULTS (Pass 1 patch, hoisted from the
   * surface-scoped block at ~:4927). These resolve site-wide so the section
   * system's surface modifiers (.section--cream/-tan/-ink/-red) work on
   * greenfield templates without needing an ancestor in the surface
   * allowlist. Values are the brand-design-system canonical hexes (see
   * project-support-material/brand-design-system.md).
   *
   * Page-scoped overrides (e.g. `.business-gifting { --ssb-tan: …; }` near
   * line ~14360) intentionally STILL win locally — they declare on a more
   * specific scope and override per-surface. The surface-scoped declaration
   * block at ~:4927 is also kept intact for legacy rendering parity.
   */
  --ssb-ink:        #0F0F0F;
  --ssb-ink-soft:   #1A1A1A;
  --ssb-cream:      #EFE2C7;
  --ssb-cream-soft: #F5E9CF;
  --ssb-tan:        #c2a488;
  /* Intentional 3rd tan — a warm/golden DEEP-tan accent for DARK ink grounds
     (brass/woodcut read on the menu, airing/watch rows, autumn feature-card).
     DO NOT converge to --wp--preset--color--primary-dark (#a38f79): that's the
     COOLER light-ground deep-tan with a different role (and a flagged contrast
     liability on light surfaces). Confirmed intentional in the 2026-06-11
     token-convergence pass (passes AA on ink: ~5.1:1 on #0F0F0F, ~4.6:1 on #1a1a1a). */
  --ssb-tan-deep:   #A88857;
  --ssb-red:        #d32f2f;
  --ssb-red-deep:   #A02523;
  /* Gold — HOISTED to the global cluster (May Features build). Previously only
     declared on the surface-scoped block (~:4978); promoting it here lets the
     front-page Feature edge + Day Drink hero use it without a surface ancestor.
     The surface-scoped copy is left intact for legacy parity. Pair with INK
     text only (gold chips/edges need ink, never cream). */
  --ssb-gold:       #E5C875;
  /* Seasonal green — NET-NEW for the St. Patrick's feature-card dressing.
     Used as a top-bar / tab accent on cream (AA-checked), not body text. */
  --ssb-seasonal-green: #3E6B43;
  /* Hairline rule tokens — re-derived from the canonical tan #c2a488 = (194,164,136)
     in the 2026-06-11 convergence (were the old #C9A877 = (201,168,119)). */
  --ssb-rule:       rgba(194, 164, 136, 0.35);

  /* Shared component tokens (Phase 1 catering components) ----------------
   * --hairline-ink   : ~10% black; subtle dividers on light surfaces.
   * --hairline-cream : ~14% cream; subtle dividers on dark/ink surfaces.
   * --surface-form-box : warm tan box for form wraps (`.ssb-form-box`).
   * --surface-card     : white card surface (`.package-card`, `.review-card`).
   * (`--radius-card` is already provided downstream from theme.json — see
   * the `:root` block near line ~2483 — so don't redefine it here.)
   */
  --hairline-ink: rgba(26, 26, 26, 0.10);
  --hairline-cream: rgba(254, 254, 254, 0.14);
  --surface-form-box: #fbf7f0;
  --surface-card: #ffffff;
  
  /* Navigation specific */
  --nav-height: 70px;
  --mobile-button-size: 70px;
  --mobile-bottom-spacing: 16px;
  --mobile-padding-bottom: 100px;
  
  /* Transitions */
  --transition-fast: 0.2s;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.3);
  
  /* Z-index scale (full stack, low→high; --z-section-nav: 998 is declared
     next to its component in the Section Navigation block) */
  --z-overlay: 999;
  --z-nav: 1000;
  --z-nav-buttons: 1001;
  --z-submenu: 1002;
  --z-submenu-header: 1003;

  /* Hook into Gutenberg 781 stack */
  --mobile: 781px;

  /* ── Satellite token groups (deliberately co-located with their component
     CSS — do NOT mint new top-level :root blocks; add here or to one of these):
     · Apple-style field tokens (--apple-*)          → "Apple-style Fields"
     · GF framework button API (--gf-ctrl-btn-*)     → just below that block
     · Styled-header sizing (--styled-header-*)      → "Styled Headers"
     · Section-nav (--section-nav-height, --z-…)     → "Section Navigation"
     · Radius scale (--radius-*)                     → "Border Radius — bridge"
     · Component light palette (--surface-*, --text-*) → "Component tokens"
     · Nav-hint accent (--nav-hint-*)                → "Tokens — RGB companion"
     · Watch/event panel set (--ssb-event-*, verbatim spec) → ".ssb-events token-override" */
}

.gform-theme.gform-theme--framework.gform_wrapper {
    --gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary);
    --gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary));
    --gf-ctrl-btn-color-primary: var(--wp--preset--color--white, #fff);
    --gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary);
}

/* Per-surface field hide for reused Gravity Forms (see `ssb_apply_inquiry_form_profile`
   in functions.php). The field still renders + submits — so its value and the
   form's own conditional-logic cascade keep working — it's just removed from view. */
.gform_wrapper .gfield.ssb-field-hidden {
    display: none !important;
}

/* Tom Select (GP Advanced Select, e.g. the Start/End Time selects on the event
   inquiry form) leaves the ORIGINAL <select> in the DOM tagged
   `.ts-hidden-accessible` for a11y. Our Apple-style `select` width rule overrides
   Tom Select's own clip-hide, so the native select stays full-width and forces
   horizontal page scroll (seen on /private-party desktop, ~1100px overflow).
   Re-apply the canonical visually-hidden clamp so it can't expand layout. */
.gform_wrapper select.ts-hidden-accessible,
select.tomselected.ts-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Datepicker (incl. GP Inline Datepicker) selected day: brand red, not the
   Orbital-default blue. The `.ui-datepicker` element ITSELF carries
   `.gform-theme--framework` and re-declares the GF default prop locally, so a
   wrapper-level override is shadowed — the prop must be set on the calendar
   element, with ≥ the framework theme's specificity. Covers popup + inline. */
.gform-theme--framework.ui-datepicker {
    --gf-ctrl-date-picker-cell-content-bg-color-selected: var(--ssb-red-deep);
    --gf-ctrl-date-picker-cell-content-color-selected: var(--wp--preset--color--text-white, #fefefe);
}

/* Inline datepicker (GP Inline Datepicker → `.gpld-inline-datepicker` wrapper
   holding a JS-injected `.ui-datepicker-inline`): fill the field width on
   mobile, capped at 400px. `!important` is deliberate and verified via CDP:
   GF's `.ginput_container_date` is a `display:flex` container and the jQuery-UI
   widget ships fixed sizing, so a plain `width:100%` resolves to ~250px on both
   the wrapper and the calendar. Forcing the fill lets the calendar table grow
   to match on its own (226px → full width). Scoped to this widget only. */
@media (max-width: 640px) {
    .gpld-inline-datepicker {
        width: 100% !important;
        max-width: 400px;
    }
    .gform-theme--framework.ui-datepicker-inline {
        width: 100% !important;
    }
}




/* ==========================================================
   Apple-style Fields (Global + Gravity Forms + WooCommerce)
   Inputs + Radios + Checkboxes + Labels
   Clean, minimal, “Apple design” vibe
   ========================================================== */

/* ---------------------------
   1) Design tokens
---------------------------- */
:root{
  /* Surface + text */
  --apple-field-bg: #ffffff;
  --apple-field-fg: #111827;
  --apple-field-placeholder: #6b7280;

  /* Lines + focus */
  --apple-field-border: rgba(17, 24, 39, 0.18);
  --apple-field-border-hover: rgba(17, 24, 39, 0.28);

  --apple-focus: var(--wp--preset--color--primary);
  --apple-focus-ring:  rgba(194, 164, 136, 0.35);

  /* Shape + sizing */
  --apple-radius: 12px;
  --apple-height: 44px;
  --apple-pad-x: 14px;
  --apple-pad-y: 10px;

  /* Type */
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --apple-font-size: 16px;       /* prevents iOS zoom */
  --apple-line-height: 1.25;

  /* Labels (bigger + crisp) */
  --apple-label-size: 15px;      /* larger than default */
  --apple-label-weight: 600;
  --apple-label-color: rgba(17, 24, 39, 0.92);

  /* Micro depth */
  --apple-shadow-rest: 0 1px 0 rgba(0,0,0,0.04);
  --apple-shadow-focus: 0 0 0 4px var(--apple-focus-ring);

  /* Validation */
  --apple-danger: rgba(255, 59, 48, 0.9);
  --apple-danger-ring: rgba(255, 59, 48, 0.16);

  --apple-success: rgba(52, 199, 89, 0.9);
  --apple-success-ring: rgba(52, 199, 89, 0.14);

  /* Controls */
  --apple-radio-size: 18px;
  --apple-check-size: 18px;
}

/* Dark mode removed 2026-05-24 — this was an OS-driven prefers-color-scheme
   scaffold (no toggle, never finished) that broke native dropdowns and Gravity
   Forms field contrast. The site renders in its finished light palette for all
   visitors; the light tokens above are the single source of truth. */

/* ==========================================================
   2) GLOBAL LABELS (site-wide)
   Keeps labels bigger + clean without wrecking layouts
   ========================================================== */
label, 
fieldset legend.gfield_label {
  font-family: var(--apple-font) !important;
  font-size: var(--apple-label-size);
  font-weight: var(--apple-label-weight);
  line-height: 1.2;
  color: var(--apple-label-color);
}

.ginput_container_fileupload .gform_drop_instructions {
  text-align: center !important;
}
/* ==========================================================
   3) GLOBAL INPUTS (site-wide)
   Applies to non-GF and non-WooCommerce too
   ========================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  min-height: var(--apple-height);

  font-family: var(--apple-font) !important;
  font-size: var(--apple-font-size);
  line-height: var(--apple-line-height);
  color: var(--apple-field-fg);

  background: var(--apple-field-bg);
  border: 1px solid var(--apple-field-border);
  border-radius: var(--apple-radius);

  padding: var(--apple-pad-y) var(--apple-pad-x);

  box-shadow: var(--apple-shadow-rest);
  outline: none;

  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

@media (hover:hover){
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="tel"]:hover,
  input[type="url"]:hover,
  input[type="search"]:hover,
  input[type="password"]:hover,
  input[type="number"]:hover,
  input[type="date"]:hover,
  input[type="time"]:hover,
  input[type="datetime-local"]:hover{
    border-color: var(--apple-field-border-hover);
  }
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus{
  border-color: var(--apple-focus);
  box-shadow: var(--apple-shadow-rest), var(--apple-shadow-focus);
}

input::placeholder{
  color: var(--apple-field-placeholder);
  opacity: 1;
}

input:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

input[readonly]{
  background: color-mix(in srgb, var(--apple-field-bg) 92%, #000 8%);
}

/* Autofill */
input:-webkit-autofill{
  -webkit-text-fill-color: var(--apple-field-fg);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px var(--apple-field-bg) inset, var(--apple-shadow-rest);
}

/* Optional: remove number spinners (keep if you like) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Utility validation classes (works anywhere) */
input.is-invalid{
  border-color: var(--apple-danger);
  box-shadow: var(--apple-shadow-rest), 0 0 0 4px var(--apple-danger-ring);
}

input.is-valid{
  border-color: var(--apple-success);
  box-shadow: var(--apple-shadow-rest), 0 0 0 4px var(--apple-success-ring);
}

/* ==========================================================
   4) GLOBAL RADIOS (site-wide)
   ========================================================== */
input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;

  width: var(--apple-radio-size);
  height: var(--apple-radio-size);
  border-radius: 999px;

  border: 1px solid var(--apple-field-border);
  background: var(--apple-field-bg);

  display: inline-grid;
  place-content: center;

  margin: 0;
  vertical-align: middle;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input[type="radio"]::before{
  content: "";
  width: calc(var(--apple-radio-size) * 0.44);
  height: calc(var(--apple-radio-size) * 0.44);
  border-radius: 999px;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--apple-focus);
}

input[type="radio"]:checked{
  border-color: var(--wp--preset--color--dark-default) !important;
}

input[type="radio"]:checked::before{
  transform: scale(1);
}

input[type="radio"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--apple-focus-ring);
}

input[type="radio"]:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================
   5) GLOBAL CHECKBOXES (site-wide)
   Apple-ish, minimal, consistent with radios
   ========================================================== */
input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;

  width: var(--apple-check-size);
  height: var(--apple-check-size);
  border-radius: 6px;

  border: 1px solid var(--apple-field-border);
  background: var(--apple-field-bg);

  display: inline-grid;
  place-content: center;

  margin: 0;
  vertical-align: middle;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input[type="checkbox"]::before{
  content: "";
  width: calc(var(--apple-check-size) * 0.50);
  height: calc(var(--apple-check-size) * 0.50);
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--apple-focus);
  border-radius: 3px;
}

input[type="checkbox"]:checked{
  border-color: var(--wp--preset--color--primary);
}

input[type="checkbox"]:checked::before{
  transform: scale(1);
  color: var(--wp--preset--color--dark-default);
}

input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--apple-focus-ring);
}

input[type="checkbox"]:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================
   6) GRAVITY FORMS OVERRIDES (theme-agnostic)
   Strong specificity + !important where needed
   ========================================================== */

/* Bigger labels inside Gravity Forms */

body .gform_wrapper.gform-theme--framework fieldset legend.gfield_label,
body .gform_wrapper.gform-theme--framework .gfield > label.gfield_label
 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--apple-label-color) !important;
}


body .gform_wrapper.gform-theme--framework fieldset legend.gfield_label .gfield_required,
body .gform_wrapper.gform-theme--framework .gfield > label.gfield_label .gfield_required {
font-size: 16px !important;
  
}

body .gform_wrapper.gform-theme--framework .form-field-label--type-sub {
  font-size: 14px !important;
}

/* Inputs inside Gravity Forms */
body .gform_wrapper input[type="text"],
body .gform_wrapper textarea,
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="search"],
body .gform_wrapper input[type="password"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="date"],
body .gform_wrapper input[type="time"],
body .gform_wrapper input[type="datetime-local"],
body .gform-theme input[type="text"],
body .gform-theme input[type="email"],
body .gform-theme input[type="tel"],
body .gform-theme input[type="url"],
body .gform-theme input[type="search"],
body .gform-theme input[type="password"],
body .gform-theme input[type="number"],
body .gform-theme input[type="date"],
body .gform-theme input[type="time"],
body .gform-theme input[type="datetime-local"],
body .gform-theme select,
body .gform_wrapper.gform-theme--framework  input[type="text"],
body .gform_wrapper.gform-theme--framework  input[type="email"],
body .gform_wrapper.gform-theme--framework  input[type="tel"],
body .gform_wrapper.gform-theme--framework  input[type="url"],
body .gform_wrapper.gform-theme--framework  input[type="search"],
body .gform_wrapper.gform-theme--framework  input[type="password"],
body .gform_wrapper.gform-theme--framework  input[type="number"],
body .gform_wrapper.gform-theme--framework  input[type="date"],
body .gform_wrapper.gform-theme--framework  input[type="time"],
body .gform_wrapper.gform-theme--framework  input[type="datetime-local"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: var(--apple-height) !important;

  font-family: var(--apple-font) !important !important;
  font-size: var(--apple-font-size) !important;
  line-height: var(--apple-line-height) !important;
  color: var(--apple-field-fg) !important;

  background: var(--apple-field-bg) !important;
  border: 1px solid var(--apple-field-border) !important;
  border-radius: var(--apple-radius) !important;

  padding: var(--apple-pad-y) var(--apple-pad-x) !important;

  box-shadow: var(--apple-shadow-rest) !important;
  outline: none !important;

  background-image: none !important;

  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}


body .gform_wrapper.gform-theme--framework  .gfield_description {
  font-family: var(--apple-font) !important;
  font-size: var(--apple-font-size) !important;
}


/* GF focus */
body .gform_wrapper input:focus,
body .gform-theme input:focus,
body .gform_wrapper.gform-theme--framework  input:focus{
  border-color: var(--apple-focus) !important;
  box-shadow: var(--apple-shadow-rest), var(--apple-shadow-focus) !important;
  outline: none !important;
}

/* GF radios */
body .gform_wrapper .gfield_radio,
body .gform-theme .gfield_radio{
  display: grid;
  gap: 10px;
}


body .gform_wrapper .gfield_radio label {
  margin-left: 0 !important;
}

body .gform_wrapper .gfield_radio input:hover,
body .gform_wrapper .gfield_radio label:hover,
body .gform_wrapper .gfield_checkbox input:hover,
body .gform_wrapper .gfield_checkbox label:hover {
  cursor: pointer !important;
}

body .gform_wrapper .gfield_radio .gchoice,
body .gform-theme .gfield_radio .gchoice{
  display: flex;
  align-items: center;
  gap: 10px;
}

body .gform_wrapper input[type="radio"],
body .gform-theme input[type="radio"]{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: var(--apple-radio-size) !important;
  height: var(--apple-radio-size) !important;
  border-radius: 999px !important;

  border: 1px solid var(--apple-field-border) !important;
  background: var(--apple-field-bg) !important;

  display: inline-grid !important;
  place-content: center !important;

  margin: 0 !important;
  vertical-align: middle !important;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  outline: none !important;
}




body .gform_wrapper input[type="radio"]::before,
body .gform-theme input[type="radio"]::before{
  content: "" !important;
  width: calc(var(--apple-radio-size) * 0.44) !important;
  height: calc(var(--apple-radio-size) * 0.44) !important;
  border-radius: 999px !important;
  transform: scale(0) !important;
  transition: transform .12s ease !important;
  background: var(--wp--preset--color--dark-default) !important;
}

body .gform_wrapper input[type="radio"]:checked::before,
body .gform-theme input[type="radio"]:checked::before{
  transform: scale(1) !important;
}

body .gform_wrapper input[type="radio"]:focus,
body .gform-theme input[type="radio"]:focus{
  box-shadow: 0 0 0 4px var(--apple-focus-ring) !important;
}

/* GF error state */
body .gform_wrapper .gfield_error input{
  border-color: var(--apple-danger) !important;
  box-shadow: var(--apple-shadow-rest), 0 0 0 4px var(--apple-danger-ring) !important;
}



body .gform_wrapper.gform-theme--framework .ginput_complex input + label,
body .gform_wrapper.gform-theme--framework .ginput_complex .gform-grid-col {
  margin-bottom: calc(var(--apple-height) * 0.4);
  margin-top: 0;
}


body .gform_wrapper.gform-theme--framework input[type="submit"] {
  background-color: var(--wp--preset--color--dark-default) !important;
  color: var(--wp--preset--color--text-white, #fefefe) !important;
  font-size: var(--apple-font-size) !important;
  padding: 11px 21px !important;
  font-family: var(--apple-font) !important;
  border-radius: 980px !important;
}




/*
Gravity Wiz
*/

body .gform_wrapper.gform-theme--framework .ginput_container_phone .iti--show-flags input[type="tel"] {
  padding-left: 52px !important;
}

/* ==========================================================
   7) WOOCOMMERCE OVERRIDES (login/register/checkout/account)
   Targets your markup and Woo's class conventions
   ========================================================== */

/* Bigger labels inside Woo forms */
body .woocommerce form label,
body .woocommerce-page form label,
body form.woocommerce-form label{
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: var(--apple-font) !important !important;
  color: var(--apple-label-color) !important;
  line-height: 1.2 !important;
}

/* Inputs in Woo (your example uses .woocommerce-Input + .input-text) */
body .woocommerce input.woocommerce-Input,
body .woocommerce input.input-text,
body .woocommerce-page input.woocommerce-Input,
body .woocommerce-page input.input-text,
body form.woocommerce-form input.woocommerce-Input,
body form.woocommerce-form input.input-text{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 100% !important;
  min-height: var(--apple-height) !important;

  font-family: var(--apple-font) !important !important;
  font-size: var(--apple-font-size) !important;
  line-height: var(--apple-line-height) !important;
  color: var(--apple-field-fg) !important;

  background: var(--apple-field-bg) !important;
  border: 1px solid var(--apple-field-border) !important;
  border-radius: var(--apple-radius) !important;

  padding: var(--apple-pad-y) var(--apple-pad-x) !important;

  box-shadow: var(--apple-shadow-rest) !important;
  outline: none !important;

  background-image: none !important;

  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

/* Woo focus */
body .woocommerce input.woocommerce-Input:focus,
body .woocommerce input.input-text:focus,
body .woocommerce-page input.woocommerce-Input:focus,
body .woocommerce-page input.input-text:focus,
body form.woocommerce-form input.woocommerce-Input:focus,
body form.woocommerce-form input.input-text:focus{
  border-color: var(--apple-focus) !important;
  box-shadow: var(--apple-shadow-rest), var(--apple-shadow-focus) !important;
}

/* Woo checkbox (Remember me) */
body .woocommerce input.woocommerce-form__input-checkbox,
body form.woocommerce-form input.woocommerce-form__input-checkbox{
  appearance: none !important;
  -webkit-appearance: none !important;

  width: var(--apple-check-size) !important;
  height: var(--apple-check-size) !important;
  border-radius: 6px !important;

  border: 1px solid var(--apple-field-border) !important;
  background: var(--apple-field-bg) !important;

  display: inline-grid !important;
  place-content: center !important;

  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;

  box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  outline: none !important;
}

body .woocommerce input.woocommerce-form__input-checkbox::before,
body form.woocommerce-form input.woocommerce-form__input-checkbox::before{
  content: "" !important;
  width: calc(var(--apple-check-size) * 0.50) !important;
  height: calc(var(--apple-check-size) * 0.50) !important;
  transform: scale(0) !important;
  transition: transform .12s ease !important;
  background: var(--apple-focus) !important;
  border-radius: 3px !important;
}

body .woocommerce input.woocommerce-form__input-checkbox:checked::before,
body form.woocommerce-form input.woocommerce-form__input-checkbox:checked::before{
  transform: scale(1) !important;
}

body .woocommerce input.woocommerce-form__input-checkbox:focus,
body form.woocommerce-form input.woocommerce-form__input-checkbox:focus{
  box-shadow: 0 0 0 4px var(--apple-focus-ring) !important;
}

/* Keep the Woo password "show" button from looking weird next to the clean field */
body .woocommerce .password-input{
  position: relative;
  display: block;
}

body .woocommerce .password-input .show-password-input{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

body .woocommerce .password-input .show-password-input:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--apple-focus-ring);
}

/* ── Order confirmation / "thank you" (order-received endpoint) ─────────────
   A contained cream receipt centered on the gray page — restrained, hairline-
   driven, one Bowlby "moment" on the order number, no colored bands. The
   container rule wraps BOTH the normal thank-you AND the gated "log in to view"
   state (WC renders both inside .woocommerce). Templates:
   woocommerce/checkout/{thankyou,order-received}.php + order/order-details*.php.
   ────────────────────────────────────────────────────────────────────────── */
body.woocommerce-order-received .woocommerce {
  max-width: 760px;
  margin-inline: auto;
  background: var(--ssb-cream);
  color: var(--ssb-ink);
  border-radius: var(--radius-card, 16px);
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

/* Vertical rhythm: hairline-separated blocks, never nested boxes. */
.order-confirmation > * + * {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
  border-top: 1px solid var(--hairline-ink);
}

/* Header (eyebrow + H1 success line + reassurance subline) */
.order-confirmation__header { text-align: center; }
.order-confirmation__title {
  margin: 0;
  font-family: 'Averia Libre', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2rem);
  line-height: 1.1;
  color: var(--ssb-ink);
}
.order-confirmation__subline {
  margin: var(--spacing-sm) 0 0;
  font-family: 'Averia Libre', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: color-mix(in srgb, var(--ssb-ink) 85%, transparent);
}

/* Order-number "moment" — the one Bowlby beat, with a red validation stub. */
.order-confirmation__overview { text-align: center; }
.order-confirmation__order-eyebrow {
  margin: 0;
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ssb-ink) 60%, transparent);
}
.order-confirmation__order-number {
  display: inline-block;
  margin: var(--spacing-xs) 0 0;
  padding-left: 0.75rem;
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.25rem);
  line-height: 1;
  color: var(--ssb-ink);
  box-shadow: -0.4rem 0 0 var(--ssb-red-deep);
}

/* Overview facts — key/value grid, total emphasized. */
.order-confirmation__facts {
  margin: var(--spacing-xl) auto 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--spacing-2xl);
  row-gap: var(--spacing-md);
  text-align: left;
  max-width: 28rem;
}
.order-confirmation__fact { display: contents; }
.order-confirmation__facts dt {
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ssb-ink) 60%, transparent);
  align-self: baseline;
}
.order-confirmation__facts dd {
  margin: 0;
  font-family: 'Averia Libre', Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ssb-ink);
  font-variant-numeric: tabular-nums;
}
.order-confirmation__fact--total dd { font-size: 1.25rem; }

/* ── Receipt table (shared with my-account view-order — styled globally) ──── */
body.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-view-order .woocommerce-order-details__title {
  margin: 0 0 var(--spacing-lg);
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ssb-ink) 60%, transparent);
}
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: 'Averia Libre', Georgia, serif;
}
.woocommerce-table--order-details thead th {
  padding: var(--spacing-md) 0;
  border: 0;
  border-bottom: 1.5px solid var(--hairline-ink);
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ssb-ink) 60%, transparent);
  text-align: left;
  background: none;
}
.woocommerce-table--order-details thead th.product-total { text-align: right; }
.woocommerce-table--order-details tbody td {
  padding: var(--spacing-md) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-ink);
  font-size: 1rem;
  color: var(--ssb-ink);
  background: none;
  vertical-align: top;
}
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details tfoot td { text-align: right; }
.woocommerce-table--order-details .product-quantity {
  font-weight: 400;
  color: color-mix(in srgb, var(--ssb-ink) 55%, transparent);
}
.woocommerce-table--order-details td.product-name a {
  color: var(--ssb-ink);
  text-decoration: none;
}
.woocommerce-table--order-details td.product-name a:hover { text-decoration: underline; }
.woocommerce-table--order-details .woocommerce-Price-amount,
.order-confirmation__facts dd .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
/* Foot rows (subtotal / shipping / payment / total) */
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
  padding: var(--spacing-sm) 0;
  border: 0;
  font-size: 1rem;
}
.woocommerce-table--order-details tfoot th {
  font-family: 'Averia Libre', Georgia, serif;
  font-weight: 400;
  text-align: left;
  color: color-mix(in srgb, var(--ssb-ink) 70%, transparent);
}
/* The bottom-line total — the receipt's one ink rule + emphasis. */
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  padding-top: var(--spacing-md);
  border-top: 1.5px solid var(--ssb-ink);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ssb-ink);
}
/* The "Actions" / order-action buttons row inside the table foot → quiet link. */
.woocommerce-table--order-details .order-actions-button {
  display: inline-block;
  margin: 0 0 0 var(--spacing-sm);
  color: var(--ssb-red-deep);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
}

/* ── Customer / address details (shared with view-order — styled globally) ── */
.woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
}
.woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 var(--spacing-sm);
  font-family: 'Bowlby One SC', 'Bowlby One', Impact, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ssb-ink) 60%, transparent);
}
.woocommerce-customer-details address {
  font-family: 'Averia Libre', Georgia, serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ssb-ink);
  border: 0;
  padding: 0;
}
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
  margin: var(--spacing-xs) 0 0;
  color: color-mix(in srgb, var(--ssb-ink) 75%, transparent);
}

/* ── Next-step CTA row ─────────────────────────────────────────────────────── */
.order-confirmation__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

/* ── Gated "log in to view this order" state ───────────────────────────────── */
/* Strip WC's yellow info-box chrome → a calm hairline-bounded line. */
body.woocommerce-order-received .woocommerce-info {
  margin: var(--spacing-3xl) 0 var(--spacing-xl);
  padding: var(--spacing-3xl) 0 0;
  border: 0;
  border-top: 1px solid var(--hairline-ink);
  background: none;
  color: color-mix(in srgb, var(--ssb-ink) 85%, transparent);
  font-family: 'Averia Libre', Georgia, serif;
  font-size: 1rem;
  text-align: center;
}
body.woocommerce-order-received .woocommerce-info::before { display: none; }
body.woocommerce-order-received form.woocommerce-form-login {
  max-width: 28rem;
  margin: var(--spacing-xl) auto 0;
  padding: var(--spacing-xl);
  border: 1px solid var(--hairline-ink);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--ssb-cream) 70%, #fff);
}
body.woocommerce-order-received form.woocommerce-form-login .button {
  background: var(--ssb-ink) !important;
  color: var(--ssb-cream) !important;
  border-radius: var(--radius-md, 8px) !important;
}

/* ── Mobile (≤781px) — stack the grids; reflow the receipt table ──────────── */
@media (max-width: 781px) {
  .order-confirmation__facts {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-lg);
  }
  .order-confirmation__fact { display: block; }
  .order-confirmation__facts dt { margin-bottom: var(--spacing-xs); }
  .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  /* Receipt rows: name left, amount right (no cramped 2-col table). */
  .woocommerce-table--order-details thead { display: none; }
  .woocommerce-table--order-details tbody tr,
  .woocommerce-table--order-details tfoot tr { display: flex; justify-content: space-between; gap: var(--spacing-md); }
  .woocommerce-table--order-details tbody td,
  .woocommerce-table--order-details tfoot th,
  .woocommerce-table--order-details tfoot td { border-bottom: 0; }
  .woocommerce-table--order-details tbody tr { border-bottom: 1px solid var(--hairline-ink); }
  .order-confirmation__cta .btn-box { width: 100%; }
}

/* ==========================================================
   8) OPTIONAL: Gravity Forms Orbital framework primary color
   Example of your selector pattern, but using Apple blue
   ========================================================== */
body:has(#gravity_forms_theme_framework-css) .gform-theme--framework{
  --gf-color-primary: var(--apple-focus);
}






.bowlby-one-sc-regular,
.bowlby {
  font-family: "Bowlby One SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.unifrakturcook-bold {
  font-family: "UnifrakturCook", cursive;
  font-weight: 700;
  font-style: normal;
}

.averia-libre-light {
  font-family: "Averia Libre", system-ui;
  font-weight: 300;
  font-style: normal;
}

.averia-libre-regular {
  font-family: "Averia Libre", system-ui;
  font-weight: 400;
  font-style: normal;
}

.averia-libre-bold {
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
}

.averia-libre-light-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 300;
  font-style: italic;
}

.averia-libre-regular-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 400;
  font-style: italic;
}

.averia-libre-bold-italic {
  font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: italic;
}

.responsive-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    grid-auto-rows: auto; /* Rows size to content */
    align-items: start; /* Align items to top of their cells */
    gap: 2rem;
}
/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  line-height: 1.6;
  color: var(--wp--preset--color--dark-default);
  font-size: clamp(18px, 2vw, 22px);
  background: #f3f3f3;
}

@media (orientation: landscape), (min-width: 768px) {
  .site-header {
    position: relative;
    top: 0;
    /* Sits above page content — incl. the 404 game iframe, which previously
       trapped the open mega-menu beneath it (sticky z-index:2 stacking context). */
    z-index: var(--z-nav);
    position: sticky;

  }
}
.site-header, 
.site-footer,
.bg-dark,
.dark-section {
  background: var(--wp--preset--color--dark-default);
  color: var(--wp--preset--color--text-white);
}

.bg-light, 
.light-section {
    background-color: var(--wp--preset--color--text-white);
    color: var(--wp--preset--color--dark-default);
}


body.home main {
  overflow-x: hidden;

/*  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;*/
}
.main-content-wrapper {
 padding: 1rem;
}
 
.main-content-wrapper .alignfull  {
  margin-left: -1rem;
  margin-right: -1rem;
}
 
/* Heading scale — CONSOLIDATED 2026-06-06. Two stacked blocks used to define
   h1–h3 (an older preset-based block + a later fluid type-scale that overrode
   only font-size). Values below are the effective interleave that rendered:
   the later fluid font-sizes WITH the older block's larger line-heights
   (line-height > font-size = the extra heading leading the site ships with). */
h1,
.display-h1 {
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  font-size: clamp(3rem, 8vw, 4rem);
  line-height: clamp(3rem, 8vw, 4rem);
}

h2,
.display-h2 {
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  font-size: clamp(2.40rem, 6.40vw, 3.20rem);
  line-height: clamp(2.8rem, 6vw, var(--wp--preset--font-size--x-large));
}

h3,
.display-h3 {
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  font-size: clamp(1.92rem, 5.12vw, 2.56rem);
  line-height: clamp(2.2rem, 4vw, var(--wp--preset--font-size--large));
}
h4,
.display-h4 { font-size: clamp(1.54rem, 4.10vw, 2.05rem); }
h5,
.display-h5 { font-size: clamp(1.23rem, 3.28vw, 1.64rem); }



/* ==========================================================================
   Styled Headers
   Two-line decorative header treatment with responsive scaling.
   Used by fbb_render_header() in inc/template-functions.php
   ========================================================================== */

:root {
    /* Styled header sizing — scales from mobile to desktop */
    --styled-header-line1-size: clamp(3.2rem, 8vw, 5rem);
    --styled-header-line2-size: clamp(1.75rem, 6vw, 3rem);
    --styled-header-line2-indent: clamp(1.4rem, 4vw, 2.5rem);
    --styled-header-line-height: 1;
}

/* Container — removes default heading margins when styled */
.styled-header {
    line-height: var(--styled-header-line-height);
}

/* Shared line styles */
.styled-header__line {
    display: inline-block;
}

/* Line 1: Script font (Imperial Script) */
.styled-header__line--script {
    font-family: "Imperial Script", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: var(--styled-header-line1-size);
}

/* Line 2: Bold serif (Gabriela), uppercase, indented */
.styled-header__line--bold {
    font-family: "Gabriela", serif;
    font-weight: 900;
    font-style: normal;
    font-size: var(--styled-header-line2-size);
    text-transform: uppercase;
    padding-left: var(--styled-header-line2-indent);
}

.has-text-align-center .styled-header__line {
  padding-left: 0;
}

/* Kraft-bg sections (.has-primary-background-color = #c2a488) need the
   script line darkened — its default --primary-dark (#a38f79) sits at
   ~1.1:1 against kraft and is effectively invisible. Charcoal hits a
   readable contrast and matches the bold line's tone. */
.has-primary-background-color .styled-header__line--script {
    color: var(--wp--preset--color--bg-darker);
}




p {
  margin-bottom: var(--spacing-lg);
}

/* Base navigation styles */
.has-dark-background-color {
  background: var(--wp--preset--color--dark-default);
  color: var(--wp--preset--color--text-white, #fefefe);
}

nav ul {
  list-style: none;
}


nav ul li.active > a {
  color: var(--wp--preset--color--primary);
/*  text-decoration: underline;*/
}

nav a {
  color: var(--wp--preset--color--text-white, #fefefe);
  text-decoration: none;
  display: block;
}

/* .btn / .btn-secondary — mega-menu text CTAs (nav-main.php). Their legacy
   background/hover fills referenced undefined --color-* tokens, so they have
   always rendered transparent; the fills were removed rather than "fixed". */
.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  text-decoration: none;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
}

/* Mega menu structure */
.mega-menu {
  background: var(--wp--preset--color--dark-default);
}

.mega-column {
  /* Ensure columns are visible and positioned correctly */
  display: block;
  position: relative;
}

/* Mega-menu column titles. Were <h2>s until 2026-06-11, demoted to non-heading
   .mega-column__title elements so the nav's ~15 panel labels stop polluting
   every page's document heading outline (the page <h1> should lead). margin-top
   + line-height are pinned to the values the <h2> inherited from the global
   heading reset (16px / 1.4) so the visual is pixel-identical. */
.mega-column__title {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: var(--font-weight-semibold);
  margin-top: 1rem;
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--primary);
}

.mega-column ul li {
  margin-bottom: var(--spacing-sm);
}

.mega-column a {
  padding: var(--spacing-xs) 0;
  transition: color var(--transition-fast);
}

.mega-column a:hover {
  color: var(--wp--preset--color--primary);
}

.mega-feature p {
  margin: var(--spacing-lg) 0;
  line-height: 1.5;
  color: var(--wp--preset--color--text-white, #fefefe); /* dark mega-menu ground */
}

.mega-feature img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: var(--spacing-lg) 0;
}

.mega-ctas {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

/* ==========================================================================
   Status tile — generic "what's true right now" block (icon + label + detail).
   Surface-agnostic; inherits color from context. Used in the mega-menu feature
   columns (mirrors the front-page .info-grid atmosphere cards) and reusable in
   any dark panel/popover. Label/detail selectors carry the .status-tile prefix
   so they out-specify `.mega-feature p` (0,1,1) for margin + color.
   ========================================================================== */
.status-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}
.status-tile__icon {
  width: 32px;
  height: 32px;
  color: var(--wp--preset--color--primary); /* tan, via SVG currentColor */
}
.status-tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.status-tile .status-tile__label {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;            /* 18px — above the 16px mobile floor */
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit; /* surface-agnostic per the contract above; beats .mega-feature p */
}
.status-tile .status-tile__detail {
  margin: 0;
  font-family: "Averia Libre", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;                /* 16px floor — held */
  line-height: 1.45;
  color: inherit; /* surface-agnostic per the contract above; beats .mega-feature p */
  max-width: 34ch;
}
/* Live specials nav tile uses the canonical `.game-row__live` "On now" lozenge
   (same badge as the menu specials + status grid). It's an inline-flex pill, so
   in the .status-tile flex column it must not stretch full-width. */
.status-tile--live .game-row__live {
  align-self: flex-start;
}
/* Compact crest lockup — replaces the TV glyph in the mega-menu feature tile
   when both team logos are synced. Small away ◄ @ ► home. */
.status-tile__lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Scoped under .status-tile__lockup (0,2,0) to out-specify the broad
   `.mega-feature img` rule (0,1,1) that would otherwise stretch these crests to
   100% and add list-image margin/radius. */
.status-tile__lockup .status-tile__logo {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  flex: 0 0 auto;
}
.status-tile__at {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--wp--preset--color--primary); /* tan — matches the icon tint */
}
/* Matchup title links to its game page; keep the label's type, just make it a
   tappable link (inherits the white label color). */
.status-tile__label .status-tile__matchup-link {
  color: inherit;
  text-decoration: none;
}
.status-tile__label .status-tile__matchup-link:hover,
.status-tile__label .status-tile__matchup-link:focus-visible {
  text-decoration: underline;
}
/* "Full schedule" text link below the detail line. Tap target ≥44px via
   inline-flex + min-height; negative margins keep the visual rhythm. */
.status-tile__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: -8px;
  margin-bottom: -8px;
  font-family: "Averia Libre", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--primary); /* tan on the dark mega panel */
  text-decoration: none;
}
.status-tile__more:hover,
.status-tile__more:focus-visible { text-decoration: underline; }
@keyframes status-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}

/* ── .now-status — open/closed live-status pill (shared component) ─────────
   Dot + word + optional detail on a state ground. Extracted 2026-06-06 from
   the page-scoped .visit-status__now--pill (shipped on /visit + /order; the
   pre-redesign non-pill base layer was dead-by-override and deleted).
   Open = "go" deep red with pulsing dot; closed = solid ink, STATIC dot
   (red would lie when we're shut). The closed ground is SOLID ink (was a
   translucent rgba(15,15,15,.55) that blended to ~3.95:1 against light heros,
   failing AA — fixed 2026-06-11). Solid ink keeps cream text at ~14:1 on any
   backdrop and mirrors the open state's solid ground. */
.now-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-family: 'Averia Libre', serif;
    font-size: 14px;            /* tracked label — floor exempt */
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.now-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.now-status__word,
.now-status__detail {
    font-size: 14px;
    line-height: 1;
}
.now-status__detail { opacity: 0.85; }
/* Open: deep-red ground, white text, pulsing white dot. */
.now-status--open {
    background: var(--ssb-red-deep);
    color: #fff;
}
.now-status--open .now-status__dot {
    background: #fff;
    animation: status-pulse 1.6s ease-in-out infinite;
}
/* Closed: solid ink ground, cream text, static dot. Solid (not translucent)
   so cream text clears AA on every backdrop — see component note above. */
.now-status--closed {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
}
.now-status--closed .now-status__dot {
    background: var(--ssb-cream);
    opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
    .now-status--open .now-status__dot { animation: none; }
}

/* Mobile-first: drill-down navigation */
@media (max-width: 850px) {
  /* Mobile button container */
  .mobile-nav-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
   position: fixed;
    bottom: var(--mobile-bottom-spacing);
   left: 0;
    right: 0;
    z-index: var(--z-nav-buttons);
/*    pointer-events: none; /* Allow clicks to pass through container */
  }
  .mobile-nav-buttons button {
    /*pointer-events: auto;  Re-enable clicks on buttons */
  }
  /* Toggle button */
  .nav-toggle {
    padding: 0.875rem 1.75rem;
    background: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fefefe);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--wp--preset--font-size--large);
    box-shadow: var(--shadow-lg);
    min-width: 100px;
    
    /* Make circle*/
    width: var(--mobile-button-size);
    min-width: var(--mobile-button-size);
    height: var(--mobile-button-size);
    text-align: center;
    padding: 0;
  }
  
  /* Start off-screen — GSAP animates up on load. No-JS fallback shows it normally. */
  html.js-enabled .nav-toggle {
    transform: translateY(100px);
    opacity: 0;
  }
  
  /* Back button - next to menu button */
  .nav-back-main {
    display: none;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--dark-default);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: var(--shadow-lg);
    
    /* Half the diameter of --mobile-button-size (70px) */
    width: calc(var(--mobile-button-size) * 0.5);
    height: calc(var(--mobile-button-size) * 0.5);
    min-width: calc(var(--mobile-button-size) * 0.5);
    padding: 0;
    
    /* Center the icon */
    justify-content: center;
    align-items: center;

    position: absolute;
    opacity: 0;
    transform: translateX(0);
    pointer-events: none;
  }
  
  .nav-back-main.is-visible {
    pointer-events: auto;
  }
  
  .nav-back-main::before {
    content: '\f053'; /* fa-chevron-left */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.875rem;
  }
  
  /* Show back button when any submenu is active */
  nav:has(.has-submenu.is-active) .mobile-nav-buttons .nav-back-main {
    display: flex;
  }
  
  /* Primary nav hidden by default on mobile (CSS handles initial hide to prevent FOUC) */
  .nav-primary {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wp--preset--color--dark-default);
    z-index: var(--z-overlay);
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-bottom: var(--mobile-padding-bottom);
  }
  
  /* Primary level items */
  .nav-primary > li {
    position: static;
  }
  
  .nav-primary > li > a {
    padding: var(--spacing-lg);
    font-size: var(--wp--preset--font-size--huge);
    font-weight: var(--font-weight-semibold);
    display: flex;
/*    justify-content: space-between;*/
justify-content: center;
    align-items: center;
    text-transform: uppercase;
  }
  
 
  
  /* Mega menu - always rendered but positioned off-screen */
  .mega-menu {
     position: fixed;
     top: 0 !important;
     left: 100%;
     right: -100%;
     bottom: 0;
     background: var(--wp--preset--color--dark-default);
     z-index: var(--z-submenu);
     overflow-y: auto;
     padding-top: 4rem; /* Space for the header link */
     padding-bottom: var(--mobile-padding-bottom);
/*     min-height: 100vh;*/
     height: auto;
     width: 100vw;
     pointer-events: none;
     visibility: hidden;
   }
  
  /* Show mega menu when parent is active - move to viewport */
  .has-submenu.is-active > .mega-menu {
    left: 0;
    right: 0;
    pointer-events: auto;
    visibility: visible;
    text-align: center;
  }



  
  /* Hide parent link when submenu is open - but keep the li visible for positioning */
  .has-submenu.is-active > a:not(.mega-menu-header) {
    visibility: hidden;
    height: 0;
    padding: 0;
    overflow: hidden;
  }
  
  /* Mega menu columns stack on mobile - ensure they're visible */
  .mega-column {
    padding: var(--spacing-xl) var(--spacing-2xl);
    
    display: block;
    width: 100%;
    min-height: 50px;
  }
  
  .mega-feature {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  /* The mobile mega-menu is centered (.has-submenu.is-active > .mega-menu sets
     text-align:center). Flex sub-blocks don't inherit that — text-align can't
     reach a flex item's cross-axis. Center them explicitly so the feature
     column (icon + label + detail) and its CTAs match the centered link lists
     instead of pinning to the left edge. Mobile only — desktop mega columns
     stay left-aligned. */
  .mega-menu .status-tile {
    align-items: center;
    text-align: center;
  }
  .mega-menu .status-tile__detail {
    margin-inline: auto;
  }
  /* The "Full schedule" link sets align-self:flex-start for the desktop column;
     reset it so the parent's mobile align-items:center centers it like the rest. */
  .mega-menu .status-tile__more {
    align-self: center;
  }
  /* Order hero copy is max-width-capped (36ch); without auto side margins the
     block pins left even though its text is centered. Center the block too.
     Needs the extra .mega-feature--order-hero class to out-specify the base
     `.mega-feature--order-hero .order-hero__detail { margin: 0 0 ... }` rule,
     which is declared later in the file and resets the inline margins. */
  .mega-menu .mega-feature--order-hero .order-hero__detail {
    margin-inline: auto;
  }
  .mega-menu .mega-ctas {
    justify-content: center;
  }

  /* No-JS fallback */
  html:not(.js-enabled) .mobile-nav-buttons {
    display: none;
  }
  
  html:not(.js-enabled) .nav-primary {
    display: block;
    position: static;
    padding-bottom: 20px;
  }
  
  html:not(.js-enabled) .mega-menu {
    position: static;
    left: auto;
    right: auto;
    padding: var(--spacing-lg);
    visibility: visible;
  }
  
  html:not(.js-enabled) .has-submenu.is-active > a {
    visibility: visible;
    height: auto;
    padding: var(--spacing-lg);
  }

  /* Mega menu header styling when link becomes header */
  /* Submenu header bar — fixed centered container for back arrow + title */
  .submenu-header-bar {
    position: fixed;
    top: var(--spacing-lg);
    left: 0;
    right: 0;
    z-index: var(--z-submenu-header);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    pointer-events: auto;
    height: auto;
    padding: 0.5rem 1rem;
  }
  
  .submenu-header-bar .inline-back-arrow {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    color: var(--wp--preset--color--text-white);
    cursor: pointer;
    flex-shrink: 0;
  }
  
  a.mega-menu-header {
    position: static !important;
    z-index: var(--z-submenu-header);
    visibility: visible !important;
    height: auto !important;
    display: inline !important;
    background: transparent;
    padding: 0 !important;
    font-size: var(--wp--preset--font-size--huge);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--wp--preset--color--text-white, #fefefe);
    cursor: pointer;
  }
  
  a.mega-menu-header::after {
    display: none;
  }
  
  /* Hide the parent li border when it's active */
  .has-submenu.is-active {
    border-bottom: none;
  }
}

/* Desktop: horizontal nav with hover mega menus */
@media screen and (min-width: 851px) {
  nav.primary {
/*    position: fixed;*/
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    box-shadow: var(--shadow-sm);
  }
  
  /* Hide mobile controls */
  .mobile-nav-buttons {
    display: none;
  }
  
  /* Horizontal primary nav */
  .nav-primary {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .nav-primary > li {
    position: static;
  }
  
  .nav-primary > li > a {
    padding: var(--spacing-xl) var(--spacing-2xl);
    font-weight: var(--font-weight-semibold);
    font-size: var(--wp--preset--font-size--medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition-fast);
  }
  
  .nav-primary > li > a:hover,
  .nav-primary > li > a:focus {
    background: var(--wp--preset--color--dark-default);
  }
  
  /* Mega menu positioning - full viewport width */
  .mega-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--nav-height);
    width: 100vw;
    padding: 0;
    box-shadow: var(--shadow-md);
    visibility: visible;
    background: var(--wp--preset--color--dark-default);
    /* Cap to the space below the sticky header and scroll internally. A tall
       feature column (e.g. the product image) used to overflow the viewport
       with no way to reach the bottom — the menu is anchored to the sticky
       header, so it neither scrolls with the page nor scrolled on its own. */
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }

  /* Logged-in editors: account for the 32px WP admin bar above the header. */
  .admin-bar .mega-menu {
    max-height: calc(100vh - var(--nav-height) - 32px);
  }

  /* Inner container for mega menu content */
  .mega-menu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3xl);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-2xl);
  }
  
  /* Mega column styling */
  .mega-column {
    padding: 0;
  }
  
  .mega-feature {
    /* No background fill — the legacy var(--color-bg-medium) here was undefined
       and always rendered transparent; declaration removed, transparent kept. */
    /* Top padding is --spacing-lg (16px) — the same inset the plain columns get
       from their h2's top margin — so the feature heading aligns with the other
       two columns. With the full --spacing-xl top padding it sat ~24px lower. */
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    border-radius: var(--radius-sm);
  }

  /* Kill the feature's first block's top margin: the global h2 top margin would
     otherwise stack on top of the card padding and push the content down out of
     line with columns 1 and 2. */
  .mega-feature > :first-child {
    margin-top: 0;
  }

  /* Adjust main content for fixed nav */
  /*main {
    padding-top: 100px;
  }*/

  .has-submenu > a[aria-haspopup="true"]::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free'; /* Adjust based on your FA version */
    font-weight: 900;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.875em;
    /* @todo: Add rotation animation when opening/closing */
  }
  
  /* Rotate caret when menu is open */
  .has-submenu.is-active > a[aria-haspopup="true"]::after {
    content: '\f077'; /* Font Awesome chevron-up */
  }
  
  /* Ensure link has flexbox for caret alignment */
  .has-submenu > a[aria-haspopup="true"] {
    display: flex;
    align-items: center;
  }
}


/* Circle overlay for menu animation */
.nav-circle-overlay {
  display: none;
  position: fixed;
  background-color: var(--wp--preset--color--dark-default);
  transform-origin: center center;
  pointer-events: none;
  z-index: var(--z-overlay);
  will-change: transform;
}

/* Ensure nav appears above overlay when open */
.nav-primary {
  position: relative;
  z-index: var(--z-nav);
}

/* Ensure button stays above everything */
.nav-toggle {
  position: relative;
  z-index: var(--z-nav-buttons);
}

/* (Removed) Legacy rule that pushed .mobile-nav-buttons up by
   --section-nav-height when the on-page section-nav lived at the
   bottom of menu pages. Section-nav is now top-anchored, so this
   rule was leaving the toggle floating above its baseline on any
   page that opted into body.has-section-nav (food / bar / catering
   menus). */




/**
Gutenberg
**/
/* Block alignments */



/* External link indicator for Gutenberg buttons */
a.wp-block-button__link[href^="http"]::after,
a.wp-block-button__link[href^="//"]::after,
footer a[href^="//"]::after,
footer a[href^="http"]::after {
    content: "↗";
    margin-left: 0.35em;
    font-size: 70%;
    vertical-align: middle;
    display: inline-block;
}

/* Hide arrow for internal links */
a.wp-block-button__link[href*="statestbrats.com"]::after,
a.wp-block-button__link[href*="localhost:"]::after,
a.wp-block-button__link[href^="/"]::after,
a.wp-block-button__link[href^="#"]::after,
footer a.wp-block-button__link[href*="statestbrats.com"]::after,
footer a[href*="localhost:"]::after,
footer a.wp-block-button__link[href^="/"]::after,
footer a.wp-block-button__link[href^="#"]::after {
    content: none;
}


.wp-block-button__link {
  font-size: 16px;
  font-family: sans-serif;
}


:not(.card__media) .wp-block-image,
:not(.alignfull) > .wp-block-media-text__media,
.woocommerce-product-gallery__image, 
.woocommerce-loop-product__link img {
  border-radius: var(--wp--custom--border-radius--card);
  overflow: hidden;
}




@media(max-width: 780px ) {
  .is-style-reverse-mobile {
    flex-direction: column-reverse;   
  }
}


/* ==========================================================================
   Site Footer (.site-footer) — second design pass
   --------------------------------------------------------------------------
   Editorial Visit panel as the singular moment. Index columns recede.
   Mobile-first; desktop layout activates at 850px.

   Type pairing:
     - Bowlby One SC   → tracked uppercase eyebrows / labels (0.18em)
     - Averia Libre    → information (address, hours, phone, links, body)
     - Imperial Script → ONE moment per surface: heritage closer line

   Color rhythm (verified against theme.json):
     - Ground: --bg-darker  (#1a1a1a) — dark warm room
     - Warmth: --primary    (#c2a488) — italic locality, heritage line
     - Accent: --accent     (#d32f2f) — link hover, heritage underline, CTAs
     - Body:   --text-white (#fefefe) — primary information
     - Quiet:  --text-light (#cccccc) — secondary, fineprint
   ========================================================================== */

.site-footer {
    position: relative;
    background: var(--wp--preset--color--bg-darker, #1a1a1a);
    color: var(--wp--preset--color--text-white, #fefefe);
    padding: 0 0 var(--spacing-lg);
    /* margin-top:0 — the footer's own torn-paper top edge (has-torn-edge-top)
       is the universal seam between content and footer. A spacing-3xl margin
       here stacked with the last section's bottom padding to create a large
       dead band above the footer; the torn edge already provides the break. */
    margin-top: 0;
    /* Torn butcher-paper seam into the dark footer room. Kraft tan reads as a
       sheet of paper torn at its bottom, the dark footer showing through the
       rips. Replaces the old one-off ssb_organic_shape() wobble line; brings
       the footer into the same edge-texture system the rest of the page uses.
       Site-wide default of kraft tan matches the most common page-ending tone
       (and the tan section above the footer on the front page). */
    --prev-edge-color: var(--wp--preset--color--primary, #c2a488);
}

/* WooCommerce surfaces (shop archive, product categories/tags, single product,
   cart, checkout, my-account) don't paint a colored closing section — they end
   on the bare body background (#f3f3f3, see `body{}` at line ~926). The footer's
   site-wide kraft-tan rip default therefore leaves a tan band floating above the
   torn seam. Tear from the same gray on these pages so the seam reads as the
   page itself ripping into the dark footer. A future woo page that DOES close on
   a colored section can override --prev-edge-color on its own surface. */
body.woocommerce-page .site-footer {
    --prev-edge-color: #f3f3f3;
}

/* Suppress the legacy footer external-link "↗" rule (the
   `footer a[href^="http"]::after` block above). That rule renders a unicode
   arrow that iOS/macOS substitute with emoji glyphs. The new footer doesn't
   use decorative ::after content on links; target=_blank links carry
   accessibility info via sr-only text / aria-label instead.
   `footer.site-footer` (not bare `.site-footer`): the legacy selector's
   attribute part gives it (0,1,2) specificity, which silently BEAT the old
   (0,1,1) suppression — arrows leaked onto every external footer link.
   Matching at (0,1,2) later in the file wins the tie. */
footer.site-footer a::after,
footer.site-footer a::before {
    content: none;
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* Hairline rules between zones — quiet, not architectural. */
.site-footer__rule {
    border: 0;
    border-top: 1px solid rgba(254, 254, 254, 0.08);
    margin: 0;
    width: 100%;
}

/* Tracked uppercase eyebrow — used by Visit, Hours, link cols, and Newsletter. */
.site-footer__eyebrow,
.site-footer__col-heading {
    margin: 0 0 var(--spacing-sm);
    font-family: 'Bowlby One SC', sans-serif;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-light, #cccccc);
}

.site-footer__col-heading {
    color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Visit panel — the editorial moment.
   Address is the largest type on the surface. Italic locality in tan
   carries warmth without shouting. Hours block stacks below on mobile,
   moves to right sidebar on desktop. Bull SVG sits behind on desktop only.
   ========================================================================== */

.site-footer__visit {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-block: var(--spacing-lg) var(--spacing-xl);
}

.site-footer__visit-bull {
    /* Hidden on mobile; absolute on desktop (see media query). */
    display: none;
}

.site-footer__visit-primary,
.site-footer__hours {
    position: relative;
    z-index: 1;
}

/* Address — the moment. Huge on desktop, fluid down to x-large on mobile. */
.site-footer__address {
    font-style: normal;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    color: var(--wp--preset--color--text-white, #fefefe);
}

.site-footer__address-line {
    display: block;
}

/* Locality (Madison, Wisconsin) — italic warmth in tan. The voice shift is the design. */
.site-footer__address-line--locality {
    font-weight: 400;
    font-style: italic;
    color: var(--wp--preset--color--primary);
}

.site-footer__phone {
    margin: var(--spacing-md) 0 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 1.2;
}

.site-footer__phone a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--transition-fast);
}

.site-footer__phone a:hover,
.site-footer__phone a:focus-visible {
    border-bottom-color: var(--wp--preset--color--accent, #d32f2f);
}

.site-footer__directions {
    margin: var(--spacing-lg) 0 0;
}

/* Hours <dl> — scannable, tabular alignment for time numerals. */
.hours-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

.hours-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    align-items: baseline;
}

.hours-list__label {
    margin: 0;
    min-width: 5rem;
    font-family: 'Bowlby One SC', sans-serif;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wp--preset--color--text-light, #cccccc);
}

.hours-list__value {
    margin: 0;
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* ==========================================================================
   Index columns — recede behind the Visit panel.
   Mobile: inline middot lists for visual variety against stacked address.
   Desktop: 3-column tidy stack.
   ========================================================================== */

.site-footer__index-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.site-footer__index-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.site-footer__index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.7;
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* Mobile: inline middot list (defaults). */
.site-footer__index-item {
    display: inline;
}

.site-footer__index-item + .site-footer__index-item::before {
    content: "·";
    color: var(--wp--preset--color--text-light, #cccccc);
    margin: 0 0.45em;
}

.site-footer__index-list a {
    color: var(--wp--preset--color--text-white, #fefefe);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer__index-list a:hover,
.site-footer__index-list a:focus-visible {
    color: var(--wp--preset--color--accent, #d32f2f);
}

/* ==========================================================================
   Newsletter band — compact, breathing, not loud.
   ========================================================================== */

.site-footer__newsletter-band {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.site-footer__newsletter-pitch {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--text-light, #cccccc);
}

.site-footer__newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: var(--spacing-xs) 0 0;
}

.site-footer__newsletter-form input[type="email"] {
    flex: 1 1 220px;
    padding: 0.75rem 1rem;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--dark-default);
    background: var(--wp--preset--color--text-white, #fefefe);
    border: 2px solid transparent;
    border-radius: 100px;
    line-height: 1.2;
}

.site-footer__newsletter-form input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--wp--preset--color--accent, #d32f2f);
}

.site-footer__newsletter-microcopy {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: var(--wp--preset--font-size--tiny);
    color: var(--wp--preset--color--text-light, #cccccc);
}

/* --------------------------------------------------------------------------
   Footer newsletter — Gravity Form 14 ("Public: Subscribe") embed.
   The email field + submit button inherit the SITE-WIDE GF "Apple field"
   treatment (white 12px field, dark pill submit — see the "Apple-style Fields"
   block above), so this block only does footer-specific LAYOUT: email + submit
   on one inline row, label sr-only, the optional Interests/Tags (Mailchimp)
   fields hidden, and the GF footer's default top gap zeroed so the button sits
   level with the field. Success renders an inline confirmation in place of the
   form AND fires the iOS top banner (gform_confirmation_14 in
   inc/gravityforms.php). The `.gform_footer` rule carries a `body … .gform_wrapper`
   qualifier to out-specify GF's framework footer-gap rule — don't reduce it.
   -------------------------------------------------------------------------- */
.site-footer__newsletter-gf {
    margin: var(--spacing-xs) 0 0;
}

.site-footer__newsletter-gf .gform_wrapper {
    margin: 0;
}

/* Email + submit on one row (the lone visible field once checkboxes hide). */
.site-footer__newsletter-gf form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

.site-footer__newsletter-gf .gform-body,
.site-footer__newsletter-gf .gform_body {
    flex: 1 1 220px;
    margin: 0;
}

.site-footer__newsletter-gf .gform_fields {
    display: block;          /* one field — no need for GF's 12-col grid */
    grid-template-columns: none;
    gap: 0;
}

.site-footer__newsletter-gf .gfield {
    margin: 0;
    padding: 0;
}

/* Hide the optional Interests / Tags fields (Mailchimp groups) in the footer.
   :has() covers older GF markup that lacks the --type-checkbox modifier. */
.site-footer__newsletter-gf .gfield--type-checkbox,
.site-footer__newsletter-gf .gfield:has(.gfield_checkbox) {
    display: none !important;
}

/* Label present for AT, visually hidden — the pitch + placeholder carry it. */
.site-footer__newsletter-gf .gfield_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.site-footer__newsletter-gf .ginput_container {
    margin: 0;
}

/* Zero GF's framework footer top-gap so the submit sits level with the field
   (the row is align-items:center). body … .gform_wrapper out-specifies GF. */
body .site-footer__newsletter-gf .gform_wrapper .gform_footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

/* Validation / AJAX spinner on the dark ground. */
.site-footer__newsletter-gf .gform_validation_errors,
.site-footer__newsletter-gf .validation_message {
    flex: 1 1 100%;
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--wp--preset--color--accent, #d32f2f);
    font-size: var(--wp--preset--font-size--tiny);
}

/* Hide GF's default validation-summary box site-wide — errors surface as the
   iOS top banner + the red field-level messages instead (see
   gf_ios_validation_notification() and the per-form banner scripts). MUST be
   display:none, not opacity/height:0 — a zero-height-but-painted box lets any
   custom summary content (e.g. .fbb-invite-validation's reason list) overflow
   and sit invisibly ON TOP of the fields below it, swallowing clicks so the
   field can't be edited. display:none removes it from hit-testing entirely. */
.gform_wrapper .gform_validation_errors {
  display: none !important;
}

.site-footer__newsletter-gf .gform_ajax_spinner {
    margin-left: var(--spacing-xs);
}

/* Inline confirmation shown in place of the form on success (gform_confirmation_14).
   Light text on the dark footer ground; the iOS top banner fires alongside it. */
.site-footer__newsletter-gf .gform_confirmation_message,
.site-footer__newsletter-confirmation {
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--text-light, #cccccc);
}

.site-footer__newsletter-confirmation strong {
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* ==========================================================================
   Buttons — outlined ghost (directions) + solid accent (subscribe).
   Restraint: red appears here as a deliberate stop, not a wash.
   ========================================================================== */

.site-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.75rem 1.5rem;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    line-height: 1;
    color: var(--wp--preset--color--text-white, #fefefe);
    background: transparent;
    border: 2px solid var(--wp--preset--color--accent, #d32f2f);
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.site-footer__btn:hover,
.site-footer__btn:focus-visible {
    background: var(--wp--preset--color--accent, #d32f2f);
    color: var(--wp--preset--color--text-white, #fefefe);
}

.site-footer__btn--solid {
    background: var(--wp--preset--color--accent, #d32f2f);
}

.site-footer__btn--solid:hover,
.site-footer__btn--solid:focus-visible {
    background: var(--wp--preset--color--primary-dark, #a38f79);
    border-color: var(--wp--preset--color--primary-dark, #a38f79);
}

/* ==========================================================================
   Signature row — drape mark + Imperial Script heritage line.
   This is the closing emotional beat. ONE moment of script, ever.
   ========================================================================== */

.site-footer__signature {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding-block: var(--spacing-md);
}

.site-footer__signature-mark svg,
.site-footer__signature-mark img {
    height: 98px;
    width: auto;
    display: block;

}

.site-footer__signature-mark svg .st0 {
  fill: var(--wp--preset--color--primary) !important;
}

.site-footer__heritage {
    margin: 0;
    display: inline-block;
    font-family: 'Imperial Script', cursive;
    font-size: var(--wp--preset--font-size--x-large);
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--wp--preset--color--primary);
    /* Hairline accent under the script. Static for now; can be animated via
       DrawSVG (300ms, CustomEase) when GSAP enters scope for this surface. */
/*    border-bottom: 1px solid var(--wp--preset--color--accent, #d32f2f);*/
    padding-bottom: 6px;
}

/* ==========================================================================
   Legal microbar — minimum-viable fineprint.
   ========================================================================== */

.site-footer__legal {
  align-items: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(254, 254, 254, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--tiny);
    line-height: 1.6;
    color: var(--wp--preset--color--text-light, #cccccc);
}

.site-footer__copyright {
    margin: 0;
}

.legal-microbar__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    flex-wrap: wrap;
    gap: 0;
    text-align: center;
}

.legal-microbar__links li {
    display: inline-flex;
    align-items: center;
}

.legal-microbar__links li + li::before {
    content: "·";
    margin: 0 0.6em;
    color: rgba(254, 254, 254, 0.35);
}

.legal-microbar__links a {
    color: var(--wp--preset--color--text-light, #cccccc);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.legal-microbar__links a:hover,
.legal-microbar__links a:focus-visible {
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* Studio credit — quietest line in the legal microbar. The link is mid-sentence
   ("Site by ___, Madison"), so unlike the list links it carries a subtle
   underline for discoverability; brightens to white on hover/focus. */
.site-footer__credit {
    margin: 0;
    color: var(--wp--preset--color--text-light, #cccccc);
    margin-bottom: calc( var(--mobile-button-size) + 1rem);
    font-size: 10px;
    text-align: center;
    opacity: 0.5;
}

@media screen and (min-width:850px) {
    .site-footer__credit {
      text-align: left;
      margin-bottom:0;
  }
}

.site-footer__credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(254, 254, 254, 0.28);
    transition: color var(--transition-fast), border-color var(--transition-fast);

}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
    color: var(--wp--preset--color--text-white, #fefefe);
    border-color: var(--wp--preset--color--text-white, #fefefe);
}


/* Universal focus visibility on dark background */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 3px;
}

/* Social links — generic reusable base (footer is the first consumer).
   Quiet utility row: monochrome glyphs at rest (never platform brand colors),
   red only on hover/focus — same idiom as the index links. 44px targets. */
.social-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
}

.social-links__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    color: var(--wp--preset--color--text-white, #fefefe);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.social-links__link:hover,
.social-links__link:focus-visible {
    color: var(--wp--preset--color--accent, #d32f2f);
}

.social-links__icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* ==========================================================================
   Desktop ≥ 850px
   - Visit becomes a side-by-side editorial spread (primary | hours sidebar)
   - Bull SVG appears behind, top-right, opacity 0.08
   - Index columns: 3 stacked columns (no longer inline middot)
   - Newsletter: pitch left, form right
   - Signature row: drape + heritage inline; right third intentionally empty
   - Legal: copyright left, links right, single line
   ========================================================================== */

@media (min-width: 850px) {
    .site-footer__inner {
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
        gap: var(--spacing-3xl);
    }

    .site-footer__visit {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: var(--spacing-3xl);
        align-items: start;
        padding-block: var(--spacing-2xl) var(--spacing-3xl);
    }

    .site-footer__visit-bull {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 280px;
        height: 280px;
        opacity: 0.08;
        pointer-events: none;
        z-index: 0;
        /* Background image (cached) instead of inline SVG (per-page 1.6MB).
           Matches existing .bull-bg pattern at screen.css:3225. */
        background-image: url('../svg/brats-bull.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top right;
    }

    /* Address bigger on desktop — earns its editorial moment. */
    .site-footer__address {
        font-size: var(--wp--preset--font-size--huge);
        line-height: 0.95;
    }

    .site-footer__phone {
        font-size: var(--wp--preset--font-size--x-large);
    }

    /* Index: 3 columns, vertical stack (no inline middot at this width). */
    .site-footer__index-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        line-height: 1.9;
    }

    .site-footer__index-item {
        display: block;
    }

    .site-footer__index-item + .site-footer__index-item::before {
        content: none;
    }

    .site-footer__index-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-2xl);
    }

    /* Newsletter: pitch+heading on left, form+microcopy on right. */
    .site-footer__newsletter-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        column-gap: var(--spacing-2xl);
        align-items: end;
        row-gap: var(--spacing-xs);
    }

    .site-footer__newsletter-band > .site-footer__col-heading,
    .site-footer__newsletter-band > .site-footer__newsletter-pitch {
        grid-column: 1;
    }

    .site-footer__newsletter-band > .site-footer__newsletter-form,
    .site-footer__newsletter-band > .site-footer__newsletter-microcopy {
        grid-column: 2;
    }

    /* Signature: drape + heritage inline; intentional empty right third. */
    .site-footer__signature {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
        padding-block: var(--spacing-xl);
    }

    .site-footer__heritage {
        font-size: var(--wp--preset--font-size--huge);
    }

    /* Legal: single line, copyright left, links pushed right. */
    .site-footer__legal {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .site-footer__copyright {
        flex: 0 0 auto;
        margin-right: auto;
    }

    .legal-microbar__links {
        flex: 0 0 auto;
    }
}


/**
MISC TEXT UTILITY CLASSES 
**/
.center-text {
  text-align: center;
}

.hide {
  display: none;
}

/* Screen reader only — visually hidden, accessible to AT */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}






/* ==========================================================================
   Grid Utility System
   Mobile-first, progressive enhancement
   Container query support for nested grids
   ========================================================================== */

/* Base grid container */
.grid {
    display: grid;
    gap: var(--grid-gap, var(--spacing-xl));
}


/* Container query context */
.grid-container {
    container-type: inline-size;
}

/* Column variants - mobile first (two columns default) */
.cq-grid-cols-2,
.cq-grid-cols-3,
.cq-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   Viewport-based breakpoints (for outer containers)
   ========================================================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Container query breakpoints (for nested grids)
   Use these inside a .grid-container parent
   ========================================================================== */

@container (min-width: 400px) {
    .cq-grid-cols-2,
    .cq-grid-cols-3,
    .cq-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 600px) {
    .cq-grid-cols-3,
    .cq-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (min-width: 800px) {
    .cq-grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Span utilities */
.col-span-full {
    grid-column: 1 / -1;
}

/* Gap variants */
.grid-gap-xs { --grid-gap: var(--spacing-xs); }
.grid-gap-sm { --grid-gap: var(--spacing-sm); }
.grid-gap-md { --grid-gap: var(--spacing-md); }
.grid-gap-lg { --grid-gap: var(--spacing-lg); }
.grid-gap-xl { --grid-gap: var(--spacing-xl); }
.grid-gap-2xl { --grid-gap: var(--spacing-2xl); }
.grid-gap-3xl { --grid-gap: var(--spacing-3xl); }



/* ==========================================================================
   Content Layout Grids
   Asymmetric column patterns for template use.
   Stacks at 781px var(--mobile) to match Gutenberg column behavior.
   
   Add to style.css after existing Grid Utility System section.
   
   Usage:
   <div class="grid grid-cols-2-1">
     <div>Main content (66%)</div>
     <div>Sidebar (33%)</div>
   </div>
   
   <div class="grid grid-cols-1-2">
     <div>Sidebar (33%)</div>
     <div>Main content (66%)</div>
   </div>
   ========================================================================== */

/* Stack by default (mobile-first) */
.grid-cols-2-1,
.grid-cols-1-2 {
    grid-template-columns: 1fr;
}

@media (min-width: 781px ) {
    .grid-cols-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
}

/* Align sidebar content to top when grid is side-by-side */
.grid-cols-2-1,
.grid-cols-1-2 {
    align-items: start;
}




/**
 * Misc. Need to reflow
 * 
 * */ 

 main ul {
  margin-left: 1rem;
 }

@media screen and (max-width:768px) {
  .hide-on-mobile {
    display: none;
  }
}




 /* ==========================================================================
   Section Navigation
   Horizontal scrolling on-page anchor nav with scroll-spy
   Reusable via [data-section-nav]
   ========================================================================== */

:root {
    --section-nav-height: 48px;
    --z-section-nav: 998;
}

.section-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    /* Use the dedicated token (998 — sits just below --z-nav at 1000 so the
       main site nav still wins). The prior `z-index: 1` tied this rail
       with anything else on the page that took z=1 (e.g. .menu-section__hero
       which needs z=1 to sit above the chapter decor SVG) and lost the
       source-order tiebreak — hero photos painted OVER the sticky nav on
       scroll. The token always existed; restoring it. */
    z-index: var(--z-section-nav);
    height: var(--section-nav-height);
    margin: 0.5rem 0;
}

/* Offset the sticky rail by the WP admin bar height for logged-in admins
   (the inline-edit pencil audience this template supports). Without this
   the rail slides under the admin bar. WP uses a 32px bar above 782px and
   46px at/below 782px — match those exactly. */
body.admin-bar .section-nav {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .section-nav {
        top: 46px;
    }
}


.section-nav__indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 5px;
    border-radius: 100px;
    display: block;
    background: var(--wp--preset--color--primary);
    pointer-events: none;
    will-change: transform;
    /* Start hidden until JS positions it */
    width: 0;
    opacity: 0;
}

.section-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    position: relative;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    gap: 0.5rem;
}

.section-nav__list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.section-nav__item {
    flex: 0 0 auto;
}

.section-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--spacing-lg);
    white-space: nowrap;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color var(--transition-fast), box-shadow var(--transition-fast);
    border-bottom: 2px solid transparent; /* keep space consistent */
    background: var(--wp--preset--color--dark-default);
    border-radius: 90px;
}

.section-nav__link:hover,
.section-nav__link:focus-visible {
    color: var(--wp--preset--color--text-white);
}

.section-nav__link.is-active {
    color: var(--wp--preset--color--text-white);
        border-bottom-color: transparent;
}

/* Desktop: position below sticky header. --nav-height is defined at the
   top of this stylesheet (~line 64). */
@media (orientation: landscape), (min-width: 768px) {
    .section-nav {
        top: calc( var(--nav-height) + 0.2rem );
    }
    /* Stack admin-bar height on top of the nav-height offset for admins. */
    body.admin-bar .section-nav {
        top: calc( var(--nav-height) + 0.2rem + 32px );
    }
}

/* Push page content below both header + section nav on desktop */
@media (orientation: landscape), (min-width: 768px) {
    body.has-section-nav main {
        /* Only if needed — depending on your header setup */
    }
}

/* Fade edges to hint at scrollability */
.section-nav::before,
.section-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.section-nav::before {
    left: 0;
    background: linear-gradient(to right, var(--wp--preset--color--dark-default), transparent);
}

.section-nav::after {
    right: 0;
    background: linear-gradient(to left, var(--wp--preset--color--dark-default), transparent);
}

/* Show edge fades when scrollable — toggled via JS or :has() if desired */
.section-nav.is-scrollable-left::before,
.section-nav.is-scrollable-right::after {
    opacity: 1;
}



/* Add space at the top when section nav fixed top */
body.has-section-nav .main-content-wrapper {
/*  padding-top: calc( var(--section-nav-height) - 2px) !important;*/
  /*margin-top: 3rem !important;
  padding-top: 3rem !important;*/
}





/**
 * Misc positioning helper classes
 * 
 * */
 @media screen and (max-width: 768px) {
  .fixed-to-bottom--on-mobile {
    position: fixed;
    bottom: 0;
    top: unset;
  }
 } 






/**
SVG Management System
**/
.wp-block-ssb-emblem {
  margin: auto;
}
 .ssb-emblem--legendary { max-width: 400px; }
 .ssb-emblem--over-70-years  { max-width: 240px; }





/**
 * These are business specific and used to make sure photos of these two food products are always life-sized / to scale
 **/
.life-size-red-brat,
.life-size-white-brat {
  min-width: 620px;
  width: 620px;
}












/* ==========================================================================
   COMPONENT DESIGN SYSTEM
   Action Tiles, Cards, Collections, Pill Buttons
   
   Dependencies: theme.json custom border-radius values
   Markup contracts documented per component below.
   ========================================================================== */


/* ==========================================================================
   Border Radius — bridge theme.json custom props to legacy vars
   WordPress generates: --wp--custom--border-radius--{sm|md|lg|card}
   We alias them here so existing code and new components can share.
   SINGLE HOME for radius tokens (2026-06-06): the duplicate --radius-sm/--md
   that used to sit in the main :root header were dead-by-override and removed;
   --radius-full moved here so the whole scale reads in one place.
   ========================================================================== */

:root {
    --radius-sm:   var(--wp--custom--border-radius--sm);   /* 4px  */
    --radius-md:   var(--wp--custom--border-radius--md);   /* 8px  */
    --radius-lg:   var(--wp--custom--border-radius--lg);   /* 12px */
    --radius-card: var(--wp--custom--border-radius--card); /* 16px */
    --radius-full: 50px;   /* pill — buttons, lozenges */
    --radius-huge: 980px;  /* Apple-style max-pill (GF submits) */
}


/* ==========================================================================
   Component tokens — light palette (single source of truth)
   Dark mode was removed 2026-05-24 (no toggle, never finished, broke native
   dropdowns + Gravity Forms contrast). Do NOT reintroduce a
   prefers-color-scheme: dark override here without a designed dark palette.
   ========================================================================== */

:root {
    /* UI font stack — platform-native system font for components */
    --font-family-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Surface colors */
    --surface-primary:    #fff;
    --surface-secondary:  #f5f5f5;
    --surface-inset:      #f0f0f0;

    /* Text on light surfaces */
    --text-primary:       var(--wp--preset--color--dark-default);
    --text-secondary:     #666;
    --text-tertiary:      #999;

    /* Borders & dividers */
    --border-subtle:      rgba(0, 0, 0, 0.08);
    --border-default:     rgba(0, 0, 0, 0.12);

    /* Component sizing */
    --component-max-width: 430px;  /* iPhone 15 Pro Max viewport */
}

/* Dark mode scaffold removed 2026-05-24 — see note in the Apple-fields section;
   the light tokens above are the single source of truth. */



/* ==========================================================================
   Pill Button
   Small rounded button for compact actions.
   
   Markup:
   <button class="btn-pill">Open</button>
   <button class="btn-pill btn-pill--icon"><i class="fas fa-chevron-right"></i></button>
   <a href="#" class="btn-pill">Get</a>
   ========================================================================== */

.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.375rem 0.875rem;
    min-height: 28px;
    font-size: 0.8125rem;           /* 13px */
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-ui);
    line-height: 1;
/*    color: var(--wp--preset--color--primary);*/
color: inherit;
    background: var(--surface-secondary);
    border: none;
    border-radius: 100px;           /* Full pill */
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
    flex-shrink: 0;
}

.btn-pill:hover,
.btn-pill:focus-visible {
    background: var(--border-default);
    color: var(--wp--preset--color--primary-dark);
}

/* Icon-only variant — square pill */
.btn-pill--icon {
    padding: 0;
    width: 28px;
    height: 28px;
    min-height: unset;
    font-size: 0.75rem;
}

/* Filled/accent variant */
.btn-pill--accent {
    background: var(--wp--preset--color--primary);
    color: var(--surface-primary);
}

.btn-pill--accent:hover,
.btn-pill--accent:focus-visible {
    background: var(--wp--preset--color--primary-dark);
    color: var(--surface-primary);
}

/* Hero pill — large CTA-strength variant. Used on full-width section
   call-to-actions (e.g. "Book the Bratmobile") where the regular
   .btn-pill is visually too small. */
.btn-pill--hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 32px;
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text-white);
    border-radius: 100px;
    border: none;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}
.btn-pill--hero:hover,
.btn-pill--hero:focus-visible {
    background: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white);
    transform: translateY(-1px);
}
.btn-pill--hero:focus-visible {
    outline: 2px solid var(--wp--preset--color--dark-default);
    outline-offset: 3px;
}
.btn-pill--hero span[aria-hidden] {
    margin-left: var(--spacing-sm);
    transition: transform 150ms ease;
}
.btn-pill--hero:hover span[aria-hidden] {
    transform: translateX(4px);
}


/* ==========================================================================
   Action Tile
   Compact horizontal strip: icon/image · text · action button.
   Used standalone, inside collections, or docked to card bottoms.
   
   Markup:
   <div class="action-tile">
     <div class="action-tile__media">
       <img src="icon.png" alt="" width="48" height="48">
     </div>
     <div class="action-tile__body">
       <div class="action-tile__title">Headline</div>
       <div class="action-tile__desc">Description text here</div>
     </div>
     <div class="action-tile__action">
       <button class="btn-pill">Open</button>
     </div>
   </div>
   ========================================================================== */

.action-tile {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-primary);
    min-height: 60px;
    font-family: var(--font-family-ui);
    margin-bottom: var(--spacing-md);
}




/* Standalone tile gets its own radius */
.action-tile:not(.card__footer) {
    border-radius: var(--radius-card);
}

/* --- Media (left icon/image) --- */
.action-tile__media {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Font Awesome / SVG icon inside media container */
.action-tile__media .fa,
.action-tile__media .fas,
.action-tile__media .far,
.action-tile__media .fab,
.action-tile__media svg {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

/* --- Body (headline + description) --- */
.action-tile__body {
    flex: 1;
    min-width: 0;  /* Allow text truncation */
}

.action-tile__title {
    font-size: 0.9375rem;           /* 15px */
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
}

.action-tile__desc {
    font-size: 0.8125rem;           /* 13px */
    line-height: 1.3;
    color: var(--text-secondary);
    margin-top: 1px;
}

/* Truncation helpers — add to __title or __desc if needed */
.action-tile__title--truncate,
.action-tile__desc--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Action (right button/icon) --- */
.action-tile__action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* Lift above card's clickable overlay */
    position: relative;
    z-index: 1;
}


/**
 * Chip
 * 
 **/

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.375rem 0.875rem;
    min-height: 28px;
    font-size: 0.8125rem;           /* 13px */
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-ui);
    line-height: 1;
    color: var(--surface-secondary);
/*  color: inherit;*/
    background: var(--surface-primary);
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.chip-dark {
  background: var(--wp--preset--color--dark-default);
  color: var(--wp--preset--color--text-white)
}




/* ==========================================================================
   Card
   Clickable container with optional image, text body, and docked action tile.
   Uses pseudo-element stretch pattern for full-card clickability
   while allowing nested interactive elements.
   
   Markup (block-level <a>, whole card clickable):
   <a href="/link" class="card">
     <div class="card__media">
       <img src="photo.jpg" alt="">
     </div>
     <div class="card__body">
       <span class="card__eyebrow">Category</span>
       <h3 class="card__title">Headline here</h3>
       <p class="card__desc">Short description text.</p>
     </div>
     <!-- Optional docked action tile -->
     <div class="action-tile card__footer">...</div>
   </a>
   
   Non-link variant (card as container with .card__link):
   <div class="card">
     <div class="card__body">
       <a href="/primary" class="card__link card__title">Headline</a>
     </div>
   </div>
   
   Color-bleed variant (opt-in):
   <a href="/link" class="card card--bleed">...</a>
   
   Manual accent override:
   <a ... class="card card--bleed" data-card-accent="#2a5c6b">...</a>
   <a ... class="card card--bleed" style="--card-accent: #2a5c6b;">...</a>
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    font-family: var(--font-family-ui);
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-fast);
    max-width: var(--component-max-width);
    margin-bottom: var(--spacing-md);
}

.card.card--wide {
  max-width: var(--mobile);
}

/* Reset heading/paragraph margins inside cards */
.card__body h1,
.card__body h2,
.card__body h3,
.card__body h4,
.card__body h5,
.card__body h6,
.card__body p {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Full-card clickability via pseudo-element --- */

/* When card IS the <a> tag */
a.card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* When card is a <div> with a .card__link inside */
.card__link {
    text-decoration: none;
    color: inherit;
}

.card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Any nested interactive element rises above the overlay */
.card a:not(.card__link),
.card button,
.card .btn-pill,
.card input,
.card select {
    position: relative;
    z-index: 1;
}

/* Hover / focus states — elevate shadow */
.card:hover,
.card:focus-within {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1);
}

a.card:focus-visible,
.card:has(.card__link:focus-visible) {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* --- Card media (image) --- */
.card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Card body (text content) --- */
.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    flex: 1;

}

/* Eyebrow / category label */
.card__eyebrow {
    font-size: 0.6875rem;           /* 11px */
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--primary);
    line-height: 1;
}

/* Title */
.card__title {
    font-size: 1.0625rem;           /* 17px */
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
    font-family: var(--font-family-ui);
}

/* Description */
.card__desc {
    font-size: 0.875rem;            /* 14px */
    line-height: 1.4;
    color: var(--text-secondary);
}

/* --- Card footer (docked action tile) --- */
.card__footer {
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    margin-top: auto;   /* Push to bottom if card body is short */
}

/* Card without media — no image, text only */
.card--no-media .card__body {
    padding-top: var(--spacing-xl);
}


/* ==========================================================================
   Card — Color Bleed Variant (.card--bleed)
   
   Extracts a dominant dark color from the card image via JS and applies it
   as a seamless gradient from image → body → footer. Light text throughout.
   
   Color source priority (JS checks in order):
   1. Inline --card-accent custom property  (Gutenberg block output)
   2. data-card-accent attribute            (template / manual override)
   3. JS-extracted dominant color from card image (darkened if needed)
   
   JS sets --card-accent on .card element. All styling reads that var.
   ========================================================================== */

.card--bleed {
    /* Fallback accent until JS extracts or manual value is set */
    --card-accent: var(--wp--preset--color--dark-default);
    --card-accent-text: var(--wp--preset--color--text-white);
    --card-accent-text-secondary: rgba(255, 255, 255, 0.7);

    background: var(--card-accent);
    color: var(--card-accent-text);

    max-width: 100%;
}

/* --- Bleed: gradient overlay on image → seamless into body --- */
.card--bleed .card__media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--card-accent) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* --- Bleed: body sits above gradient --- */
.card--bleed .card__body {
    position: relative;
    z-index: 2;
}

.card--bleed .card__eyebrow {
    color: var(--card-accent-text-secondary);
}

.card--bleed .card__title {
    color: var(--card-accent-text);
}

.card--bleed .card__desc {
    color: var(--card-accent-text-secondary);
}

/* --- Bleed: docked action tile gets solid accent fill --- */
.card--bleed .card__footer {
    background: var(--card-accent);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.card--bleed .card__footer .action-tile__title {
    color: var(--card-accent-text);
}

.card--bleed .card__footer .action-tile__desc {
    color: var(--card-accent-text-secondary);
}

/* Pill button inside bleed card — frosted glass effect */
.card--bleed .btn-pill {
    background: rgba(255, 255, 255, 0.2);
    color: var(--card-accent-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card--bleed .btn-pill:hover,
.card--bleed .btn-pill:focus-visible {
    background: rgba(255, 255, 255, 0.35);
    color: var(--card-accent-text);
}

/* --- Bleed: accent-tinted shadow --- */
.card--bleed {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
         0 4px 16px color-mix(in srgb, var(--border-subtle) 25%, transparent);
/*        0 4px 16px color-mix(in srgb, var(--card-accent) 25%, transparent);*/
}

.card--bleed:hover,
.card--bleed:focus-within {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 8px 24px color-mix(in srgb, var(--border-subtle) 35%, transparent);
/*        0 8px 24px color-mix(in srgb, var(--card-accent) 35%, transparent);*/
}


/* ==========================================================================
   Collection
   Vertical stacked list of action tiles inside a card-like wrapper.
   iOS-style grouped list with optional header.
   
   Markup:
   <div class="collection">
     <div class="collection__header">
       <span class="collection__eyebrow">From the editors</span>
       <h2 class="collection__title">The Best Running Apps</h2>
     </div>
     <div class="collection__list">
       
       <div class="action-tile">
          <div class="action-tile__media">
            <img src="icon.png" alt="" width="48" height="48">
          </div>
          <div class="action-tile__body">
            <div class="action-tile__title">Headline</div>
            <div class="action-tile__desc">Description text here</div>
          </div>
          <div class="action-tile__action">
            <button class="btn-pill">Open</button>
          </div>
        </div>

     </div>
   </div>
   
   Modifier classes:
   .collection--no-dividers   — removes borders, spacing only
   .collection--inset         — inset dividers (don't touch edges)
   ========================================================================== */

.collection {
    background: var(--surface-primary);
    border-radius: var(--radius-card);
    overflow: hidden;
    max-width: var(--component-max-width);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: var(--spacing-md);
}

/* --- Collection header --- */
.collection__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
    font-family: var(--font-family-ui);
}

.collection__eyebrow {
    font-size: 0.6875rem;           /* 11px */
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--primary);
    line-height: 1;
}

.collection__title {
    font-size: 1.375rem;            /* 22px */
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}

/* --- Collection list --- */
.collection__list {
    display: flex;
    flex-direction: column;
}

/* Tiles inside collection: full-width, no individual radius */
.collection__list > .action-tile {
    border-radius: 0;
    padding: 0;
    padding-left: var(--spacing-md);
    margin: 0;
}

/* Dividers between items — default */
.collection__list > .action-tile + .action-tile {
    border-top: 1px solid var(--border-subtle);
}

/* Inset dividers — don't span full width */
.collection--inset .collection__list > .action-tile + .action-tile {
    border-top: none;
    background-image:
        linear-gradient(var(--border-subtle), var(--border-subtle));
    background-size: calc(100% - var(--spacing-lg) * 2) 1px;
    background-position: center top;
    background-repeat: no-repeat;
}

/* No dividers variant — spacing only */
.collection--no-dividers .collection__list > .action-tile + .action-tile {
    border-top: none;
}

/* Last tile gets bottom radius to match container */
.collection__list > .action-tile:last-child {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* --- Collection footer (optional "See All" link, etc.) --- */
.collection__footer {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-family: var(--font-family-ui);
}

.collection__footer a {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

.collection__footer a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Layout helpers — max-width behavior
   Cards/collections inside grids fill their column.
   Standalone items respect --component-max-width.
   ========================================================================== */

/* Remove max-width when card/collection is a grid child */
.grid > .card,
.grid > .collection,
[class*="grid-cols"] > .card,
[class*="grid-cols"] > .collection,
[class*="cq-grid-cols"] > .card,
[class*="cq-grid-cols"] > .collection {
    max-width: none;
}

/* Center standalone cards/collections */
.card:not(.grid > *),
.collection:not(.grid > *) {
    margin-inline: auto;
}


/* ==========================================================================
   Account shell modifiers (My Account redesign)
   --------------------------------------------------------------------------
   .collection--account / .action-tile--primary / .action-tile--active and the
   .account-frame / .account-screen / .account-dash / .account-empty-state
   surfaces. ONLY modifiers + new surfaces here — the base .collection and
   .action-tile rules (used on 8 other surfaces) are NOT touched.

   ONE red on the whole shell: the active-state left rail (--accent #d32f2f).
   No Imperial Script, no butcher texture, no decorative SVG, no entrance
   motion. Primary action on this light shell = ink, never gold.
   ========================================================================== */

/* --- Greeting frame (spans both columns, owns the page <h1>) --- */
.account-frame {
    margin-bottom: var(--spacing-xl);
    font-family: var(--font-family-ui);
}
.account-frame__eyebrow {
    display: block;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}
.account-frame__title {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
    color: var(--wp--preset--color--dark-default, #303333);
    text-align: left;
}
.account-frame__sub {
    margin: var(--spacing-sm) 0 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(48, 51, 51, 0.8);
}

/* --- Per-screen heading on non-dashboard endpoints --- */
.account-screen__title {
    margin: 0 0 var(--spacing-lg);
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    line-height: 1.15;
    color: var(--wp--preset--color--dark-default, #303333);
}

/* --- Collection modifier: flat account card --- */
.collection--account {
    box-shadow: none;
    background: var(--surface-form-box, #fff);
    border: 1px solid var(--hairline-ink, rgba(26, 26, 26, 0.10));
    border-radius: var(--radius-card);
}
/* Inside the account grid the card fills its block — no component cap. */
.collection--account {
    max-width: none;
}
/* Type bump scoped to the account shell ONLY (base .action-tile untouched). */
.collection--account .action-tile__title {
    font-size: 1rem;
}
.collection--account .action-tile__desc {
    font-size: 0.875rem;
}

/* --- Primary action tile (tinted icon + heavier title) --- */
.collection--account .action-tile--primary .action-tile__media {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent);
}
.collection--account .action-tile--primary .action-tile__media .fas,
.collection--account .action-tile--primary .action-tile__media .fa,
.collection--account .action-tile--primary .action-tile__media svg {
    color: var(--wp--preset--color--primary);
}
.collection--account .action-tile--primary .action-tile__title {
    font-weight: 700;
}

/* --- Active state: the surface's ONLY red (3px left rail) --- */
.collection--account .action-tile--active {
    border-left: 3px solid var(--wp--preset--color--accent);
}
.collection--account .action-tile--active .action-tile__title {
    font-weight: 700;
}

/* Keep tiles a comfortable ≥44px hit target and give the divider list air. */
.collection--account .collection__list > .action-tile {
    min-height: 60px;
    padding-block: var(--spacing-md);
    padding-right: var(--spacing-lg);
}

/* --- Dashboard layout --- */
.account-dash {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.account-dash .collection {
    margin-bottom: 0;
    /* Defeat the standalone-collection centering rule (.collection:not(.grid > *)
       { margin-inline: auto }) — on grid items auto margins beat justify-self:
       stretch, shrinking each block to fit-content and centering it in its
       track. Dash blocks must fill their tracks. */
    margin-inline: 0;
}
@media (min-width: 850px) {
    .account-dash {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: var(--spacing-lg);
        align-items: start;
    }
    /* Block 1 (latest order glance) spans both columns. */
    .account-dash__glance {
        grid-column: 1 / -1;
    }
}

/* --- Latest-order glance row (the whole row is an <a>) --- */
.account-dash__order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 44px;
    font-family: var(--font-family-ui);
    font-size: 1rem;
    color: var(--text-primary);
    text-decoration: none;
}
.account-dash__order-row:hover,
.account-dash__order-row:focus-visible {
    background: var(--surface-secondary);
}
.account-dash__order-number {
    font-weight: var(--font-weight-semibold);
}
.account-dash__order-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    background: var(--surface-inset, #f0f0f0);
    color: var(--text-secondary);
}
/* Subtle status tinting — text + soft bg only (keeps it calm, no loud reds). */
.account-dash__order-status.order-status--completed,
.account-dash__order-status.order-status--date-confirmed {
    background: rgba(46, 125, 50, 0.10);
    color: #246626; /* darkened from #2e7d32 — 4.5:1 floor at 13px on warm tints */
}
.account-dash__order-status.order-status--processing,
.account-dash__order-status.order-status--awaiting-date,
.account-dash__order-status.order-status--on-hold {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
    /* Contrast fix (2026-06-05): --primary-dark resolves to #a38f79, which on
       this tan-tint ground is ~2.3:1 — below AA. #7a6044 reads at ~4.6:1.
       Hardcoded (not the token) because the token's job is the brand warm,
       not pill legibility. Dashboard pills share this rule and benefit too. */
    color: #7a6044;
}
.account-dash__order-status.order-status--cancelled,
.account-dash__order-status.order-status--failed,
.account-dash__order-status.order-status--refunded {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-tertiary);
}
.account-dash__order-recipient {
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;
}
.account-dash__order-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.account-dash__order-total {
    margin-left: auto;
    font-weight: var(--font-weight-semibold);
}
@media (max-width: 560px) {
    .account-dash__order-total {
        margin-left: 0;
        width: 100%;
    }
}

/* --- Empty / welcome state --- */
.account-empty-state {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl);
    font-family: var(--font-family-ui);
}
.account-empty-state__lead {
    margin: 0 0 var(--spacing-lg);
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-primary);
}
.account-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.account-empty-state__note {
    margin: var(--spacing-lg) 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
@media (max-width: 480px) {
    .account-empty-state__actions {
        flex-direction: column;
    }
    .account-empty-state__actions .btn-box {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   FBB ORDER-FLOW READOUT UTILITIES (2026-06-05)
   Generic, surface-agnostic readout components shared by the FBB order flow
   (place-new-order contact card, Form 2 pricing readout, confirmation, and
   the view-order panel). All light-shell tokens; no Imperial Script, no
   butcher texture, no decorative SVG. Primary action on these grounds = ink.
   ========================================================================== */

/* --- .contact-card : compact identity readout (From / Billed to / To) --- */
.contact-card {
    background: var(--surface-secondary);
    border: 1px solid var(--hairline-ink);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}
@media (min-width: 561px) {
    .contact-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }
}
.contact-card__group {
    border-left: 3px solid var(--wp--preset--color--primary);
    padding-left: var(--spacing-md);
}
.contact-card__label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1;
    /* #666 (--text-secondary), NOT tan — tan text fails contrast on this ground. */
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm);
}
.contact-card__value {
    font-family: 'Averia Libre', serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-primary);
    margin: 0;
}
.contact-card__value + .contact-card__value {
    margin-top: var(--spacing-xs);
}
.contact-card__value--name {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}
.contact-card__value--muted {
    color: var(--text-secondary);
}
.contact-card__foot {
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--text-secondary);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--hairline-ink);
    margin-top: var(--spacing-sm);
}
@media (min-width: 561px) {
    .contact-card__foot {
        grid-column: 1 / -1;
    }
}
.contact-card__edit {
    color: var(--text-primary);
    text-decoration: underline;
}
.contact-card--order {
    margin-block: var(--spacing-lg);
}

/* --- .gfield--readout : a GF pricing field rendered as a receipt line --- */
.gfield--readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-block: var(--spacing-sm);
    border-top: 1px solid var(--hairline-ink);
}
.gfield--readout .gfield_label {
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}
/* Inputs/selects MUST stay in the DOM (GF calc + server validation read them);
   hide visually only — CSS-hidden is not the same as disabled. */
.gfield--readout input,
.gfield--readout select,
.gfield--readout .ginput_container,
.gfield--readout .gfield_description {
    display: none;
}
.gfield--readout__value {
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.gfield--readout--total {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    border-top: 2px solid var(--hairline-ink);
}
.gfield--readout--total .gfield--readout__value {
    font-size: 1.25rem;
}
.gfield--readout--credit .gfield--readout__value {
    color: #246626; /* matches the status-pill green; ≥4.5:1 on the form-box ground */
}
/* --price : a GF product field (the chosen box's line item) rendered as the
   first receipt line. The label is the box name, so it reads as primary copy
   rather than an italic fee like Shipping/Tax. Inputs hidden + dropped from
   tab order by the shared .gfield--readout input/.ginput_container rule. */
.gfield--readout--price .gfield_label {
    font-style: normal;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- .readout-list : a static <dl> receipt (confirmation + view-order) --- */
.readout-list {
    margin: 0;
}
.readout-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-block: var(--spacing-md);
}
.readout-list__row + .readout-list__row {
    border-top: 1px solid var(--hairline-ink);
}
.readout-list dt {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    margin: 0;
}
.readout-list dd {
    font-family: 'Averia Libre', serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: right;
    margin: 0;
}
.readout-list dd.readout-list__name,
.readout-list dd strong {
    font-weight: 700;
}
.readout-list__sub {
    display: block;
    color: var(--text-secondary);
    font-weight: 400;
}
.readout-list__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* --- place-new-order scoping: hide the GF sender fields now shown in the
   contact card. display:none ONLY — the prefilled values must still submit,
   mirroring the .page-id-488 #field_3_4/5 precedent. Scoped to .fbb-new-order
   so other Form 2 embeds are unaffected. --- */
.fbb-new-order #field_2_33,
.fbb-new-order #field_2_34,
.fbb-new-order #field_2_13,
.fbb-new-order #field_2_14,
.fbb-new-order #field_2_21,
.fbb-new-order #field_2_22 {
    display: none;
}

/* "Invite a colleague to send" CTA under the Sending-as card. Re-added after
   the contact-card refactor dropped the old sender-field invite prompt. */
.fbb-new-order__invite {
    margin: calc(-1 * var(--spacing-md)) 0 var(--spacing-lg);
    font-family: 'Averia Libre', serif;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* --- FBB invite surfaces ---------------------------------------------------
   The "Invite a colleague" My Account endpoint (.fbb-invite-account), the
   code-built "invitation sent" confirmation (.fbb-invite-sent), and the
   invited-colleague registration page (.fbb-register). Each leans on existing
   patterns (.ssb-form-box, .eyebrow, .doc-masthead, .btn-box) — these rules
   only cover what those don't: the share row, the validation list, and
   defensive overflow containment. --- */

/* Keep GF fields from pushing a horizontal scrollbar by clamping the elements
   that overflow — NOT by clipping the container (which would cut GF dropdowns,
   the AJAX spinner, and focus rings). The actual overflow source still needs a
   headless-Chrome measurement once Local is up. */
.fbb-invite-account .gform_wrapper,
.fbb-register .gform_wrapper {
    max-width: 100%;
}
.fbb-invite-account .ssb-form-box input:not([type="checkbox"]):not([type="radio"]),
.fbb-invite-account .ssb-form-box select,
.fbb-invite-account .ssb-form-box textarea,
.fbb-register .ssb-form-box input:not([type="checkbox"]):not([type="radio"]),
.fbb-register .ssb-form-box select,
.fbb-register .ssb-form-box textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Endpoint intro copy (sits above the form box; the theme owns the screen h2). */
.fbb-invite-account__intro {
    margin-bottom: var(--spacing-lg);
}
.fbb-invite-account__intro p {
    margin: 0 0 var(--spacing-sm);
    font-family: 'Averia Libre', serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-primary);
}
/* Domain-rule note under the endpoint intro. */
.fbb-invite-account__rule {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* Already-signed-in state: CTA spacing. */
.fbb-register__signedin-actions {
    margin: var(--spacing-md) 0;
}

/* "Invited <date>" meta on the register masthead. */
.fbb-register__meta {
    margin: var(--spacing-sm) 0 0;
    font-family: 'Averia Libre', serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Invite-form validation banner — list the specific reasons clearly. Inherits
   GF's .gform_validation_errors chrome; we only space the reason list. */
.fbb-invite-validation__reasons {
    margin: var(--spacing-xs) 0 0;
    padding-left: 1.25em;
}
.fbb-invite-validation__reasons li {
    margin: 0;
}

/* "Invitation sent" confirmation panel (gform_confirmation_5). Renders inside
   the endpoint's .ssb-form-box (replacing the form), so it's a bare block. */
.fbb-invite-sent__title {
    margin: var(--spacing-xs) 0 var(--spacing-sm);
}
.fbb-invite-sent__lead {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.fbb-invite-sent__share {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}
.fbb-invite-sent__qr {
    flex: 0 0 auto;
    line-height: 0;
}
.fbb-invite-sent__qr img {
    border-radius: var(--radius-card);
    border: 1px solid var(--hairline-ink);
    background: #fff;
    padding: var(--spacing-sm);
}
.fbb-invite-sent__link {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.fbb-invite-sent__link-label {
    font-family: 'Averia Libre', serif;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.fbb-invite-sent__url {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9375rem;
    border: 1px solid var(--hairline-ink);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-primary);
}
.fbb-invite-sent__copy {
    align-self: flex-start;
}
.fbb-invite-sent__foot {
    margin: var(--spacing-lg) 0 0;
}

/* --- .fbb-confirm : confirmation screen tweaks (reuses .account-empty-state) --- */
.fbb-confirm__status {
    margin: 0 0 var(--spacing-md);
}
.fbb-confirm__receipt {
    margin-block: var(--spacing-lg) var(--spacing-xl);
    padding: var(--spacing-lg);
}
.fbb-confirm--pending {
    border-left: 3px solid var(--wp--preset--color--primary);
}

/* --- .fbb-order-panel : view-order gift summary (reuses .collection--account) --- */
.fbb-order-panel {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}
@media (max-width: 850px) {
    .fbb-order-panel {
        padding: var(--spacing-lg);
    }
}
.fbb-order-panel__status {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--hairline-ink);
}
.fbb-order-panel__explain {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* --- .fbb-choice-cards : Form 2 "Product Choice" rendered as DTC-style cards ---
   Mirrors the /build-box base-box chooser (.choice-card* in ssb-shop builder.css):
   media → name → excerpt, with a selected-state red ring + ink check medallion
   stamped on the photo. Applied to Form 2 field 1 (GF image_choice) — the field
   gets the `.fbb-choice-cards` wrapper class server-side (fbb_swap_product_choice_
   images), and each WC short description is injected as .fbb-choice-card__excerpt
   (fbb_inject_product_choice_excerpt). GF's native markup is preserved: the radio
   input stays intact (it drives the price-field conditional logic), only restyled.
   Wrapped in `.swipe-row` (≤781px) so the products become a peek carousel. */
.fbb-choice-cards .ginput_container_image_choice {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
}
/* NOTE: the card GRID + mobile swipe-row live on `.gfield_radio` (GF's flex row,
   the real parent of the .gchoice cards) in the override layer below — NOT on
   `.ginput_container_image_choice`, which only wraps a single `.gfield_radio`. */
/* The individual choice = the card. Strip GF's default image-choice chrome and
   rebuild it as the editorial product card. */
.fbb-choice-cards .gchoice {
    position: relative;
    margin: 0;
    padding: 0;
}

.woocommerce-account .fbb-choice-cards .gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gchoice {
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
}

.fbb-choice-cards .gfield-image-choice-wrapper-outer {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface-secondary);
    border: 1px solid var(--hairline-ink);
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 15, 15, 0.08));
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.fbb-choice-cards .gfield-image-choice-wrapper-outer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(15, 15, 15, 0.12));
}
/* The image is the card's media block — 4:3 cover, like the DTC choice card. */
.fbb-choice-cards .gfield-choice-image-wrapper {
    display: block;
    overflow: hidden;
    background: var(--surface-tertiary, #f3ede1);
    margin: 0;
}
.fbb-choice-cards .gfield-choice-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* The label + radio + excerpt stack = the card body. */
.fbb-choice-cards .gfield-image-choice-wrapper-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
}
/* The native radio is the keyboard + a11y engine; visually hidden, still focusable. */
.fbb-choice-cards .gfield-choice-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.fbb-choice-cards .gfield-image-choice-wrapper-inner label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
}
/* The WC short description — purchase rationale under the name. Clamped to 3 lines
   so one long entry can't blow out a card (mirrors .choice-card__excerpt). */
.fbb-choice-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-family: 'Averia Libre', serif;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
/* Focus ring driven by the focused radio, drawn on the whole card. */
.fbb-choice-cards .gfield-choice-input:focus-visible + label,
.fbb-choice-cards .gchoice:focus-within .gfield-image-choice-wrapper-outer {
    outline: 2px solid var(--ssb-red, #d32f2f);
    outline-offset: 2px;
}
/* SELECTED — a red frame traces the rounded card + an ink check medallion stamped
   on the photo. GF's image-choice relies on the native `:checked` state (it adds
   no selected class), so the hook is `:has(:checked)` on the .gchoice. Non-inset
   ring so the card's overflow:hidden doesn't clip it. */
.fbb-choice-cards .gchoice:has(.gfield-choice-input:checked) .gfield-image-choice-wrapper-outer {
    box-shadow: 0 0 0 3px var(--ssb-red, #d32f2f);
    border-color: var(--ssb-red, #d32f2f);
}
.fbb-choice-cards .gchoice:has(.gfield-choice-input:checked) .gfield-choice-image-wrapper::after {
    content: "";
    position: absolute;
    top: calc(var(--spacing-md) + 4px);
    left: calc(var(--spacing-md) + 4px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5 11-12' stroke='%23EFE2C7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 2px 8px rgba(15, 15, 15, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .fbb-choice-cards .gfield-image-choice-wrapper-outer {
        transition: none;
    }
}
/* Swipe-row carousel (≤781px). The shared `.swipe-row` utility keys off a class
   on the grid element, but GF owns the inner `.ginput_container_image_choice`
   markup (cssClass lands on the outer .gfield, not this container), so the rail
   behavior is re-asserted here on the same grid — matching the utility 1:1 (see
   "Swipe row" in this file). 8px inset gives the selected card's 3px red ring
   clearance at the clip edges and pushes the first card clear of the left edge. */
/* (Mobile swipe-row moved to `.gfield_radio` in the override layer below.) */

/* ── GF framework-theme + WooCommerce override layer ──────────────────────────
   The base .fbb-choice-cards rules above lose the cascade to GF's `--framework`
   theme and WC's form-label rules (verified live via CDP getMatchedStylesForNode):
     • GF lays `.gfield-image-choice-wrapper-inner` as a 2-col inline-grid (0,3,0),
       reserving a column for the (hidden) radio → name/excerpt jam into a sliver.
     • GF draws its own selected badge on `.gfield-choice-input::before/::after`
       → the stray second checkmark (top-right) beside our ink medallion.
     • WC forces `body .woocommerce form label { font-size:16px !important }`
       and the choice cell inherits a 22px font → name shrinks, excerpt balloons.
   These selectors out-specify those (compound `.fbb-choice-cards.gfield--type-
   image_choice` under `.gform-theme--framework` = 0,4,0) + `!important` only where
   WC/GF themselves use it. They RESTORE the intended card — no new visual language. */
.gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gfield-image-choice-wrapper-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    grid-template-columns: none;
    align-items: stretch;
}
/* Kill GF's native selected badge; our ink medallion on the photo is the sole
   indicator. The radio stays in the DOM (opacity-hidden, focusable) for keyboard
   a11y + GF's image-choice selection JS. */
.gform-theme--framework .fbb-choice-cards .gfield-choice-input,
.gform-theme--framework .fbb-choice-cards .gfield-choice-input::before,
.gform-theme--framework .fbb-choice-cards .gfield-choice-input::after {
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.gform-theme--framework .fbb-choice-cards .gfield-choice-input::before,
.gform-theme--framework .fbb-choice-cards .gfield-choice-input::after {
    content: none !important;
    display: none !important;
}
/* GF ALSO stamps a selected checkmark on `.gchoice::after` (absolute, top-right of
   the card) — the second stray check. It sits on the .gchoice PARENT, outside the
   image wrapper. Kill it too; our ink medallion is the only indicator. */
.gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gchoice::after,
.gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gchoice::before {
    content: none !important;
    display: none !important;
}
/* Box name — beat WC's 16px !important label rule. */
.gform-theme--framework .fbb-choice-cards .gfield-image-choice-wrapper-inner label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif !important;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
    line-height: 1.05;
    text-transform: uppercase;
}
/* Excerpt — the inner cell inherits a 22px font from GF; force the intended size. */
.gform-theme--framework .fbb-choice-cards .fbb-choice-card__excerpt {
    font-size: 0.8125rem !important;
    line-height: 1.4;
}
/* The card GRID lives on `.gfield_radio` — GF's flex row that actually holds the
   .gchoice cards (`.ginput_container_image_choice` wraps a single .gfield_radio,
   so a grid there is a no-op). Out-specify GF's `display:flex` on .gfield_radio. */
.gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gfield_radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--spacing-md);
}
/* Mobile (≤781px): the card row becomes the shared `.swipe-row` peek carousel. */
@media (max-width: 781px) {
    .gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gfield_radio {
        grid-auto-flow: column;
        grid-auto-columns: minmax(var(--swipe-card-width, 80%), 1fr);
        grid-template-columns: none;
        grid-template-rows: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px 8px 14px;
        scroll-padding-inline: 8px;
    }
    .gform-theme--framework .fbb-choice-cards.gfield--type-image_choice .gfield_radio > .gchoice {
        scroll-snap-align: start;
        min-width: 0;
    }
}














/* ── wp-block-columns layout fallback for template parts ──
   Gutenberg only auto-generates layout container CSS for blocks rendered
   via the_content(). Template parts that emit .wp-block-columns markup
   need explicit flex layout so that .is-layout-flex actually flexes. */
.wp-block-columns.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30, 1rem);
    align-items: normal;
}
.wp-block-columns.is-layout-flex > .wp-block-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}
.wp-block-columns.is-layout-flex > .wp-block-column[style*="flex-basis"] {
    flex-grow: 0;
}

/* Brat-reveal columns: force true side-by-side on desktop.
   The default wp-block-columns gap + 50%+50% basis would wrap. */
@media (min-width: 781px) {
    .brat-reveal-section.wp-block-columns.is-layout-flex {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
    }
    .brat-reveal-section.wp-block-columns.is-layout-flex > .wp-block-column {
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
    }
}

/* ===========================================
   Brat Reveal — Scroll Animation

   Classes to add to existing markup:
     .brat-reveal-section  → outer .wp-block-columns
     .brat-reveal--red     → red brat .wp-block-column
     .brat-reveal--white   → white brat .wp-block-column
   =========================================== */

/* --- SplitText word wrappers --- */
.brat-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* --- Curly arrow SVG --- */
.brat-arrow {
  position: absolute;
  width: clamp(180px, 15vw, 180px);
  pointer-events: none;
  z-index: 3;
}

.brat-arrow svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.brat-arrow svg path {
  fill: none;
  stroke: #d4a76a;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

/* ===========================================
   Mobile / Stacked  (< 781px) var(--mobile)
   =========================================== */
@media (max-width: 780px) {
  
  .brat-reveal-section p {
    text-align: left ;
  }

  .brat-reveal-section p.display-h1 {
    white-space: pre;
  }
  .brat-reveal-section.wp-block-columns.is-layout-flex {
    flex-direction: column;
  }

  .brat-reveal-section .wp-block-column {
    flex-basis: auto;
    width: 100%;
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Center the fixed-width image in the viewport */
  .brat-reveal-section .wp-block-column .wp-block-image {
    position: relative;
    z-index: 1;
    will-change: transform;
    margin-left: calc(50vw - 310px) !important;
    margin-right: auto !important;
    z-index: 2;
  }

  .brat-reveal-section .wp-block-image img {
    display: block;
  }

  /* Text overlay: absolute, vertically centered */
  .brat-reveal-section .wp-block-group {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 45%;
    max-width: 280px;
    padding: 0.75rem 1rem;
  }

  .brat-reveal--red .wp-block-group {
    left: 3%;
    right: auto;
  }

  .brat-reveal--white .wp-block-group {
    right: 3%;
    left: auto;
  }

  /* Arrow positioning */
  .brat-reveal--red .brat-arrow {
    left: 24%;
    bottom: 10%;
    transform: rotate(2deg);
  }

  .brat-reveal--white .brat-arrow {
    right: 24%;
    bottom: 18%;
    transform: rotate(10deg);
  }
}

/* ===========================================
   Desktop / Side-by-side  (>= 781px) var(--mobile)
   =========================================== */
@media (min-width: 781px ) {

  .brat-reveal-section {
    overflow: hidden;
    
  }

  .brat-reveal-section .wp-block-column {
    display: flex;
    flex-direction: column;
  }

  /* Image above text */
  .brat-reveal-section .wp-block-image {
    order: 1;
  }

  /* Red brat (left column): right edge flush, overflow left */
  .brat-reveal--red .wp-block-image {
    margin-left: calc(50vw - 620px) !important;
    margin-right: 0 !important;
  }

  /* White brat (right column): left edge flush, overflow right */
  .brat-reveal--white .wp-block-image {
    margin-left: 0 !important;
    margin-right: calc(50vw - 620px) !important;
  }

  /* Text below image */
  .brat-reveal-section .wp-block-group {
    order: 2;
    padding: 1.5rem 2rem;
  }

  /* No arrow on desktop */
  .brat-arrow {
    display: none;
  }
}



/**
 * Scroll Video
 * v1.0.0
 *
 * Minimal styles for the scroll-triggered video component.
 * Video fills its container fluidly at native aspect ratio.
 */

/* Container — block-level, fluid width */
.scroll-video {
  position: relative;
  overflow: hidden;
  line-height: 0; /* Collapse inline whitespace gap below video */
/*  aspect-ratio: 1 / 1;*/
}

/* Video — responsive, no controls chrome */
.scroll-video video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optional: aspect ratio override via inline style
   e.g. <div class="scroll-video" style="aspect-ratio: 16/9;"> */
.scroll-video[style*='aspect-ratio'] video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}






.bull-bg {
  background-image: url('../svg/brats-bull.svg');
/*  background-size: cover;*/
  background-position: top right;
  background-repeat: no-repeat;
}







body input[type="checkbox"]:checked::before,
body .woocommerce input.woocommerce-form__input-checkbox:checked::before {
    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2718%27%20height%3D%2718%27%20aria-hidden%3D%27true%27%20focusable%3D%27false%27%3E%3Cpath%20d%3D%27M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z%27%20fill%3D%27%23303333%27%2F%3E%3C%2Fsvg%3E") !important;
    transform: scale(1) !important;
    width: 18px !important;
    height: 18px !important;
}






/**
Breadcrumbs
**/

.breadcrumb__list,
.yoast-breadcrumbs > span {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-ui);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: var(--font-weight-semibold);
}
.yoast-breadcrumbs > span {
  text-indent:-999em
}

.breadcrumb__item,
.yoast-breadcrumbs > span > span {
    display: flex;
    align-items: center;
    text-indent:0;
}

.breadcrumb__link {
  color: var(--text-primary); /* ink — the breadcrumb sits on light grounds (account, doc pages). Dark-ground users (airing-single / item-single) override in their own scope. */
  text-decoration: underline;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--ssb-ink, var(--text-primary));
}
.breadcrumb__current {
  color: var(--text-secondary);
}

.breadcrumb__item + .breadcrumb__item::before,
.yoast-breadcrumbs > span > span + span::before {
    content: ">";
    margin: 0 8px;
}









/* ==========================================================================
   Nav Hint — First-visit discovery system for mobile bottom nav
   
   Progressive enhancement layer. Adds glow, pulse, tooltip, and dismiss
   behaviors to the existing .nav-toggle button. All animations use the
   site's --wp--preset--color--primary as the accent color.
   
   Dependencies: none (pairs with nav-hint.js)
   Scope: mobile only (max-width: 850px) — matches main nav breakpoint
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — RGB companion for primary color glow/shadow rgba() usage
   
   NOTE: Update --nav-hint-accent-rgb to match your --wp--preset--color--primary.
   If primary is #c2a488 → use 194, 164, 136
   If primary is #c0a88f → use 192, 168, 143
   Adjust to match your theme.json value.
   -------------------------------------------------------------------------- */
:root {
    --nav-hint-accent: #d32f2f;
    --nav-hint-accent-rgb: 194, 63, 56; /* RGB channels of primary — update if primary changes */
}


/* --------------------------------------------------------------------------
   2. Glow state — persistent breathing glow once first hint fires
      Applied: .nav-toggle.glow-active
      Removed: on markDiscovered()
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {

    .nav-toggle.glow-active {
        border: 1.5px solid rgba(var(--nav-hint-accent-rgb), 0.6);
        box-shadow:
            0 0 0 3px rgba(var(--nav-hint-accent-rgb), 0.15),
            0 0 18px rgba(var(--nav-hint-accent-rgb), 0.3),
            var(--shadow-lg);
        animation: navHintBreathe 2s ease-in-out infinite;
    }

    @keyframes navHintBreathe {
        0%, 100% {
            box-shadow:
                0 0 0 3px rgba(var(--nav-hint-accent-rgb), 0.12),
                0 0 14px rgba(var(--nav-hint-accent-rgb), 0.25),
                var(--shadow-lg);
        }
        50% {
            box-shadow:
                0 0 0 5px rgba(var(--nav-hint-accent-rgb), 0.22),
                0 0 28px rgba(var(--nav-hint-accent-rgb), 0.4),
                var(--shadow-lg);
        }
    }


    /* ----------------------------------------------------------------------
       3. Hint pulse — one-shot flash on each trigger, then falls back to breathe
          Applied: .nav-toggle.nav-hint-pulse (added/removed per trigger)
       ---------------------------------------------------------------------- */
    .nav-toggle.nav-hint-pulse {
        animation: navHintPulse 0.65s ease forwards, navHintBreathe 2s ease-in-out 0.65s infinite;
    }

    @keyframes navHintPulse {
        0%   { background: var(--wp--preset--color--dark-default); }
        25%  { background: rgba(var(--nav-hint-accent-rgb), 0.22);
               border-color: var(--nav-hint-accent); }
        60%  { background: rgba(var(--nav-hint-accent-rgb), 0.15); }
        100% { background: var(--wp--preset--color--dark-default); }
    }

    /* Ripple rings — expand outward from button on trigger */
    .nav-toggle.nav-hint-pulse::before,
    .nav-toggle.nav-hint-pulse::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid var(--nav-hint-accent);
        opacity: 0;
        pointer-events: none;
    }
    .nav-toggle.nav-hint-pulse::before {
        animation: navHintRing 0.6s ease-out 0s forwards;
    }
    .nav-toggle.nav-hint-pulse::after {
        animation: navHintRing 0.6s ease-out 0.18s forwards;
    }

    @keyframes navHintRing {
        0%   { inset: -4px;  opacity: 0.85; }
        100% { inset: -22px; opacity: 0; }
    }


    /* ----------------------------------------------------------------------
       4. Discovered state — silence all hint animation, return to normal
          Applied: .nav-toggle.nav-hint-discovered
       ---------------------------------------------------------------------- */
    .nav-toggle.nav-hint-discovered {
        animation: none !important;
        border-color: transparent !important;
        box-shadow: var(--shadow-lg) !important;
    }
    .nav-toggle.nav-hint-discovered::before,
    .nav-toggle.nav-hint-discovered::after {
        animation: none !important;
        opacity: 0 !important;
    }


    /* ----------------------------------------------------------------------
       5. Tooltip pill — positioned above .mobile-nav-buttons
          Injected by JS as child of .mobile-nav-buttons
       ---------------------------------------------------------------------- */
    .nav-hint-tooltip {
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        white-space: nowrap;
        background: var(--nav-hint-accent);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        font-family: var(--font-family-ui, system-ui, -apple-system, sans-serif);
        letter-spacing: 0.5px;
        border-radius: 7px;
        opacity: 0;
        pointer-events: none;
        display: flex;
        align-items: center;
        z-index: var(--z-nav-buttons);
    }

    /* Caret pointing down toward button */
    .nav-hint-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(--nav-hint-accent);
        pointer-events: none;
    }

    .nav-hint-tooltip__text {
        padding: 6px 12px;
        flex-shrink: 0;
    }

    .nav-hint-tooltip.is-visible {
        opacity: 1;
        pointer-events: auto;
    }


    /* ----------------------------------------------------------------------
       6. Dismiss circle — floats to the right of the tooltip
       ---------------------------------------------------------------------- */
    .nav-hint-dismiss {
        position: absolute;
        top: 50%;
        left: calc(100% + 7px);
        transform: translateY(-50%) scale(0.4);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--nav-hint-accent);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 2px 10px rgba(var(--nav-hint-accent-rgb), 0.4);
        transition: filter 0.15s;
    }

    .nav-hint-dismiss:hover {
        filter: brightness(1.15);
    }

    /* Spring-pop entrance on first reveal */
    .nav-hint-tooltip.show-dismiss .nav-hint-dismiss {
        animation: navHintDismissPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        pointer-events: auto;
    }

    @keyframes navHintDismissPop {
        0%   { opacity: 0; transform: translateY(-50%) scale(0.3); }
        60%  { opacity: 1; transform: translateY(-50%) scale(1.15); }
        80%  { transform: translateY(-50%) scale(0.92); }
        100% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    /* Static on re-shows after first pop */
    .nav-hint-tooltip.show-dismiss.already-popped .nav-hint-dismiss {
        animation: none;
        opacity: 1;
        transform: translateY(-50%) scale(1);
        pointer-events: auto;
    }

} /* end @media (max-width: 850px) */


















/* =============================================================================
   NAV ICON GROUP & CART COUNT
   Append to screen.css
   ============================================================================= */

/*
 * ── Desktop: push icon group to the far right of the nav bar ─────────────────
 *
 * .nav-primary uses display:flex; justify-content:center on the nav-wrapper.
 * Adding margin-left:auto to the FIRST icon li pushes the entire icon cluster
 * to the right edge, regardless of how many icons are added in future.
 */

@media screen and (min-width: 851px) {

  /* First icon li in the group gets the auto left margin */
  .nav-primary .nav-icon-group--first {
    margin-left: auto;
  }

  /* Icon li baseline — vertically centred, no extra chrome */
  .nav-icon-item {
    display: flex;
    align-items: center;
    list-style: none;
  }

  /* Icon link */
  .nav-icon-link {
    position:        relative; /* for cart badge */
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem !important;
    color:           var(--wp--preset--color--text-white, #fefefe);
    text-decoration: none;
    font-size:       var(--wp--preset--font-size--medium);
    transition:      color var(--transition-fast), background var(--transition-fast);
    cursor:          pointer;
  }

  /* Trailing gap after the last icon so it doesn't butt against the nav edge */
  .nav-cart-item {
    margin-right: 1rem;
  }

  .nav-icon-link:hover,
  .nav-icon-link:focus-visible,
  .nav-icon-item[data-popover] .nav-icon-link[aria-expanded="true"] {
    color: var(--wp--preset--color--primary);
  }

  /* Cart badge — sits top-right of the cart icon */
  .nav-cart-count {
    position:      absolute;
    top:           1px;
    right:         5px;
    min-width:     17px;
    height:        17px;
    padding:       0 4px;
    border-radius: 999px;
    background:    var(--wp--preset--color--vivid-red, #c13f38);
    color:         #fff;
    font-size:     10px;
    font-weight:   700;
    line-height:   17px;
    text-align:    center;
    pointer-events: none;
    transition:    opacity 0.2s ease;
  }

  /* Hide the icon-item <li> versions on desktop — they live in the nav-primary
     list and are fully visible there. The mobile-icon-btn duplicates are
     hidden by their own mobile-only rule below. */
}


/*
 * ── Mobile: hide nav-primary icon items (they're duplicated as mobile-icon-btn) ─
 */
@media screen and (max-width: 850px) {
  .nav-icon-item {
    display: none !important; /* mobile uses .mobile-icon-btn instead */
  }
}


/* =============================================================================
   MOBILE ICON BUTTONS
   .mobile-cart-btn    — bottom-left corner
   .mobile-account-btn — bottom-right corner

   These are siblings of .nav-back-main and .nav-toggle inside
   .mobile-nav-buttons. They are CSS-hidden when the nav is closed and
   animated in/out by GSAP alongside the nav open/close sequence.
   ============================================================================= */

@media screen and (max-width: 850px) {

  /*
   * Base style shared by both icon buttons.
   * Uses position:fixed (same stacking context as .mobile-nav-buttons) so the
   * buttons sit at the same bottom level as the nav toggle, pinned to the
   * left/right viewport edges. GSAP animates opacity and x-translation.
   */
  .mobile-icon-btn {
    position:        fixed;
    bottom:          var(--mobile-bottom-spacing);
    display:         flex;
    align-items:     center;
    justify-content: center;

    width:           calc(var(--mobile-button-size) * 0.64);
    height:          calc(var(--mobile-button-size) * 0.64);
    border-radius:   50%;
    border:          none;
    cursor:          pointer;

    background:      var(--wp--preset--color--dark-default);
    color:           var(--wp--preset--color--text-white, #fefefe);
    font-size:       1.1rem;
    box-shadow:      var(--shadow-lg);
    z-index:         var(--z-nav-buttons);

    /* Start hidden — GSAP controls opacity and x; pointer-events off until open */
    opacity:         0;
    pointer-events:  none;
    transition:      background var(--transition-fast), color var(--transition-fast);
  }

  /* Cart: left edge with same inset as a comfortable thumb target */
  .mobile-cart-btn {
    left: var(--spacing-lg, 1rem);
  }

  /* Account: right edge */
  .mobile-account-btn {
    right: var(--spacing-lg, 1rem);
  }

  /* Re-enable pointer-events when nav is open */
  .mobile-nav-buttons:has(.nav-toggle[aria-expanded="true"]) .mobile-icon-btn {
    pointer-events: auto;
  }

  /* Cart count badge inside the mobile cart button */
  .mobile-cart-count {
    position:      absolute;
    top:           4px;
    right:         4px;
    min-width:     15px;
    height:        15px;
    padding:       0 3px;
    border-radius: 999px;
    background:    var(--wp--preset--color--vivid-red, #c13f38);
    color:         #fff;
    font-size:     9px;
    font-weight:   700;
    line-height:   15px;
    text-align:    center;
    pointer-events: none;
  }
}

/* Hide mobile icon buttons on desktop */
@media screen and (min-width: 851px) {
  .mobile-icon-btn {
    display: none;
  }
}


/* =============================================================================
   NAV POPOVER COMPONENT
   Desktop-only floating card with a directional caret.
   Append to screen.css alongside other desktop nav styles.

   Placement classes are set via JS (data-caret-dir on .nav-popover__caret).
   The panel itself is appended to <body> by NavPopover.js so it is never
   clipped by overflow:hidden on the nav.
   ============================================================================= */

.nav-popover {
  /* Stacking — above the nav (--z-nav: 1000) */
  z-index: var(--z-submenu, 1002);

  /* Visual — card language */
  background:    var(--wp--preset--color--dark-default);
  border-radius: var(--radius-md);
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);

  /* UI font — sans-serif for all popover content */
  font-family: var(--apple-font);
  color:        #fff;

  /* Layout */
  overflow: visible; /* caret sits outside the border-radius */

  /* GSAP will set opacity/scale; keep this as baseline */
  opacity:   0;
  transform: scale(0.85);

  /* Prevent content overflow from showing through rounded corners */
  & > .nav-popover__body {
    overflow:      hidden;
    border-radius: inherit;
  }
}

/* Body padding */
.nav-popover__body {
  padding: var(--spacing-lg) var(--spacing-xl);
}


/* ── Caret (CSS border triangle) ──────────────────────────────────────────── */

.nav-popover__caret {
  position: absolute;
  width:    0;
  height:   0;
  /* The actual triangle borders are set per direction below */
}

/* Pointing UP — caret on the top edge, panel opens downward */
.nav-popover__caret[data-caret-dir="up"] {
  border-left:   8px solid transparent;
  border-right:  8px solid transparent;
  border-bottom: 8px solid var(--wp--preset--color--dark-default);
  /* top/left set by JS */
}

/* Pointing DOWN — caret on the bottom edge, panel opens upward */
.nav-popover__caret[data-caret-dir="down"] {
  border-left:  8px solid transparent;
  border-right: 8px solid transparent;
  border-top:   8px solid var(--wp--preset--color--dark-default);
  /* bottom/left set by JS */
}

/* Pointing LEFT — caret on the left edge, panel opens rightward */
.nav-popover__caret[data-caret-dir="left"] {
  border-top:    8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right:  8px solid var(--wp--preset--color--dark-default);
  /* left/top set by JS */
}

/* Pointing RIGHT — caret on the right edge, panel opens leftward */
.nav-popover__caret[data-caret-dir="right"] {
  border-top:    8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left:   8px solid var(--wp--preset--color--dark-default);
  /* right/top set by JS */
}


/* ── Popover content patterns ─────────────────────────────────────────────── */

/* All links inside the popover inherit white by default */
.nav-popover a {
  color: #fff;
}

/* Section label — small uppercase eyebrow */
.nav-popover-label {
  margin:         0 0 var(--spacing-sm);
  font-size:      var(--wp--preset--font-size--tiny, 0.7rem);
  font-weight:    var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          rgba(255, 255, 255, 0.45); /* muted eyebrow on dark popover */
}

/* Link list */
.nav-popover-list {
  list-style: none;
  margin:     0;
  padding:    0;
}

.nav-popover-list li {
  margin: 0;
}

.nav-popover-list a {
  display:         block;
  padding:         var(--spacing-sm) 0;
  color:           var(--wp--preset--color--text-white, #fefefe);
  text-decoration: none;
  font-size:       var(--wp--preset--font-size--small, 0.9rem);
  font-weight:     var(--font-weight-normal);
  transition:      color var(--transition-fast);
  border-bottom:   1px solid rgba(255, 255, 255, 0.07);
}

.nav-popover-list li:last-child a {
  border-bottom: none;
}

.nav-popover-list a:hover,
.nav-popover-list a:focus-visible {
  color: var(--wp--preset--color--primary);
  outline: none;
}

/* CTA button at the bottom of a popover section */
.nav-popover .nav-popover-cta {
  display:         block;
  margin-top:      var(--spacing-md);
  padding:         var(--spacing-sm) var(--spacing-lg);
  background:      var(--wp--preset--color--primary);
  color:           var(--wp--preset--color--dark-default);
  border-radius:   var(--radius-full);
  text-align:      center;
  text-decoration: none;
  font-size:       var(--wp--preset--font-size--small, 0.875rem);
  font-weight:     var(--font-weight-semibold);
  transition:      background var(--transition-fast);
}

.nav-popover .nav-popover-cta:hover,
.nav-popover .nav-popover-cta:focus-visible {
  background: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary));
  color:      var(--wp--preset--color--text-white, #fefefe);
}

/* Subtle text link — sits above the main CTA */
.nav-popover-text-link {
  display:         block;
  margin-top:      var(--spacing-md);
  text-align:      left;
  text-decoration: none;
  font-size:       var(--wp--preset--font-size--small, 0.875rem);
  color:           rgba(255, 255, 255, 0.6);
  transition:      color var(--transition-fast);
}

.nav-popover-text-link:hover,
.nav-popover-text-link:focus-visible {
  color: #fff;
}

/* Cart preview area inside popover — populated by WC fragment */
.nav-popover-cart-preview {
  margin-bottom: var(--spacing-sm);
}

/* Empty cart message */
.nav-popover-empty-msg {
  margin:      var(--spacing-sm) 0 0;
  font-size:   var(--wp--preset--font-size--small, 0.875rem);
  color:       rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.nav-popover-empty-msg a {
  color:           rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-popover-empty-msg a:hover {
  color: #fff;
}

/* Mini cart line items list */
.nav-popover-mini-cart {
  list-style: none;
  margin:     0;
  padding:    0;
}

.nav-popover-mini-cart__item {
  display:       grid;
  grid-template: "thumb name"  auto
                 "thumb meta"  auto
                 / 40px 1fr;
  column-gap:    var(--spacing-sm);
  row-gap:       2px;
  padding:       var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-popover-mini-cart__item:last-child {
  border-bottom: none;
}

.nav-mini-cart-thumb {
  grid-area:     thumb;
  width:         40px;
  height:        40px;
  object-fit:    cover;
  border-radius: var(--radius-sm, 4px);
  align-self:    start;
}

.nav-mini-cart-name {
  grid-area:   name;
  font-size:   var(--wp--preset--font-size--small, 0.875rem);
  font-weight: var(--font-weight-semibold);
  color:       #fff;
  line-height: 1.3;
  align-self:  end;
}

.nav-mini-cart-meta {
  grid-area:  meta;
  font-size:  0.8rem;
  color:      rgba(255, 255, 255, 0.55);
  align-self: start;
}

/* Popover is desktop-only — never show on mobile */
@media screen and (max-width: 850px) {
  .nav-popover {
    display: none !important;
  }
}


/* =============================================================================
   WC FRAGMENT — nav icon count updates
   Suppress WooCommerce's native add-to-cart CSS spinner.
   Add to woocommerce-overrides.css (or here if consolidating).
   ============================================================================= */

/* Suppress WC's own ::after spinner — CartButtonController provides its own */
.single_add_to_cart_button.loading::after {
  display: none !important;
}









/* ==========================================================================
   Shop Category Filter
   
   Client-side product filtering via chip buttons on the main /shop/ page.
   
   Dependencies: .chip (screen.css), design tokens from :root
   Scope: .shop-filter-group (main shop page only)
   
   Append to woocommerce-overrides.css.
   ========================================================================== */


/* ── 1. Chip bar ────────────────────────────────────────────────────────── */

.shop-filter-group .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-lg, 1.5rem);
}

.shop-filter-group .filter-btn {
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.3s cubic-bezier(0.625, 0.05, 0, 1),
        color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
        border: 2px solid transparent;
}

.shop-filter-group .filter-btn[data-filter-status="not-active"] {
/*    background: var(--surface-primary);*/
    color: var(--wp--preset--color--dark-default);
    border: 2px solid var(--wp--preset--color--dark-default);
}

.shop-filter-group .filter-btn[data-filter-status="active"] {
    background-color: var(--wp--preset--color--dark-default);
    color: var(--wp--preset--color--text-white, #fff);

}


/* ── 2. Product grid — flexbox with gap ─────────────────────────────────── *
 *
 * WooCommerce's default grid uses floats + .first/.last classes to control
 * margin-right per row. When items are hidden via display:none, those
 * server-side classes no longer align with visual row boundaries, causing
 * uneven gutters and broken rows.
 *
 * Fix: switch to flexbox + gap on the container. This lets us:
 *   - Remove ALL per-item margin-right (gap handles it uniformly)
 *   - Remove .first clear:both (flexbox wraps naturally)
 *   - Use calc() widths that account for the gap
 *   - Items with display:none are fully removed from flex flow
 *
 * We scope everything to .shop-filter-group so this only affects the
 * main shop page — single product, related products, etc. are untouched.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Product-grid LAYOUT lives in woocommerce-overrides.css ("Product grid:
 * reset WooCommerce's float-based layout", ~line 550) — a CSS Grid keyed
 * to WC's .columns-N classes. A flex-wrap + calc()-width block used to sit
 * here; it silently LOST to that file on load order (same specificity,
 * later sheet) and was removed 2026-06-04. Don't re-add layout rules here:
 * they'd be dead-but-misleading. Only the filter transition states below
 * are owned by this file. */


/* ── 3. Filter transition states ────────────────────────────────────────── */

.shop-filter-group ul.products li.product[data-filter-status="active"] {
    opacity: 1;
    transform: scale(1) rotate(0.001deg);
    transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1),
                transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.shop-filter-group ul.products li.product[data-filter-status="transition-out"] {
    opacity: 0;
    transform: scale(0.9) rotate(0.001deg);
    transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1),
                transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

.shop-filter-group ul.products li.product[data-filter-status="not-active"] {
    display: none;
}

/* Two-axis stacking (2026-06-04) makes filter changes more frequent —
 * honor reduced motion on the grid the same way the fit toggle does. */
@media (prefers-reduced-motion: reduce) {
    .shop-filter-group ul.products li.product[data-filter-status] {
        transition: none;
    }
}




/* ==========================================================================
   Specials Page (.specials-*)
   --------------------------------------------------------------------------
   Mobile-first. Used by page-template-specials.php.
   - Tokens only: --wp--preset--color--*, --spacing-*, --font-family-*.
   - Desktop breakpoint at 850px (matches the nav breakpoint).
   - No new color values introduced.
   ========================================================================== */

/* Full-bleed cream ground for the whole page so the white, organic-framed
   "Today" box pops as the visual anchor and the page gains structure (it
   predates the section system). Applied to the Barba <main>, not the
   constrained inner container, so the cream fills the viewport rather than
   reading as a centered panel on wide screens. */
.specials-page-main {
    background: var(--ssb-cream);
}

.container.specials {
    /* Was edge-to-edge: no base .container rule exists, so this compound
       selector must carry the width constraint + gutters itself (matching the
       section system's max + horizontal padding). */
    max-width: var(--ssb-section-max);
    margin-inline: auto;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-3xl);
    padding-inline: var(--ssb-section-x);
}

/* --- Page header --- */
.specials-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* --- Today stamp (FRIDAY · May 2) --- */
.specials-today-stamp {
    text-align: center;
    margin: 0 0 var(--spacing-2xl);
    line-height: 1.2;
    color: var(--wp--preset--color--dark-default);
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
}

.specials-today-stamp__day {
    font-family: 'Bowlby One SC', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--primary);
    font-size: 1.125rem;
}

.specials-today-stamp__sep {
    margin: 0 0.4em;
    color: var(--wp--preset--color--dark-default);
    opacity: 0.6;
}

.specials-today-stamp__date {
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
}

/* --- Today's specials block (elevated treatment) ---
   Border is drawn by an inline SVG path (.organic-shape) with subtle
   hand-drawn variance baked into its bezier curves. */
.specials-today {
    position: relative;
    margin: 0 0 var(--spacing-3xl);
    padding: var(--spacing-xl);
/*    background: var(--wp--preset--color--white, #fff);*/
}

/* --- Shared organic SVG shape (rendered by ssb_organic_shape()) ---
   Stretches to fit its positioned parent. The parent must establish a
   positioning context (position: relative or absolute). Color is
   inherited via currentColor — set `color` on the parent or on this
   element to override. */
.organic-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
/*    color: var(--wp--preset--color--primary);*/
}

/* Card opt-in variant. Cards have overflow:hidden, so the stroke needs
   to render fully inside the card bounds — inset the SVG by 2px. */
.card--organic .organic-shape {
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.specials-today__list,
.specials-today__list .specials-item__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.specials-today__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.specials-today__entry + .specials-today__entry {
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.specials-today__empty {
    margin: 0;
    text-align: center;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    color: var(--wp--preset--color--dark-default);
}

/* --- Special item (shared between today / day / ongoing) --- */
.specials-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.specials-item__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs) var(--spacing-md);
}

.specials-item__name {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.25;
    color: var(--wp--preset--color--dark-default);
}

.specials-today .specials-item__name {
    font-size: 1.125rem;
}

.specials-item__time {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--wp--preset--color--primary);
}

.specials-item__desc {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--wp--preset--color--dark-default);
    opacity: 0.85;
}

.specials-item__list {
    margin: var(--spacing-xs) 0 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
    font-family: 'Averia Libre', serif;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--wp--preset--color--dark-default);
}

.specials-item__list li {
    margin: 0 0 var(--spacing-xs);
}

.specials-item__list li:last-child {
    margin-bottom: 0;
}

/* --- Section heading spacing --- */
.specials-section-heading {
    text-align: center;
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

/* --- This Week --- */
.specials-week {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.specials-day {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.specials-day:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.specials-day__label {
    font-family: 'Bowlby One SC', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    margin: 0;
    color: var(--wp--preset--color--primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.specials-day__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.specials-day__entry + .specials-day__entry {
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.specials-day__empty-row {
    font-family: 'Averia Libre', serif;
    font-size: 1.25rem;
    color: var(--wp--preset--color--dark-default);
    opacity: 0.45;
}

.specials-day--empty .specials-day__label {
    color: var(--wp--preset--color--dark-default);
    opacity: 0.45;
}

/* --- Ongoing --- */
.specials-ongoing {
    margin-bottom: var(--spacing-3xl);
}

.specials-ongoing__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.specials-ongoing__entry {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.specials-ongoing__entry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.specials-ongoing__cadence {
    margin: var(--spacing-xs) 0 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
}

/* --- Footer CTA --- */
.specials-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0;
}

/* --- Desktop ≥ 850px --- */
@media (min-width: 850px) {
    .specials-today {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .specials-week {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl) var(--spacing-2xl);
        /* Cap narrower than the 1200px container so Today / This Week / Ongoing
           share one centered ~900px spine — kills the desktop dead-space and
           gives a calmer 2-up column measure. */
        max-width: var(--ssb-section-max-narrow);
        margin-inline: auto;
    }

    .specials-day {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: var(--spacing-lg);
    }

    /* Drop the border on the visual last row.
       Assumes an even item count (current v1: 6 items).
       Revisit when real data lands and counts vary. */
    .specials-day:nth-last-child(-n+2) {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .specials-ongoing {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .specials-footer {
        flex-direction: row;
    }
}


/* ==========================================================================
   Bratmobile section
   Two-column hero band on the front page introducing the food truck.
   Photo (left, 55%) sits inside a kraft-colored matte with the shared
   hand-drawn organic-shape border. Content (right, 45%) stacks header,
   lede, use-case chips, large pill CTA, and supporting copy.
   Mobile: stacks vertically, CTA goes full-width.
   ========================================================================== */

.section-bratmobile {
    width: 100%;
    background: var(--surface-primary, #fff);
    padding: var(--spacing-3xl) var(--spacing-md);
}

.bratmobile__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--spacing-2xl);
    align-items: center;
}

.bratmobile__photo {
    width: 100%;
}

.bratmobile__matte {
    position: relative;
    background: var(--wp--preset--color--primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.bratmobile__matte img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.bratmobile__shape {
    position: absolute;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    width: auto;
    height: auto;
    color: var(--wp--preset--color--primary-dark);
    pointer-events: none;
}

.bratmobile__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bratmobile__lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0;
}

.bratmobile__usecases {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.bratmobile__usecase {
    padding: 6px 14px;
    font-size: 13px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    border-radius: 100px;
}

.bratmobile__service-area {
    font-size: 13px;
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0;
}

.bratmobile__micro-proof {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

@media (max-width: 781px) {
    .bratmobile__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .bratmobile__shape {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }

    .btn-pill--hero {
        width: 100%;
        justify-content: center;
    }
}

/* ── Front-page hero cover containment ────────────────────────────────────
   Template parts don't get WP block-library's auto-applied absolute
   positioning for the cover bg image. Without this the watercolor renders
   as a normal-flow block above the content instead of behind it. */
.front-hero .wp-block-cover {
    position: relative;
    min-height: auto;
    overflow: hidden;
    isolation: isolate;
}
.front-hero .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
}
.front-hero .wp-block-cover__background {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.front-hero .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    z-index: 2;
}

/* Years emblem inside hero — center it, scale appropriately */
.front-hero .ssb-emblem--over-70-years {
    display: block;
    margin: 0 auto var(--wp--preset--spacing--40, 1.5rem);
    width: clamp(120px, 12vw, 200px);
}
.front-hero .ssb-emblem--over-70-years svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Hero H1 + tagline */
.front-hero .front-hero__title {
    color: var(--wp--preset--color--text-white, #fff);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    margin: 0 0 var(--wp--preset--spacing--30, 1rem);
}
.front-hero .front-hero__tagline {
    color: var(--wp--preset--color--text-light, #cccccc);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin: 0;
}

/* Hero buttons — comfortable visible style on the dark cover */
.front-hero .wp-block-buttons {
    margin-top: var(--wp--preset--spacing--50, 2rem);
}
.front-hero .wp-block-button .wp-block-button__link {
    background: var(--wp--preset--color--accent, #d32f2f);
    color: var(--wp--preset--color--text-white, #fff);
    border: 2px solid var(--wp--preset--color--accent, #d32f2f);
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    display: inline-block;
    transition: background 150ms ease, border-color 150ms ease;
}
.front-hero .wp-block-button .wp-block-button__link:hover,
.front-hero .wp-block-button .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--dark-default, #303333);
    border-color: var(--wp--preset--color--dark-default, #303333);
}
.front-hero .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--text-white, #fff);
    border-color: var(--wp--preset--color--text-white, #fff);
}
.front-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.front-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--text-white, #fff);
    color: var(--wp--preset--color--dark-default, #303333);
    border-color: var(--wp--preset--color--text-white, #fff);
}


/* ==========================================================================
   FRONT-PAGE 2026 REDESIGN
   ==========================================================================
   New components introduced in the homepage overhaul. Hard-coded for now;
   a follow-up pass will move repeated tokens (cream, ink, dividers) into
   theme.json and consolidate redundant button/section styles.
   --------------------------------------------------------------------------
   Local design tokens scoped to the front-page redesign. Mirror the design
   handoff palette so we can compare against the prototype 1:1 without
   touching theme.json yet. Migrate once stable.
   ========================================================================== */
.front-hero--simple,
.text-ticker,
.brathaus,
.shop-pathway,
.heritage,
.catering,
.site-utility-bar,
.shop-hero,
.shop-zone,
.shop-reassurance,
.builder,
.site-status,
.today {
    --ssb-ink: #0F0F0F;
    --ssb-ink-soft: #1A1A1A;
    --ssb-cream: #EFE2C7;
    --ssb-cream-soft: #F5E9CF;
    --ssb-tan: #c2a488;
    --ssb-tan-deep: #A88857;
    --ssb-red: var(--wp--preset--color--accent, #d32f2f);
    --ssb-red-deep: #A02523;
    --ssb-gold: #E5C875;
    --ssb-rule: rgba(194, 164, 136, 0.35);
    --ssb-rule-strong: rgba(194, 164, 136, 0.6);
}


/* ── ssb-shop plugin token override (token-contract reskin) ────────────────
   The ssb-shop plugin ships neutral --ssb-shop-* defaults on its .ssb-shop
   root (see plugins/ssb-shop/assets/css/ssb-shop.css). Here the theme maps
   those tokens onto its editorial --ssb-* cluster so the /shop landing wears
   the brand palette. Equal specificity + the theme stylesheet enqueuing after
   the plugin stylesheet = these values win on source order (no !important).
   A11y: red TEXT/ICONS on light read from --ssb-shop-accent-ink (#A02523,
   4.5:1-safe); the brighter --ssb-shop-accent (#d32f2f) is reserved for large
   Bowlby values, UI, and CTA fills. */
.ssb-shop {
    --ssb-shop-ink:          var(--ssb-ink,        #0F0F0F);
    --ssb-shop-muted:        #5a5346;
    --ssb-shop-surface:      var(--ssb-cream,      #EFE2C7);
    --ssb-shop-surface-soft: var(--ssb-cream-soft, #F5E9CF);
    --ssb-shop-warm:         var(--ssb-tan,        #c2a488);
    --ssb-shop-warm-deep:    var(--ssb-tan-deep,   #A88857);
    --ssb-shop-manifest:     var(--ssb-ink,        #0F0F0F);
    --ssb-shop-accent:       var(--ssb-red,        #d32f2f);
    --ssb-shop-accent-ink:   var(--ssb-red-deep,   #A02523);
    --ssb-shop-border:       rgba(15, 15, 15, 0.12);
    --ssb-shop-radius:          var(--radius-card);
    --ssb-shop-radius-control:  var(--radius-md);
    --ssb-shop-band:            1280px;
    --ssb-shop-elevation:       0 1px 3px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
    --ssb-shop-elevation-hover: 0 2px 6px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.1);
    --ssb-shop-card-border:     0;
}


/* ── Pre-header utility bar ────────────────────────────────────────────── */
.site-utility-bar {
    display: none;
    background: var(--ssb-ink);
    color: var(--ssb-tan);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(194, 164, 136, 0.18);
}
.site-utility-bar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.site-utility-bar__brand {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
    font-weight: 700;
}
.site-utility-bar__star {
    color: var(--ssb-red);
    font-size: 9px;
}
.site-utility-bar__links {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.site-utility-bar__links a {
    color: var(--ssb-tan);
    text-decoration: none;
    font-weight: 700;
    transition: color 150ms ease;
}
.site-utility-bar__links a:hover,
.site-utility-bar__links a:focus-visible {
    color: var(--ssb-cream);
}
.site-utility-bar__sep {
    color: var(--ssb-red);
    font-size: 9px;
}
@media (min-width: 900px) {
    .site-utility-bar { display: block; }
}


/* ── Box buttons ───────────────────────────────────────────────────────── */
/* Squared-off CTAs replacing standalone .btn-pill. Will eventually carry
   a roughened SVG edge (TODO). Variants: primary (cream on ink), ghost
   (tan outline on dark), ink (ink on cream), ghost-ink (ink outline on
   light backgrounds). */
.btn-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border: 0;
    border-radius: 0;
    font-family: 'Averia Libre', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
    line-height: 1;
}
.btn-box:hover,
.btn-box:focus-visible {
    transform: translateY(-1px);
}
.btn-box__arrow {
    transition: transform 150ms ease;
}
.btn-box:hover .btn-box__arrow,
.btn-box:focus-visible .btn-box__arrow {
    transform: translateX(4px);
}
.btn-box--primary {
    background: #EFE2C7;
    color: #0F0F0F;
}
.btn-box--primary:hover,
.btn-box--primary:focus-visible {
    background: #E5C875;
}
.btn-box--ghost {
    background: transparent;
    color: #c2a488;
    border: 1.5px solid #c2a488;
}
.btn-box--ghost:hover,
.btn-box--ghost:focus-visible {
    background: #c2a488;
    color: #0F0F0F;
}
.btn-box--ink {
    background: #0F0F0F;
    color: #EFE2C7;
}
.btn-box--ink:hover,
.btn-box--ink:focus-visible {
    background: #1A1A1A;
}
.btn-box--ghost-ink {
    background: transparent;
    color: #0F0F0F;
    border: 1.5px solid #0F0F0F;
}
.btn-box--ghost-ink:hover,
.btn-box--ghost-ink:focus-visible {
    background: #0F0F0F;
    color: #EFE2C7;
}


/* ── Get Directions popover ────────────────────────────────────────────────
   Native <details> control: the <summary> is the trigger (styled by whatever
   btn-box variant the caller passes), the menu floats below it. See
   inc/get-directions.php + assets/js/get-directions.js. The menu is an INK
   panel with cream text so it reads as the ink trigger button opening
   downward — one continuous object, not a separate cream card.
   ─────────────────────────────────────────────────────────────────────────── */
.get-directions {
    position: relative;
    display: inline-flex;
}
.get-directions__trigger {
    /* btn-box variant supplies the look; just kill the disclosure marker and
       seat the caret. */
    list-style: none;
    cursor: pointer;
}
.get-directions__trigger::-webkit-details-marker { display: none; }
.get-directions__trigger::marker { content: ''; }
.get-directions__caret {
    flex: 0 0 auto;
    margin-left: -2px;
    transition: transform 180ms ease;
}
.get-directions[open] .get-directions__caret { transform: rotate(180deg); }

.get-directions__menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    min-width: max(100%, 184px);
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--ssb-ink, #0F0F0F);
    border: 1px solid var(--hairline-cream, rgba(254, 254, 254, 0.14));
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
.get-directions--center .get-directions__menu { left: 50%; transform: translateX(-50%); }
.get-directions--end .get-directions__menu { left: auto; right: 0; }
.get-directions--up .get-directions__menu { top: auto; bottom: calc(100% + 8px); }

.get-directions__opt {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: none;
    cursor: pointer;
    font-family: 'Averia Libre', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    color: var(--ssb-cream, #EFE2C7);
}
/* Faint separator between rows only (none above the first) — on ink the rows
   need a hairline to read as a list. */
.get-directions__opt + .get-directions__opt {
    border-top: 1px solid var(--hairline-cream, rgba(254, 254, 254, 0.14));
}
.get-directions__opt:hover {
    background: rgba(254, 254, 254, 0.10);
}
.get-directions__opt:focus-visible {
    background: rgba(254, 254, 254, 0.10);
    outline: 2px solid var(--ssb-cream, #EFE2C7);
    outline-offset: -2px;
}
/* Leading brand/utility icon — monochrome cream on the ink ground. */
.get-directions__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ssb-cream, #EFE2C7);
}
.get-directions__icon svg { width: 100%; height: 100%; }
.get-directions__copy-done { display: none; }
.get-directions__copy.is-copied .get-directions__copy-label { display: none; }
.get-directions__copy.is-copied .get-directions__copy-done {
    display: inline;
    color: var(--ssb-red, #d32f2f);
    font-weight: 700;
}

/* In stacked button rows on mobile, match the full-width siblings. */
@media (max-width: 600px) {
    .btn-row .get-directions,
    .today__cta-row .get-directions { display: flex; width: 100%; }
    .btn-row .get-directions__trigger,
    .today__cta-row .get-directions__trigger { width: 100%; justify-content: center; }
}


/* ── Front hero (simple) ───────────────────────────────────────────────── */
.front-hero--simple {
    position: relative;
    background: var(--ssb-ink);
    color: var(--ssb-cream);
    padding: 90px 32px 100px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.front-hero--simple .front-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.front-hero--simple .front-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.35;
}
.front-hero--simple .front-hero__bg-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(15,15,15,0.4) 0%, rgba(15,15,15,0.85) 70%, rgba(15,15,15,0.95) 100%);
    pointer-events: none;
}
.front-hero--simple .front-hero__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    z-index: 2;
    line-height: 0;
}
.front-hero--simple .front-hero__ribbon svg {
    width: 100%;
    height: auto;
    display: block;
}
.front-hero--simple .front-hero__inner {
    position: relative;
    z-index: 3;
/*    max-width: 1100px;*/
    margin: 0 auto;
    padding-top: 80px;
}
.front-hero--simple .front-hero__eyebrow {
  
    color: var(--ssb-tan);
  
}

.front-hero--simple .front-hero__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Ultra", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(62px, 11.5vw, 176px);
    line-height: 0.85;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}
.front-hero--simple .front-hero__title-line {
    display: block;
}
.front-hero--simple .front-hero__title-line--cream {
    color: var(--ssb-cream);
}
.front-hero--simple .front-hero__title-line--red {
    color: var(--ssb-red);
    margin-top: -0.04em;
}
.front-hero--simple .front-hero__tagline {
    max-width: 640px;
    margin: 1rem auto;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ssb-cream);
}
.front-hero--simple .front-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
}
.front-hero--simple .front-hero__ship-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ssb-tan);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-left: 6px;
    transition: color 150ms ease;
}
.front-hero--simple .front-hero__ship-link:hover,
.front-hero--simple .front-hero__ship-link:focus-visible {
    color: var(--ssb-cream);
}
.front-hero--simple .front-hero__ship-arrow {
    transition: transform 150ms ease;
}
.front-hero--simple .front-hero__ship-link:hover .front-hero__ship-arrow {
    transform: translateX(4px);
}
@media (max-width: 760px) {
    .front-hero--simple {
        padding: 70px 18px 80px;
    }
    .front-hero--simple .front-hero__inner {
        padding-top: 60px;
    }
   /* .front-hero--simple .front-hero__title {
        font-size: 18vw;
    }*/
    .front-hero--simple .front-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .front-hero--simple .btn-box {
        justify-content: center;
    }
    .front-hero--simple .front-hero__ship-link {
        justify-content: center;
        margin: 6px 0 0;
    }
}


/* ── Text ticker ───────────────────────────────────────────────────────── */
/* Auto-scrolls horizontally. The container carries the visual frame —
   red bg + hand-drawn squiggle borders top + bottom (repeating SVG at
   ~200px tile width). The inner .text-ticker__viewport is the scroll
   surface — overflow:hidden normally; on prefers-reduced-motion the
   animation halts and the viewport switches to user-swipable horizontal
   overflow so the items remain reachable. */
.text-ticker {
    position: relative;
    background-color: var(--ssb-red);
    color: var(--ssb-cream);
    /* Top + bottom seams are produced by .has-wavy-edge-top /
       .has-wavy-edge-bottom utilities applied to the ticker — see below.
       No background-image rule here — those utilities own the edges. */
}
.text-ticker__viewport {
    overflow: hidden;
    white-space: nowrap;
}
.text-ticker__track {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    padding: 1.5rem;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    animation: ssb-ticker-scroll 40s linear infinite;
}
.text-ticker__item {
    display: inline-block;
}
.text-ticker__sep {
    color: var(--ssb-gold, #E5C875);
    width: 14px;
    height: 14px;
}
.text-ticker__sep.ornament--bolt {
    color: var(--ssb-cream);
    width: 10px;
    height: 18px;
}
@keyframes ssb-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Reduced motion: pause auto-scroll, hand control to the user via native
   horizontal overflow. Touch devices get pan-x; mouse users get a slim
   horizontal scrollbar. */
@media (prefers-reduced-motion: reduce) {
    .text-ticker__track {
        animation: none;
        transform: none;
    }
    .text-ticker__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: thin;
        scrollbar-color: var(--ssb-cream) transparent;
    }
    .text-ticker__viewport::-webkit-scrollbar {
        height: 6px;
    }
    .text-ticker__viewport::-webkit-scrollbar-thumb {
        background: var(--ssb-cream);
        border-radius: 3px;
    }
}


/* ── Inline ornament base ──────────────────────────────────────────────── */
/* Wrapper output by ssb_ornament(). Inline span containing an SVG that
   inherits currentColor. Default size is set per surface (utility bar,
   ticker, atmosphere); this base just locks layout. */
.ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: inherit;
    flex: none;
}
.ornament svg {
    width: 100%;
    height: 100%;
    display: block;
}
.site-utility-bar__star,
.site-utility-bar__sep {
    color: var(--ssb-red);
    width: 10px;
    height: 10px;
}


/* ── Atmosphere bar — RETIRED in Pass 2 (1.1.189) ──────────────────────── */
/* The `.atmosphere-bar` component was renamed to `.info-grid` (see
   ~line 6420 below) and the legacy CSS block was removed. Zero
   template / JS / JSON consumers remained — verified by grep across
   themes/brats/ before deletion. */


/* ── Brathaus menu pathway ─────────────────────────────────────────────── */
.brathaus {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
    padding: 96px 32px 110px;
    position: relative;
    overflow: hidden;
}
.brathaus__head {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 56px;
}
.brathaus__eyebrow {
    margin: 0 0 14px;
    color: var(--ssb-tan);
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.brathaus__title.styled-header {
    margin: 0;
    color: var(--ssb-cream);
    line-height: 0.95;
}
/* Brathaus title overrides: tighten size on dark surface. */
.brathaus__title .styled-header__line--script {
    color: var(--ssb-tan);
}
.brathaus__title .styled-header__line--bold {
    color: var(--ssb-cream);
}
.brathaus__lede {
    margin: 18px auto 0;
    font-style: italic;
    color: var(--ssb-tan);
    max-width: 580px;
  
}
/* Grid container only — tiles inherit from the canonical .card system.
   Matches the gap token used by .router-cards for cross-section rhythm. */
.brathaus__grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.brathaus__grid > .card {
    /* Cancel the canonical .card bottom-margin since the grid gap handles
       spacing. Also lets cards stretch to equal column heights. */
    margin-bottom: 0;
    max-width: 100%;
    height: 100%;
    /* WebKit auto-min-size guard. The tracks are minmax(0,1fr), but a grid
       item's default min-width:auto resolves to its min-content width — and
       because each card holds a large image (width:100% of a 1024px source),
       Safari refuses to shrink the card below that intrinsic width, so cards
       overflow their tracks and overlap on resize (Chrome clamps this and
       can't reproduce it). min-width:0 lets the item honor the 1fr track;
       min-height:0 mirrors it for the column-flex / aspect-ratio media.
       Companion to the grid-level minmax(0,1fr) fix — see
       feedback_safari_1fr_grid_track_lock. */
    min-width: 0;
    min-height: 0;
}
@media (min-width: 600px) {
    .brathaus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .brathaus__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* 4-col packs tighter than 3-col at the same gap, so the ceiling
           is lifted here. Without this the cards visually huddle on wide
           viewports — the section padding and centering margins keep
           growing while the inter-card gap stayed pinned at 28px. */
        gap: clamp(1.25rem, 2.75vw, 2.25rem);
    }
}
@media (max-width: 600px) {
    .brathaus { padding: 64px 16px 72px; }
}


/* ── Shop pathway (Bring the flavor home) ──────────────────────────────── */
.shop-pathway {
    background: var(--ssb-cream);
    color: var(--ssb-ink);
    padding: 96px 32px;
}
.shop-pathway__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}
.shop-pathway__media {
    margin: 0;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border: 1px solid var(--ssb-ink);
    background: var(--ssb-ink-soft);
}
.shop-pathway__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shop-pathway__eyebrow {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ssb-ink);
    opacity: 0.7;
}
.shop-pathway__title,
.shop-pathway__title.styled-header {
    margin: 0;
    color: var(--ssb-ink);
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
/* If the styled-header treatment IS applied (script + bold pair), the
   pattern's own type rules win. The plain-h2 fallback above only kicks
   in when the heading text isn't in the styled-header definitions map —
   i.e. for marketing/utility headers per the Imperial Script reservation
   policy in CLAUDE.md. */
.shop-pathway__body {
    margin-top: 22px;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    max-width: 46ch;
    color: var(--ssb-ink);
}
.shop-pathway__stats {
    list-style: none;
    margin: 28px 0 0;
    /* Top edge is a hand-drawn squiggle SVG repeating horizontally
       (~129px native tile width). Replaces the prior 1px ink rule. */
    padding: 22px 0 0;
    border-top: 0;
/*    background-image: url('../svg/ornaments/divider-rough.svg');*/
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 129px auto;
    color: var(--ssb-ink);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.shop-pathway__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.shop-pathway__stat-value {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: var(--ssb-red);
    letter-spacing: -0.01em;
    line-height: 1;
}
.shop-pathway__stat-label {
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.shop-pathway__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}
@media (max-width: 1100px) {
    .shop-pathway__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .shop-pathway__media {
        aspect-ratio: 4 / 3;
        max-width: 600px;
    }
}
@media (max-width: 600px) {
    .shop-pathway { padding: 64px 16px; }
    .shop-pathway__stats { grid-template-columns: 1fr 1fr; }
}


/* ── Heritage section (Red & White) ────────────────────────────────────── */
.heritage {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
    padding: 110px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.heritage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(194, 164, 136, 0.08), transparent 60%);
    pointer-events: none;
}
.heritage__inner {
    max-width: 100vw;
    margin: 0 auto;
    position: relative;
}
.heritage__eyebrow {
    margin: 0 0 18px;
    color: var(--ssb-tan);
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.heritage__title.styled-header {
    margin: 0 0 8px;
    color: var(--ssb-cream);
}
.heritage__title .styled-header__line--script {
    color: var(--ssb-red);
}
.heritage__title .styled-header__line--bold {
    color: var(--ssb-cream);
}
.heritage .brat-reveal-section {
    margin-top: 40px;
}
.heritage .heritage__brat-meta,
.history-twoup .heritage__brat-meta {
    color: var(--ssb-cream);
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
}
.heritage .heritage__brat-meta em,
.history-twoup .heritage__brat-meta em {
    color: var(--ssb-gold);
    font-weight: 700;
}
.heritage__meta {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 56px;
    flex-wrap: wrap;
    color: var(--ssb-tan);
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}
.heritage__meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.heritage__meta-value {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: var(--ssb-cream);
    line-height: 1;
/*    letter-spacing: -0.01em;*/
    text-transform: none;
    font-style: normal;
}
.heritage__meta-label {
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.3em;
}
.heritage__read {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    color: var(--ssb-cream);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--ssb-tan);
    padding-bottom: 6px;
    transition: color 150ms ease, border-color 150ms ease;
}
.heritage__read:hover,
.heritage__read:focus-visible {
    color: var(--ssb-red);
    border-color: var(--ssb-red);
}
@media (max-width: 760px) {
    .heritage {  padding: 4rem 0; }
    .heritage__meta { gap: 28px; }
    .heritage__meta-value { font-size: 30px; }
}


/* ── Catering / "Feeding a tailgate?" ──────────────────────────────────── */
.catering {
    background: var(--ssb-cream);
    color: var(--ssb-ink);
    padding: 96px 32px;
}
.catering__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}
.catering__copy { min-width: 0; }
.catering__eyebrow {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ssb-ink);
    opacity: 0.7;
}
.catering__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ssb-ink);
}
.catering__title em {
    font-style: normal;
    color: var(--ssb-red);
}
.catering__body {
    margin-top: 22px;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    max-width: 46ch;
}
.catering__usecases {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.catering__usecases li {
    border: 1px solid var(--ssb-ink);
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.catering__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}
.catering__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 110px;
    gap: 10px;
}
.catering__photo { margin: 0; overflow: hidden; }
.catering__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.catering__photo:hover img { transform: scale(1.04); }
.catering__photo--1 { grid-column: span 6; grid-row: span 2; }
.catering__photo--2 { grid-column: span 3; grid-row: span 2; }
.catering__photo--3 { grid-column: span 3; grid-row: span 1; }
.catering__photo--4 { grid-column: span 3; grid-row: span 1; }
.catering__photo--5 { grid-column: span 6; grid-row: span 2; }
@media (max-width: 1100px) {
    .catering__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 600px) {
    .catering { padding: 64px 16px; }
    .catering__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 130px;
    }
    .catering__photo--1 { grid-column: span 2; grid-row: span 1; }
    .catering__photo--2 { grid-column: span 1; grid-row: span 1; }
    .catering__photo--3 { grid-column: span 1; grid-row: span 1; }
    .catering__photo--4 { grid-column: span 1; grid-row: span 1; }
    .catering__photo--5 { grid-column: span 2; grid-row: span 2; }
}


/* ==========================================================================
   FRONT-PAGE 2026 REDESIGN — SVG ornament progressive enhancement
   --------------------------------------------------------------------------
   Layered on top of the base block above. Hand-drawn squiggle SVGs replace
   flat CSS-line dividers. Buttons stay rectangular per the brand system —
   the prior `.btn-box::before` "roughened silhouette" mask treatment was
   RIPPED (2026-05-30, version 1.1.195) after it produced cream-on-tan
   invisible text in the Order mega-menu Build-a-Box CTA, first-hover
   mask-swap flicker on ghost variants, and a double-edge read where the
   mask alpha didn't match the button's content area. See refusal #X in
   `project-support-material/brand-refusal-list.md`. Assets
   (btn-edge.svg + btn-edge-outline.svg) left on disk; nothing references
   them now.
   ========================================================================== */

/* ── Horizontal squiggle dividers — RETIRED in Pass 1 patch (section-system) ─
   All 6 legacy `.<surface>__divider` aliases AND their surface-scoped
   copies have been deleted from this file (Pass 1 patch, 2026-05-29).
   Grep confirmed zero PHP/HTML/JS references in themes/brats/**/* before
   removal. Their visual job is fully owned by the shared `.eyebrow__divider`
   utility a few hundred lines below in the SHARED UTILITIES block.
   Removed selectors: .front-hero--simple .front-hero__divider,
   .brathaus__divider, .shop-pathway__divider,
   .heritage__divider, .catering__divider.
   See section-system Pass 1 spec. */

/* ── Box buttons: roughened mask treatment — RIPPED 2026-05-30 ─────────── */
/* The `.btn-box::before` mask block previously here (~70 lines, screen.css
   versions 1.1.95–1.1.194) overrode the base `.btn-box` background to
   transparent and painted the button as a masked ::before. It caused:
     - Order mega-menu Build-a-Box CTA: tan `::before` painted under the
       cream button text inherited from `.order-hero__link` → invisible
     - Ghost variants: first-hover SVG fetch on mask-URL swap → visible
       flicker; mask outline + filled-on-hover read as double-bordered
     - Home hero / Bring-the-Flavor-Home / Feeding-a-Tailgate buttons:
       same flicker + double-edge artefacts
   The base `.btn-box` block ~700 lines up (square solid bg, 1.5px ghost
   border, brand-correct radii) is now the single source of truth.
   See refusal: "No torn/rough-mask treatment on .btn-box. Squared CTAs
   per the base block; the design system explicitly prefers solid
   rectangles to roughened silhouettes." */


/* ── Marquee item polish ───────────────────────────────────────────────── */
/* Confirm the condiment marquee items are 120px max with no inherited
   background. Image is contained inside the box (no overflow). */
.section-marquee-scroll {
    background: transparent;
}
.marquee-advanced,
.marquee-advanced__collection,
.marquee-advanced__item {
    background: transparent;
}
.marquee-advanced__item {
    max-width: 120px;
    max-height: 120px;
}
.marquee-advanced__item img {
    max-width: 100%;
    max-height: 100%;
    background: transparent;
}


/* ── Site logo containment in nav bar ──────────────────────────────────── */
/* Mirror of the inline-style fixes in nav-main.php so the logo doesn't
   overflow on desktop. The nav-main.php inline styles previously used
   absolute positioning + a negative-top "banner-bg" pattern that escaped
   the nav. Now: natural flow, fixed pixel size. */
.home-link-contents-wrapper {
    position: static;
    width: auto;
    display: inline-flex;
    align-items: center;
    left: auto;
    top: auto;
}
.home-link-logo-wrapper {
    position: static;
    width: 56px;
    margin: 0;
}
.home-link-logo-wrapper svg.main-logo {
    width: 100% !important;
    height: auto;
    display: block;
}
.home-link-banner-bg {
    display: none;
}
/* Mobile: the logo sits at the top of the full-screen nav overlay, so it can
   be far larger than the 56px desktop nav-bar mark. Breakpoint matches the nav
   mobile range (max-width:850px), not the old 768px, so the size is consistent
   across the whole mobile-nav range. */
@media screen and (max-width: 850px) {
    .home-link-logo-wrapper {
        width: 130px;
        margin: auto;
    }
    .home-link-contents-wrapper {
        position: static;
        margin: 0;
        top: auto;
        left: auto;
    }
}


/* ── Reduced-motion in-place fallbacks ─────────────────────────────────── */
/* The hero animate-text-reveal and the image marquee are GSAP-driven.
   When the user prefers reduced motion, the JS bails so words never get
   the initial yPercent: 110 hide state and the marquee never installs
   transforms. Belt-and-suspenders: even if some code path applied a
   transform, force it back to identity here so the final composition
   renders in-place.

   IMPORTANT: do NOT reset .brat-reveal-section transforms here. Under
   reduced motion, extras.js calls applyFinalState() which sets the END
   state via gsap.set( imageWrap, { x: slideX } ) on mobile and draws
   the inter-brat arrow. A blanket transform: none !important would
   defeat that intentional inline transform and leave the brats sitting
   in their pre-animation initial position. The arrow likewise needs
   its strokeDashoffset to stay at 0; don't touch it here. */
@media (prefers-reduced-motion: reduce) {
    .animate-text-reveal,
    .animate-text-reveal * {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    .marquee-advanced__scroll,
    .marquee-advanced__collection {
        transform: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   SECTION SYSTEM — canonical stack-section primitives (Pass 1)
   --------------------------------------------------------------------------
   First-pass extraction of the global section / layout / texture system
   from the per-page section names (.catering-section, .business-gifting
   __section-*, etc) into one reusable .section + archetype + surface
   contract. Pass 1 (1.1.188) shipped the CSS + `.catering-section` alias.
   Pass 2 (1.1.189) migrated 15 catering / page-template emissions and 4
   front-page sections to `.section`, then retired the alias.

   Authoring contract:
     .section                          // base wrapper
       .section__inner                 // max-width + center
         .section__head                // centered eyebrow + h2 + intro
           .section__title
           .section__intro             // italic Averia, small lead under title
           .section__bridge            // upright Averia, large neutral lead
         .section__body                // body content owns its own layout
           .section__body--statement   // single x-large statement on contrast
         .section__cta                 // button row

   .section__bridge vs .section__intro:
     - .section__intro is the canonical italic-Averia small lead under a
       section title — the "subhead with attitude" register.
     - .section__bridge is the upright-Averia, larger, more neutral lead
       used between head and structured content below (lists, forms,
       card grids) when the connector role is "lead-in sentence," not
       "subheaded subtitle." Folded out of two near-identical careers
       per-section bridges (1.1.193). Same 56ch max + opacity register.

   .section__body--statement: a single-paragraph beat on a contrast ground
     (ink/red surface), x-large Averia, centered narrow column. Use for
     disclosure beats, heritage callouts, single-line manifestos — any
     section that IS one paragraph. Pairs with --ink/--red surface
     modifiers.

   Archetype modifiers (compose with .section):
     --split        // 2-col grid (media + copy), collapses <=781px (= --mobile)
     --split--reverse
     --cards        // auto-fit card grid (min 280px)
     --band         // tight text band, centered, narrow inner
     --fineprint    // very tight + tiny + dimmed
     --form         // composition hook — no rules; use .ssb-form-box inside
     --faq          // narrow inner (760px); .faq-section owns its internals
     --status       // composition hook — no rules; use .info-grid inside

   Surface (ground) modifiers:
     --cream / --tan / --ink / --red
     .section--red is STRUCTURALLY restricted to .section--band (compound
     selector). Bare .section--red intentionally paints nothing.

   Brand-carrier discipline (see project-support-material/brand-design-system.md
   + memory feedback_decorative_svg_darker_than_bg + feedback_organic_shape_aesthetic):
     - ≤1 Imperial Script line per page (allowlist-only, see
       ssb_get_styled_header_definitions())
     - ≤2 heritage carriers per page from {Imperial Script, Legendary banner,
       Over-70 emblem, Bull}
     - 1–2 organic-shape frames per page max — singular things only, never
       around card grids
     - Butcher texture: tan ground only (CLAUDE.md Conventions)
     - Wavy/torn edges: section above owns the seam (.has-*-edge-bottom)
     - Decorative SVGs DARKER than bg (X-ray refusal)
     - Per-section density: ONE primary carrier + optional eyebrow squiggle

   Tokens live in :root near line ~75 (--ssb-section-*). Surface tokens
   (--ssb-cream/-tan/-ink/-red) are GLOBAL — they resolve site-wide.
   Page-scoped tokens (e.g. `.business-gifting { --ssb-tan: …; }`) override
   per-surface where intentional.

   Hero family (.front-hero, .catering-hero, .business-gifting__hero,
   .watch-landing__hero) is out of section-system scope and keeps its own
   rules.
   ========================================================================== */

/* ── Base wrapper ───────────────────────────────────────────────────────── */
/* Pass 2 (screen.css 1.1.189): `.catering-section` Pass-1 aliases retired
   after template migration of all 15 catering / page-template emissions
   to `.section`. */
.section {
    padding: var(--ssb-section-y) var(--ssb-section-x);
    position: relative;
}
.section__inner {
    max-width: var(--ssb-section-max);
    margin-inline: auto;
    position: relative;
}

/* ── Archetype: split (media + copy, 2-col grid) ───────────────────────── */
.section--split .section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
/* Section-system mobile breakpoint = 781px (= `--mobile`, the Gutenberg
   stack point). Nav uses 850px independently. */
@media (max-width: 781px) {
    .section--split .section__inner {
        grid-template-columns: 1fr;
    }
}
/* Reverse order: copy on left, media on right. We use `order` on the
   direct children rather than `direction: rtl` so text alignment inside
   the copy column is unaffected and inline content remains LTR. */
.section--split--reverse .section__media { order: 2; }
.section--split--reverse .section__copy  { order: 1; }

/* In a split, the section head is left-aligned (lives in the copy column,
   not centered above both columns). */
.section--split .section__head {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
}

/* ── Archetype: cards (auto-fit card grid) ─────────────────────────────── */
.section--cards .section__cards {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.section--cards .section__cards--wide,
.section--cards.section--wide .section__inner {
    max-width: var(--ssb-section-max-wide);
}

/* ── Archetype: band (tight, centered, narrow) ─────────────────────────── */
.section--band {
    padding-block: var(--ssb-section-y-band);
}
.section--band .section__inner {
    max-width: var(--ssb-section-max-narrow);
    text-align: center;
}

/* ── Archetype: fineprint (very tight, tiny type, dimmed) ──────────────── */
.section--fineprint {
    padding-block: var(--ssb-section-y-fineprint);
}
.section--fineprint .section__inner {
    max-width: var(--ssb-section-max-narrow);
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    line-height: 1.5;
    opacity: 0.72;
}

/* ── Archetype: form (composition hook, no rules) ──────────────────────── */
/* Form section is composition: `.section` + `.ssb-form-box` inside
   `.section__inner`. This modifier is a template authoring hint with zero
   rules — promote when form-section-specific rhythm is needed. */
.section--form { /* intentionally empty */ }

/* ── Archetype: faq (narrow inner) ─────────────────────────────────────── */
/* The existing `.faq-section` component already handles all internals
   (accordion, dividers, hover). `.section--faq` only sets the max-width
   so a `.section.section--faq` wrapper composes cleanly around it.
   Don't duplicate .faq-section rules here. */
.section--faq .section__inner {
    max-width: var(--ssb-section-max-faq);
}
/* When composing `.section.section--faq` around `.faq-section`, the section
   system owns the vertical rhythm; the inner faq-section's own padding is
   zeroed so the two wrappers don't double-pad. */
.section--faq > .section__inner > .faq-section {
    padding: 0;
}

/* ── Archetype: status (composition hook, no rules) ────────────────────── */
/* The existing `.info-grid` component already does the work; this modifier
   is just a catalog entry for template clarity. */
.section--status { /* intentionally empty */ }

/* ── Surface (ground) modifiers ────────────────────────────────────────── */
/* These set background + foreground color. Inheritance carries the text
   color through `.section__title` / `.section__intro` / `.section__body`
   so each section can ship its own ground without per-page rules. */
.section--cream { background: var(--ssb-cream); color: var(--ssb-ink); }
/* Sourced from the preset, not --ssb-tan, because --ssb-tan is a scattered accent-text-color token (color: not background:); the preset is the canonical surface tan per brand-design-system.md §2 */
.section--tan   { background: var(--wp--preset--color--primary, #C2A488); color: var(--ssb-ink); }
.section--ink   { background: var(--ssb-ink);   color: var(--ssb-cream); }
/* Red is the one ground that only composes with --band (a single-beat punctuation strip).
   Bare .section--red intentionally has no rules — see brand-design-system.md §2 (red budget). */
.section--band.section--red { background: var(--ssb-red); color: var(--ssb-cream); }

/* ── Section head (canonical) ──────────────────────────────────────────── */
/* Hoisted from `.business-gifting__section-head/-title/-intro` (Pass 1).
   `.catering-section__head` alias retired in Pass 2 (1.1.189) after the 15
   catering templates migrated to `.section__head`.

   The business-gifting alias is kept verbatim — that page hasn't been
   migrated yet and the alias is structurally identical to `.section__head`.

   These rules deliberately do NOT collide with the styled-header pattern
   (screen.css ~917). The styled-header rules target `.styled-header__line`,
   not the `<h2>` itself, so when `ssb_render_header()` emits markup inside
   `.section__head`, the two systems coexist: `.section__title` sets the
   plain-h2 fallback, `.styled-header__line--*` overrides for styled heads.

   (The `.business-gifting__section-head/-title/-intro` aliases were retired
   when /business-gifting migrated to canonical `.section__*` head markup,
   2026-06-05.) */
.section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm, 0.5rem);
    max-width: 760px;
    margin: 0 auto var(--ssb-section-head-mb);
}
/* Left-aligned variant for use in split layouts and any head that wants
   to read as a column lead instead of a centered banner. */
.section__head--start {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
}
.section__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    /* color inherits from surface modifier */
}
.section__intro {
/*    margin: 0;*/
    max-width: 56ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: 0.82;
    /* color inherits from surface modifier */
}
.section__intro.aligncenter {
  margin: auto;
}
/* Bridge — upright Averia lead between section head and structured content
   below (lists, forms, card grids). See the SECTION SYSTEM block-top comment
   for the .section__intro vs .section__bridge distinction. Font-size floor
   is `--large` (~18px) so it never falls under 16px on mobile (refusal #22). */
.section__bridge {
    margin: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    max-width: 56ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: normal;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.55;
    opacity: 0.78;
    /* color inherits from surface modifier */
}
/* Body owns its own layout — no required rules here, by design. */
.section__body { /* intentionally empty — body content authors its own layout */ }
/* Body modifier: single x-large statement on contrast ground. Used for
   disclosure beats, heritage callouts, single-line manifestos — any section
   that IS one paragraph (no head, no eyebrow). Pairs with --ink/--red surface
   modifiers (color inherits from the surface). */
.section__body--statement {
    margin: 0 auto;
    max-width: 56ch;
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--x-large, 1.375rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
/*    text-align: center;*/
    /* color inherits from surface modifier (--ink → cream, --red → cream) */
}
.section__body--statement em {
    font-style: italic;
    opacity: 0.92;
}

/* CTA row sits below body content; centered, wraps on small viewports. */
.section__cta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--ssb-section-cta-mt);
    flex-wrap: wrap;
}

/* ── Torn-paper section seams ──────────────────────────────────────────── */
/* Mirror of the wavy-edge contract a few hundred lines below. Same
   --prev-edge-color / --next-edge-color authoring contract. Strip is
   12px (vs 8px wavy) — torn paper needs more vertical depth to read as
   a torn edge rather than a soft wave. The pseudo lives inside the
   section so overflow:hidden parents don't clip it; positioned at
   top/bottom: -1px to avoid hairline gaps on subpixel-rounded layouts.

   When to reach for torn vs wavy: wavy is the default kraft seam — it
   chapters one kraft section into the next inside a continuous composition.
   Torn is for kraft ISLANDS — a single kraft section bracketed by paint-free
   neighbors above and below, where the gesture is "a sheet pulled off the
   butcher roll and dropped onto the page," not "the next paragraph of the
   same document." If both neighbors are also kraft, you want wavy. */
.has-torn-edge-bottom,
.has-torn-edge-top {
    position: relative;
    isolation: isolate;
}
.has-torn-edge-bottom::after,
.has-torn-edge-top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 4;
    pointer-events: none;
    -webkit-mask-image: url('../svg/ornaments/torn-paper-edge.svg');
            mask-image: url('../svg/ornaments/torn-paper-edge.svg');
    -webkit-mask-size: 200px 100%;
            mask-size: 200px 100%;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    -webkit-mask-position: center;
            mask-position: center;
}
/* Asset orientation: torn-paper-edge.svg places its opaque silhouette in the
   TOP of the artboard (flat top edge, ragged bottom edge). For the BOTTOM
   seam to read as "this section is torn at the bottom" (ragged points
   facing UP into the section we're tearing), the mask must be flipped.
   The TOP seam reads correctly in the natural orientation. This is the
   inverse of the wavy-edge precedent (whose SVG places alpha at the
   bottom). Verified via CDP screenshot 2026-05-29. */
.has-torn-edge-bottom::after {
    bottom: -1px;
    background-color: var(--next-edge-color, transparent);
    transform: scaleY(-1);
}
.has-torn-edge-top::before {
    top: -1px;
    background-color: var(--prev-edge-color, transparent);
}


/* ==========================================================================
   SHARED UTILITIES — class generalization (reduce section-bound naming)
   --------------------------------------------------------------------------
   First pass at extracting components that were previously duplicated under
   per-section names (.front-hero__eyebrow, .atmosphere-bar__eyebrow, etc).
   Section-specific classes still exist as colour/size hooks where needed,
   but the base behavior lives here. Future templates should prefer these
   generic classes; legacy per-section dividers/eyebrows remain valid via
   the cascade until each section is migrated.
   ========================================================================== */

/* ── Swipe row — mobile horizontal scroll-snap carousel ────────────────────
   Opt-in modifier for any card/tile GRID. Add `.swipe-row` to the grid
   WRAPPER and, at/below the site mobile breakpoint (--mobile = 781px; media
   queries can't read the custom prop, so it's hardcoded to match), the grid
   stops stacking and becomes a horizontal scroll-snap rail: each card is
   ~80% of the container so the next card peeks, and swipe/scroll snaps
   card-to-card. Pure CSS — no JS. Above the breakpoint the host grid's own
   column rules are untouched.

   Generalizes the per-section carousels previously hand-written on
   `.biz-gifting-packages__grid` and `.photo-mosaic` (those can migrate to
   this class as they're touched). Lives here in SHARED UTILITIES — physically
   AFTER the front-page glue — so this same-specificity modifier wins over a
   host grid's own `grid-template-columns` at the mobile breakpoint without a
   specificity hack.

   The host grid's existing `gap` carries into the rail unchanged. Per-wrapper
   tunable: `--swipe-card-width` (default 80%) controls the card width / peek.
   `min-width:0` on the items is the WebKit auto-min guard (see the brathaus
   card fix / feedback_safari_1fr_grid_track_lock). */
@media (max-width: 781px) {
    .section__cards.swipe-row {
      grid-template-columns: none;
    }
    .swipe-row {
        display: grid;                 /* self-sufficient if the host isn't a grid */
        grid-auto-flow: column;
        grid-auto-columns: minmax(var(--swipe-card-width, 80%), 1fr);
        grid-template-columns: none;   /* cancel the host's stacked/multi-col template */
        grid-template-rows: auto;      /* collapse any multi-row template to one rail */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;           /* breathing room for the scrollbar affordance */
    }
    .swipe-row > * {
        scroll-snap-align: start;
        min-width: 0;
    }
}

/* ── Eyebrow row (text flanked by two squiggle dividers) ───────────────── */
/* Markup contract:
       <p class="eyebrow">
         <span class="eyebrow__divider" aria-hidden="true"></span>
         Today on State Street
         <span class="eyebrow__divider" aria-hidden="true"></span>
       </p>
   Inherits color from the surrounding section. Single-divider variant:
   include only one .eyebrow__divider span. */
.eyebrow {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-style: italic;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 16px;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.72;
}
.eyebrow--centered {
    display: flex;
    justify-content: center;
    text-align: center;
}
.eyebrow__divider {
    display: inline-block;
    width: clamp(16px, 5vw, 64px);
    height: 5px;
    background-color: currentColor;
    -webkit-mask-image: url('../svg/ornaments/divider-horizontal.svg');
            mask-image: url('../svg/ornaments/divider-horizontal.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    flex: none;
}
.eyebrow--short .eyebrow__divider {
    width: 36px;
}


/* ── Butcher-paper texture overlay ─────────────────────────────────────── */
/* Subtle SVG grain layered over the section's existing background-color.
   Use on any tan/kraft surface to read as printed butcher paper rather
   than a flat field. Apply with `class="has-butcher-texture"` on the
   section element; the ::before lays the grain over the content's bg
   without disturbing layout.

   Note on blend modes: the prior version used mix-blend-mode: multiply
   to tint the underlying field. That was visually invisible because the
   grain SVG was nearly transparent — multiplying transparent×anything
   ≈ no-op. The new version uses straight alpha overlay (no blend mode)
   with a darker, more opaque grain SVG so the texture reads. */
.has-butcher-texture {
    position: relative;
    isolation: isolate;
}
.has-butcher-texture > * {
    position: relative;
    z-index: 1;
}
.has-butcher-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../svg/textures/butcher-paper.svg');
    background-repeat: repeat;
    background-size: 240px 240px;
    pointer-events: none;
    /* No mix-blend-mode here — straight alpha. The SVG itself carries
       the warm-brown color and per-pixel alpha that produces the grain. */
    /* Always fade the grain in at the top and out at the bottom so the
       texture never meets the neighboring section (or a wavy seam) with a
       hard edge — it reads as printed paper dissolving into the field, not
       a pasted-on swatch. This is the contract for EVERY textured surface,
       not just ones with a wavy seam; the status grid established the look.
       Proportional (20%) rather than a fixed pixel band so the fade depth
       scales with section height and stays balanced top-to-bottom. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}


/* ── Section background decoration (.section__decor) ────────────────────── */
/* Reusable decorative watermark/ornament layer: an SVG laid over a section's
   background at a different scale, BEHIND the content. Generalizes the old
   .history-year text stamps + .legacy__bull bull watermark into one utility.

   Containment: add `has-section-decor` to the SECTION (same contract as
   .has-butcher-texture — relative + clip + isolate, real children floated
   above). The decor element itself may also live inside a positioned
   descendant (e.g. .section__copy) to anchor to that column instead of the
   whole section; the section-level overflow:clip still contains the bleed.

   HARD BRAND RULE: decor must read DARKER than its surface, never lighter
   (X-ray refusal). --mask enforces this via the --decor-color token choice
   (default ink); --img enforces it via filter:brightness(0) crush to #000,
   which is darker than every ink ground (#0F0F0F / #1a1a1a).

   Authoring contract: the inline style on the element carries ONLY the
   per-asset facts (--decor-image + aspect-ratio for --mask; src + width/
   height attrs for --img). Size/opacity/offset tuning goes in a small
   scoped rule near the surface's CSS — NOT inline — because inline custom
   props would defeat the ≤768px mobile defaults below. Both variants are
   aria-hidden, pointer-events:none, never in flow or the a11y tree, and
   static by construction (no parallax, no animation). */
.has-section-decor {
    position: relative;
    overflow: clip;          /* contains the off-edge bleed — no h-scroll */
    isolation: isolate;
}
.has-section-decor > * {
    position: relative;
    z-index: 1;
}

.section__decor {
    --decor-size: clamp(8rem, 22vw, 18rem);
    --decor-size: clamp(30rem, 40vw, 30rem);
    --decor-opacity: 0.07;
    --decor-offset-x: 0px;   /* negative = bleed off the anchored edge */
    --decor-offset-y: 0px;
    position: absolute;
    z-index: 0;
    width: var(--decor-size);
    max-width: none;   /* decor is deliberately oversized — the global
                          img{max-width:100%} cap silently blocked the old
                          .legacy__bull 120vw mobile flood; opt out here */
    height: auto;
    opacity: var(--decor-opacity);
    pointer-events: none;
    user-select: none;
}

/* Position modifiers — anchor a corner; offsets nudge from that corner. */
.section__decor--top-right    { top: var(--decor-offset-y); right: var(--decor-offset-x); }
.section__decor--top-left     { top: var(--decor-offset-y); left: var(--decor-offset-x); }
.section__decor--bottom-right { bottom: var(--decor-offset-y); right: var(--decor-offset-x); }
.section__decor--bottom-left  { bottom: var(--decor-offset-y); left: var(--decor-offset-x); }

/* --img: heavy raster/micro-path assets (e.g. the 1.6MB brats-bull.svg,
   which must stay a lazy <img> per the heavy-SVG rule) crushed to solid
   #000 so a lighter-than-ground baked fill can't glow as an X-ray. Height
   comes from the <img> intrinsic ratio (ship width/height attrs for CLS). */
.section__decor--img {
    display: block;
    filter: brightness(0);
}

/* --mask: clean vector ornament tinted by a token (default ink). The span
   has no intrinsic ratio, so each use MUST set aspect-ratio inline beside
   --decor-image (square stamp = 1/1; the Today lockup = 821.4/300.4).
   Technique mirrors .eyebrow__divider. Source SVGs must be fill-clean (no
   internal <style>/.st0) — the mask ignores source color, but verify the
   file decodes (the XML `--`-in-comment trap fails silently). */
.section__decor--mask {
    display: block;
    background-color: var(--decor-color, var(--ssb-ink, #0F0F0F));
    -webkit-mask-image: var(--decor-image);
            mask-image: var(--decor-image);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* Mobile defaults: shrink + fade so a stamp never crowds copy on small
   screens (matches the old .history-year ≤768px treatment). Per-surface
   scoped rules out-specify this — re-tune inside their own ≤768px query. */
@media (max-width: 768px) {
    .section__decor {
        --decor-size: clamp(4rem, 28vw, 8rem);
        --decor-size: clamp(30rem, 40vw, 30rem);
        --decor-opacity: 0.05;
    }
}

/* Static by construction — decor never animates; guard kept for intent. */
@media (prefers-reduced-motion: reduce) {
    .section__decor { /* intentionally empty */ }
}


/* ── .info-grid (renamed from .atmosphere-bar) ─────────────────────────── */
/* Multi-card status grid — generic. Renamed from .atmosphere-bar so the
   pattern is reusable on any page that needs a "what's running right now"
   block. Section-bound modifiers can layer on top via context classes
   (e.g. .info-grid--front to alter spacing). The legacy .atmosphere-bar
   alias was retired in Pass 2 (1.1.189). */
.info-grid {
    background: var(--wp--preset--color--primary, #c2a488);
    color: var(--ssb-ink);
    padding: 72px 32px 80px;
}
.info-grid__head {
    text-align: center;
    margin: 0 auto 48px;
}
.info-grid__title {
    margin: 8px 0 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ssb-ink);
}
.info-grid__cards {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.info-grid__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 26px;
    position: relative; 
}
.info-grid__icon {
    width: 48px;
    height: 48px;
    color: var(--ssb-ink);
}
.info-grid__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.info-grid__label {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.info-grid__body {
    margin: 0;
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 34ch;
}
@media (max-width: 1100px) {
    .info-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
    .info-grid__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
    .info-grid { padding: 48px 16px 56px; }
    .info-grid__cards { grid-template-columns: 1fr; gap: 14px; }
    /* Single-column: center each card so it balances under the centered head
       instead of reading as a left-pinned column. (At 2/3/4-up the grid reads
       as columns and left-alignment is correct, so this is the 1-col case only.) */
    .info-grid__card { align-items: center; text-align: center; }
    .info-grid__body { margin-inline: auto; }
}


/* ── .inline-link (shared italic underlined text-link) ─────────────────── */
/* Generic third-CTA-cascade + inline section text-link. Italic Averia Libre
   700, underlined, with an ≥44px tap target via padding. Color resolves from
   `--inline-link-color` (default ink) so a surface can recolor it without a
   new class: e.g. on cream/dark grounds set `--inline-link-color:
   var(--ssb-red-deep)`; on tan it MUST stay ink (red fails on tan).
   `.inline-link--inverse` flips to cream for ink grounds. Ported from the
   retired `.business-gifting__textlink(--inverse)` rules. */
.inline-link {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--inline-link-color, var(--ssb-ink, #0F0F0F));
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    /* keep an ≥44px tap target without bloating layout */
    display: inline-block;
    padding: 11px 2px;
    line-height: 1.3;
}
.inline-link:hover,
.inline-link:focus-visible {
    text-decoration-thickness: 2.5px;
}
.inline-link--inverse {
    color: var(--ssb-cream, #EFE2C7);
}


/* ── .numbered-steps (semantic ordered process list) ───────────────────── */
/* Generic 2-up (→1-up @781px) numbered-step list: a semantic <ol> whose
   markers are large aria-hidden Bowlby numerals, paired with a label + desc.
   Ported from the retired `.business-gifting__steps/step/step-num/step-label/
   step-desc`. Color inherits from the surrounding surface. */
.numbered-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
}
.numbered-steps__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}
.numbered-steps__num {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    opacity: 0.9;
}
.numbered-steps__label {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.05;
    text-transform: uppercase;
}
.numbered-steps__desc {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 44ch;
}
@media (max-width: 781px) {
    .numbered-steps { grid-template-columns: 1fr; }
}


/* ── .stat-band (big-number proof band content) ────────────────────────── */
/* Generic centered statistic block for a contrast (ink) band: one oversized
   Bowlby figure with an optional accent `__mark`, a subordinate italic
   `__label`, a quieter `__micro` line, and an optional 2-up (→1-up @600px)
   `__tiles` grid of `.status-tile`s. Ported from the retired
   `.business-gifting__proof-*`. Color inherits from the surface; only `__mark`
   carries its own accent. The label→micro hierarchy is deliberate: the number
   leads, the label names it, the micro is a quiet third line (lower opacity +
   smaller). */
.stat-band__figure {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(3.5rem, 9vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
}
.stat-band__mark {
    color: var(--stat-band-mark-color, var(--ssb-red-deep, #A02523));
}
.stat-band__label {
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    letter-spacing: 0.04em;
}
.stat-band__micro {
    margin: 0.75rem auto 0;
    max-width: 48ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    /* Subordinate to the label: smaller, quieter, slightly tracked so it
       reads as the band's quiet third line — NUMBER → label → micro. */
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 0.62;
}
.stat-band__tiles {
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    max-width: 720px;
    text-align: left;
}
/* Informational tiles — no live dot; reset the component's stacked-use margin. */
.stat-band__tiles .status-tile { margin-top: 0; }
@media (max-width: 600px) {
    .stat-band__tiles {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .stat-band__tiles .status-tile__detail { margin-inline: auto; }
}


/* ── Eyebrow alignment — left-aligned divider sits AFTER text ──────────── */
/* For .eyebrow--short (single-divider variant on left-aligned content),
   the divider should sit AFTER the text — reads as a tail/underline
   rather than a leading rule. Uses flex order so the markup can stay
   "divider first" or "text first" without breaking. */
.eyebrow--short .eyebrow__divider {
    order: 2;
}


/* ── Wavy section seams ────────────────────────────────────────────────── */
/* Replaces flat color-on-color section boundaries with a hand-drawn wavy
   line. Implemented as a pseudo-element painted in the NEXT (or PREVIOUS)
   section's color, sitting inside the current section at its bottom (or
   top) edge, masked to the wavy SVG silhouette.

   The pseudo lives INSIDE the section so it survives parents that have
   overflow:hidden. The mask is the same edge-horizontal.svg in both
   cases — flipped via scaleY(-1) for the bottom variant.

   Each section needs:
     - the .has-wavy-edge-bottom and/or .has-wavy-edge-top class
     - --next-edge-color / --prev-edge-color set to the neighbor's bg

   Authoring contract for new sections: declare the neighbor colors once
   in the section's CSS block, then add the class. Don't hard-code colors
   in the utility itself. */
.has-wavy-edge-bottom,
.has-wavy-edge-top {
    position: relative;
    isolation: isolate;
}
.has-wavy-edge-bottom::after,
.has-wavy-edge-top::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 4;
    pointer-events: none;
    -webkit-mask-image: url('../svg/ornaments/edge-horizontal.svg');
            mask-image: url('../svg/ornaments/edge-horizontal.svg');
    -webkit-mask-size: 200px 100%;
            mask-size: 200px 100%;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
    -webkit-mask-position: center;
            mask-position: center;
}
.has-wavy-edge-bottom::after {
    /* Sit inside the section's bottom 8px. Mask alpha=1 in the lower
       portion (per the SVG); without flipping, the next-section color
       fills the lower portion of these 8px with a wavy upper boundary.
       Visually: the section's bg shows above the wavy line, the next
       section's color shows below it — and below that the actual next
       section continues seamlessly. */
    bottom: 0;
    background-color: var(--next-edge-color, transparent);
}
.has-wavy-edge-top::before {
    /* Mirror of the bottom variant for the top of a section. Flip via
       scaleY(-1) so the alpha=1 region sits in the UPPER portion of the
       8px strip — previous section's color above the wavy line, the
       section's own bg below. */
    top: 0;
    background-color: var(--prev-edge-color, transparent);
    transform: scaleY(-1);
}

/* Front-page neighbor-color assignments. Order on the page:
   hero(ink) → ticker(red) → info-grid(tan) → brathaus(ink) →
   shop-pathway(cream) → heritage(ink) → catering(cream) → marquee(cream) */
.xfront-hero--simple { --next-edge-color: var(--ssb-red); }
.text-ticker        { --prev-edge-color: var(--ssb-ink); --next-edge-color: var(--wp--preset--color--primary, #c2a488); }
.info-grid          { --prev-edge-color: var(--ssb-red); --next-edge-color: var(--ssb-ink); }
.brathaus           { --prev-edge-color: var(--wp--preset--color--primary, #c2a488); --next-edge-color: var(--ssb-cream); }
.shop-pathway       { --prev-edge-color: var(--ssb-ink); --next-edge-color: var(--ssb-ink); }
.heritage           { --prev-edge-color: var(--ssb-cream);--next-edge-color: var(--ssb-cream); }
.catering           { --prev-edge-color: var(--ssb-ink); --next-edge-color: var(--ssb-cream); }
/* Legacy band edge handshake. ABOVE the band: section-slideshow.php is a bare
   `.section` with NO surface modifier, so its wrapper shows the page/body
   background (#f3f3f3); the slideshow image itself is full-bleed, so this top
   seam is largely cosmetic. BELOW the band: the spaces section is
   `.section--tan` → the primary preset (≈ #C2A488, .section--tan resolves
   --wp--preset--color--primary). Patio was removed 2026-05-30, so spaces is
   now the direct next neighbor. Authored here (not in the utility) so the
   wavy seam blends into each real neighbor. */
.legacy {
    /* prev = the front-page catering section above (cream); next = spaces (tan).
       The catering section no longer paints its own bottom edge, so this top
       edge owns the cream→ink seam — paint cream, not the old near-white. */
    --prev-edge-color: var(--ssb-cream, #EFE2C7);
    --next-edge-color: var(--wp--preset--color--primary, #C2A488);
}

/* ============================================================
   LEGACY heritage band (front-page "Tradition starts here.")
   Ink surface, two-up: scroll-video tile (left) + left-aligned
   heritage copy (right), with a darkened bull watermark behind.
   Markup: template-parts/front-page/section-tradition.php
   ============================================================ */
.legacy {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.legacy .section__inner {
    position: relative;
    z-index: 1;
}

/* Bull watermark — the .section__decor--img utility (see the Section
   background decoration block). Asset: brats-bull-cropped.svg (the statue
   engraving, replaced 2026-06-04 — the old brats-bull.svg was corrupted by
   a past edit). brightness(0) crushes it to #000, darker than the #0F0F0F
   ink ground: a shadow INTO the dark, never a glow OUT of it.

   BULL CONVENTION (universal, any surface): the artboard's TOP-LEFT (head
   + horns) is the focal area. Render the bull LARGE, anchored bottom-right
   with negative offsets so the body runs off the corner and the head is
   what protrudes into the viewport.

   OPACITY MATH (dark-on-dark): #000 over #0F0F0F differs by only 15 RGB
   levels at FULL opacity, so the light-ground 5-18% decor envelope does
   NOT transfer here — 0.16 renders invisible (CDP-verified 2026-06-04).
   Usable dark-on-dark range is ~0.4-0.7. */
.legacy .section__decor--img,
.history-close .section__decor--img {
    --decor-size: clamp(420px, 48vw, 760px);
    --decor-opacity: 0.5;
    /* run the statue base off the corner; head stays in frame */
    --decor-offset-x: calc(var(--decor-size) * -0.16);
    --decor-offset-y: calc(var(--decor-size) * -0.22);
}

/* Front-page band: bigger bull + a verrry subtle radial lift under it
   (#0F0F0F → ~#1d1d1d) so the #000 crush has headroom to read. The lift
   is the SURFACE brightening — the decor itself stays darker than every
   pixel it sits on (brand rule intact). The gradient layers over the
   .section--ink paint. Values owner-tuned 2026-06-04: bull up to 100vw
   pulled 40% off the right edge; lift is a narrow ellipse centered where
   the head lands (58% across), fading over its full radius. */
.legacy .section__decor--img {
    --decor-size: clamp(520px, 100vw, 1060px);
    --decor-offset-x: calc(var(--decor-size) * -0.40);
}
.legacy.section--ink {
    background:
        radial-gradient(
            40% 120% at 58% 100%,
            #1d1d1d 0%,
            rgba(29, 29, 29, 0) 100%
        ),
        var(--ssb-ink, #0F0F0F);
}

.legacy__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: var(--spacing-3xl);
    align-items: center;
}

/* Video tile. Cream hairline (inset ring) separates the dark tile from the
   dark ground; soft drop lifts it. No scrim over the video. */
.legacy__media {

    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(239, 226, 199, 0.10),
        0 24px 60px -28px rgba(0, 0, 0, 0.7);
}
.legacy__media img {
  display: block;
}
.legacy__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Copy column — LEFT-aligned (overrides the dev's centered heritage block). */
.legacy__body {
    text-align: left;
    max-width: 48ch;
}
/* Flush-left styled header: kill the centered indent; script line red, bold
   line cream — reusing the .heritage__title precedent. */
.legacy__title .styled-header__line {
    padding-left: 0;
}
.legacy__title .styled-header__line--script {
    color: var(--ssb-red);
}
.legacy__title .styled-header__line--bold {
    color: var(--ssb-cream);
}

.legacy__emblem {
    width: clamp(180px, 18vw, 240px);
    height: auto;
    margin: var(--spacing-md) 0 var(--spacing-xl);
}
.legacy__emblem svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Subhead = Bowlby display, mirrors .section__title; plain text (NOT script). */
.legacy__subhead {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif; /* matches .section__title */
    font-size: clamp(30px, 4vw, 52px);
    text-transform: uppercase;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--ssb-cream);
    margin: 0 0 var(--spacing-lg);
}

.legacy__body p {
    color: rgba(239, 226, 199, 0.88); /* cream @ ~88% */
    line-height: 1.6;
}
.legacy__cta {
    margin-top: var(--spacing-xl);
}

/* Stack on the section system's mobile breakpoint (781px). Video is
   source-order first, so single-column naturally puts it on top. */
@media (max-width: 781px) {
    .legacy__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
}
/* Bull mobile flood-bleed: unlike the stamp default (shrink + hide), the
   bull deliberately floods past the bottom-right corner on small screens
   (the utility's max-width:none makes the 120vw real — the old
   .legacy__bull was silently capped at 100% by the global img max-width).
   offset-y inherits the desktop calc (-0.22 × size) so the head still
   protrudes top-left. Same dark-on-dark opacity math: ~0.4 band. */
@media (max-width: 560px) {
    .legacy .section__decor--img,
    .history-close .section__decor--img {
        /* Owner-tuned 2026-06-04: oversize hard (220vw) and pull more
           than half off the right edge — only the head/shoulder area
           (the artboard's top-left focus) stays in frame. */
        --decor-size: 220vw;
        --decor-opacity: 0.4;
        --decor-offset-x: -130vw;
    }
}

/* Reduced motion: nothing in this band animates. The scroll-video JS already
   bails (poster stands in) and adds .scroll-video--static; no transforms are
   authored here to reset, and we deliberately do NOT blanket-reset transforms
   (see the .brat-reveal-section warning elsewhere in this file). No-op guard
   kept for intent/documentation. */
@media (prefers-reduced-motion: reduce) {
    .legacy {
        /* intentionally empty — band is static by construction */
    }
}


/* =========================================================================
   FOOD / BAR MENU PAGES (single-menu.php)
   -------------------------------------------------------------------------
   Architecture:
     .menu-intro            ← eyebrow / h1 / subline / Food↔Bar pill toggle
     .section-nav           ← sticky rail (already styled above ~2243)
     .menu-section          ← top-level section (border-divided rows)
     .menu-section--chapter ← tan ground + butcher-texture chapter break
     .menu-group            ← optional sub-grouping inside a section
     .menu-item             ← one row: name · dotted leader · price + meta
     .menu-cta-strip        ← full-bleed footer band

   Surfaces stay on the page cream by default. Chapter sections opt in to
   the tan/butcher treatment by adding .menu-section--chapter +
   .has-butcher-texture + .has-wavy-edge-* (PHP emits all of those).
   ========================================================================= */

/* ── Intro band ───────────────────────────────────────────────────────── */
.menu-intro {
    padding: clamp(1.25rem, 3vw, 2rem) 1rem clamp(0.75rem, 2vw, 1.25rem);
}
.menu-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.menu-intro__eyebrow {
    margin: 0 0 0.5rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.75rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent, var(--ssb-red));
}
.menu-intro__title {
    margin: 0 0 0.5rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    /* Dark-throughout ground (2026-05-28 reboot) — cream type. */
    color: var(--wp--preset--color--text-white, #fefefe);
    text-align: left;
    text-transform: none;
}
.menu-intro__subline {
    margin: 0 0 1rem;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.4;
    /* Cream at 88% on the dark-throughout ground (2026-05-28 reboot) so the
       H1 sits as the louder voice while the subline stays readable (~12:1).
       (Folded in 2026-06-06 from a later patch rule that overrode the
       original tan.) */
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 88%, transparent);
    max-width: 40ch;
}

/* ==========================================================================
   Front-page slideshow (.img-slider)
   --------------------------------------------------------------------------
   Extracted from the inline <style> in template-parts/front-page/
   section-slideshow.php (the pre-existing TODO at the top of that file).
   Driven by assets/js/extras.js — see the markup contract in that template.
   ========================================================================== */
.img-slider {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    border-radius: .5em;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    height: 100vh;
    position: relative;
    margin: 0;
}
@media screen and (orientation: portrait) {
    .img-slider { height: 50vh; }
}
.img-slider__list {
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    overflow: hidden;
}
.img-slide {
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    grid-area: 1 / 1 / -1 / -1;
    place-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative;
    overflow: hidden;
}
.img-slide.is--current { opacity: 1; pointer-events: auto; }
.img-slide__inner {
    object-fit: cover;
    will-change: transform;
    width: 100%;
    height: 100%;
    position: absolute;
}
.img-slider__nav {
    z-index: 2;
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    pointer-events: none;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    max-width: 95vw;
    display: flex;
    position: absolute;
    bottom: 2rem;
}
.img-slider__thumb {
    aspect-ratio: 1.5;
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid var(--border-default, rgba(0,0,0,0.15));
    border-radius: .3125rem;
    width: 7rem;
    transition: border-color .2s;
    position: relative;
    overflow: hidden;
}
.img-slider__thumb:hover { border-color: var(--text-secondary, rgba(0,0,0,0.5)); }
.img-slider__thumb.is--current { border-color: var(--text-primary, #1a1a1a); }
.slider-thumb__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 0;
}
@media screen and (max-width: 991px) {
    .img-slider__list { width: 100%; }
    .img-slider__thumb { flex: none; }
}
@media screen and (max-width: 767px) {
    .img-slider__nav { flex-flow: wrap; }
    .img-slider__thumb { border-radius: .25rem; width: 5rem; }
}
@media screen and (max-width: 479px) {
    .img-slider__thumb { width: 4.5rem; }
}

/* Food / bar segmented switch.
   2026-05-28 dark-throughout reboot, design-pass refinement: the prior
   pill-in-pill (outer 999px hairline border + inner 999px red pill) was
   the only pill-shaped hairline on the site and read as orphan chrome.
   Replaced with a square (4px) two-cell segmented control: one printed
   ticket split into a red-stamped active half and a quiet inactive
   half. Icons inherit currentColor and swap with state. Different
   idiom from the print-tabs section-nav directly below — that one is
   "jump to section" (flat caps + red underline), this one is
   "pick one of two menus" (red-fill cell). */
.menu-intro__toggle {
    display: inline-flex;
    gap: 0;
    /* margin-top dropped: the aside is a flex column with its own gap;
       0.5rem on top was double-spacing the toggle below the side-note. */
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 14%, transparent);
    border-radius: var(--wp--custom--border-radius--sm, 4px);
    background: transparent;
    /* Clip the sliding indicator to the container's 4px corners. */
    overflow: hidden;
    /* Constrain width on desktop so it doesn't stretch beside a tight
       side-note; mobile lets it size to content. */
    max-width: 22rem;
    /* Anchor + stacking context for the sliding `::before` indicator. */
    position: relative;
    isolation: isolate;
}
/* Sliding red indicator. Sits behind the pills (z-index: 0); the pills
   carry transparent backgrounds and z-index: 1 so the indicator shows
   through. `[data-active]` is set by PHP on initial render and updated
   by transitions.js on click — translation drives the slide.
   --
   2026-05-30: replaces the prior per-pill `.is-active` background-color,
   which couldn't slide between cells (each pill owned its own bg, so
   the only animation was a 180ms color-fade in place). The user's
   request was "the red slides over to bar immediately, before the
   page transition" — this indicator handles that. */
.menu-intro__toggle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: var(--wp--preset--color--accent, var(--ssb-red));
    z-index: 0;
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-intro__toggle[data-active="bar"]::before {
    transform: translateX(100%);
}
.menu-intro__toggle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 14/20px padding lands a 48px cell (above the 44px touch floor). */
    padding: 0.875rem 1.25rem;
    /* Equal cell widths even though "Food" < "Bar" in letterforms. */
    min-width: 7rem;
    flex: 1 1 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* 65% matches the section-nav inactive alpha (line ~7629) — when
       the eye travels toggle → tabs the recessive states align. */
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 65%, transparent);
    background-color: transparent;
    text-decoration: none;
    /* Color transitions stay on the pill (text + hover bg); the red
       indicator's motion lives on `.menu-intro__toggle::before`. */
    transition: background-color 0.18s ease, color 0.18s ease;
    /* Sit above the sliding `::before` red indicator. */
    position: relative;
    z-index: 1;
}
/* Hairline divider between the two cells. Inset shadow rather than a
   border-left so it doesn't affect layout width. Hidden on / next-to
   the active cell — the red fill terminates the visual division
   cleanly without a hairline cutting across it. */
.menu-intro__toggle-pill + .menu-intro__toggle-pill {
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 14%, transparent);
}
.menu-intro__toggle-pill.is-active,
.menu-intro__toggle-pill.is-active + .menu-intro__toggle-pill {
    box-shadow: none;
}
/* Inline icon stamp. Sized to a 18px square (1.125rem) — slightly above
   the 14px Bowlby cap-height so the line-art icons (brat-in-bun top
   view + tap-pull pint glass; replaced the solid-fill placeholders
   2026-05-30) carry enough visual mass at this scale. The SVG strokes
   inherit currentColor so they swap with the active/inactive cell. */
.menu-intro__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}
.menu-intro__toggle-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.menu-intro__toggle-pill:not(.is-active):hover,
.menu-intro__toggle-pill:not(.is-active):focus-visible {
    /* Whisper of warmth on the inactive cell — 6% not 8%, the real
       affordance is the cream alpha lifting to 100%. */
    background-color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 6%, transparent);
    color: var(--wp--preset--color--text-white, #fefefe);
}
/* Cream focus ring on dark ground — works on BOTH the inactive cell
   and the red active cell. (Was red-on-red previously, which has
   effectively zero contrast against the active cell's own background.) */
.menu-intro__toggle-pill:focus-visible {
    outline: 2px solid var(--wp--preset--color--text-white, #fefefe);
    outline-offset: 3px;
    border-radius: var(--wp--custom--border-radius--sm, 4px);
}
.menu-intro__toggle-pill.is-active {
    /* The moment: cream Bowlby caps at full alpha, sitting over the
       sliding red `::before` indicator on the container. 5.27:1 on
       red — passes AA normal. The pill itself is transparent; the
       red bg lives on `.menu-intro__toggle::before`. */
    background-color: transparent;
    color: var(--wp--preset--color--text-white, #fefefe);
}
.menu-intro__toggle-pill.is-active:hover,
.menu-intro__toggle-pill.is-active:focus-visible {
    /* No darken on hover — you're already on this menu; the affordance
       is the other cell, not this one. */
    background-color: transparent;
    color: var(--wp--preset--color--text-white, #fefefe);
}
@media (prefers-reduced-motion: reduce) {
    .menu-intro__toggle-pill { transition: none; }
    /* Stop the indicator slide too — pop straight to the destination. */
    .menu-intro__toggle::before { transition: none; }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.menu-section {
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    background: transparent;
}
.menu-section__header {
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
    text-align: left;
}
.menu-section__eyebrow {
    margin: 0 0 0.4rem;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-size: var(--wp--preset--font-size--small, 0.9rem);
    /* Dark-throughout reboot — cream at 70%. */
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 70%, transparent);
}
.menu-section__header h2:not(.styled-header) {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
/*    color: var(--wp--preset--color--text-white, #fefefe);*/
    text-align: left;
}

/* Chapter sections — Brathaus Signatures / Brathaus Cocktails.
   Dark-throughout reboot (2026-05-28): chapter sections sit on the SAME
   dark page ground as everything else. They differentiate via:
     1) The styled-header script+bold lockup
     2) Generous padding-top (added in the appended block below)
     3) A large decorative SVG behind (bull / LEGENDARY emblem — see
        .menu-section--chapter__decor in the appended block)
     4) The horizontal ornament divider under the chapter title
   No background-color override; no butcher-texture; no wavy edges.
   This rule is intentionally minimal — positioning context for the decor. */
.menu-section--chapter {
    position: relative;
    overflow: hidden;
    padding-left: clamp(1rem, 3vw, 1.5rem);
    padding-right: clamp(1rem, 3vw, 1.5rem);
}

/* Item rows flow as a single column; rows divide via border-top. */
.menu-section__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Groups (h3, with hairline rule trailing the title) ───────────────── */
.menu-group {
    margin-top: 2.5rem;
}
.menu-group__header {
    margin: 0 0 0.75rem;
}
.menu-group__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    /* Sub-chapter HEAD scale — Bowlby at "large" reads distinct from items
       (1.125rem max) but smaller than chapter h2. (Folded in 2026-06-06 from
       the later "scale-up" patch rule that overrode this rule's original
       1rem / 0.18em — too small to read as a head over multi-column items.) */
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-white, #fefefe);
    text-align: left;
}
.menu-group__title-text {
    flex: 0 0 auto;
}
.menu-group__rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: currentColor;
    opacity: 0.3;
    align-self: center;
    margin-left: 0;
}
.menu-group__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Item row ─────────────────────────────────────────────────────────── */
.menu-item {
    padding: clamp(0.875rem, 2vw, 1.125rem) 0;
    /* Dark-throughout reboot — items render cream on dark; currentColor at
       22% gives a cream hairline divider between rows. The first pass tried
       15% which washed out against the dark ground (rows ran together as
       a single block of text); 22% reads as a deliberate divider without
       reasserting the cream-on-cream weight the prior light theme had. */
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    color: var(--wp--preset--color--text-white, #fefefe);
}
.menu-section__items > .menu-item:first-child,
.menu-group__items > .menu-item:first-child {
    border-top: 0;
}
.menu-item__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.menu-item__name {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400; /* face is heavy; do not bold */
    font-size: clamp(1rem, 2vw, 1.125rem);
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--text-white, #fefefe);
    line-height: 1.2;
}
.menu-item__leader {
    flex: 1 1 auto;
    min-width: 1.5rem;
    align-self: end;
    margin-bottom: 0.25rem;
    border-bottom: 2px dotted color-mix(in srgb, currentColor 30%, transparent);
}
@media (max-width: 700px) {
    /* Dotted leader doesn't read on narrow rows; let the head wrap instead
       so the price drops to its own line aligned right. */
    .menu-item__leader { display: none; }
    .menu-item__price { margin-left: auto; }
}
.menu-item__price {
    font-family: "Averia Libre", system-ui, serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    color: var(--wp--preset--color--text-white, #fefefe);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.menu-item__desc {
    margin: 0.25rem 0 0;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.45;
    /* Cream at 85% — slightly recessed from full-white name + price. */
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 85%, transparent);
    max-width: 60ch;
}

/* Chips: ABV / size / location. Uppercase mini-labels. */
.menu-item__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.menu-item__chip {
     color: var(--wp--preset--color--primary, #c2a488) !important;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
}
/* Dark-throughout reboot: chapter sits on the SAME dark page ground now,
   so the global red-on-dark chip rule applies — no override needed. The
   previous override (flipping to ink) was for the prior tan chapter ground;
   it would now make the chip invisible against dark. Intentionally noop. */

/* Variants list (sizes / formats). Inline row, comma-light separators. */
.menu-item__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-size: 0.9375rem;
}
.menu-item__variants li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}
.menu-item__variants li + li::before {
    content: "·";
    margin-right: 0.5rem;
    opacity: 0.4;
}
.menu-item__variant-label {
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 75%, transparent);
}
.menu-item__variant-price {
    font-weight: 700;
    color: var(--wp--preset--color--text-white, #fefefe);
    font-variant-numeric: tabular-nums;
}

/* Modifiers: same shape as variants but muted, leading "+" per label. */
.menu-item__modifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 65%, transparent);
}
.menu-item__modifiers li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}
.menu-item__mod-delta {
    font-variant-numeric: tabular-nums;
}

/* Popular tag — small accent pill on the head row. */
.menu-item__tag {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
    padding: 2px 8px;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: var(--wp--preset--font-size--tiny, 0.7rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: var(--wp--preset--color--accent, var(--ssb-red));
    color: var(--ssb-cream, #efe2c7);
    border-radius: 999px;
    line-height: 1.4;
}

/* Edit link — admin-only hint, kept quiet. */
/* Converged onto the shared .edit-pencil badge (ssb_edit_pencil()), 2026-06-11.
   This now only positions the badge — push it to the right edge of the
   menu-item header row; badge look/hover come from .edit-pencil. */
.menu-item__edit {
    margin-left: auto;
}

/* ── Quick-edit pencil — editor-only badge on dynamic modules ───────────────
   Reusable affordance emitted by ssb_edit_pencil(). Solid ink + cream glyph +
   hairline so it reads on every surface (cream / tan / kraft / ink / photo).
   Default inline-flex; add .edit-pencil--corner to float top-right of a
   positioned card. Only ever rendered for logged-in editors. */
.edit-pencil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--ssb-ink, #1a1a1a);
    color: var(--wp--preset--color--text-white, #fefefe);
    /* Cream ring at higher alpha so the badge still reads on ink/photo
       surfaces (where the ink fill would otherwise vanish into the bg). */
    border: 1px solid rgba(254, 254, 254, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.7;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.edit-pencil:hover,
.edit-pencil:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    text-decoration: none;
}
.edit-pencil__glyph { display: block; }
.edit-pencil--corner {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 3;
}
/* Corner-anchors for the edit pencil (need position:relative so the
   absolutely-positioned .edit-pencil--corner lands top-right of them). */
.specials-item { position: relative; }
.package-card { position: relative; }

/* ── Footer CTA strip — full-bleed accent band ────────────────────────── */
.menu-cta-strip {
    /* alignfull on .main-content-wrapper already nullifies the 1rem padding
       on left/right (see line ~860). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
    margin-top: clamp(2rem, 5vw, 3rem);
    background-color: var(--wp--preset--color--accent, var(--ssb-red));
    color: var(--ssb-cream, #efe2c7);
}
.menu-cta-strip__textlink {
    font-family: "Averia Libre", system-ui, serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--ssb-cream, #efe2c7);
    text-decoration: none;
}
.menu-cta-strip__textlink:hover,
.menu-cta-strip__textlink:focus-visible {
    text-decoration: underline;
}

/* Empty state — recedes against the dark ground so a missing-item row
   reads as a quiet note, not a competing item. 50% alpha is enough to
   stay legible without claiming weight; 65% (the first pass) still read
   as an active row. */
.menu-empty,
.menu-items-empty {
    margin: 2rem 0;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 50%, transparent);
}

/* =========================================================================
   Menu pages — art-directed repass (2026-05-28)
   =========================================================================

   Synthesizes the design-consultant + art-director specs for the food and
   bar menu pages, layered on top of the existing menu CSS above. New rules
   live here (end of the menu block) so the existing rules stay intact and
   the diff is auditable.

   The translation of the print menus' typographic richness is NOT more
   Imperial Script (the map stays at five reserved entries) — it's the
   bilateral intro lockup + the lit specials block + denser multi-column
   item flow + dedicated callouts for non-menu elements + restrained
   photography. Print's signature "feels printed" comes from scale ratio,
   composition, and material (kraft + butcher texture), not from font
   novelty.

   The enforced craft rule on this surface: no cards. No element gets
   border-radius > 4px combined with a box-shadow or visible card frame.
   The chapter pattern, the specials block, and the inline strip are all
   full-bleed grounds, not cards. The tile callout uses .action-tile only
   because that pattern already exists; its drift-defense is the
   prohibition on card affordances around items / sections / groups.
   ========================================================================= */

/* ── 1. Intro band — bilateral lockup (≥850px) ──────────────────────────── */

.menu-intro__inner {
    /* Existing rule (~6428) already gives max-width 1200px, margin auto.
       Add the grid scaffold; column count flips at the brand 850px breakpoint. */
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}
.menu-intro__title-cluster { min-width: 0; }
.menu-intro__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}
/* Side note — small heritage / sourcing line. Tracked Bowlby tiny, cream-75%
   on dark (dark-throughout reboot). */
.menu-intro__side-note {
    margin: 0;
    max-width: 28ch;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 75%, transparent);
}
/* Decorative bull behind the aside — cream tint on dark ground, at
   background-element scale per the 2026-05-28 dark-throughout reboot
   (woodcut lines need a ground darker than the line work + the motif
   needs to be at presence scale, not icon scale). */
.menu-intro__bull {
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0.5rem;
    /* Floor relaxed from 180px → 120px so the watermark scales naturally
       on the narrowest phones (375px iPhone SE / 390px iPhone 12). At
       180px floor + 32vw fluid, the 180px floor pinned the bull at full
       size on a 343px-wide title cluster, shoving its woodcut lines
       into the headline's letterforms — the silhouette read as
       collision, not watermark. 120px lets the bull resolve at its
       natural 32vw scale on phones and snap back to 180px+ by ~563px. */
    width: clamp(120px, 32vw, 320px);
    height: auto;
    opacity: 0.10;
    color: var(--wp--preset--color--text-white, #fefefe);
}
.menu-intro__bull svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Belt-and-braces on the narrowest phones (≤380px, the iPhone SE and
   the long-subline corner case): drop opacity another notch so even
   if a longer eyebrow/subline pushes the title cluster against the
   bull, the watermark can't read as a collision with letterforms. */
@media (max-width: 380px) {
    .menu-intro__bull {
        opacity: 0.07;
    }
}

@media (min-width: 850px) {
    .menu-intro__inner {
        /* 62 / 38 split per the art-director composition. The hairline rule
           between the columns is the printed-feel anchor; do not skip. */
        grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
        gap: clamp(2rem, 4vw, 3rem);
    }
    .menu-intro__aside {
        padding-left: clamp(1.5rem, 3vw, 2.25rem);
        /* Cream-14% on dark = ~3.1:1 against the page ground — visible as a
           deliberate vertical rule, not noise. */
        border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 14%, transparent);
    }
    .menu-intro__bull {
        right: 0;
        top: auto;
        bottom: -0.5rem;
    }
}

/* Scale up the H1 a notch on wider viewports — push toward the print's
   page-title weight without crossing into Imperial Script territory. */
@media (min-width: 1024px) {
    .menu-intro {
        padding-top: clamp(2rem, 4vw, 3rem);
        padding-bottom: clamp(1.25rem, 3vw, 2rem);
    }
    .menu-intro__title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }
}

/* ── 2. Specials block — today's heartbeat ─────────────────────────────── */

.menu-section--specials {
    /* Tan kraft ground — the page's ONE warm anchor against the dark page
       (dark-throughout reboot 2026-05-28). Butcher texture overlay (PHP)
       lands on top of the tan. Wavy edges TOP + BOTTOM both carve seams
       against the dark page neighbors above and below. */
    background-color: var(--wp--preset--color--primary, #c2a488);
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
    /* Both edges now target the dark page bg (was cream pre-reboot). */
    --prev-edge-color: var(--wp--preset--color--bg-darker, #1a1a1a);
    --next-edge-color: var(--wp--preset--color--bg-darker, #1a1a1a);
}
.menu-section--specials .menu-section__header {
    max-width: 1200px;
    margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
    text-align: left;
}
.menu-section--specials .menu-section__title--specials {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    /* Smaller than chapter h2 — specials is a daily overlay, not a chapter. */
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-section__items--specials {
    display: flex;
    flex-direction: column;
    gap: clamp(0.875rem, 2vw, 1.25rem);
    max-width: 1200px;
    margin: 0 auto;
    /* Defensive override against the multi-column rule below. */
    column-count: 1;
}
/* "Later today" partition eyebrow — appears only when both buckets present. */
.menu-section--specials__partition {
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(0.25rem, 1vw, 0.5rem);
    color: color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 65%, transparent);
}

/* The `.game-row__live` lozenge (~screen.css 9928) uses `--ssb-red-deep` for
   its ground, but that token is declared inside surface-scoped `:root`s
   (`.today`, `.shop-pathway`, `.heritage`, etc., ~4910–4931) and is NOT
   visible on the menu surface. Without this fall-through, the lozenge
   background resolves to transparent and the white "On now" text disappears
   against the kraft ground (WCAG 1.4.3 fail + functional defect). Define
   the token explicitly inside this section + provide a safety fallback. */
.menu-section--specials {
    --ssb-red-deep: #A02523;
}
.menu-section--specials .game-row__live {
    background: var(--ssb-red-deep, #A02523);
}
/* Specials-item typography inside the menu-page surface. The shared
   `.specials-item__*` block (~screen.css 4482) is scoped to `/specials` and
   `/today`; replay the relevant rules here so the menu-page surface
   inherits without depending on the other-page wrapper class. */
.menu-section--specials .specials-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.menu-section--specials .specials-item__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.menu-section--specials .specials-item__name {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.125rem);
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
    line-height: 1.2;
}
.menu-section--specials .specials-item__time {
    margin: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    /* Ink at 80% on tan reads warmer-than-body but stays safely above 4.5:1.
       (70% drops contrast to borderline; 80% is the safe floor on tan
       ground — same call as .menu-section__intro on chapter scope.) */
    color: color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 80%, transparent);
}
.menu-section--specials .specials-item__desc {
    margin: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.45;
    /* Full ink on tan — body copy at 16px needs the full contrast budget. */
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
    max-width: 60ch;
}
.menu-section--specials .specials-item__list {
    margin: 0;
    padding-left: 1.25rem;
    font-family: "Averia Libre", system-ui, serif;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.4;
    /* Full ink on tan (matches description) — sub-items are body copy. */
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}

/* ── 3. Section hero image ─────────────────────────────────────────────── */

.menu-section__hero {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    max-width: 1200px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    /* 12px (lg) radius — photographic, restrained. Not a card. */
    border-radius: var(--wp--custom--border-radius--lg, 12px);
    position: relative;
    z-index: 1; /* sits above the chapter's decorative bg svg */
}
.menu-section__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Dark-throughout reboot: chapter sections are no longer tan; the
   sticker-corner concern that previously stripped the hero radius is
   moot. The 12px radius reads correctly against dark too. */

/* ── 4. Section intro — italic editorial line under the styled-header ──── */

.menu-section__intro {
    margin: clamp(0.5rem, 1.5vw, 0.75rem) 0 0;
    max-width: 60ch;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.45;
    /* Cream at 88% on dark — same recession as the intro subline. */
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 88%, transparent);
}
/* Dark-throughout reboot: chapter is now on the same dark ground; the
   previous override that bumped chapter intro to full ink is dropped. */

/* ── 5. Sub-chapter group title scale-up ──────────────────────────────── */
/* (Folded into the base .menu-group__title rule 2026-06-06 — the scale-up
   values live there now.) Dark-throughout reboot: chapter sits on dark; the
   existing .menu-group__rule rule (currentColor + opacity 0.3) reads as
   cream-30% automatically — no chapter override needed. */

/* ── 6. Chapter section refinements — negative space + larger decoration ── */

/* Chapter is the page's heritage moment. Give it room. */
.menu-section--chapter {
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.menu-section--chapter .menu-section__header {
    position: relative;
    z-index: 1; /* sits above the .menu-section--chapter__decor svg */
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Push the chapter styled-header up to the dark-ground scale — Imperial
   Script + Gabriela can carry more weight against cream-on-dark than they
   did against ink-on-tan. */
.menu-section--chapter .styled-header__line--script {
    font-size: clamp(2.75rem, 6vw, 4.5rem);
}
.menu-section--chapter .styled-header__line--bold {
    font-size: clamp(2rem, 5vw, 3rem);
}
/* Items inside chapter must layer above the big decorative SVG behind. */
.menu-section--chapter .menu-section__items {
    position: relative;
    z-index: 1;
}

/* The horizontal ornament divider under the chapter title — woodcut motif
   in cream at low opacity. Renders below the styled-header lockup. */
.menu-section--chapter__ornament {
    display: block;
    width: min(100%, 480px);
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(1.5rem, 3vw, 2.25rem);
    color: var(--wp--preset--color--text-white, #fefefe);
    opacity: 0.45;
    pointer-events: none;
}
.menu-section--chapter__ornament svg {
    width: 100%;
    height: auto;
    display: block;
}

/* The LARGE decorative SVG anchoring the chapter open. Bull on food chapters
   (right-bottom); LEGENDARY emblem on bar's Brathaus Cocktails (left-bottom).
   Woodcut lines render cream at low opacity against the dark page ground —
   the inverse of how print uses them, same logical role. */
.menu-section--chapter__decor {
    position: absolute;
    pointer-events: none;
    bottom: 0;
    width: clamp(280px, 38vw, 520px);
    height: auto;
    /* Bumped from spec's 0.06 to 0.11 — at woodcut line scale on dark, the
       lower-bound opacity was so quiet the motif failed its background-
       element role (user feedback: "much much larger and as a sort of
       background element"). 0.11 still keeps it deferential to the items. */
    opacity: 0.11;
    color: var(--wp--preset--color--text-white, #fefefe);
    z-index: 0;
}
.menu-section--chapter__decor--right { right: 0; }
.menu-section--chapter__decor--left {
    left: 0;
    width: clamp(220px, 32vw, 400px); /* LEGENDARY emblem reads tighter */
    opacity: 0.13; /* matched ratio: emblem has more enclosed shapes */
}
.menu-section--chapter__decor svg {
    width: 100%;
    height: auto;
    display: block;
}
/* brats-bull.svg + emblems/legendary-banner.svg both hard-code their fills
   via internal <style> classes (`.st0`/`.st1`, fill `#231f20` for the bull,
   `#bf9d7d` tan for LEGENDARY). Without this override the SVGs render in
   their baked colors regardless of the parent `color` property — making
   the bull near-invisible on the dark ground and the LEGENDARY a fixed
   tan. Override at the decor-class scope so the SVG inherits `currentColor`
   and we control tint via opacity. Same fix on the intro bull below.
   NOTE: the bull is now an `<img>` (perf fix — see single-menu.php; the
   inline SVG was 1.6 MB and was stalling mobile reflow). The `<img>` path
   uses `filter: invert(1)` to tint the near-black baked fill to cream;
   the inline-SVG path below still applies to the legendary banner (which
   stays inline because it's a small file). */
.menu-section--chapter__decor svg .st0,
.menu-section--chapter__decor svg .st1,
.menu-intro__bull svg .st0,
.menu-intro__bull svg .st1 {
    fill: currentColor;
}
.menu-intro__bull img,
.menu-section--chapter__decor img {
    width: 100%;
    height: auto;
    display: block;
    /* Bull's baked fill is near-black (#231f20). Invert → near-white. The
       opacity on the wrapper (.menu-intro__bull is 0.10, the chapter decor
       has its own opacity) carries the watermark feel. */
    filter: invert(1);
}

/* ── 7. Per-item thumb — 88px desktop / 64px mobile, 8px radius ────────── */

.menu-item--has-thumb {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: clamp(0.875rem, 2vw, 1.25rem);
    align-items: start;
}
.menu-item--has-thumb > .menu-item__thumb {
    /* Lock the thumb to col 1 and let it span every implicit row in col 2
       (header → desc → chips → variants → modifiers). Span 99 because the
       previous `1 / -1` only resolves against EXPLICIT row lines and there
       are none here — so the thumb covered only row 1, which inflated row
       1 to 88px and left a void between the header (~24px) and the
       description (pushed to row 2 below the 88px floor). With the span,
       row 1 sizes to the header content and the description sits flush
       beneath it; the 88×88 thumb anchors to the top via `align-items:
       start` on the parent. Owner-reported bug. */
    grid-column: 1;
    grid-row: 1 / span 99;
}
/* Every non-thumb child explicitly placed in col 2 so the description,
   chips, variants, and modifiers fill the full 1fr content column rather
   than auto-flowing back into col 1 (88px wide). */
.menu-item--has-thumb > :not(.menu-item__thumb) {
    grid-column: 2;
}
.menu-item__thumb {
    margin: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: var(--wp--custom--border-radius--md, 8px);
    background: color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 6%, transparent);
}
.menu-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 700px) {
    .menu-item--has-thumb {
        grid-template-columns: 64px 1fr;
        column-gap: 0.75rem;
    }
    .menu-item__thumb { width: 64px; height: 64px; }
}
/* At ≤480px the thumb drops to 48px to give the text column ~16px more
   width — recovers room for name + price on one row at narrow viewports.
   48px clears the 44px tap-target floor; the 8px radius still reads as a
   deliberate inline thumbnail, not a profile icon. */
@media (max-width: 480px) {
    .menu-item--has-thumb {
        grid-template-columns: 48px 1fr;
        column-gap: 0.5rem;
    }
    .menu-item__thumb { width: 48px; height: 48px; }
    .menu-item--has-thumb .menu-item__head {
        gap: 0.5rem;
    }
}

/* ── 8. Multi-column item flow — ≥1024px, gap-only, leader dies ─────────── */

@media (min-width: 1024px) {
    /* Override the existing flex column (6551) — block + column-count.
       column-width acts as a "min reasonable column width" floor so very
       narrow sections fall back to single column automatically. */
    .menu-section__items {
        display: block;
        column-width: 24rem;
        column-count: 2;
        column-gap: clamp(2.5rem, 5vw, 4rem);
        column-rule: 0;
    }
    /* Specials block is partition-based — never multi-column. */
    .menu-section__items--specials {
        display: flex;
        column-count: 1;
    }
    /* Keep individual ITEMS intact across a column break (don't split a name
       from its price/description). Groups are deliberately NOT break-inside:
       avoid — a tall unbreakable group makes Chrome's multicolumn balancer
       degenerate to a SINGLE column (chapter sections with several groups, e.g.
       Brathaus Cocktails, rendered 1-col despite column-count:2 — verified by
       toggling break-inside live). Letting a group flow across the column break
       restores 2 columns; the group header is kept with its first rows via the
       break-after rule so it never orphans at a column foot. */
    .menu-item {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
    .menu-group__header {
        break-inside: avoid;
        break-after: avoid;
        -webkit-column-break-after: avoid;
    }
    .menu-group + .menu-item,
    .menu-group + .menu-group {
        break-before: avoid;
        -webkit-column-break-before: avoid;
    }

    /* The dotted leader is a single-column convention. In multi-column the
       leader varies wildly by item length and competes with the column
       gutter; the print honors this by dropping leaders in dense lists.
       Push price right via space-between on the head instead. */
    .menu-section__items .menu-item__head {
        justify-content: space-between;
    }
    .menu-section__items .menu-item__leader {
        display: none;
    }
    /* Specials block never multi-columns, so its items don't need the
       leader fix — but the specials renderer doesn't emit a leader at all
       so this is moot. Listed for the reader's benefit. */

    /* Items with a thumb in a column flow: keep the grid intact within
       the column. The thumb at 88px + content fits cleanly inside a
       24rem (~384px) column floor. */
    .menu-section__items .menu-item--has-thumb {
        display: grid;
    }
}

/* ── 9. Callout wrapper + tile variant ─────────────────────────────────── */

.menu-callout {
    max-width: 1200px;
    margin: clamp(1.5rem, 3vw, 2.25rem) auto;
}

/* Tile variant — sits in the section flow as a standalone promo unit.
   Uses .action-tile canonical anatomy (blocks/collection/render.php).
   The auto "quiet" form (no CTA) drops the card affordances so a voice-
   line like "Have somethin' in mind, buck?" recesses against the section. */
.menu-callout--tile {
    max-width: 640px;
}
.menu-callout--tile .action-tile {
    background: var(--ssb-cream, #efe2c7);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 10%, transparent);
    border-radius: 4px; /* sm only — enforces the "no cards" rule */
    padding: clamp(1rem, 2vw, 1.25rem);
    display: flex;
    align-items: flex-start;
    gap: clamp(0.875rem, 2vw, 1.25rem);
}
.menu-callout--tile .action-tile__media {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-callout--tile .action-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.75;
}
.menu-callout--tile .action-tile__body {
    flex: 1 1 auto;
    min-width: 0;
}
.menu-callout--tile .action-tile__eyebrow.eyebrow {
    margin: 0 0 0.25rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--wp--preset--color--accent, var(--ssb-red));
    opacity: 1;
}
/* Chapter ground — accent red on tan/cream callout reads muddy; flip to ink. */
.menu-section--chapter .menu-callout--tile .action-tile__eyebrow.eyebrow {
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-callout--tile .action-tile__title {
    margin: 0 0 0.25rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-callout--tile .action-tile__desc {
    margin: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-style: italic;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.4;
    color: color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 80%, transparent);
    max-width: 36ch;
}
.menu-callout--tile .action-tile__action {
    margin-top: 0.75rem;
}
/* Strip CTA sits above the decorative LEGENDARY emblem so the button is
   always tappable even when narrow-viewport line wrapping brings them
   close. The emblem is z-index 0 + pointer-events: none — defensive. */
.menu-cta-strip--inline .menu-cta-strip__cta {
    position: relative;
    z-index: 1;
}
/* Voice-line auto-quiet — when there's no CTA, drop the card affordances.
   :has() lets the tile self-detect its own quietness. */
.menu-callout--tile .action-tile:not(:has(.action-tile__action)) {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* ── 10. Callout strip variant — bilateral, tan, with LEGENDARY emblem ─── */

/* Inline strip variant of .menu-cta-strip. MUST differ visually from the
   page-foot red strip (~6760) so a reader doesn't think they hit the page
   end. The footer strip stays red; the inline strip is tan + butcher
   texture + wavy-edge-top for print-style weight. */
.menu-cta-strip--inline {
    background-color: var(--wp--preset--color--primary, #c2a488);
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
    /* Edge colors for the wavy top — bridges from the cream/regular content
       above. has-butcher-texture overlay (PHP class) sits on top of the tan. */
    --prev-edge-color: var(--ssb-cream, #efe2c7);
    --next-edge-color: var(--ssb-cream, #efe2c7);
    /* Reset the foot-strip flex layout (~6763); we use a bilateral grid below. */
    display: block;
    gap: 0;
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
    margin-top: 0;
}
.menu-cta-strip--inline .menu-cta-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
    text-align: center;
}
.menu-cta-strip--inline .menu-cta-strip__lockup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.menu-cta-strip--inline .menu-cta-strip__eyebrow.eyebrow {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-style: normal;
    /* Eyebrow is the one red moment on the strip — small, punctuation, on tan. */
    color: var(--wp--preset--color--accent, var(--ssb-red));
    opacity: 1;
}
.menu-cta-strip--inline .menu-cta-strip__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-cta-strip--inline .menu-cta-strip__body-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.menu-cta-strip--inline .menu-cta-strip__body {
    margin: 0;
    max-width: 36ch;
    font-family: "Averia Libre", system-ui, serif;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.4;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-cta-strip--inline .menu-cta-strip__cta {
    /* btn-box--primary already styled in screen.css; just position it. */
    align-self: center;
}
/* LEGENDARY emblem — heritage anchor for the Steins moment.
   Sits behind the body-cluster at low opacity. aria-hidden via PHP. */
.menu-cta-strip--inline .menu-cta-strip__emblem {
    position: absolute;
    pointer-events: none;
    right: 0;
    bottom: -1rem;
    width: clamp(100px, 18vw, 160px);
    height: auto;
    opacity: 0.12;
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
    z-index: 0;
}
.menu-cta-strip--inline .menu-cta-strip__emblem svg {
    width: 100%;
    height: auto;
    display: block;
}
/* Bilateral lockup at ≥850px — eyebrow + title LEFT, body + CTA RIGHT. */
@media (min-width: 850px) {
    .menu-cta-strip--inline .menu-cta-strip__inner {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
        text-align: left;
    }
    .menu-cta-strip--inline .menu-cta-strip__body-cluster {
        align-items: flex-start;
    }
    .menu-cta-strip--inline .menu-cta-strip__cta {
        align-self: flex-start;
    }
    .menu-cta-strip--inline .menu-cta-strip__emblem {
        right: 1rem;
        bottom: -0.5rem;
    }
}

/* ── 11. Callout inset-badge — quiet inline annotation ─────────────────── */

.menu-callout--inset-badge {
    margin: clamp(0.75rem, 2vw, 1rem) 0 clamp(1rem, 2.5vw, 1.5rem);
    padding: 0.5rem 0.875rem;
    background: transparent;
    /* Cream-30% dashed on dark — reads as a "marginal note" register. */
    border: 1px dashed color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 30%, transparent);
    border-radius: 4px; /* sm only — enforces "no cards" rule */
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    max-width: 36ch;
    break-inside: avoid;
}
.menu-callout--inset-badge .menu-callout__eyebrow.eyebrow {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--wp--preset--color--accent, var(--ssb-red));
    opacity: 1;
}
/* On chapter ground, swap eyebrow to ink — red on tan reads muddy. */
.menu-section--chapter .menu-callout--inset-badge .menu-callout__eyebrow.eyebrow {
    color: var(--wp--preset--color--dark-default, var(--ssb-ink));
}
.menu-callout--inset-badge .menu-callout__badge-title {
    margin: 0;
    font-family: "Averia Libre", system-ui, serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.3;
    color: var(--wp--preset--color--text-white, #fefefe);
}
.menu-callout--inset-badge .menu-callout__badge-link {
    /* 44×44 touch target floor */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    font-family: "Averia Libre", system-ui, serif;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    color: var(--wp--preset--color--text-white, #fefefe);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.menu-callout--inset-badge .menu-callout__badge-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, var(--ssb-red));
    outline-offset: 3px;
}
/* Brighten the dashed border on hover/focus of the inner link. */
.menu-callout--inset-badge:has(.menu-callout__badge-link:hover),
.menu-callout--inset-badge:has(.menu-callout__badge-link:focus-visible) {
    border-color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 55%, transparent);
}

/* =========================================================================
   Menu pages — dark-throughout reboot (2026-05-28)
   =========================================================================

   Second art-direction pass: page ground inverts from cream to ink, the
   specials kraft band becomes the page's one warm anchor, chapter sections
   drop their tan ground and lean on composition + LARGE decorative SVG +
   the styled-header lockup, section-nav restyles to print-tabs (flat
   tracked caps + hairline active underline).

   These rules scope to `body.single-menu` so the dark ground doesn't bleed
   to other CPTs. The WP `body_class` already emits `single-menu` for the
   `menu` post type's singular template — verified in rendered HTML, no
   filter needed.

   The card-prohibition rule from the first pass stays in force; no element
   on this surface gets `border-radius > 4px` paired with `box-shadow` or a
   visible card frame. Plus a new restraint: no glow / gradient / backdrop-
   filter / shimmer / pure-black on the dark surface — see the art-director
   spec §10 for the full prohibition list.
   ========================================================================= */

/* ── Body ground ──────────────────────────────────────────────────────── */

body.single-menu {
    background-color: var(--wp--preset--color--bg-darker, #1a1a1a);
    color: var(--wp--preset--color--text-white, #fefefe);
}
body.single-menu .main-content-wrapper {
    background-color: transparent;
}

/* ── Section-nav restyle: print-tabs ──────────────────────────────────── */

/* Scope to body.single-menu so other surfaces that use .section-nav
   (/today/, etc.) keep their current dark-pill treatment. */
body.single-menu .section-nav {
    /* Solid ground matching the page bg (folded in 2026-06-06 from a later
       fix rule): the first dark-throughout pass used transparent here, but
       menu items scrolled BEHIND the sticky rail and bled through it. The
       bottom hairline still separates the rail visually. */
    background-color: var(--wp--preset--color--bg-darker, #1a1a1a);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 14%, transparent);
}
body.single-menu .section-nav__link {
    /* Drop the pill: no fill, no radius, flat tracked caps reading like a
       printed contents-bar. The 48px container height preserves the tap
       target without painted chrome. */
    padding: 0 var(--spacing-md, 1rem);
    background: transparent;
    border-radius: 0;
    border-bottom: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 65%, transparent);
    text-decoration: none;
    transition: color 0.18s ease;
}
body.single-menu .section-nav__link:hover,
body.single-menu .section-nav__link:focus-visible {
    color: var(--wp--preset--color--text-white, #fefefe);
}
body.single-menu .section-nav__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 4px;
    border-radius: 2px;
}
body.single-menu .section-nav__link.is-active {
    color: var(--wp--preset--color--text-white, #fefefe);
}
/* Indicator: was a 5px round dot at bottom-left; now a 2px red underline
   that aligns with the nav's bottom hairline so it reads as the hairline
   lighting up. JS positioning (translateX + width) stays untouched. */
body.single-menu .section-nav__indicator {
    height: 2px;
    bottom: -1px;
    border-radius: 0;
    background-color: var(--wp--preset--color--accent, #d32f2f);
}
/* Scroll-fade affordance terminates in the new page ground exactly. */
body.single-menu .section-nav::before {
    background: linear-gradient(to right, var(--wp--preset--color--bg-darker, #1a1a1a), transparent);
}
body.single-menu .section-nav::after {
    background: linear-gradient(to left, var(--wp--preset--color--bg-darker, #1a1a1a), transparent);
}
@media (max-width: 480px) {
    body.single-menu .section-nav__link {
        padding: 0 0.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.single-menu .section-nav__indicator { transition: none; }
}

/* ── Specials block header hairline ───────────────────────────────────── */

/* Slim ink-10% hairline directly under the specials H2 — anchors the head
   to the items, mirrors the print's hairline-after-label discipline. */
.menu-section--specials .menu-section__header {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp--preset--color--dark-default, #1a1a1a) 10%, transparent);
    padding-bottom: clamp(0.75rem, 2vw, 1rem);
}

/* ── Foot strip — wavy-edge-top + edge color targets dark ─────────────── */

/* The page-foot red strip now carries a wavy edge at its TOP (bridging
   from dark to red). The bottom of the strip is the page bottom; no edge
   needed below. */
.menu-cta-strip.has-wavy-edge-top {
    --prev-edge-color: var(--wp--preset--color--bg-darker, #1a1a1a);
}

/* ── Strip callout inline — edge color targets dark ───────────────────── */

/* First-pass set --next-edge-color to cream; now both neighbors are dark. */
.menu-cta-strip--inline {
    --prev-edge-color: var(--wp--preset--color--bg-darker, #1a1a1a);
    --next-edge-color: var(--wp--preset--color--bg-darker, #1a1a1a);
}

/* ── Item color cascade: cream → tan/meat-paper ───────────────────────── */

/* Items render in tan (--wp--preset--color--primary, #c2a488) so the type
   reads as the print's warm-paper register, NOT the cream of the chrome.
   Name + price stay full-strength; description recedes to 85% as before.
   Group headers (h3 rule below) stay cream — they're chrome, not content,
   so they read in the same register as the section title above them. */
body.single-menu .menu-item__name,
body.single-menu .menu-item__price {
    color: var(--wp--preset--color--primary, #c2a488);
}
body.single-menu .menu-item__desc {
    color: color-mix(in srgb, var(--wp--preset--color--primary, #c2a488) 85%, transparent);
}
/* Variants and modifiers — same row family as the item, same tan. The
   chip labels (ABV / size / location) stay cream because they read as
   metadata, not menu copy. */
body.single-menu .menu-item__variant-label,
body.single-menu .menu-item__variant-price,
body.single-menu .menu-item__mod-label,
body.single-menu .menu-item__mod-delta,
body.single-menu-item .menu-item__variant-label,
body.single-menu-item .menu-item__variant-price,
body.single-menu-item .menu-item__mod-label,
body.single-menu-item .menu-item__mod-delta {
    color: var(--wp--preset--color--primary, #c2a488);
}

/* ── Group header — smaller, stays cream ──────────────────────────────── */

/* Owner ask: the group header (h3, e.g. "Brats", "Burgers" inside a
   section) and the menu item names were reading too close in scale. Drop
   the group title to a smaller eyebrow-adjacent size while keeping the
   cream color so it stays the chrome register, and let the larger tan
   item names below it carry the content register. The hairline rule
   trailing the title continues to anchor it inline. */
body.single-menu .menu-group__title {
    font-size: var(--wp--preset--font-size--tiny, 0.8125rem);
    /* Color is already cream from the base rule (line ~6586); restate so
       the intent is local and the rule survives any future base edit. */
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* ── Empty-state clears the chapter foot decor lane ───────────────────── */

/* The `.menu-section--chapter__decor` SVG anchors `bottom: 0` inside the
   chapter box. On long chapters with empty groups near the end (Brathaus
   Cocktails + Haus Shots is the live case), the empty-state line landed
   directly on top of the LEGENDARY emblem at the chapter foot — italic
   tan-on-cream-banner = visual scratch. Generous trailing margin pushes
   the empty-state copy clear of the decor's vertical lane so both
   moments read on their own.

   Register treatment shipped 2026-05-30: the print menu's "out-of-stock"
   stamp (art-director call) — Bowlby SC tracked caps at eyebrow scale,
   recessive cream — replaces the casual Averia italic note from the base
   rule. Copy by brand-copywriter: "More soon" (.menu-items-empty, an
   authored-but-empty section) / "Menu coming soon" (.menu-empty, whole
   board not up). Strings are authored sentence-case in single-menu.php;
   the caps + tracking are CSS so screen readers don't spell them out. */
body.single-menu .menu-empty,
body.single-menu .menu-items-empty {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--wp--preset--color--text-white, #fefefe) 45%, transparent);
}


/* =========================================================================
   TapHunter Web Menu — bar menu "On Tap" section
   ─────────────────────────────────────────────────────────────────────────
   The TapHunter v3 widget INJECTS its tap list into `.menu-taps__embed`
   (loaded by assets/js/menu-taps.js) and ships its own light-theme stylesheet
   + a `.two-column` multicol. We override here, scoped under `.menu-taps`, to
   seat it on the dark bar menu using the SAME type/colour patterns as the CPT
   menu items above it: beer name → .menu-item__name (Bowlby, tan); category
   header → .menu-group__title (Bowlby, cream); description → .menu-item__desc
   (Averia italic, tan 85%); style/ABV → .menu-item__chip (red). `!important`
   beats TapHunter's CSS. Markup: #taphunter-taps > repeated
   `.category-header .heading` + `.taphunter-row` (.beer-name, .beer-style,
   .beer-abv, .brewery-name, .brewery-location, .beer-description).
   ========================================================================= */

/* LAYOUT. The menu's own `.menu-section__items { column-count: 2 }` (≥1024px)
   can't fragment TapHunter's single giant child — it collapsed the whole list
   at desktop. So the wrapper stays single-column and the 2-col split is done on
   `#taphunter-taps`, whose DIRECT children are the rows (those fragment cleanly,
   like the CPT items). The multicol elements must NOT be positioned (position
   breaks fragmentation) — the stacking context lives on the section only. */
.menu-section--taps { position: relative; z-index: 1; }
.menu-section--taps .menu-section__items.menu-taps { column-count: 1 !important; }
/* NB: target the `.taphunter-menu` CLASS (not the #taphunter-taps id) for
   column-count, so the @media rule below (also a class) can win at ≥1024px —
   an id here would out-specify it and pin the Draft list to one column. */
.menu-taps #taphunter,
.menu-taps .taphunter-menu {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    position: static !important;
    column-count: 1 !important;
}
/* ≥1024px: 2 columns via CSS GRID, NOT multicolumn. Safari drops the
   multicolumn content here — TapHunter's `overflow:auto` rows are block-
   formatting-contexts and Safari won't fragment BFCs across CSS columns (the
   content is invisible above 1024px until you resize narrower). GRID has no
   fragmentation step, so it renders reliably in every browser. Trade-off vs
   multicol: row-major fill (left→right, not column-major top→bottom) and some
   vertical raggedness when descriptions differ in length — acceptable for a
   list that has to actually appear. Category headers + the per-list heading
   span the full width; TapHunter's float-clearing `.clearfix` divs are dropped
   so they don't leave empty grid cells. */
@media (min-width: 1024px) {
    .menu-taps .taphunter-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(2.5rem, 5vw, 4rem);
        row-gap: 0;
        align-items: start;
        column-count: auto !important;   /* cancel the base single-col multicol */
    }
    .menu-taps .taphunter-menu > .div-left,
    .menu-taps .taphunter-menu > .category-header,
    .menu-taps #bottles-heading,
    .menu-taps #spirits-heading {
        grid-column: 1 / -1;             /* list heading + category headers span both columns */
    }
}
/* TapHunter's float-clearing artifact — useless in our layout and a stray
   empty grid cell at ≥1024px. Drop it everywhere. */
.menu-taps .taphunter-menu > .clearfix,
.menu-taps .clearfix { display: none !important; }

/* Bottles/Cans + Spirits are their own LIST sections (TapHunter serves 3
   lists). Their headings → the .menu-section__header chapter-title treatment;
   the categories inside them already match .menu-group__title via the rule
   below. (Draft List's own heading stays hidden — our "On Tap"
   .menu-section__title is its section header.) */
.menu-taps #bottles-heading,
.menu-taps #spirits-heading {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--text-white, #fefefe) !important;
    text-align: left !important;
    margin: 0 0 clamp(1rem, 2.5vw, 1.5rem) !important;
}
/* Separate the three lists like distinct chapters. */
.menu-taps .taphunter-menu.pad-top {
    margin-top: clamp(2.5rem, 6vw, 4rem) !important;
    padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
    border-top: 1px solid var(--hairline-cream, rgba(254, 254, 254, 0.14));
}

/* TapHunter chrome dropped (matches the live /drinks/ treatment): its own
   "Draft List (N)" heading (our `.menu-section__title` "On Tap" is the title),
   the `.div-right` meta cluster, brewery logos, attribution. Legend stays. */
.menu-taps #taps-heading,
.menu-taps .div-right,
.menu-taps .brewerylogo,
.menu-taps #taphunter-attribution { display: none !important; }
.menu-taps .logopadded { padding-left: 0 !important; }
.menu-taps #icon-key { opacity: 0.7; font-size: 0.8rem; }

/* Category headers (IPA, Ale, …) = sub-group titles → match .menu-group__title. */
.menu-taps .category-header .heading,
.menu-taps .heading.scrollspy {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--text-white, #fefefe) !important;
    margin: 1.75rem 0 0.6rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline-cream, rgba(254, 254, 254, 0.14));
    break-after: avoid;                       /* don't orphan a header at a column foot */
}
.menu-taps .category-header.taphunter-row { padding: 0 !important; width: 100% !important; }

/* Safari multicolumn hardening. TapHunter sets `overflow: auto` on every
   `.taphunter-row` (+ `.clearfix` / `.div-left`), making each a block-
   formatting-context. Safari FAILS to fragment BFCs across CSS columns and
   drops the content — the list renders blank at ≥1024px (2-col) until a resize
   reflows it; Chrome tolerates it. Forcing `overflow: visible` removes the BFCs
   so the rows fragment like plain blocks. (The brewery logo float that overflow
   was clearing is hidden anyway.) */
.menu-taps #taphunter,
.menu-taps .taphunter-menu,
.menu-taps .taphunter-row,
.menu-taps .taphunter-menu .clearfix,
.menu-taps .taphunter-menu .div-left,
.menu-taps .taphunter-menu .beer-header,
.menu-taps .taphunter-menu .beer-info {
    overflow: visible !important;
}

/* Each beer = a menu-item row. */
.menu-taps .taphunter-row {
    float: none !important;
    width: 100% !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid; /* older Safari needs the prefixed form */
    margin: 0 !important;
    padding: 0.5rem 0 0.85rem !important;
    border: 0 !important;
}
/* Beer name → .menu-item__name (Bowlby, tan) + kill the TapHunter title link. */
.menu-taps .beer-name,
.menu-taps .beer-name a {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(1rem, 2vw, 1.125rem) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    color: var(--wp--preset--color--primary, #c2a488) !important;
    text-decoration: none !important;
}
.menu-taps .beer-name a { pointer-events: none !important; cursor: default !important; }
/* Style + ABV → red mini-chips, like .menu-item__chip. */
.menu-taps .beer-style,
.menu-taps .beer-abv, 
.menu-taps .beer-ibu {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--primary, #c2a488) !important;
}

.beer-extra {
  display: none;
}
/* Brewery name + location → quiet supplementary meta (recessive tan). */
.menu-taps .brewery-name,
.menu-taps .brewery-location {
    font-family: "Averia Libre", system-ui, serif !important;
    font-style: normal !important;
    font-size: 0.85rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: color-mix(in srgb, var(--wp--preset--color--primary, #c2a488) 60%, transparent) !important;
}
/* Description → .menu-item__desc (Averia italic, tan 85%). */
.menu-taps .beer-description {
    font-family: "Averia Libre", system-ui, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    color: color-mix(in srgb, var(--wp--preset--color--primary, #c2a488) 85%, transparent) !important;
    margin: 0.25rem 0 0 !important;
    max-width: 60ch;
}

/* ── Marquee reduced-motion: aggressive transform reset ────────────────── */
/* The marquee component's JS bails on prefers-reduced-motion BEFORE
   creating the GSAP timeline, but the inline marginLeft/width set in
   set-up still leaves the scroll element shifted. Force everything back
   to identity when the data-marquee-status is "paused". The attribute
   is set by the JS on reduced-motion init. */
[data-marquee-status="paused"] [data-marquee-scroll-target],
[data-marquee-status="paused"] [data-marquee-collection-target] {
    transform: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .marquee-advanced [data-marquee-scroll-target],
    .marquee-advanced [data-marquee-collection-target] {
        transform: none !important;
        margin-left: 0 !important;
        width: 100% !important;
        animation: none !important;
    }
}


/* ── 404 page wrapper ──────────────────────────────────────────────────── */
/* Lays out the WP-chromed 404 page: a centered intro band, the isolated
   game iframe, and a CTA row. The iframe is sandboxed and styled here at
   the wrapper level only — its inner game is its own browsing context
   (see 404.php docblock). Aspect ratio sized for the original game's
   portrait layout, capped to a comfortable on-page height. */
.page-404 {
    background: var(--ssb-cream, #EFE2C7);
    color: var(--ssb-ink, #0F0F0F);
    padding: 40px 0;
}
.page-404__intro {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
    padding: 0 1rem;
}
.page-404__title {
    margin: 8px 0 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ssb-ink, #0F0F0F);
}
.page-404__lede {
    margin: 18px auto 0;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    max-width: 52ch;
    color: var(--ssb-ink, #0F0F0F);
}
.page-404__game-frame {
    position: relative; /* anchors the .page-404__cover overlay */
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    /* Lock to portrait 9:16 (the game's native canvas ratio). aspect-
       ratio is the SOLE size constraint — height is purely derived. The
       earlier version layered an explicit `height: clamp(...)` on top,
       which fought the aspect-ratio: at narrow widths the clamp height
       exceeded the 9:16 height, so the box became taller-than-9:16 and
       the inner canvas got centered with letterboxing; at very small
       widths the clamp made the box wider-than-9:16 and the canvas got
       cropped top + bottom. Single constraint, no clipping. */
    aspect-ratio: 9 / 16;
    background: var(--ssb-ink, #0F0F0F);
   
    box-shadow: 0 12px 40px rgba(15, 15, 15, 0.18);
    /* No `overflow: hidden` here — the iframe is exactly the size of
       the wrapper, so there's nothing to clip. Removing this also
       prevents accidental cropping if the iframe gets a 1px rounding
       overflow on certain zoom levels. */
}
.page-404__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Game cover (swipe shield + tap-to-play / tap-to-resume) ───────────── */
/* A parent-side <button> stacked over the iframe. Because it's a button,
   the browser's tap-vs-scroll heuristics apply natively: a vertical swipe
   pans the page (touch-action: pan-y), a tap fires `click`. That fixes
   the bug where swipes on the iframe registered inside the game as start
   taps. The 404.php JS toggles `hidden` on this element to enter/exit the
   playing state. */
.page-404__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 24px;
    border: 0;
    border-radius: 0;
    background: rgba(15, 15, 15, 0.78);
    color: var(--ssb-cream, #EFE2C7);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    z-index: 2;
    /* pan-y: vertical swipes scroll the page; the click event still
       fires on a true tap. This is the whole reason the cover exists. */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    transition: background 200ms ease, opacity 200ms ease;
}
.page-404__cover:hover,
.page-404__cover:focus-visible {
    background: rgba(15, 15, 15, 0.86);
}
.page-404__cover[hidden] {
    display: none;
}
.page-404__cover-label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ssb-cream, #EFE2C7);
}
.page-404__cover-hint {
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ssb-tan, #c2a488);
    opacity: 0.85;
}

/* ── Game-active body state ────────────────────────────────────────────── */
/* Set on <body> while the game is in the `playing` state. Slides the
   bottom-anchored mobile nav toggle off-screen so it doesn't block the
   game canvas.

   IMPORTANT — animate `bottom`, not `transform`. The site's nav-open
   logic in main.js uses GSAP to animate the toggle's `transform` (y +
   opacity) on every frame as part of the menu reveal. A CSS
   `transition: transform ...` declared on .nav-toggle here would catch
   every one of GSAP's frame writes and re-interpolate them, producing
   visible jank on open AND leaving the toggle stuck off-screen on
   close (the CSS transition never settles on the GSAP end state).
   Animating `bottom` sidesteps GSAP entirely — they're orthogonal
   properties on orthogonal elements. */
.mobile-nav-buttons {
    transition: bottom 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.ssb-game-active .mobile-nav-buttons {
    /* Push past the visual bottom edge by an amount that comfortably
       clears the toggle's circle (~70px) plus its shadow + safe-area.
       Using a negative `bottom` keeps `transform` untouched. */
    bottom: -200px;
    pointer-events: none;
}
.page-404__exits {
    margin: 36px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 720px;
}
@media (max-width: 600px) {
    .page-404 { padding: 40px 0; }
    /* Don't override the aspect ratio on mobile — that's exactly what
       was causing the crop. Just shrink the max-width so the box can
       use the full viewport width and let the 9:16 ratio resolve the
       height naturally. */
    .page-404__game-frame {
        max-width: 100%;
    }
}


/* ============================================================================
   GRADUATION PAGE
   ----------------------------------------------------------------------------
   Two modes: 'info' (long-runway save-the-date / get-notified) and 'tickets'
   (close-to-event upstairs access pass purchase). All sections use existing
   utilities (eyebrow, info-grid, btn-box, has-butcher-texture, has-wavy-edge-*).
   This block defines only what's NEW: the date callout panel, the calm rules
   block, the FAQ accordion, the sticky CTA placeholder, and a handful of
   per-section spacing/typography tweaks.
   ============================================================================ */

/* ── .grad-hero (shared base + per-mode variants) ─────────────────────────── */
.grad-hero {
    position: relative;
    padding: clamp(56px, 8vw, 120px) var(--spacing-xl);
}
.grad-hero__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}
.grad-hero__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
}
.grad-hero--info .grad-hero__title {
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.grad-hero--tickets {
    color: var(--wp--preset--color--text-white, #fff);
}
.grad-hero--tickets .grad-hero__title,
.grad-hero__title--tickets {
    color: var(--wp--preset--color--text-white, #fff);
}
.grad-hero__lede {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    max-width: 56ch;
}
.grad-hero--tickets .grad-hero__lede {
    color: rgba(255, 255, 255, 0.85);
}
.grad-hero__heritage {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}
.grad-hero__date-fallback {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--wp--preset--color--dark-default);
    opacity: 0.75;
}
.grad-hero__cta,
.grad-hero__subscribe-hint {
    margin: 0;
}
.grad-hero__layout {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}
.grad-hero__media {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    position: relative;
    isolation: isolate;
}
.grad-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(48, 51, 51, 0.08);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.grad-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (min-width: 850px) {
    .grad-hero--has-media .grad-hero__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
    .grad-hero--has-media .grad-hero__inner {
        text-align: left;
        align-items: flex-start;
    }
    .grad-hero--has-media .grad-hero__inner .eyebrow--centered {
        justify-content: flex-start;
    }
    .grad-hero--has-media .grad-hero__inner .has-text-align-center {
        text-align: left;
    }
    .grad-hero--has-media .grad-hero__inner .grad-hero__lede {
        text-align: left;
    }
    .grad-hero--has-media .grad-hero__inner .grad-date-card {
        margin-left: 0;
        margin-right: auto;
    }
}

/* ── .grad-date-card (the organic-shape date panel) ───────────────────────── */
/* Reused on both modes. Wraps an organic-shape SVG and stacks eyebrow, day-of-
   week (Averia italic 700), date (Bowlby SC), and an optional price row. The
   single red moment is the eyebrow. */
.grad-date-card {
    position: relative;
    padding: clamp(28px, 4vw, 44px) clamp(32px, 5vw, 64px);
    width: min(560px, 100%);
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.grad-date-card__shape {
    /* Use existing .organic-shape positioning; just give it the panel's color. */
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
/* Cream-fill variant — used when the date card sits on an ink (dark) ground.
   The base .organic-shape SVG has fill="none" hardcoded; CSS `fill` on the
   path overrides that attribute. */
.grad-date-card__shape--fill-cream path {
    fill: #f6efe1; /* grad date-card fill tone (was a phantom preset that never resolved) */
}
.grad-date-card--on-ink {
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.grad-date-card__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}
.grad-date-card__eyebrow {
    /* The ONE red moment in the panel per art-director. */
    color: var(--wp--preset--color--accent, #d32f2f);
    margin: 0 0 0.25rem;
}
.grad-date-card__dow {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.1;
}
.grad-date-card__date {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.grad-date-card__date time {
    color: inherit;
    text-decoration: none;
}
.grad-date-card__price {
    margin: 0.5rem 0 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.grad-date-card__price-amount {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1;
}
.grad-date-card__price-sep {
    color: rgba(0, 0, 0, 0.4);
}
.grad-date-card__price-unit {
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
}
@media (max-width: 600px) {
    .grad-date-card__dow {
        font-size: 1.125rem; /* ≈ "large" — drop one step on mobile per spec. */
    }
}

/* ── .grad-heritage (Mode A quiet proof block) ────────────────────────────── *
 * CONVERGED 2026-06-06 onto `.section` + `.section__head` (structure was a
 * hand-rolled duplicate). Page glue kept: the paper surface (not a system
 * ground) and the DELIBERATELY quieter title scale ("intentionally quiet"
 * per the template docblock — do not converge onto .section__title). */
.grad-heritage {
    background: #faf6ef; /* grad-page paper tone (not a system surface) */
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.grad-heritage .section__head,
.grad-heritage__head {
    margin-bottom: 0; /* head-only section — no content below to space against */
}
.grad-heritage__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0;
}

/* ── .info-grid--graduation (3-up override) ───────────────────────────────── */
/* Default .info-grid uses a 4-column grid; graduation only needs 3. */
.info-grid--graduation .info-grid__cards {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
}
@media (max-width: 820px) {
    .info-grid--graduation .info-grid__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
.info-grid--graduation .info-grid__head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.grad-section-intro {
    margin: 12px auto 0;
    max-width: 52ch;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ssb-ink);
}

/* ── .grad-subscribe (ink CTA section, both modes) ────────────────────────── *
 * CONVERGED 2026-06-06 onto `.section.section--form` + `.section__head` /
 * `.section__title` / `.section__intro` (the structural rules here were a
 * near-verbatim re-implementation). Remaining rules are page glue only.
 * The GF-label-on-dark overrides moved to the `.ssb-form-box--ink`
 * component (where they belonged — any ink form-box needs them). */
.grad-subscribe {
    /* Dark ground comes from has-dark-default-background-color (#303333,
       deliberately NOT the deeper .section--ink); text must go light. */
    color: var(--wp--preset--color--text-white, #fefefe);
}
.grad-subscribe .grad-date-card {
    /* Date card centered itself via the old flex inner; block flow now. */
    margin-inline: auto;
    margin-bottom: var(--spacing-2xl);
}
.grad-subscribe__form {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    text-align: center;
}
.grad-subscribe__microcopy {
    margin: var(--spacing-md) 0 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}

/* ── .grad-related (Mode A closer) ────────────────────────────────────────── *
 * Outer converged onto `.section` 2026-06-06. The inner keeps its tight flex
 * rhythm + narrow measure ("the calmest beat on the page" per the template
 * docblock — deliberately tighter than the system head/cta spacing) and the
 * quiet title scale. Paper surface is page glue (not a system ground). */
.grad-related {
    background: #faf6ef; /* grad-page paper tone (not a system surface) */
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.grad-related__inner {
    max-width: 760px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}
.grad-related__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}
.grad-related__body {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 52ch;
}

/* ── .grad-pickup (Mode B two-column) ─────────────────────────────────────── */
.grad-pickup {
    background: #faf6ef; /* grad-page paper tone (was a phantom preset that never resolved) */
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    padding: clamp(56px, 8vw, 96px) var(--spacing-xl);
}
.grad-pickup__inner {
    max-width: 1100px;
    margin: 0 auto;
}
.grad-pickup__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}
@media (min-width: 768px) {
    .grad-pickup__columns {
        grid-template-columns: 1fr 1fr;
        gap: clamp(32px, 4vw, 64px);
    }
}
.grad-pickup__col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.grad-pickup__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}
.grad-pickup__intro {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
.grad-pickup__list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
.grad-pickup__list li + li {
    margin-top: 0.5rem;
}
.grad-tickets-form {
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: clamp(32px, 5vw, 56px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── .grad-rules (calm bordered block — NO red, NO warning iconography) ──── */
.grad-rules-wrap {
    background: #faf6ef; /* grad-page paper tone (was a phantom preset that never resolved) */
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    padding: clamp(48px, 6vw, 80px) var(--spacing-xl);
}
.grad-rules-wrap__inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.grad-rules-wrap__head {
    text-align: center;
}
.grad-rules-wrap__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 var(--spacing-sm);
}
.grad-rules-wrap__intro {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
.grad-rules {
    position: relative;
    background: #faf6ef; /* grad-page paper tone (was a phantom preset that never resolved) */
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
}
.grad-rules__ornament {
    position: absolute;
    top: -14px;
    left: 1.5rem;
    width: 28px;
    height: 28px;
    background: #faf6ef; /* grad-page paper tone (was a phantom preset that never resolved) */
    padding: 0 4px;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    opacity: 0.6;
}
.grad-rules__list {
    list-style: none;
    counter-reset: grad-rule;
    padding: 0;
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
.grad-rules__item {
    counter-increment: grad-rule;
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    break-inside: avoid;
}
.grad-rules__item::before {
    content: counter(grad-rule) ".";
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: 0.875rem;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    opacity: 0.55;
}
@media (min-width: 768px) {
    .grad-rules__list {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

/* Mobile sticky "Get passes" bar. Emitted in tickets mode (section-hero-
   tickets.php); revealed by main.js via `.is-visible` once the hero CTA
   scrolls out of view. Off-screen + non-interactive until then. */
.grad-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--dark-default, #1a1a1a);
    z-index: 50;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.grad-sticky-cta.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.grad-sticky-cta .btn-box {
    width: 100%;
    justify-content: center;
}
@media (min-width: 850px) {
    .grad-sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .grad-sticky-cta { transition: opacity 0.25s ease, visibility 0.25s; }
}

/* ── editor-appended content fallback ─────────────────────────────────────── */
.grad-editor-content {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-xl);
}


/* ==========================================================================
   Shared Phase-1 components — catering / weddings / private-party / etc.
   --------------------------------------------------------------------------
   All classes here are intentionally un-prefixed and never page-scoped.
   Tokens used: --spacing-*, --radius-md, --radius-card, --hairline-ink,
   --hairline-cream, --surface-form-box, --surface-card,
   --wp--preset--color--*, --wp--preset--font-size--large.
   No new color, font-size, radius, or shadow tokens introduced here.
   ========================================================================== */


/* ── 1. .ssb-form-box ────────────────────────────────────────────────────── *
 *
 * Wraps any Gravity Form (or other form markup) in a warm tan box with a
 * hairline border. Internals are explicitly left-aligned to defeat any
 * inherited centering on the parent section. No shadow, no decorative
 * accents — the box is a layout container, not a feature.
 *
 * Variant: `.ssb-form-box--ink` flips to a dark surface with cream text.
 * --------------------------------------------------------------------- */
.ssb-form-box {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--spacing-2xl) var(--spacing-xl);
    background: var(--surface-form-box);
    border: 1px solid var(--hairline-ink);
    border-radius: var(--radius-md);
    text-align: left;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.ssb-form-box *:not(.ssb-form-box__intro) {
    text-align: left;
}
.ssb-form-box__head {
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.ssb-form-box__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.1;
    text-transform: uppercase;
}
.ssb-form-box__intro {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.8;
}
/* FBB signup confirmation (Form 4) — the plugin's gform_confirmation_4
   replaces the form with .fbb-signup-confirmation; the box's own head would
   read as stale pitch copy above a "you're done" message, so hide it when
   the confirmation is present. */
.ssb-form-box:has(.fbb-signup-confirmation) .ssb-form-box__head {
    display: none;
}
.fbb-signup-confirmation > * + * {
    margin-top: var(--spacing-md);
}
.fbb-signup-confirmation p {
    margin: 0;
    line-height: 1.55;
}
.fbb-signup-confirmation__escape {
    font-family: 'Averia Libre', serif;
    font-style: italic;
    opacity: 0.85;
}

/* Recipient choose-date page — personalized sender line from
   [fbb_gift_sender] leads the box intro. */
.fbb-gift-sender {
    margin: 0 0 var(--spacing-sm);
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* Gift tile — the main box being sent (thumb + title + excerpt, no price).
   Generic media-object card; sits under the sender line on the recipient
   page, reusable for any "here's the product" beat on warm utility grounds. */
.gift-tile {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0 var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface-primary, #fff);
    border: 1px solid var(--hairline-ink, rgba(26, 26, 26, 0.10));
    border-radius: var(--radius-md);
}
.gift-tile__media {
    flex: 0 0 88px;
}
.gift-tile__media img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
}
.gift-tile__title {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--text-primary, #303333);
}
.gift-tile__excerpt {
    margin: var(--spacing-xs) 0 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text-secondary, #666);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 480px) {
    .gift-tile {
        align-items: flex-start;
    }
}

/* Once GF renders its post-submit confirmation in the box (AJAX or reload),
   the "choose the day…" instruction is stale — retire it. The sender line
   and gift tile stay: they're still true, and they frame the confirmation. */
.ssb-form-box:has(.gform_confirmation_wrapper) .fbb-gift-instruction,
.ssb-form-box:has(.gform_confirmation_message) .fbb-gift-instruction {
    display: none;
}

.ssb-form-box .gform_fields {
    gap: var(--spacing-lg);
}
.ssb-form-box .gform_footer {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--spacing-xl);
}

/* Submit button height — GF's --framework theme paints submit min-height
   from `--gf-ctrl-btn-size` (38px default), redeclared via a multi-class
   selector on the .gform_wrapper itself, then again via .gform-theme--
   framework on the button via `:where()` chains. Setting our own variable
   loses the cascade; the only safe-and-bounded path is `!important` on a
   button-level rule, scoped to `.ssb-form-box`. Spec floor: 48px desktop /
   56px + full-width mobile (refusal #22, recurring issue). Scoped to the
   `.ssb-form-box` namespace so every form-box embed site-wide benefits —
   not a careers-only patch. */
.ssb-form-box .gform_wrapper .gform_button,
.ssb-form-box .gform_wrapper button[type="submit"] {
    min-height: 48px !important;
    /* Brand submit treatment — mirrors the framework-theme rule (~line 640) but
       scoped to .ssb-form-box so it ALSO covers legacy / gform-theme--no-framework
       forms (e.g. the catering inquiry GF #11), which the framework-gated rule
       skipped, leaving GF's default blue button. Keeps every form-box submit on
       the same dark pill regardless of the form's GF theme mode. */
    background-color: var(--wp--preset--color--dark-default) !important;
    /* Cream preset matches .ssb-form-box--ink. (The legacy --color-text-white
       token this once warned about was removed site-wide 2026-06-06.) */
    color: var(--wp--preset--color--text-white, #fefefe) !important;
    border: 0 !important;
    border-radius: 980px !important;
    padding: 11px 21px !important;
    font-family: var(--apple-font) !important;
    font-size: var(--apple-font-size) !important;
}
@media (max-width: 640px) {
    .ssb-form-box .gform_wrapper .gform_button,
    .ssb-form-box .gform_wrapper button[type="submit"] {
        min-height: 56px !important;
        width: 100% !important;
    }
}

/* Soft danger hint — only renders if the existing apple-danger token is in scope. */
.ssb-form-box:has(.gfield_error) {
    border-color: var(--apple-danger);
}

@media (max-width: 850px) {
    .ssb-form-box {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* Ink variant — dark surface, cream text, hairline-cream border. */
.ssb-form-box--ink {
    background: var(--wp--preset--color--dark-default, #1a1a1a);
    border-color: var(--hairline-cream);
    color: var(--wp--preset--color--text-white, #fefefe);
}
.ssb-form-box--ink .ssb-form-box__title,
.ssb-form-box--ink .ssb-form-box__intro {
    color: var(--wp--preset--color--text-white, #fefefe);
}
.ssb-form-box--ink .gfield input,
.ssb-form-box--ink .gfield textarea,
.ssb-form-box--ink .gfield select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--wp--preset--color--text-white, #fefefe);
    border-color: var(--hairline-cream);
}
/* Labels/legends/descriptions on the ink variant (moved 2026-06-06 from
   grad-subscribe page scope — any ink form-box needs these, not just grad).
   !important is required to counter the Apple-fields framework label rule
   (~line 452) which forces --apple-label-color (near-black) with !important
   — it had been silently beating the original grad-scoped rule, so labels
   shipped dark-on-dark on the graduation subscribe form. This fixes that. */
.ssb-form-box--ink .gform_wrapper label,
.ssb-form-box--ink .gform_wrapper .gfield_label,
.ssb-form-box--ink .gform_wrapper legend,
/* framework-depth selectors: the Apple rule is body .gform_wrapper.gform-theme--framework
   .gfield > label.gfield_label (0,4,2) — must match-and-exceed it. */
body .ssb-form-box--ink .gform_wrapper.gform-theme--framework fieldset legend.gfield_label,
body .ssb-form-box--ink .gform_wrapper.gform-theme--framework .gfield > label.gfield_label {
    color: var(--wp--preset--color--text-white, #fefefe) !important;
}
.ssb-form-box--ink .gform_wrapper .gfield_description,
.ssb-form-box--ink .gform_wrapper .ginput_complex label {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* ── FBB recipient "confirm delivery date & address" page (ID 488) ─────────
   A gift recipient lands here cold from an email. The page content (Gutenberg)
   wraps GF Form 3 in a real `.ssb-form-box` with a warm heading + intro; these
   page-scoped rules supply the cream ground and hide the internal plumbing.
   Scoped to `.page-id-488` so nothing leaks to other Form-3 embeds. */
.page-id-488 #main {
    background: var(--ssb-cream);
    padding-block: var(--ssb-section-y);
}
/* The plain index.php page title is hidden — the form-box carries its own h1. */
.page-id-488 h1.center-text { display: none; }
/* Order ID / Original Entry ID are readonly, prefilled plumbing the recipient
   must never see; they stay in the DOM (so they submit) but are hidden. */
.page-id-488 #field_3_4,
.page-id-488 #field_3_5 { display: none; }
/* Datepicker selected-day: brand red, not the jQuery-UI default blue. */
.page-id-488 .ui-datepicker .ui-state-active {
    background: var(--ssb-red-deep);
    color: var(--wp--preset--color--text-white, #fefefe);
}
/* Datepicker day cells to a ≥44px tap target on mobile. */
@media (max-width: 640px) {
    .page-id-488 .ui-datepicker td a,
    .page-id-488 .ui-datepicker td span {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ── 2. .faq (generic native <details>/<summary> accordion) ──────────────── *
 *
 * Replaces the page-bound `.grad-faq__*` rules. Reusable across
 * graduation, catering, weddings, FBB. No JS — uses native <details>.
 *
 * Variants:
 *   .faq--compact   — denser summary padding for tight surfaces.
 *   .faq--inverse   — hairline-cream + cream text on dark sections.
 * --------------------------------------------------------------------- */
.faq-section {
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    padding: clamp(56px, 8vw, 96px) var(--spacing-xl);
}
.faq-section__inner {
    max-width: 760px;
    margin: 0 auto;
}
.faq-section__head {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.faq-section__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0;
}
.faq-section__intro {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
}
.faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    /* clamp folded in 2026-06-06 from a later duplicate rule that had been
       winning over the original var(--spacing-xl). */
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.faq {
    border-top: 1px solid var(--hairline-ink);
}
.faq__item {
    border-bottom: 1px solid var(--hairline-ink);
}
.faq__summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    color: inherit;
}
.faq__summary::-webkit-details-marker {
    display: none;
}
/* Hover affordance is an underline, NOT a color shift. The FAQ section sits
   on tan (butcher texture), where red (--accent) fails legibility AND breaks
   the brand rule "no red on tan." Underline inherits the legible ground color
   (ink on tan, cream on .faq--inverse) so one rule is correct on both. */
.faq__summary:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.faq__summary:focus-visible {
    /* currentColor, not --accent: ink-on-tan / cream-on-ink, never red-on-tan. */
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}
.faq__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease-out;
    color: inherit;
    opacity: 0.7;
}
.faq__item[open] .faq__chevron {
    transform: rotate(90deg);
}
.faq__answer {
    padding: 0 0 1.25rem;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: inherit;
}
.faq__answer p,
.faq__answer ul,
.faq__answer ol {
    margin: var(--spacing-sm) 0;
    max-width: 64ch;
}
.faq__answer p:first-child,
.faq__answer ul:first-child,
.faq__answer ol:first-child {
    margin-top: 0;
}
.faq__answer p:last-child,
.faq__answer ul:last-child,
.faq__answer ol:last-child {
    margin-bottom: 0;
}
.faq__answer a {
    /* Inherit the ground color (ink on tan, cream on inverse) + underline —
       red links muddy on the tan/butcher FAQ ground. "No red on tan." */
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .faq__chevron { transition: none; }
}

/* Compact variant — denser tap target for tight teaser surfaces. */
.faq--compact .faq__summary {
    padding: 0.875rem 0;
    font-size: 1rem;
}

/* Inverse variant — hairlines and copy invert for dark backgrounds. */
.faq--inverse {
    border-top-color: var(--hairline-cream);
    color: var(--wp--preset--color--text-white, #fefefe);
}
.faq--inverse .faq__item {
    border-bottom-color: var(--hairline-cream);
}


/* ── 3. .package-card / .package-card--featured ─────────────────────────── *
 *
 * Reusable package card: photo on top, body below. Body lays out as a
 * column with `gap` so missing optional fields don't open visual gaps.
 * The CTA `margin-top: auto` floats to the bottom edge so card heights
 * line up regardless of body length.
 *
 * Featured variant flips to dark surface with the same internal layout.
 *
 * MERGED 2026-06-06: a second full .package-card definition (authored in
 * the Catering Phase-3 block, ~700 lines below) duplicated this family and,
 * being later in source, silently won every overlapping property. The two
 * were merged here — values below are the EFFECTIVE (rendered) interleave,
 * not this block's original intent — and the Phase-3 duplicates deleted.
 * Page-scoped layers (.business-gifting .package-card__price-amount, the
 * .biz-gifting-packages__grid carousel) still apply on top, untouched.
 * --------------------------------------------------------------------- */
.package-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card);
    overflow: hidden;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
/* Grid wrapper (moved up from the Phase-3 block during the merge). */
.package-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.package-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--hairline-ink);
    overflow: hidden;
}
.package-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.package-card__flag {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--ssb-ink);
    color: var(--wp--preset--color--text-white, #fefefe);
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
}
/* Body groups read identity (eyebrow+title) -> value (what's included) ->
   cost (price) -> action (button) -> caveat (fineprint). Blanket gap is
   replaced by per-group margins so those seams breathe unevenly (tight
   eyebrow->title, generous value/cost/action breaks). Markup order in
   package-card.php matches: eyebrow, title, includes, price, CTA, fineprint. */
.package-card__body {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.package-card__capacity {
    margin: 0 0 var(--spacing-sm);
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.72;
    color: var(--ssb-ink-soft, rgba(26, 26, 26, 0.65));
}
.package-card__title {
    margin: 0 0 var(--spacing-lg);
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: inherit;
    text-transform: uppercase;
}
/* Price is a quiet FACT, not a second headline — Averia body voice (never
   the Bowlby display face), 1rem, ink, left-aligned. A long multi-clause
   price ("$750 rental + $1,000 food and drink minimum") wraps like a
   sentence. margin-top:auto floats the price/CTA/fineprint cluster to the
   card bottom so grids bottom-align on the price baseline. */
.package-card__price {
    margin: auto 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-family: 'Averia Libre', sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ssb-ink-soft, #1a1a1a);
}
.package-card__price-prefix,
.package-card__price-suffix {
    font-weight: 400;
    opacity: 0.72;
}
.package-card__price-amount {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    color: inherit;
}
.package-card__includes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.package-card__includes li {
    position: relative;
    padding-left: 1.75rem;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}

/* --- Universal "what's included" check marker ---------------------------
 * Shared by .section__checklist and .package-card__includes — a filled disc
 * the SAME color as the list text (currentColor) with the checkmark KNOCKED
 * OUT so the surface shows through it. Because the disc IS the text color and
 * the check is the surface, the marker reads on every ground (cream sections,
 * the dark featured card, tan) with zero per-ground overrides.
 *
 * Built with mask-image (a disc-minus-check alpha shape) tinted by
 * background-color. The data-URI carries NO XML comments (a `--` would
 * silently break the mask decoder). border-radius is a graceful fallback:
 * if mask is unsupported the marker degrades to a solid currentColor dot.
 * Decorative / CSS-only — the <li> text carries the meaning. */
.section__checklist li::before,
.package-card__includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc((1.55em - var(--check-size, 1.2rem)) / 2);
    width: var(--check-size, 1.2rem);
    height: var(--check-size, 1.2rem);
    border-radius: 50%;
    background-color: var(--check-color, currentColor);
    --check-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Cmask%20id='c'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='white'/%3E%3Cpath%20d='M4.7%2010.4l3.4%203.5%207.2-7.8'%20fill='none'%20stroke='black'%20stroke-width='2.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='black'%20mask='url(%23c)'/%3E%3C/svg%3E");
    -webkit-mask: var(--check-mask) center / contain no-repeat;
    mask: var(--check-mask) center / contain no-repeat;
}
.package-card__fineprint {
    margin: var(--spacing-md) 0 0;
    font-family: 'Averia Libre', serif;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.45;
    opacity: 0.72;
    color: var(--ssb-ink-soft, rgba(26, 26, 26, 0.65));
}
/* fine_print is a wpautop'd <p>…</p> inside the .package-card__fineprint div;
   zero its margins so the wrapper margin alone controls spacing. */
.package-card__fineprint p {
    margin: 0;
}
/* margin-top:auto now lives on .package-card__price (bottom-pins the whole
   cost/action/caveat cluster); the CTA just needs a gap above it. */
.package-card__cta {
    align-self: flex-start;
    margin-top: var(--spacing-lg);
}

@media (prefers-reduced-motion: no-preference) {
    .package-card:hover,
    .package-card:focus-within {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

/* Featured variant — dark surface, cream text. Price + title both inherit
 * the card's cream (the price is now quiet ink/cream, no longer accent-red).
 *
 * Featured card CTA: use `.btn-box--ghost-ink` (cream stroke on dark
 * surface). Solid `--ink` disappears against the surface. Do not introduce a
 * `--cream` solid variant unless a future surface needs it.
 * (Design-consultant ratification, Phase 5.) */
.package-card--featured {
    background: var(--ssb-ink, #1a1a1a);
    border-color: transparent;
    color: var(--wp--preset--color--white, #fff);
}
.package-card--featured .package-card__title,
.package-card--featured .package-card__price {
    color: inherit;
}
.package-card--featured .package-card__capacity,
.package-card--featured .package-card__fineprint {
    color: rgba(255, 255, 255, 0.7);
}
/* Featured card needs no marker override — the universal tan disc + warm-white
   check (see "what's included check marker") already reads on the dark ground. */
/* Featured media: 3:2 instead of the default 4:3 so the dark card
   has a more cinematic photo well. */
.package-card--featured .package-card__media { aspect-ratio: 3 / 2; }

/* Monogram fallback — when a card has no thumbnail set, render a
   single-letter monogram in the media well so the layout stays intact
   instead of collapsing the photo aspect-ratio. The letter is set on
   the markup via `data-monogram="X"`. */
.package-card__media:not(:has(img)) {
    display: grid;
    display: none;
    place-items: center;
    background: var(--hairline-ink);
}
.package-card__media:not(:has(img))::before {
    content: attr(data-monogram);
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    opacity: 0.18;
    text-transform: uppercase;
    line-height: 1;
}
.package-card--featured .package-card__media:not(:has(img))::before {
    color: #fff;
    opacity: 0.22;
}

/* (Two legacy mobile overrides — body padding-tighten at ≤850px, CTA
   stretch at ≤600px — were already dead-by-override before the 2026-06-06
   merge: the Phase-3 duplicate's later-in-source base rules beat them at
   equal specificity. Deleted rather than resurrected.) */


/* ── 4. .package-comparison — RETIRED 2026-06-10 ─────────────────────────── *
 * The side-by-side comparison component (and its template + CSS) was removed.
 * The four wedding buffets it rendered on /weddings/packages/ now use the
 * standard .package-card grid (same as the stations + /weddings/) — it had
 * drifted from the redesigned card hierarchy. Nothing emits `.package-comparison*`
 * anymore; the class is free to reuse. */

/* ── 5. .review-card / .review-strip ────────────────────────────────────── *
 * MERGED 2026-06-06 into the Catering Phase-3 block below (which had a full
 * duplicate definition that, being later in source, already won every
 * overlapping property — the merged rules there are the effective render).
 * The A-only declarations this block contributed (min-height, star SVG
 * sizing/fill, photo fallback, etc.) were folded into that block.
 * `.review-grid` (unused — template-page-reviews.php emits `.reviews-grid`)
 * was deleted. */

/* ── Filter chips — generalize .filter-btn (kept compatible with the
   shop-filter-group rules above which now layer on top of these). ──── */
.filter-btn {
    border: 2px solid var(--wp--preset--color--dark-default, #1a1a1a);
    background: transparent;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-family: 'Averia Libre', serif;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.3s cubic-bezier(0.625, 0.05, 0, 1),
        color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}
.filter-btn[data-filter-status="active"] {
    background-color: var(--wp--preset--color--dark-default, #1a1a1a);
    color: var(--wp--preset--color--text-white, #fff);
}
.filter-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, var(--wp--preset--color--primary));
    outline-offset: 2px;
}



/* =============================================================
   Catering / Phase 3 page templates
   -------------------------------------------------------------
   Reusable section + component styles for the 12 catering page
   records (catering hub, sub-services, private party, weddings,
   FAQ, reviews, catering menu). All classes live in the global
   namespace — neutral component names, not page-bound.
   ============================================================= */

/* --- catering-section: legacy wrapper + archetype + inner / head rules
 *     RETIRED in Pass 1 (patch) — wrapper, __inner, __head — and Pass 2
 *     (1.1.189) — all remaining `.catering-section*` selectors were renamed
 *     to canonical `.section*` after the 15 template migrations. Templates
 *     now emit `.section`, `.section--cream`, `.section--band`, etc.
 *     directly; no `.catering-section` consumers remain in themes/brats/.
 *     (`.section--intro` was also retired in 1.1.191 — bare `.section` is
 *     the canonical intro-band archetype; no surface modifier needed.)
 * --- catering-content: page-specific content classes (NOT section system) -- */
/* `.section__lede` was retired in Pass 2 (1.1.191). All templates now emit
   `.section__intro` (canonical Pass-1 contract at ~:6213). `.section__body`
   keeps a default 60ch/Averia treatment as a soft baseline; body content
   authors its own layout per the empty `.section__body` rule at ~:6225.
   1.1.194: dropped the hardcoded `color: var(--ssb-ink)` — it defeated the
   surface-modifier cascade (`.section--ink` sets `color: var(--ssb-cream)`,
   but this rule's higher specificity won, so `.section__body` inside an
   ink section rendered ink-on-ink — invisible on /jobs/ disclosure).
   Color now inherits from the surface modifier, per the SECTION SYSTEM
   block's "color inherits" contract. */
.section__body {
    max-width: 60ch;
    margin: 0 auto;
    font-family: 'Averia Libre', serif;
    font-size: 1.125rem;
    line-height: 1.6;
    /* color: inherits from surface modifier (.section--cream / --ink / --red) */
}
/* `.section__cta` margin-top is owned by the canonical rule at ~:6350
   (`var(--ssb-section-cta-mt)`, which resolves to the same clamp() the
   legacy `.catering-section__cta` rule used). Layout (flex centering) is
   also canonical there. No catering-specific override needed. */
.section__pitch {
    max-width: 60ch;
    margin: 0 auto;
    font-family: 'Averia Libre', serif;
    font-size: 1.1875rem;
    line-height: 1.65;
}
.section__pitch p { margin-bottom: 1rem; }
.section__form-placeholder,
.section__photos-placeholder {
    text-align: center;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
    margin-block: 1rem;
}
.section__form-cta {
    text-align: center;
    margin-block: 1.5rem 0.5rem;
}
.section__fineprint {
    font-size: 0.875rem;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
    text-align: center;
}

/* Hero override — catering hero shape lives on top of front-hero--simple */
.catering-hero { min-height: auto; }
.catering-hero .front-hero__inner {
    padding-block: clamp(3rem, 7vw, 5.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.catering-hero__title {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
    max-width: 18ch;
}
.catering-hero__sub {
    max-width: 56ch;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.75));
    text-align: center;
}
.catering-hero__cta {
    margin: 0 auto;
}

/* --- key-facts grid — neutral name, no surface coupling ---
 *
 * Phase-5 art-direction refactor: the default treatment is hairline-only
 * (label/value rows separated by 1px rules), not white card boxes. The
 * boxed treatment is preserved as the `.kf-grid--boxed` modifier for
 * pages that want raised cards on a darker surface (ink/tan).
 *
 * The hairline default reads as a quiet system schedule on cream
 * surfaces; the boxed modifier reads as raised cards on ink surfaces.
 * --------------------------------------------------------------------- */
.kf-grid {
    display: grid;
    grid-template-columns: repeat(var(--kf-grid-cols, 4), minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline-ink);
}
.kf-grid--2up { --kf-grid-cols: 2; }
.kf-grid--3up { --kf-grid-cols: 3; }
.kf-grid--4up { --kf-grid-cols: 4; }
.kf-grid__item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline-ink);
    border-right: 1px solid var(--hairline-ink);
    border-radius: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
/* Strip the right-edge hairline on the last column (per row count). */
.kf-grid--2up .kf-grid__item:nth-child(2n) { border-right: 0; }
.kf-grid--3up .kf-grid__item:nth-child(3n) { border-right: 0; }
.kf-grid--4up .kf-grid__item:nth-child(4n) { border-right: 0; }
.kf-grid__label,
.kf-grid__item dt {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.7));
    margin: 0;
}
.kf-grid__value,
.kf-grid__item dd {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--medium, 1.0625rem);
    line-height: 1.45;
    color: var(--ssb-ink, #1a1a1a);
}
@media (max-width: 900px) {
    .kf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kf-grid .kf-grid__item { border-right: 1px solid var(--hairline-ink); }
    .kf-grid .kf-grid__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
    .kf-grid { grid-template-columns: 1fr; }
    .kf-grid .kf-grid__item { border-right: 0; }
}

/* Boxed modifier — raised white cards in a gap'd layout. The original
   pre-refactor treatment, kept as opt-in for ink/tan surfaces where the
   hairline-only treatment would disappear into the background. */
.kf-grid--boxed {
    border-top: 0;
    gap: var(--spacing-lg);
}
.kf-grid--boxed .kf-grid__item {
    background: var(--surface-card);
    border: 1px solid var(--hairline-ink);
    border-radius: var(--radius-card);
}
.kf-grid--boxed .kf-grid__item,
.kf-grid--boxed .kf-grid--2up .kf-grid__item:nth-child(2n),
.kf-grid--boxed .kf-grid--3up .kf-grid__item:nth-child(3n),
.kf-grid--boxed .kf-grid--4up .kf-grid__item:nth-child(4n) {
    border-right: 1px solid var(--hairline-ink);
    border-bottom: 1px solid var(--hairline-ink);
}
/* On dark surfaces (`.has-primary-background-color` parent), invert
   to a translucent cream card with cream hairlines. */
.has-primary-background-color .kf-grid--boxed .kf-grid__item,
.has-dark-default-background-color .kf-grid--boxed .kf-grid__item {
    background: rgba(254, 254, 254, 0.06);
    border-color: var(--hairline-cream);
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* --- checklist (what's-included list) --- */
.section__checklist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.5rem;
}
.section__checklist li {
    position: relative;
    padding-left: 1.75rem;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
/* Marker (.section__checklist li::before) is the shared "what's included
   check marker" defined near .package-card__includes above. */
@media (max-width: 720px) {
    .section__checklist { grid-template-columns: 1fr; }
}

/* --- process steps --- */
.process-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    counter-reset: step;
}
.process-steps__item {
    background: var(--surface-primary, #fff);
    border-radius: var(--radius-card, 8px);
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(0,0,0,0.08);
}
.process-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #c2a488);
    color: #fff;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-size: 1.125rem;
    line-height: 1;
}
.process-steps__label {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ssb-ink, #1a1a1a);
}
.process-steps__desc {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
@media (max-width: 900px) {
    .process-steps { grid-template-columns: 1fr; }
}

/* --- CTA band --- */
.cta-band__title { margin-bottom: 0.5rem; }
.cta-band__sub {
    max-width: 56ch;
    margin: 0 auto 1.75rem;
    font-family: 'Averia Libre', serif;
    font-size: 1.0625rem;
    line-height: 1.55;
}
.cta-band__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.25rem;
}

/* --- router cards (catering hub) --- */
.router-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.router-card { margin-bottom: 0; }
/* Square, left-aligned photo thumbnail at the top of each tile. Click-to-zoom
   is wired by assets/js/click-zoom.js via the `[data-click-zoom]` figure (same
   lightbox as the food-menu thumbs). zoom-in cursor signals it's tappable. */
.router-card__thumb {
    margin: 0 0 0.5rem 0;
    width: clamp(96px, 38%, 128px);
    aspect-ratio: 1 / 1;
    align-self: flex-start;
    overflow: hidden;
    border-radius: var(--radius-card, 16px);
    cursor: zoom-in;
    background: rgba(255, 255, 255, 0.08);
}
.router-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.router-card__cta {
    align-self: flex-start;
    margin-top: 0.75rem;
}
@media (max-width: 900px) {
    .router-cards { grid-template-columns: 1fr; }
}

/* --- wedding-modes — same shape as router-cards but no media --- */
.wedding-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.wedding-mode {
    background: var(--surface-primary, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius-card, 8px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.wedding-mode__eyebrow {
    margin: 0;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
}
.wedding-mode__title {
    margin: 0;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
}
.wedding-mode__body {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.55;
}
.wedding-mode__cta { margin-top: auto; }
@media (max-width: 900px) {
    .wedding-modes { grid-template-columns: 1fr; }
}

/* --- package-card / package-card-grid ---
   MERGED 2026-06-06 into the Shared Phase-1 components block above (single
   home). The duplicate definitions that lived here had been silently winning
   every overlapping property; the merged block now carries those effective
   values. */

/* (The .package-comparison component was retired 2026-06-10 — the four
   wedding buffets it rendered on /weddings/packages/ now use the standard
   .package-card grid, same as the stations + /weddings/. It had drifted from
   the redesigned card hierarchy. See template-weddings-packages.php.) */

/* --- review strip & grid ---
   SINGLE HOME for the .review-card family since the 2026-06-06 merge (the
   Shared Phase-1 block above had a duplicate definition; its A-only
   declarations — min-height, star SVG sizing/fill, photo fallback, body
   italic, the <850px list padding — were folded in below). */
.review-strip {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.review-strip__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.review-strip__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(var(--strip-count, 3), minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Demoted 2026-06-10 — the "read all reviews" link is intentionally quiet:
   on a conversion page we'd rather hold the visitor on-page to finish the
   inquiry than route them off to the reviews archive. Small, secondary-color,
   plain underline (no btn/accent treatment) so it reads as a footnote, not a
   call to action. Reuses existing tokens — no new class. */
.review-strip__cta {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
}
.review-strip__cta a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.review-strip__cta a:hover,
.review-strip__cta a:focus-visible {
    color: var(--text-primary);
}
@media (max-width: 900px) {
    .review-strip__list { grid-template-columns: 1fr; }
}
@media (max-width: 849px) {
    .review-strip__list {
        overflow-x: auto;
        padding-bottom: var(--spacing-md);
    }
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-card, 8px);
    padding: 1.5rem;
    min-height: 280px;
    color: var(--wp--preset--color--dark-default, #1a1a1a);
}
.review-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--wp--preset--color--accent, #d32f2f);
}
.review-card__stars svg {
    width: 16px;
    height: 16px;
    display: block;
}
/* Filled stars take the parent color; outline stars dim toward the
   surface via color-mix on currentColor so the dim level survives a
   parent that flips `color` to cream on dark backgrounds. */
.review-card__star--filled { fill: currentColor; }
.review-card__star--outline { color: color-mix(in srgb, currentColor 18%, transparent); }
.review-card__body {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
    quotes: """ """;
    flex: 1;
}
.review-card__body p { margin: 0 0 0.75rem; }
.review-card__body p:last-child { margin-bottom: 0; }
.review-card__attribution {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}
.review-card__photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--hairline-ink);
}
.review-card__name {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.review-card__role {
    font-family: 'Averia Libre', serif;
    font-size: 0.8125rem;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
    font-style: italic;
    opacity: 0.72;
    line-height: 1.3;
    margin-top: 2px;
}

/* ==========================================================================
   Press clips — .clip-grid + .clip-card
   --------------------------------------------------------------------------
   Outlet-dominant cards for third-party write-ups (template-page-press.php).
   The grid bands on the editor-driven [data-count] attribute so a sparse
   1–2 item list reads as intentional, not broken; 3–5 stay a fixed 3-up;
   6+ flows auto-fill. Each card is a single <a>; hover/focus lifts it.
   Generalized component classes (no page-binding) per CLAUDE.md.
   ========================================================================== */

.clip-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Sparse: 1–2 items center as a single readable column. */
.clip-grid[data-count="1"],
.clip-grid[data-count="2"] {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}
/* 6 or more: auto-fill so wide lists fill the row evenly. */
.clip-grid[data-count="6"],
.clip-grid[data-count="7"],
.clip-grid[data-count="8"],
.clip-grid[data-count="9"],
.clip-grid:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]) {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Split halves (a mid-grid band was injected): pin the 6+ auto-fill column
   algorithm on BOTH halves regardless of each half's own data-count, so the
   page doesn't switch grid algorithms across the band when a half holds
   fewer than 6 items. */
.clip-grid--split {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* A featured clip spans the full row to lead the list. */
.clip-card--featured {
    grid-column: 1 / -1;
}
@media (max-width: 781px) {
    .clip-grid,
    .clip-grid[data-count="1"],
    .clip-grid[data-count="2"] {
        grid-template-columns: 1fr;
    }
}

.clip-card {
    display: flex;
    background: var(--surface-card, #fff);
    border: 1px solid var(--hairline-ink, rgba(26,26,26,0.10));
    border-radius: var(--radius-card, 8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.clip-card__link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1rem);
    width: 100%;
    padding: var(--spacing-xl, 1.5rem);
    color: inherit;
    text-decoration: none;
}
.clip-card__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 3px;
}

/* Outlet lockup — fixed-height box so headlines align across cards. */
.clip-card__outlet {
    display: flex;
    align-items: center;
    min-height: 48px;
}
.clip-card__logo {
    max-height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.clip-card__wordmark {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--ssb-ink, #1a1a1a);
}

.clip-card__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium, 1.125rem);
    line-height: 1.3;
}

.clip-card__quote {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.7));
}

/* Meta row pins to the bottom so cards line up; hairline separates it. */
.clip-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: var(--spacing-md, 0.75rem);
    border-top: 1px solid var(--hairline-ink, rgba(26,26,26,0.10));
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--tiny, 0.8125rem);
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
}
.clip-card__source {
    font-style: italic;
}
.clip-card__date {
    white-space: nowrap;
}

.clip-card__read {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.65));
    transition: color 0.2s ease;
}
.clip-card__arrow {
    transition: transform 0.2s ease;
}

/* Hover / focus: lift the card, warm the read affordance, nudge the arrow. */
.clip-card:hover,
.clip-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}
.clip-card:hover .clip-card__read,
.clip-card:focus-within .clip-card__read {
    color: var(--wp--preset--color--accent, #d32f2f);
}
.clip-card:hover .clip-card__arrow,
.clip-card:focus-within .clip-card__arrow {
    transform: translate(2px, -2px);
}

/* Featured clip — full-width, stronger frame, larger lockup, 2-col body. */
.clip-card--featured {
    border-color: var(--ssb-ink, #1a1a1a);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}
.clip-card--featured .clip-card__outlet {
    min-height: 64px;
}
.clip-card--featured .clip-card__logo {
    max-height: 60px;
}
.clip-card--featured .clip-card__wordmark {
    font-size: var(--wp--preset--font-size--x-large, 1.5rem);
}
.clip-card--featured .clip-card__title {
    font-size: var(--wp--preset--font-size--large, 1.25rem);
}
@media (min-width: 782px) {
    .clip-card--featured .clip-card__link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        column-gap: var(--spacing-2xl, 2rem);
        row-gap: var(--spacing-md, 0.75rem);
        align-items: start;
    }
    .clip-card--featured .clip-card__outlet {
        grid-column: 1;
        grid-row: 1;
    }
    .clip-card--featured .clip-card__title {
        grid-column: 2;
        grid-row: 1;
    }
    .clip-card--featured .clip-card__quote {
        grid-column: 2;
        grid-row: 2;
    }
    .clip-card--featured .clip-card__meta {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    .clip-card--featured .clip-card__read {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

/* Reduced motion: keep the color cue, drop the lift/translate transitions. */
@media (prefers-reduced-motion: reduce) {
    .clip-card,
    .clip-card__arrow {
        transition: color 0.2s ease;
    }
    .clip-card:hover,
    .clip-card:focus-within {
        transform: none;
    }
    .clip-card:hover .clip-card__arrow,
    .clip-card:focus-within .clip-card__arrow {
        transform: none;
    }
}

/* Press-page media-inquiry band sits quiet under the page h2. */
.cta-band--quiet .cta-band__title {
    font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* --- room-facts list overrides — drops the .info-grid tan bg --- */
.room-facts {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}
.room-facts__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.room-facts__head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
/* Single capacity stat — the lone room intrinsic left after zones/buffet/
   wing moved to the catering_package CPT (2026-06-10). Centered line, the
   number set in the display face; deliberately quieter than the section H2. */
.room-facts__capacity-stat {
    text-align: center;
    margin: 0;
    font-family: 'Averia Libre', sans-serif;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    color: var(--ssb-ink-soft, rgba(26,26,26,0.8));
}
.room-facts__capacity-stat strong {
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    color: var(--ssb-ink);
}
.room-facts__photos,
.room-facts__photos--standalone {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.room-facts__photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card, 8px);
}

/* (The private-party `.addon-list` styles were removed 2026-06-10 — the
   buffet + wing/tender add-ons now render as `.package-card`s from the
   catering_package CPT, same as /catering/in-house/.) */

/* --- catering menu document layout --- */
.menu-doc {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.menu-doc__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.menu-doc__item:last-child { border-bottom: 0; }
.menu-doc__name {
    margin: 0;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-weight: 400;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.menu-doc__desc {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- catering-faq filter chip transition states --- */
.faq__item[data-filter-status="not-active"] { display: none; }
.faq__item[data-filter-status="transition-out"] { opacity: 0.4; transition: opacity 0.2s ease; }

/* --- faq filter chip row layout: merged 2026-06-06 into the .faq-filters
   rule in the Shared Phase-1 components block above. --- */

/* --- editor content fallback --- */
.catering-editor-content {
    padding-block: 2rem;
    max-width: 760px;
    margin: 0 auto;
}

/* ── Skip-to-content link + visually-hidden utility ─────────────────────
 *
 * Site-wide accessibility primitives. `.screen-reader-text` is the
 * canonical WP visually-hidden pattern (announceable to AT, invisible to
 * sighted users). `.skip-link` rides on top of it so the link only
 * appears when keyboard-focused, then jumps to `#main` (set on every
 * <main> in the theme).
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.skip-link:focus {
    background-color: var(--wp--preset--color--primary, #c2a488);
    color: #fff;
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
    font-family: 'Bowlby One SC', 'Bowlby One', 'Impact', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    height: auto;
    width: auto;
    left: 0.75rem;
    top: 0.75rem;
    padding: 0.75rem 1rem;
    line-height: 1;
    z-index: 100000;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* ==========================================================================
   Phase-5 art-direction additions
   --------------------------------------------------------------------------
   - .front-hero--photo  : photo-driven catering hero, scrim + signature
   - .photo-mosaic       : 1+4 hero+supporting photo grid for /private-party/
   - .sticky-cta         : mobile-only bottom-bar CTA
   - .front-hero__signature : SVG overlay slot for hub-specific elements

   All use existing tokens (--hairline-*, --surface-card, --radius-card,
   --spacing-*, --z-overlay, --wp--preset--color--*). No new tokens.
   ========================================================================== */


/* ── .front-hero--photo ──────────────────────────────────────────────────── *
 *
 * Modifier on `.front-hero--simple`. Adds a background photo + scrim
 * with per-hub design tokens emitted inline by the rendering template:
 *   --hero-scrim-color-top
 *   --hero-scrim-color-bottom
 *   --hero-eyebrow-color
 *
 * Empty-photo state: `.front-hero--photo-empty` keeps the dark surface
 * but skips the scrim entirely so the inner content reads on flat ink.
 * --------------------------------------------------------------------- */
.front-hero--photo {
    position: relative;
    min-height: min(78svh, 580px);
    background: var(--wp--preset--color--dark-default, #1a1a1a);
    color: var(--wp--preset--color--text-white, #fefefe);
    overflow: hidden;
}
.front-hero--photo .front-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.front-hero--photo .front-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Override the `.front-hero--simple .front-hero__bg img` 0.35 opacity
       — the photo hero relies on a layered scrim, not a fade. */
    opacity: 1;
}
.front-hero--photo .front-hero__bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Three-stop, text-anchored scrim. The 0.42 mid-stop is a structural
       gradient inflection (not a brand token) that keeps a tall text stack
       legible without crushing the owner's photo — the top/bottom values
       (passed per-hub) decide which edge carries the dense ink. */
    background: linear-gradient(
        to bottom,
        var(--hero-scrim-color-top, rgba(15, 15, 15, 0)) 0%,
        var(--hero-scrim-color-mid, rgba(15, 15, 15, 0.42)) 50%,
        var(--hero-scrim-color-bottom, rgba(15, 15, 15, 0.62)) 100%
    );
    pointer-events: none;
}
.front-hero--photo > * { position: relative; z-index: 2; }
.front-hero--photo .front-hero__inner {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 1.5rem);
    text-align: center;
}
.front-hero--photo .catering-hero__title,
.front-hero--photo .front-hero__title {
    color: inherit;
}
.front-hero--photo .catering-hero__sub {
    color: inherit;
    opacity: 0.92;
}
.front-hero--photo .front-hero__eyebrow,
.front-hero--photo .eyebrow {
    color: var(--hero-eyebrow-color, var(--wp--preset--color--text-white, #fefefe));
    /* Override base .eyebrow opacity:0.72 — load-bearing for legibility on
       photos (white @ 0.72 over a mid scrim is a coin-flip on bright images).
       Unified to warm white across ALL catering heroes 2026-06-10: the prior
       per-hub red/tan/gray eyebrows were illegible on bratmobile + weddings
       and off-brand (heroes carry no red/tan type). The text-shadow + the
       0.48 mid-scrim floor (set in section-hero-photo.php) guarantee it. */
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
@media (min-width: 1100px) {
    .front-hero--photo { min-height: min(72vh, 640px); }
    .front-hero--photo .front-hero__inner {
        text-align: left;
        max-width: 56ch;
        align-items: flex-start;
        align-items: center;
    }
    .front-hero--photo .catering-hero__title { text-align: center; max-width: none; }
    .front-hero--photo .eyebrow--centered .eyebrow__divider { display: none; }
}


/* ── .front-hero__signature ─────────────────────────────────────────────── *
 *
 * Hub-specific signature EMBLEM overlay. Two flavors:
 *   --seal            weddings    — bottom-right of H1 stack, desktop only
 *   --banner          private-party fallback — top-right of hero
 * (--torn-paper removed 2026-06-10 — an edge texture is a section seam,
 *  not a hero <hr>; see the ban note above + brand refusal list #52.)
 *
 * Each flavor positions itself relative to `.front-hero__inner`. SVGs
 * are inlined by the partial so we can color-control via CSS.
 * --------------------------------------------------------------------- */
.front-hero__signature {
    pointer-events: none;
}
.front-hero__signature svg { display: block; height: auto; }

/* BANNED 2026-06-10 — `.front-hero__signature--torn-paper` removed.
   A torn/wavy edge is a SECTION-SEAM (border) texture only; using it as a
   free-standing decorative <hr> under the H1 read as a flat-top/jagged-bottom
   strip that added no value. Do not reintroduce a torn/wavy SVG as a divider.
   Emblems (seal/banner) are fine as a `signature`; edge textures are not.
   See brand refusal list: "Torn/wavy edge as a standalone <hr>/divider." */

/* Weddings hub: 70-years emblem, bottom-right corner of inner stack. */
.front-hero__signature--seal {
    display: none;
    position: absolute;
    right: var(--spacing-xl, 1.5rem);
    bottom: var(--spacing-xl, 1.5rem);
    width: 80px;
    height: 80px;
    color: var(--wp--preset--color--primary, #c2a488);
    opacity: 0.7;
}
.front-hero__signature--seal svg { width: 100%; height: 100%; }
@media (min-width: 1100px) {
    .front-hero--photo .front-hero__signature--seal { display: block; }
}

/* Private-party fallback: legendary banner emblem, top-right of hero. */
.front-hero__signature--banner {
    display: none;
    position: absolute;
    top: var(--spacing-xl, 1.5rem);
    right: var(--spacing-xl, 1.5rem);
    width: 120px;
    color: var(--wp--preset--color--text-white, #fefefe);
    opacity: 0.55;
}
.front-hero__signature--banner svg { width: 100%; height: auto; }
@media (min-width: 1100px) {
    .front-hero--photo .front-hero__signature--banner { display: block; }
}


/* ── .photo-mosaic ──────────────────────────────────────────────────────── *
 *
 * 5-slot photo grid: 1 hero (col-span 8 row-span 2) + 4 supporting
 * (col-span 4 each, 2x2). Mobile (<850px) collapses to scroll-snap row.
 *
 * Empty state: rendered by the partial as zero output — no placeholder
 * boxes appear here.
 * --------------------------------------------------------------------- */
.photo-mosaic {
    display: grid;
    gap: var(--spacing-md, 1rem);
    grid-template-columns: repeat(12, 1fr);
}
.photo-mosaic__slot {
    overflow: hidden;
    border-radius: var(--radius-card, 16px);
    background: var(--hairline-ink);
    margin: 0;
}
.photo-mosaic__slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-mosaic__slot--hero {
    grid-column: span 8;
    grid-row: span 2;
    aspect-ratio: 4 / 3;
}
.photo-mosaic__slot--sm {
    grid-column: span 4;
    aspect-ratio: 1 / 1;
}
@media (max-width: 849px) {
    .photo-mosaic {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--spacing-md, 1rem);
        grid-template-columns: none;
    }
    .photo-mosaic__slot {
        flex: 0 0 85%;
        scroll-snap-align: start;
        aspect-ratio: 4 / 3 !important;
        grid-column: auto;
        grid-row: auto;
    }
}


/* ── .sticky-cta ─────────────────────────────────────────────────────────── *
 *
 * Mobile-only bottom-bar CTA. Reveal/hide controlled by sticky-cta.js
 * via `data-state="visible|hidden"`. CSS guards desktop and any
 * surface that already has the in-page section nav.
 * --------------------------------------------------------------------- */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--wp--preset--color--dark-default, #1a1a1a);
    z-index: var(--z-overlay, 999);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
    width: auto;
    border-radius: 0;
    text-align: center;
    justify-content: center;
}
.sticky-cta[data-state="visible"] {
    opacity: 1;
    pointer-events: auto;
}
.sticky-cta .btn-box__arrow,
.sticky-cta::before {
    /* Inside the sticky bar the arrow + btn-box::before "shadow plate"
       are visual noise — the bar itself is the press target. */
    /* btn-box uses an ::before stripe; squash it here. */
}
.sticky-cta::before { display: none; }
@media (min-width: 850px) {
    .sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}
/* Don't double up on pages that already have the in-page section nav. */
body.has-section-nav .sticky-cta { display: none !important; }



/* ==========================================================================
   Order mega-menu — art-directed asymmetric layout (scoped to .mega-menu--order)
   The DTC brat-box configurator hero dominates the left; "Local Ordering"
   (Toast hand-off) and "Ship Nationwide" stack in a narrower right rail.
   main.js (setupDesktopLayout) still injects .mega-menu-inner and sweeps the
   three .mega-column children in — we only re-template the grid for this menu.
   Appended at end of file so it out-orders the base .mega-feature /
   .mega-menu-inner / .btn-box / .mega-column__title rules it overrides.
   ========================================================================== */

/* External-link utility — generalizable (any off-site nav link). Inline-SVG
   arrow instead of the unicode glyph emoji-substitution pattern. */
.mega-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.mega-link__ext { flex: none; opacity: 0.65; }
.mega-link--external:hover .mega-link__ext,
.mega-link--external:focus-visible .mega-link__ext { opacity: 1; }

/* Hero card (mobile-first) */
.mega-feature--order-hero {
  position: relative;
  background: var(--wp--preset--color--bg-darker); /* #1a1a1a — deeper than the #303 panel */
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}
.order-hero__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.order-hero__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
/* The single red moment on the whole panel: the "Ships Nationwide" flag.
   Cream on red = ~4.9:1 (passes AA); white on red would be ~4.0:1.
   Anchored to the product image (.order-hero__media-wrap) as a corner sticker,
   NOT the card — pinned to the card it overlapped the eyebrow at the top-left
   (and clashed worse once mobile hero copy centered). */
.order-hero__media-wrap {
  position: relative;
  display: block;
  margin: 0 0 var(--spacing-md);
}
.order-hero__flag {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 2;
  background: var(--wp--preset--color--accent);
  color: #EFE2C7;
  font-family: 'Averia Libre', serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.mega-feature--order-hero .eyebrow {
  color: var(--wp--preset--color--primary); /* warm tan, full strength */
  opacity: 1;
}
.mega-feature--order-hero .order-hero__title {
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-white, #fefefe);
  margin: 0 0 var(--spacing-md);
}
.mega-feature--order-hero .order-hero__media {
  display: block;
  width: 100%;
  height: 200px;            /* explicit height so object-fit applies + stays within the scroll cap */
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0;                /* bottom spacing now lives on .order-hero__media-wrap */
}
.mega-feature--order-hero .order-hero__detail {
  font-family: "Averia Libre", Georgia, serif;
  font-style: italic;
  font-size: var(--wp--preset--font-size--medium); /* 16px floor */
  line-height: 1.45;
  color: var(--wp--preset--color--text-white, #fefefe); /* dark mega-menu ground */
  max-width: 36ch;
  margin: 0 0 var(--spacing-lg);
}
/* The whole tile is the link; replicate the .btn-box hover states on tile hover. */
.order-hero__link:hover .btn-box,
.order-hero__link:focus-visible .btn-box { transform: translateY(-1px); }
.order-hero__link:hover .btn-box--primary::before,
.order-hero__link:focus-visible .btn-box--primary::before { background-color: #E5C875; }
.order-hero__link:hover .btn-box__arrow,
.order-hero__link:focus-visible .btn-box__arrow { transform: translateX(4px); }

/* Mobile (<=850px): >=44px tap rows for the Order link lists only */
@media (max-width: 850px) {
  .mega-menu--order .mega-column li a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop (>=851px): re-template the Order grid to an asymmetric hero + stacked rail */
@media screen and (min-width: 851px) {
  .mega-menu--order .mega-menu-inner {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "hero local"
      "hero ship";
    align-items: start;
  }
  .mega-menu--order .mega-feature--order-hero { grid-area: hero; }
  .mega-menu--order .order-local { grid-area: local; }
  .mega-menu--order .order-ship  { grid-area: ship; }
  .mega-feature--order-hero { padding: var(--spacing-2xl); }
  .mega-feature--order-hero .order-hero__media { height: 220px; }
}

/* Reduced motion: freeze the new hover transitions */
@media (prefers-reduced-motion: reduce) {
  .mega-link__ext,
  .order-hero__link .btn-box,
  .order-hero__link .btn-box__arrow { transition: none; }
  .order-hero__link:hover .btn-box,
  .order-hero__link:focus-visible .btn-box,
  .order-hero__link:hover .btn-box__arrow,
  .order-hero__link:focus-visible .btn-box__arrow { transform: none; }
}


/* ==========================================================================
   Watch at Brats — Games landing (Events/Watch P5a)
   --------------------------------------------------------------------------
   The "is your game on?" lookup surface. The whole page is wrapped in a
   single `.ssb-events` container so this token block + the games styling
   below apply to the plugin-emitted markup ([ssb_upcoming_games],
   [ssb_league_filter], [ssb_network_icons]) as well as the theme shell.

   This stylesheet loads AFTER the ssb-watch plugin CSS (which only defines
   neutral defaults on `.ssb-watch`); equal specificity + later load order
   means these theme values win.

   Constraints honored: NO emoji / Font Awesome / unicode arrows (CTAs use
   the .btn-box ::before mask edge + the inline SVG arrow). 16px floor on
   hours / matchup / time; tracked 13–14px labels are floor-exempt. Active
   chip fill is --ssb-red-deep (#A02523 → white = AA). Heritage / Imperial
   Script OFF — headers are plain Bowlby One SC.
   ========================================================================== */

/* ── .ssb-events token-override block (verbatim from the build spec) ─────── */
/* `.airing-single` (the single-game page, P5e) is added to this selector so the
   palette + --ssb-event-* cascade apply to the matchup-lockup surface too.
   `.featured-event-panel` is added so the reusable "Featured Event Panel"
   template-part (mounted on 6 surfaces) resolves the same --ssb-* tokens
   regardless of the parent surface's own scope. */
.ssb-events,
.airing-single,
.featured-event-panel {
  --ssb-ink:#0F0F0F; --ssb-cream:#EFE2C7; --ssb-tan:#c2a488; --ssb-tan-deep:#A88857; --ssb-rule:rgba(194,164,136,0.35);
  --ssb-red:var(--wp--preset--color--accent,#d32f2f); --ssb-red-deep:#A02523;
  --ssb-scoreboard:var(--wp--preset--color--bg-darker, #1a1a1a);
  --ssb-event-accent:var(--ssb-red-deep); --ssb-event-ink:var(--ssb-ink, #0F0F0F);
  --ssb-event-muted:#5a5346; --ssb-event-surface:var(--wp--preset--color--text-white, #fefefe);
  --ssb-event-border:var(--ssb-rule); --ssb-event-radius:var(--radius-sm); --ssb-event-gap:var(--spacing-md);
  --ssb-event-ground:#F7F1E6;
}

/* Map the plugin's neutral `.ssb-watch` defaults onto the brand tokens so
   the reused [game_logos] / [ssb_network_icons] markup matches this surface. */
.ssb-events .ssb-watch {
  --ssb-watch-accent: var(--ssb-red-deep);
  --ssb-watch-ink: var(--ssb-event-ink);
  --ssb-watch-muted: var(--ssb-event-muted);
  --ssb-watch-surface: var(--ssb-event-surface);
  --ssb-watch-border: var(--ssb-event-border);
  --ssb-watch-radius: var(--ssb-event-radius);
}

/* ── Landing shell — warm cream ground (not gray), so the dark "Today" band
   reads as a lit scoreboard sitting on the bar's cream ledger. ───────────── */
.watch-landing {
  color: var(--ssb-event-ink);
  background: var(--ssb-event-ground, #F7F1E6);
}

/* Masthead — short, so the first game sits near the fold. No photo hero. */
.watch-landing__masthead {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 28px;
  text-align: center;
}
/* The masthead's single red beat — eyebrow + its inherited mask-divider
   ornaments (currentColor) turn red. One red accent in the masthead. */
.watch-landing__masthead .eyebrow {
  color: var(--ssb-red-deep);
  opacity: 1;
}
.watch-landing__title {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ssb-ink);
}
.watch-landing__intro {
  margin: 18px auto 0;
  max-width: 52ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}

/* ── Filter rail — sticky under the masthead, horizontal scroll on mobile.
   Same warm cream as the page so it doesn't read as a gray bar; the single
   red seam in this surface sits on its top edge (masthead → rail). ──────── */
.watch-landing__filter {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ssb-event-ground, #F7F1E6);
  padding: 12px 0;
  border-top: 2px solid var(--ssb-red-deep);
}
.league-filter__rail {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.league-filter__rail::-webkit-scrollbar { display: none; }

/* Reuse the .chip base; override min-height to a 44px touch target. Rest is
   an outlined tag (transparent fill on the cream ground, not a white card);
   active fill stays --ssb-red-deep (AA against white). */
.league-filter__chip.chip,
.event-filter__chip.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;                 /* tracked label — 16px floor exempt */
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--ssb-event-ink);
  border: 1px solid var(--ssb-rule);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* Category emoji prepended inside a filter chip (e.g. 🏈 NFL). Decorative —
   the chip text already names the league/type. */
.chip__emoji {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.league-filter__chip.chip:hover,
.league-filter__chip.chip:focus-visible,
.event-filter__chip.chip:hover,
.event-filter__chip.chip:focus-visible {
  border-color: var(--ssb-red-deep);
}
.league-filter__chip.chip.is-active,
.league-filter__chip.chip[aria-pressed="true"],
.event-filter__chip.chip.is-active,
.event-filter__chip.chip[aria-current="true"] {
  background: var(--ssb-red-deep);
  border-color: var(--ssb-red-deep);
  color: #fff;
}

/* ── Body layout: 1-col mobile → 2-col (list + sticky venue rail) ≥781px ─── */
.watch-landing__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 8px;
}
.watch-landing__games { min-width: 0; }

@media (min-width: 781px) {
  .watch-landing__body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-3xl);
    align-items: start;
  }
}

/* ── Day groups — generous air between, tight within ─────────────────────── */
.games-list { display: block; }
.games-group { margin: 0 0 var(--spacing-3xl); }
.games-group__heading {
  margin: 0 0 14px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
/* Non-today day headings get a tan section tick (red rule = today, tan
   tick = the rest). */
.games-group__heading:not(.games-group__heading--today) {
  border-left: 4px solid var(--ssb-tan);
  padding-left: 12px;
}

/* ── The "Today" scoreboard band — a dark, lit TV-wall band on the cream
   ledger. Red top edge ties it to the masthead seam; everything inside the
   band is inverted (light text on dark) so "today is different" is read
   instantly by contrast, not motion. ────────────────────────────────────── */
.games-group--today {
  background: var(--ssb-scoreboard);
/*  border-top: 3px solid var(--ssb-red-deep);*/
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-sm);
  margin-bottom: var(--spacing-3xl);
}
/* "Today" heading on dark — no red underline (the band's red top edge owns
   that beat); light text on a faint hairline. Bowlby uppercase kept. */
.games-group--today .games-group__heading--today {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(254, 254, 254, 0.12);
  color: var(--wp--preset--color--text-white, #fefefe);
}
.games-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Game row — full-row link, ≥44px, hover/focus inset bg ────────────────── */
.game-row { border-bottom: 1px solid var(--ssb-rule); }
.game-row__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 14px 12px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.game-row__link:hover,
.game-row__link:focus-visible {
  background: var(--surface-inset, #f0f0f0);
}
/* Inverted inside the dark Today band — the tan --ssb-rule disappears on
   dark, so use a faint light hairline; the near-white --surface-inset would
   flash, so the hover/focus bg is a subtle light wash instead. */
.games-group--today .game-row { border-bottom: 1px solid rgba(254, 254, 254, 0.10); }
.games-group--today .game-row__link:hover,
.games-group--today .game-row__link:focus-visible {
  background: rgba(254, 254, 254, 0.06);
}
.game-row__logos { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* "@" hinge between the two team logos in a list row — small tracked Bowlby,
   tan, recessive (same register as .now-lead__at; it whispers between the
   logos, never competes with them). away→home order, so "@" = away at home. */
.game-row__matchup-at {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ssb-tan, #c2a488);
  opacity: 0.55;
  flex: 0 0 auto;
}
/* Logos render from stored meta as bare <img>/placeholder cells (no shortcode
   wrapper) — see ssb_watch_game_row_logos(). */
.game-row__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;

   background-color: #fff;
border-radius: 50%;
padding: 0.2rem;

}
/* Today logos run a touch larger — the scoreboard band is the hero row. */
.games-group--today .game-row__logo { width: 40px; height: 40px; }
.game-row__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-inset, #f0f0f0);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-event-muted);
}
/* Placeholder chip on the dark band — faint light fill, light-gray initials. */
.games-group--today .game-row__logo--placeholder {
  background: rgba(254, 254, 254, 0.08);
  color: #ccc;
}
/* Category emoji — the FIRST cell in the logos group (before the away logo), so
   it shows even on a non-sport airing with no team logos. Sits between the team
   logos (36/40px) and the network logo (18px) in scale. */
.game-row__type {
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}
.games-group--today .game-row__type {
  font-size: 26px;
  text-shadow: 0 0 1px rgba(254, 254, 254, 0.35);
}
.game-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.game-row__matchup {
  font-family: "Averia Libre", serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 20px);   /* large; ≥16px floor */
  line-height: 1.2;
  color: var(--ssb-ink);
}
.game-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  min-width: 0;                          /* let children truncate in the grid */
  max-width: 40vw;                       /* never let the meta column eat the matchup */
}
.game-row__time {
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor */
  font-weight: 700;
  color: var(--ssb-ink);
  white-space: nowrap;                   /* time stays on its own line */
}
.game-row__time--tba { color: var(--ssb-event-muted); font-weight: 400; }

/* Network chip — name (+ optional logo). Muted when TBD. The name truncates
   with an ellipsis so a long network ("Bally Sports Wisconsin",
   "ESPN Deportes") can't overflow or squeeze the matchup at 320–375px. */
.game-row__network {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor */
  color: var(--ssb-event-muted);
}
.game-row__network-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.game-row__network-logo { height: 18px; width: auto; display: block; flex: 0 0 auto; }
.game-row__network--tbd { font-style: italic; opacity: 0.8; white-space: nowrap; }

/* Inverted text inside the dark Today band. Matchup + time go near-white
   (#fefefe on #1a1a1a ≈ 16:1), network name goes light gray (#ccc ≈ 10:1).
   Both comfortably exceed AA; 16px floor preserved (font sizes untouched). */
.games-group--today .game-row__matchup,
.games-group--today .game-row__time {
  color: var(--wp--preset--color--text-white, #fefefe);
}
.games-group--today .game-row__time--tba { color: var(--wp--preset--color--text-light, #cccccc); }
.games-group--today .game-row__network {
  color: var(--wp--preset--color--text-light, #cccccc);
  background:white;
}

/* Matchup line — star (when featured) + the title share one flex row so the
   star sits inline before the title and aligns identically for featured and
   standard rows (standard rows just omit the star). */
.game-row__matchup-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Featured star — a small hand-drawn star inline before the matchup. Inherits
   currentColor (the SVG path carries no fill), so the color tokens below paint
   it: deep red on cream, brighter red on the dark Today band. */
.game-row__star {
  width: 18px;
  height: auto;
  flex: 0 0 auto;
  color: var(--ssb-red-deep);
  fill: currentColor; /* path has no fill attr → defaults to black without this */
}
.games-group--today .game-row__star {
  width: 20px;
  color: var(--ssb-red);
}

/* "Rivalry" priority tag — a small outlined red lozenge that supersedes the
   Local pip (rivalry games never also show the Local dot). Outlined rather than
   filled so it de-ranks below the FILLED "On now" live lozenge: live > rivalry >
   local. The visible text carries the meaning, not the color. Tracked small
   label (13px) — 16px floor exempt. An art-director can refine this later. */
.game-row__tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ssb-red-deep);
  background: transparent;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ssb-red-deep);
  vertical-align: middle;
}
/* On the dark Today band the deep red dims — brighten to --ssb-red on both the
   outline and the text so the tag keeps contrast on near-black. */
.games-group--today .game-row__tag {
  border-color: var(--ssb-red);
  color: var(--ssb-red);
}

/* "On now" live indicator — a solid red lozenge (present-tense label + a
   pulsing white dot). White on --ssb-red-deep (#A02523) ≈ 6.1:1 → AA. The
   label text carries the meaning, not the color/dot alone. Reuses the
   status-tile pulse. */
.game-row__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--ssb-red-deep);
  font-family: "Averia Libre", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}
.game-row__live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  animation: status-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .game-row__live-dot,
  .utility-live__dot,
  .info-grid__live-dot,
  .now-lead__dot { animation: none; }
}

/* ── Game row — MOBILE restack (≤600px), phone-first. ──────────────────────
   The desktop 3-col grid (auto 1fr auto) jumbles on phones: the matchup gets
   ~45% width and wraps raggedly against centered logos + meta. On mobile the
   matchup title owns its OWN full-width line; one metadata line below splits
   into a left cluster (type emoji + 24px team logos) and a right lockup
   (On now + time + network logo), with deliberate empty space between. Desktop
   / wide layout is untouched. Art-director spec on record (2026-06-10). */
@media (max-width: 600px) {
  .game-row__link {
    position: relative;                /* containing block for the corner emoji */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "title title"
      "logos meta";
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px;
  }
  .game-row__body  { grid-area: title; }
  .game-row__logos { grid-area: logos; align-items: center; gap: 6px; }
  .game-row__meta  {
    grid-area: meta;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: none;             /* matchup is on its own row now — guard obsolete */
  }

  /* Team logos → 24px on both grounds (Today's 40px override neutralized);
     lighter padding so the art isn't a dot inside a white disc at 24px. */
  .game-row__logo,
  .games-group--today .game-row__logo { width: 24px; height: 24px; padding: 1px; }
  .game-row__logo--placeholder { font-size: 9px; }

  /* "@" recedes further between the smaller discs. */
  .game-row__matchup-at { font-size: 11px; }

  /* Type emoji → small marker pinned to the row's upper-right corner (both
     grounds). Pulled out of the logos cluster so line 2 is logos-only; reserve
     room on the title row below so the full-width title can't run under it. */
  .game-row__type,
  .games-group--today .game-row__type {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 16px;
    line-height: 1;
  }
  .games-group--today .game-row__type { text-shadow: none; }
  .game-row__body { padding-right: 26px; }

  /* Featured star tucks closer to the now full-width title (both grounds). */
  .game-row__matchup-line { gap: 6px; }
  .game-row__star,
  .games-group--today .game-row__star { width: 16px; }

  /* No-logo network text fallback can't push the time off-screen at 320px. */
  .game-row__network-name { max-width: 7rem; }
}

/* ── Empty / league-filtered-empty states (occupy the list area) ─────────── */
.games-empty,
.games-list__filtered-empty {
  padding: 48px 8px;
  text-align: center;
}
.games-empty__headline {
  margin: 0 0 12px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.games-empty__body {
  margin: 0 auto;
  max-width: 48ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}

/* ==========================================================================
   "What's on right now" — live-airings surfaces (Events/Watch P5d)

   Five surfaces share the games/now data: a utility-bar live pip, a mega-menu
   feature tile (reuses .status-tile — styled elsewhere), a front-page info-grid
   card, and the robust now+later page panel with its dark .now-lead lockup.
   Renderers live in ssb-watch/inc/shortcode-now-summary.php and emit class
   hooks; brand presentation is HERE. The panel wraps itself in .ssb-events so
   the token block above resolves the --ssb-* palette.
   ========================================================================== */

/* ── 1A. Utility-bar live pip ───────────────────────────────────────────────
   Sits first in .site-utility-bar__links. A small red dot + present-tense
   label. The label text carries the meaning (dot is decorative). It self-hides
   server-side when nothing is live (the renderer returns ''). */
.utility-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 30ch;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.utility-live:hover,
.utility-live:focus-visible { text-decoration: underline; }
.utility-live__dot {
  /* Decorative (aria-hidden) — stays red to carry the "live" beat. The label
     text no longer rides on red (see below); the red dot + "On now" copy does. */
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent, #d32f2f);
  flex: 0 0 auto;
  animation: status-pulse 1.6s ease-in-out infinite;
}
.utility-live__label {
  /* Tan to match the sibling utility-bar links (~8:1 on the ink bar). Red text
     at 11px on #0F0F0F was ~4.0:1 — fails AA for small text. The red dot carries
     liveness; the label only needs to be readable. */
  color: var(--ssb-tan, #c2a488);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 2. Front-page info-grid airing card ────────────────────────────────────
   The first card in "Today on State Street". Inherits the .info-grid__card
   base; the --airing modifier adds the live-dot label prefix + a "more" link.
   The live state reads from the pulsing red dot + the "On now ·" text prefix
   (no left-edge rule — the prior red border was removed per design, the dot +
   text carry the live cue and satisfy WCAG 1.4.1 without color-only meaning). */
.info-grid__card--airing .info-grid__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.info-grid__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ssb-red-deep);
  flex: 0 0 auto;
  transform: translateY(-1px);
  animation: status-pulse 1.6s ease-in-out infinite;
}
.info-grid__more {
  /* Touch target ≥44px: the visible 14px text stays put, but the hit area is
     expanded via inline-flex + min-height so it clears the WCAG 2.5.5 / mobile
     tap-target floor on the mobile-visible front-page grid. The negative top
     margin keeps the visual rhythm (the expanded box doesn't push the card
     taller than before). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -10px;
  margin-bottom: -10px;
  font-family: "Averia Libre", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
/*  color: var(--ssb-red-deep);*/
  text-decoration: none;
  align-self: flex-start;
}
.info-grid__more:hover,
.info-grid__more:focus-visible { text-decoration: underline; }
/* Single-column mobile (≤480px): the card centers its content, so the "more"
   link must center too. Placed AFTER the base align-self:flex-start above so it
   wins on source order (media queries add no specificity). */
@media (max-width: 480px) {
  .info-grid__more { align-self: center; }
}

/* ── 3. The now+later page panel ────────────────────────────────────────────
   Wraps the .now-lead lockup + the day-grouped games list + freshness line.
   The panel itself is a quiet container; the band is the focal beat. */
.now-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-3xl) var(--spacing-md);
}
.now-panel__head { text-align: center; margin-bottom: var(--spacing-xl); }
.now-panel__title {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.now-panel__subhead {
  margin: 14px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ssb-ink);
}
.now-panel__subhead-soft { color: var(--ssb-event-muted); }

/* True-empty state (no lead hero) — the games-empty body + a CTA pair. */
.now-panel__empty { padding-top: 8px; }
.now-panel__empty-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: var(--spacing-md);
}

/* ── 3a. .now-lead — the dark, lit scoreboard lockup ────────────────────────
   Modeled on .games-group--today (dark ground + red top edge) so it reads as
   kin, but the ground is a "lit pool" radial (top-center ~9% lighter) and the
   matchup type is the focal beat. The seam below casts a soft shadow onto the
   cream list. */
.now-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl);
  border-top: 3px solid var(--ssb-red-deep);
  border-bottom: 1px solid var(--ssb-rule);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 8px 16px -10px rgba(15, 15, 15, 0.45);
}
/* Live ground = lit pool (top-center brighter) + an inner red bloom on the top
   edge so live reads as "warm + lit". */
.now-lead--live {
  background: radial-gradient(120% 140% at 50% 0%, #232323 0%, #1a1a1a 55%, #141414 100%);
  box-shadow:
    inset 0 3px 0 0 var(--ssb-red-deep),
    inset 0 14px 22px -16px rgba(160, 37, 35, 0.55),
    0 8px 16px -10px rgba(15, 15, 15, 0.45);
}
/* Upcoming ground = flat, composed, dormant — no vignette, no bloom. */
.now-lead--next {
  background: #1a1a1a;
}

/* Lozenge (live) reuses .game-row__live exactly; we only position it here. */
.now-lead__status { align-self: center; }

/* Quiet tracked Bowlby eyebrow for the upcoming/tomorrow state (replaces the
   live lozenge). Tan, small, tracked. */
.now-lead__eyebrow {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ssb-tan);
}

/* Logos on the bare dark ground (NOT chips). */
.now-lead__logos {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.now-lead__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;

   background-color: #fff;
border-radius: 50%;
padding: 0.2rem;

}
/* Degraded: an enlarged initials chip when a logo is missing (reuses the
   game-row placeholder recipe, sized up, on the dark ground). */
.now-lead__logo--placeholder {
  width: 56px;
  height: 56px;
  font-size: 18px;
  background: rgba(254, 254, 254, 0.08);
  color: #ccc;
}
/* The "AT" hinge between logos — small tracked tan. */
.now-lead__at {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ssb-tan);
  opacity: 0.6;
}

/* The matchup — THE focal beat. Bowlby, big, warm-white. */
.now-lead__matchup {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fefefe;
  text-shadow: 0 1px 0 rgba(254, 254, 254, 0.06);
}
/* The "vs" hinge — small tan, ~60% opacity, NOT a literal "@". */
.now-lead__vs {
  display: inline-block;
  font-size: 0.36em;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ssb-tan);
  opacity: 0.6;
  vertical-align: middle;
}

/* Count-mode lead — a Bowlby count statement, no logos/vs. */
.now-lead__count {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fefefe;
}

/* Meta line — time · network. Light gray on dark. Clock weighted up on the
   upcoming state (time leads the line). */
.now-lead__meta {
  margin: 0;
  font-family: "Averia Libre", serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-light, #cccccc);
}
.now-lead--next .now-lead__meta { font-weight: 700; }

/* CTA = the brand primary (cream fill, ink text). Square corners (brand
   default). The .btn-box--primary recipe owns the fill; we only add a touch of
   top space so it sits clear of the meta line. */
.now-lead__cta { margin-top: 4px; }

@media (max-width: 600px) {
  .now-lead__logo { width: 44px; height: 44px; }
  .now-lead__logo--placeholder { width: 40px; height: 40px; font-size: 15px; }
  .now-lead__logos { gap: 12px; }
}

/* ==========================================================================
   Event series lead — recurring-event single page lockup + schedule ribbon

   Modeled on .now-lead recipes (dark lit-scoreboard ground for live + tonight
   states, ink-on-light for the future state). The block carries its own
   typography rules per the design-consultant spec; tokens come from the brand
   palette resolved on the page (no plugin token block here — this is theme).

   Used by template-parts/event-series-lead.php (rendered from single-event.php
   when SSB_Event_Series::is_series() is true).
   ========================================================================== */

.event-header--series {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.event-header--series .event-header__title.event-series-lead__title {
  margin: 0;
  /* Title is the dominant beat — the moment line below carries ONLY the state
     (no longer restates the title), so the H1 owns the visual hierarchy. */
  font-size: var(--wp--preset--font-size--huge, clamp(32px, 5vw, 52px));
}

.event-header--series-ended .event-series-ended-chip {
  display: inline-block;
  margin: 0 0 var(--spacing-sm);
  padding: 6px 14px;
  background: var(--ssb-tan, #c2a488);
  color: var(--ssb-ink, #0F0F0F);
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 4px);
}

/* ── Lead block — ground varies by state ──────────────────────────────── */
.event-series-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--radius-sm, 4px);
}

/* States A + B share the dark lit-scoreboard ground (--bg-darker preset
   resolves to the deep ink). State A adds the red top-edge + warm bloom that
   reads as "warm + lit". State B is dormant — flat dark. */
.event-series-lead--live {
  background: radial-gradient(120% 140% at 50% 0%, #232323 0%, #1a1a1a 55%, #141414 100%);
  color: var(--ssb-cream, #EFE2C7);
  box-shadow:
    inset 0 3px 0 0 var(--ssb-red-deep, #A02523),
    inset 0 14px 22px -16px rgba(160, 37, 35, 0.55),
    0 8px 16px -10px rgba(15, 15, 15, 0.45);
}
.event-series-lead--next {
  background: var(--wp--preset--color--bg-darker, #1a1a1a);
  color: var(--ssb-cream, #EFE2C7);
  box-shadow: 0 8px 16px -10px rgba(15, 15, 15, 0.45);
}
.event-series-lead--future {
  background: transparent;
  color: var(--ssb-ink, #0F0F0F);
  padding-left: 0;
  padding-right: 0;
}

/* ── Lozenge (live) — red, pill, with pulsing dot reusing now-lead recipe. */
.event-series-lead__lozenge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  background: var(--ssb-red-deep, #A02523);
  color: #fff;
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
}
.event-series-lead__dot {
  /* Inherits the .now-lead__dot keyframes (status-pulse) via the cascade —
     the dot class is also applied on the markup. We set base box here. */
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  animation: status-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .event-series-lead__dot { animation: none; }
}

/* ── Eyebrow (B / C / D) — Bowlby tracked, tan on dark / red on light ─── */
.event-series-lead__eyebrow {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--tiny, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.event-series-lead--next .event-series-lead__eyebrow {
  color: var(--ssb-tan, #c2a488);
}
.event-series-lead--future .event-series-lead__eyebrow {
  color: var(--ssb-red-deep, #A02523);
}

/* ── Moment line — the state beat (subordinate to the H1 title above).
   Averia italic for the "voice" beat; sized below the title now that it
   carries only the state, not a restatement of the title. ──── */
.event-series-lead__moment {
  margin: 0;
  font-family: "Averia Libre", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--wp--preset--font-size--x-large, clamp(28px, 4vw, 40px));
  line-height: 1.1;
}
.event-series-lead--live .event-series-lead__moment,
.event-series-lead--next .event-series-lead__moment {
  color: #fefefe;
}

/* ── Meta line — tan on dark band, ink-soft on light. ─────────────────── */
.event-series-lead__meta {
  margin: 0;
  font-family: "Averia Libre", Georgia, serif;
  font-size: 17px;
  line-height: 1.4;
}
.event-series-lead--live .event-series-lead__meta,
.event-series-lead--next .event-series-lead__meta {
  color: var(--ssb-tan, #c2a488);
}
.event-series-lead--future .event-series-lead__meta {
  color: var(--ssb-ink-soft, #1A1A1A);
}
.event-series-lead__meta time { color: inherit; }

/* ── CTA row — reuses .btn-box. Text-link sits inline next to primary. ── */
.event-series-lead__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}
.event-series-lead__ics {
  display: inline-block;
  font-family: "Averia Libre", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  padding: 11px 2px;
  line-height: 1.3;
}
.event-series-lead--live .event-series-lead__ics,
.event-series-lead--next .event-series-lead__ics {
  color: var(--ssb-cream, #EFE2C7);
}
.event-series-lead--future .event-series-lead__ics {
  color: var(--ssb-red-deep, #A02523);
}
.event-series-lead__ics:hover,
.event-series-lead__ics:focus-visible {
  text-decoration-thickness: 2.5px;
}

/* Mobile breakpoint — keep proportions for narrow screens. */
@media (max-width: 600px) {
  .event-series-lead {
    padding: var(--spacing-lg, 24px) var(--spacing-md, 16px);
    gap: 10px;
  }
  .event-series-lead__moment {
    font-size: clamp(28px, 8vw, 38px);
  }
}

/* ==========================================================================
   Event series schedule ribbon — day pills + effective window

   Sits below the lead, above the_content(). Hairline divider above + below;
   active days inked, inactive at 20% opacity, today's day pill gets a red
   accent.
   ========================================================================== */

.event-series-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  border-top: 1px solid var(--ssb-rule, rgba(15, 15, 15, 0.12));
  border-bottom: 1px solid var(--ssb-rule, rgba(15, 15, 15, 0.12));
}

.event-series-schedule__days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-series-schedule__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.06);
  color: var(--ssb-ink, #0F0F0F);
  font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.2; /* inactive default */
}
.event-series-schedule__day--active {
  opacity: 1;
  background: var(--ssb-ink, #0F0F0F);
  color: var(--ssb-cream, #EFE2C7);
}
.event-series-schedule__day--today {
  outline: 2px solid var(--ssb-red-deep, #A02523);
  outline-offset: 2px;
}

.event-series-schedule__window {
  margin: 0;
  font-family: "Averia Libre", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ssb-ink-soft, #1A1A1A);
  text-align: right;
}

@media (max-width: 600px) {
  .event-series-schedule {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .event-series-schedule__window {
    text-align: left;
  }
}

/* ── Event editorial lead + "On / When" facts — content-light series fallback.
   The lead line stands in for an empty the_content() on series like Love
   Island; the facts dl reuses the airing page's .airing-watch__facts label/
   value treatment so the two surfaces read as siblings. ──────────────────── */
.event-lead {
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
  max-width: 52ch;
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

/* "More to watch" feed — sits at the foot of the main column. */
.event-more {
  margin-top: var(--spacing-2xl);
}

/* ── Venue / hours panel — tan ground, ink text, sticky rail on desktop.
   A tan top rule + hairline border lifts it off the warm cream page ground
   (the cream panel would otherwise dissolve into the cream page). The
   --ssb-tan-deep token used by .venue-panel__label is declared in the
   .ssb-events block above so the label color resolves reliably. ────────── */
.venue-panel {
  background: var(--ssb-cream);
  color: var(--ssb-ink);
  padding: 28px 24px 30px;
  border: 1px solid var(--ssb-rule);
/*  border-top: 2px solid var(--ssb-tan);*/
  border-radius: var(--radius-sm);
  margin: 0 0 var(--spacing-3xl);
}
@media (min-width: 781px) {
  .venue-panel { position: sticky; top: calc(var(--nav-height, 70px) + 2rem); margin-bottom: 0; }
}
.venue-panel__heading {
  margin: 0 0 18px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}
.venue-panel__facts { margin: 0 0 22px; }
.venue-panel__label {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;                       /* tracked label — floor exempt */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ssb-tan-deep, #A88857);
  margin-top: 14px;
}
.venue-panel__label:first-child { margin-top: 0; }
.venue-panel__value {
  margin: 2px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor (hours/address) */
  line-height: 1.4;
}
.venue-panel__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Network wall band ────────────────────────────────────────────────────── */
.watch-landing__networks {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 48px;
}
.watch-landing__networks-intro {
  margin: 0 auto 24px;
  max-width: 52ch;
  text-align: center;
  font-family: "Averia Libre", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}
/* Network logos — grayscale + dimmed at rest (a quiet wall), full color on
   hover/focus. Tiles are outlined tags on the cream ground, not white cards. */
.watch-landing__networks .ssb-network-wall li,
.watch-landing__networks .ssb-network-wall__item {
  background: transparent;
  border: 1px solid var(--ssb-rule);
}
.watch-landing__networks .ssb-network-wall img {
  filter: grayscale(1) opacity(0.55);
  transition: filter 200ms ease;
}
.watch-landing__networks .ssb-network-wall li:hover img,
.watch-landing__networks .ssb-network-wall li:focus-within img,
.watch-landing__networks .ssb-network-wall__item:hover img,
.watch-landing__networks .ssb-network-wall__item:focus-within img {
  filter: grayscale(0) opacity(1);
}

/* Crawlable network text list — the SEO/a11y complement under the logo wall.
   Intentionally lightweight: a centered lead line + a quiet inline comma list of
   every network name (covers networks with no logo). 16px floor preserved. */
.ssb-network-list {
  max-width: 60ch;
  margin: 24px auto 0;
  text-align: center;
}
.ssb-network-list__lead {
  margin: 0 0 8px;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}
.ssb-network-list__items {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ssb-event-muted);
}
/* Render the list inline as a comma-separated run (tidy, crawlable, no bullets).
   Commas are decorative — the <li> structure carries the real semantics. */
.ssb-network-list__item {
  display: inline;
}
.ssb-network-list__item:not(:last-child)::after {
  content: ", ";
}

/* ── Freshness line — quiet, foot of page. Stale = tan caution tint, NOT red. */
.games-freshness {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 48px;
  text-align: center;
  font-family: "Averia Libre", serif;
  font-size: 14px;                       /* tracked-ish; floor exempt */
  color: var(--ssb-event-muted);
}
.games-freshness--stale {
  color: var(--ssb-ink);
  background: rgba(194, 164, 136, 0.22);  /* tan caution tint — never red */
  border-radius: var(--radius-sm);
}

/* ── Motion: restrained. Honor reduced-motion (rows at final state). No
   scroll-reveal on later groups — contrast does the "today is different"
   work; reveals would only delay the answer. ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .league-filter__chip.chip,
  .game-row__link,
  .game-row__network-logo,
  .watch-landing__networks .ssb-network-wall img {
    transition: none;
  }
}

/* ==========================================================================
   Events landing (P5b)
   --------------------------------------------------------------------------
   The warm, editorial "what's on at Brats" browse surface — the sibling of the
   Watch-at-Brats games landing. Same `.ssb-events` token block + day-grouping +
   chip rail (the chip styling is SHARED, not forked: `.event-filter__chip` is
   added to the `.league-filter__chip.chip` selector group above). The cards are
   the shared front-page `.card` pattern with a `.card--event` modifier (vertical
   media → body → footer); the base `.card` rules live in the Card block above,
   and `.card--event` adds only the surface meta lines + the 16px floor.

   Constraints honored: 16px floor on when / where / desc / come-by / heritage
   (scoped to .card--event so the front-page card is untouched; the 11px
   .card__eyebrow + the 17px .card__title are floor-exempt / above-floor). NO
   emoji / Font Awesome / unicode — a no-photo card COLLAPSES (media omitted,
   .card--no-media) rather than showing a glyph; the cross-sell CTA uses the
   .btn-box mask arrow. Ticket button AA fix lives in `.ssb-events
   .btn-pill--accent` below (theme `primary` token is tan #c2a488 → fails on
   white; force the deep red #A02523 = 6.1:1). Heritage = tan ribbon on the
   eyebrow + "Since 1953" line (Averia, plain — NO Imperial Script). GAME cards
   (calendar panel) take a `.card--game` matchup-logo lockup (.card__media
   --matchup); ssb-watch inactive → they degrade to photo-or-collapse.
   ========================================================================== */

/* ── Landing shell — same warm cream ground as the games landing. ─────────── */
.events-landing {
  color: var(--ssb-event-ink);
  background: var(--ssb-event-ground, #F7F1E6);
}

/* Masthead — short, warm, no photo hero. */
.events-landing__masthead {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 28px;
  text-align: center;
}
.events-landing__masthead .eyebrow {
  color: var(--ssb-red-deep);
  opacity: 1;
}
.events-landing__title {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ssb-ink);
}
.events-landing__intro {
  margin: 18px auto 0;
  max-width: 52ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}

/* ── Filter rail — sticky under the masthead. Reuses .league-filter__rail for
   the scroll/layout; the chip styling is shared (see the selector group). ── */
.events-landing__filter {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ssb-event-ground, #F7F1E6);
  padding: 12px 0;
  border-top: 2px solid var(--ssb-red-deep);
}

/* ── Body layout: 1-col mobile → 2-col (list + sticky cross-sell) >=781px ─── */
.events-landing__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 8px;
}
.events-landing__events { min-width: 0; }

@media (min-width: 781px) {
  .events-landing__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-3xl);
    align-items: start;
  }
}

/* ── Day groups — generous air between, tight within (mirrors games). ─────── */
.events-list { display: block; }
.events-group { margin: 0 0 var(--spacing-3xl); }
.events-group__heading {
  margin: 0 0 18px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
/* Today heading gets the red rule; later days get the quieter tan tick. */
.events-group__heading--today {
  border-left: 4px solid var(--ssb-red-deep);
  padding-left: 12px;
}
.events-group__heading:not(.events-group__heading--today) {
  border-left: 4px solid var(--ssb-tan);
  padding-left: 12px;
}
.events-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

/* ── Event card — the shared front-page `.card` pattern (vertical: media → body
   → footer CTA) with a `.card--event` modifier. The base `.card` rules (shadow,
   1/1 media, stretched `.card__link::after`, `.card .btn-pill{z-index}`, etc.)
   live in the front-page Card block above; here we add ONLY the surface-specific
   meta lines + the 16px floor (scoped to `.card--event` so the front-page card
   is untouched). The no-photo card collapses via the base `.card--no-media`
   rule (media omitted in PHP). ─────────────────────────────────────────────── */

/* The shared base `.card` is sized for a standalone 430px component with its own
   margin-bottom; in the events grid / calendar panel the card fills its cell and
   the grid `gap` owns the rhythm. Scoped to .card--event so the front-page card
   is untouched. */
.card--event {
  max-width: none;
  margin-bottom: 0;
}

/* Eyebrow carries the event_type category name (meaningful — it's the filter's
   visible mapping). The base `.card__eyebrow` tan (#c2a488) on the white card
   ground is ~2:1 and fails AA for the 11px label, so darken to event-ink
   (~12:1). Scoped to .card--event ONLY so the front-page card is untouched;
   extends the existing `.card--heritage .card__eyebrow` ink rule to all events. */
.card--event .card__eyebrow {
  color: var(--ssb-event-ink);
}

/* Surface meta lines — when / where / desc / come-by / heritage. 16px floor,
   Averia Libre, scoped to .card--event ONLY (front-page card unaffected). */
.card--event .card__meta-when {
  margin: 4px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ssb-ink);
}
.card--event .card__meta-when time { font-weight: 700; }
.card--event .card__meta-where {
  margin: 6px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ssb-event-muted);
}
.card--event .card__meta-where-addr { color: var(--ssb-event-muted); }
.card--event .card__desc {
  margin: 6px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
  /* ~3-line visual clamp (the PHP also trims to ~120 chars as a backstop). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--event .card__heritage {
  margin: 10px 0 0;
  font-family: "Averia Libre", serif;
  font-style: italic;
  font-size: 16px;               /* 16px floor */
  line-height: 1.4;
  color: var(--ssb-tan-deep, #A88857);
}

/* Footer variant — the CTA slot. Equal-height footers come from the base
   `.card__footer` (border-top + margin-top:auto); this just sets its padding. */
.card__footer--cta {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}
.card__footer--cta .btn-pill,
.card__footer--cta .card__cta {
  display: inline-flex;
  align-items: center;
}
/* Come-by — a quiet status line (NOT a link/button): a 12px tan dot + copy. */
.card--event .card__come-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Averia Libre", serif;
  font-weight: 400;
  font-size: 16px;               /* 16px floor */
  line-height: 1.3;
  color: var(--ssb-ink);
}
.card__come-by-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ssb-tan-deep, #A88857);
  flex: 0 0 auto;
}

/* ── Game card matchup lockup (.card--game) — calm, cream (NOT scoreboard). The
   media frame overrides the base 1/1 square; the team logos reuse the watch
   `.game-row__logo` base (object-fit/render); the "@" is the QUIET cousin of the
   airing hero's giant @ — tan-deep, no text-shadow, must not shout. ───────── */
.card__media--matchup {
  aspect-ratio: auto;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ssb-cream);
  border-bottom: 1px solid var(--ssb-rule);
}
.card__matchup {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
}
.card__media--matchup .game-row__logo,
.card__media--matchup .game-row__logo--placeholder {
  width: 44px;
  height: 44px;
}
.card__matchup-at {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--ssb-tan-deep, #A88857);
}

/* ── Ticket button AA fix. `theme_render_event_ticket_cta()` has TWO paths and
   BOTH need the deep-red treatment on this surface:
     1. EXTERNAL ticket link → `.btn-pill--accent`. The theme `primary` palette
        token is a tan (#c2a488), so the base rule would render tan-on-white
        (fails AA AND isn't the brand red).
     2. ON-SITE bottom-sheet trigger → `bottom_sheet_form_button()` emits a
        Gutenberg `.sheet-form-trigger` with `has-secondary-background-color`
        (#d32f2f) — exactly the borderline white-on-#d32f2f the spec flags.
   On THIS surface force the deep red #A02523 (white text = 6.1:1 → AA). Equal
   specificity (descendant of `.ssb-events`) + later load beats the base rules
   and the Gutenberg `has-*-background-color` utility. ─────────────────────── */
.ssb-events .btn-pill--accent {
  background: var(--ssb-red-deep);
  color: #fff;
}
.ssb-events .btn-pill--accent:hover,
.ssb-events .btn-pill--accent:focus-visible {
  background: #8c1f1d;           /* a touch darker on hover; still AA */
  color: #fff;
}
/* The bottom-sheet trigger carries the Gutenberg `has-secondary-background-color`
   utility, which WP emits as `background-color: … !important`; override with
   !important so the deep-red AA fill actually wins. The dark text the Gutenberg
   `has-bg-dark-color` would set is also overridden to white (white-on-#A02523 =
   6.1:1; dark-on-#A02523 would fail). */
.ssb-events .card__footer--cta .sheet-form-trigger {
  background-color: var(--ssb-red-deep) !important;
  color: #fff !important;
}
.ssb-events .card__footer--cta .sheet-form-trigger:hover,
.ssb-events .card__footer--cta .sheet-form-trigger:focus-visible {
  background-color: #8c1f1d !important;
  color: #fff !important;
}

/* ── Heritage (graduation only) — a tan ribbon on the eyebrow. Tonal, plain (NO
   Imperial Script — grad headers aren't in the styled-header map). ────────── */
.card--heritage .card__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: rgba(194, 164, 136, 0.28);   /* tan ribbon */
  color: var(--ssb-ink);
}

/* ── Empty / filtered-empty states (occupy the list area). ────────────────── */
.events-empty,
.events-list__filtered-empty {
  padding: 48px 8px;
  text-align: center;
}
.events-empty__headline {
  margin: 0 0 12px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.events-empty__body {
  margin: 0 auto;
  max-width: 48ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}

/* ── Private-events cross-sell — standard .card--bleed (accent extracted from
   the card image by card-accent.js). Sticky right rail on desktop. SECONDARY —
   one quiet card, never a list/masthead primary. The card itself is the link;
   the CTA is a quiet text line (NOT a button), in the light bleed text color so
   it reads on the dark extracted accent. */
.events-landing__crosssell { margin: 0 0 var(--spacing-3xl); }
@media (min-width: 781px) {
  .events-landing__crosssell { position: sticky; top: calc(var(--nav-height, 70px) + 2rem); margin-bottom: 0; }
}
.card--bleed .card__cta {
  display: inline-block;
  margin-top: var(--spacing-md);
  font-family: "Averia Libre", serif;
  font-weight: 700;
  color: var(--card-accent-text);
}

/* ── Motion: restrained. Reduced-motion = cards at final state, no transitions.
   Today group instant; later groups get no scroll-reveal (the spec leaves
   later-group fade-in optional and we keep the surface motion-free for now). */
@media (prefers-reduced-motion: reduce) {
  .card--event,
  .event-filter__chip.chip,
  .card--event .card__link {
    transition: none;
  }
}

/* ==========================================================================
   Single airing (game) page — P5e
   --------------------------------------------------------------------------
   The matchup-lockup page a synced game gets (template-parts/airing-single.php),
   branched from single-event.php. Same dark-scoreboard / red-accent vocabulary
   as the Watch-at-Brats landing; keyed to the .ssb-events token block above
   (the .airing-single wrapper carries .ssb-events so --ssb-* resolve).

   Layout: single column, max 820px, centered. The hero is a self-contained DARK
   "scoreboard" band (--ssb-scoreboard ground, red top rule) echoing the
   games-landing .games-group--today band — a monumental cream "@" is the apex,
   the matchup <h1> demotes to a supporting Averia line beneath the lockup.
   Everything below the hero (watch / network / stadium / tail) stays on the
   LIGHT page unchanged; the dark/light contrast does the work (no entrance
   motion). The tan "watch it live here" block is the 2nd-strongest beat. 781px
   breakpoint scales the logos + the "@" glyph up. Marquee tier escalates the @
   (140px) + red rule; rivalry surfaces a labeled red tag. Past games swap the
   top rule to tan (reminiscence, not "dead"), tint the @ tan, and lift the
   logos to 0.8 opacity.

   Constraints honored: NO emoji / Font Awesome / unicode arrows (CTAs use the
   .btn-box ::before mask + an inline SVG arrow path). 16px floor on date / time
   / hours / address / network / stadium; tracked 13–14px labels + breadcrumb +
   freshness exempt. Stadium block is verbally + visually subordinated ("Played
   at …") so it never reads as a Brats address. Heritage / Imperial Script OFF —
   headers are plain Bowlby One SC.
   ========================================================================== */

.airing-single {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 24px 8px;
  color: var(--ssb-event-ink);
}

/* ── Breadcrumb — quiet, above the hero (tiny font, floor-exempt) ─────────── */
.airing-single__breadcrumb {
  margin: 0 0 20px;
}
.airing-single__breadcrumb .breadcrumb__list {
  justify-content: flex-start;
}
.airing-single__breadcrumb .breadcrumb__link {
  color: var(--ssb-ink);
}
.airing-single__breadcrumb .breadcrumb__link:hover,
.airing-single__breadcrumb .breadcrumb__link:focus-visible {
  color: var(--ssb-red-deep);
}
.airing-single__breadcrumb .breadcrumb__current {
  color: var(--ssb-event-muted);
}

/* ── Hero — the matchup lockup on a DARK scoreboard band ────────────────────
   Self-contained dark band (ground + red top rule + rounded card) that lifts
   the cream "@" off the light page. Cream/white/tan on #1a1a1a all clear AA
   (cream ~13:1, white ~16:1, tan ~8:1). */
.airing-hero {
  background: var(--ssb-scoreboard);
  border-top: 3px solid var(--ssb-red-deep);
  border-radius: var(--radius-md);
  padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl);
  text-align: center;
  margin: 0 0 var(--spacing-2xl);
}
/* PROTOTYPE — blurred team-photo backdrop behind the hero content. A local team
   maps to a photo (hardcoded for now); it sits behind the scoreboard content as
   a blurred, dark-scrimmed layer so the existing white text stays AA-legible.
   `.airing-hero` becomes the clip + stacking context; the photo scales up so the
   blur's soft edges don't reveal the band beneath. */
.airing-hero--has-bg {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.airing-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.08);
  transform: scale(1.06);            /* small overscan so the light blur's edges don't reveal the band */
}
.airing-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Scrim for white-text contrast: a touch darker top→bottom so the lower
     matchup/date text holds AA over a bright action photo. */
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.58) 0%, rgba(15, 15, 15, 0.74) 100%);
}
/* Lift every hero child above the backdrop (no offsets — purely a z-layer). */
.airing-hero--has-bg > :not(.airing-hero__bg) {
  position: relative;
  z-index: 1;
}
.airing-hero__eyebrow {
  color: var(--ssb-tan);                 /* ornaments inherit currentColor → tan */
  opacity: 1;
  margin-bottom: 10px;
}

/* "ON NOW" lozenge — solid deep-red, white text (≈6.1:1 AA), pulsing dot. The
   label text carries the meaning; the dot is decorative. Bumped presence on the
   dark band: more padding + tracking + a soft red focus ring. */
.airing-hero__lozenge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 14px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--ssb-red-deep);
  box-shadow: 0 0 0 1px rgba(211, 47, 47, 0.4);
  font-family: "Averia Libre", serif;
  font-size: 14px;                       /* tracked label — floor exempt */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}
.airing-hero__lozenge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  animation: status-pulse 1.6s ease-in-out infinite;
}

/* The away ◄ @ ► home lockup. Logos ~56px mobile → ~96px desktop; the monumental
   cream Bowlby "@" sits between them as the apex. */
.airing-hero__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 44px);
  margin: var(--spacing-md) auto var(--spacing-lg);
}
.airing-hero__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* Decorative team-color bar under each logo (contrast-safe color stored at
   sync; inline `background-color` overrides this tan fallback). */
.airing-hero__team-bar {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  margin: 2px auto 0;
  background: var(--ssb-tan);
}
/* Team record (e.g. "40–25") — Bowlby, tracked, light on the dark band. */
.airing-hero__record {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--wp--preset--color--text-light, #cccccc);
}
.airing-hero__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
  background-color: #fff;
  border-radius: 50%;
  padding: 3px;
}
.airing-hero__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(254, 254, 254, 0.08);   /* don't flash near-white --surface-inset on the dark band */
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  color: #cccccc;
}
/* THE MOMENT — monumental cream "@", apex of the band. */
.airing-hero__at {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(64px, 16vw, 124px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ssb-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  flex: 0 0 auto;
}

/* Matchup <h1> — DEMOTED to a supporting line under the lockup (kept as <h1> for
   SEO/a11y, restyled small + Averia + tan; the cream "@" is the visual lead). */
.airing-hero__title {
  margin: 0 0 var(--spacing-sm);
  font-family: "Averia Libre", serif;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ssb-tan);
}

/* Meta row — league chip + optional rivalry tag. */
.airing-hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}
/* League chip — non-interactive tag (no link), outlined for the dark band. */
.airing-hero__league.chip {
  background: transparent;
  color: var(--ssb-tan);
  border: 1px solid rgba(254, 254, 254, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Rivalry tag — solid deep-red, white text (AA), Bowlby. The word "Rivalry"
   carries the meaning; the color is reinforcement, not the signal. */
.airing-hero__rivalry.chip {
  background: var(--ssb-red-deep);
  color: #fff;
  border: 0;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 14px;                       /* tracked label — floor exempt */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Date + time — prominent, ≥16px floor, on the dark band. */
.airing-hero__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.airing-hero__date {
  font-family: "Averia Libre", serif;
  font-size: clamp(18px, 2.6vw, 22px);   /* ≥16px floor */
  font-weight: 700;
  color: var(--wp--preset--color--text-white, #fefefe);
}
.airing-hero__time {
  font-family: "Averia Libre", serif;
  font-size: 18px;                       /* ≥16px floor */
  color: var(--wp--preset--color--text-light, #cccccc);
}
.airing-hero__time--tba {
  font-style: italic;
  color: var(--wp--preset--color--text-light, #cccccc);
}

/* Past line — cream on the dark band (reminiscence, not "dead"); short date. */
.airing-hero__past {
  margin: 0;
  font-family: "Averia Libre", serif;
  font-size: clamp(18px, 2.6vw, 22px);   /* ≥16px floor */
  font-weight: 700;
  color: var(--ssb-cream);
}

/* ── Watch-here conversion block — tan ground, butcher texture (2nd beat) ─── */
.airing-watch {
  position: relative;
  background: var(--ssb-cream);
  color: var(--ssb-ink);
  border: 1px solid var(--ssb-rule);
  border-radius: var(--radius-md);
  padding: 28px 24px 30px;
  margin: 0 0 var(--spacing-2xl);
  text-align: center;
}
.airing-watch__heading {
  margin: 0 0 8px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
}
.airing-watch__lead {
  margin: 0 auto 20px;
  max-width: 46ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;                       /* ≥16px floor */
  line-height: 1.5;
  color: var(--ssb-event-ink);
}
.airing-watch__facts {
  margin: 0 auto 22px;
  max-width: 36ch;
  text-align: left;
}
.airing-watch__label {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;                       /* tracked label — floor exempt */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ssb-tan-deep, #A88857);
  margin-top: 14px;
}
.airing-watch__label:first-child { margin-top: 0; }
.airing-watch__value {
  margin: 2px 0 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor (hours / address) */
  line-height: 1.4;
}
.airing-watch__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ── Where to watch — network (the channel). Quiet. ──────────────────────── */
.airing-network {
/*  margin: 0 0 var(--spacing-xl);*/
/*  padding: 0 0 var(--spacing-lg);*/
/*  border-bottom: 1px solid var(--ssb-rule);*/
}
.airing-network__heading,
.airing-stadium__heading {
  margin: 0 0 10px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.airing-network__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor (network name) */
  color: var(--ssb-event-ink);
}
.airing-network__logo { height: 24px; width: auto; display: block; flex: 0 0 auto; }
.airing-network__row--tbd {
  font-style: italic;
  color: var(--ssb-event-muted);
}

/* ── Where it's played — the STADIUM. Verbally + visually subordinate so it
   NEVER reads as "come to this address." Muted, smaller, italic prefix. ───── */
.airing-stadium {
  margin: 0 0 var(--spacing-2xl);
}
.airing-stadium__heading {
  font-size: clamp(15px, 2vw, 18px);     /* heading is a label — smaller than network */
  color: var(--ssb-event-muted);
}
.airing-stadium__row {
  margin: 0;
  font-family: "Averia Libre", serif;
  font-size: 16px;                       /* 16px floor (stadium) */
  line-height: 1.4;
  color: var(--ssb-event-muted);
}
.airing-stadium__prefix {
  font-style: italic;
}
.airing-stadium__name { color: var(--ssb-event-ink); }
.airing-stadium__sep { margin: 0 6px; }

/* ── Optional body band (both-kind) ──────────────────────────────────────── */
.airing-single__content {
  margin: 0 0 var(--spacing-2xl);
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.6;
}

/* ── Tail — "Also on today" (upcoming / on-now only) ─────────────────────── */
.airing-tail {
  margin: var(--spacing-2xl) 0 0;
  padding-top: var(--spacing-xl);
  border-top: 2px solid var(--ssb-tan);
}
.airing-tail__heading {
  margin: 0 0 14px;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.airing-tail__cta {
  margin-top: var(--spacing-md);
  text-align: center;
}

/* ── Past state — reminiscence, not "dead": swap the top rule to tan, tint the
   "@" tan-deep, and lift the logos slightly (still desaturated). ──────────── */
.airing-single--past .airing-hero {
  border-top-color: var(--ssb-tan);
}
.airing-single--past .airing-hero__logo,
.airing-single--past .airing-hero__logo--placeholder {
  filter: grayscale(1) opacity(0.8);
}
.airing-single--past .airing-hero__team-bar {
  filter: grayscale(1) opacity(0.7);
}
.airing-single--past .airing-hero__at { color: var(--ssb-tan-deep, #A88857); }

/* ── Marquee tier — escalate the moment: thicker bright-red rule + bigger @. ── */
.airing-single--tier-marquee .airing-hero {
  border-top: 5px solid var(--ssb-red);
}
.airing-single--tier-marquee .airing-hero__at {
  font-size: clamp(72px, 18vw, 140px);
}


/* ==========================================================================
   Featured Event Panel — reusable hero surface (six mounts)
   --------------------------------------------------------------------------
   The reusable Featured Event Panel template-part. Two tiers, very different
   tone:

   - MARQUEE: flat deep-red ground, date-as-monument left, lockup right.
     Used for game-kind events where ssb_watch_dto_tier() === 'marquee'
     (auto-computed from featured + rivalry). The date is the apex of the
     composition — the @ glyph is downshifted from its airing-single weight.

   - FEATURED: cream-ground sibling, image-led (or lockup-led for game-kind),
     two-column at ≥1024px, single column below. Used for any other featured
     DTO surfaced by the selection helper.

   Tokens come from the .ssb-events / .airing-single / .featured-event-panel
   selector block (token-scope at the top of this section). NO new tokens.

   The marquee tier overrides .airing-hero__at and .airing-hero__lockup gap
   ONLY when nested inside .featured-event-panel--tier-marquee, so the
   single-game page styling is untouched.
   ========================================================================== */

/* Common shell — works at all widths. */
.featured-event-panel {
  position: relative;
  margin: 0 auto var(--spacing-2xl);
  max-width: 1100px;
  /* The token scope above resolves --ssb-* on this element. */
}
.featured-event-panel__inner {
  position: relative;
  display: block;
}

/* ────────────────────────────────────────────────────────────────────────────
   MARQUEE TIER — red ground, date-as-monument
   ──────────────────────────────────────────────────────────────────────────── */

.featured-event-panel--tier-marquee {
  background: var(--ssb-red-deep, #A02523);
  color: var(--ssb-cream, #EFE2C7);
  border-top: 5px solid var(--ssb-red, #d32f2f);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 12px 24px -16px rgba(15, 15, 15, 0.5);
  overflow: hidden;
}

.featured-event-panel--tier-marquee .featured-event-panel__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl, 1.5rem);
  padding: var(--spacing-xl, 1.5rem) var(--spacing-lg, 1.125rem);
}

.featured-event-panel--tier-marquee .featured-event-panel__eyebrow {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ssb-cream, #EFE2C7);
  margin: 0 0 12px;
  opacity: 1;
}

/* Date monument — mobile reads horizontally compressed, full vertical on desktop */
.featured-event-panel__date-monument {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  color: var(--ssb-cream, #EFE2C7);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
}
.featured-event-panel__date-month,
.featured-event-panel__date-weekday {
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.featured-event-panel__date-day {
  font-size: clamp(72px, 14vw, 168px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ssb-cream, #EFE2C7);
}

/* Body — right column on desktop, below monument on mobile */
.featured-event-panel--tier-marquee .featured-event-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm, 0.5rem);
}

/* Lockup overrides ONLY in panel-marquee scope (don't touch single-game) */
.featured-event-panel--tier-marquee .featured-event-panel__lockup {
  gap: clamp(16px, 4vw, 36px);
  margin: 4px 0 var(--spacing-sm, 0.5rem);
}
.featured-event-panel--tier-marquee .featured-event-panel__lockup .airing-hero__at {
  font-size: clamp(48px, 8vw, 72px);
  color: var(--ssb-cream, #EFE2C7);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Featured tier, game-kind: shrink the @ glyph to fit the smaller card.
   The base `.airing-hero__at` is sized for the full single-event hero
   (clamp 64–124px) — at the featured tier's lockup scale that reads
   unstyled-too-big. Render as a soft tertiary connector so the team logos
   keep doing the matchup-identification work and the @ ornaments quietly.
   Color: `--ssb-event-muted` (~5a5346) on cream-ground; not ink (reserved
   for the title) and not cream (would disappear). */
.featured-event-panel--tier-featured .featured-event-panel__media--lockup .airing-hero__at,
.featured-event-panel--tier-featured .featured-event-panel__lockup .airing-hero__at {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  color: var(--ssb-event-muted, #5a5346);
  text-shadow: none;
}

/* Cream circle plates around team logos — sits behind .airing-hero__logo */
.featured-event-panel__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ssb-cream, #EFE2C7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}
.featured-event-panel__plate .airing-hero__logo {
  width: 70%;
  height: 70%;
}

/* Wisconsin scale tweaks — opponent at 96%, Wisconsin at 100%, in marquee */
.featured-event-panel--tier-marquee .featured-event-panel__team--opponent .featured-event-panel__plate {
  transform: scale(0.96);
  transform-origin: center;
}
.featured-event-panel--tier-marquee .featured-event-panel__team--wisconsin .featured-event-panel__plate {
  transform: scale(1);
  transform-origin: center;
}

/* Marquee title (matchup line) — Averia, demoted to supporting line.
   Color is cream (~7.5:1 on red-deep, AAA) not tan (~3.2:1 — failed AA at this
   size). Type-pairing demotion via Averia (vs. Bowlby) + smaller size, not via
   reduced contrast. */
.featured-event-panel--tier-marquee .featured-event-panel__title {
  margin: 0;
  font-family: "Averia Libre", serif;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ssb-cream, #EFE2C7);
}

.featured-event-panel--tier-marquee .featured-event-panel__when {
  margin: 4px 0 8px;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-white, #fefefe);
}

.featured-event-panel--tier-marquee .featured-event-panel__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.featured-event-panel--tier-marquee .featured-event-panel__chip {
  background: transparent;
  color: var(--ssb-cream, #EFE2C7);
  border: 1px solid rgba(254, 254, 254, 0.18);
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.featured-event-panel--tier-marquee .featured-event-panel__chip--rivalry,
.featured-event-panel--tier-marquee .airing-hero__rivalry {
  background: var(--ssb-cream, #EFE2C7);
  color: var(--ssb-red-deep, #A02523);
  border: 0;
}

.featured-event-panel--tier-marquee .featured-event-panel__airing {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-family: "Averia Libre", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ssb-tan, #c2a488);
}

.featured-event-panel--tier-marquee .featured-event-panel__cta-row {
  margin-top: 4px;
}

/* Desktop ≥781px — split into two columns */
@media (min-width: 781px) {
  .featured-event-panel--tier-marquee .featured-event-panel__inner {
    grid-template-columns: 38% 1fr;
    gap: var(--spacing-2xl, 2rem);
    padding: var(--spacing-2xl, 2rem) var(--spacing-xl, 1.5rem);
    align-items: center;
    position: relative;
  }
  /* 1px cream hairline between columns — uses the inner grid's right edge of
     the left column. Implemented as a pseudo-element on the inner so it spans
     the lockup height. */
  .featured-event-panel--tier-marquee .featured-event-panel__inner::before {
    content: "";
    position: absolute;
    top: var(--spacing-xl, 1.5rem);
    bottom: var(--spacing-xl, 1.5rem);
    left: 38%;
    width: 1px;
    background: rgba(239, 226, 199, 0.28);
    transform: translateX(-1px);
    pointer-events: none;
  }
  .featured-event-panel__plate {
    width: 88px;
    height: 88px;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   FEATURED TIER — cream ground, image-led
   ──────────────────────────────────────────────────────────────────────────── */

.featured-event-panel--tier-featured {
  background: var(--ssb-event-ground, #F7F1E6);
  color: var(--ssb-ink, #0F0F0F);
  border: 1px solid var(--ssb-event-accent);
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  
/*  position: relative;*/
}
/*
.featured-event-panel--tier-featured::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
top:0;
left:0;
  background-image:url(http://localhost:10044/wp-content/uploads/2026/01/Finished-1-257-1024x683.jpg);
}*/

.featured-event-panel--tier-featured .featured-event-panel__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg, 1.125rem);
  padding: var(--spacing-xl, 1.5rem);
  align-items: center;
}

.featured-event-panel--tier-featured .featured-event-panel__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md, 0.6rem);
  background: rgba(15, 15, 15, 0.04);
}
/* Cover-fit photo media — scope to the photo variant so it does NOT
   re-size the lockup's team logos. Without this scope the .airing-hero__logo
   sizing (56px → 96px) loses to width:100%; a lockup img then renders at its
   intrinsic 500px and bursts the panel on mobile. */
.featured-event-panel--tier-featured .featured-event-panel__media:not(.featured-event-panel__media--lockup) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-event-panel--tier-featured .featured-event-panel__media--lockup {
  aspect-ratio: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 1.125rem) 0;
}
/* Explicit logo size inside the lockup variant — defense-in-depth against any
   future generic img rule. Matches the .airing-hero__logo mobile size. */
.featured-event-panel--tier-featured .featured-event-panel__media--lockup .airing-hero__logo {
  width: 56px;
  height: 56px;
  max-width: 56px;
  object-fit: contain;
  display: block;
}
@media (min-width: 781px) {
  .featured-event-panel--tier-featured .featured-event-panel__media--lockup .airing-hero__logo {
    width: 96px;
    height: 96px;
    max-width: 96px;
  }
}

/* PROTOTYPE — blurred local-team photo behind the featured-panel game lockup
   (mirrors the single-game hero). The lockup variant is normally transparent +
   auto-height; with a backdrop it becomes a 16/9 photo area, blurred + scrimmed,
   with the @ logo lockup centered on top. Lighter scrim than the hero — the
   team logos sit on white discs and read fine, so the photo can show more. */
.featured-event-panel--tier-featured .featured-event-panel__media--has-bg {
  position: relative;
  z-index: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md, 0.6rem);
}
.featured-event-panel__media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.08);
  transform: scale(1.06);
}
.featured-event-panel__media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.42) 0%, rgba(15, 15, 15, 0.58) 100%);
}
.featured-event-panel--tier-featured .featured-event-panel__media--has-bg .featured-event-panel__lockup {
  position: relative;
  z-index: 1;
}
/* Over a photo backdrop the cream "@" loses contrast — flip it white (+ a soft
   shadow) so it reads against the bright/variable image. */
.featured-event-panel--tier-featured .featured-event-panel__media--has-bg .airing-hero__at {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.featured-event-panel--tier-featured .featured-event-panel__eyebrow {
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ssb-red-deep, #A02523);
  margin: 0 0 var(--spacing-sm, 0.5rem);
  opacity: 1;
}

.featured-event-panel--tier-featured .featured-event-panel__title {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ssb-ink, #0F0F0F);
}
/* No-image collapse: bigger title becomes the centerpiece. */
.featured-event-panel--no-image .featured-event-panel__title {
  font-size: clamp(40px, 7vw, 84px);
}

.featured-event-panel--tier-featured .featured-event-panel__when {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-family: "Averia Libre", serif;
  font-size: 20px;
  line-height: 1.35;
  color: var(--ssb-ink, #0F0F0F);
}

.featured-event-panel--tier-featured .featured-event-panel__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--spacing-sm, 0.5rem);
}
.featured-event-panel--tier-featured .featured-event-panel__chip {
  background: transparent;
  color: var(--ssb-event-muted, #5a5346);
  border: 1px solid var(--ssb-rule, rgba(194, 164, 136, 0.35));
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured-event-panel--tier-featured .featured-event-panel__airing {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-family: "Averia Libre", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ssb-event-muted, #5a5346);
}

.featured-event-panel--tier-featured .featured-event-panel__cta-row {
  margin-top: 4px;
}

/* Desktop ≥1024px — two columns, image left 5/12 + copy right 7/12 */
@media (min-width: 1024px) {
  .featured-event-panel--tier-featured .featured-event-panel__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--spacing-xl, 1.5rem);
    padding: var(--spacing-2xl, 2rem);
  }
  .featured-event-panel--tier-featured .featured-event-panel__media {
    aspect-ratio: 4 / 3;
  }
}

/* No-image OR no-game-lockup: single column always — body spans full width. */
.featured-event-panel--no-image .featured-event-panel__inner {
  grid-template-columns: 1fr !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Mobile tweaks (<768px) — marquee tier
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .featured-event-panel {
    margin-bottom: var(--spacing-xl, 1.5rem);
  }
  .featured-event-panel--tier-marquee .featured-event-panel__date-monument {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .featured-event-panel--tier-marquee .featured-event-panel__date-day {
    font-size: clamp(64px, 22vw, 120px);
    line-height: 0.85;
  }
  .featured-event-panel--tier-marquee .featured-event-panel__lockup .airing-hero__at {
    font-size: clamp(48px, 12vw, 72px);
  }
  .featured-event-panel__plate {
    width: 56px;
    height: 56px;
  }
  .featured-event-panel--tier-marquee .featured-event-panel__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   Entrance motion — INTENTIONALLY OMITTED. A page-load fade-and-rise fires
   regardless of viewport position; on /today and /watch-at-brats the panel sits
   below the fold and the 600ms reveal completes before the visitor scrolls to
   it (they see a static panel — the motion is wasted). The panel reads as
   presence, not motion. The `prefers-reduced-motion` block below is a no-op
   today but self-documents the intent if motion is ever reintroduced (which
   should be done with an IntersectionObserver, not a page-load animation).
   ──────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .featured-event-panel--tier-marquee {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* /visit override: when the panel is the page H1, force a tiny top margin
   so it doesn't kiss the site header. The .featured-event-panel--surface-visit
   class is added on that surface only. */
.featured-event-panel--surface-visit {
  margin-top: var(--spacing-xl, 1.5rem);
}

/* /today override: when a marquee-tier game lands, the live `.now-panel` and the
   marquee featured-event-panel both render scoreboard-dark bands and sit
   shoulder-to-shoulder. Push the panel down so the two dark bands breathe. */
.featured-event-panel--surface-today {
  margin-top: var(--spacing-3xl);
}

/* /front_page override — full-bleed adjacency to the red text-ticker above and
   the .info-grid atmosphere band below.
   ── Why ──
   The other five surfaces (visit, events, calendar, today, watch) mount the
   panel inside a constrained container (.container, .calendar-page, .ssb-events
   etc.), so the default `max-width:1100px; margin:0 auto` reads correctly.
   The front page mounts the panel as a direct child of <main> between two
   already-full-bleed sections (.text-ticker, .info-grid). At 1100px max-width
   the panel leaves white gutters that read as a hole in the page rhythm.
   ── What ──
   1. Outer panel goes 100% wide so its background spans the viewport.
   2. The inner wrapper carries the 1100px content clamp + safe-area padding,
      so type still reads at a comfortable measure.
   3. Kill the cream tier's tan hairline top border on this surface — the red
      ticker → cream panel color change is its own divider; an additional rule
      reads as ugly trim.
   4. Zero bottom margin so the panel butts directly into the atmosphere band's
      own top padding. The .info-grid already has its own internal padding-top,
      which provides the breathing room. */
.featured-event-panel--surface-front_page {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-radius: 0;
}
.featured-event-panel--surface-front_page .featured-event-panel__inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.featured-event-panel--surface-front_page.featured-event-panel--tier-featured {
  border-top: 0;
}
/* When the rivalry-marquee tier renders here, the panel and the ticker above
   are both red-deep — keep the existing 5px red top border (it reads as a
   highlight stripe on red-on-red, not trim). No override needed; default wins. */

/* ── Mobile ≤781px — tighten the band's padding (keep rounded corners + rule) ─ */
@media (max-width: 781px) {
  .airing-hero {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

/* ── Desktop ≥781px — scale the lockup up; sticky watch-here rail ─────────── */
@media (min-width: 781px) {
  .airing-hero__logo,
  .airing-hero__logo--placeholder {
    width: 96px;
    height: 96px;
  }
  .airing-hero__logo--placeholder { font-size: 24px; }
}

/* ── Motion: honor reduced-motion (freeze the live pulse + arrow nudge) ───── */
@media (prefers-reduced-motion: reduce) {
  .airing-hero__lozenge-dot { animation: none; }
  .airing-watch .btn-box__arrow,
  .airing-tail .btn-box__arrow {
    transition: none;
  }
  .airing-watch .btn-box:hover .btn-box__arrow,
  .airing-watch .btn-box:focus-visible .btn-box__arrow,
  .airing-tail .btn-box:hover .btn-box__arrow,
  .airing-tail .btn-box:focus-visible .btn-box__arrow {
    transform: none;
  }
}


/* ==========================================================================
   Calendar (P5c) — two-pane date-picker (all widths)
   --------------------------------------------------------------------------
   The month-at-a-glance, a two-pane "date-picker" shown at ALL widths (the panes
   stack to a single column < 781px; the old mobile agenda is RETIRED). Rendered
   by the ssb-events [ssb_calendar] shortcode; the whole surface is wrapped in
   .ssb-events so the token block above (--ssb-red-deep, --ssb-tan-deep,
   --ssb-cream, --ssb-scoreboard, --ssb-event-surface, etc.) is in scope here too.

   Everything is pre-rendered server-side; JS (ssb-events-calendar.js) only
   toggles selection/visibility + layers ARIA (now at all widths). JS-OFF works
   fully: entry tiles are real <a href="?ym=&cal_day="> anchors, prev/next are
   real ?ym= links, and PHP server-selects the ?cal_day=.

   Layout: .ssb-calendar__panes (left picker grid + right detail pane); the
   transparent .ssb-calendar__board nav sits above, spanning both panes. The week
   starts MONDAY; weekday headers are single letters (M T W T F S S). Day tiles
   are compact squares with a centered numeral and a corner count badge.
     - >=781px → two columns (1fr / 380px).
     - <781px  → a single stacked column (picker on top, detail below); tiles keep
       a >=44px tap target. The .ssb-calendar__agenda is hidden at all widths.

   RESTRAINT pass: cream ledger (no dark scoreboard band), ink Bowlby header,
   hairline rules, a neutral ink corner COUNT badge on every entry day (no dots),
   ONE tan selected tile, ONE red today ring, red chevrons (~2 red beats total).
   Tile value ladder: empty in-month recedes into the cream field (not a link);
   has-event raises to WHITE; today gets the red ring; selected = a TAN fill with
   a tan-deep ring ("picked", not "lit"). The ONE motion is the right-pane card
   cross-fade+rise on select; the tile selection is instant.

   Constraints honored: kind conveyed by a hidden "Game"/"Event" label (NEVER
   color alone) on agenda cells; the count badge is decorative (aria-hidden);
   :focus-visible; NO emoji / Font Awesome / unicode arrows (nav glyphs are
   typographic chevrons ‹ › with real "Prev"/"Next" text); Imperial Script BANNED.
   ========================================================================== */

/* ── Page ground — the calendar had NO ground rule, so it fell onto the cool-grey
   body (#f3f3f3). Anchor it on the warm room-cream the landings use. ──────── */
.calendar-page {
  background: var(--ssb-event-ground, #F7F1E6);
  color: var(--ssb-event-ink);
}

/* Calendar masthead — mirrors .events-landing__masthead / .watch-landing__masthead.
   The <h1> is the page's Bowlby apex (was inheriting body Averia → competed with
   the month header). One red beat = the eyebrow. */
.calendar-page__masthead {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 28px;
  text-align: center;
}
.calendar-page__masthead .eyebrow {
  color: var(--ssb-red-deep);
  opacity: 1;
}
.calendar-page__title {
  margin: 0;
  font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ssb-ink);
}
.calendar-page__intro {
  margin: 18px auto 0;
  max-width: 52ch;
  font-family: "Averia Libre", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ssb-event-muted);
}

.ssb-calendar {
  color: var(--ssb-event-ink);
  margin: 0 auto;
  max-width: 1080px;
}

/* ── Month nav band — cream ledger (sits on the page cream; no dark band). The
   restraint pass dropped the scoreboard ground + red top rule. ────────────── */
.ssb-calendar__board {
  background: transparent;
  padding: var(--spacing-md) 0;
}
.ssb-calendar__board .ssb-calendar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 12px);
}

/* Nav links — cream treatment: transparent fill, hairline rule, ink text, red
   chevron; hover → red border. */
.ssb-calendar__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid var(--ssb-rule);
  border-radius: var(--ssb-event-radius, 8px);
  background: transparent;
  color: var(--ssb-event-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ssb-calendar__nav-link:hover {
  border-color: var(--ssb-red-deep);
}
.ssb-calendar__nav-link:focus-visible {
  outline: 3px solid var(--ssb-red-deep);
  outline-offset: 2px;
}
.ssb-calendar__nav-glyph {
  font-size: 20px;
  line-height: 1;
  color: var(--ssb-red-deep);
}

.ssb-calendar__month {
  font-family: 'Bowlby One SC', var(--wp--preset--font-family--heading, sans-serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  color: var(--ssb-ink);
  flex: 1 1 auto;
}

/* ── Games-stale caution (tan, scoped — NOT a page-wide red error) ────────── */
.ssb-calendar__caution {
  margin: var(--spacing-md, 20px) 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--ssb-tan-deep);
  border-radius: var(--ssb-event-radius, 8px);
  background: var(--ssb-cream, #EFE2C7);
  color: var(--ssb-event-ink);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Sparse-month line — calm, above the panes ────────────────────────────── */
.ssb-calendar__sparse {
  margin: var(--spacing-md, 20px) 0 0;
  color: var(--ssb-event-muted);
  font-size: 16px;
  font-style: italic;
  text-align: center;
}

/* ── Two-pane shell — cream ground, single hairline seam between panes. Full
   hairline border on all sides + radius all corners (the dark board is gone, so
   the shell is its own framed ledger). ────────────────────────────────────── */
.ssb-calendar__panes {
  display: grid;
  grid-template-columns: 1fr 380px;
  background: var(--ssb-cream, #EFE2C7);
  border: 1px solid var(--ssb-rule);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

/* ── Left pane — the picker (grid + legend) ───────────────────────────────── */
.ssb-calendar__picker {
  padding: 20px;
  border-right: 1px solid var(--ssb-rule);   /* the single seam hairline */
  min-width: 0;
}

/* The grid is now a <div> (NOT a <table>). 7-col week rows. */
.ssb-calendar__grid {
  display: block;
}
.ssb-calendar__weekrow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.ssb-calendar__weekrow + .ssb-calendar__weekrow {
  margin-top: 8px;
}
.ssb-calendar__weekrow--head {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ssb-rule);
  padding-bottom: 8px;
}
.ssb-calendar__weekday {
  font-family: "Averia Libre", serif;        /* NOT Bowlby — too chunky at 13px */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ssb-event-muted);
  text-align: center;
  padding: 2px 0;
}

/* ── Day tiles — compact squares with a CENTERED numeral. The count badge is
   absolutely positioned in the top-right corner (see below). On DESKTOP the
   tiles are small (no 44px floor needed — pointer target); the mobile media
   query bumps the min-height back over 44px since the grid is interactive there
   at the narrower column width. ───────────────────────────────────────────── */
.ssb-calendar__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 4px);
  background: var(--ssb-cream, #EFE2C7);
}
/* Empty in-month day — recedes into the cream field; muted numeral, no link. */
.ssb-calendar__tile--empty {
  background: var(--ssb-cream, #EFE2C7);
}
.ssb-calendar__tile--empty .ssb-calendar__numeral {
  color: var(--ssb-event-muted);
  font-weight: 400;
}
/* Adjacent-month day — recede. */
.ssb-calendar__tile--adjacent {
  opacity: 0.45;
  background: transparent;
}
/* Has-event day — raised WHITE ground so it reads as active vs the cream field. */
.ssb-calendar__tile--event {
  background: var(--ssb-event-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.06);
}
/* Today — white ground + red ring + red numeral (reuse the existing treatment). */
.ssb-calendar__tile--today {
  background: var(--ssb-event-surface, #fff);
  box-shadow: inset 0 0 0 2px var(--ssb-red-deep);
}
.ssb-calendar__tile--today .ssb-calendar__numeral {
  color: var(--ssb-red-deep);
}
/* Selected — a TAN fill (not a dark inversion): tan ground, ink numeral, a
   tan-deep ring. Instant (no fade — "picked"). */
.ssb-calendar__tile--selected {
  background: var(--ssb-tan);
  box-shadow: inset 0 0 0 2px var(--ssb-tan-deep);
}
.ssb-calendar__tile--selected .ssb-calendar__numeral {
  color: var(--ssb-ink);
}
/* Selected + today — tan fill, but the red ring wins (today still reads). */
.ssb-calendar__tile--selected.ssb-calendar__tile--today {
  background: var(--ssb-tan);
  box-shadow: inset 0 0 0 2px var(--ssb-red-deep);
}
.ssb-calendar__tile--selected.ssb-calendar__tile--today .ssb-calendar__numeral {
  color: var(--ssb-ink);
}

/* The tile anchor fills the tile (whole tile = the click/tap target). */
.ssb-calendar__tile-link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
}
.ssb-calendar__tile-link:focus-visible {
  outline: 3px solid var(--ssb-red-deep);
  outline-offset: 2px;
}
/* Roving-tabindex tiles take focus on the tile itself (JS sets tabindex). */
.ssb-calendar__tile:focus-visible {
  outline: 3px solid var(--ssb-red-deep);
  outline-offset: 2px;
}

.ssb-calendar__numeral {
  position: relative;
  z-index: 1;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--ssb-event-ink);
}

/* ── Tile count badge — a single neutral corner badge (dots retired). Shows the
   entry total ("1", "2", …) for every day with >=1 entry; it's the presence
   indicator. Ink ground / cream text (protects the red budget; not tan, which
   would fail 3:1 on white). Absolutely positioned, slightly overhanging the
   tile's top-right corner like the original date-picker. ──────────────────── */
.ssb-calendar__tile-count {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ssb-event-ink);
  color: var(--ssb-cream, #EFE2C7);
  font-family: "Averia Libre", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */
.ssb-calendar__legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.ssb-calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Averia Libre", serif;
  font-size: 14px;
  color: var(--ssb-event-muted);
}
.ssb-calendar__legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm, 4px);
  flex: 0 0 auto;
}
.ssb-calendar__legend-item--selected .ssb-calendar__legend-swatch {
  background: var(--ssb-tan);
  box-shadow: inset 0 0 0 2px var(--ssb-tan-deep);
}
.ssb-calendar__legend-item--event .ssb-calendar__legend-swatch {
  background: var(--ssb-event-surface, #fff);
  border: 1px solid var(--ssb-rule);
}

/* ── Right pane — the detail region (the aria-live region). Fills the panes
   row height (the grid stretches both columns) and scrolls internally; the body
   is the flex-grow scroll container. ──────────────────────────────────────── */
.ssb-calendar__detail {
  position: relative;                          /* containing block for the absolute body */
  background: var(--ssb-cream, #EFE2C7);
  min-width: 0;
}
/* Absolutely positioned so the body does NOT contribute to the grid row height —
   the PICKER alone sizes the panes row, and this body fills that height (inset:0)
   and scrolls internally. A plain in-flow child would let a long day inflate the
   whole panes row and kill the internal scroll (which is exactly what happened).
   Reverts to static flow when the panes stack on mobile (see the <781px block). */
.ssb-calendar__detail-body {
  position: absolute;
  inset: 0;
  padding: 20px;
  overflow-y: auto;
}
/* Per-day heading STICKS to the top of the scrolling body so the day stays
   labelled while cards scroll under it. Solid cream ground + small z-index so
   cards pass beneath. The body padding-top would otherwise show a gap above the
   heading on scroll, so the heading pulls up over it. */
.ssb-calendar__detail-heading {
  position: sticky;
  top: -20px;                                /* clears the body's 20px padding-top */
  z-index: 3;
  margin: -20px 0 16px;                      /* bleed up over the body padding */
  padding: 20px 0 8px;                       /* restore the visual top spacing */
  background: var(--ssb-cream, #EFE2C7);
  border-bottom: 1px solid var(--ssb-rule);
  font-family: 'Bowlby One SC', var(--wp--preset--font-family--heading, sans-serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
/* The detail panel does NOT stretch a single card to fill — natural height, open
   cream space below is intentional. No `overflow` here (it would break the
   heading's sticky positioning relative to the scrolling body). */
.ssb-calendar__detail-day {
  display: block;
}
/* The JS toggles the `hidden` attribute to swap days; a plain class selector has
   the same specificity as the UA `[hidden]` rule and wins by source order, so the
   panels would never hide. This higher-specificity rule lets `hidden` actually
   hide an inactive day's panel. */
.ssb-calendar__detail-day[hidden] {
  display: none;
}
.ssb-calendar__detail-day .events-group__list {
  display: grid;
  /* Always one column in the detail pane — it's a focused "what's on this day"
     read, not a browse grid. Without this it inherits the landing list's
     repeat(auto-fill, minmax(280px,1fr)) and goes 2-up in the 700–780px stacked
     band. */
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* ── Panel-empty state (string #5) — quiet, tan/cream/ink, ZERO red ───────── */
.ssb-calendar__detail-empty {
  padding: 8px 0;
}
.ssb-calendar__detail-empty-headline {
  margin: 0 0 12px;
  font-family: 'Bowlby One SC', var(--wp--preset--font-family--heading, sans-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ssb-ink);
}
.ssb-calendar__detail-empty-body {
  margin: 0;
  max-width: 36ch;
  font-family: "Averia Libre", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ssb-event-muted);
}

/* ── ONE motion: on day-select the cards cross-fade + rise 8px (max 3, ~40ms
   stagger). The is-entering flag is toggled by the JS each selection. The cards
   are now the shared `.card`; the stagger keys off the wrapping <li>. ──────── */
.ssb-calendar__detail-day.is-entering .card {
  animation: ssb-calendar-card-in 160ms ease both;
}
.ssb-calendar__detail-day.is-entering li:nth-child(1) .card { animation-delay: 0ms; }
.ssb-calendar__detail-day.is-entering li:nth-child(2) .card { animation-delay: 40ms; }
.ssb-calendar__detail-day.is-entering li:nth-child(3) .card { animation-delay: 80ms; }
@keyframes ssb-calendar-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* (reduced-motion suppression for this animation lives in the consolidated
   prefers-reduced-motion block further down — see ssb-calendar__detail-day.) */

/* ── The unified cell (.cal-cell) — games + events, ONE shape (AGENDA) ─────── */
.cal-cell {
  margin: 0;
  padding: 0;
}
.cal-cell__link {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 4px;
  border-left: 3px solid transparent;
  background: var(--ssb-event-surface, #fff);
  color: var(--ssb-event-ink);
  text-decoration: none;
  line-height: 1.25;
  transition: background-color 0.15s ease;
}
.cal-cell__link:hover {
  background: var(--ssb-cream, #EFE2C7);
}
.cal-cell__link:focus-visible {
  outline: 3px solid var(--ssb-red-deep);
  outline-offset: 1px;
}

/* Decorative marker dot — kind is ALSO carried by the hidden label, so the dot
   is pure reinforcement (aria-hidden in markup). game = red, event = tan. */
.cal-cell__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 1px;
  background: var(--ssb-tan-deep);
}
.cal-cell--game .cal-cell__dot {
  background: var(--ssb-red-deep);
}

.cal-cell__time {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ssb-event-ink);
  white-space: nowrap;
}
.cal-cell__time--tba {
  color: var(--ssb-event-muted);
  font-weight: 400;
}
.cal-cell__title {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  /* Dense overview: clamp long titles to one line in the grid. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tier emphasis — a heavier left rule so a rivalry game dominates its day.
   featured = a tan accent rule; marquee = the full red rule + slightly bolder. */
.cal-cell--featured .cal-cell__link {
  border-left-color: var(--ssb-tan-deep);
}
.cal-cell--marquee .cal-cell__link {
  border-left-color: var(--ssb-red-deep);
  border-left-width: 4px;
  font-weight: 700;
}

/* ── Mobile agenda (day-grouped list) ─────────────────────────────────────── */
.ssb-calendar__agenda {
  display: none;
}
.ssb-calendar__agenda-day {
  margin: 0 0 var(--spacing-md, 20px);
}
.ssb-calendar__agenda-heading {
  font-family: 'Bowlby One SC', var(--wp--preset--font-family--heading, sans-serif);
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ssb-red-deep);
}
.ssb-calendar__agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Agenda cells are the primary mobile read: 16px floor on title + time, more
   air, and titles may wrap (no ellipsis clamp). */
.ssb-calendar__agenda-list .cal-cell__link {
  padding: 12px 14px;
  border: 1px solid var(--ssb-event-border);
  border-left-width: 3px;
}
.ssb-calendar__agenda-list .cal-cell__time,
.ssb-calendar__agenda-list .cal-cell__title {
  font-size: 16px;
}
.ssb-calendar__agenda-list .cal-cell__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ── Month/full-window-empty state ────────────────────────────────────────── */
.ssb-calendar__empty {
  text-align: center;
  padding: var(--spacing-xl, 48px) var(--spacing-md, 20px);
}
.ssb-calendar__empty-headline {
  font-family: 'Bowlby One SC', var(--wp--preset--font-family--heading, sans-serif);
  font-size: clamp(22px, 4vw, 30px);
  margin: 0 0 12px;
}
.ssb-calendar__empty-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ssb-event-muted);
  max-width: 44ch;
  margin: 0 auto;
}

/* ── Agenda — RETIRED. The two-pane calendar shows at all widths now, so the
   agenda markup (still emitted nowhere, but defensively hidden if present) never
   shows. ──────────────────────────────────────────────────────────────────── */
.ssb-calendar__agenda {
  display: none;
}

/* ── Mobile (<781px): the panes STACK to a single column (picker on top, detail
   below) and stay interactive. Tiles bump their min-height back over 44px so the
   tap target clears the guideline at the narrower column width. ───────────── */
@media (max-width: 780px) {
  .ssb-calendar__panes {
    grid-template-columns: 1fr;             /* single stacked column */
  }
  /* The seam hairline becomes a bottom rule between the stacked panes. */
  .ssb-calendar__picker {
    border-right: 0;
    border-bottom: 1px solid var(--ssb-rule);
  }
  /* >=44px tap target on the interactive mobile grid (overrides the compact
     desktop square; aspect-ratio still keeps them square-ish but never smaller
     than 44px tall). */
  .ssb-calendar__tile {
    min-height: 44px;
  }
  /* Stacked: the body returns to normal flow (the desktop absolute-fill is keyed
     to the side-by-side picker height, which doesn't exist when stacked). Cap its
     scroll height so a long day doesn't run the full document. */
  .ssb-calendar__detail-body {
    position: static;
    inset: auto;
    max-height: 60vh;
  }
  /* Board nav centers; the big month label drops to its own full-width row. */
  .ssb-calendar__board .ssb-calendar__nav {
    justify-content: center;
  }
  .ssb-calendar__month {
    flex-basis: 100%;
    order: -1;
  }
}

/* ── Reduced motion: the ONE animation (card entrance) drops to its final state;
   the tile inversion was already instant. The explicit block documents the
   instant month-swap contract for QA. ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ssb-calendar__nav-link,
  .cal-cell__link {
    transition: none;
  }
  .ssb-calendar__detail-day.is-entering .card {
    animation: none;
  }
}


/* ==========================================================================
   SITE STATUS BANNER + TODAY PAGE  (Today/Status Pass 2 · screen.css 1.1.158)
   --------------------------------------------------------------------------
   The site-wide status banner (`template-parts/site-status.php`) and the Today
   page (`template-today.php`). Both roots (.site-status, .today) were added to
   the --ssb-* token selector list (~L4903) so the editorial palette resolves —
   the single biggest implementation trap both designers flagged.

   Severity = ground + mask-icon + tracked WORD label (color is the THIRD
   signal). closure = ink plank + cream text + ONE red-deep filled chip + torn
   bottom edge (Bowlby caps). heads-up = tan ground + ink text + outline chip
   (Averia Libre 700). info = inline-only left-bordered line, no red (Averia
   italic). Contrast: closure cream/ink 15:1, cream/chip 7.5:1; heads-up ink/tan
   8.6:1; info red-deep/cream-soft 6.5:1 — all clear AA.
   ========================================================================== */

/* ── Status severity token pairs — scoped to the banner root ─────────────── */
.site-status {
    /* closure: ink ground + cream fg + red-deep filled chip (per parent reconciliation) */
    --status-closure-bg:   #0F0F0F;
    --status-closure-fg:    #EFE2C7;
    --status-closure-chip:  #A02523;
    /* heads-up: tan ground + ink fg + red-deep edge/chip */
    --status-headsup-bg:    #c2a488;
    --status-headsup-fg:    #0F0F0F;
    --status-headsup-edge:  #A02523;
    /* info: inline only — red-deep mark/border on the warm page (no plank) */
    --status-info-fg:       #A02523;
}

/* ── Shared base (chrome + inline) ───────────────────────────────────────── */
.site-status {
    box-sizing: border-box;
    width: 100%;
    font-family: "Averia Libre", system-ui, serif;
}

.site-status__inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 32px;
    min-height: 44px;
}

/* The severity mark — a square chip carrying the bolt mask-icon. */
.site-status__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 4px);
    display: inline-flex;
}
.site-status__icon::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: auto;
    background-color: currentColor;
    -webkit-mask-image: url('../svg/ornaments/bolt.svg');
            mask-image: url('../svg/ornaments/bolt.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Body: label prefix + message + optional recovery clause. */
.site-status__body {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em 0.6em;
}

/* The tracked WORD label — the non-color severity signal. Floor-exempt (tracked cap). */
.site-status__label {
    flex: 0 0 auto;
    font-family: "Bowlby One SC", Impact, sans-serif;
    font-size: 0.8125rem; /* 13px tracked cap — floor exempt per spec */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.site-status__label::after {
    content: ":";
    margin-left: 0.05em;
}

.site-status__message {
    font-size: 1rem; /* 16px floor */
    line-height: 1.3;
}

.site-status__recovery {
    flex-basis: 100%;
    font-style: italic;
    font-weight: 700;
    font-size: 1rem;
}

.site-status__cta {
    flex: 0 0 auto;
}
/*
 * Closure CTA contrast fix: the optional CTA ships as `.btn-box--ghost-ink`
 * (ink text + ink border), which is correct on the heads-up tan ground
 * (~8.6:1) but invisible on the closure plank's ink ground (~1:1). On a
 * closure, flip it to a cream ghost treatment — cream text + cream border on
 * transparent (cream-on-ink ≈ 15:1). Hover inverts to a cream fill / ink text.
 */
.site-status--closure .site-status__cta {
    color: var(--status-closure-fg);
    border-color: var(--status-closure-fg);
}
.site-status--closure .site-status__cta:hover,
.site-status--closure .site-status__cta:focus-visible {
    background: var(--status-closure-fg);
    color: var(--status-closure-bg);
}

/* Dismiss / collapse controls — real 44×44 buttons. */
.site-status__dismiss,
.site-status__collapse {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0 8px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-family: "Averia Libre", system-ui, serif;
    margin-left: auto;
}
.site-status__collapse-label {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.site-status__dismiss-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url('../svg/ornaments/close.svg');
            mask-image: url('../svg/ornaments/close.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.site-status__dismiss:focus-visible,
.site-status__collapse:focus-visible,
.site-status__pip:focus-visible,
.site-status__cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── closure: ink plank + cream text + red-deep filled chip + torn edge ──── */
.site-status--closure {
    position: relative;
    background-color: var(--status-closure-bg);
    color: var(--status-closure-fg);
}
.site-status--closure .site-status__icon {
    background-color: var(--status-closure-chip);
    color: var(--wp--preset--color--text-white, #fefefe);
}
.site-status--closure .site-status__label,
.site-status--closure .site-status__message {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.site-status--closure .site-status__message {
    font-size: 1rem;
    line-height: 1.35;
}
.site-status--closure .site-status__recovery {
    color: var(--status-headsup-bg); /* tan recovery clause */
    text-transform: none;
    letter-spacing: 0;
}
/* Torn butcher-paper bottom edge — rides the slide, cream against the ink. */
.site-status--closure::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 8px;
    background-color: var(--status-closure-fg);
    -webkit-mask-image: url('../svg/ornaments/torn-paper-edge.svg');
            mask-image: url('../svg/ornaments/torn-paper-edge.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    pointer-events: none;
}

/* ── heads-up: tan ground + ink text + outline red-deep chip ─────────────── */
.site-status--headsup {
    background-color: var(--status-headsup-bg);
    color: var(--status-headsup-fg);
}
.site-status--headsup .site-status__icon {
    background-color: transparent;
    border: 2px solid var(--status-headsup-edge);
    color: var(--status-headsup-edge);
}
.site-status--headsup .site-status__label,
.site-status--headsup .site-status__message {
    font-family: "Averia Libre", system-ui, sans-serif;
    font-weight: 700;
}
.site-status--headsup .site-status__dismiss-icon {
    color: var(--status-headsup-edge);
}

/* ── info: inline-only, left-bordered, NO red plank ──────────────────────── */
.site-status--info {
    background-color: var(--ssb-cream-soft, #F5E9CF);
    color: var(--ssb-ink, #0F0F0F);
    border-left: 3px solid var(--ssb-tan-deep, #A88857);
}
.site-status--info .site-status__icon {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--status-info-fg);
}
.site-status--info .site-status__icon::before {
    -webkit-mask-image: url('../svg/ornaments/star.svg');
            mask-image: url('../svg/ornaments/star.svg');
}
.site-status--info .site-status__message {
    font-style: italic;
    font-size: 1rem;
}

/* ── CHROME: top-of-document announcement plank, with entrance motion ─────── */
/*
 * DELIBERATELY NOT sticky. The chrome banner used to be position:sticky;top:0
 * with an elevated z-index, which collided with the sticky `.site-header`
 * (also top:0) — on scroll the banner overlaid the pinned nav. The banner has a
 * variable height (1–2 lines + optional CTA), so a fixed scroll offset is
 * brittle. It now sits in normal flow above the header and scrolls away with
 * the page (standard announcement-bar behavior); the sticky header is left
 * untouched. The closure collapse-to-pip handles space reclamation, so we don't
 * need scroll-persistence here.
 */
@media (prefers-reduced-motion: no-preference) {
    .site-status:not(.site-status--inline) {
        animation: status-banner-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* Collapse-to-pip (closure chrome only). */
.site-status--collapsed .site-status__inner,
.site-status--collapsed::after {
    display: none;
}
.site-status__pip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 28px;
    padding: 4px 14px;
    background-color: var(--status-closure-bg);
    color: var(--status-closure-fg);
    border: 0;
    cursor: pointer;
    font-family: "Bowlby One SC", Impact, sans-serif;
}
.site-status__pip-icon {
    width: 8px;
    height: 8px;
    background-color: var(--status-closure-chip);
    display: inline-block;
}
.site-status__pip-label {
    font-size: 0.75rem; /* tiny tracked cap — floor exempt */
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Banner entrance — non-looping, separate from status-pulse (do NOT touch pulse). */
@keyframes status-banner-enter {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* prefers-contrast: add a hard border so the plank edges read. */
@media (prefers-contrast: more) {
    .site-status {
        border-bottom: 2px solid currentColor;
    }
    .site-status--closure::after { display: none; }
}

/* ── Mobile: wrap to two lines, dismiss pinned right ─────────────────────── */
@media (max-width: 700px) {
    .site-status__inner {
        flex-wrap: wrap;
        padding: 10px 16px;
    }
    .site-status__dismiss,
    .site-status__collapse {
        position: absolute;
        top: 0;
        right: 0;
    }
    .site-status:not(.site-status--inline) {
        position: sticky; /* keep sticky; ::after needs the relative anchor */
    }
    .site-status--closure,
    .site-status--headsup { position: relative; }
}

/* Inline (/today/ [A]) cards: in-flow, stacked, not sticky, no entrance. */
.site-status--inline {
    position: static;
    animation: none;
    border-radius: var(--radius-sm, 4px);
    margin-bottom: var(--spacing-md, 0.75rem);
}
.site-status--inline:last-child { margin-bottom: 0; }


/* ==========================================================================
   TODAY PAGE  (template-today.php)
   ========================================================================== */
.today {
    background-color: #F7F1E6; /* matches the watch landing ground */
    color: var(--ssb-ink, #0F0F0F);
    padding: 0 0 var(--spacing-3xl, 3rem);
}

/* [A] inline status zone */
.today__status {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl, 1.5rem) var(--spacing-lg, 1rem) 0;
}

/* [B] open-state lead — the LIGHT apex (NOT a dark band). */
.today__open {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1rem) var(--spacing-2xl, 2rem);
    text-align: left;
}
.today__date {
    /* .eyebrow carries opacity .72 — lift toward .9 per the art direction */
    opacity: 0.9;
    margin: 0 0 var(--spacing-md, 0.75rem);
    color: var(--ssb-tan-deep, #A88857);
    font-style: italic;
}
.today__headline {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: clamp(2rem, 6vw, 3.5rem); /* huge: 2rem mobile → 3.5rem desktop */
    line-height: 1.02;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--ssb-ink, #0F0F0F);
}
.today__time { white-space: nowrap; }
.today__tail,
.today__recovery {
    font-style: italic;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    color: var(--ssb-tan-deep, #A88857);
    margin: var(--spacing-md, 0.75rem) 0 0;
}
.today__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 0.75rem);
    margin-top: var(--spacing-lg, 1rem);
}
/* Closed headline: the ONE place on /today/ the closure chip goes filled. */
.today__headline--closed {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}
.today__chip--closed {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--ssb-red-deep, #A02523);
    border-radius: var(--radius-sm, 4px);
}

/* [B'] quiet-day warm line */
.today__quiet {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg, 1rem) var(--spacing-2xl, 2rem);
    font-style: italic;
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    line-height: 1.5;
    color: #5a5346;
}

/* [C][D][E] section rhythm */
.today__games,
.today__events,
.today__specials {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1rem) 0;
}
.today__section-heading {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--x-large, 1.75rem);
    margin: 0 0 var(--spacing-lg, 1rem);
    color: var(--ssb-ink, #0F0F0F);
}
.today__events-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg, 1rem);
}
.today__specials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-lg, 1rem);
}

/* [F] utility footer — tan ground (may carry has-butcher-texture). */
.today__utility {
    margin: var(--spacing-3xl, 3rem) auto 0;
    max-width: none;
    background-color: var(--ssb-tan, #c2a488);
    color: var(--ssb-ink, #0F0F0F);
    padding: var(--spacing-2xl, 2rem) var(--spacing-lg, 1rem);
}
.today__utility-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-xl, 1.5rem);
}
.today__utility-label {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    margin: 0 0 0.4em;
}
.today__utility-value {
    margin: 0 0 0.3em;
    font-size: 1rem;
}
.today__utility-links {
    max-width: 1100px;
    margin: var(--spacing-xl, 1.5rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg, 1rem);
    border-top: 1px solid var(--ssb-rule-strong, rgba(194,164,136,0.6));
    padding-top: var(--spacing-lg, 1rem);
}
.today__utility-links a {
    color: var(--ssb-ink, #0F0F0F);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 1rem;
}
.today__utility-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 850px) {
    .today__open { padding-top: var(--spacing-2xl, 2rem); }
    .today__games,
    .today__events,
    .today__specials { padding-top: var(--spacing-2xl, 2rem); }
}


/* ===========================================================================
   BUSINESS GIFTING — /business-gifting/ (template-business-gifting.php)
   ───────────────────────────────────────────────────────────────────────────
   The B2B/corporate-gifting ("FBB") marketing front door. RE-GROUNDED on the
   canonical section system (.section / .section--cream/-ink/-tan / --split /
   --band) + shared components (.legacy__media, .package-card incl. its native
   media well + flag, .info-grid card, .status-tile, .ssb-form-box, shared
   .faq-section) + the generic .inline-link / .numbered-steps / .stat-band
   utilities minted near the SHARED UTILITIES block above.

   The `.business-gifting` page-root class is now ONLY a namespace for: the
   surface token overrides, the wavy-seam neighbor edge-colors, and a handful
   of thin page hooks (.biz-gifting-hero, the eyebrow red-divider, the package
   price recolor, the billing tail, the carousel breakpoint). The 40-class
   `.business-gifting__*` block was retired 2026-06-05 — templates emit
   canonical classes now.

   Color budget = exactly 3 red beats: the hero eyebrow divider, the proof
   "+" mark, and the package price amount. Nothing else is red.

   Contrast (verified by design):
     - on INK  → cream/white text only; red only as the non-text "+" accent.
     - on TAN  → ink/dark text only (no cream, no red — both fail on tan).
     - red TEXT only on cream/white, and only the deep --ssb-red-deep.
   =========================================================================== */
.business-gifting {
    --ssb-ink: #0F0F0F;
    --ssb-cream: #EFE2C7;
    --ssb-tan: #c2a488;
    --ssb-tan-deep: #A88857;
    --ssb-red: var(--wp--preset--color--accent, #d32f2f);
    --ssb-red-deep: #A02523;
    --ssb-rule: rgba(194, 164, 136, 0.35);
    --bg-ground: #F7F1E6;

    /* One documented body-copy size for the page's Averia paragraphs — replaces
       the five scattered 1.0625rem magic numbers. ~17px. */
    --bg-body: 1.0625rem;

    background: var(--bg-ground);
    color: var(--ssb-ink);
}

/* Inline-link surface contracts. The generic .inline-link defaults to ink
   (correct on cream + on tan). On the INK volume band the third-CTA link uses
   `.inline-link--inverse` directly in markup, so no scoped rule is needed
   there. Templates emit canonical `.inline-link`. */

/* ── 1. HERO (cream, split) — thin hooks on the section system ────────────── */
/* Hero re-grounds on `.section.section--cream.section--split`; only the
   oversized title / italic sub / wider gap / returning-line are page hooks. */
.biz-gifting-hero .section__inner {
    /* Keep the generous hero gutter feel the design called for. */
    column-gap: clamp(2rem, 6vw, 5.5rem);
}
.biz-gifting-hero {
    /* Extra vertical breathing room above/below the hero (the design's
       roomier hero rhythm; keeps the section-system y-padding as the floor). */
    padding-block: clamp(48px, 7vw, 88px);
}
/* The page's first red beat — the hero eyebrow divider only (text stays
   inherited ink at the eyebrow's default opacity). */
.biz-gifting-hero .eyebrow__divider {
    background-color: var(--ssb-red-deep);
    opacity: 1;
}
.biz-gifting-hero__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    /* Mobile floor RAISED 34→38px per the design pass. */
    font-size: clamp(38px, 5.2vw, 60px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ssb-ink);
}
.biz-gifting-hero__sub {
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    max-width: 42ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--ssb-ink);
    opacity: 0.85;
}
.biz-gifting-hero__returning {
    margin: 1rem 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--bg-body);
    line-height: 1.5;
    color: var(--ssb-ink);
    opacity: 0.85;
}
/* In the split copy column the CTA row reads left (the canonical .section__cta
   centers; that's for centered band sections, not a split column). */
.biz-gifting-hero .section__cta {
    justify-content: flex-start;
}
@media (max-width: 781px) {
    /* On the stacked split, center the hero copy column. */
    .biz-gifting-hero .section__head { align-items: center; text-align: center; }
    .biz-gifting-hero__sub { margin-inline: auto; }
    .biz-gifting-hero .section__cta { justify-content: center; }
    .biz-gifting-hero__returning { text-align: center; }
}

/* ── 2. PROOF BAND (ink, band) — uses generic .stat-band ──────────────────── */
/* No page hooks needed: `.section.section--ink.section--band` supplies the
   ground + centered narrow inner; `.stat-band` supplies the figure/label/
   micro/tiles. The "+" mark inherits the generic --ssb-red-deep default. */

/* ── 3. PROCESS (tan + butcher) — uses generic .numbered-steps ────────────── */
/* `.section.section--tan.has-butcher-texture` supplies ground + grain; the
   centered `.section__head` and `.numbered-steps` are shared. The text-link
   below uses `.inline-link` (default ink — correct on tan). No -edge-top here:
   the proof band above owns the seam into this section. */

/* ── 4. PACKAGES + BILLING (cream) ────────────────────────────────────────── */
/* Left-aligned head per art direction (funnel sections left). The 3-up
   .package-card grid uses the component's native media well + flag. */
.biz-gifting-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
}
/* The package price amount carries the page's third (final) red beat. */
.business-gifting .package-card__price-amount {
    color: var(--ssb-red-deep);
}
/* Closing line under the grid — left-aligned (funnel section reads left). */
.biz-gifting-packages__closing {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    max-width: 60ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: var(--bg-body);
    line-height: 1.5;
    color: var(--ssb-ink);
}
/* The packages + billing links use `.section__cta` for the ≥44px row, but this
   funnel section reads LEFT — override the canonical centered justify. The
   closing-line CTA also tightens its top margin (the closing line already
   spaced it). */
.biz-gifting-packages .section__cta {
    justify-content: flex-start;
    margin-top: 0;
}
@media (max-width: 781px) {
    /* Mobile scroll-snap carousel (breakpoint moved 850→781px to match the
       section-system stack point). */
    .biz-gifting-packages__grid {
        grid-auto-flow: column;
        grid-auto-columns: minmax(80%, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .biz-gifting-packages__grid > .package-card { scroll-snap-align: start; }
}

/* Merged billing tail — sits inside the packages section under the grid +
   closing line. Bare hairline-divided rows (NO card borders/fills/shadows),
   3-up → stack @781px. */
.biz-gifting-billing {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--hairline-ink);
    padding-top: clamp(2rem, 4vw, 3rem);
}
.biz-gifting-billing__crosshead {
    /* Eyebrow-style crosshead, left-aligned to match the section head. */
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    justify-content: flex-start;
    text-align: left;
}
.biz-gifting-billing__rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Hairline rules BETWEEN the cards (vertical on desktop) via column gap +
       a divider drawn on each card's leading edge below. */
    gap: 0;
}
.biz-gifting-billing .info-grid__card {
    padding: 0 clamp(1.25rem, 2.5vw, 2rem);
    color: var(--ssb-ink);
}
.biz-gifting-billing__rows > .info-grid__card + .info-grid__card {
    border-left: 1px solid var(--hairline-ink);
}
.biz-gifting-billing .info-grid__label {
    color: var(--ssb-ink);
}
.biz-gifting-billing .info-grid__body {
    color: var(--ssb-ink);
    opacity: 0.82;
    max-width: none;
    /* Billing bodies must NOT inherit info-grid's 14.5px — keep ≥16px. */
    font-size: var(--bg-body);
    font-style: italic;
}
.biz-gifting-billing__textlink-row {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}
@media (max-width: 781px) {
    .biz-gifting-billing__rows {
        grid-template-columns: 1fr;
    }
    .biz-gifting-billing .info-grid__card {
        padding: clamp(1.25rem, 4vw, 1.5rem) 0;
    }
    /* Stacked: hairline rules become horizontal dividers between rows. */
    .biz-gifting-billing__rows > .info-grid__card + .info-grid__card {
        border-left: 0;
        border-top: 1px solid var(--hairline-ink);
    }
}

/* ── 5. FAQ — shared .faq-section (tan + butcher + wavy). Declare the
   neighbor edge colors so the wavy seams paint (prev = cream packages,
   next = cream signup — both cream). ── */
.business-gifting .faq-section {
    --prev-edge-color: var(--ssb-cream);
    --next-edge-color: var(--ssb-cream);
}

/* ── 6. SIGNUP (cream, form) — wraps the shared .ssb-form-box ──────────────── */
.biz-gifting-signup .section__inner {
    max-width: 760px;
}
.biz-gifting-signup__returning {
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
    text-align: center;
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--bg-body);
    line-height: 1.5;
    color: var(--ssb-ink);
    opacity: 0.85;
}

/* ── 7. VOLUME / TALK BAND (ink, band) — section system + .inline-link──────── */
/* `.section.section--ink.section--band` supplies the centered narrow band;
   the three-CTA cascade (primary cream-on-ink, ghost, inverse text-link) is
   markup. The volume title uses the canonical `.section__title`. */
.biz-gifting-volume__textlink-row {
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

/* =====================================================================
   Stacked-card page transition (food menu <-> bar menu only)
   ---------------------------------------------------------------------
   Companion CSS for assets/js/transitions.js — the KKB stacked-card
   resource. These two elements are rendered site-wide by header.php
   (inside the data-barba="wrapper") so the markup contract is stable,
   but they sit dormant (opacity:0, pointer-events:none) on every page
   except the menu CPT where Barba is enqueued.

   The middle layer is kept in the DOM and in the GSAP timeline (the
   three-card scale/drop choreography in transitions.js still targets
   it via gsap.set / gsap.to) so the KKB motion stays structurally
   intact — we just zero out the paint. The KKB resource explicitly
   sanctions customizing this layer ("change the color, add text, or
   even use a background image or video"); making it transparent is a
   documented exit. Earlier passes filled it with the SSB deep-red,
   which bled through gaps in the timing and tinted unrelated sections
   of the active menu mid-swap. Motion preserved, brand-color sheet
   removed.

   Transition-input lock
   ---------------------
   `body.is-transitioning` is toggled from transitions.js around every
   Barba leave (added in beforeLeave + as a leave-timeline onComplete
   safety net) and cleared in afterEnter. While it's set we freeze
   scroll on <body> and kill pointer events on the Barba wrapper —
   a mid-animation scroll or click otherwise corrupts the GSAP state
   and leaves leftover artifacts overlaying the new container.
   ===================================================================== */
.transition {
    z-index: 2;
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: clip;
}

.transition__middle {
    opacity: 0;
    background-color: transparent; /* KKB middle layer kept in DOM + timeline (see note above); paint disabled so the brand-color sheet can't bleed through gaps in the choreography. */
    position: fixed;
    inset: 0;
}

body.is-transitioning {
    overflow: hidden;
}

body.is-transitioning [data-barba="wrapper"] {
    pointer-events: none;
}

/* During a Barba swap, the JS-created .page-transition__wrapper holds the
   outgoing menu page in position:fixed. Without its own background, sections
   that rely on body.single-menu's dark ground (e.g. .menu-intro) go
   see-through and reveal the incoming page underneath. Scoping to
   body.single-menu keeps this lock to the only template currently using
   Barba (food/bar menu). If Barba expands site-wide later, this needs to
   become per-page-theme. */
body.single-menu .page-transition__wrapper {
    background-color: var(--wp--preset--color--bg-darker, #1a1a1a);
}


/* ==========================================================================
   Section inner width modifier — generic utility
   --------------------------------------------------------------------------
   `.section__inner--narrow` clamps to --ssb-section-max-narrow (900px).
   Authored as a generic utility (no surface binding) so any section that
   wants a narrow column (single-thread reading, dense prose, form-bracketed
   surfaces) can reach for it without inventing a per-surface override.
   First consumer: /jobs/ (hero, benefits, positions, application).
   ========================================================================== */
.section__inner--narrow {
    max-width: var(--ssb-section-max-narrow);
}


/* ==========================================================================
   /jobs/ — Careers page
   --------------------------------------------------------------------------
   Plugin (ssb-careers) owns the data + the Gravity Form. Theme owns the
   rendering. The hero composition (`.careers-hero__title/__line/__accent`)
   is the singular brand-defining moment per art-director Phase 2 and is
   intentionally page-bound; everything else uses the generic `.section.*`
   archetypes + reusable component classes (`.benefit-stack`, `.positions-
   list`). See template-parts/careers/*.php.
   ========================================================================== */

/* ── Hero composition (page-bound EXCEPTION; see template hero.php header) */
.careers-hero {
    /* The hero is light-on-cream with no eyebrow — hard cut to the line. */
}
/* Mobile: single-column stack, narrow inner so the headline controls width.
   At ≥850px the inner becomes a 12-col grid and the head occupies cols
   1–7 — left-weighted, with cols 8–12 deliberately empty (the negative
   space IS the design per art-director Phase 2). */
.careers-hero__inner {
    max-width: var(--ssb-section-max-narrow);
}
@media (min-width: 850px) {
    .careers-hero__inner {
        max-width: var(--ssb-section-max);
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: clamp(1rem, 2vw, 1.5rem);
    }
    .careers-hero .section__head {
        grid-column: 1 / span 7;
    }
    .careers-hero__rule {
        grid-column: 1 / -1;
    }
}
.careers-hero .section__head {
    /* Override: hero deliberately omits the head's bottom margin so the
       opener sits tight under the title and the hairline rule reads as a
       single closing beat. */
    margin-bottom: 0;
}
.careers-hero__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 0.95;
    /* Positive letter-spacing opens Bowlby SC's caps for editorial breathing
       (art-director Phase 2 spec). Negative would tighten what's already
       chunky display — wrong register here. */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ssb-ink);
}
.careers-hero__line {
    display: block;
}
.careers-hero__accent {
    color: var(--ssb-red, #d32f2f);
}
.careers-hero__opener {
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    max-width: 36ch;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.55;
    color: var(--ssb-ink);
    opacity: 0.8;
}
.careers-hero__rule {
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.18);
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
    max-width: var(--ssb-section-max-narrow);
}

/* ── Benefit stack (reusable component) ───────────────────────────────── */
.benefit-stack {
    list-style: none;
    margin: 0;
    padding: 0;
}
.benefit-stack__row {
    padding: clamp(0.875rem, 1.6vw, 1.25rem) 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.14);
}
.benefit-stack__row:last-child {
    border-bottom: 0;
}
.benefit-stack__statement {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.5;
    color: inherit;
}
.benefit-stack__note {
    margin: 0.25rem 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: 1.5;
    color: inherit;
    opacity: 0.72;
}

/* ── Disclosure section ───────────────────────────────────────────────── */
/* The disclosure body uses the generic `.section__body--statement` modifier
   (see SECTION SYSTEM block above). The only remaining careers-scoped rule
   is the inner alignment — the ink intermission is centered + comfortably
   narrow so the paragraph reads as a single direct beat, not a banner. */
.careers-disclosure .section__inner {
    text-align: center;
}

/* ── Positions list (reusable component) ──────────────────────────────── */
.positions-list {
    margin: 0;
    padding: 0;
}
.positions-list__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    align-items: baseline;
    min-height: 72px;
    padding: clamp(0.875rem, 1.6vw, 1.25rem) 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.14);
}
.positions-list__row:last-child {
    border-bottom: 0;
}
@media (min-width: 850px) {
    .positions-list__row {
        grid-template-columns: minmax(180px, 1fr) 2fr;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}
.positions-list__title {
    margin: 0;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: inherit;
}
.positions-list__desc {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    /* `--large` floor (~18px) keeps this primary info above the 16px refusal
       on mobile (375px viewport). `--medium` clamped to ~14.1px there. */
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.55;
    color: inherit;
    opacity: 0.85;
}

/* (No SplitText pre-init CSS needed — `gsap.from()` in careers-hero.js
   snapshots the final state on the same tick as it applies the start state,
   eliminating the flash-of-visible-then-hidden pop without a CSS pre-hide.
   The dead `opacity: 1` rule that lived here was a no-op anyway and was
   removed in 1.1.193.) */

/* ============================================================
   HISTORY PAGE (/history — template-history.php)        [1.1.198]
   Scoped additions only. Reuses the section system (.section +
   surface modifiers + .section--split[--reverse]), .scroll-video,
   .legacy__media (cream-ring video/photo tile), .section__decor
   (year-stamp + bull watermarks), .eyebrow, .btn-box, .heritage__read.
   Font stacks are written literally to match the rest of this file
   (there are no --ssb-font-* tokens):
     display = "Bowlby One SC","Bowlby One","Impact",sans-serif
     body    = "Averia Libre",Georgia,serif
   ============================================================ */

/* Long-form reading measure (approved scoped exception — .section__intro is
   italic/narrow; the History narrative is upright Averia at a ~60ch measure). */
.history__body {
    font-family: "Averia Libre", Georgia, serif;
    font-style: normal;
    max-width: 60ch;
    line-height: 1.7;
}
.history__body p { margin: 0 0 1.1em; }
.history__body p:last-child { margin-bottom: 0; }
.history__body .large { font-size: clamp(1.1rem, 2vw, 1.35rem); }

/* --- S1 masthead -------------------------------------------------------- */
.history-masthead {
    display: grid;
    min-height: 70svh;
    align-items: end;
    overflow: clip;
}
@media (min-width: 769px) {
    .history-masthead { min-height: min(82svh, 680px); }
}
.history-masthead__bg,
.history-masthead__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.history-masthead__bg {
    background-size: cover;
    background-position: center;
}
/* Bottom-weighted scrim: heaviest at the lower-left where the copy sits. */
.history-masthead__scrim {
    background: linear-gradient(
        0deg,
        rgba(15, 15, 15, 0.88) 0%,
        rgba(15, 15, 15, 0.55) 45%,
        rgba(15, 15, 15, 0.20) 100%
    );
}
.history-masthead__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(2rem, 6vw, 4rem);
}
.history-masthead__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(2.25rem, 9vw, 4.25rem);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ssb-cream);
    margin: 0 0 1rem;
}
.history-masthead__deck {
    font-family: "Averia Libre", Georgia, serif;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    color: var(--ssb-cream);
    max-width: 30ch;
    line-height: 1.4;
    margin: 0;
}
@media (max-width: 768px) {
    .history-masthead { text-align: center; }
    .history-masthead__deck { margin-inline: auto; }
}

/* --- Year-stamp watermark tuning (S2/S5/S6) ----------------------------
   The stamps are .section__decor--mask uses of the hand-drawn
   year-stamp-{53,89,today}.svg ornaments (see the Section background
   decoration block for the utility). Sections carry has-section-decor for
   containment. 53/89 anchor to the COPY COLUMN (the span lives inside
   .section__copy, which is the positioned ancestor) so each stamp sits
   over its own chapter's text side, exactly where the old Bowlby digits
   sat; Today is a direct section child on the tan close.
   Opacity: ink @ 0.07 on cream; 0.09 on tan (lower contrast ground needs
   +2 points to read at the same weight). Negative offset-y bleeds the
   stamp off the top edge — watermark, not graphic. */
.history-chapter .section__decor {
    --decor-size: clamp(8rem, 22vw, 16rem);
    --decor-size: clamp(30rem, 40vw, 30rem);
    --decor-offset-y: calc(var(--decor-size) / -8);
}
.history-today .section__decor {
    --decor-size: clamp(14rem, 40vw, 30rem);
    --decor-size: clamp(35rem, 70vw, 70rem);
    --decor-opacity: 0.09;
    --decor-offset-y: calc(var(--decor-size) / -16);
}
@media (max-width: 768px) {
    .history-chapter .section__decor {
        --decor-size: clamp(20rem, 28vw, 8rem);
        --decor-opacity: 0.05;
    }
    /* The wide Today lockup needs more width than the square-stamp default
       to stay legible-as-ornament; keep the on-tan +2 opacity points. */
    .history-today .section__decor {
        --decor-size: clamp(7rem, 55vw, 14rem);
        --decor-size: clamp(35rem, 70vw, 70rem);
        --decor-opacity: 0.07;
    }
}
/* Keep the copy above the watermark in the split chapters and on Today. */
.history-chapter .section__copy { position: relative; z-index: 1; }
.history-today .section__inner { position: relative; z-index: 1; }
.history-chapter__photo img { display: block; width: 100%; height: auto; }

/* --- S3 The Red Brat (red-deep ground, the climax) --------------------- */
.history-redbrat {
    background: var(--ssb-red-deep);
    color: var(--ssb-cream);
    padding-block: clamp(4rem, 8vw, 7rem);
    text-align: center;
}
.history-redbrat__inner { max-width: 760px; }
.history-redbrat__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ssb-cream);
    margin: 0 0 0.5rem;
}
.history-redbrat__sub {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--ssb-cream);
    opacity: 0.92;
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
/* Cutout PNG: soft shadow, no radius (it has its own silhouette). */
.history-redbrat__hero {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5));
}
.history-redbrat__provenance {
    max-width: 56ch;
    margin-inline: auto;
    text-align: center;
    color: var(--ssb-cream);
}

.history-redbrat__provenance p:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* --- S4 "why it's red" + life-size brat reveal (ink) -------------------- */
.history-twoup__why {
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}
/* The brats use the SHARED brat-reveal component (.brat-reveal-section +
   .life-size-red-brat / .life-size-white-brat) — identical forced-life-size +
   overflow + GSAP scroll animation to the front-page heritage section. The
   figures bleed past center and clip, so they read life-size rather than
   scaling down on small screens. The component lives full-bleed (sibling of
   .section__inner) because its centering math is viewport-relative; only the
   section clip + top spacing are scoped here. */
.history-twoup { overflow: clip; }
.history-twoup .brat-reveal-section {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    /* Full-bleed to the viewport. The shared brat-reveal component positions
       each 620px figure with margin: calc(50vw - 620px), which assumes the
       columns span a true 100vw container (as on the front-page .heritage,
       which has zero horizontal padding). Inside .section the --ssb-section-x
       padding insets the columns, so the figures overshoot center and the two
       brats overlap (~32px). Cancel the section padding so the columns are a
       real 50vw and the brats meet exactly at center, matching the front page.
       calc(50% - 50vw) resolves to -(--ssb-section-x) at any viewport width. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --- S6 today (forward photo/copy split: media left, copy right) ------
   Converted from the old centered text-only treatment. The left-align of
   head/body is handled by the .section--split system; the old
   .history-today__body centering rule is removed. The exterior is the
   page's one MODERN color photo, so it carries the 16px card radius
   (.legacy__media) — distinct from the 4px archival-print mat. */
.history-today__photo {
    aspect-ratio: 4 / 5;
    /* .legacy__media already supplies radius (16px) + overflow clip; on TAN
       its cream inset ring is near-invisible, so re-state a hairline-ink
       ring + lift here. */
    box-shadow:
        inset 0 0 0 1px var(--hairline-ink),
        0 18px 48px -24px rgba(0, 0, 0, 0.35);
}
.history-today__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* --- Archival print (REUSABLE component; used in S2 + S3) -------------
   A matted black-and-white archival print object: a cream mat with a wide
   bottom "foot" to hold an italic caption, a near-square 4px radius (a
   physical print, deliberately NOT the 16px card radius — the distinction
   signals archival-vs-modern), and a warm duotone so the B&W reads warm
   rather than cold. Default (on-red) values below; surface overrides (the
   gentler on-cream duotone for S2) layer on top. No tack/pin ornament. */
.archival-print {
    margin: 0;
    background: var(--ssb-cream-soft);
    padding: clamp(10px, 1.6vw, 16px);
    padding-bottom: clamp(28px, 4vw, 40px);
    border-radius: var(--radius-sm);
    box-shadow:
        0 18px 40px -20px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35);
}
.archival-print img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    /* on-RED duotone (warms the cold B&W) */
    filter: grayscale(1) sepia(0.32) contrast(1.04) brightness(1.02);
}
.archival-print__cap {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    /* Sub-16px is the deliberate decorative-caption exception. */
    font-size: 0.85rem;
    color: var(--ssb-ink);
    opacity: 0.8;
    margin-top: var(--spacing-xs, 0.5rem);
    text-align: center;
}
.archival-print--tilt {
    transform: rotate(-1.5deg);
}

/* --- S2 media stack: small interior print overlapping the founders'
   video. The print is a SIBLING of the (overflow-hidden) video tile, so
   the overlap isn't clipped; the negative bleed is contained by the
   .history-chapter overflow:clip. ----------------------------------------- */
.media-stack {
    position: relative;
}
.media-stack__primary {
    position: relative;
    z-index: 1;
}
.media-stack__inset {
    position: absolute;
    z-index: 2;
    left: clamp(-1.25rem, -2vw, -0.5rem);
    bottom: clamp(-1.5rem, -2.5vw, -0.75rem);
    width: clamp(150px, 18vw, 210px); /* << 600px native — never upscales */
    margin: 0;
}
/* On the CREAM ground: gentler shadow + a hairline-ink ring so the cream
   mat separates from the cream surface; gentler duotone too. */
.media-stack__inset.archival-print {
    box-shadow:
        inset 0 0 0 1px var(--hairline-ink),
        0 6px 16px -6px rgba(15, 15, 15, 0.4);
}
.media-stack__inset .archival-print__cap {
    color: var(--ssb-ink);
}
.media-stack__inset img {
    filter: grayscale(1) sepia(0.2) contrast(1.03) brightness(1.02);
}

/* --- S3 archive callout: matted grill print + photo-donation invitation,
   IN FLOW as the last child of .history-redbrat__inner (never absolute —
   avoids the brat hero drop-shadow + the wavy bottom seam). The grill
   print sits on the red ground as FOREGROUND content (a matted photo), so
   the cream mat is correct — this is NOT the decorative-darker-than-bg
   case (that's for watermarks/ornaments). --------------------------------- */
.archive-callout {
    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
    max-width: 720px;
    display: grid;
    grid-template-columns: clamp(260px, 32vw, 360px) 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: center;
    text-align: left;
}
.archive-callout__print {
    margin: 0;
}
.archive-callout__line {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    line-height: 1.4;
    color: var(--ssb-cream);
    max-width: 22ch;
    margin: 0 0 var(--spacing-md, 0.75rem);
}
/* Quiet fineprint cue — a non-interactive span, NOT an affordance. */
.archive-callout__cue {
    display: inline-block;
    font-family: "Averia Libre", Georgia, serif;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ssb-cream);
    opacity: 0.7;
}

/* --- /history photo-pass mobile (single column) ------------------------ */
@media (max-width: 781px) {
    /* S2: the overlap math breaks in one column — drop the inset to static
       below the video, centered, with breathing room before the copy. */
    .history-chapter .section__media {
        margin-bottom: var(--spacing-2xl);
    }
    .media-stack__inset {
        position: static;
        width: clamp(160px, 60vw, 240px);
        margin: var(--spacing-lg) auto 0;
    }
    /* S3: stack the callout, center it, and drop the tilt (0deg avoids edge
       overflow on narrow screens). */
    .archive-callout {
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 440px;
    }
    .archive-callout__print {
        max-width: 70vw;
        margin-inline: auto;
    }
    .archive-callout__print.archival-print--tilt {
        transform: none;
    }
    .archive-callout__line {
        margin-inline: auto;
    }
    /* S6: forward-split drops the copy lower on mobile, into the zone of the
       fixed bottom nav toggle. Add clearance so the last line never sits under
       it. Pads the copy column only — the section's wavy ::after seam is
       unaffected (it draws on the section, not this inner column). */
    #today .section__copy {
        padding-bottom: var(--spacing-2xl);
    }
}

/* --- S7 close --------------------------------------------------------- */
.history-close { text-align: center; }
.history-close .section__inner {
    position: relative;
    z-index: 1;
    max-width: var(--ssb-section-max-narrow);
}
.history-close__line {
    font-family: "Averia Libre", Georgia, serif;
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    color: var(--ssb-cream);
    max-width: 46ch;
    margin: var(--spacing-lg) auto clamp(1.5rem, 3vw, 2rem);
    line-height: 1.5;
}
.history-close__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
}
/* The bull watermark inside the ink close is a .section__decor--img use,
   tuned by the shared `.legacy / .history-close` rule next to the .legacy
   band CSS. The section carries has-section-decor for containment. */


/* ==========================================================================
   LEGAL / POLICY DOCS (.doc-*)  — Privacy, Terms, Accessibility   [1.1.264]
   --------------------------------------------------------------------------
   The deliberately quietest surface in the system. ONE shared archetype for
   every long-form policy/legal/utility document: a composed cream page whose
   craft is subtraction — two typefaces, three hairlines, one red link color,
   and a lot of empty paper. Reuses .section/.section--cream, .eyebrow,
   .inline-link, .info-grid, .screen-reader-text/.skip-link, --hairline-ink,
   --spacing-*. Generalizes the .history__body reading-measure exception into
   a page-neutral .doc-body (NOT bound to History).

   Hard refusals (design-consultant, 2026-06-07): no Imperial Script / Gabriela
   / UnifrakturCook, no GSAP/ScrollTrigger/SplitText, no butcher texture, no
   torn/wavy seams, no .section__decor watermark, no bordered cards. Bowlby is
   spent on the H1 ONCE; in-document headings are Averia 700. Prose links and
   the focus ring are the only red. The empty right margin is the design — do
   not fill it with a sidebar TOC, decor, or pull-quotes.

   Naming note: the footer's fineprint bar already owns `.legal-*`
   (.legal-microbar__*, .site-footer__legal) on a DARK ground — this cream
   document family is `.doc-*` precisely to avoid cross-contamination.
   Font stacks written literally (no --ssb-font-* tokens exist):
     display = "Bowlby One SC","Bowlby One","Impact",sans-serif
     body    = "Averia Libre",Georgia,serif
   ========================================================================== */

/* ---- Masthead: quiet document header, INSIDE the .section system (not a
   hero — a legal doc opens with a composed title, not a campaign). --------- */
.doc-masthead__inner,
.doc-body__inner {
    /* Align masthead + body to one reading column; the generous right void
       is intentional. */
    max-width: 68ch;
    margin-inline: 0;
}
.doc-masthead__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 7vw, 3.25rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ssb-ink);
    margin: 0 0 var(--spacing-lg);
}
.doc-masthead__deck {
    font-family: "Averia Libre", Georgia, serif;
    font-style: normal;
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    line-height: 1.4;
    max-width: 46ch;
    color: var(--ssb-ink);
    opacity: 0.85;
    margin: 0;
}
.doc-stamp {
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssb-ink); /* tan fails contrast on cream — ink stamp, tan reserved for the rule */
    margin: var(--spacing-xl) 0 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--hairline-ink);
}
.doc-stamp time { font-weight: 700; }

/* ── Form Feature template ─────────────────────────────────────────────────
   Reusable minimal-content "page title + single Gravity Form" page
   (template-form-feature.php). Composed from existing patterns — the
   .doc-masthead title on the 68ch left column, then the canonical .ssb-form-box
   centered in a .section__inner--narrow (900px) column, all on ONE continuous
   cream sheet (the scale + alignment offset IS the composition — design spec,
   design-consultant + art-director, 2026-06-11). The masthead, form box, and
   eyebrow all reuse existing classes; the ONLY net-new craft is collapsing the
   seam between the two cream sections so a short title+form page doesn't float
   in a too-tall band: full section padding above the title and below the box,
   a controlled 3rem gap between the masthead and the box. */
.form-feature__masthead { padding-bottom: 0; }
.form-feature__form-section { padding-top: var(--spacing-3xl); }
/* With padding-bottom:0, the masthead's last child (the title when there's no
   deck, or the last Gutenberg block in the hide-title state) would let its
   bottom margin escape and reveal the body bg as a gray seam between the two
   cream sections. Zero that trailing margin so the cream stays continuous —
   the 3rem gap to the form box comes entirely from the form-section padding. */
.form-feature__masthead .doc-masthead__inner > :last-child { margin-bottom: 0; }

/* ---- Table of contents: a static jump-list (NOT a sticky sidebar — the site
   refuses fixed/sticky chrome). Lives above the prose. --------------------- */
.doc-toc {
    max-width: 68ch;
    margin: 0 0 var(--spacing-3xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--hairline-ink);
}
.doc-toc__title {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.7;
    color: var(--ssb-ink);
    margin: 0 0 var(--spacing-md);
}
.doc-toc__list {
    margin: 0;
    padding-left: 1.4em;
    columns: 2;
    column-gap: var(--spacing-2xl);
    list-style: decimal;
}
.doc-toc__list li {
    margin-bottom: var(--spacing-sm);
    break-inside: avoid;
}
.doc-toc__list a {
    font-family: "Averia Libre", Georgia, serif;
    font-size: 1rem;
    color: var(--ssb-ink);
    text-decoration: none;
    text-underline-offset: 3px;
    display: inline-block;
    padding: 6px 0;
}
.doc-toc__list a:hover,
.doc-toc__list a:focus-visible {
    text-decoration: underline;
    color: var(--ssb-red-deep);
}

/* ---- Body: the generalized long-form reading measure (Averia upright, 1.7,
   ~62ch). The History page proved this register; this is its page-neutral
   home. ------------------------------------------------------------------- */
.doc-body {
    font-family: "Averia Libre", Georgia, serif;
    font-style: normal;
    max-width: 62ch;
    line-height: 1.7;
    color: var(--ssb-ink);
    font-size: var(--wp--preset--font-size--medium, 1rem);
}
.doc-body h2 {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    line-height: 1.2;
    color: var(--ssb-ink);
    margin: var(--spacing-3xl) 0 var(--spacing-lg);
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}
.doc-body > h2:first-child { margin-top: 0; }
.doc-body h3 {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium, 1rem);
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--ssb-ink);
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}
.doc-body p { margin: 0 0 1.1em; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body ul,
.doc-body ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
    line-height: 1.7;
}
.doc-body ul { list-style: disc; }
.doc-body ol { list-style: decimal; }
.doc-body li { margin-bottom: 0.5em; }
.doc-body li :is(ul, ol) { margin-block: 0.4em; }
.doc-body a {
    color: var(--ssb-red-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.doc-body a:hover,
.doc-body a:focus-visible { text-decoration-thickness: 2.5px; }

/* ---- Callout: contact / "exercise your rights" / conformance — hairline-
   bounded, NOT a bordered card. One primary action (.inline-link) per block. */
.doc-callout {
    max-width: 62ch;
    margin: var(--spacing-2xl) 0;
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--hairline-ink);
    border-bottom: 1px solid var(--hairline-ink);
}
.doc-callout__label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-size: var(--wp--preset--font-size--tiny, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ssb-ink);
    margin: 0 0 var(--spacing-md);
}
.doc-callout p:last-child { margin-bottom: 0; }

/* Defined terms — semantic <dl>, bold term over indented definition, no box. */
.doc-deflist { margin: 0 0 1.1em; }
.doc-deflist dt { font-weight: 700; }
.doc-deflist dd { margin: 0 0 var(--spacing-md) 0; }

/* ---- Anchor-jump affordance: a left red tick orients the jumped-to section
   without relying on color alone (the heading also shifts into view). The
   Accessibility statement documents this behavior, so make it real. -------- */
.doc-body h2:target {
    box-shadow: -0.5rem 0 0 var(--ssb-red-deep);
}

/* ---- Focus + reduced motion --------------------------------------------- */
.doc-toc__list a:focus-visible,
.doc-body a:focus-visible,
.doc-callout a:focus-visible {
    outline: 2px solid var(--ssb-red-deep);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    html:has(.doc-body) { scroll-behavior: auto; }
}

/* ---- Mobile: TOC collapses to one column; everything else is intrinsically
   single-column already. -------------------------------------------------- */
@media (max-width: 781px) {
    .doc-toc__list { columns: 1; }
}


/* ==========================================================================
   MAY FEATURES — Feature card, grid, front-page edge, Day Drink hero
   --------------------------------------------------------------------------
   One card component (.feature-card) with three SOURCE states
   (--menu / --special / --bespoke) + a seasonal modifier driven by ONE
   custom prop (--feature-accent). Photo-forward, cream surface, 3px tan
   top-edge bar. NO red edge / live tint / on-now lozenge / pulse — that is
   deal grammar and is locked out of the feature card. Reuses shared tokens
   (.eyebrow, .btn-box, .info-grid, --spacing-*, --radius-*, --hairline-ink).
   ========================================================================== */

/* ---- Grid ---------------------------------------------------------------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    /* Content-driven: a lone card sits left-aligned, not stretched. */
    justify-content: start;
    align-items: start;
}

/* ---- Card shell ---------------------------------------------------------- */
.feature-card {
    /* The single seasonal hook — reassigned per .feature-card--season-*.
       Default = the tan brand primary (elevation-cue color). */
    --feature-accent: var(--wp--preset--color--primary, #c2a488);

    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ssb-cream);
    border-radius: var(--radius-card);
    /* 3px accent top-edge bar = the only elevation cue at rest (no box shadow,
       no border frame; hairlines only). */
    border-top: 3px solid var(--feature-accent);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / focus: subtle lift + project shadow tokens. NEVER a pulse. */
.feature-card:hover,
.feature-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 15, 15, 0.12);
}

/* Ring rendered on the card when the stretched link inside has focus. */
.feature-card:focus-within {
    outline: 2px solid var(--ssb-red-deep);
    outline-offset: 2px;
}

/* ---- Photo (photo-forward, ~55% of card height) ------------------------- */
.feature-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

.feature-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1); /* settle target — see motion block */
    transition: transform 0.48s ease;
}

/* ---- Recommendation tab (Averia Libre 700 italic, tracked) -------------- */
.feature-card__tab {
    position: absolute;
    left: var(--spacing-md, 0.75rem);
    bottom: -14px;            /* half-on the photo / half onto the body seam */
    z-index: 2;
    display: inline-block;
    padding: 4px 10px;
    background: var(--ssb-cream);
    border-radius: var(--radius-sm);
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1;
    /* Tab ink follows the seasonal accent's INK partner; default tan-deep. */
    color: var(--ssb-tan-deep);
    white-space: nowrap;
}

/* ---- Body --------------------------------------------------------------- */
.feature-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px var(--spacing-lg, 1rem) 26px; /* ~26px empty bottom */
    flex: 1 1 auto;
}

.feature-card__title {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 0.95;
    color: var(--ssb-ink);
    margin: 0;
}

.feature-card__rule {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--hairline-ink);
    margin: 4px 0;
}

.feature-card__desc {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(15, 15, 15, 0.85); /* ink @ .85 — ~16:1 on cream */
    max-width: 34ch;
    margin: 0;
}

/* Optional price — Bowlby, red-DEEP (AA on cream); never --ssb-red. */
.feature-card__price {
    font-family: "Bowlby One SC", Impact, sans-serif;
    font-size: 19px;
    color: var(--ssb-red-deep);
    margin: 4px 0 0;
}

/* ---- CTA ---------------------------------------------------------------- */
.feature-card__cta {
    margin-top: auto;
    padding-top: 12px;
    min-height: 44px;            /* >=44px hit area for the stretched link */
    display: flex;
    align-items: flex-end;
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ssb-red-deep);
}

/* Non-linking bespoke prompt — plain text, not a fake link. */
.feature-card__cta--static {
    color: var(--ssb-tan-deep);
    font-style: italic;
}

/* Stretched link — whole card is the click target. */
.feature-card__stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Suppress the link's own ring; the card draws the ring via :focus-within. */
.feature-card__stretch:focus-visible {
    outline: none;
}

/* ==========================================================================
   SOURCE STATES — same shell, framing differences only
   --menu     : deep-links into the menu page; price + name + short desc.
   --special  : DEFAULT re-skin; deal framing dropped. present_as==deal embeds
                the specials renderer (its own price-break markup) but gets NO
                live edge here.
   --bespoke  : own photo + own title/blurb; non-transactional prompt.
   ========================================================================== */
.feature-card--special .specials-item {
    /* Elevated special body sits inside the feature shell — strip any
       deal/live chrome the specials block would otherwise carry. */
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ==========================================================================
   SEASONAL DRESSING — ONE accent reassigned; nothing else changes.
   Strip the modifier → neutral, zero residue. No clip-art / emoji / bg / 2nd font.
   ========================================================================== */
.feature-card--season-autumn      { --feature-accent: var(--ssb-tan-deep); }
.feature-card--season-autumn      .feature-card__tab { color: var(--ssb-tan-deep); }

.feature-card--season-christmas   { --feature-accent: var(--ssb-red); }       /* bar */
.feature-card--season-christmas   .feature-card__tab { color: var(--ssb-red-deep); } /* tab ink (AA) */

.feature-card--season-st-patricks { --feature-accent: var(--ssb-seasonal-green); }
.feature-card--season-st-patricks .feature-card__tab { color: var(--ssb-seasonal-green); }

.feature-card--season-july-4th    { --feature-accent: var(--ssb-red); }       /* bar */
.feature-card--season-july-4th    .feature-card__tab { color: var(--ssb-ink); } /* ink tab */

/* ==========================================================================
   FRONT-PAGE COMPACT VARIANT — gold-edge Feature card in the info-grid.
   Gold "new" reads distinct from the specials card's red "on-now" edge.
   Gold pairs with INK text only (a11y); the icon is darker-than-surface.
   ========================================================================== */
.info-grid__card--feature {
    border-left: 3px solid var(--ssb-gold);
}
.info-grid__icon--feature {
    color: var(--ssb-tan-deep); /* darker-than-surface star, per SVG rule */
}

/* ==========================================================================
   /features INDEX — empty state. The surface itself is .section .section--cream
   + .feature-grid (no bespoke rules needed). Only the empty message needs type.
   ========================================================================== */
.features__empty {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    color: rgba(15, 15, 15, 0.7);
    max-width: 46ch;
}

/* ==========================================================================
   .text-link — global tertiary "text-link" tier in the primary/secondary/
   text-link CTA cascade (site default for 1-3 CTA rows). No global rule
   existed (only the page-scoped .business-gifting__textlink); referenced by
   the Day Drink hero's "See the full bar menu" CTA. Color inherits so it
   reads correctly on BOTH cream (ink/red-deep contexts) and ink grounds —
   the Day Drink hero sets cream context so this resolves to cream there.
   ========================================================================== */
.text-link {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    /* ≥44px tap target without bloating layout. */
    display: inline-block;
    padding: 11px 2px;
    line-height: 1.3;
}
.text-link:hover,
.text-link:focus-visible {
    text-decoration-thickness: 2px;
}
.text-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
/* A text link with a trailing directional caret (inline SVG, never a unicode
   arrow). Inline-flex so the caret sits centered on the text with a steady gap.
   Reusable — any `.text-link` wrapping a `.text-link__caret` opts in. */
.text-link:has(.text-link__caret) {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.text-link__caret { flex: 0 0 auto; }

/* ==========================================================================
   DAY DRINK HERO — hero-family variant, OUTSIDE the .section system.
   Ink ground, no bg photo / no scrim; the drink photo is the subject.
   Split >=781px: photo ~52% left, type ~48% right; stacks below. The ONE
   red moment = a single short underline tick. Reduced-motion fallback lives
   in the shared @media block at the foot of this section.
   ========================================================================== */
.day-drink-hero {
    position: relative;
    background: var(--ssb-ink);
    color: var(--ssb-cream);
    overflow: hidden;
    /* Optional faint top-center light-pool, low strength. */
    background-image: radial-gradient(
        60% 40% at 50% 0%,
        rgba(229, 200, 117, 0.06),
        transparent 70%
    );
}

.day-drink-hero__inner {
    display: flex;
    flex-direction: column;          /* stacks <781px: photo over type */
    gap: var(--spacing-xl);
    align-items: center;
    max-width: var(--ssb-section-max, 1200px);
    margin: 0 auto;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1rem);
    min-height: min(72vh, 640px);
}

.day-drink-hero__media {
    width: 100%;
    max-width: 520px;
}
.day-drink-hero__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    /* Full color, full opacity — no scrim, no organic shape on ink. */
}

.day-drink-hero__type {
    width: 100%;
    max-width: 46ch;
    text-align: center;
}

.day-drink-hero__eyebrow { color: var(--ssb-tan); }

.day-drink-hero__title {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 0.9;
    color: var(--ssb-cream);
    margin: 0.1em 0 0;
}

/* The ONE red moment — a single short underline tick (~64x4px). */
.day-drink-hero__tick {
    display: block;
    width: 64px;
    height: 4px;
    margin: 16px auto 20px;
    background: var(--ssb-red);
    border-radius: 2px;
    transform-origin: left center;   /* DrawSVG draws this last when available */
}

.day-drink-hero__desc {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(239, 226, 199, 0.92); /* cream @ .92 — ~16:1 on ink */
    margin: 0 auto;
}

/* Spec microline — tracked caps, tan (not gold); reinforces bar-only at a glance. */
.day-drink-hero__spec {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ssb-tan);
    margin: 18px 0 0;
}

.day-drink-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 0.75rem);
    margin-top: 24px;
}

/* Two-column split at >=781px: photo ~52% left, type ~48% right. */
@media (min-width: 781px) {
    .day-drink-hero__inner {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-3xl, 3rem);
    }
    .day-drink-hero__media { flex: 0 0 52%; max-width: none; }
    .day-drink-hero__type  { flex: 0 0 48%; text-align: center; }
    .day-drink-hero__desc  { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   DAY DRINK PAGE — sections below the hero (story / flavor / photo-wall /
   label-credit / social). These compose with the .section system; only two
   generic net-new components are introduced: .spec (a stat line on a contrast
   ground) and .photo-wall (a mixed-ratio masonry gallery). Both are reusable.
   Sections are visible at rest (no JS dependency); the hero owns the motion.
   ========================================================================== */

/* ── §2 Story: SEO prose on cream, faint dark rooster watermark ─────────── */
/* Watermark migrated 2026-06-06 to the shared `.section__decor--img` utility
   (this page's hand-rolled mark predated it; brightness(0) crush + bleed
   offsets now ride the utility's inline custom props in page-day-drink.php). */
.day-drink-story__body {
    max-width: 60ch;
    margin: 0 auto;
}
.day-drink-story__body p {
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.65;
    margin: 0 0 1em;
}
.day-drink-story__body p:last-child { margin-bottom: 0; }

/* §3 can sit over an autoplaying beach-video background with a dark radial
   vignette (mirrors the front-hero scrim) so the cream/gold text stays
   legible. --ink is the fallback ground before the video paints. */
.day-drink-spec-section.has-video-bg {
    isolation: isolate;
    overflow: hidden;
}
.day-drink-spec-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.day-drink-spec-section__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.day-drink-spec-section__scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(15, 15, 15, 0.62) 0%,
        rgba(15, 15, 15, 0.84) 62%,
        rgba(15, 15, 15, 0.95) 100%
    );
    pointer-events: none;
}
.day-drink-spec-section.has-video-bg .section__inner {
    position: relative;
    z-index: 1;
}
/* Text-over-video safety net: a soft shadow keeps the head, ingredient rows,
   and the 5% stat legible even over the brightest (sunny beach) frames. */
.day-drink-spec-section.has-video-bg .section__head,
.day-drink-spec-section.has-video-bg .spec {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* ── §3 Spec: hairline ingredient rows + the 5% stat (generic .spec) ────── */
.spec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5rem);
    max-width: 880px;
    margin: 0 auto;
}
.spec__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 360px;
    min-width: 0;
}
.spec__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(0.7rem, 2vw, 1.1rem) 0;
    border-top: 1px solid var(--ssb-rule, rgba(194, 164, 136, 0.35));
}
.spec__row:last-child {
    border-bottom: 1px solid var(--ssb-rule, rgba(194, 164, 136, 0.35));
}
.spec__name {
    font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 2.2vw, 1.5rem);
    line-height: 1;
    color: var(--ssb-cream);
}
.spec__note {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: rgba(239, 226, 199, 0.74);
    text-align: right;
    flex: none;
}
.spec__stat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    line-height: 0.9;
}
.spec__stat-value {
    font-family: "Bowlby One SC", "Bowlby One", Impact, sans-serif;
    font-size: clamp(3.5rem, 11vw, 7rem);
    color: var(--ssb-tan);
}
/* The "%" reads as a small mark beside the big figure (replaces an inline style). */
.spec__stat-value sup {
    font-size: 0.2em;
    vertical-align: super;
}
.spec__stat-label {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: var(--ssb-tan);
    margin-top: 0.45rem;
}
@media (max-width: 600px) {
    .spec { flex-direction: column; gap: 2.5rem; }
    .spec__list { flex-basis: auto; width: 100%; }
}

/* ── §4 Photo wall: mixed portrait/landscape lifestyle photos, CSS-columns masonry ── */
/* Columns preserve each photo's native ratio (no crop) and pack portrait and
   landscape shots without row-span math. Source order = the reading order down
   each column. (The beach video is NOT here — it's the §3 flavor background.) */
.photo-wall {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 300px 3;
    column-gap: clamp(10px, 1.6vw, 18px);
}
.photo-wall__item {
    break-inside: avoid;
    margin: 0 0 clamp(10px, 1.6vw, 18px);
}
.photo-wall__media {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card, 16px);
}

/* ── §5 Label credit: quiet KKB answer on a warm tan band ───────────────── */
.day-drink-credit__title {
    font-size: clamp(22px, 3.4vw, 34px);   /* quieter than the default section title */
    margin-bottom: var(--spacing-sm, 0.5rem);
}
.day-drink-credit__line {
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.5;
    margin: 0;
    color: var(--ssb-ink);
}
/* Inline .text-link for links inside running prose — no block padding so it
   sits in the line; line-height carries the tap target. */
.text-link--inline {
    display: inline;
    padding: 0;
}

/* ── §6 Social close: handle + hashtag on the red band ──────────────────── */
.day-drink-social__tags {
    margin: 1rem auto 1.75rem;
    font-weight: 700;
}
.day-drink-social__dot {
    opacity: 0.6;
    margin: 0 0.4em;
}
.day-drink-social__hashtag { white-space: nowrap; }

/* ==========================================================================
   MENU-ITEM LANDING — masthead (.item-masthead*) + page glue (single-menu-item.php)
   ----------------------------------------------------------------------------
   A genuinely new component, NOT the list-row `.menu-item__*` classes (those
   carry `body.single-menu` overrides that would collide). Ink ground, cream
   type, LEFT-aligned. Padding-driven height — no fixed min-height, so a short
   name never opens a vacant void. The no-photo and has-photo states are ONE
   composition: type column left; when `.item-masthead--has-thumb`, the photo
   fills the empty right third at >=781px and stacks below price/spec at
   <781px (name stays first in source order either way).

   The red `__tick` mirrors the `.day-drink-hero__tick` recipe but is defined
   STANDALONE (no aliasing — must not regress the live day-drink page).
   Below-masthead surfaces reuse the `.section`/`.section--ink` system and the
   reused list-row subparts (`.menu-item__variants/__modifiers/__chips`).
   ========================================================================== */
.item-single {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
}

/* Breadcrumb sits on the ink page ground above the masthead. */
.item-single__breadcrumb {
    max-width: var(--ssb-section-max, 1200px);
    margin-inline: auto;
    padding: var(--spacing-lg, 1rem) var(--ssb-section-x, 1.5rem) 0;
    color: var(--ssb-cream);
}
.item-single__breadcrumb .breadcrumb__link {
    color: rgba(239, 226, 199, 0.85); /* cream @ .85 on ink */
}
.item-single__breadcrumb .breadcrumb__link:hover,
.item-single__breadcrumb .breadcrumb__link:focus-visible {
    color: var(--ssb-cream);
}
.item-single__breadcrumb .breadcrumb__current {
    color: var(--ssb-tan); /* 7.3:1 on ink */
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
.item-masthead {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
}
.item-masthead__inner {
    max-width: var(--ssb-section-max, 1200px);
    margin-inline: auto;
    /* Padding-driven height — NO min-height. */
    padding: var(--spacing-3xl, 3rem) var(--ssb-section-x, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl, 1.5rem);
}
.item-masthead__type {
    width: 100%;
    text-align: left;
}

.item-masthead__eyebrow {
    margin: 0 0 var(--spacing-sm, 0.5rem);
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ssb-tan); /* 7.3:1 on ink */
}

/* The page H1. Gabriela (NOT Bowlby), left-aligned (NOT centered). Gabriela
   loads as a 400-only master (functions.php Google Fonts enqueue has no weight
   axis, and Gabriela ships no bold cut to self-host), so we set the TRUE weight
   400 — asking for 700 only gets a browser-synthesized faux-bold that smears at
   clamp-72px. The clamp/size/leading/tracking carry the hero presence. */
.item-masthead__name {
    margin: 0;
    font-family: "Gabriela", Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.25rem, 6.5vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    max-width: 18ch;
    color: var(--ssb-cream); /* 15.8:1 on ink */
}

/* Red tick — 56x4px, left-anchored. Standalone (do NOT alias day-drink). */
.item-masthead__tick {
    display: block;
    width: 56px;
    height: 4px;
    margin: var(--spacing-lg, 1rem) 0;
    background: var(--ssb-red);
    border-radius: 2px;
    transform-origin: left center;
}

.item-masthead__desc {
    margin: 0 0 var(--spacing-md, 0.75rem);
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.5;
    max-width: 46ch;
    color: rgba(239, 226, 199, 0.92); /* cream @ .92 */
}

/* Money is upright, never italic. */
.item-masthead__price {
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-style: normal;
    font-size: var(--wp--preset--font-size--x-large, 1.375rem);
    font-variant-numeric: tabular-nums;
    color: var(--ssb-cream);
}

.item-masthead__spec {
    margin: var(--spacing-sm, 0.5rem) 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ssb-tan);
}

.item-masthead__media {
    margin: 0;
    width: 100%;
    max-width: 420px;
}
.item-masthead__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* >=781px: two-column composition. Type left; photo fills the right third
   that's empty in the no-photo state — the two states are ONE composition. */
@media (min-width: 781px) {
    .item-masthead--has-thumb .item-masthead__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-3xl, 3rem);
    }
    .item-masthead--has-thumb .item-masthead__type {
        flex: 1 1 auto;
        min-width: 0;
    }
    .item-masthead--has-thumb .item-masthead__media {
        flex: 0 0 auto;
        align-self: center;
    }
}

/* ── Below-masthead page glue ──────────────────────────────────────────── */
/* Detail / story / cta / related all sit on .section--ink. The standalone
   `.section__title` has margin:0 — restore a gap before the structured
   content that follows it. */
.item-single__detail .section__title,
.item-single__related .section__title {
    margin-bottom: var(--spacing-lg, 1rem);
}
/* Origin line under the detail lists. */
.menu-item__origin {
    margin: var(--spacing-md, 0.75rem) 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    color: rgba(239, 226, 199, 0.85);
}

/**
Forced grid pages
@todo port this into a form feature branch
Initially Monday, June 22, 2026 at 3:03PM used for FBB invite layout
**/
#main.fbb-register {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
}

/* CTA cluster — left-aligned, wraps. Tighten the section so the trio doesn't
   float in a tall band. */
.item-single__cta {
    padding-block: var(--spacing-xl, 1.5rem);
}
.item-single__cta-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
}

/* In DEFAULT mode the text link is the ONLY action, so it needs a real >=44px
   touch target — the bare .menu-cta-strip__textlink renders ~26px tall. Scoped
   to this surface so the single-menu.php usage is untouched. Focus ring matches
   .item-related__link (cream outline on the ink ground), not just an underline. */
.item-single__cta .menu-cta-strip__textlink {
    display: inline-flex;
    align-items: center;
    padding-block: 0.6rem;
    min-height: 44px;
}
.item-single__cta .menu-cta-strip__textlink:focus-visible {
    outline: 2px solid var(--ssb-cream);
    outline-offset: 3px;
}

/* Story block — prose on ink, reuses the editorial measure. */
.item-single__story-body {
    max-width: 62ch;
}
.item-single__story-body p {
    font-family: "Averia Libre", Georgia, serif;
    font-size: var(--wp--preset--font-size--large, 1.125rem);
    line-height: 1.65;
    margin: 0 0 1em;
}
.item-single__story-body p:last-child { margin-bottom: 0; }

/* Related — quiet ink link list (one column; price right-aligned). */
.item-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm, 0.5rem);
    max-width: var(--ssb-section-max-narrow, 900px);
}
.item-related__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--spacing-sm, 0.5rem) 0;
    border-bottom: 1px solid rgba(239, 226, 199, 0.14);
    color: var(--ssb-cream);
    text-decoration: none;
}
.item-related__link:hover .item-related__name,
.item-related__link:focus-visible .item-related__name {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.item-related__link:focus-visible {
    outline: 2px solid var(--ssb-cream);
    outline-offset: 3px;
}
.item-related__name {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 1.0625rem;
}
.item-related__price {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ssb-tan);
    white-space: nowrap;
}

/* Motion — a single restrained entrance on the name + tick. The static render
   is the resting truth; this only enriches when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
    .item-masthead__name {
        animation: ssb-item-name-in 0.5s ease 0.05s both;
    }
    .item-masthead__tick {
        transform: scaleX(0);
        animation: ssb-item-tick-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s both;
    }
    @keyframes ssb-item-name-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes ssb-item-tick-in {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .item-masthead__name { animation: none; }
    .item-masthead__tick { transform: none; animation: none; }
}

/* ==========================================================================
   MOTION — gentle entrance + interaction. Cards/hero are VISIBLE at rest
   (no JS dependency). The richer GSAP entrances (ScrollTrigger fade-up + photo
   settle, SplitText name reveal, DrawSVG tick) are progressive enhancements
   layered by extras.js; these keyframes cover the no-JS / first-paint case.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Tab one-shot rotate-in (-4deg -> 0), fading in 120ms after the card. */
    .feature-card__tab {
        animation: ssb-feature-tab-in 0.32s ease 0.12s both;
    }
    @keyframes ssb-feature-tab-in {
        from { opacity: 0; transform: rotate(-4deg) translateY(4px); }
        to   { opacity: 1; transform: rotate(0) translateY(0); }
    }
    /* Photo settle on first paint (1.04 -> 1.0). */
    .feature-card__img {
        animation: ssb-feature-photo-settle 0.48s ease both;
    }
    @keyframes ssb-feature-photo-settle {
        from { transform: scale(1.04); }
        to   { transform: scale(1); }
    }
}

/* MANDATORY reduced-motion: everything visible at rest, no transform / scale /
   rotate / draw; tab + tick static. */
@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card:hover,
    .feature-card:focus-within { transform: none; }
    .feature-card__img,
    .feature-card__tab { animation: none; transform: none; }
    .day-drink-hero__img,
    .day-drink-hero__title,
    .day-drink-hero__tick { animation: none; transform: none; opacity: 1; }
    /* Patio: hero is above the fold; the extras.js IIFE also gsap.set()s these
       visible, but mirror it in CSS so a no-JS / reduced-motion load is final-
       state with no offset. The body sections reveal their CONTENT
       (.section__inner), not the whole section, so only that needs resetting. */
    .patio-hero__eyebrow,
    .patio-hero__status,
    .patio-hero__title,
    .patio-hero__tick,
    .patio-hero__tagline,
    .patio-hero__cta,
    .patio-hero__media,
    .patio .section__inner { animation: none; transform: none; opacity: 1; }
}

/* ── Visit page ───────────────────────────────────────────────────────────
   Composed from shared section/surface/kf-grid/btn-box utilities; only a
   couple of layout helpers are bespoke. (The open-now status block became
   the shared `.now-status` component 2026-06-06 — see the status-pulse
   keyframe area; the pre-redesign non-pill layer that lived here was
   dead-by-override and was deleted with the extraction.) */

/* Directions popover in the hero drops DOWNWARD over the cream section below.
   The hero normally clips (overflow:hidden) + isolates (its own rule + the
   has-wavy-edge-bottom utility), which would trap a downward menu inside the
   painted hero. While the popover is open, stop clipping and lift the whole
   hero above the next section so the menu can spill past the hero's bottom
   edge and paint on top. Scoped to .visit-hero + :has([open]) so it's inert
   otherwise and never touches other front-hero--simple consumers. The bg art
   is clipped by its own .front-hero__bg wrapper, so dropping the hero's own
   overflow doesn't unmask it. */
.front-hero.visit-hero:has(.get-directions[open]) {
    overflow: visible;
    isolation: auto;
    z-index: 5;
}

.visit-hours__grid {
    max-width: 540px;
    margin-inline: auto;
}
.visit-hours__row--today {
    border-left: 3px solid var(--ssb-red, #c2a488);
    font-weight: 600;
}
/* (.visit-where__address / __phone: dead pre-redesign duplicates deleted
   2026-06-06 — the 2026-06-02 /visit redesign block below fully supersedes
   both.) */
.visit-whatson__lead {
    max-width: 640px;
    margin-inline: auto;
}
.visit-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.visit-patio__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    text-align: center;
}
.visit-patio__body {
    margin: 0;
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--large, 1.5rem);
}

/* ===========================================================================
   /visit redesign (2026-06) — hero, open-now pill, asymmetric hours/address,
   consolidated getting-here band.
   =========================================================================== */

/* ── S0 hero: light treatment over the woodcut illustration ─────────────────
   The woodcut is a LIGHT-ground sketch — the catering dark-photo/cream-type
   recipe would invert. Flip to ink type on a cream wash anchoring the lockup,
   with the art bleeding to the edges. */
.front-hero--light {
    background: var(--ssb-cream);
    color: var(--ssb-ink);
}
.front-hero--light .front-hero__bg img {
    /* The sketch is already pale; keep it near-full but slightly knocked back
       so the cream wash + ink type read cleanly on top. */
    opacity: 0.85;
}
.front-hero--light .front-hero__bg-scrim {
    /* Cream wash: strong at center (under the type), fading to the edges so the
       woodcut's detailed building stays visible around the lockup. */
    background:
        radial-gradient(
            ellipse 78% 82% at center,
            rgba(239, 226, 199, 0.94) 0%,
            rgba(239, 226, 199, 0.86) 42%,
            rgba(239, 226, 199, 0.55) 72%,
            rgba(239, 226, 199, 0.28) 100%
        );
}
.front-hero--light .front-hero__inner {
    padding-top: 40px;
    max-width: 920px;
}
.front-hero--light .front-hero__eyebrow {
    color: var(--ssb-red-deep);
}
.front-hero--light .front-hero__title {
    color: var(--ssb-ink);
    /* Override the catering 176px cap — this surface is utility, not a brand hero. */
    font-size: clamp(44px, 8vw, 92px);
    line-height: 0.9;
}
.front-hero--light .front-hero__tagline {
    color: var(--ssb-ink);
    font-style: italic;
    opacity: 0.82;
}

/* Open-now pill — rendered ONCE in the hero. Now the shared `.now-status`
   component (extracted 2026-06-06; defined next to the status-pulse
   keyframe). */

/* Hero CTA row: standalone text-link (Call the bar) sits next to the primary. */
.front-hero--light .front-hero__ctas .cta-band__text-link {
    color: var(--ssb-ink);
}

/* Standalone text-link — ink-toned, works on cream/tan grounds (the prior
   `.cta-band__text-link` had no rules of its own and leaned on the dark-hero
   `.front-hero__ship-link`). */
.cta-band__text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Averia Libre', serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ssb-red-deep);
    text-decoration: none;
    transition: color 150ms ease;
}
.cta-band__text-link:hover,
.cta-band__text-link:focus-visible {
    color: var(--ssb-ink);
}
.cta-band__text-link-arrow {
    transition: transform 150ms ease;
}
.cta-band__text-link:hover .cta-band__text-link-arrow,
.cta-band__text-link:focus-visible .cta-band__text-link-arrow {
    transform: translateX(4px);
}

/* ── S1 — Hours + Address, ASYMMETRIC (the de-stripe lever) ─────────────────
   Address column narrower than the hours column; head left-aligned. Collapses
   to one column (ADDRESS first) at the section-system mobile breakpoint. */
.visit-where__head {
    align-items: flex-start;
    text-align: left;
    margin-inline: 0;
    max-width: none;
}
.visit-where__cols {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
    margin-top: var(--spacing-lg);
}
.visit-where__col--address {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.visit-where__address {
    font-family: 'Averia Libre', serif;
    font-size: var(--wp--preset--font-size--x-large, 2rem);
    line-height: 1.25;
    margin: 0;
    color: var(--ssb-ink);
}
.visit-cta-row--left {
    justify-content: flex-start;
    margin-top: 0;
}
.visit-where__phone {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-family: 'Averia Libre', serif;
    /* ≥44px tap target on touch. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.visit-where__jump {
    margin: 0;
}
@media (max-width: 781px) {
    .visit-where__cols {
        grid-template-columns: 1fr;
    }
    /* Address column is first in source order, so it stacks first — no order
       override needed; this comment documents the locked behavior. */
}

/* ── S2 — Getting here & in (consolidated, two subgroups) ───────────────────── */
.visit-getting__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(2rem, 5vw, 3.5rem);
    margin-top: var(--spacing-lg);
    align-items: start;
}
.visit-getting__subhead {
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    margin: 0 0 var(--spacing-sm);
    color: var(--ssb-ink);
}
.visit-getting__intro {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    text-align: left;
}
/* On tan, the body hairline-grid stays ink-on-tan (never white-on-tan). */
.visit-getting .kf-grid__value,
.visit-getting .kf-grid__item dd {
    color: var(--ssb-ink);
}

/* Demoted game heads-up line under S3's CTAs. */
.visit-whatson__heads-up {
    margin: var(--spacing-md) 0 0;
    text-align: center;
}

/* Ink-variant bands (section-text-band / section-cta-band with variant=ink):
   WordPress's has-dark-default-background-color sets only the BACKGROUND, so
   the title/sub inherit the default ink text and render dark-on-dark. Light
   the text on the dark ground. Buttons carry their own explicit colors. */
.section--band.has-dark-default-background-color {
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* Surface contract: the standalone text-link is red-deep for cream/tan
   grounds; on the ink variant that muddies to near-invisible (and its hover
   color is literally ink). Flip to cream on dark bands, mirroring
   `.inline-link--inverse`. */
.section--band.has-dark-default-background-color .cta-band__text-link {
    color: var(--ssb-cream, #EFE2C7);
}
.section--band.has-dark-default-background-color .cta-band__text-link:hover,
.section--band.has-dark-default-background-color .cta-band__text-link:focus-visible {
    color: var(--wp--preset--color--text-white, #fefefe);
}

/* ==========================================================================
   /order — local-first Toast router landing page (template-order.php)
   Design pass 2026-06-03. Hero reuses .front-hero--simple .front-hero--light
   + the open-now pill verbatim; the cross-sell reuses .section--split / --tan
   / butcher / torn-edge. The only genuinely-new patterns are the dual-CTA
   block (.order-cta-duo — two equal-footprint buttons, one external
   destination, the page's focal "moment") and the .order-trust fact row.
   ========================================================================== */

/* The hero leans on .front-hero--light for the cream ground; this hook only
   exists to widen the focal air a touch and ensure no inherited photo rules
   apply (the /order hero ships no background image). */
.order-hero-page .front-hero__inner {
    max-width: 760px;
}

/* Dual-CTA block: stacked full-width on mobile, a centered row on desktop.
   The buttons keep their DOM order (Pickup first) in both fulfillment
   framings — only the .btn-box--primary / --ghost-ink fill swaps, so the
   ?fulfillment=delivery reframe never shifts layout. */
.order-cta-duo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-lg, 1.5rem);
}
.order-cta-duo .btn-box {
    min-height: 52px;
    justify-content: center;
}
.order-cta-duo .mega-link__ext {
    margin-left: 2px;
    flex: 0 0 auto;
}
@media (max-width: 781px) {
    .order-cta-duo { flex-direction: column; }
    .order-cta-duo .btn-box { width: 100%; }
}

/* Trust strip: three factual columns split by ink hairlines; stacks ≤781px. */
.order-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}
.order-trust__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    padding-inline: clamp(1rem, 3vw, 2rem);
    border-left: 1px solid var(--hairline-ink, rgba(26, 26, 26, 0.10));
}
.order-trust__col:first-child {
    border-left: 0;
}
.order-trust__label {
    font-family: 'Averia Libre', serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.6;
}
.order-trust__value {
    font-family: 'Averia Libre', serif;
    font-size: 1.0625rem;
    line-height: 1.4;
}
@media (max-width: 781px) {
    .order-trust {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .order-trust__col {
        border-left: 0;
        border-top: 1px solid var(--hairline-ink, rgba(26, 26, 26, 0.10));
        padding-block-start: 1.5rem;
    }
    .order-trust__col:first-child {
        border-top: 0;
        padding-block-start: 0;
    }
}

/* Cross-sell ship-box image — centered, capped, squared (product flat-lay). */
.order-ship__media {
    display: flex;
    justify-content: center;
}
.order-ship__media img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
}

/* Tertiary exits: inline, separated, centered (within .section--fineprint). */
.order-tertiary .section__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.order-tertiary a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.order-tertiary__sep {
    opacity: 0.5;
}

/* ==========================================================================
   SURFACE-CONTRACT RULES (cross-page) — established 2026-06-03
   Deterministic surface→token mappings the brand enforces everywhere. Kept
   here (not in a page block) because they apply to ANY section/page.
   ========================================================================== */

/* (1) PRIMARY BUTTON ON WARM-LIGHT GROUNDS = INK.
   The gold .btn-box--primary (#EFE2C7) is built for dark/ink heroes; on tan,
   butcher paper, or the light hero it sits warm-on-warm and reads as an
   unfilled tan-on-tan ghost. On those grounds the primary action renders as a
   solid ink fill instead. (Secondary stays outlined --ghost-ink; tertiary
   stays the ink text link.) New surfaces should just author --ink directly on
   light grounds; this net catches the rest. */
.section--tan .btn-box--primary,
.has-butcher-texture .btn-box--primary,
.front-hero--light .btn-box--primary {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
}
.section--tan .btn-box--primary:hover,
.section--tan .btn-box--primary:focus-visible,
.has-butcher-texture .btn-box--primary:hover,
.has-butcher-texture .btn-box--primary:focus-visible,
.front-hero--light .btn-box--primary:hover,
.front-hero--light .btn-box--primary:focus-visible {
    background: #1A1A1A;
    color: var(--ssb-cream);
}

/* (2) TEXT LINKS ON TAN / BUTCHER-PAPER ARE INK, NEVER --ssb-red-deep.
   The deep red link color is a cream/dark-ground affordance; on warm tan it
   muddies to low contrast. Links over tan or the butcher texture use ink. */
.section--tan .cta-band__text-link,
.has-butcher-texture .cta-band__text-link {
    color: var(--ssb-ink);
}
.section--tan .cta-band__text-link:hover,
.section--tan .cta-band__text-link:focus-visible,
.has-butcher-texture .cta-band__text-link:hover,
.has-butcher-texture .cta-band__text-link:focus-visible {
    color: var(--ssb-ink);
}

/* (3) MAIN SECTION IMAGES carry the canonical card radius (matches
   .legacy__media / .day-drink-hero__img on /history and /day-drink), so a
   split-section photo never ships as a hard-cornered raw rectangle. */
.section__media img {
    border-radius: var(--radius-card, 16px);
}

/* (4) CTA ROW IN A SPLIT IS LEFT-ALIGNED, tracking the left-aligned copy
   column + section head (the canonical .section__cta is centered, which
   pushes a split's buttons off to the right under left-set text). */
.section--split .section__cta {
    justify-content: flex-start;
}

/* --------------------------------------------------------------------------
 * Click-to-zoom lightbox (menu-item thumbnails)
 * --------------------------------------------------------------------------
 * Presentation layer for assets/js/click-zoom.js (KKB resource; menu CPT
 * only). The JS reads the backdrop color off the lightbox's computed style,
 * so the ink backdrop below IS the animated end-state. Zoom size is capped
 * at 350px wide in the script's CONFIG, not here. Selectors keep the
 * resource's data- attributes verbatim (its DOM contract).
 */
img[data-click-zoom],
[data-click-zoom] img,
[data-click-zoom-article] img {
    cursor: zoom-in;
}

[data-click-zoom-lightbox] > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: var(--radius-card, 16px);
}

.click-zoom__lightbox {
    z-index: 100;
    cursor: zoom-out;
    /* Ink ground (--ssb-ink #0F0F0F) at high alpha — brand-tuned from the
       resource's #000000e6; reads identically warm on the dark menu pages. */
    background-color: rgba(15, 15, 15, 0.92);
    justify-content: center;
    align-items: center;
    padding: 3em;
    display: none;
    position: fixed;
    inset: 0%;
}


/* ============ SPOTTED COW / WHERE-TO-BUY PAGE (template-where-to-buy-spotted-cow.php) ============ */
/* Page-scoped CSS ONLY. Everything else on the page composes existing system
   classes (.section + surface/archetype modifiers, .numbered-steps, .stat-band,
   .eyebrow, .btn-box, .clip-grid, .faq-section, .cta-band). The two bespoke
   pieces are: (1) the masthead hero, a hero-family page-scoped surface modeled
   on .history-masthead but with the page's "No." answer as the H1; (2) the
   visit hairline-ruled list, a minimal alternative to .info-grid cards.

   Brand notes: ink ground, cream type. The ONLY accent color here is the
   masthead period (--ssb-red) — the single red beat outside S3's red band.
   No Imperial Script anywhere on this page. */

/* ── S1 masthead (hero-family; bottom-left-weighted on ink) ─────────────── */
/* Two states. Type-only (the designed default): NO fixed min-height — the
   box hugs the type with generous padding so the air reads composed, not
   vacant; a faint top light-pool (day-drink-hero's sanctioned treatment)
   gives the ink depth. With an owner-uploaded `spotted-cow-hero*` photo the
   `--bg` modifier switches to the history-masthead pattern: full-bleed cover
   + bottom-weighted scrim + tall viewport-relative height. */
.wtb-masthead {
    position: relative;
    display: grid;
    align-items: end;
    overflow: clip;
    background-color: var(--ssb-ink, #0F0F0F);
    color: var(--ssb-cream, #EFE2C7);
    /* Faint warm light-pool, biased toward the copy column. */
    background-image: radial-gradient(
        62% 48% at 30% 0%,
        rgba(229, 200, 117, 0.07),
        transparent 70%
    );
}
.wtb-masthead--bg {
    min-height: 70svh;
}
@media (min-width: 769px) {
    .wtb-masthead--bg { min-height: min(82svh, 680px); }
}
.wtb-masthead__bg,
.wtb-masthead__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.wtb-masthead__bg {
    background-size: cover;
    background-position: center;
}
/* Bottom-weighted scrim: heaviest at the lower-left where the copy sits
   (mirrors .history-masthead__scrim). */
.wtb-masthead__scrim {
    background: linear-gradient(
        0deg,
        rgba(15, 15, 15, 0.88) 0%,
        rgba(15, 15, 15, 0.55) 45%,
        rgba(15, 15, 15, 0.20) 100%
    );
}
.wtb-masthead__inner {
    position: relative;
    z-index: 1;
    /* Type-only height is padding-driven: tall enough to breathe, never a
       void. The svh terms keep it proportionate on short viewports. */
    padding-block: clamp(3.5rem, 10svh, 6.5rem) clamp(3rem, 8svh, 5.5rem);
    /* Bottom-left weighted: copy occupies the left ~60%, the right ~40% is
       deliberately empty negative space (mirrors .history-masthead intent). */
    max-width: min(var(--ssb-section-max), 100%);
}
/* The question is the page H1 (the literal SEO query) rendered as the italic
   quote — clearly a tier above the eyebrow, clearly a tier below the Nope
   (question ≈2.2rem vs Nope ≈5.5rem keeps the answer the loudest thing on
   the page; the italic Averia voice keeps it from competing with Bowlby).
   Heading defaults neutralized so the h1 element carries no display styling. */
.wtb-masthead__question {
    max-width: 24ch;
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ssb-cream, #EFE2C7);
    opacity: 0.92;
}
.wtb-masthead__title {
    margin: 0 0 1.25rem;
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 11vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ssb-cream, #EFE2C7);
}
.wtb-masthead__period {
    color: var(--ssb-red, #d32f2f);
}
.wtb-masthead__deck {
    max-width: 46ch;
    margin: 0;
    font-family: "Averia Libre", Georgia, serif;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    line-height: 1.4;
    color: var(--ssb-cream, #EFE2C7);
    opacity: 0.92;
}
@media (max-width: 768px) {
    .wtb-masthead { text-align: center; }
    .wtb-masthead__inner { margin-inline: auto; }
    .wtb-masthead__question,
    .wtb-masthead__deck { margin-inline: auto; }
}

/* Masthead entrance — pure CSS, no JS. Elements stay final-state visible
   without JS (the animation only runs forwards from a transformed start).
   Sequence: question fades up → the answer fades+scales in reading "Ope."
   (the N starts hidden, the "ope." cluster starts shifted left over the N's
   space) → the period flushes cream→red → the deck fades → then the
   double-take: the N slides in as "ope." shifts right, and "Ope" becomes
   "Nope". The DOM says "Nope." the whole time — only visibility changes. */
.wtb-masthead__question {
    animation: wtb-fade-up 500ms ease-out 0ms both;
}
.wtb-masthead__title {
    animation: wtb-answer-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 750ms both;
}
.wtb-masthead__period {
    animation: wtb-period-flush 400ms ease-out 1100ms both;
}
.wtb-masthead__deck {
    animation: wtb-fade-up 500ms ease-out 1250ms both;
}
/* The Ope→Nope reveal. 0.82em approximates the Bowlby N advance width: the
   "ope." cluster starts pulled left by exactly the gap the hidden N leaves,
   so the word sits flush at the text edge reading "Ope." — both spans then
   travel together to natural layout (translateX(0)), which is self-truing:
   the END state is always pixel-perfect regardless of the em guess. */
.wtb-masthead__n,
.wtb-masthead__ope {
    display: inline-block;
}
.wtb-masthead__n {
    animation: wtb-n-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 2000ms both;
}
.wtb-masthead__ope {
    animation: wtb-ope-shift 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 2000ms both;
}
@keyframes wtb-n-in {
    from { opacity: 0; transform: translateX(-0.35em); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wtb-ope-shift {
    from { transform: translateX(-0.82em); }
    to   { transform: translateX(0); }
}
@keyframes wtb-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* The deck's settled opacity is 0.92, not 1 — re-target so the fade-up's
   `to { opacity: 1 }` doesn't override the resting state. */
.wtb-masthead__deck { animation-name: wtb-fade-up-deck; }
@keyframes wtb-fade-up-deck {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 0.92; transform: translateY(0); }
}
.wtb-masthead__question { animation-name: wtb-fade-up-question; }
@keyframes wtb-fade-up-question {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 0.85; transform: translateY(0); }
}
@keyframes wtb-answer-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes wtb-period-flush {
    from { color: var(--ssb-cream, #EFE2C7); }
    to   { color: var(--ssb-red, #d32f2f); }
}
/* Reduced motion: snap to final state immediately, no animation — the word
   simply reads "Nope." with the red period. */
@media (prefers-reduced-motion: reduce) {
    .wtb-masthead__question,
    .wtb-masthead__title,
    .wtb-masthead__period,
    .wtb-masthead__deck,
    .wtb-masthead__n,
    .wtb-masthead__ope {
        animation: none;
    }
}

/* ── S4 visit hairline-ruled list (minimal, not .info-grid cards) ───────── */
/* Single-column rows separated by a cream hairline rule; bold Bowlby label
   over one line of Averia detail. Inherits cream type from the ink ground. */
.wtb-visit__list {
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
}
.wtb-visit__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(0.9rem, 2vw, 1.25rem) 0;
    border-top: 1px solid var(--hairline-cream, rgba(239, 226, 199, 0.22));
}
.wtb-visit__row:last-child {
    border-bottom: 1px solid var(--hairline-cream, rgba(239, 226, 199, 0.22));
}
.wtb-visit__label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.wtb-visit__detail {
    font-family: "Averia Libre", Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    opacity: 0.88;
}

/* ── S5 proof spacing (compose-only nudges around shared components) ─────── */
.wtb-proof__stat {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.wtb-proof__press-intro {
    text-align: center;
    max-width: 48ch;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: 0.82;
}

/* ── S6 FAQ seam handshake ───────────────────────────────────────────────── */
/* The partial renders edge_top=false on this page (the flight section above
   owns the cream→tan seam; has-wavy-edge-top + has-butcher-texture collide
   on ::before). Its remaining bottom edge paints the next neighbor's ground:
   the S7 ink CTA band. */
.wtb-page .faq-section {
    --next-edge-color: var(--ssb-ink, #0F0F0F);
}
/* ============ END SPOTTED COW / WHERE-TO-BUY PAGE ============ */


/* ==========================================================================
   PATIO PAGE (/patio — page-patio.php)
   --------------------------------------------------------------------------
   Thin glue over the .section system. Net-new CSS is the HERO ONLY (a
   `.patio-hero*` variant, OUTSIDE the .section system, mirroring
   `.day-drink-hero`) plus the provisional summer-photo placeholder and the
   future live-temp hook. §2–§5 are stock .section + surface/seam/texture
   utilities: §2 is a split, §3's winter photos use the shared card grid
   (`.section--cards` + `.card` / `.card__media` + `.swipe-row`, same as the
   front-page "spaces" row — no patio-specific rail CSS), §4/§5 are bands with a
   generic `.section__cta` + caret text-link. Cream hero ground; the ONE red
   moment is the tick. Reduced-motion fallback lives in the shared MOTION @media
   block. Body sections (§2–§5) are visible at rest — only the HERO animates
   (fades up on load via extras.js). The body scroll-reveal was removed: a
   ScrollTrigger that hides content until it fires can leave it stuck invisible
   when the large hero image reflows the page before triggers are measured (it
   blanked the §3 winter photos). See feedback_no_full_section_scroll_reveal.
   ========================================================================== */

/* ── HERO — cream ground, photo-forward split (photo ~56% left, type ~44%
   right); stacks PHOTO-FIRST <781px. ──────────────────────────────────────── */
.patio-hero {
    position: relative;
    background: var(--ssb-cream);
    color: var(--ssb-ink);
    overflow: hidden;
}

/* The Get Directions popover drops DOWNWARD out of the hero CTA. The hero
   clips (overflow:hidden) and §2 below paints on top, so the menu options
   (esp. "Copy address") get cut off. While the popover is open, stop clipping
   and lift the whole hero above the next section so the menu spills past the
   hero's bottom edge and paints on top — same fix the /visit hero uses, not an
   upward-opening menu. Inert otherwise. */
.patio-hero:has(.get-directions[open]) {
    overflow: visible;
    isolation: auto;
    z-index: 5;
}

.patio-hero__inner {
    display: flex;
    flex-direction: column;          /* stacks <781px: photo over type */
    gap: var(--spacing-xl);
    align-items: stretch;
    max-width: var(--ssb-section-max, 1200px);
    margin: 0 auto;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1rem);
    min-height: min(70vh, 620px);
}

/* Media — wide letterbox card. */
.patio-hero__media {
    width: 100%;
}
.patio-hero__img,
.patio-hero__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* Provisional placeholder (no summer photo yet): a tan + butcher-texture card
   with a centered flag label — holds the composition with zero photo, never a
   broken image. has-butcher-texture supplies the grain overlay. */
.patio-hero__placeholder,
.patio-atmosphere__placeholder {
    display: grid;
    place-items: center;
    background: var(--ssb-tan);
    border-radius: var(--radius-card);
    text-align: center;
    padding: var(--spacing-xl, 2rem);
}
.patio-atmosphere__placeholder {
    aspect-ratio: 4 / 3;
}
.patio-hero__placeholder-flag {
    position: relative;              /* sit above the butcher ::before grain */
    z-index: 1;
    max-width: 22ch;
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.5;
    color: rgba(15, 15, 15, 0.55);  /* ink @ .55 — quiet, deliberately faint */
}

/* Type column — LEFT-ALIGNED. Order: eyebrow → pill → H1 → tick → tagline →
   CTA. The bottom third stays intentionally empty. */
.patio-hero__type {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.patio-hero__eyebrow { color: var(--ssb-tan); }

/* The shared .now-status pill carries `margin: 0 auto 14px` for centered
   columns; reset the auto sides to keep it flush-left here. */
.patio-hero__status { margin: 0 0 16px; }

.patio-hero__title {
    font-family: "Bowlby One SC", Impact, sans-serif;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--huge, clamp(40px, 6vw, 72px));
    line-height: 0.92;
    color: var(--ssb-ink);
    max-width: 12ch;
    margin: 0.1em 0 0;
}

/* The ONE red moment — a single short underline tick (~64x4px). */
.patio-hero__tick {
    display: block;
    width: 64px;
    height: 4px;
    margin: 16px 0 18px;
    background: var(--ssb-red);
    border-radius: 2px;
    transform-origin: left center;   /* DrawSVG draws this last when available */
}

.patio-hero__tagline {
    font-family: "Averia Libre", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.0625rem;            /* ≥16px */
    line-height: 1.55;
    max-width: 34ch;
    color: rgba(15, 15, 15, 0.9);    /* ink @ .9 */
    margin: 0;
}

.patio-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md, 0.75rem);
    margin-top: 24px;
}

/* Two-column split at >=781px: photo ~56% left, type ~44% right. */
@media (min-width: 781px) {
    .patio-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-3xl, 3rem);
    }
    .patio-hero__media { flex: 0 0 56%; max-width: none; }
    .patio-hero__type  { flex: 1 1 44%; }
}

/* §3 winter photos use the shared card grid (`.section--cards` + `.card` /
   `.card__media`) and `.swipe-row` — no patio-specific rail CSS. The card-media
   box owns the contained, overflow-clipped, max-width:100% photo treatment. */

/* §5 address ≥16px (floor); quiet hours line below it. */
.patio-close__address {
    font-size: 1rem;
    margin: var(--spacing-sm, 0.5rem) 0 0;
}
.patio-close__hours {
    font-size: 1rem;
    opacity: 0.85;
    margin: 0.25rem 0 0;
}

/* SAFARI FIX — §3 winter photo cards.
   The §3 photos are PHOTO-ONLY cards (`.card` > `.card__media`, no text body).
   The shared card pattern puts `aspect-ratio:1/1` on the `.card__media` WRAPPER.
   In Safari, a stretched grid item whose height comes solely from a child's
   aspect-ratio resolves to ZERO height (it sizes the item before the ratio —
   circular), so the cards collapse and the photos vanish. Chrome doesn't hit this
   (so it can't be caught in headless Chrome — see [[feedback_safari_1fr_grid_track_lock]]);
   the owner saw blank cards in Safari while CDP showed them fine. Body-bearing
   cards (front-page spaces) are unaffected — their text gives the card height.
   Fix: drive the height from the <img> itself — a replaced element with intrinsic
   dimensions sizes reliably in Safari (this is how the prior direct-<img> rail
   worked). Scoped to the patio card grid so the shared pattern is untouched. */
.patio .section--cards .card__media {
    aspect-ratio: auto;
}
.patio .section--cards .card__media img {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* §3 winter photo grid — column counts.
   The shared `.section--cards` grid is `auto-fit, minmax(280px,1fr)`, which (with
   4 photos) wraps to a 3-up + 1 orphan and stretches the cards wide before it
   breaks. The owner wants the four to read as 4-across on desktop and a clean 2+2
   when they wrap — never 3+1. Fixed column counts at breakpoints skip the auto-fit
   3-up stage. (≤781px stays the `.swipe-row` mobile rail, untouched.) */
@media (min-width: 782px) {
    .patio .section--cards .section__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 + 2 */
    }
}
@media (min-width: 1100px) {
    .patio .section--cards .section__cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 across */
    }
}

/* ============ END PATIO PAGE ============ */


/* ============ WORLD CUP PAGE (/world-cup) ============
   Thin glue on the pattern base: the hero reuses `.front-hero--simple` (type-led
   default wears `.front-hero--light`; photo-led wears `.world-cup-hero--photo`,
   a full-bleed photo + bottom-weighted ink scrim borrowed from history-masthead).
   Matches/proof/visit/wink/FAQ are the `.section` system + `.card` / `.info-grid`
   / `.swipe-row` components; only the bits below are page-specific. Red ground
   appears exactly once (the wink band, via `.section--band.section--red`). */

/* ── Hero: photo-led variant (full-bleed photo + bottom-weighted ink scrim). ──
   The type-led default is fully handled by `.front-hero--light` (cream ground,
   ink Bowlby H1, ink primary CTA) — no extra rules needed there. */
.world-cup-hero--photo {
    background: var(--ssb-ink);
    color: var(--ssb-cream);
}
.world-cup-hero--photo .world-cup-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 38%;
}
.world-cup-hero--photo .world-cup-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Bottom-weighted so the type sits in the darkest band (mirrors
       history-masthead / wtb-masthead). */
    background: linear-gradient(
        to bottom,
        rgba(15, 15, 15, 0.40) 0%,
        rgba(15, 15, 15, 0.55) 46%,
        rgba(15, 15, 15, 0.86) 100%
    );
}
.world-cup-hero--photo .front-hero__inner {
    position: relative;
    z-index: 2;
}
/* Photo-hero eyebrow = warm white, full opacity + shadow (the enforced rule —
   never tan/red on a photo). */
.world-cup-hero--photo .world-cup-hero__eyebrow {
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.world-cup-hero--photo .world-cup-hero__title {
    color: var(--ssb-cream);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.world-cup-hero--photo .world-cup-hero__deck {
    color: var(--ssb-cream);
    opacity: 0.95;
}

/* The hero H1 is the long search phrase — let it wrap to multiple lines and
   keep it readable rather than the 176px brand-hero cap. Applies to both
   variants (light + photo). */
.world-cup-hero .world-cup-hero__title {
    font-size: clamp(34px, 5.2vw, 64px);
    line-height: 0.98;
    text-wrap: balance;
    max-width: 16ch;
    margin-inline: auto;
}
.world-cup-hero .world-cup-hero__status {
    margin: 18px auto 4px;
}

/* ── Matches: the match cards. The row is the canonical `.section__cards`
   auto-fit grid (repeat(auto-fit, minmax(280px,1fr))) so the cards self-size
   uniformly like every other card grid site-wide, PLUS `.swipe-row` so it hands
   off to the shared mobile peek carousel at ≤781px. `__row` adds only the
   top margin — it must NOT redeclare `grid-template-columns` or it would shadow
   the `.section__cards` auto-fit track and the swipe-row reset. ─────────────── */
.world-cup-matches__row {
    margin-top: var(--spacing-lg, 32px);
}
/* Grid items default to align-items:stretch, but `.card` carries
   `max-width: var(--component-max-width)` which lets a flex-column card sit
   narrower than its track and ragged. Clear it so every card fills its track
   (uniform width) and stretch vertically (uniform height). At ≤781px the
   shared `.swipe-row` rail (grid-auto-columns: minmax(80%,1fr)) sizes them. */
.world-cup-matches__row .world-cup-match-card {
    width: 100%;
    max-width: none;
    align-self: stretch;
}
.world-cup-match-card {
    margin-bottom: 0;
    /* Anchor for the stretched-link `::after` overlay (whole card is clickable). */
    position: relative;
}
/* Matchup logo lockup frame — the canonical `.card__media--matchup` cream band,
   but on the tan card the band reads tan (cards sit on tan); keep the team-logo
   white discs + tan-deep "vs" hinge from the shared `.game-row__logo` /
   `.card__matchup-at` base. Centered, fixed height so every card's media row
   aligns. */
.world-cup-match-card__logos {
    background: transparent;
    border-bottom: 1px solid var(--ssb-rule, rgba(26, 22, 18, 0.12));
    min-height: 84px;
}
.world-cup-match-card__matchup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
}
.world-cup-match-card__vs {
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    opacity: 0.6;
    text-transform: none;
}
.world-cup-match-card__time {
    color: var(--text-secondary, #5a5346);
    font-family: var(--font-family-ui);
}
.world-cup-match-card__airing {
    margin: 4px 0 0;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 0.875rem;
    /* Ink on the tan card surface — no red on tan (brand rule). */
    color: var(--ssb-ink);
    opacity: 0.7;
}
.world-cup-match-card__link {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Averia Libre", Georgia, serif;
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--ssb-ink);
    text-decoration: none;
    /* Whole-card clickability comes from the shared `.card__link` system (the
       canonical `.card__link::after` overlay, resolved against the relative
       card) — this anchor carries `class="card__link world-cup-match-card__link"`.
       This rule is the world-cup VISUAL layer only; it must NOT set `position`,
       or the `.card a:not(.card__link)` "lift nested interactive above overlay"
       rule would scope the overlay to the link box instead of the card. */
}
.world-cup-match-card__link:hover,
.world-cup-match-card__link:focus-visible {
    text-decoration: underline;
}
.world-cup-matches__empty {
    max-width: 48ch;
    margin: var(--spacing-lg, 32px) auto 0;
}

/* ── Proof: recolor the shared `.info-grid` to a cream ground (its base is the
   tan `--primary`). Hairline tiles; icons render in ink (darker-than-bg). ──── */
.world-cup-proof__grid {
    background: var(--ssb-cream);
    color: var(--ssb-ink);
}
.world-cup-proof__head {
    max-width: 720px;
}
.world-cup-proof__card {
    border-top: 1px solid rgba(15, 15, 15, 0.14);
    padding-top: 22px;
}
.world-cup-proof__card .info-grid__icon {
    color: var(--ssb-ink);
    width: 40px;
    height: 40px;
    opacity: 0.9;
}

/* ── Visit: address / hours rows on the ink ground (mirrors `.wtb-visit__*`). */
.world-cup-visit__list {
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
}
.world-cup-visit__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: clamp(0.9rem, 2vw, 1.25rem) 0;
    border-top: 1px solid var(--hairline-cream, rgba(239, 226, 199, 0.22));
}
.world-cup-visit__row:last-child {
    border-bottom: 1px solid var(--hairline-cream, rgba(239, 226, 199, 0.22));
}
.world-cup-visit__label {
    font-family: "Bowlby One SC", "Bowlby One", "Impact", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.world-cup-visit__detail {
    font-family: "Averia Libre", Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    opacity: 0.88;
}

/* ============ END WORLD CUP PAGE ============ */