@media (max-width: 820px) {
  /* 1. The outer 799px shell becomes fluid. */
  /* The shell is a single-column, four-row stack, so it loses nothing by
     becoming a block — and it has to, because a `display: table` element's
     used width is max(specified, min-content) and no width declaration can
     get under that floor. As a block it takes the width it is given, and
     anything that genuinely cannot reflow scrolls inside it. */
  table[width="799"],
  table[width="799"] > tbody,
  table[width="799"] > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }
  table[width="799"] > tbody > tr > td {
    width: auto !important;
    /* The shell's own cell becomes the scroll container. Its min-content
       contribution then drops to zero, so the shell itself can be exactly the
       viewport width, and anything that genuinely cannot reflow — the
       18-column periodic table, a long unbreakable link — scrolls INSIDE the
       page instead of widening the whole document. Scrolling keeps the
       content reachable; `overflow: hidden` here would simply lose it, which
       is a WCAG 1.4.10 reflow failure rather than a fix. */
    /* display:block matters: `overflow` on a table-cell does not reliably
       establish a scroll container, so the shell stayed 691px wide on the
       periodic-table page. The shell is a single-column stack of four rows,
       so making its cells blocks changes nothing visually. */
    display: block;
    overflow-x: auto;
  }

  /* 2. The LAYOUT tables one level inside it (banner row, content+sidebar
        split, footer links) stack instead of sitting side by side. Their
        combined column min-widths were the real floor: the shell could not
        shrink below 457px even at width:0. The content cell precedes the
        sidebar cell in source order, so stacking reads correctly. */
  /* NOTE: this matches tables at ANY depth inside the shell, and the rule
     below then restores real table semantics from depth 2 down. A DATA table
     sitting directly at depth 1 would therefore be stacked wrongly. Measured
     across all 29 pages: zero have a table with more than two columns at
     depth 1, so there is no such case today. Re-measure if the site changes. */
  table[width="799"] table,
  table[width="799"] table > tbody,
  table[width="799"] table > tbody > tr,
  table[width="799"] table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  /* 3. ...but a DATA table nested deeper is not a layout artefact, and
        stacking an 18-column periodic table would destroy it. Restore real
        table semantics there and let it scroll horizontally instead. */
  table[width="799"] table table {
    display: block;
    overflow-x: auto;
    width: 100% !important;
  }
  table[width="799"] table table > tbody { display: table-row-group; }
  table[width="799"] table table > tbody > tr { display: table-row; }
  table[width="799"] table table > tbody > tr > td,
  table[width="799"] table table > tbody > tr > th {
    display: table-cell;
    width: auto !important;
  }

  /* 4. Long unbroken strings set a min-content floor no width rule can beat.
        The real ones here are comma-lists with no space after the comma
        ("Water,Chemistry,Occupational Health,Labs,...") in #tophdg, and the
        long SEO <h2> strings.

        `anywhere`, NOT `break-word`. They look interchangeable and are not:
        break-word permits a break to avoid overflow but leaves the element's
        MIN-CONTENT size unchanged, so the table that contains it is still
        sized to the unbroken string. Only `anywhere` reduces min-content,
        which is what actually lets the shell shrink. */
  td, th, h1, h2, h3, p, div, li, a { overflow-wrap: anywhere; }

  /* Form controls size themselves to their content — links.html carries a
     TEXTAREA that is 581px wide on its own. The other two sites got this rule
     and this one did not. */
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  /* A text input sizes itself from its `size` attribute — the site search box
     is size=31, about 250px — and that intrinsic width propagates up as a
     min-content floor. An explicit width overrides the attribute-derived
     size. */
  input[type="text"], input[type="search"], input:not([type]) { width: 100%; }

  img { max-width: 100%; height: auto; }
}