@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,500&family=Montserrat:wght@300;400;500&display=swap');


:root { --ink:#25201c; --cream:#f6f0e7; --wine:#452c31; --gold:#b79b72; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#d7d0c7; color:var(--ink); font-family:Montserrat, sans-serif; }
main { width:min(100%, 480px); margin:auto; background:var(--cream); overflow:hidden; box-shadow:0 0 50px #70675f55; }
section { position:relative; padding:82px 28px; text-align:center; }
.hero { min-height:100svh; padding:36px 22px 50px; color:white; display:flex; flex-direction:column; align-items:center; background:linear-gradient(160deg,#241c20,#684752 60%,#321f26); }
.eyebrow { font-size:11px; letter-spacing:.32em; margin:0 0 26px; }
.hero-photo { width:100%; aspect-ratio:4/5; border-radius:210px 210px 24px 24px; border:1px solid #ffffff70; background:url('zhalgas-aigerim-1.jpg') center 38%/cover no-repeat; }
.map-placeholder span { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.monogram { margin-top:-46px; width:110px; height:110px; display:grid; place-items:center; border-radius:50%; background:var(--cream); color:var(--wine); font:500 35px 'Cormorant Garamond'; z-index:2; box-shadow:0 10px 30px #17101655; }
.monogram i { font-size:18px; margin:0 2px; }
h1,h2,.script { font-family:'Cormorant Garamond',serif; font-weight:400; }
h1 { margin:20px 0 3px; font-size:52px; line-height:.9; }
h1 em { color:#d8bfa2; font-weight:400; }
.date { letter-spacing:.28em; font-size:13px; }
.scroll { margin-top:auto; padding-top:32px; opacity:.65; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.music { position:fixed; right:max(18px,calc(50% - 220px)); bottom:22px; z-index:9; width:54px; height:54px; border:1px solid #fff8; border-radius:50%; background:#452c31e8; color:#fff; box-shadow:0 7px 22px #0005; cursor:pointer; }
.music small { position:absolute; right:61px; top:18px; width:110px; font-size:9px; letter-spacing:.08em; text-align:right; }
.paper { background:var(--cream); }
.paper h2,.dark h2 { font-size:38px; line-height:1.05; margin:12px 0 24px; }
.paper > p:not(.eyebrow,.script) { font:19px/1.55 'Cormorant Garamond'; max-width:330px; margin:0 auto; }
.script { font-style:italic; color:var(--wine); font-size:25px; }
.ornament { color:var(--gold); font-size:32px; margin-top:35px; }
.dark { background:var(--wine); color:#fff; }
.timeline { border-left:1px solid #cdb89b; margin:30px 15px 0 65px; text-align:left; }
.timeline article { padding:3px 0 42px 32px; position:relative; }
.timeline article:before { content:""; position:absolute; left:-6px; top:7px; width:11px; height:11px; background:#d8c5aa; border-radius:50%; }
.timeline b { font:34px 'Cormorant Garamond'; display:block; }
.timeline span { font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.photo-grid div { min-height:275px; background-color:#ded4c8; background-position:center; background-size:cover; }
.photo-grid .photo-one { grid-column:1/-1; min-height:360px; background-image:url('zhalgas-aigerim-3.jpg'); border-radius:180px 180px 0 0; }
.photo-grid .photo-two { background-image:url('zhalgas-aigerim-1.jpg'); background-position:center 40%; }
.photo-grid .photo-three { background-image:url('zhalgas-aigerim-2.jpg'); background-position:center 35%; }
.count { padding-top:45px; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.countdown b { display:block; font:31px 'Cormorant Garamond'; color:var(--wine); }
.countdown span { font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.place-time { margin-top:8px; color:#d9c5aa; font-size:13px; }
.map-placeholder { height:260px; margin:34px 0 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#312329; text-decoration:none; background:linear-gradient(30deg,#c5b5a2 12%,transparent 12.5% 87%,#c5b5a2 87.5%),linear-gradient(150deg,#d8cdbc 12%,transparent 12.5% 87%,#d8cdbc 87.5%),#eee6da; background-size:70px 120px; }
.map-placeholder strong { padding:8px 13px; background:#f6f0e7e8; font:23px 'Cormorant Garamond'; }
.map-placeholder small { padding:5px 9px; background:#f6f0e7dc; font-size:10px; letter-spacing:.09em; }
.map-pin { width:40px; height:40px; display:grid; place-items:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); color:#fff; background:var(--wine); font-size:12px; }
.map-pin::first-letter { transform:rotate(45deg); }
.button { display:inline-block; border:0; border-radius:0; padding:16px 27px; color:white; background:var(--wine); font:500 10px Montserrat; letter-spacing:.17em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.dark .button { background:transparent; border:1px solid #d9c5aa; }
form { text-align:left; margin-top:32px; }
form > label,legend { display:block; font-size:12px; letter-spacing:.08em; margin-bottom:10px; }
input:not([type=radio]) { width:100%; border:0; border-bottom:1px solid #9d8d80; background:transparent; padding:12px 3px; margin-top:7px; font:15px Montserrat; outline:none; }
fieldset { border:0; padding:20px 0; margin:0; }
fieldset label { display:block; padding:8px 0; font-size:13px; }
fieldset input { accent-color:var(--wine); margin-right:8px; }
.success { padding:24px; margin-top:25px; border:1px solid #bda98d; font:21px 'Cormorant Garamond'; }
footer { padding:45px 20px 90px; background:#20171b; color:#d8c5aa; text-align:center; font:24px 'Cormorant Garamond'; }
@media (min-width:700px) { body { padding:30px 0; } main { border-radius:6px; } }