:root{
  --cream:#FFF8EE; --cream2:#F7EBD3; --ink:#221610; --muted:#7a6a5e;
  --maroon:#8E3B22; --maroon2:#C05A2E; --gold:#D9A441; --gold2:#F2CE7E;
  --denim:#24466E; --palm:#3E7A4E; --sunset:#E2703A;
  --peach:#FFDCC3; --card:#FFFEF9; --line:rgba(34,22,16,.14);
  --shadow: 0 20px 60px rgba(34,22,16,.12);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Outfit",system-ui,sans-serif; overflow-x:clip;
  min-height:100vh;
}
img{max-width:100%}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
#fireworks{position:fixed;inset:0;pointer-events:none;z-index:40}
#sparkle-layer{position:fixed;inset:0;pointer-events:none;z-index:41;overflow:hidden}
.sparkle{position:absolute;font-size:14px;animation:sparkFall 1.2s ease-out forwards}
@keyframes sparkFall{from{transform:translateY(-10px) scale(1);opacity:1}to{transform:translateY(60px) scale(.2);opacity:0}}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:18px;
  padding:12px 20px;background:rgba(255,248,238,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:"Fraunces",serif;font-style:italic;font-size:14px;white-space:nowrap}
.brand .dot{display:inline-block;width:8px;height:8px;background:var(--maroon);border-radius:50%;margin-right:8px}
.journey-wrap{flex:1;max-width:640px;margin:0 auto}
.journey-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;text-align:center}
.journey-track{position:relative;height:10px;background:#e9dcc6;border-radius:999px;border:1px solid var(--line)}
.journey-fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--maroon),var(--maroon2),var(--gold));border-radius:999px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.journey-avatar{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-size:13px;font-weight:800;border:2px solid var(--cream);box-shadow:var(--shadow);transition:left .8s cubic-bezier(.22,1,.36,1)}
.journey-steps{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-top:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-bottom:2px}
.journey-steps span{cursor:pointer;padding:2px 6px;border-radius:999px}
.journey-steps span.active{background:var(--ink);color:var(--cream)}
.journey-steps span.done{color:var(--maroon);font-weight:700}

.pill-btn{
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;
}
.pill-btn:hover{border-color:var(--ink)}
.btn-primary{
  background:var(--ink);color:var(--cream);border:0;border-radius:999px;
  padding:12px 20px;font:inherit;font-weight:600;cursor:pointer;
  transition:transform .15s, background .2s;
}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);background:var(--maroon)}
.btn-primary:disabled{opacity:.35;cursor:not-allowed}
.btn-primary.big{font-size:18px;padding:16px 28px;background:var(--maroon)}
.link-btn{background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--muted);font:inherit;font-size:13px}

#stages{max-width:1080px;margin:0 auto;padding:28px 20px 80px;overflow-x:clip}
img,video,canvas,svg{max-width:100%}
.stage{display:none;animation:rise .6s ease both}
.stage.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kicker{letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--maroon);font-weight:700;margin:18px 0 8px}
h1.mega{font-family:"Fraunces",serif;font-weight:600;line-height:.85;font-size:clamp(64px,16vw,190px);margin:0;letter-spacing:-.04em;overflow-wrap:break-word}
h1.mega em{font-style:italic;font-weight:300;color:var(--maroon)}
h2{font-family:"Fraunces",serif;font-size:clamp(36px,6vw,64px);line-height:.95;margin:0 0 8px;letter-spacing:-.02em}
h2 em{font-weight:300;font-style:italic;color:var(--maroon)}
.period{color:var(--gold)}
.sub{color:#4a3f36;max-width:58ch;font-size:17px;line-height:1.6}
.sub strong{color:var(--ink)}

/* gate */
.gate-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:10px}
.gate-grid>*,.finale-grid>*,.memory-board>*,.photo-frames>*,.user-photos>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){.gate-grid{grid-template-columns:1fr}}
.gate-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-top:18px}
.gate-card label{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.row{display:flex;gap:10px;margin-top:10px}
.row input{min-width:0}
.gate-card .btn-primary{white-space:nowrap}
.row input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:12px 16px;font:inherit;background:#fff}
.row input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.hint{font-size:13px;color:var(--muted);margin:10px 2px 0}
.gate-extra{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.file-btn{cursor:pointer}
.mini-strip{display:flex;gap:12px;margin-top:18px}
.mini-strip div{background:var(--ink);color:var(--cream);border-radius:14px;padding:12px 8px;flex:1;min-width:0;text-align:center;overflow:hidden}
.mini-strip strong{display:block;font-family:"Fraunces",serif;font-size:28px}
.mini-strip span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.7}

.poster{background:var(--card);border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.2deg)}
.poster-top{display:flex;justify-content:space-between;padding:12px 16px;background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:.15em;font-weight:700}
.poster-art{position:relative;padding:18px;background:
  radial-gradient(circle at 20% 20%, #ffe9c9 0, transparent 40%),
  radial-gradient(circle at 90% 10%, #ffd2c2 0, transparent 35%),
  var(--cream2);text-align:center}
.cake-svg{width:min(300px,80%);height:auto}
.flame{transform-origin:center;animation:flick .35s infinite alternate}
.f2{animation-delay:.12s}.f3{animation-delay:.2s}
@keyframes flick{from{transform:scaleY(1)}to{transform:scaleY(1.18) translateY(-1px)}}
.stamp{display:inline-block;margin-top:8px;border:2px dashed var(--maroon);color:var(--maroon);border-radius:999px;padding:6px 14px;font-weight:800;font-size:12px;letter-spacing:.1em;transform:rotate(-3deg);background:#fff}
.poster-bottom{display:flex;gap:12px;padding:14px 16px;border-top:2px solid var(--ink)}
.poster-bottom div{flex:1}.poster-bottom small{display:block;font-size:10px;letter-spacing:.15em;color:var(--muted)}
.photo-slot{padding:12px 16px 16px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}
.photo-frames{display:flex;gap:8px;margin-top:10px}
.ph{flex:1;height:72px;border-radius:10px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:11px;background:#fff;overflow:hidden;position:relative}
.ph1{background:linear-gradient(135deg,#ffd9c0,#ffb18a)} .ph2{background:linear-gradient(135deg,#e8c86a,#c49a2b)} .ph3{background:linear-gradient(135deg,#f3b8c6,#7a1e1e)}
.ph i{background:rgba(255,255,255,.9);padding:2px 6px;border-radius:999px;font-style:normal}

/* candles — real flames (wikimedia flame.gif) + real sticks (pngimg cake crop) */
.candle-row{display:flex;gap:18px;margin:26px 0;flex-wrap:wrap}
.candle{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 18px 18px;text-align:center;box-shadow:var(--shadow);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}
.candle.dark{background:#17100c;border-color:#000;color:var(--cream)}
.wick-flame{position:relative;height:320px;display:grid;place-items:center;overflow:hidden}
.halo{position:absolute;left:50%;top:30px;width:230px;height:230px;margin-left:-115px;background:radial-gradient(circle,rgba(255,150,60,.20),transparent 65%);pointer-events:none;transition:opacity .5s}
.candle.blowing .halo{animation:haloflick .16s infinite}
@keyframes haloflick{50%{opacity:.5;transform:scale(1.07)}}
.candle.out .halo{opacity:0}
.gif-candle{position:absolute;left:50%;bottom:60px;width:170px;height:250px;margin-left:-85px;background:url("assets/img/flame.gif") center top/420px auto no-repeat;mix-blend-mode:screen;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,170,80,.5));-webkit-mask-image:radial-gradient(ellipse 52% 56% at 50% 44%,#000 52%,transparent 76%);mask-image:radial-gradient(ellipse 52% 56% at 50% 44%,#000 52%,transparent 76%);transition:opacity .45s, transform .45s}
.gif-candle.f2{transform:scaleX(-1)}
.candle.blowing .gif-candle{animation:gifflutter .16s infinite}
@keyframes gifflutter{0%{transform:scaleX(1) skewX(0)}25%{transform:scaleX(1.12) skewX(-4deg);opacity:.8}50%{transform:scaleX(.94) skewX(3deg)}75%{transform:scaleX(1.08) skewX(-2deg)}100%{transform:scaleX(1) skewX(0)}}
.candle.blowing .gif-candle.f2{animation-name:gifflutter2}
@keyframes gifflutter2{0%{transform:scaleX(-1) skewX(0)}25%{transform:scaleX(-1.12) skewX(4deg);opacity:.8}50%{transform:scaleX(-.94) skewX(-3deg)}75%{transform:scaleX(-1.08) skewX(2deg)}100%{transform:scaleX(-1) skewX(0)}}
.candle.out .gif-candle{opacity:0;transform:scale(.6)}
.frosting{position:absolute;left:0;right:0;bottom:8px;height:70px;background-image:url("assets/img/cake.png");background-repeat:no-repeat;background-size:520px auto;pointer-events:none}
.frosting.f1{background-position:8% -335px}
.frosting.f2{background-position:50% -335px}
.frosting.f3{background-position:92% -335px}
/* retired candle-crop styles */
/* retired live-flame styles (replaced by .gif-candle) */
/* (snuff retired — smoke + words carry the blow-out) */
/* (flutter/out keyframes live with .gif-candle above) */
.smoke{position:absolute;left:50%;top:20px;pointer-events:none}
.smoke i{position:absolute;bottom:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle,rgba(200,200,200,.55),transparent 70%);filter:blur(3px);opacity:0}
.candle.out .smoke i{animation:smokeup 2.4s ease-out forwards}
.candle.out .smoke i:nth-child(2){animation-delay:.25s}
.candle.out .smoke i:nth-child(3){animation-delay:.5s}
@keyframes smokeup{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.8}100%{opacity:0;transform:translateY(-90px) translateX(14px) scale(1.6)}}
.wish-word{font-family:"Fraunces",serif;font-style:italic;font-size:30px;color:var(--gold2);min-height:40px;opacity:0;transform:scale(.5)}
.wish-word.show{animation:wordpop .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes wordpop{to{opacity:1;transform:scale(1)}}
#wish-granted{margin:6px 0 0;background:#17100c;border:2px solid var(--gold);border-radius:18px;padding:16px;text-align:center;color:var(--cream);animation:rise .6s ease}
#wish-granted[hidden]{display:none}
#wish-granted img{width:120px;height:auto}
#wish-granted p{font-family:"Fraunces",serif;font-style:italic;font-size:22px;margin:8px 0 0;color:var(--gold2)}
.blow-meter{height:8px;background:#eee;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.candle.dark .blow-meter{background:#3a2c22;border-color:#000}
.blow-meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--maroon),var(--gold))}
.candle small{color:var(--muted)}
.candle.dark small{color:#b9a68f}
.stage-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.status{font-size:14px;color:var(--muted);background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px}

/* birthday-cute games */
.game-frame{border-radius:22px;overflow:hidden;border:2px solid #1b130e;box-shadow:var(--shadow);background:#0a0a0f;padding:18px 12px;display:grid;place-items:center;touch-action:none}
#catch-canvas,#gifts-canvas{border-radius:12px;touch-action:none;cursor:pointer;max-width:100%;height:auto;display:block;box-shadow:0 0 40px rgba(232,200,106,.12)}
#catch-canvas{width:min(400px,84vw)}
#gifts-canvas{width:min(360px,82vw)}
#big-cake{width:min(280px,70vw);height:auto;cursor:pointer;transition:transform .15s;display:block;margin:0 auto;touch-action:manipulation}
#big-cake:active{transform:scale(.93) rotate(-3deg)}

/* memory — her real photos */
.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.mcard{aspect-ratio:3/3.6;background:var(--card);border:2px solid var(--ink);border-radius:16px;display:grid;place-items:center;cursor:pointer;font-size:34px;position:relative;box-shadow:4px 4px 0 var(--ink);transition:transform .18s;touch-action:manipulation}
.mcard:hover{transform:translateY(-2px)}
.mcard .mback{font-family:"Fraunces",serif;font-style:italic;font-size:28px}
.mcard.flipped,.mcard.matched{background:#1b130e;color:var(--cream);border-color:#1b130e}
.mcard.matched{box-shadow:4px 4px 0 var(--gold);animation:matchpop .4s ease}
@keyframes matchpop{0%{transform:scale(1)}50%{transform:scale(1.06) rotate(-1deg)}100%{transform:scale(1)}}
.mcard small{position:absolute;bottom:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.mcard.photo{aspect-ratio:1/1.18;padding:0;overflow:hidden}
.mcard.photo .mface{position:absolute;inset:0;display:grid;place-items:center}
.mcard.photo img.mfront{width:100%;height:100%;object-fit:cover;display:none}
.mcard.photo.flipped img.mfront,.mcard.photo.matched img.mfront{display:block}
.mcard.photo .mback{background:var(--card);color:var(--ink);font-size:32px}
.mcard.photo.flipped .mback,.mcard.photo.matched .mback{display:none}
.mcard.photo small{display:none;z-index:2;background:rgba(20,10,5,.65);color:#fff;padding:2px 10px;border-radius:999px;opacity:1}
.mcard.photo.matched small{display:block}
@media(max-width:640px){.memory-board{grid-template-columns:repeat(3,1fr)}}

/* quiz */
.quiz-list{display:grid;gap:14px;margin-top:18px}
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.quiz-card h3{font-family:"Fraunces",serif;margin:0 0 12px;font-size:22px}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opts button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:inherit;cursor:pointer}
.opts button.right{background:#1b8a6b;color:#fff;border-color:#1b8a6b}
.opts button.wrong{background:var(--maroon);color:#fff;border-color:var(--maroon);animation:shake .3s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.opts button.toggle.sel{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.quiz-card small{color:var(--muted)}
#wish-jar{margin-top:14px;min-height:90px;background:#1b130e;border-radius:14px;padding:18px 14px 14px;position:relative;display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}
.jar-label{position:absolute;top:-11px;left:16px;background:var(--gold2);border-radius:999px;padding:2px 12px;font-size:12px;font-weight:800;letter-spacing:.1em}
.wish-star{background:var(--cream);border-radius:999px;padding:6px 12px;font-size:13px;animation:rise .4s ease}

/* finale */
.finale-title{font-size:clamp(42px,12vw,120px)}
.finale-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:10px}
@media(max-width:860px){.finale-grid{grid-template-columns:1fr}}
.letter{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);line-height:1.7;font-size:16px}
.letter-head{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:12px;margin-bottom:12px}
.sign{margin-top:18px;font-family:"Fraunces",serif;font-style:italic}
.reasons{margin-top:18px}
.reason-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}
.reason{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px;cursor:default;transition:all .2s}
.reason:hover{background:var(--ink);color:var(--cream);transform:rotate(-1deg) scale(1.03)}
.finale-side{display:grid;gap:14px}
.cake-cut,.card-dl{background:var(--ink);color:var(--cream);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.cake-cut h3,.card-dl h3{font-family:"Fraunces",serif;margin:0 0 4px;font-size:24px}
.cake-cut p{opacity:.7;margin:0 0 10px}
#big-cake{filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.slices{display:flex;gap:8px;margin-top:10px;min-height:30px;flex-wrap:wrap}
.slice{background:var(--cream);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px}
.bcard{background:linear-gradient(135deg,#fff8ee,#e8c86a);color:var(--ink);border-radius:14px;padding:18px;text-align:center;margin:12px 0;border:2px solid #fff}
.bcard strong{display:block;font-size:20px;letter-spacing:.02em}
.bcard span{font-size:13px;opacity:.7}
.bcard i{display:block;margin-top:8px;font-style:normal;font-weight:800;letter-spacing:.2em}
.user-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.user-photos img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.2)}
.photo-slot.small{border:1px dashed rgba(255,255,255,.3);border-radius:12px;margin-top:12px;color:#fff8ee}
.credits{margin-top:22px;text-align:center;color:var(--muted);font-size:13px}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:999px;opacity:0;transition:all .3s;z-index:60;font-size:14px;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- mobile-first pass ---- */
html{-webkit-text-size-adjust:100%}
body{touch-action:manipulation}
.topbar{flex-wrap:wrap;row-gap:10px}
.journey-wrap{flex:1 1 100%;order:3;max-width:none;min-width:0}
.journey-steps{overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.journey-steps::-webkit-scrollbar{display:none}
.journey-steps span{white-space:nowrap;flex:none}
canvas{touch-action:none}
.game-frame{padding:12px 6px}
#flappy-canvas{width:min(288px,82vw)}
.quiz-card .row{flex-wrap:wrap}
.quiz-card .row .btn-primary{flex:1;min-width:140px}
@media(max-width:640px){
  #toast{left:12px;right:12px;transform:translateY(20px)}
  #toast.show{transform:translateY(0)}
  #stages{padding:20px 14px 64px}
  h2{font-size:clamp(30px,9vw,44px)}
  .sub{font-size:15.5px}
  .candle-row{gap:12px}
  .candle{min-width:100%;padding:18px 10px 14px}
  .poster{transform:none;box-shadow:4px 4px 0 var(--ink)}
  .wick-flame{height:270px}
  .gif-candle{bottom:50px;width:140px;height:210px;margin-left:-70px}
  .frosting{bottom:6px;height:84px}
  .wish-word{font-size:24px;min-height:34px}
  .topbar{gap:10px;padding:10px 12px}
  .journey-steps{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .brand{font-size:12px}
  .pill-btn,.btn-primary{padding:13px 18px}
  .filmstrip{grid-auto-columns:min(180px,58vw)}
  #big-cake{width:min(220px,64vw)}
  .poster-bottom{flex-wrap:wrap}
}

/* ---- real photos: golden-hour wanderlust theme ---- */
.gate-right{position:relative}
.hero-polaroid{
  margin:18px 0 0;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:10px 10px 8px;box-shadow:var(--shadow);transform:rotate(-2.4deg);max-width:300px;
}
.hero-polaroid img{width:100%;height:300px;object-fit:cover;object-position:top;border-radius:3px;display:block}
.hero-polaroid figcaption{font-family:"Fraunces",serif;font-style:italic;font-size:13px;padding:8px 4px 2px;color:#4a3f36}
.photo-slot.real{font-size:13px}
.real-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ph-real{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;transition:transform .2s}
.ph-real:hover{transform:rotate(-1.5deg) scale(1.04)}
.ph-real img{width:100%;height:96px;object-fit:cover;object-position:top;border-radius:6px;display:block}
.ph-real figcaption{font-size:11px;text-align:center;padding:5px 0 2px;color:var(--muted);font-weight:600}

.sunset-banner{
  position:relative;border-radius:20px;overflow:hidden;margin:14px 0 6px;
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);min-height:190px;
  display:grid;align-items:end;
}
.sunset-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sunset-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,5,.05) 30%,rgba(20,10,5,.72))}
.sunset-banner p{
  position:relative;z-index:1;margin:0;padding:60px 22px 18px;color:#FFF8EE;
  font-family:"Fraunces",serif;font-style:italic;font-size:clamp(18px,3.4vw,28px);line-height:1.3;
}
.diary{margin:20px 0 4px}
.diary h3{font-family:"Fraunces",serif;font-size:24px;margin:0 0 4px}
.diary h3 small{font-family:"Outfit",sans-serif;font-size:12px;color:var(--muted);font-weight:400;letter-spacing:.06em}
.filmstrip{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(220px,62vw);gap:12px;
  overflow-x:auto;padding:12px 4px 16px;scroll-snap-type:x mandatory;
  background:var(--ink);border-radius:18px;border:2px solid var(--ink);
}
.filmstrip figure{
  margin:0;background:var(--cream);border-radius:12px;padding:8px 8px 6px;scroll-snap-align:start;
  transform:rotate(.6deg);transition:transform .2s;
}
.filmstrip figure:nth-child(even){transform:rotate(-.8deg)}
.filmstrip figure:hover{transform:rotate(0) scale(1.03)}
.filmstrip img{width:100%;height:210px;object-fit:cover;object-position:top;border-radius:8px;display:block}
.filmstrip figcaption{font-size:12px;font-weight:600;padding:7px 2px 3px;color:#4a3f36}
.user-photos img{border:2px solid rgba(255,255,255,.25)}
@media(max-width:640px){.hero-polaroid{max-width:100%}.hero-polaroid img{height:340px}}