/* DRAFT: the Design Library (library.html). One long index of names and links.
   The title joins the page-title rule in site-system.css; everything else here
   comes from the tokens. */
.lib { padding-block: var(--page-top) var(--section-y-tight); }
.lib-title { margin: 0 0 var(--space-5); color: var(--ink); }
.lib-lede { max-width: 46ch; margin: 0; font: 400 var(--type-lead)/1.45 var(--face-sans, sans-serif); color: var(--ink-70); }

/* The user's own photo. */
.lib-photo {
  display: block;
  width: calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap));   /* two of the three columns */
  height: auto;
  margin: var(--space-7) 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--bt-edge);
}

.lib-group { padding-block: var(--space-6); border-top: 1px solid var(--rule); }
.lib-group > h2 { margin: 0 0 var(--space-4); font: 600 var(--type-card-title)/1.25 var(--face-display, sans-serif); letter-spacing: -.01em; color: var(--ink); }
.lib-group h3 { margin: var(--space-6) 0 var(--space-3); font: 600 var(--type-body)/1.3 var(--face-sans, sans-serif); color: var(--ink); }
.lib-group > h2 + h3 { margin-top: 0; }
.lib-list { columns: 3; column-gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.lib-list li { break-inside: avoid; padding-block: var(--space-1); font-size: var(--type-body); line-height: 1.4; color: var(--ink-40); }
.lib-list a { color: var(--ink-70); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.lib-list a:hover, .lib-list a:focus-visible { color: var(--accent-text); }

/* Level with the name, like the home page. */
@media (min-width: 861px) { .lib { padding-top: calc(var(--space-7) - var(--space-1)); } }
@media (max-width: 860px) { .lib-list { columns: 2; } .lib-photo { width: 100%; } }
@media (max-width: 480px) { .lib-list { columns: 1; } }