/* Fit the frames to the source media; column widths are balanced by focused-media.js. */
.project-composition[data-natural-layout] .composition-grid {
  display:grid; height:auto; aspect-ratio:auto; gap:8px; align-items:start;
}
.project-composition[data-natural-layout] .composition-tile,
.project-composition[data-natural-layout] .composition-tile:first-child {
  display:block; height:auto; aspect-ratio:auto; min-width:0; background:transparent;
}
.project-composition[data-natural-layout] .composition-tile img,
.project-composition[data-natural-layout] .composition-tile video,
.project-composition[data-natural-layout] .composition-crop {
  display:block; width:100%; height:auto; aspect-ratio:var(--media-ratio);
  object-fit:contain; padding:0; transform:none; background:transparent;
}
.project-composition[data-natural-layout] .composition-label {
  position:static; display:block; padding:6px 0 2px;
  font:11px/1.4 var(--mono); color:#ccc; background:transparent;
}
.project-composition[data-natural-layout]>figcaption { font-size:12px; line-height:1.6; padding-top:10px; }
.visual-index .exhibit-grid .work-showcase {
  grid-template-columns:minmax(0,2fr) minmax(280px,.9fr); gap:24px;
  align-items:start; padding-block:24px;
}
.visual-index .work-showcase:nth-child(2n) { grid-template-columns:minmax(280px,.9fr) minmax(0,2fr); }
.visual-index .work-showcase:nth-child(2n) .focused-copy { grid-column:1; grid-row:1; }
.visual-index .work-showcase:nth-child(2n) .project-composition { grid-column:2; grid-row:1; }
.visual-index .work-showcase .focused-copy h2 { font-size:clamp(27px,2.4vw,36px); margin:10px 0 14px; }
.visual-index .work-showcase .focused-copy>p:not(.eyebrow) { font-size:16px; line-height:1.65; }
.visual-index .work-context { margin:16px 0; padding-top:14px; gap:8px 14px; }
.visual-index .index-heading { padding:26px 0 18px; gap:24px; }
.visual-index .index-heading h1 { font-size:48px; }
.visual-index .index-toolbar { justify-content:flex-start; gap:12px 28px; padding-bottom:18px; }
@media(max-width:1000px) {
  .visual-index .exhibit-grid .work-showcase { grid-template-columns:1fr; gap:18px; }
  .visual-index .work-showcase:nth-child(2n) .focused-copy,
  .visual-index .work-showcase:nth-child(2n) .project-composition { grid-column:auto; grid-row:auto; }
  .visual-index .work-showcase .focused-copy { max-width:none; }
  .visual-index .work-context { grid-template-columns:85px minmax(0,1fr); }
}
@media(max-width:600px) {
  .visual-index .index-heading h1 { font-size:38px; }
  .visual-index .exhibit-grid .work-showcase { padding-block:20px; }
  .project-composition[data-natural-layout] .composition-label { font-size:10px; }
}

/* Index: the original three-view composition, with readable notes beneath. */
.cinematic-showcase .system-slide { display:block; min-height:0; }
.cinematic-showcase .project-composition[data-layout="index-three"] .composition-grid {
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-areas:"hero detail" "hero context";
  height:clamp(400px,39vw,540px); gap:8px;
}
.cinematic-showcase .composition-tile img,
.cinematic-showcase .composition-tile video { object-fit:contain; transform:none; }
.cinematic-showcase .composition-tile { background:#111; }
.cinematic-showcase .terminal-panel {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:0; padding:22px 0 28px; gap:10px 40px;
}
.cinematic-showcase .terminal-panel h2 { font-size:clamp(27px,2.7vw,38px); min-height:0; }
.cinematic-showcase .terminal-panel dl { margin:0; min-height:0; }
.cinematic-showcase .terminal-panel dd { font-size:15px; }
.cinematic-showcase .terminal-panel dd:last-of-type { font-size:13px; }
.cinematic-showcase .terminal-links { margin-top:8px; }
@media(max-width:700px) {
  .cinematic-showcase .project-composition[data-layout="index-three"] .composition-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-areas:"hero hero" "detail context";
    height:clamp(350px,100vw,460px);
  }
  .cinematic-showcase .terminal-panel { grid-template-columns:1fr; gap:10px; padding:20px 0; }
  .cinematic-showcase .terminal-panel h2 { font-size:28px; }
  .cinematic-showcase .terminal-panel dd { font-size:14px; }
}