/* The CardBase blog.
 *
 * Standalone on purpose: these pages are served by Go with no React, no bundler and no app CSS, so
 * everything they need is here. The tokens are copied from landing/index.html rather than invented,
 * because the blog hangs off the marketing site and a reader crossing between them should not be
 * able to tell where one ends.
 *
 * Mobile first. Most people who open an article open it on a phone, from a link. */

:root {
  --slate:        #0f172a;
  --slate-mid:    #1e293b;
  --slate-soft:   #334155;
  --green:        #16a34a;
  --green-dark:   #14532d;
  --green-soft:   #f0fdf4;
  --green-mid:    #bbf7d0;
  --white:        #ffffff;
  --off:          #f8fafc;
  --gray-100:     #f1f5f9;
  --gray-200:     #e2e8f0;
  --gray-400:     #94a3b8;
  --gray-600:     #475569;
  --ink:          #0f172a;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    30px;
  --measure:      68ch;
  --pad:          20px;

  /* A chart's series colours. They are custom properties rather than literals in the markup so
     that recolouring the palette is a stylesheet change (PageVersion) and not a reason to
     re-render every article that was ever published (RenderVersion). Six, then it wraps: a
     seventh line on one chart is a chart that wanted to be two. */
  --series-1:     #16a34a;
  --series-2:     #2563eb;
  --series-3:     #f59e0b;
  --series-4:     #db2777;
  --series-5:     #7c3aed;
  --series-6:     #0891b2;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Keyboard users land here first; it stays out of the way until it is focused. */
.ba-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--slate);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 10;
}
.ba-skip:focus { left: 0; }

/* ── site chrome ───────────────────────────────────────────────────────────────── */

.ba-site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px var(--pad) 0;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  z-index: 5;
}

.ba-logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--slate);
}
.ba-logo span { color: var(--green); }

/* On a phone the sections sit on their own row under the logo and scroll sideways rather than
   wrap, so the header keeps one fixed height. From tablet width they move inline. */
.ba-nav {
  order: 3;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 calc(var(--pad) - 14px);
  overflow-x: auto;
  scrollbar-width: none;
}
.ba-nav::-webkit-scrollbar { display: none; }
.ba-nav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.ba-nav a:hover { color: var(--slate); }
.ba-nav-cta {
  order: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius-xl);
}
.ba-nav-cta:hover { background: var(--green-dark); }

@media (min-width: 760px) {
  .ba-site-head { flex-wrap: nowrap; padding-bottom: 10px; }
  .ba-nav { order: 2; flex: 0 1 auto; margin: 0 0 0 auto; padding: 0; }
  .ba-nav-cta { order: 3; }
}

.ba-site-foot {
  margin-top: 72px;
  padding: 40px var(--pad);
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gray-200);
  background: var(--off);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ba-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.ba-foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
}
.ba-foot-nav a:hover { color: var(--green); }
.ba-foot-copy { font-size: 0.85rem; color: var(--gray-400); }

main { display: block; }

/* ── article ───────────────────────────────────────────────────────────────────── */

.ba-article { padding: 0 var(--pad); }

.ba-crumbs {
  max-width: var(--measure);
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ba-crumbs a { color: var(--green); text-decoration: none; }

.ba-head { max-width: var(--measure); margin: 16px auto 0; }
.ba-head h1 {
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--slate);
}
.ba-standfirst {
  margin-top: 14px;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--gray-600);
}
.ba-byline {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 0.9rem;
  color: var(--gray-600);
  /* Each separator is drawn out of flow in the gap to its item's left, and anything that lands
     past this edge is clipped. A byline wide enough to wrap — a long name, or the view count on a
     phone — therefore never starts its second line with a stray dot hanging there like a bullet. */
  overflow: hidden;
}
.ba-byline > * { position: relative; }
.ba-byline .ba-author { font-weight: 700; color: var(--slate); }
/* Every item but the first, whatever element it happens to be — the date is a <time>, so a
   span + span selector silently skipped the separator after it. */
.ba-byline > * + *::before {
  content: '·';
  position: absolute;
  right: 100%;
  margin-right: 10px;
  color: var(--gray-400);
}

.ba-hero {
  max-width: 1040px;
  margin: 28px auto 0;
}
/* A tall picture is not a licence to eat three screens. The box is capped at most of a screen and
 * the image is CONTAINED in it rather than cropped: a portrait cover scales down whole, and a chart
 * or a screenshot never loses its bottom row to make the layout tidy. */
.ba-hero img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-lg); }

/* ── the body copy ─────────────────────────────────────────────────────────────── */

.ba-body {
  max-width: var(--measure);
  margin: 32px auto 0;
  font-size: 1.08rem;
}

.ba-body > * + * { margin-top: 22px; }

/* Scoped to the paragraphs a TEXT block renders, which are direct children of the body. A block
   that renders its own <p> -- a callout, a chart's title, a card's name and price, a market
   readout -- names its colour with a single class, and an unscoped `.ba-body p` outranks every one
   of them. That is how a market panel's headline number ended up dark slate on dark navy. */
.ba-body > p { color: var(--slate-mid); }

.ba-body h2 {
  margin-top: 46px;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--slate);
  scroll-margin-top: 80px;
}
.ba-body h3 {
  margin-top: 34px;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--slate);
  scroll-margin-top: 80px;
}

.ba-body a {
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-color: var(--green-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ba-body a:hover { text-decoration-color: var(--green); }

.ba-body strong { font-weight: 700; color: var(--slate); }

.ba-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--gray-100);
  border-radius: 6px;
  padding: 2px 6px;
}

.ba-list { padding-left: 1.3em; color: var(--slate-mid); }
.ba-list li + li { margin-top: 10px; }
.ba-list li::marker { color: var(--green); font-weight: 700; }

.ba-rule {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 40px auto;
  max-width: 200px;
}

.ba-quote { margin-top: 32px; }
.ba-quote blockquote p {
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--slate);
  border-left: 4px solid var(--green);
  padding-left: 20px;
}
.ba-quote figcaption {
  margin-top: 12px;
  padding-left: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-400);
}

.ba-figure { margin-top: 32px; }
.ba-figure img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-md); }
.ba-figure figcaption,
.ba-chart figcaption,
.ba-table figcaption,
.ba-file figcaption {
  margin-top: 10px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--gray-400);
}
/* A picture is CONTAINED in its box rather than cropped to fill it, so a portrait or a narrow chart
 * leaves empty space on both sides. A caption pinned to the box's left edge then sits under nothing,
 * a long way from the thing it describes. Centring it puts it under the picture wherever the
 * picture ended up. A table fills its box, so a table's caption stays where it is. */
.ba-figure figcaption { text-align: center; }

/* A wide figure breaks the measure on a big screen and does nothing at all on a phone, where the
 * column is already the whole window. */
.ba-figure--wide { max-width: 1040px; }
@media (min-width: 1100px) {
  .ba-figure--wide { width: 100vw; max-width: 1040px; margin-left: calc((var(--measure) - 1040px) / 2); }
}

.ba-table { margin-top: 32px; }
.ba-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
/* Scoped to the scroller rather than to .ba-table, because three blocks put a table inside one:
   a table, the figures under a chart, and a market panel's movers. */
.ba-table-scroll table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.ba-table-scroll th,
.ba-table-scroll td {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
}
.ba-table-scroll thead th,
.ba-table-scroll tbody th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-600);
}
.ba-table-scroll thead th {
  background: var(--off);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ba-table-scroll tbody th { font-size: 0.95rem; color: var(--slate); }
.ba-table-scroll tbody tr:last-child td,
.ba-table-scroll tbody tr:last-child th { border-bottom: none; }

.ba-callout {
  margin-top: 32px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--green-soft);
  border-left: 4px solid var(--green);
}
.ba-callout--warning { background: #fffbeb; border-left-color: #f59e0b; }
.ba-callout p + p { margin-top: 12px; }
.ba-callout p { font-size: 1rem; color: var(--slate-mid); }
.ba-callout .ba-callout-title { font-weight: 700; color: var(--slate); }

/* ── the CardBase blocks ───────────────────────────────────────────────────────── */

/* A chart is inline SVG the server wrote, so it arrives drawn — no script, no layout shift, and
   the same picture for a crawler as for a reader. The figures live under it in a <details>,
   because a polyline is not data and nobody can read one aloud. */
.ba-chart { margin-top: 32px; }
/* The colour is set here rather than inherited: .ba-body p wins over anything a block's wrapper
   passes down, so every <p> inside a block has to name its own. */
.ba-chart-title {
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate);
}
.ba-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.ba-chart-grid line { stroke: var(--gray-200); stroke-width: 1; }
.ba-chart-y { font-size: 15px; fill: var(--gray-400); text-anchor: end; }
.ba-chart-x { font-size: 15px; fill: var(--gray-600); }
.ba-chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ba-chart-bar { rx: 2; }
.ba-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--gray-600);
}
.ba-chart-key li { display: flex; align-items: center; gap: 8px; }
.ba-chart-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ba-chart-numbers { margin-top: 14px; }
.ba-chart-numbers summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark);
}
.ba-chart-numbers .ba-table-scroll { margin-top: 12px; }

/* A referenced card. .ba-ref, not .ba-card: the index page already owns that name for an
   article tile. */
.ba-ref {
  margin-top: 32px;
  display: grid;
  gap: 18px;
  padding: 20px;
  background: var(--off);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
@media (min-width: 560px) {
  .ba-ref { grid-template-columns: 148px 1fr; align-items: center; gap: 22px; }
}
.ba-ref-art { display: block; }
.ba-ref-art img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: var(--radius-sm);
}
@media (min-width: 560px) { .ba-ref-art img { max-width: none; } }
.ba-ref-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: var(--slate); }
.ba-ref-meta { margin-top: 4px; font-size: 0.9rem; color: var(--gray-600); }
.ba-ref-price {
  margin-top: 12px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.ba-ref-asof { margin-top: 2px; font-size: 0.82rem; color: var(--gray-400); }
.ba-ref-link { margin-top: 12px; font-size: 0.92rem; }
.ba-ref figcaption {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--gray-400);
}

/* An attachment. One row that says what the file is, what it is called, how big it is, and that
   tapping it downloads — so nobody has to tap to find out which of those it does.

   The reset is `.ba-body .ba-file-link` rather than `.ba-file-link` because `.ba-body a` is (0,1,1)
   and a single class is (0,1,0): the same specificity trap recorded above `.ba-body > p`. Left
   alone, the whole row would come out green and underlined. */
.ba-file { margin-top: 32px; }
.ba-body .ba-file-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 18px;
  background: var(--off);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.ba-body .ba-file-link:hover { border-color: var(--green-mid); background: var(--green-soft); }
.ba-file-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--slate);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.ba-file-facts { min-width: 0; }
.ba-file-name {
  display: block;
  font-weight: 700;
  color: var(--slate);
  overflow-wrap: anywhere;
}
.ba-file-meta { display: block; margin-top: 3px; font-size: 0.86rem; color: var(--gray-600); }
.ba-file-go {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}
/* On a phone the pill drops to its own line rather than squeezing a long filename into nothing. */
.ba-file-go { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 560px) {
  .ba-body .ba-file-link { grid-template-columns: auto 1fr auto; }
  .ba-file-go { grid-column: auto; justify-self: end; }
}

/* A market reading. Dark, because it is a readout rather than prose, and a reader should be able
   to tell at a glance that these numbers came from us and not from the argument around them. */
.ba-market {
  margin-top: 32px;
  padding: 22px;
  background: var(--slate);
  color: var(--white);
  border-radius: var(--radius-lg);
}
.ba-market-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-mid);
}
.ba-market-level {
  margin-top: 6px;
  color: var(--white);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ba-market-stats { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 16px; }
.ba-market-stats dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
}
.ba-market-stats dd {
  margin: 2px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The word carries the sign, so the arrow-green and the arrow-red are decoration and not the
   only thing saying which way a number went. */
.ba-move { font-variant-numeric: tabular-nums; }
.ba-move--up { color: #4ade80; }
.ba-move--down { color: #f87171; }
.ba-move--flat { color: var(--gray-400); }
.ba-market .ba-table-scroll {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.ba-market th,
.ba-market td { border-bottom-color: rgba(255, 255, 255, 0.12); }
.ba-market tbody th { color: var(--white); }
.ba-market thead th { background: rgba(255, 255, 255, 0.05); color: var(--gray-400); }
.ba-market-set { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gray-400); }
/* A table of movers whose Move column is off the right-hand edge is a list of card names. Card
   names are the only thing here long enough to hold the table open, so they wrap and the two
   number columns keep their one line. */
.ba-market-movers th[scope="row"] { white-space: normal; min-width: 8em; }
.ba-market-movers th,
.ba-market-movers td { padding: 10px 12px; }
.ba-market figcaption { margin-top: 14px; font-size: 0.82rem; color: var(--gray-400); }

/* A market study: several universes measured against each other on one calendar. Light rather
   than dark like .ba-market, because it CONTAINS a chart — and the chart's axes, gridlines and
   series colours are all drawn for a white ground. It is unboxed for the same reason: the chart
   already has a border, and a bordered panel holding a bordered panel is a box for its own sake. */
.ba-study { margin-top: 32px; }
/* Colour is named on every <p> in here, not inherited: .ba-body p outranks anything the wrapper
   could pass down. The same rule that shaped .ba-chart-title. */
.ba-study-title {
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate);
}

/* The headline. One number big enough to be the thing a reader takes away, the sentence that says
   what it means, and underneath it what every OTHER series did — because a single return with
   nothing beside it is the exact shape of finding this block exists to stop anyone publishing. */
.ba-study-stat {
  padding: 18px 20px;
  background: var(--green-soft);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.ba-study-value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ba-study-lead {
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slate);
}
.ba-study-sub {
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray-600);
}
.ba-study-series {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.ba-study-series li { display: flex; align-items: center; gap: 8px; }
.ba-study-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ba-study-name { color: var(--gray-600); }

/* .ba-move's greens and reds are picked for the dark slate of .ba-market and wash out to nothing
   on this ground, so the study names its own. The sign is still written into the text either way. */
.ba-study .ba-move--up { color: #15803d; }
.ba-study .ba-move--down { color: #b91c1c; }
.ba-study .ba-move--flat { color: var(--gray-600); }

/* The caveat. Set apart from the figures and quieter than them, because it is the server talking
   about what the figures leave out rather than the author arguing from them. */
.ba-study-note {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid var(--gray-200);
}
.ba-study-note p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.ba-study-note p + p { margin-top: 8px; }

.ba-study-movers { margin-top: 0; }
.ba-study .ba-table-scroll { margin-top: 20px; }
.ba-study-movers caption {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-600);
}
/* A movers table whose Move column is off the right-hand edge is a list of card names. The names
   are the only thing long enough to hold it open, so they wrap and the figures keep their line. */
.ba-study-movers th[scope="row"] { white-space: normal; min-width: 8em; }
.ba-study-movers th,
.ba-study-movers td { padding: 10px 12px; }
.ba-study-cap {
  margin-top: 12px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--gray-400);
}

/* ── index ─────────────────────────────────────────────────────────────────────── */

/* The page head shares the FEATURE's left edge, not the article body's. A 68ch measure centred
   over a 1040px grid reads as a misalignment on a wide screen — the title floats in from nowhere.
   The lede keeps the measure, because a lede is still prose. */
.ba-index-head {
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 0 var(--pad);
}
.ba-index-head h1 {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--slate);
}
.ba-index-head p { max-width: var(--measure); margin-top: 12px; color: var(--gray-600); font-size: 1.05rem; }

.ba-empty { max-width: 1040px; margin: 40px auto; padding: 0 var(--pad); color: var(--gray-400); }

.ba-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}

.ba-meta { display: block; font-size: 0.85rem; color: var(--gray-400); }

.ba-feature {
  display: block;
  max-width: 1040px;
  margin: 32px auto 0;
  padding: 0 var(--pad);
  text-decoration: none;
}
.ba-feature-img img { width: 100%; border-radius: var(--radius-lg); }
.ba-feature-text { display: block; margin-top: 18px; }
.ba-feature-title {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--slate);
}
.ba-feature-excerpt { display: block; margin-top: 10px; color: var(--gray-600); }
.ba-feature .ba-meta { margin-top: 12px; }
.ba-feature:hover .ba-feature-title { color: var(--green-dark); }

.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1040px;
  margin: 44px auto 0;
  padding: 0 var(--pad);
}
@media (min-width: 720px)  { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }

.ba-card { display: block; text-decoration: none; }
.ba-card-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.ba-card-title {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--slate);
}
.ba-card-excerpt { display: block; margin-top: 8px; font-size: 0.95rem; color: var(--gray-600); }
.ba-card .ba-meta { margin-top: 10px; }
.ba-card:hover .ba-card-title { color: var(--green-dark); }

.ba-more { max-width: 1040px; margin: 72px auto 0; }
.ba-more h2 {
  padding: 0 var(--pad);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate);
}
.ba-more .ba-grid { margin-top: 24px; }

/* ── the one advert ────────────────────────────────────────────────────────────── */

.ba-cta {
  max-width: var(--measure);
  margin: 64px auto 0;
  padding: 32px var(--pad);
  text-align: center;
  background: var(--slate);
  border-radius: var(--radius-lg);
  color: var(--white);
}
@media (min-width: 720px) { .ba-cta { padding: 40px; } }
.ba-cta-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.ba-cta-text { margin-top: 10px; color: #cbd5e1; font-size: 1rem; }
.ba-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 28px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-xl);
}
.ba-cta-btn:hover { background: var(--green-bright, #22c55e); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}