/**
 * Base-tier typography, converted to literal CSS from Sass source:
 * src/stories/global/_typography.scss, plus the one real rule from
 * src/stories/global/_mixins.scss (`.list-unstyled`, via `@mixin
 * list-unstyled` -- every other construct in _mixins.scss is Sass-only
 * tooling with no standalone CSS output and is out of scope here).
 *
 * Design tokens are consumed via var(--site-*) custom properties defined in
 * css/base/variables.css (Task 1's output). Bootstrap's own runtime custom
 * properties (--bs-*) are referenced directly, unchanged from the Sass
 * source, since they are already valid CSS as-is.
 *
 * DELIVERY-GAP FIX: _typography.scss is not @import-ed by
 * src/stories/global/bootstrap-init.scss and therefore never reaches the
 * sitewide dist/css/bootstrap.css today (confirmed in Phase 0) -- it only
 * ever ships to a page today as a side effect of whichever *component's*
 * Sass happens to @import 'bootstrap-init' (e.g. dist/css/card.css,
 * dist/css/button.css). There is no sitewide compiled file to diff this
 * conversion against directly; the rules below were instead verified
 * line-for-line against dist/css/card.css, which pulls in this exact
 * ruleset via that chain.
 *
 * OMITTED HERE, BUT NOT DEAD (corrected 2026-07-28, Phase 10 Batch C
 * final-review finding I2): the legacy Google Fonts "Material Icons"
 * @import url(...) at the top of _typography.scss
 * ("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined")
 * is intentionally NOT reproduced in THIS file -- but it is NOT a
 * dead/removable duplicate of "Material Symbols Outlined" (the theme's
 * `icons` library import). Phase 0 (open item #8 in the inventory doc)
 * originally flagged it as "likely-dead"; that was wrong. Both fonts are
 * real, distinct Google Fonts families consumed by different mechanisms
 * ("Material Icons" via classic ligature `content`/`font-family: "Material
 * Icons"` text, "Material Symbols Outlined" via the `.material-symbols-
 * outlined` class), and confirmed via direct grep, at least 4 tracked
 * files genuinely depend on the "Material Icons" import being available
 * sitewide: css/legacy/form.css (checkbox icons), css/legacy/news-exposed-
 * filters.css (facet expand/collapse +/-), css/legacy/navbar-search.css
 * (search-button icon), and css/legacy/wysiwyg.css (verified NOT to need
 * it -- see that file's own header). The import now has a canonical,
 * single, sitewide-guaranteed source: css/base/fonts.css (also part of
 * the `global` library's `base` group, loaded immediately before this
 * file). It remains absent from THIS file specifically only to avoid
 * loading it twice in the same `global` library.
 *
 * FLUID FONT-SIZING: _typography.scss calls the Sass fluid() function
 * (src/stories/global/_functions.scss:51-58) for every non-fixed font-size
 * below. fluid($from, $to, $fromWidth: 320px, $toWidth: 1440px,
 * $px-per-rem: 16) computes:
 *   slope       = (to - from) / (toWidth - fromWidth)          [unitless]
 *   vw-coeff    = slope * 100 * px-per-rem                      (the "vw" multiplier)
 *   y-intercept = from - slope * fromWidth                      (the "rem" constant)
 *   -> clamp(from, calc(vw-coeff * 1vw + y-intercept * 1rem), to)
 * Each call site below is resolved to its literal clamp() using that
 * formula, and every resulting value was cross-checked against
 * dist/css/card.css (which contains the identical, already-compiled
 * clamp() strings) -- both derivations agree exactly:
 *   - fluid(1rem, 1.125rem):     clamp(1rem, 0.1785714286vw + 0.9642857143rem, 1.125rem)
 *   - fluid(1.25rem, 1.375rem):  clamp(1.25rem, 0.1785714286vw + 1.2142857143rem, 1.375rem)
 *   - fluid(1.325rem, 1.5rem):   clamp(1.325rem, 0.25vw + 1.275rem, 1.5rem)
 *   - fluid(1.375rem, 1.625rem): clamp(1.375rem, 0.3571428571vw + 1.3035714286rem, 1.625rem)
 *
 * LINK COLOR GAP: the `hyperlink` mixin (_mixins.scss:60-70) resolves its
 * $color/$hover-color defaults to $link-color / $link-hover-color
 * (_variables.scss:318,321), which chain to $spring-violet / $night-sky
 * (_variables.scss:82-83) -- literal #5e74ee / #12354c. Unlike
 * _reboot.scss's `a` rule (which references Bootstrap's own runtime
 * var(--bs-link-color)), this mixin bakes the literal hex values in at
 * Sass-compile time, confirmed by dist/css/card.css emitting
 * `color: #5e74ee;` / `color: #12354c;` literally, not a var() reference.
 * Task 1's variables.css originally did not define a --site-link-color /
 * --site-link-hover-color token (only --site-link-decoration /
 * --site-link-hover-decoration existed), so this was flagged back to Task
 * 1's scope; a follow-up review fix has since backfilled both tokens into
 * css/base/variables.css, and the declarations below reference them via
 * var(--site-link-color) / var(--site-link-hover-color) like everything
 * else in this file -- no literal hex values remain here.
 */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--site-font-family-sans-serif);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  font-family: inherit;
}

p {
  color: var(--bs-text-color);
  font-size: clamp(1rem, 0.1785714286vw + 0.9642857143rem, 1.125rem); /* fluid(1rem, 1.125rem) */
  font-weight: var(--site-font-weight-normal);
  line-height: var(--site-line-height-base);
  margin-block-end: 1em;
}
p:only-child,
p:last-child {
  margin-block-end: 0;
}
p strong {
  font-weight: var(--site-font-weight-bold);
}
p small {
  font-size: 80% !important;
}
p a {
  color: var(--site-link-color); /* $link-color -> $spring-violet, _variables.scss:318,82 */
  font-weight: var(--site-font-weight-medium);
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
}
p a:hover,
p a:focus {
  color: var(--site-link-hover-color); /* $link-hover-color -> $night-sky, _variables.scss:321,83 */
}
p.small-text {
  font-size: 0.875rem;
}
p.lead-text {
  font-size: clamp(1.25rem, 0.1785714286vw + 1.2142857143rem, 1.375rem); /* fluid(1.25rem, 1.375rem) */
  font-weight: var(--site-font-weight-medium);
  line-height: 1.3;
}
p.medium-text {
  font-size: clamp(1.325rem, 0.25vw + 1.275rem, 1.5rem); /* fluid(1.325rem, 1.5rem) */
  line-height: 1.3;
}
p.large-text {
  font-size: clamp(1.375rem, 0.3571428571vw + 1.3035714286rem, 1.625rem); /* fluid(1.375rem, 1.625rem) */
  font-weight: var(--site-font-weight-medium);
  line-height: 1.3;
}

.rich-text blockquote,
article blockquote {
  padding: calc(var(--site-spacer) * 0.5) 0 calc(var(--site-spacer) * 0.5) calc(var(--site-spacer) * 1.5);
  margin: calc(var(--site-spacer) * 3) 0;
  position: relative;
}
.rich-text blockquote::before,
article blockquote::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: var(--bs-tertiary);
  border-radius: 0;
}
.rich-text blockquote p,
article blockquote p {
  font-size: clamp(1.375rem, 0.3571428571vw + 1.3035714286rem, 1.625rem); /* fluid(1.375rem, 1.625rem) */
  font-weight: var(--site-font-weight-medium);
  line-height: 1.3;
  margin: 0 0 0.25em;
}
.rich-text blockquote p strong,
article blockquote p strong {
  font-size: clamp(1rem, 0.1785714286vw + 0.9642857143rem, 1.125rem); /* fluid(1rem, 1.125rem) */
  font-weight: var(--site-font-weight-bold);
}
.rich-text blockquote p:last-of-type,
article blockquote p:last-of-type {
  margin: 0;
}

.rich-text ul li,
.rich-text ol li,
article ul li,
article ol li {
  color: var(--bs-text-color);
  font-size: clamp(1rem, 0.1785714286vw + 0.9642857143rem, 1.125rem); /* fluid(1rem, 1.125rem) */
  font-weight: var(--site-font-weight-normal);
  line-height: var(--site-line-height-base);
  margin-bottom: 0.375em;
}
.rich-text ul li a,
.rich-text ol li a,
article ul li a,
article ol li a {
  color: var(--site-link-color); /* $link-color -> $spring-violet, _variables.scss:318,82 */
  font-weight: var(--site-font-weight-medium);
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
}
.rich-text ul li a:hover,
.rich-text ul li a:focus,
.rich-text ol li a:hover,
.rich-text ol li a:focus,
article ul li a:hover,
article ul li a:focus,
article ol li a:hover,
article ol li a:focus {
  color: var(--site-link-hover-color); /* $link-hover-color -> $night-sky, _variables.scss:321,83 */
}

.rich-text .without-markers ul,
article .without-markers ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rich-text ul,
article ul {
  list-style-type: disc;
}
.rich-text ul ul,
article ul ul {
  list-style-type: circle;
}

.rich-text ol,
article ol {
  list-style-type: decimal;
}
.rich-text ol ol,
article ol ol {
  list-style-type: lower-alpha;
}
.rich-text ol li,
article ol li {
  color: var(--bs-text-color);
  font-size: clamp(1rem, 0.1785714286vw + 0.9642857143rem, 1.125rem); /* fluid(1rem, 1.125rem) */
  font-weight: var(--site-font-weight-normal);
  line-height: var(--site-line-height-base);
  margin-bottom: 0.375em;
}
.rich-text ol li a,
article ol li a {
  color: var(--site-link-color); /* $link-color -> $spring-violet, _variables.scss:318,82 */
  font-weight: var(--site-font-weight-medium);
  text-decoration: underline;
  transition: color 0.25s ease-in-out;
}
.rich-text ol li a:hover,
.rich-text ol li a:focus,
article ol li a:hover,
article ol li a:focus {
  color: var(--site-link-hover-color); /* $link-hover-color -> $night-sky, _variables.scss:321,83 */
}

/**
 * From src/stories/global/_mixins.scss:43-51 (@mixin list-unstyled / its
 * .list-unstyled consumer) -- the one construct in _mixins.scss that
 * produces standalone CSS output.
 */
.list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}