:root {
  --bg: #f7f6f2;
  --text: #191918;
  --muted: rgba(25,25,24,.36);
  --axis-left: 5.65vw;
  --axis-right: 5.65vw;
  --axis-top: 9.15vh;
  --axis-bottom: 6.9vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body.is-leaving { opacity: 0; transition: opacity 220ms ease; }

/* GLOBAL NAV FINAL v0.2
   Bottom-right discovery navigation.
   Desktop now uses the same geometry as the mobile navigation. */
.menu-toggle {
  position: fixed;
  top: auto;
  bottom: calc(var(--axis-bottom) + 4px);
  right: calc(var(--axis-right) + 1.15rem);
  z-index: 50;
  width: 22px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  overflow: visible;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 0;
  background: var(--text);
  transition:
    transform 360ms ease,
    width 320ms ease,
    filter .55s ease;
}

.site-menu {
  position: fixed;
  top: auto;
  bottom: calc(var(--axis-bottom) + 2.55rem);
  right: calc(var(--axis-right) + 1.15rem);
  z-index: 49;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .20rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity .35s ease,
    transform .32s ease,
    filter .55s ease;
  text-align: right;
  filter: blur(6px);
}

.site-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  filter: blur(0);
}

.site-menu a {
  color: var(--text);
  text-decoration: none;
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: 0.012em;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 300ms ease;
}

.site-menu a:nth-child(2) {
  transition-delay: 40ms;
}

.site-menu a:nth-child(3) {
  transition-delay: 80ms;
}

.site-menu.is-open a {
  opacity: 1;
  transform: translateY(0);
}

.menu-toggle:has(+ .site-menu.is-open) span:first-child {
  transform: translateY(-138px);
}

.menu-toggle:has(+ .site-menu.is-open) span:last-child {
  transform: translateY(0);
}


/* HOME */

.home-scroll { min-height: 230vh; }

.home-stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  overflow: hidden;
  background: #f7f6f2;
}

.home-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  transform: scaleX(-1) scale(1.08);
  filter: blur(26px) grayscale(1) brightness(1.25) contrast(.70);
  z-index: 0;
}

.intro,
.home-name,
.page-kicker,
.page-name {
  position: absolute;
  left: var(--axis-left);
  margin: 0;
}

.intro {
  top: var(--axis-top);
  font-size: clamp(22px, 2.65vw, 45px);
  line-height: 1.12;
  letter-spacing: .004em;
  z-index: 2;
}

.focus-words {
  position: absolute;
  left: var(--axis-left);
  top: 52.8vh;
  transform: translateY(-50%);
  z-index: 2;
}

.focus-words p {
  margin: 0;
  font-size: clamp(54px, 9.2vw, 138px);
  line-height: 0.99;
  letter-spacing: 0.003em;
  opacity: .06;
  filter: blur(18px);
  transform: translateY(18px);
}

.home-name {
  bottom: calc(var(--axis-bottom) - 0.4vh);
  font-size: clamp(22px, 2.65vw, 45px);
  line-height: 1.12;
  letter-spacing: .004em;
  font-weight: 300;
  opacity: 0;
  filter: blur(16px);
  z-index: 2;
}

/* SUBPAGE ROOM ATMOSPHERE v1.0
   Vita and Kontakt share the same visual language as Home:
   a soft, scroll-reactive glimpse of the room behind the text.
   Purely additive — no existing subpage rule is touched. */
.room-stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.room-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  transform: scale(1.05);
  filter: blur(30px) grayscale(1) brightness(1.22) contrast(.74);
}

/* SUBPAGES */

.sub-page {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}


.page-kicker {
  top: var(--axis-top);

  font-size: clamp(19px, 1.45vw, 26px);
  line-height: 1.12;
  letter-spacing: .006em;
  color: var(--muted);
}

.page-name {
  top: calc(var(--axis-top) + 1.05em);
  font-size: clamp(22px, 2.65vw, 45px);
  line-height: 1.12;
  letter-spacing: .004em;
  font-weight: 300;
}

.vita-main {
  margin: 0;

  max-width: 650px;
  font-size: clamp(42px, 5.35vw, 84px);
  line-height: 1.00;
  letter-spacing: 0.005em;
}

.vita-facts {
  max-width: 430px;
  display: grid;
  gap: 3.1vh;
  padding-bottom: .65vh;
}

.vita-facts div { margin: 0; }

.vita-facts span {
  display: block;
  margin-bottom: .42rem;
  color: var(--muted);
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.2;
  letter-spacing: .006em;
}

.vita-facts p {
  margin: 0;
  color: rgba(25,25,24,.52);
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 1.42;
  letter-spacing: .001em;
}

@media (max-width: 820px) {

  :root {
    --axis-left: 6vw;
    --axis-right: 6vw;
    --axis-top: 8vh;
    --axis-bottom: 7vh;
  }

  .vita-main {
    font-size: clamp(40px, 11vw, 72px);
  }
}


/* v1.5 — contact reference alignment fix */

.contact-room {
  position: relative;
  min-height: 100vh;
  display: block;
  padding: var(--axis-top) var(--axis-right) var(--axis-bottom) var(--axis-left);
}

.contact-room .page-kicker {
  position: absolute;
  top: var(--axis-top);
  left: var(--axis-left);
  margin: 0;
}

/* v1.8 — Adobe Fonts / Neue Haas Grotesk */

.intro,
.home-name,
.focus-words p,
.vita-main {
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.page-kicker,
.page-name,
.site-menu a,
.vita-facts {
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* v1.9 — display light weight refinement */

.intro,
.home-name,
.focus-words p,
.vita-main {
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}

.page-name {
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}

.page-kicker,
.site-menu a,
.vita-facts {
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* v2.0 — ultra thin display test */

.focus-words p,
.vita-main {
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 100;
}

.intro,
.home-name,
.page-name {
  font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}

/* v2.2 — home text axis shifted into calmer room area */


.home-page .intro,
.home-page .focus-words,
.home-page .home-name {
  left: 11vw;
}


/* HOME MOBILE FINAL v1.0 */
@media (max-width: 480px) and (orientation: portrait) {
  .home-page .home-image {
    object-position: 42% center;
  }

  .home-page .menu-toggle {
    top: auto;
    bottom: calc(var(--axis-bottom) + 4px);
    right: calc(var(--axis-right) + 1.15rem);
    left: auto;
    transform: none;
    width: 22px;
    height: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    overflow: visible;
    transition:
      opacity .35s ease,
      transform .32s ease,
      filter .55s ease;
  }

  .home-page.nav-visible .menu-toggle {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
  }

  .home-page .menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    margin: 0;
    background: currentColor;
  }

  .home-page .menu-toggle span:first-child,
  .home-page .menu-toggle span:last-child {
    transform: translateY(0);
    transition:
      transform 360ms ease,
      width 320ms ease,
      filter .55s ease;
  }

  .home-page .site-menu {
    top: auto;
    bottom: calc(var(--axis-bottom) + 1.62rem);
    right: calc(var(--axis-right) + 1.15rem);
    left: auto;
    transform: translateY(12px);
    align-items: flex-end;
    text-align: right;
    gap: .20rem;
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    transition:
      opacity .35s ease,
      transform .32s ease,
      filter .55s ease;
  }

  .home-page.nav-visible .site-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    filter: blur(0);
  }

  .home-page .site-menu a {
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
    font-size: 18px;
    line-height: 1.14;
    letter-spacing: 0.015em;
    color: #111 !important;
    text-align: right;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 260ms ease,
      transform 300ms ease;
    transition-delay: 160ms;
  }

  .home-page .site-menu a:nth-child(2) {
    transition-delay: 200ms;
  }

  .home-page .site-menu a:nth-child(3) {
    transition-delay: 240ms;
  }

  .home-page .site-menu.is-open a {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 360px) and (max-width: 480px) and (orientation: portrait) {
  .home-page .intro,
  .home-page .home-name {
    font-size: 26px;
  }

  .home-page .focus-words p {
    font-size: 70px;
    line-height: 1.14;
  }

  .home-page .site-menu {
    bottom: calc(var(--axis-bottom) + 2.25rem);
  }

  .home-page .site-menu a {
    font-size: 22px;
  }

  .home-page .menu-toggle:has(+ .site-menu.is-open) span:first-child {
    transform: translateY(-110px);
  }
}

@media (min-width: 421px) and (max-width: 480px) and (orientation: portrait) {
  .home-page .intro,
  .home-page .home-name {
    font-size: 28px;
  }

  .home-page .focus-words p {
    font-size: 80px;
    line-height: 1.18;
  }

  .home-page .site-menu {
    bottom: calc(var(--axis-bottom) + 2.55rem);
  }

  .home-page .site-menu a {
    font-size: 24px;
  }

  .home-page .menu-toggle:has(+ .site-menu.is-open) span:first-child {
    transform: translateY(-138px);
  }
}


/* SUBPAGE USES HOME MOBILE NAVIGATION v1.0
   Home navigation geometry copied for Vita/Kontakt.
   Home rules remain untouched. */
@media (max-width: 480px) and (orientation: portrait) {
  .sub-page .menu-toggle {
    top: auto;
    bottom: calc(var(--axis-bottom) + 4px);
    right: calc(var(--axis-right) + 1.15rem);
    left: auto;
    transform: none;
    width: 22px;
    height: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    overflow: visible;
  }

  .sub-page.nav-visible .menu-toggle {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
  }

  .sub-page .menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    margin: 0;
    background: currentColor;
    transition:
      transform 360ms ease,
      width 320ms ease,
      filter .55s ease;
  }

  .sub-page .site-menu {
    top: auto;
    bottom: calc(var(--axis-bottom) + 2.55rem);
    right: calc(var(--axis-right) + 1.15rem);
    left: auto;
    transform: translateY(12px);
    align-items: flex-end;
    text-align: right;
    gap: .20rem;
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    transition:
      opacity .35s ease,
      transform .32s ease,
      filter .55s ease;
  }

  .sub-page.nav-visible .site-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    filter: blur(0);
  }

  .sub-page .site-menu a {
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: 0.012em;
    color: #111 !important;
    text-align: right;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 260ms ease,
      transform 300ms ease;
    transition-delay: 160ms;
  }

  .sub-page .site-menu a:nth-child(2) {
    transition-delay: 200ms;
  }

  .sub-page .site-menu a:nth-child(3) {
    transition-delay: 240ms;
  }

  .sub-page .site-menu.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .sub-page .menu-toggle:has(+ .site-menu.is-open) span:first-child {
    transform: translateY(-138px);
  }

  .sub-page .menu-toggle:has(+ .site-menu.is-open) span:last-child {
    transform: translateY(0);
  }
}
/* VITA MOBILE ADAPTIVE SCROLL LAYOUT v1.1
   First viewport: identity + short statement.
   Scroll area: facts and expandable Vita content.
   Home remains untouched. */
@media (max-width: 480px) and (orientation: portrait) {
  .sub-page.vita-page,
  .vita-room {
    min-height: 180svh;
  }

  .vita-room {
    display: block;
    padding: 0;
  }

  .vita-intro {
    min-height: 100svh;
    padding-left: 11vw;
    padding-right: 9vw;
    padding-top: var(--axis-top);
    display: flex;
    flex-direction: column;
  }

  .vita-intro .page-kicker,
  .vita-intro .page-name {
    position: static;
    left: auto;
    margin: 0;
  }

  .vita-intro .page-name {
    font-size: clamp(22px, 2.65vw, 45px);
    line-height: 1.12;
    letter-spacing: .004em;
  }

  .vita-intro .page-kicker,
  .vita-facts span {
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: .006em;
  }

  .vita-main {
    width: 100%;
    max-width: 310px;
    font-size: 43px;
    line-height: 1.14;
    letter-spacing: 0.014em;
    margin: 24vh 0 0;
  }

  .vita-facts {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 3.2vh;
    padding-left: 11vw;
    padding-right: 9vw;
    padding-bottom: 18vh;
  }

  .vita-facts p {
    margin: 0;
    font-size: clamp(22px, 2.65vw, 45px);
    line-height: 1.12;
    letter-spacing: .004em;
  }

  .vita-facts span {
    display: block;
    margin-bottom: .32rem;
  }
}



/* VITA MOBILE TRANSFORM EXPERIMENT v0.1
   Vita verwandelt sich: Intro bleibt ruhig, Facts erscheinen als Zustände. */
@media (max-width: 480px) and (orientation: portrait) {
  .vita-room {
    min-height: 430svh;
  }

  .vita-intro {
    position: sticky;
    top: 0;
    min-height: 100svh;
    z-index: 1;
  }

  .vita-main {
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .vita-facts {
    position: relative;
    z-index: 2;
    margin-top: -72svh;
    padding-top: 72svh;
    padding-bottom: 76vh;
  }

  .vita-facts > div {
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    filter: blur(18px);
    transform: translateY(28px);
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .vita-facts > div.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* VITA MOBILE TRANSFORM EXPERIMENT v0.3
   Stage model: facts transform in place, final state accumulates all facts. */
@media (max-width: 480px) and (orientation: portrait) {
  .vita-room {
    min-height: 460svh;
  }

  .vita-intro {
    position: sticky;
    top: 0;
    min-height: 100svh;
    z-index: 1;
  }

  .vita-main {
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .vita-facts {
    position: sticky;
    top: 0;
    min-height: 100svh;
    margin-top: -100svh;
    padding-left: 11vw;
    padding-right: 9vw;
    padding-bottom: 0;
    display: block;
    z-index: 2;
    pointer-events: none;
  }

  .vita-facts > div {
    position: absolute;
    left: 11vw;
    right: 9vw;
    top: 34vh;
    min-height: auto;
    opacity: 0;
    filter: blur(18px);
    transform: translateY(28px);
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .vita-facts > div.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .vita-facts.is-final > div {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .vita-facts.is-final > div:nth-child(1) { top: 24vh; }
  .vita-facts.is-final > div:nth-child(2) { top: 41vh; }
  .vita-facts.is-final > div:nth-child(3) { top: 61vh; }
}

/* CONTACT MOBILE TRANSFORM EXPERIMENT v0.1
   Contact uses the Vita transformation principle: staged reveal, final accumulation. */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-room {
    min-height: 430svh;
    display: block;
    padding: 0;
  }

  .contact-intro {
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding-left: 11vw;
    padding-right: 9vw;
    padding-top: var(--axis-top);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  .contact-intro .page-kicker,
  .contact-intro .page-name {
    position: static;
    left: auto;
    margin: 0;
  }

  .contact-intro .page-name,
  .contact-states p,
  .contact-states a {
    font-size: clamp(22px, 2.65vw, 45px);
    line-height: 1.12;
    letter-spacing: .004em;
  }

  .contact-intro .page-kicker,
  .contact-states span {
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: .006em;
  }

  .contact-main {
    width: 100%;
    max-width: 310px;
    font-size: 43px;
    line-height: 1.14;
    letter-spacing: 0.014em;
    margin: 24vh 0 0;
    color: var(--text);
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .contact-states {
    position: sticky;
    top: 0;
    min-height: 100svh;
    margin-top: -100svh;
    padding-left: 11vw;
    padding-right: 9vw;
    padding-bottom: 0;
    display: block;
    z-index: 2;
    pointer-events: none;
  }

  .contact-states > div {
    position: absolute;
    left: 11vw;
    right: 9vw;
    top: 36vh;
    opacity: 0;
    filter: blur(18px);
    transform: translateY(28px);
    transition:
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .contact-states > div.is-visible,
  .contact-states.is-final > div {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .contact-states.is-final > div:nth-child(1) { top: 26vh; }
  .contact-states.is-final > div:nth-child(2) { top: 45vh; }
  .contact-states.is-final > div:nth-child(3) { top: 67vh; }

  .contact-states span {
    display: block;
    margin-bottom: .32rem;
    color: var(--muted);
  }

  .contact-states p {
    margin: 0;
    color: rgba(25,25,24,.52);
  }

  .contact-states a {
    color: var(--text);
    text-decoration: none;
  }

  .sub-page.nav-visible .menu-toggle {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
  }

  .sub-page.nav-visible .site-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    filter: blur(0);
  }
}


/* CONTACT MAIN TYPE ALIGNMENT v0.1 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-main {
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 100;
  }
}

/* CONTACT MAIL FINAL CHOREOGRAPHY v0.1 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states a {
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 100;
  }

  .contact-states.is-final > div:nth-child(3) {
    transition:
      top 680ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }
}

/* CONTACT MAIL FINAL ALIGNMENT v0.2 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states a {
    font-family: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 2.65vw, 45px);
    line-height: 1.12;
    letter-spacing: .004em;
  }

  .contact-states.is-final > div:nth-child(3) {
    top: auto;
    bottom: calc(var(--axis-bottom) + 0.05rem);
  }
}

/* CONTACT FINAL TYPE CONSISTENCY v0.3 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-intro .page-name,
  .contact-states p,
  .contact-states a {
    font-family: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 2.65vw, 45px);
    line-height: 1.12;
    letter-spacing: .004em;
    color: rgba(25,25,24,.52);
  }

  .contact-states.is-final > div:nth-child(3) {
    top: auto;
    bottom: calc(var(--axis-bottom) - 0.28rem);
  }
}

/* CONTACT MAIL FINAL DRIFT v0.4 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states > div:nth-child(3) {
    transition:
      top 720ms cubic-bezier(.16,1,.3,1),
      bottom 720ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }
}

/* CONTACT MAIL FINAL DRIFT FIX v0.5 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states > div:nth-child(3) {
    bottom: calc(var(--axis-bottom) - 0.28rem);
    transform: translateY(-22vh);
  }

  .contact-states.is-final > div:nth-child(3) {
    top: auto;
    bottom: calc(var(--axis-bottom) - 0.28rem);
    transform: translateY(0);
  }
}

/* CONTACT MAIL DRIFT START POSITION FIX v0.6 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states > div:nth-child(3) {
    top: 36vh;
    bottom: auto;
    transform: translateY(0);
  }

  .contact-states.is-final > div:nth-child(3) {
    top: 36vh;
    bottom: auto;
    transform: translateY(45vh);
  }
}

/* CONTACT MAIL FINAL POSITION TUNE v0.7 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states.is-final > div:nth-child(3) {
    transform: translateY(47vh);
  }
}

/* CONTACT MAIL TOP-AXIS FINAL v0.8 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states > div:nth-child(3) {
    top: 36vh;
    bottom: auto;
    transform: none;
    transition:
      top 720ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .contact-states.is-final > div:nth-child(3) {
    top: calc(100svh - var(--axis-bottom) - 4.9rem);
    bottom: auto;
    transform: none;
  }
}

/* CONTACT MAIL TOP-AXIS FINAL TUNE v0.9 */
@media (max-width: 480px) and (orientation: portrait) {
  .contact-states.is-final > div:nth-child(3) {
    top: calc(100svh - var(--axis-bottom) - 2.9rem);
  }
}

/* VITA FINAL BLOCK DRIFT v0.1 */
@media (max-width: 480px) and (orientation: portrait) {
  .vita-facts > div {
    transition:
      top 720ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }
}








/* DESKTOP NAV MOBILE SCALE v1.0
   Direct scale derivation from mobile navigation.
   No reweighting, no opacity change, no separate desktop typography logic. */
@media (min-width: 821px) {
  .menu-toggle {
    bottom: calc(var(--axis-bottom) + 5px);
    right: calc(var(--axis-right) + 1.32rem);
    width: 25px;
    height: 21px;
    gap: 7px;
  }

  .menu-toggle span {
    width: 28px;
    height: 1px;
  }

  .site-menu {
    bottom: calc(var(--axis-bottom) + 2.93rem);
    right: calc(var(--axis-right) + 1.32rem);
    gap: .23rem;
  }

  .site-menu a {
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
    font-size: 28px;
    line-height: 1.14;
    letter-spacing: 0.010em;
    opacity: 0;
  }

  .site-menu.is-open a {
    opacity: 1;
  }

  .menu-toggle:has(+ .site-menu.is-open) span:first-child {
    transform: translateY(-159px);
  }

  .menu-toggle:has(+ .site-menu.is-open) span:last-child {
    transform: translateY(0);
  }
}


/* DESKTOP SUBPAGE ATMOSPHERIC SCROLL v1.0
   Home untouched. Nav untouched. Subpages inherit Home-like staged atmosphere. */
@media (min-width: 821px) {
  .sub-page .sub-room {
    --sub-axis-left: 11vw;
    position: relative;
    min-height: 430svh;
    padding: 0;
    overflow: visible;
  }

  .sub-page .vita-intro,
  .sub-page .contact-intro {
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding-left: var(--sub-axis-left);
    padding-right: calc(var(--axis-right) + 13rem);
    padding-top: var(--axis-top);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  .sub-page .page-kicker,
  .sub-page .page-name {
    position: static;
    left: auto;
    margin: 0;
  }

  .sub-page .vita-main,
  .sub-page .contact-main {
    position: static;
    width: min(72vw, 920px);
    margin: 28vh 0 0 0;
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 100;
    font-size: clamp(48px, 5vw, 86px);
    line-height: 1.04;
    letter-spacing: 0.005em;
    color: var(--text);
    transition: opacity 420ms ease, filter 520ms ease, transform 520ms ease;
  }

  .sub-page .vita-facts,
  .sub-page .contact-states {
    position: sticky;
    top: 0;
    min-height: 100svh;
    margin-top: -100svh;
    padding: 0;
    display: block;
    z-index: 2;
    pointer-events: none;
  }

  .sub-page .vita-facts > div,
  .sub-page .contact-states > div {
    position: absolute;
    left: var(--sub-axis-left);
    right: calc(var(--axis-right) + 13rem);
    top: 44vh;
    width: min(64vw, 820px);
    opacity: 0;
    filter: blur(18px);
    transform: translateY(28px);
    transition:
      top 720ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .sub-page .vita-facts > div.is-visible,
  .sub-page .contact-states > div.is-visible,
  .sub-page .vita-facts.is-final > div,
  .sub-page .contact-states.is-final > div {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .sub-page .vita-facts.is-final > div:nth-child(1),
  .sub-page .contact-states.is-final > div:nth-child(1) { top: 34vh; }

  .sub-page .vita-facts.is-final > div:nth-child(2),
  .sub-page .contact-states.is-final > div:nth-child(2) { top: 52vh; }

  .sub-page .vita-facts.is-final > div:nth-child(3),
  .sub-page .contact-states.is-final > div:nth-child(3) { top: 70vh; }

  .sub-page .vita-facts span,
  .sub-page .contact-states span {
    display: block;
    margin-bottom: .42rem;
    color: var(--muted);
    font-size: clamp(17px, 1.25vw, 22px);
    line-height: 1.2;
  }

  .sub-page .vita-facts p,
  .sub-page .contact-states p,
  .sub-page .contact-states a {
    margin: 0;
    color: rgba(25,25,24,.52);
    font-size: clamp(23px, 1.9vw, 34px);
    line-height: 1.34;
    text-decoration: none;
  }
}


/* CONTACT MAIL ↔ NAV ALIGNMENT v0.1
   Mail block visually ends on the lower navigation axis. */
@media (min-width: 821px) {

  .contact-states {
    padding-bottom: 7.5rem;
  }

}

/* SUBPAGE MEDIUM VIEWPORT ATMOSPHERE v1.0
   Schliesst die Luecke zwischen Mobile-Portrait (<=480px Hochformat) und
   Desktop (>=821px): Tablets, schmale Browserfenster, Handys im
   Querformat. Vita/Kontakt bekommen hier dieselbe linke Achse (11vw,
   identisch zu Home) und dieselbe sticky Scroll-Choreographie wie
   Desktop - nur mit reduzierten Abstaenden, damit nichts ueberlaeuft.
   Home-, Mobile- und Desktop-Regeln bleiben unveraendert. */
@media (min-width: 481px) and (max-width: 820px),
       (max-width: 480px) and (orientation: landscape) {

  .sub-page .sub-room {
    --sub-axis-left: 11vw;
    position: relative;
    min-height: 430svh;
    padding: 0;
    overflow: visible;
  }

  .sub-page .vita-intro,
  .sub-page .contact-intro {
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding-left: var(--sub-axis-left);
    padding-right: calc(var(--axis-right) + 2rem);
    padding-top: var(--axis-top);
    display: flex;
    flex-direction: column;
    z-index: 1;
  }

  .sub-page .page-kicker,
  .sub-page .page-name {
    position: static;
    left: auto;
    margin: 0;
  }

  .sub-page .vita-main,
  .sub-page .contact-main {
    position: static;
    width: min(80vw, 640px);
    margin: 20vh 0 0 0;
    font-family: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 100;
    font-size: clamp(34px, 6vw, 62px);
    line-height: 1.08;
    letter-spacing: 0.008em;
    color: var(--text);
    transition: opacity 420ms ease, filter 520ms ease, transform 520ms ease;
  }

  .sub-page .vita-facts,
  .sub-page .contact-states {
    position: sticky;
    top: 0;
    min-height: 100svh;
    margin-top: -100svh;
    padding: 0;
    display: block;
    z-index: 2;
    pointer-events: none;
  }

  .sub-page .vita-facts > div,
  .sub-page .contact-states > div {
    position: absolute;
    left: var(--sub-axis-left);
    right: calc(var(--axis-right) + 2rem);
    top: 44vh;
    opacity: 0;
    filter: blur(18px);
    transform: translateY(28px);
    transition:
      top 720ms cubic-bezier(.16,1,.3,1),
      opacity 420ms ease,
      filter 520ms ease,
      transform 520ms ease;
  }

  .sub-page .vita-facts > div.is-visible,
  .sub-page .contact-states > div.is-visible,
  .sub-page .vita-facts.is-final > div,
  .sub-page .contact-states.is-final > div {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .sub-page .vita-facts.is-final > div:nth-child(1),
  .sub-page .contact-states.is-final > div:nth-child(1) { top: 32vh; }

  .sub-page .vita-facts.is-final > div:nth-child(2),
  .sub-page .contact-states.is-final > div:nth-child(2) { top: 50vh; }

  .sub-page .vita-facts.is-final > div:nth-child(3),
  .sub-page .contact-states.is-final > div:nth-child(3) { top: 68vh; }

  .sub-page .vita-facts span,
  .sub-page .contact-states span {
    display: block;
    margin-bottom: .38rem;
    color: var(--muted);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.2;
  }

  .sub-page .vita-facts p,
  .sub-page .contact-states p,
  .sub-page .contact-states a {
    margin: 0;
    color: rgba(25,25,24,.52);
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.34;
    text-decoration: none;
  }

  .sub-page .contact-states {
    padding-bottom: 5rem;
  }
}

/* SUBPAGE SHORT-LANDSCAPE STATIC FALLBACK v1.0
   Phones in landscape orientation have very little vertical height
   (~320-430px). The sticky/absolute vh-based fact choreography above
   assumes enough height for each fact's multi-line text to fit between
   its neighbours - on short landscape screens the facts overlap each
   other and the surrounding intro text (reported by Gruender as
   "mobile quer sind vita und kontakt unbrauchbar", verifiziert per
   Scroll-Screenshot-Test bei 568x320/667x375/812x375).
   Fix: below max-height:500px in landscape orientation, drop the
   scroll-triggered reveal entirely and show Vita/Kontakt as a normal,
   simply scrollable page with all facts visible at once, stacked in
   document flow. No overlap possible regardless of text length, since
   nothing is absolutely positioned on top of anything else anymore.
   Desktop, taller tablet-landscape and mobile-portrait remain fully
   untouched (gated by both orientation AND max-height, not by width -
   this is independent of the 481-820px width bucket above and always
   wins on ties because it is declared later in the file). */
@media (orientation: landscape) and (max-height: 500px) {

  .sub-page .sub-room {
    position: static;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .sub-page .vita-intro,
  .sub-page .contact-intro {
    position: static;
    min-height: 0;
    height: auto;
    padding: 5vh calc(var(--axis-right) + 2rem) 3vh 8vw;
    display: block;
  }

  .sub-page .page-kicker,
  .sub-page .page-name {
    position: static;
    left: auto;
    margin: 0;
  }

  .sub-page .vita-main,
  .sub-page .contact-main {
    position: static !important;
    width: auto;
    max-width: 640px;
    margin: 2vh 0 0 0 !important;
    font-size: clamp(22px, 3.6vw, 32px) !important;
    line-height: 1.22 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .sub-page .vita-facts,
  .sub-page .contact-states {
    position: static;
    min-height: 0;
    height: auto;
    margin-top: 0;
    padding: 1vh 8vw 5vh 8vw;
    display: grid;
    gap: 2.2vh;
    pointer-events: auto;
  }

  .sub-page .vita-facts > div,
  .sub-page .contact-states > div {
    position: static !important;
    left: auto;
    right: auto;
    top: auto !important;
    width: auto;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .sub-page .vita-facts span,
  .sub-page .contact-states span {
    font-size: 13px;
    margin-bottom: .2rem;
  }

  .sub-page .vita-facts p,
  .sub-page .contact-states p,
  .sub-page .contact-states a {
    font-size: clamp(16px, 2.6vw, 20px);
    line-height: 1.3;
  }

  .sub-page .contact-states {
    padding-bottom: 4vh;
  }
}