/* ===== Base ===== */
:root{
  --bg: #fffefb;
  --text: #2b2b2b;
  --muted: #6b6b6b;
  --primary: #a15c5c;       /* dusty rose */
  --primary-ink: #fff7f7;
  --accent: #2f4f4f;        /* deep green */
  --card: #ffffff;
  --line: #ece7e4;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3, h4{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: #1d1d1d;
  line-height: 1.25;
  margin: 0 0 .6rem;
}
p{ margin: 0 0 1rem; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ display: block; max-width: 100%; height: auto; border-radius: 10px; }

/* ===== Header & Hero ===== */
.site-header{
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 10;
}
.brand{ display: flex; align-items: center; gap: 1rem; max-width: 1200px; margin: 0 auto; }
.monogram{
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: "Playfair Display", serif;
  font-weight: 700; letter-spacing: .5px;
}
.brand-text .couple{ font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: 0; }
.brand-text .date{ margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }

.hero{
  --hero-img: url('https://eu-assets.simpleview-europe.com/visitrichmond/imageresizer/?image=%2Fdmsimgs%2FMVON7534_1_1_1__1539581990.jpg&action=ProductDetailImage');
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.15)),
    var(--hero-img) center/cover no-repeat;
  min-height: 42vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 3.5rem 1rem;
}
.hero-title{
  font-size: clamp(1.8rem, 5vw, 3rem);
}
.hero-subtitle{
  color: #3b3b3b;
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
}

/* ===== Buttons ===== */
.button{
  display: inline-block;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 600;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.button:hover{ transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.button.primary{ background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.button.ghost{ background: transparent; }

/* ===== Tabs ===== */
.tabs{
  max-width: 1100px; margin: 2rem auto; padding: 0 1rem 2rem;
}
.tabs input[type="radio"]{ position: absolute; left: -9999px; }

/* Tab nav */
.tab-nav{
  display: grid; grid-auto-flow: column; gap: .35rem;
  overflow-x: auto; padding: .5rem; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.tab-nav label{
  white-space: nowrap;
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  font-weight: 600; color: #3a3a3a;
  border: 1px solid transparent;
}
.tab-nav label:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Active tab state via sibling selectors */
#tab-home:checked     ~ .tab-nav label[for="tab-home"],
#tab-story:checked    ~ .tab-nav label[for="tab-story"],
#tab-schedule:checked ~ .tab-nav label[for="tab-schedule"],
#tab-venue:checked    ~ .tab-nav label[for="tab-venue"],
#tab-rsvp:checked     ~ .tab-nav label[for="tab-rsvp"],
#tab-gallery:checked  ~ .tab-nav label[for="tab-gallery"],
#tab-registry:checked ~ .tab-nav label[for="tab-registry"]{
  background: var(--primary);
  color: var(--primary-ink);
}

/* Panels */
.tabs-content{ margin-top: 1.25rem; }
.tab-panel{ display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 2rem); box-shadow: var(--shadow); }

#tab-home:checked     ~ .tabs-content #home,
#tab-story:checked    ~ .tabs-content #story,
#tab-schedule:checked ~ .tabs-content #schedule,
#tab-venue:checked    ~ .tabs-content #venue,
#tab-rsvp:checked     ~ .tabs-content #rsvp,
#tab-gallery:checked  ~ .tabs-content #gallery,
#tab-registry:checked ~ .tabs-content #registry{
  display: block;
}

/* ===== Layout helpers ===== */
.grid.two{
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 850px){
  .grid.two{ grid-template-columns: 1fr; }
}

.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.lead-card .highlights{
  list-style: none; padding: 0; margin: 1rem 0 1.25rem;
}
.lead-card .highlights li{ padding: .35rem 0; border-bottom: 1px dashed #eae4e1; }
.lead-card .highlights li:last-child{ border-bottom: 0; }

.timeline{
  display: grid; gap: .75rem;
  border-left: 3px solid #e9dfdc; padding-left: 1rem;
}
.time-item{ display: grid; grid-template-columns: 110px 1fr; gap: .75rem; align-items: start; }
.time{ font-weight: 700; color: var(--primary); }
.desc{ color: #3a3a3a; }

.map .muted{ margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.muted{ color: var(--muted); }
.small{ font-size: .95rem; }

.rsvp-card{ display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.gallery-grid{
  display: grid; gap: .6rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

.registry-list ul{ margin: 0; padding-left: 1rem; }

/* ===== Footer ===== */
.site-footer{
  max-width: 1100px; margin: 2rem auto 4rem; padding: 0 1rem; text-align: center; color: var(--muted);
}

/* ===== Print (handy for day-of) ===== */
@media print{
  .site-header, .hero, .tab-nav { display: none !important; }
  .tab-panel{ display: block !important; box-shadow: none; border: 0; padding: 0; }
  body { color: #000; }
}