/* =========================================================================
   LAYOUT — Hero, Werkverzeichnis, Case Studies, Approach, Studio, Footer
   ========================================================================= */

/* ========================================================== 01 · HERO ==== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--bg-void);
  overflow: hidden;
  isolation: isolate;
}

/* Statische Fassung der LED-Wand. Bleibt als Unterlage liegen: fällt WebGL
   aus oder ist prefers-reduced-motion gesetzt, ist das die fertige Wand.
   Waagerechte Lichtbänder mit heißem Kern, senkrecht in Segmente zerlegt,
   die Fugen nicht ganz dunkel — so verhält sich Makrolon vor einer LED-Bar. */
.led-wall {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: repeating-linear-gradient(
      to bottom,
      rgb(255 138 42 / 0) 0 11px,
      rgb(255 138 42 / 0.75) 11px 16px,
      rgb(255 216 168 / 0.92) 16px 20px,
      rgb(255 138 42 / 0.6) 20px 25px,
      rgb(255 138 42 / 0) 25px 38px
    ),
    repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0) 0 116px,
      rgb(255 255 255 / 0.3) 116px 132px,
      rgb(255 255 255 / 0) 132px 268px
    );
  -webkit-mask-image: repeating-linear-gradient(
      to right,
      #000 0 26px,
      rgb(0 0 0 / 0.42) 26px 31px
    ),
    radial-gradient(74% 62% at 68% 42%, #000 0%, rgb(0 0 0 / 0.72) 46%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(to right, #000 0 26px, rgb(0 0 0 / 0.42) 26px 31px),
    radial-gradient(74% 62% at 68% 42%, #000 0%, rgb(0 0 0 / 0.72) 46%, transparent 84%);
  mask-composite: intersect;
  filter: blur(5px) saturate(1.1);
  opacity: 0.72;
}

/* Der WebGL-Kanal legt sich darüber, sobald er das erste Bild hat. */
.led-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-3) linear;
}

.led-canvas.is-live {
  opacity: 1;
}

/* Scrim: hält den Text bei jeder Breite lesbar und lässt das Licht von
   rechts kommen, statt gleichmäßig über der ganzen Fläche zu liegen. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgb(5 5 5 / 0.94) 0%,
    rgb(5 5 5 / 0.82) 26%,
    rgb(5 5 5 / 0.34) 58%,
    transparent 82%
  );
  pointer-events: none;
}

/* Auf dem Telefon liegt das Licht im oberen Drittel und die Wortmarke
   darunter auf Schwarz — sonst stünden beide übereinander. */
@media (max-width: 43.75rem) {
  .hero::before {
    background: linear-gradient(
      to bottom,
      rgb(5 5 5 / 0.18) 0%,
      rgb(5 5 5 / 0.42) 28%,
      rgb(5 5 5 / 0.90) 50%,
      rgb(5 5 5 / 0.94) 100%
    );
  }
}

.hero__inner {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 100%;
  padding-block: var(--sp-7) var(--sp-6);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--fg);
  margin-left: -0.06em;
}

.wordmark span {
  display: block;
}

.hero__meta {
  margin-top: clamp(var(--sp-4), 5vw, var(--sp-6));
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
}

.hero__foot {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  padding-block: var(--sp-2) var(--sp-4);
  border-top: var(--hair) solid var(--line-soft);
}

@media (max-width: 56.25rem) {
  .hero__foot {
    padding-bottom: 4.5rem;
  }
}

/* ========================================================= 02 · INDEX ==== */
/* Werkverzeichnis. Doppelt als Navigation: Hover färbt die Lichtleiste. */

.index {
  padding-block: var(--sp-7);
}

.index__list {
  border-top: var(--hair) solid var(--line);
}

.index__item a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: clamp(0.85rem, 1.8vw, 1.45rem);
  border-bottom: var(--hair) solid var(--line);
  transition: padding-left var(--dur-2) var(--ease-out);
}

.index__item a:hover,
.index__item a:focus-visible {
  padding-left: 1.25rem;
}

.index__num,
.index__year {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}

.index__year {
  white-space: nowrap;
}

.index__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

/* ======================================================= 03 · PLATES ==== */
/* Leuchtende Leerstelle statt grauer Kasten. Dieselbe Lichtlogik wie die
   Wand, in der Lichtfarbe des jeweiligen Werks, mit der Beschriftung
   dessen, was hier hingehört. */

.plate {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-void);
  border: var(--hair) solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

.plate::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 9px,
      var(--light) 9px 14px,
      rgb(255 255 255 / 0.5) 14px 17px,
      var(--light) 17px 21px,
      transparent 21px 32px
    ),
    repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0) 0 96px,
      rgb(255 255 255 / 0.22) 96px 112px,
      rgb(255 255 255 / 0) 112px 224px
    );
  -webkit-mask-image: repeating-linear-gradient(
      to right,
      #000 0 22px,
      rgb(0 0 0 / 0.4) 22px 27px
    ),
    radial-gradient(86% 76% at 50% 46%, #000 4%, rgb(0 0 0 / 0.6) 48%, transparent 88%);
  -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(to right, #000 0 22px, rgb(0 0 0 / 0.4) 22px 27px),
    radial-gradient(86% 76% at 50% 46%, #000 4%, rgb(0 0 0 / 0.6) 48%, transparent 88%);
  mask-composite: intersect;
  filter: blur(4px) saturate(1.05);
  opacity: 0.5;
}

/* Damit die Beschriftung auf dem Licht lesbar bleibt. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(5 5 5 / 0.82) 0%, transparent 38%);
  pointer-events: none;
}

.plate__label {
  position: absolute;
  z-index: 2;
  left: clamp(0.85rem, 2vw, 1.5rem);
  bottom: clamp(0.85rem, 2vw, 1.5rem);
  right: clamp(0.85rem, 2vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.plate--tall { aspect-ratio: 4 / 5; }
.plate--wide { aspect-ratio: 16 / 9; }
.plate--square { aspect-ratio: 1 / 1; }
.plate--full { aspect-ratio: 3 / 2; }

@media (max-width: 43.75rem) {
  .plate--full,
  .plate--wide {
    aspect-ratio: 4 / 3;
  }
}

/* ======================================================== 04 · WERKE ==== */

.work {
  padding-block: var(--sp-7);
  scroll-margin-top: var(--sp-4);
}

.work--amber { --light: var(--light-amber); }
.work--blue { --light: var(--light-blue); }
.work--white { --light: var(--light-white); }
.work--magenta { --light: var(--light-magenta); }

.work__stage {
  margin-bottom: clamp(var(--sp-4), 5vw, var(--sp-6));
}

/* Das Leitbild einer Sektion wird nie höher als der Bildschirm — sonst
   sieht man nur noch Licht und verliert die Komposition. */
.work__stage .plate {
  aspect-ratio: auto;
  height: min(74svh, 62vw);
}

@media (max-width: 43.75rem) {
  .work__stage .plate {
    height: min(52svh, 96vw);
  }
}

/* Detailbilder treten zurück: Hierarchie Vollbild → Detail. */
.work__detail .plate::before {
  opacity: 0.26;
}

/* Zwei Spalten: links die Mono-Angaben wie im Programm-Poster,
   rechts Titel und Text. */
.work__head {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.work__idx {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  padding-top: 0.75rem;
  border-top: var(--hair) solid var(--line);
}

.work__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  padding-top: 0.5rem;
  border-top: var(--hair) solid var(--line);
  margin-left: -0.04em;
}

.work__meta {
  margin-top: var(--sp-4);
  padding-top: 0.75rem;
  border-top: var(--hair) solid var(--line-soft);
  max-width: 52rem;
}

.work__text {
  margin-top: var(--sp-4);
}

.work__credits {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2.5rem;
}

.work__detail {
  margin-top: clamp(var(--sp-4), 6vw, var(--sp-7));
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--sp-4);
}

.work__detail .plate { grid-column: 3 / 9; }
.work__detail--right .plate { grid-column: 6 / 12; }

@media (max-width: 56.25rem) {
  .work__head {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .work__idx {
    border-top: 0;
    padding-top: 0;
  }

  .work__detail {
    grid-template-columns: 1fr;
  }

  .work__detail .plate,
  .work__detail--right .plate {
    grid-column: 1 / -1;
  }
}

/* ==================================================== 05 · TRIPTYCHON ==== */
/* Refraction · Gleam · Veer — die drei Installationen der Ausstellung 2023.
   pin() aus assets/shared/scroll.js schiebt die Reihe waagerecht, solange
   der Schirm breit genug ist. Darunter, ohne JS und bei reduced-motion
   bleibt es ein normaler Scroll-Container mit Snap. */

.triptych {
  margin-top: clamp(var(--sp-4), 6vw, var(--sp-7));
}

.triptych__hint {
  margin-bottom: var(--sp-3);
}

/* Spaltenbreite ist in beiden Zuständen gleich: pin() misst den Scrollweg
   im ungepinnten Zustand aus. Änderte sich die Breite beim Pinnen, würde
   die Reihe zu weit oder zu kurz laufen. */
.triptych__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74vw, 42rem);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior-x: contain;
}

.triptych__track::-webkit-scrollbar { height: 2px; }
.triptych__track::-webkit-scrollbar-thumb { background: var(--line); }

/* Im gepinnten Zustand übernimmt scroll.js die Verschiebung. */
[data-pinwrap][data-pin="on"] .triptych__track {
  overflow: visible;
  scroll-snap-type: none;
  align-content: center;
  height: 100svh;
  padding-block: var(--sp-6);
}

[data-pinwrap][data-pin="on"] .triptych__hint {
  display: none;
}

[data-pinwrap][data-pin="on"] .sub .plate {
  height: min(44svh, 30vw);
  aspect-ratio: auto;
}

.sub {
  scroll-snap-align: start;
}

.sub__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin-top: var(--sp-2);
}

.sub__meta {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: var(--hair) solid var(--line-soft);
}

.sub__text {
  margin-top: var(--sp-2);
  color: var(--fg-dim);
  font-size: var(--step--1);
}

/* Das Programm der Ausstellung — Mono-Spalten wie auf dem Poster 2023. */
.programme {
  margin-top: clamp(var(--sp-4), 6vw, var(--sp-6));
  border-top: var(--hair) solid var(--line);
  padding-top: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-4);
}

.programme dt {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.programme dd {
  margin: 0.35rem 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.programme dd small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 0.2rem;
}

/* ===================================================== 06 · APPROACH ==== */

.approach {
  padding-block: var(--sp-8) var(--sp-7);
  --light: var(--light-white);
}

.approach__item {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: clamp(var(--sp-4), 7vw, var(--sp-7));
  border-top: var(--hair) solid var(--line);
  align-items: start;
}

.approach__q {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.approach__q cite {
  display: block;
  margin-top: var(--sp-2);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.approach__note {
  margin-top: var(--sp-2);
  max-width: var(--measure);
  color: var(--fg-dim);
}

@media (max-width: 56.25rem) {
  .approach__item {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* ======================================================= 07 · STUDIO ==== */

.studio {
  padding-block: var(--sp-7);
}

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-6);
}

.person__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.person__role {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: var(--hair) solid var(--line-soft);
}

.person__text {
  margin-top: var(--sp-2);
  color: var(--fg-dim);
  font-size: var(--step--1);
}

.commission {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--line);
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--sp-4);
}

.commission__link {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  border-bottom: var(--hair) solid var(--line);
  display: inline-block;
  padding-bottom: 0.15em;
  transition: border-color var(--dur-1) var(--ease-out);
}

.commission__link:hover {
  border-color: var(--fg);
}

@media (max-width: 56.25rem) {
  .commission {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
}

/* ======================================================== 08 · PRESS ==== */

.press {
  padding-block: var(--sp-6);
}

.press__item {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-top: var(--hair) solid var(--line);
  transition: padding-left var(--dur-2) var(--ease-out);
}

.press__item:hover {
  padding-left: 1rem;
}

.press__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 300;
  letter-spacing: -0.015em;
}

@media (max-width: 56.25rem) {
  .press__item {
    grid-template-columns: 1fr auto;
  }

  .press__item .mono:first-child {
    grid-column: 1 / -1;
  }
}

/* ======================================================= 09 · FOOTER ==== */

.footer {
  padding-block: var(--sp-7) var(--sp-6);
  border-top: var(--hair) solid var(--line);
  --light: var(--light-amber);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-6) var(--sp-4);
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: var(--sp-2);
}

.footer li + li {
  margin-top: 0.45rem;
}

.footer__grid a {
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}

.footer__grid a:hover {
  border-color: var(--line);
}

.footer__addr {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}

.footer__mark {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  margin-top: var(--sp-7);
  color: var(--fg-ghost);
}

.legal {
  margin-top: var(--sp-6);
  border-top: var(--hair) solid var(--line-soft);
  padding-top: var(--sp-4);
}

.legal details + details {
  margin-top: var(--sp-2);
}

.legal summary {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  padding-block: 0.5rem;
  border-bottom: var(--hair) solid var(--line-soft);
  list-style: none;
}

.legal summary::-webkit-details-marker { display: none; }
.legal summary::before { content: "+ "; }
.legal details[open] summary::before { content: "– "; }

.legal__body {
  padding-block: var(--sp-2) var(--sp-4);
  max-width: 44rem;
  font-size: var(--step--1);
  color: var(--fg-dim);
}

.legal__body p + p {
  margin-top: var(--sp-2);
}

.colophon {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
}

@media (max-width: 56.25rem) {
  .footer {
    padding-bottom: 5.5rem;
  }
}