:root{
  --ink:#202124;
  --muted:#6b7280;
  --accent:#7c5c2f;
  --accent-soft:#f7efe3;
  --sage:#eef3ef;
  --paper:#ffffff;
  --line:rgba(32,33,36,.12);
  --scripture:#fbfaf7;
}

ul li:before {
    content: '' !important; 
}

section{
  position:relative;
  margin:0 0 30px;
}
.section-inner{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(17,24,39,.07);
}
.text-frame{
  position:relative;
  padding:25px;
  background:#fff;
}
.section-photo{
  position:relative;
  z-index:2;
  width:48%;
  height:clamp(220px,28vw,340px);
  margin:0 0 1.5rem;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f5f5f5;
}
/* alternating layout */
.content-section:nth-of-type(odd) .section-photo{
  float:left;
  margin-right:24px;
}
.content-section:nth-of-type(even) .section-photo{
  float:right;
  margin-left:24px;
}
.hero-section .section-photo{
  width:100%;
  float:none;
  margin:0 0 2rem;
  height:clamp(260px,38vw,430px);
}
/* clear floats */
.text-frame::after{
  content:"";
  display:block;
  clear:both;
}
.section-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(.98);
}
.section-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.12));
  pointer-events:none;
}
.hero-section .section-photo{
  height:clamp(260px,38vw,430px);
}

.sermon-title{
  position:relative;
  z-index:2;
  max-width:780px;
  margin:0 0 1.2rem;
  padding:0 0 1.1rem;
  color:#1f2937;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  box-shadow:none;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.08;
  letter-spacing:-.035em;
  white-space:pre-wrap;
}
.doc-p,.doc-list li{
  position:relative;
  z-index:2;
  margin:0 0 1rem;
  font-size:clamp(1.04rem,1.45vw,1.19rem);
  white-space:pre-wrap;
}
.doc-p.empty{
  min-height:.85rem;
  margin-bottom:.25rem;
}
.section-heading{
  margin-top:.1rem;
  margin-bottom:1.25rem;
  color:#1f2937;
  font-size:clamp(1.38rem,2.3vw,2rem);
  line-height:1.2;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.scripture{
  margin:1.15rem 0;
  padding:1rem 1.15rem;
  border-left:4px solid var(--accent);
  border-radius:0 14px 14px 0;
  background:var(--scripture);
  box-shadow:none;
}
.reference{
  color:var(--muted);
  font-style:italic;
  margin-top:-.35rem;
}
.indented{
  margin-left:clamp(.75rem,3vw,2.2rem);
  padding-left:1rem;
  border-left:2px solid rgba(124,92,47,.22);
}
.doc-list{
  position:relative;
  z-index:2;
  margin:2.5rem auto 3rem;
  padding:0;
  list-style:none;
  max-width:420px;
}
/* narrow path line */
.doc-list:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(var(--accent),rgba(124,92,47,.15));
}
.doc-list li{
  position:relative;
  width:70%;
  margin:0 0 1.6rem;
  padding:.65rem 1rem;
  background:#fff;
  border:1px solid rgba(124,92,47,.18);
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
  padding: 12px !important;
  color: #a56400;
  font-weight: 700;
}
/* alternating sides */
.doc-list li:nth-child(odd){
  margin-left:auto;
  text-align:left;
}
.doc-list li:nth-child(even){
  margin-right:auto;
  text-align:left;
}
.doc-list li:nth-child(odd):before{
  left:-26px;
}
.doc-list li:nth-child(even):before{
  right:-26px;
}
/* subtle narrowing effect */
.doc-list li:nth-child(1){width:78%}
.doc-list li:nth-child(2){width:74%}
.doc-list li:nth-child(3){width:70%}
.doc-list li:nth-child(4){width:66%}
.doc-list li:nth-child(5){width:62%}
.doc-list li:nth-child(6){width:58%}
.doc-list li:nth-child(7){width:54%}
.doc-list li:nth-child(8){width:50%}
/* hover */
.doc-list li:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.doc-list li:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.doc-list li{
  margin:0 0 .28rem;
  padding-left:.2rem;
}
strong{font-weight:700}
em{font-style:italic}
u{text-decoration:underline;text-underline-offset:.16em}
.small-caps{font-variant:small-caps;letter-spacing:.02em}
.all-caps{text-transform:uppercase}
a{color:#68491f;text-decoration:underline;text-decoration-color:rgba(104,73,31,.35);text-underline-offset:.16em}
.float{
  position:absolute;
  display:block;
  pointer-events:none;
  z-index:1;
  opacity:.075;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.float-cross{
  width:120px;height:120px;right:28px;top:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M57 17h7v86h-7zM33 44h55v7H33z' fill='%237c5c2f'/%3E%3Ccircle cx='60' cy='60' r='46' fill='none' stroke='%237c5c2f' stroke-width='2' opacity='.45'/%3E%3C/svg%3E");
}
.float-dove{
  width:150px;height:150px;left:22px;bottom:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M18 80c28-33 61-45 98-28-15-24-4-41 17-49 3 31 28 45 59 51-32 11-58 11-79 1-24 29-57 41-95 25Z' fill='%237c5c2f'/%3E%3Cpath d='M89 55c-24 19-47 38-70 66' stroke='%237c5c2f' stroke-width='5' fill='none' opacity='.55'/%3E%3C/svg%3E");
}
.float-window{
  width:105px;height:135px;right:22px;bottom:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cpath d='M60 11C35 27 23 51 23 82v52h74V82C97 51 85 27 60 11Z' fill='none' stroke='%237c5c2f' stroke-width='4'/%3E%3Cpath d='M60 21v112M33 86h54M42 54h36' stroke='%237c5c2f' stroke-width='3' opacity='.75'/%3E%3C/svg%3E");
}
.float-star{
  width:82px;height:82px;left:36px;top:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 13 68 43h31L73 61l10 35-23-21-23 21 10-35-26-18h31z' fill='%237c5c2f'/%3E%3C/svg%3E");
}
.float-olive{
  width:130px;height:130px;left:auto;right:46px;top:46%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cpath d='M34 111C53 72 75 42 109 20' fill='none' stroke='%237c5c2f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 84c-17-3-26 7-31 21 16 4 27-3 31-21Zm18-25c-17-3-27 6-33 20 17 5 28-2 33-20Zm21-23c-16-5-27 2-35 15 16 7 28 1 35-15Zm3 37c16-8 20-21 13-36-15 8-20 21-13 36Zm-24 25c16-8 21-20 15-36-16 7-21 20-15 36Z' fill='%237c5c2f'/%3E%3C/svg%3E");
}
.content-section:nth-of-type(2n) .float-cross{right:auto;left:28px;top:28px}
.content-section:nth-of-type(2n) .float-dove{left:auto;right:24px;bottom:20px}
.content-section:nth-of-type(3n) .float-star{left:auto;right:46px;top:38%}
.content-section:nth-of-type(4n) .float-window{right:auto;left:24px;bottom:30px}
@media(max-width:720px){
  main{width:min(100% - 20px,960px);padding:18px 0 36px}
  .section-inner{border-radius:18px}
  .text-frame{padding:26px 22px}
  .float{opacity:.045;transform:scale(.72)}
  .float-dove,.float-window,.float-olive{display:none}
}