/* Sarah & Ayden — site styles (Style A: Wildflower Wreath) */
:root {
  --page: #F3ECE6;
  --paper: #FFFDFA;
  --ink: #3A372E;
  --ink-soft: #5C574A;
  --accent: #8A5532;    /* caramel: 6.0:1 on paper, 5.2:1 on page */
  --accent-soft: #E8C7A2;
  --olive: #5F6B3A;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Pinyon Script", cursive; /* decorative only, never for critical info */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem; /* Cormorant runs small; 20px reads like ~17px */
  line-height: 1.5;
  font-variant-numeric: lining-nums; /* old-style "10" reads like "io" */
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { max-width: 34rem; margin: 0 auto; padding: 16px 16px 0; }

/* ---------- hero card ---------- */
.card {
  position: relative;
  aspect-ratio: 600 / 1080;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgb(58 55 46 / .06), 0 12px 40px -12px rgb(58 55 46 / .18);
  overflow: hidden;
}
.card picture, .card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-text {
  position: absolute;
  inset: 15% 21% 17%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.monogram { margin: 0 0 1.2em; font-size: 1rem; font-weight: 500; letter-spacing: .3em; color: var(--accent); }
.eyebrow { margin: 0; font-style: italic; color: var(--ink-soft); line-height: 1.3; }
h1 { margin: .35em 0 .3em; font-weight: 400; line-height: 1; }
.name { display: block; font-size: clamp(2.1rem, 9.5vw, 3.6rem); letter-spacing: .08em; text-transform: uppercase; }
.amp { display: block; font-family: var(--script); font-size: clamp(1.9rem, 8vw, 2.6rem); color: var(--accent); line-height: 1.15; }
.date { margin: .6em 0 .5em; font-weight: 600; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.date span { display: block; }
.place { margin: 0; line-height: 1.35; font-size: 1.125rem; }
.place span { display: block; font-style: italic; color: var(--ink-soft); }

/* ---------- below the card ---------- */
.welcome { text-align: center; padding: 2.5rem .5rem 1rem; }
.welcome p { margin: 0 auto; max-width: 26rem; }
.divider { display: block; margin: 0 auto 1.25rem; width: 180px; height: auto; }
.countdown { margin: 2rem 0 1.75rem; }
.countdown[hidden] { display: none; }
.countdown-num { display: block; font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.countdown-label { display: block; margin-top: .35rem; letter-spacing: .2em; text-transform: uppercase; font-size: 1rem; font-weight: 600; }
.note { font-style: italic; color: var(--ink-soft); }

footer { text-align: center; padding: 2rem 16px 2.5rem; color: var(--ink-soft); font-size: 1rem; letter-spacing: .12em; }
footer .amp-s { font-family: var(--script); font-size: 1.6rem; color: var(--accent); letter-spacing: 0; vertical-align: -.1em; margin: 0 .15em; }

@media (min-width: 560px) {
  main { padding-top: 48px; }
  .card { aspect-ratio: 600 / 900; }
  .card-text { inset: 15% 22% 13%; }
}
@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .9s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}