/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    color: inherit;
    text-decoration: none;
    text-underline-position: from-font;
}
a:hover {
    text-decoration: underline;
    text-underline-position: from-font;
}
a[target="_blank"]:after {
    /*content:' [+]';
    vertical-align: top;*/
}
h1, h2, h3, h4, h5, h6 {
    text-indent: 0 !important;
}
p, ol, ul {
    margin-bottom: 0.5em;
}
ol, ul {
    padding-left: 1.5em;
}
ol {
    list-style: decimal;
}
ul {
    list-style: disc;
}
ol p, ul p {
    margin-bottom: 0;
}
em {
    font-style: italic;
}
button {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--linkcolor);
    cursor: pointer;
}

@font-face {
    font-family: 'Surt';
    src: url('../fonts/ATSurt-Regular.woff2') format('woff2');
    font-weight:  500;
    font-style:   normal;
    font-stretch: normal;
    font-display: swap;
}

* {
    --margin: 2.5vw;
    --sidemargin: calc(var(--margin) * 3);
    --innermargin: 2.5vw;
    --textsize: calc(var(--smallsize) + 0.4vw);
    --lineheight: 2px;
    --titlesize: calc(0.5em + 3vw);
    --smallsize: 16px;
    --textcolor: #000000;
    --linkcolor: #000000;
    --bgcolor: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    * {
        --textcolor: #FFFFFF;
        --linkcolor: #FFFFFF;
        --bgcolor: #000000;
    }
}

html, body {
    font-family: 'Surt', 'Helvetica neue', Helvetica, Arial, sans-serif;
    font-size: var(--textsize);
    font-weight: 500;
    line-height: 1.2;
    scroll-behavior: smooth;
    background-color: var(--bgcolor);
    color: var(--textcolor);
    position: relative;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

#logo-wordmark {
    position: absolute;
    top: var(--margin);
    left: calc(var(--margin) * 3);
    z-index: 1;
}
.error #logo-wordmark {
    left: var(--margin);
}
.wordmark {
    letter-spacing: 0.1em !important;
    width: 10em;
}
#logo-initials {
    position: fixed;
    z-index: 9999;
    top: var(--margin);
    right: var(--margin);
    width: var(--margin);
    text-align: center;
}
#logo {
    mix-blend-mode: difference;
}

#button-about {
    background-color: var(--textcolor);
    position: fixed;
    bottom: var(--margin);
    right: var(--margin);
    z-index: 999; 
    height: var(--margin);
    width: var(--margin);
}
.error #button-about {
    display: none;
}
#button-about:before,
#button-about:after {
    content: '';
    display: block;
    height: var(--lineheight);
    width: calc(var(--margin) / 1.5);
    background: var(--bgcolor);
    position: absolute;
    top: calc(50% - var(--lineheight) / 2);;
    left: calc(50% - var(--margin) / 3);
    transform-origin: center;
    transition: all 500ms;
}
#button-about:after {
    transform: rotate(-90deg);
}
.show-about #button-about:before {
    transform: rotate(45deg);
}
.show-about #button-about:after {
    transform: rotate(-45deg);
}


#projects-index {
    padding: var(--margin) var(--sidemargin) var(--margin) var(--margin);
    font-size: var(--smallsize);
}
#projects-index-header {
    position: sticky;
    top: 0;
    padding-top: var(--margin);
    background: var(--bgcolor);
}
#projects-index-header > * {
    /*overflow: hidden;*/
    white-space: nowrap;
    text-overflow: ellipsis;
}
.projects-index-title {
    text-transform: uppercase;
    border-bottom: var(--textcolor) var(--lineheight) solid;
    padding: 1em 0;
    padding-top: 3em;
}
.projects-index-row {
    border-bottom: var(--textcolor) var(--lineheight) solid;
    padding: 1em 0;
    display: grid;
    grid-template-columns: 25% 22.2% 25% 19.4%;
    column-gap: var(--margin);
}

#about-panel {
    position: fixed;
    z-index: 998;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    background-color: #C8C8A0;
    color: #000000;
    transform: translateX(100%);
    transition: transform 500ms;
    overflow: auto;
}
.show-about #about-panel {
    transform: translateX(0);
}
#about {
    display: flex;
    flex-direction: column;
    gap: var(--margin);
    padding: var(--margin) var(--sidemargin) var(--margin) var(--margin);
}

main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--margin) * 10)
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    /*border-bottom: var(--lineheight) solid var(--textcolor);*/
    /*z-index: 1;
    overflow: hidden;*/
}


.project-title {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--margin) var(--margin) 0;
    font-size: var(--smallsize);
    font-feature-settings: 'case' on;
}
.project-title > * {
    width: calc(50% - var(--innermargin));
}

.project-text {
    padding: var(--margin) var(--sidemargin) 0 var(--margin);
    display: flex;
    flex-direction: column;
    gap: var(--margin);
    margin-bottom: var(--margin)
}

.project-medias {
    padding: var(--margin) var(--margin) 0 var(--margin);
    display: flex;
    flex-direction: column;
    gap: var(--margin);
    margin-bottom: var(--margin)
    /*background: var(--bgcolor);*/
}
figure {
    position: relative;
    /*margin-bottom: var(--margin);*/
}
img {
    display: block;
    width: 100%;
    height: auto;
}

.project-infos {
    padding: 0 var(--margin) var(--margin);
    /*background: var(--bgcolor);*/
}

figcaption {
    font-size: var(--smallsize);
    padding-top: 0.5em;
}
.project-image figcaption {
    text-transform: uppercase;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--innermargin);
}
/*.project-image figcaption::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000005;
}*/

#credits {
    font-size: var(--smallsize);
}


.type-s {
    font-size: var(--smallsize);
}
.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tabular {
    font-variant-numeric: tabular-nums;
}
.indent p {
    text-indent: 4em;
}
.indent p:first-child {
    text-indent: 0;
}
.indent p {
    margin-bottom: 0;
}

p+h2, p+h3, p+h4 {
    margin-top: 1.2em;
}
h2+p, h3+p, h4+p {
    margin-top: 1.2em;
    text-indent: 0 !important;
}

.difference {
    color: #FFFFFF;
    mix-blend-mode: difference;
}


#pattern-container {
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: difference;
}

#pattern {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    height: var(--scrollHeight);
    background-image: url('../images/pattern-desktop.webp');
    background-size: 100%;
    background-position: bottom;
    transition: opacity .25s ease-in-out;
}



#grid {
    --color: #dadada;
    --gridgap: var(--margin);
    position: fixed;
    inset: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(to right, transparent, transparent var(--gridgap), var(--color) var(--gridgap), var(--color));
    background-size: calc(100% / 20);
    opacity: 0.25;
    pointer-events: none;
    z-index: 999;
}
#grid.hide {
    display: none;
}

.project-cover figure {
    /*height: 100vh;*/
}
.info-text {
    width: 47.25%;
}

.project-text,
.media-row {
    display: flex;
    align-items: end;
}
.project-text,
.media-row:nth-child(even) {
    flex-direction: row-reverse
}
.project-image {
    z-index: 1;
}


[data-size="16/9"],
[data-size="3/1"],
[data-size="3/2"],
[data-size="4/3"] {
    width: 71.05%
}
[data-size="1/1"] {
    width: 50%
}
[data-size="3/4"],
[data-size="2/3"],
[data-size="9/16"],
[data-size="1/3"] {
    width: 50%
}

.swiper {
/*  
    width: 600px;
    height: 300px;
*/
}

[data-ratio="16/9"] {
    aspect-ratio: 16/9
}
[data-ratio="3/1"] {
    aspect-ratio: 3/1
}
[data-ratio="3/2"] {
    aspect-ratio: 3/2
}
[data-ratio="4/3"] {
    aspect-ratio: 4/3
}
[data-ratio="1/1"] {
    aspect-ratio: 1/1
}
[data-ratio="3/4"] {
    aspect-ratio: 3/4
}
[data-ratio="2/3"] {
    aspect-ratio: 2/3
}
[data-ratio="9/16"] {
    aspect-ratio: 9/16
}
[data-ratio="1/3"] {
    aspect-ratio: 1/3
}

.project-cover figure img,
.project-medias figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-cover figure img {
    min-height: 100vh;
    /*min-height: 100svh;*/
    max-height: 120vh;
    /*max-height: 120svh;*/
}


html.lenis, html.lenis body {
    height: auto;
  }
  
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }
  
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  
  .lenis.lenis-smooth iframe {
    pointer-events: none;
  }

/**
 * Swiper 11.1.14
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 12, 2024
 */

/* FONT_START */
@font-face {
    font-family: 'swiper-icons';
    src: url('data:application/font-woff;charset=utf-8;base64, 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');
    font-weight: 400;
    font-style: normal;
  }
  /* FONT_END */
  :root {
    --swiper-theme-color: #007aff;
    /*
    --swiper-preloader-color: var(--swiper-theme-color);
    --swiper-wrapper-transition-timing-function: initial;
    */
  }
  :host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  .swiper {
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
    display: block;
  }
  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
  }
  .swiper-android .swiper-slide,
  .swiper-ios .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
  }
  .swiper-horizontal {
    touch-action: pan-y;
  }
  .swiper-vertical {
    touch-action: pan-x;
  }
  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
  }
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  
  /* Slide lazy-loading */

  .swiper-slide-prev img {
  }
  .swiper-slide-prev img {
  }
  
  /* Slide styles end */


.swiper-button-prev, .swiper-button-next {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    cursor: url("../images/arrow-next.svg"), e-resize;
    right: 0;
    left: auto;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    cursor: url("../images/arrow-prev.svg"), w-resize;
    left: 0;
    right: auto;
}

.swiper-pagination-fraction {
    text-align: center;
    width: var(--margin);
    /*padding: 0 var(--smallsize);*/
    margin-bottom: calc(var(--smallsize) / -3);
}


@media screen and (hover: none) {
    .swiper-button-prev, .swiper-button-next {
        display: none;
    }
}
@media screen and (hover: hover) {
}
@media screen and (orientation: portrait) {
}

@media screen and (max-width: 1024px) {
    * {
        --textsize: 16px;
        --lineheight: 2px;
        --smallsize: 12px;
    }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
}
@media screen and (min-width: 1024px) {
    .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--margin);
    }
    .list > * {
        margin-bottom: 0;
    }

    
}

@media screen and (max-width: 640px) {
    * {
        --margin: 5vw;
        --textsize: 16px;
        --lineheight: 1.5px;
        --smallsize: 12px;
    }
    #grid {
        background-size: calc(100% / 10);
    }
    #pattern {
        background-image: url('../images/pattern-mobile.svg');
    }
    #button-about {
        bottom: calc(var(--margin) * 0.75);
        right: calc(var(--margin) * 0.75);
        height: calc(var(--margin) * 1.5);
        width: calc(var(--margin) * 1.5);
    }
    .project-title {
        position: relative;
    }
    .project-title > * {
        width: 100%;
    }
    .info-text {
        width: 100%
    }
    [data-size="16/9"],
    [data-size="3/1"],
    [data-size="3/2"],
    [data-size="4/3"] {
        width: 89%
    }
    [data-size="1/1"] {
        width: 89%
    }
    [data-size="3/4"],
    [data-size="2/3"],
    [data-size="9/16"],
    [data-size="1/3"] {
        width: 66.5%
    }
    #about-panel {
        left: 0;
    }
    #projects-index-header span:not(:first-child) {
        display: none;
    }
    .projects-index-row {
        grid-template-columns: repeat(1, 1fr);
    }
    .projects-index-row:not(#projects-index-header) span:before {
        content: attr(data-type) ': ';
    }
}