@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    src: url('../fonts/PlusJakartaSans-Variable.ttf') format("truetype");
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/Fraunces-Variable.ttf') format("truetype");
}

:root {
    --page-width: 620px;

    --font-size-base: 1.125rem;
    --font-size-h1: calc(var(--font-size-base) * (36 / 17));
    --font-size-h2: calc(var(--font-size-base) * (28 / 17));
    --font-size-h3: calc(var(--font-size-base) * (26 / 17));
    --font-size-h4: calc(var(--font-size-base) * (22 / 17));
    --font-size-h5: calc(var(--font-size-base) * (18 / 17));
    --font-size-h6: calc(var(--font-size-base) * (16 / 17));

    --font-sans: "Plus Jakarta Sans", sans-serif;
    --font-serif: "Fraunces", serif;

    --bg: #97a4d7;
    --text: #1c1e2d;
    --text-emphasized: #161622;
    --link: #2c45b4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #c6cbee;
        --text-emphasized: #dbd8f6;
        --bg: #21223e;
        --link: #e8b27c;
    }
}

body {
    background: var(--bg);
    color: var(--text);

    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;

    margin: 0;
    padding: 0;
}

main {
    margin: 2em auto 4em;
    padding: 0 2em;
    width: calc(100% - 4em);
    max-width: var(--page-width);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;

    header,
    section,
    footer {
        width: 100%;
    }
}


header {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5rem;


    > span {
        color: var(--text-emphasized);
        line-height: 1.1;
        font-size: 60pt;
        font-family: var(--font-serif);
        font-optical-sizing: auto;
        font-weight: 900;
	    font-variation-settings: 'opsz' 80, 'soft' 0, 'wonk' 0;
    }
}
@media (width <= 640px) {
    header > span {
        font-size: 42pt;
    }
}


nav {
    max-width: var(--page-width);

    ul {
        width: 100%;
        list-style: none;
        margin: 0;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        place-items: center;

        row-gap: 0.5rem;
        column-gap: 1.5rem;
        padding: 0.25rem;
        width: calc(100% - 0.5rem);
        li {
            font-size: 1rem;
            text-transform: uppercase;
            font-weight: bold;

            a.active {
                text-decoration: none;
                color: var(--text-emphasized);
                pointer-events: none;
            }
        }
    }
}


section {

    & :first-child {
        margin-top: 0;
    }
}

footer {
    display: flex;
    flex-direction: column;
    place-items: center;
    gap: 1.5rem;

    span {
        color: color-mix(in srgb, var(--text), var(--bg) 20%);
        font-size: 0.9rem;

        * {
            font: inherit;
        }
    }
}


p {
    margin: 1rem 0;

    line-height: 1.6;
}

b,
strong {
    font-weight: bold;
}


a {
    cursor: pointer;
    color: var(--link);
    text-decoration: underline;


    &:focus-visible {
        outline: none;
        background-color: color-mix(in srgb, var(--link), transparent 80%);
    }

    &:hover,
    &:active {
        text-decoration: none;
    }
}

img {
    display: block;
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    margin-bottom: 2em;

    &.headshot {
        border-radius: 50%;
        aspect-ratio: 1/1;
        background-color: var(--text);
        border: 7px solid vaR(--text);
    }
}

ul {
    padding-left: 1em;

    li {
        margin: 0.5em 0;
    }
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;

    font-family: var(--font-serif);
    color: var(--text-emphasized);

    > * {
        font: inherit;
    }
}
h1, h2 {
    font-weight: 900;
    font-variation-settings: 'opsz' 60;
}
h3, h4 {
    margin: 0.83em 0;
    font-weight: 600;
    font-variation-settings: 'opsz' 30;
}
h5, h6 {
    margin: 0.83em 0;
    font-weight: 500;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }