@import url('../assets/document-preview.9d0fe3e41d4ef88b.css');

/* Creative Practice provides the layout; these rules accommodate nine Design projects. */
html[data-design-initial] .nav-label{transition:none}
.project-left,.project-row:nth-child(even) .project-left{gap:12px}
.project-left .project-media.cover-frame{width:100%;align-self:flex-start;order:1}
.project-left .project-number{margin-bottom:0}
.project-left .project-media.accent-frame{margin-top:clamp(18px,3vh,40px);width:100%;align-self:flex-start}
.project-left .project-media.accent-0{width:76%;align-self:flex-end}
.project-left .project-media.accent-1{width:92%;align-self:flex-start}
#design-07 .project-left .accent-0,#design-09 .project-left .accent-0{margin-top:clamp(96px,15vh,180px)}
.project-right{align-content:start}
#design-03 .project-right>.project-media:has(.index-video),#design-06 .project-right>.project-media:has(.index-video){grid-column:1/-1;width:100%}
.project-media .index-video{display:block;width:100%;height:auto;aspect-ratio:var(--image-ratio);object-fit:contain;pointer-events:none}
/* The moving image remains below the live heading throughout the return. */
.image-transition{z-index:18}
body[data-design-transition] .stage-frame{transition:none;transform:none}
.project-right:has(>.project-media:only-child){grid-template-columns:1fr}
.project-info .info-body p{white-space:pre-line}
.info-body h3{font-size:12px;font-weight:600;margin:22px 0 8px;line-height:1.7}
.design-fact-label{display:block;color:var(--vi-text-secondary);font-size:10px}
.design-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-block:1px solid var(--vi-line);padding:18px 0;margin:22px 0}
.design-metrics dt{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.design-metrics dd{font-size:10px;color:var(--vi-text-secondary);margin:8px 0 0;line-height:1.6}
.design-credits{margin:0}.design-credits>div{margin:0 0 12px}.design-credits dt{font-size:10px;color:var(--vi-text-secondary)}.design-credits dd{margin:0}
@media(min-width:701px){
 .project-index .index-items{max-height:calc(100dvh - var(--trigger) - 70px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
 .index-item{padding-right:20px}
}
@media(max-width:700px){
 .project-row .project-left{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px}
 .project-left .project-number{grid-column:1}
 .project-left .mobile-name{grid-column:2;max-width:none;margin:0;align-self:center}
 .project-left .project-media.cover-frame{grid-column:1/-1}
 .project-left .project-media.accent-frame{display:block;width:100%;margin-top:0;align-self:start}
 #design-07 .project-left .accent-frame,#design-09 .project-left .accent-frame{margin-top:64px}
 .project-left .project-media.accent-frame:only-of-type{grid-column:1/-1}
 .project-left .project-media.cover-frame{display:block;flex-basis:100%;width:100%;margin-top:2px}
 body[data-mode=focus] .nav-label{transition:none}
 .focus-subtitle{font-size:14px;padding-right:70px;line-height:1.3}
 .project-links{font-size:10px}
 .design-metrics{gap:12px}.design-metrics dt{font-size:21px}
}