@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Titan+One&display=swap');
/* Halloween theme for the Style Audio home page (Kyle, 2026-10-20): a classic Gothic horror look in flat colour: blood red,
   the brand orange and amber, near black. Loaded only while the theme is on (see HOLIDAYS in make_gage_site.py); the logo,
   header band and buttons keep their brand colours. */
:root { --hw-night: #0b0a0d; --hw-blood: #C8202A; --hw-blood-deep: #8E1B1B;
  --hw-sky: #D9572B; --hw-mustard: #F1C93B; --hw-slate: #5D7F8F; --hw-storm: #2E3140;
  --stripes: linear-gradient(180deg, var(--hw-sky) 0 25%, var(--hw-mustard) 25% 50%, var(--hw-slate) 50% 75%, var(--hw-storm) 75% 100%); }
/* the poster's own colours (orange-red sky, mustard title, slate cloud, storm) as the site's four-stripe band */
.holiday[data-for="halloween"] { display: block; }
.holiday[data-for="halloween"]::before, .holiday[data-for="halloween"]::after { content: ""; display: block; height: 16px; background: var(--stripes); }
.hw-inner { max-width: 1120px; margin: 0 auto; padding: 28px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.hw-art { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; transform: rotate(-2deg); box-shadow: 12px 12px 0 #000; }
.hw-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-gold); }
.hw-title { font-family: "Metal Mania", "Titan One", "Arial Black", sans-serif; font-weight: 400; font-size: clamp(46px, 7vw, 84px); line-height: .95; color: #F1C93B; text-transform: lowercase; margin: 10px 0 14px; letter-spacing: .01em; }
.hw-copy p { color: var(--cream); font-size: 18px; margin: 0 0 20px; max-width: 32em; }
@media (max-width: 760px) { .hw-inner { grid-template-columns: 1fr; text-align: center; padding: 24px 16px; } .hw-art { max-width: 300px; } .hw-copy p { margin-left: auto; margin-right: auto; } }
/* Easter eggs for curious clickers (Kyle, 2026-10-20): the lit window, the bat and the moon. Nothing announces them. */
.hw-inner { position: relative; }
.hw-window, .hw-bat, .hw-moon { cursor: pointer; }
.hw-bat { transform-box: fill-box; }
.hw-bat { transition: opacity .6s; }
.hw-bat.flown { opacity: 0; transition: none; }
/* the red shows only where the painted moon shows, so the clouds stay in front of it */
.hw-moon-red { opacity: 0; transition: opacity .6s; }
.hw-moon.blood + .hw-moon-red { opacity: .9; }
.hw-invite { position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px));
  background: #5B2A86; color: #F6E9F2; border: 3px solid #C2367A; padding: 26px 24px; text-align: center;
  font-family: "Instrument Serif", Georgia, serif; font-size: 19px; line-height: 1.35; }
.hw-invite p { margin: 0 0 10px; }
.hw-invite-small { font-family: Inter, system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hw-invite-name { font-family: "Titan One", "Arial Black", sans-serif; font-size: 40px; color: #F59A23; text-shadow: 4px 4px 0 #4E7A2E; margin: 6px 0 10px !important; }
.hw-invite-close { margin-top: 8px; font: 600 13px Inter, system-ui, sans-serif; background: #C2367A; color: var(--cream); border: 0; padding: 9px 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hw-moon-red { transition: none; } }
.hw-invite-art { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: cover; object-position: center 20%; margin: -8px 0 14px; border: 2px solid #C2367A; }
.hw-invite { max-height: calc(100vh - 32px); overflow: auto; }
/* the pack page's two downloads in the poster's colours (Kyle, Oct 21): Pro mustard, Player orange-red */
.hw-btn-pro { background: var(--hw-mustard); color: #0b0a0d; }
.hw-btn-pro:hover { background: #ddb52f; color: #0b0a0d; }
.hw-btn-player { background: var(--hw-sky); color: #0b0a0d; }
.hw-btn-player:hover { background: #c44c24; color: #0b0a0d; }