@font-face{font-family:Architekt;src:url('fonts/NBArchitektStd-Regular.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#f2f0f8;width:100%;height:100%;overflow:hidden;font-family:Architekt,monospace}
#Stage{position:fixed!important;inset:0;overflow:hidden;pointer-events:none}
/* Replace the archived UI only; leave the particle scene and materials alone. */
#Stage>.AboutView,#Stage>.SidebarNav,#Stage>.MobileIntro,#Stage>.ExperimentIFrame,#Stage>.LandscapeNotice,.HubLogo{display:none!important}
/* One viewport frame owns header/footer geometry. Only the middle row scrolls,
   so a wrapped footer never covers the last project paragraph or link. */
.works-frame{position:fixed;inset:0;z-index:3;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;pointer-events:none}
/* Reserve only the remaining music control; leave the former icon rail clear. */
.works-topbar{min-width:0;min-height:max(88px,calc(env(safe-area-inset-top) + 64px));pointer-events:auto}
html[data-embedded-works] .works-topbar{min-height:0}
#works{position:relative;z-index:3;display:grid;grid-template-columns:270px minmax(0,1fr);min-width:0;min-height:0;overflow:hidden;pointer-events:none}
.project-browser,.project-story{pointer-events:auto}
.project-browser{position:relative;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:linear-gradient(90deg,#000 75%,rgba(0,0,0,.88));display:flex;flex-direction:column;padding-bottom:20px;scroll-padding:12px}
.identity{display:flex;align-items:center;gap:13px;margin:16px 20px 24px}
.identity-mark{display:block;flex:none;width:33px;height:33px;object-fit:contain}
.identity h1{font-size:21px;line-height:1.15;font-weight:400;margin:0}.identity p{font-size:11px;color:#a49daf;margin:3px 0 0}
.skill-filters{display:flex;flex-wrap:wrap;gap:4px;padding:0 20px 18px}
button,a{font:inherit}button{cursor:pointer}
.skill-filters button{border:0;border-radius:0;background:#232126;color:#d4cedd;padding:5px 7px;font-size:10px;text-transform:uppercase}
.skill-filters button:hover{background:#e6e0f3;color:#131019}.skill-filters button[aria-pressed=true]{background:#aa88ff;color:#161020}
button:focus-visible,a:focus-visible{outline:2px solid #c5adff;outline-offset:4px}
.project-list{padding:4px 20px;flex:none;min-width:0}
.project-card{display:flex;flex-direction:column;width:100%;border:0;border-top:1px solid #3b3545;padding:7px 0 20px;background:transparent;color:#ece8f2;text-align:left;margin-bottom:7px}
.card-media{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:9px 0 9px 0;background:#0d0b12}.card-poster,.card-preview{display:block;width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .2s}.card-preview{position:absolute;inset:0;opacity:0}.card-media.playing .card-preview{opacity:.9}
.project-card:hover .card-media.playing .card-preview,.project-card[aria-pressed=true] .card-media.playing .card-preview{opacity:1}
.project-card:hover .card-poster,.project-card[aria-pressed=true] .card-poster{opacity:1}.project-card[aria-pressed=true]{border-top-color:#bda0ff}
.card-title{font-size:14px;margin-top:9px}.card-subtitle{font-size:11px;line-height:1.4;margin-top:4px;color:#a9a2b7}
.project-story{position:relative;align-self:center;justify-self:end;width:360px;max-width:100%;min-width:0;min-height:0;max-height:100%;margin-right:clamp(25px,7vw,140px);overflow-y:auto;overscroll-behavior:contain;padding:16px 10px;scroll-padding:16px;scrollbar-width:thin;overflow-wrap:anywhere;text-shadow:0 1px 15px #000;background:radial-gradient(ellipse,rgba(0,0,0,.68),rgba(0,0,0,.1) 75%)}
.story-intro{color:#baa3e8;font-size:12px;margin:0 0 14px}.project-title{font-size:34px;line-height:1.05;font-weight:400;margin:0 0 7px}.project-subtitle{font-size:15px;line-height:1.4;color:#c4bbd3;margin:0 0 22px}
.project-title-link{color:#c9b3ff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.project-title-link:hover{color:#fff}
.story-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #3a3249;margin:0 0 22px;border-radius:12px 0 12px 0;background:#0d0b12}
.project-poster,.project-preview{display:block;width:100%;height:100%;object-fit:contain}.project-preview{position:absolute;inset:0;opacity:0}.story-media.playing .project-preview{opacity:1}
.story-copy{font-size:14px;line-height:1.55;margin:0 0 15px;color:#e0dbe8;text-transform:none}.project-stack,.project-note{font-size:11px;line-height:1.5;color:#b3a9c5;margin:22px 0 0}.project-note{margin-top:9px}
.project-links{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:22px}.project-links a{font-size:12px;color:#c9b3ff;text-decoration-thickness:1px;text-underline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.no-script{position:relative;z-index:5;padding:24px}.no-script a{color:#c9b3ff}
.site-credits--works{z-index:4;padding:12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));min-width:0;overflow-wrap:anywhere}
.site-credits--works .site-contacts a{width:44px;height:44px;padding:0}
.site-credits--works .site-contacts svg{display:block;width:15px;height:15px;pointer-events:none}
@media(max-width:1050px){#works{grid-template-columns:245px minmax(0,1fr)}.project-story{margin-right:20px;width:330px}}
@media(max-width:760px){
  /* Override the old music-control content spacer: the frame owns that space. */
  html[data-soundtrack-autoplay] .works-frame #works{display:block;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 20px;scroll-padding:16px;pointer-events:auto}
  .project-browser{background:transparent;width:100%;padding:0;overflow:visible}
  .identity{margin:16px 0 24px}
  .skill-filters{padding:0 0 20px}
  .project-list{display:flex;gap:16px;padding:4px 4px 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding:4px}
  .project-card{flex:0 0 210px;margin:0;padding-bottom:20px}
  .project-story{width:100%;max-height:none;margin:12px 0 0;padding:22px 4px;background:linear-gradient(transparent,rgba(0,0,0,.75));overflow:visible}
  .story-media{max-width:480px}.story-copy{max-width:520px}.project-title{font-size:32px}
}
@media(max-width:600px){
  .site-credits--works{gap:4px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .site-credits--works .site-attribution{gap:0}
}
@media(max-width:480px){
  .works-topbar{min-height:max(72px,calc(env(safe-area-inset-top) + 48px))}
  .site-credits--works{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  /* Keep all five full-sized contact targets on one row at 320px. */
  .site-credits--works .site-contacts ul{gap:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}#Stage{display:none!important}.project-preview,.card-preview{display:none}}