/*
 * display-scaling.css
 *
 * One idea, in one file, so it is easy to tune or delete.
 *
 * THE PROBLEM
 * This theme is laid out in pixels - roughly a thousand px values against four rem - with a
 * container that stops at 1140px. Nothing about it responds to how much screen there is. On a
 * display the operating system is scaling (Windows at 150 or 200%, or a high-DPI laptop), the
 * browser reports far fewer CSS pixels than the panel physically has: a 2800px screen at 200%
 * hands the page a viewport of about 1400. The 1140px container then occupies four fifths of the
 * width instead of three fifths, and everything reads as oversized. The same site on an older
 * machine reporting 1920 CSS pixels looks exactly as it was designed to.
 *
 * So this is not "new Chrome renders bigger". A pixel is a pixel in every browser. It is that
 * this screen hands the page fewer of them.
 *
 * THE FIX, AND WHY IT CANNOT SHRINK AN OLDER MACHINE
 * Scale the page down only when BOTH are true:
 *   1. the device pixel ratio is 1.5 or more - the operating system IS scaling this display; and
 *   2. the viewport is between 1200 and 1700 CSS pixels - which, given (1), means it is narrow
 *      because of that scaling rather than because the screen is small.
 * A machine reporting 1920 CSS pixels at ratio 1 fails both tests and is left completely alone,
 * as is a 1366px laptop at ratio 1, where shrinking would make the text genuinely too small.
 *
 * Older engines that do not implement `zoom` ignore the declaration outright, which is a second
 * layer of the same guarantee.
 *
 * TO TUNE
 * Open the console on the machine in question and run:
 *     devicePixelRatio, innerWidth
 * then widen or narrow the bounds below to match. The scale itself is the one number worth
 * adjusting: 0.8 is the browser's 80% zoom setting.
 */

@media screen
  and (min-width: 1200px)
  and (max-width: 1700px)
  and (-webkit-min-device-pixel-ratio: 1.5) {
    :root { zoom: 0.8; }
}

@media screen
  and (min-width: 1200px)
  and (max-width: 1700px)
  and (min-resolution: 1.5dppx) {
    :root { zoom: 0.8; }
}

/*
 * Printing is left at full size: paper has no scaling factor to compensate for.
 */
@media print {
    :root { zoom: 1; }
}