.folio-index{height:100svh;overflow:hidden;background:#f3eee5;color:var(--text-default)}
html:has(.folio-index),body:has(.folio-index){background:#f3eee5}
.spatial-touch-hint,.spatial-browse-arrow{display:none}
.spatial-browser,.spatial-browse-controls{display:contents}
.spatial-browser{touch-action:pinch-zoom}
.spatial-showcase{--paper:#f3eee5;--ink:var(--text-default);--mx:0;--my:0;position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:var(--paper);color:var(--ink);touch-action:none;user-select:none}
.spatial-showcase button{font:inherit;color:inherit}
.spatial-header{position:absolute;z-index:100;inset:0 0 auto;height:76px;padding:0 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.spatial-header a,.spatial-header button{padding:0;border:0;background:none;color:inherit;text-decoration:none;font-family:var(--font-mono),ui-monospace,monospace;font-size:clamp(12.32px,.952vw,14.56px);line-height:1;letter-spacing:.075em;text-transform:uppercase;opacity:.64;cursor:pointer;transition:opacity .25s ease}
.spatial-header a:hover,.spatial-header button:hover,.spatial-header a:focus-visible,.spatial-header button:focus-visible{opacity:1;outline:0}.spatial-header>button{justify-self:start}
.spatial-header .spatial-name{grid-column:2;justify-self:center;font-family:var(--font-display),sans-serif;font-size:23.8px;font-weight:500;letter-spacing:-.04em;text-transform:none;opacity:1}.spatial-header nav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:clamp(28px,3.5vw,56px)}
.spatial-ambient{position:absolute;z-index:-3;inset:-18%;background:radial-gradient(ellipse 48% 40% at calc(30% + var(--mx)*5%) calc(70% + var(--my)*4%),rgba(208,174,108,.28),transparent 70%),radial-gradient(ellipse 46% 38% at calc(76% + var(--mx)*-6%) calc(22% + var(--my)*-4%),rgba(230,170,175,.24),transparent 72%),radial-gradient(circle at 50% 50%,rgba(41,53,111,.055),transparent 46%);filter:blur(42px);transform:translate3d(calc(var(--mx)*-22px),calc(var(--my)*-16px),0);transition:transform .25s ease-out;animation:ambient-breathe 11s ease-in-out infinite alternate}
.spatial-showcase:after{content:'';position:absolute;z-index:90;inset:0;pointer-events:none;opacity:.1;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='.85' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");mix-blend-mode:multiply}@keyframes ambient-breathe{to{transform:translate3d(calc(var(--mx)*-22px + 18px),calc(var(--my)*-16px - 12px),0) scale(1.05)}}
.spatial-heading{position:absolute;z-index:50;top:94px;left:34px;width:min(520px,43vw);pointer-events:none}.spatial-heading-copy{animation:heading-arrive .72s cubic-bezier(.16,1,.3,1) both}@keyframes heading-arrive{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.spatial-heading-copy>span,.spatial-profile>span,.spatial-status{font-family:var(--font-mono),ui-monospace,monospace;font-size:clamp(11px,.82vw,13px);line-height:1.25;letter-spacing:.09em;text-transform:uppercase}.spatial-heading-copy>span{opacity:.9;font-weight:600}.spatial-profile>span{opacity:.72}
.spatial-heading h1{margin:12px 0 12px;font-family:var(--font-display),sans-serif;font-size:clamp(46px,4.9vw,76px);font-weight:580;line-height:.84;letter-spacing:-.07em;text-wrap:balance}.spatial-heading p{max-width:470px;margin:0;font-size:clamp(14px,1.18vw,18px);font-weight:500;line-height:1.46;opacity:.9}
.spatial-status{position:absolute;z-index:50;top:102px;right:34px;display:flex;align-items:baseline;gap:8px;opacity:.48;pointer-events:none}.spatial-status b{font-size:18px;font-weight:500;letter-spacing:-.04em}.spatial-status i{font-style:normal}
.spatial-world{position:absolute;z-index:10;inset:0;pointer-events:none}
.spatial-card{position:absolute;top:44.2%;left:50%;width:clamp(460px,50vw,760px);height:auto;min-height:0;padding:14px;display:grid;grid-template-rows:auto auto auto;gap:13px;border:0;border-radius:34px;background:#f9f8f4;color:var(--ink);text-decoration:none;box-shadow:0 30px 72px rgba(41,53,111,.14),0 0 0 1px rgba(41,53,111,.09);transform-origin:center;cursor:pointer;pointer-events:auto;contain:layout paint;backface-visibility:hidden;will-change:transform,opacity;transition:background-color .25s ease}
.spatial-card.is-active{box-shadow:0 30px 72px rgba(41,53,111,.14),0 0 0 1px rgba(41,53,111,.09)}
.spatial-card:hover,.spatial-card:focus-visible{background:#fbfaf6;box-shadow:0 34px 80px rgba(41,53,111,.16);outline:0}.spatial-card-top{position:relative;inset:auto;padding:7px 8px 2px;display:grid;grid-template-columns:1fr auto;align-items:center;color:var(--ink);font-family:var(--font-mono),ui-monospace,monospace;font-size:clamp(11px,.84vw,13px);line-height:1.15;text-transform:uppercase;letter-spacing:.07em}.spatial-card-top em{font-style:normal;font-weight:400}.spatial-card-top i{font-style:normal;font-weight:400;opacity:.72}
.spatial-card-media{min-height:0;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:#fff}.spatial-card-media img,.spatial-card-media video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.spatial-card-bottom{min-height:84px;padding:10px 8px 9px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;text-align:left}.spatial-card-bottom strong{color:var(--ink);font-family:var(--font-display),sans-serif;font-size:clamp(36px,3.45vw,54px);font-weight:580;line-height:.86;letter-spacing:-.058em}.spatial-card-bottom small{display:flex;align-items:center;gap:8px;font-family:var(--font-mono),ui-monospace,monospace;font-size:clamp(10px,.72vw,12px);line-height:1.2;text-transform:uppercase;letter-spacing:.065em;white-space:nowrap;opacity:.7;transform:translateX(-5px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}.spatial-card-bottom small svg{width:16px;height:16px;stroke-width:1.5}.spatial-card:hover .spatial-card-bottom small{opacity:1;transform:none}
.spatial-years{position:absolute;z-index:60;left:50%;bottom:clamp(100px,20svh,300px);display:flex;align-items:center;gap:clamp(21.6px,2.64vw,40.8px);transform:translateX(-50%)}.spatial-years button{padding:8.4px 0;display:flex;align-items:center;gap:10.8px;border:0;background:none;font-family:var(--font-mono),ui-monospace,monospace;font-size:clamp(10.8px,.864vw,13.2px);letter-spacing:.055em;opacity:.46;cursor:pointer;transition:opacity .3s ease,transform .3s ease}.spatial-years button i{width:7.2px;height:7.2px;border-radius:50%;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1)}.spatial-years button.is-active{opacity:1}.spatial-years button.is-active i{transform:scale(1.7)}.spatial-years button:hover{opacity:1;transform:translateY(-2px)}
.spatial-instructions{position:absolute;z-index:60;left:34px;right:34px;bottom:23px;display:flex;justify-content:space-between;font-family:var(--font-mono),ui-monospace,monospace;font-size:.625rem;line-height:1.5;text-transform:uppercase;letter-spacing:.075em;opacity:.58;pointer-events:none}
.spatial-profile{position:absolute;z-index:110;inset:0;padding:clamp(105px,13vh,150px) max(34px,8vw) 55px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);grid-template-rows:auto 1fr auto;gap:35px 8vw;background:rgba(243,238,229,.95);backdrop-filter:blur(28px);visibility:hidden;opacity:0;transform:translateY(24px);transition:visibility 0s .55s,opacity .38s ease,transform .65s cubic-bezier(.16,1,.3,1)}.is-profile-open .spatial-profile{visibility:visible;opacity:1;transform:none;transition-delay:0s}.spatial-profile>button{position:absolute;top:94px;right:34px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(41,53,111,.08);cursor:pointer}.spatial-profile>button svg{width:17px;height:17px;stroke-width:1.4}.spatial-profile>span{grid-column:1/-1}.spatial-profile h2{align-self:center;max-width:940px;margin:0;font-family:var(--font-display),sans-serif;font-size:clamp(48px,7vw,108px);font-weight:560;line-height:.89;letter-spacing:-.075em}.spatial-profile>div{align-self:end;font-size:14px;line-height:1.62;opacity:.75}.spatial-profile p{margin:0 0 18px}.spatial-profile>a{grid-column:2;align-self:end;min-height:52px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--font-mono),ui-monospace,monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;text-decoration:none}.spatial-profile>a svg{width:16px;height:16px;stroke-width:1.5}
html.project-card-moving.motion-ready .detail-opening,html.project-card-moving.motion-ready .detail-opening>*,html.project-card-moving.motion-ready .detail-side dl div{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
html.project-card-moving .detail-opening .detail-hero-media img,html.project-card-moving .detail-opening .detail-hero-media video{transition:none!important}
html.project-card-moving .spatial-header,html.project-card-moving .spatial-heading,html.project-card-moving .spatial-status,html.project-card-moving .spatial-years,html.project-card-moving .spatial-instructions,html.project-card-moving .spatial-card:not(.is-card-moving){opacity:0!important;filter:blur(3px);transition:opacity .14s ease,filter .18s ease}
.project-card-shell-flight,.project-card-media-flight,.project-card-copy-flight{position:fixed;pointer-events:none;transform:translateZ(0);will-change:transform,opacity}
.project-card-shell-flight{z-index:9998}
.project-card-media-flight{z-index:10000;overflow:hidden;contain:layout paint;will-change:transform,opacity,box-shadow}
.project-card-media-flight img,.project-card-media-flight video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.project-card-copy-flight{z-index:10002;margin:0!important;padding:0!important;text-wrap:balance}
.project-card-copy-flight.is-index,.project-card-copy-flight.is-client,.project-card-copy-flight.is-year{white-space:nowrap;text-transform:uppercase}
@media(max-width:900px){.spatial-heading{width:48vw}.spatial-heading p{font-size:14px}.spatial-card{width:clamp(430px,64vw,620px)}}
@media(max-width:700px){.spatial-showcase{min-height:560px}.spatial-header{height:68px;padding:0 14px}.spatial-header .spatial-name{font-size:21px}.spatial-header a,.spatial-header button{font-size:11.2px}.spatial-header nav{gap:18px}.spatial-header nav a:last-child{display:none}.spatial-heading{top:82px;left:16px;width:calc(100% - 32px)}.spatial-heading h1{max-width:79%;font-size:39px}.spatial-heading p{display:none}.spatial-status{top:90px;right:16px;font-size:9px}.spatial-status span{display:none}.spatial-status b{font-size:14px}.spatial-world{transform:none}.spatial-card{top:40.8%;width:90vw;min-width:300px;max-width:520px;padding:11px;border-radius:28px}.spatial-card-media{border-radius:18px}.spatial-card-top{grid-template-columns:1fr auto;padding:5px 6px 0}.spatial-card-bottom{min-height:68px}.spatial-card-bottom strong{font-size:32px}.spatial-card-bottom small{display:none}.spatial-years{bottom:clamp(90px,14svh,150px);gap:21.6px}.spatial-years button{font-size:10.8px}.spatial-years button:not(.is-active){font-size:0}.spatial-instructions{left:16px;right:16px;bottom:20px}.spatial-instructions span:last-child{display:none}.spatial-profile{padding:100px 18px 28px;display:flex;flex-direction:column;gap:24px}.spatial-profile>button{top:80px;right:18px}.spatial-profile h2{margin:auto 0 0;font-size:12.5vw}.spatial-profile>div{font-size:13px}.spatial-profile>a{width:100%}}
@media(max-height:680px) and (min-width:701px){.spatial-heading h1{font-size:44px}.spatial-heading p{font-size:12px}.spatial-card{top:44.2%;width:min(43vw,540px)}.spatial-years{bottom:72px}.spatial-instructions{bottom:18px}}
@media(prefers-reduced-motion:reduce){.spatial-ambient{animation:none}.spatial-header a,.spatial-header button,.spatial-heading-copy,.spatial-profile,.spatial-years,.spatial-card{transition:none!important}}

/* One shared-element handoff, with the same timing for image and title. */
@view-transition{navigation:auto}
.spatial-card.is-opening .spatial-card-media{view-transition-name:project-hero}
.spatial-card.is-opening .spatial-card-bottom strong{view-transition-name:project-title}
::view-transition-group(root){animation-duration:.68s}
::view-transition-group(project-hero),
::view-transition-group(project-title){
  animation-duration:.68s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-group(project-hero){z-index:10000;overflow:clip}
::view-transition-group(project-title){z-index:10002}
::view-transition-old(root){animation:route-root-out .24s ease both}
::view-transition-new(root){animation:route-root-in .48s .12s ease both}
::view-transition-old(project-hero),::view-transition-old(project-title){
  animation:shared-out .68s linear both;
  mix-blend-mode:plus-lighter;
}
::view-transition-new(project-hero),::view-transition-new(project-title){
  animation:shared-in .68s linear both;
  mix-blend-mode:plus-lighter;
}
::view-transition-old(project-hero),::view-transition-new(project-hero){
  width:100%;height:100%;object-fit:contain;
}
@keyframes route-root-out{to{opacity:0}}
@keyframes route-root-in{from{opacity:0}to{opacity:1}}
@keyframes shared-out{0%,30%{opacity:1}85%,100%{opacity:0}}
@keyframes shared-in{0%,30%{opacity:0}85%,100%{opacity:1}}

/* Render the destination at its final geometry before hydration. No second entrance. */
html .detail .detail-opening,
html .detail .detail-opening>*,
html .detail .detail-side dl div{
  opacity:1!important;transform:none!important;clip-path:none!important;
  animation:none!important;transition:none!important;
}
html .detail .detail-opening .detail-hero-media:after{animation:none!important;opacity:0}
html .detail .detail-opening .detail-hero-media img,
html .detail .detail-opening .detail-hero-media video{
  transform:translate3d(0,var(--opening-image-y,0px),0) scale(var(--opening-scale,1));
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms!important;animation-delay:0s!important}
}

/* The active project stays above adjacent cards, including their hover states. */
.spatial-card{
  z-index:var(--card-layer,20);
  opacity:var(--card-opacity,1);
  translate:0 0;
  rotate:0deg;
  scale:1;
  filter:saturate(.9) brightness(.96);
  transition:
    background-color .24s ease,
    box-shadow .42s cubic-bezier(.16,1,.3,1),
    translate .42s cubic-bezier(.16,1,.3,1),
    rotate .5s cubic-bezier(.16,1,.3,1),
    scale .42s cubic-bezier(.16,1,.3,1),
    filter .32s ease;
}
.spatial-card.is-active{z-index:30;filter:none}
.spatial-card-media{
  transition:box-shadow .34s ease;
}
@media(hover:hover) and (pointer:fine){
  .spatial-card:not(.is-active):is(:hover,:focus-visible){
    z-index:var(--card-layer,20)!important;
    opacity:var(--card-opacity,1)!important;
    translate:0 0;
    rotate:0deg;
    scale:1;
    filter:saturate(.95) brightness(1);
    background:#fbfaf6;
    box-shadow:0 34px 80px rgba(41,53,111,.16);
  }
  .spatial-card:not(.is-active):is(:hover,:focus-visible) .spatial-card-media{
    box-shadow:none;
  }
  .spatial-card:not(.is-active):is(:hover,:focus-visible) .spatial-card-bottom small{
    opacity:1;
    transform:none;
  }
  .spatial-showcase.is-carousel-moving .spatial-card{
    translate:0 0;
    rotate:0deg;
    scale:1;
  }
  .spatial-showcase.is-carousel-moving .spatial-card:not(.is-active):is(:hover,:focus-visible){
    z-index:var(--card-layer,20)!important;
    opacity:var(--card-opacity,1)!important;
    filter:saturate(.9) brightness(.96);
    background:#f9f8f4;
    box-shadow:0 30px 72px rgba(41,53,111,.14),0 0 0 1px rgba(41,53,111,.09);
  }
}
@media(prefers-reduced-motion:reduce){
  .spatial-card,.spatial-card-media{transition:none!important}
}

.spatial-card:focus-visible{outline:2px solid var(--ink);outline-offset:5px}

@media(min-width:701px) and (min-height:681px) and (max-height:900px){.spatial-years{bottom:80px}}

/* Use the homepage header typography and alignment on every inner page. */
.site-header.spatial-header{position:relative;inset:auto}
.site-header.spatial-header .site-menu{font-weight:400}
.site-header.spatial-header .site-menu a[href="/#work"]{display:inline}
@media(max-width:700px){
  .site-header.spatial-header .site-menu a[href="/#work"]{display:none}
}

/* Keep touch navigation and its controls in separate, unclipped rows. */
@media(max-width:700px){
  .folio-index{height:auto;min-height:100svh}
  .spatial-showcase{
    height:auto;min-height:100svh;display:flex;flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom,0px);
    touch-action:pan-y pinch-zoom;
  }
  .spatial-header{position:relative;inset:auto;height:76px;flex:none;padding-inline:20px;display:flex;justify-content:space-between;gap:16px}
  .spatial-header .spatial-name{font-size:19px}
  .spatial-header nav{gap:28px}
  .spatial-header nav a,.spatial-header nav a:last-child{display:inline-flex;align-items:center;min-height:44px}
  .spatial-browser{display:flex;flex:1;flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;min-width:0;padding-block:24px}
  .spatial-world{position:relative;inset:auto;flex:none;width:100%;height:clamp(310px,94vw,450px);min-width:0;pointer-events:auto;touch-action:pinch-zoom}
  .spatial-card{top:50%;width:82%;min-width:0;max-width:420px;gap:10px;padding:12px;border-radius:24px}
  .spatial-card-media{border-radius:14px}
  .spatial-card-top{min-width:0;gap:12px;font-size:11px}
  .spatial-card-bottom{grid-template-columns:minmax(0,1fr);min-height:72px;padding:8px 6px 12px;gap:0}
  .spatial-card-bottom strong{font-size:clamp(26px,7.2vw,32px);line-height:1.05;overflow-wrap:break-word}
  .spatial-browse-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% - 32px);max-width:360px}
  .spatial-browse-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(75,51,40,.07)}
  .spatial-browse-arrow svg{width:22px;height:22px;stroke-width:1.5}
  .spatial-browse-arrow:focus-visible{outline:2px solid currentColor;outline-offset:3px}
  .spatial-years{position:relative;inset:auto;transform:none;gap:0;max-width:100%}
  .spatial-years button{width:44px;min-width:44px;min-height:44px;justify-content:center;padding:8px;gap:0;font-size:0}
  .spatial-instructions{position:relative;inset:auto;justify-content:center;align-items:center;margin-top:4px;padding:0 16px;text-align:center;line-height:1.5}
  .spatial-instructions .spatial-desktop-hint{display:none}
  .spatial-instructions .spatial-touch-hint{display:block}
  .spatial-profile{overflow-y:auto}
}
@media(min-width:701px) and (max-height:620px){
  .folio-index{height:auto;min-height:620px}
  .spatial-showcase{touch-action:pan-y pinch-zoom}
}

@media(max-width:800px){
  .spatial-header nav a{font-size:14px;letter-spacing:.04em}
}

/* Compact year navigation with a simple, unfilled active state. */
.folio-index .spatial-years button{position:relative;transition:opacity .2s ease,color .2s ease;gap:7px;min-height:44px}
.folio-index .spatial-years button:before{content:none}
.folio-index .spatial-years button i{width:4px;height:4px;flex-shrink:0;transform:none;transition:background-color .2s ease}
.folio-index .spatial-years button.is-active i{transform:none;background:currentColor;box-shadow:none}
.folio-index .spatial-years button:hover{transform:none}
.folio-index .spatial-years button:focus-visible{outline:1px solid currentColor;outline-offset:3px;border-radius:3px}
@media(min-width:701px){.folio-index .spatial-years{gap:20px}}
@media(min-width:701px){.folio-index .spatial-years{transform:translate(-50%,30px)}.folio-index .spatial-header nav a[href="/resume"]{margin-right:18px}}
@media(min-width:701px) and (min-height:901px){.folio-index .spatial-years{transform:translate(-50%,60px)}}
@media(max-width:700px){.folio-index .spatial-browse-controls{margin-top:88px}.folio-index .spatial-years button:before{inset:3px}.folio-index .spatial-header nav a[href="/resume"]{margin-right:6px}}
@media(prefers-reduced-motion:reduce){.folio-index .spatial-years button,.folio-index .spatial-years button:before,.folio-index .spatial-years button i{transition:none}}