/* 08-discipline-index-and-work-table.css — home work archive, part 1: the
   discipline index band and the sortable work table with its hover preview.
   The WORK ARCHIVE banner below opens the whole archive section, 08–10. */

/* WORK ARCHIVE — catalogue interface (featured + collection) */
/* ── DISCIPLINE INDEX — the home page's type anchor, straight after the hero.
   One dense edge-to-edge block of the studio's disciplines, each linking into
   /op pre-filtered. Set large at leading 1.0 in regular weight so it reads as
   a solid mass of type rather than a list of buttons; the superscript is that
   discipline's real project count. Generated by
   scripts/templates/home-disciplines.js, spliced in by scripts/gen-projects.js. ── */
.discipline-index {
  display: block;
  padding: var(--section-space) var(--gutter);
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--text-index);
  line-height: 1;
  letter-spacing: -0.015em;
}
.discipline-index-link {
  color: var(--ink);
  transition: color 200ms var(--ease-out);
}
/* the em-dash separators live in CSS, so the markup stays a clean list of links */
.discipline-index-link:not(:last-child)::after {
  content: ' – ';   /* en dash — shorter than the em dash it replaced */
  color: var(--muted);
}
.discipline-index-link sup {
  font-family: var(--sans);
  font-size: max(var(--text-label), 0.22em);
  font-weight: 400;
  letter-spacing: 0.04em;
  vertical-align: super;
  color: var(--ink-soft);   /* --muted is too low-contrast at this small size */
  margin-right: 0.12em;
  transition: color 200ms var(--ease-out);
}
.discipline-index-link:hover { color: var(--accent); }
.discipline-index-link:hover sup { color: var(--accent); }

/* ── WORK TABLE — the archive as a spreadsheet: every project on one screen,
   sortable by any column. Rows are hairline-separated and set in the mono
   face so the columns line up like a stock list rather than a card grid. ── */
.work-table { border-top: 1px solid var(--rule); }
.work-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--inline-space);
  margin-bottom: var(--block-space);
}
.work-table-count {
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.work-table-body { border-top: 1px solid var(--rule); }
.work-table-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr) minmax(0, 2fr) 5.5rem;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-body);
  color: var(--ink);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
a.work-table-row:hover { background: var(--bg-raised); color: var(--accent); }
.work-table-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-table-cell--year { text-align: right; font-variant-numeric: tabular-nums; }
.work-table-cell--discipline, .work-table-cell--client { color: var(--ink-soft); }
a.work-table-row:hover .work-table-cell--discipline, a.work-table-row:hover .work-table-cell--client { color: inherit; }

/* header row — buttons that sort; the active column shows its direction */
.work-table-row--header {
  border-bottom: 1px solid var(--rule);
  /* Half the row's own 0.72rem below it. Flush to the rule above read as a
     mistake, but a full row's worth would float the labels off the table —
     they belong to the rows under them, not to the heading above. */
  padding-top: calc(var(--sp-2) / 2);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-table-row--header button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.work-table-row--header button.work-table-cell--year { text-align: right; }
.work-table-row--header button:hover { color: var(--ink); }
.work-table-row--header button[data-sort-direction]::after {
  content: ' ↑';
  font-family: var(--sans);
}
.work-table-row--header button[data-sort-direction="desc"]::after { content: ' ↓'; }

/* hover preview — the hovered row's project image, beside the pointer
   (initWorkTablePreview in js/site/home-work-table.js; mouse only, so no phone rule) */
.work-table-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 55;                                  /* over the page, under the header (60) */
  width: clamp(11rem, 16vw, 16rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  will-change: transform;
}
.work-table-preview.is-visible { opacity: 1; }
.work-table-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 320ms var(--ease-out);
}
.work-table-preview.is-visible img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .work-table-preview, .work-table-preview img { transition: none; }
}

/* phones: drop the client column — title / discipline / year still carry it */
@media (max-width: 640px) {
  .work-table-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) 4.75rem; gap: var(--sp-3); }
  .work-table-cell--client { display: none; }
}