:root{color-scheme:dark;--bg:#06080b;--surface:#0d1116;--text:#e8e7e0;--muted:#b0b3af;--line:#242a30;--accent:#c5d5ac;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}button{background:none;border:0}button,a{touch-action:manipulation}.study{display:flex;justify-content:space-between;padding:11px 4.5%;background:#080b0f;font:10px/1.4 monospace;letter-spacing:1.1px;color:#b0b3af}.header{padding:46px 5.5% 39px;display:flex;align-items:center;justify-content:space-between;gap:35px}.wordmark{font-size:30px;font-weight:400;letter-spacing:.38em;white-space:nowrap}.header nav{display:flex;gap:27px}.header nav button{font-size:12px;padding:10px 0;color:#c1c4bf;transition:color .2s}.header nav button:hover{color:#fff}.menu-toggle{display:none}main{max-width:1600px;margin:auto}.entrance{padding:44px 12% 82px}.edition{display:flex;align-items:center;gap:9px;font:10px/1.6 monospace;letter-spacing:1.2px;color:var(--muted);margin-bottom:18px}.light{width:5px;height:5px;background:var(--accent);border-radius:50%}.edition-right{margin-left:auto}.visual{height:clamp(290px,37vw,560px);background:var(--surface);position:relative;overflow:hidden}canvas{width:100%;height:100%;display:block}.visual-edge{position:absolute;font:11px monospace;color:#969e96;pointer-events:none}.left-edge{top:24px;left:26px;font-size:19px}.right-edge{bottom:24px;right:26px;letter-spacing:1px}#motion{position:absolute;bottom:18px;left:20px;background:#202222e0;padding:8px 10px;font:11px monospace;color:var(--muted);opacity:0;transition:opacity .2s}.visual:hover #motion,#motion:focus-visible{opacity:1}.under-visual{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:15px}.under-visual>span{font:10px/1.6 monospace;letter-spacing:1px;color:var(--muted)}.under-visual a{font-size:12px}.under-visual a span{margin-left:27px;font-size:20px}.selected{margin:0 5.5%;padding:50px 0 65px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:30px;gap:20px}.section-heading h1{font-size:23px;font-weight:400;margin:0}.section-heading>span{font-size:12px;color:var(--muted)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.project{padding:0;text-align:left}.project-image{aspect-ratio:1.92;position:relative;overflow:hidden;background:#161818}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}.project:hover img{transform:scale(1.025)}.image-note{position:absolute;left:15px;bottom:14px;background:#171919cc;padding:5px 7px;font:9px monospace;letter-spacing:1px}.project-heading{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.project h2{font-size:20px;font-weight:400;margin:0}.project p{font-size:12px;color:var(--muted);margin:9px 0 0}.invitation{padding:54px 0 65px;margin:0 5.5%;border-top:1px solid var(--line)}.micro{font:10px/1.7 monospace;letter-spacing:1.3px;color:var(--muted)}.invitation>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.invitation h2{font-weight:400;font-size:clamp(24px,3vw,40px);letter-spacing:-.7px;margin-bottom:0}.invitation a{font-size:13px;border-bottom:1px solid var(--muted);padding-bottom:9px}.invitation a span{margin-left:30px}footer{margin:0 5.5%;border-top:1px solid var(--line);padding:30px 0 35px;display:flex;align-items:center;gap:35px;font-size:11px;color:var(--muted)}.footer-mark{letter-spacing:5px;color:var(--text);font-size:13px}footer>a:last-child{margin-left:auto}dialog{background:#e7e8e1;color:#252626;border:0;padding:36px;width:min(760px,calc(100% - 32px));max-height:88vh}dialog::backdrop{background:#101212bc;backdrop-filter:blur(8px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:25px;border-bottom:1px solid #b7bcb5}.dialog-top .micro{color:#586054}.dialog-top button{font-size:12px;padding:8px}dialog h2{font-size:42px;font-weight:400;letter-spacing:-1px;margin:32px 0 18px}dialog p{font-size:16px;line-height:1.65;max-width:580px}dialog li{font-size:14px;line-height:1.7;padding:7px 0}dialog ul{padding-left:18px}dialog .note{font:11px/1.7 monospace;color:#586054;border-top:1px solid #b7bcb5;padding-top:20px;margin-top:25px}dialog a{border-bottom:1px solid}dialog img{max-width:100%;max-height:260px;object-fit:contain;margin-top:18px}dialog button[data-page]{border-bottom:1px solid;padding:10px 0;margin-right:25px;text-align:left}dialog a:focus-visible,dialog button:focus-visible{outline-color:#323e25}
@media(min-width:1500px){.header,footer{max-width:1600px;margin-left:auto;margin-right:auto}.wordmark{font-size:34px}}
@media(max-width:1050px){.header{gap:24px}.wordmark{font-size:24px;letter-spacing:.28em}.header nav{gap:18px}.entrance{padding-left:8%;padding-right:8%}}
@media(max-width:760px){.study{font-size:9px}.study span:last-child{display:none}.header{flex-wrap:wrap;padding-top:30px;padding-bottom:25px}.wordmark{font-size:25px}.menu-toggle{display:block;font-size:12px;padding:10px 0}.menu-toggle span{margin-left:12px}.header nav{display:none;width:100%;flex-wrap:wrap;gap:10px 26px;padding-top:14px;border-top:1px solid var(--line)}.header nav.open{display:flex}.header nav button{min-height:44px}.entrance{padding:24px 5.5% 48px}.edition{font-size:9px;letter-spacing:.6px}.visual{height:350px}.under-visual>span{max-width:150px;font-size:9px}.under-visual a span{margin-left:12px}.selected{padding-top:34px}.section-heading{align-items:flex-start;flex-direction:column;gap:12px}.project-grid{grid-template-columns:1fr;gap:34px}.project h2{font-size:20px}.invitation>div{flex-direction:column;gap:25px}.invitation h2{line-height:1.25}footer{flex-wrap:wrap;gap:22px}footer>a:last-child{margin-left:0;width:100%}#motion{opacity:.75;font-size:10px}dialog{padding:22px}dialog h2{font-size:32px}.dialog-top .micro{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.header{display:grid;grid-template-columns:1fr auto;gap:28px;padding-bottom:20px}
.identity{grid-column:1 / -1;min-width:0}
.identity h1{margin:0;font-weight:400;line-height:1.15}
.wordmark{display:inline-block;color:#fff;font-size:clamp(38px,5.7vw,78px);font-weight:400;letter-spacing:.4em}
.artist-credit{display:block;margin-top:18px;color:#b0b3af;font-size:11px;letter-spacing:1.8px}
.header nav{grid-column:1 / -1;justify-content:flex-end}
.section-heading h2{font-size:23px;font-weight:400;margin:0}
.footer-mark{color:#fff}
@media(max-width:760px){.header{gap:12px;padding-bottom:10px}.wordmark{font-size:clamp(27px,8.4vw,55px);letter-spacing:.32em}.artist-credit{margin-top:13px;font-size:10px;letter-spacing:1.3px}.menu-toggle{grid-column:2;justify-self:end}.header nav{justify-content:flex-start}.entrance{padding-top:12px}}

/* Compact identity and project-led opening. */
.header{max-width:1440px;margin:0 auto;padding:42px 5.5% 36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.identity{display:flex;align-items:center;gap:24px}
.grid-signature{position:relative;width:104px;height:104px;flex:0 0 104px}
.grid-signature canvas{width:100%;height:100%}
.grid-signature #motion{left:0;bottom:-18px;white-space:nowrap;padding:4px;font-size:9px}
.grid-signature:hover #motion,.grid-signature:focus-within #motion{opacity:1}
.wordmark{font-size:clamp(30px,3.5vw,52px);letter-spacing:.36em}
.header nav{gap:22px;justify-content:flex-end}
main{max-width:1440px}
.selected{padding:28px 0 38px}
.section-heading{margin-bottom:24px}
.project-grid{gap:28px}
.project-image{aspect-ratio:1.92}
.invitation{padding:30px 0 38px}
.invitation h2{font-size:clamp(24px,2.4vw,34px);margin-top:16px}
footer{max-width:1282px;margin:0 auto;padding:24px 0 28px}
@media(max-width:1050px){.header nav{width:100%;justify-content:flex-start;padding-left:128px}footer{margin:0 5.5%}}
@media(max-width:760px){.header{padding-top:24px;padding-bottom:26px;gap:20px}.identity{gap:12px}.grid-signature{width:56px;height:56px;flex-basis:56px}.wordmark{font-size:clamp(20px,5.5vw,32px);letter-spacing:.22em}.header nav{padding-left:0}.grid-signature #motion{font-size:8px;bottom:-20px}.selected{padding-top:24px}.project-grid{gap:30px}.invitation{padding:30px 0}.menu-toggle{margin-left:auto}}

footer{width:89%;max-width:1282px;margin-left:auto;margin-right:auto}

.header{padding-top:18px;padding-bottom:18px;gap:20px}
.grid-signature{width:64px;height:64px;flex-basis:64px}
.wordmark{font-size:clamp(26px,2.6vw,40px)}
.cosmic-hero{position:relative;height:clamp(360px,43vw,610px);overflow:hidden;background:#02050d;margin:0 5.5% 24px;isolation:isolate}
.cosmic-art{position:absolute;inset:0;overflow:hidden}
.cosmic-art img{position:absolute;width:116%;height:118%;left:-8%;top:-9%;object-fit:cover;animation:cosmic-drift 24s ease-in-out infinite alternate;will-change:transform}
.cosmic-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,4,12,.88),rgba(1,4,12,.35) 31%,transparent 62%);z-index:1;pointer-events:none}
.cosmic-copy{position:absolute;left:4%;top:50%;transform:translateY(-50%);z-index:2}
.cosmic-copy .micro{color:#e3e4ea;letter-spacing:3px;font-size:9px}
.cosmic-copy h2{font-size:clamp(38px,4.8vw,70px);font-weight:300;line-height:.99;letter-spacing:-2px;margin:20px 0 28px}
.cosmic-copy button{border:1px solid #909ca9;padding:12px 18px;background:#02050d66;font-size:12px}.cosmic-copy button span{margin-left:18px}
#hero-motion{position:absolute;bottom:17px;left:4%;z-index:3;font:10px monospace;background:#02050d99;padding:8px;color:#c4cbd4}
.cosmic-stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.cosmic-stars i{position:absolute;width:2px;height:2px;background:#c8eaff;box-shadow:0 0 7px #9bd9ff;border-radius:50%;animation:star-drift var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}
@keyframes cosmic-drift{from{transform:scale(1.01) translate(-.5%,0)}to{transform:scale(1.09) translate(1%,1%)}}
@keyframes star-drift{0%{opacity:0;transform:translate(0,14px)}25%,70%{opacity:.65}100%{opacity:0;transform:translate(-35px,-35px)}}
.motion-paused .cosmic-art img,.motion-paused .cosmic-stars i{animation-play-state:paused}
@media(max-width:760px){.grid-signature{width:48px;height:48px;flex-basis:48px}.wordmark{font-size:clamp(20px,5.5vw,32px)}.header{padding-bottom:25px}.cosmic-hero{height:430px}.cosmic-art img{object-position:57% center}.cosmic-copy{left:7%;top:55%}.cosmic-copy h2{font-size:43px}.cosmic-copy .micro{font-size:8px;letter-spacing:2px}.cosmic-hero::after{background:linear-gradient(90deg,#01040ca6,transparent)}.cosmic-copy button{background:#02050dbb}}
@media(prefers-reduced-motion:reduce){.cosmic-art img,.cosmic-stars i{animation:none}.cosmic-stars{display:none}}

/* Compact routes into the work, immediately beneath the featured visual. */
.cosmic-hero{margin-bottom:0;height:clamp(360px,40vw,540px)}
.discovery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 5.5%;padding:22px 0 26px;border-top:1px solid var(--line)}
.discovery-item{display:flex;align-items:center;gap:18px;text-align:left;padding:0 22px;border-right:1px solid var(--line);min-width:0}
.discovery-item:first-child{padding-left:0}.discovery-item:last-child{padding-right:0;border:0}
.discovery-item>img{width:45%;height:110px;object-fit:cover;transition:filter .4s,transform .4s}.discovery-item>img.album-thumb{object-fit:contain;width:34%}
.discovery-copy{display:flex;flex:1;flex-direction:column;gap:9px}.discovery-copy .micro{font-size:8px;letter-spacing:1.7px;color:#d2d5cf}.discovery-title{font-size:15px;line-height:1.35}.discovery-arrow{font-size:22px;transition:transform .25s}.discovery-item:hover .discovery-arrow{transform:translateX(5px)}.discovery-item:hover>img{filter:brightness(1.15)}
@media(max-width:1050px) and (min-width:761px){.discovery-item{gap:12px;padding:0 14px}.discovery-item>img{height:85px}.discovery-title{font-size:13px}.discovery-copy .micro{font-size:7px}}
@media(max-width:760px){.discovery{grid-template-columns:1fr;padding:0}.discovery-item,.discovery-item:first-child,.discovery-item:last-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line);gap:22px}.discovery-item>img,.discovery-item>img.album-thumb{width:38%;height:96px}.discovery-title{font-size:16px}.discovery-copy .micro{font-size:9px}.invitation{border-top:0}}

/* Blended split composition with gentler highlights and a livelier drift. */
.cosmic-art img{filter:brightness(.7) saturate(.88);animation-duration:14s}
.cosmic-blend{position:absolute;inset:0 0 0 43%;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 60%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 60%);opacity:.75;pointer-events:none}
.cosmic-blend img{width:120%;height:120%;position:absolute;left:-10%;top:-10%;object-fit:cover;filter:brightness(.64) saturate(.85);animation:blend-drift 18s ease-in-out infinite alternate}
@keyframes blend-drift{from{transform:scale(1.01) translateX(1%)}to{transform:scale(1.08) translateX(-2%)}}
.motion-paused .cosmic-blend img{animation-play-state:paused}
@media(max-width:760px){.cosmic-blend{left:40%;opacity:.6}}
@media(prefers-reduced-motion:reduce){.cosmic-blend img{animation:none}}

.discovery-thumb{position:relative;width:45%;height:110px;flex-shrink:0;overflow:hidden}.discovery-thumb img{width:100%;height:100%;object-fit:cover}.concept-label{position:absolute;left:4px;bottom:4px;padding:3px;background:#090d12bb;color:#d9dfdf;font:6px/1.2 monospace;letter-spacing:.5px}
@media(max-width:1050px) and (min-width:761px){.discovery-thumb{height:85px}}
@media(max-width:760px){.discovery-thumb{width:38%;height:96px}}

.cosmic-blend video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;filter:brightness(.7) saturate(.85)}

.cosmic-art img{filter:brightness(.8) saturate(.9);object-position:center}.cosmic-blend{opacity:.8;inset:0 0 0 48%}
@media(max-width:760px){.cosmic-blend{left:40%;opacity:.65}}

.network-motion video{position:absolute;max-width:none;width:200%;height:100%;left:-100%;top:0;object-fit:fill;filter:brightness(.8) saturate(.9)}

.network-motion video{height:116%;top:0}

.network-motion video{filter:brightness(.75) saturate(.95)}
#network-video-next{opacity:0}
.cosmic-hero::after{background:linear-gradient(90deg,rgba(1,4,12,.76),rgba(1,4,12,.25) 35%,transparent 72%)}

.fractal-motion video{width:100%;height:100%;inset:0;object-fit:cover;filter:brightness(.7) saturate(.85)}

#galaxy{width:100%;height:100%;display:block}.cosmic-stars{display:none}

.cosmic-hero::after{background:linear-gradient(90deg,rgba(1,4,12,.55),rgba(1,4,12,.12) 35%,transparent 72%)}

/* Show the complete fractal frame with breathing room. */
.fractal-motion video{object-fit:contain;transform:scale(.88);transform-origin:center}

.fractal-motion video{height:auto;aspect-ratio:16/9;top:50%;bottom:auto;transform:translateY(-50%) scale(.88);mask-image:radial-gradient(ellipse at center,#000 48%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at center,#000 48%,transparent 74%)}

/* Wider footage framing keeps the image continuous with the galaxy. */
.fractal-motion{inset:0 0 0 27%;opacity:.76;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 20%,#000 68%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 20%,#000 68%)}
.fractal-motion video{width:100%;height:100%;inset:0;aspect-ratio:auto;object-fit:cover;transform:none;mask-image:none;-webkit-mask-image:none}
@media(max-width:760px){.fractal-motion{left:15%;opacity:.65}}

#galaxy[hidden]{display:none}#candidate-video{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.video-options{margin:0 5.5% 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font:10px monospace}.video-options>span{color:var(--muted);letter-spacing:1px;margin-right:10px}.video-options button{padding:9px 12px;border:1px solid var(--line)}.video-options button[aria-pressed=true]{border-color:#c5d5ac;color:#dce6cf;background:#343b32}

#candidate-video,#candidate-loop-copy{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78)}

/* Match the three project images; crop the source artwork’s black presentation border. */
.discovery-thumb{aspect-ratio:16/9;height:auto}
.audiovisual-thumb img{transform:scale(1.16)}

.sound-placeholder{position:absolute;bottom:22px;left:4%;z-index:3;display:flex;align-items:center;gap:11px;padding:8px 0;color:#c4cbd4;font-size:12px;cursor:default;opacity:1;text-shadow:0 1px 5px #000}

/* Focus the memorial thumbnail on the lower hall and blue beams. */
.memorial-thumb img{position:absolute;width:100%;height:auto;max-width:none;left:0;bottom:0;transform:scale(1.8);transform-origin:50% 100%;filter:brightness(1.3)}

.memorial-thumb{container-type:inline-size}.memorial-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0009,#0002),linear-gradient(0deg,#0009,transparent 65%)}.memorial-caption{position:absolute;z-index:1;inset:12% 5%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:#f0efeb;text-shadow:0 1px 4px #0008}.memorial-dedication{font:2.05cqw/1.4 Arial,sans-serif;letter-spacing:.4cqw;white-space:nowrap}.memorial-heading{font:7.7cqw/1.15 Georgia,serif;letter-spacing:-.25cqw;margin-top:2.4cqw;white-space:nowrap}.memorial-subtitle{font:2.75cqw/1.4 Arial,sans-serif;margin-top:2.6cqw;white-space:nowrap}

.memorial-thumb img{height:100%;object-fit:cover;transform:scale(1.25);transform-origin:50% 70%;filter:brightness(1.3)}

/* Give the memorial scene more presence at thumbnail size. */
.memorial-thumb img{filter:brightness(1.65)}
.memorial-caption{top:23%}
.memorial-thumb::after{background:linear-gradient(90deg,#0005,#0000),linear-gradient(0deg,#0004,transparent 65%)}

/* Light presentation study. Keep lettering over artwork white. */
:root{color-scheme:light;--bg:#ffffff;--surface:#f5f5f4;--text:#737373;--muted:#767676;--line:#e5e5e5;--accent:#626e64}
.study{background:#f7f7f6;color:#777}
.wordmark{color:#7b7b7b}
.header nav button{color:#737373}.header nav button:hover{color:#333}
.discovery-copy .micro{color:#767676}
.cosmic-copy{color:#f0efeb}
.footer-mark{color:#737373}

/* Enlarged grid bridges the identity and moving image. */
.header{position:relative;z-index:4}
.identity{gap:52px}
.grid-signature{z-index:5;transform:translateY(28px) scale(2);transform-origin:center center}
.grid-signature canvas{filter:drop-shadow(0 5px 8px #0003)}
@media(max-width:760px){.identity{gap:30px}.grid-signature{transform:translateY(24px) scale(1.7)}}

/* Grid instrument sits inside the moving artwork. */
.cosmic-hero>.grid-signature{position:absolute;right:26px;bottom:22px;width:128px;height:128px;transform:none;z-index:3;opacity:.92}
.cosmic-hero>.grid-signature canvas{filter:drop-shadow(0 6px 12px #0006)}
@media(max-width:760px){.cosmic-hero>.grid-signature{width:96px;height:96px;right:14px;bottom:16px;transform:none}}
/* Rounded, compact identity inspired by the earlier header. */
.header{padding-top:12px;padding-bottom:10px}
.header h1{margin:0}
.wordmark{font-family:'Avenir Next',Avenir,'Century Gothic',Arial,sans-serif;font-weight:600;font-size:30px;letter-spacing:.43em;line-height:1.15}
.header nav button{font-family:'Avenir Next',Avenir,Arial,sans-serif;font-weight:500}
@media(max-width:760px){.wordmark{font-size:clamp(20px,5.5vw,28px);letter-spacing:.28em}.header{padding-top:16px;padding-bottom:12px}}

/* Selected dark presentation. */
:root{color-scheme:dark;--bg:#06080b;--surface:#0d1116;--text:#e8e7e0;--muted:#b0b3af;--line:#242a30;--accent:#c5d5ac}
.study{background:#080b0f;color:#b0b3af}
.wordmark,.footer-mark{color:var(--text)}
.header nav button{color:#c1c4bf}.header nav button:hover{color:#fff}
.discovery-copy .micro{color:#d2d5cf}

/* Particle ribbon above a quieter, slowly orbiting blue visual. */
.particle-banner{position:relative;margin:0 5.5% 14px;height:100px;overflow:hidden;background:#070b13}
.particle-banner #candidate-video,.particle-banner #candidate-loop-copy{object-position:50% 48%;filter:brightness(.6)}
.cosmic-art .orb-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.85);transform-origin:58% 50%;animation:orb-orbit 26s ease-in-out infinite;opacity:1;mix-blend-mode:normal;mask-image:none}
@keyframes orb-orbit{0%,100%{transform:scale(1.2) translate(-.6%,.4%) rotate(-2deg)}50%{transform:scale(1.23) translate(.6%,-.4%) rotate(2deg)}}
@media(max-width:760px){.particle-banner{height:65px;margin-bottom:10px}.cosmic-art .orb-artwork{object-position:58% center}}
@media(prefers-reduced-motion:reduce){.cosmic-art .orb-artwork{animation:none;transform:scale(1.2)}}

.particle-banner{margin-top:14px;margin-bottom:0}

/* Tighter transition from project cards to the particle banner. */
.discovery{padding-bottom:16px;border-bottom:1px solid var(--line)}
.particle-banner{margin-top:12px}

/* Rich colour and deep space blacks, with shading confined to the text. */
.cosmic-art .orb-artwork{filter:contrast(1.2) saturate(1.22) brightness(.92)}
.cosmic-hero::after{background:linear-gradient(90deg,rgba(0,3,10,.72),rgba(0,3,10,.25) 29%,transparent 49%)}

/* Original orb artwork, still and without colour grading. */
.cosmic-art .orb-artwork{animation:none;filter:none;transform:scale(1.16)}
.cosmic-hero::after{background:linear-gradient(90deg,rgba(0,3,10,.5),transparent 38%)}

/* Full-resolution original and reference headline proportions. */
.cosmic-hero{container-type:inline-size;height:auto;aspect-ratio:2.11;background:#01040a}
.cosmic-art .orb-artwork{width:100%;height:100%;object-fit:fill;transform:translateX(9%);animation:none;filter:none;mask-image:linear-gradient(90deg,transparent,black 12%)}
.cosmic-copy{left:2.8%;top:46.5%;transform:translateY(-50%)}
.cosmic-copy h2{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;font-size:5.25cqw;font-weight:300;line-height:.97;letter-spacing:-.16cqw;margin:0}
@media(max-width:760px){.cosmic-hero{aspect-ratio:auto;height:430px}.cosmic-art .orb-artwork{object-fit:cover;transform:none;object-position:58% center}.cosmic-copy{left:6%;top:46%}.cosmic-copy h2{font-size:clamp(36px,9cqw,54px)}}

/* Shift the orb left and carry the instrument into the contact invitation. */
.cosmic-art .orb-artwork{transform:translateX(5%)}
.contact-signature{display:flex;align-items:center;gap:24px}
.contact-signature .grid-signature{position:relative;transform:none;width:112px;height:112px;flex:0 0 112px;opacity:.95}
.invitation>div{align-items:center}
@media(max-width:760px){.cosmic-art .orb-artwork{transform:none}.invitation>div{flex-wrap:wrap}.contact-signature{margin-top:16px}.contact-signature .grid-signature{width:88px;height:88px;flex-basis:88px}}

.invitation-identity{display:flex;align-items:center;gap:22px}.invitation-identity h2{margin:0}.invitation-identity .grid-signature{position:relative;transform:none;width:112px;height:112px;flex:0 0 112px;opacity:.95}
@media(max-width:760px){.invitation-identity{gap:14px}.invitation-identity .grid-signature{width:72px;height:72px;flex-basis:72px}.invitation-identity h2{font-size:clamp(22px,5vw,32px)}}

/* Display only the reference hero, preserving its embedded typography exactly. */
.cosmic-hero{aspect-ratio:1536/724;height:auto}
.cosmic-art .orb-artwork{width:100%;height:auto;top:-8.98%;left:0;bottom:auto;right:auto;object-fit:initial;transform:none;mask-image:none;filter:none;animation:none}
.cosmic-hero::after{display:none}
.cosmic-copy,.cosmic-hero .sound-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Rounded navigation banner with softly varied dark tones. */
.header{background:linear-gradient(115deg,#20262d 0%,#12191f 40%,#080d14 73%,#171b23 100%);border:1px solid #ffffff12;border-radius:20px 20px 10px 10px;box-shadow:inset 0 1px 0 #ffffff0a;margin-top:14px;margin-bottom:10px;padding:18px 26px;width:calc(89% - 0px);max-width:1282px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.header{padding:16px 18px;border-radius:16px 16px 8px 8px;gap:14px}.header nav{padding-left:0}}
/* Square edges aligned with the hero, with a gently raised surface. */
.header{border-radius:0;background:linear-gradient(180deg,#343d48 0%,#232c36 12%,#151d27 47%,#0c131c 76%,#171f2a 100%);border:1px solid #53607066;box-shadow:inset 0 2px 2px #ffffff24,inset 0 -3px 5px #0008,0 8px 18px #0007,0 1px 0 #000; padding:20px 30px}
@media(max-width:760px){.header{border-radius:0;padding:17px 20px}}

.header .wordmark,.header nav button{text-shadow:0 1px 1px #000b;position:relative;top:-2px}

/* Sculpted monome keys dissolve into the navigation surface. */
.header{position:relative;isolation:isolate;min-height:108px;padding-left:244px;background:linear-gradient(180deg,#2b3540,#17212b 48%,#101820);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -3px 5px #0007,0 8px 18px #0007}
.header-pads{position:absolute;z-index:-1;pointer-events:none;left:0;top:0;bottom:0;width:288px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:4px;overflow:hidden;mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 100%)}
.header-pads span{border-radius:3px;background:linear-gradient(135deg,#e9eef0,#afb9c2 55%,#7c8995);border:1px solid #ffffff40;box-shadow:inset 1px 2px 2px #fff8,inset -2px -3px 3px #26344366,3px 5px 7px #0009}
.header-pads .dark{background:linear-gradient(135deg,#435463,#1e2c39);border-color:#60718150;box-shadow:inset 1px 1px 1px #ffffff25,3px 5px 7px #0008}
.header-pads .lit{background:linear-gradient(135deg,#ffd67a,#ec9a21 55%,#ae5909);border-color:#ffde9c80;box-shadow:inset 1px 2px 2px #fff6,inset -2px -3px 3px #75400866,0 0 10px #e8911933,3px 5px 7px #0009}
@media(max-width:1100px){.header{padding-left:170px;gap:20px}.header-pads{width:206px}.header nav{gap:18px}.header .wordmark{font-size:25px;letter-spacing:.32em}}
@media(max-width:760px){.header{padding-left:90px;min-height:96px}.header-pads{width:126px;grid-template-columns:repeat(8,1fr);gap:2px}.header .wordmark{font-size:clamp(18px,4.5vw,25px);letter-spacing:.23em}}

/* A small animated fragment of the instrument. */
.header{padding-left:158px;min-height:108px}
.header-pads{left:15px;top:10px;bottom:10px;width:112px;grid-template-columns:repeat(3,1fr);gap:5px;padding:3px;mask-image:linear-gradient(90deg,#000 65%,#0006)}
.header-pads .lit{animation:header-pad-glow 7.3s ease-in-out infinite;animation-delay:var(--delay)}
.header-pads .lit:nth-child(7){animation-duration:10.1s}
@keyframes header-pad-glow{0%,15%,85%,100%{filter:saturate(.08) brightness(.85)}40%,55%{filter:saturate(1) brightness(1.12)}}
@media(max-width:1100px){.header{padding-left:140px}.header-pads{width:100px}}
@media(max-width:760px){.header{padding-left:96px}.header-pads{left:10px;width:70px;top:15px;bottom:auto;height:66px;gap:3px}}
@media(prefers-reduced-motion:reduce){.header-pads .lit{animation:none}}

/* Diagonal relief, inspired by the supplied stepped-square reference. */
.header-pads{overflow:visible;gap:0;width:108px;top:5px;bottom:5px;left:14px;padding:0;mask-image:none}
.header-pads span{border-radius:0;margin:2px;background:linear-gradient(135deg,#c3cbd1,#8b979f);border:0;box-shadow:inset 1px 1px 0 #ffffff40,8px 9px 8px #0008;transform:translateY(-1px)}
.header-pads .dark{visibility:hidden}
.header-pads .lit{box-shadow:inset 1px 1px 0 #ffe3a780,8px 9px 8px #0009}
.header-pads span:nth-child(8){opacity:.5}
@media(max-width:760px){.header-pads{width:66px;height:66px;top:14px;left:12px}}

/* Independent, randomly scheduled light fades on every visible header key. */
.header-pads span:not(.dark){position:relative;animation:none;filter:none;background:linear-gradient(135deg,#c3cbd1,#8b979f);box-shadow:inset 1px 1px 0 #ffffff40,8px 9px 8px #0008}
.header-pads span:not(.dark)::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffd67a,#ec9a21 55%,#ae5909);box-shadow:inset 1px 1px 0 #ffe3a780,0 0 10px #ec9a2140;opacity:var(--light,0)}

/* Deep blue-black backdrop drawn from the original visual reference. */
:root{--bg:#020508;--surface:#080d12;--line:#171e25}
body{background:radial-gradient(ellipse at 48% 36%,#060c13 0%,#020508 58%,#010305 100%);background-color:var(--bg)}
.study{background:#020508}

/* Darker navigation surface, retaining a restrained raised edge. */
.header{background:linear-gradient(180deg,#19222b 0%,#0e161e 48%,#080e15 100%);border-color:#3c485455;box-shadow:inset 0 1px 0 #ffffff1a,inset 0 -3px 5px #0007,0 8px 18px #0007}

/* Slimmer navigation banner, keeping the hero alignment. */
.header{min-height:76px;padding-top:12px;padding-bottom:12px;padding-left:120px}
.header-pads{width:75px;height:66px;top:4px;bottom:auto;left:14px}
@media(max-width:1100px){.header{padding-left:110px}.header-pads{width:72px}}
@media(max-width:760px){.header{min-height:72px;padding-top:12px;padding-bottom:12px;padding-left:88px}.header-pads{width:60px;height:58px;left:10px;top:6px}}

/* Fine points of light drift at different depths above the original artwork. */
.cosmic-stars{display:block;mix-blend-mode:screen;pointer-events:none}
.cosmic-stars i{background:#e3f4ff;box-shadow:0 0 4px #a5d7ff99;border-radius:50%;opacity:.3;animation:hero-star-depth var(--duration) ease-in-out infinite alternate,hero-star-twinkle var(--twinkle) ease-in-out infinite;animation-delay:var(--delay);will-change:transform,opacity}
.cosmic-stars i.sparkle::before,.cosmic-stars i.sparkle::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(transparent,#dcefffbb,transparent);width:1px;height:9px;transform:translate(-50%,-50%)}
.cosmic-stars i.sparkle::after{transform:translate(-50%,-50%) rotate(90deg);height:7px}
@keyframes hero-star-depth{from{transform:translate3d(0,0,0) scale(.8)}to{transform:translate3d(var(--dx),var(--dy),0) scale(1.15)}}
@keyframes hero-star-twinkle{0%,100%{opacity:.12}38%{opacity:var(--peak)}65%{opacity:.24}80%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.cosmic-stars{display:none}}

/* More legible sparkle against the luminous hero. */
.cosmic-stars{z-index:2}
.cosmic-stars i{width:2.5px!important;height:2.5px!important;background:#f0f8ff;box-shadow:0 0 5px #c1e5ff,0 0 10px #7abfff77}
.cosmic-stars i.sparkle{width:3px!important;height:3px!important}
.cosmic-stars i.sparkle::before{height:15px}.cosmic-stars i.sparkle::after{height:12px}
@keyframes hero-star-depth{from{transform:translate3d(0,0,0) scale(.8)}to{transform:translate3d(calc(var(--dx)*2),calc(var(--dy)*2),0) scale(1.2)}}
@keyframes hero-star-twinkle{0%,100%{opacity:.08}38%{opacity:1}65%{opacity:.2}80%{opacity:.75}}

/* A small lift in star presence and depth. */
.cosmic-stars i{width:2.9px!important;height:2.9px!important;box-shadow:0 0 6px #d0ebff,0 0 12px #7abfff88}
.cosmic-stars i.sparkle{width:3.5px!important;height:3.5px!important}
.cosmic-stars i.sparkle::before{height:17px}.cosmic-stars i.sparkle::after{height:14px}
@keyframes hero-star-depth{from{transform:translate3d(0,0,0) scale(.8)}to{transform:translate3d(calc(var(--dx)*2.4),calc(var(--dy)*2.4),0) scale(1.25)}}
@keyframes hero-star-twinkle{0%,100%{opacity:.15}38%{opacity:1}65%{opacity:.3}80%{opacity:.85}}

/* Concentrated sparkle inside the orb silhouette. */
.globe-stars{position:absolute;left:40.7%;top:6%;width:37.5%;height:82%;clip-path:ellipse(49% 49% at 50% 50%)}
.cosmic-stars .globe-stars i{width:3.6px!important;height:3.6px!important;background:#fff;box-shadow:0 0 5px #fff,0 0 11px #abdcff,0 0 17px #80baff88}
.cosmic-stars .globe-stars i.sparkle{width:4px!important;height:4px!important}
.cosmic-stars .globe-stars i.sparkle::before{height:20px;background:linear-gradient(transparent,#fff,transparent)}
.cosmic-stars .globe-stars i.sparkle::after{height:17px;background:linear-gradient(transparent,#fff,transparent)}

/* Let the particle ribbon rise softly into the universe artwork. */
.hero-particle-blend{position:absolute;left:0;bottom:0;width:100%;height:43%;z-index:1;pointer-events:none;opacity:.57;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,transparent 0%,#0002 25%,#0009 65%,#000 100%);filter:saturate(.85)}
@media(prefers-reduced-motion:reduce){.hero-particle-blend{display:none}}

/* Give the contact instrument more presence in the open invitation area. */
.invitation-identity .grid-signature{width:clamp(140px,15vw,192px);height:clamp(140px,15vw,192px);flex-basis:clamp(140px,15vw,192px)}
.invitation-identity{gap:30px}
@media(max-width:760px){.invitation-identity .grid-signature{width:96px;height:96px;flex-basis:96px}.invitation-identity{gap:16px}}

.home-video{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cosmic-hero.video-ready .orb-artwork{visibility:hidden}
.cosmic-hero.video-ready .cosmic-copy{clip-path:none;overflow:visible;width:auto;height:auto;white-space:normal;margin:0;left:3.2%;top:26%;transform:none;z-index:3}
.cosmic-hero.video-ready .cosmic-copy h2{font-family:"Avenir Next",Avenir,sans-serif;font-size:clamp(36px,5.2vw,80px);line-height:.98;font-weight:300;letter-spacing:-.035em;margin:18px 0 0}
.cosmic-hero.video-ready .cosmic-copy .micro{font-size:clamp(8px,.8vw,12px);letter-spacing:.4em;color:#eee}
.cosmic-hero.video-ready .cosmic-art:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#020508b0,transparent 55%);pointer-events:none}

/* Bring the footer wordmark closer to the monome instrument. */
.home-page .invitation{padding-bottom:10px}
.home-page footer{padding-top:12px}

/* Artist portrait beside the homepage invitation. */
.home-page .invitation-identity{gap:28px;min-width:0}
.home-page .invitation-portrait{display:block;width:clamp(150px,16vw,210px);height:auto;aspect-ratio:1;object-fit:contain;flex:0 0 auto;border-radius:4px}
.home-page .invitation-identity .grid-signature{width:clamp(100px,10vw,136px);height:clamp(100px,10vw,136px);flex-basis:clamp(100px,10vw,136px)}
.home-page .invitation-identity h2{font-size:clamp(24px,2.3vw,34px)}
.home-page .invitation .contact-signature{flex-shrink:0}
@media(max-width:900px){.home-page .invitation>div{flex-wrap:wrap}.home-page .invitation .contact-signature{margin-left:auto}}
@media(max-width:600px){.home-page .invitation-identity{display:grid;grid-template-columns:150px 1fr;gap:20px;width:100%}.home-page .invitation-portrait{width:150px}.home-page .invitation-identity .grid-signature{width:96px;height:96px;justify-self:center}.home-page .invitation-identity h2{grid-column:1 / -1}.home-page .invitation .contact-signature{margin:4px 0 12px}}

/* Wide performance portrait in the homepage invitation. */
.home-page .invitation-portrait{width:clamp(280px,30vw,510px);aspect-ratio:2061 / 763;height:auto;max-width:100%}
.home-page .invitation-identity{gap:20px}
.home-page .invitation-identity .grid-signature{width:88px;height:88px;flex-basis:88px}
.home-page .invitation-identity h2{font-size:clamp(22px,2vw,30px)}
@media(max-width:1100px){.home-page .invitation>div{flex-wrap:wrap}.home-page .invitation-identity{flex:1}}
@media(max-width:760px){.home-page .invitation-identity{display:grid;grid-template-columns:80px minmax(0,1fr);gap:18px;width:100%}.home-page .invitation-portrait{grid-column:1 / -1;width:100%;max-width:510px}.home-page .invitation-identity .grid-signature{width:72px;height:72px}.home-page .invitation-identity h2{grid-column:2}.home-page .invitation .contact-signature{margin:4px 0 12px}}

.home-page .invitation-identity .grid-signature{width:176px;height:176px;flex-basis:176px}
@media(max-width:1100px) and (min-width:761px){.home-page .invitation-identity{flex-wrap:wrap}}
@media(max-width:760px){.home-page .invitation-identity{grid-template-columns:144px minmax(0,1fr)}.home-page .invitation-identity .grid-signature{width:144px;height:144px;flex-basis:144px}}

.home-page .invitation>.micro{display:block;transform:translateY(-9px)}