/* 1. More intuitive box-sizing model */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    /* 2. Prevent font size inflation */
    html {
      text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }

    /* 3. Remove default margin */
    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
      margin: 0;
    }

    /* 4. Set core body defaults */
    body {
      min-height: 100vh;
      line-height: 1.5;
    }

    /* 5. Reduce line height on headings and interactive elements */
    h1, h2, h3, h4,
    button, input, label {
      line-height: 1.1;
    }

    /* 6. Remove list styles on ul, ol elements with a list role */
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
    }

    /* 7. Remove markers and spacing from elements with a list role and a class */
    [role='list'][class] {
      list-style: none;
      margin-block: 0;
      padding: 0
    }

    /* 8. Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }

    /* 9. Inherit fonts for inputs and buttons */
    input, button,
    textarea, select {
      font-family: inherit;
      font-size: inherit;
    }
    
    
    /*
      Core (design-opinionated) global styles
    */
    
    /* 1. Set design tokens using custom properties */
    :root {
      --color-light: #8d959e;
      --color-dark: #000000;
      --color-primary: #0266ab;  
      --font-base: system-ui, sans-serif;
    }
    
    /* 2. Apply color and font tokens */
    body {
      background-color: var(--color-light);
      color: var(--color-dark);
      font-family: var(--font-base);
    }
    
    /* 3. Set default heading line measure to improve readability */
    h1, h2, h3, h4 {
      max-width: 34ch;
    }
    
    /* 4. Set default line measure to improve readability */
    p,
    li {
      max-width: 50rem;
    }
    
    /* 5. Apply link default color and decoration styles */
    a {
      color: var(--color-primary);
#      text-decoration: underline;
#      text-decoration-color: var(--color-primary);
#      text-decoration-thickness: .20ex;
    }
    
    /* 6. Apply visually different hover and focus state styles */
    a:hover,
    a:focus {
      text-decoration: underline;
      text-decoration-color: var(--color-primary);
      text-decoration-thickness: .20ex;
    }
    
    /* 7. Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
    :focus:not(:focus-visible) {
      outline: none;
    }
    
    /* 8. Show focus styles on keyboard focus. */
    :focus-visible {
      outline: 2px dotted var(--color-dark);
      outline-offset: 3px;
    }
    
    
    /*
      Compositions
    */
    
    /* Apply a margin to direct sibling elements */ 
    .flow > * + * {
      margin-block-start: var(--flow-space, 1em);
    }
    
    /* Create flex items which cluster inline, until space no longer permits. At this point, items begin to wrap and display in block. */
    .cluster {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--cluster-column-gap, 1rem);
      row-gap: var(--cluster-row-gap, .25rem);
      justify-content: var(--cluster-horizontal-alignment, flex-start);
      align-items: var(--cluster-vertical-alignment, center);
    }
    
    /* Add consistent vertical padding between sections of content */
    .region {
      padding-block-start: var(--region-padding-block-start, 1.5rem);
      padding-block-end: var(--region-padding-block-end, 1.5rem);
    }
    
    /* 
      Utilities 
    */
    
    /* Position content horizontally center in the viewport */
    .wrapper {
      width: 95vw;
      width: clamp(16rem,var(--wrapper-max-width, 95vw), 50rem);
      margin-inline: auto;
      padding-inline: 1rem;
    }
    
    /* When space permits, add as much inline space as possibe between two grid items, so that 100% of the inline space has been filled */
    .repel {
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--repel-column-gap, 1rem);
      row-gap: var(--repel-row-gap, .25rem);
      justify-content: space-between;
      align-items: var(--repel-vertical-alignment, center);
    }