/* Boomstick Diagnostics — site-wide stylesheet (report design system) */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#fafbfc; --ink:#17212e; --muted:#5c6875;
  --line:#e3e8ee; --line2:#eef1f5; --navy:#1b3a5c;
  --m1:#7857a6; --m2:#2f6aa8; --m3:#0e7c7c; --rose:#a83a68; --slate:#42506a;
  --shadow:0 1px 2px rgba(20,35,55,.05),0 3px 10px rgba(20,35,55,.04);
  /* brand — sampled from the Boomstick logo */
  --brass-raw:#B48E41;   /* logo outline gold, exact */
  --green-raw:#6CF600;   /* logo pulse green, exact */
  --brass:#8a6c2c;       /* brass tuned for text on this theme */
  --green:#4a9e00;       /* green tuned for text on this theme */
  --tag-g:#4a9e00; --glow:none;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1319; --panel:#191f28; --panel2:#161b23; --ink:#e7ecf2; --muted:#95a1b1;
    --line:#29313c; --line2:#222932; --navy:#84acdb;
    --m1:#a98bd6; --m2:#6fa0d6; --m3:#4ec5bd; --rose:#d685aa; --slate:#9aa8c2;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --brass:#c9a45a; --green:#84e83c;
    --tag-g:#6CF600; --glow:0 0 22px rgba(108,246,0,.45);
  }
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#fafbfc; --ink:#17212e; --muted:#5c6875;
  --line:#e3e8ee; --line2:#eef1f5; --navy:#1b3a5c;
  --m1:#7857a6; --m2:#2f6aa8; --m3:#0e7c7c; --rose:#a83a68; --slate:#42506a;
  --shadow:0 1px 2px rgba(20,35,55,.05),0 3px 10px rgba(20,35,55,.04);
  --brass:#8a6c2c; --green:#4a9e00;
  --tag-g:#4a9e00; --glow:none;
}
:root[data-theme="dark"]{
  --bg:#0f1319; --panel:#191f28; --panel2:#161b23; --ink:#e7ecf2; --muted:#95a1b1;
  --line:#29313c; --line2:#222932; --navy:#84acdb;
  --m1:#a98bd6; --m2:#6fa0d6; --m3:#4ec5bd; --rose:#d685aa; --slate:#9aa8c2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --brass:#c9a45a; --green:#84e83c;
  --tag-g:#6CF600; --glow:0 0 22px rgba(108,246,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); font-variant-numeric:tabular-nums}

/* ---- top navigation: follows the page theme ---- */
.topbar{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .in{max-width:1020px; margin:0 auto; padding:10px 28px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.wordmark{font-weight:800; letter-spacing:.03em; font-size:15px; color:var(--ink);
  text-decoration:none; white-space:nowrap}
.wordmark .bd{color:var(--brass)}
nav.site{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
nav.site a{font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:6px 11px; border-radius:8px}
nav.site a:hover{color:var(--ink); background:color-mix(in srgb,var(--green) 13%,transparent)}
.theme-btn{border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:8px; padding:5px 10px; font:600 12px system-ui,sans-serif; cursor:pointer}
.theme-btn:hover{color:var(--brass); border-color:var(--brass)}

/* ---- hero: follows the page theme; logo variant swaps with it ---- */
.hero-band{background:var(--bg); color:var(--ink)}
.hero-band .in{max-width:1020px; margin:0 auto; padding:52px 28px 0}
.hero-logo{display:block; width:min(760px,100%); height:auto; margin:0 auto 36px}
.hero-logo.darkv{display:none}
@media (prefers-color-scheme:dark){
  .hero-logo.lightv{display:none}
  .hero-logo.darkv{display:block}
}
:root[data-theme="light"] .hero-logo.lightv{display:block}
:root[data-theme="light"] .hero-logo.darkv{display:none}
:root[data-theme="dark"] .hero-logo.lightv{display:none}
:root[data-theme="dark"] .hero-logo.darkv{display:block}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:700; margin:0 0 12px}
h1.tagline{font-size:clamp(32px,5.2vw,54px); line-height:1.06; letter-spacing:-.02em;
  margin:0 0 16px; text-wrap:balance; font-weight:800}
h1.tagline .w{color:var(--ink)}
h1.tagline .b{color:var(--brass)}
h1.tagline .g{color:var(--tag-g); text-shadow:var(--glow)}
.lede{margin:0 0 18px; color:var(--muted); font-size:17px; max-width:62ch}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.chip{font-size:12px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); border-radius:20px; padding:4px 12px;
  background:var(--panel)}
.chip.rev{color:var(--brass); border-color:color-mix(in srgb,var(--brass) 45%,transparent);
  background:color-mix(in srgb,var(--brass) 10%,transparent); font-weight:700}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 30px}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:10px}
.btn.go{background:var(--green-raw); color:#0b0d08}
.btn.go:hover{background:#85ff2b}
.btn.ghost-dark{color:var(--ink); border:1px solid var(--line)}
.btn.ghost-dark:hover{border-color:var(--brass); color:var(--brass)}

.wrap{max-width:1020px; margin:0 auto; padding:0 28px 80px}

/* ---- stat strip ---- */
.stat-strip{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:var(--panel);
  box-shadow:var(--shadow); margin:0 0 8px}
.stat{flex:1 1 150px; padding:14px 18px; border-right:1px solid var(--line2)}
.stat:last-child{border-right:0}
.stat .n{font-size:22px; font-weight:800; line-height:1.15; letter-spacing:-.01em}
.stat .l{font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin-top:5px; line-height:1.35}
.stat.brass .n{color:var(--brass)}
.stat.green .n{color:var(--green)}
.after-strip{font-size:12.5px; color:var(--muted); max-width:78ch; margin-top:10px}

/* ---- sections (report design system) ---- */
.shead{display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  margin:64px 0 6px; padding-bottom:10px;
  border-bottom:2px solid var(--acc,var(--navy))}
.shead h2{font-size:22px; margin:0; letter-spacing:-.01em; font-weight:800}
.mtag{font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 10px; border-radius:6px;
  color:var(--acc,var(--navy));
  background:color-mix(in srgb,var(--acc,var(--navy)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--acc,var(--navy)) 30%,transparent);
  margin-left:auto}
section.m1{--acc:var(--m1)} section.m2{--acc:var(--m2)}
section.m3{--acc:var(--m3)} section.rose{--acc:var(--rose)}
section.slate{--acc:var(--slate)} section.blue{--acc:var(--navy)}
section.brass{--acc:var(--brass)} section.green{--acc:var(--green)}
p{font-size:14.5px; margin:10px 0 14px; max-width:72ch}
p.note{font-size:12.5px; color:var(--muted); max-width:78ch; margin-top:6px}
.callout{border-left:3px solid var(--acc,var(--navy));
  background:color-mix(in srgb,var(--acc,var(--navy)) 7%,var(--panel));
  border-radius:0 12px 12px 0; padding:14px 18px; margin:16px 0}
.callout p{margin:0; max-width:none}

/* ---- card grid ---- */
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px; margin:18px 0}
.fcard{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 18px 16px; position:relative;
  border-top:3px solid color-mix(in srgb,var(--acc,var(--navy)) 55%,var(--line))}
.fcard h4{font-size:15px; margin:0 0 8px; font-weight:750; line-height:1.3}
.fcard p{font-size:13px; margin:0; color:var(--muted); max-width:none}
a.fcard{display:block; text-decoration:none; color:inherit}
a.fcard:hover{border-color:color-mix(in srgb,var(--acc,var(--navy)) 50%,var(--line));
  box-shadow:0 2px 6px rgba(20,35,55,.08),0 6px 18px rgba(20,35,55,.07)}
.fcard .fdate{font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; margin:0 0 6px}

/* ---- method list ---- */
ol.method{margin:14px 0; padding-left:0; list-style:none; counter-reset:step}
ol.method li{counter-increment:step; display:flex; gap:14px; padding:12px 0;
  border-top:1px solid var(--line2); max-width:74ch}
ol.method li:first-child{border-top:0}
ol.method li::before{content:counter(step,decimal-leading-zero);
  font-weight:800; font-size:15px; color:var(--acc,var(--navy)); flex-shrink:0;
  width:32px; padding-top:1px}
ol.method li>div{flex:1}
ol.method b{display:block; font-size:14px; margin-bottom:2px}
ol.method span{font-size:13px; color:var(--muted)}

/* ---- contact ---- */
.contact-panel{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:24px 26px; margin:18px 0;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.contact-panel .big{font-size:19px; font-weight:800; margin:0 0 4px}
.contact-panel p{margin:0; color:var(--muted); font-size:13.5px}
.btn.primary{background:var(--navy); color:var(--bg)}
.btn.primary:hover{background:color-mix(in srgb,var(--navy) 88%,var(--ink))}

footer{margin-top:64px; padding-top:18px; border-top:2px solid var(--green-raw);
  color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:8px}
footer .tw{font-weight:700}
footer .tw .w{color:var(--ink)}
footer .tw .b{color:var(--brass)}
footer .tw .g{color:var(--green)}

/* ---- posts / articles ---- */
.post-wrap{max-width:840px; margin:0 auto; padding:0 28px 80px}
.crumb{font-size:13px; margin:36px 0 0}
.crumb a{color:var(--muted); text-decoration:none; font-weight:600}
.crumb a:hover{color:var(--brass)}
article.post{--acc:var(--m2)}
article.post h1{font-size:clamp(26px,3.6vw,38px); line-height:1.12;
  letter-spacing:-.02em; margin:10px 0 12px; font-weight:800; text-wrap:balance}
article.post h2{font-size:20px; margin:36px 0 8px; padding-bottom:8px;
  border-bottom:2px solid var(--acc,var(--navy)); letter-spacing:-.01em}
article.post p{font-size:15px}

/* ---- comments ---- */
.comments{margin-top:56px}
.comments .shead{margin-top:0}
.comments-box{background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:18px 20px; margin:14px 0 6px}
.comments-note{font-size:13px; color:var(--muted); margin:0}

@media (max-width:560px){
  .wrap{padding:0 16px 56px}
  .post-wrap{padding:0 16px 56px}
  .hero-band .in{padding:32px 16px 0}
  .topbar .in{padding:8px 16px}
  .hero-logo{margin-bottom:26px}
}