/* ─────────────────────────────────────────
   TEXT STYLES
   The brand's named text styles (see the Storybook → Brand → Typography).
   Each style lists the site elements that use it, so a heading's look is
   set in ONE place. Section and component files only add layout and colour
   (margins, display, colour) — never font family, size, weight, line-height
   or letter-spacing for these elements.
   New markup can use the .ts-* class directly instead of adding a selector.

   All 10 styles are migrated: Display, H1, H2, H3, Lead, Body, Small,
   Eyebrow, Label, Handwritten + the Ampersand and Aside modifiers.
───────────────────────────────────────── */

/* Display — the couple's names */
.ts-display,
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* Heading 1 — section headings */
.story-ending-num,
.ts-h1,
.rsvp-photo-title,
.rsvp-done-title,
.rsvp-count-num,
.menu-overlay .mobile-menu-link,
.story-header-title,
.script-heading,
.programme-num {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* Heading 2 — the name of a thing: venue, stay, day; full-screen menu links */
.ts-h2,
.rsvp-form-title,
.gifts-envelope-title,
.story-title,
.programme-place,
.venue-name,
.stay-card-title,
.plan-day-title,
.mobile-menu-link {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* Heading 3 — questions and small titles */
.ts-h3,
.rsvp-person-title,
.rsvp-option--card .rsvp-option-sub,
.story-tick-label,
.dresscode-title,
.programme-title,
.faq-q {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

/* Modifier — Script ampersand inside the names */
.ts-amp,
.hero-amp {
  font-family: var(--font-script);
  font-size: 0.6em;
}

/* ── Grotesk voice: explaining ─────────────────────── */

/* Lead — the hero date and eyebrow, the coupon code */
.menu-overlay-num,
.ts-lead,
.eyebrow.hero-eyebrow,   /* the hero eyebrow also carries .eyebrow — Lead wins */
.hero-date,
.stay-code-value {
  font-family: var(--font-mono);
  font-size: var(--text-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: none;
}

/* Lead exception — the coupon code is set tight; at the Lead's wide
   tracking "SILVIA&STIAN" pushes the card off the screen on phones */
.stay-code-value {
  letter-spacing: var(--tracking-code);
}

/* Body — all running text and form fields (16px on phones, so iOS never zooms in).
   Descendant selectors use :where() so they stay as weak as a single class:
   a label or eyebrow inside a paragraph block then still gets its own style. */
.ts-body,
.rsvp-input,
.rsvp-option-text,
.rsvp-photo-sub,
.rsvp-done-text,
.rsvp-done-list :where(li),
.gifts-text,
.gifts-acct :where(dd),
.story-text,
.story-ending-text,
.travel-lede,
.travel-stop-note,
.travel-alt-steps :where(li),
.welcome-col,
.programme-intro,
.programme-event :where(p),
.story-teaser-text :where(p),
.plan-day-body,
.venue-text :where(p),
.stay-card-body,
.stay-fact :where(dd),
.travel-steps :where(li),
.dresscode-intro,
.dresscode-list :where(li),
.dresscode-rules-list :where(li),
.faq-a :where(p),
.rsvp-sub,
.radio-label,
.checkbox-label,
.form-success,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

/* Small — notes and captions */
.ts-small,
.rsvp-note,
.rsvp-errors,
.rsvp-optional,
.gifts-envelope-sub,
.gifts-panel-note,
.gifts-status,
.stay-card-note,
.form-note,
.faq-a .faq-todo,
.footer-count-sub,
.travel-note {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

/* Eyebrow — the topic above a heading */
.ts-eyebrow,
.menu-overlay-date,
.story-date,
.eyebrow,
.programme-weekday,
.plan-day-label {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Label — buttons, tabs, links, form labels, tiny tags, locations under a title */
.ts-label,
.rsvp-label,
.rsvp-send,
.rsvp-add,
.rsvp-remove,
.rsvp-option--card .rsvp-option-text,
.gifts-hint,
.gifts-back-btn,
.gifts-acct :where(dt),
.gifts-copy,
.story-tick-year,
.travel-alt-label,
.stay-card-location,
.programme-time,
.programme-tbc,
.programme-move-label,
.venue-location,
.btn,
.btn-submit,
.text-link,
.venue-tab,
.chip,
.venue-map-link,
.stay-card-label,
.stay-card-link,
.stay-code-label,
.stay-code-copy,
.stay-fact :where(dt),
.form-field label:not(.radio-label):not(.checkbox-label),
.lightbox-hint,
.dresscode-rules-label,
.dresscode-who,
.footer-col-title,
.footer-meta,
.footer-date {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
}

/* ── Handwritten voice: talking ────────────────────── */

/* Handwritten — the signature, short notes, the countdown label.
   Zeyada is only ever used at this size or larger when it stands alone. */
.ts-hand,
.rsvp-count-label,
.rsvp-done-hand,
.gifts-note,
.menu-overlay-sections a,
.story-ending-label,
.signature,
.programme-note,
.rsvp-prompt-note,
.footer-count-label,
.dresscode-note {
  font-family: var(--font-hand);
  font-size: var(--text-hand);
  font-weight: var(--weight-regular);
  line-height: var(--leading-hand);
}

/* Modifier — (bracketed) words inside other text. js/script.js wraps any
   "(…)" in .parenthetical. Set 1.3× the surrounding text so the thin
   handwriting reads at the same weight as the sentence around it. */
.ts-aside,
.parenthetical {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 1.3em;
  line-height: 1;
}

/* Optical centring for the wide-tracked styles — letter-spacing also adds a
   gap after the LAST letter, which pushes centred text to the left. Adding
   the same gap before the first letter puts it back in the middle.
   Only for centred Lead/Eyebrow text; left-aligned text doesn't need it. */
.section-header.center .eyebrow,
.hero-eyebrow,
.hero-date {
  padding-inline-start: var(--tracking-caps);
}