/* =========================================
   FONTS + ROOT
========================================= */

@import url(
    "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Roboto:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@400;500;700;900&display=swap"
);


:root {

    /* =====================================
       COLOR PALETTE
    ===================================== */

    --sky-blue: #C5DFFC;

    --sky-blue-light: #C5DFFC;

    --ocean-blue: #3A3A3A;

    --deep-ocean: #292929;

    --soft-yellow: #FFF1A8;

    --white: #FFFFFF;

    --off-white: #F8FBFC;

    --black: #111111;

    --orange: #3A3A3A;


    /* =====================================
       UI
    ===================================== */

    --border: 3px solid var(--black);

    --shadow: 7px 7px 0 var(--black);

}


/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--sky-blue);

    color: var(--black);

    font-family:
        "Space Grotesk",
        sans-serif;

    overflow-x: hidden;

}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================
   BACKGROUND GRID
========================================= */

.grid-background {

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.055) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

}


/* =========================================
   NOISE TEXTURE
========================================= */

.noise {

    position: fixed;

    inset: 0;

    z-index: 1000;

    pointer-events: none;

    opacity: 0.035;

    background-image:

        url(
            "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.6'/%3E%3C/svg%3E"
        );

}


/* =========================================
   HEADER
========================================= */

.site-header {

    background: var(--sky-blue);

    padding:
        35px
        8vw
        25px;

    border-bottom:
        var(--border);

}


/* =========================================
   LOGO
========================================= */

.logo-container {

    position: relative;

    width: fit-content;

    margin:
        0
        auto
        30px;

    text-align: center;

}


.drew-logo {

    display: block;

    width:
        clamp(
            220px,
            30vw,
            500px
        );

    height: auto;

    object-fit: contain;

    filter:
        contrast(1.1);

}


/* =========================================
   PORTFOLIO MARQUEE
========================================= */

.marquee-section {

    width: 100%;

    overflow: hidden;

    border-top:
        1px solid grey;

    border-bottom:
        1px solid grey;

    margin:
        8px 0;

}


.marquee {

    width: 100%;

    overflow: hidden;

}


.marquee-track {

    display: flex;

    width: max-content;

    flex-shrink: 0;

    animation:
        marquee-scroll
        18s
        linear
        infinite;

    will-change:
        transform;

}


.marquee-content {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    white-space: nowrap;

}


.marquee-content span {

    flex-shrink: 0;

    font-family:
        "Roboto",
        sans-serif;

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--black);

    letter-spacing: 0;

    padding:
        5px
        45px;

}


/* =========================================
   MARQUEE ANIMATION
========================================= */

@keyframes marquee-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================
   PAUSE MARQUEE ON HOVER
========================================= */

.marquee:hover .marquee-track {

    animation-play-state:
        paused;

}


/* =========================================
   NAVIGATION
========================================= */

.main-nav {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    padding:
        18px
        0;

    border-top:
        2px solid
        var(--black);

    border-bottom:
        2px solid
        var(--black);

    flex-wrap: wrap;

}


.main-nav a {

    color: var(--black);

    text-decoration: none;

    font-family:
        "DM Mono",
        monospace;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1px;

    transition:
        color 0.2s,
        transform 0.2s;

}


.main-nav a:hover {

    color: #666666;

    transform:
        translateY(-2px);

}


.main-nav a span {

    color:
        var(--ocean-blue);

    margin-right:
        5px;

}


.nav-divider {

    width: 1px;

    height: 22px;

    background:
        var(--black);

}


/* =========================================
   IDENTITY LINE
========================================= */

.identity-line {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    padding-top: 22px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 1px;

}


.identity-line b {

    color:
        var(--orange);

    font-size:
        18px;

}


/* =========================================
   ABOUT ME HOMEPAGE
========================================= */

.hero {

    width: 100%;

    min-height: auto;

    padding:
        70px
        6%
        100px;

    background:
        var(--sky-blue);

}


/* =========================================
   MAIN ABOUT BOX
========================================= */

.hero > .about-box {

    width: 100%;

    max-width: 1100px;

    min-height: 600px;

    margin:
        0
        auto;

    padding:
        45px;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    box-sizing:
        border-box;

}


/* =========================================
   ABOUT TITLE
========================================= */

.about-title {

    display: flex;

    align-items: baseline;

    gap: 18px;

    margin:
        0
        0
        40px;

}


.about-title span {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


.about-title h1 {

    margin: 0;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );

    font-weight:
        700;

    letter-spacing:
        -2px;

}


/* =========================================
   ABOUT CONTENT
========================================= */

.about-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.85fr);

    gap: 55px;

    align-items: stretch;
}


.about-photo {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 24px;
}


.about-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 24px;
}


/* =========================================
   ABOUT TEXT
========================================= */

.about-text {

    width: 100%;

    max-width:
        500px;

}


.about-text h2 {

    margin:
        0
        0
        25px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            1.8rem,
            3vw,
            3rem
        );

    font-weight:
        700;

    letter-spacing:
        -1px;

}


.about-text p {

    margin:
        0
        0
        18px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.7;

    color:
        #333;

}


.about-link {

    display:
        inline-block;

    margin-top:
        10px;

    color:
        var(--black);

    font-family:
        "Roboto",
        sans-serif;

    font-weight:
        700;

    text-decoration:
        underline;

    text-underline-offset:
        4px;

}


.about-link:hover {

    opacity:
        0.6;

}


/* =========================================
   ABOUT PHOTO
========================================= */

.about-photo {

    width: 100%;

    aspect-ratio:
        3 / 5;

    overflow: hidden;

    border-radius:
        24px;

}


.about-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        24px;

}


/* =========================================
   SECONDARY ABOUT BOXES
========================================= */

.secondary-about-grid {

    width: 100%;

    max-width:
        1100px;

    margin:
        55px
        auto
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        35px;

}


.secondary-about-grid .about-box {

    width:
        100%;

    min-height:
        300px;

    padding:
        35px;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    box-sizing:
        border-box;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.secondary-about-grid .about-box:first-child {

    transform:
        rotate(-0.7deg);

}


.secondary-about-grid .about-box:last-child {

    transform:
        rotate(0.7deg);

}


.secondary-about-grid .about-box:hover {

    transform:
        translateY(-5px)
        rotate(0deg);

    box-shadow:
        10px
        10px
        0
        rgba(
            0,
            0,
            0,
            0.14
        );

}


/* =========================================
   CURRENT PAGE
========================================= */

.currently-page {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        70px
        6%
        100px;

    box-sizing:
        border-box;

}


.currently-intro {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0
        auto
        55px;

    text-align:
        center;

}


.currently-intro .section-label {

    justify-content:
        center;

    margin-bottom:
        25px;

}


.currently-intro h1 {

    margin:
        0
        0
        18px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            2.5rem,
            6vw,
            5rem
        );

    font-weight:
        700;

    letter-spacing:
        -3px;

}


.currently-intro p {

    max-width:
        600px;

    margin:
        0 auto;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.7;

    color:
        #333;

}


/* =========================================
   CURRENT GRID
========================================= */

.currently-grid {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        35px;

    align-items:
        stretch;

}


/* =========================================
   CURRENT BOX
========================================= */

.currently-box {

    position:
        relative;

    width:
        100%;

    min-height:
        330px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.currently-box:hover {

    transform:
        translateY(-5px)
        rotate(0deg);

    box-shadow:
        10px
        10px
        0
        rgba(
            0,
            0,
            0,
            0.14
        );

}


.currently-featured {

    grid-column:
        1 / -1;

    min-height:
        380px;

}


.currently-box:nth-child(1) {

    transform:
        rotate(-0.6deg);

}


.currently-box:nth-child(2) {

    transform:
        rotate(0.7deg);

}


.currently-box:nth-child(3) {

    transform:
        rotate(-0.5deg);

}


/* =========================================
   CURRENT NUMBER
========================================= */

.currently-number {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


/* =========================================
   CURRENT ICON
========================================= */

.currently-icon {

    margin-top:
        auto;

    margin-bottom:
        25px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        60px;

    line-height:
        1;

}


/* =========================================
   CURRENT CONTENT
========================================= */

.currently-content {

    width:
        100%;

}


.currently-kicker {

    display:
        block;

    margin-bottom:
        10px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.65rem;

    letter-spacing:
        1.5px;

    color:
        #777;

}


.currently-content h2 {

    margin:
        0
        10px;

    font-family:
        "Unbounded",
        sans-serif;

    font-size:
        clamp(
            1.15rem,
            3vw,
            2rem
        );

    line-height:
        1.2;

    letter-spacing:
        -1px;

}


.currently-content p {

    margin:
        0;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.7rem;

    letter-spacing:
        1px;

    color:
        #555;

}


/* =========================================
   CURRENT ARROW
========================================= */

.currently-arrow {

    position:
        absolute;

    right:
        30px;

    bottom:
        25px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        28px;

    transition:
        transform 0.2s ease;

}


.currently-box:hover .currently-arrow {

    transform:
        translateX(6px);

}


/* =========================================
   CURRENT UPDATE BOX
========================================= */

.current-update-box {

    width:
        100%;

    max-width:
        1100px;

    min-height:
        320px;

    margin:
        75px
        auto
        0;

    padding:
        45px;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    transform:
        rotate(0.5deg);

}


.current-update-heading {

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        center;

    gap:
        18px;

    margin-bottom:
        35px;

    text-align:
        center;

}


.current-update-heading span {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


.current-update-heading h2 {

    margin:
        0;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            1.7rem,
            4vw,
            3rem
        );

    font-weight:
        700;

}


.current-update-content {

    width:
        100%;

    max-width:
        850px;

    min-height:
        130px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.current-update-placeholder {

    margin:
        0;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.7rem;

    letter-spacing:
        1px;

    color:
        #888;

}


/* =========================================
   PROJECTS PAGE
========================================= */

.projects-page {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        70px
        6%
        100px;

    box-sizing:
        border-box;

}


.projects-intro {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0
        auto
        55px;

}


.projects-intro .section-label {

    margin-bottom:
        30px;

}


.projects-intro-box {

    width:
        100%;

    min-height:
        280px;

    padding:
        45px;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    transform:
        rotate(-0.5deg);

}


.projects-intro-number {

    display:
        block;

    margin-bottom:
        25px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


.projects-intro-box h1 {

    max-width:
        800px;

    margin:
        0
        0
        20px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;

}


.projects-intro-box p {

    max-width:
        700px;

    margin:
        0;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.7;

    color:
        #444;

}


/* =========================================
   PROJECT DIRECTORY
========================================= */

.project-directory {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        35px;

}


/* =========================================
   PROJECT CATEGORY BOX
========================================= */

.project-category-box {

    position:
        relative;

    width:
        100%;

    min-height:
        300px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    text-decoration:
        none;

    color:
        var(--black);

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.project-category-box:nth-child(odd) {

    transform:
        rotate(-0.6deg);

}


.project-category-box:nth-child(even) {

    transform:
        rotate(0.6deg);

}


.project-category-box:hover {

    transform:
        translateY(-5px)
        rotate(0deg);

    box-shadow:
        10px
        10px
        0
        rgba(
            0,
            0,
            0,
            0.14
        );

}


.project-category-number {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


.project-category-icon {

    margin-top:
        auto;

    margin-bottom:
        25px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        55px;

    line-height:
        1;

}


.project-category-content {

    padding-right:
        35px;

}


.project-category-content h2 {

    margin:
        0
        10px;

    font-family:
        "Unbounded",
        sans-serif;

    font-size:
        clamp(
            1.1rem,
            2.5vw,
            1.7rem
        );

    line-height:
        1.2;

    letter-spacing:
        -1px;

}


.project-category-content p {

    margin:
        0;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.65rem;

    line-height:
        1.6;

    letter-spacing:
        1px;

    color:
        #666;

}


.project-category-arrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        22px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        28px;

    transition:
        transform 0.2s ease;

}


.project-category-box:hover
.project-category-arrow {

    transform:
        translateX(6px);

}


/* =========================================
   BLOG PAGE
========================================= */

.blog-page {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        70px
        6%
        100px;

    box-sizing:
        border-box;

}


.blog-intro {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0
        auto
        60px;

}


.blog-intro .section-label {

    margin-bottom:
        30px;

}


.blog-intro h1 {

    margin:
        0
        0
        20px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height:
        0.95;

    letter-spacing:
        -4px;

}


.blog-intro h1 span {

    display:
        inline-block;

}


.blog-intro p {

    max-width:
        650px;

    margin:
        0;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        1rem;

    line-height:
        1.7;

    color:
        #444;

}


/* =========================================
   BLOG POST DIRECTORY
========================================= */

.blog-post-directory {

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        35px;

}


/* =========================================
   BLOG POST BOX
========================================= */

.blog-post-box {

    position:
        relative;

    width:
        100%;

    min-height:
        350px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    background:
        #fff7c7;

    border-radius:
        24px;

    box-shadow:
        8px
        8px
        0
        rgba(
            0,
            0,
            0,
            0.12
        );

    text-decoration:
        none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.blog-post-box:nth-child(odd) {

    transform:
        rotate(-0.6deg);

}


.blog-post-box:nth-child(even) {

    transform:
        rotate(0.6deg);

}


.blog-post-box:hover {

    transform:
        translateY(-5px)
        rotate(0deg);

    box-shadow:
        10px
        10px
        0
        rgba(
            0,
            0,
            0,
            0.14
        );

}


.blog-post-number {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.8rem;

    color:
        #666;

}


.blog-post-content {

    margin-top:
        auto;

    padding-right:
        35px;

}


.blog-post-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        18px;

}


.blog-post-meta span {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        0.62rem;

    letter-spacing:
        1px;

    color:
        #666;

}


.blog-post-content h2 {

    margin:
        0
        0
        18px;

    font-family:
        "Unbounded",
        sans-serif;

    font-size:
        clamp(
            1.15rem,
            2.5vw,
            1.7rem
        );

    line-height:
        1.25;

    letter-spacing:
        -1px;

}


.blog-post-content h2 a {

    color:
        #111;

    text-decoration:
        none;

}


.blog-post-content h2 a:hover {

    text-decoration:
        underline;

    text-decoration-thickness:
        2px;

    text-underline-offset:
        5px;

}


.blog-post-content p {

    margin:
        0;

    font-family:
        "Roboto",
        sans-serif;

    font-size:
        0.9rem;

    line-height:
        1.6;

    color:
        #555;

}


.blog-post-arrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        22px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        28px;

    color:
        #111;

    text-decoration:
        none;

    transition:
        transform 0.2s ease;

}


.blog-post-box:hover
.blog-post-arrow {

    transform:
        translate(
            5px,
            -5px
        );

}


.blog-post-placeholder {

    opacity:
        0.75;

}


.blog-post-placeholder h2 a {

    color:
        #777;

}


/* =========================================
   GENERAL SECTION LABEL
========================================= */

.section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-bottom:
        40px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        2px;

}


.section-label span {

    color:
        var(--orange);

}


/* =========================================
   SMILEY
========================================= */

.smiley {

    position:
        absolute;

    right:
        25px;

    bottom:
        12px;

    color:
        var(--orange);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        45px;

    transform:
        rotate(-10deg);

}


/* =========================================
   CONTACT PAGE
========================================= */

.contact-section {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.8fr);

    gap:
        80px;

    padding:
        100px
        8vw;

    background:
        var(--soft-yellow);

    color:
        var(--black);

    border-top:
        var(--border);

}


.contact-left h2 {

    margin:
        0
        0
        25px;

    font-family:
        "Unbounded",
        sans-serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height:
        0.9;

    letter-spacing:
        -4px;

}


.contact-left h2 span {

    color:
        var(--white);

    -webkit-text-stroke:
        2px
        var(--black);

}


.contact-left p {

    max-width:
        430px;

    margin:
        0;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        14px;

    line-height:
        1.7;

}


.contact-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        14px;

}


.contact-content a {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        20px
        22px;

    background:
        var(--white);

    color:
        var(--black);

    border:
        2px solid
        var(--black);

    text-decoration:
        none;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        12px;

    font-weight:
        bold;

    box-shadow:
        5px
        5px
        0
        var(--black);

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        background 0.2s;

}


.contact-content a:hover {

    background:
        var(--soft-yellow);

    transform:
        translate(
            4px,
            4px
        );

    box-shadow:
        1px
        1px
        0
        var(--black);

}


.contact-content a span {

    font-size:
        22px;

}


/* =========================================
   FOOTER
========================================= */

footer {

    display:
        grid;

    grid-template-columns:
        1fr
        2fr
        1fr;

    gap:
        25px;

    align-items:
        center;

    padding:
        35px
        8vw;

    background:
        var(--black);

    color:
        var(--white);

    border-top:
        var(--border);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

    letter-spacing:
        0.5px;

}


.footer-center {

    text-align:
        center;

    line-height:
        1.5;

    color:
        var(--sky-blue);

}


.footer-links {

    text-align:
        right;

}


.footer-links a {

    color:
        var(--white);

    text-decoration:
        none;

    transition:
        color 0.2s;

}


.footer-links a:hover {

    color:
        var(--orange);

}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {

    width:
        10px;

}


::-webkit-scrollbar-track {

    background:
        var(--white);

}


::-webkit-scrollbar-thumb {

    background:
        var(--ocean-blue);

    border:
        2px solid
        var(--black);

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    /* ABOUT */

    .about-content {

        grid-template-columns:
            1fr
            0.8fr;

        gap:
            40px;

    }


    /* CURRENT */

    .currently-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    /* CONTACT */

    .contact-section {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

}


/* =========================================
   TABLET — 800px
========================================= */

@media (max-width: 800px) {

    /* CURRENT */

    .currently-page {

        padding:
            55px
            30px
            80px;

    }


    .currently-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .currently-featured {

        grid-column:
            auto;

    }


    .currently-box {

        min-height:
            300px;

    }


    .currently-box:nth-child(1),
    .currently-box:nth-child(2),
    .currently-box:nth-child(3) {

        transform:
            rotate(0deg);

    }


    /* PROJECTS */

    .projects-page {

        padding:
            55px
            30px
            80px;

    }


    .project-directory {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .project-category-box {

        min-height:
            280px;

    }


    .project-category-box:nth-child(odd),
    .project-category-box:nth-child(even) {

        transform:
            rotate(0deg);

    }


    /* BLOG */

    .blog-page {

        padding:
            55px
            30px
            80px;

    }


    .blog-post-directory {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .blog-post-box {

        min-height:
            320px;

    }


    .blog-post-box:nth-child(odd),
    .blog-post-box:nth-child(even) {

        transform:
            rotate(0deg);

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    /* HEADER */

    .site-header {

        padding:
            25px
            20px
            20px;

    }


    .drew-logo {

        width:
            clamp(
                200px,
                60vw,
                330px
            );

    }


    .main-nav {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            0;

    }


    .main-nav a {

        padding:
            13px;

        text-align:
            center;

        border:
            1px solid
            rgba(
                0,
                0,
                0,
                0.15
            );

    }


    .nav-divider {

        display:
            none;

    }


    .identity-line {

        font-size:
            9px;

        gap:
            8px;

        line-height:
            1.6;

    }


    /* ABOUT */

    .hero {

        padding:
            45px
            20px
            70px;

    }


    .hero > .about-box {

        min-height:
            auto;

        padding:
            30px;

    }


    .about-title {

        gap:
            12px;

        margin-bottom:
            30px;

    }


    .about-title h1 {

        font-size:
            2.4rem;

        letter-spacing:
            -1.5px;

    }


    .about-content {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .about-text {

        max-width:
            none;

    }

    .about-left {

        width:
            100%;

    }


    .about-photo {

        width:
            100%;

        aspect-ratio:
            4 / 5;

        border-radius:
            20px;

    }


    .about-photo img {

        border-radius:
            20px;

    }


    .secondary-about-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

        margin-top:
            40px;

    }


    .secondary-about-grid .about-box {

        min-height:
            auto;

        padding:
            30px;

    }


    .secondary-about-grid .about-box:first-child,
    .secondary-about-grid .about-box:last-child {

        transform:
            rotate(0deg);

    }


    /* CURRENT */

    .currently-page {

        padding:
            45px
            20px
            70px;

    }


    .currently-intro {

        margin-bottom:
            40px;

    }


    .currently-intro h1 {

        font-size:
            2.7rem;

        letter-spacing:
            -2px;

    }


    .currently-intro p {

        font-size:
            0.95rem;

    }


    .currently-box {

        min-height:
            280px;

        padding:
            30px;

    }


    .currently-featured {

        min-height:
            310px;

    }


    .currently-icon {

        font-size:
            50px;

    }


    .currently-content {

        text-align:
            center;

    }


    .currently-kicker {

        text-align:
            center;

    }


    .currently-content h2 {

        font-size:
            1.2rem;

    }


    .currently-content p {

        text-align:
            center;

    }


    .currently-arrow {

        right:
            25px;

        bottom:
            20px;

    }


    .current-update-box {

        min-height:
            280px;

        margin-top:
            60px;

        padding:
            30px;

        transform:
            rotate(0deg);

    }


    .current-update-heading {

        flex-direction:
            column;

        align-items:
            center;

        gap:
            8px;

        margin-bottom:
            25px;

    }


    .current-update-heading h2 {

        font-size:
            1.6rem;

    }


    /* PROJECTS */

    .projects-page {

        padding:
            45px
            20px
            70px;

    }


    .projects-intro {

        margin-bottom:
            40px;

    }


    .projects-intro-box {

        min-height:
            260px;

        padding:
            30px;

    }


    .projects-intro-box h1 {

        font-size:
            2.3rem;

        letter-spacing:
            -1.5px;

    }


    .projects-intro-box p {

        font-size:
            0.9rem;

    }


    .project-category-box {

        min-height:
            270px;

        padding:
            30px;

    }


    .project-category-icon {

        font-size:
            48px;

    }


    .project-category-content {

        text-align:
            center;

        padding-right:
            0;

    }


    .project-category-content h2 {

        font-size:
            1.15rem;

    }


    .project-category-content p {

        text-align:
            center;

    }


    .project-category-arrow {

        right:
            24px;

        bottom:
            18px;

    }


    /* BLOG */

    .blog-page {

        padding:
            45px
            20px
            70px;

    }


    .blog-intro {

        margin-bottom:
            40px;

    }


    .blog-intro h1 {

        font-size:
            3rem;

        letter-spacing:
            -2px;

    }


    .blog-intro p {

        font-size:
            0.9rem;

    }


    .blog-post-box {

        min-height:
            300px;

        padding:
            30px;

    }


    .blog-post-content {

        padding-right:
            10px;

    }


    .blog-post-content h2 {

        font-size:
            1.2rem;

    }


    .blog-post-content p {

        font-size:
            0.85rem;

    }


    .blog-post-meta {

        flex-direction:
            column;

        gap:
            5px;

    }


    .blog-post-arrow {

        right:
            22px;

        bottom:
            18px;

    }


    /* CONTACT */

    .contact-section {

        padding:
            75px
            25px;

    }


    /* FOOTER */

    footer {

        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            30px
            25px;

    }


    .footer-center,
    .footer-links {

        text-align:
            center;

    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    /* HEADER */

    .main-nav {

        grid-template-columns:
            1fr;

    }


    .identity-line {

        display:
            none;

    }


    /* ABOUT */

    .hero {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .hero > .about-box {

        padding:
            25px;

    }


    .about-title {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            5px;

    }


    .about-title h1 {

        font-size:
            2.2rem;

    }


    .about-photo {

        aspect-ratio:
            4 / 5;

    }


    .secondary-about-grid .about-box {

        padding:
            25px;

    }


    /* CURRENT */

    .currently-page {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .currently-box {

        padding:
            25px;

    }


    .current-update-box {

        padding:
            25px;

    }


    .currently-intro h1 {

        font-size:
            2.35rem;

    }


    .current-update-heading h2 {

        font-size:
            1.4rem;

    }


    /* PROJECTS */

    .projects-page {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .projects-intro-box {

        padding:
            25px;

    }


    .projects-intro-box h1 {

        font-size:
            2rem;

    }


    .project-category-box {

        padding:
            25px;

        min-height:
            250px;

    }


    /* BLOG */

    .blog-page {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .blog-intro h1 {

        font-size:
            2.5rem;

    }


    .blog-post-box {

        padding:
            25px;

        min-height:
            280px;

    }


    /* CONTACT */

    .contact-section {

        padding:
            60px
            20px;

    }

}