/* ============================================================================
   The home page: the hero, the welcome card, The RUS and the next-step rail.
   ============================================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;height:820px;overflow:hidden;background:var(--clay);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5);
}
.hero__photo{
  position:absolute;top:-9%;left:0;width:100%;height:118%;
  object-fit:cover;will-change:transform;
}
/* The wash over the photograph. It is dark at the top so the white menu reads,
   almost clear through the middle so the picture does, and dark again at the
   bottom for the headline. */
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,26,18,.62) 0%,rgba(42,26,18,.14) 40%,rgba(42,26,18,.86) 100%);
}

/* The sermon-series card, top right. */
.series{
  position:absolute;z-index:3;right:var(--gutter-wide);top:130px;width:320px;
  padding:22px;background:rgba(21,15,15,.84);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.series__kicker{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark)}
.series__art{width:100%;aspect-ratio:1;object-fit:cover;margin-top:14px}
.series__title{margin-top:16px;font-family:var(--display);font-size:27px;line-height:1.04;text-transform:uppercase}

.series__countdown{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.series__units{display:flex;gap:8px}
.series__unit{flex:1;padding:10px 0;background:rgba(255,255,255,.1);text-align:center}
.series__num{font-family:var(--display);font-size:26px;color:#fff}
.series__unit-label{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:3px}
.series__past{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding:13px 16px;border:1px solid rgba(255,255,255,.4);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.series__past:hover{background:#fff;color:var(--maroon)}
.series__past-arrow{font-size:16px}

/* Shown only while the service is actually on: js/main.js swaps the two. */
.series__live{display:flex;align-items:center;gap:12px;margin-top:18px;padding:15px 16px;background:var(--maroon);color:#fff}
.series__live:hover{background:#fff;color:var(--maroon)}
.series__dot{width:9px;height:9px;border-radius:50%;background:#fff;flex:none}
.series__live-copy{display:flex;flex-direction:column;line-height:1.2}
.series__live-kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.series__live-title{margin-top:4px;font-family:var(--display);font-size:19px;text-transform:uppercase}

/* The headline and the times across the foot of the hero. */
.hero__foot{
  animation:fbcUp 1.05s var(--ease) .18s both;
  position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 var(--gutter-wide) 34px;
}
.hero__title{
  animation:fbcMask 1.15s var(--ease) .3s both;
  font-family:var(--display);font-size:104px;font-weight:400;line-height:.86;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;max-width:16ch;
}
.hero__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line-light);
}
.hero__times{display:flex;gap:34px;color:#fff}
.hero__time + .hero__time{padding-left:34px;border-left:1px solid rgba(255,255,255,.28)}
.hero__time-label{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.hero__time-value{font-family:var(--display);font-size:28px;margin-top:5px}
.hero__cta{flex:none}

/* ---------- Welcome ---------- */
.welcome{background:var(--bark)}
/* font-size:0 on the frame kills the line box under the photograph, which
   would otherwise show as a few pixels of the dark ground below it. */
.welcome__frame{position:relative;font-size:0;line-height:0}
.welcome__photo-box{height:640px;overflow:hidden}
.welcome__photo{width:100%;height:122%;margin-top:-11%;object-fit:cover;will-change:transform}
.welcome__card{
  position:absolute;right:64px;bottom:0;width:600px;padding:52px 48px 48px;
  background:var(--cream);font-size:16px;line-height:normal;border-top:5px solid var(--tan);
}
.welcome__title{
  margin-top:20px;font-family:var(--serif);font-size:48px;font-weight:700;
  line-height:1.08;color:var(--ink);text-wrap:pretty;
}
.welcome__text{margin-top:20px;font-size:17px;line-height:1.68;color:var(--body);text-wrap:pretty}
.welcome__actions{display:flex;gap:12px;margin-top:30px}

/* ---------- The RUS ---------- */
.rus{padding:96px var(--gutter);background:var(--bark);color:#fff}
.rus__head{display:flex;align-items:flex-end;justify-content:space-between;gap:56px;margin-bottom:46px}
/* The lockup reads "The R US", with the logo's own R standing in for the
   letter, so the three parts are set separately and lined up on their feet. */
.rus__lockup{display:flex;align-items:flex-end;gap:14px;margin-top:20px}
.rus__the{font-family:var(--serif);font-size:54px;font-weight:700;font-style:italic;line-height:1;color:var(--tan);padding-bottom:18px}
.rus__mark{height:138px;width:auto;object-fit:contain}
.rus__us{font-family:var(--serif);font-size:150px;font-weight:700;letter-spacing:.06em;line-height:.78;text-transform:uppercase;color:#fff}
.rus__intro{margin-bottom:12px;font-size:17.5px;line-height:1.65;color:var(--on-dark);max-width:40ch;text-wrap:pretty}

.rus__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rus__card{position:relative;display:block;height:520px;overflow:hidden;color:#fff}
.rus__card:hover{transform:translateY(-8px);color:#fff}
.rus__card-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.rus__card:hover .rus__card-photo{transform:scale(1.08)}
.rus__card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(58,36,25,.08) 34%,rgba(58,36,25,.88))}
.rus__card-body{position:absolute;left:26px;right:26px;bottom:28px;display:flex;flex-direction:column;gap:8px}
.rus__card-name{font-family:var(--display);font-size:40px;line-height:.96;text-transform:uppercase}
.rus__card-ages{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tan)}
.rus__card-text{font-size:14px;line-height:1.55;color:rgba(255,255,255,.76)}

/* ---------- Next steps ---------- */
.steps{display:grid;grid-template-columns:.82fr 1.18fr;background:var(--bark);color:#fff}
.steps__intro{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:96px var(--gutter-wide)}
.steps__title{font-family:var(--display);font-size:78px;line-height:.88;letter-spacing:-.02em;text-transform:uppercase}
.steps__text{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.7);max-width:34ch;text-wrap:pretty}

/* The two-pixel gap between the rows is the ground showing through, which is
   why the rail has a colour of its own. */
.steps__rail{display:flex;flex-direction:column;gap:2px;background:var(--bark-soft)}
.steps__row{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:32px;height:260px;padding:0 var(--gutter-wide);overflow:hidden;color:#fff;
  transition:padding .45s var(--ease),color .22s ease;
}
.steps__row:hover{padding-left:72px;color:var(--tan)}
.steps__row-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.steps__row:hover .steps__row-photo{transform:scale(1.07)}
.steps__row-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(58,36,25,.86),rgba(58,36,25,.22))}
.steps__row-copy{position:relative;display:flex;flex-direction:column;gap:9px}
.steps__row-name{font-family:var(--display);font-size:46px;line-height:.94;text-transform:uppercase}
.steps__row-text{font-size:15px;line-height:1.5;color:rgba(255,255,255,.74);max-width:46ch}
.steps__row-arrow{position:relative;font-size:30px}