:root{
  --sp-0:0px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  --sp-11:80px; --sp-12:96px; --sp-13:128px;

  --gutter:24px;
  --section-y:96px;
  --section-y-tight:64px;
  --measure:66ch;
  --container:1200px;
  --container-narrow:820px;
  /* The header is two stacked rows since the utility bar (language switch,
     account, cart) was split out of the main row to make room for a Blog
     nav item -- --header-main-h is just the logo/nav row's own height,
     --header-h is the two rows combined and is what anything positioned
     relative to the whole sticky header (the mobile drawer's top offset,
     in-page anchor scroll-margin) must use. */
  --header-main-h:112px;
  --header-h:153px;

  /* Single responsive breakpoint, used by SiteHeader and the shop header:
     below this, the inline nav collapses behind a toggle. */
  --bp-nav:860px;
}