:root {
  --ink: #11110f;
  --paper: #ece9e2;
  --line-dark: rgba(255,255,255,.18);
  --line-light: rgba(17,17,15,.18);
  --muted-dark: rgba(255,255,255,.62);
  --muted-light: rgba(17,17,15,.58);
  --max: 1440px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}
a { color: inherit; }
img { display:block; width:100%; }
.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 76px;
  padding: 0 clamp(22px,4vw,64px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: white;
  mix-blend-mode: difference;
}
.brand { font-weight: 700; letter-spacing: .08em; text-decoration: none; font-size: 14px; }
.nav { margin-left:auto; display:flex; gap:26px; font-size:13px; }
.nav a { text-decoration:none; opacity:.88; }
.nav a:hover { opacity:1; }
.menu-toggle { display:none; margin-left:auto; background:transparent; border:0; color:inherit; font:inherit; }
.section-dark { background: var(--ink); color:#f6f4ef; }
.section-light { background: var(--paper); color:var(--ink); }
.hero {
  min-height: 100svh;
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 56%) minmax(380px, 44%);
  overflow:hidden;
}
.hero-image-wrap { min-height:100svh; overflow:hidden; }
.hero-image { height:100%; object-fit:cover; object-position:center 22%; filter:brightness(.78); }
.hero-copy { min-width:0; display:flex; flex-direction:column; justify-content:flex-end; padding: 120px clamp(26px,3.6vw,58px) 8vh; }
.eyebrow, .section-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.eyebrow { color:rgba(255,255,255,.7); margin-bottom:auto; padding-top:4vh; }
h1 { margin:0; max-width:100%; font-size:clamp(56px,6.2vw,112px); line-height:.88; letter-spacing:-.05em; font-weight:500; }
.hero-role { font-family: Georgia, serif; font-style:italic; font-size:clamp(25px,2.2vw,39px); margin:24px 0 36px; }
.text-link { display:inline-flex; gap:9px; align-items:center; text-decoration:none; padding-bottom:4px; border-bottom:1px solid currentColor; width:max-content; font-size:14px; }
.text-link.light { color:white; }
.intro, .about, .repertoire, .gallery { padding: 110px clamp(24px,6vw,90px); }
.section-kicker { margin-bottom: 52px; }
.muted { color:var(--muted-dark); }
.intro-grid, .about-grid, .contact-grid, .stage-grid { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(30px,8vw,140px); }
h2 { margin:0; font-family: Georgia, 'Times New Roman', serif; font-weight:400; font-size:clamp(44px,5.1vw,86px); line-height:.99; letter-spacing:-.035em; }
.intro-grid p, .about-copy p { font-size:clamp(18px,1.5vw,24px); max-width:760px; margin-top:0; }
.intro-grid .text-link { margin-top:30px; }
.performance, .stage, .contact { padding: 110px clamp(24px,6vw,90px); }
.performance-top { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom:52px; }
.performance-card { border-top:1px solid var(--line-dark); padding-top:26px; display:grid; grid-template-columns: 2fr 1fr; gap:32px; }
.video-placeholder { aspect-ratio:16/9; background:linear-gradient(140deg,#2b2b2a,#181817); display:grid; place-items:center; color:var(--muted-dark); font-family:Georgia,serif; font-style:italic; }
.piece-info { border-top:1px solid var(--line-dark); padding-top:20px; }
.piece-info h3 { margin:0 0 10px; font-family:Georgia,serif; font-weight:400; font-size:30px; }
.piece-info p { margin:6px 0; }
.about-copy { border-top:1px solid var(--line-light); padding-top:24px; }
.detail-block { margin-top:52px; padding-top:24px; border-top:1px solid var(--line-light); }
.detail-label { text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin-bottom:16px; }
.repertoire { padding-top:40px; }
.repertoire h2 { max-width:1050px; margin-bottom:60px; }
.repertoire-list { border-top:1px solid var(--line-light); }
.repertoire-list > div { display:grid; grid-template-columns: 230px 1fr; gap:25px; padding:24px 0; border-bottom:1px solid var(--line-light); }
.repertoire-list span { text-transform:uppercase; letter-spacing:.11em; font-size:11px; }
.repertoire-list strong { font-weight:400; font-size:clamp(19px,1.7vw,28px); }
.large-copy { font-family:Georgia,serif; font-size:clamp(24px,2.3vw,38px); line-height:1.2; margin-top:0; }
.gallery-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom:48px; }
.gallery-heading p { margin:0; color:var(--muted-light); }
.gallery-grid {
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 14px;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.gallery-grid figure {
  flex:0 0 clamp(260px,28vw,420px);
  height:clamp(400px,46vw,620px);
  margin:0;
  overflow:hidden;
  scroll-snap-align:start;
}
.gallery-grid img { height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery-grid figure:hover img { transform:scale(1.025); }
.social-links { display:flex; flex-direction:column; gap:14px; margin-top:55px; font-size:18px; }
.social-links a { text-underline-offset:4px; }
.footer { background:#f3f0ea; color:#11110f; padding:45px clamp(24px,6vw,90px); display:flex; justify-content:space-between; border-top:1px solid var(--line-light); }
.footer > div { display:flex; flex-direction:column; gap:5px; }
.footer span { font-size:13px; color:var(--muted-light); }

@media (max-width: 1180px) and (min-width: 901px) {
  .hero { grid-template-columns:minmax(0,54%) minmax(360px,46%); }
  .hero-copy { padding-left:34px; padding-right:34px; }
  h1 { font-size:clamp(52px,5.8vw,82px); }
}
@media (max-width: 900px) {
  .site-header { height:64px; }
  .nav { display:none; position:absolute; left:0; right:0; top:64px; padding:24px; background:#111; flex-direction:column; gap:18px; mix-blend-mode:normal; }
  .nav.open { display:flex; }
  .menu-toggle { display:block; }
  .hero { grid-template-columns:1fr; }
  .hero-image-wrap { min-height:62svh; }
  .hero-copy { min-height:38svh; padding-top:34px; }
  .eyebrow { margin-bottom:36px; padding-top:0; }
  .intro-grid, .about-grid, .contact-grid, .stage-grid, .performance-card { grid-template-columns:1fr; }
  .performance-top, .gallery-heading { align-items:flex-start; flex-direction:column; }
  .repertoire-list > div { grid-template-columns:1fr; gap:8px; }
}
@media (max-width: 560px) {
  .intro, .about, .repertoire, .gallery, .performance, .stage, .contact { padding-left:20px; padding-right:20px; padding-top:80px; padding-bottom:80px; }
  .gallery-grid figure { flex-basis:min(82vw,360px); height:min(118vw,520px); }
  .footer { flex-direction:column; }
}

/* Dynamic gallery + embedded performances */
.hero-image-fallback { width:100%; height:100%; background:linear-gradient(145deg,#343432,#171716); }
.video-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#181817; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.performances-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:52px; }
.performances-heading .large-copy { margin-bottom:0; color:var(--muted-dark); }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.video-item { border-top:1px solid var(--line-dark); padding-top:18px; }
.youtube-link { margin-top:38px; }
.gallery-status { flex:0 0 100%; margin:0; color:var(--muted-light); }
.gallery-grid figure { cursor:zoom-in; background:#ddd9d0; }
.lightbox { width:min(94vw,1500px); max-width:none; max-height:94vh; padding:0; border:0; background:transparent; overflow:visible; }
.lightbox::backdrop { background:rgba(0,0,0,.9); }
.lightbox img { max-width:100%; max-height:92vh; width:auto; height:auto; margin:auto; object-fit:contain; }
.lightbox-close { position:fixed; top:18px; right:26px; z-index:3; border:0; background:transparent; color:white; font:300 42px/1 Arial,sans-serif; cursor:pointer; }
@media (max-width:900px) {
  .video-grid { grid-template-columns:1fr; }
  .performances-heading { align-items:flex-start; flex-direction:column; }
}