/* Blog article styling.
 *
 * This lived as a <style> block duplicated inside all 33 posts, with the palette
 * written as literal hex - which meant every article would have rendered
 * near-black text on a dark ground. One token-based sheet governs them all, and
 * new posts inherit it without carrying any CSS of their own.
 *
 * The callout box previously used a 3px top rail and the CTA a coloured border
 * edge; both are the accent-bar treatment we do not use. They are flat bordered
 * panels now.
 */

.asb{
  font-family:var(--f-body);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  max-width:760px;
  margin:0 auto;
  padding:0 0 8px;
}
.asb *{box-sizing:border-box;max-width:100%}
.asb p{margin:0 0 18px}
.asb .lede{font-size:19.5px;line-height:1.55;color:var(--ink-2);font-weight:500;margin-bottom:26px}

.asb h2{
  font-family:var(--f-display);
  font-size:30px;font-weight:700;line-height:1.14;letter-spacing:-.005em;
  color:var(--ink);
  margin:38px 0 14px;padding-top:20px;
  border-top:1px solid var(--line);
}
.asb h3{
  font-family:var(--f-display);
  font-size:22px;font-weight:700;line-height:1.28;color:var(--ink);
  margin:28px 0 10px;
}

.asb ul,.asb ol{margin:0 0 18px;padding-left:22px}
.asb li{margin-bottom:9px;color:var(--ink-2)}
.asb strong{color:var(--ink)}

.asb figure{margin:0 0 28px}
.asb figure img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line)}
.asb figcaption{font-size:15px;color:var(--ink-3);margin-top:8px;line-height:1.5}

.asb .box{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 22px;margin:0 0 26px;
}
.asb .box p:last-child{margin-bottom:0}
.asb .box .t{
  font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-on);margin-bottom:8px;
}
/* The "note" variant is a deliberately inverse panel, not a tinted one. */
.asb .box.n{background:var(--inverse);border-color:var(--inverse-line)}
.asb .box.n .t{color:#ff8a8f}
.asb .box.n p{color:var(--inverse-ink-2)}
.asb .box.n strong{color:var(--inverse-ink)}

.asb .tw{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.asb table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px;background:var(--surface)}
.asb th{
  text-align:left;background:var(--surface-2);color:var(--ink);
  font-weight:700;padding:11px 13px;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.asb td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);font-size:16px;font-variant-numeric:tabular-nums}
.asb tr:last-child td{border-bottom:0}

.asb .cta{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px;margin:36px 0 8px;
}
.asb .cta h3{margin:0 0 8px;font-size:21px;padding:0;border:0}
.asb .cta p{font-size:15.5px;color:var(--ink-2);margin-bottom:16px}
.asb .cta a.b{
  display:inline-block;background:var(--brand);color:#fff!important;
  text-decoration:none!important;font-weight:600;font-size:16.5px;
  padding:14px 26px;border-radius:var(--r-sm);
}
.asb .cta a.b:hover{background:var(--brand-h)}

.asb a{color:var(--brand-on);text-decoration:underline;text-underline-offset:2px}

@media(max-width:600px){
  .asb{font-size:16.5px}
  .asb h2{font-size:25px}
  .asb h3{font-size:20px}
  .asb .lede{font-size:18px}
}

/* ---------- single article ------------------------------------------------ */

.as-article .as-arthead{padding:clamp(40px,5vw,68px) 0 clamp(18px,2vw,26px)}
.as-article .as-arthead h1{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.006em;
  margin:12px 0 0;text-wrap:balance;
}
.as-article .as-meta{margin-top:14px;color:var(--ink-3);font-size:14px;display:flex;gap:9px;flex-wrap:wrap}
.as-article .as-artimg{margin:0 0 clamp(26px,3vw,40px)}
.as-article .as-artimg img{
  width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line);aspect-ratio:16/7;object-fit:cover;
}
.as-article .as-artbody{padding-bottom:clamp(24px,3vw,40px)}
.as-article .as-artcta{margin-bottom:clamp(40px,5vw,68px)}

.as-article .as-relcard{text-decoration:none!important;padding:0 0 20px;overflow:hidden;gap:0}
.as-article .as-relcard .as-shot{display:block;border:0;border-radius:0;margin-bottom:16px}
.as-article .as-relcard .as-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.as-article .as-relcard h3{padding:0 22px;font-size:19px;color:var(--ink)}
.as-article .as-relcard p{padding:8px 22px 0;font-size:14.5px;color:var(--ink-2)}
.as-article .as-relcard:hover h3{color:var(--brand-on)}