/* /blog/ index only. Built on the site tokens in style.css; generated markup
   comes from _publisher/build_blog_index.py. --bx-muted is the AA-passing
   secondary text colour: --ink-40 is 3.0:1 on paper, this is 5.0:1. */
:root { --bx-muted: #666C74; --bx-focus: var(--emerald); }

.bx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bx-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

[data-kind="blog"] a:focus-visible,
[data-kind="blog"] button:focus-visible,
[data-kind="blog"] input:focus-visible { outline: 2px solid var(--bx-focus); outline-offset: 3px; }

/* ---------- Page head ---------- */
.bx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
}
.bx-head__text { min-width: 0; }
.bx-head h1 { font-size: clamp(30px, 3vw, 38px); margin: 0 0 var(--sp-2); line-height: 1.12; }
.bx-head p { margin: 0; font-size: var(--f-17); color: var(--ink-70); }
.bx-search { flex: 0 0 280px; }
.bx-search[hidden] { display: none; }
.bx-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.bx-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-4) 0 40px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%234A4F57' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.5-4.5'/%3E%3C/svg%3E") no-repeat 13px center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.bx-search input::placeholder { color: var(--bx-muted); opacity: 1; }

/* ---------- Category row: one scrolling line, underlined tabs ---------- */
.bx-cats { margin-top: var(--sp-4); }
.bx-cats .blog-cats__list {
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--hairline);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  gap: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bx-cats .blog-cats__list::-webkit-scrollbar { display: none; }
.bx-cats li { flex: none; }
.bx-cats .blog-cats__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: var(--f-15);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-70);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.bx-cats .blog-cats__link:hover { color: var(--emerald-d); background: none; border-color: var(--hairline); }
.bx-cats .blog-cats__link[aria-current="page"] { color: var(--emerald-d); background: none; font-weight: 700; border-color: var(--emerald); }
.bx-cats .blog-cats__link:focus-visible { outline-offset: -2px; }

/* ---------- Lead + newest ---------- */
.bx-top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-5);
}
.bx-lead {
  position: relative;
  display: flex;
  min-height: 390px;
  padding: var(--sp-6);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: radial-gradient(120% 120% at 88% 8%, #18946E 0%, var(--emerald-d) 46%, #073D2C 100%);
  border-radius: 16px;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.bx-lead:hover { transform: translateY(-2px); }
.bx-lead__art {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 250px;
  height: 250px;
  color: var(--gold);
  opacity: .34;
  z-index: -1;
}
.bx-lead__art .bx-icon { stroke-width: .7; }
.bx-lead__body { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }
.bx-kicker {
  margin-bottom: var(--sp-3);
  font-size: var(--f-13);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F0C869;
}
.bx-lead__title {
  max-width: 17em;
  margin: 0 0 var(--sp-3);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  color: #fff;
}
.bx-lead__desc { max-width: 56ch; font-size: var(--f-17); line-height: 1.55; color: #DDEDE7; }
.bx-lead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  font-size: var(--f-15);
  color: #DDEDE7;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.bx-lead__more { font-weight: 700; color: #fff; }
.bx-lead:hover .bx-lead__more { text-decoration: underline; text-underline-offset: 3px; }

.bx-label {
  margin: 0 0 var(--sp-2);
  font-family: var(--sans);
  font-size: var(--f-13);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.bx-newest__list { list-style: none; margin: 0; padding: 0; }
.bx-newest__list li + li { border-top: 1px solid var(--hairline); }
.bx-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  text-decoration: none;
}
.bx-row__title {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -.006em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.bx-row:hover .bx-row__title { color: var(--emerald-d); }

/* ---------- Shared card atoms ---------- */
.bx-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--emerald-t);
  border-radius: var(--radius);
}
.bx-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* OG cards: the title sits on the left, so only the right 40% is shown. */
.bx-media--art { position: relative; background: #0B1A33; }
.bx-media--art img { position: absolute; top: 50%; right: 0; width: 250%; max-width: none; height: auto; transform: translateY(-52%); }
.bx-media--cover {
  display: grid;
  place-items: center;
  color: #F0C869;
  background: radial-gradient(110% 130% at 85% 0%, #17906B 0%, var(--emerald-d) 58%, #073D2C 100%);
}
.bx-media--cover .bx-icon { width: 34%; height: auto; max-height: 62%; aspect-ratio: 1; stroke-width: 1.2; }
.bx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sp-2);
  font-size: var(--f-13);
  color: var(--bx-muted);
}
.bx-cat { font-weight: 600; color: var(--emerald-d); }
.bx-cat::after { content: "·"; margin-left: var(--sp-2); font-weight: 400; color: var(--bx-muted); }

/* ---------- Topic sections ---------- */
.bx-topic { margin-top: var(--sp-7); }
.bx-topic::before, .bx-archive::before { content: ""; display: block; height: 1px; margin-bottom: var(--sp-5); background: var(--hairline); }
.bx-topic__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.bx-topic__head h2 { margin: 0; font-size: var(--f-26); line-height: 1.2; }
.bx-topic__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px 0;
  font-size: var(--f-15);
  font-weight: 600;
  color: var(--emerald-d);
  text-decoration: none;
}
.bx-topic__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
}
.bx-card { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; text-decoration: none; }
.bx-card .bx-media { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.bx-card:hover .bx-media { transform: translateY(-2px); }
.bx-card__body { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-card__title {
  margin: 2px 0 0;
  font-size: var(--f-20);
  line-height: 1.25;
  color: var(--ink);
}
.bx-card:hover .bx-card__title { color: var(--emerald-d); }
.bx-card__desc {
  margin-top: var(--sp-1);
  font-size: var(--f-15);
  line-height: 1.5;
  color: var(--ink-70);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- Inline offer: labelled, in the flow, never over content ---------- */
.bx-offer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.bx-offer > * { max-width: 100%; }
.bx-offer__tag { display: block; margin-bottom: var(--sp-2); font-size: var(--f-13); font-weight: 600; color: var(--bx-muted); }
.bx-offer__main {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.bx-offer .bx-offer__logo { flex: none; width: 120px; height: 56px; padding: 6px 10px; }
.bx-offer__logo img { width: 100%; height: 100%; object-fit: contain; }
.bx-offer__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bx-offer__name { font-family: var(--serif); font-size: var(--f-17); font-weight: 700; color: var(--ink); }
.bx-offer__bonus { font-size: var(--f-15); color: var(--ink-70); }
.bx-offer__score { flex: none; font-family: var(--serif); font-size: var(--f-20); font-weight: 700; color: var(--emerald-d); }
.bx-offer__score small { font-family: var(--sans); font-size: var(--f-13); font-weight: 400; color: var(--bx-muted); }
.bx-offer__cta { flex: none; }
.bx-offer__rg { margin: var(--sp-2) 0 0; font-size: var(--f-13); line-height: 1.6; color: var(--bx-muted); }
.bx-offer__rg a { color: var(--emerald-d); }

/* ---------- Archive: compact two-column list ---------- */
.bx-archive { margin-top: var(--sp-7); margin-bottom: var(--sp-8); }
.bx-archive__count { margin: 0; font-size: var(--f-15); color: var(--bx-muted); }
.bx-archive .post-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-7);
  margin: 0;
}
.bx-archive .post-card { border-top: 1px solid var(--hairline); }
.bx-archive .post-card[hidden] { display: none; }
.bx-archive .post-card__link {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.bx-archive .post-card__link:hover { transform: none; }
.bx-archive__body { display: block; min-width: 0; }
.bx-archive .post-card__meta { gap: 2px var(--sp-2); flex-wrap: wrap; color: var(--bx-muted); }
.bx-archive .post-card__cat { padding: 0; background: none; color: var(--emerald-d); letter-spacing: 0; text-transform: none; }
.bx-archive .post-card__title {
  margin: 2px 0 0;
  font-size: var(--f-17);
  line-height: 1.28;
  letter-spacing: -.006em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bx-archive .post-card__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.bx-more {
  display: block;
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  margin: var(--sp-5) auto 0;
  font: inherit;
  font-size: var(--f-15);
  font-weight: 600;
  color: var(--emerald-d);
  background: var(--surface);
  border: 1px solid var(--emerald);
  border-radius: var(--radius);
  cursor: pointer;
}
.bx-more[hidden] { display: none; }
.bx-more:hover { color: #fff; background: var(--emerald-d); }
.bx-empty { padding: var(--sp-6) 0; font-size: var(--f-17); color: var(--ink-70); text-align: center; }
.bx-empty[hidden] { display: none; }

/* ---------- Category pages: image tiles ---------- */
.bx-head--cat .bx-head__text { max-width: 760px; }
.bx-head--cat h1 { font-size: clamp(30px, 3.2vw, 42px); }
.bx-archive--tiles { margin-top: var(--sp-5); margin-bottom: 0; }
.bx-archive--tiles::before { display: none; }
.bx-archive--tiles .post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.bx-archive--tiles .post-card { border-top: 0; }
.bx-archive--tiles .post-card__link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  height: 100%;
  padding: 0;
}
.bx-archive--tiles .post-card__link:hover .bx-media { transform: translateY(-2px); }
.bx-archive--tiles .bx-media { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.bx-archive--tiles .post-card__title { margin-top: var(--sp-1); font-size: var(--f-20); line-height: 1.25; -webkit-line-clamp: 3; }
.bx-archive--tiles .post-card__desc {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  margin-top: var(--sp-2);
  font-size: var(--f-15);
  line-height: 1.5;
  color: var(--ink-70);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bx-archive .cat-editorial { margin-top: var(--sp-7); }
.bx-archive .cat-editorial h2 { font-size: var(--f-26); margin-top: var(--sp-6); }
.bx-about { max-width: 760px; margin-top: var(--sp-7); }
.bx-about h2 { font-size: var(--f-26); margin-bottom: var(--sp-3); }
.bx-about p { margin: 0; }
[data-bx-archive] + .bx-offer { margin-top: var(--sp-6); padding-top: 0; padding-bottom: 0; }

/* ---------- Search results mode ---------- */
[data-bx-browse][hidden] { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .bx-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .bx-lead { min-height: 330px; }
  .bx-archive .post-grid { gap: 0 var(--sp-5); }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .bx-head { display: block; padding-top: var(--sp-3); }
  .bx-head h1 { font-size: 28px; }
  .bx-head p { display: none; }
  .bx-search { margin-top: var(--sp-3); }
  .bx-cats { margin-top: var(--sp-2); }
  .bx-top { margin-top: var(--sp-4); }
  .bx-lead { min-height: 300px; padding: var(--sp-5); border-radius: 14px; }
  .bx-lead__art { width: 170px; height: 170px; top: -14px; right: -14px; }
  .bx-lead__title { font-size: 26px; }
  .bx-lead__desc {
    font-size: var(--f-15);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .bx-topic { margin-top: var(--sp-6); }
  .bx-topic__head { margin-bottom: var(--sp-4); }
  .bx-topic__head h2 { font-size: 22px; }
  .bx-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  /* After the first story, phones get compact rows: full-width images in three
     stacked cards per section is what made the old page so long. */
  .bx-grid li:not(:first-child) .bx-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--hairline);
  }
  .bx-grid li:not(:first-child) .bx-card__title { font-size: 17px; line-height: 1.28; }
  .bx-grid li:not(:first-child) .bx-card__desc { display: none; }
  .bx-offer__main { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
  .bx-offer__text { flex: 1 1 40%; }
  .bx-offer__cta { flex: 1 1 100%; justify-content: center; text-align: center; }
  .bx-archive .post-grid { grid-template-columns: minmax(0, 1fr); }
  .bx-archive .post-card__link { grid-template-columns: 96px minmax(0, 1fr); }
  .bx-head--cat p {
    margin-top: var(--sp-2);
    font-size: var(--f-15);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .bx-archive--tiles .post-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Same rhythm as the index: one full-width story, then compact rows. */
  .bx-archive--tiles .post-card:not(:first-child) .post-card__link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--hairline);
  }
  .bx-archive--tiles .post-card:not(:first-child) .post-card__title { font-size: 17px; line-height: 1.28; -webkit-line-clamp: 3; }
  .bx-archive--tiles .post-card:not(:first-child) .post-card__desc { display: none; }
  .bx-archive--tiles .post-card:first-child { margin-bottom: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .bx-lead, .bx-card .bx-media { transition: none; }
  .bx-lead:hover, .bx-card:hover .bx-media { transform: none; }
}