/* Not Your Average Business Network - dark grey theme.
   Measured WCAG contrast ratios (text on #121212 / #1b1b1b / #242424):
   body #e6e6e6: 15.01 / 13.80 / 12.44
   muted #a3a3a3:  7.43 /  6.83 /  6.15
   links #7aa2c7:  6.98 /  6.41 /  5.78
   All pass AA (4.5:1). */
:root{--bg:#121212;--bg2:#1b1b1b;--bg3:#242424;--text:#e6e6e6;--muted:#a3a3a3;--accent:#7aa2c7;--line:#333}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:#fff}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 1rem}
header.site{background:var(--bg2);border-bottom:1px solid var(--line)}
header.site .wrap{padding-top:.8rem;padding-bottom:.8rem}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}
nav ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}
main{padding:1.5rem 0 3rem}
h1{font-size:1.9rem;line-height:1.25;margin:.5rem 0 1rem}
h2{font-size:1.35rem;line-height:1.3;margin:2rem 0 .6rem}
h3{font-size:1.1rem;margin:1.5rem 0 .4rem}
p,ul,ol{margin:0 0 1rem}
.lead{font-size:1.15rem;color:var(--muted)}
.hero{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1.2rem 1.2rem .4rem;margin-bottom:1.5rem}
.tip-list{list-style:none;padding:0}
.tip-list li{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:.8rem 1rem;margin-bottom:.7rem}
.tip-list a{font-weight:600}
.meta,.tip-list .desc{color:var(--muted);font-size:.9rem;margin:.2rem 0 0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0}
.tags a{display:inline-block;background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:.1rem .7rem;font-size:.9rem;text-decoration:none}
code,pre{background:var(--bg3);border-radius:4px;font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{padding:.1em .3em}
pre{padding:.8rem;overflow-x:auto}
footer.site{background:var(--bg2);border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:1.2rem 0}
@media(min-width:700px){h1{font-size:2.2rem}.wrap{padding:0 1.5rem}}

/* Sapper touch (one per page) */
.byline{color:#a3a3a3;font-size:.9em;margin:-.25em 0 1.25em}
.ask{margin:2.5em 0 1.5em;padding:1em 1.25em;background:#1b1b1b;border:1px solid #2e2e2e;border-left:3px solid #7aa2c7;border-radius:6px}
.ask h2{margin:0 0 .35em;font-size:1.05em}
.ask p{margin:.35em 0}

/* v1.1 polish (Tzuriel #12082: "about 10 percent prettier", function over form). CSS only, same markup. */
::selection{background:#2f4a63;color:#fff}
h1,h2,h3{letter-spacing:-.01em}
h1{font-weight:750}
main .wrap > p, main .wrap > ul, main .wrap > ol{max-width:70ch}
main h2{padding-top:.9rem;border-top:1px solid #262626}
main .ask h2, .hero h2{border-top:0;padding-top:0}
li{margin-bottom:.3rem}
li::marker{color:var(--muted)}
blockquote{margin:1rem 0;padding:.2rem 1rem;border-left:3px solid var(--line);color:var(--muted)}
/* wordmark: a small steel square before the name */
.brand{display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.01em}
.brand::before{content:"";width:.8rem;height:.8rem;border-radius:2px;background:linear-gradient(135deg,#7aa2c7,#4b6a86);flex:none}
nav a{color:#c7d3de}
nav a:hover{color:#fff}
/* hero + cards: a touch of depth, quiet hover */
.hero{background:linear-gradient(180deg,#1d1d1d,#191919);border-color:#2c2c2c;border-radius:10px}
.tip-list li{border-radius:10px;border-color:#2e2e2e;transition:border-color .15s ease,background-color .15s ease}
.tip-list li:hover{border-color:#4b6a86;background:#272727}
.tip-list a{text-decoration:none;color:#9ec0de}
.tip-list a:hover{text-decoration:underline;color:#fff}
.tip-list .pill{display:inline-block;margin-left:.45rem;padding:0 .5rem;border:1px solid #3a3a3a;border-radius:999px;font-size:.75rem;color:var(--muted);vertical-align:.1em}
.tags a{font-size:.8rem;color:var(--muted);border-color:#3a3a3a}
.tags a:hover{color:#fff;border-color:#4b6a86}
.ask{border-radius:10px;border-left-color:#4b6a86}
footer.site a{color:#c7d3de}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}