/* ═══════════════════════════════════════════════════════════
   HOLIDAYS AT THE HARV (/holidays)
   Layered on colors.css + reset.css + site.css.

   Theme comes from the 2026 "Holidays at The Harv" key art
   (/images/site/holidays/raw/Holidays at The Harv 2026.jpg):
   cranberry, pine green, gold, and cream. The site design tokens are
   re-pointed on body.hh-page so shared components (buttons, nav, sidebar,
   footer) pick up the holiday palette without per-component overrides.
═══════════════════════════════════════════════════════════ */

/* ─── TOKENS — DARK (default) ─────────────────────────────── */
body.hh-page {
  --hh-red: #b3202e;
  --hh-red-deep: #7c1019;
  --hh-red-night: #2c070b;
  --hh-green: #1f5a3c;
  --hh-green-deep: #0b2418;
  --hh-gold: #e0b862;
  --hh-gold-light: #f4d996;
  --hh-gold-deep: #a97c2c;
  --hh-cream: #f7efe1;

  --bg: #08130e;
  --deep: #0d1d16;
  --card: #12271d;
  --card2: #173023;
  --card-hover: #1c392a;
  --border: rgba(244, 217, 150, 0.11);
  --border-hover: rgba(224, 184, 98, 0.45);
  --purple: #a51c2a;
  --purple-light: #c22a39;
  --purple-lighter: var(--hh-gold);
  --purple-dim: rgba(224, 184, 98, 0.14);
  --purple-glow: rgba(179, 32, 46, 0.45);
  --white: #f7efe1;
  --text: #f7efe1;
  --text-sub: rgba(247, 239, 225, 0.8);
  --muted: rgba(247, 239, 225, 0.7);
  --muted2: rgba(247, 239, 225, 0.42);
  --nav-scrolled-bg: rgba(8, 19, 14, 0.97);
  --sidebar-bg: #0a1812;
  /* colors.css only sets this on :root, and drops it in the light scheme */
  --logo-filter: brightness(0) invert(1);
}

/* ##### COMMENTED OUT BY Claude Code #####
   Light-scheme tokens; the holidays page is always dark (see FORCE DARK below).
@media (prefers-color-scheme: light) {
  body.hh-page {
    --bg: #fbf6ee;
    --deep: #f3e9da;
    --card: #fffdf9;
    --card2: #f6ecdd;
    --card-hover: #efe2cd;
    --border: rgba(124, 16, 25, 0.12);
    --border-hover: rgba(124, 16, 25, 0.32);
    --text: #2a0d10;
    --text-sub: #4a1a1f;
    --muted: rgba(42, 13, 16, 0.74);
    --muted2: rgba(42, 13, 16, 0.5);
    (Cranberry accent text holds 4.5:1 on cream)
    --purple-lighter: #8e1622;
    --purple-dim: rgba(142, 22, 34, 0.08);
    --nav-scrolled-bg: rgba(251, 246, 238, 0.97);
    --sidebar-bg: #fbf6ee;
  }
}
*/

/* ─── FORCE DARK ──────────────────────────────────────────────
   The holidays page always uses the dark theme, whatever the visitor's
   system setting. The tokens above already override colors.css; these
   put back the dark values for the light-scheme rules in site.css that
   hard-code colors on shared chrome used by this page. */
@media (prefers-color-scheme: light) {
  .hh-page #mainNav.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }

  .hh-page .nav-link-item,
  .hh-page #mainNav.scrolled .nav-link-item {
    color: rgba(235, 228, 255, 0.75);
  }

  .hh-page .nav-link-item:hover,
  .hh-page #mainNav.scrolled .nav-link-item:hover {
    color: var(--text);
    background: var(--purple-dim);
  }

  .hh-page #mainNav.scrolled .nav-live {
    color: #fff;
  }

  .hh-page .nav-dropdown-menu {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  }

  /* site.css marks its light hamburger colors !important */
  .hh-page .nav-hamburger {
    background: var(--purple-dim) !important;
    border-color: var(--border-hover) !important;
    color: var(--text) !important;
  }

  .hh-page .nav-hamburger:hover {
    background: rgba(87, 49, 152, 0.28) !important;
    border-color: var(--purple-lighter) !important;
    color: var(--text) !important;
  }

  .hh-page .nav-hamburger .ham-lines span {
    background: currentColor;
  }

  .hh-page .sidebar-nav a i {
    color: var(--purple-lighter);
  }

  .hh-page .btn-ghost {
    color: var(--purple-lighter);
  }

  .hh-page .btn-ghost:hover {
    opacity: 0.75;
  }

  .hh-page footer {
    background: var(--bg);
  }
}


/* ═══════════════════════════════════════════════════════════
   SITE CHROME — nav, buttons, labels in the holiday palette
═══════════════════════════════════════════════════════════ */
.hh-page #mainNav.scrolled {
  background: var(--nav-scrolled-bg);
}

.hh-page .btn-primary {
  background: linear-gradient(135deg, #c8303f 0%, var(--hh-red) 50%, var(--hh-red-deep) 100%);
  color: #fff;
}

.hh-page .btn-primary:hover {
  background: linear-gradient(135deg, #d63a49 0%, #c22a39 50%, #8e1622 100%);
  box-shadow: 0 10px 36px var(--purple-glow);
}

.hh-page .section-label {
  color: var(--purple-lighter);
}

.hh-page .section-label::before {
  background: var(--purple-lighter);
}

.hh-page #backToTop {
  box-shadow: 0 4px 20px var(--purple-glow);
}

/* ##### COMMENTED OUT BY Claude Code #####
   Light-scheme chrome; the holidays page is always dark (see FORCE DARK above).
@media (prefers-color-scheme: light) {
  .hh-page #mainNav.scrolled {
    box-shadow: 0 1px 0 rgba(124, 16, 25, 0.12), 0 4px 24px rgba(124, 16, 25, 0.08);
  }

  (Nav links stay readable over the cream hero (matches swss.css))
  .hh-page .nav-link-item,
  .hh-page .nav-live {
    color: rgba(0, 0, 0, 0.88);
  }

  .hh-page .section-label {
    color: var(--purple-lighter);
  }

  .hh-page .section-label::before {
    background: var(--purple-lighter);
  }

  .hh-page .btn-ghost {
    color: var(--purple-lighter);
  }
}
*/


/* ═══════════════════════════════════════════════════════════
   SHARED — headings, sections, dark bands
═══════════════════════════════════════════════════════════ */
.hh-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 22px;
  text-wrap: balance;
}

.hh-h2 em {
  font-style: italic;
  color: var(--purple-lighter);
}

.hh-lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
}

.hh-lead + .hh-lead {
  margin-top: 16px;
}

.hh-center {
  text-align: center;
}

.hh-center .section-label {
  justify-content: center;
}

.hh-center .hh-lead {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.hh-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hh-center .hh-actions {
  justify-content: center;
}

.hh-section {
  padding: 110px 0;
}

.hh-section--deep {
  background: var(--deep);
}

/* Full-bleed band that stays dark in both color schemes so light text
   always reads — cranberry with the gold glow from the key art. */
.hh-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  color: var(--hh-cream);
  background:
    radial-gradient(55% 70% at 85% 100%, rgba(224, 184, 98, 0.22), transparent 70%),
    radial-gradient(45% 60% at 8% 0%, rgba(31, 90, 60, 0.45), transparent 70%),
    linear-gradient(160deg, #5e0d16 0%, var(--hh-red-night) 100%);
}

.hh-band .section-label {
  color: var(--hh-gold-light);
}

.hh-band .section-label::before {
  background: var(--hh-gold-light);
}

.hh-band .hh-h2 {
  color: #fff;
}

.hh-band .hh-h2 em {
  color: var(--hh-gold-light);
}

.hh-band .hh-lead {
  color: rgba(247, 239, 225, 0.85);
}

.hh-band .btn-outline {
  color: var(--hh-cream);
  border-color: rgba(247, 239, 225, 0.45);
}

.hh-band .btn-outline:hover {
  color: var(--hh-gold-light);
  border-color: var(--hh-gold-light);
  background: rgba(244, 217, 150, 0.1);
}


/* ═══════════════════════════════════════════════════════════
   HERO — Holidays at The Harv
   Dark pine (the page is always dark).
═══════════════════════════════════════════════════════════ */
.hh-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 72px) 0 100px;
  background:
    radial-gradient(40% 50% at 78% 30%, rgba(224, 184, 98, 0.2), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(179, 32, 46, 0.32), transparent 70%),
    linear-gradient(170deg, var(--hh-green-deep) 0%, #071009 100%);
}

/* ##### COMMENTED OUT BY Claude Code #####
   Cream light-scheme hero; the holidays page is always dark.
@media (prefers-color-scheme: light) {
  .hh-hero {
    background:
      radial-gradient(40% 50% at 78% 30%, rgba(224, 184, 98, 0.32), transparent 70%),
      radial-gradient(50% 60% at 10% 100%, rgba(179, 32, 46, 0.14), transparent 70%),
      linear-gradient(170deg, #fffaf2 0%, #f3e6d2 100%);
  }
}
*/

.hh-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hh-hero .section-label {
  justify-content: center;
}

.hh-hero-logo {
  width: min(440px, 82vw);
  margin: 0 0 26px;
}

.hh-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(124, 16, 25, 0.16));
}

.hh-hero .hh-hero-sub {
  max-width: 620px;
}

.hh-hero .hh-actions {
  justify-content: center;
}

/* ##### COMMENTED OUT BY Claude Code #####
   Cream-in-both-schemes hero overrides, reverted to the original
   dark/light hero backgrounds above.
.hh-hero {
  color: #2a0d10;
  background:
    radial-gradient(45% 55% at 50% 38%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(40% 50% at 88% 20%, rgba(224, 184, 98, 0.32), transparent 70%),
    radial-gradient(50% 60% at 8% 100%, rgba(179, 32, 46, 0.14), transparent 70%),
    linear-gradient(170deg, #fffaf2 0%, #f3e6d2 100%);
}

.hh-hero .section-label {
  color: #8e1622;
}

.hh-hero .section-label::before {
  background: #8e1622;
}

.hh-hero .hh-hero-sub {
  color: #4a1a1f;
}

.hh-hero .btn-outline {
  color: #2a0d10;
  border-color: rgba(124, 16, 25, 0.32);
}

.hh-hero .btn-outline:hover {
  color: #8e1622;
  border-color: #8e1622;
  background: rgba(142, 22, 34, 0.08);
}

.hh-page #mainNav:not(.scrolled) .nav-link-item,
.hh-page #mainNav:not(.scrolled) .nav-live,
.hh-page #mainNav:not(.scrolled) .nav-hamburger {
  color: rgba(0, 0, 0, 0.88);
}

.hh-page #mainNav:not(.scrolled) .nav-logo img {
  filter: none;
}
*/

/* Soft bokeh — blurred gold and red lights like the key art background */
.hh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(244, 217, 150, 0.35) 0 14px, transparent 15px),
    radial-gradient(circle at 26% 70%, rgba(244, 217, 150, 0.22) 0 22px, transparent 23px),
    radial-gradient(circle at 48% 16%, rgba(255, 120, 120, 0.2) 0 10px, transparent 11px),
    radial-gradient(circle at 64% 84%, rgba(244, 217, 150, 0.25) 0 18px, transparent 19px),
    radial-gradient(circle at 90% 60%, rgba(244, 217, 150, 0.3) 0 26px, transparent 27px),
    radial-gradient(circle at 82% 12%, rgba(255, 120, 120, 0.22) 0 12px, transparent 13px),
    radial-gradient(circle at 40% 92%, rgba(244, 217, 150, 0.18) 0 30px, transparent 31px);
  filter: blur(6px);
}

/* ##### COMMENTED OUT BY Claude Code #####
   Two-column hero (text + schedule graphic) and text heading,
   replaced by the full-width logo hero above.
.hh-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hh-hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 92px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  margin-bottom: 26px;
}

.hh-hero-title em {
  display: block;
  font-style: italic;
  color: var(--purple-lighter);
}

.hh-hero-art {
  position: relative;
  margin: 0;
}

.hh-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(224, 184, 98, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
*/

.hh-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.75;
  color: var(--text-sub);
  max-width: 540px;
}

/* ##### COMMENTED OUT BY Claude Code #####
   Bokeh is tuned for the dark theme; softened it on the cream hero.
   The holidays page is always dark now.
@media (prefers-color-scheme: light) {
  .hh-hero::before {
    opacity: 0.7;
  }
}
*/

/* ##### COMMENTED OUT BY Claude Code #####
   Light-scheme hero overrides; the hero is now cream in both schemes.
@media (prefers-color-scheme: light) {
  .hh-hero {
    background:
      radial-gradient(40% 50% at 78% 30%, rgba(224, 184, 98, 0.32), transparent 70%),
      radial-gradient(50% 60% at 10% 100%, rgba(179, 32, 46, 0.14), transparent 70%),
      linear-gradient(170deg, #fffaf2 0%, #f3e6d2 100%);
  }

  .hh-hero::before {
    opacity: 0.7;
  }

  .hh-hero-art img {
    box-shadow: 0 30px 70px rgba(124, 16, 25, 0.18);
  }
}
*/


/* ═══════════════════════════════════════════════════════════
   WELCOME — staff copy + tagline
═══════════════════════════════════════════════════════════ */
.hh-tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 44px;
  font-family: var(--font-cond);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--purple-lighter);
}


/* ═══════════════════════════════════════════════════════════
   SCHEDULE — holiday services (styled after the key art rows)
═══════════════════════════════════════════════════════════ */
.hh-schedule {
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 56px auto 0;
}

.hh-service {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color var(--transition), transform var(--transition);
}

.hh-service:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.hh-service-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--hh-red) 0%, var(--hh-red-deep) 100%);
  color: #fff;
  text-align: center;
  font-family: var(--font-cond);
  text-transform: uppercase;
}

.hh-service-day {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
}

.hh-service-time {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--hh-gold-light);
}

.hh-service h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
}

.hh-service h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 4px;
}

.hh-service h3 a:hover {
  color: var(--purple-lighter);
}

.hh-service-guest {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.hh-service-guest i {
  margin-right: 6px;
  color: var(--purple-lighter);
}

.hh-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hh-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-lighter);
  background: var(--purple-dim);
  border: 1px solid var(--border-hover);
}

a.hh-tag:hover {
  background: var(--purple-lighter);
  color: var(--bg);
}

.hh-tag--gift {
  color: var(--hh-green-deep);
  background: linear-gradient(135deg, var(--hh-gold-light), var(--hh-gold));
  border-color: transparent;
}


/* ═══════════════════════════════════════════════════════════
   CHRISTMAS AT THE HARV — Dec. 20 feature
═══════════════════════════════════════════════════════════ */
.hh-christmas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hh-christmas-flyer {
  margin: 0;
}

.hh-christmas-flyer img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.hh-when {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 4px 0 24px;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hh-gold-light);
}

.hh-when i {
  margin-right: 8px;
}

.hh-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 64px;
}

.hh-feature {
  padding: 26px 12px 22px;
  border-radius: var(--radius);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(244, 217, 150, 0.18);
}

.hh-feature-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 21px;
  color: var(--hh-red-deep);
  background: linear-gradient(135deg, var(--hh-gold-light), var(--hh-gold-deep));
}

.hh-feature-label {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}

.hh-christmas-video {
  max-width: 900px;
  margin: 64px auto 0;
}


/* ═══════════════════════════════════════════════════════════
   VIDEO — click-to-play YouTube facade (see whc.holidays.video)
   Without JS the facade is a plain link to the video on YouTube.
═══════════════════════════════════════════════════════════ */
.hh-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.hh-video-facade {
  position: absolute;
  inset: 0;
  display: block;
}

.hh-video-facade img,
.hh-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.hh-video-facade img {
  opacity: 0.85;
  transition: transform 0.6s ease, opacity var(--transition);
}

.hh-video-facade:hover img {
  transform: scale(1.04);
  opacity: 1;
}

.hh-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  font-size: 24px;
  color: var(--hh-red-deep);
  background: linear-gradient(135deg, var(--hh-gold-light), var(--hh-gold-deep));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transition: transform var(--transition);
}

.hh-video-play i {
  margin-left: 4px;
}

.hh-video-facade:hover .hh-video-play,
.hh-video-facade:focus-visible .hh-video-play {
  transform: scale(1.1);
}


/* ═══════════════════════════════════════════════════════════
   CARDS — giveaways + holiday events
═══════════════════════════════════════════════════════════ */
.hh-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.hh-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.hh-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.hh-card-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--card2);
}

.hh-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hh-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px 30px 30px;
}

.hh-card-kicker {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-lighter);
  margin-bottom: 8px;
}

.hh-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 14px;
}

.hh-card-meta {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--text-sub);
}

.hh-card-meta i {
  width: 18px;
  margin-right: 8px;
  text-align: center;
  color: var(--purple-lighter);
}

.hh-card-meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
}

.hh-card-meta a:hover {
  color: var(--purple-lighter);
}

.hh-card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.hh-card .btn-ghost {
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════
   CLOSING BAND
═══════════════════════════════════════════════════════════ */
.hh-cta-lines {
  list-style: none;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(247, 239, 225, 0.88);
}


/* ═══════════════════════════════════════════════════════════
   SNOW — falling flakes (see whc.holidays.snow)
   Each .hh-flake falls (translateY) while its ::after sways
   (translateX), so the two motions combine without a shared
   transform. Position, size, timing, and drift come from custom
   properties set per flake in JS.
═══════════════════════════════════════════════════════════ */
.hh-snow {
  position: fixed;
  inset: 0;
  z-index: 160;
  overflow: hidden;
  pointer-events: none;
}

.hh-flake {
  position: absolute;
  top: 0;
  left: var(--x);
  opacity: var(--o);
  will-change: transform;
  animation: hh-snow-fall var(--dur) linear var(--delay) infinite;
}

.hh-flake::after {
  content: '';
  display: block;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 72%);
  animation: hh-snow-sway var(--sway) ease-in-out var(--delay) infinite alternate;
}

/* Pauses while the tab is hidden */
.hh-snow.is-idle .hh-flake,
.hh-snow.is-idle .hh-flake::after {
  animation-play-state: paused;
}

@keyframes hh-snow-fall {
  from { transform: translate3d(0, -6vh, 0); }
  to   { transform: translate3d(0, 106vh, 0); }
}

@keyframes hh-snow-sway {
  from { transform: translate3d(calc(var(--drift) * -1), 0, 0); }
  to   { transform: translate3d(var(--drift), 0, 0); }
}

/* ##### COMMENTED OUT BY Claude Code #####
   White flakes needed an edge to show on the cream light theme.
   The holidays page is always dark now.
@media (prefers-color-scheme: light) {
  .hh-flake::after {
    background: radial-gradient(circle, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 3px rgba(124, 16, 25, 0.35);
  }
}
*/

.hh-snow-toggle {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: background var(--transition), color var(--transition);
}

/* display: inline-flex above would otherwise override [hidden] */
.hh-snow-toggle[hidden] {
  display: none;
}

.hh-snow-toggle:hover {
  color: var(--purple-lighter);
}

.hh-snow-toggle[aria-pressed='false'] {
  opacity: 0.75;
}

.hh-snow-toggle[aria-pressed='false'] i {
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════
   LIGHTS — Christmas light strands around the page edges
   (see whc.holidays.lights). The strands sit below the nav (200),
   overlay (199), and sidebar (300) and never take pointer events.
   Bulbs are placed one per swag of the wire; JS sets --spacing so
   the repeating wire curve lines up with the bulbs.
═══════════════════════════════════════════════════════════ */
.hh-lights {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}

.hh-strand {
  position: absolute;
  background-repeat: repeat-x;
  background-size: var(--spacing, 56px) 16px;
  /* One swag of dark green wire per bulb */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q30 15 60 3' fill='none' stroke='%231d3324' stroke-width='2'/%3E%3C/svg%3E");
}

.hh-strand--top {
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: 30px;
}

/* Bottom strand is the top strand flipped, so bulbs point up */
.hh-strand--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  transform: scaleY(-1);
}

.hh-strand--left,
.hh-strand--right {
  top: calc(var(--nav-h) + 30px);
  bottom: 30px;
  width: 30px;
  background-repeat: repeat-y;
  background-size: 16px var(--spacing, 56px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cpath d='M3 0 Q15 30 3 60' fill='none' stroke='%231d3324' stroke-width='2'/%3E%3C/svg%3E");
}

.hh-strand--left {
  left: 0;
}

/* Right strand is the left strand mirrored, so bulbs point in */
.hh-strand--right {
  right: 0;
  transform: scaleX(-1);
}

.hh-bulb {
  --bulb: #ff3b3b;
  position: absolute;
  top: 9px;
  left: var(--pos);
  width: 10px;
  height: 15px;
  margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 38% 30%, #fff 0 14%, var(--bulb) 48%);
  box-shadow:
    0 0 6px 1px var(--bulb),
    0 0 18px 4px color-mix(in srgb, var(--bulb) 50%, transparent);
  animation: hh-twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

/* Socket */
.hh-bulb::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 5px;
  margin-left: -3px;
  border-radius: 1px;
  background: #1d3324;
}

/* Side strands hang the same bulb sideways */
.hh-strand--left .hh-bulb,
.hh-strand--right .hh-bulb {
  top: var(--pos);
  left: 9px;
  width: 15px;
  height: 10px;
  margin: -5px 0 0;
  border-radius: 38% 62% 62% 38% / 50% 50% 50% 50%;
}

.hh-strand--left .hh-bulb::before,
.hh-strand--right .hh-bulb::before {
  top: 50%;
  left: -4px;
  width: 5px;
  height: 6px;
  margin: -3px 0 0;
}

.hh-bulb--c1 { --bulb: #3ddc6b; }
.hh-bulb--c2 { --bulb: #ffcf4a; }
.hh-bulb--c3 { --bulb: #4aa8ff; }
.hh-bulb--c4 { --bulb: #fff1c2; }

/* ##### COMMENTED OUT BY Claude Code #####
   Warm-white bulbs disappeared against cream, so they were tinted amber.
   The holidays page is always dark now.
@media (prefers-color-scheme: light) {
  .hh-bulb--c4 { --bulb: #ffb347; }
}
*/

@keyframes hh-twinkle {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
    box-shadow: 0 0 2px 0 var(--bulb);
  }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hh-section,
  .hh-band {
    padding: 96px 0;
  }

  .hh-hero {
    padding: calc(var(--nav-h) + 72px) 0 96px;
  }

  .hh-hero-grid,
  .hh-christmas-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hh-features {
    grid-template-columns: repeat(3, 1fr);
  }

  .hh-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hh-section,
  .hh-band {
    padding: 76px 0;
  }

  .hh-hero {
    padding: calc(var(--nav-h) + 56px) 0 76px;
  }

  .hh-service {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hh-service-date {
    min-height: 0;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    align-items: baseline;
  }

  .hh-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .hh-card-body {
    padding: 24px 22px 26px;
  }

  .hh-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hh-tagline {
    letter-spacing: 2.5px;
  }

  .hh-snow-toggle {
    left: 20px;
    bottom: 20px;
    height: 40px;
    padding: 0 14px;
  }

  .hh-strand--top,
  .hh-strand--bottom {
    height: 26px;
  }

  .hh-bulb {
    top: 8px;
    width: 8px;
    height: 12px;
    margin-left: -4px;
  }
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — no snow (never built), lights stay lit
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hh-bulb {
    animation: none;
  }

  .hh-service,
  .hh-card,
  .hh-video-facade img,
  .hh-video-play {
    transition: none;
  }
}

@media print {
  .hh-snow,
  .hh-lights,
  .hh-snow-toggle {
    display: none !important;
  }
}