/* HEADWEAR CASE STUDY (PROJECT 02) — 'case' detail layout. Uses the V1 tokens only (no new colour or font).
   Information column = column 1 as on every project page; the media take columns 2–4 as one 6-column editorial grid. */
.detail.cs .d-side{grid-column:1/2}
.cs-lead{font-size:16px;line-height:23px;max-width:28ch}
.cs-back{margin-top:0}
.cs-back .caret{transform:rotate(135deg)}
.cs-media{grid-column:2/5;grid-row:1/span 2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--m);grid-auto-flow:row;align-items:start}
.cs-fig{grid-column:var(--at) / span var(--span)}
@media (min-width:761px){ .cs-fig.tall{grid-row:span var(--rows);align-self:stretch;aspect-ratio:auto!important} } /* the hero fills the height of its two stacked siblings */
.cs-fig.end{align-self:end}
.cs-fig.s6{grid-column:1/-1}
.cs-chap{grid-column:1/-1;margin:calc(var(--m) * 5) 0 0;color:var(--mute)}
.cs-chap:first-child{margin-top:0;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* the opening needs no heading on screen */
.cs-chap .label{display:block;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cs-chap.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.cs-chap.sr:not(:first-child) + .cs-fig{margin-top:calc(var(--m) * 9)} /* a closing image after silence, not after a label */
.cs-next{grid-column:2/5}
@media (max-width:760px){
  .cs-media{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-fig{grid-column:auto / span 1}
  .cs-fig.s3,.cs-fig.s4,.cs-fig.s6{grid-column:1/-1}
  .cs-fig.end{grid-column:2/3}
  .cs-chap{margin-top:calc(var(--m) * 3)}
  .cs-next{grid-column:1/-1}
}