@font-face {
  font-family: "Haas";
  src:
    url("../assets/fonts/neue_haas.woff2") format("woff2"),
    url("../assets/fonts/neue_haas.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-height: 100vh;
  --stable-vh: 100vh;
  --bg: #fdfdfd;
  --text: #f00;
  --muted: rgba(255, 0, 0, 0.58);
  --rule-border-width: 0.1rem;
  --rule-border: var(--rule-border-width) solid currentColor;
  --ui-font-size: 11.5px;
  --overlay-blur: 10px;
  --header-offset: 7px;
  --ui-hit-padding: var(--header-offset);
  --ui-width: 350px;
  --ui-column-width: calc(var(--ui-width) - 14px);
  --nav-thumb-height: 6.0869565217em; /* 70px / 11.5px */
  --hover-thumb-height: var(--nav-thumb-height);
  --mobile-thumb-width: 4.347826087em; /* 50px / 11.5px */
  --widest-nav-thumb-width: 0px;
  --tallest-nav-thumb-height: 0px;
}

@supports (height: 100dvh) {
  :root { --page-height: 100dvh; }
}

@supports (height: 100svh) {
  :root { --stable-vh: 100svh; }
}

* { box-sizing: border-box; }

::selection {
  background: transparent;
  color: var(--text);
}

::-moz-selection {
  background: transparent;
  color: var(--text);
}


html,
body {
  width: 100%;
  height: var(--page-height);
  min-height: var(--page-height);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Haas", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px;
}

button,
a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}


img,
video {
  color: transparent;
}

.app img.is-media-broken,
.app video.is-media-broken {
  opacity: 0;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:active,
button:focus,
a:active,
a:focus {
  background: transparent;
}


html.is-resizing *,
html.is-resizing *::before,
html.is-resizing *::after {
  transition: none !important;
  animation: none !important;
}

@media (max-width: 700px) {
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

.seo-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.app {
  position: relative;
  width: 100vw;
  height: var(--page-height);
  min-height: var(--page-height);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  opacity: 1;
  transition: none;
  --about-shift: 0px;
}


/* Page intro/outro visibility is opt-in: content is hidden until body.is-page-visible is added.
   Opacity transitions are disabled by default so a stale/reloaded page can be forced
   back to its hidden initial state without Safari animating that correction. */
.app .gallery-stream-stage,
.app .archive-stage,
.app .archive-viewer,
.app .about-page-stage,
.app .imprint-page-main {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

body.is-opacity-transitions-enabled .app .gallery-stream-stage,
body.is-opacity-transitions-enabled .app .archive-stage,
body.is-opacity-transitions-enabled .app .archive-viewer,
body.is-opacity-transitions-enabled .app .about-page-stage,
body.is-opacity-transitions-enabled .app .imprint-page-main {
  transition: opacity 1.28s cubic-bezier(0.365, 0.220, 0.000, 0.995);
}

body.is-page-visible .app .gallery-stream-stage,
body.is-page-visible .app .archive-stage,
body.is-page-visible .app .archive-viewer,
body.is-page-visible .app .about-page-stage,
body.is-page-visible .app .imprint-page-main {
  opacity: 1;
}

body.is-page-interactive .app .gallery-stream-stage,
body.is-page-interactive .app .archive-stage,
body.is-page-interactive .app .about-page-stage,
body.is-page-interactive .app .imprint-page-main {
  pointer-events: auto;
}

body.is-page-exiting .app .gallery-stream-stage,
body.is-page-exiting .app .archive-stage,
body.is-page-exiting .app .archive-viewer,
body.is-page-exiting .app .about-page-stage,
body.is-page-exiting .app .imprint-page-main,
body:not(.is-page-visible) .app .gallery-stream-stage,
body:not(.is-page-visible) .app .archive-stage,
body:not(.is-page-visible) .app .archive-viewer,
body:not(.is-page-visible) .app .about-page-stage,
body:not(.is-page-visible) .app .imprint-page-main {
  opacity: 0;
  pointer-events: none;
}

body:not(.is-page-interactive) .app .gallery-stream-stage,
body:not(.is-page-interactive) .app .archive-stage,
body:not(.is-page-interactive) .app .archive-viewer,
body:not(.is-page-interactive) .app .about-page-stage,
body:not(.is-page-interactive) .app .imprint-page-main {
  pointer-events: none;
}

body.is-navigation-outro .app,
body.is-navigation-outro .app *,
body.is-page-exiting .app,
body.is-page-exiting .app * {
  pointer-events: none !important;
}

body:not(.is-page-interactive) .app *,
body.is-navigation-outro .app *,
body.is-page-exiting .app * {
  cursor: default !important;
}



body.is-navigation-outro *,
body.is-page-exiting *,
body:not(.is-page-interactive) * {
  cursor: default !important;
}