/* Projects text index + video footer (Version 2 homepage) */
.project-index{position:relative;z-index:5;background:#fff;padding:14svh 6vw 16svh;display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,2fr);gap:6vw;font-family:akzidenz-grotesk-next-pro,"Helvetica Neue",Arial,sans-serif;color:#171719}
.project-index-head span{display:block;font-size:10px;letter-spacing:.13em;color:#62625e}
.project-index-head h2{margin:10px 0 0;font-size:clamp(34px,3.4vw,56px);font-weight:400;letter-spacing:-.06em;line-height:.9}
.project-links{list-style:none;margin:0;padding:0;counter-reset:project}
.project-links li{counter-increment:project;border-top:1px solid #17171920}
.project-links li:last-child{border-bottom:1px solid #17171920}
.project-links a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:16px 0 15px;color:inherit;text-decoration:none;transition:padding .35s cubic-bezier(.2,.8,.2,1),color .2s}
.project-links a::before{content:counter(project,decimal-leading-zero);font-size:10px;letter-spacing:.1em;color:#62625e}
.pl-title{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.05em;line-height:1}
.pl-kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#62625e;text-align:right}
.project-links a:hover,.project-links a:focus-visible{padding-left:12px;color:var(--theo-pink)}

.site-footer{position:relative;z-index:5;background:#ececec;font-family:akzidenz-grotesk-next-pro,"Helvetica Neue",Arial,sans-serif}
.footer-film{position:relative;overflow:hidden}
.footer-video{display:block;width:100%;object-fit:cover}
.footer-video--desktop{aspect-ratio:16/9;max-height:100svh}
.footer-video--mobile{display:none;aspect-ratio:607/1080;max-height:100svh;background:#e4e1d8}
/* Contact details sit on the film, lined up with the glass panels in the footage.
   Those panels drift as the video plays, so this is close alignment, not a lock. */
.footer-film::after{content:'';position:absolute;inset:auto 0 0;height:30%;pointer-events:none;background:linear-gradient(#0000,#0000004d)}
.footer-contact{position:absolute;z-index:1;left:11.5%;right:11.6%;bottom:4.4%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:clamp(14px,2.5vw,40px);color:#fff}
.footer-contact a{color:inherit;text-decoration:none;font-size:clamp(19px,3.2vw,45px);font-weight:700;letter-spacing:-.035em;line-height:1;text-shadow:0 2px 18px #00000047;transition:opacity .2s}
.footer-contact a:hover,.footer-contact a:focus-visible{color:var(--theo-pink)}
.footer-linkedin{position:absolute;z-index:1;left:0;right:0;bottom:1.3%;text-align:center;color:#ffffffe0;font-size:clamp(9px,.85vw,12px);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 10px #0000005c}
.footer-linkedin:hover,.footer-linkedin:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-top{position:absolute;z-index:1;left:0;right:0;top:42.5%;text-align:center;color:#171719;font-size:clamp(9px,.85vw,12px);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.footer-top:hover,.footer-top:focus-visible{text-decoration:underline;text-underline-offset:4px}

@media(max-width:700px){
 .project-index{display:block;padding:11svh 20px 12svh}
 .project-index-head{margin-bottom:34px}
 .project-links a{grid-template-columns:2.4em minmax(0,1fr);gap:10px;padding:15px 0}
 .pl-kind{grid-column:2;text-align:left;font-size:9px}
 .pl-title{font-size:25px}
 .project-links a:hover{padding-left:0}
 .site-footer{background:#e4e1d8}
 .footer-video--desktop{display:none}
 .footer-video--mobile{display:block}
 .footer-contact{left:12.8%;right:13%;bottom:15%;flex-direction:column;align-items:center;justify-content:center;gap:6px}
 .footer-contact a{font-size:clamp(17px,4.8vw,22px)}
 .footer-linkedin{bottom:9.5%;font-size:9px}
 .footer-top{top:37.5%;font-size:9px}
 .footer-film::after{height:22%}
}
@media(prefers-reduced-motion:reduce){.project-links a{transition:none}}