/* =====================================================================
   article.css  —  editorial article layout (Lovable-style) on the fnb brand
   ---------------------------------------------------------------------
   Loaded AFTER each post's inline <style>, so these rules win on source
   order. Purpose:
     • narrow, readable reading column (fixes text/hero running full-width
       on big screens)
     • airy hero, calmer type, generous rhythm
     • "calm it right down": no scattered mid-sentence bold / italics /
       colour in prose; neutral list markers; bold kept only for the
       label at the start of a list item
   Brand is unchanged: blue-on-white, Plus Jakarta Sans, existing tokens.
   ===================================================================== */

:root{
  --measure:700px;   /* reading column for text/header/CTA */
  --media:820px;     /* hero + wide media, a touch wider than the text */
  --gutter:24px;
}

/* ---- column widths : the core big-screen fix ---- */
.artwrap{
  width:auto;
  max-width:var(--measure);
  margin-left:auto;margin-right:auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.art-hero{
  width:auto;
  max-width:var(--media);
  margin:36px auto 10px;
  padding:0 var(--gutter);
}

/* ---- header block ---- */
.arthead{padding-top:54px}
.backlink{font-weight:600;font-size:14px;letter-spacing:0;color:var(--muted);margin:0 0 26px}
.backlink:hover{color:var(--blue)}
.art-cat{font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--blue);margin:0 0 14px}
.arth1{font-size:clamp(31px,4.4vw,46px);line-height:1.1;letter-spacing:-.024em;margin:0 0 18px}
.art-meta{font-weight:600;font-size:14px;color:var(--muted);margin:0}
.art-lede{font-size:21px;line-height:1.58;color:var(--text);margin:22px 0 0}

/* ---- hero frame ---- */
.art-hero .frame{background:var(--blue-tint);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.art-hero svg{display:block;width:100%;height:auto}

/* ---- body prose ---- */
.art-body{padding:6px 0 8px}
.art-body p{font-size:18.5px;line-height:1.78;color:var(--text);margin:0 0 22px}
.art-body h2{font-size:27px;line-height:1.24;letter-spacing:-.02em;margin:46px 0 14px}
.art-body h3{font-size:20px;line-height:1.3;margin:34px 0 10px}
.art-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--blue-deep)}
/* buttons inside the article body keep button styling, not link styling */
.art-body a.btn{text-decoration:none}
.art-body a.btn-blue,.art-body a.btn-blue:hover{color:#fff}
.art-body a.btn-white,.art-body a.btn-white:hover{color:var(--blue)}

/* calm it right down — neutralise scattered emphasis inside running prose */
.art-body p strong,
.art-body p em,
.art-body p b,
.art-body p i{font-weight:inherit;font-style:normal;color:inherit}

/* footnote citations stay as small superscript links */
.art-body a.cite{font-size:.7em;font-weight:700;vertical-align:super;line-height:0;text-decoration:none;color:var(--blue);margin-left:1px}
.art-body a.cite:hover{text-decoration:underline}

/* ---- lists : neutral dot marker, keep the leading label bold ---- */
.quadlist{list-style:none;margin:22px 0 26px;padding:0}
.quadlist li{position:relative;padding:0 0 0 26px;margin:0 0 14px;font-size:18.5px;line-height:1.72;color:var(--text)}
.quadlist li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.quadlist li b,.quadlist li strong{font-weight:700;color:var(--ink)}

/* ---- rule-of-thumb table ---- */
.ruletable{width:100%;border-collapse:collapse;margin:22px 0 12px;font-size:17px}
.ruletable th,.ruletable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.ruletable thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ruletable td{color:var(--text)}

/* ---- tool CTA ---- */
.toolcta{margin:44px 0 8px;background:var(--blue-tint);border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.toolcta .k{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.toolcta h3{font-size:21px;line-height:1.25;margin:0 0 8px}
.toolcta p{font-size:16px;line-height:1.55;color:var(--text);margin:0 0 18px}

/* ---- read next ---- */
.readnext{border-top:1px solid var(--line);margin-top:42px;padding:30px 0 0}
.readnext .k{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.readnext a{display:inline-block;font-weight:700;font-size:18px;line-height:1.35;color:var(--ink);text-decoration:none}
.readnext a:hover{color:var(--blue)}

/* ---- references block (if present) sits in the reading column ---- */
.refs{margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.refs h2{font-size:18px;margin:0 0 12px}
.refs ol,.refs ul{margin:0;padding:0 0 0 20px}
.refs li{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 8px}

/* ---- small screens ---- */
@media(max-width:560px){
  .arthead{padding-top:34px}
  .arth1{line-height:1.14}
  .art-lede{font-size:19px;margin-top:18px}
  .art-body p,.quadlist li{font-size:17.5px}
  .art-body h2{font-size:23px;margin-top:38px}
  .toolcta{padding:22px 20px}
  .art-hero{margin-top:28px}
}