/* Halloween theme. Only applies when has the "halloween" class, which the snippet in the page's
adds from 1 to 31 October (UK time), or with ?halloween=1 to preview. Everything is added by assets/halloween.js. */
html.halloween{
--accent:#c2410c;
--accent-hover:#9a3412;
--accent-muted:rgba(194,65,12,.14);
--crest:#f97316;
--calm:#6d28d9;
--calm-muted:rgba(109,40,217,.12);
}
html.halloween .btn-primary,html.halloween .links .btn-primary{color:#fff;box-shadow:0 12px 26px -14px rgba(194,65,12,.9)}
html.halloween .crest{box-shadow:0 0 0 6px rgba(249,115,22,.25)}
html.halloween .hero h1 em{color:var(--accent)}
/* bats: a fixed layer that never catches clicks */
.hw-bats{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.hw-bat{position:absolute;left:-90px;top:var(--y,20%);width:var(--w,46px);color:#1b1620;filter:drop-shadow(0 0 3px rgba(249,115,22,.7));opacity:0;animation:hw-fly var(--d,16s) linear var(--dl,0s) infinite}
.hw-bat svg{display:block;width:100%;height:auto;animation:hw-flap .32s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes hw-fly{0%{transform:translate(0,0);opacity:0}6%{opacity:.85}50%{transform:translate(55vw,-6vh)}94%{opacity:.85}100%{transform:translate(112vw,4vh);opacity:0}}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
/* hero badge */
.hw-badge{display:inline-flex;align-items:center;gap:8px;margin:12px 0 4px;padding:7px 14px 7px 10px;border-radius:999px;background:#2a1238;color:#ffd9b8;font:800 14px/1 var(--body)}
.hw-badge svg{width:20px;height:20px;flex:none}
/* banner under the hero */
.hw-banner{position:relative;padding:30px 0;margin:10px 0 0;background:linear-gradient(100deg,#2a0f3d 0%,#3d1552 45%,#7c2d12 100%);color:#fff;overflow:hidden}
.hw-banner .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap}
.hw-banner .hw-pump{width:clamp(56px,7vw,78px);flex:none}
.hw-banner .hw-txt{flex:1 1 320px;min-width:0}
.hw-banner h2{font:400 clamp(28px,3.6vw,44px)/1.05 var(--display);letter-spacing:.01em;margin:0}
.hw-banner h2 em{font-style:normal;color:#fdba74}
.hw-banner p{color:#eadcf3;margin:8px 0 0;max-width:60ch}
.hw-banner .hw-offer{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:8px;background:rgba(253,186,116,.16);border:1px dashed #fdba74;color:#ffe2c4;font:500 13px/1.3 var(--mono);letter-spacing:.06em}
.hw-banner .hw-acts{display:flex;gap:10px;flex-wrap:wrap}
.hw-banner .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
/* cobwebs in section corners */
.hw-web{position:absolute;top:0;width:clamp(80px,11vw,140px);height:auto;color:rgba(27,22,32,.22);pointer-events:none}
.hw-web.l{left:0}
.hw-web.r{right:0;transform:scaleX(-1)}
/* Halloween party section */
.hw-party{position:relative;padding:clamp(60px,8vw,100px) 0;background:linear-gradient(180deg,rgba(109,40,217,.06),rgba(249,115,22,.08))}
.hw-party .hw-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.hw-party h2{font:400 clamp(36px,5vw,58px)/1 var(--display);letter-spacing:.01em;margin:12px 0 16px}
.hw-party ul{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:10px}
.hw-party li{display:flex;gap:10px;align-items:flex-start}
.hw-party li svg{width:22px;height:22px;flex:none;margin-top:2px}
.hw-pics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hw-pic{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--ink);position:relative;aspect-ratio:1}
.hw-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw-pic span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(27,22,32,.85);color:#fff;font:800 13px/1 var(--body)}
.hw-pic.wide{grid-column:1 / -1;aspect-ratio:16/9}
@media (max-width:860px){
.hw-party .hw-cols{grid-template-columns:1fr}
.hw-bat:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){.hw-bats{display:none}}