:root {
    --constant-blur: .005px
}

@font-face {
    font-family: 'Story 13';
    src: url('./Story13VF.woff2') format('woff2');
    font-weight: 100 700;
    font-display: swap
}

@font-face {
    font-family: 'Story 13 Cursive';
    src: url('./Story13CursiveVF.woff2') format('woff2');
    font-weight: 100 700;
    font-display: swap
}

@font-face {
    font-family: 'GPU Story 13';
    src: url('./Story13VF.woff2') format('woff2');
    font-weight: 100 700;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss02' 1, 'ss07' 1, 'ss12' 1
}

@font-face {
    font-family: 'GPU Story 13 Cursive';
    src: url('./Story13CursiveVF.woff2') format('woff2');
    font-weight: 100 700;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss07' 1, 'ss12' 1
}

@font-face {
    font-family: 'GPU Story 13 Cursive Email';
    src: url('./Story13CursiveVF.woff2') format('woff2');
    font-weight: 100 700;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss01' 1, 'ss10' 1
}

@font-face {
    font-family: 'GPU Story 13 Caps';
    src: url('./Story13VF.woff2') format('woff2');
    font-weight: 100 700;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss02' 1, 'ss07' 1, 'ss12' 1, 'smcp' 1, 'c2sc' 1
}

@font-face {
    font-family: 'GPU Story 13 Cursive Caps';
    src: url('./Story13CursiveVF.woff2') format('woff2');
    font-weight: 100 700;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss07' 1, 'ss12' 1, 'smcp' 1, 'c2sc' 1
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

/* Fade the complete page as one compositor layer, then turn the rose. */
html.startup-pending body { opacity: 0 }
html.startup-rose .wordmark-slot:not(.shader-ready) .wordmark__phrase {
    opacity: 0
}
html.startup-rose .wordmark-slot:not(.shader-ready) .wordmark__faw_1 {
    opacity: 1;
    visibility: visible
}

html,
body {
    color: #303030;
    overflow-x: clip;
    overscroll-behavior-y: none;
    scrollbar-width: none
}

html {
    background: #fff
}

body {
    background: transparent
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none
}

body {
    font: 700 13px/17px 'Story 13', serif;
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss02' 1, 'ss07' 1, 'ss12' 1;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: default
}

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

.contact p a,
.date,
.project-date,
.project-play {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer
}

a:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 4px
}

body.gpu-text-ready a:focus-visible {
    outline-color: #303030
}

section:focus {
    outline: none
}

em,
.wordmark__cursive,
.cursive-name {
    font-family: 'Story 13 Cursive', serif;
    font-style: normal;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss07' 1, 'ss12' 1
}

.email {
    font-family: 'Story 13 Cursive', serif;
    font-style: normal;
    font-feature-settings: 'onum' 1, 'lnum' 0, 'ss01' 1, 'ss10' 1
}

#strip {
    position: relative;
    min-height: 100svh;
    overflow: clip;
    /* HTML supplies the colour during the return transition. */
    background: transparent
}

.cycle {
    position: relative;
    height: var(--period, calc(100svh - 30px));
    pointer-events: none
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    position: absolute;
    left: 10px;
    right: 10px;
    pointer-events: auto
}

.identity {
    top: var(--row-top, calc(50svh + 2px));
    transform: translateY(var(--row-shift, 0px));
    height: 20px
}

.date {
    grid-column: 11/13;
    grid-row: 1;
    font-size: 12px;
    line-height: 17px;
    justify-self: start;
    align-self: start
}

.contact-mobile {
    display: none
}

/* GPU text draws the hover arrow and shift; this is the HTML fallback. */
.date-arrow {
    opacity: 0;
    transition: opacity .35s
}

body:not(.gpu-text-ready) .date {
    transition: transform .35s
}

@media(hover:hover) {
    body:not(.gpu-text-ready) .date:hover {
        transform: translateX(2px)
    }

    body:not(.gpu-text-ready) .date:hover .date-arrow {
        opacity: 1
    }
}

/* Native ink remains as the accessible fallback until the GPU is ready. */
.date,
.information h2,
.information p {
    text-shadow: 0 0 var(--constant-blur, .01px) rgba(48, 48, 48, .5)
}

.gpu-text-canvas {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
    pointer-events: none;
    display: block;
    overflow-anchor: none
}

body.gpu-text-ready .date,
body.gpu-text-ready .information h2,
body.gpu-text-ready .information p {
    color: transparent;
    text-shadow: none
}

body.gpu-text-ready .information p {
    pointer-events: none
}

body.gpu-text-ready .information p a {
    pointer-events: auto
}

.wordmark-slot {
    grid-column: 8/11;
    grid-row: 1;
    position: relative;
    width: 125px;
    height: 20px
}

.wordmark {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    text-shadow: 0 0 var(--constant-blur, .01px) rgba(48, 48, 48, .5);
    touch-action: none
}

.wordmark__hit {
    position: relative;
    display: inline-block
}

.wordmark__hit::before {
    content: '';
    position: absolute;
    left: -9.98px;
    top: -11.197px;
    width: calc(100% + 14px);
    height: 40.391px
}

.wordmark__phrase {
    display: inline-block
}

.wordmark__faw_1 {
    position: absolute;
    left: 1px;
    top: -1px;
    width: 67.86px;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-user-drag: none
}

.wordmark-canvas {
    position: absolute;
    left: -24px;
    top: -24px;
    width: 180px;
    height: 80px;
    visibility: hidden;
    pointer-events: none
}

.shader-ready .wordmark {
    text-shadow: none
}

.shader-ready .wordmark__phrase,
.shader-ready .wordmark__roman,
.shader-ready .wordmark__cursive {
    opacity: 0
}

.shader-ready .wordmark-canvas {
    visibility: visible
}

.gpu-text-ready .shader-ready .wordmark-canvas {
    visibility: hidden
}

.shader-loading .wordmark {
    opacity: 1
}

.information {
    top: var(--body-top, calc(100svh - 20px));
    transform: translateY(var(--body-shift, 0px));
    align-items: start;
    overflow: clip;
    overscroll-behavior: none
}

.information > section {
    overflow: clip;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto
}

.information p {
    opacity: var(--cover-copy-opacity, 1)
}

.relations {
    grid-column: 1/8;
    padding-right: 10px
}

.imprint {
    grid-column: 8/11;
    padding-right: 10px
}

.contact {
    grid-column: 11/13
}

.contact p a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #000;
    text-decoration-thickness: 1.5%; /* 0.195px at 13px */
    text-underline-offset: 18.5%; /* 2.405px at 13px */
    text-underline-position: from-font
}

body.gpu-text-ready .contact p a {
    opacity: var(--gpu-contact-opacity, 0)
}

.imprint-marker {
    font-variant-caps: normal
}

h2 {
    font: inherit;
    font-size: 14px;
    line-height: 17px;
    font-variant-caps: all-small-caps;
    margin-bottom: 6px
}

h2 em {
    font-size: 14px
}

.is-initial-previous .information {
    visibility: hidden
}

/* The initial copy remains useful when JavaScript or WebGL is unavailable. */
body:not(.loop-ready) .cycle {
    min-height: calc(200svh + 500px)
}

@media(max-width:767px) {
    body {
        font-size: 11px;
        line-height: 13px
    }

    .grid {
        left: 10px;
        right: 10px
    }

    .identity .date {
        grid-column: 8/13;
        font-size: 11px;
        line-height: 14px
    }

    .contact-mobile {
        display: inline
    }

    .contact-desktop {
        display: none
    }

    .wordmark-slot {
        grid-column: 1/8
    }

    .wordmark {
        font-size: 11px
    }

    .wordmark__faw_1 {
        width: 57px
    }

    .information {
        row-gap: var(--mobile-section-gap, 18px)
    }

    .information>section {
        overflow: clip;
        overscroll-behavior: none
    }

    .gpu-text-canvas {
        position: absolute;
        overflow-anchor: none
    }

    .information h2 {
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 7px
    }

    .information h2 em {
        font-size: 12px
    }

    .imprint {
        grid-column: 1/8;
        grid-row: 1;
        max-width: none;
        padding-right: 10px
    }

    .contact {
        grid-column: 8/13;
        grid-row: 1
    }

    .relations {
        grid-column: 1/-1;
        grid-row: 2;
        max-width: none;
        padding-right: 0
    }
}

/* Project page: a non-scrolling layer that slides in beside the main
   page. Its layout follows the snap position it was opened from. */
html.project-active {
    overflow: hidden
}

html.project-open #strip,
html.project-open .gpu-text-canvas {
    opacity: 0
}

/* The project page slides in white, then it and the document fade to the
   project grey: Figma's #5d5d5d at 30% over white, as one solid colour.
   The wrapper is absolute at the current scroll offset, not viewport-fixed.
   HTML is the sole document background; body stays transparent.
   An absolute inner background supplies grey beneath the image fade. */
.project-background {
    position: absolute;
    inset: 0;
    background: #cecece;
    pointer-events: none
}

.project-sheet {
    position: absolute;
    inset: 0;
    background: #fff
}

.project {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 10;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    color: #303030;
    letter-spacing: -.01em;
    touch-action: none;
    overscroll-behavior: none
}

.project[hidden] {
    display: none
}

.project-image {
    position: absolute;
    inset: 0;
    opacity: var(--project-reveal, 0);
    mix-blend-mode: normal;
    pointer-events: none
}

.project-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom
}

.project-row,
.project-info {
    position: absolute;
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.project-row,
.project-info,
.project-play {
    text-shadow: 0 0 var(--constant-blur, .01px) rgba(48, 48, 48, .5)
}

.project-row {
    line-height: 17px
}

.project-row--secondary {
    display: none
}

.project-date,
.project-wordmark {
    justify-self: start;
    white-space: nowrap
}

.project-date {
    grid-column: 1/8
}

.project-wordmark {
    grid-column: 8/13
}

/* Hover (or a tap) reveals the back arrow, pushing the date to the right. */
.project-back {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    vertical-align: bottom;
    opacity: 0;
    filter: blur(2px);
    transition: max-width .35s, opacity .35s, filter .35s
}

.project:not(.gpu-ready) .project-date.is-pressed .project-back {
    max-width: 2em;
    opacity: 1;
    filter: none
}

@media(hover:hover) {
    .project:not(.gpu-ready) .project-date:hover .project-back {
        max-width: 2em;
        opacity: 1;
        filter: none
    }
}

.project:focus,
.project a:focus:not(:focus-visible) {
    outline: none
}

/* The GPU canvas draws the text with the main page's blur/threshold field.
   The HTML stays in place, transparent, for layout, links and selection. */
.project-text-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none
}

.project.gpu-ready .project-row,
.project.gpu-ready .project-info,
.project.gpu-ready .project-play {
    color: transparent;
    text-shadow: none
}

.project.gpu-ready a:focus-visible {
    outline-color: #303030
}

.project-play:focus-visible {
    outline: 1px solid #303030;
    outline-offset: 4px
}

.project-info {
    pointer-events: none
}

.project-play {
    position: absolute;
    left: calc(50% + .5px);
    top: calc(50% - 19px);
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 9.38px;
    font-variant-caps: all-small-caps;
    white-space: nowrap;
    /* Revealed with the grey fade (project.js). */
    opacity: 0
}

/* Enlarge the hit area without moving the label or its GPU text mask. */
.project-play::before {
    content: '';
    position: absolute;
    inset: -20px;
    pointer-events: auto
}

.project-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    background: #000;
    color: #fff
}

.project-video::backdrop {
    background: #000
}

.project-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000
}

.project-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0
}

.project-video-close {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    font: inherit;
    cursor: pointer
}

.project-info {
    align-items: start
}

.project-info h2 {
    margin-bottom: 1px
}

.project-concept {
    grid-column: 1/8
}

.project-medium {
    grid-column: 8/11;
    padding-right: 10px
}

.project-when {
    grid-column: 11/13
}

/* Desktop, opened from the centred identity row. */
.project[data-layout='d-center'] .project-row--primary {
    top: calc(50% - 18px)
}

.project[data-layout='d-center'] .project-info {
    top: 4px
}

/* Desktop, opened from the details stop: identity rows at both edges. */
.project[data-layout='d-details'] .project-image {
    inset: 0
}

.project[data-layout='d-details'] .project-row--primary {
    top: 5px
}

.project[data-layout='d-details'] .project-row--secondary {
    display: grid;
    top: calc(100% - 24px)
}

.project[data-layout='d-details'] .project-info {
    bottom: 41px
}

@media(max-width:767px) {
    .project-row,
    .project-info {
        grid-template-columns: calc(40vw + 66px) 1fr
    }

    .project-row {
        font-size: 11px;
        line-height: 14px
    }

    .project-date {
        grid-column: 1
    }

    .project-wordmark {
        grid-column: 2
    }

    .project-play {
        left: calc(50% - 20px);
        top: 50%;
        transform: none;
        font-size: 12px;
        letter-spacing: 5.28px
    }

    .project-info p {
        font-size: 11px;
        line-height: 14px
    }

    .project-info h2 {
        font-size: 12px;
        line-height: 14px;
        margin-bottom: 2px
    }

    .project-break {
        display: none
    }

    .project-concept {
        grid-column: 1/-1
    }

    .project-medium {
        grid-column: 1;
        padding-right: 0
    }

    .project-when {
        grid-column: 2
    }

    /* Opened from the centred identity: the wordmark is intentionally absent. */
    .project[data-layout='m-center'] .project-row--primary {
        top: calc(50% + 2px)
    }

    .project[data-layout='m-center'] .project-wordmark {
        visibility: hidden
    }

    .project[data-layout='m-center'] .project-info {
        top: 16px;
        bottom: 28px;
        align-content: space-between
    }

    /* Opened with the identity at the top of the screen. */
    .project[data-layout='m-top'] .project-row--primary {
        top: 17px
    }

    .project[data-layout='m-top'] .project-info {
        bottom: 14px;
        row-gap: 14px
    }

    .project[data-layout='m-top'] .project-info h2 {
        margin-bottom: 0
    }

    /* Opened from Relations, with the next identity at the bottom. */
    .project[data-layout='m-bottom'] .project-row--primary {
        top: calc(100% - 28px)
    }

    .project[data-layout='m-bottom'] .project-info {
        top: 16px;
        row-gap: 13px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important
    }
}

@media (hover: hover) and (pointer: fine) {
    a { cursor: pointer; }
    .imprint h2 a, .contact h2 a, .relations h2 a { cursor: default; }
}

@media(max-width:767px) {
    .project-image::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 10%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom, var(--project-tint, #cecece), transparent);
    }
}

/* Early touch gestures over the logo remain native vertical scrolls. */
.wordmark-slot.is-starting .wordmark { touch-action: pan-y; }

/* The opening mobile cover starts at the browser's real top boundary. */
#strip {
 top: calc(-1 * var(--scroll-origin, 0px));
 margin-bottom: calc(-1 * var(--scroll-origin, 0px));
 overflow-anchor: none;
}

/* Figma rose-mobile: 150px; rose-desktop: native 200px. */
.idle-rose {
 position: fixed;
 inset: 0;
 z-index: 6;
 display: grid;
 place-items: center;
 pointer-events: none;
}
.idle-rose[hidden], .project-active .idle-rose { display: none; }
.idle-rose img {
 display: block;
 width: 200px;
 max-width: calc(100vw - 40px);
 max-height: calc(100dvh - 40px);
 height: auto;
 object-fit: contain;
 opacity: 0;
}
.idle-rose:not([hidden]) img { animation: idle-rose-steps 350ms step-end both; }
@keyframes idle-rose-steps {
 0% { opacity: .2; }
 28.57142857142857% { opacity: .5; }
 57.14285714285714% { opacity: .8; }
 100% { opacity: 1; }
}
@media(max-width:767px) { .idle-rose img { width: 150px; } }