@font-face{font-family:ABC Areal;src:url('../fonts/ABCAreal-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:ABC Areal,Helvetica,Arial,sans-serif;color:#1c1c1e;background:#fcfcfc;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;overflow:hidden}h1,p{margin:0;font:inherit}a{color:inherit;text-decoration:none}a:hover{opacity:.5}a{transition:opacity 200ms cubic-bezier(.65,0,.35,1),color 200ms cubic-bezier(.65,0,.35,1)}a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.header{position:fixed;inset:12px 12px auto;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);width:calc(100% - 24px);gap:12px;z-index:5;pointer-events:none;font-size:.75rem;line-height:1.3}
.panel{background:#f7f7f7;border-radius:8px;padding:12px;pointer-events:auto;align-self:stretch;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:12px}.panel>*{text-box-trim:trim-both;text-box-edge:cap alphabetic}.intro{grid-column:span 2;min-width:0}.muted{opacity:.5}
.gallery{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}.gallery:active{cursor:grabbing}.track{position:absolute;inset:0;user-select:none}
.card{position:absolute;left:50%;top:50%;margin:0;width:330px;height:440px;overflow:hidden;border-radius:8px;will-change:transform;backface-visibility:hidden;background:#f7f7f7}.card img,.card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.card video{position:absolute;inset:0}
.edge{position:absolute;top:-64px;bottom:-64px;width:clamp(64px,10vw,160px);pointer-events:none;z-index:2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.edge-left{left:0;mask-image:linear-gradient(to right,#000,transparent);-webkit-mask-image:linear-gradient(to right,#000,transparent)}.edge-right{right:0;mask-image:linear-gradient(to left,#000,transparent);-webkit-mask-image:linear-gradient(to left,#000,transparent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-js{position:absolute;top:45%;padding:24px}

@media(prefers-reduced-motion:reduce){a{transition:none}.edge{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Navigation follows the approved four-panel Figma layout. */
.header{align-items:start}
.panel{height:33px;padding:12px;gap:12px;align-items:center}
.home-link{position:relative;isolation:isolate;overflow:hidden;justify-content:flex-start}
.home-progress{position:absolute;inset:0;background:#d6dae0;transform:scaleX(var(--scroll-progress,0));transform-origin:left center;pointer-events:none}
.home-link h1{position:relative;z-index:1;color:#1c1c1e;mix-blend-mode:normal;opacity:.5;white-space:nowrap;transition:opacity var(--hover-duration,200ms) var(--ui-ease,cubic-bezier(.65,0,.35,1))}
.home-link:hover{opacity:1}.home-link:hover h1,.home-link:focus-visible h1{opacity:1;text-decoration:none}
.home-link:focus-visible{outline-offset:3px}
.projects-label{justify-content:flex-start}
.info-panel{position:relative;display:block;padding:0}
.info-toggle{display:flex;align-items:center;width:100%;height:33px;padding:0 12px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.5;line-height:1.3;transition:opacity var(--hover-duration,200ms) var(--ui-ease,cubic-bezier(.65,0,.35,1))}
.info-toggle:hover,.info-toggle:focus-visible{opacity:1}.info-toggle:focus-visible{outline:1px solid currentColor;outline-offset:3px;border-radius:8px}
.info-reveal{position:absolute;top:41px;left:auto;right:0;width:min(320px,calc(100vw - 24px));display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--info-duration,625ms) var(--panel-ease,cubic-bezier(.85,0,.15,1));background:rgba(247,247,247,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:8px}
.info-clip{overflow:hidden;min-height:0}.info-content{padding:12px;display:flex;flex-direction:column;gap:12px;line-height:1.3}
.info-content p,.info-content a{text-box-trim:trim-both;text-box-edge:cap alphabetic}
.info-content p{margin-bottom:8px}.info-content>*{opacity:0;transform:translateY(15px);transition:opacity var(--text-duration,400ms) var(--ui-ease),transform var(--text-duration,400ms) var(--ui-ease)}
.info-content a{width:max-content;text-decoration:underline;text-underline-offset:2px}
.info-panel.is-open .info-reveal{grid-template-rows:1fr}
.info-panel.is-open .info-content>*{opacity:1;transform:none;transition-delay:var(--cell-delay,125ms)}
.info-panel.is-open .info-content>:nth-child(2){transition-delay:calc(var(--cell-delay,125ms)*2)}
.info-panel.is-open .info-content>:nth-child(3){transition-delay:calc(var(--cell-delay,125ms)*3)}
.info-panel.is-open .info-content a{opacity:.5}
.info-panel.is-open .info-content a:hover,.info-panel.is-open .info-content a:focus-visible{opacity:1;transition-delay:0ms}
.notwork-link{white-space:nowrap}.notwork-link span:last-child{text-decoration:none}
@media(max-width:420px){
 .header{grid-template-columns:minmax(0,1fr) repeat(2,max-content);gap:6px}
 .panel{padding-inline:8px}.info-panel{padding:0}.info-toggle{padding-inline:8px}
 .info-reveal{left:auto;right:0;width:calc(100vw - 24px)}
 .projects-panel{display:none}.edge{width:56px}
}
@media(max-width:360px){.header{inset:12px 8px auto;width:calc(100% - 16px);gap:4px}.panel{padding-inline:5px}.info-panel{padding:0}.info-toggle{padding-inline:8px}.info-reveal{width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){.info-reveal,.info-toggle,.info-content>*,.home-link h1{transition:none!important}.info-content>*{transform:none}}

@media(min-width:421px) and (max-width:1000px){.notwork-link{justify-content:flex-end}}

@supports not (text-box-trim:trim-both){.info-content p,.info-content a{margin-block: -3.3px}.info-content p{margin-bottom:4.7px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.info-reveal{background:#f7f7f7}}
@media(prefers-reduced-transparency:reduce){.info-reveal{background:#f7f7f7;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* One glass surface for every navigation bar and its disclosure. A pseudo-layer
   keeps parent backdrop isolation from preventing the dropdown's own blur. */
.panel{background:transparent;position:relative;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(247,247,247,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:none}
.projects-content p{margin-bottom:0}
.projects-panel .info-reveal{width:160px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel::before{background:#f7f7f7}}
@media(prefers-reduced-transparency:reduce){.panel::before{background:#f7f7f7;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Content-sized desktop navigation; compact phones keep Home and Info. */
.header>.panel{min-width:0}

/* Soft color field for the future not.work destination. The entrance uses the
   saved UI easing with a slower soft reveal; color fields move independently. */
.notwork-link{overflow:hidden;border:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.notwork-link>span{position:relative;z-index:1;transition:opacity var(--hover-duration,200ms) var(--ui-ease,cubic-bezier(.65,0,.35,1))}
 .notwork-link::after{content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;opacity:0;background:
 radial-gradient(ellipse,rgba(242,168,195,.95),transparent 65%),
 radial-gradient(ellipse,rgba(171,158,231,.9),transparent 65%),
 radial-gradient(ellipse,rgba(143,204,242,.95),transparent 65%),
 radial-gradient(ellipse,rgba(249,220,146,.9),transparent 65%);
 background-size:8% 30%,10% 25%,8% 30%,10% 25%;background-repeat:no-repeat;
 filter:blur(14px);
 transition:opacity 1400ms ease-out,background-size 1800ms ease-out;
 animation:notwork-color-drift 4s ease-in-out infinite alternate}
@keyframes notwork-color-drift{
 0%{background-position:-40% 20%,30% 100%,140% 0%,100% 100%}
 50%{background-position:35% 90%,110% 0%,20% 100%,-30% 0%}
 100%{background-position:130% 0%,-40% 100%,70% 10%,30% 90%}
}
@media(hover:hover){.notwork-link:hover::after{opacity:.8;background-size:75% 240%,80% 260%,75% 240%,70% 220%}.notwork-link:hover>span:last-child{opacity:1}}
.notwork-link:focus-visible::after,.notwork-link.is-selected::after,.notwork-link[aria-current="page"]::after{opacity:.8;background-size:75% 240%,80% 260%,75% 240%,70% 220%}
.notwork-link:focus-visible>span:last-child,.notwork-link.is-selected>span:last-child,.notwork-link[aria-current="page"]>span:last-child{opacity:1}
.notwork-link:focus-visible{outline:1px solid #1c1c1e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.notwork-link::after{animation:none;transition:none}.notwork-link>span{transition:none}}

/* Detached disclosures share the viewport inset on compact screens. */
@media(max-width:600px){.info-reveal,.projects-panel .info-reveal{position:fixed;top:53px;left:12px;right:12px;width:auto}}
@media(max-width:360px){.info-reveal,.projects-panel .info-reveal{left:8px;right:8px}}

/* Shared 400ms / 15px text motion, with stable centered resting geometry. */
.notwork-label{display:inline-grid}
.notwork-domain,.notwork-soon{grid-area:1 / 1;justify-self:center;transition:opacity var(--text-duration,400ms) var(--ui-ease,cubic-bezier(.65,0,.35,1)),transform var(--text-duration,400ms) var(--ui-ease,cubic-bezier(.65,0,.35,1))}
.notwork-domain{transform:translateY(0)}
.notwork-soon{opacity:0;transform:translateY(15px)}
@media(hover:hover){.notwork-link:hover .notwork-domain{opacity:0;transform:translateY(-15px)}.notwork-link:hover .notwork-soon{opacity:1;transform:translateY(0)}}
.notwork-link:focus-visible .notwork-domain,.notwork-link.is-selected .notwork-domain{opacity:0;transform:translateY(-15px)}
.notwork-link:focus-visible .notwork-soon,.notwork-link.is-selected .notwork-soon{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.notwork-link .notwork-domain,.notwork-link .notwork-soon{transition:none;transform:none}}