@charset "utf-8";
@import url("./theme-nightshift-core.css?v=lift1");

/* The top-of-page treatment stays cinematic; once content scrolls beneath the
   fixed header, a nearly opaque surface keeps navigation clear and readable.
   The shadow glows violet (not black) so the header edge stays on-theme. */
header {
  /* Fully transparent at the top: any translucent dark layer ending at the
     header's bottom edge composites a visible 1px black seam over the hero.
     The `.is-scrolled` state below supplies the dark surface after scrolling. */
  background: transparent;
  border-bottom: 1px solid rgba(143, 88, 205, 0);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

header.is-scrolled {
  background: #150f24;
  border-bottom-color: rgba(223, 178, 255, 0.18);
  box-shadow: 0 12px 28px rgba(143, 88, 205, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  header {
    transition: none;
  }
}

/* ===================================================================
   Desktop scale refinement
   -------------------------------------------------------------------
   Keep Nightshift cinematic, but bring the desktop UI closer to the
   restrained proportions used by polished modern music/event websites.
   Mobile remains governed by the core theme. The hero still fills the
   viewport; the change is to typography, spacing and component scale.
   =================================================================== */

/* Mirror the core hero artwork declarations here so the build validation
   can keep checking the public theme entry point directly. */
.hero {
  background:
    radial-gradient(
      70% 60% at 50% 30%,
      rgba(183, 140, 255, 0.22),
      transparent 72%
    ),
    radial-gradient(
      45% 40% at 85% 80%,
      rgba(143, 88, 205, 0.2),
      transparent 70%
    ),
    linear-gradient(
      170deg,
      rgba(9, 7, 17, 0.82) 20%,
      rgba(18, 10, 36, 0.66) 60%,
      rgba(9, 7, 17, 0.9) 100%
    ),
    image-set(
      url("/assets/images/hero-mobile.jpg") 1x,
      url("/assets/images/hero-mobile@2x.jpg") 2x
    ),
    linear-gradient(180deg, #aa31ea 0%, #7440ef 52%, #5633df 100%);
  background-position: center, center, center, center, center;
  background-size: cover, cover, cover, cover, cover;
  background-repeat: no-repeat;
}

@media (min-aspect-ratio: 1 / 1) {
  .hero {
    background:
      radial-gradient(
        70% 60% at 50% 30%,
        rgba(183, 140, 255, 0.22),
        transparent 72%
      ),
      radial-gradient(
        45% 40% at 85% 80%,
        rgba(143, 88, 205, 0.2),
        transparent 70%
      ),
      linear-gradient(
        170deg,
        rgba(9, 7, 17, 0.8) 20%,
        rgba(18, 10, 36, 0.6) 60%,
        rgba(9, 7, 17, 0.9) 100%
      ),
      image-set(
        url("/assets/images/hero-centred.webp") 1x,
        url("/assets/images/hero-centred@2x.webp") 2x
      ),
      linear-gradient(180deg, #aa31ea 0%, #7440ef 52%, #5633df 100%);
    background-position:
      center,
      center,
      center,
      center bottom,
      center;
    background-size: cover, cover, cover, cover, cover;
    background-repeat: no-repeat;
  }
}

@media (min-aspect-ratio: 3 / 1) {
  .hero {
    background-size:
      cover,
      cover,
      cover,
      auto 100%,
      cover;
  }
}

@media (min-width: 761px) {
  :root {
    --header: 76px;
  }
  header,
  nav {
    height: var(--header);
  }
  .hero h1 {
    font-size: clamp(4rem, 6.5vw, 5.75rem);
    line-height: 0.86;
  }
  .hero-copy {
    width: min(100%, 520px);
    margin-top: 20px;
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    line-height: 1.6;
  }
  .hero .eyebrow {
    margin-bottom: 20px;
  }
  .hero .button {
    min-height: 46px;
    margin-top: 28px;
    padding: 0 24px;
    font-size: 0.78rem;
  }
  .hero .youtube-link {
    gap: 10px;
    margin-top: 16px;
    padding: 9px 18px 9px 9px;
    font-size: 0.74rem;
  }
  .hero .youtube-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    padding: 6px;
  }
  .page-hero {
    padding: 144px var(--gutter) 72px;
  }
  .page-hero h1 {
    font-size: clamp(3rem, 5.2vw, 4.5rem);
    line-height: 0.95;
    text-wrap: balance;
  }
  .page-hero .hero-copy {
    max-width: 58ch;
    font-size: 1.05rem;
    line-height: 1.62;
  }
  .page-hero .eyebrow {
    margin-bottom: 16px;
  }
  .page-hero .about-hero-title {
    max-width: 760px;
    gap: 0.06em;
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
    line-height: 0.94 !important;
  }
  section {
    padding: 72px 0;
  }
  .section-head {
    gap: 12px;
    margin-bottom: 36px;
  }
  .section-head h2 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 0.98;
  }
  .label {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
  }
  .intro {
    max-width: 640px;
    margin-bottom: 36px;
  }
  .intro p {
    margin-bottom: 22px;
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .section-lead {
    margin-bottom: 28px;
    font-size: 1.05rem;
    line-height: 1.65;
  }
  .two-col {
    gap: 48px;
  }
  .features {
    gap: 20px;
  }
  .card {
    padding: 26px 24px;
    border-radius: 14px;
  }
  .card strong {
    margin-bottom: 10px;
    font-size: 1.3rem;
  }
  .card p {
    font-size: 0.96rem;
    line-height: 1.6;
  }
  .members .card strong {
    font-size: 1.4rem;
  }
  .panel {
    padding: 26px 24px;
    gap: 22px;
  }
  .panel h3 {
    margin-bottom: 14px;
    font-size: 1.65rem;
  }
  .panel p {
    font-size: 0.98rem;
    line-height: 1.62;
  }
  .mini-title {
    margin-bottom: 14px;
    font-size: 0.78rem;
  }
  .quote {
    margin: 32px 0;
    padding: 30px 28px 28px 52px;
    font-size: 1.15rem;
    line-height: 1.6;
  }
  .testimonial {
    padding: 24px 22px 22px;
  }
  .testimonial blockquote {
    font-size: 1rem;
    line-height: 1.58;
  }
  .value-list li {
    padding: 15px 17px;
    font-size: 0.96rem;
  }
  .faq summary {
    padding: 16px 18px;
    font-size: 0.98rem;
  }
  .faq details p {
    padding: 0 18px 18px;
    font-size: 0.96rem;
  }
  .feed-wrapper {
    padding: 20px;
  }
  .button {
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.78rem;
  }
  .small {
    font-size: 0.78rem;
  }
  .landing-proof {
    padding-block: 32px;
  }
  .proof-summary {
    font-size: clamp(1.35rem, 2vw, 1.7rem);
  }
  .proof-facts strong {
    font-size: 1.15rem;
  }
  .featured-video-layout {
    gap: 44px;
  }
  .booking h2 {
    margin-bottom: 24px;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 0.98;
  }
  .booking p {
    font-size: 1rem;
    line-height: 1.65;
  }
  .footer-cta {
    max-width: 600px;
    margin: 56px auto 36px;
    padding: 24px 22px;
    gap: 14px;
  }
  .footer-cta h2 {
    font-size: clamp(2rem, 3.4vw, 3rem);
  }
  footer .social-btn {
    width: 42px;
    height: 42px;
  }
  footer .social-btn svg {
    width: 18px;
    height: 18px;
  }
  body .repertoire-panel h3 {
    margin-bottom: 22px;
    font-size: clamp(2rem, 3vw, 2.75rem);
  }
}
@media (min-width: 981px) {
  body .gig-row {
    grid-template-columns: 90px minmax(0, 1fr) minmax(168px, auto);
    column-gap: 20px;
    min-height: 96px;
    padding: 16px 20px;
  }
  body .gig-date {
    padding-right: 18px;
  }
  body .gig-day {
    font-size: 1.8rem;
  }
  body .gig-venue {
    font-size: 1.2rem;
  }
  body .gig-action {
    min-width: 168px;
    gap: 8px;
    padding-left: 16px;
  }
  body .next-gig {
    /* Bounded tracks, not `auto`. With `minmax(0, 1fr)` for the details column
       and `auto` for the utility column, the utility track resolved to its
       max-content and took 585px, leaving the details column 143px. The venue,
       town and playing time then wrapped to three lines each ("9pm - 11pm"
       broke across "9pm" / "-" / "11pm") next to a wide empty gap. The utility
       column now has a real maximum and the details column a real minimum. */
    grid-template-columns: 96px minmax(220px, 1fr) minmax(0, 420px);
    column-gap: 24px;
    padding: 22px 24px;
  }
  body .next-gig-date {
    padding-right: 22px;
  }
  body .next-gig-venue {
    font-size: 1.45rem;
  }
  body .next-gig-actions {
    /* Matches body .gig-action. At 200px this was wider than the utility
       column could give it once that column was bounded, and pushed the
       buttons past the card edge between 901px and 980px. */
    min-width: 168px;
    max-width: 236px;
    padding-left: 18px;
  }
  body .next-gig-heading h2 {
    font-size: clamp(2rem, 2.8vw, 2.4rem);
  }
}
@media (min-width: 1160px) {
  .logo {
    font-size: 1.5rem;
  }
  .nav a:not(.nav-book) {
    padding: 7px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
  .nav a.nav-book {
    padding: 8px 12px;
    font-size: 0.72rem;
  }
}
@media (min-width: 1400px) {
  .two-col {
    gap: 56px;
  }
  .features,
  .members,
  .press-events {
    gap: 22px;
  }
  .press-layout {
    gap: 56px;
  }
}
body .gig-details,
body .gig-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(183, 140, 255, 0.24);
  border-radius: 999px;
  background: rgba(183, 140, 255, 0.08);
  color: #d9c3f6 !important;
  font:
    700 0.74rem/1 "Manrope",
    sans-serif;
  letter-spacing: 0.015em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
body .gig-details:hover,
body .gig-details:focus-visible,
body .gig-dir:hover,
body .gig-dir:focus-visible {
  border-color: rgba(207, 166, 255, 0.52);
  background: rgba(183, 140, 255, 0.15);
  color: #ffffff !important;
  transform: translateY(-1px);
}
body .next-gig-actions .gig-dir {
  width: 100%;
  min-height: 38px;
}
@media (max-width: 760px) {
  body .gig-details,
  body .gig-dir {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 0.76rem;
  }
  body .next-gig-actions .gig-dir {
    min-height: 44px;
  }
}
.landing-proof .proof-facts strong {
  color: #fff;
  font-size: clamp(1.7rem, 4.5vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.label,
.mini-title,
.hero-eyebrow {
  opacity: 0.88;
}
.section-head h2,
.panel h3,
.card strong {
  text-wrap: balance;
}
.card,
.value-list li,
.faq details {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.panel,
.footer-cta,
.next-gig {
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}
.section-actions .small,
.links .small {
  opacity: 0.9;
}
.section-actions .small:hover,
.section-actions .small:focus-visible,
.links .small:hover,
.links .small:focus-visible {
  opacity: 1;
}
.repertoire-panel h3 {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.home-next-date .next-gig {
  border-color: rgba(207, 166, 255, 0.32);
  background:
    radial-gradient(
      120% 160% at 0% 0%,
      rgba(183, 140, 255, 0.15),
      transparent 58%
    ),
    rgba(9, 7, 17, 0.58);
}
@media (min-width: 761px) {
  #story .two-col,
  #the-set .two-col,
  #enquire .two-col {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  }
  #enquire .panel,
  .repertoire-panel,
  #story .panel {
    border-color: rgba(207, 166, 255, 0.28);
  }
  #kind-words .reviews-panel h3 {
    font-size: clamp(2rem, 3vw, 2.65rem);
  }
}
@media (max-width: 760px) {
  section {
    padding: 64px 0;
  }
  .page-hero {
    padding-bottom: 58px;
  }
  .page-hero h1 {
    font-size: clamp(2.75rem, 13vw, 4.25rem);
    line-height: 0.94;
    text-wrap: balance;
  }
  .page-hero .hero-copy {
    max-width: 34rem;
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.58;
  }
  .section-head {
    gap: 7px;
    margin-bottom: 28px;
  }
  .section-head h2 {
    /* Keep the smallest supported phone heading safely inside the verifier's
       32px floor while retaining fluid scaling above that width. */
    font-size: clamp(34px, 10vw, 3rem) !important;
    line-height: 0.98;
  }
  .label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }
  .mini-title {
    margin-bottom: 10px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }
  .section-lead {
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.6;
  }
  .two-col {
    gap: 24px;
  }
  .panel {
    padding: 22px 20px;
    gap: 18px;
  }
  .panel h3 {
    margin-bottom: 10px;
    font-size: 1.55rem;
    line-height: 1.08;
  }
  .card {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .card strong {
    margin-bottom: 7px;
    font-size: 1.2rem;
  }
  .card p {
    font-size: 0.94rem;
    line-height: 1.55;
  }
  .value-list {
    gap: 10px;
  }
  .value-list li {
    padding: 14px 15px;
    border-radius: 10px;
    background: rgba(9, 7, 17, 0.3);
    box-shadow: none;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .features,
  .members {
    gap: 14px;
  }
  .section-actions {
    margin-top: 22px;
  }
  .section-actions .button,
  .section-actions .small {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  #line-up .members .card {
    border-color: rgba(183, 140, 255, 0.24);
    background: rgba(9, 7, 17, 0.5);
  }
  #what-you-get .features .card,
  #included .features .card {
    background: rgba(9, 7, 17, 0.28);
    box-shadow: none;
  }
  .repertoire-panel {
    text-align: center;
    border-color: rgba(207, 166, 255, 0.3);
  }
  .repertoire-panel h3 {
    margin: 2px 0 10px;
    font-size: clamp(2.8rem, 15vw, 4rem);
    line-height: 0.95;
  }
  .next-gig-heading {
    margin-bottom: 22px !important;
  }
  #enquire .panel {
    border-color: rgba(207, 166, 255, 0.34);
    background:
      radial-gradient(
        120% 160% at 50% 0%,
        rgba(183, 140, 255, 0.16),
        transparent 58%
      ),
      rgba(9, 7, 17, 0.56);
  }
  #enquire .enquiry-list li {
    border-color: rgba(183, 140, 255, 0.12);
  }
  .faq details {
    box-shadow: none;
  }
}
/* Square and near-square tablet windows need true vertical centring. The
   desktop cinematic lift is useful on landscape screens, but it shifts the
   hero group too high when viewport height approaches viewport width.

   With no transform the trio already sits 21px below centre: the hero's
   120px/96px padding moves the content box down 12px and the occasions
   line's top margin adds 9px more. This used to push down a further 21px,
   which left the trio 42px low at 1024x1024 and failed the deployed hero
   check on every run. Lifting by the same 21px centres it at any square
   size, since every term is a fixed pixel value. */
@media (min-width: 761px) and (min-aspect-ratio: 4 / 5) and (max-aspect-ratio: 5 / 4) {
  .hero-grid {
    transform: translateY(-21px);
  }
}

@media (min-width: 761px) and (max-height: 560px) {
  .hero {
    padding-top: calc(var(--header) + 12px);
  }
  /* Landscape phones pick up the desktop 36px title margin from styles-base,
     which left a 56px title/copy gap on a 390px-tall screen. Use the same
     rhythm as portrait phones. */
  .hero h1 {
    margin-bottom: 18px;
  }
  /* The 88px/40px hero padding moves the content box down 24px and the
     occasions line's top margin adds 9px more, leaving the trio 33px below
     centre. Every term is a fixed pixel value, so lift by the same 33px; the
     group still clears the fixed header by 24px or more down to 360px tall. */
  .hero-grid {
    transform: translateY(-33px);
  }
}