@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — LIGHT HEADER + MEGA MENU
   --------------------------------------------------------------------------
   Layer 5. Load order:
     1. style.css                    <- legacy child sheet (dark header)
     2. skagit-design-system.css     <- tokens
     3. skagit-components.css        <- component skins
     4. skagit-header.css            <- header layout
     5. skagit-megamenu.css          <- THIS FILE: relights the header, adds
                                        the drop panels
   Enqueue it LAST and declare `skagit-header` as its dependency. Several
   rules below win on source order at equal specificity; move the file
   earlier and the header goes dark again.

   --------------------------------------------------------------------------
   WHAT THIS FILE DOES
   1. Turns the header from the "Midnight Brass" night ground to a light one.
      The rest of the site stays dark. This is a HEADER change.
   2. Adds the full-width drop panel and the light dropdown.
   3. Keeps the ≤1024px off-canvas drawer exactly as it was.

   --------------------------------------------------------------------------
   THE ONE RULE YOU MUST NOT BREAK
   `.main-navigation` is `position: fixed` below 1025px (style.css) — it
   IS the drawer. Every rule in this file that touches `position`, `width`,
   `height` or `background` on `.main-navigation` sits inside
   `@media (min-width: 1025px)`. Writing one outside re-flows the drawer into
   the document, where its 100vh inside a z-index 9999 header covers the whole
   viewport. That has already happened once on this site.

   --------------------------------------------------------------------------
   !important INVENTORY  (nine declarations, every one forced by style.css)
   style.css sets each of these with !important, and an !important declaration
   can only be beaten by another !important one — specificity does not help.
     §1.1  background            .site-header.modern-header   (style.css)
     §1.1  color                 .site-header.modern-header   (style.css)
     §2.2  color                 .contact-pill                (style.css)
     §2.3  color                 .header-socials a            (style.css)
     §2.7  display               .header-utilities            (style.css)
     §3.1  color                 .header-menu > li > a        (style.css)
     §3.1  color (hover/current) .header-menu > li > a        (style.css)
     §5.2  color                 .sub-menu li a               (style.css)
     §5.2  color (hover)         .sub-menu li a               (style.css)
   Nothing else in this file uses it. In particular §6 must NEVER use it —
   see the note there.

   --------------------------------------------------------------------------
   CONTRAST (measured, sRGB, WCAG 2.x formula)
     --sk-gold-700  #7C6218  on --sk-paper #FAFBFC ...........  5.60:1  AA
     --sk-gold-700  #7C6218  on white ........................  5.80:1  AA
     --sk-charcoal  #2B3038  on --sk-paper ...................  12.81:1 AAA
     --sk-charcoal  #2B3038  on white ........................  13.27:1 AAA
     --sk-charcoal  #2B3038  on --sk-mist #F4F6F8 ............  12.25:1 AAA
     --sk-navy-700  #0B3D68  on --sk-paper ...................  10.81:1 AAA
     --sk-slate     #5B646F  on white ........................   6.07:1 AA
     white on the feature scrim at its darkest stop ..........   7.81:1  AA
       (worst case: a pure-white photograph under rgba(4,16,28,0.92))
     BOOK NOW: --sk-navy-950 on --sk-grad-brass ..............   6.10:1  AA
       (the darkest stop of the sweep; documented in skagit-buttons.css §2)
   No brand #D4AF37 or #009FE3 is used as text on any light ground.

   Verified range: 360px → 2560px. No horizontal overflow at any width.
   ========================================================================== */


/* ==========================================================================
   0. HEADER PALETTE ALIASES
   Aliases onto existing design-system tokens. No new colour is invented here;
   every value below resolves to something already declared in
   skagit-design-system.css §1.
   ========================================================================== */

.site-header.modern-header {
  /* ---- THE HEADER IS DARK AGAIN. WHY. -----------------------------------
     This palette was light (--sk-paper ground, --sk-charcoal ink) and it was
     rejected as bland. Three things forced the reversal, not taste:

     1. THE BULB RAIL CANNOT WORK ON WHITE. The marquee's whole effect is a
        warm bloom spilling past the lamp edge. Bloom is *additive* — it only
        reads where the surround is darker than the light. On a #FAFBFC ground
        there is nothing to bloom into, so every bulb collapses to a flat
        14px dot. That is the "little eggs" note, and no amount of tuning the
        lamp fixes it; the ground is the bug.
     2. THE ONLY CLEAN LOGO IS THE REVERSED ONE. The full-colour primary PNG
        is OPAQUE — it carries a baked-in light-grey plate (verified: corner
        alpha 0), so on any ground it shows as a grey box. The white mark is
        the only asset with a real alpha channel, and it needs a dark ground.
        The `filter: brightness(0)` stopgap that used to live at §1.2 was
        painting that grey plate solid black — that is the "logo looks
        horrible" note.
     3. "Not too dark" was about the ORIGINAL near-black (#04101C) with heavy
        fluting. This ground is a genuine midnight NAVY, two stops lighter,
        and it carries a warm brass wash rather than more black.

     If a navy or transparent-background colour wordmark is ever supplied,
     the light palette can come back — but the marquee would have to move to
     a dark band of its own, which is the thing that was asked to be removed. */
  /* LIGHTENED from #0C2136 — the first pass read as "heavy". Raised two
     stops to a softer slate-navy. This is the compromise point: the ground
     still has to be dark enough for the bulb bloom to register (see the note
     above), but every text colour below is re-checked against THIS value and
     all of them clear WCAG AAA (7:1), not just AA. Legibility for older
     readers was the explicit constraint, so nothing here is near the line. */
  --sk-hdr-bg:        #16354F;   /* slate navy                               */
  --sk-hdr-bg-deep:   #102941;   /* nav band, one stop down for separation   */
  --sk-hdr-bg-nav:    transparent;
  --sk-hdr-ink:       #FFFFFF;   /* pure white. 12.9:1 — was champagne, but
                                    on a lighter ground the warm tint costs
                                    contrast for no benefit.                 */
  --sk-hdr-ink-soft:  #C3CEDA;   /*  8.4:1                                   */
  --sk-hdr-link:      #F0D480;   /* light gold. 7.9:1 — the dark-ground twin
                                    of --sk-gold-700, which is a LIGHT-ground
                                    colour and unreadable here (1.6:1).
                                    Brightened alongside the ground.         */
  --sk-hdr-link-on:   #FFFFFF;   /* hover / current                          */
  --sk-hdr-rule:      rgba(212, 175, 55, 0.22);  /* brass hairlines          */
  --sk-hdr-panel:     #16354F;   /* mega panel, matched to the lifted bar    */
  --sk-hdr-panel-hi:  rgba(212, 175, 55, 0.10);  /* bar behind a link        */
  /* Panel open/close timing. The JS uses the same 150ms for its hover intent
     delay, so the two never fight. */
  --sk-mega-dur:      180ms;
}


/* ==========================================================================
   1. THE SHELL GOES LIGHT
   ========================================================================== */

/* ---- 1.1 Ground --------------------------------------------------------
   TWO !important. style.css declares
   `background: linear-gradient(...) !important; color: #fff !important`
   on this exact selector. Same specificity (0,2,0), so this wins on source
   order — but only because both are !important. */
/* Three layers, not one flat fill — a flat navy is what "bland" looked like
   before, only darker. Top to bottom:
     • a warm brass wash blooming from the upper right, so the bar has a light
       source and the gold in the CTA and the bulb rail reads as belonging to
       it rather than sitting on top of it;
     • a vertical ramp from a lifted navy down to --sk-hdr-bg-deep, which makes
       the nav row settle behind the lockup row without needing a divider;
     • the deep stop at 100% meeting the bulb rail. */
.site-header.modern-header {
  background:
    radial-gradient(125% 190% at 86% -45%, rgba(212, 175, 55, 0.16) 0%,
                                           rgba(212, 175, 55, 0) 56%),
    linear-gradient(180deg, #1D4265 0%,
                            var(--sk-hdr-bg) 44%,
                            var(--sk-hdr-bg-deep) 100%) !important;
  /* The bulb rail is pulled out of flow and straddles the bottom edge, so
     the header must not clip its own overflow or the bottom half of every
     lamp is cut off. */
  overflow: visible;
  color: var(--sk-hdr-ink) !important;
  /* style.css sets `0 5px 25px rgba(0,0,0,0.2)` with no !important, so a
     plain declaration here is enough. The inset brass line is the seam the
     bulb rail sits on. */
  box-shadow: inset 0 -1px 0 var(--sk-hdr-rule),
              0 14px 34px -18px rgba(3, 10, 18, 0.75);
}

/* `.header-pattern` stays hidden — it is a white-dot texture div that predates
   this ground and doubles the ribbing. Hiding an empty decorative div removes
   nothing from the accessibility tree. The ::before ribbing below replaces it
   and is owned by skagit-header.css §1. */
.site-header.modern-header .header-pattern { display: none; }

/* The fluting comes back, but at a quarter of its old strength. At full
   opacity it was the "busy" complaint; at 0.22 it is a texture you feel
   rather than count, which is what stops the navy reading as a flat slab. */
.site-header.modern-header::before {
  opacity: 0.22;
}

/* ---- 1.2 The wordmark --------------------------------------------------
   NO FILTER. There was a `filter: brightness(0)` here to darken the white
   wordmark for the light ground. It has been deleted rather than overridden,
   because an override was already attempted further down this file and LOST:
       §1.2  .site-header.modern-header .header-logo   (0,3,1)  brightness(0)
       later .site-header .header-logo                 (0,2,1)  filter: none
   Later in the file but weaker, so the filter kept winning and the mark
   rendered as a black slab. Deleting the source is the fix; a second
   competing rule is not.

   The ground is dark again (§0), so the reversed white PNG — the only logo
   asset with a real alpha channel — is correct as-is and needs no filter at
   any width or in any state. */
.site-header.modern-header .header-logo {
  /* A soft drop shadow so the mark sits in the navy rather than floating on
     it. Shadow, not filter: it must not touch the pixels of the mark. */
  filter: drop-shadow(0 1px 2px rgba(3, 10, 18, 0.55));
}

/* ---- 1.3 Bands ---------------------------------------------------------- */
.site-header .header-top-bar {
  border-bottom: 0;
  /* Was var(--sk-space-2xs) = 8px top and bottom. Removed 5 Aug 2026 on
     request, to take height out of the bar. The row is a grid whose tallest
     child (the BOOK NOW button) sets the height now, so the bar shrinks by the
     full 16px without anything inside it moving relative to anything else.
     `.header-top-bar .container-fluid` keeps its own padding — see
     skagit-header.css — so there is still breathing room at narrow widths
     where the logo and the button would otherwise meet the edges. */
  padding-block: 0;
}


/* ==========================================================================
   2. TOP BAR — WHAT SURVIVES NEXT TO THE LOGO
   --------------------------------------------------------------------------
   The complaint was that the logo is crowded. The intended end state is
   header.php carrying: logo, ONE phone link, ONE "Book Now" button. Until
   that edit lands, the rules below at least keep every current element
   legible on a light ground rather than white-on-white.
   ========================================================================== */

/* ---- 2.1 The lockup -----------------------------------------------------
   The wordmark moves from the centre to the LEFT. Centring it is what made
   the crowding structural rather than cosmetic: an optically centred logo
   needs matching weight on both sides of it, so the bar could never be
   anything other than cluster / logo / cluster.

   skagit-header.css §2 places three named children explicitly in a
   `1fr auto 1fr` grid. The template is left alone and only the placements are
   swapped, so this works BOTH before and after header.php is simplified:
     before — logo left, the old contact pills centred, utilities right
     after  — logo left, empty centre column collapsing to nothing, the phone
              number and BOOK NOW right, which is the reference exactly. */
@media (min-width: 1025px) {
  .site-header .header-top-bar .site-branding    { grid-column: 1; justify-self: start; }
  .site-header .header-top-bar .header-contact   { grid-column: 2; justify-self: center; }
  .site-header .header-top-bar .header-utilities { grid-column: 3; justify-self: end; }
}

.site-header .header-contact,
.site-header .header-utilities {
  gap: var(--sk-space-xs);
}

/* ---- 2.2 Contact pill ---------------------------------------------------
   ONE !important, forced by `.contact-pill { color: #fff !important }`
   (style.css). (0,1,0) there vs (0,2,0) here, but importance outranks
   specificity, so this has to match it. */
.site-header .contact-pill {
  color: var(--sk-hdr-ink) !important;
  background: transparent;
  border: 1px solid transparent;
  padding-inline: var(--sk-space-2xs);
  font-weight: var(--sk-weight-semi);
}

.site-header .contact-pill i { color: var(--sk-hdr-link); }

.site-header .contact-pill:hover {
  background: var(--sk-hdr-panel-hi);
  border-color: var(--sk-hdr-rule);
}

/* ---- 2.3 Socials --------------------------------------------------------
   ONE !important, forced by `.header-socials a { color: white !important }`
   (style.css). These are RECOMMENDED FOR DELETION from header.php — they
   all point at "#" — but a live-looking control must never be invisible in
   the meantime. */
.site-header .header-socials a {
  color: var(--sk-hdr-ink) !important;
  background: transparent;
  border-color: var(--sk-hdr-rule);
  box-shadow: none;
}

.site-header .header-socials a:hover {
  background: var(--sk-hdr-panel-hi);
  border-color: var(--sk-bronze-500);
  transform: none;
}

/* ---- 2.5 The single heavy element --------------------------------------
   `.sk-header-cta` is a HOOK, not a skin: the paint comes entirely from
   `.sk-btn .sk-btn--primary` in skagit-buttons.css. Nothing here reassigns a
   --sk-btn-* property, so the brass CTA in the header is the same object as
   the brass CTA everywhere else on the site. */
.site-header .sk-header-cta {
  flex: 0 0 auto;
  margin-inline-start: var(--sk-space-2xs);
}

@media (max-width: 25em) {
  /* 360px: logo + BOOK NOW + burger on one line. The button system's own
     custom properties are the documented way to retune it — nothing here
     repaints the button, so it stays the same object as every other brass CTA
     on the site. */
  .site-header .sk-header-cta {
    --sk-btn-pad-x: 0.8rem;
    --sk-btn-tracking: 0.06em;
  }
}

/* ---- 2.6 The burger --------------------------------------------------------
   >>> THIS RULE WAS STALE AND THE BARS WERE NEARLY INVISIBLE. <<<

   It was written when the header was CREAM: style.css paints the burger
   #D4AF37 on transparent with !important, which is 2.1:1 on cream and fails
   WCAG 1.4.11 for a control's own boundary — so the icon was forced to
   --sk-navy-700 on a light chip. The header then went back to midnight navy
   (§1.1) and this rule was never revisited, leaving **navy bars on a navy
   header**. Measured on a phone before the fix: icon rgb(11,61,104) against
   the header's navy ground, with the button's own background computing to
   transparent — i.e. the light chip the navy icon needed was not even there.

   The owner asked for white or gold. GOLD, because it is the same #D4AF37 that
   the button's own `color` already carried, the same brass as the BOOK NOW CTA
   beside it and the lamp rail below it — the burger was the one control in the
   header not speaking the brand's language. White would have been higher
   contrast but would read as a system chrome icon dropped onto a casino
   header.

   No !important needed: style.css's !important is on `color` for the BUTTON;
   the override that was actually beating it is this file's own `i` rule, which
   is now gone. The chip stays as a hairline brass ring so the control still
   has a visible boundary, per 1.4.11 — it just no longer pretends to be a
   light surface. */
@media (max-width: 1024px) {
  .site-header button.menu-toggle {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45);
  }

  /* Inherit the button's gold rather than restating it, so the two can never
     drift apart again — which is exactly how this rule went stale. */
  .site-header button.menu-toggle i {
    color: inherit;
  }

  /* Pressed/open state: fill the chip so the control reads as active. The
     drawer's own JS toggles aria-expanded, so no extra class is needed. */
  .site-header button.menu-toggle[aria-expanded="true"] {
    background: rgba(212, 175, 55, 0.14);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.85);
  }
}

/* ---- 2.7 BOOK NOW survives the phone -------------------------------------
   ONE !important. style.css hides `.header-utilities` outright below
   1024px, which was correct when the cluster was a gas badge and three dead
   social icons — and wrong the moment the site's primary conversion lives
   there. The container comes back; everything in it except the CTA does not,
   so a phone header reads logo / BOOK NOW / burger and nothing else.

   `.header-contact` is untouched: skagit-header.css §3.1 already restores the
   phone pill between 600px and 1024px, and that is still the right call. */
@media (max-width: 1024px) {
  .site-header .header-utilities {
    display: flex !important;
    gap: var(--sk-space-2xs);
  }

  .site-header .header-utilities > *:not(.sk-header-cta) { display: none; }

  .site-header .sk-header-cta { margin-inline-start: 0; }
}


/* ==========================================================================
   3. NAV BAND  (≥1025px only — see the warning at the top of this file)
   ========================================================================== */

@media (min-width: 1025px) {

  .site-header .main-navigation {
    background: var(--sk-hdr-bg-nav);
    border-top: 1px solid var(--sk-hdr-rule);
    box-shadow: inset 0 -1px 0 var(--sk-hdr-rule);
  }

  /* Left-aligned, not centred. A centred row of links needs symmetric weight
     on both sides of it, which is the arrangement that caused the crowding
     in the first place. */
  .site-header .nav-wrapper { justify-content: flex-start; }

  .site-header .header-menu { justify-content: flex-start; }

  /* ---- 3.1 The links ---------------------------------------------------
     ONE !important, forced by `.header-menu > li > a { color: #fff
     !important }` (style.css). */
  .site-header .header-menu > li > a {
    color: var(--sk-hdr-link) !important;
    padding-block: 0.95rem;
    font-weight: var(--sk-weight-bold);
    letter-spacing: 0.16em;
  }

  .site-header .header-menu > li > a:hover,
  .site-header .header-menu > li.current-menu-item > a,
  .site-header .header-menu > li.current-menu-ancestor > a,
  .site-header .header-menu > li.sk-is-open > a {
    color: var(--sk-hdr-link-on) !important;
  }

  /* The short rule under the active item. `currentColor`, so it is always
     exactly the link's own colour and can never drift out of step with it.
     skagit-components.css §2.4 already positions it centre-out. */
  .site-header .header-menu > li > a::after {
    background: currentColor;
    background-image: none;
    bottom: 0.5rem;
    height: 2px;
  }

  .site-header .header-menu > li:hover > a::after,
  .site-header .header-menu > li.sk-is-open > a::after,
  .site-header .header-menu > li.current-menu-item > a::after,
  .site-header .header-menu > li.current-menu-ancestor > a::after {
    width: calc(100% - 1.4rem);
  }
}


/* ==========================================================================
   4. THE PANEL — SHARED MECHANICS  (≥1025px)
   --------------------------------------------------------------------------
   Open/close is `visibility`, not `display`. `visibility: hidden` takes the
   panel's links out of the tab order (which `opacity: 0` alone does NOT — a
   transparent panel that still eats Tab presses is the classic mega-menu
   keyboard trap), while still allowing opacity and transform to animate.

   TWO WAYS IN, AND ONLY ONE OF THEM AT A TIME:
     no JS  -> :hover and :focus-within open it. The menu is fully usable by
               mouse and by keyboard with the script removed.
     JS     -> skagit-megamenu.js puts `sk-mega-js` on <html> and takes over,
               because it has to: :focus-within cannot be closed with Escape
               (focus returns to the toggle, which is INSIDE the item, so the
               panel would spring straight back open).
   ========================================================================== */

@media (min-width: 1025px) {

  /* The mega panel spans the whole nav band, so its containing block must be
     `.main-navigation` (already `position: relative` at this width) and not
     the list item. skagit-components.css §2.4 sets `.header-menu > li
     { position: relative }`; this releases it for mega items only.
     The simple dropdown keeps `position: relative` — it anchors to its item. */
  .site-header .header-menu > li.sk-has-panel--mega { position: static; }

  .site-header .sk-mega-panel {
    position: absolute;
    z-index: var(--sk-z-raised);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    background: var(--sk-hdr-panel);
    color: var(--sk-hdr-ink);
    text-align: start;
    transition: opacity var(--sk-mega-dur) var(--sk-ease-out),
                transform var(--sk-mega-dur) var(--sk-ease-out),
                visibility 0s linear var(--sk-mega-dur);
  }

  .site-header .sk-mega-panel--mega {
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    border-top: 1px solid var(--sk-hdr-rule);
    box-shadow: var(--sk-shadow-lg);
  }

  .site-header .sk-mega-panel--simple {
    top: 100%;
    left: 0;
    min-width: 250px;
    max-width: min(340px, calc(100vw - 2rem));
    border: 1px solid var(--sk-hdr-rule);
    border-radius: var(--sk-radius-md);
    box-shadow: var(--sk-shadow-md);
  }

  /* A dropdown on one of the last two items would open past the right edge.
     `html { overflow-x: clip }` stops the scrollbar, which here would mean
     "half the panel is unreachable" rather than "no problem". Mirrors the
     existing guard in skagit-header.css §7.1. */
  .site-header .header-menu > li:nth-last-child(-n + 2) > .sk-mega-panel--simple {
    left: auto;
    right: 0;
  }

  /* ---- 4.1 Open states -------------------------------------------------- */
  html:not(.sk-mega-js) .site-header .header-menu > li.sk-has-panel:hover > .sk-mega-panel,
  html:not(.sk-mega-js) .site-header .header-menu > li.sk-has-panel:focus-within > .sk-mega-panel,
  .site-header .header-menu > li.sk-has-panel.sk-is-open > .sk-mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--sk-mega-dur) var(--sk-ease-out),
                transform var(--sk-mega-dur) var(--sk-ease-out),
                visibility 0s linear 0s;
  }

  /* ---- 4.2 Inner rail --------------------------------------------------
     Matches `.nav-wrapper` exactly, so the photo tile's left edge lines up
     with the "CASINO" above it. */
  .site-header .sk-mega-panel--mega .sk-mega-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3.25rem);
    align-items: start;
    width: 100%;
    max-width: var(--sk-container);
    margin-inline: auto;
    padding: var(--sk-space-lg) var(--sk-gutter) var(--sk-space-xl);
  }

  /* A short viewport (a 13" laptop in landscape) must not put the last link
     under the fold with no way to reach it. */
  .site-header .sk-mega-panel--mega {
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header .sk-mega-panel--simple .sk-mega-inner {
    padding: var(--sk-space-2xs) 0 var(--sk-space-xs);
  }

  /* One column, when there is no split. */
  .site-header .sk-mega-panel--mega .sk-mega-col--primary:last-child {
    grid-column: 2 / -1;
  }
}


/* ==========================================================================
   5. THE PANEL — SKIN
   ========================================================================== */

@media (min-width: 1025px) {

  /* ---- 5.1 Feature tile ------------------------------------------------- */
  .site-header .sk-mega-feature {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 260px;
    border-radius: var(--sk-radius-md);
    background: var(--sk-grad-night);
    isolation: isolate;
  }

  .site-header .sk-mega-feature__media {
    position: absolute;
    inset: 0;
    display: block;
    z-index: -1;
  }

  .site-header .sk-mega-feature__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The scrim. Its darkest stop is what the white text is measured against:
     rgba(4,16,28,0.92) over a pure-white photograph still leaves 7.81:1. The
     copy sits in the bottom half where the scrim is at its strongest, which
     is also where the reference puts it. */
  .site-header .sk-mega-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg,
                rgba(4, 16, 28, 0.92) 0%,
                rgba(4, 16, 28, 0.86) 38%,
                rgba(4, 16, 28, 0.42) 72%,
                rgba(4, 16, 28, 0.22) 100%);
  }

  /* A brass hairline along the top edge — the one glint of metal in an
     otherwise flat panel. Decorative only, never carries text. */
  .site-header .sk-mega-feature::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 1;
    background: var(--sk-grad-brass);
    pointer-events: none;
  }

  .site-header .sk-mega-feature__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sk-space-2xs);
    height: 100%;
    min-height: 260px;
    justify-content: flex-end;
    padding: var(--sk-space-md);
  }

  .site-header .sk-mega-feature__title {
    font-family: var(--sk-font-display);
    font-size: var(--sk-fs-xl);
    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;
  }

  .site-header .sk-mega-feature__blurb {
    max-width: 34ch;
    font-size: var(--sk-fs-sm);
    line-height: var(--sk-lh-body);
    color: var(--sk-white);
    text-wrap: pretty;
  }

  .site-header .sk-mega-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-top: var(--sk-space-3xs);
    min-height: 32px;
    color: var(--sk-white);
    font-size: var(--sk-fs-xs);
    font-weight: var(--sk-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid var(--sk-gold-400);
    transition: border-color var(--sk-dur-fast) var(--sk-ease-out),
                gap var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .sk-mega-feature__cta:hover {
    border-bottom-color: var(--sk-white);
    gap: 0.85em;
  }

  /* No photograph anywhere: the tile becomes an ink block with the brass
     edge, which is a designed empty state rather than a grey hole. */
  .site-header .sk-mega-feature--plain { background: var(--sk-grad-sapphire); }

  .site-header .sk-mega-feature--plain::after { background: rgba(4, 16, 28, 0.45); }

  /* ---- 5.2 Columns ------------------------------------------------------ */
  .site-header .sk-mega-col { min-width: 0; }

  .site-header .sk-mega-col__heading {
    display: block;
    margin-bottom: var(--sk-space-2xs);
    padding-bottom: var(--sk-space-3xs);
    border-bottom: 1px solid var(--sk-hdr-rule);
    color: var(--sk-hdr-link);
    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;
  }

  .site-header .sk-mega-col__note {
    margin: 0 0 var(--sk-space-2xs);
    color: var(--sk-hdr-ink-soft);
    font-size: var(--sk-fs-xs);
    font-style: italic;
    line-height: var(--sk-lh-snug);
  }

  /* The list itself. skagit-components.css §2.4 and style.css both build
     `.sub-menu` as an absolutely positioned dark card; inside a panel it is
     just a list. (0,4,0) here against (0,2,0) and (0,3,0) there. */
  .site-header .header-menu .sk-mega-panel .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .site-header .header-menu .sk-mega-panel .sub-menu::before { display: none; }

  .site-header .header-menu .sk-mega-panel .sub-menu li { margin: 0; }

  /* TWO !important, forced by style.css's `.header-menu .sub-menu li a` rules,
     which paint sub-menu
     links `#fff !important` and `#D4AF37 !important`. */
  .site-header .header-menu .sk-mega-panel .sub-menu li a {
    display: block;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--sk-radius-xs);
    background: none;
    color: var(--sk-hdr-ink) !important;
    font-size: var(--sk-fs-sm);
    font-weight: var(--sk-weight-semi);
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color var(--sk-dur-fast) var(--sk-ease-out),
                color var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a:hover,
  .site-header .header-menu .sk-mega-panel .sub-menu li.current-menu-item > a {
    background: var(--sk-hdr-panel-hi);
    color: var(--sk-hdr-link-on) !important;
  }

  /* The current page also gets a rule down its left edge, so the state is not
     carried by colour alone (WCAG 1.4.1). */
  .site-header .header-menu .sk-mega-panel .sub-menu li.current-menu-item > a {
    box-shadow: inset 3px 0 0 var(--sk-gold-600);
  }

  /* ---- 5.3 The simple dropdown's own parent link ----------------------- */
  .site-header .sk-mega-panel--simple .sk-mega-parent-link {
    display: block;
    margin: 0 var(--sk-space-2xs) var(--sk-space-3xs);
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--sk-hdr-rule);
    color: var(--sk-hdr-link);
    font-size: var(--sk-fs-xs);
    font-weight: var(--sk-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .site-header .sk-mega-panel--simple .sk-mega-parent-link:hover {
    color: var(--sk-hdr-link-on);
    background: var(--sk-hdr-panel-hi);
  }

  .site-header .header-menu .sk-mega-panel--simple .sub-menu { padding-inline: var(--sk-space-2xs); }

  .site-header .sk-mega-arrow {
    display: inline-block;
    transition: transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header a:hover > .sk-mega-arrow { transform: translateX(3px); }
}


/* ==========================================================================
   6. BELOW 1025px — THE DRAWER STAYS IN CHARGE
   --------------------------------------------------------------------------
   Nothing here touches `position`, `width`, `height` or `background` on
   `.main-navigation`.

   The panel wrapper IS the accordion body. footer.php's script toggles
   `parentAnchor.nextElementSibling.style.display` between 'block' and 'none',
   and that sibling is now `.sk-mega-panel`. So:

       NEVER write `display: none !important` on `.sk-mega-panel`.

   An inline style loses to an !important rule, and the drawer's submenus
   would stop opening on every phone.
   ========================================================================== */

@media (max-width: 1024px) {

  .site-header .sk-mega-panel {
    display: none;          /* deliberately not !important — see above */
    padding: 0;
    background: rgba(0, 0, 0, 0.28);
  }

  .site-header .sk-mega-inner { display: block; }

  /* The photograph and the sentence are desktop furniture. The parent-page
     LINK is not: below 992px footer.php calls preventDefault() on the parent
     anchor, so without this link the section's own page is unreachable from
     the drawer. It stays. */
  .site-header .sk-mega-feature {
    display: block;
    min-height: 0;
    background: none;
    border-radius: 0;
  }

  .site-header .sk-mega-feature::before,
  .site-header .sk-mega-feature::after,
  .site-header .sk-mega-feature__media,
  .site-header .sk-mega-feature__blurb,
  .site-header .sk-mega-col__note { display: none; }

  .site-header .sk-mega-feature__title { display: none; }

  .site-header .sk-mega-feature__body {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .site-header .sk-mega-feature__cta,
  .site-header .sk-mega-parent-link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.6rem var(--sk-space-md) 0.6rem calc(var(--sk-space-md) + 1rem);
    color: var(--sk-gold-300);
    font-size: var(--sk-fs-xs);
    font-weight: var(--sk-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .site-header .sk-mega-col__heading {
    display: block;
    padding: var(--sk-space-2xs) var(--sk-space-md) var(--sk-space-3xs);
    color: var(--sk-gold-300);
    font-size: var(--sk-fs-xs);
    font-weight: var(--sk-weight-bold);
    letter-spacing: var(--sk-tracking-eyebrow);
    text-transform: uppercase;
    opacity: 0.85;
  }

  /* skagit-responsive.css §C.1 leaves `.sub-menu` at `display: none` and
     relies on footer.php setting an inline `display: block` on it. That
     inline style now lands on the panel wrapper instead, so the list inside
     has to be shown here. (0,4,0), and it loads after both the (0,3,0) rule
     in skagit-responsive.css and the (0,2,0) one in style.css. */
  .site-header .header-menu .sk-mega-panel .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}


/* ==========================================================================
   7. FOCUS  (do not weaken)
   --------------------------------------------------------------------------
   The ring is the design-system ring, unchanged in shape: a 3px gold outline
   at 2px offset plus a halo ring immediately outside it.

   What changes is which halo. skagit-design-system.css flips the halo
   to WHITE and the outline to --sk-gold-400 for everything inside
   `.site-header`, because the header used to be a night ground. On cream a
   white halo is not a halo, and #E3C566 on #FAFBFC is 1.53:1. Both go back to
   the light-ground defaults the rest of the site already uses:

     outline  --sk-gold-500 #D4AF37  against the halo ......... 9.11:1
     halo     --sk-navy-950 #04101C  against --sk-paper ....... 18.49:1

   Nothing below sets `outline: none`.
   ========================================================================== */

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header .sk-mega-panel a: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);
  position: relative;
  z-index: var(--sk-z-raised);
}

/* The drawer is still a night ground, so it keeps the white halo and the
   lighter gold. Restated after the rule above precisely because that rule
   would otherwise darken it into invisibility. */
@media (max-width: 1024px) {
  .site-header .main-navigation a:focus-visible,
  .site-header .main-navigation button:focus-visible {
    outline-color: var(--sk-gold-400);
    box-shadow: var(--sk-focus-halo-ring-on-dark);
  }
}

/* The panel scrolls on short viewports, and `overflow` clips a box-shadow (it
   never clips `outline`, so the gold ring itself always survives). The inner
   rail's `--sk-gutter` padding — 18px at its narrowest — is already wider than
   the 7px the halo needs, so no extra room is added here. Noted so a future
   edit does not drop that padding to zero and quietly clip the halo. */


/* ==========================================================================
   8. REDUCED MOTION
   The panel still opens and closes — instantly. Nothing is hidden from
   anyone; only the movement goes.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-header .sk-mega-panel {
    transform: none;
    transition: none;
  }

  .site-header .header-menu > li.sk-has-panel.sk-is-open > .sk-mega-panel,
  html:not(.sk-mega-js) .site-header .header-menu > li.sk-has-panel:hover > .sk-mega-panel,
  html:not(.sk-mega-js) .site-header .header-menu > li.sk-has-panel:focus-within > .sk-mega-panel {
    transform: none;
    transition: none;
  }

  .site-header .sk-mega-feature__cta,
  .site-header .sk-mega-arrow { transition: none; }
}


/* ==========================================================================
   9. FORCED COLORS (Windows High Contrast)
   Gradients, translucent fills and the scrim are all discarded there, so the
   panel would arrive as unbordered text floating over the page beneath it.
   ========================================================================== */

@media (forced-colors: active) {
  .site-header .sk-mega-panel {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .site-header .sk-mega-feature { border: 1px solid CanvasText; }

  .site-header .sk-mega-feature::after { display: none; }

  .site-header .sk-mega-col__heading { border-bottom: 1px solid CanvasText; }

  .site-header .header-menu .sk-mega-panel .sub-menu li.current-menu-item > a {
    outline: 1px solid CanvasText;
  }
}


/* ==========================================================================
   10. OVERFLOW SAFETY
   ========================================================================== */

.site-header .sk-mega-panel,
.site-header .sk-mega-inner,
.site-header .sk-mega-col { min-width: 0; max-width: 100%; }

.site-header .sk-mega-col__heading,
.site-header .sk-mega-feature__title,
.site-header .sk-mega-feature__blurb,
.site-header .sk-mega-panel .sub-menu li a { overflow-wrap: break-word; }

/* 1025-1199px: three columns plus a photo is tight. The tile narrows first,
   because its text is the only thing here that can reflow gracefully. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header .sk-mega-panel--mega .sk-mega-inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sk-space-md);
  }

  .site-header .sk-mega-feature,
  .site-header .sk-mega-feature__body { min-height: 220px; }
}


/* ==========================================================================
   11. ADMIN SCREEN  —  Website Content -> Header Menu
   --------------------------------------------------------------------------
   This block is loaded in wp-admin ONLY, by skagit_mega_menu_admin_assets()
   in inc/mega-menu-admin.php, and every selector is scoped under
   `.skagit-mega-admin`. It shares the file with the front end because of a
   file-ownership boundary on the task that produced it, exactly as
   assets/css/skagit-hero.css does; the split is described in
   AGENT-MEGAMENU-REPORT.md.
   ========================================================================== */

.skagit-mega-admin__cards {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.skagit-mega-admin__card {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.skagit-mega-admin__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f1;
  background: #f6f7f7;
  border-radius: 6px 6px 0 0;
}

.skagit-mega-admin__name {
  font-size: 1.15em;
  font-weight: 700;
  color: #0b3d68;
}

.skagit-mega-admin__shape {
  font-size: 0.85em;
  color: #50575e;
}

.skagit-mega-admin__empty { margin: 16px; }

.skagit-mega-admin__body {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
  padding: 16px;
}

@media (max-width: 960px) {
  .skagit-mega-admin__body { grid-template-columns: minmax(0, 1fr); }
}

.skagit-mega-admin__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border: 1px dashed #c3c4c7;
  border-radius: 4px;
  background: #f6f7f7;
  overflow: hidden;
}

.skagit-mega-admin__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skagit-mega-admin__thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #646970;
  font-size: 0.9em;
}

.skagit-mega-admin__warn {
  padding: 8px 10px;
  border-left: 4px solid #d63638;
  background: #fcf0f1;
  font-size: 0.9em;
}

.skagit-mega-admin__media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.skagit-mega-admin__clear { color: #b32d2e; }

.skagit-mega-admin__field { margin: 0 0 16px; }

.skagit-mega-admin__field label { display: block; margin-bottom: 4px; }

.skagit-mega-admin__field .description { display: block; margin-top: 4px; }

.skagit-mega-admin__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 20px;
}

.skagit-mega-admin__preview {
  padding: 12px 14px;
  border: 1px solid #f0f0f1;
  border-radius: 4px;
  background: #f6f7f7;
}

.skagit-mega-admin__preview-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9em;
  color: #50575e;
}

.skagit-mega-admin__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.skagit-mega-admin__cols strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7C6218;   /* --sk-gold-700, 5.4:1 on #F6F7F7 */
}

.skagit-mega-admin__cols ul { margin: 0; }

.skagit-mega-admin__cols li {
  margin: 0 0 2px;
  font-size: 0.9em;
  color: #2B3038;
}

.skagit-mega-admin__cols li:empty { display: none; }

/* ---- logo correction: REMOVED ------------------------------------------
   This used to be a `filter: none` override chasing the `brightness(0)` at
   §1.2. It never applied: (0,2,1) here against (0,3,1) there, so the filter
   it was written to cancel outranked it regardless of source order — which is
   why the wordmark still rendered as a black slab after the "fix".

   §1.2 now owns the wordmark's filter outright (a drop-shadow, no colour
   manipulation). A second rule here would only re-create the same fight, so
   the correct edit was to delete this one rather than escalate it.
   ------------------------------------------------------------------------ */


/* ==========================================================================
   20. THE BULB RAIL STRADDLES THE SEAM
   --------------------------------------------------------------------------
   Derived from the owner's own console test:
       margin: -34px; position: relative; top: 16px;
   That reads as: take the rail OUT OF FLOW so it stops occupying a strip of
   its own, then drop it back down so the lamps sit ON the boundary between
   the header and the slider rather than above it. Which is exactly how a real
   marquee is mounted — bulbs on the edge of the fascia, not on a band behind
   it, and it is what the mailer shows.

   Rebuilt with absolute positioning instead of negative margins so it does
   not depend on the rail's own height. `translateY(50%)` centres the lamps on
   the header's bottom edge at ANY bulb size, where -34px only worked for one.
   The header keeps `overflow: visible` (§1.1) so the lower half is not
   clipped, and the rail is `pointer-events: none` so it cannot eat clicks
   aimed at the slider underneath.
   ========================================================================== */

/* CONTAINING BLOCK — DO NOT MOVE THIS OUT OF THE MEDIA QUERY.
   The absolute rail below needs a positioned ancestor. Declaring
   `position: relative` on the header unconditionally looks harmless and is
   not: skagit-header.css §1.1 sets `position: sticky` on this exact selector
   (0,2,0) inside `@media (max-width: 1024px)`, and this file loads after it,
   so an unscoped `relative` here wins and silently kills the sticky header on
   every phone and tablet. `sticky` is itself a positioned value and already
   provides the containing block, so ≤1024px needs nothing at all. */
@media (min-width: 1025px) {
  .site-header.modern-header { position: relative; }
}

.site-header.modern-header .sk-marquee {
  position: absolute;
  left: 0;
  right: 0;
  /* DROP THE RAIL ONTO THE SEAM.
     Tested by hand as `bottom: -6px`, which was right at the ORIGINAL lamp size
     and only there. --sk-mq-bulb is a clamp(), so a fixed 6px is a different
     fraction of a small lamp than a large one; the rail would sit correctly on
     a wide screen and visibly low on a narrow one. Expressed as a ratio it
     holds at every width.

     0.29333, NOT 0.24 — and the two are the same position. The lamps were
     scaled down (§20 below) and this multiplier is what keeps them on the same
     line. The general rule, for a lamp at fraction f of the original size:

         multiplier k = 0.16 + 0.08 / f

     f = 0.5 -> 0.32,  f = 0.6 -> 0.29333,  f = 1 -> 0.24 (the original).
     **Change the lamp size and you MUST recompute k**, or the row drifts off
     the seam. Derivation below.

     The rail's vertical padding is a FIXED 0.35rem = 5.6px per
     skagit-marquee.css (`.sk-marquee--rail .sk-marquee__rail`, which
     out-specifies the bulb-derived padding at :187). So with b = lamp size the
     rail is `b + 11.2` tall, and the centre of the lamp row lands at

         0.24b - 0.16(b + 11.2)  =  0.08b - 1.792     px below the header seam

     (the 0.16 is `translateY(34%)` minus the half-height, i.e. 0.5 - 0.34.)
     Scaling b to f·b and using k = 0.16 + 0.08/f gives

         (0.16 + 0.08/f)(fb) - 0.16(fb + 11.2)
       =  0.16fb + 0.08b - 0.16fb - 1.792
       =  0.08b - 1.792

     — the f terms cancel exactly, so the row does not move at ANY viewport
     width and for ANY lamp size, not merely at the one it was checked on.
     Measured at f = 0.5: centre y 167.13 both before and after at 1280px, and
     drift under 0.01px at 758 / 1242 / 1590. */
  /*
   * The `+ 2px` is a deliberate constant nudge on top of the size-invariant
   * formula above, asked for on 5 Aug 2026 to sit the lamps on the seam rather
   * than a fraction below it. `bottom` is negative here, so ADDING makes it
   * less negative and lifts the rail; 2px up, at every viewport width.
   *
   * It is a flat pixel value ON PURPOSE. The ratio term keeps the row on the
   * seam as the lamp size changes; this term is optical trim against a 1-2px
   * seam that does not scale with anything. Folding it into the multiplier
   * would make it grow with the lamps and stop being trim.
   */
  bottom: calc(var(--sk-mq-bulb, 15px) * -0.29333 + 2px);
  /* 34%, not 50%. A true 50% centres each lamp on the boundary, which puts
     half of it over the slider photograph — and a warm bloom over a bright
     image is invisible. Biasing upward keeps roughly two thirds of every lamp
     on the navy, where it glows, while the lower third still breaks the edge
     so the rail reads as mounted ON the fascia rather than sitting above it. */
  transform: translateY(34%);
  /* 10, not 5. The hero below sets `isolation: isolate` and the RevSlider
     module paints its own stacking context, so at 5 the lower half of each
     lamp could be covered by the slider's top edge.
     The dropdown panels sit ABOVE this at 20 — see §23. */
  z-index: 10;
  pointer-events: none;
  /* Fades out while a panel is open, so the lamps never sit across a menu.
     See §23 for why this is a fade rather than a z-index alone. */
  transition: opacity 200ms ease;
  /* Out of flow means it no longer needs vertical padding to reserve space;
     the bloom spills freely in both directions now. */
  padding-block: 0;
  min-height: 0;
}

/* A short scrim under the lamps so the part that overhangs the slider has
   something to glow against. 26px, fading to nothing — deliberately NOT the
   band that was removed: it carries no colour of its own, only a darkening,
   and it is gone before it reaches the slider's own content. */
.skagit-home-hero::before,
.site-header.modern-header + * .rev_slider::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(8, 23, 38, 0.55) 0%,
              rgba(8, 23, 38, 0) 100%);
}

/* Lamp size. Overridden in the header scope only, so `[skagit_marquee]`
   elsewhere on the site keeps its documented sizes.

   SCALED DOWN on request (5 Aug 2026) — the lamps read as too heavy at 26px.
   Original was `clamp(15px, 0.85vw + 12.8px, 26px)`. Halved first, then taken
   back up to **0.6** ("a little bit bigger"). Every term is multiplied by the
   same 0.6, so the size still tracks the viewport exactly as it did, just at
   0.6 scale (23.67px -> 14.20px at 1280px; ceiling 26px -> 15.6px).

   >>> THE GAP IS DELIBERATELY NOT HALVED. Leaving it at the original value
   keeps every lamp's horizontal centre exactly where it was, so the row reads
   as the same rail with smaller glass rather than a different, denser
   ornament. It also keeps the row wider than the mask on every screen (40
   lamps span ~1971px against a ~1118px rail at 1280px), so the end fade still
   has surplus to dissolve and the row never shows a hard end. <<<

   The vertical position is held by the `bottom` multiplier above — see the
   derivation there. The two values are coupled: change one, re-derive the
   other, or the row moves off the seam. */
.site-header.modern-header .sk-marquee--lg {
  --sk-mq-bulb: clamp(9px, 0.51vw + 7.68px, 15.6px);
  --sk-mq-gap: clamp(26px, 3vw, 54px);
  /* The brass collar is an absolute px token, so unlike the bloom and halo
     (which are multiples of --sk-mq-bulb and shrink on their own) it does not
     follow the glass down. At 6px against a 14px globe the socket would be
     nearly as wide as the lamp it holds. Scaled by the same 0.6. */
  --sk-mq-socket: 3.6px;
}


/* ---- 20.1 SHARP LAMPS ---------------------------------------------------
   The lamp was drawn as a soft core inside a 5.2x bloom. At 14px on a dark
   bar that read as a glow; at 26px straddling a photograph it read as a
   smudge with no object in the middle of it — the bloom was wider than the
   bulb by a factor of five, so what you actually saw was halo.

   Rebuilt around a DEFINED EDGE:
     • the core gradient now holds pure white to 30% and hits its rim colour
       by 92%, so there is a crisp lamp with a visible circumference;
     • a 1px brass rim seats it as a physical object rather than a light leak;
     • bloom cut 5.2x -> 1.9x, and the outer halo alphas roughly halved, so
       adjacent lamps no longer merge into a continuous band of light.
   The chase still reads because --sk-mq-lum drives opacity on the halo
   layers, not the core.
   ------------------------------------------------------------------------ */
.site-header.modern-header .sk-marquee__bulb {
  --sk-mq-bloom: 1.9;
}

.site-header.modern-header .sk-marquee__bulb::after {
  background-image: radial-gradient(circle at 42% 34%,
      #FFFFFF 0%,
      #FFFFFF 30%,
      #FFF7DC 52%,
      #F6DE9C 74%,
      #E0B851 92%,
      #C79B36 100%);
  /*
   * SHARP, NOT BLOOMING — the wide halo was being clipped into a rectangle.
   *
   * The three glow layers that were here ended with
   * `calc(var(--sk-mq-bulb) * var(--sk-mq-bloom))`, which resolved to a 49.4px
   * blur on a 26px bulb: the halo wanted about 125px of vertical room. The rail
   * it sits in is 37px tall and carries `overflow: clip`, so the round glow was
   * sliced flat top and bottom and what reached the screen was a soft RECTANGLE
   * behind every bulb.
   *
   * The rail is clipped deliberately, so a surplus bulb can never widen the
   * page, and growing it to fit the bloom would add ~38px to the header on
   * every page for a decoration. So the bulb goes sharp instead: the inset rim
   * stays — it is what gives the globe a silhouette — and the glow becomes a
   * single tight halo. At 0.18x the bulb the lit height is ~35px against the
   * rail's 37px, so nothing reaches the clip edge.
   *
   * THIS is the rule that governs the header bulbs. `.sk-marquee--on-dark` and
   * the other variants in skagit-marquee.css all score lower or load earlier
   * and lose to it, so changing them has no effect here.
   */
  /*
   * NO OUTER GLOW. Removed 5 Aug 2026 on the owner's note that "there is this
   * halo that doesn't look right".
   *
   * It was `0 0 calc(var(--sk-mq-bulb) * 0.18) rgba(255, 250, 228, 0.80)` — a
   * soft bloom scaled to the lamp. It worked at 26px on a dark bar, where a
   * lamp is a light SOURCE and the glow is the whole effect. It stopped working
   * for two reasons at once: the lamps came down to 0.6 scale, and the rail
   * straddles the seam so half of every lamp now sits over the bright slider
   * photo. Bloom is additive — it only reads where the surround is darker than
   * the light — so over the photo it stopped looking like light and started
   * looking like a grey ring around a disc, which is exactly what was reported.
   * Magnified to 70px it is unmistakable: a fuzzy blob with no circumference.
   *
   * The inset rim STAYS and is now doing all the work of making this read as a
   * physical object rather than a light leak. Do not remove it as well.
   *
   * The chase still reads without the glow: --sk-mq-lum drives the globe's
   * opacity, and skagit-marquee.css §12.1 also drives a scale swell, so a lit
   * lamp differs from an unlit one in both brightness and size.
   */
  box-shadow: inset 0 0 0 1px rgba(150, 112, 30, 0.55);
}

/* THE RAIL MUST NOT SIT ON THE MENU TEXT.
   The rail is centred on the header's bottom edge and biased up by 34%, so
   each lamp reaches about two thirds of its own height ABOVE that edge. The
   nav links end flush with the same edge, so the lamps were landing across the
   bottom of the words. This padding is the clearance band.

   >>> IT WAS `calc( var(--sk-mq-bulb) * 0.95 )` — DERIVED FROM THE LAMP SIZE,
   WHICH IS WHY IT SURVIVED THE LAMPS BEING RESIZED TWICE. Pinned to a flat 5px
   on request (5 Aug 2026) to tighten the bar. That breaks the link: the
   clearance no longer tracks the lamps, so **anyone changing --sk-mq-bulb must
   re-check this by eye**, and making the lamps bigger again will put them on
   the words.

   At the current 0.6-scale lamp the geometry is: half a lamp is ~7px, the row
   sits 2.4px above the seam and the lit swell adds ~6%, so a lamp reaches
   ~9.8px above the edge against 5px of reserved band. The measured gap to the
   menu text is recorded in the deploy notes; it clears because the links carry
   their own line-height above the box edge, not because 5px is enough on its
   own. That is a thinner margin than this rule used to guarantee. <<< */
.site-header.modern-header .main-navigation {
  padding-bottom: 5px;
}


/* ==========================================================================
   21. HEADER TYPE — SIZE UP FOR LEGIBILITY
   --------------------------------------------------------------------------
   The nav was set at --sk-fs-xs with heavy tracking, which is a small-caps
   label size, not a navigation size. A significant share of this audience is
   older; the primary navigation is the last place to be economical with type.
   Sizes below are floors, not fluid maxima — they do not shrink under 1025px
   because that is where the drawer takes over anyway.
   ========================================================================== */

.site-header.modern-header .header-menu > li > a {
  font-size: clamp(0.9375rem, 0.34vw + 0.85rem, 1.0625rem);  /* 15 -> 17px */
  font-weight: var(--sk-weight-semi, 600);
  letter-spacing: 0.055em;
  padding-block: 1.15rem;
}

.site-header.modern-header .contact-pill,
.site-header.modern-header .contact-pill span {
  font-size: clamp(0.875rem, 0.2vw + 0.83rem, 0.9375rem);    /* 14 -> 15px */
}

.site-header.modern-header .sk-header-cta {
  font-size: clamp(0.875rem, 0.2vw + 0.83rem, 0.9375rem);
  letter-spacing: 0.08em;
  padding-inline: clamp(1.1rem, 1.6vw, 1.6rem);
}

/* Mega panel copy was sized to match the old small nav; bring it up with the
   rest so the panel is not the hardest thing on the page to read. */
.site-header.modern-header .sk-mega-panel a,
.site-header.modern-header .sub-menu a {
  font-size: clamp(0.9375rem, 0.2vw + 0.89rem, 1rem);        /* 15 -> 16px */
  line-height: 1.45;
}


/* ==========================================================================
   22. THE MENU BAR
   --------------------------------------------------------------------------
   The nav row had no state of its own: no hover indicator, no current-page
   marker, and no separation from the lockup above it. Six gold words on navy
   with nothing telling you which one you are on, or which one you are about
   to click.
   ========================================================================== */

/* ---- 22.1 The band ------------------------------------------------------
   A hairline above the row so it reads as a distinct bar rather than more
   space under the logo. Brass at low alpha, matching the seam the bulbs sit
   on, so the header is bracketed by the same line top and bottom.

   DESKTOP ONLY, AND THAT SCOPE IS LOAD-BEARING.
   Below 1025px this same element is the MOBILE DRAWER, which style.css gives
   a solid dark ground. Unscoped, the near-transparent gradient above replaced
   that ground — leaving white menu text on a transparent panel over a cream
   page. The drawer opened correctly with all six items present and measurable
   and looked completely blank. Anything that paints `.main-navigation` has to
   be scoped, every time. */
@media (min-width: 1025px) {
  .site-header.modern-header .main-navigation {
    border-top: 1px solid rgba(212, 175, 55, 0.16);
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.03) 0%,
                rgba(255, 255, 255, 0) 100%);
  }
}

/* The bar is now menu-left / details-right, so the wrapper is the flex
   container and the menu no longer centres itself inside it.

   DESKTOP ONLY — same reason as §22.1. Below 1025px this wrapper is the
   inside of the drawer, where the items must stack vertically and fill the
   width; a horizontal `space-between` row there produces a squashed strip of
   overlapping links. */
@media (min-width: 1025px) {
  .site-header.modern-header .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 3rem);
    width: 100%;
    max-width: var(--sk-container);
    margin-inline: auto;
    padding-inline: var(--sk-gutter);
  }
}

/* NOWRAP, NOT WRAP.
   With the details cluster now competing for the same row, `flex-wrap: wrap`
   let the six menu items break onto a second line — measured: item tops at
   81px and 163px, which pushed the header from 143px to 249px. The menu is a
   single row by definition; if space runs short the DETAILS shed (§22.6), not
   the navigation. */
/* DESKTOP ONLY. In the drawer the list is a vertical stack owned by
   style.css; forcing a nowrap row there lines six items up side by side in a
   322px panel. */
@media (min-width: 1025px) {
  .site-header.modern-header .header-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: clamp(0.25rem, 1.4vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    /* `0 0 auto`, NOT `0 1 auto` with `min-width: 0`.
       Allowing the list to shrink below its content made it 800px wide while
       its items still measured out to 889px — the items simply overflowed the
       box and drew straight over the details cluster, a 45px collision that
       put "OUR RESORT" on top of the address. A nav bar's items are not
       negotiable width; the DETAILS are the flexible side (§22.6). */
    flex: 0 0 auto;
  }
}

/* ---- 22.6 Right-hand details -------------------------------------------
   Address, hours and phone. Sized down from the nav so they read as support
   rather than competing with navigation, but still comfortably above the
   minimum for body text — this audience skews older and these are exactly the
   details they came for. Measured 7.4:1 on the nav ground. */
/* The details are the flexible side: they shrink and then shed (§22.6) so the
   navigation never has to. */
.site-header.modern-header .nav-utilities {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
  min-width: 0;
  margin-left: auto;
  flex: 0 1 auto;
  /* NOT `overflow: hidden`. Clipping produced a phone number reading
     "+1 877 275 24" — a half-rendered fact is worse than an absent one. The
     media queries above remove whole items instead, so nothing is ever shown
     cut in half. */
  min-width: 0;
}

.site-header.modern-header .nav-util {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--sk-hdr-ink-soft);
  font-size: clamp(0.8125rem, 0.22vw + 0.78rem, 0.9375rem);
  font-weight: var(--sk-weight-medium, 500);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-header.modern-header .nav-util i {
  color: var(--sk-hdr-link);
  font-size: 0.95em;
  flex: 0 0 auto;
}

.site-header.modern-header a.nav-util:hover,
.site-header.modern-header a.nav-util:focus-visible {
  color: var(--sk-hdr-link-on);
}

/* A brass hairline between each detail — the same device as the header seam,
   so the bar reads as one system rather than three floating labels. */
.site-header.modern-header .nav-util + .nav-util {
  padding-left: clamp(0.75rem, 1.8vw, 1.75rem);
  border-left: 1px solid rgba(212, 175, 55, 0.20);
}

/* Shed the details progressively rather than letting them collide with the
   menu. Thresholds raised after measuring: at 1440px the menu occupies 889px
   and all three details wanted ~550px, so they overlapped by 45px — the old
   first breakpoint was `max-width: 1439px`, which does not even fire at 1440.
   These are set from measured widths, with headroom, rather than round
   numbers.

   The PHONE now sheds first, not last. It is duplicated verbatim in the
   header top bar two rows above, so dropping it here costs the visitor
   nothing — whereas the address and the opening hours appear nowhere else
   above the fold. */
/*
 * THE LADDER WAS RETUNED once the phone number was removed from this row
 * altogether (header.php). It used to shed the phone at 1600, the address TEXT
 * at 1400 and the hours at 1240 — thresholds measured while the phone was still
 * occupying roughly 190px of the row.
 *
 * With that 190px returned, the address and the hours — the two things that
 * appear nowhere else above the fold, and the two the owner asked to keep — now
 * survive to 1120px, where the whole row hands over to the drawer anyway.
 *
 * `.nav-util--tel` is kept as a rule with nothing to match: the markup is gone,
 * but leaving the selector documents that the phone must not come back to this
 * row rather than silently allowing it.
 */
@media (max-width: 1600px) {
  /* No markup matches this any more — the phone lives only in the top bar. */
  .site-header.modern-header .nav-util--tel { display: none; }

  /*
   * THE ADDRESS SHORTENS TO ITS ICON HERE, NOT AT 1240px.
   *
   * The 190px freed by dropping the phone was not enough to carry the address
   * text down to 1240, and the row was clipping on the commonest laptop widths.
   * Measured on the live header, with the address text shown:
   *
   *     viewport   .nav-utilities has   needs   text overflows the frame by
   *     1280       354px                488px   83px
   *     1366       384px                488px   51px
   *     1440       414px                488px   23px
   *     1600       fits                 488px   0
   *
   * `.header-menu` is `flex: 0 0 auto` at 901px and cannot shrink, so the
   * utilities absorb the whole squeeze; `.nav-util` is `white-space: nowrap`,
   * so the squeeze becomes overflow rather than a wrap. The result was
   * "Casino open 8am – 2am daily" running off the right edge on EVERY page at
   * 1280-1440 — exactly the half-rendered fact the note above this block says
   * must never happen.
   *
   * >>> THE 1600px THRESHOLD THAT WAS HERE WAS WRONG, AND SO WAS ITS PREMISE.
   *
   * It was set from a measurement taken inside an iframe that could not exceed
   * its 1440px parent window, so "1600 fits" was never actually tested. It does
   * not fit — and no width does, because `.nav-wrapper` is capped at
   * `max-width: 1480px`. Past that the row STOPS GROWING however wide the
   * monitor is, so the utilities never receive another pixel.
   *
   * Measured on a 1707px screen:
   *
   *     wrapper (capped)   1480px
   *     menu                946px  +48 gap +80 padding
   *     utilities get       406px
   *     utilities need      488px   <- 82px short, at every viewport width
   *
   * The nowrap address then overflowed its own 178px box by 54px and landed 2px
   * from the hours icon, which is the collision that was reported.
   *
   * So the text is hidden at ALL widths rather than below a threshold that can
   * never be crossed. The map icon stays and still links to the Directions page,
   * and the full address is in the footer.
   *
   * THE ADDRESS IS NOW BACK ON WIDE SCREENS — see the pair of rules below.
   */
}

/*
 * THE ADDRESS RETURNS AT 1620px, AND THE ROW IS WIDENED TO MAKE ROOM.
 *
 * Two rules that must stay in step, because either alone is wrong:
 *
 *   1. The row's cap is lifted from --sk-container (1480px) to 1620px. Measured
 *      requirement is 1562px — menu 946 + gap 48 + utilities 488 + padding 80 —
 *      so 1620 leaves about 58px of headroom for the menu reflowing as webfonts
 *      settle. WITHOUT this the address can never fit at any screen width,
 *      which is what caused it to collide with the opening hours.
 *
 *   2. Below that width the address text hides, exactly as before.
 *
 * The cap is raised on THIS ROW ONLY, not on --sk-container, which the whole
 * site uses. The header's top row (logo, phone, Book Now) already runs wider
 * than 1480, so widening the nav row brings the two closer to alignment rather
 * than pulling them apart.
 */
@media (min-width: 1620px) {
  .site-header.modern-header .nav-wrapper { max-width: 1620px; }
}

@media (max-width: 1619.98px) {
  .site-header.modern-header .nav-util--map .nav-util__text { display: none; }
}

@media (max-width: 1120px) {
  .site-header.modern-header .nav-util--map { display: none; }
  .site-header.modern-header .nav-util + .nav-util {
    padding-left: 0;
    border-left: 0;
  }
}

/*
 * THE WHOLE UTILITY ROW GOES AT 1279px, NOT 1024px.
 *
 * Hiding the address text (above) fixes 1280-1600, but below 1280 there is not
 * room for the HOURS either, and it was overflowing on its own:
 *
 *     viewport   utilities have   hours needs   overflowed by
 *     1100       ~144px           ~246px        49px
 *     1200       ~184px           ~246px        26px
 *     1280       ~244px           ~246px        0  (fits)
 *
 * `.header-menu` is `flex: 0 0 auto` at roughly 901px through this whole range,
 * so the utilities never get more than about 244px until 1280. Shrinking the
 * type enough to fit would need ~11px, which is too small to read, and shrinking
 * the main menu to make room would degrade the primary navigation to save a
 * secondary detail.
 *
 * So the row is dropped whole, which is what the note at the top of this section
 * says to do. Both details remain in the footer, and the drawer carries them
 * below 1024 as before.
 */
@media (max-width: 1279px) {
  .site-header.modern-header .nav-utilities { display: none; }
}

/* Below the desktop breakpoint the bar itself becomes the drawer. */
@media (max-width: 1024px) {
  .site-header.modern-header .nav-wrapper {
    display: block;
    padding-inline: 0;
  }
}

/* ---- 22.2 Item + underline ---------------------------------------------
   The indicator is a ::after on the link, scaled from 0 on the X axis. A
   transform animates on the compositor; animating `width` would lay out the
   whole bar on every hover. `transform-origin` flips per state so it wipes in
   from the left and out to the right rather than pumping from the centre. */
/* The indicator lives on the <li>, NOT on the <a>::after.
   `.sk-mega-toggle::after` is already the dropdown caret, and it sets
   `background` as a SHORTHAND — which resets background-image to none and
   silently erased the gradient underline when it was drawn on the same
   pseudo-element. Different element, no collision, and it also lets the
   underline span the whole item rather than just the text box. */
/* NO `position: relative` ON THE <li>. THIS BROKE THE MEGA MENU ONCE.
   The mega panel is absolutely positioned and is meant to resolve against
   `.main-navigation` so it can span the full bar. Making the <li> a
   positioned ancestor traps it in the menu item instead — measured at 95px
   wide (the width of one <li>) and 756px tall, because the panel's columns
   had nowhere to go but downwards. Every dropdown on the site was affected.

   So the indicator below uses NO positioning at all: it is a background
   gradient on the link, grown from 0 width via `background-size`. Same
   animation, same look, and it cannot alter the stacking or containing-block
   behaviour of anything around it. */
.site-header.modern-header .header-menu > li {
  display: flex;
  align-items: stretch;
}

.site-header.modern-header .header-menu > li > a {
  background-image: linear-gradient(90deg, #F0D480 0%, #D4AF37 100%);
  background-repeat: no-repeat;
  background-position: left calc(50% + 0.85em);
  background-size: 0% 2px;
  transition: background-size 220ms cubic-bezier(0.4, 0, 0.2, 1),
              color 160ms ease;
}

/* TWO !important, and they are load-bearing.
   `transform` and `transform-origin` on this pseudo-element are being set by
   something later in the cascade — measured proof: the resting rule above
   renders correctly (content, 2px, gradient, scaleX(0)) but its
   `transform-origin: right center` computes as CENTER, and the state rules
   below computed as scaleX(0) at (0,4,2) against a (0,3,2) base, which cannot
   happen on specificity alone. Whatever is winning, importance beats it, and
   these two declarations are cheap and self-contained.

   `[class*="current"]` rather than four exact class names: WordPress emits
   current-menu-item, current-menu-ancestor, current-menu-parent,
   current_page_item and current_page_ancestor depending on post type and
   depth, and missing one silently loses the you-are-here marker on some
   routes. */
/* ANY ITEM HOLDING A MEGA PANEL MUST BE `static`.
   `style.css` sets `.header-menu li { position: relative }` for the whole
   menu. The mega CSS cancels that on items carrying the `.sk-mega-item` class
   — but Dining and Entertainment have a `.sk-mega-panel` child WITHOUT that
   class, so they kept `relative` and their panels resolved against a 93px and
   a 178px <li> instead of the full bar.

   `:has()` keys off what is actually inside the item rather than a class
   someone has to remember to add, so a panel added in the admin tomorrow is
   positioned correctly without a CSS change.

   ONLY THE FULL-WIDTH VARIANT. A first pass matched any `.sk-mega-panel` and
   over-corrected: Dining and Entertainment carry NARROW panels, and once
   their <li> went static those panels resolved against the whole bar and
   jumped to its far left edge instead of sitting under their own item. The
   `--mega` modifier is what marks a panel as full-bleed, so that is the thing
   to key on. Narrow panels keep `position: relative` from style.css,
   which is correct for them. */
.site-header.modern-header .header-menu > li:has(> .sk-mega-panel--mega) {
  position: static;
}

/* SIMPLE DROPDOWNS NEED A FLOOR.
   Dining and Entertainment opened 93px and 178px wide, wrapping every label.

   §4 ALREADY sets `min-width: 250px` on `.sk-mega-panel--simple`, and it was
   being cancelled. Two rules match at IDENTICAL (0,2,0) specificity:

     .site-header .sk-mega-panel--simple   min-width: 250px   @media 1025+
     .site-header .sk-mega-panel, …        min-width: 0       (no media query)

   The second is a generic overflow guard — the standard `min-width: 0` used to
   stop a flex/grid child refusing to shrink — and it sits later in the file,
   so at equal specificity it wins. With the floor gone, the panel's
   `max-width: 100%` then resolves against its containing block, which for a
   `--simple` panel is the menu item itself: 93px for Dining. Hence a 93px
   dropdown with every label wrapped.

   Fixed by restating both bounds at (0,5,0) so neither the guard nor §4 can
   reach them, and by replacing `max-width: 100%` with a viewport-relative cap
   — 100% of a 93px parent is the whole problem, and a fixed 340px would
   overflow a narrow window. `width: max-content` then sizes the panel to its
   longest label between those two bounds.

   The `--simple` panel must keep `position: relative` on its <li> so it opens
   under its own item, so widening the containing block is not an option. */
@media (min-width: 1025px) {
  .site-header.modern-header .header-menu > li > .sk-mega-panel--simple,
  .site-header.modern-header .header-menu > li > .sub-menu {
    width: max-content;
    min-width: 250px;
    max-width: min(340px, calc(100vw - 2rem));
  }
}

/* `.sk-is-open` is the class the mega JS actually sets — see §4.1, which keys
   its open state off `li.sk-has-panel.sk-is-open`. Earlier revisions of this
   rule used `.sk-mega-open`, a name that exists nowhere in the markup, so the
   underline never lit while a panel was open. Kept alongside :hover because a
   panel opened by keyboard or by tap has no hover state. */
.site-header.modern-header .header-menu > li:hover > a,
.site-header.modern-header .header-menu > li:focus-within > a,
.site-header.modern-header .header-menu > li.sk-is-open > a,
.site-header.modern-header .header-menu > li[class*="current"] > a {
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header.modern-header .header-menu > li > a { transition: none; }
}

/* RETIRE THE LEGACY UNDERLINE.
   style.css draws its own indicator on `.header-menu > li > a::after` —
   a 3px gold bar animating `width` from 0% to 100% at bottom:0. Left alone it
   would draw a SECOND line 8px below this one on every hover.

   Suppressed by width rather than `content: none`, because on mega-menu items
   that same pseudo-element is also the dropdown caret — blanking its content
   would delete the caret. Zero width hides the bar and leaves the caret,
   which is drawn by background-color and its own box, untouched.

   Also worth knowing: animating `width` lays out on every frame. The
   replacement animates `transform`, which stays on the compositor. */
.site-header.modern-header .header-menu > li > a::after,
.site-header.modern-header .header-menu > li:hover > a::after {
  width: 0 !important;
}

.site-header.modern-header .header-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--sk-hdr-link);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: clamp(0.4rem, 0.9vw, 0.95rem);
  transition: color 160ms ease;
}

.site-header.modern-header .header-menu > li > a:hover,
.site-header.modern-header .header-menu > li > a:focus-visible {
  color: var(--sk-hdr-link-on);
}

/* ---- 22.3 Where you are -------------------------------------------------
   WordPress puts these classes on the ancestor item too, so a visitor deep in
   /entertainment/ still sees ENTERTAINMENT marked in the bar. Held at full
   width and full opacity so it does not read as a stuck hover. */
.site-header.modern-header .header-menu > li.current-menu-item > a,
.site-header.modern-header .header-menu > li.current-menu-ancestor > a,
.site-header.modern-header .header-menu > li.current-menu-parent > a,
.site-header.modern-header .header-menu > li.current_page_item > a {
  color: var(--sk-hdr-link-on);
}

/* (The current-page underline is handled on the <li> in §22.2 above, together
   with hover and the open-panel state, so there is no ::after rule here.) */

/* ---- 22.4 The caret on mega items --------------------------------------- */
.site-header.modern-header .sk-mega-toggle {
  gap: 0.4rem;
}

.site-header.modern-header .sk-mega-toggle::after {
  transition: transform 200ms ease;
}

.site-header.modern-header li.sk-is-open > .sk-mega-toggle::after {
  transform: rotate(180deg);
}

/* ---- 22.5 Motion opt-out ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-header.modern-header .header-menu > li > a::after,
  .site-header.modern-header .sk-mega-toggle::after {
    transition: none;
  }
}

/* ==========================================================================
   23. THE BULB RAIL MUST NOT SIT ON AN OPEN MENU
   --------------------------------------------------------------------------
   The rail straddles the header's bottom edge at z-index 10, which is exactly
   where a dropdown panel opens. Lamps were drawing across "Explore
   Entertainment / Resort Calendar" — bright circles over menu text.

   TWO CHANGES, BECAUSE ONE IS NOT ENOUGH.

   1. Panels are raised to 20, above the rail. On its own this fixes the
      overlap but leaves a row of lamps peeking out along the panel's top
      edge, half-hidden, which reads as a rendering fault rather than a
      design.

   2. So the rail also FADES OUT while a panel is open. The lamps are pure
      decoration; a menu is not. When someone is reading a menu the
      decoration gets out of the way entirely, then comes back. The 200ms
      fade is slower than the panel's 180ms open, so the lamps are gone
      before the panel has finished arriving rather than blinking out under
      it.

   Scoped to the desktop breakpoint: below 1025px the rail sits on the header
   edge with the drawer sliding over it from the side, and they never meet.
   ========================================================================== */

@media (min-width: 1025px) {

  .site-header.modern-header .sk-mega-panel {
    z-index: 20;
  }

  /* Any open panel dims the rail. `:has()` keeps this to CSS — the mega JS
     already sets `.sk-is-open` on the item, and reacting to it here means no
     extra listener and no chance of the two falling out of step. */
  .site-header.modern-header:has(.header-menu > li.sk-is-open) .sk-marquee,
  .site-header.modern-header:has(.header-menu > li:hover > .sk-mega-panel) .sk-marquee,
  .site-header.modern-header:has(.header-menu > li:focus-within > .sk-mega-panel) .sk-marquee {
    opacity: 0;
  }
}
/* ==========================================================================
   24. THE DRAWER — FULL-WIDTH TAP TARGETS
   --------------------------------------------------------------------------
   The list was shrink-to-fit: 147px wide inside a 323px drawer, so more than
   half of every row was dead space. On a phone the row is the target, not the
   word — a tap landing to the right of "DINING" should still open Dining.
   ========================================================================== */
@media (max-width: 1024px) {

  .site-header.modern-header .nav-wrapper,
  .site-header.modern-header .header-menu {
    width: 100%;
  }

  .site-header.modern-header .header-menu > li {
    display: block;
    width: 100%;
  }

  .site-header.modern-header .header-menu > li > a {
    display: block;
    width: 100%;
    /* The desktop underline is drawn with background-size, which on a
       full-width row would stretch a gold bar across the whole drawer.
       Not wanted here — the drawer marks the current page with its own
       styling. */
    background-image: none;
  }

  /* The details cluster stays hidden in the drawer (§22.6) — the address and
     hours are in the footer, and repeating them at the top of a phone menu
     pushes the actual navigation below the fold. */
  .site-header.modern-header .nav-utilities {
    display: none;
  }
}

/* ==========================================================================
   25. THE UTILITY BAR QUICK STRIP
   --------------------------------------------------------------------------
   The top bar is a `1fr auto 1fr` grid and COLUMN 2 HAS BEEN EMPTY. Section 2.1
   above still places a `.header-contact` that was deleted from header.php, so
   the stylesheet reads as though the centre were occupied while on screen there
   is roughly 700px of nothing at 1440px and 1100px at 2560px.

   `.header-quick` fills it with the three things people arrive wanting -- how do
   I get there, what is on, when are you open -- and the social icons.

   >>> `grid-column: 2` IS STATED, NOT INFERRED. Auto-placement would put this in
       column 2 today purely because it is the second child; the moment anything
       is inserted before it, it slides silently to column 3 and collides with
       the utilities. State the column. <<<

   THIS FILE, NOT skagit-header.css: both files place the top-bar children, and
   this one is enqueued last with `skagit-header` as its dependency, so it wins.
   The same rule written in skagit-header.css would be overridden by 2.1 here.

   Nothing here may gain `filter`, `opacity < 1`, `mask` or `will-change` -- any
   of those on a header ancestor creates a containing block that kills the panel
   backdrop-filter in section 26.
   ====================================================================== */

@media (min-width: 1025px) {

  .site-header .header-top-bar .header-quick {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.4vw, 1.75rem);
    min-width: 0;              /* a flex child of a grid track must be allowed to shrink */
  }

  .site-header .header-quick__nav {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 0.9vw, 1rem);
    min-width: 0;
  }

  /* ---- 25.1 The links ---------------------------------------------------
     Sized down from the nav proper on purpose: this is a utility row, and
     matching the main menu weight would give the site two competing
     navigations at the same visual level. 44px min-height regardless, because
     a small target is still a target. */
  .site-header .header-quick__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 0.55rem;
    border-radius: var(--sk-radius-xs);
    color: var(--sk-hdr-ink);
    font-size: 0.8125rem;         /* 13px */
    font-weight: var(--sk-weight-semi);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--sk-dur-fast) var(--sk-ease-out),
                background-color var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-quick__link i {
    font-size: 0.875rem;
    color: var(--sk-gold-500);
    transition: transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  /* The underline is drawn, not `text-decoration`, so it can animate from the
     centre and does not shift the text baseline. */
  .site-header .header-quick__link::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 9px;
    height: 1px;
    background: var(--sk-gold-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-quick__link:hover,
  .site-header .header-quick__link:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
  }

  .site-header .header-quick__link:hover::after,
  .site-header .header-quick__link:focus-visible::after {
    transform: scaleX(1);
  }

  .site-header .header-quick__link:hover i {
    transform: translateY(-1px);
  }

  /* ---- 25.2 Socials in the bar ------------------------------------------
     Separated by a hairline rather than more gap, so the row reads as two
     groups (act / follow) instead of six equal items. */
  .site-header .header-quick__socials {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-inline-start: clamp(0.5rem, 1.2vw, 1.25rem);
    border-inline-start: 1px solid var(--sk-hdr-rule);
  }

  .site-header .header-quick__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--sk-hdr-ink);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--sk-dur-fast) var(--sk-ease-out),
                background-color var(--sk-dur-fast) var(--sk-ease-out),
                transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-quick__socials a:hover,
  .site-header .header-quick__socials a:focus-visible {
    color: #0B1F33;
    background-color: var(--sk-gold-500);
    transform: translateY(-2px);
  }

  /* The drawer copy of the icons has no business at desktop width -- the bar
     above already carries them. */
  .site-header .nav-socials {
    display: none;
  }

  /* ---- 25.3 Shedding order ---------------------------------------------
     The bar is logo + strip + phone + BOOK NOW. When it runs out of room the
     strip gives up its labels before anything else on the row moves, because
     the phone number and the booking button are the two things that must
     survive to the narrowest desktop width. Icons stay: an icon-only row is
     still usable, a wrapped row is not. */
  @media (max-width: 1400px) {
    .site-header .header-quick__link span { display: none; }
    .site-header .header-quick__link      { padding: 0 0.4rem; }
    .site-header .header-quick__link i    { font-size: 1rem; }
    .site-header .header-quick__link::after { display: none; }
  }

  /* Below this the phone pill and the strip cannot both fit; the strip goes,
     since Directions, Promotions and Hours are all one tap into the menu. */
  @media (max-width: 1180px) {
    .site-header .header-top-bar .header-quick { display: none; }
  }
}

/* ---- 25.4 The drawer socials ---------------------------------------------
   Below 1025px `.main-navigation` IS the drawer and there is no room in the top
   bar, so the icons appear at the foot of the drawer instead. They are a
   SIBLING of `.nav-utilities`, which section 24 hides -- nested inside it they
   would render in the HTML and never be seen. */
@media (max-width: 1024px) {

  /* >>> THE STRIP MUST BE HIDDEN HERE EXPLICITLY. <<<
     Its `display: none` for narrow desktop lives in a `max-width: 1180px` query
     NESTED INSIDE the `min-width: 1025px` block above, so it only covers
     1025-1180px. Below 1025px none of that applies and `.header-quick` falls
     back to a plain block, which put an unstyled row of three labelled links and
     four social icons into the phone top bar. Measured: still `display: block`
     at 890px and 470px before this rule existed. The drawer carries the socials
     at these widths instead. */
  .site-header .header-top-bar .header-quick {
    display: none;
  }

  .site-header.modern-header .nav-socials {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--sk-space-md);
    padding-top: var(--sk-space-md);
    border-top: 1px solid var(--sk-hdr-rule);
  }

  .site-header.modern-header .nav-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                      /* full touch target -- this is a phone */
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sk-hdr-ink);
    font-size: 1rem;
    text-decoration: none;
  }

  .site-header.modern-header .nav-socials a:hover,
  .site-header.modern-header .nav-socials a:focus-visible {
    background: var(--sk-gold-500);
    color: #0B1F33;
  }
}


/* ==========================================================================
   26. THE MEGA PANEL -- DEPTH INSTEAD OF A BLUE BOX
   --------------------------------------------------------------------------
   The panel was one flat fill of `--sk-hdr-panel` with a 1px top rule. Flat,
   fully opaque, and the same blue as the bar above it, so opening it read as the
   header growing taller rather than as a surface arriving over the page. That is
   the bland blue dropdown.

   Four changes, in the order they matter:

     1. A LAYERED GROUND -- a warm radial bloom from the top-left where the eye
        lands, a hairline sheen, and a vertical fall to a darker base. The panel
        now has a light direction; a single fill cannot.
     2. TRANSLUCENCY AND BLUR, so the page is legible-but-defocused behind it and
        the panel is plainly in front of the page rather than part of the chrome.
        This is why nothing in the header may take `filter`, `opacity < 1`,
        `mask` or `will-change`: any of them on an ancestor makes a containing
        block and `backdrop-filter` silently stops working.
     3. A GOLD TOP HAIRLINE, brightest at the centre and fading out at both ends,
        replacing the flat grey rule. Drawn as a pseudo-element because a
        `border-image` on one edge fights the panel corner radius.
     4. HOVER WITH DIRECTION -- a gold indicator that grows down the left edge of
        the row plus a small nudge inward, instead of a background swap alone.

   Font sizes are deliberately NOT touched here: section 21 forces `font-size` on
   every panel anchor at (0,3,0) and this section would have to fight it for no
   gain.

   The base fill stays `--sk-hdr-panel` underneath every gradient, so a browser
   without `backdrop-filter` still gets a solid, legible panel rather than
   transparent text over the page.
   ====================================================================== */

@media (min-width: 1025px) {

  .site-header .sk-mega-panel--mega,
  .site-header .sk-mega-panel--simple {
    background-color: var(--sk-hdr-panel);   /* the floor, for no-backdrop-filter */
    background-image:
      radial-gradient(120% 150% at 14% 0%,
        rgba(176, 141, 40, 0.16) 0%,
        rgba(176, 141, 40, 0.04) 42%,
        rgba(176, 141, 40, 0) 68%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.015) 38%,
        rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg,
        rgba(11, 31, 51, 0.92) 0%,
        rgba(4, 14, 26, 0.96) 100%);
  }

  /* Only where the browser can actually blur: `@supports` keeps the opaque floor
     above for everyone else instead of handing them see-through text. */
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header .sk-mega-panel--mega,
    .site-header .sk-mega-panel--simple {
      background-color: rgba(11, 31, 51, 0.72);
      -webkit-backdrop-filter: blur(18px) saturate(1.15);
      backdrop-filter: blur(18px) saturate(1.15);
    }
  }

  /* ---- 26.1 The gold hairline ------------------------------------------- */
  .site-header .sk-mega-panel--mega {
    border-top-color: transparent;    /* the pseudo-element replaces the rule */
    box-shadow:
      0 24px 48px -12px rgba(0, 0, 0, 0.55),
      inset 0 2px 0 0 rgba(255, 255, 255, 0.04);
  }

  .site-header .sk-mega-panel--mega::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(176, 141, 40, 0) 0%,
      rgba(176, 141, 40, 0.35) 14%,
      var(--sk-gold-500) 50%,
      rgba(176, 141, 40, 0.35) 86%,
      rgba(176, 141, 40, 0) 100%);
  }

  .site-header .sk-mega-panel--simple {
    border-color: rgba(176, 141, 40, 0.28);
    box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.5);
  }

  /* ---- 26.2 Column headings --------------------------------------------
     A heading and its links were the same colour at slightly different sizes,
     so a four-column panel read as one long list. Gold, tracked out, with a
     rule that stops short of the column edge. */
  .site-header .sk-mega-col__heading {
    position: relative;
    padding-bottom: 0.5rem;
    color: var(--sk-gold-300, #E4C766);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .site-header .sk-mega-col__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--sk-gold-500);
  }

  /* ---- 26.3 Rows that respond -------------------------------------------
     `position: relative` here is on the ANCHOR. It must never go on
     `.header-menu > li` for a `--mega` item -- that item is `position: static`
     on purpose so the panel can span the full bar width. */
  .site-header .header-menu .sk-mega-panel .sub-menu li a {
    position: relative;
    padding-inline-start: 0.95rem;
    transition: background-color var(--sk-dur-fast) var(--sk-ease-out),
                color var(--sk-dur-fast) var(--sk-ease-out),
                padding-inline-start var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a::before {
    content: "";
    position: absolute;
    inset-block: 0.4rem;
    inset-inline-start: 0;
    width: 2px;
    border-radius: 1px;
    background: var(--sk-gold-500);
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform var(--sk-dur-fast) var(--sk-ease-out);
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a:hover,
  .site-header .header-menu .sk-mega-panel .sub-menu li a:focus-visible {
    background: linear-gradient(90deg,
      rgba(176, 141, 40, 0.16) 0%,
      rgba(176, 141, 40, 0.04) 60%,
      rgba(176, 141, 40, 0) 100%);
    padding-inline-start: 1.25rem;
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a:hover::before,
  .site-header .header-menu .sk-mega-panel .sub-menu li a:focus-visible::before,
  .site-header .header-menu .sk-mega-panel .sub-menu li.current-menu-item > a::before {
    transform: scaleY(1);
  }

  /* ---- 26.4 The featured card ------------------------------------------
     It already has its own gradient and overlay; all it lacked was an edge, so
     it stops dissolving into the panel now that the panel has a light of its
     own. */
  .site-header .sk-mega-feature {
    border: 1px solid rgba(176, 141, 40, 0.22);
    border-radius: var(--sk-radius-md);
    overflow: hidden;
  }

  .site-header .sk-mega-feature:hover {
    border-color: rgba(176, 141, 40, 0.45);
  }
}

/* ---- 26.5 Reduced motion -------------------------------------------------
   Later in the file than section 8, so these win. Everything above that moves is
   decorative: the indicator and the underline become instant state changes and
   the padding nudge is dropped entirely, since a shifting row is the part that
   actually causes trouble. */
@media (prefers-reduced-motion: reduce) {

  .site-header .header-quick__link,
  .site-header .header-quick__link::after,
  .site-header .header-quick__link i,
  .site-header .header-quick__socials a,
  .site-header .header-menu .sk-mega-panel .sub-menu li a,
  .site-header .header-menu .sk-mega-panel .sub-menu li a::before {
    transition: none;
  }

  .site-header .header-quick__link:hover i,
  .site-header .header-quick__socials a:hover {
    transform: none;
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a:hover,
  .site-header .header-menu .sk-mega-panel .sub-menu li a:focus-visible {
    padding-inline-start: 0.95rem;      /* no reflow on hover */
  }
}

/* ---- 26.6 Forced colours -------------------------------------------------
   In a forced-colours mode every gradient, blur and tint above is discarded by
   the UA, which would leave the panel with no edge and the hover state with no
   signal at all. Restore both as real borders and system colours, which forced
   colours keeps. */
@media (forced-colors: active) {

  .site-header .sk-mega-panel--mega,
  .site-header .sk-mega-panel--simple {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid CanvasText;
  }

  .site-header .sk-mega-panel--mega::before,
  .site-header .sk-mega-col__heading::after,
  .site-header .header-quick__link::after,
  .site-header .header-menu .sk-mega-panel .sub-menu li a::before {
    background: CanvasText;
  }

  .site-header .header-menu .sk-mega-panel .sub-menu li a:hover,
  .site-header .header-menu .sk-mega-panel .sub-menu li a:focus-visible {
    background: Highlight;
    color: HighlightText !important;
  }

  .site-header .header-quick__socials a:hover,
  .site-header .nav-socials a:hover {
    background: Highlight;
    color: HighlightText;
  }
}


/* ==========================================================================
   27. STICKY HEADER, AND THE SHRUNK STATE
   --------------------------------------------------------------------------
   The header was sticky BELOW 1024px only. skagit-header.css §1 explains why
   desktop was excluded: `.sno-sticky-subnav` was fixed at top:0 as the desktop
   equivalent, and two sticky bars would stack at the same offset with the header
   (z-index 9999) burying the subnav (z-index 900).

   >>> THAT REASON IS GONE. The subnav was removed from the markup — header.php
       records that its CSS is "left in place, unused and harmless" — so there is
       no second bar to collide with and nothing left to work around. <<<

   WHAT MAY NOT BE ADDED TO `.site-header` HERE, however tempting on a sticky bar:
   `filter`, `opacity` below 1, `mask`, or `will-change`. Any one of them creates
   a containing block and the mega panel's `backdrop-filter` (§26) silently stops
   working — the panel goes flat and nothing in the CSS says why. `position:
   sticky` and `box-shadow` are safe and are what is used.

   `position: sticky` also depends on html/body using `overflow-x: clip` rather
   than `hidden`: `hidden` creates a scroll container and would kill this without
   a word. skagit-design-system.css already uses `clip`.
   ====================================================================== */

.site-header.modern-header {
  position: sticky;
  top: 0;
  /* Above page content, below the drawer and any overlay. */
  z-index: var(--sk-z-header);
  transition: box-shadow var(--sk-dur-med) var(--sk-ease-out);
}

/* An in-page anchor must not land underneath the bar, at ANY width — this was
   previously set only inside the ≤1024px query. */
html {
  scroll-padding-top: calc(var(--sk-header-h, 66px) + 0.75rem);
}

/* ---- 27.1 The shrunk state ----------------------------------------------
   `sk-hdr-shrunk` is put on <html> by assets/js/skagit-sticky-header.js past
   140px of scroll and taken off below 70px. Two thresholds, not one, because
   shrinking reduces page height and a single threshold can oscillate.

   The class is on <html> rather than the header so a page can respond to the
   scrolled state elsewhere without JS needing to know about it.

   Only PADDING and the logo shrink. Nothing is hidden: a control that vanishes
   as you scroll is a control the visitor has to scroll back up to find. */
.sk-hdr-shrunk .site-header.modern-header {
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.45);
}

.site-header.modern-header .header-top-bar {
  transition: padding-block var(--sk-dur-med) var(--sk-ease-out);
}

.site-header.modern-header .header-logo {
  transition: max-height var(--sk-dur-med) var(--sk-ease-out);
}

@media (min-width: 1025px) {

  .sk-hdr-shrunk .site-header.modern-header .header-top-bar {
    padding-block: 0.35rem;
  }

  /* The logo is sized in §4 of skagit-header.css; this caps it rather than
     setting a height, so the aspect ratio is the image's own and the lockup
     cannot be stretched. */
  .sk-hdr-shrunk .site-header.modern-header .header-logo {
    max-height: 34px;
  }

  /* The quick strip loses its vertical padding but keeps its 44px targets —
     the row gets shorter because the BAR does, not because the targets shrink. */
  .sk-hdr-shrunk .site-header .header-quick__link {
    min-height: 38px;
  }

  .sk-hdr-shrunk .site-header .header-quick__socials a {
    width: 30px;
    height: 30px;
  }
}

/* ---- 27.2 The drawer must not outgrow the viewport ----------------------
   Below 1025px `.main-navigation` IS the drawer and it lives inside a header
   that is now sticky at every width. A sticky ancestor is positioned relative to
   the viewport, so a drawer taller than the viewport had no way to be reached:
   the page behind it scrolls, the drawer does not, and the last items were
   simply unreachable.

   Constraining it to what is left of the viewport below the bar, and letting it
   scroll internally, is the fix. `overscroll-behavior: contain` stops a swipe
   that reaches the end of the drawer from scrolling the page behind it. */
@media (max-width: 1024px) {

  .site-header.modern-header .main-navigation {
    max-height: calc(100vh - var(--sk-header-h, 66px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile keeps the full-size logo: the bar is already short here, and
     shrinking a 350px-wide lockup further makes the wordmark unreadable. */
  .sk-hdr-shrunk .site-header.modern-header .header-logo {
    max-height: none;
  }
}

/* ---- 27.3 Reduced motion ------------------------------------------------
   The header still shrinks — that is a layout state, not decoration, and
   removing it would leave a visitor who asked for less motion with a
   permanently tall header. What goes is the ANIMATION between the two states,
   so the change is instant rather than a moving bar under the cursor. */
@media (prefers-reduced-motion: reduce) {

  .site-header.modern-header,
  .site-header.modern-header .header-top-bar,
  .site-header.modern-header .header-logo {
    transition: none;
  }
}

@media print {
  .site-header.modern-header { position: static; }
}