/* ==========================================================================
   Base / reset
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* full-bleed strips + parallax must never add a horizontal scrollbar */
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
picture { display: contents; }

a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Page body scrolls over the sticky hero (see hero.css) */
.page-body {
  position: relative;
  z-index: 1;
  background: var(--c-white);
}
/* elementsFromPoint (header.js) skips pointer-events:none shells, so the
   wrappers that actually paint the white background carry the theme too */

/* Section themes drive the header logo swap (header.js) */
.theme-light { background: var(--c-white); color: var(--c-text); }
.theme-dark  { background: var(--c-dark);  color: var(--c-white); }

/* --------------------------------------------------------------------------
   Typography
   Display headings (Syne) — sizes scale with --s, per the brief.
   -------------------------------------------------------------------------- */
.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(72 * var(--s));
  line-height: 1.25;              /* 90/72 */
  text-align: center;
  letter-spacing: 0;
}
.h-cta {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  text-align: center;
}
.h-gallery {                      /* "Video Gallery" / "Photo Gallery" — fixed size */
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 42px;
  text-align: center;
}
.lead {                            /* paragraphs on white */
  color: var(--c-text-muted);
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
.lead-dark {                       /* paragraphs on dark */
  color: var(--c-white-70);
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
.label {                           /* "Short videos...", "From stage..." */
  color: var(--c-dark-50);
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 767px) {
  .h-display { font-size: calc(44 * var(--s)); line-height: 1.2; }
  .h-cta     { font-size: calc(26 * var(--s)); line-height: 1.2; }
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 16px 20px;
  background: var(--c-purple);
  color: var(--c-white);
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 15px;
  line-height: normal;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: #a63cff; }
.btn:active { transform: translateY(1px); }
.btn__arrow { font-weight: 600; }

/* Hairline rules */
.rule { height: 1px; background: var(--c-dark-20); }
.theme-dark .rule { background: var(--c-white-20); }

/* Touch devices: no focus ring on overlay controls (iOS shows one after programmatic focus) */
@media (hover: none) {
  .menu__close:focus, .modal__close:focus, .lightbox__close:focus, .lightbox__nav:focus,
  .menu__close:focus-visible, .modal__close:focus-visible, .lightbox__close:focus-visible, .lightbox__nav:focus-visible {
    outline: none;
  }
}

/* Visually hidden (a11y) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}