/* Shared presentation rules. Asset and simulation behavior stays in its own modules. */
:root {
  --portfolio-width: 1180px;
  --portfolio-gap: 20px;
  --portfolio-radius: 5px;
}
main > .band {
  padding: 64px max(24px, calc((100% - var(--portfolio-width)) / 2));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
main > .band > * { min-width: 0; }
.section-heading, .routine-heading { width: 100%; margin: 0 0 28px; }
.section-heading h2, .routine-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.035em;
  max-width: 28ch;
}
.section-heading > p, .eyebrow, .armor-kicker {
  margin-top: 0;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--teal);
}
.section-heading-compact { margin: 36px 0 18px; }
.section-heading-compact h3, .environment-showcase-heading h3 {
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0;
}
.section-heading-compact span, .environment-showcase-heading p,
.routine-section-note { font-size: .85rem; line-height: 1.6; color: var(--muted); }
.hero-branded .hero-copy { width: min(var(--portfolio-width), calc(100% - 48px)); padding: 28px 0 36px; }
.hero-intro h1 { font-size: 1.3rem; }
.hero-intro h1 span { font-size: clamp(2.3rem, 4vw, 3.3rem); letter-spacing: -.04em; }
.hero-actions a { padding: 10px 18px; font-size: .88rem; border-radius: var(--portfolio-radius); }
.hero-sections { gap: 0 20px; }
.hero-sections a { font-size: .85rem; font-weight: 600; }

/* Equal frames within a collection; contain keeps every model in view. */
.selected-grid, .studio-grid, .routine-animation-grid, .routine-vfx-grid,
.character-grid, .creature-grid, .asset-grid, .canyon-support,
.enclave-study, .corridor-study, .apartment-study { gap: var(--portfolio-gap); }
.selected-grid { align-items: stretch; }
.selected-grid > a, .motion-card, .studio-grid figure, .model-card,
.canyon-showcase figure, .environment-showcase figure, .armor-feature,
.dolphin-feature, .foliage-case, .process-details, .warden-code {
  border: 1px solid var(--line);
  border-radius: var(--portfolio-radius);
  background: var(--panel);
  overflow: hidden;
}
.selected-grid > a { padding-bottom: 18px; }
.selected-grid img { aspect-ratio: 16 / 10; height: auto; max-height: none; margin-bottom: 18px; }
.selected-grid h3 { font-size: 1.15rem; line-height: 1.35; }
.selected-grid p { font-size: .85rem; }
.selected-grid h3, .selected-grid p, .selected-grid .eyebrow { margin-inline: 18px; }
.studio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.studio-grid figure { display: flex; flex-direction: column; }
.studio-grid figure > a { display: block; position: relative; flex: none; min-height: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #39434b; }
.studio-grid img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: #39434b; }
.studio-grid figcaption { flex: 1; display: block; }
.studio-grid h3, .motion-card h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 6px; }
.studio-grid p, .motion-card figcaption p { font-size: .83rem; line-height: 1.6; }
.motion-card figcaption, .studio-grid figcaption, .model-card figcaption { padding: 16px 18px; }
.model-card figcaption { min-height: 66px; font-size: .88rem; line-height: 1.55; align-content: start; }
.model-card figcaption p { margin: 8px 0 0; font-size: .8rem; line-height: 1.65; }
.model-card { display: flex; flex-direction: column; }
.model-card > figcaption { flex: 1; }
.creature-grid, .character-grid, .foliage-grid, .prop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.creature-grid figure img, .character-grid figure img { aspect-ratio: 1; object-fit: contain; }
.asset-grid figure img { aspect-ratio: 4 / 3; object-fit: contain; }
.motion-preview, .vfx-card .motion-preview { aspect-ratio: 4 / 3; }
#vfx-grid, #vfx-studies-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.routine-animation-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.vfx-card .motion-preview { background: #000; }
.motion-card .eyebrow { display: block; margin-bottom: 6px; font-size: .65rem; }
.canyon-showcase { margin-bottom: 40px; }
.canyon-showcase img { height: auto; aspect-ratio: auto; }
.canyon-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--portfolio-gap); }
.canyon-comparison figure { min-width: 0; }
.canyon-comparison a { display: block; background: #080b0c; }
.canyon-comparison img { display: block; width: 100%; aspect-ratio: 1400 / 891; object-fit: contain; }
.canyon-support img { aspect-ratio: 1460 / 856; object-fit: contain; }
.canyon-showcase figcaption, .enclave-study figcaption,
.corridor-study figcaption, .apartment-study figcaption { padding: 12px 16px; font-size: .8rem; line-height: 1.5; }
.environment-showcase { margin-bottom: 40px; }
.enclave-study { grid-template-columns: repeat(3,minmax(0,1fr)); }
.process-details { margin-top: 20px; }
.process-details summary { padding: 16px 18px; font-size: .88rem; font-weight: 600; }
.process-details .process-details { margin: 20px; }
.process-details > .character-grid { margin: 0; }
.routine-showcase { margin-bottom: 48px; }
.routine-project-type { border-radius: var(--portfolio-radius); font-size: .75rem; }
.routine-lead { font-size: 1rem; line-height: 1.65; }
.routine-project-links { margin: 16px 0 24px; }
.interactive-lab { max-width: 100%; margin-bottom: 0; border-radius: var(--portfolio-radius); }
.interactive-lab h3 { font-size: 1.65rem; }
.lab-intro { font-size: .9rem; }
.dolphin-intro, .foliage-intro, .armor-feature-copy { padding: 28px; }
.dolphin-intro h3, .foliage-intro h3 { font-size: clamp(1.45rem,2.4vw,2rem); line-height: 1.2; }
.foliage-hero img { object-fit: contain; }
.warden-code { padding: 24px; gap: 24px; }
.warden-code h3 { font-size: 1.35rem; line-height: 1.35; }
.warden-code p { font-size: .9rem; line-height: 1.7; }
.philosophy-copy { max-width: var(--portfolio-width); }
@media (max-width: 900px) {
  .creature-grid, .character-grid, .asset-grid, .routine-animation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .routine-heading { gap: 12px; }
}
@media (max-width: 620px) {
  :root { --portfolio-gap: 16px; }
  main > .band { padding: 40px 18px; }
  .hero-branded .hero-copy { width: calc(100% - 36px); }
  .section-heading, .routine-heading { margin-bottom: 22px; }
  .section-heading-compact { margin-top: 28px; margin-bottom: 16px; }
  .selected-grid, .studio-grid, .canyon-support, .canyon-comparison, .enclave-study,
  .creature-grid, .character-grid, .routine-animation-grid, .warden-code { grid-template-columns: minmax(0,1fr); }
  .asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #vfx-grid, #vfx-studies-grid { grid-template-columns: minmax(0,1fr); }
  .model-card figcaption, .motion-card figcaption { padding: 14px; }
  .asset-grid figcaption { padding: 10px; font-size: .78rem; }
  .studio-grid figure > a { aspect-ratio: 4 / 3; }
  .dolphin-intro, .foliage-intro, .armor-feature-copy { padding: 22px; }
  .routine-showcase { margin-bottom: 36px; }
}