/* ============================================================================
   site-article.css — the long-form ARTICLE treatment for the monochrome Foundry
   marketing system: the /learn guides and the /research write-ups.

   The frozen site-content.css dresses only the explicitly-classed SECTION
   devices a marketing page composes (the lead, counted figures, matchup tables,
   the attack chain, the reference/legal families). A long-form article is
   different markup: bare markdown/prose elements — headings, paragraphs, lists,
   inline and block code, tables, blockquotes, rules — that carry no class to
   hook. This sheet dresses those, every rule scoped under .article so it reaches
   no other surface, and it is linked per-page through SiteMarketingLayout's
   headExtra slot (page.articleHead / articleHeadResearch) AFTER the frozen
   chain, so it resolves the same marketing-tokens.css var()s and its own rules
   win a tie.

   Hand-authored (NOT a *-tokens.css), one canonical rule per selector, colours
   only via var(--*) from marketing-tokens.css — the roster is monochrome, so
   nothing here introduces a colour.
   ========================================================================== */

/* ---------- container + reading measure ---------- */
/* The article is a single centred column. Top padding clears the fixed .topbar
   (site.css), the gutter matches every other band, and the max-width holds the
   line length near the design-system body measure. */
.article{max-width:930px;margin-inline:auto;padding:156px var(--gut) 100px;}

/* ---------- article header ---------- */
.article-head{margin-bottom:clamp(30px,4.4vh,52px);padding-bottom:clamp(22px,3vh,30px);border-bottom:1px solid var(--line)}
.article-head h1{margin-top:8px}
.article-head .lede{margin-top:18px}
.article-head .blink{margin-top:22px}
/* the research date/tags/byline row */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;font-family:var(--fm);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.article-meta time{color:var(--mute)}
/* the byline renders only when a post names a PERSON (both shipped write-ups name
   the publisher, so it never ships today); class="byline" is the marker
   blog_byline_test.go keys the mechanism on. */
.article-meta .byline{color:var(--dim)}
.article-tag{color:var(--dim);border:1px solid var(--line2);padding:3px 9px;letter-spacing:.1em}

/* ---------- prose typography (bare elements under .article) ---------- */
.article h1{font-family:var(--fd);font-size:clamp(36px,4.6vw,62px);line-height:1.06;font-weight:400;letter-spacing:-.04em;color:var(--ink);max-width:21ch;}
/* the one genuinely-new device: a sentence-case DISPLAY subhead, grounded in the
   .shead h2 scale, unlike the frozen .h3 mono-uppercase label. */
.article h2{font-family:var(--fd);font-size:clamp(22px,2.5vw,31px);line-height:1.14;font-weight:400;letter-spacing:-.022em;color:var(--ink);margin-top:clamp(42px,5.6vh,72px)}
.article h3{font-family:var(--fd);font-size:clamp(17px,1.7vw,21px);line-height:1.28;font-weight:500;letter-spacing:-.015em;color:var(--ink);margin-top:clamp(30px,3.6vh,46px)}
.article p{color:var(--mute);font-size:18px;line-height:1.75;margin-top:20px}
.article h2 + p,.article h3 + p{margin-top:14px}
.article strong,.article b{color:var(--ink);font-weight:600}
.article em,.article i{font-style:italic}
.article a:not(.deploy):not(.blink){color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.article a:not(.deploy):not(.blink):hover{text-decoration-color:var(--ink)}

/* lists — the reset (site.css) strips markers and padding, so re-establish them
   for prose lists. */
.article ul,.article ol{color:var(--mute);font-size:18px;line-height:1.75;margin-top:20px;padding-left:1.4em}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li{margin-top:9px}
.article li::marker{color:var(--dim)}
.article li p{margin-top:9px}

/* inline + block code */
.article code{font-family:var(--fm);font-size:.86em;color:var(--ink);background:var(--panel2);padding:2px 6px}
.article pre{background:var(--panel2);margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article pre code{display:block;background:none;padding:24px;color:var(--mute);font-size:13px;line-height:1.7;white-space:pre;tab-size:2}

/* blockquote, rule, media */
.article blockquote{margin-top:22px;padding-left:20px;border-left:2px solid var(--line2);color:var(--dim);font-style:italic}
.article blockquote p{color:var(--dim)}
.article hr{border:0;border-top:1px solid var(--line);margin:clamp(38px,5.5vh,64px) 0}
.article img{max-width:100%;height:auto;margin-top:22px}

/* markdown prose tables — direct children of .article, so this never touches the
   figure tables composed inside .match/.tscroll (which keep the frozen device's
   min-width scroll). Override only the frozen min-width so a prose table fits the
   measure and wraps instead of dragging the page sideways. */
.article > table{min-width:0;margin-top:26px}
.article > table tbody tr + tr td,.article > table tbody tr + tr th{border-top:1px solid var(--line)}

/* ---------- syntax highlight remap (internal/highlight hl-* spans) ---------- */
/* app.css carries the chromatic-ground versions for the rollback ArticleLayout;
   this is the monochrome equivalent for the site-article page, three luminance
   tiers off the roster — the command/key/error/ok roles ride the primary line,
   flags/strings/urls the reading line, prompt/punctuation the quiet one. */
.article .hl-prompt{color:var(--dim)}
.article .hl-cmd{color:var(--ink);font-weight:600}
.article .hl-flag{color:var(--mute)}
.article .hl-str{color:var(--mute)}
.article .hl-url{color:var(--mute);text-decoration:underline;text-decoration-color:var(--line2)}
.article .hl-ok{color:var(--ink)}
.article .hl-err{color:var(--ink);font-weight:600}
.article .hl-key{color:var(--ink);font-weight:600}
.article .hl-punct{color:var(--dim)}

/* ---------- closing CTA ---------- */
.article-cta{margin-top:clamp(46px,7vh,84px);padding-top:32px;border-top:1px solid var(--line2);display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.article-cta .deploy{padding:13px 21px;font-size:12px}
.article-cta .blink{color:var(--dim)}

/* ---------- on-this-page outline (fixed left rail) ---------- */
/* The prose article's own h2s, listed as a fixed rail in the left gutter, spliced
   in by the marketing shell when an article carries more than two headings. It
   sits in the gutter beside the centred .article column and is hidden below the
   width where that gutter closes. Colours via var() tokens only — monochrome. */
.article-outline{position:fixed;z-index:15;top:200px;left:var(--gut);width:175px;max-height:calc(100vh - 240px);overflow-y:auto;font:12px/1.6 var(--fd);color:var(--dim)}
.article-outline>p{color:var(--mute);font:11px var(--fm);margin-bottom:20px}
.article-outline>a{display:block;padding:8px 0;color:var(--dim)}
.article-outline>a:hover{color:var(--ink)}
@media (max-width:1270px){.article-outline{display:none}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .article p,.article ul,.article ol{font-size:16px}
}