/* TBA concept home: "a quiet chapel at dawn". Loaded only by index.html (body.cx). */
html body.cx{--ease:cubic-bezier(.22,1,.36,1);--serif:"Newsreader",Georgia,serif}
/* ---------- hero: ambient sermon under a soft white veil ---------- */
html body.cx .hx.cx-h{position:relative;overflow:hidden;isolation:isolate;padding:0;min-height:clamp(560px,82vh,860px);display:flex;align-items:flex-end;background:var(--card)}
.cx-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cx-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:62% 40%;animation:cxkb 38s ease-in-out infinite alternate;filter:saturate(.5) contrast(.9) blur(2px)}
@keyframes cxkb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
.cx-yt{position:absolute;inset:0;opacity:0;transition:opacity 2.4s var(--ease)}
.cx-yt.on{opacity:1}
.cx-yt iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);min-width:177.78%;min-height:100%;transform:translate(-50%,-50%) scale(1.12);border:0;pointer-events:none;filter:saturate(.55) contrast(.92)}
@media(min-aspect-ratio:16/9){.cx-yt iframe{min-width:100%;min-height:56.25vw}}
.cx-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(247,246,243,.97) 0%,rgba(247,246,243,.9) 38%,rgba(247,246,243,.55) 70%,rgba(247,246,243,.4) 100%),linear-gradient(0deg,rgba(247,246,243,.92) 0%,rgba(247,246,243,0) 46%)}
html body.cx .cx-h .w{width:100%;max-width:1360px}
.cx-ht{max-width:720px;padding:clamp(120px,16vh,180px) 0 clamp(48px,7vw,96px)}
html body.cx .cx-h .ey{margin-bottom:22px}
html body.cx .cx-h .hx-h,html body.cx .cx-h .hx-h.long{font:400 clamp(40px,4.3vw,66px)/1.06 Inter,sans-serif;letter-spacing:-.035em;color:var(--ink);max-width:17ch;text-wrap:balance;margin:0}
html body.cx .cx-h .hx-d{margin-top:24px;max-width:46ch;font:400 clamp(16px,1.25vw,18px)/1.6 Inter,sans-serif;color:var(--mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cx-act{margin-top:36px}
.cx-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px 0 22px;border:0;border-radius:999px;background:var(--acc);color:#fff;font:600 15.5px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 14px 30px -16px rgba(192,39,45,.7);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cx-btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(192,39,45,.8)}
.cx-btn svg{margin-left:2px}
@media(max-width:760px){
 html body.cx .hx.cx-h{min-height:auto;align-items:stretch;flex-direction:column}
 .cx-bg{position:relative;inset:auto;height:62vw;max-height:340px}
 .cx-veil{background:linear-gradient(0deg,var(--card) 0%,rgba(247,246,243,0) 55%)}
 .cx-ht{padding:8px 0 40px}
 html body.cx .cx-h .hx-h,html body.cx .cx-h .hx-h.long{font-size:clamp(32px,8.6vw,40px);letter-spacing:-.03em}
 .cx-act{margin-top:28px}
}
/* ---------- words for the day ---------- */
html body.cx .cx-w{padding:clamp(96px,14vw,200px) 0}
html body.cx .cx-w .w{max-width:1080px;text-align:center}
.cx-q{margin:28px auto 0;max-width:none}.cx-qt{max-width:22ch;margin:0 auto}
.cx-qt{font:300 clamp(32px,4.4vw,64px)/1.18 var(--serif);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.cx-qt .wd{display:inline-block;opacity:.12;transform:translateY(.12em);filter:blur(2px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.cx-qt .wd.on{opacity:1;transform:none;filter:none}
.cx-q footer{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:18px;background:none!important;border:0!important;padding:0!important}
.cx-qr{font:italic 400 clamp(16px,1.3vw,19px)/1.3 var(--serif);color:var(--mut)}
.cx-qr:before{content:"";display:block;width:28px;height:1px;background:var(--acc);margin:0 auto 18px}
.cx-ql{font-size:14px;color:var(--ink)}
/* ---------- read and reflect: editorial ---------- */
html body.cx .cx-r{padding-top:clamp(48px,6vw,96px)}
.cx-mag{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3.4vw,56px);margin-top:clamp(28px,3vw,44px)}
.cx-im{display:block;overflow:hidden;border-radius:14px;background:#EDEAE6;aspect-ratio:16/9}
.cx-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.cx-lead:hover .cx-im img,.cx-sm:hover .cx-im img{transform:scale(1.035)}
.cx-lead{display:block;color:inherit}
.cx-lead .cx-im{aspect-ratio:4/3;border-radius:18px}
.cx-m{display:block;font:500 12px/1.4 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.cx-lead .cx-m{margin-top:22px}
.cx-lead h3{font:400 clamp(28px,2.8vw,42px)/1.1 var(--serif);letter-spacing:-.015em;margin-top:10px}
.cx-lead p{margin-top:14px;max-width:52ch;color:var(--mut);font-size:16px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cx-side{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.cx-sm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:center;color:inherit;padding-bottom:24px;border-bottom:1px solid var(--line)}
.cx-sm:last-child{border-bottom:0;padding-bottom:0}
.cx-sm h3{font:400 clamp(19px,1.6vw,23px)/1.22 var(--serif);letter-spacing:-.01em;margin-top:8px;text-wrap:pretty}
.cx-lead:hover h3,.cx-sm:hover h3{color:var(--acc)}
.cx-lead h3,.cx-sm h3{transition:color .4s}
@media(max-width:1023px){.cx-mag{grid-template-columns:1fr}.cx-lead .cx-im{aspect-ratio:16/9}}
@media(max-width:560px){.cx-sm{grid-template-columns:120px minmax(0,1fr);gap:16px}.cx-sm .cx-im{border-radius:10px}.cx-sm h3{font-size:18px}}
/* ---------- sermons reel ---------- */
html body.cx .cx-reel .vc-im{border-radius:16px}
html body.cx .cx-reel .vc-im img{transition:transform 1.6s var(--ease),filter 1.2s var(--ease);filter:saturate(.9)}
html body.cx .cx-reel .vc:hover .vc-im img{transform:scale(1.06);filter:saturate(1.05)}
html body.cx .cx-reel .vc-t,html body.cx .cx-reel .vc-m{transition:transform .8s var(--ease),opacity .8s var(--ease)}
@media(hover:hover){html body.cx .cx-reel .vc-t{opacity:.72;transform:translateY(4px)}html body.cx .cx-reel .vc:hover .vc-t{opacity:1;transform:none}}
/* ---------- motion: sections settle like turning pages ---------- */
.cx-pg{opacity:0;transform:perspective(1400px) translateY(28px) rotateX(5deg);transform-origin:50% 0;transition:opacity 1.3s var(--ease),transform 1.5s var(--ease)}
.cx-pg.alt{transform:perspective(1400px) translateY(22px) rotateY(-3deg);transform-origin:0 50%}
.cx-pg.soft{transform:translateY(16px) scale(.985)}
.cx-pg.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cx-bg img{animation:none}.cx-pg,.cx-qt .wd{opacity:1!important;transform:none!important;filter:none!important;transition:none}.cx-yt{display:none}}
/* ---------- evening: warm dark ---------- */
html body.cx .cx-q{border:0!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0}
html body.cx .cx-w .ey{display:flex;justify-content:center;text-align:center}
.cx-side{justify-content:flex-start;gap:28px}
/* polish: calmer thumbnail on phone/tablet (crop to the face side, stronger blur and veil) */
@media(max-width:1023px){.cx-bg img{object-position:78% 30%;filter:saturate(.45) contrast(.88) blur(5px)}}
@media(max-width:760px){.cx-bg img{transform-origin:80% 30%}.cx-veil{background:linear-gradient(0deg,var(--card) 0%,rgba(247,246,243,.55) 45%,rgba(247,246,243,.35) 100%)}}
@media(min-width:761px) and (max-width:1023px){.cx-veil{background:linear-gradient(90deg,rgba(247,246,243,.97) 0%,rgba(247,246,243,.9) 50%,rgba(247,246,243,.6) 100%),linear-gradient(0deg,rgba(247,246,243,.9) 0%,rgba(247,246,243,0) 50%)}}
/* home hero: permanent dark rounded card on the white page */
html body.cx .hx.cx-h{background:#0E0C0C!important}
html body.cx .cx-veil{background:linear-gradient(90deg,#0E0C0C 0%,rgba(14,12,12,.92) 34%,rgba(14,12,12,.5) 66%,rgba(14,12,12,.3) 100%),linear-gradient(0deg,#0E0C0C 0%,rgba(14,12,12,0) 50%)}
html body.cx .cx-bg img{filter:saturate(.6) brightness(.85) contrast(.95) blur(1px)}
html body.cx .cx-h .hx-h,html body.cx .cx-h .hx-h.long{color:#fff}
html body.cx .cx-h .hx-d{color:rgba(255,255,255,.72)}
html body.cx .cx-h .ey{color:#E0464C}
@media(max-width:760px){html body.cx .cx-veil{background:linear-gradient(0deg,#0E0C0C 0%,rgba(14,12,12,.55) 45%,rgba(14,12,12,.25) 100%)}}
@media(min-width:761px) and (max-width:1023px){html body.cx .cx-veil{background:linear-gradient(90deg,#0E0C0C 0%,rgba(14,12,12,.9) 50%,rgba(14,12,12,.55) 100%),linear-gradient(0deg,#0E0C0C 0%,rgba(14,12,12,0) 50%)}}
@media(max-width:1023px){html body.cx .cx-bg img{filter:saturate(.5) brightness(.75) blur(4px)}}
@media(max-width:760px){html body.cx .cx-bg img{width:165%;max-width:none!important;left:auto;right:-8%;animation:none;transform:none}}
/* home hero dark card: light text and controls inside it */
html body.cx .cx-h,html body.cx .cx-h .hx-p{color:#fff}
html body.cx .cx-h .hx-p{color:#fff}
html body.cx .cx-h .bt-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
html body.cx .cx-h .bt-t{color:#fff}
/* reveals: visible by default, no blank gap before they animate */
.cx-pg{opacity:1!important;transform:none!important}
.cx-qt .wd{opacity:1!important;transform:none!important;filter:none!important}