/* ==========================================================================
   index-block.css — §11, the highlights

   This section used to be the whole surface: ten groups × six lines plus four
   role paragraphs, set as dense type. It was honest and it was unreadable —
   nobody reads a hundred lines of list on a landing page, and four paragraphs
   of role copy is four blocks of text at the exact point a visitor is deciding
   whether to write to us.

   So the full surface moved to `everything.html` and what stays here is a
   contents page: ten rows, one concrete line each, a count, and a link. The
   count is the proof of breadth that the list used to carry — and it is
   verified against the sub-page's actual `<li>` count, not estimated.
   ========================================================================== */

.hls {
  border-top: 1px solid var(--border);
}

.hl {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 74px;
  gap: 8px 40px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
  color: inherit;
}

.hl__n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hl__d {
  font-size: 15px;
  line-height: 1.4;
  color: var(--body);
  text-wrap: pretty;
}

/* The count sits in a fixed track so ten rows share one right rail, and the
   arrow replaces it on hover rather than sitting beside it — a permanent arrow
   on ten rows is ten arrows competing with the copy. */
.hl__c {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  color: var(--faint);
  text-align: right;
  white-space: nowrap;
}
.hl__c::after {
  content: "\2192";
  position: absolute;
  right: 0;
  opacity: 0;
  color: var(--ink);
}

.hl:hover { background: var(--sunk); }
.hl:hover .hl__c { color: transparent; }
.hl:hover .hl__c::after { opacity: 1; }
.hl:focus-visible { background: var(--sunk); }

/* --- the four roles, named once, as a legend ----------------------------- */
/* The full role copy lives on the sub-page. Here they are only named, because
   the nine sections above have already argued each desk's case. */
.legend {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
}
.legend__l {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.legend__r { font-size: 15px; color: var(--body); }
.legend__r b { font-weight: 500; color: var(--ink); }
/* Underlined ink, not the accent. `a { color: var(--accent) }` is the global
   default and correct in running copy, but page chrome is rationed to two
   accent marks (the two wordmarks) and this link sits in chrome. */
.legend__r a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
}
.legend__r a:hover { text-decoration-color: var(--ink); }

.hls__more {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

@media (max-width: 780px) {
  .hl { grid-template-columns: minmax(0, 1fr) 64px; gap: 5px 20px; padding: 15px 0; }
  .hl__n { grid-column: 1; }
  .hl__c { grid-column: 2; grid-row: 1; }
  .hl__d { grid-column: 1 / -1; }
}