@import url('./assets/fonts/fonts.css');
:root{--bg:#101216;--ink:#f3eee6;--muted:#c1c5ca;--line:#ffffff24;--accent:#ffae72;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none}a,button,input{-webkit-tap-highlight-color:transparent}a:hover,button:hover{color:#fff}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #ffb27a;outline-offset:6px}::selection{background:#bf512d;color:white}h1,h2,h3,p{margin-top:0}.site-header{position:fixed;z-index:30;inset:0 0 auto;height:104px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.site-header a,.site-header nav{pointer-events:auto}.wordmark img{width:78px;height:60px;display:block}.site-header nav{display:flex;align-items:center;gap:28px;font-size:17px;color:#f1e9de}.listing-page .site-header,.artifact-page .site-header{background:var(--bg)}.skip-link{position:fixed;left:20px;top:-80px;background:var(--ink);color:#111;padding:15px;z-index:100}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#tour{position:relative;height:1040svh}.tour-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}#scene{position:absolute;inset:0;z-index:0;pointer-events:none}#scene canvas{display:block;width:100%;height:100%}#scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;font-size:32px;color:#e4d6c0;padding:12px;transition:opacity .2s}.tour-caption,.illustration-label,.wall-caption{position:absolute;left:50%;transform:translateX(-50%);z-index:4;text-align:center;opacity:0;width:min(90%,800px);transition:opacity .2s;pointer-events:none}.tour-caption{bottom:10%}.tour-caption.is-visible,.illustration-label.is-visible,.wall-caption.is-visible{opacity:1;pointer-events:auto}.tour-caption h2{font-size:38px;font-weight:500;letter-spacing:-1px;margin-bottom:20px}.illustration-label{top:17%;max-width:800px}.illustration-label h2{font-size:clamp(24px,2.8vw,36px);font-weight:400;line-height:1.35;letter-spacing:-.65px;margin:0}#courses-label{top:13%;max-width:830px}.research-hooks{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;font-size:20px;color:#ffd0a0;margin-bottom:24px}.research-hooks a{border-bottom:1px solid #ffd0a055;padding-bottom:6px}.text-link{font-size:20px;display:inline-flex;align-items:center;gap:20px;padding:7px 0 10px;border-bottom:1px solid #d9bd9366}.wall-caption{bottom:8%;width:min(92%,900px)}.wall-caption p{font-size:23px;line-height:1.4;margin-bottom:12px}.wall-caption strong{font-weight:500;color:#ffd0a0}.scroll-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}#stars{top:110svh}#research{top:290svh}#courses{top:400svh}#projects{top:490svh}#movies{top:620svh}#media{top:775svh}.intro-fallback{display:none;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:3;text-align:center;font-size:clamp(24px,3vw,40px);width:85%;line-height:1.45;max-width:720px}.webgl-unavailable .intro-fallback{display:block}.webgl-unavailable #scene{background:#21252b}.contact{position:relative;background:var(--bg);min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 5% 110px;text-align:center}.contact h2{font-size:clamp(48px,6vw,88px);font-weight:500;letter-spacing:-2px;margin-bottom:34px}.contact-email{font-size:clamp(22px,2.4vw,32px);padding-bottom:14px;border-bottom:1px solid #ffad7266}.contact-links{display:flex;gap:35px;margin-top:34px;font-size:20px;color:#e5d4bf}footer{font-size:16px;color:#b8bfc6;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding:28px 0;line-height:1.7;flex-wrap:wrap}.contact footer{position:absolute;bottom:0;left:5%;right:5%;text-align:left}.contact footer div{display:flex;gap:25px}.contact footer button{padding:0;color:inherit;font-size:inherit}.quiet-link,.case-back,.artifact-back{font-size:18px;color:#d5c4af}.listing{max-width:1300px;margin:auto;padding:160px 6% 80px}.listing>h1{font-size:clamp(48px,6vw,82px);font-weight:500;letter-spacing:-2.5px;line-height:1.08;margin:45px 0 26px}.listing-intro{color:#c1c5ca;font-size:22px;line-height:1.6;max-width:800px;margin-bottom:55px}.solid-button{background:#ffc18e;color:#17191d}.outline-button{border:1px solid #d5bd9f;color:#f6e2c8}.solid-button,.outline-button{padding:14px 23px;border-radius:0;font-size:18px}button:disabled{opacity:.4;cursor:not-allowed}.demo-buttons{display:flex;gap:16px}.less-motion *{scroll-behavior:auto!important;animation:none!important;transition:none!important}input[type=range]{width:100%;margin:26px 0 15px;accent-color:#ffb47e;cursor:pointer;height:5px}@media(max-width:700px){.site-header{height:85px;padding:0 5%}.wordmark img{width:60px;height:49px}.site-header nav{gap:16px;font-size:15px}.site-header nav>a:last-child{display:none}.tour-caption{bottom:11%}.tour-caption h2{font-size:31px}.illustration-label{top:17%;width:90%}.illustration-label h2{font-size:25px}#courses-label{top:12%}#courses-label h2{font-size:22px}.research-hooks{font-size:18px;gap:12px;margin-bottom:20px;flex-direction:column;align-items:center}.wall-caption p{font-size:20px}.wall-caption{bottom:9%}.contact{padding-bottom:150px}.contact h2{font-size:58px}.contact-links{font-size:19px;gap:30px}.contact footer{font-size:15px;gap:12px}.contact footer div{gap:18px}.listing{padding:110px 6% 60px}.listing>h1{font-size:48px;letter-spacing:-1.4px}.listing-intro{font-size:19px;line-height:1.55}.text-link{font-size:19px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Left-aligned illustration titles and the longer continuous exhibition. */
#tour{height:1810svh}#projects{top:573svh}#movies{top:1120svh}#media{top:1360svh}#applications{top:839svh}#music{top:1485svh}
.illustration-label{left:7%;transform:none;text-align:left;top:16%;width:86%;max-width:1150px}.illustration-label h2{font-size:clamp(36px,4.5vw,62px);font-weight:650;line-height:1.08;letter-spacing:-1.9px;max-width:1000px}#courses-label{left:7%;top:13%;max-width:1080px}#courses-label h2{font-size:clamp(30px,3.5vw,45px);font-weight:650;line-height:1.12;letter-spacing:-1.2px}.wall-caption p{font-size:27px;font-weight:500}.room-tour noscript{position:absolute;top:150px;left:7%;right:7%;font-size:24px;z-index:50}
@media(max-width:700px){.illustration-label{left:6%;top:15%;width:88%}.illustration-label h2{font-size:37px;letter-spacing:-1.1px}#courses-label{left:6%;top:13%;width:88%}#courses-label h2{font-size:27px;letter-spacing:-.6px;line-height:1.15}.wall-caption p{font-size:23px}}

#friends{top:1235svh}

/* Clear gateways into the substantive work. */
.tour-gateway{display:inline-flex;align-items:center;gap:24px;padding:18px 26px;background:#f3e5cd;color:#17212a;font-size:clamp(25px,2.8vw,39px);font-weight:650;letter-spacing:-.7px;border:2px solid #f3e5cd;line-height:1.12;pointer-events:auto}
.tour-gateway span{font-size:1.25em}.tour-gateway:hover,.tour-gateway:focus-visible{background:#ffb674;border-color:#ffb674;color:#10151b;outline:3px solid #fff;outline-offset:6px}
#courses-caption{bottom:9%}.contact h2{max-width:1000px;font-weight:650;font-size:clamp(52px,7vw,94px);line-height:1.04;letter-spacing:-2px}.contact-invitation{font-size:clamp(30px,3vw,42px);margin:28px 0 48px}
@media(max-width:700px){.tour-gateway{font-size:26px;padding:17px 21px;gap:18px}#research-caption,#courses-caption{bottom:8%}.contact h2{font-size:54px;letter-spacing:-1.5px}}

@media(max-width:700px){#applications{top:882svh}}

/* The captions frame the visual rather than compete with it. */
#transit-interaction{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;pointer-events:none;touch-action:pan-y}
#transit-interaction.is-visible{opacity:1;pointer-events:auto;cursor:crosshair}
#transit-interaction:focus-visible{outline:2px solid #9ceae7;outline-offset:-8px}
#research-caption{width:min(92%,1020px);bottom:7%}
.research-paths{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;width:min(100%,880px);margin:0 auto 25px;text-align:left}
.research-paths a{display:block;border-top:1px solid #c1d7df50;padding-top:15px}
.research-paths strong{display:block;font-size:clamp(22px,2.1vw,29px);font-weight:700;line-height:1.18;margin-bottom:7px;color:#f3eee6}
.research-paths span{display:block;font-size:20px;line-height:1.35;color:#c4d3dc}
.research-paths a:hover strong{color:#ffba86}
#courses-caption{width:min(94%,1140px);bottom:5%}
.course-outline{font-size:21px;line-height:1.45;text-wrap:balance;margin:0 auto 23px;max-width:1100px;color:#d5e0e6}
.periodic-highlight{font-weight:750;background:linear-gradient(90deg,#9ceae7,#cfb1ff,#ffba86,#9ceae7);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:harmonic-colour 8s linear infinite}
@keyframes harmonic-colour{to{background-position:200% 0}}
@media(max-width:700px){#research-caption{bottom:6%}.research-paths{grid-template-columns:1.2fr 1fr;gap:18px;margin-bottom:21px}.research-paths strong{font-size:21px}.research-paths span{font-size:20px}.course-outline{font-size:20px;line-height:1.35;max-width:540px;margin-bottom:21px}#courses-caption{bottom:5%}#courses-label h2{font-size:24px}#courses-label{top:12%}.illustration-label h2{font-weight:750}}
@media(prefers-reduced-motion:reduce){.periodic-highlight{background:none;color:#9ceae7}}
.less-motion .periodic-highlight{background:none;color:#9ceae7}

/* Three roles: languages (amber), interface/visual tools (rose), data/backend (green). */
.tone-green{--tech:#81e4a4;--tech-halo:#55d38830}.tone-rose{--tech:#ff8ca8;--tech-halo:#ff5f9030}.tone-amber{--tech:#ffca82;--tech-halo:#ffb24a28}
.tech-word{color:var(--tech);font-weight:650;text-shadow:0 0 12px var(--tech-halo)}
.concept-word{color:var(--ink);font-weight:650}
.skill-tags{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 30px;padding:0}.skill-tags li{color:var(--tech);font-size:20px;line-height:1.3;font-weight:550;padding:8px 13px;border:1px solid var(--tech-halo);border-radius:3px;text-shadow:0 0 12px var(--tech-halo)}

#games-caption{left:auto;right:5.5%;top:43%;bottom:auto;transform:none;width:21%;text-align:left}#games-caption p{font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.6px;max-width:260px;text-wrap:balance}
@media(max-width:700px){#games-caption{right:5%;top:41%;width:28%}#games-caption p{font-size:22px;letter-spacing:-.35px;line-height:1.25}.skill-tags{gap:10px}.skill-tags li{font-size:20px;padding:7px 10px}}

#games-gallery{display:none}#games-caption{z-index:5}
@media(max-width:700px){#games-gallery{display:block;position:absolute;inset:0;z-index:4;background:#101216;opacity:0;pointer-events:none;transition:opacity .35s}#games-gallery.is-visible{opacity:1;pointer-events:auto}.game-posters{position:absolute;left:6%;top:15%;bottom:9%;width:57%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:20px}.game-posters article{min-height:0;display:flex;flex-direction:column;transform:translateY(15px);transition:transform .5s}.is-visible .game-posters article{transform:none}.game-posters article:nth-child(2){transition-delay:.08s}.game-posters article:nth-child(3){transition-delay:.16s}.game-posters img{width:100%;height:calc(100% - 36px);min-height:0;object-fit:cover}.game-posters h3{font-size:22px;line-height:1.1;font-weight:650;letter-spacing:-.5px;margin:10px 0 0}#games-caption{right:5%;width:28%;top:42%}}
@media(prefers-reduced-motion:reduce){.game-posters article{transform:none;transition:none}}

#tour{height:845svh}
/* Let the closing invitation end naturally, without a spare screen of empty space. */
.contact{min-height:0;padding:110px 5% 24px}
.contact footer{position:static;inset:auto;width:100%;margin-top:64px;padding:24px 0 0}
@media(max-width:700px){.contact{padding:92px 5% 24px}.contact footer{margin-top:48px}}
#tour{height:1010svh}
#tour .scroll-anchor{top:0}

/* Neptune blue keeps the observations within the same visual world as the sky. */
.room-tour{--bg:#030916;--ink:#edf3ff;--muted:#a8bad6;background:var(--bg)}
#research-label h2{color:#e4edff}
#research-caption .research-paths span{color:#a7bde1}
#research-caption .research-paths a{border-color:#92b8ff44}
#research-caption .research-paths a:hover strong{color:#9dc4ff}
#research-caption .tour-gateway{background:#d9e7ff;border-color:#d9e7ff;color:#0b1e3f}
#research-caption .tour-gateway:hover{background:#9dc4ff;border-color:#9dc4ff}
.room-tour .periodic-highlight{animation-play-state:paused}
.room-tour #courses-label.is-visible .periodic-highlight,.room-tour #courses-caption.is-visible .periodic-highlight{animation-play-state:running}

#courses-label{top:16%;max-width:1150px}#courses-label h2{font-size:clamp(36px,4.5vw,62px);font-weight:650;line-height:1.08;letter-spacing:-1.9px;max-width:1000px;color:#e4edff}
@media(max-width:700px){#courses-label{top:15%;width:88%}#courses-label h2{font-size:37px;font-weight:750;line-height:1.08;letter-spacing:-1.1px}}

/* A plain DM Sans monogram; only the tour header fades with the camera. */
.site-header .wordmark{display:flex;align-items:center;justify-content:center;width:60px;height:48px}
.site-header .wordmark img{display:block;width:54px;height:34px}
.room-tour .site-header{opacity:var(--tour-header-opacity,1);will-change:opacity}
.room-tour .site-header.is-cinematic,.room-tour .site-header.is-cinematic a,.room-tour .site-header.is-cinematic nav{pointer-events:none}
@media(max-width:700px){.site-header .wordmark{width:48px;height:44px}.site-header .wordmark img{width:46px;height:30px}}

.room-tour .sky-credit{opacity:calc(var(--tour-header-opacity,1)*.7)}

/* Each research title opens its own case study; the tour continues on scroll. */
#research-caption{bottom:16%}
#research-caption .research-paths{margin-bottom:0}
.research-paths strong{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.research-arrow{width:25px;height:25px;flex:0 0 25px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .2s}
.research-paths a:hover .research-arrow,.research-paths a:focus-visible .research-arrow{transform:translate(3px,-3px)}
@media(max-width:700px){#research-caption{bottom:15%}.research-paths strong{gap:8px}.research-arrow{width:21px;height:21px;flex-basis:21px}}