:root {
      --bg: #0f0b14;
      --panel: #1a1223;
      --text: #fff7ed;
      --muted: #c7b8d6;
      --accent: #ff4f87;
      --accent-2: #ffd166;
      --line: rgba(255,255,255,.12);
      --shadow: 0 24px 80px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,79,135,.26), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(255,209,102,.18), transparent 28%),
        var(--bg);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: rgba(15, 11, 20, .74);
      border-bottom: 1px solid var(--line);
    }

    nav {
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 2px;
        font-weight: 900;
        letter-spacing: -.04em;
        font-size: 1.15rem;
    }
    
    .brand-logo {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        object-fit: cover;
        box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
    
    .brand-text span {
        color: var(--accent-2);
    }

    .nav-links {
      display: flex;
      gap: 18px;
      align-items: center;
      color: var(--muted);
      font-size: .95rem;
    }

    .nav-links a:hover { color: var(--text); }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      font-weight: 800;
      box-shadow: 0 12px 30px rgba(255,79,135,.25);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .button:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255,79,135,.32); }
    .button.secondary { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--text); }

    .hero {
      padding: 96px 0 72px;
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 48px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--accent-2);
      background: rgba(255,255,255,.04);
      font-weight: 800;
      font-size: .84rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    h1 {
      margin: 20px 0 16px;
      font-size: clamp(3rem, 8vw, 6.5rem);
      line-height: .9;
      letter-spacing: -.075em;
    }

    h1 em {
      color: var(--accent);
      font-style: normal;
    }

    .lead {
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      color: var(--muted);
      max-width: 650px;
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

    .photo-card {
      min-height: 520px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background:
        linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        url('./images/AngelaShawComedyOnStage.png') top center/cover;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .photo-card::after {
      content: "Angela Shaw Comedy";
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(15,11,20,.72);
      border: 1px solid var(--line);
      backdrop-filter: blur(12px);
      font-size: 1.5rem;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    section { padding: 72px 0; }

    .section-title {
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: -.06em;
      margin: 0 0 18px;
    }

    .section-copy { color: var(--muted); max-width: 720px; margin: 0 0 28px; }

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

    .card {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      border-radius: 28px;
      padding: 24px;
      box-shadow: 0 18px 55px rgba(0,0,0,.16);
    }

    .card h3 { margin: 0 0 8px; font-size: 1.25rem; }
    .card p { margin: 0; color: var(--muted); }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .video-placeholder {
      aspect-ratio: 9 / 16;
      border-radius: 28px;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(255,79,135,.28), rgba(255,209,102,.10));
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px;
      color: var(--text);
      font-weight: 900;
      font-size: 1.35rem;
      box-shadow: var(--shadow);
    }

    .shows {
      display: grid;
      gap: 14px;
    }

    .show-row {
      display: grid;
      grid-template-columns: 150px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255,255,255,.04);
    }

    .date { color: var(--accent-2); font-weight: 900; }
    .venue strong { display: block; }
    .venue span { color: var(--muted); }

    .socials {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }

    .socials a {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--muted);
      background: rgba(255,255,255,.035);
    }

    .socials a:hover { color: var(--text); border-color: rgba(255,255,255,.35); }

    .contact-box {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding: 34px;
      border-radius: 32px;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(255,79,135,.20), rgba(255,255,255,.04));
      box-shadow: var(--shadow);
    }

    footer {
      padding: 30px 0 48px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      font-size: .95rem;
    }

    @media (max-width: 860px) {
      .hero, .contact-box { grid-template-columns: 1fr; }
      .photo-card { min-height: 420px; }
      .grid, .video-grid { grid-template-columns: 1fr; }
      .show-row { grid-template-columns: 1fr; }
      .nav-links { display: none; }
    }