/* Invitation cards (/invite/<id>) and the "Invite a friend" composer. */
.inv-page{min-height:100vh;background:radial-gradient(circle at 15% 10%,rgba(140,20,40,.45),transparent 50%),radial-gradient(circle at 90% 90%,rgba(255,180,90,.18),transparent 45%),var(--night)}
.inv{min-height:100vh;display:grid;place-items:center;padding:40px 16px}
.inv-card{position:relative;width:min(100%,980px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(28px,5vw,56px) clamp(18px,4vw,48px);border-radius:24px;border:2px solid var(--gold);background:linear-gradient(160deg,#1c0f12,#0e0809);box-shadow:10px 10px 0 var(--pink),20px 20px 0 var(--cyan),0 30px 80px rgba(0,0,0,.6)}
.inv-lights{position:absolute;left:4%;right:4%;top:-8px;display:flex;justify-content:space-between}
.inv-lights i{width:10px;height:16px;border-radius:50% 50% 45% 45%;background:var(--c,#ffe500);box-shadow:0 0 12px 3px var(--c,#ffe500);animation:inv-tw 1.8s ease-in-out infinite}
.inv-lights i:nth-child(4n+1){--c:#ff2e88;animation-delay:.2s}.inv-lights i:nth-child(4n+2){--c:#00d8ff;animation-delay:.5s}.inv-lights i:nth-child(4n){--c:#7dff9b;animation-delay:.8s}
@keyframes inv-tw{50%{opacity:.35}}
.inv-pola{position:relative;background:#fbf7ee;padding:12px 12px 54px;rotate:-4deg;box-shadow:0 20px 44px rgba(0,0,0,.6);max-width:360px;justify-self:center;width:100%}
.inv-pola img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.inv-pola .cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:600 28px/1 'Caveat',cursive;color:#2a1a12}
.ib{display:grid;place-items:center;aspect-ratio:4/5;background:#0b0709;position:relative;font:400 clamp(40px,7vw,72px)/1 var(--f-display);color:#fff}
.ib::before{content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;top:50%;left:50%;translate:-50% -46%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 18%),radial-gradient(circle at 50% 60%,var(--c),color-mix(in srgb,var(--c) 35%,#000));box-shadow:0 10px 40px color-mix(in srgb,var(--c) 45%,transparent)}
.ib i{position:absolute;top:21%;left:50%;width:14%;height:7%;translate:-50% 0;border-radius:4px;background:linear-gradient(#f3d98d,#a8812f);z-index:1}
.ib{z-index:0}.ib::before{z-index:-1}
.inv-words h1{font-size:clamp(40px,6vw,76px);margin:6px 0 4px;line-height:1}
.inv-role{margin:0 0 14px;font:400 13px/1.4 var(--f-space);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.inv-at{margin:0;font:400 clamp(22px,2.6vw,30px)/1.2 var(--f-display)}
.inv-at b{font-weight:400;color:var(--acid)}
.inv-at b.dana{color:#c58bff;text-shadow:0 0 18px rgba(170,90,255,.45)} /* Dana's purple */
.inv-when{margin:12px 0 10px;font:400 14px/1.6 var(--f-space);letter-spacing:.06em;color:var(--acid)}
.inv-line{margin:0 0 16px;color:var(--ink-dim)}
.inv-note{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:#fbf7ee;color:#2a1a12;font:600 clamp(22px,2.4vw,28px)/1.25 'Caveat',cursive;rotate:-1deg;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.inv-note cite{display:block;margin-top:6px;font-style:normal;text-align:right}
.inv-note cite::before{content:"— "}
.inv-ctas{display:flex;flex-wrap:wrap;gap:10px}
.inv-own{margin:16px 0 0}
.linkish{background:none;border:0;padding:6px 0;color:var(--gold);font:700 15px var(--f-body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (max-width:760px){.inv-card{grid-template-columns:1fr}.inv-pola{max-width:260px}}
@media (prefers-reduced-motion:reduce){.inv-lights i{animation:none}}
/* the composer */
.inv-dlg{width:min(94vw,460px);padding:0;border:2px solid var(--gold);border-radius:20px;background:var(--night);color:var(--ink);box-shadow:8px 8px 0 var(--pink),16px 16px 0 var(--cyan)}
.inv-dlg::backdrop{background:rgba(5,3,4,.7);backdrop-filter:blur(3px)}
.inv-form{position:relative;padding:22px 20px 18px}
.inv-form h2{font:400 26px/1.1 var(--f-display);margin:4px 0 14px;color:var(--gold)}
.inv-form label{display:block;margin-bottom:10px}
.inv-form label span{display:block;font:400 11px/1.6 var(--f-space);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.inv-form input,.inv-form textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:2px solid rgba(232,199,122,.35);background:rgba(0,0,0,.3);color:var(--ink);font:500 16px var(--f-body);resize:vertical}
.inv-share-bar{margin-top:8px}
.inv-share-bar .sh-wa{background:#25d366;color:#08210f;border-color:#25d366;font-weight:700}
.inv-share-bar .sh-msg{color:#7dff9b}
.inv-card .share{margin-top:18px}
.inv-preview{margin:4px 0 0;font-size:14px}.inv-preview a{color:var(--cyan)}
.inv-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--ink);font-size:24px;cursor:pointer}
/* invite buttons on the line-up */
.invite-btn{min-height:40px;padding:0 14px;border-radius:999px;border:2px dashed var(--c,var(--gold));background:transparent;color:var(--ink);font:700 13px var(--f-body);cursor:pointer}
.invite-btn:hover,.invite-btn:focus-visible{background:var(--c,var(--gold));color:#120a0c;border-style:solid}

/* Dana's Polaroid scans already have their frame, caption and watermark */
.inv-polaroid .inv-pola{background:none;padding:0;box-shadow:none}
.inv-polaroid .inv-pola img{aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.inv-polaroid .inv-pola .cap{display:none}
/* Dana's page: invite a fan */
.fan-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.fan-chips button{min-height:46px;padding:0 16px;border-radius:999px;border:2px solid var(--gold);background:rgba(232,199,122,.06);color:var(--ink);font:700 15px var(--f-body);cursor:pointer}
.fan-chips button:hover,.fan-chips button:focus-visible{background:var(--gold);color:#120a0c}
.pola-invites{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.pola-invites button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);text-align:center}
.pola-invites img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));transition:transform .25s}
.pola-invites li:nth-child(odd) img{rotate:-2deg}.pola-invites li:nth-child(even) img{rotate:2deg}
.pola-invites button:hover img,.pola-invites button:focus-visible img{transform:scale(1.05) rotate(0deg)}
.pola-invites span{display:inline-block;margin-top:8px;font:700 13px var(--f-body);color:var(--gold)}