/* Reserve the same banner space even before its image has loaded. */
body > .hero { height: clamp(120px, 16vw, 220px); }
@media (min-width: 981px) {
  body.guild-craft > .site-nav { min-height: 94px; }
  body.guild-craft > main > header { min-height: 260px; }
}
/* Shared Saftladen frame; each area supplies its own illustrated scene. */
@media (min-width: 1440px) {
  body {
    position: relative;
    isolation: isolate;
    --guild-hall-art: url("guild-hall-bank-v2.webp");
    --guild-hall-width: clamp(1120px, 56vw, 1360px);
  }
  body.guild-craft { --guild-hall-art: url("guild-hall-craft-v2.webp"); }
  body.guild-zanza { --guild-hall-art: url("guild-hall-zanza-v1.webp"); }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("guild-hall-common.webp") center top / 100% auto no-repeat;
  }
  body::after {
    content: "";
    position: absolute;
    top: 20vw;
    bottom: 0;
    left: 50%;
    width: var(--guild-hall-width);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: rgba(20, 13, 7, .94);
    box-shadow: 0 0 40px 25px rgba(20, 13, 7, .94);
  }
  body > .hero, body > .top, body > main, body > footer {
    position: relative;
    z-index: 1;
  }
  body > .top, body > main, body > footer { max-width: var(--guild-hall-width); }
  body > .hero { height: 20vw; background: transparent; z-index: 0; }
  .hero img { opacity: 0; height: 20vw; }
  /* Keep the approved Raid header pixel-identical across all three sites.
     Only the transition below the balcony blends into each themed scene. */
  .hero::after {
    display: block;
    position: fixed;
    top: 0;
    bottom: auto;
    height: 100vh;
    background: var(--guild-hall-art) center top / 100% auto no-repeat;
    mask-image: linear-gradient(to bottom, transparent 0, transparent 20vw, #000 22vw);
  }
}