:root{
    --void:#0B0714;
    --violet-deep:#180A2E;
    --panel:#170C2A;
    --violet:#3B1668;
    --magenta:#9A1FA0;
    --beam:#FF2E6D;
    --beam-core:#EDE3FF;
    --blue-glow:#5B4FE0;
    --white:#FFFFFF;
    --chalk:#F1ECFA;
    --grey:#B3A8C7;
    --line: rgba(241,236,250,0.08);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--chalk);
    font-family:'Space Grotesk', sans-serif;
    font-weight:400;
    line-height:1.65;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.01em; }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  :focus-visible{outline:2px solid var(--beam); outline-offset:3px;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 32px;}

  /* background wash used across dark sections */
  .glow-wash{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(90,60,180,0.35), transparent 60%),
      radial-gradient(ellipse 50% 40% at 85% 100%, rgba(154,31,160,0.22), transparent 60%);
  }

  /* NAV */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    background:linear-gradient(to bottom, rgba(11,7,20,0.92), transparent);
    backdrop-filter:blur(2px);
  }
  .nav-mark img{ height:30px; width:auto; }
  .nav-links{display:none; gap:32px; list-style:none; font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase;}
  .nav-links a{text-decoration:none; color:var(--grey); transition:color 0.25s;}
  .nav-links a:hover{color:var(--white);}
  @media(min-width:760px){.nav-links{display:flex;}}

  /* MOBILE NAV TOGGLE */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:36px; height:36px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:60;
  }
  @media(min-width:760px){ .nav-toggle{ display:none; } }
  .nav-toggle span{
    display:block;
    width:100%;
    height:1.5px;
    background:var(--chalk);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  .mobile-panel{
    position:fixed;
    inset:0;
    z-index:55;
    background:rgba(11,7,20,0.98);
    backdrop-filter:blur(6px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:36px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }
  .mobile-panel.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .mobile-panel a{
    text-decoration:none;
    color:var(--chalk);
    font-family:'Fraunces', serif;
    font-style:italic;
    font-size:1.6rem;
    transition:color 0.25s;
  }
  .mobile-panel a:hover{ color:var(--beam); }
  @media(min-width:760px){ .mobile-panel{ display:none; } }

  /* HERO */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:140px 32px 90px;
    text-align:center;
    background:radial-gradient(ellipse 90% 70% at 50% 20%, rgba(59,22,104,0.55), var(--void) 65%);
  }
  .beam{
    position:absolute;
    top:0; bottom:0; left:50%;
    width:2px;
    transform:translateX(-50%);
    background:linear-gradient(to bottom, transparent, var(--beam-core) 35%, var(--beam) 55%, transparent);
    box-shadow:0 0 40px 6px rgba(255,46,109,0.55), 0 0 90px 20px rgba(91,79,224,0.35);
    animation:pulse 5s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity:0.7; }
    50%{ opacity:1; }
  }
  .hero-lockup{
    position:relative; z-index:2;
    max-width:640px;
    width:100%;
    margin:0 auto;
    opacity:0;
    animation:fadeUp 1.1s ease-out 0.2s forwards;
  }
  .hero-lockup img{ width:100%; height:auto; }
  .hero-wordmark{
    display:none;
    position:relative; z-index:2;
    width:200px;
    margin:0 auto;
    opacity:0;
    animation:fadeUp 1.1s ease-out 0.2s forwards;
  }
  .hero-wordmark img{ width:100%; height:auto; }
  @media(max-width:639px){
    .hero-lockup{ display:none; }
    .hero-wordmark{ display:block; }
    .hero{ padding-top:120px; }
  }
  .eyebrow{
    position:relative; z-index:2;
    font-size:0.8rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--beam);
    margin-top:34px;
    opacity:0;
    animation:fadeUp 0.9s ease-out 0.5s forwards;
  }
  .hero h1{
    position:relative; z-index:2;
    font-size:clamp(1.6rem, 3.4vw, 2.3rem);
    font-style:italic;
    font-weight:400;
    max-width:680px;
    margin:20px auto 0;
    color:var(--white);
    line-height:1.3;
    opacity:0;
    animation:fadeUp 0.9s ease-out 0.7s forwards;
  }
  .hero p.sub{
    position:relative; z-index:2;
    margin:22px auto 0;
    font-size:1rem;
    color:var(--grey);
    max-width:540px;
    opacity:0;
    animation:fadeUp 0.9s ease-out 0.9s forwards;
  }
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hero-cta{
    position:relative; z-index:2;
    margin-top:38px;
    display:inline-flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:fadeUp 0.9s ease-out 1.1s forwards;
  }
  .btn{
    padding:14px 30px;
    border-radius:2px;
    font-size:0.85rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-block;
    transition:all 0.3s;
    border:1px solid transparent;
  }
  .btn-primary{ background:var(--beam); color:var(--white); }
  .btn-primary:hover{ background:#ff4d80; transform:translateY(-1px); }
  .btn-ghost{ border-color:rgba(241,236,250,0.28); color:var(--chalk); }
  .btn-ghost:hover{ border-color:var(--white); background:rgba(241,236,250,0.06); }

  .scroll-cue{
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey); opacity:0.6; z-index:2;
  }
  .scroll-cue::after{
    content:''; display:block; width:1px; height:28px;
    background:linear-gradient(var(--grey), transparent); margin:10px auto 0;
  }

  /* SECTION GENERIC */
  section{ padding:110px 0; position:relative; }
  .section-label{
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--beam);
    display:flex; align-items:center; gap:14px; margin-bottom:26px;
  }
  .section-label::before{ content:''; width:36px; height:1px; background:var(--beam); }

  /* STORY */
  .story{
    background:var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .story-grid{ display:grid; grid-template-columns:1fr; gap:56px; position:relative; z-index:1; }
  @media(min-width:900px){ .story-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
  .story h2{ font-size:clamp(1.9rem, 3.6vw, 2.5rem); line-height:1.25; max-width:480px; }
  .story .pull{
    font-style:italic;
    font-size:1.3rem;
    color:var(--white);
    line-height:1.5;
    margin-bottom:26px;
    max-width:480px;
  }
  .story p{ color:var(--grey); font-size:0.98rem; margin-top:16px; max-width:480px; }
  .synopsis-card{
    background:rgba(241,236,250,0.03);
    border:1px solid var(--line);
    padding:36px;
  }
  .synopsis-card .tag{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--beam); }
  .synopsis-card p{ color:var(--grey); font-size:0.95rem; margin-top:16px; }
  .synopsis-card p + p{ margin-top:16px; }

  /* SOUND */
  .sound-head{ max-width:600px; position:relative; z-index:1; }
  .sound-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.5rem); }
  .sound-head p{ color:var(--grey); margin-top:18px; }
  .genre-row{
    margin-top:52px; display:grid; grid-template-columns:1fr; gap:1px;
    background:var(--line); border:1px solid var(--line); position:relative; z-index:1;
  }
  @media(min-width:720px){ .genre-row{ grid-template-columns:repeat(4, 1fr); } }
  .genre-cell{ background:var(--void); padding:32px 26px; transition:background 0.3s; }
  .genre-cell:hover{ background:var(--panel); }
  .genre-cell h3{ font-size:1.1rem; font-weight:500; text-transform:uppercase; letter-spacing:0.03em; font-family:'Space Grotesk', sans-serif; }
  .genre-cell p{ margin-top:10px; color:var(--grey); font-size:0.88rem; }

  /* GALLERY */
  .gallery{ background:var(--void); }
  .gallery-head{ max-width:600px; position:relative; z-index:1; }
  .gallery-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.5rem); }
  .gallery-head p{ color:var(--grey); margin-top:18px; }
  .gallery-grid{
    margin-top:52px;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    position:relative; z-index:1;
  }
  @media(min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media(min-width:960px){ .gallery-grid{ grid-template-columns:repeat(4, 1fr); } }
  .gallery-tile{
    aspect-ratio:1000/1200;
    background:linear-gradient(150deg, var(--violet-deep), var(--panel));
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .gallery-tile.gallery-tile--wide{ grid-column:1 / -1; aspect-ratio:1580/580; }
  .gallery-tile img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
    transition:transform 0.6s ease;
  }
  .gallery-tile:hover img{ transform:scale(1.06); }
  .gallery-tile span{
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--grey);
    text-align:center;
    padding:0 16px;
  }
  .gallery-tile .cap{
    position:absolute; z-index:2;
    left:0; right:0; bottom:0;
    padding:20px 16px 14px;
    background:linear-gradient(to top, rgba(11,7,20,0.88), rgba(11,7,20,0));
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--chalk);
    text-align:left;
    pointer-events:none;
  }
  .gallery-tile::before{
    content:'';
    position:absolute; inset:0;
    z-index:1;
    background:radial-gradient(circle at 50% 40%, rgba(255,46,109,0.12), transparent 70%);
    pointer-events:none;
  }
  .gallery-note{
    margin-top:28px;
    font-size:0.85rem;
    color:var(--grey);
    position:relative; z-index:1;
  }
  .gallery-note a{
    color:var(--beam);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.25s;
  }
  .gallery-note a:hover{ border-color:var(--beam); }

  /* TICKETS / VENUE */
  .tickets{
    background:var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .tickets-head{ max-width:600px; position:relative; z-index:1; }
  .tickets-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.5rem); }
  .tickets-head p{ color:var(--grey); margin-top:18px; }
  .ticket-grid{
    margin-top:52px;
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    position:relative; z-index:1;
  }
  @media(min-width:760px){ .ticket-grid{ grid-template-columns:repeat(3, 1fr); } }
  .ticket-card{ background:var(--void); padding:34px 30px; }
  .ticket-card .tag{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--beam); }
  .ticket-card h3{ margin-top:12px; font-size:1.3rem; font-style:italic; }
  .ticket-card p{ margin-top:10px; color:var(--grey); font-size:0.9rem; }
  .show-list{
    list-style:none;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
  }
  .show-list li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    background:var(--void);
    padding:12px 2px;
    font-size:0.9rem;
  }
  .show-list li span:first-child{ color:var(--chalk); }
  .show-list li span:last-child{ color:var(--grey); font-size:0.82rem; letter-spacing:0.02em; }
  .tickets-status{
    margin-top:44px;
    text-align:center;
    position:relative; z-index:1;
  }
  .tickets-status p{ margin-top:10px; color:var(--grey); font-size:0.9rem; }
  .signup-wrap{
    margin:32px auto 0;
    max-width:480px;
    background:#FFFFFF;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(241,236,250,0.06);
  }
  .signup-wrap iframe{ display:block; width:100%; border:none; }
  .status{
    display:inline-block;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:8px 16px;
    border:1px solid rgba(241,236,250,0.2);
    color:var(--grey);
  }

  /* FOLLOW */
  .follow{ background:var(--void); text-align:center; }
  .follow h2{ font-size:clamp(2rem, 5vw, 3rem); max-width:700px; margin:0 auto; position:relative; z-index:1; }
  .follow h2 em{ color:var(--beam); font-style:italic; }
  .follow p{ color:var(--grey); margin-top:20px; max-width:460px; margin-left:auto; margin-right:auto; position:relative; z-index:1; }
  .social-row{ margin-top:38px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
  .social-row a{
    text-decoration:none; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--chalk); border-bottom:1px solid transparent; padding-bottom:4px; transition:border-color 0.25s, color 0.25s;
  }
  .social-row a:hover{ border-color:var(--beam); color:var(--beam); }

  footer{
    padding:36px 32px; text-align:center; color:var(--grey); font-size:0.8rem; border-top:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  footer img{ height:20px; opacity:0.7; }

  .fade-in{ opacity:0; transform:translateY(24px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; }
  .fade-in.visible{ opacity:1; transform:translateY(0); }