/** Shopify CDN: Minification failed

Line 12:3 Unexpected "="

**/
/* ============================================================================
   Extracted from custom.css (CSS refactor) — rules matching "bp-blog".
   ============================================================================ */
/* ============================================================================
   END ACTIVE-PAGE INDICATOR
   ============================================================================ */
   ============================================================================ */

   ============================================================================ */

/* ============================================================================
   BLOG INDEX   (page handle: /blogs/blog)
   Editorial layout, hero with featured post, 2-column paginated grid,
   filter rail at the bottom. V1 designer mockup (Design System/blog/Blog
   Index/v1.jsx) translated into the master handoff's strict monochrome
   palette:
     - #d43747 design-red    -> ink #0b0b0b (blog index is not on the
                                 five-red-exceptions list, §6)
     - #eceae6 / #f4f3ef cream -> surface #fafafa
     - whole-heading Playfair  -> Poppins 500 base; Playfair italic restricted
                                 to <em> per §6 heading-font pattern (matches
                                 the .bp-hero--banner h1 pattern used on
                                 individual articles in blog.css)
   Cover images render at aspect-ratio 5/4 to honour the 1600x1280 standard.
   Stats strip + newsletter wedge from the original V1 are removed per
   operator review (2026-05-25); per-card blurb is now a metafield
   (article.metafields.custom.blurb) with a visible placeholder until the
   operator inserts copy. Pagination is left in the theme's stock styling.
   ============================================================================ */

.bp-blog-index {
  --bp-blog-ink: var(--ink);
  --bp-blog-ink-2: var(--ink-2);
  --bp-blog-mute: var(--mute);
  --bp-blog-line: var(--hair);
  --bp-blog-surface: var(--paper);
  --bp-blog-surface-2: #f5f5f5;
  --bp-blog-paper: var(--white);
  background: var(--bp-blog-paper);
  color: var(--bp-blog-ink);
  /* Section is full-bleed; content inside is constrained to 1440 via
     .bp-blog-index-hero__inner and .bp-blog-index-gridwrap rules below
     (operator 2026-05-26, "full black width, but the 1440px is not
     applied" → full-bleed dark hero band, 1440-constrained content). */
}

.bp-blog-index a {
  text-decoration: none;
  color: inherit;
}

.bp-blog-index .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------- HERO: split intro + featured post card on dark ink -------- */
.bp-blog-index-hero {
  /* Full-bleed dark band. Runs edge-to-edge across the viewport.
     The split-column content (intro + featured card) is constrained
     to 1440 via the .bp-blog-index-hero__inner child below. */
  background: #0b0b0b;
  color: #fff;
}
.bp-blog-index-hero__inner {
  /* Constrained 1440-wide content box inside the full-bleed band.
     Split layout: H1 + lede on the left (top-aligned), featured
     post card on the right (vertically centred for visual balance). */
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 560px;
  overflow: hidden;
}
.bp-blog-index-hero__intro {
  padding: 72px 56px 64px 64px;
  /* Block flow → H1 sits at the top of the column naturally; no
     vertical-centring flex/grid here. */
}
.bp-blog-index-hero__featured-wrap {
  padding: 48px 64px 48px 24px;
  display: flex; align-items: center;
  background: linear-gradient(160deg, #161616 0%, #0a0a0a 100%);
}
.bp-blog-index-hero__title {
  /* Sitewide H1 pattern per master handoff §6: Poppins 500 base; alt
     font (Playfair italic) only on <em>-wrapped words. Reverted from a
     brief whole-Playfair experiment per operator (2026-05-26) so the
     accent reads as a single editorial italic inside a sans headline. */
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #fff;
}
.bp-blog-index-hero__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: #fff;
}
.bp-blog-index-hero__lede {
  font-size: 1rem; line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 540px;
}

/* Featured post card */
.bp-blog-index-featured {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bp-blog-paper);
  color: var(--bp-blog-ink);
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
}
.bp-blog-index-featured__media {
  position: relative;
  display: block;
  aspect-ratio: 5/4;
  overflow: hidden;
  background: var(--bp-blog-surface);
  /* 28px corner radius, matches card media + CTA for visual rhythm
     (operator 2026-05-27). */
  border-radius: 28px;
}
.bp-blog-index-featured__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bp-blog-index-featured__pin {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  /* Hex literal; operator reported the pill disappeared on live
     (2026-05-26). var(--bp-blog-ink) wasn't resolving in their render
     (same issue as the hero background). */
  background: #0b0b0b;
  color: #fff;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600;
  border-radius: 999px;
  z-index: 2;  /* sit above the image */
}
/* Pulse on the inner dot only, not the whole pill (operator
   2026-05-28: "i meant the little dot only"). The dot is the
   ::before pseudo, recoloured white so the halo reads on the
   ink pill. Same animation pattern as the contact page status
   pulse, sized down for the smaller dot. */
.bp-blog-index-featured__pin::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  animation: bp-blog-index-featured-pin-dot-pulse 2s ease-out infinite;
}
.bp-blog-index-featured__body {
  padding: 26px 30px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.bp-blog-index-featured__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-blog-mute); font-weight: 600;
}
.bp-blog-index-featured__meta .cat { color: var(--bp-blog-ink); }
.bp-blog-index-featured__meta .dot { color: rgba(0,0,0,0.2); }
.bp-blog-index-featured__title {
  /* Sitewide pattern: Poppins 500 base; Playfair italic only on <em>.
     When a title has no <em>, the alt font does not appear; that's
     the intended convention per master handoff §6 + writer note. */
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--bp-blog-ink);
}
.bp-blog-index-featured__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}
.bp-blog-index-featured__title a:hover { text-decoration: underline; }
/* .bp-blog-index-featured__dek is styled in the shared dek rule below
   alongside .bp-blog-index-card__dek (same treatment, single source). */
.bp-blog-index-featured__foot {
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--bp-blog-line);
}
.bp-blog-index-featured__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-blog-ink); font-weight: 600;
}
.bp-blog-index-featured__cta svg { width: 14px; height: 14px; }
.bp-blog-index-featured__cta:hover { gap: 12px; }

/* Filter rail (tag chips + search) removed 2026-05-26 per operator;
   styles for .bp-blog-index-filters / -chip / -search are gone too.
   Tag-filtered /blogs/blog/tagged/<tag> URLs still resolve via Shopify
   auto-routing; the noindex,follow meta is in layout/theme.liquid. */

/* -------- GRID -------- */
.bp-blog-index-gridwrap {
  /* Constrained content box matching the hero's __inner width
     (operator 2026-05-26, section content capped at 1440 wide). */
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 64px 56px;
  background: var(--bp-blog-paper);
}
.bp-blog-index-gridhead {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--bp-blog-line);
}
.bp-blog-index-gridhead__title {
  /* Sitewide pattern: Poppins 500 base; Playfair italic only on <em>. */
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--bp-blog-ink);
}
.bp-blog-index-gridhead__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}
.bp-blog-index-gridhead__sub {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bp-blog-mute); font-weight: 600;
  white-space: nowrap;
}
.bp-blog-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}
.bp-blog-index-card {
  display: flex; flex-direction: column;
  color: var(--bp-blog-ink);
}
.bp-blog-index-card__media {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--bp-blog-surface);
}
.bp-blog-index-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Card media intentionally has no hover transform. Operator (2026-05-25)
   asked to disable the "jumps up on hover" animation. */
.bp-blog-index-card__cat {
  position: absolute; top: 14px; left: 14px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255,255,255,0.95);
  color: var(--bp-blog-ink);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
}
.bp-blog-index-card__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bp-blog-mute); font-weight: 600;
  margin-bottom: 10px;
}
.bp-blog-index-card__title {
  /* Sitewide pattern: Poppins 500 base; Playfair italic only on <em>.
     Cards with a Title accent metafield (custom.title_accent) get the
     italic phrase via snippets/article-title-accent.liquid; cards
     without one render plain Poppins. */
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--bp-blog-ink);
}
.bp-blog-index-card__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}
.bp-blog-index-card:hover .bp-blog-index-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bp-blog-index-card__dek,
.bp-blog-index-featured__dek {
  /* Sans body copy, not italic; matches V1's dek treatment using site
     fonts. Placeholder copy renders the same as real copy; the literal
     "Blurb place holder…" text is the only signal until the operator
     inserts article.metafields.custom.blurb in admin. */
  font-family: var(--FONT-STACK-BODY, "Poppins", system-ui, sans-serif);
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bp-blog-ink-2);
  margin: 0 0 14px;
}

/* Tag chips below each card / featured dek. HIDDEN per operator
   2026-05-26. The markup stays in the section so flipping the
   display back is a one-line change if the decision reverses. */
.bp-blog-index-card__tags,
.bp-blog-index-featured__tags {
  display: none;
}
.bp-blog-index-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bp-blog-mute);
  background: transparent;
  border: 1px solid var(--bp-blog-line);
  border-radius: 999px;
}

/* -------- PAGE-2+ HEADER STRIP --------
   Light split-row header that replaces the dark hero on pages 2+ of
   the blog index. Carries an H1 (Bing flagged blog?page=N as missing
   H1) plus a Page X / Y indicator on the right. Source design:
   Design System/blog/Blog Header Strip.html. */
.bp-blog-hdr {
  padding: 56px 64px 40px;
  background: var(--bp-blog-paper);
  border-bottom: 1px solid var(--bp-blog-line);
  max-width: 1440px;
  margin: 0 auto;
}
.bp-blog-hdr__inner {
  max-width: 1216px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 56px;
}
.bp-blog-hdr__title {
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bp-blog-ink);
  margin: 0 0 14px;
  max-width: 740px;
}
.bp-blog-hdr__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}
.bp-blog-hdr__sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bp-blog-ink-2);
  max-width: 600px;
  margin: 0;
}
.bp-blog-hdr__page {
  text-align: left;
  border-left: 1px solid var(--bp-blog-line);
  padding-left: 56px;
}
.bp-blog-hdr__num {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: var(--bp-blog-ink);
  letter-spacing: -0.02em;
}
.bp-blog-hdr__num span {
  color: var(--bp-blog-mute);
}
.bp-blog-hdr__label {
  margin-top: 10px;
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-blog-mute);
}
@media (max-width: 1023px) {
  .bp-blog-hdr { padding: 48px 32px 32px; }
  .bp-blog-hdr__num { font-size: 56px; }
}
@media (max-width: 767px) {
  .bp-blog-hdr { padding: 36px 20px 28px; }
  .bp-blog-hdr__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bp-blog-hdr__title { font-size: 32px; }
  .bp-blog-hdr__page {
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--bp-blog-line);
    padding-left: 0;
    padding-top: 20px;
  }
}

/* -------- BOTTOM-RIGHT HOUSE-AD CTA --------
   Fills the empty trailing slot on page 1 of the grid (when the featured
   article is skipped from the grid loop and the count goes odd → 11).
   Source: Design System/blog/Blog Index - Bottom-Right CTA - Dev Handoff.html
   Translated to bp- namespace + master-handoff monochrome palette (blog
   index is not on the §6 five-red-exceptions list, so design-red removed).
   Title uses Poppins 500 base + Playfair italic on <em> per §6 heading
   pattern. Actions are the site's standard .btn classes on dark, so they
   pick up the operator's existing hover treatment everywhere. */
.bp-blog-index-cta {
  /* Matches article card width (1fr in the 2-col grid) and aspect-ratio
     so the CTA sits flush with its siblings in the row. */
  aspect-ratio: 5 / 4;
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 44px 48px;
  color: #fff;
  background:#070707;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bp-blog-index-cta__title {
  /* Sitewide heading pattern: Poppins 500 base; Playfair italic only on <em>. */
  font-family: var(--FONT-STACK-HEADING, "Poppins", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 18px 0 0;
  color: #fff;
  max-width: 480px;
}
.bp-blog-index-cta__title em {
  font-family: var(--FONT-STACK-HIGHLIGHT, "Playfair Display", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: #fff;
}
.bp-blog-index-cta__foot {
  display: flex; flex-direction: column;
  gap: 18px;
}
.bp-blog-index-cta__sub {
  margin: 0;
  font-size: 1rem; line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 460px;
}
.bp-blog-index-cta__sub strong { color: #fff; font-weight: 500; }
.bp-blog-index-cta__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bp-blog-index-cta__actions .btn {
  /* Pin button widths so they share the row evenly. */
  width: 100%;
  text-align: center;
  justify-content: center;
}
/* Solid white button text override. The CTA card sets color:#fff on
   the wrapper, which cascades into the btn--solid--white content and
   makes it invisible. Force ink text at rest; on hover, the site's
   invert-on-hover convention takes over (white text on dark fill,
   per bpca-theme-build-reference.md §6). Writer audit 2026-05-26. */
.bp-blog-index-cta .btn--solid.btn--white { color: #0b0b0b; }
.bp-blog-index-cta .btn--solid.btn--white:hover { color: #fff; }
@media (max-width: 1023px) {
  .bp-blog-index-cta { padding: 32px 36px; }
  .bp-blog-index-cta__title { font-size: clamp(24px, 4vw, 32px); }
}
@media (max-width: 540px) {
  .bp-blog-index-cta__actions { grid-template-columns: 1fr; }
}

/* -------- PAGINATION --------
   Pagination intentionally uses the theme's stock styling per operator
   (2026-05-25): "i like how the numbers looked in the original blog
   page at the bottom". Only the wrapper position is set here.        */
.bp-blog-index-pagination {
  margin-top: 56px;
  display: flex; justify-content: center;
}

/* -------- RESPONSIVE -------- */
@media (max-width: 1023px) {
  .bp-blog-index-hero__inner {
    /* Split collapses to stacked: H1+lede on top, featured below.
       The grid moved to __inner in the full-bleed restructure; this
       rule used to target .bp-blog-index-hero and was a no-op,
       which caused the featured card to overflow on mobile
       (operator 2026-05-26). */
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .bp-blog-index-hero__intro {
    padding: 56px 32px 32px;
  }
  .bp-blog-index-hero__featured-wrap {
    padding: 0 32px 56px;
  }
  .bp-blog-index-gridwrap {
    padding: 56px 32px 40px;
  }
}

@media (max-width: 767px) {
  .bp-blog-index-hero__intro {
    padding: 40px 20px 24px;
  }
  .bp-blog-index-hero__featured-wrap {
    padding: 0 20px 40px;
  }
  .bp-blog-index-gridwrap {
    padding-left: 20px; padding-right: 20px;
  }
  .bp-blog-index-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bp-blog-index-gridhead {
    flex-direction: column; align-items: flex-start; gap: 8px;
  }
  .bp-blog-index-featured__body {
    padding: 22px 22px 24px;
  }
}

@media (max-width:768px){ .bp-blog-index-cta{ padding-left:20px; padding-right:20px; } }