/* ==========================================================================
   LISTING — the auto-populating index pages (Publications, Tools)
   One centred column of double-rule panels on the quiet-page shell
   (pages.css). Each entry: mono kicker, mono title, clamped description
   that listing.js lets the visitor expand. Without JS the full text simply
   shows — the clamp is gated on html.js, same pattern as the About page.
   ========================================================================== */

.listing {
  max-width: 760px;
  margin: 0 auto;
  padding: 104px clamp(20px, 5vw, 36px) 72px;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.listing-head { margin: 26px 0 36px; }

.listing-head .kicker { color: var(--label); }

.listing-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-page);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Entry panels
   -------------------------------------------------------------------------- */

.entries {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.entry {
  padding: clamp(18px, 4vw, 28px);
  transition: border-color 140ms ease;
}

.entry:hover { border-color: rgba(var(--tan-rgb), 0.65); }

.entry-no { color: var(--tan); }

.entry-title {
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  color: var(--paper);
  margin: 8px 0 0;
}

.entry-title a {
  text-decoration: none;
  transition: color 140ms ease;
}

.entry-title a:hover { color: var(--flag); }

.entry-authors {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--fir);
  margin-top: 6px;
}

.entry-desc { margin-top: 12px; }

.entry-desc p {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--paper);
  max-width: 62ch;
}

.entry-desc p + p { margin-top: 10px; }

/* Collapsed state (JS present only): first paragraph clamps to three lines,
   later paragraphs hide. Clamping per paragraph rather than per container is
   deliberate — -webkit-line-clamp is only reliable on a box whose lines are
   its own. */
html.js .entry:not(.open) .entry-desc > p:first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

html.js .entry:not(.open) .entry-desc > p:not(:first-child) { display: none; }

html.js .entry.expandable:not(.open) .entry-desc { cursor: pointer; }

/* The toggle listing.js inserts after the description (only when the text
   actually overflows its clamp) */
.entry-toggle {
  display: block;
  margin-top: 10px;
  padding: 2px 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-furniture);
  letter-spacing: var(--ls-cta);
  text-transform: var(--tt-label);
  color: var(--fir);
  cursor: pointer;
  transition: color 140ms ease;
}

.entry-toggle:hover { color: var(--flag); }

/* --------------------------------------------------------------------------
   Entry footer: outbound link + tag chips
   -------------------------------------------------------------------------- */

.entry-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
}

.entry-link {
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  text-decoration: none;
  color: var(--tan);
  transition: color 140ms ease;
}

.entry-link:hover { color: var(--flag); }

.entry-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Return link
   -------------------------------------------------------------------------- */

.listing-return {
  margin-top: 44px;
  text-align: center;
}

.return-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-label);
  text-transform: var(--tt-label);
  text-decoration: none;
  color: var(--fir);
  transition: color 140ms ease;
}

.return-link:hover { color: var(--flag); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .entry-title { font-size: var(--fs-prose); }
}

@media (prefers-reduced-motion: reduce) {
  .entry,
  .entry-title a,
  .entry-toggle,
  .entry-link,
  .return-link { transition: none; }
}