@layer reset, base, layout, components;

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

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Remove default margin in favour of better control in authored CSS */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    font-size: 1.25rem;
    line-height: 1.5;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* A elements that don't have a class get default styles */
  a {
    text-decoration-skip-ink: auto;
    color: var(--color-bittersweet);
  }

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

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

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }

  small {
    font-size: 1rem;
  }
}

@layer base {
  :root {
    --color-surface: oklch(96.792% 0.01851 75.239);
    --color-accent: oklch(52.358% 0.14808 30.399);
    --color-quiet: oklch(67.731% 0.08576 57.197);
    --color-primary: oklch(37.099% 0.01884 43.817);
    --font-family-serif: "Libre Baskerville", serif;
    --font-family-sans: system-ui, sans-serif;
    --font-family-mono: "JetBrains Mono", monospace;
  }

  .mode\:accent {
    --color-primary: oklch(97.26% 0.02027 81.739);
    --color-surface: oklch(52.358% 0.14808 30.399);
    --color-accent: oklch(97.26% 0.02027 81.739);
  }

  body {
    font-family: var(--font-family-sans);
    font-weight: 400;
    background-color: var(--color-surface);
    color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E%0A");
    background-blend-mode: color-burn;
    margin-block-end: 5rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  .serif {
    font-family: var(--font-family-serif);
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
  }

  h1 {
    font-size: 3rem;
  }

  #header {
    padding-block-end: 1rem;
    border-block-end: 2px solid var(--color-light-orange);
  }

  #main > * + * {
    margin-block-start: 2rem;
  }

  @media (any-hover: hover) {
    :any-link {
      transition:
        color 150ms linear,
        text-decoration-color 150ms linear;

      &:hover {
        color: var(--color-accent);
        text-decoration-color: transparent;
      }
    }
  }

  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (position-anchor: --focus-anchor) {
      :focus-visible {
        anchor-name: --focus-anchor;
        outline-color: transparent;
      }

      html::after {
        content: "";
        position: fixed;
        position-anchor: --focus-anchor;
        outline: 3px solid var(--color-accent);
        outline-offset: 3px;
        z-index: 999;
        inset: anchor(inside);
        transition: inset 0.2s cubic-bezier(0.7, 0.08, 0.3, 0.97);
      }
    }
  }
}

@layer layout {
  .container {
    box-sizing: content-box;
    max-inline-size: 980px;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-block-end: 2rem;
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    &:where(ul, ol) {
      padding-inline-start: 0;
      list-style: none;
    }
  }

  .stack {
    > * + * {
      margin-block: 2rem 0;
    }
  }
}

@layer components {
  @counter-style card-numbers {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    pad: 2 "0";
  }
  .card-list {
    counter-reset: cards;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 2.5rem;
    padding-inline-start: 0;
    margin-block: 0;
  }

  .card {
    --card-space-inset: 24px;
    overflow: clip;
    border: 2px solid var(--color-accent);
    border-radius: 1rem;
    padding: 24px;
    counter-increment: card;
    display: flex;
    flex-direction: column;
    row-gap: 0.75rem;
    box-shadow:
      0 0 0 6px var(--color-surface),
      0 0 0 8px color-mix(in oklch, var(--color-quiet), transparent 50%),
      0 2px 10px 8px
        color-mix(in oklch, var(--color-surface), oklch(30% 0 0 / 50%));

    > * {
      margin-block: 0;
    }
  }

  .card__number {
    margin-inline-start: calc(var(--card-space-inset) * -1);
    margin-block-start: calc(var(--card-space-inset) * -1);
    font-family: var(--font-family-serif);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    content: "#" counter(card, card-numbers);
    background-color: var(--color-surface);
    color: var(--color-primary);
    display: inline-block;
    line-height: 2;
    align-self: start;
    padding-inline: 24px;
    border-end-end-radius: 1rem;
  }

  .card__number::before {
    content: "#" counter(card, card-numbers);
  }

  .card__title {
    font-size: 2rem;
    margin-block-start: 0.25rem;
    line-height: 1.5;

    & > a {
      text-underline-offset: 0.75rem;
      text-decoration-color: var(--color-quiet);
      text-decoration-thickness: 2px;
      transition: all 250ms ease-in-out;
      transition-property: color, text-underline-offset, text-decoration-color;

      @media (any-hover: hover) {
        &:hover {
          text-decoration-color: var(--color-accent);
          color: var(--color-accent);
        }
      }
      @media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
        &:hover {
          text-underline-offset: 0.25rem;
        }
      }
    }
  }

  .card__link {
    color: var(--color-accent);
    text-underline-offset: 0.2rem;
  }

  .card__tags {
    border-top: 1px solid;
    border-image: repeating-linear-gradient(
        90deg,
        var(--color-quiet) 0 6px,
        transparent 6px 12px
      )
      1 0 0 0;
    padding-block-start: 1rem;
  }

  .tag {
    background-color: var(--color-surface);
    border-radius: 0.5lh;
    padding: 0.4em 1em;
    color: var(--color-accent);
    font-family: var(--font-family-mono);
    font-weight: 500;
    font-size: 0.95rem;
  }

  @keyframes bg-to-left {
    100% {
      background-position: left;
    }
  }

  .loader {
    width: fit-content;
    font-weight: bold;
    color: var(--color-accent);
    background: linear-gradient(90deg, var(--color-accent) 50%, #0000 0)
      right/200% 100%;
    animation: bg-to-left 1.5s infinite linear;
  }
  .loader span {
    color: transparent;
    padding-inline: 0.5rem 3rem;
    background: inherit;
    background-image: linear-gradient(
      90deg,
      var(--color-surface) 50%,
      var(--color-accent) 0
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}