/* ============================================================
   Mikki's Wax Bar — Blog stylesheet
   Layout classes for the /blog hub + articles. Relies on
   design-system.css + site.css for tokens, nav, footer, .faq,
   .container, .section, .display-*, .btn, etc.
   ============================================================ */

/* ---- Hub ------------------------------------------------- */
.blog-list{border-top:1px solid var(--line);margin-top:var(--s-7)}
.bx{display:grid;grid-template-columns:1fr 2fr 220px;gap:var(--s-7);padding:var(--s-7) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background var(--dur-short)}
.bx:hover{background:var(--paper-soft)}
.bx .meta{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);align-self:start;padding-top:var(--s-2)}
.bx .meta .cat{color:var(--accent);display:block;margin-bottom:var(--s-2)}
.bx .body h3{margin:0 0 var(--s-3);font-size:var(--t-display-m);line-height:1.1;font-weight:380;font-variation-settings:'opsz' 44}
.bx .body h3 em{font-style:italic;color:var(--ink-soft);font-weight:340}
.bx .body p{font-family:var(--serif);font-size:var(--t-lede);line-height:1.5;font-weight:360;color:var(--ink-soft);max-width:none;font-variation-settings:'opsz' 32;margin:0}
.bx .read{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);text-align:right;padding-top:var(--s-3)}
.bx .read .ar{display:block;margin-top:var(--s-2);font-family:var(--serif);font-size:24px;color:var(--ink);font-style:normal;transition:transform var(--dur-short)}
.bx:hover .read .ar{transform:translateX(4px)}
@media (max-width:900px){.bx{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-5) 0}.bx .meta{padding-top:0}.bx .read{text-align:left;padding-top:var(--s-2)}}

/* ---- Article header ------------------------------------- */
.note-header{padding:var(--s-9) 0 var(--s-6);border-bottom:1px solid var(--line)}
.note-header .type-chip{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:inline-block;padding:4px 10px;border:1px solid var(--accent);margin-bottom:var(--s-5)}
.note-header h1{font-family:var(--serif);font-size:clamp(34px,4.4vw,56px);line-height:1.1;font-weight:340;font-variation-settings:"opsz" 56;letter-spacing:-0.015em;margin:0 0 var(--s-5);max-width:24ch;text-wrap:balance;color:var(--ink)}
.note-header h1 em{font-style:italic;color:var(--ink-soft);font-weight:320}
.note-meta{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0;display:flex;flex-wrap:wrap;gap:var(--s-3)}
.note-meta .sep{color:var(--line)}

/* ---- Lead answer (GEO extraction target) ---------------- */
.lead-answer-block{padding:var(--s-7) 0;border-bottom:1px solid var(--line)}
.lead-answer-block p{font-family:var(--serif);font-size:clamp(22px,2.6vw,28px);line-height:1.4;font-weight:340;font-variation-settings:"opsz" 36;color:var(--ink);margin:0;max-width:52ch;text-wrap:balance}

/* ---- Key takeaways box ---------------------------------- */
.takeaways{border:1px solid var(--line);background:var(--paper-soft);padding:var(--s-6) var(--s-6);margin:var(--s-7) 0 0}
.takeaways h2{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s-4)}
.takeaways ul{list-style:none;padding:0;margin:0}
.takeaways li{font-family:var(--sans);font-size:var(--t-body-m);color:var(--ink-soft);line-height:1.55;padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft);display:flex;gap:var(--s-3);align-items:baseline}
.takeaways li:last-child{border-bottom:none}
.takeaways li:before{content:"\2014";color:var(--accent);flex-shrink:0}
.takeaways li strong{color:var(--ink);font-weight:600}

/* ---- Prose --------------------------------------------- */
.prose{max-width:none}
.prose h2{font-family:var(--serif);font-size:var(--t-display-m);font-variation-settings:'opsz' 44;font-weight:360;letter-spacing:-0.015em;line-height:1.15;margin:var(--s-8) 0 var(--s-4);color:var(--ink);text-wrap:balance}
.prose h2:first-child{margin-top:var(--s-2)}
.prose h3{font-family:var(--serif);font-size:var(--t-heading);font-variation-settings:'opsz' 32;font-weight:420;margin:var(--s-6) 0 var(--s-3);color:var(--ink)}
.prose p{font-family:var(--sans);font-size:var(--t-body-l);color:var(--ink-soft);line-height:1.7;margin:0 0 var(--s-4);max-width:64ch}
.prose p.first-line{font-family:var(--serif);font-size:var(--t-lede);font-variation-settings:'opsz' 32;font-weight:360;color:var(--ink);line-height:1.5}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 var(--s-5);padding-left:0;max-width:64ch;list-style:none}
.prose ul li,.prose ol li{font-family:var(--sans);font-size:var(--t-body-l);color:var(--ink-soft);line-height:1.65;padding:var(--s-2) 0 var(--s-2) var(--s-6);position:relative}
.prose ul li:before{content:"\2014";color:var(--accent);position:absolute;left:0}
.prose ol{counter-reset:pli}
.prose ol li{counter-increment:pli}
.prose ol li:before{content:counter(pli);color:var(--accent);font-family:var(--mono);font-size:var(--t-body-s);position:absolute;left:0;top:var(--s-2)}
.prose blockquote{border-left:3px solid var(--accent);padding:var(--s-2) 0 var(--s-2) var(--s-5);margin:var(--s-5) 0;font-family:var(--serif);font-size:var(--t-lede);font-variation-settings:'opsz' 32;font-style:italic;color:var(--ink);max-width:60ch}

/* ---- Pull table (e.g. comparison) ----------------------- */
.compare{width:100%;border-collapse:collapse;margin:var(--s-5) 0;max-width:64ch}
.compare th{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1.5px solid var(--ink);padding:0 var(--s-4) var(--s-3) 0;font-weight:400}
.compare td{font-family:var(--sans);font-size:var(--t-body-m);color:var(--ink-soft);padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5}
.compare td:first-child{color:var(--ink);font-weight:600;width:30%}

/* ---- Author / E-E-A-T ----------------------------------- */
.author-card{display:flex;gap:var(--s-5);padding:var(--s-6);border:1px solid var(--line);background:var(--paper-soft);align-items:flex-start;max-width:600px;margin:var(--s-7) 0}
.author-card .ac-photo{width:80px;height:80px;flex-shrink:0;background:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:var(--serif);font-size:40px;font-style:italic;font-weight:340}
.author-card .ac-name{font-family:var(--serif);font-size:var(--t-body-l);font-weight:420;font-variation-settings:'opsz' 28;color:var(--ink);margin:0 0 4px}
.author-card .ac-role{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3)}
.author-card .ac-bio{font-family:var(--sans);font-size:var(--t-body-s);color:var(--ink-soft);margin:0;line-height:1.55}
.author-card .ac-reviewed{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.12em;color:var(--muted);margin-top:var(--s-3);display:block}

/* ---- Related ------------------------------------------- */
.related{border-top:1px solid var(--line);padding-top:var(--s-6);margin-top:var(--s-7);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-5)}
.related a{text-decoration:none;color:var(--ink);border:1px solid var(--line);padding:var(--s-5);transition:background var(--dur-short)}
.related a:hover{background:var(--paper-soft)}
.related a .rl-cat{font-family:var(--mono);font-size:var(--t-microlabel);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s-3)}
.related a .rl-t{font-family:var(--serif);font-size:var(--t-body-l);font-variation-settings:'opsz' 28;font-weight:420;line-height:1.2}