:root {
    --ground:#fff;
    --ink:#0f1115;
    --primary:#0038d1;
    --ink-muted:#363a44;
    --rule-hairline:#d4d8e0;
    --rule-heavy:#0f1115;
    --surface-tint:#f3f5f9;
    --accent-tint:#ebf1ff;

    --fivu-78d:"DM Serif Display", Georgia, serif;
    --fivu-bed:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fivu-59f:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --step--2:clamp(0.75rem, 0.72rem + 0.15vw, 0.84rem);
    --step--1:clamp(0.88rem, 0.83rem + 0.24vw, 1.00rem);
    --fivu-ebd:clamp(1.00rem, 0.94rem + 0.31vw, 1.18rem);
    --fivu-0c8:clamp(1.18rem, 1.07rem + 0.55vw, 1.48rem);
    --fivu-1e9:clamp(1.42rem, 1.24rem + 0.90vw, 1.88rem);
    --fivu-448:clamp(1.75rem, 1.46rem + 1.45vw, 2.45rem);
    --fivu-4e4:clamp(2.15rem, 1.73rem + 2.10vw, 3.20rem);
    --fivu-880:clamp(2.65rem, 2.05rem + 3.00vw, 4.15rem);

    --space-3xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.35rem);
    --space-2xs:clamp(0.50rem, 0.45rem + 0.25vw, 0.65rem);
    --space-xs:clamp(0.75rem, 0.70rem + 0.25vw, 0.90rem);
    --space-s:clamp(1.00rem, 0.90rem + 0.50vw, 1.25rem);
    --space-m:clamp(1.50rem, 1.35rem + 0.75vw, 1.90rem);
    --space-l:clamp(2.00rem, 1.80rem + 1.00vw, 2.60rem);
    --space-xl:clamp(2.75rem, 2.40rem + 1.75vw, 3.80rem);
    --space-2xl:clamp(3.75rem, 3.20rem + 2.75vw, 5.25rem);
    --space-3xl:clamp(5.00rem, 4.20rem + 4.00vw, 7.20rem);

    --container-max:1280px;
    --gutter:clamp(1rem, 4vw, 2.5rem);

    --ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --duration-micro:140ms;
    --duration-short:200ms;
    --duration-medium:320ms;
    --duration-long:500ms;
}

*,
*::before,
*::after {
    box-sizing:border-box;
}

* {
    margin:0;
    padding:0;
}

html {
    font-size:100%;
    -webkit-text-size-adjust:100%;
    tab-size:4;
    scroll-behavior:smooth;
    background-color:var(--ground);
    color:var(--ink);
}

body {
    min-height:100vh;
    font-family:var(--fivu-bed);
    font-size:var(--fivu-ebd);
    line-height:1.6;
    color:var(--ink);
    background-color:var(--ground);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

img,
picture,
svg {
    display:block;
    max-width:100%;
    height:auto;
}

input,
button,
textarea,
select {
    font:inherit;
    color:inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap:break-word;
}

h1,
h2,
h3,
h4 {
    font-family:var(--fivu-78d);
    font-weight:400;
    line-height:1.15;
    color:var(--ink);
    letter-spacing:-0.01em;
}

h1 {
    font-size:var(--fivu-880);
    line-height:1.08;
}

h2 {
    font-size:var(--fivu-4e4);
    line-height:1.12;
}

h3 {
    font-size:var(--fivu-448);
    line-height:1.2;
}

h4 {
    font-size:var(--fivu-1e9);
    line-height:1.25;
}

p {
    max-width:68ch;
    color:var(--ink);
    font-size:var(--fivu-ebd);
    line-height:1.65;
}

p.lead {
    font-size:var(--fivu-0c8);
    line-height:1.5;
    color:var(--ink);
}

p.prose-muted {
    color:var(--ink-muted);
}

a {
    color:var(--primary);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
    transition:color var(--duration-short) var(--ease-out-quad),
                            text-decoration-color var(--duration-short) var(--ease-out-quad);

}

a:hover {
    color:var(--ink);
    text-decoration-thickness:2px;
}

a:focus-visible {
    outline:2px solid var(--primary);
    outline-offset:3px;
}

ul,
ol {
    list-style-position:outside;
    padding-left:1.25rem;
}

li {
    margin-bottom:0.35rem;
    max-width:68ch;

}

code,
pre,
kbd,
samp {
    font-family:var(--fivu-59f);
    font-size:0.9em;
}

blockquote {
    border-left:3px solid var(--primary);
    padding-left:var(--space-s);
    margin:var(--space-m) 0;
    font-style:italic;
    color:var(--ink-muted);
}

hr {
    border:0;
    border-top:1px solid var(--rule-hairline);
    margin:var(--space-xl) 0;
}

hr.heavy {
    border-top:2px solid var(--rule-heavy);
}

.mono {
    font-family:var(--fivu-59f);
    letter-spacing:-0.01em;
}

.mono-meta {
    font-family:var(--fivu-59f);
    font-size:var(--step--1);
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--ink-muted);
}

.shell-container {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
}

.flow > * + * {
    margin-top:var(--space-m);
}

.flow-tight > * + * {
    margin-top:var(--space-xs);
}

.flow-loose > * + * {
    margin-top:var(--space-xl);
}

.grid-cols-2 {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-l);
}

@media (min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.grid-cols-3 {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-m);
}

@media (min-width: 640px) {
    .grid-cols-3 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.sr-only {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;

    white-space:nowrap !important;
    border:0 !important;
}

.skip-link {
    position:absolute;
    top:-100px;
    left:var(--space-s);
    background:var(--ink);
    color:var(--ground);
    padding:0.65rem 1.25rem;
    font-family:var(--fivu-59f);
    font-size:var(--step--1);
    font-weight:500;
    text-decoration:none;
    z-index:10000;
    border:2px solid var(--primary);
    transition:top var(--duration-short) var(--ease-out-quad);
}

.skip-link:focus {
    top:var(--space-s);
    outline:2px solid var(--primary);
    outline-offset:2px;
}

.text-primary {
    color:var(--primary);
}

.text-ink {
    color:var(--ink);
}

.text-muted {
    color:var(--ink-muted);
}

.bg-ground {
    background-color:var(--ground);
}

.bg-surface {
    background-color:var(--surface-tint);
}

.bg-ink {
    background-color:var(--ink);
    color:var(--ground);
}

.bg-ink h1,
.bg-ink h2,
.bg-ink h3,
.bg-ink h4,
.bg-ink p {
    color:#fff !important;
}

section.bg-ink h2 {
    color:#fff !important;
}

.bg-ink .mono-meta {
    color:#b4b9c4;
}

.bg-ink hr {
    border-color:#2d333f;
}

.bg-accent-tint {
    background-color:var(--accent-tint);
}

.border-top-heavy {
    border-top:2px solid var(--rule-heavy);
}

.border-bottom-heavy {
    border-bottom:2px solid var(--rule-heavy);
}

.border-hairline {
    border:1px solid var(--rule-hairline);
}

#smooth-wrapper {
    overflow:hidden;
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#smooth-content {
    overflow:visible;
    width:100%;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }

    #smooth-wrapper {
        position:static;
        overflow:visible;
        height:auto;
    }

    #smooth-content {
        overflow:visible;
    }
}