:root{
    --black: #0b0708;
    --black-2: #130c0e;
    --burgundy-deep: #350c17;
    --burgundy: #641726;
    --burgundy-light: #9c2c3f;
    --gold: #b8925a;
    --gold-dim: #7a6142;
    --cream: #ece1d6;
    --cream-dim: #b9a99d;
    --shadow: rgba(0,0,0,0.6);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }

  body{
    background: var(--black);
    color: var(--cream);
    font-family: 'Cormorant Garamond', serif;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      repeating-linear-gradient(100deg,
        rgba(0,0,0,0.55) 0 3%,
        rgba(255,255,255,0.02) 3% 4.2%,
        rgba(0,0,0,0.25) 4.2% 7%);
    pointer-events:none;
    z-index:0;
    opacity:0.55;
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    background: radial-gradient(ellipse at 50% -10%, rgba(156,44,63,0.35), transparent 55%),
                radial-gradient(ellipse at 50% 110%, rgba(53,12,23,0.6), transparent 60%);
    pointer-events:none;
    z-index:0;
  }

  a{ color:inherit; text-decoration:none; }

  header.stage-header{
    position:relative;
    z-index:2;
    padding: 46px 5vw 30px;
    text-align:center;
  }
  .valance{
    position:absolute; top:0; left:0; width:100%; height:120px;
    z-index:-1;
  }
  .title-link{
    text-decoration:none;
    display:inline-block;
  }
  .title-link h1{
    font-family:'Playfair Display', serif;
    font-weight:900;
    letter-spacing:0.04em;
    font-size:clamp(28px, 4.4vw, 54px);
    margin:0;
    color:var(--cream);
    text-shadow: 0 2px 24px rgba(0,0,0,0.7);
    transition: color 0.35s ease, text-shadow 0.35s ease;
  }
  .title-link:hover h1{
    color:var(--gold);
    text-shadow: 0 0 28px rgba(184,146,90,0.45);
  }
  .subtitle{
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold-dim);
    margin-top:10px;
  }
  .site-nav{
    margin-top:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
  }
  .site-nav-link{
    background:none; border:none; padding:2px 0;
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cream-dim);
    cursor:pointer;
    border-bottom:1px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .site-nav-link:hover, .site-nav-link.active{
    color:var(--gold);
    border-color:var(--gold-dim);
  }
  .site-nav-sep{ color:var(--gold-dim); font-size:12px; }

  main{ position:relative; z-index:1; }
  .view{ display:none; }
  .view.active{ display:block; }

  .stage-search-wrap{
    max-width:1280px;
    margin:0 auto;
    padding: 24px 5vw 0;
  }
  .stage{
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:0;
    min-height: 66vh;
    max-width:1280px;
    margin: 0 auto;
    padding: 0 5vw 60px;
  }

  .program-panel{
    position:relative;
    border-radius: 2px;
    padding: 40px clamp(24px,4vw,56px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:420px;
    background:
      repeating-linear-gradient(100deg,
        rgba(0,0,0,0.4) 0 4%,
        rgba(255,255,255,0.025) 4% 6%,
        rgba(0,0,0,0.15) 6% 10%),
      linear-gradient(135deg, var(--burgundy-deep), var(--burgundy) 60%, var(--burgundy-deep));
    box-shadow: inset 0 0 90px rgba(0,0,0,0.55), 0 20px 50px rgba(0,0,0,0.5);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 0 92%, 3% 80%, 0 66%, 3% 52%, 0 38%, 3% 24%, 0 12%);
    transition: opacity 0.4s ease;
  }
  .program-panel .placeholder-hint{
    font-family:'Inter', sans-serif;
    font-size:13px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color: var(--cream-dim);
    opacity:0.7;
  }
  .program-panel h2{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:600;
    font-size: clamp(22px, 2.4vw, 32px);
    color: var(--gold);
    margin: 0 0 6px;
  }
  .program-panel .p-annot{
    font-size:18px;
    line-height:1.55;
    color:var(--cream);
    margin: 0 0 22px;
    max-width: 46ch;
  }
  .program-panel .p-cast{
    list-style:none;
    margin:0; padding:0;
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:var(--cream-dim);
  }
  .program-panel .p-cast li{
    display:flex; justify-content:space-between; gap:16px;
    padding:6px 0;
    border-top: 1px solid rgba(184,146,90,0.18);
    max-width: 420px;
  }
  .program-panel .p-cast li:first-child{ border-top:none; }
  .program-panel .p-cast b{ color:var(--cream); font-weight:500; }

  .person-link{
    background:none; border:none; padding:0; margin:0;
    font: inherit; color:var(--gold);
    cursor:pointer;
    text-decoration:none;
    transition: color 0.25s ease;
  }
  .person-link:hover{ color:var(--cream); }

  nav.play-list{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color: var(--gold-dim) transparent;
    mask-image: linear-gradient(to bottom, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
  }
  nav.play-list::-webkit-scrollbar{ width:6px; }
  nav.play-list::-webkit-scrollbar-track{ background:transparent; }
  nav.play-list::-webkit-scrollbar-thumb{ background:var(--gold-dim); border-radius:3px; }
  nav.play-list::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
  .play-item{
    display:block;
    position:relative;
    padding: 22px 28px;
    cursor:pointer;
    border-bottom: 1px solid rgba(184,146,90,0.16);
    transition: background 0.3s ease, padding-left 0.3s ease;
  }
  .play-item:first-child{ border-top: 1px solid rgba(184,146,90,0.16); }
  .play-item:hover, .play-item.expanded{
    background: linear-gradient(90deg, rgba(156,44,63,0.28), transparent);
    padding-left:38px;
  }
  .play-item .num{
    font-family:'Inter', sans-serif;
    font-size:11px;
    color:var(--gold-dim);
    letter-spacing:0.1em;
  }
  .play-item h3{
    font-family:'Playfair Display', serif;
    font-weight:500;
    font-size:22px;
    margin:4px 0 0;
    color:var(--cream);
    transition:color 0.3s ease;
  }
  .play-item:hover h3, .play-item.expanded h3{ color:var(--gold); }

  .mobile-program{
    display:none;
    padding: 14px 4px 6px;
    font-size:16px;
    line-height:1.5;
    color:var(--cream-dim);
  }
  .mobile-program .go-btn{
    display:inline-block;
    margin-top:12px;
    font-family:'Inter', sans-serif;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold);
    border:1px solid var(--gold-dim);
    padding:9px 18px;
    border-radius:2px;
    cursor:pointer;
    background:transparent;
  }
  .mobile-program .go-btn:hover{ background:rgba(184,146,90,0.12); }

  @media (max-width: 860px){
    .stage{ grid-template-columns: 1fr; }
    .program-panel{ display:none; }
    .play-item.expanded .mobile-program{ display:block; }
    nav.play-list{ max-height:none !important; overflow-y:visible; mask-image:none; -webkit-mask-image:none; }
  }

  .detail-wrap{
    max-width:1400px;
    margin:0 auto;
    padding: 0 5vw 60px;
  }
  .back-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter', sans-serif;
    font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--cream-dim);
    text-decoration:none;
    cursor:pointer;
    margin-bottom:22px;
    background:none; border:none;
  }
  .back-link:hover{ color:var(--gold); }

  .detail-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height:70vh;
    border-radius:2px;
    overflow:hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  }
  .detail-grid.flip{ direction: rtl; }
  .detail-grid.flip > *{ direction: ltr; }

  .curtain-side{
    position:relative;
    padding: 56px 44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:
      repeating-linear-gradient(95deg,
        rgba(0,0,0,0.45) 0 4%,
        rgba(255,255,255,0.03) 4% 6%,
        rgba(0,0,0,0.18) 6% 10%),
      linear-gradient(160deg, var(--burgundy-deep), var(--burgundy) 55%, var(--black-2));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6% 88%, 0 76%, 6% 64%, 0 52%, 6% 40%, 0 28%, 6% 16%, 0 6%);
  }
  .detail-grid.flip .curtain-side{
    clip-path: polygon(0 0, 100% 0, 94% 6%, 100% 16%, 94% 28%, 100% 40%, 94% 52%, 100% 64%, 94% 76%, 100% 88%, 100% 100%, 0 100%);
  }
  .curtain-side .eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gold-dim);
    margin-bottom:14px;
  }
  .curtain-side h2{
    font-family:'Playfair Display', serif;
    font-weight:800;
    font-size:clamp(28px, 3.6vw, 46px);
    margin:0 0 20px;
    color:var(--cream);
  }
  .curtain-side .desc{
    font-size:19px;
    line-height:1.7;
    color:var(--cream-dim);
    max-width:54ch;
    white-space:pre-line; 
  }
  .curtain-side .cast-title{
    font-family:'Inter', sans-serif;
    font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold);
    margin:30px 0 10px;
  }
  .curtain-side .p-cast{
    list-style:none; margin:0; padding:0;
    font-family:'Inter', sans-serif; font-size:13px; color:var(--cream-dim);
    max-width:420px;
  }
  .curtain-side .p-cast li{
    display:flex; justify-content:space-between; gap:16px;
    padding:6px 0; border-top:1px solid rgba(184,146,90,0.18);
  }
  .curtain-side .p-cast li:first-child{ border-top:none; }
  .curtain-side .p-cast b{ color:var(--cream); font-weight:500; }

  .photo-side{
    position:relative;
    background:#000;
    overflow:hidden;
  }
  .photo-hero{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    filter: brightness(0.42) saturate(0.9);
    transition: background-image 0.5s ease;
  }
  .photo-hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.7) 90%);
  }

  .carousel{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding: 40px;
  }
  .carousel-track-wrap{
    position:relative;
    border-radius:2px;
    overflow:hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    aspect-ratio: 4/3;
    background:#111;
  }
  .carousel-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0;
    transition: opacity 0.5s ease;
  }
  .carousel-slide.active{ opacity:1; }
  .carousel-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:16px;
  }
  .carousel-arrows{ display:flex; gap:10px; }
  .carousel-arrows button{
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--gold-dim);
    background:rgba(0,0,0,0.35);
    color:var(--cream);
    cursor:pointer;
    font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .carousel-arrows button:hover{ background:rgba(184,146,90,0.2); border-color:var(--gold); }
  .carousel-dots{ display:flex; gap:8px; }
  .carousel-dots span{
    width:7px; height:7px; border-radius:50%;
    background: rgba(236,225,214,0.3);
    cursor:pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .carousel-dots span.active{ background:var(--gold); transform:scale(1.3); }

  @media (max-width: 860px){
    .detail-grid, .detail-grid.flip{ grid-template-columns: 1fr; direction:ltr; }
    .curtain-side, .detail-grid.flip .curtain-side{ clip-path:none; padding:40px 26px; }
    .photo-side{ min-height:60vh; }
  }

  .video-block{
    margin-top:40px;
    padding: 40px clamp(24px,4vw,56px) 48px;
    border-radius:2px;
    background:
      repeating-linear-gradient(100deg,
        rgba(0,0,0,0.4) 0 4%,
        rgba(255,255,255,0.02) 4% 6%,
        rgba(0,0,0,0.15) 6% 10%),
      linear-gradient(135deg, var(--burgundy-deep), var(--black-2) 75%);
    box-shadow: inset 0 0 90px rgba(0,0,0,0.5), 0 20px 50px rgba(0,0,0,0.5);
  }
  .video-block .eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gold-dim);
    margin-bottom:8px;
  }
  .video-block h3{
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:clamp(22px, 2.6vw, 30px);
    color:var(--cream);
    margin:0 0 24px;
  }
  .video-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:2px;
    overflow:hidden;
    background:#000;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  }
  .video-frame iframe,
  .video-frame video{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
    display:block;
  }

  .gallery-title{
    font-family:'Playfair Display', serif;
    font-weight:700;
    font-size:clamp(24px, 3vw, 36px);
    color:var(--cream);
    margin:0 0 30px;
  }
  .list-search{
    margin: 0 0 30px;
    max-width: 420px;
  }
  .list-search-input{
    width:100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    padding: 12px 16px;
    font-family:'Inter', sans-serif;
    font-size: 15px;
    color: var(--cream);
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .list-search-input::placeholder{ color: var(--cream-dim); }
  .list-search-input:focus{
    border-color: var(--gold);
    background: rgba(255,255,255,0.06);
  }
  .list-empty{
    display:none;
    font-family:'Inter', sans-serif;
    font-size: 14px;
    color: var(--cream-dim);
    margin: 0 0 30px;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:26px;
    padding-bottom:40px;
  }
  .person-card{
    background:none; border:none; padding:0; margin:0;
    cursor:pointer;
    text-align:left;
    font-family:inherit; color:inherit;
  }
  .person-card .photo{
    aspect-ratio: 3/4;
    border-radius:2px;
    background-size:cover;
    background-position:center;
    filter:brightness(0.75) saturate(0.9);
    box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    transition: filter 0.3s ease, transform 0.3s ease;
    margin-bottom:12px;
  }
  .person-card:hover .photo{
    filter:brightness(1) saturate(1);
    transform: translateY(-4px);
  }
  .person-card .p-name{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:600;
    font-size:19px;
    color:var(--cream);
    transition:color 0.25s ease;
  }
  .person-card:hover .p-name{ color:var(--gold); }
  .person-card .p-role{
    font-family:'Inter', sans-serif;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--gold-dim);
    margin-top:4px;
  }

  footer{
    text-align:center;
    font-family:'Inter', sans-serif;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold-dim);
    padding: 30px 0 40px;
    position:relative; z-index:1;
  }
  .footer-links{
    margin-top:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    letter-spacing:0.14em;
  }
  .footer-links a{
    color:var(--cream-dim);
    text-decoration:none;
    transition:color 0.25s ease;
  }
  .footer-links a:hover{ color:var(--gold); }
  .footer-links .sep{ color:var(--gold-dim); }