/* The dark room, applied to the case studies. Loaded last, it only redefines the
   tokens from site.css, so every page keeps its layout. The work supplies the colour. */
:root {
  --bg:          #090908;
  --bg-sunk:     #141412;
  --bg-ink:      #090908;
  --ink:         #f1efe9;
  --ink-soft:    #c2c0b8;
  --ink-faint:   #a19f97;
  --ink-invert:  #f1efe9;
  --rule:        rgb(241 239 233 / 0.14);
  --rule-strong: rgb(241 239 233 / 0.34);
  --accent:      #66b8d6;
  --accent-ink:  #8fcde3;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--ink); }
.masthead { background: rgb(9 9 8 / 0.82); }

/* Captions for the picture sets added to each case study. */
.set { display: grid; gap: clamp(0.5rem, 1.5vw, 1rem); grid-template-columns: repeat(12, 1fr); margin-top: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.set figure { margin: 0; grid-column: span 12; }
.set img { display: block; width: 100%; height: auto; background: var(--bg-sunk); }
.set figcaption { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-faint); max-width: 52ch; }
@media (min-width: 42rem) {
  .set .s8 { grid-column: span 8; } .set .s7 { grid-column: span 7; } .set .s6 { grid-column: span 6; }
  .set .s5 { grid-column: span 5; } .set .s4 { grid-column: span 4; } .set .s3 { grid-column: span 3; }
}