/* ============================================================
   Detail pages (/work/<slug>/) — case-study layout.
   Structure follows the reference case-study page (hero title +
   summary, Overview copy, Services & Highlights lists, project
   facts, next-project link).

   COLOUR & TYPE UNIFICATION: this sheet never defines its own
   colours or font sizes. Every colour comes from the :root tokens
   in style.css (--c-*) and every size is rem-based on the shared
   62.5% root scale, so detail pages always match the home page.
   ============================================================ */

/* ---------- hero ---------- */
.d-hero{padding:9rem 0 0}
@media (min-width:48em){ .d-hero{padding:13rem 0 0} }
@media (min-width:68.75em){ .d-hero{padding:16rem 0 0} }
.d-hero_eyebrow{
  color:var(--c-ink-3);font-size:1.2rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;
}
.d-hero_title{
  font-size:4.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.02;margin-top:2.8rem;
}
@media (min-width:48em){ .d-hero_title{font-size:6.6rem} }
@media (min-width:68.75em){ .d-hero_title{font-size:8.8rem} }
.d-hero_lead{
  color:var(--c-ink-2);font-size:1.8rem;line-height:1.75;margin-top:4.4rem;max-width:72rem;
}
@media (min-width:68.75em){ .d-hero_lead{font-size:2rem} }

/* ---------- numbered copy blocks ---------- */
.d-block{margin-top:10rem}
@media (min-width:48em){ .d-block{margin-top:15rem} }
.d-label{
  align-items:center;color:var(--c-ink-3);display:flex;font-size:1.2rem;font-weight:700;
  gap:1.4rem;letter-spacing:.26em;text-transform:uppercase;
}
.d-label::before{
  background:var(--c-accent);content:"";display:inline-block;height:.2rem;width:3rem;
}
.d-body{
  color:var(--c-ink-2);font-size:1.8rem;line-height:1.85;margin-top:4rem;max-width:72rem;
}
.d-body p{margin-top:2rem}
.d-body p:first-child{margin-top:0}
.d-body em{color:var(--c-ink);font-style:italic}

/* ---------- key/value list rows (Services / Highlights) ---------- */
.d-rows{
  border-top:.1rem solid var(--c-hairline);list-style:none;margin:4rem 0 0;
  max-width:100rem;padding:0;
}
.d-rows li{
  border-bottom:.1rem solid var(--c-hairline);
  display:flex;flex-direction:column;gap:.9rem;justify-content:space-between;
  padding:2.6rem 0;
}
@media (min-width:56.25em){ .d-rows li{flex-direction:row;align-items:baseline;gap:4rem} }
.d-rows_key{font-size:1.9rem;font-weight:700;letter-spacing:-.01em;max-width:40rem}
.d-rows_val{color:var(--c-ink-2);font-size:1.5rem;line-height:1.6;max-width:46rem}
@media (min-width:56.25em){ .d-rows_val{text-align:right} }

/* ---------- project facts (Type / Role / Year / Tools) ---------- */
.d-facts{
  border-top:.1rem solid var(--c-hairline);display:grid;gap:3.6rem 4rem;
  grid-template-columns:1fr;margin-top:10rem;padding-top:4.5rem;
}
@media (min-width:48em){ .d-facts{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))} }
.d-facts dt{
  color:var(--c-ink-3);font-size:1.2rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.d-facts dd{font-size:1.9rem;font-weight:600;line-height:1.45;margin-top:1rem}

/* ---------- framed screens (kept in sync with the Work cards) ---------- */
.c-case-figure img{border:.1rem solid var(--c-hairline)}