/* ---------- project detail ---------- */

.detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:44px;align-items:start;
}
.detail__text{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:7px 22px;
  align-content:start;
}
.detail__text p{
  grid-column:2;
  margin:0;
  font-size:15px;
  line-height:1.6;
}
@media (min-width:821px){
  .detail__text p{max-width:56ch}
}
.detail__text p:first-of-type{margin-top:20px}
.detail__text p+p{margin-top:.9em}

.spec{display:contents}
.spec dt{grid-column:1;font-family:var(--display);color:var(--fg);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.spec dd{grid-column:2;margin:0;font-weight:400;font-size:15px}
/* ".detail__text p" (the base rule two lines up) sets grid-column:2 and
   font-size:15px on every paragraph, and beats a bare ".about-label" on
   specificity — so this has to be written just as specific, or "About"
   silently falls back to the paragraph's own column and size instead of
   matching CATEGORY/YEAR/CLIENT's label column */
.detail__text p.about-label{
  grid-column:1;
  font-family:var(--display);
  color:var(--fg);font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;
}
/* the label and the first line of the description share a row,
   so they need the same top margin to sit level with each other */
.detail__text p.about-label,
.detail__text p.about-label + p{margin-top:30px}