/* HELL-MU / Etap 7 — top architecture and compact clock bar.
   Extends Etap 6 while preserving native HTML links and server behavior. */
.masthead{
  isolation:isolate;
  background:radial-gradient(ellipse 58% 65% at 50% 46%,rgba(154,28,12,.26),rgba(92,14,10,.13) 58%,transparent 100%)!important;
}
/* Art is deliberately separate from clickable logo/menu elements. */
.masthead::after{
  content:"";
  display:block;
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:0;right:0;top:0;bottom:0;
  background:url('../images/hell-header-castles-v7.webp') center bottom/100% 100% no-repeat;
  opacity:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 80%,transparent 100%);
}
.masthead::before{
  background-image:url('../images/hell-logo-v7-feathered.png')!important;
  width:min(700px,61vw)!important;
  height:269px!important;
  top:2px!important;
  background-size:contain!important;
  background-position:center center!important;
}
/* Clear hierarchy, more visible heading without another line under the logo. */
.masthead-caption{display:none!important}
.header-sidecopy{top:65px!important;left:2.7%!important;z-index:3!important}
.header-tagline{top:120px!important;right:2.8%!important;z-index:3!important}
.utility-bar{z-index:8!important}
/* SERVER TIME in precisely one row at desktop and mobile sizes. */
.server-clock{min-height:0!important}
.server-clock .clock-inside{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 flex-direction:row!important;
 flex-wrap:nowrap!important;
 gap:8px!important;
 min-height:46px!important;
 padding:7px 13px!important;
}
.server-clock .clock-caption{
 flex:0 0 auto!important;
 display:block!important;
 white-space:nowrap!important;
 font-size:13px!important;
 line-height:1!important;
 letter-spacing:.2px!important;
}
.server-clock time{
 flex:1 1 auto!important;
 min-width:0!important;
 font-size:clamp(12px,.86vw,16px)!important;
 font-variant-numeric:tabular-nums!important;
 text-align:right!important;
 line-height:1.1!important;
 letter-spacing:0!important;
 white-space:nowrap!important;
}
.server-clock .clock-note{display:none!important}
@media(max-width:1599px) and (min-width:761px){
 .masthead::before{width:min(690px,64vw)!important}
 .server-clock .clock-caption{font-size:11px!important}
 .server-clock time{font-size:12px!important}
}
@media(max-width:760px){
 .masthead::after{opacity:.55;background-size:auto 100%}
 .masthead::before{width:min(510px,100vw)!important;height:165px!important;top:2px!important}
 .server-clock .clock-inside{min-height:44px!important;padding:6px 10px!important}
 .server-clock .clock-caption{font-size:12px!important}
 .server-clock time{font-size:clamp(12px,3.3vw,15px)!important}
}
@media(max-width:400px){
 .server-clock .clock-caption{font-size:11px!important}
 .server-clock time{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){.masthead::before{animation:none!important}}