@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — MARQUEE LIGHT BULBS
   "Midnight Brass" ornament layer · component: .sk-marquee
   --------------------------------------------------------------------------
   Load AFTER skagit-design-system.css. Every colour, shadow, easing, radius
   and type token below is read from that file; nothing new is invented. Each
   var() still carries a literal fallback so the component degrades to the
   right thing if it is ever loaded standalone (e.g. in an email preview or a
   pattern library page that does not pull the token layer).

   WHAT THIS IS
   The owner's email mailer runs a row of warm globes under the logo band —
   the theatre / vaudeville marquee motif. This turns that into a reusable
   ornament rather than a one-off strip.

   HOW A BULB IS BUILT (three boxes, no images, no SVG, no JS)
     .sk-marquee__bulb          the mount. Owns size, the entrance "strike"
                                animation, and the stagger index.
     .sk-marquee__bulb::before  the brass SOCKET — a short, wide collar in
                                --sk-grad-brass sitting behind the globe, so
                                the bulb reads as screwed into something.
     .sk-marquee__bulb::after   the GLOBE — an off-centre radial-gradient
                                (hot crown → gold body → bronze edge) plus a
                                five-stop box-shadow stack: glass rim, under-
                                curve shading, hot halo, warm falloff, wide
                                dim bloom onto the surrounding surface.

   The single detail that stops this reading as a row of yellow dots is the
   OFF-CENTRE gradient origin (36% 30%) combined with the inset under-curve
   shadow. Light arrives from the upper left and the bottom of the sphere
   falls away — the same trick the design system uses for --sk-rim-light.

   MOTION
   A slow filament shimmer, never a chase. Delays come from :nth-child(7n+k),
   durations from :nth-child(5n+k) and the dip floor from :nth-child(3n+k).
   7 · 5 · 3 are pairwise coprime, so the visible pattern only repeats every
   105 bulbs — past any count this component will ever render. Fully off
   under prefers-reduced-motion: bulbs stay lit and still.

   CONTENTS
     1. Tokens & the wrapper
     2. Size variants
     3. Tone variants (on dark / on light)
     4. The rail
     5. The bulb
     6. Motion
     7. Variant: rail
     8. Variant: divider (+ optional label)
     9. Variant: frame
    10. Band + utilities
    11. Responsive
    12. Reduced motion, forced colours, print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS & THE WRAPPER
   --------------------------------------------------------------------------
   Tokens are declared on .sk-marquee, not :root, so two marquees on the same
   page can differ. Everything derives from --sk-mq-bulb, so a size variant
   only has to restate the bulb diameter and the gap.
   ========================================================================== */

.sk-marquee {
  /* ---- geometry ------------------------------------------------------- */
  /* Diameter. Interpolates 360px → ~1310px then caps, matching the fluid
     scale in the design system. */
  --sk-mq-bulb: clamp(10px, 0.42vw + 8.5px, 14px);
  /* Space BETWEEN globes. Floors at 17px so a 360px phone gets a comfortable
     27px pitch rather than a crowded string of beads. */
  --sk-mq-gap: clamp(17px, 1.9vw, 34px);
  /* How far the brass socket collar peeks out past the globe, each side. */
  --sk-mq-socket: 4px;
  --sk-mq-socket-alpha: 0.88;
  /* Widest bloom, as a multiple of the diameter. */
  --sk-mq-bloom: 2.4;
  /* Vertical breathing room. MUST exceed half the widest bloom blur
     (0.5 · 2.4 = 1.2 bulb), because the edge-fade mask on the rail variant
     clips to the rail's border box — anything outside this padding would be
     sheared off. 1.75 leaves comfortable margin. */
  --sk-mq-pad: calc(var(--sk-mq-bulb) * 1.75);
  /* Width of the dissolve at each end of a full-width rail. */
  --sk-mq-fade: clamp(28px, 6vw, 96px);
  /* Used only by the .sk-marquee--bleed utility. */
  --sk-mq-bleed: var(--sk-space-md, 1.5rem);

  /* ---- colour: dark ground is the default ----------------------------- */
  --sk-mq-core: #FFFCF0;                          /* filament-hot crown     */
  --sk-mq-mid: var(--sk-gold-200, #F7ECC9);
  --sk-mq-body: var(--sk-gold-500, #D4AF37);      /* legacy brand gold      */
  --sk-mq-edge: var(--sk-bronze-500, #B98B52);    /* legacy brand bronze    */
  --sk-mq-rim: rgba(126, 92, 47, 0.55);           /* bronze-700 glass edge  */
  --sk-mq-under: rgba(126, 92, 47, 0.42);         /* under-curve shading    */
  --sk-mq-halo-1: rgba(247, 236, 201, 0.72);      /* tight hot halo         */
  --sk-mq-halo-2: rgba(212, 175, 55, 0.44);       /* warm falloff           */
  --sk-mq-halo-3: rgba(212, 175, 55, 0.16);       /* wide bloom on the band */
  --sk-mq-contact: rgba(4, 16, 28, 0.55);         /* socket contact shadow  */
  --sk-mq-rule-alpha: 0.55;
  --sk-mq-label: var(--sk-gold-300, #F0DCA4);     /* 13.1:1 on navy-900     */
  --sk-mq-dip: 0.74;                              /* shimmer floor          */

  /* ---- box ------------------------------------------------------------ */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  position: relative;
  width: 100%;
  max-width: 100%;
  /* clip (not hidden) on the inline axis only: a surplus bulb can never widen
     the page or raise a scrollbar, while the block axis stays visible so the
     bloom is not sheared off. `clip` + `visible` is a legal pair — only
     `hidden`/`scroll` opposite `visible` gets blockified to `auto`. */
  overflow-x: clip;
  overflow-y: visible;
  /* The element is a <span> so the shortcode is safe inside a wpautop <p>. */
  vertical-align: middle;
}

/* ==========================================================================
   2. SIZE VARIANTS
   Declared after the base so equal specificity resolves on source order.
   --sk-mq-pad is a calc() over --sk-mq-bulb and resolves lazily, so it picks
   up whichever diameter wins here without being restated.
   ========================================================================== */

.sk-marquee--sm {
  --sk-mq-bulb: clamp(7px, 0.28vw + 5.9px, 10px);
  --sk-mq-gap: clamp(13px, 1.35vw, 22px);
  --sk-mq-socket: 3px;
  --sk-mq-bloom: 2.2;
}

/* .sk-marquee--md is the base; the class exists so markup is explicit. */
.sk-marquee--md { /* defaults above */ }

.sk-marquee--lg {
  --sk-mq-bulb: clamp(13px, 0.6vw + 10.8px, 20px);
  --sk-mq-gap: clamp(22px, 2.6vw, 46px);
  --sk-mq-socket: 6px;
  --sk-mq-bloom: 2.6;
}

/* ==========================================================================
   3. TONE VARIANTS
   --------------------------------------------------------------------------
   On a dark ground a bulb is a light SOURCE: glow does the work.
   On a light ground glow is invisible, so the bulb becomes a physical amber
   OBJECT — harder rim, an inset specular crown, a real contact shadow, and
   only a whisper of halo. Same component, different physics.
   ========================================================================== */

.sk-marquee--on-light {
  --sk-mq-core: #FFFDF6;
  --sk-mq-mid: var(--sk-gold-200, #F7ECC9);
  --sk-mq-body: var(--sk-gold-400, #E3C566);
  --sk-mq-edge: var(--sk-bronze-500, #B98B52);
  --sk-mq-rim: rgba(126, 92, 47, 0.85);           /* bronze-700, 6.1:1/white */
  --sk-mq-under: rgba(126, 92, 47, 0.5);
  --sk-mq-halo-1: rgba(224, 190, 100, 0.5);
  --sk-mq-halo-2: rgba(212, 175, 55, 0.28);
  --sk-mq-halo-3: rgba(185, 139, 82, 0.13);
  --sk-mq-contact: rgba(11, 61, 104, 0.3);
  --sk-mq-socket-alpha: 1;
  --sk-mq-rule-alpha: 0.8;
  --sk-mq-label: var(--sk-gold-700, #7C6218);     /* 5.8:1 on white         */
  /* Shallower dip: on white, dropping opacity fades the globe toward the
     background and it loses its silhouette. */
  --sk-mq-dip: 0.86;
}

/* ==========================================================================
   4. THE RAIL
   ========================================================================== */

.sk-marquee__rail {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;               /* a wrapped marquee is a broken marquee */
  gap: var(--sk-mq-gap);
  min-width: 0;
  /* Containing block for the hairline below — without it the hairline would
     resolve against .sk-marquee and drift in the divider layout. */
  position: relative;
  padding-block: var(--sk-mq-pad);
  /* Purely decorative: never intercept a click, never join a text selection. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The rail hairline — the thing the bulbs are mounted on. Absolutely
   positioned so it is not treated as a flex item. Kept very faint: it should
   register as structure, not as a second divider competing with .sk-rule. */
.sk-marquee__rail::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background-image: var(
    --sk-grad-brass,
    linear-gradient(100deg, #B08D28 0%, #D4AF37 18%, #F0DCA4 38%, #D4AF37 58%, #B98B52 80%, #B08D28 100%)
  );
  opacity: 0.22;
  pointer-events: none;
}

/* The divider variant supplies its own rules, so it does not want a second
   hairline running through the bulb cluster. */
.sk-marquee--divider .sk-marquee__rail::before { content: none; }

/* ==========================================================================
   5. THE BULB
   ========================================================================== */

.sk-marquee__bulb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--sk-mq-bulb);
  height: var(--sk-mq-bulb);
  border-radius: 50%;
}

/* ---- 5.1 The brass socket ------------------------------------------------
   Wider than the globe and roughly 60% as tall: a collar seen edge-on. No
   z-index is used anywhere in this component — ::before paints before ::after
   in the same layer, which is exactly the stacking we want (socket behind,
   globe in front) and is immune to any stacking context an ancestor creates. */
.sk-marquee__bulb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--sk-mq-bulb) + var(--sk-mq-socket) * 2);
  height: calc(var(--sk-mq-bulb) * 0.58 + var(--sk-mq-socket));
  transform: translate(-50%, -50%);
  border-radius: var(--sk-radius-pill, 999px);
  background-image: var(
    --sk-grad-brass,
    linear-gradient(100deg, #B08D28 0%, #D4AF37 18%, #F0DCA4 38%, #D4AF37 58%, #B98B52 80%, #B08D28 100%)
  );
  opacity: var(--sk-mq-socket-alpha);
  box-shadow: 0 1px 2px var(--sk-mq-contact);
}

/* ---- 5.2 The globe ------------------------------------------------------- */
.sk-marquee__bulb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 1;
  /* Off-centre origin = light from the upper left. The two identical --core
     stops hold a small flat hot spot before the falloff begins, which is what
     makes it read as a filament rather than a soft blob. */
  background-image: radial-gradient(
    circle at 36% 30%,
    var(--sk-mq-core) 0%,
    var(--sk-mq-core) 11%,
    var(--sk-mq-mid) 33%,
    var(--sk-mq-body) 66%,
    var(--sk-mq-edge) 100%
  );
  box-shadow:
    /* glass edge — a hairline so the sphere has a silhouette */
    inset 0 0 0 0.5px var(--sk-mq-rim),
    /* the underside falling away from the light */
    inset 0 calc(var(--sk-mq-bulb) * -0.22) calc(var(--sk-mq-bulb) * 0.3) var(--sk-mq-under),
    /* hot halo, tight to the glass */
    0 0 calc(var(--sk-mq-bulb) * 0.55) var(--sk-mq-halo-1),
    /* warm falloff */
    0 0 calc(var(--sk-mq-bulb) * 1.3) var(--sk-mq-halo-2),
    /* wide dim bloom onto whatever surface is behind */
    0 0 calc(var(--sk-mq-bulb) * var(--sk-mq-bloom)) var(--sk-mq-halo-3);
}

/* ---- 5.3 THE BLOOM IS CLIPPED, SO IT GOES ---------------------------------
   The three-layer glow above is right in isolation and wrong in this rail.

   Measured on the live header at a 26px bulb: the outer bloom blurs 49.4px, so
   the halo wants roughly 75px of vertical room. The rail it sits in is 37px tall
   and carries `overflow: clip`. The round glow was therefore being sliced flat
   at the top and bottom of the rail, and what reached the screen was a soft
   RECTANGLE around every bulb — the "halo expanding to the corner of the box".

   The rail cannot simply be allowed to overflow: it is clipped on purpose so a
   surplus bulb can never widen the page, and un-clipping it would push a 75px
   glow up into the nav row above.

   Growing the rail to fit the bloom would add ~38px to the header on every page
   to accommodate a decoration, which is the wrong trade.

   So the bulb goes SHARP: the inset rim and the underside shading stay — they
   are what give it a silhouette and make it read as a sphere — and the glow is
   reduced to a single tight halo that fits inside the rail with room to spare.
   At 0.18 x the bulb the lit height is about 35px against the rail's 37px, so
   nothing touches the clip edge.

   Only the dark variant is changed. On a light ground the halo is already
   nearly invisible and its numbers are different; that block is below. */
/* NOTHING IS OVERRIDDEN HERE — the fix belongs in skagit-megamenu.css.
   An override was briefly added at this spot and had no effect, because the
   header bulbs are governed by
   `.site-header.modern-header .sk-marquee__bulb::after` in skagit-megamenu.css,
   which carries the same (0,3,0) specificity and loads later. The bloom that was
   being clipped into a rectangle is corrected there. This file still describes
   the component's default physics for any marquee outside the header. */

/* On light the physics change: add a specular crown and a contact shadow, and
   swap the outer bloom down so it does not turn the page grey-gold. */
.sk-marquee--on-light .sk-marquee__bulb::after {
  box-shadow:
    inset 0 0 0 0.5px var(--sk-mq-rim),
    inset 0 calc(var(--sk-mq-bulb) * -0.24) calc(var(--sk-mq-bulb) * 0.34) var(--sk-mq-under),
    inset 0 calc(var(--sk-mq-bulb) * 0.16) calc(var(--sk-mq-bulb) * 0.26) rgba(255, 253, 240, 0.8),
    0 1px 2px var(--sk-mq-contact),
    0 0 calc(var(--sk-mq-bulb) * 0.6) var(--sk-mq-halo-1),
    0 0 calc(var(--sk-mq-bulb) * 1.6) var(--sk-mq-halo-2),
    0 0 calc(var(--sk-mq-bulb) * var(--sk-mq-bloom)) var(--sk-mq-halo-3);
}

/* ==========================================================================
   6. MOTION
   --------------------------------------------------------------------------
   Two animations, on two different boxes, so their delays never collide:
     .sk-marquee__bulb        "strike" — a one-shot warm-up on load
     .sk-marquee__bulb::after "filament" — the endless slow shimmer
   Both animate only opacity/transform, so they stay on the compositor.
   ========================================================================== */

@keyframes sk-marquee-strike {
  from { opacity: 0.15; transform: scale(0.72); }
  60%  { opacity: 1;    transform: scale(1.06); }
  to   { opacity: 1;    transform: scale(1); }
}

@keyframes sk-marquee-filament {
  0%, 100% { opacity: 1; }
  46%      { opacity: var(--sk-mq-dip); }
}

.sk-marquee__bulb {
  animation: sk-marquee-strike 760ms var(--sk-ease-spring, cubic-bezier(0.18, 0.9, 0.28, 1.06)) both;
}

.sk-marquee__bulb::after {
  animation: sk-marquee-filament 7.2s var(--sk-ease-in-out, cubic-bezier(0.62, 0.02, 0.28, 1)) infinite both;
}

/* ---- 6.1 Strike stagger — 6 buckets, deliberately NOT monotonic -----------
   Sequential delays would make the row light up left-to-right: a chase. These
   values scatter so the rail comes up like a real sign warming through.

   Every delay is offset by --sk-mq-*-phase. :nth-child counting restarts in
   each rail, so the two clusters of a labelled divider would otherwise shimmer
   in perfect mirror image — the exact mechanical sync this stagger exists to
   avoid. The second rail carries a phase shift (see §8) to break it. */
.sk-marquee__bulb:nth-child(6n + 1) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 0ms); }
.sk-marquee__bulb:nth-child(6n + 2) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 300ms); }
.sk-marquee__bulb:nth-child(6n + 3) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 110ms); }
.sk-marquee__bulb:nth-child(6n + 4) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 430ms); }
.sk-marquee__bulb:nth-child(6n + 5) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 200ms); }
.sk-marquee__bulb:nth-child(6n + 6) { animation-delay: calc(var(--sk-mq-strike-phase, 0ms) + 360ms); }

/* ---- 6.2 Shimmer phase — 7 buckets --------------------------------------- */
.sk-marquee__bulb:nth-child(7n + 1)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 0s); }
.sk-marquee__bulb:nth-child(7n + 2)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 3.1s); }
.sk-marquee__bulb:nth-child(7n + 3)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 1.4s); }
.sk-marquee__bulb:nth-child(7n + 4)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 4.6s); }
.sk-marquee__bulb:nth-child(7n + 5)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 0.7s); }
.sk-marquee__bulb:nth-child(7n + 6)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 2.3s); }
.sk-marquee__bulb:nth-child(7n + 7)::after { animation-delay: calc(var(--sk-mq-phase, 0s) + 5.2s); }

/* ---- 6.3 Shimmer period — 5 buckets, coprime with 7 ----------------------- */
.sk-marquee__bulb:nth-child(5n + 1)::after { animation-duration: 6.6s; }
.sk-marquee__bulb:nth-child(5n + 2)::after { animation-duration: 8.4s; }
.sk-marquee__bulb:nth-child(5n + 3)::after { animation-duration: 7.3s; }
.sk-marquee__bulb:nth-child(5n + 4)::after { animation-duration: 9.1s; }
.sk-marquee__bulb:nth-child(5n + 5)::after { animation-duration: 7.8s; }

/* ---- 6.4 Dip depth — 3 buckets. lcm(7,5,3) = 105 -------------------------- */
.sk-marquee__bulb:nth-child(3n + 1) { --sk-mq-dip: 0.74; }
.sk-marquee__bulb:nth-child(3n + 2) { --sk-mq-dip: 0.85; }
.sk-marquee__bulb:nth-child(3n + 3) { --sk-mq-dip: 0.68; }

.sk-marquee--on-light .sk-marquee__bulb:nth-child(3n + 1) { --sk-mq-dip: 0.86; }
.sk-marquee--on-light .sk-marquee__bulb:nth-child(3n + 2) { --sk-mq-dip: 0.93; }
.sk-marquee--on-light .sk-marquee__bulb:nth-child(3n + 3) { --sk-mq-dip: 0.82; }

/* ---- 6.5 Opt out per instance (shortcode animate="0") --------------------- */
.sk-marquee--still .sk-marquee__bulb,
.sk-marquee--still .sk-marquee__bulb::after {
  animation: none;
  opacity: 1;
  transform: none;
}

.sk-marquee--still .sk-marquee__bulb::before { transform: translate(-50%, -50%); }

/* ==========================================================================
   7. VARIANT: RAIL  —  the mailer's motif
   --------------------------------------------------------------------------
   Over-provisioned by design: the PHP emits more bulbs than fit so the row
   always reaches both edges at any viewport, and the surplus is dissolved by
   a mask rather than cut off mid-globe. The mask paints against the rail's
   BORDER box, which is why --sk-mq-pad has to clear the bloom (see §1).
   ========================================================================== */

.sk-marquee--rail .sk-marquee__rail,
.sk-marquee--frame .sk-marquee__rail {
  overflow-x: clip;
  overflow-y: visible;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sk-mq-fade),
    #000 calc(100% - var(--sk-mq-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sk-mq-fade),
    #000 calc(100% - var(--sk-mq-fade)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Hard-edged ends, for a rail that genuinely runs off the page. */
.sk-marquee--hard-ends { --sk-mq-fade: 0px; }

/* ==========================================================================
   8. VARIANT: DIVIDER  —  brass rules + a bulb cluster (+ optional label)
   --------------------------------------------------------------------------
      ─────────  ● ● ● ● ● ● ●   LABEL   ● ● ● ● ● ● ●  ─────────
   The rules flex-grow, so the ornament stays centred and the whole thing
   collapses gracefully as the container narrows. No mask on the rails here:
   the cluster is short and always fits, and a mask would clip its bloom.
   ========================================================================== */

.sk-marquee--divider .sk-marquee__rail {
  flex: 0 0 auto;
}

/* The cluster on the far side of the label. :nth-child restarts per rail, so
   without this the two clusters would breathe in perfect mirror image. 2.6s is
   not a simple fraction of any of the five shimmer periods (6.6–9.1s), so the
   two sides never re-converge. */
.sk-marquee__rail--b {
  --sk-mq-phase: 2.6s;
  --sk-mq-strike-phase: 180ms;
}

.sk-marquee__rule {
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  border-radius: 1px;
  background-image: var(
    --sk-grad-brass,
    linear-gradient(100deg, #B08D28 0%, #D4AF37 18%, #F0DCA4 38%, #D4AF37 58%, #B98B52 80%, #B08D28 100%)
  );
  opacity: var(--sk-mq-rule-alpha);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  /* Dissolve the outer end so the rule arrives from nowhere instead of
     stopping dead against the container edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72%);
  mask-image: linear-gradient(to right, transparent 0, #000 72%);
}

.sk-marquee__rule:last-child {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 72%);
  mask-image: linear-gradient(to left, transparent 0, #000 72%);
}

.sk-marquee__label {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--sk-font-body, "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: var(--sk-fs-xs, 0.8125rem);
  font-weight: var(--sk-weight-bold, 700);
  letter-spacing: var(--sk-tracking-eyebrow, 0.22em);
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--sk-mq-label);
  /* Eyebrow tracking adds a trailing space after the last glyph; an equal
     indent on the left puts the word back on the optical centre. */
  text-indent: var(--sk-tracking-eyebrow, 0.22em);
  padding-inline: clamp(2px, 0.6vw, 10px);
}

/* ==========================================================================
   9. VARIANT: FRAME  —  bulbs along a panel edge or above a heading
   --------------------------------------------------------------------------
   IN FLOW by default. Placed as the first (or last) child of a padded panel,
   the negative block margin pulls the row up over that padding so the globes
   straddle the panel's edge. This needs nothing from the parent, and if the
   margin does not land perfectly it still degrades to "a bulb row at the top
   of the panel" rather than a floating artefact.

   Add .sk-marquee--pin (via the shortcode's class="" attribute) for true
   absolute pinning — that variant DOES require the parent to be positioned.
   ========================================================================== */

.sk-marquee--frame {
  margin-block: calc(var(--sk-mq-pad) * -0.55) 0;
}

.sk-marquee--frame.sk-marquee--edge-bottom {
  margin-block: 0 calc(var(--sk-mq-pad) * -0.55);
}

/* Opt-in absolute pin. Parent needs position: relative (use .sk-marquee-host). */
.sk-marquee--pin {
  position: absolute;
  inset-inline: 0;
  width: auto;
  margin-block: 0;
  z-index: var(--sk-z-raised, 10);
  pointer-events: none;
}

/* margin-block is restated at (0,2,0) here because
   `.sk-marquee--frame.sk-marquee--edge-bottom` above is also (0,2,0) and would
   otherwise out-specify the reset on `.sk-marquee--pin`, leaving a pinned
   bottom rail with a stray negative margin. */
.sk-marquee--pin.sk-marquee--edge-top {
  top: 0;
  margin-block: 0;
  transform: translateY(-50%);
}

.sk-marquee--pin.sk-marquee--edge-bottom {
  bottom: 0;
  margin-block: 0;
  transform: translateY(50%);
}

/* Helper for the panel that hosts a pinned frame. */
.sk-marquee-host { position: relative; }

/* ==========================================================================
   10. BAND + UTILITIES
   ========================================================================== */

/* The mailer literally: globes on a dark navy band. Reuses the night gradient
   and the fluted-glass texture from the design system rather than a new fill. */
.sk-marquee--band {
  background-image:
    var(--sk-tex-flute, none),
    var(--sk-grad-night, linear-gradient(160deg, #08243D 0%, #06192B 46%, #04101C 100%));
  background-size: 9px 100%, 100% 100%;
  box-shadow: var(--sk-rim-light, inset 0 1px 0 rgba(255, 255, 255, 0.1));
}

.sk-marquee--on-light.sk-marquee--band {
  background-image: none;
  background-color: var(--sk-mist, #F4F6F8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 var(--sk-cloud, #E7EAEE);
}

/* Pull a marquee out to the edges of a padded parent. */
.sk-marquee--bleed {
  width: auto;
  margin-inline: calc(var(--sk-mq-bleed) * -1);
}

/* Tighten the vertical footprint where the ornament sits between two blocks
   that already carry their own rhythm. */
.sk-marquee--flush { --sk-mq-pad: calc(var(--sk-mq-bulb) * 1.25); }

/* ==========================================================================
   11. RESPONSIVE
   --------------------------------------------------------------------------
   Almost all scaling is already done by the clamp()s in §1. These three rules
   only manage HOW MANY bulbs are painted, so a phone is not rendering forty
   composited layers to show thirteen of them. Hidden bulbs are still counted
   by :nth-child, so the stagger pattern is unaffected.

   Each cap is chosen to still OVERFLOW its breakpoint, which is what keeps
   the rail edge-to-edge:
     ≤ 480px : 18 bulbs × 27px pitch  = 486px  > 480
     ≤ 768px : 28 bulbs × 28.7px      = 803px  > 768
   ========================================================================== */

@media (max-width: 48em) {
  .sk-marquee--rail .sk-marquee__bulb:nth-child(n + 29),
  .sk-marquee--frame .sk-marquee__bulb:nth-child(n + 29) { display: none; }
}

@media (max-width: 30em) {
  .sk-marquee--rail .sk-marquee__bulb:nth-child(n + 19),
  .sk-marquee--frame .sk-marquee__bulb:nth-child(n + 19) { display: none; }

  /* A long label should wrap inside the divider, never push its width out. */
  .sk-marquee__label { letter-spacing: 0.14em; text-indent: 0.14em; }
}

/* Very wide viewports: open the pitch rather than adding bulbs. A marquee is
   read from further away on a 4K screen, and this keeps the default count of
   40 spanning the full width all the way to 2560px
   (40 × (14 + 61) = 3000px at 2560). */
@media (min-width: 120em) {
  .sk-marquee { --sk-mq-gap: clamp(34px, 2.4vw, 62px); }
  .sk-marquee--sm { --sk-mq-gap: clamp(22px, 1.6vw, 40px); }
  .sk-marquee--lg { --sk-mq-gap: clamp(46px, 3.2vw, 84px); }
}

/* ==========================================================================
   12. REDUCED MOTION, FORCED COLOURS, PRINT
   ========================================================================== */

/* The design system's global kill switch collapses animations to 0.001ms via
   a universal selector. That is enough to stop the shimmer, but it would let
   the strike animation's fill-mode leave a bulb mid-scale. This restates the
   intent explicitly at (0,1,0) specificity, which beats the universal rule:
   the bulbs stay LIT and STILL. Nothing below this reintroduces motion. */
@media (prefers-reduced-motion: reduce) {
  .sk-marquee__bulb,
  .sk-marquee__bulb::before,
  .sk-marquee__bulb::after {
    animation: none !important;
    animation-delay: 0s !important;
    animation-play-state: paused !important;
  }

  .sk-marquee__bulb {
    opacity: 1;
    transform: none;
  }

  .sk-marquee__bulb::after { opacity: 1; }

  /* Restated because the rule above must not strip the socket's centring. */
  .sk-marquee__bulb::before {
    opacity: var(--sk-mq-socket-alpha);
    transform: translate(-50%, -50%);
  }
}

/* Windows High Contrast strips background-image and box-shadow, which is the
   entire component — the bulbs would become invisible empty boxes taking up
   vertical space. Drop the ornament and keep any real label text. */
@media (forced-colors: active) {
  .sk-marquee__rail,
  .sk-marquee__rule { display: none; }

  .sk-marquee { gap: 0; }
}

/* Ink is not a light source. The ornament does not print; a label does. */
@media print {
  .sk-marquee { display: none !important; }

  .sk-marquee--has-label { display: block !important; }

  .sk-marquee--has-label .sk-marquee__rail,
  .sk-marquee--has-label .sk-marquee__rule { display: none !important; }

  .sk-marquee--has-label .sk-marquee__label {
    display: block;
    color: #000;
    text-indent: 0;
    padding: 0;
  }
}

/* ==========================================================================
   12. JS-DRIVEN LIGHT SHOW
   Added after the component was built. assets/js/skagit-marquee.js adds
   .sk-marquee--js once it has successfully claimed a rail, then drives each
   bulb's --sk-mq-lum. Until that happens -- and forever, if JS never runs --
   the standalone CSS shimmer in section 6 stays in charge, so the rail is
   never dark and never static-looking by accident.

   The transition is what makes it read as filament rather than a switch:
   the script only sets a number a few times a second and the compositor
   interpolates between them.
   ========================================================================== */

.sk-marquee--js .sk-marquee__bulb,
.sk-marquee--js .sk-marquee__bulb::after {
  animation: none;
}

/* ---- 12.1 THE SWELL -------------------------------------------------------
   Opacity alone tops out: once a lamp is at 1 there is nowhere brighter to go,
   so a chase reads as a soft roll rather than a snap. A real filament also
   blooms physically as it heats, and the eye reads that size change faster
   than it reads a brightness change.

   `transform` is FREE here, and only here: the rule immediately above sets
   `animation: none` under .sk-marquee--js, which retires the one-shot "strike"
   keyframe that owns transform in the no-JS case. Nothing else touches it.

   >>> SCALE CANNOT MOVE THE RAIL. A transform does not affect layout, and
   scale() is about the element's own centre, so the lamp row's vertical
   position — pinned by a derivation in skagit-megamenu.css §20 that took real
   measurement to get right — is mathematically untouched by this. That is why
   the swell goes here and not on width/height. <<<

   0.88 -> 1.06 across the luminance range. Deliberately small: at 14px a lamp
   growing by more than a pixel or so starts to read as a wobble rather than a
   flare, and 40 wobbling lamps is a broken sign, not a flashy one. */
.sk-marquee--js .sk-marquee__bulb {
  transform: scale(calc(0.88 + var(--sk-mq-lum, 1) * 0.18));
  transition: transform 260ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

/* The socket is a child of the bulb, so it inherits the swell — but a brass
   collar that breathes looks like loose hardware. Counter-scale it back to a
   constant size. Keep the centring translate: this element is positioned with
   left/top 50%, so dropping it would throw the collar off the lamp. */
.sk-marquee--js .sk-marquee__bulb::before {
  transform: translate(-50%, -50%) scale(calc(1 / (0.88 + var(--sk-mq-lum, 1) * 0.18)));
  transition: transform 260ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

.sk-marquee--js .sk-marquee__bulb::after {
  opacity: var(--sk-mq-lum, 1);
  /* Slightly slower off than on: a cooling filament lags a heating one. */
  transition: opacity 300ms cubic-bezier(0.33, 0, 0.2, 1);
  will-change: opacity;
}

/* The socket should dim WITH the globe, or an unlit bulb looks like it is
   floating free of the rail. */
.sk-marquee--js .sk-marquee__bulb::before {
  opacity: calc(var(--sk-mq-socket-alpha, 0.88) * (0.45 + var(--sk-mq-lum, 1) * 0.55));
  transition: opacity 300ms cubic-bezier(0.33, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* The script bails before adding .sk-marquee--js for these users, so this is
     belt-and-braces: if the class is ever applied some other way, the rail
     stays fully lit and completely still. */
  .sk-marquee--js .sk-marquee__bulb::after,
  .sk-marquee--js .sk-marquee__bulb::before {
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   13. "LAMP" RENDERING  — added after owner feedback
   The bulbs read as flat yellow ovals ("little eggs") rather than lit glass.
   Two causes, both fixed here:

     1. The globe gradient ended on solid --sk-mq-edge (bronze), which draws a
        hard dark rim. A real lit bulb has almost no visible edge on its lit
        side -- the glass disappears into its own glow.
     2. The bloom was only 2.4x the bulb diameter, so the light stopped at the
        glass instead of spilling.

   Also: the bulbs no longer sit on a dark band. They are mounted ON the
   hairline, so the glow falls on the page itself.
   ========================================================================== */

.sk-marquee--rail {
  /* No band. The rail is a line with lights on it. */
  background: none;
  --sk-mq-bloom: 5.2;
}

/* The line the bulbs are mounted on — now legible as structure rather than a
   hint, since it is the only thing left holding them. */
.sk-marquee--rail .sk-marquee__rail::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 139, 82, 0.16) 8%,
    rgba(212, 175, 55, 0.42) 50%,
    rgba(185, 139, 82, 0.16) 92%,
    transparent 100%
  );
  opacity: 1;
}

/* ---- the lit globe ------------------------------------------------------ */
.sk-marquee--rail .sk-marquee__bulb::after {
  /* Hot centre held longer, then a fast falloff into a translucent gold rim.
     Ending on rgba() rather than a solid bronze is what removes the "egg". */
  background-image: radial-gradient(
    circle at 42% 36%,
    #FFFFFF 0%,
    var(--sk-mq-core, #FFFCF0) 18%,
    var(--sk-mq-mid, #F7ECC9) 42%,
    rgba(240, 220, 164, 0.92) 68%,
    rgba(212, 175, 55, 0.55) 100%
  );

  box-shadow:
    /* no inset rim, no under-curve: a lit bulb has no visible underside */
    0 0 calc(var(--sk-mq-bulb) * 0.5)  rgba(255, 252, 240, 0.95),
    0 0 calc(var(--sk-mq-bulb) * 1.1)  rgba(247, 236, 201, 0.80),
    0 0 calc(var(--sk-mq-bulb) * 2.2)  rgba(240, 220, 164, 0.50),
    0 0 calc(var(--sk-mq-bulb) * 3.6)  rgba(212, 175, 55, 0.28),
    0 0 calc(var(--sk-mq-bulb) * 5.6)  rgba(212, 175, 55, 0.12);
}

/* The socket would show as a dark bar under a bulb that no longer has an
   underside, so it goes on the rail variant. */
.sk-marquee--rail .sk-marquee__bulb::before { content: none; }

/* Give the rail room for the wider bloom so it is not clipped. */
.sk-marquee--rail {
  --sk-mq-pad: calc(var(--sk-mq-bulb) * 3.2);
}

@media (prefers-reduced-motion: reduce) {
  .sk-marquee--rail .sk-marquee__bulb::after { animation: none; }
}

/* ---- 13.1 vertical footprint correction --------------------------------
   --sk-mq-pad above was raised to 3.2x the bulb so the wider bloom would not
   be clipped. That reserved LAYOUT height it never needed: the rail already
   runs `overflow-y: visible`, so the glow spills without occupying space.
   The result was a 104px marquee inside a 268px header, pushing every page's
   content below the fold.

   Horizontal padding still needs the bloom allowance (the rail is
   `overflow-x: clip`); vertical does not.
   ------------------------------------------------------------------------ */
.sk-marquee--rail {
  --sk-mq-pad: calc(var(--sk-mq-bulb) * 3.2);   /* used for inline padding */
  padding-block: 0.5rem;
  padding-inline: var(--sk-mq-pad);
  min-height: 0;
}

.sk-marquee--rail .sk-marquee__rail {
  min-height: calc(var(--sk-mq-bulb) * 1.15);
}

/* ---- 13.2 correction to 13.1 -------------------------------------------
   13.1 set padding on .sk-marquee--rail (the wrapper). The 44.8px is on the
   INNER .sk-marquee__rail, so the wrapper rule did nothing and the header
   stayed 284px tall. Targeting the element that actually carries it.

   Inline padding keeps the bloom allowance because the rail is
   `overflow-x: clip`; block padding does not, because it is
   `overflow-y: visible` and the glow spills freely.
   ------------------------------------------------------------------------ */
.sk-marquee--rail .sk-marquee__rail {
  padding-block: 0.35rem;
  padding-inline: var(--sk-mq-pad);
  min-height: 0;
}

.sk-marquee--rail {
  padding-block: 0;
}

/* ==========================================================================
   14. `--still` IS FINAL  —  a still rail is LIT, and nothing moves on it
   --------------------------------------------------------------------------
   APPENDED, NOT EDITED IN PLACE. Everything here defeats rules that already
   exist above, so it has to come last. No multi-selector list further up was
   touched. This introduces no new look: it is §6.5 restated at a weight that
   survives the two blocks that were quietly beating it.

   WHAT IT DEFEATS
     §6    `.sk-marquee__bulb` strike (one-shot) at (0,1,0), and the `::after`
           filament shimmer (endless) at (0,1,1). A pseudo-element counts in
           the element column, so the two do not score alike.
     §12   The block headed "12. JS-DRIVEN LIGHT SHOW" at line ~683 -- NOTE
           THIS FILE HAS TWO SECTIONS NUMBERED 12; the other, at line ~625, is
           reduced motion. `.sk-marquee--js .sk-marquee__bulb` is (0,2,0) and
           its `::after` is (0,2,1): the JS light show's opacity, scale swell
           and transitions. §6.5's `.sk-marquee--still` rules score exactly the
           same, (0,2,0) and (0,2,1), and sit ~300 lines earlier in this same
           file, so they tied and lost on load order. That tie is why the
           shortcode's documented animate="0" opt-out looked like it did
           nothing. To be exact about what it cost: both blocks declare
           `animation: none`, so the shimmer was off either way -- what the
           opt-out lost was the chase, `opacity: var(--sk-mq-lum)` on the globe
           and the swell.

   The class is doubled purely for weight -- `.sk-marquee--still.sk-marquee--still`
   is (0,3,0) on the bulb and (0,3,1) on its pseudo-elements, matches exactly the
   same elements as the single class, and needs no !important.

   IT DOES NOT OUTRANK EVERYTHING, AND DOES NOT NEED TO. skagit-megamenu.css is
   enqueued after this file, and its `.site-header.modern-header
   .sk-marquee__bulb::after` (§20.1) is ALSO (0,3,1), so that rule wins the tie
   on load order. It declares only `background-image` and `box-shadow` -- no
   animation, no opacity, no transform -- so there is no overlap with anything
   here today. Add an `opacity` or a `transform` to that megamenu rule and it
   will silently beat this block on the header rail: make that change here, or
   scope it to `--still` over there.

   LIT, NOT DARK. `opacity` is set on the GLOBE (::after) directly rather than
   left to resolve through `var(--sk-mq-lum)`. A stale cached skagit-marquee.js
   that has already written an inline `--sk-mq-lum` onto a span cannot be
   out-weighed (inline custom properties always win), but a pseudo-element takes
   no inline style, so a literal `opacity: 1` here is authoritative. Worst case
   is a lamp at full brightness, never a dark one.

   THE SOCKET KEEPS ITS TRANSLATE. `transform: none` on ::before would drop the
   `translate(-50%, -50%)` that centres the brass collar (it is positioned with
   left/top 50%), throwing it off the lamp. It gets its own rule below. The rail
   variant sets `content: none` on it, so this matters for divider/frame only.

   REDUCED MOTION IS NOT FOUGHT. §12's `@media (prefers-reduced-motion: reduce)`
   already forces `animation: none !important` plus full opacity on every bulb,
   and the script bails before it can add `.sk-marquee--js` for those users. This
   block asks for the identical end state — lit and completely still — so the two
   agree; the !important declarations simply win and land in the same place.
   ========================================================================== */

.sk-marquee--still.sk-marquee--still .sk-marquee__bulb,
.sk-marquee--still.sk-marquee--still .sk-marquee__bulb::before,
.sk-marquee--still.sk-marquee--still .sk-marquee__bulb::after {
  animation: none;
  transition: none;
}

.sk-marquee--still.sk-marquee--still .sk-marquee__bulb {
  opacity: 1;
  transform: none;
}

/* The globe: full brightness, no swell, no shimmer. */
.sk-marquee--still.sk-marquee--still .sk-marquee__bulb::after {
  opacity: 1;
  transform: none;
}

/* The brass collar: its own alpha, its own centring, no counter-scale. */
.sk-marquee--still.sk-marquee--still .sk-marquee__bulb::before {
  opacity: var(--sk-mq-socket-alpha);
  transform: translate(-50%, -50%);
}