/* article.css — LaTeX-style paper theme for Rhouzlane essays, with a light/dark switch.
   Computer Modern serif, numbered sections, italic emphasis, centred equations,
   booktabs tables, readable stat + figure cards. NO accent colour — typography and
   grayscale only. Default = DARK; [data-theme="light"] flips to a warm-white paper.
   CM webfonts from jsDelivr (Georgia fallback). Charts read their colours from CSS
   vars so they invert cleanly with the theme. */
@import url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Serif/cmun-serif.css');
@import url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Typewriter/cmun-typewriter.css');

/* ---------- DARK (default) ---------- */
:root{
  --bg:#0c0e12; --paper:#161a22; --ink:#f2f4f7; --body:#c9cfd8; --mut:#8b93a0; --faint:#697180;
  --line:#242a34; --line2:#1c212a; --rule:#c9cfd8; --ul:#454c58;
  /* figure / chart palette (light marks on a dark panel) */
  --fig-bg:#12151b; --fig-border:#272d38; --fig-ink:#e7eaef; --fig-mut:#99a0ab; --fig-emph:#ffffff;
  --fig-faint:#454b56; --fig-axis:#586170;
  --serif:"Computer Modern Serif",Georgia,"Times New Roman",serif;
  --mono:"Computer Modern Typewriter",ui-monospace,Menlo,Consolas,monospace;
  --display:var(--serif); --sans:var(--serif);
}
/* ---------- LIGHT ---------- */
:root[data-theme="light"]{
  --bg:#fcfbf8; --paper:#ffffff; --ink:#1a1a1a; --body:#242424; --mut:#5f5f5f; --faint:#8a8a8a;
  --line:#dcdad2; --line2:#e8e6df; --rule:#1a1a1a; --ul:#b9b7ae;
  --fig-bg:#ffffff; --fig-border:#e4e2da; --fig-ink:#1f1f1f; --fig-mut:#6a6a6a; --fig-emph:#000000;
  --fig-faint:#d2cfc5; --fig-axis:#8a8a8a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--body);font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-weight:400;
  transition:background .2s ease,color .2s ease}
.wrap{max-width:680px;margin:0 auto;padding:0 26px}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ul);transition:border-color .15s}
a:hover{border-bottom-color:var(--ink)}
sup a{font-family:var(--serif);font-size:.72em;border:0;padding:0 1px}
.mono{font-family:var(--mono)}

/* ---- nav + theme toggle ---- */
nav{border-bottom:1px solid var(--line)}
.navrow{max-width:680px;margin:0 auto;padding:0 26px;height:60px;display:flex;align-items:center;justify-content:space-between}
.back,.brand{font-family:var(--serif);font-size:15px;letter-spacing:0}
.back{color:var(--mut)}
.back:hover{color:var(--ink);border:0}
.navr{display:flex;align-items:center;gap:16px}
.brand{color:var(--faint);font-style:italic}
.tt{font-family:var(--serif);font-size:15px;line-height:1;color:var(--mut);background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:5px 9px;cursor:pointer;transition:color .15s,border-color .15s}
.tt:hover{color:var(--ink);border-color:var(--mut)}

/* ---- title block (centred, like a paper) ---- */
header.post{padding:64px 0 6px;text-align:center}
.kicker{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;color:var(--mut)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.2vw,50px);line-height:1.1;letter-spacing:0;
  color:var(--ink);margin:14px 0 0}
.sub{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(18px,2.4vw,22px);line-height:1.4;
  color:var(--mut);margin:14px auto 0;max-width:34em}
.byline{font-family:var(--serif);font-size:16px;letter-spacing:0;color:var(--body);margin:22px 0 0;padding-top:14px;
  border-top:1px solid var(--line);display:inline-block}
.byline a{color:var(--mut)}

/* ---- abstract ---- */
.abstract{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;padding:20px 0;margin:32px auto 6px;max-width:40em;font-size:17px;line-height:1.55;color:var(--body)}
.abstract b{display:block;text-align:center;font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin-bottom:10px}

/* ---- body / structure ---- */
article{padding:12px 0 10px}
article p{margin:0 0 16px;text-align:justify;hyphens:auto}
.lede{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink);font-weight:400}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(23px,3vw,29px);line-height:1.2;letter-spacing:0;
  color:var(--ink);margin:44px 0 10px;padding-top:4px}
h2 .n{font-family:var(--serif);font-weight:700;color:var(--ink);margin-right:12px;letter-spacing:0}
h3{font-family:var(--serif);font-weight:700;font-style:italic;font-size:19px;letter-spacing:0;text-transform:none;
  color:var(--ink);margin:28px 0 8px}
em{font-style:italic;background:none;padding:0}
strong{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* ---- equation (centred, typewriter) ---- */
.eq{font-family:var(--mono);background:transparent;border:0;border-radius:0;padding:10px 0;margin:4px 0 18px;
  font-size:17px;overflow-x:auto;text-align:center;color:var(--ink)}

/* ---- stat callouts (readable cards) ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 26px}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:16px 18px}
.stat b{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--ink);display:block;letter-spacing:0;line-height:1.05}
.stat span{font-family:var(--serif);font-size:13.5px;color:var(--mut);display:block;margin-top:8px;line-height:1.45}

/* ---- tables (booktabs) ---- */
table{width:100%;border-collapse:collapse;font-family:var(--serif);font-size:16px;margin:12px 0 6px;
  border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
th,td{text-align:right;padding:8px 10px;border:0}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);
  border-bottom:1px solid var(--rule)}
td.mono,td .mono{font-family:var(--mono)}
td .warn{color:var(--ink);font-family:var(--mono);font-style:italic;font-size:15px}
.cap{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--mut);margin:6px 0 26px;line-height:1.5}

/* ---- figures / charts (theme-aware cards) ---- */
figure{margin:16px 0 26px;text-align:center}
.chart{width:100%;height:auto;border:1px solid var(--fig-border);border-radius:5px;background:var(--fig-bg);
  display:block;padding:6px}

/* ---- pull quote ---- */
.pull{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(21px,2.8vw,26px);line-height:1.4;
  color:var(--ink);letter-spacing:0;border:0;padding:12px 6%;margin:22px 0 26px;text-align:center}

/* ---- note ---- */
.note{font-family:var(--serif);font-size:16px;font-style:italic;color:var(--body);background:transparent;border:0;
  border-left:2px solid var(--line);border-radius:0;padding:4px 0 4px 16px;line-height:1.55}

/* ---- references ---- */
.refs{border-top:1px solid var(--rule);margin-top:26px;padding-top:20px;font-family:var(--serif);font-size:15px;color:var(--body)}
.refs h4{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.refs ol{margin:0;padding-left:20px}
.refs li{margin:6px 0;line-height:1.5}
.flag{font-style:italic;font-weight:700;color:var(--ink)}

footer{border-top:1px solid var(--line);margin-top:36px;padding:22px 0 60px;font-family:var(--serif);font-size:15px;
  letter-spacing:0;color:var(--faint)}
footer a{color:var(--mut)}
@media(max-width:620px){header.post{padding:44px 0 6px} body{font-size:18px}}