/* Robopsychologist: shared styles. Paper and ink; colour only where it carries meaning: a highlighter mark on anything
   clickable, the blue and yellow of the two balls, and red for failures. */
:root{
  --bg:#fbfbfa; --panel:#f2f3f1; --panel-2:#e9ebe8; --ink:#121416; --ink-2:#3b4046; --muted:#737a81; --rule:#e3e5e2;
  --accent:#121416; --accent-soft:#e9ebe8; --hl:#fbe9a6; --blue:#2c64cf; --yellow:#c99a06; --fail:#c4513a; --fail-soft:#f5e0da;
  --serif:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --main:660px; --wide:1040px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1113; --panel:#171a1d; --panel-2:#1f2327; --ink:#eceef0; --ink-2:#bfc4c9; --muted:#8a9198; --rule:#262a2e;
    --accent:#eceef0; --accent-soft:#1f2327; --hl:#5c4d17; --blue:#6f9cf2; --yellow:#e6c24d; --fail:#ef7f67; --fail-soft:#3a211b;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1113; --panel:#171a1d; --panel-2:#1f2327; --ink:#eceef0; --ink-2:#bfc4c9; --muted:#8a9198; --rule:#262a2e;
  --accent:#eceef0; --accent-soft:#1f2327; --hl:#5c4d17; --blue:#6f9cf2; --yellow:#e6c24d; --fail:#ef7f67; --fail-soft:#3a211b;
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,video{ max-width:100%; }
a{ color:inherit; text-decoration:none; background-image:linear-gradient(var(--hl), var(--hl)); background-repeat:no-repeat;
  background-position:0 88%; background-size:100% .42em; transition:background-size .15s ease; }
a:hover{ background-size:100% 100%; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:3px; }

/* top bar */
.nav{ max-width:var(--wide); margin:0 auto; padding:22px 20px 0; display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  font-family:var(--sans); font-size:14px; }
.brand{ font-weight:600; letter-spacing:-.01em; text-decoration:none; font-size:15px; background:none; }
.brand:hover{ color:var(--ink); }
.nav nav{ display:flex; gap:18px; color:var(--muted); }
.nav nav a{ text-decoration:none; }

/* breakout grid: text in the main column, figures may go wide */
.post{ display:grid; padding-block:56px 96px;
  grid-template-columns:[full-start] minmax(16px,1fr) [wide-start] minmax(0,calc((var(--wide) - var(--main)) / 2)) [main-start] min(var(--main), calc(100% - 32px)) [main-end] minmax(0,calc((var(--wide) - var(--main)) / 2)) [wide-end] minmax(16px,1fr) [full-end]; }
.post > *{ grid-column:main; min-width:0; }
.post > .wide{ grid-column:wide; }

h1{ font-weight:500; font-size:clamp(34px, 5.4vw, 54px); line-height:1.06; letter-spacing:-.018em; margin:.3em 0 .35em; text-wrap:balance; }
.dek{ font-size:21.5px; line-height:1.5; color:var(--ink-2); margin:0 0 1.2em; text-wrap:pretty; }
.byline{ font-family:var(--sans); font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:36px; }
.byline b{ color:var(--ink); font-weight:500; }
h2{ font-weight:500; font-size:31px; line-height:1.15; letter-spacing:-.012em; margin:2.1em 0 .5em; text-wrap:balance; scroll-margin-top:24px; }
h3{ font-family:var(--sans); font-weight:600; font-size:17px; letter-spacing:-.005em; margin:1.8em 0 .35em; }
p{ margin:0 0 1em; text-wrap:pretty; }
.post ul, .post ol{ padding-left:1.15em; margin:0 0 1.1em; }
.post li{ margin-bottom:.45em; }
strong{ font-weight:600; }
.num{ font-family:var(--mono); font-size:.86em; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
code{ font-family:var(--mono); font-size:.84em; background:var(--panel); padding:.1em .35em; border-radius:4px; }

/* at a glance */
.glance{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:8px 0 12px; }
.glance div{ padding:18px 16px 16px 0; font-family:var(--sans); font-size:13.5px; line-height:1.4; color:var(--muted); }
.glance div + div{ padding-left:16px; border-left:1px solid var(--rule); }
.glance b{ display:block; font-family:var(--mono); font-weight:400; font-size:30px; line-height:1.1; color:var(--ink); letter-spacing:-.03em; margin-bottom:6px; font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .glance{ grid-template-columns:repeat(2, minmax(0,1fr)); } .glance div:nth-child(3){ padding-left:0; border-left:0; } .glance div:nth-child(n+3){ border-top:1px solid var(--rule); } }

/* figures */
figure{ margin:2.2em 0 2.4em; }
figcaption{ font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--muted); margin-top:12px; max-width:var(--main); text-wrap:pretty; }
figcaption b{ color:var(--ink); font-weight:600; }
.wide figcaption{ margin-left:auto; margin-right:auto; }
.media{ width:100%; display:block; border-radius:10px; background:#000; aspect-ratio:1334/960; height:auto; }
.photo{ width:100%; display:block; border-radius:10px; background:var(--panel); height:auto; }
.panel{ background:var(--panel); border-radius:12px; padding:22px 22px 18px; }
@media (max-width:520px){ .panel{ padding:16px 12px 12px; border-radius:10px; } }
.scroll{ overflow-x:auto; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--sans); font-size:13px; color:var(--ink-2); margin-top:10px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:0; }
.tag{ display:inline-block; font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; background:var(--panel-2); color:var(--ink-2); }

/* charts (SVG) */
svg.chart{ width:100%; height:auto; display:block; overflow:visible; }
svg.chart text{ font-family:var(--sans); fill:var(--muted); font-size:12px; }
svg.chart .lbl{ fill:var(--ink-2); font-size:13px; }
svg.chart .val{ fill:var(--ink); font-family:var(--mono); font-size:12.5px; }
svg.chart .grid{ stroke:var(--rule); stroke-width:1; }
svg.chart .axis{ stroke:var(--muted); stroke-width:1; }
svg.chart .zero{ stroke:var(--ink-2); stroke-width:1; stroke-dasharray:4 4; }

/* tables */
table.data{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14.5px; font-variant-numeric:tabular-nums; }
table.data th{ text-align:left; font-weight:500; color:var(--muted); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; padding:0 10px 8px 0; border-bottom:1px solid var(--rule); }
table.data td{ padding:10px 10px 10px 0; border-bottom:1px solid var(--rule); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:0; }
table.data td.r, table.data th.r{ text-align:right; white-space:nowrap; }
table.data tfoot td{ border-top:1px solid var(--ink-2); font-weight:600; }
.bar{ position:relative; height:6px; border-radius:3px; background:var(--panel-2); min-width:60px; }
.bar > span{ position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--ink-2); }

/* notes and footer */
.aside{ font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--ink-2); border-left:2px solid var(--rule); padding:2px 0 2px 16px; margin:1.6em 0; }
.links{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:1em 0 1.4em; font-family:var(--sans); font-size:15.5px; }
.links a{ display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--rule); border-radius:10px; text-decoration:none; background:none; transition:background-color .15s; }
.links a:hover{ background:var(--hl); border-color:var(--hl); color:var(--ink); }
.links span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
pre.cite{ font-family:var(--mono); font-size:12.5px; line-height:1.55; background:var(--panel); border-radius:10px; padding:16px 18px; overflow-x:auto; color:var(--ink-2); }
.foot{ max-width:var(--wide); margin:0 auto; padding:28px 20px 48px; border-top:1px solid var(--rule); font-family:var(--sans); font-size:13.5px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot a{ text-decoration:none; }

/* table of contents (wide screens only) */
.toc{ display:none; }
@media (min-width:1480px){
  .toc{ display:block; position:fixed; top:120px; left:max(12px, calc((100vw - var(--wide)) / 2 - 210px)); width:180px; font-family:var(--sans); font-size:13px; line-height:1.4; }
  .toc a{ display:block; padding:5px 0 5px 12px; border-left:1px solid var(--rule); color:var(--muted); text-decoration:none; background:none; }
  .toc a:hover{ color:var(--ink); background:var(--hl); }
  .toc a.on{ color:var(--ink); border-left-color:var(--ink); }
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } }