:root {
  --blue: #083bf0;
  --rail-text: #0539ed;
  --red: #c22d0d;
  --bg: #ffffff;
  --rail-bg: #ffffff;

  /* Landing screen's x-position within the horizontal-scroll track (it's the first screen, so 0). */
  --canvas-x: 0px;
  /* Work screen starts immediately after the landing screen (1440px wide). */
  --work-x: 1440px;
  /* Snob screen starts after the work gallery's true content extent (the
     flex row of project cards overflows its nominal 1789px container and
     actually ends around x=3513 including shadows -- see
     measureTrackWidth in js/horizontal-scroll.js) plus a breathing gap.
     That gap has to clear the LARGEST real width/height hover-growth
     reflow among the work cards -- card 5 (Launchpad) widens by 348px on
     hover and, since it isn't the last card, that growth pushes every
     card after it (including the last one) rightward by the same amount.
     At 3600 the rest-state gap was only ~209px, so once card 5's 348px
     push ate into it, card 6 ended up about 139px INTO the snob screen's
     own space. Verified live (forcing card 5's hover width directly):
     rest-state gap must exceed 348px with real margin to spare, not just
     clear zero -- 4000 gives a ~609px rest gap, ~261px of clearance left
     after the worst-case push. */
  --snob-x: 4000px;
  /* Total horizontal-scroll track width: landing (1440) + work (1849) screens.
     (Kept for .track's base width; actual scroll distance is measured live
     from content in js/horizontal-scroll.js and now extends through snob.) */
  --track-width: 3289px;

  --font-impact: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-sodasans: "Soda Sans", sans-serif;
  --font-fender: "Fender", sans-serif;
  --font-climate: "Climate Crisis", sans-serif;
  --font-playwrite: "Playwrite US Trad", cursive;
  --font-plexmono: "IBM Plex Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url("../assets/svg/cursor.svg") 6 6, auto;
}

html,
body {
  background: var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}