@charset "UTF-8";
/* ==========================================================================
   THE SKAGIT CASINO RESORT — JACKPOT WINNERS
   "The Winners Ledger" — engraved brass nameplates on a midnight ground
   --------------------------------------------------------------------------
   Layer 4 of 4. Load order:
     1. skagit-design-system.css   <- tokens (REQUIRED, this file consumes them)
     2. skagit-components.css
     3. skagit-responsive.css
     4. skagit-jackpot.css         <- this file
   Enqueue handle: `skagit-jackpot`, dependency `skagit-components`.

   OWNERSHIP / COLLISION NOTE
   Every selector here is namespaced `.skagit-jp-*` and lives under the
   `.skagit-jp` scope root. It deliberately shares NO class name with
   skagit-components.css §14 (.winner-clean-card, .collage-card, .jackpot-card,
   .jp-wide-card, .jackpot-tab-item, .month-slider-wrapper ...), which styled
   the previous markup. Nothing here overrides anything there and nothing
   there reaches in here — so no `!important` arms race, and the old rules can
   be deleted independently of this file.

   DESIGN NOTES
   - A jackpot winner is a person and an amount. The old templates rendered
     both as one flat <h4> string. Here the string is parsed server-side and
     the money is set as a display-serif brass figure with tabular numerals —
     the plate reads like an engraved trophy nameplate, not a table row.
   - Photos are the content, so the media frame is 4:5 portrait and text NEVER
     sits over a photograph. Captions live in a solid block below the image,
     which is the only way to guarantee a contrast ratio against user-uploaded
     imagery.
   - Winners without a photo get a brass monogram, not a broken image. The
     monogram is a designed state, not an apology.
   - MOTION CONTRACT: nothing is hidden by this stylesheet unless
     `html.skagit-jp-js` is present AND the user has not asked for reduced
     motion. skagit-jackpot.js sets that class as its first statement, from
     the document HEAD. If the script 404s, errors, or is blocked, the class
     never lands and every reveal element renders at full opacity. Content is
     never stranded at opacity: 0.
   - The only `!important` declarations are the button-property resets
     required to defeat style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule, which forces EVERY <button> to navy
     with `!important`. They are listed in AGENT-JACKPOT-REPORT.md §7.
   ========================================================================== */

/* ==========================================================================
   1. SCOPE ROOT + LOCAL TOKENS
   ========================================================================== */

.skagit-jp {
  /* Plate sizing. `max` is what keeps a 3-winner month from stretching into
     three billboard-sized tiles on a 2560px display. */
  --skagit-jp-plate-min: 16rem;
  --skagit-jp-plate-max: 22rem;

  /* Portrait frame. Casino winner photos are almost always shot vertically
     holding an oversized cheque. */
  /* 16/9, NOT 4/5. Every winner image is a 2560x1440 screen capture of the
     floor's jackpot board, with the game name and the amount burned into the
     pixels. A 4/5 frame with object-fit:cover discarded 55% of the width,
     which is why the live site rendered "JACKPOT" as "ACKPO". */
  --skagit-jp-frame: 16 / 9;

  /* Offset for the sticky month rail. Set this if a fixed header is ever
     introduced; the site header is currently static, so 0 is correct. */
  --skagit-jp-rail-top: 0px;
  --skagit-jp-rail-h: 4.25rem;

  --skagit-jp-hairline: 2px;
}

.skagit-jp-container {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
  padding-inline: var(--sk-gutter);
}

/* ==========================================================================
   2. MOTION PRIMITIVES
   --------------------------------------------------------------------------
   Start visible, enhance. The hidden state is double-gated: it needs the JS
   flag class AND `prefers-reduced-motion: no-preference`.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html.skagit-jp-js .skagit-jp-reveal {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }

  html.skagit-jp-js .skagit-jp-reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
    transition:
      opacity var(--sk-dur-slow) var(--sk-ease-out),
      transform var(--sk-dur-slow) var(--sk-ease-out);
    transition-delay: var(--skagit-jp-stagger, 0ms);
  }
}

/* Staggered entrance across a grid row. Capped at 10 so a 40-winner month
   never waits 4 seconds for its last plate. */
.skagit-jp-grid > *:nth-child(1)  { --skagit-jp-stagger: 0ms; }
.skagit-jp-grid > *:nth-child(2)  { --skagit-jp-stagger: 55ms; }
.skagit-jp-grid > *:nth-child(3)  { --skagit-jp-stagger: 110ms; }
.skagit-jp-grid > *:nth-child(4)  { --skagit-jp-stagger: 165ms; }
.skagit-jp-grid > *:nth-child(5)  { --skagit-jp-stagger: 220ms; }
.skagit-jp-grid > *:nth-child(6)  { --skagit-jp-stagger: 265ms; }
.skagit-jp-grid > *:nth-child(7)  { --skagit-jp-stagger: 300ms; }
.skagit-jp-grid > *:nth-child(8)  { --skagit-jp-stagger: 330ms; }
.skagit-jp-grid > *:nth-child(9)  { --skagit-jp-stagger: 355ms; }
.skagit-jp-grid > *:nth-child(10) { --skagit-jp-stagger: 375ms; }

/* ==========================================================================
   3. HERO  (archive + single share this shell)
   ========================================================================== */

.skagit-jp-hero {
  /* .sk-surface-dark from layer 1 supplies the night gradient, the fluted
     texture and the vignette on ::before. Do not add a ::before here. */
  padding-block: var(--sk-space-2xl) var(--sk-space-xl);
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}

.skagit-jp-hero-inner {
  max-width: 62rem;
  margin-inline: auto;
}

.skagit-jp-hero .skagit-jp-eyebrow {
  color: var(--sk-gold-300);          /* 14.1:1 on --sk-navy-950 */
}

.skagit-jp-eyebrow {
  display: block;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--sk-space-xs);
}

.skagit-jp-hero-title {
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-5xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);             /* 17.8:1 on --sk-navy-900 */
  margin: 0;
  text-wrap: balance;
}

.skagit-jp-hero-rule {
  width: clamp(64px, 9vw, 108px);
  height: 2px;
  margin: var(--sk-space-md) auto;
  border: 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 10px rgba(212, 175, 55, 0.45);
}

.skagit-jp-hero-lede {
  max-width: var(--sk-measure);
  margin-inline: auto;
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
  color: var(--sk-text-on-dark-muted);  /* 10.0:1 on --sk-navy-900 */
}

/* ---- 3.1 The payout ledger ---------------------------------------------
   Three derived figures. This is the thing that makes two months of data
   look like an institution rather than a stub. */

.skagit-jp-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sk-space-md);
  max-width: 56rem;
  margin: var(--sk-space-xl) auto 0;
  padding: var(--sk-space-lg) var(--sk-space-md);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--sk-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(4, 16, 28, 0.55);
  box-shadow: var(--sk-rim-light), var(--sk-shadow-dark);
}

.skagit-jp-ledger-cell {
  position: relative;
  text-align: center;
  padding-inline: var(--sk-space-sm);
}

/* Hairline dividers between cells — only between, never trailing. */
.skagit-jp-ledger-cell + .skagit-jp-ledger-cell::before {
  content: "";
  position: absolute;
  inset-block: 12%;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(212, 175, 55, 0.45) 50%,
    rgba(212, 175, 55, 0) 100%);
}

/* The count-up figure is emitted by one helper but appears in two very
   different roles: as the hero numeral, and inline inside the month meta line
   ("7 winners · $47,500 paid out"). So the shared class carries ONLY the
   numeral treatment; the display sizing belongs to the ledger context. A
   figure that inherits its size cannot break the sentence it sits in. */
.skagit-jp-figure {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.skagit-jp-ledger .skagit-jp-figure {
  display: block;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-4xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-gold-400);          /* 9.4:1 on --sk-navy-800 */
}

.skagit-jp-ledger-label {
  display: block;
  margin-top: var(--sk-space-2xs);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-text-on-dark-muted);  /* 10.0:1 */
}

/* ==========================================================================
   4. MONTH RAIL  (the primary navigation affordance)
   --------------------------------------------------------------------------
   Real anchors, so Tab / Enter work with zero JavaScript. JS only adds the
   scroll-spy highlight.
   ========================================================================== */

.skagit-jp-rail {
  position: sticky;
  top: var(--skagit-jp-rail-top);
  z-index: var(--sk-z-sticky);
  background:
    var(--sk-tex-flute),
    linear-gradient(180deg, var(--sk-navy-950) 0%, #030B14 100%);
  background-size: 9px 100%, 100% 100%;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 10px 26px rgba(4, 16, 28, 0.28);
}

.skagit-jp-rail-inner {
  display: flex;
  align-items: center;
  gap: var(--sk-space-sm);
  min-height: var(--skagit-jp-rail-h);
  padding-block: var(--sk-space-2xs);
}

.skagit-jp-rail-label {
  flex: 0 0 auto;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-gold-300);          /* 14.1:1 on --sk-navy-950 */
}

.skagit-jp-rail-list {
  display: flex;
  flex: 1 1 auto;
  gap: var(--sk-space-2xs);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.skagit-jp-rail-list::-webkit-scrollbar { display: none; }
.skagit-jp-rail-list li { margin: 0; scroll-snap-align: center; }

/* Two months should read as a deliberate segmented control, not an orphaned
   pair pinned to the left edge. Once the list overflows, flex-start wins
   back automatically because there is no free space to distribute. */
.skagit-jp-rail-list { justify-content: center; }
.skagit-jp-rail--many .skagit-jp-rail-list { justify-content: flex-start; }

.skagit-jp-rail-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  white-space: nowrap;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--sk-border-on-dark);
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-text-on-dark-muted);  /* 10.8:1 on --sk-navy-950 */
  text-decoration: none;
  transition:
    color var(--sk-dur-fast) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-out),
    background-color var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-jp-rail-link:hover,
.skagit-jp-rail-link:focus-visible {
  color: var(--sk-gold-300);            /* 14.1:1 */
  border-color: rgba(212, 175, 55, 0.55);
  background-color: rgba(212, 175, 55, 0.08);
}

.skagit-jp-rail-link[aria-current="true"] {
  color: var(--sk-navy-950);            /* >=6.1:1 on the brass gradient */
  background-image: var(--sk-grad-brass);
  border-color: transparent;
  font-weight: var(--sk-weight-bold);
  box-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
}

.skagit-jp-rail-count {
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. MONTH SECTIONS + WINNER GRID
   ========================================================================== */

.skagit-jp-months { background: var(--sk-surface); }

.skagit-jp-month {
  padding-block: var(--sk-space-2xl);
  /* Clears the sticky rail when an anchor link jumps here. */
  scroll-margin-top: calc(var(--skagit-jp-rail-top) + var(--skagit-jp-rail-h) + 1rem);
}

.skagit-jp-month:nth-of-type(even) { background: var(--sk-surface-sunken); }

/* ---- 5.1 Month header --------------------------------------------------- */

.skagit-jp-month-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sk-space-sm) var(--sk-space-md);
  margin-bottom: var(--sk-space-xl);
  padding-bottom: var(--sk-space-sm);
  border-bottom: 1px solid var(--sk-border);
}

.skagit-jp-month-titles { min-width: 0; }

.skagit-jp-month-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  text-transform: none;
  color: var(--sk-navy-900);            /* 17.8:1 on white, 16.4:1 on mist */
}

.skagit-jp-month-meta {
  margin: var(--sk-space-3xs) 0 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  color: var(--sk-text-faint);          /* 6.0:1 on white, 5.6:1 on mist */
}

.skagit-jp-month-meta b {
  color: var(--sk-gold-700);            /* 5.8:1 on white, 5.4:1 on mist */
  font-weight: var(--sk-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- 5.2 The "view the month" link -------------------------------------- */

.skagit-jp-month-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--sk-navy-700);
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: var(--sk-navy-700);            /* 11.2:1 on white */
  text-decoration: none;
  transition:
    color var(--sk-dur-fast) var(--sk-ease-out),
    background-color var(--sk-dur-fast) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-jp-month-link:hover,
.skagit-jp-month-link:focus-visible {
  color: var(--sk-white);               /* 17.8:1 on navy-900 */
  background-color: var(--sk-navy-900);
  border-color: var(--sk-navy-900);
}

.skagit-jp-month-link .skagit-jp-chevron { transition: transform var(--sk-dur-base) var(--sk-ease-out); }
.skagit-jp-month-link:hover .skagit-jp-chevron { transform: translateX(3px); }

/* ---- 5.3 The grid -------------------------------------------------------
   `auto-fit` collapses the empty tracks so a 3-winner month centres three
   capped plates instead of stretching them across 1400px, while a
   40-winner month fills complete rows. This single line is what lets the
   design work at both the real data volume and the imagined one. */

.skagit-jp-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--skagit-jp-plate-min)), var(--skagit-jp-plate-max)));
  justify-content: center;
  gap: var(--sk-space-lg) var(--sk-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.skagit-jp-grid > li { margin: 0; min-width: 0; }

/* ==========================================================================
   6. THE PLATE  (a winner)
   ========================================================================== */

.skagit-jp-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sk-radius-lg);
  background: var(--sk-surface-raised);
  box-shadow: var(--sk-shadow-sm);
  transition:
    transform var(--sk-dur-base) var(--sk-ease-out),
    box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

/* Inset brass ring on hover — drawn on a pseudo-element so it can fade
   without repainting the card's own border box. */
.skagit-jp-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55);
  opacity: 0;
  transition: opacity var(--sk-dur-base) var(--sk-ease-out);
}

/* NO LIFT: A PLATE IS NOT A LINK.
   skagit_jackpot_plate() (inc/shortcode-jackpot-viewer.php:447) renders a bare
   <article> -- media frame, name, amount -- with no anchor, no button and no
   focusable child anywhere inside it. Measured in the rendered DOM on dev
   (2026-08-15): 40 plates on /jackpot-winners/, 25 on the july-2-8-2026 month
   single and 15 on july-9-15-2026; across all 40 archive plates there are zero
   <a>, zero <button> and zero tabindex attributes, and the computed cursor is
   `auto`.

   translateY(-6px) is this site's card-LINK gesture: it is exactly what
   .sno-card, .offer-card and .ent-card do in skagit-components.css section 7.1,
   and every one of those is wrapped in a real anchor. Borrowing the gesture for
   a plate promised a click that does not exist. skagit-jackpot-feed.css section
   5 already made this call for the board tiles on the home page -- same
   content, same non-link, no lift -- and the two were contradicting each other.

   What survives is ornament, not affordance: the brass inset ring on ::after
   and the corner brackets below both still respond, and the shadow still
   deepens. A shadow deepening in place reads as light falling differently; only
   the displacement read as a button rising.

   :focus-within stays in the selector list deliberately. It cannot fire today
   -- nothing inside a plate is focusable -- but if a link is ever added to a
   plate, the keyboard must not silently lose the state the mouse has. */
.skagit-jp-plate:hover,
.skagit-jp-plate:focus-within {
  box-shadow: var(--sk-shadow-lg);
}

.skagit-jp-plate:hover::after,
.skagit-jp-plate:focus-within::after { opacity: 1; }

/* ---- 6.1 Media frame ---------------------------------------------------- */

.skagit-jp-plate-media {
  position: relative;
  aspect-ratio: var(--skagit-jp-frame);
  overflow: hidden;
  /* Navy, not grey: an image that has not decoded yet still looks composed. */
  background: var(--sk-navy-800);
}

.skagit-jp-plate-img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: cover is only lossless while every upload is exactly
     16:9. Letterboxing in the panel colour means a wrong-shaped upload degrades
     visibly-but-harmlessly instead of silently cropping the amount off again. */
  object-fit: contain;
  transition: transform var(--sk-dur-slow) var(--sk-ease-out);
}

/* Hover zoom removed: a 5.5% scale on an image whose content IS text crops
   5.5% of the amount off. The original bug in miniature. */

/* A soft scrim at the foot of the photo so the brass hairline below it does
   not collide with a bright highlight in the image. Carries no text. */
.skagit-jp-plate-media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 16, 28, 0) 0%, rgba(4, 16, 28, 0.34) 100%);
}

/* ---- 6.2 Deco corner brackets ------------------------------------------
   Two thin gold L's that draw themselves in on hover. The single most
   "resort" detail on the card and it costs one empty span. */

.skagit-jp-plate-corner {
  position: absolute;
  inset: 0.7rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-jp-plate-corner::before,
.skagit-jp-plate-corner::after {
  content: "";
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  border-color: var(--sk-gold-300);
  transition: transform var(--sk-dur-slow) var(--sk-ease-spring);
}

.skagit-jp-plate-corner::before {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: translate(6px, 6px);
}

.skagit-jp-plate-corner::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translate(-6px, -6px);
}

.skagit-jp-plate:hover .skagit-jp-plate-corner { opacity: 1; }

.skagit-jp-plate:hover .skagit-jp-plate-corner::before,
.skagit-jp-plate:hover .skagit-jp-plate-corner::after { transform: none; }

/* ---- 6.2b THE PLATE IS NOT INTERACTIVE, SO IT MUST NOT BEHAVE LIKE IT -----
   >>> DEFEATS THE FOUR RULES DIRECTLY ABOVE, DELIBERATELY AND IN PLACE. <<<

   A jackpot plate is an <article>. Checked against the served markup, not
   assumed: one plate contains zero <a>, zero <button> and no tabindex, so
   nothing inside it can be clicked or focused. It lifts, glows and unfolds its
   corner flourish on hover anyway, which is an affordance that promises a
   destination the plate does not have -- the visitor moves the mouse, the tile
   answers, and nothing happens when they click. Forty of them on one page.

   `:focus-within` goes with the hover for the same reason and no other: with no
   focusable descendant it can never match, so this removes a state that cannot
   occur rather than a keyboard affordance. If a plate ever gains a link, delete
   this block -- do not work around it.

   WRITTEN AS AN OVERRIDE RATHER THAN BY EDITING THOSE SELECTOR LISTS. Two of
   them are multi-selector, and a mis-edited selector list takes the whole rule
   with it -- that failure has already cost this project a live Book Now button.
   Appending is reversible by deleting this block, and it names what it defeats.

   The reduced-motion block in section 11 is untouched: it lists these selectors
   among many others and its job is unrelated. */
.skagit-jp-plate:hover,
.skagit-jp-plate:focus-within {
  box-shadow: var(--sk-shadow-md);
}

.skagit-jp-plate:hover::after,
.skagit-jp-plate:focus-within::after { opacity: 0; }

.skagit-jp-plate:hover .skagit-jp-plate-corner { opacity: 0; }

/* ---- 6.3 Monogram fallback ---------------------------------------------
   No photo is a designed state. Brass leaf, fluted, with the winner's
   initial engraved in the night ink. `assets/img/placeholder.jpg` never
   existed; nothing here requests an image file. */

.skagit-jp-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-image: var(--sk-tex-flute), var(--sk-grad-brass);
  background-size: 9px 100%, 100% 100%;
}

.skagit-jp-monogram::before {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(4, 16, 28, 0.28);
  border-radius: var(--sk-radius-sm);
}

.skagit-jp-monogram-letter {
  font-family: var(--sk-font-display);
  font-size: clamp(3.25rem, 9vw, 5rem);
  font-weight: var(--sk-weight-bold);
  line-height: 1;
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-navy-950);            /* >=6.1:1 against the brass gradient */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Three sweep variants so a photoless month is not a wall of identical
   tiles. Hue is untouched — only the light source moves. */
.skagit-jp-grid > li:nth-child(3n + 2) .skagit-jp-monogram { background-position: 0 0, 30% 0; }
.skagit-jp-grid > li:nth-child(3n + 3) .skagit-jp-monogram { background-position: 0 0, 70% 0; }
.skagit-jp-grid > li:nth-child(3n + 2) .skagit-jp-monogram-letter { transform: rotate(-1.5deg); }
.skagit-jp-grid > li:nth-child(3n + 3) .skagit-jp-monogram-letter { transform: rotate(1.5deg); }

/* ---- 6.4 Caption block -------------------------------------------------- */

.skagit-jp-plate-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-3xs);
  padding: var(--sk-space-md) var(--sk-space-sm) var(--sk-space-md);
  text-align: center;
  background: var(--sk-surface-raised);
}

/* The engraved rule: the plate's signature. */
.skagit-jp-plate-body::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--skagit-jp-hairline);
  background: var(--sk-grad-brass);
}

/* The name is an <h3> (or <h2> on the single-month page), so it inherits
   `font-family: var(--sk-font-display) !important` from
   skagit-design-system.css. Here the name plays a LABEL role above the
   figure, not a display role, so it goes back to Open Sans — and an
   !important can only be beaten by another !important, never by specificity.
   Same reasoning, and same pattern, as the four label-heading overrides
   already logged in AGENT-DESIGN-REPORT.md §7. */
.skagit-jp-plate-name {
  margin: 0;
  font-family: var(--sk-font-body) !important;
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  line-height: var(--sk-lh-snug);
  text-transform: uppercase;
  color: var(--sk-text-faint);          /* 6.0:1 on white */
  /* A long unbroken name must never widen the grid track. */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* NOT `hyphens: auto`. This is a winner's NAME in an uppercase label face —
     auto-hyphenation applied an English dictionary to proper nouns and broke
     them mid-syllable inside the plate. `manual` (the CSS initial value) stops
     the browser inventing break points.

     >>> `overflow-wrap: anywhere` AND `word-break` ABOVE ARE THE GUARD. <<<
     They are what keeps a long unbroken name from widening the grid track, per
     the comment above; `hyphens` never contributed to that. Do not remove them
     while tidying this rule. */
  hyphens: manual;
}

.skagit-jp-plate-amount {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-gold-700);            /* 5.8:1 on white, 5.4:1 on mist */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  overflow-wrap: anywhere;
}

/* When there is no parsed amount the name carries the plate on its own, so
   it gets promoted to the display face. */
/* !important here only to win back from the rule directly above, which had to
   use !important itself. */
.skagit-jp-plate--noamount .skagit-jp-plate-name {
  font-family: var(--sk-font-display) !important;
  font-size: var(--sk-fs-lg);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  text-transform: none;
  color: var(--sk-navy-900);            /* 17.8:1 on white */
}

/* ---- 6.5 Larger plates on the single-month page ------------------------- */

.skagit-jp--roomy {
  --skagit-jp-plate-min: 17.5rem;
  --skagit-jp-plate-max: 25rem;
}

.skagit-jp--roomy .skagit-jp-plate-amount { font-size: var(--sk-fs-3xl); }

/* ==========================================================================
   7. SINGLE-MONTH EXTRAS
   ========================================================================== */

.skagit-jp-single-body {
  background: var(--sk-surface);
  padding-block: var(--sk-space-2xl);
}

/* ---- 7.1 Month pager ---------------------------------------------------- */

.skagit-jp-pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sk-space-sm);
  margin-top: var(--sk-space-2xl);
  padding-top: var(--sk-space-lg);
  border-top: 1px solid var(--sk-border);
}

.skagit-jp-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: var(--sk-space-md) var(--sk-space-sm);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-surface-raised);
  text-decoration: none;
  transition:
    border-color var(--sk-dur-fast) var(--sk-ease-out),
    box-shadow var(--sk-dur-base) var(--sk-ease-out),
    transform var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-jp-pager-link:hover,
.skagit-jp-pager-link:focus-visible {
  border-color: var(--sk-gold-500);
  box-shadow: var(--sk-shadow-md);
  transform: translateY(-3px);
}

/* The trailing cell in the pager grid, whichever direction it points. */
.skagit-jp-pager-link--end { text-align: right; }

.skagit-jp-pager-dir {
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sk-gold-700);            /* 5.8:1 on white */
}

.skagit-jp-pager-title {
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-lg);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-navy-900);            /* 17.8:1 on white */
}

/* ==========================================================================
   8. TABBED VIEWER  [skagit_jackpot_viewer]
   --------------------------------------------------------------------------
   A real WAI-ARIA tabs widget. The previous build used <li> elements with a
   jQuery click handler: not focusable, not operable by keyboard at all.
   ========================================================================== */

.skagit-jp-viewer {
  margin-block: var(--sk-space-xl);
  border-radius: var(--sk-radius-lg);
  overflow: hidden;
  box-shadow: var(--sk-shadow-md);
  background: var(--sk-surface-sunken);
}

.skagit-jp-viewer-head {
  padding: var(--sk-space-lg) var(--sk-space-md) var(--sk-space-md);
  background:
    var(--sk-tex-flute),
    var(--sk-grad-night);
  background-size: 9px 100%, 100% 100%;
}

.skagit-jp-viewer-head .skagit-jp-eyebrow { color: var(--sk-gold-300); }  /* 14.1:1 */

.skagit-jp-viewer-title {
  margin: 0 0 var(--sk-space-md);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);               /* 17.8:1 */
}

.skagit-jp-tablist {
  display: flex;
  gap: var(--sk-space-2xs);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.4rem;
  scrollbar-width: none;
}

.skagit-jp-tablist::-webkit-scrollbar { display: none; }

/* !important x3 — style.css's `button, input[type="button"], input[type="submit"], .elementor-button` rule forces every <button> to navy/white/navy
   with !important. Specificity cannot beat !important; only !important can.
   Logged in AGENT-JACKPOT-REPORT.md §7. */
.skagit-jp-tab {
  flex: 0 0 auto;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--sk-border-on-dark) !important;
  border-radius: var(--sk-radius-pill);
  background-color: transparent !important;
  color: var(--sk-text-on-dark-muted) !important;   /* 10.8:1 on navy-950 */
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-weight-semi);
  letter-spacing: var(--sk-tracking-tight);
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--sk-dur-fast) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-out),
    background-color var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-jp-tab:hover {
  color: var(--sk-gold-300) !important;             /* 14.1:1 */
  border-color: rgba(212, 175, 55, 0.55) !important;
  background-color: rgba(212, 175, 55, 0.1) !important;
}

.skagit-jp-tab[aria-selected="true"] {
  color: var(--sk-navy-950) !important;             /* >=6.1:1 on brass */
  background-color: var(--sk-gold-500) !important;
  background-image: var(--sk-grad-brass);
  border-color: transparent !important;
  font-weight: var(--sk-weight-bold);
  box-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
}

.skagit-jp-panel { padding: var(--sk-space-lg) var(--sk-space-md); }
.skagit-jp-panel[hidden] { display: none; }

/* :focus-visible on the panel itself: the panel is tabbable so a keyboard
   user can reach the plates inside it. */
.skagit-jp-panel:focus-visible { outline-offset: -4px; }

.skagit-jp-panel-meta {
  margin: 0 0 var(--sk-space-lg);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  color: var(--sk-text-faint);          /* 5.6:1 on mist */
}

.skagit-jp-panel-meta b {
  color: var(--sk-gold-700);            /* 5.4:1 on mist */
  font-weight: var(--sk-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ==========================================================================
   9. WINNERS CAROUSEL  [skagit_jackpot_modern_feed]
   --------------------------------------------------------------------------
   The one place a carousel earns its keep: a marketing band dropped onto
   other pages, where a moving ribbon of faces is the point. Controls sit in
   a bar BELOW the track rather than floating over the photographs — they are
   never clipped, never overlap a winner's face, and never need a different
   offset at every breakpoint.
   ========================================================================== */

.skagit-jp-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background:
    var(--sk-tex-flute),
    var(--sk-grad-night);
  background-size: 9px 100%, 100% 100%;
  overflow: hidden;
}

.skagit-jp-feed-pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sk-space-2xl) var(--sk-gutter);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

/* Scrim. Present whether or not a hero image was supplied, so the copy's
   contrast ratio does not depend on an editor's photo choice. */
.skagit-jp-feed-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg, rgba(4, 16, 28, 0.94) 0%, rgba(6, 25, 43, 0.86) 55%, rgba(4, 16, 28, 0.94) 100%);
}

.skagit-jp-feed-pitch .skagit-jp-eyebrow { color: var(--sk-gold-300); }  /* 14.1:1 */

.skagit-jp-feed-title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-3xl);
  font-weight: var(--sk-weight-bold);
  line-height: var(--sk-lh-heading);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);               /* >=19:1 through the scrim */
  text-wrap: balance;
}

.skagit-jp-feed-rule {
  width: clamp(56px, 7vw, 88px);
  height: 2px;
  margin: var(--sk-space-sm) 0;
  border: 0;
  border-radius: 2px;
  background: var(--sk-grad-brass);
}

.skagit-jp-feed-desc {
  max-width: var(--sk-measure-narrow);
  margin: 0 0 var(--sk-space-md);
  font-size: var(--sk-fs-md);
  line-height: var(--sk-lh-loose);
  color: var(--sk-text-on-dark-muted);  /* 10.0:1 */
}

.skagit-jp-feed-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.8rem 1.6rem;
  border-radius: var(--sk-radius-pill);
  background-image: var(--sk-grad-brass);
  color: var(--sk-navy-950);            /* >=6.1:1 on brass */
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-xs);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sk-shadow-md);
  transition:
    transform var(--sk-dur-base) var(--sk-ease-out),
    box-shadow var(--sk-dur-base) var(--sk-ease-out);
}

.skagit-jp-feed-cta:hover,
.skagit-jp-feed-cta:focus-visible {
  color: var(--sk-navy-950);
  transform: translateY(-2px);
  box-shadow: var(--sk-glow-gold), var(--sk-shadow-lg);
}

.skagit-jp-feed-cta:hover .skagit-jp-chevron { transform: translateX(3px); }
.skagit-jp-feed-cta .skagit-jp-chevron { transition: transform var(--sk-dur-base) var(--sk-ease-out); }

/* ---- 9.1 Track ---------------------------------------------------------- */

.skagit-jp-carousel-wrap {
  padding: var(--sk-space-xl) 0 var(--sk-space-lg) var(--sk-gutter);
  min-width: 0;
}

.skagit-jp-carousel { min-width: 0; max-width: 100%; }

/* Before Slick runs (or if jQuery/Slick never load) the track is a
   horizontal scroller. It is usable either way — the carousel is an
   enhancement, not a prerequisite for seeing the winners. */
.skagit-jp-carousel:not(.slick-initialized) {
  display: flex;
  gap: var(--sk-space-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sk-space-2xs);
}

.skagit-jp-carousel:not(.slick-initialized) > .skagit-jp-slide {
  flex: 0 0 min(78%, 17rem);
  scroll-snap-align: start;
  padding-right: 0;   /* `gap` already spaces them in this mode */
}

.skagit-jp-carousel .slick-track { display: flex; align-items: stretch; }
.skagit-jp-carousel .slick-slide { height: auto; }
.skagit-jp-carousel .slick-slide > div { height: 100%; }

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

/* Feed plates sit on the night ground, so they invert. */
.skagit-jp-feed .skagit-jp-plate {
  background: var(--sk-surface-dark-raised);
  box-shadow: var(--sk-shadow-dark), var(--sk-rim-light);
}

.skagit-jp-feed .skagit-jp-plate-body { background: var(--sk-surface-dark-raised); }

.skagit-jp-feed .skagit-jp-plate-name {
  color: var(--sk-text-on-dark-muted);  /* 8.9:1 on --sk-navy-800 */
}

.skagit-jp-feed .skagit-jp-plate-amount {
  color: var(--sk-gold-400);            /* 9.4:1 on --sk-navy-800 */
}

.skagit-jp-feed .skagit-jp-plate--noamount .skagit-jp-plate-name {
  color: var(--sk-white);               /* 15.4:1 on --sk-navy-800 */
}

/* ---- 9.2 Controls ------------------------------------------------------- */

/* Hidden until Slick has actually taken over the track. Before that the
   track is a native scroll-snap scroller and these buttons would do nothing;
   a control that does nothing is worse than no control. The script adds
   `--ready` only after a successful init. */
.skagit-jp-controls { display: none; }

.skagit-jp-carousel-wrap--ready .skagit-jp-controls {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2xs);
  margin-top: var(--sk-space-md);
  padding-right: var(--sk-gutter);
}

.skagit-jp-controls-spacer { flex: 1 1 auto; }

/* !important x3 — same reason as §8. */
.skagit-jp-btn {
  display: inline-grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 50%;
  background-color: rgba(212, 175, 55, 0.08) !important;
  color: var(--sk-gold-300) !important;             /* 13.1:1 on navy-900 */
  cursor: pointer;
  line-height: 1;
  transition:
    background-color var(--sk-dur-fast) var(--sk-ease-out),
    color var(--sk-dur-fast) var(--sk-ease-out),
    border-color var(--sk-dur-fast) var(--sk-ease-out),
    transform var(--sk-dur-fast) var(--sk-ease-out);
}

.skagit-jp-btn:hover:not(:disabled) {
  background-color: var(--sk-gold-500) !important;
  background-image: var(--sk-grad-brass);
  color: var(--sk-navy-950) !important;             /* >=6.1:1 on brass */
  border-color: transparent !important;
  transform: translateY(-2px);
}

.skagit-jp-btn:disabled,
.skagit-jp-btn.slick-disabled {
  cursor: default;
  opacity: 1;                                        /* keep it legible */
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: var(--sk-text-on-dark-muted) !important;    /* 8.9:1 */
  border-color: var(--sk-border-on-dark) !important;
}

.skagit-jp-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* Slick sets inline `display: block` on the arrows it adopts; the grid
   display above is restated with higher specificity so the icon stays
   centred. */
.skagit-jp-carousel-wrap .skagit-jp-btn.slick-arrow { display: inline-grid; }

/* The play/pause toggle swaps which glyph is shown from a single button.
   `data-skagit-jp-playing` drives the icon; the button's aria-label is
   rewritten to the same action by the script, so the accessible name and the
   visible glyph can never drift apart. (Deliberately NOT aria-pressed: a
   toggle announcing "Pause, pressed" is worse than a button whose name is
   simply the action it performs.) */
.skagit-jp-btn[data-skagit-jp-playing="true"]  .skagit-jp-icon-play,
.skagit-jp-btn[data-skagit-jp-playing="false"] .skagit-jp-icon-pause { display: none; }

/* ==========================================================================
   10. EMPTY STATES
   --------------------------------------------------------------------------
   Two published months is thin data. An empty month must therefore look like
   a considered pause, not a bug.
   ========================================================================== */

.skagit-jp-empty {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--sk-space-2xl) var(--sk-space-md);
  text-align: center;
}

.skagit-jp-empty-mark {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--sk-space-md);
  border-radius: 50%;
  background-image: var(--sk-grad-brass);
  color: var(--sk-navy-950);            /* >=6.1:1 on brass */
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-2xl);
  font-weight: var(--sk-weight-bold);
  box-shadow: var(--sk-shadow-md);
}

.skagit-jp-empty-title {
  margin: 0 0 var(--sk-space-2xs);
  font-family: var(--sk-font-display);
  font-size: var(--sk-fs-xl);
  font-weight: var(--sk-weight-bold);
  color: var(--sk-navy-900);            /* 17.8:1 on white */
}

.skagit-jp-empty-text {
  margin: 0;
  font-size: var(--sk-fs-base);
  color: var(--sk-text-muted);          /* 7.9:1 on white */
}

.skagit-jp-empty--on-dark .skagit-jp-empty-title { color: var(--sk-white); }
.skagit-jp-empty--on-dark .skagit-jp-empty-text  { color: var(--sk-text-on-dark-muted); }

/* ==========================================================================
   11. SHARED BITS
   ========================================================================== */

.skagit-jp-chevron {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  /* Optical centring against uppercase text. */
  margin-bottom: 0.1em;
}

.skagit-jp-chevron--left { transform: rotate(135deg); }

.skagit-jp-visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   12. RESPONSIVE
   --------------------------------------------------------------------------
   Verified by inspection from 360px to 2560px. Everything that can scroll
   sideways is an explicit `overflow-x: auto` container; nothing else may.
   ========================================================================== */

/* ---- 12.1 <=47.99em (phones) ------------------------------------------- */
@media (max-width: 47.99em) {
  .skagit-jp {
    --skagit-jp-plate-min: 14rem;
    --skagit-jp-rail-h: 3.75rem;
  }

  .skagit-jp-hero { padding-block: var(--sk-space-xl) var(--sk-space-lg); }

  .skagit-jp-ledger {
    padding: var(--sk-space-md) var(--sk-space-sm);
    gap: var(--sk-space-sm);
  }

  /* Stacked cells: the vertical hairline becomes a horizontal one. */
  .skagit-jp-ledger-cell + .skagit-jp-ledger-cell::before {
    inset-block: auto;
    inset-inline: 18%;
    top: calc(var(--sk-space-sm) * -0.5);
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(212, 175, 55, 0) 0%,
      rgba(212, 175, 55, 0.45) 50%,
      rgba(212, 175, 55, 0) 100%);
  }

  .skagit-jp-rail-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding-block: var(--sk-space-2xs);
  }

  .skagit-jp-rail-label { text-align: center; }

  .skagit-jp-month-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .skagit-jp-month-link { align-self: stretch; justify-content: center; }

  .skagit-jp-pager-link--end { text-align: left; }

  .skagit-jp-carousel-wrap { padding-top: var(--sk-space-lg); }

  /* GONE WITH THE ARROW BAR. `.skagit-jp-controls` had one job here -- centre
     the two arrows and the play/pause toggle on a phone -- and
     inc/shortcode-jackpot-viewer.php no longer emits that element at all.
     `.skagit-jp-controls-status` never had a job: no template in this theme has
     ever printed a `span.skagit-jp-controls-status`, so this rule and its
     sibling in section 9.2 were dead the day they were written. Both deleted
     rather than overridden -- an override naming an element nothing emits is
     just a second dead rule. Phone sizing for the brass scrubber that replaced
     them lives with the rest of the scrubber, in section 17.4. */

  .skagit-jp-feed-pitch { padding-block: var(--sk-space-xl); }
  .skagit-jp-feed-cta { align-self: stretch; justify-content: center; }
}

/* ---- 12.2 >=62em (the feed splits) ------------------------------------- */
@media (min-width: 62em) {
  .skagit-jp-feed {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .skagit-jp-carousel-wrap {
    grid-column: 1;
    padding-block: var(--sk-space-2xl);
  }

  .skagit-jp-feed-pitch {
    grid-column: 2;
    padding-inline: var(--sk-space-xl);
  }

  .skagit-jp-viewer-head { padding-inline: var(--sk-space-lg); }
  .skagit-jp-panel { padding-inline: var(--sk-space-lg); }
}

/* ---- 12.3 >=100em (very large displays) -------------------------------- */
@media (min-width: 100em) {
  .skagit-jp { --skagit-jp-plate-max: 24rem; }
  .skagit-jp--roomy { --skagit-jp-plate-max: 27rem; }
}

/* ==========================================================================
   13. REDUCED MOTION
   --------------------------------------------------------------------------
   Belt and braces. skagit-jackpot.js already refuses to add the
   `skagit-jp-js` flag when reduced motion is requested, and §2 is gated on
   `no-preference` besides — but if either safeguard is ever edited away,
   this block still guarantees that no jackpot content can be left invisible
   or in motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .skagit-jp-reveal,
  .skagit-jp-reveal.is-in,
  html.skagit-jp-js .skagit-jp-reveal,
  html.skagit-jp-js .skagit-jp-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .skagit-jp-plate:hover,
  .skagit-jp-plate:focus-within,
  .skagit-jp-pager-link:hover,
  .skagit-jp-pager-link:focus-visible,
  .skagit-jp-btn:hover:not(:disabled),
  .skagit-jp-feed-cta:hover,
  .skagit-jp-feed-cta:focus-visible,
  .skagit-jp-plate:hover .skagit-jp-plate-img,
  .skagit-jp-month-link:hover .skagit-jp-chevron,
  .skagit-jp-feed-cta:hover .skagit-jp-chevron,
  .skagit-jp-plate:hover .skagit-jp-plate-corner::before,
  .skagit-jp-plate:hover .skagit-jp-plate-corner::after,
  .skagit-jp-grid > li:nth-child(3n + 2) .skagit-jp-monogram-letter,
  .skagit-jp-grid > li:nth-child(3n + 3) .skagit-jp-monogram-letter {
    /* Hover feedback survives as colour and shadow; only displacement goes. */
    transform: none !important;
  }

  html { scroll-behavior: auto; }
}

/* ==========================================================================
   14. FORCED COLOURS  (Windows High Contrast)
   ========================================================================== */
@media (forced-colors: active) {
  .skagit-jp-plate,
  .skagit-jp-pager-link,
  .skagit-jp-rail-link,
  .skagit-jp-tab,
  .skagit-jp-btn {
    border: 1px solid ButtonBorder;
  }

  .skagit-jp-rail-link[aria-current="true"],
  .skagit-jp-tab[aria-selected="true"] {
    border-color: Highlight;
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  /* The monogram's meaning is carried by the letter, which keeps system
     colours; the brass sweep is dropped. */
  .skagit-jp-monogram { background: Canvas; }
  .skagit-jp-monogram-letter { color: CanvasText; }
  .skagit-jp-plate-body::before { background: ButtonBorder; }
}

/* ==========================================================================
   15. PRINT
   ========================================================================== */
@media print {
  .skagit-jp-rail,
  .skagit-jp-controls,
  .skagit-jp-month-link,
  .skagit-jp-pager,
  .skagit-jp-feed-cta { display: none !important; }

  .skagit-jp-hero,
  .skagit-jp-feed,
  .skagit-jp-viewer-head {
    background: none !important;
    color: #000 !important;
  }

  .skagit-jp-hero-title,
  .skagit-jp-viewer-title,
  .skagit-jp-feed-title { color: #000 !important; }

  .skagit-jp-plate { box-shadow: none !important; border: 1px solid #999; break-inside: avoid; }
  .skagit-jp-panel[hidden] { display: block !important; }
}

/* ==========================================================================
   16. THE LEDGER CAROUSEL  (archive-jackpot_month.php)
   --------------------------------------------------------------------------
   Section 9 built .skagit-jp-carousel-wrap for ONE ground: the night-blue
   [skagit_jackpot_modern_feed] band, bleeding to the right edge of the
   viewport. The archive puts the same track on a LIGHT ground
   (.skagit-jp-months is --sk-surface / --sk-surface-sunken) inside
   .skagit-jp-container, which already supplies the gutter. Everything below
   is scoped to the --ledger modifier, so the feed band is untouched.

   Selectors are doubled rather than marked !important wherever the rule they
   defeat carries no !important; where section 9 already shouts, this shouts
   back from a higher specificity. Each rule stands alone on purpose: a
   multi-selector list that fails to parse takes every rule in it down.
   ========================================================================== */

/* ---- 16.1 Geometry ------------------------------------------------------
   Defeats section 9.1's `padding: ... 0 ... var(--sk-gutter)`, section 12.1's
   `padding-top` and section 12.2's `padding-block`. All three exist to make
   the feed band bleed; inside .skagit-jp-container they would only inset the
   left edge further than the right. (0,2,0) beats all three at any width. */
.skagit-jp-carousel-wrap.skagit-jp-carousel-wrap--ledger {
  padding: 0;
}

/* ---- 16.2 Controls on a light ground ------------------------------------
   Defeats the !important paints in section 9.2, which are calibrated for
   --sk-navy-900: --sk-gold-300 is 13.1:1 there and 1.36:1 on white. These are
   the values .skagit-jp-month-link already uses one element above --
   --sk-navy-700 is 11.2:1 on white and 10.3:1 on --sk-mist. */
.skagit-jp-carousel-wrap--ledger .skagit-jp-btn {
  border-color: var(--sk-navy-700) !important;
  background-color: transparent !important;
  color: var(--sk-navy-700) !important;
}

.skagit-jp-carousel-wrap--ledger .skagit-jp-btn:hover:not(:disabled) {
  border-color: var(--sk-navy-900) !important;
  background-color: var(--sk-navy-900) !important;
  background-image: none;
  color: var(--sk-white) !important;
}

.skagit-jp-carousel-wrap--ledger .skagit-jp-btn:focus-visible {
  border-color: var(--sk-navy-900) !important;
}

.skagit-jp-carousel-wrap--ledger .skagit-jp-btn:disabled {
  border-color: var(--sk-border) !important;
  background-color: transparent !important;
  color: var(--sk-text-faint) !important;
}

.skagit-jp-carousel-wrap--ledger .skagit-jp-btn.slick-disabled {
  border-color: var(--sk-border) !important;
  background-color: transparent !important;
  color: var(--sk-text-faint) !important;
}

/* ---- 16.3 Two buttons that must actually go away ------------------------
   (a) When slideCount <= slidesToShow, slick 1.8.1 never binds the arrows and
       marks them .slick-hidden. slick.css hides those at (0,2,0), but section
       9.2's `.skagit-jp-carousel-wrap .skagit-jp-btn.slick-arrow { display:
       inline-grid }` is (0,3,0) and beats it -- the arrows come back, dead.
       (0,4,0) settles it. Not scoped to --ledger: the feed band has the same
       bug. */
.skagit-jp-carousel-wrap .skagit-jp-btn.slick-arrow.slick-hidden {
  display: none;
}

/* (b) skagit-jackpot.js sets the HTML `hidden` ATTRIBUTE on the play/pause
       toggle when a month is too short to loop. `.skagit-jp-btn { display:
       inline-grid }` is an AUTHOR rule, so it beats the user agent's
       `[hidden] { display: none }` whatever the specificity, and the toggle
       stays on screen showing both glyphs. */
.skagit-jp-controls .skagit-jp-btn[hidden] {
  display: none;
}

/* ---- 16.4 Reduced motion ------------------------------------------------
   Autoplay is already off (skagit-jackpot.js will not start it), but an arrow
   press still slides the track for 520ms. Slick writes that transition as an
   INLINE style, so !important is the only thing that can reach it. Slick ends
   its own animation on a setTimeout of `speed`, not on transitionend, so
   removing the transition cannot strand it mid-move. */
@media (prefers-reduced-motion: reduce) {
  .skagit-jp-carousel .slick-track {
    transition: none !important;
  }
}

/* ---- 16.5 Print ---------------------------------------------------------
   Section 15 hides `.skagit-jp-controls`, which this theme no longer emits --
   the arrow bar became a scrubber and section 17.5 hides that instead. What
   the rest of this block is for is unchanged: without it a printed archive
   would carry three winners per month instead of all of them, because
   .slick-list clips and .slick-track is pushed sideways by an inline
   transform. Screen is unaffected: this is inside @media print. */
@media print {
  .skagit-jp-carousel-wrap--ledger .slick-list {
    overflow: visible !important;
  }

  .skagit-jp-carousel-wrap--ledger .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    transform: none !important;
  }

  .skagit-jp-carousel-wrap--ledger .slick-slide {
    float: none !important;
    width: 32% !important;
  }

  .skagit-jp-carousel-wrap--ledger .slick-cloned {
    display: none !important;
  }
}

/* ==========================================================================
   17. CENTRE STAGE  (the ledger carousel's spotlight and its brass scrubber)
   --------------------------------------------------------------------------
   Section 16 repainted section 9's carousel for a light ground. This section
   changes what the carousel IS: slick centerMode, one card in the middle, the
   neighbours scaled DOWN around it, and the Current Promotions scrubber in
   place of the arrow bar. assets/js/skagit-jackpot.js section 5 carries the
   matching options and the whole argument for the index arithmetic; this file
   only draws.

   READ THIS BEFORE EDITING A SELECTOR: `.skagit-jp-slide` IS NOT
   `.slick-slide`. slick ships with `rows: 1` (slick/slick.js:74), which
   satisfies `if (_.options.rows > 0)` in buildRows (slick/slick.js:562), so
   slick rebuilds the track as `div > div > .skagit-jp-slide` and buildOut then
   adds `slick-slide` to the OUTER div (slick/slick.js:509-512). `slick-center`
   lands there too (slick/slick.js:2344-2346), two levels above the card. Section
   9.1's `.skagit-jp-carousel .slick-slide > div { height: 100% }` is the same
   discovery written down earlier. Every rule below therefore reaches the card
   as a DESCENDANT of the centred slide. The paired `.skagit-jp-slide
   .slick-center` rule exists only so that a slick which stops wrapping cannot
   silently leave every card shrunk and no card chosen.

   THE SIZE DIFFERENCE IS MADE BY SHRINKING THE NEIGHBOURS, NOT BY ENLARGING
   THE CENTRE. Two hazards, one answer:

     1. THE PHOTOS. This theme has already shipped, and then removed, a 5.5%
        scale on `.skagit-jp-plate-img` inside a fixed `aspect-ratio` frame --
        the tombstone comment is still in section 6.1. That cropped the edges
        off images whose content IS text. Nothing here scales an image inside a
        frame: the transform sits on `.skagit-jp-slide`, the whole card, so the
        media frame and everything in it scale together as one composited
        layer. `.skagit-jp-plate-img` is `object-fit: contain` (section 6.1),
        so the entire image is inside the frame at ANY frame size, letterboxed
        in the panel colour -- there is no crop to change at any breakpoint,
        and the SPOTLIGHT card is not scaled at all.

     2. THE CLIP. `.slick-list` is `overflow: hidden` (slick/slick.css:26). A
        centre card scaled ABOVE 1 would be cut off top and bottom, and the
        usual remedy -- vertical padding on the list plus a negative margin --
        cannot be written here without !important: slick assigns
        `padding: 0px <centerPadding>` to `.slick-list` as an INLINE shorthand
        in setDimensions (slick/slick.js:2032-2036) and re-applies it on every
        init and every breakpoint. With the centre left at its natural size it
        occupies exactly the box slick allotted it, so nothing in this section
        can clip anything that was not already clipped. Transforms do not
        affect layout, so the shrunk neighbours do not change the track height
        either.

   THE SCALE GOES ON `.skagit-jp-slide`, NOT ON `.skagit-jp-plate`, AND THAT IS
   LOAD-BEARING. Section 13's reduced-motion block lists `.skagit-jp-plate:hover`
   with `transform: none !important`. Written on the plate, a reduced-motion
   reader hovering a side card would have seen it pop to full size, and only a
   second !important could have stopped it. `.skagit-jp-slide` appears nowhere
   in that list, so there is no fight to have.

   NO DIMMING. Slick's own Center Mode demo fades the neighbours, but its
   slides are grey placeholders. These carry a winner's name at
   --sk-text-faint and an amount at --sk-gold-700, both calibrated against
   white; dropping their opacity moves a real text contrast ratio, and no ratio
   is quoted in this file that was not measured. Size carries the hierarchy on
   its own.
   ========================================================================== */

/* ---- 17.1 The spotlight -------------------------------------------------
   0.86 is a ratio, not a measurement: the centre card is 1 / 0.86 = 1.163x a
   neighbour edge to edge and 1 / 0.86^2 = 1.352x in area. The shrink is
   (0,3,0) and both centre rules are (0,4,0), so the order of the three in this
   file is not load-bearing. Each stands alone: a selector list that fails to
   parse takes every rule in it down, and here that would leave every card
   shrunk with nothing to mark the middle. */
.skagit-jp-carousel-wrap--ledger .slick-initialized .skagit-jp-slide {
  transform: scale(0.86);
  transform-origin: 50% 50%;
  transition: transform var(--sk-dur-slow) var(--sk-ease-out);
}

.skagit-jp-carousel-wrap--ledger .slick-initialized .slick-center .skagit-jp-slide {
  transform: none;
}

/* Insurance, not a live rule today -- see the DOM note in the section head. */
.skagit-jp-carousel-wrap--ledger .slick-initialized .skagit-jp-slide.slick-center {
  transform: none;
}

/* Section 9.1 pads the card on the RIGHT only. That was right for a rail that
   runs left to right and wrong for one that centres: a card padded on one side
   sits half a gutter left of true centre, and `transform-origin: 50% 50%`
   would then shrink it about the wrong point. Same total gutter, split in two.
   (0,4,0), and scoped to the initialised track so the pre-init scroller keeps
   section 9.1's `padding-right: 0` + `gap` arrangement untouched. */
.skagit-jp-carousel-wrap--ledger .skagit-jp-carousel.slick-initialized .skagit-jp-slide {
  padding-inline: calc(var(--sk-space-md) / 2);
}

/* ---- 17.2 The brass scrubber --------------------------------------------
   The Current Promotions control, in the same two elements and the same
   values as skagit-components.css section 11.1, so the two rails read as one
   control in two places rather than two dialects of one idea.

   The scrubber ships with the `hidden` ATTRIBUTE and skagit-jackpot.js removes
   it only once slick reports somewhere to scroll to. `.skagit-jp-scrubber
   { display: none }` below is the pre-init state; the `--ready` rule at
   (0,2,0) is what reveals it, and it also outranks reset.css's
   `[hidden], template { display: none }` at (0,1,0) -- so without the third
   rule, marking the scrubber hidden in JS would do nothing at all. That rule
   is (0,3,0): an attribute selector scores in the SAME column as a class,
   which is why two classes plus [hidden] is 3 and not 2+1. No !important.

   The range is reached as `.skagit-jp-scrubber .skagit-jp-scrubber-range`,
   (0,2,0), rather than by doubling the class. reset.css's input list is
   date/email/number/password/search/tel/text/time/url and does NOT include
   range, so the (0,1,0) tie that forces doubled selectors elsewhere in this
   theme is not live here -- but a future reset that adds `[type=range]` would
   still land at (0,1,0) and still lose. */
.skagit-jp-scrubber { display: none; }

.skagit-jp-carousel-wrap--ready .skagit-jp-scrubber {
  position: relative;
  display: flex;
  align-items: center;
  max-width: min(96%, 720px);
  height: 6px;
  margin: var(--sk-space-md) auto 0;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-cloud);
  box-shadow: inset 0 1px 2px rgba(6, 25, 43, 0.12);
}

.skagit-jp-carousel-wrap--ready .skagit-jp-scrubber[hidden] { display: none; }

.skagit-jp-scrubber .skagit-jp-scrubber-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* The two vendor thumbs are SEPARATE rules on purpose. No engine understands
   both pseudo-elements, and a selector list containing one it cannot parse is
   dropped whole -- written as a list, every browser would render a track with
   no handle. */
.skagit-jp-scrubber .skagit-jp-scrubber-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 110px;
  height: 6px;
  border: 0;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-grad-brass);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.5);
  cursor: grab;
}

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

/* With the arrows gone this input is the ONLY keyboard route through the
   carousel, so its focus ring has to be unmissable. */
.skagit-jp-scrubber .skagit-jp-scrubber-range:focus-visible {
  outline: var(--sk-focus-width) solid var(--sk-focus-color);
  outline-offset: 8px;
  border-radius: var(--sk-radius-pill);
}

/* ---- 17.3 Phones --------------------------------------------------------
   Replaces what section 12.1 used to do for the arrow bar. A 110px handle on a
   360px track reads as a block, not a handle, and 96% of a phone screen leaves
   the ends of the track under the thumb of the hand holding it. */
@media (max-width: 47.99em) {
  .skagit-jp-carousel-wrap--ready .skagit-jp-scrubber { max-width: min(88%, 20rem); }

  .skagit-jp-scrubber .skagit-jp-scrubber-range::-webkit-slider-thumb { width: 72px; }

  .skagit-jp-scrubber .skagit-jp-scrubber-range::-moz-range-thumb { width: 72px; }
}

/* ---- 17.4 Reduced motion ------------------------------------------------
   The SIZE difference stays: it is layout, not motion, and it is the only
   thing marking which card is being read. Only the 480ms tween between the two
   sizes goes. Same specificity as 17.1 and later in the file, which is enough
   -- no !important, and section 13's list is earlier still and names nothing
   this matches. */
@media (prefers-reduced-motion: reduce) {
  .skagit-jp-carousel-wrap--ledger .slick-initialized .skagit-jp-slide {
    transition: none;
  }
}

/* ---- 17.5 Print ---------------------------------------------------------
   Section 15's print block hides `.skagit-jp-controls`, an element this theme
   no longer emits; the scrubber needs the same treatment or a paper archive
   carries a grey bar with a gold smear on it. The neighbour scale has to go
   too: section 16.5 unwraps the track so every winner prints, and 86%-scale
   cards in a wrapped grid overlap their own gutters. !important on both
   because 17.1 is (0,3,0) against this rule's (0,2,0), and because the whole
   of sections 15 and 16.5 already shout in print. */
@media print {
  .skagit-jp-scrubber { display: none !important; }

  .skagit-jp-carousel-wrap--ledger .skagit-jp-slide {
    transform: none !important;
    transition: none !important;
  }
}

/* ---- 17.6 Forced colours  (Windows High Contrast) -----------------------
   In forced-colours mode the UA drops background images, so --sk-grad-brass
   leaves the handle invisible on an invisible track. System colours only --
   deliberately NOT `forced-color-adjust: none`, which would keep the brass and
   defeat the reader's own choice. */
@media (forced-colors: active) {
  .skagit-jp-carousel-wrap--ready .skagit-jp-scrubber {
    border: 1px solid ButtonBorder;
    background: Canvas;
  }

  .skagit-jp-scrubber .skagit-jp-scrubber-range::-webkit-slider-thumb { background: Highlight; }

  .skagit-jp-scrubber .skagit-jp-scrubber-range::-moz-range-thumb { background: Highlight; }
}

/* ---- 17.7 Selectors this file still names that nothing emits any more ----
   Left in place rather than edited out. An unmatched selector costs a hash
   lookup; editing a multi-selector list in place risks mis-parsing it, and a
   list that fails to parse takes every rule in it down. Whoever next has a
   reason to touch these lists can retire them then:

     section 9.2   .skagit-jp-controls, .skagit-jp-carousel-wrap--ready
                   .skagit-jp-controls, .skagit-jp-controls-spacer,
                   .skagit-jp-btn and its :hover/:disabled/.slick-disabled,
                   .skagit-jp-btn svg,
                   .skagit-jp-carousel-wrap .skagit-jp-btn.slick-arrow,
                   .skagit-jp-btn[data-skagit-jp-playing=...] .skagit-jp-icon-*
     section 13    .skagit-jp-btn:hover:not(:disabled)
     section 14    .skagit-jp-btn  (in the forced-colours border list)
     section 15    .skagit-jp-controls  (in the print display:none list)
     section 16.2  every .skagit-jp-carousel-wrap--ledger .skagit-jp-btn rule
     section 16.3  both rules -- the .slick-arrow.slick-hidden fix and the
                   .skagit-jp-controls .skagit-jp-btn[hidden] fix

   Only `.skagit-jp-controls-status` was actually deleted, from section 9.2 and
   from section 12.1, because no template in this theme has EVER emitted a
   `span.skagit-jp-controls-status` -- those two rules were dead the day they
   were written, which is a different thing from newly unmatched. */