/* Off-white page; the muted grey is the lightest that still meets WCAG AA (4.5:1) on it. */
:root { --ink:#3a3a41; --heading:#27292b; --rule:#d2d7d9; --entry-rule:#b3b9bc; --accent:#790000; --surface:#fafaf8; --muted:#727279; --divider:#a8aaac; --focus:#8a5c9e; --body:'Manrope',Arial,sans-serif; --display:'Lora',Georgia,serif; color-scheme:light dark; }
/* The research page follows the system theme; the music page is always dark. */
@media (prefers-color-scheme:dark) {
  :root { --ink:#c4c6ca; --heading:#eceef0; --rule:#ffffff1f; --entry-rule:#ffffff40; --accent:#ef8f86; --surface:#16171a; --muted:#8b8d93; --divider:#5d6066; --focus:#b996cb; }
}
html:has(body[data-mode=art]),html:has(body:not([data-mode]) :is(#art,#albums,#compositions,#performances):target),html:has(.art-cover) { color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; background:var(--surface); color:var(--ink); font-family:var(--body); font-size:15px; font-weight:400; line-height:1.55; }
button { font:inherit; cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
a:focus-visible,button:focus-visible { outline:2px solid var(--focus); outline-offset:5px; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p,figure { margin:0; }
h1,h2 { font-family:var(--display); font-weight:400; color:var(--heading); }
h1 { font-size:31px; line-height:1.3; letter-spacing:-.7px; }
h2 { font-size:24px; line-height:1.3; letter-spacing:-.4px; }
h3 { font-size:16px; font-weight:600; line-height:1.35; }
h4 { font-size:15px; font-weight:600; margin:18px 0 10px; }
strong,b { color:var(--heading); font-weight:600; }
[hidden] { display:none!important; }
/* Without JavaScript (no data-mode yet), the address picks the view: music sections show the music page. */
body:not([data-mode]):not(:has(#art:target,#albums:target,#compositions:target,#performances:target)) :is(#art,#art-panel) { display:none; }
body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target) :is(#intro,#research-panel) { display:none; }
body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target) .mode-link[data-mode=research]:not(:hover,:focus-visible) { opacity:.6; }
body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target) .mode-link[data-mode=research]::after { transform:scaleX(0); }
body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target) .mode-link[data-mode=art] { opacity:1; }
body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target) .mode-link[data-mode=art]::after { transform:scaleX(1); }
.art-portrait-static { display:block; width:100%; height:100%; object-fit:contain; }
#art { scroll-margin-top:100vh; } /* Opening #art lands at the top of the page, header included. */
.page-shell { max-width:884px; margin:24px auto 0; padding:0 68px 0 56px; }
.site-header { display:flex; align-items:baseline; padding-bottom:23px; border-bottom:1px solid var(--rule); }
/* Everything shares one baseline; the mode switch is centred in the space between the name and the icons. */
.name-row { flex:1; display:flex; align-items:baseline; }
.name-row h1 { font-size:27px; letter-spacing:-.6px; white-space:nowrap; }
.mode-nav { margin:0 auto; padding:0 24px; display:flex; align-items:baseline; gap:10px; flex-shrink:0; font-family:var(--display); font-size:22px; font-style:italic; letter-spacing:-.3px; }
.mode-link { position:relative; display:inline-block; padding:10px 0; line-height:24px; color:var(--heading); opacity:.6; }
.mode-link::after { content:""; position:absolute; left:0; right:0; bottom:7px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.mode-link[aria-current=page],.mode-link:hover,.mode-link:focus-visible { opacity:1; color:var(--heading); }
.mode-link[aria-current=page]::after { transform:scaleX(1); }
.mode-divider { font-weight:400; opacity:.3; }
.contact-links { display:flex; align-items:baseline; gap:15px; font-size:18px; }
.contact-links a:not(:hover) { color:var(--heading); }
/* No divider below the intro, so the research section follows at a normal gap rather than a divider's worth. */
.intro { display:grid; grid-template-columns:171px minmax(0,1fr); gap:31px; align-items:center; padding:34px 0 0; }
.intro-copy { min-width:0; }
.intro-copy h2 { margin-bottom:19px; }
.intro-copy p+p { margin-top:21px; }
.text-link,.underline { text-decoration:underline; text-underline-offset:3px; }
/* The portrait spans the intro text from its cap height to its last baseline. */
.portrait-panel { position:relative; width:171px; height:171px; padding-right:31px; border-right:1px solid var(--rule); }
#portrait { display:block; width:139px; height:171px; }
#portrait-fallback { position:absolute; left:0; top:0; width:139px; height:100%; object-fit:cover; object-position:50% 0; }
.content-section { padding:25px 0 28px; border-bottom:1px solid var(--rule); scroll-margin-top:24px; }
.content-section>h2 { margin-bottom:20px; }
.boxed { display:flow-root; margin:0 0 10px; font-size:14px; line-height:1.45; min-height:42px; }
.boxed:last-child { margin-bottom:0; }
/* The separator matches the icon height, centred on the first two lines of each entry. */
.boxed .image.entry { float:left; display:flex; align-items:center; width:43px; height:33px; margin:4px 10px 0 0; padding-right:9px; border-right:1px solid var(--entry-rule); }
.boxed .image.entry img { width:33px; max-height:33px; object-fit:contain; }
.boxed .image.entry+p { margin-left:53px; }
#background h4 { margin-top:20px; }
#background h4:first-of-type { margin-top:0; }
#research,#publications { line-height:1.55; }
#research { padding-top:30px; }
#publications>p { margin-bottom:16px; }
#publications>.boxed { margin-bottom:15px; }
#publications .boxed a { display:inline-block; margin:0 2px; }
#publications .boxed i { font-size:14px; }
.album-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.album { min-width:0; }
.album-cover { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; }
.album-cover img { display:block; width:100%; height:100%; object-fit:cover; }
/* cos(0.5°) + sin(0.5°) is the minimum scale that fills the rotated square. */
.album-upcoming .album-cover img { transform:rotate(0.5deg) scale(1.008689); }
.album-cover img[src$="songs-of-adelina.jpg"] { filter:grayscale(1); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .album-cover { transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform 320ms ease-out,box-shadow 320ms ease-out; }
  .album-cover::after { content:""; position:absolute; inset:-50%; pointer-events:none; opacity:0; background:linear-gradient(var(--shine-angle,125deg),transparent 0%,#ffffff02 20%,#ffffff0a 40%,#ffffff20 54%,#ffffff0c 68%,#ffffff02 84%,transparent 100%); transform:translate(var(--shine-x,0%),var(--shine-y,0%)); transition:opacity 250ms ease-out,transform 160ms ease-out; }
  .album-cover.is-tilting { transition:transform 100ms ease-out,box-shadow 250ms ease-out; box-shadow:0 10px 22px #0003; }
  .album-cover.is-tilting::after { opacity:var(--shine-opacity,.6); }
}
.album h3 { font-size:16px; font-weight:600; margin-top:14px; min-height:46px; }
.album>p { font-size:13px; margin-bottom:8px; }
.work-links { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; }
/* Outbound links end with a thin drawn arrow (the ↗ glyph is a speck at this size). The line under them is drawn
   as a background so it runs unbroken beneath text and arrow, which a text underline won't do. */
.work-links a,.music-entry h3 a { --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.work-links a::after,.music-entry h3 a::after { content:""; display:inline-block; width:.9em; height:.9em; margin-left:.12em; vertical-align:-.08em; background:currentColor; -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat; }
.work-links a,.music-entry h3 a:hover { text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; }
.music-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.music-entry { --work-thumb:128px; display:grid; grid-template-columns:var(--work-thumb) minmax(0,1fr); align-items:start; gap:14px; }
/* YouTube's own 16:9 thumbnails, shown whole. */
.music-entry>a { display:block; aspect-ratio:16/9; overflow:hidden; }
.music-entry img { width:100%; height:100%; object-fit:cover; }
.music-entry h3 { font-size:14px; line-height:1.45; margin:0 0 5px; }
.music-entry p { font-size:12px; line-height:1.5; }
.music-entry a:hover { text-decoration:underline; text-underline-offset:3px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px 0 30px; font-size:12px; color:var(--muted); }
/* The art page uses one image and a still, dark surrounding surface. */
/* Music page palette: graphite with a lavender accent, so the portrait is the only strong colour. */
:root { --m-bg:#131315; --m-head:#ecebf0; --m-ink:#cfcdd6; --m-soft:#dedce4; --m-muted:#8f8c99; --m-muted2:#9a97a4; --m-faint:#85828e; --m-accent:#b9a8ff; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) { --ink:var(--m-ink); --heading:var(--m-head); --rule:#ffffff21; --accent:var(--m-accent); background:var(--m-bg); }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .site-header { padding-bottom:24px; border-bottom:0; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) a:focus-visible,:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) button:focus-visible { outline-color:var(--m-accent); }
.art-stage { --spill:32px; position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr); align-items:center; gap:44px; width:100%; margin:8px 0 0; overflow:visible; }
/* The portrait's resting edges sit on the content edges; moving strips leak slightly past them. */
/* Shifted left: the wide edge fade makes the visible edge read as further in than the box. */
.art-portrait { position:relative; width:93%; margin-left:-8px; aspect-ratio:1073/1405; }
#art-portrait-slot { width:100%; height:100%; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .portrait-panel { width:calc(100% + var(--spill) * 2); height:100%; margin-left:calc(-1 * var(--spill)); padding:0; border:0; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) #portrait { width:100%; height:100%; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) #portrait-fallback { left:var(--spill); top:0; width:calc(100% - var(--spill) * 2); height:100%; transform:none; object-fit:contain; mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
.prelude-excerpt { min-width:0; color:var(--m-soft); }
/* Engraved 7% tighter; shown at the matching width so the glyphs keep their size. */
.prelude-notation { display:block; width:93%; height:auto; margin-left:auto; overflow:visible; }
.prelude-excerpt figcaption { margin-top:26px; text-align:right; }
.prelude-excerpt h2 { font-size:19px; letter-spacing:-.2px; }
.prelude-excerpt figcaption p { margin-top:4px; font-size:13px; color:var(--m-muted); }
.prelude-excerpt figcaption .prelude-year { margin-top:6px; font-size:12px; }
.stage-caption { position:absolute; left:12px; bottom:11px; font-family:var(--body); font-size:11px; color:#fff; letter-spacing:.2px; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .content-section { padding-top:30px; padding-bottom:30px; }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .album>p { color:var(--m-muted); }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .music-entry p { color:var(--m-muted2); }
:is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) footer { color:var(--m-faint); }
html.eclipse-reveal::view-transition-group(root) { animation:none; }
html.eclipse-reveal::view-transition-image-pair(root) { isolation:auto; }
html.eclipse-reveal::view-transition-old(root),html.eclipse-reveal::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
html.eclipse-reveal::view-transition-old(root) { z-index:1; }
html.eclipse-reveal::view-transition-new(root) { z-index:2; clip-path:var(--eclipse-from); animation:eclipse-grow 1088ms both; }
/* The eclipse eases into a near pause at a fifth of its size, then accelerates away to fill the page. */
@keyframes eclipse-grow {
  from { clip-path:var(--eclipse-from); animation-timing-function:cubic-bezier(.15,.7,.35,1); }
  50% { clip-path:var(--eclipse-mid); animation-timing-function:cubic-bezier(.65,0,.85,.3); }
  to { clip-path:var(--eclipse-to); }
}
/* A live copy of the music page covers the research page while the eclipse opens through it. */
.art-cover { position:fixed; inset:0; z-index:60; overflow:hidden; pointer-events:none; color:var(--ink); }
.skip-link { position:fixed; z-index:40; top:8px; left:8px; transform:translateY(-150%); padding:10px 15px; background:var(--surface); color:var(--heading); border:1px solid; }
.skip-link:focus { transform:none; }
#main:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:800px) {
  body { font-size:15px; }
  .page-shell { padding:0 35px; }
  .name-row h1 { font-size:26px; }
  .mode-nav { font-size:20px; }
  .intro { gap:17px; grid-template-columns:180px minmax(0,1fr); }
  .portrait-panel { width:180px; padding-right:17px; }
  #portrait-fallback { left:0; }
  .album-grid { gap:20px; }
  .art-stage { --spill:24px; gap:30px; }
  .album h3 { font-size:15px; }
  .music-entry { --work-thumb:112px; }
}
@media(max-width:760px) {
  .site-header { display:block; }
  .name-row { gap:36px; }
  .mode-nav { margin:0; padding:0; }
  .links-row { margin-top:12px; }
}
@media(max-width:600px) {
  .page-shell { margin-top:20px; padding:0 20px; }
  .name-row { flex-wrap:wrap; column-gap:24px; row-gap:0; }
  h1,.name-row h1 { font-size:25px; letter-spacing:-.5px; }
  h2 { font-size:22px; }
  .mode-nav { font-size:20px; }
  .site-header { padding-bottom:19px; }
  .links-row { margin-top:14px; }
  .contact-links { font-size:16px; }
  .intro { grid-template-columns:125px minmax(0,1fr); gap:13px; padding:25px 0 0; align-items:start; }
  .intro-copy h2 { margin-bottom:17px; }
  .intro-copy p+p { margin-top:18px; }
  .portrait-panel { width:125px; height:155px; padding-right:13px; margin-top:35px; }
  #portrait { width:112px; height:155px; }
  #portrait-fallback { left:0; width:112px; }
  .boxed { font-size:13px; line-height:1.5; margin-bottom:13px; }
  .boxed .image.entry { width:37px; height:28px; margin-top:5px; padding-right:8px; margin-right:9px; }
  .boxed .image.entry img { width:28px; max-height:28px; }
  .boxed .image.entry+p { margin-left:46px; }
  .content-section { padding:23px 0; }
  .content-section>h2 { margin-bottom:18px; }
  .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; }
  .album h3 { font-size:15px; min-height:58px; margin-top:12px; }
  .album>p { font-size:12px; }
  .work-links { font-size:11px; gap:4px 11px; }
  .music-list { grid-template-columns:1fr; gap:19px; }
  .music-entry { --work-thumb:104px; gap:12px; }
  .music-entry p { font-size:12px; }
  .art-stage { --spill:16px; grid-template-columns:1fr; gap:24px; }
  .art-portrait { width:80%; max-width:368px; margin-left:0; justify-self:center; }
  .prelude-excerpt { width:100%; max-width:420px; justify-self:center; margin:16px 0 8px; }
  :is(body[data-mode=art],body:not([data-mode]):has(#art:target,#albums:target,#compositions:target,#performances:target),.art-cover) .portrait-panel { margin-top:0; }
  .stage-caption { left:10px; bottom:39px; font-size:10px; }
  footer { font-size:11px; flex-wrap:wrap; gap:10px; }
}
@media(max-width:370px) {
  .intro { grid-template-columns:96px minmax(0,1fr); gap:10px; }
  .portrait-panel { width:96px; height:140px; padding-right:10px; }
  #portrait { width:86px; height:140px; }
  #portrait-fallback { width:86px; left:0; }
}