/*
Theme Name: WAMK Living Flyer
Description: Where Are My Keys - funky disco fish tank in the sky. Events in inc/events.json.
Version: 4.0.1
Author: WAMK
*/
/* WHERE ARE MY KEYS — living flyer v2. one committed look: watercolor paper + ink.
   no pure black, no pure white anywhere. */
:root{
  --ink:#33465c; --ink-deep:#173c59; --ink-soft:#4a5d73; --rim:#5a6a74;
  --red:#cf4238; --cream:#f2ead6; --paper:#ece5d0; --sclera:#f5efdd;
  --green:#b9cbb1; --pink:#eeced4; --blue:#cfe3ea; --yellow:#e8d873;
  --wob1:255px 18px 225px 16px/16px 225px 15px 255px;
  --wob2:225px 16px 255px 18px/18px 245px 17px 235px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  font-family:"Shantell Sans",cursive,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(70% 45% at 50% 24%, rgba(240,213,219,.5), transparent 72%),
    radial-gradient(50% 38% at 10% 70%, rgba(207,227,234,.35), transparent 70%),
    radial-gradient(55% 40% at 90% 52%, rgba(238,206,212,.4), transparent 72%),
    linear-gradient(180deg,#bcccb2 0%, #c9d4bd 30%, #d5dcc6 65%, #cdd6bf 100%);
  min-height:100vh; overflow-x:clip;
}
body::after{ /* paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.42; mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0.6 0 0 0 0 0.58 0 0 0 0 0.52 0 0 0 0.05 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:rgba(207,66,56,.25)}

/* ---------- hero: full-bleed living sky ---------- */
.hero{position:relative; height:100svh; overflow:hidden}
#sky{position:absolute; inset:0; background:url('assets/v2/wash.webp') center/cover no-repeat; opacity:.92}
#sky::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 82%, rgba(188,204,178,.65) 99%)}
.stage{position:absolute; inset:0; will-change:transform,opacity}
.stage .lpos{
  position:absolute; will-change:transform;
  transform:translate(calc(-50% + var(--px,0px)*var(--d,0)), calc(-50% + var(--py,0px)*var(--d,0))) rotate(var(--rot,0deg));
}
.stage .lpos img{width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 1px 0 rgba(51,70,92,.05))}
.stage .lpos img.flip{transform:scaleX(-1)}

/* entrance choreography */
.boot{opacity:0}
.booted .boot{animation:bootin .95s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--boot,0ms)}
@keyframes bootin{
  0%{opacity:0; scale:.9; translate:0 30px}
  62%{opacity:1; scale:1.015}
  100%{opacity:1; scale:1; translate:0 0}
}

/* ambient motion — each family its own physics */
@keyframes drift{from{translate:-11px 1px}to{translate:13px -2px}}
@keyframes floaty{from{translate:0 -7px; rotate:-1deg}to{translate:0 8px; rotate:1.4deg}}
@keyframes sway{from{rotate:-1.6deg; translate:0 -5px}to{rotate:1.7deg; translate:0 7px}}
@keyframes breathe{from{scale:1}to{scale:1.014}}
@keyframes wobble{from{rotate:-1.3deg}to{rotate:1.2deg}}
@keyframes wiggle{0%,100%{rotate:0deg}20%{rotate:-7deg}45%{rotate:6deg}70%{rotate:-4deg}90%{rotate:2deg}}
.anim-cloud img{animation:drift var(--t,19s) ease-in-out infinite alternate}
.anim-float img{animation:floaty var(--t,7s) ease-in-out infinite alternate}
@keyframes bubblefloat{0%{translate:0 0}22%{translate:16px -20px}47%{translate:-6px -34px}
  71%{translate:-20px -12px}100%{translate:0 0}}
.anim-bubble img{animation:bubblefloat var(--t,15s) ease-in-out infinite}
.anim-sway img{animation:sway 7.8s ease-in-out infinite alternate; transform-origin:52% 34%}
.anim-breathe img{animation:breathe 6s ease-in-out infinite alternate; transform-origin:50% 50%}
.anim-wobble img{animation:wobble var(--t,5.4s) ease-in-out infinite alternate}
.wiggling img{animation:wiggle .7s ease-in-out 1!important}
.stage .hoverable{cursor:pointer}
.stage .hoverable:hover img{animation:wiggle .7s ease-in-out 1}

/* v3 motion */
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}
.anim-spin img{animation:spin 210s linear infinite}
.lpos.multi img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; transition:opacity .13s linear}
.lpos img{transition:scale .4s ease}
.face-r img{scale:-1 1}
@keyframes pendulum{from{rotate:-3.4deg}to{rotate:3.4deg}}
.anim-pendulum img{animation:pendulum 5.8s ease-in-out infinite alternate; transform-origin:50% -140%}

/* googly eyes — watercolor-toned, blinking */
.googly{
  border-radius:50%; mix-blend-mode:multiply; opacity:.94;
  background:radial-gradient(circle at 36% 30%, var(--sclera), #e6dec6 78%);
  border:2px solid var(--rim);
  box-shadow:inset -2px -3px 4px rgba(74,93,115,.18), 1px 2px 0 rgba(74,93,115,.12);
  overflow:hidden;
}
.googly .pupil{
  position:absolute; left:50%; top:50%; width:42%; height:42%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #3b526b, var(--ink-deep) 70%);
  transform:translate(calc(-50% + var(--ex,0px)), calc(-50% + var(--ey,0px)));
  transition:transform .09s linear;
}
.googly .pupil::after{content:""; position:absolute; right:14%; top:16%; width:30%; height:30%;
  background:rgba(245,239,221,.9); border-radius:50%}
.googly .lid{position:absolute; inset:-2%; border-radius:50%; background:#e9e2cc;
  transform:scaleY(0); transform-origin:50% 0; transition:transform .07s ease-in}
.googly .lid.shut{transform:scaleY(1)}

/* tadpoles ride in soap bubbles */
.lpos[data-name^="sperm"]::before, .fd.sperm::before{
  content:""; position:absolute; left:50%; top:50%; width:114%; aspect-ratio:1;
  translate:-50% -50%; border-radius:50%; pointer-events:none;
  border:1.5px solid rgba(74,93,115,.5);
  background:radial-gradient(circle at 32% 26%, rgba(245,242,230,.72) 0 10%, rgba(220,235,240,.30) 32%, rgba(190,215,225,.12) 66%, rgba(150,180,198,.26) 100%);
  box-shadow:inset -3px -4px 8px rgba(150,180,198,.25);
}
.lpos[data-name^="sperm"] img{position:relative; z-index:1}
.fd.sperm img{width:100%; display:block; position:relative; z-index:1}

/* procedural bubbles */
#bubble-field{position:absolute; inset:0; z-index:46; pointer-events:none}
.bub{
  position:absolute; border-radius:50%; pointer-events:auto; cursor:pointer;
  border:1.5px solid rgba(74,93,115,.7);
  background:radial-gradient(circle at 32% 26%, rgba(245,242,230,.9) 0 12%, rgba(220,235,240,.28) 32%, rgba(190,215,225,.1) 68%, rgba(150,180,198,.3));
}
.bub.far{filter:blur(1.5px); opacity:.55}
.bub.pop{animation:pop .3s ease-out both}
@keyframes pop{40%{scale:1.3; opacity:.9}100%{scale:.1; opacity:0}}

/* ---------- ticket CTA (a physical stub, not a button) ---------- */
.hero-foot{position:absolute; z-index:90; left:50%; bottom:auto; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.55rem}
body.wide .hero-foot{left:50vw; translate:-50% 0; right:auto; bottom:2.5vh; align-items:center}
.ticket{
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:1.5rem; align-items:center; text-decoration:none; color:var(--ink);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(238,206,212,.35), transparent 60%),
    var(--cream);
  border:3px solid var(--ink); border-radius:var(--wob1);
  padding:.9em 1.5em .8em 1.2em; rotate:-2deg;
  box-shadow:4px 5px 0 rgba(207,66,56,.5), 8px 10px 0 rgba(51,70,92,.16);
  transition:box-shadow .18s, translate .18s;
  -webkit-mask:
    radial-gradient(circle 9px at 4.6em 0, transparent 97%, #000) top/100% 51% no-repeat,
    radial-gradient(circle 9px at 4.6em 100%, transparent 97%, #000) bottom/100% 51% no-repeat;
  mask:
    radial-gradient(circle 9px at 4.6em 0, transparent 97%, #000) top/100% 51% no-repeat,
    radial-gradient(circle 9px at 4.6em 100%, transparent 97%, #000) bottom/100% 51% no-repeat;
}
.ticket-holes{position:absolute; left:4.6em; top:10px; bottom:10px; width:0;
  border-left:2.5px dashed rgba(74,93,115,.55)}
.ticket:hover{translate:-2px -3px; box-shadow:7px 9px 0 rgba(207,66,56,.55), 12px 15px 0 rgba(51,70,92,.18);
  animation:boil .34s steps(2) infinite alternate}
@keyframes boil{from{border-radius:var(--wob1); rotate:-2.2deg}to{border-radius:var(--wob2); rotate:-1.7deg}}
.ticket:active{translate:2px 2px; box-shadow:2px 2px 0 rgba(207,66,56,.5)}
.ticket-key{grid-row:1/3; height:3.1em; width:auto; rotate:8deg; transition:rotate .42s cubic-bezier(.34,1.56,.64,1)}
.ticket:hover .ticket-key{rotate:-84deg}
.ticket-txt{font:700 clamp(1.3rem,2.4vw,1.65rem)/1.05 "Shantell Sans"}
.ticket-txt em{font-style:normal; color:var(--red)}
.ticket-sub{font:400 .95rem/1.3 "Gochi Hand"; color:var(--ink-soft); letter-spacing:.02em}
.countdown{
  font-family:"Gochi Hand"; font-size:clamp(1.02rem,1.9vw,1.25rem); color:var(--ink);
  background:rgba(242,234,214,.85); border:2px solid rgba(74,93,115,.35); border-radius:var(--wob2);
  padding:.35em 1em; rotate:1.4deg; position:relative;
}
.countdown::before{content:""; position:absolute; left:-14px; top:-9px; width:44px; height:17px;
  background:rgba(232,216,115,.55); border:1px solid rgba(51,70,92,.12); rotate:-32deg}
.scroll-hint{position:absolute; z-index:90; left:50%; bottom:.6svh; translate:-50% 0;
  font-family:"Gochi Hand"; opacity:.6; font-size:1rem; animation:floaty 2.4s ease-in-out infinite alternate}
body.wide .scroll-hint{left:auto; right:3vw; translate:0 0; bottom:1vh}

/* sticky RA pill */
.ra-pill{position:fixed; top:14px; right:14px; z-index:200; display:flex; align-items:center; gap:.45rem;
  font:700 1rem "Shantell Sans"; color:var(--ink); text-decoration:none; background:var(--cream);
  border:3px solid var(--ink); border-radius:var(--wob1); padding:.45em 1em; rotate:2deg;
  box-shadow:3px 3px 0 rgba(207,66,56,.5); opacity:0; translate:0 -70px; transition:.35s}
.ra-pill img{height:1.25em}
.ra-pill.on{opacity:1; translate:0 0}
.ra-pill:hover{rotate:-1deg}

/* ---------- ticker ---------- */
.ticker{overflow:hidden; background:var(--cream); border-top:2.5px solid var(--ink-soft);
  border-bottom:2.5px solid var(--ink-soft); rotate:-.7deg; margin:2.5vh 0 0; width:100%;
  opacity:0; transition:opacity .8s}
.ticker.in{opacity:1}
.ticker-track{display:inline-flex; white-space:nowrap; animation:marquee 30s linear infinite;
  font:400 1.25rem/2.1 "Gochi Hand"; color:var(--ink-soft)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
main{max-width:1160px; margin:0 auto; padding:0 5vw}
section{padding:10vh 0 5vh; position:relative}
section::before{content:""; position:absolute; inset:-8% -30%; z-index:-2; pointer-events:none;
  background:radial-gradient(42% 38% at var(--bx,85%) 32%, var(--bloom,rgba(238,206,212,.55)), transparent 72%)}
section:nth-of-type(2n)::before{--bx:12%; --bloom:rgba(207,227,234,.5)}
section:nth-of-type(3n)::before{--bloom:rgba(226,222,180,.4)}
main section, footer{opacity:0; translate:0 34px; rotate:.4deg;
  transition:opacity .75s cubic-bezier(.16,1,.3,1), translate .75s cubic-bezier(.16,1,.3,1), rotate .75s}
main section.in, footer.in{opacity:1; translate:0 0; rotate:0deg}

.scribble-h{
  font-family:"Gochi Hand"; font-weight:400; color:var(--ink); font-size:clamp(2.1rem,5vw,3.4rem);
  rotate:-1.4deg; margin-bottom:1.1em; display:inline-block; position:relative;
}
.scribble-h::after{content:""; position:absolute; left:-3%; right:-7%; bottom:-10px; height:14px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 14" preserveAspectRatio="none"><path d="M2 8 Q 18 2 34 8 T 66 8 T 98 7 T 130 9 T 162 7 T 198 8" fill="none" stroke="%23cf4238" stroke-width="3.4" stroke-linecap="round" opacity="0.62"/></svg>') 0 0/100% 100% no-repeat}

/* floating side doodles */
.drifter{position:absolute; z-index:-1; opacity:.85; pointer-events:none;
  animation:floaty 8s ease-in-out infinite alternate}
.d-cloud{right:-2vw; top:6vh; width:clamp(120px,13vw,230px); animation:drift 22s ease-in-out infinite alternate}
.d-key{left:-1.5vw; top:14vh; width:clamp(60px,5vw,95px); rotate:-14deg}
.d-bub{right:1vw; bottom:10vh; width:clamp(70px,6vw,110px)}
.d-cloud2{left:-3vw; bottom:4vh; width:clamp(130px,14vw,240px); animation:drift 26s ease-in-out infinite alternate}
@media (max-width:900px){.drifter{display:none}}

/* lineup — loose gig-poster rhythm */
.names{list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:1.05em 1.35em; font-size:clamp(1.5rem,4.4vw,2.2rem); font-weight:600}
.names li{rotate:calc(var(--r,0)*1deg); cursor:default; position:relative;
  opacity:0; translate:0 14px; transition:opacity .5s, translate .5s cubic-bezier(.16,1,.3,1), transform .15s;
  transition-delay:calc(var(--i,0)*45ms)}
.lineup.in .names li{opacity:1; translate:0 0}
.names li:nth-child(3n){--r:-2.4}
.names li:nth-child(3n+1){--r:1.9}
.names li:nth-child(5n){--r:-1}
.names li:nth-child(2n){translate:0 .2em}
.names li:nth-child(5n+2){translate:0 -.24em}
@media (min-width:640px){
  .names li:nth-child(7n+3){margin-left:5%}
  .names li:nth-child(6n+1){margin-right:4%}
}
.names li:nth-child(4n+3){font-size:.9em}
.names li:nth-child(8n+5){font-size:1.1em}
.names li:hover{transform:scale(1.1) rotate(1.5deg)}
.names li::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:9px; opacity:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M2 6 Q 14 1 26 6 T 50 5 T 74 6 T 98 5" fill="none" stroke="%23cf4238" stroke-width="2.6" stroke-linecap="round"/></svg>') 0 0/100% 100% no-repeat;
  transition:opacity .18s}
.names li:hover::after{opacity:.8}
.mumble{font-family:"Gochi Hand"; color:var(--ink-soft); margin-top:2em; font-size:1.15rem; rotate:-.5deg}

/* details cards */
.details{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2.4rem}
.card{background:
    radial-gradient(120% 140% at 80% 0%, rgba(207,227,234,.3), transparent 55%), var(--cream);
  border:3px solid var(--ink); border-radius:var(--wob1);
  padding:1.6rem 1.5rem; box-shadow:5px 6px 0 rgba(51,70,92,.14)}
.card.tilt-l{rotate:-1.4deg}
.card.tilt-r{rotate:1.5deg}
.card:hover{rotate:0deg; transition:rotate .2s}
.card h3{font-family:"Gochi Hand"; font-size:1.35rem; color:var(--red); margin-bottom:.5em}
.card .big{font-size:1.75rem; font-weight:700; line-height:1.15}
.card p{margin:.3em 0}
.card small{font-size:.6em}
.card a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2px}
.wink{font-family:"Gochi Hand"; color:var(--ink-soft); font-size:1.02rem}
.mini-cta{font-weight:700}

/* share buttons (secondary) */
.cta{display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; color:var(--ink);
  font:700 1.05rem "Shantell Sans"; background:var(--cream); padding:.7em 1.3em;
  border:3px solid var(--ink); border-radius:var(--wob2); rotate:-1deg;
  box-shadow:3px 4px 0 rgba(207,66,56,.5); transition:translate .15s, box-shadow .15s}
.cta:hover{translate:-2px -2px; box-shadow:5px 6px 0 rgba(207,66,56,.55)}
.cta:active{translate:2px 2px; box-shadow:1px 1px 0 rgba(207,66,56,.5)}
.cta.ghost{background:transparent; rotate:1deg}

/* miami polaroid */
.polaroid-wrap{display:flex; justify-content:center}
.polaroid{display:block; background:#faf6ec; padding:14px 14px 10px; rotate:-2.4deg; position:relative;
  box-shadow:0 12px 30px rgba(51,70,92,.24); transition:rotate .25s, transform .25s; text-decoration:none; max-width:min(440px,88vw)}
.polaroid:hover{rotate:.5deg; transform:scale(1.02)}
.polaroid img{width:100%; display:block}
.polaroid figcaption{font-family:"Gochi Hand"; color:var(--ink); text-align:center; padding:.7em 0 .3em; font-size:1.2rem}
.tape{position:absolute; width:92px; height:30px; background:rgba(232,216,115,.55); border:1px solid rgba(51,70,92,.14)}
.tape.t1{top:-14px; left:-26px; rotate:-38deg}
.tape.t2{top:-12px; right:-24px; rotate:35deg}

/* about */
.about p{font-size:clamp(1.05rem,2.2vw,1.3rem); max-width:44em; margin-bottom:1em}
.friends{margin-top:1.8rem; max-width:min(420px,80vw); background:var(--cream); padding:14px 22px;
  border:3px solid var(--ink); border-radius:var(--wob1); rotate:-.8deg}

/* share */
.share-row{display:flex; gap:1.2rem; flex-wrap:wrap; margin:1.4rem 0}
.og-preview img{max-width:min(560px,92vw); border:3px solid var(--ink); border-radius:14px 5px 16px 5px;
  box-shadow:6px 7px 0 rgba(51,70,92,.14); rotate:.6deg}
.share p{max-width:40em; font-size:1.1rem}

/* newsletter signup (visual preview — not wired) */
.signup{max-width:520px; margin:0 auto; text-align:center}
.signup h2{margin-bottom:.6em}
.signup-row{display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center}
.signup input{
  flex:1 1 220px; min-width:0; font:600 1.05rem "Shantell Sans"; color:var(--ink);
  background:rgba(246,240,224,.92); border:3px solid var(--ink); border-radius:var(--wob2);
  padding:.75em 1.1em; rotate:.6deg; outline:none}
.signup input::placeholder{color:var(--ink-soft); font-family:"Gochi Hand"; font-weight:400}
.signup input:focus{box-shadow:3px 4px 0 rgba(207,66,56,.45); rotate:0deg}
.signup .mumble{margin-top:1.1em}

/* footer */
footer{position:relative; margin-top:8vh; padding:7vh 6vw 5vh; text-align:center; overflow:visible}
.foot-doodles .fd{position:absolute; opacity:.9; pointer-events:none; z-index:0}
@keyframes cloudhover{0%{translate:0 0}30%{translate:34px -16px}55%{translate:10px -30px}80%{translate:-22px -10px}100%{translate:0 0}}
.fd.cloud{left:2vw; bottom:7vh; width:170px; animation:cloudhover 19s ease-in-out infinite}
@keyframes swimacross{0%{translate:0 0; scale:1 1}10%{translate:-5vw -10px}46%{translate:-27vw -16px; scale:1 1}
  50%{translate:-29vw -10px; scale:-1 1}64%{translate:-19vw 6px; scale:-1 1}96%{translate:-1vw -6px; scale:-1 1}100%{translate:0 0; scale:1 1}}
.fd.sperm{right:3vw; bottom:1.5vh; width:120px; animation:swimacross 28s ease-in-out infinite}
.soc{position:relative; z-index:1; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; font-weight:700; font-size:1.15rem}
.soc a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2.5px}
.soc a:hover{color:var(--red)}
.fine{position:relative; z-index:1; margin-top:1.6rem; font-family:"Gochi Hand"; color:var(--ink-soft); font-size:1.05rem}
footer .mumble{margin-top:1.6em; font-size:1.02rem}

/* dj popup */
.names li.has-dj{cursor:pointer}
.dj-pop[hidden]{display:none}
.dj-pop{position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  background:rgba(51,70,92,.38); backdrop-filter:blur(3px)}
.dj-card{position:relative; background:
    radial-gradient(130% 150% at 85% 0%, rgba(207,227,234,.35), transparent 55%), var(--cream);
  border:3px solid var(--ink); border-radius:var(--wob1); rotate:var(--cr,-1deg);
  max-width:min(440px, 90vw); padding:2rem 2.1rem 1.7rem; box-shadow:7px 9px 0 rgba(51,70,92,.25);
  animation:cardin .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cardin{from{opacity:0; scale:.82; translate:0 26px}to{opacity:1}}
.dj-card::before{content:""; position:absolute; left:38px; top:-12px; width:82px; height:26px;
  background:rgba(232,216,115,.55); border:1px solid rgba(51,70,92,.14); rotate:-3deg}
.dj-doo{position:absolute; left:-26px; bottom:-40px; width:84px; rotate:-8deg; z-index:0;
  filter:drop-shadow(2px 3px 0 rgba(51,70,92,.18)); animation:floaty 4.5s ease-in-out infinite alternate}
.dj-card h3{font-family:"Gochi Hand"; font-size:2rem; line-height:1; margin-bottom:.15em; color:var(--ink)}
.dj-city{font-family:"Gochi Hand"; color:var(--red); margin-bottom:.8em}
.dj-bio{font-size:1.05rem; line-height:1.5; margin-bottom:1.1em}
.dj-links{display:flex; gap:1rem; flex-wrap:wrap; position:relative; z-index:2}
.dj-links a{font-weight:700; color:var(--ink); background:rgba(207,227,234,.4); border:2.5px solid var(--ink);
  border-radius:var(--wob2); padding:.4em .9em; text-decoration:none; rotate:-1deg}
.dj-links a:hover{rotate:1deg; background:rgba(238,206,212,.5)}
.dj-nolinks{font-family:"Gochi Hand"; color:var(--ink-soft)}
.dj-close{position:absolute; right:16px; top:12px; z-index:3; border:none; background:none; cursor:pointer;
  font:700 1.5rem "Gochi Hand"; color:var(--red); rotate:4deg}
.dj-close:hover{rotate:-6deg}

/* toast */
.toast:empty{display:none}
.toast{position:fixed; left:50%; bottom:26px; translate:-50% 120px; z-index:300; background:var(--ink);
  color:var(--cream); font:600 1rem "Shantell Sans"; padding:.7em 1.3em; border-radius:14px 5px 16px 5px;
  transition:translate .3s; pointer-events:none}
.toast.on{translate:-50% 0}

@media (max-width:640px){
  .scroll-hint{display:none}
  .countdown{font-size:.92rem; max-width:86vw; text-align:center}
  .ticket{padding:.8em 1.2em .7em 1em}
  .ticket-txt{font-size:1.25rem}
  .ticker-track{font-size:1.05rem}
  .fd.cloud{width:110px} .fd.sperm{width:80px}
  section{padding:8vh 0 4vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  main section, footer, .ticker, .names li{opacity:1; translate:0 0}
}