/* =====================================================================
   Lulu Ledger — blog article template styles (/blog/[slug])
   Shared by every article page; rendered by article-page.js from the
   data in article-data.js. Builds on site.css tokens/components and
   matches the blog index's card language, pills, and cover tiles.
   ===================================================================== */

/* ---- page shell ---- */
.arttop{background:var(--azure);padding:132px var(--space-gutter) 0}
.arttop .in{max-width:var(--container);margin:0 auto}
.crumb{font:700 13px/1.5 var(--sans);color:var(--muted)}
.crumb a{color:var(--navy);text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:1px}
.crumb a:hover{color:#032E4A}
.crumb .sep{margin:0 8px;color:#93A8B8}

.arthead{max-width:820px;margin:34px auto 0;text-align:center;padding-bottom:44px}
.arthead h1{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(30px,4vw,48px);line-height:1.16;letter-spacing:-0.6px;text-wrap:balance;
  margin-top:14px;
}
.arthead .summary{font:500 17px/1.65 var(--sans);color:var(--muted);max-width:56ch;margin:16px auto 0}
.artmeta{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap;
  font:600 13px/1.5 var(--sans);color:#7A93A6;font-variant-numeric:tabular-nums;
}
.artmeta .avi{
  width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;
  font:800 12px/36px var(--sans);text-align:center;flex:none;
}
.artmeta b{color:var(--navy)}
.artmeta .dot{color:#B9D5E8}

/* ---- category pill + cover tiles (match the blog index) ---- */
.bcat{font:800 10.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
/* blog:catlabels:begin — generated by build-blog.mjs from CATEGORIES; add a category there, not here */
.bcat.c-basics{color:#0E86B8}
.bcat.c-deals{color:var(--navy)}
.bcat.c-expenses{color:var(--pink-accessible)}
.bcat.c-mileage{color:#B8781A}
.bcat.c-taxes{color:var(--green)}
.bcat.c-growth{color:#0E86B8}
.bcat.c-compare{color:var(--navy)}
.bcat.c-software{color:#1C7A73}
.bcat.c-deductions{color:#6A4C93}
/* blog:catlabels:end */
.cover{display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
/* blog:catcovers:begin — generated by build-blog.mjs from CATEGORIES; add a category there, not here */
.cover.c-basics{background:#E2F6FF;color:#0E86B8}
.cover.c-deals{background:var(--navy);color:#8FD8FF}
.cover.c-expenses{background:var(--pink-chip-bg);color:var(--pink-accessible)}
.cover.c-mileage{background:#FDF0DC;color:#B8781A}
.cover.c-taxes{background:var(--green-chip-bg);color:var(--green)}
.cover.c-growth{background:var(--azure);color:var(--navy)}
.cover.c-compare{background:#E4EDF4;color:var(--navy)}
.cover.c-software{background:#E3F2F1;color:#1C7A73}
.cover.c-deductions{background:#F0EAF6;color:#6A4C93}
/* blog:catcovers:end */

/* ---- featured image: brand cover tile bridging hero -> body ---- */
.arthero{max-width:940px;margin:0 auto;transform:translateY(56px);margin-top:-56px}
/* generated cover: exactly the 1200x630 it was rendered at, so nothing crops */
.arthero .cover{
  aspect-ratio:1200/630;border-radius:var(--radius-lg);
  border:1px solid var(--hairline);box-shadow:var(--shadow-md);
}
.arthero .cover svg{width:76px;height:76px}
/* real product screenshot: shown whole at its own aspect ratio, never cropped */
.arthero img.shot{
  display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--hairline);box-shadow:var(--shadow-md);
}

/* ---- article body ---- */
.artsec{background:#fff;padding:120px var(--space-gutter) var(--space-section-quiet)}
.artwrap{max-width:720px;margin:0 auto}
.samplebar{margin-bottom:36px}

.artbody p{font:500 16.5px/1.8 var(--sans);color:var(--navy-ink);margin-bottom:20px}
.artbody p b{font-weight:800}
.artbody a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--blue)}
.artbody a:hover{color:#032E4A}
.artbody h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(24px,2.6vw,30px);line-height:1.25;letter-spacing:-0.3px;
  margin:46px 0 14px;scroll-margin-top:84px;
}
.artbody h3{font:800 17.5px/1.4 var(--sans);color:var(--navy-ink);margin:32px 0 10px}
.artbody ul,.artbody ol{margin:0 0 20px;padding-left:26px}
.artbody li{font:500 16px/1.75 var(--sans);color:var(--navy-ink);margin-bottom:8px}
.artbody li::marker{color:var(--blue);font-weight:800}
.artbody li b{font-weight:800}
.artbody blockquote{
  font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--navy);
  border-left:3px solid var(--pink);padding-left:22px;margin:30px 0;
}
.artbody blockquote cite{
  display:block;font:700 12.5px/1.5 var(--sans);font-style:normal;color:#93A8B8;margin-top:10px;
}
.artbody figure{margin:34px 0}
.artbody figure .cover{
  aspect-ratio:16/8;border-radius:var(--radius-md);border:1px solid var(--hairline);
}
.artbody figure .cover svg{width:56px;height:56px}
.artbody figcaption{font:600 12.5px/1.6 var(--sans);color:#93A8B8;text-align:center;margin-top:10px}

/* product screenshots inside the body — real captures, shown whole */
.artbody figure img.shot{
  display:block;width:100%;height:auto;border-radius:var(--radius-md);
  border:1px solid var(--hairline);box-shadow:var(--shadow-md);
}

/* table of contents */
.toc{
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:20px 24px;margin:0 0 36px;
}
.toc h4{font:800 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#93A8B8;margin-bottom:10px}
.toc ol{margin:0;padding-left:22px}
.toc li{font:600 14px/1.9 var(--sans)}
.toc li::marker{color:var(--blue);font-weight:800}
.toc a{color:var(--navy);text-decoration:none}
.toc a:hover{border-bottom:2px solid var(--blue)}

/* callout / key takeaway */
.callout{
  background:var(--azure);border:1px solid #BFDEF0;border-left:4px solid var(--blue);
  border-radius:12px;padding:22px 26px;margin:34px 0;
}
.callout h4{font:800 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#0E86B8;margin-bottom:8px}
.callout p{font:500 15px/1.7 var(--sans);color:var(--navy-ink);margin:0}
.callout p b{font-weight:800}

/* in-article comparison table (base .cmpwrap/.cmp from site.css) */
.artbody .cmpwrap{margin:34px 0}
.artbody .cmp{min-width:560px}
.artbody .cmp td:first-child{font-weight:800;color:var(--navy-ink)}

/* ---- article FAQ ---- */
.artfaq{margin-top:56px}
.artfaq .gk{font:800 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pink-accessible);margin-bottom:16px}
.artfaq .faqlist{margin-top:0;max-width:none}

/* ---- author box ---- */
.authorbox{
  display:flex;gap:18px;align-items:flex-start;margin-top:56px;
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:24px 26px;
}
.authorbox .avi{
  width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;
  font:800 18px/56px var(--sans);text-align:center;flex:none;
}
.authorbox b{display:block;font:800 15px/1.4 var(--sans);color:var(--navy)}
.authorbox .role{font:600 12px/1.5 var(--sans);color:#93A8B8;margin-bottom:6px}
.authorbox p{font:500 13.5px/1.65 var(--sans);color:var(--muted);margin:0}

/* ---- related articles (blog-index card language) ---- */
.relatedsec{background:var(--azure);padding:var(--space-section-quiet) var(--space-gutter)}
.relatedsec .in{max-width:var(--container);margin:0 auto}
.relatedsec h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(24px,2.8vw,34px);line-height:1.2;letter-spacing:-0.3px;text-align:center;
}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.bcard{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  box-shadow:0 12px 30px -22px rgba(4,38,63,.16);
  transition:transform .2s ease,box-shadow .2s ease;
}
.bcard:hover{transform:translateY(-3px);box-shadow:0 20px 44px -22px rgba(4,38,63,.24)}
.bcard:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bcard .cover{aspect-ratio:1200/630}
.bcard .cover svg{width:52px;height:52px}
.bcard .bbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.bcard h3{font:800 16.5px/1.4 var(--sans);color:var(--navy);text-wrap:balance}
.bmeta{font:600 12px/1.5 var(--sans);color:#93A8B8;font-variant-numeric:tabular-nums;margin-top:auto}

/* ---- responsive ---- */
@media (max-width:1080px){
  .relgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .arttop{padding:110px var(--space-gutter-mobile) 0}
  .arthead{margin-top:24px;padding-bottom:36px}
  .arthero{transform:translateY(40px);margin-top:-40px}
  .artsec{padding:96px var(--space-gutter-mobile) 64px}
  .relatedsec{padding:64px var(--space-gutter-mobile)}
  .authorbox{flex-direction:column;gap:12px}
}
@media (max-width:700px){
  .relgrid{grid-template-columns:1fr;gap:18px}
}