@font-face {
    font-family: "Pica";
    src: url("/assets/Pica-LightCondensed80.otf") format("opentype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Pica";
    src:
        url("/assets/Pica-RegularCondensed80.woff2") format("woff2"),
        url("/assets/Pica-RegularCondensed80.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Pica";
    src:
        url("/assets/Pica-MediumCondensed80.woff2") format("woff2"),
        url("/assets/Pica-MediumCondensed80.otf") format("opentype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Pica";
    src: url("/assets/Pica-SemiBoldCondensed80.otf") format("opentype");
    font-weight: 600;
    font-display: swap;
}

:root {
    --bg: #000000;
    --fg: #555553;
    --bright: #fffffd;
    --line: #2f2f2d;
    --edge: clamp(28px, 2.1vw, 56px);
    --space: clamp(28px, 4.6vw, 56px);
    --font-size1: clamp(1rem, 2.1vw, 2.6rem);
    --font-size1: 1.8rem;
    --line-height1: 0.93;
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-link-in: cubic-bezier(0.16, 1, 0.2, 1.005);
    --time-logo-transition: 1500ms;
    --time-link-enter: 1500ms;
    --time-link-stagger: 50ms;
    --time-preview-fade: 140ms;
    --time-preview-pop: 1000ms;
    --time-fade-medium: 500ms;
    --time-fade-fast: 200ms;
    --time-fade-instant: 80ms;
    --time-info-panel-slide: 1500ms;
    --time-info-back-fade: 120ms;
    --time-carousel-entry-delay: 500ms;
    --time-title-reveal-delay: 1460ms;
    --time-project-info-reveal-delay: 1500ms;
    --time-project-back-reveal-delay: 2300ms;
    --time-work-enter-cleanup: 2900ms;
    --time-project-enter-cleanup: 2500ms;
    --time-project-overlay-clear: 1620ms;
    --time-overlay-remove: 200ms;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: "Pica", Arial, sans-serif;
    font-size: 18px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    font-weight: 500;
    font-size: var(--font-size1);
    font-feature-settings: "liga" 1, "dlig" 1;
    font-synthesis: none;
}

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

button {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

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

.page {
    min-height: 100vh;
}

.landing,
.work,
.info,
.project,
.not-found {
    position: relative;
    min-height: 100vh;
    padding: var(--edge);
}

.landing {
    display: flex;
    align-items: center;
}

.site-logo {
    width: 80vw;
    height: auto;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 46%;
    opacity: 1;
    transition:
        opacity var(--time-logo-transition) var(--ease-smooth),
        transform var(--time-logo-transition) var(--ease-smooth);
    will-change: transform;
    pointer-events: none;
}

.site-logo.is-transitioning-out {
    
    opacity: 0;
}

.corner-nav {
    position: fixed;
    z-index: 10;
    bottom: var(--edge);
    right: var(--edge);
    line-height: var(--line-height1);
    text-align: right;
}

.corner-link {
    pointer-events: auto;
    transition: opacity var(--time-link-enter), color 0.05s ease-in-out;
    position: fixed;
    pointer-events: auto;
    line-height: var(--line-height1);
}

.corner-link:hover,
.corner-link:focus-visible,
.corner-link[aria-current="page"] {
    color: var(--bright);
}

.corner-link-back {
    left: var(--edge);
    top: var(--edge);
}

.work.is-entering .corner-link-back {
    opacity: 0;
}

.corner-link-info {
    bottom: var(--edge);
    right: var(--edge);
}

.corner-link-work {
    top: var(--edge);
    right: var(--edge);
}

.corner-link-contactXXX {
    left: var(--edge);
    top: var(--edge);
}

.site-slogan,
.body-copy {
    margin: 0;
    line-height: var(--line-height1);
    letter-spacing: 0;
}

.site-slogan {
    position: fixed;
    left: var(--edge);
    bottom: var(--edge);
    z-index: 4;
}

.bright-text {
    color: var(--bright);
}

.page-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--edge);
}

.site-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--bright);
}

.project-list {
    position: fixed;
    top: calc(var(--edge) + var(--edge) + var(--font-size1) );
    right: var(--edge);
    z-index: 5;
    display: grid;
    align-content: start;
    justify-items: end;
    gap: 0;
    text-align: right;
}

.project-link {
    width: fit-content;
    color: var(--fg);
    line-height: var(--line-height1);
    transition: color 0.05s ease-in-out;
}

.work.is-entering .project-link {
    opacity: 1;
    transform: translateX(50rem);
    animation: work-link-in var(--time-link-enter) var(--ease-link-in) forwards;
    animation-delay: calc(var(--stagger-index, 0) * var(--time-link-stagger));
}

.project-link:hover,
.project-link:focus-visible,
.project-link.is-active {
    color: var(--bright);
}

@keyframes work-link-in {
    from {
        opacity: 1;
        transform: translateX(50rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.work-preview-frame {
    position: fixed;
    top: calc(var(--edge) + var(--edge) + var(--font-size1) );
    left: var(--edge);
    z-index: 2;
    width: min(
        calc((100vh - ((var(--edge) * 5) + (var(--font-size1) * 3))) * (4 / 3)),
        calc(100vw - (var(--edge) * 2) - 16rem)
    );
    height: calc( 100vh - ( ( var(--edge) * 5 ) + ( var(--font-size1) * 3 ) ) );
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;

    width: auto;
    aspect-ratio: 6/4;
}

.project-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--time-preview-fade) ease;
}

.project-preview-inner {
    position: absolute;
    inset: 0;
    transform: scale(1);
    transform-origin: center center;
}

.project-preview-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.project-preview-video {
    width: 100%;
    height: 100%;
}

.project-preview.is-visible {
    opacity: 1;
}

.project-preview.is-animating .project-preview-inner {
    animation: preview-pop var(--time-preview-pop) ease;
}

@keyframes preview-pop {
    from {
        transform: scale(1.01);
    }

    to {
        transform: scale(1);
    }
}

.work.is-transitioning-project .corner-link-info,
.work.is-transitioning-project .corner-link-work,
.work.is-transitioning-project .corner-link-back,
.work.is-transitioning-project .project-link {
    opacity: 0;
    transition: opacity var(--time-fade-fast) ease;
}

.work.is-transitioning-project .project-link.is-transition-selected {
    opacity: 0;
    color: var(--bright);
    transition: opacity var(--time-fade-instant) ease;
}

.project-page {
    min-height: 100vh;
}

.project-back {
    z-index: 20;
    transition: opacity var(--time-info-back-fade) ease;
}

.project-page-title {
    position: fixed;
    top: var(--edge);
    right: var(--edge);
    z-index: 22;
    color: var(--bright);
    line-height: var(--line-height1);
    text-align: right;
    pointer-events: none;
}

.project-page-slogan {
    z-index: 22;
    transform: translate3d(0, 0, 0);
    transition: transform var(--time-info-panel-slide) var(--ease-smooth);
}

.project-info {
    z-index: 22;
}

.project-info-toggle {
    cursor: pointer;
}

.project-info-panel {
    position: fixed;
    inset: 0;
    z-index: 18;
    background: var(--bg);
    transform: translate3d(0, calc(100% - 7rem), 0);
    transition: transform var(--time-info-panel-slide) var(--ease-smooth);
    pointer-events: none;
    overflow-y: auto;
}

.project-info-panel-inner {
    min-height: 100%;
    padding:
        calc(var(--edge) + var(--project-info-header-height, 0px) + var(--space))
        var(--edge)
        calc(var(--edge) * 2)
        var(--edge);
}

.project-info-summary {
    max-width: min(45rem, calc(100vw - (var(--edge) * 2)));
    margin: 0 0 calc(var(--space) * 1.4);
    color: var(--bright);
    line-height: var(--line-height1);
}

.project-info-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: calc(var(--space) * 1.2);
    row-gap: calc(var(--space) * 0.72);
    align-items: start;
    max-width: min(66rem, calc(100vw - (var(--edge) * 2)));
}

.project-info-label {
    color: var(--fg);
    line-height: var(--line-height1);
}

.project-info-value {
    color: var(--bright);
    line-height: var(--line-height1);
}

.project-info-value a:hover,
.project-info-value a:focus-visible {
    text-decoration: underline;
}

.project-page.is-info-open .project-info-panel {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.project-page.is-info-open .project-page-slogan {
    transform: translate3d(0, var(--project-info-slogan-shift, 0px), 0);
}

.project-page.is-info-open .project-back {
    opacity: 0;
    pointer-events: none;
}

.project-carousel-shell {
    position: fixed;
    top: calc(var(--edge) + var(--edge) + var(--font-size1));
    left: 0;
    width: min(
        calc((100vh - ((var(--edge) * 5) + (var(--font-size1) * 3))) * (4 / 3)),
        calc(100vw - (var(--edge) * 2) - 16rem)
    );

    width: 100vw;
    height: calc(100vh - ((var(--edge) * 5) + (var(--font-size1) * 3)));
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 6;
    --carousel-gap: calc(var(--edge) / 1.25);
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-x;
}

.project-carousel-shell::-webkit-scrollbar {
    display: none;
}

.project-carousel-shell.is-dragging {
    cursor: grabbing;
}

.project-carousel-track {
    display: flex;
    align-items: stretch;
    gap: var(--carousel-gap);
    width: max-content;
    height: 100%;
}

.project-carousel-slide {
    position: relative;
    height: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    user-select: none;
}

.project-carousel-slide:first-child {
    width: auto;
    aspect-ratio: 6/4;
    margin-left: var(--edge);
}

.project-carousel-slide:last-child {
    margin-right: var(--edge);
}

.project-carousel-media-wrap {
    position: relative;
    width: auto;
    height: 100%;
    overflow: hidden;
}

.project-carousel-media {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.project-carousel-slide:first-child .project-carousel-media-wrap,
.project-carousel-slide:first-child .project-carousel-media {
    width: 100%;
    object-fit: cover;
}

.project-page.is-entering-from-work .project-page-title,
.project-page.is-entering-from-work .project-page-slogan,
.project-page.is-entering-from-work .project-back,
.project-page.is-entering-from-work .project-info,
.project-page.is-entering-from-work .project-carousel-slide:first-child {
    opacity: 0;
}

.project-page.is-entering-from-work .project-page-title {
    opacity: 0;
}

.project-page.is-entering-from-work .project-carousel-slide:not(:first-child) {
    transform: translateX(50rem);
    opacity: 0;
}

.project-page.is-entering-from-work.is-settled .project-carousel-slide:not(:first-child) {
    animation: work-link-in var(--time-link-enter) var(--ease-link-in) forwards;
    animation-delay: calc(var(--time-carousel-entry-delay) + (max(0, var(--slide-index, 1) - 1) * var(--time-link-stagger)));
}

.project-page.is-entering-from-work.is-settled .project-page-slogan,
.project-page.is-entering-from-work.is-settled .project-carousel-slide:first-child {
    opacity: 1;
    transition: opacity var(--time-fade-medium) ease;
}

.project-page.is-entering-from-work.is-settled .project-info {
    opacity: 1;
    transition: opacity var(--time-fade-medium) ease var(--time-project-info-reveal-delay);
}

.project-page.is-entering-from-work.is-settled .project-back {
    opacity: 1;
    transition: opacity var(--time-fade-medium) ease var(--time-project-back-reveal-delay);
}

.project-page.is-entering-from-work.is-settled .project-page-title {
    opacity: 1;
    transition: opacity var(--time-fade-medium) ease var(--time-title-reveal-delay);
}

.project-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.project-transition-preview {
    position: fixed;
    overflow: hidden;
}

.project-transition-preview .project-preview,
.project-transition-preview .project-preview-inner,
.project-transition-preview .project-preview-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.project-transition-preview .project-preview {
    overflow: hidden;
}

.project-transition-preview .project-preview-media {
    object-fit: cover;
}

.project-transition-slogan {
    position: fixed;
    left: var(--edge);
    bottom: var(--edge);
    z-index: 41;
}

.project-transition-title {
    position: fixed;
    z-index: 41;
    color: var(--bright);
    line-height: var(--line-height1);
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    transition:
        transform var(--time-link-enter) var(--ease-link-in),
        opacity var(--time-fade-medium) ease;
}

.project-transition-overlay.is-clearing {
    opacity: 0;
    transition: opacity var(--time-fade-fast) ease;
}

.project-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
    gap: var(--space);
    margin-bottom: var(--space);
}

h1 {
    margin: 0;
    line-height: var(--line-height1);
}

.project-meta {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    margin: 0;
}

.project-meta div {
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

.project-meta dt {
    color: var(--fg);
}

.project-meta dd {
    margin: 0;
}

.project-images,
.info-images {
    display: grid;
    gap: var(--space);
}

.project-images img {
    width: 100%;
}

.info-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space);
}

.info-images div {
    min-height: 32vw;
    border: 1px solid var(--line);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/*
@media (max-width: 760px) {
    :root {
        --edge: 22px;
    }

    .landing {
        align-items: center;
    }

    .site-logo {
        width: 90vw;
    }

    .corner-link {
        font-size: 1.55rem;
    }

.site-slogan {
        max-width: calc(100vw - var(--edge) * 2);
        font-size: 1.55rem;
    }

    .work-slogan {
        bottom: calc(var(--edge) + 62px);
    }

    .page-header {
        justify-content: flex-start;
    }

    .project-intro,
    .info-images {
        grid-template-columns: 1fr;
    }

    .project-list {
        top: 96px;
        left: var(--edge);
        right: auto;
        justify-items: start;
        width: calc(100vw - var(--edge) * 2);
        text-align: left;
    }

    .project-link {
        font-size: 2rem;
    }

    .work-preview-frame {
        top: 330px;
        width: calc(100vw - var(--edge) * 2);
        height: 42vw;
    }

    .project-carousel-shell {
        width: calc(100vw - var(--edge) * 2);
        height: 42vw;
    }

    .project-info-panel-inner {
        padding-top: calc(var(--edge) + var(--project-info-header-height, 0px) + calc(var(--space) * 1.2));
    }

    .project-info-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: calc(var(--space) * 0.28);
    }

    .project-info-value {
        margin-bottom: calc(var(--space) * 0.5);
    }
}
*/