/* ==========================================================================
   B VISUAL — project.css
   Individual project / case-study pages. Reuses every token and utility from
   tokens.css and shell.css; adds only layout for the case-study rhythm.
   No new font-size declarations. No box-shadow.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.pj-hero {
  position: relative;
  min-height: min(100dvh, 62rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--s10));
  padding-bottom: var(--s10);
  overflow: clip;
  isolation: isolate;
}
.pj-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pj-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Scrim: the poster behind is bright, and the display type must stay legible
   at every width. Two stops so the lower third carries the type. */
.pj-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink-80) 0%, rgba(19,19,23,.55) 38%, var(--ink-94) 88%);
}
.pj-hero__inner { position: relative; z-index: 2; }
.pj-hero__client { color: var(--mute); }
.pj-hero__title { color: var(--paper); margin-top: var(--s4); }
.pj-hero__kicker { color: var(--bone); margin-top: var(--s6); }
.pj-hero__cue { margin-top: var(--s10); color: var(--mute); display: inline-flex; gap: var(--s2); align-items: center; }

/* --- Section scaffold ---------------------------------------------------- */
.pj-sec { padding-block: var(--section); border-top: var(--hairline); }
.pj-sec__head { margin-bottom: var(--s10); }
.pj-sec__title { color: var(--paper); margin-top: var(--s3); }
.pj-body { color: var(--bone); }
.pj-body + .pj-body { margin-top: var(--s5); }

.pj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s10);
  align-items: start;
}
@media (max-width: 900px) { .pj-grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* --- Big single stat ----------------------------------------------------- */
.pj-stat { border-top: var(--hairline); padding-top: var(--s6); margin-top: var(--s10); }
.pj-stat__num   { color: var(--lime); font-variant-numeric: tabular-nums; }
.pj-stat__label { color: var(--paper); margin-top: var(--s3); }
.pj-stat__note  { color: var(--mute); margin-top: var(--s2); }

/* --- Numbered list ------------------------------------------------------- */
.pj-list { margin-top: var(--s8); border-top: var(--hairline); }
.pj-list__item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s5);
  border-bottom: var(--hairline);
}
.pj-list__num  { color: var(--mute); font-variant-numeric: tabular-nums; }
.pj-list__text { color: var(--bone); }

/* --- 48 hours / three steps --------------------------------------------- */
.pj-steps {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  border-top: var(--hairline);
}
.pj-step { padding-top: var(--s6); border-right: var(--hairline); padding-right: var(--s5); }
.pj-step:last-child { border-right: 0; }
.pj-step__num  { color: var(--mute); }
.pj-step__name { color: var(--paper); margin-top: var(--s2); }
.pj-step__text { color: var(--bone); margin-top: var(--s2); }
@media (max-width: 760px) {
  .pj-steps { grid-template-columns: 1fr; gap: 0; }
  .pj-step { border-right: 0; border-bottom: var(--hairline); padding-bottom: var(--s5); }
  .pj-step:last-child { border-bottom: 0; }
}

/* --- Figures ------------------------------------------------------------- */
.pj-fig { margin: 0; }
.pj-fig img {
  width: 100%;
  display: block;
  border: var(--hairline);
  border-radius: var(--r-flat);
  object-fit: cover;
}
.pj-fig figcaption { color: var(--mute); margin-top: var(--s3); }
.pj-fig--tall img  { aspect-ratio: 3 / 4; }
.pj-fig--wide img  { aspect-ratio: 16 / 10; }
.pj-fig--full { margin-top: var(--s10); }
.pj-fig--full img { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .pj-fig--full img { aspect-ratio: 4 / 3; } }

/* A slot Ben still has to supply art for. Labelled, not faked. */
.pj-fig--todo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--hair);
  border-radius: var(--r-flat);
  background-image: var(--grad-field);
  color: var(--mute);
  text-align: center;
  padding: var(--s6);
}

/* --- Results ------------------------------------------------------------- */
.pj-results {
  margin-top: var(--s10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  border-top: var(--hairline);
}
.pj-result { padding-top: var(--s6); border-right: var(--hairline); padding-right: var(--s4); }
.pj-result:last-child { border-right: 0; }
.pj-result__idx   { color: var(--mute); }
.pj-result__num   { color: var(--paper); font-variant-numeric: tabular-nums; margin-top: var(--s2); }
.pj-result__label { color: var(--mute); margin-top: var(--s3); }
@media (max-width: 900px) { .pj-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .pj-results { grid-template-columns: 1fr; gap: 0; }
  .pj-result { border-right: 0; border-bottom: var(--hairline); padding-bottom: var(--s5); }
  .pj-result:last-child { border-bottom: 0; }
}

/* --- Pull quote ---------------------------------------------------------- */
.pj-quote { margin: var(--s12) 0 0; border-top: var(--hairline); padding-top: var(--s8); }
.pj-quote__mark { color: var(--purple); }
.pj-quote blockquote { margin: var(--s3) 0 0; color: var(--paper); max-width: 24ch; }
.pj-quote figcaption { color: var(--mute); margin-top: var(--s5); }
.pj-quote figcaption strong { color: var(--bone); font-weight: var(--w-mid); display: block; }

/* --- Meta strip ---------------------------------------------------------- */
.pj-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  border-top: var(--hairline);
  padding-top: var(--s6);
  margin-top: var(--s10);
}
.pj-meta dt { color: var(--mute); }
.pj-meta dd { color: var(--bone); margin: var(--s2) 0 0; }
@media (max-width: 760px) { .pj-meta { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }

/* --- Next project -------------------------------------------------------- */
.pj-next { border-top: var(--hairline); padding-block: var(--section); }
.pj-next__link { display: inline-block; color: var(--paper); }
.pj-next__link:hover { color: var(--purple); }