@font-face{font-family:Centaur;src:url("assets/centaur.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Centaur;src:url("assets/centaur-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Parfumerie Text";src:url("assets/parfumerie-text.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Homemade Apple";src:url("assets/homemade-apple.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}

:root{--background:#b56d54;--chocolate:#1e100d;--cream:#faf4ed;--paper:#f4f0e5;--button:var(--chocolate);--transition:650ms;--serif:Centaur,"Times New Roman",serif;--script:"Parfumerie Text","Brush Script MT",cursive;--handwriting:"Homemade Apple",cursive;--type-names:clamp(3.4rem,calc(.5rem + 14vw),8rem);--type-heading:clamp(2.8rem,calc(.4rem + 11.5vw),6.25rem);--type-body:1.25rem;--type-detail:1.5rem;--type-label:1rem;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--paper-shadow:0 3px 6px rgba(30,16,13,.12),0 12px 24px rgba(30,16,13,.2);--ease-out:cubic-bezier(.22,.61,.36,1);color-scheme:light}
*{box-sizing:border-box}
html{background:var(--background);scroll-behavior:smooth}
body{margin:0;color:var(--chocolate);background:var(--background);font-family:var(--serif);font-size:1.125rem;font-weight:400;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--chocolate);outline-offset:7px}
img{display:block;max-width:100%}
p,h1,h2,figure{margin:0}
h1,h2{font-weight:400}
[hidden]{display:none!important}
.spaced{letter-spacing:.117em;text-transform:uppercase}

/* The artwork is preserved as images, with its transparent margins cropped in CSS. */
.landing{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:100px 24px 80px;overflow:hidden}
.landing-photo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:grayscale(1);transition:transform var(--transition) ease,filter var(--transition) ease}
/* Lift the dark clothing into soft gray without clipping the ring's highlights. */
.landing-shade{position:absolute;inset:0;z-index:-2;background:rgba(255,255,255,.3)}
.landing-content{width:min(100%,800px);text-align:center;transition:opacity var(--transition) ease,transform var(--transition) cubic-bezier(.22,.61,.36,1)}
.mail-heading{font-size:clamp(1rem,1.9vw,1.63rem);line-height:1.4;color:#faf4ed}
.couple-names{font-family:var(--script);font-size:clamp(3.8rem,9vw,7.655rem);line-height:1.12;margin:0 0 35px;color:#fefdfa;overflow-wrap:normal;text-wrap:balance}
.envelope-link{display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;margin:0 auto;text-decoration:none}
.envelope{display:block;position:relative;width:min(470px,78vw);aspect-ratio:508 / 332;filter:drop-shadow(0 7px 10px rgba(22,11,8,.19));transform-origin:50% 65%;transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .45s}
.envelope-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.seal{position:absolute;left:41.9%;top:48.5%;width:16.2%;aspect-ratio:415/395;transition:transform .3s ease}
.seal img{position:absolute;max-width:none;width:137.59%;height:auto;left:-18.8%;top:-51.7%}
.open-prompt{display:block;margin-top:31px;font-size:clamp(.92rem,1.83vw,1.58rem);line-height:1.4;color:var(--chocolate);text-shadow:0 1px 8px rgba(255,255,255,.35)}
.envelope-link:focus-visible{outline-color:var(--cream);outline-offset:16px;border-radius:2px}
.is-opening .landing-content{opacity:0;transform:translateY(-14px) scale(1.035)}
.is-opening .landing-photo{transform:scale(1.04);filter:grayscale(1) brightness(.72)}
.is-opening .seal{transform:scale(1.1) rotate(-7deg)}
@media(hover:hover){.envelope-link:hover .envelope{transform:translateY(-6px) rotate(-.7deg);filter:drop-shadow(0 15px 14px rgba(22,11,8,.25))}.envelope-link:hover .seal{transform:rotate(5deg)}.postcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:20px 24px 28px rgba(30,16,13,.22)}}

/* Main invitation. Separate documents also support direct linking and browser Back. */
.invitation-page{position:relative;isolation:isolate}
.invitation-page main{position:relative;z-index:1;animation:page-arrive .9s ease both}
.hero-announcement{position:relative;z-index:1;display:grid;width:100%;height:100vh;height:100svh;place-items:end center;overflow:hidden;isolation:isolate;text-align:center}
.hero-announcement-media{--hero-image-shift:0px;position:absolute;inset:0;z-index:-2;transform:translate3d(0,var(--hero-image-shift),0);will-change:transform}
.hero-announcement-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 30%}
.hero-announcement-companion{display:none}
/* An irregular, softly textured torn-paper edge joins the two portraits. */
@media(min-width:801px){
  .hero-announcement-photo{width:50%;object-position:50% 40%}
  .hero-announcement-companion{display:block;position:absolute;inset:0 0 0 50%}
  .hero-announcement-companion img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%}
  .hero-announcement-media::after{content:"";position:absolute;inset:0 auto 0 50%;width:clamp(24px,2.2vw,36px);transform:translateX(-50%);background:url("assets/hero-torn-paper.svg") center / 100% 100% no-repeat;filter:drop-shadow(1px 0 2px rgba(30,16,13,.28));pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.hero-announcement-media{transform:none!important}}
.hero-announcement-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,10,8,.08) 0%,rgba(13,10,8,.05) 38%,rgba(13,10,8,.58) 100%);pointer-events:none}
.hero-announcement-copy{--hero-copy-shift:0px;width:min(100%,1180px);padding:0 24px 31vh;color:var(--cream);transform:translate3d(0,var(--hero-copy-shift),0);will-change:transform;filter:drop-shadow(0 3px 12px rgba(10,7,5,.55))}
.invitation-content{position:relative;z-index:2;background-color:var(--background)}
.announcement-kicker{font-family:"Homemade Apple","Address Script",var(--script);font-size:clamp(1.8rem,3.6vw,3.4rem);font-weight:400;font-style:normal;line-height:1.8;letter-spacing:0;text-transform:none;text-wrap:balance;color:#fff;-webkit-text-stroke:.35px #fff}
.hero-handwriting-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-ink-word{display:inline-block;height:1.8em;max-width:none;overflow:visible;vertical-align:top}
.announcement-names{font-family:var(--script);font-size:clamp(5rem,11.5vw,9.4rem);line-height:1.02;max-width:1180px;margin:0 auto;color:inherit;text-wrap:balance}
.announcement-names-ink{display:block}
.announcement-rings{position:relative;display:block;width:100px;height:74px;overflow:hidden;margin:2px auto 0;opacity:var(--rings-opacity,0);transform:translateY(var(--rings-shift,13px)) scale(var(--rings-scale,.82));transform-origin:center top;will-change:opacity,transform}
.announcement-rings img{position:absolute;max-width:none;width:114.2%;height:auto;left:-7.4%;top:-50.55%;filter:brightness(0) invert(1);opacity:.92}
.save-details{--save-heading-opacity:0;--save-heading-shift:28px;--save-postcard-opacity:0;--save-postcard-shift:42px;--save-postcard-scale:.975;--save-shade-opacity:0;position:relative;isolation:isolate;width:100%;height:260vh;height:260svh;margin:0;text-align:center}
.save-details-pin{position:sticky;top:0;display:grid;width:100%;height:100vh;height:100svh;place-items:center;overflow:hidden;padding:clamp(24px,4vh,42px) 24px}
.save-details-photo{position:absolute;inset:-10% 0;z-index:-3;width:100%;height:120%;max-width:none;object-fit:cover;object-position:50% 34%}
.save-details-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(16,13,11,.42) 0%,rgba(16,13,11,.18) 38%,rgba(16,13,11,.34) 100%);opacity:var(--save-shade-opacity);pointer-events:none;will-change:opacity}
.save-details-content{position:relative;z-index:1;width:100%;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);visibility:hidden}
.save-details[data-save-content-visible="true"] .save-details-content{visibility:visible}
.save-heading{font-family:var(--script);font-size:clamp(4.35rem,min(8vw,12vh),6.75rem);line-height:.92;max-width:1000px;margin:0 auto 0;color:var(--cream);opacity:var(--save-heading-opacity);transform:translate3d(0,var(--save-heading-shift),0);filter:drop-shadow(0 2px 9px rgba(12,9,7,.46));will-change:opacity,transform}
.save-champagne{position:relative;display:block;width:100px;height:66px;overflow:hidden;margin:0 auto 10px;opacity:var(--save-heading-opacity);transform:translate3d(0,var(--save-heading-shift),0);will-change:opacity,transform}
.save-champagne img{position:absolute;max-width:none;width:129.78%;height:auto;left:-14.848%;top:-16.37%;filter:brightness(0) invert(1) drop-shadow(0 2px 7px rgba(12,9,7,.38))}
.postcard-scene{width:min(760px,100%,calc((100vh - 300px) * 1.58));width:min(760px,100%,calc((100svh - 300px) * 1.58));margin:0 auto;opacity:var(--save-postcard-opacity);transform:translate3d(0,var(--save-postcard-shift),0) scale(var(--save-postcard-scale));transform-origin:center top;will-change:opacity,transform}
.postcard-scroll-camera{display:grid;width:100%;place-items:center}
.postcard{position:relative;display:grid;width:100%;aspect-ratio:1.58;margin:0;perspective:1600px;box-shadow:16px 16px 22px rgba(30,16,13,.16);text-align:center;transform-origin:50% 55%;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s;isolation:isolate}
.postcard-inner{display:grid;width:100%;height:100%;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.22,.61,.36,1)}
.postcard.is-flipped .postcard-inner{transform:rotateY(180deg)}
.postcard.is-scroll-driven .postcard-inner{transform:rotateY(var(--postcard-turn,0deg));transition:none}
.postcard-face{grid-area:1/1;min-width:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.postcard-front{position:relative;display:grid;grid-template-columns:minmax(0,.97fr) 1px minmax(0,1.03fr);min-height:100%;padding:22px 25px;background-color:#f4f0e5;background-image:radial-gradient(circle at 18% 27%,rgba(91,78,54,.1) 0 .55px,transparent .8px),radial-gradient(circle at 73% 61%,rgba(255,255,255,.8) 0 .7px,transparent 1px),repeating-linear-gradient(4deg,rgba(92,78,55,.025) 0 1px,transparent 1px 5px);background-size:7px 7px,11px 11px,100% 9px;color:color-mix(in srgb,var(--chocolate) 78%,#777);border:2px solid color-mix(in srgb,var(--chocolate) 82%,transparent);isolation:isolate}
.postcard-front::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--chocolate) 32%,transparent);box-shadow:inset 0 0 34px rgba(94,78,50,.055);pointer-events:none}
.postcard-front{transform:rotateY(180deg)}
.postcard-back{position:relative;min-height:100%;border:2px solid color-mix(in srgb,var(--chocolate) 82%,transparent);background:#fbf8f0;transform:rotateY(0deg);isolation:isolate}
.postcard-back::after{content:"";position:absolute;inset:9px;z-index:0;background:linear-gradient(180deg,rgba(16,12,9,.05),rgba(16,12,9,.23));pointer-events:none}
.postcard-back img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover;object-position:50% 50%}
.postcard-back-copy{position:absolute;top:13%;left:7%;z-index:1;display:flex;width:54%;flex-direction:column;align-items:center;color:#fff;font-family:"Homemade Apple","Address Script",var(--script);text-align:center;transform:rotate(-9deg);transform-origin:center;filter:drop-shadow(0 2px 7px rgba(19,11,7,.62))}
.postcard-back-title{max-width:100%;margin:0;color:inherit;font:inherit;font-size:clamp(3.5rem,7.1vw,5.45rem);font-weight:400;line-height:.85;letter-spacing:.01em;text-wrap:balance;-webkit-text-stroke:.45px rgba(255,255,255,.72);text-shadow:.6px 0 rgba(255,255,255,.9),-.5px .4px rgba(255,255,255,.75)}
.postcard-back-date{margin:12px 0 0;color:inherit;font:inherit;font-size:clamp(1.6rem,2.9vw,2.25rem);font-weight:400;line-height:1;letter-spacing:.08em;-webkit-text-stroke:.32px rgba(255,255,255,.72);text-shadow:.5px 0 rgba(255,255,255,.85)}
.postcard-message{display:flex;flex-direction:column;justify-content:space-evenly;padding:15px 28px 14px 12px;font-family:var(--serif);font-size:clamp(1.12rem,1.55vw,1.38rem);font-style:italic;line-height:1.1;text-align:left;text-wrap:balance}
.postcard-greeting,.postcard-signature{margin:0}
.postcard-mobile-copy{display:none}
.postcard-divider{position:relative;width:1px;margin:22px 0 20px;background:color-mix(in srgb,var(--chocolate) 62%,transparent)}
.postcard-divider span{position:absolute;top:50%;left:50%;width:11px;height:11px;background:#f4f0e5;border:1px solid color-mix(in srgb,var(--chocolate) 72%,transparent);transform:translate(-50%,-50%) rotate(45deg)}
.postcard-details{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 6px 13px 29px}
.postmark{position:absolute;top:0;right:0;width:min(282px,100%);height:132px;margin:0}
.postmark-monogram{position:absolute;z-index:3;left:20px;top:10px;display:flex;align-items:center;justify-content:center;width:112px;height:112px;padding-right:.1em;border:1.5px solid color-mix(in srgb,var(--chocolate) 72%,transparent);border-radius:50%;font-family:var(--script);font-size:3.8rem;font-variant-ligatures:none;letter-spacing:-.11em;line-height:1;color:color-mix(in srgb,var(--chocolate) 74%,#777)}
.postmark-lines{position:absolute;z-index:2;left:119px;right:80px;top:40px;height:58px;background:repeating-linear-gradient(to bottom,transparent 0 9px,color-mix(in srgb,var(--chocolate) 58%,transparent) 9px 10.5px)}
.postcard-stamp{position:absolute;z-index:1;top:0;right:0;width:126px;height:139px;object-fit:contain;filter:sepia(.08) saturate(.78) contrast(.92)}
.postcard-detail-lines{display:block;flex:none;width:100%;margin-top:142px;padding:2px 0 5px;font-family:var(--serif);font-size:clamp(1.22rem,2.1vw,1.7rem);font-style:italic;line-height:1.15}
.postcard-detail-lines p{padding:7px 5px 5px;border-bottom:1px solid color-mix(in srgb,var(--chocolate) 48%,transparent);text-wrap:balance}
.postcard-detail-lines time{font:inherit}
/* Hanging Polaroids echo the cream stationery above. */
.photo-filmstrip{--film-frame-width:clamp(178px,22vw,270px);--ribbon-gap:max(36px,calc(var(--film-frame-width) * .17));--ribbon-opacity:0;--ribbon-shift:58vh;position:relative;width:100%;height:100vh;height:100svh;margin:0}
.photo-filmstrip-pin{position:sticky;top:0;display:flex;width:100%;height:100vh;height:100svh;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:24px 0 18px;isolation:isolate;background:var(--chocolate)}
.photo-filmstrip-pin::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/ivory-paper-grain.svg") repeat;pointer-events:none;mix-blend-mode:soft-light}
.photo-filmstrip-intro{--intro-opacity:0;--rings-opacity:0;--rings-shift:13px;--rings-scale:.82;--intro-stage-shift:0px;position:relative;z-index:1;width:min(100%,1180px);padding:0 24px 10px;color:var(--cream);text-align:center;opacity:var(--intro-opacity);transform:translate3d(0,var(--intro-stage-shift),0);will-change:opacity,transform}
.photo-filmstrip-stage{position:relative;width:100%;padding:20px 0 14px;opacity:var(--ribbon-opacity);transform:translate3d(0,var(--ribbon-shift),0);transform-origin:center top;pointer-events:none;will-change:opacity,transform}
.photo-filmstrip[data-ribbon-visible="true"] .photo-filmstrip-stage{pointer-events:auto}
.filmstrip-viewport{position:relative;z-index:1;width:100%;padding:38px 0 28px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;cursor:grab;user-select:none;-webkit-user-select:none}
.filmstrip-viewport::-webkit-scrollbar{display:none}
.filmstrip-viewport:focus-visible{outline:2px solid var(--cream);outline-offset:-6px}
.filmstrip-viewport.is-dragging{cursor:grabbing}
.filmstrip-track,.filmstrip-group{display:flex;flex:0 0 auto;width:max-content}
.filmstrip-group{position:relative;gap:var(--ribbon-gap);padding:0 calc(var(--ribbon-gap) / 2);align-items:flex-start}
/* Each seamless photo group carries its own strand, including generated copies. */
/* Repeat the strand every five photos so the longer ribbon keeps small lights. */
.filmstrip-group::before{content:"";position:absolute;top:-50px;left:0;width:100%;height:114px;background:url("assets/warm-fairy-lights.png") left center / calc((var(--film-frame-width) + var(--ribbon-gap)) * 5) 100% repeat-x;pointer-events:none;filter:saturate(.9) brightness(1.12) drop-shadow(0 0 3px rgba(255,225,150,.24))}
.filmstrip-hanger{flex:0 0 var(--film-frame-width);width:var(--film-frame-width)}
.filmstrip-swing{position:relative;display:flex;width:100%;flex-direction:column;align-items:center;padding-top:24px;transform-origin:50% 0;animation:wedding-polaroid-sway var(--sway-period,3.2s) ease-in-out var(--sway-delay,-.8s) infinite alternate paused}
.photo-filmstrip[data-moving="true"] .filmstrip-swing{animation-play-state:running}
/* Crop to the narrow front face; its gripping tip ends inside the 14px paper border. */
.filmstrip-clip{position:absolute;top:-46px;left:50%;z-index:3;width:60px;height:90px;max-width:none;transform:translateX(-50%);clip-path:inset(11.8% 40.3% 8.9% 41%);pointer-events:none;user-select:none;-webkit-user-drag:none}
.filmstrip-frame{position:relative;z-index:1;width:100%;margin:0;padding:14px 14px 46px;background:var(--paper);box-shadow:0 2px 4px rgba(30,16,13,.05),0 7px 15px rgba(30,16,13,.1)}
.filmstrip-frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
@keyframes wedding-polaroid-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.pill-button{display:block;width:100%;padding:13px 22px 11px;border:0;border-radius:22px;background:var(--button);color:var(--cream);font-size:1.25rem;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;transition:filter .2s,transform .2s}
.pill-button:hover{filter:brightness(1.13)}
.pill-button:active{transform:scale(.99)}
.postcard-mobile-action{display:none}
.address-external{width:min(408px,100%);margin:0 auto;font-family:var(--serif);font-size:1.208rem;font-weight:400;letter-spacing:.117em;line-height:1.5;text-transform:uppercase}
.postcard-action{width:100%;margin:8px 0 3px;padding:9px 14px 8px;border-radius:18px;font-size:.88rem;font-style:normal;letter-spacing:.08em;line-height:1.3}
.closing{text-align:center;padding:18px 24px 28px}
.rumi-animation{width:min(100%,1280px);margin:12px auto 0}
.rumi-stage{position:relative;width:100%;height:190px;overflow:hidden;isolation:isolate}
.rumi-stage canvas{display:block;width:100%;height:100%}
.rumi-still{position:absolute;bottom:12px;left:calc(50% - 90px);width:180px;height:180px;background:url("assets/rumi-bouquet-still.png") center / contain no-repeat}
.rumi-animation+.back-link{margin-top:16px}
.back-link{display:inline-block;text-decoration:none;font-size:1.14rem;line-height:1.6;margin-top:75px;padding:8px;transition:opacity .2s}
.back-link:hover{text-decoration:underline;text-underline-offset:4px}
@keyframes page-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(min-width:1600px){.landing{padding-top:125px}.envelope{width:510px}.couple-names{margin-bottom:44px}}
@media(max-width:800px){
  .landing{padding:95px 22px 70px}
  .landing-content{transform:translateY(-8px)}
  .mail-heading{font-size:1rem;letter-spacing:.14em}
  .couple-names{font-size:clamp(3.4rem,12.5vw,5.15rem);line-height:1.2;margin:9px 0 46px}
  .envelope{width:min(470px,83vw)}
  .open-prompt{font-size:.94rem;letter-spacing:.11em;margin-top:27px;max-width:95vw}
  .hero-announcement-photo{object-position:50% 50%}
  .hero-announcement-copy{padding:0 18px 30vh}
  .photo-filmstrip{--film-frame-width:min(clamp(220px,70vw,300px),44svh);--ribbon-gap:30px;height:100vh;height:100svh}
  .photo-filmstrip-pin{padding-top:12px;padding-bottom:12px}
  .photo-filmstrip-intro{padding:0 18px}
  .photo-filmstrip-stage{padding:4px 0 8px}
  .filmstrip-viewport{padding-top:38px;padding-bottom:24px}
  .announcement-kicker{font-size:clamp(1.35rem,5.8vw,1.9rem)}
  .photo-filmstrip .announcement-names{font-size:clamp(3.5rem,17vw,6.5rem);line-height:1.06}
  .announcement-rings{width:76px;height:56px;margin-top:0}
  .save-details{height:260vh;height:260svh;padding:0}
  .save-details-pin{height:auto;min-height:100vh;min-height:100svh;padding:18px 16px}
  .save-details-photo{object-position:38% 43%}
  .save-details-content{max-height:none}
  .save-heading{font-size:clamp(3.85rem,15vw,5.25rem);line-height:.95;margin-bottom:0}
  .save-champagne{width:80px;height:53px;margin-bottom:8px}
  .postcard-scene{width:min(420px,100%)}
  .postcard-scroll-camera{height:auto;overflow:visible;isolation:isolate}
  .postcard{display:grid;min-height:0;aspect-ratio:1.5;box-shadow:10px 12px 18px rgba(30,16,13,.15);transform:none;transition:none}
  .postcard.is-scroll-driven:hover{transform:none;box-shadow:10px 12px 18px rgba(30,16,13,.15)}
  .postcard-inner{height:auto}
  .postcard-front{grid-template-columns:minmax(0,1fr);min-height:0;padding:14px 16px}
  .postcard-front::before{inset:5px}
  .postcard-back::after{inset:5px}
  .postcard-back img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
  .postcard-back-copy{top:12%;left:6%;width:58%;transform:rotate(-8deg)}
  .postcard-back-title{font-size:2.35rem;line-height:.88}
  .postcard-back-date{margin-top:6px;font-size:1.05rem}
  .postcard-message{align-items:center;justify-content:flex-start;gap:6px;min-width:0;padding:0;font-size:1.0625rem;line-height:1.25;text-align:center;text-wrap:pretty}
  .postcard-desktop-copy{display:none}
  .postcard-mobile-copy{display:block}
  .postcard-mobile-header{align-self:stretch;margin-bottom:auto;padding:0 40px 8px;border-bottom:1px solid rgba(30,16,13,.22);font-size:1rem;font-style:normal;line-height:1.2;text-align:center}
  .postcard-mobile-header span,.postcard-mobile-header time{display:block}
  .postcard-mobile-header span:first-child{font-size:1.125rem}
  .postcard-message .postcard-action{display:none}
  .postcard-mobile-action{display:block;width:min(280px,100%);min-height:48px;margin:16px auto 0;padding:13px 20px;background:var(--cream);color:var(--chocolate);border:1px solid rgba(30,16,13,.18);box-shadow:0 4px 18px rgba(0,0,0,.3);visibility:hidden;opacity:0;pointer-events:none}
  .postcard-mobile-action.is-visible{visibility:visible;opacity:1;pointer-events:auto}
  .postcard-mobile-action:focus-visible{outline-color:var(--cream);outline-offset:4px}
  .postcard-greeting,.postcard-signature{margin:0}
  .postcard-message>.postcard-signature.postcard-mobile-copy{margin-bottom:auto}
  .postcard-divider{display:none}
  .postcard-details{position:absolute;top:10px;right:12px;width:132px;height:64px;padding:0;pointer-events:none}
  .postmark{position:absolute;top:0;right:0;width:132px;height:63px;margin:0}
  .postmark-monogram,.postmark-lines{display:none}
  .postcard-stamp{width:58px;height:64px}
  .postcard-detail-lines{display:none}
  .address-external.postcard-action{width:min(260px,100%);min-height:44px;margin:2px auto;padding:11px 14px;font-size:1rem;letter-spacing:.045em;line-height:1.3}
  .address-external{font-size:1rem;letter-spacing:.06em}
  .closing{padding:18px 25px 24px}
  .rumi-stage{height:145px}
  .rumi-still{left:calc(50% - 65px);width:130px;height:130px}
  .rumi-animation+.back-link{margin-top:12px}
  .back-link{font-size:.94rem;margin-top:45px;padding:12px 8px}
}
@media(max-width:360px){.landing{padding-left:16px;padding-right:16px}.couple-names{font-size:3.3rem}.announcement-names{font-size:4.05rem}.save-heading{font-size:4.55rem}.open-prompt{font-size:.875rem}}
@media(max-width:800px) and (max-height:720px){.save-details-pin{padding:12px}.save-heading{font-size:3.5rem}.save-champagne{width:71px;height:46px;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.is-opening .landing-content{transform:none}.is-opening .landing-photo{transform:none}.hero-announcement-photo,.hero-announcement-copy,.save-details-photo{transform:none!important}.photo-filmstrip{height:100vh;height:100svh}.save-details{height:180vh;height:180svh}.envelope-link:hover .envelope,.postcard:hover{transform:none}}

/* Three discreet anchors stay reachable above every full-screen composition. */
.section-navigation{position:fixed;z-index:20;top:50%;right:max(12px,env(safe-area-inset-right));transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.section-navigation a{display:grid;place-items:center;width:44px;height:44px;text-decoration:none;border-radius:50%;-webkit-tap-highlight-color:transparent}
.section-navigation span{display:block;width:8px;height:8px;border:1px solid rgba(249,245,239,.95);border-radius:50%;background:rgba(30,16,13,.45);box-shadow:0 1px 5px rgba(0,0,0,.65);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.section-navigation a[aria-current="location"] span{background:var(--cream);transform:scale(1.25);box-shadow:0 0 0 3px rgba(30,16,13,.35),0 1px 5px rgba(0,0,0,.6)}
.section-navigation a:hover span{transform:scale(1.4)}
.section-navigation a:focus-visible{outline:2px solid var(--cream);outline-offset:-5px;background:rgba(30,16,13,.5)}
@media(max-width:800px){
  .section-navigation{top:auto;right:auto;bottom:calc(4px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);flex-direction:row;opacity:.6}
  .section-navigation a{width:44px;height:44px}
  .section-navigation span{width:6px;height:6px}
  .section-navigation:focus-within{opacity:.85}
}

/* Settle on each major viewport in either direction. Oversized sections retain
   their native scrollable range so short screens can reach every control. */
html.invitation-scroll{scroll-snap-type:y mandatory}
.invitation-scroll #announcement,.invitation-scroll #engagement-shoot,.invitation-scroll #save-the-date{scroll-snap-align:start;scroll-snap-stop:always}

.postcard-ink-word{display:inline-block;height:1em;max-width:none;overflow:visible;vertical-align:baseline}

/* One interruptible first-arrival controller owns mobile alignment; native
   snapping would compete with its easing and with later free scrolling. */
@media(max-width:800px),(any-pointer:coarse){
  html.invitation-scroll{scroll-snap-type:none}
  .invitation-scroll #announcement,.invitation-scroll #engagement-shoot,.invitation-scroll #save-the-date{scroll-snap-stop:normal}
}

/* Equal corner insets keep the next-section control clear of safe areas. */
.next-section-button{--next-inset:24px;--next-size:48px;display:none}
.next-section-button:not([hidden]){--next-edge:calc(var(--next-inset) + max(env(safe-area-inset-right,0px),env(safe-area-inset-bottom,0px)));position:fixed;z-index:20;right:var(--next-edge);bottom:var(--next-edge);display:grid;place-items:center;width:var(--next-size);height:var(--next-size);padding:0;border:1px solid rgba(249,245,239,.35);border-radius:4px;color:var(--cream);background:transparent;opacity:.75;cursor:pointer;-webkit-tap-highlight-color:transparent}
.next-section-button svg{width:24px;height:24px}
.next-section-button:not([hidden]):focus-visible{opacity:1;outline:2px solid var(--cream);outline-offset:3px}
.next-section-button:not([hidden]):active{opacity:.9}
@media(max-width:800px){
  .next-section-button{--next-inset:12px;--next-size:44px}
  .next-section-button svg{width:22px;height:22px}
}

/* Match velocity at the loop boundary and ease only at the two turning points. */
@keyframes next-arrow-cue{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,.52,.67,1)}
  25%{transform:translateY(4px);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:translateY(-4px);animation-timing-function:cubic-bezier(.33,0,.67,.48)}
  100%{transform:translateY(0)}
}
@keyframes next-arrow-reveal{from{opacity:0}to{opacity:.75}}
@media(prefers-reduced-motion:no-preference){
  .next-section-button.is-cueing{animation:next-arrow-reveal var(--next-reveal-duration,0ms) ease-out var(--next-reveal-delay,0ms)}
  .next-section-button.is-cueing svg{animation:next-arrow-cue 1.2s linear var(--next-cue-delay,0ms) infinite}
}