/* The Watchmaker's Bench — shared responsive foundation
 * Loaded last in every page <head> so it layers on top of each page's
 * inline <style>. Keep this file small and universal — page-specific
 * layout tweaks belong in that page's own styles.
 *
 * Why this exists: every page is built in `rem` but never set a root
 * font-size, so the UI didn't scale with the screen and zoom felt broken.
 * Scaling the root scales the whole rem-based UI proportionally.
 */

/* Fluid, zoom-safe root font-size.
 * Stays ~16px at common desktop widths (~1440px), eases down on small or
 * zoomed-in viewports and up slightly on large monitors. The clamp bounds
 * are in `rem`, so browser zoom still multiplies everything correctly —
 * this smooths the old abrupt desktop->mobile snap instead of breaking it. */
html {
  font-size: clamp(0.85rem, 0.73rem + 0.3vw, 1.0625rem);
}

/* Never scroll sideways — the main symptom of "zoom looks broken".
 * Use `clip`, NOT `hidden`: `overflow-x: hidden` forces `overflow-y` to compute
 * to `auto`, turning the body into a nested scroll container that can swallow the
 * page's normal vertical scroll. `overflow-x: clip` leaves `overflow-y: visible`
 * untouched, so vertical scrolling is unaffected. (Unsupported browsers ignore
 * it and simply fall back to normal scrolling.) */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Belt-and-suspenders: most pages already set this, but reaffirm so padding
 * and borders never push elements past the viewport. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Media should shrink to fit rather than force horizontal overflow.
 * (Deliberately NOT applied to <table> — some tables intentionally scroll
 * inside their own container.) */
img, svg, canvas, video {
  max-width: 100%;
}
