@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root{
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;
  --s-10:128px;
  --hair:1px;
  --edge:2px;
  --tap:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --z-head:40;
  --z-pop:50;
  --z-skip:60;
  --on-photo:#FFFFFF;
  --face-head:"Outfit";
  --face-body:"Outfit";
  --head-face-scale:1;
  --face-track:0em;
  --t-body:1.125rem;
  --head-scale:1;
  --w-head:600;
  --track-adj:0em;
  --lh-body:1.62;
  --r-btn:10px;
  --r-card:16px;
  --r-photo:16px;
  --btn-h:48px;
  --wrap:1460px;
  --wrap-read:820px;
  --density:1;
  --head-h:76px;
  --dur:.3s;
  --ground:#F7F8F7;
  --tint:#E9EEEC;
  --tint-2:#DCE3E1;
  --ink:#1F2B2C;
  --ink-body:#44504F;
  --ink-mute:#596564;
  --rule:#DADFDD;
  --deep:#1E3D47;
  --deep-2:#16282E;
  --on-deep:#EEF3F1;
  --on-deep-body:#C9D6D3;
  --on-deep-mute:#A3B3B0;
  --rule-deep:#2E5260;
  --accent:#9A3B33;
  --accent-on-deep:#D2685C;
  --panel:#FFFFFF;
  --font-head:var(--face-head), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:var(--face-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(20px, 4.5vw, 72px);
  --sp-section:calc(clamp(72px, 9vw, 128px) * var(--density));
  --sp-compact:calc(clamp(48px, 5vw, 64px) * var(--density));
  --head-k:calc(var(--head-scale) * var(--head-face-scale));
  --t-display:calc(clamp(2.625rem, 1.4rem + 4.1vw, 4.5rem) * var(--head-k));
  --t-h2:calc(clamp(1.875rem, 1.35rem + 1.75vw, 3rem) * var(--head-k));
  --t-h3:calc(clamp(1.25rem, 1.1rem + .5vw, 1.5rem) * var(--head-k));
  --t-h4:calc(1.25rem * var(--head-k));
  --t-lede:clamp(calc(var(--t-body) * 1.055), calc(var(--t-body) * .98 + .4vw), calc(var(--t-body) * 1.22));
  --t-sub:calc(var(--t-body) - .0625rem);
  --t-small:.875rem;
  --t-micro:.75rem;
  --track-h1:calc(-.03em + var(--track-adj) + var(--face-track));
  --track-h2:calc(-.025em + var(--track-adj) + var(--face-track));
  --track-h3:calc(-.01em + var(--track-adj) + var(--face-track));
  --rule-on-tint:color-mix(in srgb, var(--ink) 13%, var(--tint));
  --rule-on-tint-2:color-mix(in srgb, var(--ink) 14%, var(--tint-2));
  --rule-on-panel:color-mix(in srgb, var(--rule) 62%, var(--panel));
  --mark-mute:color-mix(in srgb, var(--ink-mute) 62%, var(--tint-2));
  --soft-hover:color-mix(in srgb, var(--ink) 7%, var(--tint-2));
  --soft-on-tint:var(--panel);
  --soft-on-tint-hover:color-mix(in srgb, var(--ink) 5%, var(--panel));
  --ondeep-hover:color-mix(in srgb, var(--deep) 9%, var(--panel));
  --accent-hover:color-mix(in srgb, #000 16%, var(--accent));
  --scrim-btn:color-mix(in srgb, var(--deep-2) 46%, transparent);
  --lift:0 var(--hair) var(--s-2) color-mix(in srgb, var(--ink) 5%, transparent), 0 var(--s-3) var(--s-6) calc(var(--s-5) * -1) color-mix(in srgb, var(--ink) 28%, transparent);
  --lift-hi:0 var(--s-1) var(--s-3) color-mix(in srgb, var(--ink) 7%, transparent), 0 var(--s-6) var(--s-8) calc(var(--s-6) * -1) color-mix(in srgb, var(--ink) 30%, transparent);
}

[data-theme="mist"]{
  --ground:#F7F8F7;
  --tint:#E9EEEC;
  --tint-2:#DCE3E1;
  --ink:#1F2B2C;
  --ink-body:#44504F;
  --ink-mute:#596564;
  --rule:#DADFDD;
  --deep:#1E3D47;
  --deep-2:#16282E;
  --on-deep:#EEF3F1;
  --on-deep-body:#C9D6D3;
  --on-deep-mute:#A3B3B0;
  --rule-deep:#2E5260;
  --accent:#9A3B33;
  --accent-on-deep:#D2685C;
  --panel:#FFFFFF;
}

[data-theme="stone"]{
  --ground:#F7F6F3;
  --tint:#ECEBE7;
  --tint-2:#E0DED8;
  --ink:#23292B;
  --ink-body:#474D4F;
  --ink-mute:#5B6163;
  --rule:#DDDAD3;
  --deep:#1E3D47;
  --deep-2:#16282E;
  --on-deep:#EEF3F1;
  --on-deep-body:#C9D6D3;
  --on-deep-mute:#A3B3B0;
  --rule-deep:#2E5260;
  --accent:#9A3B33;
  --accent-on-deep:#D2685C;
  --panel:#FFFFFF;
}

[data-theme="chalk"]{
  --ground:#F8F8F7;
  --tint:#EEEEEC;
  --tint-2:#E2E2DF;
  --ink:#1F2326;
  --ink-body:#45494C;
  --ink-mute:#5A5E61;
  --rule:#DCDCD9;
  --deep:#1E3D47;
  --deep-2:#16282E;
  --on-deep:#EEF3F1;
  --on-deep-body:#C9D6D3;
  --on-deep-mute:#A3B3B0;
  --rule-deep:#2E5260;
  --accent:#9A3B33;
  --accent-on-deep:#D2685C;
  --panel:#FFFFFF;
}

html[data-system="inlet"]{
  --w-head:300;
  --r-btn:28px;
  --r-card:20px;
  --r-photo:20px;
  --btn-h:56px;
  --head-h:80px;
  --wrap-read:680px;
}