/* ════════════════════════════════════════════════════════════════════
   LACAUSE — Marginalia · shared reader styles
   One stylesheet for every article. To restyle the whole blog, edit here.
   Tokens mirror index.html so articles feel native (day + dusk).
   ════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#E7DDC7; --paper-2:#DFD3B8; --panel:#F1E9D7; --panel-2:#Eae0cb;
  --ink:#231C11; --ink-2:#6B6049; --ink-3:#938A72;
  --line:rgba(35,28,17,.14); --line-2:rgba(35,28,17,.08);
  --accent:#D5611A; --gold:#B08A3C;
  --glass:rgba(245,238,223,.5); --glass-brd:rgba(255,255,255,.65);
  --measure:68ch;
}
html.dusk{
  --paper:#16130E; --paper-2:#1C1812; --panel:#1F1A13; --panel-2:#262016;
  --ink:#EDE2CC; --ink-2:#A99C7F; --ink-3:#7A6F58;
  --line:rgba(237,226,204,.14); --line-2:rgba(237,226,204,.07);
  --accent:#EE7A2E; --gold:#CFA24E;
  --glass:rgba(34,28,20,.5); --glass-brd:rgba(255,255,255,.14);
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Geist',system-ui,sans-serif;
  transition:background-color .5s ease,color .5s ease;}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* film grain (matches the home page) */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;mix-blend-mode:multiply;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* reading-progress bar */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:90;background:var(--accent);transition:width .1s linear;}

/* top bar — back + wordmark + theme */
.topbar{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(20px,5vw,40px);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  background:color-mix(in srgb,var(--paper) 72%,transparent);border-bottom:1px solid var(--line);}
.topbar a.back{display:inline-flex;align-items:center;gap:9px;font-family:'Geist Mono',monospace;font-size:12px;
  letter-spacing:.08em;color:var(--ink-2);text-decoration:none;transition:color .2s;}
.topbar a.back:hover{color:var(--ink);}
.topbar a.back .ar{color:var(--accent);transition:transform .25s cubic-bezier(.16,1,.3,1);}
.topbar a.back:hover .ar{transform:translateX(-4px);}
.topbar .mark{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.02em;text-decoration:none;color:var(--ink);}
.topbar .mark span.glyph{width:16px;height:16px;color:var(--accent);}
.topbar .right{display:flex;align-items:center;gap:6px;}
.iconbtn{width:34px;height:34px;border:none;border-radius:99px;background:transparent;color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
.iconbtn:hover{background:var(--line-2);color:var(--ink);}

/* article shell */
.reader{max-width:var(--measure);margin:0 auto;padding:clamp(40px,7vw,84px) clamp(20px,5vw,28px) 40px;}
.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:'Geist Mono',monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px;}
.eyebrow .tag{color:var(--accent);}
.eyebrow .sep{width:4px;height:4px;border-radius:99px;background:var(--ink-3);}
.reader h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(2.6rem,6.5vw,4.4rem);line-height:1.02;
  letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;}
.dek{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.5;color:var(--ink-2);margin:0 0 30px;text-wrap:pretty;
  font-family:'Instrument Serif',serif;font-style:italic;}
.byline{display:flex;align-items:center;gap:11px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--ink-3);margin-bottom:42px;}
.byline .dot{width:30px;height:30px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:12px;flex:none;}

/* prose — the readable body */
.prose{font-size:1.16rem;line-height:1.75;color:var(--ink);}
.prose > * + *{margin-top:1.35em;}
.prose p{text-wrap:pretty;}
.prose h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.1;
  letter-spacing:-.01em;margin-top:2em;}
.prose h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.5rem;line-height:1.15;margin-top:1.7em;}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  transition:border-color .2s;}
.prose a:hover{border-bottom-color:var(--accent);}
.prose strong{font-weight:600;color:var(--ink);}
.prose em{font-style:italic;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li + li{margin-top:.5em;}
.prose li::marker{color:var(--accent);}
.prose blockquote{margin:1.8em 0;padding:6px 0 6px 26px;border-left:2px solid var(--accent);
  font-family:'Instrument Serif',serif;font-style:italic;font-size:1.35rem;line-height:1.45;color:var(--ink-2);}
.prose code{font-family:'Geist Mono',monospace;font-size:.88em;background:var(--panel-2);border:1px solid var(--line);
  padding:.12em .4em;border-radius:6px;}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;overflow-x:auto;
  box-shadow:0 24px 50px -44px rgba(35,28,17,.6);}
.prose pre code{background:none;border:none;padding:0;font-size:.86rem;line-height:1.6;}
.prose img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 34px 64px -44px rgba(35,28,17,.7);margin:2em 0;}
.prose figure{margin:2em 0;}
.prose figcaption{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  text-align:center;margin-top:10px;}

/* ── figures & charts — honest inline-SVG data, themed (day/dusk) + no-JS, no deps.
   One vocabulary for every plate; tokens mirror the prose so charts feel engraved. ── */
.prose figure.fig{margin:2.4em 0;padding:22px 24px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 50px -44px rgba(35,28,17,.55);}
.prose figure.fig svg{display:block;width:100%;height:auto;margin:0;border:none;border-radius:0;box-shadow:none;}
.prose figure.fig figcaption{text-align:left;margin-top:14px;font-size:11.5px;line-height:1.55;letter-spacing:.02em;
  color:var(--ink-3);text-transform:none;}
.prose figure.fig figcaption .fnum{color:var(--accent);letter-spacing:.12em;}
.fig text{font-family:'Geist Mono',monospace;}
.fig .ttl{fill:var(--ink-2);font-size:12px;letter-spacing:.14em;}
.fig .lbl{fill:var(--ink-2);font-size:13px;}
.fig .sub{fill:var(--ink-3);font-size:11px;letter-spacing:.04em;}
.fig .val{fill:var(--ink);font-size:13px;}
.fig .valA{fill:var(--accent);font-size:13px;font-weight:600;}
.fig .axis{stroke:var(--line);stroke-width:1;}
.fig .grid{stroke:var(--line-2);stroke-width:1;}
.fig .barA{fill:var(--accent);}
.fig .barB{fill:var(--ink-3);opacity:.45;}
.fig .strokeA{stroke:var(--accent);fill:none;}
.fig .strokeM{stroke:var(--ink-3);fill:none;}
.fig .dotA{fill:var(--accent);}
.fig .gold{fill:var(--gold);}
.fig .node{fill:var(--panel-2);stroke:var(--line);}
.fig .nodeA{fill:none;stroke:var(--accent);stroke-width:1.5;}
.prose hr{border:none;text-align:center;margin:2.6em 0;color:var(--gold);}
.prose hr::before{content:"✦ ✦ ✦";letter-spacing:.5em;font-size:12px;}
/* optional illuminated drop-cap: add class="lead" to the first paragraph */
.prose p.lead::first-letter{float:left;font-family:'Instrument Serif',serif;font-size:3.6em;line-height:.66;
  padding:.04em .1em 0 0;color:var(--accent);}

/* end-of-article footer */
.endmark{margin:54px 0 0;text-align:center;color:var(--gold);font-size:14px;letter-spacing:.4em;}
.foot{max-width:var(--measure);margin:30px auto 0;padding:30px clamp(20px,5vw,28px) 60px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-2);}
.foot a{color:var(--accent);text-decoration:none;}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;}#progress{transition:none;}}

/* ── i18n — language toggle (mirrors the home nav) + bilingual prose ── */
#langsel{display:flex;align-items:center;gap:1px;padding:3px;border-radius:99px;background:var(--line-2);border:1px solid var(--line);}
.langopt{font-family:'Geist Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ink-2);
  background:transparent;border:none;border-radius:99px;padding:6px 9px;line-height:1;cursor:pointer;transition:color .2s,background .2s;}
.langopt:hover{color:var(--ink);}
.langopt.on{color:#fff;background:var(--accent);}
.langopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* show only the active language's prose — keyed on <html lang>, so no-JS readers get English */
.prose[data-lang="fr"]{display:none;}
html[lang="fr"] .prose[data-lang="en"]{display:none;}
html[lang="fr"] .prose[data-lang="fr"]{display:block;}

/* ── Clawd — the pixel "Assistant" lives as the animated wordmark glyph in the
      topbar (injected by article.js; same character as the homepage nav). ── */
.topbar .mark .glyph.clawd-logo{width:28px;height:26px;color:inherit;}
.topbar .mark .glyph.clawd-logo img{width:100%;height:100%;object-fit:contain;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.topbar .mark:hover .glyph.clawd-logo img{transform:translateY(-2px) scale(1.08);}