/* One geometry and one set of meanings across project, model and video views. */
:root .card-view-controls{display:flex;align-items:center;gap:8px}
:root .card-view-control{display:grid;place-items:center;flex:0 0 48px;width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;max-height:48px;padding:0;border:0;border-radius:50%;background:var(--control-tonal,var(--soft));color:var(--ink);box-shadow:none;cursor:pointer;transition:background-color 180ms}
.card-view-control svg{width:22px;height:22px;flex:none;pointer-events:none}
.card-view-control:hover{background:var(--control-hover,var(--soft))}
.card-view-control:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.project-focus-stage>.project-focus-inner>.card-view-controls{position:fixed;z-index:2;top:calc(var(--focus-header,80px) + 12px);right:max(24px,calc((100vw - 1120px)/2 + 24px))}
.project-focus-stage .project-focus-back{position:fixed;top:calc(var(--focus-header,80px) + 14px);left:max(24px,calc((100vw - 1120px)/2 + 24px))}
.project-focus-stage.card-viewport{inset:0;z-index:70;padding:76px 0 0;background:var(--paper)}
.card-viewport>.project-focus-inner{max-width:none;width:100%;padding:0}
.card-viewport .project-focused-card{border-radius:0}
.card-viewport>.project-focus-inner>.card-view-controls{top:12px;right:16px}
.card-viewport :is(.project-focus-back,.card-return){display:none!important}
:is(.project-focused-card,.standalone-project) :is(.project-image.film-preview,.current-visual.film-preview){position:relative;height:min(60dvh,540px)!important;max-height:min(60dvh,540px)!important;aspect-ratio:auto!important;background:var(--past-surface,var(--soft));overflow:hidden}
:is(.project-focused-card,.standalone-project) :is(.film-preview img,.film-preview video,.film-preview iframe){width:100%;height:100%;max-height:none;object-fit:contain}
:is(.project-focused-card,.standalone-project) .film-preview .research-film{width:100%;height:100%}
:is(.project-focused-card,.standalone-project) .video-size-toggle{display:none!important}
.project-return{display:flex;align-items:center;justify-content:space-between;gap:16px}
.project-return>.card-view-controls{margin-left:auto}
.standalone-fullscreen .project-page-wrap{position:fixed;inset:0;z-index:70;max-width:none;width:100%;height:100dvh;padding:76px 0 24px;margin:0;background:var(--paper);overflow:auto}
.standalone-fullscreen .project-return{position:fixed;top:12px;right:16px;z-index:2;margin:0}
.standalone-fullscreen .project-return>a,.standalone-fullscreen .card-return{display:none!important}
.standalone-fullscreen .standalone-project{border-radius:0}
:root .model-panel-toolbar{display:flex;align-items:center;gap:8px;padding:0}
.model-panel-fullscreen{opacity:0}
.model-panel.model-ready .model-panel-fullscreen{opacity:1}
.model-panel.model-fullscreen{background:var(--paper)!important}
.model-fullscreen .model-panel-close{display:none!important}
:root.model-embedded .model-exit{display:none!important}
:root.model-fullscreen .decision-experiment{width:100%;max-width:none!important;margin:0!important;padding:0!important}
:root.model-fullscreen .decision-surface{border-radius:0;min-height:100dvh}
:root .decision-intro{padding-right:148px}
:root .model-standalone-fullscreen{position:absolute;z-index:3;top:16px;right:80px}
:root.model-fullscreen .model-exit{display:none!important}
:root.model-fullscreen .model-standalone-fullscreen{position:fixed;right:16px}
@media(max-width:760px){
 :root .card-fullscreen{display:none!important}
 :root .decision-intro{padding-right:80px}
 .project-focus-stage>.project-focus-inner>.card-view-controls{right:20px}
}
@media(prefers-reduced-motion:reduce){.card-view-control{transition:none}}
html[data-motion=reduce] .card-view-control{transition:none}

/* Match the expanded project and model surface dimensions beneath the real header. */
:root .project-focus-inner{width:calc(100% - 48px);max-width:1120px;padding-inline:0}
:root.model-embedded:not(.model-fullscreen) .decision-experiment{width:calc(100% - 48px);max-width:1120px!important;padding:0;margin:72px auto 32px}
:root .model-panel:not(.model-fullscreen) .model-panel-content{padding-top:var(--model-header,80px);box-sizing:border-box}
:root .card-viewport>.project-focus-inner{width:100%;max-width:none;padding:0}
@media(max-width:760px){
 :root .project-focus-inner{width:calc(100% - 24px)}
 :root.model-embedded:not(.model-fullscreen) .decision-experiment{width:calc(100% - 24px);margin-top:68px}
}

/* Research is a table of rounded cards, never a viewport takeover. */
:root .card-fullscreen{display:none!important}
:root .research-masonry>.video-focused{max-width:none;width:100%;grid-column:1/-1}
:root .research-masonry :is(.card-inline-shrink,.video-size-toggle){position:absolute;top:12px;right:12px;z-index:4;display:grid!important;width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;max-height:48px;flex:none;padding:0;aspect-ratio:1;border-radius:50%}
:root .project-focused-card .card-inline-shrink{display:none!important}
:root .project-focused-card{position:relative}
:root .project-focused-card>.card-view-controls,:root .standalone-project>.card-view-controls{position:absolute;z-index:4;top:12px;right:12px}
:root .project-focused-card>.project-focus-back{position:absolute;z-index:4;top:12px;left:12px}
:root .standalone-project{position:relative}
:root .project-focus-stage{padding-top:24px;background:transparent}
:root .decision-surface>.model-panel-toolbar{position:absolute;top:16px;right:16px;z-index:4}
:root .decision-surface>.model-panel-toolbar .model-panel-close{opacity:1}
:root.model-embedded:not(.model-fullscreen) .decision-experiment{margin-top:24px}
@media(max-width:760px){:root .project-focus-stage{padding-top:12px}:root.model-embedded:not(.model-fullscreen) .decision-experiment{margin-top:12px}}


/* Details stay in one column. Only playing media asks the table for more width. */
:root .research-masonry>.details-expanded:not(.video-focused){grid-column:auto;width:auto;max-width:none;justify-self:stretch}
:root .research-masonry>.video-focused{grid-column:1/-1;justify-self:center;width:100%;max-width:min(1120px,var(--video-native-width,640px))}
:root .video-focused :is(.project-image.film-preview,.current-visual.film-preview){display:grid;place-items:center;position:relative;aspect-ratio:auto!important;height:min(60dvh,540px,var(--video-native-height,360px))!important;max-height:min(60dvh,540px,var(--video-native-height,360px))!important}
:root :is(.project,.current-project) .film-preview>video{position:static!important;inset:auto!important;display:block;width:100%;height:100%;max-width:var(--video-native-width,640px)!important;max-height:var(--video-native-height,360px)!important;object-fit:contain;margin:auto}
:root :is(.project,.current-project) .film-preview>iframe{max-width:var(--video-native-width,640px);max-height:var(--video-native-height,360px)}
:root .research-masonry .video-size-toggle{display:grid!important}