/* Posts without charts of their own (the 0.6.0 launch posts): the article column, the title block with its short
   version, wide figures (a film, a table), quotes, small print and the closing note. The rules are the RoboHarm
   article's (robouse-harm-1/styles.css), so every post reads alike; that article keeps its own copy with its charts.
   Tokens: /tokens.css. Headings, body text, links, code, tables and captions: /prose.css. This file adds layout only. */
:root{
  --reg:color-mix(in srgb,var(--ink) 38%,transparent);
  --col:calc(var(--measure) + 2 * var(--gutter));--wide-fig:1000px;
}
html{scroll-behavior:smooth;scroll-padding-top:var(--sp-24)}
p{margin:0 0 var(--sp-16)}
ul,ol{margin:0 0 var(--sp-16);padding-left:1.3em}
li{margin:var(--sp-4) 0}
/* numbers line up wherever they are data */
.fig,.t{font-variant-numeric:tabular-nums}

/* article column and breakouts */
.col{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.wide{max-width:var(--wide-fig);margin:var(--sp-28) auto;padding:0 var(--gutter)}

/* header: the shared title block (.page-head, .lede) */
header.post{padding:var(--sp-72) 0 var(--sp-8);margin:0}
header.post .lede{margin:0 0 var(--sp-20)}
/* a post whose text follows the title block directly (no lead figure): prose.css drops a first heading's top margin */
header.post + .col{margin-top:var(--sp-40)}

/* the short version sits on a plate with registration marks at its corners, as on the landing page */
.tldr{position:relative;border:var(--hairline);border-radius:var(--r-lg);padding:var(--sp-24) var(--sp-28) var(--sp-12);margin:var(--sp-36) 0 var(--sp-8);background:var(--sunk)}
.tldr::before{content:"";position:absolute;inset:-6px;pointer-events:none;--h:linear-gradient(var(--reg),var(--reg));
  background:var(--h) 0 5px/11px 1px no-repeat,var(--h) 5px 0/1px 11px no-repeat,
    var(--h) 100% 5px/11px 1px no-repeat,var(--h) calc(100% - 5px) 0/1px 11px no-repeat,
    var(--h) 0 calc(100% - 5px)/11px 1px no-repeat,var(--h) 5px 100%/1px 11px no-repeat,
    var(--h) 100% calc(100% - 5px)/11px 1px no-repeat,var(--h) calc(100% - 5px) 100%/1px 11px no-repeat}
.tldr .lab{font:500 var(--fs-meta)/1 var(--sans);color:var(--muted);margin-bottom:var(--sp-14)}
.tldr li{margin:var(--sp-8) 0}

/* figures: a film straight on the page, a table on a panel */
figure{margin:0}
.wide > video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:var(--hairline);border-radius:var(--r-lg)}
.fig{border:var(--hairline);border-radius:var(--r-lg);background:var(--panel);padding:var(--sp-20) var(--sp-24) var(--sp-16)}
.fig .ft{font:600 var(--fs-ui)/1.3 var(--sans);margin:0 0 var(--sp-4)}
.fig .fs{font:400 var(--fs-meta)/1.5 var(--sans);color:var(--muted);margin:0 0 var(--sp-14)}
.wide > figcaption{margin:var(--sp-12) var(--sp-2) 0}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%}
.t tbody tr:last-child td,.t tbody tr:last-child th{border-bottom:0}
.t tbody th{white-space:nowrap}
.t td.n{white-space:nowrap}

/* quotes and asides */
.canon{border:var(--hairline);border-radius:var(--r-md);padding:var(--sp-16) var(--sp-20);background:var(--panel);font:400 var(--fs-h3)/1.6 var(--serif);color:var(--ink);margin:0 0 var(--sp-12);overflow-wrap:break-word}
.canon .src{display:block;font:500 var(--fs-meta)/1.4 var(--sans);color:var(--muted);margin-bottom:var(--sp-6)}
.callout{border-left:2px solid var(--line-strong);padding:var(--sp-2) 0 var(--sp-2) var(--sp-16);margin:var(--sp-24) 0;color:var(--ink2)}

/* the closing note: its rule spans the text, not the gutters around it */
.colophon{position:relative;max-width:var(--col);margin:var(--sp-72) auto 0;padding:var(--sp-24) var(--gutter) 0;font:400 var(--fs-small)/1.6 var(--sans);color:var(--muted);box-sizing:border-box}
.colophon::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:var(--hairline)}

@media (max-width:560px){
  header.post{padding-top:var(--sp-40)}
  .fig{padding:var(--sp-16) var(--sp-16) var(--sp-14)}
  .tldr{padding:var(--sp-20) var(--sp-20) var(--sp-8)}
  /* figure tables: a block per row, its header cell as the title, each value after its column's name */
  .t.stk,.t.stk tbody{display:block}
  .t.stk thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .t.stk tr{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-20);padding:var(--sp-10) 0;border-bottom:var(--hairline)}
  .t.stk tr:last-child{border-bottom:0}
  .t.stk tr > *{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-6);min-width:0;max-width:100%;padding:0;border:0;text-align:left;white-space:normal}
  .t.stk tr > th{flex:1 0 100%}
  .t.stk td::before{content:attr(data-label);margin-right:var(--sp-2);color:var(--muted);font:400 var(--fs-caption)/1.4 var(--sans)}
}