/* ---------------------------------------------------------------------------
   About: the shop is the front of a workshop.

   Same tokens, same container, same type scale as every other page — this is
   not a landing page bolted onto the storefront, it is the storefront saying
   one more thing about itself. Oak is the only accent and, as everywhere else
   in this theme, it carries no text: rules, dots and icon grounds only.

   Motion lives at the bottom of the file, in one block, behind both
   `scripting: enabled` and `prefers-reduced-motion: no-preference`. Everything
   above it is the page at rest, which is the page a reader with no JavaScript,
   a thrown script or a reduced-motion setting gets — complete, in order, at
   full opacity.
   ------------------------------------------------------------------------ */

.mf-about {
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------------------
   The opening
   ------------------------------------------------------------------------ */

.mf-ahero {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  padding-inline-start: clamp(1.4rem, 3.5vw, 2.6rem);
  border-radius: var(--radius-card);
  background: var(--paper);
  /* The gold rule down the left edge, as a border rather than a box: it then
     cannot be pushed out of place by the padding or rounded away at the
     corners. */
  border-inline-start: 4px solid var(--oak);
}

@media (min-width: 60rem) {
  .mf-ahero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.mf-ahero__eyebrow {
  margin: 0 0 0.9rem;
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mf-ahero__title {
  margin: 0 0 0.9rem;
  font-size: var(--type-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mf-ahero__title span {
  display: block;
}

.mf-ahero__intro {
  max-width: 38ch;
  font-size: var(--type-lede);
  line-height: 1.5;
  color: var(--text);
}

.mf-ahero__intro p {
  margin: 0 0 0.8rem;
}

.mf-ahero__intro p:last-child {
  margin-bottom: 0;
}

.mf-ahero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin: 1.5rem 0 0;
}

/* Storefront's own `.woocommerce a.button.alt` is 0-3-1, so the primary needs
   at least that much to keep its colours. */
.mf-ahero .mf-ahero__actions button.mf-ahero__talk {
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius-control);
  font-size: var(--type-control);
  padding: 0.7rem 1.4rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.mf-ahero .mf-ahero__actions button.mf-ahero__talk:hover {
  background: var(--graphite);
  border-color: var(--graphite);
}

.mf-ahero__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-size: var(--type-control);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.mf-ahero__jump:hover {
  border-bottom-color: var(--ink);
}

.mf-ahero__jump .mf-icon {
  transition: transform 0.2s var(--ease);
}

.mf-ahero__line {
  margin: 1.4rem 0 0;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

/* The picture, or the diagram standing in for one.

   A fixed height rather than an aspect-ratio with a cap on it: a ratio box
   given a max-height shrinks its WIDTH to keep the ratio, which is how the
   table hero ended up 200px narrower than its column. */
.mf-ahero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
}

.mf-ahero__photo,
.mf-ahero__video,
.mf-aprint {
  display: block;
  width: 100%;
  height: clamp(12rem, 28vw, 20rem);
  border-radius: var(--radius-card);
  background: var(--paper-bright);
  object-fit: cover;
}

.mf-ahero__caption {
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.mf-aprint {
  display: grid;
  place-items: center;
  background: var(--graphite);
  overflow: hidden;
}

.mf-aprint svg {
  width: 88%;
  max-width: 22rem;
  height: auto;
}

.mf-aprint__body,
.mf-aprint__tray {
  fill: #3a3e41;
}

.mf-aprint__slot {
  fill: #16181a;
}

.mf-aprint__head {
  fill: var(--oak);
}

.mf-aprint__foot {
  fill: #53585c;
}

/* The print itself is drawn in its own colours in the markup; this is only
   where it sits once it is out. */
.mf-aprint__sheet {
  transform: none;
}

/* ---------------------------------------------------------------------------
   Photographs

   One rule for all of them: a fixed frame, `object-fit: cover`, and the image
   given its own intrinsic size by WordPress so nothing jumps while it loads.
   Never `aspect-ratio` with a `max-height` beside it — that shrinks the width
   to keep the ratio, which is the trap written up in docs/what-was-done.md.
   ------------------------------------------------------------------------ */

.mf-acard__media,
.mf-amachine__shot,
.mf-awork__media,
.mf-astep__media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-inner);
  background: var(--paper-bright);
}

.mf-acard__photo,
.mf-amachine__photo,
.mf-awork__photo,
.mf-astep__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-acard__media,
.mf-amachine__shot,
.mf-awork__media {
  height: clamp(8.5rem, 17vw, 12rem);
}

/* Finished work comes in whatever shape it was photographed in — a banner is
   tall, a shopfront is wide. `cover` cut the banner in half, so these are
   fitted whole into the frame instead. Nobody's work gets a crop it did not
   ask for. */
.mf-awork__media {
  height: clamp(9.5rem, 18vw, 13rem);
  background: var(--paper-bright);
}

.mf-awork__photo {
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   The four facts
   ------------------------------------------------------------------------ */

.mf-afacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mf-afacts li {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--paper-bright);
}

.mf-afacts__value {
  margin: 0 0 0.3rem;
  font-size: var(--type-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.mf-afacts__label {
  margin: 0;
  font-size: var(--type-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------------ */

.mf-aband {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: 5rem;
}

.mf-aband:focus {
  outline: none;
}

.mf-aband--soft,
.mf-aband--dark {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-card);
}

.mf-aband--soft {
  background: var(--paper);
}

.mf-aband--dark {
  background: var(--graphite);
  color: var(--on-dark);
}

.mf-aband__head {
  max-width: 44rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.mf-aband__title {
  margin: 0 0 0.5rem;
  font-size: var(--type-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mf-aband__lede {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--text-muted);
}

.mf-aband__note {
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   What we can make
   ------------------------------------------------------------------------ */

.mf-acards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-acard,
.mf-awork {
  /* transform and background only: nothing here moves the layout. */
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.mf-acard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--paper);
  border-radius: var(--radius-card);
}

/* With a photograph the icon stops being the card's only mark and shrinks to a
   label beside the title; the picture carries the recognition now. */
.mf-acard--shot .mf-acard__icon {
  width: 2.1rem;
  height: 2.1rem;
}

.mf-acard--shot .mf-acard__icon .mf-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.mf-acard__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-pill);
  background: var(--paper-bright);
  transition: background-color 0.2s var(--ease);
}

.mf-acard__icon .mf-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--oak);
}

.mf-acard__title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.mf-acard__text {
  margin: 0;
  font-size: var(--type-card);
  line-height: 1.5;
  color: var(--text-muted);
}

/* The call to action is a link on one card and a button on another; they have
   to read as the same thing, so the button is stripped back to the link. */
.mf-acard .mf-acard__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 0.5rem 0 0;
  min-height: 2.5rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--type-control);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.mf-acard .mf-acard__link .mf-icon {
  transition: transform 0.2s var(--ease);
}

/* Pointers only: on a touch screen the card's link is the whole interaction
   and nothing here is needed to reach it. */
@media (hover: hover) {
  .mf-acard:hover,
  .mf-awork:hover {
    background: var(--paper-bright);
    box-shadow: var(--lift);
  }

  .mf-acard:hover .mf-acard__icon {
    background: #efe0cd;
  }
}

.mf-about__range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.mf-about__range li {
  margin: 0;
}

.mf-about__range a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.mf-about__range a:hover {
  border-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   How a job runs

   Five stages, each with a photograph of it. Three layouts:

     phone   one stage under the next, the picture full width under the text
     tablet  two columns, so the last stage sits alone on a third row (2+2+1)
     desktop five across, with the gold line through the numbers

   The pictures are all one shape — 16/9, cropped to fill — and sit at the
   bottom of their stage, so their top edges line up however many lines of text
   are above them. That is what `margin-top: auto` in a stretched grid row
   buys; without it a two-line caption would push its picture down alone.
   ------------------------------------------------------------------------ */

.mf-asteps {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-astep {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem 0.85rem;
  margin: 0;
}

.mf-astep__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--type-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mf-astep__body {
  display: block;
  padding-top: 0.15rem;
}

.mf-astep__title {
  display: block;
  font-size: var(--type-body);
  font-weight: 650;
}

.mf-astep__text {
  display: block;
  font-size: var(--type-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

/* The picture: one shape everywhere, cropped rather than squashed, and the
   same rounding as every other frame on the page. */
.mf-astep__media {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-inner);
  background: var(--paper-bright);
}

.mf-astep__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet: two columns, five stages, so the rows come out 2 + 2 + 1.

   `grid-template-rows: auto 1fr` plus `align-self: end` is what lines the
   pictures up with each other: the second row takes whatever height is going,
   and the picture sits at the bottom of it. `align-content: start` would pack
   the rows to the top instead and the pictures would wander with the number of
   lines of text above them — measured, that is what they did. */
@media (min-width: 40rem) {
  .mf-asteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
  }

  .mf-astep {
    grid-template-rows: auto 1fr;
    height: 100%;
  }

  .mf-astep__media {
    align-self: end;
  }
}

/* Desktop: the five in a row, under the line.

   64rem rather than 56rem: at 900px five 16/9 pictures come out 140px wide,
   which is too small to see anything in. Below that the two-column layout
   gives them twice the width.

   A flex column here, not a grid: an auto top margin in flex absorbs the free
   space in the card, which is what puts every picture's top edge on the same
   line however many lines of caption are above it.

   The column gap is tighter than the page's usual rhythm on purpose — every
   pixel taken out of it goes into the width of the five pictures, and their
   height follows from 16/9. */
@media (min-width: 64rem) {
  .mf-asteps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0.85rem;
  }

  .mf-astep {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
  }

  .mf-astep__body {
    padding-top: 0;
  }

  .mf-astep__media {
    margin-top: auto;
  }

  /* The line runs through the middle of the numbers, drawn from the left. */
  .mf-asteps::before {
    content: '';
    position: absolute;
    top: 1.125rem;
    inset-inline: 1.125rem;
    height: 2px;
    background: var(--oak);
    transform-origin: left center;
  }
}

/* ---------------------------------------------------------------------------
   What it is made on
   ------------------------------------------------------------------------ */

.mf-akit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-amachine {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  background: var(--paper);
  border-radius: var(--radius-card);
}

.mf-amachine__draw {
  margin-bottom: 0.4rem;
  border-radius: var(--radius-inner);
  background: var(--paper-bright);
  overflow: hidden;
}

/* The roll printer has a photograph but no numbers of its own, so it sits
   beside the line that names the machines rather than in a card that would
   have nothing to say under the picture. */
.mf-aalso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.mf-aalso__media {
  flex: none;
  width: min(18rem, 100%);
  height: 7rem;
  overflow: hidden;
  border-radius: var(--radius-inner);
  background: var(--paper);
}

.mf-aalso__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-aalso .mf-aband__note {
  margin: 0;
}

.mf-amachine__draw svg {
  display: block;
  width: 100%;
  height: auto;
}

.mf-amachine__bed {
  fill: none;
  stroke: var(--border-control);
  stroke-width: 1.5;
}

.mf-amachine__rail {
  fill: var(--aluminium);
}

.mf-amachine__carriage {
  fill: var(--graphite);
}

.mf-amachine__ink {
  fill: var(--oak);
}

.mf-amachine__path {
  fill: none;
  stroke: var(--oak);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mf-amachine__bit {
  fill: var(--graphite);
}

.mf-amachine__eyebrow {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mf-amachine__name {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.mf-amachine__specs {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.mf-amachine__specs li {
  margin: 0;
  padding-inline-start: 0.9rem;
  position: relative;
  font-size: var(--type-card);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.mf-amachine__specs li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--oak);
}

.mf-amachine__note {
  margin: auto 0 0;
  padding-top: 0.6rem;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Work we have made
   ------------------------------------------------------------------------ */

.mf-aworks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(0.75rem, 2vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-awork {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.15rem);
  background: var(--paper);
  border-radius: var(--radius-card);
}

.mf-awork__media {
  margin-bottom: 0.5rem;
}

.mf-awork__title {
  margin: 0;
  font-size: var(--type-body);
  font-weight: 650;
}

.mf-awork__kind {
  margin: 0;
  font-size: var(--type-meta);
  color: var(--text-muted);
}

.mf-awork .mf-awork__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 0.5rem 0 0;
  min-height: 2.5rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--type-control);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.mf-awork .mf-awork__link .mf-icon {
  transition: transform 0.2s var(--ease);
}

/* ---------------------------------------------------------------------------
   For companies
   ------------------------------------------------------------------------ */

.mf-abiz {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

@media (min-width: 56rem) {
  .mf-abiz {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.mf-abiz__eyebrow {
  margin: 0 0 0.7rem;
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.mf-aband--dark .mf-aband__title {
  color: var(--on-dark);
}

.mf-abiz__text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.mf-abiz__actions {
  margin: 1.4rem 0 0;
}

/* On graphite the primary inverts: paper ground, ink lettering. */
.mf-aband--dark .mf-abiz__actions button.button.alt {
  margin: 0;
  background: var(--on-dark);
  border: 1px solid var(--on-dark);
  color: var(--ink);
  border-radius: var(--radius-control);
  font-size: var(--type-control);
  padding: 0.7rem 1.4rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.mf-aband--dark .mf-abiz__actions button.button.alt:hover {
  background: var(--aluminium);
  border-color: var(--aluminium);
}

.mf-abiz__list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-abiz__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--type-card);
  line-height: 1.45;
  color: var(--on-dark);
}

.mf-abiz__list .mf-icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15em;
  color: var(--oak);
}

/* The logo row. Rendered only when there are logos — there is no placeholder
   state, because an empty box in this position reads as a partner. */
.mf-apartners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  border-top: 1px solid rgba(247, 246, 243, 0.14);
  list-style: none;
}

.mf-apartners li {
  margin: 0;
}

.mf-apartners img {
  display: block;
  width: auto;
  max-width: 9rem;
  max-height: 2.75rem;
  object-fit: contain;
  /* Logos arrive in every colour; on graphite they read as one row this way,
     and come back to their own colours on hover and on focus. */
  filter: grayscale(1) brightness(1.9);
  opacity: 0.85;
  transition: filter 0.2s var(--ease), opacity 0.2s var(--ease);
}

.mf-apartners a:hover img,
.mf-apartners a:focus-visible img {
  filter: none;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   The blocks that were here before: contact, buying, the policies.
   ------------------------------------------------------------------------ */

.mf-about__grid {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* ---------------------------------------------------------------------------
   Motion

   One block, and the only block that hides anything. It is behind
   `scripting: enabled`, so a reader without JavaScript never meets it, and
   behind `prefers-reduced-motion: no-preference`, so a reader who has asked
   for less gets the finished page immediately. about.js also puts `mf-anim`
   on <html> before it does anything else and takes it off again if it throws,
   so a script that breaks halfway leaves the page readable rather than blank.
   ------------------------------------------------------------------------ */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mf-anim [data-mf-reveal] {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  .mf-anim [data-mf-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }

  /* The opening, in three beats: the two lines of the heading, then
     everything under them. Nothing waits on a scroll — it is above the
     fold. */
  .mf-anim .mf-ahero__title span {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__title span {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__title span:nth-child(2) {
    transition-delay: 0.14s;
  }

  .mf-anim .mf-ahero__eyebrow,
  .mf-anim .mf-ahero__intro,
  .mf-anim .mf-ahero__actions,
  .mf-anim .mf-ahero__line {
    opacity: 0;
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__eyebrow,
  .mf-anim .mf-ahero.is-in .mf-ahero__intro,
  .mf-anim .mf-ahero.is-in .mf-ahero__actions,
  .mf-anim .mf-ahero.is-in .mf-ahero__line {
    opacity: 1;
    transition: opacity 0.4s var(--ease);
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__intro {
    transition-delay: 0.3s;
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__actions {
    transition-delay: 0.45s;
  }

  .mf-anim .mf-ahero.is-in .mf-ahero__line {
    transition-delay: 0.55s;
  }

  /* The print leaves the machine once, over 1.2s, and then it is a picture of
     a printer with a print in it. */
  .mf-anim .mf-aprint__sheet {
    transform: translateY(76px);
  }

  .mf-anim .mf-ahero.is-in .mf-aprint__sheet {
    transform: none;
    transition: transform 1.2s cubic-bezier(0.22, 0.75, 0.3, 1) 0.35s;
  }

  /* A card lifts 3px; the arrow moves with it. The colour change that goes
     with them is not motion and sits outside this block. */
  .mf-acard:hover {
    transform: translateY(-3px);
  }

  .mf-awork:hover {
    transform: translateY(-3px);
  }

  .mf-acard:hover .mf-acard__link .mf-icon,
  .mf-awork:hover .mf-awork__link .mf-icon,
  .mf-ahero__jump:hover .mf-icon {
    transform: translateX(3px);
  }

  /* The steps: the line draws left to right, then each stage arrives on it.
     The line only exists on the five-across layout, so its rule is nested
     where it is drawn. */
  @media (min-width: 64rem) {
    .mf-anim .mf-asteps::before {
      transform: scaleX(0);
    }

    .mf-anim .mf-asteps.is-in::before {
      transform: none;
      transition: transform 0.6s var(--ease);
    }
  }

  .mf-anim .mf-astep {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .mf-anim .mf-asteps.is-in .mf-astep {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }

  /* 90ms between stages: slow enough to read as a sequence, and the last one
     starts at 0.61s and finishes at 1.01s, so the whole run is over inside
     about a second. A stage still fading two seconds after its block arrived
     reads as a page that has not loaded. */
  .mf-anim .mf-asteps.is-in .mf-astep:nth-child(1) { transition-delay: 0.25s; }
  .mf-anim .mf-asteps.is-in .mf-astep:nth-child(2) { transition-delay: 0.34s; }
  .mf-anim .mf-asteps.is-in .mf-astep:nth-child(3) { transition-delay: 0.43s; }
  .mf-anim .mf-asteps.is-in .mf-astep:nth-child(4) { transition-delay: 0.52s; }
  .mf-anim .mf-asteps.is-in .mf-astep:nth-child(5) { transition-delay: 0.61s; }

  /* Hovering a stage nudges its photograph inside the crop. The frame does not
     move, so nothing around it reflows. */
  .mf-astep__photo {
    transition: transform 0.25s var(--ease);
  }

  .mf-astep:hover .mf-astep__photo {
    transform: scale(1.03);
  }

  /* Each machine runs its one pass when it first comes into view: the print
     head crosses and lays ink; the router and the laser trace their outline
     once. None of them repeats. */
  .mf-anim .mf-amachine__carriage {
    transform: translateX(0);
  }

  .mf-anim .mf-amachine.is-in .mf-amachine__carriage {
    transform: translateX(104px);
    transition: transform 1.3s var(--ease) 0.15s;
  }

  .mf-anim .mf-amachine__ink {
    transform: scaleX(0);
    transform-origin: 18px 56px;
  }

  .mf-anim .mf-amachine.is-in .mf-amachine__ink {
    transform: none;
    transition: transform 1.3s var(--ease) 0.15s;
  }

  /* pathLength="100" in the markup normalises every outline, so one pair of
     numbers draws all of them whatever their real length. */
  .mf-anim .mf-amachine__path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }

  .mf-anim .mf-amachine.is-in .mf-amachine__path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.4s var(--ease) 0.15s;
  }

  .mf-anim .mf-apartners li {
    opacity: 0;
  }

  .mf-anim .mf-apartners.is-in li {
    opacity: 1;
    transition: opacity 0.4s var(--ease);
  }

  .mf-anim .mf-apartners.is-in li:nth-child(2) { transition-delay: 0.08s; }
  .mf-anim .mf-apartners.is-in li:nth-child(3) { transition-delay: 0.16s; }
  .mf-anim .mf-apartners.is-in li:nth-child(4) { transition-delay: 0.24s; }
  .mf-anim .mf-apartners.is-in li:nth-child(5) { transition-delay: 0.32s; }
  .mf-anim .mf-apartners.is-in li:nth-child(n + 6) { transition-delay: 0.4s; }
}

/* ---------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------ */

@media (max-width: 47.9375rem) {
  .mf-ahero {
    padding: clamp(1.1rem, 4vw, 1.5rem);
    border-inline-start-width: 3px;
  }

  .mf-ahero__actions {
    gap: 0.75rem;
  }

  .mf-ahero .mf-ahero__actions button.mf-ahero__talk,
  .mf-ahero__jump {
    width: 100%;
    justify-content: center;
  }

  .mf-afacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mf-aband--dark .mf-abiz__actions button.button.alt {
    width: 100%;
  }
}