/* ============================================================================
   layouts/work-index.css — the Work landing page.

   Its job is orientation, not summary. A visitor arriving here should be able
   to tell within a few seconds which of the three stories is relevant to them,
   and what the set as a whole argues.
   ============================================================================ */

.work-hero { padding-block: var(--space-2xl) var(--space-l); border-bottom: var(--hairline); }
.work-hero h1 { font-size: var(--step-5); max-width: 18ch; margin-bottom: var(--space-m); }
.work-hero .lead { max-width: 58ch; }

/* The set argument. Three theses read as one claim before any card is opened. */
.work-thesis-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--grid-gutter);
  padding-block: var(--space-l);
  border-bottom: var(--hairline);
}
.work-thesis-item { display: flex; flex-direction: column; gap: var(--space-3xs); }
.work-thesis-item dt {
  font-family: var(--font-mono);
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}
.work-thesis-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--step-1); font-weight: 600; line-height: 1.25;
}

/* Full-bleed study entries. Deliberately not cards in a grid — a grid of three
   equal tiles reads as a portfolio; stacked entries read as a body of work. */
.study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 13rem);
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--space-xl);
  border-bottom: var(--hairline);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
.study:hover { background: color-mix(in oklab, var(--surface) 55%, transparent); }
.study:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.study-meta {
  font-family: var(--font-mono);
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: var(--space-2xs);
}
.study h2 { font-size: var(--step-3); max-width: 22ch; margin-bottom: var(--space-s); }
.study p { color: var(--ink-2); max-width: 58ch; }
.study .cue {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-top: var(--space-m);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.study:hover .cue { color: var(--gold); gap: var(--space-2xs); }

/* Right rail: the owned proof and the scope facts. */
.study-side { display: flex; flex-direction: column; gap: var(--space-s); padding-top: var(--space-3xs); }
.study-proof {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-data);
  font-size: var(--step-3); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.study-proof small {
  display: block; margin-top: var(--space-3xs);
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}
.study-facts { display: flex; flex-direction: column; gap: var(--space-2xs);
  padding-top: var(--space-s); border-top: 1px solid var(--line); }
.study-facts span { font-size: var(--step--1); color: var(--ink-3); line-height: 1.4; }

@media (max-width: 820px) {
  .study { grid-template-columns: 1fr; gap: var(--space-m); padding-block: var(--space-l); }
  .study h2 { max-width: none; }
  .study-side { flex-direction: row; align-items: baseline; gap: var(--space-l); flex-wrap: wrap; }
  .study-facts { border-top: none; padding-top: 0; }
  .work-hero h1 { font-size: var(--step-4); max-width: none; }
}

.study .infra-row { display: flex; margin: var(--space-2xs) 0 var(--space-s); }