*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#050505;--white:#f5f5f1;
  --grey1:#141414;--grey2:#252525;--grey3:#444;--grey4:#707070;
  --purple:#7B4DB8;--purple-light:#9B6FD0;--purple-dim:rgba(123,77,184,0.5);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Jost',Helvetica,sans-serif;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;background:var(--black);margin:0}
a{color:inherit;text-decoration:none}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.8rem 3.5rem;background:transparent;border-bottom:0.5px solid transparent;transition:background 0.4s,border-color 0.4s}
.nav-logo,.nav-logo *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
.nav-logo{font-family:var(--serif);font-size:2rem;font-weight:300;letter-spacing:-0.01em;text-transform:none;color:var(--white);opacity:0;transition:opacity 0.4s;pointer-events:none;text-decoration:none;display:flex;flex-direction:column;line-height:0.95}
.nav-logo__first{display:block;font-weight:300;margin-bottom:0.1em}
.nav-logo__last{display:block;font-weight:400;letter-spacing:-0.05em;margin-left:-0.06em}
.nav-links{display:flex;gap:2rem;list-style:none}
/* ↑ nav brighter: 78% */
.nav-links a{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;text-decoration:none;color:rgba(245,245,241,1);transition:color 0.3s;font-family:var(--sans)}
.nav-links a:hover{color:var(--purple-light)}
.nav-lang{display:flex;gap:0.6rem;align-items:center}
.nav-lang a{font-size:0.72rem;letter-spacing:0.26em;text-transform:uppercase;text-decoration:none;color:rgba(245,245,241,0.45);font-family:var(--sans);border-bottom:0.5px solid transparent;padding-bottom:2px;transition:color 0.3s,border-color 0.3s}
.nav-lang a.active{color:rgba(245,245,241,0.9);border-bottom-color:rgba(245,245,241,0.35)}
.nav-sep{font-size:0.8rem;color:#333}
nav.scrolled{background:rgba(5,5,5,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:0.5px solid var(--grey2)}
nav.scrolled.nav--light{background:rgba(245,245,241,0.92);border-bottom:0.5px solid rgba(10,10,10,0.1)}
nav.scrolled.nav--light .nav-links a{color:rgba(10,10,10,0.8)}
nav.scrolled.nav--light .nav-links a:hover{color:rgba(10,10,10,1)}
nav.scrolled.nav--light .nav-lang a{color:rgba(10,10,10,0.45)}
nav.scrolled.nav--light .nav-lang a.active{color:rgba(10,10,10,0.9);border-bottom-color:rgba(10,10,10,0.35)}
nav.scrolled.nav--light .nav-sep{color:rgba(10,10,10,0.2)}
nav.scrolled.nav--light .nav-logo{color:rgba(10,10,10,0.9)}
nav.logo-visible .nav-logo{opacity:1;pointer-events:auto}

/* HAMBURGER BUTTON — hidden on desktop, shown ≤768px via media query */
.nav-burger{
  display:none;
  width:28px;height:22px;
  background:transparent;border:none;padding:0;cursor:pointer;
  position:relative;z-index:200;
}
.nav-burger span{
  display:block;position:absolute;left:0;right:0;height:1.5px;
  background:var(--white);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.25s,top 0.35s cubic-bezier(0.16,1,0.3,1),background-color 0.3s;
}
.nav-burger span:nth-child(1){top:3px}
.nav-burger span:nth-child(2){top:10px}
.nav-burger span:nth-child(3){top:17px}
/* Light nav (over light section) — dark lines */
nav.scrolled.nav--light .nav-burger span{background:rgba(10,10,10,0.85)}
/* Drawer open — morph to × (white on dark drawer, purple on light drawer for contrast) */
.nav-burger.is-open span{background:var(--white);height:2.5px}
.nav-burger.is-open span:nth-child(1){top:9.5px;transform:rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){top:9.5px;transform:rotate(-45deg)}
/* When drawer is open, elevate nav above the drawer so the × stays visible & clickable */
body.no-scroll nav{z-index:200;background:transparent !important;border-bottom-color:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* BACKDROP — semi-opaque overlay behind drawer */
.nav-backdrop{
  position:fixed;inset:0;z-index:150;
  background:rgba(5,5,5,0.55);
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}

/* DRAWER — slides in from right */
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:100%;
  z-index:175;
  background:var(--black);
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem 2.5rem 3rem;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.nav-drawer.is-open{transform:translateX(0)}
.nav-drawer__links{
  list-style:none;
  display:flex;flex-direction:column;gap:1.6rem;
}
.nav-drawer__links a{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:300;
  color:var(--white);
  letter-spacing:-0.01em;
  text-decoration:none;
  transition:color 0.25s;
  display:inline-block;
}
.nav-drawer__links a:hover,
.nav-drawer__links a:active{color:var(--purple-light)}
.nav-drawer__lang{
  display:flex;align-items:center;gap:0.8rem;
  padding-bottom:2rem;
  margin-bottom:2.5rem;
  border-bottom:0.5px solid var(--grey2);
}
.nav-drawer__lang a{
  font-family:var(--sans);
  font-size:0.95rem;letter-spacing:0.26em;text-transform:uppercase;
  text-decoration:none;
  color:rgba(245,245,241,0.55);
  transition:color 0.25s;
}
.nav-drawer__lang a:hover{color:var(--white)}
.nav-drawer__lang a.active{color:var(--white)}
.nav-drawer__lang span{color:rgba(245,245,241,0.35);font-size:0.95rem}

/* Light variant — when nav is over a light section, drawer flips to white bg / dark text */
.nav-drawer--light{background:var(--white)}
.nav-drawer--light .nav-drawer__links a{color:rgba(10,10,10,0.92)}
.nav-drawer--light .nav-drawer__links a:hover,
.nav-drawer--light .nav-drawer__links a:active{color:var(--purple)}
.nav-drawer--light .nav-drawer__lang{border-bottom-color:rgba(10,10,10,0.12)}
.nav-drawer--light .nav-drawer__lang a{color:rgba(10,10,10,0.5)}
.nav-drawer--light .nav-drawer__lang a:hover,
.nav-drawer--light .nav-drawer__lang a.active{color:rgba(10,10,10,0.95)}
.nav-drawer--light .nav-drawer__lang span{color:rgba(10,10,10,0.3)}
.nav-backdrop--light{background:rgba(245,245,241,0.55)}
/* Burger × in light drawer state — keep purple but use the stronger purple on white bg */
.nav-burger.is-open.nav-burger--light-state span{background:var(--purple)}

/* Lock body scroll when drawer open */
body.no-scroll{overflow:hidden;touch-action:none}

/* name first */
.hero__name,.hero__name *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;pointer-events:none;}
.hero__name{
  font-family:var(--serif);
  font-size:clamp(4.5rem,8.5vw,9.5rem);
  line-height:0.87;
  /* tighten letter-spacing on Matton to fix ON spacing */
  letter-spacing:-0.01em;
  margin-bottom:1.2rem;
}
.hero__name .first{display:block;font-weight:300;color:var(--white);margin-bottom:0.15em}
.hero__name .last{display:block;font-weight:400;color:var(--white);letter-spacing:-0.05em;margin-left:-0.06em}

/* eyebrow BELOW name */
.hero__eyebrow{
  font-size:0.88rem;letter-spacing:0.26em;text-transform:uppercase;
  margin-bottom:2.4rem;display:flex;align-items:center;gap:0.8rem;
  color:rgba(245,245,241,0.92);font-family:var(--sans);
}
.hero__eyebrow::before{display:none}
.sep{opacity:0.35;margin:0 0.08rem}

/* quote */
.hero__quote{
  font-family:'Jost',sans-serif;font-size:0.92rem;font-weight:300;font-style:normal;
  line-height:1.85;max-width:360px;margin-bottom:1.4rem;
  padding-left:1.2rem;color:rgba(245,245,241,0.95);
  border-left:2px solid var(--purple);
}

.hero__attribution{padding-left:0;border-left:none;margin-bottom:2.8rem}
.hero__attr-line{display:flex;align-items:center;gap:1rem;margin-bottom:0.5rem}
.hero__attr-dash{width:22px;height:0.5px;background:rgba(245,245,241,0.45);flex-shrink:0}
.hero__attr-name{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:rgba(245,245,241,1);font-weight:400;font-family:var(--sans)}
/* only 2 awards */
.hero__attr-creds{font-size:0.62rem;letter-spacing:0.2em;color:rgba(245,245,241,0.72);line-height:1.9;display:flex;flex-wrap:wrap;gap:0 1rem;font-family:var(--sans)}
.hero__attr-creds span{display:inline-flex;align-items:center;gap:0.4rem}
.hero__attr-creds span::before{content:'·';opacity:0.4;font-size:0.8rem}
.hero__attr-creds span:first-child::before{display:none}

.hero__cta{display:inline-flex;align-items:center;gap:1.2rem;font-size:0.88rem;letter-spacing:0.22em;text-transform:uppercase;border:none;cursor:pointer;color:var(--purple-light);transition:color 0.3s;font-family:var(--sans)}
.hero__cta:hover{color:var(--white)}
.hero{position:relative;height:100vh;min-height:580px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:var(--black)}
.hero__left{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:8rem 3.5rem 5rem}
.sep{opacity:0.35;margin:0 0.08rem}
.hero__name{font-family:var(--serif);font-size:clamp(4.5rem,8.5vw,9.5rem);line-height:0.87;letter-spacing:-0.02em;margin-bottom:2.8rem}
.hero__name .first{display:block;font-weight:300;color:var(--white)}
.hero__name .last{display:block;font-weight:400;letter-spacing:-0.01em;color:var(--white)}
.hero__attr-line{display:flex;align-items:center;gap:1rem;margin-bottom:0.5rem}
.hero__attr-dash{width:22px;height:0.5px;background:rgba(245,245,241,0.45);flex-shrink:0}
.hero__attr-name{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:rgba(245,245,241,0.82);font-weight:400}
.hero__attr-creds{font-size:0.62rem;letter-spacing:0.2em;color:rgba(245,245,241,0.72);line-height:1.9;display:flex;flex-wrap:wrap;gap:0 1rem}
.hero__attr-creds span{display:inline-flex;align-items:center;gap:0.4rem}
.hero__attr-creds span::before{content:'·';opacity:0.4;font-size:0.8rem}
.hero__attr-creds span:first-child::before{display:none}
/* hero bottom separator — same as section separator */
.hero__separator{width:100%;height:0.5px;background:var(--grey2);margin-bottom:2rem}
.hero__right{position:relative;overflow:hidden}
.hero__photo{
  position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;
  background-image:
    linear-gradient(to right,var(--black) 0%,rgba(5,5,5,0.52) 18%,rgba(5,5,5,0.06) 40%,rgba(5,5,5,0) 56%),
    linear-gradient(to top,var(--black) 0%,rgba(5,5,5,0.32) 12%,rgba(5,5,5,0) 28%),
    linear-gradient(to bottom,var(--black) 0%,rgba(5,5,5,0) 10%),
    url('https://cdn.prod.website-files.com/6a149b04387c0bfb08efd760/6a149b1b87b027849398c830_Home%20page.png');
}

/* SECTIONS */
.section{padding:8rem 3.5rem 6rem;background:var(--black);scroll-margin-top:0}
.section--alt{background:var(--grey1)}
.sec-label{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:200;letter-spacing:-0.02em;line-height:0.92;color:var(--white);margin-bottom:5rem;display:flex;align-items:center;gap:2rem}
.sec-label::after{content:'';flex:1;height:0.5px;background:var(--grey2);align-self:center}
.grid-wrap{max-width:1080px;margin:0 auto}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-bottom:6rem}
.intro__title{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:200;line-height:0.92;letter-spacing:-0.02em;color:var(--white)}
.intro__title em{font-style:italic}
.intro__text{font-size:0.92rem;line-height:2.3;color:rgba(245,245,241,0.72);padding-top:0.3rem}
.intro__text p+p{margin-top:1.5rem}

/* section image — full-width above grid */
.section-img{width:100%;max-width:1080px;margin:0 auto 4rem;display:block;filter:grayscale(100%) contrast(1.05) brightness(0.88)}

/* PHOTO CREDITS — small uppercase label, sits below or overlaid on photos. Same look in both light and dark sections via the .photo-credit--light modifier. */
.photo-credit{
  font-family:var(--sans);font-size:0.55rem;font-weight:400;
  letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(245,245,241,0.45);
  margin-top:0.6rem;display:block;
}
.photo-credit--light{color:rgba(10,10,10,0.42)}
/* Hero credit: overlay at bottom-right of the photo, visible on both desktop (right column) and mobile (full-bleed bg). */
.hero__photo-credit{
  position:absolute;bottom:1.4rem;right:1.6rem;z-index:3;
  font-family:var(--sans);font-size:0.55rem;font-weight:400;
  letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(245,245,241,0.55);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  pointer-events:none;
}

/* VIDEO GRID */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:2rem}
.video-item{background:var(--black);overflow:hidden;display:flex;flex-direction:column;border:0.5px solid var(--grey2)}
.video-item--full{background:var(--black);border:0.5px solid var(--grey2);display:grid;grid-template-columns:1fr 1fr}
.video-item--full .video-caption{padding:2.5rem 2rem;display:flex;flex-direction:column;justify-content:space-between;border-left:0.5px solid var(--grey2)}
.video-wrap{width:100%;overflow:hidden;background:var(--black)}
.video-wrap iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:none}
.video-placeholder{width:100%;aspect-ratio:16/9;background:var(--grey1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}
.video-item--full .video-placeholder{aspect-ratio:unset;height:100%;min-height:240px}
.play-btn{width:56px;height:56px;border-radius:50%;border:0.5px solid rgba(245,245,241,0.28);display:flex;align-items:center;justify-content:center}
.play-btn svg{width:18px;height:18px;fill:rgba(245,245,241,0.55);margin-left:2px}
.placeholder-label{font-size:0.65rem;letter-spacing:0.26em;text-transform:uppercase;color:rgba(245,245,241,0.38);text-align:center;line-height:1.8}
.video-caption{padding:1.4rem 1.4rem 1.8rem;display:flex;flex-direction:column;flex:1}
.video-caption__title{font-family:var(--serif);font-size:1.15rem;font-weight:300;font-style:normal;color:var(--white);margin-bottom:0.3rem;line-height:1.4}
.video-caption__subtitle{display:block;font-family:var(--sans);font-style:normal;font-size:0.85rem;font-weight:300;color:rgba(245,245,241,0.68);margin-top:0.2rem;margin-bottom:0.6rem}
.video-caption__venue{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(245,245,241,0.65);font-weight:400}
.caption-spacer{flex:1}
.toggle-wrap{margin-top:1rem}
.toggle-btn{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.65rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--purple-light);cursor:pointer;background:none;border:none;padding:0;font-family:var(--sans);font-weight:600;transition:color 0.3s}
.toggle-btn:hover{color:var(--white)}
.toggle-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform 0.3s}
.toggle-btn.open svg{transform:rotate(180deg)}
.musicians-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height 0.4s ease,opacity 0.3s ease}
.musicians-panel.open{max-height:300px;opacity:1}
.musicians-panel--expanded.open{max-height:600px}
.musicians-list{padding:0.9rem 0 0.2rem;display:flex;flex-wrap:wrap;gap:0.35rem 2rem}
.musician{font-size:0.78rem;line-height:1.9;color:rgba(245,245,241,0.75);display:flex;gap:0.5rem;align-items:baseline}
.musician__role{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,245,241,0.6);flex-shrink:0}

/* COMING EVENTS */
.event-date{font-family:var(--sans);font-size:0.7rem;font-weight:300;letter-spacing:0.32em;text-transform:uppercase;color:var(--purple-light);margin-bottom:1.5rem}
.event-title{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:300;line-height:1.05;letter-spacing:-0.02em;color:var(--white);margin-bottom:1rem}
.event-subtitle{font-family:var(--sans);font-size:1rem;font-weight:300;line-height:1.6;color:rgba(245,245,241,0.78);margin-bottom:0.4rem}
.event-cta{margin-top:1.4rem}

/* AUDIO */
.audio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2rem}
.audio-grid--3{grid-template-columns:repeat(3,1fr)}
.audio-item{background:var(--grey1);padding:2rem 1.8rem 2.2rem;display:flex;flex-direction:column;border:0.5px solid var(--grey2)}
.ap-controls{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem}
.ap-play{width:40px;height:40px;border-radius:50%;border:0.5px solid var(--purple-dim);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.3s}
.ap-play:hover{border-color:var(--purple-light)}
.ap-play svg{width:14px;height:14px;fill:var(--purple-light);margin-left:2px}
.ap-time{font-size:0.6rem;letter-spacing:0.18em;color:rgba(245,245,241,0.4);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:80px;text-align:right;transition:color 0.3s}
.ap-time.playing{color:var(--purple-light)}
.ap-progress{width:100%;height:2px;background:rgba(245,245,241,0.12);border-radius:1px;cursor:pointer}
.ap-progress-fill{height:100%;background:var(--purple);border-radius:1px;width:0%;pointer-events:none;transition:width 0.1s linear}
.ap-progress:hover .ap-progress-fill{background:var(--purple-light)}
.ap-error{font-size:0.6rem;color:rgba(245,245,241,0.3);margin-top:-1rem;margin-bottom:1rem;display:none}
.audio-item__title{font-family:var(--serif);font-size:1.15rem;font-weight:300;font-style:normal;color:var(--white);line-height:1.4;margin-bottom:0.25rem}
.audio-item__subtitle{font-family:var(--sans);font-size:0.85rem;font-weight:300;color:rgba(245,245,241,0.68);margin-bottom:1.2rem;display:block}
.audio-item__venue{font-size:0.65rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,245,241,0.55);line-height:2;font-weight:400}
.audio-item__venue span{display:block}
.sc-spacer{flex:1;min-height:1rem}
.sc-link{display:inline-flex;align-items:center;gap:0.7rem;font-size:0.62rem;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--purple-light);transition:color 0.3s}
.sc-link:hover{color:var(--white)}
/* sc-only: no player, just link */
.audio-item--link{background:var(--grey1);padding:2rem 1.8rem 2.2rem;display:flex;flex-direction:column;border:0.5px solid var(--grey2)}

/* PULL QUOTE — centered */
.pull-quote{margin-top:6rem;padding-top:0;margin-bottom:0;text-align:center}
.pull-quote blockquote{font-family:var(--sans);font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:300;font-style:normal;line-height:1.55;color:var(--white);max-width:860px;margin:0 auto 1.8rem;padding-left:2rem;border-left:2px solid var(--purple)}
.pull-quote__attr{font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;color:rgba(245,245,241,0.72);display:inline-flex;align-items:center;gap:1rem;font-weight:400;padding-left:2rem}
.pull-quote__attr::before{display:none}

/* FILM SECTION — showreel full width */
.showreel-wrap{max-width:1080px;margin:0 auto 2rem;border:0.5px solid var(--grey2);overflow:hidden}
.showreel-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--grey1)}
.showreel-wrap iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--grey1);border:0}
.showreel-label{font-family:var(--sans);font-size:1.6rem;font-weight:300;font-style:normal;color:rgba(245,245,241,0.65);margin-bottom:1rem;display:flex;align-items:center;gap:2rem;white-space:nowrap}.showreel-label::after{content:'';flex:1;height:0.5px;background:var(--grey2)}
/* film audio groups */
.film-group{margin-top:3rem}
.film-group__title{font-family:var(--sans);font-size:1.5rem;font-weight:300;font-style:normal;color:var(--white);margin-bottom:0.3rem}
.film-group__subtitle{font-size:0.75rem;color:rgba(245,245,241,0.45);margin-bottom:1.5rem;letter-spacing:0.08em}
.film-group__musicians{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,245,241,0.45);margin-bottom:1.5rem;line-height:2}
.film-group__musicians span{display:block}

/* SC-only grouped track list */
.sc-track-list{padding:0 1.5rem}
.sc-track-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem 1.5rem;border-bottom:0.5px solid var(--grey2)}
.sc-track-info{flex:1;min-width:0}
.sc-track-name{font-family:var(--sans);font-size:1rem;font-weight:300;font-style:normal;color:var(--white);display:block;text-align:left}
.sc-track-sub{display:block;font-family:var(--sans);font-style:normal;font-size:0.75rem;color:rgba(245,245,241,0.48);margin-top:0.15rem;letter-spacing:0.04em;text-align:left}
.sc-track-unavail{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,245,241,0.28);flex-shrink:0}

.sc-track-row--group{background:rgba(245,245,241,0.02);border-bottom:none}
.sc-track-row--audio{display:flex;flex-direction:row;align-items:center;gap:1.5rem;padding:0.9rem 1.5rem;border-bottom:0.5px solid var(--grey2);padding-right:1.5rem}
.sc-track-player{display:flex;align-items:center;gap:1rem;flex:1;min-width:0;overflow:hidden}
.sc-track-row--audio .sc-track-name{flex-shrink:0;width:160px;text-align:right}

/* showreel credits */
.showreel-credits{display:flex;flex-wrap:wrap;gap:0.4rem 3rem;padding:1.2rem 0 2rem;max-width:1080px;margin:0 auto;justify-content:center}
.showreel-credit-item{display:flex;gap:0.6rem;align-items:baseline}
.showreel-credit-title{font-family:var(--sans);font-size:0.9rem;font-style:normal;color:rgba(245,245,241,0.7)}
.showreel-credit-dir{font-size:0.62rem;letter-spacing:0.18em;color:var(--purple-light)}
.ap-play--sm{width:32px;height:32px;border-radius:50%;border:0.5px solid var(--purple-dim);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.3s}
.ap-play--sm:hover{border-color:var(--purple-light)}
.ap-play--sm svg{width:11px;height:11px;fill:var(--purple-light);margin-left:1px}

/* section big header — same style as old intro__title */
.section-header{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-bottom:6rem}
.section-header__title{font-family:var(--serif);font-size:clamp(3rem,5.5vw,5.5rem);font-weight:200;line-height:0.92;letter-spacing:-0.02em;color:var(--white)}
.section-header__title em{font-style:normal}

/* sub-header before video grid */
.sub-header{display:flex;align-items:center;gap:2rem;margin-bottom:3rem}
.sub-header__title{font-family:var(--sans);font-size:1.6rem;font-weight:300;font-style:normal;color:rgba(245,245,241,0.65);white-space:nowrap}
.sub-header__line{flex:1;height:0.5px;background:var(--grey2)}

.sec-header{margin-bottom:5rem}
.sec-header__top{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:200;letter-spacing:-0.02em;line-height:0.92;color:var(--white);text-align:right}
.sec-header__bottom{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:200;letter-spacing:-0.02em;line-height:0.92;color:var(--white);display:flex;align-items:center;gap:2rem}
.sec-header__bottom::before{content:'';flex:1;height:0.5px;background:var(--grey2);align-self:center}
.sec-header__bottom em{font-style:normal}

.sec-header__bottom--right{display:flex;align-items:center;gap:2rem}
.sec-header__bottom--right::before{display:none}
.sec-header__bottom--right::after{content:'';flex:1;height:0.5px;background:var(--grey2);align-self:center}

/* PIANO GRID — vertical/portrait format */
.piano-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
  max-width:1080px;
  margin:0 auto;
}
.piano-placeholder{
  aspect-ratio:9/16;
  background:var(--grey1);
  border:0.5px solid var(--grey2);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.8rem;
}
/* Variant: cell contains a real video iframe instead of placeholder content.
   Force portrait shape and explicit iframe dimensions to defeat any WP
   core / responsive-embeds CSS that tries to inject 16:9 landscape sizing. */
.piano-placeholder--video{
  display:block !important;
  padding:0;
  overflow:hidden;
  aspect-ratio:9/16 !important;
  position:relative;
}
.piano-placeholder--video iframe{
  position:absolute;
  top:0;left:0;
  display:block;
  width:100% !important;
  height:100% !important;
  border:0;
  background:var(--black);
  padding:0 !important;
  margin:0 !important;
  aspect-ratio:auto !important;
}

/* BIOGRAPHY */
.bio-awards{margin-top:0;border-top:0.5px solid var(--grey2);padding-top:1.5rem}
.bio-awards__label{font-family:var(--sans);font-size:0.6rem;letter-spacing:0.38em;text-transform:uppercase;color:rgba(245,245,241,0.4);margin-bottom:1.2rem;font-weight:400}
.bio-award-row{display:flex;align-items:baseline;gap:1.5rem;padding:0.55rem 0;border-bottom:0.5px solid var(--grey2)}
.bio-award-year{font-family:var(--sans);font-size:0.65rem;letter-spacing:0.2em;color:var(--purple-light);font-weight:400;flex-shrink:0;min-width:2.5rem}
.bio-award-name{font-family:var(--sans);font-size:0.82rem;font-weight:300;color:rgba(245,245,241,0.82);line-height:1.5}

/* DISCOGRAPHY */
.disco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1080px;margin:0 auto}
.disco-card{display:flex;flex-direction:column;cursor:pointer;text-decoration:none;color:inherit}
.disco-card:hover .disco-cover img{transform:scale(1.03)}
.disco-cover{position:relative;overflow:hidden;margin-bottom:1.2rem;border:0.5px solid var(--grey2)}
.disco-cover img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 0.4s ease}
.disco-cover__overlay{position:absolute;inset:0;background:rgba(5,5,5,0);display:flex;align-items:center;justify-content:center;transition:background 0.3s}
.disco-card:hover .disco-cover__overlay{background:rgba(5,5,5,0.45)}
.disco-cover__play{opacity:0;transition:opacity 0.3s;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--white)}
.disco-cover__play svg{width:18px;height:18px;fill:var(--white);margin-left:3px}
.disco-card:hover .disco-cover__play{opacity:1}
.disco-card .toggle-btn{pointer-events:all}
.disco-card .musicians-panel{pointer-events:all}
.disco-card__title{font-family:'Cormorant Garant',Georgia,serif;font-size:1.3rem;font-weight:300;color:var(--white);margin-bottom:0.3rem;line-height:1.2}
.disco-card__subtitle{font-family:var(--sans);font-size:0.78rem;font-weight:300;color:rgba(245,245,241,0.5);margin-bottom:0.8rem;line-height:1.4}
.disco-card__musicians{font-family:var(--sans);font-size:0.68rem;font-weight:300;color:rgba(245,245,241,0.42);line-height:1.8;letter-spacing:0.02em}
.disco-card__musicians span{display:block}
.disco-spotify{display:inline-flex;align-items:center;gap:0.6rem;margin-top:0.9rem;font-family:var(--sans);font-size:0.6rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--purple-light);transition:color 0.3s}
.disco-spotify:hover{color:var(--purple)}
.disco-spotify svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}

/* CONTACT */
.contact-wrap{max-width:680px;margin:0 auto;text-align:center;padding:4rem 0 2rem;position:relative}
.contact-label{font-family:var(--sans);font-size:0.82rem;letter-spacing:0.28em;text-transform:uppercase;color:rgba(245,245,241,0.72);margin-bottom:2rem;display:block;font-weight:400}
.contact-intro{font-family:var(--sans);font-size:1rem;font-weight:300;color:rgba(245,245,241,0.65);line-height:1.8;margin-bottom:3rem;letter-spacing:0.02em}
.contact-name{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);font-weight:200;color:var(--white);margin-bottom:0.5rem;letter-spacing:-0.01em}
.contact-cta{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  width:fit-content;
  margin:2.5rem auto 2rem;
  font-family:var(--sans);font-size:0.78rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--black);background:var(--purple-light);
  padding:1rem 2.2rem;
  text-decoration:none;
  transition:background 0.3s;
}
.contact-cta:hover{background:var(--purple)}
.contact-phone{font-family:var(--sans);font-size:0.72rem;letter-spacing:0.2em;color:rgba(245,245,241,0.38);margin-top:1rem;display:block}
.contact-phone:hover{color:rgba(245,245,241,0.65)}
/* Toast notification — overlay below the CTA. Absolutely positioned so it
   does not change the height of the contact section when shown/hidden. */
.contact-toast{
  position:absolute;
  left:50%;
  bottom:1rem;
  transform:translateX(-50%) translateY(-4px);
  padding:0.85rem 1.6rem;
  background:#ffffff;color:#050505;
  border:1px solid var(--purple);
  font-family:var(--sans);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:400;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:10;
  transition:opacity 0.3s,transform 0.3s,visibility 0s linear 0.3s;
}
.contact-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  visibility:visible;
  transition:opacity 0.3s,transform 0.3s,visibility 0s linear 0s;
}

/* FOOTER */
footer{background:var(--grey1);border-top:0.5px solid var(--grey2);padding:5rem 3.5rem 3rem}
.footer-inner{max-width:1080px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4rem;margin-bottom:4rem;padding-bottom:4rem;border-bottom:0.5px solid var(--grey2)}
.footer-brand{}
.footer-brand__name{font-family:var(--serif);font-size:1.8rem;font-weight:200;color:var(--white);letter-spacing:-0.01em;margin-bottom:0.5rem}
.footer-brand__tagline{font-family:var(--sans);font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(245,245,241,0.72);margin-bottom:2rem}
.footer-social{display:flex;gap:1rem;align-items:center}
.footer-social a{width:36px;height:36px;border:0.5px solid var(--grey2);display:flex;align-items:center;justify-content:center;transition:border-color 0.3s,color 0.3s;color:rgba(245,245,241,0.5)}
.footer-social a:hover{border-color:var(--purple-light);color:var(--purple-light)}
.footer-social svg{width:15px;height:15px;fill:currentColor}
.footer-nav__label{font-family:var(--sans);font-size:0.58rem;letter-spacing:0.38em;text-transform:uppercase;color:rgba(245,245,241,0.35);margin-bottom:1.2rem;display:block;font-weight:400}
.footer-nav ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.footer-nav a{font-family:var(--sans);font-size:0.78rem;letter-spacing:0.12em;color:rgba(245,245,241,1);text-decoration:none;transition:color 0.3s;font-weight:300}
.footer-nav a:hover{color:var(--white)}
.footer-publisher__label{font-family:var(--sans);font-size:0.58rem;letter-spacing:0.38em;text-transform:uppercase;color:rgba(245,245,241,0.35);margin-bottom:1.2rem;display:block;font-weight:400}
.footer-publisher__label--legal{margin-top:1.6rem}
.footer-publisher__link{font-family:var(--sans);font-size:0.78rem;color:rgba(245,245,241,1);text-decoration:none;transition:color 0.3s;font-weight:300}
.footer-publisher__link:hover{color:var(--purple-light)}
.footer-publisher p{font-family:var(--sans);font-size:0.78rem;color:rgba(245,245,241,1);line-height:2;font-weight:300}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.footer-copy{font-family:var(--sans);font-size:0.62rem;letter-spacing:0.18em;color:rgba(245,245,241,0.72);font-weight:300;grid-column:2;text-align:center}

/* BACK TO TOP */
.back-to-top{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  width:100%;padding:2rem 3.5rem;
  background:var(--grey1);border-top:0.5px solid var(--grey2);
  border-bottom:0.5px solid var(--grey2);
  cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:0.62rem;letter-spacing:0.34em;
  text-transform:uppercase;color:rgba(245,245,241,0.55);
  transition:color 0.3s,background 0.3s;
}
.back-to-top:hover{color:var(--white);background:var(--grey2)}
.back-to-top svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform 0.3s}
.back-to-top:hover svg{transform:translateY(-3px)}


/* HERO ANIMATION — CSS only, no JS */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__name .first {
  animation: heroUp 1.1s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
.hero__name .last {
  animation: heroUp 1.1s cubic-bezier(0.16,1,0.3,1) 0.28s both;
}
.hero__eyebrow {
  animation: heroFade 1s ease 0.55s both;
}
.hero__quote {
  animation: heroFade 1s ease 0.8s both;
}
.hero__attribution {
  animation: heroFade 1s ease 1.05s both;
}
.hero__cta {
  animation: heroFade 1s ease 1.25s both;
}

/* SCROLL REVEAL */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.reveal { opacity: 0; }
.reveal.visible {
  animation: revealUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.reveal-left.visible {
  animation: revealLeft 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.reveal-right.visible {
  animation: revealRight 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.reveal-fade.visible {
  animation: revealFade 0.9s ease forwards;
}
.reveal-d1 { animation-delay: 0.1s !important; }
.reveal-d2 { animation-delay: 0.2s !important; }
.reveal-d3 { animation-delay: 0.32s !important; }
.reveal-d4 { animation-delay: 0.45s !important; }

/* ALTERNATING SECTIONS — LIGHT THEME */
:root {
  --light-bg: #f5f5f1;
  --light-text: #080808;
  --light-text-muted: rgba(8,8,8,0.82);
  --light-border: rgba(10,10,10,0.12);
  --light-grey1: #e8e8e4;
}

/* Even sections get light background */
.section--light {
  background: var(--light-bg) !important;
}
.section--light .sec-header__top,
.section--light .sec-header__bottom,
.section--light .sec-header__bottom em,
.section--light h2,
.section--light h3 {
  color: var(--light-text) !important;
}
.section--light .sec-header__bottom::before,
.section--light .sec-header__bottom::after,
.section--light .sec-header__bottom--right::after,
.section--light .sub-header__line,
.section--light .showreel-label::after {
  background: rgba(10,10,10,0.15) !important;
}
.section--light .intro__text,
.section--light .intro__text p {
  color: rgba(8,8,8,0.85) !important;
}
.section--light .showreel-label,
.section--light .sub-header__title {
  color: rgba(8,8,8,0.78) !important;
}
.section--light .showreel-credit-title {
  color: rgba(8,8,8,0.85) !important;
}
.section--light .showreel-credit-dir {
  color: var(--purple) !important;
}
.section--light .video-item,
.section--light .video-item--full {
  background: var(--light-grey1) !important;
  border-color: rgba(10,10,10,0.12) !important;
}
.section--light .video-caption__title { color: var(--light-text) !important; }
.section--light .video-caption__subtitle { color: rgba(10,10,10,0.55) !important; }
.section--light .video-caption__venue { color: rgba(10,10,10,0.5) !important; }
.section--light .toggle-btn { color: var(--purple) !important; }
.section--light .musician { color: rgba(10,10,10,0.7) !important; }
.section--light .musician__role { color: rgba(10,10,10,0.6) !important; }
.section--light .audio-item { background: var(--light-grey1) !important; border-color: rgba(10,10,10,0.12) !important; }
.section--light .audio-item__title { color: var(--light-text) !important; }
.section--light .audio-item__subtitle { color: rgba(10,10,10,0.55) !important; }
.section--light .audio-item__venue { color: rgba(10,10,10,0.5) !important; }
.section--light .ap-progress { background: rgba(10,10,10,0.15) !important; }
.section--light .ap-play { border-color: var(--purple-dim) !important; background: none !important; }
.section--light .ap-play svg { fill: var(--purple-light) !important; }
.section--light .ap-play--sm { border-color: var(--purple-dim) !important; background: none !important; }
.section--light .ap-play--sm svg { fill: var(--purple-light) !important; }
.section--light .ap-time { color: rgba(8,8,8,0.65) !important; }
.section--light .ap-time.playing { color: var(--purple-light) !important; }
.section--light .sc-link { color: var(--purple) !important; }
.section--light .pull-quote blockquote { color: var(--light-text) !important; }
.section--light .pull-quote__attr span { color: rgba(10,10,10,0.55) !important; }
.section--light .pull-quote__attr { color: rgba(10,10,10,0.55) !important; }
.section--light .pull-quote__attr span[style*="purple-light"] { color: var(--purple-light) !important; }
.section--light .pull-quote__attr span[style*="purple"] { color: var(--purple-light) !important; }
.section--light .sc-track-list { border-top-color: rgba(10,10,10,0.12) !important; }
.section--light .sc-track-row { border-bottom-color: rgba(10,10,10,0.12) !important; }
.section--light .sc-track-name { color: #080808 !important; }
.section--light .sc-track-sub { color: rgba(8,8,8,0.68) !important; }
.section--light .sc-track-unavail { color: rgba(10,10,10,0.3) !important; }
.section--light .sc-track-row--audio { border-bottom-color: rgba(10,10,10,0.12) !important; }
.section--light .film-group__title { color: #080808 !important; }
.section--light .film-group__subtitle { color: rgba(8,8,8,0.72) !important; }
.section--light .showreel-credits { background: transparent !important; }
.section--light .showreel-wrap { border-color: rgba(10,10,10,0.15) !important; }
.section--light .piano-placeholder { background: var(--light-grey1) !important; border-color: rgba(10,10,10,0.12) !important; }
.section--light .placeholder-label { color: rgba(10,10,10,0.38) !important; }
.section--light .play-btn { border-color: rgba(10,10,10,0.2) !important; }
.section--light .play-btn svg { fill: rgba(10,10,10,0.4) !important; }
.section--light .bio-awards { border-top-color: rgba(10,10,10,0.12) !important; }
.section--light .bio-awards__label { color: rgba(10,10,10,0.4) !important; }
.section--light .bio-award-row { border-bottom-color: rgba(10,10,10,0.12) !important; }
.section--light .bio-award-name { color: rgba(8,8,8,0.9) !important; }
.section--light .disco-card__title { color: var(--light-text) !important; font-family:'Cormorant Garant',Georgia,serif !important; }
.section--light .disco-card__subtitle { color: rgba(8,8,8,0.72) !important; }
.section--light .disco-card__musicians { color: rgba(8,8,8,0.65) !important; }
.section--light .disco-cover { border-color: rgba(10,10,10,0.12) !important; }
.section--light .contact-intro { color: rgba(8,8,8,0.82) !important; }
.section--light .contact-name { color: var(--light-text) !important; }
.section--light .contact-label { color: rgba(10,10,10,0.55) !important; }
.section--light .contact-phone { color: rgba(10,10,10,0.38) !important; }
/* Contact section: override inline white colors on h2 and WHATSAPP label when on light bg */
#contact.section--light h2 { color: var(--light-text) !important; }
#contact.section--light .contact-phone[style] { color: rgba(10,10,10,0.55) !important; }
/* Contact dividers (inline grey2 too dark for visual hierarchy on white): soften them */
#contact.section--light > .grid-wrap > .reveal > div[style*="grey2"] { background: rgba(10,10,10,0.12) !important; }
.section--light .ap-play { border-color: var(--purple-dim) !important; }
.section--light .ap-play--sm { border-color: var(--purple-dim) !important; }
.section--light .ap-time { color: rgba(10,10,10,0.4) !important; }
.section--light .ap-time.playing { color: var(--purple-light) !important; }
.section--light .ap-error { color: rgba(10,10,10,0.3) !important; }
.section--light .video-item--full .video-caption { border-left-color: rgba(10,10,10,0.12) !important; }

/* Custom text selection color */
::selection { background: var(--purple); color: var(--white); }
::-moz-selection { background: var(--purple); color: var(--white); }

/* WAVEFORM PLAYER */
.waveform-wrap{width:100%;height:48px;display:flex;align-items:flex-end;gap:2px;cursor:pointer;position:relative;margin-bottom:0}
.waveform-bar{flex:1;border-radius:1px 1px 0 0;transition:background 0.05s;min-width:2px}
.waveform-bar.played{background:var(--purple)}
.waveform-bar.unplayed{background:rgba(245,245,241,0.18)}
.section--light .waveform-bar.unplayed{background:rgba(10,10,10,0.15)}
.section--light .waveform-bar.played{background:var(--purple)}

/* ============================================================
   RESPONSIVE — added in v48
   Three breakpoints: 1024px (tablet) / 768px (large phone) / 480px (mobile).
   Note: layout-2col class is added to 4 inline-style grids
   (Commissions intro, Film intro, Piano intro, Biography).
   ============================================================ */

/* TABLET — max-width: 1024px */
@media (max-width: 1024px) {
  nav { padding: 1.4rem 2rem; }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.65rem; }

  .section { padding: 5rem 2rem 4rem; }

  /* Hero: stack, photo becomes full-bleed background with overlay so text remains readable */
  .hero {
    grid-template-columns: 1fr;
    background-image:
      linear-gradient(to top, var(--black) 0%, rgba(5,5,5,0.85) 28%, rgba(5,5,5,0.45) 55%, rgba(5,5,5,0.15) 80%, rgba(5,5,5,0) 100%),
      url('https://cdn.prod.website-files.com/6a149b04387c0bfb08efd760/6a149b1b87b027849398c830_Home%20page.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .hero__right { display: none; }
  .hero__left { padding: 7rem 2rem 4rem; justify-content: flex-end; }

  /* Section headers slightly smaller min */
  .sec-header__top,
  .sec-header__bottom { font-size: clamp(1.4rem, 3vw, 2.4rem); }

  /* Audio grid: auto-fit so cards stack when they can't fit 2-col without overflowing */
  .audio-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

  /* Video grid keeps 2 cols, tighter gap */
  .video-grid { gap: 1rem; }

  /* Disco grid: 4 → 2 cols */
  .disco-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 3 → 2 cols */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Piano grid: 5 → 3 cols */
  .piano-grid { grid-template-columns: repeat(3, 1fr); }

  /* Track list padding */
  .sc-track-list { padding: 0 1rem; }

  /* Pull-quote balanced spacing: top margin matches tablet section pad-bottom (4rem) */
  .pull-quote { margin-top: 4rem; }
  /* Figaro quote (between dark sections): margin-bottom = bio pad-b (4) + margin-top (4) so black zone is symmetric around the quote */
  #biography + .pull-quote { margin-top: 4rem !important; margin-bottom: 8rem !important; }
}

/* LARGE PHONE / SMALL TABLET PORTRAIT — max-width: 768px */
@media (max-width: 768px) {
  /* Nav: hide inline links + inline lang, show hamburger (drawer carries them) */
  .nav-links { display: none; }
  .nav-lang { display: none; }
  .nav-burger { display: block; }

  /* Disco collapses to 1 col; audio-grid auto-fits to avoid overflow on narrow widths */
  .disco-grid { grid-template-columns: 1fr; }
  .audio-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  /* Piano: 3 → 2 cols */
  .piano-grid { grid-template-columns: repeat(2, 1fr); }
  /* Footer stays 2 cols */
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* MOBILE — max-width: 480px */
@media (max-width: 480px) {
  /* Nav padding tighter on small phones */
  nav { padding: 1.2rem 1.2rem; }
  /* Nav logo a bit smaller to keep nav uncluttered */
  .nav-logo { font-size: 1.4rem; }

  /* Hero — full width, photo as full-bleed background with overlay, svh for iOS Safari URL bar */
  .hero {
    grid-template-columns: 1fr;
    height: 100svh;
    background-image:
      linear-gradient(to top, var(--black) 0%, rgba(5,5,5,0.88) 32%, rgba(5,5,5,0.5) 60%, rgba(5,5,5,0.15) 85%, rgba(5,5,5,0) 100%),
      url('https://cdn.prod.website-files.com/6a149b04387c0bfb08efd760/6a149b1b87b027849398c830_Home%20page.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .hero__right { display: none; }
  .hero__left { padding: 5.5rem 1.2rem 3rem 1.2rem; justify-content: flex-end; }
  .hero__name { font-size: clamp(3rem, 15vw, 5rem); margin-bottom: 1rem; }
  .hero__quote { font-size: 0.82rem; max-width: 100%; }
  .hero__cta { font-size: 0.72rem; }

  /* Sections */
  .section { padding: 3.5rem 1.2rem 3rem; }

  /* Section headers */
  .sec-header { margin-bottom: 3rem; }
  .sec-header__top,
  .sec-header__bottom { font-size: clamp(1.4rem, 7vw, 2rem); }

  /* Intro grid + the 4 inline-style 2-col grids → all stack */
  .intro { grid-template-columns: 1fr; }
  .layout-2col { grid-template-columns: 1fr !important; gap: 2rem !important; }

  /* Video grid: 2 → 1 col */
  .video-grid { grid-template-columns: 1fr; }
  .video-item--full { grid-template-columns: 1fr; }
  .video-item--full .video-caption {
    border-left: none;
    border-top: 0.5px solid var(--grey2);
  }

  /* Audio grid (already 1col from 768px) */
  .audio-grid { grid-template-columns: 1fr; }

  /* Commissions audio: time wraps to a new line below play+waveform row */
  .ap-controls { flex-wrap: wrap; }
  .ap-controls > div[style*="flex:1"] { flex: 1 1 calc(100% - 40px - 1.2rem); min-width: 0; }
  .ap-time { width: 100%; order: 3; text-align: left; min-width: 0; padding-left: 0; }

  /* Film: track-list flush with section padding (matches video-grid edges in Commissions) */
  .sc-track-list { padding: 0; }
  .sc-track-row,
  .sc-track-row--audio { padding-left: 0; padding-right: 0; }

  /* Track rows: stack name+time below waveform */
  .sc-track-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .sc-track-row--audio { flex-wrap: wrap; }
  .sc-track-row--audio .sc-track-name {
    width: 100%;
    text-align: left;
    flex-shrink: 1;
  }
  /* Film tracks: time wraps below the play+waveform row */
  .sc-track-player { flex-wrap: wrap; }
  .sc-track-player > div[style*="flex:1"] { flex: 1 1 calc(100% - 32px - 1rem); min-width: 0; }
  .sc-track-row--audio .ap-time { width: 100%; order: 3; text-align: left; min-width: 0; }

  /* Waveform: tighter bars + gap so 80-bar Film waveforms fit narrow screens */
  .waveform-wrap { gap: 1px; height: 40px; }
  .waveform-bar { min-width: 1.5px; }

  /* Piano "Improvisation at Arènes de Montmartre, Paris" — allow wrap on small screens */
  .showreel-label { white-space: normal; align-items: flex-start; gap: 1rem; line-height: 1.3; }
  .showreel-label::after { display: none; }

  /* Disco: 1 col */
  .disco-grid { grid-template-columns: 1fr; }

  /* Piano: 2 cols */
  .piano-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pull quote */
  .pull-quote blockquote { font-size: clamp(1.1rem, 5vw, 1.6rem); padding-left: 1rem; }
  .pull-quote__attr { padding-left: 1rem; }
  /* Balanced spacing on mobile: top margin matches mobile section pad-bottom (3rem) */
  .pull-quote { margin-top: 3rem; }
  /* Figaro quote (between dark sections): margin-bottom = bio pad-b (3) + margin-top (3) so black zone is symmetric around the quote */
  #biography + .pull-quote { margin-top: 3rem !important; margin-bottom: 6rem !important; }

  /* Footer: 1 col */
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { grid-template-columns: 1fr; gap: 0.8rem; text-align: center; }
  .footer-bottom .footer-copy { grid-column: 1; }

  /* Back-to-top */
  .back-to-top { padding: 1.5rem 1.2rem; }

  /* Contact */
  .contact-wrap { padding: 2rem 0; }
}

/* LANDSCAPE PHONE / SHORT VIEWPORTS — stack audio cards when height is too short to show 2-col cards comfortably */
@media (max-width: 1024px) and (orientation: landscape) {
  .audio-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   PRIVACY POLICY PAGE
   Scoped under body.page-privacy-policy. The page template provides its
   own minimal nav and footer (different from the homepage chrome).
   All rules below override or supplement homepage styles only on /privacy-policy.
   ========================================================================= */
.page-privacy-policy{background:var(--white);color:var(--light-text)}
.page-privacy-policy nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.8rem 3.5rem;
  background:rgba(245,245,241,0.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:0.5px solid rgba(10,10,10,0.08);
}
.page-privacy-policy .nav-logo{
  font-family:var(--serif);font-size:2rem;font-weight:300;
  letter-spacing:-0.01em;color:var(--light-text);
  text-decoration:none;
  display:flex;flex-direction:column;line-height:0.95;
  user-select:none;-webkit-user-select:none;
}
.page-privacy-policy .nav-logo__first{display:block;font-weight:300}
.page-privacy-policy .nav-logo__last{display:block;font-weight:400;letter-spacing:-0.05em;margin-left:-0.06em}
.page-privacy-policy .nav-back{
  font-family:var(--sans);font-size:0.72rem;letter-spacing:0.28em;
  text-transform:uppercase;text-decoration:none;
  color:rgba(10,10,10,0.8);
  display:inline-flex;align-items:center;gap:0.8rem;
  transition:color 0.3s;
}
.page-privacy-policy .nav-back:hover{color:var(--purple)}
.page-privacy-policy .nav-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
.page-privacy-policy .page-header{
  padding:11rem 3.5rem 5rem;
  border-bottom:0.5px solid rgba(10,10,10,0.1);
}
.page-privacy-policy .page-header__inner{max-width:880px;margin:0 auto}
.page-privacy-policy .page-eyebrow{
  font-family:var(--sans);font-size:0.7rem;font-weight:400;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--purple);margin-bottom:1.4rem;
}
.page-privacy-policy .page-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:1.05;letter-spacing:-0.02em;
  color:var(--light-text);margin-bottom:1.6rem;
}
.page-privacy-policy .page-meta{
  font-family:var(--sans);font-size:0.85rem;font-weight:300;
  color:rgba(10,10,10,0.55);line-height:1.7;
}
.page-privacy-policy .privacy-main{padding:5rem 3.5rem 6rem}
.page-privacy-policy .privacy-main .content{max-width:880px;margin:0 auto}
.page-privacy-policy .content section{margin-bottom:4rem}
.page-privacy-policy .content section:last-child{margin-bottom:0}
.page-privacy-policy .content h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.2;letter-spacing:-0.01em;
  color:var(--light-text);margin-bottom:1.6rem;
  padding-bottom:1rem;border-bottom:0.5px solid rgba(10,10,10,0.12);
}
.page-privacy-policy .content h3{
  font-family:var(--sans);font-weight:400;
  font-size:0.78rem;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--purple);margin:2rem 0 0.9rem;
}
.page-privacy-policy .content p{
  font-family:var(--sans);font-weight:300;
  font-size:1rem;line-height:1.75;
  color:rgba(10,10,10,0.82);margin-bottom:1.1rem;
}
.page-privacy-policy .content p:last-child{margin-bottom:0}
.page-privacy-policy .content a{color:var(--purple);text-decoration:none;border-bottom:1px solid rgba(123,77,184,0.3);transition:border-color 0.3s,color 0.3s}
.page-privacy-policy .content a:hover{color:var(--light-text);border-bottom-color:var(--light-text)}
.page-privacy-policy .content ul{list-style:none;margin-bottom:1.4rem;padding:0}
.page-privacy-policy .content ul li{
  font-family:var(--sans);font-weight:300;
  font-size:1rem;line-height:1.75;
  color:rgba(10,10,10,0.82);
  padding-left:1.6rem;position:relative;margin-bottom:0.5rem;
}
.page-privacy-policy .content ul li::before{
  content:'';position:absolute;left:0;top:0.7rem;
  width:6px;height:1px;background:var(--purple);
}
.page-privacy-policy .content strong{font-weight:400;color:var(--light-text)}
.page-privacy-policy .info-block{
  background:var(--light-grey1);
  padding:1.6rem 1.8rem;margin-bottom:1.4rem;
  border-left:2px solid var(--purple);
}
.page-privacy-policy .info-block p{margin-bottom:0.45rem;font-size:0.95rem;line-height:1.65}
.page-privacy-policy .info-block p:last-child{margin-bottom:0}
.page-privacy-policy .info-block strong{display:inline-block;min-width:160px;font-weight:400}
.page-privacy-policy .placeholder{
  display:inline-block;
  background:rgba(123,77,184,0.12);
  color:var(--purple);
  padding:0.1rem 0.5rem;border-radius:2px;
  font-family:var(--sans);font-weight:400;
  font-size:0.86em;letter-spacing:0.04em;
}
@media (max-width:1024px){
  .page-privacy-policy nav{padding:1.4rem 2rem}
  .page-privacy-policy .page-header{padding:9rem 2rem 4rem}
  .page-privacy-policy .privacy-main{padding:4rem 2rem 5rem}
}
@media (max-width:768px){
  .page-privacy-policy .nav-back span{display:none}
}
@media (max-width:480px){
  .page-privacy-policy nav{padding:1.2rem 1.2rem}
  .page-privacy-policy .nav-logo{font-size:1.4rem}
  .page-privacy-policy .page-header{padding:7rem 1.2rem 3rem}
  .page-privacy-policy .privacy-main{padding:3rem 1.2rem 3.5rem}
  .page-privacy-policy .info-block{padding:1.2rem 1.4rem}
  .page-privacy-policy .info-block strong{display:block;min-width:0;margin-bottom:0.1rem;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(10,10,10,0.55)}
}

/* =========================================================================
   WordPress block-theme wrapper neutralization.
   When the homepage content is rendered via wp:post-content, WordPress wraps
   it in <div class="entry-content wp-block-post-content">. That wrapper
   would otherwise interfere with our hero section's full-viewport layout
   and the section grid system. We make it a transparent passthrough.
   ========================================================================= */
.wp-block-post-content,
.entry-content,
.wp-site-blocks {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  display: block !important;
}