@view-transition {
  navigation: auto;
}

@keyframes page-out {
  to { opacity: 0; }
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes project-slide-out {
  to { opacity: 0; transform: translateX(-10px); }
}

@keyframes project-slide-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

::view-transition-old(root) {
  animation: 160ms ease both page-out;
}

::view-transition-new(root) {
  animation: 240ms cubic-bezier(.22, 1, .36, 1) both page-in;
}

html[data-page-transition="project-slide"]::view-transition-old(root) {
  animation: 180ms ease both project-slide-out;
}

html[data-page-transition="project-slide"]::view-transition-new(root) {
  animation: 260ms cubic-bezier(.22, 1, .36, 1) both project-slide-in;
}

::view-transition-group(selected-project-image) {
  z-index: 1000;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-image-pair(selected-project-image) {
  isolation: auto;
}

::view-transition-old(selected-project-image),
::view-transition-new(selected-project-image) {
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 420ms;
}

:root {
  --light-x: 0px;
  --light-y: 0px;
}

body {
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -28px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M26 21v10M21 26h10' fill='none' stroke='%23111111' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='624' height='624' viewBox='0 0 624 624'%3E%3Cpath d='M312 306v12M306 312h12' fill='none' stroke='%23d51f2a' stroke-opacity='.15' stroke-width='1'/%3E%3C/svg%3E");
  background-position: 0 0, 78px 52px;
  background-size: 52px 52px, 624px 624px;
  transform: translate3d(var(--light-x), var(--light-y), 0) scale(1.035);
  transform-origin: 50% 50%;
  will-change: transform;
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 0 !important;
  view-transition-name: site-header;
}

.header { border-bottom: 0 !important; }

@media (min-width: 981px) {
  .work-nav,
  .site-nav {
    gap: 36px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .work-nav,
  .site-nav {
    gap: 24px;
  }
}

.header-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  border: 0;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease;
}

.language-toggle:hover { color: var(--ink); }

.language-toggle__de,
.language-toggle__en {
  opacity: .42;
  transition: opacity 160ms ease, color 160ms ease;
}

.language-toggle__separator {
  margin-inline: 3px;
  color: var(--line);
}

.language-toggle[data-current-lang="de"] .language-toggle__de,
.language-toggle[data-current-lang="en"] .language-toggle__en {
  color: var(--ink);
  font-weight: 600;
  opacity: 1;
}

.work-nav a:focus-visible,
.site-nav :is(a, .language-toggle):focus-visible,
.header nav.main :is(a, .language-toggle):focus-visible {
  border-radius: 1px;
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
}

.header nav.main {
  gap: clamp(24px, 3.2vw, 42px) !important;
}

.translation-note {
  margin: -18px 0 34px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-style: italic;
}

html[lang="en"] .project-copy h1 {
  max-width: 18ch;
  font-size: clamp(40px, 4.15vw, 62px);
  line-height: .98;
  letter-spacing: -.05em;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

::view-transition-group(site-header) {
  z-index: 1100;
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
  mix-blend-mode: normal;
}

.is-shared-transition {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
}

.motion-ready .skip-reveal,
.motion-ready .skip-page-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.cover {
  position: relative;
  overflow: clip;
}

.cover-copy {
  display: contents;
}

.cover h1,
.cover-lead {
  position: relative;
  z-index: 1;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 540ms cubic-bezier(.22, 1, .36, 1),
    transform 540ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.motion-fallback-leave {
  pointer-events: none;
}

html.motion-fallback-leave body > main {
  animation: 145ms ease both page-out;
}

html.motion-fallback-leave--project-slide body > main {
  animation: 145ms ease both project-slide-out;
}

html.motion-fallback-enter body > main {
  animation: 220ms cubic-bezier(.22, 1, .36, 1) both page-in;
}

html.motion-fallback-enter--project-slide body > main {
  animation: 240ms cubic-bezier(.22, 1, .36, 1) both project-slide-in;
}

.motion-media {
  --motion-scale: 1;
  --parallax-y: 0px;
  translate: 0 var(--parallax-y);
  scale: var(--motion-scale);
  transform-origin: 50% 50%;
  transition: scale 520ms cubic-bezier(.22, 1, .36, 1);
}

.motion-parallax {
  --motion-scale: 1.025;
  will-change: translate;
}

.motion-ready .portrait {
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .story-link:is(:hover, :focus-visible) .motion-media {
    --motion-scale: 1.018;
  }

  .photo:hover .motion-media {
    --motion-scale: 1.012;
  }

  .photo:hover .motion-parallax {
    --motion-scale: 1.038;
  }
}

.site-header,
.site-header__inner,
.brand,
.brand-meta {
  transition:
    height 220ms cubic-bezier(.22, 1, .36, 1),
    font-size 220ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

@media (min-width: 981px) {
  .motion-ready body.motion-header-compact .site-header {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .035);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .motion-ready body.motion-header-compact .site-header__inner {
    height: 68px;
  }

  .motion-ready body.motion-header-compact .brand {
    font-size: 18px;
  }

  .motion-ready body.motion-header-compact .brand-meta {
    opacity: .68;
  }
}

@media (max-width: 760px) {
  html[lang="en"] .project-copy h1 {
    max-width: 14ch;
    font-size: clamp(38px, 10.8vw, 46px);
    line-height: 1.02;
  }

  .site-nav { gap: 14px; }

  .header-tools {
    height: 32px;
    gap: 8px;
  }

  .header-tools > :is(a, .language-toggle) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .language-toggle { font-size: 9px; }

  .header .row { gap: 14px !important; }
  .header nav.main {
    gap: 12px !important;
    font-size: 10px !important;
  }

  body::before {
    opacity: .72;
    transform: scale(1.02);
    will-change: auto;
  }

  .motion-ready .motion-reveal {
    transform: translate3d(0, 10px, 0);
    transition-duration: 480ms;
  }

  .motion-ready .motion-reveal.is-visible {
    transform: translate3d(0, 0, 0);
  }

  .motion-parallax {
    --motion-scale: 1;
    --parallax-y: 0px !important;
    will-change: auto;
  }
}

@media (max-width: 380px) {
  .site-nav { gap: 10px; }
  .header-tools { gap: 6px; }
  .language-toggle__separator { margin-inline: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html { scroll-behavior: auto !important; }

  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-media,
  .motion-parallax {
    --motion-scale: 1 !important;
    --parallax-y: 0px !important;
    translate: none !important;
    scale: 1 !important;
    transition: none !important;
  }

  body::before {
    transform: scale(1.02) !important;
    will-change: auto;
  }

  .site-header,
  .site-header__inner,
  .brand,
  .brand-meta {
    transition: none !important;
  }

  .is-shared-transition {
    view-transition-name: none !important;
  }

  .motion-fallback-leave body > main,
  .motion-fallback-enter body > main {
    animation: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

@media print {
  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}