@charset "UTF-8";

@property --header-logo-dot-radius {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 4%;
}

:root {
    --font-primary: "grtsk-vf", Arial, sans-serif;
    --ink: #000;
    --paper: #fff;
    --page-gutter: clamp(1.25rem, 3vw, 2.5rem);
    --section-space: clamp(4rem, 8vw, 7rem);
    --featured-accordion-tab-width: clamp(7rem, 9vw, 9.5rem);
    --focus: #005fcc;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-primary);
    font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 1.75rem;
    font-size: clamp(2.4rem, 5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

h2 {
    margin-bottom: 0;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

p {
    margin-bottom: 1rem;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.4;
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" 0;
}

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

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--paper);
    background: var(--ink);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.25rem, 3vw, 2.5rem) var(--page-gutter);
}

.brand {
    width: min(34.2rem, 90%);
}

.header-logo-intro {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 827.59 / 203.97;
    isolation: isolate;
}

.header-logo-intro__fallback,
.header-logo-intro__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.brand.is-logo-loading .header-logo-intro__fallback {
    visibility: hidden;
}

.header-logo-intro__svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

.header-logo-intro__svg--cyan,
.header-logo-intro__svg--blue,
.header-logo-intro__svg--magenta {
    --header-logo-dot-radius: 4%;
    z-index: 1;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(
        circle,
        #000 0 var(--header-logo-dot-radius),
        transparent calc(var(--header-logo-dot-radius) + 3%)
    );
    mask-image: radial-gradient(
        circle,
        #000 0 var(--header-logo-dot-radius),
        transparent calc(var(--header-logo-dot-radius) + 3%)
    );
    -webkit-mask-size: 11px 11px;
    mask-size: 11px 11px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

.header-logo-intro__svg--cyan {
    color: #00eaff;
}

.header-logo-intro__svg--blue {
    color: #0647ff;
    -webkit-mask-position: 4px 2px;
    mask-position: 4px 2px;
}

.header-logo-intro__svg--magenta {
    color: #ff004c;
    -webkit-mask-position: 2px 5px;
    mask-position: 2px 5px;
}

.header-logo-intro__svg--black {
    z-index: 2;
    color: #000;
}

.header-logo-intro__svg :is(path, polygon, rect, circle, ellipse, text) {
    fill: currentColor;
}

.header-logo-intro__svg .st0 {
    fill: none !important;
}

.header-logo-intro__piece {
    opacity: 0;
    will-change: opacity;
}

.brand.is-entering .header-logo-intro__svg--cyan {
    animation:
        header-logo-cyan 1.2s cubic-bezier(.22, 1, .36, 1) both,
        header-logo-halftone 780ms cubic-bezier(.16, 1, .3, 1) both;
}

.brand.is-entering .header-logo-intro__svg--blue {
    animation:
        header-logo-blue 1.2s cubic-bezier(.22, 1, .36, 1) both,
        header-logo-halftone 820ms cubic-bezier(.16, 1, .3, 1) 35ms both;
}

.brand.is-entering .header-logo-intro__svg--magenta {
    animation:
        header-logo-magenta 1.2s cubic-bezier(.22, 1, .36, 1) both,
        header-logo-halftone 860ms cubic-bezier(.16, 1, .3, 1) 70ms both;
}

.brand.is-entering .header-logo-intro__svg:not(.header-logo-intro__svg--black) .header-logo-intro__piece {
    animation: header-logo-piece-in 240ms ease-out calc(var(--piece-order) * 4ms) both;
}

.brand.is-entering .header-logo-intro__svg--black .header-logo-intro__piece {
    animation: header-logo-piece-in 340ms ease-out calc(240ms + var(--piece-order) * 4ms) both;
}

@keyframes header-logo-piece-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes header-logo-halftone {
    0% { --header-logo-dot-radius: 4%; }
    42% { --header-logo-dot-radius: 18%; }
    72% { --header-logo-dot-radius: 36%; }
    100% { --header-logo-dot-radius: 72%; }
}

@keyframes header-logo-cyan {
    0% { opacity: 1; filter: blur(.5px); transform: translate3d(-8px, 0, 0); }
    45% { opacity: 1; filter: blur(.45px); transform: translate3d(-7px, -2px, 0); }
    70% { opacity: .99; filter: blur(.3px); transform: translate3d(-5px, -3px, 0); }
    86% { opacity: .98; filter: blur(.15px); transform: translate3d(-2px, -1px, 0); }
    100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes header-logo-blue {
    0% { opacity: .96; filter: blur(.4px); transform: translate3d(0, -7px, 0); }
    45% { opacity: .96; filter: blur(.35px); transform: translate3d(2px, -7px, 0); }
    70% { opacity: .95; filter: blur(.25px); transform: translate3d(4px, -4px, 0); }
    86% { opacity: .95; filter: blur(.1px); transform: translate3d(1px, -2px, 0); }
    100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes header-logo-magenta {
    0% { opacity: 1; filter: blur(.5px); transform: translate3d(8px, 0, 0); }
    45% { opacity: 1; filter: blur(.45px); transform: translate3d(7px, 2px, 0); }
    70% { opacity: .99; filter: blur(.3px); transform: translate3d(4px, 4px, 0); }
    86% { opacity: .98; filter: blur(.15px); transform: translate3d(2px, 1px, 0); }
    100% { opacity: 0; filter: blur(0); transform: translate3d(0, 0, 0); }
}

.top-menu {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    gap: 0.625rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1.4rem;
    color: var(--ink);
    background: transparent;
    border: 3px solid var(--ink);
    border-radius: 999px;
    font: inherit;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, font-variation-settings 180ms ease;
}

.button:hover,
.button:active {
    color: var(--paper);
    background-color: var(--ink);
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" -15;
}

.top-menu .button.is-active {
    color: var(--paper);
    background-color: var(--ink);
}

.button--cta {
    font-size: 1rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" -15;
}

.button--cta:hover,
.button--cta:active {
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.hero {
    width: 100%;
    margin-right: auto;
    margin-left: 0;
    padding: clamp(1.5rem, 3vw, 3rem) var(--page-gutter) clamp(2rem, 4vw, 3.5rem);
}

.home-intro-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
}

.home-intro-client {
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    font-variation-settings: "wght" 700, "wdth" 140, "slnt" -10;
}

.hero h1 {
    width: 100%;
    margin: 0;
    font-size: clamp(2.55rem, 4.25vw, 3.825rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

.home-intro-description {
    padding-top: calc(1.5em + 0.75rem);
}

.home-intro-description > p {
    max-width: 38rem;
    margin-bottom: 1.5rem;
}

.recruiter-filter-entry {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.recruiter-filter-entry .button,
.button--compact {
    min-height: 1.753rem;
    padding: 0.414rem 0.893rem;
    border-width: 1.913px;
    font-size: 0.638rem;
}

.recruiter-filter-entry button {
    cursor: pointer;
}

.error-page {
    min-height: min(56rem, calc(100svh - 9rem));
    padding: clamp(3rem, 7vw, 7rem) var(--page-gutter) var(--section-space);
}

.error-hero {
    width: min(70rem, 78%);
    margin-left: auto;
}

.error-hero .eyebrow {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    text-transform: uppercase;
    font-size: .875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.error-hero h1 {
    font-size: clamp(3rem, 7vw, 7.5rem);
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

.error-hero > p:not(.eyebrow) {
    max-width: 46rem;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.shortlist,
.more-work {
    padding: 0 var(--page-gutter) var(--section-space);
}

.shortlist {
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.shortlist,
.more-work,
.project-idea,
.featured-project > .project-gallery-intro,
.featured-project > .project-gallery,
[class*="project-gallery-group--"],
.project-details,
.featured-projects-accordion,
.project-end-nav,
.sitemap-grid > section {
    content-visibility: auto;
    contain-intrinsic-inline-size: auto 0;
    contain-intrinsic-block-size: auto 50rem;
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(14rem, 0.45fr) minmax(18rem, 1fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-intro p {
    max-width: 42rem;
    margin: 0;
}

.shortlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.project-card {
    display: block;
    color: var(--paper);
    text-decoration: none;
}

.project-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #191919;
}

.project-image::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to top, rgb(0 0 0 / 75%), transparent);
    pointer-events: none;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%);
    transition: transform 400ms ease, filter 400ms ease;
}

.project-image picture,
.project-media-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

.project-number,
.project-title {
    position: absolute;
    z-index: 1;
    left: 1.125rem;
}

.project-number {
    top: 1.125rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1;
    font-variation-settings: "wght" 300, "wdth" 140, "slnt" 15;
}

.project-title {
    right: 1.125rem;
    bottom: 1.125rem;
}

.project-title h3 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.01rem, 1.5vw, 1.31rem);
    line-height: 1;
    text-transform: uppercase;
    font-variation-settings: "wght" 700, "wdth" 140, "slnt" -10;
}

.project-title p {
    margin: 0;
    font-size: clamp(0.8rem, 1.25vw, 1rem);
    line-height: 1.2;
    text-transform: uppercase;
    font-variation-settings: "wght" 400, "wdth" 140, "slnt" -5;
}

.project-card:hover img,
.project-card:focus-visible img {
    transform: scale(1.025);
    filter: grayscale(0%);
}

.more-work-list {
    border-top: 1px solid var(--ink);
}

.more-work-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 0.45fr) minmax(18rem, 1fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
}

.more-work-kicker {
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.more-work-statement h1,
.more-work-statement h2 {
    margin: 0;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

.more-work-statement p {
    max-width: 42rem;
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}

.more-work-statement .more-work-kicker {
    margin: 0 0 1.25rem;
}

.more-work.more-work-layout {
    grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1fr);
}

.more-work.more-work-layout .more-work-statement {
    max-width: 34rem;
}

.more-work.more-work-layout .more-work-statement h2 {
    font-size: clamp(2.65rem, 4.5vw, 4.75rem);
}

.more-work.more-work-layout .more-work-list {
    border-top: 0;
}

.more-work-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.75rem;
    padding: 1rem 0;
    color: inherit;
    border-bottom: 1px solid var(--ink);
    font-size: 1.1rem;
    font-variation-settings: "wght" 300, "wdth" 140, "slnt" 15;
    text-decoration: none;
    transition: padding-left 180ms ease;
}

.more-work-item:hover,
.more-work-item:focus-visible {
    padding-left: 0.625rem;
}

.more-work-item.is-active {
    padding-left: 0.625rem;
    font-variation-settings: "wght" 600, "wdth" 140, "slnt" 15;
}

.more-work-arrow {
    padding-right: 1.25rem;
    font-size: 1.25rem;
    transition: transform 180ms ease;
}

.more-work-item:hover .more-work-arrow,
.more-work-item:focus-visible .more-work-arrow {
    transform: translateX(0.3rem);
}

.more-work-category {
    padding: clamp(2.5rem, 5vw, 5rem) var(--page-gutter) var(--section-space);
    padding-top: max(0px, calc(clamp(2.5rem, 5vw, 5rem) - 50px));
}

.archive-page-kicker {
    margin-bottom: 0;
}

.archive-page-header {
    padding-top: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
}

.archive-page-header .home-intro-titles {
    grid-column: 1 / -1;
    width: 75%;
}

.archive-page-header h1 {
    width: 100%;
    margin: 0;
    font-size: clamp(2.55rem, 4.25vw, 3.825rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

@media (max-width: 768px) {
    .featured-project .project-media-tabs {
        width: 100%;
    }

    .archive-page-header .home-intro-titles {
        width: 100%;
    }
}

.archive-page-menu .more-work-list {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    border-top: 0;
}

.archive-page-menu .more-work-item {
    gap: 0.65rem;
    width: fit-content;
    min-height: 0;
    padding: 0;
    border: 0;
    font-size: 0.875rem;
    line-height: 1.25;
    font-variation-settings: "wght" 400, "wdth" 120, "slnt" 15;
}

.archive-page-menu .more-work-item:hover,
.archive-page-menu .more-work-item:focus-visible {
    padding-left: 0;
}

.archive-page-menu .more-work-arrow {
    padding-right: 0;
    font-size: 1rem;
}

.archive-page-label {
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.category-kicker {
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

.category-kicker a {
    color: inherit;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
    text-decoration: none;
}

.more-work-category-header {
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.more-work-category-header .category-kicker {
    margin: 0 0 1.25rem;
}

.more-work-category-header .category-kicker,
.more-work-category-header .more-work-kicker,
.more-work-category-header .category-kicker a {
    display: block;
    padding-top: 0;
    line-height: 1;
}

.more-work-category-header .more-work-list {
    border-top: 0;
}

.archive-project-list {
    border-top: 0;
}

.archive-project-row {
    display: grid;
    grid-template-columns: minmax(4rem, 0.1fr) minmax(16rem, 0.46fr) minmax(20rem, 0.88fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 4rem);
    padding: clamp(1.25rem, 2.5vw, 2rem) 0;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    text-decoration: none;
    scroll-margin-top: 1.5rem;
}

.archive-project-list > .archive-project-row:last-child {
    border-bottom: 0;
}

.archive-project-meta {
    align-self: start;
}

.archive-project-meta p {
    margin: 0;
}

.archive-project-year {
    text-transform: uppercase;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    line-height: 1;
    white-space: nowrap;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

@media (min-width: 1025px) {
    .archive-project-row {
        grid-template-columns:
            minmax(4rem, 0.1fr)
            minmax(12rem, 25vw)
            minmax(14rem, 1fr)
            auto;
    }

}

.archive-project-number {
    align-self: start;
    font-size: clamp(1.6rem, 2.4vw, 2.35rem);
    line-height: 1;
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" -15;
}

.archive-project-media {
    overflow: hidden;
    align-self: start;
    aspect-ratio: 16 / 10;
    background: #191919;
}

@media (min-width: 769px) {
    .archive-project-row {
        padding-block: 0;
    }

    .archive-project-meta,
    .archive-project-copy {
        align-self: start;
        padding-block: clamp(0.9rem, 1.35vw, 1.35rem);
    }

}

.archive-project-media picture,
.archive-project-media img,
.archive-project-media .project-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.archive-project-media img {
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 400ms ease, filter 400ms ease;
}

.archive-project-media .project-card-placeholder {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: var(--ink);
    background: #f1f1ef;
    text-align: center;
}

.archive-project-media .project-card-placeholder::before {
    content: attr(data-label);
    max-width: 12ch;
    font-size: clamp(1.25rem, 2.25vw, 2.5rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

.archive-project-client {
    margin: 0 0 0.65rem;
    text-transform: uppercase;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    line-height: 1;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.archive-project-copy h2 {
    margin: 0 0 0.65rem;
    font-size: clamp(1.44rem, 2.4vw, 2.72rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

.archive-project-copy h2 a,
.archive-project-copy h2 a:visited {
    color: inherit;
    text-decoration: none;
}

.archive-project-summary {
    max-width: 38rem;
    margin: 0;
    font-size: clamp(0.9rem, 1.25vw, 1.15rem);
    line-height: 1.25;
}

.archive-project-summary--rich p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.archive-project-summary--rich p + p {
    margin-top: 0.75rem;
}

.archive-project-summary a,
.archive-project-summary a:visited {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.archive-project-video-button {
    cursor: pointer;
}

.archive-project-media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

body.has-open-modal {
    overflow: hidden;
}

.archive-video-modal {
    width: min(32rem, calc(100% - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.archive-video-modal::backdrop {
    background: rgb(0 0 0 / 82%);
}

.archive-video-modal__panel {
    position: relative;
    display: grid;
    place-items: center;
}

.archive-video-modal video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 2rem);
    aspect-ratio: 9 / 16;
    background: #000;
}

.archive-video-modal audio {
    display: block;
    width: 100%;
}

.archive-video-modal audio[hidden],
.archive-video-modal video[hidden] {
    display: none;
}

.archive-video-modal.is-audio {
    width: min(36rem, calc(100% - 2rem));
}

.archive-video-modal.is-audio .archive-video-modal__panel {
    padding: 4.75rem 1.5rem 1.5rem;
    background: #111;
}

.archive-video-modal__close {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: rgb(0 0 0 / 55%);
    font: 400 2rem/1 Arial, sans-serif;
    cursor: pointer;
}

.archive-video-modal__close:hover,
.archive-video-modal__close:focus-visible {
    color: #000;
    background: #fff;
}

.archive-project-arrow {
    color: inherit;
    padding-right: 0.5rem;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    text-decoration: none;
    transition: transform 180ms ease;
}

.archive-project-row:hover .archive-project-media img,
.archive-project-row:focus-within .archive-project-media img {
    transform: scale(1.025);
    filter: grayscale(0%);
}

.archive-project-row:hover .archive-project-arrow,
.archive-project-row:focus-within .archive-project-arrow {
    transform: translateX(0.35rem);
}

.archive-category-section {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    scroll-margin-top: 1.5rem;
}

.archive-category-section:first-child {
    padding-top: 0;
}

.archive-category-section + .archive-category-section {
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.archive-category-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.archive-category-kicker h2,
.archive-category-kicker p {
    flex: 0 0 auto;
    margin: 0;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.archive-category-kicker h2 {
    line-height: 1;
    letter-spacing: normal;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.archive-category-kicker .project-kicker-rule {
    flex: 1 1 auto;
}

.archive-category-kicker p {
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" -15;
}

.project-card-placeholder {
    width: 100%;
    height: 100%;
    background: #191919;
}

.site-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem var(--page-gutter) 3.75rem;
}

.footer-brand {
    flex: 0 1 12rem;
    min-width: 0;
}

.footer-utilities {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-sitemap,
.footer-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    color: inherit;
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, font-variation-settings 180ms ease;
}

.footer-share {
    cursor: pointer;
}

.footer-sitemap:hover,
.footer-sitemap:focus-visible,
.footer-share:hover,
.footer-share:focus-visible {
    color: var(--paper);
    background-color: var(--ink);
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" -15;
}

.sitemap-page {
    padding: clamp(3rem, 7vw, 7rem) var(--page-gutter) var(--section-space);
}

.sitemap-page > h1 {
    margin-bottom: clamp(3rem, 7vw, 6rem);
    font-size: clamp(3rem, 7vw, 7rem);
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 6rem);
}

.sitemap-grid h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.3rem, 2vw, 2rem);
}

.sitemap-grid h2 a {
    color: inherit;
    text-decoration: none;
}

.social-links {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.social-links a {
    display: block;
    min-width: 0;
}

.social-links img {
    max-height: 2.5rem;
    object-fit: contain;
}

.social-links img[src*="substack.svg"] {
    transform: translateY(-5px);
}

/* FEATURED PROJECT */
.featured-project {
    padding: 0 var(--page-gutter);
}

.featured-project + .site-footer {
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.featured-project a {
    color: inherit;
}

.project-section-label,
.project-kicker,
.project-details,
.next-project-label,
.project-more-work > p {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

/* PROJECT INTRO */
.project-intro {
    padding: max(0px, calc(clamp(2.5rem, 5vw, 5rem) - 50px)) 0 clamp(2.5rem, 4vw, 4rem);
}

.project-kicker {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: max(0px, calc(clamp(4rem, 9vw, 9rem) - 50px));
}

.project-kicker a,
.project-kicker p {
    margin: 0;
    text-decoration: none;
}

.project-kicker-rule {
    flex: 1 1 auto;
    align-self: center;
    border-top: 1px solid var(--ink);
}

.project-template--editorial-feature .project-kicker > p,
.home-work-kicker > p,
.archive-page-kicker > p {
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" -15;
}

.home-work-kicker,
.archive-page-kicker {
    margin-bottom: 0;
}

.home-work-kicker {
    padding: max(0px, calc(clamp(2.5rem, 5vw, 5rem) - 50px)) var(--page-gutter) 0;
}

.home-work-kicker a {
    color: inherit;
}

.home-archive .project-end-nav {
    padding-top: clamp(1rem, 2vw, 1.75rem);
}

.project-intro-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
    width: 100%;
    margin-left: 0;
}

.project-intro-description {
    padding-top: calc(1.5em + 0.75rem);
}

.project-intro--left .project-intro-copy {
    margin-left: 0;
}

.project-intro-body--indexed {
    display: grid;
    grid-template-columns: minmax(14rem, 0.45fr) minmax(18rem, 1fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
}

.project-intro-body--indexed .project-intro-copy {
    width: 100%;
    margin-left: 0;
}

.project-index {
    display: grid;
}

.project-index > p {
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-index a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--ink);
    font-size: 1.1rem;
    font-variation-settings: "wght" 300, "wdth" 140, "slnt" 15;
    text-decoration: none;
}

.project-index a:hover .more-work-arrow,
.project-index a:focus-visible .more-work-arrow {
    transform: translateX(0.3rem);
}

.project-gallery-intro {
    scroll-margin-top: 2rem;
}

.project-client,
.project-campaign {
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    font-variation-settings: "wght" 700, "wdth" 140, "slnt" -10;
}

.project-intro-copy h1 {
    margin-bottom: 0.75rem;
    font-size: clamp(2.55rem, 4.25vw, 3.825rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

.project-description {
    max-width: 38rem;
    margin: 0;
}

.project-intro-button {
    margin-top: 1.5rem;
}

.project-gallery-button {
    width: fit-content;
    margin-top: 1.5rem;
}

/* PROJECT MEDIA */
.project-hero-media,
.next-project-media,
.project-media-placeholder {
    display: grid;
    min-height: 26rem;
    place-items: center;
    color: #666;
    background: #e8e8e8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.project-hero-media {
    min-height: min(70vw, 52rem);
}

.project-media-item {
    overflow: hidden;
    min-width: 0;
    background: #e8e8e8;
}

.project-media-item img,
.project-media-item video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 26rem;
    object-fit: cover;
}

.project-media-item--portrait-9x16 {
    aspect-ratio: 9 / 16;
    min-height: 0;
}

.project-media-item--portrait-9x16 img,
.project-media-item--portrait-9x16 video {
    min-height: 0;
}

.project-media-item--landscape-16x9 {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.project-media-item--landscape-16x9 img,
.project-media-item--landscape-16x9 video {
    min-height: 0;
}

.project-media-item--portrait-4x5 {
    aspect-ratio: 4 / 5;
    min-height: 0;
}

.project-media-item--portrait-4x5 img,
.project-media-item--portrait-4x5 video {
    min-height: 0;
}

.project-media-item--square-1x1 {
    aspect-ratio: 1;
    min-height: 0;
}

.project-media-item--square-1x1 img,
.project-media-item--square-1x1 video {
    min-height: 0;
}

@media (min-width: 769px) {
    .project-template--editorial-feature .project-kicker {
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    .featured-project--subway-happy-place > .project-media-entry--hero-rollover .project-hero-media {
        height: auto;
        aspect-ratio: 8 / 5;
        min-height: 0;
        background: #000;
    }

    .featured-project--subway-happy-place > .project-media-entry--hero-rollover .project-hero-media video {
        object-fit: contain;
    }

    .featured-project--prime-day-show .project-media-swipe-full {
        width: 65%;
        margin-inline: auto;
    }
}

.project-media-entry {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--paper);
    text-decoration: none;
}

.featured-project a.project-media-entry,
.featured-project a.project-media-entry:visited {
    color: var(--paper);
}

.project-media-entry::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 0 40%;
    background: linear-gradient(
        to bottom,
        rgb(15 15 15 / 82%),
        rgb(15 15 15 / 30%) 45%,
        transparent 75%
    );
    pointer-events: none;
    transition: opacity 300ms ease;
}

.project-media-entry--portrait::after {
    inset: 0 0 15%;
    background: linear-gradient(
        to bottom,
        rgb(15 15 15 / 82%),
        rgb(15 15 15 / 30%) 55%,
        transparent 92%
    );
    mix-blend-mode: soft-light;
}

.project-media-entry--hero-rollover::after {
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(15 15 15 / 88%),
        rgb(15 15 15 / 42%) 55%,
        rgb(15 15 15 / 12%)
    );
    mix-blend-mode: soft-light;
}

.project-media-entry--plain::after {
    display: none;
}

.project-media-entry--portrait:focus-within::after,
.project-media-entry--portrait.is-in-view::after,
.project-media-entry--hero-rollover:hover::after,
.project-media-entry--hero-rollover:focus-within::after {
    opacity: 0;
}

@media (hover: hover) {
    .project-media-entry--portrait:hover::after {
        opacity: 0;
    }
}

.project-media-caption {
    position: absolute;
    z-index: 2;
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: auto;
    left: clamp(1rem, 2vw, 1.5rem);
}

.project-media-caption h3 {
    margin: 0 0 0.25rem;
    font-size: clamp(0.725rem, 1.1vw, 1.2rem);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-media-caption p {
    margin: 0;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    line-height: 1.2;
}

.project-media-entry .project-media-item img,
.project-media-entry .project-media-item video {
    transition: transform 400ms ease;
}

.project-media-entry:hover .project-media-item img,
.project-media-entry:hover .project-media-item video,
a.project-media-entry:focus-visible .project-media-item img,
a.project-media-entry:focus-visible .project-media-item video {
    transform: scale(1.025);
}

.project-hero-caption {
    margin: 0.65rem 0 0;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    line-height: 1.3;
    font-style: italic;
}

.project-hero-media img {
    min-height: min(70vw, 52rem);
}

.project-idea {
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 4rem);
}

.project-idea > div {
    width: min(48rem, 50%);
    margin-left: auto;
}

.project-idea > .project-section-label {
    width: min(48rem, 50%);
    margin: 0 0 1.25rem auto;
    text-align: left;
}

.project-idea h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.4rem, 5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

.project-idea--compact h2 {
    font-size: clamp(1.68rem, 3.5vw, 3.675rem);
}

.project-idea--compact .project-gallery-button {
    min-height: 1.753rem;
    padding: 0.414rem 0.893rem;
    border-width: 1.913px;
    font-size: 0.638rem;
}

.project-idea--with-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 7vw, 6.25rem);
    align-items: start;
}

.project-idea--with-details > .project-idea-details {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-idea--with-details > .project-section-label {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin-left: 0;
}

.project-idea--with-details > .project-idea-copy {
    display: contents;
}

.project-idea--with-details > .project-idea-copy > h2 {
    grid-column: 1;
    grid-row: 2;
}

.project-idea--with-details > .project-idea-copy > p,
.project-idea--with-details > .project-idea-copy > .project-gallery-button {
    grid-column: 2;
}

.project-idea--with-details > .project-idea-copy > p {
    grid-row: 2;
}

.project-idea--with-details > .project-idea-copy > .project-gallery-button {
    grid-row: 3;
    justify-self: start;
}

.project-idea p:last-child {
    max-width: 44rem;
}

.featured-project--toms-of-maine-social .project-idea > div,
.featured-project--toms-of-maine-social .project-idea > .project-section-label {
    margin-left: 0;
}

.featured-project--toms-of-maine-social .project-intro {
    padding-bottom: clamp(1.25rem, 2vw, 2rem);
}

@media (min-width: 769px) {
    .featured-project--toms-of-maine-social > .project-hero-media {
        height: min(29.75vw, 22.1rem);
        min-height: 0;
    }

    .featured-project--toms-of-maine-social > .project-hero-media img {
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

.featured-project--toms-of-maine-social .project-details {
    margin-top: clamp(1.25rem, 2vw, 2rem);
    margin-bottom: 0;
}

.featured-project--toms-of-maine-social .project-end-nav {
    padding-top: 1rem;
}

.project-idea--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
}

.project-idea--with-media > .project-section-label {
    grid-column: 2;
    width: 100%;
    margin-left: 0;
}

.project-idea--with-media > .project-idea-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
}

.project-idea--with-media > .project-media-entry {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
}

.project-idea-media video,
.project-gallery-intro-media video {
    transition: transform 400ms ease;
}

.project-idea-media:hover video,
.project-idea-media:focus-within video,
.project-gallery-intro-media:hover video,
.project-gallery-intro-media:focus-within video {
    transform: scale(1.025);
}

.project-idea--with-media > .project-idea-copy {
    grid-column: 2;
    width: 100%;
    margin-left: 0;
}

.project-idea--with-media > .project-idea-media-details {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    margin: 0;
    padding-top: clamp(2rem, 4vw, 3.5rem);
    text-align: left;
    justify-self: start;
}

.project-idea--with-media > .project-idea-media-details > .project-section-label {
    width: 100%;
    margin: 0 0 1.25rem;
    text-align: left;
}

.project-idea-media-details h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.4rem, 5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

.project-idea-media-details > p:not(.project-section-label) {
    max-width: 44rem;
}

.project-gallery-intro {
    padding: var(--section-space) 0 clamp(2.5rem, 5vw, 4.5rem);
}

.project-gallery-intro > .project-section-label,
.project-gallery-intro-copy > .project-section-label {
    margin: 0 0 1.25rem;
}

.project-gallery-intro--compact > .project-section-label,
.project-gallery-intro--compact .project-gallery-intro-copy > .project-section-label {
    margin-bottom: 1.25rem;
}

.project-section-connector {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.project-section-connector .project-section-label {
    flex: 0 0 auto;
    margin: 0;
}

.project-section-connector-rule {
    flex: 1 1 auto;
    border-top: 1px solid var(--ink);
}

.project-gallery-intro h2 {
    max-width: 64rem;
    margin-bottom: 1rem;
    font-size: clamp(1.92rem, 4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-variation-settings: "wght" 500, "wdth" 120, "slnt" 6;
}

.project-gallery-intro--compact h2 {
    margin-bottom: 1.5rem;
}

.featured-project--disney-plus-launch .project-gallery-intro h2 {
    font-size: clamp(1.68rem, 3.5vw, 3.675rem);
}

.project-gallery-intro p {
    max-width: 44rem;
    margin: 0;
}

.project-gallery-intro p:not(.project-section-label) {
    font-size: calc(clamp(0.85rem, calc(1.6vw - 0.25rem), 1.25rem) + 1pt);
}

.project-gallery-intro p + p {
    margin-top: 1rem;
}

.project-gallery-intro .inline-link,
.project-idea .inline-link {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.project-gallery-intro--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
}

.project-template--editorial-feature .project-gallery-intro--with-media {
    align-items: start;
    padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.project-gallery-intro--with-media > .project-gallery-intro-copy {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}

.project-gallery-intro--with-media > .project-section-label,
.project-gallery-intro--with-media > h2,
.project-gallery-intro--with-media > p:not(.project-section-label) {
    grid-column: 1;
}

.project-gallery-intro--with-media > .project-gallery-intro-media {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}

.project-gallery-intro--with-media > .project-media-entry {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}

.project-gallery-intro--media-under-label {
    align-items: start;
}

.project-gallery-intro--media-under-label > .project-gallery-intro-copy {
    grid-column: 1;
    grid-row: 1;
}

.project-gallery-intro--media-under-label > .project-gallery-intro-media,
.project-gallery-intro--media-under-label > .project-media-entry {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1.25rem;
}

.project-idea--with-media > .project-media-entry::after,
.project-gallery-intro--with-media > .project-media-entry::after {
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(15 15 15 / 88%),
        rgb(15 15 15 / 42%) 55%,
        rgb(15 15 15 / 12%)
    );
    mix-blend-mode: soft-light;
}

.project-idea--with-media > .project-media-entry:hover::after,
.project-idea--with-media > .project-media-entry:focus-within::after,
.project-gallery-intro--with-media > .project-media-entry:hover::after,
.project-gallery-intro--with-media > .project-media-entry:focus-within::after {
    opacity: 0;
}

.project-gallery {
    display: grid;
    gap: 1rem;
}

.project-gallery-group--offset-single {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(16rem, 0.52fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 6.25rem);
    padding: var(--section-space) 0;
}

.project-gallery-group--offset-single .project-gallery-intro {
    padding: 0;
}

.project-gallery-group--offset-single .project-gallery {
    width: min(100%, 28rem);
    margin-left: auto;
    padding-top: 0;
}

.project-gallery-group--image-left {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 6.25rem);
    padding: var(--section-space) 0 clamp(1rem, 2vw, 1.5rem);
}

.project-gallery-group--image-left .project-gallery-intro {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
}

.project-gallery-group--image-left .project-gallery {
    grid-column: 1;
    grid-row: 1;
}

.project-gallery-group--media-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(2rem, 7vw, 6.25rem);
    padding: var(--section-space) 0 clamp(1rem, 2vw, 1.5rem);
}

.project-gallery-group--media-right .project-gallery-intro {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
}

.project-gallery-group--media-right .project-gallery {
    grid-column: 2;
    grid-row: 1;
}

.project-gallery-group--media-only {
    padding: var(--section-space) 0 clamp(1rem, 2vw, 1.5rem);
}

.project-gallery-group--column .project-gallery-intro {
    padding: 0;
}

.project-gallery-group--column .project-gallery {
    padding-top: clamp(1.25rem, 2vw, 2rem);
}

.featured-project--prime-day-show .project-gallery-group--media-only {
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.project-gallery-group--wide-copy .project-gallery-intro > p:not(.project-section-label) {
    width: 100%;
    max-width: none;
}

.featured-project--subway-social .project-gallery-group {
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
    padding-bottom: 0;
}

.featured-project--subway-social .project-kicker {
    margin-bottom: 0;
}

.featured-project--subway-social .project-intro-body {
    padding-top: clamp(1.5rem, 3vw, 3rem);
}

.featured-project--subway-social .project-intro {
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.featured-project--subway-social .project-gallery-group--wide-copy .project-gallery-intro {
    padding-top: 0;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.project-gallery-group-kicker {
    grid-column: 1 / -1;
    grid-row: 1;
}

.project-gallery-group--media-right.project-gallery-group--has-kicker .project-gallery-intro,
.project-gallery-group--media-right.project-gallery-group--has-kicker .project-gallery {
    grid-row: 2;
}

.project-gallery-group--media-right.project-gallery-group--has-kicker {
    row-gap: clamp(1.25rem, 2vw, 2rem);
}

.project-gallery-group--wide-copy.project-gallery-group--has-kicker .project-gallery-group-kicker {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.project-gallery-group--column.project-gallery-group--has-kicker .project-gallery-group-kicker {
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.featured-project--subway-social .project-additional-galleries {
    display: block;
}

.featured-project--subway-social .project-gallery-group--media-right .project-media-tabs {
    width: 90%;
    margin-right: auto;
    margin-left: 0;
}

@media (min-width: 1025px) {
    .featured-project--subway-social .project-gallery-group--media-right {
        padding-top: 0;
    }
}

.project-gallery-group--award-list .project-gallery-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(24rem, 1.18fr);
    column-gap: clamp(3rem, 8vw, 9rem);
    align-items: start;
}

.project-gallery-group--award-list .project-gallery-intro > .project-section-label,
.project-gallery-group--award-list .project-gallery-intro > h2,
.project-gallery-group--award-list .project-gallery-intro > p {
    grid-column: 2;
}

.project-award-list {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.project-award-list p {
    position: relative;
    max-width: none;
    padding: 0.85rem 3rem 0.85rem 0;
    font-size: clamp(0.78rem, 1.05vw, 0.95rem);
    line-height: 1.25;
    text-transform: uppercase;
    font-variation-settings: "wght" 300, "wdth" 115, "slnt" 12;
}

.project-award-list p + p {
    border-top: 1px solid var(--ink);
}

.project-award-list p:last-child {
    border-bottom: 1px solid var(--ink);
}

.project-award-list p span {
    position: absolute;
    top: 50%;
    right: 0.2rem;
    font-size: 1.1rem;
    transform: translateY(-50%);
}

.project-media-full,
.project-media-two,
.project-media-three,
.project-media-four-swipe,
.project-media-swipe-full {
    display: grid;
    gap: 1rem;
}

.project-media-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#training-day + .project-gallery .project-media-two {
    width: 70%;
    margin-inline: auto;
}

.project-media-tabs {
    width: min(70%, 38rem);
    margin-inline: auto;
}

.project-gallery-group--media-right .project-media-tabs {
    width: min(100%, 38rem);
    margin-right: 0;
}

@media (min-width: 769px) {
    .featured-project--subway-social #right-place-right-time {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(2rem, 7vw, 6.25rem);
        align-items: start;
    }

    .featured-project--subway-social #right-place-right-time > h2 {
        grid-column: 1;
        grid-row: 1;
    }

    .featured-project--subway-social #right-place-right-time > p:not(.project-section-label) {
        grid-column: 2;
    }

    .featured-project--subway-social #right-place-right-time > p:not(.project-section-label):first-of-type {
        grid-row: 1;
    }

    .project-gallery-group--media-right .project-media-tabs {
        width: min(75%, 28.5rem);
        margin-inline: auto;
    }

}

.project-media-tab-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.project-media-tab {
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    font: inherit;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
    cursor: pointer;
}

.project-media-tab[aria-selected="true"] {
    color: var(--paper);
    background: var(--ink);
}

.project-media-tab-panel[hidden] {
    display: none;
}

.project-media-tab-panel .project-media-entry,
.project-media-tab-panel .project-media-item {
    width: 100%;
}

.project-media-item--fullscreen-launch {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #111;
    cursor: pointer;
}

.project-media-item--fullscreen-launch video {
    object-fit: cover;
}

.project-media-item--fullscreen-launch video:fullscreen,
.project-media-item--fullscreen-launch video:-webkit-full-screen {
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

.project-media-item--fullscreen-launch:fullscreen,
.project-media-item--fullscreen-launch:-webkit-full-screen {
    display: grid;
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    place-items: center;
    background: #000;
}

.project-media-item--fullscreen-launch:fullscreen video,
.project-media-item--fullscreen-launch:-webkit-full-screen video {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    object-fit: contain;
}

.project-media-item--fullscreen-launch:fullscreen::after,
.project-media-item--fullscreen-launch:-webkit-full-screen::after {
    display: none;
}

.project-media-item--fullscreen-launch::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: var(--paper);
    background: rgb(0 0 0 / 72%);
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.9rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.project-media-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-media-four-swipe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-media-swipe-full {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.project-media-swipe-full::-webkit-scrollbar {
    display: none;
}

.project-media-swipe-full > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.project-instagram-embeds {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.project-instagram-embed {
    flex: 0 0 min(32vw, 32rem);
    width: min(32vw, 32rem);
    min-width: 0;
    scroll-snap-align: start;
}

.project-instagram-embeds::-webkit-scrollbar {
    display: none;
}

.project-instagram-swipe-note {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    font-variation-settings: "wght" 450, "wdth" 100, "slnt" 0;
}

.project-instagram-embed .instagram-media {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .project-instagram-embed {
        flex-basis: min(88vw, 32rem);
        width: min(88vw, 32rem);
    }

    .featured-project--subway-social .project-details {
        margin-top: clamp(1.25rem, 5vw, 2rem);
        margin-bottom: 0;
    }

    .featured-project--subway-social .project-end-nav {
        padding-top: 1rem;
    }

}

.project-swipe-cue {
    display: none;
}

.project-swipe-cue--always {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-swipe-cue--always span {
    padding-right: 0.25rem;
    font-size: 1.25rem;
}

.project-swipe-cue--kicker {
    gap: 2rem;
}

.project-swipe-cue--kicker .project-swipe-cue-label {
    flex: 0 0 auto;
    padding: 0;
    font-size: inherit;
}

.project-swipe-cue--kicker .project-swipe-cue-rule {
    flex: 1 1 auto;
    padding: 0;
    border-top: 1px solid var(--ink);
    font-size: 0;
}

.project-swipe-counter {
    flex: 0 0 auto;
    padding: 0;
    font-size: inherit;
    white-space: nowrap;
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" -15;
}

.project-swipe-counter span {
    padding: 0;
    font-size: inherit;
}

.project-swipe-control {
    flex: 0 0 auto;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.project-swipe-control:last-child {
    flex: 0 0 auto;
    padding: 0 0.25rem 0 0;
}

.project-swipe-control:hover,
.project-swipe-control:focus-visible {
    transform: translateX(-0.15rem);
}

.project-swipe-control:last-child:hover,
.project-swipe-control:last-child:focus-visible {
    transform: translateX(0.15rem);
}

@media (min-width: 769px) and (max-width: 1024px) {
    .project-media-four-swipe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PROJECT DETAILS */
.project-details {
    margin: var(--section-space) 0 clamp(2.5rem, 5vw, 5rem);
}

.project-detail {
    display: grid;
    grid-template-columns: minmax(9rem, 0.35fr) 1fr;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink);
}

.project-detail p {
    margin: 0;
    font: inherit;
}

.project-details--line > p {
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink);
    font: inherit;
}

/* FEATURED PROJECT ACCORDION */
.featured-projects-kicker {
    margin: max(0px, calc(var(--section-space) - 50px)) 0 calc(2rem - 7px);
}

.project-details + .featured-projects-kicker {
    margin-top: 0;
}

.featured-projects-accordion {
    display: flex;
    width: 100%;
    height: clamp(11rem, 16.9vw, 15.9rem);
    margin-top: 0;
    overflow: hidden;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.featured-projects-accordion-shell {
    position: relative;
}

.featured-accordion-control {
    display: none;
}

.featured-accordion-panel {
    position: relative;
    flex: 0 1 var(--featured-accordion-tab-width);
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--ink);
    background: var(--paper);
    border-right: 1px solid var(--ink);
    text-decoration: none;
    transition: flex-grow 260ms ease, color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.featured-accordion-panel:last-child {
    border-right: 0;
}

.featured-accordion-panel.is-active {
    flex-grow: 1;
    color: var(--paper);
    background: var(--ink);
}

.featured-accordion-panel.is-current:not(.is-active) {
    color: color-mix(in srgb, var(--ink) 52%, var(--paper));
    background: color-mix(in srgb, var(--paper) 92%, var(--ink));
}

.featured-accordion-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 220ms ease;
}

.featured-accordion-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgb(15 15 15 / 72%), rgb(15 15 15 / 8%) 70%);
    pointer-events: none;
}

.featured-accordion-media picture,
.featured-accordion-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-accordion-media img {
    object-fit: cover;
}

.featured-accordion-panel.is-active .featured-accordion-media {
    opacity: 1;
}

.featured-accordion-number,
.featured-accordion-current,
.featured-accordion-copy {
    position: absolute;
    z-index: 2;
    left: clamp(0.85rem, 1.5vw, 1.35rem);
    margin: 0;
}

.featured-accordion-number {
    top: clamp(0.85rem, 1.5vw, 1.35rem);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
    font-variation-settings: "wght" 300, "wdth" 120, "slnt" 15;
}

.featured-accordion-current {
    top: clamp(3.2rem, 4.5vw, 4.4rem);
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    font-variation-settings: "wght" 600, "wdth" 120, "slnt" 0;
}

.featured-accordion-copy {
    right: clamp(0.85rem, 1.5vw, 1.35rem);
    bottom: clamp(0.85rem, 1.5vw, 1.35rem);
}

.featured-accordion-brand {
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    font-size: clamp(0.8rem, 1vw, 1rem);
    line-height: 1;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.featured-accordion-copy h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.8rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-variation-settings: "wght" 600, "wdth" 135, "slnt" 5;
}

.featured-accordion-panel:not(.is-active) .featured-accordion-copy h2 {
    display: none;
}

.featured-accordion-panel:not(.is-active) .featured-accordion-copy {
    height: clamp(2.5rem, 4vw, 3.5rem);
}

.featured-accordion-panel.is-active .featured-accordion-copy h2 {
    max-width: 14ch;
    font-size: clamp(1.12rem, 2.24vw, 2.24rem);
    font-variation-settings: "wght" 700, "wdth" 150, "slnt" 10;
}

.featured-accordion-panel:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -5px;
}

@media (max-width: 1024px) {
    .featured-projects-accordion {
        height: clamp(8.9rem, 31.4vw, 13.4rem);
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 11vw;
        scrollbar-width: none;
    }

    .featured-projects-accordion::-webkit-scrollbar {
        display: none;
    }

    .featured-accordion-panel,
    .featured-accordion-panel.is-active {
        flex: 0 0 min(62.4vw, 27.2rem);
        border: 1px solid var(--ink);
        scroll-snap-align: center;
        transform: scale(0.94);
        transition: transform 220ms ease, color 180ms ease, background-color 180ms ease, opacity 180ms ease;
    }

    .featured-accordion-panel {
        opacity: 0.72;
    }

    .featured-accordion-panel.is-active {
        opacity: 1;
        transform: scale(1);
    }

    .featured-accordion-panel.is-current:not(.is-active) {
        opacity: 0.55;
    }
}

.project-end-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: baseline;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: calc(2rem - 12px);
    border-bottom: 1px solid var(--ink);
    font-size: 0.8rem;
}

.home-archive {
    padding: 0 var(--page-gutter);
}

.project-browse-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    justify-self: start;
    margin: 0;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-browse-label a,
.project-browse-label a:visited,
.project-browse-label a:hover,
.project-browse-label a:focus,
.project-browse-label a:active {
    color: inherit;
    text-decoration: none;
}

.project-browse-links {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: clamp(0.55rem, 1vw, 1rem);
    min-width: 0;
    white-space: nowrap;
}

.project-browse-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
}

.project-browse-links a {
    color: inherit;
    text-transform: uppercase;
    font-size: 0.75rem;
    text-decoration: none;
    font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
}

.project-browse-links a:hover,
.project-browse-links a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (max-width: 768px) {
    .error-hero {
        width: 100%;
    }

    .sitemap-grid {
        grid-template-columns: 1fr;
    }
    .more-work-layout {
        grid-template-columns: 1fr;
    }

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

    .more-work-statement {
        grid-row: 1;
    }

    .more-work-index {
        grid-row: 2;
    }

    .project-card.is-in-view img {
        filter: grayscale(0%);
    }

    .archive-project-row.is-in-view .archive-project-media img {
        filter: grayscale(0%);
    }

    .archive-project-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 1rem;
        padding-block: 1.25rem;
    }

    .archive-project-media {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .archive-project-meta {
        display: none;
    }

    .archive-project-row.has-meta .archive-project-meta {
        display: flex;
        grid-column: 1 / 3;
        grid-row: 2;
        align-items: baseline;
        gap: 0.75rem;
    }

    .archive-project-copy {
        grid-column: 1;
        grid-row: 2;
    }

    .archive-project-row.has-meta .archive-project-copy {
        grid-row: 3;
    }

    .archive-project-copy h2 {
        font-size: clamp(1.32rem, 6.4vw, 2rem);
    }

    .archive-project-summary {
        font-size: 0.95rem;
    }

    .archive-project-arrow {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        padding-right: 0;
    }

    .archive-project-row.has-meta .archive-project-arrow {
        grid-row: 3;
    }

    .project-intro-body--indexed {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .project-gallery-group--offset-single {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .project-gallery-group--image-left {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .project-gallery-group--media-right {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .project-gallery-group--image-left .project-gallery-intro,
    .project-gallery-group--image-left .project-gallery,
    .project-gallery-group--media-right .project-gallery-intro,
    .project-gallery-group--media-right .project-gallery {
        grid-column: 1;
        grid-row: auto;
    }

    .project-gallery-group--media-right.project-gallery-group--has-kicker .project-gallery-intro,
    .project-gallery-group--media-right.project-gallery-group--has-kicker .project-gallery {
        grid-row: auto;
    }

    .project-gallery-group--award-list .project-gallery-intro {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    .project-gallery-group--award-list .project-gallery-intro > .project-section-label,
    .project-gallery-group--award-list .project-gallery-intro > h2,
    .project-gallery-group--award-list .project-gallery-intro > p,
    .project-gallery-group--award-list .project-award-list {
        grid-column: 1;
        grid-row: auto;
    }

    .project-gallery-group--offset-single .project-gallery {
        width: min(88%, 24rem);
        padding-top: 0;
    }

    .site-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .brand {
        width: 100%;
    }

    .site-header {
        width: 100%;
        max-width: 100vw;
        padding-inline: 16px;
        overflow: hidden;
    }

    .top-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 6px;
    }

    .top-menu .button {
        width: 100%;
        min-width: 0;
        padding-inline: 4px;
        font-size: 0.84rem;
        white-space: nowrap;
        overflow: hidden;
    }

    .hero {
        width: 100%;
        padding-top: 1.5rem;
    }

    .home-intro-copy {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .home-intro-description {
        padding-top: 0;
    }

    .section-intro,
    .shortlist-grid {
        grid-template-columns: 1fr;
    }

    .section-intro {
        gap: 1.25rem;
    }

    .project-title p {
        font-size: 0.9rem;
    }

    .featured-projects-accordion {
        gap: 0;
        scroll-padding-inline: 0;
    }

    .featured-accordion-panel,
    .featured-accordion-panel.is-active {
        flex-basis: 100%;
        transform: none;
    }

    .featured-accordion-panel.is-active {
        transform: none;
    }

    .featured-accordion-control {
        position: absolute;
        top: 50%;
        z-index: 4;
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        place-items: center;
        color: var(--ink);
        background: var(--paper);
        border: 1px solid var(--ink);
        border-radius: 50%;
        font: inherit;
        font-size: 1.25rem;
        line-height: 1;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .featured-accordion-control--previous {
        left: 0.5rem;
    }

    .featured-accordion-control--next {
        right: 0.5rem;
    }

    .site-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-inline: 1rem;
    }

    .footer-brand {
        flex: none;
        width: min(70vw, 16.8rem);
    }

    .social-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(70vw, 16.8rem);
        gap: 1rem;
        margin-top: 1rem;
    }

    .social-links a {
        width: 100%;
    }

    .social-links a:nth-child(1) {
        flex-basis: 6.563rem;
    }

    .social-links a:nth-child(2) {
        flex-basis: 5.469rem;
    }

    .social-links a:nth-child(3) {
        flex-basis: 6.256rem;
    }

    .social-links img {
        width: 100%;
    }

    .footer-utilities {
        margin-top: 1.5rem;
        margin-left: 0;
    }

    /* PROJECT MOBILE */
    .project-kicker {
        margin-bottom: calc(4rem - 50px);
    }

    .project-intro-copy {
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
    }

    .project-intro-description {
        padding-top: 0;
    }

    .project-hero-media,
    .project-media-placeholder {
        min-height: 18rem;
    }

    .project-media-item img,
    .project-hero-media img {
        min-height: 18rem;
    }

    .project-hero-media {
        aspect-ratio: 9 / 16;
        min-height: 0;
    }

    .project-hero-media.project-media-item--landscape-16x9 {
        aspect-ratio: 16 / 9;
    }

    .project-hero-media.project-media-item--landscape-16x9 video {
        min-height: 0;
        object-fit: contain;
    }

    .featured-project--bmw-the-future-finds-us > .project-media-entry--hero-rollover {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .project-hero-media img {
        min-height: 0;
        object-fit: cover;
    }

    .project-media-item--mobile-16x10 {
        aspect-ratio: 16 / 10;
    }

    .project-idea {
        grid-template-columns: 1fr;
    }

    .project-end-nav {
        display: block;
    }

    .project-browse-label {
        margin-bottom: 0.5rem;
    }

    .project-browse-links {
        display: grid;
        grid-template-columns: max-content;
        justify-content: start;
        justify-items: start;
        row-gap: 0.15rem;
        line-height: 1.05;
        white-space: normal;
    }

    .project-idea > div,
    .project-idea > .project-section-label {
        width: 100%;
        margin-left: 0;
        grid-column: 1;
        grid-row: auto;
    }

    .project-idea > .project-section-label {
        margin-bottom: 1.25rem;
        order: -1;
        text-align: left;
    }

    .project-idea--with-details > .project-idea-details {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.75rem;
        margin-bottom: 2rem;
        order: 3;
    }

    .project-idea--with-details > .project-section-label {
        order: 1;
    }

    .project-idea--with-details > .project-idea-copy > h2,
    .project-idea--with-details > .project-idea-copy > p,
    .project-idea--with-details > .project-idea-copy > .project-gallery-button {
        grid-column: 1;
        grid-row: auto;
    }

    .project-idea--with-details > .project-idea-copy > h2 {
        order: 2;
    }

    .project-idea--with-details > .project-idea-copy > p {
        order: 4;
    }

    .project-idea--with-details > .project-idea-copy > .project-gallery-button {
        order: 5;
    }

    .featured-project--bmw-the-future-finds-us .project-idea--compact h2 {
        font-size: 2.184rem;
    }

    .featured-project--bmw-the-future-finds-us .project-idea > .project-section-label {
        margin-bottom: calc(1.25rem - 5px);
    }

    .featured-project--bmw-the-future-finds-us .project-idea-details {
        margin-top: calc(-1.25rem + 7px);
    }

    .project-idea--with-media > .project-section-label,
    .project-idea--with-media > .project-idea-media,
    .project-idea--with-media > .project-media-entry,
    .project-idea--with-media > .project-idea-copy,
    .project-idea--with-media > .project-idea-media-details {
        grid-column: 1;
        grid-row: auto;
    }

    .project-idea--with-media > .project-idea-media-details {
        padding-top: 0;
        margin-bottom: clamp(3.5rem, 12vw, 5rem);
    }

    .project-idea--with-media > .project-idea-media,
    .project-idea--with-media > .project-media-entry {
        margin-bottom: 2rem;
    }

    .project-gallery-intro--with-media {
        grid-template-columns: 1fr;
    }

    .project-gallery-intro--with-media > .project-section-label,
    .project-gallery-intro--with-media > h2,
    .project-gallery-intro--with-media > p:not(.project-section-label),
    .project-gallery-intro--with-media > .project-gallery-intro-copy,
    .project-gallery-intro--with-media > .project-gallery-intro-media,
    .project-gallery-intro--with-media > .project-media-entry {
        grid-column: 1;
        grid-row: auto;
    }

    .project-gallery-intro--with-media > .project-gallery-intro-media,
    .project-gallery-intro--with-media > .project-media-entry {
        margin-top: 2rem;
    }

    .project-media-two,
    .project-media-three {
        grid-template-columns: 1fr;
    }

    .project-media-four-swipe {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .project-swipe-cue {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 1rem;
        text-transform: uppercase;
        font-size: 0.875rem;
        font-variation-settings: "wght" 700, "wdth" 120, "slnt" 15;
    }

    .project-swipe-cue span {
        padding-right: 0.25rem;
        font-size: 1.25rem;
    }

    .project-media-four-swipe::-webkit-scrollbar {
        display: none;
    }

    .project-media-four-swipe > * {
        flex: 0 0 min(85%, 22rem);
        scroll-snap-align: start;
    }

    .project-detail {
        grid-template-columns: minmax(7rem, 0.4fr) 1fr;
        gap: 1rem;
    }
}

@media (max-width: 420px) {
    .top-menu {
        gap: 0.35rem;
    }

    .top-menu .button {
        border-width: 2px;
        font-size: 0.76rem;
    }

    .project-image {
        aspect-ratio: 4 / 3;
    }

}

.project-hero-media.project-media-item--square-1x1 {
    aspect-ratio: 1;
    min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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