/* Mobile overrides for the original pages, which style everything inline.
   Desktop is untouched: every rule sits inside a max-width query.
   Attribute selectors match the inline styles; !important is required to beat them. */

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* top bar: keep brand + Disasters + Blog */
  .tab[href="index.html"], .tab[href="about.html"],
  [style*="width:1px;height:20px;background:#2a2a2a"] { display: none !important; }
  [style*="height:60px;display:flex"] { padding: 0 16px !important; gap: 10px !important; }

  .tab { white-space: nowrap !important; padding: 8px 9px !important; }
  [style*="height:60px;display:flex"] [style*="letter-spacing:.16em"] { letter-spacing: .1em !important; font-size: 12px !important; }

  /* masthead: the sticky bar already shows the logo, so keep only the nav */
  header > div > a:first-child { display: none !important; }
  header > div { padding: 12px 16px !important; }
  header nav { flex-wrap: wrap; gap: 10px 18px !important; }

  /* homepage spinning seal collides with the hero badge */
  [style*="width:118px;height:118px"] { display: none !important; }
  /* "Ranked #03 —— The Deadliest Disasters" kicker: drop the rule, let it wrap cleanly */
  [style*="width:24px;height:1px;background:#5c574d"] { display: none !important; }
  [style*="margin-bottom:18px;display:flex;align-items:center;gap:10px"] { flex-wrap: wrap; gap: 6px 10px !important; }

  /* two-column layouts → one column */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns:1fr auto"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* card / stat rows → two across */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* sticky sidebars just flow below the article */
  [style*="position:sticky;top:80px"] { position: static !important; }

  /* fixed-height heroes grow with their text */
  section[style*="height:520px"], section[style*="height:560px"],
  section[style*="height:640px"], section[style*="height:360px"] { height: auto !important; min-height: 420px; }
  section[style*="height:520px"] > div[style*="height:100%"],
  section[style*="height:560px"] > div[style*="height:100%"],
  section[style*="height:640px"] > div[style*="height:100%"],
  section[style*="height:360px"] > div[style*="height:100%"] { height: auto !important; min-height: 420px; padding-top: 110px !important; padding-bottom: 40px !important; }

  /* type scale */
  [style*="font-size:74px"] { font-size: 44px !important; }
  [style*="font-size:68px"], [style*="font-size:62px"] { font-size: 40px !important; }
  [style*="font-size:52px"], [style*="font-size:50px"] { font-size: 36px !important; }
  [style*="font-size:42px"], [style*="font-size:38px"], [style*="font-size:36px"] { font-size: 30px !important; }
  [style*="font-size:34px"] { font-size: 27px !important; }
  [style*="font-size:21px;line-height:1.65"] { font-size: 19px !important; }
  [style*="font-size:19px;line-height:1.55"] { font-size: 17px !important; }

  /* gutters */
  [style*="padding:0 28px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding:64px 28px"], [style*="padding:60px 28px"], [style*="padding:56px 28px"],
  [style*="padding:54px 28px"] { padding-left: 16px !important; padding-right: 16px !important; padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding:18px 28px"], [style*="padding:26px 28px"], [style*="padding:64px 28px 8px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="gap:56px"], [style*="gap:52px"] { gap: 32px !important; }
  [style*="padding:34px 36px"], [style*="padding:32px 34px"], [style*="padding:30px 32px"] { padding: 22px 20px !important; }

  /* buttons and long labels may wrap */
  .btn, [style*="white-space:nowrap"] { white-space: normal !important; }
  img { max-width: 100%; }
  [style*="text-align:right"] { text-align: left !important; }

  /* stat-bar dividers: drop the right border on every 2nd cell */
  [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2n) { border-right: none !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] > div[style*="padding:28px 20px"] { border-bottom: 1px solid #242424; }
  [style*="grid-template-columns:repeat(5,1fr)"] > a { border-right: none !important; border-bottom: 1px solid #242424; }
}

@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(4,1fr)"]:not(:has(> div[style*="padding:28px 20px"])),
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="font-size:74px"] { font-size: 36px !important; }
  [style*="font-size:68px"], [style*="font-size:62px"] { font-size: 34px !important; }
  [style*="font-size:52px"], [style*="font-size:50px"] { font-size: 31px !important; }
}