@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-display: swap;
    src: url(/NotoSans.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Jost';
    font-weight: normal;
    font-style: normal;
    src: url(/Jost.woff2) format('woff2');
}

:root
{
    /**
    * ⚠ Variables with names starting with “--_” SHOULD NOT be used for anything else than declaring other variables in :root.
    */

    /**
     * PALETTE
     */
    --_palette-teracotta:   oklch(49% 0.08071 41.498);
    --_palette-brick-dark:  oklch(52% 0.07000 56.600);
    --_palette-brick-light: oklch(80% 0.04266 64.941);
    --_palette-white:       oklch(96% 0.02600 90.099);
    --_palette-white:       oklch(98% 0.01292 82.334);
    --_palette-leather:     oklch(28% 0.04580 42.735);

    /**
     * COLOURS
     */
    --colour-canvas: var(--_palette-white); /* also uses in og:image generation */
    --colour-canvas-text: var(--_palette-leather);
    --colour-accent: var(--_palette-brick-dark);
    --colour-separator: var(--_palette-brick-light);
    --colour-heading: var(--_palette-teracotta); /* also used in logo.svg */

    /**
     * TYPOGRAPHY
     */
     --_typo-body-font-family: 'Noto Sans', system-ui, sans-serif;
     --_typo-body-font-size: 1em;
     --_typo-body-line-height: 1.5;
     --_typo-body-letter-spacing: 0.025em;

     --_typo-heading-font-family: 'Jost', system-ui, sans-serif;
     --_typo-heading-2-font-size: clamp(1.2em, 2lvw + 1em, 2em);
     --_typo-heading-3-font-size: clamp(1.1em, 1.5lvw + 1em, 1.8em);
     --_typo-heading-letter-spacing: 0.05em;
     --_typo-heading-line-height: 1.25;

     --_typo-small-font-size: 0.875em;
     --_typo-small-line-height: 1.25;
     --_typo-small-letter-spacing: 0.025em;

     --typo-body: normal var(--_typo-body-font-size) / var(--_typo-body-line-height) var(--_typo-body-font-family);
     --typo-body-letter-spacing: var(--_typo-body-letter-spacing);

     --typo-small: normal var(--_typo-small-font-size) / var(--_typo-small-line-height) var(--_typo-body-font-family);
     --typo-small-letter-spacing: var(--_typo-small-letter-spacing);

     --typo-heading-2: normal var(--_typo-heading-2-font-size) / var(--_typo-heading-line-height) var(--_typo-heading-font-family);
     --typo-heading-3: normal var(--_typo-heading-3-font-size) / var(--_typo-heading-line-height) var(--_typo-heading-font-family);
     --typo-heading-letter-spacing: var(--_typo-heading-letter-spacing);

     /**
      * SPACING
      */
      --_spacing-multiplier: 1.5;

      --spacing-tiny: calc(var(--spacing-small) / var(--_spacing-multiplier));
      --spacing-small: calc(var(--spacing-medium) / var(--_spacing-multiplier));
      --spacing-medium: 1.5rem;
      --spacing-large: calc(var(--_spacing-multiplier) * var(--spacing-medium));
      --spacing-huge: calc(var(--_spacing-multiplier) * var(--_spacing-multiplier) * var(--spacing-large));

      /**
       * THICKNESS
       */
       --thickness-thin: 1px;
}

        @layer base
{
    @view-transition {
      navigation: auto;
    }

    :root
    {
        color-scheme: light dark;
        box-sizing: border-box;
        accent-color: var(--colour-accent);
        scrollbar-gutter: stable both-edges;
    }

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

    body
    {
        display: flex;
        flex-direction: column;
        min-block-size: 100dvh;
        margin: 0;
        padding: 0;
        font: var(--typo-body);
        letter-spacing: var(--typo-body-letter-spacing);
        background-color: var(--colour-canvas);
        color: var(--colour-canvas-text);
    }

    a
    {
        color: var(--colour-accent);
    }

    img,
    svg
    {
        display: block;
        max-inline-size: 100%;
        max-block-size: 80lvb;
        block-size: auto;
        inline-size: auto;
        object-fit: contain;
        object-position: top;
        margin: auto;
    }

    h2,
    h3
    {
        letter-spacing: var(--typo-heading-letter-spacing);
        text-wrap: balance; /* TODO Only on narrow containers */
        text-box: trim-both cap alphabetic;
        color: var(--colour-heading);
    }

    h2
    {
        font: var(--typo-heading-2);
    }

    h3
    {
        font: var(--typo-heading-3);
    }

    small
    {
        font: var(--typo-small);
        letter-spacing: var(--typo-small-letter-spacing);
    }
}

        .root
{
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 100ch;
    margin-inline: auto;
    padding-inline: var(--spacing-small);
}

.main
{
    flex: 1;
}

.header__heading,
.intro
{
    margin-block: var(--spacing-medium);

    @media (height > 40em)
    {
        margin-block: var(--spacing-huge);
    }
}

.logo
{
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    color: var(--colour-accent);

    @media (width > 40em)
    {
        width: auto;
        height: 3em;
    }
}

        .section
{
    display: flex;
    gap: var(--spacing-medium) var(--spacing-large);
    flex-direction: column;
    margin-block: var(--spacing-huge);
}

.section__picture
{
    display: contents;
}

.section__image
{
    inline-size: 30em;
}

.section__content
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    hyphens: auto;
    hyphenate-limit-chars: 10 5 5;

    > h2,
    > h3,
    > h4,
    > h5,
    > h6,
    > p
    {
        margin-block: 0;
    }

    > h2,
    > h3
    {
        letter-spacing: var(--typo-heading-letter-spacing);
        text-align: center;
    }

    > h2
    {
        font: var(--typo-heading-2);
    }

    > h3
    {
        font: var(--typo-heading-3);
    }
}

@media (width > 45em)
{
    .section
    {
        flex-direction: row;
        justify-content: space-between;
    }

    .section__image {
        flex-shrink: 0;
        inline-size: 51%;
        margin: 0;

        .section:nth-child(odd) & {
            order: 2;
        }
    }

    .section__content
    {
        > h2
        {
            text-align: start;
        }
    }
}
.nav__list
    {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        place-content: center;
        gap: var(--spacing-small) var(--spacing-medium);
        padding: 0;
    }

    .nav__link
    {
        text-decoration: none;

        &[aria-current="page"]
        {
            text-decoration: underline;
            text-decoration-thickness: var(--thickness-thin);
        }
    }
.footer
    {
        --spacing: var(--spacing-medium);

        display: flex;
        flex-direction: column;
        gap: var(--spacing);

        margin-block: var(--spacing-large) var(--spacing);
        border-block-start: var(--thickness-thin) solid var(--colour-separator);
        padding-block-start: var(--spacing);

        :where(p),
        :where(ul)
        {
            margin: 0;
        }
    }

    .footer__contact
    {
        display: flex;
        gap: var(--spacing-small) var(--spacing-medium);
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer__legal
    {
        display: flex;
        gap: var(--spacing-small) var(--spacing-medium);
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer__social-links,
    .footer__legal-links
    {
        margin: 0;
        padding: 0;
        list-style: none;

        > :where(li)
        {
            display: inline-block;
        }
    }

    .footer__social-links
    {
        > :where(li > a)
        {
            :where(img, svg)
            {
                --size: 4em;
                block-size: var(--size);
                inline-size: var(--size);
            }
        }
    }

    .footer__legal-links
    {
        display: flex;
        gap: var(--spacing-tiny) var(--spacing-medium);
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }