/* Soundproof blog — shared styles (linked by /blog/ index + every post) */
:root{
  --paper:#fbfbf9; --ink:#161a20; --ink-soft:#eef1f5; --muted:#6b7280;
  --line:#dce0e6; --card:#ffffff;
  --accent:#1591cc; --accent-soft:#38a9dd; --signal:#1591cc; --noise:#dd3b2f;
  --green:#1f9d63; --warn:#b7791f; --slate-1:#333f52; --slate-2:#19212d;
  --xs:0.82rem; --sm:0.95rem; --md:1.08rem;
  --content:720px; --wide:1180px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
html[data-theme="dark"]{
  --paper:#0e1116; --ink:#eef1f5; --ink-soft:#151a22; --muted:#98a1ad;
  --line:#242b35; --card:#151a22; --accent:#45c4ff; --accent-soft:#6fd2ff;
  --signal:#45c4ff; --noise:#ff5347; --green:#37c07f; --warn:#d99a2b;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--md); line-height:1.68;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.006em;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;}
h1,h2,h3{font-weight:700; letter-spacing:-0.03em; line-height:1.14; margin:0;}
p{margin:0; text-wrap:pretty;}
a{color:var(--accent); text-decoration:none;} a:hover{text-decoration:underline;}
.prose p a, .prose li a{text-decoration:underline;}
img{max-width:100%; display:block; height:auto;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 28px;}
.narrow{max-width:var(--content); margin:0 auto; padding:0 28px;}
.kicker{font-family:var(--mono); font-size:var(--xs); letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;}

/* header */
header.site{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; height:64px;}
.wordmark{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-0.01em; font-size:1.16rem; color:var(--ink);}
.wordmark:hover{text-decoration:none;}
.wordmark img{width:36px; height:36px; border-radius:9px; display:block;}
header.site .wordmark{font-size:1.26rem;}
header.site .wordmark img{width:46px; height:46px; border-radius:11px;}
nav.main{display:flex; gap:30px;}
nav.main a{font-size:var(--sm); color:var(--muted); font-weight:500;}
nav.main a:hover{color:var(--ink); text-decoration:none;}
nav.main a[aria-current]{color:var(--ink);}
.head-right{display:flex; align-items:center; gap:14px;}
.toggle{width:38px; height:38px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer;}
.toggle:hover{border-color:var(--muted);}
.toggle svg{width:18px; height:18px;}
html[data-theme="dark"] .ic-sun{display:none;} html[data-theme="light"] .ic-moon{display:none;}
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  font-weight:700; font-size:var(--sm); padding:12px 20px; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--accent); color:#fff;} .btn-primary:hover{background:var(--accent-soft); text-decoration:none;}
@media(max-width:860px){ nav.main{display:none;} }

/* footer (matches homepage) */
footer.site{border-top:1px solid var(--line); padding:64px 0 48px;}
.foot-top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px;}
.foot-top .desc{color:var(--muted); font-size:var(--sm); margin-top:12px; max-width:260px;}
.fcol h4{font-size:var(--xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  font-family:var(--mono); margin-bottom:14px; font-weight:600;}
.fcol a{display:block; font-size:var(--sm); color:var(--ink); margin-bottom:9px;}
.fcol a:hover{color:var(--accent);}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted); font-size:var(--xs); display:flex; gap:10px; flex-wrap:wrap;}
@media(max-width:760px){ .foot-top{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .foot-top{grid-template-columns:1fr; gap:28px;} }

/* ============ blog index ============ */
.blog-hero{padding:72px 0 34px;}
.blog-hero h1{font-size:clamp(2.4rem,5vw,3.7rem); max-width:15ch;}
.blog-hero .lead{font-size:1.16rem; color:var(--muted); max-width:60ch; margin-top:20px;}
.feed{padding:14px 0 90px;}
.eyebrow{font-family:var(--mono); font-size:var(--xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 22px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(316px,1fr)); gap:24px;}
.card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; background:var(--card); transition:border-color .2s ease, transform .2s ease;}
.card:hover{border-color:var(--accent); transform:translateY(-3px); text-decoration:none;}
.card:hover h2, .card:hover p, .card:hover .meta{text-decoration:none;}
.card .thumb{position:relative; aspect-ratio:16/10; background:var(--slate-2);
  display:grid; place-items:center; overflow:hidden;}
.card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.card .thumb svg{width:74%; height:74%;}
.card .body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:11px; flex:1;}
.tag{align-self:flex-start; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:5px 11px;}
.card h2{font-size:1.24rem; line-height:1.18;}
.card p{color:var(--muted); font-size:.98rem; flex:1;}
.card .meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase;}
.card .readmore{color:var(--accent); font-weight:700; font-size:var(--sm); display:inline-flex; align-items:center; gap:7px;}
.card:hover .readmore{gap:11px; transition:gap .15s ease;}
.featured-tip{grid-column:1/-1; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.upcoming{margin-top:64px;}
.upcoming h3{font-size:1.28rem; margin-bottom:6px;}
.upcoming .sub{color:var(--muted); font-size:var(--sm); margin-bottom:22px;}
.ulist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.ulist li{display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); color:var(--ink);}
.ulist .n{font-family:var(--mono); font-size:.8rem; color:var(--accent); min-width:26px;}
.ulist .soon{margin-left:auto; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px; white-space:nowrap;}

/* ============ article ============ */
.crumb{font-family:var(--mono); font-size:var(--xs); color:var(--muted); letter-spacing:.04em; padding:26px 0 0;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--accent);}
article{padding:20px 0 40px;}
.art-head{padding:8px 0 4px;}
.art-head h1{font-size:clamp(2.15rem,4.6vw,3.15rem); max-width:22ch;}
.art-meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:20px;}
.art-meta .dot{opacity:.5;}
.hero-fig{margin:34px auto 8px;}
.hero-fig .frame{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--slate-2); max-height:520px;}
.hero-fig img{width:100%; height:100%; max-height:520px; object-fit:cover; object-position:50% 30%;}
figcaption{font-size:var(--xs); color:var(--muted); margin-top:10px; text-align:center;}

/* prose */
.prose{font-size:1.11rem;}
.prose > p{margin:0 0 1.25rem;}
.prose h2{font-size:1.62rem; margin:2.6rem 0 .9rem;}
.prose h3{font-size:1.2rem; margin:1.8rem 0 .5rem;}
.prose ul,.prose ol{margin:0 0 1.3rem; padding-left:1.3rem;}
.prose li{margin:.45rem 0;}
.prose strong{font-weight:700;}
.prose img{border-radius:14px; border:1px solid var(--line);}
.prose figure{margin:1.8rem 0;}
.lead-p{font-size:1.24rem; color:var(--muted); line-height:1.5; margin:0 0 1.6rem;}

/* TL;DR */
.tldr{background:var(--ink-soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:20px 24px; margin:0 0 2.2rem;}
.tldr .lbl{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.tldr p{margin:0; font-size:1.02rem;}

/* steps */
.steps{list-style:none; counter-reset:s; padding:0; margin:1.4rem 0 1.6rem;}
.steps li{counter-increment:s; position:relative; padding:0 0 1.25rem 52px; margin:0;}
.steps li::before{content:counter(s); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:999px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:.95rem; display:grid; place-items:center;}
.steps li:not(:last-child)::after{content:""; position:absolute; left:16px; top:36px; bottom:6px; width:2px; background:var(--line);}
.steps b{font-weight:700;}

/* diagrams */
.diagram{margin:2rem 0; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:26px 24px 18px;}
.diagram .d-title{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; text-align:center;}
.diagram svg{width:100%; height:auto; display:block;}

/* callouts */
.note{border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:1.6rem 0; background:var(--card); font-size:1.02rem;}
.note .h{font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:6px;}
.note.tip{border-left:3px solid var(--green);}
.note.warn{border-left:3px solid var(--warn);}

/* honest-limits two-col */
.limits{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:1.6rem 0;}
.limits .col{border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--card);}
.limits .col.ok{border-top:3px solid var(--signal);}
.limits .col.vary{border-top:3px solid var(--noise);}
.limits h4{margin:0 0 4px; font-size:1.02rem; display:flex; align-items:center; gap:8px;}
.limits .cap{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.limits ul{margin:0; padding-left:1.15rem;} .limits li{margin:.4rem 0; font-size:.98rem;}
@media(max-width:640px){ .limits{grid-template-columns:1fr;} }

/* comparison table */
.ctable{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.98rem; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.ctable th,.ctable td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);}
.ctable thead th{background:var(--ink-soft); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.ctable tbody tr:last-child td{border-bottom:none;}
.ctable td:first-child{font-weight:600;}
.ctable .yes{color:var(--green); font-weight:700;} .ctable .no{color:var(--noise); font-weight:700;}

/* CTA */
.cta{margin:3rem 0 1rem; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,var(--card)), var(--card));}
.cta .inner{padding:34px 34px;}
.cta h3{font-size:1.5rem; margin-bottom:8px;}
.cta p{color:var(--muted); margin-bottom:20px; max-width:52ch;}
.cta .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.cta .fine{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:14px; letter-spacing:.03em;}

/* FAQ */
.faq details{border:1px solid var(--line); border-radius:12px; padding:2px 20px; margin:12px 0; background:var(--card);}
.faq summary{cursor:pointer; font-weight:700; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--accent); font-weight:700; font-size:1.3rem;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 0 16px; color:var(--muted);}

/* related */
.related{border-top:1px solid var(--line); margin-top:40px; padding-top:26px;}
.related h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
.related a{display:block; padding:6px 0; font-weight:600;}

@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto;} .card:hover{transform:none;} }