/* ============================================================================
   blog.css — article pages only.

   Loaded *after* styles/style.css, which supplies the tokens, the nav, the
   footer, the .faq accordion and the .blogx related-articles rail. Everything
   here is the article layout itself: the two-column measure, the byline block,
   the sticky lead-capture rail and the prose styles for API-rendered body HTML.

   Kept separate because article typography wants rules that would be actively
   harmful sitewide — `.art-content p { margin-bottom: 1.6em }` is right inside
   long-form copy and wrong everywhere else.
   ========================================================================= */

/* ── Shell ───────────────────────────────────────────────────────────────
   One grid drives the whole article: a fixed rail and a flexible body. The
   header rows use the same track sizes so the byline, the cover image and the
   prose all align to the same two edges down the page. */
/* The article is two stacked surfaces: a white head (title, byline, cover,
   summary) that curves into a wash body (sticky rail + prose). The curve is on
   the head's bottom corners, so the wash reads as the page underneath it. */
.art{background:var(--wash)}
/* the navbar is fixed, so the head has to clear it itself or the breadcrumb
   renders underneath the bar */
.art-head{background:var(--white);border-radius:0 0 40px 40px;
  padding:calc(var(--nav-h, 76px) + 40px) 0 8px}
.art-flow{background:var(--wash);padding:88px 0 96px}
.art-in{max-width:1460px;margin:0 auto;padding:0 40px}
.art-cols{display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:start}

/* ── Breadcrumb + title ──────────────────────────────────────────────── */
.art-crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font:400 14.5px/1 var(--font);color:var(--muted);margin-bottom:22px}
.art-crumbs a{color:var(--brand);text-decoration:none}
.art-crumbs a:hover{text-decoration:underline}
.art-crumbs .sep{color:var(--faint)}

.art-titlerow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;
  align-items:start;margin-bottom:46px}
/* NO clamp here. The grid column is the measure. Two things fought it: a 20ch
   cap of my own, and the bare `h1{max-width:11em;color:#fff}` in style.css that
   exists for the dark hero — hence the explicit max-width:none and colour. */
/* 550, not the sitewide 700. Article titles run long and at 76px a heavy
   weight reads as shouting; the reference sets them noticeably lighter. */
.art-titlerow h1{font:550 clamp(38px,5.3vw,76px)/1.1 var(--display);
  letter-spacing:-.032em;color:var(--ink);margin:0;max-width:none}
.art-stat{font:400 14.5px/1.75 var(--font);color:var(--muted);text-align:left}
.art-stat span{color:var(--ink-2)}

/* ── Byline rail ─────────────────────────────────────────────────────── */
.art-label{font:400 13.5px/1 var(--font);color:var(--muted);margin:0 0 8px}
.art-name{font:600 15.5px/1.3 var(--font);color:var(--ink);margin:0 0 10px}
.art-bio{font:400 14.5px/1.6 var(--font);color:var(--ink-2);margin:0 0 14px}
.art-contact{font:400 14.5px/1.6 var(--font);color:var(--ink);margin:0 0 6px}
.art-contact a,.art-link{color:var(--brand);text-decoration:none}
.art-contact a:hover,.art-link:hover{text-decoration:underline}
.art-person{display:flex;align-items:center;gap:12px;margin-bottom:12px}
/* name over role — inline spans put them on one line */
.art-person-id{display:flex;flex-direction:column}
.art-person-id .art-name{display:block}
.art-avatar{width:40px;height:40px;border-radius:50%;flex:none;background:var(--wash);
  background-size:cover;background-position:center;
  display:grid;place-items:center;font:700 14px/1 var(--display);color:var(--ink-2)}
.art-person .art-name{margin:0}
.art-role{font:400 13.5px/1.3 var(--font);color:var(--muted);margin-top:3px}
.art-byline hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* ── Cover ───────────────────────────────────────────────────────────── */
.art-cover img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;
  border-radius:16px;display:block}

/* ── Sticky lead-capture rail ────────────────────────────────────────── */
.art-aside{position:sticky;top:calc(var(--nav-h, 76px) + 24px)}
/* One step deeper than the wash it sits on. It used to be var(--wash) — the
   same value as .art-flow — so the card was invisible and the whole rail read
   as empty space. */
.art-widget{background:#ecEEF1;border-radius:20px;padding:30px 28px 32px}
.art-widget h2{font:700 22px/1.25 var(--display);letter-spacing:-.026em;
  color:var(--ink);margin:0 0 8px}
.art-widget p{font:400 14.5px/1.5 var(--font);color:var(--ink-2);margin:0 0 18px}
/* same outlined pill + inline magnifier as the sell hero */
.art-search{display:flex;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--border-strong,#cbd5e0);border-radius:99px;
  padding:4px 6px 4px 20px;transition:border-color .2s}
.art-search:focus-within{border-color:var(--ink)}
.art-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  padding:13px 0;font:400 15px/1.3 var(--font);color:var(--ink)}
.art-search input::placeholder{color:var(--faint)}
.art-search button{width:38px;height:38px;flex:none;border:0;border-radius:50%;
  background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .18s}
.art-search button:hover{background:var(--wash)}
.art-search svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}

/* ── Prose ───────────────────────────────────────────────────────────────
   Applies to body HTML that arrives from the API, so it is written against
   bare tags rather than classes — there is no opportunity to add any.

   Body copy is double-spaced (line-height 2). Paragraph and heading margins
   are scaled up with it — at 1.72 leading a 22px gap read as a paragraph
   break, but against 33px lines it disappears and the blocks run together. */
/* No ch clamp — the 440px rail already sets the measure, and a 74ch cap held
   the prose to ~752px inside an 884px column. Same bug as the h1. */
.art-content > *:first-child{margin-top:0}
.art-content h2{font:700 clamp(24px,2.4vw,32px)/1.22 var(--display);letter-spacing:-.028em;
  color:var(--ink);margin:56px 0 20px}
.art-content h3{font:700 20px/1.3 var(--display);letter-spacing:-.022em;
  color:var(--ink);margin:44px 0 16px}
.art-content p{font:400 16.5px/2 var(--font);color:var(--ink-2);margin:0 0 30px}
.art-content a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.art-content strong{color:var(--ink);font-weight:600}
.art-content ul,.art-content ol{margin:0 0 32px;padding-left:22px}
.art-content li{font:400 16.5px/2 var(--font);color:var(--ink-2);margin-bottom:14px}
.art-content li::marker{color:var(--faint)}
.art-content img{width:100%;height:auto;border-radius:14px;margin:28px 0}
.art-content blockquote{margin:28px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--brand);font-style:normal}
.art-content blockquote p{color:var(--ink);font-size:17.5px}
.art-content hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ── Dark CTA card ───────────────────────────────────────────────────── */
.art-cta{background:var(--ink);border-radius:20px;padding:40px 42px 44px;margin:44px 0}
.art-cta-kicker{font:600 12px/1 var(--font);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 16px}
.art-cta h2{font:700 clamp(24px,2.4vw,32px)/1.22 var(--display);letter-spacing:-.028em;
  color:#fff;margin:0 0 14px}
.art-cta p{font:400 15.5px/1.6 var(--font);color:rgba(255,255,255,.72);margin:0 0 26px;max-width:52ch}
.art-cta .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
.art-cta .btn:hover{background:#eceef1}

/* ── Summary ─────────────────────────────────────────────────────────────
   Sits in the body column of the white head, above the wash fold. Content is
   the post's own excerpt — if the post has none, the row stays hidden. */
.art-summaryrow{padding-bottom:76px}
.art-summary h2{font:700 clamp(24px,2.4vw,32px)/1.22 var(--display);
  letter-spacing:-.028em;color:var(--ink);margin:0 0 18px}
.art-summary p{font:400 16.5px/2 var(--font);color:var(--ink-2);margin:0 0 26px}
.art-summary p:last-child{margin-bottom:0}
.art-summary strong{color:var(--ink);font-weight:600}
.art-summary a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ── Trailing FAQ ────────────────────────────────────────────────────── */
.art-faq{border-top:1px solid var(--line);margin-top:48px;padding-top:36px}

@media (max-width:1080px){
  .art-cols{grid-template-columns:340px minmax(0,1fr);gap:40px}
  .art-titlerow{grid-template-columns:1fr;gap:20px}
  .art-stat{text-align:left}
}
@media (max-width:900px){
  .art-head{padding:calc(var(--nav-h, 76px) + 24px) 0 4px;border-radius:0 0 28px 28px}
  .art-flow{padding:40px 0 72px}
  .art-in{padding:0 24px}
  .art-cols{grid-template-columns:1fr;gap:32px}
  /* one column, so the summary's empty spacer would only add a gap */
  .art-summaryrow{gap:0;padding-bottom:40px}
  .art-summaryrow > [aria-hidden]{display:none}
  /* the rail stops being a rail — it becomes a card in the flow */
  .art-aside{position:static}
  .art-byline{order:2}
  .art-cta{padding:30px 26px 34px}
}