@layer components {
  .lede { max-width: var(--measure); color: var(--ink-dim); font-size: 16px; }

  /* key/value facts */
  .facts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: var(--s5);
    & > div { display: grid; grid-template-columns: 120px 1fr; min-width: 0; }
    & dt { color: var(--ink-mute); }
    & dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  .tagged { color: var(--ink); font-weight: 700; white-space: nowrap; }
  .list.commits .c-subject { overflow: hidden; text-overflow: ellipsis; }

  .readme .prose { padding: var(--s5) var(--s6) var(--s6); }

  /* rendered Markdown */
  .prose {
    max-width: var(--measure); line-height: 1.65; overflow-wrap: break-word;
    & h1, & h2, & h3, & h4 { margin: 1.6em 0 0; }
    & h1 { font-size: 26px; line-height: 34px; padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
    & h2 { font-size: 20px; line-height: 28px; padding-bottom: var(--s1); border-bottom: 1px solid var(--border); }
    & h3 { font-size: 17px; }
    & > :first-child { margin-top: 0; }
    & p, & ul, & ol, & pre, & table, & blockquote { margin-top: var(--s4); }
    & ul { list-style: disc; }
    & ul, & ol { padding-left: var(--s5); }
    & ol { list-style: decimal; }
    & li + li { margin-top: var(--s1); }
    & li::marker { color: var(--ink-mute); }
    & a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
    & a:hover { color: var(--accent); text-decoration-color: currentColor; }
    & li > ul, & li > ol, & li > p { margin-top: var(--s1); }
    & pre {
      padding: var(--s3) var(--s4); overflow-x: auto;
      background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
      font-size: var(--fs-code); line-height: var(--lh-code);
    }
    & :not(pre) > code {
      padding: 1px 5px; font-size: .88em; overflow-wrap: anywhere;
      background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px;
    }
    & blockquote { padding-left: var(--s4); border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong)); color: var(--ink-dim); }
    & table { display: block; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-s); font-size: var(--fs-s); line-height: 20px; }
    & th, & td { padding: 6px var(--s3); white-space: nowrap; vertical-align: top; border-top: 1px solid var(--border); }
    & th { background: var(--bg-raised); border-top: 0; font-weight: 700; }
    & td code { white-space: nowrap; }
    & hr { margin: var(--s5) 0; }
    & .alt { color: var(--ink-mute); }
    & img { display: none; }
  }
}