/* =====================================================================
   blog.html only — the article index.
   Shared rules live in assets/css/styles.css. Tokens only: no new
   colours, radii, shadows or type sizes are defined here.
   ===================================================================== */

/* ---------- 0b. Anchor offset under the sticky header -------------
   The hero's "Jump to a topic" chips are cross-page links that land on
   #articles, so the browser jumps natively and the band's top edge would
   otherwise sit behind the sticky header. */
.section[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ---------- 1. Hero extras --------------------------------------- */
.blog-hero__topics{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.blog-hero__topics>span{
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  display:inline-flex;align-items:center;min-height:34px;margin-right:var(--sp-1);
}
.blog-hero__media{position:relative}
.blog-hero__media .float-chip{position:absolute;left:-10px;bottom:20px}
@media (max-width:520px){
  .blog-hero__media .float-chip{left:0;bottom:12px;scale:.94;transform-origin:left bottom}
}

/* ---------- 2. Editor's pick ------------------------------------- */
.feat-grid{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){ .feat-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
/* Past the nav breakpoint the pick takes a larger share, so its headline
   stops wrapping to five lines beside the compact rail. */
@media (min-width:1180px){ .feat-grid{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr)} }

.feat-post{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  padding:0;height:100%;
}
@media (min-width:640px){ .feat-post{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
@media (min-width:1180px){ .feat-post{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)} }
.feat-post__media{position:relative;overflow:hidden;background:var(--ink-100);aspect-ratio:4/3}
/* Beside the copy the media fills the card instead of keeping its own ratio,
   so the two columns end level. */
@media (min-width:640px){
  .feat-post__media{aspect-ratio:auto;height:100%;min-height:clamp(300px,26vw,420px)}
}
.feat-post__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.feat-post:hover .feat-post__media img{transform:scale(1.04)}
.feat-post__flag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:2;
  background:var(--saffron-500);color:var(--ink-900);box-shadow:var(--sh-sm);
}
.feat-post__body{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:clamp(20px,2.4vw,30px);
}
.feat-post__title{
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);margin:0;line-height:1.24;
}
.feat-post__title a{color:inherit;text-decoration:none}
.feat-post__title a::after{content:"";position:absolute;inset:0;z-index:1}
.feat-post__title a:hover{color:var(--saffron-700)}
.feat-post__excerpt{color:var(--text-muted);margin:0;font-size:var(--fs-sm);line-height:1.65}
.feat-post__meta{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:6px var(--sp-3);align-items:center;
  font-size:var(--fs-xs);color:var(--text-muted);
}
.feat-post .link-arrow{position:relative;z-index:2}

/* Compact "also new" rail beside the pick */
.feat-side{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.feat-side__head{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin:0;
}
.mini-list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}
.mini-list li{margin:0}
.mini-post{
  position:relative;display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-4) 0;border-top:1px solid var(--line-soft);
}
.mini-list li:first-child .mini-post{border-top:0;padding-top:0}
.mini-post__thumb{
  width:76px;height:58px;border-radius:var(--r-md);object-fit:cover;flex:none;background:var(--ink-100);
}
.mini-post__body{min-width:0}
.mini-post__title{
  font-family:var(--font-head);font-size:14.5px;font-weight:600;color:var(--heading);
  line-height:1.35;margin:0 0 4px;
}
.mini-post__title a{color:inherit;text-decoration:none}
.mini-post__title a::after{content:"";position:absolute;inset:0}
.mini-post__title a:hover{color:var(--saffron-700)}
.mini-post__meta{font-size:var(--fs-xs);color:var(--text-muted);margin:0}

/* ---------- 3. Toolbar: search + category chips -------------------- */
.blog-toolbar{
  display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-sm);margin-bottom:clamp(24px,3vw,40px);
}
.blog-toolbar__row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between}
.blog-search{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0}
.blog-search .field{flex:1;min-width:0}
.blog-search .field__control{display:flex;align-items:center}
.blog-search .input{padding-left:42px}
.blog-search__icon{
  position:absolute;left:14px;top:50%;translate:0 -50%;width:18px;height:18px;
  color:var(--ink-400);pointer-events:none;
}
.blog-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.blog-count{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.blog-count b{color:var(--ink-800);font-weight:600}

/* ---------- 4. Index layout: cards + rail -------------------------- */
.blog-layout{display:grid;gap:clamp(28px,3.4vw,52px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .blog-layout{grid-template-columns:minmax(0,1fr) minmax(0,300px)} }
.blog-main{min-width:0}

.post-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.blog-empty{
  border:1px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(28px,4vw,48px);text-align:center;
}
.blog-empty h3{margin-bottom:var(--sp-2)}
.blog-empty p{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--sp-5)}

.blog-pager{margin-top:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.blog-pager[hidden]{display:none}
.pagination [aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- 5. Side rail ------------------------------------------- */
.blog-aside{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);min-width:0}
@media (min-width:1024px){
  .blog-aside{position:sticky;top:calc(var(--header-h) + 20px)}
}
.rail-card{padding:var(--sp-5)}
.rail-card h3{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-4);
}
.rail-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.rail-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.rail-links li{margin:0;border-top:1px solid var(--line-soft)}
.rail-links li:first-child{border-top:0}
.rail-links a{
  display:flex;gap:10px;align-items:flex-start;padding:11px 0;
  font-size:13.5px;line-height:1.45;color:var(--ink-700);text-decoration:none;font-weight:500;
}
.rail-links a:hover{color:var(--saffron-700)}
.rail-links b{
  font-family:var(--font-head);font-size:13px;color:var(--saffron-700);flex:none;
  font-variant-numeric:tabular-nums;width:18px;
}
.rail-card .cluster .chip{min-height:32px;font-size:13px}
.rail-wa{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---------- 6. Newsletter band (the page's single dark section) ----- */
.news-grid{display:grid;gap:clamp(28px,3.6vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){ .news-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)} }
.news-points{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.news-points li{display:flex;gap:11px;margin:0;font-size:var(--fs-sm);color:var(--text-on-dark-muted);line-height:1.55}
.news-points svg{width:19px;height:19px;color:var(--saffron-300);flex:none;margin-top:1px}
.news-points b{color:#fff;font-weight:600}
/* Sample alerts, so a reader can see what lands before signing up */
.news-preview{margin-top:clamp(24px,3vw,36px)}
.news-preview__head{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--saffron-300);margin:0 0 var(--sp-4);
}
.news-preview__cards{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.news-preview .wa-card{flex:1 1 260px;max-width:340px}
/* The white .wa-card on a dark band keeps its own ink: shared rules now. */
.news-preview__note{margin:var(--sp-4) 0 0;font-size:var(--fs-xs);color:var(--text-on-dark-muted)}

.news-card{padding:clamp(22px,2.6vw,32px)}
/* The title sits inside the form (so it disappears with it on success),
   and the form is a .stack, so the gap does the spacing. */
.news-card__title{font-size:var(--fs-h4);margin:0 0 var(--sp-2)}
.news-card .form-success .cluster{justify-content:flex-start}
.news-card .field__label{color:#fff}
.news-card .field__hint,.news-card .form-consent{color:var(--text-on-dark-muted)}
.news-card .check{color:var(--text-on-dark-muted)}
/* The shared required marker is --danger-fg (#B23A2E), which is unreadable
   on this dark card. Saffron-300 is the accent this band already uses.
   The consent box is required too, so it carries the same marker. */
.news-card .req{color:var(--saffron-300);font-weight:700}
.news-card .check .req{margin-right:3px}
.news-card .check input{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.news-card .form-demo-note{
  background:rgba(245,151,61,.12);border-color:rgba(245,151,61,.34);color:var(--text-on-dark-muted);
}
.news-card .form-success{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.news-card .form-success p{color:var(--text-on-dark-muted)}

/* ---------- 7. Editorial promise ----------------------------------- */
.promise-grid{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .promise-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.promise-foot{
  margin-top:clamp(24px,3vw,40px);padding-top:var(--sp-6);border-top:1px dashed var(--line-strong);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
}
.promise-foot p{margin:0;max-width:62ch;font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- 8. CTA band art ---------------------------------------
   Copied verbatim from assets/css/pages/home.css: the two positioning
   rules for the CTA band illustration are not in the shared sheet, so
   every page that uses the band has to repeat them. The ridges stretch
   horizontally, and the climbers sit in their own uniformly scaled SVG
   parked on the crest via --ridge-h and --crest (both set on .cta-band
   in styles.css), so there is no rectangular seam at 390px. */