/* ============================================================================
   ADAPTYV x NIMMERSATT, arrow version
   Poster grotesk + diagonal block arrows on white. See DESIGN.md.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --ink: #1c1c1c;
  --muted: #5f5f5f;
  --line: #e7e7e7;
  --tint: #f5f5f3;

  --orange: #ff8a10;
  --teal: #00846f;
  --blue: #7c97cd;
  --red: #ff0038;

  /* One family for all page text. IBM Plex Mono is loaded for the protein engine's ASCII atlas only.
     The cyan protein tones live inside the engine's drawings, never in page CSS. */
  --font: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  --track: -0.055em;

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;
  --gutter: 32px;

  /* Air. The page breathes between sections, a chapter break is wider still (DESIGN.md, "Abstand und Raster"). */
  --gap-section: clamp(192px, 16vw, 240px);       /* between sections and between directions */
  --gap-chapter: clamp(256px, 22vw, 352px);       /* before "Next course." and before the credits */
  --gap-title-lead: clamp(24px, 2.2vw, 32px);     /* headline to its lead */
  --gap-lead-content: clamp(64px, 6.6vw, 96px);   /* lead to the content it introduces */
  --gap-block: clamp(96px, 9vw, 128px);           /* a demonstration to the deck that backs it up */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.83, 0, 0.17, 1);

  --fs-display: clamp(56px, 10.4vw, 184px);
  --fs-chapter: clamp(56px, 8.4vw, 144px);        /* "Next course.": a lighter chapter, one step below the display size */
  --fs-dir: clamp(48px, 6.2vw, 108px);            /* direction words inside the chapter */
  --fs-h3: clamp(26px, 2.6vw, 40px);
  --fs-about: clamp(44px, 7.4vw, 132px);
  --fs-lead: clamp(20px, 1.9vw, 28px);
  --fs-statement: clamp(22px, 2vw, 30px);         /* the one-line idea of a direction */
  --fs-body: 18px;
  --fs-small: 15px;
}

/* Phones: the type scale steps down, the hierarchy stays (h2 40 to 48, direction words 40, lead 17, body 16, smallest 14). */
@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --gap-section: 112px;
    --gap-chapter: 160px;
    --gap-title-lead: 24px;
    --gap-lead-content: 48px;
    --gap-block: 64px;
    --fs-display: clamp(40px, 12vw, 48px);
    --fs-chapter: clamp(40px, 12vw, 48px);
    --fs-dir: clamp(32px, 10.2vw, 40px);
    --fs-h3: 24px;
    --fs-about: clamp(24px, 7.6vw, 30px);
    --fs-lead: 17px;
    --fs-statement: 17px;
    --fs-body: 16px;
    --fs-small: 14px;
  }
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

html.is-intro body { overflow: hidden; }

/* Drifting rows and words may leave the screen sideways; the page never scrolls sideways. */
main { overflow-x: clip; }

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Sections that receive focus from the skip link or a nav anchor are not controls. */
main:focus, section[tabindex="-1"]:focus, #top:focus { outline: none; }

/* Focus over video or images: a two-tone ring (ink and white) that reads on black clips and light posters.
   .on-media-fill is for an element that covers its media (ring drawn inside), .on-media for a chip or button on it. */
.on-media-fill:focus-visible,
.stackhit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 9px var(--ink);
}
.on-media:focus-visible,
.refcredit:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #fff;
}

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: -80px;
  z-index: 20000;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--gutter); }

.shell {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Air between sections is a margin on the section that follows. Sections carry no padding of their own. */
main > section { margin-top: var(--gap-section); }
main > section.hero { margin-top: 0; }
main > section.next { margin-top: var(--gap-chapter); }   /* chapter break: the second line starts */
/* Closing: the chapter break before "Still hungry.", the same size as the break the closing used to get from the section
   before it. The chapter break, plus the room the credit line left behind at the foot of "Next course." (its block gap and
   its line), plus rest space on desktop, so the closing starts clear of the Motion deck's rest. Phones keep their earlier
   rhythm (the credit line is 18 px there). */
main > section.closing { margin-top: calc(var(--gap-chapter) + var(--gap-block) + 18px); }
@media (min-width: 761px) {
  main > section.closing { margin-top: calc(var(--gap-chapter) + var(--gap-block) + 150px); }   /* 21 px credit line, 129 px rest */
}

/* --- Arrow ----------------------------------------------------------------
   One square, clipped to the reference's arrow. The base points up-left (nw);
   data-dir rotates it. Three layers, one motion controller each:
   .arw (position, scroll, reveal) > .arw__rot (aim) > .arw__shape (jab). */
.arw {
  --c: var(--ink);
  --dir: 0deg;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  vertical-align: baseline;
  pointer-events: none;
}
.arw[data-dir="ne"] { --dir: 90deg; }
.arw[data-dir="se"] { --dir: 180deg; }
.arw[data-dir="sw"] { --dir: 270deg; }

.arw__rot {
  position: absolute;
  inset: 0;
  transform: rotate(var(--dir));
}

.arw__shape {
  position: absolute;
  inset: 0;
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 40%, 100% 70%, 70% 100%, 40% 70%, 40% 100%, 0 100%);
}

.arw--orange { --c: var(--orange); }
.arw--teal   { --c: var(--teal); }
.arw--blue   { --c: var(--blue); }
.arw--red    { --c: var(--red); }
.arw--ink    { --c: var(--ink); }

/* Idle jab: a short push in the pointing direction, then settle. */
@keyframes jab {
  0%, 70%, 100% { transform: translate(0, 0); }
  78% { transform: translate(-14%, -14%); }
  86% { transform: translate(4%, 4%); }
  92% { transform: translate(-2%, -2%); }
}
.is-live .poster__arw .arw__shape,
.is-live .sh__arw.is-in .arw__shape,
.is-live .about__arw.is-in .arw__shape,
.is-live .dir__arw.is-in .arw__shape {
  animation: jab 3.4s var(--ease-out) infinite;
  animation-delay: var(--jab-delay, 0s);
}
.poster__arw[data-slot="b"] { --jab-delay: 0.85s; }
.poster__arw[data-slot="c"] { --jab-delay: 1.7s; }
.poster__arw[data-slot="d"] { --jab-delay: 2.55s; }

html.is-paused *, html.is-paused *::before, html.is-paused *::after {
  animation-play-state: paused !important;
}

/* --- Raupe ------------------------------------------------------------------
   The Nimmersatt caterpillar (logo.svg) as a flat silhouette, same grammar as
   the arrows: height = cap height. Layers: .raupe (position, GSAP) >
   .raupe__flip (travel + facing, JS) > .raupe__body (crawl squash, CSS). */
.raupe {
  --c: var(--ink);
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.72em;
  aspect-ratio: 2930 / 2060;
  vertical-align: baseline;
  pointer-events: none;
}
.raupe__flip { position: absolute; inset: 0; }
.raupe--orange { --c: var(--orange); }
.raupe--teal   { --c: var(--teal); }
.raupe--blue   { --c: var(--blue); }
.raupe--red    { --c: var(--red); }
.raupe__body {
  position: absolute;
  inset: 0;
  background: var(--c);
  -webkit-mask: url("../assets/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo.svg") center / contain no-repeat;
  transform-origin: 40% 100%;
}
@keyframes crawl {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(0.84, 1.1) translateX(5%); }
  62% { transform: scale(1.07, 0.94) translateX(-3%); }
}
.raupe.is-crawling .raupe__body { animation: crawl 0.72s ease-in-out infinite; }
@media (hover: hover) {
  .nav__brand:hover .nav__mark { animation: crawl 0.72s ease-in-out infinite; transform-origin: 40% 100%; }
}

/* --- Intro ------------------------------------------------------------------ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  place-items: center;
  align-content: center;
  gap: var(--s5);
  background: var(--paper);
  cursor: pointer;
}
html.is-intro .intro { display: grid; }

.intro__stage {
  --cell: min(17vmin, 150px);
  position: relative;
  width: calc(var(--cell) * 3.4);
  height: calc(var(--cell) * 3.4);
  font-size: calc(var(--cell) / 0.72);
}

.intro__media {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cell) * 2.5);
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.intro__arw { position: absolute; }
.intro__arw--tl { left: 0; top: 0; }
.intro__arw--tr { right: 0; top: 0; }
.intro__arw--br { right: 0; bottom: 0; }
.intro__arw--bl { left: 0; bottom: 0; }

@keyframes intro-jab {
  0%, 40%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-22%, -22%); }
  24% { transform: translate(5%, 5%); }
}
.intro__arw .arw__shape { animation: intro-jab 1.2s var(--ease-out) infinite; }
.intro__arw--tr .arw__shape { animation-delay: 0.3s; }
.intro__arw--br .arw__shape { animation-delay: 0.6s; }
.intro__arw--bl .arw__shape { animation-delay: 0.9s; }
.intro.is-leaving .arw__shape { animation: none; }

.intro__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.intro__logo { height: 24px; width: auto; }
/* The wordmark is a span so js/fx.js can assemble it from cells; the img inside is the fallback. */
.intro__logo--adaptyv { display: inline-block; position: relative; height: 26px; }
.intro__logo--adaptyv img { display: block; height: 100%; width: auto; }

/* --- Header ----------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: 64px;
  padding: 0 var(--gutter);
  background: var(--paper);
  transform: translateY(-101%);
  transition: transform 0.55s var(--ease-out);
}
.nav.is-stuck,
.nav:focus-within { transform: none; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
}
.nav__mark { width: 34px; height: auto; }
.nav__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.nav__x {
  margin: 0 2px;
  font-size: 18px;
  font-weight: 700;
}
.nav__adaptyv { height: 20px; width: auto; }
.nav__adaptyv-mark { display: none; height: 24px; width: auto; }
@media (max-width: 980px) {
  .nav__adaptyv { display: none; }
  .nav__adaptyv-mark { display: block; }
}
/* "Bio" after the wordmark (after the mark on tablets). Its letters match the wordmark: #142933 in assets/adaptyv/logo.svg,
   the blue belongs to the mark only. Size: the wordmark x-height (about 10.4 px at 20 px high). On phones the header shows
   the mark and "Bio" a little smaller; below 360 px there is no room beside the menu toggle, so it is left out there. */
.nav__bio {
  position: relative;
  top: -2px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #142933;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .nav__bio { font-size: 17px; top: -1px; }
}
@media (max-width: 359px) {
  .nav__bio { display: none; }
}

.nav__links {
  display: flex;
  gap: var(--s5);
}
.nav__links a {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: var(--s2) 0;
}
.nav__links a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 40%, 100% 70%, 70% 100%, 40% 70%, 40% 100%, 0 100%);
  transform: rotate(180deg) scale(0);
  transition: transform 0.4s var(--ease-out);
}
.nav__links a.is-active::before { transform: rotate(90deg) scale(1); }
@media (hover: hover) {
  .nav__links a:hover::before { transform: rotate(90deg) scale(1); }
}

.nav__motion {
  align-self: center;
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
@media (hover: hover) {
  .nav__motion:hover { background: var(--ink); color: var(--paper); }
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.nav__toggle-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}
.nav__toggle-bar:first-child { top: 16px; }
.nav__toggle-bar:last-child { top: 25px; }
.nav.is-open .nav__toggle-bar:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Three links and the pause switch fit down to a tablet; on phones the menu takes over. */
@media (max-width: 760px) {
  .nav { height: 56px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--paper);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.45s var(--ease-out), visibility 0s linear 0.45s;
  }
  .nav.is-open .nav__links {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.45s var(--ease-out), visibility 0s linear 0s;
  }
  .nav__links a {
    font-size: 32px;
    letter-spacing: var(--track);
    line-height: 1;
    padding: var(--s2) 0 var(--s2) 36px;
  }
  .nav__links a::before {
    left: 0;
    width: 22px;
    height: 22px;
    margin-top: -12px;
    transform: rotate(90deg) scale(1);
    background: var(--ink);
  }
  .nav__links a.is-active::before { background: var(--orange); }
  .nav__motion { align-self: flex-start; margin-top: var(--s3); min-height: 44px; font-size: 15px; }
}

/* Touch targets: 44 px tall on touch screens and phones. Same look, the box is taller. */
@media (pointer: coarse), (max-width: 760px) {
  .nav__brand { min-height: 44px; }
}

/* --- Hero poster ----------------------------------------------------------- */
.hero { padding-top: var(--s6); }

.hero__stage {
  container-type: inline-size;
  padding: 0 var(--gutter);
  min-height: calc(100vh - var(--s6));
  min-height: calc(100svh - var(--s6));
  display: grid;
  align-content: center;
  justify-content: center;
}

/* Rows are flex lines; arrow size equals cap height (0.72em). The JS fitter
   refines --poster-fs so the widest row fills the stage. */
.poster {
  --u: 0.72em;
  --gap: 0.07em;
  --i1: 0.42em;
  --i2: 2.22em;
  --i3: -0.37em;                               /* align the second name with Adaptyv; the arrow remains to its left */
  margin: 0;
  display: inline-grid;
  row-gap: var(--gap);
  font-size: var(--poster-fs, min(calc(100cqi / 6.7), calc((100svh - 150px) / 3.2)));
  font-weight: 700;
  letter-spacing: var(--track);
  line-height: 1;
  white-space: nowrap;
}

@supports not (font-size: 1cqi) {
  .poster { font-size: var(--poster-fs, min(calc((100vw - 2 * var(--gutter)) / 6.7), calc((100vh - 150px) / 3.2))); }
}

.poster__row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  height: var(--u);
}
.poster__row--1 { padding-left: var(--i1); }
.poster__row--2 { padding-left: var(--i2); }
.poster__row--3 { padding-left: var(--i3); }
.poster__arw--end { margin-left: auto; }
.poster__raupe { margin-left: auto; }

/* Adaptyv logomark: same block size as the arrows, turns in 120° steps
   (the mark has three-fold symmetry, so every stop is the logo again). */
.poster__mark {
  display: block;
  flex: 0 0 auto;
  width: var(--u);
  height: var(--u);
  margin-left: auto;
}
.poster__mark-img { display: block; width: 100%; height: 100%; }
@keyframes tri-turn {
  0%, 22% { transform: rotate(0deg); }
  33.33%, 55% { transform: rotate(120deg); }
  66.66%, 88% { transform: rotate(240deg); }
  100% { transform: rotate(360deg); }
}
/* Only the fallback image turns by itself; the dot-field mark (js/fx.js) rotates its own cells (data-fx-rotate). */
.is-live .poster__mark:not(.is-fx-ready) .poster__mark-img { animation: tri-turn 7.5s var(--ease-io) infinite; }
html.is-intro .poster__mark { opacity: 0; }
html.is-intro .poster__raupe { opacity: 0; }
.poster__row--2 .poster__arw { margin-left: 0.04em; }

.poster__word {
  display: block;
  /* Cap top sits on the row top; padding keeps descenders inside the mask. */
  margin-top: -0.155em;
  padding: 0 0.04em 0.16em 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .hero { padding-top: var(--s5); }
  .hero__stage { min-height: 0; padding-top: var(--s6); padding-bottom: var(--s6); }
  .poster {
    --i1: 0em;
    --i2: 1.18em;
    --i3: -0.37em;
    font-size: var(--poster-fs, calc(100cqi / 5.8));
  }
  @supports not (font-size: 1cqi) {
    .poster { font-size: var(--poster-fs, calc((100vw - 2 * var(--gutter)) / 5.8)); }
  }
}

/* Split characters (poster, direction titles). */
.ch {
  display: inline-block;
  will-change: transform;
}
html.is-intro .poster .ch,
html.is-intro .poster__arw { opacity: 0; }

.hero__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s5);
  align-items: center;
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--s8) var(--gutter) 0;
}
.hero__sub {
  grid-column: 1 / span 7;
  margin: 0;
  font-size: clamp(24px, 2.7vw, 44px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: pretty;     /* fallback */
  text-wrap: balance;    /* no single word alone on the last line at phone widths */
}
.hero__sub em {
  font-style: normal;
  background: linear-gradient(var(--orange), var(--orange)) 0 88% / 100% 0.14em no-repeat;
}
.hero__mark {
  grid-column: 9 / span 4;
  width: 100%;
  justify-self: end;
}

@media (max-width: 760px) {
  .hero__intro {
    grid-template-columns: 1fr;
    gap: var(--s6);
    padding-top: var(--s5);
    padding-bottom: 0;
  }
  .hero__sub, .hero__mark { grid-column: 1; }
  .hero__sub { font-size: 20px; line-height: 1.3; }
  .hero__mark { width: 72%; justify-self: center; }
}

/* --- Section headlines ------------------------------------------------------ */
.sh, .closing__title {
  margin: 0 0 var(--gap-title-lead);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--track);
  line-height: 0.86;
}
.sh__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.sh__line > span { display: inline-block; }
.sh__line--step { padding-left: 0.9em; padding-right: 0.16em; }     /* room for the arrow tip: the line mask (overflow hidden) cut its right edge flat */
.sh__arw { margin-right: 0.12em; }
.sh__arw--after { margin: 0 0 0 0.12em; }

@media (max-width: 760px) {
  .sh__line--step { padding-left: 0.5em; }
}
/* Chapter title: the same grammar, one step lighter than the display size. */
.sh--chapter { font-size: var(--fs-chapter); }

.lead {
  max-width: 38ch;
  margin: 0 0 var(--gap-lead-content);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.lead strong { font-weight: 700; }

/* Generic reveal (CSS-driven, IntersectionObserver adds .is-visible). */
html.js:not(.is-static) [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js:not(.is-static) [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- About ---------------------------------------------------------------- */
.about__lead {
  margin: 0 0 var(--gap-lead-content);
  font-size: var(--fs-about);
  font-weight: 700;
  letter-spacing: var(--track);
  line-height: 0.9;
}
.about__line { display: block; }
.about__line:nth-child(2) { padding-left: 0.9em; }
.about__line:nth-child(3) { padding-left: 0.3em; }
.about__arw { margin-left: 0.14em; }
.w { display: inline; }
html:not(.is-static) .about__lead .w { opacity: 0.5; }

/* The role sits under the address, in ink and at reading size, so it is never a stray label. */
.about__emailrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  padding-left: calc(var(--fs-about) * 1.2);
}
.about__email {
  font-size: clamp(28px, 3.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.045em;
  text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 4px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
@media (hover: hover) {
  .about__email:hover { background-size: 0% 4px; background-position: 100% 100%; }
}
.about__emailrole { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }

@media (max-width: 760px) {
  .about__line { display: inline; }
  .about__line:nth-child(2), .about__line:nth-child(3) { padding-left: 0; }
  .about__line + .about__line::before { content: " "; }
  .about__emailrow { padding-left: 0; }
  .about__email { font-size: clamp(20px, 6.2vw, 26px); }
  .about__emailrole { font-size: 14px; }
}

/* Touch target: the address is 44 px tall. The 3 px negative margins keep the rest of the column where it was, and the
   underline keeps its place (3 px above the box bottom). */
@media (pointer: coarse), (max-width: 760px) {
  .about__email { min-height: 44px; display: flex; align-items: center; margin-block: -3px; background-position: 0 calc(100% - 3px); }
}

/* --- Concepts / directions ------------------------------------------------ */
.dir { --c: var(--ink); }
.dir + .dir { margin-top: var(--gap-section); }
.dir[data-color="teal"] { --c: var(--teal); }
.dir[data-color="blue"] { --c: var(--blue); }
.dir[data-color="red"] { --c: var(--red); }

.dir__title {
  display: flex;
  align-items: flex-start;
  gap: 0.07em;
  margin: 0;
  font-size: var(--fs-dir);
  font-weight: 700;
  letter-spacing: var(--track);
  line-height: 1;
  white-space: nowrap;
}
.dir__word {
  display: block;
  margin-top: -0.155em;
  padding: 0 0.08em 0.16em 0;
  margin-bottom: -0.16em;
  overflow: hidden;
}
.dir__head { margin-bottom: var(--gap-lead-content); }
.dir__head .dir__title { margin-bottom: var(--gap-title-lead); }

/* Reference deck (restyled). Cards are Instagram
   references, built from assets/data/refs.json (js/sections.js). */
.conceptstack { margin-bottom: var(--s7); }
.conceptstack__deck {
  position: relative;
  height: clamp(260px, 36vw, 520px);
  background: var(--tint);
  overflow: hidden;
}
.conceptstack__card {
  position: absolute;
  top: 50%;
  left: 0;
  height: 90%;
  width: 300px;
  margin: 0;
  background: var(--tint);
  overflow: hidden;
  cursor: pointer;
  transform: translate(0, -50%);
  transition: transform 0.44s var(--ease-out), width 0.44s var(--ease-out),
    height 0.44s var(--ease-out), opacity 0.34s var(--ease-out);
  will-change: transform, width;
  backface-visibility: hidden;
}
.conceptstack__card img,
.conceptstack__card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.conceptstack__card--vid::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 40%, 100% 70%, 70% 100%, 40% 70%, 40% 100%, 0 100%);
  transform: rotate(90deg) scale(0);
  transition: transform 0.4s var(--ease-out);
  z-index: 2;
}
.conceptstack__card--vid.is-open::after { transform: rotate(90deg) scale(1); }

.conceptstack__bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
}
.stackbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 0;
  background: var(--tint);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.stackbtn__arw { font-size: 22px; }
@media (hover: hover) {
  .stackbtn:hover { background: var(--c); color: var(--paper); }
  .stackbtn:hover .arw { --c: var(--paper); }
  .stackbtn:hover .arw__shape { animation: jab 0.9s var(--ease-out) 1; }
}
.conceptstack__count {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.conceptstack__count [data-stack-index] { color: var(--ink); }

@media (max-width: 760px) {
  .conceptstack__deck { height: calc((100vw - 2 * var(--gutter)) * 0.5625); transition: height 0.4s var(--ease-out); }
  .stackbtn { padding: 0 12px; }
}

/* Soft fullscreen lightbox for the deck. */
html.cc-lightbox-open { overflow: hidden; }
.cc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 6vw, 80px);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.34s var(--ease-out), visibility 0s linear 0.34s;
}
.cc-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cc-lightbox.is-plate { background: rgba(255, 255, 255, 0.97); }
.cc-lightbox__img,
.cc-lightbox__vid {
  max-width: min(78vw, 1200px);
  max-height: min(80vh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.92) translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.cc-lightbox__vid { display: none; background: #000; }
.cc-lightbox.is-open .cc-lightbox__img,
.cc-lightbox.is-open .cc-lightbox__vid { transform: none; opacity: 1; }
.cc-lightbox__close {
  position: fixed;
  top: var(--s4);
  right: var(--s4);
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
@media (hover: hover) {
  .cc-lightbox__close:hover { background: var(--red); }
}

/* Instagram embed: an iframe, created on open and removed on close (main.js).
   About 400 x 700 at most, shrinks with the screen. The caption sits under it. */
.cc-lightbox__embed {
  --embed-h: max(320px, min(700px, calc(100vh - 232px)));
  display: none;
  width: min(calc(var(--embed-h) * 4 / 7), 92vw);
  height: var(--embed-h);
  background: var(--paper);
  transform: scale(0.92) translateY(24px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
@supports (height: 100svh) {
  .cc-lightbox__embed { --embed-h: max(320px, min(700px, calc(100svh - 232px))); }
}
.cc-lightbox.is-embed .cc-lightbox__embed { display: block; }
.cc-lightbox.is-open .cc-lightbox__embed { transform: none; opacity: 1; }
.cc-lightbox__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.cc-lightbox.is-embed {
  justify-content: center;
  align-content: center;
  grid-auto-rows: max-content;
  row-gap: var(--s3);
}
@media (max-width: 760px) {
  .cc-lightbox { padding: 12px; }
  .cc-lightbox__img, .cc-lightbox__vid { max-width: 94vw; max-height: 78vh; }
}

/* --- Closing ---------------------------------------------------------------- */
.closing {
  position: relative;
  padding: 0 0 var(--s6);
}
.field-wrap { position: relative; }
.field__raupe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  font-size: clamp(64px, 9vw, 150px);
  transform: translate(calc(50vw - 50%), 50%);
}
.field__raupe .raupe__flip {
  filter: drop-shadow(5px 0 0 var(--paper)) drop-shadow(-5px 0 0 var(--paper))
    drop-shadow(0 5px 0 var(--paper)) drop-shadow(0 -5px 0 var(--paper));
}
.field {
  --n: 24;
  display: grid;
  grid-template-columns: repeat(var(--cols, 24), minmax(0, 1fr));
  gap: 6px;
  padding: var(--s8) var(--gutter) var(--s7);
  font-size: var(--fs, 40px);
}
.field .arw { width: 100%; height: auto; aspect-ratio: 1; }
/* Only this headline: each mask line reaches 0.24em lower, so the descenders of "hungry." are not cut. flow-root keeps the
   negative margins inside the title. */
.closing__title { display: flow-root; margin-bottom: var(--gap-lead-content); }
.closing__title .sh__line { padding-bottom: 0.24em; margin-bottom: -0.24em; }

.contacts { display: grid; border-top: 3px solid var(--ink); background: var(--paper); }
.contact {
  --c: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s4);
  border-bottom: 3px solid var(--ink);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
}
.contact[data-color="orange"] { --c: var(--orange); }
.contact[data-color="teal"] { --c: var(--teal); }
.contact[data-color="red"] { --c: var(--red); }
.contact__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .contact:hover .contact__fill { transform: none; }
}
.contact:focus-visible .contact__fill { transform: none; }
.contact__label { font-size: var(--fs-small); font-weight: 700; }
.contact__mail {
  font-size: clamp(22px, 4.2vw, 72px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.contact__arw { font-size: clamp(40px, 4.6vw, 80px); }
@media (max-width: 760px) {
  .contact__mail { font-size: clamp(18px, 5.6vw, 24px); }
}
@media (hover: hover) {
  .contact:hover .contact__arw .arw__shape { animation: jab 1.1s var(--ease-out) infinite; animation-delay: -0.75s; }
  .contact[data-color="teal"]:hover,
  .contact[data-color="red"]:hover { color: var(--paper); }
  .contact[data-color="teal"]:hover .contact__arw,
  .contact[data-color="red"]:hover .contact__arw { --c: var(--paper); }
}
.contact:focus-visible .contact__arw .arw__shape { animation: jab 1.1s var(--ease-out) infinite; animation-delay: -0.75s; }

/* Footer lockup: Nimmersatt mark, x, Adaptyv wordmark, Bio. One name for screen readers (role img on the wrapper). */
.closing__lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}
.closing__mark, .closing__adaptyv { display: block; height: 22px; width: auto; }
.closing__x { font-size: 18px; font-weight: 700; margin: 0 2px; }
.closing__bio {
  position: relative;
  top: -2px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #142933;
}

.closing__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s8);
  padding-bottom: 88px;
  font-size: var(--fs-small);
  font-weight: 700;
}

@media (max-width: 760px) {
  .field { padding-top: var(--s7); padding-bottom: var(--s6); gap: 4px; }
  .contact { grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); padding: var(--s4) 0; }
  .contact__label { grid-column: 1 / -1; }
  .closing__foot { flex-direction: column; padding-bottom: 80px; }
}

/* --- Back to top ------------------------------------------------------------- */
.backtotop {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(calc(100% + 140px));
  transition: transform 0.5s var(--ease-out);
}
.backtotop.is-shown { transform: none; }
/* Over a stage the pointer is working in (protein, wall, decks, plates) the button steps aside.
   Keyboard focus always brings it back. */
.backtotop.is-shown.is-aside { opacity: 0; pointer-events: none; }
.backtotop.is-shown.is-aside:focus-visible { opacity: 1; }
.backtotop__arw { font-size: 26px; }
.backtotop__arw .arw__rot { transform: rotate(45deg); }
.backtotop:hover .arw__shape { animation: jab 0.9s var(--ease-out) 1; }
/* Phones and short screens: the arrow alone, a 48 px square. The word sat over deck controls, credit links and contact rows.
   The word stays for assistive tech: the label is visually hidden, the same way as .visually-hidden. */
@media (max-width: 760px), (max-height: 520px) {
  .backtotop { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; gap: 0; }
  .backtotop__label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Utilities --------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Raupe in place of an arrow: same cap height, ink unless a section colours it. */
.sh__raupe { margin-right: 0.14em; }
.closing__title .sh__raupe { --c: var(--blue); }
.is-live .sh__raupe.is-in .raupe__body { animation: crawl 0.72s ease-in-out infinite; }

/* Lightbox caption (data-look-src images, Instagram embeds). */
.cc-lightbox__cap {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  max-width: min(56ch, calc(100vw - 2 * var(--gutter) - 120px));
  margin: 0;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}
.cc-lightbox__cap:empty { display: none; }
.cc-lightbox__cap b { font-weight: 700; }
/* Embed: the caption leaves the corner and sits under the frame, same width. */
.cc-lightbox.is-embed .cc-lightbox__cap {
  position: static;
  width: 0;
  min-width: 100%;
  max-width: none;
}
.cc-lightbox__cap a {
  display: block;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-lightbox__cap a:not(:first-child) { margin-top: var(--s1); }
.cc-lightbox__cap a:hover { color: var(--red); }

/* Field: a few Raupen among the arrows face the big one. */
.field .raupe { width: 100%; height: auto; align-self: center; }
.field .raupe__flip { transition: transform 0.35s var(--ease-out); }

/* --- Reduced motion / static ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
  }
}