/* Spiritual Gorillaz 1.0.8 — approved concept with the requested full-width modification.
   The concept controls the art direction; it is not copied as a boxed/cropped layout.
   Native artwork stays sharp and fully visible. Any extra canvas is extended with
   matching CSS atmosphere — never a blurred, stretched, or enlarged duplicate. */
:root{
  --sg-content-max:1360px;
  --sg-deep:#02070c;
  --sg-navy:#061523;
  --sg-gold:#dda43a;
  --sg-gold-bright:#ffd36d;
  --sg-hero-height:clamp(620px,50vw,840px);
  --sg-gutter:max(32px,calc((100vw - var(--sg-content-max))/2 + 32px));
}
.site-shell{width:100%;max-width:none!important;overflow-x:clip!important}
main>.home-hero,main>.page-hero,main>.concept-booking,main>.concept-merch-heading,main>.concept-merch{width:100%;max-width:none!important;margin-inline:0!important}

/* Page-specific native source artwork. */
.concept-music{--sg-native-hero:url('../../images/spiritual-gorillaz-music-hero.png')}
.concept-shows,main[data-page="media"] .page-hero{--sg-native-hero:url('../../images/spiritual-gorillaz-shows-hero.png')}
.concept-band,main[data-page="press"] .page-hero{--sg-native-hero:url('../../images/spiritual-gorillaz-band-hero.png')}
.concept-merch,.concept-merch-heading{--sg-native-hero:url('../../images/spiritual-gorillaz-merch-hero.png')}
.concept-booking{--sg-native-hero:url('../../images/spiritual-gorillaz-booking-hero.png')}

/* Home — one continuous edge-to-edge scene. The 16:9 source is shown at a
   zoomed-out contain scale, while the nearly-black source edge flows into a
   hand-built navy/blue extension. */
.home-hero.concept-home{
  position:relative!important;
  min-height:clamp(680px,56.28vw,900px)!important;
  padding:0 var(--sg-gutter)!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
  overflow:hidden!important;isolation:isolate!important;
  background:
    radial-gradient(ellipse at 53% 40%,rgba(18,74,116,.25) 0,rgba(5,28,47,.12) 32%,transparent 61%),
    radial-gradient(ellipse at 85% 89%,rgba(20,102,166,.19),transparent 42%),
    linear-gradient(90deg,#01060b 0%,#020a12 45%,#03101b 72%,#02070c 100%)!important;
}
/* Reset the older fallback containment rules that made the approved art look
   like a small billboard inside the hero. */
.concept-home .hero-artwork,
.concept-home .hero-artwork:has(.fallback-hero){
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  z-index:-2!important;overflow:hidden!important;padding:0!important;display:block!important;background:transparent!important;
}
.concept-home .hero-artwork::before{content:none!important;display:none!important}
.concept-home .hero-artwork .hero-art,
.concept-home .hero-artwork .fallback-hero,
.concept-home .hero-art{
  position:absolute!important;inset:0!important;z-index:0!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;
  object-fit:contain!important;object-position:right center!important;
  transform:none!important;filter:none!important;opacity:1!important;background:transparent!important;
}
.concept-home .hero-artwork::after{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(1,6,11,.98) 0%,rgba(1,6,11,.92) 21%,rgba(1,7,13,.67) 38%,rgba(1,7,13,.22) 55%,transparent 72%),
    linear-gradient(0deg,rgba(1,4,8,.54) 0%,transparent 25%,transparent 84%,rgba(1,4,8,.18) 100%)!important;
}
.concept-home .hero-copy{position:relative!important;z-index:4!important;width:min(650px,49vw)!important;max-width:650px!important;padding:82px 0 155px!important}
.concept-home .hero-bottom{position:absolute!important;z-index:4!important;left:var(--sg-gutter)!important;right:var(--sg-gutter)!important;bottom:26px!important;width:auto!important}

/* Interior heroes — the complete native source is the sharp foreground layer.
   The extension beneath it is built only from gradients, so there is no blurred
   split-image panel and no invented resolution. */
.page-hero{
  position:relative!important;min-height:var(--sg-hero-height)!important;
  padding:0 var(--sg-gutter)!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  overflow:hidden!important;isolation:isolate!important;
  border-bottom:1px solid rgba(69,119,150,.55)!important;
  background:
    radial-gradient(ellipse at 51% 48%,rgba(24,79,119,.20),transparent 52%),
    radial-gradient(ellipse at 87% 45%,rgba(18,91,150,.13),transparent 43%),
    linear-gradient(90deg,#01060b 0%,#020a12 47%,#04111c 74%,#02070c 100%)!important;
}
.page-hero>div:first-child{position:relative!important;z-index:4!important;width:min(650px,46vw)!important;max-width:650px!important;min-width:0!important;padding:54px 0!important}
.page-hero h1{margin-bottom:14px!important;font-size:clamp(52px,5.5vw,88px)!important;line-height:.92!important;letter-spacing:-.035em!important;text-transform:uppercase;text-shadow:0 6px 22px rgba(0,0,0,.82),0 0 25px rgba(42,118,171,.08)}
.page-hero .gold-subtitle{color:var(--sg-gold-bright)!important;font-size:clamp(20px,1.75vw,29px)!important;text-shadow:0 3px 14px rgba(0,0,0,.7)}
.page-hero .section-introduction,.page-hero .prose,.page-hero p:not(.eyebrow):not(.gold-subtitle){max-width:560px!important;color:#d9e1e6!important;font-size:clamp(14px,1.05vw,18px)!important;line-height:1.72!important;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.page-hero::before{content:none!important;display:none!important;filter:none!important;transform:none!important}
.page-hero::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(1,5,9,.98) 0%,rgba(1,5,9,.91) 22%,rgba(1,5,9,.63) 39%,rgba(1,5,9,.22) 57%,transparent 73%),
    linear-gradient(0deg,rgba(1,4,8,.36),transparent 28%,transparent 84%,rgba(1,4,8,.18))!important;
}
.page-hero>.concept-page-art,.page-hero>.music-art,.page-hero>.band-image,.page-hero>.section-artwork{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;
  overflow:hidden!important;z-index:1!important;opacity:1!important;transform:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;background:transparent!important;
}
.page-hero>.concept-page-art,.page-hero>.music-art,.page-hero>.band-image,.page-hero>.section-artwork .section-feature{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:right center!important;
  transform:none!important;filter:none!important;background:transparent!important;
}

/* Media and Press have no bundled <img>; use one sharp contained master only. */
main[data-page="media"] .page-hero,main[data-page="press"] .page-hero{
  background-image:
    linear-gradient(90deg,rgba(1,5,9,.98) 0%,rgba(1,5,9,.88) 26%,rgba(1,5,9,.45) 45%,rgba(1,5,9,.08) 66%,transparent 80%),
    var(--sg-native-hero),
    radial-gradient(ellipse at 50% 48%,rgba(24,79,119,.20),transparent 52%),
    linear-gradient(90deg,#01060b,#04111c 72%,#02070c)!important;
  background-size:100% 100%,contain,100% 100%,100% 100%!important;
  background-position:center,right center,center,center!important;
  background-repeat:no-repeat!important;
}
main[data-page="media"] .page-hero::after,main[data-page="press"] .page-hero::after{background:linear-gradient(90deg,rgba(1,5,9,.42),transparent 64%)!important}