@font-face {
    font-family: 'Hex Franklin';
    src: url(/assets/type/hexfranklin_variable.woff2) format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hex Franklin Narrow';
    src: url(/assets/type/hexfranklinnarrow_regular.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Big Shoulders';
    src: url(/assets/type/bigshoulders_variable.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Big Shoulders 36';
    src: url(/assets/type/bigshoulders_36pt_bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ratio: 1.6;
    --space--2: calc(var(--space--1) / var(--ratio));
    --space--1: calc(var(--space-0) / var(--ratio));
    --space-0: calc(1rem + .5vw); 
    --space-1: calc(var(--space-0) * var(--ratio));
    --space-2: calc(var(--space-1) * var(--ratio));
    --space-3: calc(var(--space-2) * var(--ratio));
    --body: 'Hex Franklin Narrow',system-ui, sans-serif;
    --display: 'Big Shoulders 36', system-ui, sans-serif;
    --paragraph: calc(1.13rem + .5vw);
    --primary: 22,  23,  24;
    --highlight: 0,  0,  255;
    --accent: 141,  140,  140;
    --background: 251,  250,  247;
}

@supports (font-variation-settings: normal) {
    :root {
        --body: 'Hex Franklin', system-ui, sans-serif;
        --display: 'Big Shoulders', system-ui, sans-serif;
    }
}

@media(prefers-color-scheme:dark) {
    :root {
    --primary: 211,  206,  193;
    --highlight: 80,  173,  215;
    --accent: 141,  140,  140;
    --background: 22,  23,  24;
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background: none;
    overscroll-behavior: none;
}

html {
    font-size: 16px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: #fff0;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--body);
    font-size: var(--paragraph);
    font-variation-settings: "wdth" 85, "wght" 425;
    font-style: normal;
    line-height: 1.5;
    color: rgb(var(--primary));
    background-color: rgb(var(--background));
}

.acme-all-purpose-wrapper {
    width: 100%;
    padding: 3rem 1.25rem;
}

.acme-all-purpose-wrapper.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header, 
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-family: var(--display);
    line-height: 1;
    text-transform: uppercase;
}

header {
    font-size: calc(var(--paragraph) * 1.3);
}

hr {
    flex-grow: 1;
    height: 1px;
    background: rgb(var(--accent));
}

.gap--2 {
    display: inline-block;
    width: var(--space--2);
}

.gap--1 {
    display: inline-block;
    width: var(--space--1);
}

main {
    padding: 4.5rem 0;
}

.heading-with-text > * + *,
.heading-no-text > * + * {
    margin-block-start: var(--space-1);
}

li + li {
    margin-block-start: var(--space--1);
}

.acme-article-wrapper > * + * {
    margin-block-start: var(--space-1);
}

article + div h2 {
    margin-block-start: var(--space-2);
}

.center {
    text-align: center;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.highlight {
    color: rgb(var(--highlight));
}

h1, 
h2 {
    font-family: var(--display) !important;
    font-size: calc(var(--paragraph) * 2);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

p, 
li {
    max-width: 59ch;
}

li {
    list-style: none;
}

a {
    color: rgb(var(--primary));
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(var(--accent));
    text-underline-offset: 2px;
    text-decoration-skip-ink: all;
    transition: opacity 0.2s ease;
}

@media (hover:hover) and (pointer:fine) {
    a:hover,
    button:hover {
        opacity: .6;
    }
}

.linkstyling-off a {
    text-decoration: none;
}

footer {
    font-size: calc(var(--paragraph) * 1.1);
}

button,
[role="button"] {
    font: inherit;
    line-height: normal;
    text-transform: uppercase;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid rgb(var(--highlight));
    outline-offset: 3px;
    border-radius: .25rem;
}

.skip-link {
    position: absolute;
    top: -999px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(var(--primary));
}

.skip-link:focus {
    top: 6px;
}

.vh {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .big-screen {
        display: none;
    }
}