/* ==========================================================================
   0. Fonts
   ========================================================================== */

    @font-face {
        font-family: 'Gilroy';
        src: url('fonts/gilroy-semibold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gilroy';
        src: url('fonts/gilroy-extrabold.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }

/* ==========================================================================
   1. Josh's Custom CSS Reset
   ========================================================================== */

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

    * {
        margin: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

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

    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
        border-radius: .25rem;
    }

    input, button, textarea, select {
        font: inherit;
    }

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

    p {
        text-wrap: pretty;
    }

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

/* ==========================================================================
   2. CSS Variables
   ========================================================================== */

    :root {
        --hue-primary:                  120deg;
        --hue-secondary:                25deg;

        --background:                   var(--hue-primary) 10% 10%;
        --text-color:                   var(--hue-primary) 5% 96%;
        --text-color-sub:               var(--hue-primary) 5% 40%;
        --element-interactive:          var(--hue-secondary) 90% 50%;

        --shadow-color:                 var(--hue-primary) 16% 2%;
        --box-shadow:                   0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
                                        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
                                        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
                                        5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);

        --xs:                           1rem;
        --sm:                           2.5rem;
        --md:                           5rem;
        --lg:                           10rem;
    }

    @media (prefers-color-scheme: light) {
        :root {
            --background:               var(--hue-primary) 5% 96%;
            --text-color:               var(--hue-primary) 10% 10%;
            --shadow-color:             var(--hue-primary) 2% 60%;
        }
    }

/* ==========================================================================
   3. Base Styles
   ========================================================================== */

    html {
        scroll-behavior: smooth;
        width: 100%;
        font-family: 'Gilroy', sans-serif;
        font-weight: 600;
        font-size: calc(.75vh + .75vw);
        line-height: 1;
        color: hsl(var(--text-color));
        background: hsl(var(--background));
    }

    html::-webkit-scrollbar {
        display: none;
    }

    body {
        font-size: clamp(20px, 1.5rem, 30px);
        background: inherit;
        color: inherit;
    }

/* ==========================================================================
   4. Typography
   ========================================================================== */

    p {
        max-width: 45ch;
        line-height: 1.5;
    }

    p.offsetParagraph {
        margin-top: var(--md);
    }

    p:not(:last-of-type) {
        margin-bottom: .5em;
    }

    h1, h2, h3, .textHuge, .textLarge, .textSmall {
        max-width: 30ch;
        font-weight: 800;
        line-height: 1.1;
    }

    h1, .textHuge {
        font-size: clamp(50px, 5rem, 125px);
    }

    h2, .textLarge {
        font-size: clamp(30px, 3rem, 75px);
    }

    h3, .textSmall {
        font-size: clamp(15px, 1.25rem, 30px);
    }

    h1 {
        margin: var(--lg) 0;
    }

    h2 {
        margin: var(--md) 0 var(--sm) 0;
    }

    h2.offsetHeading {
        margin: var(--md) 0;
    }

    h3 {
        margin: var(--sm) 0 var(--xs) 0;
    }

    .sub {
        color: hsl(var(--text-color-sub));
    }

/* ==========================================================================
   5. Layout & Structure
   ========================================================================== */

    header, section, footer {
        padding: var(--sm);
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--sm);
        padding-top: var(--sm);
    }

    #logo {
        height: var(--md);
    }

    #logo path {
        fill: none;
        stroke: hsl(var(--text-color));
        stroke-width: 3.65px;
        stroke-linecap: round;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        list-style: none;
        margin: var(--xs) 0 0 0;
        padding: 0;
    }

    nav ul li {
        text-align: right;
    }

    section.showcase {
        margin: var(--lg) 0;
    }

    section.showcase img {
        max-height: 40rem;
        margin: 0 auto;
    }

    footer {
        margin-top: var(--lg);
    }

/* ==========================================================================
   6. Components
   ========================================================================== */

    /* Links */
    a {
        text-decoration: none;
        color: hsl(var(--text-color-sub));
        line-height: inherit;
        font-weight: inherit;
        transition: color 0.3s;
    }

    a:hover {
        color: hsl(var(--text-color));
    }

    a.external {
        background-image: linear-gradient(hsl(var(--element-interactive) / .5), hsl(var(--element-interactive) / .5)),
                        linear-gradient(hsl(var(--element-interactive)), hsl(var(--element-interactive)));
        background-size: 100% .3em, 0 .3em;
        background-position: .3em 90%, .3em 90%;
        background-repeat: no-repeat, no-repeat;
        color: inherit;
        transition: background-size .3s, color .3s;
    }

    a.external:hover {
        background-size: 0 .3em, 100% .3em;
        color: hsl(var(--text-color));
    }

    /* Specific Gallery (mobile default) */
    .specificGallery {
        display: grid;
        grid-template-columns: auto auto;
        gap: 0;
        margin: var(--md) 0 var(--lg) 0;
        padding: 0;
    }

    .specificGallery img:nth-of-type(1) {
        width: 100%;
        grid-column: 1;
        align-self: start;
        justify-self: left;
    }

    .specificGallery img:nth-of-type(2) {
        width: 80%;
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        justify-self: left;
    }

    .specificGallery img:nth-of-type(3) {
        width: 70%;
        grid-column: 2;
        align-self: start;
        justify-self: right;
    }

    .specificGallery img:nth-of-type(4) {
        width: 80%;
        grid-column: 2;
        justify-self: right;
    }

    /* Gallery (mobile default) */
    .gallery {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: var(--lg);
        column-gap: var(--md);
        margin: var(--lg) 0;
    }

    .gallery > * {
        padding: 0;
        align-self: center;
    }

    .gallery .small {
        padding: var(--sm);
    }

    .gallery .stretch {
        grid-column: 1 / -1;
    }

    .gallery .stretch p {
        margin-left: 0;
    }

    .gallery p:first-of-type {
        padding-top: var(--sm);
    }

/* ==========================================================================
   7. Media Queries (enhancements for larger screens)
   ========================================================================== */

    @media (min-width: 50rem) {
        header {
            align-items: center;
        }

        nav ul {
            flex-direction: row;
            gap: var(--sm);
            margin-top: 0;
        }

        nav ul li {
            text-align: left;
        }

        section.twoColumns.showcase div {
            margin-left: var(--sm);
        }

        .gallery {
            grid-template-columns: 1fr 1fr;
        }

        .gallery .stretch p {
            margin-left: var(--sm);
        }

        .specificGallery {
            padding: 0 var(--sm);
        }
    }

    @media (min-width: 80rem) {
        section.twoColumns {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: var(--sm);
            align-items: center;
        }

        section.twoColumns h2 {
            margin-top: 0;
        }

        section.twoColumns.inverted {
            grid-template-columns: 2fr 3fr;
        }

        section.twoColumns > :first-child {
            margin-bottom: 0;
        }

        section.twoColumns.inverted > :first-child, .rightColumn {
            grid-column: 2;
            grid-row: 1;
        }

        section.twoColumns.inverted > :last-child, .leftColumn {
            grid-column: 1;
            grid-row: 1;
        }

        section.twoColumns.showcase div {
            margin-left: 0;
        }

        .gallery > * {
            padding: var(--sm);
        }

        .gallery .small {
            padding: var(--md);
        }

        .specificGallery {
            grid-template-columns: 1fr 1fr;
            gap: var(--md);
        }

        .specificGallery img:nth-of-type(1) {
            width: 65%;
            grid-column: 1 / -1;
            align-self: end;
            justify-self: center;
        }

        .specificGallery img:nth-of-type(2) {
            width: 100%;
            grid-column: auto;
            grid-row: auto;
            justify-self: center;
        }

        .specificGallery img:nth-of-type(3) {
            width: 80%;
            grid-column: auto;
            justify-self: center;
        }

        .specificGallery img:nth-of-type(4) {
            width: 50%;
            grid-column: 1 / -1;
            justify-self: center;
        }
    }