/*!
 * GPMH typography — Apple-like system stacks (no licensed SF/New York files).
 *
 * Roles:
 *   --font-display  SF Pro Display — titles / large type
 *   --font-text     SF Pro Text — body + UI
 *   --font-rounded  SF Pro Rounded — friendlier CTAs / chips
 *   --font-serif    New York — editorial / manifesto / quotes
 *
 * Tracking is tighter than browser defaults (Apple-like, not crushed).
 */
:root {
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-rounded: "SF Pro Rounded", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "New York", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Back-compat alias used across inline page CSS */
  --font: var(--font-text);

  --tracking-display: -0.035em;
  --tracking-display-lg: -0.055em;
  --tracking-display-xl: -0.072em;
  --tracking-body: -0.015em;
  --tracking-ui: -0.01em;
  --tracking-caps: 0.06em;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-text);
  letter-spacing: var(--tracking-body);
}

/* ——— Display: titles & large text ——— */
h1,
h2,
h3,
.h1,
.h2,
.h3,
.statement,
.bc-headline,
.bc-bridge-line,
.conc-title,
.pc-title,
.pc-hook,
.pc-closer,
.story-reel-line,
.umbrella-body h3,
.menu-overlay a,
.menu-overlay .site-nav a,
.foot-nav .site-nav a,
.mit-card h3,
.mit-loop-title,
.team-info h3,
.modal-card h3,
.chap-mark b,
.journey-combo,
.strip-caption,
.reel-paper-title,
.method-title,
.method-slot-title,
.method-detail-title,
.method-pillar-bg-text,
.hero-follow .h1 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display-lg);
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* MIT series cards — keep titles intact beside QR on tablet widths */
.mit-item-title {
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Pillar names sit between UI and hero display — slightly less crushed */
.method-slot-title {
  letter-spacing: var(--tracking-display);
}

.h1,
.hero-follow .h1,
.statement,
.mit-loop-title,
.chap-mark b {
  letter-spacing: var(--tracking-display-xl);
}

.h2,
.h3,
.bc-headline,
.bc-bridge-line,
.conc-title,
.pc-title {
  letter-spacing: var(--tracking-display);
}

/* ——— Text: body / leads / UI copy ——— */
p,
.lead,
.small,
.hero .lead,
.hero-follow .lead,
.method-lead,
body,
input,
textarea,
select,
button {
  font-family: var(--font-text);
}

.lead,
.small,
.hero .lead,
.hero-follow .lead,
.method-lead {
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ——— Rounded: friendlier interactive surfaces ——— */
.btn,
.wa,
.menu-wa,
.cta-specialists,
.back,
.home-link,
.tag,
.lang button,
.menu-toggle,
.menu-close,
.nav-cta .wa,
.form input,
.form button {
  font-family: var(--font-rounded);
  letter-spacing: var(--tracking-ui);
}

/* Uppercase labels: slight positive tracking (tighter than old .14–.28em) */
.eyebrow,
.kicker,
.navlinks a:not(.wa),
.scroll-cue,
.journey-scroll-cue,
.section-index,
.nr1-strip-top,
.nr1-strip-cta,
.roster-row .roster-area,
.team-band-track,
.team-info small,
.mit-pause,
.reel-paper-eyebrow,
.manifesto-book-caption,
.cn-kicker,
.skip-link,
.lang button,
.btn,
.wa,
.menu-toggle {
  letter-spacing: var(--tracking-caps) !important;
}

.eyebrow,
.kicker,
.navlinks a:not(.wa),
.scroll-cue,
.journey-scroll-cue,
.section-index,
.cn-kicker,
.skip-link {
  font-family: var(--font-text);
}

/* ——— Serif: editorial / manifesto / quotes ——— */
.quote,
blockquote,
.pull,
.manifesto .lead,
.manifesto-book-caption,
.manifesto-grid .h2,
.manifesto-grid .lead,
[data-i18n="manifestoTitle"],
[data-i18n="manifestoSub"],
[data-i18n="manifestoBody"],
.academic-strip + .lead,
.mit-card .lead,
.method-slot-verb,
.method-detail-verb,
.method-detail-quote {
  font-family: var(--font-serif);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.quote,
blockquote,
.pull,
.method-slot-verb,
.method-detail-verb,
.method-detail-quote {
  font-style: italic;
}

/* QR captions — quiet editorial whisper under the code */
.qr-caption,
.reel-source-qr .qr-caption,
.mit-item-qr .qr-caption,
.reel-paper-qr .qr-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Multilingual safety — prefer soft wraps over forced line breaks */
.br-soft br {
  display: none;
}

@media (min-width: 760px) {
  .br-soft br {
    display: inline;
  }
}

/* Never force awkward breaks from i18n <br> on narrow viewports */
@media (max-width: 900px) {
  br.br-force,
  .h1 br,
  .h2 br,
  .h3 br,
  .statement br,
  .story-reel-line br,
  .method-title br,
  .method-lead br,
  .conc-title br,
  .journey-combo br,
  .menu-overlay a br {
    display: none;
  }
}

/* Rose accents stay with their word — short needles only */
.purpose-glow,
.great-hot,
.devglow,
.kwx,
.hotline,
.pc-title em {
  white-space: nowrap;
}

.h1,
.h2,
.h3,
.statement,
.lead,
.pc-title,
.pc-hook,
.pc-closer,
.story-reel-line,
.method-title,
.method-lead,
.method-slot-title,
.method-detail-title,
.conc-title,
.journey-combo,
.menu-overlay a {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.h1,
.h2,
.h3,
.statement,
.story-reel-line,
.method-title,
.conc-title,
.pc-title {
  text-wrap: balance;
}

/* Multilingual: EN/ES often need a wider measure than PT editorial ch boxes */
html[lang="en-US"] .story-reel-line,
html[lang="es-MX"] .story-reel-line,
html[lang="en"] .story-reel-line,
html[lang="es"] .story-reel-line {
  max-width: min(100%, 20ch) !important;
}

html[lang="en-US"] .hero .lead,
html[lang="en-US"] .hero-follow .lead,
html[lang="es-MX"] .hero .lead,
html[lang="es-MX"] .hero-follow .lead,
html[lang="en"] .hero .lead,
html[lang="es"] .hero .lead {
  max-width: min(100%, 28ch) !important;
}

html[lang="en-US"] .method-title,
html[lang="es-MX"] .method-title,
html[lang="en"] .method-title,
html[lang="es"] .method-title,
html[lang="en-US"] .pc-hook,
html[lang="es-MX"] .pc-hook,
html[lang="en"] .pc-hook,
html[lang="es"] .pc-hook,
html[lang="en-US"] .pc-beat,
html[lang="es-MX"] .pc-beat {
  max-width: min(100%, 22ch) !important;
}

html[lang="en-US"] .menu-overlay a,
html[lang="es-MX"] .menu-overlay a,
html[lang="en"] .menu-overlay a,
html[lang="es"] .menu-overlay a {
  letter-spacing: -0.03em;
  line-height: 1.05;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Soften forced line breaks inside i18n HTML when viewport is narrow */
@media (max-width: 760px) {
  [data-i18n-html] br {
    display: none;
  }
}

/* Mobile: keep Apple-tight tracking without the old positive crush override */
@media (max-width: 700px) {
  h1,
  h2,
  h3,
  .h1,
  .h2,
  .h3,
  .statement,
  .bc-headline,
  .bc-bridge-line,
  .quote,
  .conc-title,
  .journey-combo,
  .pc-title,
  .pc-hook,
  .pc-closer,
  .story-reel-line,
  .umbrella-body h3,
  .menu-overlay a,
  .hero-follow .h1 {
    letter-spacing: -0.02em !important;
    line-height: 1.12;
  }

  .lead,
  .small,
  .hero .lead,
  .hero-follow .lead {
    letter-spacing: -0.012em;
    max-width: none;
  }
}