/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:      #fbf6ec;
  --ivory:      #fffaf1;
  --sand:       #e6d6b8;
  --royal-blue: #173f8a;
  --deep-blue:  #102f69;
  --yellow:     #d6a62f;
  --accent-gold: #c98f12;
  --warm-white: #fff4d8;
  --dark:       #18233a;
  --mid:        #6f654f;
  --white:      #ffffff;
  --stage:      #0c1a38;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Lato', system-ui, sans-serif;
}

html, body { min-height: 100%; }

body {
  background: var(--stage);
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

/* ── Hero ────────────────────────────────────────────────────────────
   The poster fills the whole screen (no letterbox). Everything inside is
   sized relative to the poster (container units + em) and positioned as a
   % of it, so the countdown and card stay locked to the same spot on the
   image and never drift relative to each other — on any device or zoom. */
#hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
}

.poster {
  container-type: size;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100svh;
  height: 100dvh;
}

/* Overlay layer fills the poster. Its font-size (in cqmin = % of the
   poster's smaller side) is the single driver for everything inside; all
   children use em, so they stay proportional and locked to the image. */
.overlays {
  position: absolute;
  inset: 0;
  font-size: 1.7cqmin;
}
@media (max-width: 700px) {
  .overlays { font-size: 4.4cqmin; }
}

/* Full-bleed photo inside the poster */
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo picture,
.hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: center 42%; }
@media (max-width: 700px) {
  .hero-photo img { object-position: 58% 46%; }
}

/* Legibility scrim */
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12,26,56,.30) 0%,
    rgba(12,26,56,.05) 28%,
    rgba(12,26,56,.10) 60%,
    rgba(12,26,56,.48) 100%
  );
}

/* ── Countdown (pinned near the top of the poster) ── */
.countdown {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  display: flex;
  justify-content: center;
  gap: 1em;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4em;
}

.countdown-number {
  font-family: var(--font-serif);
  font-size: 2.05em;
  font-weight: 300;
  line-height: 1;
  color: var(--warm-white);
  text-shadow: 0 1px 4px rgba(12,26,56,.6), 0 0 12px rgba(12,26,56,.35);
}

.countdown-label {
  font-size: .55em;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warm-white);
  margin-top: .5em;
  text-shadow: 0 1px 4px rgba(12,26,56,.6), 0 0 12px rgba(12,26,56,.35);
}

/* ── Name card (pinned near the bottom of the poster) ── */
.hero-card {
  position: absolute;
  bottom: 4.5%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  padding: 1.1em 1.7em 1.2em;
  background: rgba(235,214,170,.68);
  border-radius: 1em;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 .4em 1.4em rgba(12,26,56,.28);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .92em;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--deep-blue);
}

h1 {
  font-family: var(--font-serif);
  /* em on wide posters, but never wider than the narrow card can hold */
  font-size: min(2.6em, 6.6cqi);
  font-weight: 300;
  line-height: 1;
  color: #0f347c;
  letter-spacing: -.015em;
}

.names { white-space: nowrap; font-style: italic; font-weight: 300; }

.wedding-rings {
  display: inline-block;
  width: .86em;
  height: auto;
  margin: 0 .04em;
  vertical-align: -.09em;
}

.date-line {
  font-family: var(--font-serif);
  font-size: 1.68em;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--deep-blue);
}

.location-line {
  font-size: .84em;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--royal-blue);
}

.rsvp-suivre {
  font-family: var(--font-serif);
  font-size: 1.5em;
  font-style: italic;
  font-weight: 400;
  color: var(--deep-blue);
  letter-spacing: .02em;
  margin-top: .1em;
}