/* HELL-MU / ETAP 4 — 1450px center, readable header, real responsive desktop */
@media (min-width: 761px) {
  .navigation,
  .content-grid { width: min(1450px, calc(100% - 32px)); }
  .feature-area,
  .bottom-promo,
  footer { max-width: 1450px; }
  .page-shell { width: min(100%, 1536px); }
  .content-grid { grid-template-columns: minmax(0, 1fr) clamp(265px, 21vw, 310px); gap: 16px; }
  .navigation { min-height: 62px; }
  .nav-items { height: 48px; }
  .nav-items a { font-size: clamp(11px, .85vw, 14px); }
  .hero { height: clamp(290px, 22vw, 337px); }
  .hero h1 { font-size: clamp(29px, 2.5vw, 40px); }
  .hero-copy { top: 13%; }
  .quick-card { height: 145px; }
  .quick-art { height: 100px; }
  .feature-area { margin-top: 42px; }
  .panel-header h2 { font-size: 15px; }
  .stat-list > div { font-size: 11.5px; }
  .rank-table { font-size: 12px; }
  .news-row { font-size: 12px; }
}
/* Main masthead has one logo image only; account bar is HTML, not baked into art. */
.masthead::before {
  background-image: url('../images/hell-header-logo-only.png') !important;
}
.masthead { height: 246px; }
.header-sidecopy { position: absolute; z-index:2; top: 40px; left: max(20px, 3.5%); 
  text-align: left; color: #ecc28b; text-shadow: 0 2px 7px #000,0 0 18px #000;
  padding:7px 13px; border-left:2px solid #9c4529; background:linear-gradient(90deg,rgba(11,4,4,.65),transparent);
  pointer-events: none; }
.header-sidecopy strong { display: block; font: 18px/1.25 Georgia,serif; letter-spacing:1.2px; }
.header-sidecopy small { display:block; margin-top:4px; color:#d8ba96; font:11px/1.4 Georgia,serif; letter-spacing:2px; }
.header-tagline { position:absolute; z-index:2; right: clamp(150px, 15%, 235px); top:90px; 
  font:italic 26px/1.16 Georgia,serif; color:#ed5a38; text-shadow: 0 2px 3px #000, 0 0 18px #220000; 
  text-align:center; transform: rotate(-5deg); pointer-events:none; }
.utility-bar { top: 10px; right: max(18px, 3.2%); gap: 8px; z-index:7; }
.utility-actions { gap: 0; min-height:36px; padding: 3px 7px; font: 13px/1.2 Georgia,serif; }
.utility-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:29px; padding:3px 11px;
  border-left:1px solid #4d2926; white-space:nowrap; color:#f4d2b3; font-weight:600; letter-spacing:.4px; }
.utility-actions a:hover { background:#59120e; color:#fff; }
.utility-actions .languages { display:flex; align-items:center; padding:0 10px; font:15px Georgia,serif; white-space:nowrap; }
.demo-label { font-size: 9px; }
/* Small desktop screens need content to breathe, without overlapping hero CTA. */
@media (min-width: 761px) and (max-width: 1340px) {
  .header-sidecopy { top:58px; left:19px; }
  .header-sidecopy strong { font-size:14px; }
  .header-sidecopy small { font-size:9px; letter-spacing:1px; }
  .header-tagline { font-size:19px; top:102px; right:13%; }
  .content-grid { grid-template-columns: minmax(0,1fr) 268px; }
  .hero-copy { left:6%; }
  .quick-card { height:132px; }
  .quick-art { height:90px; }
}
@media (max-width: 760px) {
  .masthead { height:190px; }
  .masthead::before { background-image:url('../images/hell-header-mobile-logo.png') !important; }
  .header-sidecopy, .header-tagline { display:none; }
  .utility-bar { top:6px; right:7px; }
  .utility-actions { font-size:11px; min-height:29px; padding:2px 3px; }
  .utility-actions a { min-height:25px; padding:2px 7px; }
  .utility-actions .languages { display:none; }
}
@media (max-width:440px) { .masthead { height:145px; } }