/* ---------- shared article styles — matches index.html ---------- */
:root{
  --paper:#E9EAE6;
  --ink:#1A1D1C;
  --green:#1E4D3B;
  --graphite:#4A4F4A;
  --line:#C9CCC5;
  --span-bg:#DCDED8;
  --code-bg:#DCDED8;
  --max:820px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Newsreader',Georgia,serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green);color:var(--paper)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.mono{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 18px;font-family:'IBM Plex Mono',monospace;font-size:13px;z-index:100;
}
.skip:focus{left:0}

/* ---------- header (same as home) ---------- */
header{
  border-bottom:1px solid var(--ink);
  position:sticky;top:0;background:var(--paper);z-index:10;
}
.hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;max-width:var(--max);margin:0 auto;
}
.wordmark{
  font-family:'Archivo',sans-serif;
  font-weight:900;font-size:20px;letter-spacing:-.02em;text-decoration:none;
}
.wordmark span{color:var(--green)}
nav{display:flex;gap:28px}
nav a{
  font-family:'IBM Plex Mono',monospace;font-size:13px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.08em;
  color:var(--graphite);transition:color .15s;
}
nav a:hover{color:var(--green)}

/* ---------- article head ---------- */
.article-head{padding:72px 0 40px;border-bottom:1px solid var(--ink)}
.kicker{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;
  color:var(--green);text-transform:uppercase;margin-bottom:28px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.kicker .sep{color:var(--line)}
.kicker .tag{border:1px solid var(--line);padding:2px 8px;color:var(--graphite)}
.article-head h1{
  font-family:'Archivo',sans-serif;font-weight:900;font-stretch:78%;
  font-size:clamp(34px,5.5vw,60px);line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;max-width:14ch;
}
.article-head .lede{
  margin-top:26px;max-width:60ch;font-size:21px;line-height:1.55;color:#2B2F2C;
}

/* ---------- prose ---------- */
.prose{padding:48px 0 24px}
.prose h2{
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:85%;
  font-size:26px;letter-spacing:-.01em;line-height:1.2;
  margin:44px 0 16px;padding-top:20px;border-top:1px solid var(--line);
}
.prose h2:first-child{border-top:none;padding-top:0;margin-top:0}
.prose h3{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-.01em;margin:32px 0 12px;
}
.prose h3::before{content:"→ ";color:var(--green)}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:26px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--green)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{background:var(--green);color:var(--paper);text-decoration:none}
.prose strong{font-weight:600}
.prose blockquote{
  border-left:3px solid var(--green);padding:6px 0 6px 22px;margin:24px 0;
  font-style:italic;color:#33372e;
}

/* code */
.prose code{
  font-family:'IBM Plex Mono',monospace;font-size:.82em;
  background:var(--code-bg);padding:2px 6px;border:1px solid var(--line);
}
.prose pre{
  background:var(--code-bg);border:1px solid var(--ink);
  padding:20px 22px;overflow-x:auto;margin:0 0 24px;
}
.prose pre code{
  font-size:13px;line-height:1.6;background:none;border:none;padding:0;
  white-space:pre;color:var(--ink);
}

/* tables */
.tbl-scroll{overflow-x:auto;margin:0 0 24px}
.prose table{
  width:100%;border-collapse:collapse;border:1px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;min-width:420px;
}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--span-bg);text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:500}
.prose td strong{color:var(--green)}

/* ---------- source card ---------- */
.source{
  margin:12px 0 0;border:1px solid var(--ink);display:flex;flex-direction:column;
}
.source a{
  font-family:'IBM Plex Mono',monospace;font-size:13px;text-decoration:none;
  padding:16px 20px;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;
  transition:background .15s,color .15s;
}
.source a:last-child{border-bottom:none}
.source a:hover{background:var(--green);color:var(--paper)}
.source a .k{color:var(--graphite)}
.source a:hover .k{color:var(--paper)}

/* ---------- back / footer ---------- */
.backrow{padding:40px 0}
.back{
  font-family:'IBM Plex Mono',monospace;font-size:13px;text-decoration:none;
  color:var(--graphite);text-transform:uppercase;letter-spacing:.06em;
}
.back:hover{color:var(--green)}
footer{padding:28px 0 40px;border-top:1px solid var(--ink)}
.ft{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  max-width:var(--max);margin:0 auto;padding:0 24px;
}
.ft .mono{color:var(--graphite)}

@media(prefers-color-scheme:dark){
  :root{
    --paper:#151816;--ink:#E8EAE4;--green:#7FBFA0;--graphite:#A6ABA3;
    --line:#3A3E3A;--span-bg:#262A27;--code-bg:#1D211E;
  }
  body{color:var(--ink)}
  .article-head .lede{color:#C6C9C2}
  .prose p,.prose li{color:#D2D5CE}
  .prose blockquote{color:#BFC3BC}
  .source a:hover,.prose a:hover{background:var(--green);color:#0F1210}
  .source a:hover .k{color:#0F1210}
  ::selection{background:var(--green);color:#0F1210}
  .skip{background:var(--ink);color:var(--paper)}
}

@media(max-width:760px){
  body{font-size:18px}
  nav{gap:16px}
  .article-head{padding:48px 0 32px}
  .prose{padding:36px 0 16px}
}