/* ==========================================================
   Bailao' website · style.css  (round 2b: Canva proportions)
   Layout: on desktop every section is a 1366×768 "page", exactly
   like the Canva design. Elements sit at the same % positions and
   all sizes scale with the page width (cqw = 1% of the page).
   On phones the same pieces stack in one column.
   Brand tokens copied 1:1 from the app.
   ========================================================== */

:root{
  /* colours (same names as the app) */
  --wine:#6B0F24; --wine-deep:#4E0A1A; --butter:#F6EBA0; --tang:#F07B2D;
  --peri:#A9B9DE; --stone:#ECEAE6; --paper:#FFFFFF; --ink:#2B0C14;
  --muted:#6E5A5E; --line:#D9D3CF; --blue:#2F4FD8; --dot:#7E1A31;
  --tear:#F3F2F0; --red-ink:#B3243F;

  /* fonts */
  --f-poster:'Climate Crisis','Arial Black',sans-serif;  /* big Canva headlines */
  --f-hand:'Gochi Hand','Comic Sans MS',cursive;
  --f-body:'Jost','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Space Mono','Courier New',monospace;
  --f-serif:'Fraunces',Georgia,serif;

  /* shape + space */
  --wonky:24px 30px 26px 32px / 30px 24px 32px 26px;
  --gutter:max(18px, env(safe-area-inset-left, 0px));
  --gutter-r:max(18px, env(safe-area-inset-right, 0px));
  --page:1600px;   /* desktop pages stop growing at this width */

  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wine-deep);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;font-weight:400}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative;overflow:hidden;scroll-margin-top:100px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.stage{position:relative;padding-left:var(--gutter);padding-right:var(--gutter-r)}

/* full-bleed background photo */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* film grain over everything */
body::after{
  content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:overlay;
}

.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--butter);color:var(--wine);padding:10px 16px;border-radius:999px;font-family:var(--f-mono);font-weight:700}
.skip:focus{left:16px}

/* ---------- logo (mask = any colour) ---------- */
.logo{
  display:block;aspect-ratio:1274/394;max-width:100%;background:var(--wine);
  -webkit-mask:url(../img/logo.png) center/contain no-repeat;
          mask:url(../img/logo.png) center/contain no-repeat;
}
.logo--butter{background:var(--butter)}
.logo--wine{background:var(--wine)}

/* ---------- bands ---------- */
.night{background:var(--wine);color:var(--butter)}
.dots{background-image:radial-gradient(circle,var(--dot) 2.2px,transparent 2.6px);background-size:22px 22px}
.stone{background:var(--stone);color:var(--ink)}

/* ---------- Canva headline style ---------- */
.poster{font-family:var(--f-poster);font-weight:400;text-transform:uppercase;line-height:1.05;color:var(--butter)}

/* ---------- buttons (kept from round 1) ---------- */
.blob{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 30px;border-radius:var(--wonky);
  background:var(--tang);color:var(--wine-deep);text-decoration:none;white-space:nowrap;
  font-family:var(--f-mono);font-weight:700;font-size:16px;
  box-shadow:0 0 0 3px var(--peri);transition:transform .15s;
}
.stone .blob{box-shadow:0 0 0 3px var(--wine)}
.blob:hover{transform:rotate(-1.5deg) scale(1.03)}
.blob:active{transform:scale(.97)}
.pill-btn{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  background:var(--butter);color:var(--wine);text-decoration:none;
  font-family:var(--f-mono);font-size:13px;font-weight:700;white-space:nowrap;
}

/* ---------- top bar (kept from round 1) ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--wine-deep)}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--wine-deep);border-bottom:1.5px solid rgba(246,235,160,.12)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.topbar__logo{display:block;width:96px;padding:6px 0}
.topbar__logo .logo{background:var(--butter)}
.topbar__in{flex-wrap:wrap;row-gap:0}
.topbar__nav{order:3;flex-basis:100%;display:flex;justify-content:center;gap:28px;padding-bottom:2px}
.topbar__nav a{font-family:var(--f-hand);font-size:18px;color:var(--butter);text-decoration:none;padding:4px 2px 6px}
.topbar__nav a:hover,.topbar__nav a:focus-visible{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c25-4 60-5 116-1' fill='none' stroke='%23F07B2D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 7px no-repeat}
@media (min-width:600px){
  .topbar__in{flex-wrap:nowrap}
  .topbar__nav{order:0;flex-basis:auto;margin-left:auto;gap:34px;padding:0;margin-right:18px}
  section{scroll-margin-top:64px}
}

/* ==========================================================
   PHONE LAYOUT (default)
   ========================================================== */

/* 1. hero: the portrait photo fills the phone screen */
.hero{background:var(--wine-deep)}
.hero__bg{object-position:45% 40%}
/* vintage film layer (Canva look): lifted blacks, warm wash, vignette, extra grain */
.hero__vintage{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 75% at 50% 45%,transparent 60%,rgba(40,22,14,.35) 100%),linear-gradient(180deg,rgba(255,220,160,.10),rgba(140,110,70,.12))}
.hero__vintage::before{content:"";position:absolute;inset:0;background:#5a4b3f;mix-blend-mode:lighten;opacity:.9}
.hero__vintage::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,12,20,.15),rgba(43,12,20,0) 30%,rgba(43,12,20,0) 65%,rgba(43,12,20,.35))}
.hero .stage{z-index:1;min-height:min(68svh,600px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding-block:70px 44px}
.hero__btn{margin-top:14px}
.hero__nav{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:center;gap:26px}
.hero__nav a{font-family:var(--f-hand);font-size:19px;color:var(--butter);text-decoration:none;padding:6px 2px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.hero__nav a:hover,.hero__nav a:focus-visible{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M2 6c25-4 60-5 116-1' fill='none' stroke='%232B0C14' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 8px no-repeat}
.hero__logo{width:86%}
.hero__logo .logo{width:100%;filter:drop-shadow(0 4px 18px rgba(43,12,20,.35))}
.hero__tag{font-family:var(--f-hand);text-transform:uppercase;letter-spacing:.08em;color:var(--butter);font-size:17px;line-height:1.25;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* 2. intro */
.intro .stage{display:flex;flex-direction:column;gap:18px;padding-block:64px 0}
.intro__head{font-size:8.6vw;margin-bottom:14px}
.intro__lead{color:var(--paper);font-weight:300;font-size:22px;line-height:1.25}
.intro__lead em{font-family:var(--f-serif);font-style:italic;font-size:1.15em}
.scribble{
  padding-bottom:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 9c20-6 46-7 72-5 14 1 28 3 44 0M10 12c30-4 60-4 96-2' fill='none' stroke='%23F07B2D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 12px no-repeat;
}
.intro__body{display:flex;flex-direction:column;gap:16px;color:var(--paper);font-weight:300;font-size:18px;line-height:1.3}
.intro__btn{align-self:flex-start;margin-top:8px}
.pinboard{width:100%;max-width:440px;height:auto;align-self:center;margin-top:30px;margin-bottom:-60px;filter:drop-shadow(0 16px 26px rgba(20,4,8,.4))}
.intro{padding-bottom:0}
.pinboard__paper{position:absolute;left:12%;right:0;top:0;bottom:0;background:linear-gradient(160deg,#C4D0EA,var(--peri) 60%,#97A9D4)}
.polaroid{position:relative;width:91%;background:#F7F7F5;padding:4.4% 4.4% 0;rotate:-2deg;box-shadow:0 16px 34px rgba(20,4,8,.45)}
.polaroid img{width:100%;aspect-ratio:455/310;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.polaroid figcaption{font-family:var(--f-mono);color:var(--red-ink);text-align:center;font-size:15px;line-height:1.3;padding:.9em 0 1.1em;rotate:2deg}
.paperclip{position:absolute;left:16%;top:-7%;width:6%;min-width:22px;height:auto;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}

/* 3. proof + receipt */
.proof .stage{display:flex;flex-direction:column;gap:26px;padding-block:64px 84px}
.proof__right{display:contents}
.proof__head{order:1}
.proof .printer{order:2}
.proof .proof__btn{order:4;align-self:center;margin-top:8px}
.proof__why{order:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-top:18px}
.proof__head{font-size:9.6vw;line-height:1.08;text-align:center}

.printer{position:relative;width:min(100%,350px);align-self:center;margin-top:34px;--rf:12px}
.printer__body{position:relative;z-index:3;display:block;height:38px;border-radius:14px;
  background:linear-gradient(180deg,#F6F4F0,#DCD7D0);box-shadow:0 10px 18px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.08)}
.printer__slot{position:absolute;left:6%;right:6%;top:50%;height:9px;margin-top:-4px;border-radius:5px;background:#1d0a0e;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.feed{position:relative;z-index:2;display:grid;margin:-14px 7% 0;clip-path:inset(0 -60% -400% -60%)}
.receipt{grid-area:1/1;font-size:var(--rf)}
.feed .receipt:not(:first-child){visibility:hidden}

.receipt__paper{
  position:relative;
  background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.42)),var(--paper) url(../img/paper.jpg) center top/100% auto repeat-y;
  font-family:var(--f-mono);font-size:1em;color:var(--ink);box-shadow:0 22px 40px rgba(20,4,8,.35);
}
.r-blk{position:relative;padding:1.2em 1.4em;border-top:1.5px dashed #C9C2BE;display:flex;flex-direction:column;gap:.6em}
.r-blk:first-child{border-top:0;padding-top:3.6em}
.r-head{align-items:center;text-align:center}
.r-logo{width:9.5em}
.cap{font-family:var(--f-mono);font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cap--tang{color:var(--tang)}
.r-title{font-family:var(--f-serif);font-weight:800;color:var(--tang);font-size:2em;line-height:1}
.r-lines{display:flex;flex-direction:column;gap:.55em}
.r-lines dd{color:var(--wine);font-weight:700;font-variant-numeric:tabular-nums}
.ln{display:flex;align-items:flex-end;gap:.45em}
.ln > i{flex:1;min-width:.8em;border-bottom:2px dotted currentColor;margin-bottom:.35em;opacity:.75}
.ln > :last-child{text-align:right}
.ln--total{font-weight:700;font-size:1.05em;color:var(--wine)}
.r-total{background:rgba(246,235,160,.45)}
.stamp{position:absolute;right:.9em;top:.8em;width:5.6em;height:5.6em;border:.22em solid var(--blue);border-radius:50%;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.9em;font-weight:700;letter-spacing:.06em;rotate:-14deg;background:rgba(255,255,255,.7)}
.r-foot{align-items:center;text-align:center;padding-bottom:1.6em}
.barcode{width:13em;height:2.2em;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px)}
.r-thanks{font-weight:700;letter-spacing:.06em;color:var(--wine)}
.receipt__tear{height:12px;background:radial-gradient(circle at 8px 12px,transparent 7px,var(--tear) 7.5px) -8px 0/16px 12px repeat-x}

/* 4. parties */
.parties .stage{padding-block:56px 64px;display:flex;flex-direction:column}
.parties__title{position:relative;z-index:2;color:var(--tang);font-size:10.4vw;line-height:1.2;margin-bottom:-.5em;pointer-events:none}
.party-list{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding:0 var(--gutter-r) 22px var(--gutter);scrollbar-width:none;
}
.party-list::-webkit-scrollbar{display:none}
.party{flex:0 0 66vw;max-width:260px;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.party__photo{position:relative}
.party__photo img{width:100%;aspect-ratio:260/280;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.party__info{font-family:var(--f-serif);font-size:15px;line-height:1.45;color:var(--wine)}
.party__info b{font-weight:400;text-decoration:underline;text-decoration-color:var(--tang);text-underline-offset:3px}
.sticker{position:absolute;right:-6px;bottom:-12px;z-index:1;font-family:var(--f-serif);font-weight:800;font-size:56px;line-height:1;padding:2px 9px 5px;box-shadow:0 3px 6px rgba(0,0,0,.18)}
.sticker--green{background:#3CC77F;color:#0F1A12;rotate:-3deg}
.sticker--orange{background:var(--tang);color:#1A0D06;rotate:4deg;padding-inline:13px}
.sticker--lilac{background:#E7DCEF;color:#333;font-weight:400;border-radius:50%;width:1.25em;height:1.25em;display:flex;align-items:center;justify-content:center;padding:0;rotate:6deg}
.parties__btn{align-self:flex-end;margin-top:14px}

/* 5. salsa time */
.salsatime{background:#2a0f08}
.salsatime .bg{filter:saturate(1.15)}
.salsatime::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,12,20,.2),rgba(43,12,20,.05) 40%,rgba(43,12,20,.55) 72%,rgba(43,12,20,.65))}
.salsatime .stage{z-index:2;display:flex;flex-direction:column;align-items:center;padding-block:44px 52px}
.salsatime__kicker{color:var(--tang);font-size:10.4vw;line-height:1.12;text-align:center;margin-bottom:26px;text-shadow:0 2px 16px rgba(43,12,20,.55)}
.salsatime__btn{margin-top:26px}
.filmframe{position:relative;width:74%;max-width:340px;background:#F6F4EF;padding:3.8% 6.8%;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.filmframe img{width:100%;aspect-ratio:388/505;object-fit:cover}
.filmframe__side{position:absolute;top:50%;font-family:var(--f-mono);font-size:8px;letter-spacing:.14em;color:#A9A49C;white-space:nowrap}
.filmframe__side--l{left:3.4%;transform:translate(-50%,-50%) rotate(-90deg)}
.filmframe__side--r{right:3.4%;transform:translate(50%,-50%) rotate(90deg)}
.filmframe__pin{position:absolute;left:50%;top:1.2%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ddd 45%,#9b9b9b);box-shadow:0 3px 4px rgba(0,0,0,.4)}
.salsatime__title{position:relative;z-index:2;margin-top:-.75em;text-align:center;font-size:10vw;line-height:1;white-space:nowrap;color:var(--tang);text-shadow:0 3px 18px rgba(43,12,20,.6)}

/* 6. collage: same pieces as the Canva page, on a taller canvas for phones */
.collage{background:#1d0a0d}
.collage .stage{aspect-ratio:4/5;padding:0}
.cl{position:absolute;width:auto;max-width:none;object-fit:cover;filter:contrast(1.06) saturate(1.1) sepia(.08)}
.cl--1{left:0;top:0;width:56.7%;height:52%}
.cl--2{left:56.7%;top:0;width:43.3%;height:34%}
.cl--4{left:62%;top:34%;width:38%;height:66%}
.cl--3{left:0;top:52%;width:42.5%;height:48%}
.cl--5{left:30%;top:66%;width:32%;height:34%}
.vinyl{
  position:absolute;left:50%;top:46%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-radial-gradient(circle,#0c0c0c 0 2px,#1b1b1b 2px 4px);box-shadow:0 20px 50px rgba(0,0,0,.6);
  animation:spin 6s linear infinite;
}
.vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 6%,rgba(255,255,255,.22) 10%,transparent 16% 50%,rgba(255,255,255,.16) 58%,transparent 64%)}
.vinyl__label{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle,#fff 0 4%,#B6230F 4.5% 70%,#8E1A0B 71% 74%,#B6230F 75%)}
.claves{position:absolute;left:46%;top:45%;width:48%;max-width:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.collage__disco{position:absolute;left:72%;top:52%;width:40%;border-radius:50%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.collage__title{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:4;text-align:center;font-size:10.6vw;line-height:1;white-space:nowrap;text-shadow:0 4px 24px rgba(43,12,20,.55)}
.collage__styles{position:absolute;left:0;right:0;bottom:4%;text-align:center;z-index:2;font-family:var(--f-mono);font-weight:700;color:var(--butter);font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
@keyframes spin{to{rotate:360deg}}

/* 7. why */
.why__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:28px var(--gutter-r) 64px var(--gutter)}
.why__disco{width:120px;border-radius:50%;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));animation:sway 7s ease-in-out infinite}
.count{display:flex;gap:10px;justify-content:center;font-family:var(--f-mono);font-weight:700;font-size:24px;color:var(--butter)}
.count span{opacity:.35;display:inline-block;min-width:16px;transition:opacity .08s,transform .08s}
.count span.on{opacity:1;transform:scale(1.25)}
.count .conga{color:var(--tang)}
.count .conga.on{transform:scale(1.7)}
.why__text{color:var(--paper);font-weight:300;font-size:20px;line-height:1.3;max-width:24ch}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* 8. contact */
.contact{background:var(--wine-deep)}
.contact::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,12,20,.2),rgba(43,12,20,.35) 45%,rgba(43,12,20,.78) 75%),linear-gradient(180deg,rgba(43,12,20,0) 55%,rgba(43,12,20,.75))}
.contact .stage{z-index:1;display:flex;flex-direction:column;gap:18px;padding-block:72px 44px;min-height:560px}
.contact__list{display:flex;flex-direction:column;gap:20px;align-self:flex-end;width:min(100%,22rem)}
.contact__list dt{font-style:italic;font-weight:300;font-size:13px;color:var(--tang)}
.contact__list dd{font-family:var(--f-serif);font-size:24px;line-height:1.2;color:var(--butter);overflow-wrap:anywhere}
.contact__list a{text-decoration:none}
.contact__list a:hover{text-decoration:underline;text-underline-offset:4px}
.contact__logo{width:min(56%,240px);align-self:center;margin-top:auto}
.contact__tag{font-family:var(--f-hand);text-transform:uppercase;letter-spacing:.08em;color:var(--butter);font-size:15px;text-align:center;text-wrap:balance}

/* 9. strip + footer */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;background:var(--wine)}
.strip img{width:100%;aspect-ratio:442/748;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.footer__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:64px var(--gutter-r) calc(48px + env(safe-area-inset-bottom,0px)) var(--gutter)}
.footer__line{font-family:var(--f-hand);font-size:26px;color:var(--peri);rotate:-2deg}
.footer__small{font-family:var(--f-mono);font-size:12px;opacity:.65}

/* ==========================================================
   DESKTOP: Canva pages, 1366 × 768, everything in % / cqw
   (1cqw = 13.66px on a 1366px wide screen)
   ========================================================== */
@media (min-width:900px){
  .topbar__logo{width:112px}
  .stage{
    container-type:inline-size;width:100%;max-width:var(--page);margin:0 auto;
    aspect-ratio:1366/768;padding:0;min-height:0;max-height:none;
    display:block!important;
  }
  .stage > *{position:absolute;margin:0}
  .blob{min-height:7cqw;padding:0 3.6cqw;font-size:1.5cqw;box-shadow:0 0 0 .3cqw var(--peri)}
  .stone .blob{box-shadow:0 0 0 .3cqw var(--wine)}

  /* 1. hero */
  .hero .stage{aspect-ratio:1366/620}
  .hero__bg{object-position:50% 40%}
  .hero__nav{top:3.5%;left:auto;right:3.7%;gap:5cqw}
  .hero__nav a{font-size:1.65cqw}
  .hero__logo{left:25%;top:17%;width:50%}
  .hero__tag{left:0;right:0;top:50%;font-size:2.2cqw;line-height:1.1}
  .hero__btn{left:50%;top:67%;translate:-50% 0;margin:0}

  /* 2. intro */
  .intro__head{left:5.7%;top:8%;font-size:3.4cqw;line-height:1.06}
  .intro__lead{left:5.7%;top:31%;width:46%;font-size:2.05cqw}
  .intro__body{left:5.7%;top:47%;width:43%;font-size:1.6cqw;line-height:1.25;gap:1.4cqw}
  .intro__btn{left:12.8%;top:81%}
  .pinboard{left:51.5%;top:17%;width:42%;max-width:none;margin:0}

  /* 3. proof — the receipt hangs from the clip, like the Canva paper */
  .proof .stage{aspect-ratio:1366/680;margin-bottom:calc(9cqw + 20px)}
  .proof .proof__btn{left:50%;top:100%;translate:-50% 0}
  .proof__right{display:flex;flex-direction:column;align-items:center;text-align:center;left:38%;width:58%;top:calc(6% + 20px)}
  .proof__head{font-size:5.4cqw;line-height:1.06}
  .proof__why{margin-top:3.2cqw;gap:1.3cqw}
  .proof .why__disco{width:8cqw}
  .proof .count{font-size:1.75cqw;gap:.8cqw}
  .proof .why__text{font-size:1.75cqw;max-width:34cqw}
  .proof__btn{left:68.2%;top:71%}
  .printer{left:5%;top:calc(6% + 20px);width:28%;--rf:.8cqw}
  .printer__body{height:2.8cqw;border-radius:1cqw}
  .printer__slot{height:.65cqw;margin-top:-.3cqw}
  .feed{margin:-1cqw 7% 0}

  /* 4. parties */
  .parties .stage{padding:0}
  .parties__title{left:3.5%;top:3.5%;font-size:8.78cqw;line-height:1.27;margin:0}
  .party-list{left:8.4%;top:37.2%;width:57.7%;display:grid;grid-template-columns:repeat(3,1fr);gap:.9cqw;overflow:visible;padding:0;margin:0}
  .party{max-width:none}
  .party__photo img{aspect-ratio:260/280}
  .party__info{font-size:1.25cqw;line-height:1.45}
  .sticker{font-size:4.4cqw;right:-.6cqw;bottom:-1cqw}
  .parties__btn{left:72.5%;top:77.6%}

  /* 5. salsa time */
  .salsatime .stage{aspect-ratio:1366/880}
  .salsatime__btn{left:50%;top:84%;translate:-50% 0}
  .salsatime__text{left:28%;right:28%;top:70%;font-size:1.45cqw}
  .filmframe{left:37%;top:5%;width:26%;max-width:none;padding:1.25cqw 2.2cqw}
  .filmframe__side{font-size:.65cqw}
  .filmframe__side--l{left:1.1cqw}
  .filmframe__side--r{right:1.1cqw}
  .salsatime__title{left:0;right:0;top:47%;font-size:7cqw;line-height:.98}

  /* 6. collage (positions measured from the Canva page) */
  .collage .stage{aspect-ratio:1366/880}
  .cl--1{left:0;top:0;width:56.7%;height:60.5%}
  .cl--2{left:56.7%;top:0;width:43.3%;height:38.4%}
  .cl--4{left:68.8%;top:38.4%;width:31.2%;height:61.6%}
  .cl--3{left:0;top:60.5%;width:42.5%;height:39.5%}
  .cl--5{left:42.5%;top:60.5%;width:26.3%;height:39.5%}
  .vinyl{left:50.2%;top:47.4%;width:38.6%}
  .claves{left:55%;top:38%;width:34%}
  .collage__disco{left:83.5%;top:37.8%;width:27%}
  .collage__title{font-size:9cqw}
  .collage__styles{bottom:9%;font-size:1.46cqw}

  /* 7. why (a half page in Canva) */
  .why__in{max-width:var(--page);margin:0 auto;padding:0 0 5vw;gap:1.6vw}
  .why__disco{width:min(9vw,140px)}
  .count{font-size:min(1.9vw,30px)}
  .why__text{font-size:min(1.9vw,30px);max-width:32vw}
  .why .blob{min-height:min(7vw,112px);padding:0 min(3.6vw,58px);font-size:min(1.5vw,24px)}

  /* 8. contact */
  .contact .stage{min-height:0}
  .contact__list{left:62.4%;top:33%;width:34%;gap:2.2cqw}
  .contact__list dt{font-size:1.1cqw}
  .contact__list dd{font-size:2.6cqw}
  .contact__logo{left:41.25%;top:79%;width:17.5%}
  .contact__tag{left:0;right:0;top:91.5%;font-size:1.76cqw}

  /* 9. strip */
  .strip{max-width:none}
  .footer__in{padding-block:min(5vw,80px)}
  .footer .blob{min-height:min(7vw,112px);padding:0 min(3.6vw,58px);font-size:min(1.5vw,24px)}
}

/* ---------- scroll motion (only when JS runs and motion is OK) ---------- */
.js.motion .reveal{opacity:0;translate:0 22px;transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1)}
.js.motion .reveal.is-in{opacity:1;translate:0 0}
.js.motion .feed .receipt{visibility:visible;transform:translateY(-101%)}
.js.motion .feed .receipt.is-printing{animation:feedin 2.2s steps(20) forwards}
.js.motion .feed .receipt.is-shown{transform:none}
.js.motion .feed .receipt.is-dropping{animation:dropout 1s cubic-bezier(.55,0,.85,.55) forwards}
@keyframes feedin{from{transform:translateY(-101%)}to{transform:translateY(0)}}
@keyframes dropout{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(118%) rotate(5deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vinyl,.why__disco{animation:none}
  .blob:hover{transform:none}
  .count span.on,.count .conga.on{transform:none}
}

/* ---------- footer with the dancing logo ---------- */
.footer{scroll-margin-top:100px}
@media (min-width:600px){.footer{scroll-margin-top:64px}}
.flogo{display:flex;align-items:stretch;width:min(78%,460px);aspect-ratio:1274/394}
.fl{display:block;height:100%;background:var(--butter);transform-origin:50% 100%;
  -webkit-mask:url(../img/logo.png) no-repeat;mask:url(../img/logo.png) no-repeat;
  -webkit-mask-size:var(--ms) 100%;mask-size:var(--ms) 100%;
  -webkit-mask-position:var(--mp) 0;mask-position:var(--mp) 0}
.footer__tag{font-family:var(--f-hand);text-transform:uppercase;letter-spacing:.08em;font-size:16px;text-wrap:balance;margin-top:-6px}
.footer__line{margin-top:14px}
.footer__small a{text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  /* 8 beats at 3 beats a second, like the count in the app */
  .fl{animation:hop 2.667s calc(var(--d) * .3333s) ease-out infinite}
  .fl--tick{animation:wink 2.667s 1s ease-out infinite}
}
@keyframes hop{0%{transform:none}5%{transform:translateY(-16%) rotate(-3deg)}11%,100%{transform:none}}
@keyframes wink{0%{transform:none}5%{transform:translateY(-22%) rotate(18deg)}11%,50%{transform:none}55%{transform:translateY(-22%) rotate(18deg)}61%,100%{transform:none}}
@media (min-width:900px){.footer__tag{font-size:min(1.6vw,24px)}.flogo{width:min(36vw,560px)}}

/* ---------- slider: Upcoming parties → Salsa time ---------- */
.slider{position:relative;scroll-margin-top:100px}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.slider__track::-webkit-scrollbar{display:none}
.slider__track:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.slider .collage{display:flex;flex-direction:column}
.slider .collage .stage{flex:1;width:100%}
.slider .collage__styles{bottom:44px}
.slider__nav{position:absolute;left:0;right:0;bottom:16px;z-index:6;display:flex;justify-content:center;gap:10px;pointer-events:none}
.slider__dot{pointer-events:auto;width:12px;height:12px;padding:0;border:2px solid var(--butter);border-radius:999px;background:transparent;cursor:pointer;transition:width .25s,background .25s}
.slider__dot[aria-current="true"]{width:34px;background:var(--butter)}
@media (max-width:899px){.slider .salsatime .stage{padding-bottom:64px}}
@media (min-width:600px){.slider{scroll-margin-top:64px}}
@media (min-width:900px){.slider .collage .stage{flex:none}.slider .collage__styles{bottom:9%}.slider__nav{bottom:2.2%}}
@media (prefers-reduced-motion:reduce){.slider__track{scroll-behavior:auto}}

/* Salsa time: styles line on top, button where it used to be */
.collage .collage__styles,.slider .collage__styles{top:5%;bottom:auto}
.collage__btn{position:absolute;left:50%;bottom:44px;translate:-50% 0;z-index:5}
@media (min-width:900px){
  .slider .collage__styles{top:5%;bottom:auto;font-size:1.6cqw}
  .slider .collage .collage__btn{left:50%;top:auto;bottom:8%;translate:-50% 0}
}

/* parties line + Better with friends */
.intro__body p{text-wrap:pretty}
.salsatime__text{position:relative;z-index:2;color:var(--paper);font-weight:400;font-size:17px;line-height:1.35;text-align:center;max-width:32ch;margin-top:16px;text-wrap:pretty;text-shadow:0 1px 10px rgba(20,4,8,.9)}
.friends{position:absolute;left:50%;top:calc(50% + 8vw);translate:-50% 0;z-index:5;width:min(84%,420px);
  background:rgba(43,12,20,.82);border-radius:var(--wonky);padding:14px 18px;text-align:center;color:var(--paper);font-size:15px;line-height:1.35;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.friends__title{font-family:var(--f-hand);font-size:22px;line-height:1.1;color:var(--tang);margin-bottom:4px}
@media (min-width:900px){
  .salsatime__text{max-width:none;margin:0}
  .slider .friends{top:63%;width:36%;padding:1.2cqw 1.8cqw;font-size:1.3cqw}
  .friends__title{font-size:2cqw}
}
.collage__styles{padding-inline:16px;font-size:12px;line-height:1.5;text-wrap:balance}
@media (min-width:900px){
  .salsatime .stage .salsatime__text{position:absolute;left:28%;right:28%;top:70%;font-size:1.45cqw}
  .slider .collage__styles{font-size:1.6cqw}
}

/* Better with friends: straight on the photos, no card */
.friends,.slider .friends{background:none;box-shadow:none;border-radius:0;padding:0;color:var(--paper);font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 18px rgba(20,4,8,.95)}
.friends__title{color:var(--butter);font-size:26px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(20,4,8,.9)}
@media (min-width:900px){.friends__title{font-size:2.3cqw}.slider .friends{font-size:1.4cqw}}

/* tagline right under the logo (phone) */
@media (max-width:899px){.hero__tag{margin-top:-8px;line-height:1.15}}
/* Better with friends: just above the button */
.friends{top:auto;bottom:118px}
@media (min-width:900px){.slider .friends{top:auto;bottom:calc(8% + 7cqw + 1cqw)}}


/* ---------- slide 1: the app on phones (option B: half stone, half dance photo) ---------- */
.appslide{background:var(--stone);color:var(--ink);display:flex;flex-direction:column}
.appslide .stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:390/720;padding:0;flex:1}
.appslide .photo{position:absolute;left:0;right:0;bottom:0;height:46%;overflow:hidden}
.appslide .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(1.1) contrast(1.05)}
.appslide .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,12,20,.15),rgba(43,12,20,.45))}
.appslide .mono{position:absolute;font-family:var(--f-mono);font-size:max(10px,.9cqw);letter-spacing:.14em;text-transform:uppercase;color:var(--wine);z-index:4}
.appslide .tl{left:4%;top:4%}.appslide .tr{right:4%;top:4%;text-align:right}
.appslide .ml{left:4%;top:38%}.appslide .mr{right:4%;top:38%;text-align:right}
.appslide .ml,.appslide .mr{display:none}
.appslide .applogo{position:absolute;left:50%;top:9%;translate:-50% 0;width:30cqw;z-index:4}
.appslide .ph{position:absolute;border-radius:13.5% / 6.3%;padding:2.4%;background:#0a0a0b;box-shadow:0 0 0 1.5px #3a3a3e,0 0 0 3px #111,0 30px 60px rgba(0,0,0,.45);z-index:2}
.appslide .ph::before{content:"";position:absolute;left:50%;top:2.3%;width:28%;height:3%;translate:-50% 0;border-radius:999px;background:#000;z-index:2}
.appslide .ph img{width:100%;height:auto;aspect-ratio:585/1266;object-fit:cover;object-position:top;border-radius:11.8% / 5.5%}
.appslide .ph--1{left:10%;top:20%;width:40cqw}
.appslide .ph--2{left:50%;top:28%;width:40cqw}
.appslide .ph--3{display:none}
.appslide .appslide__btn{position:absolute;left:50%;bottom:52px;translate:-50% 0;z-index:5}
@media (min-width:900px){
  .appslide .stage{aspect-ratio:1366/880;flex:none}
  .appslide .photo{height:52%}
  .appslide .ml,.appslide .mr{display:block;top:38%}
  .appslide .applogo{width:10cqw;top:4.5%}
  .appslide .ph--1{width:14cqw;left:29%;top:24%}
  .appslide .ph--2{width:15.5cqw;left:42.25%;top:18%;z-index:3}
  .appslide .ph--3{display:block;width:14cqw;left:57%;top:31%}
  .appslide .appslide__btn{bottom:8%}
}
/* slide 1: dark grey top so the black phones stand out, butter type */
.appslide{background:#2A2627;color:var(--butter)}
.appslide .mono{color:var(--butter)}
.appslide .applogo{background:var(--butter)}
.appslide .ph{box-shadow:0 0 0 1.5px #55504f,0 0 0 3px #0a0a0b,0 30px 60px rgba(0,0,0,.6)}
/* phone: no polaroid object, menu row a bit lower */
@media (max-width:899px){
  .pinboard{display:none}
  .intro .stage{padding-bottom:64px}
}
@media (max-width:599px){
  .topbar__nav{padding-top:6px;padding-bottom:4px}
}

/* film frame photo: keep the faces in view */
.filmframe img{object-position:50% 52%}
/* desktop: calmer button size (same as the app's buttons) */
@media (min-width:900px){
  .blob,.why .blob,.footer .blob{min-height:clamp(52px,4.2cqw,62px);padding:0 clamp(24px,2.4cqw,36px);font-size:clamp(15px,1.15cqw,17px);box-shadow:0 0 0 3px var(--peri)}
  .stone .blob{box-shadow:0 0 0 3px var(--wine)}
}