.home .top{position:fixed;left:0;right:0}
.home main{padding-top:72px}

/* ---------- hero + story ----------
   One grid. Stacked (phones, portrait windows): the copy, then the stage (sticky under the header), then the beats,
   which scroll up under it. Side by side (landscape windows from 640 px): copy and beats on the left, the stage sticky
   on the right. --p (0 → 1 until the first beat) moves the phone from its hero pose to the middle of the stage. */
.h-hero{overflow-x:clip}
.h-grid{display:grid}
.h-copy{position:relative;z-index:2;display:grid;justify-items:start;align-content:center;gap:18px;padding:20px 0 28px}
.h-h1{font:700 clamp(46px,min(14.6vw,12svh),112px)/.9 var(--display);letter-spacing:-.045em;text-wrap:balance;max-width:10.5ch}
.h-mark{position:relative;white-space:nowrap;z-index:0}
.h-mark::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;bottom:.04em;height:.36em;border-radius:.06em;background:var(--sun);transform-origin:left;animation:mark .8s .5s var(--ease) both}
@keyframes mark{from{transform:scaleX(0)}}
.h-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:44ch;opacity:.86;text-wrap:pretty}
.h-copy .ask{margin-top:4px}
.h-chips{justify-content:flex-start;max-width:640px;margin-top:-2px}
@media (max-width:719px){.h-chips{flex-wrap:nowrap;width:calc(100% + 2 * var(--g))}}

.h-stage{--pw:min(420px,25svh,58vw);--q:calc(1 - var(--p,0));position:sticky;top:72px;z-index:1;height:56svh;margin:0 calc(-1 * var(--g));background:var(--paper)}
.h-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--paper),rgba(255,247,236,0));pointer-events:none}
.h-dio{position:absolute;left:50%;top:50%;width:min(124%,56svh * 1.5);max-width:none;height:auto;translate:-50% -50%;filter:drop-shadow(0 30px 30px rgba(22,32,58,.16));animation:assemble 1.2s .1s var(--spring) both}
@keyframes assemble{from{transform:translateY(36px) scale(.94)}}
.h-phone{position:absolute;z-index:2;left:calc(50% - var(--pw) / 2);top:calc(50% - var(--pw) * 1.037);width:var(--pw);translate:calc(var(--q) * var(--hx,0%)) calc(var(--q) * var(--hy,0%));rotate:calc(var(--q) * -4deg);animation:rise 1.1s .35s var(--ease) both}
@keyframes rise{from{transform:translateY(80px) rotate(4deg);opacity:0}}
.h-sally{position:absolute;z-index:3;right:5%;top:0;width:clamp(84px,22vw,150px);animation:float-in 1.2s .7s var(--spring) both}
.h-sally .sally-wrap{width:100%!important}
@keyframes float-in{from{transform:translateY(60px) scale(.6);opacity:0}}
.h-beats{position:relative;z-index:0}
.h-beat{min-height:34svh;padding-top:32px;max-width:520px}
.h-beat h2{font:700 clamp(30px,3.6vw,52px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
.h-beat p{margin-top:12px;font-size:clamp(16px,1.4vw,19px);line-height:1.55;opacity:.86;max-width:40ch;text-wrap:pretty}
.h-beat .stores{margin-top:20px}
@media (min-width:640px) and (min-aspect-ratio:1/1){
  .h-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(16px,3vw,48px)}
  .h-copy{grid-area:1/1;min-height:calc(100svh - 72px);padding:24px 0 48px}
  .h-stage{--pw:min(300px,34svh);--hx:-34%;--hy:12%;grid-area:1/2/3/3;align-self:start;height:calc(100svh - 72px);margin:0 calc(-1 * var(--g)) 0 0;background:none}
  .h-stage::after{display:none}
  .h-dio{width:min(124%,(100svh - 72px) * 1.3);translate:-46% -54%}
  .h-sally{right:8%;top:2%}
  .h-beats{grid-area:2/1}
  .h-beat{display:grid;align-content:center;min-height:62svh;padding:0}
  .h-live .h-beat{opacity:.28;transition:opacity .4s var(--ease)}
  .h-live .h-beat.on{opacity:1}
}

/* ---------- the phone and its screens ---------- */
.phone{position:relative;width:100%;aspect-ratio:300/622;padding:3.4%;border-radius:15%/7.2%;background:linear-gradient(150deg,#3A4266,#0C1021 45%,#262D4D);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 5px #070A14,0 50px 80px -30px rgba(22,32,58,.55),0 22px 34px -14px rgba(22,32,58,.45)}
.phone::before{content:"";position:absolute;right:-1.4%;top:22%;width:1.4%;height:13%;border-radius:0 3px 3px 0;background:#1B2038}
.ph-scr{position:relative;height:100%;border-radius:12.5%/6%;overflow:hidden;background:var(--paper);container-type:inline-size;color:var(--ink);isolation:isolate}
.ph-bar{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:13cqw;padding:0 7cqw 0 9cqw;color:#fff;font:700 4.6cqw/1 var(--sans);transition:color .3s}
.scr-light.on~.ph-bar{color:var(--ink)}
.ph-bar span{display:flex;gap:1.6cqw;align-items:center}
.ph-bar svg{width:auto;height:3.8cqw}
.ph-isl{position:absolute;left:50%;top:3cqw;width:30cqw;height:8.6cqw;margin-left:-15cqw;border-radius:99px;background:#05070D}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;translate:0 3%;transition:opacity .45s var(--ease),visibility .45s,translate .6s var(--ease)}
.scr.on{opacity:1;visibility:visible;translate:none}
/* a screen's parts arrive in turn (--t) once it is on, and reset after it has faded out */
.k{opacity:0;translate:0 4cqw;transition:opacity .3s var(--t,0s),translate .5s var(--spring) var(--t,0s)}
.on .k{opacity:1;translate:none}
.scr:not(.on) .k{transition:opacity 0s .5s,translate 0s .5s}

/* the plan */
.ph-hero{position:relative;height:64cqw;flex:none;overflow:hidden}
.ph-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ph-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,28,.35),transparent 30%,transparent 50%,rgba(10,14,28,.7))}
.ph-ttl{position:absolute;z-index:1;left:5cqw;right:5cqw;bottom:4.5cqw;color:#fff}
.ph-ttl small{display:block;font:700 3.6cqw/1.2 var(--sans);opacity:.92;letter-spacing:.01em}
.ph-ttl b{display:block;font:700 10.5cqw/1 var(--display);letter-spacing:-.03em;margin-top:1cqw}
.ph-days{display:flex;gap:1.8cqw;padding:4cqw 5cqw 2.4cqw;overflow:hidden}
.ph-days span{flex:none;padding:1.8cqw 3.4cqw;border-radius:99px;background:#F1E6D6;font:700 3.6cqw/1 var(--sans);color:var(--muted)}
.ph-days .on{background:var(--dc);color:#fff}
.ph-dt{padding:1cqw 5cqw 2.6cqw;font:700 5.6cqw/1.12 var(--display);letter-spacing:-.02em}
.ph-stops{display:grid;padding:0 4cqw}
.ph-stop{display:grid;grid-template-columns:8.4cqw 1fr;gap:3cqw;align-items:start;padding:2.8cqw;border-radius:4.6cqw;background:#fff;box-shadow:0 .4cqw 1.4cqw rgba(22,32,58,.08)}
.ph-stop i{display:grid;place-items:center;width:8.4cqw;height:8.4cqw;border-radius:50%;background:var(--dc);color:#fff;font:800 3.8cqw/1 var(--sans);font-style:normal}
.ph-stop small{display:block;font:800 3.1cqw/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.ph-stop b{display:block;margin-top:1cqw;font:700 4.1cqw/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-stop span{display:block;margin-top:.6cqw;font:500 3.3cqw/1.25 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-stop em{font-style:normal;color:#C98A00;font-weight:700}
.ph-leg{display:flex;align-items:center;gap:1.4cqw;height:6.4cqw;padding-left:6.4cqw;font:700 3cqw/1 var(--sans);color:var(--muted)}
.ph-leg svg{width:3.4cqw;height:3.4cqw}

/* the light screens: ask, map, chat */
.scr-light{gap:2.6cqw;padding:15cqw 5cqw 6cqw}
.sc-head{display:flex;flex-direction:column;align-items:center;gap:1.2cqw;padding-bottom:2.6cqw;border-bottom:1px solid rgba(22,32,58,.08);font:700 4.4cqw/1.1 var(--sans);text-align:center}
.sc-head small{font:600 3.3cqw/1 var(--sans);color:var(--muted)}
.sc-head .mark{width:11cqw;height:auto}
.sc-m{max-width:84%;padding:2.8cqw 4cqw;border-radius:5cqw;font:500 4.5cqw/1.3 var(--sans)}
.sc-m.in{align-self:flex-start;background:#fff;border-bottom-left-radius:1.4cqw;box-shadow:0 .4cqw 1.4cqw rgba(22,32,58,.08)}
.sc-m.out{align-self:flex-end;background:#1D8CFF;color:#fff;border-bottom-right-radius:1.4cqw}
.sc-m small{display:block;font:700 3cqw/1.3 var(--sans);color:var(--muted)}
.sc-tags{display:flex;flex-wrap:wrap;gap:1.4cqw;margin-top:2cqw}
.sc-tags span{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.6cqw 2.2cqw;border-radius:2.4cqw;background:color-mix(in srgb,var(--b) 24%,#fff);font:700 3.2cqw/1 var(--sans)}
.sc-tags svg{width:3.4cqw;height:3.4cqw}
.sc-busy{width:64%}
.sc-compose{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:1.6cqw 1.6cqw 1.6cqw 4.4cqw;border-radius:99px;background:#fff;border:1px solid rgba(22,32,58,.12);font:500 4cqw/1 var(--sans);color:var(--muted)}
.sc-compose i{display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;background:var(--coral);color:#fff;font:800 4.4cqw/1 var(--sans);font-style:normal}
.sc-busy i{display:block;height:1.4cqw;margin-top:2cqw;border-radius:9px;background:#F1E6D6;overflow:hidden}
.sc-busy i::after{content:"";display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(.06);transition:transform 2.4s var(--ease) 2.3s}
.on .sc-busy i::after{transform:scaleX(.8)}
.sc-map{position:relative;flex:none;aspect-ratio:78/58;border-radius:5cqw;overflow:hidden;background:#F3C677;box-shadow:0 1cqw 3cqw rgba(22,32,58,.18)}
.sc-map img,.smap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.smap .draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .4s linear var(--t)}
.on .smap .draw{stroke-dashoffset:0}
.smap .pin-in{transform:scale(0);transition:transform .4s var(--spring) var(--t)}
.on .smap .pin-in{transform:none}
.scr:not(.on) .smap .draw,.scr:not(.on) .smap .pin-in{transition-duration:0s;transition-delay:.5s}
.sc-days{display:grid;gap:1.6cqw}
.sc-days li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.4cqw;align-items:center;padding:2.2cqw 3cqw;border-radius:3.6cqw;background:#fff;box-shadow:0 .4cqw 1.4cqw rgba(22,32,58,.08);font:600 3.5cqw/1.2 var(--sans)}
.sc-days b{display:inline-flex;align-items:center;gap:1.4cqw;color:var(--dc);font:800 3cqw/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.sc-days b::before{content:"";width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--dc)}
.sc-days span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-avs{display:flex}
.sc-avs .av{width:7cqw;height:7cqw;margin-right:-1.6cqw;font-size:2.6cqw;box-shadow:0 0 0 .6cqw var(--paper)}
.sc-avs .av:last-child{margin-right:0}
.sc-card{width:58%;padding:0;overflow:hidden;background:#E9E9EB!important;color:var(--ink)!important}
.sc-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.sc-card span{display:block;padding:2cqw 3cqw 2.4cqw}
.sc-card b{display:block;font:700 3.4cqw/1.2 var(--sans)}
.sc-card small{color:var(--muted);font-size:3cqw}
.sc-rsvp{display:flex;justify-content:center;gap:3cqw;margin-top:1cqw}
.sc-rsvp span{display:grid;place-items:center;align-content:center;gap:.6cqw;width:18cqw;aspect-ratio:1;border-radius:50%;color:#fff;font:700 2.9cqw/1 var(--sans);background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),transparent 42%),linear-gradient(150deg,var(--b1),var(--b2))}
.sc-rsvp span:nth-child(1){--b1:#4FD69C;--b2:#16A3B8}.sc-rsvp span:nth-child(2){--b1:#FFD166;--b2:#FF6A55}.sc-rsvp span:nth-child(3){--b1:#7FB2FF;--b2:#8B5CF6}
.sc-rsvp i{font-style:normal;font-size:6cqw;line-height:1}
.sc-going{display:flex;align-items:center;justify-content:center;gap:2.4cqw;font:700 3.5cqw/1 var(--sans)}

/* ---------- plans to copy ---------- */
.h-plans{margin-top:clamp(56px,8vw,96px)}

@media (prefers-reduced-motion:reduce){.h-dio,.h-phone,.h-sally,.h-mark::before{animation:none}.scr,.k,.smap .draw,.smap .pin-in,.sc-busy i::after,.h-beat{transition:none!important}}