/*
 * MNEMO case study (/work/mnemo/).
 * Shared building blocks (facts, eyebrows, stage, reflection, credits,
 * teaser) come from case-base.css; this file holds the page layout and the
 * exhibits. All values come from tokens.css; fixed values only inside
 * graphics and for the project dark of chapter 05 (#191921, the 2014
 * interface, CASE-STUDY-STANDARD.md 3.2).
 *
 * A calm page (27.10.2026, pattern from Moving Types, standard 3.5):
 * - No boxes or cards around content. The project card in 01 became a
 *   photo, the seven-phase stepper in 02 is gone, the three system cards
 *   in 03 became the stage, the forgetting legend became G12. The one
 *   surface around a graphic is the light ground of the hexagon in the dark
 *   chapter (Dominik, 26.10.2026).
 * - No kickers or labels above graphics; their words live in the caption.
 *   One caption per figure or row, 12 px under the pictures.
 * - Surfaces set the rhythm: white, grey, white, grey, the dark chapter 05,
 *   white. Compositions change: text beside photo, full-width graphic, pair,
 *   graphic with steps, row of sketches, the stage, full bleed and content
 *   width in 04, pinned text in 05, the G12 demo across the full width.
 * - Sticky: the stage in 03 (js/case-stage.js) and the navigator text in
 *   05, nothing else. On phones the stage is a list and the rows of
 *   wireframes and iterations scroll sideways.
 * - G02, G04, the hexagon and G12 run once when they come into view; the
 *   longer ones have a pause control in the caption (js/mnemo-story.js).
 *   The G12 slider is the one demo.
 * Rules on shared case-base.css classes carry .mn-page, so they win there.
 */

.mn-page {
  --mn-dark: #191921; /* chapter 05, the 2014 interface */
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-x: clip;
}

.mn-page main *,
.mn-page main *::before,
.mn-page main *::after {
  box-sizing: border-box;
}

.mn-page main img,
.mn-page main video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* :where() keeps the reset weak, so component margins win. */
:where(.mn-page main) figure {
  margin: 0;
}

.mn-page main figcaption {
  margin: 12px 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  text-align: left;
}

.mn-wrap {
  width: var(--content-width);
  margin-inline: auto;
}

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

/* ---------- Without JavaScript ---------- */

/* main.js never colours the fixed navigation without JavaScript, and its
   white text would run over the light chapters: give it the dark of the
   chapter bar. The stage loops get their poster from js/mnemo-story.js;
   without it the same picture stands behind the video. G12 has no slider
   without JavaScript, it shows the pictures after ten years. */
@media (scripting: none) {
  .mn-page #main-nav {
    background: var(--color-surface-dark);
  }

  .mn-page video[data-poster] {
    background: var(--poster) center / cover no-repeat;
  }

  .mn-page video[data-poster]::-webkit-media-controls {
    display: none !important;
  }

  .mn-g12__time {
    display: none;
  }
}

/* ---------- Hero ---------- */

.mn-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(560px, 90vh);
  overflow: hidden;
  background: #000;
  color: var(--color-ink-on-dark);
}

.mn-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center 35%;
}

/* The wall behind eyebrow and title is light grey: a layer from the left
   and one from the bottom keep every line at 4.5 : 1, the title at 3 : 1
   (measured against the lightest 5 % of the photo behind each line, 320 to
   1440 px). The camera on the shirt, right of the text, stays light. */
.mn-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 14, 0.8) 0%, rgba(10, 10, 14, 0.58) 40%, rgba(10, 10, 14, 0.16) 75%, rgba(10, 10, 14, 0) 100%),
    linear-gradient(0deg, rgba(10, 10, 14, 0.86) 0%, rgba(10, 10, 14, 0.56) 45%, rgba(10, 10, 14, 0.36) 100%);
}

/* Content sits at the bottom, but on small phones it makes the hero taller
   instead of being clipped at the top. */
.mn-hero__content {
  position: relative;
  z-index: 1;
  padding-block: 6rem 3rem;
}

.mn-hero__title {
  max-width: 1000px;
  margin: 0 0 var(--space-4);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.mn-hero__lead {
  max-width: 600px;
  margin: 0;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

/* ---------- Sections and headings ---------- */

.mn-section {
  padding-block: var(--space-section);
}

.mn-section--white {
  background: var(--color-surface);
}

.mn-section--grey {
  background: var(--color-surface-alt);
}

.mn-section--dark {
  background: var(--mn-dark);
  color: var(--color-ink-on-dark);
}

.mn-section--dark figcaption {
  color: var(--color-ink-on-dark-muted) !important;
}

.mn-head {
  margin-bottom: var(--space-block);
}

.mn-h2 {
  max-width: 920px;
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.mn-head__intro {
  max-width: 560px;
  margin: var(--space-intro) 0 0;
  color: var(--color-ink-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.mn-head__intro--wide {
  max-width: var(--measure);
}

.mn-section--dark .mn-head__intro {
  color: var(--color-ink-on-dark-body);
}

@media (min-width: 1024px) {
  .mn-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }

  .mn-head--split .case-eyebrow {
    grid-column: 1 / -1;
  }

  .mn-head--split .mn-head__intro {
    margin-top: 0;
  }
}

/* Running text between exhibits. */
.mn-text,
.mn-copy p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.mn-text {
  margin-top: var(--space-block);
}

.mn-section--dark .mn-text {
  color: var(--color-ink-on-dark-body);
}

/* ---------- 01 Starting point: text beside the camera ---------- */

.mn-start {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-12) clamp(48px, 6vw, 96px);
  align-items: end;
}

.mn-copy .mn-h2 {
  margin-bottom: var(--space-8);
}

.mn-copy p + p {
  margin-top: 22px;
}

.mn-start__photo img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- Caption with the pause control at its end ---------- */

.mn-caption-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
}

.mn-caption-row > span {
  max-width: var(--measure);
}

.mn-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* The same width for "Pause" and "Play", so the caption never reflows. */
  min-width: 76px;
  min-height: var(--tap-min);
  /* Centre the 44 px target on the first caption line. */
  margin: -12px calc(-1 * var(--space-2)) -12px 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-muted);
  font: var(--weight-semibold) var(--text-caption)/var(--leading-caption) var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}

.mn-control[hidden] {
  display: none;
}

.mn-control:hover {
  color: var(--color-accent);
}

.mn-section--dark .mn-control {
  color: var(--color-ink-on-dark-muted);
}

.mn-section--dark .mn-control:hover {
  color: var(--color-accent-on-dark);
}

/* Two bars for "Pause", a triangle for "Play". */
.mn-control__icon {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.mn-control[data-action="play"] .mn-control__icon {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- Steps beside a graphic (G04) ---------- */

/* The same numbered circles as the stage. While the sequence runs, the
   current step is filled and the others are muted; without JavaScript all
   of them read as plain text. */
.mn-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.mn-steps li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

.mn-steps__num {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  font: var(--weight-semibold) var(--text-caption)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.mn-steps strong {
  padding-top: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  transition: color var(--dur-base) var(--ease-out);
}

.mn-steps p {
  margin: 0;
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  transition: color var(--dur-base) var(--ease-out);
}

.mn-steps.is-live li:not(.is-current) strong,
.mn-steps.is-live li:not(.is-current) p {
  color: var(--color-ink-muted);
}

.mn-steps li.is-current .mn-steps__num {
  background: var(--color-accent);
  color: var(--color-ink-on-dark);
}

/* ---------- 02 Research: G02 survey ---------- */

/* Kept from the master (09_grafiken/web/mnemo-graphics.css, prefix mng-):
   the small set of classes the generated SVG uses. Its keyframes sit at the
   end of this file. From 1280 px the wide version; below, the two phone
   parts, side by side from 1024 px. */
.mng {
  --mng-text: #232323;
  --mng-muted: #5f6468;
  --mng-accent: #3a41e4;
  --mng-warm: #f37954;
  color: var(--mng-text);
}

.mng svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mng svg text {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  fill: var(--mng-text);
}

.mng .mng-muted {
  fill: var(--mng-muted);
}

.mng .mng-caps {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

.mng .mng-fade {
  opacity: 0;
  animation: mng-fade 0.6s ease-out both;
}

.mng .mng-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mng-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.mng .mng-rise {
  opacity: 0;
  animation: mng-rise 0.6s ease-out both;
}

.mng .mng-bar {
  transform-box: fill-box;
  transform-origin: left center;
}

@keyframes mng-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mng-pop { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mng-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mng-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mn-g02__mobile {
  display: none;
}

@media (max-width: 1279.98px) {
  .mn-g02__desktop {
    display: none;
  }

  .mn-g02__mobile {
    display: grid;
    gap: var(--space-10);
    max-width: 560px;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mn-g02__mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    align-items: start;
    max-width: none;
  }
}

/* ---------- Pairs (02, 04) ---------- */

.mn-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-block);
}

.mn-pair img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* The affinity photo takes the height of the interview row beside it. */
.mn-pair:not(.mn-pair--product) img {
  aspect-ratio: 1348 / 737;
  object-fit: cover;
}

/* ---------- 02 Research: G04 a day in pictures ---------- */

/* The caption with its pause control right under the drawing, the steps
   after it. */
.mn-g04 {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-block);
}

.mn-g04 > figcaption {
  order: 1;
}

.mn-g04 > .mn-steps {
  order: 2;
}

.mn-g04__stage {
  position: relative;
  aspect-ratio: 1280 / 520;
}

.mn-g04__stage canvas,
.mn-g04__still img {
  display: block;
  width: 100%;
  height: 100%;
}

.mn-g04 > figcaption {
  margin-top: var(--space-4);
}

/* ---------- 03 Concept: four sketches in a row ---------- */

.mn-sketches__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.mn-sketches img {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* ---------- 03 Concept: the stage ---------- */

.mn-stage {
  margin-top: var(--space-block);
}

/* All loops are 16 : 9 on a dark ground, like the film. */
.mn-page .mn-stage .case-stage__screen {
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--mn-dark);
}

/* background-color only: without JavaScript the poster stands behind the
   video as background-image (see above). */
.mn-page .mn-stage .case-stage__media video {
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--mn-dark);
}

.mn-page .mn-stage .case-stage__screen .case-stage__media video {
  border-radius: 0;
}

/* From 1024 px the medium takes two thirds of the width; the frame sticks
   in the middle of the window below navigation and chapter bar, never
   higher than 24 px under them, and never taller than the window. The stage
   is the container the frame measures (cqi); --mn-gap is its column gap.
   48 px: gap and progress row under the picture. */
.mn-page .mn-stage.is-staged {
  --mn-gap: var(--space-8);
  container-type: inline-size;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--mn-gap);
}

.mn-page .mn-stage.is-staged > .case-stage__frame {
  --mn-frame-w: min((100cqi - var(--mn-gap)) * 2 / 3, (100vh - var(--scroll-offset) - var(--space-24)) * 16 / 9);
  width: var(--mn-frame-w);
  top: calc(var(--scroll-offset) + max(var(--space-6), (100vh - var(--scroll-offset) - var(--mn-frame-w) * 9 / 16 - var(--space-12)) / 2));
}

@media (min-width: 1280px) {
  .mn-page .mn-stage.is-staged {
    --mn-gap: var(--space-12);
  }
}

/* The circles beside the steps and the bars under the frame show the
   position; the "02 / 04" counter is left out. */
.mn-page .mn-stage .case-stage__count {
  display: none;
}

/* ---------- 04 Product: full bleed and content width ---------- */

.mn-bleed {
  margin-top: var(--space-block);
}

.mn-bleed img {
  width: 100%;
}

/* The pair sits at content width between the two full-bleed pictures. */
.mn-pair--product {
  margin-block: var(--space-block);
}

.mn-pair--product img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 05 Interface: strips ---------- */

.mn-strip + .mn-strip {
  margin-top: var(--space-10);
}

.mn-strip__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.mn-strip img {
  width: 100%;
  border-radius: var(--radius-md);
}

/* ---------- 05 Interface: navigator text pinned beside the media ---------- */

/* From 1024 px the text stays while graphic, film and screens pass beside
   it, only on windows tall enough for the whole text. The text starts on
   the left content edge, the media end on the right one. */
.mn-pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-10) var(--space-12);
  align-items: start;
  margin-top: var(--space-block);
}

.mn-pin__text p {
  max-width: var(--measure-narrow);
  margin: 0;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.mn-pin__text p + p {
  margin-top: var(--space-5);
}

.mn-pin__media {
  display: grid;
  gap: var(--space-block);
}

.mn-pin__media video,
.mn-screens img {
  width: 100%;
  border-radius: var(--radius-md);
}

@media (min-width: 1024px) and (min-height: 640px) {
  .mn-pin__text {
    position: sticky;
    top: calc(var(--scroll-offset) + var(--space-6));
  }
}

.mn-screens__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* The hexagon on its own light ground, the one surface around a graphic
   (Dominik, 26.10.2026: chapter 05 stays dark, the graphic keeps its
   ground). No frame, the radius of the pictures. */
.mn-hex__ground {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.mn-hex svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-inline: auto;
  font-family: var(--font-sans);
}

.mn-hex__axes line {
  stroke: #232323;
  stroke-opacity: 0.12;
}

.mn-hex__rings polygon {
  fill: none;
  stroke: #232323;
  stroke-opacity: 0.12;
}

.mn-hex__rings .mn-hex__ring--outer {
  stroke-opacity: 0.24;
}

.mn-hex__shape {
  fill: var(--color-accent);
  fill-opacity: 0.12;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.mn-hex__points circle {
  fill: var(--color-accent);
}

.mn-hex__centre {
  fill: #232323;
}

.mn-hex__labels text {
  fill: var(--color-ink);
  font-size: 14px;
  font-weight: var(--weight-bold);
}

.mn-hex__labels .is-emotion {
  fill: var(--color-accent);
}

.mn-hex__labels .is-kind {
  fill: var(--color-ink-muted);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 1.5px;
}

/* ---------- 05 Interface: tablet and phone, last in the pinned column ---------- */

.mn-devices__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
}

.mn-devices__tablet {
  width: 68%;
  border-radius: var(--radius-md);
}

.mn-devices__phone {
  width: 24%;
  border-radius: var(--radius-md);
}

/* ---------- 05 Interface: G12 the archive forgets ---------- */

.mn-forget {
  margin-top: calc(var(--space-block) * 1.5);
}

.mn-forget__copy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: var(--space-10);
}

.mn-forget__copy h3 {
  margin: 0;
  color: var(--color-ink-on-dark);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.mn-forget__copy p {
  max-width: 560px;
  margin: 0;
  color: var(--color-ink-on-dark-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.mn-g12__tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mn-g12__tiles li {
  position: relative;
}

.mn-g12__tiles img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  filter: saturate(var(--s, 1)) brightness(calc(0.6 + 0.4 * var(--s, 1)));
}

/* The moment a picture is looked at: a white ring and an eye. */
.mn-g12__eye {
  position: absolute;
  inset: -3px;
  border: 3px solid #fff;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.mn-g12__eye::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 13%, transparent 14%),
    radial-gradient(ellipse 50% 32% at 50% 50%, transparent 0 86%, #fff 88% 100%, transparent 102%),
    rgba(25, 25, 33, 0.85);
  transform: translate(-50%, -50%);
}

.mn-g12__tiles li.is-viewed .mn-g12__eye {
  opacity: 1;
  transform: none;
}

.mn-g12__time {
  position: relative;
  margin-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* The slider: a blue track up to the handle on a hairline. */
.mn-g12__range {
  --p: 100%;
  display: block;
  width: 100%;
  height: var(--tap-min);
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mn-g12__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent-on-dark) var(--p), var(--color-line-on-dark) var(--p));
}

.mn-g12__range::-moz-range-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent-on-dark) var(--p), var(--color-line-on-dark) var(--p));
}

.mn-g12__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9.5px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent-on-dark);
  -webkit-appearance: none;
  appearance: none;
}

.mn-g12__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent-on-dark);
}

.mn-g12__range:focus-visible {
  outline: var(--focus-width) solid var(--color-accent-on-dark);
  outline-offset: var(--focus-offset);
}

/* Tick labels under the track, placed by year; the handle is 22 px wide,
   so the track runs from 11 px to 100 % - 11 px. */
.mn-g12__ticks {
  position: absolute;
  inset: auto 11px 0;
  height: var(--space-6);
  color: var(--color-ink-on-dark-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.mn-g12__ticks span {
  position: absolute;
  left: calc(var(--y) * 10%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.mn-g12__ticks span:first-child {
  transform: translateX(-11px);
}

.mn-g12__ticks span:last-child {
  transform: translateX(calc(-100% + 11px));
}

/* ---------- 06 What remains ---------- */

.mn-page .case-credits a {
  color: var(--color-accent) !important;
}

/* ---------- Reveal on scroll (only with JS and without reduced motion) ---------- */

.mn-motion .mn-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.mn-motion .mn-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

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

  .mn-start__photo {
    max-width: 480px;
  }

  .mn-pin {
    grid-template-columns: minmax(0, 1fr);
  }

  .mn-forget__copy {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-5);
  }
}

@media (max-width: 767.98px) {
  .mn-hero__content {
    padding-block: 5.5rem 1.5rem;
  }

  /* On phones the text reaches up to the light wall. */
  .mn-hero__scrim {
    background:
      linear-gradient(90deg, rgba(10, 10, 14, 0.7) 0%, rgba(10, 10, 14, 0.4) 70%, rgba(10, 10, 14, 0.2) 100%),
      linear-gradient(0deg, rgba(10, 10, 14, 0.88) 0%, rgba(10, 10, 14, 0.62) 55%, rgba(10, 10, 14, 0.5) 100%);
  }

  .mn-pair,
  .mn-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .mn-pair:not(.mn-pair--product) img {
    aspect-ratio: auto;
  }

  .mn-sketches__row,
  .mn-screens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .mn-g04__stage {
    aspect-ratio: 1;
  }

  /* The stage as a list: a little less air between the steps on phones. */
  .mn-page .mn-stage .case-stage__steps {
    gap: var(--space-12);
  }
}

@media (max-width: 639.98px) {
  /* Wireframes and iterations: three in a row would be thumbnails on a
     phone, so the row scrolls sideways, one and a bit screens wide, from
     edge to edge (pattern: the catalogue codes on Moving Types). */
  .mn-strip__row {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }

  /* width and min-width too: width 100 % would also set the minimum. */
  .mn-strip__row img {
    flex: 0 0 82%;
    width: 82%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* 16 of the 21 pictures, the three that are looked at among them. */
  .mn-g12__tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .mn-g12__tiles li:nth-child(n + 17) {
    display: none;
  }

  /* today · 5 years · 10 years: the marks for 1 and 2 years would touch. */
  .mn-g12__ticks span:nth-child(2),
  .mn-g12__ticks span:nth-child(3) {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .mn-page *,
  .mn-page *::before,
  .mn-page *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mn-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- G02 keyframes (inserted by web_ruhe_einsetzen.py) ---------- */

/* G02:start */
@keyframes mn-g02-d-cA { 0% { fill: #d4d4dc } 21.667% { fill: #d4d4dc } 24.167% { fill: #f6b8a5 } 100% { fill: #f6b8a5 } }
@keyframes mn-g02-d-cB { 0% { fill: #d4d4dc } 21.667% { fill: #d4d4dc } 24.167% { fill: #f6b8a5 } 33.333% { fill: #f6b8a5 } 35.833% { fill: var(--mng-warm) } 100% { fill: var(--mng-warm) } }
@keyframes mn-g02-d-hl { 0% { fill: #c4c4cc } 76.667% { fill: #c4c4cc } 80.000% { fill: var(--mng-accent) } 100% { fill: var(--mng-accent) } }
@keyframes mn-g02-d-dim { 0% { fill: #c4c4cc } 76.667% { fill: #c4c4cc } 80.000% { fill: #dadae0 } 100% { fill: #dadae0 } }
@keyframes mn-g02-ma-cA { 0% { fill: #d4d4dc } 36.667% { fill: #d4d4dc } 41.667% { fill: #f6b8a5 } 100% { fill: #f6b8a5 } }
@keyframes mn-g02-ma-cB { 0% { fill: #d4d4dc } 36.667% { fill: #d4d4dc } 41.667% { fill: #f6b8a5 } 56.667% { fill: #f6b8a5 } 61.667% { fill: var(--mng-warm) } 100% { fill: var(--mng-warm) } }
@keyframes mn-g02-mb-hl { 0% { fill: #c4c4cc } 58.462% { fill: #c4c4cc } 64.615% { fill: var(--mng-accent) } 100% { fill: var(--mng-accent) } }
@keyframes mn-g02-mb-dim { 0% { fill: #c4c4cc } 58.462% { fill: #c4c4cc } 64.615% { fill: #dadae0 } 100% { fill: #dadae0 } }
/* G02:end */