:root {
  --ink: #173833;
  --deep: #123c41;
  --sage: #9cac83;
  --soft-sage: #dce2d4;
  --lake: #3d7377;
  --ivory: #f6f1e7;
  --paper: #fcfaf4;
  --gold: #c9a96b;
  --line: rgba(23, 56, 51, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
a { color: inherit; }
.site-header { height: 104px; padding: 0 clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; background: rgba(252,250,244,.96); position: relative; z-index: 10; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { width: 270px; height: 82px; object-fit: contain; object-position: left center; }
nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); }
nav a { text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-contact { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.hero { min-height: 740px; height: calc(100vh - 104px); max-height: 900px; position: relative; display: flex; align-items: center; color: white; background: linear-gradient(110deg, rgba(9,50,51,.82) 0%, rgba(9,50,51,.52) 45%, rgba(9,50,51,.16) 75%), url('og.png') center/cover no-repeat; overflow: hidden; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(10,41,39,.5), transparent 45%); }
.hero-content { position: relative; max-width: 780px; padding: 40px clamp(24px, 8vw, 120px); z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .19em; font-weight: 600; font-size: 12px; margin: 0 0 22px; }
.eyebrow.dark { color: var(--lake); }
h1,h2,h3 { font-family: "Playfair Display", serif; font-weight: 500; margin-top: 0; }
h1 { font-size: clamp(54px, 7.1vw, 105px); line-height: .98; letter-spacing: -.035em; margin-bottom: 30px; }
h1 em { color: #d9dec8; font-weight: 500; }
.hero-copy { max-width: 620px; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 26px; text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--ivory); color: var(--ink); }
.button-ghost { border: 1px solid rgba(255,255,255,.7); color:white; }
.hero-caption { position:absolute; right:32px; bottom:25px; z-index:1; font-size:12px; letter-spacing:.08em; }
.section-pad { padding: clamp(80px, 10vw, 150px) clamp(24px, 8vw, 120px); }
.intro { text-align:center; max-width: 1240px; margin:auto; }
.intro h2 { font-size: clamp(32px, 4.2vw, 58px); line-height:1.25; }
.learn { background: var(--ivory); }
.section-heading { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 65px; align-items:end; }
.section-heading h2, .about h2, .contact h2 { font-size: clamp(40px, 5vw, 68px); line-height:1.05; margin-bottom:0; }
.section-heading > p { line-height:1.8; max-width:560px; }
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.card { padding: 38px 32px; min-height: 360px; border:1px solid var(--line); display:flex; flex-direction:column; background:var(--paper); }
.card.featured { background:var(--soft-sage); }
.card-number { color:var(--lake); font-size:12px; letter-spacing:.15em; }
.card h3 { font-size:31px; margin:60px 0 18px; }
.card p { line-height:1.7; margin:0 0 25px; }
.card a { margin-top:auto; text-decoration:none; font-weight:600; }
.card a span,.text-link span { margin-left:8px; }
.performances { display:grid; grid-template-columns:1.05fr .95fr; min-height:760px; background:var(--deep); color:white; }
.performance-photo { background: linear-gradient(rgba(21,57,54,.1),rgba(21,57,54,.3)), url('og.png') center/cover; min-height:550px; }
.performance-content { padding: clamp(65px,8vw,120px); }
.performance-content h2 { font-size:clamp(42px,5vw,68px); line-height:1.08; }
.performance-content > p:not(.eyebrow) { line-height:1.75; color:rgba(255,255,255,.78); }
.performance-content ul { list-style:none; padding:0; margin:45px 0; border-top:1px solid rgba(255,255,255,.2); }
.performance-content li { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.2); display:flex; flex-direction:column; gap:6px; }
.performance-content li span { font-family:"Playfair Display",serif; font-size:22px; }
.performance-content small { color:rgba(255,255,255,.65); font-size:13px; }
.about { display:grid; grid-template-columns:minmax(300px,.8fr) 1.2fr; gap:clamp(50px,8vw,120px); align-items:center; }
.portrait-wrap { position:relative; max-width:500px; }
.portrait-wrap img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; }
.portrait-note { background:var(--sage); padding:16px 22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; position:absolute; right:-28px; bottom:24px; }
.about-copy .lead { font-family:"Playfair Display",serif; font-size:27px; line-height:1.45; }
.about-copy p:not(.eyebrow):not(.lead) { line-height:1.8; max-width:650px; }
.text-link { display:inline-block; margin-top:20px; text-decoration:none; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:5px; }
.gallery { background:#eef0e7; }
.gallery-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; margin-bottom:55px; }
.gallery-heading h2 { font-size:clamp(40px,5vw,68px); line-height:1.08; margin:0; }
.gallery-heading > p { line-height:1.8; margin:0; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:260px; gap:14px; }
.gallery-grid figure { position:relative; margin:0; overflow:hidden; background:var(--deep); }
.gallery-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.gallery-grid figure:hover img { transform:scale(1.025); }
.gallery-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:45px 20px 17px; color:white; font-size:13px; font-weight:600; letter-spacing:.04em; background:linear-gradient(transparent,rgba(8,36,35,.8)); }
.gallery-tall { grid-row:span 2; }
.gallery-wide { grid-column:span 2; }
.quote { padding:90px 24px; background:var(--soft-sage); text-align:center; }
.quote p { font-family:"Playfair Display",serif; font-style:italic; font-size:clamp(30px,4vw,52px); max-width:900px; margin:auto; }
.contact { background:var(--deep); color:white; display:grid; grid-template-columns:1.15fr .85fr; gap:80px; }
.contact-details { padding-top:10px; }
.contact-details > p { color:rgba(255,255,255,.72); line-height:1.7; }
.contact-details > a:not(.button) { display:flex; flex-direction:column; text-decoration:none; font-family:"Playfair Display",serif; font-size:clamp(21px,2.2vw,31px); padding:19px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.contact-details a span { font: 600 10px "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.18em; margin-bottom:7px; color:var(--sage); }
.button-sage { background:var(--sage); color:var(--ink); margin-top:30px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:35px clamp(24px,5vw,72px); background:#0d2d2d; color:white; font-size:12px; }
.footer-brand img { width:240px; height:70px; filter: brightness(0) invert(1); opacity:.95; }
@media (max-width: 850px) {
  nav a:not(.nav-contact) { display:none; }
  .hero { min-height:680px; }
  .section-heading,.performances,.about,.contact,.gallery-heading { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .card { min-height:300px; }
  .card h3 { margin-top:40px; }
  .performance-photo { min-height:460px; }
  .portrait-wrap { max-width:430px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:230px; }
  .gallery-tall { grid-row:span 2; }
  .gallery-wide { grid-column:span 1; }
  .contact { gap:35px; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width: 520px) {
  .site-header { height:72px; }
  .brand img { width:205px; height:62px; }
  .hero { height:calc(100vh - 72px); min-height:620px; align-items:flex-end; }
  .hero-content { padding-bottom:80px; }
  .hero-copy { font-size:16px; }
  .hero-caption { display:none; }
  .button { width:100%; }
  .portrait-note { right:-8px; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:300px; }
  .gallery-grid .gallery-tall,.gallery-grid .gallery-wide { grid-row:span 1; grid-column:span 1; }
}