/* Preserve the Code layout; fit the longer Project label and bilingual titles. */
:root{--nav-label-size:clamp(64px,8.2vw,148px)}
.index-item{white-space:normal;overflow-wrap:anywhere}
#catalog .project-row:last-of-type{min-height:68vh}
.pending-media{grid-column:1/-1;width:100%}
.media-placeholder{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:300px;width:100%;padding:clamp(24px,3.4vw,64px);background:var(--vi-conversation);color:var(--vi-text-secondary);text-align:left;line-height:1.65}
.media-placeholder .placeholder-category{font-size:9px;letter-spacing:.12em}
.media-placeholder strong{max-width:500px;font-size:clamp(22px,2.5vw,46px);font-weight:400;letter-spacing:-.04em;line-height:1.3;color:var(--vi-ink)}
.media-placeholder>span:last-child{font-size:12px}
.stage-frame>.media-placeholder{align-self:center}
.frame-step .media-placeholder{min-height:160px;padding:16px;gap:16px}
.frame-step .media-placeholder strong{font-size:15px}
.frame-step .media-placeholder .placeholder-category{font-size:7px;letter-spacing:0}
.frame-step .media-placeholder>span:last-child{font-size:10px}
.resource-list{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:20px 0}
.resource-list h3{font-size:11px;font-weight:400;color:var(--vi-text-secondary);margin:0 0 5px}
.resource-list a{border-bottom:1px solid var(--vi-line)}
body[data-mode=about] .project-index{display:none}
@media(max-width:1000px) and (min-width:701px){.focus-subtitle{font-size:15px;padding-right:120px}.project-links{font-size:10px}.index-item{font-size:11px}}
@media(max-width:700px){
 :root{--nav-label-size:clamp(64px,17vw,86px)}
 .index-item{white-space:nowrap;overflow-wrap:normal}
 .mobile-name{max-width:80%;text-align:right}
 .focus-project-number .mobile-name{text-align:left}
 #catalog .project-row:last-of-type{min-height:50vh}
 .media-placeholder{min-height:280px;padding:28px;gap:25px}
 .media-placeholder strong{font-size:30px}
 .frame-step .media-placeholder{min-height:280px;padding:28px}
 .frame-step .media-placeholder strong{font-size:26px}
 .frame-step .media-placeholder .placeholder-category{font-size:9px}
 .frame-step .media-placeholder>span:last-child{font-size:12px}
 .focus-subtitle{font-size:14px}
}

.practice-gallery-link{display:block;width:fit-content;margin-top:10px;border-bottom:1px solid currentColor;font-size:12px;line-height:1.8}
.practice-gallery-link:hover{color:var(--vi-action-hover)}
.practice-gallery-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* Selected lead images and website captures lead the existing image grid. */
.project-right .project-media.is-featured{grid-column:1/-1}

/* Selected photographs stay visible in the desktop columns and mobile flow. */
:is(#story-catchers,#homegrow-plastic) .project-left .project-media{width:100%;align-self:stretch}
@media(max-width:700px){
 :is(#story-catchers,#homegrow-plastic) .project-left{display:grid;grid-template-columns:1fr auto;gap:12px}
 :is(#story-catchers,#homegrow-plastic) .project-left .project-media{display:block;grid-column:1/-1}
 :is(#story-catchers,#homegrow-plastic) .project-left .mobile-name{max-width:none}
 #story-catchers .project-right .project-media:first-child{grid-column:auto}
}

/* The catalog settles in before the two navigation labels float into place. */
html[data-practice-entry] :is(.project-index,main,.code-footer,.works-title,.about-link){opacity:0;pointer-events:none}
html[data-practice-entry=loading] #catalog:has(>.loading){visibility:hidden}