/* Aslan X. Shi — site styles.
   Layout: warm-charcoal screening room. Antonio (condensed caps) for titles and labels,
   Cormorant SC for credit labels, Cormorant Garamond (same family) for running text.
   Section titles sit left, with a thin rule under each. Single dark look. */
:root{
  color-scheme:dark;
  --bg:#1c1a18; --bg-2:#211f1c; --bg-3:#2a2724;
  --ink:#e8e2d6; --ink-2:#c9c2b5; --muted:#a19a8e; --dim:#8a8478;
  --line:rgba(232,226,214,.13); --line-2:rgba(232,226,214,.28); --line-3:rgba(232,226,214,.45);
  --cond:"Antonio","Arial Narrow","Helvetica Neue Condensed",sans-serif;
  --sc:"Cormorant SC","Cormorant Garamond",Garamond,"Times New Roman",serif;
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
  --axis:clamp(14px,2.6vw,36px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:89px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.wrap{max-width:1320px;margin:0 auto;padding-left:calc(var(--gl) + 12px);padding-right:calc(var(--gr) + 12px)}
@media (max-width:600px){.wrap{padding-left:var(--gl);padding-right:var(--gr)}}
.cap{font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;font-weight:300}
.note{margin:14px 0 0;font-style:italic;font-size:.95rem;color:var(--dim)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding-top:max(40px,env(safe-area-inset-top,0px));padding-bottom:40px;padding-left:calc(var(--gl) + 12px);padding-right:calc(var(--gr) + 12px);min-height:min(100svh,980px)}
.hero{position:relative;overflow:hidden}
.hero-id{position:relative}
.hero h1{position:relative;z-index:0;margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;font-size:clamp(40px,4.5vw,84px);line-height:1.05;letter-spacing:.06em;white-space:nowrap}
.hero .tagline{position:relative;font-family:var(--sc);font-size:clamp(19px,1.6vw,23px);letter-spacing:.06em;color:var(--ink-2);margin:26px 0 0;max-width:36ch;line-height:1.35;text-wrap:balance}
.formerly{position:relative;margin:10px 0 0;font-family:var(--sc);font-size:18.15px;letter-spacing:.08em;color:var(--dim)}
.menu{position:relative;list-style:none;margin:32px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.menu a{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.22em;font-size:12px;line-height:1.5;color:var(--muted);transition:color .3s;display:inline-block}
.menu a:hover{color:var(--ink)}
.menu a::before{content:"·";margin-right:12px;color:var(--dim)}
.gscore{margin:0 0 0 calc(-1 * clamp(0px,2.4vw,40px));min-width:0}   /* a little to the left, into the gap */
.gscore .box{position:relative;height:clamp(320px,72svh,760px);border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-2)}
.gscore canvas{display:block;width:100%;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:16px 0 0;list-style:none;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:10px}
.legend svg{width:28px;height:12px;flex:none;color:var(--ink-2)}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-left:var(--gl);padding-right:var(--gr)}
  .hero h1{font-size:clamp(34px,11vw,72px)}
  .hero-mark{left:calc(-1 * var(--gl) - var(--m) * .45)}
  .gscore .box{height:56svh}
}

/* ---------- sections ---------- */
section{padding-top:clamp(88px,11vw,150px);scroll-margin-top:0}
.shead{margin-bottom:clamp(36px,4.5vw,60px);padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.shead.bare{border-bottom:0;padding-bottom:18px;margin-bottom:0}
.shead h2{margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(28px,4.2vw,54px);line-height:1.05;text-wrap:balance}

/* credit blocks (label right / value left on a centre axis) */
.credits{margin:0}
.credits > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--axis);align-items:baseline;padding:.38em 0}
.credits dt{text-align:right;font-family:var(--sc);font-size:1.02rem;letter-spacing:.07em;color:var(--muted);min-width:0}
.credits dd{margin:0;min-width:0;font-family:var(--cond);text-transform:uppercase;font-weight:300;letter-spacing:.17em;font-size:.92rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.credits dd .plain{display:block;font-family:var(--serif);text-transform:none;letter-spacing:.01em;font-size:1.06rem;color:var(--ink-2);font-style:italic;margin-top:.15em}
.flag{display:inline-block;margin-top:6px;font-family:var(--cond);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);padding:3px 8px 2px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.portrait{width:100%;aspect-ratio:4/5;max-width:440px;background:var(--bg-3);position:relative;border:1px solid var(--line);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait.ph::before{content:"";position:absolute;inset:14% 22% 0;background:#33302c;border-radius:48% 48% 0 0/30% 30% 0 0}
.portrait.ph span{position:absolute;left:14px;bottom:12px;font-family:var(--cond);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.bio{min-width:0}
.bio p{margin:0 0 1.1em;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.bio p:first-child{color:var(--ink);font-size:clamp(21px,1.9vw,26px);line-height:1.4}
@media (max-width:760px){.about{grid-template-columns:minmax(0,1fr)}.portraits{width:78%}}

/* film credit roll: a dark screen with classic stacked end-credit cards */
.roll-wrap{position:relative;background:#11100f;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.roll{position:relative;overflow:hidden;height:calc(100svh - 61px);min-height:480px;max-height:1100px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 72px,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 72px,#000 84%,transparent 100%)}
.roll-track{will-change:transform}
.roll-seq{padding:34vh 0 0;padding-top:34svh;text-align:center;display:flex;flex-direction:column;align-items:center}
.rcard,.rfilm{display:flex;flex-direction:column;align-items:center;max-width:640px;width:100%;padding:0 var(--gl) 26vh;padding-bottom:26svh}   /* svh: no jump when a phone's address bar folds */
.rcard .role,.rfilm .role{font-family:var(--sc);font-size:1.08rem;letter-spacing:.1em;color:var(--muted);line-height:1.2;margin-top:22px}
.rcard .role:first-child{margin-top:0}
.rfilm .nm{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;font-size:15px;color:var(--ink);margin-top:6px;padding-left:.26em}
.rfilm .rtitle{font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(30px,3.6vw,50px);line-height:1.05;padding-left:.22em;transition:color .4s}
.rfilm .rmeta{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.32em;font-size:11px;color:var(--muted);margin:12px 0 18px;padding-left:.32em}
.rfilm .rmeta::after{content:"";display:block;width:36px;height:1px;background:var(--line-3);margin:20px auto 0}
.rcard .big{font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(30px,3.6vw,50px);margin-top:10px;padding-left:.24em}
.rfilm{transition:opacity .5s}
@media (hover:hover){.roll:hover .rfilm{opacity:.38}.roll .rfilm:hover{opacity:1}}
.roll .rfilm:focus-visible{opacity:1}
.rfilm:hover .rtitle{color:#fff}
.rollctl{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;font-family:var(--cond);font-weight:300;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(17,16,15,.8);transition:color .3s,border-color .3s}
.rollctl:hover{color:var(--ink);border-color:var(--ink)}
.rollctl .ico{width:9px;height:11px;display:inline-flex;justify-content:space-between}
.rollctl .ico i{width:3px;height:100%;background:currentColor}
.rollctl.is-paused .ico{width:0;height:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.rollctl.is-paused .ico i{display:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .roll{height:auto;max-height:none;-webkit-mask-image:none;mask-image:none}
  .roll-seq{padding:80px 0 0}
  .roll-seq[aria-hidden="true"]{display:none}
  .rollctl{display:none}
}

/* scroll boxes (awards, premieres, works) */
.scrollbox{max-height:min(64vh,580px);overflow-y:auto;overscroll-behavior:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.scrollbox::-webkit-scrollbar{width:6px}
.scrollbox::-webkit-scrollbar-thumb{background:var(--line-3)}
.list > div{padding:18px 0;border-bottom:1px solid var(--line)}
.list > div:last-child{border-bottom:0}
.list dt b{display:block;color:var(--ink-2);font-weight:500;letter-spacing:.12em}

/* press quotes */
.press{display:grid;gap:clamp(40px,6vw,72px)}
.q{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--axis);align-items:baseline;transition:opacity .3s}
.q blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,27px);line-height:1.3;color:var(--ink);grid-column:2;grid-row:1}
.q figcaption{grid-column:1;grid-row:1;text-align:right;font-family:var(--sc);color:var(--muted);letter-spacing:.1em;font-size:1.02rem;padding-top:.3em}
.q:nth-child(even) blockquote{grid-column:1;text-align:right}
.q:nth-child(even) figcaption{grid-column:2;text-align:left}
.qa{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.qa:hover,.qa:focus-visible{color:#fff;border-bottom-color:var(--line-3)}
@media (max-width:600px){
  .q,.q:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .q blockquote,.q:nth-child(even) blockquote{grid-column:1;grid-row:1;text-align:left}
  .q figcaption,.q:nth-child(even) figcaption{grid-column:1;grid-row:2;text-align:left;padding-top:12px}
}

/* contemporary classical works: the title column is as wide as the longest title (site.js measures it, in title
   sizes: --tw), the player starts a small gap after it and runs up to Score sample and Request Score and Parts */
.works-head,.work{--tcol:min(calc(var(--tw,20.5) * clamp(16px,1.5vw,20px) + 70px),58%);display:grid;grid-template-columns:var(--tcol) minmax(0,1fr) repeat(2,120px);align-items:center;column-gap:8px}
@media (max-width:1024px){.works-head,.work{--tcol:min(calc(var(--tw,20.5) * clamp(16px,1.5vw,20px) + 70px),50%);grid-template-columns:var(--tcol) minmax(0,1fr) repeat(2,96px)}}
/* column labels: larger and brighter, the head row as tall as before */
.works-head{padding:0 0 12px;font-family:var(--cond);font-weight:400;font-size:12.5px;line-height:1.24;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.works-head span:first-child{text-align:left;padding-left:58px;font-size:15px;letter-spacing:.24em;color:var(--ink)}
.works-head span:nth-child(3){color:var(--ink)}
@media (max-width:1024px){.works-head{font-size:11.5px}.works-head span:first-child{font-size:14px}}
.work{position:relative;padding:18px 0;border-bottom:1px solid var(--line)}
.work:last-child{border-bottom:0}
.work .t{min-width:0;display:flex;align-items:center;gap:16px}
.work .tt{min-width:0;flex:1}
.work .t b{display:block;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(16px,1.5vw,20px);line-height:1.3}
.work .t span{display:block;font-style:italic;color:var(--ink-2);font-size:1.02rem}
.work .t small{font-family:var(--sc);color:var(--muted);letter-spacing:.08em;font-size:.95rem;font-style:normal}
.ib{justify-self:center;width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:border-color .3s,color .3s,background .3s}
.ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.ib:hover,.ib:focus-visible{border-color:var(--ink);color:var(--ink)}
.ib[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ib.off{opacity:.28;cursor:default;pointer-events:none}
.work .t .ib{flex:none}
@media (max-width:640px){
  .works-head{display:none}
  .work{display:flex;flex-wrap:wrap;gap:14px 10px}
  .work .t{flex:0 0 100%}
  .work > .pc{flex:0 0 calc(100% - 58px);margin-left:58px}
  .work > .pc .player[hidden]{display:none!important}
  .work > .pc:not(:has(.wrec,.player:not([hidden]))){display:none}
  .work > .pc + .ib{margin-left:58px}
}

/* current projects */
.halves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line-2)}
.half{padding:28px clamp(16px,3vw,44px) 8px 0;min-width:0}
.half + .half{padding-left:clamp(16px,3vw,44px);padding-right:0;border-left:1px solid var(--line-2)}
.half h3{margin:0 0 18px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.15rem;color:var(--muted)}
.half ul{list-style:none;margin:0;padding:0}
.half li{padding:12px 0;border-bottom:1px solid var(--line)}
.half li:last-child{border-bottom:0}
.half li b{display:block;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:1rem}
.half li span{font-style:italic;color:var(--ink-2)}
.halves.one{grid-template-columns:minmax(0,1fr)}
/* My Dog: photographs only, framed quietly in the middle of the page */
.dog{min-height:calc(100svh - 61px);display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,80px) calc(var(--gr) + 12px) clamp(40px,6vw,96px) calc(var(--gl) + 12px)}
.dog-ph{margin:0;padding:clamp(10px,1.1vw,16px);border:1px solid var(--line-2);background:rgba(232,226,214,.025)}
.dog-ph img{display:block;width:auto;height:auto;max-width:100%}
.dog.one .dog-ph img{max-height:calc(100svh - 61px - clamp(110px,15vw,230px))}   /* page padding and frame included: no scroll */
.dog.many{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start;max-width:1320px;margin:0 auto}
.dog.many .dog-ph img{width:100%}
.dog.many.odd .dog-ph:first-child{grid-column:1/-1}
.dog-ph.empty span{display:block;width:min(520px,calc(100vw - 2 * var(--gl) - 60px),calc((100svh - 61px - 190px) * .8));aspect-ratio:4/5;
  background:radial-gradient(ellipse at 50% 42%,rgba(232,226,214,.07),rgba(232,226,214,0) 70%);outline:1px solid var(--line);outline-offset:-1px}
@media (max-width:640px){.dog.many{grid-template-columns:minmax(0,1fr)}}

/* My Dog: the round logo, faint, behind the photo */
.dog{position:relative;overflow:hidden}
.dog-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dog-ph{position:relative;z-index:1}
@keyframes dog-in{from{opacity:0}}
.dog-logo{position:absolute;left:50%;top:50%;width:min(122vmin,1240px);height:auto;max-width:none;transform:translate(-50%,-50%);
  opacity:.15;animation:dog-in 2.4s ease both}
/* "Do you want to see my dog?": a small window over the blurred page, 20 s into a visit (site.js) */
.dog-pop{width:fit-content;height:fit-content;padding:0;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);
  overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.dog-pop::backdrop{background:rgba(14,13,12,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dog-pop[open]{animation:pop-in .55s cubic-bezier(.22,.7,.18,1)}
.dog-pop[open]::backdrop{animation:dog-in .55s ease}
@keyframes pop-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.dp-ask{width:min(380px,calc(100vw - 34px));padding:30px 28px 26px;text-align:center}
.dp-q{margin:0;text-wrap:balance;font-family:var(--sc);font-size:21px;line-height:1.3;letter-spacing:.04em}
.dp-btns{display:flex;justify-content:center;gap:12px;margin-top:22px}
.dp-b{min-width:92px;padding:10px 18px 9px;border:1px solid var(--line-3);border-radius:999px;background:none;color:var(--ink);cursor:pointer;
  font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;line-height:1.2;transition:background .3s,border-color .3s}
.dp-b:hover{background:rgba(232,226,214,.08);border-color:var(--ink-2)}
.dp-dog{padding:14px 14px 20px;animation:pop-in .55s cubic-bezier(.22,.7,.18,1)}
.dp-dog img{display:block;width:auto;height:auto;max-width:min(340px,calc(100vw - 62px));max-height:min(460px,calc(100svh - 150px));margin:0 auto}
.dp-dog .dp-btns{margin-top:18px}
@media (prefers-reduced-motion:reduce){.dog-pop[open],.dog-pop[open]::backdrop,.dp-dog{animation:none}}
@media (prefers-reduced-motion:reduce){.dog-logo{animation:none}}
.dir-page > section:first-of-type{padding-top:clamp(24px,3.5vw,52px)}
.halves.one .half{padding-right:0}
@media (max-width:640px){.halves{grid-template-columns:minmax(0,1fr)}.half + .half{padding-left:0;border-left:0;border-top:1px solid var(--line-2)}}

/* tutor */
.tutor{max-width:44rem}
.tutor p{margin:0 0 1em;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.tutor p:first-child{color:var(--ink)}
/* footer */
footer{margin-top:clamp(110px,14vw,200px);padding:48px 0 calc(48px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);text-align:center}
.socials{display:flex;justify-content:center;gap:18px}
.socials .ib{width:48px;height:48px}
.socials .ib svg{width:20px;height:20px}
footer .end{margin:26px 0 0;font-family:var(--cond);font-weight:300;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}

/* score-sample popover + dialog */
.pop{position:fixed;z-index:60;width:240px;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
.pop.on{opacity:1}
.pop svg,dialog svg{display:block;width:100%;height:auto}
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,620px);width:100%}
dialog::backdrop{background:rgba(10,9,8,.82)}
dialog .dl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 12px;color:var(--ink);font-family:var(--cond);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:12px}
dialog .dl-body{max-height:80vh;overflow:auto}

/* ---------- inner pages ---------- */
.page-head{margin-bottom:clamp(32px,4vw,52px)}
.page-head h1{margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(34px,5.4vw,72px);line-height:1.02;text-wrap:balance}
.page-head .sub{display:block;margin-top:12px;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.3em;font-size:12px;color:var(--muted)}
.page-head .credits{max-width:640px;margin-top:22px}
.page-head .credits dt{text-align:left}
.page-head .credits > div{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}

/* two-column detail layout: image left, text right; tops and bottoms aligned */
.detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;column-gap:clamp(20px,3vw,40px);row-gap:20px}
.detail .media{grid-column:1;grid-row:1/3;aspect-ratio:2/3;max-width:100%;background:var(--bg-3);border:1px solid var(--line);position:relative;overflow:hidden}
.detail .media img{width:100%;height:100%;object-fit:cover;display:block}
.detail .media .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vw,36px);background:linear-gradient(180deg,#2c2926,#201e1b 70%)}
.detail .media .ph b{font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(28px,3.4vw,48px);line-height:1}
.detail .media .ph span{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;font-size:10.5px;color:var(--dim)}
.detail .top{grid-column:2;grid-row:1;border:1px solid var(--line);padding:22px 24px;background:var(--bg-2)}
.detail .top p{margin:0;color:var(--ink-2);font-size:1.1rem}
.detail .mid{grid-column:2;grid-row:2;position:relative;min-height:220px}
.detail .mid .inner{position:absolute;inset:0;display:flex;flex-direction:column}
.detail .mid h2{margin:0 0 12px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.1rem;color:var(--muted)}
.detail .mid .scrollbox{flex:1;max-height:none}
.detail .lnk{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;border:1px solid var(--line-2);font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:var(--ink-2);transition:background .3s,color .3s;text-align:center;padding:10px}
.detail .lnk:hover{background:var(--ink);color:var(--bg)}
.detail .l1{grid-column:1;grid-row:3}
.detail .l2{grid-column:2;grid-row:3}
@media (max-width:760px){
  .detail{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .detail > *{grid-column:1 !important;grid-row:auto !important}
  .detail .media{aspect-ratio:3/4}
  .detail .mid{min-height:0}
  .detail .mid .inner{position:static}
}
.trk{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.trk:last-child{border-bottom:0}
.trk .ib{width:36px;height:36px}
.trk .ib svg{width:14px;height:14px}
.trk .n{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem}
.trk .d{font-family:var(--cond);font-size:12px;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.article p{margin:0 0 1.1em;color:var(--ink-2);font-size:1.12rem}
.article p:first-child{color:var(--ink)}
.article blockquote{margin:0 0 1.2em;font-style:italic;font-size:1.35rem;color:var(--ink);border-left:1px solid var(--line-3);padding-left:18px}
.ib .i-pause{display:none}
.ib[aria-pressed="true"] .i-play{display:none}
.ib[aria-pressed="true"] .i-pause{display:block}
.ib .i-play,.ib .i-pause{fill:currentColor;stroke:none}

/* ---------- site header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--bg)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(28,26,24,.97);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px}
.site-head .mark{font-family:var(--cond);font-weight:400;letter-spacing:.32em;text-transform:uppercase;font-size:13px}
/* one line each; the menu folds into the button below 1300px (eight items, two of them long) */
.site-head .mark,.site-nav > ul > li > a{white-space:nowrap}
.site-nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.site-nav li{position:relative}
.site-nav a{font-family:var(--cond);font-weight:300;letter-spacing:.19em;text-transform:uppercase;font-size:11.5px;color:var(--muted);transition:color .3s;display:inline-block;padding:20px 0}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav .sub{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-18px;min-width:250px;background:var(--bg-2);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
.site-nav li:hover > .sub,.site-nav li:focus-within > .sub{opacity:1;visibility:visible;transform:none}
.site-nav .sub a{display:block;padding:9px 18px;font-size:11px}
.nav-toggle{display:none;width:40px;height:40px;position:relative}
.nav-toggle span:not(.sr){position:absolute;left:10px;right:10px;height:1px;background:var(--ink);transition:transform .3s}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:23px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* folded (site.js: the headings don't fit on one line): the Menu button opens them as a list */
.site-head.fold .nav-toggle{display:block}
.site-head.fold .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100svh - 60px);overflow:auto;padding:8px var(--gr) 24px var(--gl)}
.site-head.fold .site-nav.open{display:block}
.site-head.fold .site-nav > ul{flex-direction:column;gap:0!important}
.site-head.fold .site-nav > ul > li{border-bottom:1px solid var(--line)}
.site-head.fold .site-nav a{padding:14px 0;font-size:12.5px}
.site-head.fold .site-nav .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;padding:0 0 10px 16px;min-width:0}
.site-head.fold .site-nav .sub a{padding:8px 0;font-size:11px}
.shead-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap}
.more-link{font-family:var(--cond);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:var(--muted);transition:color .3s;white-space:nowrap}
.more-link:hover{color:var(--ink)}
.back-link{display:inline-block;margin-top:26px;font-family:var(--cond);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:11.5px;color:var(--muted);transition:color .3s}
.back-link:hover{color:var(--ink)}
.page-head{padding-top:clamp(28px,4vw,56px)}
.pout{font-family:var(--cond);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:.9rem;color:var(--ink)}

/* film & media index */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.fcard{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:start;padding-bottom:clamp(28px,4vw,56px);border-bottom:1px solid var(--line)}
.fposter{aspect-ratio:2/3;max-width:100%;background:var(--bg-3);border:1px solid var(--line);position:relative;overflow:hidden;display:block}
.fposter img{width:100%;height:100%;object-fit:cover;display:block}
.fposter .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:linear-gradient(180deg,#2c2926,#201e1b 70%)}
.fposter .ph b{font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(20px,2vw,28px);line-height:1}
.fposter .ph span{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;font-size:10px;color:var(--dim)}
.ftext{display:flex;flex-direction:column;min-width:0}
.ftext .rtitle{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(22px,2.2vw,30px);line-height:1.1;transition:color .3s}
.ftext .rmeta{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.28em;font-size:10.5px;color:var(--muted);margin:8px 0 14px}
.ftext .role{font-family:var(--sc);font-size:.98rem;letter-spacing:.08em;color:var(--muted);margin-top:10px;line-height:1.2}
.ftext .nm{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.22em;font-size:13px;margin-top:3px}
.ftext .more{margin-top:18px;font-family:var(--cond);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.fcard:hover .rtitle{color:#fff}.fcard:hover .more{color:var(--ink)}
@media (max-width:900px){.fgrid{grid-template-columns:minmax(0,1fr)}.fcard{grid-template-columns:minmax(0,220px) minmax(0,1fr)}}
@media (max-width:480px){.fcard{grid-template-columns:minmax(0,1fr)}.fposter{width:70%}}

/* press index */
.plist{display:grid;border-top:1px solid var(--line-2)}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--axis);row-gap:6px;padding:28px 0;border-bottom:1px solid var(--line)}
.pcard .pout{grid-row:1/4;font-size:1rem}
.pcard .phead{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(18px,1.8vw,24px);transition:color .3s}
.pcard .pq{font-style:italic;font-size:1.2rem;color:var(--ink-2)}
.pcard .pmeta{font-family:var(--sc);color:var(--muted);letter-spacing:.06em}
.pcard:hover .phead{color:#fff}
@media (max-width:600px){.pcard{grid-template-columns:minmax(0,1fr)}.pcard .pout{grid-row:auto}}

/* intro under a section title */
.intro{max-width:46rem;margin:0 0 clamp(36px,4.5vw,56px)}
.intro p{margin:0 0 1em;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.intro p:first-child{color:var(--ink)}

/* film works preview on the home page */
.film-preview{padding-top:clamp(56px,7vw,96px);position:relative}
.film-preview .fgrid.faded{margin-top:clamp(28px,4vw,56px);max-height:240px;overflow:hidden;filter:blur(2.5px);opacity:.6;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 92%);mask-image:linear-gradient(to bottom,#000 0,transparent 92%)}
.view-all{display:table;margin:-56px auto 0;position:relative;z-index:1;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.32em;font-size:13px;color:var(--ink);padding:10px 2px 8px;border-bottom:1px solid var(--line-3);transition:border-color .3s,letter-spacing .4s}
.view-all:hover,.view-all:focus-visible{border-color:var(--ink);letter-spacing:.36em}
@media (max-width:900px){.film-preview .fgrid.faded .fcard:nth-child(2){display:none}}

/* tutor & contact forms */
.tutor-grid,.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tutor-form h3{margin:0 0 6px;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:15px;color:var(--ink)}
.tutor-form .lead{margin:0 0 22px;font-style:italic;color:var(--muted);font-size:1.02rem}
@media (max-width:860px){.tutor-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}}
.tutor-form,.contact-form{background:var(--bg-2);border:1px solid var(--line-2);padding:clamp(20px,3vw,36px)}
.msg-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 18px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-family:var(--sc);font-size:1.02rem;letter-spacing:.06em;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--serif);font-size:1.08rem;line-height:1.4;color:var(--ink);background:rgba(232,226,214,.035);border:1px solid var(--line-2);border-radius:3px;padding:11px 14px;transition:border-color .25s,background .25s}
.fld input::placeholder,.fld textarea::placeholder{color:var(--dim);font-style:italic}
.fld select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld textarea{resize:vertical;min-height:130px}
.fld select option{background:var(--bg-2);color:var(--ink)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--line-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);background:rgba(232,226,214,.06)}
.fld .bad{border-color:#c4927f}
.send-row{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.send{font-family:var(--cond);font-weight:400;text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;color:var(--bg);background:var(--ink);border:1px solid var(--ink);border-radius:3px;padding:15px 34px;transition:background .25s,color .25s}
.send:hover,.send:focus-visible{background:transparent;color:var(--ink)}
.send[disabled]{opacity:.5;cursor:default}
.form-status{margin:0;font-style:italic;color:var(--ink-2);font-size:1rem;flex:1;min-width:200px}
@media (max-width:520px){.msg-form{grid-template-columns:minmax(0,1fr)}.send{width:100%}}
.contact-list > div{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
.contact-list dt{text-align:left}
.socials.left{justify-content:flex-start;margin-top:32px}

/* short / long bio switch. About page: the switch lines up with the portrait's top edge and stays put; only the text
   changes, inside a window as tall as the portrait (it scrolls when the long bio is longer) */
.bio-switch{display:flex;gap:28px;margin:0 0 24px}
.about.full{align-items:start}
.about.full .bio{align-self:stretch;display:flex;flex-direction:column;height:0;min-height:100%}
.about.full .bio-switch{flex:none;margin:-4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--line)}
.bio-view{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 14px 0 0;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.bio-view::-webkit-scrollbar{width:6px}
.bio-view::-webkit-scrollbar-thumb{background:var(--line-3)}
.bio-view .bio-text > :first-child{margin-top:0}
.bio-text{transition:opacity .3s ease}
.bio-text.fading{opacity:0}
@media (max-width:760px){.about.full .bio{height:auto;min-height:0}.bio-view{overflow:visible;padding-right:0}}
.bio-switch button{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;font-size:12px;color:var(--dim);padding:4px 0;transition:color .5s,opacity .5s;opacity:.7}
.bio-switch button:hover{color:var(--ink-2);opacity:1}
.bio-switch button[aria-selected="true"]{color:var(--ink);opacity:1}
@media (prefers-reduced-motion:reduce){.bio-text{transition:none}}

/* film and press pages: a narrower, centred composition with room under the header */
.wrap.narrow{max-width:1140px}
.narrow .page-head{padding-top:clamp(40px,6vw,88px);margin-bottom:clamp(40px,5vw,64px)}
.narrow .detail{margin-bottom:clamp(48px,7vw,96px)}
.detail .top h2{margin:0 0 8px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.05rem;color:var(--muted)}
.detail .top p + h2{margin-top:18px}

/* fixed-height lists under their headings: they scroll under the cursor (then the page goes on); the column
   labels stay at the top of the box */
.scrollbox.listbox{position:relative;padding-right:12px}
.scrollbox.listbox .works-head{position:sticky;top:0;z-index:2;padding:14px 0 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.scrollbox.listbox:focus-visible{outline:1px solid var(--line-3);outline-offset:4px}
.works{list-style:none;margin:0;padding:0}

/* inline audio player */
.player{display:flex;align-items:center;gap:12px;margin-top:12px;max-width:520px}
.trk .player{grid-column:1/-1;max-width:none;margin-top:4px}
.pt{font-family:var(--cond);font-weight:300;font-size:12px;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px}
.pt.now{color:var(--ink);text-align:right}
.seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer;--pct:0%}
.seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--ink) var(--pct),var(--line-2) var(--pct))}
.seek::-moz-range-track{height:3px;border-radius:3px;background:var(--line-2)}
.seek::-moz-range-progress{height:3px;border-radius:3px;background:var(--ink)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--ink);margin-top:-5px;transition:transform .15s}
.seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--ink)}
.seek:hover::-webkit-slider-thumb,.seek:focus-visible::-webkit-slider-thumb{transform:scale(1.25)}
.seek:focus-visible{outline:none}
.seek:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(232,226,214,.15)}
.work.playing .tt b,.trk.playing .n{color:#fff}

/* graphic score caption */
.legend .sketch{font-family:var(--sc);text-transform:none;letter-spacing:.08em;font-size:1rem;color:var(--ink-2);padding-right:24px;border-right:1px solid var(--line-2)}
.legend .sketch i{font-family:var(--serif);font-style:italic;letter-spacing:.02em;color:var(--muted);margin-left:8px;font-size:.95rem}
@media (max-width:600px){.legend .sketch{border-right:0;padding-right:0;flex-basis:100%}}

/* audit fixes */
.lnk.off{color:var(--dim);border-style:dashed;cursor:default}
.lnk.off:hover{background:none;color:var(--dim)}
.pop img,dialog .dl-body img{display:block;width:100%;height:auto;background:#f2eee6}
@media (max-width:600px){.page-head .credits > div{grid-template-columns:minmax(0,1fr)}.page-head .credits dd{margin-bottom:6px}}
@media (max-width:760px){.detail .mid .scrollbox{max-height:none;overflow:visible}}

/* hero logo: large and faint, half off the left edge behind the name */
.hero-mark{--m:clamp(306px,36vw,594px);position:absolute;z-index:-1;width:var(--m);max-width:none;height:var(--m);left:calc(-1 * (var(--gl) + 12px) - var(--m) * .3);top:50%;transform:translateY(-50%);
  opacity:.085;pointer-events:none}

/* player inside the works row, between the title and Score sample */
.work .player{margin:0;max-width:none;min-width:0}
.work .player[hidden]{display:flex!important;visibility:hidden}

/* portrait switcher */
.portraits{position:relative;width:100%;max-width:440px;aspect-ratio:4/5}
.portraits .portrait{position:absolute;inset:0;width:100%;max-width:none;aspect-ratio:auto;opacity:0;transition:opacity .6s ease}
.portraits .portrait.is-on{opacity:1}
.portrait.ph2{background:#2e2a26}.portrait.ph2::before{inset:20% 34% 0 12%;background:#383430}
.portrait.ph3{background:#25221f}.portrait.ph3::before{inset:10% 10% 0 30%;background:#2f2b28}
.pv{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:64px;display:grid;place-items:center;color:var(--ink);opacity:.5;transition:opacity .3s}
.pv svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.2}
.pv:hover,.pv:focus-visible{opacity:1}
.pv.prev{left:4px}.pv.next{right:4px}
.pcount{position:absolute;z-index:2;right:14px;bottom:12px;font-family:var(--cond);font-weight:300;font-size:10.5px;letter-spacing:.22em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.portraits .portrait{transition:none}}

/* email fallback inside a framed preview */
.mail-toast{position:fixed;z-index:70;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;background:var(--bg-2);border:1px solid var(--line-3);box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:1rem;color:var(--ink-2)}
.mail-toast b{font-family:var(--cond);font-weight:300;letter-spacing:.12em;color:var(--ink);user-select:all}
.mail-toast button{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--ink);border:1px solid var(--line-3);padding:7px 12px}
.mail-toast button:hover{background:var(--ink);color:var(--bg)}

/* header: a compact way back to the opening page */
.site-nav .choose a{display:inline-flex;align-items:center;gap:7px;padding-left:16px;border-left:1px solid var(--line-2);color:var(--dim);font-size:10.5px}
.site-nav .choose a:hover{color:var(--ink)}
.site-nav .choose svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}


/* credits: a slim scrollbar with a draggable thumb (the wheel always scrolls the page) */
.roll-bar{position:absolute;z-index:3;top:28px;bottom:76px;right:max(18px,env(safe-area-inset-right,0px));width:24px;cursor:pointer;touch-action:none}
.roll-bar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-2)}
.roll-thumb{position:absolute;top:0;left:50%;width:7px;height:72px;margin-left:-3.5px;border-radius:4px;background:var(--line-3);transition:background .25s,width .25s,margin .25s;cursor:grab}
.roll-bar:hover .roll-thumb,.roll-bar.drag .roll-thumb,.roll-thumb:focus-visible{background:var(--ink);width:9px;margin-left:-4.5px}
.roll-bar.drag .roll-thumb{cursor:grabbing}
.roll-thumb:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.roll-bar{display:none}}

/* Credits: a more prominent scrollbar — a film "timeline" rail with a mark per film,
   a larger thumb with a grip, and a label showing the film currently on screen. */
.roll-bar{width:56px;right:max(10px,env(safe-area-inset-right,0px));top:40px;bottom:84px}
.roll-bar::before{width:3px;margin-left:-1.5px;background:rgba(232,226,214,.16);border-radius:3px}
.roll-thumb{width:18px;height:64px;margin-left:-9px;border-radius:10px;background:rgba(232,226,214,.78);box-shadow:0 0 0 1px rgba(17,16,15,.6),0 6px 18px rgba(0,0,0,.45);
  display:grid;place-items:center}
.roll-thumb::before{content:"";width:8px;height:14px;background:repeating-linear-gradient(to bottom,rgba(17,16,15,.7) 0 1px,transparent 1px 4px)}
.roll-bar:hover .roll-thumb,.roll-bar.drag .roll-thumb,.roll-thumb:focus-visible{width:20px;margin-left:-10px;background:var(--ink)}
.tick{position:absolute;left:50%;width:14px;height:1px;margin-left:-7px;background:rgba(232,226,214,.55);cursor:pointer}
.tick span{position:absolute;right:22px;top:-8px;white-space:nowrap;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--muted);
  opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.roll-bar:hover .tick span,.roll-bar.drag .tick span{opacity:.85;transform:none}
.now-film{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 10px 5px;border:1px solid var(--line-3);border-radius:999px;background:rgba(17,16,15,.85);
  font-family:var(--cond);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--ink);pointer-events:none}
.roll-bar:hover .now-film,.roll-bar.drag .now-film{opacity:0}
.bar-cap{position:absolute;z-index:3;right:max(14px,env(safe-area-inset-right,0px));bottom:52px;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:10px;color:var(--dim)}
@media (max-width:600px){.tick span{display:none}.now-film{font-size:9.5px;letter-spacing:.14em}}
/* a prominent Choose Direction button in the header */
.site-head .wrap{gap:18px}
.choose-btn{order:3;display:inline-flex;align-items:center;gap:10px;flex:none;padding:9px 16px 8px;border:1px solid var(--ink);border-radius:999px;
  font-family:var(--cond);font-weight:400;text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--ink);background:rgba(232,226,214,.06);transition:background .3s,color .3s}
.choose-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.choose-btn:hover,.choose-btn:focus-visible{background:var(--ink);color:var(--bg)}
.site-nav{order:2;margin-left:auto}
.nav-toggle{order:4}
.site-head.fold .choose-btn{margin-left:auto;padding:8px 12px 7px}
.site-head.fold .site-nav{margin-left:0}
@media (max-width:420px){.choose-btn span{display:none}.choose-btn{padding:8px}}

/* the optional line about a work: commissioned by, composed for, prize */
.work .t .wcredit{font-family:var(--sc);font-style:normal;color:var(--muted);font-size:.95rem;letter-spacing:.04em;margin-top:2px}
.work .t .wprem{font-family:var(--cond);font-weight:300;font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--dim);margin-top:5px}

/* Classical page: the full list of works, by genre, in the same columns as the Featured list (the score icons follow
   the score's state) */
#catalogue .cat + .cat{margin-top:clamp(36px,4vw,56px)}
.cat-h{margin:0;padding:0 0 12px;border-bottom:1px solid var(--line-2);font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.15rem;color:var(--muted)}
.ib-gap{flex:none;width:42px;height:42px}
.ib.soft{filter:blur(1.5px);opacity:.45;cursor:default;pointer-events:none}

/* a recording that can't be played here: a link to it instead */
.play-out{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--ink-2);border-bottom:1px solid var(--line-3);white-space:nowrap}
.play-out:hover{color:var(--ink)}

/* footer: support the composer's practice */
.donate{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 34px}
.don-t{font-family:var(--sc);font-size:1.05rem;letter-spacing:.06em;color:var(--ink-2)}
.don-b{display:inline-flex;align-items:center;padding:11px 28px 10px;border:1px solid var(--line-3);border-radius:999px;font-family:var(--cond);font-weight:300;
  text-transform:uppercase;letter-spacing:.28em;font-size:11.5px;color:var(--ink);transition:background .3s,border-color .3s}
.don-b:hover,.don-b:focus-visible{background:rgba(232,226,214,.08);border-color:var(--ink-2)}
.credits dd .wcredit{font-style:normal;font-family:var(--sc);letter-spacing:.04em;color:var(--muted)}
.score-none{margin:0;padding:clamp(60px,12vh,140px) 24px;text-align:center;font-style:italic;color:var(--muted)}

/* ---- film pages (2026-11-03) ---- */
/* Film & Media page: the intro between the page title and Film Credits (no text, no block) */
.film-intro{margin-bottom:clamp(48px,6vw,80px)}
.film-intro:empty{display:none}
.film-intro.ed-host{min-height:44px}
/* film page, under the poster and its links: festivals & premieres (none, no block) */
.detail .fest{grid-column:1;grid-row:4;padding-top:10px}
.fest h2{margin:0 0 4px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.1rem;color:var(--muted)}
.fest ul{list-style:none;margin:0;padding:0}
.fest li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.fest li:last-child{border-bottom:0}
.fest b{grid-column:1;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.fest span{grid-column:2;grid-row:1;max-width:12em;text-align:right;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;line-height:1.6;color:var(--muted)}
.fest i{grid-column:1/-1;margin-top:3px;font-size:1.06rem;line-height:1.4;color:var(--ink-2)}
/* ---- press (2026-11-03) ---- */
/* Press page: groups under sub-headings (Articles & Reviews, Interviews & Profiles, News & Announcements) */
.pgroup + .pgroup{margin-top:clamp(48px,6vw,84px)}
.pgroup-h{margin:0;padding:0 0 14px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:clamp(1.2rem,1.6vw,1.45rem);color:var(--muted)}
/* each card: the publication with its date under it, then the headline, quote (articles only) and byline */
.pcard{row-gap:0}
.pcard .pwho{grid-row:1/4;display:flex;flex-direction:column;gap:6px;min-width:0}
.pcard .pq,.pcard .pmeta{margin-top:6px}
.pdate{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:var(--muted)}
.pcard .pgo{font-size:.75em;color:var(--muted);transition:color .3s}
.pcard:hover .pgo{color:#fff}
div.pcard:hover .phead{color:inherit}
@media (max-width:600px){.pcard .pwho{grid-row:auto;margin-bottom:6px}}
/* article page: the date on its own line under the publication */
.detail .top .pdate{display:inline-block;margin:6px 0 4px}
/* ---- classical page (2026-11-03) ---- */
/* works rows: the player (and the line naming the recorded performance) between the title column and the score icons */
.work > .pc{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.work .pc .player{width:100%}
.wrec{display:block;white-space:nowrap;overflow:hidden;font-family:var(--sc);font-size:.92rem;letter-spacing:.04em;line-height:1.3;color:var(--dim);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
/* a recording on a page elsewhere (SoundCloud…): a link button in Play's place */
.ib.ext svg{width:17px;height:17px}
/* the lines under a title stay on one line inside the title column: a longer one fades out at the column's edge and,
   while the cursor is on the work (or it has keyboard focus), flows leftwards in a loop (site.js) */
.work .t .wcredit,.work .t .wprem{white-space:nowrap;overflow:hidden}
.work .t .ovf{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.work .t .ovf.flow{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 44px),transparent)}
.work .t .mq,.work .t .mq span{display:inline-block;font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.work .t .mq{transition:opacity .3s ease}
.work .t .mq.out{opacity:0}
.work .t .mq span + span{margin-left:3.5em}

/* ---- composer's edits (2026-11-04) ---- */
/* arriving at a section of another page: hidden until it has landed there, then it fades in (site.js) */
html.arrive body{opacity:0;animation:arrive-anyway .35s ease 1.6s forwards}   /* shown anyway if the script never runs */
@keyframes arrive-anyway{to{opacity:1}}
html.arrived body{transition:opacity .35s ease}
/* the menu bar on wide screens: no name on the left (Home is there); Home sits where site.js puts it (--nav-x), the other
   headings follow at up to twice the old spacing, Choose Direction at the right edge */
.site-head.wide .wrap{max-width:none}
.site-head.wide .mark{display:none}
.site-head.wide .site-nav{margin-left:var(--nav-x,auto)}
.site-head.wide .choose-btn{margin-left:auto}
/* sections that open under their heading: the heading (with its rule) is the button */
.fold-sec{padding-top:clamp(44px,5vw,72px)}
.fold-sec + .fold-sec{padding-top:clamp(28px,3vw,44px)}
.fold-sec .shead{margin-bottom:0;transition:margin .45s ease}
.fold-sec.open .shead{margin-bottom:clamp(28px,3.2vw,44px)}
.fold-sec .shead-row > h2{flex:1;min-width:0}
.fold-btn{display:flex;align-items:center;gap:18px;width:100%;text-align:left;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.fold-btn span{flex:0 1 auto}
.fold-ico{position:relative;flex:none;width:clamp(16px,1.4vw,20px);height:clamp(16px,1.4vw,20px);margin-left:auto;opacity:.6;transition:opacity .3s,transform .45s ease}
.fold-ico::before,.fold-ico::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.fold-ico::after{transform:rotate(90deg);transition:transform .45s ease}
.fold-btn:hover .fold-ico,.fold-btn:focus-visible .fold-ico{opacity:1}
.fold-sec.open > .wrap > .shead .fold-ico::after,.cat.open > .cat-h .fold-ico::after{transform:rotate(0)}
.fold-body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),visibility 0s linear .5s}
.fold-sec.open > .wrap > .fold-body,.cat.open > .fold-body{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.3,.7,.2,1),visibility 0s}
.fold-in{min-height:0;overflow:hidden}
.fold-now .fold-body,.fold-now .shead,.fold-now .fold-ico,.fold-now .fold-ico::after{transition:none!important}
@media (prefers-reduced-motion:reduce){.fold-body,.fold-sec .shead{transition:none!important}}
.fold-sec .credits.list > div:first-child{padding-top:0}
.fold-sec .halves{border-top:0}
.fold-sec .halves .half{padding-top:0}
/* Full List of Works: the column labels close under the title, then the genres, each opening on its own */
#catalogue .cat + .cat{margin-top:0}
#catalogue .cat-head{padding:0 0 12px;margin:0;border-bottom:1px solid var(--line)}
#catalogue .cat-h{padding:0;border-bottom:1px solid var(--line-2)}
#catalogue .cat-h .fold-btn{padding:20px 0 14px;font-family:var(--sc);font-weight:500;letter-spacing:.1em;font-size:1.15rem;color:var(--muted);text-transform:none;transition:color .3s}
#catalogue .cat-h .fold-btn:hover,#catalogue .cat.open .cat-h .fold-btn{color:var(--ink)}
#catalogue .cat-h .fold-ico{width:14px;height:14px}
/* column labels: one style for all of them */
.works-head span,.works-head span:first-child,.works-head span:nth-child(3){font-family:var(--cond);font-weight:400;font-size:12.5px;letter-spacing:.2em;color:var(--ink-2)}
@media (max-width:1024px){.works-head span,.works-head span:first-child{font-size:11.5px}}
/* the lines under a work's title: one line each; a longer one fades at the column's edge and, under the cursor, they
   all flow together as one block (site.js) */
.work .tt > span.ln{white-space:nowrap;overflow:hidden}
.work .tt > span.ln.ovf{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.work .tt.flow > span.ln.ovf{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 44px),transparent)}
.work .tt .mq,.work .tt .mq > span{display:inline-block;font:inherit;color:inherit;letter-spacing:inherit;margin:0;white-space:nowrap}
.work .tt .mq{transition:opacity .3s ease}
.work .tt .mq.out{opacity:0}
.work .t .mq span + span{margin-left:0}
/* score sample: the page on hover a little larger, above the icon; the full page larger, wider still for a landscape score */
.pop{width:264px}
dialog{max-width:min(92vw,682px)}
dialog.wide{max-width:min(96vw,930px)}
dialog .dl-head{font-size:13.2px}
/* footer: the contacts (set in the editor) on every page, above Send a message and the icons */
.fc-h{margin:0 0 clamp(28px,3.5vw,44px);font-family:var(--cond);font-weight:200;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(28px,4.2vw,54px);line-height:1.05}
.fcontacts{display:flex;justify-content:center;max-width:1040px;margin:0 auto;border-top:1px solid var(--line-2)}   /* one, two or three: centred */
.fc{flex:1 1 0;max-width:347px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px 30px;min-width:0}
.fc + .fc{border-left:1px solid var(--line)}
.fc-k{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:var(--muted)}
.fc-v{font-family:var(--sc);font-size:clamp(18px,1.5vw,21px);letter-spacing:.04em;overflow-wrap:anywhere}
.fc-n{font-style:italic;color:var(--ink-2);overflow-wrap:anywhere}
.fc a{border-bottom:1px solid var(--line-2);transition:border-color .3s}
.fc-v a{font-family:var(--serif);letter-spacing:.02em}   /* an address reads plainly, not in small caps */
.fc a:hover,.fc a:focus-visible{border-color:var(--ink-2)}
.fc-form{display:inline-flex;align-items:center;gap:12px;margin:clamp(22px,3vw,34px) 0 clamp(34px,4vw,48px);padding:10px 0;
  font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;font-size:12px;color:var(--ink-2);transition:color .3s}
.fc-form:hover,.fc-form:focus-visible{color:var(--ink)}
@media (max-width:760px){
  .fcontacts{flex-direction:column;align-items:center}
  .fc{width:100%;max-width:none}
  .fc + .fc{border-left:0;border-top:1px solid var(--line)}
}

.socials .ib svg{width:20px;height:20px}
/* Contact page: Donate — why it matters and how to give */
.give .give-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.give-text{max-width:44rem}
.give-text p{margin:0 0 1em;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.give-text p:first-child{color:var(--ink)}
.give-act{display:flex;justify-content:center}
.don-go{display:inline-flex;align-items:center;justify-content:center;min-width:220px;padding:17px 40px 16px;border:1px solid var(--ink);border-radius:999px;font-family:var(--cond);font-weight:400;
  text-transform:uppercase;letter-spacing:.3em;font-size:13px;color:var(--bg);background:var(--ink);transition:background .3s,color .3s}
.don-go:hover,.don-go:focus-visible{background:transparent;color:var(--ink)}
@media (max-width:760px){.give .give-grid{grid-template-columns:minmax(0,1fr)}.give-act{justify-content:flex-start}}
/* My Dog: treats under the photo — bones drop into a little cart when the button is pointed at */
.dog{flex-direction:column;gap:clamp(22px,3vw,36px)}
.dog.many{display:grid}
.dog.one .dog-ph img{max-height:calc(100svh - 61px - clamp(110px,15vw,230px) - 132px)}   /* room for the treats: still no scroll */
.dog{padding-top:clamp(22px,3.5vw,56px);padding-bottom:clamp(26px,4vw,60px)}
.treats{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:30rem;text-align:center;grid-column:1/-1;justify-self:center}
.treats-text p{margin:0;font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--ink-2);text-wrap:balance}
.treat-b{display:inline-flex;align-items:center;gap:14px;padding:11px 24px 10px 18px;border:1px solid var(--line-3);border-radius:999px;font-family:var(--cond);font-weight:300;
  text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;color:var(--ink);background:rgba(28,26,24,.6);transition:background .3s,border-color .3s}
.treat-b:hover,.treat-b:focus-visible{background:rgba(232,226,214,.08);border-color:var(--ink-2)}
.treat-b svg{width:34px;height:26px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.treat-b .c-bone circle{fill:currentColor;stroke:none}
.treat-b .c-bone{transform:translateY(-7px);opacity:0;transition:transform .5s cubic-bezier(.5,0,.3,1.4),opacity .25s}
.treat-b:hover .c-bone,.treat-b:focus-visible .c-bone{transform:translateY(5px);opacity:1}
.treat-b:hover .c-bone.b2,.treat-b:focus-visible .c-bone.b2{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.treat-b .c-bone{transition:none}}
/* SoundCloud's player, kept out of sight: the page's own Play button and bar drive it */
.sc-frame{position:fixed;left:-20px;bottom:0;width:10px;height:10px;border:0;opacity:0;pointer-events:none}

/* ---- film pages (2026-11-04) ---- */
/* "Forthcoming" in a box, as in Premieres & Performances, in place of the year (no dot before it) */
.rmeta .flag,.page-head .sub .flag,.ph .flag{margin:0 0 0 .8em;padding:3px 8px 2px;vertical-align:1px;line-height:1.3;font-size:10px;letter-spacing:.28em;color:var(--ink)}
.rmeta .flag:first-child,.page-head .sub .flag:first-child,.ph .flag:first-child{margin-left:0}
/* film page buttons: a greyed, unclickable one ("Film link unavailable at this time", "Soundtrack album coming soon");
   the link to watch the film or its trailer under the poster's button, then the festivals */
.detail .lnk.off,.detail .lnk.off:hover{border-style:solid;opacity:.5;background:none;color:var(--ink-2);cursor:default}
.detail .l3{grid-column:1;grid-row:4}
.detail .l3 ~ .fest{grid-row:5}
.fest i + i{margin-top:1px}
/* track list: the row keeps one height; Play puts the player where the title was, and the title moves up, smaller,
   between the row's top and the bar. The length stays on the right (the player shows the time played only). */
.trk{height:62px;padding:0}
.trk .ib-gap{width:36px;height:36px}
.trk .n{grid-column:2;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:0 50%;transition:transform .35s ease,color .3s}
.trk .player{grid-column:2;grid-row:1;align-self:end;margin:0 0 5px;max-width:none;height:22px;gap:10px;transition:opacity .35s ease}
.trk .player[hidden]{display:flex!important;visibility:hidden;opacity:0;pointer-events:none}
.trk .player .pt:last-child{display:none}
.trk .player .pt.now{min-width:34px;text-align:left}
.trk.playing .n{transform:translateY(-15px) scale(.74)}
.trk .player .play-out{font-size:10.5px}
@media (prefers-reduced-motion:reduce){.trk .n,.trk .player{transition:none}}
/* Film & Media page, below Current Projects: tracks in the rows of the Featured Works list, no score icons */
.ftracks.is-empty{display:none}
.ftrack-list .work{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
.ftrack-list .work .t span{font-family:var(--sc);font-style:normal;color:var(--muted);letter-spacing:.05em;font-size:.98rem}
/* the page for an address that doesn't exist */
.lost{margin:0;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
.lost a{color:var(--ink);border-bottom:1px solid var(--line-3)}
/* a page whose title is also its section's heading (Tutor & Educator): the rule right under the title, the content
   straight after it */
.page-head.ruled{padding-bottom:18px;border-bottom:1px solid var(--line-2);margin-bottom:clamp(36px,4.5vw,60px)}
section.under-title{padding-top:0}
/* SoundCloud's own small player, shown in the row when the browser won't let the page's Play start it (site.js) */
.player .sc-frame{position:absolute;left:0;top:0;width:2px;height:2px}
.sc-manual .player{position:relative}
.sc-manual .player > :not(.sc-frame){display:none}
.sc-manual .player .sc-frame{position:static;flex:1;width:100%;min-width:200px;height:20px;opacity:1;pointer-events:auto;border:0;color-scheme:light}