:root{color-scheme:light;--wine:#92233b;--deep:#68162c;--red:#ae2945;--dust:#dba4ad;--paper:#fffdfb;--cream:#fff8f7;--ink:#4d3339;--muted:#90767d;--line:#ead5d7;--shadow:0 18px 60px rgba(99,18,42,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:#fffaf9;color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #d34868;outline-offset:5px}
button:disabled{cursor:default}
.grain{pointer-events:none;position:fixed;z-index:20;inset:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E")}
.intro-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;min-height:100svh;overflow:hidden;padding:73px 18px 30px;background:radial-gradient(ellipse 48% 28% at 50% 46%,#ffe8e7 0%,transparent 95%),linear-gradient(180deg,#fffdfb 0%,#fffbfa 57%,#fff5f5 100%)}
.intro-screen[hidden]{display:none}
.intro-screen::before,.intro-screen::after{content:'';position:absolute;z-index:-1;border:1px solid rgba(164,43,67,.15);pointer-events:none}
.intro-screen::before{inset:17px 15px;border-radius:160px 160px 18px 18px}
.intro-screen::after{inset:24px 22px;border-color:rgba(164,43,67,.065);border-radius:155px 155px 14px 14px}
.intro-heading{text-align:center;z-index:5;position:relative}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--wine);margin:0 auto 20px}
.ornament span{width:43px;height:1px;background:linear-gradient(to right,transparent,var(--dust))}
.ornament span:last-child{transform:rotate(180deg)}
.ornament svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.32em;color:var(--wine);margin:0 0 8px}
.intro-heading h1{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(82px,18vw,120px);line-height:1;margin:5px 0 -2px;color:var(--deep);text-shadow:0 2px 0 rgba(255,255,255,.6)}
.intro-subtitle{font-family:'Libre Baskerville',serif;font-size:12px;line-height:1.6;font-style:italic;color:#846c70;margin:8px 0 0}
.envelope-stage{position:relative;display:grid;place-items:center;width:min(100%,550px);height:clamp(275px,67vw,405px);margin-top:10px;perspective:1200px}
.botanical{position:absolute;z-index:0;width:clamp(110px,28vw,175px);height:auto;fill:#a94960;fill-opacity:.22;stroke:none;filter:drop-shadow(0 2px 3px rgba(109,21,47,.04))}
.botanical .stem{fill:none;stroke:#a94960;stroke-opacity:.37;stroke-width:2.2;stroke-linecap:round}
.botanical-left{left:0;top:8px;transform:rotate(-8deg)}
.botanical-right{right:0;top:5px;transform:scaleX(-1) rotate(-8deg)}
.envelope{--env-back:#89243e;--env-front:#a32c46;--env-flap:#bd3d56;--env-ink:#fdf7f5;--env-seal:#fff5f2;--env-seal-ink:#a82d49;--env-border:#671b32;--env-accent:#d46b82;position:relative;width:min(82vw,440px);height:auto;aspect-ratio:1.55/1;margin:49px auto 0;isolation:isolate;filter:drop-shadow(0 22px 16px rgba(102,23,42,.23));transition:filter .3s}
.envelope-shadow{position:absolute;z-index:0;inset:auto 10% -21px;height:36px;border-radius:50%;background:rgba(111,40,55,.18);filter:blur(18px)}
.envelope-back{position:absolute;z-index:1;inset:0;border-radius:3px 3px 7px 7px;background:var(--env-back);border:1px solid var(--env-border)}
.letter-peek{position:absolute;z-index:2;left:9%;right:9%;top:6%;height:89%;background:#fffdfb;border:1px solid #f1dfe0;box-shadow:0 0 12px rgba(91,18,37,.06);display:flex;align-items:center;flex-direction:column;padding-top:28px;transition:transform 1.15s cubic-bezier(.18,.72,.18,1);color:var(--wine);font-family:'Libre Baskerville',serif;font-size:11px}
.letter-peek strong{font-family:'Great Vibes',cursive;font-size:47px;font-weight:400;margin-top:4px}
.letter-mini-cross{font-size:22px;margin-bottom:8px}
.envelope-flap{position:absolute;z-index:6;inset:0;clip-path:polygon(0 0,100% 0,50% 54%);background:linear-gradient(170deg,var(--env-flap),var(--env-back));transform-origin:50% 0%;backface-visibility:hidden;transition:transform .95s cubic-bezier(.25,.72,.2,1),z-index 0s .5s;box-shadow:0 4px 7px rgba(40,0,12,.2)}
.envelope-front{position:absolute;z-index:4;inset:0;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:linear-gradient(110deg,transparent 49.8%,rgba(255,255,255,.13) 50%,transparent 50.3%),linear-gradient(250deg,transparent 49.8%,rgba(255,255,255,.13) 50%,transparent 50.3%),linear-gradient(180deg,var(--env-front),var(--env-back));border:1px solid var(--env-border);border-radius:0 0 6px 6px}
.envelope-front::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.095),transparent 60%)}
.envelope-crease{position:absolute;z-index:5;inset:0;pointer-events:none;clip-path:polygon(0 100%,50% 51%,100% 100%);background:linear-gradient(0deg,rgba(0,0,0,.05),transparent 70%);border-bottom:1px solid var(--env-border)}
.wax-seal{position:absolute;z-index:8;width:68px;aspect-ratio:1;top:51%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:0;box-shadow:0 3px 9px rgba(36,6,20,.25),inset 0 0 0 3px rgba(255,255,255,.43),inset 0 0 0 7px rgba(77,6,30,.08);background:radial-gradient(circle at 27% 22%,#fff 0%,var(--env-seal) 34%,var(--env-seal) 75%,#e1b9b7 100%);color:var(--env-seal-ink);display:grid;place-items:center;transition:transform .35s,opacity .3s .2s}
.wax-seal::after{content:'';position:absolute;inset:9px;border-radius:50%;border:1px solid currentColor;opacity:.44}
.wax-seal span{font:normal 39px 'Great Vibes',cursive;line-height:1;padding-top:8px;position:relative;z-index:1}
.wax-seal:hover{transform:translate(-50%,-50%) scale(1.08)}
.envelope.opening .envelope-flap{transform:rotateX(185deg);z-index:2}
.envelope.opening .wax-seal{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6)}
.envelope.opening .letter-peek{transform:translateY(-47%)}
.open-prompt{z-index:3;background:none;border:0;color:var(--deep);font:italic 14px 'Libre Baskerville',serif;line-height:1.7;padding:7px 10px;margin:-4px 0 24px;text-align:center}
.open-prompt:hover{text-decoration:underline;text-underline-offset:6px}
.sparkle{font-size:12px;color:#c26577;padding:0 7px}
.design-selector{z-index:3;width:min(100%,570px);margin:auto auto 0;text-align:center;padding-top:8px}
.selector-title{letter-spacing:.2em;font-size:9px;color:#9e6671;font-weight:700;margin:0 0 12px}
.style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.style-option{display:flex;align-items:center;gap:8px;text-align:left;background:rgba(255,255,255,.77);border:1px solid #efdadd;border-radius:10px;padding:10px 8px;color:#6b4d53;min-height:63px;transition:border .2s,box-shadow .2s,transform .2s}
.style-option:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(120,22,44,.06)}
.style-option.selected{border:1.5px solid #b84b62;background:#fff;box-shadow:0 0 0 2px rgba(184,75,98,.08)}
.style-option strong{display:block;font-size:10px;line-height:1.35;color:var(--deep);font-weight:700}
.style-option small{display:block;font-size:9px;line-height:1.45;margin-top:3px;color:#9b8186}
.color-swatch{flex:none;width:26px;height:26px;border:1px solid #e4bbc3;border-radius:4px;box-shadow:0 2px 4px rgba(110,30,47,.07)}
.color-swatch.ruby{background:linear-gradient(145deg,#b23d54 50%,#7b1f39 50%)}
.color-swatch.ivory{background:radial-gradient(circle at 52% 50%,#a42e4e 0 22%,transparent 24%),linear-gradient(145deg,#fff 50%,#f5e3e3 50%)}
.color-swatch.botanical-swatch{background:radial-gradient(ellipse at 35% 26%,#b76573 0 13%,transparent 14%),radial-gradient(ellipse at 65% 67%,#b76573 0 16%,transparent 17%),#fceeee}
.sample-note{font-size:10px;color:#ae9296;margin:12px 0 0}
body[data-envelope="ivory"] .envelope{--env-back:#f8e9e8;--env-front:#fffcfb;--env-flap:#fff;--env-ink:#b75e6e;--env-seal:#a32848;--env-seal-ink:#fff9f6;--env-border:#e1bdc5;--env-accent:#a32848}
body[data-envelope="ivory"] .wax-seal{background:radial-gradient(circle at 25% 22%,#d3697f 0%,#aa2f4d 36%,#8b1d38 100%);box-shadow:0 4px 10px rgba(83,12,31,.23),inset 0 0 0 4px rgba(255,255,255,.14)}
body[data-envelope="ivory"] .envelope-front{background:linear-gradient(120deg,transparent 49.8%,#e6c5ca 50%,transparent 50.4%),linear-gradient(240deg,transparent 49.8%,#e6c5ca 50%,transparent 50.4%),linear-gradient(180deg,#fffefd,#faefee)}
body[data-envelope="botanical"] .envelope{--env-back:#f9eded;--env-front:#fff7f6;--env-flap:#fefaf9;--env-ink:#a63650;--env-seal:#9e2b46;--env-seal-ink:#fff9f6;--env-border:#e7cbd0;--env-accent:#bc6074}
body[data-envelope="botanical"] .wax-seal{background:radial-gradient(circle at 25% 22%,#d47a8e 0%,#aa3551 36%,#842139 100%)}
body[data-envelope="botanical"] .envelope-front{background:linear-gradient(160deg,transparent 24%,rgba(255,255,255,.4) 50%,transparent 80%),linear-gradient(180deg,#fffcfc,#f7e8e8)}
body[data-envelope="botanical"] .envelope-front::after{content:'❦';position:absolute;left:8%;bottom:3%;font-size:105px;line-height:1;opacity:.27;color:#9e2944;transform:rotate(-43deg)}
body[data-envelope="botanical"] .botanical{fill:#a3324e;fill-opacity:.36}
.music-toggle{position:fixed;z-index:30;top:max(20px,env(safe-area-inset-top));right:59px;height:39px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid rgba(147,35,59,.25);border-radius:999px;background:rgba(255,253,251,.94);color:var(--wine);box-shadow:0 4px 14px rgba(78,25,36,.07);font-size:11px;font-weight:700;backdrop-filter:blur(9px)}
.music-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sound-indicator{width:6px;height:6px;border-radius:50%;background:#d1aeb6}
.music-toggle[aria-pressed="true"] .sound-indicator{background:#7eaf78;box-shadow:0 0 0 3px rgba(126,175,120,.15)}
.music-toggle[hidden],.music-info[hidden]{display:none}
.music-info{position:fixed;z-index:30;top:max(20px,env(safe-area-inset-top));right:20px;width:33px;height:39px;border:1px solid rgba(147,35,59,.25);border-radius:999px;background:rgba(255,253,251,.94);color:var(--wine);font:italic 13px 'Libre Baskerville',serif;box-shadow:0 4px 14px rgba(78,25,36,.07)}
.music-popover{position:fixed;top:calc(max(20px,env(safe-area-inset-top)) + 47px);right:20px;z-index:31;width:min(337px,calc(100vw - 28px));padding:16px;border:1px solid #e7c6cb;border-radius:16px;background:#fffdfb;box-shadow:0 16px 44px rgba(92,22,38,.23);color:#612638}
.music-popover[hidden]{display:none}
.music-popover-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.music-popover-header div{display:flex;flex-direction:column;gap:3px}
.music-popover-header span{font-size:9px;font-weight:700;letter-spacing:2px;color:#a65c70}
.music-popover-header strong{font:normal 18px 'Libre Baskerville',serif}
.music-popover-header button{border:0;background:transparent;color:#80384e;font-size:25px;line-height:1;cursor:pointer}
.music-popover p{font-size:11px;line-height:1.55;margin:9px 0 0}
.music-popover a{color:#92233b;text-decoration:underline;text-underline-offset:2px}
@media(max-width:520px){.music-popover{right:14px}}
.invitation-screen{min-height:100svh;padding:45px 16px 50px;background:radial-gradient(ellipse at top,#fff9f7 0%,#fbecee 62%,#f5e6e8 100%);animation:card-fade .9s both}
.invitation-screen[hidden]{display:none}
@keyframes card-fade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.invitation-shell{position:relative;overflow:hidden;max-width:510px;margin:0 auto;padding:60px clamp(25px,7vw,49px) 43px;border:1px solid #e7c6cb;background:linear-gradient(135deg,rgba(255,255,255,.65),transparent 22%),#fffdfa;box-shadow:0 20px 70px rgba(92,22,38,.15)}
.invitation-shell::before{content:'';position:absolute;inset:12px;border:1px solid #edd6d9;pointer-events:none}
.invitation-shell::after{content:'';position:absolute;inset:17px;border:1px solid rgba(208,142,154,.20);pointer-events:none}
.card-corner{position:absolute;width:65px;height:65px;border:1px solid #d99caa;opacity:.5}
.corner-one{top:21px;left:21px;border-width:1px 0 0 1px;border-radius:25px 0 0 0}
.corner-two{top:21px;right:21px;border-width:1px 1px 0 0;border-radius:0 25px 0 0}
.corner-three{bottom:21px;left:21px;border-width:0 0 1px 1px;border-radius:0 0 0 25px}
.corner-four{bottom:21px;right:21px;border-width:0 1px 1px 0;border-radius:0 0 25px 0}
.invitation-header{text-align:center;position:relative;z-index:1}
.invitation-header .eyebrow{font-size:9px;margin-bottom:12px;letter-spacing:.21em}
.host-illustration{width:105px;height:105px;margin:0 auto 1px;color:#ab3c53}
.host-illustration svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.host-illustration .rays{stroke-width:1;opacity:.48}
.sacrament{font:italic 16px 'Libre Baskerville',serif;color:var(--deep);margin:0}
.invitation-header h2{font:normal clamp(77px,18vw,112px)/1 'Great Vibes',cursive;color:#8f1e3a;margin:10px 0 -4px;padding-right:10px}
.separator,.section-separator{display:flex;align-items:center;justify-content:center;gap:14px;color:#ad5970}
.separator{margin:18px auto}
.separator span,.section-separator span{width:48px;height:1px;background:#e5bfc6}
.scripture{font:italic 17px/1.65 'Libre Baskerville',serif;color:#6d3645;margin:4px 0 4px}
.scripture-ref{font-size:9px;letter-spacing:.27em;font-weight:700;color:#ae7180;margin:0}
.invite-message{max-width:340px;margin:25px auto 32px;font:14px/1.95 'Libre Baskerville',serif;color:#685057}
.date-panel{text-align:center;margin:0 0 29px;padding:22px 15px 18px;background:#fff5f3;border-block:1px solid #e8c4c8}
.date-small,.date-time{font-size:10px;letter-spacing:.25em;color:#9b4157;font-weight:700}
.date-main{display:flex;align-items:center;justify-content:center;gap:13px;color:#87243b;margin:7px 0}
.date-number{font:58px/.95 'Libre Baskerville',serif}
.date-month{display:flex;flex-direction:column;gap:8px;text-align:left;font:16px 'Libre Baskerville',serif;letter-spacing:.06em}
.date-month small{font:700 12px 'DM Sans',sans-serif;letter-spacing:.18em}
.event-place{text-align:center;padding:10px 0 4px}
.place-symbol{font-family:Georgia,serif;font-size:29px;color:#a42d4a;margin:0 0 10px}
.place-symbol.celebration{font-size:37px;line-height:29px}
.place-overline{font-size:9px;font-weight:700;letter-spacing:.3em;color:#a14b5c;margin:0 0 12px}
.event-place h3{font:normal 18px/1.55 'Libre Baskerville',serif;color:#69273a;margin:0 0 10px}
.event-place p:not(.place-overline){font-size:12px;line-height:1.7;color:#866b70;margin:2px 0}
.location-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;margin:17px auto 0;background:transparent;border:1px solid #b85e73;border-radius:4px;text-decoration:none;font-size:11px;font-weight:700;color:#962d47;transition:background .2s,transform .2s}
.location-link:hover{background:#fff2f2;transform:translateY(-1px)}
.location-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.section-separator{font-size:25px;margin:27px auto 14px;color:#be7183}
.rsvp-section{text-align:center;margin:40px -4px 0;padding:24px 12px 10px;background:#fff6f5;border-top:1px solid #ecd1d5;border-bottom:1px solid #ecd1d5}
.tiny-cross{font:21px Georgia,serif;color:#ba6579;margin-bottom:7px}
.rsvp-section h3{font:normal 21px 'Libre Baskerville',serif;color:#872d43;margin:0 0 9px}
.rsvp-section p{font-size:12px;color:#876a70;margin:0 0 18px}
.rsvp-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:min(100%,310px);padding:15px 18px;text-decoration:none;background:#9d2d49;border:1px solid #9d2d49;border-radius:4px;color:#fff;font-size:12px;letter-spacing:.03em;font-weight:700;box-shadow:0 8px 15px rgba(127,32,59,.13);transition:background .2s,transform .2s}
.rsvp-button:hover{background:#7f203a;transform:translateY(-2px)}
.rsvp-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.rsvp-section .rsvp-note{font-size:10px;color:#aa888f;margin:13px 0 4px}
.invitation-footer{text-align:center;margin-top:25px;color:#8d4559}
.invitation-footer p{font:italic 12px 'Libre Baskerville',serif;margin:0}
.invitation-footer>span:not(.footer-cross){display:block;font:normal 48px 'Great Vibes',cursive;margin-top:0}
.footer-cross{display:block;margin-top:8px;font:15px Georgia,serif;color:#ac6575}
.back-button{display:block;margin:28px auto 0;background:none;border:0;color:#8b5261;text-decoration:underline;text-underline-offset:4px;font-size:12px}
@media (min-width:760px){.intro-screen{padding-top:66px}.envelope-stage{height:410px;margin-top:12px}.envelope{margin-top:20px}.intro-subtitle{font-size:14px}.open-prompt{margin-top:-7px}.style-options{gap:12px}.style-option{padding:12px}.style-option strong{font-size:11px}.style-option small{font-size:10px}.invitation-screen{padding-top:68px}}
@media(max-width:420px){.intro-screen{padding-top:78px}.ornament{margin-bottom:12px}.intro-heading h1{font-size:86px}.envelope-stage{height:290px;margin-top:4px}.envelope{width:83vw;margin-top:34px}.botanical{width:110px}.botanical-left{left:-4px}.botanical-right{right:-4px}.wax-seal{width:58px}.wax-seal span{font-size:35px}.open-prompt{margin:2px 0 18px}.style-options{gap:6px}.style-option{display:block;text-align:center;padding:9px 4px;min-height:93px}.style-option .color-swatch{display:block;margin:0 auto 6px}.style-option strong{font-size:10px}.style-option small{font-size:9px}.selector-title{margin-bottom:10px}.sample-note{margin-top:8px}.invitation-shell{padding-top:51px}.invitation-header h2{font-size:84px}}
@media(max-width:355px){.intro-heading h1{font-size:76px}.envelope-stage{height:260px}.botanical{width:100px}.style-option strong{font-size:9px}.style-option small{font-size:8px}.open-prompt{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Experiencia a pantalla completa: sobre + dos tarjetas, sin desplazamiento vertical. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh}
main{height:100%;overflow:hidden}
.intro-screen{height:100dvh;min-height:0;justify-content:center;padding:clamp(25px,5dvh,49px) 16px clamp(24px,5dvh,45px)}
.ornament{margin-bottom:6px}
.intro-heading h1{font-size:clamp(75px,16vw,112px);margin:0}
.intro-subtitle{margin:0}
.envelope-stage{height:clamp(230px,42dvh,380px);margin-top:0;flex:0 0 auto}
.envelope{width:min(81vw,440px);margin:22px auto 0}
.open-prompt{margin:0;padding:9px 10px}

.story-screen{position:fixed;inset:0;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;background:radial-gradient(ellipse at top,#fff9f7 0%,#fbecee 65%,#f5e6e8 100%)}
.story-screen[hidden],.story-panel[hidden]{display:none}
.story-panel{width:min(100%,480px);height:calc(100dvh - 24px);max-height:900px;overflow:hidden;position:relative;isolation:isolate;background:#fffdfb;border:1px solid #e7c6cb;box-shadow:0 14px 55px rgba(92,22,38,.15);display:flex;flex-direction:column;animation:card-fade .55s both}
.story-border{position:absolute;inset:10px;border:1px solid #ead1d5;pointer-events:none;z-index:0}
.story-border::before,.story-border::after{content:'';position:absolute;width:55px;height:55px;top:7px;border-top:1px solid #d9a2ad;opacity:.64}
.story-border::before{left:7px;border-left:1px solid #d9a2ad;border-radius:22px 0 0 0}
.story-border::after{right:7px;border-right:1px solid #d9a2ad;border-radius:0 22px 0 0}
.story-content{position:relative;z-index:1;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(45px,7dvh,63px) 28px 2px;text-align:center}
.story-topline,.details-topline{font-size:9px;letter-spacing:.23em;font-weight:700;color:#a05262;margin:0 0 clamp(5px,1dvh,10px)}
.story-host{height:clamp(58px,11dvh,94px);aspect-ratio:138/132;color:#ab3c53;flex:none}
.story-host svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.story-host .rays{opacity:.47;stroke-width:1}
.story-sacrament{font:italic clamp(12px,2.3dvh,17px) 'Libre Baskerville',serif;color:#772b40;margin:2px 0 0}
.story-name{font:normal clamp(69px,12dvh,106px)/.95 'Great Vibes',cursive;color:#8f1e3a;margin:clamp(16px,2.8dvh,27px) 0 0;padding-right:9px}
.story-divider{display:flex;align-items:center;justify-content:center;gap:12px;color:#b86378;font-size:13px;margin:clamp(5px,1.8dvh,14px) 0}
.story-divider span{width:34px;height:1px;background:#e5bfc6}
.story-verse{font:italic clamp(13px,2.35dvh,17px)/1.45 'Libre Baskerville',serif;color:#6d3645;margin:0}
.story-verse-ref{font-size:8px;letter-spacing:.24em;color:#a66b79;font-weight:700;margin:4px 0 0}
.story-message{max-width:310px;font:clamp(11px,1.85dvh,13px)/1.7 'Libre Baskerville',serif;color:#6b5359;margin:clamp(9px,2dvh,18px) 0 clamp(10px,2dvh,20px)}
.story-date{width:min(100%,300px);background:#fff4f3;border-block:1px solid #e8c4c8;padding:clamp(8px,1.6dvh,15px) 13px;color:#902941}
.story-weekday,.story-hour{display:block;font-size:9px;letter-spacing:.22em;font-weight:700}
.story-date-main{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0}
.story-date-main strong{font:normal clamp(41px,7.5dvh,58px)/1 'Libre Baskerville',serif}
.story-date-main span{display:flex;align-items:flex-start;flex-direction:column;font:clamp(12px,2dvh,15px) 'Libre Baskerville',serif;letter-spacing:.04em}
.story-date-main small{font:700 11px 'DM Sans',sans-serif;letter-spacing:.16em;margin-top:6px}
.story-nav{z-index:2;min-height:61px;display:flex;align-items:center;justify-content:space-between;padding:6px 27px max(13px,env(safe-area-inset-bottom));gap:8px}
.story-back{border:0;background:none;color:#8f4e5e;font-size:11px;padding:10px 0;min-width:74px;text-align:left}
.story-next{border:0;background:#9d2d49;color:#fff;border-radius:4px;min-height:39px;padding:9px 15px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:11px;box-shadow:0 5px 13px rgba(128,33,58,.13)}
.story-next span{font-size:17px;line-height:.8}
.story-dots{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.story-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#e0bcc5}
.story-dots i.active{width:17px;border-radius:10px;background:#a83c54}
.story-nav-filler{font-size:10px;color:#ad8790;text-align:right;min-width:114px}

.story-panel--details .story-content{padding-top:clamp(48px,7dvh,65px);padding-bottom:0;justify-content:space-evenly}
.details-topline{margin:0;font-size:8px;letter-spacing:.17em}
.details-heading{font:normal clamp(49px,8.5dvh,72px)/1 'Great Vibes',cursive;color:#8f1e3a;margin:0;padding-right:9px}
.story-panel--details .story-divider{margin:1px 0 3px}
.details-place{text-align:center;max-width:340px;padding:3px 0;margin:0}
.details-symbol{display:block;color:#a4324e;font-family:Georgia,serif;font-size:clamp(18px,3dvh,25px);line-height:1.1}
.details-label{font-size:9px;font-weight:700;letter-spacing:.22em;color:#a44c60;margin:2px 0 5px}
.details-place h3{font:normal clamp(14px,2.2dvh,17px)/1.36 'Libre Baskerville',serif;color:#69273a;margin:0 0 5px}
.details-place p:not(.details-label){font-size:clamp(10px,1.75dvh,12px);line-height:1.35;color:#896d73;margin:3px 0}
.details-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(5px,.9dvh,8px);padding:clamp(7px,1dvh,10px) 13px;border:1px solid #b85e73;border-radius:4px;color:#962d47;font-size:11px;font-weight:700;text-decoration:none}
.details-link span{font-size:14px}
.details-separator{font:20px Georgia,serif;color:#bd7182;line-height:1.1;margin:1px auto}
.details-rsvp{width:100%;max-width:325px;border-top:1px solid #e9cdd1;margin:clamp(5px,1.2dvh,12px) auto 0;padding:clamp(8px,1.5dvh,13px) 0 0;text-align:center}
.details-rsvp p{font:italic clamp(12px,2dvh,15px) 'Libre Baskerville',serif;color:#87344b;margin:0 0 8px}
.details-rsvp .rsvp-button{width:min(100%,300px);padding:clamp(9px,1.45dvh,12px) 10px;font-size:11px;line-height:1.3;box-shadow:none}
.details-rsvp .rsvp-button span{font-size:14px}

@media(max-width:520px){
  .story-screen{padding:0}
  .story-panel{height:100dvh;width:100%;max-height:none;border:0;box-shadow:none}
  .story-border{inset:9px}
  .story-content{padding-inline:25px}
  .story-nav{padding-inline:25px}
}
@media(max-height:690px){
  .intro-screen{padding-top:22px;padding-bottom:18px}
  .intro-heading h1{font-size:clamp(68px,14vw,90px)}
  .envelope-stage{height:clamp(190px,38dvh,285px)}
  .envelope{margin-top:9px}
  .story-content{padding-top:43px}
  .story-topline{font-size:8px}
  .story-host{height:clamp(47px,9dvh,65px)}
  .story-name{font-size:clamp(63px,10dvh,79px);margin-top:12px}
  .story-divider{margin:5px 0}
  .story-message{font-size:11px;line-height:1.5;margin:7px 0 9px}
  .story-date{padding:7px 11px}
  .story-date-main strong{font-size:41px}
  .story-nav{min-height:52px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .story-panel--details .story-content{padding-top:42px}
  .details-heading{font-size:52px}
  .details-place h3{font-size:14px}
  .details-symbol{font-size:18px}
  .details-rsvp{padding-top:7px}
  .details-rsvp p{margin-bottom:6px}
}
@media(max-height:570px){
  .intro-heading h1{font-size:68px}
  .intro-subtitle{font-size:10px}
  .envelope-stage{height:190px}
  .envelope{width:min(69vw,350px);margin-top:0}
  .botanical{width:90px}
  .open-prompt{font-size:12px}
  .story-content{padding-top:31px;padding-inline:22px}
  .story-host{height:43px}
  .story-sacrament{font-size:12px}
  .story-name{font-size:57px;margin-top:8px}
  .story-verse{font-size:12px}
  .story-message{font-size:10px;line-height:1.45;margin:5px 0 6px}
  .story-date{padding:5px 8px}
  .story-date-main strong{font-size:34px}
  .story-date-main small{margin-top:2px;font-size:10px}
  .story-weekday,.story-hour{font-size:8px}
  .story-panel--details .story-content{padding-top:28px}
  .details-heading{font-size:43px}
  .details-place h3{font-size:12px}
  .details-place p:not(.details-label){font-size:10px}
  .details-label{margin:1px 0 3px;font-size:8px}
  .details-link{padding:6px 10px;font-size:10px;margin-top:4px}
  .details-rsvp p{font-size:12px}
  .details-rsvp .rsvp-button{font-size:10px;padding:8px}
  .story-nav{min-height:46px}
}