/* ===== shared phone polish (generated into each site's /assets/mobile.css) ===== */
@media (max-width: 640px) {
  /* React pages set small labels as inline styles: lift anything under 12px to 12px */
  [style*="font-size: 9px"], [style*="font-size: 9.5px"], [style*="font-size: 10px"], [style*="font-size: 10.5px"],
  [style*="font-size: 11px"], [style*="font-size: 11.5px"] { font-size: 12px !important; }

  /* bigger tap areas for small text links, without moving anything (padding offset by negative margin) */
  footer a, .footer-row a, .footer-social a, .legal a, .back-link, .article__back {
    display: inline-block; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;
  }
}

/* ===== sample-work project pages + blog/book/legal pages (johncarlo.site, johncalo.dev, and the copies on johncarlo.digital) ===== */
@media (max-width: 640px) {
  .ss-num, .ss-label span, .ss-label .open, .group-label, .legal a, .footer-row span, .footer-row a,
  .field > label, .nav-pill a.cta, .nav-pill .nav-cta { font-size: 12px !important; }
  .proj-hero .sub, .ss-grid .sub, .platform-section .sub { font-size: 12px !important; }
}

/* ===== johncalo.dev homepage ===== */
@media (max-width: 720px) {
  /* section headers: label above the title instead of a narrow two-column grid */
  .sec-head { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 32px !important; }
  .sec-head h2 { font-size: clamp(32px, 9vw, 44px) !important; }
  /* tools section: categories above the scrolling tool cards */
  .stack-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .stack-grid > aside { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}