:root {
  color-scheme:dark;
  --bg:#050507;
  --white:#f5f3f0;
  --gold:#e7a820;
  --muted:#c8c2c8;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
}
a {
  color:inherit;
  text-decoration:none;
}
a:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:6px;
}
a:hover {
  color:var(--gold);
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  transform:translateY(-200%);
  z-index:10;
  padding:14px;
  background:var(--bg);
}
.skip-link:focus {
  transform:none;
}
.hero {
  position:relative;
  max-width:1800px;
  min-height: min(58vw,1044px);
  margin:auto;
  overflow:hidden;
  background:radial-gradient(ellipse at 52% 30%,#481d341f,transparent 52%);
}
.site-header {
  position:relative;
  z-index:2;
  padding:1.8% 3.5%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
}
.brand {
  display:block;
  white-space:nowrap;
}
.brand-the {
  display:block;
  font-size:clamp(20px,2.2vw,40px);
  letter-spacing:.25em;
  line-height:1.2;
}
.brand-name {
  display:block;
  font-size:clamp(34px,5.15vw,92px);
  font-weight:200;
  letter-spacing:.045em;
  line-height:1.15;
}
.genres {
  display:flex;
  align-items:center;
  gap:1.2em;
  margin-top:.75em;
  font-size:clamp(13px,1.35vw,24px);
  letter-spacing:.16em;
}
.genres b {
  font-weight:400;
  color:var(--gold);
}
nav {
  display:flex;
  align-items:center;
  gap:3.2vw;
  font-size:clamp(14px,1.2vw,21px);
  letter-spacing:.05em;
  white-space:nowrap;
}
nav a {
  padding:1em 0;
}
.nav-contact {
  border:1px solid var(--gold);
  border-radius:3px;
  padding:1em 1.25em;
}
.performers {
  position:absolute;
  right:0;
  bottom:0;
  width:58%;
  line-height:0;
  /* Mask only stray lettering at the crop's top and left edges. */mask-image:linear-gradient(to bottom,transparent 5%,#000 8%),linear-gradient(to right,transparent 2.5%,#000 4%);
  mask-composite:intersect;
}
.performers img {
  width:100%;
  height:auto;
  display:block;
}
.hero-copy {
  position:relative;
  z-index:1;
  margin:11.3% 0 2.5% 3.8%;
  width:34%;
}
h1,h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.055em;
}
h1 {
  font-size:clamp(36px,4.9vw,88px);
  line-height:.99;
  margin:0;
  white-space:nowrap;
  font-weight:600;
}
.gold-rule {
  width:40px;
  height:2px;
  background:var(--gold);
  margin:1.7rem 0;
}
p {
  font-size:clamp(17px,1.42vw,25px);
  line-height:1.48;
  color:var(--muted);
  margin:0 0 1.3em;
}
.hero-copy p {
  max-width:30em;
}
.hero-actions {
  display:flex;
  gap:1.3vw;
  margin-top:1.5rem;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8em;
  min-height:52px;
  padding:.65em 1em;
  border:1px solid var(--gold);
  border-radius:3px;
  white-space:nowrap;
  font-size:clamp(14px,1.16vw,21px);
  letter-spacing:.04em;
  background:#050507bd;
}
.enquire-button {
  border-color:#b63cc8;
}
.arrow {
  font-size:1.7em;
  line-height:1;
  color:var(--gold);
}
.play {
  display:grid;
  place-items:center;
  width:2em;
  height:2em;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-size:.95em;
}
.sections {
  max-width:1280px;
  padding:0 5%;
  margin:auto;
}
section {
  padding:90px 0;
  border-bottom:1px solid #ffffff20;
  scroll-margin-top:1rem;
}
.eyebrow {
  display:block;
  color:var(--gold);
  letter-spacing:.18em;
  font-size:14px;
  margin-bottom:20px;
}
h2 {
  font-size:clamp(34px,3.7vw,54px);
  line-height:1.1;
  margin:0 0 30px;
}
.video {
  aspect-ratio:16/9;
  background:#100c13;
  border:1px solid #ffffff20;
}
.video iframe {
  width:100%;
  height:100%;
  border:0;
}
.video-link {
  text-align:right;
  margin-top:16px;
  font-size:15px;
}
.split-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px;
}
.split-section p {
  font-size:19px;
}
.event-list {
  list-style:none;
  padding:0;
  margin:28px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.event-list li {
  padding:12px 16px;
  border:1px solid #e7a82055;
  font-size:16px;
}
address {
  display:flex;
  flex-direction:column;
  gap:22px;
  font-style:normal;
  font-size:clamp(19px,2.1vw,29px);
  overflow-wrap:anywhere;
  padding-top:34px;
}
footer {
  max-width:1280px;
  margin:auto;
  padding:32px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
@media(min-width:1800px) {
  .hero-copy {
    margin-top:203px;
  }
}
@media(max-width:1000px) and (min-width:701px) {
  .site-header {
    flex-wrap:wrap;
    gap:12px;
  }
  .brand-name {
    font-size:6vw;
  }
  nav {
    margin-left:auto;
  }
  .hero-copy {
    margin-top:10%;
    width:40%;
    padding-bottom:20px;
  }
  .hero-actions {
    flex-wrap:wrap;
  }
  .hero {
    min-height:70vw;
  }
  .performers {
    width:52%;
  }
  h1 {
    font-size:5.2vw;
  }
  .hero-copy p {
    font-size:17px;
  }
}
@media(max-width:700px) {
  .site-header {
    padding:24px 6% 0;
    display:block;
  }
  .brand-name {
    font-size:clamp(28px,8.15vw,56px);
    letter-spacing:.025em;
  }
  .brand-the {
    font-size:20px;
  }
  .genres {
    font-size:clamp(11px,2.9vw,16px);
    gap:.85em;
    letter-spacing:.11em;
  }
  nav {
    margin-top:24px;
    justify-content:space-between;
    gap:12px;
    font-size:12px;
  }
  nav a {
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .nav-contact {
    padding:.75em;
  }
  .hero {
    display:flex;
    flex-direction:column;
  }
  .performers {
    position:relative;
    order:1;
    width:92%;
    margin:15px auto 0;
    mask-image:linear-gradient(to bottom,transparent 5%,#000 9%,#000 84%,transparent),linear-gradient(to right,transparent 2.5%,#000 4%);
  }
  .hero-content {
    order:2;
  }
  .hero-copy {
    width:auto;
    margin:-12px 6% 44px;
  }
  h1 {
    font-size:clamp(36px,9.3vw,60px);
    line-height:1.02;
    white-space:normal;
  }
  .gold-rule {
    margin:24px 0;
  }
  .hero-copy p {
    font-size:18px;
    max-width:33em;
  }
  .hero-actions {
    gap:14px;
    flex-wrap:wrap;
  }
  .button {
    font-size:14px;
    min-height:54px;
  }
  .sections {
    padding:0 6%;
  }
  section {
    padding:55px 0;
  }
  .split-section {
    grid-template-columns:1fr;
    gap:0;
  }
  .split-section p {
    font-size:18px;
  }
  address {
    padding-top:0;
    gap:20px;
  }
  footer {
    padding:30px 6%;
    flex-direction:column;
    font-size:11px;
  }
  h2 {
    letter-spacing:-.04em;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}
.brand:hover {
  color:var(--white);
}
.performers:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:20%;
  height:6%;
  background:var(--bg);
}