/* Post-design fixes layered over the generated index.html.
   index.html is regenerated from the Claude Design export, so anything that must survive a
   re-export lives here instead of being patched into the export. Keep each rule commented. */

/* 1. Hero stat chips on narrow phones. The middle chip is ~40 mono characters with
      white-space:nowrap, which overflows the viewport below ~380px and forces horizontal
      scrolling; the hairline separators also wrap onto their own lines. Stack the chips
      instead and drop the separators. */
@media (max-width: 479px) {
  #esc-hero div:has(+ #esc-hero-cta) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #esc-hero div:has(+ #esc-hero-cta) > span {
    white-space: normal !important;
  }
  #esc-hero div:has(+ #esc-hero-cta) > span[aria-hidden] {
    display: none;
  }
}

/* 2. Header on very narrow phones (≤359px): brand + Download CV pill + Menu button do not
      fit and push the Menu button past the viewport edge. The open menu already carries a
      Download CV link, so drop the header pill there. */
@media (max-width: 359px) {
  header a[data-on-click="requestCv"] {
    display: none !important; /* inline style sets display:inline-flex */
  }
}