/* v1.0.86 legacy-layer convergence (AUDIT FLAG 3): the drifted :root palette,
   the drifted .faq-row / .faq-toggle variants, and the retired Stratum @font-face
   were removed. Those tokens/rules were byte-value duplicates of the chassis
   (functions.php :root + style.css .faq-row via --wp--preset--color--* tokens that
   resolve to the same hex), so the page renders unchanged against the chassis.
   Retained here: the genuinely page-specific roster layout (.pilot-card / .headshot
   / .placeholder), .roster-nav-link, .cta-primary, .h-display, .eyebrow. A display
   rule was added to .placeholder so the roster cards can drop their inline styles
   in the paired page-110 content pass (owed separately). */
/* ============================================================
   meet-the-team page-level styles · v1.1.0
   For WP Boss: enqueue this as a page-specific stylesheet OR
   merge into theme's main stylesheet under a /* Meet the Team */ section.

   Page-level CSS that the WP theme does not provide:
   - .h-display, .eyebrow utility classes for typography
   - .roster-nav-link sticky-nav styling
   - .pilot-card grid layout
   - .cta-primary button treatment

   v1.1.0 changes (Sarah Gate 3 C6): .roster-nav-link.is-active now renders
   as a filled orange pill (bg-silo-a, text-white) so the currently-viewed
   tier is unmissable as the user scrolls. Hover state kept neutral
   (charcoal text on transparent background) so it doesn't compete with active.

   Brand tokens (CSS variables) resolve against the theme chassis :root
   (functions.php) sitewide; this file declares none of its own as of v1.0.86.
   ============================================================ */

/* PAGE-LEVEL STYLES · matches homepage v4.1.1 conventions + §4.8 design system. */

section[id], article[id] { scroll-margin-top: 6rem; }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.roster-nav-link {
  border: 2px solid transparent;
  padding: 6px 14px;
  border-radius: 9999px;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.roster-nav-link:hover {
  color: var(--color-charcoal);
}
.roster-nav-link.is-active {
  background-color: var(--silo-a);
  color: var(--color-white);
  border-color: var(--silo-a);
}

/* Pilot card · F-pattern (image left, text right). One focal point per block (the name). */
.pilot-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-grey-200);
}
@media (min-width: 768px) {
  .pilot-card { grid-template-columns: 200px 1fr; gap: 3rem; }
}
.pilot-card .headshot {
  width: 200px;
  height: 200px;
  background-color: var(--color-grey-100);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pilot-card .headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pilot-card .headshot .placeholder {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-400);
  text-align: center;
  padding: 0 12px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* CTA primary · silo-a orange, 44x44 minimum, hover + pressed states per §4.8.4. */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--silo-a);
  color: var(--color-white);
  padding: 16px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  min-height: 44px;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  text-decoration: none;
}
.cta-primary:hover {
  background-color: #E63F1B;
  box-shadow: 0 4px 12px rgba(255, 75, 34, 0.25);
}
.cta-primary:active {
  transform: translateY(1px);
  background-color: #C5340E;
  box-shadow: none;
}
.cta-primary:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}

body { font-family: var(--font-body); color: var(--color-charcoal); }
h1, h2 { font-family: var(--font-display); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}