/* ==========================================================
   TYPOGRAPHY UPDATE 13.1.1
   Main display headings: Eagle Horizon
   Secondary / editorial headings: Wonderia
   All remaining text: Friendly Sans
   ========================================================== */

@font-face{
  font-family:"Eagle Horizon";
  src:local("Eagle Horizon-Personal use"),
      local("EagleHorizonPersonaluse"),
      url("assets/fonts/EagleHorizonP.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Wonderia";
  src:local("Wonderia"),
      url("assets/fonts/Wonderia.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Friendly Sans";
  src:url("assets/fonts/FriendlySans-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Friendly Sans";
  src:url("assets/fonts/FriendlySans-Italic.ttf") format("truetype");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}

:root{
  --display:"Eagle Horizon", "Allura", cursive;
  --subheading:"Wonderia", "Italiana", "Times New Roman", serif;
  --body:"Friendly Sans", Arial, sans-serif;
  /* Legacy variables are redirected so every non-heading text style
     across the original site inherits Friendly Sans automatically. */
  --serif:var(--body);
  --sans:var(--body);
}

/* All non-heading text across the experience */
html,body,button,input,select,textarea{
  font-family:var(--body);
  font-weight:400;
}

/* Explicitly override component-level font declarations from the
   original styles so supporting copy stays consistently Friendly Sans. */
p,
small,
label,
input,
select,
textarea,
button,
.nav-links a,
.mobile-menu nav a span,
.text-link,
.creator-link,
.hero-overline,
.hero-details,
.hero-side,
.story-kicker,
.event-row p,
.venue-copy small,
.dress-copy p,
.rsvp-step-choice p,
.field input,
.field textarea,
.field select,
.finale-copy p,
.gallery-exit-note span,
.gallery-exit-note small{
  font-family:var(--body)!important;
  font-weight:400!important;
}



/* Catch remaining supporting/UI text that may be styled directly in older sheets.
   Main and subheading selectors below remain more specific and use !important. */
body :where(a, span, li, dt, dd, time, address, figcaption, caption, option){
  font-family:var(--body);
}

/* Main display headlines — Eagle Horizon */
h1,
h2,
.hero-name,
.gate-copy strong,
.env-letter strong,
.story-paper-teaser strong,
.day-gallery-teaser strong,
.gallery-exit-note strong,
.mobile-exit-copy strong,
.finale-opening-copy>strong,
.finale-end-title>strong,
.closing-names,
#closingNames,
#paperSignature{
  font-family:var(--display)!important;
  font-style:normal;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1.06!important;
}

/* Eagle Horizon is a connected script face: keep existing emphasis spans
   in the same family instead of switching back to the previous serif. */
h1 em,
h2 em,
h2 span,
.hero-name em,
.gate-copy strong em,
.env-letter strong em,
.gallery-exit-note strong em,
.finale-opening-copy>strong em,
.finale-opening-copy>strong b,
.finale-end-title>strong em,
.finale-end-title>strong b,
#creatorCredits .creator-message h2 span,
#creatorCredits .creator-message h2 em{
  font-family:var(--display)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

/* Secondary headings / decorative serif typography */
h3,
h4,
.prelude-initial,
.brand-mark,
.mobile-menu-head span,
.story-copy-card strong,
.proposal-note strong,
.event-row strong,
.event-row h3,
.venue-copy strong,
.dress-copy strong,
.rsvp-response-heading,
.rsvp-response-heading strong,
.finale-copy strong,
.creator-eyebrow{
  font-family:var(--subheading)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1.12!important;
}

/* Script-specific optical tuning. Keep the original responsive scale,
   but add breathing room so long strokes do not collide or crop. */
.hero-names,
.invite-paper,
.story-copy,
.day-heading,
.venue-copy,
.dress-copy,
.gallery-intro,
.rsvp-paper,
.finale-opening-copy,
.finale-copy,
.finale-end-title,
.creator-message{
  overflow:visible;
}

.hero-name,
.invite-paper h2,
.story-copy h2,
.day-heading h2,
.venue-copy h2,
.dress-copy h2,
.gallery-intro h2,
.rsvp-step-choice h2,
.rsvp-form-head h2,
.finale-copy h2,
.creator-message h2{
  text-wrap:balance;
}

@media (max-width:760px){
  h1,h2,.hero-name,.gate-copy strong,.env-letter strong,
  .gallery-exit-note strong,.mobile-exit-copy strong,
  .finale-opening-copy>strong,.finale-end-title>strong,
  .closing-names,#closingNames,#paperSignature{
    line-height:1.08!important;
  }
}


/* ============================================================
   13.1.0 — WEBXCODE SHOWCASE TYPOGRAPHY
   The closing showcase statement is intentionally set in the
   normal site typeface rather than Eagle Horizon.
   ============================================================ */
#creatorCredits .creator-message h2,
#creatorCredits .creator-message h2 span,
#creatorCredits .creator-message h2 em{
  font-family:var(--body)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
}



/* 13.1.1 — showcase eyebrow uses the normal UI face. */
#creatorCredits .creator-eyebrow{
  font-family:var(--body)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:.15em!important;
}