/* responsive.css — breakpoint overrides for the inline-styled components.
   Components are authored at desktop width with inline styles, so every rule
   here needs !important to win, and selectors key off the serialized style
   attribute where no class exists.

   Two deliberate constraints:
   - Type rules target the AUTHORED display sizes only. A blanket h1-h4 clamp
     would use its vw term as a floor and inflate small in-card headings, so
     each oversized value is addressed individually and everything at or below
     40px is left alone.
   - The grid collapse exempts narrow first tracks (marker, numeral, date and
     TOC-number columns), which are not layout columns and must stay beside
     their content. */

html, body { overflow-x: hidden; }
#root img, #root svg { max-width: 100%; }

/* ---- Narrow desktop / tablet: keep the header on one line ---- */
@media (max-width: 1100px) {
  #root header nav a, #root header nav button { white-space: nowrap !important; }
  #root header span[style*="border-left"] { display: none !important; }
  #root header nav { gap: 16px !important; }
}

/* ---- Tablet and below ---- */
@media (max-width: 1000px) {

  /* Collapse real layout grids. Narrow marker tracks are exempt. */
  #root [style*="grid-template-columns"]:not([style*="columns: 20px 1fr"]):not([style*="columns: 28px 1fr"]):not([style*="columns: 30px 1fr"]):not([style*="columns: 32px 1fr"]):not([style*="columns: 36px 1fr"]):not([style*="columns: 40px 1fr"]):not([style*="columns: 48px 1fr"]):not([style*="columns: 52px 1fr"]):not([style*="columns: 64px 1fr"]):not([style*="columns: 70px 1fr"]):not([style*="columns: 80px 1fr"]):not([style*="columns: 88px 1fr"]):not([style*="columns: 90px 1fr"]) {
    grid-template-columns: 1fr !important;
  }

  #root [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* Oversized display type only. Values below match the authored sizes. */
  #root [style*="font-size: 132px"] { font-size: clamp(52px, 15vw, 132px) !important; }
  #root [style*="font-size: 92px"]  { font-size: clamp(36px, 9vw, 92px) !important; }
  #root [style*="font-size: 84px"]  { font-size: clamp(34px, 8.5vw, 84px) !important; }
  #root [style*="font-size: 80px"]  { font-size: clamp(33px, 8vw, 80px) !important; }
  #root [style*="font-size: 78px"]  { font-size: clamp(32px, 8vw, 78px) !important; }
  #root [style*="font-size: 76px"]  { font-size: clamp(32px, 7.8vw, 76px) !important; }
  #root [style*="font-size: 72px"]  { font-size: clamp(30px, 7.4vw, 72px) !important; }
  #root [style*="font-size: 56px"]  { font-size: clamp(26px, 5.6vw, 56px) !important; }
  #root [style*="font-size: 52px"]  { font-size: clamp(25px, 5.2vw, 52px) !important; }
  #root [style*="font-size: 48px"]  { font-size: clamp(24px, 4.8vw, 48px) !important; }
  #root [style*="font-size: 44px"]  { font-size: clamp(23px, 4.4vw, 44px) !important; }

  /* Wide fixed gaps tighten. */
  #root [style*="gap: 64px"], #root [style*="gap: 56px"] { gap: 32px !important; }
}

/* ---- Phone ---- */
@media (max-width: 720px) {

  /* Page gutters. Scoped to padding so margin shorthands using the same
     numbers (the "32px 64px 0" meta strips) are not also inset. */
  #root [style*="padding: "][style*="px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #root [style*="margin: 32px 64px"],
  #root [style*="margin: 40px 64px"],
  #root [style*="margin: 48px 64px"],
  #root [style*="margin: 56px 64px"] {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Inner card padding. */
  #root [style*="padding: 40px 44px"],
  #root [style*="padding: 36px 40px"],
  #root [style*="padding: 40px 48px"],
  #root [style*="padding: 40px 56px"],
  #root [style*="padding: 36px 44px"] {
    padding: 24px 20px !important;
  }
  #root [style*="padding: 56px"] { padding: 28px 20px !important; }
  #root [style*="padding: 88px"] { padding: 40px 20px !important; }

  /* Navigation wraps instead of overflowing. */
  #root nav {
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }
  #root header > div {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  /* The masthead tagline is decoration at this width. */
  #root header span[style*="border-left"] { display: none !important; }

  /* Wrap only wide-gap flex rows. Tight rows (bylines, stat strips, the logo
     lockup) are left on one line deliberately. */
  #root [style*="display: flex"][style*="gap: 28px"],
  #root [style*="display: flex"][style*="gap: 32px"],
  #root [style*="display: flex"][style*="gap: 40px"],
  #root [style*="display: flex"][style*="gap: 48px"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* Tables scroll rather than break the layout. */
  #root table {
    display: block !important;
    overflow-x: auto !important;
  }

  #root pre { font-size: 11px !important; }

  /* Full-width CTAs. */
  #root a[style*="padding: 14px 20px"],
  #root a[style*="padding: 13px 20px"],
  #root a[style*="padding: 12px 18px"],
  #root a[style*="padding: 14px 22px"] {
    width: 100% !important;
    text-align: center !important;
  }

  /* Right-aligned meta blocks return to the left. */
  #root [style*="text-align: right"] { text-align: left !important; }

  #root [style*="margin-top: 80px"] { margin-top: 40px !important; }
}

/* ---- Small phone: one more step down on the largest display type ---- */
@media (max-width: 420px) {
  #root [style*="font-size: 132px"] { font-size: 48px !important; }
  #root [style*="font-size: 92px"]  { font-size: 32px !important; }
  #root [style*="font-size: 84px"]  { font-size: 31px !important; }
  #root [style*="font-size: 80px"]  { font-size: 30px !important; }
  #root [style*="font-size: 78px"]  { font-size: 30px !important; }
  #root [style*="font-size: 76px"]  { font-size: 29px !important; }
  #root [style*="font-size: 72px"]  { font-size: 28px !important; }
}

/* ---- Print ---- */
@media print {
  html, body { background: #fff !important; }
  #root nav, #root header button { display: none !important; }
}