@charset "utf-8";

:root {
  --ink: #08070d;
  --text: #f7f3ed;
  --muted: #c8c1ca;
  --line: rgba(247, 243, 237, 0.18);
  --violet: #b78cff;
  --blue: #dfb2ff;
  --purple: #8f58cd;
  --member: #c6a7ff;
  --content: 1080px;
  --gutter: clamp(24px, 5vw, 72px);
  --header: 82px;
  --header-mobile: 62px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-mobile);
  overflow-x: hidden;
  overflow-y: auto;
  background: #150f24;
  -webkit-text-size-adjust: 100%;
}

/* Touch devices (esp. iOS Safari): `scroll-behavior: smooth` on <html> is a
   known contributor to mobile scroll instability; it can interact badly with
   the collapsing/expanding URL toolbar, making the first viewport (the hero)
   appear to "move"/jump while scrolling up and down. Disable it on touch so
   scrolling is purely native (smooth scrolling only affects anchor/programmatic
   jumps, which aren't used here anyway). */
@media (hover: none), (pointer: coarse) {
  html {
    scroll-behavior: auto;
    scroll-padding-top: 0;
  }
}

/* Mobile controls should respond immediately without turning a quick second
   tap into page zoom. touch-action: manipulation keeps normal scrolling and
   pinch zoom available; it only removes double-tap zoom/tap-delay behaviour
   on controls. */
@media (max-width: 880px) {
  :where(
    a[href],
    button,
    summary,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"]
  ) {
    touch-action: manipulation;
  }

  :where(.button, button, summary, .social-btn, .action-link, .small) {
    -webkit-tap-highlight-color: rgba(223, 178, 255, 0.18);
  }

  :where(
    .button,
    .menu,
    .diary-nav,
    .past-year-btn,
    .upcoming-more-btn,
    .social-btn,
    summary
  ):active {
    opacity: 0.86;
  }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  font:
    400 1.125rem/1.65 "Manrope",
    Arial,
    sans-serif;
  background: linear-gradient(150deg, #150f24, #1d1533 46%, #171024);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 50;
  top: -100px;
  left: var(--gutter);
  /* Inline-flex + min-height keeps the skip link at a 44px touch target;
     as a plain inline box it measured 41px. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--violet);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 12px;
}

.button:focus-visible,
.small:focus-visible,
.menu:focus-visible,
.youtube-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.wrap {
  width: min(var(--content), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* Anchor destinations need their own offset because touch devices intentionally
   disable html scroll-padding to avoid mobile browser-toolbar scroll jumps. */
main section[id] {
  scroll-margin-top: calc(var(--header-mobile) + 16px);
}

@media (min-width: 761px) {
  main section[id] {
    scroll-margin-top: calc(var(--header) + 16px);
  }
}

header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: var(--header-mobile);
  background: rgba(7, 6, 11, 0.95);
  border-bottom: 1px solid var(--line);
  /* NOTE: no `backdrop-filter: blur()`; the header is `position: fixed` over
     scrolling content; a backdrop blur forces re-blurring of the scrolling
     backdrop on every frame → scroll lag. The opaque bg gives separation. */
}

nav {
  height: var(--header-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-block;
  position: relative;
  color: #ffffff;
  font:
    400 1.9rem/0.78 "Yellowtail",
    cursive;
  letter-spacing: -0.045em;
  transform: rotate(-2deg);
  transition: transform 0.35s ease;
  cursor: pointer;
}

/* The logo is "NightSHIFT" — a night-sky wordmark. On hover, small stars and a
   crescent moon fade up around it. They're positioned relative to .logo (its
   transform makes it their containing block) and hidden until hover. */
.logo em {
  color: #ffffff;
  font-style: normal;
}

.logo:hover {
  transform: rotate(-2deg) rotate(4deg) scale(1.05);
}

.logo .star,
.logo .moon {
  position: absolute;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
  pointer-events: none;
  line-height: 1;
}

.logo .star {
  color: #ffffff;
  font-size: 0.55rem;
}

/* The script font (Yellowtail) has no ✦/☾ glyphs, so force a symbol-bearing
   system/emoji font stack here or the characters collapse to zero-width and
   never paint. */
.logo .star,
.logo .moon {
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* The header wordmark box is compact (~85px wide), so pin the stars and moon
   to specific spots around the script rather than using % that spread them
   across the whole box. Offsets are px, tuned for the fixed header size. */
.logo .star.s1 {
  top: -7px;
  left: -4px;
} /* just above the "N" */
.logo .star.s2 {
  top: -11px;
  left: 40px;
  font-size: 0.4rem;
} /* above the word gap */
.logo .star.s3 {
  bottom: -6px;
  left: 38px;
  font-size: 0.32rem;
} /* below the middle */

.logo .moon {
  top: -18px;
  right: -10px;
  font-size: 1.05rem;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

.logo:hover .star,
.logo:hover .moon {
  opacity: 1;
  transform: scale(1);
}

.logo:hover .star.s1 {
  transition-delay: 0.02s;
}
.logo:hover .star.s2 {
  transition-delay: 0.06s;
}
.logo:hover .star.s3 {
  transition-delay: 0.1s;
}
.logo:hover .moon {
  transition-delay: 0.12s;
}

.menu {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 6, 11, 0.6);
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.menu:hover {
  background: rgba(7, 6, 11, 0.8);
  border-color: var(--violet);
}

.nav {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  background: rgba(7, 6, 11, 0.985);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
}

.nav.open {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav a {
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.nav a:hover,
.nav a.active {
  color: var(--blue);
  background: rgba(183, 140, 255, 0.08);
}

.nav-book {
  margin-top: 5px;
  background: linear-gradient(180deg, #c99bff 0%, #b78cff 100%);
  color: #12081f !important;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(183, 140, 255, 0.4);
}

.nav .nav-book:hover {
  background: linear-gradient(180deg, #e9ccff 0%, #d8b3ff 100%);
  color: #12081f !important;
  box-shadow: 0 5px 16px rgba(183, 140, 255, 0.38);
  transform: translateY(-1px);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) 80px;
  background:
    linear-gradient(
      105deg,
      rgba(12, 6, 24, 0.8) 4%,
      rgba(24, 8, 48, 0.57) 47%,
      rgba(57, 18, 78, 0.27) 100%
    ),
    url("/assets/images/hero-mobile.jpg");
  background-position: center bottom;
  background-size: cover;
}

.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Keep the hero occasion line centred across the hero at every viewport width. */
.hero .hero-occasions {
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.eyebrow {
  margin-bottom: 28px;
}

.location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(183, 140, 255, 0.62);
  border-radius: 999px;
  background: rgba(7, 5, 16, 0.72);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.location svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.hero h1 {
  margin: 0 0 24px;
  color: #ffffff;
  font:
    400 clamp(3rem, 12vw, 5rem)/0.85 "Yellowtail",
    cursive;
  letter-spacing: -0.045em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}

.hero h1 em {
  color: #ffffff;
  font-style: normal;
}

.hero-copy {
  width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(7, 5, 16, 0.64);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  letter-spacing: 0.01em;
}

.hero-copy > span {
  display: block;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, #d8b3ff 0%, #b78cff 55%, #a574ff 100%);
  color: #12081f;
  font:
    800 0.82rem/1 "Manrope",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  box-shadow:
    0 0 0 1px rgba(216, 179, 255, 0.45),
    0 10px 30px rgba(183, 140, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.button:hover {
  background: linear-gradient(180deg, #e9ccff 0%, #d8b3ff 55%, #c99bff 100%);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(233, 204, 255, 0.4),
    0 14px 36px rgba(183, 140, 255, 0.38),
    0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.button svg {
  width: 1em;
  height: 1em;
  margin-left: 8px;
  flex: 0 0 1em;
}

.hero .button {
  margin-top: 32px;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  padding: 0 28px;
  font-size: 0.84rem;
}

.youtube-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 22px;
  width: 100%;
  max-width: 320px;
  padding: 12px 22px 12px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(
    180deg,
    rgba(30, 20, 44, 0.92),
    rgba(16, 11, 28, 0.94)
  );
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.youtube-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 7px;
  border-radius: 50%;
  background: #ff0033;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 0, 51, 0.55);
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.youtube-link:hover {
  background: linear-gradient(
    180deg,
    rgba(40, 26, 58, 0.94),
    rgba(20, 14, 34, 0.96)
  );
  border-color: #ff0033;
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(255, 0, 51, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.youtube-link:hover .youtube-icon {
  background: #ff1a47;
  box-shadow: 0 6px 18px rgba(255, 0, 51, 0.7);
  transform: scale(1.06);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section-head h2 {
  margin: 0;
  color: var(--text);
  font:
    800 clamp(2.5rem, 8vw, 4.5rem)/0.95 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  word-spacing: 0.02em;
}

.label {
  color: var(--violet);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

section {
  padding: 80px 0;
}

/* ---- Section separation -------------------------------------------------
   Let spacing and restrained surface changes do most of the work. Repeating
   divider lines made long mobile pages feel segmented into boxes, so major
   sections now transition with breathing room and a very soft tonal wash. */
main > section:not(.hero):not(.booking) {
  position: relative;
}

main > section:not(.hero):not(.booking):nth-of-type(odd) {
  background: linear-gradient(
    180deg,
    rgba(183, 140, 255, 0.032),
    transparent 38%
  );
}

main > section:not(.hero):not(.booking):nth-of-type(even) {
  background: linear-gradient(
    180deg,
    rgba(223, 178, 255, 0.018),
    transparent 38%
  );
}

@media (max-width: 760px) {
  main > section:not(.hero):not(.page-hero):not(.booking) {
    padding-block: 60px;
  }

  main
    > section:not(.hero):not(.page-hero):not(.booking)
    + section:not(.booking),
  main > .gigs-split + section {
    border-top: 1px solid rgba(223, 178, 255, 0.07);
  }
}

.intro {
  max-width: 100%;
  margin-bottom: 36px;
}

.intro p {
  margin: 0 0 28px;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

.quote {
  position: relative;
  margin: 44px 0;
  padding: 40px 32px 34px clamp(52px, 8vw, 84px);
  border: 1px solid rgba(183, 140, 255, 0.3);
  border-left: 4px solid var(--violet);
  border-radius: 4px 18px 18px 4px;
  background:
    radial-gradient(
      120% 160% at 0% 0%,
      rgba(183, 140, 255, 0.14),
      rgba(183, 140, 255, 0.02) 55%
    ),
    rgba(7, 5, 16, 0.55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.quote {
  font-style: italic;
  font-weight: 700;
  color: var(--text);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.quote small {
  display: block;
  margin-top: 18px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.quote small::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin: 0 10px 4px 0;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--blue));
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 6, 11, 0.6);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.card:hover {
  background: rgba(7, 6, 11, 0.8);
  border-color: var(--violet);
  transform: translateY(-4px);
}

.card strong {
  display: block;
  margin: 0 0 14px;
  color: var(--text);
  font:
    700 1.4rem/1.2 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.005em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.card span {
  display: block;
  margin-bottom: 8px;
  color: var(--violet);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.two-col > * {
  min-width: 0;
}

.mini-title {
  margin: 0 0 18px;
  color: var(--violet);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-lead {
  margin: 0 0 36px;
  font-size: 1.15rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.small:hover {
  color: var(--blue);
}

.small svg {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}

.external-link-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  margin-left: 7px;
  vertical-align: -0.12em;
  overflow: visible;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #050408;
  margin-bottom: 20px;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube click-to-load: thumbnail + play button (defers ~960 KiB YouTube JS) */
.video-lazy {
  cursor: pointer;
}

.video-lazy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

.play-btn svg {
  width: 68px;
  height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff315f, #d90045);
  fill: currentColor;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.play-btn:hover svg {
  transform: scale(1.08);
}

.feed-container {
  margin-top: 32px;
  margin-bottom: 32px;
}

.feed-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #fbfaf7;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  padding: 24px;
}

.feed-wrapper:hover {
  border-color: var(--violet);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.panel {
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(7, 6, 11, 0.6);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.panel h3 {
  margin: 0 0 18px;
  color: var(--text);
  font:
    700 1.9rem/1.15 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.005em;
}

.panel p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* Keep the closing CTA button a comfortable, consistent distance below
   the panel copy (previously the flexible space-between crowded it). */
.panel > .button {
  margin-top: 4px;
}

/* Compact review CTA panel on the About page. */
#kind-words .panel {
  padding: 22px 20px;
  gap: 14px;
}

#kind-words .panel .mini-title {
  margin: 0 0 8px;
}

#kind-words .panel h3 {
  margin: 0 0 10px;
  font:
    700 1.45rem/1.2 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.005em;
}

#kind-words .panel p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

#kind-words .panel > .button {
  align-self: flex-start;
  margin-top: 2px;
}

.members {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.members .card {
  text-align: center;
}

.members .card strong {
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.press-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.press-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.press-blog {
  align-self: start;
}

.booking {
  background: linear-gradient(145deg, #7350b8 0%, #5d3c99 52%, #432a67 100%);
  color: #f7f3ed;
}

.booking .label {
  color: #fff;
}

.booking .button {
  background: #fff;
  color: #432a67;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.booking .button:hover {
  background: #f7f0ff;
  color: #3a2459;
  border-color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.booking h2 {
  margin: 0 0 32px;
  color: #fff;
  font:
    800 clamp(2.5rem, 8vw, 4.5rem)/0.92 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.booking-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.booking p {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.booking .details {
  color: rgba(247, 243, 237, 0.8);
}

.booking a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.booking a:hover {
  color: var(--violet);
}

footer {
  padding: 48px var(--gutter);
  border-top: 1px solid var(--line);
  background: rgba(7, 6, 11, 0.8);
  text-align: center;
}

footer span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

footer span + span {
  margin-top: 12px;
}

@media (min-width: 761px) {
  :root {
    --gutter: 42px;
  }

  header {
    height: var(--header);
  }

  nav {
    position: relative;
    height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter);
  }

  html {
    scroll-padding-top: var(--header);
  }

  .menu {
    display: none;
  }

  .logo {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%) rotate(-2deg);
  }

  .logo:hover {
    transform: translateY(-50%) rotate(-2deg) rotate(4deg) scale(1.05);
  }

  /* The page links are the only in-flow flex child (the logo and pill are
     absolutely positioned), so they fill the header and centre on its
     horizontal centre line — between the logo (left) and pill (right). */
  .nav {
    position: static;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav a:not(.nav-book) {
    padding: 8px 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* Pill pinned to the far right of the header. `.nav` is static so this
     anchors to the full-width `nav` containing block. */
  .nav .nav-book {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    padding: 10px 14px;
    white-space: nowrap;
  }

  .hero {
    padding: 180px var(--gutter) 120px;
    background:
      linear-gradient(
        105deg,
        rgba(12, 6, 24, 0.8) 4%,
        rgba(24, 8, 48, 0.57) 47%,
        rgba(57, 18, 78, 0.27) 100%
      ),
      url("/assets/images/hero.png");
    background-position: center center;
    background-size: cover;
  }

  .hero-grid {
    max-width: 800px;
  }

  .hero h1 {
    font-size: clamp(4rem, 8vw, 6rem);
    margin-bottom: 36px;
  }

  .hero-copy {
    width: min(100%, 520px);
    padding: 24px 28px;
    font-size: 1.2rem;
    line-height: 1.7;
  }

  .hero .button {
    width: auto;
    max-width: none;
    margin-top: 36px;
    min-height: 54px;
    padding: 0 32px;
  }

  /* Reset mobile full-width button rules (footer-cta, panel) at desktop. */
  .footer-cta .button,
  .panel > .button:not(.small) {
    width: auto;
    max-width: none;
  }

  .youtube-link {
    width: auto;
    max-width: none;
    justify-content: flex-start;
  }

  .section-head {
    margin-bottom: 56px;
  }

  section {
    padding: 120px 0;
  }

  .intro {
    max-width: 680px;
    margin-bottom: 56px;
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .card {
    padding: 36px 28px;
    border-radius: 16px;
  }

  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

@media (min-width: 761px) {
  .members {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
  }

  .press-layout {
    grid-template-columns: 2fr 1fr;
    gap: 64px;
  }

  .press-events {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .booking-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .booking-row > div {
    flex: 1;
    max-width: 600px;
  }

  .feed-wrapper {
    max-width: 600px;
  }

  .video-frame {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 56px;
  }

  .hero {
    padding: 200px var(--gutter) 140px;
  }

  .hero-grid {
    max-width: 900px;
  }

  .hero h1 {
    font-size: clamp(4.5rem, 9vw, 7rem);
  }

  .hero-copy {
    width: min(100%, 580px);
    padding: 28px 32px;
    font-size: 1.25rem;
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .card {
    padding: 40px 32px;
  }

  .two-col {
    gap: 80px;
  }

  .members {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .press-events {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1400px) {
  :root {
    --gutter: 72px;
    --content: 1200px;
  }

  .hero {
    padding: 220px var(--gutter) 160px;
  }

  .hero-grid {
    max-width: 1000px;
  }

  .hero h1 {
    font-size: clamp(5rem, 10vw, 8rem);
  }

  .hero-copy {
    width: min(100%, 640px);
    padding: 32px 36px;
    font-size: 1.3rem;
  }

  .features {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .two-col {
    gap: 96px;
  }

  .members {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .press-events {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .press-layout {
    gap: 80px;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 22px;
  }

  .hero h1 {
    font-family: "Yellowtail", cursive;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: -0.045em;
    line-height: 0.78;
    font-size: clamp(3.5rem, 14vw, 5.5rem);
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.5),
      0 0 15px rgba(0, 0, 0, 0.35);
  }

  .hero h1 em {
    color: #ffffff;
    font-style: normal;
  }

  .feed-wrapper {
    border-radius: 12px;
    padding: 16px;
  }

  .video-frame {
    width: 100%;
    border-radius: 12px;
  }

  .external-link-icon {
    width: 0.95em;
    height: 0.95em;
    flex-basis: 0.95em;
    margin-left: 6px;
  }

  .intro p {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .card p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .section-lead {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .nav {
    left: var(--gutter);
    right: var(--gutter);
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .logo {
    font-size: 1.4rem;
  }

  .nav a {
    padding: 14px 16px;
    font-size: 0.85rem;
  }

  .card:active {
    transform: scale(0.98);
  }

  .button:active {
    transform: scale(0.95);
  }

  /* Full-width primary CTAs on mobile: footer-cta and standalone panel
     buttons stretch to fill their container for bigger, easier tap targets.
     Hero button already has width:100%;max-width:320px in the base rules. */
  .footer-cta .button {
    width: 100%;
    max-width: 320px;
  }

  .panel > .button:not(.small) {
    width: 100%;
    max-width: 320px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* TABLET HERO — keep the complete hero composition centred on square and
   narrow tablet viewports. The desktop layout can return to its wider rail
   from 1024px upward; below that the title and supporting copy should share
   one true centre axis rather than inheriting the desktop left edge. */
@media (min-width: 761px) and (max-width: 1023px) {
  .hero-grid {
    width: min(100%, 680px);
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }
  .hero .hero-occasions {
    width: 100%;
    text-align: center;
  }
  .hero h1 {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .hero .hero-copy {
    width: min(100%, 580px);
    max-width: 580px;
    margin-inline: auto;
    text-align: center;
  }
}