/* Typed — the Learn article furniture.
 *
 * One stylesheet behind every piece in the Learn section, whatever produced
 * it: the generated explainers at /learn/<id> (concept.html), an authored news
 * post (post.html), and the live preview in the writing tool
 * (learn-admin.html). They share a masthead, a byline strip, one measure and
 * one set of prose rules, so a post written in the editor and an explainer
 * built from structured fields read as two pieces from the same publication
 * rather than two different websites.
 *
 * Two house conventions are styled here and applied by typed-article.js:
 *   .ar-keypoints  a section headed "The short version" — the standing summary
 *   .ar-refs       a section headed "Sources" — the numbered reference list
 * In an explainer the classes are written by the template; in an authored post
 * decorate() adds them by reading those headings, which is why the writing
 * tool's skeleton uses exactly those two headings.
 *
 * Everything here is token-driven, so all three themes come out right. Page
 * chrome (nav bars, progress rail, not-found states) stays with its page. */

/* --- the measure ---------------------------------------------------------- */
.ar-wrap{max-width:700px;margin:0 auto;padding:0 24px;}

/* --- masthead ------------------------------------------------------------- */
.ar-head{padding:52px 0 0;}
.ar-crumb{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:18px;}
.ar-crumb a{text-decoration:none;}
.ar-crumb a:hover{color:var(--teal);}
.ar-crumb .sep{opacity:.5;margin:0 7px;}
.ar-title{font-family:var(--font-display);font-weight:600;font-size:41px;line-height:1.08;letter-spacing:-.025em;margin:0 0 18px;}
.ar-standfirst{font-size:19.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 26px;max-width:620px;}

/* --- byline --------------------------------------------------------------- */
.ar-byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ar-byline-mark{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--teal-tint);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--teal);}
.ar-byline-who{font-size:13.5px;font-weight:600;}
.ar-byline-meta{font-size:12px;color:var(--ink-faint);margin-top:3px;}
.ar-byline-meta span+span::before{content:"\00b7";margin:0 7px;opacity:.7;}
.ar-byline-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* --- prose ----------------------------------------------------------------
   The freeform body of an authored post. The explainers do not use this: their
   body is structured fields with their own blocks, and blanket link styling
   would repaint their read-next rows and chips. */
.ar-prose{font-size:17.5px;line-height:1.72;color:var(--ink-soft);}
.ar-prose > *:first-child{margin-top:0;}
.ar-prose p{margin:0 0 22px;}
.ar-prose p:last-child{margin-bottom:0;}
.ar-prose b,.ar-prose strong{color:var(--ink);font-weight:600;}
.ar-prose h2{font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin:38px 0 16px;}
.ar-prose h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);margin:30px 0 12px;}
/* A blockquote is the pull quote — the one line a reader would quote back to
   someone else — not an indent for long citations. */
.ar-prose blockquote{border-left:2px solid var(--teal);padding-left:18px;margin:26px 0;font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.4;color:var(--ink);}
.ar-prose ul,.ar-prose ol{margin:0 0 22px 22px;padding:0;}
.ar-prose li{margin-bottom:9px;}
.ar-prose img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:8px 0 22px;display:block;}
.ar-prose a{color:var(--teal);text-decoration:underline;}

/* --- the standing summary -------------------------------------------------
   Written as a plain list; the panel is the styling. Both selectors are spelled
   out because `.ar-prose ul` outweighs a single class. */
.ar-keypoints,.ar-prose ul.ar-keypoints,.ar-prose ol.ar-keypoints{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 26px;margin:0 0 22px;list-style:none;
}
.ar-keypoints > li,.ar-prose .ar-keypoints > li{
  position:relative;padding-left:20px;margin-bottom:11px;
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);
}
.ar-keypoints > li:last-child,.ar-prose .ar-keypoints > li:last-child{margin-bottom:0;}
.ar-keypoints > li::before,.ar-prose .ar-keypoints > li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--teal);opacity:.75;
}

/* --- references ----------------------------------------------------------- */
.ar-refs,.ar-prose ol.ar-refs,.ar-prose ul.ar-refs{list-style:none;counter-reset:arref;margin:0;padding:0;}
.ar-refs > li,.ar-prose .ar-refs > li{
  position:relative;padding:13px 0 13px 32px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0;
}
.ar-refs > li:first-child,.ar-prose .ar-refs > li:first-child{border-top:none;padding-top:0;}
.ar-refs > li::before,.ar-prose .ar-refs > li::before{
  counter-increment:arref;content:counter(arref) ".";
  position:absolute;left:0;top:13px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);
}
.ar-refs > li:first-child::before,.ar-prose .ar-refs > li:first-child::before{top:0;}
.ar-refs a,.ar-prose .ar-refs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.ar-refs a:hover,.ar-prose .ar-refs a:hover{color:var(--teal);border-bottom-color:var(--teal);}

/* --- footer furniture ------------------------------------------------------ */
.ar-endnote{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--ink-faint);display:flex;gap:12px;align-items:flex-start;}
.ar-more{margin-top:26px;font-size:13.5px;font-weight:600;}
.ar-more a{color:var(--teal);text-decoration:none;}

@media(max-width:640px){
  .ar-title{font-size:30px;}
  .ar-standfirst{font-size:17px;}
  .ar-prose{font-size:16.5px;}
  .ar-prose h2{font-size:21px;}
}