/* KLOCK TURNS 40 — early-90s Memphis / graffiti theme (no purple) */
:root{
  --pink:#ff2d8a; --teal:#00c2c7; --cyan:#3fe6ff; --yellow:#ffe500; --blue:#1d4ed8; --sky:#3b82f6;
  --ink:#111; --paper:#fffaf0;
  --f-mono:"Rubik Mono One","Lilita One",Impact,sans-serif;
  --f-shade:"Bungee Shade","Rubik Mono One",Impact,sans-serif;
  --f-bubble:"Lilita One","Rubik Mono One",Impact,sans-serif;
  --f-marker:"Permanent Marker","Comic Sans MS",cursive;
  --f-body:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --hard:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--f-body);line-height:1.5;overflow-x:hidden;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath d='M10 30c8-10 14-10 22 0s14 10 22 0' fill='none' stroke='%2300c2c7' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M120 20l18 30h-36z' fill='%23ff2d8a'/%3E%3Ccircle cx='150' cy='110' r='7' fill='%231d4ed8'/%3E%3Crect x='30' y='120' width='34' height='9' rx='2' transform='rotate(-30 47 124)' fill='%23ffe500' stroke='%23111' stroke-width='2'/%3E%3Ccircle cx='90' cy='90' r='9' fill='none' stroke='%23111' stroke-width='3'/%3E%3Cpath d='M100 150l10 10M110 150l-10 10' stroke='%23ff2d8a' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='80' r='3' fill='%23111'/%3E%3Ccircle cx='60' cy='65' r='3' fill='%23111'/%3E%3Ccircle cx='165' cy='165' r='3' fill='%23111'/%3E%3Cpath d='M140 70l12 0' stroke='%2300c2c7' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");}
img{max-width:100%;display:block}
a{color:inherit}
sup{font-size:.55em}
.small{font-size:.9rem}.muted{opacity:.7}

.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:.55rem clamp(1rem,4vw,2.5rem);background:var(--ink);color:#fff}
.brand{font-family:var(--f-mono);font-size:1.3rem;text-decoration:none;color:var(--yellow);text-shadow:3px 3px 0 var(--pink)}
.brand span{color:var(--teal)}
.topbar nav{display:flex;gap:1.2rem}
.topbar nav a{font-family:var(--f-bubble);font-size:1.05rem;letter-spacing:.03em;text-decoration:none}
.topbar nav a:hover{color:var(--yellow)}
.windbreaker-stripe{display:flex;height:12px;border-bottom:3px solid var(--ink)}
.windbreaker-stripe i{flex:1}
.windbreaker-stripe i:nth-child(1){background:var(--teal)}.windbreaker-stripe i:nth-child(2){background:var(--pink)}
.windbreaker-stripe i:nth-child(3){background:var(--yellow)}.windbreaker-stripe i:nth-child(4){background:var(--blue)}

/* HERO windbreaker color block */
.hero{position:relative;overflow:hidden;border-bottom:4px solid var(--ink);
  background:linear-gradient(118deg,var(--teal) 0 30%,var(--ink) 30% calc(30% + 4px),var(--yellow) calc(30% + 4px) 58%,var(--ink) 58% calc(58% + 4px),var(--pink) calc(58% + 4px) 80%,var(--ink) 80% calc(80% + 4px),var(--blue) calc(80% + 4px))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(var(--ink) 2px,transparent 2.5px);background-size:22px 22px}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.splat{position:absolute;width:220px;height:220px}
.sp-a{fill:var(--pink);top:-40px;left:-50px;transform:rotate(20deg)}
.sp-b{fill:var(--blue);bottom:-50px;left:38%;width:200px;height:200px}
.sp-c{fill:var(--yellow);top:8%;right:-60px;width:260px;height:260px;transform:rotate(-30deg)}
.squig{position:absolute;width:120px;height:30px;stroke:var(--ink)}
.sq-a{top:10%;left:44%;transform:rotate(-12deg)}.sq-b{bottom:9%;right:5%;stroke:#fff;transform:rotate(8deg)}
.conf{position:absolute;border:3px solid var(--ink)}
.tri{width:0;height:0;border:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:32px solid var(--pink);filter:drop-shadow(3px 3px 0 var(--ink))}
.c1{top:70%;left:3%;transform:rotate(-20deg)}.c2{top:6%;left:58%;border-bottom-color:var(--teal);transform:rotate(25deg)}
.dot{width:20px;height:20px;border-radius:50%;background:var(--yellow)}
.c3{top:40%;left:47%}.c4{bottom:6%;left:20%;background:var(--teal)}
.ring{width:40px;height:40px;border-radius:50%;border-width:6px;top:80%;right:30%}
.bar{width:60px;height:14px;background:var(--teal);top:22%;left:2%;transform:rotate(35deg)}

.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;max-width:1200px;margin:0 auto;padding:clamp(1.2rem,3vw,2.6rem) clamp(1rem,4vw,2.5rem) clamp(2rem,4vw,3rem)}
.kicker{display:inline-block;font-family:var(--f-marker);font-size:clamp(1rem,2.3vw,1.3rem);margin:0 0 .6rem;background:#fff;padding:.15em .6em;border:3px solid var(--ink);box-shadow:var(--hard);transform:rotate(-2deg)}
.headline{margin:0;line-height:.9;text-transform:uppercase}
.headline span{display:block;width:max-content}
.h-klock{font-family:var(--f-mono);font-size:clamp(3rem,9vw,6.2rem);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink),10px 10px 0 var(--pink)}
.h-turns{font-family:var(--f-marker);text-transform:none;color:var(--yellow);font-size:clamp(2.1rem,5.6vw,3.8rem);margin:.05em 0 -.1em .6em;transform:rotate(-7deg);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.h-40{font-family:var(--f-shade);font-size:clamp(5rem,15vw,9.5rem);color:var(--pink);line-height:1;text-shadow:5px 5px 0 var(--ink),10px 10px 0 var(--blue)}
.tags{display:flex;flex-wrap:wrap;gap:.7rem;margin:.9rem 0 .9rem}
.tag{font-family:var(--f-bubble);font-size:clamp(1.2rem,3vw,1.6rem);padding:.12em .7em;border:3px solid var(--ink);box-shadow:var(--hard)}
.tag-pool{background:var(--teal);color:#fff;-webkit-text-stroke:1px var(--ink);transform:rotate(-3deg)}
.tag-bbq{background:#fff;color:var(--pink);transform:rotate(2deg)}
.when-box{display:inline-block;background:var(--ink);color:#fff;padding:.55rem 1rem;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--yellow);transform:rotate(-1deg);margin-bottom:1rem}
.when-box p{margin:0}
.date-line{font-family:var(--f-bubble);font-size:clamp(1.15rem,2.6vw,1.45rem);letter-spacing:.02em}
.time{font-family:var(--f-bubble);color:var(--yellow);font-size:clamp(1.05rem,2.4vw,1.3rem)}
.hero-addr{font-weight:600;color:var(--cyan);font-size:.95rem}

/* hero countdown: cassette tapes */
.hero-countdown{margin:.1rem 0 1.1rem;max-width:560px}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.45rem,1.6vw,.9rem)}
.tape-box{position:relative;border:3px solid var(--ink);border-radius:10px;padding:6px 6px 26px;box-shadow:var(--hard)}
.tape-box:nth-child(odd){transform:rotate(-2deg)}.tape-box:nth-child(even){transform:rotate(2deg)}
.t-pink{background:var(--pink)}.t-teal{background:var(--teal)}.t-yellow{background:var(--yellow)}.t-blue{background:var(--blue)}
.label{background:#fff;border:2px solid var(--ink);border-radius:4px;text-align:center;padding:.25rem .1rem .15rem}
.cd-num{display:block;font-family:var(--f-mono);font-size:clamp(1.3rem,4.2vw,2.2rem);line-height:1.05;font-variant-numeric:tabular-nums}
.cd-lbl{display:block;font-family:var(--f-marker);font-size:clamp(.78rem,1.9vw,1rem);line-height:1.2}
.reels{position:absolute;left:18%;right:18%;bottom:5px;height:16px;background:var(--ink);border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 3px}
.reels i{width:11px;height:11px;border-radius:50%;background:#fff;border:3px dotted var(--ink);animation:reel 3s linear infinite}
.cd-note{margin:.7rem 0 0;font-family:var(--f-marker);font-size:1rem}
.cd-note strong{background:#fff;padding:0 .3em;border:2px solid var(--ink)}

.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{display:inline-block;font-family:var(--f-bubble);font-size:1.25rem;letter-spacing:.02em;text-decoration:none;padding:.55em 1.3em;border:3px solid var(--ink);border-radius:999px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn-primary{background:var(--pink);color:#fff;box-shadow:6px 6px 0 var(--ink);-webkit-text-stroke:1px var(--ink)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:6px 6px 0 var(--ink)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn-block{width:100%}

/* polaroid flyer */
.hero-art{position:relative;margin:0;justify-self:center;max-width:400px;width:100%}
.polaroid{position:relative;background:#fff;padding:14px 14px 0;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);transform:rotate(3deg)}
.polaroid img{width:100%;height:auto;border:2px solid var(--ink)}
.polaroid figcaption{font-family:var(--f-marker);font-size:clamp(1.3rem,3vw,1.7rem);text-align:center;padding:.5rem 0 .7rem;color:var(--blue)}
.tape{position:absolute;width:110px;height:32px;background:rgba(255,229,0,.78);border:1px solid rgba(0,0,0,.25);z-index:2}
.tape-l{top:-14px;left:-28px;transform:rotate(-35deg)}
.tape-r{top:-14px;right:-28px;transform:rotate(35deg);background:rgba(63,230,255,.78)}
.tape-c{top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);background:rgba(255,45,138,.6)}
.sticker{position:absolute;display:grid;place-items:center;width:72px;height:72px;font-size:2.4rem;background:#fff;border:3px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);z-index:3}
.st-1{top:16%;left:-34px;transform:rotate(-12deg);animation:bob 5s ease-in-out infinite}
.st-2{top:44%;right:-30px;transform:rotate(10deg);background:var(--yellow)}
.st-3{bottom:10%;left:-30px;background:var(--teal)}
.st-4{bottom:-20px;right:18%;background:var(--pink);animation:bob 6s ease-in-out infinite}
.burst{position:absolute;top:-26px;right:-18px;z-index:4;font-family:var(--f-mono);font-size:1.1rem;background:var(--yellow);padding:22px 14px;
  clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 45%,79% 58%,90% 84%,63% 76%,50% 100%,37% 76%,10% 84%,21% 58%,0 45%,22% 36%,15% 10%,39% 22%);transform:rotate(12deg);animation:wobble 2.8s ease-in-out infinite}

.drip{display:block;width:100%;height:56px;margin-top:-1px;fill:var(--ink)}

/* sections */
.section{position:relative;max-width:1100px;margin:0 auto;padding:clamp(2.6rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.sec-title{text-align:center;margin:0 0 2.2rem;font-weight:400;line-height:1.1}
.spray{--c:var(--pink);display:inline-block;font-family:var(--f-marker);font-size:clamp(2rem,5.5vw,3.2rem);color:#fff;background:var(--c);padding:.1em .55em .15em;border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transform:rotate(-2deg);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;position:relative}
.spray::after{content:"";position:absolute;left:12%;right:20%;top:100%;height:24px;
  background:radial-gradient(circle at 10% calc(100% - 5px),var(--c) 5px,transparent 6px),radial-gradient(circle at 45% calc(100% - 9px),var(--c) 4px,transparent 5px),radial-gradient(circle at 85% calc(100% - 3px),var(--c) 6px,transparent 7px),
    linear-gradient(var(--c),var(--c)) 9.4% 0/6px 75% no-repeat,linear-gradient(var(--c),var(--c)) 45% 0/5px 55% no-repeat,linear-gradient(var(--c),var(--c)) 85.5% 0/8px 80% no-repeat}
.spray-blue{--c:var(--blue)}.spray-teal{--c:var(--teal)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.card{position:relative;border:4px solid var(--ink);padding:1.3rem 1.1rem;box-shadow:8px 8px 0 var(--ink);transition:transform .15s}
.card:nth-child(odd){transform:rotate(-2deg)}.card:nth-child(even){transform:rotate(2deg)}
.card:hover{transform:rotate(0) translate(-2px,-2px)}
.c-pink{background:var(--pink);color:#fff}.c-yellow{background:var(--yellow)}.c-teal{background:var(--teal)}.c-blue{background:var(--blue);color:#fff}
.card-ico{display:grid;place-items:center;width:58px;height:58px;font-size:2rem;background:#fff;border:3px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
.card h3{font-family:var(--f-bubble);font-weight:400;font-size:1.6rem;margin:.6rem 0 .2rem;letter-spacing:.02em}
.card p{margin:0}
.city{font-family:var(--f-bubble);font-weight:400;font-size:1.5rem;color:var(--yellow);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}

/* travel / hotel */
.travel-intro{text-align:center;max-width:640px;margin:0 auto 2rem;font-size:1.15rem}
.travel-intro strong{font-family:var(--f-marker);font-weight:400;font-size:1.35rem;display:block;color:var(--blue)}
.hotel{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;max-width:820px;margin:0 auto;background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--pink);padding:clamp(1.3rem,4vw,2.2rem)}
.hotel-badge{position:absolute;top:-20px;left:-12px;background:var(--yellow);font-family:var(--f-mono);font-size:.78rem;padding:.5em .8em;border:3px solid var(--ink);box-shadow:var(--hard);transform:rotate(-5deg)}
.hotel-ico{display:grid;place-items:center;width:84px;height:84px;font-size:2.8rem;background:var(--teal);border:3px solid var(--ink);border-radius:16px;box-shadow:var(--hard);transform:rotate(-4deg)}
.hotel h3{font-family:var(--f-bubble);font-weight:400;font-size:clamp(1.5rem,3.6vw,2rem);line-height:1.1;margin:.2rem 0 .5rem}
.hotel-meta{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.35rem;font-weight:600}
.hotel-meta li span{display:inline-block;width:1.6em}

.rsvp-sec{max-width:720px}
.vhs{background:var(--ink);border-radius:14px;padding:14px;box-shadow:10px 10px 0 var(--teal)}
.vhs-top{display:flex;justify-content:space-between;color:#fff;font-family:var(--f-mono);font-size:.8rem;padding:0 .4rem .6rem;letter-spacing:.1em}
.vhs-label{position:relative;background:#fff;border-radius:6px;padding:clamp(1.4rem,4vw,2.2rem);text-align:center;background-image:repeating-linear-gradient(#fff 0 30px,#dbeafe 30px 32px)}
.vhs-rainbow{display:flex;height:16px;margin-top:12px;border-radius:4px;overflow:hidden}
.vhs-rainbow i{flex:1}
.vhs-rainbow i:nth-child(1){background:var(--pink)}.vhs-rainbow i:nth-child(2){background:var(--yellow)}.vhs-rainbow i:nth-child(3){background:var(--teal)}.vhs-rainbow i:nth-child(4){background:var(--blue)}
.badge-soon{position:absolute;top:-22px;right:-14px;background:var(--yellow);font-family:var(--f-mono);font-size:.75rem;padding:.55em .8em;border:3px solid var(--ink);box-shadow:var(--hard);transform:rotate(8deg)}
.rsvp-title{font-family:var(--f-mono);font-weight:400;font-size:clamp(1.5rem,5vw,2.4rem);line-height:1.1;margin:.2rem 0 .7rem;color:var(--pink);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.rsvp-form fieldset{border:0;padding:0;margin:1.3rem 0 .6rem;display:grid;gap:.85rem;text-align:left}
.rsvp-form label span{display:block;font-family:var(--f-marker);color:var(--blue);margin-bottom:.15rem}
.rsvp-form input{width:100%;font:inherit;font-size:16px;padding:.75em .9em;border:3px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--teal)}
.rsvp-form fieldset[disabled]{opacity:.8}
.rsvp-form fieldset[disabled] .btn{cursor:not-allowed}

.placeholder-note{display:table;margin:-.4rem auto 2rem;max-width:100%;font-family:var(--f-marker);font-size:1.05rem;padding:6px;background:repeating-linear-gradient(45deg,var(--yellow) 0 12px,var(--ink) 12px 24px);border:2px solid var(--ink)}
.placeholder-note span{display:block;background:var(--yellow);padding:.3em .9em;text-align:center}
.bring-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.note{position:relative;padding:2rem 1.6rem 3.4rem;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#fff}
.n-dress{transform:rotate(-1.5deg);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 60L60 0' stroke='%23ff2d8a' stroke-opacity='.12' stroke-width='10'/%3E%3C/svg%3E")}
.n-bring{transform:rotate(1.5deg);background:#fff repeating-linear-gradient(#fff 0 31px,#bfe9ff 31px 33px)}
.note h3{font-family:var(--f-mono);font-weight:400;font-size:1.25rem;margin:0 0 .8rem;color:var(--blue)}
.dress{font-family:var(--f-marker);font-size:clamp(1.8rem,4.6vw,2.5rem);line-height:1.1;margin:0 0 .5rem;color:var(--pink);text-shadow:3px 3px 0 var(--yellow)}
.glasses{position:absolute;right:1rem;bottom:.5rem;font-size:3rem}
.note ul{list-style:none;padding:0;margin:0 0 .6rem;font-size:1.15rem;font-weight:600;display:grid;gap:.45rem}
.note .small{opacity:.75}

.footer{position:relative;text-align:center;background:var(--blue);color:#fff;border-top:4px solid var(--ink)}
.footer-marquee{overflow:hidden;background:var(--yellow);color:var(--ink);border-bottom:4px solid var(--ink)}
.footer-marquee .track{display:inline-block;white-space:nowrap;font-family:var(--f-mono);padding:.55rem 0;animation:marquee 24s linear infinite}
.footer-inner{padding:2rem 1rem 1.6rem}
.footer-big{font-family:var(--f-marker);font-size:clamp(1.7rem,5vw,2.6rem);margin:.2rem 0;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.sq-word{display:inline-block;background:var(--pink);padding:0 .3em;border:3px solid var(--ink);transform:rotate(-3deg);text-shadow:none}
.footer .windbreaker-stripe{border-bottom:0;border-top:3px solid var(--ink);height:16px}

@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes wobble{0%,100%{transform:rotate(12deg)}50%{transform:rotate(4deg)}}
@keyframes reel{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width:860px){
  .hero{background:linear-gradient(160deg,var(--teal) 0 22%,var(--ink) 22% calc(22% + 4px),var(--yellow) calc(22% + 4px) 50%,var(--ink) 50% calc(50% + 4px),var(--pink) calc(50% + 4px) 76%,var(--ink) 76% calc(76% + 4px),var(--blue) calc(76% + 4px))}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .headline span{margin-left:auto;margin-right:auto}
  .h-turns{margin:.05em auto -.1em}
  .tags,.cta-row{justify-content:center}
  .hero-countdown{margin-left:auto;margin-right:auto}
  .hero-art{max-width:min(78vw,380px);margin-top:1.4rem}
  .cards{grid-template-columns:1fr 1fr}
  .bring-grid{grid-template-columns:1fr}
  .sp-b{left:auto;right:-60px;bottom:30%}
}
@media (max-width:520px){
  .topbar nav{gap:.9rem}.topbar nav a{font-size:.95rem}
  .hero-inner{padding-top:.9rem}
  .kicker{margin-bottom:.35rem;font-size:.95rem}
  .h-klock{-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink),7px 7px 0 var(--pink)}
  .h-40{font-size:4.6rem}
  .tags{margin:.6rem 0 .6rem}.tag{font-size:1.1rem}
  .when-box{padding:.4rem .9rem;margin-bottom:.8rem}
  .tape-box{padding:4px 4px 22px;border-radius:8px}
  .reels{height:14px}.reels i{width:9px;height:9px;border-width:2px}
  .cards{grid-template-columns:1fr}
  .card:nth-child(odd){transform:rotate(-1.2deg)}.card:nth-child(even){transform:rotate(1.2deg)}
  .btn{width:100%;text-align:center}
  .hotel{grid-template-columns:1fr;text-align:center}
  .hotel-ico{margin:0 auto}
  .sticker{width:56px;height:56px;font-size:1.8rem}
  .st-1{left:-16px}.st-2{right:-14px}.st-3{left:-14px}
  .burst{right:-6px}
  .splat{width:150px;height:150px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* schedule */
.hero-sched{font-size:.9rem;font-weight:600;color:#fff;border-top:2px dashed rgba(255,255,255,.4);margin-top:.3rem!important;padding-top:.3rem}
.schedule{max-width:820px;margin:3rem auto 0;background:#fff;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--blue);padding:1.4rem clamp(1rem,3vw,1.8rem)}
.sched-title{font-family:var(--f-mono);font-weight:400;font-size:1.3rem;margin:0 0 1rem;color:var(--pink)}
.sched-row{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:center;padding:.8rem 1rem;border:3px solid var(--ink);margin-bottom:.8rem}
.sched-row:last-child{margin-bottom:0}
.s-fam{background:var(--yellow)}.s-adult{background:var(--ink);color:#fff}
.sched-time{font-family:var(--f-bubble);font-size:1.3rem;letter-spacing:.02em}
.s-adult .sched-time{color:var(--cyan)}
@media (max-width:520px){.sched-row{grid-template-columns:1fr;gap:.2rem;text-align:center}}
.footer-wink{font-family:var(--f-bubble);font-size:1.25rem;margin:.4rem 0 .6rem;color:var(--yellow)}

/* ===== bright-v2 additions ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand{font-size:1.45rem;display:inline-block;transform:rotate(-4deg);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--pink),5px 5px 0 #000}
.h-klock i{font-style:normal}

/* light psychedelic wink: melty 40 + drips */
.h-40{filter:url(#melt)}
.melt-drips{display:block;width:clamp(150px,26vw,230px);height:clamp(36px,6vw,54px);fill:var(--pink);stroke:var(--ink);stroke-width:4;margin:-.32em 0 0 .05em;filter:drop-shadow(3px 3px 0 var(--ink))}
.deco{position:absolute}
.d-mush{width:86px;height:94px;bottom:6%;right:3%;transform:rotate(10deg);filter:drop-shadow(4px 4px 0 var(--ink));animation:bob 6s ease-in-out infinite}
.st-svg svg{width:82%;height:82%}
.st-2.st-svg{background:var(--pink)}
.st-3.st-svg{background:var(--yellow)}
.burst{display:grid;place-items:center;text-align:center;width:96px;height:96px;padding:0;font-size:.85rem;line-height:1.1;border-radius:50%;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--pink);clip-path:none;animation:wobble 2.8s ease-in-out infinite}

/* flyer-first hero */
.hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;max-width:1240px}
.hero-art{max-width:470px;justify-self:center}
.polaroid{transform:rotate(-2deg)}

/* lineup (bright) */
.lineup{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.lineup-tile{--c:var(--pink);position:relative;text-align:center;padding:1.5rem 1.1rem 1.3rem;border:4px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--ink);transition:transform .15s;
  background-image:radial-gradient(var(--c) 2px,transparent 2.6px);background-size:18px 18px;background-color:#fff}
.lineup-tile:nth-child(odd){transform:rotate(-1.5deg)}.lineup-tile:nth-child(even){transform:rotate(1.5deg)}
.lineup-tile:hover{transform:rotate(0) translate(-2px,-2px)}
.t-drum{--c:var(--pink)}.t-dj{--c:var(--teal)}.t-bbq{--c:#ff7a00}.t-bar{--c:var(--blue)}.t-cater{--c:var(--yellow)}.t-gift{--c:var(--pink)}
.lt-icon{width:92px;height:92px;margin:0 auto .8rem;display:grid;place-items:center;border-radius:50%;background:var(--c);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.lt-icon span{font-size:2.8rem;line-height:1;display:inline-block}
.lineup-tile h3{display:inline-block;font-family:var(--f-bubble);font-weight:400;font-size:clamp(1.35rem,2.5vw,1.7rem);line-height:1.1;margin:0 0 .45rem;background:var(--ink);color:#fff;padding:.15em .5em;transform:rotate(-2deg)}
.lineup-tile p{margin:0;font-family:var(--f-marker);font-size:1.1rem;background:#fff;display:inline-block;padding:0 .3em}
.t-gift h3{font-size:clamp(1.1rem,2vw,1.35rem)}
@media (max-width:860px){.lineup{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lineup{gap:1.1rem}.lineup-tile{padding:1.1rem .6rem 1rem}.lt-icon{width:70px;height:70px}.lt-icon span{font-size:2.1rem}.lineup-tile h3{font-size:1.15rem}.lineup-tile p{font-size:.92rem}.t-gift h3{font-size:1rem}}

/* K40 footer stamp (bright) */
.k40-stamp{position:relative;width:190px;height:190px;margin:0 auto 1rem;display:grid;place-items:center}
.k40-stamp::before{content:"";position:absolute;inset:6px;border-radius:50%;border:4px solid var(--ink);background:conic-gradient(var(--pink) 0 25%,var(--yellow) 0 50%,var(--teal) 0 75%,var(--blue) 0);box-shadow:6px 6px 0 var(--ink)}
.k40-stamp::after{content:"";position:absolute;inset:38px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
.k40-ring{position:absolute;inset:0;width:100%;height:100%;z-index:1;animation:spin 30s linear infinite}
.k40-ring text{font-family:var(--f-mono);font-size:13.5px;letter-spacing:1.5px;fill:#fff;stroke:var(--ink);stroke-width:3px;paint-order:stroke fill}
.k40-core{position:relative;z-index:2;font-family:var(--f-mono);font-size:2.6rem;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--pink);transform:rotate(-6deg)}
.k40-core b{font-weight:400;color:var(--teal)}
.footer-tune{font-family:var(--f-marker);font-size:1.35rem;margin:.6rem 0 .2rem;color:#fff;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}

/* mobile: flyer first & full width, countdown right below it */
@media (max-width:860px){
  .hero-inner{display:flex;flex-direction:column;align-items:center;padding-top:.8rem}
  .hero-copy{display:contents}
  .hero-art{order:0;max-width:520px;margin:0 0 1.3rem}
  .hero-countdown{order:1;width:100%}
  .kicker{order:2}.headline{order:3}.tags{order:4}.when-box{order:5}.cta-row{order:6;width:100%}
  .polaroid{transform:none;padding:8px 8px 0;box-shadow:6px 6px 0 var(--ink)}
  .polaroid figcaption{display:none}
  .polaroid img{border-width:2px}
  .tape-l,.tape-r{width:80px;height:24px;top:-8px}.tape-l{left:-14px}.tape-r{right:-14px}
  .st-1{left:-10px;top:20%}.st-2{right:-10px;top:46%}.st-3{left:-10px;bottom:16%}.st-4{right:12%;bottom:-16px}
  .burst{right:-8px;top:-18px}
  .melt-drips{margin:-.55em auto 0}
  .headline{margin-top:.4rem}
}
@media (max-width:520px){
  .hero-inner{padding-left:.9rem;padding-right:.9rem}
  .hero-art{width:100%}
  .burst{width:78px;height:78px;font-size:.7rem}
  .d-mush{width:60px;height:66px;bottom:2%;right:2%}
}

@media (max-width:520px){.topbar nav{gap:.7rem}.topbar nav a{font-size:.9rem}.topbar nav a:last-child{display:none}}
@media (min-width:861px){.h-klock{font-size:clamp(3rem,7.5vw,5.6rem)}.h-40{font-size:clamp(5rem,12vw,8.5rem)}}
.st-1.st-choc{background:#fff}.st-choc svg{width:92%;height:92%}
/* I-spy toadstools */
.spy{position:absolute;width:32px;height:35px;filter:drop-shadow(2px 2px 0 #111);cursor:pointer;z-index:2}
.spy:hover,.spy:active{animation:wiggle .6s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.hero-countdown{position:relative}
.spy-cd{right:4px;bottom:-6px;width:28px;height:31px}
.lineup{position:relative}
.lineup-tile{position:relative;z-index:1}
.spy-lineup{z-index:0;top:-27px;left:calc(66.6% + 2.2rem);width:34px;height:37px;transform:rotate(-8deg)}
.travel-sec{position:relative}
.spy-travel{right:clamp(.6rem,3vw,2.5rem);bottom:1.2rem;width:26px;height:29px;transform:rotate(12deg)}
.spy-footer{right:-6px;bottom:4px;width:38px;height:42px;z-index:3;transform:rotate(14deg)}
@media (max-width:860px){.spy-lineup{left:auto;right:12%}}
@media (max-width:520px){.spy-cd{bottom:-4px;right:0;width:24px;height:27px}}
/* RSVP form (live) – same VHS card look */
.rsvp-form textarea{width:100%;font:inherit;font-size:16px;padding:.75em .9em;border:3px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--teal);resize:vertical}
.rsvp-form input:focus,.rsvp-form textarea:focus{outline:3px solid var(--pink);outline-offset:2px}
.rsvp-group{border:0;margin:0;padding:0}
.group-label{display:block;font-family:var(--f-marker);color:var(--blue);margin-bottom:.35rem}
.choice-row{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{position:relative;cursor:pointer}
.rsvp-form .choice input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;box-shadow:none}
.choice b{display:inline-block;font-family:var(--f-bubble);font-weight:400;font-size:1.05rem;padding:.4em .9em;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .1s}
.choice input:checked+b{background:var(--yellow);transform:translate(-1px,-1px) rotate(-2deg);box-shadow:4px 4px 0 var(--pink)}
.choice input:focus-visible+b{outline:3px solid var(--pink);outline-offset:2px}
.if-attending,.if-traveling{display:grid;gap:.85rem}
.if-attending[hidden],.if-traveling[hidden]{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsvp-form input.invalid,.rsvp-group.invalid .choice b{border-color:var(--pink);box-shadow:4px 4px 0 var(--pink)}
.rsvp-form button[disabled]{opacity:.7;cursor:wait}
#rsvp-status.err{color:var(--pink);opacity:1;font-weight:700}
.rsvp-success{text-align:center;padding:1.2rem .5rem .4rem}
.rsvp-success .rs-icon{font-size:3.2rem;line-height:1;animation:bob 3s ease-in-out infinite}
.rsvp-success h3{font-family:var(--f-mono);font-weight:400;font-size:clamp(1.5rem,5vw,2.2rem);margin:.5rem 0 .4rem;color:var(--yellow);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--pink)}
.rsvp-success p{font-family:var(--f-marker);font-size:1.25rem;margin:0}
.hotel-meta .hotel-highlight{display:inline-block;justify-self:start;background:var(--yellow);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.2em .6em;transform:rotate(-1deg)}
.if-hotel[hidden]{display:none}
.soon-tag{display:inline-block;margin-top:.6rem;font-family:var(--f-marker);font-size:.85rem;background:var(--yellow);border:2px solid var(--ink);padding:.1em .5em;transform:rotate(-2deg)}
.lineup-sec .placeholder-note{margin-top:-1rem}

/* legibility: travel intro sits on the confetti pattern; give it a solid cream panel */
.travel-intro{background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--teal);padding:1rem 1.4rem;max-width:620px;margin:0 auto 2.4rem;transform:rotate(-.6deg)}
@media (max-width:600px){.travel-intro{padding:.9rem 1rem;margin-left:.2rem;margin-right:.2rem;box-shadow:6px 6px 0 var(--teal)}}

/* marquees (top clone + footer): 6 copies so the -50% loop never shows a gap on wide screens; 72s keeps the original speed */
.footer-marquee .track{animation-duration:72s}
.top-marquee{position:relative;z-index:31}
/* ---------------- Party Wall ---------------- */
.spray-yellow{--c:var(--yellow);color:var(--ink);-webkit-text-stroke:0}
.wall-opt{display:flex;align-items:center;gap:.6rem;cursor:pointer;margin-top:-.2rem}
.rsvp-form .wall-opt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:28px;height:28px;padding:0;margin:0;border:3px solid var(--ink);border-radius:4px;background:#fff;box-shadow:3px 3px 0 var(--teal);display:grid;place-items:center;cursor:pointer}
.rsvp-form .wall-opt input:checked{background:var(--yellow);box-shadow:3px 3px 0 var(--pink)}
.rsvp-form .wall-opt input:checked::after{content:"";width:8px;height:14px;border:solid var(--ink);border-width:0 4px 4px 0;transform:translateY(-2px) rotate(45deg)}
.rsvp-form .wall-opt input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.wall-opt b{font-family:var(--f-bubble);font-weight:400;font-size:1.05rem}
.wall-intro{text-align:center;max-width:620px;margin:0 auto 2.4rem;font-size:1.1rem;background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--pink);padding:1rem 1.4rem;transform:rotate(.6deg)}
.wall-intro strong{display:block;font-family:var(--f-marker);font-weight:400;font-size:1.3rem;color:var(--blue)}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2rem 1.6rem;align-items:start;padding:.4rem}
.wall-card{--bg:var(--yellow);--fg:var(--ink);--sh:var(--ink);position:relative;margin:0;background:var(--bg);color:var(--fg);border:4px solid var(--ink);box-shadow:7px 7px 0 var(--sh);padding:1.5rem 1.1rem 1rem;transform:rotate(var(--rot,-1.5deg));overflow-wrap:anywhere}
.wall-card::before{content:"";position:absolute;top:-15px;left:50%;width:84px;height:26px;transform:translateX(-50%) rotate(-4deg);background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.25)}
.wall-card.c-pink{--bg:var(--pink);--fg:#fff}
.wall-card.c-teal{--bg:var(--teal);--fg:var(--ink)}
.wall-card.c-yellow{--bg:var(--yellow);--fg:var(--ink);--sh:var(--blue)}
.wall-card.c-blue{--bg:var(--blue);--fg:#fff;--sh:var(--pink)}
.wall-card blockquote{margin:0 0 .9rem;font-family:var(--f-marker);font-size:1.15rem;line-height:1.35}
.wall-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:3px dashed currentColor;padding-top:.55rem}
.wall-card .wc-name{font-family:var(--f-bubble);font-size:1.15rem;letter-spacing:.02em}
.wall-card .wc-name::before{content:"— "}
.wall-card .wc-when{font-size:.8rem;font-weight:600;opacity:.85;white-space:nowrap}
.wall-card .wc-emoji{position:absolute;top:-16px;right:-14px;width:44px;height:44px;display:grid;place-items:center;font-size:1.4rem;background:#fff;border:3px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
.wall-card.is-new{animation:wallpop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes wallpop{from{transform:scale(.6) rotate(-8deg);opacity:0}to{transform:rotate(var(--rot,-1.5deg));opacity:1}}
.wall-empty{text-align:center;max-width:460px;margin:0 auto;background:#fff;border:4px dashed var(--ink);box-shadow:8px 8px 0 var(--teal);padding:1.6rem 1.2rem 1.8rem;transform:rotate(-1deg)}
.wall-empty .we-ico{font-size:2.6rem;line-height:1}
.wall-empty p{font-family:var(--f-marker);font-size:1.5rem;margin:.4rem 0 1rem}
@media (max-width:600px){
  .wall-grid{grid-template-columns:1fr;gap:1.8rem;padding:.4rem .6rem}
  .wall-intro{padding:.9rem 1rem;box-shadow:6px 6px 0 var(--pink)}
}
@media (prefers-reduced-motion:reduce){.wall-card.is-new{animation:none}}
