/* Global theme */
:root {
  --bg:#ffffff; --fg:#111111; --muted:#666; --link:#ff6a00; --border:#e5e5e5; --accent:#ff6a00;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body, html, button, a, input, textarea {
  font-family:'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.55; font-size:15px; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Layout */
.container { max-width:980px; margin:0 auto; padding:24px 16px 60px; }

/* Typography */
h1,h2,h3,h4 { font-weight:700; line-height:1.25; margin:1.4em 0 .6em; }
h1 { font-size:30px; }
/* Increased spacing after nav to first headline */
.container > header:first-of-type h1 { margin-top:1.15em; }
h2 { font-size:22px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
h3 { font-size:18px; }
h4 { font-size:16px; }
p, ul, ol, blockquote, pre { margin:1em 0; }
ul:not(nav ul):not(.plain) { padding-inline-start:1em; list-style-type:"*\2002"; }
blockquote { border-left:3px solid var(--border); padding:.6em 1em; color:var(--muted); margin:1.4em 0; }
code, pre { background:rgba(127,127,127,0.08); border:1px solid var(--border); font-size:13px; }
code { padding:0.15em .4em; }
pre { padding:14px; overflow:auto; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th,td { border:1px solid var(--border); padding:6px 8px; text-align:left; }
hr { border:0; border-top:1px solid var(--border); margin:3rem 0 2.2rem; }

/* Navigation */
.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.dot { width:22px; height:22px; border-radius:999px; background:var(--fg); display:inline-block; }
.links { display:flex; gap:14px; align-items:center; }
.nav a { color:#000 !important; font-weight:700; }
.mobile-toggle { display:none; }
@media (max-width:720px) { .links { display:none; } .mobile-toggle { display:block; } #mobileMenu { display:none; } #mobileMenu.open { display:block; } }

/* Mobile menu extracted from inline style */
#mobileMenu { display:none; flex-direction:column; align-items:flex-start; gap:10px; margin:10px 0; border-bottom:1px solid var(--border); padding-bottom:10px; }
#mobileMenu.open { display:flex; }


/* Articles list */
ul.article-list { list-style:none; padding:0; margin:1.2em 0 2.4em; }
ul.article-list li + li { margin-top:18px; }
.article-card { border:1px solid var(--border); padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
.article-card h3 { margin:0; font-size:18px; }
.article-card p { margin:0; color:var(--muted); font-size:13px; }
.search { margin:1.2em 0 1.8em; }
.search input { width:100%; padding:10px 12px; border:1px solid var(--border); background:#fff; font-size:14px; }

/* Misc */
footer { margin-top:60px; font-size:12px; color:var(--muted); }
.loading { color:var(--muted); margin-top:40px; }
.error-box { border:1px solid var(--border); padding:18px 20px; background:rgba(127,127,127,0.08); margin-top:30px; }
.toc { background:rgba(127,127,127,0.08); border:1px solid var(--border); padding:16px 18px; margin:1.5em 0 2em; }
.toc ul { list-style:none; padding-left:0; margin:0; }
.toc li { margin:4px 0; }

/* Utility */
.hidden { display:none !important; }

/* Hero & sections */
.hero h1 { margin-top:0.6em; }
.dot-fill{ border:none; width:100%; height:8px; padding:0; background-image:radial-gradient(circle at 1.5px 1.5px, var(--border) 1.5px, transparent 1.8px); background-size:10px 10px; background-repeat:repeat-x; background-position:0 3px; }
/* Apply dot-fill style to markdown-generated horizontal rules inside articles */
article hr { border:none; width:100%; height:8px; padding:0; background-image:radial-gradient(circle at 1.5px 1.5px, var(--border) 1.5px, transparent 1.8px); background-size:10px 10px; background-repeat:repeat-x; background-position:0 3px; }

.quote {
  border-left:3px solid var(--accent);
  padding:.2em 1em;
  color:var(--muted);
  margin:1.6em 0;
}