/* ==========================================================================
   ALL IN · First Christian Church, Huber Heights
   Firelight system — Satoshi, Midnight/Crimson/Fire/Starlight
   ========================================================================== */

@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Light.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-Black.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --midnight:#091620;
  --midnight-lift:#0f2130;
  --crimson:#B5202A;
  --fire:#D4814A;
  --starlight:#FBE6CF;
  --sand:#FBE6C3;
  --gray:#5C646A;
  --paper:#FFFFFF;

  --measure:34rem;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --band:clamp(4.5rem,11vw,9rem);
  --rule:1px solid color-mix(in srgb,var(--starlight) 18%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

body{
  margin:0;
  font-family:Satoshi,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:clamp(1.02rem,.55vw + .9rem,1.14rem);
  line-height:1.62;
  color:var(--starlight);
  background:var(--midnight);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--fire);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.03em;line-height:.95;text-wrap:balance}
h1{font-size:clamp(2.6rem,7.5vw,5.5rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.02em;line-height:1.1}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.2rem,1.5vw,1.5rem);line-height:1.45;font-weight:500;letter-spacing:-.015em}
.prose{max-width:var(--measure)}
.prose--wide{max-width:44rem}
.muted{color:color-mix(in srgb,var(--starlight) 62%,transparent)}
.label{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fire);margin:0 0 1.1rem;display:block;
}
.on-paper .label{color:var(--crimson)}

/* ---------- layout ---------- */
.wrap{width:min(76rem,100% - var(--gut)*2);margin-inline:auto}
.band{padding-block:var(--band)}
.on-paper{background:var(--paper);color:var(--midnight)}
.on-paper .muted{color:var(--gray)}
.on-lift{background:var(--midnight-lift)}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}
  .split--flip>*:first-child{order:2}}

/* the mark's diagonal sweep, reused as the site's structural rule */
.sweep{border:0;height:0;border-top:2px solid var(--crimson);transform:skewY(-1.1deg);
  margin:0 0 2.5rem;width:min(9rem,32%);opacity:.9}
.sweep--fire{border-color:var(--fire)}
.sweep--wide{width:100%;transform:skewY(-.3deg)}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(9,22,32,.9);
  backdrop-filter:blur(10px);border-bottom:var(--rule)}
.masthead__inner{display:flex;align-items:center;gap:1.5rem;
  width:min(76rem,100% - var(--gut)*2);margin-inline:auto;min-height:4.4rem}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:92px}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center;order:2}
.masthead .btn--nav{order:3;flex:0 0 auto}
.fcc-mark{order:4;flex:0 0 auto;display:flex;border-radius:50%;transition:transform .18s}
.fcc-mark img{width:36px;height:36px;display:block}
.fcc-mark:hover{transform:scale(1.06)}
.fcc-mark:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.nav a{text-decoration:none;font-size:.94rem;font-weight:500;letter-spacing:-.01em;
  color:color-mix(in srgb,var(--starlight) 78%,transparent);padding-block:.35rem;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--starlight);border-bottom-color:var(--crimson)}
.nav a[aria-current=page]{color:var(--starlight);border-bottom-color:var(--crimson)}
@media (max-width:860px){
  .masthead__inner{flex-wrap:wrap;padding-block:.55rem;gap:.45rem 1rem}
  .masthead .btn--nav{order:2;margin-left:auto}
  .fcc-mark{order:2}
  .fcc-mark img{width:32px;height:32px}
  .nav{order:3;margin-left:0;width:100%;gap:1.15rem;overflow-x:auto;
    padding-bottom:.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:.9rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;letter-spacing:-.01em;
  padding:.85rem 1.65rem;background:var(--crimson);color:var(--starlight);
  border:2px solid var(--crimson);transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--fire);border-color:var(--fire);color:var(--midnight)}
.btn--ghost{background:transparent;border-color:color-mix(in srgb,var(--starlight) 45%,transparent);
  color:var(--starlight)}
.btn--ghost:hover{background:var(--starlight);border-color:var(--starlight);color:var(--midnight)}
.on-paper .btn--ghost{border-color:color-mix(in srgb,var(--midnight) 30%,transparent);color:var(--midnight)}
.on-paper .btn--ghost:hover{background:var(--midnight);color:var(--starlight);border-color:var(--midnight)}
.btn--nav{padding:.5rem 1.05rem;font-size:.9rem}
.btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(92svh,50rem);display:flex;
  align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(184deg,rgba(9,22,32,.34) 0%,rgba(9,22,32,.62) 42%,rgba(9,22,32,.96) 100%)}
.hero__inner{width:min(76rem,100% - var(--gut)*2);margin-inline:auto;
  padding-block:clamp(4rem,12vh,8rem)}
.hero__mark{width:min(34rem,74%);margin-bottom:1.6rem}
.hero__line{font-size:clamp(1.6rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.02;margin:0 0 1.2rem;max-width:18ch}
.hero__sub{max-width:33rem;color:color-mix(in srgb,var(--starlight) 82%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .hero__mark,.hero__line,.hero__sub,.hero .btns{animation:rise .9s cubic-bezier(.2,.7,.3,1) backwards}
  .hero__line{animation-delay:.12s}.hero__sub{animation-delay:.2s}.hero .btns{animation-delay:.28s}
}
@keyframes rise{from{opacity:0;transform:translateY(1.4rem)}to{opacity:1;transform:none}}

/* ---------- goals ---------- */
.goals{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:820px){.goals{grid-template-columns:1fr 1.35fr;align-items:start}}
.figure{font-weight:900;line-height:.82;letter-spacing:-.045em;display:block;margin-bottom:.5rem}
.figure--engage{font-size:clamp(4.5rem,13vw,9rem);color:var(--starlight)}
.figure--money{font-size:clamp(4.5rem,13vw,9rem);color:var(--fire)}
.on-paper .figure--money{color:var(--crimson)}
.figure__note{display:block;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;
  letter-spacing:.02em;color:var(--fire);line-height:1.1;margin-bottom:1.1rem}

/* ---------- buckets ---------- */
.bucket{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.5rem,5vw,3.75rem);
  border-top:var(--rule)}
.on-paper .bucket{border-top-color:color-mix(in srgb,var(--midnight) 14%,transparent)}
@media (min-width:900px){.bucket{grid-template-columns:.9fr 1.1fr}
  .bucket--flip>*:first-child{order:2}}
.bucket__amount{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:900;letter-spacing:-.04em;
  line-height:1;color:var(--crimson);display:block}
.bucket h3{margin:.2rem 0 .9rem}
.bucket img{aspect-ratio:4/3;object-fit:cover;width:100%}
.bucket__link{display:inline-block;margin-top:1.1rem;font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--fire);padding-bottom:.1rem}
.bucket__link:hover{color:var(--crimson);border-bottom-color:var(--crimson)}

/* ---------- scripture ---------- */
.scripture{text-align:left}
.scripture blockquote{margin:0;font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:500;
  line-height:1.24;letter-spacing:-.025em;max-width:24ch}
.scripture cite{display:block;margin-top:1.5rem;font-style:normal;font-weight:700;
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fire)}

/* ---------- letter ---------- */
.letter__portrait{width:100%;max-width:23rem;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 74%,transparent 99%)}
.signature{margin-top:1.75rem;font-weight:700;line-height:1.35}
.signature span{display:block;font-weight:400;font-size:.92rem;color:var(--gray)}
.on-lift .signature span,.hero .signature span{color:color-mix(in srgb,var(--starlight) 60%,transparent)}

/* ---------- timeline ---------- */
.dates{list-style:none;margin:0;padding:0;display:grid;gap:0}
.date{display:grid;gap:.35rem 2rem;padding-block:1.5rem;border-top:var(--rule)}
.on-paper .date{border-top-color:color-mix(in srgb,var(--midnight) 14%,transparent)}
@media (min-width:720px){.date{grid-template-columns:9rem 15rem 1fr;align-items:baseline}}
.date__when{font-weight:900;font-size:1.15rem;letter-spacing:-.01em;color:var(--crimson)}
.date__what{font-weight:700}
.date__note{color:var(--gray);font-size:.96rem}
.on-lift .date__note{color:color-mix(in srgb,var(--starlight) 62%,transparent)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:2rem}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:2.75rem}}
.steps li{border-top:3px solid var(--crimson);padding-top:1.1rem}
.steps h3{margin-bottom:.5rem}

/* ---------- commit form ---------- */
.commit-card{background:var(--midnight-lift);padding:clamp(1.75rem,4vw,3rem);max-width:38rem;
  border-left:3px solid var(--crimson)}
.on-lift .commit-card{background:var(--midnight)}
.on-lift .field input,.on-lift .field select,.on-lift .field textarea{background:var(--midnight-lift)}
.field{margin-bottom:1.35rem}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;
  padding:.75rem .9rem;background:var(--midnight);color:var(--starlight);
  border:1px solid color-mix(in srgb,var(--starlight) 28%,transparent);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fire)}
.field__help{font-size:.86rem;color:color-mix(in srgb,var(--starlight) 58%,transparent);margin-top:.4rem}
.todo{border-left:3px solid var(--fire);padding:.9rem 1.1rem;margin:1.5rem 0;
  background:color-mix(in srgb,var(--fire) 12%,transparent);font-size:.92rem}

/* ---------- closing ---------- */
.closer{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(6rem,15vw,11rem)}
.closer__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.closer::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,22,32,.94) 0%,rgba(9,22,32,.78) 55%,rgba(9,22,32,.6) 100%)}

/* ---------- footer ---------- */
.foot{border-top:var(--rule);padding-block:3.25rem;font-size:.92rem}
.foot__inner{display:grid;gap:2rem}
@media (min-width:760px){.foot__inner{grid-template-columns:1fr auto;align-items:end}}
.foot img{width:150px;margin-bottom:1.25rem}
.foot a{color:color-mix(in srgb,var(--starlight) 72%,transparent)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.1rem}

/* ---------- stories ---------- */
.stories{display:grid;gap:clamp(2.25rem,4vw,3.25rem);margin-top:3rem}
@media (min-width:760px){.stories{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.stories{grid-template-columns:repeat(3,1fr)}}
/* Space is reserved for each video; the placeholder itself is hidden.
   To see the outlines again while editing, uncomment the block below. */
.story__slot{aspect-ratio:16/9;display:grid;place-items:center;margin-bottom:1.1rem;
  background:transparent;border:0}
.story__slot span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/*
.story__slot{background:color-mix(in srgb,var(--starlight) 6%,transparent);
  border:2px dashed color-mix(in srgb,var(--starlight) 26%,transparent)}
.on-paper .story__slot{background:color-mix(in srgb,var(--midnight) 5%,transparent);
  border-color:color-mix(in srgb,var(--midnight) 26%,transparent)}
.story__slot span{position:static;width:auto;height:auto;clip-path:none;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--starlight) 58%,transparent)}
.on-paper .story__slot span{color:var(--gray)}
*/

/* sermon messages: thumbnail left, meta right */
.msgs{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-top:2.5rem}
.msg{display:grid;gap:.5rem 2rem;align-items:center;
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid color-mix(in srgb,var(--midnight) 14%,transparent)}
.msg:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:720px){.msg{grid-template-columns:minmax(0,20rem) 1fr}}
.msg .story__slot{margin-bottom:0}
.msg h3{margin:.15rem 0 .4rem}
.msg p{font-size:.98rem;margin:0}
.story__when{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:.5rem}
.story h3{margin-bottom:.4rem}
.story p{font-size:.98rem}

/* ---------- resource list ---------- */
.res{list-style:none;margin:1.75rem 0 0;padding:0}
.res__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  padding-block:1.4rem;border-top:1px solid color-mix(in srgb,var(--midnight) 14%,transparent)}
.res__row:last-child{border-bottom:1px solid color-mix(in srgb,var(--midnight) 14%,transparent)}
.res__row h3{font-size:1.15rem;margin-bottom:.2rem}
.res__row p{font-size:.96rem;margin:0;max-width:44ch}
.res__row .btn{padding:.5rem 1.15rem;font-size:.88rem;flex:0 0 auto}

.split--top{align-items:start}
@media (min-width:900px){.letter__portrait--sticky{position:sticky;top:7rem}}

/* ---------- commitment card (mirrors the printed worksheet) ---------- */
.cardsheet{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(2.75rem,6vw,4.5rem)}
.cardsheet__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cardsheet::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,22,32,.9)}

.cardsheet__head{margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.cardsheet__head h2{color:var(--fire);text-transform:uppercase;letter-spacing:-.025em;
  font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:.98}
.cardsheet__head p{margin:.6rem 0 0;font-weight:500;
  font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.25;color:var(--starlight)}

/* white pill inputs */
.money{display:flex;align-items:stretch;min-width:0;background:#fff;border-radius:999px;
  overflow:hidden}
.money span{display:grid;place-items:center;padding:.55rem 0 .55rem 1.15rem;
  font-weight:900;font-size:1.3rem;color:#111;background:transparent}
.money input{flex:1;min-width:0;width:100%;font:inherit;font-weight:700;font-size:1.1rem;
  color:#111;background:transparent;border:0;padding:.7rem 1.25rem .7rem .55rem}
.money input:focus{outline:0}
.money:focus-within{outline:3px solid var(--fire);outline-offset:2px}
.money--derived{background:#e4ded6}

/* worksheet grid: input | operator gutter | label */
.ws{display:grid;gap:.7rem 1.35rem;align-items:center}
@media (min-width:820px){
  .ws{grid-template-columns:minmax(0,1fr) 3rem minmax(0,1fr)}
  .ws__a{grid-column:1}
  .ws__right{grid-column:3}
  .ws__op{grid-column:2}
  .ws__left{grid-column:1}
  .ws__b{grid-column:2 / span 2}
}
.ws__label{font-weight:700;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.18;
  letter-spacing:-.015em;color:var(--starlight);margin:0}
.ws__right,.ws__left{text-align:left}
@media (min-width:820px){.ws__right,.ws__left{text-align:right}}
.ws__label small{display:block;font-weight:400;font-size:.86rem;line-height:1.3;
  color:color-mix(in srgb,var(--starlight) 72%,transparent);margin-top:.15rem}
.ws__op{font-weight:900;font-size:1.75rem;line-height:1;color:var(--starlight);text-align:center}
.ws__op--x{color:var(--starlight)}

/* full-bleed crimson total bar */
.totalbar{background:var(--crimson);margin-top:1.1rem;padding-block:clamp(1.1rem,2.6vw,1.5rem)}
.totalbar__inner{display:grid;gap:.75rem 2rem;align-items:center}
@media (min-width:820px){.totalbar__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.totalbar label{font-weight:900;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.08;color:var(--starlight)}
.totalbar label span{display:block;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.92rem;margin-top:.3rem;color:color-mix(in srgb,var(--starlight) 82%,transparent)}

/* name / phone / email */
.cardsheet__foot{margin-top:clamp(1.75rem,4vw,2.5rem)}
.cf{display:grid;gap:.7rem;max-width:44rem}
.cf__row{display:flex;align-items:stretch;min-width:0;background:#fff;border-radius:999px}
.cf__tag{flex:0 0 6.5rem;display:grid;place-items:center;background:var(--crimson);
  color:var(--sand);font-weight:700;font-size:1.05rem;text-transform:uppercase;
  border-radius:999px 0 0 999px}
@media (min-width:560px){.cf__tag{flex-basis:9rem;font-size:1.3rem}}
.cf__row input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:1.05rem;
  color:#111;background:transparent;border:0;border-radius:0 999px 999px 0;padding:.8rem 1.35rem}
.cf__row input:focus{outline:0}
.cf__row:focus-within{outline:3px solid var(--fire);outline-offset:2px}

.fineprint{font-size:.86rem;line-height:1.5;margin:2.25rem 0 1.75rem;max-width:44rem;
  padding-top:1.35rem;border-top:1px solid color-mix(in srgb,var(--starlight) 22%,transparent);
  color:color-mix(in srgb,var(--starlight) 68%,transparent)}
.fineprint a{color:var(--fire)}

/* ---------- commit page videos (side by side) ---------- */
.vids{display:grid;gap:clamp(2.25rem,4vw,3.25rem);margin-top:2.75rem}
@media (min-width:760px){.vids{grid-template-columns:repeat(2,1fr)}}
.vid .story__when{color:var(--fire)}
.vid h3{margin-bottom:.45rem}
.vid p{margin:0;font-size:.98rem;max-width:30rem}
.vid__frame{position:relative;aspect-ratio:16/9;margin-bottom:1.2rem;overflow:hidden;
  background:var(--midnight);border-top:3px solid var(--crimson)}
.vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid__frame--soon{display:grid;place-items:center;align-content:center;gap:.9rem;
  background:color-mix(in srgb,var(--starlight) 5%,var(--midnight))}
.vid__play{width:3.4rem;height:3.4rem;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--starlight) 40%,transparent);position:relative}
.vid__play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:.6rem 0 .6rem 1rem;
  border-color:transparent transparent transparent color-mix(in srgb,var(--starlight) 55%,transparent)}
.vid__soon{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--starlight) 55%,transparent)}

/* resources page: weekly LifeGroup videos */
.vids--weeks{margin-top:1.75rem}
@media (min-width:1180px){.vids--weeks{grid-template-columns:repeat(3,1fr)}}
.on-paper .vid .story__when{color:var(--crimson)}
.vids--weeks .vid__frame{margin-bottom:1rem}