/*
 * stable.css — prevents layout shift (CLS) on gridspin pages
 *
 * Problems this solves:
 *   1. Font swap: Google Fonts loads async → system font renders first at a
 *      different metric → nav/text reflows. Fix: self-host Inter as a variable
 *      font with font-display:block so the browser waits before painting text.
 *   2. Scrollbar gutter: when content overflows and a scrollbar appears it
 *      steals ~17px from the viewport, shifting the fixed nav. Fix:
 *      scrollbar-gutter:stable reserves that space always.
 *   3. Nav height drift: fixed nav with no explicit height lets font-swap shrink
 *      or grow it. Fix: hard min-height + box-sizing on the nav element.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;           /* hold layout until font is ready — no swap flash */
  src: url('/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reserve scrollbar width so it never shifts page content */
html {
  scrollbar-gutter: stable;
}

/* Nav: fixed height, no shrink */
.gsnav {
  min-height: 56px;
  box-sizing: border-box;
}

.gsnav-inner {
  height: 56px;
  box-sizing: border-box;
}