/* ==========================================================================
   Voyara — Featured Articles page (menu 269, body.item-269 / view-featured)
   ========================================================================== */

/* ---- [STICKY-HEADER-CONTENT-GAP] — kill t4-main-body top-pad on featured ---
   .pen: no blank strip between header and masthead on any inner page
   -------------------------------------------------------------------------*/
body.view-featured #t4-main-body,
body.view-featured .t4-main-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Masthead (bfPD7) ----------------------------------------------------
   Design: #FAF6F0 bg py=80/28, Inner 1140px left-align:
   Eyebrow: Geist Mono 13 #C2562F ls1 UPPERCASE
   Title: Playfair 54/700 #1A1512
   Subtitle: Inter 18 #8A7E72 lh1.6 max-width 760
   -------------------------------------------------------------------------*/
.t4-masthead {
  background: var(--voy-bg) !important;
  border-bottom: 0 !important;
  padding-block: 80px 28px !important;
}
.t4-masthead .t4-masthead-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
/* [GUTTER-20] Neutralize the 16px BS container gutter on the masthead-detail
   (template.css) so the masthead-inner's own padding-inline (20px mobile /
   48px desktop) is the sole side gutter — parity with hero/grid/CTA bands. */
.t4-masthead .t4-masthead-detail { padding-inline: 0 !important; }
.t4-masthead .voy-masthead-eyebrow {
  font-family: var(--voy-font-mono);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--voy-primary);
  text-align: left !important;
}
.t4-masthead .voy-masthead-title {
  font-family: var(--voy-font-head);
  font-size: 54px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
  text-align: left !important;
}
.t4-masthead .voy-masthead-sub {
  font-family: var(--voy-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--voy-muted);
  max-width: 760px;
  /* !important defeats a leaked `margin: 0 auto` (from the featured page's
     bundled sheets) that centered the max-width:760 sub box while the
     full-width title stayed left — the description then sat ~142px right of
     the title. This is a LEFT masthead, so the sub must hug the same left
     edge as the eyebrow/title. */
  margin: 0 !important;
  text-align: left !important;
}

/* ---- Hide T4 breadcrumbs module (we render our own inside .blog-featured) ----
   .pen: breadcrumb is inline inside the featured section, not the module slot
   -------------------------------------------------------------------------*/
body.view-featured .t4-breadcrumbs {
  display: none !important;
}

/* ---- Custom breadcrumb band (pen nIJVv: bg=$bg, padding=[0,48,8,48], gap=8)
   Crumbs: Home (muted/13) › Journal (muted/13) › Featured stories (text/13/600)
   Separator: lucide chevron-right, 14×14, muted
   -------------------------------------------------------------------------*/
.voy-feat-bc-band {
  background: var(--voy-bg);
  padding: 0 0 8px 0;
}
.voy-feat-bc-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.voy-feat-bc-link {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: normal;
  color: var(--voy-muted);
  text-decoration: none;
}
a.voy-feat-bc-link:hover {
  color: var(--voy-text);
}
.voy-feat-bc-sep {
  color: var(--voy-muted);
  flex-shrink: 0;
}
.voy-feat-bc-current {
  font-family: var(--voy-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--voy-text);
}

/* ---- [FULL-BLEED-CUT] FIX — break .blog-featured out of its 1108px container
   Root: .blog-featured sits inside .t4-section-inner.container (1140px), which
   applies 16px gutters → .blog-featured gets 1108px, all child sections cut.
   Fix: negative-margin + 100vw bleed on .blog-featured itself, then re-cap
   inner content wrappers to 1140px.
   -------------------------------------------------------------------------*/
body.view-featured .blog-featured {
  margin-left: calc(50% - 50vw);
  width: 100vw !important;
  max-width: none !important;
}

/* ---- Featured hero section (enSED: bg #FAF6F0 pt=40 pb=70) ---------------
   Leading item: horizontal card — 580×400 image r22 | text col, gap 44
   Inner capped to 1140px
   -------------------------------------------------------------------------*/
.blog-featured > .blog-items.items-leading {
  background: var(--voy-bg);
  padding: 40px 0 70px;
}
.blog-featured > .blog-items.items-leading .blog-item {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
}
.blog-featured > .blog-items.items-leading .voy-card,
.blog-featured > .blog-items.items-leading .voy-post-card {
  display: flex !important;
  flex-direction: row !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 44px;
  align-items: center;
}
.blog-featured > .blog-items.items-leading .voy-card__media {
  flex: 0 0 580px;
  width: 580px !important;
  height: 400px !important;
  aspect-ratio: unset !important;
  border-radius: 22px !important;
  overflow: hidden;
}
.blog-featured > .blog-items.items-leading .voy-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-featured > .blog-items.items-leading .voy-card__body {
  flex: 1;
  padding: 0 !important;
  gap: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hero cat: Geist Mono 12 #1F6F6B ls0.5 */
.blog-featured > .blog-items.items-leading .voy-card__cat {
  font-family: var(--voy-font-mono);
  font-size: 12px !important;
  font-weight: normal;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: var(--voy-secondary) !important;
}

/* Hero title: Playfair 40/700 lh1.15 #1A1512 */
.blog-featured > .blog-items.items-leading .voy-card__title {
  font-size: 40px !important;
  line-height: 1.15 !important;
  margin: 0;
}
.blog-featured > .blog-items.items-leading .voy-card__title a {
  color: var(--voy-heading) !important;
  text-decoration: none;
}

/* Hero excerpt: Inter 17 lh1.6 #8A7E72 */
.blog-featured > .blog-items.items-leading .voy-card__excerpt {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--voy-muted);
  -webkit-line-clamp: 5;
}

/* Hero meta: author Inter 14/600 #2B2420, dot+date 14/400 #8A7E72, gap 8 */
.blog-featured > .blog-items.items-leading .voy-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0;
}
.blog-featured > .blog-items.items-leading .voy-card__author {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--voy-text) !important;
}
.blog-featured > .blog-items.items-leading .voy-card__date {
  font-size: 14px !important;
  color: var(--voy-muted) !important;
}

/* Hero card: no translateY on hover (feature hero is not a lift-card) */
.blog-featured > .blog-items.items-leading .voy-card:hover {
  transform: none !important;
}

/* Hero actions: "Read the story" primary button (Frow Jy3zs: pt=8) */
.blog-featured > .blog-items.items-leading .voy-card__actions {
  padding-top: 8px;
}
.blog-featured > .blog-items.items-leading .voy-card__actions .voy-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--voy-primary);
  color: #fff !important;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.blog-featured > .blog-items.items-leading .voy-card__actions .voy-read-btn:hover {
  background: var(--voy-primary-hover);
}

/* Grid cards: hide actions button */
.blog-featured > .blog-items:not(.items-leading) .voy-card__actions {
  display: none !important;
}

/* ---- Grid Section (JvBrD: #F2EBE1 bg py=70, Inner 1140, 3-col grid gap28) */
.blog-featured > .blog-items:not(.items-leading) {
  background: var(--voy-elevated);
  padding: 70px 0;
}
.voy-feat-grid-head {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  margin-bottom: 28px;
}
.voy-feat-grid-head h2 {
  font-family: var(--voy-font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--voy-heading);
  margin: 0;
}
.blog-featured > .blog-items:not(.items-leading) .items-row {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px;
}
.blog-featured > .blog-items:not(.items-leading) .item {
  width: auto !important;
  padding: 0 !important;
  float: none !important;
}

/* Grid cards — white surface #FFF, border #E5DCD0, r22 */
.blog-featured > .blog-items:not(.items-leading) .voy-card {
  background: var(--voy-surface) !important;
  border: 1px solid var(--voy-border) !important;
  border-radius: 22px !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
}

/* Card media: 200px height */
.blog-featured > .blog-items:not(.items-leading) .voy-card__media {
  height: 200px !important;
  width: 100% !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important;
  overflow: hidden;
  flex: none;
}
.blog-featured > .blog-items:not(.items-leading) .voy-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card body: pad 20 all sides, gap 10 (bYLB0 i0Msq: pad=20 gap=10) */
.blog-featured > .blog-items:not(.items-leading) .voy-card__body {
  padding: 20px !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card cat: Geist Mono 11 #1F6F6B ls0.5 UPPERCASE (bYLB0 c0fcs8) */
.blog-featured > .blog-items:not(.items-leading) .voy-card__cat {
  font-family: var(--voy-font-mono);
  font-size: 11px !important;
  font-weight: normal;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: var(--voy-secondary) !important;
}

/* Card title: Playfair 20/700 lh1.25 #1A1512 (bYLB0 W9YLW) */
.blog-featured > .blog-items:not(.items-leading) .voy-card__title {
  font-family: var(--voy-font-head) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0;
}
.blog-featured > .blog-items:not(.items-leading) .voy-card__title a {
  color: var(--voy-heading) !important;
  text-decoration: none;
}

/* Card excerpt: Inter 14 lh1.6 #8A7E72 (bYLB0 QUQUo) */
.blog-featured > .blog-items:not(.items-leading) .voy-card__excerpt {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--voy-muted);
}

/* Card meta: author dark #2B2420 Inter 13/400, date muted (bYLB0 Meta gap=8) */
.blog-featured > .blog-items:not(.items-leading) .voy-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.blog-featured > .blog-items:not(.items-leading) .voy-card__author {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--voy-text) !important;
}
.blog-featured > .blog-items:not(.items-leading) .voy-card__date {
  font-size: 13px !important;
  color: var(--voy-muted) !important;
}

/* ---- Pagination (nzO2p: #F2EBE1 bg pb=70, 42px pills r8, gap 8) ---------- */
.blog-featured .pagination-wrap {
  background: var(--voy-elevated);
  padding: 0 48px 70px;
  max-width: none;
}
.blog-featured .pagination-wrap .pagination,
.blog-featured .pagination-wrap ul.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0; margin: 0;
  flex-wrap: wrap;
}
.blog-featured .pagination-wrap .page-item .page-link,
.blog-featured .pagination-wrap ul.pagination li a,
.blog-featured .pagination-wrap ul.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--voy-border);
  border-radius: 8px !important;
  background: var(--voy-surface);
  color: var(--voy-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
/* Active pill: #C2562F bg, white text */
.blog-featured .pagination-wrap .page-item.active .page-link,
.blog-featured .pagination-wrap ul.pagination li.active a,
.blog-featured .pagination-wrap ul.pagination li.active span {
  background: var(--voy-primary) !important;
  border-color: var(--voy-primary) !important;
  color: #fff !important;
}
/* Hover: terracotta border+color */
.blog-featured .pagination-wrap .page-item .page-link:hover:not(.active),
.blog-featured .pagination-wrap ul.pagination li a:hover {
  border-color: var(--voy-primary);
  color: var(--voy-primary);
}
/* Fix BS corner-split on first/last pill [BS-PAGINATION-CORNER-SPLIT] */
.blog-featured .pagination-wrap .page-item:first-child .page-link,
.blog-featured .pagination-wrap .page-item:last-child .page-link {
  border-radius: 8px !important;
}

/* ---- CTA band (v03xS: #1F6F6B teal py=72, Inner 1140 center) ------------ */
.voy-feat-cta {
  background: var(--voy-secondary);
  padding-block: 72px;
  text-align: center;
}
.voy-feat-cta-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
/* CTA title: Playfair 38/700 #FFF (nujPd) */
.voy-feat-cta .voy-feat-cta-title {
  font-family: var(--voy-font-head);
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: center;
}
/* CTA sub: Inter 17 lh1.6 #FFF max-w620 (o2PeKQ) */
.voy-feat-cta .voy-feat-cta-sub {
  font-family: var(--voy-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0;
  text-align: center;
}
/* CTA row: two buttons, pt=8 gap=12 (LwM3Q: pad=[8,0,0,0] gap=12) */
.voy-feat-cta-row {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
/* AcyMailing subscription module rendered inline in the teal CTA band. Hide its
   own title/introtext (the band supplies them) and style the field + button as a
   white pill + terracotta button, sitting inline beside "Browse all stories". */
.voy-feat-cta-acym { flex: 1 1 320px; max-width: 460px; }
.voy-feat-cta-acym .module-title,
.voy-feat-cta-acym .acym_introtext { display: none !important; }
.voy-feat-cta-acym .acym_module_form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.voy-feat-cta-acym .acym_form { flex: 1 1 200px; margin: 0; }
.voy-feat-cta-acym .acym_form .onefield { margin: 0; }
.voy-feat-cta-acym .acym_form input[type="email"] {
  width: 100%;
  background: #fff !important;
  border: 0 !important;
  border-radius: 9999px;
  padding: 13px 18px !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #1A1512 !important;
  box-shadow: none !important;
}
.voy-feat-cta-acym .acysubbuttons { margin: 0; flex: 0 0 auto; }
.voy-feat-cta-acym .subbutton {
  background: var(--voy-primary, #C2562F) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px;
  padding: 12px 24px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.voy-feat-cta-acym .subbutton:hover { background: var(--voy-primary-hover, #A6451F) !important; }
.voy-feat-cta-acym .acym__field__error__block { display: none; }

/* Primary "Subscribe free" button (jtXPw: r9999 bg#C2562F pad14/26 Inter15/600 #FFF) */
.voy-feat-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--voy-primary);
  color: #fff !important;
  border-radius: var(--voy-r-pill);
  padding: 14px 26px;
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.voy-feat-cta-btn-primary:hover {
  background: var(--voy-primary-hover);
  color: #fff !important;
}
/* Secondary "Browse all stories" button (ape1g: r9999 bg#FFF pad13/25 Inter15/600 #2B2420) */
.voy-feat-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--voy-text) !important;
  border: 1px solid #fff;
  border-radius: var(--voy-r-pill);
  padding: 13px 25px;
  font-family: var(--voy-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.voy-feat-cta-btn-secondary:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: var(--voy-text) !important;
}

/* ---- Hide unwanted chrome ------------------------------------------------ */
.blog-featured .page-header,
.blog-featured .items-more,
.blog-featured .items-subcategories { display: none !important; }

/* ---- Responsive — 1024px ------------------------------------------------- */
@media (max-width: 1024px) {
  .t4-masthead .t4-masthead-inner,
  .voy-feat-bc-inner,
  .blog-featured > .blog-items.items-leading .blog-item,
  .voy-feat-grid-head,
  .blog-featured > .blog-items:not(.items-leading) .items-row,
  .blog-featured .pagination-wrap,
  .voy-feat-cta-inner { padding-inline: 20px; }
}

/* ---- Responsive — tablet 991px ------------------------------------------ */
@media (max-width: 991px) {
  .t4-masthead .voy-masthead-title { font-size: 38px !important; }
  .blog-featured > .blog-items.items-leading .voy-card {
    flex-direction: column !important;
    gap: 0;
  }
  .blog-featured > .blog-items.items-leading .voy-card__media {
    flex: none !important;
    width: 100% !important;
    height: 280px !important;
  }
  .blog-featured > .blog-items.items-leading .voy-card__body {
    padding: 28px !important;
  }
  .blog-featured > .blog-items:not(.items-leading) .items-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- Responsive — mobile 640px / HQd8S frame ----------------------------
   .pen mobile (HQd8S): masthead pt=40/pb=12, gap=12;
   Featured section pt=12/pb=44 with stacked card:
     cover h=220 r22 fill_container;
     cat 12/ls0.5; title 26/700/lh1.15; excerpt 15/lh1.6;
     meta gap=8; button
   Grid section pt=44/pb=44, gap=20 (1-col), GHead 26px
   Pagination pt=0/pb=44
   CTA pt=48/pb=48, title 28px, sub 15px, row gap=12
   -------------------------------------------------------------------------*/
@media (max-width: 640px) {
  /* Masthead mobile: pt=40 pb=12 gap=12 */
  .t4-masthead {
    padding-block: 40px 12px !important;
  }
  .t4-masthead .t4-masthead-inner {
    gap: 12px !important;
  }
  .t4-masthead .voy-masthead-title { font-size: 34px !important; }
  .t4-masthead .voy-masthead-sub { font-size: 15px !important; }

  /* Featured hero mobile (q1kNaG: pt=12 pb=44 pad=20 gap=18) */
  .blog-featured > .blog-items.items-leading {
    padding: 12px 0 44px !important;
  }
  .blog-featured > .blog-items.items-leading .blog-item {
    padding-inline: 20px;
  }
  .blog-featured > .blog-items.items-leading .voy-card {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .blog-featured > .blog-items.items-leading .voy-card__media {
    flex: none !important;
    width: 100% !important;
    height: 220px !important;
    border-radius: 22px !important;
  }
  .blog-featured > .blog-items.items-leading .voy-card__body {
    padding: 0 !important;
    gap: 18px !important;
  }
  /* Hero mobile cat: Geist Mono 12 #1F6F6B ls0.5 */
  .blog-featured > .blog-items.items-leading .voy-card__cat {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
  }
  /* Hero mobile title: Playfair 26/700 lh1.15 */
  .blog-featured > .blog-items.items-leading .voy-card__title {
    font-size: 26px !important;
  }
  /* Hero mobile excerpt: Inter 15 lh1.6 */
  .blog-featured > .blog-items.items-leading .voy-card__excerpt {
    font-size: 15px !important;
  }

  /* Grid section mobile: pt=44 pb=44 gap=20 1-col (egfj4) */
  .blog-featured > .blog-items:not(.items-leading) {
    padding: 44px 0 !important;
  }
  .blog-featured > .blog-items:not(.items-leading) .items-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-inline: 20px;
  }
  .voy-feat-grid-head {
    padding-inline: 20px;
    margin-bottom: 20px;
  }
  /* Mobile grid head: Playfair 26/700 (O1wLzK) */
  .voy-feat-grid-head h2 { font-size: 26px !important; }

  /* Pagination mobile: pb=44 */
  .blog-featured .pagination-wrap {
    padding: 0 20px 44px !important;
  }

  /* CTA mobile (ziiQf: pt=48 pb=48 gap=16) */
  .voy-feat-cta {
    padding-block: 48px !important;
  }
  .voy-feat-cta-inner {
    gap: 16px !important;
    padding-inline: 20px;
  }
  .voy-feat-cta .voy-feat-cta-title {
    font-size: 28px !important;
  }
  .voy-feat-cta .voy-feat-cta-sub {
    font-size: 15px !important;
  }
  .voy-feat-cta-row {
    flex-direction: column;
    gap: 12px !important;
    align-items: stretch;
    width: 100%;
  }
  .voy-feat-cta-btn-primary,
  .voy-feat-cta-btn-secondary {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ---- Dark mode ---------------------------------------------------------- */
html.t4-dark .t4-masthead {
  background: var(--voy-bg) !important;
}
html.t4-dark .blog-featured > .blog-items.items-leading {
  background: var(--voy-bg);
}
html.t4-dark .blog-featured > .blog-items:not(.items-leading) {
  background: var(--voy-elevated);
}
html.t4-dark .blog-featured .pagination-wrap {
  background: var(--voy-elevated);
}
html.t4-dark .blog-featured .pagination-wrap .page-item .page-link,
html.t4-dark .blog-featured .pagination-wrap ul.pagination li a {
  background: var(--voy-surface);
  border-color: var(--voy-border);
  color: var(--voy-text);
}
html.t4-dark .blog-featured .pagination-wrap .page-item.active .page-link {
  background: var(--voy-primary) !important;
  border-color: var(--voy-primary) !important;
  color: #fff !important;
}
html.t4-dark .voy-feat-cta {
  background: var(--voy-secondary);
}
html.t4-dark .voy-feat-cta-btn-primary {
  background: var(--voy-primary);
  color: #fff !important;
}
html.t4-dark .voy-feat-cta-btn-primary:hover {
  background: var(--voy-primary-hover);
  color: #fff !important;
}
html.t4-dark .voy-feat-cta-btn-secondary {
  background: #fff;
  color: #2B2420 !important;
  border-color: #fff;
}
html.t4-dark .voy-feat-cta-btn-secondary:hover {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
}
html.t4-dark .blog-featured > .blog-items:not(.items-leading) .voy-card {
  background: var(--voy-surface) !important;
  border-color: var(--voy-border) !important;
}
html.t4-dark .blog-featured > .blog-items.items-leading .voy-card__actions .voy-read-btn {
  background: var(--voy-primary);
  color: #fff !important;
}