@font-face{font-family:Cormorant;src:url(assets/cormorant-latin.ed9f3c30.woff2) format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:'Great Vibes';src:url(assets/great-vibes-latin.4bee473d.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Italiana;src:url(assets/italiana-latin.97e8c473.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:WindSong;src:url(assets/windsong-latin.2dd0d66d.woff2) format('woff2');font-style:normal;font-weight:400;font-display:swap}

:root{--page-width:430px;--page-vw:min(1vw,4.3px);--ivory:#f6f1e8;--ink:#514d45;--blue:#849eaf;--photo-progress:0;color-scheme:light;font-family:Cormorant,Georgia,serif;color:var(--ink);background:var(--ivory);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{width:100%;max-width:var(--page-width);margin:0 auto;min-width:280px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #637f93;outline-offset:8px}
h1,h2,p{margin:0;font-weight:400}
.script{font-family:'Great Vibes',cursive;font-weight:400}
.eyebrow{text-transform:uppercase;font-size:10px;font-weight:500;letter-spacing:.26em;line-height:1.8}
.invitation-closed,.invitation-closed body{overflow:hidden;overscroll-behavior:none}
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;height:100vh;height:100lvh;background:#faf9f6}
.backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.backdrop__roses{object-position:center;opacity:0}
.backdrop__couple{object-position:30% center;opacity:.4}
.backdrop__wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(249,246,239,.91) 0%,rgba(249,246,239,.8) 25%,rgba(249,246,239,.48) 44%,rgba(249,246,239,.03) 65%,rgba(24,33,34,.08) 100%)}
.js .backdrop__roses{opacity:calc((1 - var(--photo-progress)) * .65)}
/* Keep the incoming layers faintly painted so the first swipe doesn't reveal
   an entirely unrasterized photo and gradient. The final appearance is .4/1. */
.js .backdrop__couple{opacity:calc(.01 + var(--photo-progress) * .39)}
.js .backdrop__wash{opacity:calc(.01 + var(--photo-progress) * .99)}
.js .backdrop img,.js .backdrop__wash{will-change:opacity}
main{position:relative;z-index:1}
/* Paging is enabled only after navigation is ready; the fallback remains readable. */
.invitation-paged,.invitation-paged body{height:100%;overflow:hidden;overscroll-behavior:none}
.invitation-paged main{position:fixed;inset:0;touch-action:pan-x pinch-zoom;overflow:hidden;overflow:clip;overscroll-behavior:none}
.invitation-paged .page-track{height:100%;transform:translate3d(0,0,0);transition:transform 2s cubic-bezier(.22,.61,.36,1);will-change:transform}
.invitation-paged .scene{height:100%;min-height:100%;contain:paint}
.invitation-paged .backdrop img,.invitation-paged .backdrop__wash{transition:opacity 2s linear}
.scene h2:focus{outline:none}
.scene{min-height:100vh;min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:64px max(24px,env(safe-area-inset-right)) 72px max(24px,env(safe-area-inset-left));text-align:center}
.scene--date{background:linear-gradient(#faf9f659,#faf9f659),#faf9f6 url(assets/roses-white-fuller.efae3319.webp) center/cover no-repeat;color:#242421}
.js .scene--date{background:none}
.date-copy{position:relative;width:min(100%,350px);padding-bottom:12px}
.date-copy>.eyebrow{margin-bottom:58px;font-size:10px;letter-spacing:.32em}
.monogram{position:absolute;inset:0;font-family:'Great Vibes',cursive;font-size:clamp(115px,min(calc(46 * var(--page-vw)),39svh),380px);color:#a9c5d8;opacity:.24;line-height:1;text-shadow:2px 4px 6px rgb(80 112 136 / 28%);pointer-events:none;font-weight:400}
.monogram span{position:absolute}
.monogram__d{top:8%;left:6%}
.monogram__m{bottom:max(65px,8%);right:3%;padding-right:.3em}
h1{position:relative;display:flex;flex-direction:column;align-items:center;font-family:Italiana,Cormorant,Georgia,serif;text-transform:uppercase;font-size:clamp(67px,calc(18 * var(--page-vw)),105px);line-height:.95;letter-spacing:.025em;font-weight:400}
h1>span:first-child,h1>span:last-child{text-shadow:0 3px 3px rgb(36 36 33 / 22%)}
h1>span:first-child{align-self:flex-start}
h1>span:last-child{align-self:flex-end}
h1 .script,.wedding-intro{font-family:WindSong,'Great Vibes',cursive}
h1 .script{text-transform:none;font-size:.88em;line-height:1;letter-spacing:0;margin:15px 0 20px;color:inherit;transform:rotate(-7deg)}
h1:focus{outline:none}
.date-copy__rule{width:42px;height:1px;opacity:0;margin:38px auto 18px}
.date-copy__date{font-size:14px;letter-spacing:.24em}
.date-copy__date span{padding:0 6px;color:var(--blue)}
.scroll-cue{position:absolute;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:12px;text-decoration:none;white-space:nowrap;padding:10px 18px}
.scroll-cue span{text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:600}
.scroll-cue svg{width:16px;height:28px;stroke:var(--ink);stroke-width:1}
.scene--date .scroll-cue svg{stroke:var(--blue)}
.scene--couple{justify-content:flex-start;padding-top:clamp(32px,6svh,64px)}
.couple-copy{width:100%;max-width:650px}
.wedding-intro{font-size:clamp(32px,calc(8.8 * var(--page-vw)),49px);color:#6f8796;margin-bottom:20px;line-height:1.4}
.couple-names{font-size:clamp(30px,calc(8.7 * var(--page-vw)),58px);line-height:1.1;font-weight:400;letter-spacing:-.025em;display:flex;align-items:center;flex-direction:column;gap:5px}
.couple-names>span{display:block}
.couple-names>span:not(.couple-names__and){text-shadow:0 3px 3px rgb(36 36 33 / 22%)}
.couple-names__and{font-size:1.13em;color:var(--blue);line-height:.98;padding:5px 0 1px}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin:25px auto 0;color:var(--blue)}
.ornament span{width:38px;height:1px;background:currentColor;opacity:.6}
.ornament svg{height:27px;width:38px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scene--calendar,.scene--venue,.scene--invitation{gap:18px;justify-content:flex-start;padding-top:30px;padding-bottom:48px}
.scene--couple,.scene--calendar{padding-bottom:128px}
.calendar-card{position:relative;width:min(100%,355px);padding:22px 24px 21px}
.calendar-card>.eyebrow{font-size:11px;letter-spacing:.25em;margin-bottom:10px}
.calendar-card h2{font-size:35px;line-height:1.15;letter-spacing:-.025em;margin-bottom:16px}
.calendar-card h2 span{font-size:.85em;color:var(--blue);padding-left:6px;letter-spacing:0}
.calendar{width:100%;table-layout:fixed;border-collapse:collapse;font-size:18px;font-variant-numeric:lining-nums tabular-nums}
.calendar th{font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--blue);padding:0 0 13px}
.calendar td{height:31px;padding:0;position:relative;line-height:1}
.wedding-day span{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--blue);color:#475f6a}
.wedding-day::after{content:'❤︎';position:absolute;z-index:2;color:var(--blue);font-family:Georgia,serif;font-size:13px;bottom:-2px;left:calc(50% + 5px);line-height:12px}
.wedding-date{position:absolute;bottom:max(102px,calc(env(safe-area-inset-bottom) + 96px));left:0;width:100%;font-size:28px;font-weight:700;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.2em;color:var(--ink)}
.venue{width:min(100%,355px);padding:22px 20px 17px}
.venue__map-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:44px;color:#6f8796;border-radius:50%;text-decoration:none}
.venue__map-trigger:hover{background:#849eaf1a;color:var(--ink)}
.venue__map-trigger svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.venue__icon{width:32px;height:44px;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:5px}
.venue .eyebrow{font-size:10px;letter-spacing:.24em}
.venue__name{font-size:27px;margin-top:5px;line-height:1.2}
.venue__address{display:flex;align-items:center;justify-content:center;gap:0;font-size:16px;line-height:1.5;margin-top:8px}
.map-picker{width:min(320px,calc(100% - 40px));max-height:calc(100svh - 40px);padding:26px 24px 12px;border:1px solid #849eaf40;border-radius:16px;background:var(--ivory);color:var(--ink);box-shadow:0 12px 50px #27333c26;text-align:center}
.map-picker::backdrop{background:#27333c55}
.map-picker h2{font-size:28px}
.map-picker p{margin:6px 0 18px;font-size:15px}
.map-picker__option{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 4px;border-top:1px solid #849eaf40;font-size:20px;text-decoration:none}
.map-picker__option span{font-size:17px;color:#6f8796}
.map-picker__option:hover{color:#637f93}
.map-picker__cancel{min-height:44px;margin-top:8px;padding:8px 24px;border:0;background:none;color:inherit;font-size:16px;cursor:pointer}
.closing{font-size:24px;line-height:1.4;color:#6f8796;max-width:320px}
.invitation-note{width:min(100%,355px);padding:22px 20px 17px}
.invitation-note__icon{display:block;width:64px;height:50px;margin:0 auto 20px;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.invitation-note__heart{fill:none}
.invitation-note h2{font-size:30px;line-height:1.2;margin-top:10px}
.invitation-note__message{max-width:280px;margin:18px auto 0;font-size:21px;line-height:1.5}
.noscript-note{position:fixed;bottom:0;z-index:3;width:100%;text-align:center;background:var(--ivory);padding:5px;font-size:12px}

/* Each paper face carries its own texture, folds and foil as it opens. */
.envelope{--seam-position:38%;--seal-size:clamp(132px,calc(39 * var(--page-vw)),190px);display:none;position:fixed;inset:0;z-index:10;isolation:isolate;perspective:1400px;background:#f8f7f3;overflow:hidden}
.js .envelope{display:block}
.envelope__shadow{position:absolute;inset:0;background:radial-gradient(ellipse at center,#fffefa,#e5e0d5);transition:opacity 3s ease}
.envelope__paper{position:absolute;inset:-2px;background-color:#fbfaf7;backface-visibility:hidden;transition:transform 4.05s cubic-bezier(.6,0,.2,1),filter 3.6s ease;will-change:transform}
.envelope__paper--left{z-index:2;clip-path:polygon(0 0,100% 0,var(--seam-position) 50%,100% 100%,0 100%);transform-origin:left center;background-image:linear-gradient(112deg,#ffffff70,transparent 45%,#c4bbae14),url(assets/envelope-paper.5798d056.svg);background-size:100% 100%,256px 256px}
.envelope__paper--right{z-index:1;clip-path:polygon(100% 0,100% 100%,var(--seam-position) 50%);transform-origin:right center;background-image:url(assets/envelope-blue.589317b8.svg),linear-gradient(90deg,#b4c3cf26,transparent 55%,#fffefb66),url(assets/envelope-paper.5798d056.svg);background-size:cover,100% 100%,256px 256px;background-position:right center,center,center}
.envelope__paper--right::before,.envelope__paper--right::after{content:'';position:absolute;left:var(--seam-position);top:50%;width:140vmax;height:18px;transform-origin:left top;background:linear-gradient(#84735d38,#8c7b6415 35%,transparent);filter:blur(3px)}
.envelope__paper--right::before{transform:rotate(var(--seam-angle,-52deg))}
.envelope__paper--right::after{transform:rotate(calc(-1 * var(--seam-angle,-52deg))) translateY(-100%)}
.envelope__paper--left::before,.envelope__paper--left::after{content:'';position:absolute;z-index:2;left:var(--seam-position);top:50%;width:140vmax;height:5px;transform-origin:left;background-image:url(assets/envelope-blue.589317b8.svg),linear-gradient(180deg,#e4eff7,#a6c3d9 35%,#cbdfea 60%,#8baec8 85%,#eff6fb);background-size:280px 180px,100% 100%;box-shadow:0 1px 1px #f7fbff,0 3px 6px #5e7f9840}
.envelope__paper--left::before{transform-origin:left top;transform:rotate(var(--seam-angle,-52deg)) translateY(-100%)}
.envelope__paper--left::after{transform:rotate(calc(-1 * var(--seam-angle,-52deg)))}
.envelope__fold{position:absolute;left:0;width:140vmax;height:3px;transform-origin:left center;background:linear-gradient(180deg,#b9b1a325,#fffefaab 55%,#ffffff30);box-shadow:0 -2px 5px #a3998712;pointer-events:none}
.envelope__fold--top{top:0;transform:rotate(var(--fold-angle,65deg))}
.envelope__fold--bottom{bottom:0;transform:rotate(calc(-1 * var(--fold-angle,65deg)))}
.envelope__grain{position:absolute;inset:0;z-index:3;opacity:.1;pointer-events:none;background:radial-gradient(ellipse at 15% 25%,#fff 0%,transparent 65%);transition:opacity 1.2s ease}
.envelope__open{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);z-index:4;border:0;background:transparent;cursor:pointer;color:var(--ink);padding:0;transform-origin:right center;backface-visibility:hidden;transition:transform 4.05s cubic-bezier(.6,0,.2,1);will-change:transform;outline-offset:-10px}
.envelope__open:focus-visible{outline-offset:-12px}
.envelope__eyebrow{position:absolute;top:17%;left:50%;transform:translateX(-50%);font-size:11px;font-style:italic;letter-spacing:.04em;width:85%;color:var(--blue)}
.wax-seal{position:absolute;left:var(--seam-position);top:50%;transform:translate(-50%,-50%) rotate(-8deg);display:block;width:var(--seal-size);height:var(--seal-size);filter:drop-shadow(3px 8px 5px #425d7138) drop-shadow(0 1px 1px #536e8333);transition:transform .3s ease}
.wax-seal__image{display:block;width:100%;height:100%;object-fit:contain}
.envelope__prompt{position:absolute;top:calc(50% + var(--seal-size) / 2 + 27px);left:var(--seam-position);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;text-transform:uppercase;font-family:Georgia,serif;font-size:8px;letter-spacing:.21em;white-space:nowrap;color:#718ba0}
.envelope__prompt-line{width:1px;height:29px;background:linear-gradient(var(--blue),transparent)}
.envelope__footer{position:absolute;bottom:max(54px,env(safe-area-inset-bottom));left:50%;width:90%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;color:var(--blue)}
.envelope__footer>span{display:block;font-size:10px;letter-spacing:.27em;margin-top:10px;color:var(--blue)}
@media(hover:hover){.envelope__open:hover .wax-seal{transform:translate(-50%,-50%) rotate(-4deg) scale(1.04)}}
.invitation-opening .envelope__prompt,.invitation-opening .envelope__grain{opacity:0;pointer-events:none}
.invitation-opening .envelope__open{opacity:1;pointer-events:none}
.invitation-opening .envelope__paper--left{transform:translateX(-42%) rotateY(-100deg);filter:brightness(.8)}
.invitation-opening .envelope__paper--right,.invitation-opening .envelope__open{transform:translateX(42%) rotateY(100deg)}
.invitation-opening .envelope__paper--right{filter:brightness(.85)}
.invitation-opening .envelope__shadow{opacity:0}
.invitation-opening .envelope{background:transparent;pointer-events:none}
.invitation-open .envelope{display:none}

/* Fixed layers share the same centered phone-sized canvas as the document. */
.backdrop,.envelope,.invitation-paged main,.noscript-note{left:0;right:0;width:100%;max-width:var(--page-width);margin-inline:auto}
@media(min-width:700px){
  /* Keep a 9:16 portrait canvas as the desktop window gets taller. */
  :root{--page-width:56.25vh;--page-width:56.25svh;--page-vw:min(1vw,.5625vh);--page-vw:min(1vw,.5625svh)}
}
@media(max-width:350px){
  .scene{padding-left:18px;padding-right:18px}
  .couple-names{font-size:29px}
  .calendar-card{padding-left:19px;padding-right:19px}
  .calendar-card h2{font-size:32px}
  .calendar td{height:31px;font-size:16px}
  .calendar-card>.eyebrow{font-size:8px}
  .closing{font-size:22px}
}
@media(max-height:650px){
  .date-copy>.eyebrow{margin-bottom:33px}
  h1{font-size:70px}
  .date-copy__rule{margin-top:25px}
  .scene--date{padding-top:45px;padding-bottom:105px}
  .scroll-cue{bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px));gap:8px}
  .scene--couple{padding-top:32px;min-height:max(100svh,500px)}
  .scene--calendar,.scene--venue,.scene--invitation{min-height:100svh;padding-top:35px}
  .envelope__eyebrow{top:12%}
  .envelope__footer{bottom:25px}
}
@media(max-height:500px){
  .invitation-paged .scene{padding-top:16px;padding-bottom:64px}
  .invitation-paged h1{font-size:clamp(30px,14svh,65px)}
  .invitation-paged h1 .script{margin:5px 0 8px}
  .invitation-paged .date-copy__rule{margin:12px auto 0}
  .invitation-paged .wedding-intro{font-size:26px;margin-bottom:8px}
  .invitation-paged .couple-names{font-size:clamp(22px,8svh,34px);gap:2px}
  .invitation-paged .ornament{margin-top:12px}
  .invitation-paged .calendar-card{padding:0 20px}
  .invitation-paged .calendar-card>.eyebrow{margin-bottom:4px}
  .invitation-paged .calendar-card h2{font-size:25px;margin-bottom:8px}
  .invitation-paged .calendar th{padding-bottom:6px}
  .invitation-paged .calendar td{height:22px;font-size:14px}
  .invitation-paged .wedding-day span{width:22px;height:22px}
  .invitation-paged .wedding-date{bottom:max(76px,calc(env(safe-area-inset-bottom) + 72px));font-size:23px}
  .invitation-paged .scroll-cue{bottom:max(8px,calc(env(safe-area-inset-bottom) + 4px));gap:4px;padding:4px 18px}
  .invitation-paged .scroll-cue svg{height:20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}