@font-face{font-family:"Caveat";font-weight:700;font-display:swap;src:url(assets/fonts/caveat-700.woff2) format("woff2")}
@font-face{font-family:"Sigmar One";font-display:swap;src:url(assets/fonts/sigmar-one.woff2) format("woff2")}

:root{
  --ink:#16140f; --ink-2:#221e17; --paper:#fcf3cd; --yellow:#fcc14c; --red:#f3312d; --white:#fffaf0;
  --s1:#fbce3a; --s2:#fca939; --s3:#f98437; --s4:#ff5c2b; --s5:#fb2434; --s6:#e41989; --s7:#b82a88; --s8:#933285; --s9:#683686;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:min(1180px,100% - 48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font:400 18px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(2.75rem,7.2vw,6.4rem)}
h2{font-size:clamp(2.25rem,5.4vw,4.6rem)}
.lede{margin:20px 0 0;font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.45;opacity:.78;max-width:34ch;text-wrap:pretty}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--s1);outline-offset:3px;border-radius:6px}

/* Film grain over everything */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}100%{transform:translate(3%,-1%)}}

/* Stripes (the banner from the original site) */
.stripes{display:grid;grid-auto-rows:8px}
.stripes i{display:block}
.stripes i:nth-child(1){background:var(--s1)}.stripes i:nth-child(2){background:var(--s2)}.stripes i:nth-child(3){background:var(--s3)}
.stripes i:nth-child(4){background:var(--s4)}.stripes i:nth-child(5){background:var(--s5)}.stripes i:nth-child(6){background:var(--s6)}
.stripes i:nth-child(7){background:var(--s7)}.stripes i:nth-child(8){background:var(--s8)}.stripes i:nth-child(9){background:var(--s9)}

/* Buttons */
.badge{display:inline-flex;align-items:center;gap:10px;padding:11px 22px 11px 18px;border-radius:14px;background:#000;color:#fff;text-decoration:none;
  border:1px solid rgb(255 255 255/.28);box-shadow:0 14px 40px -14px rgb(0 0 0/.7);transition:transform .25s var(--ease),box-shadow .25s}
.badge span{display:flex;flex-direction:column;font:600 22px/1 var(--sans);letter-spacing:-.02em}
.badge small{font-size:11.5px;font-weight:500;letter-spacing:0;margin-bottom:3px}
.badge:hover{transform:translateY(-2px);box-shadow:0 20px 50px -14px rgb(0 0 0/.85)}
.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:#000;color:#fff;border-radius:999px;font-weight:600}
.btn-sm{padding:8px 14px 8px 12px;font-size:14px}

/* Dock: appears after the hero */
.dock{width:max-content;max-width:calc(100% - 24px);position:fixed;z-index:50;top:14px;left:50%;display:flex;align-items:center;gap:22px;padding:6px 6px 6px 8px;border-radius:999px;
  background:rgb(22 20 15/.62);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgb(255 255 255/.12);
  transform:translate(-50%,-140%);transition:transform .5s var(--ease)}
.dock-on .dock{transform:translate(-50%,0)}
.dock-brand{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em}
.dock-brand img{border-radius:8px}
.dock .btn{background:var(--white);color:var(--ink)}

/* Top: banner + hero on the desk */
.top{position:relative;background:#2a1a0e url(assets/vintage-camera-wood-desk.webp) center/cover;isolation:isolate;overflow:hidden}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 50% 55%,rgb(0 0 0/.05),rgb(0 0 0/.62)),linear-gradient(rgb(0 0 0/.25),transparent 40%)}
.banner{position:relative;padding:34px 0 0}
.banner .stripes{box-shadow:0 6px 18px rgb(0 0 0/.35)}
.banner-24{position:absolute;left:50%;top:20px;height:100px;width:auto;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(0 6px 10px rgb(0 0 0/.35))}
.hero{width:var(--wrap);margin:0 auto;padding:clamp(64px,9vw,120px) 0 clamp(56px,8vw,110px);display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(40px,6vw,72px)}
.hero-copy{min-width:0;width:100%}
.hero h1{text-shadow:0 4px 30px rgb(0 0 0/.45)}
.hero .lede{margin-inline:auto;opacity:.86}
.hero .badge{margin-top:32px}
.desk{position:relative;width:100%;max-width:900px;min-width:0}
.keys{position:absolute;width:30%;height:auto;left:-16%;bottom:-24%;transform:rotate(-14deg);filter:drop-shadow(0 18px 18px rgb(0 0 0/.5));pointer-events:none}

/* The camera, built from the Figma art layers. 1 Figma px = var(--u). */
.camera{--u:calc(100cqw/900);all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:900/415.64;container-type:inline-size;
  background:var(--yellow);overflow:hidden;border-radius:calc(var(--u)*14);cursor:pointer;transform:rotate(-2.5deg);
  box-shadow:0 2px 0 #fde3a0 inset,0 40px 60px -20px rgb(0 0 0/.65),0 12px 24px -8px rgb(0 0 0/.5);transition:transform .6s var(--ease)}
.camera:hover{transform:rotate(-1.5deg) translateY(-4px)}
.camera:active{transform:rotate(-1.5deg) scale(.995)}
.camera:focus-visible{outline:3px solid var(--s1);outline-offset:6px}
.camera>span,.camera>img{position:absolute;display:block;pointer-events:none}
.camera img{display:block;width:100%;height:100%;object-fit:cover}
.cam-lines{top:23.2%;right:.12%;bottom:17.6%;left:0}
.cam-lines img{position:absolute;left:0;top:-3.83%;width:100%;height:107.66%;object-fit:fill}
.cam-lines .mul{mix-blend-mode:multiply}
.cam-lens-bg{right:0;top:calc(var(--u)*130.79);width:calc(var(--u)*360.222);height:calc(var(--u)*180.665);background:#171717;overflow:hidden;
  border-radius:calc(var(--u)*77.586) 0 0 calc(var(--u)*77.586);box-shadow:calc(var(--u)*-1.108) calc(var(--u)*.665) 0 rgb(255 248 219/.73),inset calc(var(--u)*1.108) calc(var(--u)*3.325) calc(var(--u)*2.217) rgb(0 0 0/.95)}
.cam-lens-bg .paper-ov{position:absolute;inset:0;mix-blend-mode:overlay;background:url(assets/film-print-envelope-paper-texture.webp) 0 38.8%/249.54% 331.74% no-repeat}
.cam-lens{right:calc(var(--u)*148.52);top:calc(var(--u)*138.55);width:calc(var(--u)*201.724);height:calc(var(--u)*162.931);transform:rotate(180deg);
  box-shadow:0 calc(var(--u)*4.433) calc(var(--u)*4.433) rgb(0 0 0/.25)}
.cam-lens::after{content:"";position:absolute;inset:0;box-shadow:inset calc(var(--u)*.554) calc(var(--u)*.333) calc(var(--u)*11.084) calc(var(--u)*8.867) rgb(21 21 21/.92)}
.cam-print{right:calc(var(--u)*21.06);top:calc(var(--u)*373.52);font:700 italic calc(var(--u)*16.459)/1.115 var(--sans);color:rgb(21 21 21/.92);white-space:nowrap}
.cam-paper{inset:0 0 0 .12%;background:url(assets/film-print-envelope-paper-texture.webp) center/cover;mix-blend-mode:multiply;opacity:.37}
.cam-flash{right:calc(var(--u)*24.38);top:calc(var(--u)*15.52);width:calc(var(--u)*87.562);height:calc(var(--u)*59.852);border-radius:calc(var(--u)*7.759);overflow:hidden;
  box-shadow:calc(var(--u)*1.108) calc(var(--u)*2.217) calc(var(--u)*1.108) rgb(0 0 0/.9),0 0 calc(var(--u)*4.433) calc(var(--u)*3.325) rgb(0 0 0/.17),calc(var(--u)*-.776) calc(var(--u)*-.998) 0 #fce7bd}
.cam-flash::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset calc(var(--u)*.554) calc(var(--u)*.333) calc(var(--u)*4.433) calc(var(--u)*1.108) rgb(21 21 21/.92);transition:background .1s}
.firing .cam-flash::after{background:rgb(255 255 245/.95);box-shadow:0 0 calc(var(--u)*40) calc(var(--u)*20) rgb(255 255 240/.9)}
.cam-vf{left:calc(var(--u)*451.11);top:0;width:calc(var(--u)*131.897);height:calc(var(--u)*97.537);border-radius:0 0 calc(var(--u)*6.65) calc(var(--u)*6.65);overflow:hidden;
  box-shadow:calc(var(--u)*.776) calc(var(--u)*1.108) 0 rgb(255 242 190/.99),calc(var(--u)*.554) calc(var(--u)*.333) calc(var(--u)*4.433) calc(var(--u)*5.542) rgb(96 68 13/.03)}
.cam-vf::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 calc(var(--u)*7.759) calc(var(--u)*12.192) rgb(0 0 0/.58)}
.cam-vf2{left:calc(var(--u)*495.44);top:calc(var(--u)*36.58);width:calc(var(--u)*44.335);height:calc(var(--u)*29.926);transform:rotate(180deg);border-radius:0 0 calc(var(--u)*6.65) calc(var(--u)*6.65);overflow:hidden}
.cam-vf2::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 calc(var(--u)*4.433) calc(var(--u)*6.65) rgb(0 0 0/.55)}
.cam-vf3{left:calc(var(--u)*512.07);top:calc(var(--u)*46.55);width:calc(var(--u)*12.192);height:calc(var(--u)*9.975);background:#1a1a1a;border-radius:calc(var(--u)*2.217)}
.cam-logo{left:calc(var(--u)*16.63);bottom:calc(var(--u)*26.04);width:calc(var(--u)*224.701);height:calc(var(--u)*131.351)}
.cam-logo>span,.cam-logo>img{position:absolute;display:flex;align-items:center;justify-content:center}
.cam-logo b{display:block;white-space:nowrap;font-weight:400}
.l-24{inset:22.23% 1.72% .48% 38.89%}
.l-24 b{font:400 calc(var(--u)*63.116)/1.075 "Sigmar One",var(--sans);color:var(--red);transform:rotate(-15.94deg);
  text-shadow:calc(var(--u)*-1.89) calc(var(--u)*-1.89) 0 rgb(236 227 24/.75),calc(var(--u)*1.89) calc(var(--u)*.945) 0 rgb(255 0 255/.55)}
.l-super{inset:-4.69% -12.22% 14.34% 0}
.l-super b{font:700 calc(var(--u)*61.737)/1.075 "Caveat",cursive;color:var(--ink);letter-spacing:calc(var(--u)*-3.0869);transform:rotate(-12.71deg);text-shadow:calc(var(--u)*.945) calc(var(--u)*.945) 0 rgb(255 255 255/.95)}
.l-dot{left:80.9%;top:50.68%;width:12.56%!important;height:21.49%!important}
.l-plus{inset:49.79% -2.88% 18.99% 81.42%}
.l-plus b{font:900 calc(var(--u)*18.702)/1.075 "Arial Black","Arial",sans-serif;color:#fff;letter-spacing:calc(var(--u)*-1.1221);transform:rotate(-7.98deg)}
.l-plus small{font-size:calc(var(--u)*14.265)}
.cam-edge{inset:0;box-shadow:inset 0 0 calc(var(--u)*7.759) calc(var(--u)*6.65) rgb(123 89 21/.35);border-radius:inherit}

.flashbulb{position:fixed;inset:0;z-index:95;pointer-events:none;background:#fffdf5;opacity:0}
.flashbulb.go{animation:bulb .7s ease-out}
@keyframes bulb{0%{opacity:0}8%{opacity:.88}100%{opacity:0}}

/* Film: the original trailer in a landscape phone */
.film{background:var(--ink);padding:clamp(80px,11vw,150px) 0}
.phone-l{position:relative;width:min(1080px,92vw);margin:0 auto;aspect-ratio:1600/783}
.phone-screen{position:absolute;left:2.135%;right:2.135%;top:4.748%;bottom:4.845%;width:95.73%;height:90.41%;object-fit:cover;background:#000;border-radius:6.2%/13.4%}
.phone-frame{position:relative;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 50px 60px rgb(0 0 0/.6))}
.phone-l::before{content:"";position:absolute;inset:10% 8%;z-index:-1;background:radial-gradient(closest-side,rgb(252 169 57/.32),transparent);filter:blur(40px)}
.sound,.pause{all:unset;position:absolute;right:5%;bottom:10%;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#fff;
  background:rgb(0 0 0/.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgb(255 255 255/.2);transition:background .2s}
.sound:hover,.pause:hover{background:rgb(0 0 0/.7)}
.sound .w{display:none}.sound[aria-pressed=true] .w{display:inline}.sound[aria-pressed=true] .x{display:none}
.sound:focus-visible,.pause:focus-visible{outline:3px solid var(--s1);outline-offset:3px}

/* Roll: 24 counts down while you scroll */
.roll{position:relative;height:420vh;background:var(--paper);color:var(--ink)}
.roll::before{content:"";position:absolute;inset:0;background:url(assets/film-print-envelope-paper-texture.webp) center/cover;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.roll-pin{position:sticky;top:0;height:100vh;height:100svh;width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:56px;padding:90px 0 56px}
.counter{grid-row:1;grid-column:1;font:400 clamp(9rem,26vw,22rem)/.9 "Sigmar One",var(--sans);color:var(--red);font-variant-numeric:tabular-nums;
  text-shadow:-.03em -.03em 0 rgb(236 227 24/.75),.03em .015em 0 rgb(255 0 255/.55);transform:rotate(-6deg);transform-origin:left center}
.count{display:inline-block;min-width:2ch;text-align:center}
.count.tick{animation:tick .22s var(--ease)}
@keyframes tick{0%{transform:translateY(-6%) scale(1.04)}100%{transform:none}}
.beats{grid-row:1;grid-column:2;list-style:none;margin:0;padding:0;display:grid}
.beats li{grid-area:1/1;font-weight:800;font-size:clamp(2rem,4.4vw,3.8rem);letter-spacing:-.04em;line-height:1;text-wrap:balance;opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.beats li.on{opacity:1;transform:none}
.strip{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(24,1fr);gap:6px;padding:16px 12px;background:#2b1a0c;border-radius:6px;
  --hole:radial-gradient(circle,var(--paper) 0 2.6px,transparent 3px);
  background-image:linear-gradient(#2b1a0c,#2b1a0c),var(--hole),var(--hole);background-size:auto,12px 12px,12px 12px;background-position:0 0,0 2px,0 calc(100% - 2px);background-repeat:no-repeat,repeat-x,repeat-x;
  background-clip:content-box,border-box,border-box;box-shadow:0 20px 40px -18px rgb(0 0 0/.5);transform:rotate(-1deg)}
.strip i{display:block;aspect-ratio:2/3;border-radius:2px;background:#1a0f06;box-shadow:inset 0 0 0 1px rgb(255 255 255/.04);transition:background .35s,box-shadow .35s}
.strip i.shot{background:radial-gradient(120% 90% at 40% 35%,#d9822b,#8a3b12 70%,#4a1d08);box-shadow:inset 0 0 8px rgb(0 0 0/.6)}

/* Mail: the envelope opens and the prints come out */
.mail{position:relative;height:290vh;background:var(--yellow);color:var(--ink)}
.mail::before{content:"";position:absolute;inset:0;background:url(assets/film-print-envelope-paper-texture.webp) center/cover;mix-blend-mode:multiply;opacity:.45;pointer-events:none}
.mail-pin{--p:0;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:clamp(88px,12vh,130px) 24px clamp(36px,7vh,80px)}
.mail-pin .lede{margin-inline:auto;opacity:.75}
.mail-pin h2,.mail-pin .lede{position:relative;z-index:2}
.envelope{--a:clamp(0,var(--p)/.28,1);--b:clamp(0,(var(--p) - .3)/.28,1);--c:clamp(0,(var(--p) - .6)/.3,1);
  position:relative;width:min(560px,82vw);aspect-ratio:3/2;perspective:1400px;margin-top:auto;transform:translateY(calc(var(--c)*8%))}
.env-back,.env-front,.env-flap{position:absolute;left:0;right:0}
.env-back{inset:0;background:#d5b07c url(assets/film-print-envelope-paper-texture.webp) center/cover;background-blend-mode:multiply;border-radius:6px;box-shadow:0 40px 60px -24px rgb(84 48 0/.55)}
.env-front{inset:22% 0 0;z-index:4;background:#e2bf8c url(assets/film-print-envelope-paper-texture.webp) center/cover;background-blend-mode:multiply;border-radius:0 0 6px 6px;
  clip-path:polygon(0 0,50% 30%,100% 0,100% 100%,0 100%);display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 9% 7%;overflow:hidden}
.env-stripes{position:absolute;left:0;right:0;bottom:14%;grid-auto-rows:5px;display:grid}
.env-stripes i:nth-child(1){background:var(--s1)}.env-stripes i:nth-child(2){background:var(--s2)}.env-stripes i:nth-child(3){background:var(--s3)}
.env-stripes i:nth-child(4){background:var(--s4)}.env-stripes i:nth-child(5){background:var(--s5)}.env-stripes i:nth-child(6){background:var(--s6)}
.env-stripes i:nth-child(7){background:var(--s7)}.env-stripes i:nth-child(8){background:var(--s8)}.env-stripes i:nth-child(9){background:var(--s9)}
.env-label{position:relative;margin-bottom:22%;padding:4px 16px 2px;background:#fffdf4;font:700 clamp(1.3rem,3.2vw,2rem)/1.2 "Caveat",cursive;color:var(--ink);transform:rotate(-3deg);box-shadow:0 2px 6px rgb(0 0 0/.15)}
.env-flap{top:0;height:52%;z-index:5;background:#cfa874 url(assets/film-print-envelope-paper-texture.webp) center/cover;background-blend-mode:multiply;clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;transform:rotateX(calc(var(--a)*178deg));filter:drop-shadow(0 4px 4px rgb(0 0 0/.2))}
.flap-open .env-flap{z-index:1}
.prints{position:absolute;inset:6% 5% 4%;z-index:3}
.prints figure{--x:calc((var(--i) - 1.5) * 65%);--r:calc((var(--i) - 1.5) * 7deg);position:absolute;inset:0;margin:0;padding:3.2%;background:#fffdf7;border-radius:2px;box-shadow:0 10px 24px -8px rgb(0 0 0/.45);
  transform:translate(calc(var(--c)*var(--x)),calc(var(--b)*-48% + var(--c)*(-20% + var(--i)*2%))) rotate(calc(var(--c)*var(--r)));will-change:transform}
.prints img{width:100%;height:100%;object-fit:cover}

/* Unlock */
.unlock{background:var(--ink);padding:clamp(100px,13vw,170px) 0;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,72px);align-items:center;
  padding-inline:max(24px,(100% - 1180px)/2)}
.unlock-img{width:100%;height:auto;border-radius:22px;box-shadow:0 40px 80px -30px rgb(0 0 0/.8),0 0 0 1px rgb(255 255 255/.06)}

/* Proof: App Store screenshots */
.proof{background:var(--paper);padding:clamp(80px,10vw,130px) 0}
.grid{width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.grid img{width:100%;height:auto;border-radius:clamp(12px,1.6vw,20px);box-shadow:0 24px 50px -28px rgb(60 40 0/.55);transition:transform .5s var(--ease)}
.grid img:hover{transform:translateY(-4px) rotate(-.4deg)}

/* CTA */
.cta{position:relative;background:#2a1a0e url(assets/vintage-camera-wood-desk.webp) center/cover;text-align:center;padding:0 24px clamp(100px,13vw,160px);display:flex;flex-direction:column;align-items:center;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 60%,rgb(0 0 0/.1),rgb(0 0 0/.6))}
.cta .stripes{align-self:stretch;margin:0 -24px clamp(90px,12vw,140px)}
.cta-icon{width:128px;height:128px;border-radius:29px;box-shadow:0 30px 60px -20px rgb(0 0 0/.8);margin-bottom:36px}
.cta .badge{margin-top:36px}

.foot{background:var(--ink);display:flex;justify-content:center;gap:24px;padding:28px 24px calc(28px + env(safe-area-inset-bottom));font-size:13px;color:rgb(255 250 240/.5)}
.foot a{text-decoration:none}.foot a:hover{color:var(--white)}

/* Reveal on scroll */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.grid .reveal:nth-child(2n){transition-delay:.08s}

/* Mobile */
@media (max-width:820px){
  body{font-size:17px}
  .banner{padding-top:26px}
  .banner-24{height:78px;top:12px}
  .hero{padding-top:64px}
  .keys{width:34%;left:-6%;bottom:-34%}
  .roll{height:380vh}
  .roll-pin{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;row-gap:36px;padding:80px 0 40px}
  .counter{grid-row:1;grid-column:1;font-size:clamp(8rem,44vw,13rem)}
  .beats{grid-row:2;grid-column:1;min-height:2.2em}
  .beats li{font-size:clamp(1.9rem,8vw,2.6rem)}
  .strip{grid-row:3;grid-template-columns:repeat(12,1fr);gap:5px}
  .unlock{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .prints figure{--x:calc((var(--i) - 1.5) * 34%);--r:calc((var(--i) - 1.5) * 9deg);transform:translate(calc(var(--c)*var(--x)),calc(var(--b)*-58% + var(--c)*(-40% + var(--i)*14%))) rotate(calc(var(--c)*var(--r)))}
  .dock{gap:14px}
}

/* Reduced motion: everything in its final state, nothing pinned */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .camera,.camera:hover{transition:none;transform:rotate(-2.5deg)}
  .flashbulb.go{animation:none}
  .roll,.mail{height:auto}
  .roll-pin,.mail-pin{position:relative;height:auto;min-height:0}
  .mail-pin{--p:1;padding-bottom:22vh}
  .envelope{margin-top:28vh}
  .beats{display:block}
  .beats li{opacity:1;transform:none;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.4em;transition:none}
  .count.tick{animation:none}
  .grid img{transition:none}
}

.pause{right:calc(5% + 48px)}
.play-icon{display:none}.pause[aria-pressed=true] .play-icon{display:inline}.pause[aria-pressed=true] .pause-icon{display:none}
html:not(.js) .roll,html:not(.js) .mail{height:auto}
html:not(.js) .roll-pin,html:not(.js) .mail-pin{position:relative;height:auto;min-height:0}
html:not(.js) .beats{display:block}
html:not(.js) .beats li{opacity:1;transform:none;margin-bottom:.5em}
html:not(.js) .mail-pin{--p:1;padding-bottom:15vh}
html:not(.js) .envelope{margin-top:28vh}

/* Semantics without changing the visual design. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1000px){.top,.cta{background-image:url(assets/vintage-camera-wood-desk-1000.webp)}}