:root{--paper:#f0eee8;--ink:#20221f;--muted:#676b63;--rule:rgba(32,34,31,.17);--glass:rgba(240,238,232,.8);--focus-ring:#20221f;--paint:#f22cb8;--paint-rgb:242,44,184;--portrait-height:94svh;--portrait-width:75.225svh;--portrait-top:1.5svh;--portrait-center:51%;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}
body{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;color:var(--ink);background:var(--paper);transition:background-color .8s,color .8s;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.color-button.space-activated:focus-visible{outline:none}
button{cursor:pointer}
button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#experience{position:relative;width:100%;height:100vh;height:100svh;height:100dvh;min-height:0;overflow:hidden;isolation:isolate;touch-action:pinch-zoom}
.atmosphere{position:absolute;inset:-12%;z-index:-5;background:radial-gradient(ellipse at 50% 24%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 47%),radial-gradient(ellipse at 49% 73%,rgba(var(--paint-rgb),.22),transparent 61%);transition:background .8s}
.watermark{position:absolute;top:25%;left:50%;transform:translateX(-50%);color:var(--ink);font-size:20.6vw;line-height:1;letter-spacing:-.075em;font-weight:400;white-space:nowrap;opacity:.078;z-index:-3;user-select:none;pointer-events:none}
.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.034;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
/* Swap the complete portraits in one paint. Crossfading a stationary hand
   beneath a moving hand creates a second silhouette during initialization. */
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;visibility:hidden;touch-action:pinch-zoom}
.is-ready #scene{opacity:1;visibility:visible}
.portrait-fallback{position:absolute;z-index:0;top:var(--portrait-top);left:var(--portrait-center);width:var(--portrait-width);height:var(--portrait-height);transform:translateX(-50%);pointer-events:none;user-select:none}
.portrait-fallback img{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.is-ready .portrait-fallback{opacity:0;visibility:hidden}
.pigment-fallback{position:absolute;inset:38% -15% -20%;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 29% 67%,rgba(var(--paint-rgb),.5),transparent 52%),radial-gradient(ellipse at 75% 89%,rgba(var(--paint-rgb),.65),transparent 62%);filter:blur(28px);transition:opacity 1s}
.is-ready .pigment-fallback{opacity:.17}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--paper) -30%,transparent 29%)}
.masthead{position:absolute;top:max(28px,env(safe-area-inset-top));left:40px;right:40px;display:flex;justify-content:space-between;align-items:flex-start;z-index:10;pointer-events:none}
.identity{pointer-events:auto}
.identity h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-1.7px;line-height:1}
.identity-dot{color:var(--paint);transition:color .9s}
.identity p{font-size:8px;font-weight:600;letter-spacing:2px;margin:12px 0 0 1px;color:var(--muted)}
.mood-switch{display:flex;align-items:center;gap:2px;background:var(--glass);border:1px solid var(--rule);border-radius:50px;padding:4px;pointer-events:auto;backdrop-filter:blur(16px)}
.mood-button{display:flex;align-items:center;gap:7px;border:0;border-radius:30px;background:transparent;color:var(--muted);padding:10px 13px;font-size:10px;white-space:nowrap;transition:background-color .25s,color .25s}
.mood-button:hover{color:var(--ink);background:var(--rule)}
[data-mood="studio"] .mood-button[data-mood="nocturne"]:hover,
[data-mood="studio"] .mood-button[data-mood="nocturne"]:focus-visible{color:var(--paper)}
[data-mood="studio"] .mood-button[data-mood="studio"],[data-mood="nocturne"] .mood-button[data-mood="nocturne"]{background:var(--ink);color:var(--paper)}
@media(min-width:701px){.mood-switch{margin-top:5px}.mood-button{padding:6px 8px}}
.side-note{position:absolute;top:51%;display:flex;align-items:center;gap:15px;z-index:5;font-size:8px;font-weight:500;letter-spacing:1.6px;color:var(--muted);pointer-events:none;writing-mode:vertical-rl}
.side-note-left{left:39px;transform:translateY(-50%) rotate(180deg)}
.side-note-right{right:39px;transform:translateY(-50%)}
.fine-line{width:1px;height:40px;background:var(--rule)}
.footer{position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:40px;right:40px;z-index:10}
#artist-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;background:linear-gradient(90deg,var(--glass),transparent 50%,var(--glass));backdrop-filter:blur(14px)}
#artist-links a{min-width:0;min-height:75px;color:var(--ink);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 clamp(12px,1.6vw,23px);position:relative;transition:background-color .25s;outline-offset:-5px}
#artist-links a:not(:last-child):after{content:"";position:absolute;right:0;top:26px;bottom:26px;width:1px;background:var(--rule)}
.link-logo{display:block;width:36px;height:28px;object-fit:contain;flex:0 0 36px;filter:brightness(0);opacity:.75}
.link-label{min-width:0;font-size:8px;line-height:normal;letter-spacing:1.2px;overflow-wrap:anywhere;font-style:normal;text-transform:uppercase}
#artist-links a:hover .link-label{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.footer-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px;font-size:8px;letter-spacing:1.2px;color:var(--muted)}
.domain{min-width:135px}
.color-button{display:flex;align-items:center;justify-content:center;gap:9px;background:none;border:0;border-radius:30px;padding:7px 10px;letter-spacing:.25px;font-size:10px;line-height:1.3;min-height:30px;color:var(--ink)}
.color-chip{display:block;flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--paint);box-shadow:0 0 0 3px rgba(var(--paint-rgb),.13);transition:background .6s,box-shadow .6s}
.color-prefix{font-size:7px;letter-spacing:1.3px;color:var(--muted);margin-left:2px}
.color-button svg{margin-left:2px;width:13px;height:13px;transition:transform .45s}
.color-button:hover svg{transform:rotate(180deg)}
.color-button.is-shuffling svg{transform:rotate(180deg)}
.footer-credit{min-width:135px;text-align:right}.footer-credit a,.footer-credit a:link,.footer-credit a:visited,.footer-credit a:hover,.footer-credit a:active,.footer-credit a:focus,.footer-credit a:focus-visible{color:inherit;text-decoration:none;outline:none;cursor:pointer}
.is-static #scene{display:none}
.is-static .portrait-fallback{opacity:1;visibility:visible}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript-note{position:absolute;z-index:10;bottom:155px;left:25%;right:25%;font-size:11px;text-align:center;background:var(--glass);padding:10px;border-radius:20px}
[data-mood="nocturne"]{--paper:#131718;--ink:#f1f0e9;--muted:#adafa7;--rule:rgba(241,240,233,.19);--glass:rgba(22,27,28,.82);color-scheme:dark}
html[data-mood="nocturne"]{--focus-ring:#f1f0e9}
[data-mood="nocturne"] .atmosphere{background:radial-gradient(ellipse at 50% 25%,#313634,transparent 55%),radial-gradient(ellipse at 45% 72%,rgba(var(--paint-rgb),.3),transparent 58%)}
[data-mood="nocturne"] .watermark{opacity:.085}
[data-mood="nocturne"] .grain{opacity:.055}
[data-mood="nocturne"] .link-logo{filter:brightness(0) invert(1);opacity:.8}
@media(min-width:1700px){.masthead{left:60px;right:60px;top:38px}.footer{left:60px;right:60px;bottom:30px}#artist-links a{min-height:88px}}
@media(max-width:1000px){.masthead{left:26px;right:26px}.footer{left:26px;right:26px}.side-note-left{left:25px}.side-note-right{right:25px}.link-logo{width:30px;height:26px;flex-basis:30px}#artist-links a{gap:7px;padding:0 12px}.watermark{top:28%}}
@media(min-width:701px) and (max-width:820px){.link-logo{width:28px;height:24px;flex-basis:28px}#artist-links a{gap:6px;padding:0 10px}}
@media(min-width:1001px){.link-logo-legendair{width:72px;flex-basis:72px;margin-bottom:6px;}}
@media(min-width:821px) and (max-width:1000px){.link-logo-legendair{width:60px;flex-basis:60px;margin-bottom:6px;}}
@media(min-width:701px) and (max-width:820px){.link-logo-legendair{width:56px;flex-basis:56px;margin-bottom:5px;}}
@media(min-width:701px){.link-logo-legendair{opacity:.48}[data-mood="nocturne"] .link-logo-legendair{opacity:.58}}
@media(min-width:1001px){.link-logo-instagram{margin-left:-10px;margin-right:-10px;}}
@media(min-width:821px) and (max-width:1000px){.link-logo-instagram{margin-left:-7.6px;margin-right:-7.5px}}
@media(min-width:701px) and (max-width:820px){.link-logo-instagram{margin-left:-7.2px;margin-right:-7px}}
@media(max-width:700px){
  :root{--portrait-height:min(88svh,205vw);--portrait-width:min(70.425svh,164.058vw);--portrait-top:6svh;--portrait-center:53.5%}
  .masthead{top:max(22px,env(safe-area-inset-top));left:21px;right:21px}
  .identity h1{font-size:25px;letter-spacing:-1.6px}
  .identity p{font-size:6px;letter-spacing:-.3px;margin-top:2px;white-space:nowrap}
  .mood-switch{height:25px;padding:2px;gap:1px}
  .mood-button{width:24px;height:19px;padding:3px 5px;gap:0;justify-content:center}
  .mood-button span{display:none}
  .mood-button svg{width:12px;height:12px}
  .watermark{top:34%;font-size:23.5vw;opacity:.10}
  .side-note{display:none}
  .footer{left:21px;right:21px;bottom:max(15px,env(safe-area-inset-bottom))}
  #artist-links{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:0}
  #artist-links a{min-height:54px;padding:0 10px;gap:6px;justify-content:flex-start}
  #artist-links a:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  #artist-links a:not(:last-child):after{display:none}
  #artist-links a:nth-child(odd):after{display:block;top:18px;bottom:18px}
  .link-logo{width:30px;height:26px;flex-basis:30px}
  .link-logo-legendair{margin-bottom:3px;}
  .footer-meta{padding-top:10px;gap:9px}
  .domain{display:none}
  .color-button{font-size:9px;gap:7px;line-height:1;height:30px;padding:0;align-self:center;white-space:nowrap}
  .color-prefix{font-size:6px;letter-spacing:.7px}
  .pigment-fallback{inset:46% -35% -15%}
  .vignette{background:linear-gradient(to top,var(--paper) -20%,transparent 31%)}
  .noscript-note{bottom:182px;left:20px;right:20px;font-size:10px}
}
@media(max-width:370px){.masthead{left:16px;right:16px}.footer{left:16px;right:16px}.identity h1{font-size:23px}.color-prefix{display:none}.link-logo{width:28px;height:24px;flex-basis:28px}#artist-links a{padding:0 8px;gap:5px}}
@media(min-width:320px) and (max-width:335px){#artist-links > a:first-child .link-label{letter-spacing:.4px}}
@media(min-width:320px) and (max-width:342px){#artist-links .instagram-link{padding:0 4px;gap:3px}}
@media(min-width:320px) and (max-width:331px){.instagram-label{letter-spacing:.1px;white-space:nowrap}}
@media(min-width:332px) and (max-width:336px){.instagram-label{letter-spacing:.45px;white-space:nowrap}}
@media(min-width:337px) and (max-width:340px){.instagram-label{letter-spacing:.55px;white-space:nowrap}}
@media(min-width:341px) and (max-width:342px){.instagram-label{letter-spacing:.3px;white-space:nowrap}}
@media(min-width:343px) and (max-width:350px){.instagram-label{letter-spacing:.4px;white-space:nowrap}}
@media(min-width:351px) and (max-width:360px){.instagram-label{letter-spacing:.6px;white-space:nowrap}}
@media(min-width:361px) and (max-width:370px){.instagram-label{letter-spacing:.9px;white-space:nowrap}}
@media(min-width:371px) and (max-width:375px){.instagram-label{letter-spacing:.55px;white-space:nowrap}}
@media(min-width:376px) and (max-width:385px){.instagram-label{letter-spacing:.7px;white-space:nowrap}}
@media(min-width:386px) and (max-width:399px){.instagram-label{letter-spacing:1px;white-space:nowrap}}
@media(max-height:620px) and (min-width:701px){.masthead{top:18px}.identity h1{font-size:24px}.identity p{margin-top:8px}.footer{bottom:12px}#artist-links a{min-height:52px}.footer-meta{padding-top:7px}.side-note{display:none}}
@media(max-height:540px) and (min-width:701px){:root{--portrait-height:98svh;--portrait-width:78.426svh;--portrait-top:-3svh}}
@media(max-height:500px) and (min-aspect-ratio:6/5){
  .masthead{top:14px;left:20px;right:20px}.identity h1{font-size:23px}.identity p{font-size:6px;letter-spacing:-.3px;margin-top:2px}
  .mood-switch{height:25px;padding:2px;gap:1px}.mood-button{width:24px;height:19px;padding:3px 5px;gap:0;justify-content:center}.mood-button span{display:none}.mood-button svg{width:12px;height:12px}
  .footer{left:20px;right:20px;bottom:8px}.footer-meta{padding-top:4px}.color-prefix,.domain{display:none}
  #artist-links{grid-template-columns:repeat(4,minmax(0,1fr))}
  #artist-links a{min-height:44px;padding:0 8px;gap:4px;justify-content:center}
  #artist-links a:nth-child(-n+2){border-bottom:0}
  #artist-links a:not(:last-child):after{display:none}.link-logo{width:clamp(24px,3.6vw,36px);height:clamp(22px,3.1vw,28px);flex-basis:clamp(24px,3.6vw,36px)}
  .side-note{display:none}
}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:701px){.link-logo-legendair{width:clamp(48px,7.2vw,72px);flex-basis:clamp(48px,7.2vw,72px)}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:821px) and (max-width:1000px){.link-logo-instagram{margin-left:-8.5px;margin-right:-8.5px}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:480px) and (max-width:499px){#artist-links > a:first-child .link-label{letter-spacing:-1.3px}.instagram-label{letter-spacing:-1.9px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:500px) and (max-width:519px){#artist-links > a:first-child .link-label{letter-spacing:-.9px}.instagram-label{letter-spacing:-1.6px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:520px) and (max-width:529px){#artist-links > a:first-child .link-label{letter-spacing:-.6px}.instagram-label{letter-spacing:-1.3px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:530px) and (max-width:539px){#artist-links > a:first-child .link-label{letter-spacing:-.3px}.instagram-label{letter-spacing:-1px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:540px) and (max-width:559px){#artist-links > a:first-child .link-label{letter-spacing:-.4px}.instagram-label{letter-spacing:-1px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:560px) and (max-width:579px){#artist-links > a:first-child .link-label{letter-spacing:0}.instagram-label{letter-spacing:-.75px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:580px) and (max-width:599px){#artist-links > a:first-child .link-label{letter-spacing:0}.instagram-label{letter-spacing:-.45px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:600px) and (max-width:609px){#artist-links > a:first-child .link-label{letter-spacing:.6px}.instagram-label{letter-spacing:-.15px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:610px) and (max-width:619px){#artist-links > a:first-child .link-label{letter-spacing:.8px}.instagram-label{letter-spacing:-.15px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:620px) and (max-width:639px){#artist-links > a:first-child .link-label{letter-spacing:1px}.instagram-label{letter-spacing:.1px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:640px) and (max-width:659px){.instagram-label{letter-spacing:.4px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:660px) and (max-width:679px){.instagram-label{letter-spacing:.65px;white-space:nowrap}}
@media(max-height:500px) and (min-aspect-ratio:6/5) and (min-width:680px) and (max-width:700px){.instagram-label{letter-spacing:.9px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
@media(max-width:700px){html[data-firefox-android-portrait="true"] .footer{bottom:15px}}
@media(min-width:701px){html[data-firefox-android-portrait="true"] .footer{bottom:23px}}

