@font-face{font-family:Cormorant;src:url('/assets/cormorant-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('/assets/cormorant-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:GreatVibes;src:url('/assets/great-vibes.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#efedf0;--ink:#756348;--ink-strong:#5f4d3e;--gold:#947c58}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{margin:0;min-width:280px;background:#e8e5e9;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0;font-weight:400}
.invitation{width:min(100%,620px);margin:0 auto;background:var(--paper);box-shadow:0 0 32px #4b415017;container-type:inline-size}
.scene{position:relative;display:grid;place-items:center;min-height:100svh;min-height:100dvh;overflow:hidden;scroll-snap-align:start;isolation:isolate}
.scene-photo{position:absolute;inset:0;z-index:-2;background-repeat:no-repeat;background-position:center;background-size:cover}
.cover-photo{background-image:url('/assets/cover.jpg')}
.flowers-photo{background-image:url('/assets/flowers.jpg')}
.date-flowers{transform:scaleX(-1)}
.place-flowers{transform:scale(-1)}
.scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#efedf01a,#efedf036 55%,#efedf01a);pointer-events:none}
.cover-title,.cover-bottom,.letter-copy,.date-copy,.place-copy{width:100%;text-align:center}
.cover-title{align-self:start;margin-top:clamp(90px,20svh,190px);padding:0 6cqw}
.cover-title h1{font:400 clamp(94px,23cqw,150px)/.82 Cormorant,Georgia,serif;letter-spacing:-.07em;color:var(--ink-strong)}
.kazakh-script{font:italic 400 clamp(42px,10cqw,67px)/1.05 Cormorant,Georgia,serif;letter-spacing:-.04em;color:var(--ink-strong)}
.cover-title .kazakh-script{margin-top:clamp(18px,4cqw,28px)}
.cover-bottom{position:absolute;bottom:clamp(42px,8svh,90px);font-family:Cormorant,Georgia,serif;color:var(--ink-strong)}
.cover-bottom p:first-child{font-size:clamp(27px,6cqw,40px);letter-spacing:.15em}
.cover-bottom p:last-child{margin-top:8px;font-size:clamp(16px,3.6cqw,23px);letter-spacing:.11em}
.letter-copy,.date-copy,.place-copy{padding:clamp(60px,10svh,110px) 7cqw}
.letter-copy{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.8svh,28px)}
.letter h2{font-size:clamp(45px,11.5cqw,72px)}
.ornament{font:400 clamp(26px,6cqw,42px)/1 Cormorant,Georgia,serif;color:#ad9874}
.letter-intro,.letter-body{font:400 clamp(25px,6.1cqw,37px)/1.08 Cormorant,Georgia,serif;color:var(--ink-strong)}
.letter-name{font:400 clamp(64px,16cqw,102px)/.95 Cormorant,Georgia,serif;color:#8d7457}
.letter-body{max-width:520px}
.letter-joy{max-width:530px;margin-top:clamp(12px,3svh,30px);font:italic 400 clamp(34px,8cqw,52px)/1.08 Cormorant,Georgia,serif;color:#8d7457}
.flourish{font:400 clamp(46px,10.8cqw,67px)/1.3 GreatVibes,Cormorant,serif;color:var(--gold);padding:0 .12em;white-space:nowrap}
.date-copy{align-self:center}
.date-line,.time,.venue{font:400 clamp(25px,6.3cqw,39px)/1.2 Cormorant,Georgia,serif;letter-spacing:.075em;color:var(--ink)}
.date-line{margin-top:clamp(20px,4svh,40px)}
.time{margin-top:4px}
.calendar{width:100%;max-width:520px;margin:clamp(36px,7svh,70px) auto 0;font-family:Cormorant,Georgia,serif;color:#9b8767}
.weekday,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.weekday{margin-bottom:clamp(18px,3svh,29px);font-size:clamp(20px,4.7cqw,28px);letter-spacing:.02em}
.days{row-gap:clamp(13px,2.8svh,25px);font-size:clamp(23px,5.4cqw,32px);line-height:1}
.days>span,.days>i{position:relative;display:grid;place-items:center;height:clamp(32px,7cqw,45px);font-style:normal}
.chosen{color:var(--ink-strong)}
.chosen svg{position:absolute;width:clamp(54px,12cqw,76px);height:clamp(50px,11cqw,70px);left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;fill:none;stroke:#917855;stroke-width:1.6}
.place-copy{display:flex;flex-direction:column;align-items:center}
.venue{margin-top:clamp(20px,4svh,40px);letter-spacing:.065em}
.place-copy .ornament{margin-top:clamp(25px,6svh,55px)}
.host-heading{margin-top:clamp(20px,4svh,40px)}
.hosts{margin-top:clamp(15px,3svh,28px);font:400 clamp(42px,9.2cqw,58px)/1.2 GreatVibes,Cormorant,serif;color:var(--ink-strong);white-space:nowrap}
.family{margin-top:clamp(25px,6svh,55px);font:italic 400 clamp(31px,7cqw,44px)/1 Cormorant,Georgia,serif;color:var(--ink)}
#sound{position:fixed;z-index:20;right:max(18px,calc((100vw - 620px)/2 + 18px));bottom:max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;width:48px;height:48px;border:1px solid #cec5bd;border-radius:50%;background:#f9f5f0e8;box-shadow:0 3px 12px #5546352b;color:var(--ink-strong);font:400 26px/1 Cormorant,Georgia,serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
#sound:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#sound.muted{opacity:.7}
@media(max-width:480px){.scene{min-height:100svh}.letter-copy{gap:clamp(11px,2.1svh,20px)}.letter-intro,.letter-body{font-size:clamp(25px,6.5cqw,31px)}.cover-title{margin-top:22svh}}
@media(max-height:700px){.letter-copy,.date-copy,.place-copy{padding-top:38px;padding-bottom:38px}.letter-copy{gap:12px}.calendar{margin-top:25px}.days{row-gap:9px}.place-copy .ornament{margin-top:18px}.host-heading{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}