/* =========================
   GLOBAL VARIABLES
   ========================= */

:root{
  --bg:#000;
  --text:#e6e6e6;
  --text-soft:rgba(230,230,230,.82);
  --gold:#fbe8c2;
  --deep-gold:#d6b77d;
  --blue:#5484d2;
  --border:rgba(214,183,125,.34);
  --soft-border:rgba(214,183,125,.18);
  --panel:rgba(0,0,0,.42);
  --panel-deep:rgba(4,8,18,.88);
  --max:1380px;
  --bgScroll:0px;
}


/* =========================
   BASE
   ========================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--text);
  font-family:"Avenir Next","Helvetica Neue",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-x:hidden;
}

body{
  position:relative;
  background:#000;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-100;
  pointer-events:none;

  background-position:center top, center center;
  background-size:100% 100%, cover;
  background-repeat:no-repeat;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-99;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.10) 42%,
      rgba(0,0,0,.24) 72%,
      rgba(0,0,0,.50) 100%
    );
}

a{
  color:inherit;
}


/* =========================
   HERO
   ========================= */

.sermon-hero{
  position:relative;
  min-height:800px;
  overflow:hidden;
  isolation:isolate;
  background:none;

  padding-bottom:32px;
}

.sermon-hero::before,
.sermon-hero::after,
.hero-side-veil{
  display:none;
}

.hero-inner{
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
  padding:84px 0 0;
}

.top-mark{
  text-align:center;
  margin-bottom:48px;
}

.sfi-glyph{
  font-size:clamp(3.5rem,8vw,6.4rem);
  font-weight:100;
  letter-spacing:.16em;
  line-height:1;

  background:
    linear-gradient(
      180deg,
      #fff3d6 0%,
      #fbe8c2 45%,
      #d6b77d 100%
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 0 26px rgba(214,183,125,.34);
}

.sfi-name{
  margin-top:.52rem;
  color:var(--deep-gold);
  font-size:clamp(.7rem,1.5vw,.95rem);
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.92;
}

.hero-title-block{
  max-width:780px;
  padding-top:80px;
}

.kicker{
  margin-bottom:1.05rem;
  color:var(--deep-gold);
  font-size:1.5rem;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.sermon-title{
  margin:0;
  color:var(--gold);
  font-size:clamp(3.2rem,8vw,6.8rem);
  line-height:.92;
  font-weight:200;
  letter-spacing:.16em;
  text-transform:uppercase;

  text-shadow:
    0 0 20px rgba(214,183,125,.48),
    0 0 48px rgba(214,183,125,.20),
    0 2px 24px rgba(0,0,0,.72);
}

.sermon-date{
  margin-top:1.5rem;
  color:#fff;
  font-size:1.65rem;
  font-weight:400;
  letter-spacing:.35em;
  text-transform:uppercase;
}

.hero-divider{
  width:210px;
  height:1px;
  margin:2rem 0 2.2rem;

  background:
    linear-gradient(
      90deg,
      rgba(214,183,125,.95),
      rgba(84,132,210,.75),
      transparent
    );
}

.hero-tags{
  display:inline-block;
  padding:10px 18px;

  border:1px solid rgba(251,232,194,.18);
  border-radius:10px;

  background:rgba(0,0,0,.18);
  backdrop-filter:blur(7px);

  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;

  box-shadow:0 0 18px rgba(0,0,0,.18);
}

.hero-opening{
  max-width:760px;
  margin-top:260px;
  padding-bottom:90px;

  color:rgba(255,248,232,.94);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.08rem,1.45vw,1.32rem);
  line-height:1.95;

  text-shadow:
    0 1px 18px rgba(0,0,0,.92),
    0 0 28px rgba(0,0,0,.70);
}

.hero-opening p{
  margin:0 0 1.15rem;
}


/* =========================
   MAIN PAGE
   ========================= */

.sermon-body{
  position:relative;
  background:transparent;
  padding:0 0 90px;
}

.sermon-body::before{
  display:none;
}

.content-wrap{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}


/* =========================
   TABS
   ========================= */

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 38px;
}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;
  padding:14px 26px;

  border:1.5px solid rgba(251,232,194,.55);
  border-radius:10px;

  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);

  color:rgba(251,232,194,.88);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    background .18s ease;
}

.tab:hover{
  color:var(--gold);
  border-color:rgba(251,232,194,.90);
  background:rgba(0,0,0,.42);

  box-shadow:
    0 0 22px rgba(214,183,125,.14),
    inset 0 0 0 1px rgba(251,232,194,.03);
}

.tab.active{
  color:var(--gold);
  border-color:rgba(251,232,194,.95);

  background:
    radial-gradient(
      circle at top,
      rgba(214,183,125,.12),
      rgba(0,0,0,.42) 72%
    );

  box-shadow:
    0 0 26px rgba(214,183,125,.18),
    inset 0 0 0 1px rgba(251,232,194,.05);
}


/* =========================
   CONTENT LAYOUT
   ========================= */

.page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:42px;
  align-items:start;
}

.main-content{
  min-width:0;
}

.content-panel{
  display:none;
}

.content-panel.active{
  display:block;
}


/* =========================
   ARTICLE CARDS
   ========================= */

.article-card{
  padding:clamp(26px,4vw,52px);

  border:1px solid rgba(214,183,125,.24);
  border-radius:24px;

  background:
    radial-gradient(
      circle at top left,
      rgba(214,183,125,.05),
      transparent 48%
    ),
    rgba(0,0,0,.60);

  backdrop-filter:blur(4px);

  box-shadow:
    0 0 44px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(251,232,194,.025);
}

.article-card h1,
.article-card h2{
  margin:0 0 1.1rem;

  color:var(--gold);
  font-weight:300;
  letter-spacing:.06em;

  text-shadow:0 0 18px rgba(0,0,0,.75);
}

.article-card h1{
  font-size:clamp(1.8rem,3.2vw,2.7rem);
}

.article-card h2{
  font-size:clamp(1.7rem,3vw,2.55rem);
}

.article-card p,
.article-card li{
  color:rgba(236,236,236,.96);

  font-family:Georgia,"Times New Roman",serif;
  font-size:1.04rem;
  line-height:1.92;

  text-shadow:0 1px 10px rgba(0,0,0,.70);
}

.article-card p{
  margin:0 0 1.15rem;
}

.article-card em{
  color:rgba(251,232,194,.84);
}

.article-card section{
  margin:0 0 2.5rem;
}

.article-card ul{
  padding-left:1.2rem;
}


/* =========================
   SIDEBAR
   ========================= */

.sidebar{
  position:relative;
  overflow:hidden;

  padding:22px;

  border-left:1px solid rgba(214,183,125,.22);
  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(9,14,24,.72) 0%,
      rgba(5,7,12,.76) 30%,
      rgba(0,0,0,.78) 100%
    );

  backdrop-filter:blur(2px);

  box-shadow:
    inset 1px 0 0 rgba(251,232,194,.04),
    0 0 36px rgba(0,0,0,.25);
}

.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(214,183,125,.06),
      transparent 36%
    ),
    radial-gradient(
      circle at 95% 12%,
      rgba(84,132,210,.04),
      transparent 40%
    );
}

.sidebar > *{
  position:relative;
  z-index:1;
}


/* =========================
   AUDIO CARD
   ========================= */

.audio-card{
  margin-bottom:24px;
  padding:30px 24px 28px;

  border:1px solid rgba(251,232,194,.30);
  border-radius:24px;

  background:
    radial-gradient(
      circle at center 34%,
      rgba(214,183,125,.08),
      rgba(4,8,18,.70) 48%,
      rgba(0,0,0,.82) 100%
    );

  backdrop-filter:blur(16px);

  text-align:center;

  box-shadow:
    0 0 32px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(251,232,194,.035);
}

.audio-icon{
  display:grid;
  place-items:center;

  width:108px;
  height:108px;
  margin:0 auto 20px;

  border:1px solid rgba(251,232,194,.60);
  border-radius:50%;

  color:var(--gold);
  font-size:2.2rem;

  background:
    radial-gradient(
      circle,
      rgba(251,232,194,.16) 0 18%,
      transparent 19%
    ),
    repeating-radial-gradient(
      circle,
      rgba(251,232,194,.16) 0 1px,
      transparent 1px 14px
    ),
    rgba(0,0,0,.55);

  box-shadow:
    0 0 28px rgba(214,183,125,.25),
    inset 0 0 24px rgba(84,132,210,.10);
}

.audio-card .eyebrow{
  margin-bottom:10px;
}

.audio-title{
  margin:0;

  color:var(--gold);

  font-size:1.28rem;
  font-weight:400;
  letter-spacing:.08em;
}

.audio-text{
  max-width:250px;
  margin:12px auto 22px;

  color:rgba(230,230,230,.82);

  font-size:.86rem;
  line-height:1.55;
}


/* =========================
   BUTTONS
   ========================= */

.audio-button{
  --gold:#fbe8c2;
  --background-dark:#000;

  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:10px;
  padding:.7rem 2.1rem;

  border:1.6px solid var(--gold);
  border-radius:9px;

  background:var(--background-dark);

  color:var(--gold) !important;

  font-size:.78rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;

  overflow:hidden;
}

/* =========================
   FEATURED QUOTATIONS
   ========================= */

.sidebar-heading{
  margin:8px 0 16px;

  color:var(--deep-gold);

  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;

  text-align:center;
}

.quote-card{
  position:relative;
  overflow:hidden;

  margin:0 0 20px;
  padding:38px 28px;

  border:1px solid rgba(214,183,125,.25);
  border-radius:22px;

  background:
    radial-gradient(
      circle at top,
      rgba(214,183,125,.05),
      rgba(10,16,28,.65) 42%,
      rgba(2,4,10,.78) 100%
    );

  box-shadow:
    0 0 24px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(251,232,194,.02);
}

.quote-card::before{
  content:"“";

  position:absolute;
  top:-.19em;
  left:.08em;

  color:rgba(214,183,125,.105);

  font-family:Georgia,serif;
  font-size:7.2rem;
  line-height:1;

  pointer-events:none;
}

.quote-card::after{
  content:"”";

  position:absolute;
  right:.08em;
  bottom:-.57em;

  color:rgba(84,132,210,.12);

  font-family:Georgia,serif;
  font-size:7.2rem;
  line-height:1;

  pointer-events:none;
}

.quote-card p{
  position:relative;
  z-index:1;

  margin:0;

  color:rgba(251,232,194,.96);

  font-family:"Avenir Next","Helvetica Neue",sans-serif;
  font-size:1.22rem;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.02em;

  text-align:center;

  text-shadow:0 1px 16px rgba(0,0,0,.80);
}

.quote-line{
  width:110px;
  height:1px;
  margin:20px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(214,183,125,.9),
      rgba(84,132,210,.72),
      transparent
    );
}


/* =========================
   CALL TO ACTION
   ========================= */

.final-cta{
  margin-top:60px;
  padding:34px 26px;

  border:1px solid rgba(214,183,125,.24);
  border-radius:24px;

  background:
    radial-gradient(
      circle at top,
      rgba(214,183,125,.05),
      rgba(0,0,0,.5) 72%
    );

  backdrop-filter:blur(4px);

  text-align:center;

  box-shadow:
    0 0 32px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(251,232,194,.02);
}

.final-cta h2{
  margin:0 0 12px;

  color:var(--gold);

  font-weight:400;
  letter-spacing:.08em;
}

.final-cta p{
  max-width:720px;
  margin:0 auto 22px;

  color:rgba(230,230,230,.84);

  line-height:1.65;
}

.ctaButton{
  --gold:#fbe8c2;
  --background-dark:#000;

  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:10px;
  padding:.7rem 2.1rem;

  border:1.6px solid var(--gold);
  border-radius:9px;

  background:var(--background-dark);

  color:var(--gold) !important;

  font-size:.78rem;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;

  overflow:hidden;
}

.ctaButton canvas{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
}

.ctaButton span{
  position:relative;
  z-index:1;
}


/* =========================
   UTILITIES
   ========================= */

.eyebrow{
  color:var(--deep-gold);

  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;

  opacity:.94;
}

.hidden-note{
  color:rgba(230,230,230,.65);

  font-size:.92rem;
  line-height:1.7;
}


/* =========================
   MOBILE AUDIO
   ========================= */

#mobileAudio{
  display:none;
}

.mobile-only-tab{
  display:none;
}


/* =========================
   TABLET & MOBILE
   ========================= */

@media(max-width:1200px){

  .sidebar{
    display:none;
  }

  #mobileAudio{
    display:block;
    width:calc(100% - 8px);

    margin:24px auto 24px;
  }

  .sidebar .quote-card,
  .sidebar .sidebar-heading{
    display:none;
  }

  .mobile-only-tab{
    display:flex;
  }

  body::before{
    background-position:center top, center 40%;
    background-size:100% 100%, 120vw auto;
  }

  .sermon-hero{
    min-height:700px;
    padding-bottom:24px;
  }

  .hero-title-block{
    padding-top:48px;
  }

  .hero-opening{
    margin-top:180px;
  }

  .page-grid{
    grid-template-columns:1fr;
  }

  .sidebar{
    border-left:1px solid rgba(214,183,125,.22);
  }
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:640px){

  body::before{
    top:-8vh;
    height:140vh;

    background-position:center top, center 50%;
    background-size:100% 100%, 170vw auto;
  }

  .hero-inner,
  .content-wrap{
    width:calc(100% - 8px);
  }

  .sermon-hero{
    min-height:520px;
    padding-bottom:24px;
  }

  .hero-inner{
    padding-top:46px;
  }

  .top-mark{
    margin-bottom:28px;
  }

  .sermon-title{
    letter-spacing:.11em;
  }

  .hero-opening{
    margin-top:140px;

    font-size:1rem;
    line-height:1.85;
  }

  .tabs{
    display:grid;
    grid-template-columns:1fr;
  }

  .tab{
    width:100%;
  }

  .article-card{
    padding:24px 18px;
    border-radius:18px;
  }

  .sidebar{
    padding:14px;
    border-radius:18px;
  }

  .quote-card{
    padding:34px 20px;
  }
}


/* =========================
   TRANSCRIPT
   ========================= */

.transcript-heading{
  margin:4rem 0 2rem;
  padding-bottom:.9rem;

  border-bottom:1px solid rgba(214,183,125,.28);

  color:var(--gold);

  font-size:1.7rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.08em;

  text-transform:none;

  text-shadow:
    0 0 18px rgba(214,183,125,.14),
    0 2px 18px rgba(0,0,0,.55);
}

.transcript-heading:first-child{
  margin-top:0;
}

.speaker-name{
  display:inline-block;

  margin:0 .4rem 0 0;

  color:var(--gold);

  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;

  opacity:.95;
}


/* =========================
   CONTENT TITLES
   ========================= */

.content-title{
  margin:0 0 2.5rem;

  color:var(--gold);

  font-size:clamp(2.4rem,5vw,3.2rem);
  font-weight:300;
  line-height:1;
  letter-spacing:.08em;

  text-transform:uppercase;

  text-shadow:
    0 0 22px rgba(214,183,125,.34),
    0 0 48px rgba(214,183,125,.14),
    0 2px 24px rgba(0,0,0,.75);
}

.content-title::after{
  content:"";

  display:block;

  width:220px;
  height:1px;

  margin:1.4rem 0 0;

  background:
    linear-gradient(
      90deg,
      rgba(214,183,125,.95),
      rgba(84,132,210,.65),
      transparent
    );
}


/* =========================
   MORE SERMONS
   ========================= */

.more-sermons{

  margin-top:60px;

  padding:38px;

  border:1px solid rgba(214,183,125,.24);
  border-radius:24px;

  background:
    radial-gradient(
      circle at top left,
      rgba(214,183,125,.05),
      transparent 48%
    ),
    rgba(0,0,0,.60);

  backdrop-filter:blur(4px);

  box-shadow:
    0 0 44px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(251,232,194,.025);
}

.more-sermons h2{

  margin:0 0 24px;

  color:var(--gold);

  font-size:clamp(1.7rem,2.8vw,2.3rem);

  font-weight:300;

  letter-spacing:.06em;
}

.more-sermons ul{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(360px,1fr));

  gap:4px 40px;

  margin:0;
  padding:0;

  list-style:none;
}

.more-sermons li{
  margin:0;
}

.more-sermons a{

  display:block;

  padding:.15rem 0;

  color:rgba(230,230,230,.88);

  font-size:.95rem;

  text-decoration:none;

  transition:.15s;
}

.more-sermons a:hover{
  color:var(--gold);
}

.library-link{

  display:inline-block;

  margin-top:24px;

  color:var(--gold) !important;

  font-size:.95rem;
}