#mmfs,
#mmfs * {
  box-sizing: border-box;
}

#mmfs {
  --gutter: 2rem;
  --mmfs-intro-bottom: clamp(1.25rem, 5vh, 3rem);
  --mmfs-bg-start: #050505;
  --mmfs-bg-mid: #111111;
  --mmfs-bg-end: #1D0D2F;
  --mmfs-bg-start-dark: #050505;
  --mmfs-bg-mid-dark: #111111;
  --mmfs-bg-end-dark: #1D0D2F;
  margin: 0;
  background: linear-gradient(180deg, var(--mmfs-bg-start) 0%, var(--mmfs-bg-mid) 48%, var(--mmfs-bg-end) 100%);
  color: #fff;
}

#mmfs .mmfs__wrap {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--mmfs-bg-end) 38%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, var(--mmfs-bg-start) 0%, var(--mmfs-bg-mid) 48%, var(--mmfs-bg-end) 100%);
  overflow: clip;
}

html[data-theme="dark"] #mmfs {
  background: linear-gradient(180deg, var(--mmfs-bg-start-dark) 0%, var(--mmfs-bg-mid-dark) 48%, var(--mmfs-bg-end-dark) 100%);
}

html[data-theme="dark"] #mmfs .mmfs__wrap {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--mmfs-bg-end-dark) 38%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, var(--mmfs-bg-start-dark) 0%, var(--mmfs-bg-mid-dark) 48%, var(--mmfs-bg-end-dark) 100%);
}

#mmfs .mmfs__scrollstage--gallery {
  min-height: 240vh;
}

#mmfs .content {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100vw;
  display: flex;
  place-items: center;
  align-content: center;
  position: sticky;
  top: 0;
  overflow: hidden;
}

#mmfs .grid {
  --offset: 0;
  --container-width: 1600px;
  --gap: clamp(8px, 3.8vw, 42px);
  width: var(--container-width);
  max-width: calc(100% - (2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--gap);
  margin: 0 auto;
  align-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

#mmfs .grid > .layer {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

#mmfs .grid > .layer:nth-of-type(1) div:nth-of-type(odd) {
  grid-column: 1;
}

#mmfs .grid > .layer:nth-of-type(1) div:nth-of-type(even) {
  grid-column: -2;
}

#mmfs .grid > .layer:nth-of-type(2) div:nth-of-type(odd) {
  grid-column: calc(2 + var(--offset));
}

#mmfs .grid > .layer:nth-of-type(2) div:nth-of-type(even) {
  grid-column: calc(-3 - var(--offset));
}

#mmfs .grid > .layer:nth-of-type(3) div:first-of-type {
  grid-column: calc(3 + var(--offset));
  grid-row: 1;
}

#mmfs .grid > .layer:nth-of-type(3) div:last-of-type {
  grid-column: calc(3 + var(--offset));
  grid-row: -1;
}

#mmfs .grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1rem;
}

#mmfs .grid .scaler {
  position: relative;
  grid-area: 2 / calc(3 + var(--offset));
}

#mmfs .scaler {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: relative;
  isolation: isolate;
}

#mmfs .scaler > picture {
  position: absolute;
  inset: 0;
}

#mmfs .mmfs__hero-background {
  z-index: 1;
  transform: translateZ(0);
}

#mmfs .mmfs__hero-foreground {
  z-index: 3 !important;
  transform: translateZ(2px);
  -webkit-transform: translateZ(2px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  will-change: width, height;
}

#mmfs .scaler img,
#mmfs .scaler > svg.mmfs__hero-foreground {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  object-fit: cover;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

#mmfs .mmfs__hero-title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(94vw, 94rem);
  transform: translate3d(-50%, -100%, 1px);
  color: #efd2ac;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.9rem, 5.8vw, 7.2rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.055em;
  text-align: center;
  text-transform: none;
  text-wrap: nowrap;
  pointer-events: none;
  filter: drop-shadow(0 .08em .25em rgba(0, 0, 0, .08));
}

#mmfs .mmfs__hero-title-line {
  display: block;
  opacity: 0;
  will-change: transform, opacity, filter, letter-spacing;
}

#mmfs .mmfs__hero-title-scale {
  width: 100%;
}

#mmfs .mmfs__hero-title-line--photography {
  margin-top: 0;
  font-size: 1.12em;
}

#mmfs .mmfs__hero-title-line--name {
  font-size: 1.4em;
}

#mmfs .mmfs__intro {
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: var(--mmfs-intro-bottom);
  left: clamp(1rem, 5vw, 5.5rem);
  right: clamp(1rem, 5vw, 5.5rem);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  padding: 0;
  color: #fff;
  text-align: left;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  text-shadow: none;
}

#mmfs .mmfs__intro-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: min(42vh, 360px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .42) 54%, rgba(0, 0, 0, .72) 100%);
  opacity: 1;
  pointer-events: none;
}

#mmfs .mmfs__intro-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: clamp(.92rem, 1.1vw, 1.08rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
}

#mmfs .mmfs__intro-title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(.78rem, .95vw, .95rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#mmfs .mmfs__intro-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  line-height: inherit;
  text-decoration: none;
  border-bottom: .09em solid currentColor;
  pointer-events: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .18s ease;
}

#mmfs .mmfs__intro-link i {
  font-size: 1.15em;
  line-height: 1;
}

#mmfs .mmfs__intro-link:focus-visible {
  opacity: .78;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  #mmfs .mmfs__intro-link:hover {
    opacity: .78;
    text-decoration: none;
  }
}

@media (max-width: 600px) {
  #mmfs {
    --gutter: 1rem;
    --mmfs-intro-bottom: 1rem;
  }

  #mmfs .grid {
    grid-template-columns: repeat(3, 1fr);
    --offset: -1;
  }

  #mmfs .grid img {
    aspect-ratio: 4 / 10;
  }

  #mmfs .grid > .layer:nth-of-type(1) {
    display: none;
  }

  #mmfs .mmfs__intro {
    left: .85rem;
    right: .85rem;
    width: auto;
    gap: .55rem;
  }

  #mmfs .mmfs__intro-copy {
    max-width: none;
    font-size: 1rem;
    line-height: 1.35;
    max-height: calc(1.35em * 6);
    overflow: hidden;
  }

  #mmfs .mmfs__intro-link {
    padding: 0;
  }

  #mmfs .mmfs__hero-title {
    top: 50%;
    width: 96vw;
    font-size: clamp(1.9rem, 9.6vw, 3.1rem);
    line-height: .84;
    letter-spacing: -.045em;
  }

  #mmfs .mmfs__hero-title-line--photography {
    font-size: 1.18em;
  }

  #mmfs .mmfs__hero-title-line--name {
    font-size: 2em;
  }

}

@supports (-webkit-touch-callout: none) and (height: 100lvh) and (translate: 0 1px) and (animation-timeline: view()) and (animation-range: contain 0% contain 1px) {
  @media (max-width: 980px) {
    #mmfs {
      --mmfs-scroll-distance: 140lvh;
      --mmfs-toolbar-offset: max(0px, calc(100lvh - 100dvh));
    }

    #mmfs .mmfs__scrollstage--gallery {
      min-height: 240lvh;
      view-timeline: --mmfs-scroll block;
      view-timeline-inset: 0;
    }

    #mmfs .content {
      /* Match the map: Safari must not sample a sticky layer as a solid bar. */
      position: relative;
      height: 100lvh;
      min-height: 100lvh;
      background: transparent;
      animation-name: mmfs-scroll-follow;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --mmfs-scroll;
      animation-range: contain 0% contain var(--mmfs-scroll-distance);
      will-change: translate;
    }

    #mmfs .grid {
      isolation: isolate;
    }

    #mmfs .grid > .layer {
      position: relative;
      z-index: 0;
    }

    #mmfs .scaler {
      /* Give the foreground photo its own composited layer in iOS WebKit. */
      transform: translateZ(0);
    }

    #mmfs .mmfs__intro {
      bottom: calc(var(--mmfs-intro-bottom) + var(--mmfs-toolbar-offset) + env(safe-area-inset-bottom, 0px));
    }

    @keyframes mmfs-scroll-follow {
      from { translate: 0 0; }
      to { translate: 0 var(--mmfs-scroll-distance); }
    }
  }
}

/* Only the entrance from the intro photo into the scroll showcase.
   The existing clip wrapper rounds the sheet; its transparent parent
   lets the real intro photo show through both corners. */
.home-page:has(#mmfs-content) {
  --mmfs-entrance-radius: 3rem;
}

.home-page:has(#mmfs-content) #top {
  z-index: 0;
}

.home-page #mmfs-content {
  position: relative;
  margin-top: calc(-1 * var(--mmfs-entrance-radius));
}

html .home-page #mmfs {
  background: transparent;
}

.home-page #mmfs .mmfs__wrap {
  border-radius: var(--mmfs-entrance-radius) var(--mmfs-entrance-radius) 0 0;
}

.home-page:has(#mmfs-content) #top .mm-home-intro-controls {
  bottom: calc(1.75rem + var(--mmfs-entrance-radius) + env(safe-area-inset-bottom, 0px) + var(--mm-home-toolbar-offset, 0px));
}

@media (max-width: 700px) {
  .home-page:has(#mmfs-content) {
    --mmfs-entrance-radius: 2rem;
  }
}

/* Keep the longer translated tagline within narrow mobile viewports. */
@media (max-width: 600px) {
  html:lang(en) #mmfs .mmfs__hero-title-line--photography {
    font-size: min(1.18em, 12.5vw);
  }

  html:lang(de) #mmfs .mmfs__hero-title-line--photography {
    font-size: min(1.18em, 11.4vw);
  }
}