/* ==========================================================
   JEREMY & MICOL WEDDING — EDITABLE DESIGN SYSTEM
   Main colors / typography are defined here.
   ========================================================== */
:root {
  --ivory: #f5f1e8;
  --paper: #fbf9f3;
  --ink: #34372d;
  --olive: #626953;
  --sage: #8a9278;
  --line: #d9d4c7;
  --gold: #a79a73;
  --white: #fffdf8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.7; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; }
h1 { font-size: clamp(3rem, 7vw, 6rem); margin: .15em 0; }
h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
h3 { font-size: 1.8rem; }
p { margin: .5rem 0 1.25rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; }
.lead { font-size: 1.15rem; max-width: 650px; margin-left: auto; margin-right: auto; }
.muted,.small-note { opacity: .65; font-size: .88rem; }
.center { text-align: center; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 78px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; background: rgba(251,249,243,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(217,212,199,.65);
}
.monogram,.footer-monogram { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .18em; text-decoration: none; }
.monogram span,.footer-monogram span { color: var(--gold); }
.nav { display: flex; align-items: center; gap: 1.15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--olive); }
.nav-rsvp { border: 1px solid var(--olive); padding: .55rem .85rem; }
.menu-toggle { display: none; border: 0; background: none; font-size: 1.4rem; }

.hero {
  min-height: calc(100vh - 78px); position: relative; display: grid; place-items: center;
  background: url('villa.jpg') center center / cover no-repeat; text-align: center;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(245,241,232,.18),rgba(245,241,232,.58)); }
.hero-content { position: relative; max-width: 850px; padding: 7rem 2rem; }
.hero-content h1 { text-shadow: 0 1px 12px rgba(255,255,255,.45); }
.hero-date { text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; }
.hero-welcome { font-family: var(--serif); font-size: 1.35rem; }
.ornament { color: var(--gold); font-size: 2rem; margin: 1rem; }

.button {
  display: inline-block; padding: .85rem 1.6rem; background: var(--olive); color: var(--white);
  border: 1px solid var(--olive); text-decoration: none; text-transform: uppercase;
  letter-spacing: .15em; font-size: .72rem; cursor: pointer;
}
.button:hover { opacity: .88; }
.button-light { background: rgba(255,255,255,.35); color: var(--ink); border-color: var(--ink); }
.button.outline { background: transparent; color: var(--ink); }
.small-button { padding: .5rem .8rem; }

.section { padding: 7rem 6vw; }
.narrow { max-width: 900px; margin: auto; }
.intro { text-align: center; }
.home-cards { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 4rem; border-top: 1px solid var(--line); }
.home-cards a { text-decoration: none; padding: 2rem 1rem; border-bottom: 1px solid var(--line); }
.home-cards a:hover { background: var(--ivory); }
.home-cards span { display:block; color:var(--gold); font-size:.75rem; letter-spacing:.15em; }
.home-cards strong { display:block; font-family:var(--serif); font-size:1.8rem; font-weight:500; margin:.7rem 0; }
.home-cards em { font-size:.8rem; opacity:.65; font-style:normal; }

.page-hero.small {
  min-height: 38vh; display:grid; place-items:center; text-align:center;
  background: linear-gradient(rgba(245,241,232,.55),rgba(245,241,232,.82)), url('villa.jpg') center 52% / cover;
  border-bottom:1px solid var(--line);
}
.page-hero.small h1 { margin:.1em 0; }
.schedule { margin: 4rem 0; border-top:1px solid var(--line); }
.schedule div { display:grid; grid-template-columns: 1fr 1fr; padding:1.4rem; border-bottom:1px solid var(--line); }
.schedule b { font-family:var(--serif); font-size:1.4rem; font-weight:500; }
.schedule span { text-align:left; }
.dress-box { border:1px solid var(--line); padding:2.5rem; margin-top:3rem; }

.split-section { display:grid; grid-template-columns:1fr 1fr; min-height:550px; }
.image-panel { background-position:center; background-size:cover; }
.villa-image { background-image:url('villa.jpg'); }
.text-panel { display:flex; flex-direction:column; justify-content:center; padding:6vw; background:var(--ivory); }
.text-link { margin-top:1rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }

.timeline,.story-timeline { position:relative; border-left:1px solid var(--line); }
.timeline article,.story-timeline article { padding:0 0 4rem 3rem; position:relative; }
.timeline article:before,.story-timeline article:before { content:""; width:11px;height:11px;border-radius:50%;background:var(--sage);position:absolute;left:-6px;top:6px; }
.timeline article > span,.story-timeline article > span { text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--olive); }
.timeline article h2,.story-timeline article h2 { margin:.4rem 0; }
.timeline .featured { background:var(--ivory); padding:2rem 2rem 2rem 3rem; }

.travel-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin:4rem 0; }
.travel-grid > div { background:var(--paper); padding:2rem; }
.travel-grid span { color:var(--gold); font-size:.75rem; }

.faq details { border-top:1px solid var(--line); padding:1.3rem 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-family:var(--serif); font-size:1.5rem; }

.registry-buttons { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin:3rem 0; }

.form { max-width:720px; margin:2rem auto; }
.form label,.form legend { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin:1.2rem 0; }
.form input,.form textarea,.form select {
  display:block; width:100%; margin-top:.5rem; padding:.85rem; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font:inherit;
}
.form fieldset { border:0; padding:0; margin:1.5rem 0; }
.form .radio { text-transform:none; letter-spacing:0; display:inline-flex; align-items:center; margin-right:1.5rem; }
.form .radio input { width:auto; margin:0 .5rem 0 0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.success-box,.error-box { padding:2rem; border:1px solid var(--line); margin:2rem 0; }
.success-box { background:var(--ivory); }
.error-box { border-color:#b98d84; background:#fbefeb; }
.upload-form { max-width:600px; }
.footer { text-align:center; padding:5rem 2rem; border-top:1px solid var(--line); background:var(--ivory); }
.footer p { font-size:.75rem; opacity:.65; }
.footer a { font-size:.75rem; }
.floral-line { color:var(--gold); font-size:1.8rem; margin-bottom:1rem; }

.admin-body { background:var(--paper); }
.admin-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 4vw; background:var(--ink); color:white; }
.admin-header a { margin-left:1rem; text-decoration:none; }
.admin-main { max-width:1400px; margin:auto; padding:3rem 4vw; }
.admin-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin:2rem 0 4rem; }
.admin-stats div { padding:1.5rem; background:var(--ivory); border:1px solid var(--line); }
.admin-stats span { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.admin-stats b { font:2.4rem var(--serif); }
.admin-section { margin:3rem 0; }
.table-wrap { overflow:auto; margin-top:1rem; }
table { border-collapse:collapse; width:100%; font-size:.82rem; background:white; }
th,td { border:1px solid var(--line); padding:.7rem; text-align:left; vertical-align:top; }
th { background:var(--ivory); }
.admin-login { min-height:100vh; display:grid; place-items:center; }
.login-card { width:min(420px,90vw); background:white; padding:3rem; border:1px solid var(--line); text-align:center; }

@media(max-width:900px){
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; left:0; right:0; top:78px; background:var(--paper); flex-direction:column; align-items:stretch; padding:1rem 5vw; border-bottom:1px solid var(--line); }
  body.nav-open .nav { display:flex; }
  .nav a { padding:.7rem 0; }
  .home-cards { grid-template-columns:1fr 1fr; }
  .split-section { grid-template-columns:1fr; }
  .image-panel { min-height:380px; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .section { padding:5rem 7vw; }
  .hero-content { padding:5rem 1.25rem; }
  .hero-content h1 { font-size:3.5rem; }
  .home-cards,.travel-grid,.two-col { grid-template-columns:1fr; }
  .schedule div { grid-template-columns:1fr; gap:.3rem; }
  .schedule span { text-align:left; }
  .admin-stats { grid-template-columns:1fr 1fr; }
}