/* Majlis Talks articles, sketch-only page (loaded after mag.css, comments.css, grid.css).
   No project photos. One balanced multi-column text block: the title block, lead sketch and pull quote open the
   first column; the other sketches sit in the text. Columns are 3 grid columns wide on the 12-col article grid
   (edges on lines 1, 4, 7, 10), with wider side margins than before and a step larger body type.
   --ts (text size 0.9-1.3) and html[data-ts] come from night.js. */
.mag-so{--fs:1.0625rem;--lh:1.42;color:var(--n-ink,#111111)}
.mag-so .so-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;border-bottom:var(--hair);padding-bottom:.5rem;margin-bottom:1rem}
.mag-so .so-cr{display:flex;flex-wrap:wrap;gap:.15rem .9rem;align-items:baseline}
.mag-so .so-cr .credits,.mag-so .so-cr .credits.wc{font-size:calc(.6875rem*var(--ts,1));margin:0}
.mag-so .tag{font-size:calc(.875rem*var(--ts,1))}
/* the text block */
.mag-so .so-flow{min-width:0;font-size:calc(var(--fs)*var(--ts,1));line-height:var(--lh);column-gap:var(--g,1.5rem);column-fill:balance;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.mag-so .so-flow p.dc::first-letter{font-size:4.1em;margin-top:.06em}
.mag-so .so-flow .signoff{break-inside:avoid;margin-top:.85em!important}
/* opening: title block on its own (no photo), lead sketch, pull quote */
.mag-so .so-head{display:flow-root;margin:0 0 .95rem;font-family:var(--font);text-align:left;hyphens:manual;-webkit-hyphens:manual}
.mag-so .so-head .hl{font-size:2.125rem;line-height:.95;letter-spacing:-.04em;margin:0;color:var(--n-ink,#111111)}
.mag-so .so-head .stand{font-size:calc(1.125rem*var(--ts,1));line-height:1.3;margin:.5rem 0 0;max-width:none}
.mag-so .so-head .hl,.mag-so .so-head .stand{break-inside:avoid;break-after:avoid}
.mag-so .so-lead{margin:.9rem 0 0;break-inside:avoid;-webkit-column-break-inside:avoid}
.mag-so .so-pq{break-inside:avoid;-webkit-column-break-inside:avoid}
.mag-so .so-pq{font-size:calc(1.3125rem*var(--ts,1));margin:1rem 0 0}
.mag-so .keyed{display:block;position:relative}
/* sketches in the text */
.mag-so .so-fig{break-inside:avoid;-webkit-column-break-inside:avoid;margin:.35rem 0 .65rem;font-family:var(--font);text-align:left;hyphens:manual}
.mag-so .so-fig+p{text-indent:0}
.mag-so figure{margin-left:0;margin-right:0}
.mag-so figcaption .cap{margin:.35rem 0 0}
.mag-so .cap{font-size:calc(.75rem*var(--ts,1));line-height:1.45;text-indent:0}
.mag-so .key{font-size:calc(.75rem*var(--ts,1));margin-top:.45rem}
.mag-so .key li{padding:.26rem 0}
.mag-so img{max-width:100%}
/* the comment box: under the sign-off, across the text columns */
.mag-so .m-end{min-width:0}
.mag-so .cm{--cm-fs:calc(var(--fs)*var(--ts,1))}
.mag-so .m-end>.m-cols+.cm{margin-top:1.25rem}

@media (min-width:761px){.mag-page{--pm:clamp(5rem,9vw,12rem)}}
/* desktop: four text columns; at 120% and 130% three wider ones (4 grid columns each) */
@media (min-width:1101px){
  .mag-b.mag-so{padding-top:calc(var(--m) + 2.85rem)}
  .mag-so .so-flow{columns:4}
  html[data-ts="120"] .mag-so .so-flow,html[data-ts="130"] .mag-so .so-flow{columns:3}
  /* the comment box keeps its place: under the sign-off, spanning the last two text columns (edges on grid lines 7 and 12) */
  .mag-so .m-end>.m-cols+.cm{margin-left:calc(50% + var(--g,1.5rem)/2)}
  html[data-ts="120"] .mag-so .m-end>.m-cols+.cm,html[data-ts="130"] .mag-so .m-end>.m-cols+.cm{margin-left:calc(100%/3 + var(--g,1.5rem)/3)}
}
/* tablet: two columns (6 grid columns each); one at 130% */
@media (min-width:761px) and (max-width:1100px){
  .mag-so .so-flow{columns:2}
  .mag-so .so-head .hl{font-size:2.5rem}
  html[data-ts="130"] .mag-so .so-flow{columns:1}
}
/* phone: one column; a touch larger body, ragged right */
@media (max-width:760px){
  .mag-so{--fs:1.125rem;--lh:1.55}
  .mag-so .so-top{flex-wrap:wrap;align-items:flex-start;margin-bottom:1rem}
  .mag-so .so-cr{flex-direction:column;gap:.2rem}
  .mag-so .so-flow{columns:1;text-align:left;hyphens:manual;-webkit-hyphens:manual}
  .mag-so .so-head{margin-bottom:1.5rem}
  .mag-so .so-head .hl{font-size:clamp(2.1rem,10.4vw,2.8rem)}
  .mag-so .so-fig{margin:1.1rem 0 1.25rem}
}