/* Today's Victory Church — "the church left the building"
   Ground: warm paper. One drawn dusk town carries the idea. Rules, not boxes. */

:root{
  --paper:#F2EDE4;
  --paper-2:#E8E1D4;
  --ink:#141418;
  --ink-2:#4A4741;
  --red:#A4140A;
  --red-hot:#C41A0C;
  --lamp:#E8A13A;
  --lamp-2:#FFD08A;
  --dusk:#15192A;
  --dusk-2:#0D1020;
  --rule:rgba(20,20,24,.16);
  --rule-soft:rgba(20,20,24,.09);
  --shadow:0 18px 50px -22px rgba(20,16,10,.5);
  --wrap:1280px;
  --gut:clamp(18px,4.5vw,64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Gantari",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(16px,1.05vw,18px);line-height:1.62;font-weight:380;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:.92}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- display type ---------- */
.disp{
  font-family:"Staatliches",Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.83;
}
.hand{font-family:"Shantell Sans","Comic Sans MS",cursive;font-weight:500}

.h1{font-size:clamp(3.4rem,13.5vw,12.5rem)}
.h2{font-size:clamp(2.6rem,8.2vw,7.2rem)}
.h3{font-size:clamp(1.9rem,4.4vw,3.6rem)}
.red{color:var(--red)}
.lamp{color:var(--lamp)}

.kicker{
  font-family:"Shantell Sans",cursive;font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--red);
  margin:0 0 .6em;display:flex;align-items:center;gap:.55em;
}
.kicker::before{content:"";width:clamp(26px,4vw,54px);height:2px;background:var(--red);display:block;flex:none}

.lede{font-size:clamp(1.12rem,2vw,1.55rem);line-height:1.5;color:var(--ink-2);max-width:34ch}
.lede b,.lede strong{color:var(--ink);font-weight:650}

/* an ink stroke that draws itself under a word when it comes into view */
.mark{position:relative;white-space:nowrap}
.mark::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.42em;
  background:var(--lamp);opacity:.45;z-index:-1;border-radius:.24em .5em .3em .4em;
  transform:scaleX(var(--mk,0));transform-origin:left center;
  transition:transform .75s cubic-bezier(.2,.9,.25,1);
}
.mark-red::after{background:var(--red);opacity:.2}
.circle{position:relative;white-space:nowrap}
.circle svg{position:absolute;left:-7%;top:-16%;width:114%;height:132%;overflow:visible;pointer-events:none}
.circle svg path{
  fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--mk,0)));
  transition:stroke-dashoffset 1s cubic-bezier(.3,.9,.3,1);
}

/* ---------- buttons: a rule and a fill, no rounded pills ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:"Gantari",sans-serif;font-weight:650;font-size:1rem;letter-spacing:.005em;
  padding:.92em 1.5em;text-decoration:none;border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:background .2s,color .2s,border-color .2s,transform .18s cubic-bezier(.2,1.4,.4,1);
  will-change:transform;
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-out{background:transparent;color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--ink);border-color:var(--ink)}
.btn-lamp{background:var(--lamp);border-color:var(--lamp);color:#20180A}
.btn-lamp:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-lg{font-size:clamp(1rem,1.4vw,1.18rem);padding:1.05em 1.9em}
.lnk{
  display:inline-block;text-decoration:none;font-weight:650;border-bottom:2px solid var(--red);
  padding-bottom:2px;background-image:linear-gradient(var(--red),var(--red));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
}
.lnk:hover{color:var(--red)}

/* ================= HEADER ================= */
.hdr{position:sticky;top:0;z-index:60;background:rgba(242,237,228,.86);backdrop-filter:blur(14px) saturate(1.2)}
.hdr::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--rule)}
.prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);z-index:2}
.hdr-in{
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:clamp(12px,2vw,30px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:44px;height:44px;flex:none}
.brand b{font-family:"Staatliches",sans-serif;font-size:1.32rem;letter-spacing:.01em;line-height:1;display:block;text-transform:uppercase}
.brand span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600;display:block;margin-top:2px}
.nav{display:flex;gap:clamp(10px,1.6vw,26px);margin-left:auto}
.nav a{
  text-decoration:none;font-weight:600;font-size:.95rem;padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.9,.3,1)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-end{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.nav+.hdr-end{margin-left:0}
.call{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:.92rem;
  border:2px solid var(--ink);padding:.5em .8em;
}
.call:hover{background:var(--ink);color:var(--paper)}
.give-btn{padding:.55em 1.05em;font-size:.92rem}
.burger{display:none;width:44px;height:40px;border:2px solid var(--ink);background:none;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:18px}.burger span:nth-child(3){top:24px}
body.menu .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu .burger span:nth-child(2){opacity:0}
body.menu .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;background:var(--dusk);color:var(--paper);
  padding:96px var(--gut) 40px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.65,0,.2,1);
}
body.menu .drawer{transform:none}
.drawer a{
  font-family:"Staatliches",sans-serif;text-transform:uppercase;text-decoration:none;
  font-size:clamp(2rem,9vw,3.4rem);line-height:1.02;color:var(--paper);
  border-bottom:1px solid rgba(242,237,228,.16);padding:.18em 0;transition:color .2s,padding-left .3s;
}
.drawer a:hover{color:var(--lamp);padding-left:.14em}
.drawer .dr-foot{margin-top:24px;font-size:.98rem;color:rgba(242,237,228,.72);display:flex;flex-wrap:wrap;gap:6px 22px}
.drawer .dr-foot a{font-family:"Gantari",sans-serif;font-size:1rem;text-transform:none;border:0;padding:0;color:var(--lamp)}

/* ================= HERO / TOWN ================= */
.hero{position:relative;padding-top:clamp(26px,5vw,70px)}
.hero-copy{position:relative;z-index:3;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.hero-copy .h1{max-width:13ch}
.hero-copy .h1 .ln{display:block;overflow:hidden}
.hero-copy .h1 .ln>span{display:inline-block;will-change:transform}
.hero-sub{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(18px,3vw,54px);
  margin-top:clamp(18px,2.6vw,34px);
}
.hero-sub .lede{max-width:40ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2vw,26px)}

.scrawl{font-family:"Shantell Sans",cursive;font-weight:600;font-size:clamp(1.05rem,2.2vw,1.6rem);color:var(--red);transform:rotate(-2.5deg);display:inline-block}

/* the drawn town */
.town-wrap{position:relative;margin-top:clamp(20px,3vw,44px)}
.town{
  display:block;width:100%;height:clamp(360px,52vw,620px);
  background:linear-gradient(#1D2339 0%,#161A2B 42%,#0E1120 100%);
  touch-action:manipulation;cursor:pointer;
}
.town-hud{
  position:absolute;left:var(--gut);bottom:clamp(14px,2vw,26px);z-index:4;
  display:flex;align-items:flex-end;gap:clamp(14px,2.4vw,34px);color:var(--paper);pointer-events:none;
}
.town-hud .big{font-family:"Staatliches",sans-serif;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.82;color:var(--lamp-2)}
.town-hud .cap{font-family:"Shantell Sans",cursive;font-size:clamp(.9rem,1.5vw,1.08rem);color:rgba(242,237,228,.86);max-width:19ch;line-height:1.3}
.town-tap{
  position:absolute;right:var(--gut);bottom:clamp(14px,2vw,26px);z-index:4;
  font-family:"Shantell Sans",cursive;font-weight:600;color:var(--lamp-2);font-size:clamp(.92rem,1.5vw,1.12rem);
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.town-tap .arrow{display:block;width:44px;height:22px}
.town-done{
  position:absolute;left:50%;top:clamp(16px,4vw,44px);transform:translateX(-50%) rotate(-1.6deg);z-index:5;
  font-family:"Staatliches",sans-serif;text-transform:uppercase;color:var(--lamp-2);
  font-size:clamp(1.3rem,3.4vw,2.6rem);letter-spacing:.02em;text-align:center;line-height:.95;
  opacity:0;transition:opacity .7s;pointer-events:none;text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.town-done.on{opacity:1}

/* ================= THE THREE WAYS ================= */
.three{padding:clamp(56px,9vw,130px) 0 clamp(40px,6vw,80px)}
.three-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,5vw,64px)}
.ways{display:grid;gap:0;border-top:1px solid var(--rule)}
.way{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,48px);align-items:center;
  padding:clamp(22px,3.4vw,44px) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;position:relative;isolation:isolate;
}
.way::before{
  content:"";position:absolute;inset:0 -24px;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s cubic-bezier(.2,.9,.25,1);
}
.way:hover::before,.way:focus-visible::before{transform:scaleY(1)}
.way:hover,.way:focus-visible{color:var(--paper)}
.way:hover .way-d,.way:focus-visible .way-d{color:rgba(242,237,228,.78)}
.way:hover .way-go,.way:focus-visible .way-go{background:var(--lamp);border-color:var(--lamp);color:#20180A;transform:translateX(6px)}
.way-ic{width:clamp(56px,7vw,92px);height:clamp(56px,7vw,92px);flex:none}
.way-t{font-family:"Staatliches",sans-serif;text-transform:uppercase;font-size:clamp(1.9rem,5vw,3.5rem);line-height:.9;display:block}
.way-d{display:block;color:var(--ink-2);max-width:46ch;margin-top:.35em;font-size:clamp(.98rem,1.3vw,1.1rem);transition:color .3s}
.way-go{
  flex:none;border:2px solid var(--ink);width:56px;height:56px;display:grid;place-items:center;
  font-size:1.3rem;transition:transform .3s cubic-bezier(.2,1.4,.4,1),background .3s,color .3s,border-color .3s;
}

/* ================= LATEST MESSAGE ================= */
.latest{position:relative;background:var(--dusk);color:var(--paper);overflow:hidden}
.latest .wrap{position:relative;z-index:2;padding-block:clamp(52px,8vw,110px)}
.latest-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.latest-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,66px);align-items:center}
.latest-still{position:relative;display:block;text-decoration:none;overflow:hidden;background:#0B0D18}
.latest-still img{width:100%;height:auto;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);filter:saturate(1.05)}
.latest-still:hover img{transform:scale(1.035)}
.latest-still .play{
  position:absolute;inset:0;display:grid;place-items:center;
}
.latest-still .play i{
  width:clamp(64px,9vw,104px);height:clamp(64px,9vw,104px);border-radius:50%;
  background:var(--red);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(164,20,10,.55);
}
.motion-ok .latest-still .play i{animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(164,20,10,.55)}70%{box-shadow:0 0 0 34px rgba(164,20,10,0)}100%{box-shadow:0 0 0 0 rgba(164,20,10,0)}}
.latest-still .play svg{width:32%;height:32%;fill:#fff;margin-left:8%}
.latest h2{color:var(--paper)}
.latest .kicker{color:var(--lamp)}
.latest .kicker::before{background:var(--lamp)}
.latest p{color:rgba(242,237,228,.78)}
.latest .btn-out{color:var(--paper);border-color:rgba(242,237,228,.5)}
.latest .btn-out:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ================= MESSAGE RIVER ================= */
.river{padding:clamp(48px,7vw,96px) 0 clamp(30px,4vw,54px);overflow:hidden}
.river-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,3vw,40px)}
.river-track{display:flex;gap:clamp(14px,2vw,28px);will-change:transform;padding-inline:var(--gut)}
.vid{flex:0 0 clamp(250px,30vw,400px);text-decoration:none;display:block}
.vid .sh{position:relative;overflow:hidden;background:#101322;aspect-ratio:16/9}
.vid .sh img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s;filter:grayscale(.35) contrast(1.02)}
.vid:hover .sh img{transform:scale(1.06);filter:none}
.vid .sh::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.vid:hover .sh::after{transform:scaleX(1)}
.vid b{display:block;margin-top:.7em;font-weight:650;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.22}
.vid i{display:block;font-style:normal;color:var(--ink-2);font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;margin-top:.35em}

/* ================= SOCIAL WALL ================= */
.social{padding:clamp(48px,7vw,104px) 0}
.soc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,3.4vw,46px)}
.soc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(18px,2.4vw,34px)}
.post{display:block;text-decoration:none;border-top:2px solid var(--ink);padding-top:16px}
.post .ph{overflow:hidden;background:var(--paper-2);margin-bottom:14px}
.post .ph img{width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.post:hover .ph img{transform:scale(1.05)}
.post .src{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red);display:flex;justify-content:space-between;gap:10px}
.post .src span{color:var(--ink-2);font-weight:600;letter-spacing:.08em}
.post p{margin:.55em 0 0;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.post:hover p{color:var(--ink)}
.soc-follow{
  border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.soc-follow .h3{font-size:clamp(1.5rem,3vw,2.3rem)}
.soc-note{font-size:.95rem;color:var(--ink-2)}

/* ================= DEVOTIONAL ================= */
.devo{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.devo .wrap{position:relative;z-index:2;padding-block:clamp(56px,9vw,124px)}
.devo-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.devo h2,.devo .h3{color:var(--paper)}
.devo .kicker{color:var(--lamp)}
.devo .kicker::before{background:var(--lamp)}
.devo p{color:rgba(242,237,228,.76)}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin-top:clamp(28px,4vw,56px);border-top:1px solid rgba(242,237,228,.22)}
.route{padding:clamp(22px,3vw,38px) clamp(0px,2vw,28px) clamp(22px,3vw,38px) 0;border-bottom:1px solid rgba(242,237,228,.22);position:relative}
.route+.route{border-left:1px solid rgba(242,237,228,.22);padding-left:clamp(18px,2.4vw,34px)}
.route h3{font-family:"Staatliches",sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.35em;color:var(--paper)}
.route .soon{font-family:"Shantell Sans",cursive;color:var(--lamp);font-size:.95rem;display:inline-block;margin-top:.3em}
.route .btn{margin-top:1em}
.devo-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.1em}
.devo-form input{
  flex:1 1 190px;min-width:0;background:transparent;border:0;border-bottom:2px solid rgba(242,237,228,.4);
  color:var(--paper);font:inherit;padding:.6em 0;
}
.devo-form input::placeholder{color:rgba(242,237,228,.45)}
.devo-form input:focus{outline:none;border-bottom-color:var(--lamp)}
.form-note{font-size:.9rem;margin-top:.7em;min-height:1.2em;color:var(--lamp)}

/* ================= FULL-BLEED PHOTO BAND ================= */
.bleed{position:relative;overflow:hidden;background:var(--dusk)}
.bleed-track{display:flex;gap:0;will-change:transform}
.bleed-track figure{margin:0;flex:none}
.bleed-track img{height:clamp(240px,34vw,460px);width:auto;display:block;filter:saturate(.95) contrast(1.05)}

/* ================= VISIT / FACTS (rules, not tables) ================= */
.facts{margin:clamp(24px,3vw,40px) 0 0;border-top:1px solid var(--rule)}
.facts div{display:flex;flex-wrap:wrap;gap:6px clamp(14px,3vw,40px);padding:clamp(13px,1.6vw,20px) 0;border-bottom:1px solid var(--rule-soft)}
.facts dt{flex:0 0 clamp(88px,10vw,150px);font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--ink-2);padding-top:.35em}
.facts dd{margin:0;font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:550}
.facts dd .muted{color:var(--ink-2);font-size:.9rem;font-weight:420;display:block}

/* ================= PORTRAIT (full bleed, never cropped) ================= */
.portrait-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:end;gap:0}
.portrait-band .pb-copy{padding:clamp(40px,6vw,96px) var(--gut) clamp(40px,6vw,96px) max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.portrait-band figure{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.portrait-band img{width:100%;height:auto;display:block}
.portrait-band figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:14px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(10,8,6,.72));font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650;
}

/* ================= FOOTER ================= */
.ft{background:var(--dusk-2);color:rgba(242,237,228,.8);padding:clamp(48px,7vw,96px) 0 28px;position:relative;overflow:hidden}
.ft-cv{position:absolute;inset:0;width:100%;height:100%}
.ft .wrap{position:relative;z-index:2}
.ft-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,56px)}
.ft-brand{display:flex;gap:14px;align-items:flex-start}
.ft-brand img{width:60px;height:60px;flex:none}
.ft-brand b{font-family:"Staatliches",sans-serif;font-size:1.5rem;color:var(--paper);display:block;text-transform:uppercase;line-height:1}
.ft-brand span{display:block;font-family:"Shantell Sans",cursive;color:var(--lamp);margin-top:6px;font-size:.98rem}
.ft h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lamp);font-weight:700;margin-bottom:.9em}
.ft a{color:rgba(242,237,228,.86);text-decoration:none;border-bottom:1px solid transparent}
.ft a:hover{color:var(--lamp);border-bottom-color:var(--lamp)}
.ft-bot{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  margin-top:clamp(34px,5vw,64px);padding-top:20px;border-top:1px solid rgba(242,237,228,.18);font-size:.88rem;
}
.ft-credit{font-weight:700;color:var(--lamp)!important}

/* ================= SHARED PAGE BITS ================= */
.page-head{padding:clamp(40px,7vw,100px) 0 clamp(26px,4vw,52px)}
.page-head .h1{max-width:15ch}
.rule{height:1px;background:var(--rule);margin:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,64px)}
.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);margin-top:clamp(26px,4vw,52px)}
.stat b{font-family:"Staatliches",sans-serif;font-size:clamp(3rem,8vw,6.4rem);line-height:.8;display:block;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.5em;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);max-width:17ch;font-weight:600}
.on-dark .stat span{color:rgba(242,237,228,.7)}

.scene{display:block;width:100%;height:clamp(320px,42vw,520px);touch-action:manipulation}
.scene-wrap{position:relative;margin-top:clamp(18px,3vw,36px)}
.scene-hud{
  position:absolute;left:clamp(14px,2.4vw,30px);bottom:clamp(12px,2vw,24px);z-index:3;pointer-events:none;
  display:flex;align-items:flex-end;gap:clamp(12px,2.4vw,28px);
}
.scene-hud .big{font-family:"Staatliches",sans-serif;font-size:clamp(2.2rem,6vw,4.4rem);line-height:.82}
.scene-hud .cap{font-family:"Shantell Sans",cursive;font-size:clamp(.88rem,1.4vw,1.04rem);max-width:20ch;line-height:1.3}

/* ================= MOTION GATES ================= */
.motion-ok [data-rise]{opacity:0;transform:translateY(26px) rotate(var(--rz,0deg))}
.motion-ok [data-rise].in{opacity:1;transform:none;transition:opacity .6s ease,transform .85s cubic-bezier(.16,1.1,.3,1)}
.motion-ok .drop{opacity:0;transform:translateY(-38px) rotate(var(--rz,-4deg)) scale(.97)}
.motion-ok .drop.in{opacity:1;transform:none;transition:opacity .28s ease,transform .95s cubic-bezier(.18,1.55,.34,1)}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .latest-grid{grid-template-columns:1fr}
  .portrait-band{grid-template-columns:1fr}
  .portrait-band .pb-copy{padding-inline:var(--gut)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .brand span{display:none}
  .route+.route{border-left:0;padding-left:0}
  .way{grid-template-columns:auto 1fr;gap:16px}
  .way-go{display:none}
  .three-head,.river-head,.soc-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .brand img{width:38px;height:38px}
  .brand b{font-size:1.1rem}
  .call .lbl{display:none}
  .give-btn{padding:.55em .85em}
  .town{height:clamp(300px,74vw,420px)}
  .town-hud{gap:12px}
  .town-tap{display:none}
  .hero-sub{flex-direction:column;align-items:flex-start;gap:14px}
  .stats{gap:26px 34px}
  .stat{flex:1 1 38%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ================= ADDED: page furniture ================= */
.brand .bt{display:block}
.brand .bs{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:650;margin-top:3px}
.drawer{visibility:hidden}
body.menu .drawer{visibility:visible}
.drawer .dr-foot span{color:rgba(242,237,228,.6)}

/* next-gathering strip: a rule and a line, never a box */
.tkt{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(14px,2.4vw,30px);
  margin-top:clamp(20px,3vw,34px);padding-top:14px;border-top:2px solid var(--ink);
  font-size:clamp(1rem,1.5vw,1.2rem);
}
.tkt .tkt-l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--red)}
.tkt b{font-family:"Staatliches",sans-serif;font-size:clamp(1.4rem,3vw,2.1rem);text-transform:uppercase;line-height:1}
.tkt .tkt-c{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}

/* the two service times, set as big as they deserve */
.when{padding:clamp(52px,8vw,120px) 0}
.times{display:flex;flex-wrap:wrap;gap:0 clamp(28px,6vw,110px);margin-top:clamp(22px,3vw,40px);border-top:2px solid var(--ink)}
.time{padding:clamp(16px,2.2vw,26px) 0;flex:1 1 240px;min-width:0}
.time b{display:block;font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:.06em;color:var(--ink-2)}
.time .t{display:block;font-size:clamp(3.4rem,10vw,7.4rem);line-height:.86;font-variant-numeric:tabular-nums;margin-top:.06em}
.time .t em{font-style:normal;font-size:.42em;letter-spacing:.02em}
.addr{margin-top:clamp(16px,2.2vw,26px);font-size:clamp(1.15rem,2.2vw,1.8rem);font-weight:500;max-width:26ch;line-height:1.28}
.addr .muted{color:var(--ink-2);font-size:.72em;display:block;margin-top:.25em}
.telbig{margin:clamp(14px,2vw,24px) 0 clamp(20px,3vw,32px)}
.telbig a{
  font-family:"Staatliches",sans-serif;font-size:clamp(2.2rem,6vw,4.4rem);text-decoration:none;
  line-height:.9;border-bottom:4px solid var(--red);display:inline-block;
}
.telbig a:hover{color:var(--red)}

/* flowing copy in columns, separated by rules */
.prose-sec{padding:clamp(46px,7vw,104px) 0;border-top:1px solid var(--rule)}
.prose{max-width:38ch}
.prose h3{margin-bottom:.5em}
.prose p{color:var(--ink-2)}
.prose p a{color:var(--ink)}
.mt{margin-top:clamp(22px,3vw,38px)}

/* the library grid */
.grid-sec{padding:clamp(46px,7vw,104px) 0}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(20px,2.6vw,38px)}

/* the scene band */
.scene-wrap{position:relative}
.scene{background:linear-gradient(#2A2118 0%,#1A1511 58%,#100D0A 100%)}
.dark-scene{background:linear-gradient(#171C2E 0%,#101423 60%,#0B0E1A 100%)}
.scene-hud.on-dark .cap{color:rgba(242,237,228,.85)}
.scene-hud .big{color:var(--lamp)}
.scene-hud .cap{color:rgba(242,237,228,.85)}

/* the pastors, running off the edge of the frame */
.pbleed{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center;background:var(--ink);overflow:hidden}
.pane-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pbleed .pb-img{margin:0;position:relative;z-index:1}
.pbleed .pb-img img{width:100%;height:auto;display:block}
.pbleed .pb-copy{position:relative;z-index:2;padding:clamp(34px,6vw,90px) var(--gut)}
.pull{margin:0;max-width:26ch}
.pull p{
  font-family:"Staatliches",sans-serif;text-transform:uppercase;line-height:.95;
  font-size:clamp(1.5rem,3.6vw,3rem);color:var(--paper);margin-bottom:.5em;
}
.pull cite{font-style:normal;font-family:"Shantell Sans",cursive;color:var(--lamp);font-size:clamp(.95rem,1.5vw,1.1rem)}

/* give */
.give-hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:clamp(52px,9vw,150px) 0 clamp(52px,8vw,120px)}
.give-hero .wrap{position:relative;z-index:2}
.give-hero .kicker{color:var(--lamp)}
.give-hero .kicker::before{background:var(--lamp)}
.give-hero .red{color:var(--lamp)}
.give-lede{color:rgba(242,237,228,.82);margin-top:clamp(20px,3vw,34px)}
.give-lede b{color:var(--paper)}
.give-hero .btn-out{color:var(--paper);border-color:rgba(242,237,228,.55)}
.give-alt{margin-top:clamp(20px,3vw,34px);color:rgba(242,237,228,.6);font-size:.98rem}

.latest-date{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lamp);font-weight:700;margin-bottom:1em}
.soc-note{color:var(--ink-2)}

@media (max-width:900px){
  .pbleed{grid-template-columns:1fr}
  .times{gap:0}
  .time{flex:1 1 100%;border-bottom:1px solid var(--rule-soft)}
}

/* ================= ROUND 2: fixes from looking at the frame ================= */

/* the town needs room to be a place */
.town{height:clamp(400px,50vw,620px)}

/* the three ways: the row fills its width instead of leaving a hole */
.way{grid-template-columns:auto minmax(0,.82fr) minmax(0,1.25fr) auto;align-items:center}
.way-t{margin:0}
.way-d{margin-top:0;max-width:52ch}
@media (max-width:1080px){
  .way{grid-template-columns:auto 1fr auto}
  .way-d{margin-top:.4em}
}

/* the latest title comes from YouTube and can be long: never let it eat the band */
#latestTitle{font-size:clamp(2rem,4.4vw,3.9rem);line-height:.9}
.latest-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}

/* the river cards lift toward mid-screen — leave them somewhere to lift into */
.river{padding-bottom:clamp(52px,7vw,96px)}
.vid{transition:opacity .3s}

/* the Instagram panel is one wide band, not an orphaned card */
#igWrap{display:block}
#igWrap .soc-follow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,3vw,48px);align-items:end;
  border-top:2px solid var(--ink);padding-top:18px;
}
#igWrap .soc-follow .src{grid-column:1/-1}
#igWrap .soc-follow .btn{justify-self:end}
@media (max-width:700px){
  #igWrap .soc-follow{grid-template-columns:1fr}
  #igWrap .soc-follow .btn{justify-self:start}
}

/* the header has to fit a 390px phone with the call button on screen */
@media (max-width:620px){
  .hdr-in{gap:8px;padding-inline:16px}
  .brand{gap:8px}
  .brand img{width:36px;height:36px}
  .brand b{font-size:1.02rem}
  .hdr-end{gap:6px}
  .call{padding:.5em .62em}
  .give-btn{padding:.5em .78em;font-size:.86rem}
  .burger{width:40px;height:36px}
  .burger span{left:8px;right:8px}
  .burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:17px}.burger span:nth-child(3){top:23px}
}
@media (max-width:400px){
  .brand b{font-size:.92rem}
  .give-btn{padding:.5em .66em;font-size:.82rem}
}

/* the scrawl belongs beside the sentence it is annotating */
.hero-sub{align-items:flex-end}
.scrawl{margin-bottom:.15em}

/* ================= ROUND 3 ================= */
/* the three ways stack properly once the row is four cells wide */
@media (max-width:1080px){
  .way{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .way-d{grid-column:2;max-width:none}
}
/* the scrawl belongs under the sentence on a phone, not floated right */
@media (max-width:760px){
  .hero-sub{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-sub .lede{max-width:none}
  .scrawl{margin:0}
}
.town{height:clamp(440px,50vw,620px)}

/* ROUND 4 — every display headline sets its lines as lines, on every page.
   Without this the letter-drop leaves the lines inline and words split mid-word. */
.disp .ln{display:block;overflow:hidden}
.disp .ln>span{display:inline-block;will-change:transform}
.page-head .h1{max-width:14ch}
.give-hero .h1{max-width:13ch}

/* ROUND 5 — .sh is a <span>; aspect-ratio does nothing on an inline box, which
   was squeezing every YouTube still into a 4:3 crop and cutting the titles off. */
.vid .sh,.post .ph,.card-img{display:block}
.vid .sh{aspect-ratio:16/9}
.vid{display:block}
.vid-grid .vid{flex:none;width:100%}

/* ROUND 6 — an outline button on an ink ground was ink-on-ink: invisible. */
.devo .btn-out,.pbleed .btn-out,.scene-hud .btn-out{color:var(--paper);border-color:rgba(242,237,228,.55)}
.devo .btn-out:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ROUND 7 — the drawer links were inline and ran into one word. */
.drawer nav{display:flex;flex-direction:column;gap:0}
.drawer nav a{display:block}

/* ================= ROUND 8 — the scene belongs IN the hero =================
   Held beside the frozen Cannon's build, ours lost the first screen: the type
   was alone above the fold and the drawn town only arrived on scroll. The
   builds Danielle picked put the drawing and the headline in the same frame. */
@media (min-width:1081px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
    align-items:center;
    gap:clamp(20px,3vw,60px);
    min-height:min(calc(100svh - 120px),800px);
    max-height:calc(100svh - 76px);
    padding-top:0;
  }
  .hero-copy{
    max-width:none;margin:0;
    padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
    padding-right:0;padding-block:clamp(16px,1.8vw,26px);
  }
  .hero-copy .h1{font-size:clamp(3.4rem,6.4vw,7.6rem);max-width:11ch}
  .hero-copy .lede{max-width:36ch}
  .hero-sub{flex-direction:column;align-items:flex-start;gap:12px}
  .town-wrap{margin-top:0;align-self:stretch;display:flex}
  .town{height:100%;min-height:0;flex:1}
  .town-hud{left:clamp(16px,1.8vw,30px);bottom:clamp(16px,2vw,28px)}
  .town-hud .big{font-size:clamp(2.4rem,4.4vw,4.2rem)}
  .town-tap{right:clamp(16px,1.8vw,30px)}
  .town-done{top:clamp(24px,5vh,70px);font-size:clamp(1.2rem,2.1vw,2rem);width:min(90%,22ch)}
}

/* ================= ROUND 9 — SOUND AND THINGS TO PRESS ================= */

/* ---- scene controls: real buttons sitting on the drawing ---- */
.town-ctl{
  position:absolute;left:clamp(12px,1.6vw,22px);top:clamp(12px,1.6vw,22px);z-index:5;
  display:flex;flex-wrap:wrap;gap:8px;
}
.ctl{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:650;letter-spacing:.02em;
  color:var(--paper);background:rgba(10,13,24,.6);backdrop-filter:blur(8px);
  border:2px solid rgba(242,237,228,.35);padding:.5em .8em;
  transition:background .2s,border-color .2s,color .2s,transform .18s cubic-bezier(.2,1.4,.4,1);
}
.ctl:hover{background:rgba(10,13,24,.85);border-color:var(--lamp);color:var(--lamp)}
.ctl:disabled{opacity:.45;cursor:not-allowed}
.ctl svg{width:17px;height:17px;flex:none;fill:currentColor}
.ctl.is-on{border-color:var(--lamp);color:var(--lamp);background:rgba(10,13,24,.85)}
.ctl-bell:hover{border-color:var(--red-hot);color:#fff;background:var(--red)}
@keyframes bell-rang{0%{transform:none}18%{transform:rotate(-13deg) scale(1.06)}38%{transform:rotate(10deg)}58%{transform:rotate(-6deg)}78%{transform:rotate(3deg)}100%{transform:none}}
.motion-ok .ctl-bell.rang{animation:bell-rang .9s cubic-bezier(.3,.9,.3,1)}
@media (max-width:520px){
  .ctl{font-size:.74rem;padding:.45em .62em;gap:5px}
  .ctl .ctl-t{display:none}
  .ctl-bell .ctl-t{display:inline}
}

/* ---- a message still is now a play control ---- */
.vid-btn{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;
}
.vid-btn .sh{position:relative}
.vid-play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.vid-play svg{
  width:clamp(40px,4.4vw,58px);height:clamp(40px,4.4vw,58px);fill:#fff;
  background:var(--red);border-radius:50%;padding:clamp(9px,1vw,13px);
  transform:scale(.86);opacity:.9;transition:transform .32s cubic-bezier(.2,1.5,.4,1),opacity .25s;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}
.vid-btn:hover .vid-play svg,.vid-btn:focus-visible .vid-play svg{transform:scale(1);opacity:1}
.vid-out{
  display:inline-block;margin-top:.45em;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);
}
.vid-out:hover{color:var(--red);border-bottom-color:var(--red)}
#latestStill{display:block;width:100%;border:0;padding:0;background:#0B0D18;cursor:pointer;text-align:left}
.latest-out{display:inline-block;margin-left:14px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--lamp);text-decoration:none;border-bottom:1px solid rgba(232,161,58,.5)}

/* ---- the docked player ---- */
.np{
  position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:80;
  width:min(356px,calc(100vw - 24px));background:var(--dusk-2);color:var(--paper);
  border:2px solid rgba(242,237,228,.22);box-shadow:0 26px 70px -18px rgba(0,0,0,.72);
  transform:translateY(130%);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,1,.3,1),opacity .3s;
}
.np.is-open{transform:none;opacity:1;pointer-events:auto}
.np-vid{position:relative;aspect-ratio:16/9;background:#000}
.np-vid iframe{width:100%;height:100%;display:block;border:0}
.np-unmute{
  position:absolute;inset:auto 0 0;margin:0 auto 12px;display:block;width:max-content;
  font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;
  background:var(--red);color:#fff;border:0;padding:.6em 1.1em;
}
.np-bar{display:flex;align-items:center;gap:8px;padding:9px 10px}
.np-mid{flex:1;min-width:0}
.np-title{
  display:block;font-family:"Staatliches",sans-serif;text-transform:uppercase;
  font-size:1rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.np-row{display:flex;align-items:center;gap:7px;margin-top:3px}
.np-t{font-size:.7rem;color:rgba(242,237,228,.6);font-variant-numeric:tabular-nums;flex:none}
.np-seek{flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;background:rgba(242,237,228,.25);cursor:pointer}
.np-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--lamp);cursor:pointer}
.np-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--lamp);cursor:pointer}
.np-btn{
  flex:none;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(242,237,228,.3);color:var(--paper);
  font:inherit;font-size:.85rem;text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.np-btn:hover{background:var(--lamp);border-color:var(--lamp);color:#20180A}
.np-play{width:40px;height:40px;background:var(--red);border-color:var(--red)}
.np-play:hover{background:var(--lamp);border-color:var(--lamp)}
.np.is-paused-resume .np-title::after{content:" \00b7 paused";opacity:.6;font-size:.8em}
body.has-np{padding-bottom:0}
@media (max-width:560px){
  .np{right:6px;left:6px;bottom:6px;width:auto}
  .np-title{font-size:.92rem}
}

/* ---- today's reading ---- */
.devo-read{padding:clamp(46px,7vw,100px) 0;border-top:1px solid var(--rule)}
.devo-read .wrap{max-width:min(var(--wrap),920px)}
.devo-read .devo-ref{
  font-family:"Shantell Sans",cursive;color:var(--red);font-size:clamp(1rem,1.7vw,1.25rem);margin:.2em 0 1em;
}
.devo-scripture{
  margin:0 0 clamp(20px,3vw,34px);padding-left:clamp(14px,2vw,26px);
  border-left:4px solid var(--red);font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.45;font-weight:450;
}
.devo-body p{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink-2);max-width:62ch}
.devo-prayer,.devo-q{max-width:62ch;color:var(--ink-2)}
.devo-prayer{
  margin-top:clamp(18px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--rule);
  font-family:"Shantell Sans",cursive;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink);
}
.devo-q{margin-top:1em;font-weight:600;color:var(--ink)}
.devo-controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,3vw,36px);padding-top:18px;border-top:2px solid var(--ink);
}
.devo-prog{flex:1 1 180px;min-width:120px;height:6px;background:var(--paper-2);overflow:hidden}
.devo-prog span{display:block;height:100%;width:0;background:var(--red);transition:width .18s linear}
#devoMeta,#devoState{font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;font-weight:650;color:var(--ink-2)}
#devoState{font-family:"Shantell Sans",cursive;text-transform:none;letter-spacing:0;color:var(--red);font-size:.98rem}
.devo-read:not(.is-ready) .devo-body,.devo-read:not(.is-ready) .devo-scripture{opacity:.35}

/* ================= ROUND 10 — five minutes a day, where it can be seen ====== */
.five{padding:clamp(44px,6vw,90px) 0;border-bottom:1px solid var(--rule)}
.five-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,64px);align-items:center}
.five-scene{position:relative}
.five-timer{height:clamp(300px,34vw,460px)}
.five-copy .h2{margin-bottom:.35em}
.five-lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);max-width:44ch;margin-bottom:1.4em}
.five-copy #devoTitle{margin-top:.2em}
.five .devo-scripture{font-size:clamp(1.05rem,1.7vw,1.3rem);margin-bottom:1em}
.five .devo-body p{font-size:1.02rem}
.five.is-compact .devo-body{
  max-height:9.2em;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);
}
.five.is-compact .devo-prayer,.five.is-compact .devo-q{display:none}
.five .lnk{margin-top:1.2em}
@media (max-width:1000px){
  .five-grid{grid-template-columns:1fr}
  .five-timer{height:clamp(260px,52vw,380px)}
}
/* the scene controls must never sit on the banner on a small screen */
@media (max-width:620px){
  .town-ctl{top:auto;bottom:clamp(58px,11vw,74px);left:clamp(10px,3vw,18px)}
  .town-done{top:clamp(10px,3vw,18px);font-size:clamp(1rem,4.2vw,1.4rem)}
}

/* the word being spoken, lit as it is said */
.devo-body .w,.devo-scripture .w,.devo-q .w,.devo-prayer .w,#devoTitle .w,#devoRef .w{
  transition:background-color .12s,color .12s;border-radius:.16em;
}
.w.now{background:var(--lamp);color:#20180A;box-shadow:0 0 0 .12em var(--lamp)}

/* ROUND 11 — the finished-town banner must clear the scene controls */
@media (min-width:1081px){
  .town-done{top:clamp(74px,10vh,104px);width:min(86%,20ch)}
}

/* ================= ROUND 12 — the five-minutes block had 600px of dead air ==
   The copy column runs ~1060px and the timer was pinned at 460px with
   align-items:center, so ~300px of nothing sat above the timer and ~300px
   below it. The canvas now stretches to the row, which removes the gap
   entirely and makes the hourglass the tall object it should have been. */
.five-grid{align-items:stretch}
.five-scene{align-self:stretch;display:flex;min-height:0}
.five-timer{height:100%;flex:1;min-height:clamp(320px,44vh,540px)}
.five-copy{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(8px,1.5vw,28px)}
@media (max-width:1000px){
  .five-grid{align-items:start}
  .five-scene{align-self:auto}
  .five-timer{height:clamp(280px,56vw,400px);min-height:0}
  .five-copy{justify-content:flex-start;padding-block:0}
}

/* ROUND 13 — the "move the controls to the bottom" rule was written for the
   town banner and was dragging the timer's speaker button onto the hourglass. */
@media (max-width:620px){
  .five-scene .town-ctl,.scene-wrap .town-ctl{top:clamp(10px,3vw,18px);bottom:auto}
}

/* ================= ROUND 14 — the five-minutes block, recomposed ===========
   Stretching the canvas to kill a measured gap just turned the gap into a tall
   empty brown box with the glass sunk at the bottom. The headline now runs full
   width like every other section head here, and under it sit two columns of
   comparable height: the glass at its own size, today's reading beside it. */
.five{padding:clamp(44px,6vw,92px) 0;border-bottom:1px solid var(--rule)}
.five-head{max-width:46ch;margin-bottom:clamp(26px,3.6vw,52px)}
.five-head .h2{margin-bottom:.3em}
.five-lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-2);max-width:52ch;margin:0}
.five-grid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(22px,3.4vw,58px);align-items:start;
}
.five-scene{position:relative;align-self:start;display:block}
.five-timer{
  display:block;width:100%;height:clamp(300px,31vh,430px);min-height:0;
  border-radius:2px;
}
.five-cap{
  margin:10px 0 0;font-family:"Shantell Sans",cursive;color:var(--ink-2);
  font-size:clamp(.92rem,1.2vw,1.04rem);
}
.five-copy{display:block;justify-content:flex-start;padding-block:0}
.five-copy .h3{margin-bottom:.15em}
.five .devo-scripture{font-size:clamp(1.05rem,1.55vw,1.28rem);margin-bottom:1em}
.five .devo-body p{font-size:1.02rem}
.five .devo-controls{margin-top:clamp(18px,2.4vw,30px)}
/* on /daily/ the reading runs long, so the glass rides along beside it */
.five:not(.is-compact) .five-scene{position:sticky;top:92px}
@media (max-width:1000px){
  .five-grid{grid-template-columns:1fr}
  .five:not(.is-compact) .five-scene{position:static}
  .five-timer{height:clamp(260px,52vw,380px)}
}

/* ---- one social section ---- */
.soc-head{align-items:flex-end}
.soc-follow-links{max-width:42ch}
.soc-btns{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0 0}
.soc-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ROUND 15 — the head was capped at 46ch of BODY text, which is far too narrow
   for a 115px display line, so the headline broke over four lines on a 14".
   The line gets the room it needs; only the lede is measured. */
.five-head{max-width:none}
.five-head .h2{max-width:none;font-size:clamp(2.4rem,5.6vw,5.4rem)}
.five-lede{max-width:56ch}
.five-timer{height:clamp(300px,38vh,440px)}
@media (max-width:1000px){.five-timer{height:clamp(260px,52vw,380px)}}

/* the mute that is always within reach once anything is playing */
.snd-float{
  position:fixed;left:clamp(10px,2vw,22px);bottom:clamp(10px,2vw,22px);z-index:85;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:700;letter-spacing:.02em;
  color:var(--paper);background:var(--red);border:2px solid var(--red);
  padding:.55em .85em;
  transform:translateY(160%);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.2,1,.3,1),opacity .25s,background .2s;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);
}
.snd-float.is-up{transform:none;opacity:1;pointer-events:auto}
.snd-float:hover{background:var(--ink);border-color:var(--ink)}
.snd-float svg{width:17px;height:17px;fill:currentColor;flex:none}
@media (max-width:560px){.snd-float span{display:none}.snd-float{padding:.6em}}

/* ================= ROUND 16 — the ambient ground =================
   One shared layer behind every light section, so no large calm area is ever
   inert. Same world as the dusk town: dust turning in lamplight, a warm pool
   that follows the hand, embers of the same gold. It draws nothing where the
   type is dense enough to matter and it never takes a click. */
.ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body>main,body>footer{position:relative;z-index:1}

/* ================= ROUND 17 — the choice =================
   "The church left the building" is the whole pitch, and the three ways were
   the least interactive thing on the page. They are now a switch you throw,
   and the dusk town answers by lighting that part of itself. */
.pick{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);
  margin:clamp(24px,3.4vw,46px) 0 0;
}
.pick-btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  font:inherit;text-align:left;cursor:pointer;color:var(--ink);
  background:transparent;border:2px solid var(--ink);
  padding:clamp(16px,2vw,26px);isolation:isolate;overflow:hidden;
  transition:color .25s,border-color .25s,transform .3s cubic-bezier(.2,1.4,.4,1);
}
.pick-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.9,.25,1);
}
.pick-btn:hover::before,.pick-btn:focus-visible::before{transform:translateY(0)}
.pick-btn:hover,.pick-btn:focus-visible{color:var(--paper);transform:translateY(-3px)}
.pick-btn[aria-pressed="true"]{border-color:var(--red);color:var(--paper)}
.pick-btn[aria-pressed="true"]::before{background:var(--red);transform:translateY(0)}
.pick-ic{display:block;width:clamp(40px,4vw,58px);height:clamp(40px,4vw,58px)}
.pick-ic svg{width:100%;height:100%}
.pick-ic svg path[stroke]{stroke:currentColor}
.pick-ic svg path[fill="#A4140A"]{fill:var(--red)}
.pick-btn:hover .pick-ic svg path[fill="#A4140A"],
.pick-btn[aria-pressed="true"] .pick-ic svg path[fill="#A4140A"]{fill:var(--lamp)}
.pick-t{
  font-family:"Staatliches",sans-serif;text-transform:uppercase;line-height:.95;
  font-size:clamp(1.5rem,2.8vw,2.5rem);
}
.pick-s{font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;font-weight:650;opacity:.7}

.answer{
  margin-top:clamp(18px,2.4vw,30px);border-top:2px solid var(--ink);
  padding-top:clamp(18px,2.4vw,30px);min-height:clamp(150px,17vw,210px);
}
.answer-in{max-width:62ch}
.answer-k{
  font-family:"Shantell Sans",cursive;color:var(--red);margin:0 0 .3em;
  font-size:clamp(.95rem,1.3vw,1.1rem);
}
.answer .h3{font-size:clamp(1.7rem,3.4vw,3rem);margin-bottom:.35em}
.answer-b{color:var(--ink-2);font-size:clamp(1.02rem,1.35vw,1.16rem);margin-bottom:1em}
.answer-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.motion-ok .answer.is-swapping .answer-in{opacity:0;transform:translateY(12px)}
.answer-in{transition:opacity .28s,transform .38s cubic-bezier(.2,1,.3,1)}
@media (max-width:820px){
  .pick{grid-template-columns:1fr}
  .pick-btn{flex-direction:row;align-items:center;gap:14px}
  .pick-ic{flex:none;width:42px;height:42px}
  .pick-t{font-size:1.5rem}
  .pick-s{display:none}
}

/* ================= ROUND 18 — when and where, no longer inert =================
   The two gatherings are different things, so they are buttons you pick, and
   the countdown retargets to whichever you choose. The road from /visit/ comes
   into the section so the facts sit beside a drawing instead of flat ground. */
.when-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(22px,3.4vw,58px);align-items:center}
.when-grid.is-plain{grid-template-columns:1fr}
.when-facts{min-width:0}
.arrive{position:relative}
.arrive .scene{height:clamp(300px,34vh,440px)}
.times{border-top:2px solid var(--ink)}
.time{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:0;border-bottom:1px solid var(--rule-soft);
  padding:clamp(14px,2vw,24px) 0;position:relative;isolation:isolate;
  transition:color .25s,padding-left .3s cubic-bezier(.2,.9,.3,1);
}
.time::before{
  content:"";position:absolute;inset:0 -18px;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .38s cubic-bezier(.2,.9,.25,1);
}
.time:hover::before,.time:focus-visible::before{transform:scaleY(1)}
.time:hover,.time:focus-visible{color:var(--paper);padding-left:14px}
.time[aria-pressed="true"]{color:var(--paper);padding-left:14px}
.time[aria-pressed="true"]::before{background:var(--red);transform:scaleY(1)}
.time b{color:inherit}
.time[aria-pressed="true"] b,.time:hover b{color:rgba(242,237,228,.8)}
.time-note{
  margin:14px 0 0;font-family:"Shantell Sans",cursive;color:var(--red);
  font-size:clamp(.95rem,1.3vw,1.1rem);min-height:0;opacity:0;
  transition:opacity .3s;
}
.time-note.is-on{opacity:1}
@media (max-width:1000px){
  .when-grid{grid-template-columns:1fr}
  .arrive .scene{height:clamp(240px,48vw,340px)}
}

/* ROUND 19 — proportions in when-and-where, from looking at it at 1512 */
.times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(14px,2vw,30px);border-top:2px solid var(--ink)}
.when-facts .time .t{font-size:clamp(2.4rem,4.6vw,4.4rem);white-space:nowrap}
.when-facts .time b{font-size:clamp(.82rem,1vw,1rem);letter-spacing:.14em;text-transform:uppercase}
.time{padding:clamp(12px,1.6vw,20px) 0}
.time::before{inset:0 -14px}
/* the counter was sitting on top of the parked cars */
.arrive .scene-hud{
  left:auto;right:clamp(12px,1.8vw,20px);bottom:auto;top:clamp(12px,1.8vw,20px);
  flex-direction:row-reverse;text-align:right;align-items:center;
}
.arrive .scene-hud .cap{max-width:15ch}
.arrive .scene-hud .big{font-size:clamp(1.8rem,3.4vw,3rem)}
@media (max-width:560px){
  .times{grid-template-columns:1fr}
  .when-facts .time .t{font-size:clamp(2.6rem,13vw,3.6rem)}
}

/* ROUND 20 — /about/ and /give/ get something that answers a tap */
.climb-scene{height:clamp(280px,32vh,420px)}
.give-lights{margin-top:clamp(28px,4vw,56px)}
.give-lights .scene{height:clamp(260px,30vh,380px);background:linear-gradient(#141826 0%,#0D1020 100%)}
.give-lights .scene-hud,.climb-scene+.scene-hud{left:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,20px)}
.scene-hud .cap{font-family:"Shantell Sans",cursive}

/* ROUND 21 — the give caption was sitting on the bulb labels */
.give-lights .scene-hud{left:auto;right:clamp(12px,2vw,22px);bottom:auto;top:clamp(12px,2vw,20px);text-align:right}
.give-lights .scene-hud .cap{max-width:20ch}

/* ROUND 22 — the reading arriving, instead of three columns of text */
.arrives{position:relative;margin-bottom:clamp(18px,2.6vw,32px)}
.arrives .scene{height:clamp(220px,26vh,320px);background:linear-gradient(#1B2033 0%,#101423 100%)}
.arrives-cap{
  margin:10px 0 0;font-family:"Shantell Sans",cursive;color:var(--lamp);
  font-size:clamp(.92rem,1.2vw,1.04rem);
}
.route{transition:background .3s,border-color .3s}
.route.is-lit{background:rgba(232,161,58,.07)}
.route.is-lit h3{color:var(--lamp)}

/* ROUND 23 — the routes are controls now, not text columns */
.arrives .scene{height:clamp(260px,32vh,400px)}
.routes{grid-template-columns:repeat(3,minmax(0,1fr))}
.route h3{margin-bottom:.5em}
.route .devo-form{margin-top:.2em}
@media (max-width:820px){.routes{grid-template-columns:1fr}}


/* ================= ROUND 24 — the Bible replaces the hourglass in "Five minutes" =================
   The drawn book from alanbaggett.com: reading on the left page, scripture on the right,
   the recording lights each word across both. */
:root{--page:#FCF8EF}
.five-book{width:100%;margin:clamp(18px,3vw,34px) 0 0}
.book{position:relative;height:clamp(440px,48vw,640px);display:grid;grid-template-columns:1fr 1fr;perspective:2200px;filter:drop-shadow(0 40px 40px rgba(20,16,10,.28))}
.cover{position:absolute;top:-14px;bottom:-14px;width:calc(50% + 14px);background:linear-gradient(135deg,#3A2A2B,#1F1717);border-radius:12px 4px 4px 12px}
.cover.left{left:-14px}
.cover.right{right:-14px;border-radius:4px 12px 12px 4px;background:linear-gradient(225deg,#3A2A2B,#1F1717)}
.page{position:relative;background:var(--page);overflow:hidden}
.page.left{border-radius:4px 0 0 4px;box-shadow:inset -30px 0 40px -30px rgba(0,0,0,.25),inset 0 0 40px rgba(0,0,0,.05)}
.page.right{border-radius:0 4px 4px 0;box-shadow:inset 30px 0 40px -30px rgba(0,0,0,.25),inset 0 0 40px rgba(0,0,0,.05)}
.page-in{padding:clamp(20px,3vw,44px) clamp(20px,3.4vw,50px);height:100%;overflow:auto;font-family:"Gantari",system-ui,sans-serif;font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;color:#2A2622}
.page-in .ref{margin:0 0 12px;color:var(--red);font:600 12px/1 "Gantari",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.page-in .devo-title{font-family:"Staatliches",Impact,sans-serif;font-weight:400;font-size:clamp(30px,3vw,46px);line-height:.98;margin:0 0 6px;letter-spacing:.01em;color:var(--ink)}
.page-in .devo-meta{margin:0 0 16px;color:var(--red);font:600 12px/1.4 "Gantari",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.page-in .devo-body p{font-size:inherit;color:inherit;max-width:none;margin:0 0 .8em}
.page-in .devo-q{font-weight:650;color:var(--ink);max-width:none;margin:.4em 0 0}
.page-in .devo-pray{margin-top:22px}
.page-in .devo-prayer{max-width:none;margin:0;font-style:normal;color:inherit;border:0;padding:0}
.page-in .devo-scripture{margin:0 0 14px;padding:2px 4px;font-size:inherit;font-style:normal;border:0;background:linear-gradient(180deg,rgba(164,20,10,0) 15%,rgba(164,20,10,.14) 16%,rgba(164,20,10,.14) 88%,rgba(164,20,10,0) 89%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.verses p{margin:0 0 10px}
.verses sup{font:700 11px "Gantari",sans-serif;color:var(--red);margin-right:5px}
.page-in .w{border-radius:3px;transition:background .12s,color .12s}
.page-in .w.now{background:var(--red);color:#fff;padding:0 3px;margin:0 -3px;box-shadow:none}
.pgnum{text-align:right;margin:14px 0 0;color:#9A9080;font:500 12px "Gantari",sans-serif;letter-spacing:.1em;text-transform:uppercase}
.flip{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(0deg);pointer-events:none;opacity:0}
.flip.go{opacity:1;animation:bookflip .9s cubic-bezier(.4,.1,.3,1) forwards}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--page);box-shadow:inset 0 0 40px rgba(0,0,0,.08)}
.flip-face.back{transform:rotateY(180deg);background:#F3EDDF}
@keyframes bookflip{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}
.ribbon{position:absolute;left:calc(50% - 8px);top:-14px;width:16px;height:64%;background:var(--red);border-radius:0 0 2px 2px;box-shadow:0 6px 10px rgba(0,0,0,.25);clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.five .book-ui{margin-top:clamp(26px,3vw,40px)}
.five .five-cap{flex-basis:100%;margin:0;color:var(--ink-2)}
.five.is-compact .devo-body{max-height:none;overflow:visible;display:block;-webkit-line-clamp:unset;mask:none;-webkit-mask:none}
.five.is-compact .devo-prayer,.five.is-compact .devo-q{display:block}
.five .devo-read:not(.is-ready) .devo-body{opacity:1}
@media (max-width:820px){
  .book{grid-template-columns:1fr;height:auto;gap:16px;filter:none}
  .cover,.flip,.ribbon{display:none}
  .page.left,.page.right{border-radius:8px;min-height:240px;box-shadow:0 20px 40px rgba(20,16,10,.16)}
  .page-in{height:auto;max-height:64vh}
}


/* ================= ROUND 25 — the header shows the latest Facebook post; the town moved to Three ways =================
   Danielle: "change the animation to the most recent Facebook image, without the text. If it's stale cycle an old one." */
.hero-post{position:relative;margin-top:clamp(20px,3vw,44px);aspect-ratio:1/1;width:100%;background:#0E1120;overflow:hidden}
.hero-post-a{position:absolute;inset:0;display:block}
.hero-post-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.4s ease}
.hero-post-img.is-on{opacity:1}
@media (min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(24px,3.5vw,56px);padding-top:0;min-height:0;max-height:none;padding-bottom:clamp(24px,3vw,48px)}
  .hero-copy{margin:0;max-width:none;padding-right:0;padding-block:clamp(24px,3vw,48px)}
  .hero-post{margin:0;align-self:center;max-width:min(100%,calc(100vh - 140px))}
}
.three .town-wrap{margin:clamp(22px,3.5vw,48px) 0 0}
.three > .wrap + .town-wrap + .wrap{padding-top:clamp(22px,3.5vw,48px)}


/* ================= ROUND 26 — the road between sections, and the walkers behind everything =================
   Danielle: "all this white space needs animation in the background… and the divider between each section
   needs to be a cool animation because now it's either a small straight line or a block of space." */
.divider{position:relative;z-index:1;height:clamp(110px,12vw,190px);margin:0;pointer-events:none}
.divider-cv{display:block;width:100%;height:100%}
.five,.prose-sec,.devo-read{border-top:0;border-bottom:0}
.five{padding-top:clamp(20px,3vw,44px)}
@media (max-width:820px){
  .route{padding-block:18px}
  .route .soon{margin-top:.15em}
  .divider{height:96px}
}


/* ================= ROUND 27 — About: the pastors beside their names, like Red River =================
   Danielle: "make this page more like redriver where the text is on the left and the picture is on the right" */
.about-hero{padding-bottom:clamp(26px,4vw,52px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,4vw,64px);align-items:center}
.about-hero .h1{font-size:clamp(3.2rem,8.2vw,8.8rem);max-width:none}
.about-pull{margin-top:clamp(18px,2.4vw,30px);max-width:34ch}
.about-pull p{color:var(--ink-2)}
.about-pull cite{color:var(--red)}
.about-photo{margin:0;justify-self:end;width:100%;max-width:min(100%,calc(82vh * 0.828))}
.about-photo img{display:block;width:100%;height:auto}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:none;justify-self:stretch}
}

.about-pull p{font-size:clamp(1.15rem,2.1vw,1.75rem);color:var(--ink);margin-bottom:.4em}


/* ================= ROUND 30 — minis over the copy columns, the night picker =================
   Danielle: "these need graphics and animation that make sense" (the three-column blocks on Visit and About),
   "lots of blank space to the right… you got an animation to put there or something interactive?" (Start one). */
canvas.mini{display:block;width:100%;height:clamp(120px,11vw,170px);margin:0 0 14px;touch-action:manipulation}
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:8px}
.nights{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1vw,12px);margin-top:14px}
.nights button{background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:8px;color:rgba(242,237,228,.7);font:600 .82rem "Gantari",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nights .house{position:relative;width:100%;aspect-ratio:1/1.1;display:block}
.nights .house i{position:absolute;display:block}
.nights .roof{left:0;right:0;top:0;height:42%;background:#2A3049;clip-path:polygon(50% 0,100% 100%,0 100%)}
.nights .wall{left:10%;right:10%;top:40%;bottom:0;background:#1E2338}
.nights .win{left:34%;width:32%;top:55%;height:26%;background:#2C3350;transition:background .35s,box-shadow .35s}
.nights .door{left:42%;width:16%;top:74%;bottom:0;background:#141A2E}
.nights button:hover .win{background:#4A4A5E}
.nights button.on .win{background:var(--lamp-2);box-shadow:0 0 22px 6px rgba(240,178,74,.55)}
.nights button.on{color:var(--lamp-2)}
.nights button:hover .house{transform:translateY(-3px)}
.nights .house{transition:transform .25s}
.nights-note{margin-top:14px;color:rgba(242,237,228,.75);font-size:1rem}
@media (max-width:820px){.start-grid{grid-template-columns:1fr}.nights{gap:4px}.nights button{font-size:.7rem}}


/* ================= ROUND 31 =================
   Home Church hero video, the Page's prints instead of the reel, the big clock on when-and-where,
   Daily minis, one sound switch on every page. */
.hc-hero{position:relative;overflow:hidden;background:var(--dusk);color:var(--paper);padding-bottom:0}
.hc-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.9)}
.hc-hero .hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,16,32,.92) 0%,rgba(13,16,32,.78) 45%,rgba(13,16,32,.35) 100%)}
.hc-hero .wrap{position:relative;z-index:2;padding-block:clamp(40px,7vw,100px) clamp(30px,5vw,60px)}
.hc-hero .h1{font-size:clamp(3rem,8.5vw,8.6rem);max-width:none;color:var(--paper)}
.hc-hero .h1 .red{color:var(--lamp)}
.hc-hero .kicker{color:var(--lamp)}.hc-hero .kicker::before{background:var(--lamp)}
.hc-hero .lede{color:rgba(242,237,228,.85)}.hc-hero .lede b{color:#fff}
.hc-hero .scrawl{color:var(--lamp-2)}
.hc-hero .scene-wrap{position:relative;z-index:2;margin-top:0}
@media (prefers-reduced-motion:reduce){.hc-hero .hero-video{display:none}}
.feed-band{padding:clamp(30px,5vw,60px) 0;overflow:hidden}
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.feed-hint{color:var(--muted);font-size:1rem;margin:0}
.feed-track{display:flex;gap:clamp(12px,2vw,26px);padding:30px var(--gut) 34px;overflow-x:auto;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.feed-track::-webkit-scrollbar{display:none}
.feed-track:active{cursor:grabbing}
.print{flex:none;width:clamp(170px,20vw,250px);background:#fff;padding:9px 9px 30px;box-shadow:0 18px 40px -18px rgba(20,16,10,.5),0 2px 6px rgba(20,16,10,.12);transform:rotate(var(--r)) translateY(40px);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.3,1.1) var(--d),opacity .5s var(--d);text-decoration:none;color:var(--ink-2);position:relative}
.feed-track.in .print{transform:rotate(var(--r)) translateY(0);opacity:1}
.print:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:2}
.print img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#111;pointer-events:none}
.print .hand{position:absolute;left:12px;bottom:6px;font-size:.95rem;color:var(--ink-2)}
.print::before{content:"";position:absolute;left:50%;top:-10px;width:56px;height:18px;margin-left:-28px;background:rgba(232,161,58,.55);transform:rotate(-3deg)}
.when-grid.has-clock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(22px,4vw,64px);align-items:center}
.when-clock{display:grid;gap:14px;justify-items:center}
.clock-scene{width:min(100%,420px);aspect-ratio:1/1;height:auto;display:block}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:440px}
.week .wk{display:grid;justify-items:center;gap:4px;font:600 .72rem "Gantari",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.week .wk i{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule);background:transparent;transition:all .3s}
.week .wk.svc i{border-color:var(--red)}
.week .wk.today i{background:var(--ink);border-color:var(--ink)}
.week .wk.next i{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(164,20,10,.18);animation:wkpulse 1.8s ease-in-out infinite}
.week .wk.next b{color:var(--red)}
.week .wk small{font-size:.62rem;letter-spacing:.02em;text-transform:none;min-height:1em}
@keyframes wkpulse{0%,100%{box-shadow:0 0 0 4px rgba(164,20,10,.18)}50%{box-shadow:0 0 0 9px rgba(164,20,10,.06)}}
.when-clock .tkt{width:100%;max-width:440px}
@media (max-width:900px){.when-grid.has-clock{grid-template-columns:1fr}.when-clock{justify-items:start}.clock-scene{width:min(100%,320px)}}
.snd-fab{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1.5px solid rgba(242,237,228,.5);background:rgba(20,20,24,.86);color:var(--paper);font:600 .85rem "Gantari",sans-serif;cursor:pointer;backdrop-filter:blur(6px);border-radius:999px}
.snd-fab svg{width:18px;height:18px;fill:currentColor}
.snd-fab[aria-pressed="true"]{border-color:var(--lamp);color:var(--lamp-2)}
@media (max-width:620px){.snd-fab{bottom:12px;right:12px;padding:9px 12px}.snd-fab .ctl-t{display:none}}


/* ROUND 32 — About: the portrait melts into the paper instead of sitting in a block (Danielle: "add an overlay… less like a block") */
.about-hero{overflow:hidden}
.about-photo{justify-self:end;max-width:none;width:100%;margin-right:calc(-1 * max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)))}
.about-photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(0deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(0deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;mask-composite:intersect;filter:saturate(.96) contrast(1.02)}
@media (max-width:820px){.about-photo{margin-right:0;width:100%}.about-photo img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 18%);mask-image:linear-gradient(0deg,transparent 0,#000 18%)}}


/* ROUND 33 — About: the portrait as one of the site's prints, close to the names, not a bleed */
.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center}
.about-photo{justify-self:center;margin:0;width:100%;max-width:min(100%,440px);background:#fff;padding:12px 12px 46px;box-shadow:0 34px 60px -28px rgba(20,16,10,.55),0 2px 8px rgba(20,16,10,.12),0 0 140px 30px rgba(240,178,74,.18);transform:rotate(-2.2deg);position:relative;animation:printin 1.1s cubic-bezier(.2,.9,.3,1.15) both}
.about-photo img{display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none;filter:saturate(.96) contrast(1.02)}
.about-photo::before{content:"";position:absolute;left:50%;top:-12px;width:110px;height:26px;margin-left:-55px;background:rgba(232,161,58,.6);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.about-photo::after{content:"Alan & Teresa";position:absolute;left:16px;bottom:10px;font-family:"Shantell Sans",cursive;font-weight:600;font-size:1.1rem;color:var(--ink-2)}
.about-photo:hover{transform:rotate(0) translateY(-4px);transition:transform .35s}
@keyframes printin{0%{transform:rotate(-6deg) translateY(50px);opacity:0}70%{transform:rotate(-1.2deg) translateY(-6px);opacity:1}100%{transform:rotate(-2.2deg) translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.about-photo{animation:none}}
@media (max-width:820px){.about-photo{margin:10px auto 0;max-width:min(100%,380px);transform:rotate(-1.5deg)}}

/* ================= Nov 4 2026 — design toggle (shared with todaysvictory.church; source tools/tvdt.css) ================= */
.tvdt{position:fixed!important;left:calc(12px + env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:calc(var(--tvdt-lift,0px) + var(--tvdt-nudge,0px) + 12px + env(safe-area-inset-bottom))!important;z-index:2147483000!important;display:flex!important;gap:2px!important;margin:0!important;padding:3px!important;width:auto!important;max-width:calc(100vw - 24px)!important;border:0!important;border-radius:999px!important;background:rgba(20,20,20,.82)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 20px rgba(0,0,0,.28)!important;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;letter-spacing:normal!important;text-transform:none!important;transition:opacity .2s,visibility .2s,bottom .25s;opacity:1;visibility:visible}
.tvdt a.tvdt-a,.tvdt a.tvdt-a:visited{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;margin:0!important;padding:0 16px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#fff!important;font:inherit!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:none!important;opacity:1!important;outline:none;-webkit-tap-highlight-color:transparent}
.tvdt a.tvdt-a span{display:inline!important;font:inherit!important;color:inherit!important}
.tvdt a.tvdt-a:hover{background:rgba(255,255,255,.14)!important}
.tvdt a.tvdt-a[aria-current="page"]{background:#fff!important;color:#141414!important;font-weight:600!important}
.tvdt a.tvdt-a:focus-visible{box-shadow:0 0 0 2px #141414,0 0 0 4px #fff!important}
.tvdt.tvdt-wait{opacity:0;visibility:hidden}
@media (max-width:760px){.tvdt{left:auto!important;right:calc(12px + env(safe-area-inset-right))!important}.tvdt a.tvdt-a{min-height:40px!important;padding:0 13px!important;font-size:12px!important}}
@media print{.tvdt{display:none!important}}
/* alt site: on phones the pill docks bottom-right, so it rides above the round sound button there;
   on desktop it sits bottom-left, so the "Sound off" mute that pops up bottom-left moves above it */
/* the hero buttons fill the bottom-left on desktop, so here the pill docks bottom-right at every
   width, riding just above the round site-wide sound button */
.tvdt{left:auto!important;right:calc(12px + env(safe-area-inset-right))!important;--tvdt-lift:52px}
@media (min-width:621px){.tvdt{--tvdt-lift:56px}}
/* the docked sermon player sits bottom-right; on phones it is full width, so the pill steps aside */
@media (max-width:760px){body.has-np .tvdt{opacity:0;visibility:hidden}}

/* ================= Nov 4 2026 — Pick one: the panel holds its height ================= */
.answer{min-height:clamp(250px,22vw,290px)}
@media (max-width:820px){.answer{min-height:360px}}
.answer-cta .btn{margin:0}

/* ================= Nov 4 2026 — When and where photo (replaced the parking-lot scene) ================= */
.when-photo{margin:0;position:relative;overflow:hidden;aspect-ratio:4/4.2;background:var(--dusk)}
.when-photo img{width:100%;height:100%;object-fit:cover;display:block;animation:tvKen 26s ease-in-out infinite alternate}
.when-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(0deg,rgba(13,16,32,.86),rgba(13,16,32,0));color:var(--paper);font:600 .82rem "Gantari",sans-serif;letter-spacing:.1em;text-transform:uppercase}
@keyframes tvKen{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.when-photo img{animation:none}}
.visit-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px);padding-bottom:clamp(30px,5vw,60px)}
.visit-photos img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.visit-photos img:nth-child(2){transform:translateY(clamp(10px,2.4vw,34px))}
.visit-photos img:hover{transform:translateY(-6px)}
@media (max-width:620px){.visit-photos{grid-template-columns:1fr 1fr}.visit-photos img:nth-child(3){display:none}.visit-photos img:nth-child(2){transform:none}}

/* ================= Nov 4 2026 — Watch: recent sermons (replaced the wall of screens) ================= */
.recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
@media (max-width:900px){.recent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.recent-grid{grid-template-columns:1fr}}
.rc{display:block;text-align:left;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;opacity:0;transform:translateY(26px);transition:opacity .6s calc(var(--i,0)*70ms),transform .7s cubic-bezier(.2,1,.3,1) calc(var(--i,0)*70ms)}
.recent-grid.in .rc{opacity:1;transform:none}
.recent-grid.in .rc:hover,.recent-grid.in .rc:focus-visible{transform:translateY(-6px)}
.rc-sh{position:relative;display:block;aspect-ratio:16/9;background:#101322 center/cover no-repeat;border:6px solid #1A1D2B;border-radius:6px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);transition:box-shadow .35s,border-color .35s}
.rc:hover .rc-sh,.rc:focus-visible .rc-sh{border-color:var(--red);box-shadow:0 26px 50px -20px rgba(164,20,10,.45)}
.rc .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.rc b{display:block;margin-top:.7em;font-weight:650;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.25}
.rc i{display:block;font-style:normal;color:var(--ink-2);font-size:.84rem;letter-spacing:.09em;text-transform:uppercase;margin-top:.35em}
@media (prefers-reduced-motion:reduce){.rc{opacity:1;transform:none;transition:none}}
.ytm{position:fixed;inset:0;z-index:2147483100;background:rgba(8,9,16,.9);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ytm.on{opacity:1;visibility:visible}
.ytm-in{position:relative;width:min(1100px,100%)}
.ytm-v{aspect-ratio:16/9;background:#000}
.ytm-v iframe{width:100%;height:100%;border:0;display:block}
.ytm-t{color:var(--paper);margin-top:12px;font-weight:600}
.ytm-x{position:absolute;right:0;top:-48px;width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(242,237,228,.5);background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
html.ytm-open{overflow:hidden}
html.ytm-open .tvdt{opacity:0;visibility:hidden}

/* ================= Nov 4 2026 — Church at Home: weekly guide, Start One, Find one ================= */
.hcw{margin-top:clamp(10px,2vw,24px)}
.hcw-wait{color:var(--ink-2)}
.hcw-top{border-top:2px solid var(--ink);padding-top:clamp(18px,2.4vw,30px);max-width:70ch}
.hcw-eb{font:700 .8rem "Gantari",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.hcw-title{margin:.15em 0 .2em}
.hcw-scr{color:var(--red);font-weight:650}
.hcw-big{font-size:clamp(1.05rem,1.4vw,1.2rem);margin-top:.5em}
.hcw-open{margin-top:1em;padding:14px 18px;background:rgba(232,161,58,.14);border-left:4px solid var(--lamp)}
.hcw-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,3.4vw,58px)}
.hcw-blk{margin-top:clamp(30px,4.4vw,60px)}
.hcw-blk .h3{font-size:clamp(1.5rem,2.6vw,2.3rem);margin-bottom:.5em}
.hcw-blk p{color:var(--ink-2);margin-bottom:.8em}
.hcw-k{margin-bottom:.3em}
.hcw-q{list-style:none;counter-reset:q;margin:0;padding:0;display:grid;gap:12px}
.hcw-q li{counter-increment:q;position:relative;padding:14px 18px 14px 58px;background:#fff;border:1px solid var(--rule);transition:transform .3s,border-color .3s}
.hcw-q li:hover{transform:translateX(4px);border-color:var(--red)}
.hcw-q li::before{content:counter(q);position:absolute;left:16px;top:12px;font:400 1.6rem/1 "Staatliches",sans-serif;color:var(--red)}
.hcw-q.is-flow{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hcw-s{margin:.5em 0 0!important;color:var(--red)!important;font-weight:600;font-size:.92rem}
.hcw-note{margin:.5em 0 0!important;font-style:italic;font-size:.92rem}
.hcw-host{padding:20px 24px;border:2px dashed rgba(164,20,10,.35)}
.hcw-pray{padding:20px 24px;background:var(--dusk);color:var(--paper)}
.hcw-pray p{color:rgba(242,237,228,.86)}
.hcw-pray .kicker{color:var(--lamp)}
.rise-in{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .8s cubic-bezier(.2,1,.3,1)}
.rise-in.in{opacity:1;transform:none}
.hcw-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.6vw,36px);margin-top:clamp(30px,4.4vw,60px)}
.hcw-card{padding:clamp(20px,2.4vw,30px);border:2px solid var(--ink);transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s}
.hcw-card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--red)}
.hcw-card .h3{font-size:clamp(1.4rem,2.3vw,2rem);margin-bottom:.4em}
.hcw-card p{color:var(--ink-2);margin-bottom:.9em}
.hcw-list{margin:0;padding:0;list-style:none}
.hcw-list li{padding:11px 0;border-bottom:1px solid var(--rule)}
.hcw-list li:last-child{border-bottom:0}
.start-copy p{color:rgba(242,237,228,.85);margin-top:.9em}
.start-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.start-form label{display:grid;gap:6px;font:700 .74rem "Gantari",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,228,.75)}
.start-form label.wide{grid-column:1/-1}
.start-form input,.start-form textarea,.find-form input{font:inherit;font-size:16px;letter-spacing:normal;text-transform:none;padding:12px 14px;background:rgba(242,237,228,.08);border:1.5px solid rgba(242,237,228,.3);color:var(--paper);width:100%}
.start-form input:focus,.start-form textarea:focus{outline:none;border-color:var(--lamp)}
.start-form .btn{justify-self:start}
.start-msg{grid-column:1/-1;color:var(--lamp-2);min-height:1.4em;margin:0}
@media (max-width:560px){.start-form{grid-template-columns:1fr}}
.find-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:clamp(18px,2.4vw,30px)}
.find-form label{display:grid;gap:6px;font:700 .74rem "Gantari",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.find-form input{background:#fff;border-color:var(--rule);color:var(--ink);width:min(220px,60vw)}
.find-res{margin-top:18px}
.find-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.find-list li{padding:14px 18px;border:1px solid var(--rule);background:#fff}
.find-list li span{color:var(--red);font-weight:700;margin-left:6px}
.find-none{margin-top:16px;color:var(--ink-2)}
.give-verse{margin-top:18px;font-family:"Shantell Sans",cursive;color:var(--lamp-2);font-size:clamp(1rem,1.4vw,1.15rem)}
.give-verse span{opacity:.75;margin-left:6px}

/* ================= Nov 4 2026 — home hero service lines (same two lines as .church) ================= */
.hero-times{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.hero-times li{display:flex;align-items:center;gap:10px;font:700 .78rem "Gantari",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hero-times i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;animation:tvPulse 2.4s ease-in-out infinite}
.hero-times li:nth-child(2) i{animation-delay:1.2s}
@keyframes tvPulse{0%,100%{box-shadow:0 0 0 0 rgba(164,20,10,.45)}50%{box-shadow:0 0 0 6px rgba(164,20,10,0)}}
@media (prefers-reduced-motion:reduce){.hero-times i{animation:none}}
.ft-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}

/* ================= Nov 4 2026 — pages carried over from todaysvictory.church =================
   tools/church_port.py brings the .church markup across word for word; these rules give it
   this site's type, color and motion. Scoped to .cport so nothing leaks. */
.cport{padding-bottom:clamp(40px,6vw,90px)}
.cport .hero{padding:clamp(40px,7vw,100px) 0 clamp(26px,4vw,52px)}
.cport .display{font-family:"Staatliches",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.9;color:var(--ink)}
.cport h1.display{font-size:clamp(3rem,10vw,8.4rem);max-width:15ch;margin:0 0 .25em}
.cport-post h1.display{font-size:clamp(2.4rem,6.4vw,5.4rem);max-width:20ch}
.cport h2.display{font-size:clamp(2rem,4.6vw,3.8rem);margin:clamp(40px,5vw,70px) 0 .4em}
.cport .lede,.cport .lead{font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.5;color:var(--ink-2);max-width:42ch}
.cport .pagebody .lead,.cport section .lead{max-width:60ch}
.cport .eyebrow{font-family:"Shantell Sans",cursive;font-weight:600;font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--red);margin:0 0 .8em;display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.cport .eyebrow a{color:var(--red)!important}
.cport .eyebrow .ti{color:var(--red)}
.cport .meta{margin-top:1em;font-size:.9rem;color:var(--ink-2)}
.cport p{color:var(--ink-2);max-width:68ch;margin:0 0 1em;line-height:1.65}
.cport a:not(.btn):not(.card){color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.cport a:not(.btn):not(.card):hover{color:var(--red)}
.cport section{padding:clamp(20px,3vw,40px) 0}
.cport .muted{color:var(--ink-2);opacity:.85}
.cport .btn{display:inline-flex;align-items:center;gap:.5em;font:700 .95rem "Gantari",sans-serif;letter-spacing:.02em;padding:.95em 1.6em;background:var(--red);border:2px solid var(--red);color:#fff;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.cport .btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.cport .btn.sec{background:transparent;color:var(--ink);border-color:var(--ink)}
.cport .btn.sec:hover{background:var(--ink);color:var(--paper)}
.cport .ref{color:var(--red)!important;font-weight:600;font-size:.9rem;opacity:1!important}
.cport ul.clean{list-style:none;padding:0;margin:14px 0}
.cport ul.clean li{padding:11px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.cport .grid{display:grid;gap:clamp(16px,2.2vw,28px)}
@media (min-width:820px){.cport .g2{grid-template-columns:1fr 1fr}}
.cport .card{display:block;background:#fff;border:2px solid var(--ink);padding:clamp(18px,2.2vw,26px);color:var(--ink);text-decoration:none;transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s}
.cport a.card:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--red)}
.cport .card h3{font-family:"Staatliches",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1;margin:0 0 .3em;color:var(--ink)}
.cport .mcard{padding:0!important;overflow:hidden}
.cport .mcard>span:last-child>span:first-child{font-weight:700;font-size:1.05rem;color:var(--ink)}
.cport .mcard>span:last-child>span:last-child{color:var(--ink-2);font-size:.88rem}
/* the timeline on /story/ */
.cport .tl{position:relative;margin:clamp(20px,3vw,36px) 0 clamp(30px,4vw,50px);padding-left:clamp(28px,4vw,46px);border-left:3px solid var(--ink)}
.cport .tl-i{position:relative;padding:0 0 clamp(22px,3vw,34px)}
.cport .tl-i::before{content:"";position:absolute;left:calc(-1 * clamp(28px,4vw,46px) - 9px);top:.45em;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.cport .tl-i.now::before{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px rgba(164,20,10,.18)}
.cport .tl-y{display:block;font:400 clamp(2rem,4.4vw,3.4rem)/1 "Staatliches",sans-serif;color:var(--red)}
.cport .tl-t{display:block;font:700 clamp(1.05rem,1.5vw,1.25rem)/1.3 "Gantari",sans-serif;color:var(--ink);margin:.2em 0 .35em}
/* /ministries/ */
.cport .min-wrap{display:grid;gap:12px;margin-top:10px}
.cport .min-card{border:2px solid var(--ink);background:#fff;transition:border-color .25s,box-shadow .3s}
.cport .min-card[open]{border-color:var(--red);box-shadow:8px 8px 0 var(--red)}
.cport .min-head{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(16px,2vw,24px)}
.cport .min-head::-webkit-details-marker{display:none}
.cport .min-head::after{content:"+";font:400 2rem/1 "Staatliches",sans-serif;color:var(--red);transition:transform .3s}
.cport .min-card[open] .min-head::after{transform:rotate(45deg)}
.cport .min-t{font:400 clamp(1.6rem,3vw,2.4rem)/1 "Staatliches",sans-serif;text-transform:uppercase;color:var(--ink)}
.cport .min-k{font-family:"Shantell Sans",cursive;color:var(--red);margin-left:auto}
.cport .min-body{padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.cport .min-lead{color:var(--ink)!important;font-weight:600}
/* /prayer/ */
.cport .pr-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:820px){.cport .pr-grid{grid-template-columns:1fr}}
.cport .pr-card form{display:grid;gap:6px}
.cport label{display:block;font:700 .74rem "Gantari",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}
.cport input,.cport textarea{font:inherit;font-size:16px;width:100%;padding:13px 14px;background:#fff;border:2px solid var(--ink);color:var(--ink)}
.cport input:focus,.cport textarea:focus{outline:none;border-color:var(--red)}
.cport .pr-side{display:grid;gap:18px}
.cport .pr-step{display:flex;gap:14px;align-items:flex-start}
.cport .pr-step b{display:block;color:var(--ink);font-size:1.05rem}
.cport .pr-step span{color:var(--ink-2)}
.cport .pr-n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:400 1.3rem/1 "Staatliches",sans-serif}
.cport .pr-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:6px;animation:tvPulse 2.4s ease-in-out infinite}
.cport .pr-urg{padding:18px 20px;background:var(--dusk);color:rgba(242,237,228,.86)}
.cport .pr-urg b{display:block;color:var(--lamp-2);margin-bottom:4px}
.cport .pr-urg a{color:#fff!important}
/* /blog/ and articles */
.cport .fchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.4vw,30px)}
.cport .fchips button{font:600 .88rem "Gantari",sans-serif;padding:.6em 1em;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.cport .fchips button:hover{background:var(--ink);color:var(--paper)}
.cport .fchips button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.cport .bcard{display:flex!important;flex-direction:column;gap:8px}
.cport .bcard .tg{font-family:"Shantell Sans",cursive;color:var(--red);display:flex;align-items:center}
.cport .bcard .bt{font:400 clamp(1.5rem,2.4vw,2.1rem)/1 "Staatliches",sans-serif;text-transform:uppercase;color:var(--ink)}
.cport .bcard .bx{color:var(--ink-2)}
.cport .bcard .br{margin-top:auto;font-weight:700;color:var(--red)}
.cport article.post{max-width:70ch}
.cport article.post h2{font:400 clamp(1.7rem,3vw,2.4rem)/1 "Staatliches",sans-serif;text-transform:uppercase;color:var(--ink);margin:1.6em 0 .5em}
.cport article.post blockquote{margin:1.4em 0;padding:14px 20px;border-left:4px solid var(--red);background:rgba(164,20,10,.05)}
.cport article.post li{color:var(--ink-2);margin-bottom:.5em}
/* /events/: the calendar is recolored into this site's paper, ink and red (js/events-cal-light.js),
   and its panels take the same hard ink frame as the ministries cards */
.cport-sec-events .cport-events .pagebody{margin-top:10px}
.cport-events #tvcal .tvc-cal,.cport-events #tvcal .tvc-card{border:2px solid var(--ink)!important;border-radius:0!important;box-shadow:var(--shadow)}
.cport-events #tvcal .tvc-card{background:#FFFDF8!important}
.cport-events #tvcal .tvc-card:hover{border-color:var(--red)!important}
.cport-events #tvcal .tvc-d{border-radius:4px!important}
.cport-events #tvcal .tvc-img,.cport-events #tvcal .tvc-badge,.cport-events #tvcal .tvc-pth{border-radius:0!important}
.cport-events #tvcal .tvc-badge{border:2px solid var(--ink)!important}
.cport-events #tvcal .tvc-cal{padding:clamp(18px,3vw,34px)!important}
.cport-events #tvcal .tvc-more,.cport-events #tvcal .tvc-today{border-radius:0!important;border:2px solid var(--ink)!important;color:var(--ink)!important}
.cport-events #tvcal .tvc-more:hover{background:var(--ink)!important;color:var(--paper)!important}
/* entrance motion for the carried-over blocks */
.motion-ok .cport .tl-i,.motion-ok .cport .min-card,.motion-ok .cport .card,.motion-ok .cport .pr-step{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .75s cubic-bezier(.2,1,.3,1)}
.motion-ok .cport .tl-i.in,.motion-ok .cport .min-card.in,.motion-ok .cport .card.in,.motion-ok .cport .pr-step.in{opacity:1;transform:none}
.motion-ok .cport a.card.in:hover{transform:translateY(-4px)}

/* ROUND 24 — each device sits over its own box; boxes centered; the lit pair is joined */
.arrives{margin-bottom:0}
.arrives-cap{position:relative;text-align:center;width:max-content;max-width:100%;left:var(--cap-x,50%);transform:translateX(-50%);transition:left .45s cubic-bezier(.2,.8,.2,1);margin-top:12px}
@media (max-width:820px){.arrives-cap{left:50%}}
.routes{margin-top:clamp(18px,2.4vw,28px)}
.route,.route+.route{padding:clamp(24px,3vw,40px) clamp(14px,2vw,28px);text-align:center;display:flex;flex-direction:column;align-items:center}
.route .devo-form{justify-content:center;width:100%;max-width:420px}
.route .devo-form input{flex:1 1 180px;min-width:0}
.route .form-note:empty{display:none}
.route::before{content:"";position:absolute;left:18%;right:18%;top:-1px;height:3px;background:var(--lamp);transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.route::after{content:"";position:absolute;left:50%;top:-1px;width:14px;height:14px;background:var(--lamp);transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.route.is-lit{background:linear-gradient(rgba(232,161,58,.13),rgba(232,161,58,.02))}
.route.is-lit::before{transform:scaleX(1)}
.route.is-lit::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}
@media (max-width:820px){.route,.route+.route{border-left:0}}

/* ROUND 25 — text signup is live */
.sms-consent{display:flex;gap:10px;align-items:flex-start;text-align:left;flex:1 1 100%;font-size:.84rem;line-height:1.45;color:rgba(242,237,228,.72);margin-top:6px;cursor:pointer}
.sms-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--lamp);border:0;padding:0}

/* QA Nov 5 — with the nav hidden (tablet and phone) the call/give/menu cluster
   still has to sit at the right edge */
@media (max-width:900px){.nav+.hdr-end{margin-left:auto}}