/* Blog styles — prose layout for /blog pages.
   Builds on /styles.css (tokens, header/footer, glass pills, responsive restacking).
   Only what long-form reading needs lives here. */

.eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: 'IBM Plex Mono', monospace;
           font-size: 12.5px; font-weight: 500; letter-spacing: .2em; color: #A8CD4A; }
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #A8CD4A; display: inline-block; }

.crumbs { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: rgba(242,242,242,.4); }
.meta   { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: rgba(242,242,242,.45); }

.post-title { font-weight: 700; letter-spacing: -.03em; font-size: clamp(40px, 6.4vw, 96px); line-height: .98;
              margin: 36px 0 0; max-width: 16ch; text-wrap: balance; }
.lede { margin: 32px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.65; color: rgba(242,242,242,.7); text-wrap: pretty; }
.disclosure { margin: 28px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 1.7; color: rgba(242,242,242,.5); text-wrap: pretty; }

/* ---------- Prose column ---------- */
.post { max-width: 72ch; }
.post p  { margin: 0 0 24px; font-size: 17px; line-height: 1.75; color: rgba(242,242,242,.72); text-wrap: pretty; }
.post strong { color: #F2F2F2; font-weight: 600; }
.post a  { color: #F2F2F2; border-bottom: 1px solid rgba(168,205,74,.5); }
.post a:hover { color: #A8CD4A; border-bottom-color: #A8CD4A; }
.post h2 { font-weight: 700; letter-spacing: -.025em; font-size: clamp(30px, 4vw, 48px); line-height: 1.05;
           margin: 96px 0 28px; text-wrap: balance; }
.post h2:first-child { margin-top: 0; }
.post h3 { font-weight: 600; letter-spacing: -.01em; font-size: 22px; line-height: 1.25; margin: 44px 0 14px; }
.post ul, .post ol { margin: 0 0 28px; padding: 0; list-style: none; }
.post li { position: relative; padding: 6px 0 6px 30px; font-size: 17px; line-height: 1.7; color: rgba(242,242,242,.72); }
.post ul > li::before { content: "+"; position: absolute; left: 4px; top: 11px; font-family: 'IBM Plex Mono', monospace;
                        font-size: 12px; color: #A8CD4A; }
.post ol { counter-reset: step; }
.post ol > li { counter-increment: step; }
.post ol > li::before { content: counter(step); position: absolute; left: 0; top: 10px; font-family: 'IBM Plex Mono', monospace;
                        font-size: 12px; color: #A8CD4A; }

.callout { background: #0A0A0A; border-left: 2px solid #A8CD4A; padding: 24px 28px 8px; margin: 0 0 8px; }
.callout .label { display: block; margin-bottom: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
                  letter-spacing: .16em; color: #A8CD4A; }

/* ---------- Figures ---------- */
.fig { margin: 48px 0 0; border: 1px solid rgba(255,255,255,.12); background: #0A0A0A; }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-family: 'IBM Plex Mono', monospace;
                  font-size: 10.5px; letter-spacing: .12em; line-height: 1.6; color: rgba(242,242,242,.45); }

/* ---------- Comparison table (wider than the prose column) ---------- */
.cmp-row  { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1.25fr); gap: 28px;
            padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15.5px; line-height: 1.6;
            color: rgba(242,242,242,.72); }
.cmp-head { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-family: 'IBM Plex Mono', monospace;
            font-size: 10.5px; letter-spacing: .16em; color: rgba(242,242,242,.45); }
.cmp-row > span:first-child { color: #F2F2F2; font-weight: 600; }
.cmp-row .dim { color: rgba(242,242,242,.42); }
.cmp-row .win { color: #A8CD4A; }

/* ---------- Who-should-pick grid ---------- */
.pick { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.12); margin-top: 40px; }
.pick > div { background: #050505; padding: 34px 30px 38px; }
.pick > div.featured { background: #0A0A0A; box-shadow: inset 0 1px 0 #A8CD4A; }
.pick h3 { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pick p  { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(242,242,242,.6); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid rgba(255,255,255,.12); margin-top: 8px; }
.faq-item { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 40px; padding: 34px 0;
            border-bottom: 1px solid rgba(255,255,255,.12); }
.faq-item h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.faq-item p  { margin: 0; font-size: 15.5px; line-height: 1.75; color: rgba(242,242,242,.62); text-wrap: pretty; }
.faq-item a  { color: #F2F2F2; border-bottom: 1px solid rgba(168,205,74,.5); }

.sources { font-size: 14px; line-height: 1.8; color: rgba(242,242,242,.5); }
.sources a { color: rgba(242,242,242,.72); border-bottom: 1px solid rgba(255,255,255,.2); }
.sources a:hover { color: #A8CD4A; }

/* ---------- Blog index cards ---------- */
.post-card { display: grid; grid-template-columns: minmax(0,.28fr) minmax(0,1.72fr); gap: 48px; padding: 48px 0;
             border-top: 1px solid rgba(255,255,255,.12); }
.post-card:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.post-card h2 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.post-card h2 a:hover { color: #A8CD4A; }
.post-card p { margin: 18px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.75; color: rgba(242,242,242,.62); text-wrap: pretty; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pick { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .faq-item, .post-card { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .post-card { gap: 18px; }
  .post h2 { margin-top: 72px; }
  .lede { font-size: 17.5px; }
  .post p, .post li { font-size: 16.5px; }
}