:root{
  --green: rgba(90, 109, 78, 0.25);
  --accent:#6b6b6b;
  --bg:rgb(225, 227, 217);
  --card:#ffffff;
  --muted:#6b6b6b;
  --radius:14px;
  --max-width:1000px;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  columns: var(--accent);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Playfair Display', serif;
  background: linear-gradient(90deg,var(--bg),#fff,var(--bg));
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  background: var(--green);
  background: linear-gradient(360deg,var(--bg),#fff);

  padding:28px 16px;
}
.header-inner{max-width:var(--max-width); margin:0 auto; text-align:center}
.site-title{margin:0; font-size:2.0rem; color:var(--accent)}
.site-sub{margin:6px 0 0; color:var(--muted)}

.container{max-width:var(--max-width); margin:28px auto; padding:0 16px}

.hero{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-evenly;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.hero h2{margin:0; color:var(--accent); font-size:1.6rem}
.hero-date{margin:8px 0 14px; font-weight:600}
.hero-text{color:var(--muted)}

.couple-photo{
  width:320px;
  height:300px;
  object-fit:cover;
  border-radius:10%;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  border:6px solid #fff;
}

.countdown{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0 16px;
  background:linear-gradient(180deg,#fff,#fff9);
  padding:8px;
  border-radius:12px;
  width:fit-content;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.timecol{min-width:72px; text-align:center; padding:6px 8px}
.timecol span{display:block}
.timecol #days,
.timecol #hours,
.timecol #minutes,
.timecol #seconds{
  font-size:1.25rem;
  font-weight:700;
  color:#222;
}
.label{font-size:0.75rem; color:var(--muted)}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
  box-shadow:0 6px 20px rgba(15,15,15,0.03);

  .horizontal-rule { 
    border-color: floralwhite;
  }
}

.list{list-style:none; padding:0; margin:10px 0 0}
.list li{padding:12px 0; border-bottom:1px dashed rgba(0,0,0,0.04)}
.list h4{margin:0 0 6px 0}
.link{display:inline-block; padding:4px 8px; color:var(--muted); background-color: var(--bg); border-radius:2px; text-decoration: none;
}

.btn{
  display:inline-block;
  margin-top:12px;
  padding:10px 16px;
  background:var(--accent);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 6px 18px rgba(183,110,121,0.12);
}

.site-footer{padding:18px 0; text-align:center; color:var(--muted); font-size:0.9rem}

@media (max-width:720px){
  .hero-right{order:-1; margin-bottom:14px}
  .countdown{flex-wrap:wrap; justify-content:center}
}