/* fs-article.css — layout and typography for the long-form explainer template.
   Scoped to body.fs-article so it can never touch the older article pages.
   Uses the tokens already defined in assets/style.css. */

body.fs-article .inner-main > article{
  width:min(720px,calc(100% - 40px));
  margin:0 auto;
  padding:24px 0 96px;
}

/* ---------------------------------------------------------------- crumb */
body.fs-article .crumb{
  width:min(720px,calc(100% - 40px));
  margin:0 auto;
  padding:30px 0 0;
  color:#8695a7;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
}
body.fs-article .crumb a{color:#8695a7;text-decoration:none}
body.fs-article .crumb a:hover{color:var(--gold2)}
body.fs-article .crumb span[aria-hidden]{margin:0 7px;opacity:.5}
body.fs-article .crumb [aria-current]{color:var(--cream)}

/* --------------------------------------------------------------- arthero */
body.fs-article .arthero{margin:26px 0 40px}
body.fs-article .arthero h1{
  max-width:15ch;
  margin:16px 0 22px;
  font-family:var(--font-serif);
  font-size:clamp(40px,6.4vw,62px);
  font-weight:600;
  line-height:1.0;
  letter-spacing:-.035em;
  text-wrap:balance;
}
body.fs-article .deck{
  max-width:56ch;
  margin:0;
  color:var(--muted);
  font-family:var(--font-serif);
  font-size:20px;
  line-height:1.55;
}
body.fs-article .byline{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:28px 0 0;
  color:#8695a7;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
}
body.fs-article .byline a{color:var(--gold2);text-decoration:none}
body.fs-article .byline a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- figures */
body.fs-article .hero-figure,
body.fs-article .support-figure{margin:40px 0;padding:0}
body.fs-article .hero-figure img,
body.fs-article .support-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border:1px solid var(--line);
  background:#07111f;
}
body.fs-article .hero-figure{max-width:520px;margin:34px auto 44px}
body.fs-article .support-figure{max-width:520px;margin-inline:auto}
body.fs-article .hero-figure figcaption,
body.fs-article .support-figure figcaption{
  margin-top:12px;
  color:#8190a2;
  font-size:12px;
  line-height:1.6;
}
body.fs-article .ai-badge{
  display:inline-block;
  margin-right:8px;
  padding:3px 7px;
  border:1px solid rgba(217,192,138,.4);
  background:rgba(217,192,138,.08);
  color:var(--gold2);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  vertical-align:1px;
}
body.fs-article .photo-credit{display:block;margin-top:4px;color:#6f7d8f;font-style:italic}

/* ----------------------------------------------------------- flash answer */
body.fs-article .flash-answer{
  margin:34px 0 44px;
  padding:25px;
  background:#0e2036;
  border:1px solid var(--line);
  border-left:5px solid var(--gold);
}
body.fs-article .flash-answer > span{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gold);
  font-family:var(--font-sans);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.fs-article .flash-answer > span:before{
  content:"ƒ";
  width:25px;height:25px;
  display:grid;place-items:center;
  flex:none;
  border:1px solid rgba(217,192,138,.75);
  border-radius:50% 50% 50% 14%;
  background:#081625;
  color:#f0d79a;
  font-family:var(--font-serif);
  font-size:16px;
  font-style:italic;
  line-height:1;
  transform:rotate(-7deg);
}
body.fs-article .flash-answer strong{
  display:block;
  margin-top:14px;
  color:#c0cad6;
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:400;
  line-height:1.66;
}

/* ------------------------------------------------------------- body type */
body.fs-article .inner-main > article > h2{
  margin:56px 0 17px;
  font-family:var(--font-serif);
  font-size:clamp(30px,4.4vw,38px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
body.fs-article .inner-main > article > p{
  margin:0 0 20px;
  color:#c0cad6;
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.76;
}
body.fs-article .inner-main > article > p strong{color:var(--cream);font-weight:600}
body.fs-article .inner-main > article p a,
body.fs-article .inner-main > article li a,
body.fs-article .inner-main > article .faq-item a{
  color:var(--gold2);
  text-decoration:underline;
  text-underline-offset:3px;
}
body.fs-article .related-reading a,
body.fs-article .related-card,
body.fs-article .related-card *{text-decoration:none}
body.fs-article .related-all{text-decoration:none}

/* --------------------------------------------------------------- faq/src */
body.fs-article .faq{margin-top:56px}
body.fs-article .faq h2,
body.fs-article .sources h2{
  margin:0 0 8px;
  font-family:var(--font-serif);
  font-size:30px;
  font-weight:600;
  letter-spacing:-.02em;
}
body.fs-article .faq-item > div{padding-top:10px}
body.fs-article .faq-item p{
  margin:0;
  color:#c0cad6;
  font-family:var(--font-serif);
  font-size:17px;
  line-height:1.7;
}
body.fs-article .sources{margin-top:44px}
body.fs-article .sources ol{margin:16px 0 0;padding-left:20px}
body.fs-article .sources li{
  margin-bottom:12px;
  color:#a9b5c4;
  font-size:14px;
  line-height:1.65;
}
body.fs-article .sources li strong{color:var(--cream)}
body.fs-article .correction{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:#8695a7;
  font-size:13px;
}

/* ------------------------------------------------------------ video slot */
body.fs-article .story-video{margin:40px 0}
body.fs-article .story-video video{display:block;width:100%;height:auto;border:1px solid var(--line)}

/* ---------------------------------------------------------------- related */
body.fs-article .related-reading{margin-top:72px}

@media(max-width:620px){
  body.fs-article .inner-main > article > p{font-size:17px}
  body.fs-article .arthero h1{overflow-wrap:anywhere}
  body.fs-article .support-figure{max-width:100%}
}