/* =========================================================
   SMALL TOWN MAHJ — TYPOGRAPHY SYSTEM
   Cormorant Garamond is the editorial voice, Alex Brush is the
   restrained handwritten accent, and Montserrat is reserved for
   compact utility/navigation text where clarity matters most.
   ========================================================= */

:root {
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --script: "Alex Brush", "Brush Script MT", cursive;
  --utility: Montserrat, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Editorial display voice across every page. Existing components already use
   --serif extensively, so this updates the whole system without restyling each page. */
.display,
h1,
h2,
h3,
.wordmark,
.hero__notes span,
.promise-band p,
.gathering-row__number,
.photo-tile figcaption,
.mahjong-step__number,
.porcelain-ledger li > span,
.content-tile__botanical,
.invitation-flower,
.tile-symbol {
  font-family: var(--serif) !important;
}

/* Montserrat is the third font, used only for small structured UI copy. */
.eyebrow,
.tile-kicker,
.button,
.header-book-tile,
.site-header.mat-header .site-nav .rack-tile,
.nav-toggle__label,
.site-footer__nav,
.text-link,
.field-link,
.tile-text-link,
.photo-tile__label,
.porcelain-ledger strong,
label,
input,
select,
textarea,
button {
  font-family: var(--utility) !important;
}

/* Alex Brush stays special. Keep it close to the surrounding editorial scale
   so it reads as a graceful handwritten accent rather than an oversized display. */
.home-piece--signoff p,
.promise-band p,
.site-footer__bottom > span:last-child {
  font-family: var(--script) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.home-piece--signoff p {
  font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
  line-height: 1.12 !important;
}

.promise-band p {
  font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

.site-footer__bottom > span:last-child {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem) !important;
  line-height: 1.1 !important;
}

.site-footer__credit,
.site-footer__credit a {
  font-family: var(--utility) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Cormorant can carry slightly softer spacing than the former system serif. */
h1,
h2,
h3,
.display {
  letter-spacing: -.025em;
}

@media (max-width: 680px) {
  .home-piece--signoff p {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
  }

  .promise-band p {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .site-footer__bottom > span:last-child {
    font-size: 1.05rem !important;
  }
}
/* Keep the tile navigation and footer labels legible at compact desktop widths. */
.site-nav .rack-tile,
.header-book-tile,
.site-footer__nav a {
  font-size: .75rem;
}

@media (max-width: 980px) {
  .site-header.mat-header .site-nav .rack-tile,
  .site-header.mat-header .site-nav .rack-tile:hover,
  .site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
    min-height: 48px !important;
    font-size: .75rem !important;
  }
}

@media (max-width: 680px) {
  .site-footer__nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}