/* The example speeches pages (src/examples.mjs). Loaded on those pages only,
   after styles.css: the sections, the speech card (.sample), the checks and
   the buttons are the site's own; this file adds the list of examples at the
   top, the facts line above each speech, the reading width of the speeches
   and the quieter eulogy section. Colours come from styles.css, so dark mode
   follows it. */

.examples-toc ul {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
}

.examples-toc li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}

.examples-toc a {
  color: var(--ink);
  text-decoration: none;
}

.examples-toc a:hover,
.examples-toc a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.example {
  scroll-margin-top: var(--s-5);
}

.example h3 {
  margin-top: var(--s-6);
}

.example-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin: var(--s-4) 0 0;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.example-facts div {
  min-width: 0;
}

.example-facts dt {
  font: 600 0.74rem/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.example-facts dd {
  margin: 0;
}

/* A speech is read, not skimmed: a comfortable line length. */
.example-speech p {
  max-width: 64ch;
  overflow-wrap: break-word;
}

.example .cta-row {
  margin-top: var(--s-5);
}

/* The eulogy: no button, no price, a plain link. */
.example-gentle {
  background: var(--paper-2);
}

.example-gentle .sample {
  background: var(--card);
}

.example-begin {
  margin-top: var(--s-5);
}