/* 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}
}

/* ---- two BIG pull quotes per article (27 Oct): light weight, ~1.9-2.1x body, generous space; both scale with A−/A+ ----
   quote 1 opens the first column (in the title block), quote 2 sits in the flow ~60% in (third column on desktop). */
.mag-so .so-pq{font-weight:300;letter-spacing:-.025em;line-height:1.12;font-size:calc(clamp(1.75rem,2.25vw,2.25rem)*var(--ts,1));
  border-top:1px solid currentColor;padding:.6em .3rem 0;margin:2.75rem 0 2.75rem;text-wrap:balance;text-align:left;hyphens:none;-webkit-hyphens:none;word-spacing:normal;color:var(--n-ink,#111111)}
.mag-so .so-head .so-pq{margin:2.5rem 0 1.5rem}
.mag-so .so-pq p::before{font-weight:400;font-size:1.6em;line-height:.6;margin-bottom:.1em}
.mag-so .so-flow .so-pq2{break-inside:avoid;-webkit-column-break-inside:avoid}
.mag-so .so-flow .so-pq2+p{text-indent:0}
@media (max-width:760px){
  .mag-so .so-pq{font-size:calc(1.875rem*var(--ts,1));margin:2.5rem 0;padding-left:.2rem;padding-right:.2rem}
  .mag-so .so-head .so-pq{margin:2.25rem 0 .5rem}
}

/* 27 Oct 2026 (Omran, iPhone: "needs bit of balance, spacing between paragraphs"): paragraphs are set apart by space
   instead of a first-line indent, every Majlis Talks article, all widths. Drop cap, signoff, continuation mark and pull
   quotes keep their own styling. Revert: sketchonly.css.before-paraspace */
.mag-so .so-flow>p+p:not(.cont):not(.signoff){text-indent:1.15em} /* Omran: keep the first-word tab as well as the space */
.mag-so .so-flow>p+p:not(.cont):not(.signoff){margin-top:.85em}