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

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

html {
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
}

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

button {
    color: inherit;
}

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

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================
   VARIABLES
========================================= */

:root {
    --copper: #775537;
    --copper-dark: #4e3523;
    --cream: #f3f1ed;
    --yellow: #f7d984;
    --blue: #bfdcd9;
    --pink: #e7c4c7;
    --green: #bfd4b7;
    --ink: #25211e;
    --white: #ffffff;

    --display-font: "Bebas Neue", sans-serif;
    --body-font: "DM Sans", sans-serif;

    --page-padding: clamp(1.25rem, 4vw, 4rem);
    --large-radius: clamp(1.1rem, 2vw, 1.8rem);
}


/* =========================================
   BASE
========================================= */

body {
    min-width: 320px;
    overflow-x: hidden;

    background: var(--cream);
    color: var(--copper);

    font-family: var(--body-font);
    line-height: 1.5;
}

body.modal-open {
    overflow: hidden;
}

::selection {
    background: var(--yellow);
    color: var(--copper-dark);
}


/* =========================================
   PAGE PROGRESS
========================================= */

.page-progress {
    position: fixed;
    z-index: 500;

    top: 0;
    right: 0;

    width: 4px;
    height: 100vh;

    background: rgba(119, 85, 55, 0.12);
}

.page-progress__fill {
    display: block;

    width: 100%;
    height: 0;

    background: var(--copper);
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    display: grid;

    min-height: 100svh;

    padding:
        1.25rem
        var(--page-padding)
        2rem;

    overflow: hidden;
}

.hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    font-size: clamp(0.64rem, 0.9vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__meta a {
    border-bottom: 1px solid transparent;

    transition: border-color 180ms ease;
}

.hero__meta a:hover {
    border-color: currentColor;
}

.hero__content {
    display: grid;
    place-items: center;
    align-content: center;

    width: 100%;

    padding-block: 2.5rem;

    text-align: center;
}

.hero__name {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;

    gap: 0.14em;

    width: 100%;

    color: var(--copper);

    font-family: var(--display-font);
    font-size: clamp(4.3rem, 12.2vw, 12rem);
    font-weight: 400;
    letter-spacing: 0.012em;
    line-height: 0.78;
    text-transform: uppercase;
}


/* =========================================
   HERO CARD FAN
========================================= */

.card-fan {
    position: relative;
    z-index: 2;

    width: min(46vw, 34rem);
    height: min(28vw, 20rem);

    min-width: 19rem;
    min-height: 12rem;

    margin:
        clamp(1.2rem, 3.5vw, 3.2rem)
        auto
        clamp(0.75rem, 2vw, 1.5rem);

    perspective: 1200px;
    transform-style: preserve-3d;
}

.fan-card {
    --rotation: 0deg;
    --x: 0px;
    --y: 0px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;

    position: absolute;

    bottom: 4%;
    left: 50%;

    width: clamp(7.5rem, 14vw, 11.5rem);
    aspect-ratio: 0.76;

    overflow: hidden;

    border: 1px solid rgba(78, 53, 35, 0.12);
    border-radius: clamp(0.75rem, 1.5vw, 1.35rem);

    background: var(--white);

    box-shadow:
        0 1.2rem 2.4rem rgba(48, 34, 25, 0.16),
        0 0.25rem 0.8rem rgba(48, 34, 25, 0.08);

    transform:
        translateX(
            calc(
                -50% +
                var(--base-x) +
                var(--x)
            )
        )
        translateY(var(--y))
        rotate(var(--rotation))
        rotateX(var(--tilt-x))
        rotateY(var(--tilt-y));

    transform-origin: 50% 100%;
    transform-style: preserve-3d;

    transition:
        transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 250ms ease;

    will-change: transform;
}

.fan-card img {
    height: 100%;
    object-fit: cover;

    transition:
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fan-card:nth-child(1) {
    --base-x: -9rem;
    --rotation: -14deg;
    z-index: 1;
}

.fan-card:nth-child(2) {
    --base-x: -3rem;
    --rotation: -5deg;
    z-index: 2;
}

.fan-card:nth-child(3) {
    --base-x: 3rem;
    --rotation: 5deg;
    z-index: 3;
}

.fan-card:nth-child(4) {
    --base-x: 9rem;
    --rotation: 14deg;
    z-index: 4;
}

.fan-card:hover,
.fan-card:focus-visible {
    --y: -1.5rem;

    z-index: 10;
    outline: none;

    box-shadow:
        0 2rem 3.4rem rgba(48, 34, 25, 0.2),
        0 0.4rem 1rem rgba(48, 34, 25, 0.1);
}

.fan-card:hover img,
.fan-card:focus-visible img {
    transform: scale(1.035);
}

.hero__role {
    position: relative;
    z-index: 1;

    color: var(--copper);

    font-family: var(--display-font);
    font-size: clamp(2.8rem, 7vw, 7.2rem);
    letter-spacing: 0.025em;
    line-height: 0.9;
    text-transform: uppercase;
}

.hero__intro {
    max-width: 33rem;

    margin-top: clamp(1.1rem, 2vw, 1.8rem);

    color: var(--copper-dark);

    font-size: clamp(0.82rem, 1vw, 1rem);
    line-height: 1.7;
}

.hero__scroll {
    align-self: end;
    justify-self: center;

    display: flex;

    gap: 0.5rem;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__scroll span:last-child {
    transition: transform 180ms ease;
}

.hero__scroll:hover span:last-child {
    transform: translateY(0.25rem);
}


/* =========================================
   SHARED TEXT
========================================= */

.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* =========================================
   EXPERIENCE SECTION
========================================= */

.experience-section {
    position: relative;

    min-height: 100svh;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(3rem, 5vw, 5rem);

    overflow: hidden;

    background: var(--white);
    color: var(--ink);
}

.experience-heading {
    position: relative;
    z-index: 2;

    display: grid;
    justify-items: center;

    padding-inline: var(--page-padding);

    text-align: center;
}

.experience-heading h2 {
    margin-top: 0.7rem;

    font-family: var(--display-font);
    font-size: clamp(4.4rem, 10vw, 10rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.78;
    text-transform: uppercase;
}

.experience-heading__description {
    max-width: 29rem;

    margin-top: 1.25rem;

    color: rgba(37, 33, 30, 0.63);

    font-size: clamp(0.78rem, 1vw, 0.92rem);
    line-height: 1.65;
}


/* =========================================
   EXPERIENCE CAROUSEL
========================================= */

.experience-carousel {
    position: relative;

    display: flex;
    align-items: center;

    margin-top: clamp(3rem, 6vw, 6rem);
}

.experience-track {
    display: flex;
    align-items: center;

    width: 100%;

    gap: clamp(1.6rem, 4vw, 4.5rem);

    padding:
        clamp(2rem, 4vw, 4rem)
        max(var(--page-padding), calc((100vw - 31rem) / 2))
        clamp(3rem, 5vw, 5rem);

    overflow-x: auto;
    overflow-y: visible;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    cursor: grab;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
}

.experience-track::-webkit-scrollbar {
    display: none;
}

.experience-track:active {
    cursor: grabbing;
}

.experience-track:focus-visible {
    outline: none;
}


/* =========================================
   EXPERIENCE CARDS
========================================= */

.experience-card {
    --card-rotation: 0deg;

    flex:
        0
        0
        clamp(18rem, 30vw, 27rem);

    scroll-snap-align: center;
}

.experience-card:nth-child(1) {
    --card-rotation: -4deg;
}

.experience-card:nth-child(2) {
    --card-rotation: 3deg;
}

.experience-card:nth-child(3) {
    --card-rotation: -2deg;
}

.experience-card:nth-child(4) {
    --card-rotation: 4deg;
}

.experience-card:nth-child(5) {
    --card-rotation: -3deg;
}

.experience-card__button {
    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transform: rotate(var(--card-rotation));

    transition:
        transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.experience-card__button:hover,
.experience-card__button:focus-visible {
    transform:
        rotate(0deg)
        translateY(-1.25rem);

    outline: none;
}

.experience-card__art {
    position: relative;

    aspect-ratio: 0.93;

    overflow: hidden;

    border-radius: 0.8rem;

    box-shadow:
        0 1.5rem 3rem rgba(37, 33, 30, 0.13),
        0 0.2rem 0.8rem rgba(37, 33, 30, 0.08);

    transition:
        box-shadow 300ms ease;
}

.experience-card__button:hover .experience-card__art,
.experience-card__button:focus-visible .experience-card__art {
    box-shadow:
        0 2rem 4rem rgba(37, 33, 30, 0.18),
        0 0.3rem 1rem rgba(37, 33, 30, 0.1);
}

.experience-card__small-label {
    position: absolute;

    left: 1.2rem;
    bottom: 1.15rem;

    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.experience-card__caption {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 1rem;

    margin-top: 1.7rem;

    text-align: center;
}

.experience-card__company {
    font-family: var(--display-font);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: 0.025em;
    line-height: 1;
    text-transform: uppercase;
}

.experience-card__role {
    margin-top: 0.28rem;

    color: rgba(37, 33, 30, 0.55);

    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.experience-card__view {
    display: inline-grid;
    place-items: center;

    min-width: 3.6rem;

    padding: 0.48rem 0.8rem;

    border-radius: 999px;

    background: #dedede;

    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background 200ms ease,
        color 200ms ease,
        transform 200ms ease;
}

.experience-card__button:hover .experience-card__view,
.experience-card__button:focus-visible .experience-card__view {
    background: var(--ink);
    color: var(--white);

    transform: translateX(0.25rem);
}


/* =========================================
   SAP CARD ART
========================================= */

.experience-card--sap .experience-card__art {
    background: #92d5ed;
    color: #102840;
}

.sap-art__grid {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    opacity: 0.36;
}

.sap-art__grid span {
    border-right: 1px solid rgba(16, 40, 64, 0.25);
    border-bottom: 1px solid rgba(16, 40, 64, 0.25);
}

.sap-art__logo {
    position: absolute;

    top: 50%;
    left: 50%;

    font-family: var(--display-font);
    font-size: clamp(6rem, 11vw, 10rem);
    letter-spacing: -0.04em;
    line-height: 1;

    transform:
        translate(-50%, -50%)
        skewX(-9deg);
}


/* =========================================
   SEPTA CARD ART
========================================= */

.experience-card--septa .experience-card__art {
    background: #ece8df;
    color: #122440;
}

.septa-art__logo {
    position: absolute;

    top: 50%;
    left: 50%;

    padding: 0.35rem 0.8rem;

    border: 0.45rem solid #122440;

    background: #ece8df;

    font-family: var(--display-font);
    font-size: clamp(3.8rem, 7.2vw, 6.8rem);
    letter-spacing: 0.01em;
    line-height: 1;

    transform: translate(-50%, -50%);
}

.septa-art__route {
    position: absolute;
    inset: 0;
}

.route-line {
    position: absolute;

    border-radius: 999px;
}

.route-line--one {
    top: 14%;
    left: -10%;

    width: 120%;
    height: 0.8rem;

    background: #f2a23a;

    transform: rotate(18deg);
}

.route-line--two {
    top: 40%;
    left: -13%;

    width: 125%;
    height: 0.8rem;

    background: #5a9d62;

    transform: rotate(-22deg);
}

.route-line--three {
    right: 21%;
    bottom: -12%;

    width: 0.8rem;
    height: 130%;

    background: #5579b8;

    transform: rotate(13deg);
}

.route-stop {
    position: absolute;

    width: 1.45rem;
    aspect-ratio: 1;

    border: 0.35rem solid currentColor;
    border-radius: 50%;

    background: #ece8df;
}

.route-stop--one {
    top: 19%;
    left: 20%;
}

.route-stop--two {
    top: 31%;
    right: 15%;
}

.route-stop--three {
    right: 22%;
    bottom: 24%;
}

.route-stop--four {
    bottom: 17%;
    left: 18%;
}



/* =========================================
   SAXBYS CARD ART
========================================= */

.experience-card--saxbys .experience-card__art {
    background: #6b4c3b;
    color: #f7efe5;
}

.saxbys-art__title {
    position: absolute;

    top: 50%;
    left: 50%;

    font-family: var(--display-font);
    font-size: clamp(4.8rem, 9vw, 8.5rem);
    letter-spacing: 0.015em;
    line-height: 1;

    transform: translate(-50%, -50%);
}

.saxbys-art__ring {
    position: absolute;

    top: -2rem;
    right: -2rem;

    width: clamp(9rem, 18vw, 15rem);
    aspect-ratio: 1;

    border: clamp(1rem, 2vw, 1.7rem) solid rgba(247, 239, 229, 0.14);
    border-radius: 50%;
}

.saxbys-art__receipt {
    position: absolute;

    top: 1rem;
    left: 1rem;

    display: grid;
    gap: 0.22rem;

    width: min(48%, 10rem);
    padding: 0.7rem 0.75rem;

    border: 1px solid rgba(247, 239, 229, 0.25);

    background: rgba(247, 239, 229, 0.1);

    font-family: monospace;
    font-size: clamp(0.48rem, 0.75vw, 0.62rem);
    letter-spacing: 0.08em;
    line-height: 1.35;

    transform: rotate(-5deg);
}

/* =========================================
   MATH RESOURCE CENTER ART
========================================= */

.experience-card--mrc .experience-card__art {
    background: var(--yellow);
    color: var(--copper-dark);
}

.math-art__equations span {
    position: absolute;

    font-family: var(--display-font);
    font-size: clamp(2rem, 5vw, 4.3rem);

    opacity: 0.24;
}

.math-art__equations span:nth-child(1) {
    top: 5%;
    left: 8%;

    transform: rotate(-12deg);
}

.math-art__equations span:nth-child(2) {
    top: 7%;
    right: 12%;

    transform: rotate(13deg);
}

.math-art__equations span:nth-child(3) {
    top: 38%;
    left: 4%;
}

.math-art__equations span:nth-child(4) {
    top: 38%;
    right: 6%;
}

.math-art__equations span:nth-child(5) {
    bottom: 8%;
    left: 12%;
}

.math-art__equations span:nth-child(6) {
    right: 12%;
    bottom: 7%;

    transform: rotate(-10deg);
}

.math-art__equations span:nth-child(7) {
    top: 19%;
    left: 42%;

    font-size: 2rem;
}

.math-art__equations span:nth-child(8) {
    right: 41%;
    bottom: 19%;

    font-size: 2rem;
}

.math-art__title {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 85%;

    font-family: var(--display-font);
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    letter-spacing: 0.015em;
    line-height: 0.76;
    text-align: center;

    transform: translate(-50%, -50%);
}


/* =========================================
   CAN CARD ART
========================================= */

.experience-card--can .experience-card__art {
    background: var(--pink);
    color: #55363b;
}

.can-art__title {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 88%;

    font-family: var(--display-font);
    font-size: clamp(3.9rem, 7.5vw, 7rem);
    letter-spacing: 0.015em;
    line-height: 0.75;
    text-align: center;

    transform: translate(-50%, -50%);
}

.can-shape {
    position: absolute;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
}

.can-shape--one {
    top: -8%;
    left: -7%;

    width: 10rem;
    height: 10rem;
}

.can-shape--two {
    top: 9%;
    right: 8%;

    width: 4rem;
    height: 4rem;
}

.can-shape--three {
    right: -7%;
    bottom: 10%;

    width: 8rem;
    height: 8rem;
}

.can-shape--four {
    bottom: 5%;
    left: 8%;

    width: 3rem;
    height: 3rem;
}

.can-shape--five {
    top: 39%;
    left: 10%;

    width: 1.6rem;
    height: 1.6rem;
}


/* =========================================
   CAROUSEL ARROWS
========================================= */

.carousel-arrow {
    position: absolute;
    z-index: 10;

    top: 50%;

    display: grid;
    place-items: center;

    width: clamp(2.8rem, 4vw, 3.8rem);
    aspect-ratio: 1;

    border: 1px solid rgba(37, 33, 30, 0.18);
    border-radius: 50%;

    background: rgba(243, 241, 237, 0.9);
    backdrop-filter: blur(8px);

    font-size: 1.25rem;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.carousel-arrow:hover {
    background: var(--ink);
    color: var(--white);
}

.carousel-arrow--left {
    left: clamp(0.75rem, 2vw, 2rem);
}

.carousel-arrow--right {
    right: clamp(0.75rem, 2vw, 2rem);
}

.carousel-arrow--left:hover {
    transform:
        translateY(-50%)
        translateX(-0.2rem);
}

.carousel-arrow--right:hover {
    transform:
        translateY(-50%)
        translateX(0.2rem);
}

.experience-instructions {
    display: flex;
    justify-content: center;

    gap: 0.55rem;

    color: rgba(37, 33, 30, 0.48);

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================
   EXPERIENCE MODAL
========================================= */

.experience-modal {
    position: fixed;
    z-index: 1000;

    inset: 0;

    display: grid;
    place-items: center;

    padding: clamp(0.7rem, 2vw, 1.5rem);

    visibility: hidden;
    opacity: 0;

    transition:
        visibility 0s linear 400ms,
        opacity 300ms ease;
}

.experience-modal.is-open {
    visibility: visible;
    opacity: 1;

    transition-delay: 0s;
}

.experience-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(22, 20, 18, 0.78);
    backdrop-filter: blur(8px);
}

.experience-modal__panel {
    position: relative;
    z-index: 1;

    width: min(96vw, 86rem);
    max-height: calc(100svh - 2rem);

    overflow-y: auto;

    border-radius: 1rem;

    background: var(--cream);
    color: var(--ink);

    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, 0.34);

    opacity: 0;

    transform:
        translateY(3rem)
        scale(0.97);

    transition:
        opacity 400ms ease,
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);

    scrollbar-width: thin;
}

.experience-modal.is-open .experience-modal__panel {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.experience-modal__close {
    position: sticky;
    z-index: 5;

    top: 1rem;

    display: grid;
    place-items: center;

    width: 2.8rem;
    aspect-ratio: 1;

    margin:
        1rem
        1rem
        -3.8rem
        auto;

    border: 1px solid rgba(37, 33, 30, 0.18);
    border-radius: 50%;

    background: rgba(243, 241, 237, 0.9);
    backdrop-filter: blur(8px);

    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.experience-modal__close:hover {
    background: var(--ink);
    color: var(--white);

    transform: rotate(90deg);
}

.experience-modal__hero {
    display: grid;
    grid-template-columns: 0.25fr 1fr 0.35fr;

    gap: clamp(1.5rem, 5vw, 5rem);

    align-items: end;

    min-height: 33rem;

    padding:
        clamp(5rem, 9vw, 8rem)
        clamp(1.5rem, 6vw, 6rem)
        clamp(3rem, 6vw, 5rem);

    background: var(--yellow);
}

.experience-modal__number,
.experience-modal__dates,
.experience-modal__location {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.experience-modal__title h2 {
    margin-top: 0.8rem;

    font-family: var(--display-font);
    font-size: clamp(5rem, 12vw, 12rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 0.75;
    text-transform: uppercase;
}

.experience-modal__headline {
    margin-top: 1.8rem;

    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 500;
}

.experience-modal__dates {
    text-align: right;
}

.experience-modal__content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    gap: clamp(3rem, 8vw, 9rem);

    padding:
        clamp(4rem, 8vw, 8rem)
        clamp(1.5rem, 6vw, 6rem);
}

.experience-modal__introduction {
    max-width: 32rem;
}

.experience-modal__label {
    margin-bottom: 1.4rem;

    color: var(--copper);

    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.experience-modal__introduction > p:last-child {
    font-size: clamp(1.4rem, 2.3vw, 2.2rem);
    line-height: 1.35;
}

.experience-modal__details {
    display: grid;

    gap: 3.2rem;
}

.modal-section {
    padding-top: 1.2rem;

    border-top: 1px solid rgba(37, 33, 30, 0.16);
}

.modal-section h3 {
    margin-bottom: 1.4rem;

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.modal-section ul {
    display: grid;

    gap: 1.1rem;

    list-style: none;
}

.modal-section li {
    position: relative;

    padding-left: 1.5rem;

    font-size: clamp(0.9rem, 1.1vw, 1.02rem);
    line-height: 1.65;
}

.modal-section li::before {
    content: "↳";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--copper);
}

.modal-role {
    display: grid;
    grid-template-columns: 1fr auto;

    gap: 1rem;

    padding-block: 1rem;

    border-bottom: 1px solid rgba(37, 33, 30, 0.12);
}

.modal-role:first-child {
    padding-top: 0;
}

.modal-role:last-child {
    border-bottom: 0;
}

.modal-role__title {
    font-weight: 600;
}

.modal-role__dates {
    color: rgba(37, 33, 30, 0.58);

    font-size: 0.74rem;
    text-align: right;
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.6rem;
}

.modal-tag {
    padding: 0.6rem 0.85rem;

    border: 1px solid rgba(37, 33, 30, 0.18);
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 500;
}


/* Modal theme colors */

.experience-modal[data-theme="sap"]
.experience-modal__hero {
    background: #92d5ed;
    color: #102840;
}

.experience-modal[data-theme="septa"]
.experience-modal__hero {
    background: #ece8df;
    color: #122440;
}


.experience-modal[data-theme="saxbys"]
.experience-modal__hero {
    background: #6b4c3b;
    color: #f7efe5;
}

.experience-modal[data-theme="mrc"]
.experience-modal__hero {
    background: var(--yellow);
    color: var(--copper-dark);
}

.experience-modal[data-theme="can"]
.experience-modal__hero {
    background: var(--pink);
    color: #55363b;
}



/* =========================================
   PROJECTS INTRO
========================================= */

.projects-intro {
    padding: clamp(6rem, 12vw, 12rem) var(--page-padding);
    background: var(--copper);
    color: var(--cream);
}

.projects-intro__grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(3rem, 10vw, 11rem);
    align-items: end;
    margin-top: clamp(3rem, 7vw, 7rem);
}

.projects-intro h2,
.more-projects__heading h2 {
    font-family: var(--display-font);
    font-size: clamp(5rem, 13vw, 13rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.75;
    text-transform: uppercase;
}

.projects-intro__copy {
    display: grid;
    gap: 1rem;
    max-width: 27rem;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.7;
}

/* =========================================
   FEATURED PROJECTS
========================================= */

.featured-projects {
    background: var(--cream);
    color: var(--ink);
}

.featured-project {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(20rem, 1.18fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: center;
    min-height: 100svh;
    padding: clamp(5rem, 9vw, 9rem) var(--page-padding);
    border-bottom: 1px solid rgba(37, 33, 30, 0.12);
}

.featured-project:nth-child(even) {
    grid-template-columns: minmax(20rem, 1.18fr) minmax(0, 0.82fr);
}

.featured-project__text {
    max-width: 38rem;
}

.featured-project__index,
.featured-project__category {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.featured-project__category {
    margin-top: 3.5rem;
    color: rgba(37, 33, 30, 0.55);
}

.featured-project h3 {
    margin-top: 1rem;
    font-family: var(--display-font);
    font-size: clamp(4.4rem, 8vw, 9rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.78;
    text-transform: uppercase;
}

.featured-project__summary {
    max-width: 32rem;
    margin-top: 2rem;
    color: rgba(37, 33, 30, 0.7);
    font-size: clamp(0.95rem, 1.2vw, 1.12rem);
    line-height: 1.75;
}

.project-open-button {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 2rem;
    padding: 0 0 0.35rem;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font-weight: 600;
    cursor: pointer;
}

.project-open-button span { transition: transform 180ms ease; }
.project-open-button:hover span { transform: translate(0.18rem, -0.18rem); }

.project-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 0.82;
    overflow: hidden;
    padding: clamp(1.2rem, 2vw, 2rem);
    border: 0;
    border-radius: 0.8rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2rem 4rem rgba(37, 33, 30, 0.16);
    transform: rotate(var(--poster-rotation, 0deg));
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms ease;
}

.project-poster:hover,
.project-poster:focus-visible {
    transform: rotate(0deg) translateY(-1rem) scale(1.01);
    box-shadow: 0 3rem 5rem rgba(37, 33, 30, 0.22);
    outline: none;
}

.featured-project--way2go .project-poster { --poster-rotation: -2deg; }
.featured-project--cardwise .project-poster { --poster-rotation: 2.5deg; }

.poster-kicker,
.poster-footer,
.poster-stat {
    position: absolute;
    z-index: 3;
    font-size: clamp(0.58rem, 0.9vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.poster-kicker { top: 1.5rem; left: 1.5rem; }
.poster-footer { left: 1.5rem; bottom: 1.4rem; }
.poster-stat { right: 1.5rem; bottom: 1.35rem; font-size: clamp(1.8rem, 5vw, 4.5rem); font-family: var(--display-font); }
.poster-title {
    position: absolute;
    z-index: 2;
    top: 50%; left: 50%;
    width: 88%;
    font-family: var(--display-font);
    font-size: clamp(5rem, 11vw, 11rem);
    letter-spacing: 0.01em;
    line-height: 0.72;
    text-align: center;
    transform: translate(-50%, -50%);
}

.project-poster--rwecs { background: #9dd9ef; color: #10283f; }
.poster-orbit { position: absolute; border: 2px solid currentColor; border-radius: 50%; opacity: 0.32; }
.poster-orbit--one { width: 78%; aspect-ratio: 1; top: 8%; left: -25%; }
.poster-orbit--two { width: 58%; aspect-ratio: 1; right: -14%; bottom: 7%; }

.project-poster--way2go { background: #183a36; color: #f4efdf; }
.poster-map {
    position: absolute; inset: -20%; opacity: 0.32;
    background-image: linear-gradient(35deg, transparent 45%, currentColor 46%, currentColor 47%, transparent 48%), linear-gradient(125deg, transparent 46%, currentColor 47%, currentColor 48%, transparent 49%);
    background-size: 4rem 4rem;
    transform: rotate(8deg);
}

.project-poster--cardwise { background: #171717; color: #f6d470; }
.poster-card { position: absolute; width: 54%; aspect-ratio: 1.6; border: 1px solid currentColor; border-radius: 1rem; opacity: 0.45; }
.poster-card--one { top: 17%; right: -10%; transform: rotate(18deg); }
.poster-card--two { bottom: 12%; left: -12%; transform: rotate(-16deg); }

/* =========================================
   MORE PROJECTS
========================================= */

.more-projects {
    padding: clamp(6rem, 11vw, 11rem) var(--page-padding);
    background: var(--white);
    color: var(--ink);
}

.more-projects__heading {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.more-projects__heading .eyebrow { grid-column: 1 / -1; }
.more-projects__heading h2 { font-size: clamp(4.3rem, 10vw, 10rem); }
.more-projects__heading > p:last-child { max-width: 28rem; color: rgba(37, 33, 30, 0.62); line-height: 1.7; }

.more-projects__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(5rem, 9vw, 9rem);
}

.small-project { grid-column: span 4; }
.small-project:nth-child(2), .small-project:nth-child(5) { transform: translateY(4rem); }
.small-project:nth-child(4) { grid-column: 3 / span 4; }

.small-project__button {
    width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer;
    transform: rotate(var(--small-rotation, 0deg));
    transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.small-project:nth-child(1) .small-project__button { --small-rotation: -2.5deg; }
.small-project:nth-child(2) .small-project__button { --small-rotation: 2deg; }
.small-project:nth-child(3) .small-project__button { --small-rotation: -1.5deg; }
.small-project:nth-child(4) .small-project__button { --small-rotation: 2.5deg; }
.small-project:nth-child(5) .small-project__button { --small-rotation: -2deg; }
.small-project__button:not(.small-project__button--static):hover,
.small-project__button:not(.small-project__button--static):focus-visible { transform: rotate(0deg) translateY(-0.8rem); outline: none; }

.small-project__art {
    position: relative; aspect-ratio: 0.94; overflow: hidden; padding: 1.25rem; border-radius: 0.7rem;
    box-shadow: 0 1.25rem 2.5rem rgba(37, 33, 30, 0.13);
}
.small-project__art strong {
    position: absolute; z-index: 2; top: 50%; left: 50%; width: 88%;
    font-family: var(--display-font); font-size: clamp(3rem, 5.3vw, 5.7rem); font-weight: 400; line-height: 0.76; text-align: center;
    transform: translate(-50%, -50%);
}
.small-project__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.small-project__meta h3 { font-family: var(--display-font); font-size: 1.7rem; font-weight: 400; text-transform: uppercase; }
.small-project__meta p, .small-project__meta > span { margin-top: 0.2rem; color: rgba(37, 33, 30, 0.55); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.small-project--voyago .small-project__art { background: #d5c6b0; color: #513a29; }
.small-project__stamp { position: absolute; top: 1rem; right: 1rem; padding: 0.35rem; border: 1px solid currentColor; font-size: 0.58rem; letter-spacing: 0.12em; transform: rotate(8deg); }
.small-project__line { position: absolute; width: 115%; height: 2px; left: -8%; bottom: 20%; background: currentColor; transform: rotate(-18deg); opacity: 0.35; }

.small-project--plant .small-project__art { background: #bfd4b7; color: #31482d; }
.plant-leaf { position: absolute; width: 34%; aspect-ratio: 0.65; border-radius: 100% 0 100% 0; background: rgba(255,255,255,.45); }
.plant-leaf--one { top: -4%; left: 5%; transform: rotate(-22deg); }
.plant-leaf--two { right: -4%; bottom: 1%; transform: rotate(36deg); }

.small-project--rfx .small-project__art { background: #9dd9ef; color: #10283f; }
.rfx-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 3rem 3rem; }
.small-project__code { position: absolute; left: 1rem; bottom: 1rem; font-size: .6rem; letter-spacing: .12em; }

.small-project--portfolio .small-project__art { background: #e7c4c7; color: #55363b; }
.portfolio-window { position: absolute; width: 62%; aspect-ratio: 1.4; border: 2px solid currentColor; background: rgba(255,255,255,.22); }
.portfolio-window--one { top: 8%; left: -11%; transform: rotate(-10deg); }
.portfolio-window--two { right: -8%; bottom: 7%; transform: rotate(12deg); }

.small-project--more .small-project__art { background: var(--yellow); color: var(--copper-dark); }
.small-project__asterisk { position: absolute; top: 1rem; right: 1rem; font-size: 3rem; }




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

.about {
    padding:
        clamp(5rem, 11vw, 11rem)
        var(--page-padding);

    background: var(--blue);
}

.about__grid {
    display: grid;
    grid-template-columns: 1.45fr 0.65fr;

    gap: clamp(3rem, 9vw, 10rem);

    align-items: end;

    margin-top: clamp(3rem, 7vw, 7rem);
}

.about h2 {
    font-family: var(--display-font);
    font-size: clamp(3.5rem, 8.5vw, 8.5rem);
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 0.82;
    text-transform: uppercase;
}

.about__copy {
    display: grid;

    gap: 1.2rem;

    color: var(--copper-dark);

    font-size: clamp(0.92rem, 1.1vw, 1.08rem);
    line-height: 1.75;
}

.text-link {
    width: fit-content;

    margin-top: 1.1rem;
    padding-bottom: 0.25rem;

    border-bottom: 1px solid currentColor;

    font-weight: 600;
}


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

.contact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 92svh;

    padding:
        clamp(4rem, 8vw, 7rem)
        var(--page-padding)
        1.5rem;

    background: var(--copper);
    color: var(--cream);
}

.contact__link {
    width: fit-content;

    font-family: var(--display-font);
    font-size: clamp(6rem, 19vw, 19rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.8;
    text-transform: uppercase;

    transition:
        transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact__link:hover {
    transform: translateX(0.03em);
}

.contact__footer {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================
   HERO ENTRANCE ANIMATION
========================================= */

.hero__meta,
.hero__name,
.hero__role,
.hero__intro,
.hero__scroll {
    opacity: 0;

    animation:
        reveal
        700ms
        cubic-bezier(0.2, 0.8, 0.2, 1)
        forwards;
}

.hero__meta {
    animation-delay: 50ms;
}

.hero__name {
    animation-delay: 120ms;
}



.hero__role {
    animation-delay: 470ms;
}

.hero__intro {
    animation-delay: 580ms;
}

.hero__scroll {
    animation-delay: 700ms;
}

@keyframes reveal {
    from {
        opacity: 0;

        transform: translateY(1.25rem);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


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

@media (max-width: 900px) {

    .hero__name {
        flex-direction: column;

        gap: 0;

        font-size: clamp(4.5rem, 19vw, 8.5rem);
    }

    .card-fan {
        width: min(84vw, 32rem);
        height: min(53vw, 19rem);
    }

    .experience-modal__hero {
        grid-template-columns: 1fr;
        align-items: start;

        min-height: auto;
    }

    .experience-modal__dates {
        text-align: left;
    }

    .experience-modal__content {
        grid-template-columns: 1fr;
    }

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


    .projects-intro__grid,
    .more-projects__heading,
    .project-modal__body {
        grid-template-columns: 1fr;
    }

    .featured-project,
    .featured-project:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .featured-project--way2go .featured-project__poster {
        order: 2;
    }

    .more-projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .small-project,
    .small-project:nth-child(4) {
        grid-column: auto;
    }

}


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

@media (max-width: 620px) {

    .hero {
        padding-top: 1rem;
    }

    .hero__meta {
        align-items: center;
        flex-direction: column;

        gap: 0.2rem;

        text-align: center;
    }

    .card-fan {
        width: 91vw;
        height: 58vw;

        min-width: 0;
        min-height: 11rem;
    }

    .fan-card {
        width: clamp(6.2rem, 28vw, 8rem);
    }

    .fan-card:nth-child(1) {
        --base-x: -5.5rem;
    }

    .fan-card:nth-child(2) {
        --base-x: -1.8rem;
    }

    .fan-card:nth-child(3) {
        --base-x: 1.8rem;
    }

    .fan-card:nth-child(4) {
        --base-x: 5.5rem;
    }

    .experience-heading h2 {
        font-size: clamp(4rem, 20vw, 7rem);
    }

    .experience-card {
        flex-basis: 76vw;
    }

    .experience-track {
        padding-inline: 12vw;
    }

    .carousel-arrow {
        display: none;
    }

    .experience-card__caption {
        align-items: flex-start;
        flex-direction: column;

        text-align: left;
    }

    .experience-modal {
        padding: 0;
    }

    .experience-modal__panel {
        width: 100vw;
        max-height: 100svh;

        border-radius: 0;
    }

    .experience-modal__hero {
        padding-top: 7rem;
    }

    .experience-modal__title h2 {
        font-size: clamp(4.5rem, 22vw, 8rem);
    }

    .experience-modal__introduction > p:last-child {
        font-size: 1.35rem;
    }

    .modal-role {
        grid-template-columns: 1fr;
    }

    .modal-role__dates {
        text-align: left;
    }

    .contact__footer {
        flex-direction: column;
    }


    .projects-intro h2,
    .more-projects__heading h2 {
        font-size: clamp(4rem, 20vw, 7rem);
    }

    .featured-project h3 {
        font-size: clamp(4rem, 18vw, 7rem);
    }

    .project-poster {
        aspect-ratio: .78;
    }

    .more-projects__grid {
        grid-template-columns: 1fr;
    }

    .small-project:nth-child(2),
    .small-project:nth-child(5) {
        transform: none;
    }

    .project-modal {
        padding: 0;
    }

    .project-modal__panel {
        width: 100vw;
        max-height: 100svh;
        border-radius: 0;
    }

    .project-modal__hero {
        padding-top: 7rem;
        min-height: auto;
    }

    .project-modal__hero h2 {
        font-size: clamp(4.5rem, 22vw, 8rem);
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}



/* =========================================
   PROJECT CASE STUDY MODAL
========================================= */

.project-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;

    padding: clamp(0.7rem, 1.5vw, 1.25rem);

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 280ms ease,
        visibility 0s linear 420ms;
}

.project-modal.is-open {
    visibility: visible;
    opacity: 1;

    transition-delay: 0s;
}

.project-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(17, 16, 15, 0.66);
    backdrop-filter: blur(7px);
}

.project-modal__panel {
    position: relative;
    z-index: 1;

    width: 100%;
    height: calc(100svh - clamp(1.4rem, 3vw, 2.5rem));

    overflow-y: auto;
    overscroll-behavior: contain;

    border-radius: clamp(1.2rem, 2.5vw, 2.2rem);

    background: #ffffff;
    color: var(--ink);

    box-shadow:
        0 2rem 7rem rgba(0, 0, 0, 0.32);

    opacity: 0;

    transform:
        translateY(2.5rem)
        scale(0.985);

    transition:
        opacity 350ms ease,
        transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);

    scrollbar-width: thin;
}

.project-modal.is-open .project-modal__panel {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================
   CLOSE BUTTON
========================================= */

.project-modal__close {
    position: sticky;
    z-index: 20;

    top: 1rem;

    display: grid;
    place-items: center;

    width: clamp(3rem, 4vw, 3.8rem);
    aspect-ratio: 1;

    margin:
        1rem
        1rem
        calc(clamp(3rem, 4vw, 3.8rem) * -1 - 1rem)
        auto;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #dedede;
    color: #25211e;

    font-size: clamp(1.7rem, 2.5vw, 2.2rem);
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 0.8rem 2rem rgba(0, 0, 0, 0.12);

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 250ms ease;
}

.project-modal__close:hover,
.project-modal__close:focus-visible {
    background: var(--ink);
    color: var(--white);

    outline: none;

    transform: rotate(90deg);
}


/* =========================================
   PROJECT MODAL HEADER
========================================= */

.project-modal__header {
    display: grid;
    justify-items: center;

    padding:
        clamp(7rem, 12vw, 11rem)
        var(--page-padding)
        clamp(4rem, 7vw, 7rem);

    text-align: center;
}

.project-modal__eyebrow {
    color: rgba(37, 33, 30, 0.54);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.project-modal__header h2 {
    max-width: 74rem;

    margin-top: 0.9rem;

    font-family: var(--display-font);
    font-size: clamp(4.8rem, 11vw, 11rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.78;
    text-transform: uppercase;
}

.project-modal__description {
    max-width: 43rem;

    margin-top: 1.5rem;

    color: rgba(37, 33, 30, 0.6);

    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    line-height: 1.6;
}


/* =========================================
   PROJECT IMAGE GALLERY
========================================= */

.project-modal__gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(0.8rem, 1.5vw, 1.4rem);

    max-width: 74rem;

    margin-inline: auto;
    padding-inline: var(--page-padding);
}

.project-gallery-item {
    position: relative;

    display: grid;
    place-items: center;

    min-height: clamp(25rem, 44vw, 42rem);

    overflow: hidden;

    border-radius: clamp(0.9rem, 1.7vw, 1.5rem);

    background: var(--project-gallery-background, #f1f1f1);
}

.project-gallery-item--wide {
    grid-column: 1 / -1;

    min-height: clamp(30rem, 48vw, 48rem);
}

.project-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: clamp(1rem, 3vw, 3rem);
}

.project-gallery-item--cover img {
    padding: 0;
    object-fit: cover;
}


/* =========================================
   PROJECT INFORMATION
========================================= */

.project-modal__body {
    display: grid;
    grid-template-columns:
        minmax(12rem, 0.42fr)
        minmax(0, 1fr);

    gap: clamp(3rem, 10vw, 10rem);

    max-width: 74rem;

    margin-inline: auto;

    padding:
        clamp(6rem, 10vw, 10rem)
        var(--page-padding);
}

.project-modal__metadata {
    display: flex;
    flex-direction: column;

    gap: 2rem;
}

.project-meta-group {
    padding-top: 1rem;

    border-top: 1px solid rgba(37, 33, 30, 0.16);
}

.project-meta-group__label {
    margin-bottom: 0.65rem;

    color: rgba(37, 33, 30, 0.48);

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.project-meta-group > p:last-child {
    font-size: 0.9rem;
    line-height: 1.55;
}

.project-modal__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.45rem;
}

.project-modal__tag {
    padding: 0.5rem 0.72rem;

    border: 1px solid rgba(37, 33, 30, 0.17);
    border-radius: 999px;

    font-size: 0.65rem;
    font-weight: 500;
}


/* =========================================
   PROJECT TEXT SECTIONS
========================================= */

.project-modal__sections {
    display: grid;

    gap: clamp(4rem, 7vw, 7rem);
}

.project-case-section {
    display: grid;
    grid-template-columns:
        minmax(9rem, 0.38fr)
        minmax(0, 1fr);

    gap: clamp(1.5rem, 4vw, 4rem);

    padding-top: 1.3rem;

    border-top: 1px solid rgba(37, 33, 30, 0.16);
}

.project-case-section__number {
    color: var(--copper);

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.project-case-section__content h3 {
    font-family: var(--display-font);
    font-size: clamp(2.5rem, 4.5vw, 4.7rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 0.92;
    text-transform: uppercase;
}

.project-case-section__content > p {
    margin-top: 1.2rem;

    color: rgba(37, 33, 30, 0.77);

    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.75;
}

.project-case-section__content ul {
    display: grid;

    gap: 0.9rem;

    margin-top: 1.5rem;

    list-style: none;
}

.project-case-section__content li {
    position: relative;

    padding-left: 1.4rem;

    color: rgba(37, 33, 30, 0.75);

    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    line-height: 1.65;
}

.project-case-section__content li::before {
    content: "↳";

    position: absolute;

    top: 0;
    left: 0;

    color: var(--copper);
}


/* =========================================
   METRIC CARDS
========================================= */

.project-metrics {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(9rem, 1fr)
    );

    gap: 0.8rem;

    margin-top: 1.7rem;
}

.project-metric {
    min-height: 9rem;

    padding: 1.25rem;

    border-radius: 1rem;

    background: var(--cream);
}

.project-metric__value {
    font-family: var(--display-font);
    font-size: clamp(2.8rem, 4vw, 4rem);
    line-height: 1;
}