:root{
  --black:#000;
  --white:#fff;
  --paper:#f3eee3;
  --ink:#0b0b0b;
  --soft:rgba(255,255,255,.72);
  --title:"Fino Bold",serif;
  --body:"Nitti Typewriter","Courier New",monospace;
  --accent:"CharcoalScript","Charcoal Script",cursive;
  --mx:50vw;
  --my:50vh;
  --stage-top:122px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;color:#fff}
body{font-family:var(--body);font-size:16px;cursor:none}
button,a,input{font:inherit}
button,a{cursor:none}
img,video{display:block;max-width:100%}
.skip-link{position:fixed;left:12px;top:-70px;z-index:500;background:#fff;color:#000;padding:.7rem 1rem}
.skip-link:focus{top:12px}

/* Same flashlight cursor and black film texture as the main site. */
.grain{position:fixed;inset:-40%;z-index:80;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:grainShift 6s steps(8) infinite}
.flicker{position:fixed;inset:0;z-index:79;pointer-events:none;background:#fff;opacity:0;animation:pageFlicker 12s steps(1,end) infinite}
.spotlight{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.52) 0,rgba(255,255,255,.25) 92px,rgba(255,255,255,.10) 220px,transparent 420px);mix-blend-mode:screen;opacity:.98}
.cursor{position:fixed;left:0;top:0;width:42px;height:42px;border:1px solid rgba(255,255,255,.9);border-radius:999px;z-index:101;pointer-events:none;transform:translate(calc(var(--mx) - 21px),calc(var(--my) - 21px));transition:width .18s ease,height .18s ease,border .18s ease,background .18s ease,transform .12s ease}
.cursor-dot{position:fixed;left:0;top:0;width:4px;height:4px;border-radius:50%;background:#fff;z-index:102;pointer-events:none;transform:translate(calc(var(--mx) - 2px),calc(var(--my) - 2px))}
body.is-hovering .cursor{width:74px;height:74px;background:rgba(255,255,255,.08);border-color:#fff;transform:translate(calc(var(--mx) - 37px),calc(var(--my) - 37px))}
body.is-clicking .cursor{transform:translate(calc(var(--mx) - 37px),calc(var(--my) - 37px)) scale(.84)}

.journey-app{position:fixed;inset:0;background:#000;isolation:isolate}
.topbar{position:fixed;z-index:110;top:0;left:0;right:0;height:var(--stage-top);padding:10px clamp(14px,3vw,48px) 8px;background:linear-gradient(#000 0%,rgba(0,0,0,.98) 73%,rgba(0,0,0,.78) 89%,transparent 100%)}
.topbar-line{height:34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{justify-self:start;color:#fff;text-decoration:none;font-family:var(--title);font-size:clamp(19px,2vw,28px);letter-spacing:.04em;text-transform:uppercase}
.restart{justify-self:end;border:0;background:transparent;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.16em;font-size:10px;padding:8px}
.restart:hover{color:#fff}
.progress-current{display:flex;align-items:center;justify-content:center;gap:7px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:rgba(255,255,255,.6)}
.progress-current strong{color:#fff}
.progress-current b{font-family:var(--title);font-size:17px;letter-spacing:.05em}
.progress-current i{font-style:normal}
.step-progress{list-style:none;margin:6px auto 0;padding:0;width:min(760px,100%);display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.step-progress::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:1px;background:rgba(255,255,255,.18)}
.step-progress li{position:relative;text-align:center}
.step-progress button{border:0;background:transparent;color:rgba(255,255,255,.28);padding:0;width:100%;display:grid;justify-items:center;gap:5px}
.step-progress button:disabled{opacity:1}
.step-progress span{position:relative;z-index:2;width:31px;height:31px;border:1px solid rgba(255,255,255,.25);background:#000;border-radius:50%;display:grid;place-items:center;font-size:11px;transition:.25s ease}
.step-progress small{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.step-progress li.is-complete button,.step-progress li.is-unlocked button{color:rgba(255,255,255,.76)}
.step-progress li.is-complete span,.step-progress li.is-unlocked span{border-color:rgba(255,255,255,.68);box-shadow:0 0 14px rgba(255,255,255,.12)}
.step-progress li.is-active button{color:#fff}
.step-progress li.is-active span{border-color:#fff;background:#fff;color:#000;box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 30px rgba(255,255,255,.85);animation:stepHit 1.3s steps(1,end) infinite}
.step-progress li.is-active small{text-shadow:0 0 12px #fff}

.stage-shell{position:fixed;left:0;right:0;top:var(--stage-top);bottom:0;overflow:hidden}
.stage{position:absolute;inset:0;padding:clamp(8px,1.4vh,16px) clamp(16px,3vw,48px) clamp(10px,1.8vh,20px);display:grid;align-items:center;justify-items:center;opacity:0;visibility:hidden;transform:translate3d(28px,0,0) scale(.985);transition:opacity .35s ease,transform .35s ease,visibility .35s;overflow:hidden;background:#000}
.stage[hidden]{display:grid!important}
.stage.is-active{opacity:1;visibility:visible;transform:none}
.stage.is-leaving{opacity:0;transform:translate3d(-30px,0,0) scale(.985)}
.stage>*:not(.invitation-ghost){position:relative;z-index:3}
.invitation-ghost{position:absolute;inset:-5%;z-index:0;display:flex;flex-direction:column;justify-content:space-around;align-items:center;overflow:hidden;pointer-events:none;opacity:.95;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0 100px,rgba(0,0,0,.72) 175px,transparent 360px);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0 100px,rgba(0,0,0,.72) 175px,transparent 360px)}
.invitation-ghost span{display:block;white-space:nowrap;text-transform:uppercase;color:rgba(255,255,255,.026);line-height:.75}
.invitation-ghost .title{font-family:var(--title);font-size:clamp(72px,13vw,210px);letter-spacing:.035em}
.invitation-ghost .script{font-family:var(--accent);font-size:clamp(58px,10vw,160px);text-transform:none;color:rgba(255,255,255,.04)}
.invitation-ghost .type{font-family:var(--body);font-size:clamp(22px,3vw,48px);letter-spacing:.22em;color:rgba(255,255,255,.024)}

.eyebrow{margin:0 0 5px;font-family:var(--body);font-size:clamp(9px,.8vw,12px);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
h1,h2,h3{font-family:var(--title);font-weight:700;text-transform:uppercase;margin:0;line-height:.82;letter-spacing:.025em}
h1{font-size:clamp(54px,7vw,104px)}
h2{font-size:clamp(38px,5.2vw,78px)}
h3{font-size:clamp(29px,3vw,48px)}
.stage-heading{text-align:center;align-self:start}

.action{border:1px solid rgba(255,255,255,.72);background:#000;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;min-height:48px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative}
.action:hover{background:#fff;color:#000}
.action.secondary{background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78);font-size:11px}
.action.secondary:hover{border-color:#fff;color:#000}
.action-forward{display:grid;grid-template-columns:auto auto 34px;gap:8px 13px;text-align:left;padding:9px 12px 9px 18px;min-width:250px}
.action-forward span{font-size:9px;opacity:.64;grid-column:1/3}
.action-forward b{font-family:var(--body);font-size:12px;letter-spacing:.1em;grid-column:1/3}
.action-forward>i{font-style:normal;font-size:28px;grid-column:3;grid-row:1/3;align-self:center;animation:rightArrow 1.05s ease-in-out infinite}
.action-forward.is-locked{opacity:.38;filter:grayscale(1)}
.action-forward.is-locked:hover{background:#000;color:#fff}
.stage-actions{position:absolute!important;left:clamp(16px,3vw,48px);right:clamp(16px,3vw,48px);bottom:clamp(9px,1.4vh,16px);display:flex;justify-content:space-between;align-items:end;z-index:8}
.stage-back{position:absolute!important;left:clamp(16px,3vw,48px);bottom:clamp(10px,1.8vh,20px);z-index:8}

/* Step 1 */
.stage-envelope{place-items:center}
.envelope-scene{display:grid;justify-items:center;align-content:center;gap:clamp(12px,2vh,22px);width:100%;height:100%;padding-bottom:1vh}
.envelope-copy{text-align:center}
.envelope-wrap{display:grid;justify-items:center;gap:24px}
.envelope{position:relative;width:min(580px,78vw);aspect-ratio:1.75/1;border:0;background:transparent;padding:0;perspective:1100px;filter:drop-shadow(0 34px 34px rgba(0,0,0,.66));animation:envelopeFloat 4s ease-in-out infinite}
.envelope-back{position:absolute;inset:10% 0 0;background:var(--paper);border:1px solid rgba(0,0,0,.3)}
.envelope-front{position:absolute;inset:10% 0 0;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:linear-gradient(150deg,#e7dfcf,#faf6ec 50%,#ddd2be);border:1px solid rgba(0,0,0,.2);z-index:4}
.envelope-flap{position:absolute;left:0;right:0;top:10%;height:58%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#f8f2e7,#ddd2be);transform-origin:top;z-index:5;transition:transform .75s cubic-bezier(.2,.75,.2,1),z-index .1s .35s}
.envelope-card{position:absolute;left:8%;right:8%;top:18%;height:75%;background:#f7f2e9;color:#111;border:1px solid rgba(0,0,0,.2);display:grid;place-items:center;align-content:center;gap:10px;z-index:2;transition:transform .8s .25s cubic-bezier(.15,.8,.15,1);box-shadow:0 15px 40px rgba(0,0,0,.25)}
.envelope-card small,.envelope-card em{font-family:var(--body);font-style:normal;font-size:clamp(8px,1vw,12px);letter-spacing:.16em;text-transform:uppercase}
.envelope-card strong{font-family:var(--title);font-size:clamp(28px,5vw,56px);line-height:.82;text-transform:uppercase}
.wax-seal{position:absolute;left:50%;top:48%;width:clamp(62px,8vw,88px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:7;background:radial-gradient(circle at 32% 28%,#434343,#060606 62%,#222);box-shadow:0 4px 0 #000,0 10px 22px rgba(0,0,0,.5),inset 0 0 0 5px rgba(255,255,255,.05);display:grid;place-items:center;color:#fff}
.wax-seal span{font-family:var(--title);font-size:clamp(17px,2.4vw,27px);letter-spacing:.02em;white-space:nowrap}
.seal-cue{position:absolute;left:50%;top:10%;z-index:8;transform:translateX(-50%);display:grid;justify-items:center;color:#000;pointer-events:none;text-transform:uppercase}
.seal-cue b{font-family:var(--body);font-size:clamp(15px,1.6vw,23px);letter-spacing:.13em;line-height:1;background:rgba(247,242,233,.7);padding:4px 8px}
.seal-cue i{position:relative;display:block;width:2px;height:clamp(48px,7vw,72px);margin-top:7px;background:#000;animation:downArrow 1.05s ease-in-out infinite}
.seal-cue i::after{content:"";position:absolute;left:50%;bottom:-1px;width:12px;height:12px;border-right:2px solid #000;border-bottom:2px solid #000;transform:translateX(-50%) rotate(45deg)}
.envelope-action{min-width:min(390px,88vw);min-height:66px;padding:12px 16px 12px 22px;box-shadow:0 0 0 0 rgba(255,255,255,.25);animation:buttonPulse 1.8s ease-in-out infinite}
.envelope-action span{font-size:11px}.envelope-action b{font-size:14px}
.stage-envelope.is-opening .wax-seal{animation:sealPop .65s ease forwards}
.stage-envelope.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}
.stage-envelope.is-opening .envelope-card{transform:translateY(-47%) scale(1.03)}
.stage-envelope.is-opening .seal-cue,.stage-envelope.is-opening .envelope-action{opacity:0;transition:opacity .18s ease}

/* Step 2 */
.stage-ticket{align-content:start;grid-template-rows:auto 1fr}
.ticket-heading{padding-top:2px}
.ticket-heading h2{font-size:clamp(35px,4.3vw,66px)}
.ticket-presentation{width:min(1220px,96vw);height:calc(100% - 74px);display:grid;grid-template-columns:minmax(190px,300px) minmax(0,1fr);align-items:center;justify-content:center;gap:clamp(24px,4vw,58px);padding:6px 0 50px}
.ticket-poster{position:relative;margin:0;width:100%;max-width:300px;justify-self:end;padding:8px;background:#070707;border:1px solid rgba(255,255,255,.46);box-shadow:0 24px 72px rgba(255,255,255,.08);transform:rotate(-1.4deg);animation:posterFloat 4.2s ease-in-out infinite;overflow:hidden}
.ticket-poster img{width:100%;height:auto;max-height:min(54vh,470px);object-fit:contain}
.poster-glint{position:absolute;top:-20%;bottom:-20%;width:25%;left:-35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);transform:rotate(10deg);animation:posterGlint 5.2s ease-in-out infinite;pointer-events:none}
.ticket{position:relative;width:min(900px,100%);aspect-ratio:2.5/1;min-height:292px;max-height:390px;display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,20%,210px);background:var(--paper);color:var(--ink);border:1px solid rgba(0,0,0,.55);box-shadow:0 34px 80px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12);clip-path:polygon(0 9px,9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px));transform-origin:42% 50%}
.ticket-main{position:relative;padding:clamp(20px,2.8vw,38px);overflow:hidden;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.82),transparent 36%),repeating-linear-gradient(0deg,rgba(0,0,0,.022) 0 1px,transparent 1px 5px),#f2eadb}
.ticket-main::before{content:"CINE DE DOS  ·  CINE DE DOS  ·  CINE DE DOS";position:absolute;left:4%;right:4%;bottom:10px;font-size:7px;letter-spacing:.25em;white-space:nowrap;overflow:hidden;opacity:.36}
.ticket-presenter{margin:0 0 8px;font-size:clamp(7px,.75vw,10px);letter-spacing:.18em;text-transform:uppercase}
.ticket-main h3{font-size:clamp(39px,4.7vw,70px);line-height:.78}
.ticket-subtitle{font-family:var(--body)!important;font-size:clamp(10px,1.05vw,15px);letter-spacing:.08em;text-transform:uppercase;margin:13px 0 16px;line-height:1.2}
.ticket dl{display:grid;gap:8px;margin:0}
.ticket dl div{display:grid;grid-template-columns:54px 1fr;gap:12px;padding-top:7px;border-top:1px solid rgba(0,0,0,.23)}
.ticket dt{font-size:8px;letter-spacing:.16em;text-transform:uppercase;opacity:.58}
.ticket dd{margin:0;font-size:clamp(10px,1vw,14px);line-height:1.25;text-transform:uppercase}
.ticket dd span{font-size:.9em;opacity:.72}
.ticket-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px 14px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 4px),#e8dfcf;border-left:2px dashed rgba(0,0,0,.48);transform-origin:left center;z-index:2}
.ticket-stub::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:20px;background:radial-gradient(circle at 100% 10px,transparent 0 8px,#e8dfcf 8.5px);background-size:20px 20px;pointer-events:none}
.ticket-stub>b{font-family:var(--title);font-size:clamp(27px,3vw,44px);line-height:.8}
.stub-admit{font-size:clamp(9px,.85vw,12px);line-height:1.1;text-transform:uppercase;text-align:center;letter-spacing:.08em}
.ticket-stub>small{font-size:9px;letter-spacing:.2em}
.stub-helper{display:grid;justify-items:center;gap:2px;font-size:8px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-top:1px}
.stub-helper i{font-style:normal;font-size:17px;line-height:1;animation:downArrow 1s ease-in-out infinite}
.stub-tear-button{width:100%;min-height:76px;border:2px solid #000;background:#000;color:#fff;padding:10px 8px;display:grid;grid-template-columns:1fr 26px;align-items:center;text-align:left;text-transform:uppercase;box-shadow:0 7px 0 rgba(0,0,0,.22);transition:transform .18s ease,background .18s ease,color .18s ease}
.stub-tear-button:hover{background:#fff;color:#000;transform:translateY(-3px)}
.stub-tear-button span{font-family:var(--title);font-size:clamp(20px,2vw,28px);line-height:.82;grid-column:1}
.stub-tear-button b{font-family:var(--body);font-size:8px;letter-spacing:.09em;line-height:1.15;grid-column:1;margin-top:5px}
.stub-tear-button>i{font-style:normal;font-size:26px;grid-column:2;grid-row:1/3;animation:rightArrow 1s ease-in-out infinite}
.stage-ticket.is-tearing .ticket{animation:ticketJolt 1.35s cubic-bezier(.2,.7,.15,1) forwards}
.stage-ticket.is-tearing .ticket-main::after{content:"";position:absolute;right:-5px;top:0;bottom:0;width:12px;background:#fff;opacity:0;animation:tearFlash .9s steps(1,end) forwards}
.stage-ticket.is-tearing .ticket-stub{animation:stubRip 1.35s cubic-bezier(.25,.65,.2,1) forwards}
.stage-ticket.is-tearing .stub-tear-button{animation:buttonShake .52s linear 2}
.paper-scrap{position:fixed;z-index:260;width:8px;height:16px;background:#e8dfcf;pointer-events:none;animation:scrapFly 1.15s ease-out forwards;box-shadow:0 0 0 1px rgba(0,0,0,.14)}

/* Step 3 */
.stage-trailer{place-items:center;padding-bottom:66px}
.theater-wrap{width:min(1280px,94vw);display:grid;justify-items:center;gap:12px}
.theater{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--stage-top) - 108px);background:#050505;border:1px solid rgba(255,255,255,.38);box-shadow:0 34px 110px rgba(0,0,0,.9),0 0 80px rgba(255,255,255,.06);overflow:hidden}
.watch-video{width:100%;height:100%;object-fit:contain;background:#000}
.big-play{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;border:0;background:radial-gradient(circle,rgba(0,0,0,.15),rgba(0,0,0,.72));color:#fff;text-transform:uppercase;letter-spacing:.12em;transition:opacity .25s ease,visibility .25s ease}
.big-play span{width:clamp(92px,10vw,138px);aspect-ratio:1;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.58);display:grid;place-items:center;padding-left:.12em;font-size:clamp(44px,5vw,72px);box-shadow:0 0 0 0 rgba(255,255,255,.42);animation:playPulse 1.65s ease-in-out infinite}
.big-play b{font-family:var(--title);font-size:clamp(36px,5vw,72px);line-height:.82}
.big-play.is-hidden{opacity:0;visibility:hidden}
.player-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:46px 46px 1fr auto 46px 46px;align-items:center;gap:4px;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.92) 45%);min-height:58px;transform:translateY(0)}
.player-bar button{width:42px;height:42px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(0,0,0,.38);color:#fff;display:grid;place-items:center;font-size:17px;line-height:1}
.player-bar button:hover{background:#fff;color:#000}
.player-bar input{accent-color:#fff;width:100%;height:20px}
.player-bar>span{font-size:10px;letter-spacing:.06em;white-space:nowrap}
.video-gate{margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.video-gate.is-unlocked{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.9)}

/* Step 4 */
.stage-details{align-content:start;grid-template-rows:auto 1fr}
.details-heading{padding-top:0}.details-heading h2{font-size:clamp(36px,4.3vw,68px)}
.info-shell{width:min(1180px,96vw);height:calc(100% - 72px);padding:10px 0 58px;display:grid;grid-template-rows:auto 1fr auto;gap:9px}
.info-progress{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:rgba(255,255,255,.62)}
.info-progress b{font-family:var(--title);font-size:20px;letter-spacing:.04em;color:#fff}
.info-dots{justify-self:end;display:flex;gap:7px}.info-dots i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.42)}.info-dots i.is-complete{background:rgba(255,255,255,.55)}.info-dots i.is-active{background:#fff;box-shadow:0 0 18px #fff;animation:stepHit 1.3s steps(1,end) infinite}
.info-viewport{position:relative;min-height:0;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.82);box-shadow:0 30px 100px rgba(0,0,0,.8),0 0 80px rgba(255,255,255,.035);overflow:hidden}
.info-panel{position:absolute;inset:0;padding:clamp(20px,3vw,44px);opacity:0;visibility:hidden;transform:translateX(30px);transition:opacity .28s ease,transform .28s ease,visibility .28s;display:grid;align-content:center}
.info-panel[hidden]{display:grid!important}.info-panel.is-active{opacity:1;visibility:visible;transform:none}
.info-panel p{font-size:clamp(12px,1.12vw,17px);line-height:1.5;color:rgba(255,255,255,.78);margin:12px 0 0}.info-panel b{color:#fff}
.overview-panel{grid-template-columns:minmax(170px,31%) minmax(0,1fr);gap:clamp(22px,4vw,58px);align-items:center}
.overview-poster{width:100%;height:100%;max-height:48vh;object-fit:contain;justify-self:center;border:1px solid rgba(255,255,255,.42);padding:5px;background:#050505;box-shadow:0 22px 70px rgba(255,255,255,.06)}
.overview-panel h3{font-size:clamp(38px,5.2vw,78px)}
.nitti-subtitle{font-family:var(--body)!important;font-size:clamp(10px,1vw,14px)!important;letter-spacing:.09em;text-transform:uppercase;color:#fff!important}
.location-panel{text-align:center;justify-items:center}.info-kicker{font-size:clamp(12px,1.3vw,18px)!important;letter-spacing:.14em;text-transform:uppercase;color:#fff!important}.location-panel h3{font-size:clamp(68px,10vw,146px)}.place-name{font-family:var(--title);font-size:clamp(30px,4vw,60px)!important;line-height:.92;color:#fff!important;text-transform:uppercase}.place-name span{font-family:var(--body);font-size:.36em;letter-spacing:.11em}
.fun-panel{grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}.fun-panel h3{font-size:clamp(46px,6.2vw,92px)}.fun-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fun-list span{border:1px solid rgba(255,255,255,.34);padding:12px 10px;text-transform:uppercase;font-size:clamp(9px,.9vw,12px);letter-spacing:.1em}.fun-panel>p{grid-column:2}
.dress-panel{grid-template-rows:1fr auto;justify-items:center;padding:10px 14px 16px}.dress-panel img{width:min(1080px,100%);height:100%;max-height:48vh;object-fit:contain}.dress-panel p{margin:8px auto 0;max-width:1050px;text-align:center;font-size:clamp(10px,1vw,14px)}
.parking-panel{text-align:center;justify-items:center}.parking-panel h3{font-size:clamp(58px,8vw,120px)}.parking-panel>p:not(.info-kicker){max-width:720px;font-size:clamp(14px,1.3vw,19px)}.rsvp-reminder{font-family:var(--accent);font-size:clamp(34px,4vw,56px)!important;line-height:1;color:#fff!important}
.info-navigation{display:flex;justify-content:space-between;align-items:center;gap:14px}

/* Step 5 */
.stage-rsvp{place-items:center}
.rsvp-gallery{position:absolute!important;inset:0;z-index:1!important;pointer-events:none}
.rsvp-photo{position:absolute;border:1px solid rgba(255,255,255,.46);background:#050505;padding:4px;box-shadow:0 18px 55px rgba(0,0,0,.85);pointer-events:auto;transition:opacity .3s ease,transform .45s ease;overflow:visible}
.rsvp-photo img{width:100%;height:auto;display:block;filter:none!important}
.rsvp-photo.flicking{animation:photoFlicker .76s steps(1,end)}
.photo-1{width:clamp(120px,15vw,230px);left:2.4vw;top:3vh;transform:rotate(-3deg)}
.photo-2{width:clamp(130px,17vw,260px);left:18vw;top:1vh;transform:rotate(2deg)}
.photo-3{width:clamp(120px,15vw,230px);right:2.8vw;top:4vh;transform:rotate(3deg)}
.photo-4{width:clamp(125px,16vw,245px);right:18vw;top:1vh;transform:rotate(-2deg)}
.photo-5{width:clamp(120px,15vw,230px);left:3vw;bottom:2.5vh;transform:rotate(2deg)}
.photo-6{width:clamp(130px,17vw,260px);left:19vw;bottom:0;transform:rotate(-3deg)}
.photo-7{width:clamp(125px,16vw,245px);right:3vw;bottom:2vh;transform:rotate(-2deg)}
.photo-8{width:clamp(130px,17vw,260px);right:19vw;bottom:0;transform:rotate(2.5deg)}
.rsvp-card{text-align:center;width:min(650px,88vw);padding:clamp(28px,4vw,54px);border:1px solid rgba(255,255,255,.54);background:rgba(0,0,0,.92);box-shadow:0 0 0 10px rgba(0,0,0,.72),0 0 120px rgba(255,255,255,.12);z-index:5!important}
.rsvp-card h2{font-size:clamp(66px,8.5vw,128px);line-height:.76}
.rsvp-card>p:not(.eyebrow){font-size:clamp(14px,1.3vw,19px);color:rgba(255,255,255,.78);margin:22px 0}
.rsvp-action{display:flex;align-items:center;justify-content:center;gap:30px;width:min(440px,100%);margin:18px auto 13px;background:#fff;color:#000;border:1px solid #fff;text-decoration:none;padding:20px 28px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--title);font-size:clamp(34px,4vw,56px);line-height:.8;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:rsvpPulse 1.7s ease-in-out infinite}
.rsvp-action i{font-style:normal;font-family:var(--body);font-size:34px;animation:rightArrow 1s ease-in-out infinite}.rsvp-action:hover{background:#000;color:#fff}
.calendar-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.56);padding:13px 20px;text-transform:uppercase;letter-spacing:.11em;font-size:13px}.calendar-action:hover{background:#fff;color:#000}.calendar-action i{font-style:normal;font-size:20px}
.final-back{position:absolute!important;left:clamp(16px,3vw,48px);bottom:clamp(10px,1.8vh,20px);z-index:8}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:88vw;max-height:88vh;object-fit:contain;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 30px 100px #000}
.lightbox button{position:absolute;border:1px solid rgba(255,255,255,.5);background:#000;color:#fff;width:46px;height:46px;font-size:24px}
.lightbox [data-lightbox-close]{right:22px;top:22px}.lightbox [data-lightbox-prev]{left:22px;top:50%}.lightbox [data-lightbox-next]{right:22px;top:50%}

@keyframes grainShift{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(2%,-1%,0)}50%{transform:translate3d(-1%,2%,0)}75%{transform:translate3d(1%,1%,0)}}
@keyframes pageFlicker{0%,91%,93%,100%{opacity:0}92%{opacity:.05}92.4%{opacity:0}97%{opacity:.025}}
@keyframes stepHit{0%,70%,74%,100%{opacity:1}72%{opacity:.38}73%{opacity:1}85%{box-shadow:0 0 0 4px rgba(255,255,255,.1),0 0 28px rgba(255,255,255,.75)}86%{box-shadow:0 0 0 8px rgba(255,255,255,.04),0 0 48px #fff}}
@keyframes rightArrow{0%,100%{transform:translateX(-4px);opacity:.55}50%{transform:translateX(6px);opacity:1}}
@keyframes downArrow{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(5px);opacity:1}}
@keyframes envelopeFloat{0%,100%{transform:translateY(0) rotate(-.2deg)}50%{transform:translateY(-8px) rotate(.2deg)}}
@keyframes sealPop{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.25) rotate(-8deg)}100%{transform:translate(-50%,-120%) scale(.1) rotate(40deg);opacity:0}}
@keyframes buttonPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.16)}50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
@keyframes posterFloat{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-7px)}}
@keyframes posterGlint{0%,35%{left:-35%}56%,100%{left:115%}}
@keyframes ticketJolt{0%{transform:rotate(0) scale(1)}12%{transform:rotate(-.7deg) scale(1.008)}24%{transform:rotate(.45deg) translateX(-5px)}38%{transform:rotate(-.35deg) translateX(7px)}50%{transform:rotate(.25deg) translateX(-3px)}70%{transform:rotate(0) translateX(0)}100%{transform:rotate(-1deg) translateX(-12px)}}
@keyframes tearFlash{0%,24%,46%,100%{opacity:0}25%{opacity:.85}28%{opacity:0}47%{opacity:.5}49%{opacity:0}}
@keyframes buttonShake{0%,100%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-2px)}80%{transform:translate(2px,1px)}}
@keyframes stubRip{0%{transform:translate(0,0) rotate(0);filter:none}14%{transform:translate(5px,-2px) rotate(1deg)}26%{transform:translate(12px,3px) rotate(-2deg)}38%{transform:translate(24px,-4px) rotate(4deg)}50%{transform:translate(38px,1px) rotate(-5deg);filter:drop-shadow(-10px 14px 8px rgba(0,0,0,.25))}60%{transform:translate(58px,-12px) rotate(12deg)}72%{transform:translate(115px,-48px) rotate(30deg)}100%{transform:translate(62vw,-46vh) rotate(122deg) scale(.66);opacity:0}}
@keyframes scrapFly{to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}
@keyframes playPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.30)}50%{transform:scale(1.04);box-shadow:0 0 0 14px rgba(255,255,255,0)}}
@keyframes photoFlicker{0%,18%,24%,62%,68%,100%{opacity:1;filter:none}20%{opacity:.18;filter:brightness(1.8)}22%{opacity:.92}64%{opacity:.35;filter:contrast(1.25)}66%{opacity:1}}
@keyframes rsvpPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.25)}50%{transform:scale(1.025);box-shadow:0 0 0 11px rgba(255,255,255,0)}}

@media(max-width:980px){
  :root{--stage-top:112px}
  .topbar{padding-inline:12px}.brand{font-size:18px}.progress-current{font-size:8px}.progress-current b{font-size:13px}
  .step-progress span{width:27px;height:27px;font-size:9px}.step-progress::before{top:13px}.step-progress small{font-size:7px}
  .stage{padding-inline:14px}
  .ticket-presentation{grid-template-columns:minmax(145px,220px) minmax(0,1fr);gap:20px;padding-bottom:44px}
  .ticket{grid-template-columns:minmax(0,1fr) 150px;min-height:270px}.ticket-main{padding:20px}.ticket-main h3{font-size:clamp(34px,5vw,56px)}.ticket-subtitle{font-size:9px}.ticket dd{font-size:9px}.stub-tear-button span{font-size:20px}
  .theater-wrap{width:96vw}.theater{max-height:calc(100svh - var(--stage-top) - 112px)}
  .info-shell{width:96vw}.info-panel{padding:22px}.overview-panel{grid-template-columns:minmax(150px,28%) 1fr}.fun-panel{gap:24px}
  .photo-2,.photo-4,.photo-6,.photo-8{display:none}.photo-1,.photo-3,.photo-5,.photo-7{width:clamp(130px,22vw,220px)}
}

@media(max-width:640px){
  :root{--stage-top:104px}
  .spotlight,.cursor,.cursor-dot{display:none}body,button,a{cursor:auto}
  .topbar-line{grid-template-columns:auto 1fr auto}.brand{font-size:14px}.restart{font-size:8px}.progress-current{display:none}
  .step-progress{margin-top:2px}.step-progress::before{left:10%;right:10%;top:12px}.step-progress span{width:25px;height:25px}.step-progress small{font-size:6px;max-width:52px;white-space:normal;line-height:.95}
  .stage{padding:4px 10px 8px}.eyebrow{font-size:8px}
  .envelope-scene{gap:10px;padding-bottom:2vh}.envelope-copy h1{font-size:clamp(48px,14vw,70px)}.envelope{width:min(94vw,500px)}.seal-cue{top:7%}.seal-cue b{font-size:14px}.seal-cue i{height:44px}.envelope-wrap{gap:16px}.envelope-action{min-width:92vw;min-height:60px}.envelope-action span{font-size:9px}.envelope-action b{font-size:11px}
  .stage-ticket{grid-template-rows:auto 1fr}.ticket-heading h2{font-size:clamp(29px,8vw,42px)}
  .ticket-presentation{height:calc(100% - 46px);display:grid;grid-template-columns:1fr;grid-template-rows:minmax(80px,130px) auto;gap:8px;padding:2px 0 43px;align-content:center}
  .ticket-poster{justify-self:center;width:auto;height:100%;max-width:none;padding:4px;transform:rotate(-.8deg)}.ticket-poster img{height:100%;width:auto;max-height:130px}
  .ticket{width:96vw;min-height:0;max-height:none;aspect-ratio:2.05/1;grid-template-columns:minmax(0,1fr) 104px}
  .ticket-main{padding:11px 9px}.ticket-presenter{font-size:5.5px;margin-bottom:3px}.ticket-main h3{font-size:clamp(24px,7vw,34px)}.ticket-subtitle{font-size:6px;line-height:1.1;margin:5px 0 7px}.ticket dl{gap:3px}.ticket dl div{grid-template-columns:28px 1fr;gap:4px;padding-top:3px}.ticket dt{font-size:5px}.ticket dd{font-size:6.4px;line-height:1.18}.ticket-main::before{font-size:4px;bottom:4px}
  .ticket-stub{padding:7px 4px;gap:3px}.ticket-stub>b{font-size:19px}.stub-admit{font-size:6px}.ticket-stub>small{font-size:6px}.stub-helper{font-size:5px}.stub-helper i{font-size:12px}.stub-tear-button{min-height:58px;padding:6px 4px;grid-template-columns:1fr 18px}.stub-tear-button span{font-size:15px}.stub-tear-button b{font-size:5.5px}.stub-tear-button>i{font-size:18px}
  .stage-back{left:8px;bottom:6px}.stage-actions{left:8px;right:8px;bottom:6px}.stage-actions .secondary{min-width:auto;padding:7px 9px;font-size:8px}
  .action-forward{min-width:178px;grid-template-columns:auto auto 24px;padding:7px 8px 7px 11px}.action-forward span{font-size:6.5px}.action-forward b{font-size:8px}.action-forward>i{font-size:21px}
  .stage-trailer{padding-bottom:54px}.theater-wrap{width:98vw;gap:7px}.theater{max-height:calc(100svh - var(--stage-top) - 86px)}.big-play{gap:10px}.big-play span{width:72px;font-size:36px}.big-play b{font-size:clamp(30px,9vw,44px)}
  .player-bar{grid-template-columns:34px 34px 1fr auto 34px 34px;padding:4px 3px;gap:1px;min-height:42px}.player-bar button{width:31px;height:31px;font-size:13px}.player-bar>span{font-size:6px}.video-gate{font-size:7px}
  .details-heading h2{font-size:clamp(31px,9vw,44px)}.info-shell{width:98vw;height:calc(100% - 52px);padding:4px 0 2px;grid-template-rows:auto 1fr auto}.info-progress{font-size:7px}.info-progress b{font-size:15px}.info-dots i{width:6px;height:6px}
  .info-panel{padding:12px}.overview-panel{grid-template-columns:94px 1fr;gap:12px}.overview-poster{max-height:34vh}.overview-panel h3{font-size:clamp(27px,7.8vw,38px)}.overview-panel p{font-size:8.5px;line-height:1.28;margin-top:6px}.nitti-subtitle{font-size:6.5px!important}
  .location-panel h3{font-size:clamp(50px,15vw,78px)}.place-name{font-size:clamp(28px,8.6vw,42px)!important}.location-panel p{font-size:10px}
  .fun-panel{grid-template-columns:1fr;gap:9px;align-content:center}.fun-panel h3{font-size:clamp(36px,10vw,52px)}.fun-list{grid-template-columns:repeat(3,1fr);gap:4px}.fun-list span{padding:7px 4px;font-size:6px;text-align:center}.fun-panel>p{grid-column:auto;font-size:8.5px;margin-top:3px}
  .dress-panel{padding:5px 6px 9px}.dress-panel img{max-height:38vh}.dress-panel p{font-size:7.5px;line-height:1.25;margin-top:4px}
  .parking-panel h3{font-size:clamp(46px,13vw,70px)}.parking-panel>p:not(.info-kicker){font-size:10px}.rsvp-reminder{font-size:34px!important}
  .info-navigation .secondary{font-size:8px;padding:7px 8px;min-height:42px}
  .rsvp-card{width:88vw;padding:24px 16px}.rsvp-card h2{font-size:clamp(58px,18vw,82px)}.rsvp-card>p:not(.eyebrow){font-size:11px;margin:14px 0}.rsvp-action{font-size:36px;padding:17px 20px;margin:13px auto 10px}.calendar-action{font-size:10px;padding:11px 16px}
  .photo-1{width:31vw;left:-3vw;top:3vh}.photo-3{width:30vw;right:-3vw;top:5vh}.photo-5{width:31vw;left:-3vw;bottom:4vh}.photo-7{width:30vw;right:-3vw;bottom:5vh}.rsvp-photo{opacity:.72;padding:2px}.final-back{left:8px;bottom:6px}
  .grain{animation:none;opacity:.04}
}

@media(max-height:700px) and (min-width:641px){
  :root{--stage-top:104px}.topbar{padding-top:4px}.ticket-presentation{padding-bottom:42px}.ticket-poster img{max-height:44vh}.ticket{min-height:250px}.info-shell{height:calc(100% - 62px)}.rsvp-card{padding:26px}.rsvp-card h2{font-size:72px}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.grain,.flicker{display:none}}


/* === V40 FINAL POLISH === */
/* Clean main-site black background: no pixelated grain layer. */
.grain{display:none!important}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.035),transparent 23%),radial-gradient(circle at 84% 20%,rgba(255,255,255,.025),transparent 22%);mix-blend-mode:screen}
.journey-app{background:#000!important}
.stage{background:#000!important}
.flicker{opacity:0!important;animation:pageFlicker 15s steps(1,end) infinite!important}
.invitation-ghost{opacity:.55!important;mask-image:none!important;-webkit-mask-image:none!important;transform:rotate(-2deg) scale(1.04)}
.invitation-ghost span{color:rgba(255,255,255,.012)!important;text-shadow:none!important}
.invitation-ghost .script{color:rgba(255,255,255,.020)!important}
.invitation-ghost .type{color:rgba(255,255,255,.015)!important}
.invitation-ghost .title{color:rgba(255,255,255,.010)!important}

/* Main-site film edges and vertical Nitti credit runners. */
.film-edge{position:fixed;top:0;bottom:0;width:28px;z-index:82;pointer-events:none;opacity:.11;background-color:#000;background-image:radial-gradient(circle at 50% 14px,#fff 0 2.1px,transparent 2.55px);background-size:28px 43px;border-inline:1px solid rgba(255,255,255,.18)}
.film-edge.left{left:0}.film-edge.right{right:0}
.journey-runner{position:fixed;top:var(--stage-top);bottom:0;width:18px;z-index:4;pointer-events:none;overflow:hidden;color:rgba(255,255,255,.16);font-family:var(--body);font-size:10px;letter-spacing:.18em;text-transform:uppercase;writing-mode:vertical-rl;line-height:1}
.journey-runner span{display:block;animation:journeyCreditDrift 34s linear infinite}
.journey-runner-left.outer{left:38px}.journey-runner-left.inner{left:61px;opacity:.48}
.journey-runner-right.outer{right:38px;transform:rotate(180deg)}.journey-runner-right.inner{right:61px;transform:rotate(180deg);opacity:.48}
.journey-runner-right span{animation-direction:reverse}
@keyframes journeyCreditDrift{from{transform:translateY(-24%)}to{transform:translateY(16%)}}

/* Exact main-site cursor: two rings; inner ring and dot turn black on clickable items. */
.cursor{width:40px!important;height:40px!important;border:1px solid rgba(255,255,255,.58)!important;background:transparent!important;box-shadow:none!important;transform:translate(calc(var(--mx,50vw) - 20px),calc(var(--my,50vh) - 20px))!important;transition:width .15s ease,height .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .08s linear!important}
.cursor::after{content:""!important;display:block!important;position:absolute!important;inset:9px!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:50%!important;background:transparent!important;pointer-events:none!important}
body.is-hovering .cursor{width:52px!important;height:52px!important;transform:translate(calc(var(--mx,50vw) - 26px),calc(var(--my,50vh) - 26px)) scale(1.02)!important;border-color:rgba(255,255,255,.72)!important;background:rgba(255,255,255,.045)!important;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 22px rgba(255,255,255,.16)!important}
body.is-hovering .cursor::after{inset:9px!important;border-color:rgba(0,0,0,.82)!important}
.cursor-dot{width:4px!important;height:4px!important;opacity:.82!important;background:rgba(255,255,255,.82)!important;box-shadow:none!important;transform:translate(calc(var(--mx,50vw) - 2px),calc(var(--my,50vh) - 2px))!important;transition:background .15s ease,box-shadow .15s ease,transform .08s linear!important}
body.is-hovering .cursor-dot{opacity:.95!important;background:rgba(0,0,0,.88)!important;box-shadow:0 0 0 1px rgba(255,255,255,.12)!important;transform:translate(calc(var(--mx,50vw) - 2px),calc(var(--my,50vh) - 2px)) scale(1.15)!important}
body.is-clicking .cursor{transform:translate(calc(var(--mx,50vw) - 26px),calc(var(--my,50vh) - 26px)) scale(.9)!important}

/* Step 1: shorter, clearer cue and larger button. */
.seal-cue{top:13.5%!important}
.seal-cue b{font-size:clamp(14px,1.25vw,19px)!important;padding:4px 9px!important}
.seal-cue i{height:clamp(28px,3.2vw,42px)!important;margin-top:7px!important}
.seal-cue i::after{width:9px!important;height:9px!important}
.envelope-action{min-width:min(440px,90vw)!important;min-height:76px!important;padding:14px 18px 14px 25px!important}
.envelope-action span{font-size:12px!important}.envelope-action b{font-size:16px!important}

/* Step 2: larger uncropped poster, true horizontal ticket, and unmistakable tear control. */
.ticket-presentation{width:min(1460px,94vw)!important;grid-template-columns:minmax(280px,390px) minmax(590px,920px)!important;gap:clamp(36px,4vw,70px)!important;padding-inline:30px!important}
.ticket-poster{max-width:390px!important;padding:7px!important;overflow:visible!important;justify-self:end!important}
.ticket-poster img{width:100%!important;height:auto!important;max-height:min(64vh,570px)!important;object-fit:contain!important}
.ticket{width:100%!important;aspect-ratio:2.62/1!important;min-height:300px!important;max-height:390px!important;grid-template-columns:minmax(0,1fr) clamp(190px,22%,230px)!important}
.ticket-main::before{content:none!important;display:none!important}
.ticket-main{padding:clamp(24px,2.5vw,38px)!important}
.ticket dd{font-size:clamp(11px,1vw,15px)!important}
.ticket-stub{gap:10px!important;padding:17px 12px!important}
.stub-helper{font-size:11px!important;letter-spacing:.12em!important;margin-top:2px!important;text-shadow:0 0 10px rgba(0,0,0,.22)}
.stub-helper i{font-size:22px!important}
.stub-tear-button{min-height:96px!important;border-width:3px!important;padding:12px 10px!important;box-shadow:0 0 0 5px rgba(0,0,0,.08),0 9px 0 rgba(0,0,0,.23)!important;animation:tearButtonCallout 1.5s ease-in-out infinite!important}
.stub-tear-button span{font-size:clamp(25px,2.2vw,34px)!important}
.stub-tear-button b{font-size:10px!important}
.stub-tear-button>i{font-size:32px!important}
@keyframes tearButtonCallout{0%,100%{transform:translateY(0);box-shadow:0 0 0 5px rgba(0,0,0,.08),0 9px 0 rgba(0,0,0,.23)}50%{transform:translateY(-3px);box-shadow:0 0 0 8px rgba(0,0,0,.13),0 12px 0 rgba(0,0,0,.20)}}

/* Step 3: keep the 16:9 player inside every viewport and use a clean white speaker icon. */
.theater-wrap{width:min(1320px,calc(100vw - 86px))!important;max-width:100%!important}
.theater{width:100%!important;max-width:100%!important}
.player-bar button{color:#fff!important}
.player-bar button:hover{color:#000!important}
.volume-icon{width:22px;height:22px;display:grid;place-items:center}
.volume-icon svg{width:21px;height:21px;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.volume-icon .wave,.volume-icon .slash{fill:none}
.volume-off{display:none}
[data-mute-toggle].is-muted .volume-on{display:none}
[data-mute-toggle].is-muted .volume-off{display:grid}

/* Step 4: larger, clearer Event Info with a visible four-part reading sequence. */
.details-heading h2{font-size:clamp(42px,5vw,78px)!important}
.info-shell{width:min(1320px,calc(100vw - 110px))!important;height:calc(100% - 66px)!important;padding:8px 0 56px!important;gap:10px!important}
.info-progress{grid-template-columns:auto auto 1fr!important;gap:14px!important;padding:0 4px 4px!important;font-size:12px!important;letter-spacing:.16em!important;color:rgba(255,255,255,.8)!important}
.info-progress::before{content:"READ EACH SECTION";font-family:var(--body);font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.52);grid-column:1/-1;margin-bottom:-4px}
.info-progress b{font-size:27px!important}
.info-dots{gap:10px!important}.info-dots i{width:12px!important;height:12px!important}
.info-viewport{border-color:rgba(255,255,255,.42)!important;box-shadow:0 30px 100px rgba(0,0,0,.8),0 0 90px rgba(255,255,255,.05)!important}
.info-panel{padding:clamp(28px,3.6vw,56px)!important}
.info-panel p{font-size:clamp(16px,1.35vw,21px)!important;line-height:1.55!important}
.overview-panel{grid-template-columns:minmax(220px,30%) minmax(0,1fr)!important;gap:clamp(34px,5vw,76px)!important}
.overview-poster{max-height:57vh!important}
.overview-panel h3{font-size:clamp(48px,6vw,92px)!important}
.nitti-subtitle{font-size:clamp(12px,1.15vw,17px)!important}
.location-panel h3{font-size:clamp(74px,10vw,150px)!important}
.location-panel p{font-size:clamp(17px,1.5vw,23px)!important}
.place-name{font-size:clamp(38px,4.7vw,70px)!important}
.dress-panel{display:grid!important;place-items:center!important;padding:8px!important}
.dress-panel img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}
.parking-panel>p:not(.info-kicker){font-size:clamp(17px,1.45vw,22px)!important}
.info-navigation .secondary{min-height:52px!important;font-size:12px!important;padding:11px 16px!important}

/* Step 5: denser, faster-changing gallery and updated RSVP deadline. */
.photo-9{width:clamp(115px,13vw,205px);left:31vw;top:2vh;transform:rotate(-1deg)}
.photo-10{width:clamp(115px,13vw,205px);right:31vw;top:2vh;transform:rotate(1.5deg)}
.photo-11{width:clamp(115px,13vw,205px);left:31vw;bottom:1vh;transform:rotate(1.2deg)}
.photo-12{width:clamp(115px,13vw,205px);right:31vw;bottom:1vh;transform:rotate(-1.4deg)}
.rsvp-photo{transition:opacity .2s ease,transform .35s ease!important}
.rsvp-card>p:not(.eyebrow){font-size:clamp(16px,1.45vw,21px)!important}

@media(max-width:980px){
  .journey-runner-left.inner,.journey-runner-right.inner{display:none}
  .journey-runner-left.outer{left:32px}.journey-runner-right.outer{right:32px}
  .ticket-presentation{grid-template-columns:minmax(210px,300px) minmax(0,1fr)!important;padding-inline:34px!important;gap:28px!important}
  .ticket-poster{max-width:300px!important}
  .ticket{grid-template-columns:minmax(0,1fr) 176px!important}
  .info-shell{width:calc(100vw - 72px)!important}
  .photo-9,.photo-10,.photo-11,.photo-12{display:none}
}

@media(max-width:640px){
  :root{--stage-top:112px}
  .film-edge{width:20px;background-size:20px 36px;opacity:.08}
  .journey-runner{display:none!important}
  .spotlight,.cursor,.cursor-dot{display:none!important}
  body,button,a,input{cursor:auto!important}
  .topbar{padding:7px 10px 6px!important}.brand{font-size:15px!important}.restart{font-size:9px!important}
  .step-progress small{font-size:8px!important;line-height:1.05!important}.step-progress span{width:29px!important;height:29px!important;font-size:10px!important}
  .stage{padding:5px 12px 10px!important}
  .eyebrow{font-size:10px!important}
  .envelope-scene{gap:12px!important}.envelope-copy h1{font-size:clamp(48px,13vw,68px)!important}
  .envelope{width:min(91vw,500px)!important}
  .seal-cue{top:14%!important}.seal-cue b{font-size:13px!important}.seal-cue i{height:27px!important;margin-top:5px!important}.seal-cue i::after{width:8px!important;height:8px!important}
  .envelope-wrap{gap:18px!important}.envelope-action{min-width:91vw!important;min-height:72px!important}.envelope-action span{font-size:11px!important}.envelope-action b{font-size:14px!important}
  .ticket-heading h2{font-size:clamp(30px,8vw,43px)!important}
  .ticket-presentation{width:100%!important;height:calc(100% - 44px)!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(150px,205px) auto!important;gap:10px!important;padding:0 0 48px!important;align-content:center!important}
  .ticket-poster{justify-self:center!important;width:auto!important;height:100%!important;max-width:none!important;padding:5px!important}
  .ticket-poster img{height:100%!important;width:auto!important;max-height:205px!important;object-fit:contain!important}
  .ticket{width:94vw!important;aspect-ratio:1.82/1!important;grid-template-columns:minmax(0,1fr) 122px!important;min-height:0!important;max-height:none!important}
  .ticket-main{padding:13px 11px!important}.ticket-main h3{font-size:clamp(25px,7.4vw,36px)!important}.ticket-presenter{font-size:6.5px!important}.ticket-subtitle{font-size:7px!important;margin:5px 0 8px!important}.ticket dl div{grid-template-columns:31px 1fr!important}.ticket dt{font-size:6px!important}.ticket dd{font-size:7.4px!important;line-height:1.2!important}
  .ticket-stub{padding:8px 5px!important;gap:4px!important}.ticket-stub>b{font-size:22px!important}.stub-admit{font-size:7px!important}.ticket-stub>small{font-size:7px!important}.stub-helper{font-size:7px!important}.stub-helper i{font-size:16px!important}
  .stub-tear-button{min-height:72px!important;padding:7px 5px!important;grid-template-columns:1fr 21px!important}.stub-tear-button span{font-size:19px!important}.stub-tear-button b{font-size:6.5px!important}.stub-tear-button>i{font-size:23px!important}
  .action-forward{min-width:205px!important;min-height:54px!important;padding:9px 10px 9px 13px!important}.action-forward span{font-size:8px!important}.action-forward b{font-size:10px!important}.action-forward>i{font-size:25px!important}
  .stage-actions .secondary,.stage-back,.final-back{font-size:10px!important;min-height:45px!important;padding:9px 11px!important}
  .stage-trailer{padding:4px 10px 58px!important}
  .theater-wrap{width:100%!important;max-width:calc(100vw - 20px)!important;gap:8px!important}
  .theater{width:100%!important;max-width:100%!important;max-height:calc(100svh - var(--stage-top) - 104px)!important}
  .big-play span{width:74px!important;font-size:36px!important}.big-play b{font-size:clamp(31px,9vw,43px)!important}
  .player-bar{grid-template-columns:36px 36px minmax(0,1fr) 36px 36px!important;gap:2px!important;padding:5px 4px!important;min-height:46px!important}
  .player-bar>span{display:none!important}.player-bar button{width:34px!important;height:34px!important;font-size:14px!important}.volume-icon,.volume-icon svg{width:19px!important;height:19px!important}
  .video-gate{font-size:9px!important}
  .details-heading h2{font-size:clamp(37px,10vw,50px)!important}
  .info-shell{width:100%!important;max-width:calc(100vw - 20px)!important;height:calc(100% - 58px)!important;padding:4px 0 54px!important;gap:7px!important}
  .info-progress{font-size:9px!important;gap:7px!important}.info-progress::before{font-size:8px!important}.info-progress b{font-size:18px!important}.info-dots{gap:7px!important}.info-dots i{width:9px!important;height:9px!important}
  .info-panel{padding:18px 16px!important}
  .overview-panel{grid-template-columns:1fr!important;gap:0!important}.overview-poster{display:none!important}.overview-panel h3{font-size:clamp(38px,11vw,54px)!important}.overview-panel p{font-size:14px!important;line-height:1.45!important}.nitti-subtitle{font-size:10px!important}
  .location-panel h3{font-size:clamp(54px,15vw,78px)!important}.location-panel p{font-size:14px!important}.place-name{font-size:clamp(32px,9vw,44px)!important}.place-name span{font-size:.42em!important}
  .dress-panel{padding:5px!important}.dress-panel img{width:100%!important;height:100%!important;object-fit:contain!important}
  .parking-panel h3{font-size:clamp(48px,13vw,68px)!important}.parking-panel>p:not(.info-kicker){font-size:14px!important;line-height:1.5!important}
  .info-navigation .secondary{font-size:10px!important;min-height:48px!important;padding:9px 10px!important}
  .rsvp-card{width:84vw!important;padding:28px 18px!important}.rsvp-card h2{font-size:clamp(58px,17vw,80px)!important}.rsvp-card>p:not(.eyebrow){font-size:14px!important}.rsvp-action{font-size:38px!important;min-height:72px!important}.calendar-action{font-size:12px!important;min-height:48px!important}
  .photo-1,.photo-3,.photo-5,.photo-7{width:34vw!important;opacity:.68!important}.photo-1{left:-5vw!important}.photo-3{right:-5vw!important}.photo-5{left:-5vw!important}.photo-7{right:-5vw!important}
}

/* Final cue spacing and mobile readability */
.seal-cue{top:11.5%!important}
.seal-cue i{height:clamp(14px,1.8vw,22px)!important}
.info-shell{padding-bottom:4px!important}
@media(max-width:640px){
  .seal-cue{top:12%!important}
  .seal-cue i{height:14px!important}
  .envelope-action span{font-size:12px!important}
  .envelope-action b{font-size:15px!important}
  .info-shell{padding-bottom:4px!important}
}

/* === V41 FINAL QUICK FIXES === */
/* Match the main site's hidden-text background treatment instead of the faint centered stack. */
.invitation-ghost{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:block!important;
  overflow:hidden!important;
  opacity:1!important;
  transform:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  pointer-events:none!important;
  user-select:none!important;
}
.invitation-ghost span{
  position:absolute!important;
  display:block!important;
  white-space:nowrap!important;
  opacity:.72!important;
  mix-blend-mode:normal!important;
  text-shadow:0 0 1px rgba(255,255,255,.045)!important;
}
.invitation-ghost .title{
  font-family:var(--accent)!important;
  text-transform:none!important;
  letter-spacing:.018em!important;
  color:rgba(255,255,255,.05)!important;
  font-size:clamp(56px,10vw,160px)!important;
  line-height:.8!important;
}
.invitation-ghost .type{
  font-family:var(--body)!important;
  text-transform:none!important;
  letter-spacing:.22em!important;
  color:rgba(255,255,255,.07)!important;
  font-size:clamp(19px,4.1vw,76px)!important;
}
.invitation-ghost .script{
  font-family:var(--accent)!important;
  letter-spacing:.012em!important;
  text-transform:none!important;
  color:rgba(255,255,255,.085)!important;
  font-size:clamp(44px,8.5vw,145px)!important;
}
.invitation-ghost span:nth-child(1){left:-5vw!important;top:8%!important;transform:rotate(-5deg)!important}
.invitation-ghost span:nth-child(2){right:-6vw!important;top:24%!important;transform:rotate(2deg)!important}
.invitation-ghost span:nth-child(3){left:15vw!important;top:43%!important;transform:rotate(-2deg)!important}
.invitation-ghost span:nth-child(4){right:8vw!important;bottom:20%!important;transform:rotate(-6deg)!important}
.invitation-ghost span:nth-child(5){left:-4vw!important;bottom:6%!important;transform:rotate(3deg)!important}

/* Every action should read clearly at a glance. */
.action{font-size:clamp(14px,1.05vw,18px)!important;min-height:58px!important;padding:13px 20px!important}
.action-forward{min-width:310px!important;min-height:72px!important;padding:12px 16px 12px 22px!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:4px 14px!important}
.action-forward span{font-size:clamp(12px,.9vw,15px)!important;line-height:1.15!important;grid-column:1!important}
.action-forward b{font-size:clamp(15px,1.05vw,18px)!important;line-height:1.2!important;grid-column:1!important}
.action-forward>i{font-size:34px!important;grid-column:2!important;grid-row:1/3!important}
.action.secondary{font-size:clamp(13px,.92vw,16px)!important;letter-spacing:.09em!important}
.envelope-action span{font-size:15px!important}.envelope-action b{font-size:19px!important}
.info-navigation .secondary{font-size:15px!important}
.calendar-action{font-size:16px!important;min-height:54px!important;padding:15px 24px!important}

/* Step 2: remove the sweep/glint and make the poster itself the lightbox trigger. */
.poster-glint{display:none!important;animation:none!important}
.ticket-poster{
  appearance:none!important;
  color:#fff!important;
  cursor:none!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.ticket-poster:hover,.ticket-poster:focus-visible{
  transform:rotate(0deg) translateY(-7px) scale(1.015)!important;
  border-color:#fff!important;
  box-shadow:0 34px 100px rgba(255,255,255,.14)!important;
  outline:none!important;
}
.poster-open-cue{
  position:absolute;
  left:50%;bottom:15px;
  transform:translateX(-50%);
  z-index:4;
  background:rgba(0,0,0,.88);
  border:1px solid rgba(255,255,255,.78);
  color:#fff;
  padding:8px 12px;
  font-family:var(--body);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.88;
}
.ticket-poster:hover .poster-open-cue,.ticket-poster:focus-visible .poster-open-cue{background:#fff;color:#000;opacity:1}
.lightbox[data-mode="poster"] [data-lightbox-prev],.lightbox[data-mode="poster"] [data-lightbox-next]{display:none!important}

/* Step 3: keep the native/fullscreen video fitted on mobile and desktop. */
.theater:fullscreen,.theater:-webkit-full-screen{background:#000!important;display:grid!important;place-items:center!important}
.theater:fullscreen .watch-video,.theater:-webkit-full-screen .watch-video{width:100vw!important;height:100vh!important;object-fit:contain!important}
.watch-video:fullscreen,.watch-video:-webkit-full-screen{width:100vw!important;height:100vh!important;object-fit:contain!important;background:#000!important}

/* Step 4: never crop the complete dress-code board. */
.dress-panel{overflow:hidden!important;align-content:center!important;justify-content:center!important}
.dress-panel img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Step 5: tighten the engagement collage around the central RSVP card. */
.rsvp-gallery{inset:-1vh -1vw!important}
.rsvp-photo{z-index:1!important}
.photo-1{width:clamp(145px,15.5vw,245px)!important;left:.5vw!important;top:0!important}
.photo-2{width:clamp(145px,15.5vw,245px)!important;left:16.5vw!important;top:-1vh!important}
.photo-9{width:clamp(135px,14vw,220px)!important;left:32vw!important;top:0!important}
.photo-10{width:clamp(135px,14vw,220px)!important;right:32vw!important;top:0!important}
.photo-4{width:clamp(145px,15.5vw,245px)!important;right:16.5vw!important;top:-1vh!important}
.photo-3{width:clamp(145px,15.5vw,245px)!important;right:.5vw!important;top:0!important}
.photo-5{width:clamp(145px,15.5vw,245px)!important;left:.5vw!important;bottom:0!important}
.photo-6{width:clamp(145px,15.5vw,245px)!important;left:16.5vw!important;bottom:-1vh!important}
.photo-11{width:clamp(135px,14vw,220px)!important;left:32vw!important;bottom:0!important}
.photo-12{width:clamp(135px,14vw,220px)!important;right:32vw!important;bottom:0!important}
.photo-8{width:clamp(145px,15.5vw,245px)!important;right:16.5vw!important;bottom:-1vh!important}
.photo-7{width:clamp(145px,15.5vw,245px)!important;right:.5vw!important;bottom:0!important}

@media(max-width:980px){
  .photo-2,.photo-4,.photo-6,.photo-8{display:block!important}
  .rsvp-card{width:min(620px,78vw)!important}
}

@media(max-width:640px){
  /* Larger, readable mobile controls. */
  .action{font-size:13px!important;min-height:52px!important;padding:11px 14px!important}
  .action-forward{min-width:232px!important;min-height:62px!important;padding:10px 10px 10px 14px!important;grid-template-columns:minmax(0,1fr) 32px!important}
  .action-forward span{font-size:10.5px!important}.action-forward b{font-size:13px!important}.action-forward>i{font-size:28px!important}
  .action.secondary,.stage-actions .secondary,.stage-back,.final-back{font-size:12px!important}
  .envelope-action span{font-size:13px!important}.envelope-action b{font-size:17px!important}
  .stub-tear-button b{font-size:8px!important}
  .info-navigation .secondary{font-size:12px!important}
  .calendar-action{font-size:14px!important}

  /* Use the same scattered ghost-text field on mobile, just scaled down. */
  .invitation-ghost{display:block!important}
  .invitation-ghost .title{font-size:clamp(42px,15vw,92px)!important}
  .invitation-ghost .type{font-size:clamp(15px,6vw,46px)!important}
  .invitation-ghost .script{font-size:clamp(34px,13vw,88px)!important}
  .invitation-ghost span{opacity:.58!important}

  .ticket-poster{cursor:pointer!important}
  .poster-open-cue{font-size:10px!important;padding:6px 9px!important;bottom:8px!important}

  /* Keep overview content inside the panel; allow only the panel to scroll as a fallback. */
  .overview-panel{align-content:start!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:none!important;padding:13px 14px!important}
  .overview-panel::-webkit-scrollbar{display:none!important}
  .overview-panel h3{font-size:clamp(34px,10vw,46px)!important;line-height:.86!important}
  .overview-panel p{font-size:13px!important;line-height:1.36!important;margin-top:7px!important}
  .nitti-subtitle{font-size:9.5px!important}

  /* Full, uncropped dress-code image. */
  .dress-panel{padding:4px!important}
  .dress-panel img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important}

  /* Eight images now wrap the RSVP card on every side instead of leaving empty corners. */
  .rsvp-card{width:80vw!important;padding:24px 15px!important}
  .photo-1,.photo-2,.photo-3,.photo-4,.photo-5,.photo-6,.photo-7,.photo-8{display:block!important;width:31vw!important;opacity:.76!important}
  .photo-9,.photo-10,.photo-11,.photo-12{display:none!important}
  .photo-1{left:-4vw!important;top:-1vh!important}
  .photo-2{left:34vw!important;top:-2vh!important}
  .photo-3{right:-4vw!important;top:-1vh!important}
  .photo-4{left:-8vw!important;top:31%!important}
  .photo-5{right:-8vw!important;top:33%!important;left:auto!important;bottom:auto!important}
  .photo-6{left:-4vw!important;bottom:-1vh!important}
  .photo-7{left:34vw!important;bottom:-2vh!important;right:auto!important}
  .photo-8{right:-4vw!important;bottom:-1vh!important}
}
/* Ensure the entire 3:2 dress board fits inside its panel without clipping. */
.dress-panel img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
@media(max-width:640px){
  .action-forward span{font-size:12px!important;line-height:1.15!important}
  .action-forward b{font-size:15px!important;line-height:1.15!important}
  .envelope-action span{font-size:14px!important}
  .envelope-action b{font-size:18px!important}
}
/* Bound the dress-code image to the visible panel on wide desktop screens. */
.dress-panel img{position:absolute!important;inset:8px!important;width:calc(100% - 16px)!important;height:calc(100% - 16px)!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
@media(max-width:640px){.dress-panel img{inset:4px!important;width:calc(100% - 8px)!important;height:calc(100% - 8px)!important}}



/* v43: final action hierarchy, location sizing, and matching button styles. */
.location-panel .place-name{
  font-size:clamp(48px,6vw,88px)!important;
  line-height:.9!important;
  margin:12px 0 10px!important;
}
.location-panel .place-name span{
  font-size:.44em!important;
  line-height:1.15!important;
}
.location-panel .place-address{
  font-family:var(--body)!important;
  font-size:clamp(22px,2.25vw,34px)!important;
  line-height:1.28!important;
  letter-spacing:.05em!important;
  margin:6px 0 0!important;
  color:#fff!important;
}

/* Registry intentionally matches the primary RSVP button. */
.rsvp-card .rsvp-action.registry-action{
  display:flex!important;
  width:min(440px,100%)!important;
  min-height:72px!important;
  margin:13px auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:30px!important;
  background:#fff!important;
  color:#000!important;
  border:1px solid #fff!important;
  padding:20px 28px!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  font-family:var(--title)!important;
  font-size:clamp(34px,4vw,56px)!important;
  line-height:.8!important;
  box-shadow:0 0 0 0 rgba(255,255,255,.5)!important;
  animation:rsvpPulse 1.7s ease-in-out infinite!important;
}
.rsvp-card .rsvp-action.registry-action:hover{
  background:#000!important;
  color:#fff!important;
}
.rsvp-card .rsvp-action.registry-action i{
  font-family:var(--body)!important;
  font-size:34px!important;
  animation:rightArrow 1s ease-in-out infinite!important;
}

/* Secondary actions intentionally match Add to Calendar. */
.rsvp-card .calendar-action,
.rsvp-card .all-events-action{
  display:flex!important;
  width:min(340px,100%)!important;
  min-height:54px!important;
  margin:10px auto 0!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  color:#fff!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.62)!important;
  padding:15px 24px!important;
  text-transform:uppercase!important;
  letter-spacing:.11em!important;
  font-family:var(--body)!important;
  font-size:16px!important;
  background:rgba(0,0,0,.72)!important;
  transition:background .2s ease,color .2s ease,transform .2s ease!important;
}
.rsvp-card .calendar-action:hover,
.rsvp-card .all-events-action:hover{
  background:#fff!important;
  color:#000!important;
  transform:translateY(-2px)!important;
}
.rsvp-card .calendar-action i,
.rsvp-card .all-events-action i{
  font-style:normal!important;
  font-size:20px!important;
}
@media(max-width:640px){
  .location-panel .place-name{
    font-size:clamp(38px,11vw,54px)!important;
    margin:8px 0!important;
  }
  .location-panel .place-name span{font-size:.46em!important}
  .location-panel .place-address{
    font-size:clamp(17px,4.8vw,22px)!important;
    line-height:1.3!important;
  }
  .rsvp-card .rsvp-action.registry-action{
    width:min(320px,100%)!important;
    min-height:72px!important;
    padding:17px 20px!important;
    font-size:38px!important;
    gap:20px!important;
  }
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    width:min(300px,100%)!important;
    min-height:50px!important;
    padding:13px 17px!important;
    font-size:14px!important;
  }
}

/* v45: final RSVP action for the complete Zola engagement gallery. */
.rsvp-card .engagement-photos-action span{
  white-space:nowrap!important;
}
.rsvp-card .engagement-photos-action{
  font-size:13px!important;
  letter-spacing:.04em!important;
}
@media(max-width:640px){
  .rsvp-card .engagement-photos-action{
    width:min(320px,100%)!important;
    font-size:12px!important;
    letter-spacing:.03em!important;
    padding-left:14px!important;
    padding-right:14px!important;
    gap:9px!important;
  }
}


/* v46 final routing, cursor, title hierarchy, RSVP clarity, and collage polish. */
.cursor{
  z-index:2147483645!important;
  isolation:isolate!important;
}
.cursor-dot{
  z-index:2147483646!important;
}
body.is-hovering .cursor,body.is-clicking .cursor{z-index:2147483645!important}
body.is-hovering .cursor-dot,body.is-clicking .cursor-dot{z-index:2147483646!important}
.lightbox{z-index:2147483600!important}

.details-heading .eyebrow{font-size:clamp(11px,1vw,15px)!important}
.details-heading h2{font-size:clamp(62px,8vw,116px)!important}

/* Put photographs directly beside the RSVP card, not only above and below it. */
@media(min-width:981px){
  .rsvp-card{width:min(700px,78vw)!important;padding:clamp(22px,2.6vw,38px)!important}
  .photo-9{display:block!important;width:clamp(150px,13vw,220px)!important;left:max(8px,calc(50% - 570px))!important;top:31%!important;right:auto!important;bottom:auto!important;transform:rotate(-3deg)!important}
  .photo-11{display:block!important;width:clamp(150px,13vw,220px)!important;left:max(8px,calc(50% - 570px))!important;top:57%!important;right:auto!important;bottom:auto!important;transform:rotate(2deg)!important}
  .photo-10{display:block!important;width:clamp(150px,13vw,220px)!important;right:max(8px,calc(50% - 570px))!important;top:31%!important;left:auto!important;bottom:auto!important;transform:rotate(3deg)!important}
  .photo-12{display:block!important;width:clamp(150px,13vw,220px)!important;right:max(8px,calc(50% - 570px))!important;top:57%!important;left:auto!important;bottom:auto!important;transform:rotate(-2deg)!important}
}

.rsvp-card h2{font-size:clamp(58px,7vw,104px)!important;line-height:.8!important;margin-bottom:8px!important}
.rsvp-card .rsvp-deadline{margin:8px 0 10px!important;font-size:clamp(14px,1.15vw,18px)!important}
.rsvp-eligibility{
  width:min(540px,100%);
  margin:0 auto 10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.045);
  font-family:var(--body);
  text-align:left;
  line-height:1.28;
}
.rsvp-eligibility strong{
  display:block;
  margin-bottom:3px;
  font-family:var(--title);
  font-size:clamp(21px,2vw,30px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.035em;
  color:#fff;
}
.rsvp-eligibility span{display:block;font-size:clamp(12px,1vw,15px);color:rgba(255,255,255,.84)}
.rsvp-card .rsvp-action{margin:9px auto!important;min-height:64px!important;padding:16px 24px!important}
.rsvp-card .calendar-action,.rsvp-card .all-events-action{margin:7px auto 0!important;min-height:48px!important;padding:12px 20px!important}
.rsvp-card .cast-first-action{border-color:#fff!important;background:rgba(255,255,255,.11)!important;font-weight:700!important}
.rsvp-card .cast-first-action:hover{background:#fff!important;color:#000!important}
.rsvp-card .engagement-photos-action{font-size:16px!important;letter-spacing:.07em!important}

@media(max-width:980px) and (min-width:641px){
  .rsvp-card{width:min(670px,78vw)!important;padding:20px!important}
  .rsvp-card h2{font-size:clamp(54px,8vw,76px)!important}
}
@media(max-width:640px){
  .rsvp-card{width:82vw!important;max-height:calc(100dvh - var(--stage-top) - 14px)!important;padding:16px 12px!important;overflow-y:auto!important;scrollbar-width:none!important}
  .rsvp-card::-webkit-scrollbar{display:none!important}
  .rsvp-card h2{font-size:clamp(45px,13.5vw,63px)!important;margin-bottom:4px!important}
  .rsvp-card .rsvp-deadline{font-size:12px!important;margin:4px 0 7px!important}
  .rsvp-eligibility{padding:8px 10px!important;margin-bottom:7px!important}
  .rsvp-eligibility strong{font-size:21px!important}
  .rsvp-eligibility span{font-size:11px!important;line-height:1.25!important}
  .rsvp-card .rsvp-action{min-height:58px!important;margin:6px auto!important;padding:12px 16px!important;font-size:32px!important}
  .rsvp-card .calendar-action,.rsvp-card .all-events-action{width:min(310px,100%)!important;min-height:44px!important;margin:5px auto 0!important;padding:10px 12px!important;font-size:13px!important}
  .rsvp-card .engagement-photos-action{font-size:14px!important;letter-spacing:.035em!important}
  .rsvp-card .engagement-photos-action span{white-space:nowrap!important}
}

/* v47 final ticket, poster, overview, and transparent-header fixes. */
.topbar{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* The full ticket is now the tear control. */
.ticket[data-tear-stub]{
  cursor:none!important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
}
.ticket[data-tear-stub]:hover,
.ticket[data-tear-stub]:focus-visible{
  transform:translateY(-4px) rotate(-.15deg)!important;
  box-shadow:0 42px 100px rgba(0,0,0,.68),0 0 0 2px rgba(255,255,255,.58),0 0 44px rgba(255,255,255,.15)!important;
  outline:none!important;
}
.stage-ticket.is-tearing .ticket[data-tear-stub]{
  transition:none!important;
}
.stub-helper{
  font-size:12px!important;
  letter-spacing:.1em!important;
  text-align:center!important;
}

/* Alternate the two full posters with a film flicker, never a left-to-right shine. */
.ticket-poster{
  display:grid!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.ticket-poster .poster-swap{
  grid-area:1/1!important;
  width:100%!important;
  height:auto!important;
  max-height:min(64vh,570px)!important;
  object-fit:contain!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
.ticket-poster .poster-swap.is-active{
  opacity:1!important;
  visibility:visible!important;
}
.ticket-poster::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:#fff;
  opacity:0;
}
.ticket-poster.is-switching::after{animation:posterFilmFlicker .36s steps(1,end)}
.ticket-poster.is-switching .poster-swap.is-active{animation:posterImageFlicker .36s steps(1,end)}
@keyframes posterFilmFlicker{
  0%,100%{opacity:0}
  12%{opacity:.16}
  20%{opacity:0}
  31%{opacity:.72}
  38%{opacity:.05}
  52%{opacity:.28}
  64%{opacity:0}
}
@keyframes posterImageFlicker{
  0%,100%{filter:none;opacity:1}
  14%{filter:brightness(.35) contrast(1.5);opacity:.38}
  24%{filter:brightness(1.7) contrast(1.25);opacity:.9}
  36%{filter:brightness(.12);opacity:.16}
  50%{filter:brightness(1.35);opacity:1}
  63%{filter:contrast(1.5);opacity:.5}
}

/* Show the full La Primera poster in Overview without clipping any edge. */
.overview-panel{
  min-height:0!important;
  align-items:center!important;
  overflow:hidden!important;
}
.overview-poster{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100% - 12px)!important;
  object-fit:contain!important;
  object-position:center!important;
  align-self:center!important;
  justify-self:center!important;
}

@media(max-width:640px){
  .ticket-poster .poster-swap{max-height:205px!important}
  .stub-helper{font-size:8px!important}
}

/* v48 final polish: softer poster change, larger info panel, fully visible posters, dress-code lightbox, and a truly transparent header. */
.topbar{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.topbar::before,.topbar::after{content:none!important;display:none!important}

/* Let every stage—including the RSVP collage—continue behind the transparent progress header. */
.stage-shell{top:0!important}
.stage{
  padding-top:calc(var(--stage-top) + clamp(8px,1.4vh,16px))!important;
}

/* A gentler film-style poster change: slow crossfade with only a faint dark-frame flicker. */
.ticket-poster .poster-swap{
  visibility:visible!important;
  opacity:0!important;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),filter .72s ease!important;
  filter:brightness(.98) contrast(1.01)!important;
}
.ticket-poster .poster-swap.is-active{
  visibility:visible!important;
  opacity:1!important;
}
.ticket-poster.is-switching .poster-swap.is-active{animation:none!important}
.ticket-poster::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:#000!important;
  opacity:0!important;
  animation:none!important;
}
.ticket-poster.is-switching::after{animation:posterSoftFrame 1.05s ease!important}
@keyframes posterSoftFrame{
  0%,100%{opacity:0}
  24%{opacity:.025}
  31%{opacity:.07}
  38%{opacity:.015}
  55%{opacity:.05}
  63%{opacity:0}
}

/* Give the actual Event Info box the space instead of the title. */
.stage-details{
  grid-template-rows:auto minmax(0,1fr)!important;
  align-content:stretch!important;
}
.details-heading{padding-top:0!important;margin:0 0 2px!important}
.details-heading .eyebrow{font-size:clamp(9px,.82vw,12px)!important;margin-bottom:3px!important}
.details-heading h2{
  font-size:clamp(32px,3.65vw,56px)!important;
  line-height:.88!important;
}
.info-shell{
  width:min(1420px,calc(100vw - 64px))!important;
  height:100%!important;
  min-height:0!important;
  align-self:stretch!important;
  padding:2px 0 8px!important;
  gap:7px!important;
}
.info-viewport{min-height:0!important}

/* Full-poster frame: no top or bottom can be clipped by the panel. */
.overview-panel{
  grid-template-columns:minmax(220px,29%) minmax(0,1fr)!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.overview-poster-frame{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.42)!important;
  padding:5px!important;
  background:#050505!important;
  box-shadow:0 22px 70px rgba(255,255,255,.06)!important;
}
.overview-poster{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* The complete dress-code board is now a full-panel lightbox trigger. */
.dress-panel{padding:8px!important;overflow:hidden!important}
.dress-lightbox-trigger{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  color:#fff!important;
  overflow:hidden!important;
}
.dress-lightbox-trigger img{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.dress-lightbox-trigger span{
  position:absolute!important;
  left:50%!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  padding:8px 12px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(0,0,0,.82)!important;
  color:#fff!important;
  font-family:var(--body)!important;
  font-size:11px!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transition:background .2s ease,color .2s ease!important;
}
.dress-lightbox-trigger:hover span,.dress-lightbox-trigger:focus-visible span{background:#fff!important;color:#000!important}
.lightbox[data-mode="poster"] [data-lightbox-prev],
.lightbox[data-mode="poster"] [data-lightbox-next],
.lightbox[data-mode="dress"] [data-lightbox-prev],
.lightbox[data-mode="dress"] [data-lightbox-next]{display:none!important}

@media(max-width:640px){
  .stage{padding-top:calc(var(--stage-top) + 5px)!important}
  .details-heading{margin-bottom:0!important}
  .details-heading .eyebrow{font-size:8px!important;margin-bottom:1px!important}
  .details-heading h2{font-size:clamp(28px,8vw,39px)!important;line-height:.9!important}
  .info-shell{
    width:100%!important;
    max-width:calc(100vw - 20px)!important;
    height:100%!important;
    min-height:0!important;
    padding:1px 0 4px!important;
    gap:5px!important;
  }
  .overview-panel{grid-template-columns:1fr!important}
  .overview-poster-frame{display:none!important}
  .dress-panel{padding:4px!important}
  .dress-lightbox-trigger span{bottom:6px!important;font-size:9px!important;padding:6px 9px!important}
}

/* v49 final viewport pass: calm poster dissolve, larger Event Info canvas, true contain sizing, transparent header, and zero-scroll mobile layouts. */

/* The progress header has no panel, gradient, blur, or masking layer. */
.topbar,
.topbar-line,
.step-progress{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
.topbar{border:0!important;overflow:visible!important}
.topbar::before,.topbar::after,.topbar-line::before,.topbar-line::after,.step-progress::after{content:none!important;display:none!important}

/* Let the RSVP photographs continue behind the transparent header instead of beginning below it. */
.stage-rsvp .rsvp-gallery{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
}

/* Step 2: a quiet dissolve rather than a hard flash. */
.ticket-poster .poster-swap{
  transition:opacity 1.35s cubic-bezier(.22,.61,.36,1),filter 1.35s ease!important;
  filter:brightness(.99) contrast(1.005)!important;
}
.ticket-poster.is-switching::after{animation:posterWhisperFrame 1.65s ease!important}
@keyframes posterWhisperFrame{
  0%,100%{opacity:0}
  18%{opacity:.008}
  30%{opacity:.022}
  45%{opacity:.006}
  62%{opacity:.016}
  78%{opacity:0}
}

/* Step 3: no sound control; the familiar fullscreen control gets the final position. */
.player-bar{grid-template-columns:46px 46px minmax(0,1fr) auto 46px!important}
.player-bar [data-fullscreen]{border-color:rgba(255,255,255,.82)!important;box-shadow:0 0 16px rgba(255,255,255,.10)!important}

/* Step 4: the heading is deliberately quiet so the information panel owns the screen. */
.stage-details{
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:3px!important;
  align-content:stretch!important;
}
.details-heading{padding:0!important;margin:0!important;align-self:start!important}
.details-heading .eyebrow{font-size:clamp(9px,.72vw,11px)!important;margin:0 0 1px!important}
.details-heading h2{
  font-size:clamp(25px,2.55vw,40px)!important;
  line-height:.86!important;
  margin:0!important;
}
.info-shell{
  width:min(1510px,calc(100vw - 34px))!important;
  height:100%!important;
  min-height:0!important;
  padding:0 0 2px!important;
  gap:5px!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.info-progress{
  padding:0 3px 2px!important;
  gap:10px!important;
  font-size:10px!important;
  line-height:1!important;
}
.info-progress::before{font-size:8px!important;margin-bottom:-2px!important}
.info-progress b{font-size:clamp(19px,1.8vw,27px)!important;line-height:.9!important}
.info-dots{gap:8px!important}.info-dots i{width:10px!important;height:10px!important}
.info-viewport{min-height:0!important;height:100%!important}
.info-panel{padding:clamp(20px,2.4vw,38px)!important;overflow:hidden!important}
.info-navigation{min-height:58px!important}
.info-navigation .action{min-height:54px!important}

/* The Overview poster is always the complete 1365x2048 artwork, with breathing room on every edge. */
.overview-panel{
  grid-template-columns:minmax(220px,27%) minmax(0,1fr)!important;
  gap:clamp(28px,4vw,62px)!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.overview-poster-frame{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  display:block!important;
  padding:0!important;
  background:#050505!important;
  border:1px solid rgba(255,255,255,.42)!important;
}
.overview-poster{
  position:absolute!important;
  inset:8px!important;
  width:calc(100% - 16px)!important;
  height:calc(100% - 16px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  background:#050505!important;
  box-shadow:none!important;
}
.overview-panel h3{font-size:clamp(42px,4.7vw,76px)!important}
.overview-panel p{font-size:clamp(15px,1.18vw,19px)!important;line-height:1.43!important}

/* The dress board is fully visible and remains a lightbox trigger. */
.dress-panel{padding:5px!important;overflow:hidden!important}
.dress-lightbox-trigger{overflow:hidden!important}
.dress-lightbox-trigger img{
  position:absolute!important;
  inset:5px!important;
  width:calc(100% - 10px)!important;
  height:calc(100% - 10px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Nothing inside an invitation step is allowed to create a scrollable fallback. */
.stage,.info-viewport,.info-panel,.overview-panel,.rsvp-card{overscroll-behavior:none!important}
.overview-panel,.rsvp-card{overflow:hidden!important;scrollbar-width:none!important}

@media(max-width:640px){
  :root{--stage-top:94px!important}
  .topbar{height:var(--stage-top)!important;padding:5px 8px 4px!important}
  .topbar-line{height:25px!important}
  .brand{font-size:14px!important}
  .restart{font-size:8px!important;padding:5px!important}
  .progress-current{font-size:8px!important;gap:4px!important}
  .progress-current b{font-size:13px!important}
  .step-progress{margin-top:4px!important}
  .step-progress::before{top:13px!important}
  .step-progress span{width:27px!important;height:27px!important;font-size:9px!important}
  .step-progress small{font-size:7.5px!important;letter-spacing:.035em!important}

  .stage{padding-top:calc(var(--stage-top) + 3px)!important;padding-left:8px!important;padding-right:8px!important;padding-bottom:7px!important}

  /* Ticket: smaller heading, poster slightly higher, and a real gap before the ticket. */
  .ticket-heading .eyebrow{font-size:8px!important;margin-bottom:1px!important}
  .ticket-heading h2{font-size:clamp(25px,6.8vw,33px)!important;line-height:.86!important}
  .ticket-presentation{
    height:calc(100% - 35px)!important;
    grid-template-rows:minmax(158px,218px) auto!important;
    gap:16px!important;
    padding:0 0 42px!important;
    align-content:start!important;
  }
  .ticket-poster{transform:translateY(-4px)!important}
  .ticket-poster:hover,.ticket-poster:focus-visible{transform:translateY(-7px) scale(1.01)!important}

  /* Trailer: use the space from the removed sound control and keep the player inside the screen. */
  .stage-trailer{padding:calc(var(--stage-top) + 3px) 8px 55px!important}
  .theater-wrap{width:100%!important;max-width:calc(100vw - 16px)!important}
  .theater{max-width:100%!important;max-height:calc(100dvh - var(--stage-top) - 92px)!important}
  .player-bar{grid-template-columns:34px 34px minmax(0,1fr) 38px!important;gap:3px!important;padding:5px!important}
  .player-bar button{width:33px!important;height:33px!important}
  .player-bar [data-fullscreen]{width:37px!important;height:37px!important;font-size:18px!important;border-color:#fff!important}

  /* Event Info: smaller heading, much larger panel, and compact readable content with no internal scrolling. */
  .stage-details{gap:1px!important}
  .details-heading .eyebrow{font-size:7.5px!important;margin:0!important}
  .details-heading h2{font-size:clamp(23px,6.6vw,30px)!important;line-height:.86!important}
  .info-shell{
    width:100%!important;
    max-width:calc(100vw - 12px)!important;
    height:100%!important;
    padding:0!important;
    gap:3px!important;
  }
  .info-progress{font-size:8px!important;gap:6px!important;padding:0 2px 1px!important}
  .info-progress::before{font-size:7px!important;margin-bottom:-1px!important}
  .info-progress b{font-size:16px!important}
  .info-dots{gap:5px!important}.info-dots i{width:8px!important;height:8px!important}
  .info-panel{padding:11px 13px!important;align-content:center!important;overflow:hidden!important}
  .overview-panel{display:grid!important;grid-template-columns:1fr!important;gap:0!important;overflow:hidden!important}
  .overview-poster-frame{display:none!important}
  .overview-panel h3{font-size:clamp(29px,8.5vw,37px)!important;line-height:.86!important}
  .overview-panel p{font-size:clamp(11.5px,3.2vw,13px)!important;line-height:1.32!important;margin-top:6px!important}
  .nitti-subtitle{font-size:9px!important;line-height:1.25!important}
  .location-panel{padding:12px 13px 22px!important;align-content:center!important}
  .location-panel .info-kicker{font-size:10px!important;margin:0!important}
  .location-panel h3{font-size:clamp(48px,13vw,63px)!important;line-height:.82!important;margin:4px 0 2px!important}
  .location-panel .place-name{font-size:clamp(31px,8.8vw,41px)!important;line-height:.9!important;margin:6px 0!important}
  .location-panel .place-name span{font-size:.43em!important}
  .location-panel .place-address{font-size:clamp(15px,4.2vw,19px)!important;line-height:1.25!important;margin:4px 0 0!important}
  .parking-panel{padding:14px!important}
  .parking-panel h3{font-size:clamp(42px,11.5vw,56px)!important}
  .parking-panel>p:not(.info-kicker){font-size:12.5px!important;line-height:1.42!important}
  .dress-panel{padding:3px!important}
  .dress-lightbox-trigger img{inset:3px!important;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important}
  .dress-lightbox-trigger span{font-size:8.5px!important;bottom:5px!important;padding:5px 8px!important}
  .info-navigation{min-height:49px!important;gap:7px!important}
  .info-navigation .action{min-height:46px!important;padding:8px 9px!important}
  .info-navigation .action-forward{min-width:196px!important;min-height:49px!important;padding:7px 8px 7px 11px!important}
  .info-navigation .action-forward span{font-size:9px!important}
  .info-navigation .action-forward b{font-size:11.5px!important}
  .info-navigation .action-forward>i{font-size:24px!important}

  /* RSVP: compact enough to fit every control without any scrolling. */
  .stage-rsvp{padding:calc(var(--stage-top) + 2px) 6px 39px!important}
  .rsvp-card{
    width:84vw!important;
    max-width:360px!important;
    max-height:none!important;
    height:auto!important;
    padding:9px 10px!important;
    overflow:hidden!important;
    box-shadow:0 0 0 5px rgba(0,0,0,.68),0 0 70px rgba(255,255,255,.11)!important;
  }
  .rsvp-card h2{
    font-size:min(9.2vw,4.45vh)!important;
    line-height:.83!important;
    margin:0 0 2px!important;
  }
  .rsvp-card .rsvp-deadline{font-size:10px!important;line-height:1.15!important;margin:2px 0 4px!important}
  .rsvp-eligibility{padding:5px 7px!important;margin:0 auto 4px!important;line-height:1.15!important}
  .rsvp-eligibility strong{font-size:17px!important;line-height:.9!important;margin-bottom:2px!important}
  .rsvp-eligibility span{font-size:9px!important;line-height:1.18!important}
  .rsvp-card .rsvp-action,
  .rsvp-card .rsvp-action.registry-action{
    width:min(292px,100%)!important;
    min-height:43px!important;
    margin:3px auto!important;
    padding:7px 12px!important;
    gap:16px!important;
    font-size:clamp(23px,6.8vw,29px)!important;
  }
  .rsvp-card .rsvp-action i,
  .rsvp-card .rsvp-action.registry-action i{font-size:23px!important}
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    width:min(292px,100%)!important;
    min-height:33px!important;
    margin:3px auto 0!important;
    padding:6px 8px!important;
    gap:7px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.045em!important;
  }
  .rsvp-card .engagement-photos-action{font-size:10px!important;letter-spacing:.025em!important}
  .rsvp-card .calendar-action i,.rsvp-card .all-events-action i{font-size:14px!important}
  .final-back{bottom:3px!important;left:7px!important;min-height:34px!important;padding:5px 8px!important;font-size:9px!important}
}

/* Extra compression for short phones while preserving readable tap targets and zero scroll. */
@media(max-width:640px) and (max-height:720px){
  :root{--stage-top:88px!important}
  .topbar-line{height:23px!important}
  .step-progress{margin-top:2px!important}
  .step-progress small{font-size:7px!important}
  .step-progress span{width:25px!important;height:25px!important}
  .ticket-presentation{grid-template-rows:minmax(132px,165px) auto!important;gap:10px!important;padding-bottom:36px!important}
  .ticket-poster .poster-swap{max-height:165px!important}
  .details-heading h2{font-size:22px!important}
  .info-panel{padding:9px 11px!important}
  .overview-panel h3{font-size:28px!important}
  .overview-panel p{font-size:11px!important;line-height:1.25!important;margin-top:4px!important}
  .location-panel{padding-bottom:18px!important}
  .location-panel h3{font-size:44px!important}
  .location-panel .place-name{font-size:29px!important}
  .location-panel .place-address{font-size:14px!important}
  .rsvp-card{padding:6px 8px!important}
  .rsvp-card h2{font-size:min(8.4vw,4.1vh)!important}
  .rsvp-card .rsvp-deadline{font-size:9px!important}
  .rsvp-eligibility{padding:4px 6px!important;margin-bottom:2px!important}
  .rsvp-eligibility strong{font-size:15px!important}
  .rsvp-eligibility span{font-size:8px!important}
  .rsvp-card .rsvp-action,.rsvp-card .rsvp-action.registry-action{min-height:38px!important;font-size:21px!important;margin:2px auto!important;padding:5px 9px!important}
  .rsvp-card .calendar-action,.rsvp-card .all-events-action{min-height:29px!important;font-size:9px!important;margin-top:2px!important;padding:4px 6px!important}
}

/* v49.1 final sizing corrections after viewport verification. */
.details-heading h2{font-size:clamp(23px,2.05vw,32px)!important}
.overview-poster-frame{
  width:auto!important;
  height:100%!important;
  aspect-ratio:1365 / 2048!important;
  max-width:100%!important;
  justify-self:center!important;
}
.overview-poster{inset:6px!important;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important}

/* A percentage-sized grid child with absolutely positioned artwork can collapse; pin it to the panel instead. */
.dress-panel{position:absolute!important}
.dress-lightbox-trigger{
  position:absolute!important;
  inset:5px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  display:block!important;
}
.dress-lightbox-trigger img{inset:0!important;width:100%!important;height:100%!important}

/* Desktop RSVP must also fit the viewport without clipping or internal scrolling. */
@media(min-width:641px){
  .stage-rsvp{padding-top:calc(var(--stage-top) + 4px)!important;padding-bottom:42px!important}
  .rsvp-card{
    width:min(650px,72vw)!important;
    padding:15px 24px!important;
    max-height:calc(100dvh - var(--stage-top) - 54px)!important;
    overflow:hidden!important;
  }
  .rsvp-card h2{font-size:clamp(58px,6vw,82px)!important;line-height:.79!important;margin:0 0 4px!important}
  .rsvp-card .rsvp-deadline{margin:4px 0 6px!important;font-size:14px!important}
  .rsvp-eligibility{padding:7px 11px!important;margin-bottom:5px!important}
  .rsvp-eligibility strong{font-size:24px!important}
  .rsvp-eligibility span{font-size:12px!important;line-height:1.22!important}
  .rsvp-card .rsvp-action,
  .rsvp-card .rsvp-action.registry-action{
    min-height:54px!important;
    margin:5px auto!important;
    padding:11px 22px!important;
    font-size:clamp(32px,3.3vw,46px)!important;
  }
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    min-height:40px!important;
    margin:4px auto 0!important;
    padding:8px 16px!important;
    font-size:13px!important;
  }
  .rsvp-card .engagement-photos-action{font-size:13px!important}
}

@media(max-width:640px){
  .details-heading h2{font-size:clamp(20px,5.8vw,25px)!important}
  .dress-lightbox-trigger{inset:3px!important}
}

/* Keep the wide Event Info frame inside the stage gutters, and keep the lightbox cue off the artwork caption. */
@media(min-width:641px){
  .info-shell{width:min(1510px,calc(100vw - 96px))!important}
}
.dress-lightbox-trigger span{
  left:auto!important;
  right:10px!important;
  top:10px!important;
  bottom:auto!important;
  transform:none!important;
}
@media(max-width:640px){
  .dress-lightbox-trigger span{right:6px!important;top:6px!important;bottom:auto!important}
}

/* v50: faster poster rhythm, clearer ticket navigation, larger Event Info overview, and denser RSVP collage. */
.ticket-next-action{
  position:absolute!important;
  right:clamp(14px,2.5vw,42px)!important;
  bottom:clamp(8px,1.5vh,18px)!important;
  z-index:12!important;
  min-width:clamp(220px,19vw,300px)!important;
}

/* Keep both poster files fully visible during every dissolve. */
.ticket-poster{
  overflow:visible!important;
  align-self:center!important;
}
.ticket-poster .poster-swap{
  object-fit:contain!important;
  object-position:center!important;
}

/* Overview should use the large panel rather than leaving the artwork and copy undersized. */
.overview-panel{
  grid-template-columns:minmax(250px,36%) minmax(0,1fr)!important;
  gap:clamp(24px,3.5vw,54px)!important;
  padding:clamp(18px,2.2vw,34px)!important;
  align-items:center!important;
}
.overview-poster-frame{
  width:min(100%,390px)!important;
  height:min(100%,560px)!important;
  min-height:0!important;
  aspect-ratio:1365 / 2048!important;
  justify-self:center!important;
}
.overview-panel h3{
  font-size:clamp(46px,5.1vw,82px)!important;
  line-height:.84!important;
}
.overview-panel .nitti-subtitle{
  font-size:clamp(11px,1.05vw,16px)!important;
  margin-top:10px!important;
}
.overview-panel p{
  font-size:clamp(16px,1.28vw,20px)!important;
  line-height:1.42!important;
  margin-top:12px!important;
}

/* Put visible engagement frames above, below, and beside the central RSVP card. */
@media(min-width:641px){
  .stage-rsvp .rsvp-card{
    width:min(720px,68vw)!important;
    padding:18px 28px!important;
  }
  .photo-1{width:clamp(120px,12vw,190px)!important;left:4vw!important;top:calc(var(--stage-top) + 2px)!important}
  .photo-2{width:clamp(120px,12vw,190px)!important;left:19vw!important;top:calc(var(--stage-top) - 4px)!important}
  .photo-3{width:clamp(120px,12vw,190px)!important;right:4vw!important;top:calc(var(--stage-top) + 2px)!important}
  .photo-4{width:clamp(120px,12vw,190px)!important;right:19vw!important;top:calc(var(--stage-top) - 4px)!important}
  .photo-5{width:clamp(120px,12vw,190px)!important;left:4vw!important;bottom:2px!important}
  .photo-6{width:clamp(120px,12vw,190px)!important;left:19vw!important;bottom:-5px!important}
  .photo-7{width:clamp(120px,12vw,190px)!important;right:4vw!important;bottom:2px!important}
  .photo-8{width:clamp(120px,12vw,190px)!important;right:19vw!important;bottom:-5px!important}
}

@media(max-width:640px){
  /* A wider, unmistakable ticket shape and fully visible portrait posters. */
  .ticket-heading h2{font-size:clamp(22px,6.1vw,29px)!important}
  .ticket-presentation{
    grid-template-rows:clamp(148px,22vh,190px) auto!important;
    gap:12px!important;
    padding-bottom:43px!important;
  }
  .ticket-poster{
    width:auto!important;
    height:100%!important;
    max-width:145px!important;
    overflow:visible!important;
    padding:4px!important;
  }
  .ticket-poster .poster-swap{
    width:auto!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  .ticket{
    width:96vw!important;
    aspect-ratio:2.62 / 1!important;
    grid-template-columns:minmax(0,1fr) 96px!important;
  }
  .ticket-main{padding:9px 8px!important}
  .ticket-main h3{font-size:clamp(22px,6.2vw,30px)!important}
  .ticket-next-action{
    right:7px!important;
    bottom:4px!important;
    min-width:188px!important;
    min-height:39px!important;
    padding:6px 8px 6px 10px!important;
  }
  .ticket-next-action span{font-size:9px!important}
  .ticket-next-action b{font-size:10px!important}
  .ticket-next-action>i{font-size:21px!important}

  /* Show the overview artwork and scale both columns to use the full panel. */
  .overview-panel{
    display:grid!important;
    grid-template-columns:minmax(92px,31%) minmax(0,1fr)!important;
    gap:10px!important;
    padding:10px!important;
    align-items:center!important;
  }
  .overview-poster-frame{
    display:grid!important;
    width:100%!important;
    height:auto!important;
    max-height:100%!important;
    aspect-ratio:1365 / 2048!important;
  }
  .overview-panel h3{
    font-size:clamp(25px,7.4vw,33px)!important;
    line-height:.86!important;
  }
  .overview-panel .nitti-subtitle{
    font-size:8.5px!important;
    line-height:1.2!important;
    margin-top:4px!important;
  }
  .overview-panel p{
    font-size:clamp(11px,2.95vw,12.5px)!important;
    line-height:1.28!important;
    margin-top:5px!important;
  }

  /* Taller mobile controls while the card still fits without page scrolling. */
  .stage-rsvp .rsvp-card{
    width:88vw!important;
    max-width:372px!important;
    padding:10px 12px!important;
  }
  .rsvp-card .rsvp-action,
  .rsvp-card .rsvp-action.registry-action{
    min-height:49px!important;
    padding:9px 13px!important;
    margin:4px auto!important;
  }
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    min-height:38px!important;
    padding:8px 9px!important;
    margin-top:4px!important;
  }
  /* Four clear frames above and four below, tucked behind the card to avoid empty bands. */
  .photo-1,.photo-2,.photo-3,.photo-4,
  .photo-5,.photo-6,.photo-7,.photo-8{display:block!important;width:72px!important}
  .photo-1{left:5px!important;top:calc(var(--stage-top) + 1px)!important}
  .photo-2{left:82px!important;top:calc(var(--stage-top) - 3px)!important}
  .photo-3{right:5px!important;top:calc(var(--stage-top) + 1px)!important}
  .photo-4{right:82px!important;top:calc(var(--stage-top) - 3px)!important}
  .photo-5{left:5px!important;bottom:0!important}
  .photo-6{left:82px!important;bottom:-4px!important}
  .photo-7{right:5px!important;bottom:0!important}
  .photo-8{right:82px!important;bottom:-4px!important}
  .photo-9,.photo-10,.photo-11,.photo-12{display:none!important}
}

@media(max-width:640px) and (max-height:720px){
  .ticket-presentation{grid-template-rows:130px auto!important;gap:8px!important}
  .ticket{aspect-ratio:2.7 / 1!important}
  .overview-panel{grid-template-columns:86px minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
  .overview-panel h3{font-size:24px!important}
  .overview-panel p{font-size:10.5px!important;line-height:1.23!important}
  .stage-rsvp .rsvp-card{width:89vw!important;padding:7px 9px!important}
  .rsvp-card .rsvp-action,.rsvp-card .rsvp-action.registry-action{min-height:43px!important}
  .rsvp-card .calendar-action,.rsvp-card .all-events-action{min-height:32px!important}
  .photo-1,.photo-2,.photo-3,.photo-4,.photo-5,.photo-6,.photo-7,.photo-8{width:60px!important}
}

/* v50.1 mobile fit corrections after viewport testing. */
@media(max-width:640px){
  .ticket{aspect-ratio:2.48 / 1!important}
  .stub-tear-button{min-height:48px!important;padding:4px 3px!important}
  .stub-tear-button span{font-size:13px!important;line-height:.86!important}
  .stub-tear-button b{font-size:5px!important}
  .ticket-stub{gap:2px!important;padding:5px 3px!important}

  .overview-panel{
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:11px!important;
    padding:12px!important;
  }
  .overview-poster-frame{width:120px!important;max-width:120px!important}
  .overview-panel h3{font-size:clamp(30px,8.4vw,36px)!important}
  .overview-panel .nitti-subtitle{font-size:9.2px!important}
  .overview-panel p{font-size:clamp(12.4px,3.35vw,13.6px)!important;line-height:1.31!important;margin-top:6px!important}
}
@media(max-width:640px) and (max-height:720px){
  .ticket{aspect-ratio:2.58 / 1!important}
  .overview-panel{grid-template-columns:100px minmax(0,1fr)!important;gap:8px!important;padding:8px!important}
  .overview-poster-frame{width:100px!important;max-width:100px!important}
  .overview-panel h3{font-size:26px!important}
  .overview-panel .nitti-subtitle{font-size:8px!important}
  .overview-panel p{font-size:10.8px!important;line-height:1.23!important;margin-top:4px!important}
}

/* v51: equal navigation controls, clearer mobile ticket spacing, and a larger mobile Overview. */
:root{
  --journey-nav-width:clamp(250px,20vw,310px);
  --journey-nav-height:72px;
}

/* Back and next controls now occupy the exact same footprint on every desktop step. */
.stage-actions > .action,
.info-navigation > .action,
.stage-ticket > .stage-back,
.stage-ticket > .ticket-next-action{
  width:var(--journey-nav-width)!important;
  min-width:var(--journey-nav-width)!important;
  height:var(--journey-nav-height)!important;
  min-height:var(--journey-nav-height)!important;
  margin:0!important;
}
.stage-actions > .action.secondary,
.info-navigation > .action.secondary,
.stage-ticket > .stage-back{
  font-size:14px!important;
  padding:12px 18px!important;
}

@media(max-width:640px){
  :root{
    --journey-nav-width:calc(50vw - 13px);
    --journey-nav-height:56px;
  }

  /* Keep paired mobile navigation buttons perfectly matched and comfortably tappable. */
  .stage-actions,
  .info-navigation{
    gap:8px!important;
  }
  .stage-actions > .action,
  .info-navigation > .action,
  .stage-ticket > .stage-back,
  .stage-ticket > .ticket-next-action{
    width:var(--journey-nav-width)!important;
    min-width:var(--journey-nav-width)!important;
    max-width:var(--journey-nav-width)!important;
    height:var(--journey-nav-height)!important;
    min-height:var(--journey-nav-height)!important;
    padding:8px 9px!important;
  }
  .stage-actions > .action.secondary,
  .info-navigation > .action.secondary,
  .stage-ticket > .stage-back{
    font-size:11.5px!important;
  }
  .stage-actions .action-forward span,
  .info-navigation .action-forward span,
  .ticket-next-action span{
    font-size:8.5px!important;
  }
  .stage-actions .action-forward b,
  .info-navigation .action-forward b,
  .ticket-next-action b{
    font-size:10.5px!important;
    letter-spacing:.07em!important;
  }
  .stage-actions .action-forward>i,
  .info-navigation .action-forward>i,
  .ticket-next-action>i{
    font-size:23px!important;
  }
  .stage-ticket > .stage-back{left:7px!important;bottom:4px!important}
  .stage-ticket > .ticket-next-action{right:7px!important;bottom:4px!important}

  /* Hold the poster clear above the ticket, then deliberately lower the ticket. */
  .ticket-presentation{
    grid-template-rows:clamp(142px,21vh,178px) auto!important;
    gap:22px!important;
    padding-bottom:48px!important;
  }
  .ticket-poster{
    animation:none!important;
    transform:translateY(-4px)!important;
  }
  .ticket-poster:hover,
  .ticket-poster:focus-visible{
    transform:translateY(-4px) scale(1.01)!important;
  }
  .ticket{
    position:relative!important;
    top:10px!important;
  }

  /* Use the full Overview panel: larger poster, larger copy, and almost no dead space. */
  .overview-panel{
    grid-template-columns:minmax(138px,43%) minmax(0,1fr)!important;
    gap:10px!important;
    padding:9px!important;
    align-items:center!important;
    align-content:stretch!important;
  }
  .overview-poster-frame{
    display:grid!important;
    width:100%!important;
    max-width:174px!important;
    height:auto!important;
    max-height:100%!important;
    aspect-ratio:1365 / 2048!important;
    align-self:center!important;
  }
  .overview-panel > div:last-child{
    align-self:center!important;
    min-width:0!important;
  }
  .overview-panel h3{
    font-size:clamp(31px,8.7vw,38px)!important;
    line-height:.84!important;
  }
  .overview-panel .nitti-subtitle{
    font-size:9.5px!important;
    line-height:1.18!important;
    margin-top:5px!important;
  }
  .overview-panel p{
    font-size:clamp(12.8px,3.5vw,14.2px)!important;
    line-height:1.32!important;
    margin-top:7px!important;
  }
}

@media(max-width:640px) and (max-height:720px){
  :root{--journey-nav-height:50px}
  .ticket-presentation{
    grid-template-rows:126px auto!important;
    gap:17px!important;
    padding-bottom:42px!important;
  }
  .ticket{top:7px!important}
  .overview-panel{
    grid-template-columns:minmax(116px,40%) minmax(0,1fr)!important;
    gap:8px!important;
    padding:7px!important;
  }
  .overview-poster-frame{max-width:138px!important}
  .overview-panel h3{font-size:27px!important}
  .overview-panel .nitti-subtitle{font-size:8px!important}
  .overview-panel p{font-size:11.2px!important;line-height:1.24!important;margin-top:4px!important}
}

/* Final mobile Overview fit: preserve the larger artwork without clipping the long Spanish title. */
@media(max-width:640px){
  .overview-panel{grid-template-columns:minmax(136px,41%) minmax(0,1fr)!important}
  .overview-panel h3{font-size:clamp(28px,7.8vw,33px)!important;letter-spacing:.01em!important}
}
@media(max-width:640px) and (max-height:720px){
  .overview-panel{grid-template-columns:minmax(112px,39%) minmax(0,1fr)!important}
  .overview-panel h3{font-size:25px!important}
}

/* v52 final polish: solid navigation, full-size animated Overview, and a denser RSVP finish. */

/* All journey back/next controls are matching white solids with black type and arrows. */
.stage-actions > .action,
.info-navigation > .action,
.stage-ticket > .stage-back,
.stage-ticket > .ticket-next-action,
.final-back{
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #fff!important;
  color:#000!important;
  box-shadow:0 10px 28px rgba(0,0,0,.42)!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.stage-actions > .action:hover,
.info-navigation > .action:hover,
.stage-ticket > .stage-back:hover,
.stage-ticket > .ticket-next-action:hover,
.final-back:hover{
  background:#f2f2f2!important;
  color:#000!important;
  border-color:#fff!important;
  transform:translateY(-2px)!important;
}
.stage-actions .action-forward,
.info-navigation .action-forward,
.stage-ticket > .ticket-next-action{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center!important;
}
.stage-actions .action-forward span,
.info-navigation .action-forward span,
.stage-ticket > .ticket-next-action span{
  display:none!important;
}
.stage-actions .action-forward b,
.info-navigation .action-forward b,
.stage-ticket > .ticket-next-action b{
  display:block!important;
  grid-column:auto!important;
  font-family:var(--body)!important;
  font-size:clamp(14px,1vw,17px)!important;
  line-height:1.05!important;
  letter-spacing:.08em!important;
  color:#000!important;
  white-space:nowrap!important;
}
.stage-actions .action-forward>i,
.info-navigation .action-forward>i,
.stage-ticket > .ticket-next-action>i{
  grid-column:auto!important;
  grid-row:auto!important;
  color:#000!important;
  font-size:28px!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
.stage-actions > .action.secondary,
.info-navigation > .action.secondary,
.stage-ticket > .stage-back,
.final-back{
  font-family:var(--body)!important;
  font-size:clamp(14px,1vw,17px)!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}

/* Step 4 Overview: the artwork and copy now actually fill the panel. */
.overview-panel{
  grid-template-columns:minmax(310px,42%) minmax(0,1fr)!important;
  gap:clamp(28px,4vw,66px)!important;
  padding:clamp(18px,2.2vw,32px)!important;
  align-items:center!important;
  align-content:stretch!important;
}
.overview-poster-frame{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:470px!important;
  height:min(100%,590px)!important;
  max-height:100%!important;
  aspect-ratio:1365 / 2048!important;
  justify-self:center!important;
  align-self:center!important;
  transform:rotate(-1.4deg)!important;
  transform-origin:center!important;
  animation:posterFloat 4.2s ease-in-out infinite!important;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.72))!important;
}
.overview-poster{
  position:absolute!important;
  inset:6px!important;
  width:calc(100% - 12px)!important;
  height:calc(100% - 12px)!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
.overview-panel > div:last-child{
  min-width:0!important;
  align-self:center!important;
}
.overview-panel h3{
  font-size:clamp(48px,5.3vw,84px)!important;
  line-height:.84!important;
  margin:0!important;
}
.overview-panel .nitti-subtitle{
  font-size:clamp(12px,1.05vw,16px)!important;
  line-height:1.25!important;
  margin-top:10px!important;
}
.overview-panel p{
  font-size:clamp(17px,1.25vw,21px)!important;
  line-height:1.42!important;
  margin-top:12px!important;
}

/* Step 5: smaller title, larger controls, and visible frames below the card. */
.stage-rsvp .rsvp-card{
  width:min(760px,72vw)!important;
  padding:16px 24px!important;
  transform:translateY(-18px)!important;
}
.rsvp-card h2{
  font-size:clamp(44px,4.8vw,72px)!important;
  line-height:.86!important;
  margin:0 0 5px!important;
}
.rsvp-card .rsvp-deadline{
  margin:4px 0 7px!important;
}
.rsvp-card .rsvp-eligibility{
  margin:6px auto 8px!important;
}
.rsvp-card .rsvp-action,
.rsvp-card .rsvp-action.registry-action{
  width:min(500px,100%)!important;
  min-height:72px!important;
  padding:16px 24px!important;
  margin:7px auto!important;
  font-size:clamp(38px,3.6vw,52px)!important;
}
.rsvp-card .calendar-action,
.rsvp-card .all-events-action{
  width:min(500px,100%)!important;
  min-height:52px!important;
  padding:13px 18px!important;
  margin:6px auto 0!important;
  font-size:clamp(14px,1.05vw,17px)!important;
}
.rsvp-card .engagement-photos-action{
  font-size:clamp(15px,1.08vw,18px)!important;
}
.photo-5,.photo-6,.photo-7,.photo-8{
  z-index:4!important;
  bottom:-12px!important;
}
.photo-9,.photo-10,.photo-11,.photo-12{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  width:clamp(105px,10vw,165px)!important;
  bottom:-16px!important;
}
.photo-9{left:31vw!important;transform:rotate(-2.5deg)!important}
.photo-10{left:41vw!important;transform:rotate(2deg)!important}
.photo-11{right:41vw!important;transform:rotate(-1.5deg)!important}
.photo-12{right:31vw!important;transform:rotate(2.5deg)!important}

@media(max-width:640px){
  /* Paired navigation stays equal, solid, readable, and vertically centered. */
  .stage-actions > .action,
  .info-navigation > .action,
  .stage-ticket > .stage-back,
  .stage-ticket > .ticket-next-action{
    height:58px!important;
    min-height:58px!important;
    padding:8px 10px!important;
  }
  .stage-actions .action-forward,
  .info-navigation .action-forward,
  .stage-ticket > .ticket-next-action{
    gap:8px!important;
  }
  .stage-actions .action-forward b,
  .info-navigation .action-forward b,
  .stage-ticket > .ticket-next-action b{
    font-size:11.5px!important;
    line-height:1!important;
    letter-spacing:.045em!important;
  }
  .stage-actions .action-forward>i,
  .info-navigation .action-forward>i,
  .stage-ticket > .ticket-next-action>i{
    font-size:22px!important;
  }
  .stage-actions > .action.secondary,
  .info-navigation > .action.secondary,
  .stage-ticket > .stage-back,
  .final-back{
    font-size:11.5px!important;
    letter-spacing:.045em!important;
  }

  /* Stack the Overview so the poster can be large and the copy owns the remaining space. */
  .overview-panel{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(205px,40%) minmax(0,1fr)!important;
    gap:7px!important;
    padding:8px 10px!important;
    align-items:stretch!important;
    align-content:stretch!important;
  }
  .overview-poster-frame{
    display:grid!important;
    width:auto!important;
    height:100%!important;
    max-width:190px!important;
    max-height:260px!important;
    aspect-ratio:1365 / 2048!important;
    justify-self:center!important;
    align-self:center!important;
  }
  .overview-panel > div:last-child{
    align-self:start!important;
    text-align:left!important;
    min-height:0!important;
  }
  .overview-panel h3{
    font-size:clamp(27px,7.5vw,33px)!important;
    line-height:.84!important;
  }
  .overview-panel .nitti-subtitle{
    font-size:9.5px!important;
    line-height:1.18!important;
    margin-top:4px!important;
  }
  .overview-panel p{
    font-size:clamp(12.2px,3.25vw,13.3px)!important;
    line-height:1.28!important;
    margin-top:5px!important;
  }

  /* Smaller heading, bigger tap targets, and room for a visible row beneath the card. */
  .stage-rsvp .rsvp-card{
    width:90vw!important;
    max-width:388px!important;
    padding:9px 12px!important;
    transform:translateY(-24px)!important;
  }
  .rsvp-card h2{
    font-size:clamp(34px,9.7vw,42px)!important;
    line-height:.88!important;
    margin-bottom:2px!important;
  }
  .rsvp-card .rsvp-deadline{font-size:11px!important;margin:2px 0 4px!important}
  .rsvp-card .rsvp-eligibility{margin:4px auto 5px!important;padding:6px 8px!important}
  .rsvp-card .rsvp-eligibility strong{font-size:10px!important}
  .rsvp-card .rsvp-eligibility span{font-size:8.8px!important;line-height:1.18!important}
  .rsvp-card .rsvp-action,
  .rsvp-card .rsvp-action.registry-action{
    min-height:60px!important;
    padding:10px 14px!important;
    margin:4px auto!important;
    font-size:30px!important;
  }
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    min-height:43px!important;
    padding:8px 10px!important;
    margin:4px auto 0!important;
    font-size:12px!important;
  }
  .rsvp-card .engagement-photos-action{font-size:12px!important}

  .photo-5,.photo-6,.photo-7,.photo-8{
    display:block!important;
    width:72px!important;
    bottom:-7px!important;
    z-index:4!important;
  }
  .photo-5{left:4px!important}.photo-6{left:80px!important}.photo-7{right:4px!important}.photo-8{right:80px!important}
  .photo-9,.photo-10,.photo-11,.photo-12{display:none!important}
}

@media(max-width:640px) and (max-height:720px){
  .stage-actions > .action,
  .info-navigation > .action,
  .stage-ticket > .stage-back,
  .stage-ticket > .ticket-next-action{height:50px!important;min-height:50px!important}
  .overview-panel{
    grid-template-rows:minmax(150px,35%) minmax(0,1fr)!important;
    gap:4px!important;
    padding:6px 8px!important;
  }
  .overview-poster-frame{max-width:130px!important;max-height:180px!important}
  .overview-panel h3{font-size:24px!important}
  .overview-panel .nitti-subtitle{font-size:7.5px!important}
  .overview-panel p{font-size:10.6px!important;line-height:1.22!important;margin-top:3px!important}
  .stage-rsvp .rsvp-card{transform:translateY(-18px)!important;padding:6px 9px!important}
  .rsvp-card h2{font-size:31px!important}
  .rsvp-card .rsvp-action,.rsvp-card .rsvp-action.registry-action{min-height:48px!important;font-size:25px!important;padding:7px 10px!important}
  .rsvp-card .calendar-action,.rsvp-card .all-events-action{min-height:34px!important;font-size:9.5px!important;padding:5px 7px!important}
  .photo-5,.photo-6,.photo-7,.photo-8{width:58px!important;bottom:-5px!important}
  .photo-5{left:2px!important}.photo-6{left:64px!important}.photo-7{right:2px!important}.photo-8{right:64px!important}
}

/* v52.1 final sizing correction after viewport review. */
.photo-5,.photo-6,.photo-7,.photo-8,
.photo-9,.photo-10,.photo-11,.photo-12{
  top:auto!important;
}
.rsvp-card h2{
  font-size:clamp(38px,4vw,58px)!important;
}
.rsvp-card .rsvp-action,
.rsvp-card .rsvp-action.registry-action{
  min-height:76px!important;
}
.rsvp-card .calendar-action,
.rsvp-card .all-events-action{
  min-height:54px!important;
}
@media(max-width:640px){
  .rsvp-card h2{
    font-size:clamp(28px,8vw,35px)!important;
    line-height:.9!important;
  }
  .rsvp-card .rsvp-action,
  .rsvp-card .rsvp-action.registry-action{
    min-height:64px!important;
  }
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    min-height:46px!important;
  }
}
@media(max-width:640px) and (max-height:720px){
  .rsvp-card h2{font-size:27px!important}
  .rsvp-card .rsvp-action,.rsvp-card .rsvp-action.registry-action{min-height:52px!important}
  .rsvp-card .calendar-action,.rsvp-card .all-events-action{min-height:36px!important}
}

/* === V53: layout corrections requested after v52 === */

/* Posters should float as artwork, without a thin white frame. */
.ticket-poster,
.overview-poster-frame{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
}
.ticket-poster .poster-swap,
.overview-poster{
  border:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.ticket-poster{filter:drop-shadow(0 22px 35px rgba(0,0,0,.78))!important}
.overview-poster-frame{filter:drop-shadow(0 22px 38px rgba(0,0,0,.74))!important}

/* The envelope CTA now matches every other white journey control. */
.envelope-action{
  background:#fff!important;
  border-color:#fff!important;
  color:#000!important;
  box-shadow:0 10px 28px rgba(0,0,0,.42)!important;
}
.envelope-action span,
.envelope-action b,
.envelope-action>i{color:#000!important}
.envelope-action:hover{background:#f2f2f2!important;color:#000!important}

/* Desktop Event Info overview: spend the available box instead of leaving dead space. */
@media(min-width:641px){
  .overview-panel{
    grid-template-columns:minmax(330px,43%) minmax(0,1fr)!important;
    gap:clamp(30px,4vw,66px)!important;
    padding:clamp(16px,2vw,28px)!important;
  }
  .overview-poster-frame{
    width:min(100%,500px)!important;
    height:min(100%,610px)!important;
    max-width:500px!important;
    max-height:100%!important;
  }
  .overview-panel>div:last-child{
    display:flex!important;
    min-height:0!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .overview-panel h3{font-size:clamp(50px,5.5vw,88px)!important}
  .overview-panel .nitti-subtitle{font-size:clamp(13px,1.08vw,17px)!important}
  .overview-panel p{font-size:clamp(17px,1.32vw,21px)!important;line-height:1.4!important}
}

/* Desktop RSVP collage: visible artwork above, below, and directly beside the card. */
@media(min-width:641px){
  .stage-rsvp .rsvp-card{
    width:min(760px,63vw)!important;
    transform:translateY(-4px)!important;
  }
  .stage-rsvp .rsvp-photo{
    display:block!important;
    width:clamp(135px,12vw,190px)!important;
    z-index:3!important;
    opacity:.86!important;
  }
  .stage-rsvp .photo-1{left:max(12px,calc(50% - 555px))!important;top:2px!important;right:auto!important;bottom:auto!important;transform:rotate(-4deg)!important}
  .stage-rsvp .photo-2{left:calc(50% - 315px)!important;top:-14px!important;right:auto!important;bottom:auto!important;transform:rotate(2deg)!important}
  .stage-rsvp .photo-3{right:calc(50% - 315px)!important;top:-14px!important;left:auto!important;bottom:auto!important;transform:rotate(-2deg)!important}
  .stage-rsvp .photo-4{right:max(12px,calc(50% - 555px))!important;top:2px!important;left:auto!important;bottom:auto!important;transform:rotate(4deg)!important}

  .stage-rsvp .photo-5{left:max(10px,calc(50% - 600px))!important;top:27%!important;right:auto!important;bottom:auto!important;transform:rotate(3deg)!important}
  .stage-rsvp .photo-6{left:max(18px,calc(50% - 575px))!important;top:58%!important;right:auto!important;bottom:auto!important;transform:rotate(-3deg)!important}
  .stage-rsvp .photo-7{right:max(10px,calc(50% - 600px))!important;top:27%!important;left:auto!important;bottom:auto!important;transform:rotate(-3deg)!important}
  .stage-rsvp .photo-8{right:max(18px,calc(50% - 575px))!important;top:58%!important;left:auto!important;bottom:auto!important;transform:rotate(3deg)!important}

  .stage-rsvp .photo-9{left:max(12px,calc(50% - 555px))!important;bottom:-14px!important;top:auto!important;right:auto!important;transform:rotate(3deg)!important}
  .stage-rsvp .photo-10{left:calc(50% - 315px)!important;bottom:-20px!important;top:auto!important;right:auto!important;transform:rotate(-2deg)!important}
  .stage-rsvp .photo-11{right:calc(50% - 315px)!important;bottom:-20px!important;top:auto!important;left:auto!important;transform:rotate(2deg)!important}
  .stage-rsvp .photo-12{right:max(12px,calc(50% - 555px))!important;bottom:-14px!important;top:auto!important;left:auto!important;transform:rotate(-3deg)!important}
}

@media(max-width:640px){
  /* Step 2 is rebuilt as two unmistakably separate rows: large poster, padding, then a wide ticket. */
  .stage-ticket{grid-template-rows:auto minmax(0,1fr)!important}
  .ticket-heading h2{font-size:clamp(22px,6.1vw,28px)!important}
  .ticket-presentation{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(190px,30vh) auto!important;
    align-content:center!important;
    align-items:stretch!important;
    justify-items:center!important;
    gap:clamp(26px,4.2vh,38px)!important;
    padding:2px 0 70px!important;
  }
  .ticket-poster{
    position:relative!important;
    z-index:1!important;
    align-self:end!important;
    justify-self:center!important;
    width:auto!important;
    height:100%!important;
    max-width:170px!important;
    max-height:none!important;
    transform:none!important;
    animation:none!important;
    overflow:visible!important;
  }
  .ticket-poster:hover,.ticket-poster:focus-visible{transform:scale(1.01)!important}
  .ticket-poster .poster-swap{
    width:auto!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .ticket{
    position:relative!important;
    z-index:2!important;
    top:0!important;
    align-self:start!important;
    width:96vw!important;
    max-width:560px!important;
    min-height:0!important;
    max-height:178px!important;
    aspect-ratio:2.8 / 1!important;
    grid-template-columns:minmax(0,1fr) 96px!important;
    transform:none!important;
  }

  /* Mobile Event Info Overview: large artwork, readable copy, and no unused lower half. */
  .overview-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(220px,47%) minmax(0,1fr)!important;
    gap:5px!important;
    padding:7px 10px!important;
    align-items:stretch!important;
    align-content:stretch!important;
  }
  .overview-poster-frame{
    display:grid!important;
    place-items:center!important;
    width:auto!important;
    height:100%!important;
    max-width:178px!important;
    max-height:none!important;
    aspect-ratio:1365 / 2048!important;
    justify-self:center!important;
    align-self:stretch!important;
  }
  .overview-poster{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  .overview-panel>div:last-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:stretch!important;
    min-height:0!important;
  }
  .overview-panel h3{font-size:clamp(29px,8.1vw,35px)!important;line-height:.84!important}
  .overview-panel .nitti-subtitle{font-size:9.5px!important;line-height:1.2!important;margin-top:4px!important}
  .overview-panel p{font-size:clamp(12.5px,3.35vw,13.8px)!important;line-height:1.3!important;margin-top:6px!important}

  /* Mobile RSVP collage: six scattered frames above and six below the larger center card. */
  .stage-rsvp .rsvp-card{z-index:5!important}
  .stage-rsvp .rsvp-photo{
    display:block!important;
    width:clamp(65px,20.5vw,82px)!important;
    opacity:.76!important;
    z-index:3!important;
  }
  .stage-rsvp .photo-1{left:-8px!important;top:-6px!important;right:auto!important;bottom:auto!important;transform:rotate(-5deg)!important}
  .stage-rsvp .photo-2{left:15%!important;top:6px!important;right:auto!important;bottom:auto!important;transform:rotate(3deg)!important}
  .stage-rsvp .photo-3{left:35%!important;top:-10px!important;right:auto!important;bottom:auto!important;transform:rotate(-2deg)!important}
  .stage-rsvp .photo-4{right:35%!important;top:4px!important;left:auto!important;bottom:auto!important;transform:rotate(2deg)!important}
  .stage-rsvp .photo-5{right:15%!important;top:-7px!important;left:auto!important;bottom:auto!important;transform:rotate(-3deg)!important}
  .stage-rsvp .photo-6{right:-8px!important;top:7px!important;left:auto!important;bottom:auto!important;transform:rotate(5deg)!important}
  .stage-rsvp .photo-7{left:-8px!important;bottom:-7px!important;right:auto!important;top:auto!important;transform:rotate(4deg)!important}
  .stage-rsvp .photo-8{left:15%!important;bottom:5px!important;right:auto!important;top:auto!important;transform:rotate(-3deg)!important}
  .stage-rsvp .photo-9{left:35%!important;bottom:-10px!important;right:auto!important;top:auto!important;transform:rotate(2deg)!important}
  .stage-rsvp .photo-10{right:35%!important;bottom:4px!important;left:auto!important;top:auto!important;transform:rotate(-2deg)!important}
  .stage-rsvp .photo-11{right:15%!important;bottom:-7px!important;left:auto!important;top:auto!important;transform:rotate(3deg)!important}
  .stage-rsvp .photo-12{right:-8px!important;bottom:6px!important;left:auto!important;top:auto!important;transform:rotate(-5deg)!important}
}

@media(max-width:640px) and (max-height:720px){
  .ticket-presentation{
    grid-template-rows:minmax(150px,25vh) auto!important;
    gap:22px!important;
    padding-bottom:58px!important;
  }
  .ticket-poster{max-width:135px!important}
  .ticket{aspect-ratio:2.85 / 1!important;max-height:142px!important}
  .overview-panel{
    grid-template-rows:minmax(155px,39%) minmax(0,1fr)!important;
    gap:3px!important;
    padding:5px 8px!important;
  }
  .overview-poster-frame{max-width:120px!important}
  .overview-panel h3{font-size:24px!important}
  .overview-panel .nitti-subtitle{font-size:7.8px!important}
  .overview-panel p{font-size:10.7px!important;line-height:1.22!important;margin-top:3px!important}
  .stage-rsvp .rsvp-photo{width:58px!important}
}

/* Short-phone Overview correction: keep the poster large and remove the artificial gap between artwork and copy. */
@media(max-width:640px) and (max-height:720px){
  .overview-panel{
    grid-template-rows:minmax(205px,48%) minmax(0,1fr)!important;
    gap:3px!important;
  }
  .overview-poster-frame{
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
  .overview-panel>div:last-child{justify-content:flex-start!important}
  .overview-panel h3{font-size:25px!important}
  .overview-panel .nitti-subtitle{font-size:8px!important}
  .overview-panel p{font-size:10.8px!important;line-height:1.23!important;margin-top:4px!important}
}

/* === FINAL: RSVP line, mobile Overview scale, and tighter mobile photo framing === */
.rsvp-card .rsvp-deadline{
  white-space:nowrap!important;
  font-weight:400!important;
}

@media(max-width:640px){
  /* Keep the final RSVP instruction on one readable line. */
  .rsvp-card .rsvp-deadline{
    font-size:clamp(11px,3.1vw,12.5px)!important;
    line-height:1.2!important;
    letter-spacing:.035em!important;
    margin:4px 0 7px!important;
  }

  /* Overview: use the available height instead of leaving the copy undersized. */
  .overview-panel{
    grid-template-rows:minmax(255px,46%) minmax(0,1fr)!important;
    gap:12px!important;
    padding:8px 10px 10px!important;
  }
  .overview-poster-frame{
    width:auto!important;
    height:100%!important;
    max-width:188px!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0 0 2px!important;
  }
  .overview-panel>div:last-child{
    justify-content:flex-start!important;
    min-height:0!important;
    padding-top:0!important;
  }
  .overview-panel h3{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(27px,7.4vw,32px)!important;
    line-height:.91!important;
    margin:0!important;
    text-shadow:none!important;
  }
  .overview-panel .nitti-subtitle{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:9.8px!important;
    line-height:1.22!important;
    margin-top:5px!important;
  }
  .overview-panel p{
    font-size:clamp(13.3px,3.55vw,14.3px)!important;
    line-height:1.31!important;
    margin-top:7px!important;
  }

  /* Pull the surrounding photos close to the RSVP box instead of leaving dead bands. */
  .stage-rsvp .photo-1{top:42px!important}
  .stage-rsvp .photo-2{top:50px!important}
  .stage-rsvp .photo-3{top:38px!important}
  .stage-rsvp .photo-4{top:48px!important}
  .stage-rsvp .photo-5{top:40px!important}
  .stage-rsvp .photo-6{top:51px!important}
  .stage-rsvp .photo-7{bottom:34px!important}
  .stage-rsvp .photo-8{bottom:41px!important}
  .stage-rsvp .photo-9{bottom:31px!important}
  .stage-rsvp .photo-10{bottom:40px!important}
  .stage-rsvp .photo-11{bottom:33px!important}
  .stage-rsvp .photo-12{bottom:42px!important}
}

@media(max-width:640px) and (max-height:720px){
  .overview-panel{
    grid-template-rows:minmax(205px,42%) minmax(0,1fr)!important;
    gap:9px!important;
    padding:6px 8px 8px!important;
  }
  .overview-poster-frame{max-width:142px!important}
  .overview-panel h3{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:27px!important;
    line-height:.9!important;
  }
  .overview-panel .nitti-subtitle{font-size:8.5px!important;margin-top:4px!important}
  .overview-panel p{
    font-size:12.5px!important;
    line-height:1.29!important;
    margin-top:5px!important;
  }
  .rsvp-card .rsvp-deadline{font-size:10.5px!important;margin:2px 0 4px!important}
  .stage-rsvp .photo-1,.stage-rsvp .photo-3,.stage-rsvp .photo-5{top:34px!important}
  .stage-rsvp .photo-2,.stage-rsvp .photo-4,.stage-rsvp .photo-6{top:41px!important}
  .stage-rsvp .photo-7,.stage-rsvp .photo-9,.stage-rsvp .photo-11{bottom:28px!important}
  .stage-rsvp .photo-8,.stage-rsvp .photo-10,.stage-rsvp .photo-12{bottom:35px!important}
}

/* === FINAL SOCIAL/PREVIEW PASS: larger mobile Overview copy === */
@media(max-width:640px){
  .overview-panel .nitti-subtitle{
    font-size:clamp(10.7px,2.95vw,11.4px)!important;
    line-height:1.22!important;
  }
  .overview-panel p:not(.nitti-subtitle){
    font-size:clamp(14.6px,3.95vw,16px)!important;
    line-height:1.28!important;
  }
}

@media(max-width:640px) and (max-height:720px){
  .overview-panel .nitti-subtitle{
    font-size:9.2px!important;
    line-height:1.18!important;
  }
  .overview-panel p:not(.nitti-subtitle){
    font-size:13.2px!important;
    line-height:1.24!important;
  }
}



/* === FINAL MOBILE RSVP COLLAGE: pull engagement photos tight to and behind the center card === */
@media (max-width:640px){
  .stage-rsvp .rsvp-card{
    position:relative!important;
    z-index:5!important;
  }
  .stage-rsvp .rsvp-gallery{
    z-index:2!important;
    overflow:visible!important;
  }
  .stage-rsvp .rsvp-photo{
    display:block!important;
    width:clamp(68px,21.5vw,86px)!important;
    opacity:.82!important;
    z-index:3!important;
  }

  /* Upper row overlaps the card's top edge. */
  .stage-rsvp .photo-1{top:clamp(74px,11.5vh,98px)!important}
  .stage-rsvp .photo-2{top:clamp(82px,12.5vh,106px)!important}
  .stage-rsvp .photo-3{top:clamp(70px,11vh,94px)!important}
  .stage-rsvp .photo-4{top:clamp(80px,12vh,104px)!important}
  .stage-rsvp .photo-5{top:clamp(72px,11.2vh,96px)!important}
  .stage-rsvp .photo-6{top:clamp(84px,12.8vh,110px)!important}

  /* Lower row overlaps the card's bottom edge. */
  .stage-rsvp .photo-7{bottom:clamp(60px,9.4vh,80px)!important}
  .stage-rsvp .photo-8{bottom:clamp(68px,10.2vh,88px)!important}
  .stage-rsvp .photo-9{bottom:clamp(58px,9vh,78px)!important}
  .stage-rsvp .photo-10{bottom:clamp(66px,10vh,86px)!important}
  .stage-rsvp .photo-11{bottom:clamp(61px,9.5vh,81px)!important}
  .stage-rsvp .photo-12{bottom:clamp(70px,10.5vh,90px)!important}
}

/* === CUSTOM PARTY RSVP DRAFT === */
.step-progress{grid-template-columns:repeat(6,1fr)!important;width:min(900px,100%)!important}
.stage-welcome{place-items:center}
.welcome-card{position:relative;z-index:5;width:min(720px,88vw);padding:clamp(28px,4vw,56px);text-align:center;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.72);box-shadow:0 0 100px rgba(255,255,255,.08)}
.welcome-card h1{font-family:var(--font-title);font-size:clamp(64px,10vw,150px);line-height:.78;margin:8px 0 18px}
.welcome-instruction{font-size:clamp(15px,1.5vw,21px);letter-spacing:.08em;margin:0 0 28px}
.welcome-form{display:grid;gap:22px}
.title-options,.attendance-options{border:0;padding:0;margin:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.title-options legend,.attendance-options legend{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:9px;color:rgba(255,255,255,.75)}
.title-options input,.attendance-options input{position:absolute;opacity:0;pointer-events:none}
.title-options label span,.attendance-options label span{display:grid;place-items:center;min-width:76px;min-height:46px;padding:10px 14px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.46);font-size:15px;cursor:pointer;transition:.2s ease}
.title-options input:checked+span,.attendance-options input:checked+span{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 24px rgba(255,255,255,.4)}
.name-fields,.party-name-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.name-fields label,.party-name-fields label{display:grid;gap:7px;text-align:left}
.name-fields label span,.party-name-fields label span{font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.72)}
.name-fields input,.party-name-fields input{width:100%;min-height:52px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.56);color:#fff;padding:12px 14px;font:16px var(--font-body);outline:none}
.name-fields input:focus,.party-name-fields input:focus{border-color:#fff;box-shadow:0 0 18px rgba(255,255,255,.15)}
.welcome-submit{margin:4px auto 0!important;min-width:min(330px,100%)!important}

.stage-envelope h1 [data-envelope-name]{white-space:nowrap;color:#fff}
.ticket-heading{margin-bottom:4px!important}
.ticket-purpose{position:relative;z-index:6;width:min(900px,88vw);margin:0 auto 10px;text-align:center;display:grid;gap:4px}
.ticket-purpose strong{font-size:clamp(15px,1.45vw,21px);text-transform:uppercase;letter-spacing:.13em}
.ticket-purpose span{font-size:clamp(12px,1vw,15px);line-height:1.35;color:rgba(255,255,255,.78)}
.ticket-rsvp-notice{margin-top:12px!important;padding-top:10px;border-top:1px solid rgba(0,0,0,.28);font-weight:700!important;letter-spacing:.08em!important;font-size:clamp(9px,.8vw,12px)!important}

.party-rsvp-form{display:grid;gap:10px;margin-top:10px}
.party-list{display:grid;gap:9px;max-height:min(42vh,430px);overflow:auto;padding-right:4px;scrollbar-width:thin}
.party-member-row{position:relative;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.035);padding:12px;display:grid;gap:9px}
.party-member-row.is-primary{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.075)}
.party-member-row.is-primary::before{content:'Primary Guest';position:absolute;right:10px;top:8px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.attendance-options{gap:7px}
.attendance-options legend{text-align:left;margin-bottom:4px}
.attendance-options label{flex:1}
.attendance-options label span{min-width:0;min-height:39px;font-size:11px;padding:8px 9px}
.remove-party-member{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border-radius:50%;border:1px solid #fff;background:#000;color:#fff;font-size:18px;line-height:1;z-index:2}
.add-party-member,.rsvp-submit{width:min(440px,100%);min-height:52px;margin:0 auto;border:1px solid #fff;display:flex;align-items:center;justify-content:center;gap:18px;text-transform:uppercase;letter-spacing:.11em;font-family:var(--font-body);font-weight:700}
.add-party-member{background:transparent;color:#fff;font-size:13px}
.rsvp-submit{background:#fff;color:#000;font-size:18px}
.rsvp-submit i{font-style:normal;font-size:24px}
.rsvp-submit:disabled{opacity:.55}
.rsvp-form-message{min-height:20px!important;margin:0!important;font-size:13px!important;color:#fff!important}
.party-rsvp-form.is-submitted .party-list,.party-rsvp-form.is-submitted .add-party-member,.party-rsvp-form.is-submitted .rsvp-submit{opacity:.45;pointer-events:none}
.after-rsvp-links{display:grid;gap:5px;margin-top:8px}
.stage-rsvp .rsvp-card{width:min(760px,78vw)!important;max-height:calc(100dvh - var(--stage-top) - 18px)!important;overflow:auto!important;padding:clamp(18px,2.2vw,30px)!important}
.stage-rsvp .rsvp-card h2{font-size:clamp(48px,6vw,86px)!important}

@media(max-width:640px){
  .step-progress small{font-size:5.7px!important;max-width:45px!important}
  .step-progress span{width:24px!important;height:24px!important}
  .welcome-card{width:91vw;padding:22px 16px}
  .welcome-card h1{font-size:clamp(65px,22vw,94px)}
  .welcome-instruction{font-size:14px;margin-bottom:18px}
  .welcome-form{gap:16px}
  .title-options{gap:7px}
  .title-options label span{min-width:62px;min-height:43px;padding:8px;font-size:14px}
  .name-fields{grid-template-columns:1fr;gap:10px}
  .name-fields input{min-height:48px;font-size:16px}
  .welcome-submit{min-height:56px!important}
  .stage-envelope h1{font-size:clamp(40px,12vw,57px)!important}
  .stage-envelope h1 [data-envelope-name]{display:block;margin-top:5px}
  .ticket-heading h2{font-size:clamp(34px,10vw,48px)!important}
  .ticket-purpose{width:92vw;margin-bottom:5px}
  .ticket-purpose strong{font-size:12px}
  .ticket-purpose span{font-size:10px;line-height:1.22}
  .ticket-rsvp-notice{font-size:8px!important;margin-top:6px!important;padding-top:5px!important}
  .stage-rsvp .rsvp-card{width:88vw!important;max-height:calc(100dvh - var(--stage-top) - 10px)!important;padding:14px 11px!important}
  .stage-rsvp .rsvp-card h2{font-size:clamp(39px,11.5vw,54px)!important}
  .stage-rsvp .rsvp-deadline{font-size:11px!important;margin:3px 0 7px!important}
  .party-list{max-height:40vh;gap:7px}
  .party-member-row{padding:9px;gap:7px}
  .party-name-fields{gap:7px}
  .party-name-fields input{min-height:39px;padding:8px 9px;font-size:14px}
  .attendance-options{gap:4px}
  .attendance-options label span{font-size:9.5px;min-height:36px;padding:6px 4px}
  .add-party-member{min-height:43px;font-size:11px}
  .rsvp-submit{min-height:49px;font-size:16px}
  .after-rsvp-links .calendar-action,.after-rsvp-links .all-events-action,.after-rsvp-links .rsvp-action{min-height:40px!important;margin:3px auto 0!important;font-size:11px!important;padding:7px 10px!important}
}


/* Custom RSVP revision 2: final seven fixes */
.ticket-purpose{max-width:980px!important}
.ticket-purpose span{font-size:clamp(14px,1.18vw,18px)!important;line-height:1.42!important}
.overview-panel{column-gap:clamp(18px,2vw,30px)!important}
.overview-panel>div:last-child{margin-left:0!important;padding-left:0!important}
.rsvp-submit{
  width:min(560px,100%)!important;
  min-height:64px!important;
  padding:14px 22px!important;
  border:1px solid #fff!important;
  background:#fff!important;
  color:#000!important;
  font-size:clamp(17px,1.5vw,22px)!important;
  letter-spacing:.12em!important;
  box-shadow:0 0 24px rgba(255,255,255,.14)!important;
}
.party-list{padding:4px 10px 26px 2px!important;scroll-padding-bottom:36px!important}
.party-member-row{scroll-margin-bottom:34px}
.party-rsvp-form{padding-bottom:14px}
.rsvp-form-message{padding-bottom:4px}

@media(max-width:640px){
  .ticket-heading h2{font-size:clamp(27px,7.6vw,38px)!important;line-height:.98!important}
  .ticket-purpose span{font-size:11.5px!important;line-height:1.33!important}
  .overview-panel{column-gap:10px!important}
  .party-list{max-height:43vh!important;padding-bottom:48px!important;scroll-padding-bottom:56px!important}
  .rsvp-submit{min-height:54px!important;font-size:16px!important;width:100%!important}
  .stage-rsvp .rsvp-card{padding-bottom:34px!important}
}

/* === FINAL RSVP INTERFACE POLISH === */
/* Step 1 controls: clear typography, matching hover/click behavior, and cursor response. */
.title-options label,
.welcome-submit{
  position:relative;
  transform:translateY(0) scale(1);
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease!important;
}
.title-options label span{
  font-family:var(--title)!important;
  font-size:clamp(20px,1.65vw,26px)!important;
  line-height:.85!important;
  letter-spacing:.035em!important;
  color:#fff!important;
  background:rgba(0,0,0,.88)!important;
  border-color:rgba(255,255,255,.82)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.9)!important;
}
.title-options label:hover span,
.title-options label:focus-within span{
  background:#fff!important;
  color:#000!important;
  text-shadow:none!important;
  transform:translateY(-3px) scale(1.04)!important;
  box-shadow:0 10px 30px rgba(255,255,255,.2)!important;
}
.title-options input:checked+span{
  background:#fff!important;
  color:#000!important;
  text-shadow:none!important;
  transform:scale(1.045)!important;
}
.welcome-submit{
  background:#fff!important;
  color:#000!important;
  border-color:#fff!important;
  font-family:var(--title)!important;
  text-shadow:none!important;
  box-shadow:0 0 28px rgba(255,255,255,.16)!important;
}
.welcome-submit span,
.welcome-submit b{
  color:#000!important;
  opacity:1!important;
  font-family:var(--title)!important;
  letter-spacing:.055em!important;
}
.welcome-submit:hover,
.welcome-submit:focus-visible{
  background:#000!important;
  color:#fff!important;
  transform:translateY(-3px) scale(1.025)!important;
  box-shadow:0 12px 36px rgba(255,255,255,.22)!important;
}
.welcome-submit:hover span,
.welcome-submit:hover b,
.welcome-submit:focus-visible span,
.welcome-submit:focus-visible b{color:#fff!important}
.welcome-submit:active,.title-options label:active{transform:translateY(1px) scale(.98)!important}

/* Envelope sender line. */
.envelope-from{
  position:relative;
  z-index:7;
  margin:clamp(12px,1.5vh,20px) 0 0!important;
  font-family:var(--title)!important;
  font-size:clamp(24px,2.5vw,38px)!important;
  line-height:.9!important;
  letter-spacing:.035em!important;
  color:#fff!important;
  text-align:center!important;
}

/* Ticket copy hierarchy and requested line break. */
.ticket-heading h2 span{display:inline-block;color:#fff!important}

/* Keep Overview artwork and copy visually connected. */
.overview-panel{
  grid-template-columns:minmax(240px,34%) minmax(0,1fr)!important;
  column-gap:clamp(10px,1.25vw,18px)!important;
}
.overview-poster-frame{
  justify-self:end!important;
  margin-right:0!important;
}
.overview-panel>div:last-child{
  justify-self:start!important;
  width:100%!important;
  max-width:760px!important;
  min-width:0!important;
}

/* Step 6: vertical-only scrolling, contained fields, and a visible film-style scrollbar. */
.stage-rsvp .rsvp-card{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#fff rgba(255,255,255,.12)!important;
  overscroll-behavior-y:contain!important;
}
.stage-rsvp .rsvp-card::-webkit-scrollbar{width:9px!important;height:0!important}
.stage-rsvp .rsvp-card::-webkit-scrollbar-track{
  background:rgba(255,255,255,.09)!important;
  border-left:1px solid rgba(255,255,255,.16)!important;
}
.stage-rsvp .rsvp-card::-webkit-scrollbar-thumb{
  background:#fff!important;
  border:2px solid #111!important;
  border-radius:999px!important;
}
.stage-rsvp .rsvp-card,
.party-rsvp-form,
.party-list,
.party-member-row,
.party-name-fields,
.attendance-options,
.after-rsvp-links{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.party-list{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.92) rgba(255,255,255,.08)!important;
}
.party-list::-webkit-scrollbar{width:7px!important;height:0!important}
.party-list::-webkit-scrollbar-track{background:rgba(255,255,255,.07)!important}
.party-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.9)!important;border-radius:999px!important}
.party-name-fields input{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.rsvp-card .rsvp-deadline{
  width:100%!important;
  max-width:100%!important;
  padding:0 4px!important;
  overflow-wrap:anywhere!important;
  color:#fff!important;
}
.mobile-break{display:none}
.add-party-member,
.rsvp-submit{
  font-family:var(--title)!important;
  letter-spacing:.055em!important;
  line-height:.84!important;
}
.add-party-member{
  font-size:clamp(24px,2.4vw,36px)!important;
  min-height:58px!important;
  padding:14px 18px!important;
}
.rsvp-submit{
  color:#000!important;
  background:#fff!important;
  font-size:clamp(30px,3.2vw,48px)!important;
}
.rsvp-submit span{font-family:var(--title)!important;color:#000!important}
.after-rsvp-links{margin-top:2px!important;gap:4px!important}
.rsvp-submit{margin-bottom:1px!important}
.rsvp-card .calendar-action{margin-top:1px!important}
.rsvp-card .calendar-action span{
  font-family:var(--title)!important;
  font-size:clamp(20px,2vw,28px)!important;
  line-height:.9!important;
  letter-spacing:.04em!important;
}

@media(max-width:640px){
  .title-options label span{
    font-size:20px!important;
    min-width:64px!important;
  }
  .envelope-from{
    margin-top:10px!important;
    font-size:27px!important;
  }
  .ticket-heading h2{
    font-size:clamp(25px,7vw,35px)!important;
    line-height:.94!important;
  }
  .ticket-purpose span{
    font-size:11px!important;
    line-height:1.3!important;
  }
  .overview-panel{
    column-gap:8px!important;
  }
  .overview-poster-frame{justify-self:end!important}
  .stage-rsvp .rsvp-card{
    width:91vw!important;
    padding-left:12px!important;
    padding-right:7px!important;
  }
  .mobile-break{display:block}
  .rsvp-card .rsvp-deadline{
    font-size:12.5px!important;
    line-height:1.18!important;
    white-space:normal!important;
  }
  .party-name-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .attendance-options{width:100%!important}
  .attendance-options label{min-width:0!important}
  .attendance-options label span{
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
  }
  .add-party-member{
    width:100%!important;
    min-height:52px!important;
    font-size:24px!important;
  }
  .rsvp-submit{
    width:100%!important;
    min-height:58px!important;
    font-size:31px!important;
    margin-bottom:0!important;
  }
  .after-rsvp-links{margin-top:0!important;gap:3px!important}
  .rsvp-card .calendar-action{
    width:100%!important;
    min-height:47px!important;
    margin-top:0!important;
  }
  .rsvp-card .calendar-action span{font-size:21px!important}
}
/* Keep remove controls inside the scrollable RSVP box so they never create horizontal overflow. */
.remove-party-member{right:4px!important;top:4px!important}


/* RSVP status symbols */
.attendance-options label span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.attendance-options label span em{
  font-style:normal!important;
  line-height:1!important;
}
.attendance-symbol{
  display:inline-grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
}
@media (max-width:700px){
  .attendance-options label span{gap:4px!important;padding-left:4px!important;padding-right:4px!important}
  .attendance-symbol{width:18px!important;height:18px!important;flex-basis:18px!important;font-size:12px!important}
}


/* === FINAL INVITATION CORRECTIONS v4 === */
/* Social/welcome screen */
.welcome-card{overflow:hidden!important}
.welcome-card h1{
  font-size:clamp(52px,7.4vw,108px)!important;
  line-height:.84!important;
  max-width:100%!important;
  padding:0 .08em!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.welcome-submit:disabled,.rsvp-submit:disabled{
  opacity:.42!important;
  filter:grayscale(1)!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
  background:#777!important;
  border-color:#999!important;
  color:#222!important;
}
.welcome-submit:disabled span,.welcome-submit:disabled b,.rsvp-submit:disabled span{color:#222!important}
.welcome-submit:disabled:hover,.rsvp-submit:disabled:hover{transform:none!important;background:#777!important;color:#222!important}

/* Envelope enters like a delivered piece of film mail. */
.stage-envelope.is-active .envelope-scene{animation:envelopeFlyIn 1.05s cubic-bezier(.2,.9,.2,1) both}
.stage-envelope.is-active .envelope-wrap{animation:envelopeFloatSettle 1.4s .65s ease-out both}
@keyframes envelopeFlyIn{
  0%{opacity:0;transform:translate3d(42vw,-28vh,0) rotate(13deg) scale(.72);filter:blur(8px)}
  62%{opacity:1;transform:translate3d(-2vw,1vh,0) rotate(-2deg) scale(1.025);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}
@keyframes envelopeFloatSettle{0%{transform:translateY(-8px)}55%{transform:translateY(3px)}100%{transform:translateY(0)}}
.envelope-wrap{display:flex!important;flex-direction:column!important;align-items:center!important}
.envelope-from{order:2!important;margin:10px 0 9px!important}
.envelope-action{order:3!important;margin-top:0!important}
.envelope{order:1!important}

/* Ticket copy and content stack: remove the dead air. */
.ticket-heading{margin-bottom:0!important}
.ticket-heading h2{margin-bottom:0!important}
.ticket-purpose{margin-top:0!important;margin-bottom:3px!important}
.ticket-presentation{margin-top:0!important}

/* Center the Overview poster + copy as one visual group, while keeping body copy left aligned. */
.overview-panel{
  width:min(1060px,92%)!important;
  margin:0 auto!important;
  grid-template-columns:minmax(230px,32%) minmax(0,620px)!important;
  justify-content:center!important;
  align-items:center!important;
  column-gap:clamp(16px,2.1vw,30px)!important;
}
.overview-poster-frame{justify-self:center!important}
.overview-panel>div:last-child{justify-self:start!important;max-width:620px!important}

/* RSVP box: true vertical scroll only, always reserve/paint the scrollbar. */
.stage-rsvp .rsvp-card{
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable!important;
  padding-right:16px!important;
}
.rsvp-card .rsvp-deadline{
  display:grid!important;
  gap:2px!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-align:center!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
}
.rsvp-card .rsvp-deadline span{display:block!important;max-width:100%!important}
.attendance-symbol{display:inline-grid!important;visibility:visible!important;opacity:1!important;color:inherit!important}
.rsvp-submit i{display:none!important}
.rsvp-submit{margin:0 auto!important}
.rsvp-form-message{margin:0!important;padding:0!important}
.after-rsvp-links{margin-top:0!important;gap:0!important}
.rsvp-card .registry-action{
  margin-top:0!important;
  width:min(560px,100%)!important;
  min-height:64px!important;
  padding:10px 16px!important;
}
.rsvp-card .registry-action span{
  display:block!important;
  max-width:480px!important;
  margin:auto!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
  font-family:var(--title)!important;
  font-size:clamp(24px,2.35vw,34px)!important;
  line-height:.87!important;
  letter-spacing:.025em!important;
}

@media(max-width:640px){
  .welcome-card h1{font-size:clamp(48px,16vw,72px)!important;padding:0 .15em!important}
  .stage-envelope.is-active .envelope-scene{animation-duration:.9s}
  .ticket-heading{padding-bottom:0!important}
  .ticket-purpose{margin-bottom:1px!important}
  .overview-panel{
    width:96%!important;
    grid-template-columns:minmax(128px,40%) minmax(0,1fr)!important;
    column-gap:9px!important;
    justify-content:center!important;
  }
  .stage-rsvp .rsvp-card{padding-right:12px!important}
  .rsvp-card .rsvp-deadline{font-size:12.5px!important;line-height:1.2!important;padding:0 2px!important}
  .rsvp-submit{margin-bottom:0!important}
  .after-rsvp-links{margin-top:0!important;gap:0!important}
  .rsvp-card .registry-action{min-height:58px!important;margin-top:0!important;padding:8px 10px!important}
  .rsvp-card .registry-action span{font-size:24px!important;line-height:.88!important;max-width:300px!important}
}
@media(prefers-reduced-motion:reduce){
  .stage-envelope.is-active .envelope-scene,.stage-envelope.is-active .envelope-wrap{animation:none!important}
}

/* === FINAL POLISH v5: tighter ticket, larger overview, interactive RSVP === */
/* Step 3: pull the poster/ticket immediately under the copy. */
.stage-ticket{grid-template-rows:auto auto minmax(0,1fr)!important}
.ticket-heading{padding-bottom:0!important;margin-bottom:0!important}
.ticket-heading h2{margin:0!important}
.ticket-purpose{margin:0 auto!important;padding:0!important}
.ticket-presentation{
  align-self:start!important;
  align-content:start!important;
  margin-top:-8px!important;
  padding-top:0!important;
}

/* Step 5: keep the centered grouping, but use the available panel space. */
.overview-panel{
  grid-template-columns:minmax(290px,370px) minmax(0,680px)!important;
  column-gap:clamp(18px,2vw,30px)!important;
  width:min(1120px,96%)!important;
}
.overview-poster-frame{
  width:clamp(285px,27vw,370px)!important;
  max-width:none!important;
  max-height:min(60vh,520px)!important;
}
.overview-panel h3{
  font-size:clamp(64px,6.2vw,98px)!important;
  line-height:.84!important;
}
.overview-panel .nitti-subtitle{font-size:clamp(13px,1.05vw,17px)!important}
.overview-panel p:not(.nitti-subtitle){
  font-size:clamp(17px,1.28vw,21px)!important;
  line-height:1.38!important;
}

/* Step 6: all interactive controls should feel clickable. */
.attendance-options label span,
.add-party-member,
.rsvp-submit:not(:disabled),
.rsvp-card .calendar-action,
.rsvp-card .registry-action,
.rsvp-card .all-events-action{
  cursor:pointer!important;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.attendance-options label span:hover,
.add-party-member:hover,
.rsvp-submit:not(:disabled):hover,
.rsvp-card .calendar-action:hover,
.rsvp-card .registry-action:hover,
.rsvp-card .all-events-action:hover{
  transform:translateY(-2px) scale(1.015)!important;
  box-shadow:0 8px 24px rgba(255,255,255,.16)!important;
}
.attendance-options label span:active,
.add-party-member:active,
.rsvp-submit:not(:disabled):active,
.rsvp-card .calendar-action:active,
.rsvp-card .registry-action:active,
.rsvp-card .all-events-action:active{
  transform:translateY(1px) scale(.975)!important;
}
.attendance-options input:checked + span{
  background:#fff!important;
  color:#000!important;
  border-color:#fff!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.25)!important;
}

/* Always-visible scrollbar rail, including before the first scroll. */
.stage-rsvp .rsvp-card{
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16))!important;
  background-size:5px 56px,1px calc(100% - 30px)!important;
  background-position:right 5px top 15px,right 7px top 15px!important;
  background-repeat:no-repeat!important;
  padding-right:20px!important;
}

/* Calendar belongs with the compact secondary event links. */
.after-rsvp-links{margin-top:0!important;gap:3px!important}
.rsvp-card .calendar-action{
  width:min(340px,100%)!important;
  min-height:44px!important;
  margin:0 auto!important;
  padding:9px 14px!important;
  font-family:var(--body)!important;
  font-size:13px!important;
  line-height:1.05!important;
  letter-spacing:.1em!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.62)!important;
}
.rsvp-card .calendar-action span{
  font-family:var(--body)!important;
  font-size:13px!important;
  line-height:1.05!important;
  letter-spacing:.1em!important;
}

@media(max-width:640px){
  .ticket-presentation{margin-top:-5px!important}
  .overview-panel{
    grid-template-columns:minmax(160px,44%) minmax(0,1fr)!important;
    width:98%!important;
    column-gap:10px!important;
  }
  .overview-poster-frame{
    width:clamp(158px,42vw,188px)!important;
    max-width:none!important;
    max-height:48vh!important;
  }
  .overview-panel h3{font-size:clamp(32px,9.3vw,43px)!important;line-height:.86!important}
  .overview-panel .nitti-subtitle{font-size:9.5px!important;line-height:1.15!important}
  .overview-panel p:not(.nitti-subtitle){font-size:clamp(13.2px,3.55vw,15px)!important;line-height:1.3!important;margin-top:6px!important}
  .stage-rsvp .rsvp-card{
    padding-right:18px!important;
    background-size:4px 46px,1px calc(100% - 24px)!important;
    background-position:right 4px top 12px,right 6px top 12px!important;
  }
  .rsvp-card .calendar-action{width:min(310px,100%)!important;min-height:40px!important;padding:7px 10px!important;font-size:11px!important}
  .rsvp-card .calendar-action span{font-size:11px!important}
}

/* === FINAL POLISH v6: matched calendar button, real scrollbar only, maximum overview scale === */
/* Remove the decorative/fake scrollbar rail. Native vertical scrolling remains intact. */
.stage-rsvp .rsvp-card{
  background-image:none!important;
  padding-right:16px!important;
}

/* Make Add Event to Calender exactly match All Upcoming Events. */
.rsvp-card .calendar-action,
.rsvp-card .all-events-action{
  width:min(500px,100%)!important;
  min-height:52px!important;
  padding:13px 18px!important;
  margin:3px auto 0!important;
  font-family:var(--body)!important;
  font-size:clamp(14px,1.05vw,17px)!important;
  line-height:1.05!important;
  letter-spacing:.1em!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.62)!important;
}
.rsvp-card .calendar-action span,
.rsvp-card .all-events-action span{
  font-family:var(--body)!important;
  font-size:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
}

/* Step 5 Overview: use nearly the entire panel without shifting the group off-center. */
.overview-panel{
  width:min(1180px,98%)!important;
  grid-template-columns:minmax(330px,410px) minmax(0,710px)!important;
  column-gap:clamp(16px,1.7vw,26px)!important;
  padding:clamp(12px,1.6vw,22px)!important;
}
.overview-poster-frame{
  width:clamp(330px,30vw,410px)!important;
  max-height:min(66vh,570px)!important;
}
.overview-panel h3{
  font-size:clamp(72px,6.8vw,108px)!important;
  line-height:.82!important;
}
.overview-panel .nitti-subtitle{
  font-size:clamp(14px,1.15vw,18px)!important;
}
.overview-panel p:not(.nitti-subtitle){
  font-size:clamp(18px,1.4vw,22px)!important;
  line-height:1.36!important;
}

@media(max-width:640px){
  .stage-rsvp .rsvp-card{padding-right:12px!important}
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    width:min(310px,100%)!important;
    min-height:40px!important;
    padding:7px 10px!important;
    margin:3px auto 0!important;
    font-size:11px!important;
  }
  .overview-panel{
    width:99%!important;
    grid-template-columns:minmax(176px,46%) minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:7px!important;
  }
  .overview-poster-frame{
    width:clamp(174px,45vw,202px)!important;
    max-height:53vh!important;
  }
  .overview-panel h3{
    font-size:clamp(36px,10.2vw,47px)!important;
    line-height:.84!important;
  }
  .overview-panel .nitti-subtitle{font-size:10px!important}
  .overview-panel p:not(.nitti-subtitle){
    font-size:clamp(13.8px,3.75vw,15.6px)!important;
    line-height:1.28!important;
  }
}

/* === FINAL RSVP UNIFORMITY === */
/* Smaller title gives the form more usable vertical room. */
.stage-rsvp .rsvp-card h2{
  font-size:clamp(38px,4.5vw,62px)!important;
  line-height:.84!important;
  margin:0 0 2px!important;
}

/* All Step 6 controls share one clean width. */
.rsvp-card .add-party-member,
.rsvp-card .rsvp-submit,
.rsvp-card .registry-action,
.rsvp-card .calendar-action,
.rsvp-card .all-events-action{
  width:min(500px,100%)!important;
  max-width:500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Remove the dead band beneath Submit RSVP. */
.party-rsvp-form{padding-bottom:0!important;margin-bottom:0!important}
.rsvp-submit{margin-top:4px!important;margin-bottom:0!important}
.rsvp-form-message:empty{display:none!important}
.rsvp-form-message{margin:0!important;padding:0!important;min-height:0!important}
.after-rsvp-links{margin-top:0!important;padding-top:0!important;gap:3px!important}
.after-rsvp-links > *:first-child{margin-top:0!important}

/* Submit RSVP flips exactly like the Registry button when enabled. */
.rsvp-submit:not(:disabled){
  background:#fff!important;
  color:#000!important;
  border:1px solid #fff!important;
}
.rsvp-submit:not(:disabled) span{color:#000!important}
.rsvp-submit:not(:disabled):hover{
  background:#000!important;
  color:#fff!important;
  border-color:#fff!important;
  transform:translateY(-2px) scale(1.012)!important;
}
.rsvp-submit:not(:disabled):hover span{color:#fff!important}
.rsvp-submit:not(:disabled):active{
  transform:translateY(0) scale(.985)!important;
}

@media(max-width:640px){
  .stage-rsvp .rsvp-card h2{
    font-size:clamp(30px,8.6vw,39px)!important;
    margin-bottom:1px!important;
  }
  .rsvp-card .add-party-member,
  .rsvp-card .rsvp-submit,
  .rsvp-card .registry-action,
  .rsvp-card .calendar-action,
  .rsvp-card .all-events-action{
    width:min(310px,100%)!important;
    max-width:310px!important;
  }
}

/* === MOBILE-ONLY FINAL LAYOUT CORRECTIONS === */
@media (max-width:640px){
  /* Step 2: clean vertical stack. The poster sits above the ticket with real space
     between the heading/copy, and the full ticket remains inside the viewport. */
  .stage-ticket{
    grid-template-rows:auto auto minmax(0,1fr)!important;
    align-content:start!important;
  }
  .stage-ticket .ticket-heading{
    margin:0!important;
    padding:0 10px!important;
  }
  .stage-ticket .ticket-heading h2{
    margin:0!important;
    line-height:.9!important;
  }
  .stage-ticket .ticket-purpose{
    margin:8px auto 0!important;
    padding:0 16px!important;
    line-height:1.28!important;
    max-width:390px!important;
  }
  .stage-ticket .ticket-presentation{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    justify-items:center!important;
    align-content:start!important;
    gap:12px!important;
    margin:8px 0 0!important;
    padding:0 0 58px!important;
  }
  .stage-ticket .ticket-poster{
    grid-row:1!important;
    width:auto!important;
    height:auto!important;
    max-width:126px!important;
    padding:3px!important;
    margin:0 auto!important;
    transform:rotate(-.7deg)!important;
  }
  .stage-ticket .ticket-poster .poster-swap,
  .stage-ticket .ticket-poster img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:154px!important;
    object-fit:contain!important;
  }
  .stage-ticket .ticket{
    grid-row:2!important;
    width:94vw!important;
    max-width:390px!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:2.15/1!important;
    grid-template-columns:minmax(0,1fr) 104px!important;
    margin:0 auto!important;
  }
  .stage-ticket .ticket-main{padding:11px 10px!important}
  .stage-ticket .ticket-main h3{font-size:clamp(24px,7vw,31px)!important;line-height:.86!important}
  .stage-ticket .ticket-presenter{font-size:6px!important;margin-bottom:2px!important}
  .stage-ticket .ticket-subtitle{font-size:6.5px!important;margin:2px 0 5px!important}
  .stage-ticket .ticket dl{gap:2px!important}
  .stage-ticket .ticket dt{font-size:5px!important}
  .stage-ticket .ticket dd{font-size:6.5px!important;line-height:1.1!important}
  .stage-ticket .ticket-rsvp-notice{font-size:5.5px!important;margin-top:4px!important}
  .stage-ticket .ticket-stub{padding:8px 6px!important}

  /* Step 5 Overview: newspaper-style wrap with the poster at top-right.
     The complete copy stays inside the bordered section and clears the buttons. */
  .stage-details .info-shell{
    height:calc(100% - 54px)!important;
    padding:3px 0 0!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:5px!important;
  }
  .stage-details .info-viewport{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .stage-details .overview-panel{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:10px 11px 8px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    text-align:left!important;
  }
  .stage-details .overview-panel::after{
    content:"";
    display:block;
    clear:both;
  }
  .stage-details .overview-poster-frame{
    float:right!important;
    width:42%!important;
    max-width:168px!important;
    max-height:none!important;
    margin:1px 0 7px 11px!important;
    padding:0!important;
  }
  .stage-details .overview-poster{
    width:100%!important;
    height:auto!important;
    max-height:245px!important;
    object-fit:contain!important;
  }
  .stage-details .overview-panel>div:last-child{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    text-align:left!important;
  }
  .stage-details .overview-panel h3{
    font-size:clamp(29px,8.4vw,37px)!important;
    line-height:.84!important;
    margin:0 0 3px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel .nitti-subtitle{
    font-size:8.6px!important;
    line-height:1.15!important;
    margin:0 0 6px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:clamp(12.4px,3.35vw,14px)!important;
    line-height:1.25!important;
    margin:0 0 6px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel p:last-child{margin-bottom:0!important}
  .stage-details .info-navigation{
    position:relative!important;
    z-index:4!important;
    min-height:46px!important;
    margin:0!important;
  }

  /* Step 6: lower the complete card so it no longer touches the progress timeline. */
  .stage-rsvp{
    padding-top:calc(var(--stage-top) + 15px)!important;
  }
  .stage-rsvp .rsvp-card{
    transform:translateY(7px)!important;
    max-height:calc(100% - 10px)!important;
  }
}

@media (max-width:640px) and (max-height:740px){
  .stage-ticket .ticket-purpose{font-size:10.5px!important;margin-top:6px!important}
  .stage-ticket .ticket-presentation{gap:8px!important;margin-top:5px!important;padding-bottom:54px!important}
  .stage-ticket .ticket-poster{max-width:108px!important}
  .stage-ticket .ticket-poster .poster-swap,
  .stage-ticket .ticket-poster img{max-height:132px!important}
  .stage-details .overview-panel{padding:8px 10px 6px!important}
  .stage-details .overview-poster-frame{width:38%!important;max-width:145px!important;margin-left:9px!important}
  .stage-details .overview-panel h3{font-size:28px!important}
  .stage-details .overview-panel p:not(.nitti-subtitle){font-size:11.6px!important;line-height:1.2!important;margin-bottom:4px!important}
}

/* === MOBILE-ONLY FINAL MICRO-FIXES === */
.overview-poster-mobile{display:none!important}

@media (max-width:640px){
  /* Step 2 / envelope: keep the comma attached to the last name and scale the full
     address line through JS when a longer surname needs more room. */
  .stage-envelope .envelope-copy{
    width:calc(100vw - 24px)!important;
    max-width:620px!important;
    overflow:visible!important;
  }
  .stage-envelope .envelope-copy h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0 4px!important;
    white-space:nowrap!important;
    text-align:center!important;
    line-height:.9!important;
    box-sizing:border-box!important;
  }
  .stage-envelope .envelope-name-line{
    display:inline!important;
    white-space:nowrap!important;
  }
  .stage-envelope h1 [data-envelope-name]{
    display:inline!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  /* Step 5 / Overview: the mobile poster now lives inside the copy block so the
     paragraphs actually wrap around it, like a newspaper column. */
  .stage-details .overview-poster-desktop{display:none!important}
  .stage-details .overview-copy-wrap{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }
  .stage-details .overview-poster-mobile{
    display:block!important;
    float:right!important;
    width:37%!important;
    max-width:142px!important;
    min-width:112px!important;
    height:auto!important;
    max-height:none!important;
    margin:0 0 6px 10px!important;
    padding:0!important;
    transform:rotate(.65deg)!important;
  }
  .stage-details .overview-poster-mobile .overview-poster{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:218px!important;
    object-fit:contain!important;
  }
  .stage-details .overview-panel{
    display:block!important;
    padding:9px 10px 7px!important;
    overflow:hidden!important;
    text-align:left!important;
  }
  .stage-details .overview-panel h3{
    font-size:clamp(30px,8.7vw,39px)!important;
    line-height:.85!important;
    margin:0 0 4px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel .nitti-subtitle{
    font-size:9.2px!important;
    line-height:1.17!important;
    margin:0 0 7px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:clamp(13.5px,3.62vw,14.6px)!important;
    line-height:1.245!important;
    margin:0 0 6px!important;
    text-align:left!important;
  }
  .stage-details .overview-panel::after{
    content:""!important;
    display:block!important;
    clear:both!important;
  }

  /* Step 6 / RSVP: remove the artificial bottom padding in the guest list that
     created the large empty band before Add Party Member. */
  .stage-rsvp .party-rsvp-form{
    gap:4px!important;
    margin-top:6px!important;
  }
  .stage-rsvp .party-list{
    padding:2px 8px 2px 1px!important;
    scroll-padding-bottom:14px!important;
    margin:0!important;
  }
  .stage-rsvp .party-list + .add-party-member{
    margin-top:0!important;
  }
}

@media (max-width:640px) and (max-height:740px){
  .stage-details .overview-poster-mobile{
    width:35%!important;
    max-width:130px!important;
    min-width:104px!important;
    margin-left:8px!important;
  }
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:12.9px!important;
    line-height:1.21!important;
    margin-bottom:4px!important;
  }
  .stage-details .overview-panel .nitti-subtitle{font-size:8.8px!important;margin-bottom:5px!important}
}


/* === MOBILE-ONLY FINAL FIT PASS === */
@media (max-width:640px){
  /* Step 2: keep the full personalized address inside the viewport. The exact
     font size is calculated in JS using the rendered name width. */
  .stage-envelope .envelope-copy h1{
    max-width:calc(100vw - 28px)!important;
    padding-inline:0!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
  }
  .stage-envelope .envelope-name-line,
  .stage-envelope h1 [data-envelope-name]{
    display:inline!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
  }

  /* Step 5: preserve the newspaper wrap but let the body copy grow to the
     largest size that fits. JS only reduces this value when a short screen
     would otherwise clip the final line. */
  .stage-details .overview-poster-mobile{
    width:34.5%!important;
    max-width:136px!important;
    min-width:104px!important;
    margin:0 0 5px 10px!important;
  }
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:var(--mobile-overview-copy-size,16px)!important;
    line-height:1.18!important;
    margin:0 0 4px!important;
    letter-spacing:0!important;
  }
  .stage-details .overview-panel .nitti-subtitle{
    margin-bottom:5px!important;
  }

  /* Step 6: move the card back up enough to expose the bottom control while
     retaining a clear gap beneath the progress timeline. */
  .stage-rsvp{
    padding-top:calc(var(--stage-top) + 7px)!important;
  }
  .stage-rsvp .rsvp-card{
    transform:translateY(0)!important;
    max-height:calc(100% - 4px)!important;
  }
}

@media (max-width:640px) and (max-height:740px){
  .stage-details .overview-poster-mobile{
    width:32.5%!important;
    max-width:122px!important;
    min-width:98px!important;
    margin-left:8px!important;
  }
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:var(--mobile-overview-copy-size,14.8px)!important;
    line-height:1.16!important;
    margin-bottom:3px!important;
  }
}


/* === FINAL MOBILE LAYOUT PASS === */
@media (max-width:640px){
  /* Step 3: poster first, followed by title, body copy, then ticket. */
  .stage-ticket{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding-top:var(--stage-top)!important;
    overflow:hidden!important;
  }
  .stage-ticket .ticket-presentation{
    display:contents!important;
  }
  .stage-ticket .ticket-poster{
    order:1!important;
    flex:0 0 auto!important;
    max-width:118px!important;
    margin:0 auto 5px!important;
  }
  .stage-ticket .ticket-poster .poster-swap,
  .stage-ticket .ticket-poster img{
    max-height:144px!important;
  }
  .stage-ticket .ticket-heading{
    order:2!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0 13px!important;
  }
  .stage-ticket .ticket-heading h2{
    margin:0!important;
    line-height:.9!important;
  }
  .stage-ticket .ticket-purpose{
    order:3!important;
    flex:0 0 auto!important;
    margin:8px auto 7px!important;
    padding:0 16px!important;
    max-width:390px!important;
    line-height:1.28!important;
  }
  .stage-ticket .ticket{
    order:4!important;
    flex:0 0 auto!important;
    width:94vw!important;
    max-width:390px!important;
    margin:0 auto!important;
  }

  /* Step 5: let the wrapped Overview copy use more of the available panel. */
  .stage-details .overview-panel p:not(.nitti-subtitle){
    font-size:var(--mobile-overview-copy-size,17.4px)!important;
    line-height:1.17!important;
  }

  /* Step 6: move the card higher and shorten the three primary controls. */
  .stage-rsvp{
    padding-top:calc(var(--stage-top) + 1px)!important;
  }
  .stage-rsvp .rsvp-card{
    transform:translateY(-2px)!important;
    max-height:calc(100% - 1px)!important;
  }
  .stage-rsvp .add-party-member{
    min-height:44px!important;
    padding:7px 12px!important;
    font-size:21px!important;
  }
  .stage-rsvp .rsvp-submit{
    min-height:48px!important;
    padding:7px 12px!important;
    font-size:27px!important;
  }
  .stage-rsvp .registry-action{
    min-height:49px!important;
    padding:7px 10px!important;
  }
  .stage-rsvp .registry-action span{
    font-size:21px!important;
    line-height:.9!important;
  }
}

@media (max-width:640px) and (max-height:740px){
  .stage-ticket .ticket-poster{
    max-width:102px!important;
    margin-bottom:3px!important;
  }
  .stage-ticket .ticket-poster .poster-swap,
  .stage-ticket .ticket-poster img{
    max-height:124px!important;
  }
  .stage-ticket .ticket-purpose{
    margin-top:6px!important;
    margin-bottom:5px!important;
  }
  .stage-rsvp{
    padding-top:var(--stage-top)!important;
  }
  .stage-rsvp .rsvp-card{
    transform:translateY(-3px)!important;
  }
}

/* === MOBILE STEP 6 FULL COMPACT PASS + NEW POSTER RELEASE === */
@media (max-width:640px){
  /* Scale the full RSVP interface down—not only the large controls—so more of
     the form is visible before scrolling while preserving comfortable taps. */
  .stage-rsvp .rsvp-card{
    width:88vw!important;
    max-width:374px!important;
    padding:6px 8px!important;
    transform:translateY(-4px)!important;
  }
  .stage-rsvp .rsvp-card h2{
    font-size:clamp(25px,7vw,31px)!important;
    line-height:.86!important;
    margin:0 0 1px!important;
  }
  .stage-rsvp .rsvp-deadline{
    font-size:9.5px!important;
    line-height:1.12!important;
    margin:1px 0 3px!important;
  }
  .stage-rsvp .party-rsvp-form{
    gap:3px!important;
    margin-top:3px!important;
  }
  .stage-rsvp .party-list{
    gap:4px!important;
    max-height:38vh!important;
    padding:1px 4px 1px 0!important;
  }
  .stage-rsvp .party-member-row{
    padding:6px!important;
    gap:4px!important;
  }
  .stage-rsvp .party-member-row.is-primary::before{
    top:4px!important;
    right:6px!important;
    font-size:6.5px!important;
  }
  .stage-rsvp .party-name-fields{
    gap:5px!important;
  }
  .stage-rsvp .party-name-fields label{
    gap:3px!important;
  }
  .stage-rsvp .party-name-fields label span,
  .stage-rsvp .attendance-options legend{
    font-size:7.5px!important;
    margin-bottom:2px!important;
  }
  .stage-rsvp .party-name-fields input{
    min-height:32px!important;
    padding:5px 7px!important;
    font-size:12px!important;
  }
  .stage-rsvp .attendance-options{
    gap:3px!important;
  }
  .stage-rsvp .attendance-options label span{
    min-height:30px!important;
    padding:4px 3px!important;
    font-size:8px!important;
  }
  .stage-rsvp .status-symbol{
    width:16px!important;
    height:16px!important;
    font-size:10px!important;
  }
  .stage-rsvp .add-party-member{
    min-height:36px!important;
    padding:5px 9px!important;
    font-size:16px!important;
    margin:1px auto!important;
  }
  .stage-rsvp .rsvp-submit{
    min-height:40px!important;
    padding:5px 9px!important;
    font-size:20px!important;
    margin:1px auto 0!important;
  }
  .stage-rsvp .after-rsvp-links{
    gap:2px!important;
    margin-top:0!important;
  }
  .stage-rsvp .registry-action{
    min-height:41px!important;
    padding:5px 8px!important;
    margin:1px auto 0!important;
  }
  .stage-rsvp .registry-action span{
    font-size:16px!important;
    line-height:.94!important;
  }
  .stage-rsvp .calendar-action,
  .stage-rsvp .all-events-action{
    min-height:31px!important;
    padding:4px 7px!important;
    margin:1px auto 0!important;
    font-size:8.8px!important;
  }
  .stage-rsvp .engagement-photos-action{
    font-size:9px!important;
  }
  .stage-rsvp .rsvp-form-message{
    font-size:9px!important;
    line-height:1.1!important;
  }
}

/* === FINAL MOBILE RSVP COMPACT TUNE === */
@media (max-width:640px){
  .stage-rsvp{
    padding-top:calc(var(--stage-top) - 2px)!important;
    padding-bottom:34px!important;
  }
  .stage-rsvp .rsvp-card{
    width:86vw!important;
    max-width:360px!important;
    padding:5px 7px!important;
    transform:translateY(-8px)!important;
  }
  .stage-rsvp .rsvp-card h2{
    font-size:clamp(23px,6.8vw,29px)!important;
    margin:0 0 1px!important;
  }
  .stage-rsvp .rsvp-deadline{
    font-size:9px!important;
    margin:1px 0 2px!important;
  }
  .stage-rsvp .party-list{
    max-height:36vh!important;
    gap:3px!important;
  }
  .stage-rsvp .party-member-row{padding:5px!important}
  .stage-rsvp .party-name-fields input{min-height:30px!important;font-size:11.5px!important}
  .stage-rsvp .attendance-options label span{min-height:28px!important;font-size:7.6px!important}
  .stage-rsvp .status-symbol{width:15px!important;height:15px!important;font-size:9px!important}
  .stage-rsvp .add-party-member{min-height:34px!important;font-size:15px!important}
  .stage-rsvp .rsvp-submit{min-height:37px!important;font-size:18px!important}
  .stage-rsvp .registry-action{min-height:38px!important}
  .stage-rsvp .registry-action span{font-size:15px!important}
  .stage-rsvp .calendar-action,
  .stage-rsvp .all-events-action{
    min-height:29px!important;
    font-size:8.4px!important;
    padding:4px 6px!important;
  }
  .stage-rsvp .engagement-photos-action{font-size:8.6px!important}
}

/* === MOBILE STEP 6 COMFORTABLE PHONE SIZE === */
@media (max-width:640px){
  .stage-rsvp .rsvp-card{
    width:91vw!important;
    max-width:392px!important;
    padding:9px 11px!important;
    transform:translateY(-6px)!important;
  }
  .stage-rsvp .rsvp-card h2{
    font-size:clamp(30px,8vw,36px)!important;
    line-height:.88!important;
    margin:0 0 2px!important;
  }
  .stage-rsvp .rsvp-deadline{
    font-size:10.5px!important;
    line-height:1.16!important;
    margin:2px 0 4px!important;
  }
  .stage-rsvp .party-rsvp-form{
    gap:4px!important;
    margin-top:4px!important;
  }
  .stage-rsvp .party-list{
    max-height:40vh!important;
    gap:5px!important;
    padding:2px 5px 2px 0!important;
  }
  .stage-rsvp .party-member-row{
    padding:7px!important;
    gap:5px!important;
  }
  .stage-rsvp .party-member-row.is-primary::before{
    top:5px!important;
    right:7px!important;
    font-size:7.5px!important;
  }
  .stage-rsvp .party-name-fields{
    gap:6px!important;
  }
  .stage-rsvp .party-name-fields label{
    gap:4px!important;
  }
  .stage-rsvp .party-name-fields label span,
  .stage-rsvp .attendance-options legend{
    font-size:8.5px!important;
    margin-bottom:3px!important;
  }
  .stage-rsvp .party-name-fields input{
    min-height:36px!important;
    padding:7px 9px!important;
    font-size:13px!important;
  }
  .stage-rsvp .attendance-options{
    gap:4px!important;
  }
  .stage-rsvp .attendance-options label span{
    min-height:34px!important;
    padding:5px 4px!important;
    font-size:9px!important;
  }
  .stage-rsvp .status-symbol{
    width:18px!important;
    height:18px!important;
    font-size:11px!important;
  }
  .stage-rsvp .add-party-member{
    min-height:41px!important;
    padding:7px 11px!important;
    font-size:18px!important;
    margin:2px auto!important;
  }
  .stage-rsvp .rsvp-submit{
    min-height:45px!important;
    padding:7px 11px!important;
    font-size:23px!important;
    margin:2px auto 0!important;
  }
  .stage-rsvp .registry-action{
    min-height:46px!important;
    padding:7px 10px!important;
    margin:2px auto 0!important;
  }
  .stage-rsvp .registry-action span{
    font-size:18px!important;
    line-height:.95!important;
  }
  .stage-rsvp .calendar-action,
  .stage-rsvp .all-events-action{
    min-height:34px!important;
    padding:5px 8px!important;
    margin:2px auto 0!important;
    font-size:9.8px!important;
  }
  .stage-rsvp .engagement-photos-action{
    font-size:10px!important;
  }
  .stage-rsvp .rsvp-form-message{
    font-size:10px!important;
    line-height:1.15!important;
  }
}

/* === MOBILE STEP 6 READABILITY RESTORE === */
@media (max-width:640px){
  /* Keep the RSVP card below the progress bar, but restore comfortable phone sizing. */
  .stage-rsvp{
    padding-top:calc(var(--stage-top) + 2px)!important;
    padding-bottom:38px!important;
  }
  .stage-rsvp .rsvp-card{
    width:92vw!important;
    max-width:392px!important;
    padding:10px 11px!important;
    transform:translateY(-3px)!important;
    max-height:calc(100% - 3px)!important;
  }
  .stage-rsvp .rsvp-card h2{
    font-size:clamp(32px,9vw,39px)!important;
    line-height:.88!important;
    margin:0 0 3px!important;
  }
  .stage-rsvp .rsvp-deadline{
    font-size:11px!important;
    line-height:1.18!important;
    margin:2px 0 5px!important;
  }
  .stage-rsvp .party-rsvp-form{
    gap:5px!important;
    margin-top:5px!important;
  }
  .stage-rsvp .party-list{
    max-height:39vh!important;
    gap:6px!important;
    padding:2px 6px 2px 0!important;
  }
  .stage-rsvp .party-member-row{
    padding:8px!important;
    gap:6px!important;
  }
  .stage-rsvp .party-member-row.is-primary::before{
    top:5px!important;
    right:7px!important;
    font-size:7.5px!important;
  }
  .stage-rsvp .party-name-fields{
    gap:7px!important;
  }
  .stage-rsvp .party-name-fields label{
    gap:4px!important;
  }
  .stage-rsvp .party-name-fields label span,
  .stage-rsvp .attendance-options legend{
    font-size:9px!important;
    margin-bottom:3px!important;
  }
  .stage-rsvp .party-name-fields input{
    min-height:39px!important;
    padding:7px 9px!important;
    font-size:15px!important;
  }
  .stage-rsvp .attendance-options{
    gap:5px!important;
  }
  .stage-rsvp .attendance-options label span{
    min-height:39px!important;
    padding:6px 4px!important;
    font-size:10px!important;
  }
  .stage-rsvp .status-symbol{
    width:20px!important;
    height:20px!important;
    font-size:12px!important;
  }
  .stage-rsvp .add-party-member{
    min-height:44px!important;
    padding:8px 12px!important;
    font-size:20px!important;
    margin:2px auto!important;
  }
  .stage-rsvp .rsvp-submit{
    min-height:48px!important;
    padding:8px 12px!important;
    font-size:26px!important;
    margin:2px auto 0!important;
  }
  .stage-rsvp .after-rsvp-links{
    gap:3px!important;
    margin-top:1px!important;
  }
  .stage-rsvp .registry-action{
    min-height:49px!important;
    padding:8px 10px!important;
    margin:2px auto 0!important;
  }
  .stage-rsvp .registry-action span{
    font-size:20px!important;
    line-height:.96!important;
  }
  .stage-rsvp .calendar-action,
  .stage-rsvp .all-events-action{
    min-height:39px!important;
    padding:7px 9px!important;
    margin:2px auto 0!important;
    font-size:11px!important;
  }
  .stage-rsvp .engagement-photos-action{
    font-size:11px!important;
  }
  .stage-rsvp .rsvp-form-message{
    font-size:11px!important;
    line-height:1.2!important;
  }
}

@media (max-width:640px) and (max-height:740px){
  .stage-rsvp .rsvp-card{
    width:91vw!important;
    padding:8px 9px!important;
  }
  .stage-rsvp .rsvp-card h2{font-size:30px!important}
  .stage-rsvp .party-name-fields input{min-height:36px!important;font-size:14px!important}
  .stage-rsvp .attendance-options label span{min-height:36px!important;font-size:9.5px!important}
  .stage-rsvp .add-party-member{min-height:41px!important;font-size:18px!important}
  .stage-rsvp .rsvp-submit{min-height:44px!important;font-size:23px!important}
  .stage-rsvp .registry-action{min-height:45px!important}
  .stage-rsvp .registry-action span{font-size:18px!important}
  .stage-rsvp .calendar-action,
  .stage-rsvp .all-events-action{min-height:35px!important;font-size:10px!important}
}

/* RSVP submission confirmation: keep the completed state unmistakable. */
.rsvp-submit.is-submitting,
.rsvp-submit.is-submitting:disabled{
  opacity:.78!important;
  cursor:wait!important;
}
.party-rsvp-form.is-submitted .rsvp-submit,
.rsvp-submit.is-success,
.rsvp-submit.is-success:disabled{
  opacity:1!important;
  pointer-events:none!important;
  background:#fff!important;
  color:#000!important;
  border-color:#fff!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.24),0 0 24px rgba(255,255,255,.28)!important;
  transform:none!important;
}
.party-rsvp-form.is-submitted .rsvp-submit span,
.rsvp-submit.is-success span{
  color:#000!important;
  letter-spacing:.08em!important;
}