/* --------------------------------------------------------------------------
   Zoom-fit kit — shared high page-zoom hardening for every page.

   Phones at 200% zoom present ~180-260px CSS viewports; 300% ~120-155px.
   Include this as the LAST stylesheet on a page (a <link> near </body> is
   fine — every rule here is scoped to small viewports).

   What it does at those sizes:
   - long words break at syllables with a dash (hyphens:auto), and anything
     the dictionary can't hyphenate still wraps instead of clipping
   - the page column and common blocks shed left/right padding
   - oversized labels step down so single words fit the column
   -------------------------------------------------------------------------- */

/* 200% zoom territory */
@media (max-width:270px){
  /* break-word (not anywhere): the browser tries a syllable hyphen with a
     dash first, and only chops arbitrarily when a word can't hyphenate */
  h1, h2, h3, h4, h5, p, li, a, td, summary, figcaption, blockquote,
  .k, .chip, .blab, .lede, .meta, b, strong{
    overflow-wrap:break-word;
    -webkit-hyphens:auto; hyphens:auto;
  }
}

@media (max-width:240px){
  .wrap{padding-left:8px; padding-right:8px;}
  a.icard, .icard, .box, .tool, .ccard, .fcard, .callout, .vslot, .qbox,
  .cta, .buybox{padding-left:10px; padding-right:10px;}
  a.icard .k{font-size:17px; letter-spacing:0;}
  .tool .k{font-size:24px;}
  .chip{letter-spacing:.06em;}
}

/* 300% zoom territory */
@media (max-width:170px){
  .wrap{padding-left:6px; padding-right:6px;}
  a.icard, .icard, .box, .tool, .ccard, .fcard, .callout, .vslot, .qbox,
  .cta, .buybox{padding-left:8px; padding-right:8px;}
  a.icard .k{font-size:15px;}
  .tool .k{font-size:20px;}
  h1{font-size:clamp(15px, 13vw, 24px);}
  h2{font-size:clamp(14px, 11vw, 20px);}
}