/* Owner-selected decorative 2172 x 724 artwork: full width, full height.
   Preserve the complete scene and keep the book readers' compact headers. */
body:has(.hero-banner .hero-art){position:relative;isolation:isolate}
body:has(.hero-banner .hero-art)::before{
  z-index:-1;
  background:linear-gradient(180deg,#190b05,#140704);
  filter:none;
}
body .site-shell .hero-banner:has(.hero-art){
  min-height:0;
  margin:0;
  width:100vw;
  margin-inline-start:calc(50% - 50vw);
  background:#1b0e08;
  border:0;
  border-bottom:0;
}
body .site-shell .hero-banner:has(.hero-art) > a{
  display:grid;
  place-items:center;
  min-height:0;
  height:auto;
  background:radial-gradient(ellipse at center,#402510 0,transparent 72%);
}
body .site-shell .hero-banner:has(.hero-art) .hero-art{
  position:relative;
  display:block;
  inset:auto;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:3/1;
  background:url("/assets/altar-header-wide.webp") center/100% 100% no-repeat;
  filter:none;
  opacity:1;
  overflow:hidden;
  pointer-events:none;
}
body .site-shell .hero-banner:has(.hero-art)::after{display:none}
/* The supplied artwork already contains the name and cross. Keep the live
   branding text accessible without drawing a second title over the picture. */
body .site-shell .hero-banner:has(.hero-art) .hero-brand{
  position:absolute;
  inset:auto;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
body .hero-banner:has(.hero-art) .site-tools{
  position:relative;
  inset:auto;
  width:100%;
  min-height:50px;
  box-sizing:border-box;
  padding:6px 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  background:#211109;
  border-bottom:1px solid rgba(209,154,41,.25);
}
.temple-flame{
  position:absolute;
  width:max(.45%,1.8px);
  height:5.2%;
  border-radius:60% 40% 42% 48% / 78% 72% 28% 22%;
  background:radial-gradient(ellipse at 50% 70%,#fffce2 0 14%,#ffeab0 30%,#ffc95b 50%,#ee8f22 64%,transparent 77%);
  box-shadow:0 0 8px 2px rgba(244,166,54,.45);
  transform-origin:50% 100%;
  opacity:0;
  pointer-events:none;
}
.temple-flame::before{
  content:"";
  position:absolute;
  inset:-55% -170% -15%;
  background:radial-gradient(ellipse,rgba(255,180,66,.48),rgba(236,124,26,.12) 42%,transparent 72%);
  opacity:0;
  pointer-events:none;
}
/* Local candlelight only: a small static gradient, composited by opacity. */
.hero-art::after{
  content:"";
  position:absolute;
  left:0;
  top:7%;
  width:30%;
  height:80%;
  background:radial-gradient(ellipse at 40% 42%,rgba(255,177,65,.2),rgba(235,135,37,.07) 42%,transparent 72%);
  opacity:0;
  pointer-events:none;
}
/* Wick coordinates follow the five visible candles in the selected artwork. */
.temple-flame:nth-child(1){left:5.73%;top:24.4%;--flame-delay:-.7s;--flame-duration:1.9s}
.temple-flame:nth-child(2){left:7.36%;top:21.6%;--flame-delay:-1.5s;--flame-duration:2.3s}
.temple-flame:nth-child(3){left:9.61%;top:19.7%;--flame-delay:-.3s;--flame-duration:2.1s}
.temple-flame:nth-child(4){left:13.96%;top:24.5%;--flame-delay:-2.1s;--flame-duration:2.5s}
.temple-flame:nth-child(5){left:16.14%;top:23.5%;--flame-delay:-1.1s;--flame-duration:2s}
.temple-altar-flame{
  width:max(.28%,1px);
  height:2.7%;
  border-radius:50%;
  background:radial-gradient(ellipse,#fffce6 0 16%,#ffd98a 35%,rgba(247,151,40,.6) 57%,transparent 74%);
  box-shadow:0 0 6px 2px rgba(244,147,37,.34);
}
.temple-altar-flame:nth-child(6){left:36.46%;top:6.3%;--flame-delay:-.9s;--flame-duration:3.1s}
.temple-altar-flame:nth-child(7){left:70.05%;top:5.7%;--flame-delay:-2.2s;--flame-duration:3.7s}
.temple-altar-flame:nth-child(8){left:82.16%;top:5.25%;--flame-delay:-1.6s;--flame-duration:3.4s}
.hero-art[data-scene-motion="on"] .temple-flame{
  animation:temple-candle var(--flame-duration) ease-in-out var(--flame-delay) infinite;
}
.hero-art[data-scene-motion="on"] .temple-altar-flame{
  animation:temple-sanctuary-candle var(--flame-duration) ease-in-out var(--flame-delay) infinite;
}
.hero-art[data-scene-motion="on"] .temple-flame::before{
  animation:temple-candle-glow calc(var(--flame-duration) * 1.37) ease-in-out var(--flame-delay) infinite;
}
.hero-art[data-scene-motion="on"]::after{
  animation:temple-altar-light 4.7s ease-in-out -1.3s infinite;
}
.hero-art[data-scene-visible="false"] .temple-flame,
.hero-art[data-scene-visible="false"] .temple-flame::before,
.hero-art[data-scene-visible="false"]::after{animation-play-state:paused}
/* Uneven gusts and quick small corrections, with every wick anchored. */
@keyframes temple-candle{
  0%,100%{transform:rotate(-7deg) skewX(-3deg) scale(.95,1.06);opacity:.83}
  9%{transform:rotate(5deg) skewX(2deg) scale(1.05,.97);opacity:.92}
  19%{transform:rotate(14deg) skewX(5deg) scale(.88,1.25);opacity:.85}
  28%{transform:rotate(8deg) skewX(2deg) scale(.99,1.11);opacity:.96}
  39%{transform:rotate(-12deg) skewX(-5deg) scale(.9,1.3);opacity:.87}
  47%{transform:rotate(-4deg) skewX(-2deg) scale(1.08,.94);opacity:.93}
  59%{transform:rotate(10deg) skewX(4deg) scale(.93,1.18);opacity:.82}
  71%{transform:rotate(-9deg) skewX(-2deg) scale(1.02,1.09);opacity:.96}
  83%{transform:rotate(-16deg) skewX(-5deg) scale(.87,1.27);opacity:.85}
  92%{transform:rotate(3deg) skewX(2deg) scale(1.05,1);opacity:.94}
}
@keyframes temple-sanctuary-candle{
  0%,100%{transform:rotate(-2deg) scale(.97,1.02);opacity:.38}
  21%{transform:rotate(3.5deg) scale(1.04,1.13);opacity:.62}
  43%{transform:rotate(-4deg) scale(.95,1.05);opacity:.44}
  66%{transform:rotate(2deg) scale(1.02,1.1);opacity:.58}
  84%{transform:rotate(-1deg) scale(.98,.98);opacity:.4}
}
@keyframes temple-candle-glow{
  0%,100%{opacity:.34;transform:scale(.92)}
  23%{opacity:.58;transform:scale(1.07)}
  44%{opacity:.43;transform:scale(.96)}
  68%{opacity:.64;transform:scale(1.1)}
  86%{opacity:.48;transform:scale(1.03)}
}
@keyframes temple-altar-light{
  0%,100%{opacity:.26}
  18%{opacity:.48}
  39%{opacity:.31}
  62%{opacity:.47}
  81%{opacity:.35}
}
html:is(.a11y-simple,.a11y-contrast) .hero-banner:has(.hero-art) .hero-art{background-image:none!important}
html:is(.a11y-simple,.a11y-contrast) .hero-banner:has(.hero-art) .hero-brand{
  position:relative;
  width:auto;
  height:auto;
  clip-path:none;
  margin:24px 12px;
  white-space:normal;
  overflow:visible;
  transform:none;
}
html:is(.a11y-simple,.a11y-contrast) .hero-banner:has(.hero-art) .hero-art{display:none}
html.a11y-reduce-motion .temple-flame,
html.a11y-reduce-motion .temple-flame::before,
html.a11y-reduce-motion .hero-art::after{animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){
  .temple-flame,.temple-flame::before,.hero-art::after{animation:none!important;opacity:0}
}
@media(max-width:700px){
  body .site-shell .hero-banner:has(.hero-art) .hero-art{
    background-image:url("/assets/altar-header-mobile.webp");
  }
}
@media(max-width:430px){
  body .hero-banner:has(.hero-art) .site-tools{padding:5px 8px;gap:5px}
}