/* ==========================================================================
   BASE — reset and default typography. Rarely needs touching.
   ========================================================================== */

   *, *::before, *::after { box-sizing: border-box; }

   html { -webkit-text-size-adjust: 100%; }
   
   body {
     margin: 0;
     background: var(--c-bg);
     color: var(--c-text);
     font-family: var(--font-body);
     font-size: var(--fs-body);
     font-weight: var(--w-regular);
     line-height: var(--lh-body);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   h1, h2, h3, p, ul, figure { margin: 0; }
   ul { list-style: none; padding: 0; }
   
   /* <picture> only exists to offer the browser a WebP before the original.
      display:contents removes it from the box tree, so every rule written
      against the img (and every flex/grid parent) behaves as if the img were
      still a direct child and no other CSS has to know about it.
   
      The <source> has to be hidden explicitly: it normally generates no box
      only because it sits inside a picture, and display:contents takes that
      protection away — in a flex parent it would otherwise count as an item
      and add a phantom column gap.                                           */
   picture { display: contents; }
   picture > source { display: none; }
   
   img {
     display: block;
     max-width: 100%;
     height: auto;
   }
   
   a {
     color: inherit;
     text-decoration: none;
     -webkit-tap-highlight-color: transparent;
   }
   
   button {
     font: inherit;
     color: inherit;
     background: none;
     border: 0;
     padding: 0;
     cursor: pointer;
   }
   
   /* screen-reader only */
   .sr-only {
     position: absolute;
     width: 1px; height: 1px;
     padding: 0; margin: -1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }