:root {
  color-scheme: light;
  --bg: #fff;
  --ink: #183749;
  --teal: #01505a;
  --line: #102530;
  --header: rgba(255,255,255,.95);
  --row: #fff;
  --row-alt: #f2f2f2;
  --row-hover: #e7eef0;
  --hair: #e6e6e6;
  --on: #102530;
  --on-ink: #fff;
  --field: #fff;
  --player: #102530;
  --focus: #01505a;
  --fill: #102530;
  --fill-ink: #fff;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1c26;
  --ink: #e8eef0;
  --teal: #9fd4d8;
  --line: #d5e2e6;
  --header: rgba(14,28,38,.96);
  --row: #132833;
  --row-alt: #18323e;
  --row-hover: #1e3c4a;
  --hair: #2c4654;
  --on: #01505a;
  --on-ink: #fff;
  --field: #0e1c26;
  --player: #01505a;
  --focus: #9fd4d8;
  --fill: #01505a;
  --fill-ink: #fff;
}
*{box-sizing:border-box;}
html,body{height:100%;}
#latest,#pastor,#sunday,#follow{scroll-margin-top:80px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Roboto",sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.35;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
h1,h2,h3,h4{font-weight:700;line-height:1.3;font-family:"Roboto",sans-serif;margin:0 0 .4em;}
h1{font-size:250%;text-transform:uppercase;}
h2{font-size:200%;}
h3{font-size:150%;}
h4{font-size:125%;margin:0;}
p{margin:0 0 1.25em;}
a{color:var(--teal);}
.skip{position:absolute;left:12px;top:-40px;background:var(--bg);color:var(--ink);padding:8px 12px;z-index:80;}
.skip:focus{top:12px;}

header{
  position:fixed;top:0;left:0;width:100%;z-index:40;
  padding:.65em 1em;background:var(--header);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:8px;min-width:0;}
#headerLogo{display:flex;align-items:center;min-height:44px;}
#headerLogo img{height:35px;width:auto;}
#headerLogo .logo-night{display:none;}
html[data-theme="dark"] #headerLogo .logo-day{display:none;}
html[data-theme="dark"] #headerLogo .logo-night{display:block;}
#theme-btn{
  width:36px;height:36px;min-height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:0;background:transparent;color:var(--teal);cursor:pointer;
}
#theme-btn svg{width:20px;height:20px;display:block;}
#theme-btn .icon-sun{display:none;}
html[data-theme="dark"] #theme-btn{color:#e8eef0;}
html[data-theme="dark"] #theme-btn .icon-moon{display:none;}
html[data-theme="dark"] #theme-btn .icon-sun{display:block;}
#theme-btn:hover{color:var(--ink);}
.header-tools{display:flex;align-items:center;gap:4px;}
#nav ul{list-style:none;margin:0;padding:0;}
#nav li{display:inline-block;}
#nav a{
  display:inline-flex;align-items:center;min-height:44px;
  margin:0 .2em;padding:0 .45em;
  color:var(--teal);text-decoration:none;font-weight:400;
}
#nav a:hover,#nav a[aria-current="page"]{text-decoration:underline;}
#nav a[aria-current="page"]{font-weight:700;}

.falls{
  min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:url("../img/bg2018B.jpg") center center / cover no-repeat;
  padding:108px 20px 88px;position:relative;
}
.falls h1,.falls p{color:#fff;}
.falls .mark{height:60px;width:auto;margin-bottom:18px;}
.falls .sub{font-size:125%;font-weight:700;margin-bottom:.35em;}
.falls .when{font-size:18px;}
.falls-actions,.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.25em;}
.arrow{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;
}
.arrow img{width:48px;height:24px;}

.falls-short{min-height:0;padding:132px 20px 56px;}
.falls-short .arrow{display:none;}
a.btn,.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  padding:.5em 1em;
  color:var(--ink);
  font-family:"Roboto",sans-serif;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  line-height:1em;
  background:none;
  border:1px solid var(--line);
  border-radius:0;
  text-decoration:none;
  cursor:pointer;
}
a.btn:hover,.chip:hover,.chip[aria-pressed="true"]{
  background:var(--fill);color:var(--fill-ink);border-color:var(--fill);
}
.falls a.btn{color:#fff;border-color:#fff;}
.falls a.btn:hover{background:#fff;color:#102530;border-color:#fff;}

.pad{padding:2em;}
.center{text-align:center;}
.row{display:flex;flex-wrap:wrap;}
.span50{width:50%;}
.span33{width:33.33%;}
.span100{width:100%;}

.program{display:flex;flex-wrap:wrap;align-items:center;}
.program .copy,.program .logo{width:50%;padding:1em 2em;}
.program .logo{text-align:center;}
.program .logo img{width:min(100%,320px);}
.now-kicker{letter-spacing:.08em;text-transform:uppercase;font-size:13px;font-weight:700;color:var(--teal);}
.now audio,.program audio{width:min(100%,440px);margin:.5em 0 1em;}

.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:1.5em 0 .75em;}
.search{
  flex:1 1 220px;max-width:360px;min-height:44px;
  border:1px solid var(--line);border-radius:0;padding:.55em .75em;
  font:inherit;color:var(--ink);background:var(--field);
}
.filters{display:flex;flex-wrap:wrap;gap:8px;}
.count{color:var(--ink);margin:0 0 .75em;}
.list{display:flex;flex-direction:column;}
.ep{
  width:100%;text-align:left;cursor:pointer;background:var(--row);color:var(--ink);
  display:grid;grid-template-columns:130px minmax(0,1fr) auto auto;
  grid-template-areas:"date title book time";
  gap:6px 16px;align-items:center;
  border:0;border-bottom:1px solid var(--hair);
  padding:1em 1.1em;font:inherit;min-height:44px;
}
.ep:nth-child(even){background:var(--row-alt);}
.ep:hover{background:var(--row-hover);}
.ep.is-on{background:var(--on);color:var(--on-ink);}
.ep-date{grid-area:date;font-size:14px;}
.ep-title{grid-area:title;font-weight:700;font-size:18px;}
.ep-book{grid-area:book;font-size:14px;}
.ep-time{grid-area:time;font-variant-numeric:tabular-nums;font-size:14px;}
.ep.is-on .ep-date,.ep.is-on .ep-book,.ep.is-on .ep-time{color:var(--on-ink);}
.empty{padding:1em 0;}
.archive-note{margin-top:1.25em;font-size:14px;}

.pastor-top{display:flex;gap:28px;align-items:center;margin-bottom:1em;}
.pastor-top img{width:160px;height:160px;object-fit:cover;object-position:center 22%;}
.role{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0;}
.roles{list-style:none;margin:0;padding:0;}
.roles li{padding:1em 0;border-bottom:1px solid var(--hair);}
.roles em{display:block;font-style:normal;color:var(--teal);margin:.15em 0 .35em;}
.stats{display:flex;flex-wrap:wrap;margin:1em 0 1.5em;}
.stat{width:33.33%;padding:.5em 1em .5em 0;}
.stat b{display:block;font-size:200%;font-weight:700;line-height:1;}

.blur{
  background:url("../img/bg2018B_home.jpg") center bottom / cover no-repeat fixed;
  color:var(--ink);
}
html[data-theme="dark"] .blur{
  background:#01505a;
  color:#fff;
}
html[data-theme="dark"] .blur h2,
html[data-theme="dark"] .blur .time{color:#fff;}
html[data-theme="dark"] .blur a.btn{color:#fff;border-color:#fff;}
html[data-theme="dark"] .blur a.btn:hover{background:#fff;color:#102530;border-color:#fff;}
.times{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:0 0 1em;}
.time{min-width:160px;}
.time b{display:block;font-size:150%;}

.cards{display:flex;flex-wrap:wrap;}
.card{
  width:33.33%;padding:0 12px 18px;text-decoration:none;color:var(--ink);
}
.card div{
  border:1px solid var(--line);padding:1.1em 1em 1em;min-height:150px;
  display:flex;flex-direction:column;gap:8px;
}
.card:hover div{background:var(--fill);color:var(--fill-ink);border-color:var(--fill);}
.card b{font-size:125%;}
.card span{font-weight:300;}
.card i{margin-top:auto;font-style:normal;font-weight:700;font-size:14px;text-transform:uppercase;}

footer{
  background:url("../img/bg2018B_footer.jpg") center center / cover no-repeat;
  color:#fff;text-align:center;padding:2.5em 1.5em 2.5em;
}
footer a{color:#fff;}
footer img{height:48px;width:auto;margin-bottom:.5em;}
footer ul{list-style:none;margin:.8em 0 1.2em;padding:0;}
footer li{display:inline-block;}
footer li a{
  display:inline-flex;align-items:center;min-height:44px;
  margin:0 .35em;text-decoration:none;color:#fff;
}
footer li a:hover{text-decoration:underline;}
.fine{font-size:10px;}

.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--player);color:#fff;padding:12px 18px;
  color-scheme:dark;
}
.player[hidden]{display:none !important;}
.player-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0;}
.player-title{font-weight:700;font-size:18px;margin:0;}
.player-sub{margin:0;font-size:13px;color:#fff;}
.player audio{width:min(46vw,460px);}
body.playing{padding-bottom:84px;}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

@media (max-width:800px){
  #latest,#pastor,#sunday,#follow{scroll-margin-top:120px;}
  header{flex-wrap:wrap;justify-content:center;padding:.5em .75em .35em;}
  .brand{width:100%;justify-content:center;}
  .header-tools{width:100%;justify-content:center;flex-wrap:wrap;}
  .falls-short{padding-top:148px;}
  #nav{text-align:center;}
  .span50,.span33,.program .copy,.program .logo,.stat,.card{width:100%;}
  .program .copy,.program .logo{padding:0 1.25em 1em;}
  .ep{
    grid-template-columns:1fr auto;
    grid-template-areas:"title time" "date book";
  }
  .falls{padding-top:148px;}
  .falls .mark{height:50px;}
  .blur{background-attachment:scroll;}
  .player{flex-direction:column;align-items:stretch;}
  .player audio{width:100%;}
  body.playing{padding-bottom:168px;}
  .pastor-top{flex-direction:column;align-items:flex-start;}
  h1{font-size:220%;}
  h2{font-size:170%;}
}
@media (max-width:380px){
  #nav a{margin:0;padding:0 .3em;}
  h1{font-size:190%;}
}