html{scroll-behavior:smooth}body{cursor:auto}.portfolio-header{height:68px;position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(250,249,247,.75);backdrop-filter:blur(16px);box-sizing:border-box;font-family:'Instrument Sans',sans-serif}.brand{display:block;width:42px;height:32px}.brand img{display:block;width:100%;height:100%;object-fit:contain}.portfolio-header nav{display:flex;align-items:center;gap:32px}.portfolio-header nav a{font-size:16px;color:#111;text-decoration:none;transition:color .15s}.portfolio-header nav a:hover{color:#757575}.menu-toggle{display:none;background:none;border:0;padding:12px;cursor:pointer}.menu-toggle span{display:block;width:22px;height:1px;background:#111;margin:5px 0}.portfolio-header a:focus-visible,[data-project]:focus-visible{outline:2px solid #ae392f;outline-offset:5px}[data-project]{cursor:pointer}[data-project] [data-site-name="Project Video"]{opacity:0;transition:opacity .3s}[data-project] [data-site-name="Project Video"].is-playing{opacity:1}
.project-thumbnail{border-radius:10px;overflow:hidden}
.about-playground{position:relative;width:100%;height:100%;background:#f5f5f3;border-radius:24px;overflow:hidden;touch-action:none}.floating-item{position:absolute;box-sizing:border-box;user-select:none;cursor:grab;will-change:transform;font-family:Inter,'Instrument Sans',sans-serif;transform-origin:center}.floating-item:active{cursor:grabbing}.about-bio{width:380px;max-width:calc(100% - 40px);min-height:140px;background:#efefea;border:1px solid #dfdfd6;border-radius:24px;padding:20px;font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em}.about-photo{width:150px;border-radius:20px;overflow:hidden}.about-photo img{width:100%;height:auto;display:block;pointer-events:none}.about-music{width:300px;height:174px;border:1px solid #e4e4df;border-radius:12px;overflow:hidden;background:#f5f5f3}.about-music iframe{display:block;width:100%;height:152px;border:0}.drag-handle{height:22px;background:#ecece8;border-bottom:1px solid #e1e1dc;text-align:center;color:#b8b8b2;line-height:16px;letter-spacing:3px}.standalone-horizontal{scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}.standalone-horizontal::-webkit-scrollbar{display:none}
@media(max-width:809px){.portfolio-header{padding:0 20px}.menu-toggle{display:block}.portfolio-header nav{display:none;position:absolute;top:68px;left:0;right:0;padding:26px;background:rgba(250,249,247,.98);flex-direction:column;gap:24px}.portfolio-header.menu-open nav{display:flex}.about-bio{font-size:13px;line-height:1.2}.portfolio-header.menu-open .menu-toggle span:first-child{transform:translateY(3px) rotate(45deg)}.portfolio-header.menu-open .menu-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}}
@font-face{font-family:Inter;src:url('/media/inter-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@media(max-width:809px){[data-site-name="Title"],[data-site-name="Bio"]{max-width:100%;white-space:normal!important}.site-1jjfzp p,.site-14ti2j5 p{font-size:32px!important;line-height:1.2!important;white-space:normal!important}h1{font-size:clamp(30px,8vw,48px)!important;white-space:normal!important}}
@media(min-width:810px) and (max-width:1199px){.portfolio-header{padding:0 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

@media(max-width:809px){.site-14ti2j5{white-space:normal!important;width:100%!important;max-width:100%}.site-14ti2j5 p{font-size:30px!important}}

/* Navigation uses direct cuts. */
@view-transition{navigation:none}

/* Shared text selection color across the portfolio. */
::selection{background:#0000ff;color:#fff}

/* Native rolling identity, with space reserved so navigation stays still. */
@font-face{font-family:'ABC Areal';src:url('/media/ABCAreal-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.brand-rolling{width:448.03px;max-width:calc(100% - 310px);flex:none;display:flex;align-items:center}
.brand-rolling rolling-logo{--logo-width:448.03px;--logo-font:'ABC Areal',Arial,sans-serif;--logo-focus-color:#0000ff;width:100%}
@media(max-width:809px){.brand-rolling{width:448.03px;max-width:calc(100% - 64px)}}

/* Shared header geometry for home, project, Explore, and About pages. */
body .portfolio-header{max-width:1600px;margin-inline:auto;padding:0 40px;top:calc(clamp(24px,3vh,40px) + 4px);height:auto;line-height:normal}
body .portfolio-header .brand-rolling{display:block;aspect-ratio:1092/119}
body .portfolio-header rolling-logo{transform:translateY(-25%);margin-bottom:-6.538462%}
@media(max-width:809px){body .portfolio-header{top:18px;padding-inline:14px}}

/* Keep the main navigation clear over the page. */
/* Shared proportional header gutters on wide desktop displays. */
@media(min-width:1601px){
  body{--home-gutter:clamp(40px,3.2vw,80px)}
  body .portfolio-header,
  .site-Lg1gs .site-1yq3gp8,
  body:has(.site-Lg1gs) .site-Wk1Ui footer .site-1tlh3c3{
    max-width:none;
    padding-inline:var(--home-gutter);
  }
}
.portfolio-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* A soft highlight on project previews, including autoplaying videos. */
[data-project] .project-thumbnail{position:relative}
[data-project] .project-thumbnail::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;transition:opacity .22s ease}
@media(hover:hover){[data-project]:hover .project-thumbnail::after{opacity:.08}}
[data-project]:focus-visible .project-thumbnail::after{opacity:.08}
@media(prefers-reduced-motion:reduce){[data-project] .project-thumbnail::after{transition:none}}

.project-hover-badges{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-wrap:wrap;gap:8px;z-index:6;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.project-hover-badges span{display:block;padding:10px 14px;border-radius:10px;background:#fff;color:#181818;font:400 14px/1.25 'Instrument Sans',sans-serif;letter-spacing:0}
@media(hover:hover){[data-project]:hover .project-hover-badges{opacity:1;transform:translateY(0)}}
[data-project]:focus-visible .project-hover-badges{opacity:1;transform:translateY(0)}
@media(max-width:809px){.project-hover-badges{left:12px;bottom:12px;gap:6px}.project-hover-badges span{font-size:12px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.project-hover-badges{transition:none;transform:none}}

footer footer-rolling-logo{display:block;max-width:100%;min-width:0}footer .site-1xz56t9{white-space:normal!important;max-width:100%}footer .site-1cvn01e{min-width:0}

/* Align the shared footer with the header and homepage content gutters. */
.site-Wk1Ui footer.site-1g7hkm1{padding-inline:0;overflow:visible}
.site-Wk1Ui footer .site-1tlh3c3{box-sizing:border-box;max-width:1600px;margin-inline:auto;padding-inline:40px;overflow:visible}
.site-Wk1Ui footer .site-1cvn01e{overflow:visible}
@media(max-width:809px){.site-Wk1Ui footer .site-1tlh3c3{padding-inline:14px}}

/* Continue the page background through the footer. */
.site-Wk1Ui footer.site-1g7hkm1,footer.case-footer{background:#faf9f7}
/* Shared heading typography, including the exported homepage's paragraph titles. */
@font-face{font-family:'PP Kyoto';src:url('/media/PPKyoto-Medium.otf') format('opentype');font-style:normal;font-weight:500;font-display:swap}
html body :is(h1,h2,h3,h4,h5,h6),
html body :is(h1,h2,h3,h4,h5,h6) *{
  font-family:'PP Kyoto',sans-serif!important;
  font-weight:500!important;
}
@font-face{font-family:'PP Neue Montreal';src:url('/media/PPNeueMontreal-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Montreal';src:url('/media/PPNeueMontreal-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
html body .portfolio-header nav a,
html body .site-1excs19 .site-text{
  font-family:'PP Neue Montreal',sans-serif!important;
  font-weight:400!important;
}
html body .site-z7x7se .site-text,
html body .site-14ti2j5 .site-text{
  font-family:'Instrument Sans',sans-serif!important;
  font-weight:500!important;
}

/* About-page cursor stickers */
.about-sticker-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.about-cursor-sticker{position:absolute;height:auto;max-width:none;pointer-events:none;user-select:none;transform:translate(-50%,-50%) rotate(var(--sticker-angle));}
@keyframes about-sticker-pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--sticker-angle)) scale(.25)}12%{opacity:1;transform:translate(-50%,-50%) rotate(var(--sticker-angle)) scale(1.12)}22%,72%{opacity:1;transform:translate(-50%,-50%) rotate(var(--sticker-angle)) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--sticker-angle)) scale(.1)}}
@media(prefers-reduced-motion:reduce){.about-sticker-layer{display:none}}

[data-project][data-under-construction]{cursor:default!important}


/* Compact city bubbles with an expanding time companion. */
body .about-clocks{display:flex;align-items:center;gap:10px}
.city-clock{position:relative;flex:none;width:36px;height:34px;color:#202020}
.city-clock-label{position:relative;z-index:2;display:grid;place-items:center;width:36px;height:34px;padding:0;border:0;border-radius:50%;background:#e7e6e1;color:#202020;font:500 10px 'PP Neue Montreal',sans-serif;cursor:pointer}
.city-clock-time{position:absolute;left:41px;top:0;width:62px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#e7e6e1;transform-origin:left center;pointer-events:none}
.city-clock-time time{font:400 12px 'PP Neue Montreal',sans-serif;font-variant-numeric:tabular-nums}
.city-clock-label:focus-visible{outline:2px solid #0039a6;outline-offset:3px}


/* Inset horizontal footer bubble, with all content nested inside. */
html body .site-Wk1Ui footer.site-1g7hkm1{padding:16px 40px 24px;border:0;--border-top-width:0px}
html body .site-Wk1Ui footer.site-1g7hkm1::after{display:none}
html body .site-Wk1Ui footer.site-1g7hkm1 .site-1tlh3c3{width:100%;max-width:1520px;min-height:64px;padding:12px 24px;border-radius:999px;background:#eeede9;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
html[data-theme=dark] body .site-Wk1Ui footer.site-1g7hkm1 .site-1tlh3c3{background:#2b2b2b}
html body .site-Wk1Ui footer.site-1g7hkm1 .site-s33a3{display:flex;flex-direction:row;gap:28px;align-items:center}
@media(max-width:809px){html body .site-Wk1Ui footer.site-1g7hkm1{padding:14px 14px 20px}}
@media(max-width:600px){html body .site-Wk1Ui footer.site-1g7hkm1 .site-1tlh3c3{padding:12px 18px;gap:12px}html body .site-Wk1Ui footer.site-1g7hkm1 .site-1cvn01e{width:30px;flex:0 0 30px}html body .site-Wk1Ui footer.site-1g7hkm1 .site-s33a3{gap:16px}html body .site-Wk1Ui footer.site-1g7hkm1 a{font-size:13px}}

@media(hover:hover) and (pointer:fine){html body,html body *{cursor:var(--portfolio-cursor,auto)!important}}

/* Next-project preview at the end of each project. */
.case-page .case-next,.next-panel-overlay{box-sizing:border-box;display:grid;grid-template-columns:1fr minmax(180px,32%);align-items:start;gap:32px;position:relative;margin:80px 16px 0;width:calc(100% - 32px);min-height:300px;padding:42px 40px 64px;border:1px solid #0000000d;border-radius:40px;background:#faf9f7;color:#242424;text-decoration:none;overflow:hidden;touch-action:auto;user-select:none}
.case-page .case-next h2,.next-panel-overlay h2{font:500 clamp(24px,3.8vw,52px)/1.15 'Instrument Sans',sans-serif;margin:18px 0}
.case-page .case-next p,.next-panel-overlay p{font:400 16px/1.5 'PP Neue Montreal',sans-serif;color:#777}
.case-page .case-next img,.next-panel-overlay img{width:100%;height:180px;object-fit:cover;border-radius:20px;pointer-events:none}
.case-page .case-next:hover img{transform:none}
.next-pull-hint{position:absolute;bottom:22px;left:40px;font:400 13px/1.4 'PP Neue Montreal',sans-serif;color:#777}
.case-next:focus-visible{outline:2px solid #0039a6;outline-offset:4px}
html[data-theme=dark] .case-next,html[data-theme=dark] .next-panel-overlay{background:#121212;border-color:#ffffff0d;color:#eee}
html.next-panel-dragging{overscroll-behavior:none}
@media(max-width:600px){.case-page .case-next,.next-panel-overlay{grid-template-columns:1fr 100px;gap:20px;padding:32px 24px 62px;min-height:260px;border-radius:32px}.case-page .case-next img,.next-panel-overlay img{height:130px}.next-pull-hint{left:24px}}

.cleaning-robot-visual{position:relative;overflow:hidden}