@font-face{font-family:Girassol;src:url('assets/fonts/Girassol/Girassol-Regular.ttf') format('truetype');font-display:swap}

@font-face{font-family:JustMe;src:url('assets/fonts/Just_Me_Again_Down_Here/JustMeAgainDownHere-Regular.ttf') format('truetype');font-display:swap}

:root{--yellow:#ffed62;--navy:#031a33;--green:#294d20;--heading:Girassol,Georgia,serif;--body:JustMe,'Segoe Print',cursive;--nav-height:87px}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height)}
body{margin:0;background:var(--navy);color:var(--yellow);font-family:var(--body);font-size:clamp(25px,3.15vw,43px);line-height:1.35}
button,input,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid white;outline-offset:6px}
[hidden]{display:none!important}
.blue{background-color:#123e5d;background-image:linear-gradient(rgb(3 26 51 / 70%),rgb(3 26 51 / 70%)),url('assets/BG Folder/Blue BG.jpg');background-size:100% auto}
.green{background-color:var(--green);background-image:linear-gradient(rgb(3 51 10 / 80%),rgb(3 51 10 / 80%)),url('assets/BG Folder/Green BG.webp');background-size:100% auto}
.pink{background-color:#825953;background-image:linear-gradient(rgb(51 3 46 / 40%),rgb(51 3 46 / 40%)),url('assets/BG Folder/Pink BG.jpg');background-size:100% auto}
header{position:sticky;top:0;z-index:20;background:#02162b;padding:21px 2.475%}
nav{display:flex;justify-content:space-between;gap:16.5px;max-width:1050px;margin:auto}
nav a{border:3px solid var(--yellow);color:var(--yellow);font-family:var(--heading);font-size:clamp(16.5px,2.625vw,33px);text-transform:uppercase;text-decoration:none;text-align:center;padding:2.25px 14.25px;line-height:1.2}
nav a:hover,nav a[aria-current]{box-shadow:0 0 0 2px var(--yellow)}
.skip{position:fixed;top:-100px;left:20px;background:var(--yellow);color:var(--navy);z-index:30}
.skip:focus{top:10px}
h1,h2,h3,p{margin:0}
h2,h3,.invitation,.date,address,label,legend,.button{font-family:var(--heading);font-weight:400}
h3{font-size:clamp(32px,4.2vw,59px);line-height:1.2;margin-bottom:20px}
p+p{margin-top:30px}
.hero{position:relative;text-align:center;padding:35px 9% 46px;overflow:hidden}
.invitation{font-size:clamp(28px,4.9vw,66px);line-height:1.18;text-transform:uppercase}
.names{display:block;width:100%;max-width:1200px;height:auto;margin:35px auto 16px}
.date{font-size:clamp(40px,6.7vw,92px);line-height:1.25}
.flowers{pointer-events:none;object-fit:contain}
.hero .flowers{position:absolute;width:15%;height:auto}
.hero .first{top:35px;left:3%}
.hero .last{right:3%;bottom:40px;transform:rotate(180deg)}
h2{text-align:center;text-transform:uppercase;border:4px solid var(--yellow);font-size:clamp(32px,4.7vw,63px);padding:17px 12px;line-height:1.2}
.content{max-width:1400px;padding:65px 4.2%;margin:0 auto}
.details{display:grid;gap:85px}
.row{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:start}
.row p{max-width:760px}
address{font-style:normal;font-size:clamp(24px,3vw,41px);margin-top:20px}
/* Photo positions and ornament groups follow the PDF's overlapping collages. */
.collage{position:relative;width:100%;aspect-ratio:1 / 1.1;isolation:isolate}

.collage>img{position:absolute;object-fit:cover;height:auto}

.location .mountain-photo{left:20%;top:3%;width:62%;aspect-ratio:1.55;z-index:1}

.location .night-photo{left:22%;top:68%;width:64%;aspect-ratio:2.2;z-index:0}

.location .road-photo{left:39%;top:25%;width:62%;aspect-ratio:1.19;z-index:2}

.food{aspect-ratio:1 / 1.05}

.food .desserts-photo{left:4%;top:48%;width:63%;aspect-ratio:1.5;z-index:1}

.food .ramen-photo{left:39%;top:13%;width:49%;aspect-ratio:1.15;z-index:2}

.ornaments{position:absolute;display:grid;grid-template-columns:1fr 1fr;width:19%;aspect-ratio:1;z-index:3;pointer-events:none;color:var(--yellow);font-family:Yarndings;font-weight:400;line-height:1}

.ornaments>span{display:block;align-self:center;justify-self:center;font-size:clamp(20px,3.8vw,53px)}

.ornaments .spark{font-size:clamp(12px,2vw,28px)}

.ornaments .blossom{grid-column:1 / -1;font-size:clamp(30px,5.3vw,74px)}

.ornaments-start{left:0;top:0}
.ornaments-end{right:-6%;bottom:0}
.ornaments-end .spark{grid-column:2;grid-row:1}
.ornaments-end .pinwheel{grid-column:1;grid-row:1}

.food .ornaments-start{left:20%;top:0}
.food .ornaments-end{right:0;bottom:0}

.dress-gallery{position:relative;margin-top:45px}

.dress-photos{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:30px;margin:0 auto;width:86%}

.dress-photos img{width:100%;height:auto;aspect-ratio:1.58;object-fit:cover}

.dress-photos img:nth-child(n+3){aspect-ratio:.91;width:83%;justify-self:center}

.dress-photos img:nth-child(4){width:88%;aspect-ratio:1}

.dress-gallery .ornaments{width:7%}

.dress-gallery .ornaments>span{font-size:clamp(18px,3.4vw,48px)}

.dress-gallery .ornaments .spark{font-size:clamp(12px,1.9vw,27px)}

.dress-gallery .ornaments .blossom{font-size:clamp(25px,5vw,70px)}

.dress-top-left{left:-1%;top:5%}
.dress-top-right{right:-1%;top:5%}
.dress-bottom-left{left:1%;top:51%}
.dress-bottom-right{right:0;top:51%}

.schedule{list-style:none;text-align:center;padding-top:40px;padding-bottom:30px}
.schedule li{padding:0 0 30px}
.schedule li p{max-width:1160px;margin:0 auto}
.schedule li::after{content:'✳ ✥ ❋ ✿ ❋ ✥ ✳';display:block;letter-spacing:10px;font-family:Georgia,serif;font-size:clamp(25px,4vw,50px);margin:27px auto 5px}
.schedule h3{margin-bottom:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 55px}
.field{display:flex;flex-direction:column;gap:15px}
label,legend{font-size:clamp(28px,3.5vw,48px);line-height:1.25}
small{font-family:system-ui,sans-serif;font-size:12px;white-space:nowrap}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{margin-bottom:15px}
input:not([type=radio]),textarea{width:100%;border:2px solid var(--yellow);border-radius:0;background:var(--yellow);color:var(--navy);padding:9px 16px;font-family:var(--body);font-size:30px;line-height:1.4;min-height:59px}
textarea{resize:vertical}
.choices{display:flex;gap:35px}
.choices label{display:flex;align-items:center;gap:15px;font-family:var(--body);cursor:pointer;font-size:39px}
.choices input{appearance:none;width:45px;height:45px;background:var(--yellow);border:3px solid var(--yellow);border-radius:0;margin:0;display:grid;place-content:center;cursor:pointer;flex-shrink:0}
.choices input:checked::after{content:'✓';font-family:system-ui;font-size:33px;font-weight:700;color:var(--navy);line-height:1}
.wide{grid-column:1/-1}
#children-note{margin:35px 0}
.preview{font:15px/1.5 system-ui,sans-serif;margin-bottom:30px}
.button{display:inline-block;text-decoration:none;border:2px solid var(--yellow);background:var(--yellow);color:var(--green);font-size:clamp(23px,2.6vw,36px);padding:9px 16px;line-height:1.2;cursor:pointer}
.button:hover:not(:disabled){background:var(--navy);color:var(--yellow)}
.submit{margin-top:30px}
.button:disabled{cursor:default}
#form-status{font:18px/1.6 system-ui,sans-serif;margin-top:20px}
#form-status:empty{display:none}
.registry{text-align:center;padding-top:35px}
.registry-links{display:flex;justify-content:center;gap:30px;margin:35px 0}
.registry-links>div{display:grid;gap:10px}
.registry-links span{font:14px system-ui,sans-serif}
.footer-flowers{display:block;width:110px;height:auto;margin:35px auto 0}

@media(max-width:700px){:root{--nav-height:58.5px}
header{padding:13.5px 9px}
nav{gap:6px}
nav a{font-size:clamp(11.25px,2.925vw,18.75px);border-width:1.5px;padding:3.75px 4.5px}
.hero{padding:35px 4% 40px}
.hero .first{top:15px;left:2%;width:14%}
.hero .last{bottom:15px;right:1%;width:15%}
.invitation{font-size:clamp(27px,5.8vw,42px)}
.names{margin-top:30px;margin-bottom:20px}
h2{border-width:3px;padding:14px 8px}
.content{padding:36px 6%}
.details{gap:45px}
.row{grid-template-columns:1fr;gap:25px}
.collage{width:100%;max-width:450px;justify-self:center}
h3{margin-bottom:15px}
.dress-gallery{margin-top:25px}
.dress-photos{gap:14px}
.ornaments>span{font-size:clamp(25px,8vw,42px)}
.ornaments .spark{font-size:clamp(15px,4vw,23px)}
.ornaments .blossom{font-size:clamp(40px,13vw,65px)}
.schedule li{padding-bottom:24px}
.schedule li::after{letter-spacing:5px;margin-top:23px}
.form-grid{grid-template-columns:1fr;gap:26px}
.choices label{font-size:32px}
.choices input{width:38px;height:38px}
.choices{gap:40px}
.registry-links{gap:18px;flex-wrap:wrap}
small{font-size:11px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


@font-face{font-family:Yarndings;src:url('assets/fonts/Yarndings_20/Yarndings20-Regular.ttf') format('truetype');font-display:swap}
.schedule li::after{content:'Y I Q U Q I Y';font-family:Yarndings;font-size:clamp(32px,5vw,65px);letter-spacing:4px}


/* Honeypot: kept outside the visible form and keyboard navigation. */
.rsvp-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.submit:disabled{opacity:.75;cursor:default}
