/* The capability board. Weight, not uniformity, is what keeps this from
   reading as a card wall: five headline capabilities each get a heading, room
   and their own proof; the next seven get a heading and a line; the platform
   facts get one mono strip. */

.board {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--band-y) var(--gutter-x);
  border-top: 1px solid var(--hairline);
}

.board__head h2 {
  max-width: 20ch;
}

.board__head p {
  margin-top: 1.1rem;
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--lead);
  line-height: 1.55;
}

/* ---- headline capabilities ---- */

.cap {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(2.6rem, 5vw, 4rem);
  border-top: 1px solid var(--hairline);
}

.cap h3 {
  max-width: 24ch;
}

.cap p {
  margin-top: 1.05rem;
  max-width: 66ch;
  color: var(--muted);
}

.cap p b {
  color: var(--cream);
  font-weight: 600;
}

.cap .shot {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

/* ---- the rest of the window ---- */

/* This block used to sit inside the capability board and carried its own rule
   and its own run-up. It is a section of its own now, so the board's border and
   band do that job — keeping both drew two hairlines with a hole between them. */

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2.4rem;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}

.caps li {
  padding-top: 0.95rem;
  border-top: 1px solid var(--hairline);
}

.caps h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.caps p {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- platform facts ---- */

/* Columns rather than a separator-joined run: a wrapping flex row puts a
   divider at the start of every new line, which reads as a typo. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.4rem 2rem;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0;
  padding: clamp(1.3rem, 2vw, 1.8rem) 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
  font-size: var(--label);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--fleet);
}

/* ---- the showcase ---- */

.board--first {
  border-top: 0;
  padding-top: 0;
}

/* Text tabs with an underline that doubles as the progress of the film playing
   in the panel — a pill in the accent colour read as a stray control, and
   nothing told a reader the tabs advance by themselves. */
.showcase__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--hairline);
}

.showcase__tab {
  position: relative;
  padding: 0 0 0.75rem;
  border: 0;
  background: none;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 0.2s;
}

.showcase__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  /* the value arrives every frame, so the bar needs no easing of its own —
     any transition here would lag behind the film instead of tracking it */
  will-change: transform;
}

.showcase__tab:hover {
  color: var(--muted);
}

.showcase__tab[aria-selected="true"] {
  color: var(--cream);
}

/* On a short, wide window it is the film that falls off the bottom, because its
   height is its width and its width is the column's. So the showcase — tab strip
   included, since both live in this element — takes the width the height left
   over can afford, and keeps its one set of edges while doing it. Above roughly
   850px of viewport this is the full column and nothing moves.

   Only where that window exists: on a phone the height left over is small
   enough — in landscape, tiny — that the same sum would collapse the showcase
   to a couple of hundred pixels. There the column is already narrower than the
   height can afford. */
@media (min-width: 900px) {
  .showcase--tabbed {
    /* the floor is what keeps a wide window only 400px tall from squeezing the
       showcase into a column narrower than the prose in it */
    width: min(100%, max(28rem, calc((100svh - 15rem) * 16 / 9)));
  }
}

/* One height for every panel, contents centred in it: switching tabs must not
   move the page under the reader. */
.showcase--tabbed .cap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(34rem, 62vw, 54rem);
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 0;
}

/* Claim, proof, detail — in that order, because a panel has to fit a screen.
   Six lines of prose above a full-width 16:9 film put the film off the bottom
   of the viewport, so the panel leads with the claim alone and the rest of the
   prose reads after the film that proves it. */
.cap__detail {
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--muted);
  font-size: 0.97rem;
}

/* Everything in a panel shares the column's two edges. Capping the heading, the
   paragraph and the figure separately gave the panel three different widths,
   and the figure was the worst of them: a height cap with width:auto shrank it
   sideways. The cap is not needed now that one panel is on screen instead of
   five. */
.showcase--tabbed .cap h3,
.showcase--tabbed .cap p,
.showcase--tabbed .cap .cap__detail {
  max-width: none;
}

.showcase--tabbed .cap .shot img,
.showcase--tabbed .cap .shot__film {
  width: 100%;
  max-width: 100%;
  max-height: none;
}

/* Five labels do not fit one phone line, and wrapping them left the active
   tab's progress underline stranded under a row of its own. A single row that
   scrolls sideways stays readable as a strip, and the tab that takes over
   scrolls itself into view (see presentation/showcase.js). */
@media (max-width: 700px) {
  .showcase__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .showcase__tabs::-webkit-scrollbar {
    display: none;
  }

  .showcase__tab {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__tab {
    transition: none;
  }
}