@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--wine:#742f41;--wine-dark:#532332;--rose:#b75f6b;--cream:#fffaf6;--ink:#392b2b;--muted:#795e62;--line:#ead9d1;--ease:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1)}
*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;color:var(--ink);background:#f7f1ea;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--wine);outline-offset:5px}button:disabled{opacity:.32;cursor:default}h1,h2,p,figure{margin:0}h1,h2,.serif{font-family:'Playfair Display',Georgia,serif;font-weight:500}h1{font-size:clamp(42px,5.1vw,74px);line-height:1.08;letter-spacing:-.045em}h2{font-size:clamp(36px,4vw,54px);line-height:1.13;letter-spacing:-.035em}h1 em,h2 em{color:var(--wine);font-weight:500}p{line-height:1.7}img{display:block;max-width:100%} [tabindex="-1"]:focus{outline:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 8% 30%,#eedad980,transparent 50%),radial-gradient(ellipse at 95% 90%,#ead8c380,transparent 48%);z-index:-1}.shell{max-width:1256px;margin:auto;padding:0 48px}.topbar{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:'Playfair Display',serif;font-size:23px;color:var(--wine);letter-spacing:-.5px}.brand span{font-style:italic}.utilities{display:flex;gap:8px}.quiet{border:0;background:transparent;color:var(--muted);padding:12px;min-height:44px;font-size:12px}.quiet:hover{color:var(--wine)}.chapters{display:flex;gap:8px;max-width:560px;margin:0 auto 38px}.chapter{flex:1;position:relative;border:0;background:none;padding:16px 8px 12px;text-align:left;color:var(--muted);font-size:12px;white-space:nowrap}.chapter::before,.chapter::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#dfcec7}.chapter::after{background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}.chapter[aria-current="step"]{color:var(--wine)}.chapter[aria-current="step"]::after,.chapter.complete::after{transform:scaleX(1)}.chapter span{margin-right:8px;font-size:10px;opacity:.65}.scene{min-height:620px;padding:14px 0 36px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;min-height:570px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:700;color:var(--wine);margin-bottom:24px}.intro-copy{max-width:460px}.lede{color:var(--muted);font-size:16px;margin-top:24px;max-width:390px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid transparent;border-radius:999px;padding:15px 25px;min-height:50px;font-size:13px;font-weight:600;transition:transform .3s var(--ease),background .3s,box-shadow .3s}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 22px #742f4117}.btn:active:not(:disabled){transform:scale(.97)}.primary{background:var(--wine);color:white}.primary:hover{background:var(--wine-dark)}.secondary{background:transparent;border-color:#d8bfc0;color:var(--wine)}.intro-copy .btn{margin-top:32px}.micro{font-size:11px;color:var(--muted);margin-top:16px}.envelope-wrap{position:relative;padding:20px 24px 0}.envelope-wrap::before{content:'';position:absolute;inset:0;border:1px solid #e8d6cb;border-radius:50%;transform:rotate(-15deg);z-index:-1}.envelope-caption{text-align:center;font-family:'Playfair Display',serif;font-size:18px;font-style:italic;color:var(--wine);margin:30px 0 10px}.envelope-stage{max-width:440px}.letter-text{opacity:0;transition:opacity .6s .7s}.is-open .letter-text{opacity:1}.seal{font-size:28px}.signature{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:11px;padding:26px 0 30px}.signature::before,.signature::after{content:'';width:38px;height:1px;background:#d8bfc0}.album{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}.album-copy{padding:24px 0}.album-copy h2{max-width:360px}.album-note{font-family:'Playfair Display',serif;font-style:italic;font-size:23px;color:var(--wine);margin-top:30px;min-height:64px}.album-count{font-size:11px;letter-spacing:.13em;color:var(--muted);margin-top:25px}.photo-card{padding:14px 14px 0;background:#fffcf8;border:1px solid #e7d9cf;box-shadow:0 22px 65px #68473512;border-radius:5px;position:relative}.photo-card::before{content:'';width:84px;height:25px;background:#e8d8bfc9;position:absolute;top:-12px;left:calc(50% - 42px);transform:rotate(-4deg);z-index:2}.photo-stage{position:relative;height:clamp(330px,56vh,590px);background:#efe9e1;overflow:hidden;touch-action:pan-y pinch-zoom}.photo-stage img{position:absolute;width:100%;height:100%;object-fit:contain;inset:0}.photo-stage button{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:zoom-in}.photo-footer{display:flex;align-items:center;justify-content:space-between;padding:17px 7px;gap:12px}.photo-footer p{font-family:'Playfair Display',serif;font-style:italic;font-size:16px}.photo-footer span{color:var(--muted);font-size:10px}.photo-controls{display:flex;gap:10px;align-items:center;margin-top:24px}.arrow{height:48px;width:48px;border-radius:50%;border:1px solid #d6c1ba;background:transparent;color:var(--wine);font-size:22px;transition:background .2s,transform .3s}.arrow:hover:not(:disabled){background:#eadbd3}.arrow:active:not(:disabled){transform:scale(.94)}.dots{display:flex;gap:0;flex-wrap:wrap;margin-top:22px}.dot{width:32px;height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center}.dot::after{content:'';height:5px;width:5px;border-radius:50%;background:#ccb5ad;transition:width .4s var(--ease),background .4s}.dot[aria-current="true"]::after{width:20px;background:var(--wine)}.album-copy>.btn{margin-top:28px}.final-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}.letter-paper{position:relative;background:#fffcf8;padding:48px;border:1px solid var(--line);box-shadow:0 20px 60px #6847350c;transform:rotate(-1deg)}.letter-paper p{color:var(--muted);margin-top:22px;font-size:16px}.letter-paper .salutation{font-family:'Playfair Display',serif;font-size:25px;color:var(--wine);margin:0}.letter-paper .signoff{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--wine)}.wish{text-align:center}.wish h2{font-size:44px}.wish .cake{margin:28px auto 24px}.wish p{color:var(--muted);max-width:340px;margin:16px auto 22px}.wish .actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.wish .quiet{margin-top:12px}.motion-off *, .motion-off *::before,.motion-off *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.motion-off #fx{display:none}.lightbox{border:0;padding:0;background:#201b19;color:white;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0}.lightbox::backdrop{background:#201b19ed}.lightbox-inner{height:100%;display:flex;flex-direction:column;padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.lightbox .quiet{color:white;font-size:14px}.lightbox img{flex:1;min-height:0;width:100%;object-fit:contain;margin:12px 0}.lightbox-controls{display:flex;justify-content:center;gap:16px;align-items:center}.lightbox .arrow{color:white;border-color:#786966}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#fx{position:fixed;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}.toast{text-align:center;color:var(--wine);font-size:12px;min-height:24px;margin-top:10px}
.envelope-stage {
  position: relative; width: min(100%, 460px); height: 360px; margin: 0 auto;
  animation: floaty 4.5s ease-in-out infinite;
}
.envelope-stage.is-open { animation-play-state: paused; }
.envelope-stage[role="button"] { cursor: pointer; }
.envelope-stage:focus-visible { outline: 3px solid #a54459; outline-offset: 6px; border-radius: 16px; }
.envelope {
  position: absolute; inset: auto 0 16px; height: 235px;
  border-radius: 5px 5px 13px 13px; background: #dcb1ac;
  box-shadow: 0 18px 38px rgba(97, 43, 53, .19);
  perspective: 900px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.envelope-stage:not(.is-open):hover .envelope {
  transform: translateY(-4px) rotate(-1.2deg);
  box-shadow: 0 26px 46px rgba(97, 43, 53, .22);
}
.letter {
  --lift: 112px;
  position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 12px;
  height: 190px; padding: 25px 22px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: #fffaf6; border: 1px solid #efdcd6; border-radius: 5px;
  box-shadow: 0 5px 14px rgba(97, 43, 53, .10);
  will-change: transform;
}
.letter-rule { width: 38px; height: 2px; margin-bottom: 17px; background: #bd7880; }
.letter-text { max-width: 20rem; color: var(--wine); font-size: 21px; line-height: 1.4; }
.letter-text .word { display: inline-block; opacity: 0; transform: translateY(8px); }
.pocket {
  position: absolute; z-index: 3; inset: 0; background: #efd1c9;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 13px 13px;
}
.pocket::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 55%);
}
.flap {
  position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 59%;
  background: #e8bfb8; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; backface-visibility: hidden;
  transition: transform .8s var(--ease-in-out), z-index 0s .4s;
}
.seal {
  position: absolute; z-index: 5; top: 43%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--wine); color: #fff8f2;
  box-shadow: 0 3px 8px rgba(97, 43, 53, .2);
  animation: sealPulse 2.4s ease-in-out infinite;
  transition: opacity .35s ease, scale .45s var(--ease);
}
.is-open .flap { transform: rotateX(180deg); z-index: 1; }
.is-open .seal { opacity: 0; scale: .5; animation: none; }
.is-open .letter { animation: letterOut 1.4s var(--ease) .4s both; }
.is-open .letter-text .word { animation: wordIn .7s var(--ease) both; animation-delay: calc(1.15s + var(--i) * .08s); }

.cake { position: relative; width: 200px; height: 190px; margin: 4px auto 8px; cursor: pointer; }
.plate {
  position: absolute; bottom: 0; left: 0; width: 200px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 14px rgba(97, 43, 53, .15);
}
.cake-body {
  position: absolute; bottom: 8px; left: 20px; right: 20px; height: 70px;
  border-radius: 6px 6px 12px 12px;
  background: repeating-linear-gradient(90deg, #e8bfb8 0 20px, #efd1c9 20px 40px);
}
.cake-top { position: absolute; bottom: 72px; left: 14px; right: 14px; height: 26px; border-radius: 14px 14px 6px 6px; background: var(--wine); }
.cake-top::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 100%; height: 12px;
  background: radial-gradient(circle at 10px 0, var(--wine) 7px, transparent 7.5px) 0 0 / 24px 12px repeat-x;
}
.candle {
  position: absolute; bottom: 98px; left: 50%; width: 12px; height: 48px; margin-left: -6px; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #fffaf6 0 6px, #b75f6b 6px 12px);
}
.flame {
  position: absolute; bottom: 100%; left: 50%; width: 16px; height: 26px; margin: 0 0 3px -8px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6c9 0 25%, #ffcf4a 45%, #ff8a3d 85%);
  box-shadow: 0 0 18px 6px rgba(255, 190, 80, .55);
  transform-origin: 50% 90%;
  animation: flicker 1.6s ease-in-out infinite;
  transition: opacity .5s ease, transform .5s var(--ease);
}
.smoke { position: absolute; bottom: 100%; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(120, 110, 110, .4); opacity: 0; }
.cake.is-out .flame { opacity: 0; animation: none; transform: scale(.2) translateY(-6px); }
.cake.is-out .smoke { animation: smoke 1.8s var(--ease) forwards; }
#finale.is-celebrating .cake { animation: pop .8s var(--ease); }

@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetOut { to { transform: translateY(100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wordIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeOutDown { to { opacity: 0; transform: translateY(10px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes popOut { to { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes enterNext { from { opacity: 0; transform: translate3d(70px, 0, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes enterPrev { from { opacity: 0; transform: translate3d(-70px, 0, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes leaveNext { to { opacity: 0; transform: translate3d(-70px, 0, 0) scale(.96); } }
@keyframes leavePrev { to { opacity: 0; transform: translate3d(70px, 0, 0) scale(.96); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes letterOut {
  0%   { transform: translateY(0); z-index: 2; }
  55%  { transform: translateY(calc(var(--lift) * -1 - 46px)); z-index: 2; }
  56%  { z-index: 6; }
  100% { transform: translateY(calc(var(--lift) * -1)); z-index: 6; }
}
@keyframes sealPulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
@keyframes blink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes flipOut { to { transform: rotateY(-75deg) translateX(-3%); opacity: 0; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes imgIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(116, 47, 65, .35); } 50% { box-shadow: 0 0 0 12px rgba(116, 47, 65, 0); } }
@keyframes flicker {
  0%, 100% { transform: rotate(-2deg) scaleY(1); }
  25% { transform: rotate(2deg) scaleY(1.07); }
  50% { transform: rotate(-1deg) scaleY(.96); }
  75% { transform: rotate(3deg) scaleY(1.05); }
}
@keyframes smoke { 0% { opacity: .7; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(3.2); } }
@keyframes floatUp {
  0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  10% { opacity: .18; }
  90% { opacity: .1; }
  100% { transform: translate3d(var(--drift, 0), -115vh, 0) rotate(25deg); opacity: 0; }
}


@media(min-width:1000px) and (min-height:850px){.scene{padding-top:50px;min-height:710px}}
@media(max-width:800px){.shell{padding:0 24px}.topbar{min-height:84px}.chapters{margin-bottom:18px}.intro{gap:26px}.intro h1{font-size:46px}.envelope-wrap{padding:0 12px}.envelope{height:190px}.envelope-stage{height:310px}.letter{height:160px;--lift:100px;padding:16px}.letter-text{font-size:17px}.album{gap:30px;grid-template-columns:.8fr 1.2fr}.final-layout{gap:30px}.letter-paper{padding:30px}}
@media(max-width:600px){.shell{padding:0 20px}.topbar{min-height:76px;gap:8px}.brand{font-size:20px}.quiet{padding:10px 6px;font-size:11px}.chapter{font-size:11px;padding-left:3px;padding-right:3px}.chapter span{margin-right:5px}.chapters{gap:12px;margin-bottom:20px}.scene{min-height:0;padding:10px 0 20px}.intro{display:flex;flex-direction:column;gap:8px;min-height:0;text-align:center}.intro-copy{display:contents}.eyebrow{font-size:9px;margin-bottom:16px}.intro h1{font-size:44px;max-width:340px}.lede{font-size:14px;margin-top:16px;max-width:310px}.intro-copy .btn{order:4;margin-top:20px;width:100%}.intro-copy .micro{order:5;margin-top:6px}.envelope-wrap{width:100%;max-width:380px;order:3;margin-top:14px;padding:0 16px}.envelope-wrap::before{inset:22px 0 -5px}.envelope-stage{height:280px}.envelope{height:175px;bottom:5px}.letter{height:150px;--lift:93px}.letter-text{font-size:17px}.envelope-caption{font-size:16px;margin:20px 0 0}.signature{font-size:10px;padding:22px 0}.album{display:flex;flex-direction:column;gap:20px;align-items:stretch}.album-copy{display:contents}.album-copy .eyebrow{margin-bottom:-10px}.album h2{font-size:36px;max-width:none}.album h2 br{display:none}.album-note{order:2;min-height:0;margin:0;text-align:center;font-size:20px}.photo-card{order:1;padding:10px 10px 0;margin-top:4px}.photo-stage{height:clamp(290px,49svh,510px)}.photo-footer{padding:14px 3px}.album-count{order:3;text-align:center;margin:0}.photo-controls{order:4;justify-content:center;margin:0}.dots{order:5;justify-content:center;margin:-14px 0 -16px}.album-copy>.btn{order:6;margin-top:8px}.album .micro{order:7;text-align:center;margin:-10px 0 0}.final-layout{display:flex;flex-direction:column;gap:38px}.letter-paper{padding:30px 26px}.letter-paper h2{font-size:34px}.letter-paper p{font-size:15px}.wish h2{font-size:36px}.wish{width:100%}.lightbox-inner{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Keep the decorative orbit inside narrow viewports without scaling content. */
html{overflow-x:clip}body{overflow-x:clip;padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:360px){.intro h1{font-size:38px}.brand{font-size:18px}.topbar .quiet{max-width:120px}.photo-footer{flex-wrap:wrap}.photo-footer span{font-size:9px}}

/* Desktop chapters share the available viewport; text keeps its natural size.
   Short windows and zoomed layouts retain normal document scrolling. */
@media (min-width: 1000px) and (min-height: 650px) {
  .shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 76px 54px minmax(0, 1fr) 48px;
  }
  .topbar { min-height: 0; }
  .chapters { width: 560px; margin: 0 auto; align-self: start; }
  main { display: grid; align-items: center; min-width: 0; }
  .scene { min-height: 0; padding: 14px 0; }
  .intro { min-height: 0; }
  .signature { padding: 12px 0; }
  .photo-stage { height: min(54dvh, calc(100dvh - 268px)); }
  .album-copy { padding: 0; }
  .album-note { margin-top: 20px; min-height: 0; }
  .album-count { margin-top: 20px; }
  .photo-controls { margin-top: 16px; }
  .dots { margin-top: 10px; }
  .album-copy > .btn { margin-top: 12px; }
  .letter-paper { padding: 32px 40px; }
  .letter-paper p { margin-top: 16px; }
  .wish .cake { margin: 20px auto 16px; }
}
@media (min-width: 1000px) and (min-height: 650px) and (max-height: 760px) {
  .intro h1 { font-size: 60px; }
  .album h2, .letter-paper h2 { font-size: 42px; }
  .wish h2 { font-size: 36px; }
  .album-copy .eyebrow { margin-bottom: 16px; }
  .album-note { font-size: 21px; margin-top: 16px; }
  .album-count { margin-top: 14px; }
  .album-copy .micro { margin-top: 10px; }
  .envelope-stage { height: 330px; }
  .envelope-caption { margin-top: 20px; }
  .letter-paper { padding: 26px 32px; }
  .final-layout { gap: 56px; }
}
/* Decorative motion settles naturally, keeping the greeting free of controls. */
.envelope-stage { animation-iteration-count: 1; }
.seal { animation-iteration-count: 2; }
.flame { animation-iteration-count: 3; }
.mobile-only { display: none; }
/* Portrait phone: fixed viewport budget, flexible photo area, thumb-level CTA. */
@media (max-width: 600px) and (orientation: portrait) and (min-height: 500px) {
  .shell {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
    display: grid;
    grid-template-rows: 48px 42px minmax(0, 1fr) 28px;
  }
  .topbar { min-height: 0; justify-content: center; }
  .brand { font-size: 19px; }
  .chapters { width: 100%; margin: 0; align-self: center; }
  .chapter { min-height: 40px; padding-top: 12px; padding-bottom: 8px; }
  main, .scene { min-height: 0; height: 100%; }
  .scene { padding: 10px 0 8px; }
  .signature { padding: 0; font-size: 9px; gap: 8px; }
  .signature::before, .signature::after { width: 20px; }
  .intro { height: 100%; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr) 48px; gap: 12px; }
  .intro-copy > .eyebrow, .intro-copy > .micro { display: none; }
  .intro h1 { font-size: clamp(32px, 9vw, 42px); max-width: none; }
  .intro .lede { font-size: 13px; line-height: 1.5; margin: 0 auto; max-width: 310px; }
  .intro-copy .btn { margin: 0; order: 4; min-height: 48px; }
  .envelope-wrap { order: 3; min-height: 0; height: 100%; margin: 0 auto; padding: 0 18px; display: grid; place-items: center; }
  .envelope-wrap::before { inset: 12px 0; }
  .envelope-caption { display: none; }
  .envelope-stage { width: 100%; height: 100%; max-height: 310px; }
  .envelope { height: clamp(120px, 20dvh, 175px); bottom: 6px; }
  .letter { height: clamp(110px, 17dvh, 145px); --lift: 70px; padding: 12px; }
  .letter-text { font-size: 16px; line-height: 1.4; }
  .letter-rule { margin-bottom: 10px; }
  .album { height: 100%; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto 44px 24px 48px; gap: 10px; }
  .album-copy > .eyebrow, .album-copy > .micro, .album-count { display: none; }
  .album h2 { font-size: 30px; text-align: center; }
  .photo-card { order: 1; min-height: 0; margin-top: 5px; display: grid; grid-template-rows: minmax(0,1fr) 34px; padding: 8px 8px 0; }
  .photo-stage { height: 100%; min-height: 0; }
  .photo-footer { padding: 6px 2px; flex-wrap: nowrap; }
  .photo-footer p { font-size: 13px; }
  .photo-footer span { display: none; }
  .album-note { order: 2; font-size: 17px; line-height: 1.4; margin: 0; }
  .photo-controls { order: 3; margin: 0; }
  .photo-controls .arrow { width: 44px; height: 44px; }
  .dots { order: 4; margin: 0; }
  .dot { height: 24px; }
  .album-copy > .btn { order: 5; margin: 0; min-height: 48px; }
  .final-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
  .letter-paper { transform: none; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 0; }
  .letter-paper h2 { font-size: clamp(28px, 8vw, 36px); }
  .letter-paper .eyebrow { margin: 0; }
  .letter-paper p { margin: 0; font-size: 14px; line-height: 1.6; }
  .letter-paper .signoff { font-size: 19px; }
  .mobile-only { display: inline-flex; }
  #open-wish { margin-top: auto; width: 100%; flex-shrink: 0; }
  #final:not(.show-wish) .wish, #final.show-wish .letter-paper { display: none; }
  .wish { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; gap: 14px; }
  .wish > .eyebrow { margin: 0; font-size: 9px; }
  .wish h2 { font-size: 34px; }
  .wish .cake { flex-shrink: 0; margin: 8px auto; }
  .wish p { margin: 0; font-size: 14px; }
  .wish .actions { width: 100%; }
  .wish .actions .btn { width: 100%; }
  .wish .quiet { margin: 0; min-height: 44px; }
}
@media (max-width: 600px) and (orientation: portrait) and (min-height: 500px) and (max-height: 680px) {
  .shell { grid-template-rows: 40px 38px minmax(0,1fr) 24px; padding-left: 16px; padding-right: 16px; }
  .scene { padding-top: 6px; }
  .intro { gap: 8px; }
  .intro h1 { font-size: 32px; }
  .intro .lede { font-size: 12px; }
  .album { gap: 6px; }
  .album h2 { font-size: 25px; }
  .album-note { font-size: 14px; }
  .letter-paper { padding: 16px 18px; gap: 12px; }
  .letter-paper h2 { font-size: 27px; }
  .letter-paper .eyebrow { display: none; }
  .letter-paper p { font-size: 13px; line-height: 1.5; }
  .letter-paper .signoff { font-size: 17px; }
  .wish { gap: 8px; }
  .wish h2 { font-size: 28px; }
  .wish .cake { margin: 0 auto; }
}

/* Vector-only UI icons: independent of Apple Color Emoji and fallback fonts. */
.icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; overflow: visible; }
.btn .icon, .arrow .icon { width: 20px; height: 20px; }
.arrow { display: inline-flex; align-items: center; justify-content: center; }
.seal .icon { width: 26px; height: 26px; }