@layer site {
  .officers-intro {
    overflow: hidden;
  }

  .officers-intro__inner {
    position: relative;
    min-height: clamp(26rem, 58vh, 38rem);
    padding-block: clamp(var(--s8), 12vw, var(--s10)) var(--s8);
  }

  .officers-kicker,
  .officer-card__role {
    color: var(--glaze);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
  }

  .officers-intro h1 {
    max-width: 12ch;
    margin-top: var(--s5);
    font-size: var(--t-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
  }

  .officers-intro__lede {
    max-width: 42rem;
    margin-top: var(--s6);
    color: var(--fg-muted);
    font-size: var(--t-lg);
    line-height: var(--lh-prose);
  }

  .officers-intro__mark {
    position: absolute;
    right: max(var(--gutter), 7vw);
    bottom: clamp(var(--s6), 8vw, var(--s9));
    display: grid;
    grid-template-columns: repeat(2, clamp(2.75rem, 7vw, 5.5rem));
    gap: var(--s3);
    transform: rotate(12deg);
  }

  .officers-intro__mark span {
    aspect-ratio: 1;
    border: clamp(0.6rem, 1.6vw, 1.15rem) solid var(--glaze);
    border-radius: var(--r1);
  }

  .officers-intro__mark span:nth-child(2) { border-color: var(--spr-cyan); }
  .officers-intro__mark span:nth-child(3) { border-color: var(--spr-mint); }
  .officers-intro__mark span:nth-child(4) { border-color: var(--spr-butter); }

  .officers-list__head {
    display: grid;
    gap: var(--s5);
    align-items: end;
    padding-bottom: var(--s7);
    border-bottom: 1px solid var(--line-strong);
  }

  .officers-list__head h2,
  .officers-note h2 {
    margin-top: var(--s3);
    font-size: var(--t-2xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-tight);
  }

  .officers-list__head .lede {
    max-width: 34rem;
    margin: 0;
  }

  .officer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    max-width: 66rem;
    margin-inline: auto;
    border-top: 0;
  }

  .officer-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--ink-900);
    transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }

  .officer-card:hover {
    background: var(--accent-wash);
    transform: translateY(-4px);
  }

  .officer-card--lead {
    grid-column: 1 / -1;
    width: min(100%, 22rem);
    margin: 0 auto var(--s6);
    background: var(--ink-800);
  }

  .officer-card--lead h3,
  .officer-card--lead .officer-card__team {
    color: #f7f2f8;
  }

  .officer-card--lead:hover {
    background: var(--ink-700);
  }

  @keyframes officers-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .officer-card:not(.officer-card--lead) {
    animation: officers-wave 5.6s var(--ease-in-out, ease-in-out) infinite;
  }

  .officer-card:not(.officer-card--lead):hover {
    background: var(--accent-wash);
    animation-play-state: paused;
    transform: translateY(-4px);
  }

  /* Officers sharing a column share a phase, so the grid rises and falls in four broad waves. */
  .officer-card:nth-child(2),
  .officer-card:nth-child(6) { animation-delay: 0ms; }

  .officer-card:nth-child(3),
  .officer-card:nth-child(7) { animation-delay: -1400ms; }

  .officer-card:nth-child(4),
  .officer-card:nth-child(8) { animation-delay: -2800ms; }

  .officer-card:nth-child(5),
  .officer-card:nth-child(9) { animation-delay: -4200ms; }

  .officer-card__ordinal {
    display: none;
  }

  .officer-card__portrait {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--ink-900);
  }

  .officer-card--lead .officer-card__portrait {
    width: 100%;
  }

  .officer-card__role,
  .officer-card h3,
  .officer-card__team {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .officers-note {
    background: var(--bg-sunken);
  }

  .officers-note__inner {
    display: grid;
    gap: var(--s6);
    align-items: center;
    padding-block: clamp(var(--s7), 8vw, var(--s9));
  }

  .officers-note__number {
    color: var(--accent-line);
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
  }

  .officers-note div > p:last-child {
    max-width: 40rem;
    margin-top: var(--s4);
    color: var(--fg-muted);
    line-height: var(--lh-prose);
  }

  .officers-note .btn {
    justify-self: start;
  }

  @media (min-width: 680px) {
    .officers-list__head {
      grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.8fr);
    }

    .officer-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--s4);
    }

    .officers-note__inner {
      grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.5fr) auto;
    }
  }

  @media (min-width: 1024px) {
  }

  @media (max-width: 679px) {
    .officers-intro__mark {
      right: var(--gutter);
      bottom: var(--s5);
      opacity: 0.55;
    }

    .officer-card--lead {
      width: min(100%, 18rem);
      margin-bottom: var(--s5);
    }

    .officer-card:nth-child(2),
    .officer-card:nth-child(4),
    .officer-card:nth-child(6),
    .officer-card:nth-child(8) { animation-delay: 0ms; }

    .officer-card:nth-child(3),
    .officer-card:nth-child(5),
    .officer-card:nth-child(7),
    .officer-card:nth-child(9) { animation-delay: -2800ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    .officer-card:not(.officer-card--lead) {
      animation: none;
    }
  }
}