.project-next{display:flex;justify-content:flex-end;padding:3vw 4vw;background:#000;font:400 11px/1.4 Montserrat,sans-serif;letter-spacing:3.1px}
.project-index{columns:5;column-gap:11.625px;padding:46.5px 4vw;background:#000}
.project-index a{display:block;break-inside:avoid;margin-bottom:11.625px;font:300 12px/23.25px var(--body);color:#aaa}
.project-index a:hover{color:white}
@media(max-width:767px){.project-index{columns:2;padding:46.5px 6vw}.project-next{font-size:10px;padding:30px 6vw}}

.project-next{justify-content:space-between;gap:32px;text-transform:uppercase}
.project-next a{max-width:48%}
.project-next .project-forward{margin-left:auto;text-align:right}
@media(max-width:767px){
 .project-next{flex-direction:column;align-items:stretch;gap:14px;padding-inline:max(6vw,env(safe-area-inset-left,0px)) max(6vw,env(safe-area-inset-right,0px))}
 .project-next a,.project-next .project-forward{display:grid;grid-template-columns:7px minmax(0,1fr);column-gap:10px;align-content:center;min-height:44px;max-width:none;margin-left:0;text-align:left}
 .project-next .project-title{grid-column:2;grid-row:1;overflow-wrap:anywhere}
 .project-next .project-direction{grid-column:1;grid-row:1;margin-top:.25em}
}

/* Shared navigation feedback for every project footer. */
.project-next a{transition:color .25s ease;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px}
.project-next .project-direction{display:inline-block;font-size:.8em;transition:transform .25s ease}
@media(hover:hover){
 .project-next a:hover{color:#aaa;text-decoration-color:currentColor}
 .project-previous:hover .project-direction{transform:translateX(-4px)}
 .project-forward:hover .project-direction{transform:translateX(4px)}
}
.project-next a:focus-visible,.project-next a:active{color:#aaa;text-decoration-color:currentColor}
@media(prefers-reduced-motion:reduce){.project-next a,.project-next .project-direction{transition:none}}

/* Draw the icons so mobile platforms cannot substitute emoji glyphs. */
.project-next .project-direction{width:7px;height:9px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:baseline}
.project-next .project-previous .project-direction{clip-path:polygon(100% 0,0 50%,100% 100%)}