/* ============================================================
     CRIMSON & GOLD — animated wedding invitation template
     A fixed, single-mood design (oxblood red + aged gold foil,
     vintage wax-seal stationery), like a letterpress card — it
     does not switch with light/dark system settings.

     TO PERSONALIZE FURTHER: a couple of optional fields are still
     bracketed placeholders — [RSVP Date] and #[YourWeddingHashtag].
     The countdown is driven by the WEDDING_DATE constant near the
     top of the <script> block.
     ============================================================ */

  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600&family=Pinyon+Script&family=EB+Garamond:ital@0;1&display=swap');

  :root{
    color-scheme: dark;
    --ink:        #240a0d;
    --ink-soft:   #341014;
    --ink-softer: #44161b;
    --gold:       #b3874c;
    --gold-bright:#e7c789;
    --crimson:    #8c1f2e;
    --crimson-deep:#5c141f;
    --ivory:      #f1e4c8;
    --ivory-dim:  rgba(241,228,200,0.68);
    --line:       rgba(179,135,76,0.42);
    --shadow:     rgba(10,2,3,0.55);

    --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --script:  'Pinyon Script', 'Brush Script MT', cursive;
    --deco:    'Cinzel', 'Cormorant Garamond', Georgia, serif;
    --body:    'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; }

  body{
    margin: 0;
    background: var(--ink);
    color: var(--ivory);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  body.lock-scroll{ overflow: hidden; height: 100vh; }

  h1,h2,h3{
    font-family: var(--display);
    font-weight: 500;
    text-wrap: balance;
    margin: 0;
  }

  p{ margin: 0; }

  ::selection{ background: var(--gold); color: var(--ink); }

  a{ color: inherit; }

  /* ---------- background petals canvas ---------- */
  #petalCanvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  /* ---------- vintage paper grain, sits above color, below content ---------- */
  #grain{
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* faint damask-style lattice, purely tonal, very low opacity */
  body::before{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(45deg, rgba(179,135,76,0.035) 0 2px, transparent 2px 64px),
      repeating-linear-gradient(-45deg, rgba(179,135,76,0.035) 0 2px, transparent 2px 64px);
  }

  /* ---------- shared botanical divider ---------- */
  .sprig{
    display: block;
    width: clamp(90px, 22vw, 160px);
    height: auto;
    color: var(--gold);
    opacity: 0.85;
    margin-inline: auto;
  }

  .kicker{
    font-family: var(--deco);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-align: center;
  }

  /* ============ ENVELOPE INTRO — the whole page is the envelope ============ */
  #envelopeScreen{
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--ink);
    overflow: hidden;
    transition: opacity 900ms ease, visibility 900ms ease;
  }

  #envelopeScreen.hide{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .envelope{
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100svh;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    perspective: 1600px;
  }

  .envelope:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: -10px; }

  .env-back{
    position: absolute;
    inset: 0;
    background: radial-gradient(140% 90% at 50% 0%, #4a161b 0%, #2c0d10 55%, var(--ink) 100%);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .env-card{
    position: absolute;
    left: 10%;
    right: 10%;
    top: 12%;
    height: 76%;
    background: linear-gradient(180deg, #f1e4c8, #e6d3a8);
    border-radius: 2px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    transform: translateY(0);
    transition: transform 1100ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
    z-index: 2;
  }

  .env-card::after{
    content: '';
    position: absolute;
    inset: 6% 8%;
    border: 1px solid rgba(140,31,46,0.3);
  }

  .env-front{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62%;
    background: linear-gradient(180deg, #3a1116, #290c0f);
    clip-path: polygon(0 100%, 100% 100%, 100% 18%, 50% 46%, 0 18%);
    border: 1px solid var(--line);
    border-top: none;
    z-index: 3;
  }

  .env-flap{
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 58%;
    background: linear-gradient(200deg, #4a171d, #290c0f);
    clip-path: polygon(0 0, 100% 0, 50% 78%);
    border: 1px solid var(--line);
    border-bottom: none;
    transform-origin: top center;
    transform: rotateX(0deg);
    transition: transform 850ms cubic-bezier(.3,.7,.2,1);
    z-index: 4;
    backface-visibility: hidden;
  }

  /* gold wax stamp, monogrammed K & L */
  .env-seal{
    position: absolute;
    left: 50%;
    top: 46%;
    width: clamp(64px, 11vw, 100px);
    height: clamp(64px, 11vw, 100px);
    transform: translate(-50%,-50%) scale(1);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, var(--gold-bright), var(--gold) 55%, #8a6a30 100%);
    outline: 1px solid var(--crimson);
    outline-offset: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.6vw, 5px);
    font-family: var(--deco);
    font-weight: 600;
    font-size: clamp(1.1rem, 2.6vw, 1.7rem);
    letter-spacing: 0.02em;
    color: var(--crimson-deep);
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.18);
    z-index: 5;
    transition: transform 500ms ease, opacity 500ms ease;
  }

  .env-seal .seal-amp{
    font-family: var(--script);
    font-weight: 400;
    font-size: 1.15em;
    color: var(--crimson);
  }

  /* curvy floral flourish, tone-on-tone darker red, bottom of the envelope */
  .env-bloom{
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 4vh, 34px);
    transform: translateX(-50%);
    width: clamp(210px, 46vw, 360px);
    height: auto;
    color: var(--crimson-deep);
    opacity: 0.55;
    z-index: 4;
    pointer-events: none;
  }

  .env-kicker{
    position: absolute;
    left: 0; right: 0;
    top: clamp(26px, 7vh, 64px);
    z-index: 6;
    margin: 0;
  }

  .tap-hint{
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ivory-dim);
  }

  .env-hint{
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(92px, 15vh, 150px);
    z-index: 6;
    margin: 0;
  }

  .tap-hint span{
    display: inline-block;
    margin-left: 6px;
    animation: pulse-arrow 1.8s ease-in-out infinite;
  }

  @keyframes pulse-arrow{
    0%,100%{ transform: translateY(0); opacity: .6; }
    50%{ transform: translateY(4px); opacity: 1; }
  }

  /* open sequence */
  .envelope.opening .env-flap{ transform: rotateX(180deg); }
  .envelope.opening .env-seal{ transform: translate(-50%,-50%) scale(0); opacity: 0; }
  .envelope.opening .env-card{ transform: translateY(-170%); }
  .envelope.opening .env-kicker,
  .envelope.opening .env-hint,
  .envelope.opening .env-bloom{ transition: opacity 400ms ease; opacity: 0; }

  /* ============ MAIN INVITATION ============ */
  main{
    position: relative;
    z-index: 2;
  }

  section{
    padding: clamp(64px, 12vw, 120px) 20px;
    max-width: 720px;
    margin-inline: auto;
  }

  .ornament-row{
    display: flex;
    justify-content: center;
    margin: 18px 0;
  }

  /* ---- hero ---- */
  .hero{
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 22px;
    padding-block: 48px;
  }

  .names{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    line-height: 1;
  }

  .names .name{
    font-size: clamp(2.8rem, 11vw, 6rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    background: linear-gradient(100deg,
      var(--gold) 0%, var(--gold-bright) 22%, var(--ivory) 42%,
      var(--gold-bright) 62%, var(--gold) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--gold-bright);
    animation: foil-shimmer 7s linear infinite;
  }

  @keyframes foil-shimmer{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 260% 50%; }
  }

  .names .amp{
    font-family: var(--script);
    color: var(--crimson);
    -webkit-text-stroke: 0.4px var(--gold);
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    margin-block: 4px;
  }

  .request{
    font-family: var(--script);
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    line-height: 1.5;
    color: var(--ivory-dim);
    max-width: 28ch;
  }

  .scroll-cue{
    margin-top: 26px;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ivory-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .scroll-cue .line{
    width: 1px;
    height: 30px;
    background: linear-gradient(var(--gold), transparent);
    animation: draw-line 2.2s ease-in-out infinite;
  }

  @keyframes draw-line{
    0%{ transform: scaleY(0); transform-origin: top; opacity: .3; }
    50%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
    51%{ transform-origin: bottom; }
    100%{ transform: scaleY(0); transform-origin: bottom; opacity: .3; }
  }

  /* ---- reveal-on-scroll (progressive enhancement only) ---- */
  .reveal{
    opacity: 1;
    transform: none;
  }
  body.js-ready .reveal.pre{
    opacity: 0;
    transform: translateY(28px);
  }
  .reveal.in{
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 900ms ease, transform 900ms ease;
  }

  /* ---- section heading ---- */
  .section-head{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 44px;
  }

  .section-head h2{
    font-size: clamp(1.9rem, 5vw, 2.6rem);
  }

  /* ---- countdown ---- */
  .date-line{
    text-align: center;
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    color: var(--ivory-dim);
    font-style: italic;
    margin-bottom: 34px;
  }

  .countdown{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 3vw, 22px);
    max-width: 460px;
    margin-inline: auto;
  }

  .cd-cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 4px;
    border: 1px solid var(--gold);
    outline: 1px solid var(--line);
    outline-offset: 3px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(179,135,76,0.08), transparent);
  }

  .cd-num{
    font-family: var(--display);
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
  }

  .cd-label{
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ivory-dim);
  }

  /* ---- details cards ---- */
  .cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  @media (max-width: 560px){
    .cards{ grid-template-columns: 1fr; }
  }

  .cards-single{
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }

  .card{
    border: 1px solid var(--gold);
    outline: 1px solid var(--line);
    outline-offset: 5px;
    border-radius: 1px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(179,135,76,0.06), transparent);
  }

  .card svg{
    width: 34px;
    height: 34px;
    color: var(--gold);
    margin-bottom: 4px;
  }

  .card h3{
    font-size: 1.3rem;
    letter-spacing: 0.03em;
  }

  .card .time{
    font-family: var(--script);
    font-size: 1.7rem;
    color: var(--gold-bright);
  }

  .card .place{
    color: var(--ivory-dim);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .map-link{
    margin-top: 10px;
    font-family: var(--deco);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-bright);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    transition: border-color 200ms ease, color 200ms ease;
  }

  .map-link:hover,
  .map-link:focus-visible{
    color: var(--ivory);
    border-color: var(--gold);
  }

  /* ---- story ---- */
  .story p{
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--ivory-dim);
    max-width: 58ch;
    margin-inline: auto;
  }

  .story p + p{ margin-top: 18px; }

  /* ---- rsvp ---- */
  .rsvp-note{
    text-align: center;
    color: var(--ivory-dim);
    font-style: italic;
    margin-bottom: 30px;
  }

  form#rsvpForm{
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 420px;
    margin-inline: auto;
  }

  .field{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field label{
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-bright);
  }

  .field input[type="text"],
  .field input[type="number"]{
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    color: var(--ivory);
    font-family: var(--body);
    font-size: 1.05rem;
    padding: 8px 2px;
    outline: none;
    transition: border-color 200ms ease;
  }

  .field input:focus{ border-color: var(--gold); }

  .radio-row{
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 0.98rem;
    color: var(--ivory-dim);
  }

  .radio-row label{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .radio-row input{ accent-color: var(--gold); }

  button[type="submit"]{
    margin-top: 6px;
    align-self: center;
    padding: 14px 40px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold-bright);
    font-family: var(--body);
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease;
  }

  button[type="submit"]:hover,
  button[type="submit"]:focus-visible{
    background: var(--gold);
    color: var(--ink);
  }

  .thank-you{
    text-align: center;
    margin-top: 24px;
    font-family: var(--script);
    font-size: 1.8rem;
    color: var(--gold-bright);
  }

  .thank-you[hidden]{ display: none; }

  /* ---- footer ---- */
  footer{
    padding: 60px 20px 70px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  footer .fname{
    font-family: var(--script);
    font-size: 2rem;
    color: var(--gold-bright);
  }

  footer .ftag{
    color: var(--ivory-dim);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .env-flap, .env-seal, .env-card, .scroll-cue .line, .tap-hint span, .names .name{ transition: none !important; animation: none !important; }
    .names .name{ background-position: 50% 50%; }
    .reveal.pre{ opacity: 1; transform: none; }
  }


/* ============================================================
   PREMIUM MOBILE REFINEMENT
   ============================================================ */

:root{
  --gold-soft: #d5b47a;
  --glass: rgba(36,10,13,.58);
  --glass-strong: rgba(36,10,13,.78);
  --radius: 18px;
}

body{
  min-width: 320px;
  background:
    radial-gradient(80% 45% at 50% -5%, rgba(140,31,46,.26), transparent 70%),
    var(--ink);
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 20%, transparent 0 38%, rgba(0,0,0,.18) 100%);
}

#grain{ z-index:4; }

main{ z-index:5; }

section{
  width:min(100%, 760px);
  padding-left:clamp(18px, 5vw, 34px);
  padding-right:clamp(18px, 5vw, 34px);
}

.hero{
  min-height:100svh;
  padding:clamp(72px, 12vh, 110px) 20px 48px;
  position:relative;
}

.hero::before{
  content:'';
  position:absolute;
  width:min(76vw,420px);
  aspect-ratio:1;
  border:1px solid rgba(231,199,137,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(231,199,137,.025),
    0 0 0 56px rgba(231,199,137,.018);
  pointer-events:none;
}

.hero > *{ position:relative; z-index:2; }

.hero .kicker{
  max-width:28ch;
  line-height:1.7;
  font-size:clamp(.68rem,2.8vw,.85rem);
}

.names{
  gap:0;
  margin-top:2px;
}

.names .name{
  font-size:clamp(3.7rem,18vw,7rem);
  line-height:.82;
  text-shadow:0 8px 34px rgba(0,0,0,.24);
}

.names .amp{
  font-size:clamp(2.5rem,10vw,3.8rem);
  line-height:1;
  margin:10px 0 8px;
}

.request{
  font-size:clamp(1.35rem,5.8vw,2.15rem);
  line-height:1.28;
  max-width:22ch;
  margin-top:6px;
}

.hero-actions{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

.hero-location{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:10px 17px;
  border:1px solid rgba(231,199,137,.35);
  border-radius:999px;
  background:rgba(36,10,13,.34);
  color:var(--ivory);
  text-decoration:none;
  font-family:var(--deco);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.hero-location span:last-child{
  color:var(--gold-bright);
  font-size:1rem;
  line-height:1;
}

.hero-location:hover,
.hero-location:focus-visible{
  transform:translateY(-2px);
  background:rgba(179,135,76,.12);
  border-color:var(--gold);
  outline:none;
}

#countdown-section,
#details-section,
#story-section,
#rsvp-section{
  position:relative;
}

#countdown-section::before,
#details-section::before,
#story-section::before,
#rsvp-section::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:min(82vw,600px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

.section-head{
  margin-bottom:32px;
  gap:8px;
}

.section-head .kicker{
  font-size:.7rem;
  letter-spacing:.25em;
}

.section-head h2{
  font-size:clamp(2rem,8vw,2.8rem);
  line-height:1;
}

.date-badge{
  width:min(100%, 390px);
  margin:0 auto 20px;
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(231,199,137,.28);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(179,135,76,.10), rgba(92,20,31,.18));
  box-shadow:0 18px 45px rgba(0,0,0,.16);
}

.date-badge-day{
  font-family:var(--display);
  font-size:2.2rem;
  line-height:.8;
  color:var(--gold-bright);
}

.date-badge-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  text-align:left;
}

.date-badge-copy strong{
  font-family:var(--deco);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ivory);
}

.date-badge-copy small{
  font-size:.9rem;
  color:var(--ivory-dim);
}

.date-line{
  font-size:.98rem;
  line-height:1.55;
  margin-bottom:24px;
  color:var(--ivory-dim);
}

.countdown{
  width:100%;
  max-width:520px;
  gap:10px;
}

.cd-cell{
  min-width:0;
  padding:14px 5px 12px;
  border-radius:12px;
  border:1px solid rgba(231,199,137,.38);
  outline:none;
  background:linear-gradient(180deg, rgba(179,135,76,.09), rgba(36,10,13,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.cd-num{
  font-size:clamp(1.65rem,8vw,2.7rem);
}

.cd-label{
  font-size:.58rem;
  letter-spacing:.12em;
}

.card{
  width:100%;
  max-width:430px;
  padding:36px 24px 30px;
  border-radius:var(--radius);
  border:1px solid rgba(231,199,137,.45);
  outline:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(179,135,76,.10), transparent 45%),
    linear-gradient(180deg, rgba(179,135,76,.055), rgba(36,10,13,.18));
  box-shadow:0 20px 55px rgba(0,0,0,.18);
}

.card svg{
  width:40px;
  height:40px;
}

.card h3{
  font-size:1.55rem;
}

.card .time{
  font-size:2rem;
}

.card .place{
  font-size:1rem;
  line-height:1.65;
}

.map-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:12px;
  padding:0 18px;
  border:1px solid rgba(231,199,137,.38);
  border-radius:999px;
  background:rgba(179,135,76,.07);
  text-decoration:none;
  border-bottom:1px solid rgba(231,199,137,.38);
  transition:transform .2s ease, background .2s ease;
}

.map-link:hover,
.map-link:focus-visible{
  transform:translateY(-2px);
  background:rgba(179,135,76,.13);
  outline:none;
}

.story{
  padding-top:clamp(70px,12vw,110px);
  padding-bottom:clamp(70px,12vw,110px);
}

.story p{
  font-size:clamp(1.05rem,4.6vw,1.22rem);
  line-height:1.78;
}

.closing-ornament{
  width:min(80%, 300px);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--gold);
  opacity:.72;
}

.closing-ornament span{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line));
}

.closing-ornament span:last-child{
  background:linear-gradient(90deg,var(--line),transparent);
}

.closing-ornament i{
  font-style:normal;
  font-size:.9rem;
}

footer{
  padding:34px 20px 58px;
}

footer .fname{
  font-size:2.2rem;
}

@media (max-width:600px){
  .env-card{
    left:6%;
    right:6%;
    top:13%;
    height:74%;
  }

  .env-front{ height:60%; }
  .env-flap{ height:57%; }

  .env-seal{
    width:76px;
    height:76px;
  }

  .env-kicker{
    top:32px;
    padding:0 18px;
  }

  .env-hint{
    bottom:76px;
  }

  .env-bloom{
    bottom:13px;
    width:230px;
  }

  section{
    padding-top:78px;
    padding-bottom:78px;
  }

  .countdown{
    gap:7px;
  }

  .cd-cell{
    padding:13px 2px 11px;
  }

  .date-badge{
    margin-bottom:16px;
  }

  .date-line{
    display:none;
  }

  .card{
    padding-inline:20px;
  }
}

@media (max-width:380px){
  .names .name{ font-size:3.35rem; }
  .request{ font-size:1.25rem; }
  .hero{ gap:18px; }
  .date-badge{ padding-inline:12px; }
  .date-badge-copy small{ font-size:.82rem; }
  .cd-label{ font-size:.52rem; }
}

@media (hover:none){
  .hero-location:hover,
  .map-link:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .hero-location,
  .map-link{ transition:none; }
  .hero::before{ box-shadow:none; }
}