.studio-archive-header { display: flex; align-items: flex-start; gap: 20px; margin: 8px 0 24px; padding: 20px 22px; background: var(--color-surface-alt, #212121); border: 1px solid var(--color-border, #444); border-radius: var(--radius-md, 8px); } .studio-archive-avatar { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; background: #111; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .studio-archive-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .studio-archive-copy { min-width: 0; flex: 1 1 auto; } .studio-archive-label { display: inline-block; margin-bottom: 6px; font-size: var(--fs-xs, 0.75rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-dim, #999); } .studio-archive-title { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--color-text, #fdfdfd); } .studio-archive-description { margin: 0 0 10px; color: var(--color-text-muted, #c4c4c4); font-size: var(--fs-base, 0.9rem); line-height: 1.5; } .studio-archive-meta { margin: 0 0 12px; color: var(--color-text-dim, #999); font-size: var(--fs-sm, 0.8rem); } @media (max-width: 640px) { .studio-archive-header { gap: 14px; padding: 16px; } .studio-archive-avatar { width: 88px; height: 88px; border-radius: 12px; } }