/* =========================================================================
   MADPIE WEDDING TEMPLATE — style.css
   ---------------------------------------------------------------------
   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/crest-wreath.png (hero + seal divider) and
      monogram.png (nav mark + favicon).
   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: 'PapeterieHeader';
  src: url('../assets/fonts/PapeterieDupont-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FaceOfYesterday';
  src: url('../assets/fonts/FaceOfYesterday-Regular.woff2') format('woff2'),
       url('../assets/fonts/FaceOfYesterday-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@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:  #444F2C;   /* text / dark accents (primary) — per client spec */
  --green-olive: #667551;   /* mid-tone brand green — also the button fill      */
  --green-soft:  #CCD8A0;   /* light green — hover fields                       */
  --green-sand:  #DBA8AB;   /* light pink — secondary soft accents              */
  --blue-accent: #AC475A;   /* dark pink — secondary accent, links, dates       */
  --cream:       #FCFCF9;   /* page background (option 1)                       */
  --white:       #FFFFFF;

  /* extra swatches from the client palette, available for future accents */
  --red-deep:    #741022;
  --gold:        #EDC074;
  --beige:       #E0DAC7;

  /* ---- DERIVED / STRUCTURAL (rarely needs editing) -------------------- */
  --ink: #444F2C;                     /* text color — per client spec */
  --line: rgba(102, 117, 81, 0.28);   /* hairline dividers, from green-olive */
  --shadow: 0 12px 32px rgba(68, 79, 44, 0.10);
  --surface: #667652;                 /* nav/footer background — per client spec */
  --wash:    #EEF0E4;                 /* soft section wash (background option 2) */

  /* ---- BUTTONS (per client spec: fill #741122, hover #AC475A) */
  --btn-fill: #741122;
  --btn-hover: #AC475A;
  --btn-text: #FCFCF9;

  --nav-text: #FFFFFF;                /* nav/footer text — per client spec */

  --font-display: 'PapeterieHeader', cursive;   /* script headers — Papeterie Dupont italic */
  --font-body: 'Radley', serif;                 /* headings, labels, nav, details, paragraph copy */

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  background: var(--cream);
}
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: #667551;
}
.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;
}

/* =========================== NAV =========================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  color: var(--nav-text);
  border-bottom: 2px solid #444F2C;
}
.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;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--nav-text);
}
.site-nav__mark img { height: 52px; width: auto; }
.site-nav__links {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  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;
  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(--nav-text);
  color: var(--nav-text);
}
.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(--nav-text);
}

/* =========================== HERO (home only) =========================== */
/* TEMPLATE: swap crest-wreath.png for the new client's crest/monogram.
   hero-photos pulls straight from assets/images/gallery/ — swap the main
   <img> src values in index.html for the new couple's feature shots. */
.hero-simple {
  position: relative;
  text-align: center;
  padding: clamp(40px, 5vh, 70px) var(--gutter);
  background: url('../assets/images/floralbackground.png');
  background-repeat: repeat;
  overflow: hidden;
}
.hero-simple__card {
  display: inline-block;
  background: #FFFFFF;
  border: 10px solid #D5DDB4;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(32px, 6vw, 72px) clamp(20px, 2.5vw, 28px);
}
.hero-simple__crest {
  width: clamp(190px, 19vw, 275px);
  margin: 0 auto 14px;
  transform: translateX(-6px);
  filter: drop-shadow(0 8px 18px rgba(62,70,50,0.16));
}
.hero-simple__names {
  font-family: 'FaceOfYesterday', var(--font-display);
  font-weight: 400;
  color: #444F2C;
  line-height: 1.05;
  font-size: clamp(56px, 8vw, 104px);
  margin: 0 auto;
  white-space: nowrap;
}
.hero-simple__meta {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.14em;
  color: #444F2C;
}
.hero-simple__meta span { color: #444F2C; }
.hero-simple__countdown {
  margin-top: 6px;
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: #444F2C;
}

.section--photos-wash {
  background: #FAFAF6;
  padding: 8px 0 64px;
}
.hero-photos {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 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; }
@media (max-width: 700px) {
  .hero-photos__main { 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: #D5DDB4;                            /* per client spec — "To our friends & family" */
  border-top: 6px solid #444F2C;
  border-bottom: 6px solid #444F2C;
}
.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: #444F2C;                                 /* per client spec */
}
.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: #444F2C;                                 /* per client spec */
}

/* =========================== FEATURE PHOTO PAIR (Home) =========================== */
.section--photo-pair {
  background: url('../assets/images/floralbackground.png');
  background-repeat: repeat;
  padding: 56px var(--gutter) 64px;
  border-bottom: 6px solid #444F2C;
}
/* Both photos live in ONE shared white frame with a colored stroke. */
.photo-pair__frame {
  background: #FFFFFF;
  border: 8px solid #D5DDB4;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px;
}
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.photo-pair img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .photo-pair { grid-template-columns: 1fr; }
  .photo-pair__frame { max-width: 340px; }
}
.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;
}
/* =========================== FLORAL BORDER TEST (Details page) =========================== */
/* TEST variant: builds a full box out of the flowerline vine (left/right,
   using flowerline.png) and the flowerline horizontal (top/bottom, using
   flowerline-horizontal.png), plus a fine Green 1 detail line just inside it.
   Toggle by swapping schedule-frame's class in details.html between the plain
   version and "schedule-frame--floral" — both can coexist in the CSS. */
.schedule-frame--floral {
  border: none;
  padding: clamp(66px, 7vw, 94px) clamp(70px, 7vw, 99px);
}
.schedule-frame--floral::before { content: none; }
.schedule-frame--floral .frame-corner { display: none; }
.schedule-frame--floral::after {
  content: "";
  position: absolute;
  inset: 55px 61px;
  border: 1px solid var(--green-deep);
  outline: 1px solid var(--green-deep);
  outline-offset: 4px;
  opacity: 0.5;
  pointer-events: none;
}
.schedule-frame__vine-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  background-image: url('../assets/images/pinkflower_vertical.png');
  background-repeat: repeat-y;
  background-size: 56px auto;
  pointer-events: none;
}
.schedule-frame__vine-v--left { left: 0; }
.schedule-frame__vine-v--right { right: 0; transform: scaleX(-1); }
.schedule-frame__vine-h {
  position: absolute;
  left: 56px;
  right: 56px;
  height: 50px;
  background-image: url('../assets/images/pinkflower_horizontal.png');
  background-repeat: repeat-x;
  background-size: auto 50px;
  pointer-events: none;
}
.schedule-frame__vine-h--top { top: -11px; }
.schedule-frame__vine-h--bottom { bottom: -11px; transform: scaleY(-1); }

.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; }
@media (max-width: 560px) {
}

/* =========================== DETAILS PAGE (redesign) =========================== */
.details-hero,
.travel-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(36px, 5vh, 52px);
  background: #FCFCF9;
  overflow: hidden;
}
.details-hero__title,
.travel-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  color: #667551;
  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: #667551;
}

.section--schedule { padding: 90px var(--gutter); }
/* Two visually distinct bands: "The Night Before" in the soft pink,
   "The Wedding Day" in the sage green. Each keeps its own text colour
   (see .accent-rose for the pink group). */
.section--schedule-1 { background: #F8F0F2; padding-bottom: 70px; }   /* per client spec */
.section--schedule-2 { background: #E0E4D7; padding-top: 70px; }      /* per client spec */

.schedule-group {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.schedule-group__title {
  font-family: var(--font-display);
  font-size: 44px;
  color: #667551;
  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: #667551;
}
.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: 56px;
}
.schedule-card {
  width: 380px;
  max-width: 100%;
  padding: 44px 32px;
  background: var(--cream);
  border: 4px solid #667551;
  text-align: center;
}
.schedule-card__title {
  font-family: var(--font-display);
  font-size: 36px;
  color: #667551;
  line-height: 1;
}
/* Floral corner accents on the "Night Before" cards, one per corner.
   All four use the same asset, mirrored so each spray's dense end
   points in toward the corner it sits on. They sit fully OUTSIDE the
   border with a gap (--flower-gap) so the artwork never touches the
   card's stroke.

   The cards need real space between them for this: two facing corner
   sprays each reach --flower-w + --flower-gap past their border, so
   the row below sets its own separation via margins rather than the
   shared flex gap (margins render consistently everywhere, and the
   value has to account for the artwork, not just the boxes). */
.schedule-group--framed .schedule-cards {
  gap: 0;
}
.schedule-card--framed {
  position: relative;
  overflow: visible;
  border-color: #AC475A;        /* per client spec */
  margin: 46px 84px;            /* room for the corner sprays */
  --flower-w: 100px;
  --flower-h: 100px;            /* asset is 497x500, so effectively square */
  --flower-inset: 34px;         /* see offset note below */
}
.schedule-card--framed > *:not(.schedule-card__flower) {
  position: relative;
  z-index: 2;
}
.schedule-card__flower {
  position: absolute;
  width: var(--flower-w);
  height: auto;
  pointer-events: none;
  z-index: 1;
}
/* --flower-inset is how far each spray's box overlaps the card corner.
   It's deliberately large enough that the artwork drapes across the
   stroke rather than clearing it. The sprays paint above the card's
   fill and border but below its text (see the z-index pair above), so
   the copy stays legible where they overlap. */
.schedule-card__flower--tl,
.schedule-card__flower--tr { top: calc(-1 * (var(--flower-h) - var(--flower-inset))); }
.schedule-card__flower--bl,
.schedule-card__flower--br { bottom: calc(-1 * (var(--flower-h) - var(--flower-inset))); }
.schedule-card__flower--tl,
.schedule-card__flower--bl { left: calc(-1 * (var(--flower-w) - var(--flower-inset))); }
.schedule-card__flower--tr,
.schedule-card__flower--br { right: calc(-1 * (var(--flower-w) - var(--flower-inset))); }
/* Corner orientations: each spray opens outward, away from the box —
   top-left mirrors what used to sit bottom-right, and top-right
   mirrors what used to sit bottom-left. */
.schedule-card__flower--tl { transform: scale(-1, -1); }
.schedule-card__flower--tr { transform: scaleY(-1); }
.schedule-card__flower--bl { transform: scaleX(-1); }
@media (max-width: 900px) {
  /* Stacked layout — keep the vertical breathing room, drop the wide
     side margins so the cards don't get squeezed. */
  .schedule-card--framed { margin: 46px 70px; --flower-w: 74px; --flower-h: 74px; --flower-inset: 26px; }
}
.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: #667551;
  line-height: 1.4;
}
.schedule-card__addr {
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--green-deep);
  line-height: 1.6;
}
.schedule-card__line {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--green-deep);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .details-hero__title,
  .travel-hero__title { font-size: 38px; }
  .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: 32px; }
  .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: 28px; }
  .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 */
}

/* Details-page butterflies: same idea as the home hero's pair but a
   slightly different flight path/timing so it doesn't feel identical
   from page to page. */
.butterfly-scene--details { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.butterfly--fly-details {
  position: absolute;
  top: 16%;
  left: auto;
  right: -40px;
  width: 30px;
  height: 26px;
  rotate: -20deg;
  transform: scaleX(-1);
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-details 20s ease-in-out infinite,
             butterfly-flutter 0.4s ease-in-out infinite;
}
.butterfly--fly-details-b {
  position: absolute;
  top: 68%;
  left: -34px;
  width: 24px;
  height: 21px;
  rotate: 24deg;
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-details-b 16s ease-in-out infinite 1.2s,
             butterfly-flutter 0.34s ease-in-out infinite;
}
@keyframes butterfly-flightpath-details {
  0%   { translate: 0 0;         rotate: -20deg; }
  20%  { translate: -22vw 16px;  rotate: -30deg; }
  40%  { translate: -44vw -10px; rotate: -18deg; }
  60%  { translate: -66vw 14px;  rotate: -28deg; }
  80%  { translate: -90vw -12px; rotate: -22deg; }
  100% { translate: -112vw 8px;  rotate: -26deg; }
}
@keyframes butterfly-flightpath-details-b {
  0%   { translate: 0 0;        rotate: 24deg; }
  25%  { translate: 26vw -14px; rotate: 14deg; }
  50%  { translate: 50vw 12px;  rotate: 30deg; }
  75%  { translate: 78vw -10px; rotate: 16deg; }
  100% { translate: 112vw 6px;  rotate: 22deg; }
}
@media (prefers-reduced-motion: reduce) {
  .butterfly--fly-details,
  .butterfly--fly-details-b { animation: none; }
  .butterfly--fly-details { left: auto; right: 18%; }
  .butterfly--fly-details-b { left: 62%; }
}
@media (max-width: 760px) {
  .butterfly--fly-details { width: 18px; height: 16px; }
  .butterfly--fly-details-b { width: 19px; height: 17px; }
}

/* =========================== 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: #E1E5D6;
  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(--cream);
  border: 5px solid #667551;
  text-align: center;
}
.travel-frame__title {
  font-family: var(--font-display);
  font-size: 48px;
  color: #667551;
  line-height: 1;
}
.travel-frame__title--travel { margin-top: 56px; }
.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: #667551;
  line-height: 1.4;
}
.travel-frame__img {
  margin: 36px auto 0;
  width: 100%;
  max-width: 620px;
  height: auto;
  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: var(--green-deep);
}
.travel-frame__cta { margin-top: 24px; }
.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: #667551;
}
.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: var(--green-deep);
}
@media (max-width: 760px) {
  .section--travel-frame { padding-top: 32px; }
  .travel-frame { padding: 40px 24px; }
  .travel-frame__title { font-size: 34px; }
  .travel-frame__title--travel { margin-top: 68px; }
  .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; }
}

/* Travel-page butterflies: a third distinct flight path/timing so the
   three pages (home, details, travel) each feel a little different. */
.butterfly-scene--travel { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.butterfly--fly-travel {
  position: absolute;
  top: 24%;
  left: -36px;
  width: 27px;
  height: 23px;
  rotate: 12deg;
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-travel 15s ease-in-out infinite,
             butterfly-flutter 0.38s ease-in-out infinite;
}
.butterfly--fly-travel-b {
  position: absolute;
  top: 58%;
  left: -30px;
  width: 22px;
  height: 19px;
  rotate: -30deg;
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-travel-b 19s ease-in-out infinite 0.8s,
             butterfly-flutter 0.3s ease-in-out infinite;
}
@keyframes butterfly-flightpath-travel {
  0%   { translate: 0 0;        rotate: 12deg; }
  15%  { translate: 18vw -18px; rotate: 22deg; }
  35%  { translate: 40vw 12px;  rotate: 8deg; }
  55%  { translate: 62vw -16px; rotate: 20deg; }
  75%  { translate: 86vw 10px;  rotate: 10deg; }
  100% { translate: 112vw -14px; rotate: 18deg; }
}
@keyframes butterfly-flightpath-travel-b {
  0%   { translate: 0 0;        rotate: -30deg; }
  30%  { translate: 28vw 14px;  rotate: -18deg; }
  60%  { translate: 58vw -12px; rotate: -34deg; }
  100% { translate: 112vw 10px;  rotate: -22deg; }
}
@media (prefers-reduced-motion: reduce) {
  .butterfly--fly-travel,
  .butterfly--fly-travel-b { animation: none; }
  .butterfly--fly-travel { left: 24%; }
  .butterfly--fly-travel-b { left: 54%; }
}
@media (max-width: 760px) {
  .butterfly--fly-travel { width: 16px; height: 14px; }
  .butterfly--fly-travel-b { width: 18px; height: 16px; }
}

/* =========================== GALLERY PAGE (redesign) =========================== */
.gallery-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(36px, 5vh, 52px);
  background: var(--cream);
  overflow: hidden;
}
.gallery-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  color: #667551;
  line-height: 1;
}

/* Gallery-page butterflies: same left-to-right, right-angled big
   butterfly as the home hero (identical path/timing), paired with a
   NEW small butterfly mirrored to face left and fly right-to-left. */
.butterfly-scene--gallery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.butterfly--fly-gallery {
  position: absolute;
  top: 22%;
  left: -46px;
  width: 36px;
  height: 31px;
  rotate: 35deg;
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath 17s ease-in-out infinite,
             butterfly-flutter 0.42s ease-in-out infinite;
}
.butterfly--fly-gallery-b {
  position: absolute;
  top: 36%;
  left: auto;
  right: -40px;
  width: 28px;
  height: 25px;
  rotate: 18deg;
  transform: scaleX(-1);
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-gallery-b 14s ease-in-out infinite 2.4s,
             butterfly-flutter 0.36s ease-in-out infinite;
}
@keyframes butterfly-flightpath-gallery-b {
  0%   { translate: 0 0;         rotate: 18deg; }
  22%  { translate: -20vw -18px; rotate: 8deg; }
  44%  { translate: -42vw 14px;  rotate: 20deg; }
  66%  { translate: -64vw -16px; rotate: 10deg; }
  100% { translate: -112vw 12px; rotate: 16deg; }
}
@media (prefers-reduced-motion: reduce) {
  .butterfly--fly-gallery,
  .butterfly--fly-gallery-b { animation: none; }
  .butterfly--fly-gallery { left: 20%; }
  .butterfly--fly-gallery-b { left: auto; right: 20%; }
}
@media (max-width: 760px) {
  .gallery-hero__title { font-size: 38px; }
  .butterfly--fly-gallery { width: 20px; height: 17px; }
  .butterfly--fly-gallery-b { width: 20px; height: 18px; }
}

/* ---- Gallery "Coming Soon" placeholder ---------------------------------- */
.section--gallery-soon {
  padding: 40px var(--gutter) 90px;
}
.gallery-soon-box {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 32px;
  background: var(--wash);
  border: 5px solid var(--btn-fill);
  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: #667551;
}
.gallery-soon-box__text {
  margin-top: 4px;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  font-size: 28px;
  color: var(--green-deep);
}
@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(36px, 5vh, 52px);
  background: #FCFCF9;
  overflow: hidden;
}
.faq-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  color: #667551;
  line-height: 1;
}
.faq-hero__intro {
  margin: 22px auto 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--green-deep);
}

/* FAQ-page butterflies: same left-to-right, right-angled big butterfly
   as the home/gallery heroes, but the small mirrored one sits lower on
   the page than it does on the Gallery page. */
.butterfly-scene--faq { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.butterfly--fly-faq {
  position: absolute;
  top: 18%;
  left: -46px;
  width: 36px;
  height: 31px;
  rotate: 35deg;
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath 17s ease-in-out infinite,
             butterfly-flutter 0.42s ease-in-out infinite;
}
.butterfly--fly-faq-b {
  position: absolute;
  top: 78%;
  left: auto;
  right: -40px;
  width: 28px;
  height: 25px;
  rotate: 18deg;
  transform: scaleX(-1);
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-gallery-b 14s ease-in-out infinite 2.4s,
             butterfly-flutter 0.36s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .butterfly--fly-faq,
  .butterfly--fly-faq-b { animation: none; }
  .butterfly--fly-faq { left: 20%; }
  .butterfly--fly-faq-b { left: auto; right: 20%; }
}
@media (max-width: 760px) {
  .faq-hero__title { font-size: 38px; }
  .faq-hero__intro { font-size: 16px; }
  .butterfly--fly-faq { width: 20px; height: 17px; }
  .butterfly--fly-faq-b { width: 20px; height: 18px; }
}

/* ---- Q&A frame ----------------------------------------------------------- */
.section--faq-frame {
  background: #E1E5D6;
  padding: 80px var(--gutter);
}
.faq-frame {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 44px) clamp(32px, 6vw, 64px);
  background: var(--cream);
  border: 5px solid var(--btn-fill);
  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: #667551;
}
.faq-frame__answer {
  margin-top: -16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--green-deep);
}
@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 {
  background: #F8F0F2;              /* per client spec */
  padding: 48px var(--gutter);
  text-align: center;
}
/* All copy in the closing sign-off shares the rose accent. */
.section--faq-closing,
.section--faq-closing * { color: #AC475A; }
.faq-closing__heading {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #AC475A;                   /* per client spec */
}
.faq-closing__signoff {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: lowercase;
  font-size: 24px;
  color: #AC475A;                   /* per client spec */
}
.faq-closing__names {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 32px;
  color: #AC475A;                   /* per client spec */
  line-height: 1;
}
@media (max-width: 760px) {
  .faq-closing__heading { font-size: 20px; }
  .faq-closing__signoff { font-size: 19px; }
  .faq-closing__names { font-size: 26px; }
}

/* =========================== REGISTRY PAGE (redesign) =========================== */
.registry-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(56px, 8vh, 80px);
  background: #FCFCF9;
  overflow: hidden;
}
.registry-hero__title {
  font-family: var(--font-display);
  font-size: 52px;
  color: #667551;
  line-height: 1;
}

/* Registry-page butterflies: same left-to-right, right-angled big
   butterfly as the home/gallery/FAQ heroes, small mirrored one moved
   even lower than the FAQ page's. */
/* Fixed, full-viewport overlay so both butterflies can cross the whole
   page (not just the hero) regardless of scroll position. Sits below
   the sticky nav (z-index 40) so it never covers it. */
.butterfly-scene--registry { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.butterfly--fly-registry {
  position: absolute;
  top: 18%;
  left: -46px;
  width: 36px;
  height: 31px;
  rotate: 35deg;
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath 17s ease-in-out infinite,
             butterfly-flutter 0.42s ease-in-out infinite;
}
.butterfly--fly-registry-b {
  position: absolute;
  top: 86%;
  left: auto;
  right: -40px;
  width: 28px;
  height: 25px;
  rotate: 18deg;
  transform: scaleX(-1);
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-gallery-b 14s ease-in-out infinite 2.4s,
             butterfly-flutter 0.36s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .butterfly--fly-registry,
  .butterfly--fly-registry-b { animation: none; }
  .butterfly--fly-registry { left: 20%; }
  .butterfly--fly-registry-b { left: auto; right: 20%; }
}
@media (max-width: 760px) {
  .registry-hero__title { font-size: 38px; }
  .butterfly--fly-registry { width: 20px; height: 17px; }
  .butterfly--fly-registry-b { width: 20px; height: 18px; }
}

/* ---- Note + store boxes --------------------------------------------------- */
.section--registry-frame {
  background: #E1E5D6;
  padding: 40px 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(--btn-fill);
  text-align: center;
}
.registry-boxes {
  max-width: 800px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 64px;
  row-gap: 48px;
}
.registry-box {
  width: 340px;
  height: 340px;
  padding: 24px 20px;
  background: var(--cream);
  border: 4px solid var(--btn-fill);
  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: 22px;
  letter-spacing: 0.03em;
  color: #667551;
}
.registry-box__cta { margin-top: 10px; }
.btn.registry-box__btn {
  padding: 4px 14px;
  font-size: 14px;
  border-radius: 0;
}
.registry-box__addr {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--green-deep);
}
.registry-box__coming-soon {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--green-deep);
}
@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: 320px; 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(--btn-fill);
  border-radius: 30px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--btn-fill);
  color: var(--btn-text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }
.btn--square { border-radius: 0; padding: 9px 20px; font-size: 11px; }
.btn--solid { background: var(--btn-fill); color: var(--btn-text); border-color: var(--btn-fill); }
.btn--solid:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }
.btn--home-cta { font-size: 16px; padding: 10px 22px; background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-text); }
.btn--home-cta:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-text); }
/* Details page FAQ button + Travel page Book Your Stay button — 4pt smaller
   than the shared .btn--home-cta size, scoped so other CTAs are unaffected. */
.schedule-group__cta .btn--home-cta,
.travel-frame__cta .btn--home-cta { font-size: 12px; }

/* =========================== 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: var(--cream);
  color: var(--green-deep);
  padding: 80px var(--gutter);
}
/* Gallery page only: tighter gap between the page title and the photo grid. */
.section--highlights--gallery { padding-top: 7px; }
/* Home page only: distinct background for the "Join Us in Dallas" strip. */
.section--highlights--home { background: #FCFCF9; }   /* matches .hero-simple background */
.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;
}
.highlights-row--hero { height: 400px; }
.highlights-row--top,
.highlights-row--bottom { height: 340px; }
.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 page masonry rows: no fixed height/cropping — each photo keeps
   its natural proportions (portrait or landscape), matching the couple's
   reference layout instead of forcing a uniform square crop. */
.highlights-grid--masonry {
  gap: 14px;
  max-width: 1000px;
}
.highlights-row--masonry {
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}
.highlights-row--masonry .js-lightbox-img {
  display: block;
  flex: 0 0 auto;
  height: 100%;
}
.highlights-row--masonry img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow: var(--shadow);
}
@media (max-width: 700px) {
  .highlights-row--masonry { flex-direction: column; height: auto !important; gap: 8px; }
  .highlights-row--masonry .js-lightbox-img { width: 100% !important; height: auto; }
  .highlights-row--masonry img { height: auto; }
}
.highlights-cta {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.highlights-cta--framed {
  background: #FFFFFF;
  border: 10px solid #D5DDB4;
  padding: 40px clamp(24px, 5vw, 44px) 36px;
  max-width: 640px;
  margin: 48px auto 0;
}
.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: #7E9257;
  margin-top: 8px;
}
.highlights-cta__text {
  margin-top: 18px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #7E9257;
}
.highlights-cta .glance__cta { margin-top: 24px; }
@media (max-width: 760px) {
  .highlights-grid { gap: 6px; margin-bottom: 36px; }
  .section--highlights--gallery { padding-top: 5px; }
  .highlights-row { gap: 6px; }
  .highlights-row--hero { height: 190px; }
  .highlights-row--top,
  .highlights-row--bottom { height: 160px; }
}

/* DOG ANIMATION — the couple's dog, in its own section right after
   "Join Us in Dallas" on the home page, same background as that
   section so the page still reads as one flow. Full-bleed (no side
   padding) so the dog walks in from off the edge of the page.

   Artwork is a transparent 8-frame sprite sheet (assets/images/
   dog-sprite.png, frames laid out left to right). js/main.js drives
   BOTH the current frame and the horizontal position from a single
   clock, so the legs and the travel can't fall out of step. Nothing
   here depends on video autoplay, which is why this replaced the
   earlier <video> approach.

   To resize: change --dog-w. The sprite is authored at 200px per
   frame (2x) so it stays crisp up to ~100px displayed. */
.section--dog-scene {
  background: #FCFCF9;   /* matches .section--highlights--home */
  padding: 0 0 70px;
}
.dog-scene {
  position: relative;
  overflow: hidden;
  height: 90px;
  pointer-events: none;
}
.dog-walk {
  --dog-w: 90px;
  position: absolute;
  top: 0;
  left: calc(-1 * var(--dog-w));
  width: var(--dog-w);
  /* 159/200 = the sprite's per-frame aspect ratio */
  height: calc(var(--dog-w) * 0.795);
  background-image: url('../assets/images/dog-sprite.png');
  background-repeat: no-repeat;
  /* 8 frames wide: the sheet is scaled to 8x the element width, then
     shifted one element-width per frame by JS. */
  background-size: 800% 100%;
  background-position: 0 0;
}
/* No JS / reduced motion: park the dog mid-scene on a single pose
   instead of leaving it stranded off-screen. */
@media (prefers-reduced-motion: reduce) {
  .dog-walk { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .section--dog-scene { padding-bottom: 44px; }
  .dog-scene { height: 66px; }
  .dog-walk { --dog-w: 65px; }
}

/* =========================== 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-bottom: 2px solid #444F2C;
  background: var(--surface);
  color: var(--nav-text);
}
.site-footer .script {
  font-size: 38px;
  color: var(--nav-text);
  margin-bottom: 20px;
}
.site-footer__mark { display: inline-block; }
.site-footer__monogram { width: 96px; height: auto; margin-bottom: 2px; }
.site-footer .eyebrow { margin-top: 2px; font-size: 16px; color: var(--nav-text); }
.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(--nav-text);
  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);
    color: var(--nav-text);
    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(--nav-text);
    cursor: pointer;
    padding: 8px;
  }
  .site-nav__panel-title {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--nav-text);
  }
  .site-nav__panel-sub {
    display: block;
    margin-top: 4px;
    font-style: italic;
    letter-spacing: 0.28em;
    font-size: 14px;
    color: var(--nav-text);
  }
  .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(--nav-text); }
}


@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(--green-deep);
  }

  .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__card { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
  .hero-simple__names { font-size: 10.5vw; }
  .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__vine-v { width: 24px; background-size: 24px auto; }
  .schedule-frame__vine-h { left: 24px; right: 24px; height: 22px; background-size: auto 22px; }
  .schedule-frame--floral { padding: 44px 48px; }
  .schedule-frame--floral::after { inset: 30px 30px; }
  .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: 6px 0 44px; }                           /* 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: 8px; }

  /* #2 (round 4) — smaller top butterfly on mobile */
  .butterfly--fly { width: 20px; height: 17px; }
}

/* =========================== 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; }
}

/* =========================== BUTTERFLIES (Karly & Beau) ===========================
   Two butterflies drift across the hero on independent flight paths built
   from the client's real butterfly crops. Both use the separate
   `scale`/`translate`/`rotate` CSS properties (not the `transform`
   shorthand) so the flutter and flight-path animations run at once without
   one overwriting the other. Drop the markup into any section with
   position:relative + overflow:hidden (already wired into .hero-simple). */

.butterfly-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.butterfly--fly {
  position: absolute;
  top: 22%;
  left: -46px;
  width: 36px;
  height: 31px;
  rotate: 35deg;
  background-image: url('../assets/images/butterfly/flying.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath 17s ease-in-out infinite,
             butterfly-flutter 0.42s ease-in-out infinite;
}
.butterfly--fly-b {
  position: absolute;
  top: 30%;
  left: -40px;
  width: 28px;
  height: 25px;
  rotate: -18deg;
  background-image: url('../assets/images/butterfly/accent-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(69, 77, 48, 0.14));
  animation: butterfly-flightpath-b 14s ease-in-out infinite 2.4s,
             butterfly-flutter 0.36s ease-in-out infinite;
}

@keyframes butterfly-flutter {
  0%, 100% { scale: 1 1; }
  50%      { scale: 0.55 1; }
}
@keyframes butterfly-flightpath {
  0%   { translate: 0 0;       rotate: 29deg; }
  18%  { translate: 20vw -22px; rotate: 40deg; }
  36%  { translate: 42vw 14px;  rotate: 26deg; }
  54%  { translate: 64vw -16px; rotate: 41deg; }
  72%  { translate: 84vw 10px;  rotate: 30deg; }
  100% { translate: 112vw -12px; rotate: 38deg; }
}
@keyframes butterfly-flightpath-b {
  0%   { translate: 0 0;        rotate: -22deg; }
  22%  { translate: 24vw 18px;  rotate: -12deg; }
  44%  { translate: 46vw -14px; rotate: -26deg; }
  66%  { translate: 70vw 16px;  rotate: -14deg; }
  100% { translate: 112vw -8px; rotate: -20deg; }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly--fly,
  .butterfly--fly-b {
    animation: none;
  }
  .butterfly--fly { left: 20%; }
  .butterfly--fly-b { left: 45%; }
}

@media (max-width: 760px) {
  .butterfly--fly { width: 20px; height: 17px; }
  .butterfly--fly-b { width: 20px; height: 18px; }
}

/* =========================== 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; }
}

/* =========================== TEMP PREVIEW — Details page text color test ===
   Hailey asked to preview an all-text color change on the Details page only
   before deciding whether to roll it out site-wide. Nav, footer, and button
   text are excluded so they keep matching the rest of the site. Remove this
   block (and the "page-details" body class in src/pages/details.ejs) once
   decided. */
body.page-details :not(.site-nav):not(.site-nav *):not(.site-footer):not(.site-footer *):not(.btn):not(.btn *):not(.accent-rose):not(.accent-rose *):not(.accent-maroon):not(.accent-maroon *) {
  color: #667551 !important;
}
/* Elements deliberately set in the rose accent (per client spec) —
   excluded from the blanket green rule above. */
.accent-rose,
.accent-rose * {
  color: #AC475A;
}
.accent-maroon,
.accent-maroon * {
  color: #741022;
}

/* =========================================================================
   INNER PAGES — LAYOUT PORTED FROM RACHEL & MATTHEW, RECOLORED FOR KENNEDY
   -------------------------------------------------------------------------
   Applies ONLY to Details, Travel, Gallery, Registry, and FAQ. The home
   page (hero-simple, section--wash, section--photo-pair, highlights-cta)
   is intentionally untouched. Because this block is last in the file, it
   overrides the older inner-page rules above at equal specificity.

   Color rules:
     - floral pattern band ....... floralbackground.png
     - section fills (was blue) .. #D5DDB4
     - section/frame strokes ..... #96A878
     - script font ............... Face of Yesterday
     - page titles ............... #444F2C
     - text on pure white ........ #859257
     - text on colored bg ........ #444F2C
   ========================================================================= */

/* ---- Face of Yesterday drives every script heading on the inner pages --- */
.details-hero__title.script,
.travel-hero__title.script,
.gallery-hero__title.script,
.registry-hero__title.script,
.faq-hero__title.script,
.schedule-group__title.script,
.schedule-card__title.script,
.travel-frame__title.script,
.faq-closing__names.script {
  font-family: 'FaceOfYesterday', var(--font-display);
}

/* ---- Patterned band + shared frame boxes -------------------------------- */
.page-band {
  background-image: url('../assets/images/floralbackground.png');
  background-repeat: repeat;
  background-position: center top;
}
.frame-box {
  background: #FFFFFF;
  border: 11px solid #96A878;
  text-align: center;
}
.page-title-card {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px);
  border-width: 11px;
  border-color: #96A878;
}
.pattern-divider {
  height: clamp(90px, 12vw, 150px);
  background-image: url('../assets/images/floralbackground.png');
  background-repeat: repeat;
  background-position: center center;
}

/* ---- Page hero (Details / Travel / Gallery / Registry / FAQ) ------------- */
.details-hero,
.travel-hero,
.gallery-hero,
.registry-hero,
.faq-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 8vh, 96px) var(--gutter);
  overflow: hidden;
}
/* Page titles — always #444F2C (per spec, even on the white title card). */
.details-hero__title,
.travel-hero__title,
.gallery-hero__title,
.registry-hero__title,
.faq-hero__title {
  font-size: 68px;
  color: #444F2C;
  line-height: 1.05;
}

/* ---- Details: schedule bands ------------------------------------------- */
.section--schedule { padding: 90px var(--gutter); }
.section--schedule-1 {
  background: #D5DDB4;
  border-top: 20px solid #96A878;
  padding-bottom: 40px;
}
.section--schedule-2 {
  background: #D5DDB4;
  border-bottom: 20px solid #96A878;
  padding-top: 40px;
}
.schedule-group {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
/* Text directly on the #D5DDB4 band → #444F2C */
.schedule-group__title {
  font-size: 56px;
  color: #444F2C;
  line-height: 1.05;
}
.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: #444F2C;
}
.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;
}
/* Cards are pure white → text #859257, stroke #96A878 */
.schedule-card {
  width: 380px;
  max-width: 100%;
  padding: 44px 32px;
  background: #FFFFFF;
  border: 5px solid #96A878;
  text-align: center;
  position: static;   /* clears the old framed/floral-corner treatment */
}
.schedule-card__title {
  font-size: 44px;
  color: #859257;
  line-height: 1.05;
}
.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: #859257;
  line-height: 1.4;
}
.schedule-card__addr {
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: #859257;
  line-height: 1.6;
}
.schedule-card__line {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: #859257;
  line-height: 1.6;
}

/* ---- Travel frame ------------------------------------------------------- */
.section--travel-frame {
  background: #D5DDB4;
  padding: 80px var(--gutter);
}
.travel-frame {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) clamp(32px, 6vw, 64px);
  background: #FFFFFF;
  border: 7px solid #96A878;
  text-align: center;
}
.travel-frame__title {
  font-size: 56px;
  color: #859257;
  line-height: 1.05;
}
.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__addr {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: #859257;
}
.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__faq-cta { text-align: center; margin-top: 56px; }
.travel-frame__text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: #859257;
}

/* ---- Gallery grid ------------------------------------------------------- */
.section--highlights--gallery {
  background: #D5DDB4;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section--highlights--gallery .highlights-grid {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(14px, 1.6vw, 20px);
  background: #FFFFFF;
  border: 7px solid #96A878;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section--highlights--gallery .highlights-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  height: 400px;
}
.section--highlights--gallery .highlights-row--tall { height: 560px; }
.section--highlights--gallery .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);
}

/* ---- FAQ ---------------------------------------------------------------- */
.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: #444F2C;   /* on the #D5DDB4 band */
  text-align: center;
}
.section--faq-frame {
  background: #D5DDB4;
  border-top: 20px solid #96A878;
  border-bottom: 20px solid #96A878;
  padding: 80px var(--gutter);
}
.faq-frame {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 44px) clamp(32px, 6vw, 64px);
  background: #FFFFFF;
  border: 7px solid #96A878;
  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: #859257;   /* on white */
}
.faq-frame__answer {
  margin-top: -16px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: #859257;   /* on white */
}
/* Closing sign-off — framed card on the floral band. */
.section--faq-closing {
  padding: clamp(56px, 8vh, 96px) var(--gutter);
  text-align: center;
}
.faq-closing-card {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 5vw, 56px);
  border-width: 10px;
  border-color: #96A878;
}
/* Closing card is pure white → text #859257 */
.faq-closing__heading {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: #859257;
}
.faq-closing__signoff {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: italic;
  text-transform: lowercase;
  font-size: 24px;
  color: #859257;
}
.faq-closing__names {
  margin-top: 10px;
  font-size: 40px;
  color: #859257;
  line-height: 1.05;
}

/* ---- Registry ----------------------------------------------------------- */
.section--registry-frame {
  background: #D5DDB4;
  border-top: 20px solid #96A878;
  border-bottom: 20px solid #96A878;
  padding: 40px 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: #444F2C;   /* on the #D5DDB4 band */
  text-align: center;
}
.registry-boxes {
  max-width: 1160px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  column-gap: 32px;
  row-gap: 48px;
}
/* Store boxes are pure white → text #859257, stroke #96A878 */
.registry-box {
  width: 340px;
  height: 400px;
  padding: 24px 20px;
  background: #FFFFFF;
  border: 5px solid #96A878;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.registry-box--bottom { }
.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: #859257;
}
.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: #859257;
}
.registry-box__coming-soon {
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: #859257;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 760px) {
  .page-title-card { padding: 24px 20px; border-width: 6px; }
  .details-hero__title,
  .travel-hero__title,
  .gallery-hero__title,
  .registry-hero__title,
  .faq-hero__title { font-size: 42px; }

  .schedule-group__title { font-size: 40px; }
  .schedule-group__date { font-size: 15px; }
  .schedule-cards { margin-top: 32px; gap: 20px; }
  .schedule-card { width: min(340px, 88%); flex: 0 0 auto; padding: 32px 24px 22px; }
  .schedule-card__title { font-size: 36px; }
  .schedule-card__venue { font-size: 16px; }
  .section--schedule-1 { padding-top: 40px; }
  .section--schedule-2 { padding-bottom: 44px; }

  .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; }
  .travel-frame__faq-cta { margin-top: 40px; }

  .section--highlights--gallery .highlights-grid { gap: 6px; }
  .section--highlights--gallery .highlights-row { gap: 6px; height: 190px; }
  .section--highlights--gallery .highlights-row--tall { height: 260px; }

  .faq-frame__intro { font-size: 18px; margin-bottom: 28px; }
  .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; }
  .faq-closing__heading { font-size: 20px; }
  .faq-closing__signoff { font-size: 19px; }
  .faq-closing__names { font-size: 34px; }

  .registry-note { font-size: 18px; }
  .section--registry-frame { padding-top: 24px; }
  .registry-boxes { margin-top: 32px; column-gap: 20px; row-gap: 20px; flex-wrap: wrap; }
  .registry-box { width: 100%; max-width: 340px; height: auto; min-height: 300px; }
}