/* Natural project invitation rows stay readable throughout continuous resizing. */
@layer mobile-composition{
 .work-project[data-project] .ag-project-cta{
  display:grid!important;grid-template-columns:44% minmax(0,1fr)!important;grid-template-rows:auto!important;
  align-items:stretch!important;height:auto!important;min-height:clamp(390px,28.45vw,490px)!important;padding:0!important;
  container-type:inline-size;container-name:project-invitation;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-image{
  position:relative!important;inset:auto!important;min-width:0!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-image>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
 .work-project[data-project] .ag-project-cta .ag-hello-copy{
  position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
  width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;min-width:0!important;
  padding:clamp(24px,2.06vw,32px)!important;gap:0!important;container-type:inline-size;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-copy>.eyebrow{
  position:static!important;inset:auto!important;flex:none!important;margin:0 0 clamp(20px,calc(18cqw - 60px),80px)!important;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-copy>h2{
  font-size:min(clamp(54px,5.67vw,88px),15cqw)!important;line-height:.99!important;
  margin:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-copy>p{font-size:clamp(16px,1.05vw,18px)!important;line-height:1.65!important;margin:24px 0!important;max-width:60ch!important}
 .work-project[data-project] .ag-project-cta .ag-hello-actions{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;gap:clamp(8px,1.16vw,20px)!important;width:100%!important;min-width:0!important}
 .work-project[data-project] .ag-project-cta .ag-hello-actions>.button{
  flex:0 1 auto!important;width:auto!important;min-width:0!important;min-height:48px!important;
  font-size:clamp(10px,3.6cqw,14px)!important;line-height:1.25!important;padding:8px clamp(6px,1vw,18px)!important;white-space:normal!important;
 }
 .work-project[data-project] .ag-project-cta .ag-hello-actions>.text-link{
  flex:0 0 auto!important;width:auto!important;min-width:0!important;font-size:clamp(10px,3.6cqw,14px)!important;line-height:1.25!important;white-space:nowrap!important;padding:8px 0!important;
 }
 @media(max-width:800px){
  .work-project[data-project] .ag-project-cta{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;min-height:0!important}
  .work-project[data-project] .ag-project-cta .ag-hello-image{height:clamp(190px,75cqw,340px)!important;aspect-ratio:auto!important}
  .work-project[data-project=mayson] .ag-project-cta .ag-hello-image{height:clamp(145px,56.55cqw,340px)!important}
  .work-project[data-project] .ag-project-cta .ag-hello-copy>.eyebrow{margin-bottom:20px!important}
  /* Larger mobile opening portraits, with the diagonal feather lower near the type. */
  .work-project[data-project] .project-hero-art.ag-mobile-reference-frame,.work-project[data-project] .project-hero-art>:is(img,video){height:440px!important}
  .work-project[data-project] .project-hero-art>:is(img,video){
   mask-image:radial-gradient(ellipse 130% 130% at 110% -10%,#000 40%,rgba(0,0,0,.98) 50%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.28) 86%,rgba(0,0,0,.06) 98%,transparent 108%),linear-gradient(#000 60%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.12) 94%,transparent 100%)!important;
   -webkit-mask-image:radial-gradient(ellipse 130% 130% at 110% -10%,#000 40%,rgba(0,0,0,.98) 50%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.28) 86%,rgba(0,0,0,.06) 98%,transparent 108%),linear-gradient(#000 60%,rgba(0,0,0,.9) 73%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.12) 94%,transparent 100%)!important;
  }
 }
}