:root{
  --ink:#0b0a08;
  --paper:#f3efe6;
  --rule:rgba(243,239,230,.14);
  --rule-strong:rgba(243,239,230,.26);
  --muted:rgba(243,239,230,.56);
  --accent:#ff5b1f;
  --grain-opacity:.05;
  --display:"Instrument Serif", Georgia, serif;
  --sans:"Inter Tight", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box}
html, body{margin:0;padding:0}
html{background:var(--ink)}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

::selection{background:var(--accent);color:var(--ink)}

a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:.5px; }
a:hover{ color:var(--paper) }

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:680px){ .wrap{padding:0 22px} }

.small-caps{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

hr.rule{
  border:0;
  border-top:.5px solid var(--rule-strong);
  margin:36px 0 0;
}

/* ─── Header ─── */
.nav{
  border-bottom:.5px solid var(--rule-strong);
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--ink) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:760px; padding-top:18px; padding-bottom:16px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:inherit;
}
.brand:hover{ color:inherit }
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  background:var(--paper); color:var(--ink);
  display:grid; place-items:center;
  font-family:var(--display); font-size:20px; line-height:1;
  font-style:italic; padding-bottom:3px;
}
.brand-word{
  font-family:var(--display);
  font-size:22px; letter-spacing:-.01em; font-style:italic;
}
.brand-word .dot{ font-style:normal; color:var(--accent) }
.nav-meta{
  display:flex; align-items:center; gap:22px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); text-transform:uppercase;
}
.nav-meta a{ color:inherit; text-decoration:none }
.nav-meta a:hover{ color:var(--paper) }
@media (max-width:680px){
  .nav-meta .hide-sm{ display:none }
  .nav-meta{ gap:16px }
}

/* ─── Document ─── */
.doc{
  padding:72px 0 64px;
}
@media (max-width:680px){ .doc{ padding:48px 0 48px } }

.doc-kicker{ margin-bottom:22px }
.doc-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(44px, 8vw, 88px);
  line-height:1;
  letter-spacing:-.025em;
  margin:0;
}
.doc-meta{ margin-top:20px }

.doc-body{
  margin-top:48px;
  font-size:17px;
  color:color-mix(in oklab, var(--paper) 88%, transparent);
}
.doc-body > *:first-child{ margin-top:0 }

.doc-body h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 4vw, 36px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--paper);
  margin:56px 0 16px;
}
.doc-body h3{
  font-family:var(--display);
  font-weight:400;
  font-size:22px;
  line-height:1.2;
  color:var(--paper);
  margin:36px 0 12px;
}
.doc-body p{ margin:0 0 18px }
.doc-body em{ color:var(--muted); font-style:italic }
.doc-body strong{ color:var(--paper); font-weight:600 }

.doc-body ul, .doc-body ol{
  margin:0 0 18px;
  padding-left:1.3em;
}
.doc-body li{ margin:7px 0 }
.doc-body li::marker{ color:var(--accent) }

.doc-body a{ color:var(--accent) }
.doc-body a:hover{ color:var(--paper) }

.doc-body blockquote{
  margin:24px 0;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--accent);
  color:var(--muted);
  font-style:italic;
}
.doc-body code{
  font-family:var(--mono);
  font-size:.86em;
  background:rgba(243,239,230,.07);
  border:.5px solid var(--rule);
  border-radius:5px;
  padding:.12em .4em;
}
.doc-body pre{
  font-family:var(--mono);
  font-size:13px;
  background:rgba(243,239,230,.05);
  border:.5px solid var(--rule);
  border-radius:10px;
  padding:18px 20px;
  overflow-x:auto;
  margin:0 0 20px;
}
.doc-body pre code{ background:none; border:0; padding:0 }
.doc-body hr{
  border:0; border-top:.5px solid var(--rule-strong); margin:40px 0;
}
.doc-body table{
  width:100%; border-collapse:collapse; margin:0 0 22px;
  font-size:15px;
}
.doc-body th, .doc-body td{
  text-align:left; padding:10px 12px;
  border-bottom:.5px solid var(--rule);
}
.doc-body th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* ─── Footer ─── */
.footer{
  border-top:.5px solid var(--rule-strong);
  padding:32px 0 40px;
}
.ft-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:760px; gap:18px;
}
.ft-back{
  font-family:var(--display); font-style:italic;
  font-size:22px; color:var(--paper); text-decoration:none;
}
.ft-back:hover{ color:var(--accent) }
.ft-back .ac{ font-style:normal; color:var(--accent) }
.ft-legal{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:680px){
  .ft-inner{ flex-direction:column; align-items:flex-start; gap:12px }
}

/* ─────────────────────────────────────────────────────────────
   README index (GitHub Pages default theme renders README.md as
   the / index with .container-lg / .markdown-body wrappers). Our
   stylesheet sits at the theme's assets/css/style.css path, so we
   restore spacing here and style it to match the editorial pages.
   ───────────────────────────────────────────────────────────── */
.container-lg{
  max-width:820px;
  margin:0 auto;
  padding:0 32px;
}
.my-5{ margin-top:72px; margin-bottom:72px; }
@media (max-width:680px){
  .container-lg{ padding:0 22px; }
  .my-5{ margin-top:48px; margin-bottom:56px; }
}

.markdown-body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  color:color-mix(in oklab, var(--paper) 88%, transparent);
}
.markdown-body > *:first-child{ margin-top:0 }

.markdown-body h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(44px, 8vw, 84px);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--paper);
  margin:0 0 8px;
}
.markdown-body h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px, 4vw, 36px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--paper);
  margin:56px 0 16px;
}
.markdown-body h3{
  font-family:var(--display);
  font-weight:400;
  font-size:22px;
  line-height:1.2;
  color:var(--paper);
  margin:36px 0 12px;
}
.markdown-body p{ margin:0 0 18px }
.markdown-body strong{ color:var(--paper); font-weight:600 }
.markdown-body em{ color:var(--muted); font-style:italic }
.markdown-body a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:.5px }
.markdown-body a:hover{ color:var(--paper) }

.markdown-body ul, .markdown-body ol{ margin:0 0 18px; padding-left:1.3em }
.markdown-body li{ margin:7px 0 }
.markdown-body li::marker{ color:var(--accent) }

.markdown-body img{ max-width:100%; height:auto; border-radius:10px }
.markdown-body p[align="center"]{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }

.markdown-body hr{
  border:0;
  border-top:.5px solid var(--rule-strong);
  margin:48px 0;
}
.markdown-body code{
  font-family:var(--mono);
  font-size:.86em;
  background:rgba(243,239,230,.07);
  border:.5px solid var(--rule);
  border-radius:5px;
  padding:.12em .4em;
}
.markdown-body pre{
  font-family:var(--mono);
  font-size:13px;
  background:rgba(243,239,230,.05);
  border:.5px solid var(--rule);
  border-radius:10px;
  padding:18px 20px;
  overflow-x:auto;
  margin:0 0 20px;
}
.markdown-body pre code{ background:none; border:0; padding:0 }
.markdown-body blockquote{
  margin:24px 0;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--accent);
  color:var(--muted);
  font-style:italic;
}
.markdown-body table{
  width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px;
}
.markdown-body th, .markdown-body td{
  text-align:left; padding:10px 12px;
  border-bottom:.5px solid var(--rule);
}
.markdown-body th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}