/* Vars 
============================================================== */
:root {
    --color-background: #F0F5F9;
    --color-default: #52616B;
    --color-highlight: #1E2022;
    --color-secondary: #444;
    --color-link: #1E2022;
    --font-size: 16px;
    --font-default: var(--font-size);
    --font-size-copy: 16px;
    --font-size-heading-l: 21px;
    --font-size-heading-s: 18px;
    --font-sans: 'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    --font-serif: 'Merriweather',Times, serif;
    --spacing: 1.5em;
    --spacing-s: calc(0.5 * var(--spacing));
    --spacing-l: calc(2 * var(--spacing));
    --spacing-col: calc(6 * var(--spacing));
    --spacing-width-max: 42rem;
}
/* Base 
============================================================== */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html {
    font-size: var(--font-default);
    font-family: var(--font-sans);
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-default);
    padding: 1rem;
}

section {
    margin-bottom: var(--spacing-l);
}

/* Typography 
============================================================== */
h1,h2,h3 {
    font-size: 1rem;
    margin: var(--spacing--s) 0;
    color: var(--color-highlight);
    font-weight: 600;
}

a {
    color: var(--color-link);
    text-decoration-thickness: .5px;
    text-underline-offset: .1em;
}

a:hover {
    transition: color .2s ease;
    color: #000;
}

p, ul {
    font-family: var(--font-serif);
    font-weight: normal;
    margin: 1em 0;
}

.label {
    color: var(--color-secondary);
}

.spaced a {
    color: var(--color-secondary);
}
/* Header 
============================================================== */
header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--spacing-l);
    color: var(--color-secondary);
}

header h1 {
    margin: 0;
    font-size: var(--font-size-heading-l);
}

header a {
    text-decoration: none;
    color: var(--color-secondary);
}

/* Homepage specific
============================================================== */
.spaced {
    margin-bottom: var(--spacing-l);
}

@media (min-width: 620px) {
    .spaced {
        display: grid;
        grid-template-columns: clamp(8em, 20vw, var(--spacing-col)) 1fr;
        align-items: baseline;
        margin-bottom: var(--spacing-s);
    }
}

small + p {
    margin-top: var(--spacing-s);
}

/* Widths and Margins
============================================================== */
header, h1, h2, h3, p, .spaced {
    max-width: var(--spacing-width-max);
    margin-left: auto;
    margin-right: auto;

}
h2 {
    margin-bottom: var(--spacing-s);
}