/* === Responsive fixes (full replacement) — updated with mobile header padding === */

/* 1) Predictable sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Page side padding (phones → desktops) */
html, body { margin: 0; }
body {
  padding-inline: clamp(16px, 5vw, 48px);
  padding-bottom: clamp(24px, 6vh, 64px);
}

/* 3) Content wrapper (center + readable line length) */
main, .page, .content, .main {
  max-width: 75rem;            /* ~1200px */
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
}

/* 4) Header layout + stability (no jumping) */
header, .header { display: block; }
.header-wrap, header .wrap, header .header-wrap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 4vw, 24px);
  min-height: 56px;            /* lock header row height */
}
header .wrap > *, header .header-wrap > * { min-width: 0; }  /* prevent clipping in flex */

/* 4a) Brand/site name: shrink/wrap instead of clipping */
header .site-name, header .site-title, header .brand, header .header__brand,
.header .site-name, .header .site-title, .header .brand, .header .header__brand {
  display: block;
  max-width: min(60vw, 32rem);
  font-size: clamp(18px, 3.5vw, 24px);
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 4b) Navigation sizing and active state (no reflow) */
.menu a, nav a {
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 500;            /* same weight in all states to avoid layout shift */
  line-height: 1.2;
  text-decoration: none;
}
.menu a.active,
.menu a[aria-current="page"] {
  font-weight: 500;            /* avoid bold jump */
  text-decoration: underline;  /* visual indicator without reflow */
}
/* Prevent browser “fake bold” metric changes */
html { font-synthesis-weight: none; }

/* 5) Top spacing for content (v6 behavior) */
main {
  padding-top: clamp(40px, 8vw, 80px);   /* single source of truth below header */
}
main > :first-child {                     /* remove stray top margins */
  margin-top: 0 !important;
}

/* 5a) Match homepage header offset on Research only */
body.research-page { padding-top: 32px; }

/* 6) Sections never touch screen edges */
section, .section {
  padding-block: clamp(20px, 6vw, 80px);
  padding-inline: clamp(16px, 5vw, 48px);
}

/* 7) Grids/stacks use responsive gaps */
.grid, .stack {
  display: grid;
  gap: clamp(12px, 4vw, 56px);
}

/* 8) Media is fluid */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 9) Small-screen niceties */
@media (max-width: 768px) {
  nav { overflow-x: auto; }    /* long menus remain usable */

  /* Add breathing room for brand + nav on mobile */
  .wrap.header-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .brand {
    margin-left: 0;
  }
}