:root { --yellow:#ffe600; --red:#ef3340; --blue:#1464f4; --ink:#101010; --paper:#fffaf0; --green:#53cf55; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); font-family:"DM Sans",sans-serif; background-color:#f4e9cb; background-image:radial-gradient(#101010 1px,transparent 1px); background-size:12px 12px; }
main { overflow:hidden; }
.music-control { position:fixed; z-index:50; right:18px; bottom:18px; display:grid; width:52px; height:52px; min-height:52px; place-items:center; padding:0; color:white; background:var(--red); border:3px solid var(--ink); border-radius:50%; box-shadow:5px 5px 0 var(--ink); cursor:pointer; font:700 1rem "DM Sans",sans-serif; transition:.2s; }
.music-control span { display:grid; place-items:center; width:100%; height:100%; line-height:1; }
.music-control:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.music-control.is-paused { color:var(--ink); background:var(--yellow); }
.music-control.needs-action { animation:pulse 1.4s infinite; }

.hero { position:relative; min-height:900px; display:grid; align-content:center; justify-items:center; overflow:hidden; padding:100px 24px; isolation:isolate; text-align:center; background:linear-gradient(135deg,var(--yellow) 0 48%,#ffbb00 48% 52%,var(--red) 52%); border-bottom:10px solid var(--ink); }
.speed-lines { position:absolute; z-index:-2; inset:-20%; background:repeating-conic-gradient(from 12deg at center,transparent 0 8deg,rgba(255,255,255,.26) 9deg 11deg); animation:spin 35s linear infinite; }
.breaking,.mission,.kicker { position:relative; z-index:4; margin:0; padding:8px 15px; color:white; background:var(--ink); font:700 .8rem "DM Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; transform:rotate(-2deg); }
.breaking { z-index:8; }
.hero-title { position:relative; z-index:4; margin:22px 0 0; line-height:.68; filter:drop-shadow(9px 9px 0 white); transform:rotate(-3deg); }
.hero-title span,.hero-title strong { display:block; font-family:"Bowlby One SC",sans-serif; font-weight:400; text-transform:uppercase; -webkit-text-stroke:4px var(--ink); }
.hero-title span { color:var(--blue); font-size:clamp(5rem,15vw,10rem); }
.hero-title strong { color:var(--red); font-size:clamp(5rem,17vw,11.5rem); }
.hero-names { position:relative; z-index:7; margin:38px 0 15px; padding:9px 15px; color:var(--ink); background:white; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--blue); font:400 clamp(.8rem,2vw,1.05rem) "Archivo Black"; text-transform:uppercase; transform:rotate(1deg); }
.hero-names span { color:var(--red); padding:0 6px; }
.mission { margin-top:38px; color:var(--ink); background:white; transform:rotate(2deg); }
.hero h1 { position:relative; z-index:4; margin:18px 0 0; color:white; font:400 clamp(2rem,6vw,4.6rem)/.96 "Archivo Black",sans-serif; text-transform:uppercase; text-shadow:4px 4px 0 var(--ink); transform:rotate(1deg); }
.sticker { position:absolute; z-index:2; margin:0; overflow:hidden; background:white; border:6px solid white; box-shadow:7px 7px 0 var(--ink); }
.sticker img { display:block; width:100%; height:100%; object-fit:cover; }
.sticker--iron-one { top:35px; left:3%; width:190px; height:255px; transform:rotate(-8deg); }
.sticker--iron-two { right:3%; bottom:35px; width:205px; height:280px; transform:rotate(7deg); }
.sticker--wonder { top:35px; right:5%; width:205px; height:205px; border-radius:50%; transform:rotate(8deg); }
.sticker--shrek { bottom:25px; left:4%; width:190px; height:260px; transform:rotate(-6deg); }
.comic-bubble { position:absolute; z-index:5; padding:14px 17px; color:var(--ink); background:white; border:4px solid var(--ink); border-radius:50%; box-shadow:5px 5px 0 var(--blue); font:400 1.1rem "Archivo Black",sans-serif; text-transform:uppercase; }
.comic-bubble--one { top:190px; left:15%; transform:rotate(-10deg); }
.comic-bubble--two { right:9%; bottom:90px; transform:rotate(9deg); }
.pow { position:absolute; z-index:3; top:42%; left:3%; color:var(--yellow); font:400 3rem "Bowlby One SC"; -webkit-text-stroke:3px var(--ink); transform:rotate(-18deg); }
.chaos-img { position:absolute; z-index:6; margin:0; background:white; border:5px solid white; box-shadow:6px 6px 0 var(--ink); }
.chaos-img img { display:block; width:100%; height:100%; object-fit:cover; }
.chaos-img--goku { right:25%; bottom:18px; width:145px; height:105px; transform:rotate(-5deg); }

.event-card { position:relative; display:grid; grid-template-columns:minmax(360px,.85fr) minmax(0,1.15fr); width:min(1100px,calc(100% - 36px)); margin:70px auto; overflow:hidden; background:var(--paper); border:7px solid var(--ink); box-shadow:14px 14px 0 var(--blue); }
.toretto-panel { position:relative; min-height:720px; overflow:hidden; background:var(--ink); }
.toretto-panel img { width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(.65); }
.toretto-panel p { position:absolute; right:18px; bottom:18px; left:18px; margin:0; padding:18px; color:white; background:rgba(0,0,0,.84); border:3px solid white; font-size:.9rem; line-height:1.5; text-transform:none; overflow-wrap:normal; word-break:normal; hyphens:none; }
.toretto-panel p strong { font-weight:600; }
.event-info { padding:70px 60px 220px; }
.event-info .kicker,.rsvp .kicker { display:inline-block; background:var(--red); }
.event-info h2,.rsvp h2 { margin:15px 0 28px; font:400 clamp(3rem,5vw,4.6rem)/.82 "Bowlby One SC"; letter-spacing:-.035em; text-transform:uppercase; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.info-grid article { padding:18px; background:var(--yellow); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); text-align:center; transform:rotate(-2deg); }
.info-grid article:nth-child(2) { color:white; background:var(--blue); transform:rotate(2deg); }
.info-grid span,.location span { display:block; font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.info-grid strong { display:block; font:400 3rem "Archivo Black"; }
.info-grid p { margin:0; font-weight:700; }
.location { margin-top:32px; padding-left:16px; border-left:8px solid var(--red); }
.location strong { display:block; margin-top:5px; font:400 1.55rem "Archivo Black"; text-transform:uppercase; }
.location p { margin:4px 0 0; }
.crazy-dress { margin-top:24px; padding:13px 15px; background:var(--yellow); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--red); }
.crazy-dress span { display:block; font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.crazy-dress strong { display:block; margin-top:4px; font:400 1.25rem "Archivo Black"; text-transform:uppercase; }
.map-button { display:inline-block; margin-top:24px; padding:14px 20px; color:white; background:var(--ink); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--red); font-weight:700; text-decoration:none; text-transform:uppercase; transition:.2s; }
.map-button:hover { color:var(--ink); background:var(--yellow); transform:translate(-2px,-2px); }
.wonder-banner { position:absolute; right:-30px; bottom:-35px; width:230px; margin:0; transform:rotate(-9deg); }
.wonder-banner img { display:block; width:100%; border:5px solid white; box-shadow:6px 6px 0 var(--ink); }
.wonder-banner figcaption { padding:7px; color:white; background:var(--red); border:3px solid var(--ink); font:700 .7rem "DM Sans"; text-align:center; text-transform:uppercase; }
.pelon-stamp { position:absolute; top:20px; left:32%; width:100px; margin:0; transform:rotate(8deg); }
.pelon-stamp img { width:100px; height:100px; object-fit:cover; border:5px solid var(--yellow); border-radius:50%; box-shadow:4px 4px 0 var(--ink); }
.pelon-stamp figcaption { padding:4px; background:white; border:2px solid var(--ink); font-size:.55rem; font-weight:700; text-align:center; text-transform:uppercase; }
.chaos-img--boo { right:20px; top:18px; width:120px; height:120px; border-radius:50%; overflow:hidden; transform:rotate(7deg); }

.rsvp { width:min(760px,calc(100% - 28px)); margin:100px auto; padding:60px; background:#fff; border:7px solid var(--ink); box-shadow:-13px 13px 0 var(--green),13px -13px 0 var(--red); text-align:center; transform:rotate(-.5deg); }
.rsvp h2 { margin-bottom:18px; font-size:clamp(2.8rem,8vw,5.5rem); }
.rsvp>p:not(.kicker) { font-weight:700; }
.rsvp form { margin-top:30px; text-align:left; }
.reaction-deck { display:flex; justify-content:center; align-items:center; gap:18px; margin:25px 0 14px; }
.reaction-deck figure { position:relative; width:145px; margin:0; background:white; border:5px solid white; box-shadow:5px 5px 0 var(--ink); transform:rotate(-4deg); }
.reaction-deck figure+figure { transform:rotate(4deg); }
.reaction-deck img { display:block; width:100%; height:115px; object-fit:cover; }
.reaction-deck figcaption { padding:6px 3px; color:white; background:var(--blue); font:700 .62rem "DM Sans"; text-transform:uppercase; }
.reaction-deck figure+figure figcaption { background:var(--red); }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; border:0; }
.choices legend { grid-column:1/-1; width:100%; margin-bottom:10px; font-weight:700; text-align:center; }
.choices input { position:absolute; opacity:0; }
.choices span { display:grid; min-height:54px; place-items:center; padding:10px; background:var(--paper); border:4px solid var(--ink); cursor:pointer; font:400 .9rem "Archivo Black"; text-transform:uppercase; }
.choices input:checked+span { color:white; background:var(--blue); box-shadow:5px 5px 0 var(--ink); transform:translate(-3px,-3px); }
.choice-message,.form-message { min-height:25px; margin:16px 0; color:var(--red); font-weight:700; text-align:center; }
.no-reaction { width:min(100%,280px); margin:14px auto 28px; padding:7px; background:white; border:5px solid var(--ink); box-shadow:8px 8px 0 var(--red); text-align:center; animation:reactionIn .42s cubic-bezier(.18,.89,.32,1.28) both; transform:rotate(-3deg); }
.no-reaction[hidden] { display:none; }
.no-reaction img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.no-reaction figcaption { padding:9px 5px 3px; font:400 .9rem "Archivo Black"; text-transform:uppercase; }
.attendee-options { margin:25px 0; }
.field { display:grid; gap:7px; font-weight:700; text-transform:uppercase; }
.field input,.field select { width:100%; min-height:50px; padding:10px 12px; background:white; border:3px solid var(--ink); border-radius:0; font:600 1rem "DM Sans"; }
.people-fields { display:grid; gap:14px; margin-top:18px; }
.person-card { padding:16px; background:var(--yellow); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.person-card h3 { margin:0 0 12px; font:400 1.15rem "Archivo Black"; text-transform:uppercase; }
.person-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.submit-button { width:100%; min-height:58px; color:white; background:var(--red); border:4px solid var(--ink); box-shadow:7px 7px 0 var(--ink); cursor:pointer; font:400 .95rem "Archivo Black"; text-transform:uppercase; transition:.2s; }
.submit-button:hover { color:var(--ink); background:var(--yellow); transform:translate(-3px,-3px); }
.submit-button:disabled { opacity:.6; }
.form-message.success { color:#167b29; }
.form-message.error { color:var(--red); }
footer { display:flex; flex-direction:column; align-items:center; gap:7px; padding:55px 20px 80px; color:white; background:var(--ink); text-align:center; text-transform:uppercase; }
footer strong { color:var(--yellow); font:400 clamp(1.2rem,5vw,2.4rem) "Archivo Black"; }
footer small { letter-spacing:.2em; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { transform:scale(1.08) rotate(-2deg); } }
@keyframes reactionIn { from { opacity:0; transform:scale(.45) rotate(14deg); } to { opacity:1; transform:scale(1) rotate(-3deg); } }
@media(max-width:800px){
  .hero { min-height:800px; padding-block:150px; }
  .sticker--iron-one,.sticker--shrek { left:-35px; width:135px; }
  .sticker--iron-two,.sticker--wonder { right:-35px; width:140px; }
  .sticker--iron-one { height:180px; }.sticker--iron-two { height:190px; }.sticker--wonder { height:140px; }.sticker--shrek { height:190px; }
  .comic-bubble { font-size:.75rem; }.comic-bubble--one { top:210px; left:5%; }.comic-bubble--two { right:4%; bottom:230px; }
  .event-card { grid-template-columns:1fr; }.toretto-panel { min-height:460px; }.event-info { padding:52px 28px 220px; }
  .pelon-stamp { top:435px; left:auto; right:18px; }.wonder-banner { width:190px; }
  .chaos-img--goku { right:18%; width:110px; height:82px; }.chaos-img--boo { top:445px; right:auto; left:18px; width:90px; height:90px; }
}
@media(max-width:520px){
  .hero { min-height:820px; padding:160px 10px 175px; }
  .hero-title { filter:drop-shadow(5px 5px 0 white); }
  .hero-title span,.hero-title strong { -webkit-text-stroke-width:2px; }
  .hero-title span { font-size:4.2rem; }
  .hero-title strong { font-size:4.35rem; }
  .hero-names { max-width:310px; margin:28px 0 13px; font-size:.7rem; line-height:1.4; }
  .hero h1 { width:min(100%,310px); margin-top:22px; font-size:clamp(1.38rem,7vw,1.72rem); line-height:1.08; }
  .pow { display:none; }
  .mission { max-width:280px; font-size:.58rem; line-height:1.35; }
  .breaking { font-size:.62rem; }
  .comic-bubble--one { top:175px; left:8px; }
  .comic-bubble--two { right:8px; bottom:105px; }
  .chaos-img--goku { right:32%; bottom:18px; width:95px; height:72px; }

  .event-card { width:calc(100% - 18px); margin-block:38px; border-width:5px; box-shadow:8px 8px 0 var(--blue); }
  .toretto-panel { min-height:560px; }
  .toretto-panel p { right:12px; bottom:12px; left:12px; padding:13px; font-size:.82rem; line-height:1.4; }
  .pelon-stamp { top:330px; right:18px; width:88px; }
  .pelon-stamp img { width:88px; height:88px; }
  .chaos-img--boo { top:330px; left:18px; width:86px; height:86px; }
  .event-info { padding:48px 17px 250px; }
  .event-info h2 { max-width:100%; margin-top:17px; font-size:clamp(2.05rem,11.5vw,2.55rem); line-height:.86; letter-spacing:-.035em; overflow-wrap:normal; }
  .info-grid { gap:7px; }
  .info-grid article { min-width:0; padding:12px 4px; }
  .info-grid strong { font-size:2.15rem; }
  .info-grid p { font-size:.87rem; }
  .location { margin-top:28px; padding-left:12px; }
  .location strong { font-size:1.08rem; line-height:1.15; }
  .location p { font-size:.88rem; line-height:1.4; }
  .crazy-dress strong { font-size:1.05rem; }
  .map-button { padding:13px 14px; font-size:.78rem; }
  .wonder-banner { right:16px; bottom:15px; width:165px; }

  .rsvp { margin-block:65px; padding:46px 16px; border-width:5px; box-shadow:-7px 7px 0 var(--green),7px -7px 0 var(--red); }
  .rsvp h2 { font-size:clamp(2.35rem,12vw,2.85rem); line-height:.88; }
  .reaction-deck { gap:14px; }.reaction-deck figure { width:120px; }.reaction-deck img { height:96px; }
  .choices,.person-grid { grid-template-columns:1fr; }.music-control { width:48px; height:48px; min-height:48px; padding:0; }
  .person-card { padding:14px 12px; }
  .submit-button { padding-inline:8px; font-size:.78rem; line-height:1.2; }
}
@media(max-height:600px) and (min-width:700px){
  .hero { min-height:780px; padding-block:115px 150px; }
  .comic-bubble--two { right:5%; bottom:35px; }
  .sticker--iron-two { bottom:18px; }
  .chaos-img--goku { bottom:12px; }
}
@media(max-width:360px){
  .hero-title span { font-size:3.75rem; }.hero-title strong { font-size:3.82rem; }
  .event-info h2 { font-size:2rem; }
  .info-grid strong { font-size:1.9rem; }
  .rsvp h2 { font-size:2.25rem; }
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}