/* ============================================================
   MOBILE SAFETY LAYER
   Applies on top of the inline <style> blocks used by pages that
   don't load the shared styles.css (about, contact, privacy,
   terms, 404, and all /blog/ pages). Loaded after the inline
   style, so equal-specificity selectors here win inside each
   breakpoint without touching the original markup.
============================================================ */

@media (max-width: 900px){
  main{ padding-left:20px; padding-right:20px; }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  header{ padding:12px 16px; }
  .wordmark{ font-size:1.2rem; }
  main{ padding:32px 16px 50px; }
  main h1{ font-size:1.5rem; }
  main h2{ font-size:1.08rem; }
  footer{ padding:22px 16px; }
  .footer-inner{ gap:10px 14px; }
}

@media (max-width: 400px){
  .wordmark{ font-size:1.05rem; }
  main h1{ font-size:1.3rem; }
  .theme-toggle{ width:30px; height:30px; margin-inline-end:8px; }
}

/* Belt-and-suspenders: never let a long word or inline formula
   force horizontal scroll on very narrow screens. */
main p, main li, main h1, main h2, main h3{
  overflow-wrap: break-word;
  word-break: break-word;
}