:root{
  --paper:#f3f4f4; --ink:#1b1d1f; --graphite:#565b60; --mist:#8f969b; --line:#d9dcde; --wash:#e7e9ea;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --step-1:clamp(.82rem,.8rem + .1vw,.88rem); --step0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --step1:clamp(1.25rem,1.15rem + .5vw,1.45rem); --step2:clamp(1.6rem,1.4rem + 1vw,2.1rem);
  --step3:clamp(2.2rem,1.7rem + 2.4vw,3.6rem); --step4:clamp(2.8rem,1.6rem + 6vw,6.6rem);
  --gutter:clamp(16px,4vw,56px); --measure:38rem;
}
@media (prefers-color-scheme:dark){:root{--paper:#141617;--ink:#e4e7e8;--graphite:#a9afb3;--mist:#7d8489;--line:#2c3033;--wash:#1d2022}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h,4.5rem) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font:300 var(--step0)/1.62 var(--serif);font-feature-settings:"onum","kern";padding-bottom:5rem}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--mist);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:300;line-height:1.15;margin:0}
h1{font-size:var(--step3);font-weight:200;letter-spacing:-.01em}
h2{font-size:var(--step1);font-weight:400}
h3{font-size:var(--step0);font-weight:500}
p{margin:0 0 .9em}
.muted{color:var(--graphite)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--gutter);top:.5rem;background:var(--paper);padding:.3rem .6rem;z-index:10}

.site-head{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center;justify-content:space-between;padding:.9rem var(--gutter);background:var(--paper);border-bottom:1px solid var(--line)}
.wordmark{font-size:var(--step1);font-weight:400;text-decoration:none;letter-spacing:.01em}
.site-head nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
@media (max-width:560px){.site-head{padding:.65rem var(--gutter);gap:.35rem 1rem}.site-head nav{gap:.1rem 1rem;font-size:.95em}}
.site-head nav a{text-decoration:none;color:var(--graphite)}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink)}
main{padding:0 var(--gutter)}
.site-foot{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;padding:2.5rem var(--gutter);margin-top:5rem;border-top:1px solid var(--line);font-size:var(--step-1);color:var(--graphite)}

/* Hero: two drifting line gratings — the moiré slowly shifts, like the music */
.hero{position:relative;margin:0 calc(var(--gutter)*-1);min-height:min(78vh,720px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.field{position:absolute;inset:-20%;opacity:.55;
  background:
   repeating-linear-gradient(0deg,var(--ink) 0 1px,transparent 1px 7px),
   repeating-linear-gradient(1.6deg,var(--ink) 0 1px,transparent 1px 7.4px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
  animation:drift 90s ease-in-out infinite alternate}
@keyframes drift{from{transform:rotate(0deg) translateY(0)}to{transform:rotate(-2.2deg) translateY(28px)}}
@media (prefers-reduced-motion:reduce){.field{animation:none;transform:rotate(-.8deg)}}
.hero-text{position:relative;flex:1;padding:0 var(--gutter) clamp(2rem,6vh,4rem);max-width:60rem}
.hero h1{font-size:var(--step4);font-weight:200;letter-spacing:-.025em;line-height:1;background:var(--paper);display:block;width:fit-content;max-width:100%;padding:.05em .12em .12em;margin-left:-.12em}
.hero p{font-size:var(--step1);max-width:30rem;color:var(--ink);background:var(--paper);display:block;width:fit-content;padding:.3em .4em;margin:1rem 0 0 -.4em;line-height:1.5}

.band,.block{margin-top:clamp(2.5rem,6vw,4.5rem)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.4rem}
.band-head a{color:var(--graphite);font-size:var(--step-1)}
.block>h2{border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:.4rem}
.block h3{margin:1.4rem 0 .2rem;color:var(--graphite);font-weight:400}

.page-head{padding:clamp(2.5rem,7vw,5rem) 0 1rem;max-width:var(--measure)}
.lede{font-size:var(--step1);color:var(--graphite);margin-top:.6rem}

/* lists */
.worklist,.events,.press{list-style:none;margin:0;padding:0}
.worklist li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--wash)}
.band .worklist li{grid-template-columns:4.5rem 1fr auto}
.wl-year{color:var(--graphite);font-variant-numeric:oldstyle-nums}
.worklist a{font-size:var(--step1);font-weight:400;text-decoration:none}
.worklist a:hover{text-decoration:underline}
.years{display:grid;gap:0 clamp(2rem,5vw,4.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.year{margin-top:2rem;break-inside:avoid}
.year h2{font-size:var(--step2);font-weight:200;color:var(--graphite);border-bottom:1px solid var(--line);padding-bottom:.3rem}

.ev{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--wash)}
.ev time{color:var(--graphite);line-height:1.3}
.ev-d{font-size:var(--step1);color:var(--ink);font-weight:400}
.ev-m{display:block;font-size:var(--step-1)}
.ev-body p{margin:0}
.ev-work{margin-bottom:.15rem!important}.ev-work a{font-weight:400}
.events.compact .ev{grid-template-columns:5.5rem 1fr;font-size:var(--step-1)}
.events.compact .ev-d{font-size:var(--step0)}
@media (max-width:520px){.ev,.events.compact .ev{grid-template-columns:4.2rem 1fr;gap:.7rem}}

details.pyear{border-bottom:1px solid var(--line)}
details.pyear summary{display:flex;justify-content:space-between;align-items:baseline;cursor:pointer;padding:.8rem 0;font-size:var(--step2);font-weight:200;list-style:none}
details.pyear summary::-webkit-details-marker{display:none}
details.pyear summary::after{content:"+";color:var(--mist);margin-left:1rem}
details.pyear[open] summary::after{content:"–"}
details.pyear summary .muted{font-size:var(--step-1);margin-left:auto}

.press li{padding:.7rem 0;border-bottom:1px solid var(--wash)}
.press p{margin:0}.press .muted{font-size:var(--step-1)}
.tag{font-size:.72em;color:var(--graphite);border:1px solid var(--line);padding:0 .35em;border-radius:2px;vertical-align:.12em}
.press-grid{display:grid;gap:3rem;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.pyear-s h3{font-size:var(--step2);font-weight:200;color:var(--graphite);margin:2rem 0 .2rem}
.pphotos{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.pphotos figure,.gallery figure{margin:0}
figcaption{font-size:var(--step-1);color:var(--graphite);margin-top:.35rem}
@media (max-width:860px){.press-grid{grid-template-columns:1fr}}

/* work page */
.work-head{padding:clamp(2.5rem,7vw,5rem) 0 2rem;border-bottom:1px solid var(--line)}
.work-head h1{font-size:var(--step4);font-weight:200;letter-spacing:-.02em;line-height:1;margin:.3rem 0 .4rem}
.scoring{font-size:var(--step1);color:var(--graphite);font-style:italic}
.work-grid{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);margin-top:2.5rem}
.work-side .block:first-child{margin-top:0}
@media (max-width:900px){.work-grid{grid-template-columns:1fr}}
.prose{max-width:var(--measure);hyphens:auto}
.prose strong{font-weight:500}
.prose h1{margin:clamp(2.5rem,7vw,5rem) 0 1.5rem}
.prose h2{margin:2.5rem 0 .8rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1rem}
.gallery img{aspect-ratio:3/2;object-fit:cover;width:100%;filter:grayscale(1);transition:filter .3s}
.gallery a:hover img{filter:none}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem}
.yt{position:relative;aspect-ratio:16/9;border:0;background:#000 center/cover;cursor:pointer;padding:0;width:100%}
.yt .ico,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .ico::before{content:"";position:absolute;left:50%;top:50%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border-radius:50%;background:rgba(255,255,255,.9)}
.yt .ico::after{content:"";position:absolute;left:50%;top:50%;margin:-.6rem 0 0 -.3rem;border-left:1.1rem solid #1b1d1f;border-top:.65rem solid transparent;border-bottom:.65rem solid transparent}

.about{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,var(--measure));gap:clamp(2rem,4vw,4rem);align-items:start}
.portrait{margin:clamp(2.5rem,7vw,5rem) 0 0;position:sticky;top:2rem}
.portrait img{filter:grayscale(1)}
@media (max-width:860px){.about{grid-template-columns:1fr}.portrait{position:static;max-width:28rem}}

/* play buttons + player */
.play{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;width:2.4rem;height:2.4rem;justify-content:center;cursor:pointer;font:inherit;padding:0}
.play:hover{border-color:var(--ink)}
.play-big{width:auto;padding:0 1.2rem 0 1rem;height:2.9rem;margin-top:1.5rem}
.ico{display:inline-block;width:0;height:0;border-left:.62rem solid currentColor;border-top:.38rem solid transparent;border-bottom:.38rem solid transparent;margin-left:.15rem}
.playing .ico,.pbtn.on .ico{width:.6rem;height:.72rem;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.player{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:1rem;padding:.7rem var(--gutter);background:var(--paper);border-top:1px solid var(--line);z-index:20}
.player[hidden]{display:none}
.pbtn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:50%;width:2.5rem;height:2.5rem;flex:none;cursor:pointer;display:grid;place-items:center}
.pmeta{flex:1;min-width:0}
#p-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-weight:400}
.pbar{display:flex;gap:.8rem;align-items:center}
.pbar input{flex:1;accent-color:var(--ink);height:1rem}
#p-time{font-size:var(--step-1);color:var(--graphite);font-variant-numeric:tabular-nums;min-width:6.5rem;text-align:right}
.pclose{border:0;background:none;color:var(--graphite);font-size:1.6rem;cursor:pointer;padding:.2rem .4rem}