@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/sourceserif.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/sourceserif-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{color-scheme:light}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
footer a{color:var(--on-band-muted)}
.legal{max-width:44em;display:flex;flex-direction:column;gap:16px;padding-block:56px}
.legal h1{font-size:36px}.legal h2{font-size:22px;margin-top:14px}
.todo{background:var(--accent-soft);padding:1px 6px;font-family:var(--mono);font-size:.85em}

/* Layout: petrol masthead and hero band, then an article column with a reference sidebar (as on a theory site), then full-width bands for the framework's parts. */
:root{
  --bg:#f5f7f6; --surface:#ffffff; --fg:#16262a; --muted:#52666b; --rule:#d5dedc;
  --band:#103c42; --on-band:#eef5f3; --on-band-muted:#a9c4c1;
  --accent:#a8701c; --accent-soft:#f3e7d1; --silicon:#3f7390; --silicon-soft:#dfeaf0; --carbon:#2b3a3d;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0d1719; --surface:#142225; --fg:#e4eceb; --muted:#9db0b1; --rule:#2a3d40;
  --band:#0a2a2f; --on-band:#eef5f3; --on-band-muted:#9dbab7;
  --accent:#e0a94e; --accent-soft:#3a2e17; --silicon:#7fb3cf; --silicon-soft:#1b3340; --carbon:#c9d6d6;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0d1719; --surface:#142225; --fg:#e4eceb; --muted:#9db0b1; --rule:#2a3d40;
  --band:#0a2a2f; --on-band:#eef5f3; --on-band-muted:#9dbab7;
  --accent:#e0a94e; --accent-soft:#3a2e17; --silicon:#7fb3cf; --silicon-soft:#1b3340; --carbon:#c9d6d6;
  color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.65}
a{color:var(--silicon);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.label{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
[id]{scroll-margin-top:110px}

/* masthead */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--band);color:var(--on-band);border-bottom:1px solid var(--rule)}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;padding-block:12px}
.brand{font-family:var(--display);font-weight:700;font-size:17px;color:var(--on-band);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand svg{flex:none}
.nav{display:flex;gap:20px;overflow-x:auto;max-width:100%;font-family:var(--display);font-size:15px}
.nav a{color:var(--on-band-muted);text-decoration:none;white-space:nowrap;padding-block:4px}
.nav a:hover{color:var(--on-band)}

/* hero */
.hero{background:var(--band);color:var(--on-band)}
.hero .wrap{padding-block:64px 72px;display:flex;flex-direction:column;gap:18px}
.hero .label{color:var(--accent)}
.hero h1{font-size:clamp(38px,6.4vw,76px);font-weight:700;letter-spacing:-.02em;max-width:14ch}
.hero .lede{font-size:clamp(19px,2.2vw,24px);line-height:1.45;max-width:38em;color:var(--on-band)}
.hero .sub{color:var(--on-band-muted);max-width:40em;font-size:17px}
.btn{display:inline-block;align-self:flex-start;margin-top:8px;background:var(--accent);color:var(--band);font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;padding:12px 22px;border-radius:3px}

/* sections */
section{padding-block:64px}
section + section{border-top:1px solid var(--rule)}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;max-width:44em}
.sec-head h2{font-size:clamp(28px,3.6vw,40px)}
.sec-head p{color:var(--muted)}

/* what-is article */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px}
@media (max-width:900px){.article{grid-template-columns:minmax(0,1fr)}}
.prose{display:flex;flex-direction:column;gap:22px;min-width:0}
.prose > p,.prose > ul,.prose > ol{max-width:39em}
.prose h3{font-size:26px;margin-top:18px}
.prose ul,.prose ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.byline{font-style:italic;color:var(--muted)}
.dict{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--accent);padding:22px 24px;display:flex;flex-direction:column;gap:10px;max-width:39em}
.dict .head{font-family:var(--mono);font-size:15px}
.dict .head b{font-family:var(--display);font-size:22px;margin-right:6px}
.dict ol{margin:0;padding-left:1.3em}
.dict .src{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pull{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.8vw,30px);line-height:1.3;margin:10px 0;padding:6px 0 6px 22px;border-left:4px solid var(--silicon);max-width:26em}
.pull cite{display:block;font-family:var(--mono);font-size:12.5px;font-style:normal;color:var(--muted);margin-top:12px;letter-spacing:.04em}
.figure{margin:0;overflow-x:auto}
.figure svg{display:block;width:100%;min-width:520px;max-width:640px;height:auto;margin-inline:auto}
.figure figcaption{font-size:15px;color:var(--muted);max-width:39em;margin-top:8px}
.box{background:var(--silicon-soft);padding:22px 24px;display:flex;flex-direction:column;gap:8px;max-width:39em}
.box .label{color:var(--silicon)}
.rights{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.rights div{background:var(--surface);padding:14px 16px;font-size:16px;line-height:1.45}
.rights b{display:block;font-family:var(--display);font-size:17px}
.notes{font-size:15px;color:var(--muted);border-top:1px solid var(--rule);padding-top:18px;max-width:39em}
.notes ol{gap:6px}
sup a{text-decoration:none;font-family:var(--mono);font-size:12px}

.side{display:flex;flex-direction:column;gap:28px;font-size:16px;line-height:1.5;min-width:0}
.side > div{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:3px solid var(--carbon)}
.side h4{font-size:18px}
.side ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.side p{color:var(--muted)}

/* dimensions */
.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px 48px}
.dim{display:flex;flex-direction:column;gap:8px;min-width:0}
.dim .q{font-family:var(--mono);font-size:13px;color:var(--accent)}
.dim h3{font-size:22px}
.dim p{font-size:17px}
.dim .tool{font-size:15.5px;color:var(--muted);border-top:1px solid var(--rule);padding-top:8px}

/* table */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:16.5px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--rule)}
thead th{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
tbody th{font-family:var(--display);font-size:17px;white-space:nowrap}
tr.now-row{background:var(--accent-soft)}
.fine{font-size:15px;color:var(--muted);margin-top:14px;max-width:46em}

/* evidence */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.fact{display:flex;flex-direction:column;gap:6px}
.fact .n{font-family:var(--display);font-weight:700;font-size:48px;line-height:1;font-variant-numeric:tabular-nums;color:var(--silicon)}
.fact p{font-size:16.5px}
.fact .src{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* propositions + steps */
.plist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 48px}
.plist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding-block:16px;border-top:1px solid var(--rule);font-size:17px;line-height:1.5}
.plist .k{font-family:var(--mono);font-size:14px;color:var(--accent);padding-top:3px}
.plist b{font-family:var(--display);display:block;font-size:18px}

/* about / requests */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 56px}
.two > div{display:flex;flex-direction:column;gap:14px;min-width:0}
.two h3{font-size:22px}
.contact{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--accent);padding:16px 18px;font-family:var(--mono);font-size:14px;line-height:1.5}
.refs{font-size:15.5px;line-height:1.5;color:var(--muted);display:flex;flex-direction:column;gap:8px;margin:0;padding-left:1.2em}

footer{background:var(--band);color:var(--on-band-muted);font-size:15px}
footer .wrap{padding-block:36px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
footer b{color:var(--on-band);font-family:var(--display)}

/* diagram */
.d-ring{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-dasharray:4 6}
.d-link{fill:none;stroke:var(--accent);stroke-width:2}
.d-dim{fill:var(--surface);stroke:var(--carbon);stroke-width:1.2}
.d-h{fill:var(--carbon)} .d-u{fill:var(--accent)} .d-a{fill:var(--silicon)}
.d-t{font-family:var(--display);font-size:13px;font-weight:500;fill:var(--fg);text-anchor:middle}
.d-n{font-family:var(--display);font-size:12.5px;font-weight:700;fill:var(--bg);text-anchor:middle}
.d-c{font-family:var(--mono);font-size:10.5px;fill:var(--muted);text-anchor:middle;letter-spacing:.08em}