@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Great+Vibes&display=swap');
:root{--cream:#f5efe3;--peach:#a94e42;--ink:#62483e;--line:#d7b9a8;--paper:#fcf8f0}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.6}button,input{font:inherit}a{color:inherit}button,a,input{touch-action:manipulation}:focus-visible{outline:2px solid var(--peach);outline-offset:5px}[hidden]{display:none!important}
.language{position:absolute;top:24px;right:32px;display:flex;gap:8px}.language button{background:none;border:0;color:var(--ink);font-size:15px;cursor:pointer;padding:6px}.language button[aria-pressed=true]{color:var(--peach);border-bottom:1px solid}
header{text-align:center;padding:55px 20px 28px}.illustration{width:94px;height:86px;color:var(--peach);display:block;margin:0 auto 12px}.names{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(70px,9vw,112px);line-height:1.15;color:var(--peach);margin:10px 0}.fullname{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:8px 0 28px}.nav{display:flex;justify-content:center;gap:45px;margin:22px 0 8px}.nav a{text-decoration:none;font-size:18px;letter-spacing:1.3px;padding:6px 2px}.nav a[aria-current=page]{color:var(--peach);border-bottom:1px solid var(--peach)}
main{max-width:1100px;margin:auto;padding:12px 28px 70px}.hero{width:100%;aspect-ratio:1.8;object-fit:cover;display:block;filter:grayscale(1)}.intro{text-align:center;max-width:680px;margin:45px auto 0}.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:13px;color:var(--peach)}h2{font-size:42px;font-weight:400;line-height:1.2;color:var(--peach);margin:18px 0}h3{font-weight:500}p{margin:18px 0}.date{font-size:31px;margin:8px 0}.button{display:inline-block;background:var(--peach);color:var(--paper);border:1px solid var(--peach);padding:10px 32px;text-decoration:none;font-size:17px;cursor:pointer;letter-spacing:1px}.button:disabled{opacity:.65;cursor:wait}.page-intro{text-align:center;max-width:660px;margin:12px auto 36px}.faq{max-width:760px;margin:0 auto}.faq details{border-bottom:1px solid var(--line);padding:19px 0}.faq summary{cursor:pointer;color:var(--peach);font-size:24px;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+'}.faq details[open] summary:after{content:'−'}.faq p{font-size:19px;margin:15px 24px 6px 0}footer{text-align:center;border-top:1px solid var(--line);margin:0 28px;padding:24px;font-size:14px;letter-spacing:1px}.form-frame{width:100%;height:470px;border:0;display:block;max-width:660px;margin:auto}.small{font-size:16px}.setup-note{background:var(--paper);border:1px solid var(--line);padding:12px 20px;max-width:660px;margin:0 auto 20px;text-align:center;font-size:16px}.skip{position:absolute;left:-9999px}.skip:focus{left:15px;top:15px;background:var(--paper);z-index:9}
@media(max-width:600px){header{padding:68px 20px 20px}.language{top:14px;right:15px}.illustration{width:78px;height:72px}.fullname{font-size:10px;letter-spacing:1px}.nav{gap:32px}.names{font-size:76px}main{padding:8px 18px 50px}.hero{aspect-ratio:1.12}.intro{margin-top:32px}h2{font-size:34px}.date{font-size:27px}.faq summary{font-size:22px}}

/* The same compact timeline arrangement on desktop and phones. */
body[data-page=home] .intro{margin:8px auto 0}
.timeline{--gap:24px;--photo-height:200px;max-width:640px;margin:58px auto 0;padding-left:32px}
.timeline ol{list-style:none;margin:0;padding:0}
.timeline li{position:relative;min-width:0}
.timeline h3{margin:0 0 8px;text-align:center;font-size:22px;font-weight:400;line-height:30px;letter-spacing:1px;color:var(--peach)}
.timeline figure{position:relative;z-index:1;margin:0;padding:0;background:none;box-shadow:none}
.timeline img{position:relative;z-index:1;display:block;width:100%;height:var(--photo-height);object-fit:contain}
.timeline-childhood{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.photo-pair{display:grid;gap:10px}
.timeline-pair:first-child figure::before{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);font-size:16px;content:'Ida'}
.timeline-pair:first-child figure+figure::before{content:'Leo'}
.timeline-start{grid-column:1/-1;justify-self:center;width:calc((100% - var(--gap))/2);margin-top:14px}
.merge-lines{display:none}
.timeline-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gap);margin-top:32px!important}
.timeline-row img{height:calc(var(--photo-height) * 1.45)}
.timeline-start img{height:calc(var(--photo-height) * 1.25)}
.timeline-finale{max-width:380px;margin:36px auto 0!important}
.timeline-finale img{height:350px}
@media(max-width:600px){
 .timeline{--gap:14px;--photo-height:96px;padding-left:26px;margin-top:40px}
 .timeline h3{font-size:18px;line-height:26px;margin-bottom:6px}
 .timeline-pair:first-child figure::before{font-size:14px;right:calc(100% + 6px)}
 .timeline-row{row-gap:20px;margin-top:24px!important}
 .timeline-finale{max-width:280px;margin-top:28px!important}
 .timeline-finale img{height:210px}
}

/* Shared villa mark and three portrait background videos. */
header .villa-logo{width:240px;max-width:65vw;height:auto;margin:0 auto 16px}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:680px;margin:0 auto 36px}
.video-grid video{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:var(--paper);pointer-events:none}
@media(max-width:600px){header .villa-logo{width:200px}.video-grid{gap:8px;margin-bottom:28px}}