@layer components {
  .articles {
    .article-section {
      margin-block-start: var(--space-l);

      h2 {
        margin: 0 0 var(--space-s);
        font-family: var(--font-display);
        font-size: var(--step-1);
      }
    }

    .articles-empty {
      margin: 0;
      color: var(--muted);
    }
  }

  .article-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;

    li { min-inline-size: 0; }
  }

  .article-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    min-block-size: var(--touch);
    padding: var(--space-s);
    background: var(--paper);
    border: thin solid color-mix(in oklch, var(--ink) 18%, var(--mist));
    border-radius: var(--radius-s);
    color: inherit;
    text-decoration: none;
    text-align: start;

    strong {
      font-weight: 600;
      text-wrap: pretty;
    }

    small {
      color: var(--muted);
      font-size: var(--step-00);
    }

    &:hover,
    &:focus-visible {
      background: var(--stripe);
      border-color: var(--paprika);
    }
  }

  .article {
    .crumbs {
      margin: 0 0 var(--space-s);
      font-size: var(--step-00);

      ol {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2xs) 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      li {
        display: flex;
        min-inline-size: 0;
        max-inline-size: 100%;

        &:not(:last-child)::after {
          content: "/";
          margin-inline: 0.4em;
          color: var(--muted);
        }

        &:last-child {
          display: block;
          overflow-wrap: anywhere;
        }

        a {
          color: var(--paprika);
          text-decoration: none;
        }
      }

      [aria-current="page"] { color: var(--muted); }
    }

    .byline {
      margin: 0 0 var(--space-m);
      color: var(--muted);
      font-size: var(--step-00);
    }

    .article-body {
      h3 {
        margin-block: var(--space-l) var(--space-s);
        font-size: var(--step-0);
        font-weight: 600;
        text-wrap: pretty;
      }

      p,
      ul {
        margin-block: 0 var(--space-m);
        text-wrap: pretty;

        &:last-child { margin-block-end: 0; }
      }

      ul {
        padding-inline-start: 1.2em;

        li { max-inline-size: 100%; }
      }
    }

    .article-body table {
      inline-size: 100%;
      margin-block: 0 var(--space-m);
      border-collapse: collapse;
      font-size: var(--step-0);

      th,
      td {
        padding-block: var(--space-2xs);
        padding-inline: var(--space-xs);
        text-align: start;
        vertical-align: top;
        overflow-wrap: anywhere;
        border-block-end: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));
      }

      th {
        color: var(--muted);
        font-weight: 600;
      }

      th:last-child,
      td:last-child {
        text-align: end;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
    }

    .sources,
    .related {
      margin-block-start: var(--space-l);
      padding-block-start: var(--space-m);
      border-block-start: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist));

      h2 {
        margin: 0 0 var(--space-s);
        font-family: var(--font-display);
        font-size: var(--step-1);
      }
    }

    .sources ol {
      margin: 0;
      padding-inline-start: 1.4em;
      color: var(--dusk);
      font-size: 0.9em;

      li {
        padding-inline-start: 0.35em;
        overflow-wrap: anywhere;
      }

      cite { font-style: italic; }

      a {
        color: var(--paprika);
        text-underline-offset: 0.15em;
        overflow-wrap: anywhere;
      }
    }

    .article-all {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--touch);
      margin-block-start: var(--space-s);
      color: var(--paprika);
      text-underline-offset: 0.15em;
    }

  }
}