@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

section[id] {
  scroll-margin-top: 110px;
}

/* One shared horizontal grid for the header and all page sections. */
:root {
  --font-site: "Nunito", Arial, sans-serif;
  --button-radius: 10px;
  --color-accent: #FF8A1F;
  --color-accent-light: #FFB266;
  --section-space: clamp(64.4px, 6.9vw, 92px);
  --page-gutter: 48px;
  --page-content-width: min(calc(100% - var(--page-gutter) - var(--page-gutter)), 1120px);
}

body {
  background: #000;
  font-family: var(--font-site);
  margin: 0;
}

@media (max-width: 1100px) {
  :root { --page-gutter: 32px; }
}

@media (max-width: 767px) {
  :root { --page-gutter: 24px; }
}

@media (max-width: 480px) {
  :root { --page-gutter: 16px; }
}

button, input, select, textarea {
  font-family: inherit;
}

button,
.hero-button,
.navigation-ticket-button,
.about-section__button,
.tour-card__button,
.latest-videos__youtube-link,
.site-footer .site-footer__socials a,
.newsletter-form button {
  border-radius: var(--button-radius);
}

/* Consistent section titles and labels. */
.tour-dates .tour-dates__title,
.about-section .about-section__title,
.latest-videos .latest-videos__title,
.tour-dates .tour-dates__title span,
.about-section .about-section__title span,
.latest-videos .latest-videos__title span,
.latest-videos .latest-videos__eyebrow,
.tour-dates .tour-dates__eyebrow,
.about-section .about-section__eyebrow {
  color: #fff;
}

.hero .hero__title span,
.site-logo .site-logo__title span,
.site-logo .site-logo__subtitle,
.site-footer .site-footer__logo span,
.site-footer .site-footer__tagline {
  color: #fff;
  font-style: normal;
  text-shadow: none;
}

/* Keep buttons and images steady on hover. */
.hero-button:hover,
.navigation-ticket-button:hover,
.navigation-ticket-button:focus-visible,
.about-section__button:hover,
.tour-card__button:not(.tour-card__button--disabled):hover,
.about-section__visual:hover .about-section__image,
.video-card:hover .video-card__image {
  transform: none;
}

.hero .hero__eyebrow {
  color: var(--color-accent);
}

/* Keep section subheadings readable without heavy weights on small screens. */
@media (max-width: 850px) {
  .tour-dates .tour-dates__title,
  .about-section .about-section__title,
  .latest-videos .latest-videos__title,
  .tour-dates .tour-dates__title span,
  .about-section .about-section__title span,
  .latest-videos .latest-videos__title span,
  .hero .hero__eyebrow,
  .tour-dates .tour-dates__eyebrow,
  .about-section .about-section__eyebrow,
  .latest-videos .latest-videos__eyebrow {
    font-weight: 600;
  }
}

.tour-dates .tour-dates__title,
.about-section .about-section__title,
.latest-videos .latest-videos__title,
.tour-dates .tour-dates__title span,
.about-section .about-section__title span,
.latest-videos .latest-videos__title span {
  font-weight: 700;
}

.hero-button,
.navigation-ticket-button,
.about-section__button,
.tour-card__button,
.latest-videos__youtube-link,
.newsletter-form button {
  font-weight: 600;
}

/* Each section boundary gets one gap, rather than two stacked paddings. */
#main-content {
  display: flex;
  flex-direction: column;
  gap: var(--section-space);
  background: #000;
}

#main-content > section {
  flex-shrink: 0;
}