/* ---------------------------------------------------------
   PERSONAL SITE
   --------------------------------------------------------- */

:root {
    --black: #070707;
    --white: #ffffff;

    --pink: #ff0a8a;
    --blue: #1455ff;
    --cyan: #00e8d2;
    --yellow: #dcff00;
    --purple: #823cff;

    --page-width: 1180px;

    --border: 4px;
}


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

.site-width {
    width: min(calc(100% - 3rem), var(--page-width));
    margin-inline: auto;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 9rem);
    background: var(--black);
}

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}


/* dot field in bottom-right */

.hero__dots {
    position: absolute;
    z-index: -1;
    right: -3rem;
    bottom: 1rem;

    width: 22rem;
    height: 16rem;

    opacity: .55;

    background-image:
        radial-gradient(circle, #fff 1.5px, transparent 1.5px);

    background-size: 11px 11px;

    transform: rotate(-8deg);
}


/* faint diagonal texture */

.hero__noise {
    position: absolute;
    z-index: -3;
    inset: 0;

    opacity: .11;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 18px,
            #fff 18px,
            #fff 19px
        );
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.hero__copy {
    position: relative;
}

.hero__kicker {
    display: table;
    margin: 0 0 1rem;
    padding: .45rem 1rem;

    background: var(--pink);
    color: var(--black);

    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;

    transform: rotate(-3deg);
}

.hero__title-wrap {
    position: relative;
    isolation: isolate;
}

.hero__title {
    position: relative;
    z-index: 2;

    margin: 0;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size: clamp(5rem, 11vw, 9.5rem);
    line-height: .76;
    letter-spacing: -.035em;
    text-transform: uppercase;
    transform: rotate(-5deg);
}

.hero__title span {
    display: block;
}

.hero__roles {
    display: table;
    margin: 2rem 0 2.2rem;
    padding: .45rem .8rem;

    background: var(--yellow);
    color: var(--black);

    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .035em;

    transform: rotate(-1deg);
}

.hero__bio {
    max-width: 39rem;
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.55;
}

.hero__bio p {
    margin: 0 0 1rem;
}

.hero__jump {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    margin-top: 1rem;
    padding: .9rem 1.1rem;

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

    color: var(--white);

    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.hero__jump:hover,
.hero__jump:focus-visible {
    background: var(--pink);
    color: var(--black);
    transform: translate(-3px, -3px);
}


/* decorative shards */

.hero__shard {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hero__shard--blue {
    top: -2rem;
    right: 4%;
    width: 11rem;
    height: 5rem;

    background: var(--blue);

    clip-path: polygon(
        0 0,
        100% 0,
        62% 48%,
        100% 48%,
        20% 100%,
        43% 56%,
        0 56%
    );

    transform: rotate(-8deg);
}

.hero__shard--pink {
    left: -4rem;
    bottom: .25rem;
    width: 6rem;
    height: 8rem;

    background: var(--pink);

    clip-path: polygon(
        0 22%,
        70% 0,
        45% 40%,
        100% 31%,
        22% 100%,
        44% 54%
    );
}


/* ---------------------------------------------------------
   PORTRAIT
   --------------------------------------------------------- */

.portrait {
    position: relative;
    width: min(100%, 34rem);
    aspect-ratio: 4 / 5;
    justify-self: end;
}

.portrait__outline,
.portrait__shadow,
.portrait__image {
    position: absolute;
}

.portrait__outline {
    inset: -1.3rem -1.2rem 1rem 1.4rem;

    border: 4px solid var(--white);

    transform: rotate(4deg);

    clip-path: polygon(
        3% 0,
        92% 2%,
        100% 15%,
        96% 100%,
        8% 96%,
        0 79%
    );
}

.portrait__shadow {
    inset: 1.5rem -1rem -1.4rem 1.5rem;

    background: var(--blue);

    transform: rotate(3deg);

    clip-path: polygon(
        5% 0,
        100% 0,
        94% 38%,
        100% 45%,
        96% 100%,
        0 96%,
        4% 57%,
        0 49%
    );
}

.portrait__image {
    inset: 0;

    overflow: hidden;

    border: 4px solid var(--white);
    background: var(--yellow);

    transform: rotate(-2deg);

    clip-path: polygon(
        5% 0,
        100% 0,
        95% 37%,
        100% 43%,
        96% 100%,
        0 96%,
        4% 57%,
        0 51%
    );
}

.portrait__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* bolt made entirely with clip-path */

.portrait__bolt {
    position: absolute;
    z-index: 5;

    right: -3.2rem;
    bottom: -3rem;

    width: 8rem;
    height: 13rem;

    background: var(--cyan);

    clip-path: polygon(
        58% 0,
        100% 0,
        69% 38%,
        100% 38%,
        17% 100%,
        42% 55%,
        0 55%
    );

    transform: rotate(8deg);
}


/* simple text cross instead of SVG */

.portrait__cross {
    position: absolute;
    z-index: 6;

    top: 44%;
    right: -4rem;

    color: var(--white);

    font-family: Arial, sans-serif;
    font-size: 3rem;
    font-weight: 900;

    transform: rotate(12deg);
}


/*
    Scribble built from multiple borders.
    The exact shape is intentionally imperfect.
*/

.portrait__scribble {
    position: absolute;
    z-index: 6;

    left: -3rem;
    bottom: 1rem;

    width: 6.5rem;
    height: 3.2rem;

    border-top: 7px solid var(--pink);
    border-radius: 50%;

    transform: rotate(-15deg);
}

.portrait__scribble::before,
.portrait__scribble::after {
    content: "";
    position: absolute;

    width: 6rem;
    height: 2rem;

    border-top: 6px solid var(--pink);
    border-radius: 50%;
}

.portrait__scribble::before {
    top: .65rem;
    left: .3rem;
}

.portrait__scribble::after {
    top: 1.3rem;
    left: -.2rem;
}


/* ---------------------------------------------------------
   PROJECTS
   --------------------------------------------------------- */

.projects {
    position: relative;
    padding: clamp(4rem, 8vw, 8rem) 0;
    color: var(--black);
    background: var(--black);
    border-top: 1px solid var(--white);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;

    margin-bottom: clamp(3rem, 5vw, 5rem);
}

.section-heading h2 {
    margin: 0;
    padding: .55rem 1.5rem;

    background: var(--purple);
    color: var(--white);

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;

    transform: rotate(-1deg);
}

.section-heading__line {
    height: 7px;
    background: var(--pink);
}


/* ---------------------------------------------------------
   PROJECT GRID
   --------------------------------------------------------- */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
}

.project {
    --accent: var(--pink);

    position: relative;

    border: var(--border) solid var(--accent);
    background: var(--white);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.project:hover {
    transform: translate(-7px, -7px);
    box-shadow: 9px 9px 0 var(--accent);
}

.project--pink {
    --accent: var(--pink);
}

.project--yellow {
    --accent: var(--yellow);
}

.project--cyan {
    --accent: var(--cyan);
}

.project--purple {
    --accent: var(--purple);
}


/* numbered tab */

.project__number {
    position: absolute;
    z-index: 5;

    top: -1.2rem;
    left: -1.2rem;

    min-width: 4.5rem;
    padding: .45rem .75rem;

    background: var(--accent);
    color: var(--black);

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size: 1.8rem;
    line-height: 1;
    text-align: center;

    transform: rotate(-3deg);
}


/* image area */

.project__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #ddd;
}

.project__image::after {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 0 64%,
            color-mix(in srgb, var(--accent), transparent 70%) 64% 100%
        );
}

.project__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .35s ease;
}

.project:hover .project__image img {
    transform: scale(1.035);
}


/* card copy */

.project__content {
    padding: 1.5rem;
}

.project__content h3 {
    margin: 0 0 .6rem;

    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.05;
}

.project__content p {
    margin: 0;

    max-width: 38rem;

    font-size: 1rem;
    line-height: 1.5;
}

.project__content a {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    margin-top: 1.3rem;
    padding: .65rem .85rem;

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

    color: var(--black);

    font-size: .9rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .18s ease,
        transform .18s ease;
}

.project__content a:hover,
.project__content a:focus-visible {
    background: var(--accent);
    transform: translate(-2px, -2px);
}


/* ---------------------------------------------------------
   CONNECT / FOOTER
   --------------------------------------------------------- */

.connect {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: clamp(4rem, 7vw, 6rem) 0;

    background: var(--black);
}

.connect__inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
}

.connect__eyebrow {
    display: table;

    margin: 0 0 .7rem;
    padding: .35rem .7rem;

    background: var(--yellow);
    color: var(--black);

    font-weight: 900;
    text-transform: uppercase;

    transform: rotate(-2deg);
}

.connect h2 {
    margin: 0;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: .9;
    text-transform: uppercase;
}


/* blue grid */

.connect__grid {
    position: absolute;
    z-index: -1;

    left: -2rem;
    bottom: -3rem;

    width: 28rem;
    height: 15rem;

    opacity: .65;

    background-image:
        linear-gradient(var(--blue) 2px, transparent 2px),
        linear-gradient(90deg, var(--blue) 2px, transparent 2px);

    background-size: 24px 24px;

    transform: rotate(4deg);
}


/* cyan stripe block */

.connect__stripes {
    position: absolute;
    z-index: -1;

    right: -3rem;
    top: 1rem;

    width: 24rem;
    height: 12rem;

    opacity: .85;

    background:
        repeating-linear-gradient(
            -45deg,
            var(--cyan) 0,
            var(--cyan) 11px,
            transparent 11px,
            transparent 22px
        );

    transform: rotate(-5deg);
}


/* ---------------------------------------------------------
   SOCIAL LINKS
   --------------------------------------------------------- */

.socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
}

.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3.1rem;
    padding: .7rem 1rem;

    border: 3px solid var(--white);
    background: var(--white);
    color: var(--black);

    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.socials a:nth-child(1):hover,
.socials a:nth-child(1):focus-visible {
    background: var(--pink);
}

.socials a:nth-child(2):hover,
.socials a:nth-child(2):focus-visible {
    background: var(--cyan);
}

.socials a:nth-child(3):hover,
.socials a:nth-child(3):focus-visible {
    background: var(--yellow);
}

.socials a:nth-child(4):hover,
.socials a:nth-child(4):focus-visible {
    background: var(--purple);
    color: var(--white);
}

.socials a:hover,
.socials a:focus-visible {
    transform: translate(-3px, -3px);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

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

    .portrait {
        width: min(85%, 31rem);
        justify-self: center;
    }

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

    .connect__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .socials {
        justify-content: flex-start;
    }

}


@media (max-width: 600px) {

    .site-width {
        width: min(calc(100% - 2rem), var(--page-width));
    }

    .hero {
        padding-top: 3rem;
    }

    .hero__title {
        font-size: clamp(4.2rem, 22vw, 7rem);
    }

    .hero__shard--blue {
        right: -1rem;
        width: 8rem;
    }

    .portrait {
        width: calc(100% - 2rem);
    }

    .portrait__bolt {
        right: -1.8rem;
        width: 6rem;
        height: 10rem;
    }

    .portrait__cross {
        right: -1.2rem;
    }

    .portrait__scribble {
        left: -1rem;
    }

    .section-heading {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .section-heading__line {
        display: none;
    }

    .project:hover {
        transform: none;
        box-shadow: none;
    }

    .connect__stripes {
        opacity: .4;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

:focus-visible {
    outline: 4px solid var(--cyan);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
    }

}