/* Deliberate complete rows: landscape pairs, two portrait triptychs, hero films. */
.project-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:row;gap:0;align-items:stretch}
.project,.project.tile-wide{grid-column:span 3;grid-row:auto;aspect-ratio:16/9;overflow:hidden;min-height:0}
.project.tile-portrait{grid-column:span 2;grid-row:auto;aspect-ratio:9/16}
.project.tile-portrait-pair{grid-column:span 3;grid-row:auto;aspect-ratio:9/16}
.project.tile-full,.project:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:auto;height:clamp(300px,37.5vw,600px)}
.project .project-visual,.project:first-child .project-visual{width:100%;height:100%;aspect-ratio:auto;background:#000;container-type:size}
.project-visual video,.project-visual img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.project-visual iframe{width:100%;height:100%;inset:0;transform:scale(1.01);pointer-events:none}
.project-name{font-size:clamp(20px,2.3vw,36px)!important;max-width:85%}
.project-client{max-width:85%;text-align:right;font-size:10px}
.project-visual video::-webkit-media-controls{display:none!important}
.project-visual video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.custom-cursor,.custom-cursor *{cursor:none!important}.custom-cursor #brand-cursor{display:block}
.project-visual .motion-shield{position:absolute;inset:0;z-index:1;pointer-events:auto;background:transparent}
.project.tile-portrait .project-name{top:24px;left:23px;font-size:24px!important}
.project.tile-portrait .project-client{right:23px;bottom:23px}
@media(max-width:700px){
.project-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.project,.project.tile-wide{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
.project.tile-portrait{grid-column:span 2;grid-row:auto;aspect-ratio:9/16}
.project.tile-portrait-pair{grid-column:span 3;grid-row:auto;aspect-ratio:9/16}
.project.tile-full,.project:first-child{grid-column:1/-1;grid-row:auto;height:50vw;aspect-ratio:auto}
.project-name{left:17px;top:18px;font-size:23px!important}
.project-client{bottom:17px;right:17px;font-size:8px;letter-spacing:.1em}
.project.tile-portrait .project-name{left:9px;top:12px;font-size:14px!important}
.project.tile-portrait .project-client{right:9px;bottom:12px;font-size:6px;letter-spacing:.04em}
.project.tile-portrait-pair .project-name{left:13px;top:15px;font-size:18px!important}
.project.tile-portrait-pair .project-client{right:13px;bottom:15px;font-size:7px}
.project-visual:after{background:linear-gradient(180deg,#0007,transparent 28%,transparent 70%,#0006)}
}
/* The H is the actual system cursor, not a second element following the arrow. */
#brand-cursor{display:none!important}
@media (hover:hover) and (pointer:fine){html,body,body *,body *::before,body *::after{cursor:url('assets/cursor-h.svg') 14 12, crosshair!important}}
.project.tile-small{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:700px){.project.tile-small{grid-column:1/-1}}
/* Focus follows the existing underline, without a rectangular outline. */
#quote input:focus,#quote input:focus-visible,#quote textarea:focus,#quote textarea:focus-visible,#quote select:focus,#quote select:focus-visible{outline:none;box-shadow:none;border-bottom-color:#b6b6b0}
#quote label:focus-within>span{color:#e5e5df}
#quote input,#quote textarea,#quote select{transition:border-bottom-color .18s ease}
@media (hover:hover) and (pointer:fine){
html,body,body *,body *::before,body *::after{cursor:url('assets/cursor-h-light.svg') 14 12,crosshair!important}
.studio,.studio *,.studio *::before,.studio *::after,.submit,.submit *,.skip:focus{cursor:url('assets/cursor-h-dark.svg') 14 12,crosshair!important}
}

/* A portrait film paired with a wider landscape, only in the new additions. */
#project-paulista{grid-column:span 2;height:40vw;max-height:600px;aspect-ratio:auto}#project-spotify{grid-column:span 4;height:40vw;max-height:600px;aspect-ratio:auto}
@media(max-width:700px){#project-paulista,#project-spotify{height:60vw;max-height:none}#project-paulista .project-name{font-size:16px!important;left:10px}#project-paulista .project-client{right:10px}}

#project-boticario .project-visual>img,#project-boticario iframe,#project-sky .project-visual>img{transform:scale(1.3)}