@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: local('Work Sans'),
    url('/assets/WorkSans-VariableFont_wght.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: local('Work Sans'),
    url('/assets/WorkSans-Italic-VariableFont_wght.woff2')
      format('woff2-variations');
}

@layer reset, main;

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

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

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

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

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

  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  img,
  picture {
    max-width: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

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

  :target {
    scroll-margin-block: 5ex;
  }
}

@layer main {
  :root {
    color-scheme: light dark;

    --tx: light-dark(#100f0f, #fffcf0);
    --tx-muted: hsl(from var(--tx) h s 60%);
    --bg: light-dark(#fffcf0, #100f0f);

    --link-rest: light-dark(#205ea6, #4385be);
    --link-visited: light-dark(#5e409d, #8b7ec8);

    --font-mono: 'Monaspace Neon', monospace;
    --font-mono-size: 0.9em;

    --container-width: 70ch;
  }

  :where(body) {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
      'Helvetica Neue', sans-serif;
    font-size: 1.125rem;
    line-height: 1;

    background-color: var(--bg);
    color: var(--tx);
  }

  :where(a) {
    color: var(--link-rest);

    &:visited {
      color: var(--link-visited);
    }

    &.external-link::after {
      content: '↗';
      vertical-align: super;
    }
  }

  :where(main) {
    line-height: 1.5;
  }

  :where(ul) {
    list-style-type: '→ ';

    & > * + * {
      margin-block-start: 0.5em;
    }

    & > li {
      padding-inline-start: 1ch;

      &::marker {
        color: var(--tx-muted);
        font-size: 0.9em;
      }
    }
  }

  /* On mobile screens, have a sorter start padding for lists to save
   * some space.
   */
  @media (width < 70ch) {
    :where(ul) {
      padding-inline-start: 1rem;
    }
  }

  :where(blockquote) {
    margin-inline: 0;
    border-inline-start: 0.5ch solid hsl(from var(--tx) h s 40%);
    padding-inline-start: 2ch;
  }

  :where(article) {
    word-break: break-word;

    & code:not(pre code) {
      border-radius: 0.25rem;

      font-family: var(--font-mono);
      font-size: var(--font-mono-size);

      background-color: light-dark(#e6e4d9, #282726);
    }

    & * + * {
      margin-block-start: 1em;
    }

    & img {
      object-fit: contain;
      border-radius: 0.5em;
    }
  }

  :where(pre[data-lang]) {
    padding: 1rem;
    border-radius: 0.25rem;

    font-family: var(--font-mono);
    font-size: var(--font-mono-size);

    overflow: auto;
    overscroll-behavior: contain;
  }

  .container {
    max-width: var(--container-width);
    margin-inline: auto;

    padding: 1rem;
  }

  .text-muted {
    color: var(--tx-muted);
  }

  .note-list {
    & .note-link {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(17ch, 1fr));
      column-gap: 0.5ch;
    }

    & time {
      font-feature-settings: 'tnum';
    }
  }
}