/* ============================================================
  mobile.css - dedicated phone layout (<= 768px)
  Desktop layout is untouched: every rule is inside the media
  query, so it only activates on small screens. Loaded LAST on
  each page so it owns the phone presentation.
  ============================================================ */
 @media screen and (max-width: 768px) {
 
  /* ---------- global base ---------- */
  *, *::before, *::after { box-sizing: border-box !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  }
  body { font-size: 15px !important; line-height: 1.55 !important; }
  img { max-width: 100% !important; height: auto !important; }
  h1 { font-size: 1.55em !important; line-height: 1.25 !important; }
  h2 { font-size: 1.25em !important; line-height: 1.3 !important; }
  h3, h4 { font-size: 1.08em !important; line-height: 1.3 !important; }
  header h1 { font-size: 1.6em !important; }
 
  /* tame oversized inline font-sizes */
  [style*="font-size: 1.8em"] { font-size: 1.3em !important; }
  [style*="font-size: 1.5em"] { font-size: 1.2em !important; }
  [style*="font-size: 1.4em"] { font-size: 1.15em !important; }
  [style*="font-size: 1.2em"] { font-size: 1.05em !important; }
 
  /* tame deep inline indents / fixed side margins */
  [style*="margin-left: 50px"] { margin-left: 12px !important; }
  [style*="margin-left: 20px"] { margin-left: 6px !important; }
  [style*="margin-right: 80px"] { margin-right: 8px !important; }
  [style*="margin-right: 150px"] { margin-right: 6px !important; }
 
  /* generic section card (index, blog, publications, articles) */
  section {
  max-width: 100% !important;
  margin: 14px 10px !important;
  padding: 16px !important;
  border-radius: 10px !important;
  }
 
  /* ---------- index.html (CV) ---------- */
  .container { width: 100% !important; padding: 0 10px !important; overflow: visible !important; }
  .hero { flex-direction: column !important; text-align: center !important; padding: 16px !important; }
  .hero img { width: 55% !important; margin: 0 auto 14px !important; display: block !important; }
  .hero-text { width: 100% !important; text-align: left !important; }
  .hero h1 { font-size: 1.6em !important; text-align: center !important; }
  .hero p { font-size: 1em !important; }
  .institution-img { width: 85% !important; }
 
  /* ---------- blog.html ---------- */
  header p { font-size: 1em !important; }
  .categories { gap: 10px !important; flex-wrap: nowrap !important; }
  .category-box {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  padding: 16px 6px !important;
  font-size: 0.9em !important;
  }
  .category-box i { font-size: 1.3em !important; margin-bottom: 8px !important; }
 
  /* ---------- publications.html (flex header w/ logos) ---------- */
  header[style*="display: flex"] {
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 14px !important;
  }
  header[style*="display: flex"] img { height: 48px !important; margin: 6px !important; }
  header[style*="display: flex"] > div { width: 100% !important; text-align: center !important; }
  header[style*="display: flex"] h1 { font-size: 1.4em !important; }
 
  /* ---------- presentation.html ---------- */
  .wrapper { max-width: 100% !important; margin: 1rem 10px !important; padding: 1.1rem !important; }
  .section { padding: 1rem !important; }
 
  /* ---------- article pages (Causality / Bayesian / diffusion) ---------- */
  .large-text { font-size: 1.2em !important; }
  .takeaway, .math-note, .feature-list, .ref-list { padding: 14px !important; }
 
  /* ---------- claude_code_prompting_4_rules.html ---------- */
  .blog-post { padding: 22px 16px !important; }
  .header h1 { font-size: 1.6em !important; }
  .intro { font-size: 1em !important; padding: 16px !important; }
  .rule { padding: 20px 14px !important; margin: 28px 0 !important; }
  .rule h2 { font-size: 1.35em !important; }
  .rule-content { padding: 16px !important; }
  .rule-content h3 { font-size: 1.15em !important; }
  .conclusion { padding: 24px 16px !important; }
 
 }