/* Blog index: editorial layout with generative covers. Same copy, same theme. */
:root { --bc-blue: 61, 91, 255; --bc-green: 63, 200, 150; --bc-ease: cubic-bezier(.2, .75, .15, 1); }

html body .blog-index { max-width: 1180px !important; margin: 0 auto !important; padding: 0 32px 120px !important; }
html body .blog-index-hero {
  max-width: none !important; margin: 0 0 40px !important; padding: 120px 0 44px !important; text-align: left !important;
  border-bottom: 1px solid #e8e8e5; display: grid !important; grid-template-columns: 1.3fr 1fr; gap: 24px 64px; align-items: end;
}
html body .blog-index-hero .eyebrow { grid-column: 1 / -1; justify-self: start; margin: 0 !important; }
html body .blog-index-hero h1 {
  margin: 0 !important; max-width: 11em !important; font-size: clamp(44px, 5.6vw, 76px) !important; line-height: .98 !important;
  font-weight: 700 !important; letter-spacing: -0.035em !important; text-align: left !important;
}
html body .blog-index-hero > p:not(.eyebrow) {
  margin: 0 0 8px !important; max-width: 40ch !important; font-size: 18px !important; line-height: 1.6 !important; color: #5f5f5a !important; text-align: left !important;
}

/* Filter */
.bc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.bc-filter button {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #e3e3e0; background: #fff; color: #55554f;
  font: 550 13px/1 'Geist', system-ui, sans-serif; cursor: pointer; transition: all .25s var(--bc-ease);
}
.bc-filter button:hover { border-color: #b9b9b4; color: #111; }
.bc-filter button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }

/* Grid */
html body .blog-index .blog-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; max-width: none !important;
}
html body .blog-index .blog-card {
  display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important;
  border: 1px solid #e8e8e5 !important; border-radius: 16px !important; background: #fff !important; min-height: 0 !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 3%) !important;
  transition: transform .5s var(--bc-ease), box-shadow .5s var(--bc-ease), border-color .3s ease !important;
}
html body .blog-index .blog-card:hover {
  transform: translateY(-6px) !important; border-color: #d4d4cf !important;
  box-shadow: 0 2px 6px rgb(0 0 0 / 4%), 0 30px 60px -30px rgb(0 0 0 / 28%) !important;
}
html body .blog-index .blog-card > :not(.bc-cover):not(.fx-spot) { margin-left: 24px !important; margin-right: 24px !important; }
html body .blog-index .blog-card .label { margin-top: 22px !important; align-self: flex-start; }
html body .blog-index .blog-card h2 {
  margin-top: 14px !important; margin-bottom: 10px !important; font-size: 21px !important; line-height: 1.2 !important;
  letter-spacing: -0.015em !important; font-weight: 680 !important; color: #111 !important; text-wrap: balance;
}
html body .blog-index .blog-card p { margin-top: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: #62625d !important; }
html body .blog-index .blog-card .meta {
  margin-top: auto !important; margin-bottom: 22px !important; padding-top: 18px !important; display: inline-flex !important; align-items: center; gap: 8px;
  background: none !important; border: 0 !important; color: #111 !important; font-weight: 650 !important;
}
.bc-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--bc-ease); }
.blog-card:hover .bc-arrow { transform: translateX(5px); }

/* Covers */
.bc-cover {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid #eeeeeb;
  background: radial-gradient(120% 90% at 20% 0%, #ffffff 0%, #f4f4f1 60%, #eeeeea 100%);
}
.bc-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(0 0 0 / 3.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 3.5%) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%);
}
.bc-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--bc-ease); }
.blog-card:hover .bc-cover svg { transform: scale(1.05); }
.bc-cover[data-tone="blue"] { --bc-acc: var(--bc-blue); }
.bc-cover[data-tone="green"] { --bc-acc: var(--bc-green); }
.bc-accent { stroke: rgb(var(--bc-acc)); }
.bc-accent-fill { fill: rgb(var(--bc-acc)) !important; }
.bc-index {
  position: absolute; left: 16px; top: 14px; z-index: 1; font: 600 11px/1 'Geist Mono', ui-monospace, monospace; color: #8a8a85;
  padding: 5px 7px; border-radius: 6px; background: rgb(255 255 255 / 80%); border: 1px solid #e6e6e2;
}
.bc-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--bc-ease) .2s; }
.blog-card.fx-on .bc-draw, .blog-card:hover .bc-draw, .no-fx .bc-draw { stroke-dashoffset: 0; }
.bc-ring { transform-box: fill-box; transform-origin: center; animation: bcRing 2.6s ease-out infinite; }
@keyframes bcRing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.bc-travel { animation: bcTravel 4s var(--bc-ease) infinite; }
@keyframes bcTravel { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(350px); } }
.bc-travel-short { animation: bcTravelS 3.2s var(--bc-ease) infinite; }
@keyframes bcTravelS { 0% { transform: translateX(0); opacity: 1; } 80% { transform: translateX(280px); opacity: 1; } 100% { transform: translateX(290px); opacity: 0; } }
.bc-cover text { pointer-events: none; }
.bc-spin { transform-origin: 200px 250px; animation: bcSpin 60s linear infinite; }
@keyframes bcSpin { to { transform: rotate(360deg); } }

/* Featured story */
html body .blog-index .blog-card.is-featured {
  grid-column: 1 / -1; display: grid !important; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 0;
}
html body .blog-index .blog-card.is-featured .bc-cover { grid-row: 1 / -1; aspect-ratio: auto; min-height: 380px; border-bottom: 0; border-right: 1px solid #eeeeeb; }
html body .blog-index .blog-card.is-featured > :not(.bc-cover):not(.fx-spot) { margin-left: 44px !important; margin-right: 44px !important; }
html body .blog-index .blog-card.is-featured .label { margin-top: 44px !important; }
html body .blog-index .blog-card.is-featured h2 { font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.1 !important; margin-top: 18px !important; }
html body .blog-index .blog-card.is-featured p { font-size: 16.5px !important; max-width: 46ch; }
html body .blog-index .blog-card.is-featured .meta { margin-bottom: 44px !important; }

/* Filtering */
.blog-card.is-hidden { display: none !important; }
.blog-grid.is-filtered .blog-card.is-featured { grid-column: auto; display: flex !important; }
.blog-grid.is-filtered .blog-card.is-featured .bc-cover { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid #eeeeeb; }
.blog-grid.is-filtered .blog-card.is-featured > :not(.bc-cover):not(.fx-spot) { margin-left: 24px !important; margin-right: 24px !important; }
.blog-grid.is-filtered .blog-card.is-featured h2 { font-size: 21px !important; }
.blog-grid.is-filtered .blog-card.is-featured .label { margin-top: 22px !important; }
.blog-grid.is-filtered .blog-card.is-featured .meta { margin-bottom: 22px !important; }

@media (max-width: 980px) {
  html body .blog-index .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .blog-index-hero { grid-template-columns: 1fr; padding-top: 104px !important; }
}
@media (max-width: 680px) {
  html body .blog-index { padding: 0 18px 80px !important; }
  html body .blog-index .blog-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  html body .blog-index .blog-card.is-featured { display: flex !important; }
  html body .blog-index .blog-card.is-featured .bc-cover { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid #eeeeeb; }
  html body .blog-index .blog-card.is-featured > :not(.bc-cover):not(.fx-spot) { margin-left: 22px !important; margin-right: 22px !important; }
  html body .blog-index .blog-card.is-featured .label { margin-top: 22px !important; }
  html body .blog-index .blog-card.is-featured .meta { margin-bottom: 22px !important; }
  .bc-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding-inline: 18px; scrollbar-width: none; }
  .bc-filter button { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-ring, .bc-travel, .bc-spin { animation: none; }
  .bc-draw { stroke-dashoffset: 0; transition: none; }
}