@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--orange:#ff982f;--cream:#fff0db;--muted:#c1b4ce;--purple:#251a39}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#100b1d;color:var(--cream);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ffb957;outline-offset:5px}.world{position:fixed;inset:0;overflow:hidden;pointer-events:none}.landscape{position:absolute;inset:-2%;background:url('assets/haunted-estate.webp') center 60%/cover no-repeat;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.02);transition:transform 1.2s ease-out}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#09061755,transparent 35%,#100b1933 75%,#08061055),radial-gradient(ellipse at center,#0c061844 10%,transparent 75%)}.page{position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;padding:24px 4vw 18px}.topbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{font-size:22px;letter-spacing:.18em;font-weight:700;text-shadow:0 2px 12px #000}.brand span{display:block;font-size:9px;letter-spacing:.42em;margin-top:3px;color:#c9bcd9}.controls{display:flex;gap:10px}.controls button{border:1px solid #a391bc55;background:#120d21b8;color:#eee3fc;border-radius:30px;padding:10px 16px;font-size:12px;backdrop-filter:blur(12px)}.controls .sound{border-color:#cf895377;color:#ffc581}.sound span:first-child{font-size:16px;margin-right:4px}.controls button:hover{background:#39233e}.page main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:3vh}.heading{text-align:center;flex-shrink:0;margin:10px 0 22px}.eyebrow{font-size:10px;letter-spacing:.31em;color:#d9c8ec;margin:0 0 6px;text-shadow:0 2px 8px #000}h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(78px,10.8vw,166px);font-weight:700;line-height:.9;letter-spacing:-.055em;margin:0;color:#ff982f;text-shadow:0 2px 0 #9e4018,0 4px 0 #75311e,0 7px 0 #421628,0 12px 15px #080312,0 0 50px #ff812833;filter:drop-shadow(0 0 18px #ff700025)}.subtitle{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(24px,3vw,40px);margin:9px 0 0;color:#f4dfc9;text-shadow:0 2px 10px #000}.subtitle span{font-style:normal;letter-spacing:.055em}.invitation{font-size:13px;letter-spacing:.08em;color:#d7c8e4;margin:12px 0 0;text-shadow:0 2px 9px #000}#activities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(1080px,86vw);perspective:1000px}.card{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 24px 18px;background:linear-gradient(145deg,#352343ee,#170f25ed 65%);border:1px solid #c497d044;border-top-color:#d2ace877;border-radius:13px;box-shadow:0 5px 0 #0b0618aa,0 15px 35px #0007,inset 0 1px 18px #b878e30d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .22s,box-shadow .22s,border-color .22s;overflow:hidden}.card:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 5% 0%,#a859b928,transparent 65%);pointer-events:none}.card:hover,.card:focus-visible{transform:translateY(-5px) rotateX(var(--rx)) rotateY(var(--ry));border-color:#eb9b4c;box-shadow:0 7px 0 #251020aa,0 18px 35px #0008,0 0 25px #ec862120}.card-top{display:flex;align-items:center;justify-content:space-between;position:relative}.sigil{color:#ffa852;font-size:27px;line-height:1;text-shadow:0 0 20px #ff8f3c66}.number{font-family:Georgia,serif;font-size:14px;color:#a08dad}.card h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(23px,2.15vw,31px);line-height:1.08;margin:11px 0 8px;position:relative;color:#fff0df}.card p{font-size:14px;line-height:1.5;color:#d0bedb;margin:0 0 14px;position:relative;max-width:34ch}.card-bottom{border-top:1px solid #ae81bd2b;padding-top:12px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.14em;color:#e2b58c}.card-bottom b{font-size:19px;line-height:1;font-weight:400}.page footer{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;text-shadow:0 2px 6px #000}.page footer span:first-child{font-size:9px;letter-spacing:.2em;color:#c9b5c6}.page footer span:last-child{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;color:#e6ccab}#pagination{margin-top:12px;display:flex;align-items:center;gap:18px;font-size:12px}#pagination[hidden]{display:none}#pagination button{border:1px solid #917795;border-radius:50%;width:32px;height:32px;background:#21162b;color:#ffba6f}#pagination button:disabled{opacity:.35;cursor:default}.mist{position:absolute;width:160%;height:40%;left:-30%;bottom:-15%;background:radial-gradient(ellipse,#a48bb329,transparent 64%);filter:blur(24px);animation:mist 30s ease-in-out infinite alternate}.mist-two{bottom:22%;opacity:.35;animation-duration:42s;animation-direction:alternate-reverse}.flyer{position:absolute;left:-250px;top:var(--top);width:var(--size);animation:fly var(--duration) linear var(--delay) infinite;will-change:transform}.flyer img{display:block;width:100%;filter:drop-shadow(0 2px 4px #03020f);animation:swoop 4s ease-in-out infinite alternate}.flyer.bat img{animation:flap .45s ease-in-out infinite alternate}.ember{position:absolute;bottom:-10%;left:var(--left);width:3px;height:3px;border-radius:50%;background:#ffac5a;box-shadow:0 0 10px #ff853b;animation:ember var(--duration) linear var(--delay) infinite;opacity:0}.lightning{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 90% 0%,#ddd1ff99,transparent 70%)}.lightning.strike{animation:lightning 1.2s ease-out}.paused *,.paused *:before{animation-play-state:paused!important}.paused .landscape{transform:scale(1.02)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes fly{0%{transform:translate(-10vw,0) rotate(-5deg)}50%{transform:translate(60vw,-35px) rotate(5deg)}100%{transform:translate(calc(100vw + 500px),15px) rotate(-3deg)}}@keyframes swoop{to{transform:translateY(20px) rotate(6deg)}}@keyframes flap{to{transform:scaleY(.55) rotate(8deg)}}@keyframes mist{to{transform:translateX(20%) scaleY(1.3)}}@keyframes ember{15%{opacity:.6}85%{opacity:.25}100%{transform:translate(50px,-80vh);opacity:0}}@keyframes lightning{0%{opacity:0}10%{opacity:.65}100%{opacity:0}}
@media(min-width:1500px){#activities{width:min(1190px,80vw)}.card{padding:25px 28px}.card p{font-size:16px}.card-bottom{font-size:10px}}
@media(max-height:780px) and (min-width:701px){.page{padding-top:16px}.heading{margin:8px 0 16px}h1{font-size:clamp(72px,9vw,120px)}.subtitle{font-size:30px}.invitation{margin-top:7px}.card{padding:15px 20px 13px}.card h2{margin:7px 0;font-size:26px}.card p{margin-bottom:9px;font-size:14px;line-height:1.35}.sigil{font-size:23px}.card-bottom{padding-top:8px}}
@media(max-width:700px){.page{padding:16px 5vw 12px}.brand{font-size:17px}.brand span{font-size:7px}.controls{gap:6px}.controls button{font-size:11px;padding:8px 10px}.eyebrow{font-size:8px;letter-spacing:.18em}h1{font-size:clamp(64px,16vw,110px)}.subtitle{font-size:27px}.heading{margin:16px 0}.invitation{font-size:12px;margin-top:8px}#activities{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px}.card{padding:12px 13px}.card h2{font-size:23px;margin:7px 0}.card p{font-size:12px;line-height:1.4;margin-bottom:10px}.sigil{font-size:23px}.card-bottom{font-size:8px;letter-spacing:.05em;padding-top:8px}.card-bottom b{font-size:16px}.page footer span:first-child{font-size:7px;letter-spacing:.08em}.page footer span:last-child{font-size:14px}.landscape{background-position:55% center}.page main{padding-bottom:10px}}
@media(max-height:640px){.eyebrow,.invitation{display:none}.heading{margin:7px 0 12px}h1{font-size:68px}.subtitle{font-size:23px;margin-top:5px}.card-top{display:none}.card h2{margin-top:0}.page footer{display:none}.page main{padding-bottom:0}}
@media(max-height:440px){.page{padding-top:8px;padding-bottom:8px}.topbar .brand span{display:none}.heading{margin:0 0 8px}h1{font-size:46px}.subtitle{font-size:19px}.card p{font-size:12px;margin-bottom:7px}.card h2{font-size:22px}.card{padding:10px 14px}.card-bottom{padding-top:6px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.flyer,.ember,.lightning{display:none}.landscape,.card{transform:none!important}}