.about.personal{padding:110px 0 65px;background:#101412;color:#f3f5ee;isolation:isolate}
.personal-heading{margin:0 8% 35px;position:relative;z-index:2}
.personal-heading>.eyebrow{color:#a5b19d;font-size:12px;letter-spacing:.15em;margin-bottom:28px}
.personal .personal-heading h2{font-size:clamp(44px,6.8vw,108px);line-height:1.04;max-width:1200px;letter-spacing:-.065em}
.personal-heading h2 em{font-style:normal;color:#d7ff63}
.personal-collage{position:relative;padding:85px 0 38px;max-width:1800px;margin:auto}
.personal-collage:before{content:'';position:absolute;inset:12% 5%;background:radial-gradient(ellipse,#41634935,transparent 70%);z-index:-1;pointer-events:none}
.personal-tools{position:absolute;right:8%;top:100px;display:flex;gap:8px;align-items:center;z-index:10}
.personal-tools a,.personal-pause{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff30;border-radius:50%;background:#18211de6;color:#f4f7ef;backdrop-filter:blur(18px);transition:background .2s,transform .2s}
.personal-tools a:hover,.personal-pause:hover{background:#334533;transform:translateY(-3px)}
.personal-tools svg{width:18px;height:18px}
.personal-pause{margin-left:12px;cursor:pointer}
.personal-pause .play-icon{display:none}
.personal-pause[aria-pressed=true] .pause-icon{display:none}
.personal-pause[aria-pressed=true] .play-icon{display:block}
.personal-lane{overflow:hidden;padding:24px 0 35px}
.personal-lane+.personal-lane{margin-top:-62px;position:relative;z-index:2}
.personal-track{display:flex;width:max-content;animation:personal-drift 80s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.personal-lane.is-reverse .personal-track{animation-direction:alternate-reverse;animation-duration:95s}
.personal-set{display:flex;align-items:center;padding:0 35px}
.personal-card{position:relative;flex:none;width:290px;height:335px;margin-right:-26px;padding:0;border:5px solid #ebeee2;border-radius:13px;overflow:hidden;background:#202820;box-shadow:0 20px 40px #0008;transform:rotate(var(--tilt,-4deg));cursor:zoom-in;transition:transform .3s,border-color .3s;isolation:isolate}
.personal-card:nth-child(3n+2){width:380px;height:280px}
.personal-card:nth-child(4n){height:365px;width:275px}
.personal-card:hover{z-index:8;transform:rotate(0deg) translateY(-9px) scale(1.04);border-color:#d7ff63}
.personal-card img,.personal-card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.personal-card video{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.personal-card video.ready{opacity:1}
.personal-card:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}
.personal-card-label{position:absolute;bottom:15px;left:16px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2;color:#fff;font-size:13px;text-align:left;font-weight:500}
.personal-card-label b{border:1px solid #fff9;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font-size:12px;flex:none}
.personal-collage.is-running .personal-track{animation-play-state:running}
.personal-collage.is-running.is-hovered .personal-track,.personal-collage.is-running.is-paused .personal-track{animation-play-state:paused}
.personal-footer{margin:20px 8% 0;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#aeb9a6;font-size:13px}
.personal-view-all{padding:13px 22px;border-radius:30px;border:1px solid #a6b29a66;background:transparent;color:#f2f5eb;font-size:14px;cursor:pointer;white-space:nowrap}
.personal-view-all:hover{background:#d7ff63;color:#172012;border-color:#d7ff63}
.personal-gallery{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#080b09;color:#f7f9f1;overflow:hidden}
.personal-gallery::backdrop{background:#080b09f5}
.personal-gallery-shell{height:100%;display:grid;grid-template-rows:60px minmax(0,1fr) 64px;padding:14px 24px;gap:8px}
.personal-gallery-head,.personal-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:20px}
.personal-gallery-head h3{font-size:17px;font-weight:500;letter-spacing:-.02em}
.personal-gallery-close,.personal-gallery-prev,.personal-gallery-next{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:#111910;color:inherit;font-size:25px;cursor:pointer}
.personal-gallery-close:hover,.personal-gallery-prev:hover,.personal-gallery-next:hover{background:#344330}
.personal-gallery-media{min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.personal-gallery-media img,.personal-gallery-media video{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.personal-gallery-media [hidden]{display:none}
.personal-gallery-foot a{font-size:13px;color:#c2ccb9;text-decoration:underline;text-underline-offset:4px}
.personal-gallery-navigation{display:flex;align-items:center;gap:12px}
.personal-gallery-count{font-size:13px;font-variant-numeric:tabular-nums;color:#bcc9b2;margin-right:6px}
@keyframes personal-drift{to{transform:translateX(calc(-1 * var(--travel,0px)))}}
@media(max-width:760px){
 .about.personal{padding:75px 0 45px}
 .personal-heading{margin:0 7% 26px}
 .personal-heading>.eyebrow{font-size:11px;margin-bottom:22px}
 .personal .personal-heading h2{font-size:clamp(32px,9.5vw,70px);line-height:1.07}
 .personal-collage{padding-top:75px;padding-bottom:20px}
 .personal-tools{right:7%;top:90px;gap:7px}
 .personal-tools a,.personal-pause{width:40px;height:40px}
 .personal-card{width:205px;height:260px;border-width:4px;margin-right:-20px}
 .personal-card:nth-child(3n+2){width:270px;height:220px}
 .personal-card:nth-child(4n){height:280px;width:200px}
 .personal-lane+.personal-lane{margin-top:-48px}
 .personal-card-label{font-size:12px;bottom:12px;left:12px;right:10px}
 .personal-footer{margin:0 7%;align-items:flex-start;flex-direction:column;gap:18px;font-size:12px}
 .personal-gallery-shell{grid-template-rows:56px minmax(0,1fr) 70px;padding:12px 14px max(12px,env(safe-area-inset-bottom));gap:8px}
 .personal-gallery-head h3{font-size:15px}
 .personal-gallery-foot{gap:10px}
 .personal-gallery-foot a{font-size:12px;max-width:110px}
 .personal-gallery-navigation{gap:8px}
}
.motion-off .personal-track{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.personal-track{animation-play-state:paused!important}.personal-card{transition:none}.personal-card:hover{transform:rotate(var(--tilt,-4deg))}}

.personal :focus-visible,.personal-gallery :focus-visible{outline:2px solid #d7ff63;outline-offset:4px}
.personal-pause:disabled{opacity:.55;cursor:default}
