:root{--green:#061b14;--cream:#f7f0e2;--gold:#edba48;--lime:#cbe86e;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--green);color:var(--cream);font-family:var(--sans);overflow-x:hidden}body.locked{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}h1,h2,p{margin-top:0}h1,h2{font-family:var(--serif);line-height:.93;letter-spacing:-.045em}em{color:var(--gold);font-weight:600}.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.19em;color:var(--lime)}.intro{position:fixed;z-index:50;inset:0;display:grid;place-content:center;text-align:center;padding:2rem;background:radial-gradient(circle at 50% 30%,#8b692d55,transparent 35%),var(--green);transition:.8s cubic-bezier(.76,0,.24,1)}.intro.opened{transform:translateY(-105%);opacity:0;pointer-events:none}.intro h1{font-size:clamp(3.6rem,17vw,8rem);margin:.8rem 0}.gift{width:72px;height:72px;margin:auto;border:1px solid #edba4877;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:2rem;animation:pulse 2s infinite}.tiny{color:#a9b7b1;margin-bottom:1.8rem}.pill{border:0;border-radius:99px;background:var(--gold);color:var(--green);padding:1rem 1.3rem;font-weight:700;box-shadow:0 12px 30px #0005}.pill span{margin-left:1rem}.panel{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;overflow:hidden}.panel>img,.story-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#03100b25 30%,#04140deb 92%)}nav{position:absolute;z-index:2;top:max(1.2rem,env(safe-area-inset-top));left:1.2rem;right:1.2rem;display:flex;align-items:center;justify-content:space-between}.brand{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--green);font:700 1.35rem var(--serif)}nav button{border:1px solid #fff6;background:#08201799;color:#fff;border-radius:99px;padding:.7rem .9rem;backdrop-filter:blur(10px)}.copy{position:relative;z-index:2;padding:1.3rem;width:100%;padding-bottom:5rem}.hero h1{font-size:clamp(3.5rem,16vw,8rem);margin:.55rem 0 1rem}.joke{display:inline-block;color:#f5f0e7;background:#071a13aa;border:1px solid #ffffff22;border-radius:99px;padding:.7rem 1rem;margin:0;backdrop-filter:blur(8px);font-size:.85rem}.scroll{position:absolute;z-index:3;bottom:1.2rem;left:1.3rem;right:1.3rem;padding-top:.8rem;border-top:1px solid #fff5;display:flex;justify-content:space-between;color:#fff;text-decoration:none;font-size:.75rem}.scroll b{font-size:1.3rem;animation:bob 1.3s infinite}.interlude{min-height:52svh;display:grid;align-content:center;text-align:center;padding:4rem 1.3rem;background:var(--cream);color:var(--green)}.interlude h2{font-size:clamp(3rem,14vw,7rem);margin:.6rem 0 1.5rem}.interlude .eyebrow{color:#4a6a3c}.interlude span{color:#64716c;font-size:.8rem}.story-card{height:88svh;min-height:590px;position:relative;overflow:hidden}.story-card:nth-child(3n+2){height:74svh}.story-card .shade{background:linear-gradient(180deg,transparent 45%,#03120ce8)}.story-card .copy{position:absolute;bottom:0;padding-bottom:2rem}.story-card h2{font-size:clamp(2.8rem,13vw,6.5rem);margin:.3rem 0 1rem}.story-card .number{color:var(--gold);font-size:.7rem;letter-spacing:.18em}.story-card .tap{position:absolute;right:1.2rem;top:1.2rem;z-index:3;width:42px;height:42px;border:1px solid #fff6;border-radius:50%;background:#06171188;color:#fff;font-size:1.3rem;backdrop-filter:blur(8px)}.story-card img{transition:transform 8s ease}.story-card.visible img{transform:scale(1.05)}.finale .copy{padding-bottom:2.4rem}.finale h2{font-size:clamp(3.3rem,15vw,7rem);margin:.5rem 0 1rem}.finale .pill{display:block;width:100%;margin:1.5rem 0 .3rem}.share{display:block;width:100%;border:0;background:transparent;color:#fff;padding:1rem;text-decoration:underline;text-underline-offset:4px}#confetti{position:fixed;z-index:80;inset:0;width:100%;height:100%;pointer-events:none}dialog{padding:0;border:0;background:#03120cf2;width:100%;height:100%;max-width:none;max-height:none}dialog[open]{display:grid;place-items:center}dialog::backdrop{background:#03120c}dialog img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:.4rem}dialog button{position:fixed;z-index:2;right:1rem;top:1rem;width:48px;height:48px;border:1px solid #fff5;border-radius:50%;background:#0009;color:#fff;font-size:2rem}.reveal{opacity:0;transform:translateY(22px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@keyframes pulse{50%{transform:scale(1.08);box-shadow:0 0 50px #edba4833}}@keyframes bob{50%{transform:translateY(5px)}}@media(min-width:760px){nav{left:5vw;right:5vw}.copy{padding-left:6vw;padding-right:6vw}.hero .copy,.finale .copy{max-width:900px}.scroll{left:6vw;right:6vw}.hero>img{object-position:center 35%}.story{display:grid;grid-template-columns:1fr 1fr}.story-card,.story-card:nth-child(3n+2){height:90vh}.story-card:nth-child(3n){grid-column:span 2}.story-card:nth-child(3n)>img{object-position:center 35%}.story-card .copy{padding:3rem}.finale>img{object-position:center 26%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Keep every mobile photo frame consistent and prioritize faces in the upper area. */
.panel>img,.story-card>img{object-position:center 24%}
.story-card,.story-card:nth-child(3n+2){height:84svh}
@media(min-width:760px){.panel>img,.story-card>img,.story-card:nth-child(3n)>img,.finale>img{object-position:center 28%}.story-card,.story-card:nth-child(3n+2){height:90vh}}