/* Holiday themes.
   ===============================================================
   One theme at a time is switched on by an attribute on the page:
   <html data-theme="halloween">. With no attribute the site looks as it
   always has: nothing in this file applies. The attribute is put there
   by static/js/theme-boot.js, which asks the site's own server which
   theme the owners have on (dashboard → Site Theme).

   Each theme does three things:
     1. recolors the site through the same variables style.css uses
        (--navy, --gold, --card, …), so every page follows, not just the
        home page;
     2. dresses the header (a garland hanging under it), on every page;
     3. decorates the home page's hero: the rainbow, the space around
        it, and things drifting through (snow, leaves, hearts, confetti).

   The decorations are ordinary <img> elements placed by
   static/js/theme.js (pictures in /images/themes/). They are
   aria-hidden and never take a click. Everything that moves stops for
   visitors who have asked their device for reduced motion.

   The pictures' addresses end in ?v=1: raise the number here and in
   theme.js (VERSION) when one is redrawn, so browsers fetch it again. */

/* A first visit waits a moment (400ms at most) for the theme's name
   before the page is shown, so it isn't drawn in the standard colors
   and then again in the theme's (theme-boot.js). */
html.th-wait body { visibility: hidden; }

/* The notice someone sees while trying a theme out (?theme-preview=…). */
.th-preview {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1000;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; justify-content: center;
  max-width: calc(100vw - 2rem); padding: 0.6rem 1.1rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.88); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.9rem; line-height: 1.3; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.th-preview a { color: #ffe08a; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .th-preview { border-radius: 14px; } }

/* ------------------------------------------------------------------
   The stage: where decorations go
   ------------------------------------------------------------------ */

/* The rainbow, with a box exactly its size for things placed on it. */
.hero-art { position: relative; width: min(520px, 80vw); margin: 0 auto 1rem; }
.hero-art .rainbow-art { width: 100%; margin: 0; position: relative; }
.th-art, .th-art-back { position: absolute; inset: 0; pointer-events: none; }
.th-art-back { z-index: 0; }
.hero-art .rainbow-art { z-index: 1; }
.th-art { z-index: 2; }
.th-art img, .th-art-back img, .th-scene img { position: absolute; height: auto; max-width: none; user-select: none; }

/* The whole hero: corners, sides, the strip along its bottom edge. */
[data-theme] .hero { position: relative; overflow: hidden; isolation: isolate; }
[data-theme] .hero > .wrap { position: relative; z-index: 2; }
.th-scene, .th-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.th-scene { z-index: 1; }
/* Drifting things pass BEHIND the words, and fade most of the way out
   while they cross the column of text, so nothing gets in the way of
   reading. Around the rainbow and down the sides they show in full. */
.th-sky {
  z-index: 1;
  -webkit-mask-image: linear-gradient(#000 0, #000 400px, transparent 520px), linear-gradient(90deg, #000 0, #000 14%, rgba(0, 0, 0, 0.3) 24%, rgba(0, 0, 0, 0.3) 76%, #000 86%, #000 100%);
  mask-image: linear-gradient(#000 0, #000 400px, transparent 520px), linear-gradient(90deg, #000 0, #000 14%, rgba(0, 0, 0, 0.3) 24%, rgba(0, 0, 0, 0.3) 76%, #000 86%, #000 100%);
}
.th-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%;
  background-image: var(--th-ground, none);
}

/* Hanging under the header: a strip across the top of the page's
   content (theme.js puts it first inside <main>), so it scrolls away
   with the page instead of following the reader down it, and never
   lies over the menu when that is open on a phone.
     --th-garland-h    how tall it is
     --th-garland-top  how far below the header it starts (clearing the
                       header's colored edge)
     --th-hang         the room pages other than the home page leave for
                       it above their first heading */
[data-theme] main { position: relative; }
.th-garland, .th-garland-b {
  position: absolute; left: 0; right: 0; top: var(--th-garland-top, 0px); height: var(--th-garland-h, 56px); z-index: 3; pointer-events: none;
  background-repeat: repeat-x; background-position: center top; background-size: auto 100%;
}
.th-garland { background-image: var(--th-garland, none); }
.th-garland-b { background-image: var(--th-garland-b, none); opacity: 0; }
/* The home page's hero is laid out with the garland over its top. Every
   other page starts a little lower, so its heading is clear of it.
   (A browser too old for :has() just lets the garland overlap.) */
@supports selector(:has(*)) {
  [data-theme] main:not(:has(> .hero)) { padding-top: var(--th-hang, 36px); }
}

/* Things drifting down (or, for hearts, up) through the hero. Each is
   a zero-width column the height of the hero, moved by its own height. */
.th-drop { position: absolute; top: 0; height: 100%; width: 0; animation: th-fall 14s linear infinite; }
.th-drop > * { position: absolute; left: 0; top: 0; display: block; animation: th-sway 5s ease-in-out infinite alternate; }
.th-drop.th-up { animation-name: th-rise; }
.th-confetti { width: 10px; height: 16px; border-radius: 2px; animation-name: th-tumble !important; animation-duration: 2.4s !important; animation-timing-function: linear !important; animation-direction: normal !important; }

@keyframes th-fall  { 0% { transform: translateY(-10%); opacity: 0; } 6% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes th-rise  { 0% { transform: translateY(100%); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-12%); opacity: 0; } }
@keyframes th-sway  { from { transform: translateX(-16px) rotate(-14deg); } to { transform: translateX(16px) rotate(14deg); } }
@keyframes th-tumble { from { transform: rotate3d(1, 1, 0, 0deg); } to { transform: rotate3d(1, 1, 0, 360deg); } }
@keyframes th-bob   { from { transform: translateY(-9px) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); } to { transform: translateY(9px) rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); } }
@keyframes th-flap  { from { transform: translateY(-8px) scale(var(--sx, 1), 1) rotate(var(--r, 0deg)); } to { transform: translateY(8px) scale(calc(var(--sx, 1) * 0.86), 1.06) rotate(var(--r, 0deg)); } }
@keyframes th-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes th-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } 50% { opacity: 0.35; transform: scale(0.8) rotate(var(--r, 0deg)); } }
@keyframes th-beat  { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.13); } 30% { transform: scale(0.98); } }
@keyframes th-flicker { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 138, 0, 0.75)); } 45% { filter: drop-shadow(0 0 5px rgba(255, 138, 0, 0.35)); } 60% { filter: drop-shadow(0 0 20px rgba(255, 170, 40, 0.9)); } }
@keyframes th-blink-a { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes th-blink-b { 0%, 45% { opacity: 0; } 55%, 100% { opacity: 1; } }

.th-bob { animation: th-bob 3.6s ease-in-out infinite alternate; }
.th-flap { animation: th-flap 0.9s ease-in-out infinite alternate; }
.th-swing { animation: th-swing 3.2s ease-in-out infinite alternate; transform-origin: 50% 0; }
.th-twinkle { animation: th-twinkle 2.6s ease-in-out infinite; }
.th-beat { animation: th-beat 1.6s ease-in-out infinite; }
.th-flicker { animation: th-flicker 2.2s ease-in-out infinite; }
.th-still { transform: rotate(var(--r, 0deg)) scaleX(var(--sx, 1)); }
.th-blink-a { animation: th-blink-a 1.6s steps(1) infinite; }
.th-blink-b { animation: th-blink-b 1.6s steps(1) infinite; }

/* Fireworks. Each is a rocket's trail and a shell: the trail climbs,
   the shell bursts open from a point, hangs, then sinks and fades. The
   shells are added to the sky as light (screen), so two that overlap
   brighten each other the way real ones do. */
.th-fw { position: absolute; pointer-events: none; }
.th-scene .th-fw img, .th-art-back .th-fw img, .th-art .th-fw img {
  position: static; display: block; width: 100%; height: auto; mix-blend-mode: screen;
  transform-origin: 50% 48.4%; animation: th-shell 6s linear infinite; will-change: transform, opacity;
}
.th-fw .th-trail {
  position: absolute; left: 50%; top: 48.4%; width: 3px; height: 36%; margin-left: -1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(rgba(255, 246, 220, 0.95), rgba(255, 205, 130, 0.5) 22%, rgba(255, 205, 130, 0));
  animation: th-rocket 6s linear infinite;
}
/* The kinds that fall (willow, palm) are drawn with their centre higher, and hang longer. */
.th-fw.th-tall img { transform-origin: 50% 37.5%; animation-name: th-shell-fall !important; }
.th-fw.th-tall .th-trail { top: 37.5%; }
@keyframes th-rocket { 0% { transform: translateY(420%); opacity: 0; } 2% { opacity: 0.9; } 12% { transform: translateY(0); opacity: 0.9; } 15%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes th-shell {
  0%, 12% { transform: scale(0.03); opacity: 0; animation-timing-function: cubic-bezier(0.08, 0.7, 0.2, 1); }
  13% { opacity: 1; }
  34% { transform: scale(0.96); opacity: 1; animation-timing-function: linear; }
  50% { transform: scale(1) translateY(1.5%); opacity: 0.9; }
  72%, 100% { transform: scale(1.04) translateY(5%); opacity: 0; }
}
@keyframes th-shell-fall {
  0%, 12% { transform: scale(0.03); opacity: 0; animation-timing-function: cubic-bezier(0.08, 0.7, 0.2, 1); }
  13% { opacity: 1; }
  32% { transform: scale(0.9); opacity: 1; animation-timing-function: linear; }
  60% { transform: scale(1, 1.06) translateY(3%); opacity: 0.85; }
  84%, 100% { transform: scale(1.02, 1.14) translateY(9%); opacity: 0; }
}

/* Lettering: things laid over the title picture (blood running off it). */
.th-title { position: relative; width: min(900px, 92vw); margin: 0 auto 1.5rem; }
.th-title .hero-title { width: 100%; margin: 0; }
.th-title-art { position: absolute; inset: 0; pointer-events: none; }
.th-title-art img { position: absolute; height: auto; max-width: none; user-select: none; }

/* Low mist drifting along the ground, and a far-off flash of lightning. */
.th-fog, .th-fog::after {
  position: absolute; left: 0; right: 0; bottom: 0; height: 280px; pointer-events: none;
  background-image: var(--th-fog, none); background-repeat: repeat-x; background-position: 0 100%; background-size: 1200px 100%;
}
.th-fog { opacity: 0.55; animation: th-fog 80s linear infinite; }
.th-fog::after { content: ""; height: 100%; opacity: 0.6; transform: scaleX(-1); animation: th-fog 130s linear infinite reverse; }
@keyframes th-fog { from { background-position-x: 0; } to { background-position-x: -1200px; } }
.th-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(70% 60% at 78% 0%, rgba(214, 205, 255, 0.5), rgba(214, 205, 255, 0) 70%); animation: th-flash 11s linear infinite; }
.th-bolt { opacity: 0; animation: th-flash 11s linear infinite; }
/* Two flickers and a fade, once in eleven seconds: well inside the
   limit of three flashes a second that keeps flashing safe to look at. */
@keyframes th-flash { 0%, 89.8%, 100% { opacity: 0; } 90.3% { opacity: 0.9; } 91.2% { opacity: 0.12; } 92.2% { opacity: 0.7; } 95% { opacity: 0; } }

@keyframes th-eyes { 0%, 8%, 100% { opacity: 0; transform: scaleY(1); } 14%, 44% { opacity: 1; transform: scaleY(1); } 46% { opacity: 1; transform: scaleY(0.08); } 48%, 70% { opacity: 1; transform: scaleY(1); } 72% { transform: scaleY(0.08); opacity: 1; } 74%, 84% { opacity: 1; transform: scaleY(1); } 92% { opacity: 0; transform: scaleY(1); } }
@keyframes th-haunt { 0% { opacity: 0.2; transform: translate(-14px, 10px) scale(0.96); } 50% { opacity: 0.9; transform: translate(6px, -12px) scale(1.03); } 100% { opacity: 0.35; transform: translate(16px, 6px) scale(1); } }
@keyframes th-reach { from { transform: translateY(16%) rotate(-5deg); } to { transform: translateY(0) rotate(4deg); } }
@keyframes th-creep { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-3%, 2%) rotate(-4deg); } 45% { transform: translate(2%, 5%) rotate(3deg); } 70% { transform: translate(4%, -2%) rotate(5deg); } }
@keyframes th-loom { from { transform: translateY(6px) scale(0.985); } to { transform: translateY(-4px) scale(1.015); } }
@keyframes th-sputter { 0%, 100% { opacity: 1; filter: brightness(1); } 22% { opacity: 0.82; filter: brightness(0.85); } 41% { opacity: 1; filter: brightness(1.25); } 63% { opacity: 0.88; filter: brightness(0.92); } 80% { opacity: 1; filter: brightness(1.15); } }
@keyframes th-fan { from { transform: rotate(-1.4deg) scale(0.99); } to { transform: rotate(1.4deg) scale(1.01); } }
@keyframes th-shimmer { from { opacity: 0; } to { opacity: 1; } }
.th-eyes { animation: th-eyes 9s ease-in-out infinite; transform-origin: 50% 50%; }
.th-haunt { animation: th-haunt 7s ease-in-out infinite alternate; }
.th-reach { animation: th-reach 2.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.th-creep { animation: th-creep 7s ease-in-out infinite; }
.th-loom { animation: th-loom 4.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
/* A slow shimmer, not a flicker: it changes about once a second. */
.th-sputter { animation: th-sputter 2.4s ease-in-out infinite; transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; }
.th-fan { animation: th-fan 5s ease-in-out infinite alternate; transform-origin: 50% 96%; }
.th-drop.th-plumb > * { animation: none; }

/* On a phone: fewer, smaller side decorations; the rainbow keeps its own. */
@media (max-width: 760px) {
  .th-wide { display: none; }
  .th-corner { width: 150px !important; }
  .th-corner-r { left: calc(100% - 150px) !important; }
  .th-scene img { transform-origin: top left; }
  html[data-theme] { --th-garland-h: 40px; --th-hang: 28px; }
  .th-ground { height: 96px; }
  .th-fog { height: 150px; }
  .th-drop:nth-child(2n) { display: none; }
  /* The words start higher up a phone's screen, so drifting things fade out sooner. */
  .th-sky {
    -webkit-mask-image: linear-gradient(#000 0, #000 300px, transparent 400px), linear-gradient(90deg, #000 0, #000 6%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.22) 86%, #000 94%, #000 100%);
    mask-image: linear-gradient(#000 0, #000 300px, transparent 400px), linear-gradient(90deg, #000 0, #000 6%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.22) 86%, #000 94%, #000 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-drop, .th-drop > *, .th-bob, .th-flap, .th-swing, .th-twinkle, .th-beat, .th-flicker, .th-blink-a, .th-blink-b,
  .th-eyes, .th-haunt, .th-reach, .th-creep, .th-loom, .th-sputter, .th-fan, .th-fog, .th-fog::after, .th-fw img, .th-garland, .th-garland-b { animation: none !important; }
  .th-drop, .th-fw .th-trail, .th-flash, .th-bolt { display: none; }
  .th-blink-b { opacity: 0; }
  .th-haunt { opacity: 0.8; }
}

/* ------------------------------------------------------------------
   Halloween: the frightening side. Black, blood red, bone. A blood
   moon behind a dead tree, the Reaper in the graveyard, hands coming
   up out of the graves, eyes in the dark, blood off the header and the
   title, a web across the rainbow, mist, far lightning.
   ------------------------------------------------------------------ */
[data-theme="halloween"] {
  --navy: #050307; --navy-alt: #0d060a; --card: #130910; --border: #3a1420;
  --gold: #8f0a0a; --gold-light: #ff6a4a; --text: #f1e9e2; --text-dim: #bba99f;
  --accent-border: rgba(209, 25, 25, 0.5); --frost: #9dff3c;
  --th-garland: url("/images/themes/drip.svg?v=1");
  --th-ground: url("/images/themes/graveyard.svg?v=1");
  --th-fog: url("/images/themes/fog.svg?v=1");
  background-color: #050307;
  --th-garland-h: 92px; --th-garland-top: 2px; --th-hang: 74px;
}
[data-theme="halloween"] .site-header { background: linear-gradient(#1a070b, #0a0305); box-shadow: 0 2px 0 #5c0505; }
[data-theme="halloween"] .hero {
  background:
    radial-gradient(46% 40% at 14% 24%, rgba(190, 24, 12, 0.34), rgba(190, 24, 12, 0) 70%),
    radial-gradient(50% 36% at 50% 22%, rgba(120, 12, 20, 0.3), rgba(120, 12, 20, 0) 70%),
    linear-gradient(#0a0408, #050307 55%, #14050a);
  box-shadow: inset 0 0 160px 30px #000;
  padding-top: 6.5rem; padding-bottom: 16rem;
}
[data-theme="halloween"] .th-ground { height: 250px; }
[data-theme="halloween"] .rainbow-art { filter: saturate(0.6) brightness(0.7) contrast(1.1) drop-shadow(0 0 28px rgba(255, 40, 20, 0.3)); }
[data-theme="halloween"] .hero-title { filter: drop-shadow(0 0 18px rgba(255, 30, 10, 0.7)) drop-shadow(0 4px 0 rgba(74, 3, 3, 0.95)); }
[data-theme="halloween"] .tagline { color: #ff6a4a; }
[data-theme="halloween"] .btn { background: #8f0a0a; box-shadow: 0 0 0 1px #ff3b1f inset, 0 6px 22px rgba(255, 20, 0, 0.35); }
[data-theme="halloween"] .btn-ghost { background: rgba(5, 3, 7, 0.6); box-shadow: none; border-color: #6b2a30; }
@media (max-width: 760px) {
    [data-theme="halloween"] .th-ground { height: 150px; }
  [data-theme="halloween"] .hero { padding-bottom: 10rem; box-shadow: inset 0 0 60px 10px #000; }
  [data-theme="halloween"] .th-scene .th-reach { width: 44px !important; bottom: 40px !important; }
}

/* ------------------------------------------------------------------
   Christmas: the joyful side. Evergreen, berry red, warm gold, snow.
   Lights that twinkle, snow that falls.
   ------------------------------------------------------------------ */
[data-theme="christmas"] {
  --navy: #07231a; --navy-alt: #0d3324; --card: #0f3a29; --border: #1f5a41;
  --gold: #b3121f; --gold-light: #ffd56b; --text: #fbfdf9; --text-dim: #c3dccd;
  --accent-border: rgba(255, 213, 107, 0.45); --frost: #bfe9ff;
  --th-garland: url("/images/themes/lights-a.svg?v=1");
  --th-garland-b: url("/images/themes/lights-b.svg?v=1");
  --th-ground: url("/images/themes/snowdrift.svg?v=1");
  background-color: #07231a;
  --th-garland-h: 60px; --th-garland-top: 3px; --th-hang: 44px;
}
[data-theme="christmas"] .site-header { background: linear-gradient(#c21a2b, #9c0f1c); box-shadow: 0 3px 0 #ffd56b; }
[data-theme="christmas"] .th-garland { animation: th-blink-a 1.6s steps(1) infinite; }
[data-theme="christmas"] .th-garland-b { animation: th-blink-b 1.6s steps(1) infinite; }
[data-theme="christmas"] .hero {
  background:
    radial-gradient(55% 42% at 50% 22%, rgba(255, 213, 107, 0.2), rgba(255, 213, 107, 0) 70%),
    linear-gradient(#0a2e22, #07231a 65%);
  padding-top: 6rem; padding-bottom: 12rem;
}
[data-theme="christmas"] .th-ground { height: 190px; }
[data-theme="christmas"] .hero-title { filter: drop-shadow(0 0 14px rgba(255, 213, 107, 0.45)); }
[data-theme="christmas"] .tagline { color: #ffd56b; }
[data-theme="christmas"] .btn { background: #c8102e; box-shadow: 0 0 0 2px #fff inset; }
[data-theme="christmas"] .btn-ghost { background: #0f5132; box-shadow: 0 0 0 2px #ffd56b inset; border-color: transparent; }

/* ------------------------------------------------------------------
   Valentine's Day: wine red and hot pink, a neon heart, balloons.
   ------------------------------------------------------------------ */
[data-theme="valentines"] {
  --navy: #26061a; --navy-alt: #3a0b29; --card: #3d0c2b; --border: #6a1d4a;
  --gold: #c2185b; --gold-light: #ff9cc4; --text: #fff5f9; --text-dim: #e9bcd0;
  --accent-border: rgba(255, 95, 162, 0.5); --frost: #ffc2dc;
  --th-garland: url("/images/themes/heart-garland.svg?v=1");
  background-color: #26061a;
  --th-garland-h: 56px; --th-garland-top: 0px; --th-hang: 40px;
}
[data-theme="valentines"] .site-header { background: linear-gradient(#cf1a63, #a80f55); }
[data-theme="valentines"] .hero {
  background:
    radial-gradient(50% 40% at 50% 24%, rgba(255, 61, 139, 0.3), rgba(255, 61, 139, 0) 70%),
    linear-gradient(#300822, #26061a 70%);
  padding-top: 6rem;
}
/* Room under the rainbow for the point of the neon heart. */
[data-theme="valentines"] .hero-art { margin-bottom: 7.5rem; }
[data-theme="valentines"] .hero-title { filter: drop-shadow(0 0 16px rgba(255, 61, 139, 0.6)); }
[data-theme="valentines"] .tagline { color: #ff9cc4; }
[data-theme="valentines"] .btn { background: linear-gradient(#d81b60, #ad1457); }
[data-theme="valentines"] .btn-ghost { background: transparent; border-color: #ff5fa2; }

/* ------------------------------------------------------------------
   New Year's Eve: midnight over the city. Black and champagne gold;
   slow gold willows and silver chrysanthemums above a skyline whose
   clock is a minute from twelve; foil fringe, a disco ball, confetti.
   ------------------------------------------------------------------ */
[data-theme="newyear"] {
  --navy: #07070b; --navy-alt: #12121a; --card: #15151e; --border: #3a3524;
  --gold: #876510; --gold-light: #f5d98a; --text: #fbf8ee; --text-dim: #c2bca8;
  --accent-border: rgba(245, 217, 138, 0.5); --frost: #dfe6f5;
  --th-garland: url("/images/themes/tinsel-a.svg?v=1");
  --th-garland-b: url("/images/themes/tinsel-b.svg?v=1");
  --th-ground: url("/images/themes/skyline.svg?v=1");
  background-color: #07070b;
  --th-garland-h: 58px; --th-garland-top: 3px; --th-hang: 42px;
}
[data-theme="newyear"] .site-header { background: linear-gradient(#17171f, #0b0b10); box-shadow: 0 3px 0 #d4af37; }
[data-theme="newyear"] .th-garland-b { animation: th-shimmer 0.9s ease-in-out infinite alternate; }
[data-theme="newyear"] .hero {
  background:
    radial-gradient(60% 44% at 50% 22%, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0) 70%),
    linear-gradient(#0a0a12, #07070b 60%, #0f0d0a);
  padding-top: 7rem; padding-bottom: 15rem;
}
[data-theme="newyear"] .th-ground { height: 230px; }
[data-theme="newyear"] .hero-title { filter: drop-shadow(0 0 14px rgba(245, 217, 138, 0.5)); }
[data-theme="newyear"] .tagline { color: #f5d98a; }
[data-theme="newyear"] .btn { background: linear-gradient(#f5d98a, #c99a12); color: #14110a; }
[data-theme="newyear"] .btn-ghost { background: rgba(7, 7, 11, 0.6); color: #f5d98a; border-color: #d4af37; }
@media (max-width: 760px) {
  [data-theme="newyear"] .th-ground { height: 130px; }
  [data-theme="newyear"] .hero { padding-bottom: 9rem; }
}

/* ------------------------------------------------------------------
   Mardi Gras: carnival on Bourbon Street. Purple, green and gold; a fan
   of plumes behind the rainbow like a headdress, a crown, a mask, beads
   on everything, gas lamps, an ironwork balcony, doubloons raining down.
   ------------------------------------------------------------------ */
[data-theme="mardigras"] {
  --navy: #1b0630; --navy-alt: #2a0d47; --card: #2c0f4a; --border: #54297d;
  --gold: #6d28d9; --gold-light: #f6c21c; --text: #fbf7ff; --text-dim: #d6c3ee;
  --accent-border: rgba(246, 194, 28, 0.5); --frost: #7be39b;
  --th-garland: url("/images/themes/beads.svg?v=1");
  --th-ground: url("/images/themes/balcony.svg?v=1");
  background-color: #1b0630;
  --th-garland-h: 76px; --th-garland-top: 0px; --th-hang: 58px;
}
[data-theme="mardigras"] .site-header { background: linear-gradient(#7c3aed, #4c1d95); }
[data-theme="mardigras"] .hero {
  background:
    radial-gradient(50% 40% at 50% 26%, rgba(246, 194, 28, 0.2), rgba(246, 194, 28, 0) 70%),
    radial-gradient(30% 34% at 10% 46%, rgba(255, 184, 74, 0.2), rgba(255, 184, 74, 0) 70%),
    radial-gradient(30% 34% at 90% 46%, rgba(255, 184, 74, 0.2), rgba(255, 184, 74, 0) 70%),
    linear-gradient(#230a3d, #1b0630 70%);
  padding-top: 14rem; padding-bottom: 12rem;
}
[data-theme="mardigras"] .th-ground { height: 150px; }
[data-theme="mardigras"] .hero-title { filter: drop-shadow(0 0 14px rgba(246, 194, 28, 0.5)); }
[data-theme="mardigras"] .tagline { color: #f6c21c; }
[data-theme="mardigras"] .btn { background: #15803d; box-shadow: 0 0 0 2px #f6c21c inset; }
[data-theme="mardigras"] .btn-ghost { background: rgba(27, 6, 48, 0.6); box-shadow: none; border-color: #f6c21c; }
@media (max-width: 760px) {
    [data-theme="mardigras"] .th-ground { height: 90px; }
  [data-theme="mardigras"] .hero { padding-top: 9rem; padding-bottom: 7.5rem; }
}

/* ------------------------------------------------------------------
   St. Patrick's Day: the pot of gold at the end of our rainbow.
   ------------------------------------------------------------------ */
[data-theme="stpatricks"] {
  --navy: #05210f; --navy-alt: #0a331a; --card: #0b381c; --border: #1d6536;
  --gold: #0f7436; --gold-light: #f6c21c; --text: #f8fdf8; --text-dim: #bfdcc8;
  --accent-border: rgba(246, 194, 28, 0.5); --frost: #7be39b;
  --th-garland: url("/images/themes/shamrock-garland.svg?v=1");
  background-color: #05210f;
  --th-garland-h: 56px; --th-garland-top: 3px; --th-hang: 40px;
}
[data-theme="stpatricks"] .site-header { background: linear-gradient(#127c3b, #0c6a30); box-shadow: 0 3px 0 #f6c21c; }
[data-theme="stpatricks"] .hero {
  background:
    radial-gradient(55% 42% at 50% 22%, rgba(123, 227, 155, 0.22), rgba(123, 227, 155, 0) 70%),
    linear-gradient(#072a14, #05210f 70%);
  padding-top: 6rem;
}
[data-theme="stpatricks"] .hero-title { filter: drop-shadow(0 0 14px rgba(246, 194, 28, 0.45)); }
[data-theme="stpatricks"] .tagline { color: #f6c21c; }
[data-theme="stpatricks"] .btn { background: linear-gradient(#f6c21c, #b8860b); color: #14210c; }
[data-theme="stpatricks"] .btn-ghost { background: transparent; color: #fff; border-color: #2fbf68; }

/* ------------------------------------------------------------------
   Pride: every stripe, turned all the way up.
   ------------------------------------------------------------------ */
[data-theme="pride"] {
  --navy: #0b0a26; --navy-alt: #15133d; --card: #171542; --border: #34307a;
  --gold: #5b21b6; --gold-light: #ffd166; --text: #ffffff; --text-dim: #c5c3e6;
  --accent-border: rgba(255, 209, 102, 0.5); --frost: #5bcefa;
  --th-garland: url("/images/themes/pennants-pride.svg?v=1");
  background-color: #0b0a26;
  --th-garland-h: 50px; --th-garland-top: 6px; --th-hang: 40px;
}
[data-theme="pride"] .site-header {
  background: linear-gradient(#1b1947, #11103a);
  border-bottom: 6px solid; border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #f5a9b8, #5bcefa, #ffffff) 1;
}
[data-theme="pride"] .hero {
  background:
    radial-gradient(34% 40% at 16% 30%, rgba(228, 3, 3, 0.2), rgba(228, 3, 3, 0) 70%),
    radial-gradient(34% 40% at 84% 30%, rgba(36, 64, 142, 0.5), rgba(36, 64, 142, 0) 70%),
    radial-gradient(40% 36% at 50% 20%, rgba(255, 237, 0, 0.14), rgba(255, 237, 0, 0) 70%),
    linear-gradient(#0f0e33, #0b0a26 70%);
  padding-top: 6rem;
}
[data-theme="pride"] .hero-title { filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35)); }
[data-theme="pride"] .tagline { color: #ffd166; }
[data-theme="pride"] .btn { background: linear-gradient(90deg, #c40303, #c2185b 55%, #7b1fa2); }
[data-theme="pride"] .btn-ghost { background: linear-gradient(90deg, #24408e, #732982); border-color: transparent; }

/* ------------------------------------------------------------------
   Fourth of July: the finale over the rainbow. A dusk sky going red at
   the horizon; quick round shells and rings in red, white and blue,
   some bursting behind the rainbow itself; sparklers, bunting, a
   hillside strung with party lights.
   ------------------------------------------------------------------ */
[data-theme="july4"] {
  --navy: #05143a; --navy-alt: #0b2259; --card: #0d275f; --border: #27468f;
  --gold: #b3122b; --gold-light: #9cc3ff; --text: #ffffff; --text-dim: #bccbea;
  --accent-border: rgba(255, 255, 255, 0.4); --frost: #9cc3ff;
  --th-garland: url("/images/themes/bunting-usa.svg?v=1");
  --th-ground: url("/images/themes/hillside.svg?v=1");
  background-color: #05143a;
  --th-garland-h: 62px; --th-garland-top: 4px; --th-hang: 48px;
}
[data-theme="july4"] .site-header { background: linear-gradient(#c8102e, #9c0c23); box-shadow: 0 4px 0 #ffffff; }
[data-theme="july4"] .hero {
  background: linear-gradient(#040d2c, #071a49 45%, #1a1a52 78%, #3a1a4a);
  padding-top: 9.5rem; padding-bottom: 12.5rem;
}
[data-theme="july4"] .th-ground { height: 190px; }
[data-theme="july4"] .hero-title { filter: drop-shadow(0 0 14px rgba(156, 195, 255, 0.5)); }
[data-theme="july4"] .tagline { color: #ffffff; }
[data-theme="july4"] .btn { background: #c8102e; box-shadow: 0 0 0 2px #fff inset; }
[data-theme="july4"] .btn-ghost { background: #1d3f8f; box-shadow: 0 0 0 2px #fff inset; border-color: transparent; }
@media (max-width: 760px) {
  [data-theme="july4"] .th-ground { height: 110px; }
  [data-theme="july4"] .hero { padding-top: 7rem; padding-bottom: 8rem; }
}

/* ------------------------------------------------------------------
   Thanksgiving: fall harvest. Roasted browns, amber, falling leaves.
   ------------------------------------------------------------------ */
[data-theme="thanksgiving"] {
  --navy: #22100a; --navy-alt: #331a0f; --card: #371c10; --border: #6a3a1c;
  --gold: #b45309; --gold-light: #f6b24a; --text: #fff8ef; --text-dim: #e3cdb6;
  --accent-border: rgba(246, 178, 74, 0.5); --frost: #f6c21c;
  --th-garland: url("/images/themes/leaf-garland.svg?v=1");
  background-color: #22100a;
  --th-garland-h: 56px; --th-garland-top: 3px; --th-hang: 40px;
}
[data-theme="thanksgiving"] .site-header { background: linear-gradient(#ad4f0c, #8f3a08); box-shadow: 0 3px 0 #f6b24a; }
[data-theme="thanksgiving"] .hero {
  background:
    radial-gradient(55% 42% at 50% 22%, rgba(246, 178, 74, 0.24), rgba(246, 178, 74, 0) 70%),
    linear-gradient(#2b150c, #22100a 70%);
  padding-top: 6rem;
}
[data-theme="thanksgiving"] .hero-title { filter: drop-shadow(0 0 14px rgba(246, 178, 74, 0.5)); }
[data-theme="thanksgiving"] .tagline { color: #f6b24a; }
[data-theme="thanksgiving"] .btn { background: linear-gradient(#b8560f, #8f3a08); }
[data-theme="thanksgiving"] .btn-ghost { background: transparent; border-color: #f6b24a; }


/* Version 24: the phone menu wears each theme's header colour (style.css,
   "The phone menu"), with a bright edge in the theme's accent, so it stands
   out from the page as clearly as the full-size menu bar does. Dark-headed
   themes get a panel a step lighter than their page. */
[data-theme="halloween"]    { --menu-bg: #2a0a10; --menu-edge: #ff6a1a; }
[data-theme="christmas"]    { --menu-bg: #a3101f; --menu-edge: #ffd56b; }
[data-theme="valentines"]   { --menu-bg: #b0105a; --menu-edge: #ffc1dc; }
[data-theme="newyear"]      { --menu-bg: #1d1d28; --menu-edge: #d4af37; }
[data-theme="mardigras"]    { --menu-bg: #5b21b6; --menu-edge: #f6c21c; }
[data-theme="stpatricks"]   { --menu-bg: #0c6a30; --menu-edge: #f6c21c; }
[data-theme="pride"]        { --menu-bg: #24215c; --menu-edge: #ffed00; }
[data-theme="july4"]        { --menu-bg: #a50d26; --menu-edge: #ffffff; }
[data-theme="thanksgiving"] { --menu-bg: #94400a; --menu-edge: #f6b24a; }
@media (max-width: 1020px) {
  [data-theme="pride"] .site-nav { border-bottom: 6px solid; border-image: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #24408e, #732982, #f5a9b8, #5bcefa, #ffffff) 1; }
}