/* Hope Chapel Sermons -- plugin stylesheet.
   GENERATED by tools/build_css.py from hope-sermons-mockup/assets/site.css
   (the design Earl approved on 2026-09-01). Every selector is scoped under
   .hsermons so it cannot touch the rest of hope.org, and the rt-hope theme
   cannot bleed in. Edit site.css and re-run the script; do not hand-edit
   above the APPENDIX line.
   Typekit (use.typekit.net/jkt5xqi) is already loaded by the theme header --
   the --serif/--sans variables below name those same faces. */
/* Hope Chapel — Sermons page (concept mockup)
   Palette + type lifted from the live rt-hope theme:
   https://hope.org/wp-content/themes/rt-hope/css/colorscheme.css */
.hsermons {
  --green:            rgb(118, 150, 88);
  --green-low:        rgb(75, 117, 35);
  --green-alt:        rgb(176, 193, 163);
  --green-dark:       rgb(77, 98, 57);
  --green-dark-high:  rgb(113, 129, 97);
  --green-dark-alt:   rgb(97, 114, 79);
  --green-dark-low:   rgb(41, 52, 31);
  --green-dark-lower: rgb(27, 35, 21);
  --green-light-high: rgb(228, 234, 222);
  --green-light:      rgb(198, 211, 185);
  --green-light-low:  rgb(184, 200, 168);
  --gold-high:        rgb(216, 186, 101);
  --gold:             rgb(204, 164, 52);
  --gold-lower:       rgb(176, 141, 44);
  --blue:             rgb(49, 81, 92);
  --bright-border:    rgb(200, 206, 195);

  --serif: "kepler-std", "Source Serif 4", Utopia, Georgia, Times, serif;
  --sans:  "museo-sans", "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 68rem;
  --radius: 3px;
}
.hsermons, .hsermons *, .hsermons *::before, .hsermons *::after { box-sizing: border-box; }
.hsermons {
  margin: 0;
  background-color: #fff;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--green-dark);
  line-height: 1.55;
  font-size: 18px;
  -webkit-font-smoothing: subpixel-antialiased;
}

@media (min-width: 40em) {.hsermons { font-size: 19px; }
 }

@media (min-width: 64em) {.hsermons { font-size: 20px; }
 }
.hsermons img { max-width: 100%; height: auto; display: block; }
.hsermons a { color: var(--gold); text-decoration: none; }
.hsermons a:hover, .hsermons a:focus { color: var(--gold-lower); text-decoration: underline; }
.hsermons :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.hsermons h1, .hsermons h2, .hsermons h3, .hsermons h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 400; }
.hsermons h1 { font-size: 2.5rem; }
.hsermons h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--green-dark-alt);
}
.hsermons h3 { font-size: 1.45rem; line-height: 1.3; }
.hsermons .container { width: 92%; max-width: var(--maxw); margin: 0 auto; }

/* ---------- Page hero ---------- */
.hsermons .page-hero {
  background-color: var(--green-dark-lower);
  background-image: url("/wp-content/uploads/2026/09/hope-sermons-hero-blur.jpg");
  background-size: cover;
  background-position: center 38%;
  color: var(--green-light-high);
  text-shadow: 0 0 .5em rgba(0,0,0,.6);
}
.hsermons .page-hero__inner { background: rgba(27,35,21,.62); padding: 4.5rem 0 4rem; }
.hsermons .page-hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); color: #fff; margin-bottom: .2em; text-wrap: balance; }
.hsermons .page-hero p { max-width: 44rem; margin: 0 auto; font-size: 1.08rem; text-wrap: pretty; }
.hsermons .page-hero .container { text-align: center; }
.hsermons .eyebrow {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; font-weight: 700; color: var(--gold-high);
  margin: 0 0 1rem;
}

/* ---------- Sections ---------- */
.hsermons .section { padding: 3.5rem 0; }
.hsermons .section--tint { background: var(--green-light-high); }
.hsermons .section__head { margin-bottom: 2rem; }
.hsermons .section__head p { max-width: 48rem; margin: .4rem 0 0; color: var(--green-dark-alt); }
.hsermons .section__head h3 { color: var(--green-dark-low); }

/* ---------- Featured sermon ---------- */
.hsermons .featured { display: grid; gap: 2rem; }

@media (min-width: 62em) {.hsermons .featured { grid-template-columns: 1.35fr 1fr; align-items: start; }
 }
.hsermons .video-frame {
  position: relative; padding-top: 56.25%;
  background: var(--green-dark-lower);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.hsermons .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hsermons .featured__meta { font-family: var(--sans); }
.hsermons .featured__meta h3 {
  font-family: var(--serif); font-size: 2.1rem; color: var(--green-dark-low);
  margin-bottom: .25em;
}
.hsermons .series-tag {
  display: inline-block; font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: #221a03;
  padding: .38em .8em; border-radius: 100px; margin-bottom: .9rem;
}
.hsermons .dl-meta { margin: 1.2rem 0 1.6rem; font-size: .88rem; }
.hsermons .dl-meta div { display: flex; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--bright-border); }
.hsermons .dl-meta dt {
  flex: 0 0 5.6rem; text-transform: uppercase; letter-spacing: .1em;
  font-size: .68rem; font-weight: 700; color: var(--green-dark-high); padding-top: .18em;
}
.hsermons .dl-meta dd { margin: 0; color: var(--green-dark-low); }
.hsermons .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.hsermons .btn {
  display: inline-block; font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .85em 1.4em; border-radius: var(--radius);
  border: 2px solid var(--gold);
  background: var(--gold); color: #221a03;
  transition: background-color .15s ease, color .15s ease;
}
.hsermons .btn:hover, .hsermons .btn:focus { background: var(--gold-lower); border-color: var(--gold-lower); color: #fff; text-decoration: none; }
.hsermons .btn--ghost { background: transparent; color: var(--gold-lower); }
.hsermons .btn--ghost:hover, .hsermons .btn--ghost:focus { background: var(--gold); color: #221a03; border-color: var(--gold); }

/* Hero pill buttons */
.hsermons .btn--pill { border-radius: 999px; }
.hsermons .hero-actions { justify-content: center; margin-top: 1.7rem; }
.hsermons .hero-actions .btn { text-shadow: none; }
.hsermons .btn--hero-ghost { background: transparent; color: var(--gold-high); border-color: var(--gold-high); }
.hsermons .btn--hero-ghost:hover, .hsermons .btn--hero-ghost:focus { background: var(--gold); border-color: var(--gold); color: #221a03; }

/* ---------- Download-the-notes pills ---------- */
/* Big variant — sits in the .btn-row at the top of a sermon page. */
.hsermons .btn--dl { display: inline-flex; align-items: center; gap: .55em; }
.hsermons .btn--dl svg { width: .95em; height: .95em; flex: none; }

/* Small variant — sits beside a "Read the notes" text link. */
.hsermons .pdf-pill {
  display: inline-flex; align-items: center; gap: .42em;
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  padding: .46em .8em .42em;
  border: 1px solid var(--gold-high);
  border-radius: 999px;
  background: #fdfbf3;
  color: var(--gold-lower);
}
.hsermons .pdf-pill:hover, .hsermons .pdf-pill:focus {
  background: var(--gold); border-color: var(--gold); color: #221a03; text-decoration: none;
}
.hsermons .pdf-pill svg { width: .88em; height: .88em; flex: none; }

/* The series strip stacks its link + pill; the cards keep them inline. */
.hsermons .serieslist__go { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }

/* ---------- Sermon notes article ---------- */
.hsermons .notes { display: grid; gap: 2.5rem; }

@media (min-width: 62em) {.hsermons .notes { grid-template-columns: minmax(0,1fr) 17rem; align-items: start; }
 }
.hsermons .notes__body { max-width: 40rem; }
.hsermons .notes__body > p { margin: 0 0 1.15em; }
.hsermons .notes__body h3 {
  color: var(--green-dark-low);
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--green-light);
}
.hsermons .notes__body h3:first-of-type { margin-top: 1rem; }
.hsermons .lede { font-size: 1.18rem; line-height: 1.6; color: var(--green-dark-low); }
.hsermons .bigidea {
  background: var(--green-light-high);
  border-left: 5px solid var(--green);
  padding: 1.3rem 1.5rem;
  margin: 0 0 2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hsermons .bigidea p { margin: .35rem 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--green-dark-low); }

/* Scripture highlight (FI style) */
.hsermons .scripture {
  margin: 1.6em 0;
  padding: 1.1rem 1.3rem;
  background: #fdfbf3;
  border: 1px solid var(--gold-high);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hsermons .scripture p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--green-dark-low); }
.hsermons .scripture cite {
  display: block; margin-top: .6rem;
  font-family: var(--sans); font-style: normal;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.hsermons .scripture cite a { color: var(--gold-lower); }
.hsermons .scripture cite a::after { content: " ↗"; font-weight: 400; }
.hsermons .ref { white-space: nowrap; border-bottom: 1px dotted var(--gold); }

/* Timestamp link under a section heading — jumps to that moment in the recording */
.hsermons .notes__ts {
  margin: -.9rem 0 1.2rem;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.hsermons .notes__ts a { color: var(--gold-lower); text-decoration: none; }
.hsermons .notes__ts a:hover { text-decoration: underline; }

/* Small uppercase label introducing a sub-block */
.hsermons .notes__kicker {
  margin: 1.8rem 0 .5rem;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lower);
}

/* Editorial aside — the note-taker speaking, not the preacher */
.hsermons .notes__aside {
  font-style: italic;
  color: var(--green-dark-alt);
  font-size: .95rem;
}

/* Material Amy wrote but did not preach, kept separate from the account above */
.hsermons .fromnotes {
  margin: 2.4rem 0;
  padding: 1.4rem 1.6rem .6rem;
  background: #faf7ef;
  border: 1px solid var(--gold-high);
  border-radius: var(--radius);
}
.hsermons .fromnotes h3 { margin-top: .2rem; }
.hsermons .fromnotes .scripture { background: #fff; }

/* Small caps for the divine name as printed in most translations */
.hsermons .sc { font-variant: small-caps; }

/* Amy's own interpolations inside a quoted verse */
.hsermons .interp { color: var(--gold-lower); }
.hsermons .card__note {
  font-size: .78rem; font-style: italic; line-height: 1.5;
  color: var(--green-dark-alt);
}
.hsermons .pullquote {
  margin: 2rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 5px solid var(--gold-high);
  font-size: 1.3rem;
  line-height: 1.42;
  font-style: italic;
  color: var(--green-dark-low);
}

/* Sidebar */
.hsermons .sidebar { font-family: var(--sans); font-size: .85rem; }
.hsermons .card {
  background: #fff;
  border: 1px solid var(--bright-border);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.25rem;
}
.hsermons .card h4 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--green-dark-high); margin-bottom: .8rem;
}
.hsermons .card ol, .hsermons .card ul { margin: 0; padding-left: 1.1rem; }
.hsermons .card li { margin-bottom: .45rem; line-height: 1.4; }
.hsermons .card p { margin: 0 0 .7rem; line-height: 1.5; }
.hsermons .card p:last-child { margin-bottom: 0; }
.hsermons .card--gold { border-top-color: var(--gold); background: #fdfbf3; }

/* ---------- Archive grid ---------- */
.hsermons .grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.hsermons .sermon-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--bright-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.hsermons .sermon-card:hover, .hsermons .sermon-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(41,52,31,.16);
}
.hsermons .sermon-card__thumb { position: relative; background: var(--green-dark-low); }
.hsermons .sermon-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hsermons .sermon-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(27,35,21,.55), rgba(27,35,21,0) 55%);
}
.hsermons .sermon-card__play svg { width: 3rem; height: 3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.hsermons .sermon-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.hsermons .sermon-card__date {
  font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark-high);
  margin-bottom: .45rem;
}
.hsermons .sermon-card h4 { font-size: 1.08rem; line-height: 1.3; margin-bottom: .4rem; font-weight: 400; }
.hsermons .sermon-card h4 a { color: var(--green-dark-low); }
.hsermons .sermon-card h4 a:hover, .hsermons .sermon-card h4 a:focus { color: var(--gold-lower); text-decoration: none; }
.hsermons .sermon-card__speaker { font-family: var(--sans); font-size: .8rem; color: var(--green-dark-alt); margin: 0 0 .9rem; }
.hsermons .sermon-card__speaker.is-unknown { font-style: italic; opacity: .78; }
.hsermons .sermon-card__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.hsermons .archive-foot { margin-top: 2.2rem; text-align: center; }

/* ---------- Why-this-matters strip ---------- */
.hsermons .why { display: grid; gap: 1.6rem; }

@media (min-width: 48em) {.hsermons .why { grid-template-columns: repeat(3, 1fr); }
 }
.hsermons .why h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lower); margin-bottom: .5rem; }
.hsermons .why p { margin: 0; font-size: .97rem; color: var(--green-dark); }

@media (prefers-reduced-motion: reduce) {.hsermons, .hsermons * { transition: none !important; }

}

/* Key takeaways (restored from email edition) */
.hsermons .takeaways {
  background: #fdfbf3;
  border: 1px solid var(--gold-high);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem 1.2rem;
  margin: 0 0 2.2rem;
}
.hsermons .takeaways h2 { color: var(--gold-lower); margin-bottom: .9rem; }
.hsermons .takeaways ul { list-style: none; margin: 0; padding: 0; }
.hsermons .takeaways li {
  position: relative;
  padding: 0 0 .85rem 1.5rem;
  line-height: 1.6;
  color: var(--green-dark-low);
}
.hsermons .takeaways li::before {
  content: "\25C6";
  position: absolute; left: 0; top: .15rem;
  color: var(--gold);
  font-size: .8rem;
}
.hsermons .takeaways li:last-child { padding-bottom: 0; }

/* ---------- In this series ---------- */
.hsermons .serieslist { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

@media (min-width: 40em) {.hsermons .serieslist { grid-template-columns: repeat(2, 1fr); }
 }

@media (min-width: 62em) {.hsermons .serieslist { grid-template-columns: repeat(4, 1fr); }
 }
.hsermons .serieslist li {
  background: var(--green-light-high);
  border: 1px solid var(--bright-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  font-family: var(--sans);
  display: flex; flex-direction: column;
}
.hsermons .serieslist li.is-current { border-top-color: var(--green-low); background: #fff; }
.hsermons .serieslist__date {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lower); font-weight: 700; margin: 0 0 .35rem;
}
.hsermons .serieslist li.is-current .serieslist__date { color: var(--green-low); }
.hsermons .serieslist h4 { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 .3rem; font-weight: 400; }
.hsermons .serieslist h4 a { color: var(--green-dark-low); }
.hsermons .serieslist h4 a:hover, .hsermons .serieslist h4 a:focus { color: var(--gold-lower); }
.hsermons .serieslist__speaker { font-size: .82rem; color: var(--green-dark-alt); margin: 0 0 .85rem; }
.hsermons .serieslist__go { margin: auto 0 0; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Sermon archive page ---------- */
.hsermons .archive-back {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 1.6rem;
}
.hsermons .archive-tools {
  background: var(--green-light-high);
  border: 1px solid var(--bright-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.1rem;
  margin: 0 0 2.4rem;
  font-family: var(--sans);
}
.hsermons .archive-tools label {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-dark-high);
  margin: 0 0 .35rem;
}
.hsermons .archive-tools input[type="search"], .hsermons .archive-tools select {
  width: 100%;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--green-dark-low);
  background: #fff;
  border: 1px solid var(--bright-border);
  border-radius: var(--radius);
  padding: .62em .7em;
}
.hsermons .archive-tools input[type="search"] { font-size: 1rem; padding: .7em .8em; }
.hsermons .archive-tools input[type="search"]:hover, .hsermons .archive-tools select:hover { border-color: var(--green-dark-high); }
.hsermons .archive-tools__search { margin-bottom: 1.1rem; }
.hsermons .archive-tools__filters { display: grid; gap: .9rem; }

@media (min-width: 34em) {.hsermons .archive-tools__filters { grid-template-columns: repeat(2, 1fr); }
 }

@media (min-width: 58em) {.hsermons .archive-tools__filters { grid-template-columns: repeat(4, 1fr); }
 }
.hsermons .archive-tools__filters .field { margin: 0; }
.hsermons .archive-tools__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-top: 1.15rem; padding-top: .95rem;
  border-top: 1px solid var(--bright-border);
}
.hsermons .archive-count {
  margin: 0; margin-right: auto;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-dark-alt);
}
.hsermons .viewtoggle {
  display: inline-flex;
  border: 1px solid var(--bright-border);
  border-radius: 100px;
  background: #fff;
  overflow: hidden;
}
.hsermons .viewtoggle__btn {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6em 1.05em;
  border: 0; background: transparent; color: var(--green-dark-alt);
  cursor: pointer;
}
.hsermons .viewtoggle__btn:hover { color: var(--gold-lower); }
.hsermons .viewtoggle__btn.is-on { background: var(--gold); color: #221a03; }
.hsermons .archive-clear {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 0; cursor: pointer;
  color: var(--gold-lower); padding: .6em 0;
  border-bottom: 1px dotted var(--gold);
}
.hsermons .archive-clear:hover { color: var(--green-dark-low); }

/* Series blocks */
.hsermons .series-block { margin: 0 0 2.6rem; }
.hsermons .series-block__head {
  border-bottom: 3px solid var(--green-light);
  padding-bottom: .55rem; margin-bottom: .3rem;
}
.hsermons .series-block__head h3 { color: var(--green-dark-low); margin: 0 0 .15em; }
.hsermons .series-block__meta {
  margin: 0;
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-lower);
}

/* Text-only sermon rows */
.hsermons .slist { list-style: none; margin: 0; padding: 0; }
.hsermons .slist__row {
  display: grid; gap: .2rem .9rem;
  padding: 1.05rem 0 1.1rem;
  border-bottom: 1px solid var(--bright-border);
}

@media (min-width: 46em) {.hsermons .slist__row {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: baseline;
  }

}
.hsermons .slist__date {
  margin: 0;
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark-high);
  padding-top: .2rem;
}
.hsermons .slist__main { min-width: 0; }
.hsermons .slist__main h4 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .18em; font-weight: 400; }
.hsermons .slist__main h4 a { color: var(--green-dark-low); }
.hsermons .slist__main h4 a:hover, .hsermons .slist__main h4 a:focus { color: var(--gold-lower); text-decoration: none; }
.hsermons .slist__meta {
  margin: 0; font-family: var(--sans); font-size: .82rem; color: var(--green-dark-alt);
}
.hsermons .slist__meta .is-unknown { font-style: italic; opacity: .78; }
.hsermons .taglist { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; }
.hsermons .tag {
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  background: #fff; color: var(--green-dark-alt);
  border: 1px solid var(--bright-border); border-radius: 100px;
  padding: .3em .72em; cursor: pointer;
}
.hsermons .tag:hover { border-color: var(--gold); color: var(--gold-lower); background: #fdfbf3; }
.hsermons .slist__links {
  margin: .5rem 0 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
}

@media (min-width: 46em) {.hsermons .slist__links { margin: 0; justify-content: flex-end; }
 }
.hsermons .archive-empty {
  border: 1px dashed var(--bright-border);
  border-radius: var(--radius);
  padding: 2.4rem 1.5rem;
  text-align: center;
  background: #fdfbf3;
}
.hsermons .archive-empty h3 { color: var(--green-dark-low); margin-bottom: .3em; }
.hsermons .archive-empty p { margin: 0; font-family: var(--sans); font-size: .9rem; color: var(--green-dark-alt); }
.hsermons .archive-note {
  margin: 1.8rem 0 0;
  font-family: var(--sans); font-size: .76rem; line-height: 1.6;
  color: var(--green-dark-high);
  text-align: center;
}

/* Link from the main page down to the full archive */
.hsermons .archive-foot .btn + .btn { margin-left: .5rem; }


/* ============================================================================
   APPENDIX -- integration with rt-hope. Everything above this line is the
   approved mockup stylesheet, mechanically scoped by tools/build_css.py.
   Everything below exists only because the live theme's global element rules
   reach inside our markup. Each one names the rule it is answering.
   ========================================================================= */

/* style.css:56  `a { display: block; }` and `a:hover { background-color: gold }`
   would turn every inline reference in the notes into its own block and paint
   it on hover. The mockup's own .btn/.tag/.pdf-pill rules out-specify this. */
.hsermons a { display: inline; background-color: transparent; }
.hsermons a:hover, .hsermons a:focus { background-color: transparent; }

/* style.css:584  `section { overflow: hidden; }` clips the 3px hover lift and
   the shadow under .sermon-card. */
.hsermons section { overflow: visible; }

/* style.css:37  the theme sets font-weight:100 and a letter-spacing on every
   heading, and margin-bottom:1em. The mockup's headings set their own. */
.hsermons h1, .hsermons h2, .hsermons h3,
.hsermons h4, .hsermons h5 { letter-spacing: normal; }
.hsermons h4 { font-family: var(--sans); }

/* style.css:70  `img { display: block !important; height: auto; }` -- harmless,
   but the card thumbnails need the anchor itself to be a block box. */
.hsermons .sermon-card__thumb { display: block; }

/* Lists and paragraphs: the theme styles these through .content and .the-content,
   which we are outside of, but WordPress core and the browser defaults still
   differ from the mockup's. State them. */
.hsermons p { margin: 0 0 1em; }
.hsermons ul, .hsermons ol { padding-left: 1.25em; }

/* List markers. rt-hope's style.css line 16 is `@import "css/reset.css"`, and
   that file's line 112 is a bare `li { list-style: none; }`. Because
   list-style-type INHERITS, a rule on <li> -- however weak -- beats any value
   set on the <ol>, so scoping `list-style` to `.hsermons ol` was not enough:
   the numbers on "For your Hope Group" and the bullets on the scripture card
   silently disappeared. Verified against a headless render of the mockup, which
   has them. State it on the <li> itself.
   The mockup's own marker-less lists out-specify this and keep their look. */
.hsermons ol > li { list-style: decimal outside; }
.hsermons ul > li { list-style: disc outside; }
.hsermons .takeaways li,
.hsermons .slist li,
.hsermons .serieslist > li,
.hsermons .taglist li { list-style: none; }
.hsermons dl, .hsermons dd { margin: 0; }
.hsermons button, .hsermons input, .hsermons select { font-family: inherit; }
.hsermons iframe { border: 0; }

/* Header + hero share ONE continuous blurred background, as in the approved
   mockup (Earl, 2026-09-01 #38539 "the mockup had better backgrounds"). The
   theme's .top-group carries images/hero/main.jpg at background-size:100%, which
   ends at the header and left our hero on flat gray-green; the header's own
   main-blur.jpg then made two different photos stack. On our three page types
   (body.hsermons-page) the wrapper gets the mockup blur, cover, and both the
   header and the hero go transparent so only their scrims paint over it. The
   theme's header bar scrim rgba(27,35,21,.75) is the mockup's exact value. */
body.hsermons-page .top-group {
  background-color: #1b2315;
  background-image: url("/wp-content/uploads/2026/09/hope-sermons-hero-blur.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
body.hsermons-page .top-group > header { background-image: none; background-color: transparent; }
body.hsermons-page .top-group > *:last-child { border-bottom: 0; }
/* The hero's wrapper is a theme .col-row, which the theme paints solid gray-green from
   640px up -- that was the flat block on desktop while mobile looked right. */
body.hsermons-page .hs-hero-row { background-color: transparent; background-image: none; }
.hsermons .page-hero { background-image: none; background-color: transparent; }

/* The theme's .container is 84% wide at >=960px; ours is the mockup's 92% with a
   68rem ceiling and wins on specificity. Restated here so it is deliberate. */
.hsermons .container { width: 92%; max-width: var(--maxw); margin: 0 auto; }

/* Notes body: the migrated HTML carries the mockup's own classes, but the
   surrounding theme sets a serif at 125% on <body>. Pin the reading column. */
.hsermons .notes__body { font-size: 1rem; }

/* Welcome callout -- the "New to Hope?" paragraph, lifted out of the post body
   and re-rendered once here so it reads as a card rather than as a stray
   paragraph in the middle of a sermon. */
.hsermons .welcome {
  margin: 2.5rem 0 0;
  padding: 1.2rem 1.4rem;
  background: #fdfbf3;
  border: 1px solid var(--gold-high);
  border-left: 5px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.6;
}
.hsermons .welcome p { margin: 0 0 .6rem; }
.hsermons .welcome p:last-child { margin: 0; }

/* An unknown speaker in the meta card gets the same italic, faded treatment the
   mockup gives it in the cards and the archive rows (.is-unknown). */
.hsermons .dl-meta dd.is-unknown { font-style: italic; opacity: .78; }

/* "Back to all sermons" foot, used on singles that carry no notes. */
.hsermons .sermon-foot { margin-top: 2.5rem; }

/* The hub's notes teaser: big idea + takeaways + one link into the full page. */
.hsermons .teaser__go { margin: 1.6rem 0 0; }

/* The hero wrapper is a .hsermons too, so that its type and buttons resolve --
   but it must stay transparent to let the theme's .top-group photograph show
   through, where the block-level .hsermons paints white. */
.hsermons--bare { background-color: transparent; }