/* ==========================================================================
   Homepage
   --------------------------------------------------------------------------
   Six blocks, alternating paper and mist so rhythm comes from contrast rather
   than from height. Section padding stays at --section-y (56px desktop, 40px
   below 768px) throughout: the page is kept short by having six blocks, not by
   squeezing the ones it has.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons and inline links
   -------------------------------------------------------------------------- */

.fame-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.fame-btn--light {
  background: var(--paper);
  color: var(--ink);
}

.fame-btn--light:hover {
  background: var(--mist);
  color: var(--indigo-d);
}

.fame-btn--ghost {
  border-color: rgba(255, 255, 255, .32);
  color: var(--on-dark);
}

.fame-btn--ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* The same idea as --ghost, for paper. --ghost is a white rule and white text
   and it is genuinely invisible on a light surface, which is what the second
   action on the empty search result was: a control the reader could only find
   by hovering it. */
.fame-btn--outline {
  border-color: var(--line);
  background: var(--paper);
  color: var(--accent-text);
}

.fame-btn--outline:hover {
  border-color: var(--accent);
  background: var(--mist);
}

.fame-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-decoration: none;
}

.fame-link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* A field with no value. Quiet, and the same weight as the metadata around it:
   it is a statement about the record, not a warning about the site. */
.fame-pending {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--mist);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

.fame-hero .fame-pending,
.fame-triptych .fame-pending,
.fame-section--ink .fame-pending {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   Block 1 — hero
   -------------------------------------------------------------------------- */

.fame-hero {
  padding-block: var(--s-9) var(--s-8);

  /* Two offset radials over the flat ink. A linear wash across a full-bleed
     hero bands visibly at this lightness on a wide screen; radials do not, and
     the light reads as coming from behind the content column. The ink itself
     is the last layer, so the surface is never lighter than --ink and the
     on-dark contrast ratios all still hold. */
  background: var(--grad-ink);
  color: var(--on-dark);
}

.fame-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  gap: var(--s-8);
}

.fame-hero h1 {
  max-width: 15ch;
  margin-top: var(--s-4);
  font-size: var(--t-hero);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-hero);
  color: var(--on-dark);
}

.fame-hero__standfirst {
  max-width: 62ch;
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--on-dark-2);
}

.fame-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.fame-hero__rule {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--on-dark-mute);
}

.fame-hero__live {
  padding: var(--s-5);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
}

.fame-hero__livehead {
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
  color: var(--on-dark);
}

.fame-hero__livesub {
  margin: var(--s-1) 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.fame-hero__livelink {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--on-dark-2);
  text-decoration: none;
}

.fame-hero__livelink:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: .2em; }

/* --------------------------------------------------------------------------
   Record lists — used in the hero card and in every practice tab
   -------------------------------------------------------------------------- */

.fame-minilist {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  overflow: hidden;
}

.fame-minilist li + li { border-top: 1px solid rgba(255, 255, 255, .12); }

.fame-minilist a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--s-4);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: inherit;
}

.fame-minilist a:hover { background: rgba(255, 255, 255, .05); }

.fame-minilist__title {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--on-dark);
}

.fame-minilist__body {
  grid-column: 1;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--on-dark-mute);
}

.fame-minilist__dates {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-dark-mute);
  white-space: nowrap;
}

/* The same list on a light surface. */
.fame-minilist--light { border-color: var(--line); }
.fame-minilist--light li + li { border-top-color: var(--line); }
.fame-minilist--light a:hover { background: var(--mist); }
.fame-minilist--light .fame-minilist__title { color: var(--ink); }
.fame-minilist--light .fame-minilist__body,
.fame-minilist--light .fame-minilist__dates { color: var(--muted); }

/* --------------------------------------------------------------------------
   Block 2 — proof bar
   -------------------------------------------------------------------------- */

.fame-proof {
  padding-block: var(--s-6);
  background: var(--ink-2);
  color: var(--on-dark);
}

.fame-proof__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-proof__item {
  padding-left: var(--s-4);
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.fame-proof__value {
  display: block;
  font-size: 30px;
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  color: var(--on-dark);
}

.fame-proof__label {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.fame-proof__foot {
  max-width: 96ch;
  margin: var(--s-5) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.fame-sechead { margin-bottom: var(--s-6); }

.fame-sechead--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}

.fame-sechead h2 {
  max-width: 24ch;
  margin-top: var(--s-2);
  letter-spacing: var(--tr-head);
}

.fame-sechead .fame-lead { max-width: 78ch; margin-top: var(--s-4); }

.fame-kicker {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

/* The scroller exists only to host the edge cues. The tablist itself has to
   stay the scrolling element, because that is what carries role="tablist" and
   what the keyboard handler moves. */
.fame-tabs__scroller {
  position: relative;
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

/* A fade at whichever edge has more content behind it, plus a chevron so the
   cue survives for anyone who reads a soft edge as a rendering artefact rather
   than as an affordance. Both are pointer-events:none — they indicate, they are
   not controls; the strip itself is swipeable and the arrow keys move it. */
.fame-tabs__scroller::before,
.fame-tabs__scroller::after {
  position: absolute;
  top: 0;
  bottom: 1px;
  z-index: 2;
  width: 52px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  content: "";
}

.fame-tabs__scroller::before {
  left: 0;
  background: linear-gradient(to right, var(--paper) 20%, rgba(255, 255, 255, 0));
}

.fame-tabs__scroller::after {
  right: 0;
  background: linear-gradient(to left, var(--paper) 20%, rgba(255, 255, 255, 0));
}

.fame-tabs__scroller[data-overflow="start"]::before,
.fame-tabs__scroller[data-overflow="both"]::before { opacity: 1; }

.fame-tabs__scroller[data-overflow="end"]::after,
.fame-tabs__scroller[data-overflow="both"]::after { opacity: 1; }

.fame-section--mist .fame-tabs__scroller::before { background: linear-gradient(to right, var(--mist) 20%, rgba(246, 247, 252, 0)); }
.fame-section--mist .fame-tabs__scroller::after  { background: linear-gradient(to left, var(--mist) 20%, rgba(246, 247, 252, 0)); }

.fame-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

/* position:relative is load-bearing, not cosmetic. The tab carries a
   visually-hidden span for its count, and .screen-reader-text is
   position:absolute — with no positioned ancestor it resolved against the
   document instead of the button, escaped the tablist's overflow-x container
   and pushed the page 292px wider than a 390px viewport. */
.fame-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: -1px;
  padding: 10px var(--s-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--muted);
  cursor: pointer;
}

.fame-tab:hover { color: var(--accent-text); }

.fame-tab[aria-selected="true"] {
  border-bottom-color: var(--indigo);
  color: var(--ink);
}

.fame-tab__n {
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--line-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* brand-700, like the solid button and for the same reason: this is an 11px
   count in white, and brand-600 behind it measured 4.06:1. */
.fame-tab[aria-selected="true"] .fame-tab__n { background: var(--brand-700); color: var(--paper); }

/* Before the script runs, the panels are a plain readable stack. Only once the
   tablist exists do they need separating rules. */
.fame-tabs__panel + .fame-tabs__panel { margin-top: var(--s-7); }
.fame-tabs--ready .fame-tabs__panel + .fame-tabs__panel { margin-top: 0; }

.fame-panelgrid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
  gap: var(--s-7);
}

/* The commissioning-route panels are not two columns at all. Their named lists
   run to nineteen bodies on the government route while the prose beside them is
   four lines, so a two-column grid left most of a screen height empty. The
   prose sits full width and the record runs beneath it. */
.fame-panelgrid:has(> .fame-parties) { display: block; }

.fame-panelgrid > .fame-parties {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.fame-panelgrid > div > p { max-width: 62ch; color: var(--muted); }

.fame-tabs__title { margin-bottom: var(--s-3); letter-spacing: var(--tr-head); }

/* --------------------------------------------------------------------------
   Capability chips
   -------------------------------------------------------------------------- */

.fame-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-5) 0;
  padding: 0;
  list-style: none;
}

.fame-chips li {
  padding: 5px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--mist);
  font-size: 12.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Image band
   -------------------------------------------------------------------------- */

.fame-triptych {
  padding-block: var(--section-y);
  background: var(--ink);
}

.fame-triptych__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-triptych__cell { height: 100%; }

.fame-triptych__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
}

.fame-triptych__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.fame-triptych__year { text-transform: none; letter-spacing: .04em; color: var(--on-dark-mute); }

.fame-triptych__caption {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--on-dark-2);
}

/* The assignment behind the photograph, linked to its record. Set in the data
   face so it reads as a citation rather than as a second sentence of caption. */
.fame-triptych__assignment {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .01em;
}

.fame-triptych__assignment a {
  color: var(--on-dark-mute);
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: .2em;
}

.fame-triptych__assignment a:hover { color: var(--cyan); text-decoration-color: currentColor; }

.fame-triptych__note {
  margin: var(--s-5) 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------------------------
   Commissioning routes — marks and named parties
   -------------------------------------------------------------------------- */

.fame-routelinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.fame-routelinks .fame-num {
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--line-2);
  font-size: 11px;
}

.fame-marks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-2);
  max-width: 640px;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.fame-marks li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Optical height normalisation, not bounding-box: a wordmark and a crest do not
   read as the same size in the same box. The per-mark cap is set in the logo
   registry and arrives as an inline max-height; this is only the fallback. */
.fame-marks__img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.fame-marks__note {
  margin: 0 0 var(--s-5);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.fame-parties__head {
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The government route names nineteen bodies. In one column that left half the
   panel empty beside it; two columns keep the list complete — which is the
   whole point of printing it — without the void. */
.fame-parties__list {
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  columns: 3;
  column-gap: var(--s-6);
}

.fame-parties__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  break-inside: avoid;
}

.fame-parties__list .fame-num { color: var(--muted); font-size: 12px; }

/* --------------------------------------------------------------------------
   Standards grid
   -------------------------------------------------------------------------- */

.fame-stdgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-std {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.fame-std__tag {
  display: inline-block;
  margin: 0 0 var(--s-3);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--indigo);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--paper);
}

.fame-std__name { margin-bottom: var(--s-2); font-size: var(--t-h4); font-weight: var(--w-medium); }

.fame-std__name a { color: inherit; text-decoration: none; }

/* The card is a link target, but the heading carries the accessible name — the
   pseudo-element only enlarges the hit area. */
.fame-std { position: relative; }
.fame-std__name a::after { position: absolute; inset: 0; content: ""; }
.fame-std:hover { border-color: var(--indigo-l); }
.fame-std:hover .fame-std__name a { color: var(--accent-text); }
.fame-std:focus-within { outline: 2px solid var(--indigo); outline-offset: 2px; }

.fame-std__body { margin: 0; font-size: var(--t-xs); line-height: 1.6; color: var(--muted); }

.fame-stdgrid__foot {
  margin: var(--s-5) 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Block 6 — assurance
   -------------------------------------------------------------------------- */

.fame-assurance {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: start;
  gap: var(--s-8);
}

.fame-quote {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--cyan);
}

.fame-quote p {
  margin: 0;
  font-size: 21px;
  font-weight: var(--w-medium);
  line-height: 1.45;
  letter-spacing: var(--tr-head);
  color: var(--ink);
}

.fame-quote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--muted);
}

.fame-assurance__panel {
  max-width: 66ch;
  margin-top: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.fame-isobox {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.fame-isobox__list { margin: var(--s-4) 0 0; }

.fame-isobox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}

.fame-isobox__row:last-child { border-bottom: 0; }

.fame-isobox__row dt {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink);
}

.fame-isobox__row dd {
  margin: 0;
  font-size: 12.5px;
  text-align: right;
  color: var(--muted);
}

.fame-isobox__foot {
  margin: var(--s-4) 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

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

@media (max-width: 1040px) {
  .fame-hero__grid,
  .fame-panelgrid,
  .fame-assurance { grid-template-columns: 1fr; }

  .fame-hero__grid { gap: var(--s-6); }
  .fame-hero h1 { max-width: none; }
  .fame-proof__grid { grid-template-columns: repeat(3, 1fr); }
  .fame-stdgrid { grid-template-columns: repeat(2, 1fr); }
  .fame-parties__list { columns: 2; }
}

@media (max-width: 768px) {
  .fame-hero { padding-block: var(--s-7) var(--s-7); }
  .fame-proof__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .fame-proof__value { font-size: 25px; }
  .fame-triptych__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .fame-stdgrid { grid-template-columns: 1fr; }
  .fame-sechead h2 { max-width: none; }
  .fame-parties__list { columns: 1; }

  /* Tabs become a horizontally scrollable strip rather than wrapping to three
     rows, which would push the panel below the fold on a phone. */
  .fame-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;

    /* Momentum scrolling on iOS, and snapping so a swipe lands on a tab
       rather than halfway through one. proximity, not mandatory: mandatory
       fights a deliberate short drag and feels like the strip is arguing. */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--s-5);
  }

  .fame-tabs__list::-webkit-scrollbar { display: none; }

  .fame-tab {
    flex: none;
    scroll-snap-align: start;

    /* 40px measured, against a 44px minimum touch target. The strip is the
       one control on the page a thumb has to hit precisely. */
    min-height: 44px;
  }

  /* Room for the fade so the last tab does not sit under it at rest. */
  .fame-tabs__list::after {
    flex: none;
    width: var(--s-5);
    content: "";
  }
}

/* --------------------------------------------------------------------------
   Commissioning-body band
   --------------------------------------------------------------------------
   Two opposing tracks in continuous motion. Pure CSS: no library, no script,
   no dependency that can fail and leave the band blank.

   The loop is seamless because the item set is printed twice and the track
   translates by exactly half its width — at -50% the second set sits precisely
   where the first started, so the reset is invisible. That is also why the row
   must never be given a gap between the two sets: a gap would make the jump
   visible at the wrap point.
   -------------------------------------------------------------------------- */

.fame-clients {
  padding-block: var(--section-y);
  background: var(--mist);
  overflow: hidden;
}

.fame-clients h2 {
  max-width: 24ch;
  margin-top: var(--s-2);
  margin-bottom: var(--s-6);
  letter-spacing: var(--tr-head);
}

/* The band is held inside the content column rather than run full bleed, and
   fades at both ends.

   The fade is a mask, not a gradient overlay: an overlay would have to be
   painted in the section's background colour, which breaks the moment the band
   moves onto a different surface or a dark mode arrives. A mask is transparent
   to whatever is behind it, so the edges are correct by construction.

   The soft edge is also what makes the motion legible. Marks that vanish at a
   hard border read as a strip that has been cut off; marks that dissolve read
   as a window onto a longer list, which is what this is. */
.fame-clients__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.fame-clients__row + .fame-clients__row { margin-top: var(--s-4); }

/* Durations are set so both rows travel at roughly the same speed, ~35px/s —
   slow enough to read a caption without stopping. They are tied to track
   length, so adding or resizing tiles means revisiting them. */
.fame-clients__track {
  display: flex;
  width: max-content;
  animation: fame-marquee 82s linear infinite;
}

.fame-clients__row[data-direction="right"] .fame-clients__track {
  animation-name: fame-marquee-reverse;
  animation-duration: 100s;
}

@keyframes fame-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fame-marquee-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Motion stops while a visitor is reading a mark, and while anything inside
   the band has keyboard focus. */
.fame-clients__row:hover .fame-clients__track,
.fame-clients__row:focus-within .fame-clients__track { animation-play-state: paused; }

.fame-clients__set {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fame-clients__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
  flex: none;
  width: 196px;
  padding: var(--s-4) var(--s-3);
  border-left: 1px solid var(--line);
  background: var(--paper);
}

/* The mark box is a fixed height for every tile, so the marks sit on one
   optical line across the row and only the captions below them vary in depth.
   Tiles stretch to the tallest caption, which keeps the row edges straight.

   Sized against the reference FAME supplied: seven tiles across the column
   rather than five, and a band that reads as a footer strip rather than as a
   section in its own right. */
.fame-clients__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
}

/* The per-mark inline max-height from the registry is what actually sizes each
   logo; this rule caps them all to the box. Sources are served at `large` with
   a srcset, not `medium`: at this render size a 300px-wide thumbnail is below
   2x on a retina display and the marks go soft. */
.fame-clients__img {
  max-width: 100%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Full legal name, acronym in brackets — the form a capability statement uses,
   and the form a procurement officer searching for a reference will recognise.
   A few run to three lines at this width; the tiles stretch to match. */
.fame-clients__name {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .03em;
  text-align: center;
  text-wrap: balance;
  color: var(--muted);
}

/* Reduced motion is not a degraded version of this band — it is the same
   content, wrapped and still. Nothing is lost by turning the animation off,
   which is the test of whether motion was carrying information. */
@media (prefers-reduced-motion: reduce) {
  /* Nothing scrolls past the edge here, so the fade would just dim the first
     and last tile of a static grid for no reason. */
  .fame-clients__row {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fame-clients__track {
    flex-wrap: wrap;
    width: 100%;
    animation: none;
    transform: none;
  }

  .fame-clients__set { flex-wrap: wrap; flex: 1 1 100%; }
  .fame-clients__set[aria-hidden="true"] { display: none; }
  .fame-clients__item { flex: 1 1 176px; width: auto; }
}

/* Marks scale down with the tile. The registry's inline max-height has to be
   overridden here — it is a per-mark desktop value, and !important is the only
   way a stylesheet outranks a style attribute. */
@media (max-width: 768px) {
  .fame-clients__item { width: 156px; padding: var(--s-3); }
  .fame-clients__mark { height: 52px; }
  .fame-clients__img { max-height: 44px !important; }
  .fame-clients__name { font-size: 9.5px; }
}