/* ============================================================
   Known For — shared responsive system
   Loaded LAST on every page so it can adapt page-local rules.
   Breakpoints: 1024 (tablet landscape) · 900 (tablet) · 600 (phone) · 380 (small phone)
   Desktop design intent is untouched; this only adapts smaller screens.
   ============================================================ */

/* ---------- never allow horizontal scroll ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* ---------- fluid type: display headlines scale, body stays >=16px ---------- */
@media (max-width: 1024px) {
  :root {
    --text-display: 800 clamp(2rem, 6.4vw, 3.4rem)/1.08 var(--font-grotesk);
    --text-h1: 800 clamp(1.65rem, 5vw, 2.6rem)/1.14 var(--font-grotesk);
    --text-h2: 800 clamp(1.4rem, 4vw, 2rem)/1.2 var(--font-grotesk);
    --text-h3: 700 clamp(1.15rem, 3vw, 1.4rem)/1.3 var(--font-grotesk);
    --text-h4: 600 clamp(1.02rem, 2.4vw, 1.15rem)/1.4 var(--font-grotesk);
    --text-lead: 400 clamp(1rem, 2.2vw, 1.2rem)/1.6 var(--font-grotesk);
    --text-body: 400 1rem/1.65 var(--font-grotesk);
    --text-sm: 400 0.95rem/1.55 var(--font-grotesk);
    --text-xs: 400 0.875rem/1.5 var(--font-grotesk);
  }
  /* tighten the very generous desktop section rhythm */
  :root { --section-pad-y: clamp(52px, 8vw, 88px); --section-pad-x: clamp(20px, 5vw, 40px); }
}
@media (max-width: 600px) {
  :root {
    --section-pad-y: clamp(44px, 11vw, 64px);
    --section-pad-x: 20px;
    --grid-gap: 16px;
  }
  /* headline words must never clip or overflow */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: none; }
}

/* ---------- mobile nav: hamburger + drawer ---------- */
.kf-burger { display: none; }
@media (max-width: 980px) {
  /* the inline `display:flex` on the links row is beaten by !important */
  .kf-nav-links { display: none !important; }
  .kf-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
    color: var(--ink-900); cursor: pointer; padding: 0;
  }
  .kf-burger:hover { border-color: var(--ink-900); }
  .kf-burger-bars { display: block; position: relative; width: 18px; height: 12px; }
  .kf-burger-bars::before, .kf-burger-bars::after, .kf-burger-bars > i {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform 200ms var(--ease-out, ease), opacity 160ms ease;
  }
  .kf-burger-bars::before { top: 0; }
  .kf-burger-bars > i { top: 5px; }
  .kf-burger-bars::after { top: 10px; }
  .kf-burger[aria-expanded="true"] .kf-burger-bars::before { transform: translateY(5px) rotate(45deg); }
  .kf-burger[aria-expanded="true"] .kf-burger-bars > i { opacity: 0; }
  .kf-burger[aria-expanded="true"] .kf-burger-bars::after { transform: translateY(-5px) rotate(-45deg); }

  .kf-drawer {
    display: block;
    position: relative; z-index: 2;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding: 8px var(--section-pad-x) 18px;
  }
  /* darken + blur only the page BELOW the menu — the nav bar and drawer stay clear.
     Absolute + top:100% anchors the scrim to the bottom edge of the header
     (which includes the open drawer), so nothing dark sits behind either. */
  .kf-scrim {
    position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: 0;
    background: rgba(19,18,17,0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: kfScrimIn 200ms var(--ease-out, ease) both;
  }
  /* nav row and drawer are opaque and above the scrim */
  header > div:first-child { position: relative; z-index: 3; background: var(--surface); }
  @keyframes kfScrimIn { from { opacity: 0 } to { opacity: 1 } }
  .kf-drawer a, .kf-drawer .kf-drawer-head {
    display: flex; align-items: center; min-height: 48px;
    font: var(--text-body); font-weight: 500; color: var(--ink-900);
    text-decoration: none; border-bottom: 1px solid var(--line);
  }
  .kf-drawer a:hover { color: var(--gold-700); }
  .kf-drawer .kf-drawer-head {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--text-secondary); min-height: 40px;
    border-bottom: none; padding-top: 12px;
  }
  .kf-drawer .kf-drawer-sub { padding-left: 16px; }
  .kf-drawer-desc { display: block; font: var(--text-xs); color: var(--text-secondary); font-weight: 400; }
}
@media (min-width: 981px) {
  .kf-drawer, .kf-scrim { display: none !important; }
}

/* ---------- Project: Canonical sticky subnav — sideways scroll, never wrap ---------- */
@media (max-width: 980px) {
  .pc-subnav-inner { gap: 10px !important; padding: 0 16px !important; }
  .pc-subnav-rail {
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: 18px !important;
  }
  .pc-subnav-rail::-webkit-scrollbar { display: none; }
  .pc-subnav-rail > * { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .pc-subnav-cta { flex-shrink: 0; }
}

/* ---------- stacking: every multi-column block goes single-column ---------- */
@media (max-width: 980px) {
  .kf-2col, .pc-testimony, .ab-people, .ab-hero-grid, .ct-hero-grid,
  .hx-contrast, .hx-taste, .gv-impact, .pc-phase, .ct-row, .kf-board-grid {
    grid-template-columns: 1fr !important;
  }
  /* Support This Work: screenshot sits directly under the headline on mobile */
  .kf-funder-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "intro" "fig" "form" !important;
    grid-template-rows: auto auto auto !important;
  }

  /* text first, image below, on the image+text heroes */
  .ab-hero-grid > figure, .ct-hero-grid > figure { order: 2; }
  .ab-hero-grid > div, .ct-hero-grid > div { order: 1; }
  .ab-hero-fig, .ct-hero-fig { min-height: 0 !important; aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .kf-services, .kf-orgs, .kf-stats, .pc-stats-3, .gv-presets {
    grid-template-columns: 1fr !important;
  }
  /* full-bleed media: full width, sensible focal point, no awkward crop */
  .pc-fullbleed img, figure > img { aspect-ratio: 3 / 2 !important; }
}

/* ---------- the Forrest Frank vertical video fits the viewport ---------- */
@media (max-width: 980px) {
  .pc-video { max-width: 300px; margin: 0 auto !important; }
}
@media (max-width: 600px) {
  .pc-video { max-width: min(72vw, 260px); }
}

/* ---------- trend chart stays legible ---------- */
@media (max-width: 600px) {
  .pc-trend svg, svg[role="img"] { width: 100%; height: auto; }
  /* drop the densest gridline labels rather than let them collide */
  .pc-trend-mutedlabel { display: none; }
}

/* ---------- typewriter / dictionary / stacked-list elements reflow ---------- */
@media (max-width: 640px) {
  .ab-line { grid-template-columns: 1fr !important; gap: 4px !important; }
  .ab-pull { padding: clamp(16px, 5vw, 22px) 0 !important; }
  .ab-sentence { font-size: clamp(1rem, 4.6vw, 1.3rem) !important; }
  .ab-sentence--final { font-size: clamp(1.1rem, 5.2vw, 1.5rem) !important; }
  .pc-oneline { white-space: normal !important; }
  .hx-pull, .hx-query { font-size: clamp(1.15rem, 5vw, 1.6rem) !important; }
}

/* ---------- forms: full-width, tap-friendly ---------- */
@media (max-width: 600px) {
  .ct-form, .gv-form { width: 100%; }
  .ct-input, .ct-textarea, .ct-select, .gv-input {
    width: 100%; font-size: 1rem; min-height: 48px;
  }
  .ct-textarea { min-height: 132px; }
  .ct-submit, .gv-submit { width: 100%; min-height: 52px; font-size: 1rem; }

  /* Give: presets wrap cleanly, toggle stays easy to tap */
  .gv-presets { display: flex !important; flex-wrap: wrap; gap: 10px; }
  .gv-preset { flex: 1 1 calc(50% - 5px); min-height: 52px; font-size: 1rem; }
  .gv-toggle { width: 100%; }
  .gv-toggle > button { flex: 1 1 0; min-height: 48px; font-size: 0.98rem; }
}

/* ---------- tap targets: 44px minimum, comfortable spacing ---------- */
@media (pointer: coarse) {
  .kf-nav-cta, .pc-nav-cta, .canon-btn, .ct-submit, .gv-submit,
  .gv-preset, .gv-toggle > button, .pc-subnav-cta, .kf-burger {
    min-height: 44px;
  }
  .kf-drawer a { min-height: 48px; }
  /* the play button on the testimony video */
  .pc-play-btn { width: 56px !important; height: 56px !important; }
}

/* ---------- footer stacks cleanly ---------- */
@media (max-width: 980px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    text-align: center;
    justify-items: center;
    gap: 26px !important;
  }
  footer > div > div:first-child > div:last-child {
    justify-content: center !important;
    row-gap: 12px;
  }
  footer > div > div:first-child > div {
    text-align: center !important;
    display: flex; flex-direction: column; align-items: center;
  }
  /* the stacked "Known For ___" wordmark: keep its two lines left-aligned to
     each other (inline-block shrinks to fit), and let the flex parent center
     the block as a unit — centering the text itself makes the lines ragged. */
  footer > div > div:first-child > div:first-child > span,
  footer > div > div:first-child > div:first-child > a {
    display: inline-block; text-align: left;
  }
  footer > div > div:first-child > div:last-child { flex-direction: row; flex-wrap: wrap; }
  footer a { min-height: 32px; display: inline-flex; align-items: center; }
}

/* ---------- landscape phones: keep heroes from eating the viewport ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .kf-hero > section, .pc-hero > div, .ab-hero > div, .ct-hero > div,
  .hx-hero > div, .gv-hero > div {
    padding-top: 40px !important; padding-bottom: 40px !important;
  }
}

/* ---------- visible focus at every breakpoint ---------- */
:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kf-burger-bars::before, .kf-burger-bars::after, .kf-burger-bars > i { transition: none; }
  .kf-scrim { animation: none; }
  .pc-subnav-rail { scroll-behavior: auto; scroll-snap-type: none; }
}