*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#050505;color:#fdfaf4;font-family:Arial,Helvetica,sans-serif}.skip{position:absolute;left:0;top:-70px;padding:10px;background:white;color:black;z-index:15}.skip:focus{top:0}main{width:100%}.artboard{width:100%;max-width:1800px;margin-inline:auto;position:relative;line-height:0;overflow:hidden}.approved{display:block;width:100%;height:auto;pointer-events:none}.hotspot{display:block;position:absolute;appearance:none;-webkit-appearance:none;border:none!important;outline:none;background:transparent!important;box-shadow:none!important;padding:0;cursor:pointer;color:transparent;z-index:1}.hotspot:focus-visible{outline:3px solid #fff!important;outline-offset:-3px;border-radius:10px}.hotspot:hover{background:#ffe36d0b!important}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}dialog{position:fixed;max-width:min(94vw,630px);width:100%;max-height:86vh;overflow-y:auto;border-radius:16px;border:2px solid #d5ad54;background:linear-gradient(155deg,#23201a,#080808 70%);color:#fff;padding:26px;box-shadow:0 0 40px #d9aa4760}dialog::backdrop{background:rgba(0,0,0,.75)}dialog h2{font-size:clamp(25px,4vw,40px);color:#ffdb78;text-shadow:0 0 12px #aa772c;margin:10px 0}.eyebrow{color:#cfc6ae;font-size:12px;letter-spacing:.13em;font-weight:700}.close{float:right;cursor:pointer;border:1px solid #ffcf70;background:#171717;color:white;border-radius:8px;font-size:27px;width:43px;height:43px}#panel-intro{font-size:15px;line-height:1.6;color:#e9e3d6}.choice,.nav-choice{display:block;background:#191919;border:1px solid #7e6338;border-radius:10px;color:#fff;padding:13px 16px;margin:9px 0;text-align:left;width:100%;font-size:16px}.nav-choice{cursor:pointer}.nav-choice:hover{border-color:#ffe7a2}.pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}.pager button{border:1px solid #eac46d;background:#c99936;color:#090909;border-radius:9px;padding:10px 13px;font-weight:800;cursor:pointer}.pager button:disabled{opacity:.3;cursor:default}.pager span{font-size:14px;color:#e1d9c8}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Corrected design — positions are percentages of the original 941 × 1672 image. */
.artboard{container-type:inline-size}
.tagline-fixed{position:absolute;left:5%;right:5%;top:26.52%;height:2.7%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;
 color:#f7f8ff;font:italic 900 clamp(5px,1.65cqw,29px)/1 Arial,sans-serif;letter-spacing:-.013em;text-shadow:0 2px 3px #000,0 0 5px #222;z-index:2;pointer-events:none}
/* Equalizer: actual segmented LED columns, not randomly jumping blocks. */
.animated-eq{position:absolute;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-around;gap:.6%;padding:0 .3% .4%;z-index:3;
 top:10.65%;height:8.55%;width:15.3%;overflow:hidden; background:linear-gradient(90deg,#030303 0%,#030303ee 8%,#030303ee 92%,#030303 100%)}
.eq-left{left:3.0%}.eq-right{right:3.0%}
.amp-column{width:5%;flex:1;min-width:0;height:32%;border-radius:1px 1px 0 0;
 background:repeating-linear-gradient(to top,transparent 0 13%,#070707 13% 17%),linear-gradient(to top,#b7c2cb,#ffbf3e 56%,#fff8d5);
 filter:drop-shadow(0 0 2px #deb76770);will-change:height}
/* The animated sweep travels INSIDE the original thin silver rails in the header, at y≈84. */
.header-rail{position:absolute;z-index:4;pointer-events:none;top:4.77%;height:.52%;overflow:hidden;background:transparent}
.rail-left{left:13.9%;width:26.7%}.rail-right{left:58.6%;width:26.7%}
.header-rail::after{content:"";position:absolute;left:0;top:0;height:100%;width:14%;border-radius:999px;
 background:radial-gradient(ellipse, #fffbe5 1%,#ffcf64 32%,#ffb731 52%,transparent 76%);
 filter:drop-shadow(0 0 3px #ffcb56) drop-shadow(0 0 5px #fff);animation:rail-move 7.5s linear infinite}
.rail-right::after{animation-delay:-3.75s}
@keyframes rail-move{from{transform:translateX(-100%)}to{transform:translateX(730%)}}
/* The cross itself is around x=470,y=155: precisely bounded soft gold, no huge spotlight onto WITNESS letters. */
.cross-core-light{position:absolute;z-index:4;pointer-events:none;left:44.8%;top:7.25%;width:10.6%;height:4.65%;
 background:radial-gradient(ellipse at 50% 45%,#ffe4a444 0%,#ffb51f3b 30%,transparent 70%);mix-blend-mode:screen;
 filter:drop-shadow(0 0 3px #ffbc48);animation:cross-soft 8s ease-in-out infinite}
@keyframes cross-soft{0%,100%{opacity:.35}35%{opacity:.85}65%{opacity:.52}}
.chrome-sheen{position:absolute;z-index:3;pointer-events:none;left:18%;top:11.5%;width:63%;height:6.7%;overflow:hidden;mix-blend-mode:screen}
.chrome-sheen:after{content:"";position:absolute;top:0;bottom:0;width:8%;transform:translateX(-150%) skewX(-14deg);
 background:linear-gradient(90deg,transparent,#fff9,#fff2,transparent);filter:blur(4px);animation:chrome-shine 13s ease-in-out infinite}
@keyframes chrome-shine{0%,20%{transform:translateX(-160%) skewX(-14deg);opacity:0}25%{opacity:.5}43%{transform:translateX(1350%) skewX(-14deg);opacity:.5}48%,100%{opacity:0}}

/* Restoration: original HD category art and faceted borders stay visible.
   Removed rotating overlays, independent sparkle dots, and duplicate frames. */
.category-hot{z-index:5!important;border-radius:clamp(5px,1.1vw,16px)}
.category-hot:hover,.category-hot:focus-visible{background:rgba(255,220,137,.025)!important;box-shadow:0 0 16px rgba(255,213,97,.34)!important;transform:none}
.explore-hot{z-index:5!important}
@media(prefers-reduced-motion:reduce){.amp-column{transition:none}.cross-core-light,.header-rail:after,.chrome-sheen:after{animation:none!important}}

/* Yellow only on the three requested words; white elsewhere. Original compact font is preserved. */
.tagline-fixed{gap:0;letter-spacing:-.021em}
.tagline-gold{color:#ffe12a;text-shadow:0 0 2px #b47a00,0 0 5px #2c2100}

/* WITNESS category-only motion, scoped to image interiors. No movement of frames,
   titles, labels, buttons, or the established equalizers beside the WITNESS logo. */
.scenic {position:absolute;pointer-events:none;z-index:2;overflow:hidden;contain:paint;isolation:isolate}
/* Rock/rap/country artwork and labels stay still. These LED columns are the
   existing equalizer motif inside Genres, not another equalizer near the logo. */
.scenic-genres {left:15.9%;top:54.35%;width:15.2%;height:4.25%;border-radius:2px}
.genre-meter {position:absolute;inset:0;display:flex;align-items:end;gap:1.6%;padding:1% 0 0;mix-blend-mode:screen}
.genre-led {flex:1;max-height:97%;height:var(--level,34%);border-radius:1px 1px 0 0;
background:repeating-linear-gradient(to top,rgba(0,0,0,0) 0 4px,rgba(0,0,0,.92) 4px 6px),
linear-gradient(to top,rgba(255,155,19,.85) 0%,rgba(255,212,89,.95) 65%,rgba(255,250,218,.97) 100%);
filter:drop-shadow(0 0 1.5px rgba(255,190,50,.75));transition:height 125ms ease-out}
/* The clouds live exclusively in sky portions—not over the title or cross. */
.scenic-biblical {left:51.1%;top:53.05%;width:12.2%;height:4.10%;border-radius:2px;
mask-image:linear-gradient(to right,transparent 0%,black 16%,black 86%,transparent 100%),
linear-gradient(to bottom,transparent 0%,black 19%,black 75%,transparent 100%);
mask-composite:intersect}
.scenic-mood {left:72.3%;top:52.55%;width:23.3%;height:5.2%;border-radius:2px;
mask-image:linear-gradient(to bottom,transparent 0%,black 26%,black 77%,transparent 100%)}
.scenic-spanish {left:19%;top:68.1%;width:13.1%;height:3.7%;
mask-image:linear-gradient(to right,transparent 0%,black 20%,black 87%,transparent 100%)}
.scenic-children {left:48.8%;top:68.15%;width:13.6%;height:2.7%;
mask-image:linear-gradient(to bottom,transparent 0%,black 24%,black 70%,transparent 100%)}
/* Cloud-shaped highlights move, but the cross/building/children and their captions do not. */
.drifting-cloud {position:absolute;left:-85%;top:7%;width:120%;height:75%;
opacity:.38;filter:blur(3px);mix-blend-mode:screen;
background:
 radial-gradient(ellipse 20% 22% at 16% 58%,rgba(238,247,255,.56) 0 52%,transparent 74%),
 radial-gradient(ellipse 27% 28% at 45% 41%,rgba(238,243,254,.59) 0 48%,transparent 74%),
 radial-gradient(ellipse 22% 20% at 74% 61%,rgba(245,247,255,.45) 0 51%,transparent 76%);
animation:sky-travel 22s linear infinite}
.biblical-cloud-two {top:36%;width:105%;opacity:.20;animation-duration:33s;animation-delay:-13s;filter:blur(4px)}
.mood-cloud {top:0%;width:114%;opacity:.22;animation-duration:28s}
.spanish-cloud {top:12%;opacity:.35;animation-duration:24s}
.children-cloud {top:0%;opacity:.23;animation-duration:29s}
@keyframes sky-travel {from{transform:translateX(-4%)}to{transform:translateX(145%)}}
/* Only atmospheric light changes inside Mood & Purpose, simulating a slow sunset
   without shifting the entire original scene or moving its typography. */
.sunset-atmosphere {position:absolute;inset:0;background:linear-gradient(to bottom,
 rgba(255,218,122,0) 0%,rgba(252,152,51,.09) 48%,rgba(31,5,51,.33) 100%);
mix-blend-mode:multiply;animation:sunset-shift 24s ease-in-out infinite alternate}
@keyframes sunset-shift {0%{opacity:.08;transform:translateY(-8%)}100%{opacity:.65;transform:translateY(2%)}}
/* Five glows match the five *existing* gold stars. Absolutely no jewel objects. */
.scenic-popular {left:75.25%;top:69.90%;width:12.0%;height:1.35%;overflow:visible}
.star-glint {position:absolute;top:15%;width:16%;height:95%;border-radius:50%;
opacity:0;mix-blend-mode:screen;filter:blur(2px);
background:radial-gradient(ellipse at center,rgba(255,255,240,.90),rgba(255,225,125,.62) 28%,transparent 68%);
animation:star-sequence 8s ease-in-out infinite}
.star-one{left:2%;animation-delay:0s}
.star-two{left:22%;animation-delay:1.2s}
.star-three{left:42%;animation-delay:2.4s}
.star-four{left:62%;animation-delay:3.6s}
.star-five{left:82%;animation-delay:4.8s}
@keyframes star-sequence {0%,5%,24%,100%{opacity:0}10%,15%{opacity:.95}19%{opacity:.2}}
@media (prefers-reduced-motion:reduce){
 .genre-led{transition:none!important}
 .drifting-cloud,.sunset-atmosphere,.star-glint{animation:none!important;opacity:0!important}
}


/* Clickable elements — the yellow square tracks each existing clickable hotspot.
   No image overlay, no page shaking, no new frames drawn at rest. */
.hotspot{cursor:pointer!important;touch-action:manipulation;transition:background-color .16s ease,box-shadow .16s ease,outline-color .16s ease!important}
.hotspot:hover,.hotspot:focus-visible{
 outline:3px solid #ffe36a!important;
 outline-offset:-4px!important;
 border-radius:clamp(5px,1.1vw,17px)!important;
 background:rgba(255,215,80,.075)!important;
 box-shadow:inset 0 0 12px rgba(255,220,127,.17),0 0 18px 3px rgba(255,208,82,.55)!important;
 transform:none!important;
}
.hotspot:active{background:rgba(255,231,128,.16)!important;outline-color:#fff4b8!important}
.hotspot.footer-hot:hover,.hotspot.footer-hot:focus-visible{border-radius:6px!important;box-shadow:0 0 12px rgba(255,210,90,.34)!important}
/* Keep approved bevels as the only constant frames. Subtle pointers show interactivity
   where the image already has navigation icons, without new dots or bars. */
.nav-choice:focus-visible,.pager button:focus-visible,.close:focus-visible{
 outline:3px solid #ffe36a;outline-offset:3px;box-shadow:0 0 12px rgba(255,208,82,.5);
}
@media(hover:none){.hotspot:focus-visible{outline-width:3px!important}}
@media(prefers-reduced-motion:reduce){.hotspot{transition:none!important}}

/* Aligned interactives. Target rectangles were measured from the original
   941×1672 approved image and scale automatically at every screen width. */
.hotspot:hover,.hotspot:focus-visible{
  outline:2px solid #ffe36a!important;
  outline-offset:-2px!important;
  background:rgba(255,223,112,.035)!important;
  box-shadow:0 0 12px 2px rgba(255,202,80,.55),inset 0 0 10px rgba(255,220,125,.12)!important;
}
.category-hot:hover,.category-hot:focus-visible{
  border-radius:12px!important;
  outline-offset:-3px!important;
}
.explore-hot:hover,.explore-hot:focus-visible{
  border-radius:16px!important;
  outline-offset:-3px!important;
}
.menu-hot:hover,.menu-hot:focus-visible,.search-hot:hover,.search-hot:focus-visible{
  border-radius:12px!important;
}
.footer-hot:hover,.footer-hot:focus-visible{
  border-radius:5px!important;
}

/* Footer-only correction: box surrounds the actual five words. */
.hotspot.footer-hot:hover,.hotspot.footer-hot:focus-visible{
  outline:2px solid #ffe36a!important;
  outline-offset:-1px!important;
  border-radius:5px!important;
  background:rgba(255,223,112,.045)!important;
  box-shadow:0 0 9px 1px rgba(255,202,80,.46)!important;
}