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

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

    /**
     * PALETTE
     */
    --_palette-orange: #fabc98;
    --_palette-brick: #dc8975;
    --_palette-brick-dark: #9b4e3b;
    --_palette-almost-white: #ffe5cd;
    --_palette-black: #000;
    --_palette-beige: #f1c2bb;
    --_palette-light-beige: #efe0de;
    --_palette-green: #cfd4c2;

    /**
     * COLOURS
     */
    --colour-canvas: var(--_palette-almost-white);
    --colour-canvas-text: var(--_palette-black);
    --colour-accent: var(--_palette-brick-dark);
    --colour-separator: var(--_palette-light-beige);

    /**
     * TYPOGRAPHY
     */
     --_typo-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-size: clamp(1.2em, 2lvw + 1em, 2em);
     --_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-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-font-family);
     --typo-small-letter-spacing: var(--_typo-small-letter-spacing);

     --typo-heading: bold var(--_typo-heading-font-size) / var(--_typo-heading-line-height) var(--_typo-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
{
    :root
    {
        color-scheme: light dark;
        box-sizing: border-box;
        accent-color: var(--colour-accent);
    }

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

    body
    {
        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: 50lvb;
        block-size: auto;
        inline-size: auto;
        object-fit: contain;
        object-position: top;
        margin: auto;
    }

    h1,
    h2, 
    h3,
    h4,
    h5,
    h6
    {
        font: var(--typo-heading);
        letter-spacing: var(--typo-heading-letter-spacing);
        text-wrap: balance;
        text-box: trim-both cap alphabetic;
    }

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

.root
{
    max-width: 100ch;
    margin-inline: auto;
    padding-inline: var(--spacing-small);
}

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

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

.intro
{
    text-align: center;
    text-wrap: balance;

}

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

.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
    {
        font: var(--typo-heading);
        letter-spacing: var(--typo-heading-letter-spacing);
        text-align: center;
    }
}

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

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

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

    .section__content
    {
        > h2
        {
            text-align: start;
        }
    }
}

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