/* /listen is the visual anchor: a framed photograph, clear type, and one
   invitation. Keep every published image and word; retire poster geometry. */
body :is(.cp-site, .lr-member-listening) :is(.gh-hero, .mn-room-intro) {
  --listen-hero-layout: framed;
  --listen-hero-focus: 70% 35%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 76px;
  width: 100%;
  max-width: 1220px;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 38px auto 58px;
  padding: 0 40px !important;
  overflow: visible;
  border: 0;
  background: #080b0c;
  color: #f5f3ee;
}
body :is(.cp-site, .lr-member-listening) .gh-hero {
  grid-template-rows: 1fr auto auto auto auto 1fr;
  align-items: start;
}
body :is(.cp-site, .lr-member-listening) .gh-hero::before,
body :is(.cp-site, .lr-member-listening) .gh-hero::after,
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-rule,
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-kicker::before { display: none; }
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-art {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: #101719;
  box-shadow: 0 0 80px -30px #a72e5455;
  outline: 1px solid #d8edf013;
  outline-offset: -1px;
  -webkit-mask: none !important;
  mask: none !important;
}
/* Both hero implementations write pixel sizes and masks for the old poster.
   The base image is now the sole visual layer inside a responsive frame. */
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-art > .gh-base {
  position: absolute;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: var(--listen-hero-focus) !important;
  transform: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-subject { display: none !important; }
body :is(.cp-site, .lr-member-listening) .gh-hero[data-hero-art="homepage"] { --listen-hero-focus: 50% 25%; }
body :is(.cp-site, .lr-member-listening) .gh-hero[data-hero-art="cover-515c57b465c7"] { --listen-hero-focus: 64% 25%; }
body :is(.cp-site, .lr-member-listening) .gh-hero[data-hero-art="jesus-reborn-wide"] { --listen-hero-focus: 74% 30%; }
body :is(.cp-site, .lr-member-listening) .gh-hero > :is(.gh-title, .gh-kicker, .gh-summary, .gh-down, .gh-interaction) {
  position: relative;
  inset: auto;
  grid-column: 2;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 0;
  text-shadow: none;
}
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-kicker { grid-row: 2; margin: 0 0 16px; }
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-title { grid-row: 3; }
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-summary { grid-row: 4; margin: 20px 0 0; }
body :is(.cp-site, .lr-member-listening) .gh-hero > :is(.gh-down, .gh-interaction) { grid-row: 5; margin: 24px 0 0; }
body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title, .mn-room-intro h1) {
  font: 400 clamp(52px, 5.8vw, 84px)/1.035 Anton, 'Arial Narrow', sans-serif;
  letter-spacing: -.018em;
  text-transform: uppercase;
  color: #f5f3ee;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  pointer-events: auto;
}
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-title > :is(.gh-title-back, .gh-title-front) {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  font: inherit !important;
  line-height: inherit;
  white-space: normal !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-title .gh-title-back { color: #f5f3ee !important; }
body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title .gh-title-front, .mn-room-intro h1 span) { color: #85d8e8 !important; }
body :is(.cp-site, .lr-member-listening) .gh-hero .gh-title .gh-title-version { margin-top: 14px; font: 400 11px/1.6 Arial, sans-serif; color: #afb9bd; letter-spacing: .1em; }
body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-kicker, .mn-room-eyebrow) {
  font: 400 10px/1.65 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #85d8e8;
}
body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-summary, .mn-room-description) {
  max-width: 50ch;
  font: 400 16px/1.75 Arial, sans-serif;
  color: #afb9bd;
}
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-down {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 12px;
  width: auto;
  min-height: 52px;
  padding: 13px 22px;
  border: 1px solid #d45c6b55;
  border-radius: 100px;
  background: linear-gradient(115deg,#c83956,#9d2948);
  box-shadow: inset 0 1px #ffbec035,0 10px 34px -15px #e74b73;
  font: 400 14px/1.5 Arial, sans-serif;
  letter-spacing: 0;
  color: #f5f3ee;
  text-transform: none;
}
body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-interaction { max-width: 100%; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro { align-items: center; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro > .mn-room-intro-art { grid-column: 1; grid-row: 1; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro > .mn-room-intro-copy { grid-column: 2; grid-row: 1; min-width: 0; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-eyebrow { margin: 0 0 16px; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-description { margin: 20px 0 0; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art {
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 18px;
  box-shadow: 0 0 80px -30px #a72e5455;
  outline: 1px solid #d8edf013;
  outline-offset: -1px;
}
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art img { height: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--listen-hero-focus); }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art figcaption { max-width: calc(100% - 36px); left: 18px; right: 18px; bottom: 18px; font-size: 9px; letter-spacing: .1em; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-actions { margin-top: 24px; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-action {
  border-radius: 100px;
  min-height: 55px;
  padding: 13px 22px;
  background: linear-gradient(115deg, #c83956, #9d2948);
  border-color: #d45c6b66;
  box-shadow: inset 0 1px #ffbec035, 0 10px 34px -15px #e74b73;
  font: 500 15px/1.5 Arial, sans-serif;
}
/* No-art introductions and compact chapter headings remain a single readable
   column. A long title expands the page instead of crossing artwork or controls. */
body :is(.cp-site, .lr-member-listening) :is(.gh-hero--typographic, .gh-hero:not(:has(.gh-art)), .mn-room-intro:not(.mn-room-intro--art)) { grid-template-columns: minmax(0, 1fr); }
body :is(.cp-site, .lr-member-listening) :is(.gh-hero--typographic, .gh-hero:not(:has(.gh-art))) > :is(.gh-title, .gh-kicker, .gh-summary, .gh-down, .gh-interaction) { grid-column: 1; max-width: 920px; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro:not(.mn-room-intro--art) > .mn-room-intro-copy { grid-column: 1; max-width: 920px; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro--compact { margin-top: 28px; margin-bottom: 28px; }
body :is(.cp-site, .lr-member-listening) .mn-room-intro--compact h1 { font-size: clamp(40px, 4.8vw, 66px); }
/* Passage headings follow the same centered column as the reading controls. */
body .cp-site .mn-bible-passage .mn-room-intro--compact { max-width:960px; }
body .cp-site .mn-bible-passage .mn-room-intro--compact h1 { font-size:clamp(40px,4.8vw,66px); }

/* Journal/catalog containers already supply the page gutter. Let their hero
   use the same outer frame as standalone ministry pages, without doubling it. */
@media (min-width:701px) {
  body :is(.cp-site, .lr-member-listening) .ex-content > .gh-hero { width: calc(100% + 80px); max-width: 1220px; margin-left: max(-40px,calc((100% - 1220px)/2)); }
}

@media (min-width: 701px) and (max-width: 1000px) {
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero, .mn-room-intro) { column-gap: 38px; padding-inline: 28px !important; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title, .mn-room-intro h1) { font-size: clamp(44px, 6vw, 62px); }
}
@media (max-width: 700px) {
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero, .mn-room-intro) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    max-width: 540px;
    column-gap: 0;
    margin: 0 auto 38px;
    padding: 0 24px !important;
    min-height: 0;
    height: auto;
  }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-art,
  body :is(.cp-site, .lr-member-listening) .mn-room-intro > .mn-room-intro-art {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    position: relative;
    width: calc(100% + 16px);
    margin: 0 -8px 23px;
    height: clamp(280px, 43svh, 370px);
    aspect-ratio: auto;
    border-radius: 20px 20px 8px 8px;
  }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-art::after {
    content: '';
    position: absolute;
    inset: 55% 0 -1px;
    z-index: 1;
    background: linear-gradient(transparent, #080b0c 98%);
    pointer-events: none;
  }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art img { height: 100%; aspect-ratio: auto; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art figcaption { top: 16px; bottom: auto; z-index: 2; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-intro-art::after { content: ''; position: absolute; inset: 55% 0 -1px; background: linear-gradient(transparent,#080b0c 98%); pointer-events: none; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-art { margin-bottom: -55px; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > :is(.gh-title, .gh-kicker, .gh-summary, .gh-down, .gh-interaction) { grid-column: 1; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-kicker { grid-row: 2; margin-bottom: 12px; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-title { grid-row: 3; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > .gh-summary { grid-row: 4; margin-top: 17px; }
  body :is(.cp-site, .lr-member-listening) .gh-hero > :is(.gh-down, .gh-interaction) { grid-row: 5; margin-top: 19px; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro > .mn-room-intro-copy { grid-column: 1; grid-row: 2; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro--art > .mn-room-intro-copy { position: relative; z-index: 1; margin-top: -90px; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title, .mn-room-intro h1) { font-size: clamp(40px, 12vw, 58px); line-height: 1.035; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-kicker, .mn-room-eyebrow) { font-size: 9px; letter-spacing: .14em; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-eyebrow { margin-bottom: 12px; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-summary, .mn-room-description) { max-width: 50ch; font-size: 15px; line-height: 1.7; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-description { margin-top: 17px; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-actions { margin-top: 22px; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro .mn-room-action { width: 100%; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero--typographic, .gh-hero:not(:has(.gh-art)), .mn-room-intro:not(.mn-room-intro--art)) { padding-top: 25px !important; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro--compact { margin-bottom: 25px; }
  body :is(.cp-site, .lr-member-listening) .mn-room-intro--compact h1 { font-size: clamp(36px, 10.5vw, 45px); }
  body :is(.cp-site, .lr-member-listening) .ex-content > .gh-hero { width: calc(100% + 48px); max-width: none; margin-left: -24px; }
}
@media (max-width: 360px) {
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero, .mn-room-intro) { padding-inline: 20px !important; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title, .mn-room-intro h1) { font-size: 39px; }
  body :is(.cp-site, .lr-member-listening) .ex-content > .gh-hero { width: calc(100% + 40px); margin-left: -20px; }
}
@media print {
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero, .mn-room-intro) { display: block; max-width: none; margin: 0 0 24px; padding: 0 !important; color: #111; background: #fff; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-art, .mn-room-intro-art, .gh-down) { display: none; }
  body :is(.cp-site, .lr-member-listening) :is(.gh-hero .gh-title, .mn-room-intro h1, .gh-hero .gh-kicker, .mn-room-eyebrow, .gh-hero .gh-summary, .mn-room-description) { color: #111; }
  body :is(.cp-site, .lr-member-listening) .gh-hero .gh-title :is(.gh-title-back, .gh-title-front), body :is(.cp-site, .lr-member-listening) .mn-room-intro h1 span { color: #111 !important; }
}