:root{
  --bg:#2b2f33; --bg-2:#33383d; --panel:rgba(40,44,48,.82);
  --text:#f2f2f0; --muted:#c9ccce; --line:rgba(255,255,255,.18);
  --accent:#f0892b; --accent-2:#ffa552;
  --font:"Figtree",system-ui,sans-serif; --display:"Cormorant Garamond",Georgia,serif; --dscale:1.15;
  --maxw:980px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:300;
  font-size:18px;line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
body.has-bg::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bgimg,var(--bg))}
a{color:var(--accent-2)} a:hover{color:#fff}
em,i{font-style:italic}
img{max-width:100%;height:auto;display:block}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(30,33,36,.86);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:.7rem 16px}
.brand{font-style:italic;font-size:1.6rem;color:var(--accent);text-decoration:none;letter-spacing:.02em;font-weight:400}
.brand:hover{color:var(--accent-2)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;font-size:.95rem;letter-spacing:.04em;padding:.2rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent)}
nav .mail svg{width:22px;height:22px;vertical-align:middle;fill:currentColor}
nav .mail{border-bottom:none}

main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:2.5rem 16px 3rem}
h1,h2,h3{font-weight:300;line-height:1.25}
h1.page-title{font-style:italic;font-size:clamp(2.4rem,7vw,4rem);text-align:center;margin:.5rem 0 2rem;color:#fff}

/* home */
.hero{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.hero figure{margin:0}
.hero .text{padding:2rem clamp(1.2rem,4vw,3rem) 2.5rem;text-align:center}
.hero .text p{margin:0 auto 1.6rem;max-width:44rem}
.hero .amwaaj{color:var(--accent);font-size:1.15em}
.button{display:inline-block;border:1px solid var(--accent);color:#fff;background:transparent;text-decoration:none;
  padding:.65rem 1.6rem;border-radius:2px;letter-spacing:.05em;transition:background .2s}
.button:hover{background:var(--accent);color:#1e2124}

/* musicians */
.card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:2rem}
.card img{width:100%;height:100%;object-fit:cover}
.card .bio{padding:1.6rem 1.8rem}
.card h2{margin:0 0 .2rem;font-size:1.7rem;color:#fff}
.card .instr{margin:0 0 1rem;color:var(--accent);letter-spacing:.03em}
.card p{margin:0}
@media (max-width:720px){
  .card{grid-template-columns:1fr}
  .card img{height:auto;max-height:420px}
  .card .bio{padding:1.2rem 1.2rem 1.5rem}
}

/* videos */
.video{position:relative;aspect-ratio:16/9;background:#111;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.center{text-align:center}

/* repertoire */
.intro{text-align:center;color:var(--muted);max-width:40rem;margin:0 auto 2.5rem}
.piece{padding:1.4rem 0;border-top:1px solid var(--line)}
.piece:first-of-type{border-top:none}
.piece h2{color:var(--accent);font-size:1.3rem;margin:0 0 .4rem;font-weight:400}
.piece h2 .composer{color:var(--muted);font-weight:300}
.piece p{margin:.4rem 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1rem clamp(1.2rem,4vw,2.5rem)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:rgba(30,33,36,.9);font-size:.9rem;color:var(--muted)}
.site-footer .wrap{max-width:var(--maxw);margin:0 auto;padding:1.2rem 16px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none;margin-left:1rem}
.site-footer a:hover{color:#fff}
.site-footer .links a:first-child{margin-left:0}

@media (max-width:600px){
  body{font-size:17px}
  .site-header .wrap{justify-content:center}
  nav ul{gap:1rem;justify-content:center}
  main{padding-top:1.5rem}
}

/* ===== headings (display font) ===== */
.brand,h1.page-title,.card h2,.piece h2,nav a,.hero .amwaaj{font-family:var(--display)}
.brand{font-weight:var(--dw);font-size:calc(2.1rem*var(--dscale));line-height:1}
nav a{font-weight:var(--dw2);font-size:calc(1.05rem*var(--dscale));letter-spacing:.03em}
.card h2{font-weight:var(--dw2);font-size:calc(1.7rem*var(--dscale))}
.piece h2{font-weight:var(--dw2);font-size:calc(1.3rem*var(--dscale))}
.piece h2 .composer{font-family:var(--font);font-size:.8em;font-weight:300}
.hero .amwaaj{font-weight:var(--dw2);font-size:calc(1.25em*var(--dscale))}
/* page titles: smaller, with an orange rule */
h1.page-title{font-weight:var(--dw);font-size:calc(clamp(2rem,4.5vw,2.7rem)*var(--dscale));margin:.4rem 0 1.8rem;line-height:1.1}
h1.page-title::after{content:"";display:block;width:56px;height:2px;background:var(--accent);margin:.7rem auto 0}
@media (max-width:600px){nav ul{gap:.8rem} nav a{font-size:calc(.95rem*var(--dscale))}}

/* heading font choices */
:root,html[data-h="cormorant"]{--display:"Cormorant Garamond",Georgia,serif;--dscale:1.15;--dw:500;--dw2:600}
html[data-h="playfair"]{--display:"Playfair Display",Georgia,serif;--dscale:1;--dw:400;--dw2:500}

/* text font choices */
:root,html[data-t="figtree"]{--font:"Figtree",system-ui,sans-serif}
html[data-t="source"]{--font:"Source Sans 3",system-ui,sans-serif}
html[data-t="alegreya"]{--font:"Alegreya Sans",system-ui,sans-serif} html[data-t="alegreya"] body{font-size:19.5px}
html[data-t="worksans"]{--font:"Work Sans",system-ui,sans-serif} html[data-t="worksans"] body{font-size:17px}
html[data-t="lora"]{--font:"Lora",Georgia,serif} html[data-t="lora"] body{font-size:17.5px;font-weight:400}
html[data-t="crimson"]{--font:"Crimson Pro",Georgia,serif} html[data-t="crimson"] body{font-size:20px;font-weight:400}

/* background choices */
:root,html[data-bg="pattern"]{--bgimg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23f0892b%22%20stroke-opacity%3D%22.10%22%20stroke-width%3D%221.2%22%3E%3Crect%20x%3D%2228%22%20y%3D%2228%22%20width%3D%2240%22%20height%3D%2240%22/%3E%3Crect%20x%3D%2228%22%20y%3D%2228%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22rotate%2845%2048%2048%29%22/%3E%3Cpath%20d%3D%22M0%2048h20M76%2048h20M48%200v20M48%2076v20%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%220%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2296%22%20r%3D%228%22/%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2296%22%20r%3D%228%22/%3E%3C/g%3E%3C/svg%3E") center/96px 96px,radial-gradient(ellipse at 50% 0%,#363b40 0%,#26292d 70%)}
html[data-bg="photo"]{--bgimg:url("../images/bg-blur.jpg") center/cover no-repeat}
html[data-bg="charcoal"]{--bgimg:radial-gradient(ellipse at 50% 0%,#363b40 0%,#24272a 75%)}
html[data-bg="warm"]{--bgimg:radial-gradient(ellipse at 50% -10%,#4a3527 0%,#2c2622 45%,#1f1d1c 100%)}

/* TEMPORARY design panel */
#design-panel{position:fixed;right:12px;bottom:12px;z-index:50;background:#111;border:1px solid var(--line);border-radius:8px;font:400 12.5px system-ui,sans-serif;color:#ccc;max-width:calc(100vw - 24px)}
#design-panel summary{cursor:pointer;padding:7px 12px;list-style:none;color:#fff}
#design-panel summary::-webkit-details-marker{display:none}
#design-panel .rows{padding:0 10px 10px}
#design-panel .row{margin-top:8px}
#design-panel .lab{display:block;color:#888;margin-bottom:3px;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
#design-panel button{all:unset;cursor:pointer;padding:4px 8px;margin:0 3px 3px 0;border-radius:4px;background:#222;color:#ccc;display:inline-block}
#design-panel button[aria-pressed="true"]{background:var(--accent);color:#111}
/* videos page: player + list */
.vlayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.2rem;align-items:start}
.vlist{list-style:none;margin:0;padding:.4rem;background:var(--panel);border:1px solid var(--line);border-radius:4px;max-height:min(70vh,560px);overflow-y:auto}
.vitem{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:112px 1fr;gap:.7rem;align-items:center;width:100%;padding:.45rem;border-radius:4px;border-left:3px solid transparent}
.vitem:hover{background:rgba(255,255,255,.06)}
.vitem.is-on{background:rgba(240,137,43,.14);border-left-color:var(--accent)}
.vitem:focus-visible{outline:2px solid var(--accent)}
.vitem img{width:112px;height:63px;object-fit:cover;border-radius:2px}
.vitem strong{display:block;font-weight:400;font-size:.95rem;line-height:1.3;color:#fff}
.vitem small{display:block;font-size:.8rem;color:var(--muted);line-height:1.3;margin-top:.15rem}
@media (max-width:820px){.vlayout{grid-template-columns:1fr}.vlist{max-height:none}}
/* smaller home photo */
.hero{max-width:840px;margin:0 auto}
.hero figure img{width:100%;max-height:60vh;object-fit:cover;object-position:50% 60%}