@font-face{font-family:Geist;src:url('/assets/fonts/geist-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url('/assets/fonts/geist-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url('/assets/fonts/geist-600.ttf') format('truetype');font-weight:600;font-display:swap}
:root{
  --map-paper:#fbfbfa;
  --map-glass:rgba(255,255,255,.7);
  --map-stroke:rgba(60,60,55,.11);
  --map-shadow:0 3px 6px rgba(30,30,25,.025),0 14px 40px rgba(30,30,25,.045);
  --map-radius:20px;
  --map-wire:#cdceca;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--map-paper);color:var(--text-neutral-primary);font:400 14px/1.5 var(--font-family-sans),sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{border:0}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:2px solid var(--text-neutral-secondary);outline-offset:6px}
h1,h2,h3,p{margin:0}
.skip-link{position:fixed;top:-100px;left:24px;padding:12px 20px;background:white;z-index:100}
.skip-link:focus{top:16px}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:var(--gap-related-compact);padding:var(--page-top) var(--gap-sections-compact) 0;min-height:64px}
.wordmark{font-size:var(--font-size-body);font-weight:500;letter-spacing:-.2px}
.contact-link{display:flex;align-items:center;gap:var(--gap-icon-label-default);padding:8px 0;background:transparent;color:var(--text-neutral-secondary);font-size:13px}
.contact-link img{width:16px;height:16px;opacity:.7}
.contact-link:hover{color:var(--text-neutral-primary)}
.workspace{width:100%;max-width:1240px;padding:0 64px;margin:auto;flex:1;display:flex;flex-direction:column;justify-content:center}
.work-map{--ux-position:34%;--project-height:184px;--project-art-height:120px;--project-art-inset:7px;--spotify-top:436px;--convo-position:calc(var(--spotify-top) + var(--project-height)/2);height:640px;min-height:640px;position:relative;isolation:isolate}
#connections,#connection-ports{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#connections{z-index:-1}
#connection-ports{z-index:2}
.origin{position:absolute;width:248px;left:0;top:calc((var(--ux-position) + var(--convo-position))/2);transform:translateY(-50%);text-align:center}
.avatar-link{position:relative;display:block;width:216px;height:220px;margin:0 auto;border:1px solid rgba(255,255,255,.95);border-radius:40px;background:rgba(255,255,255,.48);box-shadow:inset 0 0 0 1px #23231f05,0 10px 40px #23231f06;transition:background .3s,box-shadow .3s}
.avatar{width:242px;height:242px;position:absolute;left:50%;bottom:0;transform:translateX(-50%);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 8px #23231f0b);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.avatar-link:hover{background:#fff;box-shadow:0 10px 40px #23231f10}
.avatar-link:hover .avatar{transform:translateX(-50%) translateY(-6px) rotate(-2deg)}
.branch{display:contents}
.branch-label{position:absolute;left:39%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:4px 16px 4px 4px;border:1px solid var(--map-stroke);border-radius:999px;font-size:14px;font-weight:500;line-height:36px;white-space:nowrap;background:rgba(255,255,255,.85);box-shadow:0 3px 10px #23231f05;backdrop-filter:blur(12px)}
.branch-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #23231f09}
.branch-icon img{width:18px;height:18px;opacity:.8}
.branch-ux .branch-label{top:var(--ux-position)}
.branch-convo .branch-label{top:var(--convo-position)}
.project-list{display:contents}
.project-card{display:block;position:absolute;left:69%;width:264px;height:var(--project-height);padding:6px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);border-radius:var(--map-radius);box-shadow:var(--map-shadow),inset 0 0 0 1px #23231f08;backdrop-filter:blur(16px);transition:box-shadow .25s,background .25s,translate .25s}
.project-inno{top:20px}
.project-carrefour{top:228px}
.project-spotify{top:var(--spotify-top)}
.project-card:hover,.project-card:focus-visible{translate:0 -4px;background:#fff;box-shadow:0 6px 12px #23231f07,0 16px 40px #23231f12,inset 0 0 0 1px #23231f10}
.project-art{position:relative;height:var(--project-art-height);overflow:hidden;border-radius:14px;isolation:isolate}
.project-art>img{display:block;position:absolute;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.image-label{position:absolute;left:10px;top:9px;z-index:1;font-size:9px;line-height:16px;padding:2px 7px;border:1px solid #ffffff8c;border-radius:5px;background:#ffffffa6;color:#485556;backdrop-filter:blur(12px)}
.inno-art{background:#e7f3f3}
.inno-art>img{width:218px;height:auto;left:27px;top:35px;transform:rotate(-5deg);border:1px solid #c9dcdc;border-radius:5px;box-shadow:0 8px 18px #22474820}
.project-inno:hover .project-art>img{transform:rotate(-2deg) translateY(-6px)}
.carrefour-art{background:#e7eef4}
.carrefour-art>img{height:156px;width:auto;right:44px;top:6px;transform:rotate(8deg)}
.project-carrefour:hover .project-art>img{transform:rotate(4deg) translateY(-6px)}
.spotify-art{background:#e6eafb}
.spotify-art>img{width:117px;height:auto;right:52px;top:14px;transform:rotate(-10deg);filter:drop-shadow(0 8px 8px #172c7726)}
.project-spotify:hover .project-art>img{transform:rotate(-5deg) translateY(-6px)}
.project-caption{height:50px;display:flex;align-items:center;justify-content:space-between;padding:5px 9px 0;gap:8px}
.project-caption h3{font-size:14px;font-weight:500;line-height:21px;letter-spacing:-.1px}
.project-caption p{font-size:10px;color:var(--text-neutral-secondary);line-height:16px}
.open-project{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#f2f2ef;flex-shrink:0}
.open-project img{width:12px;height:12px;opacity:.65}
.site-footer{padding:16px 48px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--text-neutral-secondary);font-size:11px;min-height:72px}
.location{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.location-dot{width:5px;height:5px;border-radius:50%;background:var(--background-location-default,#0a84ff);opacity:.65}
.footer-divider{color:#c5c5bf;padding:0 2px}
#timezone{color:#84847d}
.social-links{display:flex;gap:8px}
.social-links a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#ededeb;opacity:.8;transition:opacity .2s,transform .2s}
.social-links img{width:30px;height:30px}
.social-links a:nth-child(2) img{width:15px;height:15px}
.social-links a:hover{opacity:1;transform:translateY(-2px)}
.reveal{animation:arrive .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--reveal-delay,0ms)}
.branch.reveal{animation:none}
.branch.reveal>.branch-label{animation:arrive .8s ease both;animation-delay:var(--reveal-delay)}
@keyframes arrive{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
dialog{border:1px solid var(--border-neutral-subtle);border-radius:24px;padding:40px;width:min(440px,calc(100% - 32px));box-shadow:0 24px 100px #23231f25;background:#ffffffee;backdrop-filter:blur(18px);color:var(--text-neutral-primary)}
dialog::backdrop{background:#31312f25;backdrop-filter:blur(8px)}
.close-dialog{position:absolute;right:16px;top:16px;padding:6px 10px;height:32px;display:grid;place-items:center;background:#f5f5f2;border-radius:999px;font-size:11px}
.close-dialog img{width:16px;height:16px}
.eyebrow{font-size:12px;color:var(--text-neutral-secondary)}
dialog h2{font-weight:500;font-size:36px;letter-spacing:-1px;margin:12px 0}
.email-address{font-size:18px}
.email-address:hover{text-decoration:underline;text-underline-offset:4px}
.contact-actions{display:flex;gap:8px;margin-top:32px}
.contact-actions>a,.contact-actions>button{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#f1f1ed;font-size:12px}
.contact-actions .button-primary{background:var(--text-neutral-primary);color:white}
.button-primary img{width:14px;filter:brightness(0) invert(1)}
#copy-status{font-size:12px;min-height:18px;margin-top:12px;color:var(--text-neutral-secondary)}
@media(min-width:1500px){.workspace{max-width:1320px}.work-map{--project-height:200px;--project-art-height:136px;--spotify-top:468px;height:690px}.project-card{width:280px}.project-carrefour{top:244px}}
@media(min-width:761px) and (max-height:800px){
  .work-map{--ux-position:33%;--project-height:160px;--project-art-height:96px;--spotify-top:356px;height:520px;min-height:520px}
  .project-inno{top:4px}.project-carrefour{top:180px}
  .origin .avatar-link{width:196px;height:192px}.avatar{width:218px;height:218px}
  .carrefour-art>img{height:130px;right:54px;top:1px}
  .spotify-art>img{width:100px;top:5px;right:64px}
  .inno-art>img{top:29px}
}
@media(max-width:1100px) and (min-width:761px){.workspace{padding:0 72px 0 88px}.origin{width:204px}.avatar-link{width:180px;height:190px}.avatar{width:210px;height:210px}.branch-label{left:44%;font-size:12px;padding-right:10px;gap:6px}.branch-icon{width:28px;height:28px}.branch-icon img{width:15px;height:15px}.project-card{left:72%;width:218px}.project-caption p{font-size:9px}.site-header{padding-inline:32px}.site-footer{padding-inline:32px}}
@media(max-width:760px){
  .site-header{padding:var(--page-top) 24px 0}.wordmark{font-size:13px}.contact-link{font-size:12px}
  .workspace{padding:0 24px;margin:0}
  .work-map{height:auto;min-height:0;padding:var(--gap-sections-compact) 0 32px}
  .origin{position:relative;top:auto;left:auto;transform:none;width:100%;margin:0 auto 72px}
  .avatar-link{width:176px;height:180px;border-radius:32px}.avatar{width:208px;height:208px}
  .branch{display:block;position:relative;margin:0 auto 48px;width:100%;max-width:360px;padding-left:24px}
  .branch-label{position:relative;left:auto!important;top:auto!important;transform:none;width:max-content;margin:0 0 24px -24px;font-size:14px}
  .branch-icon{width:32px;height:32px}
  .project-list{display:grid;gap:24px}
  .project-card{position:relative;inset:auto;width:100%;height:230px;padding:6px;border-radius:20px}
  .project-art{height:164px}.project-caption{height:52px}
  .project-caption h3{font-size:15px}.project-caption p{font-size:11px}
  .inno-art>img{width:280px;left:24px;top:37px}
  .carrefour-art>img{height:200px;right:54px;top:8px}
  .spotify-art>img{width:145px;right:56px;top:18px}
  .image-label{font-size:10px}
  .branch-convo{margin-bottom:0}
  .site-footer{padding:0 24px 24px;flex-direction:column;gap:16px;align-items:center;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Scale the desktop composition as one unit, keeping the header and footer intact. */
@media(min-width:761px){.work-map{--map-scale:var(--portfolio-map-scale);transform:scale(var(--map-scale));transform-origin:center}
 .branch-label{transform:translate(-50%,-50%) scale(calc(1 / var(--map-scale)))}}