/* =========================================================
   VINE MEDIA HOMEPAGE — CLEAN CONSOLIDATED STYLES
   Generated from the current homepage.
   Section-specific selectors are intentionally preserved to
   prevent one homepage area from breaking another.
========================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }

.container {
    width: min(1320px, calc(100% - 28px));
    margin-inline: auto;
}

@media (max-width: 680px) {
    .container { width: calc(100% - 14px); }
}



/* ==================== HEADER & NAVIGATION ==================== */

/* =========================================================
   SECTION 01 — HEADER & NAVIGATION
   Mature Catholic editorial palette: ivory / navy / antique gold
   UI ONLY — no PHP, DB or JS hooks changed.
========================================================= */

:root {
  --church-navy: #102a43;
  --church-navy-deep: #071b48;
  --church-gold: #d7b45a;
  --church-gold-soft: #d8c18a;
  --church-ivory: #fbfaf6;
  --church-cream: #f3efe6;
  --church-ink: #1f2933;
  --church-muted: #697784;
  --church-line: #e7e0d3;
}

/* ---------- 01A. Identity header ---------- */
.header.church-header {
  position: relative !important;
  top: auto !important;
  z-index: 1001 !important;
  width: 100% !important;
  min-height: 84px !important;
  background: var(--church-ivory) !important;
  border-top: 3px solid var(--church-gold) !important;
  border-bottom: 1px solid var(--church-line) !important;
  box-shadow: none !important;
}

.header.church-header .header-inner {
  min-height: 81px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
}

.church-brand-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.header.church-header .logo {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.header.church-header .logo a {
  display: flex !important;
  align-items: center !important;
}

.header.church-header .logo img {
  display: block !important;
  width: 184px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

.church-brand-tagline {
  padding-left: 18px;
  border-left: 1px solid #d9d0bf;
  color: var(--church-muted);
  font-family: "Spectral", Georgia, serif;
  font-size: .78rem;
  line-height: 1.35;
  letter-spacing: .055em;
}

.church-brand-tagline strong {
  display: block;
  margin-bottom: 2px;
  color: var(--church-navy);
  font-family: "Cinzel", Georgia, serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.header.church-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.header.church-header .icon-btn,
.header.church-header .login-btn {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--church-navy) !important;
  box-shadow: none !important;
  font-family: "Spectral", Georgia, serif !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.header.church-header .icon-btn:hover,
.header.church-header .login-btn:hover {
  color: #7a5b21 !important;
  background: transparent !important;
}

.header.church-header .theme-toggle {
  width: 39px !important;
  padding: 0 !important;
  border-left: 1px solid var(--church-line) !important;
  border-right: 1px solid var(--church-line) !important;
}

.header.church-header .translate-wrap {
  position: relative !important;
}

.header.church-header .translate-menu {
  top: calc(100% + 13px) !important;
  right: 0 !important;
  min-width: 205px !important;
  padding: 7px !important;
  border: 1px solid #ddd4c4 !important;
  border-top: 3px solid var(--church-gold) !important;
  border-radius: 2px !important;
  background: #fff !important;
  box-shadow: 0 14px 32px rgba(16,42,67,.13) !important;
}

.header.church-header .translate-menu .lang-btn {
  width: 100% !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--church-ink) !important;
  text-align: left !important;
  font-family: "Spectral", Georgia, serif !important;
}

.header.church-header .translate-menu .lang-btn:hover {
  background: var(--church-cream) !important;
  color: var(--church-navy) !important;
}

/* ---------- 01B. Primary navigation ---------- */
.menu-bar.church-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  min-height: 59px !important;
  background: var(--church-navy-deep) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--church-gold) !important;
  box-shadow: 0 5px 16px rgba(7,22,35,.10) !important;
}

.menu-bar.church-nav .menu-bar-inner {
  min-height: 57px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.church-nav .menu-toggle {
  display: none !important;
}

.church-nav .menu-links {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-width: 0 !important;
}

.church-nav .menu-item {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

.church-nav .menu-link {
  position: relative !important;
  min-height: 57px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f7f4ed !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.church-nav .menu-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 2px;
  background: var(--church-gold-soft);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.church-nav .menu-link:hover,
.church-nav .menu-item.active > .menu-link,
.church-nav .menu-item.open > .menu-link {
  color: #f1dfb7 !important;
  background: rgba(255,255,255,.035) !important;
}

.church-nav .menu-link:hover::after,
.church-nav .menu-item.active > .menu-link::after,
.church-nav .menu-item.open > .menu-link::after {
  transform: scaleX(1);
}

.church-nav .menu-link > i {
  font-size: .56rem !important;
  color: #cdb77e !important;
  opacity: .95 !important;
}

/* ---------- Desktop dropdowns ---------- */
.church-nav .dropdown-menu {
  display: none;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  min-width: 235px !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  border: 1px solid #ded6c8 !important;
  border-top: 3px solid var(--church-gold) !important;
  border-radius: 2px !important;
  background: #fff !important;
  box-shadow: 0 16px 38px rgba(10,31,51,.16) !important;
  overflow: hidden !important;
}

.church-nav .has-dropdown:hover > .dropdown-menu,
.church-nav .has-dropdown.open > .dropdown-menu,
.church-nav .has-dropdown.active > .dropdown-menu,
.church-nav .dropdown-menu.show,
.church-nav .dropdown-menu.open,
.church-nav .dropdown-menu.active {
  display: block !important;
}

.church-nav .dropdown-menu a {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 17px 10px 25px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0ece4 !important;
  background: #fff !important;
  color: #243746 !important;
  font-family: "Spectral", Georgia, serif !important;
  font-size: .92rem !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

.church-nav .dropdown-menu a:last-child {
  border-bottom: 0 !important;
}

.church-nav .dropdown-menu a::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--church-gold);
  transform: translateY(-50%);
}

.church-nav .dropdown-menu a:hover {
  padding-left: 29px !important;
  background: var(--church-cream) !important;
  color: var(--church-navy) !important;
}

/* ---------- Right-side nav actions ---------- */
.church-nav .menu-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.church-nav .search-btn {
  width: 43px !important;
  height: 43px !important;
  min-height: 43px !important;
  padding: 0 !important;
  border: 1px solid rgba(220,202,160,.34) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #f7f4ed !important;
  box-shadow: none !important;
}

.church-nav .search-btn:hover {
  border-color: var(--church-gold-soft) !important;
  color: #f2d99e !important;
  background: rgba(255,255,255,.04) !important;
}

.church-nav .donate-btn {
  width: auto !important;
  min-height: 43px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 15px !important;
  border: 1px solid var(--church-gold-soft) !important;
  border-radius: 2px !important;
  background: var(--church-gold) !important;
  color: #071b48 !important;
  box-shadow: none !important;
  font-family: "Cinzel", Georgia, serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.church-nav .donate-btn:hover {
  background: #c6a65f !important;
  color: #081927 !important;
}

.church-nav .donate-btn span {
  display: inline !important;
}

.church-nav .donate-btn i {
  font-size: .72rem !important;
}

/* Original mobile tools stay hidden on desktop */
.church-nav .mobile-menu-top {
  display: none !important;
}

/* ---------- Compact desktop ---------- */
@media (max-width: 1120px) and (min-width: 901px) {
  .church-nav .menu-link {
    padding-inline: 9px !important;
    font-size: .64rem !important;
    letter-spacing: .035em !important;
  }

  .church-nav .donate-btn {
    padding-inline: 11px !important;
  }

  .church-brand-tagline {
    display: none;
  }
}

/* =========================================================
   01C. MOBILE NAVIGATION
========================================================= */
@media (max-width: 900px) {
  .header.church-header {
    min-height: 75px !important;
    border-top-width: 2px !important;
  }

  .header.church-header .header-inner {
    min-height: 73px !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .church-brand-wrap {
    justify-content: center !important;
    width: 100% !important;
  }

  .header.church-header .logo img {
    width: 150px !important;
    max-height: 48px !important;
  }

  .church-brand-tagline,
  .header.church-header .header-actions {
    display: none !important;
  }

  .menu-bar.church-nav {
    min-height: 54px !important;
    top: 0 !important;
    border-bottom-width: 2px !important;
  }

  .menu-bar.church-nav .menu-bar-inner {
    position: relative !important;
    min-height: 52px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 10px !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .church-nav .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(220,202,160,.30) !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #f7f4ed !important;
    box-shadow: none !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: .67rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  .church-nav .menu-toggle i {
    color: var(--church-gold-soft) !important;
    font-size: .85rem !important;
  }

  .church-nav .menu-actions {
    gap: 6px !important;
  }

  .church-nav .search-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .church-nav .donate-btn {
    min-height: 38px !important;
    padding: 0 11px !important;
    font-size: .61rem !important;
    letter-spacing: .045em !important;
  }

  /* Main opened mobile panel */
  .church-nav .menu-links {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 127px) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--church-ivory) !important;
    border-top: 1px solid #d5c7a9 !important;
    border-bottom: 3px solid var(--church-gold) !important;
    box-shadow: 0 18px 38px rgba(8,25,39,.22) !important;
  }

  .church-nav .menu-links.active,
  .church-nav .menu-links.open,
  .church-nav .menu-links.show {
    display: flex !important;
  }

  .church-nav .mobile-menu-top {
    display: block !important;
    padding: 12px 12px 10px !important;
    background: #f5f1e8 !important;
    border-bottom: 1px solid #ddd4c5 !important;
  }

  .church-nav .mobile-menu-top::before {
    content: "VINE MEDIA  •  CATHOLIC MEDIA";
    display: block;
    margin: 0 2px 9px;
    color: #7c673d;
    font-family: "Cinzel", Georgia, serif;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .09em;
  }

  .church-nav .mobile-menu-top .mobile-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    margin: 0 5px 0 0 !important;
    padding: 0 10px !important;
    border: 1px solid #d9d0c0 !important;
    border-radius: 2px !important;
    background: #fff !important;
    color: var(--church-navy) !important;
    box-shadow: none !important;
    font-family: "Spectral", Georgia, serif !important;
    font-size: .76rem !important;
    text-decoration: none !important;
  }

  .church-nav .mobile-menu-top .mobile-action-btn i {
    color: #8b6d34 !important;
  }

  .church-nav .mobile-translate-menu {
    margin-top: 9px !important;
    padding: 7px !important;
    border: 1px solid #ddd4c5 !important;
    border-radius: 2px !important;
    background: #fff !important;
  }

  .church-nav .mobile-translate-menu .lang-btn {
    color: var(--church-ink) !important;
    background: transparent !important;
  }

  .church-nav .menu-item {
    display: block !important;
    width: 100% !important;
  }

  .church-nav .menu-link {
    width: 100% !important;
    min-height: 51px !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ded2 !important;
    background: var(--church-ivory) !important;
    color: var(--church-navy) !important;
    font-size: .72rem !important;
    letter-spacing: .055em !important;
  }

  .church-nav .menu-link::after {
    display: none !important;
  }

  .church-nav .menu-link > i {
    color: #9b7b3d !important;
    font-size: .58rem !important;
  }

  .church-nav .menu-link:hover,
  .church-nav .menu-item.active > .menu-link,
  .church-nav .menu-item.open > .menu-link {
    background: #f5f1e8 !important;
    color: #071b48 !important;
  }

  /* Mobile submenus: quiet, structured, no bright colors */
  .church-nav .dropdown-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 6px !important;
    border: 0 !important;
    border-left: 3px solid var(--church-gold) !important;
    border-radius: 0 !important;
    background: #f0ece4 !important;
    box-shadow: inset 0 1px 0 #e0d7c8 !important;
  }

  .church-nav .dropdown-menu a {
    min-height: 42px !important;
    padding: 10px 18px 10px 26px !important;
    border-bottom: 1px solid #e3dbcf !important;
    background: transparent !important;
    color: #304557 !important;
    font-size: .87rem !important;
  }

  .church-nav .dropdown-menu a::before {
    left: 14px !important;
    background: #9b7b3d !important;
  }

  .church-nav .dropdown-menu a:hover {
    padding-left: 29px !important;
    background: #e9e2d6 !important;
  }
}

@media (max-width: 430px) {
  .header.church-header .logo img {
    width: 142px !important;
  }

  .church-nav .menu-toggle {
    padding-inline: 9px !important;
    font-size: .62rem !important;
  }

  .church-nav .donate-btn {
    padding-inline: 9px !important;
  }

  .church-nav .donate-btn span {
    display: inline !important;
  }
}

/* ---------- Dark theme compatibility ---------- */
body.dark-mode .header.church-header,
body.dark-theme .header.church-header {
  background: #111d27 !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}

body.dark-mode .church-brand-tagline,
body.dark-theme .church-brand-tagline {
  color: #aeb8c0 !important;
  border-left-color: rgba(255,255,255,.12) !important;
}

body.dark-mode .church-brand-tagline strong,
body.dark-theme .church-brand-tagline strong,
body.dark-mode .header.church-header .icon-btn,
body.dark-mode .header.church-header .login-btn,
body.dark-theme .header.church-header .icon-btn,
body.dark-theme .header.church-header .login-btn {
  color: #f4efe6 !important;
}


/* ==================== HERO ==================== */

/* =========================================================
   SECTION 02 — DESIGN TOKENS
========================================================= */

.hero-editorial {

    --hero-bg: #f7f6f2;
    --hero-surface: #ffffff;
    --hero-border: #dedbd2;

    --hero-navy: #12324a;
    --hero-navy-deep: #071c2d;

    --hero-text: #17212b;
    --hero-muted: #66717a;

    --hero-gold: #b59654;
    --hero-red: #8a2f3c;

    --hero-white: #ffffff;

    background: var(--hero-bg);

    padding: 22px 0 30px;

    transition:
        background .3s ease,
        color .3s ease;

}


/* =========================================================
   TRUE DARK MODE
========================================================= */

body.dark-mode .hero-editorial,
body.dark-theme .hero-editorial {

    --hero-bg: #0b151e;
    --hero-surface: #101e29;
    --hero-border: #263743;

    --hero-text: #edf2f5;
    --hero-muted: #9eabb4;

    --hero-navy: #163b55;
    --hero-navy-deep: #06131d;

    --hero-gold: #c4a35f;
    --hero-red: #a84a57;

}


/* =========================================================
   MAIN WIDTH

   Deliberately narrower than previous version.
========================================================= */

.hero-editorial .hero-shell {

    width: calc(100% - 40px);

    max-width: 1120px;

    margin: 0 auto;

}


/* =========================================================
   SECTION TOP LABEL
========================================================= */

.hero-editorial .hero-section-line {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    padding-bottom: 9px;

    border-bottom:
        1px solid var(--hero-border);

}


.hero-editorial .hero-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    color: var(--hero-navy);

}


body.dark-mode
.hero-editorial
.hero-section-label,

body.dark-theme
.hero-editorial
.hero-section-label {

    color: #d6dde2;

}


.hero-editorial
.hero-section-label::before {

    content: "";

    width: 25px;

    height: 2px;

    background:
        var(--hero-gold);

}


.hero-editorial .hero-section-date {

    color:
        var(--hero-muted);

    font-size: 11px;

}


/* =========================================================
   DESKTOP GRID
========================================================= */

.hero-editorial .hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.62fr)
        minmax(270px, .68fr);

    gap: 20px;

    align-items: stretch;

}


/* =========================================================
   MAIN FEATURE
========================================================= */

.hero-editorial .hero-slider {

    position: relative;

    height: 510px;

    min-height: 0;

    overflow: hidden;

    background:
        var(--hero-navy-deep);

    border-radius: 3px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

}


/* =========================================================
   SLIDES
========================================================= */

.hero-editorial .hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


.hero-editorial
.hero-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;

}


.hero-editorial
.hero-slide > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   SOPHISTICATED IMAGE OVERLAY
========================================================= */

.hero-editorial
.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(4,18,29,.88) 0%,
            rgba(4,18,29,.68) 38%,
            rgba(4,18,29,.18) 74%
        ),

        linear-gradient(
            0deg,
            rgba(4,18,29,.78) 0%,
            transparent 55%
        );

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-editorial
.hero-content {

    position: absolute;

    z-index: 4;

    left: 42px;

    bottom: 41px;

    width: min(650px, calc(100% - 84px));

    color: #ffffff;

}


/* =========================================================
   CATEGORY
========================================================= */

.hero-editorial
.hero-tag {

    display: inline-block;

    margin-bottom: 14px;

    padding:
        6px 10px;

    background:
        rgba(138,47,60,.94);

    border-radius: 2px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


/* =========================================================
   HEADLINE
========================================================= */

.hero-editorial
.hero-content h1 {

    max-width: 620px;

    margin:
        0 0 13px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(31px, 3.2vw, 46px);

    line-height: 1.08;

    letter-spacing: -.5px;

    color: #ffffff;

    text-wrap: balance;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-editorial
.hero-content p {

    max-width: 535px;

    margin:
        0 0 20px;

    color:
        rgba(255,255,255,.87);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.55;

}


/* =========================================================
   READ STORY
========================================================= */

.hero-editorial
.hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 39px;

    padding:
        0 17px;

    border:
        1px solid
        var(--hero-gold);

    border-radius: 2px;

    background:
        var(--hero-gold);

    color:
        #142331;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    transition:
        .22s ease;

}


.hero-editorial
.hero-btn::after {

    content: "→";

    font-size: 15px;

}


.hero-editorial
.hero-btn:hover {

    background: transparent;

    color: #ffffff;

}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.hero-editorial
.hero-arrow {

    position: absolute;

    z-index: 10;

    top: 50%;

    transform:
        translateY(-50%);

    width: 34px;

    height: 42px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 2px;

    background:
        rgba(7,28,45,.55);

    color:
        #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 11px;

    transition:
        .2s ease;

}


.hero-editorial
.hero-arrow:hover {

    background:
        var(--hero-gold);

    color:
        #102334;

}


.hero-editorial
.hero-prev {

    left: 13px;

}


.hero-editorial
.hero-next {

    right: 13px;

}


/* =========================================================
   TRENDING PANEL
========================================================= */

.hero-editorial
.trending-panel {

    min-width: 0;

    background:
        var(--hero-surface);

    border:
        1px solid
        var(--hero-border);

    border-top:
        3px solid
        var(--hero-gold);

    border-radius:
        2px;

    overflow: hidden;

}


/* =========================================================
   TRENDING HEADER
========================================================= */

.hero-editorial
.trending-header {

    padding:
        17px 17px 14px;

    border-bottom:
        1px solid
        var(--hero-border);

}


.hero-editorial
.trending-header span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--hero-red);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.hero-editorial
.trending-header h2 {

    margin: 0;

    color:
        var(--hero-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 20px;

    font-weight: 700;

}


/* =========================================================
   TRENDING LIST
========================================================= */

.hero-editorial
.trending-list {

    counter-reset:
        trending-counter;

}


/* =========================================================
   TRENDING ITEM
========================================================= */

.hero-editorial
.trending-item {

    counter-increment:
        trending-counter;

    position: relative;

    display: grid;

    grid-template-columns:
        34px 72px minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    padding:
        15px 13px;

    text-decoration: none;

    color:
        var(--hero-text);

    border-bottom:
        1px solid
        var(--hero-border);

    transition:
        background .2s ease;

}


.hero-editorial
.trending-item:last-child {

    border-bottom: 0;

}


.hero-editorial
.trending-item:hover {

    background:
        rgba(181,150,84,.07);

}


/* 01 02 03 04 */

.hero-editorial
.trending-item::before {

    content:
        counter(trending-counter, decimal-leading-zero);

    align-self: start;

    padding-top: 3px;

    color:
        var(--hero-gold);

    font-family:
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 700;

}


/* IMAGE */

.hero-editorial
.trending-item img {

    width: 72px;

    height: 58px;

    object-fit: cover;

    border-radius: 1px;

}


/* CONTENT */

.hero-editorial
.trending-content {

    min-width: 0;

}


.hero-editorial
.trending-category {

    display: block;

    margin-bottom: 5px;

    color:
        var(--hero-red);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .9px;

    text-transform: uppercase;

}


.hero-editorial
.trending-content h3 {

    margin: 0;

    color:
        var(--hero-text);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 13px;

    line-height: 1.32;

    font-weight: 700;

    display:
        -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient:
        vertical;

    overflow: hidden;

}


/* =========================================================
   DARK MODE — TRENDING HOVER
========================================================= */

body.dark-mode
.hero-editorial
.trending-item:hover,

body.dark-theme
.hero-editorial
.trending-item:hover {

    background:
        rgba(255,255,255,.035);

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 950px) {


    .hero-editorial
    .hero-shell {

        width:
            calc(100% - 28px);

    }


    .hero-editorial
    .hero-grid {

        grid-template-columns:
            minmax(0, 1.48fr)
            minmax(245px, .72fr);

        gap: 14px;

    }


    .hero-editorial
    .hero-slider {

        height: 475px;

    }


    .hero-editorial
    .hero-content {

        left: 34px;

        bottom: 34px;

        width:
            calc(100% - 68px);

    }


    .hero-editorial
    .hero-content h1 {

        font-size:
            clamp(28px, 4vw, 39px);

    }


    .hero-editorial
    .trending-item {

        grid-template-columns:
            27px 58px minmax(0,1fr);

        padding:
            13px 10px;

        gap: 8px;

    }


    .hero-editorial
    .trending-item img {

        width: 58px;

        height: 52px;

    }


    .hero-editorial
    .trending-content h3 {

        font-size: 12px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 720px) {


    .hero-editorial {

        padding:
            12px 0 23px;

    }


    .hero-editorial
    .hero-shell {

        width:
            calc(100% - 20px);

    }


    .hero-editorial
    .hero-section-line {

        margin-bottom:
            9px;

    }


    .hero-editorial
    .hero-grid {

        display:
            block;

    }


    /* =============================
       MAIN HERO
    ============================= */

    .hero-editorial
    .hero-slider {

        width: 100%;

        height: 430px;

        border-radius: 2px;

        box-shadow:
            0 7px 20px
            rgba(0,0,0,.13);

    }


    .hero-editorial
    .hero-overlay {

        background:

            linear-gradient(
                0deg,
                rgba(4,18,29,.96) 0%,
                rgba(4,18,29,.73) 42%,
                rgba(4,18,29,.17) 74%
            );

    }


    .hero-editorial
    .hero-content {

        left: 22px;

        right: 22px;

        bottom: 27px;

        width: auto;

    }


    .hero-editorial
    .hero-tag {

        margin-bottom: 10px;

        padding:
            5px 8px;

        font-size: 7px;

    }


    .hero-editorial
    .hero-content h1 {

        max-width: 100%;

        margin-bottom: 10px;

        font-size:
            clamp(24px, 7.2vw, 31px);

        line-height: 1.08;

    }


    .hero-editorial
    .hero-content p {

        max-width: 100%;

        margin-bottom: 16px;

        font-size: 12px;

        line-height: 1.45;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }


    .hero-editorial
    .hero-btn {

        min-height: 35px;

        padding:
            0 13px;

        font-size: 8px;

    }


    .hero-editorial
    .hero-arrow {

        width: 30px;

        height: 36px;

    }


    .hero-editorial
    .hero-prev {

        left: 8px;

    }


    .hero-editorial
    .hero-next {

        right: 8px;

    }


    /* =============================
       TRENDING

       Professional vertical news list.
       NO horizontal swipe cards.
    ============================= */

    .hero-editorial
    .trending-panel {

        margin-top: 14px;

        border-radius: 2px;

    }


    .hero-editorial
    .trending-header {

        padding:
            15px 14px 12px;

    }


    .hero-editorial
    .trending-header h2 {

        font-size: 18px;

    }


    .hero-editorial
    .trending-item {

        grid-template-columns:
            28px 76px minmax(0,1fr);

        gap: 10px;

        padding:
            12px 11px;

    }


    .hero-editorial
    .trending-item img {

        width: 76px;

        height: 57px;

    }


    .hero-editorial
    .trending-content h3 {

        font-size: 12.5px;

        line-height: 1.3;

        -webkit-line-clamp: 2;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media
(max-width: 390px) {


    .hero-editorial
    .hero-shell {

        width:
            calc(100% - 14px);

    }


    .hero-editorial
    .hero-slider {

        height: 405px;

    }


    .hero-editorial
    .hero-content {

        left: 18px;

        right: 18px;

        bottom: 23px;

    }


    .hero-editorial
    .hero-content h1 {

        font-size: 23px;

    }


    .hero-editorial
    .hero-section-date {

        display: none;

    }


    .hero-editorial
    .trending-item {

        grid-template-columns:
            25px 65px minmax(0,1fr);

        gap: 8px;

        padding:
            11px 8px;

    }


    .hero-editorial
    .trending-item img {

        width: 65px;

        height: 52px;

    }

}

/* =========================================================
   SECTION 02 — REDUCE LEFT / RIGHT EMPTY SPACE
   Keeps the existing design exactly the same
========================================================= */

/* DESKTOP */
.hero-editorial .hero-shell {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* TABLET */
@media (max-width: 950px) {

    .hero-editorial .hero-shell {
        width: calc(100% - 8px) !important;
        max-width: none !important;
    }

}


/* MOBILE */
@media (max-width: 720px) {

    .hero-editorial .hero-shell {
        width: calc(100% - 6px) !important;
        max-width: none !important;
    }

}


/* VERY SMALL MOBILE */
@media (max-width: 390px) {

    .hero-editorial .hero-shell {
        width: calc(100% - 4px) !important;
        max-width: none !important;
    }

}


/* ==================== LIVE MASS ==================== */

/* =========================================================
   SECTION 03 — TOKENS
========================================================= */

.mass-rail {
    --mass-bg: #f7f5ef;
    --mass-surface: #ffffff;
    --mass-text: #162735;
    --mass-muted: #6b747b;

    --mass-navy: #0c2d45;
    --mass-gold: #b69a5b;
    --mass-border: #ddd8ce;

    --mass-live: #a52636;

    width: 100%;
    margin: 0;
    padding: 0;

    background: var(--mass-bg);

    border-top: 1px solid var(--mass-border);
    border-bottom: 1px solid var(--mass-border);

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .mass-rail,
body.dark-theme .mass-rail {

    --mass-bg: #09151e;
    --mass-surface: #0f202c;

    --mass-text: #f0f4f6;
    --mass-muted: #9eabb3;

    --mass-navy: #102d40;
    --mass-gold: #c6a65f;

    --mass-border: #273844;

    --mass-live: #c33a4b;
}


/* =========================================================
   INNER
========================================================= */

.mass-rail .live-mass-inner {

    width: calc(100% - 12px);
    max-width: none;

    margin: 0 auto;
    padding: 0;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        235px;

    align-items: stretch;

    min-height: 104px;

    background: var(--mass-surface);
}


/* =========================================================
   LEFT — STATUS
========================================================= */

.mass-rail .live-mass-left {

    display: flex;
    align-items: center;

    padding: 18px 20px;

    background: var(--mass-navy);

    border-right:
        3px solid var(--mass-gold);
}


.mass-rail .live-status-wrap {

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
}


/* =========================================================
   LIVE BADGE
========================================================= */

.mass-rail .live-badge {

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 5px 8px;

    border-radius: 2px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.mass-rail .status-live {

    background: var(--mass-live);

    color: #ffffff;
}


.mass-rail .status-upcoming {

    background: var(--mass-gold);

    color: #132736;
}


/* dot */

.mass-rail .live-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    flex-shrink: 0;
}


.mass-rail .status-live .live-dot {

    background: #ffffff;

    animation:
        livePulse
        1.3s infinite;
}


@keyframes livePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(255,255,255,.55);
    }

    70% {
        box-shadow:
            0 0 0 6px
            rgba(255,255,255,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(255,255,255,0);
    }

}


/* =========================================================
   STATUS TEXT
========================================================= */

.mass-rail .live-time-label {

    color:
        rgba(255,255,255,.70);

    font-size: 9px;

    line-height: 1.4;
}


/* Hide countdown from left side on desktop */

.mass-rail .live-mass-left
.countdown-chip {

    display: none;
}


/* =========================================================
   CENTER — MASS INFORMATION
========================================================= */

.mass-rail .live-rolling-wrap {

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;

    display: flex;

    align-items: stretch;

    background:
        var(--mass-surface);
}


.mass-rail .live-rolling-track {

    width: 100%;
}


.mass-rail .live-roll-item {

    min-height: 104px;

    height: 100%;

    padding: 18px 27px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* subtle category */

.mass-rail .live-roll-item::before {

    content: "LITURGY • LIVE BROADCAST";

    margin-bottom: 6px;

    color: var(--mass-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.mass-rail .live-roll-item h3 {

    margin: 0 0 4px;

    color: var(--mass-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(18px, 1.5vw, 22px);

    line-height: 1.2;

    font-weight: 700;
}


/* description */

.mass-rail .live-roll-item p {

    max-width: 720px;

    margin: 0;

    color: var(--mass-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 12.5px;

    line-height: 1.45;
}


/* =========================================================
   RIGHT — COUNTDOWN
========================================================= */

.mass-rail .mass-countdown-box {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

    padding: 18px 24px;

    background:
        var(--mass-surface);

    border-left:
        1px solid var(--mass-border);
}


.mass-rail .mass-countdown-label {

    margin-bottom: 5px;

    color: var(--mass-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.mass-rail .countdown-chip {

    color: var(--mass-navy);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(18px, 1.6vw, 23px);

    font-weight: 700;

    letter-spacing: .4px;

    white-space: nowrap;
}


body.dark-mode
.mass-rail
.countdown-chip,

body.dark-theme
.mass-rail
.countdown-chip {

    color: var(--mass-gold);
}


/* =========================================================
   SMALL DECORATIVE RULE
========================================================= */

.mass-rail .mass-countdown-box::after {

    content: "";

    width: 42px;
    height: 2px;

    margin-top: 9px;

    background: var(--mass-gold);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .mass-rail .live-mass-inner {

        width: calc(100% - 8px);

        grid-template-columns:
            160px
            minmax(0, 1fr)
            200px;

        min-height: 96px;
    }


    .mass-rail .live-mass-left {

        padding:
            15px 16px;
    }


    .mass-rail .live-roll-item {

        min-height: 96px;

        padding:
            15px 20px;
    }


    .mass-rail .mass-countdown-box {

        padding:
            15px 17px;
    }


    .mass-rail .live-roll-item h3 {

        font-size: 17px;
    }


    .mass-rail .live-roll-item p {

        font-size: 11.5px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .mass-rail .live-mass-inner {

        width: calc(100% - 4px);

        display: grid;

        grid-template-columns:
            1fr auto;

        grid-template-areas:
            "status countdown"
            "story story";

        min-height: 0;
    }


    /* STATUS */

    .mass-rail .live-mass-left {

        grid-area: status;

        min-width: 0;

        padding:
            12px 13px;

        border-right: 0;

        border-bottom:
            2px solid var(--mass-gold);
    }


    .mass-rail .live-status-wrap {

        gap: 5px;
    }


    .mass-rail .live-time-label {

        font-size: 8px;

        white-space: nowrap;
    }


    /* RIGHT COUNTDOWN */

    .mass-rail .mass-countdown-box {

        grid-area: countdown;

        min-width: 145px;

        align-items: flex-end;

        padding:
            10px 13px;

        border-left:
            1px solid
            rgba(255,255,255,.13);

        border-bottom:
            2px solid
            var(--mass-gold);

        background:
            var(--mass-navy);
    }


    .mass-rail
    .mass-countdown-label {

        color:
            rgba(255,255,255,.60);

        font-size: 7px;
    }


    .mass-rail
    .mass-countdown-box
    .countdown-chip {

        color:
            #ffffff;

        font-size: 15px;
    }


    .mass-rail
    .mass-countdown-box::after {

        width: 28px;

        margin-top: 6px;
    }


    /* STORY */

    .mass-rail .live-rolling-wrap {

        grid-area: story;
    }


    .mass-rail .live-roll-item {

        min-height: 82px;

        padding:
            13px 15px 14px;
    }


    .mass-rail
    .live-roll-item::before {

        font-size: 7px;

        letter-spacing: 1.2px;

        margin-bottom: 4px;
    }


    .mass-rail
    .live-roll-item h3 {

        font-size: 16px;

        margin-bottom: 3px;
    }


    .mass-rail
    .live-roll-item p {

        font-size: 11px;

        line-height: 1.4;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .mass-rail .live-mass-inner {

        width: calc(100% - 2px);

        grid-template-columns:
            1fr 135px;
    }


    .mass-rail .live-mass-left {

        padding:
            10px 10px;
    }


    .mass-rail
    .mass-countdown-box {

        min-width: 135px;

        padding:
            9px 10px;
    }


    .mass-rail
    .mass-countdown-box
    .countdown-chip {

        font-size: 13px;
    }


    .mass-rail
    .live-time-label {

        font-size: 7.5px;
    }


    .mass-rail
    .live-roll-item {

        padding:
            12px 12px 13px;
    }

}


/* ==================== NEW ON VINE MEDIA ==================== */

/* =========================================================
   DESIGN TOKENS
========================================================= */

.vine-premium {
    --vm-bg: #f8f8f6;
    --vm-surface: #ffffff;
    --vm-text: #101820;
    --vm-muted: #6f7880;

    --vm-navy: #0d2f48;
    --vm-navy-deep: #081f31;

    --vm-gold: #c5a86a;
    --vm-gold-soft: #dfc991;

    --vm-border: rgba(16, 34, 48, .10);

    width: 100%;
    margin: 0;
    padding: 42px 0 46px;

    background:
        linear-gradient(
            180deg,
            #fbfbf9 0%,
            var(--vm-bg) 100%
        );

    overflow: hidden;

    transition:
        background .3s ease,
        color .3s ease;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .vine-premium,
body.dark-theme .vine-premium {
    --vm-bg: #07131c;
    --vm-surface: #0d1c27;
    --vm-text: #f2f5f7;
    --vm-muted: #9ba7af;

    --vm-navy: #143b56;
    --vm-navy-deep: #081924;

    --vm-gold: #d0b370;
    --vm-gold-soft: #e1ca91;

    --vm-border: rgba(255,255,255,.09);

    background:
        linear-gradient(
            180deg,
            #091721 0%,
            #07131c 100%
        );
}


/* =========================================================
   FULL WIDTH SHELL
========================================================= */

.vine-premium .vine-shell {
    width: calc(100% - 14px);
    max-width: none;

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.vine-premium .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin: 0 0 22px;
    padding: 0 6px 17px;

    border-bottom:
        1px solid var(--vm-border);
}


/* LEFT HEADER */

.vine-premium .section-head-main {
    max-width: 760px;
}


/* KICKER */

.vine-premium .section-kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vm-gold);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.vine-premium .section-kicker::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--vm-gold);
}


.vine-premium .section-kicker i {
    display: none;
}


/* TITLE */

.vine-premium .section-head h2 {
    margin: 0 0 7px;

    color: var(--vm-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(28px, 2.7vw, 40px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* DESCRIPTION */

.vine-premium .section-head p {
    max-width: 640px;

    margin: 0;

    color: var(--vm-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.vine-premium .vine-nav-buttons {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.vine-premium .vine-nav-btn {
    width: 44px;
    height: 44px;

    padding: 0;

    border:
        1px solid var(--vm-border);

    border-radius: 50%;

    background:
        var(--vm-surface);

    color:
        var(--vm-text);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 12px;

    box-shadow:
        0 6px 18px rgba(10,29,42,.06);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.vine-premium .vine-nav-btn:hover {
    transform: translateY(-2px);

    background:
        var(--vm-navy);

    color: #ffffff;

    border-color:
        var(--vm-navy);
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.vine-premium .vine-slider-wrap {
    width: 100%;

    margin: 0;
    padding: 0 0 7px;

    overflow: hidden;
}


/* =========================================================
   SLIDER
========================================================= */

.vine-premium .vine-slider {
    display: flex;

    gap: 18px;

    width: max-content;

    margin: 0;
    padding: 0;

    transition:
        transform .48s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   PREMIUM CARD
========================================================= */

.vine-premium .vine-card {
    position: relative;

    width: 380px;
    flex: 0 0 380px;

    margin: 0;
    padding: 0;

    background:
        var(--vm-surface);

    border:
        1px solid var(--vm-border);

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 15px 38px rgba(11,31,44,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.vine-premium .vine-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 26px 58px rgba(11,31,44,.15);

    border-color:
        rgba(197,168,106,.55);
}


/* =========================================================
   IMAGE
========================================================= */

.vine-premium .vine-image-wrap {
    position: relative;

    width: 100%;
    height: 245px;

    overflow: hidden;

    background:
        var(--vm-navy-deep);
}


.vine-premium .vine-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5,17,26,.46) 100%
        );

    pointer-events: none;
}


.vine-premium .vine-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform .65s
        cubic-bezier(.2,.65,.3,1);
}


.vine-premium .vine-card:hover
.vine-image-wrap img {
    transform:
        scale(1.055);
}


/* =========================================================
   FLOATING ARROW
========================================================= */

.vine-premium .vine-image-arrow {
    position: absolute;

    right: 15px;
    top: 15px;

    z-index: 4;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.16);

    border:
        1px solid rgba(255,255,255,.30);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;

    transition:
        background .3s ease,
        transform .3s ease;
}


.vine-premium .vine-card:hover
.vine-image-arrow {
    background:
        var(--vm-gold);

    color:
        var(--vm-navy-deep);

    transform:
        rotate(8deg);
}


/* =========================================================
   CONTENT
========================================================= */

.vine-premium .vine-card-content {
    min-height: 230px;

    padding:
        20px 21px 20px;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   CATEGORY
========================================================= */

.vine-premium .vine-category {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 7px;

    margin-bottom: 11px;

    color:
        var(--vm-gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.vine-premium .vine-category i {
    width: 19px;
    height: 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(197,168,106,.12);

    font-size: 8px;
}


/* =========================================================
   TITLE
========================================================= */

.vine-premium .vine-card-content h3 {
    margin: 0 0 10px;

    color:
        var(--vm-text);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -.15px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;

    overflow: hidden;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.vine-premium .vine-card-content p {
    margin:
        0 0 18px;

    color:
        var(--vm-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 12.5px;

    line-height: 1.55;

    display:
        -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient:
        vertical;

    overflow: hidden;
}


/* =========================================================
   READ MORE
========================================================= */

.vine-premium .vine-read-more {
    margin-top: auto;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 9px;

    color:
        var(--vm-text);

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    position: relative;

    padding-bottom: 5px;
}


.vine-premium .vine-read-more::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 30px;
    height: 1px;

    background:
        var(--vm-gold);

    transition:
        width .3s ease;
}


.vine-premium .vine-read-more:hover::after {
    width: 100%;
}


.vine-premium
.vine-read-more i {
    color:
        var(--vm-gold);

    transition:
        transform .3s ease;
}


.vine-premium
.vine-read-more:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   DARK MODE SHADOWS
========================================================= */

body.dark-mode
.vine-premium
.vine-card,

body.dark-theme
.vine-premium
.vine-card {
    box-shadow:
        0 16px 36px
        rgba(0,0,0,.22);
}


body.dark-mode
.vine-premium
.vine-card:hover,

body.dark-theme
.vine-premium
.vine-card:hover {
    box-shadow:
        0 24px 55px
        rgba(0,0,0,.34);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .vine-premium .vine-card {
        width: 410px;

        flex-basis: 410px;
    }


    .vine-premium .vine-image-wrap {
        height: 265px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .vine-media-section.vine-premium {
        padding:
            34px 0 38px;
    }


    .vine-premium .vine-shell {
        width:
            calc(100% - 10px);
    }


    .vine-premium .vine-card {
        width: 340px;

        flex-basis: 340px;
    }


    .vine-premium .vine-image-wrap {
        height: 220px;
    }


    .vine-premium
    .vine-card-content h3 {
        font-size: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .vine-media-section.vine-premium {
        padding:
            27px 0 31px;
    }


    .vine-premium .vine-shell {
        width:
            calc(100% - 4px);
    }


    /* HEADER */

    .vine-premium .section-head {
        align-items:
            center;

        margin-bottom:
            15px;

        padding:
            0 9px 13px;

        gap:
            10px;
    }


    .vine-premium
    .section-kicker {
        font-size: 7px;

        letter-spacing:
            1.5px;

        margin-bottom:
            5px;
    }


    .vine-premium
    .section-kicker::before {
        width: 18px;
    }


    .vine-premium
    .section-head h2 {
        margin-bottom:
            4px;

        font-size:
            23px;
    }


    .vine-premium
    .section-head p {
        max-width:
            255px;

        font-size:
            10.5px;

        line-height:
            1.4;
    }


    /* NAV */

    .vine-premium
    .vine-nav-buttons {
        gap: 5px;
    }


    .vine-premium
    .vine-nav-btn {
        width: 34px;
        height: 34px;

        font-size:
            9px;
    }


    /* SLIDER */

    .vine-premium .vine-slider {
        gap: 10px;
    }


    /*
       Premium mobile:
       almost one complete story visible
       with a glimpse of the next.
    */

    .vine-premium .vine-card {
        width:
            calc(91vw - 5px);

        flex-basis:
            calc(91vw - 5px);

        border-radius:
            13px;
    }


    .vine-premium
    .vine-image-wrap {
        height:
            235px;
    }


    .vine-premium
    .vine-card-content {
        min-height:
            205px;

        padding:
            17px 17px 18px;
    }


    .vine-premium
    .vine-category {
        margin-bottom:
            9px;

        font-size:
            7px;
    }


    .vine-premium
    .vine-card-content h3 {
        margin-bottom:
            8px;

        font-size:
            18px;

        line-height:
            1.25;
    }


    .vine-premium
    .vine-card-content p {
        margin-bottom:
            14px;

        font-size:
            11.5px;

        -webkit-line-clamp:
            2;
    }


    .vine-premium
    .vine-read-more {
        font-size:
            8px;
    }


    .vine-premium
    .vine-image-arrow {
        width: 34px;
        height: 34px;

        right: 12px;
        top: 12px;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .vine-premium .vine-shell {
        width:
            calc(100% - 2px);
    }


    .vine-premium
    .section-head {
        padding:
            0 7px 12px;
    }


    .vine-premium
    .section-head p {
        max-width:
            220px;
    }


    .vine-premium .vine-card {
        width:
            91vw;

        flex-basis:
            91vw;
    }


    .vine-premium
    .vine-image-wrap {
        height:
            215px;
    }

}
/* =========================================================
   VINE MEDIA — INFINITE CONTINUOUS SLIDER
========================================================= */

.vine-premium .vine-slider-wrap {
    position: relative;
    overflow: hidden;
}


/*
IMPORTANT:
The infinite script controls transform continuously,
so remove transition from the track.
*/

.vine-premium .vine-slider {
    display: flex;
    width: max-content;

    transition: none !important;

    will-change: transform;

    transform: translate3d(0, 0, 0);
}


/* Prevent cloned cards from shrinking */

.vine-premium .vine-card {
    flex-shrink: 0;
}


/*
Optional soft edge fade.
Makes the carousel feel more premium.
*/

.vine-premium .vine-slider-wrap::before,
.vine-premium .vine-slider-wrap::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 45px;

    z-index: 8;

    pointer-events: none;
}


.vine-premium .vine-slider-wrap::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--vm-bg),
            transparent
        );
}


.vine-premium .vine-slider-wrap::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--vm-bg),
            transparent
        );
}


/* Smaller fade on phones */

@media (max-width: 680px) {

    .vine-premium .vine-slider-wrap::before,
    .vine-premium .vine-slider-wrap::after {
        width: 18px;
    }

}


/* ==================== VINE JOURNAL ==================== */

/* =========================================================
   BLOG DESIGN TOKENS
========================================================= */

.vine-journal {
    --bj-bg: #f6f5f1;
    --bj-surface: #ffffff;
    --bj-text: #132530;
    --bj-muted: #717c83;

    --bj-navy: #071b48;
    --bj-navy-deep: #061d2c;

    --bj-gold: #d7b45a;
    --bj-gold-soft: #d7c18d;

    --bj-burgundy: #8d3543;

    --bj-border: rgba(18, 42, 57, .11);

    width: 100%;
    margin: 0;

    padding: 43px 0 48px;

    background: var(--bj-bg);

    overflow: hidden;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .vine-journal,
body.dark-theme .vine-journal {

    --bj-bg: #08151e;
    --bj-surface: #0e202b;

    --bj-text: #f0f4f6;
    --bj-muted: #9ca8af;

    --bj-navy: #143a54;
    --bj-navy-deep: #061720;

    --bj-gold: #cbb06f;
    --bj-gold-soft: #dec990;

    --bj-burgundy: #ac4a59;

    --bj-border: rgba(255,255,255,.09);
}


/* =========================================================
   SHELL
========================================================= */

.vine-journal-inner {

    width:
        calc(100% - 14px);

    margin:
        0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.vine-journal-head {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 19px;

    padding:
        0 5px 16px;

    border-bottom:
        1px solid var(--bj-border);
}


.vine-journal-heading {

    max-width: 760px;
}


.vine-journal-kicker {

    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 7px;

    color: var(--bj-gold);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.vine-journal-kicker::before {

    content: "";

    width: 28px;
    height: 1px;

    background: var(--bj-gold);
}


.vine-journal-head h2 {

    margin: 0 0 6px;

    color: var(--bj-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(27px, 2.8vw, 39px);

    line-height: 1.08;

    font-weight: 700;
}


.vine-journal-head p {

    max-width: 650px;

    margin: 0;

    color: var(--bj-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   HEADER MARK
========================================================= */

.vine-journal-mark {

    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--bj-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.vine-journal-mark i {

    color: var(--bj-gold);
}


/* =========================================================
   BLOG GRID
========================================================= */

.vine-journal-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(330px, .78fr);

    gap: 14px;

    align-items: stretch;
}


/* =========================================================
   FEATURED STORY
========================================================= */

.journal-featured {

    position: relative;

    min-height: 535px;

    overflow: hidden;

    background: var(--bj-navy-deep);

    border-radius: 15px;

    cursor: pointer;

    box-shadow:
        0 18px 45px
        rgba(8,30,43,.10);
}


.journal-featured-image {

    position: absolute;

    inset: 0;
}


.journal-featured-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s
        cubic-bezier(.2,.6,.3,1);
}


.journal-featured:hover
.journal-featured-image img {

    transform:
        scale(1.035);
}


/* overlay */

.journal-featured::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(4,20,31,.05) 20%,
            rgba(4,20,31,.35) 55%,
            rgba(4,20,31,.97) 100%
        );

    pointer-events: none;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.journal-featured-content {

    position: absolute;

    z-index: 3;

    left: 30px;
    right: 30px;
    bottom: 28px;

    max-width: 700px;

    color: #ffffff;
}


.journal-category {

    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 11px;

    color: var(--bj-gold-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.journal-category::before {

    content: "";

    width: 17px;
    height: 1px;

    background: var(--bj-gold-soft);
}


.journal-featured h3 {

    max-width: 680px;

    margin: 0 0 10px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(27px, 3vw, 42px);

    line-height: 1.12;

    font-weight: 600;
}


.journal-featured-excerpt {

    max-width: 620px;

    margin: 0 0 17px;

    color:
        rgba(255,255,255,.76);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   META
========================================================= */

.journal-meta {

    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 16px;

    color:
        rgba(255,255,255,.62);

    font-size: 8.5px;

    font-weight: 600;
}


.journal-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.journal-meta i {

    color:
        var(--bj-gold-soft);
}


/* =========================================================
   READ STORY BUTTON
========================================================= */

.journal-open-story {

    min-height: 39px;

    padding:
        0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius: 7px;

    background:
        rgba(255,255,255,.10);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    color: #ffffff;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.journal-open-story:hover {

    background:
        var(--bj-gold);

    color:
        var(--bj-navy-deep);

    transform:
        translateY(-1px);
}


/* =========================================================
   SUPPORTING STORIES
========================================================= */

.journal-secondary {

    display: grid;

    gap: 10px;
}


/* =========================================================
   SMALL STORY
========================================================= */

.journal-story {

    min-height: 123px;

    display: grid;

    grid-template-columns:
        145px minmax(0, 1fr);

    overflow: hidden;

    background:
        var(--bj-surface);

    border:
        1px solid
        var(--bj-border);

    border-radius: 11px;

    cursor: pointer;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}


.journal-story:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(185,155,94,.55);

    box-shadow:
        0 12px 30px
        rgba(8,30,43,.07);
}


/* image */

.journal-story-image {

    overflow: hidden;

    background:
        var(--bj-navy);
}


.journal-story-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .45s ease;
}


.journal-story:hover
.journal-story-image img {

    transform:
        scale(1.045);
}


/* content */

.journal-story-content {

    padding:
        13px 14px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.journal-story-category {

    margin-bottom: 5px;

    color:
        var(--bj-burgundy);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.15px;

    text-transform: uppercase;
}


.journal-story h3 {

    margin:
        0 0 6px;

    color:
        var(--bj-text);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 15px;

    line-height: 1.28;

    font-weight: 700;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


.journal-story-meta {

    display: flex;

    gap: 10px;

    color:
        var(--bj-muted);

    font-size: 7.5px;

    font-weight: 600;
}


.journal-story-meta span {

    display: inline-flex;
    align-items: center;

    gap: 4px;
}


.journal-story-meta i {

    color:
        var(--bj-gold);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.journal-empty {

    grid-column: 1 / -1;

    padding: 50px 25px;

    text-align: center;

    background:
        var(--bj-surface);

    border:
        1px solid
        var(--bj-border);

    border-radius: 12px;
}


.journal-empty i {

    margin-bottom: 15px;

    color:
        var(--bj-gold);

    font-size: 28px;
}


.journal-empty h3 {

    margin:
        0 0 7px;

    color:
        var(--bj-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;
}


.journal-empty p {

    margin: 0;

    color:
        var(--bj-muted);
}


/* =========================================================
   READING MODAL
========================================================= */

.journal-reader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(3,14,21,.76);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.journal-reader.open {

    display: flex;
}


/* =========================================================
   READER PANEL
========================================================= */

.journal-reader-panel {

    position: relative;

    width:
        min(
            870px,
            100%
        );

    max-height:
        calc(100vh - 36px);

    overflow-y: auto;

    background:
        var(--bj-surface);

    color:
        var(--bj-text);

    border-radius: 15px;

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.35);
}


/* =========================================================
   MODAL IMAGE
========================================================= */

.journal-reader-image {

    width: 100%;
    height: 330px;

    background:
        var(--bj-navy);
}


.journal-reader-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   MODAL BODY
========================================================= */

.journal-reader-body {

    max-width: 760px;

    margin: 0 auto;

    padding:
        34px 35px 45px;
}


.journal-reader-category {

    display: block;

    margin-bottom: 9px;

    color:
        var(--bj-burgundy);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.journal-reader-title {

    margin:
        0 0 13px;

    color:
        var(--bj-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(25px, 3vw, 39px);

    line-height: 1.18;

    font-weight: 600;
}


.journal-reader-meta {

    display: flex;
    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom:
        1px solid var(--bj-border);

    color:
        var(--bj-muted);

    font-size: 9px;
}


.journal-reader-meta span {

    display: inline-flex;
    align-items: center;

    gap: 6px;
}


.journal-reader-meta i {

    color:
        var(--bj-gold);
}


/* =========================================================
   ARTICLE TEXT
========================================================= */

.journal-reader-content {

    color:
        var(--bj-text);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 16px;

    line-height: 1.8;
}


.journal-reader-content p {

    margin:
        0 0 18px;
}


.journal-reader-content img {

    max-width: 100%;
    height: auto;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.journal-reader-close {

    position: sticky;

    float: right;

    top: 13px;

    z-index: 10;

    width: 39px;
    height: 39px;

    margin:
        13px 13px -52px 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    background:
        rgba(5,23,34,.82);

    color: #ffffff;

    font-size: 12px;

    cursor: pointer;

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   DESKTOP ADJUSTMENTS
========================================================= */

@media (min-width: 1350px) {

    .journal-featured {

        min-height:
            560px;
    }


    .journal-story {

        min-height:
            131px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vine-journal-grid {

        grid-template-columns:
            1fr;
    }


    .journal-featured {

        min-height:
            470px;
    }


    .journal-secondary {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .journal-story {

        grid-template-columns:
            120px 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .vine-journal {

        padding:
            28px 0 32px;
    }


    .vine-journal-inner {

        width:
            calc(100% - 6px);
    }


    .vine-journal-head {

        padding:
            0 8px 13px;

        margin-bottom:
            11px;
    }


    .vine-journal-head h2 {

        font-size:
            24px;
    }


    .vine-journal-head p {

        max-width:
            300px;

        font-size:
            10.5px;
    }


    .vine-journal-mark {

        display: none;
    }


    .journal-featured {

        min-height:
            420px;

        border-radius:
            12px;
    }


    .journal-featured-content {

        left:
            19px;

        right:
            19px;

        bottom:
            20px;
    }


    .journal-featured h3 {

        font-size:
            25px;
    }


    .journal-featured-excerpt {

        font-size:
            11.5px;

        -webkit-line-clamp:
            3;

        display:
            -webkit-box;

        -webkit-box-orient:
            vertical;

        overflow:
            hidden;
    }


    .journal-secondary {

        grid-template-columns:
            1fr;

        gap:
            7px;
    }


    .journal-story {

        min-height:
            112px;

        grid-template-columns:
            112px 1fr;

        border-radius:
            9px;
    }


    .journal-story-content {

        padding:
            10px 11px;
    }


    .journal-story h3 {

        font-size:
            14px;
    }


    /* modal */

    .journal-reader {

        padding: 0;

        align-items:
            stretch;
    }


    .journal-reader-panel {

        width: 100%;

        max-height: 100vh;

        border-radius: 0;
    }


    .journal-reader-image {

        height:
            245px;
    }


    .journal-reader-body {

        padding:
            25px 18px 40px;
    }


    .journal-reader-title {

        font-size:
            25px;
    }


    .journal-reader-content {

        font-size:
            15px;

        line-height:
            1.75;
    }

}
/* =========================================================
   FIX — BLOG ARTICLE READER VISIBILITY
   KEEP THIS AT THE VERY END OF THE CSS
========================================================= */


/* =========================================================
   LIGHT MODE READER
========================================================= */

.vine-journal + .journal-reader .journal-reader-panel,
#journalReader .journal-reader-panel {
    background: #fbfaf7 !important;
    color: #172833 !important;
}


/* ARTICLE BODY */

#journalReader .journal-reader-body {
    background: #fbfaf7 !important;
    color: #172833 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* CATEGORY */

#journalReader .journal-reader-category {
    color: #9a3847 !important;

    opacity: 1 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: 1.7px !important;

    text-transform: uppercase !important;
}


/* MAIN ARTICLE TITLE */

#journalReader .journal-reader-title {
    color: #102b3d !important;

    opacity: 1 !important;

    text-shadow: none !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size:
        clamp(27px, 3.4vw, 45px) !important;

    font-weight: 700 !important;

    line-height: 1.14 !important;

    letter-spacing: -0.6px !important;

    margin:
        0 0 15px !important;
}


/* META */

#journalReader .journal-reader-meta {
    color: #748088 !important;

    opacity: 1 !important;

    font-family:
        "Manrope",
        Arial,
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 600 !important;

    border-color:
        rgba(17,43,59,.12) !important;
}


#journalReader .journal-reader-meta span {
    color: #748088 !important;
}


#journalReader .journal-reader-meta i {
    color: #b89a5c !important;
}


/* =========================================================
   MAIN ARTICLE CONTENT
========================================================= */

#journalReader .journal-reader-content {
    color: #263943 !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-family:
        "Spectral",
        Georgia,
        serif !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.82 !important;

    letter-spacing: 0 !important;

    text-shadow: none !important;
}


/* ALL TEXT INSIDE ARTICLE */

#journalReader .journal-reader-content p,
#journalReader .journal-reader-content div,
#journalReader .journal-reader-content span,
#journalReader .journal-reader-content li {
    color: #263943 !important;

    opacity: 1 !important;

    text-shadow: none !important;
}


/* ARTICLE SUBHEADINGS */

#journalReader .journal-reader-content h1,
#journalReader .journal-reader-content h2,
#journalReader .journal-reader-content h3,
#journalReader .journal-reader-content h4,
#journalReader .journal-reader-content h5,
#journalReader .journal-reader-content h6 {

    color: #102b3d !important;

    opacity: 1 !important;

    text-shadow: none !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    line-height: 1.3 !important;
}


/* LINKS INSIDE ARTICLE */

#journalReader .journal-reader-content a {
    color: #8e3543 !important;

    text-decoration:
        underline !important;

    text-decoration-color:
        rgba(142,53,67,.35) !important;

    text-underline-offset:
        3px;
}


/* BLOCKQUOTE */

#journalReader .journal-reader-content blockquote {

    margin:
        25px 0 !important;

    padding:
        17px 20px !important;

    border-left:
        3px solid #b89a5c !important;

    background:
        #f1ede3 !important;

    color:
        #374851 !important;

    font-style:
        italic !important;
}


/* =========================================================
   ARTICLE IMAGE
========================================================= */

#journalReader .journal-reader-image {
    position: relative;

    height: 350px !important;

    background: #0b293c !important;

    overflow: hidden !important;
}


#journalReader .journal-reader-image img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    opacity: 1 !important;

    filter: none !important;
}


/* subtle divider between image and article */

#journalReader .journal-reader-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #b89a5c,
            #ddc991,
            transparent
        );
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#journalReader .journal-reader-close {

    position: absolute !important;

    top: 16px !important;
    right: 16px !important;

    z-index: 30 !important;

    width: 42px !important;
    height: 42px !important;

    margin: 0 !important;

    border:
        1px solid rgba(255,255,255,.25) !important;

    border-radius:
        50% !important;

    background:
        rgba(5,25,38,.88) !important;

    color: #ffffff !important;

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.22) !important;
}


#journalReader .journal-reader-close:hover {

    background:
        #b89a5c !important;

    color:
        #071e2c !important;
}


/* =========================================================
   READER BACKDROP
========================================================= */

#journalReader.journal-reader {

    background:
        rgba(3,14,22,.80) !important;

    backdrop-filter:
        blur(7px) !important;

    -webkit-backdrop-filter:
        blur(7px) !important;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode #journalReader .journal-reader-panel,
body.dark-theme #journalReader .journal-reader-panel {

    background:
        #0d1e29 !important;

    color:
        #f3f1ea !important;
}


body.dark-mode #journalReader .journal-reader-body,
body.dark-theme #journalReader .journal-reader-body {

    background:
        #0d1e29 !important;

    color:
        #f3f1ea !important;
}


body.dark-mode #journalReader .journal-reader-title,
body.dark-theme #journalReader .journal-reader-title {

    color:
        #ffffff !important;
}


body.dark-mode #journalReader .journal-reader-category,
body.dark-theme #journalReader .journal-reader-category {

    color:
        #d5b874 !important;
}


body.dark-mode #journalReader .journal-reader-meta,
body.dark-theme #journalReader .journal-reader-meta,
body.dark-mode #journalReader .journal-reader-meta span,
body.dark-theme #journalReader .journal-reader-meta span {

    color:
        #a7b1b7 !important;
}


body.dark-mode #journalReader .journal-reader-content,
body.dark-theme #journalReader .journal-reader-content,

body.dark-mode #journalReader .journal-reader-content p,
body.dark-theme #journalReader .journal-reader-content p,

body.dark-mode #journalReader .journal-reader-content div,
body.dark-theme #journalReader .journal-reader-content div,

body.dark-mode #journalReader .journal-reader-content span,
body.dark-theme #journalReader .journal-reader-content span,

body.dark-mode #journalReader .journal-reader-content li,
body.dark-theme #journalReader .journal-reader-content li {

    color:
        #d8dfe3 !important;
}


body.dark-mode #journalReader .journal-reader-content h1,
body.dark-mode #journalReader .journal-reader-content h2,
body.dark-mode #journalReader .journal-reader-content h3,
body.dark-mode #journalReader .journal-reader-content h4,

body.dark-theme #journalReader .journal-reader-content h1,
body.dark-theme #journalReader .journal-reader-content h2,
body.dark-theme #journalReader .journal-reader-content h3,
body.dark-theme #journalReader .journal-reader-content h4 {

    color:
        #ffffff !important;
}


body.dark-mode #journalReader .journal-reader-content blockquote,
body.dark-theme #journalReader .journal-reader-content blockquote {

    background:
        rgba(201,174,108,.075) !important;

    color:
        #dfe4e6 !important;

    border-left-color:
        #cfb16c !important;
}


/* =========================================================
   MOBILE READER
========================================================= */

@media (max-width: 680px) {

    #journalReader .journal-reader-panel {

        width: 100% !important;

        max-height: 100vh !important;

        border-radius: 0 !important;
    }


    #journalReader .journal-reader-image {

        height:
            255px !important;
    }


    #journalReader .journal-reader-body {

        padding:
            27px 20px 48px !important;
    }


    #journalReader .journal-reader-title {

        font-size:
            27px !important;

        line-height:
            1.18 !important;
    }


    #journalReader .journal-reader-content {

        font-size:
            15.5px !important;

        line-height:
            1.78 !important;
    }


    #journalReader .journal-reader-close {

        top: 12px !important;
        right: 12px !important;

        width: 39px !important;
        height: 39px !important;
    }

}


/* ==================== SACRED ARTS & AUDIO ==================== */

/* =========================================================
   DESIGN TOKENS
========================================================= */

.sacred-studio {

    --ss-bg: #f5f4ef;
    --ss-surface: #ffffff;

    --ss-text: #132630;
    --ss-muted: #758087;

    --ss-navy: #071b48;
    --ss-navy-deep: #061c2a;

    --ss-gold: #d7b45a;
    --ss-gold-light: #dbc58c;

    --ss-burgundy: #071b48;

    --ss-border:
        rgba(16,43,58,.11);

    width: 100%;

    padding:
        44px 0 48px;

    background:
        var(--ss-bg);

    overflow: hidden;
}


/* DARK MODE */

body.dark-mode .sacred-studio,
body.dark-theme .sacred-studio {

    --ss-bg: #07141d;
    --ss-surface: #0d202b;

    --ss-text: #f1f4f5;
    --ss-muted: #9aa7ae;

    --ss-navy: #153c56;
    --ss-navy-deep: #061620;

    --ss-gold: #ccb06e;
    --ss-gold-light: #dfca92;

    --ss-burgundy: #aa4a59;

    --ss-border:
        rgba(255,255,255,.09);
}


/* =========================================================
   SHELL
========================================================= */

.sacred-studio-inner {

    width:
        calc(100% - 14px);

    margin:
        0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.sacred-studio-head {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;

    padding:
        0 5px 16px;

    border-bottom:
        1px solid
        var(--ss-border);
}


.sacred-studio-kicker {

    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 7px;

    color:
        var(--ss-gold);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.sacred-studio-kicker::before {

    content: "";

    width: 28px;
    height: 1px;

    background:
        var(--ss-gold);
}


.sacred-studio-head h2 {

    margin:
        0 0 6px;

    color:
        var(--ss-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(
            27px,
            2.8vw,
            39px
        );

    line-height: 1.08;
}


.sacred-studio-head p {

    max-width: 680px;

    margin: 0;

    color:
        var(--ss-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 13px;

    line-height: 1.55;
}


.sacred-studio-status {

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--ss-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.sacred-studio-status i {

    color:
        var(--ss-gold);
}


/* =========================================================
   MAIN GRID
========================================================= */

.sacred-studio-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, .75fr);

    gap: 14px;
}


/* =========================================================
   ART PANEL
========================================================= */

.sacred-art-panel {

    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        var(--ss-navy-deep);

    border-radius:
        14px;

    box-shadow:
        0 18px 45px
        rgba(5,25,37,.10);
}


/* MAIN ART */

.sacred-art-main {

    position: relative;

    height: 480px;

    overflow: hidden;
}


.sacred-art-main img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        opacity .3s ease,
        transform .6s ease;
}


.sacred-art-main:hover img {

    transform:
        scale(1.025);
}


.sacred-art-main::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,18,27,.04) 25%,
            rgba(4,18,27,.32) 60%,
            rgba(4,18,27,.95) 100%
        );

    pointer-events: none;
}


/* ART CONTENT */

.sacred-art-content {

    position: absolute;

    z-index: 3;

    left: 27px;
    right: 27px;
    bottom: 24px;

    max-width: 650px;

    color: #fff;
}


.sacred-art-source {

    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    color:
        var(--ss-gold-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.sacred-art-source i {

    font-size: 9px;
}


.sacred-art-title {

    margin:
        0 0 8px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(
            24px,
            2.4vw,
            35px
        );

    line-height: 1.13;

    font-weight: 600;
}


.sacred-art-description {

    max-width: 590px;

    margin:
        0 0 14px;

    color:
        rgba(255,255,255,.76);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 12px;

    line-height: 1.55;
}


.sacred-art-credit {

    margin-bottom: 14px;

    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    line-height: 1.4;
}


/* SOURCE BUTTON */

.sacred-art-link {

    min-height: 37px;

    padding:
        0 13px;

    display: none;
    align-items: center;

    gap: 7px;

    width: fit-content;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 7px;

    color: #fff;

    background:
        rgba(255,255,255,.09);

    text-decoration: none;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.sacred-art-link.visible {
    display: inline-flex;
}


/* =========================================================
   WEB ART RAIL
========================================================= */

.sacred-art-rail {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 1px;

    background:
        rgba(255,255,255,.08);

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.sacred-art-thumb {

    position: relative;

    height: 105px;

    padding: 0;

    overflow: hidden;

    border: 0;

    background:
        #102b3d;

    cursor: pointer;
}


.sacred-art-thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: .72;

    transition:
        opacity .25s ease,
        transform .35s ease;
}


.sacred-art-thumb:hover img {

    opacity: 1;

    transform:
        scale(1.05);
}


.sacred-art-thumb::after {

    content:
        "\f06e";

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        rgba(5,24,36,.67);

    opacity: 0;

    transition:
        opacity .2s ease;
}


.sacred-art-thumb:hover::after {
    opacity: 1;
}


/* =========================================================
   PODCAST PANEL
========================================================= */

.sacred-podcast-panel {

    min-width: 0;

    display: flex;
    flex-direction: column;

    background:
        var(--ss-surface);

    border:
        1px solid
        var(--ss-border);

    border-radius:
        14px;

    overflow: hidden;

    box-shadow:
        0 12px 36px
        rgba(6,27,39,.05);
}


/* =========================================================
   PODCAST TOP
========================================================= */

.sacred-podcast-main {

    padding:
        25px 23px 22px;

    border-bottom:
        1px solid
        var(--ss-border);
}


.sacred-podcast-label {

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color:
        var(--ss-burgundy);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.sacred-podcast-label i {

    color:
        var(--ss-gold);
}


.sacred-podcast-headline {

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 14px;

    align-items: start;
}


.sacred-podcast-main h3 {

    margin:
        0 0 8px;

    color:
        var(--ss-text);

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(
            20px,
            2vw,
            27px
        );

    line-height: 1.2;
}


.sacred-podcast-main p {

    margin:
        0 0 19px;

    color:
        var(--ss-muted);

    font-family:
        "Spectral",
        Georgia,
        serif;

    font-size: 11.5px;

    line-height: 1.55;
}


/* PLAY BUTTON */

.sacred-main-play {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--ss-navy-deep);

    background:
        var(--ss-gold);

    font-size: 14px;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(185,155,94,.22);
}


/* =========================================================
   CUSTOM PLAYER
========================================================= */

.sacred-player {

    margin-top:
        4px;
}


.sacred-player-track {

    width: 100%;
    height: 4px;

    appearance: none;

    border-radius: 10px;

    outline: none;

    background:
        #e4e5e2;

    cursor: pointer;
}


.sacred-player-track::-webkit-slider-thumb {

    appearance: none;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--ss-gold);

    cursor: pointer;
}


.sacred-player-times {

    display: flex;
    justify-content: space-between;

    margin-top: 7px;

    color:
        var(--ss-muted);

    font-size: 8px;
}


/* =========================================================
   PODCAST LIST
========================================================= */

.sacred-podcast-list {

    flex: 1;

    padding:
        8px;
}


.sacred-podcast-list-title {

    padding:
        10px 9px 7px;

    color:
        var(--ss-muted);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


.sacred-podcast-item {

    width: 100%;

    min-height: 67px;

    padding:
        9px;

    display: grid;

    grid-template-columns:
        39px 1fr auto;

    align-items: center;

    gap: 10px;

    border:
        1px solid transparent;

    border-radius: 9px;

    background:
        transparent;

    color:
        var(--ss-text);

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.sacred-podcast-item:hover {

    background:
        rgba(185,155,94,.065);

    border-color:
        rgba(185,155,94,.15);
}


.sacred-podcast-item-icon {

    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color:
        var(--ss-gold);

    background:
        rgba(185,155,94,.10);

    font-size: 12px;
}


.sacred-podcast-copy {

    min-width: 0;
}


.sacred-podcast-copy strong {

    display: block;

    margin-bottom: 3px;

    overflow: hidden;

    color:
        var(--ss-text);

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.sacred-podcast-copy small {

    display: block;

    color:
        var(--ss-muted);

    font-size: 7.5px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.sacred-podcast-arrow {

    color:
        var(--ss-gold);

    font-size: 8px;
}


/* WEB ITEM */

.sacred-podcast-item.web-source
.sacred-podcast-item-icon {

    color:
        #fff;

    background:
        var(--ss-navy);
}


/* =========================================================
   LOADING
========================================================= */

.sacred-web-loading {

    padding:
        14px 10px;

    color:
        var(--ss-muted);

    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .sacred-studio-grid {

        grid-template-columns:
            1fr;
    }


    .sacred-art-main {

        height:
            470px;
    }

}


@media (max-width: 680px) {

    .sacred-studio {

        padding:
            28px 0 32px;
    }


    .sacred-studio-inner {

        width:
            calc(100% - 6px);
    }


    .sacred-studio-head {

        padding:
            0 8px 13px;

        margin-bottom:
            10px;
    }


    .sacred-studio-status {

        display: none;
    }


    .sacred-studio-head h2 {

        font-size: 24px;
    }


    .sacred-studio-head p {

        font-size: 10.5px;

        max-width: 300px;
    }


    .sacred-art-main {

        height: 400px;
    }


    .sacred-art-content {

        left: 18px;
        right: 18px;
        bottom: 18px;
    }


    .sacred-art-title {

        font-size: 25px;
    }


    .sacred-art-description {

        font-size: 11px;
    }


    .sacred-art-rail {

        grid-template-columns:
            repeat(4,1fr);
    }


    .sacred-art-thumb {

        height: 78px;
    }


    .sacred-podcast-main {

        padding:
            21px 17px 18px;
    }

}


/* =========================================================
   FINAL ISOLATION — NEW ON VINE MEDIA
   Prevent legacy/global card rules from stretching this slider.
========================================================= */
section.vine-media-section.vine-premium {
    width: 100% !important;
    overflow: hidden !important;
}
section.vine-media-section.vine-premium > .vine-shell {
    width: calc(100% - 14px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 0 !important;
}
section.vine-media-section.vine-premium .vine-slider-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
section.vine-media-section.vine-premium #vineSlider {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    transition: none !important;
    will-change: transform;
    touch-action: pan-y;
}
section.vine-media-section.vine-premium #vineSlider > article.vine-card {
    width: 370px !important;
    min-width: 370px !important;
    max-width: 370px !important;
    flex: 0 0 370px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}
section.vine-media-section.vine-premium .vine-card .vine-image-wrap {
    width: 100% !important;
    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;
    flex: 0 0 225px !important;
    overflow: hidden !important;
}
section.vine-media-section.vine-premium .vine-card .vine-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
section.vine-media-section.vine-premium .vine-card .vine-card-content {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
section.vine-media-section.vine-premium .vine-card-content h3 {
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
section.vine-media-section.vine-premium .vine-card-content p {
    margin: 0 0 14px !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
section.vine-media-section.vine-premium .vine-read-more {
    margin-top: 3px !important;
}
@media (max-width: 900px) {
    section.vine-media-section.vine-premium #vineSlider > article.vine-card {
        width: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        flex-basis: 330px !important;
    }
    section.vine-media-section.vine-premium .vine-card .vine-image-wrap {
        height: 205px !important;
        min-height: 205px !important;
        max-height: 205px !important;
        flex-basis: 205px !important;
    }
}
@media (max-width: 680px) {
    section.vine-media-section.vine-premium > .vine-shell { width: calc(100% - 6px) !important; }
    section.vine-media-section.vine-premium #vineSlider { gap: 9px !important; }
    section.vine-media-section.vine-premium #vineSlider > article.vine-card {
        width: 88vw !important;
        min-width: 88vw !important;
        max-width: 88vw !important;
        flex-basis: 88vw !important;
        border-radius: 12px !important;
    }
    section.vine-media-section.vine-premium .vine-card .vine-image-wrap {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        flex-basis: 220px !important;
    }
}

/* =========================================================
   MOBILE NAV — ICON ONLY HAMBURGER
========================================================= */
@media (max-width: 900px) {
    .church-nav .menu-toggle {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .church-nav .menu-toggle i {
        font-size: .95rem !important;
    }
}

/* =========================================================
   NEWSLETTER — CLEAN CATHOLIC EDITORIAL FINISH
========================================================= */
.newsletter-section {
    padding: 58px 0;
    background: #f5f3ed;
}
.newsletter-box {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 38px;
    align-items: center;
    padding: clamp(28px, 4vw, 50px);
    background: #fffdf8;
    border: 1px solid #dfd7c8;
    border-top: 3px solid #b59654;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(10,31,45,.06);
}
.newsletter-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #8a2f3c;
    font: 800 8px/1.2 Arial, sans-serif;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.newsletter-kicker i { color: #b59654; }
.newsletter-content h2 {
    margin: 0 0 8px;
    color: #102f45;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
}
.newsletter-content p {
    margin: 0;
    max-width: 650px;
    color: #69747b;
    font-family: "Spectral", Georgia, serif;
    font-size: 13px;
    line-height: 1.6;
}
.newsletter-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 17px;
    color: #53616a;
    font-size: 10px;
}
.newsletter-points span { display: inline-flex; align-items: center; gap: 6px; }
.newsletter-points i { color: #b59654; }
.newsletter-form { display: grid; gap: 10px; }
.newsletter-input-group { position: relative; }
.newsletter-input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a949a;
}
.newsletter-input-group input {
    width: 100%;
    height: 50px;
    padding: 0 15px 0 43px;
    border: 1px solid #d8d5cf;
    border-radius: 8px;
    background: #fff;
    color: #172630;
    outline: none;
}
.newsletter-input-group input:focus {
    border-color: #b59654;
    box-shadow: 0 0 0 3px rgba(181,150,84,.11);
}
.newsletter-btn {
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: #0b2a42;
    color: #fff;
    font: 800 9px/1 Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.newsletter-btn:hover { background: #8a2f3c; }
.newsletter-note { margin: 10px 0 0; color: #7c858b; font-size: 9px; }
.newsletter-message { margin-top: 8px; font-size: 10px; font-weight: 600; }
.newsletter-message.success { color: #2f764e; }
.newsletter-message.info { color: #496d85; }
.newsletter-message.error { color: #9a3341; }
body.dark-mode .newsletter-section,
body.dark-theme .newsletter-section { background: #08151e; }
body.dark-mode .newsletter-box,
body.dark-theme .newsletter-box { background: #0e202b; border-color: #293a45; }
body.dark-mode .newsletter-content h2,
body.dark-theme .newsletter-content h2 { color: #f1f4f5; }
body.dark-mode .newsletter-content p,
body.dark-theme .newsletter-content p,
body.dark-mode .newsletter-points,
body.dark-theme .newsletter-points,
body.dark-mode .newsletter-note,
body.dark-theme .newsletter-note { color: #9eabb2; }
body.dark-mode .newsletter-input-group input,
body.dark-theme .newsletter-input-group input { background: #0a1923; border-color: #30404b; color: #eef3f5; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
    margin-top: 0;
    padding: 58px 0 0;
    background: #071b48;
    color: rgba(255,255,255,.76);
    border-top: 3px solid #b59654;
}
.footer-top {
    display: grid;
    grid-template-columns: 1.45fr .8fr .8fr 1fr;
    gap: 34px;
    padding-bottom: 42px;
}
.site-footer .logo img { width: min(220px, 80%); filter: brightness(0) invert(1); }
.footer-brand-text { max-width: 390px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.65; }
.footer-col h3 { margin: 0 0 13px; color: #dbc58c; font-family: "Cinzel", Georgia, serif; font-size: 13px; }
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-links a, .footer-contact a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 11px; }
.footer-links a:hover, .footer-contact a:hover { color: #dbc58c; }
.footer-contact li { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; }
.footer-contact i { margin-top: 4px; color: #c6a65f; }
.footer-socials { display: flex; gap: 7px; margin-top: 17px; }
.footer-socials a {
    width: 35px; height: 35px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}
.footer-socials a:hover { background: #8a2f3c; border-color: #8a2f3c; }
.footer-bottom {
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    font-size: 10px;
}
.footer-bottom p { margin: 0; }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a { color: rgba(255,255,255,.57); text-decoration: none; }
@media (max-width: 980px) {
    .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .newsletter-section { padding: 38px 0; }
    .newsletter-box { grid-template-columns: 1fr; gap: 24px; padding: 26px 18px; }
    .newsletter-points { display: grid; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-col:last-child { grid-column: auto; }
}
@media (max-width: 520px) {
    .footer-top { grid-template-columns: 1fr; gap: 25px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; padding: 18px 0; }
    .footer-bottom-links { flex-wrap: wrap; gap: 9px 14px; }
}

/* 2026-09-22 final wordmark sizing */
.header.church-header .logo img{width:clamp(250px,27vw,390px)!important;height:auto!important;max-height:74px!important;object-fit:contain!important;filter:drop-shadow(0 2px 1px rgba(0,0,0,.22)) drop-shadow(0 6px 12px rgba(7,27,72,.12))}
@media(max-width:900px){.header.church-header .logo img{width:clamp(220px,44vw,320px)!important;max-height:64px!important}}
@media(max-width:640px){.header.church-header .logo img{width:220px!important;max-height:58px!important}}
@media(max-width:420px){.header.church-header .logo img{width:190px!important;max-height:52px!important}}

/* homepage logo2 safety: final sizing is controlled by brand-system.css */
.header.church-header .church-brand-wrap{overflow:visible!important}


/* Homepage mobile3 safety — brand-system controls final sticky stack and logo sizing. */
@media(max-width:900px){
  .header.church-header .logo img{height:auto!important;max-height:none!important}
  .menu-bar.church-nav{top:var(--vm-public-header-h,100px)!important}
}