/* ============================================================================
   Listing — shared by the pages that list documents and the documents they
   list: careers (roles) and research (posts).

   A listing page reads from the gutter, not from home's left third: the
   reveal at reading scale, then a Caslon heading and a ledger of entries.
   Each entry is one ruled row, the whole row a link to its own page: the
   title, then its byline (team · type, or kind · date), then a one-line
   summary, all on the gutter; the arrow keeps the right edge. The same
   arrangement at every width. An entry not yet published (.entry--pending)
   is listed without a link or arrow.

   A document page opens on a head (back link, title, byline, action) and
   ends on the back link again. Its body belongs to its own sheet
   (careers.css, research.css). The reveal and the footer come from base.css.
   ============================================================================ */

.listing-reveal .reveal__ring {
  --ring-w: min(56vw, max(160px, 28vh), 320px);
}

@supports (height: 1svh) {
  .listing-reveal .reveal__ring {
    --ring-w: min(56vw, max(160px, 28svh), 320px);
  }
}

/* No closing ring: the page ends on its content, then the footer. */
.listing-main {
  padding-bottom: clamp(96px, 10vw, 160px);
}

/* on a document page the nav marks its listing as the current section */
.nav a[aria-current="true"] {
  text-decoration-color: currentColor;
}

/* --- The ledger ---------------------------------------------------------- */

.listing {
  padding-top: clamp(24px, 3vw, 48px);
}

/* The heading is a statement, not a label: Caslon, a step below the page
   title and a step above the entry titles, standing on the hairline that is
   the first row's top rule. */
.listing__heading {
  padding-bottom: clamp(20px, 2.4vw, 32px);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.entries {
  --row-title: clamp(26px, 2.5vw, 36px);
  border-top: 1px solid var(--rule);
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  column-gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--fast) var(--ease-out);
}

/* the footer's rule closes the page, so the last row rests without its own */
.entry:last-child {
  border-bottom-color: transparent;
}

/* a row is underlined the way a link is: its own rule darkens to ink */
.entry:not(.entry--pending):hover {
  border-bottom-color: var(--ink);
}

/* An empty list (the blog before its first post) holds one quiet line in
   the row a first entry will take, on the same top rule. */
.listing__empty {
  padding-block: clamp(28px, 3vw, 40px);
  color: var(--ink-3);
  font-family: var(--display);
  font-size: var(--row-title);
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* A pending entry (a post still in progress) is listed but not yet a link:
   no arrow, no hover, and its byline says so. */
.entry--pending {
  cursor: default;
}

.entry__title {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--row-title);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.entry__title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--fast) var(--ease-out);
}

/* the whole row answers to the link; the title stays its accessible name */
.entry__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entry:hover .entry__title a {
  text-decoration-color: currentColor;
}

.entry__meta {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.4;
}

.entry__meta span:first-child {
  color: var(--ink-2);
}

.entry__meta span + span::before {
  content: "·";
  margin-inline: .55em;
}

.entry__summary {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* the arrow sits centred on the title's first line */
.entry__go {
  align-self: start;
  width: 20px;
  height: calc(var(--row-title) * 1.15);
  color: var(--ink-3);
  transition: color var(--fast) var(--ease-out);
}

.entry:hover .entry__go {
  color: var(--ink);
}

/* focus rings the row the link stands for, not just its title: drawn over
   the row's own rules (the one above it and its own below) so they don't
   double, and out into the gutter so it clears the title */
@supports selector(:has(a)) {
  .entry__title a:focus-visible {
    outline: none;
  }

  .entry:has(.entry__title a:focus-visible)::before {
    content: "";
    position: absolute;
    inset: -1px -12px 0;
    border: 2px solid var(--ink);
    border-radius: 3px;
    pointer-events: none;
  }
}

/* --- A document page: head and end ---------------------------------------- */

.doc-head {
  padding-top: clamp(24px, 4vw, 56px);
}

/* the head rises in the way the reveal's words do */
.doc-head > * {
  animation: rise .9s var(--ease-out) backwards;
}

.doc-head > :nth-child(2) { animation-delay: .06s; }
.doc-head > :nth-child(3) { animation-delay: .12s; }
.doc-head > :nth-child(4) { animation-delay: .18s; }
.doc-head > :nth-child(5) { animation-delay: .24s; }

/* the back link speaks in the nav's voice (DESIGN.md, Nav): it is
   navigation, the same kind of link as the header's */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
}

/* centred on Caslon's dash height, not the line box: the face sits low in
   its line (measured 2026-10-08 with the font loaded: 2.4px at 20px) */
.back-link svg {
  position: relative;
  top: .12em;
  width: 18px;
  height: 18px;
}

.back-link span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--fast) var(--ease-out);
}

.back-link:hover span {
  text-decoration-color: currentColor;
}

/* no rule here: the footer's, below, closes the page */
.doc-end {
  margin-top: clamp(56px, 6vw, 88px);
}

/* --- Narrower screens ---------------------------------------------------- */

@media (max-width: 640px) {
  .entry__summary {
    font-size: 15px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-head > * {
    animation: none !important;
  }
}