/*
 * pim.dev for bare HTML. Every selector starts at a scope, an element without
 * a class, and walks down child by child through elements without classes to
 * the one it styles: a class means somebody else styles it. check.mjs holds
 * every selector to that. Spec: vault/specs/classless-css.md.
 */

/* ── Document ──────────────────────────────────────────────────────────── */

/* The inputs are read once, here. A rule reads the private --_ copy, so a
   fallback is written in one place. */
html {
  --_ground: var(--color-surface, Canvas);
  --_ground-raised: var(
    --color-surface-secondary,
    color-mix(in oklab, CanvasText 6%, Canvas)
  );
  --_ink: var(--color-text, CanvasText);
  --_ink-muted: var(
    --color-text-muted,
    color-mix(in oklab, CanvasText 64%, Canvas)
  );
  --_rule: var(--color-border, color-mix(in oklab, CanvasText 16%, Canvas));
  --_accent: var(--color-accent, Mark);
  --_on-accent: var(--color-text-on-accent, MarkText);
  --_sans: var(--font-sans, system-ui, sans-serif);
  --_data: var(--font-data, ui-monospace, monospace);
  --_radius: var(--radius-media, 0);
  --_section: var(--space-section, clamp(2.5rem, 6vw, 4.5rem));

  --_column: 64rem;
  --_gutter: clamp(1.5rem, 5vw, 4rem);
  --_measure: 68ch;
  --_flow: 1.25rem;
  --_tile: 17rem;

  color-scheme: light dark;
  background-color: var(--_ground);
  color: var(--_ink);
  font-family: var(--_sans);
  line-height: 1.5;
  overflow-wrap: break-word;
  accent-color: var(--_ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  margin: 0;
}

[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

::selection {
  background-color: var(--_accent);
  color: var(--_on-accent);
}

:focus-visible {
  outline: 2px solid var(--_ink);
  outline-offset: 2px;
}

/* ── Page ──────────────────────────────────────────────────────────────── */

body > :is(header, main, footer):not([class]) {
  inline-size: min(100% - 2 * var(--_gutter), var(--_column));
  margin-inline: auto;
}

body > header:not([class]) {
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

body > main:not([class]) {
  flex-grow: 1;
  padding-block: clamp(2rem, 6vw, 4.5rem) var(--_section);
}

body > footer:not([class]) {
  --_flow: 0.75rem;
  padding-block: 1.75rem clamp(2rem, 5vw, 3rem);
  border-block-start: 1px solid var(--_rule);
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ── Flow ──────────────────────────────────────────────────────────────── */

/* Zero specificity, so that any element rule below replaces these. Later
   rules here win over earlier ones. */
:where(:not([class]))
  > :where(
    blockquote,
    dd,
    dl,
    fieldset,
    figure,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    menu,
    ol,
    p,
    pre,
    ul
  ):where(:not([class])) {
  margin-block: 0;
}

:where(:not([class]))
  > :where(
    article,
    aside,
    blockquote,
    dd,
    details,
    dialog,
    div,
    fieldset,
    footer,
    form,
    header,
    hgroup,
    li,
    main,
    section,
    td,
    th
  ):where(:not([class]))
  > :where(*)
  + :where(:not([class])) {
  margin-block-start: var(--_flow);
}

:where(:not([class]))
  > :where(main:not([class]))
  > :where(*)
  + :where(:not([class])) {
  margin-block-start: var(--_section);
}

:where(:not([class])) > :where(h1:not([class])) + :where(:not([class])) {
  margin-block-start: 1.75rem;
}

:where(:not([class])) > :where(*) + :where(h2:not([class])) {
  margin-block-start: 2.75rem;
}

:where(:not([class])) > :where(*) + :where(h3:not([class])) {
  margin-block-start: 2rem;
}

:where(:not([class])) > :where(*) + :where(:is(h4, h5, h6):not([class])) {
  margin-block-start: 1.5rem;
}

:where(:not([class]))
  > :where(:is(ul, ol, menu):not([class]))
  > :where(li:not([class]))
  + :where(li:not([class])),
:where(:not([class]))
  > :where(li:not([class]))
  > :where(*)
  + :where(:is(ul, ol):not([class])) {
  margin-block-start: 0.375rem;
}

:where(:not([class]))
  > :where(figure:not([class]))
  > :where(*)
  + :where(figcaption:not([class])),
:where(:not([class]))
  > :where(figure:not([class]))
  > :where(figcaption:not([class]))
  + :where(:not([class])) {
  margin-block-start: 0.625rem;
}

:where(:not([class]))
  > :where(blockquote:not([class]))
  > :where(*)
  + :where(footer:not([class])) {
  margin-block-start: 0.75rem;
}

:where(:not([class]))
  > :where(hgroup:not([class]))
  > :where(*)
  + :where(:not([class])) {
  margin-block-start: 0.5rem;
}

:where(:not([class]))
  > :where(details:not([class]))
  > :where(summary:not([class]))
  + :where(:not([class])) {
  margin-block-start: 0.75rem;
}

:where(:not([class]))
  > :where(dl:not([class]))
  > :where(dt:not([class]))
  + :where(dd:not([class])) {
  margin-block-start: 0.25rem;
}

:where(:not([class]))
  > :where(dl:not([class]))
  > :where(dd:not([class]))
  + :where(dt:not([class])) {
  margin-block-start: 1rem;
}

:where(:not([class])) > :where(*) + :where(hr:not([class])),
:where(:not([class])) > :where(hr:not([class])) + :where(:not([class])) {
  margin-block-start: 2.5rem;
}

/* ── Headings ──────────────────────────────────────────────────────────── */

:not([class]) > :is(h1, h2, h3, h4, h5, h6):not([class]) {
  text-wrap: balance;
}

:not([class]) > h1:not([class]) {
  font-size: clamp(2rem, 1.25rem + 3.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* The section label. */
:not([class]) > h2:not([class]) {
  padding-block-end: 0.625rem;
  border-block-end: 1px solid var(--_rule);
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

:not([class]) > h3:not([class]) {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

:not([class]) > h4:not([class]) {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* The small uppercase label of the data voice. */
:not([class]) > :is(h5, h6):not([class]),
:not([class]) > table:not([class]) > caption:not([class]),
:not([class])
  > table:not([class])
  > thead:not([class])
  > tr:not([class])
  > :is(th, td):not([class]),
:not([class]) > fieldset:not([class]) > legend:not([class]) {
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:not([class]) > :is(h5, h6):not([class]) {
  font-weight: 500;
  line-height: 1.4;
}

/* A heading's span takes the heading's other tone: the descriptor after a
   name, the count after a label. */
:not([class]) > :is(h1, h3, h4):not([class]) > span:not([class]) {
  color: var(--_ink-muted);
}

:not([class]) > :is(h2, h5, h6):not([class]) > span:not([class]) {
  color: var(--_ink);
}

/* ── Text ──────────────────────────────────────────────────────────────── */

:not([class]) > p:not([class]) {
  max-inline-size: var(--_measure);
  line-height: 1.6;
  text-wrap: pretty;
}

:not([class]) > a:not([class]) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--_ink-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:not([class]) > a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* The accent only ever sits behind on-accent text. The outline stays, in
   transparent, because forced-colours mode replaces the fill and draws the
   outline. A link rule below that sets a colour or drops the underline
   excludes :focus-visible, or it would outrank this one. */
:not([class]) > a:not([class]):focus-visible {
  outline-color: transparent;
  background-color: var(--_accent);
  color: var(--_on-accent);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:not([class]) > :is(strong, b):not([class]) {
  font-weight: 600;
}

:not([class]) > small:not([class]) {
  font-size: 0.8125em;
}

:not([class]) > mark:not([class]) {
  padding-inline: 0.15em;
  background-color: var(--_accent);
  color: var(--_on-accent);
}

:not([class]) > :is(code, kbd, samp):not([class]) {
  font-family: var(--_data);
  font-size: 0.875em;
}

:not([class]) > code:not([class]) {
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background-color: var(--_ground-raised);
}

:not([class]) > kbd:not([class]) {
  padding: 0.05em 0.35em;
  border: 1px solid var(--_rule);
  border-block-end-width: 2px;
  border-radius: 3px;
}

:not([class]) > pre:not([class]) {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--_radius);
  background-color: var(--_ground-raised);
  font-family: var(--_data);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}

:not([class]) > pre:not([class]) > code:not([class]) {
  padding: 0;
  background: none;
  font-size: inherit;
}

:not([class]) > abbr:not([class])[title] {
  cursor: help;
  text-decoration: underline dotted;
}

:not([class]) > :is(sub, sup):not([class]) {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

:not([class]) > sub:not([class]) {
  inset-block-end: -0.25em;
}

:not([class]) > sup:not([class]) {
  inset-block-start: -0.5em;
}

:not([class]) > del:not([class]) {
  color: var(--_ink-muted);
}

:not([class]) > address:not([class]) {
  font-style: normal;
}

:not([class]) > time:not([class]) {
  font-variant-numeric: tabular-nums;
}

:not([class]) > hr:not([class]) {
  block-size: 0;
  border: 0;
  border-block-start: 1px solid var(--_rule);
  color: inherit;
}

/* ── Lists ─────────────────────────────────────────────────────────────── */

:not([class]) > :is(ul, ol, menu):not([class]) {
  box-sizing: border-box;
  max-inline-size: var(--_measure);
  padding-inline-start: 1.25em;
  line-height: 1.6;
}

:not([class]) > :is(ul, menu):not([class]) {
  list-style-type: square;
}

/* Room for a two-digit marker in the data voice, inside the column. */
:not([class]) > ol:not([class]) {
  padding-inline-start: 2em;
  list-style-type: decimal;
}

:not([class]) > :is(ul, ol, menu):not([class]) > li:not([class])::marker {
  color: var(--_ink-muted);
}

:not([class]) > ol:not([class]) > li:not([class])::marker {
  font-family: var(--_data);
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
}

:not([class]) > dl:not([class]) {
  max-inline-size: var(--_measure);
  line-height: 1.6;
}

:not([class]) > dl:not([class]) > dt:not([class]),
:not([class]) > dl:not([class]) > div:not([class]) > dt:not([class]) {
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:not([class]) > dl:not([class]) > dd:not([class]),
:not([class]) > dl:not([class]) > div:not([class]) > dd:not([class]) {
  margin-inline-start: 0;
}

/* ── Quotes ────────────────────────────────────────────────────────────── */

:not([class]) > blockquote:not([class]) {
  box-sizing: border-box;
  max-inline-size: var(--_measure);
  margin-inline: 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid var(--_ink);
  line-height: 1.6;
}

:not([class]) > blockquote:not([class]) > footer:not([class]) {
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* The second declaration keeps the dash out of the accessibility tree where
   alt text for `content` is supported; the first is for where it is not. */
:not([class]) > blockquote:not([class]) > footer:not([class])::before {
  content: "\2014\00a0";
  content: "\2014\00a0" / "";
}

/* ── Media ─────────────────────────────────────────────────────────────── */

:not([class]) > :is(img, video, canvas, svg, iframe):not([class]) {
  display: block;
  max-inline-size: 100%;
}

:not([class]) > :is(img, video):not([class]) {
  block-size: auto;
  border-radius: var(--_radius);
}

:not([class]) > video:not([class]) {
  background-color: var(--_ground-raised);
}

:not([class]) > iframe:not([class]) {
  border: 0;
}

:not([class]) > figure:not([class]) {
  margin-inline: 0;
}

:not([class]) > figure:not([class]) > figcaption:not([class]) {
  max-inline-size: var(--_measure);
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

/* Tables keep display: table. Changing a table's display drops its
   semantics in some screen readers, so a URL in a cell breaks anywhere
   instead, and the table shrinks to fit. */
:not([class]) > table:not([class]) {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-indent: 0;
}

:not([class]) > table:not([class]) > caption:not([class]) {
  padding-block-end: 0.75rem;
  text-align: start;
}

:not([class])
  > table:not([class])
  > :is(thead, tbody, tfoot):not([class])
  > tr:not([class])
  > :is(th, td):not([class]) {
  padding-block: 0.5rem;
  padding-inline: 0 1rem;
  border-block-end: 1px solid var(--_rule);
  text-align: start;
  vertical-align: top;
}

:not([class])
  > table:not([class])
  > :is(thead, tbody, tfoot):not([class])
  > tr:not([class])
  > :is(th, td):not([class]):last-child {
  padding-inline-end: 0;
}

:not([class])
  > table:not([class])
  > :is(tbody, tfoot):not([class])
  > tr:not([class])
  > th:not([class]) {
  font-weight: 600;
}

:not([class])
  > table:not([class])
  > thead:not([class])
  > tr:not([class])
  > :is(th, td):not([class]) {
  border-block-end-color: var(--_ink);
  font-weight: 500;
  vertical-align: bottom;
}

:not([class])
  > table:not([class])
  > :is(thead, tbody, tfoot):not([class])
  > tr:not([class])
  > :is(th, td):not([class])
  > a:not([class]) {
  overflow-wrap: anywhere;
}

/* ── Navigation ────────────────────────────────────────────────────────── */

:not([class]) > nav:not([class]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  font-family: var(--_data);
  font-size: 0.8125rem;
  line-height: 1.5;
}

:not([class]) > nav:not([class]) > a:not([class]):not(:focus-visible) {
  color: var(--_ink-muted);
  text-decoration-line: none;
}

:not([class])
  > nav:not([class])
  > a:not([class]):is(:hover, [aria-current="page"]):not(:focus-visible) {
  color: var(--_ink);
  text-decoration-line: underline;
}

body > header:not([class]) > nav:not([class]) > a:not([class])[href="/"] {
  margin-inline-end: 0.5rem;
}

body
  > header:not([class])
  > nav:not([class])
  > a:not([class])[href="/"]:not(:focus-visible) {
  color: var(--_ink);
}

body
  > header:not([class])
  > nav:not([class])
  > a:not([class])[href^="mailto:"] {
  margin-inline-start: auto;
}

/* A link that ends a section is the way onward. */
:not([class]) > section:not([class]) > a:not([class]):last-child {
  display: inline-block;
  font-family: var(--_data);
  font-size: 0.8125rem;
}

:not([class]) > section:not([class]) > a:not([class]):last-child::after {
  content: "\00a0\2192";
  content: "\00a0\2192" / "";
}

/* ── Disclosure and dialog ─────────────────────────────────────────────── */

:not([class]) > details:not([class]) {
  padding-block: 0.75rem;
  border-block: 1px solid var(--_rule);
}

:not([class]) > details:not([class]) + details:not([class]) {
  margin-block-start: 0;
  border-block-start: 0;
}

:not([class]) > details:not([class]) > summary:not([class]) {
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

:not([class])
  > details:not([class])
  > summary:not([class])::-webkit-details-marker {
  display: none;
}

:not([class]) > details:not([class]) > summary:not([class])::before {
  display: inline-block;
  inline-size: 1.5em;
  color: var(--_ink-muted);
  font-family: var(--_data);
  content: "+";
  content: "+" / "";
}

:not([class]) > details:not([class])[open] > summary:not([class])::before {
  content: "\2212";
  content: "\2212" / "";
}

:not([class]) > dialog:not([class]) {
  box-sizing: border-box;
  max-inline-size: min(36rem, 100% - 2rem);
  margin: auto;
  padding: 1.5rem;
  border: 1px solid var(--_rule);
  background-color: var(--_ground);
  color: var(--_ink);
}

:not([class]) > dialog:not([class])::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

:not([class]) > label:not([class]) {
  display: block;
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

:where(:not([class]))
  > :where(label:not([class]))
  + :where(:is(input, select, textarea):not([class])) {
  margin-block-start: 0.375rem;
}

:not([class])
  > label:not([class]):has(> input:is([type="checkbox"], [type="radio"])) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
}

:not([class])
  > :is(
    input:not(
      [type="button"],
      [type="checkbox"],
      [type="color"],
      [type="file"],
      [type="hidden"],
      [type="image"],
      [type="radio"],
      [type="range"],
      [type="reset"],
      [type="submit"]
    ),
    select,
    textarea
  ):not([class]) {
  box-sizing: border-box;
  max-inline-size: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--_ink-muted);
  border-radius: 0;
  background-color: var(--_ground);
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  line-height: 1.5;
}

:not([class])
  > input:is([type="checkbox"], [type="radio"], [type="range"]):not([class]) {
  margin: 0;
  background-color: transparent;
}

:not([class]) > textarea:not([class]) {
  min-block-size: 8rem;
  resize: vertical;
}

:not([class]) > :is(input, textarea):not([class])::placeholder {
  color: var(--_ink-muted);
  opacity: 1;
}

:not([class])
  > :is(button, input:is([type="button"], [type="reset"], [type="submit"])):not(
    [class]
  ) {
  box-sizing: border-box;
  appearance: button;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--_ink);
  border-radius: 0;
  background-color: var(--_ink);
  color: var(--_ground);
  cursor: pointer;
  font-family: var(--_data);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:not([class])
  > :is(button, input:is([type="button"], [type="reset"], [type="submit"])):not(
    [class]
  ):hover:not(:disabled) {
  background-color: transparent;
  color: var(--_ink);
}

:not([class]) > :is(button, input, select, textarea):not([class]):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

:not([class]) > fieldset:not([class]) {
  min-inline-size: 0;
  margin-inline: 0;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--_rule);
}

:not([class]) > fieldset:not([class]) > legend:not([class]) {
  padding-inline: 0.375rem;
}

/* ── Arrangements ──────────────────────────────────────────────────────── */

/* Lists that drop their markers set an invisible string marker instead of
   list-style: none, which makes VoiceOver stop announcing them as lists. */
:not([class])
  > :is(ul, ol):not([class]):is(
    :has(> li :is(img, video)),
    :has(> li > a > span + span),
    :has(> li > blockquote)
  ) {
  padding-inline-start: 0;
  list-style-type: "\200B";
}

/* Tiles: a list whose items hold an image or a video, a section whose
   articles hold one, a section whose divs hold a figure. */
:not([class]) > :is(ul, ol):not([class]):has(> li :is(img, video)),
:not([class])
  > section:not([class]):is(
    :has(> article :is(img, video)),
    :has(> div > figure)
  ) {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--_tile)), 1fr)
  );
  gap: 2.5rem 1.5rem;
  align-items: start;
}

:not([class]) > :is(ul, ol):not([class]):has(> li :is(img, video)) {
  max-inline-size: none;
}

:not([class])
  > :is(ul, ol):not([class]):has(> li :is(img, video))
  > li:not([class]),
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > article:not([class]) {
  --_flow: 0.625rem;
}

:not([class])
  > :is(ul, ol):not([class]):has(> li :is(img, video))
  > li:not([class]),
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > article:not([class]),
:not([class]) > section:not([class]):has(> div > figure) > div:not([class]) {
  margin-block-start: 0;
}

/* A tile section's heading, and anything else that is not a tile, spans the
   row and pulls the next row up to the usual distance below a label. */
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > :not(article):not([class]),
:not([class])
  > section:not([class]):has(> div > figure)
  > :not(div):not([class]) {
  grid-column: 1 / -1;
  margin-block: 0 -1.25rem;
}

/* Inside a tile, one distance between everything, headings included. */
:not([class])
  > :is(ul, ol):not([class]):has(> li :is(img, video))
  > li:not([class])
  > *
  + :not([class]),
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > article:not([class])
  > *
  + :not([class]),
:not([class])
  > section:not([class]):has(> div > figure)
  > div:not([class])
  > *
  + :not([class]) {
  margin-block-start: var(--_flow);
}

:not([class])
  > :is(ul, ol):not([class]):has(> li :is(img, video))
  > li:not([class])
  > p:not([class]),
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > article:not([class])
  > p:not([class]) {
  color: var(--_ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* A tile's last paragraph, after another, is its metadata. */
:not([class])
  > :is(ul, ol):not([class]):has(> li :is(img, video))
  > li:not([class])
  > p:not([class]):last-of-type:not(:first-of-type),
:not([class])
  > section:not([class]):has(> article :is(img, video))
  > article:not([class])
  > p:not([class]):last-of-type:not(:first-of-type) {
  font-family: var(--_data);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Thumbnail: a link holding an image, in a tile. */
:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> img) {
  display: grid;
  gap: 0.75rem;
  color: var(--_ink);
  font-weight: 600;
  text-decoration-line: none;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> img):focus-visible {
  outline-color: var(--_ink);
  outline-offset: 4px;
  background-color: transparent;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> img)
  > img:not([class]) {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> img):is(:hover, :focus-visible)
  > span:not([class]) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Index: a list whose items hold a link with two or more spans. The first
   span is the title; the rest of the row is metadata. */
:not([class]) > :is(ul, ol):not([class]):has(> li > a > span + span) {
  max-inline-size: none;
}

:not([class])
  > :is(ul, ol):not([class]):has(> li > a > span + span)
  > li:not([class]) {
  margin-block-start: 0;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--_rule);
  color: var(--_ink-muted);
  font-family: var(--_data);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* A row that is nothing but its link is a link by position, and drops the
   underline. A row with anything beside the link keeps it, or the reader
   cannot tell the link from its neighbour. */
:not([class])
  > :is(ul, ol):not([class])
  > li:not([class]):has(> a > span + span)
  > a:not([class]):only-child {
  display: block;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class]):has(> a > span + span)
  > a:not([class]):only-child:not(:focus-visible) {
  text-decoration-line: none;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> span + span)
  > span:not([class]):first-child {
  margin-inline-end: 0.5em;
  font-family: var(--_sans);
  font-size: 1rem;
  letter-spacing: normal;
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> span + span):not(:focus-visible)
  > span:not([class]):first-child {
  color: var(--_ink);
}

:not([class])
  > :is(ul, ol):not([class])
  > li:not([class])
  > a:not([class]):has(> span + span):hover
  > span:not([class]):first-child {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Quotes: a list whose items hold a blockquote. */
:not([class]) > :is(ul, ol):not([class]):has(> li > blockquote) {
  display: grid;
  gap: 2rem;
}

:not([class])
  > :is(ul, ol):not([class]):has(> li > blockquote)
  > li:not([class]) {
  margin-block-start: 0;
}

/* Definition rows: a dl of divs, each a dt and its dd. */
:not([class]) > dl:not([class]) > div:not([class]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.25rem), 1fr));
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--_rule);
}

:not([class]) > dl:not([class]) > div:not([class]) > :is(dt, dd):not([class]) {
  margin-block: 0;
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  :not([class]) > a:not([class]) {
    transition: text-decoration-color 150ms;
  }
}