/*
 * SORANK typography and spacing guidelines, loaded last (after sorank-ui.css): one scale for
 * every page instead of the Webflow export's per-class sizes (h1 40-50 px, h2 20-50 px with the
 * Circular font asked in 500/700 weights it does not have, article text in the system font with a
 * 1.8 line height, 64-117 px around the article images, 100 px of margin + padding per section).
 *
 * Rules
 * - Headings: the semantic level sets the look. Every h1 is the page title (one per page, whatever
 *   its Webflow class); h2 and `.h2`/`.H2` share the h2 style; h3/`.h3`, h4/`.h4` likewise. The
 *   smaller Webflow classes (`.h5`, `.h6`, `.heading-8`, `.subheading`) are component titles
 *   (cards, FAQ questions, eyebrows) mapped onto the same scale.
 * - Families: Instrument Sans for h1, Circular Book (one 400 face) for h2, Geist for h3, h4 and
 *   the text. A weight a family does not have is never synthesized (font-synthesis-weight: none).
 * - Text: 16 px / 1.55 for the interface, 17 px / 1.65 for article reading (src/styles/article-richtext.css).
 * - Spacing: a 4 px based scale (--space-*); the rich text flow (--flow-*) puts more space above
 *   a heading than below it, so a heading belongs to the text it introduces; media (images,
 *   tables, embeds) get the same space above and below.
 * - Desktop / phone: sizes step down at 767 px (and h1/h2 again at 479 px).
 * - Scripts: no negative tracking and taller lines for Arabic and Hebrew (letter spacing breaks the
 *   Arabic joins) and for Chinese, Japanese and Korean (no glyphs in the Latin fonts, denser signs).
 *
 * Scale (desktop / phone)
 *   display  50 / 34                 line 54/38 Instrument Sans 500  home hero title only (.h1-home)
 *   h1       40 / 32 (30 under 480)  line 1.1   Instrument Sans 500  tracking -0.02em
 *   h2       32 / 26 (24 under 480)  line 1.18  Circular Book 400    tracking -0.01em
 *   h3       22 / 20                 line 1.3   Geist 600
 *   h4       18 / 17                 line 1.35  Geist 600
 *   card titles (.h5) as h4, small labels (.h6) as small, both Geist 600 tracking -0.03em
 *   lead     18 / 17                 line 1.5   (intros, summary box, eyebrows)
 *   body     16                      line 1.55
 *   reading  17 / 16                 line 1.65 / 1.6 (article rich text)
 *   small    14                      line 1.45  (captions, table of contents, meta)
 *   xs       12                      line 1.4
 *
 * Flow inside a rich text (desktop / phone)
 *   paragraph, list          0 above, 16 below; 6 between list items
 *   h2                       48 / 40 above, 16 below
 *   h3                       32 / 28 above, 12 below
 *   h4                       24 above, 8 below
 *   image, figure, table     32 / 24 above and below; caption 8 under its image
 *   section (padding)        48 / 32 at the top and the bottom
 */

:root {
  --font-display: Instrumentsans, Arial, sans-serif;
  --font-heading: 'Circularstd Book', Arial, sans-serif;
  --font-text: Geist, Arial, sans-serif;

  --fs-display: 50px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-reading: 17px;
  --fs-small: 14px;
  --fs-xs: 12px;

  --lh-display: 54px;
  --lh-h1: 1.1;
  --lh-h2: 1.18;
  --lh-h3: 1.3;
  --lh-h4: 1.35;
  --lh-lead: 1.5;
  --lh-body: 1.55;
  --lh-reading: 1.65;
  --lh-small: 1.45;
  --lh-xs: 1.4;

  --fw-h1: 500;
  --fw-h2: 400;
  --fw-heading: 600;
  --fw-text: 400;
  --fw-strong: 600;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-compact: -0.03em;
  --ls-home: -1px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --flow-p: var(--space-4);
  --flow-li: 6px;
  --flow-h2-before: var(--space-7);
  --flow-h2-after: var(--space-4);
  --flow-h3-before: var(--space-6);
  --flow-h3-after: var(--space-3);
  --flow-h4-before: var(--space-5);
  --flow-h4-after: var(--space-2);
  --flow-media: var(--space-6);
  --flow-caption: var(--space-2);

  --space-section: var(--space-7);

  --color-ink: #0f172a;
  --color-text: #1f2937;
  --color-muted: #64748b;
  --color-rule: #e2e8f0;
  --color-active: #1e3a8a;
}

@media screen and (max-width: 767px) {
  :root {
    --fs-display: 34px;
    --lh-display: 38px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --fs-h4: 17px;
    --fs-lead: 17px;
    --fs-reading: 16px;
    --lh-reading: 1.6;
    --flow-h2-before: 40px;
    --flow-h3-before: 28px;
    --flow-media: var(--space-5);
    --space-section: var(--space-6);
  }
}
@media screen and (max-width: 479px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 24px;
  }
}

/* Arabic and Hebrew: no tracking (it breaks the Arabic joins), taller lines for the Arabic script. */
:root:lang(ar),
:root:lang(he) {
  --ls-display: 0;
  --ls-heading: 0;
  --ls-compact: 0;
  --ls-home: 0;
}
:root:lang(ar) {
  --lh-h1: 1.3;
  --lh-h2: 1.35;
  --lh-h3: 1.45;
  --lh-h4: 1.5;
  --lh-body: 1.7;
  --lh-reading: 1.8;
}
:lang(ar) body *,
:lang(he) body * {
  letter-spacing: normal;
}
/*
 * Scripts the Latin heading fonts do not cover (Arabic, Hebrew, CJK) are drawn by the system font:
 * the h1/h2 ask it for a semibold, as the Latin headings look. The Latin words of these headings
 * keep their regular Circular face (no synthesized bold, see the headings below).
 */
:root:lang(ar),
:root:lang(he),
:root:lang(ja),
:root:lang(zh),
:root:lang(ko) {
  --fw-h1: 600;
  --fw-h2: 600;
}
/* Chinese, Japanese, Korean: no tracking, more leading (the system CJK fonts replace the Latin ones). */
:root:lang(ja),
:root:lang(zh),
:root:lang(ko) {
  --ls-display: 0;
  --ls-heading: 0;
  --ls-compact: 0;
  --ls-home: 0;
  --lh-h1: 1.3;
  --lh-h2: 1.35;
  --lh-h3: 1.45;
  --lh-h4: 1.5;
  --lh-body: 1.75;
  --lh-reading: 1.85;
}
:lang(ja) body *,
:lang(zh) body *,
:lang(ko) body * {
  letter-spacing: normal;
}

/* Headings ------------------------------------------------------------------------------------ */

h1,
.h1,
h1.h2 {
  font-family: var(--font-display);
  font-synthesis-weight: none;
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
}

/* Home hero title: the one display exception, larger than the page titles (50 px, 34 px on phones). */
.h1-home,
.h1-home.no-margin.max-45 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-home);
}

h2,
.h2,
.H2 {
  font-family: var(--font-heading);
  font-synthesis-weight: none;
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

h3,
.h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-heading);
}

h4,
.h4 {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  line-height: var(--lh-h4);
  letter-spacing: normal;
}

/* Component titles: card titles (.h5), small labels (.h6), eyebrows and FAQ questions (.heading-8), tool names (.subheading). */
.h5,
.h6 {
  font-family: var(--font-text);
}
.h5 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-heading);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-compact);
}
.h6 {
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-compact);
}
.heading-8,
.subheading {
  font-size: var(--fs-lead);
  line-height: var(--lh-h4);
  letter-spacing: normal;
}
/* Circular Book has no medium weight: ask for the one it has. */
.heading-8,
.subheading,
blockquote {
  font-weight: var(--fw-h2);
  font-synthesis-weight: none;
}

/* Text ---------------------------------------------------------------------------------------- */

p {
  line-height: var(--lh-body);
}
figcaption {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Rich text flow (every CMS rich text; the article reading size is in src/styles/article-richtext.css) */

.w-richtext {
  line-height: var(--lh-body);
}
.w-richtext > :first-child {
  margin-top: 0;
}
.w-richtext > :last-child {
  margin-bottom: 0;
}
.w-richtext p {
  margin-top: 0;
  margin-bottom: var(--flow-p);
}
.w-richtext h2 {
  margin-top: var(--flow-h2-before);
  margin-bottom: var(--flow-h2-after);
}
.w-richtext h3 {
  margin-top: var(--flow-h3-before);
  margin-bottom: var(--flow-h3-after);
}
/* An h3 raised to h2 for the outline (src/lib/rich-headings.ts) keeps the h3 flow; :where keeps the
   specificity of `.w-richtext h2`, so the first and last child rules still apply. */
.w-richtext h2:where(.h3) {
  font-synthesis-weight: auto;
  margin-top: var(--flow-h3-before);
  margin-bottom: var(--flow-h3-after);
}
.w-richtext h4,
.w-richtext h5,
.w-richtext h6 {
  margin-top: var(--flow-h4-before);
  margin-bottom: var(--flow-h4-after);
}
/* A heading right under another one keeps the small gap. */
.w-richtext :is(h2, h3, h4) + :is(h3, h4),
.w-richtext :is(h2, h3, h4) + h2:where(.h3) {
  margin-top: var(--space-3);
}
.w-richtext ul,
.w-richtext ol {
  margin-top: 0;
  margin-bottom: var(--flow-p);
  padding-left: 0;
  padding-inline-start: var(--space-5);
}
.w-richtext li {
  line-height: inherit;
}
.w-richtext li + li {
  margin-top: var(--flow-li);
}
.w-richtext li > ul,
.w-richtext li > ol {
  margin-top: var(--flow-li);
  margin-bottom: 0;
}
.w-richtext figure,
.w-richtext > img,
.w-richtext > table,
.w-richtext > .w-embed,
.w-richtext blockquote {
  margin-top: var(--flow-media);
  margin-bottom: var(--flow-media);
}
.w-richtext figure img {
  margin: 0;
}
.w-richtext figcaption {
  margin-top: var(--flow-caption);
}

/* Sections: one vertical rhythm (the plain `.section` had 60 px of margin + 40 px of padding per side). */
.section,
.section._40-pad,
.section.no-margin {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}