:root {
    --ground:#EEF4F7;
    --surface:#FFF;
    --surface-alt:#E4EDF2;
    --ink:#12181C;
    --ink-muted:#4A5862;
    --rule:#CAD7DF;
    --accent:#1B6B78;
    --accent-hover:#13505B;
    --accent-soft:rgba(27, 107, 120, 0.08);
    --accent-ring:rgba(27, 107, 120, 0.32);

    --wofa-3c7:'Newsreader', Georgia, serif;
    --wofa-dc4:'Source Serif 4', Charter, Georgia, serif;
    --wofa-aaa:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --step--1:clamp(0.7813rem, 0.7495rem + 0.1587vw, 0.875rem);
    --wofa-d37:clamp(1rem, 0.9576rem + 0.2119vw, 1.125rem);
    --wofa-645:clamp(1.25rem, 1.1822rem + 0.339vw, 1.45rem);
    --wofa-20b:clamp(1.5625rem, 1.4438rem + 0.5932vw, 1.9125rem);
    --wofa-936:clamp(1.9531rem, 1.7485rem + 1.0231vw, 2.5563rem);
    --wofa-eca:clamp(2.4414rem, 2.0991rem + 1.7115vw, 3.45rem);
    --wofa-bfe:clamp(3.0518rem, 2.4965rem + 2.7763vw, 4.6888rem);

    --space-3xs:clamp(0.25rem, 0.2288rem + 0.1059vw, 0.3125rem);
    --space-2xs:clamp(0.5rem, 0.4576rem + 0.2119vw, 0.625rem);
    --space-xs:clamp(0.75rem, 0.6864rem + 0.3178vw, 0.9375rem);
    --space-s:clamp(1rem, 0.9153rem + 0.4237vw, 1.25rem);
    --space-m:clamp(1.5rem, 1.3729rem + 0.6356vw, 1.875rem);
    --space-l:clamp(2rem, 1.8305rem + 0.8475vw, 2.5rem);
    --space-xl:clamp(3rem, 2.7458rem + 1.2712vw, 3.75rem);
    --space-2xl:clamp(4rem, 3.661rem + 1.6949vw, 5rem);
    --space-3xl:clamp(5.5rem, 4.8rem + 2.8vw, 7.5rem);

    --gutter:clamp(1.25rem, 4.5vw, 3.5rem);
    --container-max:82rem;
    --container-narrow:56rem;

    --ease-standard:cubic-bezier(0.2, 0, 0, 1);
    --ease-expressive:cubic-bezier(0.16, 1, 0.3, 1);
    --dur-rapid:140ms;
    --dur-base:220ms;
    --dur-deliberate:420ms;

    --radius-sharp:2px;
    --line-height-body:1.65;
    --line-height-tight:1.15;
    --line-height-display:1.08;
}

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

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

body {
    margin:0;

    padding:0;
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--wofa-dc4);
    font-size:var(--wofa-d37);
    line-height:var(--line-height-body);
    font-weight:400;
    font-feature-settings:'kern', 'liga', 'onum';
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    min-width:320px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:var(--wofa-3c7);
    color:var(--ink);
    line-height:var(--line-height-tight);
    font-weight:500;
    margin-top:0;
    margin-bottom:var(--space-s);
    letter-spacing:-0.012em;
    text-wrap:balance;
}

h1 {
    font-size:var(--wofa-eca);
    line-height:var(--line-height-display);
    font-weight:600;
}

@media (min-width: 64rem) {
    h1 {
        font-size:var(--wofa-bfe);
    }
}

h2 {
    font-size:var(--wofa-936);
    font-weight:500;
    line-height:1.18;
}

h3 {
    font-size:var(--wofa-20b);
    font-weight:500;
    line-height:1.24;
}

h4 {
    font-size:var(--wofa-645);
    font-weight:600;
    line-height:1.3;
}

p {
    margin-top:0;
    margin-bottom:var(--space-m);
    max-width:68ch;
}

p:last-child {
    margin-bottom:0;
}

ul,
ol {
    margin-top:0;
    margin-bottom:var(--space-m);
    padding-left:1.4em;
    max-width:68ch;
}

li {
    margin-bottom:var(--space-2xs);
}

li:last-child {
    margin-bottom:0;
}

strong,
b {
    font-weight:600;
    color:var(--ink);

}

em,
i {
    font-style:italic;
}

code,
kbd,
samp {
    font-family:var(--wofa-aaa);
    font-size:0.9em;
    background-color:var(--surface-alt);
    padding:0.15em 0.35em;
    border-radius:var(--radius-sharp);
    border:1px solid var(--rule);
}

pre {
    font-family:var(--wofa-aaa);
    font-size:var(--step--1);
    background:var(--surface);
    border:1px solid var(--rule);
    padding:var(--space-m);
    overflow-x:auto;
    border-radius:var(--radius-sharp);
}

blockquote {
    margin:var(--space-l) 0;
    padding:var(--space-m) var(--space-l);
    border-left:3px solid var(--accent);
    background:var(--surface);
    font-style:italic;
    font-size:var(--wofa-645);
}

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

a {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color var(--dur-rapid) var(--ease-standard),
                            text-decoration-color var(--dur-rapid) var(--ease-standard);
}

a:hover {
    color:var(--accent-hover);
    text-decoration-color:var(--accent-hover);
}

a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:var(--radius-sharp);
}

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

figure {
    margin:0;
}

figcaption {
    font-family:var(--wofa-aaa);
    font-size:var(--step--1);
    color:var(--ink-muted);
    letter-spacing:0.02em;
    margin-top:var(--space-xs);
}

table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    font-size:var(--step--1);
}

th,
td {
    padding:var(--space-xs) var(--space-s);
    border-bottom:1px solid var(--rule);
    vertical-align:top;
}

th {
    font-family:var(--wofa-aaa);
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
    background:var(--surface-alt);
}

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

.skip-link {
    position:absolute;
    top:-100px;
    left:var(--space-s);
    z-index:10000;
    background:var(--ink);
    color:var(--ground);
    padding:var(--space-xs) var(--space-m);
    font-family:var(--wofa-aaa);
    font-size:var(--step--1);
    text-transform:uppercase;
    letter-spacing:0.06em;
    border:1px solid var(--accent);
    text-decoration:none;
    transition:top var(--dur-rapid) var(--ease-standard);
}

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

.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;
}

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

.container-narrow {
    width:100%;
    max-width:var(--container-narrow);
    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-s);
}

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

.mono-meta {
    font-family:var(--wofa-aaa);
    font-size:var(--step--1);
    color:var(--ink-muted);
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.mono-spec {
    font-family:var(--wofa-aaa);
    font-size:var(--wofa-d37);
    color:var(--ink);
    font-variant-numeric:tabular-nums;
}

.icon {
    width:1.15em;
    height:1.15em;
    display:inline-block;

    vertical-align:-0.18em;
    fill:currentColor;
    flex-shrink:0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }

    [data-depth] {
        transform:none !important;
    }
}