/*
 * /work surface: case-study treatments and the Tufte margin-note grid.
 * From the design language section 7 and the comp. Loaded only on /work.
 * Base layout (375 to 1023px) is single column with inline margin notes;
 * at --bp-md the note returns to the rail, one grid, no JavaScript (A6:
 * facts visible by default, nothing hides behind a tap).
 */

.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);
}
.dateline{
  font-size:var(--fs-small);line-height:var(--lh-small);
  color:var(--muted);margin-block-start:var(--sp-2);
}

.study .row > 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 .row > p .lead{font-style:italic;}

/* anchor markers: navigation, not emphasis, so never red */
sup.mn-ref{font-family:var(--sans);font-weight:600;font-size:0.7em;line-height:0;color:var(--ink);}

/* margin notes: inline at base, border on the left */
.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);
}
.mn b{font-weight:600;}

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

/* the rail engages: note returns to the margin, top-aligned to its anchor */
@media (min-width:64rem){
  .study .row{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--rail-w);
    column-gap:var(--rail-gap);align-items:start;
  }
  .study .row > p{grid-column:1;}
  .study .row > .mn{
    grid-column:2;border-left:0;padding-left:0;margin-block:0;
    padding-top:0.2rem;   /* optical first-baseline match to the prose column */
  }
}