*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:       #c8a96a;
  --gold-light: #e0c990;
  --white:      #fdfaf6;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  overflow: hidden;
}

/* ── Hero ── */
#hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('castello-2400.jpg') center 40% / cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 10, 5, .45) 0%,
    rgba(25, 16, 8, .38) 50%,
    rgba(10,  6, 2, .65) 100%
  );
}

/* ── Content ── */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: 1.5rem;
  max-width: 820px;
  width: 100%;
}

.family {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  letter-spacing: .12em;
  color: rgba(255,255,255,.75);
  margin-bottom: .4rem;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.6rem;
}

.names {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.amp {
  font-style: italic;
  color: var(--gold-light);
  margin: 0 .2em;
}

/* ── Divider ── */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.6rem auto;
}
.divider span {
  display: block;
  width: 55px;
  height: 1px;
  background: rgba(200,169,106,.45);
}
.divider svg {
  color: var(--gold);
  opacity: .75;
  flex-shrink: 0;
}

/* ── Date & Location ── */
.wedding-date {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: .04em;
}

.location {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: .45rem;
}

/* ── Countdown ── */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  margin: 2.4rem auto 0;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
}

.num {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
  letter-spacing: -.02em;
}

.lbl {
  font-family: var(--font-sans);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: .35rem;
  opacity: .8;
}

.sep {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--gold);
  opacity: .4;
  padding-top: .06em;
  line-height: 1;
  user-select: none;
}

/* ── Tagline ── */
.tagline {
  font-family: var(--font-serif);
  font-size: clamp(.85rem, 1.8vw, 1.05rem);
  font-weight: 300;
  color: rgba(240, 225, 200, .88);
  margin-top: 2.2rem;
  letter-spacing: .06em;
  display: inline-block;
  background: linear-gradient(
    135deg,
    rgba(155, 128, 90, .32) 0%,
    rgba(120, 98, 65, .28) 50%,
    rgba(155, 128, 90, .32) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(200, 169, 106, .28);
  border-top-color: rgba(220, 190, 130, .45);
  border-bottom-color: rgba(180, 145, 85, .2);
  box-shadow:
    inset 0 1px 0 rgba(220,190,130,.12),
    inset 0 -1px 0 rgba(80,55,25,.15),
    0 2px 12px rgba(0,0,0,.25);
  padding: .55rem 1.6rem;
  border-radius: 1px;
}
.tagline em {
  font-style: italic;
  color: rgba(210, 175, 110, .95);
}

/* ── Footer ── */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: .75rem 1.5rem;
  text-align: center;
  background: linear-gradient(to top, rgba(10,6,2,.55) 0%, transparent 100%);
}
.footer p {
  font-family: var(--font-sans);
  font-size: .65rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.3);
}
.footer a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
}
.footer a:hover { color: var(--gold); }

/* ── Responsive ── */
@media (max-width: 480px) {
  .countdown { gap: .35rem; }
  .unit { min-width: 50px; }
  .divider span { width: 36px; }
}