/* Reproduce the supplied reference's component dimensions and artwork. */
:root{--sans:'Inter',sans-serif;--script:'Pinyon Script',cursive}
.hero{height:100svh;min-height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden;isolation:isolate}
.hero:before,.hero:after{display:none}.reference-video{position:absolute;inset:0;z-index:-1;mask-image:linear-gradient(#000 0% 75%,transparent 100%)}.reference-video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.reference-video:after{content:'';position:absolute;inset:0;background:#fbf8f30d}
.hero-inner{width:100%;height:100%;padding:20px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:-20px}
.reference-monogram{object-fit:contain;display:block;width:auto;filter:drop-shadow(0 2px 10px #00000014)}.reference-monogram.small{height:clamp(77px,11.5vh,115px);max-width:120px;margin:0 auto clamp(6px,1vh,12px)}
.reference-monogram.large{height:clamp(172px,30.4vh,328px);max-width:min(59vw,288px);margin:0 auto 30px}
.hero h1{font-size:clamp(58px,10vw,115px);line-height:1;margin:0}.hero h1 em{font-size:clamp(26px,4vw,45px);margin:clamp(3px,.8vh,8px) 0;line-height:1}.hero .eyebrow{font-family:var(--serif);font-size:clamp(14px,1.8vw,19px);letter-spacing:clamp(3px,.4vw,5px);margin-bottom:clamp(6px,1.2vh,14px)}
.hero .scroll-cue{position:absolute;bottom:clamp(64px,8.5vh,104px);left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;color:#fff;font-size:clamp(10px,1.2vw,14px);font-weight:600;letter-spacing:3px;text-shadow:0 2px 8px #000c}.hero .scroll-cue span{background:linear-gradient(#fffffff2,transparent);height:clamp(32px,6vh,58px)}
#welcome-gate{background:#dee9e7 url('theme-hero.jpg') center/cover no-repeat;transition:opacity 1s ease}#welcome-gate .welcome-content{padding:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:-20px}#welcome-gate #welcome-title.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0);overflow:hidden}#begin-invitation{min-height:0;padding:clamp(11px,1.5vh,18px) clamp(24px,5vw,61px);font:500 clamp(12px,1.2vw,15px)/1.6 var(--serif);letter-spacing:clamp(2px,.2vw,4px);border-radius:50px;animation:reference-breathe 4s ease-in-out infinite}
@keyframes reference-breathe{50%{transform:scale(1.025);box-shadow:0 0 16px #c9a35b59}}
.reference-entered .hero-inner>img,.reference-entered .hero-inner>.eyebrow,.reference-entered h1{animation:reference-arrive 1.5s ease both}.reference-entered .hero-inner>.eyebrow{animation-delay:.4s}.reference-entered h1{animation-delay:.7s}@keyframes reference-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.floral-ornament.supplied-ornament{height:auto;width:clamp(120px,15vw,200px);margin:0 auto 12px}.floral-ornament.supplied-ornament img{width:100%;height:auto;object-fit:contain}.story .floral-ornament{max-width:380px;width:100%;margin:0 auto -64px}.story h2{font-size:clamp(48px,8vw,80px)}.story>.eyebrow{margin-bottom:16px}.story>.eyebrow,.story>h2{position:relative}.story .chapters{max-width:750px}.chapters h3{font-size:clamp(24px,5vw,40px)}
#invitation{max-width:714px;padding:48px 32px 32px}#invitation .floral-ornament{width:80%;max-width:300px;margin-bottom:24px}#invitation h2{font-size:clamp(32px,5.5vw,51px);line-height:1.15;margin-bottom:14px}#invitation h3{font-size:clamp(48px,8vw,72px);line-height:1.1;margin-top:32px}#invitation .full-name{font-size:18px;margin-bottom:12px}#invitation .reference-relation{font:400 12px/1.6 var(--sans);text-transform:uppercase;letter-spacing:2px;color:#8a7b7e;margin:8px 0}#invitation .reference-parents{font:500 clamp(16px,2.8vw,19px)/1.4 var(--serif);color:#8c6a28}#invitation>.amp{font-size:40px;margin:12px 0 20px;color:#9c3d3d}.reference-blessings{margin-top:25px;padding-top:15px}
#reveal h2{font-size:clamp(32px,5vw,56px);max-width:none;margin-bottom:48px}#reveal .heart{width:clamp(260px,75vw,380px);height:clamp(240px,70vw,350px);aspect-ratio:auto;overflow:hidden;background:#fbf9f4;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 29.6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;margin:0 auto 32px}#reveal .heart .hidden-date{mask:none;background:#fbf9f4;padding:0 0 8%;gap:0;color:#9c3d3d}#reveal .heart .hidden-date:before{display:none}#reveal .heart .hidden-date span{font-family:'Times New Roman',serif;letter-spacing:0;line-height:1.2}#reveal .heart .hidden-date .reference-day{font-size:clamp(40px,8vw,64px)}#reveal .heart .hidden-date .reference-month{font-size:clamp(22px,5vw,35px);letter-spacing:2px}#reveal .heart .hidden-date .reference-year{font-size:clamp(29px,6vw,45px)}
#countdown h2{font-size:clamp(40px,6vw,64px);margin-bottom:48px}.clock-frame{max-width:868px;width:100%;aspect-ratio:1904/826;margin:0 auto}.clock-frame>img{object-fit:contain}#clock{inset:0;padding:0 16%;gap:16px}#clock>div{flex:1;width:auto}#clock strong{font:400 clamp(32px,4.5vw,51px)/1 'Times New Roman',serif;color:#8a4b53}#clock span{font:400 10px/1.6 var(--sans);letter-spacing:3px;color:#8a7b7e;margin-top:8px}#clock>div:not(:last-child):after{right:-8px;top:5px;height:40px;background:#bfa06a}
.reference-family-columns{max-width:800px;margin:32px auto;display:grid;grid-template-columns:1fr 1fr}.reference-family-block{padding:0 32px}.reference-family-block+div{border-left:1px solid #c9a35b4d}.reference-family-title{font:400 16px/1.6 var(--sans);text-transform:uppercase;letter-spacing:3px;color:#8a4b53;border-bottom:1px solid #c9a35b4d;padding-bottom:16px;margin-bottom:32px}.reference-family-block .family-names{display:block;margin:0;padding:0;border:0}.reference-family-block .family-names p{font:400 19px/1.8 var(--serif)}.reference-family-block .family-names span{font-size:20px}.reference-family-block .groom-family>.eyebrow{font:400 12px/1.6 var(--sans)}
.reference-entrance{transition:opacity 1.1s ease,transform 1.1s ease}.reference-entrance:not(.reference-in-view){opacity:0;transform:translateY(25px)}
@media(max-width:768px){.reference-monogram.small{height:clamp(69px,10.5vh,96px);max-width:101px}.reference-monogram.large{height:auto;width:59vw;max-width:234px;max-height:29vh}.hero .scroll-cue{bottom:clamp(80px,12vh,125px)}.hero h1{font-size:clamp(58px,10vw,115px)}.story .floral-ornament{margin-bottom:-40px}.reference-family-columns{grid-template-columns:1fr;gap:20px}.reference-family-block+div{border-left:0;padding-top:20px}.reference-family-title{margin-bottom:20px}}
@media(max-width:480px){#invitation{padding:32px 16px}#invitation h2{font-size:clamp(24px,6.5vw,35px)}#countdown .clock-frame{width:115%;max-width:none;margin-left:-7.5%}#clock{gap:3px}#clock strong{font-size:clamp(15px,4vw,32px)}#clock span{font-size:clamp(6px,1.5vw,10px);letter-spacing:.5px}#clock>div:not(:last-child):after{height:30px;right:-2px;top:0}.story h2{font-size:clamp(48px,8vw,80px)}}
@media(prefers-reduced-motion:reduce){.reference-entrance:not(.reference-in-view){opacity:1;transform:none}.reference-entrance,#begin-invitation,.reference-entered .hero-inner>*{animation:none!important;transition:none!important}}
/* Burgundy torn paper and a reveal clipped to that exact same alpha outline. */
#reveal .heart{width:min(700px,100%);height:auto;aspect-ratio:1681/936;margin:0 auto 28px;background:transparent;-webkit-mask:none;mask:none;overflow:hidden;container-type:inline-size;border:0;border-radius:0;box-shadow:none}
#reveal .heart .hidden-date{inset:0;width:100%;height:100%;padding:8% 7%;background:linear-gradient(125deg,#d6e4ee 0%,#e9e5eb 45%,#efd5dd 100%);-webkit-mask:url('scratch-paper.png') center/100% 100% no-repeat;mask:url('scratch-paper.png') center/100% 100% no-repeat;mask-mode:alpha;filter:none;animation:none;gap:0;color:#681f2c;visibility:hidden}
#reveal .heart.scratch-ready .hidden-date{visibility:visible}
#reveal .heart .hidden-date:before{display:none}
#reveal .heart .hidden-date .paper-weekday{font:500 clamp(8px,1.5cqw,11px)/1.5 var(--sans);letter-spacing:.25em;margin:0 0 3cqw;color:#79535f}
#reveal .heart .hidden-date .paper-date{font:600 clamp(22px,7cqw,49px)/1.15 var(--serif);letter-spacing:-.02em;white-space:nowrap;color:#681f2c}
#reveal .heart .hidden-date .paper-caption{font:400 clamp(20px,5.4cqw,38px)/1.35 var(--script);letter-spacing:0;margin-top:3cqw;color:#681f2c}
#reveal .heart canvas{inset:0;width:100%;height:100%;border-radius:0;background:transparent;filter:none}