/* In the Tri · Halloween theme for /trunk-or-treat (2026.09.16).
   Loaded only on that page, after site.css and growth.css, and scoped to
   body.halloween so nothing else on the site changes. The nav, logo and
   footer keep their layout; only the colours go to night. */
body.halloween{
  --night:#150E1F; --night-2:#1F1530; --night-3:#2B1D42; --edge:#3B2A57;
  --pumpkin:#F07A22; --pumpkin-sh:#A8471A; --candy:#FFB547; --candle:#FFE08A;
  --ghost:#F6EEDA; --ghost-soft:#D4C8E6; --witch:#6D3FA8;
  background:var(--night) radial-gradient(ellipse at 50% -10%, #2E1B4A 0%, transparent 60%) no-repeat;
  color:var(--ghost);
}
body.halloween::before{ opacity:.12; }
body.halloween a{ color:var(--candy); }

/* nav and footer */
.halloween .nav{ background:#0E0916; border-bottom-color:var(--pumpkin); }
.halloween .brand span{ color:var(--ghost); }
.halloween .nav-links a{ color:var(--ghost-soft); }
.halloween .nav-links a:hover{ border-color:var(--pumpkin); }
/* growth.css paints every .btn-orange green; on the night page the guide buttons go pumpkin. */
.halloween .nav-links .btn-orange, .halloween .signup .btn-orange{ background:var(--pumpkin); color:#150E1F; border-color:#000; box-shadow:3px 3px 0 #000; }
.halloween .nav-links .btn-orange:hover, .halloween .signup .btn-orange:hover{ background:var(--candy); }
.halloween .footer{ background:#0E0916; border-top-color:var(--pumpkin); color:var(--ghost-soft); }
.halloween .footer-links a{ color:var(--ghost); }
.halloween .footer-links a:hover{ color:var(--candy); }
.halloween .footer-contact a{ color:var(--ghost); }
.halloween .partners-row{ background:#0E0916; border-top-color:var(--edge); }
.halloween .partners-names a, .halloween .partners-names span{ color:var(--candy); }
.halloween .partners-how{ color:var(--ghost-soft); }

/* hero (2026.10.16: flat screen-print redraw; no glows, gradients or fog) */
.spooky{ position:relative; overflow:hidden; margin:26px 0 8px; min-height:380px; border:2px solid var(--pumpkin);
  border-radius:14px; box-shadow:5px 5px 0 #000;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 22% 42%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 36% 12%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 48% 30%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 58% 8%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 64% 46%, #fff 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 90% 52%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 96% 14%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 6% 58%, #fff 60%, transparent 62%),
    #1C1230; }
.spooky .moon{ position:absolute; right:9%; top:30px; width:160px; height:auto; }
.spooky .bats{ position:absolute; right:3%; top:26px; width:280px; height:auto; }
.spooky .bat{ transform-box:fill-box; transform-origin:center; }
.spooky .b1{ animation:hover-a 5s ease-in-out infinite; }
.spooky .b2{ animation:hover-b 4s ease-in-out infinite; }
.spooky .b3{ animation:hover-a 6s ease-in-out infinite reverse; }
.spooky .b4{ animation:hover-b 4.5s ease-in-out infinite reverse; }
@keyframes hover-a{ 0%,100%{ translate:0 0; } 50%{ translate:6px -8px; } }
@keyframes hover-b{ 0%,100%{ translate:0 0; } 50%{ translate:-5px 6px; } }
.spooky .web{ position:absolute; left:0; top:0; width:84px; height:auto; }
.spooky .spider{ animation:dangle 7s ease-in-out infinite; }
@keyframes dangle{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }
.spooky .ridge{ position:absolute; left:0; right:0; bottom:0; width:100%; height:200px; }
.spooky-copy{ position:relative; z-index:2; padding:46px 40px 200px 84px; max-width:660px; }
.spooky-copy .nw{ white-space:nowrap; }
.halloween .kicker{ color:var(--candy); }
.halloween .kicker::before{ content:"🎃 "; }
.halloween .kicker::after{ content:" 🎃"; }
.spooky-copy h1{ font-family:'Creepster','Lilita One',Georgia,serif; font-weight:400; font-size:62px; line-height:1.02;
  letter-spacing:.03em; color:var(--pumpkin); margin:10px 0 14px;
  text-shadow:4px 4px 0 #000; }
.spooky-copy p{ color:var(--ghost); font-size:17px; line-height:1.55; margin:0; max-width:540px; }
.halloween .actions button.btn{ background:var(--pumpkin); color:#150E1F; border-color:#000; box-shadow:3px 3px 0 #000; }
.halloween .actions button.btn:hover{ background:var(--candy); }

/* headings, boxes and lists */
.halloween .page-head p{ color:var(--ghost-soft); }
.halloween .page-head h2{ font-family:'Creepster','Lilita One',Georgia,serif; font-weight:400; font-size:38px;
  letter-spacing:.03em; color:var(--pumpkin); margin:8px 0 8px; text-shadow:2px 2px 0 #000; }
.halloween .notice{ background:var(--night-3); border:2px dashed var(--pumpkin); color:var(--ghost); box-shadow:3px 3px 0 #000; }
.halloween .card{ background:var(--night-2); border-color:var(--edge); box-shadow:4px 4px 0 #000; color:var(--ghost); }
.halloween .facts dt{ color:var(--candy); }
.halloween .facts dd{ color:var(--ghost); }
.halloween .facts dd .sub{ color:var(--ghost-soft); }
.halloween .day-head{ color:var(--pumpkin); border-bottom:2px dashed var(--edge); }
.halloween .day-head::before{ content:"🦇 "; }
.halloween .ev{ background:var(--night-2); border-color:var(--edge); box-shadow:3px 3px 0 #000; transition:border-color .15s, transform .15s; }
.halloween .ev:hover{ background:#271A3B; border-color:var(--pumpkin); transform:translateY(-2px); }
.halloween .ev-date{ background:var(--night-3) !important; border-color:var(--pumpkin); }
.halloween .ev-date .d{ color:var(--candy) !important; }
.halloween .ev-date .n{ color:var(--ghost); }
.halloween .ev-date .m{ color:var(--ghost-soft); }
.halloween .ev h3, .halloween .ev h3 a{ color:var(--ghost) !important; }
.halloween .ev-time, .halloween .ev-venue{ color:var(--ghost-soft); }
.halloween .ev-price{ color:var(--candy); }
.halloween .ev-cta{ color:var(--pumpkin); }
.halloween .ev-all{ color:var(--ghost-soft); }
.halloween .footer-links a:focus-visible, .halloween a:focus-visible, .halloween button:focus-visible{ outline-color:var(--candy); }
.halloween .page-head .footer-links a{ color:var(--ghost); }
.halloween .page-head .footer-links a:hover{ color:var(--candy); }

/* signup block */
.halloween .signup{ background:var(--night-2); border-color:var(--pumpkin); box-shadow:4px 4px 0 #000; }
.halloween .signup h2{ color:var(--ghost); }
.halloween .signup p{ color:var(--ghost-soft); }
.halloween .signup .signup-fine{ color:var(--ghost-soft); }

@media (max-width:720px){
  .spooky{ min-height:0; }
  .spooky .moon{ width:96px; right:-8px; top:14px; }
  .spooky .bats{ width:150px; right:-10px; top:14px; }
  .spooky .web{ width:56px; }
  .spooky-copy{ padding:96px 22px 150px; }
  .spooky-copy h1{ font-size:42px; }
  .spooky .ridge{ height:140px; }
  .halloween .page-head h2{ font-size:30px; }
}
@media (prefers-reduced-motion:reduce){
  .spooky .bat, .spooky .spider, .halloween .ev{ animation:none; transition:none; }
  .halloween .ev:hover{ transform:none; }
}
/* Email ask above the list (2026.10.12): site.css sets it in --ink, unreadable on the night sky. */
.halloween .list-ask{ color:var(--ghost-soft); }
.halloween main .list-ask a{ color:var(--candy); font-weight:700; }