@charset "UTF-8";
/* ==========================================================================
   RESORT CALENDAR  [skagit_calendar]
   --------------------------------------------------------------------------
   A month grid on desktop, a chronological list on phones.

   WHY THE GRID IS HIDDEN ON PHONES
   Seven columns on a 360px screen leaves ~45px per cell before padding. That
   is below the 44px minimum touch target with nothing left for the date, so
   the grid would be both unreadable and untappable. The list carries exactly
   the same data and is the better shape for a narrow screen — it is not a
   degraded fallback, it is the right control at that width.
   ========================================================================== */

.skagit-cal {
  --cal-line: rgba(43, 48, 56, 0.12);
  --cal-ink: var(--sk-charcoal, #2B3038);
  --cal-soft: var(--sk-slate, #5B646F);
  --cal-promo: #7C6218;     /* brass  — 5.4:1 on white */
  --cal-event: #0B3D68;     /* navy   — 9.7:1 on white */
  --cal-today: rgba(212, 175, 55, 0.14);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--cal-ink);
}


/* ==========================================================================
   1. BAR
   ========================================================================== */
.skagit-cal__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-bottom: 0.75rem;
}

/* ---- The month name, with an arrow either side --------------------------
   The masthead the printed calendar has. It lives in the nav bar rather than
   above the grid so the two arrows flank it: the bar is already a centred flex
   row of prev / heading / next, so `< AUGUST 2026 >` falls out of the existing
   layout with no absolute positioning — which matters because the name changes
   width between "May 2027" and "September 2026" and anything pinned to fixed
   offsets would stop hugging the text.

   It is also the calendar's aria-live region: skagit-calendar.js rewrites it on
   every page, and that is the ONLY thing announcing the change to somebody who
   cannot see the grid redraw. Never hide this element.

   >>> UPPERCASED HERE, NOT IN PHP. <<<
   text-transform is presentation. The DOM keeps "August 2026", so the
   accessible name, the announcement and anything that copies the text stay in
   normal case. gmdate() uppercased in PHP would put shouting into the
   accessibility tree, where it is read letter by letter by some software. */
.skagit-cal__heading {
  margin: 0;
  min-width: 11ch;              /* stops the bar jumping between month names */
  text-align: center;
  font-family: var(--sk-font-display, Georgia, serif);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--sk-navy-900, #06192b);
}

/* The arrows sit level with the middle of the name rather than the top of it. */
.skagit-cal__bar {
  align-items: center;
}

/* BOTH CONTROLS ARE <button>, AND THE THEME PAINTS EVERY BUTTON NAVY.
   style.css declares, on `button, input[type=button], input[type=submit], .elementor-button`:
       button, input[type=button], input[type=submit], .elementor-button {
           background-color: var(--skagit-blue-dark) !important;
           color: #fff !important;
           border-color: var(--skagit-blue-dark) !important;
       }
   All three with `!important`, so SPECIFICITY CANNOT WIN — raising the
   selector from (0,1,0) to (0,2,0) changed nothing, because importance
   outranks specificity outright. Every day cell carrying an event rendered as
   a solid navy block and the month arrows as navy rectangles.

   An !important declaration can only be beaten by another !important
   declaration, so the three properties that rule sets — background-color,
   color, border-color — are restated the same way here, on the four button
   states (nav, nav:hover, day, day:hover). ONLY those three properties.
   Everything else in this file is a normal declaration, and no other rule
   here needs importance. */
.skagit-cal .skagit-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                  /* full touch target */
  height: 44px;
  padding: 0;
  border: 1px solid var(--cal-line);
  border-color: var(--cal-line) !important;
  border-radius: 50%;
  background-color: #fff !important;
  background-image: none;
  box-shadow: none;
  color: var(--cal-ink) !important;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.skagit-cal .skagit-cal__nav:hover:not(:disabled) {
  background-color: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: var(--cal-ink) !important;
}

.skagit-cal .skagit-cal__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.skagit-cal__legend {
  display: flex;
  /* WRAP IS FOR THE OPTIONAL NOTE, not for the two keys.
     The keys are short and have never needed a second line. The note — editable
     at Website Content > Page Headers — is a full-width flex item, and a flex
     container defaults to nowrap, so without this it would be squeezed onto the
     same line as the keys and shrunk to nothing. Two items that already fit are
     unaffected, so the legend with no note set is unchanged. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--cal-soft);
}

/* The note, when there is one. Full width so it takes its own line under the
   keys; `gap` supplies the space above it, which is why there is no top margin
   on the first paragraph. */
.skagit-cal__legendnote {
  flex: 1 0 100%;
  max-width: 46em;
  margin-inline: auto;
  text-align: center;
  line-height: 1.55;
}

.skagit-cal__legendnote p { margin: 0; }
.skagit-cal__legendnote p + p { margin-block-start: 0.5rem; }

.skagit-cal__key::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-inline-end: 0.4rem;
  border-radius: 50%;
  vertical-align: baseline;
}

.skagit-cal__key--promotion::before { background: var(--cal-promo); }
.skagit-cal__key--entertainment::before { background: var(--cal-event); }


/* ==========================================================================
   2. GRID
   ========================================================================== */
/* ---- The month name -----------------------------------------------------
   The masthead the printed calendar has and the coded one did not. Rendered
   server-side by inc/shortcode-calendar.php, so it is there with JavaScript off
   — unlike .skagit-cal__heading in the nav bar, which the script fills in from
   data-cal-label and which is empty until it runs.

   >>> UPPERCASED HERE, NOT IN PHP. <<<
   text-transform is a presentation instruction: the DOM, the accessible name
   the table borrows through aria-labelledby, and anything that copies the text
   all keep "August 2026". gmdate() uppercased in PHP would put shouting into
   all three, and some screen readers spell out all-caps words letter by letter.

   Display face and letter-spacing to match the site's other section titles; the
   grid below it is dense and needs something with weight above it. */
/* >>> HIDDEN FROM SIGHT, BUT IT MUST KEEP EXISTING. <<<
   The visible month name moved into the nav bar (§1) so the arrows could sit
   either side of it. This per-month heading stays because each <table> names
   itself with `aria-labelledby` pointing at its own id — twelve tables need
   twelve distinct names, and the single heading in the bar cannot supply them.
   Deleting it would leave every grid unnamed.

   Not `display: none` and not `visibility: hidden`: both drop the element out
   of the accessibility tree, and an aria-labelledby that resolves to a removed
   element names nothing at all. The clip-path pattern keeps it readable to
   assistive technology while taking no space — the same shape WordPress uses
   for .screen-reader-text. */
.skagit-cal__monthname {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skagit-cal__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* seven equal columns regardless of content */
}

/* ---- The weekday bar ----------------------------------------------------
   SUNDAY MONDAY TUESDAY... in solid black, as on the printed calendar. It was
   single letters — S M T W T F S — in grey with a hairline under them.

   THE BORDER IS THE SAME COLOUR AS THE FILL, on purpose. `border-collapse:
   collapse` merges the edges of adjacent cells, so seven black-filled cells
   with a --cal-line border between them would be seven blocks with grey seams.
   Matching the border to the background is what makes it read as one bar.

   THE SIZE IS CLAMPED BECAUSE THE LONGEST NAME HAS TO FIT AT THE NARROWEST
   WIDTH THE GRID IS EVER SHOWN AT. The grid appears from 700px up (below that
   it is display:none and .skagit-agenda takes over), which leaves about 94px
   per column inside the page container. "WEDNESDAY" at the floor of this clamp
   is roughly 65px, so it fits with room to spare; at 0.75rem with the old
   0.1em tracking it did not. No nowrap: if a future container is narrower
   still, a wrapped name is a better failure than a clipped one. */
.skagit-cal__grid th {
  padding: 0.55rem 0.3rem;
  border: 1px solid var(--sk-obsidian, #0E1116);
  background: var(--sk-obsidian, #0E1116);
  font-size: clamp(0.625rem, 0.45rem + 0.35vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sk-white, #fff);
}

/* THE CELL IS TALLER THAN THE COLUMN IS WIDE, ON PURPOSE. Changed 1 Sep 2026.
   It used to be clamp(96px, 11vw, 148px), which made a 200px column 148px tall.

   EVERY PIECE OF CALENDAR ARTWORK IS SQUARE. Measured on the live site: all of
   it is the 300x300 "Web Square" social crop, and these are graphics with the
   promotion's own name set into the middle of them. `background-size: cover` on
   a landscape box therefore threw away the top and bottom of every one:

       9 Sep  Hawks for the Holidays   box 2.05:1   48% of the artwork visible
      19 Sep  Richie                   box 1.77:1   57%
       8 Sep  Million Dollar Football  box 1.53:1   65%
       5 Sep  Saturday Spin Fever      box 1.36:1   74%

   The busier the day the shorter the hero band, so the days with most to say
   were cropped hardest, and the promotion's name was the first thing to go.

   WHY 14.5vw AND NOT SIMPLY A SQUARE CELL. A square cell would be right if the
   artwork were the whole cell, but a multi-item day spends 17px per ribbon
   under it. The hero band is square when the CELL is about 1.14x the column,
   and 14.5vw tracks that: at a 1550px viewport the column is 200px and this
   resolves to 225px. Swept 200-240px against the real September data and the
   worst-cropped day peaks at 87% around 225-230px, falling away on both sides
   — below it the busy days crop, above it the single-item days start cropping
   at the sides instead.

   The floor moved 96 -> 108px for the same reason at the narrow end. Measured
   at a 900px viewport: worst-case artwork goes from 40% visible to 67%.

   THE COST IS HEIGHT, AND IT IS THE POINT. A September grid goes from 779px to
   about 1160px. The owner asked for bigger boxes rather than smaller artwork.

   It has to stay a LENGTH and never become `auto`: the banner slot below sets
   height:100% down its chain, and a percentage height inside a table cell
   resolves against the cell's own specified height. */
.skagit-cal__day,
.skagit-cal__pad,
.skagit-cal__banner {
  height: clamp(96px, 12.9vw, 205px);
  padding: 0;
  border: 1px solid var(--cal-line);
  vertical-align: top;
  position: relative;
}

.skagit-cal__pad { background: rgba(43, 48, 56, 0.02); }

/* ---- The banner slots ---------------------------------------------------
   One cell spanning whatever the month leaves free before the 1st or after the
   last day. Placed at Website Content > Calendar Banners; when nothing is
   placed, inc/shortcode-calendar.php emits the plain pads above instead and
   none of this applies.

   The same tint as a pad sits underneath, so a transparent PNG lands on the
   background the blank squares would have had rather than on white.

   `overflow: hidden` matters: the cell's height is a MINIMUM as far as a table
   is concerned, so an image that ends up taller would stretch the whole row and
   knock the first week out of line with the rest of the month. */
.skagit-cal__banner {
  background: rgba(43, 48, 56, 0.02);
  overflow: hidden;
}

/* height:100% down the chain, so the artwork fills whatever the row gives it.
   A percentage height inside a table cell resolves against the cell's own
   specified height, which is the clamp() above — this is why that height has to
   stay a length and not become `auto`. */
.skagit-cal__bannerlink {
  display: block;
  width: 100%;
  height: 100%;
}

/* cover, not contain: the slot is 2-6 cells wide and one cell tall depending on
   the month, so no single crop fits every shape. Cropping from the centre keeps
   the middle of the artwork — which is where a banner puts its words — and
   never letterboxes. */
.skagit-cal__bannerimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.skagit-cal__num {
  display: block;
  padding: 0.4rem 0.5rem 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--cal-soft);
}

.skagit-cal__day.is-today { background: var(--cal-today); }

.skagit-cal__day.is-today .skagit-cal__num {
  font-weight: 700;
  color: var(--cal-ink);
}

/* A day with something on is a button filling the cell — the whole square is
   the target, not just the number. */
.skagit-cal .skagit-cal__daybtn {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-color: transparent !important;
  border-radius: 0;
  background-color: transparent !important;
  background-image: none;
  box-shadow: none;
  color: var(--cal-ink) !important;
  font: inherit;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: background 150ms ease;
}

.skagit-cal .skagit-cal__daybtn:hover {
  background-color: rgba(212, 175, 55, 0.10) !important;
  color: var(--cal-ink) !important;
}

.skagit-cal__daybtn .skagit-cal__num { color: var(--cal-ink); font-weight: 600; }

/* ---- The artwork tile ---------------------------------------------------
   The day cell shows the promotion's own image with its name over it. Dots
   were the first attempt and carried no information — a coloured dot tells
   you something is on but not what, so every day still had to be clicked to
   find out. The image does the work a calendar is for: scanning.

   The scrim follows the site-wide text-over-image rule (see
   skagit-components.css): transparent at the top so the artwork reads, opaque
   only under the words. */
/* ---- The stack ----------------------------------------------------------
   A day can have more than one thing on, and both have to be visible. The
   stack fills the cell and splits it evenly between however many events the
   day carries (capped at three by the template), each row keeping its own
   artwork and name. One event gets the whole cell, so the common case looks
   exactly as it did. */
.skagit-cal__stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

.skagit-cal__row {
  position: relative;
  flex: 1 1 0;
  min-height: 0;                 /* without this the rows refuse to shrink */
  overflow: hidden;
}

/* A hairline between stacked events so two dark photos do not merge into one
   image. Only between — not above the first or below the last. */
.skagit-cal__row + .skagit-cal__row {
  border-block-start: 1px solid rgba(255, 255, 255, 0.28);
}

/* >>> contain, NOT cover. THE WHOLE PICTURE, ALWAYS. <<< Changed 1 Sep 2026.
   Every calendar graphic is a square 300x300 social crop and the tile box never
   is, because a table row shares one height across the week while the ribbons
   under each hero eat a different amount of it. Measured with cover:

     1 item   199x224   11% cut off the sides
     2 items  199x207    4% off the sides
     3 items  199x190    5% off the top and bottom
     4 items  199x173   13% off the top and bottom

   Raising the cell height only moved the loss from one axis to the other, and
   NO single height can square all four shapes. contain removes the question:
   the picture is never cut, whatever the day is carrying.

   The 12 to 13px strip that leaves is filled by a background-color set inline
   per item in inc/shortcode-calendar.php, sampled from the artwork itself by
   skagit_cal_ribbon_color() — the same value its ribbon uses. That is what keeps
   this from reading as a photo floating on a grey card. */
.skagit-cal__thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.92;
}

/* >>> THE SCRIM EXISTS FOR THE CAPTION, SO IT ONLY APPEARS WITH ONE. <<<
   It used to be unconditional and to start its ramp at 34% of the tile, ending
   at 0.92 opacity. On artwork that carries its own words that was actively
   destructive: on the Queensryche tile it put the darkest part of the wash
   directly over "SATURDAY OCTOBER 10," printed in the picture.

   Most tiles now have no caption at all, so most have no scrim at all and show
   the artwork exactly as the designer drew it. Where a caption IS shown the
   gradient is a band behind the text rather than a wash over the picture: fully
   transparent until 62%, which is just above a two-line caption at these sizes,
   so nothing above the words is dimmed. */
.skagit-cal__row--captioned .skagit-cal__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(4, 16, 28, 0) 0%,
      rgba(4, 16, 28, 0) 62%,
      rgba(4, 16, 28, 0.62) 84%,
      rgba(4, 16, 28, 0.9) 100%);
}

/* Records with no artwork get the brand ground rather than a blank cell. */
.skagit-cal__thumb--none {
  background: linear-gradient(160deg, #16354F 0%, #0B2036 100%);
}

.skagit-cal__thumb--none.skagit-cal__thumb--promotion {
  background: linear-gradient(160deg, #6B5415 0%, #3E3009 100%);
}

.skagit-cal__tiletitle {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  padding: 0.3rem 0.4rem 0.35rem;
  pointer-events: none;

  display: -webkit-box;
  -webkit-line-clamp: 2;        /* two lines, then ellipsis */
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* >>> THE TWO LINES ABOVE WERE NEVER HAPPENING. <<< Fixed 1 Sep 2026.
     `white-space` INHERITS, and reset.css sets `nowrap` on the button this
     title lives inside — the same `[type="button"]` tie that has caught this
     theme twice before. So the clamp had nothing to clamp: the name ran on one
     line and was cut off mid-word at the cell edge, with `text-overflow`
     resolving to `clip` rather than an ellipsis, so there was not even a "…"
     to show it had been truncated. "Richie and the High Street Rockers"
     measured 211px of text in a 200px box and rendered as "...Rocker".

     No specificity fight is needed. An inherited value loses to any declaration
     applied directly to the element, so naming it here is enough; this is not
     a case for doubling the selector.

     `anywhere` rather than `break-word` so a single long word cannot push the
     box wider than the cell either. */
  white-space: normal;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(3, 10, 18, 0.8);
}

/* Two or three to a cell means each band is 50px or 33px tall, so the type
   drops a size to clear the band. FOR A TWO-UP CELL THE LINE COUNT DID NOT
   HAVE TO DROP WITH IT, and dropping it is what clipped names on a tablet.

   The numbers, taken at the narrowest width the grid is ever shown — 700px,
   where the cell is at the 96px floor of `height: clamp(96px, 11vw, 148px)`
   (§2) and a column is about 93px wide. One clamped line is roughly 16
   characters at these sizes, so "Red, White & Win Saturdays" rendered as
   "Red, White & Wi…" while 17px of the band sat empty underneath it. Two
   lines measure about 30px in the 47px band of a two-up cell: they fit at the
   floor and at every width above it, which is the whole point — nothing here
   is width-conditional.

   THREE-UP IS DELIBERATELY LEFT AT ONE LINE. Its band is 31px at the floor and
   two lines measure about 26px, which is 5px of headroom; and the tile scrim
   (`.skagit-cal__thumb::after` above) only reaches full opacity over the
   bottom fifth of a band, so a second line there would sit on nearly bare
   artwork. The dev calendar renders no `data-count="3"` day at all right now,
   so there is nothing to check it against either. One line stays until there
   is.

   NOT A BREAKPOINT CHANGE. The grid/agenda boundary stays at 699/700 (§5 and
   §10). Moving it to "fix" this would hand the phone layout to every desktop
   window under 900px, which is not what was wrong. */
.skagit-cal__daybtn[data-count="2"] .skagit-cal__tiletitle {
  -webkit-line-clamp: 2;
  font-size: 0.625rem;
  padding-block: 0.2rem;
}

/* THE FIRST BAND IS THE ONE EXCEPTION AND STAYS AT ONE LINE.
   `.skagit-cal__num` is absolutely positioned at top:0 of the whole button at
   z-index 2 — ABOVE the titles, white and bold — and its digits reach about
   20px down. The title is anchored to the BOTTOM of its band, so a two-line
   title in a 47px first band would begin at about 17px and its first line
   would render underneath those digits: white bold on white bold. That is
   precisely the failure recorded in the note above `.skagit-cal__num`
   ("directly over the first event's name once the cell started stacking
   two"). One line puts the title's top edge at about 29px, clear of it.

   The second band has no number over it, which is why it is the one that gets
   the extra line back. */
.skagit-cal__daybtn[data-count="2"] .skagit-cal__row:first-child .skagit-cal__tiletitle {
  -webkit-line-clamp: 1;
}

.skagit-cal__daybtn[data-count="3"] .skagit-cal__tiletitle {
  -webkit-line-clamp: 1;
  font-size: 0.5625rem;
  padding: 0.15rem 0.3rem;
  letter-spacing: 0;
}

/* The first band sits under the date number, so its name is pushed clear. */
.skagit-cal__daybtn[data-count="3"] .skagit-cal__row:first-child .skagit-cal__tiletitle {
  padding-inline-start: 0.3rem;
}

.skagit-cal__more {
  position: absolute;
  z-index: 2;
  right: 0.3rem;
  bottom: 0.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(4, 16, 28, 0.72);
  color: #F0D480;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.5;
  pointer-events: none;
}

/* THE DATE IS PINNED TO THE CORNER, NOT LAID OUT.
   A <button> centres its content box vertically no matter what `display` it
   is given, so the digit was rendering 56px down a 140px cell — dead centre,
   directly over the first event's name once the cell started stacking two.
   `position: relative` did nothing about it because the element was already
   where the button had put it. Taking it out of flow is the only fix that
   does not depend on the button's internal layout. */
.skagit-cal .skagit-cal__daybtn { position: relative; }

.skagit-cal .skagit-cal__daybtn .skagit-cal__num {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(3, 10, 18, 0.9);
}


/* ==========================================================================
   3. DAY DETAIL
   Anchored to its cell and allowed to escape the table, so it is never
   clipped by a row boundary.
   ========================================================================== */
.skagit-cal__pop {
  position: absolute;
  z-index: 5;
  inset-inline-start: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 280px;
  max-width: min(400px, 86vw);
  padding: 0;

  /* A DAY WITH TWO EVENTS OVERFLOWS THE SCREEN.
     One card is about 500px tall; two made a 1011px panel inside a 900px
     window, and `overflow: hidden` meant the second card's dates and links
     were unreachable — no scrollbar, no clipping cue, just gone. Capped to
     most of the viewport and allowed to scroll inside itself. */
  max-height: 78vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--cal-line);
  border-radius: var(--sk-radius-md, 10px);
  background: #fff;
  box-shadow: 0 12px 32px -8px rgba(6, 25, 43, 0.28);
  text-align: start;
}

/* Days in the last two columns open leftwards so the panel stays on screen. */
.skagit-cal__day:nth-child(6) .skagit-cal__pop,
.skagit-cal__day:nth-child(7) .skagit-cal__pop {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}

.skagit-cal__popdate {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cal-soft);
}

.skagit-cal__pop ul,
.skagit-cal__listday ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skagit-cal__item {
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid transparent;
  line-height: 1.4;
}

.skagit-cal__item + .skagit-cal__item { margin-block-start: 0.6rem; }

.skagit-cal__item--promotion { border-inline-start-color: var(--cal-promo); }
.skagit-cal__item--entertainment { border-inline-start-color: var(--cal-event); }

.skagit-cal__item a {
  font-weight: 600;
  text-decoration: none;
  color: var(--cal-ink);
}

.skagit-cal__item a:hover,
.skagit-cal__item a:focus-visible { text-decoration: underline; }

.skagit-cal__time {
  display: block;
  font-size: 0.8125rem;
  color: var(--cal-soft);
}


/* ==========================================================================
   4. LIST
   ========================================================================== */
.skagit-cal__list { margin-block-start: clamp(2rem, 4vw, 3rem); }

.skagit-cal__listhead {
  margin: 0 0 1rem;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
}

.skagit-cal__listitems { margin: 0; padding: 0; list-style: none; }

.skagit-cal__listday {
  display: flex;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--cal-line);
}

.skagit-cal__listdate {
  flex: 0 0 3.25rem;
  margin: 0;
  text-align: center;
  line-height: 1.15;
}

.skagit-cal__listdow,
.skagit-cal__listmon {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cal-soft);
}

.skagit-cal__listnum {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.skagit-cal__empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--cal-soft);
}


/* ==========================================================================
   5. BREAKPOINT
   ========================================================================== */
@media (max-width: 699px) {
  .skagit-cal__month,
  .skagit-cal__legend { display: none; }

  /* With no grid to page through, the bar has nothing to control. */
  .skagit-cal__bar { display: none; }

  /* Show every month in the list, not just the selected one. */
  .skagit-cal__listday[hidden] { display: flex !important; }
}

@media (min-width: 700px) {
  /* THE LIST IS PHONE-ONLY.
     It used to sit under the grid on every screen as an agenda. With the day
     tiles now carrying artwork and names, the grid says everything the list
     did and the duplicate below it was just noise — removed on request.
     It stays for phones, where the seven-column grid cannot be used at all. */
  .skagit-cal__list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skagit-cal__nav,
  .skagit-cal__daybtn { transition: none; }
}

/* ---- Popup cards --------------------------------------------------------
   The popup carries the promotion's artwork, its own words, when it runs and
   where to go next — pulled from the record itself, so it can never disagree
   with the promotion page. */
.skagit-cal__pophead {
  /* Sticky because the panel scrolls now — the close control has to stay
     reachable when a two-card day is scrolled to the bottom, otherwise the
     only way out is the Escape key. Opaque, or cards show through it. */
  position: sticky;
  top: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-bottom: 1px solid var(--cal-line);
  background: #F7F7F8;
}

.skagit-cal__pophead .skagit-cal__popdate { margin: 0; }

.skagit-cal .skagit-cal__popclose {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-color: transparent !important;
  border-radius: 50%;
  background-color: transparent !important;
  color: var(--cal-soft) !important;
  font-size: 0.85rem;
  cursor: pointer;
}

.skagit-cal .skagit-cal__popclose:hover {
  background-color: rgba(43, 48, 56, 0.08) !important;
  color: var(--cal-ink) !important;
}

.skagit-cal__card + .skagit-cal__card { border-top: 1px solid var(--cal-line); }

/* >>> THE WHOLE TILE, ALWAYS. <<<
   This was `aspect-ratio: 16/9; object-fit: cover`, with a second rule taking it
   to 21/9 when a day carried two items. Every promotion and entertainment tile
   on this site is SQUARE (measured: 12 of 12, at 2560, 1667 or 1080 square), so
   16/9 threw away about 44% of each one and 21/9 about 57%. The artwork carries
   the offer name to the edge of the canvas, so what got cropped was the wording.
   That is the same defect the client reported on the promotion cards, and it is
   the most likely thing behind "the calendar has formatting issues".

   1/1 with `contain` shows all of it. For today's square art the two are
   identical with no letterboxing; `contain` rather than `cover` is deliberate
   insurance, so that a non-square upload later letterboxes instead of silently
   losing its edges. The height cap keeps a two-item day scrollable rather than
   pushing the second card far below the fold, which is what the 21/9 rule was
   really for. */
.skagit-cal__cardimg {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 46vh;
  object-fit: contain;
  background: #fff;
}

.skagit-cal__cardbody { padding: 0.85rem 1rem 1rem; }

.skagit-cal__kind {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.skagit-cal__card--promotion .skagit-cal__kind { color: var(--cal-promo); }
.skagit-cal__card--entertainment .skagit-cal__kind { color: var(--cal-event); }

.skagit-cal__cardtitle {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.skagit-cal__cardtitle a { color: var(--cal-ink); text-decoration: none; }
.skagit-cal__cardtitle a:hover { text-decoration: underline; }

.skagit-cal__cardwhen {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.2rem;
  font-size: 0.8125rem;
  color: var(--cal-soft);
}

.skagit-cal__cardwhen i { color: var(--cal-promo); }

.skagit-cal__carddesc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cal-ink);
}

.skagit-cal__cardlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
}

.skagit-cal__cta {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #B08D28 0%, #D4AF37 18%, #F0D480 52%, #D4AF37 100%);
  color: #2B1B00;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.skagit-cal__cta--alt {
  background: none;
  border: 1px solid var(--cal-line);
  color: var(--cal-ink);
}

.skagit-cal__cta:hover { filter: brightness(1.05); }
.skagit-cal__cta--alt:hover { border-color: rgba(212, 175, 55, 0.6); }

/* ==========================================================================
   6. THE POPUP FLIPS TO STAY ON SCREEN
   --------------------------------------------------------------------------
   skagit-calendar.js measures the panel once it is open and adds one of these
   when it would otherwise overflow. Defaults (opens down, centred) live in §3;
   these are only the corrections.
   ========================================================================== */

.skagit-cal__pop.opens-up {
  top: auto;
  bottom: 100%;
}

/* Pinned to the cell's leading edge for days in the first column, trailing
   edge for the last — the §3 rule already does this for columns 6 and 7 by
   position, but that cannot know about a narrow window. */
.skagit-cal__pop.opens-start {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform: none;
}

.skagit-cal__pop.opens-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}


/* ==========================================================================
   7. MULTI-DAY RUNS READ AS ONE THING
   --------------------------------------------------------------------------
   A promotion running 1–25 July painted twenty-five identical tiles: the same
   artwork and the same name, filling four rows of the month. It made the
   calendar look like it had one promotion on it, and it buried the days that
   genuinely had something different.

   So only the FIRST day of a run — and the first day of each week, so a run
   re-announces itself on every row — shows the full plate. Every other day in
   the run keeps the artwork as a quiet tint with no repeated title, which
   still marks the day as part of the run without saying the same words seven
   times across a row.
   ========================================================================== */

/* ---- OVERRIDDEN 28 July 2026, at the owner's instruction ----------------
   The dimming described above was reported as looking broken rather than
   deliberate: a guest reading the month sees most cells greyed out and takes
   it for a rendering fault, not a design decision. Every day in a run now
   renders at full strength, matching the day that starts it.

   The original concern is still real — a run of twenty-five days now shows
   twenty-five identical plates — but that is a scheduling problem, not a
   styling one. A promotion that only runs on Saturdays should carry Saturday
   dates rather than an unbroken range; fixing that at the data end removes
   the repetition without hiding anything from the guest. */
.skagit-cal__row--cont .skagit-cal__thumb {
  opacity: 1;
  filter: none;
}

/* The name is not repeated, but the run still needs to read as continuous, so
   a brass rule runs along the bottom of every continuation cell. Butted to
   both edges, so consecutive days join into one line across the week. */
.skagit-cal__row--cont::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 6px;
  height: 3px;
  background: var(--sk-grad-brass, linear-gradient(90deg, #B08D28, #F0D480));
  opacity: 0.85;
}

/* The title is shown on continuation days too, so every cell in a run reads
   the same as the day that starts it. It was previously hidden visually and
   left for screen readers only; now that the artwork is at full strength, a
   plate with no name on it would look like the label had failed to load. */
.skagit-cal__row--cont .skagit-cal__tiletitle {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}


/* ==========================================================================
   8. THE NOTES UNDER THE GRID
   Three short sections that give the calendar some context. Kept to a card
   row so they read as supporting notes rather than as more page.
   ========================================================================== */

.skagit-cal-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-block: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 56em) {
  .skagit-cal-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.skagit-cal-note {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--cal-line);
  border-radius: var(--sk-radius-lg, 14px);
  /* Barely off-white, so the cards separate from the page without becoming
     three grey boxes. */
  background: rgba(255, 255, 255, 0.72);
}

.skagit-cal-note__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.25;
  color: var(--cal-ink);
}

.skagit-cal-note p {
  margin: 0 0 0.7rem;
  color: var(--cal-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.skagit-cal-note p:last-child { margin-bottom: 0; }

.skagit-cal-note__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skagit-cal-note__list li {
  padding-block: 0.5rem;
  border-block-start: 1px solid var(--cal-line);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.skagit-cal-note__list li:first-child { border-block-start: 0; }

.skagit-cal-note__when {
  display: block;
  color: var(--cal-soft);
  font-size: 0.8125rem;
}

.skagit-cal-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
}


/* ==========================================================================
   9. THE CENTRED SHEET
   --------------------------------------------------------------------------
   The last resort when a day's panel fits neither below nor above its cell —
   see place() in skagit-calendar.js. Fixed to the viewport rather than the
   cell, so it is always wholly on screen whichever row was clicked.
   ========================================================================== */

/* SPECIFICITY, DELIBERATELY.
   `.skagit-cal__day:nth-child(6|7) .skagit-cal__pop` in §3 is (0,3,0) and sets
   `transform: none` so the last two columns open leftwards. A plain
   `.skagit-cal__pop.is-centred` is (0,2,0), so it lost that fight and the
   centring transform never applied — day 31 got the class, went `position:
   fixed`, and then sat un-centred at 450px with 270px hanging off the bottom.
   Four classes puts this above every column rule. */
.skagit-cal .skagit-cal__day .skagit-cal__pop.is-centred {
  position: fixed;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);

  /* >>> THE HEADER IS STICKY AT z-index 9999. THIS PANEL WAS AT 60. <<<
     A two-event day makes a ~672px sheet. Centred on the WHOLE viewport it
     started at 64px in an 800px window — 61px of it, including the close
     button, underneath the navigation. And because 60 loses to 9999 the header
     did not merely overlap it, it took the clicks: a press on the close button
     landed on `sk-mega-toggle`. The panel could be opened and not closed.

     Two changes, and both are needed. Raising the z-index alone would make the
     button clickable while still burying it under the menu; moving it below
     the header alone would leave the stacking wrong the moment anything else
     grows. */
  z-index: 10000;

  /* Centre inside the band BELOW the sticky header, not the whole window.
     `top` + `bottom` + `margin-block: auto` centres the sheet in whatever room
     is left; when it is too tall it simply fills the band and scrolls inside
     itself (overflow-y is on the base rule).

     --cal-safe-top is written by place() in skagit-calendar.js from the
     header's MEASURED height. It is deliberately not --sk-header-h: that
     variable says 66px while the header actually renders 125px, so anything
     trusting it is wrong by half the header. */
  top: calc(var(--cal-safe-top, 0px) + 8px);
  bottom: 8px;
  margin-block: auto;
  height: fit-content;

  width: min(420px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - var(--cal-safe-top, 0px) - 16px));
}

/*
 * NO SCRIM. The 42% dark wash that used to be drawn here is gone.
 *
 * It was meant to stop a detached sheet looking like it floated over the grid by
 * accident, and it half worked — which was the problem. Being a `z-index: -1`
 * pseudo-element it lives inside the PANEL's own stacking context, so it could
 * only ever dim what sits below that context. Anything on the page with a
 * stacking context of its own — the promotion cards, which carry transforms —
 * painted straight over it. The result was a page dimmed in patches: grey down
 * to the middle of a card and full brightness below it, which reads as a
 * rendering fault rather than a modal.
 *
 * Making the scrim cover everything would mean moving it out of the panel into
 * a real overlay element at the top of the stack, with the open/close
 * bookkeeping that implies. The owner does not want the page dimmed at all, so
 * the sheet simply opens clean and earns its separation from ELEVATION instead:
 * a deeper shadow and a defined edge, below.
 */
.skagit-cal .skagit-cal__day .skagit-cal__pop.is-centred {
  box-shadow:
    0 24px 60px rgba(6, 25, 43, 0.45),
    0 4px 14px rgba(6, 25, 43, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ==========================================================================
   ENDED ENTRIES
   Finished promotions stay on the days they actually ran — a calendar is a
   record — but they are visibly past and carry no controls. Nothing here
   hides anything: the dimming says "over", it does not say "gone".
   ========================================================================== */

/* A day where everything has finished. Dimmed as a whole so a past week reads
   as past without having to read each tile. */
.skagit-cal .skagit-cal__day--ended .skagit-cal__thumb {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.skagit-cal .skagit-cal__day--ended .skagit-cal__tiletitle {
  color: rgba(255, 255, 255, 0.72);
}

/* The badge on the popup card. */
.skagit-cal__ended {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: rgba(120, 124, 130, 0.16);
  color: #5c636b;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/*
 * The dead CTA. Styled as plainly disabled rather than as a button, because a
 * thing that looks like a button and does nothing is worse than no button —
 * the same reason the Happy Hour tile is not a card.
 */
.skagit-cal__cta--dead {
  background: transparent;
  border: 1px dashed rgba(92, 99, 107, 0.45);
  color: #5c636b;
  cursor: default;
  pointer-events: none;
}

/* A past occurrence reads as secondary — but it IS still a link, so it has to
   look like one.

   >>> THIS RULE USED TO SAY "so nothing reads as clickable". <<<
   That was correct when a finished item was unlinked. The owner since decided a
   past date keeps its link, because `ended` now means "this DATE has passed",
   and a past Monday of a series running all month belongs to a promotion that
   is still on — withholding the link hid a live offer.

   Muting the colour without restoring the underline left the worst of both: an
   anchor styled to look inert. The colour stays (past is secondary); the
   underline comes back (it is clickable, and must say so). */
.skagit-cal__listended,
.skagit-cal__day--ended .skagit-cal__cardtitle a,
.skagit-cal__day--ended .skagit-cal__cardtitle {
  color: #5c636b;
}

a.skagit-cal__listended,
.skagit-cal__day--ended .skagit-cal__cardtitle a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a.skagit-cal__listended:hover,
a.skagit-cal__listended:focus-visible,
.skagit-cal__day--ended .skagit-cal__cardtitle a:hover,
.skagit-cal__day--ended .skagit-cal__cardtitle a:focus-visible {
  color: #2f3439;
}


/* ==========================================================================
   10. THE PHONE AGENDA
   --------------------------------------------------------------------------
   A list running forward from today, one row per event, each with the
   promotion's own artwork. Rendered server-side alongside the grid — the
   server cannot know the viewport, so CSS picks. Doing it here rather than in
   JS means no dependency and no layout shift as the page settles.

   >>> THIS IS THE LAST SECTION IN THE FILE, DELIBERATELY. <<<
   Nothing unconditional follows it, so nothing can beat the media query below.
   That mistake has been made twice on this site (see §1 and §9): a media query
   is worth ZERO specificity, so a plain later rule with the same selector wins
   at every width. If you append after this point, check what you are undoing.
   ========================================================================== */

.skagit-cal__agenda { display: none; }

/* THE SAME 699/700 BOUNDARY §5 ALREADY USES — not a new one.
   Two breakpoints would eventually disagree about what "mobile" means, and the
   window between them would show both layouts or neither. */
@media (max-width: 699px) {
  /* The grid container is .skagit-cal__month, and §5 already hides it at this
     exact width along with the month bar and the legend. Restated here only so
     that the pairing is visible from the layout that replaces it — if §5 ever
     moves, this line is what stops the grid and the agenda both rendering. */
  .skagit-cal__month { display: none; }

  .skagit-cal__agenda { display: block; }

  /* >>> THE OLD "WHAT'S ON" LIST IS THE LAYOUT THIS REPLACES. <<<
     §5/§4 made .skagit-cal__list phone-only — it was the answer to the grid
     being unusable at this width. The agenda is now that answer, and it is the
     better one: rows carry artwork, it starts at today rather than at the top
     of the window, and each row is a link to the promotion rather than a bare
     title. Leaving both would stack two lists of the same events on a 360px
     screen. Hidden, not deleted — the markup still renders, so this is one
     declaration to revert if the collapsed multi-day runs are wanted back. */
  .skagit-cal__list { display: none; }
}

.skagit-agenda { list-style: none; margin: 0; padding: 0; }

.skagit-agenda__day { margin: 0 0 1.5rem; }

.skagit-agenda__date {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cal-soft);
}

.skagit-agenda__date.is-today {
  color: var(--cal-ink);
  font-weight: 700;
}

.skagit-agenda__items { list-style: none; margin: 0; padding: 0; }

.skagit-agenda__item + .skagit-agenda__item { margin-block-start: 0.5rem; }

.skagit-agenda__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  border: 1px solid var(--cal-line);
  border-radius: var(--sk-radius-md, 10px);
  color: var(--cal-ink);
  text-decoration: none;
}

.skagit-agenda__link:hover,
.skagit-agenda__link:focus-visible { background: var(--cal-today); }

.skagit-agenda__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--sk-radius-sm, 8px);
  background-size: cover;
  background-position: center;
}

/* Records with no artwork get their own kind's colour rather than a hole,
   matching the legend dots above the grid. */
.skagit-agenda__thumb--promotion { background-color: var(--cal-promo); }
.skagit-agenda__thumb--entertainment { background-color: var(--cal-event); }

.skagit-agenda__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;                 /* or a long title refuses to wrap or ellipsis */
}

.skagit-agenda__title { font-weight: 600; }

.skagit-agenda__time {
  font-size: 0.85rem;
  color: var(--cal-soft);
}

.skagit-agenda__ended {
  margin-inline-start: auto;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--cal-line);
  color: var(--cal-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Finished, not gone — the same rule the grid follows. The row keeps its link,
   because on a phone the promotion page is the only place the full story is. */
.skagit-agenda__item.is-ended .skagit-agenda__thumb,
.skagit-agenda__item.is-ended .skagit-agenda__text { opacity: 0.55; }

/* =========================================================================
   ONE HERO, THE REST AS RIBBONS.
   Added 31 Aug 2026 to match the printed calendars marketing hand out, which
   are the design of record. See the long note in inc/shortcode-calendar.php.

   The rules above still describe an evenly SPLIT stack. That behaviour is
   gone: the template now puts exactly one event in .skagit-cal__stack, so
   `flex: 1 1 0` on the single .skagit-cal__row gives it the whole cell and the
   splitting rules never have anything to split. They are left in place rather
   than deleted because a `[data-count]` rule set below still leans on them,
   and because reverting is then a template change on its own.
   ========================================================================= */

/* >>> THE RIBBONS RIDE ON THE ARTWORK, THEY NO LONGER SHORTEN IT. <<<
   Reversed 1 Sep 2026, and it reverses a deliberate earlier decision, so here
   is why.

   These rules used to inset the stack by one ribbon height per ribbon, to stop
   a bar sitting over the artwork's own lettering. The side effect was that the
   artwork box became a DIFFERENT SHAPE on every kind of day: 199x224 with no
   ribbons, 199x173 with three. Every graphic the property produces is a square
   300x300 social crop, so no single cell height could ever fit them, and
   `cover` lost 11% off the sides of a quiet day and 13% off the top of a busy
   one.

   Letterboxing with `contain` was tried first and rejected on sight: it left
   bars on different axes on different days, which read as wonky across a grid.

   With the inset gone the box is the full cell on every day, the cell is square
   because the column is, and cover fills it edge to edge cutting nothing.
   Measured across all four day types: 0% of the artwork lost.

   THE TRADE, STATED PLAINLY. A ribbon now covers the bottom of the picture:
   nothing on a single-item day, 8% with one ribbon, 17% with two, 26% with
   three. The ribbon is the only thing naming an item that did not win the
   artwork, so it cannot simply be dropped, and covering a strip of one picture
   is a smaller loss than permanently cropping every picture.

   Kept as explicit `bottom: 0` rather than deleted, so the intent is legible:
   the ribbon count deliberately does not change the artwork box any more. */
.skagit-cal__daybtn:has(.skagit-cal__ribbon) .skagit-cal__stack,
.skagit-cal__daybtn:has(.skagit-cal__ribbon + .skagit-cal__ribbon) .skagit-cal__stack,
.skagit-cal__daybtn:has(.skagit-cal__ribbon + .skagit-cal__ribbon + .skagit-cal__ribbon) .skagit-cal__stack {
  bottom: 0;
}

.skagit-cal__ribbons {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Small caps, white, on the promotion's own colour — the print calendar's
   treatment exactly. Fixed height so a second event costs a known strip
   rather than a share of the artwork, which is the whole point of the
   rebuild. */
.skagit-cal__ribbon {
  display: block;
  min-height: 1.05rem;
  padding: 0.14rem 0.34rem;
  overflow: hidden;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Hairline between two ribbons so adjacent similar colours stay countable. */
.skagit-cal__ribbon + .skagit-cal__ribbon {
  border-block-start: 1px solid rgba(255, 255, 255, 0.35);
}

/* >>> THE SPLIT-CELL TYPE SIZES MUST BE UNDONE. <<<
   The [data-count="2"] and [data-count="3"] rules above shrink the tile title
   because the row used to be a half or a third of the cell. The hero is now
   always the full cell, so those rules would shrink a full-size title for no
   reason on exactly the busy days this rebuild exists to make readable.
   data-count still counts the events on the day, so it is overridden here
   rather than removed, and the popup can keep using it. */
.skagit-cal__daybtn[data-count="2"] .skagit-cal__tiletitle,
.skagit-cal__daybtn[data-count="3"] .skagit-cal__tiletitle,
.skagit-cal__daybtn[data-count="4"] .skagit-cal__tiletitle,
.skagit-cal__daybtn[data-count="2"] .skagit-cal__row:first-child .skagit-cal__tiletitle,
.skagit-cal__daybtn[data-count="3"] .skagit-cal__row:first-child .skagit-cal__tiletitle {
  font-size: 0.6875rem;
  -webkit-line-clamp: 2;
}

/* Phones: the cell is already short, so the ribbon gives up its padding
   before it gives up being legible. */
@media (max-width: 640px) {
  .skagit-cal__ribbon {
    min-height: 0.9rem;
    padding: 0.1rem 0.22rem;
    font-size: 0.5rem;
    letter-spacing: 0.02em;
  }

  /* Same reversal as above: the phone grid gets square artwork too, so the
     inset that used to make room for the bars is 0 here as well. */
  .skagit-cal__daybtn:has(.skagit-cal__ribbon) .skagit-cal__stack,
  .skagit-cal__daybtn:has(.skagit-cal__ribbon + .skagit-cal__ribbon) .skagit-cal__stack,
  .skagit-cal__daybtn:has(.skagit-cal__ribbon + .skagit-cal__ribbon + .skagit-cal__ribbon) .skagit-cal__stack { bottom: 0; }
}

/* =========================================================================
   ENDED SAYS "ENDED", AND THE CONTINUATION RULE IS GONE.
   Both 31 Aug 2026, both from the owner looking at the rebuilt calendar.
   ========================================================================= */

/* >>> THE GREY-OUT IS DELIBERATELY UNDONE. <<<
   .skagit-cal__day--ended used to put grayscale(0.85) and opacity 0.55 across
   the whole tile. It reads as FADED, not as FINISHED: the first reaction to it
   was that the artwork looked broken, and a month mostly in the past came out
   as a grey sheet with the promotions barely identifiable. The tile now stays
   at full strength and the word "Ended" carries the meaning instead. The rules
   above are overridden rather than deleted so the intent of the change is
   legible next to what it replaced. */
.skagit-cal .skagit-cal__day--ended .skagit-cal__thumb {
  filter: none;
  opacity: 0.92;
}

.skagit-cal .skagit-cal__day--ended .skagit-cal__tiletitle {
  color: #fff;
}

/* Top-right, because the day number owns the top-left and the ribbons own the
   bottom. Small, muted and squared off so it reads as a stamp on the day
   rather than as another promotion competing with the ones underneath it. */
.skagit-cal__endedflag {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 3;
  padding: 0.1rem 0.34rem;
  background: rgba(6, 25, 43, 0.82);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* >>> THE BRASS CONTINUATION RULE IS REMOVED. <<<
   .skagit-cal__row--cont::after drew a 3px brass line 6px up from the bottom of
   the hero to signal "this run continues". With the cell split into equal rows
   it sat on the bottom edge of each one and read as an underline. Now that the
   hero fills the cell and the ribbons sit below it, the line floats in the
   middle of the artwork attached to nothing, which is exactly how the owner
   described it. The printed calendars have no such device: a run simply repeats
   its artwork, and that is legible on its own. */
.skagit-cal__row--cont::after {
  content: none;
}