/* site-index.css: /site-index/, every page on the site as links.

   The whole design problem is scroll. 177 links with a description each ran to
   eighteen thousand pixels, which is a document about the site rather than an
   index of it. Links only, packed into CSS columns, is about a fifth of that.

   Columns rather than a grid, deliberately. A grid row is as tall as its
   tallest cell, so one title wrapping to two lines puts air under four
   neighbours. Columns pack each one against the next and simply flow, which is
   how a printed index sets. break-inside on the item is what keeps a link from
   being cut in half at the foot of a column.

   Every class is namespaced .si-*. This sheet loads after core.css, and the
   note at .sec in core records what happens when a page sheet reaches for a
   shared class name: the phone media query in core is silently defeated,
   because a later bare rule wins on source order without matching the query.
   ---------------------------------------------------------------------- */

/* ── head ─────────────────────────────────────────────────────────────── */
.si-top{
  padding:clamp(30px, 3.4vw, 54px) 0 clamp(20px, 2.2vw, 30px);
  background:var(--paper);
}
.si-top h1{
  margin:16px 0 0;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.05;
  letter-spacing:-0.03em;
}
.si-lede{
  margin:12px 0 0;
  max-width:68ch;
  font-size:var(--fs-md);
  line-height:1.5;
  color:var(--ink-2);
}

/* ── jump chips ───────────────────────────────────────────────────────────
   A wrapped row of chips, not a grid of tiles. The tile version was ten boxes
   and 500px of rail on a phone, in front of an index whose whole point is that
   it is short. */
.si-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(18px, 2vw, 26px);
}
.si-jump a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border:1px solid var(--rule);
  font-family:var(--f-ui);
  font-size:var(--fs-sm);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.si-jump a i{
  font-style:normal;
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  color:var(--ink-mute);
}
.si-jump a:hover{background:var(--hazard);border-color:var(--hazard);color:var(--hazard-ink)}
.si-jump a:hover i{color:inherit;opacity:.75}
.si-jump a:focus-visible{outline:2px solid var(--hazard);outline-offset:2px}

/* ── groups ───────────────────────────────────────────────────────────── */
.si-body{padding-bottom:clamp(40px, 4vw, 72px)}
.si-g{
  padding-top:clamp(20px, 2vw, 30px);
  border-top:1px solid var(--rule);
  /* scroll-margin, not a spacer: the chips are anchors and the header is
     sticky, so without this every jump lands with the heading under the bar. */
  scroll-margin-top:110px;
}
.si-g h2{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0 0 2px;
  font-size:clamp(20px, 1.7vw, 25px);
  line-height:1.2;
  letter-spacing:-0.02em;
}
.si-n{
  font-family:var(--f-ui);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--ink-mute);
}

/* A caption inside a group: the six directory areas, the ten subject hubs.
   Deliberately not an <h3>: it is a divider inside a list of links, and putting
   26 headings into the outline of an index would make the document structure
   about the furniture. */
.si-b{
  margin:15px 0 2px;
  font-family:var(--f-ui);
  font-size:var(--fs-xs);
  font-weight:600;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ── the links ────────────────────────────────────────────────────────── */
.si-l{
  /* 200px of column width against a 28px gutter is five columns at 1440 and
     seven at 1920. Wider columns read no better here: the longest name on the
     page is 33 characters and everything else has room to spare. */
  columns:200px;
  column-gap:28px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.si-l li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
.si-l a{
  display:block;
  padding:4px 0;
  border-bottom:1px solid var(--rule-soft);
  font-size:var(--fs-sm);
  line-height:1.35;
  letter-spacing:-0.01em;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .12s ease, border-color .12s ease;
}
.si-l a:hover{color:var(--hazard);border-bottom-color:var(--hazard)}
.si-l a:focus-visible{outline:2px solid var(--hazard);outline-offset:1px}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 720px){
  .si-l{columns:1}
  /* 44px minimum target, which single-line links at 5px padding do not reach.
     The only place on this page where density gives way to something else. */
  .si-l a{padding:11px 0}
  .si-jump a{padding:8px 11px}
}