:root {
    --bg: #f6f6f3;
    --ink: #111117;
    --muted: #77777f;
    --line: rgba(17, 17, 23, 0);
    --mono: 'DM Mono', monospace;
    --sans: 'Space Grotesk', sans-serif;
    --serif: 'Playfair Display', serif;
    --sans-special: 'Poiret One', sans-serif;
    --sans-valley: 'Valley Sans', sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    overflow-x: hidden
}

body.dark {
    --bg: #111117;
    --ink: #f3f3ef;
    --muted: #a5a5ad;
    --line: rgba(243, 243, 239, .18)
}

a {
    color: inherit
}

.site-nav {
    position: fixed;
    z-index: 30;
    inset: 0 0 auto;
    height: 64px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    font: 15px var(--sans-special);
    text-transform: uppercase;
    backdrop-filter: blur(12px)
}

.site-nav a {
    text-decoration: none
}

.nav-name {
    font-weight: 500
}

.nav-name span {
    margin-left: 4px;
    color: var(--muted)
}

.site-nav nav {
    display: flex;
    gap: 28px;
    margin-right: 22px
}

.site-nav nav a {
    color: var(--ink);
    position: relative
}

.site-nav nav a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width .25s
}

.site-nav nav a:hover,
.site-nav nav a.active {
    color: var(--ink)
}

.site-nav nav a:hover:after,
.site-nav nav a.active:after {
    width: 100%
}

.theme-toggle {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 50%;
    width: 27px;
    height: 27px;
    padding: 0;
    cursor: pointer;
    transition: .3s
}

.theme-toggle:hover {
    background: var(--ink);
    color: var(--bg);
    transform: rotate(180deg)
}

.loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--bg);
    pointer-events: none;
    transform: translateY(0)
}

.loader img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    animation: spin 1.2s linear infinite
}

.loader span {
    position: absolute;
    margin-top: 125px;
    font: 11px var(--mono);
    text-transform: uppercase
}

.blink {
    display: none
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

.intro {
    height: 110vh;
    min-height: 780px;
    padding: 100px 5vw 50px;
    position: relative;
    overflow: hidden
}

.intro-top,
.intro-bottom,
.section-head,
.eyebrow {
    font: 15px var(--sans-special);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink)
}

.intro-top,
.intro-bottom {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 5vw;
    right: 5vw
}

.intro-top {
    top: 91px
}

.intro-bottom {
    bottom: 45px
}

.intro-stage {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end
}

.intro-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7;
    padding-bottom: 0;
    max-width: 950px;
    width: max-content;
    text-align: center
}

.intro-copy h1 {
    font-size: clamp(55px, 3vw, 195px);
    line-height: .85;
    letter-spacing: -.07em;
    font-weight: 500;
    margin: 28px 0;
    color: #3680ff;
}


/* for italic manifesto */
.intro-copy h1 em,
.manifesto h2 em,
.contact h2 em,
.about-hero h1 em,
.project-title em {
    font-family: Georgia, serif;
    letter-spacing: -.08em;
    font-weight: 400
}

.intro-note {
    max-width: 275px;
    margin-left: 28%;
    font-size: 16px;
    line-height: 1.35;
    color: var(--muted)
}

.model-wrap {
    position: absolute;
    z-index: 4;
    width: min(58vw, 820px);
    height: min(58vw, 820px);
    right: 3vw;
    top: 13vh
}

.model-wrap canvas {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block
}

.model-fallback {
    position: absolute;
    z-index: 1;
    inset: 12%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 28%, #fff 0 32%, #c8c8c8 57%, #121217 100%);
    box-shadow: 0 12px 80px rgba(0, 0, 0, .18)
}

.model-fallback span {
    font-size: min(32vw, 410px);
    font-weight: 600;
    letter-spacing: -.17em;
    transform: translateX(-.06em)
}

.model-caption {
    position: absolute;
    z-index: 3;
    bottom: 7%;
    right: 13%;
    font: 10px var(--mono);
    text-transform: uppercase;
    color: var(--muted)
}

.manifesto {
    padding: 145px 5vw 170px;
    min-height: 620px
}

.manifesto h2 {
    font-size: clamp(58px, 8.7vw, 132px);
    line-height: .9;
    letter-spacing: -.08em;
    font-weight: 500;
    margin: 60px 0 80px
}

.arrow {
    display: inline-block;
    font-weight: 100;
}

.text-link {
    font: 15px var(--sans-special);
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    display: inline-flex;
    gap: 10px;
    transition: gap .3s
}

.text-link:hover {
    gap: 30px
}

.work-section {
    padding: 10px 5vw 150px
}



.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px 28px;
    padding-top: 45px
}

.work-card {
    display: block;
    text-decoration: none;
    min-width: 0
}

/* Work Card Visuals resize homepage work section */
/* To change homepage Work imagery to 16:9 later, edit only the aspect-ratio value below (16 / 9). */
.work-visual {
    position: relative;
    aspect-ratio: 1.6;
    overflow: hidden;
    background: #e4e4df
}

.work-art {
    position: absolute;
    inset: 0%;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1), filter .7s
}

.work-video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.work-card:hover .work-art {
    transform: scale(1.06) rotate(-1deg);
    filter: contrast(1.15)
}

.work-index,
.work-year {
    position: absolute;
    z-index: 2;
    top: 16px;
    color: #fff;
    font: 11px var(--mono)
}

.work-index {
    left: 17px
}

.work-year {
    right: 17px
}

.work-info {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding-top: 13px;
    font-size: 14px
}

.work-info span:last-child {
    color: var(--muted);
    text-align: right;
    font: 10px var(--mono);
    text-transform: uppercase
}

.art-1 {
    background: radial-gradient(circle at 52% 44%, #fff 0 12%, transparent 12.5%), conic-gradient(#111, #d8d8d8, #888, #111)
}

.art-2 {
    background: linear-gradient(145deg, #111 0 30%, #eee 30% 55%, #777 55% 78%, #111 78%)
}

.art-3 {
    background: radial-gradient(ellipse at 30% 25%, #fff 0 7%, transparent 8%), linear-gradient(125deg, #111, #888 52%, #eee)
}

.art-4 {
    background: repeating-linear-gradient(125deg, #111 0 18px, #eee 19px 37px, #777 38px 55px)
}

.art-5 {
    background: radial-gradient(circle at 70% 25%, #fff 0 16%, transparent 17%), linear-gradient(145deg, #222, #aaa 43%, #111)
}

.art-6 {
    background: linear-gradient(50deg, #eee 0 49%, #111 50% 66%, #aaa 67%)
}

.art-7 {
    background: radial-gradient(circle at 47% 53%, #111 0 21%, transparent 22%), linear-gradient(120deg, #ddd, #999 48%, #222)
}

.art-8 {
    background: linear-gradient(150deg, #eee 0 42%, #777 43% 62%, #111 63%)
}

.art-9 {
    background: radial-gradient(circle at 25% 70%, #eee 0 10%, transparent 10.5%), linear-gradient(130deg, #111, #777 48%, #ddd)
}

.art-10 {
    background: linear-gradient(120deg, #aaa, #eee 47%, #111 48% 68%, #ddd 69%)
}

.ticker {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 65px 0;
    font-size: clamp(44px, 7.5vw, 110px);
    letter-spacing: -.08em;
    white-space: nowrap
}

.ticker div {
    animation: marquee 22s linear infinite
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

.contact {
    padding: 150px 5vw 95px;
    display: grid;
    grid-template-columns: 1.45fr .55fr;
    gap: clamp(32px, 6vw, 90px);
    padding-top: 70px;
    align-items: end
}

.about-page .contact,
.project-page .contact {
    margin-left: -5vw;
    margin-right: -5vw
}

.contact-copy {
    max-width: 900px
}

.contact-side {
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1
}

.contact-side p {
    font: 12px var(--sans);
    line-height: 1;
    color: var(--ink);
}

.email {
    position: relative;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s ease, color .25s ease
}

.email::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 1;
    transition: transform .25s ease, opacity .25s ease
}

.email-text,
.email-arrow {
    display: inline-block;
    font-weight: 100;
    transition: transform .25s ease;
    line-height: 1.2;
}

.email:hover,
.email:focus-visible {
    transform: translateY(-2px)
}

.email:hover::after,
.email:focus-visible::after {
    transform: scaleX(1);
    opacity: 1
}

.email:hover .email-arrow,
.email:focus-visible .email-arrow {
    transform: translate(3px, -2px)
}

.contact h2 {
    font-size: clamp(88px, 13vw, 200px);
    line-height: .78;
    letter-spacing: -.1em;
    font-weight: 500;
    margin: 35px 0 0
}

.contact-row {
    display: flex;
    justify-content: space-between;
    max-width: 650px;
    border-bottom: 1px solid var(--line);
    font: 12px var(--mono);
    text-transform: uppercase
}

.contact-row a {
    text-decoration: none;
    padding: 12px 0;
    transition: opacity .2s
}

.contact-row a:hover {
    opacity: .55
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 5vw 25px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font: 11px var(--sans-special);
    letter-spacing: .06em;
    text-transform: uppercase
}

.about-page,
.project-page {
    padding: 125px 5vw 120px
}

.about-hero {
    padding: 75px 0 120px
}

.about-hero h1 {
    font-size: clamp(82px, 13vw, 205px);
    line-height: .88;
    letter-spacing: -.1em;
    font-weight: 500;
    margin: 40px 0 65px
}

.about-hero>p:last-child {
    max-width: 600px;
    margin-left: 35%;
    font-size: 20px;
    line-height: 1.25
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6vw;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    font-size: 14px;
    line-height: 1.5
}

.about-grid>div>span {
    font: 12px var(--sans-special);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.about-grid a {
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px
}


.contact-small {
    padding-top: 75px
}

.project-heading {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 10vw;
    align-items: end;
    padding: 65px 0 75px
}

.project-title {
    font-size: clamp(80px, 12vw, 195px);
    line-height: .88;
    letter-spacing: -.08em;
    font-weight: 500;
    margin: 0
}

.project-meta {
    font: 15px var(--sans-valley);
    line-height: 1.6;
    font-weight: 300;
    
}

.project-meta strong {
    display: block;
    font-weight: 300;
    color: var(--ink);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 16px
}

/* Only the Specification value is compact; all metadata labels and other values retain line-height: 1.6. */
.project-specification {
    display: block;
    line-height: 1.2;
    margin-top: 4px;
}

.project-hero {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden
}

.project-description {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8vw;
    padding: 90px 0 100px;
    border-bottom: 1px solid var(--line)
}

.project-description h2 {
    font-size: clamp(35px, 5vw, 75px);
    line-height: .95;
    letter-spacing: -.07em;
    font-weight: 500;
    margin: 0
}

.project-description p {
    color: var(--ink);
    line-height: 1.1;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px 0 110px
}

.project-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden
}

.project-image.wide {
    grid-column: span 2;
    aspect-ratio: 1.8
}

/* A gallery with exactly one supplied image keeps that image's native proportions.
   If you want the image to span the full browser viewport width while preserving
   its intrinsic aspect ratio, use the `natural` class (or set `natural: true` in site.js).
   The image will break out of the gallery column and center itself across the viewport.
*/
.project-image.natural {
    grid-column: span 2;
    aspect-ratio: auto;
    overflow: visible;
}

/* Full-bleed natural images: make the <img> use the viewport width while keeping height auto.
   Center the image by offsetting half the viewport (works with the site's horizontal padding).
*/
.project-image.natural .project-natural-image {
    display: block;
    /* Fill the available content column while preserving aspect ratio.
       This keeps the site's unified left/right margin (e.g. 5vw) intact. */
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: 0;
}

.project-image.natural .project-natural-video {
    display: block;
    /* Match image behavior: fill content column and preserve intrinsic aspect ratio. */
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: 0;
    object-fit: contain;
}

.next-projects {
    padding: 15vw 0 10vw
}

.next-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-top: 26px
}

.next-card {
    text-decoration: none;
    min-width: 0
}

.next-visual {
    position: relative;
    aspect-ratio: 1.05;
    overflow: hidden;
    background: #e4e4df
}

.next-visual .work-art {
    inset: 0%
}

.next-info {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    font-size: 13px
}

.next-info span:last-child {
    color: var(--muted);
    text-align: right;
    font: 10px var(--mono);
    text-transform: uppercase
}

.project-footer {
    background: var(--ink);
    color: var(--bg);
    padding: 110px 5vw 25px
}

.project-footer footer {
    margin: 100px -5vw 0;
    padding-left: 5vw;
    padding-right: 5vw;
    border-color: rgba(255, 255, 255, .2)
}

@media(max-width:800px) {
    .site-nav {
        height: 58px;
        padding: 0 17px;
        grid-template-columns: 1fr auto auto
    }

    .site-nav nav {
        gap: 14px;
        margin-right: 10px;
        font-size: 10px
    }

    .intro {
        height: 125svh;
        min-height: 680px;
        padding: 90px 18px 30px
    }

    .intro-top,
    .intro-bottom {
        left: 18px;
        right: 18px
    }

    .intro-top {
        top: 77px;
        font-size: 9px
    }

    .intro-stage {
        align-items: flex-end
    }

    .intro-copy {
        padding-bottom: 00
    }

    .intro-copy h1 {
        font-size: clamp(35px, 30vw, 60px)
    }

    .intro-note {
        margin-left: 10%;
        max-width: 225px;
        font-size: 14px
    }

    .model-wrap {
        width: 97vw;
        height: 97vw;
        right: -25vw;
        top: 15vh;
        opacity: .7
    }

    .model-caption {
        right: 20%;
        bottom: 10%;
        font-size: 9px
    }

    .manifesto,
    .work-section,
    .contact {
        padding: 90px 18px 100px
    }

    .manifesto h2 {
        font-size: clamp(55px, 14vw, 100px);
        margin: 45px 0 55px
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 52px;
        padding-top: 35px
    }

    .work-visual {
        aspect-ratio: 1.05
    }

    .contact {
        padding-top: 110px;
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-page .contact,
    .project-page .contact {
        margin-left: -18px;
        margin-right: -18px
    }

    .contact h2 {
        font-size: clamp(75px, 19vw, 140px)
    }

    .contact-side {
        gap: 12px
    }

    .email {
        font-size: 16px
    }

    .contact-row {
        gap: 20px
    }

    .contact-row a {
        font-size: 10px
    }

    .about-page,
    .project-page {
        padding: 105px 18px 85px
    }

    .about-hero {
        padding: 52px 0 80px
    }

    .about-hero h1 {
        font-size: clamp(75px, 20vw, 145px);
        margin: 38px 0 50px
    }

    .about-hero>p:last-child {
        margin-left: 15%;
        font-size: 17px
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .project-heading,
    .project-description {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .project-heading {
        padding: 50px 0 55px
    }

    .project-title {
        font-size: clamp(76px, 20vw, 148px)
    }

    .project-description {
        padding: 60px 0 75px
    }

    .project-gallery {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .next-projects {
        padding-bottom: 70px
    }

    .next-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 16px
    }

    .project-image,
    .project-image.wide {
        grid-column: span 1;
        aspect-ratio: 1.08
    }

    .project-image.natural {
        grid-column: span 1;
        aspect-ratio: auto
    }

    .project-image.natural .project-natural-image {
        width: 100%;
        margin-left: 0;
    }

    .project-footer {
        padding: 80px 18px 25px
    }

    .project-footer footer {
        margin: 70px -18px 0;
        padding-left: 18px;
        padding-right: 18px
    }

    footer {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 9px;
        gap: 18px
    }
}

.section-head,
.contact-row,
footer,
.project-description,
.text-link,
.about-grid a {
    border-color: transparent !important
}

.section-head a {
    text-decoration: underline solid 1px;
    text-underline-offset: 2px;
}

.ticker,
.about-grid {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important
}

html {
    scroll-behavior: auto
}

.frame-sequence {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    background: #ffffffb2;
}

.frame-sequence canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.frame-shade {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.intro-top,
.intro-bottom {
    z-index: 8;
    color: rgba(255, 255, 255, .8)
}

.intro-copy {
    z-index: 9;
    color: #fff
}

.intro-copy .eyebrow,
.intro-copy .intro-note {
    color: rgba(255, 255, 255, .78)
}

.frame-caption {
    position: absolute;
    z-index: 9;
    right: 5vw;
    bottom: 45px;
    font: 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .8)
}

@media(max-width:800px) {
    .frame-caption {
        right: 18px;
        bottom: 29px;
        font-size: 9px
    }

}

.split-word {
    display: inline-block;
    will-change: transform
}

/* Responsive homepage scale: keep both the headline and every frame in view. */
.intro-copy {
    width: min(92vw, 950px);
}

.intro-copy h1,
.manifesto h2 {
    overflow-wrap: anywhere;
}

@media (min-width:801px) and (max-width:1100px) {
    .intro-copy h1 {
        font-size: clamp(42px, 5.4vw, 68px);
    }

    .manifesto h2 {
        font-size: clamp(46px, 6.8vw, 82px);
    }
}

@media (max-width:800px) {
    .intro {
        height: 100svh;
        min-height: 540px;
    }

    .intro-copy {
        width: min(92vw, 620px);
    }

    .intro-copy h1 {
        font-size: clamp(32px, 8vw, 52px);
        line-height: .9;
    }

    .manifesto {
        min-height: 0;
        padding: 80px 18px 92px;
    }

    .manifesto h2 {
        font-size: clamp(34px, 9vw, 56px);
        line-height: .94;
        letter-spacing: -.06em;
        margin: 0 0 40px;
    }
}


/* Targeted readability, layout, and navigation refinements. */
body.dark .manifesto {
    background: #111117;
}

body.dark .manifesto h2 {
    color: #ffffff;
}

body.dark .manifesto .text-link {
    color: #ffffff;
}

/* A three-column grid keeps the middle copyright label truly centered. */
footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

footer span:nth-child(2) {
    justify-self: center;
}

footer span:last-child {
    justify-self: end;
}

/* Two identical runs make the marquee loop without a visible reset. */
.ticker .ticker-track {
    display: flex;
    width: max-content;
    animation: marquee 22s linear infinite;
    will-change: transform;
}

.ticker .ticker-track span {
    flex: 0 0 auto;
}

.ticker>div:not(.ticker-track) {
    animation: none;
}

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

@media (max-width: 800px) {
    footer {
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
    }

    footer span:nth-child(2) {
        text-align: center;
    }
}


/* Project footers use the same full-width alignment as the homepage footer. */
.project-page>footer {
    margin: 0 -5vw -120px;
}

@media (max-width: 800px) {
    .project-page>footer {
        margin: 0 -18px -85px;
    }
}