/* Articles page (/blog), 9 Oct 2026. Tokens only. Loaded by blog.html after styles.css.
   Standard page hero, filters on one line, the newest article as a wide feature card, picture cards (the site's .post
   card with a title-only link, .card--link) in a 3-column grid, a dark "Start here" band, then the rest of the grid. */

.articles{padding-block:var(--space-10) var(--space-16)}
.articles__filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-8);margin:0 0 var(--space-8)}
.articles__filters .filter-row{margin:0}
.articles__grid{margin-top:var(--space-8);gap:var(--space-8)}
.articles__more-h{margin:0}
.post.card--link{position:relative}
.post h3 a,.articles__feature-title a,.articles-start h3 a{color:var(--ink);text-decoration:none}
.post .post__meta time{font-variant-numeric:tabular-nums}

/* the newest article */
.articles__feature{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;background:var(--surface);border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--duration-base),box-shadow var(--duration-base)}
.articles__feature-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--gradient-brand-soft)}
.articles__feature-body{padding:var(--space-8);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.articles__feature-kicker{font-size:var(--size-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand);margin:0}
.articles__feature-title{font-size:var(--size-3xl);line-height:var(--leading-tight);margin:0;text-wrap:balance}
.articles__feature p{color:var(--muted);margin:0}
.articles__cta{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-bold);color:var(--brand)}
.articles__cta svg{width:var(--space-5);height:var(--space-5)}

/* Start here: a dark band of four picture cards, one per topic, each with its icon and a one-line promise */
.articles-start{background:var(--surface-dark);color:var(--on-dark);padding-block:var(--space-16)}
.articles-start__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--space-3) var(--space-8);margin-bottom:var(--space-8)}
.articles-start__head h2{color:var(--on-dark);margin:0;font-size:var(--size-heading)}
.articles-start__head p{color:var(--on-dark-muted);margin:0;max-width:var(--measure-lead)}
.articles-start__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.articles-start__card{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--duration-base),box-shadow var(--duration-base)}
.articles-start__card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--gradient-brand-soft)}
/* image, topic, title, promise and the Read line each sit on a row shared across the band, so cards line up part by part */
.articles-start__body{grid-row:2 / span 4;display:grid;grid-template-rows:subgrid;row-gap:var(--space-2);padding:var(--space-5)}
.articles-start__body .articles__cta{align-self:end}
.articles-start__topic{display:flex;align-items:center;gap:var(--space-2);font-size:var(--size-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand);margin:0}
.articles-start__topic svg{width:var(--space-5);height:var(--space-5)}
.articles-start h3{font-size:var(--size-lg);line-height:var(--leading-snug);margin:0}
.articles-start__promise{color:var(--ink-soft);font-size:var(--size-sm);margin:0}
/* hover lift and focus ring come from .card--link (styles.css) */


@media (max-width:1000px){.articles-start__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.articles__feature{grid-template-columns:minmax(0,1fr)}.articles__feature-body{padding:var(--space-6)}}
@media (max-width:640px){
  .articles{padding-top:var(--space-6)}
  .articles-start__grid{grid-template-columns:minmax(0,1fr)}
  .articles__feature-title{font-size:var(--size-2xl)}
  /* filters wrap (no sideways scrolling); compact chips keep them short */
  .articles__filters{gap:var(--space-2)}
  .articles__filters .filter-row{gap:var(--space-2)}
  .articles__filters .chip-filter{min-width:0;padding-inline:var(--space-3);font-size:var(--size-sm)}
}

/* Article pages (9 Oct 2026): text at reading width, images and figures wider so the words inside them stay legible,
   related articles below the author box. */
.article-col{max-width:var(--measure);margin-inline:auto}
.article-wide{width:min(var(--container-max),calc(100vw - var(--space-12)));position:relative;left:50%;transform:translateX(-50%)}
.article-wide .do-capfig__img{width:100%;height:auto}
.article-related{padding-block:var(--space-12) var(--space-16);border-top:var(--border-hairline) solid var(--line)}
.article-related h2{margin:0}
/* the lead image sits in the dark page header, beside the title (text never over the photo) */
.article-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.article-hero__img{margin:0}
.article-hero__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-md);display:block}
.article-hero__img figcaption{color:var(--on-dark-muted);font-size:var(--size-xs);margin-top:var(--space-2)}
@media (max-width:900px){.article-hero{grid-template-columns:minmax(0,1fr)}}

/* Article pages, 9 Oct 2026 (second pass): the next step the article offers, centred like every boxed call to action (wording per topic in build_article.py),
   beside the opening on wide screens and after the article on every screen; stacked figures on phones (<picture>);
   bigger tap areas on the source numbers without moving the text. */
.article-cta{border:var(--border-hairline) solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--surface-alt);text-align:center}
.article-cta p{margin:0 0 var(--space-4);color:var(--ink-soft);font-size:var(--size-sm)}
.article-cta .article-cta__h{margin-bottom:var(--space-2);color:var(--ink);font-size:var(--size-ui);font-weight:var(--weight-bold)}
.article-cta--end{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-block:var(--space-10) var(--space-12);padding:var(--space-6)}
.article-cta--end > div{max-width:var(--measure-lead);min-width:0}
.article-cta--end p:last-child{margin-bottom:0}
.article-cta--side{display:none}
.article-cta--side{padding:var(--space-4)}
.article-cta--side .btn{width:100%;justify-content:center;white-space:nowrap;padding-inline:var(--space-4)}
.article-author{display:none}
.article-col sup a{padding:var(--space-2);margin-inline:calc(var(--space-2) * -1)}
.article-col picture{display:block}
@media (min-width:1200px){
  .article-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) minmax(0,1fr);column-gap:var(--space-6)}
  .article-layout > .article-col{grid-column:2;grid-row:1;max-width:none;margin:0}
  .article-cta--side{display:block;grid-column:3;grid-row:1;align-self:start;justify-self:end;width:100%;max-width:220px}
  /* the author beside the opening, mirroring the next-step box; the author box at the end gives way to it */
  .article-author{display:grid;gap:var(--space-2);grid-column:1;grid-row:1;align-self:start;justify-self:start;width:100%;max-width:200px;font-size:var(--size-sm);line-height:var(--leading-normal)}
  .article-author img{width:var(--space-16);height:var(--space-16);border-radius:var(--radius-round);object-fit:cover;margin-bottom:var(--space-1)}
  .article-author p{margin:0}
  .article-author__name{font-weight:var(--weight-bold);font-size:var(--size-md)}
  .article-author__name a{color:var(--ink);text-decoration:none}
  .article-author__name a:hover{text-decoration:underline}
  .article-author__role{color:var(--muted)}
  .article-author__link a{font-weight:var(--weight-bold);color:var(--brand)}
  .article-layout .author-box--end{display:none}
}