/* Loaded before the legacy Finder layers so these typography-only overrides win. */
@font-face {
  font-family: "IF Guide Source Sans";
  src: url("/assets/finder-hardtest-fixes-5f16566f7a40d39b339a.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@layer if-reference-typography {
  :root {
    --if-editorial-title: clamp(32px, 3.4vw, 48px);
    --if-editorial-section: clamp(24px, 2.2vw, 30px);
    --if-landing-title: clamp(32px, 3.6vw, 48px);
    --if-landing-section: 28px;
    --if-nav-size: 16px;
  }

  :is(.IFAboutPage, .IFTermsPage, .IFAccountPage, .if-typography-guide, .if-directory) main h1 {
    font-size: var(--if-editorial-title) !important;
    font-weight: 450 !important;
  }

  :is(.IFAboutPage, .if-directory) main h1 {
    font-size: var(--if-landing-title) !important;
  }

  :is(.IFTermsPage, .IFAccountPage, .if-typography-guide) main h2 {
    font-size: var(--if-editorial-section) !important;
    font-weight: 500 !important;
  }

  :is(.IFAboutPage, .if-directory) main h2 {
    font-size: var(--if-landing-section) !important;
    font-weight: 500 !important;
  }

  .if-directory main h2 {font-weight: 450 !important}
  .IFAboutPage main h3 {font-size: 23px !important; font-weight: 500 !important}
  .if-directory main h3 {font-size: 21px !important; font-weight: 500 !important}
  .if-directory .directory-intro {font-size: 19px !important; font-weight: 400 !important}
  .if-directory footer,
  .if-directory footer a {font-size: 15px !important; font-weight: 400 !important}

  body.if-typography-guide {
    font-family: "IF Guide Source Sans", system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
  }

  .if-typography-guide main h3 {font-size: 22px !important; font-weight: 500 !important}
  .if-typography-guide main :is(p, li) a {font-weight: 550 !important}
  .if-typography-guide footer,
  .if-typography-guide footer a {font-size: 15px !important; font-weight: 400 !important}

  .fk-header :is(#sa-main-nav > a, .sa-menu-toggle, .if-chrome-directory),
  .if-directory header nav a,
  .if-typography-guide nav a {
    font-size: var(--if-nav-size) !important;
    font-weight: 500 !important;
  }

  .fk-header :is(#sa-main-nav, .if-chrome-top) :is(a.fk-nav-login, a.fk-nav-create) {
    font-size: 17px !important;
    font-weight: 400 !important;
  }

  .IFAboutPage main p a {font-weight: 550 !important}
  .IFAccountPage main label {font-weight: 400 !important}
  .IFAccountPage main button[type="submit"] {font-size: 17px !important; font-weight: 500 !important}

  @media (max-width: 760px) {
    :root {
      --if-editorial-title: clamp(30px, 7.6vw, 36px);
      --if-editorial-section: 24px;
      --if-landing-title: 36px;
      --if-landing-section: 26px;
      --if-nav-size: 15px;
    }

    .if-directory main h1 {font-size: 32px !important}
    .if-typography-guide main h3 {font-size: 20px !important}
    .fk-header.if-coordinated-chrome .fk-brand-name {font-size: clamp(12px, 3.4vw, 18px) !important}
    .fk-header .fk-brand-tagline {font-size: 9px !important}
  }

  @media (max-width: 440px) {
    .fk-header.if-coordinated-chrome .fk-brand {column-gap: 2px !important}
  }

  @media (max-width: 380px) {
    .IFAccountPage .fk-header .fk-brand-name {font-size: clamp(15px, 5vw, 19px) !important}
  }
}