/* The article archives: /blog/, its category and tag archives, and the author
 * archives (blog/archive_base.html). Loaded by those templates only.
 *
 * AN INDEX, NOT CARDS. The design has no listing page, so this is built from
 * its system rather than drawn from a file: the page grid and gutter, the
 * magenta mono eyebrow, the h1 scale, 17px ledes, 8px chips, hairlines, and
 * the quiet hover — a purple title and an arrow that appears. Nothing waits
 * on an image, and twenty titles scan as one column.
 *
 * TWO LAYOUTS FOR A ROW. On a phone the date and topic sit on one line above
 * the title; from 760px each takes a column — date, title, topic, arrow —
 * which is the markup's order rearranged, not changed (the link reads title
 * first; see blog/_index_list.html).
 *
 * THEMED TOKENS THROUGHOUT, so every colour comes from tokens.css, and logical
 * properties, so the page mirrors under a right-to-left language.
 */

.ed-idx {
  max-width: var(--ed-maxw);
  margin-inline: auto;
  padding-inline: var(--ed-gutter);
  padding-block: clamp(40px, 5vw, 80px) var(--ed-section-y);
  color: var(--ed-ink);
  font-family: var(--ed-font-body);
}

/* ---- The heading ------------------------------------------------------- */

.ed-idx__head { max-width: 760px; margin-block-end: clamp(24px, 2.6vw, 36px); }

.ed-idx__title {
  margin: 0;
  font-family: var(--ed-font-display);
  font-size: var(--ed-size-h1);
  font-weight: var(--ed-weight-bold);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ed-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ed-idx__lede {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: var(--ed-size-lead);
  line-height: 1.65;
  color: var(--ed-dek);
  text-wrap: pretty;
}
.ed-idx__lede p { margin: 0 0 0.8em; }
.ed-idx__lede > :last-child { margin-block-end: 0; }

/* An author: the photograph beside the name, the role under it. */
.ed-idx__person { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); }
.ed-idx__photo {
  flex: 0 0 auto;
  width: clamp(56px, 6vw, 72px);
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--ed-radius-pill);
  object-fit: cover;
}
.ed-idx__role { margin: 8px 0 0; font-size: var(--ed-size-body); color: var(--ed-dek); }
.ed-idx__site { margin: 12px 0 0; }
.ed-idx__sitelink {
  display: inline-flex;
  align-items: center;
  min-height: var(--ed-target);
  font-size: var(--ed-size-body);
  font-weight: var(--ed-weight-semibold);
  color: var(--ed-link);
  overflow-wrap: anywhere;
  transition: color var(--ed-transition);
}
.ed-idx__sitelink:hover { color: var(--ed-link-hover); }

/* ---- Topics ------------------------------------------------------------
 * 8px chips, as the handoff has every small control, and 44px tall so a
 * thumb can hit one. The current topic is the one filled chip; the rest
 * rest on the card border and take the purple edge on hover.
 */
.ed-idx__topics { margin-block-end: clamp(20px, 2.4vw, 32px); }
.ed-idx__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ed-idx__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--ed-target);
  padding-inline: 16px;
  background: var(--ed-surface);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  font-size: var(--ed-size-small);
  font-weight: var(--ed-weight-medium);
  color: var(--ed-body);
  text-decoration: none;
  transition: color var(--ed-transition), border-color var(--ed-transition),
              background-color var(--ed-transition);
}
.ed-idx__chip:hover { border-color: var(--ed-link); color: var(--ed-ink); }
.ed-idx__chip[aria-current] { background: var(--ed-ink); border-color: var(--ed-ink); color: var(--ed-bg); }

/* ---- The rows ---------------------------------------------------------- */

.ed-idx__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--ed-rule);
}
.ed-idx__item { border-block-end: 1px solid var(--ed-hairline); }

/* The date keeps its width and the topic wraps: measured at 320px, a long
 * topic ("Employee benefits") given the flexible column squeezed a date out
 * of its own cell. */
.ed-idx__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "date topic"
    "headline headline";
  align-items: baseline;
  gap: 8px 16px;
  padding-block: 18px;
  color: var(--ed-ink);
  text-decoration: none;
}

.ed-idx__headline {
  grid-area: headline;
  font-family: var(--ed-font-display);
  font-size: var(--ed-size-teaser);
  font-weight: var(--ed-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ed-ink);
  text-wrap: pretty;
  overflow-wrap: break-word;
  transition: color var(--ed-transition);
}
.ed-idx__row:hover .ed-idx__headline { color: var(--ed-link); }

.ed-idx__date,
.ed-idx__topic {
  font-family: var(--ed-font-body);
  font-weight: var(--ed-weight-medium);
  text-transform: uppercase;
  color: var(--ed-sub);
}
.ed-idx__date {
  grid-area: date;
  font-size: var(--ed-size-eyebrow);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ed-idx__topic {
  grid-area: topic;
  justify-self: end;
  font-size: var(--ed-size-label);
  letter-spacing: var(--ed-track-label);
  text-align: end;
}

/* The arrow appears on hover and focus, and only where it has a column. */
.ed-idx__arr { display: none; }

@media (min-width: 47.5em) {
  .ed-idx__row {
    grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 11rem) 24px;
    grid-template-areas: "date headline topic arr";
    gap: 28px;
    padding-block: 22px;
  }
  .ed-idx__topic { justify-self: start; text-align: start; }
  .ed-idx__arr {
    display: inline-block;
    grid-area: arr;
    justify-self: end;
    color: var(--ed-link);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.22s var(--ed-ease);
  }
  .ed-idx__arr:dir(rtl) { scale: -1 1; }
  .ed-idx__row:hover .ed-idx__arr,
  .ed-idx__row:focus-visible .ed-idx__arr { opacity: 1; transform: none; }
}

.ed-idx__empty {
  margin: 0;
  padding-block: 24px;
  font-size: var(--ed-size-lead);
  color: var(--ed-dek);
}

/* ---- The pager ----------------------------------------------------------
 * Previous and Next only: no page numbers, no "Page 2 of 18" (the owner, 27
 * September 2026; blog/pagination.py). Previous sits at the start and Next at
 * the end, each left out at its own end. Every target is 44px.
 */
.ed-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  margin-block-start: clamp(28px, 3vw, 44px);
}
.ed-pager__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ed-target);
  font-size: var(--ed-size-body);
  font-weight: var(--ed-weight-semibold);
  color: var(--ed-link);
  text-decoration: none;
  transition: color var(--ed-transition);
}
.ed-pager__step:hover { color: var(--ed-link-hover); }
/* Next keeps to the end even on the first page, where Previous is absent. */
.ed-pager__step--next { margin-inline-start: auto; }
.ed-pager__glyph:dir(rtl) { scale: -1 1; }

/* The current chip stays marked in forced colours (a11y plan item 9). */
@media (forced-colors: active) {
  .ed-idx__chip[aria-current] {
    forced-color-adjust: none;
    background: SelectedItem;
    color: SelectedItemText;
  }
}