/* ============================================================
   HOLIDAYS — the festive layer (winter season only)

   Loaded by hfx_holidays_festive_assets() (inc/holidays.php) only when
   HFX_FESTIVE_MODE lets the layer show; the markup it styles is the
   hfx_holidays_festive() blocks in page-holidays.php. Every rule hangs
   off .brc-root.is-festive, so no other page can be touched. To remove
   the layer for good: delete this file, those blocks and the flag.

   House rules it keeps: radius 0, hard offset shadows only (with one
   approved exception — the lit bulbs and the headline word glow; see the
   string lights), 640 is the only breakpoint, acid is used ONCE — a
   countdown chip whose holiday is on now (the stock
   .hn-chip.on-dark.is-on).
   ============================================================ */

.brc-root.is-festive {
  /* Five colours, each with a job nothing in :root does. They exist only
     while this layer shows. */
  --hol-gold: #c9a227;      /* festive ornament: heading stars, a bulb, countdown day counts, the gold photo tint */
  --hol-teal: #2bb39a;      /* the fourth bulb colour */
  /* The three below are as strong as the everyday category tints, which
     are oklch 62% lightness: 56%, 56% and 50% here (they were 43%, 45%
     and 30%, and turned a dark poster nearly black). */
  --hol-pine: #218862;      /* festive photo tint */
  --hol-cranberry: #c93452; /* festive photo tint */
  --hol-midnight: #3860ac;  /* festive photo tint (navy) */
}

/* ── Three layers ─────────────────────────────────────────────────────
   Section backgrounds (hero ink, filter paper, white bands) are ordinary
   unlayered boxes at the bottom. The snow is ONE layer above them. Every
   .brc-shell — the column all of the page's content sits in — is raised
   above the snow, so a flake shows wherever the shell is see-through
   (the section's own background) and is hidden by anything in it that
   is opaque: cards, chips, buttons, the weekend box, a heading's rule.
   Text is drawn over the flakes, never under. The lights sit on top. */
.brc-root.is-festive .brc-hero { position: relative; }
.brc-root.is-festive .brc-shell { position: relative; z-index: 2; }

/* ── Snow: one layer for the whole page body ──────────────────────────
   Why one sticky layer: it is the cheapest thing that gives the layering
   above. A snow layer per section would need flakes in every section
   (hundreds, on a long page) and each would restart at a section edge.
   A position:fixed layer would cover the viewport, so it would also snow
   on the Evergreen banner at the top and the footer at the bottom. A
   viewport-tall STICKY layer, placed in the markup just above the hero,
   starts below the nav and banner, follows the scroll, and stops where
   .brc-root ends — no script, no scroll listener. The hero's negative
   top margin gives back the height the layer takes, so nothing shifts.
   (The margin is on the hero, not the layer: a sticky box's own negative
   margin lets it run that far past its container, onto the footer.)

   Each flake is a full-height column with the square at its foot; the
   column slides from one layer-height above to its resting place, so the
   fall is a transform and nothing else. Values come from the markup
   (hfx_holidays_flakes); start delays are negative, so it is already
   snowing at first paint. */
.brc-root.is-festive .brc-snow {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
.brc-root.is-festive .brc-snow + .brc-hero { margin-top: -100vh; }
/* That layer carries the crystals only. The specks — paper squares, which
   read on ink and on nothing else — have a layer of their own that fills
   the hero and is clipped to it, at the same height in the stack. */
.brc-root.is-festive .brc-snow.is-hero {
  position: absolute;
  inset: 0;
  height: auto;
}
.brc-root.is-festive .brc-flake {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: 100%;
  animation: brc-snowfall var(--t) linear var(--d) infinite;
}
/* A speck: a 2–4px paper square with a 1px hard ink shadow. */
.brc-root.is-festive .brc-flake::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: var(--s);
  height: var(--s);
  background: var(--paper);
  box-shadow: 1px 1px 0 var(--ink);
  opacity: var(--o);
}
/* One flake in three is a crystal (12–18px): nearer, so slower, and it
   turns as it falls. Straight lines only, square caps, 1.5px whatever the
   crystal's size. The ink copy underneath is a 1px hard shadow, which is
   what keeps a paper crystal readable on the paper and white sections;
   its 1px offset is on a wrapper in the markup, so the shadow stays
   down-right while both copies turn about the centre. */
.brc-root.is-festive .brc-flake.is-crystal::after { content: none; }
.brc-root.is-festive .brc-crystal {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: var(--s);
  height: var(--s);
  overflow: visible;
  opacity: var(--o);
}
.brc-root.is-festive .brc-crystal path {
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: square;
  transform-origin: 7px 7px;
  animation: brc-snowspin var(--r) linear infinite;
}
.brc-root.is-festive .brc-crystal-ice { stroke: var(--paper); }
.brc-root.is-festive .brc-crystal-shadow { stroke: var(--ink); }
@keyframes brc-snowspin {
  to { transform: rotate(var(--q)); }
}

/* ── The snowbank on the footer's ledge ───────────────────────────────
   The last thing in .brc-root, so it rests on the footer and covers
   nothing: it has its own row. Its height is today's — an inline script
   beside it sets --g (0 on the first day … 1 on the last) as the element
   is parsed, before first paint, and the height follows from that here,
   so the phone's lower ceiling needs no script. The pile is one fixed
   outline stretched to that height: the same low mounds every day, for
   every reader, only taller. No animation. It sits below the snow layer,
   so the crystals pass in front of it.

   Only the pile is filled. Above its edge the row is see-through, and
   after a white section the row carries that white on (and covers the
   section's bottom rule), so the pile is seen against the section it
   has drifted up to, not against a band of its own. */
.brc-root.is-festive .brc-snowbank {
  --bank-max: 120px;
  position: relative;
  height: calc(8px + (var(--bank-max) - 8px) * var(--g, 0) + 2px);
  overflow: hidden;
}
.brc-root.is-festive .brc-section-white + .brc-snowbank { margin-top: -3px; background: #fff; }
.brc-root.is-festive .brc-snowbank[hidden] { display: none; }
.brc-root.is-festive .brc-snowbank svg {
  position: absolute;
  left: 0;
  top: 2px; /* room for the ink edge on the highest mound */
  width: 100%;
  height: calc(100% - 2px);
  overflow: visible;
}
/* The hard shadow: the same outline, 4px right and 4px down, in ink. */
.brc-root.is-festive .brc-snowbank-shadow { transform: translate(4px, 4px); }
.brc-root.is-festive .brc-snowbank-shadow polygon { fill: var(--ink); }
.brc-root.is-festive .brc-snowbank-drift { fill: var(--paper); }
.brc-root.is-festive .brc-snowbank-facet { fill: var(--soft); }
.brc-root.is-festive .brc-snowbank-edge { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: miter; }

/* List view: a row is see-through, so it takes its section's colour and
   hides the flakes behind it like a Wall card does. */
.brc-root.is-festive .brc-section .bbr-grid:not(.is-wall) .bbr-item { background: var(--paper); }
.brc-root.is-festive .brc-section-white .bbr-grid:not(.is-wall) .bbr-item { background: #fff; }
@keyframes brc-snowfall {
  from { transform: translate3d(0, -100%, 0); }
  to   { transform: translate3d(var(--w), 8px, 0); }
}

/* ── String lights, pinned along the hero's bottom edge ───────────────
   Like lights along a roofline, hung by hand. The wire is tacked to the
   hero's edge between swags and sags onto the paper filter bar; the
   tacks are a little unevenly spaced and each swag sags a different
   amount, 16–34px (hfx_holidays_strand: fixed tables, so it is the same
   strand for everyone). A C9 bulb hangs from each low point, socket and
   all on the paper; the markup gives each its place (--x, --y).

   The bulbs are drawn in page-holidays.php from straight-edged polygons
   only: a socket cap with a darker band, a faceted body and one glass
   facet. No curves, no radius. Each swings a few degrees from its socket,
   and two hang well off true. Sixteen burn steadily; four loose ones
   flicker (below), opacity only, which leaves the tilt alone.

   THE ONE EXCEPTION TO "SHADOW HARD, NEVER BLURRED" (Kate, Nov 10 2026):
   lit things may glow. It covers two things and nothing else — these
   bulbs, which carry a soft glow in their own colour in place of a hard
   shadow, and the acid "Holidays" word in the hero headline (below).
   Nothing else in this file, and nothing else in the theme, gets blur.

   The box starts exactly on the hero's edge. A "run" is one wire and
   its tacks — a 6px ink square at every point the wire is pinned — and
   there are two, twenty swags and ten; only one shows. */
.brc-root.is-festive .brc-lights {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 36px;
  z-index: 3;
  pointer-events: none;
}
.brc-root.is-festive .brc-lights-run { position: absolute; inset: 0; }
.brc-root.is-festive .brc-lights-run.is-narrow { display: none; }
.brc-root.is-festive .brc-lights-wire { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 36px; overflow: visible; }
.brc-root.is-festive .brc-lights-wire path { fill: none; stroke: var(--ink); stroke-width: 2px; }
/* Centred on its point, except the two end tacks, which stay on the page. */
.brc-root.is-festive .brc-light-tack {
  position: absolute;
  top: 0;
  left: clamp(0px, calc(var(--x) - 3px), calc(100% - 6px));
  width: 6px;
  height: 6px;
  background: var(--ink);
}
.brc-root.is-festive .brc-light {
  position: absolute;
  z-index: 1;
  top: calc(var(--y) - 1px); /* its swag's low point, less a pixel of overlap */
  left: var(--x);
  width: 17px;
  height: 31px;
  margin-left: -8px; /* the socket's centre sits on the wire's low point */
  overflow: visible;
  transform-origin: 7.5px 0;
  /* Lit: the fill a little brighter, and a glow in the bulb's own colour
     (the exception above). A flickering bulb dims by opacity, which takes
     its glow down with it. The second declaration adds the wider, fainter
     halo where color-mix() is understood. */
  filter: brightness(1.15) drop-shadow(0 0 6px currentColor);
  filter: brightness(1.15) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px color-mix(in srgb, currentColor 50%, transparent));
}
/* The 1px ink outline keeps the paper bulb, whose glow is paper too,
   readable on the paper bar. */
.brc-root.is-festive .brc-light-body { fill: currentColor; stroke: var(--ink); stroke-width: 1px; stroke-linejoin: miter; }
.brc-root.is-festive .brc-light-glass { fill: var(--paper); opacity: 0.35; }
.brc-root.is-festive .brc-light-cap { fill: var(--band-line); stroke: var(--ink); stroke-width: 1px; }
.brc-root.is-festive .brc-light-band { fill: var(--ink); }
.brc-root.is-festive .brc-light:nth-child(4n + 1) { color: var(--band-red); }
.brc-root.is-festive .brc-light:nth-child(4n + 2) { color: var(--paper); }
.brc-root.is-festive .brc-light:nth-child(4n + 3) { color: var(--hol-teal); }
.brc-root.is-festive .brc-light:nth-child(4n)     { color: var(--hol-gold); }
.brc-root.is-festive .brc-light:nth-child(6n + 1) { transform: rotate(-8deg); }
.brc-root.is-festive .brc-light:nth-child(6n + 2) { transform: rotate(5deg); }
.brc-root.is-festive .brc-light:nth-child(6n + 3) { transform: rotate(-3deg); }
.brc-root.is-festive .brc-light:nth-child(6n + 4) { transform: rotate(8deg); }
.brc-root.is-festive .brc-light:nth-child(6n + 5) { transform: rotate(-6deg); }
.brc-root.is-festive .brc-light:nth-child(6n)     { transform: rotate(3deg); }
/* Two that hang well off true (a phone shows the first). */
.brc-root.is-festive .brc-light:nth-child(5)  { transform: rotate(15deg); }
.brc-root.is-festive .brc-light:nth-child(12) { transform: rotate(-14deg); }
/* Loose bulbs: the 3rd, 8th, 14th and 17th flicker; the other sixteen
   never animate. A flicker is a hard jump (step-end: the value holds,
   then switches — no fade) between full and 30%: several seconds steady,
   a burst of two or three quick blinks, steady again. Each has its own
   length and start offset, so no two ever fall into step. Within a burst
   one blink (dim + lit) takes at least 0.41s — under 2.5 flashes a
   second, inside the three-a-second safety limit. On a phone only the
   3rd and 17th are shown (every second bulb is hidden). */
.brc-root.is-festive .brc-light:nth-child(3)  { animation: brc-flicker-a 7s step-end -1.3s infinite; }
.brc-root.is-festive .brc-light:nth-child(8)  { animation: brc-flicker-b 11s step-end -6.2s infinite; }
.brc-root.is-festive .brc-light:nth-child(14) { animation: brc-flicker-c 9s step-end -3.7s infinite; }
.brc-root.is-festive .brc-light:nth-child(17) { animation: brc-flicker-d 13s step-end -9.1s infinite; }
/* 7s: steady 4.3s, three blinks 0.42s apart. */
@keyframes brc-flicker-a {
  0%    { opacity: 1; }
  62%   { opacity: 0.3; }
  64.5% { opacity: 1; }
  68%   { opacity: 0.3; }
  70.5% { opacity: 1; }
  74%   { opacity: 0.3; }
  76.5% { opacity: 1; }
  100%  { opacity: 1; }
}
/* 11s: steady 4.4s, two blinks 0.46s apart. */
@keyframes brc-flicker-b {
  0%    { opacity: 1; }
  40%   { opacity: 0.3; }
  41.6% { opacity: 1; }
  44.2% { opacity: 0.3; }
  45.8% { opacity: 1; }
  100%  { opacity: 1; }
}
/* 9s: steady 7.3s, three blinks 0.41s apart. */
@keyframes brc-flicker-c {
  0%    { opacity: 1; }
  81%   { opacity: 0.3; }
  82.8% { opacity: 1; }
  85.6% { opacity: 0.3; }
  87.4% { opacity: 1; }
  90.2% { opacity: 0.3; }
  92%   { opacity: 1; }
  100%  { opacity: 1; }
}
/* 13s: steady 2.9s, two blinks 0.52s apart, steady 5.7s, one more. */
@keyframes brc-flicker-d {
  0%    { opacity: 1; }
  22%   { opacity: 0.3; }
  23.4% { opacity: 1; }
  26%   { opacity: 0.3; }
  27.4% { opacity: 1; }
  70%   { opacity: 0.3; }
  71.5% { opacity: 1; }
  100%  { opacity: 1; }
}
/* Room in the filter bar for the whole strand — the slackest swag (34px),
   a 31px bulb, its swing and its glow — and clear air before the "Kind"
   label and the first row of chips. */
.brc-root.is-festive .brc-filters { padding-top: 94px; }

/* ── The headline word glows ──────────────────────────────────────────
   The second half of the glow exception noted above the string lights:
   the acid "Holidays" in the hero headline, this one word, no animation.
   It goes with the layer. */
.brc-root.is-festive .brc-hero h1 em { text-shadow: 0 0 32px rgba(232, 255, 0, 0.35); }

/* ── Countdown chips (stock .hn-chip.on-dark.is-static) ───────────────
   A static chip is a label: it must not light up acid on hover the way a
   dark-band button does. The one acid chip is the stock .is-on state,
   set only while that holiday is on. */
.brc-root.is-festive .brc-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 16px;
}
.brc-root.is-festive .brc-countdown-lab {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-muted);
}
/* Solid ink, not the stock see-through dark chip: snow passes behind. */
.brc-root.is-festive .brc-countdown .hn-chip { background: var(--ink); }
.brc-root.is-festive .brc-countdown .hn-chip.is-on { background: var(--acid); }
.brc-root.is-festive .brc-countdown .hn-chip:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--paper); }
.brc-root.is-festive .brc-countdown .hn-chip.is-on:hover { border-color: var(--acid); color: var(--ink); }
.brc-root.is-festive .brc-countdown .hn-chip b { font-weight: 700; color: var(--hol-gold); }
.brc-root.is-festive .brc-countdown .hn-chip.is-on b { color: inherit; }
.brc-root.is-festive .brc-countdown .hn-chip b:empty { display: none; }

/* ── A gold sparkle after each section heading ────────────────────── */
.brc-root.is-festive .brc-star {
  width: 26px;
  height: 26px;
  margin-left: 10px;
  vertical-align: -2px;
  fill: var(--hol-gold);
}

/* ── Festive photo tints (Wall view) ──────────────────────────────────
   The halftone stack is unchanged; only the tint layer's colour is, and
   it turns by position in the grid instead of by category. */
/* Before the tint, the photo is lifted a little on this page: the stock
   treatment (contrast 1.35, brightness 0.95) is tuned for the brighter
   everyday tints and crushes a dark poster under these. Same greyscale,
   same dot screen; the site-wide rule in broadsheet.css is untouched. */
.brc-root.is-festive a.bbr-item .hfx-event-img__bg { filter: grayscale(1) contrast(1.2) brightness(1.2); }
.brc-root.is-festive a.bbr-item:nth-of-type(4n + 1) .hfx-event-img__tint { background: var(--hol-pine); }
.brc-root.is-festive a.bbr-item:nth-of-type(4n + 2) .hfx-event-img__tint { background: var(--hol-cranberry); }
.brc-root.is-festive a.bbr-item:nth-of-type(4n + 3) .hfx-event-img__tint { background: var(--hol-gold); }
.brc-root.is-festive a.bbr-item:nth-of-type(4n)     .hfx-event-img__tint { background: var(--hol-midnight); }

/* ── A card with no photo (Wall view) ─────────────────────────────────
   The stock empty well is a red-and-acid hatch saying "no photo yet".
   Here it is a designed tile instead: the well goes flat, so the card's
   festive tint shows as a solid colour under the usual dot screen, and
   the template lays a sparkle and the listing's category over it in the
   display face. Nothing pretends to be a photo of the event. Paper type
   on pine, cranberry and navy; ink on gold, where paper would not read. */
.brc-root.is-festive a.bbr-item .hfx-event-img--empty .hfx-event-img__bg { background: var(--paper); }
.brc-root.is-festive a.bbr-item .hfx-event-img--empty .hn-unknown--img { display: none; }
.brc-root.is-festive .brc-noposter { display: none; }
.brc-root.is-festive .bbr-grid.is-wall .brc-noposter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 3; /* the image well's own shape */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  box-sizing: border-box;
  pointer-events: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
}
.brc-root.is-festive .brc-noposter-star { width: 40px; height: 40px; fill: currentColor; }
.brc-root.is-festive a.bbr-item:nth-of-type(4n + 3) .brc-noposter { color: var(--ink); }

@media (max-width: 640px) {
  /* Ten swags, each about twice as wide, drawn by the second run, and
     ten bulbs: every second one is hidden and the rest move to the ten
     low points (--nx, --ny). The four colours are re-dealt across them,
     or only two would ever show. */
  .brc-root.is-festive .brc-lights-run { display: none; }
  .brc-root.is-festive .brc-lights-run.is-narrow { display: block; }
  .brc-root.is-festive .brc-light { left: var(--nx); top: calc(var(--ny) - 1px); }
  .brc-root.is-festive .brc-light:nth-child(even) { display: none; }
  .brc-root.is-festive .brc-light:nth-child(8n + 1) { color: var(--band-red); }
  .brc-root.is-festive .brc-light:nth-child(8n + 3) { color: var(--paper); }
  .brc-root.is-festive .brc-light:nth-child(8n + 5) { color: var(--hol-teal); }
  .brc-root.is-festive .brc-light:nth-child(8n + 7) { color: var(--hol-gold); }
  .brc-root.is-festive .brc-star { width: 20px; height: 20px; margin-left: 8px; }
  /* Thirty-five flakes, not seventy: every second one of each kind. */
  .brc-root.is-festive .brc-flake:nth-child(even) { display: none; }
  .brc-root.is-festive .brc-snowbank { --bank-max: 80px; }
}

/* ── The side strands: lights down both edges of the page ─────────────
   With the strand under the hero they frame the page. They live in the
   sticky snow layer (markup in page-holidays.php), so they stay in view
   down the whole page and stop at the footer with it. The same bulbs,
   glow, colour turn, tilts and flicker as above — the rules are the same
   rules. The wire and tacks are the muted grey here: these run over the
   black hero and the paper sections alike, and ink would vanish on one.

   Shown from 1280px up only. That is a width outside the theme's four
   breakpoints (640 / 767 / 900 / 1100), and it is here because of
   arithmetic, not taste: the content column is 1180px wide, so a gutter
   wide enough to hang a 56px strand in without it sitting on the text
   only exists from about 1260px. Below that there are no side strands. */
.brc-root.is-festive .brc-lights-side { display: none; }
@media (min-width: 1280px) {
  .brc-root.is-festive .brc-lights-side {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
  }
  .brc-root.is-festive .brc-lights-side.is-right { left: auto; right: 0; transform: scaleX(-1); }
  .brc-root.is-festive .brc-lights-side .brc-lights-wire { height: 100%; width: 60px; }
  .brc-root.is-festive .brc-lights-side .brc-lights-wire path { stroke: var(--muted); }
  .brc-root.is-festive .brc-lights-side .brc-light-tack {
    top: clamp(0px, calc(var(--y) - 3px), calc(100% - 6px));
    left: 0;
    background: var(--muted);
  }
  /* One loose bulb a side, a different one on each and on its own
     rhythm; left to the shared rules, the two sides would flicker the
     same two bulbs in step, like a mirror. */
  .brc-root.is-festive .brc-lights-side .brc-light:nth-child(3) { animation: none; }
  .brc-root.is-festive .brc-lights-side.is-right .brc-light:nth-child(8) { animation: none; }
  .brc-root.is-festive .brc-lights-side.is-right .brc-light:nth-child(3) { animation: brc-flicker-c 9s step-end -5.1s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  /* The snow stops; its layer stays, because the side strands hang in it. */
  .brc-root.is-festive .brc-flake { display: none; }
  /* Every bulb steady, whichever rule set it flickering. */
  .brc-root.is-festive .brc-light { animation: none !important; }
}