/* Work index and detail pages. Structure comes from space and hairline rules. */

.work-index > h1 { margin-bottom: 1.6rem; }

.index-entry {
  border-top: 1px solid var(--rule);
  padding: 2.8rem 0;
}

.index-entry-link {
  display: grid;
  color: inherit;
  text-decoration: none;
  gap: 1.5rem;
}

.index-entry h2,
.detail-head h1 {
  font-size: clamp(1.5rem, 5.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.14;
}

.index-entry-link:hover h2,
.index-entry-link:focus-visible h2 { text-decoration: underline; text-underline-offset: .18em; }

.index-copy > p {
  color: var(--muted);
  line-height: 1.65;
  margin-top: .7rem;
  max-width: 36rem;
}

.proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.2rem;
  list-style: none;
  margin-top: 1.25rem;
  color: var(--fg);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.proof-list li::before {
  color: var(--dim);
  content: "\2014";
  margin-right: .45rem;
}

.diagram {
  color: var(--fg);
  margin: 0;
  min-width: 0;
}

.diagram svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.diagram .line,
.diagram .node,
.diagram .arrow,
.diagram .bar,
.diagram .tick {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.diagram .dim { color: var(--dim); }

.diagram text {
  fill: currentColor;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  stroke: none;
  text-transform: uppercase;
}

.diagram .small { font-size: .64rem; }

.diagram figcaption,
.shot figcaption {
  color: var(--dim);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  line-height: 1.55;
  margin-top: .75rem;
}

.detail-head {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
}

.work-detail { padding-top: 1rem; }

.detail-head .eyebrow { margin-bottom: .45rem; }

.detail-head .entry-meta {
  border: 0;
  color: var(--muted);
  display: block;
  line-height: 1.55;
  margin: .85rem 0 0;
  padding: 0;
}

.detail-head .entry-meta span { color: var(--dim); }

.detail-proof {
  margin: 0 0 1.35rem;
}

.detail-section {
  border-top: 1px solid var(--rule);
  padding: 2.8rem 0;
}

.detail-section:first-of-type { border-top: 0; padding-top: 0; }

.detail-section > h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-bottom: 1.3rem;
}

.detail-section p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.1rem;
  max-width: 40rem;
}

.detail-section p strong { color: var(--fg); font-weight: 600; }

.detail-section .diagram,
.detail-section .shot { margin-top: 1.8rem; }

.detail-section .entry-links { margin-top: 1.8rem; }

.shot { margin: 0; }

.shot img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule);
  display: block;
  object-fit: contain;
  width: 100%;
}

/* A slot with no image renders NOTHING on a live page. Never show scaffolding
   or a "put something here" frame to a visitor. The data-spec attribute stays
   in the markup as the internal note for whoever supplies the image. */
.shot.is-empty { display: none; }

.model-contrast {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.model-contrast p {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  margin: 0;
  padding-top: .85rem;
  text-transform: uppercase;
}

.model-contrast strong { color: var(--fg); font-weight: 400; }

.audio-chart .bar { stroke-width: 2; }

.audio-chart figcaption { color: var(--muted); max-width: 58rem; }

@media (min-width: 46rem) {
  .index-entry-link { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); align-items: center; gap: 4rem; }
  .detail-section.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); gap: 4rem; align-items: start; }
  .detail-section.split > .diagram,
  .detail-section.split > .shot,
  .detail-section.split > div > .diagram { margin-top: 0; }
  .model-contrast { grid-template-columns: 1fr 1fr; }
}

/* Click affordance on the index cards. The whole card is a link, but the only
   cue was a hover underline on the heading — invisible on touch and to anyone
   scanning, which defeats the point of an index you click into. */
.read-cue {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 1.4rem;
  transition: color .15s ease;
}

.read-cue span { display: inline-block; margin-left: .35rem; transition: transform .15s ease; }

.index-entry-link:hover .read-cue,
.index-entry-link:focus-visible .read-cue { color: var(--fg); }

.index-entry-link:hover .read-cue span { transform: translateX(.25rem); }

/* A section whose only content is image slots must vanish entirely when none of
   those slots has an image — otherwise the page shows a heading with nothing
   under it, which is the same scaffolding problem as a placeholder frame. */
.detail-section:has(> .shot):not(:has(> .shot:not(.is-empty))) { display: none; }