:root{
--bg:#fff9f7; /* soft blush */
--paper:#ffffff; /* card */
--ink:#2b2b2b; /* text */
--muted:#6b6b6b; /* muted text */
--brand:#b66a6a; /* accent */
--brand-2:#d7b7a8; /* accent 2 */
--ring: rgba(182,106,106,.35);
--shadow: 0 10px 30px rgba(0,0,0,.08);
--radius: 16px;
--maxw: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; color:var(--ink); background:var(--bg)}
a{color:var(--brand); text-decoration:none}
img{max-width:100%; height:auto; display:block}


/* Header / Nav */
header{
position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
background:rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px 20px}
.brand{font-weight:700; letter-spacing:.5px}
.spacer{flex:1}
.menu{display:flex; gap:12px; align-items:center}
.menu a{padding:8px 12px; border-radius:999px}
.menu a.active{background:var(--brand); color:white}
.hamburger{display:none; border:1px solid rgba(0,0,0,.1); border-radius:10px; padding:8px 10px; background:white}


/* Mobile nav */
.drawer{ display: none; }   /* add this line outside any media query */

@media (max-width: 768px){
  .menu{ display: none; }
  .hamburger{ display: inline-flex; }
  .drawer{ 
    position: fixed; inset: 60px 12px auto 12px;
    background: var(--paper); border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--shadow); border-radius: var(--radius); padding: 8px;
  }
  .drawer a{ display:block; padding:12px; border-radius:10px }
  .drawer a.active{ background: var(--brand); color: white }
  .drawer.open{ display:block }
}


/* Hero */
.hero{display:grid; place-items:center; text-align:center; padding:72px 16px; background:linear-gradient(180deg, #fff, #fff5f2)}
.hero .inner{max-width:800px}
.names{font-size:clamp(40px, 6vw, 72px); font-weight:800; letter-spacing:.5px; line-height:1.05; margin:0}
.date{font-size:clamp(18px, 2.4vw, 22px); color:var(--muted); margin:.5rem 0 0}
.cta{margin-top:18px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:10px 16px; border:1px solid rgba(0,0,0,.1); background:white; box-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn.primary{background:var(--brand); color:white; border-color:transparent}
.btn:focus-visible{outline:3px solid var(--ring)}


/* Sections */
section{padding:56px 16px}
.container{max-width:var(--maxw); margin:0 auto}
.card{background:var(--paper); border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow); border-radius:var(--radius); padding:22px}
h2{margin:0 0 14px; font-size:clamp(26px,3.4vw,34px)}
.grid{display:grid; gap:16px}
@media (min-width: 800px){ .grid.two{grid-template-columns:1fr 1fr} }


.muted{color:var(--muted)}


/* Footer */
footer{padding:40px 16px; text-align:center; color:var(--muted)}


/* Utility */
.hide{display:none}
.center{text-align:center}



/* Countdown specific styles */
.brand{font-weight:800}

main{min-height:calc(100vh - 60px); display:grid; place-items:center; padding:24px}
.card{background:var(--paper); border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow); border-radius:var(--radius); padding:24px; max-width:960px; width:100%; text-align:center}

h1{font-size:clamp(36px,6vw,60px); margin:0}
.date{color:var(--muted); margin:.25rem 0 1rem}

.timer{display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.unit{min-width:110px; padding:16px 14px; border-radius:14px; border:1px solid rgba(0,0,0,.06); background:#fff}
.num{font-size:clamp(36px,5.5vw,52px); font-weight:800; line-height:1}
.label{color:var(--muted); font-size:14px}

.cta{margin-top:18px}
.btn{display:inline-block; padding:10px 16px; border-radius:999px; background:var(--brand); color:white; text-decoration:none}
/* End of countdown specific styles */