/* Display: Hanken Grotesk (replaces Clay's licensed Plain Black). Body: Inter. */

/* Values tokens.json does not declare under these names (the type scale as variables, a composite border). */
:root{
--border-hairline-1:1px solid var(--clay-hairline);

--type-display-xl-size:72px;--type-display-xl-lh:1;--type-display-xl-ls:-2.5px;
--type-display-lg-size:56px;--type-display-lg-lh:1.05;--type-display-lg-ls:-2px;
--type-display-md-size:40px;--type-display-md-lh:1.1;--type-display-md-ls:-1px;
--type-display-sm-size:32px;--type-display-sm-lh:1.15;--type-display-sm-ls:-0.5px;
--type-display-weight:500;
--type-title-lg-size:24px;--type-title-lg-lh:1.3;--type-title-lg-ls:-0.3px;
--type-title-md-size:18px;--type-title-md-lh:1.4;
--type-title-sm-size:16px;--type-title-sm-lh:1.4;
--type-title-weight:600;
--type-body-md-size:16px;--type-body-sm-size:14px;--type-body-lh:1.55;
--type-caption-size:13px;--type-caption-weight:500;--type-caption-lh:1.4;
--type-eyebrow-size:12px;--type-eyebrow-weight:600;--type-eyebrow-ls:1.5px;
--type-button-size:14px;--type-button-weight:600;
--type-nav-size:14px;--type-nav-weight:500;
}

/* Type style classes: size, line height, weight and tracking come from tokens.css; these add the rest. */
.clay-display-xl,.clay-display-lg,.clay-display-md,.clay-display-sm{color:var(--text-heading)}
.clay-body-md,.clay-body-sm{color:var(--text-body)}
.clay-eyebrow{text-transform:uppercase}

a{color:var(--clay-ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--clay-body)}