/* Pastel pass (owner 2026-10-20, from two reference sites): pink-and-white stripes, cream linen, a pale
   film-grain sky and pink-lavender clouds, section by section. Photo backgrounds come from Pinterest finds,
   the blue sky is a 4096 px photo softened to pastel, the rest upscaled to 2400 px with fine grain (backgrounds/pastel-*.webp, cream-linen.webp). The night sections
   become light ones. Loaded after landing.css. */
:root{--pink:247,214,230;--sky:200,220,238;--lilac:232,220,240;--cream:247,243,236}
body{background:#f7f2ec;--footer-surface:#f3eef0;--theme-accent:#9a6c8c}
.light em,.closing em,em{color:#9a6c8c}
.progress{background:#e8a9c8}

.hero{background-image:radial-gradient(ellipse 60% 70% at 28% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),repeating-linear-gradient(90deg,#f8d9e8 0 34px,#fffafc 34px 68px)}
.carousel-section{background-image:linear-gradient(rgba(var(--cream),.35),rgba(var(--cream),.35)),url('./backgrounds/cream-linen.webp');background-size:auto,600px}
.templates{background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.14)),url('./backgrounds/pastel-sky-blue.webp?v=2')}
.booth{background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.3)),url('./backgrounds/pastel-cloud-pink.webp')}
.cameras{background-image:linear-gradient(rgba(var(--cream),.3),rgba(var(--cream),.3)),url('./backgrounds/cream-linen.webp');background-size:auto,600px}
.poses{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.2)),url('./backgrounds/pastel-sky-blue-flip.webp')}
.closing{background-image:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.22)),url('./backgrounds/pastel-cloud-pink.webp')}
/* Linen tiles; the blended layer copies background-size from the section. */
.carousel-section.blended-section::after,.cameras.blended-section::after{background-size:auto,600px;background-repeat:repeat}

/* Pink pill buttons, as in the references. */
.hero .button,.booth .button{background:#f4c4dc;border-color:#fff;color:#3d2f33}
.hero .button:hover,.booth .button:hover{background:#f7d3e5}
.gallery-views button[aria-pressed="true"]{background:#f4c4dc}

/* Former night sections: ink text and light cards on the pastel art. */
.booth,.cameras,.poses{background-color:transparent}
.cameras .camera-tag,.cameras .film-caption,.cameras .eyebrow,.cameras .film-index,.cameras .film-item figcaption span{color:#8a5f78}
.cameras .camera-number{color:#e9dccf}
.cameras .film-heading>p:last-child,.cameras .film-item strong{color:#49372e}
.cameras .camera,.cameras .film-item{background:rgba(255,253,250,.55);border-color:rgba(255,255,255,.8)}
.cameras .film-line{border-color:rgba(73,55,46,.16)}

/* Background drift on scroll (landing.js animates --bg-shift). */
main>section.blended-section::after{background-position:center,center calc(50% + var(--bg-shift,0%))}

/* Wavy seams (owner 2026-10-20): each section's background reaches up over the one above along a soft
   scalloped wave, instead of the old soft fade, so the section above hangs down in round bumps. */
main{--blend-depth:24px;--wave-step:72px;
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 24' preserveAspectRatio='none'%3E%3Cpath d='M0 2C14 2 21 22 42 22S70 2 84 2V24H0z'/%3E%3C/svg%3E")}
main>section.blended-section::after{
  -webkit-mask:var(--wave) 0 0/var(--wave-step) var(--blend-depth) repeat-x,linear-gradient(#000 0 0) 0 calc(var(--blend-depth) - 1px)/100% calc(100% - var(--blend-depth) + 1px) no-repeat;
  mask:var(--wave) 0 0/var(--wave-step) var(--blend-depth) repeat-x,linear-gradient(#000 0 0) 0 calc(var(--blend-depth) - 1px)/100% calc(100% - var(--blend-depth) + 1px) no-repeat}
main>section.blended-section:first-child::after{-webkit-mask:none;mask:none}
@media(max-width:700px){main{--blend-depth:16px;--wave-step:48px}}

/* Y2K devices (owner 2026-10-20: the cameras become the app's devices, with how they work and how they send). */
.device-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;max-width:1280px;margin:80px auto 70px;align-items:start}
.device{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:330px;padding:30px 14px 22px;
  border:1px solid rgba(255,255,255,.85);border-radius:140px 140px 22px 22px;background:rgba(255,253,250,.55);
  box-shadow:0 1px 0 #fff inset,0 18px 34px rgba(120,80,100,.12);backdrop-filter:blur(6px)}
.device:nth-child(even){margin-top:50px}
.device .camera-tag{color:#9a6c8c;font:8px Mono,monospace;letter-spacing:.12em;margin-bottom:6px}
.device .camera-number{position:absolute;top:18px;left:50%;translate:-50% 0;font:italic 90px Playfair,Georgia,serif;color:#f2e3dc;z-index:-1}
.device img{height:170px;width:100%;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(70,40,60,.22));transition:scale .45s,rotate .45s}
.device:hover img{scale:1.1;rotate:-5deg}
.device:nth-child(even):hover img{rotate:5deg}
.device figcaption{text-align:center;margin-top:14px}
.device figcaption strong{display:block;font:19px Playfair,Georgia,serif;color:#49372e;margin-bottom:6px}
.device figcaption span{display:block;font-size:11px;line-height:1.5;color:#6b5560}
.device-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1000px;margin:0 auto;padding:0}
.device-steps li{padding:22px 22px 24px;border-radius:20px;background:rgba(255,253,250,.6);border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 26px rgba(120,80,100,.1)}
.device-steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f4c4dc;color:#3d2f33;font:13px Mono,monospace;margin-bottom:12px}
.device-steps strong{display:block;font:20px Playfair,Georgia,serif;color:#49372e;margin-bottom:6px}
.device-steps span{font-size:12px;line-height:1.55;color:#6b5560}
.device-cta{text-align:center;max-width:none;margin:34px auto 90px}
.device-cta .button{background:#f4c4dc;border-color:#fff;color:#3d2f33}
@media(max-width:1000px){.device-row{grid-template-columns:repeat(3,1fr)}.device:nth-child(even){margin-top:0}.device:nth-child(3n+2){margin-top:40px}}
@media(max-width:700px){.device-row{grid-template-columns:repeat(2,1fr);gap:16px;margin:50px auto}.device{min-height:260px;padding:24px 10px 18px}
  .device:nth-child(3n+2){margin-top:0}.device:nth-child(even){margin-top:30px}.device img{height:120px}.device figcaption strong{font-size:16px}
  .device-steps{grid-template-columns:1fr;gap:14px}.device-cta{margin-bottom:60px}}

/* Drifting stickers (landing.js adds them). */
.floaty{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(90,60,80,.18))}
.floaty.cloud{z-index:-1;filter:drop-shadow(0 18px 24px rgba(90,110,150,.12))}
@media(max-width:700px){.floaty{width:56px!important}.floaty.cloud{width:180px!important}}

/* Devices stand on their own (owner 2026-10-20: "remove the small background, just keep the device showcase"). */
.device{background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;min-height:0;padding:0 6px}
.device .camera-number{display:none}
.device img{height:210px;filter:drop-shadow(0 22px 18px rgba(70,40,60,.2))}
@media(max-width:700px){.device img{height:150px}}

/* Floating prints: a photo or template page with a white border. */
.floaty.print{border:6px solid #fffdf8;border-radius:6px;box-shadow:0 14px 30px rgba(80,55,70,.22);filter:none}
.floaty.print:nth-of-type(odd){rotate:-8deg}.floaty.print:nth-of-type(even){rotate:7deg}
@media(max-width:700px){.floaty.print{width:84px!important;border-width:4px}}

/* Film rolls: an endless strip, no cards (landing.js builds .film-track and runs it). */
.film-line .film-shelf{display:block;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:24px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.film-track{display:flex;width:max-content}
.film-line .film-item,.cameras .film-item{flex:0 0 auto;width:230px;margin:0 22px;padding:0;background:none;border:0;box-shadow:none;grid-column:auto;justify-self:auto}
.film-line .film-index{display:none}
.film-line .film-art{height:220px;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.7),transparent 65%)}
.film-line .film-roll{width:130px;height:200px}
.film-line .film-item figcaption{border:0;padding-top:6px}
@media(max-width:700px){.film-line .film-item,.cameras .film-item{width:150px;margin:0 10px}.film-line .film-art{height:150px}.film-line .film-roll{width:90px;height:135px}}

/* How it works: three paper notes taped to the linen, each with its own picture (owner 2026-10-20: "improve more"). */
.device-steps{gap:46px;max-width:1080px;counter-reset:none;position:relative}
.device-steps li.step{position:relative;padding:26px 26px 30px;border-radius:6px;border:0;
  box-shadow:0 1px 1px rgba(80,55,70,.08),0 18px 34px rgba(80,55,70,.14);text-align:center}
.device-steps li.s1{background:#fbe6ef;rotate:-2deg}
.device-steps li.s2{background:#e6eef8;rotate:1.5deg;margin-top:26px}
.device-steps li.s3{background:#efe6f6;rotate:-1deg}
.device-steps li.step::before{content:"";position:absolute;top:-13px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:-3deg;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(80,55,70,.08)}
.device-steps li.step+li.step::after{content:"";position:absolute;left:-40px;top:46%;width:34px;height:2px;
  background:repeating-linear-gradient(90deg,#c99bb6 0 6px,transparent 6px 11px)}
.device-steps b{display:inline-block;width:auto;height:auto;padding:4px 12px;border-radius:99px;background:#fff;color:#9a6c8c;font:10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;margin:14px 0 10px}
.device-steps strong{font-size:24px}
.device-steps span{display:block;max-width:250px;margin:0 auto;font-size:12.5px}
.step-art{height:130px;display:flex;align-items:center;justify-content:center;position:relative}
.art-devices img{height:96px;width:auto;filter:drop-shadow(0 10px 8px rgba(70,40,60,.2));margin:0 -6px}
.art-devices img:nth-child(1){rotate:-10deg;height:86px}.art-devices img:nth-child(2){height:104px;z-index:1}.art-devices img:nth-child(3){rotate:8deg;height:80px}
.art-prints img{width:84px;height:104px;object-fit:cover;border:5px solid #fff;border-bottom-width:16px;box-shadow:0 10px 18px rgba(70,40,60,.18)}
.art-prints img:nth-child(1){rotate:-9deg;margin-right:-18px}.art-prints img:nth-child(2){rotate:7deg}
.art-prints i{position:absolute;top:8px;right:calc(50% - 74px);font-style:normal;color:#e58fb6;font-size:24px;rotate:14deg}
.bubble{background:#fff;border-radius:18px 18px 18px 6px;padding:12px 16px 12px;box-shadow:0 10px 20px rgba(70,40,60,.12);text-align:left;min-width:200px}
.bubble em{display:block;font:italic 15px Playfair,Georgia,serif;color:#9a6c8c}
.bubble .url{display:block;font:10px Mono,monospace;color:#6b8fb8;text-decoration:underline;margin:4px 0 8px;max-width:none}
.bubble .play{display:inline-block;margin:0;padding:5px 12px;border-radius:99px;background:#f4c4dc;color:#3d2f33;font-size:11px;max-width:none}
@media(max-width:700px){.device-steps{gap:30px}.device-steps li.s2{margin-top:0}.device-steps li.step+li.step::after{display:none}}

/* Photobooth: the app's brass printer prints the newest strip as you scroll; the newest frames sit in a swipeable rail. */
.booth .booth-scene{height:auto;min-height:560px;display:flex;align-items:center;justify-content:center}
.printer{position:relative;width:min(340px,70vw);aspect-ratio:700/1050;filter:drop-shadow(0 26px 30px rgba(90,60,90,.22))}
.printer-tray{width:100%;height:100%;border-radius:14px;display:block}
.printer-out{position:absolute;left:16%;right:16%;top:13.6%;bottom:6%;overflow:hidden}
.printer-strip{display:block;width:100%;height:auto;box-shadow:0 8px 16px rgba(40,25,10,.35)}
.booth-rail-wrap{grid-column:1/-1;margin-top:40px;min-width:0}
.booth-rail-wrap .eyebrow{text-align:center;color:#9a6c8c;margin-bottom:10px}
.booth-rail{display:flex;gap:34px;overflow-x:auto;scroll-snap-type:x proximity;padding:30px max(6vw,24px) 40px;margin:0 calc(-1 * max(6vw,24px));
  scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.booth-rail::-webkit-scrollbar{display:none}
.booth-print{flex:0 0 auto;margin:0;scroll-snap-align:center;text-align:center}
.booth-print img{height:340px;width:auto;border-radius:4px;box-shadow:0 18px 30px rgba(90,60,90,.2);transition:scale .35s,rotate .35s}
.booth-print.wide img{height:280px;margin-top:30px}
.booth-print:hover img{scale:1.05;rotate:-2deg}
.booth-print figcaption{font:10px Mono,monospace;letter-spacing:.08em;margin-top:14px;color:#5c4a55}
@media(max-width:700px){.booth .booth-scene{min-height:0}.booth-print img{height:240px}.booth-print.wide img{height:190px;margin-top:25px}.booth-rail{gap:20px}}

/* How it works: one honest line under the devices. */
.device-flow{list-style:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 44px;margin:10px auto 0;padding:0;max-width:1000px}
.device-flow li{position:relative;display:flex;align-items:center;gap:12px;font:20px Playfair,Georgia,serif;color:#49372e}
.device-flow li+li::before{content:"";position:absolute;left:-36px;top:50%;width:26px;height:2px;background:repeating-linear-gradient(90deg,#c99bb6 0 5px,transparent 5px 9px)}
.device-flow b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f4c4dc;color:#3d2f33;font:12px Mono,monospace}
@media(max-width:700px){.device-flow{flex-direction:column;gap:12px}.device-flow li{font-size:17px}.device-flow li+li::before{display:none}}

/* Printer: the strip is a print fitted to the tray's width, cropped so it reads as paper coming out. */
.printer-out{left:15%;right:15%;top:12.6%;bottom:8%}
.printer-strip{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:2px}

/* Wider, softer waves (owner 2026-10-20: "separate a bit, it's too tight"). */
main{--blend-depth:30px;--wave-step:150px}
@media(max-width:700px){main{--blend-depth:20px;--wave-step:96px}}

/* Devices on pastel pedestals (owner 2026-10-20: "too basic, make it pretty and creative"). */
.device-row{gap:30px 18px;margin:70px auto 60px}
.device{padding:0 4px 0;gap:0}
.device::before{content:"";position:absolute;left:50%;top:40px;width:190px;height:190px;translate:-50% 0;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,var(--glow,#f8d6e6) 0%,transparent 68%);opacity:.95}
.device:nth-child(6n+1){--glow:#f9d3e4;--pod:#f6c9dc;--tape:#f7c6db}
.device:nth-child(6n+2){--glow:#d6e5f6;--pod:#c9dcf1;--tape:#c8dcf2}
.device:nth-child(6n+3){--glow:#e9dcf6;--pod:#ddcdf0;--tape:#e0d0f2}
.device:nth-child(6n+4){--glow:#fbe3d3;--pod:#f6d5c2;--tape:#f8d8c5}
.device:nth-child(6n+5){--glow:#dcefe0;--pod:#cbe6d2;--tape:#cfe8d6}
.device:nth-child(6n+6){--glow:#f6e7c6;--pod:#efdcae;--tape:#f3e0b6}
.device .camera-tag{display:inline-block;align-self:center;padding:5px 12px;margin:0 0 14px;background:var(--tape);color:#5c3f52;rotate:-3deg;
  font:9px Mono,monospace;letter-spacing:.14em;box-shadow:0 2px 4px rgba(80,55,70,.1);-webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0)}
.device:nth-child(even) .camera-tag{rotate:3deg}
.device img{position:relative;z-index:1;height:190px;margin-bottom:-26px}
.device .pod{display:block;position:relative;width:150px;height:46px;margin:0 auto}
.device .pod::before{content:"";position:absolute;inset:14px 0 0;border-radius:0 0 50% 50%/0 0 26px 26px;background:linear-gradient(180deg,var(--pod),color-mix(in srgb,var(--pod) 80%,#7a5a6a))}
.device .pod::after{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-radius:50%;background:linear-gradient(180deg,#fff,var(--pod));box-shadow:inset 0 -3px 6px rgba(255,255,255,.7)}
.device figcaption{margin-top:16px}
.device figcaption strong{font-style:italic}
.device::after{content:"✦";position:absolute;top:34px;right:22%;color:#fff;font-size:18px;text-shadow:0 0 10px var(--pod);opacity:.95}
@media(max-width:700px){.device::before{width:140px;height:140px}.device img{height:130px;margin-bottom:-20px}.device .pod{width:110px}}

/* Hero: the app's music player and flip phone sit beside the newest recaps without covering them. */
.hero .hero-camera{width:27%;left:-6%;bottom:30px;rotate:-6deg}
.hero .hero-film{width:13%;right:2%;bottom:40px}
@media(max-width:700px){.hero .hero-camera{width:30%;left:0}.hero .hero-film{width:15%}}

/* Smooth scrolling (owner 2026-10-20: "it's kinda lag"): nothing that moves carries a filter, moving layers get their own
   compositor layer, and the seam layers stay still. */
main>section.blended-section::after{background-position:center}
.floaty{will-change:transform;filter:none}
.floaty.cloud{filter:none}
.floaty.print{box-shadow:0 10px 22px rgba(80,55,70,.18)}
.film-track,.printer-strip,.story-slide,.booth-print img,.device,.template-card{will-change:transform}
.nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* No dark shadows in the photobooth (owner 2026-10-20: "remove all these black"). */
.printer{filter:none}
.printer-tray{box-shadow:0 18px 40px rgba(170,120,170,.22)}
.printer-strip{box-shadow:none}
.booth-print img{box-shadow:0 14px 26px rgba(170,120,170,.2)}
.booth .booth-sticker img{filter:none}

/* How it works, said simply (owner 2026-10-20: "make it less AI generated"). */
.device-note{max-width:620px;margin:0 auto;text-align:center;font:italic 22px/1.5 Playfair,Georgia,serif;color:#5a4650}
.device-note em{color:#9a6c8c}

/* ByFlashback script wordmark in the corner (owner 2026-10-20). Yellowtail, OFL/Apache, served locally. */
@font-face{font-display:swap;font-family:Yellowtail;src:url('./fonts/Yellowtail-Regular.ttf') format('truetype')}
.script-brand{gap:2px;align-items:flex-start;text-decoration:none}
.script-brand span{font:400 34px/1 Yellowtail,cursive;letter-spacing:0;color:#d68bb2;rotate:-6deg;display:inline-block;padding:2px 4px 6px;
  text-shadow:0 1px 0 #fff,0 2px 8px rgba(214,139,178,.25)}
.script-brand i{font-style:normal;color:#e7a9c8;font-size:15px;margin-top:-4px;rotate:-6deg}
@media(max-width:700px){.script-brand span{font-size:28px}}

/* Devices stand on real ceramic risers (Grok Imagine photo, cut out); the drawn glow, sparkle and pedestal are gone. */
.device::before,.device::after{content:none}
.device .riser{display:block;position:relative;z-index:0;width:150px;height:auto;margin:-30px auto 0;filter:none;
  box-shadow:none;-webkit-filter:drop-shadow(0 10px 10px rgba(110,90,80,.14))}
.device img:not(.riser){margin-bottom:-6px}
.device .camera-tag{background:none;box-shadow:none;-webkit-mask:none;rotate:0deg;padding:0;margin:0 0 12px;color:#9a6c8c;letter-spacing:.18em}
@media(max-width:700px){.device .riser{width:110px;margin-top:-22px}}

/* Wordmark sits straighter and lower; the nav is pink paper with a white script, like the owner's card (2026-10-20). */
.nav{background-color:#f6d6e4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav nav a{color:#fff}
.script-brand{align-items:center}
.script-brand span{color:#fff;rotate:-3deg;padding:6px 4px 4px;text-shadow:none}
.script-brand i{color:#fff;margin-top:-14px;rotate:0deg}
.nav .button{background:rgba(255,255,255,.9);color:#7c4a64;border-color:#fff}

/* Blue sky clouds pass in front of the gallery edges as they sail by. */
#templates .floaty.cloud{z-index:2;opacity:.95}
#templates .template-card{position:relative;z-index:1}

/* Nav: a smooth glossy rim around the edge; the paper texture stays inside it. */
.nav{border:5px solid rgba(255,246,250,.7);background-clip:padding-box;
  box-shadow:0 0 0 1px rgba(214,150,185,.35),inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.35),0 10px 26px rgba(150,90,125,.14)}
#templates .floaty.cloud{z-index:0}
#templates .template-collection{position:relative;z-index:1}

/* Film rolls stand level in one line. */
.film-track{align-items:flex-end}
.film-line .film-art{align-items:flex-end}
.film-line .film-roll{transform:none!important;rotate:0deg!important}

/* Clouds never cover content: every section's own content sits above them. */
main>section>*:not(.floaty){position:relative;z-index:1}
.floaty.cloud{z-index:0!important}

/* Cute scalloped cake stands (Grok Imagine photos, cut out) hold the devices. */
.device .riser{width:170px;margin-top:-58px;-webkit-filter:none}
.device img:not(.riser){position:relative;z-index:2}
@media(max-width:700px){.device .riser{width:120px;margin-top:-40px}}

/* Each device sits on a fluffy cloud (owner 2026-10-20: "replace by the cloud holder"). */
.device .riser.cloud-seat{width:230px;max-width:none;margin:-70px auto 0;position:relative;left:50%;translate:-50% 0;z-index:3;pointer-events:none}
.device img:not(.riser){z-index:2}
@media(max-width:700px){.device .riser.cloud-seat{width:160px;margin-top:-48px}}

/* What each device carries: a real photo pinned beside it like a polaroid (Pinterest couple photos). */
.keepsake{position:absolute;top:40px;right:2%;z-index:4;width:92px;padding:6px 6px 20px;background:#fffdf8;rotate:8deg;
  box-shadow:0 10px 20px rgba(110,80,95,.18);pointer-events:none}
.device:nth-child(even) .keepsake{right:auto;left:2%;rotate:-8deg}
.keepsake img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:none;margin:0}
.keepsake::before{content:"";position:absolute;top:-8px;left:50%;width:40px;height:14px;translate:-50% 0;rotate:-4deg;background:rgba(244,196,220,.75)}
@media(max-width:700px){.keepsake{width:64px;padding:4px 4px 14px;top:30px}}

/* The cloud cradles the device: a puff behind it, the device sunk in, a puff in front over its base. */
.seat{position:relative;display:flex;justify-content:center;align-items:flex-end;height:250px;width:100%;will-change:transform}
.seat>img:not(.cloud-back):not(.cloud-front){position:relative;z-index:2;height:190px;width:auto;max-width:92%;margin:0 0 54px;object-fit:contain}
.seat .cloud-back{position:absolute;z-index:1;bottom:40px;left:50%;width:250px;translate:-50% 0;opacity:.9;margin:0;height:auto}
.seat .cloud-front{position:absolute;z-index:3;bottom:0;left:50%;width:240px;translate:-50% 0;transform-origin:50% 90%;margin:0;height:auto}
.device:hover img{scale:1;rotate:0deg}
@media(max-width:700px){.seat{height:180px}.seat>img:not(.cloud-back):not(.cloud-front){height:130px;margin-bottom:38px}.seat .cloud-back,.seat .cloud-front{width:170px}.seat .cloud-back{bottom:28px}}
.device .seat .cloud-back,.device .seat .cloud-front{position:absolute}
.device .seat .cloud-back{bottom:8px;width:210px;z-index:1;opacity:.85}
.device .seat .cloud-front{z-index:3}
.device .seat>img:not(.cloud-back):not(.cloud-front){z-index:2}

/* Real star sequins instead of drawn sparkles. */
.spark{width:52px;height:auto;text-shadow:none}
.spark.s2{width:40px}
.floaty.star{z-index:2!important;filter:none}
@media(max-width:700px){.floaty.star{width:26px!important}}

/* Seat, final: device standing in the row, clouds sized to it by landing.js (owner: "the cloud must fit the device size"). */
.device .seat{height:auto;min-height:0;display:block;position:relative;width:100%;text-align:center;padding-bottom:0}
.device .seat>img.dev{position:relative;z-index:2;display:block;margin:0 auto;height:170px;width:auto;max-width:90%;object-fit:contain}
.device .seat>img.cloud-back,.device .seat>img.cloud-front{position:absolute;left:50%;translate:-50% 0;height:auto;max-width:none;margin:0;pointer-events:none}
.device .seat>img.cloud-back{z-index:1;bottom:6%;opacity:.8}
.device .seat>img.cloud-front{z-index:3;bottom:-22%;transform-origin:50% 80%}
.device figcaption{margin-top:34px}
@media(max-width:700px){.device .seat>img.dev{height:120px}}
.device .seat{margin-bottom:24px}

/* Real camera-filter glints that twinkle (owner: "blink blink bling"). */
.spark{width:64px;height:auto;mix-blend-mode:screen;text-shadow:none}
.floaty.glint{z-index:2!important;mix-blend-mode:screen;width:64px!important}
@media(max-width:700px){.floaty.glint{width:44px!important}}

/* Footer: pink paper like the nav, with clouds and glints. */
footer.paper-foot{position:relative;overflow:hidden;color:#fff;background-color:#f6d6e4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  padding-top:calc(60px + var(--blend-depth,30px));padding-bottom:60px}
footer.paper-foot>*:not(.foot-cloud):not(.foot-glint){position:relative;z-index:2}
footer.paper-foot a,footer.paper-foot .foot-line{color:#fff}
footer.paper-foot small{color:#fff;opacity:.85}
footer.paper-foot .foot-line{font:italic 20px Playfair,Georgia,serif}
.foot-cloud{position:absolute;z-index:1;pointer-events:none;opacity:.9}
.foot-cloud.c1{width:300px;left:-60px;bottom:-60px}.foot-cloud.c2{width:260px;right:-50px;top:-30px}
.foot-glint{position:absolute;z-index:1;width:56px;mix-blend-mode:screen;animation:twinkle 2.6s ease-in-out infinite}
.foot-glint.g1{left:38%;top:18%}.foot-glint.g2{right:24%;bottom:16%;animation-delay:1.1s}
@keyframes twinkle{0%,100%{opacity:.2;scale:.5}50%{opacity:1;scale:1}}

/* Clouds stay under the device and never over its words. */
.device figcaption,.device .camera-tag{position:relative;z-index:5}
.device .seat{overflow:visible;isolation:isolate}
.device .seat>img.cloud-front{max-height:120px;object-fit:contain;object-position:top}
/* Footer links readable: deep plum pills, cloud moved off them. */
footer.paper-foot div a{color:#6b3a55;background:rgba(255,255,255,.85);padding:6px 14px;border-radius:99px;font-weight:600}
.foot-cloud.c2{top:auto;bottom:-90px;right:-90px;width:220px;opacity:.7}
/* Footer meets the closing section along the same wave as every other seam. */
footer.paper-foot{margin-top:calc(-1 * var(--blend-depth,30px));
  -webkit-mask:var(--wave) 0 0/var(--wave-step) var(--blend-depth) repeat-x,linear-gradient(#000 0 0) 0 calc(var(--blend-depth) - 1px)/100% calc(100% - var(--blend-depth) + 1px) no-repeat;
  mask:var(--wave) 0 0/var(--wave-step) var(--blend-depth) repeat-x,linear-gradient(#000 0 0) 0 calc(var(--blend-depth) - 1px)/100% calc(100% - var(--blend-depth) + 1px) no-repeat}

footer.paper-foot{--blend-depth:30px;--wave-step:150px;--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 24' preserveAspectRatio='none'%3E%3Cpath d='M0 2C14 2 21 22 42 22S70 2 84 2V24H0z'/%3E%3C/svg%3E")}

/* See it move */
.see-move{position:relative;z-index:6;display:block;margin:18px auto 0;padding:7px 16px;border:1px solid #fff;border-radius:99px;background:#f4c4dc;color:#3d2f33;font:600 12px Diary,sans-serif;cursor:pointer;box-shadow:0 6px 14px rgba(150,90,125,.15);transition:transform .2s}
.see-move:hover{transform:translateY(-2px)}
.move-dialog{border:0;border-radius:24px;padding:14px;width:min(520px,92vw);background:linear-gradient(#fbe6ef,#e6eef8);box-shadow:0 30px 80px rgba(80,50,70,.35)}
.move-dialog::backdrop{background:rgba(60,40,55,.45);backdrop-filter:blur(6px)}
.move-dialog iframe{display:block;width:100%;height:min(560px,70vh);border:0;border-radius:16px;background:transparent}
.move-dialog p{text-align:center;margin:10px auto 0;font-size:12px;color:#6b5560}
.move-dialog .close{display:block;margin:0 0 8px auto;width:36px;height:36px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}

/* Bling: real charms, with glints that read on light paper too. */
.floaty.gem{z-index:2!important;filter:drop-shadow(0 6px 8px rgba(150,90,125,.22))}
.floaty.glint{mix-blend-mode:normal;filter:drop-shadow(0 0 6px rgba(255,190,225,.9)) saturate(1.4)}
.spark{mix-blend-mode:normal;filter:drop-shadow(0 0 6px rgba(255,190,225,.9))}
@media(max-width:700px){.floaty.gem{width:30px!important}.floaty.glint{width:40px!important}}

/* Live device models sit exactly over the still and take over once drawn. */
.seat .live-model{position:absolute;z-index:2;left:50%;bottom:-20px;width:300px;height:280px;translate:-50% 0;border:0;background:transparent;opacity:0;transition:opacity .6s;pointer-events:none}
.seat.is-live .live-model{opacity:1}
.seat.is-live .dev{opacity:0;transition:opacity .6s}
@media(max-width:700px){.seat .live-model{width:220px;height:210px}}
.floaty.glint{width:auto}
.floaty.glint{max-width:56px}
.floaty.glint{z-index:0!important}

/* Hero collage: three recap pages fanned like prints taped to the stripes, the music player leaning on them, the flip phone tucked in front. */
.hero .hero-scene .hero-card{transform:none;border-width:8px;border-radius:14px;box-shadow:0 18px 34px rgba(120,70,100,.22)}
.hero .hero-scene .hero-card::before{content:"";position:absolute;z-index:3;top:-12px;left:50%;width:84px;height:24px;translate:-50% 0;rotate:-4deg;
  background:rgba(244,196,220,.8);box-shadow:0 2px 5px rgba(120,70,100,.12)}
.hero .hero-scene .hero-card{overflow:visible}.hero .hero-scene .hero-card img{border-radius:6px}
.hero .hero-scene .hc0{left:2%;top:70px;width:40%;rotate:-9deg;z-index:1}
.hero .hero-scene .hc2{left:auto;right:0;top:30px;width:40%;rotate:8deg;z-index:1}
.hero .hero-scene .hc1{left:29%;top:170px;width:42%;rotate:2deg;z-index:2}
.hero .hero-scene .hc2::before{background:rgba(200,220,240,.85);rotate:5deg}
.hero .hero-scene .hc1::before{background:rgba(232,220,240,.9)}
.hero .hero-scene .hero-camera{left:-2%;bottom:20px;width:26%;rotate:-14deg;transform:none;z-index:4}
.hero .hero-scene .hero-film{right:8%;bottom:40px;width:12%;rotate:16deg;transform:none;z-index:4}
.hero .hero-scene .handnote{left:34%;bottom:-6px;rotate:-5deg;transform:none;z-index:5;font-size:26px;color:#9a6c8c}
.hero .hero-scene .spark.s1{top:4%;left:44%}.hero .hero-scene .spark.s2{bottom:20%;right:24%}
@media(max-width:700px){.hero .hero-scene .hero-card::before{width:56px;height:18px}.hero .hero-scene .handnote{left:24%;font-size:20px}}
.booth-rail{overflow:hidden;scroll-snap-type:none}
.booth-track{display:flex;gap:34px;width:max-content;align-items:flex-start}
.booth-print{margin:0}
@media(max-width:700px){.booth-track{gap:20px}}

/* Real torn washi tape on the hero prints. */
.hero .hero-scene .hero-card::before{width:110px;height:38px;background:url('./media/tape/pink.webp') center/contain no-repeat;box-shadow:none;top:-18px}
.hero .hero-scene .hc2::before{background-image:url('./media/tape/blue.webp')}
.hero .hero-scene .hc1::before{background-image:url('./media/tape/lilac.webp');width:96px}
@media(max-width:700px){.hero .hero-scene .hero-card::before{width:70px;height:26px;top:-12px}}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}

/* One stage, one live device at a time. */
.device-stage{position:relative;z-index:1;max-width:560px;margin:50px auto 10px;text-align:center}
.stage-box{position:relative;height:420px;border-radius:30px;background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%)}
.stage-box .stage-still{position:absolute;z-index:2;left:50%;bottom:70px;translate:-50% 0;max-height:300px;max-width:80%;object-fit:contain;transition:opacity .6s}
.stage-box .live-model{position:absolute;z-index:2;inset:0 0 40px;width:100%;height:calc(100% - 40px);border:0;background:transparent;opacity:0;transition:opacity .6s;pointer-events:none}
.device-stage.is-live .live-model{opacity:1}.device-stage.is-live .stage-still{opacity:0}
.stage-box .stage-cloud{position:absolute;z-index:3;left:50%;bottom:-10px;width:380px;translate:-50% 0;pointer-events:none}
.stage-name{max-width:none;margin:6px 0 0;font:italic 30px Playfair,Georgia,serif;color:#49372e}
.stage-hint{max-width:none;margin:4px 0 0;font:10px Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9a6c8c}
.device{cursor:pointer;transition:opacity .3s}
.device.on-stage{opacity:.45}
@media(max-width:700px){.stage-box{height:320px}.stage-box .stage-still{max-height:220px}.stage-box .stage-cloud{width:280px}}

/* Tighter devices section: a smaller stage and the whole row of six visible under it. */
#cameras .section-heading{margin-bottom:10px}
.device-stage{margin:10px auto 0;max-width:460px}
.stage-box{height:300px}
.stage-box .stage-still{max-height:210px;bottom:56px}
.stage-box .stage-cloud{width:300px;bottom:-6px}
.stage-name{font-size:24px;margin-top:0}
.device-row{grid-template-columns:repeat(6,1fr);gap:10px;margin:24px auto 30px}
.device:nth-child(n){margin-top:0}
.device .seat>img.dev{height:110px}
.device figcaption{margin-top:18px}
.device figcaption strong{font-size:16px}
.device figcaption span{font-size:10.5px}
@media(max-width:700px){.stage-box{height:240px}.stage-box .stage-still{max-height:160px}.device-row{grid-template-columns:repeat(3,1fr)}.device .seat>img.dev{height:80px}}

/* Photobooth sits on the same pink paper as the nav bar. */
.booth{--section-background:none;background-color:#f6d6e4!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")!important;background-size:220px!important;background-repeat:repeat!important}
.booth.blended-section::after{background-color:#f6d6e4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");background-size:220px;background-repeat:repeat}
.booth .button{background:#fff;color:#7c4a64;border-color:#fff}
/* Lighter pastel pink: words on it go plum so they stay readable; the script keeps its white with a soft pink edge. */
.nav nav a{color:#8a5274}
.script-brand span,.script-brand i{text-shadow:0 1px 2px rgba(190,110,150,.55),0 0 1px rgba(190,110,150,.6)}
footer.paper-foot,footer.paper-foot .foot-line,footer.paper-foot small{color:#8a5274}

/* New type (owner 2026-10-20: "change the font, I don't like this old font"): Bricolage Grotesque for headings,
   Yellowtail script for the pink accent lines, matching the ByFlashback wordmark. Both open-licensed, served locally. */
@font-face{font-display:swap;font-family:Bricolage;src:url('./fonts/BricolageGrotesque.ttf') format('truetype');font-weight:200 800}
h1,h2,h3,.stage-name,.device figcaption strong,.film-item strong,.device-note,.collection-heading h3{font-family:Bricolage,Diary,sans-serif!important;font-style:normal;letter-spacing:-.03em;font-weight:700}
h1 em,h2 em,h3 em,.device-note em,.handnote,.closing em{font-family:Yellowtail,cursive!important;font-weight:400;font-style:normal;letter-spacing:0;color:#d68bb2}
h1 em,h2 em{font-size:1.08em;line-height:1.1}
.stage-name,.device figcaption strong{font-weight:600}
.device-note{font-weight:500;font-size:20px}
.handnote{font-size:30px}
footer.paper-foot .foot-line{font-family:Yellowtail,cursive;font-style:normal;font-size:24px}
/* Footer words in brown. */
footer.paper-foot .foot-line,footer.paper-foot small,footer.paper-foot div a{color:#433326}
footer.paper-foot .script-brand span,footer.paper-foot .script-brand i{color:#433326;text-shadow:none}
/* Footer: brown paper, white words (owner 2026-10-20). */
footer.paper-foot{background-color:#433326!important}
footer.paper-foot .foot-line,footer.paper-foot small,footer.paper-foot .script-brand span,footer.paper-foot .script-brand i{color:#fff}
footer.paper-foot div a{color:#433326;background:#fff}
.foot-cloud{opacity:.55}
/* One brown everywhere: the closing buttons' #433326. */
footer.paper-foot{background-color:#433326!important}
.button:not(.small){border-color:rgba(255,243,216,.6)}
.closing .button,.device-cta .button{background:#433326;color:#fff9ec}
.closing .button:hover,.device-cta .button:hover{background:#594332}

/* Glowing sparkle cursor. */
html.has-spark-cursor,html.has-spark-cursor *{cursor:none!important}
.spark-cursor{position:fixed;left:0;top:0;z-index:9999;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ffc6e0) drop-shadow(0 0 18px #f7a8cc);will-change:transform;animation:spark-pulse 1.6s ease-in-out infinite}
.spark-cursor svg,.spark-trail svg{display:block;width:100%;height:100%}
@keyframes spark-pulse{50%{scale:.8;rotate:45deg}}
.spark-trail{position:fixed;z-index:9998;width:10px;height:10px;margin:-5px 0 0 -5px;pointer-events:none;filter:drop-shadow(0 0 5px #ffc6e0);animation:spark-fade .7s ease-out forwards}
@keyframes spark-fade{to{opacity:0;scale:.2;translate:0 14px;rotate:90deg}}
/* Cursor: bigger, centred exactly on the pointer, glow stronger. */
.spark-cursor{width:36px;height:36px;margin:-18px 0 0 -18px;transform:none!important;will-change:left,top;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ff9ccc) drop-shadow(0 0 16px #f58bbd)}
.spark-trail{width:14px;height:14px;margin:-7px 0 0 -7px}
/* Nav: brown paper, bigger white words (owner 2026-10-20). */
.nav{background-color:#433326!important;border-color:rgba(255,243,230,.35)!important;box-shadow:0 0 0 1px rgba(67,51,38,.4),inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(67,51,38,.22)!important}
.nav nav{gap:34px}
.nav nav a{color:#fff!important;font-size:16px;font-weight:600}
.nav .script-brand span{color:#fff;font-size:38px;text-shadow:none}
.nav .script-brand i{color:#fff;text-shadow:none}
.nav .button{background:#fff!important;color:#433326!important;font-size:14px;font-weight:600}
.progress{background:#f4c4dc}
@media(max-width:700px){.nav .script-brand span{font-size:30px}}
/* Wordmark sits optically centred in the bar: level, no extra padding, nudged up for the script's descenders. */
.nav{padding-top:10px;padding-bottom:10px;align-items:center}
.nav .script-brand{align-items:center;height:52px}
.nav .script-brand span{rotate:0deg;padding:0 4px;line-height:1;translate:0 -4px}
.nav .script-brand i{margin-top:0;align-self:flex-start;translate:0 2px}
@media(max-width:700px){.nav .script-brand{height:42px}}
/* Nav: frosted brown glass, the page blurs through it. */
.nav{background-color:rgba(67,51,38,.55)!important;background-image:none!important;
  backdrop-filter:blur(18px) saturate(1.3)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3)!important;
  border-color:rgba(255,255,255,.35)!important}
/* Same dark brown, just slightly see-through with a blur behind. */
.nav{background-color:rgba(52,38,28,.86)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}

/* Nav: clear liquid glass (owner 2026-10-20: "transparent glass water liquid, not the whole brown").
   Nearly clear, strong blur and saturation, a bright rim and inner light like a water drop; the brown moves to the words. */
.nav{background-color:rgba(255,255,255,.14)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.06) 55%,rgba(255,255,255,.18))!important;
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.05)!important;-webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.05)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 18px rgba(255,255,255,.25),0 10px 30px rgba(67,51,38,.16)!important}
.nav nav a{color:#433326!important}
.nav .script-brand span,.nav .script-brand i{color:#433326;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.nav .button{background:#433326!important;color:#fff!important;border-color:transparent!important}
/* Click burst */
.spark-bit{position:fixed;z-index:9997;pointer-events:none}
.spark-bit svg{display:block;width:100%;height:100%}
.spark-flash{position:fixed;z-index:9996;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,214,234,.6) 35%,rgba(255,214,234,0) 70%);animation:spark-flash .6s ease-out forwards}
@keyframes spark-flash{from{scale:.2;opacity:1}to{scale:1.6;opacity:0}}
/* Floating clouds and prints may hang past the side of the window, but the page itself never grows wider than it:
   on an iPhone a wider page made Safari zoom the whole landing out (owner 2026-10-20 screenshot). */
main{overflow-x:clip}