/* The type system, 2026-09-20. Loaded last so these roles win over the per-section weights and
   tracking that were written for Archivo. Two families, three roles:
     display  Playfair Display 500, every h1 and h2. The second part of a headline is the turn:
              italic, carrying the brand gradient. Levi chose this from the Base44 reference.
     mid      Playfair Display 500, h3 and anything that acts as a subhead.
     text     Archivo, paragraphs, buttons, labels. Unchanged; lives in base.css and pages.css.
   Archivo width-axis settings are cleared here because Playfair has no width axis. */

h1, h2, .h2, .hero-title, .experiment h2, .close-copy .h2, .start-campaign .start-h,
html .interior h1, html .interior h2, html .page-cta--big h2, html .comparison-intro h2 {
  font-family: var(--display); font-weight: 500; font-variation-settings: normal;
  letter-spacing: -0.012em; line-height: 1.06;
}
.hero-title .l1, .hero-title .l2 { font-weight: 500; font-variation-settings: normal; letter-spacing: -0.012em; }

h3, .h3, .hcard-title, .hero-title .l3,
html .interior h3, html .phase-intro h3, html .approach h3,
html .preparation dt, html .responsibilities dt, html .paid dt, html .parts dt, html .calculator legend {
  font-family: var(--display); font-weight: 500; font-variation-settings: normal; letter-spacing: -0.005em;
  line-height: 1.25; /* 2026-09-21: the mid tier inherited the body's 1.5, so a wrapped card title sat looser than its own copy */
}
/* Playfair sits smaller on the line than Archivo at the same size, so the mid tier gets a nudge up. */
.h3, html .interior h3, html .parts dt, html .preparation dt, html .paid dt { font-size: 1.3rem; }
.receive-list .h3, .book-lists .h3, .close-lists .h3, .rlist .h3, .learn-panel a .h3 { font-size: 1.15rem; }

/* The turn. Roman first part, italic gradient second part. width: max-content so the gradient sweeps
   the text, not the column; max-width so a long turn still wraps. */
.h2 .land, .interior h1 .land, .interior h2 .land, .hero-title .l3, .experiment h2 span {
  display: block; width: max-content; max-width: 100%;
  font-style: italic; font-weight: 500; font-variation-settings: normal;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.06em; /* italic overhang, so the last letter is not clipped */
}
.experiment h2 span { padding-left: 0; }
.h2 .muted { color: var(--ink); }
.closing .h2 .muted, .closing .h2 .land { color: var(--cream); }
.closing .h2 .land { background: linear-gradient(92deg, #a78bfa 0%, #f06595 46%, #fdba74 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Ghost words behind chapters: the outline serif, now Playfair. Keep them quiet. */
.ghost { font-weight: 400; }
/* The wordmark is a logo, not a headline. It keeps the grotesk. */
.brand-word { font-family: var(--sans); }

/* Gate 7 (2026-10-04): 13px type floor on phones. The audit found text styles at 11.5 to 12.8px.
   --t-mono carries every .meta, panel dt and flow label; since 2026-10-05 (Apple audit gate 2) it is
   13px on every screen in tokens.css, so it needs no override here. The literal .8rem and .78rem
   styles are listed below. :root adds one class of specificity so these win over pages.css, which
   loads after this file. Tracking on the labels drops to .02em and they read in sentence case
   (the audit's finding 13). */
@media (max-width: 859px) {
  :root .meta, :root .reach-label { text-transform: none; letter-spacing: .02em; }
  :root .eyebrow, :root .panel-eyebrow, :root .reach-eyebrow, :root .reach-fine, :root .status-note,
  :root .join-num, :root .phase-chain, :root .phase-step-num, :root .step-cards > li > span,
  :root .join-pending, :root .marker span, :root .nav-toggle, :root .reach-label,
  :root .viz-cap, :root .viz-label, :root .viz-pair span, :root .flow-gate small,
  :root .time-direction, :root .mechanism-key { font-size: .8125rem; }
  :root .release-timeline li::before { font-size: .8125rem; }
  :root .site-nav .btn, :root .site-nav .nav-right .btn, :root .interior .site-nav .btn { font-size: .8125rem; }
  :root .opening-controls button { font-size: .8125rem; }
  :root .interior .interp h3 { font-size: .8125rem; text-transform: none; letter-spacing: .02em; }
  :root .hero-answer, :root .section-lead { line-height: var(--lh-body); }
}