/* TLH type system
   Inter carries structure and information. No italics anywhere on the site
   (Lauchie, 2026-10-06): authored emphasis is Inter semibold, human voice is
   Inter regular. The rule at the end of this file enforces it. */
:root {
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

/* Page-local tokens are normalised here because the prototype's chapters
   pre-date the shared type system and still expose their own font variables. */
/* Literal stacks: about.css and cases.css define --font-ui from these
   variables, so pointing them back at --font-ui would create a cycle. */
.ab-page { --ab-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cs-page { --cs-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.talks-page {
  --t-sans: var(--font-ui);
  --t-serif: var(--font-ui);
}
.wd-page {
  --wd-sans: var(--font-ui);
  --wd-serif: var(--font-accent);
}
.tlh-opening {
  --op-sans: var(--font-ui);
  --op-serif: var(--font-ui);
}

/* Inter does the visible structural work, including the large inner-page
   openings. These selectors intentionally outrank legacy prototype rules. */
body :where(h1, h2, h3, h4, h5, h6),
.tlh-opening__title,
.tlh-opening__sub,
.talks-editorial-hero h2,
.home-page .what-index-coda figcaption h2,
.ab-timeline__head h2,
.ab-timeline__year,
.ab-timeline__card h3 {
  font-family: var(--font-display) !important;
  font-style: normal;
}

.tlh-opening__title { font-weight: 400; }

/* Selected emotional words: semibold, used sparingly in authored copy. */
.tlh-accent,
.statement em,
.hero-char.is-accent,
.wd-display em,
.wd-step__claim em,
.wd-row__title em,
.wd-quotes em,
.site-footer__intro h2 em,
.talks-editorial-hero__art em {
  font-family: var(--font-accent) !important;
  font-style: normal;
  font-weight: 600;
  font-optical-sizing: auto;
}

/* Human voice: regular weight for pull quotes and testimonials. */
.ab-story-one__quote p,
.cs-quote blockquote p,
.wd-quotes blockquote p,
.home-page .what-index-coda blockquote,
.home-impact-card-quote,
.impact-team-bridge__kicker {
  font-family: var(--font-accent) !important;
  font-style: normal;
  font-weight: 400;
  font-optical-sizing: auto;
}

/* Design Lab tweaks (2026-09-15). */
/* Homepage intro: both lines of "In Pursuit of Better." at regular weight,
   tracked in like "What we do" (-.04em). The +.01em in styles.css was set for
   Playfair and opens Inter up too far. */
.home-page #intro-title,
.home-page #intro-title > span {
  font-weight: 400;
  letter-spacing: -.04em;
}
.home-page #intro-title > span:first-child { font-size: 100px; }
/* "Real people. Real change." and the team heading stay on the UI sans. */
.home-page #home-impact-title,
.home-page #team-title {
  font-family: var(--font-ui, "Inter", Arial, sans-serif) !important;
}
/* The footer's "In pursuit of better." in Playfair. Not scoped to a page: it
   is the one shared footer, and it should not read differently from one page
   to the next. */
#footer-heading,
#footer-heading span,
#footer-heading em {
  font-family: "Playfair Display", Georgia, serif !important;
}
/* Our Impact footer directory in Inter, larger and more open. */
.cs-page .site-footer__directory {
  font-family: "Inter", var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
/* Our Impact: nav and footer buttons in Inter at 15px. */
.cs-page .tlh-nav__menu,
.cs-page .tlh-nav__actions .tlh-nav__cta,
.cs-page .site-footer__actions .site-footer__button {
  font-family: "Inter", var(--font-ui);
  font-size: 15px;
}
/* Who We Are: "The moment on the mountain." larger and slightly lower. */
.ab-page #ab-story-one-title {
  margin-top: 25px;
  font-size: 57px;
  translate: 0 7px;
}
/* On the desktop canvas the heading scales with it, so it holds the same
   proportion beside the photographs at laptop widths as it does at 1440. */
@media (min-width: 900px) {
  .ab-page #ab-story-one-title { font-size: min(57px, 3.96cqw); }
}
/* Footer "In pursuit of better." in Sora on every page. The accent rule above
   sets the em in the accent face with !important, so this has to match it. */
.site-footer__intro h2,
.site-footer__intro h2 span,
.site-footer__intro h2 em {
  font-family: "Sora", var(--font-ui) !important;
  font-style: normal;
  font-weight: 400;
}

/* Who We Are: Duncan's line on the mountain in Playfair, nudged to sit against
   the opening quote mark. It is a pull quote, so the accent-italic rule above
   claims it — this has to outrank that. */
.ab-page .ab-story-one__quote p {
  font-family: "Playfair Display", Georgia, serif !important;
  translate: -31px 16px;
}

/* Our Impact: FEATURED PROJECTS is Inter, like the page opening and the case
   studies (Hodge, 2026-10-20). Its Playfair override is gone, so it takes the
   shared heading face and the weight set in impact-stories.css. */
/* Who We Are: the opening statement in Inter. */
.ab-page .ab-intro__statement {
  font-family: var(--font-ui, "Inter", Arial, sans-serif) !important;
  font-weight: 400;
}

/* Homepage coda: the "challenge becomes belief" line in Inter. The human-voice
   rule above claims it for the accent face with !important, so this answers in
   kind. Its italic is left alone — only the face changes. */
.home-page .what-index-coda blockquote {
  font-family: var(--font-ui, "Inter", Arial, sans-serif) !important;
}

/* Who We Are: the three section headings at regular weight. */
.ab-page #ab-story-one-title,
.ab-page #ab-journey-title,
.ab-page #ab-beliefs-title {
  font-weight: 400;
}

/* Arrows are typography here, not emoji. U+2197 and U+2194 carry emoji
   presentation by default, so iOS rendered "Read the story ↗" with a blue
   glyph. The markup carries U+FE0E (text presentation) after each one; this
   covers browsers that support the property and any arrow added later without
   it. Scoped to the small inline marks, never to body copy. */
.home-impact-link span,
.home-impact-card-copy > a span,
.home-impact-hint span,
.impact-story__arrow,
.tlh-opening__cue span,
.site-footer__button i {
  font-variant-emoji: text;
}

/* Client request, 30 Sep: "In pursuit of better" in the same font as the rest
   of the text, upright. This overrides the Playfair and Sora rules above for
   the footer heading, and the italic accent rule for its em. */
#footer-heading,
#footer-heading span,
#footer-heading em {
  font-family: var(--font-ui, "Inter", Arial, sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
/* The belief quote beside the signature in Playfair, sentence case (client
   request, 30 Sep). It is an h2, so the global heading rule above claims it
   with !important and this has to answer in kind. */
.home-page .divider__statement {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400;
}

/* No italic text anywhere: headings, body, quotes, accents, CMS copy and
   anything a script writes (Lauchie, 2026-10-06). Emphasis is carried by
   weight and colour instead. Kept last so it outranks every page stylesheet. */
*,
*::before,
*::after {
  font-style: normal !important;
  font-synthesis-style: none;
}

/* Homepage: "In Pursuit of Better." on the hero, "What we do", its three card titles and the "Our Impact" heading
   that closes the run (and its copy in the impact bridge) are Inter, like
   every other heading (Hodge, 2026-10-20). Placed last and written with
   !important so no earlier page rule can put them back in Playfair. */
.home-page #intro-title,
.home-page #intro-title > span,
.home-page #what-we-do-title,
.home-page #what-challenge-title,
.home-page #what-science-title,
.home-page #what-activation-title,
.home-page .what-index-coda figcaption h2,
.home-page .what-index-coda figcaption h2 span {
  font-family: var(--font-ui, "Inter", Arial, sans-serif) !important;
}