@media (max-width: 900px) {
  #wrap { width: 100%; }
  #content { display: flex; flex-direction: column; }
  #content #left { width: 100%; float: none; order: 1; }
  #content #sidebar { width: 100%; float: none; order: 2; }

  /* AdSense units here are FIXED 336x280 blocks, wider than a 320px phone,
     and they do not all live in the sidebar. Resizing or swapping an ad unit
     is a revenue decision rather than mine, and clipping one would breach the
     ad terms — so the unit itself becomes the scroll container. The ad stays
     whole and viewable; only the page stops being dragged wider than the
     screen. */
  ins.adsbygoogle { max-width: 100%; overflow-x: auto; }
  #left .post { width: auto; margin-left: 0; }
  #header { height: auto; }

  #wrap img:not([src*="dot_clear"]) {
    max-width: 100%; height: auto; box-sizing: border-box;
    margin-left: 0; margin-right: 0;
  }

  /* Legacy tables in the content column are SQUASHED (fixed layout, equal
     columns) rather than scrolled, unlike the article tables below. That
     looks like a contradiction and is a measured decision: across all 33
     pages, every #left table either carries form inputs or has 4 columns or
     fewer — there are ZERO wide data tables here that squashing would harm.
     Re-measure if the site gains one; the rule to change is this line. */
  #left table { width: 100% !important; max-width: 100%; table-layout: fixed; }
  /* The CELL widths have to go too. With table-layout:fixed the columns take
     the widths declared on the first row's cells (width="250", width="100",
     ...), and their sum becomes the table's floor — measured 642px, which not
     even an inline `width:100% !important` on the table could shrink. */
  #left table td[width], #left table th[width],
  #left table col[width] { width: auto !important; }
  #left table td, #left table th { word-break: break-word; }
  #left input, #left select, #left textarea {
    max-width: 100%; box-sizing: border-box;
  }
  /* A text input sizes itself from its `size` attribute, and that intrinsic
     width propagates up as a min-content floor no percentage max-width can
     beat. An explicit width overrides the attribute-derived size. */
  input[type="text"], input[type="search"], input:not([type]) { width: 100%; }

  /* The newer articles' comparison tables are DATA: squashing them to 390px
     makes them unreadable, so they scroll horizontally instead.
     `.wrap` is included because two of these pages use it as their content
     container instead of <article>/.container — they were 5px over without
     it, which is exactly the kind of near-miss a sampled test walks past. */
  /* These two rules could in principle BOTH match a table inside an <article>
     inside #left, combining width:100%!important + table-layout:fixed with
     display:block + overflow-x:auto into a squashed data table that a
     width-only sweep cannot see. Measured across all 33 pages: ZERO have an
     <article> inside #left — the legacy pages and the newer article pages use
     different shells entirely. Re-measure if that stops being true. */
  article table, .container table, .wrap table {
    display: block; overflow-x: auto; max-width: 100%;
  }
}