.wordmark-test .masthead{padding-top:18px}.wordmark-stage{width:50%;max-width:725px;margin:auto;isolation:isolate}.wordmark-stage>svg{display:block;width:100%;height:auto;overflow:visible}.wordmark-test .masthead .project-filters{margin-top:20px}.wordmark-tools{display:flex;justify-content:center;gap:30px;align-items:center;font:12px DMSans,Arial,sans-serif;margin:5px auto 0}.wordmark-tools a,.wordmark-tools button{color:var(--off-white);background:none;border:0;padding:8px 0;font:inherit;cursor:pointer}.wordmark-tools a:hover,.wordmark-tools button:hover{color:var(--crimson)}
@media(max-width:650px){.wordmark-test .masthead{padding-top:30px}.wordmark-stage{margin:20px auto 28px}.wordmark-tools{font-size:11px;gap:20px}.wordmark-test .masthead .project-filters{margin-top:25px}}
.wordmark-stage>svg{overflow:hidden;mix-blend-mode:screen}
/* Flatten the layers before blending, so replacement areas disappear into black. */
.wordmark-stage{filter:url(#wordmark-crimson);mix-blend-mode:screen}

/* Increase titles by 1/6; keep scaling beyond the former desktop ceiling. */
.wordmark-test main{container-type:inline-size}
.wordmark-test .caption{--project-title-size:calc(max(14px,2.23cqw) * 7 / 9)}
.wordmark-test .caption h2{font-size:var(--project-title-size)}

/* Mirror the title's number-column offset at the right edge. */
.wordmark-test main{--caption-inset:60px}
.wordmark-test #selected-title{margin-left:var(--caption-inset)}
.wordmark-test .caption .category{margin-right:var(--caption-inset);justify-self:end;text-align:right}
@media(max-width:750px){.wordmark-test main{--caption-inset:33px}}

/* Director credits remain proportional through every title size and breakpoint. */
.wordmark-test .caption p{font-size:calc(var(--project-title-size) * .6)}

/* Rich print-color companions to the crimson identity. */
.wordmark-test{--type-film:var(--off-white);--type-commercial:var(--off-white);--type-music:var(--off-white)}
.wordmark-test .project[data-category="narrative"] .category{color:var(--type-film)}
.wordmark-test .project[data-category="commercial"] .category{color:var(--type-commercial)}
.wordmark-test .project[data-category="music-video"] .category{color:var(--type-music)}

/* Share the first text baseline across title, number and project type. */
.wordmark-test .caption{grid-template-columns:44px minmax(0,1fr) auto;row-gap:0;align-items:first baseline}
.wordmark-test .caption>div{display:contents}
.wordmark-test .caption h2{grid-column:2;grid-row:1}
.wordmark-test .caption p{grid-column:2;grid-row:2}
.wordmark-test .caption .number{grid-column:1;grid-row:1}
.wordmark-test .caption .category{grid-column:3;grid-row:1;margin-top:0;white-space:nowrap}
@media(max-width:750px){.wordmark-test .caption{grid-template-columns:25px minmax(0,1fr) auto}}

a.wordmark-stage{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.wordmark-stage:focus-visible{outline:1px solid #eee7db;outline-offset:10px}

/* Keep contact-sheet captions legible on phones. */
@media(max-width:650px){
 .wordmark-test .caption{--project-title-size:clamp(14px,3.6vw,18px)}
 .wordmark-test .caption p{font-size:max(11px,calc(var(--project-title-size) * .6));line-height:1.4}
 .wordmark-test .mobile-controls button{min-width:44px;min-height:44px}
 .layout-official .layout-disclosure summary{min-height:44px}
 .layout-official .layout-disclosure nav a,.layout-official .project-filters button{min-height:44px;display:flex;align-items:center}
}