/* Confer docs — shared theme, matches the landing page (ink & amber) */
:root{
  --ink:#100e0c; --ink-2:#171411; --ink-3:#201b16;
  --paper:#f3ece0; --paper-dim:#a99c89; --paper-faint:#6f6557;
  --amber:#e6a23c; --amber-soft:#f3c982; --sage:#93b29c;
  --line:rgba(243,236,224,.11); --line-2:rgba(243,236,224,.06);
  --display:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:18px; line-height:1.68; font-weight:380; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(720px 460px at 88% -10%, rgba(230,162,60,.10), transparent 60%);
}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono)}

/* nav (shared with landing) */
nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(11px);
  background:linear-gradient(var(--ink),rgba(16,14,12,.72)); border-bottom:1px solid var(--line);
}
.nav-in{max-width:1180px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{display:flex; align-items:baseline; gap:.55em; font-family:var(--display); font-size:25px; font-weight:500; letter-spacing:-.01em; color:var(--paper)}
.brand .dot{width:8px; height:8px; border-radius:50%; background:var(--amber); align-self:center; box-shadow:0 0 14px 2px rgba(230,162,60,.6)}
.nav-links{display:flex; gap:24px; font-family:var(--mono); font-size:13px; color:var(--paper-dim)}
.nav-links a{transition:color .2s} .nav-links a:hover{color:var(--paper)}
@media(max-width:720px){.nav-links a.hide-sm{display:none}}

/* doc shell: sidebar + article */
.doc-shell{max-width:1180px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:248px 1fr; gap:54px; position:relative; z-index:1}
@media(max-width:900px){.doc-shell{grid-template-columns:1fr; gap:0}}
.doc-nav{position:sticky; top:68px; align-self:start; padding:46px 0 40px; max-height:calc(100vh - 68px); overflow-y:auto}
@media(max-width:900px){.doc-nav{position:static; max-height:none; padding:30px 0 6px; border-bottom:1px solid var(--line)}}
.doc-nav .label{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:18px; display:block}
.doc-nav a{display:block; font-family:var(--mono); font-size:13.5px; color:var(--paper-dim); padding:8px 12px; border-left:2px solid transparent; transition:all .18s; border-radius:0 3px 3px 0}
.doc-nav a:hover{color:var(--paper); background:var(--ink-2)}
.doc-nav a.on{color:var(--amber-soft); border-left-color:var(--amber); background:var(--ink-2)}
.doc-nav a .n{color:var(--paper-faint); margin-right:9px}
.doc-nav a.on .n{color:var(--amber)}

/* article (rendered markdown) */
.doc{padding:54px 0 90px; min-width:0}
.doc-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:8px; display:flex; align-items:center; gap:.7em}
.doc-eyebrow::before{content:""; width:24px; height:1px; background:var(--amber); opacity:.7}
.doc h1{font-family:var(--display); font-weight:400; font-size:clamp(34px,5vw,52px); letter-spacing:-.025em; line-height:1.04; margin:0 0 30px; padding-bottom:28px; border-bottom:1px solid var(--line)}
.doc h2{font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.01em; margin:52px 0 16px}
.doc h3{font-family:var(--display); font-weight:500; font-size:22px; margin:36px 0 12px; color:var(--amber-soft)}
.doc h4{font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-dim); margin:28px 0 10px}
.doc p{margin:0 0 18px; color:var(--paper)}
.doc a{color:var(--amber); text-decoration:underline; text-decoration-color:rgba(230,162,60,.35); text-underline-offset:3px; transition:text-decoration-color .2s}
.doc a:hover{text-decoration-color:var(--amber)}
.doc strong{color:var(--paper); font-weight:600}
.doc em{color:var(--amber-soft)}
.doc ul,.doc ol{margin:0 0 20px; padding-left:1.4em; color:var(--paper)}
.doc li{margin:7px 0}
.doc li::marker{color:var(--amber)}
.doc blockquote{margin:22px 0; padding:6px 22px; border-left:2px solid var(--amber); background:rgba(230,162,60,.05); color:var(--paper-dim); font-style:italic}
.doc hr{border:none; border-top:1px solid var(--line); margin:44px 0}
.doc code{font-family:var(--mono); font-size:.86em; background:var(--ink-3); color:var(--sage); padding:2px 6px; border-radius:3px}
.doc pre{background:#0a0907; border:1px solid var(--line); border-radius:6px; padding:20px 22px; overflow-x:auto; margin:0 0 22px}
.doc pre code{background:none; color:var(--paper); padding:0; font-size:13.5px; line-height:1.8}
.doc table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15.5px; display:block; overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line); padding:10px 14px; text-align:left}
.doc th{font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--amber); background:var(--ink-2)}
.doc td{color:var(--paper-dim)}
.doc img{max-width:100%; border-radius:6px; border:1px solid var(--line)}
.doc-foot{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:13px; color:var(--paper-faint)}
.doc-foot a{color:var(--paper-dim)} .doc-foot a:hover{color:var(--amber)}

/* footer (shared) */
footer{border-top:1px solid var(--line); padding:54px 0; position:relative; z-index:1}
.foot-in{max-width:1180px; margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:12px; color:var(--paper-faint)}
.foot-in a{color:var(--paper-dim)} .foot-in a:hover{color:var(--amber)}