/* =====================================================================
   BANDS — the four bands on the homepage, and /machines/.

   Owns: layouts/partials/bands.html, layouts/machines/list.html.

   Revision 2. Everything that drew the old instrument panel is gone:
   the cell outline, the gold tick that grew along the cell edge, the
   hover ticks on every link, the contents-row gold bar, and the
   segmented build meter (.claude/design-language.md §2, §6). What is
   left is type on paper, and one hover state: the thing you are
   pointing at turns maroon.
   ===================================================================== */

:root {
  /* Matched to the shell's --t so the whole site moves as one. */
  --band-t: 220ms;
  --band-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.band-name {
  transition: color var(--band-t) var(--band-ease);
}

/* The process category above a run of machines. Not mono — mono is for
   machine data now, not for labels (design-language §3). */
.band-group {
  font-size: 0.9375rem;      /* 15px — the floor (§3) */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A machine. Body size, because these are the links that matter. */
.band-leaf {
  display: inline-block;
  padding: 0.25rem 0;
  /* Fraunces, semibold, larger than the body. These are the only
     links in the section and the whole point of the page, so they
     carry more weight than the process label above them. */
  font-family: Ampersand, Fraunces, Georgia, serif;
  font-size: 1.375rem;       /* 22px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--band-t) var(--band-ease);
}

.band-leaf:hover,
.band-leaf:focus-visible {
  color: var(--maroon);
}


/* ---------------------------------------------------------------------
   THE LEAD

   The paragraph directly under the landing frame. It is the first
   thing read after "Build the Fab", so it is set as a lead — display
   face, large, tight — rather than as body copy, which at 22px looked
   like a stray paragraph floating above the bands.
   --------------------------------------------------------------------- */
.hero-lead {
  font-family: Ampersand, Fraunces, Georgia, serif;
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}


/* ---------------------------------------------------------------------
   TOUCH TARGETS

   On a phone each machine link is a tap target, and at desktop density
   they came out ~35px tall — over the 24px WCAG minimum but under the
   44px both Apple and Google ask for. The extra height is padding, so
   the text rhythm is unchanged; desktop keeps its tighter spacing.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .band-leaf {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}


/* ---------------------------------------------------------------------
   SUBSYSTEMS

   A machine that declares `partOf:` belongs to another machine and is
   listed under it rather than beside it — computer vision and the
   alignment firmware under the stepper, PVD and vacuum under the
   sputterer.

   Indented and set smaller than the machine above them, so the
   hierarchy reads without needing a rule or a bullet.
   --------------------------------------------------------------------- */
.band-subs {
  list-style: none;
  margin: 0.125rem 0 0.375rem;
  padding-left: 1.125rem;
  border-left: 1px solid var(--line);
}

.band-leaf--sub {
  font-size: 1.0625rem;      /* 17px, against the machine's 22px */
  font-weight: 400;
  color: var(--muted, #474D49);
}

.band-leaf--sub:hover,
.band-leaf--sub:focus-visible {
  color: var(--maroon);
}