/* ============================================================
   Felix & Angel — shared wedding styles
   Design tokens + components: hero, calendar, timeline.
   Link this file from every page:  <link rel="stylesheet" href="styles.css">
   ============================================================ */

/* ---------- Fonts ----------
   Free substitutes for the Canva fonts (loaded from Google Fonts):
     Jost       → geometric sans  (headings + body)   ~ Canva geometric
     Sacramento → signature script (names)             ~ Canva script
   @import must stay at the very top of the file.

   TO SWAP IN THE REAL CANVA FONTS LATER:
     1. Delete the @import line below.
     2. Drop the font files into a  fonts/  folder next to this file.
     3. Uncomment the @font-face block at the bottom of this section and
        set the real font names + filenames.
     4. Update the --geo / --script token values to the new names.
*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Sacramento&display=swap');

/*  --- self-hosting template (uncomment when you have the real files) ---
@font-face {
  font-family: "Your Geometric Font";
  src: url("fonts/geometric-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Your Geometric Font";
  src: url("fonts/geometric-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Your Script Font";
  src: url("fonts/script-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
------------------------------------------------------------------------ */

/* ---------- Self-hosted fonts (files live in  fonts/ ) ---------- */
@font-face {
  font-family: "Futura LT Pro";
  src: url("fonts/futura-lt-pro-3-cufonfonts/FuturaLTProLight.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Futura LT Pro";
  src: url("fonts/futura-lt-pro-3-cufonfonts/FuturaLTProBook.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Beautifully Delicious';
    src: local('Beautifully Delicious Script Bold'), local('Beautifully-Delicious-Script-Bold'),
        url('fonts/BDScript-Bold.woff2') format('woff2'),
        url('fonts/BDScript-Bold.woff') format('woff'),
        url('fonts/BDScript-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
@font-face {
  font-family: 'Adelia';
  src: url('fonts/adelia.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}


/* ---------- Design tokens ----------
   Fixed light palette — no dark-mode variant. The body background image
   (mostly white/light) isn't theme-aware, so a dark palette would clash
   with it; these colors are the only ones the site uses. */
:root {
  --paper:     #f1eee3;   /* cream ground */
  --navy:      #33456e;   /* primary ink + accent */
  --navy-soft: #4a5c85;   /* secondary text */
  --hairline:  #d8d2c4;   /* faint rules on cream */
  --line:      #33456e;   /* frame + timeline strokes */

  --serif:  Georgia, "Times New Roman", "Nimbus Roman", serif;
  --geo:    "Jost", "Century Gothic", "Questrial", "Futura", system-ui, sans-serif;
  --script: "Adelia", "Beautifully Delicious", "Sacramento", "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
  --futura: "Futura LT Pro", "Futura", "Century Gothic", var(--geo);   /* self-hosted, light weight */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--geo);
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  -webkit-font-smoothing: antialiased;
  background-image: url('images/background.jpg');
}

/* ---------- Button (reusable) ----------
   Solid navy pill for calls to action (RSVP, Google Maps, Send Gift, …).
   Use on a link or a button: <a class="btn" href="…">RSVP</a>
   The default is filled; add .btn--outline for a bordered variant. */
.btn {
  display: inline-block;
  font-family: var(--futura);
  font-weight: 400;
  font-size: clamp(.72rem, 2.4vw, .9rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper);
  background: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 5px;
  padding: .85em 2.4em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn:hover        { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn--outline {
  color: var(--navy);
  background: transparent;
}
.btn--outline:hover { color: var(--paper); background: var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}

.photo {
  position: relative;               /* positioning context for the frame + photo */
  width: var(--frame-w);
  aspect-ratio: 378.8 / 423.1;      /* matches hero-border.svg so the frame never distorts */
  margin: clamp(1rem, 4vw, 2rem) auto 0;
  --frame-w: clamp(220px, 56vw, 430px);
}
.photo__img {
  position: absolute;
  /* explicit top/left/width/height (not just inset) — <img> is a replaced
     element, so inset alone would fall back to the image's intrinsic pixel
     size instead of stretching to fill this box */
  top: 10.2%;
  left: 11.6%;
  width: 76.8%;
  height: 79.6%;
  object-fit: cover;
  object-position: center;
}
/* the drawn frame (hero-border.svg), overlaid on the whole box */
.photo__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__eyebrow {
  font-size: clamp(1.1rem, 4.5vw, 1.9rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
.hero__names {
  font-family: var(--script);
  font-weight: 400;
  /* Adelia renders far larger/wider per font-size unit than Beautifully
     Delicious did — scaled by the measured width ratio (~0.402) so the
     rendered text occupies the same width as before. */
  font-size: clamp(1.29rem, 5.95vw, 4.82rem);
  line-height: .75;
  margin: 0;
}

/* ============================================================
   SEPARATOR
   ============================================================ */

   .separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
   }

   .separator img {
    max-width: 50%;
   }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal { position: relative; width: 100%; max-width: 42rem; margin-inline: auto; }

/* decorative vine frame, stretched over the whole calendar box */
.cal__border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* content padded so it sits inside the frame */
.cal__inner {
  padding: clamp(2.4rem, 9vw, 4.25rem) clamp(1.8rem, 8vw, 3.75rem);
}

.cal__month {
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 400;
  margin: 0 0 clamp(1.4rem, 5vw, 2.2rem);
  text-wrap: balance;
}
/* 7-column fluid grid — columns divide whatever width is available */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: clamp(.2rem, 1.5vw, .55rem);
}
.cal__dow {
  font-family: var(--serif);
  text-align: center;
  font-size: clamp(.95rem, 3.4vw, 1.35rem);
  color: var(--navy);
  padding-bottom: clamp(.6rem, 2.5vw, 1.1rem);
}
.cal__day {
  font-family: var(--serif);
  aspect-ratio: 1 / 1;              /* square cells that scale with the grid */
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 3.8vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.cal__day--empty { visibility: hidden; }

/* highlighted day: hand-drawn circle image ringing the number */
.cal__day--mark { position: relative; }
.cal__circle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 155%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cal__rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: clamp(1rem, 3.5vw, 1.7rem) 0 0;
}
.cal__caption {
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  margin: clamp(1rem, 3.5vw, 1.5rem) 0 0;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--navy);
}

/* ============================================================
   LOCATION
   ============================================================ */
.loc { max-width: 40rem; margin-inline: auto; text-align: center; }
.loc__title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  margin: 0 0 clamp(1.5rem, 6vw, 3.25rem);
}

/* venue logo, framed the same way as the journey photos: image inset
   inside an overlaid hand-drawn border, sized to the border's own aspect
   ratio (sqaure-border.png) so the frame never distorts */
.loc__logo {
  position: relative;
  width: clamp(220px, 42vw, 340px);
  aspect-ratio: 2400 / 2273;
  margin: 0 auto clamp(2rem, 6vw, 3.25rem);
}
.loc__logo-img {
  position: absolute;
  /* explicit width/height (not just inset) — <img> is a replaced element,
     so inset alone would fall back to the image's intrinsic pixel size
     instead of stretching to fill this box */
  top: 13%;
  left: 13%;
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.loc__logo-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.loc__address {
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy);
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  line-height: 1.5;
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
  text-wrap: balance;
}

.loc__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.8rem, 3vw, 1.5rem);
}
/* equal-width buttons, regardless of label length */
.loc__actions .btn {
  flex: 1 1 0;
  min-width: 9rem;
  text-align: center;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.tl { max-width: 46rem; margin: 0 auto; }
.tl__title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 clamp(2rem, 7vw, 4rem);
}
.tl__list { list-style: none; margin: 0; padding: 0; position: relative; }
.tl__list::before {                 /* the continuous center spine */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1.5px;
  background: var(--line);
  transform: translateX(-50%);
}
.tl__item {                         /* each event = one grid row split by the spine */
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: clamp(1.5rem, 5vw, 2.75rem);
}
.tl__item:last-child { margin-bottom: 0; }
.tl__card { padding: 0 clamp(.9rem, 2.5vw, 1.4rem); }
.tl__time {
  display: block;
  font-size: clamp(.9rem, 3vw, 1.15rem);
  color: var(--navy-soft);
  padding-bottom: clamp(.3rem, 1.2vw, .5rem);
}
.tl__event {                        /* branch line = the event's top border, meeting the spine */
  display: block;
  font-size: clamp(1.15rem, 4.2vw, 1.7rem);
  border-top: 1.5px solid var(--line);
  padding-top: clamp(.3rem, 1.2vw, .5rem);
  text-wrap: balance;
}
.tl__item--right .tl__card { grid-column: 2; text-align: left; }
.tl__item--left  .tl__card { grid-column: 1; text-align: right; }

/* collapse to a single left rail on narrow screens */
@media (max-width: 34rem) {
  .tl__list { padding-left: 1.25rem; }
  .tl__list::before { left: 0; transform: none; }
  .tl__item { grid-template-columns: 1fr; }
  .tl__item--right .tl__card,
  .tl__item--left  .tl__card { grid-column: 1; text-align: left; }
}

/* ============================================================
   ATTIRE GUIDE
   ============================================================ */
.attire { max-width: 60rem; margin-inline: auto; text-align: center; }
.attire__title {
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 5vw, 2.5rem);
}
.attire__text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(1.5rem, 4.2vw, 2.37rem);
  line-height: 1.7;
  text-wrap: balance;
  margin: 0;
}

/* ============================================================
   A JOURNEY OF LOVE
   A titled heading followed by THREE independent <section class="jstep">
   blocks. Each step pairs a framed photo (with a handwritten caption
   beneath it) against a hand-drawn illustration (art supplied
   separately), plus a dashed arrow leading down to the next step.

   The single switch per section is the parity modifier:
       .jstep--odd   → photo LEFT,  arrow curves down-RIGHT   (steps 1, 3, …)
       .jstep--even  → photo RIGHT, arrow curves down-LEFT    (step 2, …)
   Flip that class and the whole row — photo side and arrow direction —
   mirrors. Omit the .jstep__arrow element on the final step.
   The markup inside every section is identical, so the sections can
   live in separate files and be combined in any order.
   ============================================================ */
.jstep-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 400;
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  margin: 0 0 clamp(1.5rem, 6vw, 3.25rem);
}

/* ---------- one step ----------
   A 2-column, 2-row grid. The photo+caption block (media) spans BOTH rows of
   one column; the illustration sits in the top cell of the other column and
   the connecting arrow in the bottom cell. That drops the arrow down beside
   the caption and points it toward the NEXT step's photo (same side).
   Parity swaps which column is which; the final step (--last) has no arrow. */
.jstep {
  max-width: 62rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  column-gap: clamp(1rem, 5vw, 3rem);
  row-gap: clamp(.4rem, 1.5vw, 1rem);
}
.jstep--odd  { grid-template-areas: "media art"   "media arrow"; }
.jstep--even { grid-template-areas: "art   media" "arrow media"; }
.jstep--last { grid-template-areas: "media art"; }   /* final step: no arrow row */
.jstep__media { grid-area: media; }
.jstep__art   { grid-area: art; }
.jstep__arrow { grid-area: arrow; }

/* photo + its caption, stacked and centred */
.jstep__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.9rem, 3vw, 1.5rem);
}

/* ---------- the captions (self-hosted Futura LT Pro Light) ---------- */
.jcap {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  max-width: 18em;
  margin: 0;
}

/* ---------- framed photos (hand-drawn PNG corner border) ---------- */
.jframe {
  position: relative;
  width: clamp(210px, 42vw, 360px);
  margin: 0;
  --bleed: clamp(10px, 3vw, 26px);    /* how far the brush border sits outside the photo */
}
.jframe__img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;                /* the reference photos are near-square */
  background: linear-gradient(180deg, #b9c4cc 0%, #cdd4d6 46%, #d7dadb 60%, #c9ccce 100%);
}
/* three distinct placeholder gradients; replace each div with a real <img class="jframe__img"> */
.jframe__img--lake { background: linear-gradient(180deg, #c3ccce 0%, #d3d8d8 40%, #cdd3cf 70%, #b9c3ba 100%); }
.jframe__img--dusk { background: linear-gradient(180deg, #4f5f5b 0%, #61726d 45%, #7c8a84 75%, #9aa39c 100%); }
.jframe__img--mist { background: linear-gradient(180deg, #aeb9bd 0%, #c2cacb 45%, #cfd4d3 70%, #b7c0bd 100%); }

/* the brush-corner PNG, overlaid and bled slightly past every edge */
.jframe__border {
  position: absolute;
  top: calc(-1 * var(--bleed));
  left: calc(-1 * var(--bleed));
  width:  calc(100% + 2 * var(--bleed));
  height: calc(100% + 2 * var(--bleed));
  object-fit: fill;
  pointer-events: none;
}

/* ---------- dashed connecting arrow ----------
   dash-arrow.png is drawn pointing up-and-right; rotating it 90° clockwise makes it
   run along the top then drop with the head pointing DOWN. The .jstep__arrow box is
   sized to the arrow's VISUAL (landscape) footprint and the img is flex-centred inside
   it, so the rotated image lands predictably regardless of its portrait layout box.
   Parity mirrors it so the head always points toward the next photo. */
.jstep__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(150px, 26vw, 240px);   /* the horizontal run's length */
  height: clamp(70px, 12vw, 112px);    /* ≈ 46% of the width (the png's aspect once rotated) */
  overflow: visible;
  align-self: start;                    /* sit toward the top of the arrow row, beside the caption */
}
.jstep--odd  .jstep__arrow { justify-self: start; }   /* hug the inner (page-centre) edge of its column */
.jstep--even .jstep__arrow { justify-self: end; }
.jstep__arrow img {
  height: clamp(150px, 26vw, 240px);   /* portrait long side → becomes the run's width once rotated */
  width: auto;
  flex: none;
}
.jstep--odd  .jstep__arrow img { transform: rotate(90deg); }              /* down-right */
.jstep--even .jstep__arrow img { transform: scaleX(-1) rotate(90deg); }   /* rotate first, THEN mirror → down-left */

/* ---------- illustration slots (drop real art in here) ---------- */
.jstep__art { display: grid; place-items: center; }
.jstep__art--flower { width: clamp(160px, 34vw, 300px); aspect-ratio: 1 / 1; }
.jstep__art--moth   { width: clamp(150px, 32vw, 270px); aspect-ratio: 1 / 1; }
.jstep__art--floral { width: clamp(150px, 32vw, 280px); aspect-ratio: 3 / 4; }
.art__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.art__ph {                            /* placeholder box — delete once real art is in */
  width: 100%;
  height: 100%;
  border: 1.5px dashed var(--hairline);
  border-radius: 10px;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--navy-soft);
  font-size: clamp(.68rem, 2.4vw, .82rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 1rem;
}

/* stack every step into one centred column on narrow screens,
   photo + caption always ahead of the illustration, arrow last */
@media (max-width: 40rem) {
  .jstep {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 7vw, 2rem);
  }
  .jstep__media { order: 0; }
  .jstep__art   { order: 1; }
  /* the dashed connecting arrow only makes sense as a between-photos cue in
     the desktop two-column layout; stacked single-column on mobile it has
     nothing to point between, so hide it rather than reflow it */
  .jstep__arrow { display: none; }
  /* .jstep--last's floral art is immediately followed by .rsvp__tree once
     stacked on mobile — two decorative illustrations back to back — so drop
     this one and let the RSVP tree carry that visual beat instead */
  .jstep--last .jstep__art--floral { display: none; }
}

/* ============================================================
   PAGE — vertical rhythm between the stacked sections (index.html).
   Only the DIRECT children of .page get spaced, so the journey steps
   inside .journey keep their own tight, arrow-bridging spacing.
   ============================================================ */
.page > * + * { margin-block-start: clamp(3rem, 9vw, 6rem); }

/* ============================================================
   COUNTDOWN
   "Happily ever after begins in" + a live D:H:M:S timer.
   Set the target date in countdown.html's inline script.
   ============================================================ */
.count {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}
.count__title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  font-size: clamp(1.35rem, 5.5vw, 2.9rem);
  margin: 0 0 clamp(1rem, 3.5vw, 1.8rem);
  text-wrap: balance;
}
.count__timer {
  display: flex;
  justify-content: center;
  align-items: flex-start;      /* keep the colons level with the numbers, not the labels */
  gap: clamp(.4rem, 2.2vw, 1.4rem);
}
.count__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(2.4rem, 9vw, 4.5rem);   /* keeps digit widths from jittering each tick */
}
.count__num {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy);
  font-size: clamp(2.4rem, 11vw, 5.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count__sep {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy);
  font-size: clamp(2.4rem, 11vw, 5.5rem);
  line-height: 1;
}
.count__label {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--navy-soft);
  font-size: clamp(.62rem, 2.3vw, .95rem);
  margin-top: clamp(.4rem, 1.6vw, .9rem);
}

/* ============================================================
   RSVP  (closing section)
   Tree illustration (art supplied later) on the left, the RSVP
   call-to-action on the right, then a full-width gratitude note
   and the couple's script signature.
   ============================================================ */
.rsvp { max-width: 54rem; margin-inline: auto; text-align: center; }

.rsvp__main {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.75rem);
}
.rsvp__tree { width: 100%; }
.rsvp__tree .art__ph { aspect-ratio: 3 / 4; }   /* tall, like a tree */

.rsvp__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.6rem);
}
.rsvp__title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(2rem, 8vw, 3.25rem);
  margin: 0;
}
.rsvp__text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.95rem, 3vw, 1.15rem);
  line-height: 1.6;
  text-wrap: balance;
  max-width: 26em;
  margin: 0;
}

.rsvp__gratitude {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.95rem, 3vw, 1.15rem);
  line-height: 1.7;
  text-wrap: balance;
  max-width: 40em;
  margin: clamp(2.5rem, 8vw, 4rem) auto 0;
}

/* stack the tree above the panel on narrow screens */
@media (max-width: 40rem) {
  .rsvp__main { grid-template-columns: 1fr; }
  .rsvp__tree { max-width: 16rem; margin-inline: auto; }
}

/* ============================================================
   WEDDING REGISTRY
   ============================================================ */
.registry { max-width: 40rem; margin-inline: auto; text-align: center; }
.registry__title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(1.5rem, 6vw, 2.6rem);
  margin: 0 0 clamp(1.5rem, 6vw, 2.5rem);
}
.registry__text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.95rem, 3vw, 1.15rem);
  line-height: 1.7;
  text-wrap: balance;
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { text-align: center; }
.site-footer__signature {
  font-family: var(--script);
  color: var(--navy);
  /* scaled by the Adelia/Beautifully Delicious width ratio (~0.402) — see .hero__names */
  font-size: clamp(1.19rem, 4.46vw, 1.97rem);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   RSVP — name-lookup modal (step 1, on index.html)
   ============================================================ */
.rmodal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(30rem, calc(100vw - 2rem));
}
.rmodal::backdrop { background: rgba(28, 34, 50, .55); }

.rmodal__box {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--navy);
  border-radius: 6px;
  padding: clamp(1.75rem, 6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.rmodal__close {
  position: absolute;
  top: .4rem;
  right: .6rem;
  border: none;
  background: none;
  color: var(--navy-soft);
  font-size: 1.6rem;
  line-height: 1;
  padding: .2rem .4rem;
  cursor: pointer;
}
.rmodal__close:hover { color: var(--navy); }

.rmodal__title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  margin: 0 0 .6rem;
}
.rmodal__text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.88rem, 2.8vw, 1rem);
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.rmodal__label,
.rguest__label {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--navy-soft);
  text-align: left;
  margin-bottom: .35rem;
}
.rmodal__input,
.rguest__select,
.rguest__textarea {
  font-family: var(--futura);
  font-weight: 300;
  font-size: 1rem;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 4px;
  padding: .7em .9em;
  width: 100%;
}
.rmodal__input:focus,
.rguest__select:focus,
.rguest__textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.rmodal__submit { margin-top: 1.4rem; align-self: center; }

/* feedback: errors and "did you mean…" suggestions */
.rmodal__feedback:empty { display: none; }
.rmodal__feedback {
  font-family: var(--futura);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.5;
  margin-top: .9rem;
  text-align: left;
}
.rmodal__feedback.is-error { color: #8c2f2f; }
.rmodal__suggest-text { margin: 0 0 .5rem; color: var(--navy-soft); }
.rmodal__suggest {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--futura);
  font-size: .95rem;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--hairline);
  border-radius: 4px;
  padding: .55em .8em;
  margin-bottom: .4rem;
  cursor: pointer;
}
.rmodal__suggest:hover { border-color: var(--navy); background: #fff; }

/* ============================================================
   Parking map modal — minimal, image-only lightbox
   ============================================================ */
.pmodal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(90vw, 60rem);
  max-height: 90vh;
}
.pmodal::backdrop { background: rgba(28, 34, 50, .7); }

.pmodal__img {
  display: block;
  width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.pmodal__close {
  position: fixed;
  top: clamp(.5rem, 2vw, 1.25rem);
  right: clamp(.5rem, 2vw, 1.25rem);
  border: none;
  background: rgba(250, 248, 244, .9);
  color: var(--navy);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.pmodal__close:hover { background: var(--paper); }

/* ============================================================
   RSVP — group form page (step 2, rsvp.html)
   ============================================================ */
.rform-page {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.rform__heading {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(2rem, 8vw, 3rem);
  margin: 0;
}
.rform__group {
  font-family: var(--script);
  color: var(--navy);
  /* scaled by the Adelia/Beautifully Delicious width ratio (~0.402) — see .hero__names */
  font-size: clamp(.72rem, 2.81vw, 1.05rem);
  line-height: 1.65;
  /* em-based (not rem) so it scales with this element's own font-size —
     Adelia's ascent runs ~1.25em above the baseline, taller than the
     heading above it leaves room for by default. */
  margin: 2.2em 0 0;
}
.rform__status,
.rform__intro {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.9rem, 3vw, 1.05rem);
  line-height: 1.6;
  margin: 1.5rem 0 0;
}
.rform__status.is-error { color: #8c2f2f; }

/* rehearsal-dinner info block — wedding party only */
.rrehearsal {
  margin: 1.5rem 0 0;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  background: rgba(255, 255, 255, .45);
  text-align: center;
}
.rrehearsal__title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  margin: 0 0 .5rem;
}
.rrehearsal__text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.9rem, 3vw, 1rem);
  margin: 0 0 1rem;
}

.rform { margin-top: 1rem; }

/* one block per guest */
.rguest {
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  padding: clamp(1rem, 4vw, 1.5rem);
  margin: 1.25rem 0 0;
  text-align: left;
  background: rgba(255, 255, 255, .45);
}
.rguest__name {
  font-family: var(--futura);
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(1.05rem, 3.5vw, 1.25rem);
  padding: 0 .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.rguest__badge {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--navy-soft);
  border-radius: 3px;
  padding: .3em .6em;
}
.rguest__choice {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: .5rem;
}
/* one flex item per radio+label pair, so wrapping can't split a label
   onto its own line away from its radio */
.rguest__option {
  display: flex;
  align-items: center;
}
.rguest__radio { accent-color: var(--navy); }
.rguest__radio-label {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy);
  font-size: .95rem;
  margin-left: .35rem;
  cursor: pointer;
}
.rguest__details {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.rguest__details[hidden] { display: none; }
.rguest__select { margin-bottom: 1rem; }

.rform__error {
  font-family: var(--futura);
  font-weight: 300;
  color: #8c2f2f;
  font-size: .9rem;
  margin-top: 1rem;
}
.rform__error:empty { display: none; }
.rform__submit { margin-top: 1.75rem; }

.rform__done { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.rform__done-title {
  font-family: var(--futura);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  margin: 0;
}
.rform__done-text {
  font-family: var(--futura);
  font-weight: 300;
  color: var(--navy-soft);
  font-size: clamp(.95rem, 3vw, 1.1rem);
  line-height: 1.6;
  text-wrap: balance;
  max-width: 26em;
  margin: 0;
}
.rform__signature {
  font-family: var(--script);
  color: var(--navy);
  /* scaled by the Adelia/Beautifully Delicious width ratio (~0.402) — see .hero__names */
  font-size: clamp(.88rem, 3.22vw, 1.29rem);
  line-height: 1.5;
  margin: clamp(2.5rem, 8vw, 4rem) 0 0;
}