/* Stadler Rock — design system
   Rebuilt from the GoDaddy/Beaver Builder original. Tokens are the values
   measured off the live site (see README "Fidelity notes"). */

/* ---------- tokens ---------- */
:root {
  --bg: #000000;
  --bg-alt: #151515;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.82);

  --green: #0af60b;      /* primary accent */
  --magenta: #f20ad9;    /* secondary accent */
  --wave-pink: #f2abe7;  /* pastel section-divider fill */
  --wave-green: #adf4ad;

  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1440px;
  --gutter: 20px;
  --col-gap: 40px;

  --fs-body: 17px;
  --lh-body: 1.65;

  --h1: 54px;
  --h2: 40px;
  --h3: 30px;
  --hero: 90px;

  --notice-h: 56px;

  --radius-pill: 45px;
  --radius-card: 15px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  text-align: left;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: #000;
  padding: 10px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- typography ---------- */
/* Rhythm matches the original: every content module carries a 20px top margin
   and headings add 10px above/below (.col > * + * below). */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin: 10px 0;
  color: var(--ink);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--h1); line-height: 1; }
h2 { font-size: var(--h2); line-height: 1; }
h3 { font-size: var(--h3); }
h4 { font-size: 24px; }

p { margin: 0 0 17px; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Bands are transparent by default so a band lifted over the previous one (the
   home intro texture) lets the hero photo show through. Colours come from the
   source content via an inline background-color. */
.section {
  position: relative;
}
.section--alt { background-color: var(--bg-alt); }
/* a band whose background overlaps the previous one (home intro texture) */
.section--lifted { z-index: 2; }

.section__inner { position: relative; z-index: 1; }

/* background layers (textures + hero photo) */
.section__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}
.section__bg--fixed { background-attachment: fixed; }

/* a row of columns; columns grow in proportion to their original width */
.row {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
}
.row + .row { margin-top: 20px; }
.row--center { align-items: center; }
.row--single { justify-content: center; }

.col { flex: 1 1 0; min-width: 0; }
/* module-to-module spacing, as in the original layout */
.col > * + * { margin-top: 20px; }

/* ---------- section curve dividers ---------- */
.divider {
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.divider svg { display: block; width: 100%; height: 60px; }
.divider--top { top: -1px; }
.divider--top svg { transform: scaleY(-1); }

/* ---------- header ---------- */
.site-head {
  background: #000;
  position: relative;
  z-index: 20;
}
/* On the home page the original floats the header over the hero photo so the
   hero image runs edge to edge behind the logo and nav. When the show notice is
   present the header starts below it instead of under it. */
@media (min-width: 768px) {
  .page--home .site-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
  }
  .page--home.has-notice .site-head { top: var(--notice-h); }
  .page--home.has-notice .hero { padding-top: var(--notice-h); }
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* only vertical padding here: a shorthand would cancel .wrap's gutters */
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-head__logo { margin-left: 20px; }
.site-head__logo img { width: 150px; height: auto; display: block; }
.site-head__logo.is-large img { width: 216px; }

.menu { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.menu a {
  font-size: 17px;
  color: var(--ink);
  font-weight: 400;
}
.menu a:hover { color: var(--green); }
.menu a[aria-current='page'] { color: var(--green); font-weight: 700; }

/* mobile menu */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 34px;
  height: 4px;
  background: #fff;
  margin: 6px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* the original darkens the photo to 57% black so the type stays legible */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.57);
}
.hero__inner {
  position: relative;
  /* must out-rank .section--lifted (z-index 2) so the hero copy and CTA stay
     legible where the next band's texture overlaps the hero */
  z-index: 3;
  min-height: 695px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px var(--gutter);
}
.hero__line {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--hero);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
  display: block;
}
.hero__line--accent { color: var(--magenta); }
.hero__lede {
  font-size: 20px;
  line-height: 1.65;
  margin: 24px auto 0;
  max-width: 720px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--green);
  color: #000;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 45px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover,
.btn:focus { background: var(--magenta); color: #000; }
.hero .btn { margin-top: 34px; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 34px 0 0;
}
.hero__actions .btn { margin-top: 0; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--ghost:hover,
.btn--ghost:focus { background: var(--ink); color: #000; }

/* ---------- images (the decorative frames are baked into the PNGs) ---------- */
/* The original's image modules carry vertical margins, which is what keeps the
   stacked image rows in the About page at their full height. */
.figure { margin: 30px 0; }
.figure img { display: block; width: 100%; height: auto; }
.figure--center { margin-inline: auto; }

/* ---------- statement blocks ---------- */
.statement { text-align: center; }
.statement p { margin-inline: auto; }

/* the magenta left rule used on the home page intro */
.rule-left {
  border-left: 1px solid var(--magenta);
  padding-left: 22px;
}

/* vertical rule between story columns */
.col--ruled { border-left: 1px solid var(--magenta); padding-left: 30px; }
/* glowing rounded panel (used on the About page's two gig/story boxes) */
.col--glow {
  border-radius: var(--radius-card);
  box-shadow: 0 0 5px 2px var(--glow, var(--green));
}

/* ---------- next-show call to action (Home, Listen) ---------- */
.show-cta {
  background: var(--bg-alt);
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  text-align: center;
}
.show-cta__inner { padding: 56px var(--gutter); }
.show-cta__kicker {
  margin: 0 0 10px;
  color: var(--green);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.show-cta__title { margin: 0 0 18px; }
.show-cta__when,
.show-cta__detail,
.show-cta__where { margin: 0; font-size: 18px; line-height: 1.6; }
.show-cta__when { color: var(--ink); font-weight: 700; }
.show-cta__detail { color: var(--green); font-weight: 700; }
.show-cta__where { color: var(--ink-dim); }
.show-cta__btn {
  margin-top: 28px;
  padding: 16px 60px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- video facades ---------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 30px 0; /* matches the original's media-module margins */
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.video iframe,
.video img,
.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video img { object-fit: cover; }
.video__play {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.video__play:hover { background: rgba(0, 0, 0, 0.1); }
.video__play svg { width: 68px; height: 48px; }

/* ---------- gallery / carousel ---------- */
.gallery { position: relative; }
.gallery__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px;
  margin: 0;
  list-style: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
/* Filmstrip. The original stretched every image into a 325x192 box, which
   squashes the square sources and crops the 16:9 ones. Keeping a shared height
   and each image's own aspect shows the whole frame without distortion. */
.gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.gallery__item img {
  display: block;
  height: 192px;
  width: auto;
  cursor: zoom-in;
}
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery__nav:hover { background: var(--magenta); color: #000; }
.gallery__nav--prev { left: 6px; }
.gallery__nav--next { right: 6px; }

/* lightbox */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox img { display: block; max-width: 92vw; max-height: 92vh; width: auto; }
.lightbox__close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- contact ---------- */
.contact-info { list-style: none; margin: 30px 0 0; padding: 0; }
.contact-info li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.contact-info__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--magenta);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info__icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-info a:hover { color: var(--green); }

.form-card {
  background: #000;
  border-radius: var(--radius-card);
  box-shadow: 0 0 5px 2px var(--green);
  padding: 40px;
}
.form-card h2 { margin-bottom: 1em; }
.field { margin-bottom: 18px; }
.field--half { flex: 1 1 0; min-width: 0; }
.field-row { display: flex; gap: 20px; }
.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 17px;
}
.field .req { color: #c02b0a; font-style: italic; font-size: 14px; }
.field input,
.field textarea {
  width: 100%;
  background: #fff;
  color: #333;
  border: 1px solid #7f7f7f;
  border-radius: var(--radius-card);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 17px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--green); }
.field--hp { position: absolute; left: -9999px; }
.form-note { margin-top: 12px; font-size: 15px; }
.form-note[data-state='ok'] { color: var(--green); }
.form-note[data-state='error'] { color: #ff6b6b; }

/* ---------- footer ---------- */
.site-foot { background: var(--bg-alt); }

/* ---------- show notice (top of every page) ----------
   Sits above the header rather than in the footer. A footer strip is only seen
   by someone who already scrolled to the end, which is the wrong place for the
   one time-sensitive thing on the site. Height is fixed so the Home header,
   which is absolutely positioned over the hero, can offset itself by it. */
.notice {
  display: block;
  min-height: var(--notice-h);
  background: var(--green);
  color: #000;
  text-decoration: none;
  position: relative;
  z-index: 30;
}
.notice--link:hover,
.notice--link:focus { background: var(--magenta); color: #000; }
.notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  padding: 11px var(--gutter);
  text-align: center;
}
.notice__text { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.notice__label { text-transform: uppercase; letter-spacing: 0.03em; }
.notice__label::after { content: ' \2014 '; font-weight: 400; }
.notice time { font-variant-numeric: tabular-nums; }
.notice__cta {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 3px 14px;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ---------- footer ---------- */
.site-foot { background: var(--bg-alt); }

/* next-show banner: a dated, perishable element, so it is data-driven from
   content/site.json and disappears entirely when that key is removed */
.next-show { display: block; background: var(--green); color: #000; text-decoration: none; }
.next-show--link:hover,
.next-show--link:focus { background: var(--magenta); color: #000; }
.next-show__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 15px var(--gutter);
  text-align: center;
}
.next-show__lead,
.next-show__where { margin: 0; font-size: 17px; line-height: 1.45; }
.next-show__lead { font-weight: 700; }
.next-show__label { text-transform: uppercase; letter-spacing: 0.03em; }
.next-show__label::after { content: ' \2014 '; font-weight: 400; }
.next-show time { font-variant-numeric: tabular-nums; }
.next-show__cta {
  display: inline-block;
  margin-left: 14px;
  padding: 3px 14px;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.site-foot__main {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
}
.site-foot__logo { flex: 0 0 150px; }
.site-foot__logo img { width: 150px; display: block; }
.site-foot__details {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  align-items: center;
  font-size: 17px;
}
.site-foot__item { display: flex; align-items: center; gap: 14px; }
.site-foot__item svg { width: 20px; height: 20px; fill: var(--green); flex: 0 0 20px; }
.site-foot__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--magenta);
  color: #000;
}
.site-foot__social a:hover { background: var(--green); }
.site-foot__social svg { width: 20px; height: 20px; fill: currentColor; }

.site-foot__nav { background: #000; }
.site-foot__nav ul {
  list-style: none;
  margin: 0;
  padding: 22px 0;
  display: flex;
  justify-content: center;
  gap: 0;
}
.site-foot__nav li + li { border-left: 1px solid #4a4a4a; }
.site-foot__nav a { display: block; padding: 0 18px; font-size: 17px; }
.site-foot__nav a[aria-current='page'] { color: var(--green); }

.site-foot__legal {
  background: var(--bg-alt);
  padding: 14px 0;
  font-size: 15px;
}
.site-foot__legal .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-foot__legal p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  :root {
    --h1: 44px;
    --h2: 34px;
    --h3: 26px;
    --hero: 62px;
    --col-gap: 30px;
  }
  .section__bg--fixed { background-attachment: scroll; }
  .hero__inner { min-height: 520px; }
}

@media (max-width: 767px) {
  :root {
    --h1: 32px;
    --h2: 26px;
    --h3: 22px;
    --hero: 42px;
    --col-gap: 0px;
  }

  /* every column stacks, and headings centre, as on the original */
  .row { flex-direction: column; gap: 30px; }
  .row + .row { margin-top: 30px; }
  .col { flex: 1 1 auto; width: 100%; }
  .col--ruled { border-left: 0; padding-left: 0; }
  .col--glow { margin: 0 !important; padding: 18px !important; }

  h1, h2, h3 { text-align: center; }
  .statement { text-align: center; }

  /* the original centres images once the layout stacks */
  .figure { margin-inline: auto; }

  .site-head__inner { padding: 14px 0; }
  .site-head__logo { margin-left: 0; }
  .site-head__logo img { width: 130px; }
  .site-head__logo.is-large img { width: 150px; }

  .nav-toggle { display: block; }
  .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #000;
    flex-direction: column;
    gap: 0;
    padding: 10px 0 20px;
    border-top: 1px solid #222;
  }
  .menu[data-open='true'] { display: flex; }
  .menu a { display: block; padding: 12px var(--gutter); font-size: 20px; }

  .hero__inner { min-height: 420px; padding: 60px var(--gutter); }
  .hero__line { font-size: var(--hero); line-height: 1.1; }
  .hero__actions { gap: 10px; margin-top: 26px; }
  .hero__actions .btn { flex: 1 1 auto; padding: 14px 26px; }

  .form-card { padding: 24px; }
  .field-row { flex-direction: column; gap: 0; }

  .site-foot__main { flex-direction: column; text-align: center; gap: 24px; }
  .site-foot__details { justify-content: center; flex-direction: column; }
  /* keep the top bar from eating a phone screen: no min-height override, tighter
     type, and the label sits inline rather than on its own line */
  .notice { min-height: 0; }
  .notice__inner { flex-wrap: wrap; padding: 8px var(--gutter); gap: 2px 10px; }
  .notice__text { font-size: 14px; line-height: 1.3; }
  .notice__cta { padding: 2px 10px; font-size: 12px; margin-left: 2px; }
  .site-foot__nav ul { flex-wrap: wrap; }
  .site-foot__nav a { padding: 8px 14px; }
  .site-foot__legal .wrap { flex-direction: column; gap: 8px; }

  .gallery__item { flex-basis: auto; }
  .gallery__item img { height: 160px; width: auto; }

  .show-cta__inner { padding: 40px var(--gutter); }
  .show-cta__when,
  .show-cta__detail,
  .show-cta__where { font-size: 16px; }
  .show-cta__btn { width: 100%; padding: 16px 20px; margin-top: 22px; }}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .section__bg--fixed { background-attachment: scroll; }
}

/* stacked lines in a Beaver Builder "dual heading" */
.h-line { display: block; }
.show-cta__note { margin: 10px 0 0; color: var(--ink-dim); font-size: 16px; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 80px 0; }
.notfound__code {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
  color: var(--magenta);
}
.notfound__title { margin: 0 0 14px; }
.notfound__body { margin: 0 auto; max-width: 46ch; color: var(--ink-dim); }
.notfound .hero__actions { margin-top: 30px; }