@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — COMPONENTS
   Layer 2 of 3. Requires skagit-design-system.css.
   --------------------------------------------------------------------------
   Every selector below was read off the actual markup in header.php,
   footer.php, the archive/single templates and inc/shortcode-*.php.

   SPECIFICITY STRATEGY
   Several shortcodes print a per-shortcode <style> block inside <body>.
   Those blocks come AFTER this stylesheet in document order, so an
   equal-specificity rule here would lose. Rather than reach for !important,
   rules that must beat an inline block are escalated by one real ancestor
   class that genuinely exists in that markup — e.g. `.offer-card` becomes
   `.random-offers-wrapper .offer-card`. That wins on specificity regardless
   of source order and stays readable.

   The only !important declarations are collected in section 18 with a
   written justification for each (plus four font-family flips that are
   cross-referenced to note 1 of that section).
   ========================================================================== */

/* ==========================================================================
   1. LAYOUT CONTAINERS
   ========================================================================== */

body .xtra-custom-container,
body .sno-container,
body .home-slider-container,
body .skagit-booking-container,
body .footer-content-wrap,
body .sno-breadcrumb-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

body .sno-container.narrow-container {
  max-width: var(--sk-container-narrow);
}

/* ==========================================================================
   2. SITE HEADER
   Markup: header.php — .site-header.modern-header > .header-pattern,
   .header-top-bar > .container-fluid, .main-navigation
   ========================================================================== */

.site-header.modern-header {
  position: relative;
  isolation: isolate;
  color: var(--sk-text-on-dark);
  z-index: var(--sk-z-header);
  /* Brass hairline along the bottom edge — the system's signature mark
     doubling as the header/page separation. */
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.55),
              0 10px 34px rgba(4, 16, 28, 0.34);
}

/* The night ground. Painted on a pseudo-element so it sits UNDER the legacy
   `background: linear-gradient(...) !important` without needing !important
   of its own — the ::after simply covers it. */
.site-header.modern-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 140% at 82% -20%, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0) 55%),
    radial-gradient(70% 120% at 12% 0%,  rgba(0, 159, 227, 0.14) 0%, rgba(0, 159, 227, 0) 60%),
    var(--sk-grad-night);
}

/* Fluted-glass ribbing replaces the old polka-dot pattern. */
.site-header.modern-header .header-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sk-tex-flute);
  background-size: 9px 100%;
  opacity: 0.9;
  pointer-events: none;
}

.header-top-bar {
  position: relative;
  z-index: var(--sk-z-base);
  padding-block: var(--sk-space-xs);
}

.header-top-bar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-sm);
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

/* ---- 2.1 Contact pills — frosted glass with a gold rim ----------------- */
.header-contact {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2xs);
  flex-wrap: wrap;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5rem 0.95rem;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--sk-text-on-dark);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--sk-rim-light);
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out);
}

.contact-pill:hover,
.contact-pill:focus-visible {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.6);
  color: var(--sk-gold-200);
  transform: translateY(-1px);
}

.contact-pill i { color: var(--sk-gold-400); font-size: 0.9em; }

/* ---- 2.2 Branding ------------------------------------------------------ */
.site-branding { display: flex; align-items: center; }

.site-branding a {
  display: inline-flex;
  border-radius: var(--sk-radius-sm);
}

.header-logo {
  height: clamp(42px, 2.4vw + 32px, 72px);
  width: auto;
  background: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
  transition: transform var(--sk-dur-base) var(--sk-ease-spring),
              filter var(--sk-dur-base) var(--sk-ease-out);
}

.site-branding a:hover .header-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 4px 18px rgba(212, 175, 55, 0.35));
}

/* ---- 2.3 Utilities cluster --------------------------------------------- */
.header-utilities {
  display: flex;
  align-items: center;
  gap: var(--sk-space-sm);
}

.header-socials { display: flex; align-items: center; gap: 0.4rem; }

.header-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sk-text-on-dark);
  font-size: 0.9rem;
  box-shadow: var(--sk-rim-light);
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out);
}

.header-socials a:hover {
  background: var(--sk-grad-brass);
  border-color: var(--sk-gold-300);
  transform: translateY(-2px);
}

/* ---- 2.4 Primary navigation -------------------------------------------- */
/*
 * MUST stay scoped to >=1025px. Below that width, style.css turns
 * .main-navigation into the off-canvas drawer with `position: fixed`. This rule
 * loads later, so leaving it unscoped re-flowed the drawer back into the
 * document: it kept its 100vh height inside a `position: sticky`, z-index 9999
 * header, which then covered the whole viewport and made every page below
 * 1025px look like an empty dark panel.
 */
@media (min-width: 1025px) {
  .main-navigation {
    position: relative;
    z-index: var(--sk-z-base);
    background: rgba(4, 16, 28, 0.32);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
}

.nav-wrapper {
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
  display: flex;
  justify-content: center;
}

.header-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-menu > li { position: relative; margin: 0; }

.header-menu > li > a {
  position: relative;
  display: block;
  padding: 1rem clamp(0.7rem, 0.9vw, 1.25rem);
  color: var(--sk-text-on-dark);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--sk-dur-base) var(--sk-ease-out);
}

.header-menu > li > a:hover,
.header-menu > li.current-menu-item > a,
.header-menu > li.current-menu-ancestor > a { color: var(--sk-gold-300); }

/* Brass underline that draws in from the centre. */
.header-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  transform: translateX(-50%);
  transition: width var(--sk-dur-base) var(--sk-ease-out);
}

.header-menu > li:hover > a::after,
.header-menu > li:focus-within > a::after,
.header-menu > li.current-menu-item > a::after { width: calc(100% - 1.4rem); }

/* Dropdowns */
.header-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--sk-z-raised);
  display: none;
  min-width: 240px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--sk-navy-900);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-dark), var(--sk-rim-light);
  overflow: hidden;
}

.header-menu li:hover > .sub-menu,
.header-menu li:focus-within > .sub-menu { display: block; }

.header-menu .sub-menu li { margin: 0; }

.header-menu .sub-menu li a {
  display: block;
  padding: 0.7rem 1.15rem;
  color: var(--sk-text-on-dark-muted);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.02em;
  border-left: 2px solid transparent;
  transition: background-color var(--sk-dur-fast) var(--sk-ease-out),
              color var(--sk-dur-fast) var(--sk-ease-out),
              border-color var(--sk-dur-fast) var(--sk-ease-out);
}

.header-menu .sub-menu li a:hover {
  background: rgba(212, 175, 55, 0.1);
  border-left-color: var(--sk-gold-500);
  color: var(--sk-gold-200);
}

/* ---- 2.5 Mobile drawer chrome ------------------------------------------ */
.mobile-drawer-header {
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-sm);
  padding: var(--sk-space-sm) var(--sk-space-md);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.drawer-logo { height: 40px; width: auto; background: none; }

/* ==========================================================================
   3. STICKY SUB-NAVIGATION + BREADCRUMBS
   ========================================================================== */











/* Breadcrumbs */
.sno-breadcrumbs {
  width: 100%;
  background: var(--sk-mist);
  border-top: 1px solid var(--sk-border);
  border-bottom: 1px solid var(--sk-border);
  padding-block: var(--sk-space-xs);
}

.sno-breadcrumb-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-text-faint);
}

.sno-breadcrumb-container a { color: var(--sk-text-muted); }
.sno-breadcrumb-container a:hover { color: var(--sk-navy-700); }
.sno-breadcrumb-container span { color: var(--sk-accent-ink); }

.sno-breadcrumb-container i {
  margin-inline: 0.55rem;
  font-size: 0.6rem;
  color: var(--sk-silver);
}

/* ==========================================================================
   5. PAGE HEADERS  (.promo-text-header is shared by promotions,
   entertainment and jackpot templates)
   ========================================================================== */

body .promo-text-header {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: var(--sk-space-2xl) var(--sk-space-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 60%),
    linear-gradient(180deg, var(--sk-white) 0%, var(--sk-mist) 100%);
  border-bottom: 1px solid var(--sk-border);
  overflow: hidden;
}

/* A single faint deco arc behind the title — atmosphere, not decoration. */
body .promo-text-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  left: 50%;
  width: min(120vw, 1100px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(11, 61, 104, 0.07);
  pointer-events: none;
}

.promo-text-header .promo-page-title {
  font-family: var(--sk-font-display);
  /* ONE STEP DOWN THE EXISTING SCALE — 5xl -> 4xl. Not a new number.

     --sk-fs-5xl tops out at 4.875rem = 78px, and 78px is measured, not
     estimated: /promotions/, /entertainment/ and /dining/ all computed to
     exactly 78px at a 1440px viewport. That put this shared page header 18px
     above the theme's OWN top heading — skagit-design-system.css sets
     `h1 { font-size: var(--sk-fs-4xl) }`, which caps at 3.75rem = 60px — and
     24px above the photo hero it alternates with (.skagit-page-hero__title in
     skagit-place.css caps at 3.4rem = 54.4px). A page with a photograph and
     the same page without one were two different sizes of title, and the one
     without was the louder of the two.

     4xl computes to 59.99px at 1440px and 34.35px at 375px (was 78px / 38.56px).
     The phone number is the one that matters most: at 38.56px "Dining at The
     Skagit" wrapped to two lines (83.28px tall); at 34.35px it fits on one
     (37.09px).

     Use the token. Do not replace it with a literal px value or a hand-rolled
     clamp() — the whole point is that this header now sits ON the scale. */
  font-size: var(--sk-fs-4xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
  margin: 0 0 var(--sk-space-sm);
  text-wrap: balance;
}

.promo-text-header .promo-header-content {
  max-width: var(--sk-measure);
  margin-inline: auto;
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
}

.promo-text-header .promo-header-content p { color: inherit; font-size: inherit; }

.promo-text-header .header-gold-divider {
  width: clamp(64px, 9vw, 108px);
  height: 2px;
  margin: var(--sk-space-md) auto 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 8px rgba(212, 175, 55, 0.4);
}

.promo-text-header .single-month-nav {
  margin-bottom: var(--sk-space-sm);
  text-align: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--sk-text-faint);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
}

.back-link:hover { color: var(--sk-navy-700); }
.back-link i { margin: 0; font-size: 0.85em; }

/* Section title helper already present in style.css */
.section-title {
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  color: var(--sk-navy-900);
}

/* ==========================================================================
   6. BUTTONS
   Shared skin applied to the existing, template-specific button classes.
   ========================================================================== */

/* ---- 6.1 Solid brass — the primary call to action ---------------------- */
.sno-action-row .sno-btn-solid,
.expand-actions .expand-main-btn,
.connect-right .subscribe-btn,
.ent-date-btn .ent-btn.btn-buy,
.ent-card-footer .ent-card-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--sk-radius-pill);
  background: var(--sk-grad-brass);
  background-size: 220% 100%;
  background-position: 18% 0;
  color: var(--sk-navy-950);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
              0 8px 22px rgba(212, 175, 55, 0.28);
  transition: background-position var(--sk-dur-slow) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out);
}

.sno-action-row .sno-btn-solid:hover,
.expand-actions .expand-main-btn:hover,
.connect-right .subscribe-btn:hover,
.ent-date-btn .ent-btn.btn-buy:hover,
.ent-card-footer .ent-card-btn:hover {
  background-position: 82% 0;
  color: var(--sk-navy-950);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset,
              0 14px 34px rgba(212, 175, 55, 0.38);
}

.sno-action-row .sno-btn-solid:active,
.expand-actions .expand-main-btn:active,
.connect-right .subscribe-btn:active { transform: translateY(0); }

/* ---- 6.2 Outline ink — the secondary action ---------------------------- */
.promotions-grid .card-btn,
.random-offers-wrapper .offer-btn,
.ent-card-footer .ent-card-btn.btn-secondary,
.related-header .related-view-btn,
.footer-promo-header .footer-view-all,
.month-header-row .month-view-link,
.clean-slider-wrapper .sno-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.72rem 1.6rem;
  border: 1.5px solid var(--sk-navy-700);
  border-radius: var(--sk-radius-pill);
  background: transparent;
  color: var(--sk-navy-700);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

.promotions-grid .card-btn:hover,
.random-offers-wrapper .offer-btn:hover,
.ent-card-footer .ent-card-btn.btn-secondary:hover,
.related-header .related-view-btn:hover,
.footer-promo-header .footer-view-all:hover,
.month-header-row .month-view-link:hover,
.promotions-grid .sno-card:hover .card-btn,
.random-offers-wrapper .offer-card:hover .offer-btn{
  background: var(--sk-navy-700);
  border-color: var(--sk-navy-700);
  color: var(--sk-white);
  box-shadow: 0 8px 20px rgba(11, 61, 104, 0.26);
}

/* The offer/home cards previously used #009FE3 for TEXT on white — 2.97:1,
   below AA. Retained as the family accent but darkened to the ink variant. */
.random-offers-wrapper .offer-btn{
  border-color: var(--sk-cyan-700);
  color: var(--sk-cyan-700);
}

.random-offers-wrapper .offer-btn:hover,
.random-offers-wrapper .offer-card:hover .offer-btn{
  background: var(--sk-cyan-700);
  border-color: var(--sk-cyan-700);
  color: var(--sk-white);
}

/* ---- 6.3 Quiet text link with a chevron -------------------------------- */
.expand-actions .expand-sub-link,
.clean-slider-wrapper .sno-link-rules {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.expand-actions .expand-sub-link i {
  font-size: 0.72em;
  transition: transform var(--sk-dur-base) var(--sk-ease-out);
}

.expand-actions .expand-sub-link:hover i { transform: translateX(3px); }

/* ---- 6.4 Entertainment status pills ------------------------------------
   These are inert states, not actions — flat, no lift, no pointer. */
.ent-date-btn .ent-btn,
.ent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.5rem;
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1.5px solid transparent;
}

.ent-date-btn .ent-btn.btn-sold-out {
  background: var(--sk-status-soldout);
  border-color: var(--sk-status-soldout);
  color: var(--sk-white);          /* 8.9:1 */
  cursor: default;
}

.ent-date-btn .ent-btn.btn-cancelled {
  background: var(--sk-status-cancelled);
  border-color: var(--sk-status-cancelled);
  color: var(--sk-white);          /* 10.6:1 */
  cursor: default;
  text-decoration: line-through;
}

.ent-date-btn .ent-btn.btn-coming-soon {
  background: transparent;
  border-color: var(--sk-border-strong);
  color: var(--sk-status-soon);    /* 7.9:1 on white */
  cursor: default;
}

.ent-date-btn .ent-btn.btn-free {
  background: transparent;
  border-color: var(--sk-status-free);
  color: var(--sk-status-free);    /* 6.6:1 on white */
}

.ent-date-btn .ent-btn.disabled,
.ent-btn.disabled {
  opacity: 1;                       /* opacity would also dim the text */
  background: var(--sk-cloud);
  border-color: var(--sk-border-strong);
  color: var(--sk-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- 6.5 Filter pills (promotions toolbar) ----------------------------- */
.promo-filters .filter-pill {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

/* ---- 6.6 Footer utility buttons ---------------------------------------- */
.footer-mobile-buttons a,
.footer-mobile-buttons button {
  padding: 0.95rem 1.25rem;
  border-radius: var(--sk-radius-sm);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.06em;
  text-align: center;
}

.info-contact .get-directions-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: var(--sk-radius-pill);
  background: rgba(212, 175, 55, 0.1);
  color: var(--sk-gold-300);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.info-contact .get-directions-btn:hover {
  background: var(--sk-grad-brass);
  color: var(--sk-navy-950);
  border-color: var(--sk-gold-300);
}

/* ==========================================================================
   7. CARDS
   Three separate card families exist in the markup. They now share one
   silhouette: hairline border, layered shadow, brass edge on hover.
   ========================================================================== */

/* ---- 7.1 Shared surface ------------------------------------------------ */
.promotions-grid .sno-card,
.random-offers-wrapper .offer-card,
.ent-grid .ent-card,
.jackpot-collage-grid .collage-card,
.month-slider-wrapper .winner-clean-card,
.month-winners-slider-wrap .winner-card,
.jackpot-content .jackpot-card,
.jp-dynamic-feed .jp-wide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sk-surface-raised);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  overflow: hidden;
  box-shadow: var(--sk-shadow-sm);
  transition: transform var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out);
}

/* Brass edge lights along the top on hover — the family tell. */
.promotions-grid .sno-card::before,
.random-offers-wrapper .offer-card::before,
.ent-grid .ent-card::before,
.jackpot-collage-grid .collage-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 3px;
  background: var(--sk-grad-brass);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sk-dur-slow) var(--sk-ease-out);
}

.promotions-grid .sno-card:hover::before,
.promotions-grid .sno-card:focus-within::before,
.random-offers-wrapper .offer-card:hover::before,
.random-offers-wrapper .offer-card:focus-within::before,
.ent-grid .ent-card:hover::before,
.ent-grid .ent-card:focus-within::before,
.jackpot-collage-grid .collage-card:hover::before { transform: scaleX(1); }

.promotions-grid .sno-card:hover,
.random-offers-wrapper .offer-card:hover,
.ent-grid .ent-card:hover,
.jackpot-collage-grid .collage-card:hover,
.month-slider-wrapper .winner-clean-card:hover,
.month-winners-slider-wrap .winner-card:hover,
.jackpot-content .jackpot-card:hover,
.jp-dynamic-feed .jp-wide-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: var(--sk-shadow-lg);
}

/* ---- 7.2 Card media ---------------------------------------------------- */
.promotions-grid .sno-card-image,
.random-offers-wrapper .offer-img-box,
.ent-grid .ent-card-image {
  position: relative;
  overflow: hidden;
  background: var(--sk-cloud);
}

/* SQUARE FRAMES FOR SQUARE ARTWORK (2026-08-15).
   Promotion and entertainment artwork is supplied square -- 2560x2560,
   1667x1667, 1080x1080 -- with the offer copy running to the edges. Under
   object-fit: cover a non-square frame guillotines that copy: 16/10 takes a
   third off the height, 4/5 takes a fifth off the width (10% from each side).

   skagit-promotions.css section 1 already pinned the ARCHIVE cards square with
   --skagit-promo-media-ratio: 1 / 1, applied through .skagit-promo-card. That is
   why /promotions/ and /entertainment/ measured 1/1 while these base rules
   still said 16/10: one escalated rule was carrying them, and nothing carried
   the offers carousel at all, so [skagit_random_offers] cropped on every
   template that runs it. Base and override agree now, so there is no longer a
   single rule holding the whole thing up.

   That override is doubly conditional and this is its safety net: it reads
   aspect-ratio from a custom property scoped to .sno-promo-archive /
   .skagit-promo-single / .skagit-promo-dialog. If a wrapper class is ever
   dropped the var is invalid at computed-value time and aspect-ratio falls to
   `auto` -- NOT back to this rule. With 1/1 here, the fallback ratio at least
   matches the intended one instead of being a 16/10 crop nobody asked for.

   .ent-grid .ent-card-image below is deliberately NOT changed: .ent-grid is
   dining venues, hotel rooms, attractions and page children -- photographs,
   which want a landscape crop. No entertainment post ever renders in it. */
.promotions-grid .sno-card-image { aspect-ratio: 1 / 1; height: auto; }
.random-offers-wrapper .offer-img-box { aspect-ratio: 1 / 1; height: auto; }

.ent-grid .ent-card-image { aspect-ratio: 3 / 2; height: auto; }

.promotions-grid .sno-card-image img,
.random-offers-wrapper .offer-img-box img,
.ent-grid .ent-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sk-dur-lazy) var(--sk-ease-out);
}

.promotions-grid .sno-card:hover .sno-card-image img,
.random-offers-wrapper .offer-card:hover .offer-img-box img,
.ent-grid .ent-card:hover .ent-card-image img { transform: scale(1.06); }

/* Gradient scrim so overlaid badges stay legible on any photo. */
.promotions-grid .sno-card-image::after,
.random-offers-wrapper .offer-img-box::after,
.ent-grid .ent-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 16, 28, 0.42) 0%, rgba(4, 16, 28, 0) 38%);
  pointer-events: none;
}

/* ---- 7.3 Badges / pills over media ------------------------------------- */
.promotions-grid .card-cat-badge,
.random-offers-wrapper .offer-pill,
.ent-grid .ent-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(4, 16, 28, 0.68);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: var(--sk-gold-200);           /* on near-opaque navy: >7:1        */
  font-family: var(--sk-font-body);
  font-size: 0.66rem;
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(4, 16, 28, 0.35);
}

.ent-grid .ent-badge {
  left: auto;
  right: 0.9rem;
  border-color: transparent;
}

.ent-grid .ent-badge.badge-soldout {
  background: var(--sk-status-soldout);
  color: var(--sk-white);
}

.ent-grid .ent-badge.badge-cancelled {
  background: var(--sk-status-cancelled);
  color: var(--sk-white);
}

/* ---- 7.4 Card bodies --------------------------------------------------- */
.promotions-grid .sno-card-body,
.random-offers-wrapper .offer-body,
.ent-grid .ent-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--sk-space-md);
  gap: 0.45rem;
}

.promotions-grid .sno-card-link,
.ent-grid .ent-card-image-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

/* Titles */
.promotions-grid .card-title,
.random-offers-wrapper .offer-title,
.ent-grid .ent-card-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-snug);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
  text-wrap: balance;
}

.random-offers-wrapper .offer-title a,
.ent-grid .ent-card-title a { color: inherit; }

.promotions-grid .sno-card:hover .card-title,
.random-offers-wrapper .offer-card:hover .offer-title a,
.ent-grid .ent-card:hover .ent-card-title a { color: var(--sk-navy-700); }

/* Meta rows */
.promotions-grid .card-meta,
.random-offers-wrapper .offer-meta,
.ent-grid .ent-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-faint);         /* 6.0:1 on white                    */
}

.promotions-grid .card-meta i,
.random-offers-wrapper .offer-meta i,
.ent-grid .ent-meta-row i {
  margin: 0;
  color: var(--sk-accent-ink);         /* 5.8:1 on white                    */
}

body .meta-sep { margin-inline: 0.3rem; color: var(--sk-silver); }

/* Excerpts */
.promotions-grid .card-excerpt,
.random-offers-wrapper .offer-excerpt,
.ent-grid .ent-card-excerpt {
  flex: 1 1 auto;
  margin: 0.25rem 0 var(--sk-space-sm);
  font-size: var(--sk-fs-sm);
  line-height: var(--sk-lh-body);
  color: var(--sk-text-muted);         /* 7.9:1 on white                    */
}

.promotions-grid .card-btn,
.random-offers-wrapper .offer-footer,
.ent-grid .ent-card-footer { margin-top: auto; }

.promotions-grid .card-btn { width: 100%; }

.no-promos,
.no-winners-msg {
  grid-column: 1 / -1;
  padding: var(--sk-space-2xl) 0;
  text-align: center;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-xl);
  color: var(--sk-text-faint);
}

/* ==========================================================================
   8. PROMOTIONS ARCHIVE
   ========================================================================== */

body .sno-promo-archive {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 55%),
    var(--sk-mist);
  padding-block: var(--sk-space-xl) var(--sk-space-3xl);
  min-height: 60vh;
}

.sno-promo-archive .promo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  margin-bottom: var(--sk-space-xl);
  padding-bottom: var(--sk-space-sm);
  border-bottom: 1px solid var(--sk-border);
}

.sno-promo-archive .promo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sno-promo-archive .promo-sorter select {
  padding: 0.6rem 2.4rem 0.6rem 1.1rem;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-pill);
  background-color: var(--sk-white);
  background-image: linear-gradient(45deg, transparent 50%, var(--sk-navy-700) 50%),
                    linear-gradient(135deg, var(--sk-navy-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--sk-text);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sno-promo-archive .promotions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sk-space-md);
  align-items: stretch;
}

/* ==========================================================================
   9. SINGLE PROMOTION / SHARED SINGLE LAYOUT
   ========================================================================== */

body .sno-single-wrapper {
  background: var(--sk-white);
  padding-block: var(--sk-space-2xl) var(--sk-space-3xl);
}

.sno-single-header { margin-bottom: var(--sk-space-lg); }

.sno-single-header .sno-h1 {
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-4xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
  margin: 0;
  text-wrap: balance;
}

.sno-single-wrapper .sno-featured-img { margin-bottom: var(--sk-space-lg); }

.sno-single-wrapper .sno-featured-img img {
  width: min(100%, 640px);
  height: auto;
  margin-bottom: 0;
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-lg);
}

.sno-single-wrapper .sno-single-meta span {
  display: block;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-accent-ink);
  margin-bottom: 0.35rem;
}

.sno-single-wrapper .sno-single-meta .sub-meta {
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--sk-text-faint);
}

.sno-single-wrapper .sno-divider {
  width: 100%;
  height: 1px;
  margin-block: var(--sk-space-lg);
  background: linear-gradient(90deg,
      rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.55) 50%, rgba(212, 175, 55, 0) 100%);
}

.sno-single-wrapper .sno-content-body {
  max-width: var(--sk-measure);
  margin-inline: auto;
  margin-bottom: var(--sk-space-lg);
  text-align: left;
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
  color: var(--sk-text);
}

.sno-single-wrapper .sno-content-body p { color: var(--sk-text); font-size: inherit; }

.sno-single-wrapper .sno-content-body h2,
.sno-single-wrapper .sno-content-body h3 {
  margin-top: var(--sk-space-lg);
}

/* ==========================================================================
   10. RELATED / FOOTER PROMO SECTIONS
   ========================================================================== */

.single-related-section,
.jackpot-footer-promos {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 60%),
    var(--sk-mist);
  border-top: 1px solid var(--sk-border);
  padding-block: var(--sk-space-3xl);
}

.related-header,
.footer-promo-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  margin-bottom: var(--sk-space-lg);
  padding-bottom: var(--sk-space-sm);
  border-bottom: 1px solid var(--sk-border);
}

.related-header .related-title,
.footer-promo-header .footer-promo-title {
  position: relative;
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
}

/* ==========================================================================
   11. CAROUSELS  (Slick)
   Custom arrows carry a Font Awesome <i>; the slick-theme glyph is removed
   for those so no duplicate arrow renders.
   ========================================================================== */

.clean-arrow::before,
.clean-home-arrow::before,
.jp-arrow::before,
.month-prev::before,
.month-next::before { content: none; }

.clean-slider-wrapper .clean-arrow,
.home-slider-container .clean-home-arrow,
.month-slider-wrapper .jp-arrow,
.month-winners-slider-wrap .month-prev,
.month-winners-slider-wrap .month-next {
  position: absolute;
  top: 50%;
  z-index: var(--sk-z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-pill);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: var(--sk-shadow-sm);
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              color var(--sk-dur-base) var(--sk-ease-out),
              border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

.clean-slider-wrapper .clean-arrow { left: auto; }
.clean-slider-wrapper .slick-prev.clean-arrow { left: clamp(-22px, -1.4vw, 0px); right: auto; }
.clean-slider-wrapper .slick-next.clean-arrow { right: clamp(-22px, -1.4vw, 0px); left: auto; }
.home-slider-container .slick-prev.clean-home-arrow { left: clamp(-24px, -1.6vw, 0px); right: auto; }
.home-slider-container .slick-next.clean-home-arrow { right: clamp(-24px, -1.6vw, 0px); left: auto; }
.month-slider-wrapper .jp-prev { left: clamp(-26px, -1.8vw, 0px); }
.month-slider-wrapper .jp-next { right: clamp(-26px, -1.8vw, 0px); }
.month-winners-slider-wrap .month-prev { left: clamp(-26px, -1.8vw, 0px); }
.month-winners-slider-wrap .month-next { right: clamp(-26px, -1.8vw, 0px); }

/* ---- 11.0b Default slick arrows (jackpot viewer is the only consumer) --
   These keep slick-theme's glyph, so the glyph colour must follow the
   button skin or it stays white-on-white. */
.jackpot-viewer-wrapper .jackpot-content .slick-prev,
.jackpot-viewer-wrapper .jackpot-content .slick-next {
  width: 42px;
  height: 42px;
  border: 1px solid var(--sk-border-strong);
  border-radius: var(--sk-radius-pill);
  box-shadow: var(--sk-shadow-sm);
  z-index: var(--sk-z-raised);
}

.jackpot-viewer-wrapper .jackpot-content .slick-prev { left: -14px; }
.jackpot-viewer-wrapper .jackpot-content .slick-next { right: -14px; }

.jackpot-viewer-wrapper .jackpot-content .slick-prev::before,
.jackpot-viewer-wrapper .jackpot-content .slick-next::before {
  color: var(--sk-navy-700);
  opacity: 1;
  font-size: 18px;
  transition: color var(--sk-dur-base) var(--sk-ease-out);
}

.jackpot-viewer-wrapper .jackpot-content .slick-prev:hover::before,
.jackpot-viewer-wrapper .jackpot-content .slick-next:hover::before {
  color: var(--sk-white);
}

/* Slick dots (jackpot viewer uses them) */
.jackpot-content .slick-dots { bottom: -34px; }

.jackpot-content .slick-dots li button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-border-strong);
  opacity: 1;
  transition: background-color var(--sk-dur-base) var(--sk-ease-out),
              width var(--sk-dur-base) var(--sk-ease-out);
}

.jackpot-content .slick-dots li.slick-active button::before {
  width: 22px;
  background: var(--sk-gold-600);
}

/* Slick track alignment for equal-height cards */
.random-offers-slider .slick-track,
.skagit-home-slider .slick-track,
.skagit-promo-slider .slick-track,
.jackpot-slider .slick-track,
.month-winners-slider .slick-track,
.jp-wide-slider .slick-track { display: flex; align-items: stretch; }

.random-offers-slider .slick-slide,
.skagit-home-slider .slick-slide,
.skagit-promo-slider .slick-slide,
.jackpot-slider .slick-slide,
.month-winners-slider .slick-slide,
.jp-wide-slider .slick-slide { height: auto; }

.random-offers-slider .slick-slide > div,
.skagit-home-slider .slick-slide > div,
.skagit-promo-slider .slick-slide > div { height: 100%; }

/* ---- 11.1 Random offers: the draggable brass scrubber ------------------ */
body .random-offers-wrapper {
  position: relative;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-block: var(--sk-space-lg);
}

.random-offers-wrapper .offer-slide-padding { padding: 0.75rem; height: 100%; }

.random-offers-wrapper .offer-scrollbar-container {
  position: relative;
  display: flex;
  align-items: center;
  max-width: min(96%, 720px);
  height: 6px;
  margin: var(--sk-space-md) auto 0;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-cloud);
  box-shadow: inset 0 1px 2px rgba(6, 25, 43, 0.12);
}

.random-offers-wrapper .offer-slider-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.random-offers-wrapper .offer-slider-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 110px;
  height: 6px;
  border: 0;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.5);
  cursor: grab;
}

.random-offers-wrapper .offer-slider-range::-moz-range-thumb {
  width: 110px;
  height: 6px;
  border: 0;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.5);
  cursor: grab;
}

/* The range input is a keyboard control — its focus ring must be obvious. */
.random-offers-wrapper .offer-slider-range:focus-visible {
  outline: var(--sk-focus-width) solid var(--sk-focus-color);
  outline-offset: 8px;
  border-radius: var(--sk-radius-pill);
}






















/* ---- 11.3 Clean promo slider (sno-card variant B) ---------------------- */
body .clean-slider-wrapper { position: relative; padding-block: var(--sk-space-sm); }

.clean-slider-wrapper .clean-slide-padding { padding-inline: 0.75rem; }

.clean-slider-wrapper .sno-card-img {
  border-radius: var(--sk-radius-md);
  overflow: hidden;
  background-color: var(--sk-cloud);
}

.clean-slider-wrapper .sno-card-body h3 {
  margin: var(--sk-space-xs) 0 0.4rem;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  letter-spacing: var(--sk-tracking-display);
}

.clean-slider-wrapper .sno-card-body h3 a { color: var(--sk-navy-900); }
.clean-slider-wrapper .sno-card-body h3 a:hover { color: var(--sk-cyan-700); }

.clean-slider-wrapper .sno-excerpt {
  font-size: var(--sk-fs-sm);
  line-height: var(--sk-lh-body);
  color: var(--sk-text-muted);
}

.clean-slider-wrapper .sno-card-footer-split {
  display: flex;
  align-items: center;
  gap: var(--sk-space-sm);
  margin-top: var(--sk-space-xs);
}

.clean-slider-wrapper .sno-link-rules { color: var(--sk-text-faint); }
.clean-slider-wrapper .sno-link-rules:hover { color: var(--sk-navy-700); }

/* ==========================================================================
   12. BOOKING BAR  [skagit_booking_widget]
   ========================================================================== */

body .skagit-booking-wrapper {
  position: relative;
  z-index: var(--sk-z-raised);
  width: 100%;
  overflow: hidden;
  padding-block: var(--sk-space-md);
  background: var(--sk-grad-sapphire);
  box-shadow: 0 -1px 0 rgba(212, 175, 55, 0.4) inset,
              0 1px 0 rgba(212, 175, 55, 0.4),
              0 18px 40px rgba(4, 16, 28, 0.28);
  font-family: var(--sk-font-body);
}

.skagit-booking-wrapper .booking-pattern {
  position: absolute;
  inset: 0;
  background-image: var(--sk-tex-flute);
  background-size: 9px 100%;
  opacity: 0.75;
  pointer-events: none;
}

.skagit-booking-wrapper .skagit-booking-container {
  position: relative;
  z-index: 2;
}

.skagit-booking-wrapper .skagit-booking-form {
  display: flex;
  align-items: flex-end;
  gap: var(--sk-space-sm);
  width: 100%;
}

.skagit-booking-wrapper .booking-field { flex: 1 1 180px; min-width: 0; }

/*
 * iOS Safari draws `date` and `number` inputs with a NATIVE control that
 * carries its own intrinsic width. That width wins over `width: 100%` above:
 * the control refuses to shrink, overflows its flex item, and lands on top of
 * the field beside it. That is the overlap reported on an iPhone 16 Pro Max
 * and it does not reproduce in a desktop browser at the same viewport width,
 * which is why the widget looks correct in a screenshot and wrong on the phone.
 *
 * There are TWO overlaps, not one, and the layout change alone only fixes the
 * first:
 *
 *   1. Field over field. The mobile single-column rule in
 *      skagit-responsive.css cures this by giving each control its own row.
 *
 *   2. ICON over value. The gold calendar mark below is absolutely positioned
 *      at z-index 2, and the ONLY thing holding the date text clear of it is
 *      `padding-left: 2.6rem` on the input. A natively-drawn control on iOS
 *      discards that padding along with the width and height, so the icon
 *      prints straight over the date. A one-per-row layout does nothing about
 *      this, because the collision is inside a single field.
 *
 * So the appearance IS reset, which makes iOS honour the padding and the width.
 * This is not a new trick in this file — the `<select>` a few rules down has
 * carried the same reset all along; the date and number inputs were simply
 * missed. `min-width: 0` lets the control shrink and `max-width: 100%` stops it
 * escaping its field even if it will not.
 */
.skagit-booking-wrapper .booking-field input[type="date"],
.skagit-booking-wrapper .booking-field input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
}

/*
 * The flex ITEM carries min-width: 0, but these wrappers sit between it and the
 * control and had none, so a field that would not shrink was neither
 * constrained nor clipped at this level — it simply painted outside.
 */
.skagit-booking-wrapper .input-icon-wrap,
.skagit-booking-wrapper .select-wrapper,
.skagit-booking-wrapper .guest-input-group {
  min-width: 0;
}

.skagit-booking-wrapper .booking-field label,
.skagit-booking-wrapper .booking-group-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--sk-gold-300);          /* 8.2:1 on the sapphire ground       */
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
}

.skagit-booking-wrapper .booking-field input,
.skagit-booking-wrapper .booking-field select {
  width: 100%;
  height: 52px;
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-white);
  color: var(--sk-text);
  font-size: var(--sk-fs-base);
  font-weight: var(--sk-weight-semi);
  box-shadow: 0 2px 8px rgba(4, 16, 28, 0.18);
  transition: border-color var(--sk-dur-base) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

/* No transform on focus: a control that jumps as it receives focus is a
   usability problem, and it fights the focus ring's offset. */
.skagit-booking-wrapper .booking-field input:focus,
.skagit-booking-wrapper .booking-field select:focus {
  transform: none;
  border-color: var(--sk-gold-500);
  box-shadow: 0 4px 14px rgba(4, 16, 28, 0.22);
}

.skagit-booking-wrapper .input-icon-wrap,
.skagit-booking-wrapper .select-wrapper,
.skagit-booking-wrapper .guest-input-group { position: relative; }

.skagit-booking-wrapper .input-icon-wrap i,
.skagit-booking-wrapper .select-wrapper i,
.skagit-booking-wrapper .guest-input-group i {
  position: absolute;
  top: 50%;
  z-index: 2;
  color: var(--sk-gold-700);           /* 5.8:1 on the white input          */
  pointer-events: none;
  transform: translateY(-50%);
}

.skagit-booking-wrapper .input-icon-wrap i { left: 0.95rem; }
.skagit-booking-wrapper .input-icon-wrap input { padding-left: 2.6rem; }
.skagit-booking-wrapper .select-wrapper i { right: 0.95rem; }
.skagit-booking-wrapper .select-wrapper select { padding-right: 2.6rem; appearance: none; -webkit-appearance: none; cursor: pointer; }

.skagit-booking-wrapper .guest-inputs { display: flex; gap: 0.6rem; }
.skagit-booking-wrapper .guest-input-group { flex: 1 1 0; min-width: 0; }
.skagit-booking-wrapper .guest-input-group i { left: 0.7rem; font-size: 0.78rem; }

.skagit-booking-wrapper .guest-input-group input {
  padding-left: 2rem;
  padding-right: 3.4rem;
  text-align: left;
}

.skagit-booking-wrapper .guest-label {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  color: var(--sk-text-faint);         /* 6.0:1 on white                     */
  font-size: 0.58rem;
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.1em;
  pointer-events: none;
  transform: translateY(-50%);
}

.skagit-booking-wrapper .booking-submit { flex: 0 0 auto; }

.booking-submit #sb-submit-btn {
  height: 52px;
  padding-inline: clamp(1.5rem, 2.4vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-grad-brass);
  background-size: 220% 100%;
  background-position: 18% 0;
  color: var(--sk-navy-950);           /* 9.0:1 on brass                     */
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset,
              0 10px 26px rgba(212, 175, 55, 0.34);
  transition: background-position var(--sk-dur-slow) var(--sk-ease-out),
              box-shadow var(--sk-dur-base) var(--sk-ease-out),
              transform var(--sk-dur-base) var(--sk-ease-out);
}

.booking-submit #sb-submit-btn:hover {
  background-position: 82% 0;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 16px 36px rgba(212, 175, 55, 0.44);
}

.booking-submit #sb-submit-btn i { margin-left: 0.55em; }

/* ==========================================================================
   13. ENTERTAINMENT
   ========================================================================== */

.entertainment-archive-body { background: var(--sk-white); }

.ent-location-section { padding-block: var(--sk-space-3xl); }
.ent-location-section:nth-of-type(odd)  { background: var(--sk-white); }
.ent-location-section:nth-of-type(even) { background: var(--sk-mist); }

.ent-location-section .location-header { margin-bottom: var(--sk-space-lg); }

.ent-location-section .location-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
}

.ent-location-section .loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.1);
  color: var(--sk-accent-ink);
  font-size: 0.95rem;
}

.ent-location-section .location-desc {
  max-width: var(--sk-measure);
  margin-top: var(--sk-space-xs);
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-body);
}

/* Brass rule under each location header */
.ent-location-section .location-header::after {
  content: "";
  display: block;
  width: clamp(56px, 8vw, 96px);
  height: 2px;
  margin-top: var(--sk-space-sm);
  border-radius: 2px;
  background: var(--sk-grad-brass);
}

.ent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sk-space-md);
  align-items: stretch;
}

/* ---- 13.1 Single entertainment ----------------------------------------- */
.sno-single-wrapper.ent-single-bg {
  position: relative;
  isolation: isolate;
  background: var(--sk-grad-night);
  color: var(--sk-text-on-dark);
}

.ent-single-bg .ent-animated-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sk-tex-flute), var(--sk-tex-vignette);
  background-size: 9px 100%, 100% 100%;
  opacity: 0.9;
  pointer-events: none;
}

.ent-single-bg .relative-z { position: relative; z-index: 1; }

.ent-single-bg .sno-content-body,
.ent-single-bg .sno-content-body p { color: var(--sk-text-on-dark-muted); }

.ent-single-bg .sno-content-body h2,
.ent-single-bg .sno-content-body h3,
.ent-single-bg .sno-content-body h4 { color: var(--sk-white); }

.ent-single-bg .sno-divider {
  background: linear-gradient(90deg,
      rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.55) 50%, rgba(212, 175, 55, 0) 100%);
}

.ent-poster-frame {
  margin-bottom: var(--sk-space-lg);
  border-radius: var(--sk-radius-lg);
  overflow: hidden;
  box-shadow: var(--sk-shadow-dark), 0 0 0 1px rgba(212, 175, 55, 0.28);
}

.ent-poster-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.ent-dates-wrapper {
  display: grid;
  gap: var(--sk-space-xs);
  margin-bottom: var(--sk-space-lg);
}

.ent-dates-wrapper .ent-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  padding: var(--sk-space-sm) var(--sk-space-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sk-radius-lg);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sk-rim-light);
  text-align: left;
}

.ent-dates-wrapper .ent-date-info {
  display: flex;
  align-items: center;
  gap: var(--sk-space-xs);
  min-width: 0;
}

.ent-dates-wrapper .ent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.12);
  color: var(--sk-gold-400);
  font-size: 1rem;
}

.ent-dates-wrapper .ent-date-info h3 {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  text-transform: none;
  color: var(--sk-white);
}

/* Status pills on the dark single page need dark-ground colour values. */
.ent-single-bg .ent-btn.btn-coming-soon {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--sk-text-on-dark);
}

.ent-single-bg .ent-btn.btn-free {
  border-color: var(--sk-gold-500);
  color: var(--sk-gold-400);           /* 10.5:1 on navy                     */
}

.ent-single-bg .ent-btn.disabled {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--sk-text-on-dark-muted); /* 10.0:1 on navy                     */
}

/* ---- 13.2 Countdown timer ---------------------------------------------- */
.ent-glass-timer {
  padding: var(--sk-space-lg) var(--sk-space-md);
  margin-bottom: var(--sk-space-lg);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--sk-radius-xl);
  background: rgba(4, 16, 28, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--sk-rim-light), var(--sk-shadow-dark);
  text-align: center;
}

.ent-glass-timer h4 {
  margin: 0 0 var(--sk-space-sm);
  font-family: var(--sk-font-body) !important;   /* see section 18, note 1  */
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-gold-400);
}

.ent-glass-timer .ent-timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.4rem, 1.4vw, 1rem);
  font-family: var(--sk-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
}

.ent-glass-timer .timer-box {
  min-width: clamp(58px, 8vw, 88px);
  padding: var(--sk-space-xs) 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sk-radius-md);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--sk-rim-light);
  color: var(--sk-white);
}

.ent-glass-timer .timer-box span {
  display: block;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: var(--sk-weight-black);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ent-glass-timer .timer-box small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.6rem;
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-text-on-dark-muted);
  opacity: 1;
}

.ent-glass-timer .timer-dots {
  align-self: center;
  padding-top: 0;
  font-size: 1.4rem;
  color: rgba(212, 175, 55, 0.6);
}

.ent-glass-timer .timer-started {
  font-family: var(--sk-font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sk-gold-400);
}

/* Entrance animation (disabled under prefers-reduced-motion in layer 1) */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--sk-dur-lazy) var(--sk-ease-out),
              transform var(--sk-dur-lazy) var(--sk-ease-out);
}

.fade-in-up.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   14. JACKPOTS
   ========================================================================== */

/* ---- 14.1 Month-group archive (archive-jackpot_month.php) -------------- */
.jackpot-archive-body { background: var(--sk-white); }

.jackpot-month-group { padding-block: var(--sk-space-2xl); }
.jackpot-month-group:nth-of-type(odd)  { background: var(--sk-white); }
.jackpot-month-group:nth-of-type(even) { background: var(--sk-mist); }

.month-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  margin-bottom: var(--sk-space-lg);
  padding-bottom: var(--sk-space-xs);
  border-bottom: 1px solid var(--sk-border);
}

.month-header-row .month-title,
.month-header .month-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);
}

.month-slider-wrapper { position: relative; }

.month-slider-wrapper .winner-clean-card,
.month-winners-slider-wrap .winner-card { border-radius: var(--sk-radius-lg); }

.month-slider-wrapper .winner-slide { padding: 0.6rem; }

.month-slider-wrapper .winner-img-container {
  aspect-ratio: 4 / 5;
  height: auto;
  overflow: hidden;
  background: var(--sk-cloud);
}

.month-slider-wrapper .winner-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.month-slider-wrapper .winner-details {
  padding: var(--sk-space-sm);
  text-align: center;
}

.month-slider-wrapper .winner-details h4 {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-md);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-navy-900);
}

/* ---- 14.2 Term-grouped archive -- removed 2026-08-09 ---------------------
   Its only producer, archive-jackpot_winner.php, was deleted with the
   jackpot_winner post type, which is not registered and has no rows.
   Measured before removal: .jackpot-archive-wrapper and
   .jackpot-hero-section on 0 of 85 rendered urls, 0 database rows,
   0 theme templates. Numbering gap is deliberate. */

/* ---- 14.3 Collage (single-jackpot_month.php) --------------------------- */
.jackpot-collage-wrapper {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(11, 61, 104, 0.05) 0%, rgba(11, 61, 104, 0) 60%),
    var(--sk-mist);
  padding-block: var(--sk-space-2xl) var(--sk-space-3xl);
}

.jackpot-collage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sk-space-md);
}

.jackpot-collage-grid .collage-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
  background: var(--sk-cloud);
}

.jackpot-collage-grid .collage-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sk-dur-lazy) var(--sk-ease-out);
}

.jackpot-collage-grid .collage-card:hover .collage-img-wrap img { transform: scale(1.06); }

.jackpot-collage-grid .collage-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top,
      rgba(4, 16, 28, 0.92) 0%, rgba(4, 16, 28, 0.55) 42%, rgba(4, 16, 28, 0) 100%);
  opacity: 1;
  transition: opacity var(--sk-dur-base) var(--sk-ease-out);
}

.jackpot-collage-grid .collage-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sk-space-sm);
  text-align: center;
}

.jackpot-collage-grid .collage-info h4 {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-md);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  text-transform: none;
  color: var(--sk-white);              /* on a >0.8 alpha scrim: >12:1      */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ---- 14.4 Vertical-tab viewer -- removed 2026-08-09 ----------------------
   Styled [skagit_jackpot_viewer], cut from inc/shortcode-jackpot-viewer.php
   in the same pass. Measured before removal: .jackpot-viewer-wrapper and
   .jackpot-content on 0 of 85 rendered urls, 0 database rows, 0 templates.
   14.3 (Collage) and 14.5 (Modern feed) are untouched -- their owning
   templates are live, and they are left intact even where they reuse the
   same class names. Numbering gap is deliberate. */

/* ---- 14.5 Modern feed  [skagit_jackpot_modern_feed] -------------------- */
.jp-modern-section-wrapper {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--sk-grad-night);
  color: var(--sk-text-on-dark);
  overflow: hidden;
}

.jp-modern-section-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sk-tex-flute), var(--sk-tex-vignette);
  background-size: 9px 100%, 100% 100%;
  pointer-events: none;
}

.jp-dynamic-feed {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--sk-space-2xl) 0 var(--sk-space-2xl) var(--sk-gutter);
}

.jp-wide-slider { width: 100%; min-width: 0; }
.jp-wide-slide-padding { padding-right: var(--sk-space-md); }

.jp-dynamic-feed .jp-wide-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--sk-navy-800);
  box-shadow: var(--sk-shadow-dark), var(--sk-rim-light);
}

.jp-wide-img-box {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sk-navy-950);
}

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

.jp-wide-body { padding: var(--sk-space-sm); text-align: center; }

.jp-wide-body h4 {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-md);
  font-weight: var(--sk-weight-bold);
  color: var(--sk-white);
}

.jp-static-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 42vw, 560px);
  padding: var(--sk-space-xl) var(--sk-gutter);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.jp-static-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      rgba(4, 16, 28, 0.88) 0%, rgba(6, 25, 43, 0.66) 55%, rgba(6, 25, 43, 0.8) 100%);
}

.jp-hero-glass-box {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  padding: var(--sk-space-lg) var(--sk-space-md);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--sk-radius-xl);
  background: rgba(4, 16, 28, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--sk-rim-light), var(--sk-shadow-dark);
  text-align: center;
}

/* Deco corner brackets — the ornament that ties the brand together. */
.jp-hero-glass-box::before,
.jp-hero-glass-box::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--sk-gold-500);
  opacity: 0.8;
  pointer-events: none;
}

.jp-hero-glass-box::before {
  top: 12px; left: 12px;
  border-top: 1px solid; border-left: 1px solid;
}

.jp-hero-glass-box::after {
  bottom: 12px; right: 12px;
  border-bottom: 1px solid; border-right: 1px solid;
}

.jp-hero-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-wrap: balance;
}

.jp-hero-gold-bar {
  width: clamp(56px, 8vw, 88px);
  height: 2px;
  margin: var(--sk-space-sm) auto;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 8px rgba(212, 175, 55, 0.45);
}

.jp-hero-desc {
  margin: 0;
  color: var(--sk-text-on-dark-muted);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-body);
}

/* ==========================================================================
   15. EXPANDING SECTION  [skagit_expanding_section]
   ========================================================================== */

.skagit-expand-trigger {
  position: relative;
  padding-block: var(--sk-space-lg);
  background: var(--sk-paper);
}

.skagit-expand-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 56vw, 760px);
  overflow: hidden;
  /* clip-path is driven inline by the shortcode's scroll script; the radius
     here is the resting state before that script runs. */
  border-radius: var(--sk-radius-xl);
  box-shadow: var(--sk-shadow-xl);
}

.skagit-expand-media { position: absolute; inset: 0; }

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

.skagit-expand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(4, 16, 28, 0.15) 0%, rgba(4, 16, 28, 0.25) 42%, rgba(4, 16, 28, 0.86) 100%);
}

/*
 * THE OFFSET RESET IS LOAD-BEARING — do not delete it as redundant.
 *
 * style.css still carries the original version of this panel from when it was
 * a narrow slab floating over the left of the photo:
 *
 *     .skagit-expand-panel { position: absolute; top: 0; left: 10%; bottom: 0;
 *                            width: 25%; min-width: 400px; }
 *
 * This rule replaced `position` and `width`, but `left` was never cleared, and
 * both rules score (0,1,0) so only the properties named here get overridden.
 * The consequence is not cosmetic: under `position: relative` a `left` is no
 * longer an anchor, it is a RELATIVE SHIFT. The panel keeps its full 100%
 * width and slides 10% of the frame to the right — 170px at a 1700px wrap —
 * so it spans 170 to 1870 inside a 1700 box. `Book Now` sits at the panel's
 * right edge and was therefore rendered past the frame and off the screen,
 * clipped by the viewport. Same 10% overhang at every breakpoint, phones
 * included; it only escaped notice because an ancestor's overflow swallowed
 * the scrollbar that would have advertised it.
 *
 * `min-width` is stale from the same rule and is reset for the same reason:
 * 400px was a floor for a 25%-wide slab, but against `width: 100%` it is a
 * second overflow source on any viewport under 400px.
 */
.skagit-expand-panel {
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  padding: var(--sk-space-xl) var(--sk-gutter);
}

.skagit-expand-panel .panel-inner {
  max-width: var(--sk-container);
  margin-inline: auto;
}

.skagit-expand-panel .expand-title {
  margin: 0 0 var(--sk-space-xs);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-4xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

.skagit-expand-panel .expand-desc {
  max-width: var(--sk-measure);
  margin-bottom: var(--sk-space-md);
  color: #E6EBF1;                       /* >12:1 over the 0.86 alpha scrim  */
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-body);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.skagit-expand-panel .expand-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
}

/* The sub-link's colour is NOT set here. Two rules used to live at this spot —
   gold-300 resting, white on hover — and neither ever painted a pixel: both
   scored (0,2,0), exactly tying `.expand-actions .expand-sub-link` in
   skagit-buttons.css, which loads after this file and therefore won. The live
   declaration is `.skagit-expand-panel .expand-actions .expand-sub-link` in
   skagit-buttons.css §5, raised to (0,3,0) so the tie cannot recur. Left as a
   signpost rather than deleted silently, because a colour that looks set here
   and is ignored at runtime is exactly how the blue-on-navy bug survived. */

/* ==========================================================================
   16. SITE FOOTER
   ========================================================================== */

.site-footer.skagit-footer-interactive {
  position: relative;
  isolation: isolate;
  color: var(--sk-text-on-dark);
  overflow: hidden;
}

.skagit-footer-interactive .footer-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 100% at 12% 0%,  rgba(0, 159, 227, 0.14) 0%, rgba(0, 159, 227, 0) 58%),
    radial-gradient(70% 110% at 88% 8%,  rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0) 58%),
    var(--sk-grad-night);
}

.skagit-footer-interactive .footer-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--sk-tex-flute);
  background-size: 9px 100%;
  opacity: 0.85;
  pointer-events: none;
}

/* Brass hairline capping the footer. */
.site-footer.skagit-footer-interactive::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 2px;
  background: var(--sk-grad-brass);
}

/*
 * ONE OWNER FOR THE FOOTER'S TOP SPACE.
 *
 * style.css gives `.skagit-footer-interactive` a flat `padding-top: 60px`, and
 * this wrap then adds its own --sk-space-2xl on top. The two stacked to 148px of
 * empty space above the logo, against 40px below the copyright — the footer
 * opened with nearly four times the air it closed with, and 60px of that was a
 * leftover from the parent theme that nothing here asked for.
 *
 * Zeroing the legacy half leaves the 2xl/lg pair as the single source, which is
 * a deliberate asymmetry (88px over 40px at desktop — a footer wants more air at
 * its top edge than its bottom) and now sits in rhythm with the 60px between the
 * sections rather than dwarfing it.
 *
 * The selector is doubled to beat style.css's single class without !important.
 */
.site-footer.skagit-footer-interactive {
  padding-top: 0;
}

/*
 * THREE MORE LEGACY / MISSING SEAMS IN THE FOOTER.
 *
 * 1. `.footer-info-bar` carries an un-overridden `margin-bottom: 20px` from
 *    style.css, on top of its own `padding-block` AND its border-bottom.
 *    The border is the separator; the extra 20px just pushes the legal block
 *    away from the line that is supposed to introduce it.
 *
 * 2. `.skagit-fcards` declares `margin-block-start` and no end, so at phone and
 *    tablet widths — where `.footer-mobile-buttons` follows it and has no
 *    margin-top of its own — the fuel cards sit flush against the button stack
 *    with a ZERO-pixel seam. Measured 0px.
 *
 * 3. The sitemap's `li { margin-bottom: 0.55rem }` also applies to the LAST item
 *    in each column, hanging 8.8px below the final link and adding it to the
 *    grid's row gap, so the rows read as unevenly spaced.
 *
 * All three are spacing that no rule intends to own.
 */
.footer-info-bar {
  margin-bottom: 0;
}

.skagit-fcards {
  margin-block-end: var(--sk-space-md);
}

.footer-col ul li:last-child {
  margin-bottom: 0;
}

.footer-content-wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--sk-space-2xl) var(--sk-space-lg);
}

.footer-logo-row { margin-bottom: var(--sk-space-xl); }

.footer-logo-row img {
  width: clamp(180px, 18vw, 260px);
  height: auto;
  background: none;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));

  /*
   * RESERVE THE BOX. The markup carries width="250" and NO height, and LiteSpeed
   * serves a 1x1 base64 GIF placeholder until the real file loads. With no
   * height and no ratio the box takes the placeholder's 1:1 and renders 180x180
   * square; when the real 350x73 wordmark arrives it collapses to 180x38 and
   * every band below it jumps up by about 142px.
   *
   * 350/73 is the actual attachment (TSCR_Horizantal_white.webp), so the space
   * is correct before the image exists and nothing moves on load.
   */
  aspect-ratio: 350 / 73;
}

.footer-links-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sk-space-md) var(--sk-space-sm);
  margin-bottom: var(--sk-space-xl);
}

.footer-col { min-width: 0; }

/* ---- 16.0b THE TALL COLUMN TAKES A DOUBLE TRACK -------------------------
   Visit carries seven links and Entertainment two, and a grid row is as tall
   as its tallest item: at 1440px this row measured 285px while every column
   but Visit had finished by 178px. About 107px of empty navy under four of
   the five columns.

   NOTHING IS MOVED AND NOTHING IS DROPPED. Which links exist is decided by
   which pages exist — skagit_footer_links() silently drops the rest — so a
   hand-balanced arrangement is only balanced on the environment it was
   counted on. This counts instead: a column that reaches SEVEN links takes
   two grid tracks and flows its list two-up, four rows instead of seven. The
   Responsible Gambling link (the copyright row below holds the second copy,
   deliberately) ends up last in the right-hand sub-column, in the same band
   of the footer it was in before.

   SEVEN, and only from 1200px. Both numbers are measured, not chosen. The
   row is auto-fit minmax(150px, 1fr) with a --sk-space-sm column gap (18px at
   these widths), so it affords floor((w + 18) / 168) tracks:
     - 1358px row (1440px screen) → 8 tracks. Five columns with one doubled
       need six; auto-fit collapses the two spare, giving 211px tracks.
     - 1126px row (1200px screen) → 6 tracks. Exactly enough.
     - 955px row (1024px screen) → 5 tracks. One short, and the doubled
       column wrapped onto a second row — measured 373px tall, WORSE than the
       285px it was meant to cure. Hence the 75em gate, the same step
       skagit-responsive.css B.5 already uses.
     - at SIX links the rule would also catch Casino on a site where every
       casino page is published, and two doubled columns need seven tracks —
       one more than 1200px affords. Seven catches only the column that is
       actually the problem. If a second column ever reaches seven,
       re-measure at 1200px before assuming it still fits.

   This adds no column count of its own, only a span, so the B.1 rule in
   skagit-responsive.css — no hard-coded `.footer-links-row` track counts,
   auto-fit already gets it right at every width — still holds, and the one
   surviving 40–62em three-track pin is untouched.

   `:has()` is already relied on ten times in skagit-place.css; where it is
   missing this whole rule is ignored and the footer is what it is today.
   ------------------------------------------------------------------------ */
@media (min-width: 75em) {
  .footer-links-row .footer-col:has(li:nth-child(7)) { grid-column: span 2; }

  .footer-links-row .footer-col:has(li:nth-child(7)) ul {
    columns: 2;
    column-gap: var(--sk-space-md);
  }

  /* A label that wraps must not be split across the column break. */
  .footer-links-row .footer-col:has(li:nth-child(7)) li { break-inside: avoid; }
}

.footer-col h3 {
  margin: 0 0 var(--sk-space-xs);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
  font-family: var(--sk-font-body) !important;   /* see section 18, note 1  */
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-black);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-gold-400);            /* 10.5:1 on the night ground        */
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }

/* THE GAP BELONGS TO THE LINK, NOT TO THE GAP.
 *
 * These links were 20px tall with 8.8px of dead space under each one, so a
 * third of the strip a thumb aims at did nothing. Measured on the phone: 20px
 * targets, 33px centre to centre.
 *
 * That is not actually a WCAG 2.2 SC 2.5.8 failure — 33px of separation clears
 * the 24px spacing exception, and it was reported as a failure before it was
 * measured. It is simply a poor target on a touch screen, which is reason
 * enough on the footer of a resort site people mostly reach from a phone.
 *
 * So the 8.8px moved OUT of the list item and INTO the anchor as padding. The
 * link grows 20px -> 32px, the pitch stays 33px, and every baseline lands
 * exactly where it did before — the footer is not one pixel taller and nothing
 * moves on screen. Only the hit area changed.
 *
 * 1px rather than 0 on the item so two adjacent targets never share an edge.
 */
.footer-col ul li { margin-bottom: 1px; }

.footer-col ul li a {
  display: inline-block;
  padding-block: 6px;                   /* 20px text box -> 32px target       */
  color: var(--sk-text-on-dark-muted);  /* 10.0:1 on the night ground        */
  font-size: var(--sk-fs-sm);
  transition: color var(--sk-dur-fast) var(--sk-ease-out),
              transform var(--sk-dur-fast) var(--sk-ease-out);
}

/* ---- 16.0a The rest of the footer's small targets -----------------------
   Same reasoning as above, applied to the stragglers found in the same sweep.
   All were comfortably clear of the 24px spacing exception, so none was a
   conformance failure; all three were awkward to hit.
   ------------------------------------------------------------------------ */

/* Three stacked links in an 8px-gap flex row, 18px tall. */
.copyright-row a {
  display: inline-block;
  padding-block: 4px;                   /* -> 26px, gap stays 8px             */
}

/* Sits alone in the fuel card's footer, 159px from its nearest neighbour, so
   growing it cannot collide with anything. */
.skagit-fcard__link {
  padding-block: 4px;                   /* 17px -> 25px                       */
}

/* The anchor around the footer logo is `display: inline`, so its box collapsed
   to the 19px line box while the 250px image inside it did the actual work.
   inline-block makes the link wrap the image it contains — the clickable area
   becomes the logo the visitor is already aiming at. */
.footer-logo-row a { display: inline-block; }

.footer-col ul li a:hover {
  color: var(--sk-gold-300);
  transform: translateX(4px);
}

/* ---- 16.1 Connect bar -- REMOVED ---------------------------------------
   The "CONNECT WITH US" panel and its four social icons were deleted from
   footer.php, and this section went with them: `.footer-connect-bar`,
   `.connect-left`, `.connect-title`, `.social-icons`, `.social-icons a` and
   `.connect-right`.

   The icons themselves were not lost -- they are rendered by
   skagit_social_links() in the header utility bar at desktop widths and in the
   drawer below 1025px, which is why the footer copy was redundant.

   `.subscribe-btn` survives on its own in section 6; only the
   `.connect-right .subscribe-btn` compound selectors were dropped from those
   lists. */

/* ---- 16.2 Info bar ------------------------------------------------------ */
.footer-info-bar {
  display: flex;
  align-items: center;
  /* CENTRE, not space-between.
     This row used to hold three children -- the tribe wordmark, the contact
     details and an awards badge -- and `space-between` spread them across the
     width. Both flanking items have been removed, and with a SINGLE child
     `space-between` degrades to `flex-start`: measured at 1430px the contact
     details sat flush against the left edge with a 913px void to their right.
     If a second item ever returns to this row, `space-between` is the value to
     restore. */
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sk-space-md);
  padding-block: var(--sk-space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* `.info-tribe` (the feather icon + "Upper Skagit Indian Tribe" wordmark) was
   deleted along with its markup. Unlike `.award-circle` and `.footer-mark`, it is
   not coming back: the tribe is named in full in the legal line at the foot of
   the page, so a second abbreviated attribution in this row was the same
   statement twice. */

.info-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  color: var(--sk-text-on-dark-muted);
  font-size: var(--sk-fs-sm);
}

.info-awards { display: flex; gap: 0.6rem; }

.award-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--sk-radius-pill);
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.08);
  color: var(--sk-gold-300);
  font-family: var(--sk-font-body);
  font-size: 0.62rem;
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--sk-rim-light);
}

/* ---- 16.3 Copyright ----------------------------------------------------- */
.footer-copyright {
  padding-top: var(--sk-space-md);
  font-size: var(--sk-fs-xs);
  color: var(--sk-text-on-dark-muted);
}

.copyright-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
}

.copyright-row a { color: inherit; }
.copyright-row a:hover { color: var(--sk-gold-300); }

.responsible-gaming {
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--sk-radius-pill);
  color: var(--sk-gold-300);
  font-weight: var(--sk-weight-bold);
  letter-spacing: 0.06em;
}

.responsible-gaming:hover {
  background: rgba(212, 175, 55, 0.14);
  color: var(--sk-gold-200);
}

/* ==========================================================================
   17. REWARDS PROMO
   NOTE: these class names exist in the legacy style.css but no template or
   shortcode in this theme prints them. Styled defensively; see the report.
   ========================================================================== */

.skagit-rewards-promo .rewards-promo-title {
  font-family: var(--sk-font-display);
  letter-spacing: var(--sk-tracking-display);
}

.skagit-rewards-promo .rewards-promo-btn {
  border-radius: var(--sk-radius-pill);
  background: var(--sk-grad-brass);
  color: var(--sk-navy-950);
  font-weight: var(--sk-weight-black);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skagit-rewards-promo .rp-icon { color: var(--sk-gold-500); }

/* ==========================================================================
   18. CASCADE OVERRIDES REQUIRED BY LEGACY !important
   --------------------------------------------------------------------------
   style.css declares several rules with !important. An !important
   declaration can only be overridden by another !important declaration —
   raising specificity does NOT help. Each block below states which legacy
   rule it exists to defeat. Nothing else in these three files uses
   !important except the reduced-motion kill switch in layer 1.

   NOTE 1 (font-family on headings)
     style.css    h1..h6 { font-family: var(--sk-font-display) !important }
     Layer 1 flips headings to the serif display stack with !important.
     A handful of headings above are eyebrow/label roles rather than display
     roles (.footer-col h3, .jackpot-nav-title,
     .ent-glass-timer h4) and are flipped BACK to the body face — which
     again requires !important, for the same reason.
   ========================================================================== */

/* NOTE 2 (component buttons)
   style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule forces every <button>, input[type=button|submit] and
   .elementor-button to navy background / white text / navy border with
   !important, and gold on hover. That is correct for generic theme buttons
   but wrong for the carousel arrows, filter pills, drawer close control and
   the booking CTA, which are components with their own skins. Reset only
   those, by explicit class — the global rule still governs everything else. */
.promo-filters .filter-pill,
.clean-slider-wrapper .clean-arrow,
.home-slider-container .clean-home-arrow,
.month-slider-wrapper .jp-arrow,
.month-winners-slider-wrap .month-prev,
.month-winners-slider-wrap .month-next,
.mobile-drawer-header .drawer-close-btn,
.jackpot-content .slick-prev,
.jackpot-content .slick-next {
  background-color: var(--sk-white) !important;
  color: var(--sk-navy-700) !important;
  border-color: var(--sk-border-strong) !important;
}

.promo-filters .filter-pill:hover,
.promo-filters .filter-pill.active,
.clean-slider-wrapper .clean-arrow:hover,
.home-slider-container .clean-home-arrow:hover,
.month-slider-wrapper .jp-arrow:hover,
.month-winners-slider-wrap .month-prev:hover,
.month-winners-slider-wrap .month-next:hover,
.jackpot-content .slick-prev:hover,
.jackpot-content .slick-next:hover {
  background-color: var(--sk-navy-700) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-navy-700) !important;
}

/* The active filter pill wears the brass, not the navy — it is the state
   that matters most on the promotions archive. */
.promo-filters .filter-pill.active {
  background-color: transparent !important;
  background-image: var(--sk-grad-brass) !important;
  color: var(--sk-navy-950) !important;   /* 9.0:1 on brass                  */
  border-color: var(--sk-gold-300) !important;
}

/* Drawer close sits on the dark drawer, so it inverts. */
.mobile-drawer-header .drawer-close-btn {
  background-color: transparent !important;
  color: var(--sk-gold-400) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--sk-radius-sm);
  font-size: 1.15rem;
  cursor: pointer;
}

.mobile-drawer-header .drawer-close-btn:hover {
  background-color: rgba(212, 175, 55, 0.16) !important;
  color: var(--sk-gold-200) !important;
}

/* The booking CTA is the single most important control on the site; the
   generic navy button style would bury it in its own navy band. */
.booking-submit #sb-submit-btn {
  background-color: transparent !important;
  background-image: var(--sk-grad-brass) !important;
  color: var(--sk-navy-950) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.booking-submit #sb-submit-btn:hover {
  background-color: transparent !important;
  background-image: var(--sk-grad-brass) !important;
  color: var(--sk-navy-950) !important;
  border-color: var(--sk-gold-200) !important;
}

/* Entertainment "Sold Out"/"Cancelled" render as <button>/<span>; the state
   colour must survive the generic navy rule or the status is lost. */
.ent-date-btn .ent-btn.btn-sold-out,
.ent-grid .ent-badge.badge-soldout {
  background-color: var(--sk-status-soldout) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-status-soldout) !important;
}

.ent-date-btn .ent-btn.btn-cancelled,
.ent-grid .ent-badge.badge-cancelled {
  background-color: var(--sk-status-cancelled) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-status-cancelled) !important;
}

.ent-date-btn .ent-btn.disabled,
.ent-btn.btn-buy.disabled {
  background-color: var(--sk-cloud) !important;
  color: var(--sk-text-muted) !important;
  border-color: var(--sk-border-strong) !important;
}

/* NOTE 3 (header ground)
   style.css sets .site-header.modern-header { background: linear-
   gradient(#0b3d68 -> #1e5799 -> #15467d) !important; }. The mid-blue is the
   least "resort" surface on the site. The night ground is painted on
   ::after in section 2 (which needs no !important), but the legacy gradient
   would still show through the ::after's radial highlights, so it is
   neutralised here. */
.site-header.modern-header {
  background-color: var(--sk-navy-950) !important;
  background-image: none !important;
}

/* NOTE 4 (input focus)
   style.css sets `border-color: ... !important; outline: none;`.
   Only border-color carries !important, so the focus RING from layer 1
   already wins on source order. The border colour is restated here purely
   so the ring and the field border agree. */
.skagit-booking-wrapper input:focus-visible,
.skagit-booking-wrapper select:focus-visible,
.sno-promo-archive select:focus-visible {
  border-color: var(--sk-gold-500) !important;
}

/* ==========================================================================
   ENTERTAINMENT ARCHIVE — UPCOMING-SHOWS COUNT LINE
   --------------------------------------------------------------------------
   Sits under the H1 on the entertainment archive, matching the compact header
   lockup used by the promotions internals. Placed in THIS file, not
   skagit-home.css, because that sheet is enqueued on the front page only and
   a rule for an archive route would never load from there.
   ========================================================================== */
.ent-count-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.ent-count-line i { color: #7C6218; }
.ent-count-line strong { font-weight: 700; }
/* ==========================================================================
   CARD IMAGE FALLBACK
   --------------------------------------------------------------------------
   Used by the dining and hotels templates when a record has no featured
   image. A tinted panel with the section's icon, rather than pointing at a
   placeholder.jpg that does not exist in this theme and would 404 in the
   network tab on every card. Marked aria-hidden in the markup, so it adds
   nothing to the accessibility tree.
   ========================================================================== */
.ent-card-image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0) 62%),
    linear-gradient(180deg, #16354F 0%, #0E2740 100%);
  color: rgba(240, 212, 128, 0.55);
  font-size: 2.25rem;
}
/* ==========================================================================
   DEFAULT PAGE BODY  (page.php)
   --------------------------------------------------------------------------
   Applies to every page without a template of its own, which after the
   2026-07-25 audit was ~25 of 29. The single biggest problem was measure:
   Privacy Policy is 1061 words and Rewards Club 880, and both ran the full
   container width — roughly 150 characters per line at 1440px, about double
   the readable maximum. Everything else here follows from fixing that.
   ========================================================================== */
.skagit-page-body {
  padding-block: clamp(2rem, 3.6vw, 3.5rem);
}

.skagit-page-content {
  max-width: 72ch;
  margin-inline: auto;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.7;
}

.skagit-page-content > * + * { margin-block-start: 1.15em; }

.skagit-page-content h2 {
  margin-block-start: 2em;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  text-wrap: balance;
}

.skagit-page-content h3 {
  margin-block-start: 1.6em;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.25;
}

/* A brass rule under h2 so long pages have visible section boundaries when
   scanned rather than read. */
.skagit-page-content h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-block-start: 0.5rem;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(212,175,55,0.95) 0%, rgba(212,175,55,0) 100%);
}

.skagit-page-content ul,
.skagit-page-content ol { padding-inline-start: 1.35em; }
.skagit-page-content li + li { margin-block-start: 0.4em; }

.skagit-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sk-radius-md, 10px);
}

/* Migrated buttons: the WPBakery cleanup left these as bare links with a
   class. Given the button skin so they stop reading as body text. */
.skagit-page-content .skagit-migrated-btn {
  display: inline-block;
  margin-block-start: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #B08D28 0%, #D4AF37 18%, #F0D480 52%, #D4AF37 100%);
  color: #2B1B00;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9375rem;
}

.skagit-page-content .skagit-migrated-btn:hover,
.skagit-page-content .skagit-migrated-btn:focus-visible {
  filter: brightness(1.06);
}

/* Tables arrive from the migration unstyled and can overflow on a phone. */
.skagit-page-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.skagit-page-content th,
.skagit-page-content td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(43, 48, 56, 0.12);
  text-align: start;
}

/* Child-page cards sit outside the reading measure — they are a grid, not
   prose, and should use the full container. */
.skagit-page-children {
  max-width: none;
  margin-block-start: clamp(2.5rem, 4.5vw, 4rem);
}

.skagit-page-children .section-title {
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
  text-align: center;
}

.skagit-page-pagination {
  margin-block-start: 2rem;
  text-align: center;
}
/* ==========================================================================
   TEXT-OVER-IMAGE: THE HOUSE RULE
   --------------------------------------------------------------------------
   Standing requirement from the owner: when text sits on a photograph, the
   PHOTOGRAPH MUST STILL READ. A panel that covers the subject defeats the
   reason the photo is there.

   Three rules, applied here and to be applied to any new overlay:
     1. NEVER a solid or near-solid panel behind overlay text. Use a gradient
        scrim that is transparent where the subject is and opaque only where
        the words are.
     2. The scrim darkens the BOTTOM THIRD ONLY. The top of the frame stays
        clear so the image is legible as an image.
     3. Light text needs a real scrim underneath it, not a text-shadow alone.
        Shadows fail over a bright patch of photo; a scrim cannot.

   WHAT WAS WRONG
   `.skagit-expand-panel` carried `background: rgba(255,255,255,0.85)` — a
   304px near-opaque white slab across a 634px image, with WHITE title text on
   it. Both problems at once: the picture was hidden and the words were white
   on white. The dark scrim the text was designed for was already present
   underneath and was simply being covered up.
   ========================================================================== */

/* The scrim does the contrast work; the panel is only a positioning box. */
.skagit-expand-wrap .skagit-expand-panel {
  background: transparent;
  backdrop-filter: none;
}

/* Rebalanced so the image is untouched for the top ~40% and the ramp happens
   under the text. Bottom stop raised 0.86 -> 0.92: measured against the
   brightest pixels of the suite photo (the white bedding), 0.86 left the
   description at roughly 3.9:1. 0.92 clears 7:1 on the same pixels. */
.skagit-expand-wrap .skagit-expand-overlay {
  background: linear-gradient(180deg,
      rgba(4, 16, 28, 0) 0%,
      rgba(4, 16, 28, 0.06) 38%,
      rgba(4, 16, 28, 0.55) 68%,
      rgba(4, 16, 28, 0.92) 100%);
}

/* Cap the panel so it can never grow past the bottom half of the frame,
   whatever the copy length. */
.skagit-expand-wrap .skagit-expand-panel {
  max-height: 55%;
  overflow: hidden;
}

.skagit-expand-wrap .expand-desc {
  color: #EEF3F8;
}

/* ---- The same rule, applied to the card grids ---------------------------
   `.ent-card` overlays a title on a photo in some states. Kept consistent so
   there is one overlay treatment across the site rather than per-component
   guesses. */
.ent-card-image {
  position: relative;
}

.ent-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(4, 16, 28, 0) 55%,
      rgba(4, 16, 28, 0.35) 100%);
}

/* ==========================================================================
   16.4 THE SECONDARY MARK, AND THE LEGAL ENTITY
   --------------------------------------------------------------------------
   `.award-circle` (16.2 above) is now DEAD CSS. The three BEST / WIN / 2026
   circles it styled were removed from footer.php because they looked like a
   third-party award while naming no awarding body and no category, and nothing
   in the site, the database or production substantiates the claim. The rules are
   left in place rather than deleted so that a real accolade -- with a body, a
   category and a year -- can be dropped straight back in.

   What replaces them states only what is verifiable: the name and the place.
   ====================================================================== */

.footer-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: var(--sk-radius-md);
  background:
    radial-gradient(120% 140% at 50% 0%,
      rgba(212, 175, 55, 0.12) 0%,
      rgba(212, 175, 55, 0) 70%),
    rgba(255, 255, 255, 0.02);
  box-shadow: var(--sk-rim-light);
  text-align: center;
}

/* The monogram carries the whole mark, so it gets the display face and the
   gold gradient the wordmark uses elsewhere. `background-clip: text` needs a
   transparent fill; the `color` above it is the fallback for anything that
   cannot clip, so the letters are never invisible. */
.footer-mark__monogram {
  font-family: var(--sk-font-display);
  font-size: 1.75rem;
  font-weight: var(--sk-weight-black);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--sk-gold-300);
  background: var(--sk-grad-brass);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-mark__monogram {
    -webkit-text-fill-color: transparent;
  }
}

.footer-mark__rule {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(212, 175, 55, 0) 0%,
    var(--sk-gold-500) 50%,
    rgba(212, 175, 55, 0) 100%);
}

.footer-mark__name,
.footer-mark__place {
  font-size: 0.6rem;
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-mark__name  { color: var(--sk-gold-300); }
.footer-mark__place { color: var(--sk-text-on-dark-muted); }

/* THIS SLOT IS INTENTIONALLY EMPTY.
   It held three award circles, then a monogram badge, and now nothing -- see
   footer.php. The rules are kept because this is where a genuine accolade goes
   if one ever exists, and because `.footer-info-bar` is centred on the
   assumption that it has one child; adding a badge back here needs that
   `justify-content` reconsidered at the same time. */
.info-awards {
  justify-content: flex-end;
  align-items: center;
}

/* ---- The legal entity ----------------------------------------------------
   Centred and on its own line above the copyright row. In a comma-separated
   list of links a d/b/a reads as another link; alone and centred it reads as
   what it is. Tracked out slightly so it holds the width without needing size.
   Hairline above rather than a margin, so it is visibly a separate register
   from the links above it. */
.footer-entity {
  /*
   * ONE declaration, not two. This carried `margin-top` AND `padding-top` of the
   * same token, and with no border-top between them (see the note below) they
   * were indistinguishable — 40px of seam where 20px was intended, measured at
   * 390px. The margin is kept because it collapses correctly against the band
   * above; the padding is gone.
   */
  margin-top: var(--sk-space-md);
  /* NO border-top. `.footer-info-bar` immediately above already draws a
     `border-bottom` (16.2, line ~2666), so a rule here put TWO hairlines about
     20px apart -- the "double line" in the footer. The spacing is kept; only
     the second rule is gone. */
  text-align: center;
}

.footer-entity__line {
  margin: 0;
  color: var(--sk-text-on-dark);
  font-size: clamp(0.75rem, 0.35vw + 0.66rem, 0.875rem);
  font-weight: var(--sk-weight-semi);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The copyright row sat directly under the info row and read as part of it. Now
   that the entity line separates them, the row above no longer needs its own
   rule, and the three items centre instead of drifting apart at wide widths. */
.footer-copyright {
  border-top: 0;
}

.copyright-row {
  justify-content: center;
  gap: var(--sk-space-sm) var(--sk-space-md);
  text-align: center;
}

/* `.responsible-gaming { margin-left: auto }` (style.css) pushed this to the
   far right of the row, which only worked while the row was justified apart.
   With the row centred, auto margin re-introduces the gap it used to fill. */
.copyright-row .responsible-gaming {
  margin-left: 0;
}

@media (max-width: 767px) {

  /* At phone width the mark is the only thing in its row, so it centres rather
     than hugging an edge that is no longer there. */
  .info-awards {
    justify-content: center;
  }

  .footer-mark {
    padding: 0.75rem 1.2rem;
  }

  /* Nowrap is right at desktop and wrong here -- "Casino Resort" and
     "Bow, Washington" both fit a phone, but only if they are allowed to. */
  .footer-mark__name,
  .footer-mark__place {
    white-space: normal;
  }

  .footer-entity__line {
    letter-spacing: 0.05em;      /* tracking that reads at 14px is too loose at 12 */
  }
}

@media (forced-colors: active) {

  .footer-mark {
    border-color: CanvasText;
    background: Canvas;
  }

  .footer-mark__monogram {
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    background: none;
  }

  .footer-mark__rule {
    background: CanvasText;
  }
}


/* ==========================================================================
   16.5 [skagit_gallery]
   --------------------------------------------------------------------------
   Column count arrives as `--sk-gal-cols` from the shortcode rather than as a
   class per count, so a four-column gallery needs no new CSS. `minmax(0, 1fr)`
   because `1fr` alone is `minmax(auto, 1fr)` and a wide image then refuses to
   shrink below its intrinsic width, which is what pushes a grid past its
   container and puts a horizontal scrollbar on the page.

   Two columns on phones, never one: these are dishes and details, and a
   single-column gallery of fourteen images is a scroll, not a gallery.
   ====================================================================== */

.skagit-gallery {
  margin-block: var(--sk-space-xl);
}

.skagit-gallery__title {
  margin-bottom: var(--sk-space-xs);
}

.skagit-gallery__intro {
  max-width: 62ch;
  margin-bottom: var(--sk-space-md);
  color: var(--sk-text-muted);
}

.skagit-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The gutter opens up from tablet, but the COLUMN COUNT does not — see below.
 */
@media (min-width: 48em) {
  .skagit-gallery__grid {
    gap: var(--sk-space-md);
  }
}

/*
 * THE THIRD COLUMN WAITS FOR 992px, NOT 768px.
 *
 * The shortcode's `columns` attribute is a DESKTOP intent, and applying it from
 * 768px made the cells smaller on a tablet than the same gallery gets on a
 * phone-plus width. Measured on Tacos & Tequila, whose gallery asks for 3:
 *
 *     viewport   was              now
 *     440        2 cols @ 188px   2 cols @ 188px
 *     768        3 cols @ 221px   2 cols @ 340px
 *     1024       3 cols @ 302px   3 cols @ 302px
 *     1440       3 cols @ 344px   3 cols @ 344px
 *
 * A tablet has the width for two generous frames or three cramped ones, and
 * these are photographs of food — the point is to see them. Two columns of 340px
 * costs some height and returns 2.4x the picture area.
 *
 * 62em is the theme's desktop breakpoint (skagit-responsive.css B.4), so the
 * third column arrives with the rest of the desktop layout rather than on a
 * breakpoint of its own.
 */
@media (min-width: 62em) {
  .skagit-gallery__grid {
    grid-template-columns: repeat(var(--sk-gal-cols, 3), minmax(0, 1fr));
  }
}

.skagit-gallery__cell {
  margin: 0;
  overflow: hidden;
  border-radius: var(--sk-radius-md);
  background: var(--sk-surface-2, rgba(0, 0, 0, 0.04));
}

/* The trigger is a real <button>, so the UA default border, padding and
   background all have to go before it can look like an image. `display: block`
   and a zeroed line-height stop the inline-baseline gap under the image. */
/*
 * THE SELECTOR IS DOUBLED ON PURPOSE — DO NOT SIMPLIFY IT BACK.
 *
 * The lightbox trigger is a real `<button type="button">`, and the site's
 * reset.css carries `[type="button"], [type="submit"], button { padding:
 * 0.5rem 1rem; border: 1px solid ...; display: inline-block }`. `[type="button"]`
 * is an attribute selector, so it scores (0,1,0) — exactly the same as a single
 * class. A lone `.skagit-gallery__btn` TIES with it, and on a tie the later
 * stylesheet wins, which is reset.css.
 *
 * The visible result was that every thumbnail lost 32px of width to the reset's
 * horizontal padding and 2px to its border: a 182px cell rendered a 148px
 * image, leaving ragged gutters between the columns. It looked like a broken
 * grid, but the grid was correct all along — the button around the image was
 * padded.
 *
 * `.skagit-gallery .skagit-gallery__btn` scores (0,2,0) and wins cleanly, so no
 * !important is needed. This was never mobile-only; the 3-column desktop grid
 * lost the same 34px per cell.
 */
.skagit-gallery .skagit-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

.skagit-gallery__cell img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--sk-dur-med) var(--sk-ease-out);
}

/* Scale the image inside a clipped cell rather than the cell itself: growing
   the cell would reflow the grid and shift every neighbour. */
.skagit-gallery__btn:hover img,
.skagit-gallery__btn:focus-visible img {
  transform: scale(1.05);
}

.skagit-gallery__btn:focus-visible {
  outline: 3px solid var(--sk-gold-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .skagit-gallery__cell img { transition: none; }

  .skagit-gallery__btn:hover img,
  .skagit-gallery__btn:focus-visible img { transform: none; }
}

/* A single wide image -- a menu board, a floor plan -- reads better as one
   frame than as a grid cell cropped to 4:3, so it keeps its own proportions. */
.skagit-gallery--sheet .skagit-gallery__grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin-inline: auto;
}

.skagit-gallery--sheet .skagit-gallery__cell img {
  aspect-ratio: auto;
  object-fit: contain;
}

/* A one-column gallery must not be overridden to two columns on phones. */
.skagit-gallery[style*="--sk-gal-cols: 1"] .skagit-gallery__grid {
  grid-template-columns: minmax(0, 1fr);
}


/* ==========================================================================
   16.6 DOCUMENT DOWNLOAD LINKS — INCLUDING THE PENDING STATE
   --------------------------------------------------------------------------
   These are fully styled and ready, then hidden, so that attaching a PDF later
   is a content edit and not a design job.

   >>> TO ACTIVATE A BLOCK: in the page content, delete `skagit-doc-links--pending`
       from the wrapper's class list and put the media URL in each anchor's href.
       Nothing else. The styling below already applies. <<<

   WHY `display: none` AND NOT AN HTML COMMENT: a commented-out block cannot be
   styled, cannot be checked for layout, and rots silently — nobody notices that
   the markup drifted from the CSS until it is uncommented and looks broken. This
   way the buttons are real elements that were laid out and measured before being
   hidden, so switching them on is verified in advance.

   It also means they are hidden from EVERYONE, including screen readers, which is
   correct: a download that does not exist yet must not be announced.
   ====================================================================== */

.skagit-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  margin-block: var(--sk-space-lg);
}

.skagit-doc-links--pending {
  display: none;
}

.skagit-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(11, 31, 51, 0.16);
  border-radius: var(--sk-radius-md);
  background: #fff;
  color: var(--sk-text, #16354f);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 31, 51, 0.06);
  transition: border-color var(--sk-dur-fast) var(--sk-ease-out),
              box-shadow var(--sk-dur-fast) var(--sk-ease-out),
              transform var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-doc-link:hover,
.skagit-doc-link:focus-visible {
  border-color: var(--sk-gold-500);
  box-shadow: 0 6px 16px -6px rgba(11, 31, 51, 0.25);
  transform: translateY(-1px);
  color: var(--sk-text, #16354f);
}

/* The icon sits in its own tinted tile so the row reads as documents rather than
   as a row of ordinary buttons. */
.skagit-doc-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--sk-radius-sm, 8px);
  background: rgba(212, 175, 55, 0.14);
  color: #8A6D1F;
  font-size: 1rem;
}

.skagit-doc-link__body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

/* "PDF · 2 pages" and the like. Set from the content, not generated, so it can
   state what the file actually is once one is attached. */
.skagit-doc-link__meta {
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-normal, 400);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .skagit-doc-link { transition: none; }
  .skagit-doc-link:hover,
  .skagit-doc-link:focus-visible { transform: none; }
}

@media (forced-colors: active) {
  .skagit-doc-link { border-color: CanvasText; }
  .skagit-doc-link__icon { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}


/* ==========================================================================
   16.7 THE HERO LEDE — SHORT INTROS BELONG IN THE HERO
   --------------------------------------------------------------------------
   THE PROBLEM THIS SOLVES: on Casino, Responsible Gambling and a dozen others,
   the page opened with a full-bleed photographic hero and then a single short
   paragraph sitting by itself on white, left-aligned, with nothing beside it.
   Three lines of text alone in a wide white band reads as leftover rather than
   as an introduction, and it pushed the page's actual content a screen further
   down.

   Short intros now render INSIDE the hero, over the photograph, on a blurred
   dark plate. `template-parts/page-hero.php` decides what counts as short and
   hoists it; this is only the surface it lands on.

   WHY A PLATE AND NOT PLAIN TEXT ON THE PHOTO: a photograph has no contrast
   guarantee anywhere. A casino floor is bright in the middle and dark at the
   edges, so white text over it passes in one place and fails in another. The
   plate puts the text on a known ground at every crop.

   THE ALPHA IS SET BY THE WORST CASE, NOT BY TASTE. The plate can land on a
   near-white part of the image -- the Casino hero is a brightly lit slot floor --
   and the hero scrim beneath it is deliberately transparent across the top of the
   frame, so the scrim cannot be relied on to darken anything.

   Composited over PURE WHITE, white text on this plate measures:
       alpha 0.42  ->  rgb(150,154,159)   2.83:1   FAILS
       alpha 0.55  ->  rgb(117,122,129)   4.32:1   FAILS
       alpha 0.60  ->  rgb(104,110,118)   5.15:1   passes
   0.60 is the floor and is used for BOTH variants. An earlier revision of this
   file shipped 0.55 flat and 0.42 behind `@supports`; both looked better and both
   failed AA on the exact page the plate was built for.

   `backdrop-filter` is a progressive enhancement, NOT the contrast mechanism: the
   flat rgba carries the ratio on its own, so a browser without blur support loses
   only the softness.
   ========================================================================== */

.skagit-hero-lede {
  max-width: 62ch;
  margin: var(--sk-space-md) 0 0;
  padding: 0.9rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--sk-radius-lg);
  background: rgba(4, 14, 26, 0.6);
  color: #fff;
  font-family: var(--sk-font-body);
  font-size: clamp(0.9375rem, 0.35vw + 0.86rem, 1.0625rem);
  line-height: 1.6;
  text-wrap: pretty;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.55);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .skagit-hero-lede {
    /* The SAME 0.6 as the flat version. The blur must not buy softness with
       contrast; only the blur is added here. */
    background: rgba(4, 14, 26, 0.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

.skagit-hero-lede p { margin: 0; color: inherit; }
.skagit-hero-lede p + p { margin-top: 0.55rem; }

/* Links inside the plate need to read as links against a dark ground, which the
   body link colour does not — it was chosen for white. */
/* >>> PROSE LINKS ONLY. A BUTTON INSIDE THE PLATE KEEPS ITS OWN LABEL. <<<
   This rule is for a link written into the lede sentence, and it was reaching
   the Employment page's "See current job openings" button as well, because that
   button sits inside this plate.

   The collision was invisible in the source and obvious on screen. `.skagit-hero-lede a`
   is (0,1,1); the button's own colour comes from `.sk-btn` at (0,1,0), so this
   rule won and repainted the label gold on brass -- about 1.8:1, against a 4.5:1
   minimum. Hovering turned it white on brass, about 3:1, which is why hover
   looked "better" while still failing. The button was designed with a dark navy
   label measured at 6.10:1 and documented as such in skagit-buttons.css; that
   label was simply being overwritten.

   `:not()` rather than a more specific rule for the button: the fix belongs
   where the over-reach is, and this keeps the button's own stylesheet the single
   place its colours are decided. Any future component dropped into a lede gets
   the same protection by adding its class here. */
.skagit-hero-lede a:not(.sk-btn):not(.button) {
  color: var(--sk-gold-300, #E4C766);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.skagit-hero-lede a:not(.sk-btn):not(.button):hover,
.skagit-hero-lede a:not(.sk-btn):not(.button):focus-visible { color: #fff; }

/* The photographic hero centres its lockup; the plate follows it rather than
   hanging off to one side. */
.skagit-page-hero--photo .skagit-hero-lede,
.skagit-page-hero--media .skagit-hero-lede {
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 47.99em) {
  .skagit-hero-lede {
    padding: 0.8rem 1rem;
    /* A 62ch plate on a phone is the whole screen, so the rounded corners stop
       reading as a plate at all. Tighter radius keeps the shape legible. */
    border-radius: var(--sk-radius-md);
  }
}

@media (forced-colors: active) {
  .skagit-hero-lede {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .skagit-hero-lede a { color: LinkText; }
}


/* ==========================================================================
   16.8 THE FACT PANEL AS A GRID CARD
   --------------------------------------------------------------------------
   `.skagit-factbox` is now injected as the first item INSIDE `.skagit-sections`
   (page.php) instead of sitting above it. On Responsible Gambling it had been a
   single narrow "Call 800-547-6133" panel floating alone on white above seven
   cards it obviously belonged with.

   >>> THE OVERRIDE THAT MATTERS IS THE FLOAT. skagit-place.css sets
       `float: inline-end; width: min(340px, 38%)` at 62em and up, because the
       panel was designed to sit beside running prose. As a grid item the float is
       ignored for layout but THE WIDTH IS NOT, so the panel rendered 340px wide
       in a 434px column — narrower than every card beside it and visibly wrong.
       Both have to be undone here, not just the float. <<<

   It stays ONE column wide. Spanning the row was tried and is worse: the panel
   is about 92px tall, so a full-width version is a long thin band above the
   cards, which is the same "floating alone" problem in a different shape. One
   column makes it read as the first card, which is what was asked for.

   Specificity: `.skagit-sections > .skagit-factbox` is (0,2,0) against
   skagit-place.css's (0,1,0), so this wins on specificity and does not depend on
   file order — which matters, because LiteSpeed combines these stylesheets and
   the order is not guaranteed to be the enqueue order forever.
   ========================================================================== */

.skagit-sections > .skagit-factbox {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;                /* the grid owns spacing now, not the panel */
  margin-inline-start: 0;   /* the float sibling gap is meaningless in a grid */
  align-self: start;        /* a short panel must not stretch to a tall card */
  height: auto;
}

/* The panel is the only grid child that is not a `.skagit-section-card`, so the
   card padding and surface are restated to match its neighbours exactly. The
   gold border is kept: it is the one thing that should still mark this out as
   the contact panel rather than ordinary copy. */
@media (min-width: 62em) {
  .skagit-sections > .skagit-factbox {
    float: none;
    width: auto;
    margin-inline-start: 0;
  }
}


/* ==========================================================================
   16.9 THE PHOTOGRAPHIC BAND BEHIND A FORM
   --------------------------------------------------------------------------
   Markup comes from skagit_form_scene() in inc/form-scene.php:

     section.skagit-form-scene
       div.skagit-form-scene__media[aria-hidden]   the photograph + scrim
         img.skagit-form-scene__img
         span.skagit-form-scene__scrim
       div.skagit-form-scene__inner
         div.skagit-form-scene__card               the form, on a solid ground

   THE CARD IS OPAQUE AND STAYS OPAQUE. Every label, input, placeholder, error
   and button in these forms had its contrast measured against a white surface.
   Tinting this card, or dropping its opacity so the photograph shows through,
   silently invalidates all of it — and form fields are the worst place on a site
   to be guessing at legibility. The photograph is atmosphere AROUND the card.

   FULL-BLEED WITHOUT BREAKING OUT: the band is stretched with negative inline
   margins and a matching padding, rather than `width: 100vw` + `left: 50%`
   trickery. `100vw` includes the scrollbar on Windows, so that approach adds a
   horizontal scrollbar on exactly the platform most of this site's visitors use.
   ====================================================================== */

.skagit-form-scene {
  position: relative;
  isolation: isolate;          /* keeps the scrim's z-index local to this band */
  margin-block: var(--sk-space-xl);
  /* Stretch to the edges of the reading column's padding, no further. */
  margin-inline: calc(var(--sk-space-md) * -1);
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--sk-space-md);
  overflow: hidden;
  border-radius: var(--sk-radius-lg);
}

/*
 * A SCENE THAT ENDS A SECTION CARD FORMS THAT CARD'S BASE.
 *
 * The negative inline margin above already bleeds the band to the card's left
 * and right edges. The bottom was never done, so on Responsible Gambling the
 * dark band stopped 21px short of the card's edge — the card's 20px padding
 * plus its 1px border — leaving a white strip between the photograph and the
 * rounded outer border. It read as a rendering fault rather than a decision.
 *
 * `margin-block-end` cancels that padding so the band runs to the edge, and
 * the bottom corners are rounded to the card's INNER radius: the card's own
 * radius less its 1px border, or the band's square corner would sit a pixel
 * outside the curve. The card is left `overflow: visible` on purpose —
 * clipping it would cut off the shadow it casts.
 *
 * Scoped to `:last-child` inside a section card body. A scene in the middle of
 * a card, or one used standalone on the contact and sales pages, keeps the
 * breathing room it is supposed to have.
 */
.skagit-section-card__body > .skagit-form-scene:last-child {
  /*
   * Bleed by the CARD's padding, not by --sk-space-md. The two are different
   * clamps -- the card uses clamp(1.25rem, 2.4vw, 1.9rem) and --sk-space-md
   * works out about 3px wider across most desktop widths -- so the inline
   * bleed inherited from the base rule was already overhanging the card by a
   * couple of pixels on both sides before the bottom was ever addressed.
   * Re-stating margin-inline here corrects that at the same time.
   */
  margin-inline: calc(var(--sk-card-pad) * -1);
  margin-block-end: calc(var(--sk-card-pad) * -1);
  border-end-start-radius: calc(var(--sk-radius-lg) - 1px);
  border-end-end-radius: calc(var(--sk-radius-lg) - 1px);
}

.skagit-form-scene__media {
  position: absolute;
  inset: 0;
  z-index: -1;                 /* behind the card, above nothing else */
  pointer-events: none;
  /*
   * CLIP THE SCALE.
   * .skagit-form-scene__img is deliberately scale(1.06) to hide the soft halo
   * the blur leaves at its edges — see the note on that rule. Without a clip
   * here that scaled, blurred rectangle rendered 1515px inside a 1429px frame
   * and pushed ~43px past the card on each side, square corners and all, over
   * the top of the card's own rounded end. Measured on /contact/ and
   * /responsible-gambling/. The scale stays; it now crops instead of spilling.
   */
  overflow: hidden;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.skagit-form-scene__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sk-scene-focus, center);
  display: block;
  /* A background photograph must not compete with the form. The blur is small on
     purpose: enough to stop the eye reading detail in it, not enough to turn a
     2400px photograph into mush. */
  filter: blur(3px) saturate(0.92);
  /* The blur samples from outside the element, which leaves a soft transparent
     halo at the edges; scaling up hides it. */
  transform: scale(1.06);
}

/* The scrim is a separate element rather than a gradient on the media wrapper, so
   its opacity can be tuned per tone without touching the image. */
.skagit-form-scene__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(180deg, rgba(4, 14, 26, 0.72) 0%, rgba(4, 14, 26, 0.62) 55%, rgba(4, 14, 26, 0.78) 100%);
}

/* `deep` is for the self-barring form: a calmer, heavier wash so the photograph
   reads as texture and not as somewhere to go. See inc/self-barring-form.php. */
.skagit-form-scene--deep .skagit-form-scene__scrim {
  background:
    linear-gradient(180deg, rgba(4, 12, 22, 0.88) 0%, rgba(4, 12, 22, 0.82) 55%, rgba(4, 12, 22, 0.9) 100%);
}

.skagit-form-scene--deep .skagit-form-scene__img {
  filter: blur(5px) saturate(0.55);
}

.skagit-form-scene__inner {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
}

.skagit-form-scene__card {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: var(--sk-radius-md);
  /* OPAQUE. Read the section note above before changing this. */
  background: #fff;
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

/* The forms set their own outer spacing for a plain-white context; inside the
   card the card owns it, or the first heading sits too far from the top edge. */
.skagit-form-scene__card > .skagit-sbf,
.skagit-form-scene__card > .skagit-contact,
.skagit-form-scene__card > .skagit-contact-form,
.skagit-form-scene__card > section {
  margin-block: 0;
}

.skagit-form-scene__card > *:first-child { margin-block-start: 0; }
.skagit-form-scene__card > *:last-child  { margin-block-end: 0; }

/* ---- 16.9.1 Narrow screens ---------------------------------------------
   The negative margin is dropped: at phone width the reading column padding is
   already small, and pulling the band wider than it makes the card touch the
   screen edges. */
@media (max-width: 47.99em) {
  .skagit-form-scene {
    margin-inline: 0;
    padding: var(--sk-space-md) var(--sk-space-sm);
    border-radius: var(--sk-radius-md);
  }

  .skagit-form-scene__card {
    padding: var(--sk-space-md);
  }

  /* A 3px blur on a photograph scaled to a 400px-wide band is most of the
     photograph. Lighter, so it still reads as a picture. */
  .skagit-form-scene__img {
    filter: blur(2px) saturate(0.92);
  }
}

/* ---- 16.9.2 Reduced motion ---------------------------------------------
   Nothing here animates, so there is nothing to disable — the note exists so the
   next person does not add a parallax to this band. A photographic layer that
   moves behind a form the visitor is typing into is exactly the thing
   prefers-reduced-motion is asking about. DO NOT add one. */

/* ---- 16.9.3 Forced colours ---------------------------------------------
   The UA drops the photograph and the scrim, which would leave a white card on a
   white page with no boundary. A real border restores it. */
@media (forced-colors: active) {
  .skagit-form-scene {
    border: 1px solid CanvasText;
  }

  .skagit-form-scene__media {
    display: none;
  }

  .skagit-form-scene__card {
    background: Canvas;
    box-shadow: none;
  }
}

/* ---- 16.9.4 Print -------------------------------------------------------
   The self-barring form is one a visitor may well print and bring in. A
   full-bleed dark photograph behind it is a page of ink for nothing. */
@media print {
  .skagit-form-scene {
    margin-inline: 0;
    padding: 0;
    border-radius: 0;
  }

  .skagit-form-scene__media { display: none; }

  .skagit-form-scene__card {
    padding: 0;
    box-shadow: none;
  }
}


/* ==========================================================================
   16.10 BOLD TEXT ON DARK SURFACES
   --------------------------------------------------------------------------
   THE BUG THIS FIXES, exactly: on /the-ridge/ the hero plate opened with
   "The Skagit Ridge Hotel is open." in near-black on a dark blue panel —
   effectively invisible, while the rest of the same sentence was white.

   THE CAUSE is a global element rule, `strong,b { color: var(--sk-text) }`.
   Setting `color` on a container does nothing for a child that declares its own
   colour, so every light-on-dark surface on this site was one `<strong>` away
   from unreadable text. It was invisible until now only because none of the
   earlier dark surfaces happened to contain bold copy — and the hoisted intros
   put author-written markup onto a dark panel for the first time.

   Measured: #2B3038 on the plate ground came out at roughly 1.4:1. Nowhere near
   the 4.5:1 the plate was tuned for.

   THE FIX IS `inherit`, NOT A COLOUR. Naming a colour here would mean a second
   value to keep in step with each surface every time one is retuned; `inherit`
   means bold text is simply whatever its surface already decided. Emphasis is
   carried by the WEIGHT, which is what `<strong>` is for.

   Scoped to the four dark surfaces rather than applied globally, because
   `strong,b { color: var(--sk-text) }` is correct everywhere else — on white,
   bold copy in the body ink is exactly right.
   ====================================================================== */

.skagit-hero-lede strong,
.skagit-hero-lede b,
.skagit-hero-lede em,
.skagit-hero-lede i,
.skagit-hero-lede span,
.skagit-hero-lede small,
.skagit-page-hero__lede strong,
.skagit-page-hero__lede b,
.skagit-page-hero__lede em,
.skagit-page-hero__lede i,
.skagit-page-hero__title strong,
.skagit-page-hero__title b,
.sk-mega-panel strong,
.sk-mega-panel b,
.sk-mega-panel em,
.site-footer strong,
.site-footer b,
.site-footer em,
.site-footer i {
  color: inherit;
}

/* The forced-colours case needs no override: the UA replaces every colour on the
   page, and `inherit` follows whatever it substitutes. */


/* ==========================================================================
   16.11 THE COUNT PILL ON A PHOTOGRAPHIC HERO
   --------------------------------------------------------------------------
   "24 dishes on the menu" / "51 dishes on the menu" was unreadable on every
   venue hero, and the NUMBER was invisible entirely.

   Two separate causes, both worth naming:

     1. `.ent-count-line` (16.x above) sets no `color` at all. On a light page it
        therefore inherits the dark body ink, which is right. Passed into the
        photographic hero as the `extra` slot it inherits that same dark ink and
        lands on a dark photograph.

     2. The number is wrapped in `<strong>`, and the global `strong,b { color:
        var(--sk-text) }` gives bold text its own dark colour, so it does not even
        inherit the fix for (1). This is the same rule that made "The Skagit Ridge
        Hotel is open." disappear — see 16.10. A container colour can never reach
        a child that declares its own.

   The pill also needs a ground, not just a light colour: it sits on a photograph
   whose brightness is unknown, so the same 0.6 alpha the lede plate uses is
   applied here for the same measured reason (white on that ground over a pure
   white image is 5.15:1; at 0.42 it is 2.83:1 and fails).

   Scoped to the hero. On light pages the pill is unchanged.
   ====================================================================== */

.skagit-page-hero .ent-count-line {
  color: #fff;
  background: rgba(4, 14, 26, 0.6);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .skagit-page-hero .ent-count-line {
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

/* The number, and any other bold inside the pill, follow the pill. */
.skagit-page-hero .ent-count-line strong,
.skagit-page-hero .ent-count-line b {
  color: inherit;
}

/* The icon keeps a gold accent, but the light one — #7C6218 was chosen for a
   white background and is nearly black against this ground. */
.skagit-page-hero .ent-count-line i {
  color: var(--sk-gold-300, #E4C766);
}

@media (forced-colors: active) {
  .skagit-page-hero .ent-count-line {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .skagit-page-hero .ent-count-line i { color: CanvasText; }
}

/* ---- 16.11.1 The hero text column lines up -------------------------------
   The In-Room Dining plate read as a run-on: "To Order, Dial: Ext. 1236  Room
   Service Hours: 9 AM - 12 AM  Delivery Charge: $5" wrapped mid-pair, so
   "Delivery" sat on one line and "Charge: $5" on the next, which reads as two
   different facts.

   Each label+value pair is kept whole by making the bold label and the text that
   follows it a single unbreakable run. `display: inline-block` on the <strong>
   plus a hair of right margin gives the browser a sensible break opportunity
   BETWEEN pairs and none inside one.

   The plate also gets a consistent left edge with the heading above it, which is
   what "lined up nicely" means here: the hero title, the plate and the pill all
   start at the same x. */
.skagit-hero-lede strong {
  display: inline-block;
  margin-inline-end: 0.15em;
}

.skagit-page-hero__inner .skagit-hero-lede,
.skagit-page-hero__inner .ent-count-line {
  margin-inline-start: 0;
}

/* ==========================================================================
   PROMOTION STATUS BADGE
   Set from the schedule (inc/promo-status.php), never typed by hand, so it
   cannot drift out of step with the dates on the card beneath it.
   ========================================================================== */

.skagit-promo-card__when {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 0.5rem;
  padding: 0.22em 0.7em;
  border-radius: 999px;
  font-family: var(--sk-font-body, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Running now: the only state that gets the gold, so it reads first. */
.skagit-promo-card__when--live {
  background: var(--sk-gold-100, #f7edcf);
  color: #6b5310;
  box-shadow: inset 0 0 0 1px rgba(185, 139, 82, 0.45);
}

.skagit-promo-card__when--live::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: #1f8a4c;
}

/* Coming up: quieter, so it does not compete with what is on today. */
.skagit-promo-card__when--upcoming {
  background: #eef2f6;
  color: #35506b;
  box-shadow: inset 0 0 0 1px rgba(53, 80, 107, 0.2);
}

/* Undated records carry no badge at all — see skagit_promo_status_label(). */

.promo-when {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ==========================================================================
   HAPPY HOUR AD TILE  (page-dining.php)
   Sits in .ent-grid beside the venue cards. It was added to fill the fourth
   column that three venues left empty; the column count is derived from the
   tile count now, so it is simply one more tile in the row. Styled to read as
   an advertisement rather than a place you can click into — it has no
   destination, and a tile that looks interactive but is not is worse than a
   gap.
   ========================================================================== */

.ent-card--ad {
  /* Column, so the poster keeps its own proportions and the body below takes
     whatever height the row needs. The row is as tall as the tallest venue
     card, and a fixed-ratio image alone left that remainder blank. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--sk-radius, 10px);
  background: var(--sk-navy-900, #04101c);
  /* No hover lift and no ::before sheen: both are affordances the venue cards
     use to say "this goes somewhere". This one does not. */
  box-shadow: 0 10px 30px rgba(6, 25, 43, 0.16);
}

.ent-card--ad__media {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  line-height: 0;
}

.ent-card--ad__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- the body under the poster ---- */

.ent-card--ad__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--sk-space-md, 1.25rem);
  text-align: center;
  /* Continues the poster's black rather than reverting to the white of the
     venue cards, so the tile reads as one object and as an advertisement. */
  background: #000;
  color: var(--sk-white, #fff);
}

.ent-card--ad__eyebrow {
  margin: 0;
  color: var(--sk-gold-300, #e8d296);
  font-family: var(--sk-font-body, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ent-card--ad__time {
  margin: 0;
  color: var(--sk-white, #fff);
  font-family: var(--sk-font-display, serif);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* "pm" set smaller so the numerals carry the line, as on the poster itself. */
.ent-card--ad__time span {
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ent-card--ad__note {
  margin: 0;
  max-width: 22ch;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sk-font-body, sans-serif);
  font-size: 0.82rem;
  line-height: 1.45;
}

/*
 * The poster is close to square while the venue cards are portrait, so left to
 * itself it either stretched or left a band of navy. Matching the row height
 * and cropping keeps the row even at any width.
 */
/*
 * No aspect-ratio above the mobile breakpoint. The row's height is set by the
 * tallest venue card, and the tile stretches to match it (align-items: stretch
 * on the grid, height: 100% on the image). Forcing a ratio here fought that and
 * left the tile short of its neighbours.
 */

/* The row's width is DERIVED, not fixed at four. page-dining.php counts the
   published venue child pages — the same count the "places to eat" line
   prints — adds one if the Happy Hour poster exists, and hands the answer over
   in `--sk-ent-cols`. Four was hard-coded when there were three venues plus
   the poster; with two venues published the row kept its fourth track and left
   a 309px column of nothing at 1440px. Measured.

   The var() fallback is 4 so that an absent or malformed property cannot
   invalidate the whole declaration and drop the row to `none`. It is NOT a
   compatibility path for old markup: HTML cached before this shipped carries
   the retired `ent-grid--with-ad` class, matches nothing here, and falls
   through to the auto-fill base rule — three 426px tracks at 1440px, which is
   the layout this fix produces anyway. Nothing is left mid-transition. */
@media (min-width: 75em) {
  /* Doubled selector, deliberately. skagit-responsive.css sets .ent-grid in
     this same breakpoint and loads AFTER this file, so a single class here
     scores an identical (0,1,0) and loses on file order alone — the tie that
     has already caused two cascade bugs on this project. (0,2,0) settles it
     without reaching for !important. */
  .ent-grid.ent-grid--cols {
    grid-template-columns: repeat(var(--sk-ent-cols, 4), minmax(0, 1fr));
  }
}

/* The image is auto-height at every width now; the body absorbs the rest of
   the card, so no aspect-ratio override is needed on small screens either. */


/* ==========================================================================
   RANDOM OFFERS — FEWER CARDS THAN SLOTS   (appended 2026-08-15)
   --------------------------------------------------------------------------
   Appended rather than folded into section 11.1 on purpose: several agents are
   in this file, and the two rules below have to say out loud what they defeat.

   WHAT THIS DEFEATS, BY NAME

   1. slick/slick.css lines 51-60: `.slick-track { margin-left: auto;
      margin-right: auto }`. That single vendor declaration is the ONLY thing
      centring a short row today. /hours/ actually carries THREE live shows in
      a three-across row, so the two-card case was produced there client-side —
      slick('slickRemove'), nothing written — and measured at a 1440px
      viewport: track 906px inside a 1358px list, 226px of air each side.
      Neutralise just that one declaration and the pair snaps flush left: left
      gap 0, right gap 452. It lives in a file this theme does not own and
      nothing in the theme said so. Restated here so two rules agree, and so a
      slick upgrade cannot silently take the layout with it.

      `justify-content: center` is not the mechanism — the track's width is set
      inline by Slick to the sum of its slides, so there is normally nothing to
      distribute. It is there to absorb the remainder from Slick's
      `Math.ceil(slideWidth * n)` rounding, which can leave the track a pixel or
      two wider than its contents. It works at all only because line 1251 of
      this file already gives `.random-offers-slider .slick-track` display:flex.
      It is scoped to the short case, so it cannot reach a scrolling rail.

   2. Section 11.1 `.random-offers-wrapper .offer-scrollbar-container
      { display: flex }` (0,2,0), AND the same `display: flex` in the inline
      <style> that inc/shortcode-random-offers.php prints (0,1,0). Both beat the
      UA sheet's `[hidden] { display: none }`, so marking the scrubber hidden in
      JS did nothing on its own. The selector below is (0,3,0) — an attribute
      selector scores in the SAME column as a class, which is why two classes
      plus [hidden] is 3 and not 2+1 — and it outscores both without reaching
      for !important. When a rail holds no more cards than the row shows there
      is nothing for a scrubber to scrub, and a brass handle that will not move
      is worse than no handle.

   WHERE THE CLASS COMES FROM
   inc/shortcode-random-offers.php, setupRange(), from `slideCount -
   slidesToShow` clamped at zero — the rail's own long-standing count
   calculation, read against the LIVE slidesToShow. So it follows the
   breakpoints: three cards is a short row at 1440px (3 slots) and an ordinary
   scrolling one at 1000px (2 slots). No card width is touched anywhere here —
   on the home page the entertainment row sits directly under the promotions
   row, and the two rows reading as the same size is the whole reason the short
   one looks deliberate instead of unfinished.
   ========================================================================== */
.random-offers-wrapper--short .random-offers-slider .slick-track {
  margin-inline: auto;
  justify-content: center;
}

.random-offers-wrapper .offer-scrollbar-container[hidden] { display: none; }
