/* ==========================================================================
   GV Mediatech — the RSVP page for a launch party (rsvp/<slug>.html)

   Built from the invite itself: aged paper, ink, the poster red, a vinyl, a
   C60 cassette and a ticket stub. The cassette is the form's progress bar:
   the tape winds from the left reel to the right one as tracks are filled.
   ========================================================================== */
:root{
  --night:#1A1411; --night-2:#251C17; --paper:#EFDDBA; --paper-2:#E4C997; --paper-3:#F6EAD2;
  --ink:#231F20; --muted:#5E4E3E; --red:#C8202A; --red-2:#A8151E; --mustard:#E3B23C;
  --green:#3F5A31; --line:rgba(35,31,32,.18);
  --display:"Abril Fatface", "Bodoni 72", Didot, Georgia, serif;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  --type:"Special Elite", "American Typewriter", "Courier New", monospace;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
/* buttons and links here set display, which beats the browser's own [hidden]
   rule; without this, "hidden" Rewind and Cancel buttons still showed */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body.rv{margin:0;min-height:100vh;color:var(--paper-3);font:400 16px/1.55 var(--sans);
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(227,178,60,.16), transparent 60%),
    radial-gradient(700px 520px at -10% 40%, rgba(200,32,42,.14), transparent 60%),
    var(--noise), var(--night);
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
b{font-weight:700}
.rv-skip{position:absolute;left:-9999px;top:8px;z-index:9;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:8px}
.rv-skip:focus{left:12px}
.rv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
/* The vinyl hangs off the right edge on purpose. iPhone Safari ignores
   overflow-x on <body>, so the page itself is clipped by a full-width
   wrapper; without it the whole page slides sideways on a phone. */
.rv-page{position:relative;width:100%;overflow-x:hidden;overflow-x:clip}
main{max-width:1120px;margin:0 auto;padding:0 16px 40px}

/* --------------------------------------------------------------- paper */
.rv-paper,.rv-hero-copy,.rv-deck,.rv-pass{
  color:var(--ink);
  background:var(--noise),
    radial-gradient(120% 90% at 50% 40%, var(--paper-3) 0%, var(--paper) 55%, var(--paper-2) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px -18px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.35)}

/* ---------------------------------------------------------------- hero */
.rv-hero{position:relative;display:grid;gap:26px;padding:28px 0 8px}
.rv-hero-copy{position:relative;z-index:2;padding:30px 22px 26px;border-radius:4px;text-align:center;
  clip-path:polygon(0 1.2%,6% 0,14% .9%,23% .1%,34% 1%,45% 0,57% .8%,68% .1%,79% 1%,90% .2%,100% 1%,
    99.4% 30%,100% 62%,99.3% 100%,88% 99.1%,76% 100%,63% 99.2%,51% 100%,39% 99.1%,27% 100%,15% 99.3%,4% 100%,0 99%,.6% 64%,0 33%)}
.rv-hero-copy::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(35,31,32,.28);pointer-events:none}
.rv-hero-copy{order:-1;min-width:0}
.rv-hero > *{min-width:0}
.rv-kicker span{display:block}
.rv-kicker span+span{margin-top:6px;letter-spacing:.16em;color:var(--red)}
.rv-kicker{margin:0 0 10px;font:600 .78rem/1.3 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.rv-title{margin:0;font-family:var(--display);font-weight:400;line-height:.86;text-transform:uppercase;letter-spacing:-.01em}
.rv-t1{display:block;font-size:clamp(2.2rem,14vw,6.4rem);color:var(--ink)}
.rv-t2{display:block;font-size:clamp(2.4rem,15.5vw,7.2rem);color:var(--red);
  text-shadow:0 1px 0 rgba(0,0,0,.08)}
.rv-hand{font-family:var(--hand);font-weight:700}
.rv-sub{margin:14px 0 6px;font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.05;color:var(--ink)}
.rv-lede{margin:0 auto 18px;max-width:30em;color:var(--muted);font-size:.98rem}
.rv-hosts{margin:14px 0 0;font-size:.92rem;color:var(--muted)}
.rv-hosts b{color:var(--ink)}

.rv-count{display:flex;justify-content:center;gap:8px;margin:0 0 20px}
.rv-count div{flex:1 1 0;min-width:0;max-width:76px;padding:10px 6px 7px;border-radius:8px;background:var(--ink);color:var(--paper-3);
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.06), 0 6px 14px -8px rgba(0,0,0,.6);position:relative}
/* no flip-clock seam: drawn across the tile it read as the digits being struck through */
.rv-count b{display:block;font:400 1.75rem/1 var(--display);font-variant-numeric:tabular-nums}
.rv-count span{display:block;margin-top:4px;font:600 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.rv-count.is-live div{background:var(--red)}

.rv-play,.rv-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  padding:0 24px;border:0;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;cursor:pointer;
  font:700 1rem/1 var(--sans);letter-spacing:.01em;box-shadow:0 4px 0 var(--red-2), 0 12px 24px -10px rgba(200,32,42,.8);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease}
.rv-play{min-height:58px;padding:0 30px;font-size:1.08rem}
.rv-play span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red);font-size:.8rem;padding-left:2px}
.rv-play:hover,.rv-btn:hover{transform:translateY(-1px)}
.rv-play:active,.rv-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-2), 0 6px 12px -8px rgba(200,32,42,.8)}
.rv-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.rv-btn--ghost:active{box-shadow:inset 0 0 0 2px var(--ink)}
.rv-btn[disabled]{opacity:.55;cursor:progress}

/* the poster as a polaroid, which flips to a memory list */
.rv-polaroid{position:relative;z-index:2;margin:0 auto;width:min(64vw,330px);perspective:1200px;cursor:pointer;
  transform:rotate(3deg);transition:transform .3s ease}
.rv-polaroid > img,.rv-polaroid-back{border:10px solid #F7F0E1;border-bottom-width:44px;border-radius:3px;
  box-shadow:0 22px 40px -16px rgba(0,0,0,.85), 0 2px 4px rgba(0,0,0,.4);backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.rv-polaroid figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:700 1.25rem/1 var(--hand);color:var(--ink);
  z-index:3;pointer-events:none;backface-visibility:hidden;transition:opacity .3s}
.rv-polaroid-back{position:absolute;inset:0;padding:22px 18px;background:var(--noise),#F7F0E1;color:var(--ink);
  transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;font-family:var(--type);font-size:.95rem}
.rv-polaroid-back p{margin:0 0 10px}
.rv-polaroid-back ul{margin:0 0 14px;padding-left:1.1em}
.rv-polaroid-back li{margin:6px 0}
.rv-polaroid-back .rv-hand{font-family:var(--hand);font-size:1.6rem;color:var(--red);transform:rotate(-3deg)}
.rv-polaroid.is-flipped > img{transform:rotateY(-180deg)}
.rv-polaroid.is-flipped .rv-polaroid-back{transform:rotateY(0)}
.rv-polaroid.is-flipped figcaption{opacity:0}
.rv-polaroid:hover{transform:rotate(1deg) translateY(-3px)}
.rv-tape-strip{position:absolute;z-index:4;top:-14px;left:50%;width:110px;height:30px;margin-left:-55px;transform:rotate(-4deg);
  background:linear-gradient(90deg,rgba(240,228,198,.82),rgba(232,218,184,.9));box-shadow:0 1px 3px rgba(0,0,0,.25);
  clip-path:polygon(2% 0,98% 6%,100% 30%,97% 55%,100% 100%,3% 94%,0 70%,3% 40%)}

/* a vinyl spinning behind everything */
.rv-vinyl{position:absolute;z-index:1;top:-70px;right:-120px;width:300px;height:300px;border-radius:50%;
  background:
    radial-gradient(circle, var(--mustard) 0 22%, #111 22.4% 24%, transparent 24.2%),
    repeating-radial-gradient(circle, #121010 0 2px, #1d1a19 2.2px 3.6px),
    #111;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);animation:rv-spin 6s linear infinite;opacity:.9}
.rv-vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 20deg, transparent 0 12%, rgba(255,255,255,.09) 16%, transparent 22% 60%, rgba(255,255,255,.06) 66%, transparent 72%)}
.rv-vinyl-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--ink);
  font:400 1.25rem/1 var(--display)}
.rv-vinyl-label small{display:block;font:700 .55rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
@keyframes rv-spin{to{transform:rotate(360deg)}}

/* the mixtape button (js/rsvp-music.js): floats bottom right, EQ bars dance while it plays */
.rv-music{position:fixed;z-index:60;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border-radius:999px;
  border:1.5px solid var(--mustard);background:rgba(26,20,17,.92);color:var(--paper-3);cursor:pointer;
  font:700 .86rem/1 var(--sans);letter-spacing:.02em;box-shadow:0 10px 26px -10px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s}
.rv-music:hover{transform:translateY(-1px)}
.rv-music:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.rv-music-eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.rv-music-eq i{width:3px;height:5px;border-radius:2px;background:var(--mustard)}
.rv-music[aria-pressed="true"] .rv-music-eq i{animation:rv-eq .9s ease-in-out infinite alternate}
.rv-music[aria-pressed="true"] .rv-music-eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.rv-music[aria-pressed="true"] .rv-music-eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.1s}
.rv-music[aria-pressed="true"] .rv-music-eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
@keyframes rv-eq{from{height:4px}to{height:16px}}
.rv-is-playing .rv-vinyl{animation-duration:3.2s}

/* -------------------------------------------------------------- ticket */
.rv-ticket{display:flex;margin:30px auto 0;max-width:720px;color:var(--ink);transform:rotate(-1.2deg);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
.rv-ticket-main,.rv-ticket-stub{background:var(--noise),#F1D7C2}
.rv-ticket-main{flex:1;padding:22px 20px 20px;border-radius:10px 0 0 10px;position:relative;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 100% 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 100% 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat}
.rv-ticket-main::before{content:"";position:absolute;inset:8px;border:2px solid var(--red);border-radius:6px;
  box-shadow:inset 0 0 0 3px #F1D7C2, inset 0 0 0 4px var(--red);pointer-events:none;opacity:.85}
.rv-stamp{display:inline-block;margin:0 0 12px;padding:4px 10px;border:2px solid var(--red);color:var(--red);
  font:400 1.05rem/1.2 var(--display);text-transform:uppercase;transform:rotate(-2deg)}
.rv-stamp span{font:700 .7rem/1 var(--sans);letter-spacing:.14em;margin-left:6px;vertical-align:middle}
.rv-ticket dl{margin:0 0 16px;display:grid;gap:10px}
.rv-ticket dt{font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.rv-ticket dd{margin:3px 0 0;font:400 1.08rem/1.3 var(--type)}
.rv-ticket .rv-btn{position:relative;min-height:46px;font-size:.95rem}
.rv-ticket-stub{width:64px;border-left:2px dashed rgba(200,32,42,.55);border-radius:0 10px 10px 0;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:16px 0;color:var(--red);font:400 1rem/1 var(--type);
  -webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px) top/100% 51% no-repeat,
               radial-gradient(circle at 0 100%,transparent 12px,#000 12.5px) bottom/100% 51% no-repeat}
.rv-ticket-stub span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.2em}

/* ------------------------------------------------------- cassette deck */
.rv-deck{margin:42px auto 0;max-width:720px;padding:28px 18px 24px;border-radius:6px;scroll-margin-top:12px}
.rv-h2{margin:0;text-align:center;font:400 clamp(2rem,8vw,2.8rem)/1 var(--display);text-transform:uppercase}
.rv-h2 em{font-style:normal;color:var(--red)}
.rv-note{margin:8px 0 18px;text-align:center;color:var(--muted)}
.rv-cassette{--p:0;position:relative;margin:0 auto 16px;max-width:420px;aspect-ratio:1.6;border-radius:14px;padding:6% 5% 0;
  background:linear-gradient(160deg,#2b2726,#151313);box-shadow:inset 0 0 0 2px #3a3533, 0 14px 26px -14px rgba(0,0,0,.9)}
.rv-cassette::before,.rv-cassette::after{content:"";position:absolute;top:7px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#777 0 25%,#333 30%);box-shadow:0 calc(var(--h,0px)) 0 #333}
.rv-cassette::before{left:7px}.rv-cassette::after{right:7px}
.rv-cas-label{position:relative;height:66%;border-radius:8px;padding:6% 5% 0;
  background:linear-gradient(var(--paper-3) 0 52%, var(--red) 52% 60%, var(--paper-3) 60% 100%);color:var(--ink);
  display:flex;align-items:flex-start;gap:8px}
.rv-cas-side{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper-3);
  font:400 .9rem/1 var(--display);flex:none}
.rv-cas-title{font:700 clamp(.85rem,3.6vw,1.15rem)/1.1 var(--hand);padding-top:3px;flex:1;text-align:left}
.rv-cas-c60{font:400 .8rem/1 var(--display);color:var(--red)}
.rv-cas-window{position:absolute;left:22%;right:22%;top:47%;height:24%;border-radius:999px;background:#0d0c0c;overflow:hidden;
  box-shadow:inset 0 0 0 3px #4b4543;display:flex;align-items:center;justify-content:space-between;padding:0 4%}
.rv-reel{position:relative;display:grid;place-items:center;width:28%;aspect-ratio:1}
.rv-reel::before{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle,#5a3a22 0 60%,#3e2715 100%);
  width:calc(78% + var(--tape) * 86%);aspect-ratio:1;transition:width .6s ease}
.rv-reel--l{--tape:calc(1 - var(--p))}
.rv-reel--r{--tape:var(--p)}
.rv-reel i{position:relative;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#0d0c0c 0 20%, transparent 21%),
    repeating-conic-gradient(#f3ead6 0 12deg, #cfc5b1 12deg 60deg);box-shadow:0 0 0 2px #0d0c0c}
.rv-cassette.is-rolling .rv-reel i{animation:rv-spin 1.4s linear infinite}
.rv-cas-tape{flex:1;height:22%;margin:0 2%;background:linear-gradient(#4a301b,#2e1d10);opacity:.9}
.rv-cas-foot{position:absolute;left:24%;right:24%;bottom:0;height:16%;background:#211e1d;border-radius:8px 8px 0 0;
  display:flex;justify-content:space-around;align-items:center}
.rv-cas-foot i{width:9px;height:9px;border-radius:50%;background:#0b0a0a}

.rv-tracks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 18px;padding:0;counter-reset:t}
.rv-tracks li{counter-increment:t;padding:5px 10px;border-radius:999px;border:1px solid var(--line);font:600 .75rem/1.2 var(--sans);color:var(--muted)}
.rv-tracks li::before{content:"0" counter(t) " · ";font-family:var(--type)}
.rv-tracks li.is-done{background:var(--ink);color:var(--paper-3);border-color:var(--ink)}
.rv-tracks li.is-now{border-color:var(--red);color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

/* -------------------------------------------------------------- form */
.rv-form{max-width:520px;margin:0 auto}
.rv-step{border:0;margin:0 0 18px;padding:0;min-width:0}
.rv-step legend{display:block;width:100%;margin:0 0 10px;padding:0;font:400 clamp(1.45rem,6vw,1.8rem)/1.15 var(--display);color:var(--ink)}
.rv-no{display:inline-block;margin-right:6px;font:400 .95rem/1 var(--type);color:var(--red);vertical-align:.3em}
.rv-form input[type=text],.rv-form input[type=tel],.rv-form input[type=email]{
  width:100%;min-height:56px;padding:12px 4px;border:0;border-bottom:3px solid var(--ink);border-radius:0;
  background:repeating-linear-gradient(transparent 0 55px, rgba(35,31,32,.12) 55px 56px);
  color:var(--ink);font:400 1.35rem/1.2 var(--type);outline:0;-webkit-appearance:none;appearance:none}
.rv-form input::placeholder{color:rgba(35,31,32,.38)}
.rv-form input:focus{border-bottom-color:var(--red)}
.rv-form input[aria-invalid=true]{border-bottom-color:var(--red);animation:rv-shake .3s}
.rv-prefix{display:flex;align-items:flex-end;gap:6px}
.rv-prefix span{padding-bottom:16px;font:400 1.35rem/1 var(--type);color:var(--muted)}
.rv-help{margin:8px 0 0;font-size:.88rem;color:var(--muted)}
.rv-igchip{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:40px;max-width:100%;padding:8px 14px;border-radius:999px;background:var(--ink);
  color:var(--paper-3);font:600 .88rem/1.2 var(--sans);text-decoration:none;word-break:break-all}
.rv-igchip::before{content:"";width:16px;height:16px;border-radius:5px;flex:none;
  background:radial-gradient(circle at 30% 110%,#fdf497 0 8%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.rv-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.rv-choice{position:relative;cursor:pointer}
.rv-choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rv-choice span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:110px;padding:12px;
  border-radius:12px;border:2px solid var(--ink);background:rgba(255,255,255,.35);text-align:center;font:700 .98rem/1.25 var(--sans);
  transition:transform .15s ease, background .2s ease}
.rv-choice b{font-size:2rem;line-height:1}
.rv-choice input:checked + span{background:var(--ink);color:var(--paper-3);transform:rotate(-1.5deg)}
.rv-choice input:focus-visible + span{outline:3px solid var(--mustard);outline-offset:3px}
.rv-tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.4}
.rv-tick input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--red)}
.rv-err{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:rgba(200,32,42,.12);color:var(--red-2);font-weight:600}
.rv-nav{display:flex;gap:10px;justify-content:space-between}
.rv-nav .rv-btn{flex:1 1 0;min-width:0;padding:0 12px;white-space:normal;line-height:1.15;text-align:center}
.rv-closed{margin:0 auto 14px;max-width:520px;padding:14px;border-radius:12px;background:var(--ink);color:var(--paper-3);text-align:center;font-weight:600}
@keyframes rv-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* stepping: with JS one track shows at a time; without it, the whole form */
.rv-js .rv-step{display:none}
.rv-js .rv-step.is-now{display:block;animation:rv-in .35s ease}
@keyframes rv-in{from{opacity:0;transform:translateY(10px)}}
body:not(.rv-js) .rv-nav #rvBack{display:none}

/* --------------------------------------------------------------- pass */
.rv-done{max-width:520px;margin:42px auto 0;outline:0}
.rv-pass{position:relative;border-radius:16px;overflow:hidden;animation:rv-print .9s cubic-bezier(.2,.8,.2,1)}
@keyframes rv-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}to{clip-path:inset(0 0 0 0)}}
.rv-pass-top{position:relative;padding:24px 18px 20px}
.rv-pass-kicker{margin:0 0 8px;padding-right:118px;font:600 .72rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.rv-pass-name{margin:0;font:400 clamp(1.6rem,8vw,2.5rem)/1.02 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.rv-pass-line{margin:10px 0 0;color:var(--muted);overflow-wrap:anywhere}
.rv-pass-who{display:grid;gap:10px;margin:16px 0 0;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.4);border:1px dashed rgba(35,31,32,.25)}
.rv-pass-who dt{font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rv-pass-who dd{margin:4px 0 0;font:400 1.15rem/1.25 var(--type);overflow-wrap:anywhere}
.rv-pass-who a{color:var(--red-2);text-decoration:none;border-bottom:1px solid rgba(168,21,30,.35)}
.rv-pass-stamp{position:absolute;right:16px;top:20px;padding:6px 12px;border:3px solid var(--red);border-radius:6px;color:var(--red);
  font:400 1.05rem/1 var(--display);text-transform:uppercase;transform:rotate(12deg);opacity:.9;
  animation:rv-stamp .45s .7s cubic-bezier(.3,1.6,.5,1) both;mix-blend-mode:multiply}
.rv-pass-stamp.is-wait{border-color:var(--green);color:var(--green)}
@keyframes rv-stamp{from{transform:rotate(12deg) scale(2.4);opacity:0}}
.rv-pass-perf{height:24px;background:radial-gradient(circle at 0 50%,var(--night) 11px,transparent 11.5px),
  radial-gradient(circle at 100% 50%,var(--night) 11px,transparent 11.5px);position:relative}
.rv-pass-perf::after{content:"";position:absolute;left:18px;right:18px;top:50%;border-top:2px dashed rgba(35,31,32,.35)}
.rv-pass-bottom{display:flex;gap:16px;align-items:center;padding:16px 18px 22px}
.rv-pass-bottom dl{min-width:0}
.rv-qr{flex:none;width:clamp(100px,32vw,132px);height:clamp(100px,32vw,132px);padding:6px;border-radius:10px;background:#fff}
.rv-qr svg{width:100%;height:100%}
.rv-pass-bottom dl{margin:0;display:grid;gap:10px}
.rv-pass-bottom dt{font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rv-pass-bottom dd{margin:3px 0 0;font:400 1.02rem/1.25 var(--type)}
.rv-code{font-size:clamp(1.05rem,5vw,1.3rem) !important;letter-spacing:.08em;white-space:nowrap}
.rv-done-note{color:rgba(246,234,210,.75)}
.rv-done-acts{display:grid;gap:10px}
.rv-done-acts .rv-btn--ghost{color:var(--paper-3);box-shadow:inset 0 0 0 2px var(--paper-3)}
.rv-link{display:block;margin:18px auto 0;background:none;border:0;color:rgba(246,234,210,.7);text-decoration:underline;font:500 .9rem/1.4 var(--sans);cursor:pointer;min-height:44px}

/* --------------------------------------------------- the brief note */
.rv-brief{position:relative;margin:34px auto 0;max-width:560px;padding:26px 20px 18px;color:var(--ink);text-align:center;
  background:var(--noise),linear-gradient(#F7E7A6,#EFD98A);transform:rotate(1.2deg);
  box-shadow:0 16px 28px -16px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.3)}
.rv-brief .rv-tape-strip{top:-12px}
.rv-brief-h{margin:0 0 6px;font:700 clamp(1.6rem,7vw,2rem)/1.05 var(--hand)}
.rv-brief p{margin:0 0 12px;font-size:.95rem}
.rv-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rv-tag{min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.55);
  color:var(--ink);font:700 .98rem/1 var(--sans);cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.rv-tag.is-copied{background:var(--ink);color:var(--paper-3)}
.rv-tag--all{margin-top:10px;background:var(--ink);color:var(--paper-3)}
.rv-tag--all.is-copied{background:var(--red);border-color:var(--red)}
.rv-brief .rv-brief-help{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------------------------------------- pass: cancel + content box */
.rv-link--quiet{margin-top:4px;color:rgba(246,234,210,.55);font-size:.85rem}
.rv-link--left{margin:4px 0 10px;text-align:left;color:var(--ink)}
.rv-content{margin:30px 0 0;padding:22px 18px;border-radius:16px;color:var(--ink);
  background:var(--noise),radial-gradient(120% 90% at 50% 40%, var(--paper-3) 0%, var(--paper) 60%, var(--paper-2) 100%)}
.rv-content-h{margin:0 0 6px;font:400 clamp(1.4rem,6.5vw,1.8rem)/1.1 var(--display)}
.rv-content-p{margin:0 0 14px;color:var(--muted);font-size:.93rem}
.rv-item{margin:0 0 12px;padding:12px;border:1px dashed rgba(35,31,32,.3);border-radius:12px;background:rgba(255,255,255,.35)}
.rv-item-top{display:grid;grid-template-columns:minmax(0,108px) minmax(0,1fr);gap:8px}
.rv-item select,.rv-item input{width:100%;min-height:46px;padding:8px 10px;border:1px solid rgba(35,31,32,.35);border-radius:10px;
  background:#fffdf7;color:var(--ink);font:400 .95rem/1.2 var(--sans);-webkit-appearance:none;appearance:none}
.rv-item details{margin-top:8px}
.rv-item summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:700;font-size:.88rem}
.rv-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.rv-nums label{display:grid;gap:4px;min-width:0;font:700 .68rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
@media (max-width:360px){.rv-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rv-item-x{float:right;min-height:44px;padding:0 4px;background:none;border:0;color:var(--muted);font-size:.85rem;cursor:pointer;text-decoration:underline}
.rv-shot{display:grid;gap:6px;margin:6px 0 14px;font-weight:700;font-size:.9rem}
.rv-shot em{font-weight:400;color:var(--muted);font-style:normal}
.rv-shot{min-width:0}
.rv-shot input{width:100%;max-width:100%;min-width:0;font-size:.85rem}
.rv-content .rv-btn{width:100%}
.rv-content-ok{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:rgba(63,90,49,.14);color:var(--green);font-weight:700}
.rv-sent{margin:14px 0 0;padding-left:1.2em;font-size:.9rem;color:var(--muted)}
.rv-sent li{overflow-wrap:anywhere;margin:4px 0}
.rv-pass-stamp.is-off{border-color:var(--muted);color:var(--muted)}

/* -------------------------------------------------------------- footer */
.rv-foot{margin:48px auto 0;text-align:center;color:rgba(246,234,210,.75);font-size:.92rem}
.rv-foot b{color:var(--paper-3)}
.rv-foot-logo{display:inline-block;margin:14px 0 8px;padding:10px 16px;border-radius:12px;background:var(--paper-3)}
.rv-foot-logo img{width:150px;height:auto}
.rv-foot-small{font-size:.84rem}
.rv-foot-credit{margin:14px auto 0;padding-top:12px;max-width:320px;border-top:1px solid rgba(246,234,210,.18);font-size:.8rem;letter-spacing:.02em;color:rgba(246,234,210,.62)}
.rv-foot-credit a{color:var(--mustard);font-weight:700;text-decoration:none;white-space:nowrap}
.rv-foot-credit a:hover{text-decoration:underline}

/* ------------------------------------------------------------- wider */
@media (min-width:600px){
  .rv-hero-copy{padding:40px 36px 32px}
  .rv-deck{padding:34px 34px 30px}
  .rv-done-acts{grid-template-columns:1fr 1fr}
  .rv-done-acts #rvShare{grid-column:1/-1}
}
@media (min-width:960px){
  main{padding:0 28px 60px}
  .rv-hero{grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding-top:56px}
  .rv-polaroid{width:360px;transform:rotate(4deg)}
  .rv-vinyl{width:440px;height:440px;top:-40px;right:-150px}
  .rv-ticket{margin-top:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ============================================================ the theme
   The invite's collage behind the whole page, softened (blur baked into the
   file so phones don't pay for a filter), old-Bengaluru props drifting in
   the margins, a ticker of the old haunts and a strip of polaroids cut from
   the invite. All decoration: aria-hidden, no pointer events. */
.rv-bg{position:fixed;inset:0;z-index:-1;background:
    linear-gradient(180deg,rgba(26,20,17,.35),rgba(26,20,17,.8) 70%,var(--night)),
    url("/assets/events/cbd-kundalahalli-v2-bg.jpg") center top/cover no-repeat,var(--night)}
body.rv{background-color:transparent}
.rv-page{z-index:0}
main{position:relative;z-index:1}

.rv-props{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rv-prop{position:absolute;display:block;opacity:.55;animation:rv-float 9s ease-in-out infinite alternate;will-change:transform}
.rv-prop svg{display:block;width:100%;height:auto}
.rv-prop--cassette{top:21%;left:-28px;width:120px;--r:-16deg;animation-duration:11s}
.rv-prop--note1{top:5%;left:6%;font-size:2.4rem;color:var(--mustard);--r:-10deg}
.rv-prop--note2{top:38%;right:4%;font-size:2.8rem;color:var(--paper-2);--r:12deg;animation-delay:-3s}
.rv-prop--note3{top:84%;left:5%;font-size:2.2rem;color:var(--red);--r:8deg;animation-delay:-5s}
.rv-prop--spark1{top:13%;right:12%;font-size:1.4rem;color:var(--mustard);opacity:.8;animation:rv-twinkle 2.8s ease-in-out infinite}
.rv-prop--spark2{top:61%;left:9%;font-size:1.1rem;color:var(--paper-3);opacity:.7;animation:rv-twinkle 3.4s ease-in-out infinite -1.2s}
.rv-prop--kaapi{top:47%;left:-6px;width:64px;--r:8deg;animation-delay:-2s}
.rv-prop--film{top:72%;right:-30px;width:150px;--r:-9deg;animation-delay:-4s}
.rv-prop--bus{top:30%;right:-14px;width:132px;padding:8px 10px 7px;border:1px dashed rgba(35,31,32,.45);border-radius:3px;
  background:#E7D39C;color:var(--ink);font:700 .62rem/1.25 var(--type);letter-spacing:.06em;text-align:center;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8);--r:9deg;opacity:.7;animation-delay:-6s}
.rv-prop--bus b{display:block;font:400 1rem/1 var(--display);letter-spacing:.12em;color:var(--red)}
.rv-prop--bus i,.rv-prop--bus em,.rv-prop--bus small{display:block;font-style:normal}
.rv-prop--bus em{margin:3px 0;font-size:.56rem}
.rv-prop--stamp{top:93%;right:7%;padding:8px 12px;border:2px solid var(--mustard);border-radius:50%;color:var(--mustard);
  font:700 .62rem/1.2 var(--sans);letter-spacing:.16em;text-align:center;--r:-14deg;opacity:.5}
.rv-prop--stamp b{display:block;font-size:.95rem;letter-spacing:.08em}
.rv-prop--stamp small{display:block;font-size:.55rem}
@keyframes rv-float{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 4deg))}}
@keyframes rv-twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.15)}}
/* phones: keep the margins quiet, the reading column is the whole width */
@media (max-width:640px){
  .rv-prop{opacity:.32}
  .rv-prop--film,.rv-prop--stamp,.rv-prop--note2{display:none}
  .rv-prop--cassette{width:86px;left:-34px}
  .rv-prop--bus{width:104px;right:-40px;opacity:.45}
  .rv-prop--kaapi{width:48px;left:-14px}
}
@media (min-width:1200px){
  .rv-prop--cassette{left:3%;width:140px}
  .rv-prop--bus{right:4%}
  .rv-prop--kaapi{left:6%;width:76px}
  .rv-prop--film{right:3%}
}

/* the ticker: a mustard band of the old haunts, running right to left */
.rv-marquee{position:relative;margin:34px -16px 0;padding:11px 0;overflow:hidden;background:var(--mustard);color:var(--ink);
  transform:rotate(-1.6deg);box-shadow:0 10px 24px -14px rgba(0,0,0,.8);border-block:2px solid var(--ink)}
.rv-marquee-track{display:flex;width:max-content;animation:rv-marquee 38s linear infinite}
.rv-marquee span{flex:none;padding:0 18px;font:700 .95rem/1 var(--type);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rv-marquee span::after{content:"★";margin-left:36px;color:var(--red)}
@keyframes rv-marquee{to{transform:translateX(-50%)}}
@media (min-width:960px){.rv-marquee{margin:46px -28px 0}}

/* memory lane: four polaroids, tilted, that straighten up when touched */
.rv-mem{margin:48px auto 0;max-width:900px;text-align:center}
.rv-mem .rv-h2{color:var(--paper-3)}
.rv-mem .rv-h2 em{display:block;margin-top:6px;font:700 clamp(1.4rem,5vw,1.9rem)/1.1 var(--hand);text-transform:none;color:var(--mustard)}
.rv-mem-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0 0}
.rv-mem-card{position:relative;margin:0;padding:10px 10px 0;background:#F6EFE0;color:var(--ink);border-radius:3px;
  box-shadow:0 18px 30px -18px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.15);transform:rotate(var(--r,-3deg));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.rv-mem-card:nth-child(2){--r:3deg;margin-top:14px}
.rv-mem-card:nth-child(3){--r:-2deg}
.rv-mem-card:nth-child(4){--r:4deg;margin-top:10px}
.rv-mem-card img{width:100%;aspect-ratio:1;object-fit:cover;transform:scale(1.04);filter:sepia(.18) saturate(1.05) contrast(1.02)}
.rv-mem-card figcaption{padding:10px 4px 14px;font:700 1.15rem/1.15 var(--hand);color:var(--ink)}
.rv-mem-card .rv-tape-strip{width:70px;height:22px;margin-left:-35px;top:-10px}
.rv-mem-card:hover,.rv-mem-card:active{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:0 26px 40px -20px rgba(0,0,0,.95)}
.rv-mem-foot{margin:22px 0 0;font-size:1.5rem;color:var(--paper-3);transform:rotate(-1.5deg)}
@media (max-width:760px){
  .rv-mem-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .rv-mem-card figcaption{font-size:1.02rem}
}

@media (prefers-reduced-motion:reduce){
  .rv-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .rv-marquee span:nth-child(n+9){display:none}
}

/* 560037 in CBD's sticker style: one as a highlight between the ticket and
   the polaroids, one fainter in the background further down */
.rv-pinrow{position:relative;z-index:0;width:min(560px,92%);margin:46px auto -6px;transform:rotate(-4deg);
  opacity:.6;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));transition:opacity .4s,transform .4s}
.rv-pinrow:hover{opacity:.85;transform:rotate(-2deg) scale(1.02)}
.rv-pinrow svg,.rv-pin svg{display:block;width:100%;height:auto}
.rv-pin{position:absolute;display:block;pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.rv-pin--b{top:64%;right:-8%;transform:rotate(6deg);width:min(480px,60vw);opacity:.22}
@media (min-width:1200px){.rv-pin--b{right:1%}}
@media (max-width:640px){.rv-pin--b{width:84vw;right:-16vw;top:66%;opacity:.14}}
/* just the one polaroid: the old Kundalahalli board */
.rv-mem-row--one{grid-template-columns:minmax(0,320px);justify-content:center}
.rv-mem-row--one .rv-mem-card{--r:-3deg;margin-top:0}
@media (max-width:760px){.rv-mem-row--one{grid-template-columns:minmax(0,280px)}}

/* the mixtape is on but the browser is holding the sound until a tap */
.rv-music.is-waiting{animation:rv-music-call 1.6s ease-in-out infinite}
.rv-music.is-waiting .rv-music-eq i{animation:rv-eq .9s ease-in-out infinite alternate;opacity:.6}
@keyframes rv-music-call{0%,100%{box-shadow:0 10px 26px -10px rgba(0,0,0,.85),0 0 0 0 rgba(227,178,60,.55)}
  50%{box-shadow:0 10px 26px -10px rgba(0,0,0,.85),0 0 0 10px rgba(227,178,60,0)}}

/* ======================================================= quick to fill
   The form is one screen (js/rsvp.js ONE): every field at once, one send
   button, the message under the field it is about. */
.rv-form.is-one .rv-step{display:block;margin:0 0 16px;animation:none}
.rv-form.is-one .rv-step legend{margin:0 0 6px;font-size:clamp(1.12rem,4.6vw,1.3rem)}
.rv-form.is-one .rv-step .rv-no{font-size:.8em}
.rv-form.is-one .rv-help{margin-top:5px;font-size:.82rem}
.rv-form.is-one .rv-step .rv-err{margin:8px 0 0}
.rv-form.is-one .rv-nav #rvBack{display:none}
.rv-form.is-one .rv-nav #rvNext{flex:1 1 100%;min-height:58px;font-size:1.08rem}
.rv-deck.is-one .rv-tracks{display:none}
.rv-deck.is-one .rv-cassette{max-width:300px}

/* phones: a short invite card, then straight to the form; everything else
   (details, brief, the pincode, Rewind, the poster) follows it */
@media (max-width:760px){
  main{display:flex;flex-direction:column}
  .rv-hero{display:contents}
  .rv-vinyl{order:0;top:-90px;right:-150px;width:240px;height:240px}
  .rv-hero-copy{order:1;margin-top:18px;padding:22px 16px 18px}
  .rv-hero-copy .rv-lede,.rv-hero-copy .rv-play{display:none}
  .rv-title{font-size:clamp(2.6rem,15vw,3.6rem)}
  .rv-count{margin-bottom:12px}
  .rv-deck,.rv-done{order:2;margin-top:22px}
  .rv-deck{padding:22px 16px 18px}
  .rv-deck .rv-h2{font-size:1.7rem}
  .rv-deck.is-one .rv-cassette{max-width:200px;margin-bottom:12px}
  .rv-ticket{order:3}
  .rv-brief{order:4}
  .rv-marquee{order:5}
  .rv-pinrow{order:6}
  .rv-mem{order:7}
  .rv-polaroid{order:8;margin:36px auto 0}
  .rv-foot{order:9}
}
.rv-form.is-one .rv-choice span{flex-direction:row;min-height:56px;gap:8px;padding:8px 10px;font-size:.95rem}
.rv-form.is-one .rv-choice b{font-size:1.4rem}
/* phones: the mixtape button shrinks to a round icon so it never covers the
   send button; it says its words again only while waiting for a tap */
@media (max-width:520px){
  .rv-music:not(.is-waiting){width:48px;min-height:48px;padding:0;justify-content:center}
  .rv-music:not(.is-waiting) .rv-music-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* the cassette label scales with the cassette (container units), one line,
   so "A · RSVP MIX '26 · CBD KUNDALAHALLI · C60" lines up at any size */
.rv-cassette{container-type:inline-size}
.rv-cas-label{align-items:center;gap:2.6cqw;height:66%;padding:4.2cqw 4.5cqw 0;align-content:flex-start;align-items:flex-start}
.rv-cas-side{width:7.4cqw;height:7.4cqw;font-size:4.2cqw}
.rv-cas-title{min-width:0;padding-top:.8cqw;font-size:4.6cqw;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-cas-c60{flex:none;padding-top:1.6cqw;font-size:3.6cqw}
.rv-cassette::before,.rv-cassette::after{top:2cqw;width:2.4cqw;height:2.4cqw}
.rv-cassette::before{left:2cqw}.rv-cassette::after{right:2cqw}

/* phones: Admit One sits right under the invite card, then the form */
@media (max-width:760px){
  .rv-ticket{order:2;margin-top:22px}
  .rv-deck,.rv-done{order:3}
  .rv-deck.is-one .rv-cassette{max-width:260px}
}