/*
 * /work surface: case-study treatments and the Tufte margin-note grid.
 * From the design language section 7 and the comp. Loaded only on /work.
 *
 * The copy delivers each study as a story column plus a labeled margin-notes
 * list (not paragraph-anchored), so the render is column-then-notes: at base
 * (375 to 1023px) the notes collapse inline below the column with a left
 * border; at --bp-md the notes return to the rail, top-aligned to the
 * column, one grid, no JavaScript. Facts visible by default (A6).
 */

.study{margin-block-end:0;}                 /* the separator owns inter-study space */
.study-head{max-width:var(--measure);margin-block-end:var(--sp-5);}
.kicker{
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--muted);line-height:var(--lh-micro);margin-block-end:var(--sp-2);
}
.study-head h2{
  font-family:var(--serif);font-weight:700;font-size:var(--fs-title);
  line-height:var(--lh-title);
}

.study-col > p{
  font-family:var(--serif);font-size:var(--fs-body);
  line-height:var(--lh-body);max-width:var(--measure);
  margin-block-end:var(--sp-5);
}
.study-col > p .lead{font-style:italic;}

/* margin notes: a labeled list, inline at base with a left border */
.study-notes{list-style:none;}
.study-notes .mn{
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink);
  border-left:2px solid var(--hair);padding-left:var(--sp-4);
  margin-block:var(--sp-4) var(--sp-5);max-width:var(--measure);
}
.study-notes .mn b{font-weight:600;}
/* note links are body-copy red links; the .link rule in base.css applies */

/* separators between studies */
.study-sep{border:0;height:var(--rule-hair);background:var(--hair);margin-block:var(--sp-8);}

/* the rail engages: notes return to the margin, top-aligned to the column */
@media (min-width:64rem){
  .study-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--rail-w);
    column-gap:var(--rail-gap);align-items:start;
  }
  .study-col{grid-column:1;}
  .study-notes{grid-column:2;padding-top:0.2rem;}
  .study-notes .mn{
    border-left:0;padding-left:0;margin-block:0 var(--sp-5);
  }
}