/* ============================================================
   type.css — the project pages' type scale
   One size / weight / line height per role, desktop and phone, and two
   text greys per theme. Explored on the prototype pages as option A
   ("keep the shape"), then: titles that sit beside a description at
   20px, captions at the paragraph size.

     figure 96 · display 60 · statement 48 · title 32 · subtitle 24
     lead 20 · label 16 bold · body 16 · small 14 · overline 12

   shortcut: !important over the ported Webflow rules, one layer on top;
   fold into each page's stylesheet when those are rewritten.
   ============================================================ */
/* ── The scale: [size, weight, line height] per role ─────────── */

html {
  --figure: 500 96px/1 var(--tf);
  --display: 600 60px/1.15 var(--tf);
  --statement: 600 48px/1.25 var(--tf);
  --title: 500 32px/1.3 var(--tf);
  --subtitle: 500 24px/1.4 var(--tf);
  --lead: 400 20px/1.6 var(--tf);
  --lead-strong: 600 20px/1.6 var(--tf);
  --label: 700 16px/1.6 var(--tf);
  --body: 400 16px/1.7 var(--tf);
  --small: 400 14px/1.5 var(--tf);
  --overline: 500 12px/1.5 var(--tf);
}
@media screen and (max-width: 991px) {
  html { --display: 600 48px/1.15 var(--tf); }
}
/* Phones: display 32 · subtitle and title 20 · everything else 16 and
   below, so no in-between steps (24, 18) sit between the title and body. */
@media screen and (max-width: 767px) {
  html {
    --figure: 500 64px/1 var(--tf);
    --display: 600 32px/1.2 var(--tf);
    --statement: 600 24px/1.3 var(--tf);
    --title: 500 20px/1.4 var(--tf);
    --subtitle: 500 20px/1.4 var(--tf);
    --lead: 400 16px/1.6 var(--tf);
    --lead-strong: 600 16px/1.5 var(--tf);
  }
}
html { --tf: Geist, sans-serif; }

/* Two greys per theme. */
html body { --ink-1: #1a1b1f; --ink-2: #62666d; }
html body.dark { --ink-1: #f5f5f7; --ink-2: #8a8f98; }

/* ── Roles ───────────────────────────────────────────────────── */

html .metrics { font: var(--figure) !important; letter-spacing: normal !important; }

html .heading_hero-title { font: var(--display) !important; letter-spacing: normal !important; }

html .heading_how-might-we { font: var(--statement) !important; letter-spacing: normal !important; }
html .text-block-33,
html .txt_uid_title,
html .heading_principle_title { font: var(--statement) !important; letter-spacing: normal !important; }

html .heading_grid-txt_summary,
html .paragraph_ux-dir_title-copy { font: var(--title) !important; letter-spacing: normal !important; }

html .heading_hero-subtitle-1,
html .txt_link,
html .txt_principle_title,
html .txt_ujm_personaname,
html .txt_insight_list--title,
html .text-block-32,
html .txt_principle_sub-title { font: var(--subtitle) !important; letter-spacing: normal !important; }

html .txt_caption,
html .text-block-31,
html .list-item-4,
html .text-block { font: var(--lead) !important; }
html .list-item-4 { font-style: italic !important; }
html .txt_ui_subtitle { font: var(--lead-strong) !important; }

html .heading_hero-subtitle-2,
html .heading_grid-txt_subtitle,
html .text-block-27 { font: var(--label) !important; letter-spacing: normal !important; }

html .paragraph_body,
html .paragraph_body-2,
html .heading_hero-p,
html .paragraph_proj-brief,
html .list-item,
html .list-item-2,
html .list-item-3,
html .list-item_cjm,
html .txt_uid_description,
html .text_footer,
html .text-block-2,
html .text-block-35,
html .paragraph_body-copy,
html .link-6 { font: var(--body) !important; }

/* Emphasis inside a sentence: the sentence's size, at 600. */
html .txt_highlight,
html .text-block-26,
html .text-span-4,
html .text-span-5 { font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; }

html .link-7,
html .text-block-17,
html .txt_principle_des,
html .text-block-13 { font: var(--small) !important; }

/* Labels drawn inside product mockups keep their brand colour. */
html .txt_uid_label { font: var(--overline) !important; letter-spacing: .08em !important; text-transform: uppercase; }

/* ── Colour ──────────────────────────────────────────────────── */

html :is(.metrics, .heading_hero-title, .heading_how-might-we, .text-block-33, .txt_uid_title,
  .heading_principle_title, .heading_grid-txt_summary, .paragraph_ux-dir_title-copy, .txt_principle_title,
  .txt_ujm_personaname, .txt_insight_list--title, .text-block-32, .txt_principle_sub-title, .txt_ui_subtitle,
  .heading_hero-subtitle-2, .text-block-27):not(.white) { color: var(--ink-1) !important; }

html :is(.heading_hero-subtitle-1, .txt_caption, .text-block-31, .list-item-4, .text-block,
  .heading_grid-txt_subtitle, .paragraph_body, .paragraph_body-2, .heading_hero-p, .paragraph_proj-brief,
  .list-item, .list-item-2, .list-item-3, .list-item_cjm, .txt_uid_description, .text_footer, .text-block-2,
  .text-block-35, .link-7, .text-block-17, .txt_principle_des, .text-block-13, .paragraph_body-copy):not(.white) { color: var(--ink-2) !important; }

/* A section title that has a description beside it is set at 20px, not
   32px, on the exploration pages (?type= or ?layout=). Titles with no
   paragraph next to them keep the title step. */
html .grid_txt:has(> :is(p, ul, .paragraph_body)) > .heading_grid-txt_summary,
html .grid-6:has(> ul) .heading_grid-txt_summary {
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* Captions under images and videos are set as paragraphs (16px / 1.7),
   not as lead text, on the exploration pages. */
html .txt_caption { font-size: 16px !important; line-height: 1.7 !important; }

/* UI showcase titles ("Story", "Search", …) take the block-title style of
   the section titles around them. */
html .txt_uid_title { font: 500 20px/1.4 var(--tf) !important; letter-spacing: normal !important; margin-bottom: 8px !important; }

/* "How might we" statements: one line across the 980px column on desktop
   (the longest, USDOT's, needs 24px to fit), wrapping only on narrow
   screens. */
html .heading_how-might-we { font: 600 24px/1.4 var(--tf) !important; }
@media screen and (max-width: 767px) {
  html .heading_how-might-we { font: 600 20px/1.4 var(--tf) !important; }
}

/* USDOT's group headings ("All users", "Non-wheelchair users"…) take the
   block-title style, flush with the column like every other title. */
html .text-block-32 { font: 500 20px/1.4 var(--tf) !important; padding-left: 0 !important; }

/* Phones: the project name over the hero title steps down to an eyebrow,
   so the title leads (24 : 60 on desktop). */
@media screen and (max-width: 767px) {
  html .heading_hero-subtitle-1 { font: 500 16px/1.5 var(--tf) !important; }
}