@font-face{font-display:swap;font-family:Playfair;src:url('./fonts/PlayfairDisplay-Bold.woff2') format('woff2')}@font-face{font-display:swap;font-family:Diary;src:url('./fonts/Montserrat_600SemiBold.woff2') format('woff2')}@font-face{font-display:swap;font-family:Mono;src:url('./fonts/SpaceMono-Regular.woff2') format('woff2')}
:root{--ink:#49372e;--cream:#fff9e9;--gold:#efdaa2}*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:110px}body{margin:0;color:var(--ink);background:#f7efdd;font-family:Diary,Arial,sans-serif;font-size:15px;line-height:1.7;overflow-x:clip}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #a87836;outline-offset:5px}h1,h2,h3,p,figure{margin:0}h1,h2,h3,.brand{font-family:Playfair,Georgia,serif}h1,h2{font-weight:700;line-height:1.04;letter-spacing:-.055em}h1{font-size:clamp(54px,6.5vw,108px)}h2{font-size:clamp(44px,5.5vw,86px)}h3{font-size:26px;line-height:1.2}em{font-weight:400;color:#88662e}p{max-width:650px}.lead{font-size:clamp(16px,1.5vw,20px);line-height:1.65}.eyebrow{font-family:Mono,monospace;font-size:11px;letter-spacing:.15em;margin-bottom:23px}.note{font-family:Mono,monospace;font-size:10px;letter-spacing:.04em;opacity:.8;margin-top:24px}.center{text-align:center;margin-inline:auto}.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 26px;border:1px solid rgba(255,255,255,.8);border-radius:99px;background:rgba(255,251,232,.6);box-shadow:inset 0 1px 2px #fff,0 8px 24px #59423513;backdrop-filter:blur(16px);color:#49372e;font-size:13px;transition:transform .25s,background .25s}.button:hover{transform:translateY(-3px);background:#fff7de}.button.small{padding:11px 19px;font-size:12px}.text-link{font-size:12px;border-bottom:1px solid #49372e70;padding:10px 0}.actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:30px}.nav{position:fixed;z-index:50;left:24px;right:24px;top:18px;max-width:1450px;margin:auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #ffffffb3;border-radius:100px;background:#fff9efb5;backdrop-filter:blur(24px);box-shadow:0 8px 30px #49372e14}.brand{display:flex;align-items:center;gap:10px;font-size:24px;letter-spacing:-.035em}.app-icon{width:40px;height:40px;border-radius:12px}.nav nav{display:flex;gap:28px;font-size:12px}.nav nav a:hover{text-decoration:underline;text-underline-offset:6px}.progress{position:fixed;z-index:60;top:0;left:0;height:3px;width:100%;background:#b7985d;transform:scaleX(0);transform-origin:left}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:10px}.skip:focus{top:0}
section{position:relative;padding:110px max(6vw,24px);background-size:cover;background-position:center;isolation:isolate}.hero{background-image:linear-gradient(90deg,#fff9eb55,#fff9eb11),url('./backgrounds/light-pastel-paper.webp');min-height:900px;height:100svh;max-height:1150px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding-top:145px}.hero-copy{position:relative;z-index:5}.hero-copy h1{margin-bottom:28px}.hero-copy .lead{max-width:530px}.hero-scene{height:650px;position:relative;perspective:1000px}.hero-card{position:absolute;width:43%;border:7px solid #fffdf3;border-radius:16px;box-shadow:0 20px 40px #5d493a38;overflow:hidden}.hero-card img{width:100%}.hc0{left:0;top:45px;transform:rotate(-13deg)}.hc1{left:30%;top:145px;transform:rotate(6deg);z-index:2}.hc2{right:-7%;top:25px;transform:rotate(15deg)}.hero-camera{position:absolute;z-index:4;width:52%;left:-10%;bottom:70px;transform:rotate(-13deg);filter:drop-shadow(0 20px 18px #49372e44)}.hero-film{position:absolute;z-index:4;width:19%;right:1%;bottom:75px;transform:rotate(16deg);filter:drop-shadow(0 12px 12px #49372e33)}.spark{position:absolute;color:#fff6c9;text-shadow:0 0 15px #c39440;font-size:65px;pointer-events:none}.s1{top:5%;left:38%}.s2{bottom:14%;right:27%;font-size:42px}.handnote{position:absolute;bottom:5px;left:22%;font-family:Georgia,serif;font-style:italic;font-size:22px;transform:rotate(-6deg)}.scroll-note{position:absolute;bottom:28px;left:6vw;font:10px Mono,monospace;letter-spacing:.13em}.section-heading{text-align:center;max-width:920px;margin:0 auto 65px}.section-heading h2{margin-bottom:25px}.section-heading p{margin-inline:auto}.carousel-section{background-image:url('./backgrounds/light-pearl-stars.webp');overflow:hidden}.carousel-window{overflow:visible;margin:30px 0 50px}.carousel-track{display:flex;gap:26px;width:max-content;padding:30px 12px}.story-slide{width:clamp(240px,29vw,420px);flex-shrink:0;transform:rotate(-3deg)}.story-slide:nth-child(even){transform:rotate(3deg)}.story-slide img{width:100%;border-radius:12px;box-shadow:0 14px 24px #49372e28;border:5px solid #fff9e8}.story-slide figcaption{font:9px Mono,monospace;margin-top:14px;letter-spacing:.1em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid #49372e30;padding-top:35px;max-width:1160px;margin:auto}.steps span{font:12px Mono,monospace;display:block;margin-bottom:12px}.steps p{font-size:13px;margin-top:12px}.templates{background-image:url('./backgrounds/light-sage-stars.webp')}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;max-width:1150px;margin:auto}.template-card{padding:8px 8px 16px;border:1px solid #fff;border-radius:18px;background:#fffdf0b8;box-shadow:0 15px 30px #49372e20;transition:box-shadow .2s}.template-card:nth-child(3n+1){rotate:-3deg}.template-card:nth-child(3n){rotate:3deg}.template-card:hover{box-shadow:0 20px 45px #49372e40}.template-card img{width:100%;border-radius:10px}.template-card span{display:flex;justify-content:space-between;padding:14px 9px 0;font-size:12px}.dark{color:#fff9ed;background-color:#302923}.dark em{color:#f1dba8}.booth{background-image:linear-gradient(#160d16a0,#160d165c),url('./backgrounds/dark-amber-trails.webp');display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;min-height:900px}.booth-copy h2{margin-bottom:30px}.booth-copy>p:not(.eyebrow){margin-bottom:25px}.booth-scene{position:relative;height:650px;display:flex;align-items:center;justify-content:center;gap:10px}.booth-strip{width:30%;flex-shrink:0;filter:drop-shadow(0 22px 20px #0005);transform:rotate(-11deg)}.booth-strip.bs1{transform:translateY(45px) rotate(3deg)}.booth-strip.bs2{transform:rotate(13deg)}.strip-print{position:relative;width:100%;overflow:hidden}.strip-print .slot{position:absolute;object-fit:cover}.frame-overlay{position:absolute;inset:0;width:100%;height:100%}.booth-strip figcaption{text-align:center;font:9px Mono,monospace;margin-top:20px}.cameras{background-image:linear-gradient(#120a187a,#120a187a),url('./backgrounds/dark-gold-bokeh.webp')}.camera-row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1250px;margin:100px auto}.camera{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:25px}.camera img{width:100%;height:210px;object-fit:contain;filter:drop-shadow(0 25px 18px #0006)}.camera figcaption{font:10px Mono,monospace}.film-line{display:flex;align-items:center;justify-content:center;gap:35px;flex-wrap:wrap}.film-roll{width:65px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 12px #0004)}.film-line span{font:italic 22px Georgia,serif}.poses{background-image:linear-gradient(#160e197a,#160e197a),url('./backgrounds/dark-champagne-pearl.webp')}.pose-row{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:25px;max-width:1200px;margin:auto}.pose{background:none;border:0;padding:0;filter:drop-shadow(0 10px 18px #0002)}.pose img{width:100%;height:340px;object-fit:contain;transition:scale .25s}.pose:hover img{scale:1.06}.closing{text-align:center;background-image:linear-gradient(#fff5d926,#fff5d926),url('./backgrounds/album-meadow.webp');padding-block:130px}.closing-icon{width:90px;border-radius:24px;margin:0 auto 35px;box-shadow:0 10px 30px #49372e25}.closing p{margin:25px auto}.closing .button{margin-top:15px}footer{padding:45px 6vw;background:#f5efdf;display:flex;align-items:center;gap:30px;flex-wrap:wrap;font-size:11px}footer>span{flex:1}footer div{display:flex;gap:20px}footer small{width:100%;opacity:.6}.preview-dialog{border:1px solid #fff8;border-radius:22px;background:#fff9eb;padding:18px;color:#49372e;max-width:min(560px,92vw);max-height:90svh;box-shadow:0 30px 90px #0005}.preview-dialog::backdrop{background:#1e1712a8;backdrop-filter:blur(12px)}.preview-dialog>img{max-height:72svh;object-fit:contain;margin:auto;border-radius:12px}.preview-dialog p{text-align:center;margin-top:12px;font-size:13px}.close{display:block;margin:0 0 10px auto;border:1px solid #49372e30;border-radius:50%;background:#fff;width:40px;height:40px;font-size:26px}
@media(min-width:1600px){.hero{padding-inline:calc((100vw - 1400px)/2)}}
@media(max-width:1000px){.nav nav{gap:15px}.hero{min-height:800px}.hero-scene{height:530px}.hero-camera{bottom:20px}.hero-film{bottom:15px}.handnote{bottom:-30px}.booth{gap:25px}.booth-scene{height:500px}.camera-row{gap:20px}.camera img{height:150px}.template-grid{gap:25px}}
@media(max-width:700px){html{scroll-padding-top:90px}.nav{left:12px;right:12px;top:10px;padding:8px 12px;gap:10px}.brand{font-size:21px}.app-icon{width:34px;height:34px}.nav nav{display:none}.button.small{font-size:10px;padding:9px 13px}section{padding:75px 22px}.hero{height:auto;min-height:0;max-height:none;grid-template-columns:1fr;padding-top:135px;gap:15px}.hero-copy{max-width:540px}.hero h1{font-size:clamp(53px,12vw,75px)}.hero-copy .lead{font-size:15px}.hero-scene{height:480px;max-width:490px;width:100%;margin:auto}.hero-card{width:40%}.hc0{left:3%;top:40px}.hc1{top:105px}.hc2{right:0;top:25px}.hero-camera{width:44%;left:0;bottom:35px}.hero-film{width:17%;right:5%;bottom:35px}.handnote{bottom:3px;font-size:19px}.scroll-note{bottom:20px;left:22px;font-size:8px}.actions{gap:16px}.button{font-size:11px;padding:14px 20px}.section-heading{margin-bottom:35px}.section-heading p{font-size:13px}.steps{grid-template-columns:1fr;gap:25px}.steps>div{border-bottom:1px solid #49372e20;padding-bottom:20px}.template-grid{grid-template-columns:repeat(2,1fr);gap:24px 15px}.template-card{padding:5px 5px 10px;border-radius:12px;rotate:0deg!important}.template-card span{font-size:9px;padding:10px 4px 0}.booth{grid-template-columns:1fr;min-height:0;gap:20px}.booth-scene{height:520px;max-width:520px;width:100%;margin:auto}.booth-copy{max-width:520px}.camera-row{grid-template-columns:repeat(2,1fr);margin:65px auto;gap:45px 25px}.camera img{height:145px}.camera figcaption{font-size:9px}.film-line{gap:20px}.film-roll{width:43px;height:85px}.film-line span{font-size:19px}.pose-row{grid-template-columns:repeat(3,1fr);gap:15px}.pose img{height:230px}.pose:nth-child(4),.pose:nth-child(5){grid-column:auto}.closing{padding-block:85px}footer{gap:22px}footer>span{flex-basis:100%}.carousel-track{gap:18px}.story-slide{width:72vw;max-width:330px}.carousel-window{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.story-slide{scroll-snap-align:center}.carousel-track{padding:20px 8px}.spark{font-size:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.carousel-window{overflow-x:auto;scroll-snap-type:x mandatory}.story-slide{scroll-snap-align:center}}
/* Keep rotated photo strips inside the viewport on narrow screens. */
.booth{overflow:clip}

/* Scroll-linked day-to-night palette; original artwork stays visible underneath. */
body{--night:0;--theme-ink:#49372e;--theme-accent:#88662e;--nav-surface:rgba(255,249,239,.71);--theme-border:rgba(73,55,46,.22);--card-surface:rgba(255,253,240,.72);--footer-surface:#f5efdf}
.light,.closing{color:var(--theme-ink)}
.light em,.closing em{color:var(--theme-accent)}
.light::before,.closing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--night);background-size:cover;background-position:center}
.hero::before{background-image:linear-gradient(#160d1680,#160d1660),url('./backgrounds/dark-amber-trails.webp')}
.carousel-section::before,.templates::before{background-image:linear-gradient(#120a187a,#120a187a),url('./backgrounds/dark-gold-bokeh.webp')}
.closing::before{background:radial-gradient(ellipse at 50% 52%,#fff9e6d9 0%,#fff9e69c 40%,#fff9e614 78%);opacity:1}
.nav{background:var(--nav-surface);color:var(--theme-ink);border-color:var(--theme-border)}
.nav .button,.light .button,.closing .button{color:var(--theme-ink);background:var(--card-surface);border-color:var(--theme-border);box-shadow:0 8px 24px #0001}
.light .text-link,.steps{border-color:var(--theme-border)}
.template-card{color:var(--theme-ink);background:var(--card-surface);border-color:var(--theme-border)}
footer{background:var(--footer-surface);color:var(--theme-ink)}

/* Crossfade only the artwork at section joins, keeping text and controls crisp. */
main{--blend-depth:100px}
section.blended-section{background-image:none;background-color:transparent;overflow:visible}
.blended-section::after{content:"";position:absolute;inset:calc(-1 * var(--blend-depth)) 0 0;z-index:-2;pointer-events:none;background-image:var(--section-background);background-size:cover;background-position:center;mask-image:linear-gradient(to bottom,transparent,#000 var(--blend-depth));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--blend-depth))}
.blended-section.light::before,.blended-section.closing::before{top:calc(-1 * var(--blend-depth));mask-image:linear-gradient(to bottom,transparent,#000 var(--blend-depth));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--blend-depth))}
.blended-section:first-child::after,.blended-section:first-child::before{top:0;mask-image:none;-webkit-mask-image:none}
/* Contain moving artwork without clipping the background crossfade. */
.blended-section .booth-scene{overflow:clip;overflow-clip-margin:20px}
.carousel-section.blended-section .carousel-window{overflow-x:clip}
@media(max-width:700px){main{--blend-depth:64px}.carousel-section.blended-section .carousel-window{overflow-x:auto}}
@media(prefers-reduced-motion:reduce){.carousel-section.blended-section .carousel-window{overflow-x:auto}}

/* Camera club: collectible display cards, generously scaled artwork. */
.camera-row{position:relative;gap:22px;margin:90px auto 75px;align-items:start}
.collection-caption{position:absolute;top:-45px;left:0;font:9px Mono,monospace;letter-spacing:.18em;color:#f0dba9}
.camera{position:relative;min-width:0;min-height:340px;padding:34px 18px 24px;gap:12px;border:1px solid #fff1cc50;border-radius:140px 140px 22px 22px;background:radial-gradient(ellipse at 50% 30%,#ffe8b940,transparent 68%),linear-gradient(145deg,#fff5de16,#1e141840);box-shadow:0 22px 45px #160c1635,inset 0 1px #fff4cc55;isolation:isolate}
.camera:nth-of-type(even){margin-top:65px}
.camera-number{position:absolute;top:20px;left:50%;translate:-50% 0;font:italic 100px Playfair,Georgia,serif;color:#fff4d51a;z-index:-1}
.camera-tag{font:8px Mono,monospace;letter-spacing:.1em;color:#f3dfa9;text-align:center;margin-bottom:18px}
.camera img{height:185px;width:100%;object-fit:contain;transition:scale .5s,rotate .5s;filter:drop-shadow(0 20px 13px #0008)}
.camera:hover img{scale:1.12;rotate:-7deg}
.camera:nth-of-type(even):hover img{rotate:7deg}
.camera figcaption{text-align:center;font-size:10px;line-height:1.6;max-width:180px;margin-top:15px}
.film-line{position:relative;max-width:960px;margin:auto;padding:45px 30px 28px;border-block:1px solid #ffe7b64a;background:linear-gradient(90deg,transparent,#fff1c710,transparent);gap:45px}
.film-caption{flex-basis:100%;text-align:center;font:10px Mono,monospace;letter-spacing:.15em;margin-bottom:5px;color:#f0dba9}
.film-caption span{font:20px Georgia,serif;margin-left:10px}
.film-line .film-roll{width:70px;height:115px;object-fit:contain;filter:drop-shadow(0 12px 12px #0006)}
/* Compact pose lookbook with contained captions. */
.poses .section-heading{margin-bottom:55px}
.pose-row{display:flex;align-items:center;justify-content:center;gap:22px;max-width:1280px;margin:0 auto 35px;padding:22px 10px 35px;height:auto}
.pose-row .pose{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;padding:12px 12px 18px;border:1px solid #fff6e580;border-radius:5px;background:#f7eedf;color:#49372e;box-shadow:0 18px 30px #24122240;transition:rotate .3s,box-shadow .3s}
.pose-row .pose:nth-child(odd){rotate:-4deg}
.pose-row .pose:nth-child(even){rotate:4deg;margin-top:35px}
.pose-row .pose:hover{rotate:0deg;box-shadow:0 25px 40px #24122260}
.pose-row .pose img{width:100%;height:280px;object-fit:contain;background:linear-gradient(145deg,#e7d9c9,#d3c4b8);border-radius:2px;filter:none;transition:filter .3s}
.pose-label{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;font:10px Mono,monospace;line-height:1.5;margin-top:18px;text-align:left}
.pose-label b{font-size:15px}
@media(max-width:1000px){.camera-row{grid-template-columns:repeat(2,1fr);max-width:650px;gap:25px}.camera{min-height:320px}.camera img{height:190px}.camera:nth-of-type(even){margin-top:35px}.pose-row{flex-wrap:wrap;gap:24px;max-width:720px}.pose-row .pose{flex:0 0 28%}.pose-row .pose img{height:230px}}
.camera img{scale:1.3}.camera:hover img{scale:1.4}
@media(max-width:700px){.camera-row{gap:16px;margin-top:75px}.camera{padding:25px 10px 20px;min-height:250px;overflow:clip}.camera img{height:125px}.camera-tag{font-size:7px;letter-spacing:0}.camera-number{font-size:75px}.camera figcaption{font-size:9px}.collection-caption{font-size:8px}.film-line{gap:18px;padding-inline:0}.film-line .film-roll{width:40px;height:80px}.film-caption{font-size:8px}.pose-row{gap:18px;padding:12px 2px 25px}.pose-row .pose{flex:0 0 44%;padding:8px 8px 13px}.pose-row .pose img{height:210px}.pose-label{font-size:9px;margin-top:12px}.poses .section-heading{margin-bottom:25px}}
.template-collection{max-width:1320px;margin:0 auto 65px}
.collection-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}
.collection-heading .eyebrow{margin-bottom:10px;color:var(--theme-accent)}
.collection-heading h3{font-size:clamp(26px,3vw,40px)}
.gallery-controls{display:flex;gap:10px;flex-shrink:0}
.gallery-controls button{width:44px;height:44px;border-radius:50%;border:1px solid var(--theme-border);background:var(--card-surface);color:var(--theme-ink);font-size:22px}
.gallery-controls button:hover{background:#b9925540}
.template-grid.template-rail{display:flex;max-width:none;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:12px 5px 26px;scroll-padding-inline:5px}
.template-rail .template-card{flex:0 0 28%;min-width:230px;rotate:0deg!important;scroll-snap-align:start;align-self:start;transition:translate .3s;box-shadow:0 12px 18px #24162822}
.template-rail .template-card:hover{translate:0 -5px}
.template-rail .template-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#fff8e9;border-radius:10px}
.stories-gallery .template-card{flex-basis:22%;min-width:205px}
.stories-gallery .template-card img{aspect-ratio:9/16}
.template-rail .template-card span{font-size:12px;line-height:1.5;text-align:left;gap:12px}
.gallery-hint{font:9px Mono,monospace;letter-spacing:.13em;margin-top:12px;opacity:.75}
@media(max-width:700px){.template-collection{margin-bottom:45px}.template-grid.template-rail{gap:16px}.template-rail .template-card{flex-basis:76%;min-width:0}.stories-gallery .template-card{flex-basis:65%}.collection-heading{align-items:center}.collection-heading h3{font-size:25px}.gallery-controls{gap:6px}.gallery-controls button{width:36px;height:36px}.collection-heading .eyebrow{font-size:9px}.template-rail .template-card span{font-size:11px}}
/* Refined pose prints: lighter borders and a more compact portrait window. */
.pose-row{gap:26px;padding-inline:14px}
.pose-row .pose{padding:8px 8px 15px;border-radius:16px;border:1px solid #fff7e8bd;background:linear-gradient(145deg,#fffaf0,#e9ddc9);box-shadow:0 16px 28px #20151d35,inset 0 1px 0 #fff;overflow:hidden}
.pose-row .pose:nth-child(odd){rotate:-2deg}
.pose-row .pose:nth-child(even){rotate:2deg;margin-top:22px}
.pose-row .pose::after{content:"";position:absolute;inset:4px;border:1px solid #b79a6740;border-radius:12px;pointer-events:none}
.pose-row .pose img{height:235px;border-radius:10px;background:radial-gradient(ellipse at 50% 38%,#faf3e7,#d6c5b5);object-fit:contain;box-shadow:inset 0 0 0 1px #88644320}
.pose-label{padding:0 7px;min-height:35px;margin-top:12px;letter-spacing:.015em;align-items:center}
.pose-label b{display:grid;place-items:center;flex:0 0 24px;height:24px;border:1px solid #a2865940;border-radius:50%;font-size:13px;color:#856332}
.pose-row .pose:hover{box-shadow:0 22px 38px #20151d50;rotate:0deg}
@media(max-width:1000px){.pose-row .pose img{height:210px}}
@media(max-width:700px){.pose-row{gap:18px;padding-inline:2px}.pose-row .pose{padding:7px 7px 10px;border-radius:13px}.pose-row .pose img{height:185px;border-radius:8px}.pose-label{padding:0 3px;gap:4px;font-size:9px;min-height:34px;margin-top:8px}.pose-label b{flex-basis:20px;height:20px}}

/* A sunlit meadow ending, with dark lettering for contrast. */
.closing{color:#352d23}.closing em{color:#68491e}.closing .button{background:#433326;color:#fff9ec;border-color:#fff3d8a6;box-shadow:0 8px 25px #49372e30}.closing .button:hover{background:#594332}

.gallery-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.gallery-views{display:flex;padding:4px;border:1px solid var(--theme-border);border-radius:30px;background:var(--card-surface);gap:3px}
.gallery-views button{border:0;background:transparent;border-radius:24px;padding:9px 15px;color:var(--theme-ink);font-size:12px}
.gallery-views button[aria-pressed="true"]{background:#f0dba9;color:#352b21}
.template-collection:has(.gallery-grid) .gallery-controls{display:none}
.template-grid.template-rail.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;gap:22px;scroll-snap-type:none}
.template-rail.gallery-grid .template-card{min-width:0;width:100%}
@media(max-width:1000px){.template-grid.template-rail.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.collection-heading{align-items:start;flex-wrap:wrap}}
@media(max-width:700px){.template-grid.template-rail.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.gallery-toolbar{justify-content:flex-start}.gallery-views button{padding:8px 13px;font-size:11px}.gallery-controls button{width:38px;height:38px}}

/* Actual app stickers: scroll drift on the wrapper, gentle float on its image. */
.booth-sticker{position:absolute;z-index:4;pointer-events:none;width:clamp(52px,6vw,105px);filter:drop-shadow(0 8px 10px #27122235)}
.booth-sticker img{width:100%;height:auto}
.sticker-0{left:4%;top:5%;rotate:-14deg;width:110px}
.sticker-1{right:5%;top:0%;rotate:13deg;width:100px}
.sticker-2{left:1%;top:49%;width:65px;rotate:-12deg}
.sticker-3{right:0%;bottom:15%;width:90px;rotate:20deg}
.sticker-4{left:38%;top:0%;width:62px;rotate:12deg}
.sticker-5{left:14%;bottom:0%;width:83px;rotate:-18deg}
.sticker-6{right:29%;bottom:1%;width:58px;rotate:8deg}
.booth-scene>.spark{display:none}
.sticker-sampler{display:flex;align-items:center;gap:16px;margin-top:34px;padding-top:22px;border-top:1px solid #fff4d52e;max-width:340px}
.sticker-sampler img{width:44px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 6px #0003)}
.sticker-sampler img:nth-child(even){rotate:12deg}.sticker-sampler img:nth-child(odd){rotate:-8deg}
@media(max-width:700px){.booth-sticker{max-width:65px}.sticker-0{top:7%}.sticker-1{top:4%}.sticker-2{max-width:44px}.sticker-4{max-width:44px;top:2%}.sticker-5{bottom:1%}.sticker-6{max-width:40px;bottom:0}.sticker-sampler{gap:14px;margin-top:25px}.sticker-sampler img{width:38px;height:45px}}
/* Leave room for the full floating motion at the scene edges. */
.sticker-0{top:12%}.sticker-1{top:11%}.sticker-4{top:10%}.sticker-5{bottom:5%}.sticker-6{bottom:5%}

/* Film collection: fixed display structure prevents loose flex wrapping. */
.film-line{display:block;max-width:1200px;padding:45px 0 30px;margin:40px auto 0;background:transparent;border-top:1px solid #ffe7b64a;border-bottom:0}
.film-heading{text-align:center;margin:0 auto 34px}
.film-heading .eyebrow{margin:0 auto 14px;color:#efdaa2}
.film-heading h3{font-size:clamp(32px,4vw,54px);line-height:1.1;margin-bottom:18px}
.film-heading>p:last-child{font-size:13px;margin-inline:auto;color:#fff3de}
.film-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.film-item{min-width:0;position:relative;text-align:center;padding:26px 12px 24px;border-radius:20px;background:linear-gradient(155deg,#fff1cc16,#241b232e);border:1px solid #fff3ce35;box-shadow:inset 0 1px #fff6dc20}
.film-line .film-index{position:absolute;top:12px;left:15px;width:auto;font:9px Mono,monospace;color:#efdaa2;opacity:.65}
.film-art{display:flex;align-items:center;justify-content:center;height:170px;background:radial-gradient(ellipse,#ffe5a326,transparent 68%)}
.film-line .film-roll{width:90px;height:145px;object-fit:contain;filter:drop-shadow(0 18px 12px #100a1266);transition:scale .35s}
.film-item:hover .film-roll{scale:1.12}
.film-item figcaption{border-top:1px solid #fff1d322;padding-top:18px;margin-top:10px}
.film-item strong{display:block;font:19px Playfair,Georgia,serif;color:#fff7e8}
.film-line .film-item figcaption span{display:block;width:auto;font:9px Mono,monospace;color:#e8d9bd;margin-top:8px;line-height:1.5}
@media(max-width:700px){.film-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.film-item:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}.film-art{height:135px}.film-line .film-roll{width:75px;height:115px}.film-item{padding:22px 10px 18px}.film-item strong{font-size:18px}.film-heading>p:last-child{font-size:12px}}

.explore-app{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border:1px solid #f0dba970;border-radius:30px;background:var(--card-surface);color:var(--theme-ink);font-size:12px;white-space:nowrap;transition:background .2s,translate .2s}.explore-app:hover{background:#b9925540;translate:0 -2px}.explore-app span{font-size:17px;color:var(--theme-accent)}
@media(max-width:700px){.explore-app{font-size:11px;padding:10px 14px}.gallery-toolbar{gap:10px}}
/* The carousel runs to the window's own edges and goes soft there: a page blurs and thins as it nears an edge, never a straight cut (owner 2026-10-10: "add gradual blur rather than this"). The blur is set per page as it moves (landing.js). */
.carousel-frame{position:relative}
@media(min-width:701px){
.carousel-frame{width:100vw;margin-left:calc(50% - 50vw)}
.carousel-section.blended-section .carousel-frame .carousel-window{overflow-x:visible;padding-inline:max(6vw,24px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9vw,#000 calc(100% - 9vw),transparent);mask-image:linear-gradient(90deg,transparent,#000 9vw,#000 calc(100% - 9vw),transparent)}
.carousel-frame .story-slide{will-change:filter}
}

/* The download buttons breathe: a slow float and a soft light sweeping across (owner 2026-10-30: "make these slightly movement").
   The two move out of step; a pointer over one holds it still. Reduced motion stops both (the rule above). */
.actions .button{position:relative;overflow:hidden;animation:fb-float 3.6s ease-in-out infinite}
.actions .button+.button{animation-delay:-1.8s}
.actions .button::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%);animation:fb-sheen 5s ease-in-out infinite;pointer-events:none}
.actions .button+.button::after{animation-delay:-2.5s}
.actions .button:hover,.actions .button:hover::after{animation-play-state:paused}
@keyframes fb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fb-sheen{0%,58%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}

/* The hero collage: each piece opens its part of the web app and floats gently, out of step (owner 2026-10-30).
   The float sits on the image so the card keeps its own tilt and scroll drift. */
.hero-card,.hero-camera,.hero-film{cursor:pointer;display:block}
.hero-scene a img{animation:fb-float 4.2s ease-in-out infinite}
.hero-scene .hc1 img{animation-duration:3.8s;animation-delay:-1.2s}
.hero-scene .hc2 img{animation-duration:4.6s;animation-delay:-2.4s}
.hero-scene .hero-camera img{animation-duration:5s;animation-delay:-.6s}
.hero-scene .hero-film img{animation-duration:3.6s;animation-delay:-1.8s}
.hero-scene a:hover img{animation-play-state:paused;filter:brightness(1.04)}

/* The photobooth piece is the frame alone, cut out: no card, border or tape round it (owner 2026-10-30). */
.hero-card.hero-cutout{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.hero-card.hero-cutout::before,.hero-card.hero-cutout::after{display:none}
.hero-card.hero-cutout img{filter:drop-shadow(0 18px 26px #5d493a40)}
.hero .hero-scene .hero-card.hero-cutout{border:0;border-radius:0;box-shadow:none!important;background:none}
.hero .hero-scene .hero-card.hero-cutout::before{display:none}
/* on a phone the handwritten line sat on SCROLL TO COLLECT THE MOMENTS (owner 2026-10-30: "why the text is touching") */
@media(max-width:700px){.hero .hero-scene .handnote{bottom:60px!important}}

/* the middle of the collage is one big photobooth print, Blush Gate & Star Four, in place of the polaroid; it opens the photobooth (owner 2026-10-30: "remove this polaroid also keep one photobooth frame in that position big") */
.hero .hero-scene .hc1.hc-gate{left:24%;top:250px;width:52%;transform:none;rotate:3deg;z-index:3}
/* the recap and the diary sit just clear of the print, gathered close (owner 2026-10-30: not hidden, "closer to each other") */
.hero .hero-scene .hc0.hero-card{left:-3%;top:55px}
.hero .hero-scene .hc2.hero-card{right:-3%;top:20px}
.hero-scene .hc-gate img{border-radius:4px;box-shadow:0 14px 30px #5a3a4a33}
@media(max-width:700px){.hero .hero-scene .hc1.hc-gate{left:22%;top:170px;width:56%}.hero .hero-scene .hc0.hero-card{left:4%;top:40px;width:38%}.hero .hero-scene .hc2.hero-card{right:4%;top:10px;width:38%}}

/* the handwritten line moves to the top of the collage, clear of the landscape print (owner 2026-10-30) */
.hero .hero-scene .handnote{top:-6px;bottom:auto!important;left:30%}
@media(max-width:700px){.hero .hero-scene{margin-top:34px}.hero .hero-scene .handnote{top:-26px;left:30%}}

/* the pink cassette player in place of the flip phone (owner 2026-10-30) */
.hero .hero-scene .hero-film.hf-cassette{right:6%;bottom:75px;width:25%;rotate:-7deg}
@media(max-width:700px){.hero .hero-scene .hero-film.hf-cassette{right:2%;bottom:95px;width:29%}}
/* every screen between a phone and a laptop (owner 2026-10-30: "make sure all other devices make sense too"):
   the diary stays on screen on an iPad held sideways, and a portrait tablet stacks the words over a full-size collage
   with a menu that fits */
@media(min-width:701px) and (max-width:1000px),(min-width:701px) and (max-width:1366px) and (orientation:portrait){
  .hero{height:auto;min-height:0;max-height:none;grid-template-columns:1fr;padding-top:140px;padding-bottom:90px;gap:30px}
  .hero-copy{max-width:620px}
  .hero .hero-scene{max-width:560px;width:100%;height:560px;margin:40px auto 0;justify-self:center}
  .nav{gap:10px}.nav nav{gap:12px;font-size:11px}.nav .lang-switch{max-width:36px;overflow:hidden}.brand{font-size:22px}.nav .button.small{padding:9px 12px;font-size:11px}
}
@media(max-width:700px){.hero .hero-scene .hero-camera.hero-camera{left:4%;bottom:85px}}
@media(max-width:700px){.hero .hero-scene{justify-self:center;margin-left:auto;margin-right:auto}}
/* the handwritten line sits clear of the diary and the recap on every screen (owner 2026-10-30) */
.hero .hero-scene .handnote.handnote{left:22%;top:-34px}
@media(max-width:700px){.hero .hero-scene .handnote.handnote{left:24%;top:-54px}}
@media(min-width:1001px) and (max-width:1300px) and (orientation:landscape){.hero .hero-scene .handnote.handnote{left:2%;top:-40px}}

/* Store buttons read clearly: bigger, bold, darker ink (owner 2026-11-03: "make the fonts a bit more easily seeable") */
.actions .button{font-size:15px;font-weight:700;letter-spacing:.01em;padding:16px 26px}
.light .actions .button{color:#33241b}
@media (max-width:720px){.actions .button{font-size:13.5px;padding:14px 20px}}