@font-face{font-family:"Timin Sans";src:url("fonts/sans.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"Timin Mono";src:url("fonts/mono.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"Timin Mono";src:url("fonts/Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --font-main:"Timin Sans",Arial,sans-serif;
  --font-mono:"Timin Mono","Courier New",monospace;
  --black:#000;
  --grey:#a8a8a8;
  --green:#00ff00;
  --edge:16px;
  --split:42.7vw;
  --content-top:82px;
  --main-size:28px;
  --mono-size:14px;
  --caption-size:14px;
  --main-line:.9;
  --project-line:.98;
}

*{box-sizing:border-box}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

html{background:#fff}

body{
  overflow:hidden;
  font-family:var(--font-main);
  color:var(--black);
  background:#fff;
  letter-spacing:0;
}

body.lightbox-open{overflow:hidden}

button,
a{
  font:inherit;
  color:inherit;
}

button{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  margin:0;
  text-align:left;
  cursor:pointer;
}

button:focus,
a:focus{
  outline:none;
}

button:focus-visible,
a:focus-visible{
  outline:none;
}

body.is-keyboard button:focus-visible,
body.is-keyboard a:focus-visible{
  outline:1px solid currentColor;
  outline-offset:2px;
}

a{text-decoration:none}

.intro-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  opacity:1;
  pointer-events:auto;
  transition:opacity 1800ms ease;
}

.intro-overlay.is-logo-hidden .intro-overlay-logo{
  opacity:0;
}

.intro-overlay.is-hidden{
  opacity:0;
  pointer-events:none;
}

.intro-overlay-logo{
  display:block;
  width:140px;
  height:auto;
  opacity:1;
  transition:opacity 1800ms ease;
}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:20;
  height:110px;
  pointer-events:none;
}

.nav-link,
.brand,
.language-switch{
  pointer-events:auto;
}

.nav-link,
.brand{
  position:absolute;
  top:8px;
  font-size:var(--main-size);
  line-height:var(--main-line);
  letter-spacing:0;
}

.brand-name{
letter-spacing: -1.5px;
  }

.nav-link,
.brand,
.brand-name,
.brand-claim {
  transition: color 180ms ease;
}

.nav-link:hover,
.brand:hover,
.brand:hover .brand-name,
.brand:hover .brand-claim {
  color: var(--grey);
}

.nav-link-left{
  left:var(--edge);
}

.mobile-project-title,
.mobile-about-title{
  display:none;
}

.brand{
  left:var(--split);
  white-space:nowrap;
}

.brand-dot{
  display:none;
}

.brand-name{
  color:var(--black);
}

.brand-claim{
  color:var(--grey);
}

.right-nav{
  position:absolute;
  top:8px;
  right:var(--edge);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  pointer-events:auto;
}

.nav-link-right{
  position:static;
  line-height:var(--project-line);
}

.language-switch{
  font-size:var(--main-size);
  line-height:var(--project-line);
  color:var(--grey);
}

.language-current{
  color:var(--grey);
  cursor:default;
  transition:color 180ms ease;
}

.language-other{
  color:var(--black);
  transition:color 180ms ease;
}

.language-other:hover,
.language-other:focus-visible{
  color:var(--grey);
}

body[data-view="projects"] .nav-link-left,
body[data-view="about"] .nav-link-left{
  color:var(--grey);
  cursor:default;
}


body[data-view="home"] .brand-name,
body[data-view="home"] .brand-claim{
  display:none;
}


body:not([data-view="home"]) .brand-name,
body:not([data-view="home"]) .brand-claim{
  display:inline;
}

.left-rail{
  position:fixed;
  z-index:10;
  top:0;
  left:0;
  width:var(--split);
  height:100dvh;
  padding:0 var(--edge) var(--edge) var(--edge);
  pointer-events:none;
}

.project-list,
.about-menu,
.mail-link{
  pointer-events:auto;
}

.project-list{
  position:absolute;
  top:var(--content-top);
  left:var(--edge);
  display:none;
  max-width:calc(var(--split) - var(--edge) * 2);
}

.project-link{
  display:block;
  font-size:var(--main-size);
  line-height:var(--project-line);
  letter-spacing:0;
  color:var(--black);
  white-space:normal;
  transition:color 180ms ease;
}

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

.about-menu{
  position:absolute;
  top:var(--content-top);
  left:var(--edge);
  display:none;
  max-width:calc(var(--split) - var(--edge) * 2);
}

.about-link{
  display:block;
  margin:0;
  font-size:var(--main-size);
  line-height:var(--project-line);
  font-weight:400;
  letter-spacing:0;
  color:var(--black);
  white-space:normal;
  transition:color 180ms ease;
}


.about-link-title,
.about-link-subtitle{
  display:block;
  transition:color 180ms ease;
}

.about-link-subtitle{
  color:var(--grey);
}

.about-link:hover .about-link-title,
.about-link.is-active .about-link-title{
  color:var(--green);
}


.mail-link{
  position:absolute;
  left:var(--edge);
  bottom:12px;
  font-family:var(--font-main);
  font-size:var(--main-size);
  line-height:1;
  letter-spacing:0;
}

.mail-link:hover{
  color: var(--green);
}

body[data-view="about"] .mail-link{
  display:none;
}

.content-area{
  position:fixed;
  top:0;
  right:var(--edge);
  bottom:0;
  left:var(--split);
}

.home-copy{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--edge);
  text-align:center;
}

.home-visual{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:min(32vw, 660px);
  height:min(54vh, 620px);
  transform:translate(-50%, -50%);
  opacity:0;
  transition:opacity 1800ms ease;
}

.home-visual.is-visible{
  opacity:.12;
  
}

.home-visual-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.home-copy h1{
  position:relative;
  z-index:2;
  margin:0;
  color:var(--grey);
  font-size:var(--main-size);
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  pointer-events:none;
  transition:color 180ms ease;
}

.home-visual:hover + h1,
.home-visual:focus-visible + h1{
  color:var(--green);
}

.project-stage{
  position:absolute;
  top:var(--content-top);
  right:0px;
  bottom:0;
  left:0;
  display:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:auto;
  scroll-snap-type:y proximity;
  scrollbar-width:none;
}

.project-stage::-webkit-scrollbar{
  display:none;
}

.project-panel{
  min-height:calc(100dvh - var(--content-top));
  padding:0 0 72px 0;
  scroll-margin-top:var(--content-top);
  scroll-snap-align:start;
}

.project-panel + .project-panel{
  padding-top:0;
}

.project-image{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 18px 0;
  cursor:zoom-in;
}

.project-panel .project-image + .project-image{
  margin-top:56px;
}

.caption{
  max-width:980px;
  font-family:var(--font-mono);
  font-size:var(--caption-size);
  line-height:1.25;
  color:var(--grey);
  letter-spacing:0;
}

.caption strong{
  color:var(--grey);
  font-weight:700;
}

.image-caption{
  margin:-8px 0 42px 0;
}

.project-caption{
  margin-top:0;
}

.inline-link{
  color:inherit;
  text-decoration:none;
}

.inline-link:hover{
  color:var(--green);
}

.about-stage{
  position:absolute;
  top:var(--content-top);
  right:0;
  bottom:0;
  left:0;
  display:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:auto;
  scroll-snap-type:y proximity;
  scrollbar-width:none;
}

.about-stage::-webkit-scrollbar{
  display:none;
}

.about-panel{
  min-height:calc(100dvh - var(--content-top));
  padding:0 0 72px 0;
  scroll-margin-top:var(--content-top);
  scroll-snap-align:start;
}

.about-text{
  max-width:1140px;
  padding-right:var(--edge);
}

.about-text h1,
.about-text h2{
margin:0 0 -14px 0;
  font-size:var(--main-size);
  line-height:var(--project-line);
  font-weight:400;
  letter-spacing:0;
  text-transform: uppercase;

}


.about-text p,
.about-text ul{
  margin:0 0 0px 0;
  font-size:var(--main-size);
  line-height:var(--project-line);
  font-weight:400;
  letter-spacing:0;
}

.about-text ul{
  padding-left:1.1em;
}

.about-text li{
  margin:0;
  padding:0;
}

[data-about-panel="imprint"] .about-text{
  font-family:var(--font-mono);
  font-size:var(--caption-size);
  line-height:1.25;
  color:var(--grey);
}

[data-about-panel="imprint"] .about-text h1,
[data-about-panel="imprint"] .about-text h2,
[data-about-panel="imprint"] .about-text p,
[data-about-panel="imprint"] .about-text ul{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}

.imprint-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:color 180ms ease;
}

.imprint-link:hover,
.imprint-link:focus-visible{
  color:var(--green);
}

body[data-view="projects"] .project-list,
body[data-view="about"] .about-menu{
  display:block;
}

body[data-view="projects"][data-project-open="true"] .project-stage{
  display:block;
}

body[data-view="about"][data-about-open="true"] .about-stage{
  display:block;
}

body[data-view="projects"] .home-copy,
body[data-view="about"] .home-copy{
  display:none;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
}

.lightbox.open{
  pointer-events:auto;
  background:#fff;
}

.lightbox-image{
  display:block;
  position:fixed;
  z-index:2;
  top:70px;
  left:70px;
  width:calc(100vw - 140px);
  height:calc(100dvh - 140px);
  object-fit:contain;
  opacity:0;
}

.lightbox.open .lightbox-image{
  opacity:1;
}

.lightbox-close,
.lightbox-arrow{
  position:fixed;
  z-index:3;
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  font-size:var(--main-size);
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity 200ms ease;
}

.lightbox.open .lightbox-close,
.lightbox.open .lightbox-arrow{
  opacity:1;
}

.lightbox-close{
  top:8px;
  right:var(--edge);
}

.lightbox-prev{
  left:var(--edge);
  top:50%;
  transform:translateY(-50%);
}

.lightbox-next{
  right:var(--edge);
  top:50%;
  transform:translateY(-50%);
}

@media (max-width:1280px){
  :root{
    --content-top:82px;
  }

  .brand-claim{
    display:none !important;
  }
}

@media (max-width:1500px){
  body[data-view="home"] .brand-claim{
    display:none;
  }
}

@media (max-width:820px){
  :root{
    --edge:14px;
    --split:100%;
    --content-top:82px;
    --main-size:21px;
    --mono-size:12px;
    --caption-size:12px;
  }

  html,
  body{
    height:auto;
    min-height:100%;
  }

  body{
    overflow:auto;
  }

  .site-header{
    position:sticky;
    top:0;
    height:96px;
    background:#fff;
  }

  body[data-view="projects"][data-project-open="true"] .site-header,
  body[data-view="about"][data-about-open="true"] .site-header{
    height:var(--content-top);
  }

  .mobile-project-title,
  .mobile-about-title{
    position:absolute;
    top:calc(8px + var(--main-size) * var(--project-line));
    left:var(--edge);
    right:var(--edge);
    display:none;
    color:var(--green);
    font-size:var(--main-size);
    line-height:var(--project-line);
    letter-spacing:0;
    pointer-events:none;
    overflow-wrap:normal;
  }

  .mobile-project-title::before,
  .mobile-about-title::before{
    content:"";
    float:right;
    width:var(--mobile-title-clear, 0px);
    height:calc(var(--main-size) * var(--project-line));
  }

  body[data-view="projects"][data-project-open="true"] .mobile-project-title{
    display:block;
  }

  body[data-view="about"][data-about-open="true"] .mobile-about-title{
    display:block;
  }

  body[data-view="projects"][data-project-open="true"] .project-list{
    display:none;
  }

  body[data-view="about"][data-about-open="true"] .about-menu{
    display:none;
  }

  .brand{
    left:50%;
    max-width:44vw;
    transform:translateX(-50%);
    text-align:center;
    white-space:normal;
  }

  .brand-name,
  .brand-claim{
    display:none !important;
  }

  body:not([data-view="home"]) .brand-dot{
    display:block;
    width:18px;
    height:18px;
    margin:2px auto 0;
    border-radius:50%;
    background:var(--green);
    transition:background 180ms ease;
  }

  body:not([data-view="home"]) .brand:hover .brand-dot,
  body:not([data-view="home"]) .brand:focus-visible .brand-dot{
    background:var(--grey);
  }

  .left-rail,
  .content-area{
    position:relative;
    inset:auto;
    width:100%;
    min-height:0;
    padding:0 var(--edge);
  }

  .left-rail{
    height:auto;
    padding-top:28px;
    padding-bottom:48px;
  }

  .project-list,
  .about-menu,
  .mail-link{
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
    max-width:none;
  }

  .mail-link{
    position:fixed;
    z-index:30;
    left:var(--edge);
    bottom:10px;
  }

.mail-link{
  display: none;
}

body[data-view="home"] .mail-link{
  display: block;
}

  body[data-view="projects"][data-project-open="true"] .left-rail,
  body[data-view="about"][data-about-open="true"] .left-rail{
    padding-top:0;
    padding-bottom:0;
  }

  .content-area{
    right:auto;
    left:auto;
    padding-bottom:64px;
  }

  .home-copy{
    min-height:calc(100dvh - 96px);
  }

  .home-visual{
    width:min(72vw, 380px);
    height:48vh;
  }

  .home-copy h1{
    font-size:var(--main-size);
  }

  .intro-overlay-logo{
    width:105px;
  }

  .project-stage,
  .about-stage{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    overflow:visible;
    scroll-snap-type:none;
  }

  body[data-view="projects"][data-project-open="true"] .project-stage{
    display:block;
    margin-top:0;
  }

  body[data-view="about"][data-about-open="true"] .about-stage{
    display:block;
    margin-top:0;
  }

  .project-panel,
  .about-panel{
    min-height:0;
    padding-bottom:52px;
  }

  .about-text{
    max-width:none;
    padding-right:0;
  }
}