/*
 * Weddings by GOLD typography system
 * Playfair Display carries the editorial voice; Manrope carries every UI and
 * reading role. This file is loaded last so type roles stay consistent across
 * page-specific layout styles.
 */

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--leading-body);
  font-synthesis: none;
}

p,
li {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--type-h2);
  line-height: var(--leading-display);
}

h3 {
  font-size: var(--type-h3);
  line-height: var(--leading-heading);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.section-heading h1,
.section-heading h2,
.page-hero .section-heading h1,
.inquiry-hero h1,
.blog-hero__heading h1,
.blog-entry__header h1,
.compass-checkout__aside h1,
.compass-checkout-status h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.section-heading h2,
.final-cta__copy h2,
.home-experiences__intro h2,
.compass-origin__intro h2,
.resource-group__intro h2,
.planning-faq__intro h2,
.inquiry-body__aside h2,
.blog-compass-cta__copy h2 {
  font-size: var(--type-h2);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
}

.section-heading h1,
.section-heading h2,
.final-cta__copy h2 {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

/* The opening statement is the only content headline that uses the hero tier. */
.home-hero h1,
.home-hero--editorial h1 {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
}

.why-gold__statement-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2.3rem + 1.8vw, 3.75rem);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
}

.why-gold__intro h3,
.process-step h3,
.experience-index__title,
.review-card h3,
.resource-item h3,
.ceremony-experience h3,
.ceremony-consideration h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
}

/* Playfair Italic is the single restrained accent—there is no script face. */
h1 em,
h2 em,
h3 em,
.display-italic,
.brand-mark__by,
.page-intro__script,
.page-intro__word--by,
.home-hero h1 em,
.home-experiences__intro h2 em,
.why-gold__statement-title span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.copyright-mark {
  position: relative;
  top: -0.42em;
  font-size: 0.58em;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: baseline;
}

.home-hero h1 em {
  color: var(--warm-gold);
}

/* Labels and controls */
.eyebrow,
.home-hero__eyebrow,
.inquiry-hero__note,
.compass-hero__promise {
  color: var(--taupe);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.5;
  text-transform: none;
}

.desktop-nav__link,
.mobile-navigation li a {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.35;
}

.button,
.button--small,
.arrow-link,
.home-hero__actions .button,
.home-hero__actions .arrow-link,
.compass-feature__overlay-cta,
.compass-hero__overlay-cta {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.35;
}

/* This small CTA needs a dark text accent to maintain normal-text contrast. */
.home-hero__actions .button--dark {
  border-color: var(--taupe);
  background: var(--taupe);
}

.home-hero__actions .button--dark:hover {
  color: var(--ivory);
  border-color: var(--charcoal);
  background: var(--charcoal);
}

/* Reading copy */
.large-copy,
.section-heading__body,
.home-hero__body,
.final-cta__copy > p:not(.eyebrow),
.inquiry-hero__lede {
  max-width: var(--measure-copy);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--leading-body);
}

.why-gold__intro .large-copy {
  max-width: var(--measure-wide);
}

.faq-item__answer,
.compass-origin__body,
.blog-entry__body p,
.resource-item > div {
  max-width: var(--measure-copy);
}

.process-step p,
.experience-index__short,
.officiant-package li,
.compass-package li,
.ceremony-experience__summary,
.resource-item div p,
.resource-item__bullets li {
  font-family: var(--font-body);
  font-size: max(1rem, var(--type-small));
  font-weight: 400;
  line-height: 1.65;
}

/* Package names may be editorial; package explanations and details remain UI. */
.officiant-package__header .eyebrow,
.compass-package > .eyebrow {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  text-transform: none;
}

.officiant-package__price,
.officiant-service__price,
.compass-package__price,
.compass-checkout-package__price {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
}

.compass-package h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
}

/* Reviews are reading copy; only Carole's short pull quote is editorial. */
.review-card blockquote p,
.review-card--compact blockquote p,
.stories-hero__proof blockquote p {
  max-width: var(--measure-copy);
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--leading-body);
}

.review-card blockquote p,
.review-card--compact blockquote p {
  color: var(--muted-ink);
}

.meet-carole blockquote p {
  max-width: 42ch;
  font-family: var(--font-display);
  font-size: var(--type-lead);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.review-card__name,
.review-card__occasion,
.review-card__score,
.review-card__number,
.review-proof__rating,
.review-proof__summary span,
.stories-hero__proof figcaption {
  font-family: var(--font-body);
}

/* Forms and checkout controls stay readable at every viewport. */
.form-section legend,
.compass-checkout-form .form-section legend,
.compass-checkout-form__packages legend,
.form-alert h2,
.form-error-summary h2 {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  text-transform: none;
}

.form-label,
.compass-checkout-form .form-label {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: 600;
  letter-spacing: var(--tracking-ui);
  line-height: 1.45;
}

.form-control,
.compass-checkout-form .form-control {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.55;
}

.form-label__optional {
  font-size: var(--type-label);
}

.form-field__hint,
.form-field__error,
.inquiry-form__delivery-note,
.inquiry-form__status,
.compass-checkout-form__note,
.compass-checkout-package__tagline,
.schedule-preview__prompt p,
.schedule-preview figcaption {
  font-family: var(--font-body);
  font-size: var(--type-ui);
  line-height: 1.55;
}

.compass-checkout-form .form-section legend,
.compass-checkout-form__packages legend,
.compass-checkout-package__eyebrow {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.compass-checkout-form .form-section legend,
.compass-checkout-form__packages legend {
  text-transform: uppercase;
}

.compass-checkout-package__eyebrow {
  text-transform: none;
}

.inquiry-expectations li,
.compass-checkout__step-number,
.schedule-preview__prompt strong {
  font-family: var(--font-body);
  font-style: normal;
}

.inquiry-expectations li {
  font-size: 1rem;
  line-height: 1.6;
}

.schedule-preview__prompt strong {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Brand lockups use the display family without introducing another face. */
.brand-mark__name,
.page-intro__lockup {
  font-family: var(--font-display);
  font-weight: 500;
}

.brand-mark__by {
  color: var(--taupe);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  line-height: 1;
  transform: none;
}

.brand-mark--compact .brand-mark__by {
  font-size: 1.125rem;
}

.brand-mark--light .brand-mark__by {
  color: var(--champagne);
}

.site-footer .brand-mark__by {
  font-size: 1.25rem;
}

.page-intro__word--by {
  margin-right: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(0.35em);
}

.page-intro.is-running .page-intro__word--by {
  animation: intro-accent-word 950ms 700ms both cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer,
.site-footer__services,
.site-footer__contact,
.site-footer__nav a,
.site-footer__label,
.site-footer__base {
  font-family: var(--font-body);
}

.site-footer__services {
  max-width: 34ch;
  font-size: var(--type-body);
  font-style: normal;
  font-weight: 400;
  line-height: var(--leading-body);
}

.site-footer__nav a,
.site-footer__contact {
  font-size: 1rem;
  line-height: 1.65;
}

.site-footer__label,
.site-footer__base {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.site-footer__action h2 {
  font-family: var(--font-display);
  font-weight: 500;
}

.compass-hero__heading .section-heading__body {
  max-width: 32ch;
  color: var(--taupe);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@keyframes intro-accent-word {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 44rem) {
  .section-heading h1,
  .section-heading h2,
  .final-cta__copy h2 {
    margin-bottom: 1.25rem;
  }

  .brand-mark__by,
  .brand-mark--compact .brand-mark__by,
  .site-footer .brand-mark__by,
  .page-intro__word--by {
    font-size: 1rem;
  }
}