@font-face{
  font-family:"Soehne";
  src:url("../../fonts/soehne-buch.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Immortel";
  src:url("../../fonts/Immortel - Infra G1 Roman-205TF.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --site-font-family:"Soehne", Arial, sans-serif;
  --pad:1.25rem;
  --gap:1.25rem;
  --menu-top:1.25rem;
  --menu-font-size:1.75rem;
  --menu-meta-size:1.75rem;
  --menu-meta-gap:1rem;
  --menu-word-gap:.2em;
  --menu-edge-extra:.6rem;
  --light-tone:#ececea;
  --dark-tone:#121215;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  font-size:16px;
}

body{
  margin:0;
  font-family:var(--site-font-family);
  font-size:.92rem;
  line-height:1;
  letter-spacing:.06em;
  background:var(--page-bg, var(--light-tone));
  color:var(--page-fg, var(--dark-tone));
  cursor:default;
}

.page-transition{
  --transition-color:var(--dark-tone);
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  background:var(--transition-color);
  transform:translate3d(0, 100%, 0);
  transition:transform .62s cubic-bezier(.7, .02, .08, 1);
  will-change:transform;
}

.page-transition.is-active{
  transform:translate3d(0, 0, 0);
}

.page-transition.is-resetting{
  transition:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.36;
  background-size:420px 420px;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='1'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(1,end) infinite;
}

@keyframes grain{
  0%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='1'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  12.5%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  25%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  37.5%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  50%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='5'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  62.5%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='6'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  75%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='7'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
  87.5%{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='8'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='.34' intercept='.33'/><feFuncG type='linear' slope='.34' intercept='.33'/><feFuncB type='linear' slope='.34' intercept='.33'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
}


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

::selection{
  background:var(--page-fg, var(--dark-tone));
  color:var(--page-bg, var(--light-tone));
}

::-moz-selection{
  background:var(--page-fg, var(--dark-tone));
  color:var(--page-bg, var(--light-tone));
}

/* NAV / HERO WORD — info (left) / logo (center) / fr (right) */

.hero-word{
  position:fixed;
  left:0;
  right:0;
  top:var(--menu-top);
  color:#fff;
  mix-blend-mode:difference;
  z-index:45;
  font-size:calc((100vw - (var(--pad) * 2)) / 5.5);
  line-height:.88;
  letter-spacing:0.02rem;
  text-transform:lowercase;
  white-space:nowrap;
  pointer-events:none;
}

.hero-word *{
  user-select:none;
  -webkit-user-select:none;
}

.hero-word.state-menu{
  font-size:var(--menu-font-size);
}

.group-main{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-start;
  gap:var(--menu-word-gap);
  padding-bottom:0.12em;
  cursor:pointer;
  white-space:nowrap;
}

.group-main::after{
  content:"";
  position:absolute;
  left:0;
  right:0.1em;
  bottom:-0.08em;
  height:2px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
  transform:translateX(0.05em);
}

.group-main:hover::after{
  opacity:1;
}

.menu-info{
  position:absolute;
  left:calc(var(--pad) + var(--menu-edge-extra));
  top:0;
}

.menu-fr{
  position:absolute;
  right:calc(var(--pad) + var(--menu-edge-extra));
  top:0;
}

.menu-side{
  position:absolute;
  padding-bottom:0.12em;
  font-size:var(--menu-meta-size);
  opacity:0;
  transition:opacity .55s ease;
}

.hero-word.menu-ready{
  pointer-events:auto;
}

.hero-word.menu-ready .menu-side{
  opacity:1;
}

.menu-side::after{
  content:"";
  position:absolute;
  left:0;
  right:0.04em;
  bottom:-0.08em;
  height:2px;
  background:currentColor;
  opacity:0;
  transition:opacity .1s ease;
}

.menu-side:hover::after{
  opacity:1;
}

.mask{
  display:inline-block;
  overflow:hidden;
}

.word{
  display:inline-block;
}

/* NAV RESPONSIVE — shared by index.html and all project pages */

@media (max-width:1100px){
  :root{
    --pad:1rem;
    --gap:1.125rem;
    --menu-font-size:1.5rem;
    --menu-meta-size:1.5rem;
    --menu-meta-gap:.85rem;
    --menu-edge-extra:.5rem;
  }
}

@media (max-width:900px){
  :root{
    --pad:1rem;
    --gap:1.125rem;
    --menu-font-size:1.5rem;
    --menu-meta-size:1.5rem;
    --menu-meta-gap:.75rem;
  }

  .hero-word{
    top:1.1rem;
    font-size:var(--menu-font-size);
  }
}

@media (max-width:640px){
  :root{
    --pad:.95rem;
    --gap:1rem;
    --menu-font-size:1.45rem;
    --menu-meta-size:1.45rem;
    --menu-meta-gap:.6rem;
    --menu-edge-extra:.25rem;
  }

  .hero-word{
    top:1rem;
    font-size:var(--menu-font-size);
    line-height:.88;
    letter-spacing:0.01rem;
  }

  .menu-side{
    font-size:var(--menu-meta-size);
    line-height:1;
    letter-spacing:0.01rem;
  }

  .group-main::after,
  .menu-side::after{
    display:none !important;
  }
}

@media (max-width:430px){
  :root{
    --pad:.8rem;
    --menu-font-size:1.45rem;
    --menu-meta-size:1.45rem;
    --menu-meta-gap:.7rem;
  }

  .hero-word{
    top:.85rem;
    font-size:var(--menu-font-size);
    line-height:.88;
  }

  .menu-side{
    font-size:var(--menu-meta-size);
    line-height:1;
  }
}

@media (max-width:900px), (pointer:coarse){
  body::after{
    animation-duration:1.333s;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .page-transition{
    transition:none;
  }

  body::after{
    animation:none;
  }
}


.media-picture{
  display:contents;
}