/* ============================================================
   FTR — base.css
   Reset, elements, layout primitives and shared components.
   Depends on tokens.css. Loads before any page stylesheet.
   No colour, size or duration may be hard-coded below.
   ============================================================ */

/* --- RESET --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* fixed header clearance for anchors */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Numerals line up in columns. Non-negotiable on a site that
   publishes measures and reports them weekly. */
table, .u-tnum, .gate__num, .metric__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- FOCUS ---------------------------------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--d-fast) var(--ease);
}
.skip:focus-visible { top: var(--s-4); }

/* --- TYPE ----------------------------------------------------- */

.display, .h1, .h2, .h3, .h4 {
  font-family: var(--f-display);
  font-weight: var(--fw-medium);
  text-wrap: balance;      /* no widows on headlines */
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: var(--measure-head);
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight);   letter-spacing: var(--ls-h1); max-width: var(--measure-head); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-h2); max-width: min(24ch, 100%); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-h3); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: var(--measure-lead);
  color: var(--c-ink-mute);
  text-wrap: pretty;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose p { text-wrap: pretty; }

/* Bold run-in headings, not bullet lists — the Exyte prose pattern */
.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* Reference label — letterspaced caps. The controlled-document voice. */
.label {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* The business-card signature lockup. Letterspacing is fixed by
   brand, so the trailing space is trimmed with a negative margin
   to keep it optically centred. */
.lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s-3), 2vw, var(--s-6));
}
.lockup__rule {
  flex: 0 0 clamp(1.5rem, 4vw, 3rem);
  height: var(--hairline);
  background: var(--c-cyan);
}
.lockup__text {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-lockup);
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-right: calc(var(--ls-lockup) * -1);
  white-space: nowrap;
}

/* --- LINKS ---------------------------------------------------- */

a { color: inherit; }

/* Single text link — the Exyte image-block pattern */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-cyan-ink);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding-bottom: var(--s-1);
  border-bottom: var(--hairline) solid currentColor;
  transition: gap var(--d-fast) var(--ease);
}
.link:hover { gap: var(--s-4); }
.link__arrow { transition: transform var(--d-fast) var(--ease); }
.link:hover .link__arrow { transform: translateX(3px); }

.on-navy .link { color: var(--c-cyan-bright); }

/* --- BUTTONS -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease),
              color      var(--d-fast) var(--ease),
              border     var(--d-fast) var(--ease);
}

.btn--primary {
  background: var(--c-cyan);
  color: var(--c-navy);
  font-weight: var(--fw-semibold);
}
.btn--primary:hover { background: var(--c-cyan-bright); }

.btn--ghost {
  background: transparent;
  color: var(--c-on-navy);
  border-color: var(--c-navy-line);
}
.btn--ghost:hover {
  border-color: var(--c-cyan);
  color: var(--c-cyan-bright);
}

.btn--outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-rule);
}
.btn--outline:hover { border-color: var(--c-ink); }

/* --- LAYOUT --------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-section); }
.section--tight { padding-block: var(--s-section-tight); }

/* Surfaces */
.on-navy {
  background: var(--c-navy);
  color: var(--c-on-navy);
}
.on-navy .label        { color: var(--c-cyan); }
.on-navy .lead         { color: var(--c-on-navy-mute); }
.on-navy .prose strong { color: var(--c-white); }

.on-paper { background: var(--c-paper); }

/* 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- THE HOLD POINT ------------------------------------------
   The organising device of the site. Each major section is a gate
   hung off a fine vertical spine. When the section enters the
   viewport the cyan rule draws across it: the gate is released.
   Motion is meaningful here, not decorative. */

.gate { position: relative; }

.gate__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-8);
  position: relative;
}

.gate__num {
  flex: none;
  font-family: var(--f-display);
  font-size: var(--fs-gate);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  color: var(--c-cyan-ink);
}
.on-navy .gate__num { color: var(--c-cyan); }

.gate__status {
  margin-left: auto;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.on-navy .gate__status { color: var(--c-on-navy-mute); }

/* The release. Drawn, not faded. */
.gate__head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--hairline);
  background: var(--c-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-release) var(--ease);
}
.gate.is-released .gate__head::after { transform: scaleX(1); }

/* The spine — a hairline running the height of the page body,
   marked at every gate. Suppressed below 1100px, where the page
   is too narrow to carry it without crowding the measure. */
/* The spine is a component: home.css positions it and paints its
   rule, fill and arrow. Nothing is declared here beyond the reset
   the container needs. */
.spine { background: none; pointer-events: none; }

/* --- MOTION ----------------------------------------------------
   One idea governs every entrance on this site: things are
   RELEASED, not animated in. A hold point is released by drawing a
   line across it, so type is set left to right, imagery is
   uncovered left to right, rules draw, numerals count up.

   Nothing translates on entry. Sliding a block up while fading it
   in is the default gesture of every page builder in existence —
   it is what makes a site look assembled rather than designed, and
   it carries no meaning here. It is not used anywhere on this site. */

/* The neutral base. Carries no character of its own: it exists so a
   block is not visible before its own signature motion runs. */
.reveal {
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; }

/* The signature. Type is uncovered by a moving edge, the same edge
   that draws the gate rules — so the headline and the hold point
   above it are visibly the same gesture.

   The final inset is negative on three sides: clipping exactly at
   the border box shaves the overhang on a tight display face. */
/* The clip is driven by the nearest released ancestor, never by the
   element's own observer entry: IntersectionObserver measures the
   VISIBLE area, so an element collapsed by its own clip-path reports
   a ratio of zero, never intersects, and would stay hidden for good. */
.wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-wipe) var(--ease);
  transition-delay: var(--wipe-delay, 0ms);
}
.is-in .wipe { clip-path: inset(0 0 0 0); }

/* No-JS safety: content is never gated on the observer running. */
.no-js .reveal { opacity: 1; }
.no-js .wipe,
.no-js .figure img { clip-path: none; }

/* Reduced motion: no edge travels. State is applied, not animated. */
@media (prefers-reduced-motion: reduce) {
  .wipe, .is-in .wipe,
  .figure img, .figure.is-in img { clip-path: none; }
}

/* --- MEDIA ----------------------------------------------------
   Context imagery is never shown raw. The navy veil pulls stock
   photography into the brand and removes its stock-photo tell.
   Per brief: no caption may imply FTR built what is pictured, so
   context images carry no caption at all. */

.figure {
  position: relative;
  overflow: hidden;
  background: var(--c-navy);
}

/* The photograph is uncovered by the same moving edge as the type,
   and settles out of a slight oversize as the edge passes it. */
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.06);
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
  transition: clip-path var(--d-wipe) var(--ease),
              transform var(--d-wipe) var(--ease),
              filter    var(--d-slow) var(--ease);
}
.figure.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

.figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 27, 42, 0.42) 0%,
    var(--veil-navy) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- HEADER --------------------------------------------------- */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--d-base) var(--ease),
              border     var(--d-base) var(--ease);
  border-bottom: var(--hairline) solid transparent;
}
.header.is-stuck {
  background: rgba(13, 27, 42, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--c-navy-line);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: clamp(4.25rem, 3.6rem + 2.6vw, 5.5rem);
}

/* Generous clear space, with extra room to the right for the
   arrow tail on the R. Brief, Part 4. */
.header__logo {
  display: block;
  flex: none;
  padding-right: var(--s-4);
}
.header__logo img { height: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem); width: auto; }

/* --- Nav trigger ------------------------------------------------
   Three bars open the drawer at every viewport. The drawer carries
   its own close control, so the trigger never has to chase the
   panel's edge on wide screens. */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  color: var(--c-on-navy);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.nav__toggle:hover { color: var(--c-cyan-bright); }

.nav__toggle-bars {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 14px;
}
.nav__toggle-bars span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: width var(--d-base) var(--ease);
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 6px; width: 72%; }
.nav__toggle-bars span:nth-child(3) { top: 12px; width: 44%; }
.nav__toggle:hover .nav__toggle-bars span { width: 100%; }

/* --- Backdrop --------------------------------------------------- */
.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(5, 12, 20, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-slow) var(--ease),
              visibility var(--d-slow) var(--ease);
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* --- Drawer ------------------------------------------------------
   A controlled-document panel: logo head, reference label, numbered
   register of pages, direct line to a director, signature lockup.
   Full-width sheet on a phone, a fixed reading panel on desktop. */
.nav {
  --nav-pad: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: calc(var(--z-menu) + 1);
  width: min(100vw, 31rem);
  display: flex;
  flex-direction: column;
  padding: 0 var(--nav-pad) var(--nav-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-navy-deep);
  border-left: var(--hairline) solid var(--c-navy-line);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform  var(--d-slow) var(--ease),
              visibility var(--d-slow) var(--ease);
}
.nav.is-open { transform: none; visibility: visible; }

/* Ghosted mark from the business card. Supplied artwork, opacity only. */
.nav::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 12%;
  width: 90%;
  aspect-ratio: 1200 / 423;
  background: url("../img/ftr-mark.webp") no-repeat center / contain;
  opacity: 0.035;
  pointer-events: none;
}

.nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: clamp(4.25rem, 3.6rem + 2.6vw, 5.5rem);
  margin-bottom: clamp(var(--s-6), 6vh, var(--s-9));
}
.nav__logo { height: 1.75rem; width: auto; }

.nav__close {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: calc(var(--s-3) * -1);
  background: none;
  border: none;
  color: var(--c-on-navy);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.nav__close:hover { color: var(--c-cyan-bright); }
.nav__close-x::before,
.nav__close-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
  transition: transform var(--d-base) var(--ease);
}
.nav.is-open .nav__close-x::before {
  transform: translate(-50%, -50%) rotate(45deg) scaleX(1);
  transition-delay: 240ms;
}
.nav.is-open .nav__close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
  transition-delay: 300ms;
}
.nav__close:hover .nav__close-x::before { transform: translate(-50%, -50%) rotate(135deg) scaleX(1); }
.nav__close:hover .nav__close-x::after  { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }

.nav__label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-navy-mute);
  margin-bottom: var(--s-4);
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--c-navy-line);
}

/* Each row owns its bottom rule: a static hairline that draws in on
   open, and a cyan one that sweeps across on hover. */
.nav__item {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--d-base) var(--ease),
              transform var(--d-base) var(--ease);
}
.nav__item::before,
.nav__item::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--hairline);
  transform: scaleX(0);
  transform-origin: left;
}
.nav__item::before {
  background: var(--c-navy-line);
  transition: transform var(--d-slow) var(--ease);
}
.nav__item::after {
  background: var(--c-cyan);
  transition: transform var(--d-base) var(--ease);
}
.nav.is-open .nav__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(180ms + var(--i, 0) * 60ms);
}
.nav.is-open .nav__item::before {
  transform: scaleX(1);
  transition-delay: calc(220ms + var(--i, 0) * 60ms);
}

.nav__link {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  padding-block: clamp(var(--s-4), 2.2vh, var(--s-5));
  color: var(--c-on-navy);
  text-decoration: none;
}
.nav__num {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--c-on-navy-mute);
  transition: color var(--d-fast) var(--ease);
}
.nav__name {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  transition: transform var(--d-base) var(--ease),
              color var(--d-fast) var(--ease);
}
.nav__arrow {
  width: 16px;
  height: auto;
  opacity: 0.35;
  transform: translateX(-6px);
  transition: transform var(--d-base) var(--ease),
              opacity var(--d-base) var(--ease);
}

.nav__link:hover .nav__num,
.nav__link:focus-visible .nav__num { color: var(--c-cyan); }
.nav__link:hover .nav__name,
.nav__link:focus-visible .nav__name { transform: translateX(6px); color: var(--c-white); }
.nav__link:hover .nav__arrow,
.nav__link:focus-visible .nav__arrow { opacity: 1; transform: none; }
.nav__item:hover::after,
.nav__item:focus-within::after { transform: scaleX(1); }

.nav__link[aria-current="page"] .nav__num,
.nav__link[aria-current="page"] .nav__name { color: var(--c-cyan-bright); }
.nav__item:has([aria-current="page"])::after { transform: scaleX(1); }

.nav__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(var(--s-7), 6vh, var(--s-10));
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
}
.nav.is-open .nav__foot { opacity: 1; transition-delay: 520ms; }

.nav__lockup { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__item, .nav__item::before, .nav__foot,
  .nav__close-x::before, .nav__close-x::after { transition-delay: 0ms !important; }
}

/* --- FOOTER --------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-deep);
  color: var(--c-on-navy);
  padding-block: var(--s-11) var(--s-7);
}

/* The large ghosted mark from the business card. Supplied artwork,
   opacity only — usage, not modification. */
.footer__watermark {
  position: absolute;
  right: calc(var(--gutter) * -1);
  bottom: clamp(3rem, 6vw, 5rem);
  width: min(52%, 44rem);
  pointer-events: none;
  user-select: none;
}
.footer__watermark img { width: 100%; height: auto; opacity: 0.05; }
@media (max-width: 760px) { .footer__watermark { display: none; } }

.footer__shell { position: relative; }

/* Layout lives here, not in a page stylesheet: the footer is shared,
   and every page must render it identically. */
.footer__grid  { row-gap: var(--s-8); }
.footer__brand { grid-column: span 4; }
.footer__col   { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 7 / span 2; }

.footer__logo { height: 1.75rem; width: auto; margin-bottom: var(--s-5); }

.footer__addr {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--c-on-navy-mute);
  max-width: min(38ch, 100%);
}
.footer__addr a { color: var(--c-on-navy); }

/* Email as text, not a mailto link — harvesting rule in the brief.
   The Contact page form is the working route. */
.footer__mail { color: var(--c-on-navy); }

.footer__title {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: var(--s-5);
}
.footer__list { font-size: var(--fs-sm); }
.footer__list > li + li { margin-top: var(--s-3); }

@media (max-width: 900px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:first-of-type { grid-column: span 2; }
}
@media (max-width: 560px) {
  .footer__col, .footer__col:first-of-type { grid-column: 1 / -1; }
  .footer__issue { margin-left: 0; }
}
.footer a { color: var(--c-on-navy-mute); text-decoration: none; }
.footer a:hover { color: var(--c-cyan-bright); }

.footer__lockup { padding-block: var(--s-9) var(--s-8); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  padding-top: var(--s-6);
  border-top: var(--hairline) solid var(--c-navy-line);
  font-size: var(--fs-xs);
  color: var(--c-on-navy-mute);
}

/* The issue line. The site presents itself as a controlled
   document, so it states its own revision. */
.footer__issue {
  margin-left: auto;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --- UTILITIES ------------------------------------------------ */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Gate head, flush ------------------------------------------
   Where a ruled block follows a gate directly, the gate rule is that
   block's top edge. Two parallel rules 60px apart read as an
   accident rather than as structure. */

.gate__head--flush { margin-bottom: 0; }

/* --- Flex and grid item overflow safety -------------------------
   Items default to min-width:auto and will not shrink below their
   content, which is the usual cause of horizontal overflow on a
   phone. Applied once here rather than patched per component. */

.grid > *,
.paths > *,
.people > * { min-width: 0; }

/* --- Buttons on narrow screens ---------------------------------
   The default 2rem side padding pushes a long label into the gutter
   below ~520px. Tightened rather than truncating the label. */

@media (max-width: 520px) {
  .btn { padding-inline: var(--s-5); font-size: var(--fs-xs); }
}