/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
	scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dl,
dt,
blockquote {
    overflow-wrap: break-word;
}

a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
    font-size: 1rem;
    touch-action: manipulation;
}

/* additions from kevin powell tutorial */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    max-width: 75ch;
    text-wrap: pretty;
}

/* vars */

:root {
    /* typo */
    --font-base: 'Bricolage Grotesque', sans-serif;

    --text-xs: .75rem;
	--text-sm: .875rem;
	--text-base: clamp(.875rem, 2.5vw, 1rem);
	--text-lg: clamp(1rem, 2.5vw, 1.125rem);
	--text-xl: clamp(1.3125rem, 2.5vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 2.5vw, 2rem);
	--text-3xl: clamp(2rem, 5vw, 3.25rem);
	--text-4xl: clamp(2rem, 5vw, 4.75rem);

    --font-300: 300;
    --font-500: 500;

    /* colors */
    --color-off-white: #EAEBED;
    --color-off-black: #050609;

    --color-red: #6F1A07;

    /* spacing */
    --space-xs: clamp(0.5rem, 0.3261rem + 0.8696vw, 1rem);
    --space-s: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
    --space-base: clamp(1.5rem, 1.3261rem + 0.8696vw, 2rem);
    --space-lg: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
    --space-xl: clamp(2.5rem, 2.3261rem + 0.8696vw, 3rem);
    --space-2xl: clamp(3rem, 2.8261rem + 0.8696vw, 3.5rem);
    --space-3xl: clamp(3.5rem, 3.3261rem + 0.8696vw, 4rem);
    --space-4xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
}

/* typography */

@font-face {
    font-display: swap;
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 300;
    src: url('./assets/fonts/BricolageGrotesque_24pt-Light.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500;
    src: url('./assets/fonts/BricolageGrotesque_24pt-Medium.woff2') format('woff2');
}

body {
    background-color: var(--color-off-white);
    font-family: var(--font-base);
    font-size: var(--text-base);

    h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-base);
		font-weight: var(--font-500);
		line-height: 1;
    }

    h1 {
        color: var(--color-red);
        font-size: var(--text-3xl);
		line-height: var(--leading-none);
    }

    h2 {
        color: var(--color-red);
		font-size: var(--text-2xl);
		line-height: var(--leading-tight);
	}

	h3 {
        color: var(--color-red);
		font-size: var(--text-xl);
		line-height: var(--leading-tight);
	}

    h4,
	h5,
	h6 {
		font-size: var(--text-lg);
		line-height: var(--leading-base);
	}

    p,
	sub,
	span,
	ol,
	ul {
        color: var(--color-off-black);
		font-size: var(--text-xl);
		font-weight: var(--font-300);
		line-height: 1.65;
		text-wrap: balance;

	}

    strong {
        font-weight: var(--font-500);
    }

    a {
        font-size: var(--text-xl);
        font-weight: var(--font-300);
		line-height: 1.65;
		text-wrap: balance;
    }

    ul,
    ol {
        padding-left: 1rem;

        li {
            list-style-position: outside;
        }
    }

    /*  */

    article {
        padding: var(--space-base) var(--space-s);
    }

    .projects {
        display: flex;
        flex-flow: row wrap;
        gap: 0.25rem;

        a {
            color: var(--color-red);
            font-weight: var(--font-500);
            background-color: #fff;
            border-radius: 9999rem;
            border: 2px solid var(--color-red);
            padding: 0.25rem 0.75rem;
            text-decoration: none;
            transition: all 0.2s ease;

            &:hover,
            &:focus {
                background-color: var(--color-red);
                color: var(--color-off-white);
            }
        }
    }

    table {
        font-size: var(--text-lg);
        width: 100%;
        border-collapse: collapse;
        overflow: hidden;
    }

    th, 
    td {
        padding: var(--space-xs) 0;
        text-align: left;
    }

    th {
        font-weight: var(--font-500);
    }

    td {
        font-weight: var(--font-300);
    }

    footer {
        align-items: baseline;
        background-color: var(--color-red);
        display: flex;
        padding: var(--space-xs);
        justify-content: space-between;

        a,
        p {
            color: var(--color-off-white);
            font-size: var(--text-base);
        }
    }
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "image";
    gap: var(--space-base);
}

.grid > .one-third {
    grid-area: image;
}

.grid > .two-thirds {
    grid-area: content;
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: minmax(0, 450px) 1fr;
        grid-template-areas: "image content";
        align-items: start;
        gap: var(--space-lg);
    }
}