@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --frx-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --frx-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-display: var(--frx-font-serif);
  --f-sans: var(--frx-font-serif);
  --f-mono: var(--frx-font-mono);
  --sans: var(--frx-font-serif);
  --serif: var(--frx-font-serif);
  --mono: var(--frx-font-mono);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--frx-font-serif);
}

body {
  font-size: 16px;
  line-height: 1.55;
}

body :is(
  code,
  kbd,
  samp,
  pre,
  .code,
  .code-badge,
  .mono,
  .odb-carrier-code,
  .odb-claim-entry,
  .ids dd,
  .plan-ids button,
  .intervention-code,
  .wordmark .tld
) {
  font-family: var(--frx-font-mono) !important;
}

.wordmark h1 {
  font-family: var(--frx-font-serif) !important;
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.035em !important;
  font-variation-settings: "SOFT" 40, "opsz" 144;
}

.wordmark h1 .x {
  font-family: inherit !important;
  font-style: italic;
  color: var(--rx);
}

.wordmark .tld {
  letter-spacing: 0.28em !important;
}
