@layer hpds-reset {
  body.hpds-enabled :where([class^="hpds-"], [class*=" hpds-"]) {
    box-sizing: border-box;
  }

  body.hpds-enabled :where([class^="hpds-"]::before, [class^="hpds-"]::after, [class*=" hpds-"]::before, [class*=" hpds-"]::after) {
    box-sizing: inherit;
  }

  :where(.hpds-enabled .hpds-scope),
  :where(.hpds-enabled .hpds-component) {
    box-sizing: border-box;
  }

  :where(.hpds-enabled .hpds-scope *, .hpds-enabled .hpds-scope *::before, .hpds-enabled .hpds-scope *::after),
  :where(.hpds-enabled .hpds-component *, .hpds-enabled .hpds-component *::before, .hpds-enabled .hpds-component *::after) {
    box-sizing: inherit;
  }
}

@layer hpds-base {
  :where(.hpds-enabled .hpds-scope),
  :where(.hpds-enabled.hpds-mode-sitewide main) {
    color: var(--hpds-color-text);
    font-family: var(--hpds-font-sans);
    font-size: var(--hpds-font-size-300);
    line-height: var(--hpds-line-body);
    letter-spacing: 0;
  }

  :where(.hpds-enabled .hpds-scope h1, .hpds-enabled .hpds-scope h2, .hpds-enabled .hpds-scope h3, .hpds-enabled .hpds-scope h4, .hpds-enabled .hpds-scope h5, .hpds-enabled .hpds-scope h6),
  :where(.hpds-enabled.hpds-mode-sitewide main h1, .hpds-enabled.hpds-mode-sitewide main h2, .hpds-enabled.hpds-mode-sitewide main h3, .hpds-enabled.hpds-mode-sitewide main h4, .hpds-enabled.hpds-mode-sitewide main h5, .hpds-enabled.hpds-mode-sitewide main h6) {
    color: var(--hpds-color-text);
    font-family: var(--hpds-font-display);
    font-weight: var(--hpds-weight-bold);
    line-height: var(--hpds-line-heading);
    letter-spacing: 0;
    margin-block: 0 var(--hpds-space-4);
    text-wrap: balance;
  }

  :where(.hpds-enabled .hpds-scope h1, .hpds-enabled.hpds-mode-sitewide main h1) { font-size: var(--hpds-font-size-800); }
  :where(.hpds-enabled .hpds-scope h2, .hpds-enabled.hpds-mode-sitewide main h2) { font-size: var(--hpds-font-size-700); }
  :where(.hpds-enabled .hpds-scope h3, .hpds-enabled.hpds-mode-sitewide main h3) { font-size: var(--hpds-font-size-600); }
  :where(.hpds-enabled .hpds-scope h4, .hpds-enabled.hpds-mode-sitewide main h4) { font-size: var(--hpds-font-size-500); }
  :where(.hpds-enabled .hpds-scope h5, .hpds-enabled.hpds-mode-sitewide main h5) { font-size: var(--hpds-font-size-400); }
  :where(.hpds-enabled .hpds-scope h6, .hpds-enabled.hpds-mode-sitewide main h6) { font-size: var(--hpds-font-size-300); }

  :where(.hpds-enabled .hpds-scope p, .hpds-enabled.hpds-mode-sitewide main p) {
    margin-block: 0 var(--hpds-space-4);
  }

  :where(.hpds-enabled .hpds-scope a, .hpds-enabled.hpds-mode-sitewide main a) {
    color: var(--hpds-color-link);
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color var(--hpds-duration-fast) var(--hpds-ease-standard), text-decoration-color var(--hpds-duration-fast) var(--hpds-ease-standard);
  }

  :where(.hpds-enabled .hpds-scope a:hover, .hpds-enabled.hpds-mode-sitewide main a:hover) {
    color: var(--hpds-color-link-hover);
    text-decoration-color: currentColor;
  }

  :where(.hpds-enabled .hpds-scope a:focus-visible, .hpds-enabled .hpds-component:focus-visible, .hpds-enabled.hpds-mode-sitewide main a:focus-visible) {
    border-radius: var(--hpds-radius-sm);
    outline: 2px solid var(--hpds-color-focus);
    outline-offset: 3px;
  }

  :where(.hpds-enabled .hpds-scope img, .hpds-enabled .hpds-component img) {
    display: block;
    height: auto;
    max-width: 100%;
  }

  .hpds-kicker {
    color: var(--hpds-color-accent);
    font-size: var(--hpds-font-size-200);
    font-weight: var(--hpds-weight-bold);
    letter-spacing: 0;
    line-height: var(--hpds-line-tight);
    margin: 0 0 var(--hpds-space-3);
  }

  .hpds-lead {
    color: var(--hpds-color-text-muted);
    font-size: var(--hpds-font-size-400);
    line-height: 1.55;
    max-width: 42rem;
  }

  .hpds-caption,
  .hpds-meta {
    color: var(--hpds-color-text-muted);
    font-size: var(--hpds-font-size-200);
    line-height: 1.5;
  }

  @media (max-width: 767px) {
    :where(.hpds-enabled .hpds-scope h1, .hpds-enabled.hpds-mode-sitewide main h1) { font-size: var(--hpds-font-size-700); }
    :where(.hpds-enabled .hpds-scope h2, .hpds-enabled.hpds-mode-sitewide main h2) { font-size: var(--hpds-font-size-600); }
    :where(.hpds-enabled .hpds-scope h3, .hpds-enabled.hpds-mode-sitewide main h3) { font-size: var(--hpds-font-size-500); }
  }
}