@layer reset {
  /* ------------------ reset  ------------------ */

  /* inspired by: */
  /* https://piccalil.li/blog/a-modern-css-reset/ */
  /* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
  /* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */
  /* https://github.com/mayank99/reset.css/blob/main/package/index.css */

  /* Box sizing rules */

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

  /* Typography */
  * {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* Scroll behavior */
  html:focus-within {
    scroll-behavior: smooth;
  }

  /* Body defaults */
  body {
    min-height: 100vh;
    min-height: 100dvh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
  }

  /* Margins */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* List styles */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  /* Padding for lists */
  [role='list'] {
    padding: 0;
  }

  /* Anchor styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  /* Image styles */
  img,
  picture,
  svg,
  canvas {
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
  }

  /* Button styles */
  button {
    all: unset;
  }

  /* Inherit fonts for inputs and buttons */
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  /* Textarea styles */
  textarea {
    resize: vertical;
    resize: block;
  }

  /* Textarea height */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Cursor styles */
  button,
  label,
  select,
  summary,
  [role='button'],
  [role='option'] {
    cursor: pointer;
  }

  /* Scroll margin above anchor links */
  :target {
    scroll-margin-block-start: 2ex;
  }

  /* Scroll margin below focused elements */
  :focus {
    scroll-margin-block-end: 8vh;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }

    *,
    ::after,
    ::before {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer variables {
  /* ------------------ variables  ------------------  */

  :root {
    color-scheme: light dark;
    --_dark: color-mix(in oklab, black 70%, var(--blue-dark));
    --color-highlight: light-dark(var(--blue-light), var(--blue-light));
    --color-bg: light-dark(var(--blue-dark), var(--blue-dark));
    --color-text: light-dark(white, white);

    /* mode switch (https://web.dev/articles/light-dark) */
    &:has(input[name='color-scheme'][value='light dark']:checked) {
      color-scheme: light dark;
    }
    &:has(input[name='color-scheme'][value='light']:checked) {
      color-scheme: light;
    }
    &:has(input[name='color-scheme'][value='dark']:checked) {
      color-scheme: dark;
    }

    /*transitions*/
    --transition-link: 300ms ease-in-out 0s;

    /*borders*/
    --border-4: 4px;
    --border-8: 8px;
    --border-12: 12px;

    /*brand colours */

    --blue-brand: #22BCB9;
    --blue-light: #238A8E;
    --blue-medium: #255962;
    --blue-medium-dark: #26404D;
    --blue-dark: #262737;


    /*fonts*/
    /* --font-sans: 'Source Sans Pro', sans-serif;
    --font-serif: 'Source Serif Pro', sans-serif; */
    
    /* font sizes */
    /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1512,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    --size-step--2: clamp(0.7813rem, 0.7762rem + 0.0252vw, 0.8rem);
    --size-step--1: clamp(0.9375rem, 0.9207rem + 0.0839vw, 1rem);
    --size-step-0: clamp(1.125rem, 1.0914rem + 0.1678vw, 1.25rem);
    --size-step-1: clamp(1.35rem, 1.293rem + 0.2852vw, 1.5625rem);
    --size-step-2: clamp(1.62rem, 1.5306rem + 0.4471vw, 1.9531rem);
    --size-step-3: clamp(1.944rem, 1.8105rem + 0.6677vw, 2.4414rem);
    --size-step-4: clamp(2.3328rem, 2.1398rem + 0.965vw, 3.0518rem);
    --size-step-5: clamp(2.7994rem, 2.5268rem + 1.3629vw, 3.8147rem);
    --size-step-6: clamp(3.3592rem, 2.9809rem + 1.8915vw, 4.7684rem);

    /* spacing */
    /* https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);

    /* semantic variables */

    --gutter: var(--space-s-m);
    --wrapper-width: clamp(16rem, 98vw, 65rem);
    --text-size-base-sm: 14px;
    --text-size-base: var(--size-step-0);
    --text-size-display: var(--size-step-6);
    --text-size-heading-1: var(--size-step-5);
    --text-size-heading-2: var(--size-step-4);
    --text-size-heading-3: var(--size-step-3);
    --text-size-heading-4: var(--size-step-2);
    --font-base: "Source Sans 3", system-ui, sans-serif;
    --leading: 1.5;
    --leading-fine: 1.2;
  }
}

@layer base {
  /* ------------------ base  ------------------  */

  body {
    font-family: var(--font-base);
    font-size: var(--text-size-base);
    line-height: var(--leading);
    display: flex;
    flex-direction: column;
    accent-color: var(--color-highlight);
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  main {
    flex: auto;
  }

  h1,
  h2,
  h3, 
  h4 {
    line-height: var(--leading-fine);
    font-family: "Source Serif 4", serif;
    font-weight: 500;
  }

  h1 {
    font-size: var(--text-size-heading-1);
  }

  /* .h1 {
    background: #262737;
    background: linear-gradient(180deg, rgba(38, 39, 55, 0) 50%, rgba(38, 64, 77, 1) 50%);
  } */

  h2 {
    font-size: var(--text-size-heading-2);
  }

  h3 {
    font-size: var(--text-size-heading-3);
    margin-bottom: 16px;
  }

  h4 {
    margin-bottom: 16px;
  }

  p,
  li {
    max-inline-size: 70ch;
  }

  svg {
    block-size: 2ex;
    inline-size: auto;
    flex: none;
  }

  a {
    box-shadow: 0 2px white;
    color: white;
    text-decoration:none;
    transition: var(--transition-link);
    /* text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.3em; */
  }

  a:hover {
    /* text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.3em; */
    transition: 300ms ease-in-out 0s;
    box-shadow: 0 0.1em 0 var(--blue-brand);
  }

  header a, header p, footer a, footer span {
    font-size: var(--text-size-base-sm);
    text-decoration: none;
    
  }
  
  footer {
    background-color: var(--blue-light);
    padding: 1em 0 1em 0;
    color: var(--blue-dark);
  }


  /* Hover */


  /* Focus styles */
  :focus-visible {
    outline: 3px solid;
    outline-offset: 0.3ch;
  }

  /* Text selection */
  ::selection {
    background-color: var(--color-highlight);
    color: currentColor;
  }

  /* Scripting */
  @media (scripting: none) {
    .require-js {
      display: none;
    }
  }
}

@layer compositions {
  /* ------------------ Compositions (layouts) ------------------ */

  /* https://every-layout.dev/layouts/stack/ */
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  /* https://every-layout.dev/layouts/cluster/ */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter, var(--space-s-l));
    justify-content: var(--cluster-horizontal-alignment, flex-start);
    align-items: var(--cluster-vertical-alignment, center);
  }

  /* pushes items away from each other where there is space in the viewport and stacks on small viewports */
  .repel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: var(--repel-vertical-alignment, center);
    gap: var(--gutter, var(--space-s-l));
  }

  /* Add consistent vertical padding to create regions of content */
  .region {
    padding-block-start: var(--region-space-top, var(--space-l-xl));
    padding-block-end: var(--region-space-bottom, var(--space-l-xl));

  }

  /* https://ryanmulligan.dev/blog/layout-breakouts/ */
  .wrapper {
    --gap: clamp(1rem, 6vw, 3rem);
    --full: minmax(var(--gap), 1fr);
    --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
    --outer: minmax(0, 6rem);

    display: grid;
    grid-template-columns:
      [full-start] var(--full)
      [outer-start] var(--outer)
      [content-start] var(--content) [content-end]
      var(--outer) [outer-end]
      var(--full) [full-end];
  }

  .wrapper > * {
    grid-column: content;
  }

  .outer {
    grid-column: feature;
  }

  .full {
    grid-column: full;
  }
}

@view-transition {
    navigation: auto;
}