@font-face{font-family:MontserratSite;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400.ttf') format('truetype')}
:root{--site-type:MontserratSite,sans-serif;--pane-width:min(1440px,87.64vw);--pane-inset:clamp(21px,3.82vw,55px);--pane-fill:linear-gradient(135deg,#e2f3f35e,#e7f3f22b 45%,#c2dfd64d);--pane-shadow:inset 0 1px 1px #fffffff0,inset 1px 0 1px #ffffff70,inset -1px -1px 1px #ffffff4d,0 14px 40px #00000024}
body,button,dialog,input,select,textarea,h1,h2,h3,.micro,.wordmark,.text-link,.tags span,header .wordmark,header .nav-links,header .nav-links a{font-family:var(--site-type);font-weight:400}
.name,.name b{font-family:var(--site-type)}
body{background-color:var(--metal-color,#aeb0b2);background-image:linear-gradient(to bottom,transparent 45%,#26313a60 72%,#20292fa3 100%),var(--metal-image);background-position:center;background-size:cover;background-attachment:fixed}
.container{width:var(--pane-width);max-width:none}
/* Every glass pane uses the same width, edge and inner side inset. */
.intro-grid,.experience-grid,.glass,.rail .project,.depth-mode .rail .project{padding:var(--pane-inset);border:1px solid #edffffb3;border-radius:0;background:var(--pane-fill);box-shadow:var(--pane-shadow);backdrop-filter:blur(12px) brightness(1.55) contrast(.87);-webkit-backdrop-filter:blur(12px) brightness(1.55) contrast(.87)}
.rail .project,.depth-mode .rail .project{width:var(--pane-width);max-width:none}
.project:hover{background:var(--pane-fill);box-shadow:var(--pane-shadow)}
.project:before,.project:after,.glass:before,.glass:after,.intro-grid:before,.intro-grid:after,.experience-grid:before,.experience-grid:after,dialog{border-radius:0}
/* The opening is a name and a role, with no paragraph or text shadow. */
.hero-bottom{display:block;padding:34px 0;margin-bottom:34px}
.hero-bottom .specialty{color:#fff;text-shadow:none;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.4px;max-width:none}
.intro h2{font-size:clamp(30px,3vw,48px);line-height:1.25;letter-spacing:-1.2px;max-width:800px}
.intro p{max-width:760px;line-height:1.8;margin-top:25px}
.section-title{letter-spacing:-1.6px}
/* Translucent projects enter and leave sequentially, with no hidden stack. */
.depth-mode .rail{height:clamp(480px,55svh,610px);overflow:hidden;perspective:1500px;isolation:isolate}
.depth-mode .rail .project{transform-origin:50% 50%;will-change:transform,opacity;filter:none}
.depth-mode .work-stage{padding:105px 0 21px}
.depth-mode .work-head{margin:0 auto 21px}
.work-head .section-title{margin:0}
.project h3,.depth-mode .project h3{font-size:clamp(32px,3.5vw,50px);line-height:1.15;letter-spacing:-1.2px;margin:25px 0;max-width:1000px}
.project p,.depth-mode .project p{font-size:16px;line-height:1.8;max-width:860px;margin-bottom:25px}
.project-foot{gap:0;justify-content:flex-start}
.read{font-size:13px}
.rail-note,.depth-mode .rail-note{width:var(--pane-width);margin:21px auto 0;display:flex;justify-content:flex-end;align-items:center}
.slide-controls{gap:21px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Experience reads as a set of roles, with room for context. */
.experience-grid{grid-template-columns:1fr 1.618fr;gap:55px}
.experience .section-title{margin:0}
.job:first-child{border-top:0;padding-top:0}
.job:last-child{padding-bottom:0}
.job-head{flex-direction:column;align-items:flex-start;gap:13px}
.job h3{font-size:28px;line-height:1.25;letter-spacing:-.6px}
.job .role{font-size:14px;line-height:1.7;display:block;max-width:560px}
.job-head>.micro{font-size:11px;color:#506060;letter-spacing:.7px}
.job p{max-width:760px;line-height:1.8;margin-top:21px}
/* Capabilities describe work, rather than collecting keywords. */
.capabilities-list{margin-top:55px}
.capability{display:grid;grid-template-columns:1fr 1.618fr;gap:55px;border-top:1px solid #51515157;padding:34px 0}
.capability h3{font-size:22px;font-weight:400;line-height:1.4;letter-spacing:-.5px;margin:0}
.capability.is-clickable h3{transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.capability.is-clickable:focus-within h3{transform:scale(1.025)}
@media(hover:hover){.capability.is-clickable:hover h3{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.capability.is-clickable:hover h3,.capability.is-clickable:focus-within h3{transform:none}}
.capability p{font-size:16px;line-height:1.8;color:#303030;margin:0;max-width:760px}
.education{margin-top:21px;padding-top:34px;font-size:13px;line-height:1.9}
.contact h2{max-width:1000px}
.contact-footer{padding-bottom:21px}
dialog h3{font-size:20px;font-weight:400;margin:34px 0 13px;letter-spacing:-.3px}
dialog p{font-size:16px;line-height:1.8;margin:0 0 21px}
dialog .close{display:inline-flex;align-items:center;justify-content:center;float:right;width:34px;height:34px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;cursor:pointer}
dialog .close:hover{opacity:.75}
dialog .close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@media(max-width:900px){.intro-grid,.experience-grid{grid-template-columns:1fr;gap:34px}.capability{grid-template-columns:1fr;gap:16px}.hero-bottom{margin-bottom:25px}.education{gap:25px}}
@media(max-width:600px){.intro h2{font-size:30px;letter-spacing:-.7px}.section-title{font-size:35px;letter-spacing:-1px}.project h3{font-size:32px}.project-top{flex-wrap:wrap;gap:8px}.project-foot{align-items:flex-start}.job h3{font-size:25px}.capabilities-list{margin-top:34px}.capability{padding:25px 0}.capability h3{font-size:21px}.hero-bottom{padding:25px 0}.hero-bottom .specialty{font-size:19px}.contact h2{font-size:42px;letter-spacing:-1.5px}.rail-note{display:none}}
/* Professional expertise descriptions connect directly to their project evidence. */
.depth-mode .work{height:var(--work-height,380svh)}
.expertise .section-title{margin-top:0;max-width:1100px}
.expertise-link{display:inline-block;border:0;border-bottom:1px solid #52636380;background:none;padding:0 0 7px;margin-top:21px;font:inherit;font-size:13px;line-height:1.7;cursor:pointer;text-align:left}
.expertise-link:hover{border-color:currentColor}
.project h3,.depth-mode .project h3{font-size:clamp(30px,3.2vw,46px);max-width:1100px}
@media(max-width:600px){.project h3{font-size:30px;letter-spacing:-.8px}}
/* High-resolution cropped light/shadow passes retain the continuous metal. */
.hero-relief svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-relief .relief-mobile{display:none}
@media(max-width:900px) and (orientation:portrait){.hero-relief .relief-desktop{display:none}.hero-relief .relief-mobile{display:block}}
.hero-bottom .specialty{font-size:clamp(20px,1.7vw,28px);line-height:1.45}
/* Lower-opacity reflections and a gentler brightness lift preserve frosted depth. */
:root{--pane-fill:linear-gradient(135deg,#e2f3f33b,#e7f3f214 45%,#c2dfd62b)}
.intro-grid,.experience-grid,.glass,.rail .project,.depth-mode .rail .project{backdrop-filter:blur(11px) brightness(1.25) contrast(.94);-webkit-backdrop-filter:blur(11px) brightness(1.25) contrast(.94)}
.project:before,.glass:before,.intro-grid:before,.experience-grid:before{background:linear-gradient(150deg,#efffff40,transparent 35%,#b8dfd212 75%,#d8f2ed20)}
/* The same motion layout is used in embedded previews and standalone windows. */
.depth-mode .work-stage{display:grid;grid-template-rows:auto minmax(0,1fr);gap:21px;align-content:stretch;justify-content:normal;height:100svh;min-height:0;padding:110px 0 34px;overflow:hidden}
.depth-mode .work-head{margin:0 auto;align-self:end}
.depth-mode .rail{width:100%;height:100%;max-height:610px;align-self:center;display:block;overflow:hidden;perspective:1500px}
.depth-mode .rail .project{position:absolute;left:50%;top:0;height:100%;min-height:0;margin:0;overflow:auto;overscroll-behavior:auto;scrollbar-width:thin}
/* JS anchors the bare tracker to the resting glass pane at every screen size. */
.project-tracker{position:fixed;left:0;right:auto;top:0;bottom:auto;transform:none;z-index:8;width:34px;height:0;display:grid;grid-template-rows:34px minmax(0,1fr) 34px;align-items:center;justify-items:center;gap:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#243438;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
.project-tracker.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.project-tracker button{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;background:none;font-size:22px;line-height:1;cursor:pointer}
.project-tracker button:disabled{opacity:.25;cursor:default}
.tracker-dots{display:flex;flex-direction:column;align-items:center}
.project-tracker .tracker-dot{width:30px;height:20px;font-size:0}
.tracker-dot:before{content:'';width:5px;height:5px;background:#fff;border-radius:50%;box-shadow:0 0 1px #0c1b2980;transition:transform .2s}
.tracker-dot[aria-current="step"]:before{background:#fff;transform:scale(1.6);outline:1px solid #fff;outline-offset:2px}
#tracker-count{font-size:9px;line-height:1.3;white-space:nowrap}
@media(max-width:600px){.depth-mode .work-stage{padding:94px 0 25px;gap:18px}.depth-mode .work-head .section-title{font-size:31px}.depth-mode .project h3{font-size:27px;margin:18px 0}.depth-mode .project p{font-size:14px;line-height:1.7}.project-tracker{width:34px}.depth-mode .project-top{padding-bottom:13px}}
@media(max-height:550px){.depth-mode .work-stage{padding-top:94px;padding-bottom:16px;gap:13px}.depth-mode .work-head .section-title{font-size:28px}.project-tracker{gap:3px;padding:4px 0}.project-tracker .tracker-dot{height:15px}.project-tracker button{height:26px}}

dialog{background:linear-gradient(140deg,#e6f3f1d6,#d2e8e3cc);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
/* Golden-ratio rhythm governs the principal gaps, insets and column proportions. */
:root{--phi:1.61803398875;--space-3xs:5px;--space-2xs:8px;--space-xs:13px;--space-sm:21px;--space-md:34px;--space-lg:55px;--space-xl:89px;--space-xxl:144px}
.intro-grid,.experience-grid,.capability{grid-template-columns:1fr 1.61803398875fr;gap:var(--space-lg)}
.hero-bottom{padding:var(--space-md) 0;margin-bottom:var(--space-md)}
.intro p,.job p,.capability p,dialog p{line-height:var(--phi)}
.intro p,.job p{margin-top:var(--space-sm)}
.project h3,.depth-mode .project h3{margin:var(--space-sm) 0}
.project p,.depth-mode .project p{margin-bottom:var(--space-sm);line-height:var(--phi)}
.project-top{padding-bottom:var(--space-sm)}
.education{gap:var(--space-md)}
.expertise-link{padding-bottom:var(--space-2xs)}
dialog{padding:var(--space-md)}
dialog h2{margin:var(--space-lg) 0 var(--space-sm)}
.depth-mode .work-stage{padding-top:calc(var(--space-xl) + var(--space-sm));padding-bottom:var(--space-md);gap:var(--space-sm)}
/* Bare project navigation: high arrow, central markers, low arrow. */
.project-tracker{gap:0;padding:0}
.project-tracker #slide-prev{grid-row:1}
.project-tracker .tracker-dots{grid-row:2;align-self:center}
.project-tracker #slide-next{grid-row:3}
.project-tracker button{background:none;border:0;box-shadow:none}
.project-tracker button:not(:disabled):hover{color:#071b20}
#tracker-count{display:none}
.tracker-dot[aria-current="step"]:before{transform:scale(var(--phi))}
@media(max-width:900px){.intro-grid,.experience-grid,.capability{grid-template-columns:1fr;gap:var(--space-md)}.capability{gap:var(--space-sm)}.hero-bottom{padding:var(--space-sm) 0;margin-bottom:var(--space-sm)}.education{gap:var(--space-sm)}}
@media(max-width:600px){.capability{padding:var(--space-sm) 0}.depth-mode .work-stage{padding-top:calc(var(--space-xl) + var(--space-2xs));padding-bottom:var(--space-sm);gap:var(--space-sm)}.depth-mode .project-top{padding-bottom:var(--space-xs)}dialog{padding:var(--space-sm)}}
@media(max-height:550px){.project-tracker{grid-template-rows:26px minmax(0,1fr) 26px}.project-tracker .tracker-dot{height:clamp(10px,2.36svh,15px)}.depth-mode .work-stage{gap:var(--space-xs)}}
/* The lower arrow sits over the darker part of the fixed metal surface. */
.project-tracker #slide-next{color:#f5ffff}
.project-tracker #slide-next:not(:disabled):hover{color:#fff}