@import url('/fonts/franklin-gothic/franklin-gothic.css');

:root {
    /* Font sizes */
    --large: 5.653rem;
    --normal: 1rem;
    --small: 0.707rem;

    /* Colors */
    --fg: #000;
    --bg: #ececec;
    --orange: #ff4828;
    --orange-bg: #e05e47;
    --blue: #00afd7;
    --grey: #ececec;
    --border: #bdc3c7;

    /* Screen sizes */
    --large-screen: 1440px;
    --normal-screen: 1200px;
    --tablet-screen: 900px;
    --phone-screen: 600px;
    --small-screen: 300px;
}


/* Reset
 ============================================================== 
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/* Typography
 ============================================================== 
*/

html {
    font-size: 150%; /*24px*/
}
    @media (max-width: 600px) {
        html {
            font-size: 112.5%;
        }
    }

body {
    margin: 0;
    padding: 0;
    background-color: var(--grey);
    font-family: 'Franklin Gothic', sans-serif;
    font-weight: 400;
    line-height: 1.3;
    color: #000000;
}

p {
    margin-bottom: 1rem;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    margin: 1rem 0;
    font-family: 'Franklin Gothic', sans-serif;
    font-weight: 700;
    line-height: 1;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: 5.653rem;
    letter-spacing: -0.083rem;
}

h2 {
    font-size: 3.998rem;
    letter-spacing: -0.083rem;
}

h3 {
    font-size: 2.827rem;
    line-height: 1.25;
}

h4 {
    font-size: 1.999rem;
}

h5 {
    font-size: 1.414rem;
}

small {
    font-size: 0.707rem;
}

mark {
    background-color: unset;
    color: var(--orange);
}

a {
    color: var(--fg);
    text-rendering: optimizeLegibility;
}

a:hover {
    color: var(--blue);
}

ul {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
    list-style-type: square;
}

img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

iframe {
    border: 0;
    width: 100%;
}

figure {
    margin: 0 0 1rem;
    padding: 0;
    width: 100%;
}

figure img {
    border: 0.0625rem solid var(--border);
}

figure figcaption {
    font-size: var(--small);
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 0.1rem;
}



/* Main Elements
 ============================================================== 
*/

body > header {
    height: 100vh;
    box-sizing: border-box;
}

main section,
footer section,
.wrapper {
    /*max-width: var(--large-screen);*/
    margin: 0 auto;
}




/* Site Header
 ============================================================== 
*/

.site__header {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 3rem;
    background-color: var(--orange-bg);
    color: var(--bg);
}

.site__header mark {
    color: var(--fg);
}

.site__header a {
    color: var(--bg);
}

.site__header a:hover {
    color: var(--fg);
}



/* Site Navigation
 ============================================================== 
*/

.site__nav {
    /*font-size: var(--small);*/
}

.site__nav ul {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;

    list-style: none;
}

.footer__nav ul li:first-child {
    grid-column: 6;
}

.footer__nav ul li:nth-child(2) {
    grid-column: 7;
}





/* Banner
 ============================================================== 
*/

.site__banner {
    align-self: center;
}
    @media (max-width: 600px) {
        .site__banner {
            display: flex;
            align-items: center;
            text-align: center;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            direction: rtl;
        }
        .site__banner h1 {
            margin: 0;
            line-height: 1.5;
            transform: rotate(180deg);
        }
    }

.header__preamble {
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
    @media (max-width: 600px) {
        .header__preamble {
            font-size: 1rem;
        }
    }

.header__preamble p {
    grid-column: 1/7;
    margin-bottom: 0;
}
    @media (max-width: 600px) {
        .header__preamble p {
            grid-column: 1/13;
            grid-row: 2;
        }
    }

.header__preamble p + p {
    grid-column: 8/13;
}
    @media (max-width: 600px) {
        .header__preamble p + p {
            grid-column: 1/13;
            grid-row: 1;
        }
    }

.preamble__arrow {
    font-size: 9rem;
}





/* Articles
 ============================================================== 
*/
article section {
    padding: 0 1rem;
}

article section h2 {
    grid-column: span 12;
}

article section p {
    grid-column: span 2;
}

.project__item {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 1rem;
    margin: 4rem 0;
}

.project__description {
    margin-bottom: 0;
    
}

/* A */
.project__a .project__figure {
    grid-column: 1/8;
    grid-row: 1/13;
}
    @media (max-width: 1200px) {
        .project__a .project__figure {
            grid-column: 1/10;
        }
    }
    @media (max-width: 600px) {
        .project__a .project__figure {
            grid-column: 1/13;
            grid-row: 1/10;
        }
    }

.project__a .project__description {
    grid-column: 11/13;
    grid-row: 1/3;
}
    @media (max-width: 1200px) {
        .project__a .project__description {
            grid-column: 10/13;
            grid-row: 1/5;
        }
    }
    @media (max-width: 600px) {
        .project__a {
            grid-template-rows: repeat(3, 1fr);
        }
        .project__a .project__description {
            grid-column: 1/13;
            grid-row: 11/13;
        }
    }

/* B */
.project__b {
    grid-template-rows: repeat(3, 1fr) auto;
}
.project__b .project__figure {
    grid-column: 1/13;
    grid-row: 1/4;
}
.project__b .project__description {
    grid-column: 1/3;
    grid-row: 4;
    align-self: end;
}
    @media (max-width: 1200px) {
        .project__b .project__description {
            grid-column: 1/4;
        }
    }
    @media (max-width: 600px) {
        .project__b .project__description {
            grid-column: 1/13;
            grid-row: 4;
        }
    }

/* C */
.project__c .project__figure {
    grid-column: 5/13;
    grid-row: 1/13;
}
    @media (max-width: 1200px) {
        .project__c .project__figure {
            grid-column: 4/13;
        }
    }
    @media (max-width: 600px) {
        .project__c {
            grid-template-rows: repeat(3, 1fr) auto;
        }
        .project__c .project__figure {
            grid-column: 1/13;
            grid-row: 1/4;
        }
    }
.project__c .project__description {
    grid-column: 1/3;
    grid-row: 11/13;
    align-self: end;
}
    @media (max-width: 1200px) {
        .project__c .project__description {
            grid-column: 1/4;
            grid-row: 8/13;
        }
    }
    @media (max-width: 600px) {
        .project__c .project__description {
            grid-column: 1/13;
            grid-row: 4;
        }
    }

/* D */
.project__d .project__figure_a {
    grid-column: 1/5;
    grid-row: 1/13;
}
.project__d .project__figure_a img {
    object-position: left;
}

.project__d .project__figure_b {
    grid-column: 5/9;
    grid-row: 1/13;

}
    @media (max-width: 1200px) {
        .project__d .project__figure_a {
        }
        .project__d .project__figure_b {
        }
    }
    @media (max-width: 600px) {
        .project__d {
            grid-template-rows: repeat(2, 1fr) auto auto;
        }
        .project__d .project__figure_a {
            grid-column: 1/13;
            grid-row: 1;
        }
        .project__d .project__figure_b {
            grid-column: 1/13;
            grid-row: 2;
        }
    }

.project__d .project__description_a {
    grid-column: 11/13;
    grid-row: 7/10;
    align-self: end;
}

.project__d .project__description_b {
    grid-column: 11/13;
    grid-row: 10/13;
    align-self: end;
}
    @media (max-width: 1200px) {
        .project__d .project__description_a {
            grid-column: 9/13;
        }
        .project__d .project__description_b {
            grid-column: 9/13;

        }
    }
    @media (max-width: 600px) {
        .project__d .project__description_a {
            grid-column: 1/13;
            grid-row: 3;
        }
        .project__d .project__description_b {
            grid-column: 1/13;
            grid-row: 4;
        }
    }

/* E */
.project__e .project__figure_a {
    grid-column: 1/6;
    grid-row: 1/7;

}
.project__e .project__figure_b {
    grid-column: 1/6;
    grid-row: 7/13;

}
    @media (max-width: 1200px) {
        .project__e .project__figure_a {
            grid-column: 1/10;
        }
        .project__e .project__figure_b {
            grid-column: 1/10;
        }
    }
    @media (max-width: 600px) {
        .project__e .project__figure_a {
            grid-column: 1/13;
            grid-row: 1/6;
        }
        .project__e .project__figure_b {
            grid-column: 1/13;
            grid-row: 6/11;
        }
    }

.project__e .project__description_a {
    grid-column: 6/8;
    grid-row: 11;
    align-self: end;
}

.project__e .project__description_b {
    grid-column: 6/8;
    grid-row: 12;
    align-self: end;
}
    @media (max-width: 1200px) {
        .project__e .project__description_a {
            grid-column: 10/13;
            grid-row: 9/11;
        }
        .project__e .project__description_b {
            grid-column: 10/13;
            grid-row: 11/13;
        }
    }
    @media (max-width: 600px) {
        .project__e .project__description_a {
            grid-column: 1/13;
            grid-row: 11;
        }
        .project__e .project__description_b {
            grid-column: 1/13;
            grid-row: 12;
        }
    }


/* Website List
 ============================================================== 
*/
.website-list {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
}

.website-list__item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    margin-bottom: 2rem;
    color: var(--fg-color);
}

.website-list__item img {
    margin-bottom: 0.25rem;
    border: 0.0625rem solid var(--border);
}

@media all and (max-width: 1000px) {
    .website-list__item {
        max-width: 100%;
    }
}






/* Site Footer
 ============================================================== 
*/
footer {
    text-align: center;
    color: var(--bg);
    background-color: var(--fg);
    padding: 2rem 0 1rem;
}

footer section {
    max-width: 42.67rem;
    margin: 0 auto 2rem;
}

footer a {
    color: var(--blue);
}
footer a:hover {
    color: white;
}



.color__accent {
    color: var(--orange);
}