/* About · the mix (about-mix.html): C's hero, A's route in the live words, us on post-its */
.mx-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(60px, 9vh, 110px); }
.mx-st { border-top: 2px solid #111; padding-top: 18px; }
.mx-st p { font: 400 clamp(16px, 1.2vw, 19px)/1.6 var(--sans); }
.mx-us .av-title { margin-bottom: clamp(60px, 9vh, 110px); }
.pi-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 70px); align-items: start; }
.pi { rotate: var(--r); }
.pi:nth-child(2) { margin-top: 60px; }
.pi-note { position: relative; container-type: inline-size; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 20px 26px rgba(0, 0, 0, 0.32)); }
.pi-paper { display: block; width: 100%; height: auto; }
/* the photo stuck on the post-it with a strip of tape, what we do written under it */
.pi-photo { position: absolute; left: 13%; top: 11%; width: 74%; margin: 0; rotate: var(--pr); background: #fff; padding: 2.2%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 6px 12px rgba(0, 0, 0, 0.14); }
.pi-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.05); }
.pi-photo .pi-tape { position: absolute; top: -13%; left: 50%; width: 34%; height: auto; translate: -50% 0; rotate: var(--tr); }
.pi-name { position: absolute; left: 13%; top: 68%; height: 13cqw; width: auto; }
.pi-does { position: absolute; left: 13%; top: 84%; height: 6.2cqw; width: auto; max-width: 76%; }
.pi-bio { margin-top: 26px; font: 400 15px/1.55 var(--sans); color: #e9e4da; max-width: 36ch; }
.pi-mail { display: inline-block; margin-top: 10px; color: #f3efe7; font: 500 13px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .mx-story, .pi-wall { grid-template-columns: minmax(0, 1fr); }
  .pi-wall { max-width: 400px; margin-inline: auto; row-gap: 70px; }
  .pi:nth-child(2) { margin-top: 0; }
}
/* round 5: the story in the recipe's design, the portraits as a section */
.mx-verb { font-size: clamp(38px, 4.2vw, 72px); text-wrap: balance; }
.aa-recipe .aa-n { text-transform: uppercase; }
.aa-route { padding-bottom: clamp(70px, 10vh, 120px); }
.mx-ports .ab-ports { width: 100%; margin-inline: auto; }
.mx-ports .ab-bios { margin-top: clamp(30px, 5vh, 50px); color: #111; }
.mx-ports .ab-bio a { color: #111; }

/* the collage: Buenos Aires to Baden-Württemberg, pasted piece by piece as you scroll */
.cl { height: 200vh; background: url(/assets/lab/img/lab/home/stock-kraft.jpg) center / cover; color: #111; position: relative; }
.cl-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cl-k { position: absolute; left: 3%; top: 3%; }
.cl-p { position: absolute; rotate: var(--r); }
/* pasted on: it lands a touch big and settles in two quick steps, like stop-motion */
.cl-p { opacity: 0; scale: 1.35; transition: opacity 0.12s steps(2), scale 0.32s steps(3), rotate 0.32s steps(3); }
.cl-p.is-in { opacity: 1; scale: 1; }
.cl-p:not(.is-in) { rotate: calc(var(--r) + 7deg); }
.cl-cut { height: auto; filter: drop-shadow(0 2px 2px rgba(30, 24, 18, 0.3)) drop-shadow(0 14px 18px rgba(30, 24, 18, 0.22)); }
.cl-t { font: 400 clamp(48px, 8.4vw, 150px)/0.86 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; z-index: 3; margin: 0; }
.cl-t--bw { font-size: clamp(32px, 5.6vw, 100px); color: var(--orange); }
.cl-l { z-index: 4; }
.cl-l .av-label { margin: 0; }
.cl-line { left: 33%; top: 76%; width: 13%; rotate: -8deg; border-top: 3px dashed #111; z-index: 1; transform-origin: left; }
.cl-line span { position: absolute; left: 50%; top: -34px; translate: -50% 0; font: 600 13px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
.cl-line:not(.is-in) { scale: 0 1; rotate: -8deg; }
.cl-line { transition: opacity 0.1s, scale 0.6s steps(6); }
.cl-cut[src*="bretzel"] { z-index: 5; }
@media (max-width: 900px) {
  .cl { height: 300vh; }
  .cl-t { font-size: 13vw; }
  .cl-t--bw { font-size: 10vw; }
}

/* round 2 of the collage: more background (the sky torn off across the top, paper discs behind the
   cut-outs, kraft under it all) and less scrolling */
.cl-base { position: absolute; height: auto; max-width: none; z-index: 0; filter: drop-shadow(0 6px 10px rgba(30, 24, 18, 0.25)); }
.cl-disc { filter: drop-shadow(0 4px 8px rgba(30, 24, 18, 0.2)); z-index: 0; }
.cl-cut { z-index: 2; }
.cl-k { z-index: 3; color: #111; }
@media (max-width: 900px) { .cl { height: 170vh; } }

/* the route as Our Labs' hero B: one sheet, torn in two (Buenos Aires | Ravensburg) and taped back */
.rt { background: #1d1d1b; }
.rt-sheet { position: relative; aspect-ratio: 16 / 9; max-height: 100vh; margin-inline: auto; overflow: hidden; container-type: inline-size; }
.rt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rt-k { position: absolute; left: 4%; top: 6%; z-index: 2; }
.rt-city { position: absolute; z-index: 2; margin: 0; font: 400 7.6cqw/0.86 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; }
.rt-city--ba { left: 4%; bottom: 7%; color: #111; }
.rt-city--rv { right: 4%; top: 7%; color: #111; font-size: 6cqw; }
.rt-pin { position: absolute; z-index: 3; width: 11cqw; height: auto; translate: -50% 0; }
.rt-pin--top { left: 55%; top: 3%; rotate: -4deg; }
.rt-pin--bot { left: 48.8%; bottom: 5%; rotate: 3deg; }
.rt-km { position: absolute; z-index: 3; left: 49.2%; top: 47%; width: 20cqw; translate: -50% -50%; rotate: -4deg; }
.rt-km img { display: block; width: 100%; height: auto; }
.rt-l { position: absolute; z-index: 3; }
.rt-l .av-label { width: 22cqw; margin: 0; }
.rt-l--ba { left: 6%; top: 15%; }
.rt-l--rv { right: 5%; top: 20%; }

/* the route as the users' own collage, big, the names printed over its corners along its route */
.rp { overflow: hidden; padding-block: 50px; }
.rp-k { position: absolute; left: var(--pad, 5%); top: clamp(30px, 6vh, 60px); }
.rp-stage { position: relative; width: min(84vw, calc((100vh - 100px) * 0.83)); margin-inline: auto; container-type: inline-size; }
.rp-img { display: block; width: 100%; height: auto; rotate: -1.5deg; filter: drop-shadow(0 4px 6px rgba(30, 24, 18, 0.22)) drop-shadow(0 26px 40px rgba(30, 24, 18, 0.2)); }
.rp-city { position: absolute; z-index: 2; margin: 0; font: 400 19cqw/0.84 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; color: #111;
  text-shadow: 0 0 1px #f3efe7; filter: drop-shadow(0 3px 0 rgba(243, 239, 231, 0.9)); }
.rp-city--ba { left: -34%; top: 4%; rotate: -3deg; }
.rp-city--bw { right: -40%; bottom: 6%; color: var(--orange); font-size: 11cqw; text-align: right; rotate: -3deg; }
.rp-km { position: absolute; z-index: 3; right: -30%; top: 42%; width: 44cqw; rotate: -6deg; }
.rp-km img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .rp-stage { width: 70vw; }
  .rp-city--ba { left: -18%; } .rp-city--bw { right: -24%; } .rp-km { right: -18%; }
}

/* our own collage: the users' pieces laid across the whole section */
.c2 { padding: 0; overflow: hidden; }
.c2-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100vh; min-height: 640px; margin-inline: auto; container-type: inline-size; }
.c2-k { position: absolute; left: 50%; top: 4%; translate: -50% 0; z-index: 9; }
.c2-p { position: absolute; height: auto; max-width: none; rotate: var(--r);
  filter: drop-shadow(0 2px 2px rgba(30, 24, 18, 0.28)) drop-shadow(0 12px 18px rgba(30, 24, 18, 0.2)); }
.js .c2-p.drop-in:not(.is-in) { opacity: 0; scale: 1.25; translate: 0 0; rotate: calc(var(--r) + 8deg); }
.c2-p.drop-in { transition: opacity 0.15s steps(2), scale 0.3s steps(3), rotate 0.3s steps(3); }
.c2-t { position: absolute; z-index: 8; margin: 0; font: 400 8.6cqw/0.84 var(--hero); text-transform: uppercase; letter-spacing: -0.045em; color: #111;
  filter: drop-shadow(0 0 2px rgba(243, 239, 231, 0.9)) drop-shadow(0 4px 0 rgba(243, 239, 231, 0.95)); }
.c2-t--ba { left: 3%; bottom: 5%; rotate: -2deg; }
.c2-t--bw { right: 3%; bottom: 5%; text-align: right; color: var(--orange); font-size: 6.6cqw; rotate: -2deg; }
.c2-km { position: absolute; z-index: 9; left: 49%; top: 38%; width: 16cqw; translate: -50% -50%; rotate: -5deg; }
.c2-km img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .c2-stage { aspect-ratio: 3 / 4; min-height: 0; } }
.aa-recipe .mx-verb { margin-bottom: 20px; }

/* phones and tablets: each person's photo with their own text right under it, one person after the other
   (the owner, 2026-11-11: a row of three small photos and then all the text below lost who wrote what).
   The two lists stay as they are for desktop; here their items join one column, in pairs. */
@media (max-width: 900px) {
  .mx-ports .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mx-ports .ab-ports, .mx-ports .ab-bios { display: contents; }
  .mx-ports .ab-port, .mx-ports .ab-bio { width: min(100%, 420px); justify-self: center; }
  .mx-ports .ab-port:nth-child(1) { order: 1; } .mx-ports .ab-bio:nth-child(1) { order: 2; }
  .mx-ports .ab-port:nth-child(2) { order: 3; } .mx-ports .ab-bio:nth-child(2) { order: 4; }
  .mx-ports .ab-port:nth-child(3) { order: 5; } .mx-ports .ab-bio:nth-child(3) { order: 6; }
  .mx-ports .ab-port { margin-top: 52px; }
  .mx-ports .ab-port:nth-child(1) { margin-top: 30px; }
  .mx-ports .ab-bio { margin-top: 16px; }
  .mx-ports .ab-port figcaption span { display: inline; }   /* the role again: there's room for it now */
}