/* Kim & Mil — from the save the date: embossed paper + terracotta Baskerville */
:root{--paper:#E3DCCB;--ink:#4A3326;--ink-dark:#3A271C;--text:#4A3326;--line:rgba(74,51,38,.25);--serif:"Libre Baskerville",Baskerville,Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper) url("img/paper.jpg") repeat;background-size:600px auto;color:var(--text);font-family:var(--serif);font-size:15.5px;line-height:1.95;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1.2em}
h1,h2{font-weight:400;color:var(--ink);margin:0}
.caps{text-transform:uppercase;letter-spacing:.24em;color:var(--ink);font-size:14px;line-height:1.7}
.small{font-size:11px;letter-spacing:.22em}
.center{text-align:center}
.narrow{max-width:620px;margin:0 auto}
.lead{font-style:italic;font-size:17px}
.section{padding:90px 24px}
.mono{width:110px;margin:40px auto 0;opacity:.95}
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.btn{display:inline-block;font:inherit;text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:14px 34px;cursor:pointer;text-decoration:none;transition:.2s}
.btn:hover{background:var(--ink);color:#F4EFE6}

/* header */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 40px;background:rgba(227,220,203,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--ink);text-transform:uppercase;letter-spacing:.28em;font-size:14px}
.brand i{font-style:italic;text-transform:none;letter-spacing:0}
nav{display:flex;gap:30px}
nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--text);padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.menu-btn{display:none;background:none;border:0;font:inherit;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink);cursor:pointer}

/* hero = the card */
.hero{position:relative;min-height:calc(100vh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 24px 80px;text-align:center}
.hero .std{position:absolute;left:48px;top:44px;text-align:left;letter-spacing:.06em;font-size:17px}
.hero-names{width:min(760px,96%);margin:0 auto 34px}
.hero .place{font-size:17px;letter-spacing:.2em}
.hero .when{font-size:14px;letter-spacing:.22em;margin-top:6px}
.rsvp-line{margin-top:34px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1040px;margin:0 auto;padding-top:0}
.card{display:block;text-decoration:none;text-align:center;border:1px solid var(--line);padding:42px 26px 34px;background:rgba(244,239,230,.35);transition:.25s}
.card:hover{background:rgba(244,239,230,.75)}
.card h2{font-size:24px;margin:12px 0 8px}
.card p{margin:0;font-style:italic}

/* page title */
.page-title{text-align:center;padding:84px 24px 10px}
.page-title h1{font-size:clamp(30px,4.4vw,44px);text-transform:uppercase;letter-spacing:.16em;margin-top:14px}
.page-title .mono{width:96px;margin-top:30px}

/* weekend */
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1040px;margin:50px auto 0}
.day{padding:10px 34px;text-align:center;border-left:1px solid var(--line)}
.day:first-child{border-left:0}
.day h2{font-size:22px;margin:12px 0 14px}
.tbc{font-style:italic;color:var(--ink)}

/* text pages */
.narrow h2{font-size:20px;margin:34px 0 10px}
.addr{text-align:center;margin-top:36px;padding:30px;border:1px solid var(--line);line-height:1.9}
.addr .caps{margin-bottom:8px}

/* form */
.form{max-width:640px;margin:0 auto;border:1px solid var(--line);padding:46px 48px 38px;background:rgba(244,239,230,.4)}
.form label{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--ink);margin:20px 0 4px}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{width:100%;margin-top:8px;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;font-size:15px;letter-spacing:0;text-transform:none;color:var(--text);padding:6px 2px;border-radius:0}
.form input:focus,.form textarea:focus{outline:none;background:rgba(244,239,230,.6)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
fieldset{border:0;padding:0;margin:24px 0 0}
legend{text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--ink);margin-bottom:4px}
.form label.c{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:0;font-size:15px;color:var(--text);margin:6px 0}
.form label.chk{margin-top:24px}
.form input[type=radio],.form input[type=checkbox]{accent-color:var(--ink)}
.form .btn{margin-top:24px}
.ok{font-style:italic;color:var(--ink)}

/* faq */
.faq{max-width:700px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;color:var(--ink);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0}

/* footer */
footer{text-align:center;padding:50px 24px 54px;border-top:1px solid var(--line)}
footer .mono{width:90px;margin:0 auto 18px}
footer .caps{font-size:11px}
.sig{font-style:italic;font-size:13.5px;margin-top:18px;line-height:1.8}
footer a{text-decoration:none}

/* gate */
.gate{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--paper) url("img/paper.jpg") repeat;background-size:600px auto}
.gate.show{display:flex}
.gate-names{width:min(520px,90vw);margin:0 auto 20px}
.gate label{display:block;margin-top:34px}
.gate input{border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;text-align:center;letter-spacing:.24em;text-transform:uppercase;padding:8px;width:min(280px,80vw);color:var(--text);margin:8px 0 14px}
.gate input:focus{outline:none}
.gate .err{min-height:1.6em;font-style:italic;color:var(--ink);font-size:13px}
html.locked body>*:not(.gate){visibility:hidden}

@media (max-width:900px){
  .site-header{padding:16px 22px;flex-wrap:wrap}
  .menu-btn{display:block}
  nav{display:none;width:100%;flex-direction:column;gap:14px;padding:10px 0 4px}
  nav.open{display:flex}
  .cards,.days{grid-template-columns:1fr}
  .day{border-left:0;border-top:1px solid var(--line);padding:30px 10px}
  .day:first-child{border-top:0}
}
@media (max-width:600px){
  .section{padding:64px 20px}
  .hero{min-height:auto;padding:90px 16px 60px}
  .hero .std{left:20px;top:22px;font-size:14px}
  .hero .place{font-size:14px}
  .hero .when{font-size:11.5px;letter-spacing:.16em}
  .form{padding:30px 20px}
  .row2{grid-template-columns:1fr;gap:0}
}

/* ===== moodboard pass: editorial minimal, linen tones, handwriting accents ===== */
:root{--taupe:#CFC1A9;--taupe-dk:#B9A88C;--olive:#76773E;--choc:#4A3326;--cream:#F3EEE4;--sans:"Jost","Helvetica Neue",Arial,sans-serif;--hand:"Nothing You Could Do",cursive}
.caps,nav a,.brand,.btn,.form label,legend,.small{font-family:var(--sans);font-weight:400}
.caps{letter-spacing:.32em;font-size:12px}
.small{font-size:10.5px;letter-spacing:.3em}
.brand{letter-spacing:.38em;font-size:12px;font-weight:500}
.brand i{font-family:var(--serif)}
nav a{letter-spacing:.26em;font-size:10.5px}
.btn{letter-spacing:.3em;font-size:10.5px;font-weight:500;padding:15px 36px}
.btn:hover{background:var(--choc);color:var(--cream)}
.hand{font-family:var(--hand);font-size:24px;color:var(--olive);letter-spacing:0;text-transform:none;line-height:1.3}
.hero .std{font-family:var(--sans);font-size:12px;letter-spacing:.32em;line-height:1.9}
.hero .place{font-family:var(--sans);font-size:13px;letter-spacing:.36em}
.hero .when{font-family:var(--serif);font-size:16px;letter-spacing:.14em}

/* notched corners like the stationery cards */
.notch{--n:14px;-webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top right,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom right;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000) top right,radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000) bottom right;mask-size:51% 51%;mask-repeat:no-repeat}
.card,.day,.addr,.form{background:var(--cream);border:0}
.card{padding:48px 26px 40px}
.card:hover{background:#fff}
.card h2{font-size:26px}
.card p{font-family:var(--hand);font-style:normal;font-size:20px;color:var(--olive)}

/* editorial typographic band (moodboard: "live in the sunshine") */
.editorial{background:var(--taupe);padding:80px 6vw 70px;color:var(--choc)}
.ed-row{display:flex;align-items:baseline;gap:2.4vw;max-width:1100px;margin:0 auto;flex-wrap:wrap}
.ed-row .big{font-family:var(--serif);text-transform:uppercase;font-size:clamp(30px,5.6vw,72px);letter-spacing:-.01em;line-height:1.15}
.ed-row .tiny{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;align-self:center}
.ed-row .right{margin-left:auto}
.ed-row .mid{margin-left:auto;margin-right:8vw}
.editorial .hand{text-align:right;max-width:1100px;margin:26px auto 0;color:var(--choc);font-size:26px}

/* weekend */
.days{gap:24px;grid-template-columns:repeat(3,1fr)}
.day{border:0!important;padding:42px 28px 34px}
.day .num{font-family:var(--serif);font-size:64px;line-height:1;color:var(--taupe-dk);margin-bottom:14px}
.tbc{font-size:20px;margin-top:6px}

/* page titles */
.page-title .caps{color:var(--olive)}
.page-title h1{letter-spacing:.2em}

/* footer as a taupe band */
footer{background:var(--taupe);border-top:0}
footer .caps{color:var(--choc)}
.sig{font-family:var(--serif)}

@media (max-width:900px){.days{grid-template-columns:1fr}}
@media (max-width:600px){
  .editorial{padding:56px 22px 50px}
  .ed-row{gap:10px}
  .ed-row .mid{margin-right:0}
  .hand{font-size:21px}
}
.editorial + .cards{padding-top:70px}
.gate-mono{width:min(220px,55vw);margin:0 auto}
.gate label{margin-top:30px}

/* ===== type pass 2: moodboard fonts — condensed editorial serif, light garamond text, airy sans, signature script ===== */
:root{--display:"Instrument Serif","Times New Roman",serif;--serif:"Cormorant Garamond",Garamond,Georgia,serif;--hand:"Mrs Saint Delafield",cursive}
body{font-family:var(--serif);font-size:18px;line-height:1.75;font-weight:500}
.lead{font-size:20px}
.caps,nav a,.brand,.btn,.form label,legend,.small{font-weight:300}
.brand{font-weight:400}
.brand i{font-family:var(--display)}
h1,h2,.ed-row .big,.day .num,.hero .when,.card h2,.page-title h1,.narrow h2,.faq summary{font-family:var(--display);font-weight:400}
.page-title h1{font-size:clamp(34px,5vw,52px);letter-spacing:.06em}
.card h2{font-size:30px;letter-spacing:.01em}
.day h2{font-size:28px}
.narrow h2{font-size:26px}
.faq summary{font-size:22px}
.day .num{font-size:72px}
.ed-row .big{letter-spacing:0;line-height:1.05;font-size:clamp(34px,6.4vw,84px)}
.hand{font-family:var(--hand);font-size:34px;line-height:1.1}
.card p{font-family:var(--hand);font-size:30px}
.editorial .hand{font-size:40px}
.tbc{font-size:28px}
.hero .when{font-size:22px;letter-spacing:.1em}
.sig{font-family:var(--serif);font-size:15px}
.form input:not([type=radio]):not([type=checkbox]),.form textarea,.form label.c{font-size:17px}
/* hero: smaller blind-pressed names, more air */
.hero{padding:120px 24px 130px}
.hero-names{width:min(440px,62%);margin:0 auto 52px}
.rsvp-line{margin-top:44px}
/* small Viluz drawing */
.sketch{text-align:center;padding:90px 24px 10px}
.sketch img{width:min(340px,78vw);margin:0 auto 18px;opacity:.9}
.sketch .caps{color:var(--olive)}
.viluz-sketch{width:min(360px,80vw);margin:10px auto 34px;opacity:.9}
@media (max-width:600px){
  body{font-size:17px}
  .hero{min-height:auto;padding:120px 16px 110px}
  .hero-names{width:72%;max-width:290px;margin-bottom:44px}
  .hero .when{font-size:18px}
  .ed-row .big{font-size:40px}
  .editorial .hand{font-size:32px;text-align:center}
  .hand{font-size:30px}
  .card p{font-size:28px}
  .sketch{padding-top:64px}
}
.sketch + .cards{padding-top:60px}
/* pass 3: all text dark brown, real sketch, RSVP band */
.hand,.card p,.tbc,.page-title .caps,.sketch .caps,.caps,.small,nav a,.btn,legend,.form label{color:var(--choc)}
.sketch img{width:min(620px,94vw);opacity:1}
.viluz-sketch{width:min(560px,92vw)}
.cards{padding-bottom:40px}
.rsvp-band{background:var(--cream);text-align:center;padding:84px 24px 90px;margin-top:60px;color:var(--choc)}
.rsvp-band h2{font-family:var(--display);font-size:clamp(44px,6vw,68px);letter-spacing:.08em;margin:10px 0 8px;color:var(--choc)}
.rsvp-band p{margin:0 0 30px;font-size:19px}
.rsvp-band .btn{border-color:var(--choc)}
.rsvp-band + footer{border-top:1px solid rgba(74,51,38,.18)}
/* pass 4: hero = names, line, date, Viluz sketch melting into the paper */
.hero{min-height:0;padding:110px 24px 0;justify-content:flex-start}
.hero-names{margin-bottom:40px}
.hero-line{font-style:italic;font-size:21px;line-height:1.6;max-width:460px;margin:0 auto 34px;color:var(--choc)}
.hero-date{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.34em;font-size:12px;color:var(--choc)}
.hero-date span{font-family:var(--display);font-size:22px;letter-spacing:.04em}
.hero-date i{display:block;width:5px;height:5px;border-radius:50%;background:var(--choc);opacity:.55}
.hero-date em{font-style:normal;margin-left:10px;padding-left:22px;border-left:1px solid rgba(74,51,38,.35)}
.hero-sketch{width:min(900px,108%);max-width:none;margin:10px auto 0;opacity:.85;
  -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 58%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 60% at 50% 58%,#000 45%,transparent 100%)}
.hero + .cards{padding-top:20px}
@media (max-width:600px){
  .hero{padding:96px 16px 0}
  .hero-line{font-size:19px;max-width:320px}
  .hero-date{gap:10px;font-size:10.5px;letter-spacing:.28em;flex-wrap:wrap}
  .hero-date span{font-size:20px}
  .hero-date em{flex-basis:100%;margin:8px 0 0;padding:0;border:0;text-align:center}
  .hero-sketch{width:135%;margin-top:0}
  .hero + .cards{padding-top:0}
}
.hero{overflow:hidden}
@media (max-width:600px){
  .hero-sketch{width:125%;margin-top:6px;-webkit-mask-image:radial-gradient(ellipse 52% 70% at 50% 55%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 52% 70% at 50% 55%,#000 50%,transparent 100%)}
}
@media (max-width:600px){.hero + .cards{padding-top:36px}}
/* pass 5: more air under the names; date + place set like the save the date (Baskerville caps), subtle */
.hero-names{margin-bottom:76px}
.hero-line{margin-bottom:46px}
.std-place,.std-date{font-family:"Libre Baskerville",Baskerville,Georgia,serif;text-transform:uppercase;color:var(--choc);font-weight:400}
.std-place{font-size:13px;letter-spacing:.2em;margin-bottom:6px;opacity:.85}
.std-date{font-size:11px;letter-spacing:.22em;opacity:.75}
@media (max-width:600px){
  .hero-names{margin-bottom:64px}
  .std-place{font-size:12px}
  .std-date{font-size:10px;letter-spacing:.18em}
}
/* stays list */
.stays-wrap{padding-top:10px}
.stays-wrap h2{font-size:30px;margin-bottom:10px}
.stays{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px;margin:40px auto 0}
.stay{background:var(--cream);padding:34px 30px 30px;text-align:left}
.stay h3{font-family:var(--display);font-weight:400;font-size:26px;margin:8px 0 6px;color:var(--choc)}
.stay p{margin:0 0 14px;font-size:17px;line-height:1.6}
.stay .link{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:10px}
.small-note{font-size:14px;font-style:italic;margin-top:26px}
@media (max-width:700px){.stays{grid-template-columns:1fr}.stay{padding:28px 22px 24px}}
/* pass 6: consistent centred alignment for all text blocks */
.narrow,.narrow p,.narrow h2,.lead{text-align:center}
.narrow h2{margin-left:auto;margin-right:auto}
.days .day,.stay,.card{text-align:center}
/* pass 7: only two typefaces — Cormorant Garamond + Libre Baskerville */
:root{--serif:"Cormorant Garamond",Garamond,Georgia,serif;--bask:"Libre Baskerville",Baskerville,Georgia,serif;--display:var(--bask);--sans:var(--bask);--hand:var(--serif)}
body{font-family:var(--serif)}
.caps,nav a,.brand,.btn,.form label,legend,.small,.hero .std,.std-place,.std-date,.stay .link,.menu-btn{font-family:var(--bask);font-weight:400}
.caps,.small,nav a,.btn,.form label,legend{font-size:10.5px;letter-spacing:.22em}
.brand{font-size:12px;letter-spacing:.3em}
.brand i{font-family:var(--bask)}
h1,.page-title h1{font-family:var(--bask);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(26px,3.6vw,38px)}
h2,.card h2,.day h2,.narrow h2,.stays-wrap h2,.stay h3,.rsvp-band h2,.faq summary{font-family:var(--serif);font-weight:500;letter-spacing:.01em}
.card h2{font-size:30px}.day h2{font-size:28px}.narrow h2{font-size:28px}.stay h3{font-size:26px}
.rsvp-band h2{font-family:var(--bask);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(30px,4vw,44px);font-weight:400}
.day .num{font-family:var(--serif);font-weight:400}
.hand,.card p,.tbc,.editorial .hand{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4}
.faq summary{font-size:22px}
@media (max-width:600px){.hand,.card p,.tbc{font-size:20px}}
/* organic home cards: soft, slightly irregular paper shapes instead of notched corners */
.cards .card.notch{-webkit-mask:none;mask:none;border-radius:20px 34px 24px 38px / 28px 20px 36px 24px;box-shadow:0 1px 0 rgba(74,51,38,.04)}
.cards .card.notch:nth-child(2){border-radius:36px 22px 40px 24px / 24px 34px 22px 32px}
.cards .card.notch:nth-child(3){border-radius:26px 38px 22px 34px / 34px 24px 30px 22px}
.cards .card.notch{padding:52px 26px 46px}
/* pass 8: photographic blind press, feathered into the paper */
.hero{padding-top:60px}
.hero-names{width:min(660px,100%);max-width:none;margin:0 auto 20px}
@media (max-width:600px){.hero{padding-top:56px}.hero-names{width:118%;margin:0 -9% 12px}}
/* pass 9: organic shapes everywhere + rounded buttons */
.notch{-webkit-mask:none!important;mask:none!important;border-radius:20px 34px 24px 38px / 28px 20px 36px 24px}
.notch:nth-child(3n+2){border-radius:36px 22px 40px 24px / 24px 34px 22px 32px}
.notch:nth-child(3n+3){border-radius:26px 38px 22px 34px / 34px 24px 30px 22px}
.btn{border-radius:999px;padding-left:40px;padding-right:40px}
.section:has(+ .stays-wrap){padding-bottom:0}
.stays-wrap{padding-top:56px}
.stays-wrap .narrow h2{margin-top:0}
/* pass 10: smaller names, more air between hero blocks */
.hero{padding-top:70px}
.hero-names{width:min(500px,100%);margin:0 auto 64px}
.hero-line{margin-bottom:64px}
.std-place{margin-bottom:10px}
.hero-date,.std-date{margin-bottom:0}
.hero-sketch{margin-top:56px}
@media (max-width:600px){.hero{padding-top:56px}.hero-names{width:96%;margin:0 auto 48px}.hero-line{margin-bottom:48px}.hero-sketch{margin-top:40px}}
/* optical centring: compensate trailing letter-spacing on centred caps */
.page-title h1,.rsvp-band h2{padding-left:.14em}
.page-title .caps,.std-place,.std-date,.card .caps,.day .caps,.stay .caps,.addr .caps,.rsvp-band .caps,footer .caps{padding-left:.22em}
.btn{text-indent:.22em}
.page-title .mono{display:block;margin-left:auto;margin-right:auto}
.rsvp-band p{margin:0 0 10px}.rsvp-band .rsvp-note{font-style:italic;margin:0 0 32px}
/* page header: monogram exactly midway between title and first text block */
.page-title{padding-bottom:0}
.page-title .mono{margin-top:52px;margin-bottom:0}
.page-title + .section{padding-top:52px}
.page-title + .section > .narrow:first-child > *:first-child,.page-title + .section > p:first-child{margin-top:0}
footer{background:linear-gradient(rgba(227,220,203,.92),rgba(227,220,203,.92)),url("img/paper.jpg") repeat;background-size:auto,600px auto;border-top:1px solid var(--line)}