/* ============================================================ THE BREAKPOINT LADDER — canonical for every sheet in assets/css. Documented here because base.css loads before every section sheet. Structural rungs, each written as a matched pair: small phone (width < 30rem) / (width >= 30rem) 480px phone/tablet (width < 48rem) / (width >= 48rem) 768px tablet/desktop(width < 64rem) / (width >= 64rem) 1024px Range syntax, not min-width/max-width, and the reason is arithmetic. The old pairing was `max-width:63.9375rem` / `min-width:64rem`, and 63.9375rem is 1023px exactly -- one whole CSS pixel below 1024, not the 0.02px it was assumed to be. Any viewport in between (browser zoom and fractional device-pixel-ratio displays produce these routinely: a 1126px window at 110% zoom is 1023.6 CSS px) matched NEITHER half, so at 1023.6 the tablet rules were off and the desktop rules were not yet on. `< 64rem` / `>= 64rem` is exclusive and exhaustive by definition -- exactly one side matches at every real number, so there is nothing to tune and no fudge factor to get wrong. Same for 48rem (was 47.9375rem = 767px) and 30rem (was two spellings, 29.9375rem = 479px in categories/parts and 30rem elsewhere). The boundary value always belongs to the LARGER band: at exactly 1024px the desktop rules apply, at exactly 768px the tablet rules do, at exactly 480px the small-phone tweaks do not. header.js already reads the desktop rung this way -- matchMedia('(min-width: 64rem)') -- so the JS drawer and the CSS drawer flip on the same pixel. Two relief valves are NOT rungs. They have no min-width partner, so no dead band exists for them and they stay inclusive, `<=`, which is exactly what `max-width` meant: (width <= 40rem) 640px header utility strip drops the address (width <= 22.5rem) 360px header utility strip drops the number and one band is bounded on both sides by rungs it shares with others: (64rem <= width <= 81.25rem) cramped desktop nav, 1024-1300px If you add a query, add it here. A ladder that lives only in eight stylesheets is a ladder nobody can reason about. docs/responsive.md carries the prose version. ============================================================ */ /* ===== Reset & base ===== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth; scroll-padding-top:var(--sp-6)} body{margin:0;font-family:var(--font-body);font-size:var(--fs-base); font-weight:var(--fw-reg);line-height:var(--lh-body);color:var(--grey-600); letter-spacing:var(--tr-normal); background:var(--gps-white); /* Lato renders thin and slightly blurred at body sizes without these. Grayscale smoothing is the macOS/Firefox counterpart to -webkit-font-smoothing and is what stops the 400 weight looking washed out next to the reference, which applies the same pair. */ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} /* Headings default to 700 with tight tracking, in near-black rather than pure black. The 900 weight is a display treatment -- it belongs on the hero, not on every sub-head, where it reads as shouting. .hero__title sets its own weight/case and is unaffected by this. */ h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--fw-bold); line-height:var(--lh-head);letter-spacing:var(--tr-snug); margin:0 0 var(--sp-4);color:var(--gps-black)} h1,h2{letter-spacing:var(--tr-tight);line-height:var(--lh-display)} p{margin:0 0 var(--sp-4)} ul{margin:0;padding:0;list-style:none} /* ===== Layout ===== */ /* ===== Icon sprite ===== Four sections emit an inline