/* Existing Inter v20 Roman variable subsets are retained byte-for-byte.
   Matching genuine Italic subsets share the same 100–900 weight axis. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter-v20-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter-v20-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Italic";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter-v20-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Italic";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter-v20-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --background: #000000;
  --foreground: #ffffff;
  --star-color: #ffffff;
  --heart-rest: #000000;
  --nb-yellow: #fff430;
  --nb-white: #ffffff;
  --nb-purple: #9c59d1;
  --nb-black: #000000;
  --page-gutter: clamp(18px, 2.5vw, 42px);
  --close-icon-size: 25px;
  --close-hitbox-size: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color-scheme: dark;
  font-family: "Inter", Arial, sans-serif;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", Arial, sans-serif;
  transition: background-color 280ms ease, color 280ms ease;
}

body[data-air-physics="deflating"],
body[data-air-physics="grounded"] {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-air-physics="floating"]:not([data-state="landing"]):not(.overlay-open) {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body[data-air-physics="floating"]:not([data-state="landing"]):not(.overlay-open) .gallery-surface {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-state="work"] {
  --background: #ffffff;
  --foreground: #000000;
  --star-color: #000000;
  --heart-rest: #ffffff;
  color-scheme: light;
}

button,
a {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 10px;
  color: #000;
  background: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight: 600;
  line-height: 0.94;
}

.section-heading h2:focus {
  outline: none;
}

/* Retain the WebP sizing only; the heading's aria-label supplies its name. */
.section-wordmark-label {
  visibility: hidden;
}

.bottom-nav a,
.bottom-nav button {
  color: #767676;
  text-underline-offset: 0.24em;
}

.bottom-nav a:hover,
.bottom-nav button:hover {
  text-decoration: underline;
}

.heart-stage {
  position: fixed;
  z-index: 30;
  top: 47%;
  left: 50%;
  width: clamp(300px, min(42vw, 62vh), 520px);
  container-type: inline-size;
  transform: translate(-50%, -50%);
  transition:
    top 580ms var(--ease),
    width 580ms var(--ease),
    transform 580ms var(--ease);
}

.logo-button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logo-button:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 8px;
}

.luft-logo {
  display: block;
  width: 100%;
  overflow: visible;
}

.star {
  fill: var(--star-color);
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 280ms ease;
}

.heart {
  fill: var(--heart-rest);
  transform-box: fill-box;
  transform-origin: center;
  animation: heart-rhythm-dark 822ms linear infinite;
}

body[data-state="work"] .heart {
  animation-name: heart-rhythm-light;
}

body.is-world-leaking[data-state="works"] .star {
  fill: #000000;
}

body.is-world-leaking[data-state="work"] .star {
  fill: #ffffff;
}

.heart-anomaly {
  transform-box: fill-box;
  transform-origin: center;
}

.luft-logo.is-anomalous[data-logo-anomaly="star-turn"] .star {
  animation: logo-star-turn var(--logo-anomaly-duration, 800ms) cubic-bezier(0.3, 0.75, 0.2, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="heart-tug"] .heart-anomaly {
  animation: logo-heart-tug var(--logo-anomaly-duration, 720ms) cubic-bezier(0.32, 0.72, 0.2, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="heart-turn"] .heart-anomaly {
  animation: logo-heart-turn var(--logo-anomaly-duration, 800ms) cubic-bezier(0.28, 0.76, 0.18, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="counter-turn"] .star {
  animation: logo-star-counter-turn var(--logo-anomaly-duration, 860ms) cubic-bezier(0.28, 0.76, 0.18, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="counter-turn"] .heart-anomaly {
  animation: logo-heart-counter-turn var(--logo-anomaly-duration, 860ms) cubic-bezier(0.28, 0.76, 0.18, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="misalign"] .star {
  animation: logo-star-misalign var(--logo-anomaly-duration, 620ms) cubic-bezier(0.3, 0.72, 0.18, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="misalign"] .heart-anomaly {
  animation: logo-heart-misalign var(--logo-anomaly-duration, 620ms) cubic-bezier(0.3, 0.72, 0.18, 1) both;
}

.luft-logo.is-anomalous[data-logo-anomaly="missed-beat"] .heart-anomaly {
  animation: logo-heart-missed-beat var(--logo-anomaly-duration, 760ms) cubic-bezier(0.28, 0.76, 0.18, 1) both;
}

.world-leak {
  --paper-surface: #000000;
  --under-surface: #ffffff;
  --under-ink: #000000;
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  contain: strict;
}

body[data-state="work"] .world-leak {
  --paper-surface: #ffffff;
  --under-surface: #000000;
  --under-ink: #ffffff;
}

.world-leak__tear {
  position: absolute;
  top: var(--tear-y, 0);
  left: var(--tear-x, calc(50vw - 130px));
  width: var(--tear-width, 260px);
  height: var(--tear-height, 170px);
  transform: rotate(var(--tear-rotation, 0deg));
  transform-origin: 50% 0;
}

.world-leak__underlay,
.world-leak__paper {
  position: absolute;
  inset: 0;
  will-change: clip-path, transform;
}

.world-leak__underlay {
  z-index: 0;
  overflow: hidden;
  color: var(--under-ink);
  background: var(--under-surface);
  clip-path: polygon(49.5% 0, 49% 10%, 50% 24%, 49% 42%, 50% 62%, 49% 80%, 50% 92%, 49.5% 100%, 50.5% 100%, 50% 92%, 51% 80%, 50% 62%, 51% 42%, 50% 24%, 51% 10%, 50.5% 0);
  transform-origin: 50% 0;
}

.world-leak__paper {
  z-index: 1;
  display: block;
  background: var(--paper-surface);
}

.world-leak__paper--left {
  clip-path: polygon(0 0, 49.5% 0, 49% 10%, 50% 24%, 49% 42%, 50% 62%, 49% 80%, 50% 92%, 49.5% 100%, 0 100%);
  transform-origin: 0 0;
}

.world-leak__paper--right {
  clip-path: polygon(50.5% 0, 100% 0, 100% 100%, 50.5% 100%, 50% 92%, 51% 80%, 50% 62%, 51% 42%, 50% 24%, 51% 10%);
  transform-origin: 100% 0;
}

.world-leak__world-name {
  position: absolute;
  top: var(--tear-logo-y, 40%);
  left: 50%;
  width: max-content;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  opacity: 0.42;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.world-leak__text {
  position: absolute;
  z-index: 0;
  top: var(--tear-text-y, 80%);
  left: 50%;
  display: block;
  width: max-content;
  max-width: 84%;
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.world-leak.is-visible {
  visibility: visible;
}

.world-leak.is-visible .world-leak__underlay {
  animation: paper-tear-underlay var(--tear-duration, 1040ms) cubic-bezier(0.28, 0.72, 0.18, 1) both;
}

.world-leak.is-visible .world-leak__paper--left {
  animation: paper-tear-left var(--tear-duration, 1040ms) cubic-bezier(0.28, 0.72, 0.18, 1) both;
}

.world-leak.is-visible .world-leak__paper--right {
  animation: paper-tear-right var(--tear-duration, 1040ms) cubic-bezier(0.28, 0.72, 0.18, 1) both;
}

.brush-trail {
  position: fixed;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.overlay-open .brush-trail,
body[data-state="landing"] .brush-trail {
  visibility: hidden;
}

.brush-cursor {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: var(--foreground);
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 70ms linear, transform 120ms var(--ease);
  will-change: left, top, opacity, transform;
}

.brush-cursor.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.heart.is-resetting,
body[data-state="work"] .heart.is-resetting {
  fill: var(--heart-rest);
  transform: scale(1);
  animation: none;
}

.logo-button:hover .luft-logo {
  transform: scale(1.005);
}

@media (hover: hover) and (pointer: fine) {
  .has-art-cursor body[data-state="landing"],
  .has-art-cursor body[data-state="landing"] *,
  .has-art-cursor body[data-state="works"],
  .has-art-cursor body[data-state="works"] *,
  .has-art-cursor body[data-state="work"],
  .has-art-cursor body[data-state="work"] * {
    cursor: none !important;
  }
}

.landing-lockup {
  position: relative;
}

.landing-name {
  display: flex;
  width: 74.61%;
  justify-content: space-between;
  margin: clamp(12px, 1.7vh, 20px) auto 0;
  font-size: clamp(2.75rem, 7.2vw, 6.2rem);
  font-size: 16cqw;
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  transition: opacity 140ms ease, visibility 140ms ease;
}

.heart-hint {
  position: relative;
  width: max-content;
  max-width: 74.61%;
  min-height: 1.2em;
  margin: clamp(8px, 1.5cqw, 12px) auto 0;
  font-size: clamp(0.78rem, 2.1cqw, 0.9rem);
  line-height: 1.2;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}

.heart-hint.is-visible {
  visibility: visible;
}

.heart-hint::before {
  display: block;
  white-space: nowrap;
  visibility: hidden;
  content: attr(data-text);
}

.heart-hint__visual {
  position: absolute;
  /* Keep the hint's original flow space so the logo itself never shifts. */
  top: -105cqw;
  left: -52cqw;
  display: block;
  width: 43cqw;
  aspect-ratio: 1876 / 977;
  background: url("assets/TOUCH_MY_HEART_Kreide.svg") center / contain no-repeat;
  transform: rotate(-13deg);
  transform-origin: center;
}

.heart-hint__visual.is-loading,
.heart-hint__visual.has-drawing-svg {
  background: none;
}

.heart-hint__visual svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.heart-hint__visual--dare {
  top: 7cqw;
  left: 37cqw;
  width: 36cqw;
  aspect-ratio: 2512 / 746;
  background-image: url("assets/I_DARE_YOU_Kreide_2026-10-07.svg");
  transform: rotate(-20deg);
  visibility: hidden;
}

.heart-hint__visual--dare.is-writing,
.heart-hint__visual--dare.is-complete {
  visibility: visible;
}

.gallery-surface {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  padding: clamp(210px, 24vh, 280px) var(--page-gutter) calc(96px + env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease 180ms, transform 520ms var(--ease) 90ms;
}

.air-toggle {
  position: fixed;
  z-index: 32;
  right: calc(var(--page-gutter) - 14px);
  bottom: calc(env(safe-area-inset-bottom) + var(--page-gutter) - 14px);
  min-width: 44px;
  min-height: 44px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  background: transparent;
  font-size: clamp(0.58rem, 0.68vw, 0.67rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-2deg);
  transition: opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.air-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -7px;
}

.air-toggle__artwork {
  display: block;
  flex: none;
  width: auto;
  height: calc(var(--air-label-ink-height, 1.5em) * 200 / var(--air-artwork-ink-height));
  pointer-events: none;
  user-select: none;
  transform: scale(1, 1);
  transform-origin: right bottom;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.air-toggle__artwork[hidden] {
  display: none;
}

/* News is a visual overlay, never part of gallery layout or physics geometry. */
/* Reuse the fixed-UI level above gallery shapes, without changing their
   physics or the footer/control stacking below the row. */
.news-bar { position: fixed; z-index: 32; height: var(--news-bar-height); color: var(--foreground); font-size: 1rem; }
.news-bar[hidden],
body[data-state="landing"] .news-bar { display: none; }
.news-bar__row {
  display: flex; height: 100%; background: var(--nb-purple);
  position: relative;
  padding-inline: var(--page-gutter) var(--news-right-inset, var(--page-gutter));
}
.news-bar__toggle,
.news-bar__static {
  display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px;
  margin: 0; padding: 0; font-size: var(--news-label-size); font-weight: 500;
  line-height: 1.15; color: inherit; background: transparent; text-align: left;
}
.news-bar__toggle { cursor: pointer; }
.news-bar__label { flex: 1; min-width: 0; overflow: hidden; }
.news-bar__marquee { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.news-bar__marquee > span + span { display: none; }
.has-marquee .news-bar__marquee { display: flex; width: max-content; overflow: visible; animation: news-marquee 36s linear infinite; }
.has-marquee .news-bar__marquee > span { display: block; flex: none; padding-right: 4rem; }
.news-bar:hover .news-bar__marquee,
.news-bar:focus-within .news-bar__marquee,
.news-bar.is-expanded .news-bar__marquee { animation-play-state: paused; }
@keyframes news-marquee { to { transform: translateX(-50%); } }
.news-bar__chevron {
  display: block; flex: none; width: 14px; height: 10px;
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.news-bar.is-expanded .news-bar__chevron { transform: rotate(180deg); }
.news-bar__dismiss { display: grid; flex: none; width: var(--news-bar-height); height: var(--news-bar-height); padding: 0; place-items: center; background: transparent; }
.news-bar__dismiss .close-icon { width: 12px; height: 12px; }
.news-bar__dismiss { position: absolute; top: 0; right: calc(var(--news-right-inset) + 14px + 12px); }
.news-bar__toggle:has(+ .news-bar__dismiss) .news-bar__label { margin-right: calc(var(--news-bar-height) + 12px); }
.news-bar :is(button, a):focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }
.news-panel {
  position: absolute; right: 0; bottom: 100%; left: 0; display: grid;
  grid-template-rows: 0fr; background: var(--nb-purple);
  transition: grid-template-rows 400ms cubic-bezier(.22, 1, .36, 1);
}
.news-bar.is-expanded .news-panel { grid-template-rows: 1fr; }
.news-panel__clip { min-height: 0; overflow: hidden; }
.news-panel__content {
  display: grid; min-width: 0; max-height: var(--news-panel-max-height); overflow: auto;
  overscroll-behavior: contain; gap: 20px 28px;
  padding: clamp(16px, 2.2vw, 32px) var(--page-gutter); line-height: 1.45;
}
.news-panel__content.has-media { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.news-panel__copy,
.news-media { min-width: 0; }
.news-panel__copy > :first-child { margin-top: 0; }
.news-panel__copy > :last-child { margin-bottom: 0; }
.news-panel h2 { margin: 0 0 1rem; font-size: clamp(1.15rem, 1.7vw, 1.65rem); font-weight: 600; line-height: 1.2; }
.news-panel p { margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.news-panel__category,
.news-panel__date,
.news-media__caption { font-size: .875rem; }
.news-bar .news-media__caption { max-width: 100%; margin-inline: auto; text-align: left; }
.news-panel__links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-content: start; }
.news-panel__content.has-media .news-panel__links { grid-column: 1; }
.news-panel__links a,
.news-bar .booklet-original { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.news-media { grid-column: 2; grid-row: 1 / span 2; }
.news-media__slot { touch-action: pan-y pinch-zoom; }
.news-media__navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .875rem; }
.news-media__navigation button { min-width: 44px; min-height: 44px; padding: 8px; background: transparent; }
.news-media__navigation button:disabled { opacity: .35; }
.news-bar .news-media .project-view__media {
  display: block; width: 100%; height: auto; padding: 0;
  --project-image-height: var(--news-media-height); --project-video-height: var(--news-media-height);
}
.news-bar .news-media .project-media__surface { height: auto; text-align: center; }
.news-bar .news-media [data-media-kind="image"] .project-media__surface > img {
  width: auto; height: auto; max-width: 100%; max-height: var(--news-media-height); margin-inline: auto;
}
.news-bar .project-video { max-height: var(--news-media-height); background: transparent; }
.news-bar .news-media [data-media-kind="file"] .project-video { width: min(100%, calc(var(--news-media-height) * var(--project-video-ratio))); height: auto; aspect-ratio: var(--project-video-ratio); max-height: var(--news-media-height); margin-inline: auto; }
.news-bar :is(.project-video__sound, .project-video__play, .project-video__status) { color: inherit; }
.news-bar .project-video__play { border-color: currentColor; background: var(--nb-purple); }
.news-bar .project-video__status { background: var(--nb-purple); }
.news-bar .project-video__play:focus-visible,
.news-bar .project-video__sound:focus-visible { outline-color: var(--foreground); }
.news-bar .booklet-view,
.news-bar .booklet-view.is-reader-active {
  position: relative; inset: auto; display: grid; width: 100%; height: auto;
  grid-template-rows: var(--news-media-height) auto; padding: 0; background: transparent; gap: 12px;
}
.news-bar .booklet-view .project-media__surface { height: 100%; }
.news-bar .booklet-controls { font-size: .875rem; gap: 8px 12px; grid-template-columns: auto auto 1fr; }
.news-bar .booklet-controls[hidden] { display: none; }
.news-bar .booklet-stage { touch-action: pan-y pinch-zoom; }
.news-bar .is-reader-active .booklet-stage { touch-action: none; }
.news-bar .booklet-page__hit:focus-visible { outline-color: var(--foreground); }
@media (max-width: 760px) {
  .news-panel__content.has-media { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .news-media { grid-column: 1; grid-row: auto; }
  .news-panel__content.has-media .news-panel__links { grid-column: 1; }
  .news-bar .booklet-controls { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .news-panel,
  .news-bar__chevron { transition: none; }
  .has-marquee .news-bar__marquee { display: block; width: auto; animation: none; overflow: hidden; text-overflow: ellipsis; }
  .has-marquee .news-bar__marquee > span { padding-right: 0; }
  .has-marquee .news-bar__marquee > span + span { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  body:not(.is-switching):not(.overlay-open) .air-toggle:not([data-micro-suppressed="true"]):is(:hover, :focus-visible)[data-air-action="rein"] .air-toggle__artwork {
    transform: scale(1.06, 1.03);
  }

  body:not(.is-switching):not(.overlay-open) .air-toggle:not([data-micro-suppressed="true"]):is(:hover, :focus-visible)[data-air-action="raus"] .air-toggle__artwork {
    transform: scale(0.93, 0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .air-toggle__artwork {
    transition: none;
  }
}

.section-heading {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  margin-bottom: clamp(42px, 8vw, 118px);
}

.section-heading h2 {
  max-width: none;
  text-align: right;
  white-space: nowrap;
}

body[data-state="work"] .section-heading h2 {
  width: 6.3187em;
}

body:is([data-state="works"], [data-state="work"]) .section-heading h2,
.info-view .section-heading h2 {
  position: relative;
  color: transparent;
}

body:is([data-state="works"], [data-state="work"]) .section-heading h2::after,
.info-view .section-heading h2::after {
  position: absolute;
  top: 25%;
  right: 0;
  width: 200%;
  aspect-ratio: 7334.1 / 1623.9;
  background: var(--section-wordmark) center / contain no-repeat;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

body[data-state="works"] .section-heading h2 {
  --section-wordmark: url("./assets/luftworks_comp4.webp");
}

body[data-state="works"] .section-heading h2::after,
.info-view[data-wordmark-mode="works"] .section-heading h2::after {
  /* Fit the supplied transparent canvas to the existing visible artwork bounds. */
  background-size: 105.767408% auto;
  background-position: 62.101580% 43.633192%;
  transform: translateY(-50%) scale(1.06);
}

body[data-state="work"] .section-heading h2 {
  --section-wordmark: url("./assets/workluft_comp.webp");
}

.info-view > .section-heading {
  position: absolute;
  pointer-events: none;
}

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .info-view > .section-heading {
    transform: translateX(var(--info-wordmark-shift-x, 0px));
  }
}

.info-view[data-info-page] .section-heading h2::after {
  background-size: var(--info-wordmark-size);
  background-position: var(--info-wordmark-position);
}

.info-view:is([data-info-page="about"], [data-info-page="contact"]) .section-heading h2::after {
  width: var(--info-wordmark-box-width, 200%);
  height: var(--info-wordmark-box-height, auto);
  right: var(--info-wordmark-box-right, 0px);
  top: var(--info-wordmark-box-top, 25%);
}

#info-title.sr-only {
  margin: -1px;
}

.info-view[data-info-page] .info-view__content {
  padding-top: max(clamp(130px, 20vh, 220px), var(--info-wordmark-content-start));
}

.project-grid {
  position: relative;
  --gallery-square-size: clamp(134.4px, min(16.8vw, 26.6vh), 154px);
  --gallery-circle-size: clamp(147.7px, min(18.48vw, 29.26vh), 169.4px);
  --gallery-triangle-size: clamp(175px, min(21.84vw, 34.58vh), 200.2px);
  --gallery-rectangle-size: clamp(168px, min(21vw, 33.25vh), 192.5px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.7vw, 46px);
  align-items: start;
  padding-bottom: clamp(120px, 18vh, 220px);
}

.gallery-credit {
  position: absolute;
  z-index: 1;
  display: block;
  width: max-content;
  color: var(--foreground);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.gallery-credit[data-gallery-credit="gregor"] { font-weight: 900; }
.gallery-credit--joined { display: flex; align-items: center; gap: calc(1em / 3); }
.gallery-credit--joined > .gallery-credit { position: static; }
.gallery-credit[href]:is(:hover, :focus-visible) { text-decoration: underline; }
body[data-state="landing"] .gallery-credit,
body.overlay-open .gallery-credit { visibility: hidden; }

.gallery-surface > .section-heading[data-wordmark-dynamic] h2::after { visibility: hidden; }
.gallery-wordmark {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gallery-wordmark__artwork {
  position: absolute;
  background-repeat: no-repeat;
  transform-origin: 0 0;
  pointer-events: none;
}
body.overlay-open .gallery-wordmark { visibility: hidden; }

.gallery-heart {
  --gallery-safe-top: env(safe-area-inset-top, 0px);
  position: absolute;
  z-index: 2;
  touch-action: none;
  background: transparent;
}
body:not([data-state="landing"]) .gallery-heart .logo-button {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
}
body:not([data-state="landing"]) .gallery-heart .logo-button::after { content: none; }
.gallery-heart .luft-logo {
  position: absolute;
  width: var(--heart-canvas-width);
  left: var(--heart-canvas-left);
  top: var(--heart-canvas-top);
}
body.overlay-open .gallery-heart { visibility: hidden; }

.gallery-item {
  grid-column: span 4;
  align-self: start;
  width: var(--gallery-square-size);
  will-change: transform;
}

.gallery-item[data-shape="circle"] {
  width: var(--gallery-circle-size);
}

.gallery-item[data-shape="triangle"] {
  width: var(--gallery-triangle-size);
}

.gallery-item[data-shape="rectangle"] {
  width: var(--gallery-rectangle-size);
}

.gallery-item[data-shape="a4Portrait"] {
  width: calc(var(--gallery-rectangle-size) / 1.4142135623730951);
}

.gallery-item:nth-child(2) {
  grid-column: 5 / span 4;
  justify-self: center;
  margin-top: 11vw;
}

.gallery-item:nth-child(3) {
  grid-column: 9 / span 4;
  justify-self: end;
  margin-top: 2vw;
}

.project-card {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.gallery-item[data-shape="circle"] .project-card {
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.gallery-item[data-shape="triangle"] .project-card {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.project-card__shape {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1.4142135623730951;
  background: var(--background);
  clip-path: inset(0);
  isolation: isolate;
  transform: translateZ(0);
}

.gallery-item[data-shape="circle"] .project-card__shape {
  aspect-ratio: 1;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.gallery-item[data-shape="square"] .project-card__shape {
  aspect-ratio: 1;
}

.gallery-item[data-shape="triangle"] .project-card__shape {
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.gallery-item[data-shape="a4Portrait"] .project-card__shape {
  aspect-ratio: 0.7071067811865476;
}

.project-card__shape img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  position: absolute;
  inset: -2px;
  display: block;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  opacity: 1;
  backface-visibility: hidden;
  transition: opacity 180ms ease;
}

.project-card__meta {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(16px, 2.3vw, 30px);
  color: var(--background);
  background: var(--foreground);
  font-size: clamp(0.6764rem, 1.068vw, 0.89rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.gallery-item[data-shape="triangle"] .project-card__meta {
  /* Narrow triangles need a wider, lower text zone; larger ones keep their anchor. */
  padding: max(33.333%, calc(15.5em - 100%)) 18% 0;
}

.project-card:hover .project-card__shape img,
.project-card:focus-visible .project-card__shape img {
  opacity: 0;
}

.project-card:hover .project-card__meta,
.project-card:focus-visible .project-card__meta {
  opacity: 1;
}

body:not([data-air-physics="floating"]) .project-card:hover .project-card__shape img,
body:not([data-air-physics="floating"]) .project-card:focus-visible .project-card__shape img {
  opacity: 1;
}

body:not([data-air-physics="floating"]) .project-card:hover .project-card__meta,
body:not([data-air-physics="floating"]) .project-card:focus-visible .project-card__meta {
  opacity: 0;
}

body:not([data-air-physics="floating"]) .gallery-item,
body:not([data-air-physics="floating"]) .project-card {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body:not([data-air-physics="floating"]) .gallery-item[data-dragging="true"] {
  z-index: 2;
}

.project-card:focus-visible {
  outline: none;
}

.project-card:focus-visible .project-card__shape {
  filter:
    drop-shadow(0 0 1px var(--foreground))
    drop-shadow(0 0 4px color-mix(in srgb, var(--foreground) 42%, transparent));
}

.bottom-nav {
  position: fixed;
  z-index: 40;
  bottom: calc(env(safe-area-inset-bottom) + var(--page-gutter));
  left: var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  max-width: calc(100vw - (2 * var(--page-gutter)));
  font-size: 0.72rem;
  font-weight: 500;
}

.bottom-nav button {
  padding: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.bottom-nav :is([data-info="about"], [data-info="contact"]) {
  transition: opacity 220ms ease;
}

body:not([data-state="landing"]) .heart-stage {
  top: calc(env(safe-area-inset-top) + 24px);
  width: clamp(70px, 7vw, 94px);
  transform: translate(-50%, 0);
}
/* Optical geometry of the unchanged 419.5-wide SVG: heart height 181.846,
   center y 166.077; outer ray tips x 57 / 370. Local Inter capitals occupy
   0.73–0.75em. Labels render at half the retained 28.8cqw base size. */
body:not([data-state="landing"]) .logo-button {
  position: relative;
  --heart-nav-gap: calc(16px + 2cqw);
  --heart-nav-font-size: min(28.8cqw, max(1px, calc((48vw - 38.20024cqw - var(--heart-nav-gap)) / 3.77)));
  /* Keep the existing optical anchor and hitbox tied to the original size. */
  --art-end-bearing: calc(0.027344em + var(--heart-nav-font-size) * 0.025);
  --art-hit-width: 2.097071em;
  --design-start-bearing: 0.104821em;
  --design-hit-width: 3.585286em;
}

/* The 2cqw reserve covers the existing ray rotation/misalignment and hover
   scale. Ink side bearings keep the visible gaps equal in both weights. */
.heart-nav-label {
  display: none;
}

body:not([data-state="landing"]) .heart-nav-label {
  position: absolute;
  /* Align painted Inter capitals, not their taller line box. */
  top: calc(39.58925cqw + 0.035em);
  display: none;
  width: max-content;
  color: var(--foreground);
  font-family: "Inter", Arial, sans-serif;
  font-size: calc(var(--heart-nav-font-size) / 2);
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(-50%);
}

.heart-nav-label--art {
  right: calc(86.41240cqw + var(--heart-nav-gap) - var(--art-end-bearing));
  font-weight: 900;
}

.heart-nav-label--design {
  left: calc(88.20024cqw + var(--heart-nav-gap) - var(--design-start-bearing));
  font-weight: 200;
}

body[data-state="work"] .logo-button {
  --art-end-bearing: calc(0.057619em + var(--heart-nav-font-size) * 0.025);
  --art-hit-width: 1.824450em;
  --design-start-bearing: 0.046875em;
  --design-hit-width: 3.769532em;
}

body[data-state="work"] .heart-nav-label--art { font-weight: 200; }
body[data-state="work"] .heart-nav-label--design { font-weight: 900; }

/* Extend only this same button's transparent hit area across the words and
   gaps; retain its original SVG box, accessible name and keyboard behavior. */
body:not([data-state="landing"]) .logo-button::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(13.58760cqw - var(--heart-nav-gap) - var(--art-hit-width));
  right: calc(11.79976cqw - var(--heart-nav-gap) - var(--design-hit-width));
  font-size: var(--heart-nav-font-size);
}

body:not([data-state="landing"]) .landing-name {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body:not([data-state="landing"]) .gallery-surface,
body:not([data-state="landing"]) .air-toggle {
  visibility: visible;
  opacity: 1;
}

body:not([data-state="landing"]) .air-toggle {
  pointer-events: auto;
}

body:not([data-state="landing"]) .gallery-surface {
  transform: translateY(0);
}

body:not([data-state="landing"]) .heart-hint {
  display: none;
}

body.is-switching .gallery-surface {
  opacity: 0;
  transform: translateY(5px);
  transition-delay: 0ms;
  transition-duration: 120ms;
}

body.overlay-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

body.overlay-open .air-toggle {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.project-view,
.info-view {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--foreground);
  background: var(--background);
}

.project-view {
  overflow: hidden;
  overscroll-behavior: none;
}

.info-view {
  overflow: auto;
}

.project-view::backdrop,
.info-view::backdrop {
  background: color-mix(in srgb, var(--background) 88%, transparent);
}

.overlay-close {
  position: fixed;
  z-index: 3;
  top: calc(env(safe-area-inset-top) + var(--page-gutter));
  right: var(--page-gutter);
  display: grid;
  width: var(--close-hitbox-size);
  min-width: var(--close-hitbox-size);
  height: var(--close-hitbox-size);
  padding: 0;
  place-items: center;
  color: var(--foreground);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.overlay-close:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.project-close-button {
  font-size: 0;
}

.project-close-button:hover {
  text-decoration: none;
}

.overlay-close .close-icon {
  display: block;
  width: var(--close-icon-size);
  height: var(--close-icon-size);
  object-fit: contain;
  pointer-events: none;
  /* Center the supplied visible bounds (23,0)-(267,275) in its 284px canvas. */
  transform: translate(-1.056338%, 1.584507%);
  filter: invert(1);
}

body[data-state="work"] .close-icon {
  filter: none;
}

.overlay-close:focus-visible,
.project-external:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 5px;
}

.bottom-nav :is(button, a),
.contact-link {
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav :is(button, a):focus,
.contact-link:focus {
  outline: none;
  box-shadow: none;
}

.bottom-nav :is(button, a):focus-visible:not(.is-pointer-focus) {
  text-decoration: underline;
}

#info-title:focus,
#info-close:focus-visible {
  outline: none;
}

#info-close:focus-visible .close-icon {
  opacity: 0.7;
}

.project-view__scroller {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  touch-action: pan-x pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.project-view__scroller:has(.project-view__intro.is-info-open, [data-media-surface].is-info-open) {
  touch-action: pan-x pan-y pinch-zoom;
}

.project-view__scroller::-webkit-scrollbar {
  display: none;
}

.project-view__scroller:focus {
  outline: none;
}

.project-view__track {
  display: flex;
  width: max-content;
  min-width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-items: stretch;
  gap: clamp(52px, 8vw, 152px);
  padding:
    calc(env(safe-area-inset-top) + clamp(70px, 10vh, 110px))
    clamp(30px, 5vw, 86px)
    calc(env(safe-area-inset-bottom) + clamp(34px, 6vh, 70px));
}

.project-view__segment {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.project-view__intro {
  display: flex;
  width: clamp(300px, 38vw, 610px);
  flex-direction: column;
  justify-content: center;
}

.project-view__intro-main {
  position: relative;
  width: 100%;
}

.project-view__title-zone,
.project-view__intro-secondary {
  display: contents;
}


.project-view__intro {
  padding-right: clamp(18px, 3vw, 50px);
}

.project-view__section {
  --project-section-gap: 1.25rem;
  margin: 0 0 var(--project-section-gap);
  font-size: 0.7rem;
  font-weight: 500;
}

.project-view__intro h2,
.info-view__content h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 5rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.info-view__content h2 {
  font-size: clamp(1.45rem, 2.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.project-view__intro-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: clamp(28px, 5vh, 58px);
  font-size: 0.72rem;
  font-weight: 500;
}

.project-view__more-info {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  display: flex;
  min-height: 40px;
  align-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.project-view__more-info:focus-visible,
.project-media__more-info:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.project-view__details {
  position: absolute;
  z-index: 2;
  top: calc(100% + 3.1rem);
  left: 0;
  display: grid;
  width: 100%;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 300ms ease, opacity 240ms ease;
}

.project-view__intro.is-info-open .project-view__details {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.project-view__details-clip {
  min-height: 0;
  overflow: hidden;
}

.project-view__details-content {
  max-height: min(38dvh, 28rem, var(--project-info-available-height, 100dvh));
  overflow-y: auto;
  font-size: 0.94rem;
  line-height: 1.5;
  overscroll-behavior-y: contain;
}

.project-view__details-content p,
.info-view__content p {
  margin: 0;
  white-space: pre-wrap;
}

.project-view__details-content dl {
  display: grid;
  gap: 0.7rem;
  margin: 1.8rem 0 0;
}

.project-view__details-content dl div {
  display: grid;
  grid-template-columns: minmax(72px, 0.6fr) minmax(0, 1fr);
  gap: 1rem;
}

.project-view__details-content dt,
.project-view__details-content dd {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
}

.project-view__details-content dt {
  font-weight: 500;
}

.project-external {
  display: inline-block;
  width: max-content;
  margin-top: 1.8rem;
  font-size: 0.72rem;
  font-weight: 500;
}

.project-external:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.project-view__media {
  display: grid;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding-block: clamp(6px, 2vh, 22px);
}

.project-view__media img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 180px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.project-view__media figcaption {
  width: 100%;
  margin-top: 0.65rem;
  font-size: 0.66rem;
  line-height: 1.3;
}

.project-view__media--portrait-large {
  width: clamp(330px, 45vw, 660px);
}

.project-view__media--portrait-compact {
  width: clamp(270px, 33vw, 480px);
}

.project-view__media--portrait {
  width: clamp(300px, 39vw, 560px);
}

.project-view__media--square {
  width: clamp(400px, 54vw, 780px);
}

.project-view__media--square-compact {
  width: clamp(330px, 42vw, 620px);
}

.project-view__media--wide {
  width: clamp(620px, 74vw, 1180px);
}

.project-view__media--wide-compact {
  width: clamp(500px, 58vw, 900px);
}

.project-view__media[data-media-kind="image"],
.project-view__media[data-media-kind="pdf"] {
  --project-image-height: calc(100dvh - 180px);
  width: calc(var(--project-image-height) * var(--project-image-ratio));
  grid-template-rows: var(--project-image-height) auto;
}

.project-media__surface {
  position: relative;
  width: 100%;
  height: var(--project-image-height);
  overflow: hidden;
}

.project-view__media[data-media-kind="image"] .project-media__surface > img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.project-media__info {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  overflow: hidden;
  color: #fff;
  background: rgba(0, 0, 0, 0.772);
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 320ms ease;
}

[data-media-surface].is-info-open .project-media__info {
  pointer-events: auto;
  transform: translateY(0);
}

.project-media__info-content {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(62px, 7vw, 78px);
  line-height: 1.4;
  overscroll-behavior-y: contain;
  touch-action: pan-x pan-y;
}

.project-media__info-content h3 {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.65vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
}

.project-media__info-content p {
  margin: 0 0 0.8rem;
  font-size: clamp(0.8rem, 1.05vw, 0.94rem);
  white-space: pre-wrap;
}

.project-media__info-content .project-media__credit {
  font-size: 0.74rem;
}

.project-media__more-info {
  position: absolute;
  z-index: 3;
  bottom: 8px;
  left: 12px;
  display: flex;
  min-height: 40px;
  align-items: center;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 0.7rem;
  text-decoration: underline;
  text-shadow: 0 1px 2px #000;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.project-view__end {
  width: clamp(22px, 7vw, 120px);
}

.project-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 180px);
  overflow: hidden;
  background: #111;
}

.project-view__media .project-video__poster,
.project-video__player,
.project-video__player video,
.project-video__player iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  object-fit: contain;
}

.project-video__player { pointer-events: none; }
.project-video--empty { background: #000; }
.project-video__play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}
.project-video__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.project-view__media.is-playing .project-video__play { display: none; }
[data-media-kind="youtube"]:not([data-youtube-activated="true"]) .project-video__sound { visibility: hidden; }
.project-video__poster { transition: opacity 180ms ease; }
.project-view__media.is-playing .project-video__poster { opacity: 0; pointer-events: none; }

.project-view__media[data-media-kind="file"] {
  --project-video-height: calc(100dvh - 180px);
  width: calc(var(--project-video-height) * var(--project-video-ratio));
  grid-template-rows: var(--project-video-height) auto;
}

.project-view__media[data-media-kind="file"] .project-video {
  height: var(--project-video-height);
  max-height: none;
  aspect-ratio: auto;
}

.project-video__sound {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.project-video__sound .sound-waves { display: none; }
.project-view__media.has-sound .project-video__sound .sound-waves { display: block; }
.project-view__media.has-sound .project-video__sound .sound-slash { display: none; }
.project-video__sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.project-video__status {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 12px;
  margin: 0;
  padding: 4px 6px;
  color: #fff;
  background: rgba(0, 0, 0, .72);
  font-size: .66rem;
}

.project-view.is-reader-active .project-view__scroller {
  overflow-x: hidden;
}

.project-view.is-reader-active .overlay-close {
  z-index: 6;
}

.booklet-view:not(.is-reader-active) .booklet-stage {
  touch-action: pan-x pinch-zoom;
  cursor: pointer;
}
.booklet-view.is-reader-active .booklet-stage { cursor: auto; }

.booklet-view {
  width: 100%;
  height: var(--project-image-height);
}

.booklet-view.is-reader-active {
  position: fixed;
  z-index: 5;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--background);
  gap: clamp(12px, 2vh, 22px);
  padding:
    calc(env(safe-area-inset-top) + clamp(26px, 4vh, 44px))
    clamp(22px, 4vw, 68px)
    calc(env(safe-area-inset-bottom) + clamp(18px, 3vh, 34px));
}

.booklet-view.is-reader-active .project-media__surface {
  height: 100%;
  min-height: 0;
}

.booklet-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  outline: none;
  touch-action: none;
}

.booklet-stage:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 7px;
}

.booklet-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
}

.booklet-placeholder[hidden],
.booklet-pages[hidden],
.booklet-controls[hidden],
.booklet-view:not(.is-reader-active) .booklet-page__hit {
  display: none;
}

.booklet-placeholder__status {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.booklet-pages {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  transform-origin: center;
}

.booklet-page {
  position: relative;
  display: grid;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  place-items: center;
  background: #ffffff;
}

.booklet-page__artwork { width: 100%; height: 100%; }

.booklet-curl {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: var(--booklet-curl-size, 28px);
  height: var(--booklet-curl-size, 28px);
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
.booklet-curl svg { display: block; width: 100%; height: 100%; overflow: visible; transform: scale(.02); transform-origin: top right; }
.booklet-curl__shadow { fill: #000; opacity: .24; }
.booklet-curl__paper { fill: #f1eee7; fill-opacity: .94; }
.booklet-curl__edge { fill: none; stroke: #48433b; stroke-opacity: .36; stroke-width: .75; }
.booklet-curl.is-curling { animation: booklet-page-curl 1200ms cubic-bezier(.45, 0, .25, 1) both; }
.booklet-curl.is-curling svg { animation: booklet-curl-lift 1200ms cubic-bezier(.45, 0, .25, 1) both; }
.booklet-curl.is-curling .booklet-curl__shadow { animation: booklet-curl-shadow 1200ms ease-in-out both; }
@keyframes booklet-page-curl {
  0%, 100% { opacity: 0; }
  18% { opacity: .85; }
  38%, 64% { opacity: 1; }
  84% { opacity: .7; }
}
@keyframes booklet-curl-lift {
  0%, 100% { transform: scale(.02) skewY(0deg); }
  18% { transform: scale(.55) skewY(-3deg); }
  38%, 64% { transform: scale(1) skewY(-6deg); }
  84% { transform: scale(.52) skewY(-1deg); }
}
@keyframes booklet-curl-shadow {
  0%, 100% { opacity: 0; }
  38%, 64% { opacity: .26; }
}
@media (prefers-reduced-motion: reduce) {
  .booklet-curl { display: none; }
  .booklet-curl.is-curling,
  .booklet-curl.is-curling svg,
  .booklet-curl.is-curling .booklet-curl__shadow { animation: none; }
}

.booklet-page__hit {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 0;
  background: transparent;
  cursor: inherit;
  touch-action: none;
}
.booklet-page__hit--previous { left: 0; }
.booklet-page__hit--next { right: 0; }
.booklet-page__hit:focus-visible { outline: 1px solid #000; outline-offset: -3px; }

.booklet-page__canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--foreground) 14%, transparent);
}

.booklet-page__canvas[hidden] { display: none; }

.booklet-controls {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.9rem 1.4rem;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 500;
}

.booklet-controls button {
  padding: 8px 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.booklet-controls button:disabled {
  opacity: 0.28;
  cursor: default;
}

.booklet-controls button:not(:disabled):hover,
.booklet-original:hover {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.booklet-controls button:focus-visible,
.booklet-original:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 4px;
}

.booklet-original {
  grid-column: -2 / -1;
  justify-self: end;
}

.info-view__content {
  min-height: 100%;
  padding: clamp(130px, 20vh, 220px) var(--page-gutter) calc(90px + env(safe-area-inset-bottom));
}

.info-view__content h2 {
  max-width: 10ch;
}

.about-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  max-width: 64rem;
  margin-top: 3.5rem;
}

.about-image {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.about-image--portrait { max-width: 30rem; }
.about-image--square { max-width: 42rem; }

.about-image img {
  display: block;
  width: 100%;
  height: auto;
}

.about-image figcaption {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contact-content {
  max-width: 36rem;
  margin-top: 2rem;
}

.contact-intro {
  max-width: 32rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact-intro + .contact-group,
.contact-group + .contact-group {
  margin-top: 2.5rem;
}

.contact-group h3 {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

.contact-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 0.35rem 0;
}

.contact-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask: var(--contact-icon) center / contain no-repeat;
  mask: var(--contact-icon) center / contain no-repeat;
}

.contact-link__text {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contact-link__label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
}

.contact-link:focus-visible:not(.is-pointer-focus) :is(.contact-link__value, .contact-link__name) {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

@media (hover: hover) and (pointer: fine) {
  .contact-link:hover :is(.contact-link__value, .contact-link__name) {
    text-decoration: underline;
    text-underline-offset: 0.24em;
  }
}

/* Optional editorial presets only. Bases mirror the existing context sizes.
   Steps derive from the existing 0.8rem / 0.94rem / 1rem text scale:
   Small = 0.8/0.94, Large = 0.94/0.8, XL = 1/0.8. Normal is unchanged. */
.project-card__meta.editorial-text { --editorial-base-size: clamp(0.6764rem, 1.068vw, 0.89rem); }
.project-view__intro h2.editorial-text { --editorial-base-size: clamp(1.9rem, 4vw, 5rem); }
.project-view__intro-facts .editorial-text { --editorial-base-size: 0.72rem; }
.project-view__details-content > :is(.editorial-text, .editorial-richtext) { --editorial-base-size: 0.94rem; }
.project-view__details-content dd:is(.editorial-text, :has(.editorial-richtext)) { --editorial-base-size: 0.74rem; }
.project-media__info-content h3.editorial-text { --editorial-base-size: clamp(1rem, 1.65vw, 1.5rem); }
.project-media__info-content p.editorial-text { --editorial-base-size: clamp(0.8rem, 1.05vw, 0.94rem); }
.project-media__info-content .project-media__credit.editorial-text { --editorial-base-size: 0.74rem; }
#info-copy > :is(.editorial-text, .editorial-richtext) { --editorial-base-size: 1rem; }
.contact-intro.editorial-text { --editorial-base-size: 1rem; }
.about-image figcaption.editorial-text { --editorial-base-size: 0.8rem; }
.news-bar__marquee > .editorial-text { --editorial-base-size: var(--news-label-size); }
.news-panel h2.editorial-text { --editorial-base-size: clamp(1.15rem, 1.7vw, 1.65rem); overflow-wrap: anywhere; }
.news-panel__category.editorial-text,
.news-media__caption.editorial-text { --editorial-base-size: .875rem; }
.news-panel__links a.editorial-text { --editorial-base-size: 1rem; }
.editorial-text.text-size-small { --editorial-scale: 0.85106383; }
.editorial-text.text-size-normal { --editorial-scale: 1; }
.editorial-text.text-size-large { --editorial-scale: 1.175; }
.editorial-text.text-size-xl { --editorial-scale: 1.25; }
.editorial-text:is(.text-size-small, .text-size-normal, .text-size-large, .text-size-xl) {
  font-size: calc(var(--editorial-base-size, 1rem) * var(--editorial-scale));
}
.editorial-text.text-weight-400 { font-weight: 400; }
.editorial-text.text-weight-500 { font-weight: 500; }
.editorial-text.text-weight-600 { font-weight: 600; }
.editorial-text.text-weight-200 { font-weight: 200; }
.editorial-text.text-weight-300 { font-weight: 300; }
.editorial-text.text-weight-700 { font-weight: 700; }
.editorial-text.text-weight-900 { font-weight: 900; }
.editorial-text.text-style-italic { font-family: "Inter Italic", "Inter", Arial, sans-serif; font-style: italic; }
.editorial-text.text-style-normal { font-family: "Inter", Arial, sans-serif; font-style: normal; }
.editorial-text.text-underline { text-decoration: underline; }
.editorial-text.text-align-left { text-align: left; }
.editorial-text.text-align-center { text-align: center; }
.editorial-text.text-align-right { text-align: right; }
.editorial-link { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.editorial-text { font-synthesis: none; }
.project-view__intro h2.editorial-text,
.project-view__details-content dd.editorial-text { overflow-wrap: anywhere; }
.editorial-richtext p + p { margin-top: 1em; }

@keyframes heart-rhythm-dark {
  0%, 4.99% { fill: var(--nb-black); transform: scale(1); }
  5% { fill: var(--nb-yellow); transform: scale(1); }
  11.99% { fill: var(--nb-yellow); transform: scale(1.075); }
  12% { fill: var(--nb-yellow); transform: scale(1.0822); }
  19.99% { fill: var(--nb-yellow); transform: scale(1.05); }
  28.99%, 41.99% { fill: var(--nb-yellow); transform: scale(1); }
  42% { fill: var(--nb-purple); transform: scale(1); }
  47.99% { fill: var(--nb-purple); transform: scale(1.018); }
  53.99% { fill: var(--nb-purple); transform: scale(1.048); }
  54% { fill: var(--nb-purple); transform: scale(1.052); }
  62.99% { fill: var(--nb-purple); transform: scale(1.03); }
  70.99% { fill: var(--nb-purple); transform: scale(1); }
  71%, 100% { fill: var(--nb-black); transform: scale(1); }
}

@keyframes heart-rhythm-light {
  0%, 4.99% { fill: var(--nb-white); transform: scale(1); }
  5% { fill: var(--nb-yellow); transform: scale(1); }
  11.99% { fill: var(--nb-yellow); transform: scale(1.075); }
  12% { fill: var(--nb-yellow); transform: scale(1.0822); }
  19.99% { fill: var(--nb-yellow); transform: scale(1.05); }
  28.99%, 41.99% { fill: var(--nb-yellow); transform: scale(1); }
  42% { fill: var(--nb-purple); transform: scale(1); }
  47.99% { fill: var(--nb-purple); transform: scale(1.018); }
  53.99% { fill: var(--nb-purple); transform: scale(1.048); }
  54% { fill: var(--nb-purple); transform: scale(1.052); }
  62.99% { fill: var(--nb-purple); transform: scale(1.03); }
  70.99% { fill: var(--nb-purple); transform: scale(1); }
  71%, 100% { fill: var(--nb-white); transform: scale(1); }
}

@keyframes heart-colors-dark {
  0%, 4.99% { fill: var(--nb-black); }
  5%, 41.99% { fill: var(--nb-yellow); }
  42%, 70.99% { fill: var(--nb-purple); }
  71%, 100% { fill: var(--nb-black); }
}

@keyframes heart-colors-light {
  0%, 4.99% { fill: var(--nb-white); }
  5%, 41.99% { fill: var(--nb-yellow); }
  42%, 70.99% { fill: var(--nb-purple); }
  71%, 100% { fill: var(--nb-white); }
}

@keyframes logo-star-turn {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(96deg); }
  38% { transform: rotate(430deg); }
  55% { transform: rotate(372deg); }
  69% { transform: rotate(357deg); }
  80% { transform: rotate(362deg); }
  100% { transform: rotate(360deg); }
}

@keyframes logo-heart-tug {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(11px) scale(0.96, 1.08); }
  52% { transform: translateY(16px) scale(0.92, 1.13); }
  76% { transform: translateY(-3px) scale(1.04, 0.97); }
  90% { transform: translateY(1px) scale(0.99, 1.01); }
}

@keyframes logo-heart-turn {
  0% { transform: rotate(0deg); }
  9% { transform: rotate(92deg); }
  39% { transform: rotate(405deg); }
  56% { transform: rotate(369deg); }
  70% { transform: rotate(357deg); }
  81% { transform: rotate(362deg); }
  100% { transform: rotate(360deg); }
}

@keyframes logo-star-counter-turn {
  0% { transform: rotate(0deg); }
  9% { transform: rotate(98deg); }
  40% { transform: rotate(442deg); }
  58% { transform: rotate(369deg); }
  73% { transform: rotate(357deg); }
  100% { transform: rotate(360deg); }
}

@keyframes logo-heart-counter-turn {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-88deg); }
  40% { transform: rotate(-396deg); }
  58% { transform: rotate(-368deg); }
  73% { transform: rotate(-357deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes logo-star-misalign {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  42%, 58% { transform: translate(-7px, 1px) rotate(-4deg); }
  80% { transform: translate(1px, 0) rotate(0.8deg); }
}

@keyframes logo-heart-misalign {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  42%, 58% { transform: translate(6px, 3px) rotate(5deg); }
  80% { transform: translate(-1px, 0) rotate(-1deg); }
}

@keyframes logo-heart-missed-beat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.15); }
  31%, 49% { transform: scale(1); }
  65% { transform: scale(1.075); }
  81% { transform: scale(0.99); }
}

@keyframes paper-tear-underlay {
  0%, 3% {
    clip-path: polygon(49.5% 0, 49% 10%, 50% 24%, 49% 42%, 50% 62%, 49% 80%, 50% 92%, 49.5% 100%, 50.5% 100%, 50% 92%, 51% 80%, 50% 62%, 51% 42%, 50% 24%, 51% 10%, 50.5% 0);
    transform: scale(1);
  }
  24% {
    clip-path: polygon(48% 0, 42% 10%, 28% 24%, 14% 42%, 5% 62%, 18% 80%, 35% 92%, 46% 100%, 56% 100%, 68% 92%, 86% 80%, 95% 62%, 84% 42%, 74% 24%, 58% 10%, 52% 0);
    transform: scale(1.012, 1.008);
  }
  32%, 70% {
    clip-path: polygon(48% 0, 42% 10%, 28% 24%, 14% 42%, 5% 62%, 18% 80%, 35% 92%, 46% 100%, 56% 100%, 68% 92%, 86% 80%, 95% 62%, 84% 42%, 74% 24%, 58% 10%, 52% 0);
    transform: scale(1);
  }
  100% {
    clip-path: polygon(49.5% 0, 49% 10%, 50% 24%, 49% 42%, 50% 62%, 49% 80%, 50% 92%, 49.5% 100%, 50.5% 100%, 50% 92%, 51% 80%, 50% 62%, 51% 42%, 50% 24%, 51% 10%, 50.5% 0);
    transform: scale(1);
  }
}

@keyframes paper-tear-left {
  0%, 3%, 100% {
    clip-path: polygon(0 0, 49.5% 0, 49% 10%, 50% 24%, 49% 42%, 50% 62%, 49% 80%, 50% 92%, 49.5% 100%, 0 100%);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  24% {
    clip-path: polygon(0 0, 48% 0, 42% 10%, 28% 24%, 14% 42%, 5% 62%, 18% 80%, 35% 92%, 46% 100%, 0 100%);
    transform: translate3d(-3px, -2px, 0) rotate(-0.2deg);
  }
  32%, 70% {
    clip-path: polygon(0 0, 48% 0, 42% 10%, 28% 24%, 14% 42%, 5% 62%, 18% 80%, 35% 92%, 46% 100%, 0 100%);
    transform: translate3d(-2px, -1px, 0) rotate(-0.12deg);
  }
}

@keyframes paper-tear-right {
  0%, 3%, 100% {
    clip-path: polygon(50.5% 0, 100% 0, 100% 100%, 50.5% 100%, 50% 92%, 51% 80%, 50% 62%, 51% 42%, 50% 24%, 51% 10%);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  24% {
    clip-path: polygon(52% 0, 100% 0, 100% 100%, 56% 100%, 68% 92%, 86% 80%, 95% 62%, 84% 42%, 74% 24%, 58% 10%);
    transform: translate3d(3px, -2px, 0) rotate(0.2deg);
  }
  32%, 70% {
    clip-path: polygon(52% 0, 100% 0, 100% 100%, 56% 100%, 68% 92%, 86% 80%, 95% 62%, 84% 42%, 74% 24%, 58% 10%);
    transform: translate3d(2px, -1px, 0) rotate(0.12deg);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body:not([data-state="landing"]):not(.overlay-open) {
    height: 100dvh;
    min-height: 100dvh;
    overflow-y: hidden;
    overscroll-behavior-y: none;
  }

  body:not([data-state="landing"]):not(.overlay-open) .gallery-surface {
    height: 100dvh;
    min-height: 0;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .project-view__track {
    position: relative;
    top: var(--project-strip-offset-y, 0px);
  }

  .project-view__intro {
    position: relative;
    justify-content: flex-start;
  }

  .project-view__intro h2,
  .project-view__intro h2.editorial-text {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .project-view__title-zone {
    display: flex;
    flex: 0 0 auto;
    height: var(--project-title-zone-height, 100%);
    flex-direction: column;
    justify-content: center;
  }

  .project-view__intro-main > .project-view__section {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--project-section-gap));
    margin: 0;
  }

  .project-view__intro-secondary {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 100%;
  }
}

/* Center the existing visible artwork, not the transparent canvases.
   Static offsets use the original WebP ink bounds and existing paint scale. */
.gallery-surface > .section-heading {
  justify-content: center;
}

body[data-state="works"] .gallery-surface > .section-heading h2::after {
  right: 50%;
  transform: translate(50.052012%, -50%) scale(1.06);
}

body[data-state="work"] .gallery-surface > .section-heading h2::after {
  right: 50%;
  transform: translate(49.804631%, -50%);
}

@media (max-width: 760px) {
  .heart-stage {
    top: 46%;
    width: clamp(258px, 74vw, 360px);
  }

  .heart-hint__visual {
    top: -132cqw;
    left: -7cqw;
    width: 42cqw;
  }

  .heart-hint__visual--dare {
    top: 8cqw;
    left: 42cqw;
    width: 32cqw;
  }

  body:not([data-state="landing"]) .heart-stage {
    top: calc(env(safe-area-inset-top) + 18px);
    width: 72px;
  }

  .gallery-surface {
    padding-top: 190px;
  }

  .project-grid {
    --gallery-square-size: clamp(78.4px, 23.8vw, 90.3px);
    --gallery-circle-size: clamp(86.1px, 26.18vw, 99.4px);
    --gallery-triangle-size: clamp(102.2px, 30.94vw, 117.6px);
    --gallery-rectangle-size: clamp(98px, 29.54vw, 112.7px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-item,
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3) {
    grid-column: span 1;
    justify-self: start;
    margin-top: 0;
  }

  .gallery-item:first-child {
    grid-column: 1;
  }

  .gallery-item:nth-child(2) {
    grid-column: 2;
    justify-self: end;
    margin-top: 12vw;
  }

  .gallery-item:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 4vw;
  }

  .project-view__track {
    gap: 14vw;
    padding:
      calc(env(safe-area-inset-top) + 68px)
      20px
      calc(env(safe-area-inset-bottom) + 28px);
  }

  .project-view__intro {
    width: calc(100vw - 52px);
    max-width: none;
  }

  .project-view__intro {
    padding-right: 0;
  }

  .project-view__intro h2 {
    font-size: clamp(2.4rem, 13vw, 4.8rem);
  }

  .project-view__intro h2.editorial-text { --editorial-base-size: clamp(2.4rem, 13vw, 4.8rem); }
  .project-view__details-content > :is(.editorial-text, .editorial-richtext) { --editorial-base-size: clamp(0.8rem, 3.35vw, 0.9rem); }

  .project-view__intro-facts {
    margin-top: 28px;
  }

  .project-view__details-content {
    font-size: clamp(0.8rem, 3.35vw, 0.9rem);
    line-height: 1.42;
  }

  .project-view__details-content dl {
    gap: 0.5rem;
    margin-top: 1.2rem;
  }

  .project-view__details-content dl div {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 0.7rem;
  }

  .project-view__media {
    padding-block: 4px;
  }

  .project-view__details-content {
    max-height: min(34dvh, var(--project-info-available-height, 100dvh));
  }

  .project-media__info-content {
    padding: 14px;
    padding-bottom: 58px;
  }

  .project-view__media img {
    max-height: calc(100dvh - 144px);
  }

  .project-view__media--portrait-large {
    width: min(76vw, 430px);
  }

  .project-view__media--portrait-compact {
    width: min(62vw, 350px);
  }

  .project-view__media--portrait {
    width: min(69vw, 390px);
  }

  .project-view__media--square {
    width: min(84vw, 500px);
  }

  .project-view__media--square-compact {
    width: min(72vw, 430px);
  }

  .project-view__media--wide {
    width: min(92vw, 690px);
  }

  .project-view__media--wide-compact {
    width: min(84vw, 590px);
  }

  .project-view__media[data-media-kind="image"],
  .project-view__media[data-media-kind="pdf"] {
    --project-image-height: min(calc(100dvh - 144px), calc(min(76vw, 430px) * 1.5));
  }

  .project-view__media[data-media-kind="file"] {
    --project-video-height: min(calc(100dvh - 144px), calc(min(76vw, 430px) * 1.5));
  }

  .project-view__end {
    width: 8vw;
  }

  .project-video { max-height: calc(100dvh - 144px); }
  .project-video__sound { top: 8px; right: 8px; }
  .booklet-view.is-reader-active {
    gap: 10px;
    padding:
      calc(env(safe-area-inset-top) + 18px)
      18px
      calc(env(safe-area-inset-bottom) + 14px);
  }

  .booklet-controls {
    grid-template-columns: auto auto 1fr;
    gap: 0.45rem 0.75rem;
    font-size: 0.62rem;
  }
}

@media (min-width: 481px) and (max-width: 760px) and (hover: hover) and (pointer: fine) {
  .project-grid {
    --gallery-square-size: clamp(90.3px, calc(15.75vw + 14.7px), 134.4px);
    --gallery-circle-size: clamp(99.4px, calc(17.248vw + 16.59px), 147.7px);
    --gallery-triangle-size: clamp(117.6px, calc(20.503vw + 19.18px), 175px);
    --gallery-rectangle-size: clamp(112.7px, calc(19.747vw + 17.92px), 168px);
  }
}

@media (max-width: 480px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-item,
  .gallery-item:first-child,
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3) {
    grid-column: 1;
  }

  .gallery-item:first-child {
    justify-self: start;
  }

  .gallery-item:nth-child(2) {
    justify-self: end;
  }

  .gallery-item:nth-child(3) {
    justify-self: center;
  }

  .bottom-nav {
    gap: 0.5rem 0.85rem;
    font-size: 0.68rem;
    /* Leave room for the unchanged right-hand air control, also during the intro. */
    max-width: calc(100vw - (2 * var(--page-gutter)) - 6rem);
  }
}

/* Keep the existing footer box as the physics/control reference. Translate
   every link by the same amount so each visible row is viewport-centered. */
.bottom-nav {
  --nav-horizontal-shift: calc(var(--nav-viewport-center, 50vw) - 50% - var(--page-gutter));
  justify-content: center;
  pointer-events: none;
}

.bottom-nav button {
  position: relative;
  left: calc(var(--nav-horizontal-shift) + var(--nav-prefix-shift-x, 0px));
  top: var(--nav-prefix-shift-y, 0px);
  pointer-events: auto;
}

.bottom-nav [data-info="impressum"] {
  left: calc(var(--nav-horizontal-shift) + var(--nav-legal-shift-x, 0px));
  top: 0;
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .heart-stage,
  .gallery-surface {
    transition-duration: 80ms;
  }

  .heart {
    animation: heart-colors-dark 3.288s linear infinite;
    transform: none;
  }

  body[data-state="work"] .heart {
    animation-name: heart-colors-light;
  }

  .star,
  .luft-logo.is-anomalous .star,
  .heart-anomaly,
  .luft-logo.is-anomalous .heart-anomaly,
  .heart.is-resetting,
  body[data-state="work"] .heart.is-resetting {
    animation: none;
    transform: none;
  }

  .world-leak {
    display: none;
  }

  .gallery-item {
    transform: none;
    will-change: auto;
  }

  .brush-cursor {
    transition: none;
  }

  .project-media__info,
  .project-view__details {
    transition: none;
  }

}

body:not([data-state="landing"]) .heart {
  fill: var(--heart-rest);
  transform: none;
  animation: none;
}