/* about.css -- the long explainer of the studies (about/index.html), loaded after ../hub.css.
   Created by LT Sean Egan, PhD                                              2026-10-03
   Figures are inline SVG drawn with the classes below; the site's CSP refuses style attributes.
   SDE 2026-10-05  the page's own color tokens (day and night) and base type: hub.css now holds only
                   the front page's additions to research.css, which left this page unstyled */
:root{--bg:#f7f8fa;--card:#ffffff;--ink:#17202a;--muted:#5b6673;--line:#e3e7ec;--accent:#0f6e8c;--accent-ink:#0b4a5e;--radius:14px}
@media (prefers-color-scheme:dark){:root{--bg:#0f1418;--card:#161d23;--ink:#e6ebf0;--muted:#9aa7b4;--line:#243039;--accent:#5ec3e0;--accent-ink:#9fdcee}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
.hub{max-width:760px;margin:0 auto;padding:20px 16px 48px}
.hub-head{margin-bottom:22px}
.crumbs{margin:0 0 6px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
h1{margin:0 0 8px;font-size:28px;line-height:1.2;letter-spacing:-.01em}
.lede{margin:0;color:var(--muted);font-size:15px}
code{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(127,127,127,.12);padding:1px 5px;border-radius:5px}
.hub-foot{margin-top:28px;font-size:13px;color:var(--muted)}
.hub-foot p{margin:0}
.prose{max-width:720px}
.prose section{margin-top:30px}
.prose h2{font-size:21px;margin:0 0 10px;letter-spacing:-.01em}
.prose h3{font-size:16px;margin:18px 0 6px}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose q{quotes:"\201C" "\201D"}
.prose em{font-style:italic}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);font-size:14px}
.toc a{white-space:nowrap}
.defs{margin:0 0 12px;display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px}
.defs dt{font-weight:600}
.defs dd{margin:0;color:var(--muted)}
.design{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 12px}
.design th,.design td{text-align:left;vertical-align:top;padding:8px 10px;border-top:1px solid var(--line)}
.design th{font-weight:600;color:var(--muted);border-top:0}
.design td:first-child{font-weight:600;white-space:nowrap}
@media (max-width:480px){
  .defs{grid-template-columns:1fr;gap:2px 0}
  .defs dd{margin-bottom:8px}
  .design td:first-child{white-space:normal}
}
/* Figures: inline SVG drawn with classes only (the site CSP refuses style attributes) */
:root{--s1:#2a78d6;--s2:#eb6834}
@media (prefers-color-scheme:dark){:root{--s1:#3987e5;--s2:#d95926}}
.fig{margin:8px 0 16px}
.fig svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.fig-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fig-row svg{max-width:240px}
.fig figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.fig text{font-size:12px;fill:var(--ink)}
.fig .t-mid{text-anchor:middle}
.fig .t-end{text-anchor:end}
.fig .t-muted{fill:var(--muted)}
.fig .t-title{font-weight:600}
.fig .t-ctx{fill:var(--accent)}
.fig .sub{font-size:9px}
.fig .grid{stroke:var(--line);stroke-width:1}
.fig .axis,.fig .lead{stroke:var(--muted);stroke-width:1}
.fig .curve{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fig .c-silu{stroke:var(--ink)}
.fig .c-a{stroke:var(--s1)}
.fig .c-b{stroke:var(--s2)}
.fig .dot{fill:var(--ink)}
.fig .box{fill:var(--card);stroke:var(--muted);stroke-width:1}
.fig .box-new{fill:var(--card);stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3}
.fig .wire{fill:none;stroke:var(--muted);stroke-width:1.5}
.fig .wire-ctx{fill:none;stroke:var(--accent);stroke-width:1.5}
.fig .head{fill:var(--muted)}
.fig .head-ctx{fill:var(--accent)}
@media (max-width:560px){
  .fig-row{grid-template-columns:1fr;justify-items:center}
  .fig-row svg{max-width:280px}
}
.fig .chart text{font-size:13px}