*{box-sizing:border-box}
:root{
  --black:#111111;
  --charcoal:#1b1b1b;
  --red:#a6271e;
  --gold:#d5a94f;
  --cream:#eee8da;
  --ink:#17130d;
  --white:#f7f5ef;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:var(--black)}
#slideshow{position:relative;width:100%;height:100%}
.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:8vw;text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity 1.35s ease;
}
.slide.active{opacity:1;visibility:visible}
.content{width:min(1050px,92vw);margin:auto}
.dark{background:var(--charcoal);color:var(--white)}
.red{background:var(--red);color:#fff}
.gold{background:var(--gold);color:var(--ink)}
.cream{background:var(--cream);color:var(--ink)}
h1,h2,p{margin:0}
h1{
  font-size:clamp(62px,11vw,165px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:900;
}
.cover h1 span{color:var(--red)}
.red .cover h1 span{color:var(--gold)}
h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(38px,6vw,88px);
  line-height:1.08;
  letter-spacing:-.025em;
}
h2 em{color:var(--red)}
.red h2 em{color:var(--gold)}
p{
  font-size:clamp(27px,4.1vw,62px);
  line-height:1.26;
  margin:.18em 0;
  font-weight:400;
}
.lead{
  font-size:clamp(25px,3vw,46px);
  margin-bottom:.65em;
  opacity:.72;
}
.kicker{
  display:inline-block;
  font-size:clamp(14px,1.4vw,22px);
  font-weight:800;
  letter-spacing:.42em;
  border:2px solid var(--red);
  color:var(--red);
  padding:.55em .7em .48em .95em;
  margin-bottom:1.3em;
}
.red .kicker{border-color:var(--gold);color:var(--gold)}
.tagline{
  margin-top:1.35em;
  font-size:clamp(15px,1.8vw,25px);
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.7;
}
.number{
  font-size:clamp(46px,7vw,105px);
  font-weight:900;
  letter-spacing:-.06em;
  opacity:.22;
  margin-bottom:.15em;
}
.quote p{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(27px,4.3vw,64px);
}
.quote .reference{
  margin-top:1.15em;
  font-family:Arial,Helvetica,sans-serif;
  font-style:normal;
  font-weight:700;
  font-size:clamp(13px,1.7vw,23px);
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.7;
}
.prayer p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(23px,3.5vw,48px)}
.controls{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10;opacity:0;transition:opacity .2s ease;
}
body:hover .controls,.controls:focus-within{opacity:.45}
.controls:hover{opacity:1}
.controls button{
  width:38px;height:34px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.52);color:#fff;font-size:20px;cursor:pointer;
}
@media(max-width:600px){
  .slide{padding:10vw 7vw}
  h1{letter-spacing:-.055em}
}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}