:root{
  --bg:#0b0c0d;
  --bg2:#111315;
  --panel:#151719;
  --text:#eee9df;
  --muted:#aaa59d;
  --line:#2b2e31;
  --accent:#c7b18a;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.shell{max-width:var(--max);margin:0 auto;padding:0 32px}
.nav{
  position:fixed;z-index:30;top:0;left:0;right:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(11,12,13,.82);backdrop-filter:blur(16px);
}
.navinner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.links{display:flex;gap:25px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#c9c4bb}
.links a:hover{color:white}
.hero{min-height:92vh;display:grid;align-items:end;padding:150px 0 80px;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
  radial-gradient(circle at 72% 35%,rgba(199,177,138,.12),transparent 30%),
  linear-gradient(120deg,rgba(255,255,255,.015),transparent 55%);
  pointer-events:none;
}
.kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
h1{font-size:clamp(58px,9vw,130px);line-height:.86;letter-spacing:-.055em;margin:0;max-width:1000px;font-weight:600}
.hero-sub{font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,3vw,40px);max-width:820px;color:#d7d1c7;margin:42px 0 34px;line-height:1.22;font-weight:400}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border:1px solid #4a4c4e;
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;
}
.btn.primary{background:var(--text);color:#111;border-color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.section{padding:112px 0;border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr 2fr;gap:50px;margin-bottom:55px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.section h2{font-size:clamp(38px,5vw,70px);line-height:1;letter-spacing:-.035em;margin:0;font-weight:550}
.lede{font-family:Georgia,"Times New Roman",serif;font-size:26px;color:#d4cec4;max-width:760px;margin:0}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.project{position:relative;min-height:430px;background:#181a1c;overflow:hidden}
.project img{position:absolute;inset:0;filter:saturate(.78) contrast(1.02);transition:transform .6s ease,filter .6s ease}
.project:hover img{transform:scale(1.02);filter:saturate(.95)}
.project:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.06) 65%)}
.ptext{position:absolute;z-index:2;left:28px;right:28px;bottom:25px}
.ptext h3{margin:0 0 4px;font-size:25px;font-weight:550}
.pmeta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#d2cdc5}
.pdesc{margin:10px 0 0;color:#c5c0b7;max-width:540px;font-size:14px}
.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.music-card{border:1px solid var(--line);padding:28px;min-height:240px;background:var(--bg2)}
.music-card h3{font-size:22px;margin:0 0 10px}
.music-card p{color:var(--muted);font-size:14px}
.audio-placeholder{margin-top:28px;border-top:1px solid var(--line);padding-top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#777}
.about-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:start}
.portrait{aspect-ratio:4/5;background:#171819}
.about-copy p{font-family:Georgia,"Times New Roman",serif;font-size:23px;color:#d4cec4;margin:0 0 24px}
.about-copy .small{font-family:inherit;font-size:15px;color:var(--muted)}
.quote{
  margin-top:44px;padding:28px 0 0;border-top:1px solid var(--line);
  font-family:Georgia,"Times New Roman",serif;font-size:25px;color:#cbc6bd
}
.quote span{display:block;font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#777;margin-top:18px}
.discog{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.album{aspect-ratio:1/1;background:linear-gradient(145deg,#2a2b2d,#111);display:flex;align-items:end;padding:16px;border:1px solid var(--line)}
.album b{font-size:13px}
.album span{display:block;color:#888;font-size:11px;margin-top:4px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}
.contact h2{max-width:700px}
.contact-info{border-top:1px solid var(--line);padding-top:24px}
.contact-info p{color:var(--muted)}
.footer{padding:35px 0 55px;border-top:1px solid var(--line);font-size:11px;color:#777;letter-spacing:.08em;text-transform:uppercase}
.reel-wrap{margin-top:38px;max-width:1080px}
.reel-video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);object-fit:contain}
.vimeo-reel{height:auto;min-height:0;border:1px solid var(--line)}
.reel-caption{margin-top:10px;color:#777;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.email-link{color:var(--text);border-bottom:1px solid #4a4c4e;padding-bottom:2px}
.email-link:hover{border-color:var(--accent);color:#fff}
.note{color:#777;font-size:12px;margin-top:14px}
@media(max-width:900px){
  .links{display:none}
  .hero{min-height:80vh}
  .section-head,.about-grid,.contact{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .music-grid{grid-template-columns:1fr}
  .discog{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .shell{padding:0 20px}
  .navinner{height:64px}
  .hero{padding-top:120px}
  h1{font-size:54px}
  .section{padding:80px 0}
  .section-head{gap:25px}
}

/* Draft 2: keep the full professional name as one typographic unit */
.hero h1 { white-space: nowrap; font-size: clamp(2.75rem, 7.1vw, 7.25rem); letter-spacing: -0.045em; }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.15rem, 9.6vw, 4.5rem); letter-spacing: -0.055em; }
}

.hero-bio {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.72;
}

/* Draft 7 interactive project and recordings additions */
.project-open { cursor: pointer; }
.project-open:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.project-image-wrap { position: absolute; inset: 0; overflow: hidden; }
.project-image-wrap img { transition: transform .35s ease, filter .35s ease; }
.project-open:hover .project-image-wrap img,
.project-open:focus .project-image-wrap img { transform: scale(1.025); filter: brightness(.78); }
.project-cue {
  position: absolute; right: 16px; bottom: 14px;
  padding: 8px 11px; background: rgba(0,0,0,.68); color: #fff;
  font-size: .72rem; letter-spacing: .10em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px); transition: all .25s ease;
}
.project-open:hover .project-cue,
.project-open:focus .project-cue { opacity: 1; transform: none; }

.project-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.project-modal.open { display: flex; }
.project-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.86); backdrop-filter: blur(5px); }
.project-modal-panel {
  position: relative; z-index: 1; width: min(900px, 94vw); max-height: 90vh;
  overflow: auto; background: #111; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.project-modal-panel > img { width: 100%; max-height: 430px; object-fit: cover; display: block; }
.modal-copy { padding: 30px; }
.modal-copy h2 { margin: 7px 0 10px; }
.modal-copy p { max-width: 720px; color: var(--muted); line-height: 1.7; }
.modal-close {
  position: absolute; z-index: 2; top: 12px; right: 14px; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.65);
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.modal-reel-link { margin-top: 12px; }

.album-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px;
}
.album-card { min-width: 0; }
.album-cover-link {
  display: block; position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: #111; border: 1px solid rgba(255,255,255,.08);
}
.album-cover-link img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease, filter .3s ease;
}
.listen-overlay {
  position: absolute; inset: auto 12px 12px 12px; padding: 9px 10px;
  background: rgba(0,0,0,.72); color: #fff; text-align: center;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(5px); transition: all .25s ease;
}
.album-cover-link:hover img, .album-cover-link:focus img { transform: scale(1.025); filter: brightness(.72); }
.album-cover-link:hover .listen-overlay, .album-cover-link:focus .listen-overlay { opacity: 1; transform: none; }
.album-info { padding-top: 12px; }
.album-info h3 { margin: 0 0 4px; font-size: 1rem; }
.album-info > span { color: var(--muted); font-size: .88rem; }
.album-links { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.album-links a { color: var(--muted); font-size: .8rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.album-links a:hover { color: #fff; }

@media (max-width: 980px) {
  .album-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .project-modal { padding: 10px; }
  .modal-copy { padding: 22px; }
}


/* Draft 9 positioning and approach */
.approach-section { background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)); }
.approach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.approach-card { border-top:1px solid var(--line); padding:26px 6px 8px 0; }
.approach-number { color:var(--accent); font-size:11px; letter-spacing:.16em; margin-bottom:24px; }
.approach-card h3 { margin:0 0 12px; font-size:22px; font-weight:550; }
.approach-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.72; }
@media(max-width:900px){ .approach-grid { grid-template-columns:1fr; } }

/* Draft 12: project cue libraries */
.project-audio { margin: 28px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.project-audio-head h3 { margin: 0 0 7px; font-size: 1.08rem; }
.project-audio-head p { margin: 0 0 16px; font-size: .88rem; line-height: 1.55; max-width: 680px; }
.project-audio-list { display: grid; gap: 12px; }
.cue-row { padding: 13px 14px 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.cue-meta { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:8px; }
.cue-title { color:#fff; font-size:.92rem; font-weight:550; }
.cue-status { color:var(--muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; text-align:right; }
.cue-row audio { display:block; width:100%; height:34px; }
.audio-project-note { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; line-height:1.55; }
@media(max-width:640px){ .cue-meta { display:block; } .cue-status { margin-top:4px; text-align:left; } }

/* Custom portfolio audio player: no native download menu is exposed. */
.protected-audio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.custom-audio-player { display:grid; grid-template-columns:auto minmax(110px,1fr) auto; gap:12px; align-items:center; margin-top:8px; }
.audio-play { appearance:none; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.06); color:inherit; border-radius:999px; padding:7px 15px; cursor:pointer; font:inherit; }
.audio-play:hover,.audio-play:focus-visible { background:rgba(255,255,255,.12); }
.audio-progress { width:100%; cursor:pointer; }
.audio-time { min-width:78px; text-align:right; font-size:.78rem; opacity:.7; font-variant-numeric:tabular-nums; }
video, img { -webkit-user-drag:none; }
@media (max-width:600px){ .custom-audio-player { grid-template-columns:auto 1fr; } .audio-time { grid-column:2; text-align:left; min-width:0; } }

/* Draft 17: director-facing scoring philosophy and project case studies */
.approach-grid-four { grid-template-columns: repeat(2, 1fr); }
.approach-statement {
  margin-top: 34px;
  max-width: 900px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--line);
}
.approach-statement p {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.45;
  color: #e4dfd7;
  letter-spacing: -.01em;
}
.project-case-study {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 26px 0 4px;
}
.case-study-item {
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.case-label {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.project-case-study .case-study-item p {
  margin: 0;
  color: #d1ccc4;
  font-size: 14px;
  line-height: 1.65;
}
@media(max-width:900px){
  .approach-grid-four { grid-template-columns: 1fr; }
  .project-case-study { grid-template-columns: 1fr; }
}

/* Draft 26: uniform project presentation */
.project {
  height: 430px;
  min-height: 0;
}
.project-image-wrap img,
.project > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-modal-panel > img {
  width: 100%;
  height: 430px;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .project { height: 400px; }
}
@media (max-width: 560px) {
  .project { height: 350px; }
  .project-modal-panel > img { height: 240px; }
}