/* =========================================================
   HERO — the arcade: a row of flat-colour church arches,
   the great door in the middle (animated by main.js)
   ========================================================= */
.hx--arc{--door:#FFC23D;--gap:clamp(8px,1vw,14px);--dw:clamp(300px,40vw,600px);background:#0B0710;color:#0B0710}
.arc{position:absolute;left:50%;bottom:0;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:var(--gap);transform:translateX(-50%);width:max-content;pointer-events:none}
.arc__a{--c:#B7A5FF;position:relative;flex:none;overflow:hidden;background:var(--c);border-radius:9999px 9999px 0 0;pointer-events:auto;transform-origin:50% 100%;will-change:transform;isolation:isolate}
/* the window frame: a thin inner arch */
.arc__a::before{content:"";position:absolute;inset:12px 12px 0;border:1.5px solid rgba(11,7,16,.16);border-bottom:0;border-radius:inherit;pointer-events:none;z-index:2}
/* a sheen that sweeps across the whole arcade */
.arc__a::after{content:"";position:absolute;inset:-10% -60%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);transform:translateX(-70%);animation:arcSheen 7s cubic-bezier(.6,0,.2,1) infinite;animation-delay:calc(var(--sd,0) * .14s + 2.6s)}
@keyframes arcSheen{0%{transform:translateX(-70%)}22%,100%{transform:translateX(70%)}}

.arc__door{--c:var(--door);width:var(--dw);height:calc(100% - clamp(92px,12vh,112px));--sd:3;display:flex;flex-direction:column;justify-content:flex-end}
.arc__a--1l,.arc__a--1r{width:calc(var(--dw) * .37);height:64%}
.arc__a--2l,.arc__a--2r{width:calc(var(--dw) * .31);height:49%}
.arc__a--3l,.arc__a--3r{width:calc(var(--dw) * .27);height:37%}
.arc__a--1l{--c:#B7A5FF;--sd:2}.arc__a--1r{--c:#2ED3A0;--sd:4}
.arc__a--2l{--c:#FF5A1F;--sd:1}.arc__a--2r{--c:#FF7AA8;--sd:5}
.arc__a--3l{--c:#8FD8FF;--sd:0}.arc__a--3r{--c:#6E4BFF;--sd:6}
.arc__a--1r,.arc__a--2l,.arc__a--3l,.arc__a--2r{transition:filter .4s}
a.arc__a{cursor:pointer}

.arc__tag{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#0B0710;font-weight:500;white-space:nowrap}

/* ---- the great door ---- */
.arc__rays{position:absolute;left:50%;top:calc(var(--dw) * .5);width:240%;aspect-ratio:1;translate:-50% -50%;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 72%);mask:radial-gradient(closest-side,#000 18%,transparent 72%);
  animation:arcSpin 60s linear infinite}
.arc__glow{position:absolute;left:50%;top:calc(var(--dw) * .5);width:90%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;background:radial-gradient(closest-side,#FFF3C4,rgba(255,243,196,0));animation:arcPulse 4.5s ease-in-out infinite alternate}
@keyframes arcSpin{to{rotate:360deg}}
@keyframes arcPulse{from{opacity:.55;scale:.9}to{opacity:1;scale:1.08}}
.arc__emblem{position:absolute;left:50%;top:clamp(34px,calc(var(--dw) * .1),64px);width:clamp(58px,calc(var(--dw) * .15),92px);translate:-50% 0;z-index:1;fill:#0B0710;animation:arcSpin 24s linear infinite}
.arc__emblem path{animation:arcSpin 24s linear infinite reverse;transform-origin:50% 50%}

.hx--arc .hx__main{position:relative;inset:auto;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(22px,3.4vw,52px) clamp(30px,5vh,56px);pointer-events:none}
.hx--arc .hx__ann{margin:0 0 clamp(14px,2.2vh,22px);max-width:100%;background:#0B0710!important;border:0;color:rgba(255,255,255,.85);font-size:12.5px}
.hx--arc .hx__ann-text{max-width:min(320px,52vw)}
.hx--arc .hx__ann-new{background:var(--door)}
.hx--arc .hx__kicker{justify-content:center;margin:0 0 10px;color:rgba(11,7,16,.7);font-weight:500}
.hx--arc .hx__title{align-items:center;font-size:clamp(3rem,min(calc(var(--dw) * .19),12.5vh),7.6rem);color:#0B0710;text-shadow:none}
.hx--arc .hx__word{background:none;-webkit-text-fill-color:#0B0710;color:#0B0710}
.hx--arc .hx__lead{margin:clamp(14px,2.2vh,22px) 0 0;max-width:430px;font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.55;color:rgba(11,7,16,.78)}
.hx--arc .hx__ctas{justify-content:center;margin-top:clamp(18px,2.8vh,28px)}
.xbtn--line{padding:0 24px;color:#0B0710;border:1.5px solid rgba(11,7,16,.85);background:transparent}
.xbtn--line:hover{background:#0B0710;color:#fff}

/* ---- side windows ---- */
.arc__star{fill:#0B0710}
.arc__star--sm{position:absolute;left:50%;top:clamp(26px,calc(var(--dw) * .07),44px);width:30%;translate:-50% 0;animation:arcSpin 14s linear infinite}

/* countdown */
.arc__cd{position:absolute;inset:auto 0 0;padding:0 10px 58px;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:1}
.arc__cd .arc__tag{position:static;margin-bottom:10px;white-space:normal;text-align:center;line-height:1.4;max-width:90%}
.arc__cd p{margin:0;display:flex;align-items:baseline;gap:6px;line-height:.92}
.arc__cd b{display:inline-block;font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;letter-spacing:-.03em;font-size:clamp(2rem,calc(var(--dw) * .1),3.6rem);font-variant-numeric:tabular-nums}
.arc__cd small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;width:2.6em;text-align:left;opacity:.7}

/* watch-live seal */
.arc__seal{position:absolute;left:50%;top:clamp(40px,7vh,80px);width:84%;aspect-ratio:1;translate:-50% 0;display:grid;place-items:center}
.arc__seal .arc__star{position:absolute;inset:14%;width:72%;animation:arcSpin 18s linear infinite}
.arc__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:arcSpin 22s linear infinite reverse}
.arc__ring text{font-family:var(--f-mono);font-size:15px;letter-spacing:.2em;fill:#0B0710;font-weight:500}
.arc__play{position:relative;width:30%;aspect-ratio:1;border-radius:50%;background:#2ED3A0;display:grid;place-items:center;transition:scale .5s var(--ease-o)}
.arc__play .ic{width:42%;height:42%;fill:#0B0710;stroke:none;margin-left:8%}
a.arc__a:hover .arc__play{scale:1.18}
a.arc__a:hover .arc__seal .arc__star{animation-duration:5s}
.arc__a--1r .arc__tag .live-dot{background:#0B0710;box-shadow:none}

/* rolling words */
.arc__roll{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent 12%,#000 30%,#000 82%,transparent 96%);mask:linear-gradient(transparent 12%,#000 30%,#000 82%,transparent 96%)}
.arc__roll>div{display:flex;flex-direction:column;align-items:center;animation:arcRoll 14s linear infinite}
.arc__roll b,.arc__roll em{display:block;line-height:1;padding:.06em 0;font-size:clamp(1.6rem,calc(var(--dw) * .075),2.8rem);white-space:nowrap}
.arc__roll b{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.02em}
.arc__roll em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:#fff}
@keyframes arcRoll{to{transform:translateY(-50%)}}

/* stats */
.arc__stats{position:absolute;inset:auto 0 0;padding:0 8px 34px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.arc__stats p{margin:0;display:flex;flex-direction:column;align-items:center}
.arc__stats b{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;letter-spacing:-.03em;font-size:clamp(1.6rem,calc(var(--dw) * .07),2.6rem);line-height:.95;font-variant-numeric:tabular-nums}
.arc__stats small{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* radiating rings */
.arc__rings{position:absolute;left:50%;top:38%;width:0;height:0}
.arc__rings i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:2px solid #0B0710;opacity:0;animation:arcRing 4.8s cubic-bezier(.2,.6,.3,1) infinite}
.arc__rings i:nth-child(2){animation-delay:1.2s}.arc__rings i:nth-child(3){animation-delay:2.4s}.arc__rings i:nth-child(4){animation-delay:3.6s}
@keyframes arcRing{0%{opacity:.9;scale:.15}100%{opacity:0;scale:2.4}}
.arc__rings::after{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#0B0710}

/* sunburst + cross */
.arc__burst{position:absolute;left:50%;top:40%;width:260%;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0 8deg,transparent 8deg 20deg);animation:arcSpin 30s linear infinite}
.arc__cross{position:absolute;left:50%;top:40%;width:28%;translate:-50% -50%;fill:#fff}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hx--arc{--dw:calc(100vw - 52px);--gap:8px}
  .arc__door{height:calc(100% - 84px)}
  .arc__a--1l,.arc__a--1r{height:46%}
  .arc__a--2l,.arc__a--2r,.arc__a--3l,.arc__a--3r{display:none}
  .arc__a--1l>*,.arc__a--1r>*{display:none}
  .hx--arc .hx__title{font-size:clamp(3rem,16.5vw,5rem)}
  .hx--arc .hx__ctas{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:300px;gap:10px}
  .hx--arc .hx__ctas .xbtn{justify-content:center;height:52px}
  .hx--arc .hx__ctas .xbtn--ink{justify-content:space-between;padding-left:22px}
  .hx--arc .hx__lead{font-size:14.5px}
  .hx--arc .hx__ann-text{display:none}
}
@media (max-height:720px) and (min-width:761px){.hx--arc .hx__lead{display:none}}
@media (prefers-reduced-motion:reduce){.hx--arc *,.hx--arc *::after{animation:none!important}}

/* =========================================================
   NAV — flat: no glass pill, solid ink once you scroll
   ========================================================= */
.nav .nav__bar{max-width:none;margin:0;padding:18px var(--gutter);border-radius:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;transition:background .4s,padding .4s,color .4s}
.nav.is-solid .nav__bar{background:#0B0710;padding-top:12px;padding-bottom:12px}
body[data-tone="light"] .nav .nav__bar{background:transparent;color:#0B0710;box-shadow:none;border:0}
body[data-tone="light"] .nav.is-solid .nav__bar{background:#F4EEE4}
.nav .logo__img{height:40px}
.nav .logo__text b{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.nav .logo__text small{font-family:var(--f-mono);letter-spacing:.14em;font-size:9px;color:currentColor;opacity:.55}
.nav .nav__links a{font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:currentColor;opacity:1;padding:9px 14px;border-radius:10px;transition:color .25s}
.nav .nav__links:hover a{opacity:.55}
.nav .nav__links a:hover{opacity:1;color:#0B0710}
.nav .nav__hl{border-radius:10px;background:var(--hl,#FFC23D)!important;transition:transform .45s var(--ease),width .45s var(--ease),opacity .25s,background-color .3s}
.nav .pill{height:44px;border-radius:12px;font-weight:600}
.nav .pill--live{background:transparent!important;border:1.5px solid currentColor!important;color:currentColor!important;box-shadow:none!important}
.nav .pill--live .live-dot{background:#FF3D7F}
.nav .pill--ink{background:#FFC23D!important;color:#0B0710!important;border:0!important;box-shadow:none!important;padding:0 20px}
.nav .pill--ink:hover{background:#fff!important}
.nav .nav__burger{border-radius:12px;background:#FFC23D!important}
.nav .nav__burger span{background:#0B0710!important}
@media (max-width:760px){.nav .nav__bar{padding:14px var(--gutter)}.nav .logo__img{height:34px}.nav .pill--ink{padding:0 14px;height:42px}.nav .nav__burger{width:42px;height:42px}.nav .nav__burger span{left:13px;right:13px}.nav .nav__burger span:first-child{top:17px}.nav .nav__burger span:last-child{top:23px}}

/* polish */
.arc__door{z-index:2}
.arc__seal{top:50%;translate:-50% -62%}
@media (max-width:760px){
  .hx--arc .hx__ann{display:none!important}
  .hx--arc .hx__kicker{font-size:10.5px;letter-spacing:.14em}
}

/* =========================================================
   Heaven: Jesus on the clouds, verses, sky
   ========================================================= */
.arc__a--1r{--c:#F4EEE4}
.arc__a--2r{--c:#FF7AA8}
.arc__play{background:var(--c)}

/* night sky with drifting clouds and twinkling stars behind the arcade */
.arc__sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arc__skycloud{position:absolute;left:var(--x);top:var(--y);width:var(--w);fill:url(#arcMist);opacity:calc(var(--o) * 2.6);filter:blur(6px);animation:arcDrift var(--t) ease-in-out infinite alternate}
@keyframes arcDrift{from{translate:-40px 0}to{translate:60px 0}}
.arc__twinkle{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#FFF3C4;box-shadow:0 0 10px 2px rgba(255,214,120,.6);animation:arcTwinkle 3.6s ease-in-out var(--d) infinite}
@keyframes arcTwinkle{0%,100%{opacity:.15;scale:.6}50%{opacity:1;scale:1.3}}

/* Jesus with open arms, standing on the clouds, light pouring from behind */
.hx--arc{--jh:min(calc(var(--dw) * .4),22vh)}
.arc__rays,.arc__glow{top:calc(clamp(30px,5vh,56px) + var(--jh) * .18)}
.arc__heaven{position:absolute;left:0;right:0;top:clamp(30px,5vh,56px);height:calc(var(--jh) * 1.12);z-index:1;pointer-events:none}
.arc__jesus{position:absolute;left:50%;top:0;height:var(--jh);translate:-50% 0;fill:#0B0710;overflow:visible;animation:arcFloat 6s ease-in-out infinite alternate}
.arc__halo{fill:#FFF6D8;stroke:#0B0710;stroke-width:3;transform-origin:100px 40px;animation:arcHalo 4s ease-in-out infinite alternate}
@keyframes arcFloat{from{translate:-50% 0}to{translate:-50% -8px}}
@keyframes arcHalo{from{scale:.94}to{scale:1.08}}
.arc__cloud{position:absolute;fill:#fff;filter:drop-shadow(0 6px 0 rgba(11,7,16,.08))}
.arc__cloud--a{width:44%;left:6%;bottom:-2%;animation:arcBob 7s ease-in-out infinite alternate}
.arc__cloud--b{width:50%;right:4%;bottom:-6%;animation:arcBob 8s ease-in-out -3s infinite alternate-reverse}
.arc__cloud--c{width:34%;left:33%;bottom:-12%;animation:arcBob 6s ease-in-out -1s infinite alternate}
@keyframes arcBob{from{translate:-10px 0}to{translate:14px -4px}}

/* verse of the moment */
.arc__dove{position:absolute;left:50%;top:clamp(36px,6vh,64px);width:44%;translate:-50% 0;fill:#0B0710;animation:arcFly 5s ease-in-out infinite alternate}
@keyframes arcFly{0%{translate:-50% 0;rotate:-4deg}100%{translate:-44% -10px;rotate:4deg}}
.arc__verse{position:absolute;inset:auto 0 0;margin:0;padding:0 16px 34px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.arc__verse .arc__tag{position:static}
.arc__verse blockquote{margin:0;font-family:var(--f-serif);font-style:italic;font-size:clamp(1.05rem,calc(var(--dw) * .034),1.4rem);line-height:1.22;letter-spacing:-.01em;color:#0B0710;min-height:6.2em;display:flex;align-items:flex-end;justify-content:center}
.arc__verse figcaption{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.arc__vbar{width:60%;height:3px;border-radius:3px;background:rgba(11,7,16,.14);overflow:hidden}
.arc__vbar i{display:block;height:100%;background:#0B0710;transform-origin:0 50%;transform:scaleX(0)}
.hx__verse{display:none}

@media (max-width:760px){
  .hx--arc{--jh:min(calc(var(--dw) * .42),22vh)}
  .hx--arc .hx__lead{display:none}
  .hx__verse{display:block;margin:16px 0 0;max-width:300px;font-family:var(--f-serif);font-style:italic;font-size:17px;line-height:1.3;color:#0B0710}
  .hx__verse b{display:block;margin-top:6px;font-family:var(--f-mono);font-style:normal;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
}
@media (max-height:860px) and (min-width:761px){.hx--arc .hx__ann{display:none!important}}
/* warm heavenly glow spilling from the great door into the night */
.arc__sky::before{content:"";position:absolute;left:50%;top:-10%;width:min(1500px,130vw);aspect-ratio:1.6;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,194,61,.22),rgba(255,122,168,.08) 55%,transparent);animation:arcPulse 6s ease-in-out infinite alternate}
[hidden]{display:none!important}

/* the name revealed inside the great door while scrolling */
.hx__brand{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.2vh,14px);pointer-events:none;opacity:0;color:#0B0710;text-align:center}
.hx__brand-mark{width:clamp(96px,14vh,150px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 50px -18px rgba(11,7,16,.45);margin-bottom:clamp(4px,1vh,12px)}
.hx__brand-mark img{width:76%;height:76%;object-fit:contain}
.hx__brand-name{font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:-.035em;line-height:.82;font-size:clamp(5rem,min(19vw,26vh),15rem)}
.hx__brand-sub{font-family:var(--f-mono);font-size:clamp(12px,1.4vw,18px);letter-spacing:.42em;text-transform:uppercase;font-weight:500;padding-left:.42em}
@media (prefers-reduced-motion:reduce){.hx__brand{display:none}}

/* ---------- phones: stack heaven above the words, nothing overlaps ---------- */
@media (max-width:760px){
  .hx--arc{--dw:calc(100vw - 28px);--jh:clamp(84px,min(calc(var(--dw) * .34),15svh),140px)}
  .arc__a--1l,.arc__a--1r{display:none}
  .arc__door{height:calc(100% - 78px);display:flex;flex-direction:column;justify-content:flex-start}
  .arc__a::before{inset:9px 9px 0}
  .arc__heaven{position:relative;inset:auto;flex:none;margin:clamp(18px,4svh,34px) 0 0;height:calc(var(--jh) * 1.08)}
  .arc__rays,.arc__glow{top:calc(clamp(18px,4svh,34px) + var(--jh) * .2)}
  .arc__cloud--a{width:40%;left:8%;bottom:-4%}
  .arc__cloud--b{width:44%;right:6%;bottom:-6%}
  .arc__cloud--c{width:30%;left:35%;bottom:-10%}
  .hx--arc .hx__main{margin-top:auto;padding:0 18px clamp(18px,3.4svh,30px)}
  .hx--arc .hx__kicker{font-size:10px;letter-spacing:.16em;margin-bottom:8px}
  .hx--arc .hx__title{font-size:clamp(2.6rem,min(14vw,8.2svh),4.4rem)}
  .hx__verse{margin-top:clamp(10px,2svh,16px);font-size:clamp(14.5px,2.3svh,17px);max-width:310px}
  .hx--arc .hx__ctas{flex-direction:row;max-width:none;width:100%;gap:8px;margin-top:clamp(14px,2.6svh,22px)}
  .hx--arc .hx__ctas .xbtn{flex:1;height:48px;font-size:14.5px;padding:0 14px;gap:8px}
  .hx--arc .hx__ctas .xbtn--ink{padding:0 5px 0 16px}
  .hx--arc .hx__ctas .xbtn>i{width:38px;height:38px}
  .hx--arc .hx__ctas .xbtn--line{justify-content:center}
}
@media (max-width:760px) and (max-height:600px){.hx__verse b{display:none}.hx--arc .hx__kicker{display:none}}
@media (max-width:760px){
  .hx.hx--arc{min-height:520px}
  .hx--arc{--jh:clamp(96px,min(calc(var(--dw) * .5),21svh),190px)}
  .arc__heaven{margin:auto 0 0;padding-top:12px;box-sizing:content-box}
  .hx--arc .hx__main{margin-top:auto}
  .arc__cloud--a{width:34%;left:12%;bottom:-2%}
  .arc__cloud--b{width:38%;right:10%;bottom:-5%}
  .arc__cloud--c{width:26%;left:37%;bottom:-9%}
}
@media (max-width:400px){
  .hx--arc .hx__ctas .xbtn--ink>i{display:none}
  .hx--arc .hx__ctas .xbtn--ink{justify-content:center;padding:0 12px}
  .hx--arc .hx__ctas .xbtn{font-size:14px}
}
@media (max-width:760px){.arc__heaven{height:calc(var(--jh) * .96)}}
