/* =========================================================================
   RACHEL & MATTHEW — style.css  (MadPie wedding template)
   ---------------------------------------------------------------------
   TO RESTYLE FOR A NEW COUPLE:
   1. Swap the values in ":root" below (new palette hex codes).
   2. Swap font files in /assets/fonts (use .woff2 — smallest for web)
      and update the @font-face src paths + --font-display/--font-body.
      NOTE: confirm the display font's webfont license covers the new
      client's domain before launch.
   3. Swap /assets/images/monogram-green.png (hero card + favicon),
      monogram-pink.png (nav mark + footer) and background.jpg (the
      repeating floral pattern behind the heroes and the dividers).
   All CONTENT (names, dates, events, hotels, FAQs, registry links,
   gallery photos) lives in site.config.js — do not edit HTML in /dist,
   it is overwritten on every build.
   Everything below :root is layout/behavior and should not need to
   change between clients.
   ========================================================================= */

@font-face {
  font-family: 'Bodega Script';
  src: url('../assets/fonts/BodegaScript.woff2') format('woff2'),
       url('../assets/fonts/BodegaScript.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
  /* Bodega's cap height is ~0.84em against Diplomatic's 1.0em, so it renders
     noticeably smaller at the same font-size. This scales it back up so the
     existing type sizes still read correctly — adjust here rather than
     touching every heading rule. */
  size-adjust: 118%;
  /* Bodega ships with an ascent (0.724em) shorter than its own caps (0.872em)
     and a descent (0.487em) that matches its descenders. That lopsided line
     box made every script title sit visibly high inside its rectangle. These
     overrides wrap the line box tight around the real ink, top and bottom, so
     equal padding now reads as optically centred. */
  ascent-override: 87.2%;
  descent-override: 49%;
}
@font-face {
  font-family: 'Radley';
  src: url('../assets/fonts/Radley-Regular.woff2') format('woff2'),
       url('../assets/fonts/Radley-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Radley';
  src: url('../assets/fonts/Radley-Italic.woff2') format('woff2'),
       url('../assets/fonts/Radley-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- CLIENT PALETTE (edit per couple) ------------------------------ */
  --green-deep:  #667D34;   /* Green 1 — welcome copy, day headings, primary button */
  --green-mid:   #859257;   /* Green 2 — page titles + copy inside content boxes    */
  --green-olive: #95A778;   /* Green 3 — nav/footer background + content box borders*/
  --green-soft:  #ADBF92;   /* Green 4 — the 5px "frame box" stroke                 */
  --green-copy:  #7E9257;   /* Green 5 — "Join Us in Dallas" copy                   */
  --green-hover: #B9CD99;   /* Green 6 — hover state on the green CTA buttons      */
  --pink-wash:   #F8EAEA;   /* Pink 1 — welcome + main content section background   */
  --pink-accent: #F1B9BF;   /* Pink 2 — section rules + travel frame stroke         */
  --pink-button: #FFC1C7;   /* Pink 3 — "Travel" button fill                        */
  --cream:       #FFFFFF;   /* page background                                      */
  --white:       #FFFFFF;

  /* ---- DERIVED / STRUCTURAL (rarely needs editing) -------------------- */
  --ink: #454D30;                     /* soft near-black, mixed from Green 1 */
  --line: rgba(134, 146, 87, 0.28);   /* hairline dividers, from Green 1     */
  --shadow: 0 12px 32px rgba(69, 77, 48, 0.10);
  --surface: var(--green-olive);      /* nav/footer background */
  --wash:    var(--pink-wash);        /* soft section wash */
  --frame-stroke: 5px solid var(--green-soft);  /* the white frame boxes */
  --section-rule: 10px solid var(--pink-accent);/* top/bottom of content bands */
  --pattern: url('../assets/images/background.jpg');

  --font-display: 'Bodega Script', cursive;
  --font-body: 'Radley', serif;

  --page-max: 1180px;
  --gutter: clamp(24px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  background: var(--white);
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--green-deep);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* Scoped to Registry/FAQ (short-content pages) so the footer sits below
   the fold instead of appearing immediately under the content. Wrap the
   page's header+section(s) in <div class="fill-viewport__main"> and add
   class="fill-viewport" to <body> to use this on another page. */
body.fill-viewport { display: flex; flex-direction: column; min-height: calc(100vh + 260px); }
body.fill-viewport .fill-viewport__main { flex: 1 0 auto; }
body.fill-viewport .site-footer { flex-shrink: 0; }
img { max-width: 100%; height: auto; display: block; } /* height:auto keeps aspect ratio now that imgs carry width/height attributes */
a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--green-deep);
}
.eyebrow--accent { color: var(--green-deep); }

h1, h2, h3 { margin: 0; font-weight: 400; color: var(--green-deep); }

.script {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.3;   /* room for Bodega's swashes when a title wraps to two lines */
}

/* =========================== NAV =========================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  padding: 18px clamp(16px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}
.site-nav__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
}
.site-nav__mark img { height: 56px; width: auto; }
.site-nav__links {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The overlay list (inside .site-nav__panel) is the full-page mobile menu.
   It must stay hidden on desktop — .site-nav__panel uses display:contents
   there, which would otherwise leak this list into the desktop bar as a
   duplicate row. */
.site-nav__links--overlay { display: none; }
.site-nav__links a {
  padding: 6px 2px;
  color: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  border-color: var(--white);
  color: var(--white);
}
.site-nav__toggle {
  display: none;
  background: none;
  border: none; /* mobile fix #2: borderless hamburger */
  border-radius: 6px;
  width: 40px;
  height: 36px;
  font-size: 18px;
  color: var(--white);
}

/* =========================== HERO (home only) =========================== */
/* TEMPLATE: the hero is a framed white card (monogram + names + date +
   countdown) floating on the repeating floral pattern. Swap
   assets/images/monogram-green.png and assets/images/background.jpg per client. */
.hero-simple {
  position: relative;
  text-align: center;
  padding: clamp(48px, 7vh, 92px) var(--gutter) clamp(48px, 7vh, 92px);
  background: #FFFFFF;
  overflow: hidden;
}
.hero-simple--pattern {
  background-image: var(--pattern);
  background-repeat: repeat;
  background-size: 870px 435px;
  background-position: center top;
}
.hero-simple__crest {
  width: clamp(280px, 29vw, 440px);
  margin: 0 auto 40px;
  filter: drop-shadow(0 8px 18px rgba(62,70,50,0.16));
}
.hero-simple__names {
  font-family: var(--font-display);
  font-size: 74px;
  color: #859257;
  line-height: 1;
}
.hero-simple__meta {
  margin-top: 28px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: #859257;
}
.hero-simple__meta span { color: #859257; }
.hero-simple__countdown {
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: #859257;
}

.section--photos-wash {
  background: #F7F5F3;
  padding: 40px 0;
}
.hero-photos {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}
/* Lightbox trigger links wrap the gallery-page images (hero pair +
   highlights rows). display:contents keeps them transparent to the
   surrounding grid/flex layout — same technique used for .site-nav__panel
   above — so no existing sizing rules need to change. */
.js-lightbox-img { display: contents; }
.js-lightbox-img img { cursor: pointer; }
.hero-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.hero-photos__main { aspect-ratio: 4 / 3.1; object-position: center 20%; }
.hero-photos__side { aspect-ratio: 3 / 4.4; object-position: center 20%; }
@media (max-width: 700px) {
  .hero-photos { grid-template-columns: 1fr; gap: 10px; }
  .hero-photos__main, .hero-photos__side { aspect-ratio: 4 / 3.3; }
}

/* =========================== SECTIONS =========================== */
.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px var(--gutter);
}
.section--tight { padding-top: 40px; padding-bottom: 40px; }
.section--details-schedule { max-width: 1600px; padding-top: 0px; padding-bottom: 80px; padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.section--registry-cards { padding-top: 8px; padding-bottom: 96px; }
.section--faq { padding-top: 8px; padding-bottom: 100px; }
.section--tight-top { padding-top: 56px; }
.section--divider {
  border-top: 1px solid var(--line);
}
.section__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 68px;
}
.section__head .eyebrow {
  font-size: clamp(20px, 3.6vw, 26px);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.section__head h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vw, 25px);
  color: var(--green-deep);
  margin-top: 10px;
}
.section__head p {
  margin-top: 14px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  color: var(--green-deep);
}

.section--wash {
  background: var(--pink-wash);
  border-top: 10px solid var(--pink-accent);
  border-bottom: 10px solid var(--pink-accent);
}
.weekend-section { text-align: center; max-width: 780px; margin: 0 auto; }
.weekend-heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 26px;
  color: var(--green-deep);
}
.weekend-subtext {
  margin-top: 18px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--green-deep);
}
.weekend-location {
  margin-top: 24px;
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-deep);
}

.seal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px 0 44px;
  color: var(--line);
}
.seal-divider img { width: 150px; opacity: 1; }
.seal-divider::before,
.seal-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 160px;
  background: var(--line);
}
.seal-divider--end {
  margin: 56px 0 0;
}
.seal-divider--end img { width: 175px; }
.seal-divider--end::before,
.seal-divider--end::after { max-width: 440px; }

/* =========================== AT-A-GLANCE (Home) =========================== */
.section--tight-bottom { padding-top: 60px; padding-bottom: 60px; }
.glance {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 420px;
  margin: 0 auto;
  gap: 0;
  padding: 8px 0 12px;
  text-align: center;
}
.glance__item {
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.glance__item:first-child { border-top: none; padding-top: 0; }
.glance__item .eyebrow { font-size: 24px; letter-spacing: 0.14em; color: var(--green-deep); }
.glance__item p {
  margin: 14px 0 0;
  color: var(--green-deep);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
}
.glance__cta {
  text-align: center;
  margin-top: 32px;
}

/* =========================== PAGE HERO (Details) =========================== */
.page-hero {
  text-align: center;
  padding: clamp(64px, 9vh, 110px) var(--gutter) clamp(28px, 4vh, 44px);
  background: var(--cream);
}
.page-hero--tight { padding-bottom: 8px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  color: var(--green-deep);
  line-height: 1.45; /* script ascenders/swashes need room when titles wrap to two lines */
}
.page-hero__dates {
  margin-top: 20px;
  font-style: italic;
  color: var(--green-deep);
  font-size: 17px;
}
.page-hero__divider {
  width: 42px;
  height: 1px;
  background: var(--line);
  margin: 22px auto 0;
}
.page-hero__location {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* =========================== SCHEDULE FRAME (Details page) =========================== */
/* LEGACY — superseded by the "DETAILS PAGE (redesign)" block below.
   Kept in place in case the ornate floral-frame layout is wanted again
   for a future client; the current Details page no longer renders this
   markup, so these rules are currently unused. */
/* TEMPLATE: duplicate .day-group per day, .event-line per event within a day. */
.schedule-frame {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 6vw, 68px);
  border: 1px solid var(--green-deep);
}
.schedule-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--green-deep);
  opacity: 0.55;
  pointer-events: none;
}
.frame-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--green-deep);
  line-height: 0;
}
.frame-corner--tl { top: -1px; left: -1px; }
.frame-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.frame-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.frame-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }

.schedule-frame__title {
  text-align: center;
  margin-bottom: 40px;
}
.schedule-frame__title .script {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 36px);
  color: var(--green-deep);
}
.schedule-frame__date {
  display: block;
  margin-top: 12px;
  font-size: clamp(14px, 2.6vw, 20px);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--green-deep);
}

.day-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.day-group:first-child { border-top: none; padding-top: 0; }
.day-group__date {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.day-group__date .day {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.day-group__date .num {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--green-deep);
}
.event-line + .event-line { margin-top: 28px; }
.event-line h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.event-line .venue {
  margin-top: 5px;
  font-style: italic;
  color: var(--green-deep);
  font-size: 16px;
}
.event-line .time {
  margin-top: 10px;
  font-size: 16.5px;
  font-style: italic;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.event-line .meta {
  margin-top: 6px;
  font-size: 18.5px;
  font-style: italic;
  color: var(--green-deep);
  line-height: 1.6;
}
.event-line .tag { margin-top: 12px; }

/* =========================== DETAILS PAGE (redesign) =========================== */
.details-hero,
.travel-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.details-hero__title,
.travel-hero__title {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--green-deep);
  line-height: 1;
}
.details-hero__eyebrow,
.travel-hero__eyebrow {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 25px;
  letter-spacing: 0.1em;
  color: var(--green-deep);
}

.section--schedule { padding: 90px var(--gutter); }
.section--schedule-1 {
  background: var(--pink-wash);
  border-top: 20px solid var(--pink-accent);
  padding-bottom: 40px;
}
.section--schedule-2 {
  background: var(--pink-wash);
  border-bottom: 20px solid var(--pink-accent);
  padding-top: 40px;
}

.schedule-group {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.schedule-group__title {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--green-deep);
  line-height: 1;
}
.schedule-group__date {
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--green-deep);
}
.schedule-group__date sup { font-size: 0.6em; }
.schedule-group__cta { margin-top: 44px; }

.schedule-cards {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.schedule-card {
  width: 380px;
  max-width: 100%;
  padding: 44px 32px;
  background: var(--white);
  border: 5px solid var(--green-olive);
  text-align: center;
}
.schedule-card__title {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--green-mid);
  line-height: 1;
}
.schedule-card__venue {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--green-mid);
  line-height: 1.4;
}
.schedule-card__addr {
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--green-mid);
  line-height: 1.6;
}
.schedule-card__line {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--green-mid);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .details-hero__title,
  .travel-hero__title { font-size: 50px; }
  .details-hero__eyebrow,
  .travel-hero__eyebrow { font-size: 18px; }
  .details-hero__eyebrow { font-size: 15px; }               /* Details page only — 3pt smaller than the shared 18px */
  .schedule-group__title { font-size: 44px; }
  .schedule-group__date { font-size: 15px; }                /* matches the 3pt reduction above */
  .schedule-cards { margin-top: 32px; gap: 20px; }
  .schedule-card { padding: 32px 24px 22px; }
  .schedule-card__title { font-size: 36px; }
  .schedule-card__venue { font-size: 16px; }                /* 1pt smaller again — matches across all 4 boxes since they share this class */
  .section--schedule-1 { padding-top: 40px; }                /* less space above "The Night Before" */
  .section--schedule-2 { padding-bottom: 44px; }             /* less space under the FAQ button */
}

/* =========================== HOTELS / AIRPORTS (Travel page) =========================== */
/* LEGACY — superseded by the "TRAVEL PAGE (redesign)" block below. The
   current Travel page no longer renders this markup (repeatable hotel
   cards / airport rows); kept here in case a multi-hotel list layout is
   wanted again for a future client. */
/* TEMPLATE: duplicate .hotel-card per property, .airport-row per airport. */
.section--hotels { padding-bottom: 72px; }
.section--airports .section__head { margin-bottom: 32px; }
.hotel-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.hotel-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.hotel-card__img {
  width: 100%;
  max-width: 560px;
  height: 320px;
  object-fit: cover;
  border-radius: 2px;
}
.hotel-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hotel-card__body h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.hotel-card__body .addr {
  margin-top: 8px;
  font-size: 16px;
  font-style: italic;
  color: var(--green-deep);
  line-height: 1.6;
}
.hotel-card__body .tag { margin-top: 10px; }
.hotel-card__body .btn { margin-top: 18px; }
@media (max-width: 600px) {
  .hotel-card__img { height: 220px; }
}

.airport-list {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.airport-row {
  padding: 24px 0;
  /* border-top: 1px solid var(--line); */
}
.airport-row:first-child { border-top: none; padding-top: 0; }
.airport-row h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.airport-row .addr {
  margin-top: 6px;
  font-size: 16px;
  font-style: italic;
  color: var(--green-deep);
}

/* =========================== TRAVEL PAGE (redesign) =========================== */
.section--travel-frame {
  background: var(--wash);
  padding: 80px var(--gutter);
}
.travel-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) clamp(32px, 6vw, 64px);
  background: var(--white);
  border: 11px solid var(--pink-accent);
  text-align: center;
}
.travel-frame__title {
  font-family: var(--font-display);
  font-size: 56px;
  color: #859257;
  line-height: 1;
}
.travel-frame__title--travel { padding-top: 48px; margin-top: 0; }
.travel-frame__venue {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #859257;
  line-height: 1.4;
}
.travel-frame__img {
  margin: 36px auto 0;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 620 / 400;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.travel-frame__note {
  margin-top: 28px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: #859257;
}
.travel-frame__cta { margin-top: 24px; margin-bottom: 16px; }
.travel-frame__hotel--additional { padding-top: 32px; margin-top: 0; }
.travel-frame__hotel--additional .travel-frame__cta { margin-bottom: 40px; }
.travel-frame__heading {
  margin-top: 20px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #859257;
}
.travel-frame__heading--transportation { margin-top: 64px; }
.travel-frame__text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: #859257;
}
@media (max-width: 760px) {
  .section--travel-frame { padding-top: 32px; }
  .travel-frame { padding: 40px 24px; }
  .travel-frame__title { font-size: 42px; }
  .travel-frame__title--travel { padding-top: 56px; }
  .travel-frame__venue { font-size: 17px; }
  .travel-frame__note,
  .travel-frame__text { font-size: 18px; }
  .travel-frame__heading { font-size: 17px; }
  .travel-frame__heading--transportation { margin-top: 40px; }
}

/* =========================== GALLERY PAGE (redesign) =========================== */
.gallery-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter);  /* matches every other page hero */
  overflow: hidden;
}
.gallery-hero__title {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--green-deep);
  line-height: 1;
}
@media (max-width: 760px) {
  .gallery-hero__title { font-size: 50px; }
}

/* ---- Gallery "Coming Soon" placeholder ---------------------------------- */
.section--gallery-soon {
  background: var(--pink-wash);
  border-top: var(--section-rule);
  border-bottom: var(--section-rule);
  padding: 90px var(--gutter);
}
.gallery-soon-box {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 32px;
  background: var(--white);
  border: 5px solid var(--green-olive);
  text-align: center;
}
.gallery-soon-box__heading {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--green-mid);
}
.gallery-soon-box__text {
  margin-top: 4px;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  font-size: 28px;
  color: var(--green-mid);
}
@media (max-width: 760px) {
  .gallery-soon-box__heading { font-size: 22px; }
  .gallery-soon-box__text { font-size: 22px; }
}

/* =========================== FAQ PAGE (redesign) =========================== */
.faq-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.faq-hero__title {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--green-deep);
  line-height: 1;
}
.faq-frame__intro {
  max-width: 720px;
  margin: 0 auto 44px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: var(--green-deep);
  text-align: center;
}
@media (max-width: 760px) {
  .faq-hero__title { font-size: 50px; }
  .faq-frame__intro { font-size: 18px; margin-bottom: 28px; }
}

/* ---- Q&A frame ----------------------------------------------------------- */
.section--faq-frame {
  background: var(--pink-wash);
  border-top: 20px solid var(--pink-accent);
  border-bottom: 20px solid var(--pink-accent);
  padding: 80px var(--gutter);
}
.faq-frame {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 44px) clamp(32px, 6vw, 64px);
  background: var(--white);
  border: 11px solid var(--pink-accent);
  text-align: center;
}
.faq-frame__item--spaced { margin-top: 48px; }
.faq-frame__question {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--green-mid);
}
.faq-frame__answer {
  margin-top: -16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--green-mid);
}
@media (max-width: 760px) {
  .section--faq-frame { padding-top: 32px; }
  .faq-frame { padding: 28px 24px 40px; }
  .faq-frame__question { font-size: 20px; }
  .faq-frame__answer { font-size: 17px; }
  .faq-frame__item--spaced { margin-top: 36px; }
}

/* ---- Closing sign-off ----------------------------------------------------- */
.section--faq-closing {
  padding: clamp(56px, 8vh, 96px) var(--gutter);
  text-align: center;
}
.faq-closing__heading {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #667D34;
}
.faq-closing__signoff {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: lowercase;
  font-size: 24px;
  color: #667D34;
}
.faq-closing__names {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 40px;
  color: #667D34;
  line-height: 1;
}
@media (max-width: 760px) {
  .faq-closing__heading { font-size: 20px; }
  .faq-closing__signoff { font-size: 19px; }
  .faq-closing__names { font-size: 34px; }
}

/* =========================== REGISTRY PAGE (redesign) =========================== */
.registry-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.registry-hero__title {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--green-deep);
  line-height: 1;
}
@media (max-width: 760px) {
  .registry-hero__title { font-size: 50px; }
}

/* ---- Note + store boxes --------------------------------------------------- */
.section--registry-frame {
  background: var(--pink-wash);
  border-top: 20px solid var(--pink-accent);
  border-bottom: 20px solid var(--pink-accent);
  padding: 64px var(--gutter) 80px;
}
.registry-note {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 22px;
  line-height: 1.6;
  color: var(--green-deep);
  text-align: center;
}
.registry-boxes {
  max-width: 1160px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  column-gap: 40px;
  row-gap: 48px;
}
.registry-box {
  width: 420px;
  height: 400px;   /* fixed so all four read as one set */
  padding: 24px 20px;
  background: var(--white);
  border: 5px solid var(--green-olive);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.registry-box__logo {
  max-height: 70px;
  width: auto;
  margin: 0 auto;
}
.registry-box__name {
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--green-mid);
}
.registry-box__cta { margin-top: 4px; }
.btn.registry-box__btn {
  padding: 4px 14px;
  font-size: 14px;
  border-radius: 0;
}
.registry-box__addr {
  margin-top: 24px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--green-mid);
}
.registry-box__coming-soon {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--green-mid);
}
@media (max-width: 760px) {
  .registry-note { font-size: 18px; }
  .registry-boxes { margin-top: 32px; column-gap: 20px; row-gap: 20px; }
  .registry-box { width: 100%; max-width: 340px; height: auto; min-height: 300px; }
}

/* =========================== CARD GRID (Registry) =========================== */
.tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}
/* =========================== REGISTRY (Registry page) =========================== */
/* LEGACY — superseded by the "REGISTRY PAGE (redesign)" block further
   below. The current Registry page no longer renders this markup
   (repeatable card grid); kept here in case that layout is wanted again
   for a future client. */
/* TEMPLATE: duplicate .registry-card per registry/fund link. */
.registry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.registry-card {
  position: relative;
  text-align: center;
  padding: clamp(32px, 4vw, 44px) 28px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.registry-card::before,
.registry-card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.registry-card::before { top: -1px; left: -1px; border-top: 1px solid var(--green-deep); border-left: 1px solid var(--green-deep); }
.registry-card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--green-deep); border-right: 1px solid var(--green-deep); }
.registry-card h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.registry-card p {
  flex: 1;
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--green-deep);
  line-height: 1.6;
}
.registry-card .btn { margin-top: 22px; }

.btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid var(--green-deep);
  border-radius: 30px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--green-deep);
  color: var(--cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }
.btn--square { border-radius: 0; padding: 9px 20px; font-size: 11px; }
.btn--solid { background: var(--green-deep); color: var(--cream); border-color: var(--green-deep); }
.btn--solid:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }
.btn--home-cta { font-size: 16px; padding: 10px 22px; background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.btn--home-cta:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }
/* "Travel" button in the Join Us in Dallas section — blush fill, white type. */
.btn--pink-cta { font-size: 16px; padding: 10px 22px; background: var(--pink-accent); border-color: var(--pink-accent); color: var(--white); }
.btn--pink-cta:hover { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }

/* =========================== GALLERY (Home) =========================== */
/* TEMPLATE: swap files in assets/images/gallery/ and update the <img> list
   in index.html — column-based masonry re-flows automatically for any count. */
.gallery {
  column-count: 3;
  column-gap: 18px;
}
.gallery img {
  width: 100%;
  margin-bottom: 18px;
  border-radius: 2px;
  break-inside: avoid;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .gallery { column-count: 2; }
}
@media (max-width: 560px) {
  .gallery { column-count: 1; }
}

/* =========================== HIGHLIGHTS (Home — "Join Us in Dallas") ===== */
.section--highlights {
  background: #FFFFFF;
  color: var(--green-deep);
  padding: 80px var(--gutter);
}
/* Home page: the same repeating floral pattern used behind the hero. */
.section--pattern {
  background-image: var(--pattern);
  background-repeat: repeat;
  background-size: 870px 435px;
  background-position: center top;
}
/* Gallery page: pink wash behind the grid, and the photo rows sit inside a
   white frame with the same stroke as the Travel page box. */
.section--highlights--gallery {
  background: var(--pink-wash);
  padding-top: clamp(48px, 6vw, 72px);
}
.section--highlights--gallery .highlights-grid {
  max-width: 1040px;
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--white);
  border: 7px solid var(--pink-accent);
}
.highlights-grid {
  max-width: 1000px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.highlights-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  height: 400px;
}
.highlights-row--tall { height: 560px; }
.highlights-row img {
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.gallery-hero__main { object-position: center 78%; }  /* proposal shot — couple sits low in frame */
.highlights-cta {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.highlights-cta__heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 25px;
  color: var(--green-deep);
  margin-top: 8px;
}
.highlights-cta__text {
  margin-top: 18px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--green-deep);
}
.highlights-cta .glance__cta { margin-top: 24px; }
@media (max-width: 760px) {
  .highlights-grid { gap: 6px; margin-bottom: 36px; }
  .section--highlights--gallery { padding-top: 36px; }
  .highlights-row { gap: 6px; height: 190px; }
  .highlights-row--tall { height: 260px; }
}

/* =========================== FAQ ACCORDION =========================== */
/* TEMPLATE: duplicate .faq-row per question. JS toggle lives in js/main.js. */
.faq-accordion {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-row {
  border-bottom: 1px solid var(--line);
}
.faq-row__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.faq-row__question {
  font-size: 22px;
  color: var(--green-deep);
  line-height: 1.5;
  transition: color 0.2s ease;
}
.faq-row.is-open .faq-row__question { color: var(--green-deep); }
.faq-row__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--green-deep);
  transition: background 0.2s ease, color 0.2s ease;
}
.faq-row__toggle:hover .faq-row__icon { background: var(--green-deep); color: var(--cream); }
.faq-row__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-row__answer p {
  margin: 0;
  padding-bottom: 28px;
  color: var(--green-deep);
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
}
.faq-row__image {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 28px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
/* Open-state max-height is set from scrollHeight in js/main.js so any
   answer length (text + images) expands fully without clipping. */

/* =========================== FOOTER =========================== */
.site-footer {
  text-align: center;
  padding: 40px var(--gutter) 48px;
  border-top: none;
  background: var(--surface);
  color: var(--white);
}
.site-footer .script {
  font-size: 38px;
  color: var(--white);
  margin-bottom: 20px;
}
.site-footer .eyebrow,
.site-footer a { color: var(--white); }
.site-footer__mark { display: inline-block; }
.site-footer__monogram { width: 92px; height: auto; margin-bottom: 2px; }
.site-footer .eyebrow { margin-top: 2px; font-size: 16px; }
.site-footer .made-by {
  margin-top: -10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
  opacity: 1;
}

/* =========================== MOBILE NAV =========================== */
/* Desktop: the panel wrapper is layout-transparent; overlay chrome hidden. */
.site-nav__panel { display: contents; }
.site-nav__close, .site-nav__panel-title, .site-nav__panel-sub { display: none; }

/* Mobile fix #5: full-page menu overlay (inspo: "The Menu") */
@media (max-width: 760px) {
  .site-nav__toggle {
    display: block;
    font-size: 26px;
    position: absolute;
    right: clamp(16px, 2.4vw, 32px);
    top: 50%;
    transform: translateY(-50%);
  }
  /* Only the left/right desktop lists are direct children of .site-nav__inner —
     hide them on mobile; the overlay list (nested in .site-nav__panel) is
     shown instead via the rule below. */
  .site-nav__inner > .site-nav__links { display: none; }
  .site-nav__links--overlay { display: flex; }
  .site-nav__panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: var(--surface);
    padding: 9vh var(--gutter) 48px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .site-nav__panel.is-open { opacity: 1; visibility: visible; }
  body.menu-open { overflow: hidden; }
  .site-nav__close {
    display: block;
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 34px;
    line-height: 1;
    color: var(--white);
    cursor: pointer;
    padding: 8px;
  }
  .site-nav__panel-title {
    display: block;
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--white);
  }
  .site-nav__panel-sub {
    display: block;
    margin-top: 4px;
    font-style: italic;
    letter-spacing: 0.28em;
    font-size: 14px;
    color: var(--white);
  }
  .site-nav__links {
    flex-direction: column;
    gap: 22px;
    margin-top: 26px;
    font-size: 16px;
    letter-spacing: 0.24em;
  }
  .site-nav__links a { border-bottom: none; padding: 4px 6px; }
  .site-nav__links a[aria-current="page"] { color: var(--white); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================== MOBILE REFINEMENTS =========================== */
/* All rules below apply ONLY under 760px — desktop is untouched.
   Numbered to match the mobile punch list. */
@media (max-width: 760px) {

  /* #1 — smaller footer text (especially the script initials) */
  .site-footer { padding: 36px var(--gutter) 30px; }
  .site-footer .script { font-size: 20px; margin-bottom: 12px; }
  .site-footer .eyebrow { font-size: 11.5px; }
  
  .site-footer__nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
  }
  .site-footer__nav a {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
  }

  .site-footer .made-by { font-size: 13px; margin-top: 12px; }

  /* #3 — slightly smaller nav monogram */
  .site-nav__mark img { height: 34px; }

  /* #4 — home page: smaller crest + type */
  .hero-simple__crest { width: clamp(190px, 45vw, 230px); margin-bottom: 14px; }
  .hero-simple__names { font-size: clamp(30px, 8.5vw, 38px); }
  .hero-simple__meta { font-size: 15px; }
  .hero-simple__countdown { font-size: 12px; }
  .eyebrow { font-size: 13.5px; }
  .section__head h2 { font-size: 19px; }
  .section__head p { font-size: 17px; }
  .glance__item .eyebrow { font-size: 18px; }
  .glance__item p { font-size: 18px; }

  /* #7 (+ shared page heros) — smaller heading/type on inner pages */
  .page-hero h1 { font-size: 30px; } /* line-height inherited from base rule */
  .page-hero__dates { font-size: 16px; }
  .page-hero__location { font-size: 11.5px; letter-spacing: 0.24em; margin-top: 12px; }
  .hotel-card__body h3 { font-size: 18px; }
  .hotel-card__body .addr { font-size: 16px; }
  .airport-row h3 { font-size: 17px; }
  .airport-row .addr { font-size: 16px; }
  .airport-row { border-top: none; padding: 10px 0; }

  /* #6 — details page schedule frame:
     vines trimmed, inner box enlarged, type scaled to fit */
  .schedule-frame__title { margin-bottom: 28px; }
  .schedule-frame__title .script { font-size: 24px; }
  .schedule-frame__date { font-size: 13px; }
  .day-group { gap: 16px; padding: 24px 0; }
  .day-group__date .day { font-size: 14px; }
  .day-group__date .num { font-size: 28px; }
  .event-line h3 { font-size: 17.5px; letter-spacing: 0.05em; }
  .event-line .venue { font-size: 16px; }
  .event-line .time { font-size: 16px; }
  .event-line .meta { font-size: 17.5px; }
  .tag { font-size: 13px; }

  /* #8 — registry: smaller text, narrower cards via extra side padding */
  .section--registry-cards {
    padding-left: calc(var(--gutter) + 16px);
    padding-right: calc(var(--gutter) + 16px);
  }
  .registry-card h3 { font-size: 18px; }
  .registry-card p { font-size: 15.5px; }

  /* #9 — FAQ: smaller text, extra side padding */
  .section--faq {
    padding-left: calc(var(--gutter) + 16px);
    padding-right: calc(var(--gutter) + 16px);
  }
  .faq-row__question { font-size: 19px; }
  .faq-row__answer p { font-size: 17px; }
  .faq-row__icon { width: 28px; height: 28px; font-size: 16px; }

  /* #2 (round 2) — home: smaller seal crest + extra side padding */
  .seal-divider img { width: 130px; }
  .section {
    padding-left: calc(var(--gutter) + 12px);
    padding-right: calc(var(--gutter) + 12px);
  }
  .hero-photos {
    padding-left: calc(var(--gutter) + 12px);
    padding-right: calc(var(--gutter) + 12px);
  }
  /* #3 (round 2) — details schedule section is the one exception:
     LESS side padding so the floral frame gets more room */
  .section--details-schedule {
    padding-left: calc(var(--gutter) - 16px);
    padding-right: calc(var(--gutter) - 16px);
  }
  /* #5 (round 2) — page-hero header text: extra side padding */
  .page-hero {
    padding-left: calc(var(--gutter) + 16px);
    padding-right: calc(var(--gutter) + 16px);
  }
  /* #2/#4/#5 (round 2) — smaller buttons everywhere */
  .btn { padding: 11px 26px; font-size: 12px; }
  .btn--square { padding: 9px 20px; font-size: 11.5px; }

  /* #1 (round 3) — home page vertical rhythm */
  .section--tight-bottom { padding-top: 24px; padding-bottom: 44px; }      /* photos → welcome */
  .section--highlights { padding-top: 20px; }                             /* welcome button → gallery rows */
  .section--photos-wash { padding: 28px 0; }                              /* home page photo pair → welcome section */
  .section__head { margin-bottom: 28px; }            /* paragraph → glance; also travel + gallery */
  .section__head p { margin-top: 10px; }
  .glance__item:last-child { padding-bottom: 8px; }  /* kickoff → button */
  .glance__cta { margin-top: 0; }
  .section--tight-top { padding-top: 36px; }         /* gallery section */

  /* #2/#4 (round 3) — page heros: tighter nav→title and title→content gaps */
  .page-hero { padding-top: 40px; padding-bottom: 16px; }
  .page-hero__dates { margin-top: 12px; }
  .page-hero__divider { margin-top: 14px; }

  /* #3 (round 3) — travel: divider line → Hotels header */
  .section--tight { padding-top: 24px; }

  /* #1 (round 4) — home: tighter gap between hero meta and first photo */
  .hero-simple { padding-bottom: 24px; }

}

/* =========================== GLOBAL POLISH (both views) =========================== */
/* FAQ icon: clear when closed (+), filled green when open (−) */
.faq-row__icon { background: transparent; color: var(--green-deep); }
.faq-row.is-open .faq-row__icon { background: var(--green-olive); border-color: var(--green-olive); color: var(--cream); }

/* Serif (Radley) letterspacing — Juliette elements reset to normal below */
body { letter-spacing: 0.5pt; }
.script, .section__head h2, .site-nav__panel-title, .day-group__date .num { letter-spacing: normal; }

/* Short page titles: full name on desktop, short on mobile */
.title-short { display: none; }
@media (max-width: 760px) {
  .title-full { display: none; }
  .title-short { display: inline; }
}
/* Same idea for paragraph text that needs different manual line breaks
   on mobile vs desktop (see .weekend-subtext / .highlights-cta__text). */
.text-mobile { display: none; }
@media (max-width: 760px) {
  .text-full { display: none; }
  .text-mobile { display: inline; }
}
/* Footer page links are a mobile feature — hidden on desktop */
@media (min-width: 761px) {
  .site-footer__nav { display: none; }
}

/* =========================== LIGHTBOX (Gallery page) ===========================
   Fullscreen swipeable viewer for the gallery images. Markup lives once
   per page (see gallery.ejs), JS (js/main.js) swaps the image + wires up
   prev/next, swipe, and keyboard navigation. Works on mobile and desktop. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(92, 100, 70, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }
.lightbox__img {
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  user-select: none;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  line-height: 1;
  padding: 12px;
}
.lightbox__close {
  top: 18px;
  right: 18px;
  font-size: 36px;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 52px;
  padding: 12px 18px;
}
.lightbox__prev { left: 6px; }
.lightbox__next { right: 6px; }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { color: var(--green-soft); }
@media (max-width: 760px) {
  .lightbox__close { font-size: 30px; top: 10px; right: 10px; }
  .lightbox__prev,
  .lightbox__next { font-size: 40px; padding: 10px 12px; }
  .lightbox__img { max-width: 94vw; max-height: 80vh; }
}

/* =========================================================================
   RACHEL & MATTHEW — CLIENT COMPONENTS
   -------------------------------------------------------------------------
   Everything new to this build: the repeating floral pattern bands, the
   white "frame boxes" (5px #ADBF92 stroke) that sit on them, the hero
   monogram card, the side-by-side couple photos, and the pattern strip
   that sits between the last content section and the footer.
   ========================================================================= */

/* ---- Patterned band behind every page title ----------------------------- */
.page-band {
  background-image: var(--pattern);
  background-repeat: repeat;
  background-size: 870px 435px;
  background-position: center top;
}

/* ---- The white frame box (shared by hero card, page titles, home boxes) -- */
.frame-box {
  background: var(--white);
  border: var(--frame-stroke);
  text-align: center;
}

/* FAQ sign-off box. NOTE: this has to live AFTER .frame-box — that rule uses
   the `border` shorthand, which resets width and colour, and at equal
   specificity the later rule wins. Defined earlier, these overrides silently
   did nothing. */
.faq-closing-card {
  max-width: 800px;   /* matches .faq-frame above it */
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 5vw, 56px);
  border-width: 10px;
  border-color: var(--green-olive);
}

/* Page title card — the framed box behind each page's title text. */
.page-title-card {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px);
  border-width: 11px;
  border-color: var(--green-olive);
}

/* Home page frame boxes carry a heavier stroke than the 5px default. */
.hero-simple .frame-box,
.section--highlights .frame-box { border-width: 12px; }

/* ---- Home hero card ----------------------------------------------------- */
.hero-card {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(26px, 3.4vw, 38px) clamp(28px, 5vw, 64px) clamp(22px, 3vw, 32px);
}
.hero-card__monogram {
  width: clamp(150px, 20vw, 215px);
  height: auto;
  margin: 0 auto 18px;
}
.hero-card__names {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.4vw, 88px);
  color: var(--green-mid);
  line-height: 1.06;
  white-space: nowrap;   /* keeps "Rachel and Matthew" on one line */
}

/* ---- Join Us in Dallas — framed photo pair + framed copy box ------------- */
.section--highlights .frame-box--photos {
  max-width: 760px;   /* same outer width as .frame-box--cta below it */
  border-width: 6px;  /* scoped so it beats the 12px rule above, which is two classes deep */
  margin: 0 auto;
  padding: clamp(14px, 1.6vw, 20px);
}
.couple-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 20px);
}
.couple-pair img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.frame-box--cta {
  max-width: 760px;   /* matches .frame-box--photos so the two boxes line up */
  margin: clamp(20px, 3vw, 32px) auto 0;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px);
}
/* This box overrides the template's .highlights-cta width cap. */
.highlights-cta.frame-box--cta { max-width: 760px; }
.frame-box--cta .highlights-cta__heading,
.frame-box--cta .highlights-cta__text { color: var(--green-copy); }

/* ---- Page title colours ------------------------------------------------- */
.details-hero__title,
.details-hero__eyebrow,
.travel-hero__title,
.travel-hero__eyebrow,
.registry-hero__title,
.faq-hero__title,
.gallery-hero__title { color: var(--green-mid); }

/* ---- Registry: three boxes across on desktop ---------------------------- */
/* Four boxes now — two up, two down (four across doesn't fit a 1440 screen
   once the section gutters are taken off). */
.registry-boxes { column-gap: 40px; row-gap: 40px; max-width: 880px; }

/* ---- Pattern divider (between the last section and the footer) ---------- */
.pattern-divider {
  height: clamp(90px, 12vw, 150px);
  background-image: var(--pattern);
  background-repeat: repeat;
  background-size: 870px 435px;
  background-position: center center;
}

@media (max-width: 760px) {
  .hero-simple--pattern,
  .section--pattern,
  .page-band,
  .pattern-divider { background-size: 580px 290px; }
  .hero-simple { padding-top: 36px; padding-bottom: 36px; }
  .hero-card { padding: 28px 20px 24px; }
  .hero-card__monogram { width: clamp(120px, 34vw, 160px); margin-bottom: 12px; }
  .page-title-card { padding: 24px 20px; }
  .frame-box--photos { padding: 10px; max-width: 460px; }
  .frame-box--cta { max-width: 460px; }
  .highlights-cta.frame-box--cta { max-width: 460px; }
  .hero-card__names { white-space: normal; }
  .page-title-card { border-width: 6px; }
  .hero-simple .frame-box,
  .section--highlights .frame-box { border-width: 8px; }
  .couple-pair { gap: 8px; }
  .frame-box--cta { padding: 28px 20px; margin-top: 16px; }
  .pattern-divider { height: 90px; }
}

/* Hotel address line on the Travel page, under the room-block photo. */
.travel-frame__addr {
  margin-top: 20px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--green-mid);
}
@media (max-width: 760px) {
  .travel-frame__addr { font-size: 17px; }
}