@view-transition{navigation:auto}
:root{--ease:cubic-bezier(.22,1,.36,1)}
body:not(.intro-experience){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.015em;-webkit-font-smoothing:antialiased}body:not(.intro-experience) main{animation:page-arrive .65s var(--ease) both}body.page-leaving main{opacity:0;transform:translateY(-7px);transition:opacity .15s,transform .15s}
body:not(.intro-experience) h1,body:not(.intro-experience) h2,body:not(.intro-experience) h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.045em}body:not(.intro-experience) h1{font-weight:650}body:not(.intro-experience) h2{font-weight:600}body:not(.intro-experience) h1 em,body:not(.intro-experience) h2 em{font-style:normal}body:not(.watch-experience):not(.intro-experience)>header{position:sticky;top:0;z-index:30;max-width:none;background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:18px max(28px,calc((100vw - 1168px)/2));border-bottom:1px solid var(--line)}header nav{gap:22px}.theme-toggle{border-radius:999px}a,button{touch-action:manipulation}.button,.primary,.secondary{border-radius:999px;transition:transform .3s var(--ease),background .3s,box-shadow .3s}.button:hover,.primary:hover,.secondary:hover{transform:translateY(-2px);box-shadow:0 8px 22px #00000012}.button:active,.primary:active,.secondary:active{transform:scale(.97)}.hero{padding-top:90px;padding-bottom:90px}.hero h1{line-height:1.02}.hero .intro{font-family:inherit;letter-spacing:-.035em;font-size:30px;font-weight:500}.portrait-frame{padding:0;border-radius:28px;overflow:hidden;box-shadow:0 22px 60px #122d3518}.portrait-frame:before{display:none}.portrait-frame img{transition:transform 1s var(--ease)}.portrait-frame:hover img{transform:scale(1.035)}.work-grid{gap:24px;margin-top:44px}.work-grid article{border:0;border-radius:26px;padding:32px;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.work-grid h3{font-weight:600}.work-heading h2{line-height:1.08}.section-head h2{line-height:1.08}.page-heading{padding-top:72px}.project-detail{border-radius:28px}.project-highlight{margin:0 20px 24px;border-radius:30px}.education-band{border-radius:28px;margin:0 20px}.contact-page{border-radius:30px;margin:28px 20px}.contact-links a{transition:padding .3s var(--ease),color .3s}.contact-links a:hover{padding-left:10px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
.watch-experience .card{border:0;border-radius:22px;box-shadow:0 3px 18px #00000006;transition:transform .5s var(--ease),box-shadow .5s}.watch-experience .card:hover{transform:translateY(-5px);box-shadow:0 18px 42px #00000012}.watch-experience .card-image{overflow:hidden}.watch-experience .card-image img{transition:transform .7s var(--ease)}.watch-experience .card:hover .card-image img{transform:scale(1.07)}.watch-experience .card-body{padding:24px}.watch-experience .gallery{border-radius:28px;overflow:hidden}.watch-experience .gallery>img{transition:opacity .25s}.watch-experience .intro{padding-top:60px;padding-bottom:45px}.watch-experience .intro h1{font-weight:650}.watch-experience .search{border-radius:16px}.watch-experience .detail-title{animation:page-arrive .7s var(--ease) both}.watch-experience .logo{letter-spacing:0}.watch-experience .filters{border-right:0}.watch-experience .grid{gap:26px}.watch-experience .detail{padding-top:40px}
::view-transition-old(root){animation:page-out .22s ease both}::view-transition-new(root){animation:page-arrive .55s var(--ease) both}
@keyframes page-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@media(max-width:700px){body:not(.watch-experience):not(.intro-experience)>header{padding:14px 22px;position:relative}header nav{gap:10px 16px}.hero{padding:45px 24px}.hero .intro{font-size:25px}.work-grid{gap:16px}.work-grid article{padding:26px}.project-highlight,.education-band,.contact-page{margin-left:12px;margin-right:12px;border-radius:22px}.page-heading{padding-top:44px}.watch-experience .intro{padding-top:32px}.watch-experience .grid{gap:14px}.watch-experience .card-body{padding:16px 12px}.watch-experience .card{border-radius:17px}.watch-experience .gallery{border-radius:22px}.watch-experience .detail-title{animation-duration:.45s}}
/* Photo-led Horomania cards, shared by light and dark themes. */
html body.watch-experience .card{background:transparent;box-shadow:none;overflow:visible;transition:transform .75s var(--ease);animation:none}
html body.watch-experience .card:hover{transform:translateY(-2px);box-shadow:none}
html body.watch-experience .card-image{height:auto;aspect-ratio:4/5;background:transparent;border-radius:20px}
html body.watch-experience .card-image img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;display:block;transition:transform 1.1s var(--ease)}
html body.watch-experience .card:hover .card-image img{transform:scale(1.025)}
.watch-experience .card-body{padding:20px 2px 24px}
.watch-experience .tag,.watch-experience .gallery-label{background:#15211b80;color:#fff;padding:6px 9px;border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html body.watch-experience .gallery{background:transparent;min-height:0;display:block;aspect-ratio:4/5;isolation:isolate}
html body.watch-experience .gallery>img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;transition:none;position:relative}
html body.watch-experience .gallery>img.gallery-previous{position:absolute;inset:0;pointer-events:none}
.watch-experience .gallery-label{z-index:2}
html body.watch-experience .gallery-thumbs button{background:transparent;padding:0;overflow:hidden;border-radius:10px}
html body.watch-experience .gallery-thumbs img{object-fit:cover;mix-blend-mode:normal;display:block}
html body.watch-experience .movement-img{background:transparent;mix-blend-mode:normal;height:auto;display:block}
.watch-experience .detail-title,body.watch-experience main{animation:none}
@keyframes watch-photo-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){html body.watch-experience .card-image{border-radius:15px}.watch-experience .card-body{padding:16px 1px}.watch-experience .tag{max-width:calc(100% - 48px);font-size:8px;letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}::view-transition-group(*){animation:none!important}}
@media print{.reveal{opacity:1;transform:none}body:not(.intro-experience)>header{position:static}.work-grid article{break-inside:avoid}}