:root{
  --night:#0b0714; --night-2:#160d26; --ink:#f3ecff; --muted:#b9a9d6; --soft:#c8badf;
  --pumpkin:#ff7a1a; --pumpkin-2:#ffb347; --blood:#d7263d; --moon:#fff4d6; --teal:#2ec4b6;
  --card:rgba(22,13,38,.78); --line:rgba(185,169,214,.22); --field:#1d1230; --ok:#7ee0a1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--night); color:var(--ink); font-family:"Space Grotesk",system-ui,sans-serif; line-height:1.55; min-height:100vh; overflow-x:hidden}
a{color:var(--pumpkin-2)}
h2{font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 10px; line-height:1.15}
.eyebrow{display:block; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--pumpkin-2); margin-bottom:8px}
.sub{color:var(--muted); margin:0 0 22px; max-width:620px}

/* ---------- Night sky hero ---------- */
.sky{position:relative; overflow:hidden; padding:64px 16px 0;
  background:radial-gradient(1200px 600px at 75% -10%, #3b1d5e 0%, transparent 60%),
             radial-gradient(900px 500px at 10% 10%, #2a1245 0%, transparent 55%),
             linear-gradient(#0b0714, #160d26 70%, #0b0714)}
.sky.compact{padding-top:28px}
.stars{position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),radial-gradient(1px 1px at 28% 8%, #fff6 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 44% 26%, #fff9 50%, transparent 51%),radial-gradient(1px 1px at 62% 12%, #fff7 50%, transparent 51%),
  radial-gradient(1px 1px at 86% 32%, #fff6 50%, transparent 51%),radial-gradient(1.5px 1.5px at 92% 6%, #fffa 50%, transparent 51%),
  radial-gradient(1px 1px at 5% 40%, #fff5 50%, transparent 51%),radial-gradient(1px 1px at 52% 44%, #fff5 50%, transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.moon{position:absolute; right:max(16px,8vw); top:38px; width:min(30vw,190px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fffaf0, var(--moon) 45%, #e9d9a8 100%);
  box-shadow:0 0 60px 18px #fff4d633, 0 0 140px 60px #ffb3471a}
.moon::before,.moon::after{content:""; position:absolute; border-radius:50%; background:#e3cf95aa}
.moon::before{width:18%; height:18%; left:22%; top:52%}
.moon::after{width:11%; height:11%; left:58%; top:28%}
.hero{position:relative; max-width:1040px; margin:0 auto; z-index:2}
.kicker{display:inline-flex; gap:8px; align-items:center; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:var(--pumpkin-2); border:1px solid #ffb34755; padding:6px 12px; border-radius:999px; background:#ffb3470f}
h1{font-family:"Creepster",cursive; font-weight:400; letter-spacing:.03em; font-size:clamp(3.6rem,14vw,9rem); line-height:.9; margin:22px 0 10px;
  color:var(--blood); text-shadow:0 2px 0 #5c0b16, 0 0 28px #d7263d66}
.sky.compact h1{font-size:clamp(2.6rem,9vw,4.6rem); margin:14px 0 6px}
.lede{font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--muted); max-width:600px; margin:0 0 26px}
.cards{display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:28px}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); padding:18px; border-radius:16px;
  background:#ffffff0d; border:1px solid var(--line); transition:transform .15s, border-color .15s}
.card:hover{transform:translateY(-2px); border-color:#ffb34788}
.card b{font-size:1.15rem}
.card span{color:var(--muted); font-size:.95rem}
.card i{font-style:normal; color:var(--pumpkin-2); font-weight:700; margin-top:6px}
.countdown{display:flex; gap:10px; margin:0}
.cd{background:#00000040; border:1px solid var(--line); border-radius:12px; padding:10px 0; width:72px; text-align:center}
.cd b{display:block; font-size:1.6rem; line-height:1.1}
.cd small{color:var(--muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase}
.skyline{display:block; width:100%; height:clamp(90px,15vw,180px); margin-top:40px; position:relative; z-index:1}
.fog{position:absolute; left:-20%; right:-20%; bottom:0; height:120px; z-index:2; pointer-events:none;
  background:radial-gradient(60% 100% at 30% 100%, #b9a9d62a, transparent 70%),radial-gradient(50% 100% at 75% 100%, #b9a9d622, transparent 70%);
  animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(8%)}}
@media (max-width:600px){ .sky{padding-top:118px} .sky.compact{padding-top:24px} .moon{width:84px; top:18px; right:16px} .sky.compact .moon{width:56px; top:14px} }

/* ---------- Sections ---------- */
.band{max-width:1040px; margin:0 auto; padding:56px 16px}
.band + .band{border-top:1px solid var(--line)}
.split{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:880px){ .split{grid-template-columns:1fr 1.15fr; align-items:start} }
.steps{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.steps li{display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start}
.steps .n{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:#ff7a1a1f; color:var(--pumpkin-2); border:1px solid #ff7a1a55}
.steps p{margin:2px 0 0; color:var(--muted)}
.steps strong{color:var(--ink)}
.facts{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px}
.fact{background:#ffffff0d; border:1px solid var(--line); border-radius:14px; padding:10px 14px}
.fact b{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500}
.fact span{font-weight:700}
.note{margin-top:22px; padding:14px 16px; border-radius:14px; background:#ffffff08; border:1px dashed var(--line); color:var(--muted); font-size:.95rem}

/* ---------- Forms ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 18px; box-shadow:0 30px 80px #00000066; backdrop-filter:blur(6px)}
@media (min-width:520px){ .panel{padding:28px} }
.panel h3{font-size:1.4rem; margin:0 0 14px}
.row{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:520px){ .row.two{grid-template-columns:1fr 1fr} .row.addr{grid-template-columns:.8fr 1.2fr} }
label{display:block; font-weight:500; font-size:.92rem; margin-bottom:6px}
.req{color:var(--pumpkin-2)}
input,select{width:100%; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; padding:12px; outline:none}
input:focus,select:focus{border-color:var(--pumpkin); box-shadow:0 0 0 3px #ff7a1a33}
.field{margin-bottom:14px}
.hint{font-size:.82rem; color:var(--muted); margin-top:4px}
.guardian{border-left:3px solid var(--pumpkin); padding:12px 0 2px 14px; margin:4px 0 14px; display:none}
.guardian.show{display:block}
.guardian h4{margin:0 0 10px; font-size:1rem}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--muted); margin:6px 0 18px}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--teal); flex:none; padding:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
button{width:100%; font:inherit; font-weight:700; font-size:1.05rem; cursor:pointer; background:linear-gradient(180deg,var(--pumpkin-2),var(--pumpkin)); color:#1a0b00;
  border:0; border-radius:12px; padding:15px; box-shadow:0 10px 30px #ff7a1a44}
button[disabled]{opacity:.6; cursor:wait}
.msg{margin-top:14px; font-size:.95rem; min-height:1.2em}
.msg.err{color:#ff8a8a}
.done{display:none; text-align:center; padding:20px 4px}
.done.show{display:block}
.done .big{font-family:"Creepster",cursive; font-size:3rem; color:var(--ok); line-height:1; margin:6px 0 10px}
.done p{color:var(--muted)}

/* ---------- Porch-light map ---------- */
.map-head{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; margin-bottom:14px}
.live{display:inline-flex; align-items:center; gap:10px; font-weight:700}
.live .dot{width:12px; height:12px; border-radius:50%; background:var(--pumpkin); box-shadow:0 0 0 0 #ff7a1a99; animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px #ff7a1a00}100%{box-shadow:0 0 0 0 #ff7a1a00}}
.updated{color:var(--muted); font-size:.88rem}
.map-wrap{border:1px solid var(--line); border-radius:20px; background:#0b0714; overflow:hidden; height:clamp(380px,62vh,620px); position:relative; z-index:0}
.map-wrap.tall{height:calc(100vh - 230px); min-height:420px}
.leaflet-container{background:#0b0714; font-family:"Space Grotesk",system-ui,sans-serif}
.haunt-tiles{filter:invert(1) hue-rotate(200deg) saturate(.55) brightness(.82) contrast(1.15)}
.leaflet-control-attribution{background:#0b0714cc !important; color:var(--muted) !important; font-size:10px}
.leaflet-control-attribution a{color:var(--pumpkin-2) !important}
.leaflet-bar a{background:#1d1230 !important; color:var(--ink) !important; border-color:var(--line) !important}
.porch-pin{background:none; border:0}
.porch-pin svg{position:relative; display:block; filter:drop-shadow(0 2px 3px #000a)}
.pin-halo{position:absolute; left:50%; top:55%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:radial-gradient(circle, #ffb347bb 0%, #ffb34700 70%)}
.porch-pin .pin-teal{position:absolute; right:-9px; bottom:-3px; width:16px; height:16px}
.mob-pin{background:none; border:0}
.mob-star{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blood); color:var(--moon); font-size:20px;
  box-shadow:0 0 0 8px #d7263d44, 0 4px 14px #000a}
.mob-label{position:absolute; left:50%; top:44px; transform:translateX(-50%); white-space:nowrap; background:var(--blood); color:var(--moon); font-weight:700; font-size:13px; padding:4px 8px; border-radius:8px}
.locate-btn{width:auto; font:inherit; font-size:.9rem; font-weight:700; padding:9px 12px; border-radius:10px; background:#1d1230; color:var(--ink);
  border:1px solid var(--line); box-shadow:0 4px 14px #0008; cursor:pointer}
.scroll-hint{display:none; color:var(--muted); font-size:.85rem; margin:8px 2px 0}
@media (pointer:coarse){ .scroll-hint{display:block} }
.legend{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:14px; color:var(--soft); font-size:.95rem}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend svg{width:26px; height:26px}
.glow{animation:glow 2.4s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55}to{opacity:1}}
.empty{color:var(--muted); margin:12px 2px 0}
.btn-link{display:inline-block; text-decoration:none; background:var(--pumpkin); color:#1a0b00; font-weight:700; padding:12px 18px; border-radius:12px}

footer{text-align:center; color:var(--muted); font-size:.85rem; padding:24px 16px 40px; border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){ .stars,.fog,.glow,.live .dot{animation:none} html{scroll-behavior:auto} }