@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — DESIGN SYSTEM
   "Midnight Brass" — Art-Deco-informed resort luxury
   --------------------------------------------------------------------------
   Layer 1 of 3.  Load order:
     1. skagit-design-system.css   <- tokens + base element styles (this file)
     2. skagit-components.css      <- component skins bound to existing markup
     3. skagit-responsive.css      <- breakpoint layer
   Depends on the child theme style.css loading BEFORE it.

   DESIGN NOTES
   - Palette evolves the existing brand (navy #0b3d68, gold #D4AF37,
     bronze #B98B52, cyan #009FE3) rather than replacing it. The brand hues
     are preserved as the -500/-700 rungs of proper scales, with darker
     "ink" variants added purely so gold and cyan can carry TEXT on light
     surfaces at WCAG AA (the raw brand gold is 2.1:1 on white — decorative
     only, never text).
   - Typography pairs a high-contrast system serif (display) with Open Sans
     (body). No new font service is loaded: every family in the display
     stack ships with Windows, macOS/iOS or Android.
   - Depth comes from LAYERED shadow (ambient + key + contact) plus a 1px
     top highlight on dark surfaces. That inner highlight is the single
     cheapest trick that makes a dark UI read as "lit" rather than "flat".
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ---- 1.1 Brand colour scales ----------------------------------------- */

  /* Navy — the resort's core. -700 is the untouched legacy brand navy. */
  --sk-navy-950: #04101C;   /* deepest ink, page floor for dark sections     */
  --sk-navy-900: #06192B;   /* primary dark surface                          */
  --sk-navy-800: #08243D;   /* raised dark surface / dark cards              */
  --sk-navy-700: #0B3D68;   /* LEGACY BRAND NAVY — unchanged                 */
  --sk-navy-600: #14568C;
  --sk-navy-500: #1F6FAF;

  /* Brass / gold — the glamour. -500 is the untouched legacy brand gold.   */
  --sk-gold-200: #F7ECC9;
  --sk-gold-300: #F0DCA4;
  --sk-gold-400: #E3C566;
  --sk-gold-500: #D4AF37;   /* LEGACY BRAND GOLD — unchanged                 */
  --sk-gold-600: #B08D28;
  --sk-gold-700: #7C6218;   /* "gold ink": AA-safe gold for text on light    */

  /* Bronze — warm secondary metal, legacy #B98B52 preserved.               */
  --sk-bronze-300: #DCC49E;
  --sk-bronze-500: #B98B52;  /* LEGACY BRAND BRONZE — unchanged              */
  --sk-bronze-700: #7E5C2F;

  /* Cyan — the interactive accent. -500 is legacy #009FE3.                 */
  --sk-cyan-300: #7FD2F5;
  --sk-cyan-500: #009FE3;   /* LEGACY BRAND CYAN — unchanged (decor/dark bg) */
  --sk-cyan-700: #0A6E9E;   /* "cyan ink": AA-safe cyan for text on light    */

  /* ---- 1.2 Neutrals ---------------------------------------------------- */
  --sk-white:      #FFFFFF;
  --sk-paper:      #FAFBFC;  /* barely-off white page                        */
  --sk-mist:       #F4F6F8;  /* alternating light section                    */
  --sk-cloud:      #E7EAEE;  /* hairlines, dividers, inactive fills          */
  --sk-silver:     #C9CFD6;
  --sk-slate:      #5B646F;  /* faint text — AA on white AND on --sk-mist    */
  --sk-graphite:   #4A525E;  /* muted body text                              */
  --sk-charcoal:   #2B3038;  /* primary body text                            */
  --sk-obsidian:   #0E1116;

  /* ---- 1.3 Semantic colour -------------------------------------------- */
  --sk-text:            var(--sk-charcoal);   /* 13.3:1 on white            */
  --sk-text-muted:      var(--sk-graphite);   /*  7.9:1 on white            */
  --sk-text-faint:      var(--sk-slate);      /*  6.0:1 on white            */
  --sk-text-heading:    var(--sk-navy-900);
  --sk-text-on-dark:        #EEF2F6;          /* 15.8:1 on --sk-navy-900    */
  --sk-text-on-dark-muted:  #B9C4D0;          /* 10.0:1 on --sk-navy-900    */

  --sk-link:            var(--sk-cyan-700);   /*  5.6:1 on white            */
  --sk-link-hover:      var(--sk-navy-700);
  --sk-link-on-dark:    var(--sk-gold-400);   /* 10.5:1 on --sk-navy-900    */

  --sk-accent:          var(--sk-gold-500);
  --sk-accent-ink:      var(--sk-gold-700);   /* gold you may set as text   */
  --sk-accent-on-dark:  var(--sk-gold-500);   /*  8.5:1 on --sk-navy-900    */

  /* Status */
  --sk-status-soldout:   #8E1F20;  /* 8.9:1 with white text                 */
  --sk-status-cancelled: #3A3F47;  /* 10.6:1 with white text                */
  --sk-status-free:      #0B6B45;  /* 6.6:1 with white text                 */
  --sk-status-soon:      #4A525E;  /* 7.9:1 with white text                 */

  /* ---- 1.4 Surfaces ---------------------------------------------------- */
  --sk-surface:            var(--sk-white);
  --sk-surface-sunken:     var(--sk-mist);
  --sk-surface-raised:     var(--sk-white);
  --sk-surface-dark:       var(--sk-navy-900);
  --sk-surface-dark-raised: var(--sk-navy-800);
  --sk-border:             var(--sk-cloud);
  --sk-border-strong:      var(--sk-silver);
  --sk-border-on-dark:     rgba(255, 255, 255, 0.12);

  /* ---- 1.5 Gradients & textures ---------------------------------------- */

  /* Brass leaf: the signature metal. Rules, edges, hairlines, primary CTAs.
     CONTRAST CONSTRAINT: this gradient carries --sk-navy-950 text on every
     primary button, so its DARKEST stop must clear 4.5:1 against #04101C.
     The dark ends are therefore gold-600 (6.1:1) and bronze-500 (6.3:1) —
     not a deeper antique gold, which measured 3.8:1 and would have failed
     wherever the sweep put its dark end under a label. */
  --sk-grad-brass: linear-gradient(
      100deg,
      var(--sk-gold-600) 0%, var(--sk-gold-500) 18%, var(--sk-gold-300) 38%,
      var(--sk-gold-500) 58%, var(--sk-bronze-500) 80%, var(--sk-gold-600) 100%);

  /* Deep resort night — dark section / header / footer ground. */
  --sk-grad-night: linear-gradient(
      160deg, var(--sk-navy-800) 0%, var(--sk-navy-900) 46%, var(--sk-navy-950) 100%);

  /* Sapphire — booking bar / interactive dark band. */
  --sk-grad-sapphire: linear-gradient(
      118deg, var(--sk-navy-900) 0%, var(--sk-navy-700) 52%, #0F5E96 100%);

  /* Fluted glass: near-invisible vertical ribbing. Deco columns, quietly. */
  --sk-tex-flute: repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px,
      rgba(255,255,255,0)     1px, rgba(255,255,255,0)     9px);

  /* Fine grain — kills banding on large gradients, adds "printed" texture. */
  --sk-tex-grain: radial-gradient(
      circle at 50% 50%, rgba(255,255,255,0.05) 0.5px, transparent 0.6px);

  /* Vignette for dark hero surfaces. */
  --sk-tex-vignette: radial-gradient(
      120% 90% at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 58%);

  /* ---- 1.6 Elevation --------------------------------------------------- */
  /* Layered: contact + key + ambient. Never a single blurred blob. */
  --sk-shadow-xs: 0 1px 2px rgba(6, 25, 43, 0.06),
                  0 1px 3px rgba(6, 25, 43, 0.05);
  --sk-shadow-sm: 0 1px 2px rgba(6, 25, 43, 0.06),
                  0 2px 6px rgba(6, 25, 43, 0.06),
                  0 6px 14px rgba(6, 25, 43, 0.05);
  --sk-shadow-md: 0 1px 2px rgba(6, 25, 43, 0.07),
                  0 6px 14px rgba(6, 25, 43, 0.07),
                  0 16px 32px rgba(6, 25, 43, 0.07);
  --sk-shadow-lg: 0 2px 4px rgba(6, 25, 43, 0.08),
                  0 12px 26px rgba(6, 25, 43, 0.10),
                  0 30px 60px rgba(6, 25, 43, 0.11);
  --sk-shadow-xl: 0 4px 8px rgba(6, 25, 43, 0.10),
                  0 22px 44px rgba(6, 25, 43, 0.13),
                  0 48px 96px rgba(6, 25, 43, 0.15);
  /* On dark grounds a black shadow is invisible — use depth + rim light. */
  --sk-shadow-dark: 0 2px 6px rgba(0, 0, 0, 0.45),
                    0 18px 40px rgba(0, 0, 0, 0.45);
  --sk-glow-gold: 0 0 0 1px rgba(212, 175, 55, 0.35),
                  0 10px 30px rgba(212, 175, 55, 0.22);
  /* 1px inner top highlight: makes dark surfaces read as lit, not painted. */
  --sk-rim-light: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ---- 1.7 Radii ------------------------------------------------------- */
  --sk-radius-xs:   3px;
  --sk-radius-sm:   6px;
  --sk-radius-md:   10px;
  --sk-radius-lg:   16px;
  --sk-radius-xl:   24px;
  --sk-radius-pill: 999px;

  /* ---- 1.8 Typography -------------------------------------------------- */
  /*
   * WHY THIS CHANGED FROM SYSTEM FONTS TO WEBFONTS.
   *
   * The display stack used to be OS-only, which sounds efficient and is a real
   * problem for a brand: the heading face was Palatino Linotype on Windows,
   * Iowan Old Style on macOS and Noto Serif on Android. Three different
   * personalities, none of them chosen, and the one most visitors saw
   * (Palatino Linotype) is the weakest of the three at large display sizes.
   * A resort brand cannot have its headline face decided by the visitor's OS.
   *
   * PLAYFAIR DISPLAY for headings: a high-contrast transitional serif with
   * genuine display presence at large sizes — the thick/thin contrast reads as
   * expensive, which is the register this brand wants. It is a display face and
   * is used ONLY at heading sizes; it is not legible enough for body copy.
   *
   * MONTSERRAT for body and UI: a geometric sans with open counters that holds
   * up at 14-16px, and whose slightly wide, upright letterforms sit well under
   * a high-contrast serif without competing with it.
   *
   * The OS stacks are KEPT as fallbacks rather than deleted. If the Google
   * Fonts request fails or is blocked, the page still gets a serif heading and
   * a sans body of roughly the right proportions instead of falling back to
   * Times over Arial.
   */
  --sk-font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype",
                     Palatino, Cambria, Constantia, "Noto Serif", Georgia,
                     "Times New Roman", serif;
  --sk-font-body: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Tabular numerals for prices, timers, jackpot figures. */
  --sk-font-numeric: "Segoe UI Variable Display", "SF Pro Display",
                     "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sk-fs-xs:   clamp(0.75rem,  0.7292rem + 0.0926vw, 0.8125rem);
  --sk-fs-sm:   clamp(0.8438rem, 0.8125rem + 0.1389vw, 0.9375rem);
  --sk-fs-base: clamp(1rem,     0.9688rem + 0.1389vw, 1.094rem);
  --sk-fs-md:   clamp(1.062rem, 1.01rem   + 0.2315vw, 1.219rem);
  --sk-fs-lg:   clamp(1.188rem, 1.104rem  + 0.3704vw, 1.438rem);
  --sk-fs-xl:   clamp(1.375rem, 1.25rem   + 0.5556vw, 1.75rem);
  --sk-fs-2xl:  clamp(1.625rem, 1.438rem  + 0.8333vw, 2.188rem);
  --sk-fs-3xl:  clamp(1.875rem, 1.562rem  + 1.389vw,  2.812rem);
  --sk-fs-4xl:  clamp(2.125rem, 1.583rem  + 2.407vw,  3.75rem);
  --sk-fs-5xl:  clamp(2.375rem, 1.542rem  + 3.704vw,  4.875rem);
  --sk-fs-6xl:  clamp(2.625rem, 1.417rem  + 5.37vw,   6.25rem);

  --sk-lh-tight:   1.08;
  --sk-lh-snug:    1.22;
  --sk-lh-heading: 1.14;
  --sk-lh-body:    1.65;
  --sk-lh-loose:   1.8;

  --sk-tracking-display: -0.02em;
  --sk-tracking-tight:   -0.01em;
  --sk-tracking-normal:  0;
  --sk-tracking-wide:    0.06em;
  --sk-tracking-eyebrow: 0.22em;  /* the wide-set kicker above headings     */

  --sk-weight-regular: 400;
  --sk-weight-medium:  500;
  --sk-weight-semi:    600;
  --sk-weight-bold:    700;
  --sk-weight-black:   800;

  /* Comfortable measure for long-form copy. */
  --sk-measure:        68ch;
  --sk-measure-narrow: 54ch;

  /* ---- 1.9 Spacing ----------------------------------------------------- */
  --sk-space-3xs: 0.25rem;
  --sk-space-2xs: 0.5rem;
  --sk-space-xs:  0.75rem;
  --sk-space-sm:  clamp(1rem,   0.9583rem + 0.1852vw, 1.125rem);
  --sk-space-md:  clamp(1.25rem, 1.083rem + 0.7407vw, 1.75rem);
  --sk-space-lg:  clamp(1.75rem, 1.5rem   + 1.111vw,  2.5rem);
  --sk-space-xl:  clamp(2.5rem,  2.083rem + 1.852vw,  3.75rem);
  --sk-space-2xl: clamp(3.5rem,  2.833rem + 2.963vw,  5.5rem);
  --sk-space-3xl: clamp(4.5rem,  3.5rem   + 4.444vw,  7.5rem);

  /* ------------------------------------------------------------------------
     SECTION SEAM — the single vertical gap between two adjacent page sections.
     A section takes HALF of this top and bottom, so two adjacent sections add
     up to exactly one seam and the rhythm is identical wherever they appear
     and in whatever order.

     Introduced because the homepage was measured running five different gaps
     down one page (41/46/46/61/56px at 1280) and the internal pages had their
     own unrelated values. Retune the whole site from this one line. */
  --sk-section-seam: clamp(3rem, 5vw, 4rem);
  --sk-space-4xl: clamp(6rem,    4.5rem   + 6.667vw,  10.5rem);

  /* Section rhythm + page gutter. Gutter grows with the viewport. */
  --sk-section-y:  var(--sk-space-3xl);
  --sk-gutter:     clamp(1.125rem, 0.75rem + 1.667vw, 2.5rem);
  --sk-container:  1400px;   /* widened at >=1800px in the responsive layer */
  --sk-container-narrow: 820px;

  /* ---- 1.10 Motion ----------------------------------------------------- */
  --sk-ease-out:   cubic-bezier(0.22, 0.68, 0.32, 1);
  --sk-ease-in-out: cubic-bezier(0.62, 0.02, 0.28, 1);
  --sk-ease-spring: cubic-bezier(0.18, 0.9, 0.28, 1.06);
  --sk-dur-fast:  140ms;
  --sk-dur-base:  260ms;
  --sk-dur-slow:  480ms;
  --sk-dur-lazy:  760ms;

  /* ---- 1.11 Focus ------------------------------------------------------ */
  /* Two-tone ring: gold core on a dark halo so it survives ANY background.
     Deliberately 3px + 2px offset — well past the 2px WCAG 2.2 minimum. */
  --sk-focus-color:      var(--sk-gold-500);
  --sk-focus-halo:       var(--sk-navy-950);
  --sk-focus-width:      3px;
  --sk-focus-offset:     2px;
  /* The outline draws the gold ring (outline is never clipped by an
     overflow:hidden ancestor); the halo below sits just outside it so the
     ring stays legible on gold, white and photographic backgrounds alike. */
  --sk-focus-halo-ring:         0 0 0 calc(var(--sk-focus-offset) + var(--sk-focus-width) + 2px) var(--sk-focus-halo);
  --sk-focus-halo-ring-on-dark: 0 0 0 calc(var(--sk-focus-offset) + var(--sk-focus-width) + 2px) rgba(255, 255, 255, 0.92);

  /* ---- 1.12 Layering --------------------------------------------------- */
  --sk-z-base:     1;
  --sk-z-raised:   10;
  --sk-z-sticky:   900;
  --sk-z-header:   9999;
  --sk-z-drawer:   99999;
  --sk-z-overlay:  100000;
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* clip (not hidden) so position:sticky elsewhere keeps working while a
     stray wide child can never produce a horizontal scrollbar. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* clears the sticky subnav on anchor jumps   */
}

body {
  background-color: var(--sk-paper);
  color: var(--sk-text);
  font-size: var(--sk-fs-base);
  line-height: var(--sk-lh-body);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}

/* ---- 2.1 Headings ------------------------------------------------------
   NOTE ON !important: style.css declares
   `h1..h6 { font-family: var(--sk-font-display) !important; }`.
   An !important declaration can only be beaten by another !important one —
   specificity is irrelevant — so switching the display face to the serif
   stack requires it. This is the ONLY !important on font-family here and it
   is documented in AGENT-DESIGN-REPORT.md. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-display) !important;
  color: var(--sk-text-heading);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  text-wrap: balance;
  margin: 0 0 var(--sk-space-sm);
}

h1 { font-size: var(--sk-fs-4xl); line-height: var(--sk-lh-tight); }
h2 { font-size: var(--sk-fs-3xl); }
h3 { font-size: var(--sk-fs-xl);  letter-spacing: var(--sk-tracking-tight); }
h4 { font-size: var(--sk-fs-lg);  letter-spacing: var(--sk-tracking-tight); }
h5 { font-size: var(--sk-fs-md);  letter-spacing: var(--sk-tracking-normal); }
h6 {
  font-family: var(--sk-font-body) !important;   /* eyebrow role, see above */
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-accent-ink);
}

/* ---- 2.2 Copy ---------------------------------------------------------- */
p {
  color: var(--sk-text-muted);
  font-size: var(--sk-fs-base);
  line-height: var(--sk-lh-body);
  margin: 0 0 var(--sk-space-sm);
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--sk-weight-bold); color: var(--sk-text); }

small { font-size: var(--sk-fs-sm); }

blockquote {
  margin: var(--sk-space-lg) 0;
  padding: var(--sk-space-sm) 0 var(--sk-space-sm) var(--sk-space-md);
  border-left: 2px solid var(--sk-gold-500);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-style: italic;
  color: var(--sk-text);
}

hr {
  border: 0;
  height: 1px;
  background: var(--sk-border);
  margin: var(--sk-space-lg) 0;
}

ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--sk-space-3xs); }

/* ---- 2.3 Links --------------------------------------------------------- */
a {
  color: var(--sk-link);
  text-decoration: none;
  transition: color var(--sk-dur-fast) var(--sk-ease-out),
              background-color var(--sk-dur-fast) var(--sk-ease-out),
              border-color var(--sk-dur-fast) var(--sk-ease-out);
}

a:hover { color: var(--sk-link-hover); }

/* Prose links keep an underline — colour alone is not a sufficient
   affordance (WCAG 1.4.1 Use of Colour). */
.sno-content-body a,
.entry-content a,
.location-desc a,
.promo-header-content a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.sno-content-body a:hover,
.entry-content a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* ---- 2.4 Media --------------------------------------------------------- */
img, svg, video, canvas, iframe, picture {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Deliberately NOT a global `img { background }` — logos and badges on this
   site are transparent PNGs and would gain a grey plate. Placeholder tint is
   applied to the card media WRAPPERS in layer 2 instead. */
figure { margin: 0; }

/* ---- 2.5 Forms --------------------------------------------------------- */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

textarea { resize: vertical; }

::placeholder { color: var(--sk-text-faint); opacity: 1; }

label { font-weight: var(--sk-weight-semi); }

/* ---- 2.6 Tables (editor content) --------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sk-fs-sm);
}

th, td {
  padding: var(--sk-space-2xs) var(--sk-space-xs);
  border-bottom: 1px solid var(--sk-border);
  text-align: left;
}

th {
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  font-size: var(--sk-fs-xs);
  color: var(--sk-text-heading);
}

/* ---- 2.7 Selection & scrollbar ----------------------------------------- */
::selection {
  background: var(--sk-gold-500);
  color: var(--sk-navy-950);
}

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--sk-navy-700) var(--sk-cloud); scrollbar-width: thin; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sk-cloud); }
::-webkit-scrollbar-thumb {
  background: var(--sk-navy-700);
  border-radius: var(--sk-radius-pill);
  border: 2px solid var(--sk-cloud);
}
::-webkit-scrollbar-thumb:hover { background: var(--sk-gold-600); }

/* ==========================================================================
   3. FOCUS VISIBILITY  (accessibility — do not weaken)
   --------------------------------------------------------------------------
   The previous stylesheet set `outline: none` on focused inputs with only a
   soft gold glow to replace it. That is restored here as a genuinely strong,
   always-visible two-tone ring. Nothing in these files sets `outline: none`
   without substituting an equally visible indicator.
   ========================================================================== */

/* Baseline for browsers/elements without :focus-visible support. */
:focus {
  outline: var(--sk-focus-width) solid var(--sk-focus-color);
  outline-offset: var(--sk-focus-offset);
}

/* Modern browsers: suppress the ring for mouse focus only, then restate it
   for keyboard focus — strictly stronger than the baseline above. */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; }

  :focus-visible {
    outline: var(--sk-focus-width) solid var(--sk-focus-color);
    outline-offset: var(--sk-focus-offset);
    box-shadow: var(--sk-focus-halo-ring);
  }

  /*
   * The bare :focus-visible above is specificity (0,1,0). style.css is
   * `input:focus, textarea:focus, select:focus` = (0,1,1) with `outline: none`,
   * so it BEAT the ring for every form control that is not inside one of the
   * ancestors enumerated below -- notably #sort-promos on the promotions
   * archive, which was left with only a 1px #D4AF37 border at 2.10:1 on white
   * (fails WCAG 1.4.11 and 2.4.13).
   *
   * Restating at (0,1,1) ties that rule and wins on source order, since this
   * sheet loads after style.css. Do not collapse these back into the bare
   * selector.
   */
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  button:focus-visible,
  a:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: var(--sk-focus-width) solid var(--sk-focus-color);
    outline-offset: var(--sk-focus-offset);
    box-shadow: var(--sk-focus-halo-ring);
  }
}

/* On dark grounds invert the halo to white so both rings stay visible. */
.site-header :focus-visible,
.site-footer :focus-visible,
.main-navigation :focus-visible,
.skagit-booking-wrapper :focus-visible,
.jackpot-nav :focus-visible,
.jackpot-section-dark :focus-visible,
.jp-modern-section-wrapper :focus-visible,
.jp-static-hero :focus-visible,
.ent-single-bg :focus-visible,
.ent-glass-timer :focus-visible,
.skagit-expand-panel :focus-visible {
  outline-color: var(--sk-gold-400);
  box-shadow: var(--sk-focus-halo-ring-on-dark);
}

/* Windows High Contrast Mode: system colours must win. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}

/* ---- 3.1 Skip link ------------------------------------------------------
   Hello Elementor renders `.skip-link.screen-reader-text`; make it a real,
   handsome control the moment it takes focus. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;      /* beats the parent theme's clip/position
                                      based visually-hidden utility, which is
                                      itself declared with !important        */
  top: var(--sk-space-2xs) !important;
  left: var(--sk-space-2xs) !important;
  z-index: var(--sk-z-overlay);
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  padding: 0.85rem 1.5rem;
  background: var(--sk-navy-900);
  color: var(--sk-gold-300);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--sk-radius-sm);
  box-shadow: var(--sk-shadow-lg), var(--sk-rim-light);
}

/* ---- 3.2 Visually-hidden helper (belt and braces) ---------------------- */
.sk-visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. TEXTURE & ORNAMENT PRIMITIVES
   These are the reusable "expensive" details components draw on.
   ========================================================================== */

/* 4.1 The brass rule — the system's signature mark. */
.sk-rule {
  display: block;
  width: clamp(56px, 8vw, 96px);
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.35);
}

.sk-rule--center { margin-inline: auto; }
.sk-rule--full   { width: 100%; height: 1px; box-shadow: none; opacity: 0.5; }

/* 4.2 Eyebrow / kicker. */
.sk-eyebrow {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-accent-ink);
  margin-bottom: var(--sk-space-2xs);
}

.sk-surface-dark .sk-eyebrow,
.sk-eyebrow--on-dark { color: var(--sk-gold-400); }

/* 4.3 Deco corner brackets — thin gold L's at the corners of a panel. */
.sk-deco-corners { position: relative; }

.sk-deco-corners::before,
.sk-deco-corners::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: var(--sk-gold-500);
  opacity: 0.75;
}

.sk-deco-corners::before {
  top: 10px; left: 10px;
  border-top: 1px solid; border-left: 1px solid;
}

.sk-deco-corners::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid; border-right: 1px solid;
}

/* 4.4 Container. */
.sk-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

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

/* 4.5 Text helpers. */
.sk-measure        { max-width: var(--sk-measure); }
.sk-measure-narrow { max-width: var(--sk-measure-narrow); }
.sk-numeric {
  font-family: var(--sk-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 4.6 Dark section ground. */
.sk-surface-dark {
  position: relative;
  background: var(--sk-grad-night);
  color: var(--sk-text-on-dark);
  isolation: isolate;
}

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

.sk-surface-dark h1,
.sk-surface-dark h2,
.sk-surface-dark h3,
.sk-surface-dark h4 { color: var(--sk-white); }

.sk-surface-dark p { color: var(--sk-text-on-dark-muted); }

/* --------------------------------------------------------------------------
   4.7 Photographic band ground.  `.sk-surface-dark--photo`
   --------------------------------------------------------------------------
   THIS IS THE ONLY SANCTIONED PHOTOGRAPHIC BACKGROUND ON THE SITE, and it does
   not contradict the rule at the foot of this file. That rule bans a background
   image on the BODY, behind reading areas. This one lives inside an existing
   full-bleed dark band -- the very thing that rule names as where atmosphere is
   supposed to come from.

   HOW CONTRAST IS GUARANTEED
   The band's own `--sk-grad-night` stays on the element and is never removed.
   The photo is the BOTTOM layer of the ::before stack, with an opaque scrim
   directly above it, so the photograph can never lighten the ground beyond
   what the scrim allows. That matters because these are casino photographs
   with blown highlights -- neon, chandeliers, a sunset -- and an un-scrimmed
   one would push white text below AA in exactly the brightest spots.

   The arithmetic, worst case, so the next person does not have to redo it:
   a PURE WHITE pixel in the photograph under `rgba(6,25,43,.88)` composites to
   rgb(36,53,68). Relative luminance 0.0333, so contrast against #FFFFFF is
   12.6:1 -- still AAA, and darker than the band's documented worst case only
   by a little. Any scrim alpha at or above .85 keeps this above 7:1. DO NOT
   lower it below .85 to "let the photo through": the photo is atmosphere, not
   subject matter. If it needs to read as a photograph, it belongs in an <img>.

   LAYER ORDER in `background-image` is top-most first, so the photo is last.

   USAGE -- the caller supplies the URL, nothing is hard-coded here:
     <header class="… sk-surface-dark sk-surface-dark--photo"
             style="--sk-band-photo: url(…);">
   With no `--sk-band-photo` set the layer resolves to `none` and the band
   renders exactly as an ordinary `.sk-surface-dark`, so the modifier is safe
   to leave on markup whose image has gone missing.
   -------------------------------------------------------------------------- */
.sk-surface-dark--photo::before {
  background-image:
    var(--sk-tex-flute),
    var(--sk-tex-vignette),
    linear-gradient(to bottom, rgba(6, 25, 43, 0.88), rgba(4, 16, 28, 0.94)),
    var(--sk-band-photo, none);
  background-size: 9px 100%, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 0 0, var(--sk-band-photo-pos, 50% 50%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* A decorative background cannot be fetched with `loading="lazy"`, so on a
   narrow screen it is bandwidth spent on something almost entirely hidden
   behind the scrim. Drop it and keep the gradient. */
@media (max-width: 47.9375em) {
  .sk-surface-dark--photo::before {
    background-image: var(--sk-tex-flute), var(--sk-tex-vignette);
    background-size: 9px 100%, 100% 100%;
  }
}

/* ==========================================================================
   5. REDUCED MOTION  (global kill switch)
   --------------------------------------------------------------------------
   Everything the design system animates is opt-OUT here: transforms,
   keyframes, parallax-ish transitions and smooth scrolling all stop.
   Components must not reintroduce motion below this rule.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;   /* documented: must defeat any
                                                 animation/transition set with
                                                 !important elsewhere in the
                                                 theme or by Elementor        */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* No translate/scale/rotate on hover or entrance for these users. */
  .sno-card:hover,
  .offer-card:hover,
  .ent-card:hover,
  .winner-clean-card:hover,
  .winner-card:hover,
  .collage-card:hover,
  .jackpot-card:hover,
  .jp-wide-card:hover,
  .contact-pill:hover,
  .header-logo:hover,
  .social-icons a:hover,
  .header-socials a:hover,
  .subscribe-btn:hover,
  .sno-btn-solid:hover,
  .expand-main-btn:hover,
  .rewards-promo-btn:hover,
  #sb-submit-btn:hover,
  .footer-col ul li a:hover,
  .sno-card:hover .sno-card-image img,
  .offer-card:hover .offer-img-box img,
  .ent-card:hover .ent-card-image img,
  .collage-card:hover .collage-img-wrap img,
  .skagit-rewards-promo:hover .rewards-promo-visual img {
    transform: none !important;   /* documented: legacy hover transforms in
                                     style.css and in per-shortcode inline
                                     <style> blocks are otherwise unreachable */
  }

  /* Entrance animations must not leave content invisible. */
  .fade-in-up,
  .fade-in-up.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .ent-animated-pattern,
  .footer-background { animation: none !important; }
}


/* ==========================================================================
   THE PAGE BACKGROUND IS PLAIN, AND STAYS PLAIN
   --------------------------------------------------------------------------
   Two decorative background layers have been removed from here, in order:

     1. A tiled texture chosen at random per page load by
        assets/js/skagit-backdrop.js -- card suits, chips, a diamond mark or
        diagonal hatching. Removed because the page identity changed between
        visits for no reason and a tile behind body copy reads as noise.

     2. A large faint red ring watermark that replaced it. Removed because it
        looked wrong: a single huge arc sitting behind white content areas read
        as a printing error rather than as a watermark, and it was visible
        THROUGH the light card surfaces on every interior page.

   >>> DO NOT REINTRODUCE A BODY BACKGROUND IMAGE. The reading areas are white
       on purpose. Atmosphere on this site comes from the full-bleed dark bands,
       the photography and the gold accents -- all of which sit ON a clean
       ground and stop working when something is printed behind them. <<<

   `--sk-backdrop` is gone rather than set to `none`: a variable that exists
   invites someone to fill it in.
   ========================================================================== */