/* 08 DESIGN RESEARCH — 'sketchbook' layout (js/sketchbook.js). Uses the V1 tokens only; no new colours or fonts. */
.detail.sb .d-side{grid-column:1/2}
.sb-lead{font-size:16px;line-height:23px;max-width:28ch}
.sb-media{grid-column:2/5;grid-row:1/span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--m) * 3) var(--m);align-items:start}
.sb-chap{grid-column:1/-1;margin:calc(var(--m) * 7) 0 0;font:500 clamp(28px,4.2vw,56px)/.95 var(--font);letter-spacing:-.02em;color:var(--ink);padding-bottom:calc(var(--m) * 1.2);border-bottom:1px solid var(--ink)}
.sb-chap:first-child{margin-top:0}
/* the plate keeps the shared .fig behaviour (film autoplay on screen) but not its card: the caption sits below the drawing */
.fig.sb-fig{margin:0;border-radius:0;overflow:visible;background:none;aspect-ratio:auto}
.sb-fig.sb-full,.sb-fig.sb-wide{grid-column:1/-1}
.fig.sb-fig img,.fig.sb-fig video{display:block;width:100%;height:auto;object-fit:contain;border-radius:var(--r-tile);background:var(--pill)}
.fig.sb-fig video{cursor:default}
.fig.sb-fig .vctl{position:absolute;right:14px;top:14px;bottom:auto}
.sb-fig figcaption{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:8px;font-size:12px;line-height:16px}
.sb-no{grid-row:1/span 2;font-variant-numeric:tabular-nums;color:var(--ink)}
.sb-meta{color:var(--mute);letter-spacing:.02em}
.sb-note{max-width:52ch}
.sb-back{align-self:flex-start}
.sb-next{grid-column:2/5}
@media (max-width:760px){
  .sb-media{grid-column:1/-1;grid-row:auto;grid-template-columns:1fr;gap:calc(var(--m) * 2.4)}
  .sb-chap{margin-top:calc(var(--m) * 4)}
  .sb-next{grid-column:1/-1}
}