/* ============================================================
   Event passes: the sign-up form (its own page and the home page),
   and the home page's campaign while a pass is featured there —
   announcement bar, video hero, story and sign-up section — then each
   design a pass can pick (config event_passes.templates).
   ============================================================ */

/* ============ ANNOUNCEMENT BAR ============ */
.campaign-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  min-height:      38px;
  padding:         8px 16px;
  background:      var(--gold-deep);
  color:           #fff;
  font-family:     var(--font-mono);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  text-decoration: none;
  text-align:      center;
}
.campaign-bar:hover { background: #5B21B6; }
.campaign-bar__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #fff;
  flex:          none;
  animation:     campaign-pulse 1.6s ease-in-out infinite;
}
@keyframes campaign-pulse { 50% { opacity: .35; transform: scale(.8); } }

/* ============ VIDEO HERO ============ */
.campaign-hero {
  position:        relative;
  min-height:      calc(100svh - var(--nav-h) - 38px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  background:      var(--ink-2);
  text-align:      center;
  isolation:       isolate;
}
.campaign-hero__media {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    -2;
}
/* A still image drifts slowly so the hero still feels alive. */
.campaign-hero__media--still { animation: campaign-drift 24s ease-in-out infinite alternate; }
@keyframes campaign-drift { to { transform: scale(1.08) translate(-1%, -1%); } }
/* Legible text over the footage while keeping it bright: a soft pool of
   shade behind the centred text, a little at the top, more at the bottom
   edge where the next section starts. */
.campaign-hero__shade {
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%, rgba(7,6,10,.44), rgba(7,6,10,0) 72%),
    linear-gradient(180deg, rgba(7,6,10,.42) 0%, rgba(7,6,10,.16) 38%, rgba(7,6,10,.22) 70%, rgba(7,6,10,.7) 100%);
}
.campaign-hero__inner {
  width:          100%;
  max-width:      920px;
  padding-top:    clamp(48px, 9vh, 96px);
  padding-bottom: clamp(48px, 9vh, 96px);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            18px;
}
.campaign-hero__kicker {
  color:          #C4B5FD;
  font-family:    var(--font-mono);
  font-size:      clamp(12px, 1.2vw, 14px);
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.campaign-hero__title {
  font-family:    'Bebas Neue', var(--font-display);
  font-weight:    400;
  font-size:      clamp(64px, 12vw, 168px);
  line-height:    .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  color:          #fff;
  text-shadow:    0 4px 40px rgba(0,0,0,.35);
}
.campaign-hero__lede {
  max-width:   640px;
  color:       #E7E3F2;
  font-size:   clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}
.campaign-hero__lede + .campaign-hero__lede { color: var(--muted); margin-top: -6px; }
.campaign-hero__cta { margin-top: 10px; }

/* ============ STORY ============ */
.campaign-story__grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   clamp(32px, 6vw, 80px);
  align-items:           start;
}
.campaign-story h2 {
  margin:         14px 0 16px;
  font-size:      clamp(34px, 4.6vw, 56px);
  line-height:    1.02;
  letter-spacing: -.02em;
}
.campaign-story__big {
  font-size:   clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color:       #C4B5FD;
}
.campaign-story__questions {
  list-style: none;
  margin-top: 22px;
  display:    grid;
  gap:        12px;
}
.campaign-story__questions li {
  padding:       16px 18px;
  border:        1px solid var(--line);
  border-radius: var(--radius-small);
  background:    var(--surface);
  font-size:     17px;
  line-height:   1.4;
}
.campaign-story__answer {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  color:          var(--muted);
  font-size:      17px;
  line-height:    1.6;
}
.campaign-story__lead {
  color:       var(--text);
  font-size:   clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.35;
}
.campaign-story__quote {
  margin:        8px 0;
  padding:       22px 24px;
  border-radius: var(--radius);
  background:    var(--surface-2);
  color:         var(--text);
  font-size:     clamp(18px, 1.8vw, 21px);
  line-height:   1.45;
}
.campaign-story__quote strong { color: #fff; }
.campaign-story__tag {
  font-family:    var(--font-mono);
  font-size:      13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #C4B5FD;
}
.campaign-story__answer .btn { align-self: flex-start; }
@media (max-width: 860px) {
  .campaign-story__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============ SIGN-UP (both pages) ============ */
.campaign-signup { background: var(--ink-2); border-top: 1px solid var(--line); }
.event-includes {
  list-style:      none;
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             10px;
  margin:          22px auto 40px;
  padding:         0;
  max-width:       820px;
}
.event-includes li {
  text-align:     center;
  font-family:    var(--font-mono);
  font-size:      11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--text);
  background:     var(--ink-2);
  border:         1px solid var(--line);
  padding:        7px 14px;
  border-radius:  999px;
}
.event-optional { text-transform: none; letter-spacing: 0; opacity: .7; }
.event-error { display: block; margin-bottom: 16px; }
.event-consent {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      22px 0 6px;
  padding-top: 18px;
  border-top:  1px solid var(--line);
}
.event-consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.event-consent label {
  font-family:    var(--font-body);
  font-size:      .82rem;
  line-height:    1.5;
  letter-spacing: 0;
  text-transform: none;
  color:          var(--muted);
}
.event-footnote { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 14px; }
.event-panel { text-align: center; }
.event-panel .apply-modal__tick { margin: 0 auto 14px; }
.event-panel h2 { margin: 0 0 8px; }
.event-panel .hero__subtext { margin: 0; }

/* ============================================================
   DESIGNS (config event_passes.templates)
   Each pass picks one for its home page campaign and sign-up page.
   .campaign--{design} wraps both, so the design's colours reach the
   story, the form and its buttons too: --gold is its accent. The heroes
   are public/partials/campaign-heroes/{design}; the current design is
   "classic", styled above. Phone layouts follow the boards' -Phone
   variants (resources/showcase/design-directions/boards/H-*).
   ============================================================ */

/* ---- shared by every design but the current one ----
   :where() keeps these at one class's weight, so each design's own rules
   below (and its phone rules) win over them. */
.campaign--ticket,
.campaign--orbit    { --campaign-display: 'Bricolage Grotesque', var(--font-display); }
.campaign--daylight { --campaign-display: 'Bricolage Grotesque', var(--font-display); --font-body: 'Instrument Sans', 'Inter', sans-serif; }
.campaign--kinetic  { --campaign-display: 'Unbounded', var(--font-display); }
.campaign--levelup  { --campaign-display: 'Space Grotesk', var(--font-display); --font-body: 'Space Grotesk', 'Inter', sans-serif; }

.campaign:not(.campaign--classic) h1,
.campaign:not(.campaign--classic) h2,
.event-page:not(.campaign--classic) h1,
.event-page:not(.campaign--classic) h2 { font-family: var(--campaign-display); }
.campaign:not(.campaign--classic),
.event-page:not(.campaign--classic) { font-family: var(--font-body); }

.campaign-hero:where(:not(.campaign-hero--classic)) {
  justify-content: flex-start;
  text-align:      left;
}
.campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__inner {
  position:    relative;
  max-width:   1360px;
  align-items: flex-start;
  gap:         20px;
}
.campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__title {
  font-family:    var(--campaign-display);
  font-weight:    800;
  font-size:      clamp(48px, 7.4vw, 108px);
  line-height:    .92;
  letter-spacing: -.035em;
  text-transform: none;
  text-shadow:    none;
}
.campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__lede { max-width: 560px; color: var(--campaign-lede, #C9C3DA); }
.campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__lede + .campaign-hero__lede { margin-top: -8px; }
.campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__cta { margin-top: 0; }
.campaign-hero__accent { color: var(--gold); }
.campaign-hero__actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        12px 14px;
  margin-top: 6px;
}
.campaign-hero__chips {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  padding:    0;
}
.campaign-hero__chips li {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  border-radius: 999px;
  font-size:     14px;
  font-weight:   600;
  line-height:   1.2;
}
.campaign-hero__chips .wa-glyph { width: 16px; height: 16px; flex: none; color: #25D366; }

/* Bright accents need dark text on their buttons. */
.campaign--ticket .btn--gold,
.campaign--kinetic .btn--gold,
.campaign--levelup .btn--gold,
.campaign--ticket .btn--gold:hover,
.campaign--kinetic .btn--gold:hover,
.campaign--levelup .btn--gold:hover { color: #0B0A10; }

/* Reduced motion freezes the design's animation (js/event-templates.js). */
.is-paused,
.is-paused *,
.is-paused *::before,
.is-paused *::after { animation-play-state: paused !important; }

/* The announcement bar above the nav, in the design's colours. */
.campaign-bar--ticket        { background: #C6F432; color: #0B0A10; }
.campaign-bar--ticket:hover  { background: #B4E21F; }
.campaign-bar--daylight      { background: #16131F; font-family: 'Instrument Sans', var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.campaign-bar--daylight:hover { background: #2A2438; }
.campaign-bar--kinetic       { background: #3EE6FF; color: #0D0B1F; }
.campaign-bar--kinetic:hover { background: #22C7E0; }
.campaign-bar--levelup       { background: #FF6A3D; color: #14100C; }
.campaign-bar--levelup:hover { background: #F0532A; }
.campaign-bar--ticket .campaign-bar__dot,
.campaign-bar--kinetic .campaign-bar__dot,
.campaign-bar--levelup .campaign-bar__dot { background: currentColor; }
.campaign-bar--daylight .campaign-bar__dot { background: #FFD84D; }

/* ---- pieces more than one design uses ---- */
/* A guest-pass ticket with punched sides (Ticket). */
.campaign-ticket {
  position:      relative;
  width:         380px;
  max-width:     100%;
  padding:       24px 26px;
  border-radius: 22px;
  background:    #6D28D9;
  color:         #fff;
  box-shadow:    0 30px 80px rgba(0,0,0,.5);
  animation:     campaign-float 6s ease-in-out infinite;
}
.campaign-ticket::before,
.campaign-ticket::after {
  content:       "";
  position:      absolute;
  top:           50%;
  width:         28px;
  height:        28px;
  margin-top:    -2px;
  border-radius: 50%;
  background:    #07060A;
}
.campaign-ticket::before { left: -14px; }
.campaign-ticket::after  { right: -14px; background: #0F0D16; }
.campaign-ticket__row {
  display:         flex;
  justify-content: space-between;
  gap:             16px;
  font-family:     'Bricolage Grotesque', var(--font-display);
  font-size:       28px;
  font-weight:     800;
  line-height:     1.1;
}
.campaign-ticket__row > span { display: flex; flex-direction: column; gap: 4px; }
.campaign-ticket small,
.campaign-ticket__from {
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          #E6DCFF;
}
.campaign-ticket__right { text-align: right; }
.campaign-ticket__from {
  display:        block;
  margin-top:     22px;
  padding-top:    16px;
  border-top:     2px dashed rgba(255,255,255,.35);
  font-size:      12px;
  letter-spacing: .1em;
}
@keyframes campaign-float {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-4deg) translateY(-10px); }
}

/* The yellow sticker (Daylight). */
.campaign-sticker {
  display:       inline-block;
  padding:       12px 18px;
  border-radius: 16px;
  background:    #FFD84D;
  color:         #16131F;
  font-family:   'Bricolage Grotesque', var(--font-display);
  font-size:     20px;
  font-weight:   800;
  line-height:   1;
  box-shadow:    0 10px 24px rgba(22,19,31,.15);
  transform:     rotate(6deg);
}
@keyframes campaign-wiggle {
  0%, 100% { transform: rotate(6deg); }
  50%      { transform: rotate(-2deg) scale(1.04); }
}

/* A tilted ribbon of text scrolling sideways (Kinetic). */
.campaign-ribbon {
  position:       absolute;
  left:           -60px;
  right:          -60px;
  overflow:       hidden;
  white-space:    nowrap;
  text-transform: uppercase;
  pointer-events: none;
}
.campaign-ribbon--top {
  top:            clamp(36px, 7vh, 64px);
  padding:        16px 0;
  transform:      rotate(-3deg);
  background:     #3EE6FF;
  color:          #0D0B1F;
  font-family:    'Unbounded', var(--font-display);
  font-size:      clamp(16px, 1.9vw, 26px);
  font-weight:    800;
  letter-spacing: .03em;
}
.campaign-ribbon--bottom {
  bottom:         40px;
  padding:        12px 0;
  transform:      rotate(2deg);
  background:     #8B5CF6;
  color:          #0D0B1F;
  font-family:    var(--font-mono);
  font-size:      clamp(12px, 1.1vw, 15px);
  font-weight:    700;
  letter-spacing: .14em;
}
.campaign-ribbon__track {
  display:   inline-flex;
  animation: campaign-marquee 28s linear infinite;
}
.campaign-ribbon--bottom .campaign-ribbon__track { animation-name: campaign-marquee-back; animation-duration: 36s; }
@keyframes campaign-marquee      { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes campaign-marquee-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* The globe (Orbit), drawn by js/event-templates.js. */
.campaign-globe {
  display:      block;
  width:        min(640px, 100%);
  aspect-ratio: 1;
}

/* A members card tilting in 3D, with a sheen (Level Up). */
.campaign-card-stage { perspective: 1200px; }
.campaign-card {
  position:        relative;
  width:           100%;
  aspect-ratio:    460 / 290;
  padding:         26px 30px;
  border-radius:   30px;
  background:      #8B5CF6;
  color:           #0B0B10;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  overflow:        hidden;
  box-shadow:      0 40px 90px rgba(139,92,246,.35);
  transform-style: preserve-3d;
  animation:       campaign-tilt 7s ease-in-out infinite;
}
.campaign-card::after {
  content:    "";
  position:   absolute;
  top:        0;
  bottom:     0;
  left:       0;
  width:      35%;
  background: rgba(255,255,255,.35);
  animation:  campaign-sheen 4.5s ease-in-out infinite;
}
.campaign-card__top,
.campaign-card__foot {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             12px;
  font-family:     var(--font-mono);
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  .14em;
  text-transform:  uppercase;
}
.campaign-card__foot { font-size: 14px; letter-spacing: .08em; }
.campaign-card__chip {
  width:         54px;
  height:        40px;
  flex:          none;
  border-radius: 8px;
  background:    rgba(11,11,16,.18);
  border:        1px solid rgba(11,11,16,.35);
}
.campaign-card__name {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  font-family:    'Space Grotesk', var(--font-display);
  font-size:      44px;
  font-weight:    700;
  line-height:    1;
  letter-spacing: -.02em;
}
.campaign-card__name small {
  font-family:    var(--font-mono);
  font-size:      13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@keyframes campaign-tilt {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) rotateZ(-3deg); }
  50%      { transform: rotateY(18deg) rotateX(-5deg) rotateZ(-3deg); }
}
@keyframes campaign-sheen {
  0%        { transform: translateX(-140%) skewX(-20deg); }
  55%, 100% { transform: translateX(260%) skewX(-20deg); }
}

/* ============ A · TICKET ============ */
.campaign--ticket {
  --gold:      #C6F432;
  --gold-deep: #A8D61E;
  --glow:      rgba(198,244,50,.3);
}
.campaign-hero--ticket { background: #07060A; }
.campaign-hero--ticket .campaign-hero__frame {
  position: absolute;
  top:      0;
  right:    0;
  bottom:   0;
  width:    50%;
  z-index:  -1;
}
.campaign-hero--ticket .campaign-hero__media { z-index: auto; filter: saturate(1.1) brightness(.85); }
.campaign-hero--ticket .campaign-hero__shade {
  z-index:    auto;
  background: linear-gradient(90deg, #07060A 0%, rgba(7,6,10,.15) 45%, rgba(7,6,10,0) 100%);
}
.campaign-hero--ticket .campaign-ticket {
  position:   absolute;
  right:      clamp(24px, 10vw, 150px);
  top:        50%;
  margin-top: -40px;
  width:      clamp(280px, 26vw, 380px);
  z-index:    1;
}
.campaign-hero--ticket .campaign-hero__inner { padding-top: 72px; padding-bottom: 72px; }
.campaign-hero--ticket .campaign-hero__inner > * { max-width: min(700px, 52vw); }
.campaign-hero--ticket .campaign-hero__inner > .campaign-hero__lede { max-width: min(560px, 52vw); }
.campaign-hero--ticket .campaign-hero__kicker { color: #C9C3DA; letter-spacing: .18em; }
.campaign-hero--ticket .campaign-hero__title { color: #F2EFFA; }

/* ============ B · DAYLIGHT ============ */
/* A light page: the site's tokens, turned light for the whole campaign. */
.campaign--daylight {
  --ink:         #F4F3F8;
  --ink-2:       #ECEAF3;
  --surface:     #FFFFFF;
  --surface-2:   #EDE7FC;
  --line:        #E2DFEB;
  --line-strong: #D3CEE0;
  --text:        #16131F;
  --muted:       #4A4458;
  --gold:        #6D28D9;
  --gold-deep:   #5B21B6;
  --glow:        rgba(109,40,217,.28);
  background:    var(--ink);
  color:         var(--text);
}
.campaign--daylight .kicker,
.campaign--daylight .campaign-story__big,
.campaign--daylight .campaign-story__tag { color: #5B21B6; }
.campaign--daylight .campaign-story__quote strong { color: var(--text); }
.campaign--daylight .btn--ghost { background: #fff; }
.campaign--daylight .btn.btn--ghost:hover { color: var(--gold); }
.campaign--daylight .assessment-form input,
.campaign--daylight .assessment-form select,
.campaign--daylight .assessment-form textarea { background: #F7F6FB; }
.campaign--daylight .assessment-form { box-shadow: 0 30px 60px -30px rgba(22,19,31,.25); }
.campaign--daylight select { color-scheme: light; }

.campaign-hero--daylight { background: var(--ink); color: var(--text); }
.campaign-hero--daylight .campaign-hero__inner {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  align-items:           center;
  gap:                   48px;
  padding-top:           56px;
  padding-bottom:        64px;
}
.campaign-hero--daylight .campaign-hero__copy {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            22px;
}
.campaign-hero--daylight .campaign-hero__kicker {
  padding:        8px 14px;
  border-radius:  999px;
  background:     #EDE7FC;
  color:          #4C1D95;
  font-family:    var(--font-body);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0;
  text-transform: none;
}
.campaign-hero--daylight .campaign-hero__title { color: #16131F; letter-spacing: -.04em; }
.campaign-hero--daylight { --campaign-lede: #4A4458; }
.campaign-hero--daylight .campaign-hero__chips li { background: #fff; border: 1px solid #E8E5F0; }
.campaign-hero--daylight .campaign-hero__frame { position: relative; }
.campaign-hero--daylight .campaign-hero__window {
  position:      relative;
  isolation:     isolate;
  width:         100%;
  aspect-ratio:  600 / 660;
  max-height:    calc(100svh - 200px);
  min-height:    360px;
  border-radius: 44px;
  overflow:      hidden;
  background:    #16131F;
  box-shadow:    0 40px 80px rgba(22,19,31,.18);
}
.campaign-hero--daylight .campaign-hero__caption {
  position:      absolute;
  left:          18px;
  right:         18px;
  bottom:        18px;
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       16px 18px;
  border-radius: 26px;
  background:    rgba(255,255,255,.92);
  color:         #16131F;
}
.campaign-hero--daylight .campaign-hero__caption > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.campaign-hero--daylight .campaign-hero__caption b { font-size: 15px; }
.campaign-hero--daylight .campaign-hero__caption small { font-size: 13px; color: #5E5870; }
.campaign-hero__play {
  width:         44px;
  height:        44px;
  flex:          none;
  display:       grid;
  place-items:   center;
  border-radius: 50%;
  background:    #6D28D9;
}
.campaign-hero__play svg { width: 18px; height: 18px; fill: #fff; }
.campaign-hero--daylight .campaign-sticker {
  position:  absolute;
  left:      -36px;
  top:       -14px;
  animation: campaign-wiggle 3.5s ease-in-out infinite;
}

/* ============ C · KINETIC ============ */
.campaign--kinetic {
  --gold:      #3EE6FF;
  --gold-deep: #22C7E0;
  --glow:      rgba(62,230,255,.3);
}
.campaign--kinetic .btn--gold {
  border-radius:  6px;
  font-family:    'Unbounded', var(--font-display);
  font-weight:    800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.campaign-hero--kinetic {
  align-items: flex-end;
  background:  #0D0B1F;
}
.campaign-hero--kinetic .campaign-hero__media { filter: grayscale(.25) contrast(1.08); }
.campaign-hero--kinetic .campaign-hero__shade {
  background: linear-gradient(180deg, rgba(13,11,31,.5) 0%, rgba(13,11,31,.3) 38%, rgba(13,11,31,.88) 78%);
}
.campaign-hero--kinetic .campaign-hero__inner {
  padding-top:    clamp(150px, 22vh, 220px);
  padding-bottom: 150px;
}
.campaign-hero--kinetic .campaign-hero__kicker { color: #CFCAE6; letter-spacing: .16em; }
.campaign-hero--kinetic .campaign-hero__title {
  max-width:      1000px;
  font-size:      clamp(42px, 7.2vw, 104px);
  line-height:    .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color:          #F3F1FF;
}
.campaign-hero--kinetic .campaign-hero__row {
  display:         flex;
  flex-direction:  row-reverse;
  justify-content: flex-end;
  align-items:     center;
  gap:             28px;
}
.campaign-hero--kinetic .campaign-hero__ledes { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.campaign-hero--kinetic { --campaign-lede: #CFCAE6; }
.campaign-hero--kinetic .campaign-hero__lede { font-size: 18px; }
.campaign-hero--kinetic .campaign-hero__lede + .campaign-hero__lede { margin-top: 0; }
.campaign-hero--kinetic .campaign-hero__cta {
  flex:       none;
  min-height: 64px;
  gap:        40px;
  padding:    0 24px;
  font-size:  16px;
}

/* ============ D · ORBIT ============ */
.campaign--orbit {
  --gold:      #8B5CF6;
  --gold-deep: #7C3AED;
}
.campaign-hero--orbit { background: #05040B; }
.campaign-hero--orbit .campaign-hero__media { opacity: .62; filter: saturate(.9); }
.campaign-hero--orbit .campaign-hero__shade {
  background:
    radial-gradient(circle at 74% 54%, rgba(5,4,11,.82) 0, rgba(5,4,11,.7) 24%, rgba(5,4,11,0) 40%),
    linear-gradient(90deg, rgba(5,4,11,.94) 0%, rgba(5,4,11,.5) 52%, rgba(5,4,11,.62) 100%);
}
.campaign-hero--orbit .campaign-hero__inner {
  display:               grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  grid-template-areas:   "copy globe";
  align-items:           center;
  gap:                   32px;
  padding-top:           40px;
  padding-bottom:        40px;
}
.campaign-hero--orbit .campaign-globe { grid-area: globe; justify-self: end; }
.campaign-hero--orbit .campaign-hero__copy {
  grid-area:      copy;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            22px;
}
.campaign-hero--orbit .campaign-hero__kicker { color: #C4B5FD; letter-spacing: .18em; }
.campaign-hero--orbit .campaign-hero__title { font-size: clamp(44px, 6.6vw, 96px); line-height: .95; color: #F2EFFA; }
/* A sheen across its button now and then. */
.campaign--orbit .campaign-hero__cta { overflow: hidden; }
.campaign--orbit .campaign-hero__cta::before {
  content:    "";
  position:   absolute;
  inset:      0;
  width:      40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation:  campaign-shine 3.2s ease-in-out infinite;
}
@keyframes campaign-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(260%); } }

/* ============ E · LEVEL UP ============ */
.campaign--levelup {
  --gold:      #FF6A3D;
  --gold-deep: #F0532A;
  --glow:      rgba(255,106,61,.3);
}
.campaign--levelup .btn--gold {
  border-radius: 14px;
  box-shadow:    0 6px 0 #A8381A;
}
.campaign--levelup .btn.btn--gold:hover { box-shadow: 0 9px 0 #A8381A; }
.campaign-hero--levelup { background: #0B0B10; }
.campaign-hero--levelup .campaign-hero__media { opacity: .7; }
.campaign-hero--levelup .campaign-hero__shade {
  background: linear-gradient(90deg, rgba(11,11,16,.95) 0%, rgba(11,11,16,.55) 50%, rgba(11,11,16,.2) 100%);
}
.campaign-hero--levelup .campaign-hero__inner {
  display:               grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  grid-template-areas:   "copy card";
  align-items:           center;
  gap:                   40px;
  padding-top:           56px;
  padding-bottom:        64px;
}
.campaign-hero--levelup .campaign-card-stage { grid-area: card; justify-self: center; width: min(460px, 100%); }
.campaign-hero--levelup .campaign-hero__copy {
  grid-area:      copy;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            22px;
}
.campaign-hero--levelup .campaign-hero__kicker {
  padding:        8px 12px;
  border-radius:  8px;
  background:     #FF6A3D;
  color:          #14100C;
  font-size:      12px;
  letter-spacing: .14em;
}
.campaign-hero--levelup .campaign-hero__title { font-weight: 700; letter-spacing: -.045em; color: #F5F3EE; }
.campaign-hero--levelup .campaign-hero__accent { color: inherit; }
.campaign-hero__after { color: var(--gold); }
.campaign-hero--levelup { --campaign-lede: #CFCAC0; }
.campaign-hero--levelup .campaign-hero__chips li {
  border:      1.5px solid #FF6A3D;
  font-size:   15px;
  font-weight: 700;
  animation:   campaign-pop .55s cubic-bezier(.3,1.4,.5,1) both;
}
.campaign-hero--levelup .campaign-hero__chips li::before { content: "✓"; color: #FF6A3D; }
.campaign-hero--levelup .campaign-hero__chips li:nth-child(2) { animation-delay: .2s; }
.campaign-hero--levelup .campaign-hero__chips li:nth-child(3) { animation-delay: .4s; }
.campaign-hero--levelup .campaign-hero__cta { min-height: 64px; gap: 40px; padding: 0 26px; font-size: 18px; }
@keyframes campaign-pop {
  0%   { opacity: 0; transform: scale(.5); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============ SIGN-UP PAGE IN A DESIGN ============ */
/* public/event-pass, with the design's piece above the headline
   (campaign-heroes/_badge). */
.event-page:not(.campaign--classic) { background: var(--ink); }
.event-page.campaign--ticket  { --ink: #07060A; }
.event-page.campaign--kinetic { --ink: #0D0B1F; --ink-2: #15122C; }
.event-page.campaign--orbit   { --ink: #05040B; }
.event-page.campaign--levelup { --ink: #0B0B10; }
.event-page.campaign--ticket .kicker,
.event-page.campaign--kinetic .kicker,
.event-page.campaign--levelup .kicker { color: var(--gold); }
.event-page.campaign--orbit .kicker { color: #C4B5FD; }
.event-page__title { font-weight: 800; letter-spacing: -.035em; }
/* Daylight is a light page, but the band with the event's video behind it
   (.event-hero) is dark, so its text goes back to the site's dark tokens. */
.event-page.campaign--daylight .event-hero {
  --ink-2:       #0D0B14;
  --surface:     #15121E;
  --surface-2:   #1F1A30;
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.28);
  --text:        #ECE9F5;
  --muted:       #CFC8DE;
  color:         var(--text);
}
.event-page.campaign--daylight .event-hero .kicker { color: #C4B5FD; }
.event-page.campaign--daylight .event-hero .btn--ghost { background: transparent; }
.event-page.campaign--daylight .event-hero .btn.btn--ghost:hover { color: #fff; }
.event-page.campaign--levelup .event-page__title { font-weight: 700; }
.event-page.campaign--kinetic .event-page__title { text-transform: uppercase; letter-spacing: -.03em; }
.event-page.campaign--daylight .campaign-hero__accent,
.event-page.campaign--orbit .campaign-hero__accent { color: inherit; }

.event-badge {
  position:       relative;
  z-index:        1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
  margin:         0 auto 22px;
  padding:        0 24px;
}
.event-badge .campaign-ticket { width: min(340px, 100%); margin-top: 8px; }
.event-badge--daylight .campaign-sticker { font-size: 16px; padding: 10px 14px; }
.event-badge--kinetic { padding: 18px 0 0; overflow: hidden; }
.event-badge--kinetic .campaign-ribbon { position: relative; left: auto; right: auto; top: auto; width: calc(100% + 80px); margin: 0 -40px; }
.event-badge .campaign-globe { width: min(300px, 76vw); margin: -12px 0 -18px; }
.event-badge .campaign-card-stage { width: min(320px, 100%); }
.event-badge .campaign-card { padding: 18px 20px; border-radius: 22px; }
.event-badge .campaign-card__name { font-size: 30px; }
.event-badge .campaign-card__top,
.event-badge .campaign-card__foot,
.event-badge .campaign-card__name small { font-size: 11px; }
.event-badge .campaign-card__chip { width: 38px; height: 28px; }

/* ============ DESIGNS ON A PHONE ============ */
@media (max-width: 900px) {
  .campaign-hero:where(:not(.campaign-hero--classic)) { min-height: 0; display: block; }
  .campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__inner { gap: 14px; padding-bottom: 76px; }
  .campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__title { font-size: clamp(42px, 13vw, 64px); }
  .campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__lede { font-size: 16px; }
  .campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__actions { width: 100%; }
  .campaign-hero:where(:not(.campaign-hero--classic)) .campaign-hero__cta { width: 100%; justify-content: center; }

  /* Ticket: the video on top, the ticket over its corner. */
  .campaign-hero--ticket .campaign-hero__frame { position: relative; width: 100%; height: 300px; z-index: auto; }
  .campaign-hero--ticket .campaign-hero__shade { background: linear-gradient(180deg, rgba(7,6,10,0) 40%, #07060A 100%); }
  .campaign-hero--ticket .campaign-ticket {
    top:           172px;
    right:         18px;
    margin:        0;
    width:         210px;
    padding:       14px 16px;
    border-radius: 16px;
  }
  .campaign-hero--ticket .campaign-ticket::before,
  .campaign-hero--ticket .campaign-ticket::after,
  .campaign-hero--ticket .campaign-ticket__right,
  .campaign-hero--ticket .campaign-ticket__from { display: none; }
  .campaign-hero--ticket .campaign-ticket__row { font-size: 20px; }
  .campaign-hero--ticket .campaign-hero__inner { padding-top: 0; margin-top: -6px; }
  .campaign-hero--ticket .campaign-hero__inner > *,
  .campaign-hero--ticket .campaign-hero__inner > .campaign-hero__lede { max-width: 100%; }
  .campaign-hero--ticket .campaign-hero__actions .btn--ghost { display: none; }

  /* Daylight: the video card first, the copy under it. */
  .campaign-hero--daylight .campaign-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 26px; }
  .campaign-hero--daylight .campaign-hero__frame { order: -1; }
  .campaign-hero--daylight .campaign-hero__window { aspect-ratio: auto; height: 300px; min-height: 0; border-radius: 30px; }
  .campaign-hero--daylight .campaign-hero__caption { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 20px; gap: 10px; }
  .campaign-hero--daylight .campaign-hero__caption small { display: none; }
  .campaign-hero--daylight .campaign-hero__play { width: 36px; height: 36px; }
  .campaign-hero--daylight .campaign-sticker { left: auto; right: 10px; top: -14px; font-size: 15px; padding: 8px 12px; border-radius: 12px; }
  .campaign-hero--daylight .campaign-hero__copy { gap: 14px; }
  .campaign-hero--daylight .campaign-hero__kicker { font-size: 13px; }
  .campaign-hero--daylight .campaign-hero__actions .btn--ghost { width: 100%; justify-content: center; }

  /* Kinetic: the copy at the bottom, a full-width button. */
  .campaign-hero--kinetic { min-height: calc(100svh - var(--nav-h) - 38px); display: flex; }
  .campaign-hero--kinetic .campaign-hero__shade { background: linear-gradient(180deg, rgba(13,11,31,.45) 0%, rgba(13,11,31,.4) 30%, rgba(13,11,31,.92) 62%); }
  .campaign-hero--kinetic .campaign-hero__inner { padding-top: 140px; padding-bottom: 120px; }
  .campaign-hero--kinetic .campaign-ribbon--top { top: 40px; padding: 12px 0; transform: rotate(-4deg); }
  .campaign-hero--kinetic .campaign-ribbon--bottom { bottom: 28px; padding: 9px 0; }
  .campaign-hero--kinetic .campaign-hero__row { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .campaign-hero--kinetic .campaign-hero__cta { justify-content: space-between; min-height: 60px; font-size: 14px; }

  /* Orbit: the globe first, the copy under it. */
  .campaign-hero--orbit .campaign-hero__shade {
    background:
      radial-gradient(circle at 50% 22%, rgba(5,4,11,.8) 0, rgba(5,4,11,.65) 30%, rgba(5,4,11,0) 52%),
      linear-gradient(180deg, rgba(5,4,11,.35) 0%, rgba(5,4,11,.5) 35%, rgba(5,4,11,.94) 62%);
  }
  .campaign-hero--orbit .campaign-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "globe" "copy"; gap: 0; padding-top: 0; }
  .campaign-hero--orbit .campaign-globe { justify-self: center; width: min(360px, 100%); }
  .campaign-hero--orbit .campaign-hero__copy { gap: 14px; margin-top: -4px; }
  .campaign-hero--orbit .campaign-hero__title { font-size: clamp(36px, 11.5vw, 52px); line-height: .98; }

  /* Level Up: the card first, the copy under it. */
  .campaign-hero--levelup .campaign-hero__shade {
    background: linear-gradient(180deg, rgba(11,11,16,.3) 0%, rgba(11,11,16,.5) 30%, rgba(11,11,16,.95) 62%);
  }
  .campaign-hero--levelup .campaign-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "copy"; gap: 30px; padding-top: 34px; }
  .campaign-hero--levelup .campaign-card-stage { width: min(300px, 100%); perspective: 900px; }
  .campaign-hero--levelup .campaign-card { padding: 18px 20px; border-radius: 22px; }
  .campaign-hero--levelup .campaign-card__name { font-size: 30px; }
  .campaign-hero--levelup .campaign-card__top,
  .campaign-hero--levelup .campaign-card__foot,
  .campaign-hero--levelup .campaign-card__name small { font-size: 11px; }
  .campaign-hero--levelup .campaign-card__chip { width: 38px; height: 28px; }
  .campaign-hero--levelup .campaign-hero__copy { gap: 14px; }
  .campaign-hero--levelup .campaign-hero__title { font-size: clamp(38px, 12vw, 52px); line-height: .95; }
  .campaign-hero--levelup .campaign-hero__cta { justify-content: space-between; min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-bar__dot,
  .campaign-hero__media--still,
  .campaign-ticket,
  .campaign-hero--daylight .campaign-sticker,
  .campaign-ribbon__track,
  .campaign-card,
  .campaign-card::after,
  .campaign--orbit .campaign-hero__cta::before,
  .campaign-hero--levelup .campaign-hero__chips li { animation: none; }
  .campaign-ticket { transform: rotate(-4deg); }
  .campaign-card { transform: rotateY(-12deg) rotateX(6deg) rotateZ(-3deg); }
  .campaign-card::after { display: none; }
}

/* ============ "SHOW QR CODE" (sign-up page) ============ */
.event-qr-open { display: inline-flex; align-items: center; gap: 10px; margin: -14px auto 36px; }
.event-qr-open svg { width: 18px; height: 18px; }
.event-qr {
  /* The site's reset zeroes margins; a modal dialog centres on margin: auto. */
  margin:        auto;
  width:         min(420px, calc(100vw - 32px));
  max-height:    calc(100dvh - 32px);
  overflow:      auto;
  padding:       28px 24px 24px;
  border:        0;
  border-radius: 22px;
  background:    #fff;
  color:         #111;
  text-align:    center;
}
.event-qr::backdrop { background: rgba(7, 6, 10, .82); }
.event-qr h2 { margin: 0 0 14px; font-size: 1.5rem; color: #111; }
.event-qr__code svg { display: block; width: 100%; height: auto; }
.event-qr__for { margin: 12px 0 0; font-size: .9rem; color: #444; }
.event-qr__link { margin: 8px 0 18px; font-size: .85rem; color: #555; word-break: break-all; }

/* ============ SIGN-UP PAGE: THE EVENT'S VIDEO ============ */
/* Behind the top of the page (title, intro, what's included, QR button),
   from right under the nav; the form sits below on the plain background. */
.event-pass--media { padding-top: 0; }
.event-hero {
  position:      relative;
  isolation:     isolate;
  overflow:      hidden;
  padding:       clamp(46px, 7vw, 80px) 0 56px;
  margin-bottom: 36px;
}
.event-hero .event-qr-open { margin-bottom: 0; }

/* ============ HEADER OVER AN EVENT'S VIDEO ============ */
/* Once scrolled, the sticky header is a light glass over the video rather
   than the site's darker one, so the footage doesn't dim under it. */
body:has(.campaign-hero, .event-hero) header.is-scrolled {
  background:              rgba(9, 7, 16, .5);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ...and its links go white with a soft shadow to stay readable over it. */
body:has(.campaign-hero, .event-hero) header.is-scrolled .nav__links a {
  color:       #fff;
  text-shadow: 0 1px 8px rgba(7, 6, 10, .7);
}
/* The sign-up page's shorter block has more text packed over the footage,
   so it keeps a fuller shade. */
.event-hero .campaign-hero__shade {
  background: linear-gradient(180deg, rgba(7,6,10,.55) 0%, rgba(7,6,10,.45) 55%, rgba(7,6,10,.78) 100%);
}
/* With the lighter shade, a soft shadow keeps the smaller text crisp. */
.campaign-hero--classic .campaign-hero__kicker,
.campaign-hero--classic .campaign-hero__lede,
.event-hero .kicker,
.event-hero .hero__subtext {
  text-shadow: 0 1px 14px rgba(7, 6, 10, .55);
}
/* Intro text over an event's video reads almost white, and the event name
   a lighter purple: the site's usual colours are too faint on footage. */
.event-hero .hero__subtext { color: rgba(255, 255, 255, .94); }
.event-hero .hero__subtext + .hero__subtext,
.campaign-hero--classic .campaign-hero__lede + .campaign-hero__lede { color: rgba(255, 255, 255, .86); }
.event-hero .kicker { color: #c9b8ff; }

/* Silver / Gold / Platinum under the sign-up form (public.partials.tier-options),
   and /membership's five tiers with Silver first. */
.tier-options {
  max-width:   1080px;
  margin:      72px auto 0;
  text-align:  left;
}
.tier-options .members__header { text-align: center; margin: 0 auto 28px; max-width: 760px; }
.tier-options .members__header h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; }
.tier-options .tier__price { font-size: 1.5rem; }
.tiers--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .tiers--three { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Five across on a wide screen: the cards are narrower, so the big
   "By invitation" prices come down a size to fit. A fixed size, not one
   that grows with the screen: the row stops widening at the page width,
   so a vw size ran "invitation" into the card's padding on big screens.
   Three, then two, then one across as the screen narrows. */
.tiers--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tiers--five .tier { padding-left: 22px; padding-right: 22px; }
.tiers--five .tier__price.price--large { font-size: 1.85rem; }
@media (max-width: 1240px) { .tiers--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tiers--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiers--five { grid-template-columns: 1fr; } }

/* Cards in a row are the same height, with each button at the bottom, so
   the buttons line up across the row however long each list is. */
.tiers--five,
.tiers--three { align-items: stretch; }
.tiers--five .tier > .btn:last-child,
.tiers--three .tier > .btn:last-child { margin-top: auto; }
.tiers--five .tier__features,
.tiers--three .tier__features { margin-bottom: 24px; }