/* Shared viewport rules for every public page and embedded map. */
:root {
  --max: min(92vw, 4000px);
  --page-gutter: clamp(24px, 2.1vw, 112px);
}

html,
body {
  max-width: 100%;
}

.container,
.hero-original {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  max-width: none;
}

main,
main :is(section, article, figure, fieldset, .container) {
  min-width: 0;
}

/* The rail starts on the same edge as its heading, even after the viewport grows. */
.team-shell {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  max-width: none;
  margin-inline: auto;
}

.team-viewport {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.team-track {
  padding-left: 0 !important;
}

.mrhd .in,
.mrft .mrft-in {
  padding-inline: var(--page-gutter);
}

/* Large displays gain useful content width and scale without stretching copy. */
@media (min-width: 2200px) {
  :root {
    --page-gutter: clamp(72px, 2.1vw, 132px);
  }

  body {
    font-size: clamp(17px, .48vw, 22px);
  }

  .site-header.mrhd {
    height: clamp(144px, 4.2vw, 184px);
  }

  .mrhd .in {
    gap: clamp(28px, 2vw, 72px);
  }

  .mrhd .nav {
    gap: clamp(20px, 1.45vw, 48px);
  }

  .mrhd .nav a,
  .mrhd .nav summary {
    font-size: clamp(15px, .68vw, 22px);
  }

  .hero-original {
    min-height: clamp(720px, 31vw, 1500px);
  }

  .hero-original .hero-inner {
    max-width: min(2200px, 76vw);
    padding-block: clamp(96px, 6vw, 180px);
  }

  .hero-original h1 {
    font-size: clamp(68px, 2.35vw, 108px);
  }

  .hero-original .lead {
    max-width: 48ch;
    font-size: clamp(28px, 1.1vw, 42px);
  }

  .hero-original .hero-credential {
    font-size: clamp(17px, .72vw, 25px);
  }

  .section {
    padding-block: clamp(92px, 5.4vw, 176px);
  }

  .section-sm {
    padding-block: clamp(64px, 3.8vw, 124px);
  }

  .section-head h2,
  .team-heading h2 {
    font-size: clamp(56px, 2.35vw, 88px);
  }

  main p {
    max-inline-size: 68ch;
  }

  .team-card {
    --team-card-width: clamp(420px, 14.5vw, 620px);
  }

  .team-track {
    gap: clamp(28px, 1.5vw, 56px);
  }

  .team-details {
    padding: clamp(24px, 1.5vw, 48px);
  }

  .team-details h3 {
    font-size: clamp(30px, 1.05vw, 42px);
  }

  .team-card .team-role {
    font-size: clamp(16px, .62vw, 21px);
  }

  .region-atlas .map-embed {
    height: clamp(880px, 27vw, 1280px);
  }
}

/* Tablet and phone retain the existing compact navigation and stacked layouts. */
@media (max-width: 900px) {
  :root {
    --max: 100vw;
    --page-gutter: clamp(20px, 3.4vw, 36px);
  }

  .container,
  .hero-original {
    width: calc(100% - 2 * var(--page-gutter));
  }

  .mrhd .in,
  .mrft .mrft-in {
    padding-inline: var(--page-gutter);
  }
}

@media (max-width: 600px) {
  :root {
    --page-gutter: 16px;
  }

  .container,
  .hero-original {
    width: calc(100% - 32px);
  }

  .team-viewport {
    width: 100%;
  }

  .team-track {
    padding-inline: 0 !important;
  }
}