.cover-flow{display:none}
/* Both routes into credit details use the same cover width and panel insets. */
#panel[data-kind=detail],#panel[data-kind=project]{width:min(820px,calc(100% - 28px));padding:24px 30px 32px;max-height:90svh}
#panel[data-kind=detail] .detail-art{width:min(100%,360px);margin:26px auto}
#panel[data-kind=detail] .detail-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
#panel[data-kind=project] .project-overview>div:first-child{min-width:0}
.flow-track{position:relative;display:flex;gap:22px;padding:10px calc((100% - var(--cover-size))/2) 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom}
.flow-track::-webkit-scrollbar{display:none}
.flow-card{flex:0 0 var(--cover-size);width:var(--cover-size);height:var(--cover-size);padding:0;border:0;background:none;scroll-snap-align:center;scroll-snap-stop:always;position:relative;transition:filter .15s;outline-offset:3px}
.flow-cover{transform:perspective(700px) rotateY(var(--tilt,0deg)) scale(var(--scale,1));position:relative;display:block;width:100%;height:100%;background:#262b29;box-shadow:0 12px 22px #0007;overflow:hidden}
.flow-cover img{display:block;width:100%;height:100%;object-fit:contain}
.flow-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:20px;font-size:16px;color:#b4beb6}
.flow-cover:has(img[src]) .flow-placeholder{display:none}
.flow-info{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;max-width:620px;width:90%;margin:auto}
.flow-info>button{width:44px;height:44px;background:none;border:1px solid #ffffff35;border-radius:50%;font-size:24px;color:#dce3da}
.flow-info button:disabled{opacity:.25;cursor:default}
.flow-caption{text-align:center;min-width:0}
.flow-artist,.flow-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;line-height:1.3}
.flow-artist{font-size:13px;color:#abb5ad}.flow-title{font-size:18px;font-weight:400;color:#f1f3ef;margin-top:3px}
.flow-caption button{border:0;background:none;min-height:36px;color:#c5cfc6;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.flow-count{font:12px monospace;color:#a7b1a9;margin-left:14px}
.flow-empty{text-align:center;padding:20px;color:#b8c2ba;font-size:15px}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html.cover-flow-viewport{overflow:hidden;overscroll-behavior:none}
 body.cover-flow-mode{position:fixed;top:0;left:0;width:100%;height:var(--flow-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
 body.cover-flow-mode>header{height:44px;margin-inline:max(4%,env(safe-area-inset-left),env(safe-area-inset-right))}
 body.cover-flow-mode>header .wordmark span{display:none}
 body.cover-flow-mode>main,body.cover-flow-mode>.home-highlights,body.cover-flow-mode>footer{display:none}
 body.cover-flow-mode>.cover-flow{height:calc(var(--flow-height,100dvh) - 44px);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,24%);align-items:center;--cover-size:clamp(100px,calc(var(--flow-height,100dvh) - 88px - env(safe-area-inset-bottom)),340px);padding:2px max(3%,env(safe-area-inset-right)) env(safe-area-inset-bottom) 0}
 body.cover-flow-mode .flow-track{min-width:0;overscroll-behavior:contain}
 body.cover-flow-mode .flow-info{grid-template-columns:44px 44px;justify-content:center;gap:12px;width:100%;padding-left:12px}
 body.cover-flow-mode .flow-caption{grid-column:1/-1;grid-row:1;width:clamp(150px,20vw,230px);justify-self:center}
 body.cover-flow-mode .flow-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:20px;margin:8px 0}
 body.cover-flow-mode .flow-artist{white-space:normal;font-size:14px}
 body.cover-flow-mode .flow-caption button{min-height:44px}
 body.cover-flow-mode .flow-empty{grid-column:1} 
}
@media(prefers-reduced-motion:reduce){.flow-cover{transform:none;transition:none}}

.project-overview #panel-title{font-size:32px;line-height:1.1;margin:0 0 12px;overflow-wrap:anywhere}
@media(max-width:700px){.project-overview #panel-title{font-size:26px}}